/**
 * UI Component System - CSS Design Tokens & Styles
 * All styling via CSS classes only - no inline styles
 */

/* ============================================
   DESIGN TOKENS (CSS Custom Properties)
   ============================================ */

:root {
  /* ============================================
     HYPER-PARAMETERS — The 24 knobs that control everything
     ============================================ */

  /* Color (8) */
  --hp-hue-1: 217;
  --hp-sat-1: 75;
  --hp-hue-2: 260;
  --hp-sat-2: 60;
  --hp-hue-accent: 157;
  --hp-neutral-warmth: 0;
  --hp-surface-tint: 0;

  /* Shape (2) */
  --hp-corner-scale: 0.75;
  --hp-border-scale: 0.5;

  /* Effects (6) */
  --hp-shadow-intensity: 0.08;
  --hp-shadow-blur: 1.2;
  --hp-hover-intensity: 0.8;
  --hp-sharpness: 1;
  --hp-backdrop-blur: 0;
  --hp-transition-speed: 1;

  /* Layout (2) */
  --hp-density: 1;
  --hp-scale: 1;

  /* Typography (4) */
  --hp-style-weight: 0.8;
  --hp-range: 1;
  --hp-letter-spacing: 0;
  --hp-line-height: 1.5;

  /* ============================================
     LIGHTNESS SCALE — Foundation for all colors
     Dark mode inverts these; everything follows
     ============================================ */
  --l-50:  97%;
  --l-100: 93%;
  --l-200: 86%;
  --l-300: 76%;
  --l-400: 64%;
  --l-500: 50%;
  --l-600: 41%;
  --l-700: 33%;
  --l-800: 24%;
  --l-900: 16%;
  --l-950:  9%;

  /* ============================================
     PRIMARY COLOR SCALE — from hp-hue-1, hp-sat-1
     ============================================ */
  --ui-pri-h: var(--hp-hue-1);
  --ui-pri-s: calc(var(--hp-sat-1) * 1%);

  --ui-primary-50:  hsl(var(--ui-pri-h), var(--ui-pri-s), var(--l-50));
  --ui-primary-100: hsl(var(--ui-pri-h), var(--ui-pri-s), var(--l-100));
  --ui-primary-200: hsl(var(--ui-pri-h), var(--ui-pri-s), var(--l-200));
  --ui-primary-300: hsl(var(--ui-pri-h), var(--ui-pri-s), var(--l-300));
  --ui-primary-400: hsl(var(--ui-pri-h), var(--ui-pri-s), var(--l-400));
  --ui-primary-500: hsl(var(--ui-pri-h), var(--ui-pri-s), var(--l-500));
  --ui-primary-600: hsl(var(--ui-pri-h), var(--ui-pri-s), var(--l-600));
  --ui-primary-700: hsl(var(--ui-pri-h), var(--ui-pri-s), var(--l-700));
  --ui-primary-800: hsl(var(--ui-pri-h), var(--ui-pri-s), var(--l-800));
  --ui-primary-900: hsl(var(--ui-pri-h), var(--ui-pri-s), var(--l-900));

  --ui-primary:       var(--ui-primary-500);
  --ui-primary-hover: var(--ui-primary-600);
  --ui-primary-light: var(--ui-primary-50);
  --ui-primary-dark:  var(--ui-primary-800);

  /* ============================================
     SECONDARY COLOR SCALE — from hp-hue-2, hp-sat-2
     ============================================ */
  --ui-sec-h: var(--hp-hue-2);
  --ui-sec-s: calc(var(--hp-sat-2) * 1%);

  --ui-secondary-50:  hsl(var(--ui-sec-h), var(--ui-sec-s), var(--l-50));
  --ui-secondary-100: hsl(var(--ui-sec-h), var(--ui-sec-s), var(--l-100));
  --ui-secondary-200: hsl(var(--ui-sec-h), var(--ui-sec-s), var(--l-200));
  --ui-secondary-300: hsl(var(--ui-sec-h), var(--ui-sec-s), var(--l-300));
  --ui-secondary-400: hsl(var(--ui-sec-h), var(--ui-sec-s), var(--l-400));
  --ui-secondary-500: hsl(var(--ui-sec-h), var(--ui-sec-s), var(--l-500));
  --ui-secondary-600: hsl(var(--ui-sec-h), var(--ui-sec-s), var(--l-600));
  --ui-secondary-700: hsl(var(--ui-sec-h), var(--ui-sec-s), var(--l-700));
  --ui-secondary-800: hsl(var(--ui-sec-h), var(--ui-sec-s), var(--l-800));
  --ui-secondary-900: hsl(var(--ui-sec-h), var(--ui-sec-s), var(--l-900));

  --ui-secondary:       var(--ui-secondary-500);
  --ui-secondary-hover: var(--ui-secondary-600);
  --ui-secondary-light: var(--ui-secondary-50);
  --ui-secondary-dark:  var(--ui-secondary-800);

  /* ============================================
     ACCENT COLOR SCALE — tertiary from hp-hue-accent
     ============================================ */
  --ui-acc-h: var(--hp-hue-accent);
  --ui-acc-s: calc(var(--hp-sat-1) * 0.8%);

  --ui-accent-50:  hsl(var(--ui-acc-h), var(--ui-acc-s), var(--l-50));
  --ui-accent-100: hsl(var(--ui-acc-h), var(--ui-acc-s), var(--l-100));
  --ui-accent-200: hsl(var(--ui-acc-h), var(--ui-acc-s), var(--l-200));
  --ui-accent-300: hsl(var(--ui-acc-h), var(--ui-acc-s), var(--l-300));
  --ui-accent-400: hsl(var(--ui-acc-h), var(--ui-acc-s), var(--l-400));
  --ui-accent-500: hsl(var(--ui-acc-h), var(--ui-acc-s), var(--l-500));
  --ui-accent-600: hsl(var(--ui-acc-h), var(--ui-acc-s), var(--l-600));
  --ui-accent-700: hsl(var(--ui-acc-h), var(--ui-acc-s), var(--l-700));
  --ui-accent-800: hsl(var(--ui-acc-h), var(--ui-acc-s), var(--l-800));
  --ui-accent-900: hsl(var(--ui-acc-h), var(--ui-acc-s), var(--l-900));

  --ui-accent:       var(--ui-accent-500);
  --ui-accent-hover: var(--ui-accent-600);
  --ui-accent-light: var(--ui-accent-50);
  --ui-accent-dark:  var(--ui-accent-800);

  /* ============================================
     NEUTRAL PALETTE — tinted grays for cohesion
     ============================================ */
  --ui-neu-h: calc(var(--hp-hue-1) + var(--hp-neutral-warmth) * 20);
  --ui-neu-s: calc(var(--hp-sat-1) * (0.06 + var(--hp-surface-tint) * 0.12) * 1%);

  --ui-white:    hsl(var(--ui-pri-h), calc(var(--hp-surface-tint) * var(--hp-sat-1) * 0.15 * 1%), calc(100% - var(--hp-surface-tint) * 2%));
  --ui-gray-50:  hsl(var(--ui-neu-h), var(--ui-neu-s), var(--l-50));
  --ui-gray-100: hsl(var(--ui-neu-h), var(--ui-neu-s), var(--l-100));
  --ui-gray-200: hsl(var(--ui-neu-h), var(--ui-neu-s), var(--l-200));
  --ui-gray-300: hsl(var(--ui-neu-h), var(--ui-neu-s), var(--l-300));
  --ui-gray-400: hsl(var(--ui-neu-h), var(--ui-neu-s), var(--l-400));
  --ui-gray-500: hsl(var(--ui-neu-h), var(--ui-neu-s), var(--l-500));
  --ui-gray-600: hsl(var(--ui-neu-h), var(--ui-neu-s), var(--l-600));
  --ui-gray-700: hsl(var(--ui-neu-h), var(--ui-neu-s), var(--l-700));
  --ui-gray-800: hsl(var(--ui-neu-h), var(--ui-neu-s), var(--l-800));
  --ui-gray-900: hsl(var(--ui-neu-h), var(--ui-neu-s), var(--l-900));
  --ui-black:    hsl(var(--ui-neu-h), var(--ui-neu-s), var(--l-950));

  /* ============================================
     STATUS COLORS — fixed hues, same lightness scale
     ============================================ */
  --ui-suc-h: 145;  --ui-suc-s: 55%;
  --ui-dan-h: 0;    --ui-dan-s: 60%;
  --ui-war-h: 40;   --ui-war-s: 80%;
  --ui-inf-h: 200;  --ui-inf-s: 60%;

  --ui-success:       hsl(var(--ui-suc-h), var(--ui-suc-s), var(--l-500));
  --ui-success-hover: hsl(var(--ui-suc-h), var(--ui-suc-s), var(--l-600));
  --ui-success-light: hsl(var(--ui-suc-h), var(--ui-suc-s), var(--l-50));
  --ui-success-dark:  hsl(var(--ui-suc-h), var(--ui-suc-s), var(--l-800));

  --ui-danger:        hsl(var(--ui-dan-h), var(--ui-dan-s), 55%);
  --ui-danger-hover:  hsl(var(--ui-dan-h), var(--ui-dan-s), var(--l-600));
  --ui-danger-light:  hsl(var(--ui-dan-h), var(--ui-dan-s), var(--l-50));
  --ui-danger-dark:   hsl(var(--ui-dan-h), var(--ui-dan-s), var(--l-800));

  --ui-warning:       hsl(var(--ui-war-h), var(--ui-war-s), 50%);
  --ui-warning-hover: hsl(var(--ui-war-h), var(--ui-war-s), var(--l-600));
  --ui-warning-light: hsl(var(--ui-war-h), var(--ui-war-s), var(--l-50));
  --ui-warning-dark:  hsl(var(--ui-war-h), var(--ui-war-s), var(--l-800));

  --ui-info:          hsl(var(--ui-inf-h), var(--ui-inf-s), var(--l-500));
  --ui-info-hover:    hsl(var(--ui-inf-h), var(--ui-inf-s), var(--l-600));
  --ui-info-light:    hsl(var(--ui-inf-h), var(--ui-inf-s), var(--l-50));
  --ui-info-dark:     hsl(var(--ui-inf-h), var(--ui-inf-s), var(--l-800));

  /* ============================================
     TYPOGRAPHY — derived from hyper-parameters
     ============================================ */
  --ui-font-heading: 'Inter', system-ui, sans-serif;
  --ui-font-body: 'Inter', system-ui, sans-serif;
  --ui-font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Modular type scale from --hp-range */
  --ui-type-ratio: calc(1.0 + (0.25 * var(--hp-range)));
  --ui-text-xs:   calc(0.75rem * var(--hp-scale));
  --ui-text-sm:   calc(0.875rem * var(--hp-scale));
  --ui-text-base: calc(1rem * var(--hp-scale));
  --ui-text-lg:   calc(1rem * var(--ui-type-ratio) * var(--hp-scale));
  --ui-text-xl:   calc(1rem * var(--ui-type-ratio) * var(--ui-type-ratio) * var(--hp-scale));
  --ui-text-2xl:  calc(1rem * var(--ui-type-ratio) * var(--ui-type-ratio) * var(--ui-type-ratio) * var(--hp-scale));
  --ui-text-3xl:  calc(1rem * var(--ui-type-ratio) * var(--ui-type-ratio) * var(--ui-type-ratio) * var(--ui-type-ratio) * var(--hp-scale));
  --ui-text-4xl:  calc(1rem * var(--ui-type-ratio) * var(--ui-type-ratio) * var(--ui-type-ratio) * var(--ui-type-ratio) * var(--ui-type-ratio) * var(--hp-scale));

  /* Font weights derived from style-weight */
  --ui-font-normal: 400;
  --ui-font-medium: 500;
  --ui-font-semibold: 600;
  --ui-font-bold: 700;

  /* Line height & letter spacing */
  --ui-leading-tight: calc(var(--hp-line-height) - 0.25);
  --ui-leading-normal: var(--hp-line-height);
  --ui-leading-relaxed: calc(var(--hp-line-height) + 0.25);
  --ui-ls-body: calc(var(--hp-letter-spacing) * 1em);
  --ui-ls-heading: calc(var(--hp-letter-spacing) * 0.5em - 0.01em);

  /* ============================================
     SPACING — derived from density + scale
     ============================================ */
  --ui-space-unit: calc(0.25rem * var(--hp-density) * var(--hp-scale));
  --ui-space-0: 0;
  --ui-space-1: var(--ui-space-unit);
  --ui-space-2: calc(var(--ui-space-unit) * 2);
  --ui-space-3: calc(var(--ui-space-unit) * 3);
  --ui-space-4: calc(var(--ui-space-unit) * 4);
  --ui-space-5: calc(var(--ui-space-unit) * 5);
  --ui-space-6: calc(var(--ui-space-unit) * 6);
  --ui-space-8: calc(var(--ui-space-unit) * 8);
  --ui-space-10: calc(var(--ui-space-unit) * 10);
  --ui-space-12: calc(var(--ui-space-unit) * 12);
  --ui-space-16: calc(var(--ui-space-unit) * 16);

  /* ============================================
     BORDER RADIUS — from corner-scale
     ============================================ */
  --ui-radius-none: 0;
  --ui-radius-sm:  calc(2px * var(--hp-corner-scale));
  --ui-radius-md:  calc(4px * var(--hp-corner-scale));
  --ui-radius-lg:  calc(6px * var(--hp-corner-scale));
  --ui-radius-xl:  calc(8px * var(--hp-corner-scale));
  --ui-radius-2xl: calc(12px * var(--hp-corner-scale));
  --ui-radius-full: 9999px;

  /* ============================================
     BORDER WIDTH — from style-weight + border-scale
     ============================================ */
  --ui-border-width: calc((0.5px + 1.2px * var(--hp-style-weight)) * var(--hp-border-scale) * (0.5 + 0.5 * var(--hp-sharpness)));

  /* ============================================
     SHADOWS — intensity + blur + sharpness controlled
     Sharpness inverts blur: high sharpness = tighter shadows
     ============================================ */
  --ui-shadow-blur-factor: calc(var(--hp-shadow-blur) / max(var(--hp-sharpness), 0.3));
  --ui-shadow-none: none;
  --ui-shadow-sm: 0 1px calc(2px * var(--ui-shadow-blur-factor)) 0 rgb(0 0 0 / var(--hp-shadow-intensity));
  --ui-shadow-md: 0 4px calc(6px * var(--ui-shadow-blur-factor)) -1px rgb(0 0 0 / var(--hp-shadow-intensity)),
                  0 2px calc(4px * var(--ui-shadow-blur-factor)) -2px rgb(0 0 0 / var(--hp-shadow-intensity));
  --ui-shadow-lg: 0 10px calc(15px * var(--ui-shadow-blur-factor)) -3px rgb(0 0 0 / var(--hp-shadow-intensity)),
                  0 4px calc(6px * var(--ui-shadow-blur-factor)) -4px rgb(0 0 0 / var(--hp-shadow-intensity));
  --ui-shadow-xl: 0 20px calc(25px * var(--ui-shadow-blur-factor)) -5px rgb(0 0 0 / var(--hp-shadow-intensity)),
                  0 8px calc(10px * var(--ui-shadow-blur-factor)) -6px rgb(0 0 0 / var(--hp-shadow-intensity));
  --ui-shadow-2xl: 0 25px calc(50px * var(--ui-shadow-blur-factor)) -12px rgb(0 0 0 / calc(var(--hp-shadow-intensity) * 2.5));
  --ui-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / var(--hp-shadow-intensity));

  /* ============================================
     TRANSITIONS — speed multiplier
     ============================================ */
  --ui-transition-fast: calc(150ms * var(--hp-transition-speed)) ease;
  --ui-transition-normal: calc(250ms * var(--hp-transition-speed)) ease;
  --ui-transition-slow: calc(350ms * var(--hp-transition-speed)) ease;

  /* ============================================
     HOVER EFFECTS — intensity controlled
     ============================================ */
  --ui-hover-lift: calc(-1px * var(--hp-hover-intensity));
  --ui-hover-shadow-boost: calc(var(--hp-shadow-intensity) * (1 + var(--hp-hover-intensity)));

  /* ============================================
     GLASS / MATERIAL
     ============================================ */
  --ui-glass-blur: calc(var(--hp-backdrop-blur) * 1px);
  --ui-glass-bg: rgba(255, 255, 255, calc(0.7 + 0.2 * (1 - var(--hp-backdrop-blur) / 30)));

  /* ============================================
     FOCUS RING
     ============================================ */
  --ui-focus-ring: 0 0 0 calc(2px * var(--hp-border-scale) + 1px) var(--ui-primary-200);

  /* ============================================
     Z-INDEX LAYERS (unchanged)
     ============================================ */
  --ui-z-dropdown: 100;
  --ui-z-sticky: 200;
  --ui-z-modal-backdrop: 300;
  --ui-z-modal: 400;
  --ui-z-popover: 500;
  --ui-z-tooltip: 600;
  --ui-z-toast: 700;

  /* ============================================
     LEGACY COMPAT — theme config aliases
     ============================================ */
  --ui-density: var(--hp-density);
  --ui-radius-default: var(--ui-radius-md);
}

/* ============================================
   DARK MODE — Lightness scale inversion
   All colors (primary, secondary, neutral, status)
   adapt automatically. No per-color redeclaration.
   ============================================ */

[data-theme="dark"], .dark {
  /* Invert lightness scale — everything follows */
  --l-50:   9%;
  --l-100: 13%;
  --l-200: 18%;
  --l-300: 25%;
  --l-400: 38%;
  --l-500: 55%;
  --l-600: 62%;
  --l-700: 72%;
  --l-800: 82%;
  --l-900: 90%;
  --l-950: 96%;

  /* White surface becomes dark */
  --ui-white: hsl(var(--ui-neu-h), var(--ui-neu-s), 7%);

  /* Glass material adapts */
  --ui-glass-bg: rgba(0, 0, 0, calc(0.3 + 0.15 * var(--hp-backdrop-blur) / 30));

  /* Shadows stronger for dark mode contrast */
  --ui-shadow-sm: 0 1px calc(2px * var(--ui-shadow-blur-factor)) 0 rgb(0 0 0 / calc(var(--hp-shadow-intensity) + 0.15));
  --ui-shadow-md: 0 4px calc(6px * var(--ui-shadow-blur-factor)) -1px rgb(0 0 0 / calc(var(--hp-shadow-intensity) + 0.15)),
                  0 2px calc(4px * var(--ui-shadow-blur-factor)) -2px rgb(0 0 0 / calc(var(--hp-shadow-intensity) + 0.1));
  --ui-shadow-lg: 0 10px calc(15px * var(--ui-shadow-blur-factor)) -3px rgb(0 0 0 / calc(var(--hp-shadow-intensity) + 0.2)),
                  0 4px calc(6px * var(--ui-shadow-blur-factor)) -4px rgb(0 0 0 / calc(var(--hp-shadow-intensity) + 0.15));
}

/* ============================================
   SHARED COLOR SYSTEM — [data-color] palettes
   Components reference --_c, --_c-hover, --_c-light, --_c-dark
   ============================================ */
[data-color="primary"]   { --_c: var(--ui-primary);   --_c-hover: var(--ui-primary-hover);   --_c-light: var(--ui-primary-light);   --_c-dark: var(--ui-primary-dark); }
[data-color="secondary"] { --_c: var(--ui-secondary); --_c-hover: var(--ui-secondary-hover); --_c-light: var(--ui-secondary-light); --_c-dark: var(--ui-secondary-dark); }
[data-color="success"]   { --_c: var(--ui-success);   --_c-hover: var(--ui-success-hover);   --_c-light: var(--ui-success-light);   --_c-dark: var(--ui-success-dark); }
[data-color="danger"]    { --_c: var(--ui-danger);     --_c-hover: var(--ui-danger-hover);     --_c-light: var(--ui-danger-light);     --_c-dark: var(--ui-danger-dark); }
[data-color="warning"]   { --_c: var(--ui-warning);   --_c-hover: var(--ui-warning-hover);   --_c-light: var(--ui-warning-light);   --_c-dark: var(--ui-warning-dark); }
[data-color="info"]      { --_c: var(--ui-info);       --_c-hover: var(--ui-info-hover);       --_c-light: var(--ui-info-light);       --_c-dark: var(--ui-info-dark); }
[data-color="gray"]      { --_c: var(--ui-gray-500);  --_c-hover: var(--ui-gray-600);         --_c-light: var(--ui-gray-100);         --_c-dark: var(--ui-gray-700); }
[data-color="white"]     { --_c: white;               --_c-hover: var(--ui-gray-100);         --_c-light: white;                      --_c-dark: var(--ui-gray-200); }
[data-color="tip"]       { --_c: var(--ui-secondary); --_c-hover: var(--ui-secondary-hover); --_c-light: var(--ui-secondary-light); --_c-dark: var(--ui-secondary-dark); }

/* ============================================
   SHARED FOCUS STYLE — used by all text inputs
   ============================================ */
.ui-config-select:focus,
.ui-input:focus,
.ui-select:focus,
.ui-textarea:focus,
.ui-dt-search input:focus,
.dataTables_filter input:focus,
.ui-date-picker input[type="date"]:focus,
/* focus styles in consolidated rule above */

/* ============================================
   MINIMALISM MODE (no borders)
   ============================================ */

.ui-no-borders .ui-card,
.ui-no-borders .ui-input,
.ui-no-borders .ui-select,
.ui-no-borders .ui-textarea,
.ui-no-borders .ui-tabs-list,
.ui-no-borders .ui-card-header,
.ui-no-borders .ui-card-footer,
.ui-no-borders .ui-modal-header,
.ui-no-borders .ui-modal-footer {
  border: none !important;
}

/* ============================================
   DENSITY SCALING
   ============================================ */

/* Space utilities that respect density */
.ui-space-density-1 { margin: calc(var(--ui-space-1) * var(--ui-density)); }
.ui-space-density-2 { margin: calc(var(--ui-space-2) * var(--ui-density)); }
.ui-space-density-4 { margin: calc(var(--ui-space-4) * var(--ui-density)); }
.ui-gap-density-2 { gap: calc(var(--ui-space-2) * var(--ui-density)); }
.ui-gap-density-4 { gap: calc(var(--ui-space-4) * var(--ui-density)); }
.ui-p-density-2 { padding: calc(var(--ui-space-2) * var(--ui-density)); }
.ui-p-density-4 { padding: calc(var(--ui-space-4) * var(--ui-density)); }

/* ============================================
   THEME UTILITY CLASSES
   ============================================ */

/* === Border Radius Utilities === */
.ui-radius-none { border-radius: var(--ui-radius-none) !important; }
.ui-radius-sm { border-radius: var(--ui-radius-sm) !important; }
.ui-radius-md { border-radius: var(--ui-radius-md) !important; }
.ui-radius-lg { border-radius: var(--ui-radius-lg) !important; }
.ui-radius-xl { border-radius: var(--ui-radius-xl) !important; }
.ui-radius-2xl { border-radius: var(--ui-radius-2xl) !important; }
.ui-radius-full { border-radius: var(--ui-radius-full) !important; }

/* === Shadow Utilities === */
.ui-shadow-none { box-shadow: var(--ui-shadow-none) !important; }
.ui-shadow-sm { box-shadow: var(--ui-shadow-sm) !important; }
.ui-shadow-md { box-shadow: var(--ui-shadow-md) !important; }
.ui-shadow-lg { box-shadow: var(--ui-shadow-lg) !important; }
.ui-shadow-xl { box-shadow: var(--ui-shadow-xl) !important; }
.ui-shadow-2xl { box-shadow: var(--ui-shadow-2xl) !important; }
.ui-shadow-inner { box-shadow: var(--ui-shadow-inner) !important; }

/* === Size Utilities (component scale) === */
.ui-size-xs { font-size: var(--ui-text-xs); }
.ui-size-sm { font-size: var(--ui-text-sm); }
.ui-size-md { font-size: var(--ui-text-base); }
.ui-size-lg { font-size: var(--ui-text-lg); }
.ui-size-xl { font-size: var(--ui-text-xl); }

/* === Text Size Utilities === */
.ui-text-xs { font-size: var(--ui-text-xs) !important; }
.ui-text-sm { font-size: var(--ui-text-sm) !important; }
.ui-text-base { font-size: var(--ui-text-base) !important; }
.ui-text-lg { font-size: var(--ui-text-lg) !important; }
.ui-text-xl { font-size: var(--ui-text-xl) !important; }
.ui-text-2xl { font-size: var(--ui-text-2xl) !important; }
.ui-text-3xl { font-size: var(--ui-text-3xl) !important; }
.ui-text-4xl { font-size: var(--ui-text-4xl) !important; }

/* === Color Scheme Utilities === */
.ui-color-primary { --ui-color: var(--ui-primary); --ui-color-light: var(--ui-primary-light); }
.ui-color-secondary { --ui-color: var(--ui-secondary); --ui-color-light: var(--ui-secondary-light); }
.ui-color-success { --ui-color: var(--ui-success); --ui-color-light: var(--ui-success-light); }
.ui-color-danger { --ui-color: var(--ui-danger); --ui-color-light: var(--ui-danger-light); }
.ui-color-warning { --ui-color: var(--ui-warning); --ui-color-light: var(--ui-warning-light); }
.ui-color-info { --ui-color: var(--ui-info); --ui-color-light: var(--ui-info-light); }
.ui-color-gray { --ui-color: var(--ui-gray-500); --ui-color-light: var(--ui-gray-100); }
.ui-color-dark { --ui-color: var(--ui-gray-800); --ui-color-light: var(--ui-gray-200); }

/* === Background Utilities for Variants === */
.ui-bg-light { background-color: var(--ui-color-light, var(--ui-primary-light)); }
.ui-bg-muted { background-color: var(--ui-gray-100); }
.ui-bg-glass {
  background-color: var(--ui-glass-bg);
  backdrop-filter: blur(var(--ui-glass-blur));
  -webkit-backdrop-filter: blur(var(--ui-glass-blur));
}

/* === Border Utilities for Variants === */
.ui-border-none { border: none !important; }
.ui-border-subtle { border: var(--ui-border-width) solid var(--ui-gray-200) !important; }
.ui-border-solid { border: var(--ui-border-width) solid var(--ui-gray-400) !important; }

/* ============================================
   LAYOUT UTILITY CLASSES
   ============================================ */

