body {
  font-family: Arial, Helvetica, sans-serif;
}

.text-balance {
  text-wrap: balance;
}

/* Hide scrollbar but keep functionality */
.scrollbar-hide {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari and Opera */
}

:root {
  /* Base Color Palette (Light Mode - Default) — marca TAWN */
  --color-primary: #511A73;
  --color-primary-hover: #3d1456;
  --color-secondary: #FDBA20;
  --color-secondary-hover: #e5a918;
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-danger: #ef4444;
  --color-info: #3b82f6;

  /* Core Theme Variables (Light Mode) */
  --background: #F9FAFB;
  --foreground: #111827;
  --card: #FFFFFF;
  --card-foreground: #111827;
  --popover: #FFFFFF;
  --popover-foreground: #111827;
  --primary: #511A73;
  --primary-foreground: #FFFFFF;
  --secondary: #FDBA20;
  --secondary-foreground: #1a0a24;
  --muted: #F3F4F6;
  --muted-foreground: #6B7280;
  --accent: #E5E7EB;
  --accent-foreground: #111827;
  --destructive: #ef4444;
  --destructive-foreground: #FFFFFF;
  --border: #E5E7EB;
  --input: #FFFFFF;
  --input-text: #111827;
  --ring: #511A73;
  --radius: 0.75rem;

  /* Sidebar Variables (Light Mode) */
  --sidebar-background: #FFFFFF;
  --sidebar-foreground: #374151;
  --sidebar-primary: #511A73;
  --sidebar-primary-foreground: #FFFFFF;
  --sidebar-accent: #F3F4F6;
  --sidebar-accent-foreground: #111827;
  --sidebar-border: #E5E7EB;
  --sidebar-ring: #511A73;
}

.dark {
  /* Core Theme Variables (Dark Mode) */
  --background: #111827;
  --foreground: #FFFFFF;
  --card: #1F2937;
  --card-foreground: #FFFFFF;
  --popover: #1F2937;
  --popover-foreground: #FFFFFF;
  --primary: #511A73;
  --primary-foreground: #FFFFFF;
  --secondary: #FDBA20;
  --secondary-foreground: #1a0a24;
  --muted: #374151;
  --muted-foreground: #9CA3AF;
  --accent: #374151;
  --accent-foreground: #FFFFFF;
  --destructive: #ef4444;
  --destructive-foreground: #FFFFFF;
  --border: #374151;
  --input: #374151;
  --input-text: #FFFFFF;
  --ring: #511A73;

  /* Sidebar Variables (Dark Mode) */
  --sidebar-background: #111827;
  --sidebar-foreground: #FFFFFF;
  --sidebar-primary: #511A73;
  --sidebar-primary-foreground: #FFFFFF;
  --sidebar-accent: #374151;
  --sidebar-accent-foreground: #FFFFFF;
  --sidebar-border: #374151;
  --sidebar-ring: #511A73;
}

/* Palette: Blue (Ocean) */
.palette-blue {
  --color-primary: #1E40AF;
  --color-primary-hover: #1E3A8A;
  --color-secondary: #60A5FA;
  --primary: #1E40AF;
  --ring: #1E40AF;
}

/* Palette: Green (Forest) */
.palette-green {
  --color-primary: #065F46;
  --color-primary-hover: #064E3B;
  --color-secondary: #34D399;
  --primary: #065F46;
  --ring: #065F46;
}

/* Palette: Purple (Royal) */
.palette-purple {
  --color-primary: #5B21B6;
  --color-primary-hover: #4C1D95;
  --color-secondary: #A78BFA;
  --primary: #5B21B6;
  --ring: #5B21B6;
}

/* Palette: Dopamine (Contrast) */
.palette-dopamine {
  --color-primary: #FF4E50;
  --color-primary-hover: #E64547;
  --color-secondary: #F9D423;
  --primary: #FF4E50;
  --ring: #FF4E50;
  /* High contrast overrides */
  --sidebar-background: #1D2671;
  --sidebar-foreground: #FFFFFF;
  --sidebar-primary: #FF4E50;
}

/* Palette: Midnight Gold (Premium) */
.palette-gold {
  --color-primary: #D4AF37;
  --color-primary-hover: #C5A028;
  --color-secondary: #1F2937;
  --primary: #D4AF37;
  --ring: #D4AF37;
  /* Theme overrides for gold */
  --background: #0F172A;
  --foreground: #F8FAFC;
  --card: #1E293B;
  --sidebar-background: #0F172A;
  --sidebar-primary: #D4AF37;
}

/* Palette: Soft Rose (Elegant) */
.palette-rose {
  --color-primary: #E11D48;
  --color-primary-hover: #BE123C;
  --color-secondary: #FFE4E6;
  --primary: #E11D48;
  --ring: #E11D48;
  /* Soft palette */
  --background: #FFF1F2;
  --foreground: #4C0519;
  --card: #FFFFFF;
  --sidebar-background: #FFFFFF;
  --sidebar-primary: #E11D48;
  --sidebar-foreground: #4C0519;
}

/* Palette: Cyberpunk (Neon) */
.palette-cyber {
  --color-primary: #F0ABFC;
  --color-primary-hover: #E879F9;
  --color-secondary: #22D3EE;
  --primary: #F0ABFC;
  --ring: #F0ABFC;
  /* Cyber overrides */
  --background: #09090B;
  --foreground: #FAFAFA;
  --card: #18181B;
  --sidebar-background: #09090B;
  --sidebar-primary: #F0ABFC;
  --border: #27272A;
}

* {
  border-color: var(--border);
}

body {
  background-color: var(--background);
  color: var(--foreground);
}

/* Tom Select (multi) — alinhado ao tema / dark */
.ts-wrapper {
  font-family: inherit;
}

.ts-wrapper.single .ts-control {
  min-height: 2.5rem;
}

.ts-control {
  background-color: var(--input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.25rem 0.5rem;
  min-height: 2.75rem;
  box-shadow: none;
}

.ts-control input {
  color: var(--foreground);
}

.focus .ts-control,
.ts-wrapper:focus-within .ts-control {
  border-color: var(--ring);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ring) 25%, transparent);
}

.ts-dropdown {
  background-color: var(--popover);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.08);
  z-index: 50;
}

.ts-dropdown .option,
.ts-dropdown .create {
  color: var(--popover-foreground);
  padding: 0.5rem 0.75rem;
}

.ts-dropdown .option:hover,
.ts-dropdown .create:hover,
.ts-dropdown .active {
  background-color: var(--muted);
  color: var(--foreground);
}

.ts-wrapper.multi .ts-control > div {
  gap: 0.25rem;
}

.ts-wrapper.multi .item {
  background-color: color-mix(in srgb, var(--primary) 15%, transparent);
  color: var(--primary);
  border-radius: calc(var(--radius) - 2px);
  padding: 0.125rem 0.5rem;
  margin: 0.125rem 0.125rem 0.125rem 0;
}

.ts-wrapper.multi .item .remove {
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 35%, transparent);
}

.ts-wrapper.multi .item .remove:hover {
  background-color: color-mix(in srgb, var(--destructive) 12%, transparent);
  color: var(--destructive);
}