@import 'tailwindcss';

@theme {
  --color-th-bg: var(--bg-primary);
  --color-th-bg-s: var(--bg-secondary);
  --color-th-bg-t: var(--bg-tertiary);
  --color-th-text: var(--text-primary);
  --color-th-text-s: var(--text-secondary);
  --color-th-accent: var(--accent);
  --color-th-accent-h: var(--accent-hover);
  --color-th-accent-t: var(--accent-text);
  --color-th-border: var(--border);
  --color-th-card: var(--card-bg);
  --color-th-input: var(--input-bg);
  --color-th-input-b: var(--input-border);
  --color-th-nav: var(--nav-bg);
  --color-th-side: var(--sidebar-bg);
  --color-th-hover: var(--hover-bg);
  --color-th-success: var(--success);
  --color-th-warning: var(--warning);
  --color-th-error: var(--error);
  --color-th-ring: var(--ring);

  --font-sans: Inter, system-ui, -apple-system, sans-serif;

  --shadow-th:
    0 1px 3px 0 var(--shadow-color), 0 1px 2px -1px var(--shadow-color);
  --shadow-th-lg:
    0 10px 15px -3px var(--shadow-color), 0 4px 6px -4px var(--shadow-color);
}

/*
  The default border color has changed to `currentcolor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.

  If we ever want to remove these styles, we need to add an explicit border
  color utility to any element that depends on these defaults.
*/
@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentcolor);
  }

  /* Restore Tailwind v3 default: buttons get a pointer cursor */
  button:not(:disabled),
  [role="button"]:not([aria-disabled="true"]) {
    cursor: pointer;
  }

  /* Respect the user's OS-level reduced-motion preference: collapse
     animations and transitions to near-instant instead of removing them,
     so JS animation/transition event handlers still fire. */
  @media (prefers-reduced-motion: reduce) {
    *,
    ::before,
    ::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

@utility btn-primary {
  @apply inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg font-medium
    bg-th-accent text-th-accent-t hover:bg-th-accent-h
    transition-all duration-200 ease-out
    focus:outline-hidden focus:ring-2 focus:ring-th-ring focus:ring-offset-2
    cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed;
  --tw-ring-offset-color: var(--bg-primary);
}

@utility btn-secondary {
  @apply inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg font-medium
    bg-th-bg-s text-th-text border border-th-border
    hover:bg-th-hover transition-all duration-200 ease-out
    focus:outline-hidden focus:ring-2 focus:ring-th-ring focus:ring-offset-2
    cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed;
  --tw-ring-offset-color: var(--bg-primary);
}

@utility btn-danger {
  @apply inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg font-medium
    bg-th-error text-white hover:opacity-90
    transition-all duration-200 ease-out
    focus:outline-hidden focus:ring-2 focus:ring-th-error focus:ring-offset-2
    cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed;
  --tw-ring-offset-color: var(--bg-primary);
}

@utility btn-ghost {
  @apply inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg font-medium
    text-th-text-s hover:bg-th-hover hover:text-th-text
    transition-all duration-200 ease-out
    focus:outline-hidden focus:ring-2 focus:ring-th-ring focus:ring-offset-2
    cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed;
  --tw-ring-offset-color: var(--bg-primary);
}

@utility input-field {
  @apply w-full px-4 py-2.5 rounded-lg
    bg-th-input text-th-text placeholder-th-text-s
    border border-th-input-b
    focus:outline-hidden focus:ring-2 focus:ring-th-ring focus:border-transparent
    transition-all duration-200;
}

@utility card {
  @apply bg-th-card rounded-xl border border-th-border
    shadow-th transition-all duration-200;
}

@utility card-hover {
  @apply card hover:shadow-th-lg cursor-pointer;
  &:hover {
    border-color: color-mix(in srgb, var(--accent) 30%, transparent);
  }
}

@utility gradient-text {
  background: linear-gradient(
    135deg,
    var(--gradient-start),
    var(--gradient-end)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

@utility gradient-bg {
  background: linear-gradient(
    135deg,
    var(--gradient-start),
    var(--gradient-end)
  );
}

@layer base {
  /* ===== DEFAULT LIGHT ===== */
  :root,
  [data-theme="light"] {
    color-scheme: light;
    --picker-icon-filter: none;
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --bg-tertiary: #f1f5f9;
    --text-primary: #0f172a;
    --text-secondary: #64748b;
    --accent: #3b82f6;
    --accent-hover: #2563eb;
    --accent-text: #ffffff;
    --border: #e2e8f0;
    --card-bg: #ffffff;
    --input-bg: #ffffff;
    --input-border: #cbd5e1;
    --nav-bg: #ffffff;
    --sidebar-bg: #f8fafc;
    --hover-bg: #f1f5f9;
    --success: #22c55e;
    --warning: #eab308;
    --error: #ef4444;
    --ring: #3b82f6;
    --shadow-color: rgba(0, 0, 0, 0.08);
    --gradient-start: #3b82f6;
    --gradient-end: #8b5cf6;
  }

  /* ===== DEFAULT DARK ===== */
  [data-theme="dark"] {
    color-scheme: dark;
    --picker-icon-filter: invert(0.8);
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-tertiary: #334155;
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --accent: #3b82f6;
    --accent-hover: #60a5fa;
    --accent-text: #ffffff;
    --border: #334155;
    --card-bg: #1e293b;
    --input-bg: #1e293b;
    --input-border: #475569;
    --nav-bg: #1e293b;
    --sidebar-bg: #0f172a;
    --hover-bg: #334155;
    --success: #22c55e;
    --warning: #eab308;
    --error: #ef4444;
    --ring: #3b82f6;
    --shadow-color: rgba(0, 0, 0, 0.3);
    --gradient-start: #3b82f6;
    --gradient-end: #8b5cf6;
  }

  /* ===== DRACULA ===== */
  [data-theme="dracula"] {
    color-scheme: dark;
    --picker-icon-filter: invert(0.8);
    --bg-primary: #282a36;
    --bg-secondary: #44475a;
    --bg-tertiary: #383a4c;
    --text-primary: #f8f8f2;
    --text-secondary: #6272a4;
    --accent: #bd93f9;
    --accent-hover: #caa8fc;
    --accent-text: #282a36;
    --border: #44475a;
    --card-bg: #383a4c;
    --input-bg: #44475a;
    --input-border: #6272a4;
    --nav-bg: #21222c;
    --sidebar-bg: #21222c;
    --hover-bg: #44475a;
    --success: #50fa7b;
    --warning: #f1fa8c;
    --error: #ff5555;
    --ring: #bd93f9;
    --shadow-color: rgba(0, 0, 0, 0.4);
    --gradient-start: #bd93f9;
    --gradient-end: #ff79c6;
  }

  /* ===== CATPPUCCIN MOCHA ===== */
  [data-theme="mocha"] {
    color-scheme: dark;
    --picker-icon-filter: invert(0.8);
    --bg-primary: #1e1e2e;
    --bg-secondary: #313244;
    --bg-tertiary: #45475a;
    --text-primary: #cdd6f4;
    --text-secondary: #a6adc8;
    --accent: #89b4fa;
    --accent-hover: #b4befe;
    --accent-text: #1e1e2e;
    --border: #45475a;
    --card-bg: #313244;
    --input-bg: #313244;
    --input-border: #585b70;
    --nav-bg: #181825;
    --sidebar-bg: #181825;
    --hover-bg: #45475a;
    --success: #a6e3a1;
    --warning: #f9e2af;
    --error: #f38ba8;
    --ring: #89b4fa;
    --shadow-color: rgba(0, 0, 0, 0.4);
    --gradient-start: #89b4fa;
    --gradient-end: #cba6f7;
  }

  /* ===== CATPPUCCIN LATTE (Light) ===== */
  [data-theme="latte"] {
    color-scheme: light;
    --picker-icon-filter: none;
    --bg-primary: #eff1f5;
    --bg-secondary: #e6e9ef;
    --bg-tertiary: #dce0e8;
    --text-primary: #4c4f69;
    --text-secondary: #6c6f85;
    --accent: #1e66f5;
    --accent-hover: #2a6ef5;
    --accent-text: #ffffff;
    --border: #ccd0da;
    --card-bg: #e6e9ef;
    --input-bg: #eff1f5;
    --input-border: #bcc0cc;
    --nav-bg: #e6e9ef;
    --sidebar-bg: #dce0e8;
    --hover-bg: #dce0e8;
    --success: #40a02b;
    --warning: #df8e1d;
    --error: #d20f39;
    --ring: #1e66f5;
    --shadow-color: rgba(76, 79, 105, 0.1);
    --gradient-start: #1e66f5;
    --gradient-end: #8839ef;
  }

  /* ===== NORD ===== */
  [data-theme="nord"] {
    color-scheme: dark;
    --picker-icon-filter: invert(0.8);
    --bg-primary: #2e3440;
    --bg-secondary: #3b4252;
    --bg-tertiary: #434c5e;
    --text-primary: #eceff4;
    --text-secondary: #d8dee9;
    --accent: #88c0d0;
    --accent-hover: #8fbcbb;
    --accent-text: #2e3440;
    --border: #4c566a;
    --card-bg: #3b4252;
    --input-bg: #3b4252;
    --input-border: #4c566a;
    --nav-bg: #2e3440;
    --sidebar-bg: #2e3440;
    --hover-bg: #434c5e;
    --success: #a3be8c;
    --warning: #ebcb8b;
    --error: #bf616a;
    --ring: #88c0d0;
    --shadow-color: rgba(0, 0, 0, 0.3);
    --gradient-start: #88c0d0;
    --gradient-end: #b48ead;
  }

  /* ===== TOKYO NIGHT ===== */
  [data-theme="tokyo-night"] {
    color-scheme: dark;
    --picker-icon-filter: invert(0.8);
    --bg-primary: #1a1b26;
    --bg-secondary: #24283b;
    --bg-tertiary: #2f3349;
    --text-primary: #a9b1d6;
    --text-secondary: #565f89;
    --accent: #7aa2f7;
    --accent-hover: #89b4fa;
    --accent-text: #1a1b26;
    --border: #3b4261;
    --card-bg: #24283b;
    --input-bg: #24283b;
    --input-border: #3b4261;
    --nav-bg: #16161e;
    --sidebar-bg: #16161e;
    --hover-bg: #2f3349;
    --success: #9ece6a;
    --warning: #e0af68;
    --error: #f7768e;
    --ring: #7aa2f7;
    --shadow-color: rgba(0, 0, 0, 0.4);
    --gradient-start: #7aa2f7;
    --gradient-end: #bb9af7;
  }

  /* ===== GRUVBOX DARK ===== */
  [data-theme="gruvbox-dark"] {
    color-scheme: dark;
    --picker-icon-filter: invert(0.8);
    --bg-primary: #282828;
    --bg-secondary: #3c3836;
    --bg-tertiary: #504945;
    --text-primary: #ebdbb2;
    --text-secondary: #a89984;
    --accent: #fe8019;
    --accent-hover: #fabd2f;
    --accent-text: #282828;
    --border: #504945;
    --card-bg: #3c3836;
    --input-bg: #3c3836;
    --input-border: #665c54;
    --nav-bg: #1d2021;
    --sidebar-bg: #1d2021;
    --hover-bg: #504945;
    --success: #b8bb26;
    --warning: #fabd2f;
    --error: #fb4934;
    --ring: #fe8019;
    --shadow-color: rgba(0, 0, 0, 0.4);
    --gradient-start: #fe8019;
    --gradient-end: #fabd2f;
  }

  /* ===== GRUVBOX LIGHT ===== */
  [data-theme="gruvbox-light"] {
    color-scheme: light;
    --picker-icon-filter: none;
    --bg-primary: #fbf1c7;
    --bg-secondary: #ebdbb2;
    --bg-tertiary: #d5c4a1;
    --text-primary: #3c3836;
    --text-secondary: #665c54;
    --accent: #d65d0e;
    --accent-hover: #af3a03;
    --accent-text: #fbf1c7;
    --border: #d5c4a1;
    --card-bg: #ebdbb2;
    --input-bg: #fbf1c7;
    --input-border: #bdae93;
    --nav-bg: #ebdbb2;
    --sidebar-bg: #ebdbb2;
    --hover-bg: #d5c4a1;
    --success: #79740e;
    --warning: #b57614;
    --error: #cc241d;
    --ring: #d65d0e;
    --shadow-color: rgba(60, 56, 54, 0.1);
    --gradient-start: #d65d0e;
    --gradient-end: #b57614;
  }

  /* ===== ROSE PINE ===== */
  [data-theme="rose-pine"] {
    color-scheme: dark;
    --picker-icon-filter: invert(0.8);
    --bg-primary: #191724;
    --bg-secondary: #1f1d2e;
    --bg-tertiary: #26233a;
    --text-primary: #e0def4;
    --text-secondary: #908caa;
    --accent: #c4a7e7;
    --accent-hover: #ebbcba;
    --accent-text: #191724;
    --border: #393552;
    --card-bg: #1f1d2e;
    --input-bg: #1f1d2e;
    --input-border: #393552;
    --nav-bg: #191724;
    --sidebar-bg: #191724;
    --hover-bg: #26233a;
    --success: #9ccfd8;
    --warning: #f6c177;
    --error: #eb6f92;
    --ring: #c4a7e7;
    --shadow-color: rgba(0, 0, 0, 0.4);
    --gradient-start: #c4a7e7;
    --gradient-end: #eb6f92;
  }

  /* ===== ROSE PINE DAWN (Light) ===== */
  [data-theme="rose-pine-dawn"] {
    color-scheme: light;
    --picker-icon-filter: none;
    --bg-primary: #faf4ed;
    --bg-secondary: #fffaf3;
    --bg-tertiary: #f2e9e1;
    --text-primary: #575279;
    --text-secondary: #797593;
    --accent: #907aa9;
    --accent-hover: #b4637a;
    --accent-text: #faf4ed;
    --border: #dfdad9;
    --card-bg: #fffaf3;
    --input-bg: #faf4ed;
    --input-border: #dfdad9;
    --nav-bg: #fffaf3;
    --sidebar-bg: #f2e9e1;
    --hover-bg: #f2e9e1;
    --success: #56949f;
    --warning: #ea9d34;
    --error: #b4637a;
    --ring: #907aa9;
    --shadow-color: rgba(87, 82, 121, 0.08);
    --gradient-start: #907aa9;
    --gradient-end: #b4637a;
  }

  /* ===== SOLARIZED DARK ===== */
  [data-theme="solarized-dark"] {
    color-scheme: dark;
    --picker-icon-filter: invert(0.8);
    --bg-primary: #002b36;
    --bg-secondary: #073642;
    --bg-tertiary: #0a4050;
    --text-primary: #839496;
    --text-secondary: #657b83;
    --accent: #268bd2;
    --accent-hover: #2aa198;
    --accent-text: #fdf6e3;
    --border: #073642;
    --card-bg: #073642;
    --input-bg: #073642;
    --input-border: #586e75;
    --nav-bg: #002b36;
    --sidebar-bg: #002b36;
    --hover-bg: #0a4050;
    --success: #859900;
    --warning: #b58900;
    --error: #dc322f;
    --ring: #268bd2;
    --shadow-color: rgba(0, 0, 0, 0.4);
    --gradient-start: #268bd2;
    --gradient-end: #2aa198;
  }

  /* ===== SOLARIZED LIGHT ===== */
  [data-theme="solarized-light"] {
    color-scheme: light;
    --picker-icon-filter: none;
    --bg-primary: #fdf6e3;
    --bg-secondary: #eee8d5;
    --bg-tertiary: #e4ddc8;
    --text-primary: #657b83;
    --text-secondary: #93a1a1;
    --accent: #268bd2;
    --accent-hover: #2aa198;
    --accent-text: #fdf6e3;
    --border: #eee8d5;
    --card-bg: #eee8d5;
    --input-bg: #fdf6e3;
    --input-border: #d3cbb7;
    --nav-bg: #eee8d5;
    --sidebar-bg: #eee8d5;
    --hover-bg: #e4ddc8;
    --success: #859900;
    --warning: #b58900;
    --error: #dc322f;
    --ring: #268bd2;
    --shadow-color: rgba(101, 123, 131, 0.1);
    --gradient-start: #268bd2;
    --gradient-end: #2aa198;
  }

  /* ===== ONE DARK ===== */
  [data-theme="one-dark"] {
    color-scheme: dark;
    --picker-icon-filter: invert(0.8);
    --bg-primary: #282c34;
    --bg-secondary: #2c313a;
    --bg-tertiary: #353b45;
    --text-primary: #abb2bf;
    --text-secondary: #636d83;
    --accent: #61afef;
    --accent-hover: #79bcf5;
    --accent-text: #282c34;
    --border: #3e4452;
    --card-bg: #2c313a;
    --input-bg: #2c313a;
    --input-border: #3e4452;
    --nav-bg: #21252b;
    --sidebar-bg: #21252b;
    --hover-bg: #353b45;
    --success: #98c379;
    --warning: #e5c07b;
    --error: #e06c75;
    --ring: #61afef;
    --shadow-color: rgba(0, 0, 0, 0.4);
    --gradient-start: #61afef;
    --gradient-end: #c678dd;
  }

  /* ===== GITHUB DARK ===== */
  [data-theme="github-dark"] {
    color-scheme: dark;
    --picker-icon-filter: invert(0.8);
    --bg-primary: #0d1117;
    --bg-secondary: #161b22;
    --bg-tertiary: #21262d;
    --text-primary: #c9d1d9;
    --text-secondary: #8b949e;
    --accent: #58a6ff;
    --accent-hover: #79c0ff;
    --accent-text: #0d1117;
    --border: #30363d;
    --card-bg: #161b22;
    --input-bg: #0d1117;
    --input-border: #30363d;
    --nav-bg: #161b22;
    --sidebar-bg: #0d1117;
    --hover-bg: #21262d;
    --success: #3fb950;
    --warning: #d29922;
    --error: #f85149;
    --ring: #58a6ff;
    --shadow-color: rgba(0, 0, 0, 0.4);
    --gradient-start: #58a6ff;
    --gradient-end: #bc8cff;
  }

  * {
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
  }

  *::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  *::-webkit-scrollbar-track {
    background: transparent;
  }

  *::-webkit-scrollbar-thumb {
    background-color: var(--border);
    border-radius: 3px;
  }
  }

  @layer utilities {
  /* ===== SCRUNKLY.CAT DARK ===== */
  [data-theme='scrunkly-cat'] {
    color-scheme: dark;
    --picker-icon-filter: invert(0.8);
    --bg-primary: #161924;
    --bg-secondary: #161924;
    --bg-tertiary: #1b2130;
    --text-primary: #dadada;
    --text-secondary: #94a3b8;
    --accent: #b30051;
    --accent-hover: #d6336a;
    --accent-text: #ffffff;
    --border: rgba(255, 255, 255, 0.1);
    --card-bg: #1b2130;
    --input-bg: rgba(255, 255, 255, 0.05);
    --input-border: rgba(255, 255, 255, 0.1);
    --nav-bg: #1b2130;
    --sidebar-bg: #161924;
    --hover-bg: rgba(255, 255, 255, 0.03);
    --success: #86b300;
    --warning: #ecb637;
    --error: #ec4137;
    --ring: #b30051;
    --shadow-color: rgba(0, 0, 0, 0.3);
    --gradient-start: #b30051;
    --gradient-end: #d6336a;
  }

  /* ===== RED MODULAR LIGHT ===== */
  [data-theme='red-modular-light'] {
    color-scheme: light;
    --picker-icon-filter: none;
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --bg-tertiary: #f1f5f9;
    --text-primary: #000000;
    --text-secondary: #333333;
    --accent: #e60000;
    --accent-hover: #ff3333;
    --accent-text: #ffffff;
    --border: #e2e8f0;
    --card-bg: #ffffff;
    --input-bg: #ffffff;
    --input-border: #cbd5e1;
    --nav-bg: #ffffff;
    --sidebar-bg: #f8fafc;
    --hover-bg: #f1f5f9;
    --success: #86b300;
    --warning: #ecb637;
    --error: #ec4137;
    --ring: #e60000;
    --shadow-color: rgba(0, 0, 0, 0.3);
    --gradient-start: #e60000;
    --gradient-end: #ff3333;
  }

  /* ===== EVERFOREST DARK ===== */
  [data-theme='everforest-dark'] {
    color-scheme: dark;
    --picker-icon-filter: invert(0.8);
    --bg-primary: #2d353b;
    --bg-secondary: #343f44;
    --bg-tertiary: #3d484d;
    --text-primary: #d3c6aa;
    --text-secondary: #859289;
    --accent: #a7c080;
    --accent-hover: #bdd4a0;
    --accent-text: #2d353b;
    --border: #4f585e;
    --card-bg: #343f44;
    --input-bg: #343f44;
    --input-border: #4f585e;
    --nav-bg: #272e33;
    --sidebar-bg: #272e33;
    --hover-bg: #3d484d;
    --success: #a7c080;
    --warning: #e69875;
    --error: #e67e80;
    --ring: #a7c080;
    --shadow-color: rgba(0, 0, 0, 0.35);
    --gradient-start: #a7c080;
    --gradient-end: #83c092;
  }

  /* ===== EVERFOREST LIGHT ===== */
  [data-theme='everforest-light'] {
    color-scheme: light;
    --picker-icon-filter: none;
    --bg-primary: #fdf6e3;
    --bg-secondary: #f4f0d9;
    --bg-tertiary: #eae4ca;
    --text-primary: #5c6a72;
    --text-secondary: #829181;
    --accent: #8da101;
    --accent-hover: #6e8c00;
    --accent-text: #fdf6e3;
    --border: #d5ceb5;
    --card-bg: #f4f0d9;
    --input-bg: #fdf6e3;
    --input-border: #c5bda0;
    --nav-bg: #f4f0d9;
    --sidebar-bg: #eae4ca;
    --hover-bg: #eae4ca;
    --success: #8da101;
    --warning: #dfa000;
    --error: #f85552;
    --ring: #8da101;
    --shadow-color: rgba(92, 106, 114, 0.1);
    --gradient-start: #8da101;
    --gradient-end: #35a77c;
  }

  /* ===== KANAGAWA ===== */
  [data-theme='kanagawa'] {
    color-scheme: dark;
    --picker-icon-filter: invert(0.8);
    --bg-primary: #1f1f28;
    --bg-secondary: #2a2a37;
    --bg-tertiary: #363646;
    --text-primary: #dcd7ba;
    --text-secondary: #727169;
    --accent: #7e9cd8;
    --accent-hover: #98b4e8;
    --accent-text: #1f1f28;
    --border: #363646;
    --card-bg: #2a2a37;
    --input-bg: #2a2a37;
    --input-border: #363646;
    --nav-bg: #16161d;
    --sidebar-bg: #16161d;
    --hover-bg: #363646;
    --success: #76946a;
    --warning: #dca561;
    --error: #c34043;
    --ring: #7e9cd8;
    --shadow-color: rgba(0, 0, 0, 0.45);
    --gradient-start: #7e9cd8;
    --gradient-end: #957fb8;
  }

  /* ===== AYU DARK ===== */
  [data-theme='ayu-dark'] {
    color-scheme: dark;
    --picker-icon-filter: invert(0.8);
    --bg-primary: #0d1017;
    --bg-secondary: #131721;
    --bg-tertiary: #1a212e;
    --text-primary: #bfbdb6;
    --text-secondary: #6c7380;
    --accent: #39bae6;
    --accent-hover: #59ccf0;
    --accent-text: #0d1017;
    --border: #1a212e;
    --card-bg: #131721;
    --input-bg: #0d1017;
    --input-border: #242b38;
    --nav-bg: #0d1017;
    --sidebar-bg: #0d1017;
    --hover-bg: #1a212e;
    --success: #aad94c;
    --warning: #ffb454;
    --error: #f07178;
    --ring: #39bae6;
    --shadow-color: rgba(0, 0, 0, 0.5);
    --gradient-start: #39bae6;
    --gradient-end: #6a9ff7;
  }

  /* ===== MOONLIGHT ===== */
  [data-theme='moonlight'] {
    color-scheme: dark;
    --picker-icon-filter: invert(0.8);
    --bg-primary: #212337;
    --bg-secondary: #2b2d3f;
    --bg-tertiary: #353750;
    --text-primary: #c8d3f5;
    --text-secondary: #828dae;
    --accent: #82aaff;
    --accent-hover: #9dbdff;
    --accent-text: #212337;
    --border: #353750;
    --card-bg: #2b2d3f;
    --input-bg: #2b2d3f;
    --input-border: #444668;
    --nav-bg: #1e2030;
    --sidebar-bg: #1e2030;
    --hover-bg: #353750;
    --success: #c3e88d;
    --warning: #ffc777;
    --error: #ff757f;
    --ring: #82aaff;
    --shadow-color: rgba(0, 0, 0, 0.4);
    --gradient-start: #82aaff;
    --gradient-end: #c099ff;
  }

  /* ===== CYBERPUNK ===== */
  [data-theme='cyberpunk'] {
    color-scheme: dark;
    --picker-icon-filter: invert(0.8);
    --bg-primary: #0a0a0f;
    --bg-secondary: #0e0e1a;
    --bg-tertiary: #141428;
    --text-primary: #e0e0ff;
    --text-secondary: #7878bb;
    --accent: #ff0080;
    --accent-hover: #ff33a0;
    --accent-text: #ffffff;
    --border: #1e1e3a;
    --card-bg: #0e0e1a;
    --input-bg: #0d0d18;
    --input-border: #1e1e3a;
    --nav-bg: #07070f;
    --sidebar-bg: #07070f;
    --hover-bg: #141428;
    --success: #00ff9f;
    --warning: #ffdd00;
    --error: #ff3333;
    --ring: #ff0080;
    --shadow-color: rgba(255, 0, 128, 0.15);
    --gradient-start: #ff0080;
    --gradient-end: #00e5ff;
  }

  /* ===== COTTON CANDY LIGHT ===== */
  [data-theme='cotton-candy-light'] {
    color-scheme: light;
    --picker-icon-filter: none;
    --bg-primary: #fff5f9;
    --bg-secondary: #ffe8f2;
    --bg-tertiary: #ffd6e8;
    --text-primary: #8b2635;
    --text-secondary: #b05470;
    --accent: #ff85a2;
    --accent-hover: #ff6b8d;
    --accent-text: #ffffff;
    --border: #ffc2d9;
    --card-bg: #ffe8f2;
    --input-bg: #fff5f9;
    --input-border: #ffaac8;
    --nav-bg: #ffe8f2;
    --sidebar-bg: #ffd6e8;
    --hover-bg: #ffd6e8;
    --success: #5cb85c;
    --warning: #f0ad4e;
    --error: #d9534f;
    --ring: #ff85a2;
    --shadow-color: rgba(255, 133, 162, 0.15);
    --gradient-start: #ff85a2;
    --gradient-end: #c084fc;
  }
}

/* ═══════════════════════════════════════════════════════════════
   FLATPICKR THEMED OVERRIDES  —  fully driven by CSS variables
   ═══════════════════════════════════════════════════════════════ */

/* Calendar container — appended to body */
.flatpickr-calendar {
  background: var(--card-bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: 0.75rem !important;
  box-shadow: 0 10px 25px -5px var(--shadow-color), 0 4px 10px -6px var(--shadow-color) !important;
  font-family: inherit !important;
  color: var(--text-primary) !important;
  z-index: 9999 !important;
  overflow: hidden;
}

.flatpickr-calendar::before,
.flatpickr-calendar::after {
  display: none !important;  /* hide arrow */
}

/* ── Month navigation ─────────────────────────────────────────── */
.flatpickr-months {
  background: var(--bg-secondary) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 0 !important;
  align-items: center !important;
  height: 2.75rem !important;
  position: relative !important;
}

.flatpickr-months .flatpickr-month {
  background: transparent !important;
  color: var(--text-primary) !important;
  height: 2.75rem !important;
  display: flex !important;
  align-items: center !important;
}

.flatpickr-current-month {
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  width: 100% !important;
  position: relative !important;
  left: 0 !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
  background: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
  border: none !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months option {
  background: var(--card-bg) !important;
  color: var(--text-primary) !important;
}

.flatpickr-current-month input.cur-year {
  color: var(--text-primary) !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  color: var(--text-secondary) !important;
  fill: var(--text-secondary) !important;
  padding: 0.5rem 0.625rem !important;
  transition: color 0.15s !important;
  display: flex !important;
  align-items: center !important;
  height: 2.75rem !important;
  top: 0 !important;
}

.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
  color: var(--text-primary) !important;
  fill: var(--text-primary) !important;
}

.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
  fill: inherit !important;
  width: 12px !important;
  height: 12px !important;
}

/* ── Day names row ────────────────────────────────────────────── */
.flatpickr-weekdays {
  background: var(--bg-secondary) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 0.125rem 0 !important;
}

span.flatpickr-weekday {
  color: var(--text-secondary) !important;
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

/* ── Days grid ────────────────────────────────────────────────── */
.flatpickr-days {
  border: none !important;
}

.dayContainer {
  padding: 0.25rem !important;
}

.flatpickr-day {
  color: var(--text-primary) !important;
  border: none !important;
  border-radius: 0.375rem !important;
  font-size: 0.8125rem !important;
  transition: background 0.12s, color 0.12s !important;
}

.flatpickr-day:hover:not(.selected):not(.flatpickr-disabled) {
  background: var(--hover-bg) !important;
  border: none !important;
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover {
  background: var(--accent) !important;
  color: var(--accent-text) !important;
  border: none !important;
  font-weight: 600 !important;
}

.flatpickr-day.today:not(.selected) {
  font-weight: 700 !important;
  color: var(--accent) !important;
  border: none !important;
  position: relative !important;
}

.flatpickr-day.today:not(.selected)::after {
  content: '';
  position: absolute;
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
}

.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: var(--text-secondary) !important;
  opacity: 0.4 !important;
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
  color: var(--text-secondary) !important;
  opacity: 0.3 !important;
  cursor: not-allowed !important;
}

/* ── Time picker ──────────────────────────────────────────────── */
.flatpickr-time {
  border-top: 1px solid var(--border) !important;
  background: var(--bg-secondary) !important;
  max-height: none !important;
  height: auto !important;
}

.flatpickr-time input {
  color: var(--text-primary) !important;
  background: transparent !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums !important;
}

.flatpickr-time input:hover,
.flatpickr-time input:focus {
  background: var(--hover-bg) !important;
  border-radius: 0.375rem !important;
}

.flatpickr-time .flatpickr-time-separator {
  color: var(--text-secondary) !important;
  font-weight: 600 !important;
}

.flatpickr-time .flatpickr-am-pm {
  color: var(--text-primary) !important;
  background: transparent !important;
}

.flatpickr-time .numInputWrapper span {
  border: none !important;
}

.flatpickr-time .numInputWrapper span.arrowUp::after {
  border-bottom-color: var(--text-secondary) !important;
}

.flatpickr-time .numInputWrapper span.arrowDown::after {
  border-top-color: var(--text-secondary) !important;
}

.flatpickr-time .numInputWrapper:hover span.arrowUp::after {
  border-bottom-color: var(--text-primary) !important;
}

.flatpickr-time .numInputWrapper:hover span.arrowDown::after {
  border-top-color: var(--text-primary) !important;
}