/* === Display & Flexbox === */
.ui-flex { display: flex; }
.ui-inline-flex { display: inline-flex; }
.ui-grid { display: grid; }
.ui-block { display: block; }
.ui-inline { display: inline; }
.ui-inline-block { display: inline-block; }
.ui-hidden { display: none !important; }

.ui-flex-row { flex-direction: row; }
.ui-flex-col { flex-direction: column; }
.ui-flex-wrap { flex-wrap: wrap; }
.ui-flex-nowrap { flex-wrap: nowrap; }
.ui-flex-1 { flex: 1; }
.ui-flex-auto { flex: auto; }
.ui-flex-none { flex: none; }

.ui-items-start { align-items: flex-start; }
.ui-items-center { align-items: center; }
.ui-items-end { align-items: flex-end; }
.ui-items-stretch { align-items: stretch; }

.ui-justify-start { justify-content: flex-start; }
.ui-justify-center { justify-content: center; }
.ui-justify-end { justify-content: flex-end; }
.ui-justify-between { justify-content: space-between; }
.ui-justify-around { justify-content: space-around; }

/* === Gap Utilities === */
.ui-gap-0 { gap: 0; }
.ui-gap-1 { gap: var(--ui-space-1); }
.ui-gap-2 { gap: var(--ui-space-2); }
.ui-gap-3 { gap: var(--ui-space-3); }
.ui-gap-4 { gap: var(--ui-space-4); }
.ui-gap-5 { gap: var(--ui-space-5); }
.ui-gap-6 { gap: var(--ui-space-6); }
.ui-gap-8 { gap: var(--ui-space-8); }

/* === Margin Utilities === */
.ui-m-0 { margin: 0; }
.ui-m-1 { margin: var(--ui-space-1); }
.ui-m-2 { margin: var(--ui-space-2); }
.ui-m-3 { margin: var(--ui-space-3); }
.ui-m-4 { margin: var(--ui-space-4); }
.ui-m-6 { margin: var(--ui-space-6); }
.ui-m-8 { margin: var(--ui-space-8); }
.ui-m-auto { margin: auto; }

.ui-mt-0 { margin-top: 0; }
.ui-mt-1 { margin-top: var(--ui-space-1); }
.ui-mt-2 { margin-top: var(--ui-space-2); }
.ui-mt-3 { margin-top: var(--ui-space-3); }
.ui-mt-4 { margin-top: var(--ui-space-4); }
.ui-mt-6 { margin-top: var(--ui-space-6); }
.ui-mt-8 { margin-top: var(--ui-space-8); }

.ui-mb-0 { margin-bottom: 0; }
.ui-mb-1 { margin-bottom: var(--ui-space-1); }
.ui-mb-2 { margin-bottom: var(--ui-space-2); }
.ui-mb-3 { margin-bottom: var(--ui-space-3); }
.ui-mb-4 { margin-bottom: var(--ui-space-4); }
.ui-mb-6 { margin-bottom: var(--ui-space-6); }
.ui-mb-8 { margin-bottom: var(--ui-space-8); }

.ui-ml-0 { margin-left: 0; }
.ui-ml-1 { margin-left: var(--ui-space-1); }
.ui-ml-2 { margin-left: var(--ui-space-2); }
.ui-ml-3 { margin-left: var(--ui-space-3); }
.ui-ml-4 { margin-left: var(--ui-space-4); }
.ui-ml-auto { margin-left: auto; }

.ui-mr-0 { margin-right: 0; }
.ui-mr-1 { margin-right: var(--ui-space-1); }
.ui-mr-2 { margin-right: var(--ui-space-2); }
.ui-mr-3 { margin-right: var(--ui-space-3); }
.ui-mr-4 { margin-right: var(--ui-space-4); }
.ui-mr-auto { margin-right: auto; }

.ui-mx-auto { margin-left: auto; margin-right: auto; }
.ui-my-0 { margin-top: 0; margin-bottom: 0; }
.ui-my-4 { margin-top: var(--ui-space-4); margin-bottom: var(--ui-space-4); }
.ui-my-6 { margin-top: var(--ui-space-6); margin-bottom: var(--ui-space-6); }

/* === Padding Utilities === */
.ui-p-0 { padding: 0; }
.ui-p-1 { padding: var(--ui-space-1); }
.ui-p-2 { padding: var(--ui-space-2); }
.ui-p-3 { padding: var(--ui-space-3); }
.ui-p-4 { padding: var(--ui-space-4); }
.ui-p-6 { padding: var(--ui-space-6); }
.ui-p-8 { padding: var(--ui-space-8); }

.ui-pt-0 { padding-top: 0; }
.ui-pt-2 { padding-top: var(--ui-space-2); }
.ui-pt-4 { padding-top: var(--ui-space-4); }
.ui-pt-6 { padding-top: var(--ui-space-6); }

.ui-pb-0 { padding-bottom: 0; }
.ui-pb-2 { padding-bottom: var(--ui-space-2); }
.ui-pb-3 { padding-bottom: var(--ui-space-3); }
.ui-pb-4 { padding-bottom: var(--ui-space-4); }
.ui-pb-6 { padding-bottom: var(--ui-space-6); }

.ui-px-0 { padding-left: 0; padding-right: 0; }
.ui-px-2 { padding-left: var(--ui-space-2); padding-right: var(--ui-space-2); }
.ui-px-3 { padding-left: var(--ui-space-3); padding-right: var(--ui-space-3); }
.ui-px-4 { padding-left: var(--ui-space-4); padding-right: var(--ui-space-4); }
.ui-px-6 { padding-left: var(--ui-space-6); padding-right: var(--ui-space-6); }

.ui-py-0 { padding-top: 0; padding-bottom: 0; }
.ui-py-2 { padding-top: var(--ui-space-2); padding-bottom: var(--ui-space-2); }
.ui-py-3 { padding-top: var(--ui-space-3); padding-bottom: var(--ui-space-3); }
.ui-py-4 { padding-top: var(--ui-space-4); padding-bottom: var(--ui-space-4); }
.ui-py-6 { padding-top: var(--ui-space-6); padding-bottom: var(--ui-space-6); }

/* === Width & Height === */
.ui-w-full { width: 100%; }
.ui-w-auto { width: auto; }
.ui-h-full { height: 100%; }
.ui-h-auto { height: auto; }
.ui-min-h-screen { min-height: 100vh; }
.ui-max-w-sm { max-width: 24rem; }
.ui-max-w-md { max-width: 28rem; }
.ui-max-w-lg { max-width: 32rem; }
.ui-max-w-xl { max-width: 36rem; }
.ui-max-w-2xl { max-width: 42rem; }
.ui-max-w-4xl { max-width: 56rem; }
.ui-max-w-full { max-width: 100%; }

/* === Text Utilities === */
.ui-text-left { text-align: left; }
.ui-text-center { text-align: center; }
.ui-text-right { text-align: right; }

.ui-font-normal { font-weight: var(--ui-font-normal); }
.ui-font-medium { font-weight: var(--ui-font-medium); }
.ui-font-semibold { font-weight: var(--ui-font-semibold); }
.ui-font-bold { font-weight: var(--ui-font-bold); }

.ui-text-white { color: var(--ui-white); }
.ui-text-black { color: var(--ui-black); }
.ui-text-gray-400 { color: var(--ui-gray-400); }
.ui-text-gray-500 { color: var(--ui-gray-500); }
.ui-text-gray-600 { color: var(--ui-gray-600); }
.ui-text-gray-700 { color: var(--ui-gray-700); }
.ui-text-gray-800 { color: var(--ui-gray-800); }
.ui-text-gray-900 { color: var(--ui-gray-900); }
.ui-text-primary { color: var(--ui-primary); }
.ui-text-secondary { color: var(--ui-secondary); }
.ui-text-success { color: var(--ui-success); }
.ui-text-danger { color: var(--ui-danger); }
.ui-text-warning { color: var(--ui-warning); }
.ui-text-info { color: var(--ui-info); }

.ui-uppercase { text-transform: uppercase; }
.ui-lowercase { text-transform: lowercase; }
.ui-capitalize { text-transform: capitalize; }
.ui-tracking-wide { letter-spacing: 0.05em; }

/* === Background Utilities === */
.ui-bg-white { background-color: var(--ui-white); }
.ui-bg-gray-50 { background-color: var(--ui-gray-50); }
.ui-bg-gray-100 { background-color: var(--ui-gray-100); }
.ui-bg-gray-200 { background-color: var(--ui-gray-200); }
.ui-bg-primary { background-color: var(--ui-primary); }
.ui-bg-primary-light { background-color: var(--ui-primary-light); }
.ui-bg-secondary { background-color: var(--ui-secondary); }
.ui-bg-secondary-light { background-color: var(--ui-secondary-light); }
.ui-bg-success-light { background-color: var(--ui-success-light); }
.ui-bg-danger-light { background-color: var(--ui-danger-light); }
.ui-bg-warning-light { background-color: var(--ui-warning-light); }
.ui-bg-info-light { background-color: var(--ui-info-light); }
.ui-bg-transparent { background-color: transparent; }

/* === Position Utilities === */
.ui-relative { position: relative; }
.ui-absolute { position: absolute; }
.ui-fixed { position: fixed; }
.ui-sticky { position: sticky; }
.ui-top-0 { top: 0; }
.ui-right-0 { right: 0; }
.ui-bottom-0 { bottom: 0; }
.ui-left-0 { left: 0; }
.ui-inset-0 { top: 0; right: 0; bottom: 0; left: 0; }

/* === Z-Index Utilities === */
.ui-z-10 { z-index: 10; }
.ui-z-20 { z-index: 20; }
.ui-z-50 { z-index: 50; }
.ui-z-dropdown { z-index: var(--ui-z-dropdown); }
.ui-z-modal { z-index: var(--ui-z-modal); }
.ui-z-tooltip { z-index: var(--ui-z-tooltip); }
.ui-z-toast { z-index: var(--ui-z-toast); }

/* === Overflow === */
.ui-overflow-auto { overflow: auto; }
.ui-overflow-hidden { overflow: hidden; }
.ui-overflow-visible { overflow: visible; }
.ui-overflow-y-auto { overflow-y: auto; }
.ui-overflow-x-auto { overflow-x: auto; }

/* === Cursor === */
.ui-cursor-pointer { cursor: pointer; }
.ui-cursor-default { cursor: default; }
.ui-cursor-not-allowed { cursor: not-allowed; }

/* === Transitions === */
.ui-transition { transition: all var(--ui-transition-normal); }
.ui-transition-fast { transition: all var(--ui-transition-fast); }
.ui-transition-slow { transition: all var(--ui-transition-slow); }

/* ============================================
   PAGE LAYOUT COMPONENTS
   ============================================ */

/* Page wrapper - applies default page styling */
.ui-page {
  font-family: var(--ui-font-body);
  background-color: var(--ui-gray-50);
  min-height: 100vh;
  margin: 0;
  padding: var(--ui-space-8);
  box-sizing: border-box;
}

/* Page title */
.ui-page-title {
  font-family: var(--ui-font-heading);
  font-size: var(--ui-text-3xl);
  font-weight: var(--ui-font-bold);
  color: var(--ui-gray-900);
  margin: 0 0 var(--ui-space-2);
}

/* Page subtitle/description */
.ui-page-subtitle {
  font-size: var(--ui-text-lg);
  color: var(--ui-gray-600);
  margin: 0 0 var(--ui-space-6);
}

/* Section wrapper for grouping related content */
.ui-section {
  background-color: var(--ui-white);
  border-radius: var(--ui-radius-lg);
  padding: var(--ui-space-6);
  margin-bottom: var(--ui-space-6);
  box-shadow: var(--ui-shadow-sm);
}

/* Section title */
.ui-section-title {
  font-family: var(--ui-font-heading);
  font-size: var(--ui-text-xl);
  font-weight: var(--ui-font-semibold);
  color: var(--ui-gray-900);
  margin: 0 0 var(--ui-space-4);
  padding-bottom: var(--ui-space-3);
  border-bottom: var(--ui-border-width) solid var(--ui-gray-200);
}

/* Section subtitle */
.ui-section-subtitle {
  font-size: var(--ui-text-sm);
  color: var(--ui-gray-600);
  margin: 0 0 var(--ui-space-2);
}

/* Category section - larger grouping with header */
.ui-category {
  margin-bottom: var(--ui-space-8);
}

/* Category header with icon, title, description */
.ui-category-header {
  display: flex;
  align-items: center;
  gap: var(--ui-space-3);
  margin-bottom: var(--ui-space-4);
  padding-bottom: var(--ui-space-3);
  border-bottom: 3px solid var(--ui-primary);
}

.ui-category-icon {
  font-size: 1.5rem;
  background-color: var(--ui-primary-light);
  padding: var(--ui-space-2);
  border-radius: var(--ui-radius-lg);
  line-height: 1;
}

.ui-category-title {
  font-family: var(--ui-font-heading);
  font-size: var(--ui-text-2xl);
  font-weight: var(--ui-font-bold);
  color: var(--ui-gray-900);
  margin: 0;
}

.ui-category-desc {
  font-size: var(--ui-text-sm);
  color: var(--ui-gray-500);
  margin-left: auto;
}

/* Demo row - flex container for displaying components */
.ui-demo-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-space-3);
  align-items: flex-start;
}

/* Toolbar - fixed position action bar */
.ui-toolbar {
  position: fixed;
  top: var(--ui-space-4);
  left: var(--ui-space-4);
  z-index: var(--ui-z-sticky);
  display: flex;
  gap: var(--ui-space-2);
}

/* Panel - side panel for settings/config */
.ui-panel {
  position: fixed;
  top: var(--ui-space-4);
  right: var(--ui-space-4);
  z-index: var(--ui-z-sticky);
  background-color: var(--ui-white);
  border-radius: var(--ui-radius-xl);
  box-shadow: var(--ui-shadow-lg);
  padding: var(--ui-space-4);
  width: 280px;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  transition: transform var(--ui-transition-normal), opacity var(--ui-transition-normal);
}

.ui-panel.ui-hidden {
  transform: translateX(320px);
  opacity: 0;
  pointer-events: none;
}

.ui-panel-title {
  font-family: var(--ui-font-heading);
  font-size: var(--ui-text-base);
  font-weight: var(--ui-font-semibold);
  margin: 0 0 var(--ui-space-4);
  padding-bottom: var(--ui-space-3);
  border-bottom: var(--ui-border-width) solid var(--ui-gray-200);
  display: flex;
  align-items: center;
  gap: var(--ui-space-2);
}

/* Config form elements for panels */
.ui-config-group {
  margin-bottom: var(--ui-space-4);
}

.ui-config-group:last-child {
  margin-bottom: 0;
}

.ui-config-label {
  display: block;
  font-size: var(--ui-text-xs);
  font-weight: var(--ui-font-medium);
  color: var(--ui-gray-600);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--ui-space-2);
}

.ui-config-row {
  display: flex;
  gap: var(--ui-space-3);
}

.ui-config-row .ui-config-group {
  flex: 1;
}

.ui-config-color {
  display: flex;
  align-items: center;
  gap: var(--ui-space-2);
}

.ui-config-color-input {
  width: 40px;
  height: 40px;
  padding: 0;
  border: var(--ui-border-width) solid var(--ui-gray-200);
  border-radius: var(--ui-radius-md);
  cursor: pointer;
  background: none;
}

.ui-config-color-input::-webkit-color-swatch-wrapper {
  padding: 2px;
}

.ui-config-color-input::-webkit-color-swatch {
  border: none;
  border-radius: var(--ui-radius-sm);
}

.ui-config-color-value {
  font-family: var(--ui-font-mono);
  font-size: var(--ui-text-xs);
  color: var(--ui-gray-600);
}

.ui-config-select {
  width: 100%;
  padding: var(--ui-space-2) var(--ui-space-3);
  font-size: var(--ui-text-sm);
  border: var(--ui-border-width) solid var(--ui-gray-300);
  border-radius: var(--ui-radius-md);
  background-color: var(--ui-white);
  cursor: pointer;
}



.ui-config-slider {
  width: 100%;
  margin: 0;
  cursor: pointer;
}

.ui-config-slider-value {
  display: flex;
  justify-content: space-between;
  font-size: var(--ui-text-xs);
  color: var(--ui-gray-500);
  margin-top: var(--ui-space-1);
}

.ui-config-preview {
  display: flex;
  gap: var(--ui-space-2);
  margin-top: var(--ui-space-2);
}

.ui-config-preview-box {
  flex: 1;
  height: 32px;
  border-radius: var(--ui-radius-md);
  border: var(--ui-border-width) solid var(--ui-gray-200);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .ui-panel {
    width: 260px;
    right: var(--ui-space-2);
    top: var(--ui-space-2);
    padding: var(--ui-space-3);
  }
  .ui-page {
    padding: var(--ui-space-4);
  }
}

@media (max-width: 640px) {
  .ui-toolbar {
    left: var(--ui-space-2);
    top: var(--ui-space-2);
  }
  .ui-toolbar .ui-btn {
    padding: var(--ui-space-2) var(--ui-space-3);
    font-size: var(--ui-text-xs);
  }
  .ui-category-desc {
    display: none;
  }
}

@media (max-width: 480px) {
  .ui-panel {
    width: calc(100% - 1rem);
    left: 0.5rem;
    right: 0.5rem;
    top: auto;
    bottom: 0.5rem;
    max-height: 50vh;
  }
  .ui-panel.ui-hidden {
    transform: translateY(100%);
  }
  .ui-toolbar {
    flex-wrap: wrap;
  }
}

@media (max-width: 400px) {
  .ui-toolbar {
    flex-direction: column;
  }
}

/* ============================================
   EDIT FORM SECTION STYLES
   ============================================ */

.ui-edit-section {
  margin-bottom: var(--ui-space-4);
}

.ui-edit-section-header {
  font-size: var(--ui-text-xs);
  font-weight: var(--ui-font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ui-gray-500);
  padding: var(--ui-space-2) 0;
  border-bottom: var(--ui-border-width) solid var(--ui-gray-200);
  margin-bottom: var(--ui-space-2);
}

.ui-edit-section-header.collapsible {
  cursor: pointer;
  user-select: none;
}

.ui-edit-section-header.collapsible:hover {
  color: var(--ui-gray-700);
}

.ui-edit-section-icon {
  display: inline-block;
  width: 12px;
  font-size: var(--ui-text-xs);
  margin-right: var(--ui-space-1);
  transition: transform var(--ui-transition-fast);
}

.ui-edit-section.collapsed .ui-edit-section-body {
  display: none;
}

.ui-edit-section-body {
  padding: var(--ui-space-2) 0;
}

/* ============================================
   BASE STYLES
   ============================================ */

.ui {
  box-sizing: border-box;
  font-family: var(--ui-font-body);
  font-size: var(--ui-text-base);
  line-height: var(--ui-leading-normal);
  letter-spacing: var(--ui-ls-body);
  color: var(--ui-gray-900);
}

.ui *, .ui *::before, .ui *::after {
  box-sizing: inherit;
}

/* Heading letter-spacing for all heading-font elements */
.ui-page-title, .ui-section-title, .ui-category-title, .ui-card-title,
.ui-panel-title, .ui-modal-title, .ui-accordion-title, .ui-tab-label,
[class*="ui-"][class*="-title"] {
  letter-spacing: var(--ui-ls-heading);
}

/* ============================================
   BUTTON COMPONENT
   ============================================ */

.ui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ui-space-2);
  padding: var(--ui-space-2) var(--ui-space-4);
  font-family: var(--ui-font-body);
  font-size: var(--ui-text-sm);
  font-weight: var(--ui-font-medium);
  line-height: 1;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--ui-radius-md);
  cursor: pointer;
  transition: all var(--ui-transition-fast);
  white-space: nowrap;
}

.ui-btn:hover:not(:disabled) {
  transform: translateY(calc(var(--ui-hover-lift) * 0.5));
}

.ui-btn:focus {
  outline: 2px solid var(--ui-primary);
  outline-offset: 2px;
}

.ui-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Button Variants — legacy class selectors set --_c */
.ui-btn-primary   { --_c: var(--ui-primary);   --_c-hover: var(--ui-primary-hover); }
.ui-btn-secondary { --_c: var(--ui-secondary); --_c-hover: var(--ui-secondary-hover); }
.ui-btn-success   { --_c: var(--ui-success);   --_c-hover: var(--ui-success-hover); }
.ui-btn-danger    { --_c: var(--ui-danger);     --_c-hover: var(--ui-danger-hover); }
.ui-btn-warning   { --_c: var(--ui-warning);   --_c-hover: var(--ui-warning-hover); }

.ui-btn[data-color],
.ui-btn-primary, .ui-btn-secondary, .ui-btn-success, .ui-btn-danger, .ui-btn-warning {
  background: var(--_c); color: var(--ui-white);
}
.ui-btn[data-color]:hover:not(:disabled),
.ui-btn-primary:hover:not(:disabled), .ui-btn-secondary:hover:not(:disabled),
.ui-btn-success:hover:not(:disabled), .ui-btn-danger:hover:not(:disabled),
.ui-btn-warning:hover:not(:disabled) {
  background: var(--_c-hover);
}

.ui-btn-outline {
  background: transparent;
  border-color: var(--ui-gray-300);
  color: var(--ui-gray-700);
}
.ui-btn-outline:hover:not(:disabled) {
  background: var(--ui-gray-50);
  border-color: var(--ui-gray-400);
}

.ui-btn-ghost {
  background: transparent;
  color: var(--ui-gray-700);
}
.ui-btn-ghost:hover:not(:disabled) {
  background: var(--ui-gray-100);
}

/* Button Sizes */
.ui-btn-sm {
  padding: var(--ui-space-1) var(--ui-space-3);
  font-size: var(--ui-text-xs);
}

.ui-btn-lg {
  padding: var(--ui-space-3) var(--ui-space-6);
  font-size: var(--ui-text-base);
}

/* Button Style: Elevated (with shadow and hover lift) */
.ui-btn-elevated {
  box-shadow: var(--ui-shadow-md);
}
.ui-btn-elevated:hover:not(:disabled) {
  transform: translateY(var(--ui-hover-lift));
  box-shadow: var(--ui-shadow-lg);
}

/* Button Icon Variant (circular) */
.ui-btn-icon {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: var(--ui-radius-full);
}

.ui-btn-icon.ui-btn-sm {
  width: 32px;
  height: 32px;
}

.ui-btn-icon.ui-btn-lg {
  width: 52px;
  height: 52px;
}

/* ============================================
   BUTTON GROUP
   ============================================ */

.ui-btn-group {
  display: inline-flex;
  gap: 0;
}

.ui-btn-group .ui-btn {
  border-radius: 0;
  margin: 0;
}

.ui-btn-group .ui-btn:first-child {
  border-radius: var(--ui-radius-md) 0 0 var(--ui-radius-md);
}

.ui-btn-group .ui-btn:last-child {
  border-radius: 0 var(--ui-radius-md) var(--ui-radius-md) 0;
}

.ui-btn-group .ui-btn:not(:last-child) {
  border-right: var(--ui-border-width) solid hsla(0, 0%, 100%, 0.2);
}

.ui-btn-group .ui-btn-outline:not(:last-child) {
  border-right-color: var(--ui-gray-300);
}

/* Horizontal Button Group (explicit class) */
.ui-btn-group-horizontal {
  flex-direction: row;
}

/* Vertical Button Group */
.ui-btn-group-vertical {
  display: inline-flex;
  flex-direction: column;
  gap: 0;
}

.ui-btn-group-vertical .ui-btn {
  border-radius: 0;
  width: 100%;
}

.ui-btn-group-vertical .ui-btn:first-child {
  border-radius: var(--ui-radius-md) var(--ui-radius-md) 0 0;
}

.ui-btn-group-vertical .ui-btn:last-child {
  border-radius: 0 0 var(--ui-radius-md) var(--ui-radius-md);
}

.ui-btn-group-vertical .ui-btn:not(:last-child) {
  border-bottom: var(--ui-border-width) solid hsla(0, 0%, 100%, 0.2);
}

/* Responsive button groups */
@media (max-width: 480px) {
  .ui-btn-group {
    flex-wrap: wrap;
  }

  .ui-btn-group .ui-btn {
    font-size: var(--ui-text-xs);
    padding: var(--ui-space-2) var(--ui-space-3);
  }
}

/* ============================================
   CARD COMPONENT
   ============================================ */

.ui-card {
  background: var(--ui-white);
  border: var(--ui-border-width) solid var(--ui-gray-200);
  border-radius: var(--ui-radius-lg);
  box-shadow: var(--ui-shadow-sm);
  transition: transform var(--ui-transition-fast), box-shadow var(--ui-transition-fast);
}

.ui-card:hover {
  transform: translateY(calc(var(--ui-hover-lift) * 0.3));
  box-shadow: var(--ui-shadow-md);
}

.ui-card-header {
  padding: var(--ui-space-4) var(--ui-space-6);
  border-bottom: var(--ui-border-width) solid var(--ui-gray-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ui-card-collapse-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--ui-space-1) var(--ui-space-2);
  color: var(--ui-gray-500);
  font-size: var(--ui-text-sm);
  border-radius: var(--ui-radius-sm);
  transition: background-color 0.15s ease;
}

.ui-card-collapse-btn:hover {
  background-color: var(--ui-gray-100);
  color: var(--ui-gray-700);
}

.ui-card-body {
  padding: var(--ui-space-6);
}

.ui-card-footer {
  padding: var(--ui-space-4) var(--ui-space-6);
  border-top: var(--ui-border-width) solid var(--ui-gray-200);
  background: var(--ui-gray-50);
  border-radius: 0 0 var(--ui-radius-lg) var(--ui-radius-lg);
}

.ui-card-title {
  margin: 0;
  font-family: var(--ui-font-heading);
  font-size: var(--ui-text-lg);
  font-weight: var(--ui-font-semibold);
  color: var(--ui-gray-900);
}

/* Card Compact Modifier (for detail panels / bindCard) */
.ui-card-compact .ui-card-header {
  padding: var(--ui-space-1) var(--ui-space-3);
  justify-content: flex-start;
  gap: var(--ui-space-1);
  border-bottom: var(--ui-border-width) solid var(--ui-gray-100);
}

