/* Theme System
   Naming Conventions:
   - Palette: --color-<category>-<scale>
   - Mode: --<name>-light and --<name>-dark
   - Aliases: --color-* and --icon-* resolve current mode
   - Hierarchy: Palette → Mode tokens → Aliases → Components
   - Backward compatibility preserved via alias mapping
   - Detection: data-theme attribute; prefers-color-scheme when unset
*/
:root {
  /* Aliased tokens are defined later; direct assignments removed */

  --color-primary-50: 239 246 255;
  --color-primary-100: 219 234 254;
  --color-primary-200: 191 219 254;
  --color-primary-300: 147 197 253;
  --color-primary-400: 96 165 250;
  --color-primary-500: 59 130 246;
  --color-primary-600: 37 99 235;
  --color-primary-700: 29 78 216;
  --color-primary-800: 30 64 175;
  --color-primary-900: 30 58 138;
  --color-primary-950: 23 37 84;

  --color-secondary-50: 248 250 252;
  --color-secondary-100: 241 245 249;
  --color-secondary-200: 226 232 240;
  --color-secondary-300: 203 213 225;
  --color-secondary-400: 148 163 184;
  --color-secondary-500: 100 116 139;
  --color-secondary-600: 71 85 99;
  --color-secondary-700: 51 65 85;
  --color-secondary-800: 30 41 59;
  --color-secondary-900: 15 23 42;
  --color-secondary-950: 2 6 23;

  --color-neutral-0: 255 255 255;
  --color-neutral-50: 249 250 251;
  --color-neutral-100: 243 244 246;
  --color-neutral-200: 229 231 235;
  --color-neutral-300: 209 213 219;
  --color-neutral-400: 156 163 175;
  --color-neutral-500: 107 114 128;
  --color-neutral-600: 75 85 99;
  --color-neutral-700: 55 65 81;
  --color-neutral-800: 31 41 55;
  --color-neutral-900: 17 24 39;

  --color-success-50: 240 253 244;
  --color-success-100: 220 252 231;
  --color-success-200: 187 247 208;
  --color-success-300: 134 239 172;
  --color-success-400: 74 222 128;
  --color-success-500: 34 197 94;
  --color-success-600: 22 163 74;
  --color-success-700: 21 128 61;
  --color-success-800: 22 101 52;
  --color-success-900: 20 83 45;

  --color-warning-50: 255 251 235;
  --color-warning-100: 254 243 199;
  --color-warning-200: 253 230 138;
  --color-warning-300: 252 211 77;
  --color-warning-400: 251 191 36;
  --color-warning-500: 245 158 11;
  --color-warning-600: 217 119 6;
  --color-warning-700: 180 83 9;
  --color-warning-800: 146 64 14;
  --color-warning-900: 120 53 15;

  --color-error-50: 255 241 242;
  --color-error-100: 255 228 231;
  --color-error-200: 254 205 211;
  --color-error-300: 253 164 175;
  --color-error-400: 251 113 133;
  --color-error-500: 244 63 94;
  --color-error-600: 225 29 72;
  --color-error-700: 190 18 60;
  --color-error-800: 159 18 57;
  --color-error-900: 136 19 55;

  --color-info-50: 224 242 242;
  --color-info-100: 204 240 240;
  --color-info-200: 165 243 252;
  --color-info-300: 103 232 249;
  --color-info-400: 34 211 238;
  --color-info-500: 6 182 212;
  --color-info-600: 8 145 178;
  --color-info-700: 14 116 144;
  --color-info-800: 21 94 117;
  --color-info-900: 22 78 99;
  --color-ocean-500: 14 165 233;
  --color-emerald-500: 16 185 129;

  /* Mode tokens: Light */
  --color-primary-light: var(--color-primary-600);
  --color-primary-hover-light: var(--color-primary-700);
  --color-primary-active-light: var(--color-primary-800);

  --color-secondary-light: var(--color-secondary-600);
  --color-secondary-hover-light: var(--color-secondary-700);
  --color-secondary-active-light: var(--color-secondary-800);

  --color-success-light: var(--color-success-600);
  --color-warning-light: var(--color-warning-600);
  --color-error-light: var(--color-error-600);
  --color-info-light: var(--color-info-600);
  --color-ocean-light: var(--color-ocean-500);
  --color-emerald-light: var(--color-emerald-500);

  --color-bg-light: 249 250 251;
  --color-bg-secondary-light: 255 255 255;
  --color-border-light: 229 231 235;

  --color-text-primary-light: 17 24 39;
  --color-text-secondary-light: 75 85 99;
  --color-text-muted-light: 156 163 175;

  --icon-default-light: 107 114 128;
  --icon-hover-light: 55 65 81;
  --icon-active-light: 17 24 39;
  --icon-disabled-light: 209 213 219;

  /* Aliases: resolve to current mode (default: light) */
  --color-primary: var(--color-primary-light, 37 99 235);
  --color-primary-hover: var(--color-primary-hover-light, 29 78 216);
  --color-primary-active: var(--color-primary-active-light, 30 64 175);

  --color-secondary: var(--color-secondary-light, 71 85 99);
  --color-secondary-hover: var(--color-secondary-hover-light, 51 65 85);
  --color-secondary-active: var(--color-secondary-active-light, 30 41 59);

  --color-success: var(--color-success-light, 22 163 74);
  --color-warning: var(--color-warning-light, 217 119 6);
  --color-error: var(--color-error-light, 225 29 72);
  --color-info: var(--color-info-light, 8 145 178);

  --color-bg: var(--color-bg-light, 249 250 251);
  --color-bg-secondary: var(--color-bg-secondary-light, 255 255 255);
  --color-border: var(--color-border-light, 229 231 235);

  --color-text-primary: var(--color-text-primary-light, 17 24 39);
  --color-text-secondary: var(--color-text-secondary-light, 75 85 99);
  --color-text-muted: var(--color-text-muted-light, 156 163 175);

  --icon-default: var(--icon-default-light, 107 114 128);
  --icon-hover: var(--icon-hover-light, 55 65 81);
  --icon-active: var(--icon-active-light, 17 24 39);
  --icon-disabled: var(--icon-disabled-light, 209 213 219);
  --color-ocean: var(--color-ocean-light, 14 165 233);
  --color-emerald: var(--color-emerald-light, 16 185 129);

  /* Light theme component tokens */
  --light-theme-btn-primary-bg: var(--color-primary-600);
  --light-theme-btn-primary-text: var(--color-neutral-0);
  --light-theme-btn-primary-hover-bg: var(--color-primary-700);
  --light-theme-btn-primary-active-bg: var(--color-primary-800);
  --light-theme-btn-primary-border: var(--color-primary-600);

  --light-theme-btn-secondary-bg: var(--color-bg-secondary);
  --light-theme-btn-secondary-text: var(--color-text-primary);
  --light-theme-btn-secondary-hover-bg: var(--color-neutral-50);
  --light-theme-btn-secondary-active-bg: var(--color-neutral-100);
  --light-theme-btn-secondary-border: var(--color-border);

  --btn-secondary-bg: var(--light-theme-btn-secondary-bg);
  --btn-secondary-text: var(--light-theme-btn-secondary-text);
  --btn-secondary-hover-bg: var(--light-theme-btn-secondary-hover-bg);
  --btn-secondary-active-bg: var(--light-theme-btn-secondary-active-bg);
  --btn-secondary-border: var(--light-theme-btn-secondary-border);

  --light-theme-btn-success-bg: var(--color-success);
  --light-theme-btn-success-hover-bg: var(--color-success-600);
  --light-theme-btn-success-active-bg: var(--color-success-700);
  --light-theme-btn-success-text: var(--color-neutral-0);

  --light-theme-btn-warning-bg: var(--color-warning);
  --light-theme-btn-warning-hover-bg: var(--color-warning-600);
  --light-theme-btn-warning-active-bg: var(--color-warning-700);
  --light-theme-btn-warning-text: var(--color-neutral-0);

  --light-theme-btn-error-bg: var(--color-error);
  --light-theme-btn-error-hover-bg: var(--color-error-600);
  --light-theme-btn-error-active-bg: var(--color-error-700);
  --light-theme-btn-error-text: var(--color-neutral-0);

  --light-theme-input-text: var(--color-text-primary);
  --light-theme-input-bg: var(--color-bg-secondary);
  --light-theme-input-border: var(--color-border);
  --light-theme-input-placeholder: var(--color-text-muted);
  --light-theme-input-focus-color: var(--color-primary-500);
  --light-theme-input-hover-bg: var(--color-neutral-50);
  --light-theme-input-hover-border: var(--color-border);

  --light-theme-dropdown-bg: var(--color-bg-secondary);
  --light-theme-dropdown-text: var(--color-text-primary);
  --light-theme-dropdown-border: var(--color-border);
  --light-theme-dropdown-hover-bg: var(--color-neutral-50);
  --light-theme-dropdown-hover-text: var(--color-text-primary);
  --light-theme-dropdown-selected-bg: var(--color-primary-50);
  --light-theme-dropdown-selected-text: var(--color-primary-700);
  --light-theme-dropdown-shadow: 0 10px 24px rgba(0,0,0,0.15);

  --light-theme-table-bg: var(--color-bg-secondary);
  --light-theme-table-text: var(--color-neutral-600);
  --light-theme-table-border: var(--color-border);
  --light-theme-table-header-bg: var(--color-neutral-50);
  --light-theme-table-header-text: var(--color-neutral-700);
  --light-theme-table-row-bg: var(--color-bg-secondary);
  --light-theme-table-row-hover-bg: var(--color-neutral-100);

  --light-theme-toast-bg: var(--color-bg-secondary);
  --light-theme-toast-text: var(--color-text-primary);
  --light-theme-toast-border: var(--color-border);
  --light-theme-toast-shadow: 0 15px 30px rgba(0,0,0,0.20);

  --light-theme-toast-success-bg: var(--color-success-50);
  --light-theme-toast-success-text: var(--color-success-800);
  --light-theme-toast-success-border: var(--color-success-300);

  --light-theme-toast-warning-bg: var(--color-warning-50);
  --light-theme-toast-warning-text: var(--color-warning-800);
  --light-theme-toast-warning-border: var(--color-warning-300);

  --light-theme-toast-error-bg: var(--color-error-50);
  --light-theme-toast-error-text: var(--color-error-800);
  --light-theme-toast-error-border: var(--color-error-300);

  --light-theme-toast-info-bg: var(--color-primary-50);
  --light-theme-toast-info-text: var(--color-primary-800);
  --light-theme-toast-info-border: var(--color-primary-300);

  --light-theme-disabled-bg: var(--color-neutral-100);
  --light-theme-disabled-text: var(--color-neutral-500);
  --light-theme-disabled-border: var(--color-neutral-200);
  --light-theme-transition-duration-default: 150ms;
  --light-theme-transition-duration-fast: 100ms;
  --light-theme-transition-duration-slow: 300ms;
  --light-theme-transition-easing-default: cubic-bezier(0.4, 0, 0.2, 1);
  --light-theme-opacity-disabled: 0.60;
  --light-theme-opacity-overlay: 0.40;
  --light-theme-opacity-muted: 0.80;
  --light-theme-opacity-hover: 0.95;
}
/* Duplicate :root block removed during theme system rewrite */