.ui-card-compact .ui-card-title {
  font-size: var(--ui-text-xs);
  font-weight: var(--ui-font-bold);
  color: var(--ui-gray-600);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.ui-card-compact .ui-card-body {
  padding: var(--ui-space-2) var(--ui-space-3);
}

.ui-card-compact .ui-card-header i,
.ui-card-compact .ui-card-header .fas,
.ui-card-compact .ui-card-header .far {
  color: var(--icon-color, var(--ui-gray-500));
  font-size: var(--ui-text-xs);
}

/* Card Hover Lift */
.ui-card-hoverable {
  transition: transform var(--ui-transition-normal), box-shadow var(--ui-transition-normal);
}

.ui-card-hoverable:hover {
  transform: translateY(-4px);
  box-shadow: var(--ui-shadow-lg);
}

/* Card Image Variant */
.ui-card-image .ui-card-img {
  height: 160px;
  background: var(--ui-primary);
  position: relative;
  overflow: hidden;
}

.ui-card-image .ui-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ui-card-image .ui-card-img-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: var(--ui-space-1) var(--ui-space-3);
  background: var(--ui-white);
  border-radius: var(--ui-radius-full);
  font-size: var(--ui-text-xs);
  font-weight: var(--ui-font-semibold);
  color: var(--ui-primary);
}

/* Card Stat Variant */
.ui-card-stat {
  text-align: center;
}

.ui-card-stat .ui-card-body {
  padding: var(--ui-space-6);
}

.ui-card-stat-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--ui-radius-lg);
  background: var(--ui-primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--ui-space-4);
  font-size: var(--ui-text-2xl);
  color: var(--ui-primary);
}

.ui-card-stat-value {
  font-family: var(--ui-font-heading);
  font-size: var(--ui-text-4xl);
  font-weight: var(--ui-font-bold);
  color: var(--ui-primary);
  line-height: 1;
}

.ui-card-stat-label {
  font-size: var(--ui-text-sm);
  color: var(--ui-gray-500);
  margin-top: var(--ui-space-2);
}

/* Card Profile Variant */
.ui-card-profile {
  text-align: center;
}

.ui-card-profile .ui-card-body {
  padding: var(--ui-space-8) var(--ui-space-6);
}

.ui-card-avatar {
  width: 80px;
  height: 80px;
  border-radius: var(--ui-radius-full);
  background: var(--ui-primary);
  margin: 0 auto var(--ui-space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--ui-text-3xl);
  color: var(--ui-white);
  font-weight: var(--ui-font-bold);
  font-family: var(--ui-font-heading);
  border: 4px solid var(--ui-white);
  box-shadow: var(--ui-shadow-md);
  overflow: hidden;
}

.ui-card-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ui-card-name {
  font-family: var(--ui-font-heading);
  font-size: var(--ui-text-lg);
  font-weight: var(--ui-font-bold);
  color: var(--ui-gray-900);
  margin: 0;
}

.ui-card-role {
  font-size: var(--ui-text-sm);
  color: var(--ui-secondary);
  font-weight: var(--ui-font-medium);
  margin-top: var(--ui-space-1);
}

/* Task Card Variant */
.ui-card-task {
  text-align: left;
}

.ui-card-task .ui-card-body {
  padding: var(--ui-space-4);
}

.ui-card-task-header {
  display: flex;
  align-items: flex-start;
  gap: var(--ui-space-3);
  margin-bottom: var(--ui-space-3);
}

.ui-card-task-avatar {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: var(--ui-radius-full);
  background: var(--ui-primary-light);
  color: var(--ui-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--ui-text-base);
  font-weight: var(--ui-font-semibold);
  overflow: hidden;
}

.ui-card-task-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ui-card-task-info {
  flex: 1;
  min-width: 0;
}

.ui-card-task-title {
  font-family: var(--ui-font-heading);
  font-size: var(--ui-text-base);
  font-weight: var(--ui-font-semibold);
  color: var(--ui-gray-900);
  margin: 0;
  line-height: 1.3;
}

.ui-card-task-subtitle {
  font-size: var(--ui-text-sm);
  color: var(--ui-gray-500);
  margin: var(--ui-space-1) 0 0;
}

.ui-card-task-body {
  font-size: var(--ui-text-sm);
  color: var(--ui-gray-600);
  line-height: var(--ui-leading-relaxed);
  margin: 0 0 var(--ui-space-3);
}

.ui-card-task-progress {
  display: flex;
  align-items: center;
  gap: var(--ui-space-3);
  margin-top: var(--ui-space-3);
}

.ui-card-task-progress .ui-progress {
  flex: 1;
  height: 6px;
}

.ui-card-task-progress-label {
  font-size: var(--ui-text-xs);
  font-weight: var(--ui-font-medium);
  color: var(--ui-gray-500);
  min-width: 36px;
  text-align: right;
}

.ui-card-task-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--ui-space-2);
  padding: var(--ui-space-3) var(--ui-space-4);
  border-top: var(--ui-border-width) solid var(--ui-gray-100);
  background: var(--ui-gray-50);
}

/* Card Horizontal Template */
.ui-card-horizontal .ui-card-horizontal {
  display: flex;
  flex-direction: row;
}

.ui-card-horizontal .ui-card-horizontal-img {
  width: 40%;
  min-height: 160px;
  flex-shrink: 0;
  overflow: hidden;
}

.ui-card-horizontal .ui-card-horizontal-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ui-card-horizontal .ui-card-horizontal-content {
  flex: 1;
  padding: var(--ui-space-4);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ui-card-horizontal .ui-card-footer {
  border-top: none;
  background: transparent;
  padding: var(--ui-space-3) 0 0;
  margin-top: auto;
}

/* === Card Variant Styles (Visual Presets) === */

/* Minimal - No border, no shadow */
.ui-card-variant-minimal {
  border: none;
  box-shadow: none;
  background: transparent;
}

/* Soft - Light background, no border */
.ui-card-variant-soft {
  border: none;
  box-shadow: none;
  background: var(--ui-color-light, var(--ui-primary-light));
}

/* Outlined - Visible border, no shadow */
.ui-card-variant-outlined {
  border: var(--ui-border-width) solid var(--ui-gray-400);
  box-shadow: none;
  background: var(--ui-white);
}

/* Elevated - Larger shadow */
.ui-card-variant-elevated {
  border: none;
  box-shadow: var(--ui-shadow-lg);
  background: var(--ui-white);
}

/* Flat - Muted background, no shadow */
.ui-card-variant-flat {
  border: none;
  box-shadow: none;
  background: var(--ui-gray-100);
}

/* Glass - Frosted glass effect */
.ui-card-variant-glass {
  border: none;
  box-shadow: var(--ui-shadow-md);
  background: var(--ui-glass-bg);
  backdrop-filter: blur(var(--ui-glass-blur));
  -webkit-backdrop-filter: blur(var(--ui-glass-blur));
}

/* Variant footer styles */
.ui-card-variant-minimal .ui-card-footer,
.ui-card-variant-soft .ui-card-footer,
.ui-card-variant-flat .ui-card-footer {
  background: transparent;
  border-top-color: rgb(0 0 0 / var(--hp-shadow-intensity));
}

.ui-card-variant-glass .ui-card-footer {
  background: var(--ui-glass-bg);
  border-top: none;
}

/* ============================================
   INPUT COMPONENT
   ============================================ */

.ui-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: var(--ui-space-2) var(--ui-space-3);
  font-family: var(--ui-font-body);
  font-size: var(--ui-text-sm);
  line-height: var(--ui-leading-normal);
  color: var(--ui-gray-900);
  background: var(--ui-white);
  border: var(--ui-border-width) solid var(--ui-gray-300);
  border-radius: var(--ui-radius-md);
  transition: border-color var(--ui-transition-fast), box-shadow var(--ui-transition-fast);
}

/* focus styles in consolidated rule above */

.ui-input:disabled {
  background: var(--ui-gray-100);
  cursor: not-allowed;
}

.ui-input::placeholder {
  color: var(--ui-gray-400);
}

.ui-input-error {
  border-color: var(--ui-danger);
}
.ui-input-error:focus {
  box-shadow: 0 0 0 3px var(--ui-danger-light);
}

/* ============================================
   SELECT COMPONENT
   ============================================ */

.ui-select {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: var(--ui-space-2) var(--ui-space-3);
  padding-right: var(--ui-space-10);
  font-family: var(--ui-font-body);
  font-size: var(--ui-text-sm);
  line-height: var(--ui-leading-normal);
  color: var(--ui-gray-900);
  background: var(--ui-white) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") no-repeat right var(--ui-space-2) center;
  background-size: 1.5em 1.5em;
  border: var(--ui-border-width) solid var(--ui-gray-300);
  border-radius: var(--ui-radius-md);
  appearance: none;
  cursor: pointer;
  transition: border-color var(--ui-transition-fast);
}

/* focus styles in consolidated rule above */

/* ============================================
   TEXTAREA COMPONENT
   ============================================ */

.ui-textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 100px;
  padding: var(--ui-space-3);
  font-family: var(--ui-font-body);
  font-size: var(--ui-text-sm);
  line-height: var(--ui-leading-relaxed);
  color: var(--ui-gray-900);
  background: var(--ui-white);
  border: var(--ui-border-width) solid var(--ui-gray-200);
  border-radius: var(--ui-radius-md);
  resize: vertical;
  transition: border-color var(--ui-transition-fast), box-shadow var(--ui-transition-fast);
}

.ui-textarea:hover {
  border-color: var(--ui-gray-300);
}

/* focus styles in consolidated rule above */

.ui-textarea:disabled {
  background: var(--ui-gray-100);
  cursor: not-allowed;
}

.ui-textarea::placeholder {
  color: var(--ui-gray-400);
}

/* ============================================
   CHECKBOX & RADIO
   ============================================ */

.ui-checkbox,
.ui-radio {
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-2);
  cursor: pointer;
  font-size: var(--ui-text-sm);
  color: var(--ui-gray-700);
}

.ui-checkbox-box,
.ui-radio-box {
  width: 20px;
  height: 20px;
  border: var(--ui-border-width) solid var(--ui-gray-300);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--ui-transition-fast);
  flex-shrink: 0;
}

.ui-checkbox-box {
  border-radius: var(--ui-radius-sm);
}

.ui-radio-box {
  border-radius: 50%;
}

.ui-checkbox:hover .ui-checkbox-box,
.ui-radio:hover .ui-radio-box {
  border-color: var(--ui-primary);
}

.ui-checkbox.ui-checked .ui-checkbox-box {
  background: var(--ui-primary);
  border-color: var(--ui-primary);
}

.ui-checkbox.ui-checked .ui-checkbox-box::after {
  content: '✓';
  color: var(--ui-white);
  font-size: 12px;
  font-weight: bold;
}

.ui-radio.ui-checked .ui-radio-box {
  border-color: var(--ui-primary);
}

.ui-radio.ui-checked .ui-radio-box::after {
  content: '';
  width: 10px;
  height: 10px;
  background: var(--ui-primary);
  border-radius: 50%;
}

.ui-checkbox.ui-disabled,
.ui-radio.ui-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ============================================
   SWITCH / TOGGLE COMPONENT
   ============================================ */

.ui-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-3);
  cursor: pointer;
  font-size: var(--ui-text-sm);
  color: var(--ui-gray-700);
}

.ui-switch-track {
  width: 48px;
  height: 26px;
  background: var(--ui-gray-300);
  border-radius: 13px;
  position: relative;
  transition: background var(--ui-transition-fast);
  flex-shrink: 0;
}

.ui-switch-thumb {
  position: absolute;
  width: 22px;
  height: 22px;
  background: var(--ui-white);
  border-radius: 50%;
  top: 2px;
  left: 2px;
  transition: left var(--ui-transition-fast);
  box-shadow: var(--ui-shadow-sm);
}

.ui-switch.ui-checked .ui-switch-track {
  background: var(--ui-primary);
}

.ui-switch.ui-checked .ui-switch-thumb {
  left: 24px;
}

.ui-switch:hover .ui-switch-track {
  background: var(--ui-gray-400);
}

.ui-switch.ui-checked:hover .ui-switch-track {
  background: var(--ui-primary-hover);
}

.ui-switch.ui-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Switch sizes */
.ui-switch-sm .ui-switch-track {
  width: 36px;
  height: 20px;
  border-radius: 10px;
}

.ui-switch-sm .ui-switch-thumb {
  width: 16px;
  height: 16px;
  top: 2px;
  left: 2px;
}

.ui-switch-sm.ui-checked .ui-switch-thumb {
  left: 18px;
}

/* ============================================
   SLIDER / RANGE COMPONENT
   ============================================ */

.ui-slider {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-2);
  width: 100%;
}

.ui-slider-track {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: var(--ui-gray-200);
  appearance: none;
  outline: none;
  cursor: pointer;
}

.ui-slider-track::-webkit-slider-thumb {
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ui-primary);
  cursor: pointer;
  box-shadow: var(--ui-shadow-md);
  transition: transform var(--ui-transition-fast), box-shadow var(--ui-transition-fast);
}

.ui-slider-track::-webkit-slider-thumb:hover {
  transform: scale(1.1);
  box-shadow: var(--ui-shadow-lg);
}

.ui-slider-track::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ui-primary);
  cursor: pointer;
  border: none;
  box-shadow: var(--ui-shadow-md);
}

.ui-slider-value {
  text-align: center;
  font-size: var(--ui-text-sm);
  font-weight: var(--ui-font-semibold);
  color: var(--ui-primary);
}

.ui-slider.ui-disabled {
  opacity: 0.5;
}

.ui-slider.ui-disabled .ui-slider-track {
  cursor: not-allowed;
}

/* ============================================
   BADGE COMPONENT
   ============================================ */

.ui-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--ui-space-1) var(--ui-space-2);
  font-size: var(--ui-text-xs);
  font-weight: var(--ui-font-medium);
  line-height: 1;
  border-radius: var(--ui-radius-full);
}

/* Badge color — legacy class selectors set --_c */
.ui-badge-primary   { --_c: var(--ui-primary);   --_c-light: var(--ui-primary-light);   --_c-dark: var(--ui-primary-dark); }
.ui-badge-secondary { --_c: var(--ui-secondary); --_c-light: var(--ui-secondary-light); --_c-dark: var(--ui-secondary-dark); }
.ui-badge-success   { --_c: var(--ui-success);   --_c-light: var(--ui-success-light);   --_c-dark: var(--ui-success-dark); }
.ui-badge-danger    { --_c: var(--ui-danger);     --_c-light: var(--ui-danger-light);     --_c-dark: var(--ui-danger-dark); }
.ui-badge-warning   { --_c: var(--ui-warning);   --_c-light: var(--ui-warning-light);   --_c-dark: var(--ui-warning-dark); }
.ui-badge-info      { --_c: var(--ui-info);       --_c-light: var(--ui-info-light);       --_c-dark: var(--ui-info-dark); }
.ui-badge-gray      { --_c: var(--ui-gray-500);  --_c-light: var(--ui-gray-100);         --_c-dark: var(--ui-gray-700); }

/* Shared badge color rules */
.ui-badge[data-color], .ui-badge-primary, .ui-badge-secondary, .ui-badge-success,
.ui-badge-danger, .ui-badge-warning, .ui-badge-info, .ui-badge-gray {
  background: var(--_c-light); color: var(--_c-dark);
}

/* Badge Solid Variant */
.ui-badge-solid[data-color], .ui-badge-solid.ui-badge-primary, .ui-badge-solid.ui-badge-secondary,
.ui-badge-solid.ui-badge-success, .ui-badge-solid.ui-badge-danger, .ui-badge-solid.ui-badge-warning,
.ui-badge-solid.ui-badge-info, .ui-badge-solid.ui-badge-gray {
  background: var(--_c); color: var(--ui-white);
}

/* Badge Outline Variant */
.ui-badge-outline[data-color], .ui-badge-outline.ui-badge-primary, .ui-badge-outline.ui-badge-secondary,
.ui-badge-outline.ui-badge-success, .ui-badge-outline.ui-badge-danger, .ui-badge-outline.ui-badge-warning,
.ui-badge-outline.ui-badge-info {
  background: transparent; border: 1px solid var(--_c); color: var(--_c);
}

/* Badge Sizes */
.ui-badge-lg {
  padding: var(--ui-space-2) var(--ui-space-3);
  font-size: var(--ui-text-sm);
}

.ui-badge-sm {
  padding: 2px var(--ui-space-1);
  font-size: 10px;
}

/* ============================================
   ALERT COMPONENT
   ============================================ */

.ui-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--ui-space-3);
  padding: var(--ui-space-4);
  border-radius: var(--ui-radius-lg);
  border: 1px solid transparent;
}

.ui-alert-icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
}

.ui-alert-content {
  flex: 1;
}

.ui-alert-title {
  margin: 0 0 var(--ui-space-1);
  font-weight: var(--ui-font-semibold);
}

.ui-alert-message {
  margin: 0;
  font-size: var(--ui-text-sm);
}

.ui-alert[data-color] {
  background: var(--_c-light);
  border-color: var(--_c);
  color: var(--_c-dark);
}

/* ============================================
   MODAL COMPONENT
   ============================================ */

/* Modal wrapper - only allow pointer events when modal is active */
.ui-modal-wrapper {
  pointer-events: none;
}

.ui-modal-wrapper:has(.ui-active) {
  pointer-events: auto;
}

.ui-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgb(0 0 0 / 0.5);
  z-index: var(--ui-z-modal-backdrop);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--ui-transition-normal), visibility var(--ui-transition-normal);
}

.ui-modal-backdrop.ui-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.ui-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  width: 90%;
  max-width: 32rem;
  max-height: 90vh;
  background: var(--ui-white);
  border-radius: var(--ui-radius-xl);
  box-shadow: var(--ui-shadow-xl);
  z-index: var(--ui-z-modal);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--ui-transition-normal), visibility var(--ui-transition-normal), transform var(--ui-transition-normal);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.ui-modal.ui-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.ui-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ui-space-4) var(--ui-space-6);
  border-bottom: var(--ui-border-width) solid var(--ui-gray-200);
}

.ui-modal-title {
  margin: 0;
  font-family: var(--ui-font-heading);
  font-size: var(--ui-text-lg);
  font-weight: var(--ui-font-semibold);
}

.ui-modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--ui-radius-md);
  color: var(--ui-gray-500);
  cursor: pointer;
  transition: background var(--ui-transition-fast), color var(--ui-transition-fast);
}

.ui-modal-close:hover {
  background: var(--ui-gray-100);
  color: var(--ui-gray-700);
}

.ui-modal-body {
  flex: 1;
  padding: var(--ui-space-6);
  overflow-y: auto;
}

.ui-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--ui-space-3);
  padding: var(--ui-space-4) var(--ui-space-6);
  border-top: var(--ui-border-width) solid var(--ui-gray-200);
  background: var(--ui-gray-50);
}

/* Modal Sizes */
.ui-modal-sm { max-width: 24rem; }
.ui-modal-lg { max-width: 48rem; }
.ui-modal-xl { max-width: 64rem; }
.ui-modal-full { max-width: calc(100% - 2rem); max-height: calc(100% - 2rem); }

/* ============================================
   TABS COMPONENT
   ============================================ */

.ui-tabs {
  display: flex;
  flex-direction: column;
}

.ui-tabs-list {
  display: flex;
  border-bottom: var(--ui-border-width) solid var(--ui-gray-200);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ui-tabs-tab {
  display: flex;
  align-items: center;
  gap: var(--ui-space-2);
  padding: var(--ui-space-3) var(--ui-space-4);
  font-size: var(--ui-text-sm);
  font-weight: var(--ui-font-medium);
  color: var(--ui-gray-600);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color var(--ui-transition-fast), border-color var(--ui-transition-fast);
}

.ui-tabs-tab:hover {
  color: var(--ui-gray-900);
}

.ui-tabs-tab.ui-active {
  color: var(--ui-primary);
  border-bottom-color: var(--ui-primary);
}

.ui-tabs-panel {
  display: none;
  padding: var(--ui-space-4);
}

.ui-tabs-panel.ui-active {
  display: block;
}

/* Responsive tabs */
@media (max-width: 640px) {
  .ui-tabs-list {
    flex-wrap: wrap;
    gap: var(--ui-space-1);
  }

  .ui-tabs-tab {
    padding: var(--ui-space-2) var(--ui-space-3);
    font-size: var(--ui-text-xs);
  }

  .ui-tabs-pills .ui-tabs-list {
    flex-wrap: wrap;
  }
}

/* Tabs Pills Variant */
.ui-tabs-pills .ui-tabs-list {
  background: transparent;
  border-bottom: none;
  padding: var(--ui-space-2);
  gap: var(--ui-space-2);
}

.ui-tabs-pills .ui-tabs-tab {
  border-radius: var(--ui-radius-lg);
  border-bottom: none;
  margin-bottom: 0;
  background: var(--ui-gray-100);
}

.ui-tabs-pills .ui-tabs-tab:hover {
  background: var(--ui-gray-200);
  color: var(--ui-gray-900);
}

.ui-tabs-pills .ui-tabs-tab.ui-active {
  background: var(--ui-primary);
  color: var(--ui-white);
  border-bottom-color: transparent;
}

/* Tabs Boxed Variant */
.ui-tabs-boxed {
  background: var(--ui-white);
  border-radius: var(--ui-radius-xl);
  box-shadow: var(--ui-shadow-md);
  overflow: hidden;
}

.ui-tabs-boxed .ui-tabs-list {
  background: var(--ui-gray-50);
}

.ui-tabs-boxed .ui-tabs-tab {
  flex: 1;
  justify-content: center;
}

.ui-tabs-boxed .ui-tabs-tab.ui-active {
  background: var(--ui-white);
}

/* Tabs Underline Template */
.ui-tabs-underline .ui-tabs-list {
  border-bottom: 2px solid var(--ui-gray-200);
}
.ui-tabs-underline .ui-tabs-tab {
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
}
.ui-tabs-underline .ui-tabs-tab.ui-active {
  border-bottom-color: var(--ui-primary);
}

/* Tabs Vertical Template */
.ui-tabs-vertical {
  flex-direction: row;
}
.ui-tabs-vertical .ui-tabs-list {
  flex-direction: column;
  border-bottom: none;
  border-right: var(--ui-border-width) solid var(--ui-gray-200);
}
.ui-tabs-vertical .ui-tabs-tab {
  border-bottom: none;
  border-right: 2px solid transparent;
  margin-right: -1px;
  justify-content: flex-start;
}
.ui-tabs-vertical .ui-tabs-tab.ui-active {
  border-right-color: var(--ui-primary);
}
.ui-tabs-vertical .ui-tabs-panels {
  flex: 1;
}

/* Tabs Sizes */
.ui-tabs-sm .ui-tabs-tab { padding: var(--ui-space-1) var(--ui-space-2); font-size: var(--ui-text-sm); }
.ui-tabs-lg .ui-tabs-tab { padding: var(--ui-space-3) var(--ui-space-5); font-size: var(--ui-text-lg); }

/* Tabs Colors */
.ui-tabs[data-color] .ui-tabs-tab.ui-active { color: var(--_c); border-color: var(--_c); }
.ui-tabs-pills[data-color] .ui-tabs-tab.ui-active { background: var(--_c); }

/* Tab Icon */
.ui-tabs-icon {
  margin-right: var(--ui-space-2);
}

/* ============================================
   ACCORDION COMPONENT
   ============================================ */

.ui-accordion {
  border: var(--ui-border-width) solid var(--ui-gray-200);
  border-radius: var(--ui-radius-lg);
  overflow: hidden;
}

.ui-accordion-item {
  border-bottom: var(--ui-border-width) solid var(--ui-gray-200);
}

.ui-accordion-item:last-child {
  border-bottom: none;
}

.ui-accordion-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--ui-space-4) var(--ui-space-6);
  font-size: var(--ui-text-sm);
  font-weight: var(--ui-font-medium);
  text-align: left;
  background: var(--ui-white);
  border: none;
  cursor: pointer;
  transition: background var(--ui-transition-fast);
}

.ui-accordion-trigger:hover {
  background: var(--ui-gray-50);
}

.ui-accordion-icon {
  transition: transform var(--ui-transition-fast);
}

.ui-accordion-item.ui-active .ui-accordion-icon {
  transform: rotate(180deg);
}

.ui-accordion-content {
  display: none;
  padding: var(--ui-space-4) var(--ui-space-6);
  background: var(--ui-gray-50);
}

.ui-accordion-item.ui-active .ui-accordion-content {
  display: block;
}

/* Accordion Styled Variant (with circular icon, active highlight) */
.ui-accordion-styled {
  box-shadow: var(--ui-shadow-md);
}

.ui-accordion-styled .ui-accordion-trigger {
  font-family: var(--ui-font-heading);
}

.ui-accordion-styled .ui-accordion-item.ui-active .ui-accordion-trigger {
  background: var(--ui-primary-light);
  color: var(--ui-primary);
}

.ui-accordion-styled .ui-accordion-icon {
  width: 24px;
  height: 24px;
  border-radius: var(--ui-radius-full);
  background: var(--ui-gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--ui-text-xs);
}

.ui-accordion-styled .ui-accordion-item.ui-active .ui-accordion-icon {
  background: var(--ui-primary);
  color: var(--ui-white);
}

/* Accordion Minimal Variant */
.ui-accordion-minimal {
  border: none;
  background: transparent;
}

.ui-accordion-minimal .ui-accordion-item {
  border-bottom: var(--ui-border-width) solid var(--ui-gray-200);
}

.ui-accordion-minimal .ui-accordion-trigger {
  padding: var(--ui-space-4) 0;
  background: transparent;
}

.ui-accordion-minimal .ui-accordion-trigger:hover {
  background: transparent;
  color: var(--ui-primary);
}

.ui-accordion-minimal .ui-accordion-content {
  background: transparent;
  padding: 0 0 var(--ui-space-4) 0;
}

/* ============================================
   DROPDOWN COMPONENT
   ============================================ */

.ui-dropdown {
  position: relative;
  display: inline-block;
}

.ui-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 12rem;
  margin-top: var(--ui-space-1);
  padding: var(--ui-space-1);
  background: var(--ui-white);
  border: var(--ui-border-width) solid var(--ui-gray-200);
  border-radius: var(--ui-radius-lg);
  box-shadow: var(--ui-shadow-lg);
  z-index: var(--ui-z-dropdown);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.5rem);
  transition: opacity var(--ui-transition-fast), visibility var(--ui-transition-fast), transform var(--ui-transition-fast);
}

.ui-dropdown.ui-active .ui-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.ui-dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--ui-space-2);
  width: 100%;
  padding: var(--ui-space-2) var(--ui-space-3);
  font-size: var(--ui-text-sm);
  color: var(--ui-gray-700);
  background: transparent;
  border: none;
  border-radius: var(--ui-radius-md);
  text-align: left;
  cursor: pointer;
  transition: background var(--ui-transition-fast), color var(--ui-transition-fast);
}

.ui-dropdown-item:hover {
  background: var(--ui-gray-100);
  color: var(--ui-gray-900);
}

.ui-dropdown-divider {
  height: 1px;
  margin: var(--ui-space-1) 0;
  background: var(--ui-gray-200);
}

/* ============================================
   TOAST COMPONENT
   ============================================ */

.ui-toast-container {
  position: fixed;
  bottom: var(--ui-space-4);
  right: var(--ui-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-2);
  z-index: var(--ui-z-toast);
  pointer-events: none;
}

.ui-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--ui-space-3);
  min-width: 20rem;
  max-width: 28rem;
  padding: var(--ui-space-4);
  background: var(--ui-white);
  border-radius: var(--ui-radius-lg);
  box-shadow: var(--ui-shadow-lg);
  pointer-events: auto;
  animation: ui-toast-in var(--ui-transition-normal) ease;
}

@keyframes ui-toast-in {
  from {
    opacity: 0;
    transform: translateX(1rem);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.ui-toast-icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
}

.ui-toast-content {
  flex: 1;
}

.ui-toast-title {
  margin: 0 0 var(--ui-space-1);
  font-weight: var(--ui-font-semibold);
  font-size: var(--ui-text-sm);
}

.ui-toast-message {
  margin: 0;
  font-size: var(--ui-text-sm);
  color: var(--ui-gray-600);
}

.ui-toast-close {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--ui-radius-sm);
  color: var(--ui-gray-400);
  cursor: pointer;
  transition: background var(--ui-transition-fast), color var(--ui-transition-fast);
}

.ui-toast-close:hover {
  background: var(--ui-gray-100);
  color: var(--ui-gray-600);
}

.ui-toast[data-color] .ui-toast-icon { color: var(--_c); }

/* ============================================
   SPINNER COMPONENT
   ============================================ */

.ui-spinner {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  border: var(--ui-border-width) solid var(--ui-gray-200);
  border-top-color: var(--ui-primary);
  border-radius: 50%;
  animation: ui-spin 0.75s linear infinite;
}

@keyframes ui-spin {
  to { transform: rotate(360deg); }
}

.ui-spinner-sm { width: 1rem; height: 1rem; border-width: 2px; }
.ui-spinner-lg { width: 2rem; height: 2rem; border-width: 3px; }
.ui-spinner-xl { width: 3rem; height: 3rem; border-width: 4px; }

/* Spinner Dots Style */
.ui-spinner-dots {
  display: flex;
  gap: 6px;
  width: auto;
  height: auto;
  border: none;
  animation: none;
}

.ui-spinner-dot {
  width: 10px;
  height: 10px;
  background: var(--ui-primary);
  border-radius: 50%;
  animation: ui-bounce 1.4s ease-in-out infinite;
}

.ui-spinner-dot:nth-child(1) { animation-delay: 0s; }
.ui-spinner-dot:nth-child(2) { animation-delay: 0.16s; }
.ui-spinner-dot:nth-child(3) { animation-delay: 0.32s; }

@keyframes ui-bounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
  40% { transform: scale(1); opacity: 1; }
}

.ui-spinner-dots.ui-spinner-sm .ui-spinner-dot { width: 6px; height: 6px; }
.ui-spinner-dots.ui-spinner-lg .ui-spinner-dot { width: 12px; height: 12px; }
.ui-spinner-dots.ui-spinner-xl .ui-spinner-dot { width: 16px; height: 16px; }

/* Spinner Bars Style */
.ui-spinner-bars {
  display: flex;
  gap: 4px;
  align-items: center;
  height: 24px;
  width: auto;
  border: none;
  animation: none;
}

.ui-spinner-bar {
  width: 4px;
  height: 100%;
  background: var(--ui-primary);
  border-radius: 2px;
  animation: ui-bars 1s ease-in-out infinite;
}

.ui-spinner-bar:nth-child(1) { animation-delay: 0s; }
.ui-spinner-bar:nth-child(2) { animation-delay: 0.1s; }
.ui-spinner-bar:nth-child(3) { animation-delay: 0.2s; }
.ui-spinner-bar:nth-child(4) { animation-delay: 0.3s; }

@keyframes ui-bars {
  0%, 100% { transform: scaleY(0.4); }
  50% { transform: scaleY(1); }
}

.ui-spinner-bars.ui-spinner-sm { height: 16px; }
.ui-spinner-bars.ui-spinner-sm .ui-spinner-bar { width: 3px; }
.ui-spinner-bars.ui-spinner-lg { height: 32px; }
.ui-spinner-bars.ui-spinner-lg .ui-spinner-bar { width: 5px; }
.ui-spinner-bars.ui-spinner-xl { height: 40px; }
.ui-spinner-bars.ui-spinner-xl .ui-spinner-bar { width: 6px; }

/* Color variants via [data-color] */
.ui-spinner[data-color] { border-top-color: var(--_c); }
.ui-spinner-dots[data-color] .ui-spinner-dot { background: var(--_c); }
.ui-spinner-bars[data-color] .ui-spinner-bar { background: var(--_c); }

/* Pulse spinner template */
.ui-spinner-pulse {
  animation: ui-pulse 1.5s ease-in-out infinite;
  border: none;
}
@keyframes ui-pulse {
  0%, 100% { transform: scale(0.8); opacity: 0.5; }
  50% { transform: scale(1); opacity: 1; }
}

/* Circular template (default behavior) */
.ui-spinner-circular {
  border: 3px solid var(--ui-gray-200);
  border-top-color: var(--ui-primary);
  animation: ui-spin 0.8s linear infinite;
}

/* Extra small spinner */
.ui-spinner-xs { width: 0.75rem; height: 0.75rem; border-width: 2px; }

/* ============================================
   PROGRESS COMPONENT
   ============================================ */

.ui-progress {
  width: 100%;
  height: 0.5rem;
  background: var(--ui-gray-200);
  border-radius: var(--ui-radius-full);
  overflow: hidden;
  position: relative;
}

.ui-progress-bar {
  height: 100%;
  background: var(--ui-primary);
  border-radius: var(--ui-radius-full);
  transition: width var(--ui-transition-normal);
}

.ui-progress[data-color] .ui-progress-bar { background: var(--_c); }

/* Progress sizes */
.ui-progress-sm { height: 0.25rem; }
.ui-progress-lg { height: 1rem; }

/* Progress label */
.ui-progress-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: var(--ui-text-xs);
  font-weight: 500;
  color: var(--ui-gray-700);
}
.ui-progress-lg .ui-progress-label { font-size: var(--ui-text-sm); }

/* Striped progress bar */
.ui-progress-bar-striped {
  background-image: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.15) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(255, 255, 255, 0.15) 75%,
    transparent 75%,
    transparent
  );
  background-size: 1rem 1rem;
}
.ui-progress-bar-animated {
  animation: ui-progress-stripes 1s linear infinite;
}
@keyframes ui-progress-stripes {
  0% { background-position: 1rem 0; }
  100% { background-position: 0 0; }
}

/* Circular progress */
.ui-progress-template-circular {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: auto;
  height: auto;
  background: none;
  overflow: visible;
}
.ui-progress-circular {
  transform: rotate(-90deg);
}
.ui-progress-circle-bg {
  fill: none;
  stroke: var(--ui-gray-200);
}
.ui-progress-circle-bar {
  fill: none;
  stroke: var(--ui-primary);
  stroke-linecap: round;
  transition: stroke-dashoffset 0.3s ease;
}
.ui-progress-template-circular .ui-progress-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: var(--ui-text-sm);
  font-weight: 600;
}
.ui-progress-template-circular[data-color] .ui-progress-circle-bar { stroke: var(--_c); }

/* Steps progress */
.ui-progress-template-steps {
  background: none;
  overflow: visible;
  height: auto;
}
.ui-progress-steps {
  display: flex;
  align-items: center;
  justify-content: center;
}
.ui-progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ui-space-2);
}
.ui-progress-step-indicator {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--ui-text-sm);
  font-weight: 500;
  background: var(--ui-gray-200);
  color: var(--ui-gray-600);
  transition: all 0.2s ease;
}
.ui-progress-step-current .ui-progress-step-indicator {
  background: var(--ui-primary);
  color: white;
}
.ui-progress-step-completed .ui-progress-step-indicator {
  background: var(--ui-success);
  color: white;
}
.ui-progress-step-label {
  font-size: var(--ui-text-xs);
  color: var(--ui-gray-600);
  text-align: center;
  max-width: 80px;
}
.ui-progress-step-connector {
  width: 3rem;
  height: 2px;
  background: var(--ui-gray-200);
  margin: 0 var(--ui-space-2);
}
.ui-progress-step-connector.completed {
  background: var(--ui-success);
}

/* ============================================
   TABLE COMPONENT
   ============================================ */

.ui-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ui-text-sm);
}

.ui-table th,
.ui-table td {
  padding: var(--ui-space-3) var(--ui-space-4);
  text-align: left;
  border-bottom: var(--ui-border-width) solid var(--ui-gray-200);
}

.ui-table th {
  font-weight: var(--ui-font-semibold);
  color: var(--ui-gray-700);
  background: var(--ui-gray-50);
}

.ui-table tbody tr:hover {
  background: var(--ui-gray-50);
}

.ui-table-striped tbody tr:nth-child(even) {
  background: var(--ui-gray-50);
}

/* Table template variations */
.ui-table-compact .ui-table th,
.ui-table-compact .ui-table td {
  padding: var(--ui-space-1) var(--ui-space-2);
  font-size: var(--ui-text-sm);
}

.ui-table-comfortable .ui-table th,
.ui-table-comfortable .ui-table td {
  padding: var(--ui-space-4) var(--ui-space-5);
}

.ui-table-borderless .ui-table,
.ui-table-borderless .ui-table th,
.ui-table-borderless .ui-table td {
  border: none;
}

.ui-table-borderless .ui-table tbody tr:hover {
  background: var(--ui-gray-50);
}

/* DataTables Integration Styles */
.ui-table-wrapper {
  width: 100%;
}

.ui-dt-top {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-3);
  margin-bottom: var(--ui-space-4);
}

.ui-dt-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-space-2);
}

.ui-dt-buttons .dt-button {
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-1);
  padding: var(--ui-space-2) var(--ui-space-3);
  font-size: var(--ui-text-sm);
  font-weight: var(--ui-font-medium);
  color: var(--ui-gray-700);
  background: var(--ui-white);
  border: var(--ui-border-width) solid var(--ui-gray-300);
  border-radius: var(--ui-radius-md);
  cursor: pointer;
  transition: all var(--ui-transition-fast);
}

.ui-dt-buttons .dt-button:hover {
  background: var(--ui-gray-50);
  border-color: var(--ui-gray-400);
}

.ui-dt-buttons .dt-button:active {
  background: var(--ui-gray-100);
}

.ui-dt-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ui-space-3);
}

.ui-dt-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--ui-space-4);
  flex-wrap: wrap;
  gap: var(--ui-space-3);
}

.ui-dt-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--ui-space-4);
  flex-wrap: wrap;
  gap: var(--ui-space-3);
}

/* Column visibility dropdown */
.dt-button-collection {
  position: absolute;
  background: var(--ui-white);
  border: var(--ui-border-width) solid var(--ui-gray-200);
  border-radius: var(--ui-radius-lg);
  box-shadow: var(--ui-shadow-lg);
  padding: var(--ui-space-2);
  z-index: var(--ui-z-dropdown);
  min-width: 160px;
}

.dt-button-collection .dt-button {
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--ui-space-2) var(--ui-space-3);
  font-size: var(--ui-text-sm);
  color: var(--ui-gray-700);
  background: transparent;
  border: none;
  border-radius: var(--ui-radius-md);
  cursor: pointer;
  transition: background var(--ui-transition-fast);
  text-align: left;
}

.dt-button-collection .dt-button:hover {
  background: var(--ui-gray-100);
}

.dt-button-collection .dt-button.active {
  background: var(--ui-primary-light);
  color: var(--ui-primary-dark);
}

.dt-button-collection .dt-button.active::before {
  content: '✓';
  margin-right: var(--ui-space-2);
  color: var(--ui-primary);
}

/* Column reorder visual feedback */
.dt-colReorder-moving {
  outline: 2px dashed var(--ui-primary);
  outline-offset: -2px;
}

.dt-colReorder-moving-target {
  background: var(--ui-primary-light) !important;
}

.ui-dt-length select {
  padding: var(--ui-space-2) var(--ui-space-3);
  font-size: var(--ui-text-sm);
  border: var(--ui-border-width) solid var(--ui-gray-300);
  border-radius: var(--ui-radius-md);
  background: var(--ui-white);
  cursor: pointer;
}

.ui-dt-search input {
  padding: var(--ui-space-2) var(--ui-space-3);
  font-size: var(--ui-text-sm);
  border: var(--ui-border-width) solid var(--ui-gray-300);
  border-radius: var(--ui-radius-md);
  min-width: 200px;
  transition: border-color var(--ui-transition-fast), box-shadow var(--ui-transition-fast);
}

/* focus styles in consolidated rule above */

.ui-dt-info {
  font-size: var(--ui-text-sm);
  color: var(--ui-gray-600);
}

.ui-dt-pagination {
  display: flex;
  gap: var(--ui-space-1);
}

/* DataTables default class overrides */
.dataTables_wrapper {
  font-family: var(--ui-font-body);
}

.dataTables_length {
  display: flex;
  align-items: center;
  gap: var(--ui-space-2);
  font-size: var(--ui-text-sm);
  color: var(--ui-gray-600);
}

.dataTables_length select {
  padding: var(--ui-space-2) var(--ui-space-8) var(--ui-space-2) var(--ui-space-3);
  font-size: var(--ui-text-sm);
  border: var(--ui-border-width) solid var(--ui-gray-300);
  border-radius: var(--ui-radius-md);
  background: var(--ui-white);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right var(--ui-space-2) center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
}

.dataTables_filter {
  display: flex;
  align-items: center;
  gap: var(--ui-space-2);
}

.dataTables_filter input {
  padding: var(--ui-space-2) var(--ui-space-3);
  font-size: var(--ui-text-sm);
  border: var(--ui-border-width) solid var(--ui-gray-300);
  border-radius: var(--ui-radius-md);
  min-width: 200px;
  transition: border-color var(--ui-transition-fast), box-shadow var(--ui-transition-fast);
}

/* focus styles in consolidated rule above */

.dataTables_info {
  font-size: var(--ui-text-sm);
  color: var(--ui-gray-600);
  padding: var(--ui-space-2) 0;
}

.dataTables_paginate {
  display: flex;
  gap: var(--ui-space-1);
}

.dataTables_paginate .paginate_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 var(--ui-space-2);
  font-size: var(--ui-text-sm);
  color: var(--ui-gray-700);
  background: var(--ui-white);
  border: var(--ui-border-width) solid var(--ui-gray-300);
  border-radius: var(--ui-radius-md);
  cursor: pointer;
  transition: all var(--ui-transition-fast);
}

.dataTables_paginate .paginate_button:hover:not(.disabled):not(.current) {
  background: var(--ui-gray-50);
  border-color: var(--ui-gray-400);
}

.dataTables_paginate .paginate_button.current {
  background: var(--ui-primary);
  border-color: var(--ui-primary);
  color: var(--ui-white);
}

.dataTables_paginate .paginate_button.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Sorting indicators */
.ui-table thead th.sorting,
.ui-table thead th.sorting_asc,
.ui-table thead th.sorting_desc {
  cursor: pointer;
  position: relative;
  padding-right: var(--ui-space-8);
}

.ui-table thead th.sorting::after,
.ui-table thead th.sorting_asc::after,
.ui-table thead th.sorting_desc::after {
  position: absolute;
  right: var(--ui-space-3);
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--ui-text-xs);
  color: var(--ui-gray-400);
}

.ui-table thead th.sorting::after {
  content: '⇅';
}

.ui-table thead th.sorting_asc::after {
  content: '↑';
  color: var(--ui-primary);
}

.ui-table thead th.sorting_desc::after {
  content: '↓';
  color: var(--ui-primary);
}

/* Responsive table */
.ui-table.collapsed tbody td.child {
  padding: var(--ui-space-4);
}

.ui-table.collapsed tbody td.child ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ui-table.collapsed tbody td.child ul li {
  display: flex;
  padding: var(--ui-space-2) 0;
  border-bottom: var(--ui-border-width) solid var(--ui-gray-100);
}

.ui-table.collapsed tbody td.child ul li:last-child {
  border-bottom: none;
}

.ui-table.collapsed tbody td.child .dtr-title {
  font-weight: var(--ui-font-semibold);
  min-width: 100px;
  color: var(--ui-gray-700);
}

/* ============================================
   FORM LAYOUT
   ============================================ */

.ui-form-group {
  margin-bottom: var(--ui-space-4);
}

.ui-form-label {
  display: block;
  margin-bottom: var(--ui-space-1);
  font-family: var(--ui-font-body);
  font-size: var(--ui-text-sm);
  font-weight: var(--ui-font-medium);
  color: var(--ui-gray-700);
}

.ui-form-hint {
  margin-top: var(--ui-space-1);
  font-size: var(--ui-text-xs);
  color: var(--ui-gray-500);
}

.ui-form-error {
  margin-top: var(--ui-space-1);
  font-size: var(--ui-text-xs);
  color: var(--ui-danger);
}

.ui-form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--ui-space-4);
}

/* Form Templates */
.ui-form-template-inline .ui-form-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--ui-space-3);
}

.ui-form-template-inline .ui-form-group {
  margin-bottom: 0;
}

.ui-form-template-horizontal .ui-form-group-horizontal {
  display: flex;
  align-items: flex-start;
  gap: var(--ui-space-3);
}

.ui-form-template-horizontal .ui-form-group-horizontal .ui-form-label {
  flex: 0 0 var(--label-width, 30%);
  padding-top: 0.5rem;
  text-align: right;
  margin-bottom: 0;
}

.ui-form-template-horizontal .ui-form-group-horizontal .ui-form-input-wrap {
  flex: 1;
}

.ui-form-template-compact .ui-form-group {
  margin-bottom: var(--ui-space-2);
}

/* Form Sections */
.ui-form-section {
  border: var(--ui-border-width) solid var(--ui-gray-200);
  border-radius: var(--ui-radius-md);
  padding: var(--ui-space-4);
  margin-bottom: var(--ui-space-4);
}

.ui-form-section-title {
  font-size: var(--ui-text-lg);
  font-weight: var(--ui-font-semibold);
  color: var(--ui-gray-800);
  padding: 0 var(--ui-space-2);
  margin-bottom: var(--ui-space-2);
}

.ui-form-section-description {
  font-size: var(--ui-text-sm);
  color: var(--ui-gray-600);
  margin-bottom: var(--ui-space-3);
}

/* Form Buttons */
.ui-form-buttons {
  display: flex;
  gap: var(--ui-space-3);
  margin-top: var(--ui-space-4);
  padding-top: var(--ui-space-4);
  border-top: var(--ui-border-width) solid var(--ui-gray-200);
}

/* Wizard Form */
.ui-form-steps {
  display: flex;
  justify-content: center;
  margin-bottom: var(--ui-space-6);
  padding-bottom: var(--ui-space-4);
  border-bottom: var(--ui-border-width) solid var(--ui-gray-200);
}

.ui-form-step {
  display: flex;
  align-items: center;
  gap: var(--ui-space-2);
  padding: var(--ui-space-2) var(--ui-space-4);
  color: var(--ui-gray-400);
  position: relative;
}

.ui-form-step:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -1rem;
  width: 2rem;
  height: 2px;
  background: var(--ui-gray-200);
}

.ui-form-step.completed::after {
  background: var(--ui-primary);
}

.ui-form-step-num {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--ui-gray-200);
  font-size: var(--ui-text-sm);
  font-weight: var(--ui-font-semibold);
}

.ui-form-step.active .ui-form-step-num {
  background: var(--ui-primary);
  color: white;
}

.ui-form-step.completed .ui-form-step-num {
  background: var(--ui-primary);
  color: white;
}

.ui-form-step.completed .ui-form-step-num::before {
  content: '✓';
}

.ui-form-step-title {
  font-size: var(--ui-text-sm);
  font-weight: var(--ui-font-medium);
}

.ui-form-step.active,
.ui-form-step.completed {
  color: var(--ui-gray-800);
}

.ui-form-steps-content {
  min-height: 200px;
}

.ui-form-step-content {
  display: none;
}

.ui-form-step-content.active {
  display: block;
}

/* Form Size Variants */
.ui-form-sm .ui-form-label {
  font-size: var(--ui-text-xs);
}

.ui-form-sm .ui-form-group {
  margin-bottom: var(--ui-space-2);
}

.ui-form-lg .ui-form-label {
  font-size: var(--ui-text-base);
}

.ui-form-lg .ui-form-group {
  margin-bottom: var(--ui-space-5);
}

/* Form Variant Styles */
.ui-form-variant-soft {
  background: var(--ui-gray-50);
  padding: var(--ui-space-4);
  border-radius: var(--ui-radius-lg);
}

.ui-form-variant-outlined {
  border: var(--ui-border-width) solid var(--ui-gray-300);
  padding: var(--ui-space-4);
  border-radius: var(--ui-radius-lg);
}

/* ============================================
   EDIT MODE STYLES
   ============================================ */

.ui-edit-mode .ui-component {
  position: relative;
  outline: 1px dashed transparent;
  transition: outline-color var(--ui-transition-fast);
}

.ui-edit-mode .ui-component:hover {
  outline-color: var(--ui-primary-light);
}

.ui-edit-mode .ui-component.ui-selected {
  outline: 2px solid var(--ui-primary);
  outline-offset: 2px;
}

.ui-edit-mode .ui-component.ui-selected::after {
  content: attr(data-component-type);
  position: absolute;
  top: -1.5rem;
  left: 0;
  padding: var(--ui-space-1) var(--ui-space-2);
  font-size: var(--ui-text-xs);
  font-weight: var(--ui-font-medium);
  color: var(--ui-white);
  background: var(--ui-primary);
  border-radius: var(--ui-radius-sm);
}

/* Properties Panel */
.ui-properties-panel {
  position: fixed;
  top: var(--ui-space-4);
  right: var(--ui-space-4);
  width: 20rem;
  max-height: calc(100vh - 2rem);
  background: var(--ui-white);
  border: var(--ui-border-width) solid var(--ui-gray-200);
  border-radius: var(--ui-radius-xl);
  box-shadow: var(--ui-shadow-xl);
  z-index: var(--ui-z-modal);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.ui-properties-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ui-space-3) var(--ui-space-4);
  border-bottom: var(--ui-border-width) solid var(--ui-gray-200);
  background: var(--ui-gray-50);
}

.ui-properties-title {
  margin: 0;
  font-size: var(--ui-text-sm);
  font-weight: var(--ui-font-semibold);
}

.ui-properties-body {
  flex: 1;
  padding: var(--ui-space-4);
  overflow-y: auto;
}

/* ============================================
   BREADCRUMBS COMPONENT
   ============================================ */

.ui-breadcrumbs {
  display: flex;
  align-items: center;
  gap: var(--ui-space-2);
  font-size: var(--ui-text-sm);
  flex-wrap: wrap;
}

/* Responsive breadcrumbs */
@media (max-width: 480px) {
  .ui-breadcrumbs {
    font-size: var(--ui-text-xs);
    gap: var(--ui-space-1);
  }
}

.ui-breadcrumb-item {
  color: var(--ui-gray-500);
  text-decoration: none;
  transition: color 0.2s ease;
  cursor: pointer;
}

.ui-breadcrumb-item:hover {
  color: var(--ui-primary);
}

.ui-breadcrumb-item.active {
  color: var(--ui-gray-800);
  font-weight: var(--ui-font-medium);
  cursor: default;
}

.ui-breadcrumb-separator {
  color: var(--ui-gray-300);
  user-select: none;
}

/* Breadcrumbs List */
.ui-breadcrumbs-list {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: var(--ui-space-2);
}

/* Breadcrumb Icon */
.ui-breadcrumb-icon {
  margin-right: var(--ui-space-1);
}

/* Breadcrumbs Sizes */
.ui-breadcrumbs-sm { font-size: var(--ui-text-xs); }
.ui-breadcrumbs-lg { font-size: var(--ui-text-base); }

/* Breadcrumbs Arrows Template */
.ui-breadcrumbs-arrows .ui-breadcrumbs-list {
  gap: 0;
}
.ui-breadcrumbs-arrows .ui-breadcrumb-item {
  position: relative;
  padding: var(--ui-space-2) var(--ui-space-4);
  padding-left: var(--ui-space-6);
  background: var(--ui-gray-100);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 12px 50%);
}
.ui-breadcrumbs-arrows .ui-breadcrumb-item:first-child {
  padding-left: var(--ui-space-4);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%);
}
.ui-breadcrumbs-arrows .ui-breadcrumb-item.active {
  background: var(--ui-primary);
  color: white;
}
.ui-breadcrumbs-arrows.ui-breadcrumbs-primary .ui-breadcrumb-item.active { background: var(--ui-primary); }

/* Breadcrumbs Pills Template */
.ui-breadcrumbs-pills .ui-breadcrumb-item {
  padding: var(--ui-space-1) var(--ui-space-3);
  background: var(--ui-gray-100);
  border-radius: var(--ui-radius-full);
}
.ui-breadcrumbs-pills .ui-breadcrumb-item.active {
  background: var(--ui-gray-200);
}
.ui-breadcrumbs-pills.ui-breadcrumbs-primary .ui-breadcrumb-item.active {
  background: var(--ui-primary);
  color: white;
}

/* Breadcrumbs Dots Template */
.ui-breadcrumbs-dots .ui-breadcrumb-separator {
  font-size: 0.5em;
}

/* ============================================
   NAVBAR COMPONENT
   ============================================ */

.ui-navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ui-space-4) var(--ui-space-6);
  background: var(--ui-white);
  border-radius: var(--ui-radius-lg);
  box-shadow: var(--ui-shadow-md);
}