[data-theme="dark"] {
  /* Mode tokens: Dark */
  --color-primary-dark: var(--color-primary-500);
  --color-primary-hover-dark: var(--color-primary-400);
  --color-primary-active-dark: var(--color-primary-600);

  --color-secondary-dark: var(--color-secondary-400);
  --color-secondary-hover-dark: var(--color-secondary-300);
  --color-secondary-active-dark: var(--color-secondary-600);

  --color-success-dark: var(--color-success-400);
  --color-warning-dark: var(--color-warning-400);
  --color-error-dark: var(--color-error-400);
  --color-info-dark: var(--color-info-400);

  --color-bg-dark: 17 24 39;
  --color-bg-secondary-dark: 31 41 55;
  --color-border-dark: 55 65 81;

  --color-text-primary-dark: 243 244 246;
  --color-text-secondary-dark: 156 163 175;
  --color-text-muted-dark: 107 114 128;

  --icon-default-dark: 156 163 175;
  --icon-hover-dark: 255 255 255;
  --icon-active-dark: 243 244 246;
  --icon-disabled-dark: 75 85 99;

  /* Canonical aliases mapped to dark */
  --color-primary: var(--color-primary-dark, 59 130 246);
  --color-primary-hover: var(--color-primary-hover-dark, 96 165 250);
  --color-primary-active: var(--color-primary-active-dark, 37 99 235);

  --color-secondary: var(--color-secondary-dark, 148 163 184);
  --color-secondary-hover: var(--color-secondary-hover-dark, 203 213 225);
  --color-secondary-active: var(--color-secondary-active-dark, 71 85 99);

  --color-success: var(--color-success-dark, 74 222 128);
  --color-warning: var(--color-warning-dark, 251 191 36);
  --color-error: var(--color-error-dark, 251 113 133);
  --color-info: var(--color-info-dark, 34 211 238);
  --color-ocean: var(--color-ocean-dark, 14 165 233);
  --color-emerald: var(--color-emerald-dark, 16 185 129);

  --color-bg: var(--color-bg-dark, 17 24 39);
  --color-bg-secondary: var(--color-bg-secondary-dark, 31 41 55);
  --color-border: var(--color-border-dark, 55 65 81);

  --color-text-primary: var(--color-text-primary-dark, 243 244 246);
  --color-text-secondary: var(--color-text-secondary-dark, 156 163 175);
  --color-text-muted: var(--color-text-muted-dark, 107 114 128);

  --icon-default: var(--icon-default-dark, 156 163 175);
  --icon-hover: var(--icon-hover-dark, 255 255 255);
  --icon-active: var(--icon-active-dark, 243 244 246);
  --icon-disabled: var(--icon-disabled-dark, 75 85 99);

  --modal-overlay: 0 0 0;
  --modal-surface: var(--color-bg-secondary);
  --modal-border: var(--color-border);
  --modal-header-bg: var(--color-bg-secondary);
  --modal-header-border: var(--color-border);
  --modal-title-color: var(--color-text-primary);
  --modal-close-color: var(--icon-default);

  --btn-primary-bg: var(--color-primary);
  --btn-primary-hover: var(--color-primary-hover);
  --btn-primary-active: var(--color-primary-active);
  --btn-primary-text: var(--color-neutral-0);

  --btn-secondary-bg: var(--dark-theme-btn-secondary-bg);
  --btn-secondary-border: var(--dark-theme-btn-secondary-border);
  --btn-secondary-text: var(--dark-theme-btn-secondary-text);
  --btn-secondary-hover-bg: var(--dark-theme-btn-secondary-hover-bg);
  --btn-secondary-active-bg: var(--dark-theme-btn-secondary-active-bg);

  --form-bg: var(--color-bg-secondary);
  --form-text: var(--color-text-primary);
  --form-border: var(--color-border);
  --form-placeholder: var(--color-text-muted);
  --form-ring: var(--color-primary-500);

  --nav-bg: var(--color-bg-secondary);
  --nav-border: var(--color-border);
  --nav-text: var(--color-text-primary);
  --nav-icon: var(--icon-default);
  --nav-hover-bg: var(--color-neutral-700);

  /* Input text fields */
  /* Text color for input fields in dark theme */
  --dark-theme-input-text: var(--color-text-primary);
  /* Background color for input fields in dark theme */
  --dark-theme-input-bg: var(--color-bg-secondary);
  /* Border color for input fields in dark theme */
  --dark-theme-input-border: var(--color-border);
  /* Placeholder text color for input fields in dark theme */
  --dark-theme-input-placeholder: var(--color-text-muted);
  /* Focus ring/border accent for inputs in dark theme */
  --dark-theme-input-focus-color: var(--color-primary-500);
  /* Hover background color for inputs in dark theme */
  --dark-theme-input-hover-bg: var(--color-neutral-700);
  /* Hover border color for inputs in dark theme */
  --dark-theme-input-hover-border: var(--color-border);

  /* Dropdown components */
  /* Dropdown panel background in dark theme */
  --dark-theme-dropdown-bg: var(--color-bg-secondary);
  /* Dropdown text color in dark theme */
  --dark-theme-dropdown-text: var(--color-text-primary);
  /* Dropdown border color in dark theme */
  --dark-theme-dropdown-border: var(--color-border);
  /* Dropdown item hover background in dark theme */
  --dark-theme-dropdown-hover-bg: var(--color-neutral-700);
  /* Dropdown item hover text in dark theme */
  --dark-theme-dropdown-hover-text: var(--color-text-primary);
  /* Dropdown selected item background in dark theme */
  --dark-theme-dropdown-selected-bg: var(--color-primary-600);
  /* Dropdown selected item text in dark theme */
  --dark-theme-dropdown-selected-text: var(--color-neutral-0);
  /* Dropdown shadow in dark theme (use as box-shadow) */
  --dark-theme-dropdown-shadow: 0 10px 24px rgba(0,0,0,0.55);

  /* Other common elements */
  /* Disabled background color in dark theme */
  --dark-theme-disabled-bg: var(--color-neutral-800);
  /* Disabled text color in dark theme */
  --dark-theme-disabled-text: var(--color-neutral-500);
  /* Disabled border color in dark theme */
  --dark-theme-disabled-border: var(--color-neutral-700);
  /* Error background tint in dark theme */
  --dark-theme-error-bg: var(--color-neutral-800);
  /* Error text color in dark theme */
  --dark-theme-error-text: var(--color-error-400);
  /* Error border color in dark theme */
  --dark-theme-error-border: var(--color-error-600);
  /* Warning background tint in dark theme */
  --dark-theme-warning-bg: var(--color-neutral-800);
  /* Warning text color in dark theme */
  --dark-theme-warning-text: var(--color-warning-400);
  /* Warning border color in dark theme */
  --dark-theme-warning-border: var(--color-warning-600);
  /* Default transition duration for dark theme interactions */
  --dark-theme-transition-duration-default: 150ms;
  /* Fast transition duration for dark theme interactions */
  --dark-theme-transition-duration-fast: 100ms;
  /* Slow transition duration for dark theme interactions */
  --dark-theme-transition-duration-slow: 300ms;
  /* Default easing curve for dark theme interactions */
  --dark-theme-transition-easing-default: cubic-bezier(0.4, 0, 0.2, 1);
  /* Opacity used for disabled elements in dark theme */
  --dark-theme-opacity-disabled: 0.55;
  /* Opacity used for overlays in dark theme */
  --dark-theme-opacity-overlay: 0.50;
  /* Opacity used for muted text/elements in dark theme */
  --dark-theme-opacity-muted: 0.75;
  /* Opacity used for hover states in dark theme */
  --dark-theme-opacity-hover: 0.90;

  /* Buttons (Dark Theme)
     Primary action buttons in dark mode. */
  --dark-theme-btn-primary-bg: var(--color-primary-600);
  --dark-theme-btn-primary-text: var(--color-neutral-0);
  --dark-theme-btn-primary-hover-bg: var(--color-primary-700);
  --dark-theme-btn-primary-active-bg: var(--color-primary-800);
  --dark-theme-btn-primary-border: var(--color-primary-600);

  /* Secondary buttons in dark mode. */
  --dark-theme-btn-secondary-bg: var(--color-bg-secondary);
  --dark-theme-btn-secondary-text: var(--color-text-primary);
  --dark-theme-btn-secondary-hover-bg: var(--color-neutral-700);
  --dark-theme-btn-secondary-active-bg: var(--color-neutral-800);
  --dark-theme-btn-secondary-border: var(--color-border);

  /* Status buttons in dark mode. */
  --dark-theme-btn-success-bg: var(--color-success);
  --dark-theme-btn-success-hover-bg: var(--color-success-600);
  --dark-theme-btn-success-active-bg: var(--color-success-700);
  --dark-theme-btn-success-text: var(--color-neutral-0);

  --dark-theme-btn-warning-bg: var(--color-warning);
  --dark-theme-btn-warning-hover-bg: var(--color-warning-600);
  --dark-theme-btn-warning-active-bg: var(--color-warning-700);
  --dark-theme-btn-warning-text: var(--color-neutral-0);

  --dark-theme-btn-error-bg: var(--color-error);
  --dark-theme-btn-error-hover-bg: var(--color-error-600);
  --dark-theme-btn-error-active-bg: var(--color-error-700);
  --dark-theme-btn-error-text: var(--color-neutral-0);

  /* Tables (Dark Theme)
     Basic table styling and interactions. */
  --dark-theme-table-bg: var(--color-bg-secondary);
  --dark-theme-table-text: var(--color-neutral-300);
  --dark-theme-table-border: var(--color-border);
  --dark-theme-table-header-bg: var(--color-neutral-800);
  --dark-theme-table-header-text: var(--color-neutral-200);
  --dark-theme-table-row-bg: var(--color-bg-secondary);
  --dark-theme-table-row-hover-bg: var(--color-neutral-700);

  /* Toast Notifications (Dark Theme)
     Container and type-specific tokens. */
  --dark-theme-toast-bg: var(--color-bg-secondary);
  --dark-theme-toast-text: var(--color-text-primary);
  --dark-theme-toast-border: var(--color-border);
  --dark-theme-toast-shadow: 0 15px 30px rgba(0,0,0,0.60);

  --dark-theme-toast-success-bg: var(--color-success-50);
  --dark-theme-toast-success-text: var(--color-success-800);
  --dark-theme-toast-success-border: var(--color-success-300);

  --dark-theme-toast-warning-bg: var(--color-warning-50);
  --dark-theme-toast-warning-text: var(--color-warning-800);
  --dark-theme-toast-warning-border: var(--color-warning-300);

  --dark-theme-toast-error-bg: var(--color-error-50);
  --dark-theme-toast-error-text: var(--color-error-800);
  --dark-theme-toast-error-border: var(--color-error-300);

  --dark-theme-toast-info-bg: var(--color-primary-50);
  --dark-theme-toast-info-text: var(--color-primary-800);
  --dark-theme-toast-info-border: var(--color-primary-300);
}
/* System preference detection: applies when data-theme is not set */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-primary: var(--color-primary-dark, 59 130 246);
    --color-primary-hover: var(--color-primary-hover-dark, 96 165 250);
    --color-primary-active: var(--color-primary-active-dark, 37 99 235);

    --color-secondary: var(--color-secondary-dark, 148 163 184);
    --color-secondary-hover: var(--color-secondary-hover-dark, 203 213 225);
    --color-secondary-active: var(--color-secondary-active-dark, 71 85 99);

    --color-success: var(--color-success-dark, 74 222 128);
    --color-warning: var(--color-warning-dark, 251 191 36);
    --color-error: var(--color-error-dark, 251 113 133);
    --color-info: var(--color-info-dark, 34 211 238);

    --color-bg: var(--color-bg-dark, 17 24 39);
    --color-bg-secondary: var(--color-bg-secondary-dark, 31 41 55);
    --color-border: var(--color-border-dark, 55 65 81);

    --color-text-primary: var(--color-text-primary-dark, 243 244 246);
    --color-text-secondary: var(--color-text-secondary-dark, 156 163 175);
    --color-text-muted: var(--color-text-muted-dark, 107 114 128);

    --icon-default: var(--icon-default-dark, 156 163 175);
    --icon-hover: var(--icon-hover-dark, 255 255 255);
    --icon-active: var(--icon-active-dark, 243 244 246);
    --icon-disabled: var(--icon-disabled-dark, 75 85 99);
  }
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --color-primary: var(--color-primary-light, 37 99 235);
    --color-primary-hover: var(--color-primary-hover-light, 29 78 216);
    --color-primary-active: var(--color-primary-active-light, 30 64 175);

    --color-secondary: var(--color-secondary-light, 71 85 99);
    --color-secondary-hover: var(--color-secondary-hover-light, 51 65 85);
    --color-secondary-active: var(--color-secondary-active-light, 30 41 59);

    --color-success: var(--color-success-light, 22 163 74);
    --color-warning: var(--color-warning-light, 217 119 6);
    --color-error: var(--color-error-light, 225 29 72);
    --color-info: var(--color-info-light, 8 145 178);

    --color-bg: var(--color-bg-light, 249 250 251);
    --color-bg-secondary: var(--color-bg-secondary-light, 255 255 255);
    --color-border: var(--color-border-light, 229 231 235);

    --color-text-primary: var(--color-text-primary-light, 17 24 39);
    --color-text-secondary: var(--color-text-secondary-light, 75 85 99);
    --color-text-muted: var(--color-text-muted-light, 156 163 175);

    --icon-default: var(--icon-default-light, 107 114 128);
    --icon-hover: var(--icon-hover-light, 55 65 81);
    --icon-active: var(--icon-active-light, 17 24 39);
    --icon-disabled: var(--icon-disabled-light, 209 213 219);
  }
}