.ui-navbar-brand {
  font-family: var(--ui-font-heading);
  font-size: var(--ui-text-xl);
  font-weight: var(--ui-font-bold);
  color: var(--ui-primary);
  text-decoration: none;
}

.ui-navbar-nav {
  display: flex;
  align-items: center;
  gap: var(--ui-space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.ui-nav-link {
  padding: var(--ui-space-2) var(--ui-space-4);
  color: var(--ui-gray-600);
  text-decoration: none;
  font-size: var(--ui-text-sm);
  font-weight: var(--ui-font-medium);
  border-radius: var(--ui-radius-md);
  transition: all 0.2s ease;
  cursor: pointer;
}

.ui-nav-link:hover {
  background: var(--ui-gray-100);
  color: var(--ui-gray-800);
}

.ui-nav-link.active {
  background: var(--ui-primary-light);
  color: var(--ui-primary);
}

.ui-navbar-actions {
  display: flex;
  align-items: center;
  gap: var(--ui-space-3);
}

/* Responsive navbar */
@media (max-width: 768px) {
  .ui-navbar {
    flex-wrap: wrap;
    gap: var(--ui-space-3);
    padding: var(--ui-space-3) var(--ui-space-4);
  }

  .ui-navbar-nav {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--ui-space-1);
  }

  .ui-nav-link {
    padding: var(--ui-space-2) var(--ui-space-3);
    font-size: var(--ui-text-xs);
  }
}

@media (max-width: 480px) {
  .ui-navbar {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .ui-navbar-nav {
    width: 100%;
    justify-content: center;
    order: 3;
    margin-top: var(--ui-space-2);
    padding-top: var(--ui-space-2);
    border-top: var(--ui-border-width) solid var(--ui-gray-200);
  }

  .ui-navbar-actions {
    justify-content: center;
  }
}

/* Navbar Container */
.ui-navbar-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/* Navbar Brand */
.ui-navbar-brand {
  display: flex;
  align-items: center;
  gap: var(--ui-space-2);
}
.ui-navbar-logo {
  height: 32px;
  width: auto;
}
.ui-navbar-logo img {
  height: 100%;
  width: auto;
}

/* Nav Icon */
.ui-nav-icon {
  margin-right: var(--ui-space-1);
}

/* Navbar Centered Template */
.ui-navbar-centered .ui-navbar-container {
  justify-content: center;
}
.ui-navbar-centered .ui-navbar-nav {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.ui-navbar-centered .ui-navbar-brand {
  position: absolute;
  left: var(--ui-space-6);
}
.ui-navbar-centered .ui-navbar-actions {
  position: absolute;
  right: var(--ui-space-6);
}

/* Navbar Split Template */
.ui-navbar-split .ui-navbar-nav {
  flex: 1;
  justify-content: center;
}

/* Navbar Minimal Template */
.ui-navbar-minimal {
  box-shadow: none;
  background: transparent;
  padding: var(--ui-space-3) 0;
}
.ui-navbar-minimal .ui-navbar-container {
  gap: var(--ui-space-6);
}

/* Navbar Transparent Template */
.ui-navbar-transparent {
  background: transparent;
  box-shadow: none;
}

/* Navbar Dark */
.ui-navbar-dark {
  background: var(--ui-gray-900);
}
.ui-navbar-dark .ui-navbar-brand,
.ui-navbar-dark .ui-navbar-brand-text {
  color: white;
}
.ui-navbar-dark .ui-nav-link {
  color: var(--ui-gray-300);
}
.ui-navbar-dark .ui-nav-link:hover {
  background: var(--ui-gray-800);
  color: white;
}
.ui-navbar-dark .ui-nav-link.active {
  background: var(--ui-gray-700);
  color: white;
}

/* Navbar Primary */
.ui-navbar-primary {
  background: var(--ui-primary);
}
.ui-navbar-primary .ui-navbar-brand,
.ui-navbar-primary .ui-navbar-brand-text,
.ui-navbar-primary .ui-nav-link {
  color: white;
}
.ui-navbar-primary .ui-nav-link:hover {
  background: rgba(255,255,255,0.1);
}
.ui-navbar-primary .ui-nav-link.active {
  background: rgba(255,255,255,0.2);
}

/* Navbar Sticky */
.ui-navbar-sticky {
  position: sticky;
  top: 0;
  z-index: 100;
}

/* ============================================
   SIDEBAR COMPONENT
   ============================================ */

.ui-sidebar {
  width: 260px;
  background: var(--ui-white);
  border-radius: var(--ui-radius-lg);
  box-shadow: var(--ui-shadow-md);
  padding: var(--ui-space-4) 0;
}

.ui-sidebar-header {
  padding: var(--ui-space-2) var(--ui-space-5) var(--ui-space-4);
  border-bottom: var(--ui-border-width) solid var(--ui-gray-100);
  margin-bottom: var(--ui-space-2);
}

.ui-sidebar-title {
  font-family: var(--ui-font-heading);
  font-size: var(--ui-text-xs);
  font-weight: var(--ui-font-semibold);
  color: var(--ui-gray-400);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
}

.ui-sidebar-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ui-sidebar-item {
  margin: 2px var(--ui-space-2);
}

.ui-sidebar-link {
  display: flex;
  align-items: center;
  gap: var(--ui-space-3);
  padding: var(--ui-space-3) var(--ui-space-4);
  color: var(--ui-gray-600);
  text-decoration: none;
  font-size: var(--ui-text-sm);
  font-weight: var(--ui-font-medium);
  border-radius: var(--ui-radius-md);
  transition: all 0.2s ease;
  cursor: pointer;
}

.ui-sidebar-link:hover {
  background: var(--ui-gray-100);
  color: var(--ui-gray-800);
}

.ui-sidebar-link.active {
  background: var(--ui-primary-light);
  color: var(--ui-primary);
}

.ui-sidebar-icon {
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

.ui-sidebar-badge {
  margin-left: auto;
  padding: 2px var(--ui-space-2);
  background: var(--ui-secondary);
  color: var(--ui-white);
  font-size: var(--ui-text-xs);
  font-weight: var(--ui-font-semibold);
  border-radius: 10px;
}

.ui-sidebar-section {
  padding: var(--ui-space-4) var(--ui-space-5) var(--ui-space-2);
  font-size: var(--ui-text-xs);
  font-weight: var(--ui-font-semibold);
  color: var(--ui-gray-400);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Sidebar Label */
.ui-sidebar-label {
  flex: 1;
}

/* Sidebar Toggle */
.ui-sidebar-toggle {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ui-gray-500);
  padding: var(--ui-space-1);
}

/* Sidebar Header with toggle */
.ui-sidebar-collapsible .ui-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Sidebar Compact Template */
.ui-sidebar-compact .ui-sidebar-link {
  padding: var(--ui-space-2) var(--ui-space-3);
  font-size: var(--ui-text-xs);
}
.ui-sidebar-compact .ui-sidebar-icon {
  width: 16px;
}

/* Sidebar Icons-Only Template */
.ui-sidebar-icons-only {
  padding: var(--ui-space-3) 0;
}
.ui-sidebar-icons-only .ui-sidebar-link {
  justify-content: center;
  padding: var(--ui-space-3);
}
.ui-sidebar-icons-only .ui-sidebar-icon {
  width: auto;
  font-size: var(--ui-text-lg);
}

/* Sidebar Floating Template */
.ui-sidebar-floating {
  position: fixed;
  top: var(--ui-space-4);
  left: var(--ui-space-4);
  height: calc(100vh - var(--ui-space-8));
  box-shadow: var(--ui-shadow-xl);
  z-index: 50;
}

/* Sidebar Dark */
.ui-sidebar-dark {
  background: var(--ui-gray-900);
}
.ui-sidebar-dark .ui-sidebar-title,
.ui-sidebar-dark .ui-sidebar-section {
  color: var(--ui-gray-500);
}
.ui-sidebar-dark .ui-sidebar-link {
  color: var(--ui-gray-300);
}
.ui-sidebar-dark .ui-sidebar-link:hover {
  background: var(--ui-gray-800);
  color: white;
}
.ui-sidebar-dark .ui-sidebar-link.active {
  background: var(--ui-gray-700);
  color: white;
}
.ui-sidebar-dark .ui-sidebar-header {
  border-color: var(--ui-gray-700);
}

/* Sidebar Primary */
.ui-sidebar-primary {
  background: var(--ui-primary);
}
.ui-sidebar-primary .ui-sidebar-title,
.ui-sidebar-primary .ui-sidebar-section,
.ui-sidebar-primary .ui-sidebar-link {
  color: rgba(255,255,255,0.8);
}
.ui-sidebar-primary .ui-sidebar-link:hover {
  background: rgba(255,255,255,0.1);
  color: white;
}
.ui-sidebar-primary .ui-sidebar-link.active {
  background: rgba(255,255,255,0.2);
  color: white;
}
.ui-sidebar-primary .ui-sidebar-header {
  border-color: rgba(255,255,255,0.1);
}

/* Sidebar Collapsed */
.ui-sidebar.collapsed {
  width: 60px !important;
}
.ui-sidebar.collapsed .ui-sidebar-label,
.ui-sidebar.collapsed .ui-sidebar-badge,
.ui-sidebar.collapsed .ui-sidebar-section,
.ui-sidebar.collapsed .ui-sidebar-title {
  display: none;
}
.ui-sidebar.collapsed .ui-sidebar-link {
  justify-content: center;
  padding: var(--ui-space-3);
}

/* ============================================
   PAGINATION COMPONENT
   ============================================ */

.ui-pagination {
  display: flex;
  align-items: center;
  gap: var(--ui-space-1);
}

.ui-page-item {
  min-width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ui-radius-md);
  font-size: var(--ui-text-sm);
  font-weight: var(--ui-font-medium);
  color: var(--ui-gray-600);
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  background: transparent;
  user-select: none;
}

.ui-page-item:hover:not(.disabled):not(.active) {
  background: var(--ui-gray-100);
  color: var(--ui-gray-800);
}

.ui-page-item.active {
  background: var(--ui-primary);
  color: var(--ui-white);
}

.ui-page-item.disabled {
  color: var(--ui-gray-300);
  cursor: not-allowed;
}

.ui-page-ellipsis {
  min-width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ui-gray-400);
}

/* Responsive pagination */
@media (max-width: 640px) {
  .ui-pagination {
    flex-wrap: wrap;
    justify-content: center;
  }

  .ui-page-item,
  .ui-page-ellipsis {
    min-width: 36px;
    height: 36px;
    font-size: var(--ui-text-xs);
  }
}

@media (max-width: 480px) {
  .ui-page-item,
  .ui-page-ellipsis {
    min-width: 32px;
    height: 32px;
  }
}

/* Pagination Sizes */
.ui-pagination-sm .ui-page-item { min-width: 32px; height: 32px; font-size: var(--ui-text-xs); }
.ui-pagination-lg .ui-page-item { min-width: 48px; height: 48px; font-size: var(--ui-text-base); }

/* Pagination Colors */
.ui-pagination-secondary .ui-page-item.active { background: var(--ui-secondary); }
.ui-pagination-gray .ui-page-item.active { background: var(--ui-gray-600); }

/* Pagination Simple Template */
.ui-pagination-simple {
  gap: var(--ui-space-4);
}
.ui-pagination-simple .ui-page-prev,
.ui-pagination-simple .ui-page-next {
  min-width: auto;
  padding: 0 var(--ui-space-3);
}
.ui-pagination-simple .ui-pagination-info {
  font-size: var(--ui-text-sm);
  color: var(--ui-gray-600);
}

/* Pagination Compact Template */
.ui-pagination-compact {
  gap: var(--ui-space-2);
  background: var(--ui-gray-100);
  padding: var(--ui-space-1);
  border-radius: var(--ui-radius-md);
}
.ui-pagination-compact .ui-page-item {
  min-width: 32px;
  height: 32px;
}
.ui-pagination-compact .ui-pagination-info {
  padding: 0 var(--ui-space-2);
  font-size: var(--ui-text-sm);
  color: var(--ui-gray-600);
}

/* Pagination Load More Template */
.ui-pagination-load-more {
  justify-content: center;
}
.ui-pagination-load-more .ui-pagination-load-more:disabled {
  opacity: 0.5;
}

/* ============================================
   SKELETON LOADER COMPONENT
   ============================================ */

.ui-skeleton {
  background: linear-gradient(90deg, var(--ui-gray-200) 25%, var(--ui-gray-100) 50%, var(--ui-gray-200) 75%);
  background-size: 200% 100%;
  animation: ui-shimmer 1.5s infinite;
  border-radius: var(--ui-radius-sm);
}

@keyframes ui-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.ui-skeleton-text {
  height: 16px;
  margin-bottom: var(--ui-space-2);
}

.ui-skeleton-text:last-child {
  width: 60%;
}

.ui-skeleton-title {
  height: 24px;
  width: 40%;
  margin-bottom: var(--ui-space-4);
}

.ui-skeleton-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex-shrink: 0;
}

.ui-skeleton-image {
  width: 100%;
  height: 160px;
  border-radius: var(--ui-radius-md);
}

.ui-skeleton-button {
  height: 40px;
  width: 120px;
  border-radius: var(--ui-radius-md);
}

.ui-skeleton-card {
  background: var(--ui-white);
  border-radius: var(--ui-radius-lg);
  padding: var(--ui-space-5);
  box-shadow: var(--ui-shadow-md);
}

/* ============================================
   EMPTY STATE COMPONENT
   ============================================ */

.ui-empty-state {
  text-align: center;
  padding: var(--ui-space-12) var(--ui-space-6);
  background: var(--ui-white);
  border-radius: var(--ui-radius-lg);
  border: 2px dashed var(--ui-gray-200);
}

.ui-empty-state-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto var(--ui-space-5);
  background: var(--ui-gray-100);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
}

.ui-empty-state-title {
  font-family: var(--ui-font-heading);
  font-size: var(--ui-text-xl);
  font-weight: var(--ui-font-semibold);
  color: var(--ui-gray-800);
  margin: 0 0 var(--ui-space-2);
}

.ui-empty-state-desc {
  font-size: var(--ui-text-sm);
  color: var(--ui-gray-500);
  max-width: 300px;
  margin: 0 auto var(--ui-space-5);
  line-height: 1.6;
}

.ui-empty-state-action {
  margin-top: var(--ui-space-4);
}

/* ============================================
   TIMELINE COMPONENT
   ============================================ */

.ui-timeline {
  position: relative;
  padding-left: 32px;
}

.ui-timeline::before {
  content: '';
  position: absolute;
  left: 11px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--ui-gray-200);
}

.ui-timeline-item {
  position: relative;
  padding-bottom: var(--ui-space-8);
}

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

.ui-timeline-marker {
  position: absolute;
  left: -32px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--ui-white);
  border: 3px solid var(--ui-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
}

.ui-timeline-marker.completed {
  background: var(--ui-primary);
  color: var(--ui-white);
}

.ui-timeline-marker.secondary {
  border-color: var(--ui-secondary);
}

.ui-timeline-marker.secondary.completed {
  background: var(--ui-secondary);
}

.ui-timeline-content {
  background: var(--ui-white);
  border-radius: var(--ui-radius-md);
  padding: var(--ui-space-4);
  box-shadow: var(--ui-shadow-sm);
  border: var(--ui-border-width) solid var(--ui-gray-100);
}

.ui-timeline-title {
  font-family: var(--ui-font-heading);
  font-size: var(--ui-text-base);
  font-weight: var(--ui-font-semibold);
  color: var(--ui-gray-800);
  margin: 0 0 var(--ui-space-1);
}

.ui-timeline-time {
  font-size: var(--ui-text-xs);
  color: var(--ui-gray-400);
  margin-bottom: var(--ui-space-2);
}

.ui-timeline-desc {
  font-size: var(--ui-text-sm);
  color: var(--ui-gray-600);
  line-height: 1.6;
  margin: 0;
}

/* ============================================
   STEPPER / WIZARD COMPONENT
   ============================================ */

.ui-stepper {
  display: flex;
  justify-content: space-between;
  position: relative;
}

.ui-stepper::before {
  content: '';
  position: absolute;
  top: 20px;
  left: 40px;
  right: 40px;
  height: 2px;
  background: var(--ui-gray-200);
}

.ui-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 1;
}

.ui-step-indicator {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ui-white);
  border: var(--ui-border-width) solid var(--ui-gray-300);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ui-font-heading);
  font-weight: var(--ui-font-semibold);
  font-size: var(--ui-text-sm);
  color: var(--ui-gray-400);
  transition: all 0.2s ease;
}

.ui-step.active .ui-step-indicator {
  border-color: var(--ui-primary);
  color: var(--ui-primary);
}

.ui-step.completed .ui-step-indicator {
  background: var(--ui-primary);
  border-color: var(--ui-primary);
  color: var(--ui-white);
}

.ui-step-label {
  margin-top: var(--ui-space-3);
  font-size: var(--ui-text-sm);
  font-weight: var(--ui-font-medium);
  color: var(--ui-gray-400);
  text-align: center;
}

.ui-step.active .ui-step-label {
  color: var(--ui-primary);
}

.ui-step.completed .ui-step-label {
  color: var(--ui-gray-700);
}

/* Vertical Stepper */
.ui-stepper-vertical {
  flex-direction: column;
  gap: 0;
}

.ui-stepper-vertical::before {
  top: 20px;
  bottom: 20px;
  left: 19px;
  right: auto;
  width: 2px;
  height: auto;
}

.ui-stepper-vertical .ui-step {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--ui-space-4);
  padding-bottom: var(--ui-space-8);
}

.ui-stepper-vertical .ui-step:last-child {
  padding-bottom: 0;
}

.ui-stepper-vertical .ui-step-label {
  margin-top: 0;
  text-align: left;
}

.ui-stepper-vertical .ui-step-desc {
  font-size: var(--ui-text-sm);
  color: var(--ui-gray-500);
  margin-top: var(--ui-space-1);
}

/* Responsive stepper - force vertical on mobile */
@media (max-width: 640px) {
  .ui-stepper:not(.ui-stepper-vertical) {
    flex-direction: column;
    gap: 0;
  }

  .ui-stepper:not(.ui-stepper-vertical)::before {
    top: 20px;
    bottom: 20px;
    left: 19px;
    right: auto;
    width: 2px;
    height: auto;
  }

  .ui-stepper:not(.ui-stepper-vertical) .ui-step {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--ui-space-4);
    padding-bottom: var(--ui-space-6);
  }

  .ui-stepper:not(.ui-stepper-vertical) .ui-step:last-child {
    padding-bottom: 0;
  }

  .ui-stepper:not(.ui-stepper-vertical) .ui-step-label {
    margin-top: 0;
    text-align: left;
  }
}

/* Phase 10 Template Styles */

/* Skeleton Templates */
.ui-skeleton-text .ui-skeleton { height: 16px; margin-bottom: var(--ui-space-2); }
.ui-skeleton-text .ui-skeleton:last-child { width: 60%; }

.ui-skeleton-avatar { display: flex; gap: var(--ui-space-4); align-items: flex-start; }
.ui-skeleton-avatar .ui-skeleton-avatar-circle { width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0; }
.ui-skeleton-avatar.size-sm .ui-skeleton-avatar-circle { width: 32px; height: 32px; }
.ui-skeleton-avatar.size-lg .ui-skeleton-avatar-circle { width: 64px; height: 64px; }

.ui-skeleton-card { background: var(--ui-white); border-radius: var(--ui-radius-lg); padding: var(--ui-space-4); box-shadow: var(--ui-shadow-sm); border: var(--ui-border-width) solid var(--ui-gray-100); }
.ui-skeleton-card .ui-skeleton-card-image { height: 160px; margin: calc(-1 * var(--ui-space-4)); margin-bottom: var(--ui-space-4); border-radius: var(--ui-radius-lg) var(--ui-radius-lg) 0 0; }

.ui-skeleton-table { width: 100%; }
.ui-skeleton-table .ui-skeleton-row { display: flex; gap: var(--ui-space-3); margin-bottom: var(--ui-space-3); }
.ui-skeleton-table .ui-skeleton-row .ui-skeleton { flex: 1; height: 20px; }
.ui-skeleton-table .ui-skeleton-row:first-child .ui-skeleton { height: 24px; background: var(--ui-gray-300); }

.ui-skeleton-list .ui-skeleton-list-item { display: flex; gap: var(--ui-space-3); margin-bottom: var(--ui-space-3); align-items: center; }
.ui-skeleton-list .ui-skeleton-list-icon { width: 24px; height: 24px; border-radius: var(--ui-radius-sm); flex-shrink: 0; }
.ui-skeleton-list .ui-skeleton-list-text { flex: 1; height: 16px; }

/* EmptyState Templates */
.ui-empty-state-compact { padding: var(--ui-space-6) var(--ui-space-4); }
.ui-empty-state-compact .ui-empty-state-icon { width: 48px; height: 48px; font-size: 20px; margin-bottom: var(--ui-space-3); }
.ui-empty-state-compact .ui-empty-state-title { font-size: var(--ui-text-base); }

.ui-empty-state-illustrated { border: none; background: transparent; }
.ui-empty-state-illustrated .ui-empty-state-image { max-width: 200px; max-height: 160px; margin: 0 auto var(--ui-space-5); }
.ui-empty-state-illustrated .ui-empty-state-image img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* Timeline Templates */
.ui-timeline-compact { padding-left: 24px; }
.ui-timeline-compact::before { left: 7px; }
.ui-timeline-compact .ui-timeline-marker { width: 16px; height: 16px; left: -24px; font-size: 8px; border-width: 2px; }
.ui-timeline-compact .ui-timeline-content { padding: var(--ui-space-2) var(--ui-space-3); }
.ui-timeline-compact .ui-timeline-title { font-size: var(--ui-text-sm); }
.ui-timeline-compact .ui-timeline-item { padding-bottom: var(--ui-space-4); }

.ui-timeline-detailed .ui-timeline-marker { width: 32px; height: 32px; font-size: 14px; left: -40px; }
.ui-timeline-detailed { padding-left: 48px; }
.ui-timeline-detailed::before { left: 15px; }
.ui-timeline-detailed .ui-timeline-marker i { font-size: 14px; color: var(--ui-primary); }
.ui-timeline-detailed .ui-timeline-marker.completed i { color: var(--ui-white); }

.ui-timeline-alternating { padding-left: 50%; }
.ui-timeline-alternating::before { left: calc(50% - 1px); }
.ui-timeline-alternating .ui-timeline-marker { left: calc(-50% - 12px); }
.ui-timeline-alternating .ui-timeline-item:nth-child(even) { padding-left: calc(50% + 32px); padding-right: 0; margin-left: calc(-50%); }
.ui-timeline-alternating .ui-timeline-item:nth-child(even) .ui-timeline-marker { left: auto; right: calc(50% - 12px); }
.ui-timeline-alternating .ui-timeline-item:nth-child(odd) .ui-timeline-content { text-align: right; }

/* Stepper Templates */
.ui-stepper-compact .ui-step-indicator { width: 28px; height: 28px; font-size: var(--ui-text-xs); }
.ui-stepper-compact::before { top: 14px; }
.ui-stepper-compact .ui-step-label { font-size: var(--ui-text-xs); margin-top: var(--ui-space-2); }

.ui-stepper-dots .ui-step-indicator { width: 12px; height: 12px; background: var(--ui-gray-300); border: none; }
.ui-stepper-dots::before { top: 6px; }
.ui-stepper-dots .ui-step.active .ui-step-indicator { background: var(--ui-primary); transform: scale(1.3); }
.ui-stepper-dots .ui-step.completed .ui-step-indicator { background: var(--ui-primary); }
.ui-stepper-dots .ui-step-label-container { margin-top: var(--ui-space-3); }

/* ============================================
   TOOLTIP COMPONENT
   ============================================ */

.ui-tooltip-wrapper {
  position: relative;
  display: inline-block;
}

.ui-tooltip {
  position: absolute;
  z-index: var(--ui-z-tooltip);
  padding: var(--ui-space-2) var(--ui-space-3);
  font-size: var(--ui-text-xs);
  font-weight: var(--ui-font-medium);
  color: var(--ui-white);
  background: var(--ui-gray-900);
  border-radius: var(--ui-radius-md);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.ui-tooltip.visible {
  opacity: 1;
  transform: translateY(0);
}

.ui-tooltip::after {
  content: '';
  position: absolute;
  border: 5px solid transparent;
}

/* Tooltip positions */
.ui-tooltip-top {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  margin-bottom: var(--ui-space-2);
}

.ui-tooltip-top.visible {
  transform: translateX(-50%) translateY(0);
}

.ui-tooltip-top::after {
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-top-color: var(--ui-gray-900);
}

.ui-tooltip-bottom {
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  margin-top: var(--ui-space-2);
}

.ui-tooltip-bottom.visible {
  transform: translateX(-50%) translateY(0);
}

.ui-tooltip-bottom::after {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-bottom-color: var(--ui-gray-900);
}

.ui-tooltip-left {
  right: 100%;
  top: 50%;
  transform: translateY(-50%) translateX(-8px);
  margin-right: var(--ui-space-2);
}

.ui-tooltip-left.visible {
  transform: translateY(-50%) translateX(0);
}

.ui-tooltip-left::after {
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-left-color: var(--ui-gray-900);
}

.ui-tooltip-right {
  left: 100%;
  top: 50%;
  transform: translateY(-50%) translateX(8px);
  margin-left: var(--ui-space-2);
}

.ui-tooltip-right.visible {
  transform: translateY(-50%) translateX(0);
}

.ui-tooltip-right::after {
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-right-color: var(--ui-gray-900);
}

/* Tooltip template variations */
.ui-tooltip-rich {
  padding: var(--ui-space-3) var(--ui-space-4);
  text-align: left;
}

.ui-tooltip-rich .ui-tooltip-icon {
  margin-right: var(--ui-space-2);
  font-size: var(--ui-text-lg);
}

.ui-tooltip-rich .ui-tooltip-title {
  font-weight: var(--ui-font-semibold);
  margin-bottom: var(--ui-space-1);
}

.ui-tooltip-rich .ui-tooltip-text {
  font-size: var(--ui-text-sm);
  color: var(--ui-gray-300);
}

.ui-tooltip-light {
  background: var(--ui-white);
  color: var(--ui-gray-900);
  border: var(--ui-border-width) solid var(--ui-gray-200);
}

.ui-tooltip-light::after {
  border-color: transparent;
}

.ui-tooltip-light.ui-tooltip-top::after {
  border-top-color: var(--ui-white);
}

.ui-tooltip-light.ui-tooltip-bottom::after {
  border-bottom-color: var(--ui-white);
}

/* ============================================
   POPOVER COMPONENT
   ============================================ */

.ui-popover-wrapper {
  position: relative;
  display: inline-block;
}

.ui-popover {
  position: absolute;
  z-index: var(--ui-z-popover);
  min-width: 200px;
  max-width: 320px;
  background: var(--ui-white);
  border: var(--ui-border-width) solid var(--ui-gray-200);
  border-radius: var(--ui-radius-lg);
  box-shadow: var(--ui-shadow-lg);
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.15s ease, transform 0.15s ease;
  pointer-events: none;
}

.ui-popover.visible {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.ui-popover-header {
  padding: var(--ui-space-3) var(--ui-space-4);
  border-bottom: var(--ui-border-width) solid var(--ui-gray-100);
}

.ui-popover-title {
  font-family: var(--ui-font-heading);
  font-size: var(--ui-text-sm);
  font-weight: var(--ui-font-semibold);
  color: var(--ui-gray-900);
  margin: 0;
}

.ui-popover-body {
  padding: var(--ui-space-3) var(--ui-space-4);
  font-size: var(--ui-text-sm);
  color: var(--ui-gray-600);
  line-height: var(--ui-leading-relaxed);
}

.ui-popover-footer {
  padding: var(--ui-space-3) var(--ui-space-4);
  border-top: var(--ui-border-width) solid var(--ui-gray-100);
  display: flex;
  justify-content: flex-end;
  gap: var(--ui-space-2);
}

.ui-popover::before {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  background: var(--ui-white);
  border: var(--ui-border-width) solid var(--ui-gray-200);
  border-right: none;
  border-bottom: none;
}

/* Popover positions */
.ui-popover-top {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) scale(0.95);
  margin-bottom: var(--ui-space-3);
}

.ui-popover-top.visible {
  transform: translateX(-50%) scale(1);
}

.ui-popover-top::before {
  bottom: -7px;
  left: 50%;
  transform: translateX(-50%) rotate(-135deg);
}

.ui-popover-bottom {
  top: 100%;
  left: 50%;
  transform: translateX(-50%) scale(0.95);
  margin-top: var(--ui-space-3);
}

.ui-popover-bottom.visible {
  transform: translateX(-50%) scale(1);
}

.ui-popover-bottom::before {
  top: -7px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
}

/* Popover left/right positions */
.ui-popover-left {
  right: 100%;
  top: 50%;
  transform: translateY(-50%) scale(0.95);
  margin-right: var(--ui-space-3);
}

.ui-popover-left.visible {
  transform: translateY(-50%) scale(1);
}

.ui-popover-left::before {
  right: -7px;
  top: 50%;
  transform: translateY(-50%) rotate(135deg);
}

.ui-popover-right {
  left: 100%;
  top: 50%;
  transform: translateY(-50%) scale(0.95);
  margin-left: var(--ui-space-3);
}

.ui-popover-right.visible {
  transform: translateY(-50%) scale(1);
}

.ui-popover-right::before {
  left: -7px;
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
}

/* Popover menu template */
.ui-popover-menu {
  padding: var(--ui-space-2) 0;
}

.ui-popover-menu-item {
  display: flex;
  align-items: center;
  padding: var(--ui-space-2) var(--ui-space-4);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.ui-popover-menu-item:hover {
  background: var(--ui-gray-50);
}

.ui-popover-menu-icon {
  margin-right: var(--ui-space-3);
  color: var(--ui-gray-500);
  width: 16px;
  text-align: center;
}

.ui-popover-divider {
  height: 1px;
  background: var(--ui-gray-100);
  margin: var(--ui-space-2) 0;
}

/* Popover confirm template */
.ui-popover-confirm .ui-popover-body {
  padding: var(--ui-space-4);
}

.ui-popover-confirm .ui-popover-footer {
  padding: var(--ui-space-3) var(--ui-space-4);
}

/* ============================================
   DRAWER COMPONENT
   ============================================ */

.ui-drawer-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgb(0 0 0 / calc(var(--hp-shadow-intensity) * 5));
  z-index: var(--ui-z-modal);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--ui-transition-normal), visibility var(--ui-transition-normal);
}

.ui-drawer-backdrop.visible {
  opacity: 1;
  visibility: visible;
}

.ui-drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: calc(var(--ui-z-modal) + 1);
  background: var(--ui-white);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease;
}

.ui-drawer-left {
  left: 0;
  transform: translateX(-100%);
}

.ui-drawer-right {
  right: 0;
  transform: translateX(100%);
}

.ui-drawer.visible {
  transform: translateX(0);
}

/* Drawer sizes */
.ui-drawer-sm {
  width: 280px;
}

.ui-drawer-md {
  width: 400px;
}

.ui-drawer-lg {
  width: 560px;
}

.ui-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ui-space-4) var(--ui-space-5);
  border-bottom: var(--ui-border-width) solid var(--ui-gray-200);
}

.ui-drawer-title {
  font-family: var(--ui-font-heading);
  font-size: var(--ui-text-lg);
  font-weight: var(--ui-font-semibold);
  color: var(--ui-gray-900);
  margin: 0;
}

.ui-drawer-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--ui-radius-md);
  cursor: pointer;
  color: var(--ui-gray-500);
  font-size: var(--ui-text-lg);
  transition: background 0.15s ease, color 0.15s ease;
}

.ui-drawer-close:hover {
  background: var(--ui-gray-100);
  color: var(--ui-gray-700);
}

.ui-drawer-body {
  flex: 1;
  padding: var(--ui-space-5);
  overflow-y: auto;
}

.ui-drawer-footer {
  padding: var(--ui-space-4) var(--ui-space-5);
  border-top: var(--ui-border-width) solid var(--ui-gray-200);
  display: flex;
  justify-content: flex-end;
  gap: var(--ui-space-3);
}

/* Drawer template variations */
.ui-drawer-mini .ui-drawer-header {
  padding: var(--ui-space-3) var(--ui-space-4);
}

.ui-drawer-mini .ui-drawer-body {
  padding: var(--ui-space-4);
}

.ui-drawer-full {
  width: 100% !important;
  max-width: 100% !important;
}

.ui-drawer-panel {
  box-shadow: var(--ui-shadow-sm);
}

/* Drawer top/bottom positions */
.ui-drawer-top {
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: auto;
  max-height: 80vh;
  transform: translateY(-100%);
}

.ui-drawer-top.visible {
  transform: translateY(0);
}

.ui-drawer-bottom {
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: auto;
  max-height: 80vh;
  transform: translateY(100%);
}

.ui-drawer-bottom.visible {
  transform: translateY(0);
}

/* Drawer XL and full sizes */
.ui-drawer-xl {
  width: 600px;
}

.ui-drawer-backdrop-hidden {
  background: transparent;
  pointer-events: none;
}

/* ============================================
   AVATAR COMPONENT
   ============================================ */

.ui-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ui-radius-full);
  background: var(--ui-primary-light);
  color: var(--ui-primary);
  font-weight: var(--ui-font-semibold);
  overflow: hidden;
  flex-shrink: 0;
}

.ui-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Avatar sizes */
.ui-avatar-xs {
  width: 24px;
  height: 24px;
  font-size: var(--ui-text-xs);
}

.ui-avatar-sm {
  width: 32px;
  height: 32px;
  font-size: var(--ui-text-sm);
}

.ui-avatar-md {
  width: 40px;
  height: 40px;
  font-size: var(--ui-text-base);
}

.ui-avatar-lg {
  width: 48px;
  height: 48px;
  font-size: var(--ui-text-lg);
}

.ui-avatar-xl {
  width: 64px;
  height: 64px;
  font-size: var(--ui-text-xl);
}

/* Avatar variants */
.ui-avatar[data-color] { background: var(--_c-light); color: var(--_c); }

/* Avatar Group */
.ui-avatar-group {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
}

.ui-avatar-group .ui-avatar {
  border: 2px solid var(--ui-white);
  margin-left: -8px;
}

.ui-avatar-group .ui-avatar:last-child {
  margin-left: 0;
}

.ui-avatar-group-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ui-radius-full);
  background: var(--ui-gray-200);
  color: var(--ui-gray-600);
  font-weight: var(--ui-font-semibold);
  font-size: var(--ui-text-xs);
  border: 2px solid var(--ui-white);
  margin-left: -8px;
}

/* Avatar template variations */
.ui-avatar-square {
  border-radius: var(--ui-radius-md);
}

.ui-avatar-rounded {
  border-radius: var(--ui-radius-lg);
}

/* Avatar group template variations */
.ui-avatar-group-grid {
  display: grid;
  gap: var(--ui-space-2);
  flex-direction: row;
}

.ui-avatar-group-grid .ui-avatar {
  margin-left: 0;
}

.ui-avatar-group-stacked .ui-avatar {
  margin-left: -12px;
  box-shadow: 0 0 0 2px var(--ui-white);
}

/* ============================================
   TREE VIEW COMPONENT
   ============================================ */

.ui-tree {
  font-size: var(--ui-text-sm);
  color: var(--ui-gray-700);
}

.ui-tree-item {
  user-select: none;
}

.ui-tree-node {
  display: flex;
  align-items: center;
  padding: var(--ui-space-1) var(--ui-space-2);
  border-radius: var(--ui-radius-md);
  cursor: pointer;
  gap: var(--ui-space-2);
  transition: background 0.15s ease;
  position: relative;
}

.ui-tree-node:hover {
  background: var(--ui-gray-100);
}

.ui-tree-node.selected {
  background: var(--ui-primary-light);
  color: var(--ui-primary);
}

.ui-tree-toggle {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--ui-gray-400);
  transition: transform 0.15s ease;
  flex-shrink: 0;
}

.ui-tree-toggle.expanded {
  transform: rotate(90deg);
}

.ui-tree-toggle.empty {
  visibility: hidden;
}

.ui-tree-icon {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ui-tree-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-tree-children {
  padding-left: var(--ui-space-5);
  display: none;
}

.ui-tree-children.expanded {
  display: block;
}

/* Tree template variations */
.ui-tree-compact .ui-tree-node {
  padding: var(--ui-space-1) var(--ui-space-1);
  font-size: var(--ui-text-xs);
}

.ui-tree-compact .ui-tree-children {
  padding-left: var(--ui-space-3);
}

.ui-tree-files .ui-tree-icon {
  font-size: var(--ui-text-base);
}

.ui-tree-checkboxes .ui-tree-checkbox {
  width: 16px;
  height: 16px;
  margin-right: var(--ui-space-1);
}

/* Tree header (search + add) */
.ui-tree-header {
  display: flex;
  align-items: center;
  gap: var(--ui-space-2);
  padding: var(--ui-space-3);
  border-bottom: var(--ui-border-width) solid var(--ui-gray-200);
  background: var(--ui-gray-50);
}

.ui-tree-search-input {
  flex: 1;
  min-width: 0;
  font-size: var(--ui-text-sm);
  box-sizing: border-box;
}

/* Tree node container */
.ui-tree-nodes {
  overflow-y: auto;
  padding: var(--ui-space-1);
}

/* Tree empty state */
.ui-tree-empty {
  text-align: center;
  color: var(--ui-gray-400);
  padding: var(--ui-space-6) var(--ui-space-4);
  font-size: var(--ui-text-sm);
}

/* Tree node edit actions (hover reveal — absolute overlay) */
.ui-tree-node-actions {
  position: absolute;
  right: var(--ui-space-1);
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: var(--ui-space-1);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ui-transition);
  padding: 0 var(--ui-space-1) 0 var(--ui-space-3);
}

.ui-tree-node:hover > .ui-tree-node-actions {
  opacity: 1;
  pointer-events: auto;
  background: linear-gradient(90deg, transparent, var(--ui-gray-100) 12px);
}

.ui-tree-node.selected:hover > .ui-tree-node-actions {
  background: linear-gradient(90deg, transparent, var(--ui-primary-light) 12px);
}

.ui-tree-node-actions .ui-btn {
  padding: var(--ui-space-1);
  min-width: auto;
  border-radius: var(--ui-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ui-tree-node-actions .ui-btn svg {
  width: 16px;
  height: 16px;
}

/* Tree drag-and-drop feedback */
.ui-tree-node[draggable="true"] { cursor: grab; }
.ui-tree-node-dragging { opacity: 0.4; cursor: grabbing; }
.ui-tree-node-drop-into { background: var(--ui-primary-light); outline: 2px dashed var(--ui-primary); border-radius: var(--ui-radius-md); }
.ui-tree-drop-indicator { position: absolute; height: 2px; background: var(--ui-primary); border-radius: 1px; pointer-events: none; z-index: 10; }
.ui-tree-drop-indicator::before { content: ''; position: absolute; left: -3px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--ui-primary); }
.ui-tree-children-drop { background: var(--ui-primary-light); border-radius: var(--ui-radius-md); }

/* ============================================
   BINDING DETAIL LAYOUT (bindCard / specimen detail)
   ============================================ */

.ui-detail-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--ui-space-2);
  align-items: start;
}

.ui-detail-col {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-2);
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

.ui-detail-header {
  display: flex;
  align-items: center;
  gap: var(--ui-space-2);
  margin: var(--ui-space-1) 0;
  flex-wrap: wrap;
}

.ui-detail-title {
  font-size: var(--ui-text-base);
  font-weight: var(--ui-font-bold);
  color: var(--ui-primary);
}

.ui-detail-badge {
  font-size: var(--ui-text-xs);
  padding: 0.15rem 0.45rem;
  border-radius: 10px;
  font-weight: var(--ui-font-semibold);
  display: inline-block;
}

.ui-detail-qr-row {
  display: flex;
  gap: var(--ui-space-3);
  align-items: flex-start;
}

.ui-detail-qr-row .ui-binding-qr {
  flex-shrink: 0;
}

.ui-detail-qr-row .ui-detail-kv-list {
  flex: 1;
  min-width: 0;
}

.ui-detail-kv {
  display: flex;
  justify-content: space-between;
  padding: 0.15rem 0;
  border-bottom: var(--ui-border-width) solid var(--ui-gray-100);
  font-size: var(--ui-text-xs);
}

.ui-detail-kv-label {
  color: var(--ui-gray-400);
}

.ui-detail-kv-value {
  font-weight: var(--ui-font-medium);
  color: var(--ui-gray-800);
  overflow-wrap: break-word;
  word-break: break-word;
  min-width: 0;
  text-align: right;
}

.ui-detail-notes {
  font-size: var(--ui-text-xs);
  color: var(--ui-gray-500);
  margin-top: var(--ui-space-1);
  padding: var(--ui-space-1);
  background: var(--ui-gray-50);
  border-radius: var(--ui-radius-sm);
}

.ui-detail-empty {
  font-size: var(--ui-text-xs);
  color: var(--ui-gray-400);
  text-align: center;
  padding: var(--ui-space-3);
}

/* ============================================
   LIST SELECTOR COMPONENT
   ============================================ */

.ui-list-selector {
  border: var(--ui-border-width) solid var(--ui-gray-200);
  border-radius: var(--ui-radius-lg);
  overflow: hidden;
}

.ui-list-item {
  display: flex;
  align-items: center;
  padding: var(--ui-space-3) var(--ui-space-4);
  gap: var(--ui-space-3);
  cursor: pointer;
  transition: background 0.15s ease;
  border-bottom: var(--ui-border-width) solid var(--ui-gray-100);
  position: relative;
}

.ui-list-item:last-child {
  border-bottom: none;
}

.ui-list-item:hover {
  background: var(--ui-gray-50);
}

.ui-list-item.selected {
  background: var(--ui-primary-light);
}

.ui-list-item-checkbox {
  width: 18px;
  height: 18px;
  border: var(--ui-border-width) solid var(--ui-gray-300);
  border-radius: var(--ui-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.ui-list-item.selected .ui-list-item-checkbox {
  background: var(--ui-primary);
  border-color: var(--ui-primary);
  color: var(--ui-white);
}

.ui-list-item-avatar {
  flex-shrink: 0;
}

.ui-list-item-content {
  flex: 1;
  min-width: 0;
}

.ui-list-item-title {
  font-weight: var(--ui-font-medium);
  color: var(--ui-gray-900);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-list-item-subtitle {
  font-size: var(--ui-text-sm);
  color: var(--ui-gray-500);
  margin-top: var(--ui-space-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-list-item-action {
  flex-shrink: 0;
}

.ui-list-item-badge {
  flex-shrink: 0;
  margin-left: auto;
  padding-left: var(--ui-space-2);
}

/* List selector template variations */
.ui-list-selector-compact .ui-list-item {
  padding: var(--ui-space-2) var(--ui-space-3);
}

.ui-list-selector-compact .ui-list-item-title {
  font-size: var(--ui-text-sm);
}

.ui-list-selector-detailed .ui-list-item {
  padding: var(--ui-space-4);
}

.ui-list-selector-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--ui-space-3);
  border: none;
}

.ui-list-selector-cards .ui-list-item {
  border: var(--ui-border-width) solid var(--ui-gray-200);
  border-radius: var(--ui-radius-lg);
  flex-direction: column;
  text-align: center;
  padding: var(--ui-space-4);
}

.ui-list-selector-cards .ui-list-item.selected {
  border-color: var(--ui-primary);
  box-shadow: 0 0 0 2px var(--ui-primary-light);
}

.ui-list-selector-cards .ui-list-item-card {
  flex-direction: column;
  align-items: center;
}

/* List selector header (search + add button) */
.ui-list-header {
  display: flex;
  align-items: center;
  gap: var(--ui-space-2);
  padding: var(--ui-space-3);
  border-bottom: var(--ui-border-width) solid var(--ui-gray-200);
  background: var(--ui-gray-50);
}

.ui-list-search-input {
  flex: 1;
  min-width: 0;
  font-size: var(--ui-text-sm);
  box-sizing: border-box;
}

/* Legacy search box support */
.ui-list-search {
  padding: var(--ui-space-3);
  border-bottom: var(--ui-border-width) solid var(--ui-gray-200);
  background: var(--ui-gray-50);
}

.ui-list-search .ui-input {
  width: 100%;
  font-size: var(--ui-text-sm);
  box-sizing: border-box;
}

/* List selector items container */
.ui-list-items {
  max-height: 400px;
  overflow-y: auto;
}

/* List selector pagination wrapper */
.ui-list-pagination-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--ui-space-2) var(--ui-space-3);
  border-top: var(--ui-border-width) solid var(--ui-gray-200);
  background: var(--ui-gray-50);
  font-size: var(--ui-text-sm);
}

.ui-list-pagination-wrapper .ui-list-pagination-info {
  color: var(--ui-gray-600);
}

.ui-list-pagination-wrapper .ui-pagination {
  margin-left: auto;
}

/* Legacy pagination (deprecated) */
.ui-list-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--ui-space-2) var(--ui-space-3);
  border-top: var(--ui-border-width) solid var(--ui-gray-200);
  background: var(--ui-gray-50);
  font-size: var(--ui-text-sm);
}

.ui-list-pagination-info {
  color: var(--ui-gray-600);
}

.ui-list-pagination-btns {
  display: flex;
  align-items: center;
  gap: var(--ui-space-2);
}

.ui-list-pagination-page {
  color: var(--ui-gray-600);
  min-width: 60px;
  text-align: center;
}

/* List selector edit actions (hover reveal — absolute overlay) */
.ui-list-item-edit-actions {
  position: absolute;
  right: var(--ui-space-2);
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: var(--ui-space-1);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ui-transition);
  padding: 0 var(--ui-space-2) 0 var(--ui-space-3);
}

.ui-list-item:hover .ui-list-item-edit-actions {
  opacity: 1;
  pointer-events: auto;
  background: linear-gradient(90deg, transparent, var(--ui-white, #fff) 12px);
}

.ui-list-item.selected:hover .ui-list-item-edit-actions {
  background: linear-gradient(90deg, transparent, var(--ui-primary-light) 12px);
}

.ui-list-item-edit-actions .ui-btn {
  padding: var(--ui-space-1);
  min-width: auto;
  border-radius: var(--ui-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ui-list-item-edit-actions .ui-btn svg {
  width: 16px;
  height: 16px;
}

/* Ghost button variant */
.ui-btn-ghost {
  background: transparent;
  border: none;
  color: var(--ui-gray-500);
}

.ui-btn-ghost:hover {
  background: var(--ui-gray-100);
  color: var(--ui-gray-700);
}

.ui-btn-danger-ghost {
  color: var(--ui-gray-500);
}

.ui-btn-danger-ghost:hover {
  background: var(--ui-danger-light);
  color: var(--ui-danger);
}

/* List selector empty state */
.ui-list-empty {
  padding: var(--ui-space-6);
  text-align: center;
  color: var(--ui-gray-500);
  font-style: italic;
}

/* ========================================
   PHASE 6: ADVANCED FORM ELEMENTS
   ======================================== */

/* File Input */
.ui-file-input {
  border: 2px dashed var(--ui-gray-300);
  border-radius: var(--ui-radius-lg);
  padding: var(--ui-space-6);
  text-align: center;
  cursor: pointer;
  transition: all var(--ui-transition);
  background: var(--ui-white);
}

.ui-file-input:hover {
  border-color: var(--ui-primary);
  background: var(--ui-primary-light);
}

.ui-file-input.dragover {
  border-color: var(--ui-primary);
  background: var(--ui-primary-light);
  border-style: solid;
}

.ui-file-input-icon {
  font-size: var(--ui-text-3xl);
  margin-bottom: var(--ui-space-2);
  color: var(--ui-gray-400);
}

.ui-file-input-text {
  font-size: var(--ui-text-sm);
  color: var(--ui-gray-600);
  margin-bottom: var(--ui-space-1);
}

.ui-file-input-hint {
  font-size: var(--ui-text-xs);
  color: var(--ui-gray-400);
}

.ui-file-input input[type="file"] {
  display: none;
}

.ui-file-input-files {
  margin-top: var(--ui-space-3);
  text-align: left;
}

.ui-file-input-file {
  display: flex;
  align-items: center;
  gap: var(--ui-space-2);
  padding: var(--ui-space-2);
  background: var(--ui-gray-100);
  border-radius: var(--ui-radius-md);
  font-size: var(--ui-text-sm);
  margin-bottom: var(--ui-space-2);
}

.ui-file-input-file:last-child {
  margin-bottom: 0;
}

.ui-file-input-file-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-file-input-file-size {
  color: var(--ui-gray-500);
  font-size: var(--ui-text-xs);
}

.ui-file-input-file-remove {
  cursor: pointer;
  color: var(--ui-gray-400);
  padding: var(--ui-space-1);
  border-radius: var(--ui-radius-sm);
}

.ui-file-input-file-remove:hover {
  color: var(--ui-danger);
  background: var(--ui-danger-light);
}

/* Color Picker */
.ui-color-picker {
  display: flex;
  align-items: center;
  gap: var(--ui-space-2);
}

.ui-color-picker-swatch {
  width: 40px;
  height: 40px;
  border-radius: var(--ui-radius-md);
  border: var(--ui-border-width) solid var(--ui-gray-200);
  cursor: pointer;
  overflow: hidden;
  position: relative;
}

.ui-color-picker-swatch input[type="color"] {
  position: absolute;
  top: -10px;
  left: -10px;
  width: calc(100% + 20px);
  height: calc(100% + 20px);
  border: none;
  cursor: pointer;
}

.ui-color-picker-value {
  font-family: var(--ui-font-mono);
  font-size: var(--ui-text-sm);
  color: var(--ui-gray-700);
  padding: var(--ui-space-2) var(--ui-space-3);
  background: var(--ui-gray-100);
  border-radius: var(--ui-radius-md);
  min-width: 80px;
  text-align: center;
}

/* Date Picker */
.ui-date-picker {
  position: relative;
}

.ui-date-picker input[type="date"] {
  width: 100%;
  padding: var(--ui-space-2) var(--ui-space-3);
  border: var(--ui-border-width) solid var(--ui-gray-300);
  border-radius: var(--ui-radius-md);
  font-family: var(--ui-font-body);
  font-size: var(--ui-text-base);
  color: var(--ui-gray-900);
  background: var(--ui-white);
  transition: border-color var(--ui-transition), box-shadow var(--ui-transition);
}

/* focus styles in consolidated rule above */

.ui-date-picker input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.6;
}

.ui-date-picker input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

/* Number Stepper */
.ui-number-stepper {
  display: inline-flex;
  align-items: stretch;
  border: var(--ui-border-width) solid var(--ui-gray-300);
  border-radius: var(--ui-radius-md);
  overflow: hidden;
}

.ui-number-stepper-btn {
  width: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ui-gray-100);
  border: none;
  cursor: pointer;
  font-size: var(--ui-text-lg);
  color: var(--ui-gray-600);
  transition: background var(--ui-transition);
}

.ui-number-stepper-btn:hover {
  background: var(--ui-gray-200);
}

.ui-number-stepper-btn:active {
  background: var(--ui-gray-300);
}

.ui-number-stepper-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ui-number-stepper-input {
  width: 60px;
  text-align: center;
  border: none;
  border-left: 1px solid var(--ui-gray-300);
  border-right: var(--ui-border-width) solid var(--ui-gray-300);
  font-family: var(--ui-font-body);
  font-size: var(--ui-text-base);
  color: var(--ui-gray-900);
  -moz-appearance: textfield;
}

.ui-number-stepper-input::-webkit-outer-spin-button,
.ui-number-stepper-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.ui-number-stepper-input:focus {
  outline: none;
}

/* Tags Input */
.ui-tags-input {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-space-2);
  padding: var(--ui-space-2);
  border: var(--ui-border-width) solid var(--ui-gray-300);
  border-radius: var(--ui-radius-md);
  background: var(--ui-white);
  min-height: 42px;
  cursor: text;
}

.ui-tags-input:focus-within {
  border-color: var(--ui-primary);
  box-shadow: 0 0 0 3px var(--ui-primary-light);
}

.ui-tags-input-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-1);
  padding: var(--ui-space-1) var(--ui-space-2);
  background: var(--ui-primary-light);
  color: var(--ui-primary);
  border-radius: var(--ui-radius-full);
  font-size: var(--ui-text-sm);
}

.ui-tags-input-tag-remove {
  cursor: pointer;
  opacity: 0.7;
  font-size: var(--ui-text-xs);
}

.ui-tags-input-tag-remove:hover {
  opacity: 1;
}