/* Fallbacks for browsers without CSS variables */
@supports not (color: var(--fallback-test)) {
  body {
    background-color: #f9fafb;
    color: #111827;
  }
}

/* ── Cotton Activity Timeline (global) ─────────────────────────────── */
.activity-timeline {
  --at-rail: 0.75rem;          /* horizontal center of line + dots */
  --at-dot-size: 0.625rem;
  --at-line-width: 2px;
  --at-gap: 0.875rem;          /* space from rail center to content */
  --at-line: rgb(var(--color-border, 229 231 235));
  --at-dot: rgb(var(--color-primary-500, 59 130 246));
  --at-dot-pending: rgb(var(--color-neutral-300, 209 213 219));
  --at-badge-bg: rgb(var(--color-primary-50, 239 246 255));
  --at-badge-fg: rgb(var(--color-primary-700, 29 78 216));
  --at-badge-pending-bg: rgb(var(--color-neutral-100, 243 244 246));
  --at-badge-pending-fg: rgb(var(--color-neutral-500, 107 114 128));
  --at-badge-current-bg: rgb(var(--color-primary-600, 37 99 235));
  --at-badge-current-fg: #fff;
  --at-surface: rgb(var(--color-bg-secondary, 255 255 255));
}

[data-theme="dark"] .activity-timeline {
  --at-line: rgb(var(--color-neutral-700, 64 64 64));
  --at-dot-pending: rgb(var(--color-neutral-600, 82 82 82));
  --at-badge-pending-bg: rgb(var(--color-neutral-800, 38 38 38));
  --at-badge-pending-fg: rgb(var(--color-neutral-400, 163 163 163));
  --at-surface: rgb(var(--color-neutral-800, 38 38 38));
}