.ui-tags-input-field {
  flex: 1;
  min-width: 100px;
  border: none;
  outline: none;
  font-family: var(--ui-font-body);
  font-size: var(--ui-text-base);
  padding: var(--ui-space-1);
}

/* Search Input */
.ui-search-input {
  position: relative;
  display: flex;
  align-items: center;
}

.ui-search-input-icon {
  position: absolute;
  left: var(--ui-space-3);
  color: var(--ui-gray-400);
  pointer-events: none;
}

.ui-search-input input {
  width: 100%;
  padding: var(--ui-space-2) var(--ui-space-10);
  border: var(--ui-border-width) solid var(--ui-gray-300);
  border-radius: var(--ui-radius-full);
  font-family: var(--ui-font-body);
  font-size: var(--ui-text-base);
  color: var(--ui-gray-900);
  background: var(--ui-white);
  transition: border-color var(--ui-transition), box-shadow var(--ui-transition);
}

/* focus styles in consolidated rule above */

.ui-search-input input::placeholder {
  color: var(--ui-gray-400);
}

.ui-search-input-clear {
  position: absolute;
  right: var(--ui-space-3);
  color: var(--ui-gray-400);
  cursor: pointer;
  padding: var(--ui-space-1);
  border-radius: var(--ui-radius-full);
  display: none;
}

.ui-search-input-clear:hover {
  color: var(--ui-gray-600);
  background: var(--ui-gray-100);
}

.ui-search-input.has-value .ui-search-input-clear {
  display: block;
}

/* Rating */
.ui-rating {
  display: inline-flex;
  gap: var(--ui-space-1);
  align-items: center;
}

/* Stars and Hearts (shared styles) */
.ui-rating-item {
  font-size: var(--ui-text-xl);
  color: var(--ui-gray-300);
  cursor: pointer;
  transition: color var(--ui-transition), transform var(--ui-transition);
}
.ui-rating-star, .ui-rating-heart {
  font-size: var(--ui-text-xl);
  color: var(--ui-gray-300);
  cursor: pointer;
  transition: color var(--ui-transition), transform var(--ui-transition);
}

.ui-rating-item:hover, .ui-rating-star:hover, .ui-rating-heart:hover {
  transform: scale(1.1);
}

.ui-rating-item.filled, .ui-rating-star.filled {
  color: var(--ui-warning);
}
.ui-rating-heart.filled {
  color: var(--ui-danger);
}

/* Half-filled stars */
.ui-rating-item.half-filled {
  position: relative;
  color: var(--ui-gray-300);
}
.ui-rating-item.half-filled::before {
  content: '★';
  position: absolute;
  left: 0;
  width: 50%;
  overflow: hidden;
  color: var(--ui-warning);
}

.ui-rating.readonly .ui-rating-item,
.ui-rating.readonly .ui-rating-star,
.ui-rating.readonly .ui-rating-heart {
  cursor: default;
}

.ui-rating.readonly .ui-rating-item:hover,
.ui-rating.readonly .ui-rating-star:hover,
.ui-rating.readonly .ui-rating-heart:hover {
  transform: none;
}

/* Rating sizes */
.ui-rating-sm .ui-rating-item, .ui-rating-sm .ui-rating-star, .ui-rating-sm .ui-rating-heart { font-size: var(--ui-text-base); }
.ui-rating-lg .ui-rating-item, .ui-rating-lg .ui-rating-star, .ui-rating-lg .ui-rating-heart { font-size: var(--ui-text-2xl); }
.ui-rating-xl .ui-rating-item, .ui-rating-xl .ui-rating-star, .ui-rating-xl .ui-rating-heart { font-size: var(--ui-text-3xl); }

/* Color variants */
.ui-rating[data-color] .ui-rating-item.filled,
.ui-rating[data-color] .ui-rating-heart.filled { color: var(--_c); }

/* Thumbs rating */
.ui-rating-template-thumbs {
  gap: var(--ui-space-3);
}
.ui-rating-thumb {
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-1);
  padding: var(--ui-space-2) var(--ui-space-3);
  background: var(--ui-gray-100);
  border: var(--ui-border-width) solid var(--ui-gray-300);
  border-radius: var(--ui-radius-md);
  cursor: pointer;
  font-size: var(--ui-text-lg);
  transition: all var(--ui-transition);
}
.ui-rating-thumb:hover {
  background: var(--ui-gray-200);
}
.ui-rating-thumb.active {
  border-color: var(--ui-primary);
  background: var(--ui-primary-light);
}
.ui-rating-thumb-up.active {
  border-color: var(--ui-success);
  background: var(--ui-success-light);
}
.ui-rating-thumb-down.active {
  border-color: var(--ui-danger);
  background: var(--ui-danger-light);
}
.ui-rating-count {
  font-size: var(--ui-text-sm);
  color: var(--ui-gray-600);
}
.ui-rating.readonly .ui-rating-thumb {
  cursor: default;
}
.ui-rating.readonly .ui-rating-thumb:hover {
  background: var(--ui-gray-100);
}

/* Numeric rating */
.ui-rating-template-numeric {
  gap: var(--ui-space-1);
}
.ui-rating-num {
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ui-gray-100);
  border: var(--ui-border-width) solid var(--ui-gray-300);
  border-radius: var(--ui-radius-sm);
  cursor: pointer;
  font-size: var(--ui-text-sm);
  font-weight: 500;
  color: var(--ui-gray-600);
  transition: all var(--ui-transition);
}
.ui-rating-num:hover {
  background: var(--ui-gray-200);
  border-color: var(--ui-gray-400);
}
.ui-rating-num.filled {
  background: var(--ui-primary);
  border-color: var(--ui-primary);
  color: white;
}
.ui-rating.readonly .ui-rating-num {
  cursor: default;
}
.ui-rating.readonly .ui-rating-num:hover {
  background: var(--ui-gray-100);
  border-color: var(--ui-gray-300);
}
.ui-rating-sm .ui-rating-num { width: 1.5rem; height: 1.5rem; font-size: var(--ui-text-xs); }
.ui-rating-lg .ui-rating-num { width: 2.5rem; height: 2.5rem; font-size: var(--ui-text-base); }

/* ========================================
   PHASE 7: LAYOUT COMPONENTS
   ======================================== */

/* Divider */
.ui-divider {
  display: flex;
  align-items: center;
  width: 100%;
  margin: var(--ui-space-4) 0;
}

.ui-divider-line {
  flex: 1;
  height: 1px;
  background: var(--ui-gray-200);
}

.ui-divider-accent .ui-divider-line {
  background: var(--ui-primary);
  height: 2px;
}

.ui-divider-dashed .ui-divider-line {
  background: transparent;
  border-top: 1px dashed var(--ui-gray-300);
}

.ui-divider-text {
  padding: 0 var(--ui-space-3);
  color: var(--ui-gray-500);
  font-size: var(--ui-text-sm);
  white-space: nowrap;
}

.ui-divider-vertical {
  flex-direction: column;
  width: auto;
  height: 100%;
  margin: 0 var(--ui-space-4);
}

.ui-divider-vertical .ui-divider-line {
  width: 1px;
  height: 100%;
  min-height: 20px;
}

.ui-divider-vertical .ui-divider-text {
  padding: var(--ui-space-2) 0;
}

/* Control-Stage Layout */
.ui-control-stage {
  display: flex;
  align-items: stretch;
  gap: 0;
  min-height: 400px;
  border-radius: var(--ui-radius-lg);
  overflow: hidden;
}

.ui-control-stage-control {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--ui-white);
  border: none;
  border-right: 1px solid var(--ui-gray-200);
  border-radius: 0;
  padding: var(--ui-space-3);
  overflow-y: auto;
}

.ui-control-stage-control-sm { width: 200px; }
.ui-control-stage-control-md { width: 280px; }
.ui-control-stage-control-lg { width: 360px; }

.ui-control-stage-stage {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--ui-gray-50);
  border: none;
  border-radius: 0;
  padding: var(--ui-space-3);
  overflow: auto;
}

.ui-control-stage-control-content,
.ui-control-stage-stage-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.ui-control-stage-header {
  font-family: var(--ui-font-heading);
  font-size: 11px;
  font-weight: 600;
  color: var(--ui-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: var(--ui-space-2);
  padding: var(--ui-space-2) var(--ui-space-1) var(--ui-space-1);
  border-bottom: none;
}

.ui-control-stage-reversed {
  flex-direction: row-reverse;
}
.ui-control-stage-reversed > .ui-control-stage-control {
  border-right: none;
  border-left: 1px solid var(--ui-gray-200);
}

.ui-control-stage-stacked {
  flex-direction: column;
}
.ui-control-stage-stacked .ui-control-stage-control {
  width: 100%;
  border-right: none;
  border-bottom: 1px solid var(--ui-gray-200);
}

/* ── Base list refinements inside control-stage ── */
.ui-control-stage .ui-list-selector {
  border: none;
  background: transparent;
}
.ui-control-stage .ui-list-items {
  border: none;
}
.ui-control-stage .ui-list-header {
  border-bottom: none;
  background: transparent;
  padding: var(--ui-space-1) 0;
  margin-bottom: var(--ui-space-1);
}
.ui-control-stage .ui-list-item {
  border-left: none;
  border-right: none;
  border-radius: var(--ui-radius-md);
  margin: 1px 0;
  transition: background 0.1s;
}
.ui-control-stage .ui-list-item:last-child {
  border-bottom: none;
}

/* Grid */
.ui-grid {
  display: grid;
  gap: var(--ui-space-4);
}

.ui-grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.ui-grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.ui-grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.ui-grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.ui-grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
.ui-grid-cols-6 { grid-template-columns: repeat(6, 1fr); }

.ui-grid-gap-sm { gap: var(--ui-space-2); }
.ui-grid-gap-md { gap: var(--ui-space-4); }
.ui-grid-gap-lg { gap: var(--ui-space-6); }
.ui-grid-gap-xl { gap: var(--ui-space-8); }

/* Responsive grid */
@media (max-width: 768px) {
  .ui-grid-responsive.ui-grid-cols-3,
  .ui-grid-responsive.ui-grid-cols-4,
  .ui-grid-responsive.ui-grid-cols-5,
  .ui-grid-responsive.ui-grid-cols-6 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .ui-grid-responsive.ui-grid-cols-2,
  .ui-grid-responsive.ui-grid-cols-3,
  .ui-grid-responsive.ui-grid-cols-4,
  .ui-grid-responsive.ui-grid-cols-5,
  .ui-grid-responsive.ui-grid-cols-6 {
    grid-template-columns: 1fr;
  }

  .ui-control-stage {
    flex-direction: column;
  }

  .ui-control-stage-control {
    width: 100% !important;
    border-right: none;
    border-bottom: 1px solid var(--ui-gray-200);
  }
}

/* Phase 11 Template Styles */

/* Accordion Templates */
.ui-accordion-bordered .ui-accordion-item {
  border: var(--ui-border-width) solid var(--ui-gray-200);
  border-radius: var(--ui-radius-md);
  margin-bottom: var(--ui-space-2);
}

.ui-accordion-bordered .ui-accordion-trigger {
  padding: var(--ui-space-4);
}

.ui-accordion-bordered .ui-accordion-content {
  border-top: var(--ui-border-width) solid var(--ui-gray-200);
}

/* Divider Templates */
.ui-divider-dotted .ui-divider-line {
  border-style: dotted;
  border-width: 2px;
}

/* ControlStage Templates */
.ui-control-stage-minimal {
  box-shadow: none;
  border-radius: 0;
}
.ui-control-stage-minimal .ui-control-stage-control {
  background: transparent;
  border: none;
}
.ui-control-stage-minimal .ui-control-stage-stage {
  background: transparent;
}

/* ── Nested control-stage (inside any parent) — seamless, no extra chrome ── */
.ui-control-stage .ui-control-stage {
  box-shadow: none;
  border-radius: 0;
  min-height: 0;
  flex: 1;
}
.ui-control-stage .ui-control-stage > .ui-control-stage-control {
  border-right: 1px solid var(--ui-gray-200);
}

/* ══════════════════════════════════════════════════════════════════
   Unified Control Stage — Apple System Settings aesthetic
   Usage: new uiControlStage({ template: 'unified', controlSize: 'lg' })
   ══════════════════════════════════════════════════════════════════ */
.ui-control-stage-unified {
  border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.18), 0 3px 6px rgba(0,0,0,0.1);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Wider control sizes for unified (direct child only — don't cascade into nested stages) */
.ui-control-stage-unified > .ui-control-stage-control-sm { width: 240px; }
.ui-control-stage-unified > .ui-control-stage-control-md { width: 300px; }
.ui-control-stage-unified > .ui-control-stage-control-lg { width: 380px; }

/* Sidebar — warm Apple gray (direct child only) */
.ui-control-stage-unified > .ui-control-stage-control {
  background: #dcd9d5;
  border-right-color: rgba(0,0,0,0.1);
  padding: 0;
}

/* Stage — clean white (direct child only) */
.ui-control-stage-unified > .ui-control-stage-stage {
  background: #ffffff;
  padding: 0;
}

/* Header — muted uppercase label */
.ui-control-stage-unified .ui-control-stage-header {
  font-size: 11px;
  font-weight: 600;
  color: #86868b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 12px 14px 4px;
  margin-bottom: 0;
  border-bottom: none;
}

/* ── Accordion ── */
.ui-control-stage-unified .ui-accordion {
  border: none;
  border-radius: 0;
  background: transparent;
}
.ui-control-stage-unified .ui-accordion-item {
  border-bottom: none;
}
.ui-control-stage-unified .ui-accordion-trigger {
  background: transparent;
  padding: 5px 10px;
  font-size: 13px;
  font-weight: 600;
  color: #1d1d1f;
  border-radius: 6px;
  margin: 1px 6px;
}
.ui-control-stage-unified .ui-accordion-trigger:hover {
  background: rgba(0,0,0,0.06);
}
.ui-control-stage-unified .ui-accordion-item.ui-active .ui-accordion-trigger {
  background: rgba(0,0,0,0.09);
}
.ui-control-stage-unified .ui-accordion-content {
  background: transparent;
  padding: 2px 6px 6px;
}
.ui-control-stage-unified .ui-accordion-icon {
  font-size: 11px;
  color: #86868b;
}

/* ── List selector ── */
.ui-control-stage-unified .ui-list-selector {
  border: none;
  background: transparent;
}
.ui-control-stage-unified .ui-list-items {
  border: none;
  max-height: none;
  overflow-y: visible;
}
.ui-control-stage-unified .ui-list-item {
  border: none;
  border-radius: 6px;
  padding: 4px 8px;
  margin: 1px 0;
  transition: background 0.1s;
}
.ui-control-stage-unified .ui-list-item:last-child {
  border-bottom: none;
}
.ui-control-stage-unified .ui-list-item:hover {
  background: rgba(0,0,0,0.05);
}
.ui-control-stage-unified .ui-list-item.selected {
  background: #007aff;
  color: #fff;
}
.ui-control-stage-unified .ui-list-item.selected .ui-list-item-title { color: #fff; }
.ui-control-stage-unified .ui-list-item.selected .ui-list-item-subtitle { color: rgba(255,255,255,0.7); }
.ui-control-stage-unified .ui-list-item-title {
  font-size: 13px;
  font-weight: 500;
  color: #1d1d1f;
  letter-spacing: -0.01em;
}
.ui-control-stage-unified .ui-list-item-subtitle {
  font-size: 11px;
  color: #86868b;
}
.ui-control-stage-unified .ui-list-item-checkbox {
  display: none;
}

/* ── List header (search + add) ── */
.ui-control-stage-unified .ui-list-header {
  padding: 6px;
  border-bottom: none;
  background: transparent;
  gap: 4px;
}

/* ── Inputs ── */
.ui-control-stage-unified .ui-input,
.ui-control-stage-unified input.ui-input {
  border: none;
  background: rgba(255,255,255,0.55);
  border-radius: 6px;
  font-size: 13px;
  padding: 5px 8px;
  color: #1d1d1f;
}
.ui-control-stage-unified .ui-input::placeholder { color: #86868b; }
.ui-control-stage-unified .ui-input:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(0,122,255,0.3);
}

/* ── Tree view ── */
.ui-control-stage-unified .ui-tree-view {
  border: none;
  background: transparent;
}
.ui-control-stage-unified .ui-tree-header {
  padding: 6px;
  border-bottom: none;
  background: transparent;
  gap: 4px;
}
.ui-control-stage-unified .ui-tree-nodes {
  padding: 2px;
  overflow-y: visible;
}
.ui-control-stage-unified .ui-tree-node {
  border: none;
  border-radius: 5px;
  padding: 3px 8px;
  font-size: 13px;
  font-weight: 400;
  color: #1d1d1f;
}
.ui-control-stage-unified .ui-tree-node:hover {
  background: rgba(0,0,0,0.05);
}
.ui-control-stage-unified .ui-tree-node.selected {
  background: #007aff;
  color: #fff;
}
.ui-control-stage-unified .ui-tree-compact .ui-tree-node {
  padding: 3px 8px;
  font-size: 12px;
}
.ui-control-stage-unified .ui-tree-empty {
  font-size: 13px;
  padding: 12px 8px;
  color: #86868b;
}
.ui-control-stage-unified .ui-tree-sublabel {
  font-size: 12px !important;
  color: #86868b !important;
  opacity: 1 !important;
}
.ui-control-stage-unified .ui-tree-node-actions {
  opacity: 0;
  pointer-events: none;
}
.ui-control-stage-unified .ui-tree-node:hover > .ui-tree-node-actions {
  opacity: 0.8;
  pointer-events: auto;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,0.05) 12px);
}
.ui-control-stage-unified .ui-tree-node.selected:hover > .ui-tree-node-actions {
  background: linear-gradient(90deg, transparent, #007aff 12px);
}

/* ── Buttons ── */
.ui-control-stage-unified .ui-btn {
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.ui-control-stage-unified .ui-btn-sm {
  padding: 3px 8px;
  font-size: 11px;
}
.ui-control-stage-unified .ui-btn-primary {
  background: #007aff;
  border-color: #007aff;
}
.ui-control-stage-unified .ui-btn-ghost {
  border-color: transparent;
}

/* Grid Templates */
.ui-grid-masonry {
  /* For true masonry, JavaScript would need to handle item placement */
  align-items: start;
}

.ui-grid-auto {
  display: grid;
  /* gridTemplateColumns is set via JS */
}

/* ========================================
   PHASE 8: MEDIA & CONTENT COMPONENTS
   ======================================== */

/* Carousel */
.ui-carousel {
  position: relative;
  overflow: hidden;
  border-radius: var(--ui-radius-lg);
}

.ui-carousel-track {
  display: flex;
  transition: transform 0.3s ease-in-out;
}

.ui-carousel-slide {
  flex: 0 0 100%;
  min-width: 100%;
}

.ui-carousel-slide img {
  width: 100%;
  height: auto;
  display: block;
}

.ui-carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: var(--ui-radius-full);
  background: rgba(255, 255, 255, 0.9);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--ui-text-lg);
  color: var(--ui-gray-700);
  box-shadow: var(--ui-shadow-md);
  transition: all var(--ui-transition);
  z-index: 10;
}

.ui-carousel-nav:hover {
  background: var(--ui-white);
  box-shadow: var(--ui-shadow-lg);
}

.ui-carousel-nav:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ui-carousel-nav-prev { left: var(--ui-space-3); }
.ui-carousel-nav-next { right: var(--ui-space-3); }

.ui-carousel-dots {
  position: absolute;
  bottom: var(--ui-space-3);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: var(--ui-space-2);
  z-index: 10;
}

.ui-carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--ui-radius-full);
  background: rgba(255, 255, 255, 0.5);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all var(--ui-transition);
}

.ui-carousel-dot:hover {
  background: rgba(255, 255, 255, 0.8);
}

.ui-carousel-dot.active {
  background: var(--ui-white);
  width: 24px;
}

/* Gallery */
.ui-gallery {
  display: grid;
  gap: var(--ui-space-2);
}

.ui-gallery-cols-2 { grid-template-columns: repeat(2, 1fr); }
.ui-gallery-cols-3 { grid-template-columns: repeat(3, 1fr); }
.ui-gallery-cols-4 { grid-template-columns: repeat(4, 1fr); }

.ui-gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--ui-radius-md);
  cursor: pointer;
  aspect-ratio: 1;
}

.ui-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--ui-transition);
}

.ui-gallery-item:hover img {
  transform: scale(1.05);
}

.ui-gallery-item-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--ui-transition);
}

.ui-gallery-item:hover .ui-gallery-item-overlay {
  background: rgba(0, 0, 0, 0.3);
}

.ui-gallery-item-icon {
  color: white;
  font-size: var(--ui-text-2xl);
  opacity: 0;
  transform: scale(0.8);
  transition: all var(--ui-transition);
}

.ui-gallery-item:hover .ui-gallery-item-icon {
  opacity: 1;
  transform: scale(1);
}

/* Lightbox */
.ui-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: all var(--ui-transition);
}

.ui-lightbox.open {
  opacity: 1;
  visibility: visible;
}

.ui-lightbox-content {
  max-width: 90vw;
  max-height: 90vh;
}

.ui-lightbox-content img {
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
}

.ui-lightbox-close {
  position: absolute;
  top: var(--ui-space-4);
  right: var(--ui-space-4);
  width: 40px;
  height: 40px;
  border-radius: var(--ui-radius-full);
  background: rgba(255, 255, 255, 0.1);
  border: none;
  cursor: pointer;
  color: white;
  font-size: var(--ui-text-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--ui-transition);
}

.ui-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

.ui-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  border-radius: var(--ui-radius-full);
  background: rgba(255, 255, 255, 0.1);
  border: none;
  cursor: pointer;
  color: white;
  font-size: var(--ui-text-2xl);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--ui-transition);
}

.ui-lightbox-nav:hover {
  background: rgba(255, 255, 255, 0.2);
}

.ui-lightbox-prev { left: var(--ui-space-4); }
.ui-lightbox-next { right: var(--ui-space-4); }

/* Code Block */
.ui-code-block {
  background: var(--ui-gray-900);
  border-radius: var(--ui-radius-lg);
  overflow: hidden;
  color: var(--ui-gray-100);
}

.ui-code-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ui-space-2) var(--ui-space-4);
  background: var(--ui-gray-800);
  border-bottom: var(--ui-border-width) solid var(--ui-gray-700);
}

.ui-code-block-body {
  display: flex;
  padding: var(--ui-space-4);
  overflow-x: auto;
}

.ui-code-block-lang {
  font-size: var(--ui-text-xs);
  color: var(--ui-gray-400);
  text-transform: uppercase;
  font-weight: var(--ui-font-medium);
}

.ui-code-block-copy {
  padding: var(--ui-space-1) var(--ui-space-2);
  background: transparent;
  border: var(--ui-border-width) solid var(--ui-gray-600);
  border-radius: var(--ui-radius-sm);
  color: var(--ui-gray-400);
  font-size: var(--ui-text-xs);
  cursor: pointer;
  transition: all var(--ui-transition);
}

.ui-code-block-copy:hover {
  background: var(--ui-gray-700);
  color: var(--ui-white);
}

.ui-code-block-copy.copied {
  background: var(--ui-success);
  border-color: var(--ui-success);
  color: var(--ui-white);
}

/* .ui-code-block-content is a <pre> element in the JS structure */
pre.ui-code-block-content {
  margin: 0;
  padding: 0;
  font-family: var(--ui-font-mono);
  font-size: var(--ui-text-sm);
  line-height: 1.6;
  color: var(--ui-gray-100);
  flex: 1;
  white-space: pre;
}

pre.ui-code-block-content code {
  font-family: inherit;
  color: inherit;
}

.ui-code-block-line-numbers {
  flex-shrink: 0;
  padding-right: var(--ui-space-4);
  margin-right: var(--ui-space-4);
  border-right: var(--ui-border-width) solid var(--ui-gray-700);
  color: var(--ui-gray-600);
  text-align: right;
  user-select: none;
}

.ui-code-block-line-numbers span {
  display: block;
  line-height: 1.6;
}

/* Callout */
.ui-callout {
  display: flex;
  gap: var(--ui-space-3);
  padding: var(--ui-space-4);
  border-radius: var(--ui-radius-lg);
  border-left: 4px solid;
}

.ui-callout[data-color] {
  background: var(--_c-light);
  border-color: var(--_c);
}

.ui-callout-icon {
  flex-shrink: 0;
  font-size: var(--ui-text-xl);
}

.ui-callout[data-color] .ui-callout-icon { color: var(--_c); }

.ui-callout-content {
  flex: 1;
}

.ui-callout-title {
  font-weight: var(--ui-font-semibold);
  margin-bottom: var(--ui-space-1);
}

.ui-callout[data-color] .ui-callout-title { color: var(--_c-dark); }

.ui-callout-text {
  font-size: var(--ui-text-sm);
  color: var(--ui-gray-700);
  line-height: 1.5;
}

/* ============================================
   PHASE 9: INTERACTIVE CONTROLS
   ============================================ */

/* Segmented Control */
.ui-segmented-control {
  display: inline-flex;
  background: var(--ui-gray-100);
  border-radius: var(--ui-radius-lg);
  padding: var(--ui-space-1);
  gap: var(--ui-space-1);
}

.ui-segmented-control-option {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ui-space-2);
  padding: var(--ui-space-2) var(--ui-space-4);
  border-radius: var(--ui-radius-md);
  font-size: var(--ui-text-sm);
  font-weight: var(--ui-font-medium);
  color: var(--ui-gray-600);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all var(--ui-transition);
  white-space: nowrap;
}

.ui-segmented-control-option:hover:not(.ui-segmented-control-option-active) {
  color: var(--ui-gray-800);
  background: var(--ui-gray-200);
}

.ui-segmented-control-option-active {
  background: white;
  color: var(--ui-gray-900);
  box-shadow: var(--ui-shadow-sm);
}

.ui-segmented-control-option svg,
.ui-segmented-control-option img {
  width: 16px;
  height: 16px;
}

/* Segmented Control Sizes */
.ui-segmented-control-sm .ui-segmented-control-option {
  padding: var(--ui-space-1) var(--ui-space-3);
  font-size: var(--ui-text-xs);
}

.ui-segmented-control-lg .ui-segmented-control-option {
  padding: var(--ui-space-3) var(--ui-space-5);
  font-size: var(--ui-text-base);
}

/* Segmented Control Block (full width) */
.ui-segmented-control-block {
  display: flex;
  width: 100%;
}

.ui-segmented-control-block .ui-segmented-control-option {
  flex: 1;
}

/* Segmented Control Variants */
.ui-segmented-control-primary .ui-segmented-control-option-active {
  background: var(--ui-primary);
  color: white;
}

.ui-segmented-control-dark {
  background: var(--ui-gray-800);
}

.ui-segmented-control-dark .ui-segmented-control-option {
  color: var(--ui-gray-400);
}

.ui-segmented-control-dark .ui-segmented-control-option:hover:not(.ui-segmented-control-option-active) {
  color: var(--ui-gray-200);
  background: var(--ui-gray-700);
}

.ui-segmented-control-dark .ui-segmented-control-option-active {
  background: var(--ui-gray-600);
  color: white;
}

/* Responsive segmented control */
@media (max-width: 480px) {
  .ui-segmented-control {
    flex-wrap: wrap;
  }

  .ui-segmented-control-option {
    padding: var(--ui-space-2) var(--ui-space-3);
    font-size: var(--ui-text-xs);
  }
}

/* Split Button */
.ui-split-button {
  display: inline-flex;
  position: relative;
}

.ui-split-button-main {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ui-space-2);
  padding: var(--ui-space-2) var(--ui-space-4);
  font-size: var(--ui-text-sm);
  font-weight: var(--ui-font-medium);
  border: none;
  cursor: pointer;
  transition: all var(--ui-transition);
  border-radius: var(--ui-radius-md) 0 0 var(--ui-radius-md);
}

.ui-split-button-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--ui-space-2) var(--ui-space-2);
  border: none;
  cursor: pointer;
  transition: all var(--ui-transition);
  border-radius: 0 var(--ui-radius-md) var(--ui-radius-md) 0;
  border-left: var(--ui-border-width) solid hsla(0, 0%, 100%, 0.2);
}

.ui-split-button-toggle svg {
  width: 16px;
  height: 16px;
  transition: transform var(--ui-transition);
}

.ui-split-button-toggle.ui-split-button-open svg {
  transform: rotate(180deg);
}

/* Split Button Variants */
.ui-split-button[data-color] .ui-split-button-main,
.ui-split-button[data-color] .ui-split-button-toggle {
  background: var(--_c);
  color: white;
}

.ui-split-button[data-color] .ui-split-button-main:hover,
.ui-split-button[data-color] .ui-split-button-toggle:hover {
  background: var(--_c-hover);
}

.ui-split-button-outline .ui-split-button-main,
.ui-split-button-outline .ui-split-button-toggle {
  background: white;
  color: var(--ui-gray-700);
  border: var(--ui-border-width) solid var(--ui-gray-300);
}

.ui-split-button-outline .ui-split-button-toggle {
  border-left: 1px solid var(--ui-gray-300);
}

.ui-split-button-outline .ui-split-button-main:hover,
.ui-split-button-outline .ui-split-button-toggle:hover {
  background: var(--ui-gray-50);
}

/* Split Button Dropdown */
.ui-split-button-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: var(--ui-space-1);
  background: white;
  border: var(--ui-border-width) solid var(--ui-gray-200);
  border-radius: var(--ui-radius-md);
  box-shadow: var(--ui-shadow-lg);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all var(--ui-transition);
}

.ui-split-button-dropdown.ui-split-button-dropdown-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.ui-split-button-dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--ui-space-2);
  width: 100%;
  padding: var(--ui-space-2) var(--ui-space-3);
  font-size: var(--ui-text-sm);
  color: var(--ui-gray-700);
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  transition: background var(--ui-transition);
}

.ui-split-button-dropdown-item:first-child {
  border-radius: var(--ui-radius-md) var(--ui-radius-md) 0 0;
}

.ui-split-button-dropdown-item:last-child {
  border-radius: 0 0 var(--ui-radius-md) var(--ui-radius-md);
}

.ui-split-button-dropdown-item:hover {
  background: var(--ui-gray-100);
}

.ui-split-button-dropdown-item svg {
  width: 16px;
  height: 16px;
  color: var(--ui-gray-500);
}

.ui-split-button-dropdown-divider {
  height: 1px;
  background: var(--ui-gray-200);
  margin: var(--ui-space-1) 0;
}

/* Split Button Sizes */
.ui-split-button-sm .ui-split-button-main {
  padding: var(--ui-space-1) var(--ui-space-3);
  font-size: var(--ui-text-xs);
}

.ui-split-button-sm .ui-split-button-toggle {
  padding: var(--ui-space-1) var(--ui-space-1);
}

.ui-split-button-sm .ui-split-button-toggle svg {
  width: 14px;
  height: 14px;
}

.ui-split-button-lg .ui-split-button-main {
  padding: var(--ui-space-3) var(--ui-space-5);
  font-size: var(--ui-text-base);
}

.ui-split-button-lg .ui-split-button-toggle {
  padding: var(--ui-space-3) var(--ui-space-3);
}

.ui-split-button-lg .ui-split-button-toggle svg {
  width: 20px;
  height: 20px;
}

/* ========================================
   PHASE 12: MEDIA & CONTENT TEMPLATE STYLES
   ======================================== */

/* Carousel Templates */
.ui-carousel-minimal .ui-carousel-nav,
.ui-carousel-minimal .ui-carousel-dots {
  display: none;
}

.ui-carousel-thumbnails {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-2);
}

.ui-carousel-thumbnail-strip {
  display: flex;
  gap: var(--ui-space-2);
  overflow-x: auto;
  padding: var(--ui-space-2) 0;
}

.ui-carousel-thumbnail {
  flex: 0 0 60px;
  width: 60px;
  height: 40px;
  border-radius: var(--ui-radius-sm);
  overflow: hidden;
  cursor: pointer;
  opacity: 0.6;
  transition: all var(--ui-transition);
  border: 2px solid transparent;
}

.ui-carousel-thumbnail:hover {
  opacity: 0.8;
}

.ui-carousel-thumbnail.active {
  opacity: 1;
  border-color: var(--ui-primary);
}

.ui-carousel-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Gallery Templates */
.ui-gallery-masonry {
  display: block;
  column-count: var(--gallery-cols, 3);
  column-gap: var(--ui-space-4);
}

.ui-gallery-masonry .ui-gallery-item {
  break-inside: avoid;
  margin-bottom: var(--ui-space-4);
}

.ui-gallery-justified {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-space-2);
}

.ui-gallery-justified .ui-gallery-item {
  flex-grow: 1;
  height: var(--gallery-row-height, 200px);
}

.ui-gallery-justified .ui-gallery-item img {
  height: 100%;
  width: auto;
  min-width: 100%;
  object-fit: cover;
}

/* CodeBlock Templates */
.ui-code-block-minimal {
  border-radius: var(--ui-radius-md);
}

.ui-code-block-minimal .ui-code-block-header {
  display: none;
}

.ui-code-block-minimal pre {
  margin: 0;
  padding: var(--ui-space-3);
}

.ui-code-block-terminal {
  background: hsl(0, 0%, 12%);
  border-radius: var(--ui-radius-lg);
  overflow: hidden;
}

.ui-code-block-terminal .ui-code-block-header {
  background: hsl(0, 0%, 20%);
  padding: var(--ui-space-2) var(--ui-space-3);
  display: flex;
  align-items: center;
  gap: var(--ui-space-4);
}

.ui-code-block-terminal-dots {
  display: flex;
  gap: var(--ui-space-2);
}

.ui-code-block-terminal-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.ui-code-block-terminal-dot:nth-child(1) { background: #ff5f56; }
.ui-code-block-terminal-dot:nth-child(2) { background: #ffbd2e; }
.ui-code-block-terminal-dot:nth-child(3) { background: #27c93f; }

.ui-code-block-terminal .ui-code-block-filename {
  color: var(--ui-gray-400);
  font-size: var(--ui-text-sm);
}

.ui-code-block-terminal pre {
  margin: 0;
  padding: var(--ui-space-4);
  background: transparent;
}

.ui-code-block-terminal code {
  color: #d4d4d4;
  font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
}

/* Callout Templates */
.ui-callout-compact {
  padding: var(--ui-space-2) var(--ui-space-3);
  font-size: var(--ui-text-sm);
}

.ui-callout-compact .ui-callout-icon {
  font-size: var(--ui-text-base);
}

.ui-callout-compact .ui-callout-title {
  display: none;
}

.ui-callout-banner {
  border-radius: 0;
  border-left: none;
  border-right: none;
  padding: var(--ui-space-4) var(--ui-space-6);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.ui-callout-banner .ui-callout-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ui-space-1);
}

/* ============================================
   KANBAN BOARD COMPONENT
   ============================================ */

.ui-kanban {
  display: flex;
  gap: var(--ui-space-3);
  min-height: 300px;
  overflow-x: auto;
  padding: var(--ui-space-2) 0;
}

.ui-kanban-column {
  flex: 1;
  min-width: 200px;
  max-width: 320px;
  background: var(--ui-gray-50);
  border-radius: var(--ui-radius-lg);
  display: flex;
  flex-direction: column;
}

.ui-kanban-column-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ui-space-2) var(--ui-space-3);
  border-bottom: 2px solid var(--kanban-col-color, var(--ui-gray-300));
}

.ui-kanban-column-label {
  font-size: var(--ui-text-sm);
  font-weight: var(--ui-font-semibold);
  color: var(--ui-gray-700);
}

.ui-kanban-column-count {
  font-size: var(--ui-text-xs);
  background: var(--ui-gray-200);
  color: var(--ui-gray-600);
  padding: 0.1rem 0.4rem;
  border-radius: var(--ui-radius-full);
  font-weight: var(--ui-font-medium);
}

.ui-kanban-list {
  flex: 1;
  padding: var(--ui-space-2);
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-2);
  overflow-y: auto;
}

.ui-kanban-card {
  background: var(--ui-white);
  border-radius: var(--ui-radius-md);
  padding: var(--ui-space-2) var(--ui-space-3);
  box-shadow: var(--ui-shadow-sm);
  border-left: 3px solid var(--ui-gray-200);
  cursor: pointer;
  transition: box-shadow var(--ui-transition-fast), transform var(--ui-transition-fast);
}

.ui-kanban-card:hover {
  box-shadow: var(--ui-shadow-md);
  transform: translateY(-1px);
}

.ui-kanban-card-title {
  font-size: var(--ui-text-sm);
  font-weight: var(--ui-font-medium);
  color: var(--ui-gray-800);
}

.ui-kanban-card-subtitle {
  font-size: var(--ui-text-xs);
  color: var(--ui-gray-500);
  margin-top: var(--ui-space-1);
}

.ui-kanban-card-badges {
  display: flex;
  gap: var(--ui-space-1);
  margin-top: var(--ui-space-2);
  flex-wrap: wrap;
}

.ui-kanban-badge {
  font-size: 0.65rem;
  padding: 0.1rem 0.35rem;
  border-radius: var(--ui-radius-sm);
  background: var(--ui-primary-light);
  color: var(--ui-primary-dark);
  font-weight: var(--ui-font-medium);
}

/* Compact variant */
.ui-kanban-compact .ui-kanban-column {
  min-width: 160px;
}

.ui-kanban-compact .ui-kanban-card {
  padding: var(--ui-space-1) var(--ui-space-2);
}

.ui-kanban-compact .ui-kanban-card-title {
  font-size: var(--ui-text-xs);
}

/* Kanban drag-and-drop */
.ui-kanban-card[draggable="true"] {
  cursor: grab;
}

.ui-kanban-card-dragging {
  opacity: 0.4;
  cursor: grabbing;
}

.ui-kanban-list-dragover {
  background: var(--ui-primary-light);
  border-radius: var(--ui-radius-md);
  outline: 2px dashed var(--ui-primary);
  outline-offset: -2px;
}

/* ============================================
   CALENDAR COMPONENT
   ============================================ */

.ui-calendar {
  font-size: var(--ui-text-sm);
  color: var(--ui-gray-700);
}

.ui-calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ui-space-2) var(--ui-space-1);
  margin-bottom: var(--ui-space-2);
}

.ui-calendar-title {
  font-size: var(--ui-text-base);
  font-weight: var(--ui-font-semibold);
  color: var(--ui-gray-800);
}

.ui-calendar-nav {
  background: none;
  border: var(--ui-border-width) solid var(--ui-gray-200);
  border-radius: var(--ui-radius-md);
  padding: var(--ui-space-1) var(--ui-space-2);
  cursor: pointer;
  font-size: var(--ui-text-xs);
  color: var(--ui-gray-600);
  transition: background var(--ui-transition-fast);
}

.ui-calendar-nav:hover {
  background: var(--ui-gray-100);
}

.ui-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--ui-gray-200);
  border-radius: var(--ui-radius-lg);
  overflow: auto;
}

.ui-calendar-dayheader {
  background: var(--ui-gray-100);
  padding: var(--ui-space-1);
  text-align: center;
  font-size: var(--ui-text-xs);
  font-weight: var(--ui-font-semibold);
  color: var(--ui-gray-500);
  text-transform: uppercase;
}

.ui-calendar-day {
  background: var(--ui-white);
  min-height: 70px;
  padding: var(--ui-space-1);
  cursor: pointer;
  transition: background var(--ui-transition-fast);
}

.ui-calendar-day:hover {
  background: var(--ui-gray-50);
}

.ui-calendar-day-empty {
  background: var(--ui-gray-50);
  cursor: default;
}

.ui-calendar-day-num {
  font-size: var(--ui-text-xs);
  font-weight: var(--ui-font-medium);
  color: var(--ui-gray-600);
  margin-bottom: var(--ui-space-1);
}

.ui-calendar-today {
  background: var(--ui-primary-light);
}

.ui-calendar-today .ui-calendar-day-num {
  color: var(--ui-primary);
  font-weight: var(--ui-font-bold);
}

.ui-calendar-event {
  font-size: 0.65rem;
  padding: 0.1rem 0.3rem;
  border-radius: var(--ui-radius-sm);
  background: var(--ui-primary);
  color: var(--ui-white);
  margin-bottom: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.ui-calendar-event:hover {
  opacity: 0.85;
}

.ui-calendar-more {
  font-size: 0.6rem;
  color: var(--ui-gray-500);
  padding: 0.1rem 0.3rem;
}

/* ============================================
   CHAT COMPONENT
   ============================================ */

.ui-chat {
  display: flex;
  flex-direction: column;
  font-size: var(--ui-text-sm);
  border: var(--ui-border-width) solid var(--ui-gray-200);
  border-radius: var(--ui-radius-lg);
  background: var(--ui-white);
}

.ui-chat-list {
  flex: 1;
  overflow-y: auto;
  padding: var(--ui-space-3);
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-2);
  max-height: 400px;
  min-height: 200px;
}

.ui-chat-row {
  display: flex;
  justify-content: flex-start;
}

.ui-chat-own {
  justify-content: flex-end;
}

.ui-chat-bubble {
  max-width: 75%;
  padding: var(--ui-space-2) var(--ui-space-3);
  border-radius: var(--ui-radius-lg);
  background: var(--ui-gray-100);
  color: var(--ui-gray-800);
}

.ui-chat-own .ui-chat-bubble {
  background: var(--ui-primary);
  color: var(--ui-white);
}

.ui-chat-sender {
  font-size: var(--ui-text-xs);
  font-weight: var(--ui-font-semibold);
  color: var(--ui-primary);
  margin-bottom: var(--ui-space-1);
}

.ui-chat-content {
  line-height: var(--ui-leading-normal);
}

.ui-chat-time {
  font-size: 0.65rem;
  color: var(--ui-gray-400);
  margin-top: var(--ui-space-1);
  text-align: right;
}

.ui-chat-own .ui-chat-time {
  color: rgba(255,255,255,0.7);
}

.ui-chat-system {
  text-align: center;
  font-size: var(--ui-text-xs);
  color: var(--ui-gray-400);
  padding: var(--ui-space-1) 0;
  font-style: italic;
}

.ui-chat-input-bar {
  display: flex;
  gap: var(--ui-space-2);
  padding: var(--ui-space-2) var(--ui-space-3);
  border-top: var(--ui-border-width) solid var(--ui-gray-200);
}

.ui-chat-input {
  flex: 1;
  border: var(--ui-border-width) solid var(--ui-gray-200);
  border-radius: var(--ui-radius-md);
  padding: var(--ui-space-2) var(--ui-space-3);
  font-size: var(--ui-text-sm);
  outline: none;
  transition: border-color var(--ui-transition-fast);
}

.ui-chat-input:focus {
  border-color: var(--ui-primary);
}

.ui-chat-send {
  background: var(--ui-primary);
  color: var(--ui-white);
  border: none;
  border-radius: var(--ui-radius-md);
  padding: var(--ui-space-2) var(--ui-space-4);
  font-size: var(--ui-text-sm);
  font-weight: var(--ui-font-medium);
  cursor: pointer;
  transition: background var(--ui-transition-fast);
}

.ui-chat-send:hover {
  background: var(--ui-primary-hover);
}

/* Compact variant */
.ui-chat-compact .ui-chat-list {
  max-height: 250px;
  padding: var(--ui-space-2);
  gap: var(--ui-space-1);
}

.ui-chat-compact .ui-chat-bubble {
  padding: var(--ui-space-1) var(--ui-space-2);
  font-size: var(--ui-text-xs);
}

/* ============================================
   GRAPH VIEW COMPONENT
   ============================================ */

.ui-graph {
  font-size: var(--ui-text-sm);
  color: var(--ui-gray-700);
}

.ui-graph-svg {
  width: 100%;
  max-height: 450px;
  display: block;
}

.ui-graph-edge {
  stroke: var(--ui-gray-300);
  stroke-width: 1.5;
}

.ui-graph-edge-label {
  font-size: 9px;
  fill: var(--ui-gray-500);
  text-anchor: middle;
}

.ui-graph-node circle {
  fill: var(--ui-primary);
  stroke: var(--ui-white);
  stroke-width: 2;
  transition: fill 0.15s ease;
}

.ui-graph-node:hover circle {
  fill: var(--ui-primary-hover);
}

.ui-graph-label {
  font-size: 10px;
  fill: var(--ui-white);
  text-anchor: middle;
  pointer-events: none;
  font-weight: var(--ui-font-medium);
}

/* ─── Control Chart (Shewhart) ─────────────────────────────────────────────── */

.ui-control-chart {
  font-family: var(--ui-font-family);
  font-size: var(--ui-text-sm);
  color: var(--ui-gray-700);
  background: var(--ui-white);
  border: var(--ui-border-width) solid var(--ui-gray-200);
  border-radius: var(--ui-radius);
  padding: var(--ui-space-3);
}

.ui-cc-title {
  font-weight: var(--ui-font-semibold);
  font-size: var(--ui-text-sm);
  margin-bottom: var(--ui-space-2);
  color: var(--ui-gray-800);
}

.ui-cc-empty {
  text-align: center;
  padding: var(--ui-space-8) 0;
  color: var(--ui-gray-400);
  font-style: italic;
}

.ui-cc-svg {
  width: 100%;
  display: block;
}

.ui-cc-band-action {
  fill: hsl(var(--ui-dan-h), var(--ui-dan-s), var(--l-50));
}

.ui-cc-band-warning {
  fill: hsl(var(--ui-war-h), var(--ui-war-s), var(--l-50));
}

.ui-cc-line-mean {
  stroke: var(--ui-primary);
  stroke-width: 1.5;
  stroke-dasharray: 6 3;
}

.ui-cc-line-warning {
  stroke: var(--ui-warning);
  stroke-width: 1;
  stroke-dasharray: 4 3;
}

.ui-cc-line-action {
  stroke: var(--ui-danger);
  stroke-width: 1;
  stroke-dasharray: 2 2;
}

.ui-cc-data-line {
  fill: none;
  stroke: var(--ui-primary);
  stroke-width: 1.5;
}

.ui-cc-point {
  stroke: var(--ui-white);
  stroke-width: 1.5;
  cursor: pointer;
  transition: r 0.15s ease;
}

.ui-cc-point:hover {
  r: 6;
}

.ui-cc-point-pass { fill: var(--ui-success); }
.ui-cc-point-warning { fill: var(--ui-warning); }
.ui-cc-point-fail { fill: var(--ui-danger); }
.ui-cc-point-pending { fill: var(--ui-gray-400); }

.ui-cc-label-x {
  font-size: 9px;
  fill: var(--ui-gray-500);
  text-anchor: middle;
}

.ui-cc-label-y {
  font-size: 9px;
  fill: var(--ui-gray-500);
  dominant-baseline: middle;
}

.ui-cc-label-y.end {
  text-anchor: end;
}

.ui-cc-legend {
  display: flex;
  gap: var(--ui-space-3);
  flex-wrap: wrap;
  padding-top: var(--ui-space-2);
  border-top: var(--ui-border-width) solid var(--ui-gray-100);
  margin-top: var(--ui-space-2);
  font-size: 11px;
  color: var(--ui-gray-600);
}

.ui-cc-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ui-cc-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.ui-cc-dot-pass { background: var(--ui-success); }
.ui-cc-dot-warning { background: var(--ui-warning); }
.ui-cc-dot-fail { background: var(--ui-danger); }

/* ============================================
   QR CODE (#57)
   ============================================ */

.ui-qrcode {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ui-qrcode-empty {
  color: var(--ui-gray-400);
  font-size: var(--ui-text-sm);
  font-style: italic;
}

.ui-qrcode-canvas {
  line-height: 0;
}

.ui-qrcode-canvas canvas,
.ui-qrcode-canvas svg {
  display: block;
  border-radius: var(--ui-radius-sm);
}

/* ============================================
   GANTT CHART (#58)
   ============================================ */

.ui-gantt {
  border: 1px solid var(--ui-gray-200);
  border-radius: var(--ui-radius);
  background: var(--ui-white);
  overflow: hidden;
}

.ui-gantt-wrapper {
  display: flex;
  height: 100%;
  min-height: 200px;
}

.ui-gantt-labels {
  width: 180px;
  min-width: 180px;
  border-right: 1px solid var(--ui-gray-200);
  overflow-y: auto;
  background: var(--ui-gray-50);
  flex-shrink: 0;
}

.ui-gantt-label-header {
  height: 52px;
  display: flex;
  align-items: center;
  padding: 0 0.5rem;
  font-size: var(--ui-text-xs);
  font-weight: 600;
  color: var(--ui-gray-500);
  border-bottom: 1px solid var(--ui-gray-200);
  background: var(--ui-gray-100);
}

.ui-gantt-task-label {
  height: 28px;
  display: flex;
  align-items: center;
  padding: 0 0.5rem;
  font-size: var(--ui-text-xs);
  color: var(--ui-gray-700);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-bottom: 1px solid var(--ui-gray-100);
  cursor: pointer;
}

.ui-gantt-task-label:hover { background: var(--ui-gray-100); }

.ui-gantt-group-label {
  height: 28px;
  display: flex;
  align-items: center;
  padding: 0 0.5rem;
  font-size: var(--ui-text-xs);
  font-weight: 700;
  color: var(--ui-gray-800);
  background: var(--ui-gray-100);
  border-bottom: 1px solid var(--ui-gray-200);
  cursor: pointer;
  user-select: none;
}

.ui-gantt-group-label i { margin-right: 0.3rem; font-size: 0.55rem; transition: transform 0.15s; }
.ui-gantt-group-label.collapsed i { transform: rotate(-90deg); }

.ui-gantt-timeline-scroll {
  flex: 1;
  overflow-x: auto;
  overflow-y: auto;
  position: relative;
}

.ui-gantt-timeline {
  position: relative;
  min-height: 100%;
}

.ui-gantt-header {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--ui-gray-100);
  border-bottom: 1px solid var(--ui-gray-200);
}

.ui-gantt-month-row,
.ui-gantt-day-row {
  display: flex;
}

.ui-gantt-month-cell {
  font-size: var(--ui-text-xs);
  font-weight: 600;
  color: var(--ui-gray-600);
  padding: 0.2rem 0.4rem;
  border-right: 1px solid var(--ui-gray-200);
  white-space: nowrap;
  overflow: hidden;
}

.ui-gantt-day-cell {
  font-size: 0.6rem;
  color: var(--ui-gray-500);
  text-align: center;
  border-right: 1px solid var(--ui-gray-100);
  border-bottom: 1px solid var(--ui-gray-200);
  box-sizing: border-box;
}

.ui-gantt-day-cell.weekend { background: var(--ui-gray-50); color: var(--ui-gray-400); }

.ui-gantt-rows { position: relative; }

.ui-gantt-row {
  height: 28px;
  position: relative;
  border-bottom: 1px solid var(--ui-gray-50);
}

.ui-gantt-row:nth-child(even) { background: rgba(0,0,0,0.01); }

.ui-gantt-bar {
  position: absolute;
  top: 4px;
  height: 20px;
  border-radius: var(--ui-radius-sm);
  display: flex;
  align-items: center;
  padding: 0 0.3rem;
  font-size: 0.55rem;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  transition: opacity 0.15s;
  z-index: 1;
}

.ui-gantt-bar:hover { opacity: 0.85; }

.ui-gantt-bar-progress {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: var(--ui-radius-sm);
  opacity: 0.3;
  background: #000;
}

.ui-gantt-bar-label {
  position: relative;
  z-index: 1;
  text-overflow: ellipsis;
  overflow: hidden;
}

.ui-gantt-milestone {
  position: absolute;
  top: 6px;
  width: 14px;
  height: 14px;
  transform: rotate(45deg);
  border: 2px solid;
  background: var(--ui-white);
  z-index: 1;
  cursor: pointer;
}

.ui-gantt-milestone:hover { box-shadow: 0 0 0 3px rgba(99,102,241,0.2); }

.ui-gantt-today {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--ui-danger);
  z-index: 3;
  pointer-events: none;
}

.ui-gantt-group-row {
  height: 28px;
  background: var(--ui-gray-100);
  border-bottom: 1px solid var(--ui-gray-200);
}

/* Compact variant */
.ui-gantt-compact .ui-gantt-labels { width: 140px; min-width: 140px; }
.ui-gantt-compact .ui-gantt-task-label,
.ui-gantt-compact .ui-gantt-group-label,
.ui-gantt-compact .ui-gantt-row,
.ui-gantt-compact .ui-gantt-group-row { height: 22px; }
.ui-gantt-compact .ui-gantt-bar { top: 2px; height: 18px; }