.activity-timeline-list {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

/* Vertical rail — centered on --at-rail */
.activity-timeline-list::before {
  content: "";
  position: absolute;
  left: calc(var(--at-rail) - (var(--at-line-width) / 2));
  top: 0.45rem;
  bottom: 0.45rem;
  width: var(--at-line-width);
  background: var(--at-line);
  border-radius: 9999px;
}

.activity-timeline-item {
  position: relative;
  padding: 0 0 1.15rem calc(var(--at-rail) + var(--at-gap));
}

.activity-timeline-item:last-child {
  padding-bottom: 0;
}

/* Dot — same center as the rail */
.activity-timeline-dot {
  position: absolute;
  left: calc(var(--at-rail) - (var(--at-dot-size) / 2));
  top: 0.4rem;
  width: var(--at-dot-size);
  height: var(--at-dot-size);
  border-radius: 9999px;
  background: var(--at-dot);
  border: 2px solid var(--at-surface);
  box-sizing: border-box;
  z-index: 1;
}

.activity-timeline-item.is-pending .activity-timeline-dot {
  background: var(--at-surface);
  border: 2px solid var(--at-dot-pending);
}

.activity-timeline-item.is-current .activity-timeline-dot,
.activity-timeline-item.is-done .activity-timeline-dot {
  background: var(--at-dot);
  border-color: var(--at-surface);
  box-shadow: 0 0 0 3px rgb(var(--color-primary-200, 191 219 254) / 0.55);
}

.activity-timeline-item.is-current .activity-timeline-dot {
  width: calc(var(--at-dot-size) + 2px);
  height: calc(var(--at-dot-size) + 2px);
  left: calc(var(--at-rail) - ((var(--at-dot-size) + 2px) / 2));
  top: 0.32rem;
}

.activity-timeline-body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.activity-timeline-badge {
  display: inline-block;
  align-self: flex-start;
  max-width: 100%;
  padding: 0.15rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.25rem;
  background: var(--at-badge-bg);
  color: var(--at-badge-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.activity-timeline-item.is-pending .activity-timeline-badge {
  background: var(--at-badge-pending-bg);
  color: var(--at-badge-pending-fg);
}

.activity-timeline-item.is-current .activity-timeline-badge {
  background: var(--at-badge-current-bg);
  color: var(--at-badge-current-fg);
}

.activity-timeline-actor {
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgb(var(--color-text-primary, 17 24 39));
  word-break: break-word;
}

.activity-timeline-item.is-pending .activity-timeline-actor {
  color: rgb(var(--color-text-muted, 156 163 175));
  font-weight: 500;
}

.activity-timeline-time {
  font-size: 0.6875rem;
  color: rgb(var(--color-text-muted, 156 163 175));
}

.activity-timeline-more {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.1rem;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 0.8125rem;
  color: rgb(var(--color-primary-600, 37 99 235));
}

.activity-timeline-more:hover {
  color: rgb(var(--color-primary-700, 29 78 216));
}

.activity-timeline-chevron {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.activity-timeline-more[aria-expanded="true"] .activity-timeline-chevron {
  transform: rotate(90deg);
}

.activity-timeline-detail {
  margin-top: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  border: 1px solid rgb(var(--color-border, 229 231 235));
  background: rgb(var(--color-neutral-50, 249 250 251));
  font-size: 0.75rem;
  color: rgb(var(--color-text-primary, 17 24 39));
}

[data-theme="dark"] .activity-timeline-detail {
  background: rgb(var(--color-neutral-800, 38 38 38) / 0.6);
}

.activity-timeline-detail.is-hidden,
.activity-timeline-detail[hidden] {
  display: none;
}

.activity-timeline-empty {
  padding-left: 0.25rem;
  font-size: 0.875rem;
  color: rgb(var(--color-text-muted, 156 163 175));
}

/* Sample task / TNA detail: left stack | activity timeline */
.sample-task-top,
.tna-detail-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: start;
}

.sample-task-main,
.tna-detail-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.sample-task-timeline,
.tna-detail-timeline {
  min-width: 0;
}

@media (min-width: 1024px) {
  .sample-task-top,
  .tna-detail-split {
    grid-template-columns: minmax(0, 1fr) 300px;
  }

  .sample-task-timeline,
  .tna-detail-timeline {
    position: sticky;
    top: 1rem;
    width: 300px;
    max-width: 300px;
  }
}

/* Closed overlays keep "flex" for centering. Minified output.css can put .flex
   after .hidden, which would leave confirm/excel/WhatsApp panels covering the app. */
.hidden.flex,
.hidden.inline-flex {
  display: none !important;
}