/* ===================================================================
   IGNY8 DESIGN SYSTEM - SINGLE SOURCE OF TRUTH
   ===================================================================
   
   This file consolidates ALL design tokens, color scales, utilities,
   and component styles. Import this file in main.tsx/App.tsx.
   
   🔒 STYLE LOCKED - All colors, spacing, and components must use
   these tokens. See DESIGN_SYSTEM.md for usage guidelines.
   
   ⚠️  ONLY 6 HEX VALUES IN ENTIRE SYSTEM - Everything else derived!
   ⚠️  TAILWIND DEFAULT COLORS ARE DISABLED - THEY WON'T WORK!
   ⚠️  AI AGENTS: DO NOT USE blue-500, red-500, green-500, etc.
   ⚠️  USE ONLY: brand-*, success-*, warning-*, error-*, info-*, gray-*
   
   Last Updated: 2026-01-01
   =================================================================== */

/* Tailwind with ALL default colors DISABLED */
@import "tailwindcss";
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap") layer(base);


/* ===================================================================
   THE 6 PRIMARY COLOR TOKENS - ONLY HEX VALUES ALLOWED HERE
   ===================================================================
   All other colors in the system MUST derive from these 6 using color-mix().
   This enables dynamic theming - change these 6 = entire app updates.
   =================================================================== */

:root {

  /* ===== CURRENT PALETTE ===== */
/*
  --color-primary: #0077B6;
  --color-success: #2CA18E;
  --color-warning: #D9A12C;
  --color-danger: #A12C40;
  --color-info: #2C40A1;
  --color-gray-base: #667085;
*/

/* ===== OPTION 1: MODERN SAAS ===== */
/*
  --color-primary: #0D9488;
  --color-success: #10B981;
  --color-warning: #F59E0B;
  --color-danger: #EF4444;
  --color-info: #7C3AED;
  --color-gray-base: #64748B;
*/

/* ===== OPTION 2: BOLD TECH ===== */
/*
  --color-primary: #6366F1;
  --color-success: #22C55E;
  --color-warning: #FBBF24;
  --color-danger: #F43F5E;
  --color-info: #8B5CF6;
  --color-gray-base: #6B7280;
*/

/* ===== OPTION 3: CLEAN MINIMAL ===== */
/*
  --color-primary: #3B82F6;
  --color-success: #059669;
  --color-warning: #F97316;
  --color-danger: #DC2626;
  --color-info: #6366F1;
  --color-gray-base: #475569;
*/
--color-primary: #1c86d1;
--color-success: #3fcd9f;
--color-warning: #f87f4c;
--color-danger: #ff656f;
--color-info: #18b2c4;
--color-gray-base: #243249;
/*
--color-primary: #3B82F6;
--color-success: #10B981;
--color-warning: #F59E0B;
--color-danger: #DC2626;
--color-info: #F63B82;
--color-gray-base: #30425d;
*/

  /* ===================================================================
     DERIVED COLORS - All computed from the 6 primaries above
     =================================================================== */
  
  /* Primary Variants (derived from --color-primary) */
  --color-primary-dark: color-mix(in srgb, var(--color-primary) 75%, black);
  --color-primary-light: color-mix(in srgb, var(--color-primary) 60%, white);
  --color-primary-subtle: color-mix(in srgb, var(--color-primary) 10%, white);
  
  /* Success Variants (derived from --color-success) */
  --color-success-dark: color-mix(in srgb, var(--color-success) 75%, black);
  --color-success-light: color-mix(in srgb, var(--color-success) 60%, white);
  --color-success-subtle: color-mix(in srgb, var(--color-success) 10%, white);
  
  /* Warning Variants (derived from --color-warning) */
  --color-warning-dark: color-mix(in srgb, var(--color-warning) 75%, black);
  --color-warning-light: color-mix(in srgb, var(--color-warning) 60%, white);
  --color-warning-subtle: color-mix(in srgb, var(--color-warning) 10%, white);
  
  /* Danger Variants (derived from --color-danger) */
  --color-danger-dark: color-mix(in srgb, var(--color-danger) 75%, black);
  --color-danger-light: color-mix(in srgb, var(--color-danger) 60%, white);
  --color-danger-subtle: color-mix(in srgb, var(--color-danger) 10%, white);
  
  /* Info Variants (derived from --color-info) */
  --color-info-dark: color-mix(in srgb, var(--color-info) 75%, black);
  --color-info-light: color-mix(in srgb, var(--color-info) 60%, white);
  --color-info-subtle: color-mix(in srgb, var(--color-info) 10%, white);

  /* ===================================================================
     BACKGROUND COLORS (derived from primaries)
     =================================================================== */
  --color-navy: color-mix(in srgb, var(--color-gray-base) 25%, black);
  --color-navy-light: color-mix(in srgb, var(--color-gray-base) 35%, black);
  --color-surface: color-mix(in srgb, var(--color-gray-base) 3%, white);
  --color-panel: #FFFFFF;
  --color-panel-alt: color-mix(in srgb, var(--color-gray-base) 8%, white);
  
  /* ===================================================================
     TEXT COLORS (derived from gray-base)
     =================================================================== */
  --color-text: color-mix(in srgb, var(--color-gray-base) 30%, black);
  --color-text-dim: var(--color-gray-base);
  --color-text-light: color-mix(in srgb, var(--color-gray-base) 15%, white);
  --color-stroke: color-mix(in srgb, var(--color-gray-base) 25%, white);

  /* ===================================================================
     BORDER RADIUS
     =================================================================== */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-base: 6px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 10px;
  --radius-2xl: 12px;
  --radius-full: 9999px;
  
  /* ===================================================================
     GRADIENTS (using CSS variables, not hex)
     =================================================================== */
  --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  --gradient-success: linear-gradient(135deg, var(--color-success) 0%, var(--color-success-dark) 100%);
  --gradient-warning: linear-gradient(135deg, var(--color-warning) 0%, var(--color-warning-dark) 100%);
  --gradient-danger: linear-gradient(135deg, var(--color-danger) 0%, var(--color-danger-dark) 100%);
  --gradient-info: linear-gradient(135deg, var(--color-info) 0%, var(--color-info-dark) 100%);
  --gradient-panel: linear-gradient(180deg, var(--color-panel) 0%, var(--color-panel-alt) 100%);

  /* ===================================================================
     SHADOWS (using rgba with consistent opacity)
     =================================================================== */
  --shadow-xs: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 1px 2px 0px rgba(0, 0, 0, 0.06);
  --shadow-md: 0px 4px 8px -2px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0px 12px 16px -4px rgba(0, 0, 0, 0.08), 0px 4px 6px -2px rgba(0, 0, 0, 0.03);
  --shadow-xl: 0px 20px 24px -4px rgba(0, 0, 0, 0.08), 0px 8px 8px -4px rgba(0, 0, 0, 0.03);
}

/* ===================================================================
   DARK MODE OVERRIDES (all derived from primaries)
   =================================================================== */
.dark {
  /* Backgrounds - derived from gray-base */
  --color-surface: color-mix(in srgb, var(--color-gray-base) 26%, black);
  --color-panel: color-mix(in srgb, var(--color-gray-base) 40%, black);
  --color-panel-alt: color-mix(in srgb, var(--color-gray-base) 28%, black);
  
  /* Text - derived from gray-base */
  --color-text: color-mix(in srgb, var(--color-gray-base) 10%, white);
  --color-text-dim: color-mix(in srgb, var(--color-gray-base) 40%, white);
  --color-stroke: color-mix(in srgb, var(--color-gray-base) 62%, black);
  
  /* Shadows for dark mode */
  --shadow-xs: 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0px 1px 3px 0px rgba(0, 0, 0, 0.4), 0px 1px 2px 0px rgba(0, 0, 0, 0.2);
  --shadow-md: 0px 4px 8px -2px rgba(0, 0, 0, 0.4), 0px 2px 4px -2px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0px 12px 16px -4px rgba(0, 0, 0, 0.4), 0px 4px 6px -2px rgba(0, 0, 0, 0.2);
  --shadow-xl: 0px 20px 24px -4px rgba(0, 0, 0, 0.5), 0px 8px 8px -4px rgba(0, 0, 0, 0.2);
}



/* ===================================================================
   SECTION 3: TAILWIND CONFIGURATION
   =================================================================== */

/* ===================================================================
   KEYWORDS LIBRARY - SECTOR CARDS
   =================================================================== */

.keywords-library-sector-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

@media (min-width: 1024px) {
  .keywords-library-sector-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
}

.keywords-library-sector-card {
  padding: 16px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-stroke);
  background: var(--color-panel);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.keywords-library-sector-card:hover {
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-stroke));
  transform: translateY(-1px);
}

.keywords-library-sector-card.is-active {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 18%, transparent), var(--shadow-md);
}

.keywords-library-sector-card .sector-card-accent {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--gradient-primary);
  opacity: 0.9;
}

.keywords-library-sector-card .sector-card-active-dot {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent);
}

.keywords-library-sector-card .sector-stats-pill {
  border-radius: var(--radius-lg);
  background: var(--color-panel-alt);
  border: 1px solid var(--color-stroke);
  padding: 8px;
}

.keywords-library-sector-card .sector-stats-pill .label {
  color: var(--color-text-dim);
  font-size: 12px;
}

.keywords-library-sector-card .sector-stats-pill .value {
  color: var(--color-text);
  font-weight: 600;
  font-size: 14px;
}

/*
   🚫 TAILWIND DEFAULT COLORS ARE DISABLED
   
   Only these color palettes are available:
   - brand-*    (primary blue)
   - gray-*     (neutrals)
   - success-*  (green)
   - error-*    (red)
   - warning-*  (amber)
   - info-*     (info/accent)
   
   ❌ These will NOT work: blue-*, red-*, green-*, emerald-*, 
      amber-*, indigo-*, pink-*, rose-*, sky-*, teal-*, etc.
*/

@custom-variant dark (&:is(.dark *));

@theme {
  /* -----------------------------------------------------------------
     DISABLE ALL TAILWIND DEFAULT COLOR PALETTES
     This forces use of design system colors only
     ----------------------------------------------------------------- */
  --color-red-*: initial;
  --color-orange-*: initial;
  --color-amber-*: initial;
  --color-yellow-*: initial;
  --color-lime-*: initial;
  --color-green-*: initial;
  --color-emerald-*: initial;
  --color-teal-*: initial;
  --color-cyan-*: initial;
  --color-sky-*: initial;
  --color-blue-*: initial;
  --color-indigo-*: initial;
  --color-violet-*: initial;
  --color-fuchsia-*: initial;
  --color-pink-*: initial;
  --color-rose-*: initial;
  --color-slate-*: initial;
  --color-zinc-*: initial;
  --color-neutral-*: initial;
  --color-stone-*: initial;

  /* -----------------------------------------------------------------
     BORDER RADIUS (Override Tailwind defaults)
     ----------------------------------------------------------------- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 10px;
  --radius-2xl: 12px;
  --radius-3xl: 16px;
  --radius-4xl: 20px;

  /* -----------------------------------------------------------------
     FONTS
     ----------------------------------------------------------------- */
  --font-outfit: Outfit, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* -----------------------------------------------------------------
     BREAKPOINTS
     ----------------------------------------------------------------- */
  --breakpoint-2xsm: 375px;
  --breakpoint-xsm: 425px;
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
  --breakpoint-3xl: 2000px;

  /* -----------------------------------------------------------------
     TYPOGRAPHY
     ----------------------------------------------------------------- */
  --text-title-2xl: 72px;
  --text-title-2xl--line-height: 90px;
  --text-title-xl: 60px;
  --text-title-xl--line-height: 72px;
  --text-title-lg: 48px;
  --text-title-lg--line-height: 60px;
  --text-title-md: 36px;
  --text-title-md--line-height: 44px;
  --text-title-sm: 30px;
  --text-title-sm--line-height: 38px;
  --text-theme-xl: 20px;
  --text-theme-xl--line-height: 30px;
  --text-theme-sm: 14px;
  --text-theme-sm--line-height: 20px;
  --text-theme-xs: 12px;
  --text-theme-xs--line-height: 18px;

  /* -----------------------------------------------------------------
     BASE COLORS
     ----------------------------------------------------------------- */
  --color-current: currentColor;
  --color-transparent: transparent;
  --color-white: #ffffff;
  --color-black: color-mix(in srgb, var(--color-gray-base) 15%, black);

  /* -----------------------------------------------------------------
     BRAND COLOR SCALE (ALL derived from --color-primary)
     ----------------------------------------------------------------- */
  --color-brand-25: color-mix(in srgb, var(--color-primary) 3%, white);
  --color-brand-50: color-mix(in srgb, var(--color-primary) 8%, white);
  --color-brand-100: color-mix(in srgb, var(--color-primary) 15%, white);
  --color-brand-200: color-mix(in srgb, var(--color-primary) 25%, white);
  --color-brand-300: color-mix(in srgb, var(--color-primary) 40%, white);
  --color-brand-400: color-mix(in srgb, var(--color-primary) 60%, white);
  --color-brand-500: var(--color-primary);
  --color-brand-600: color-mix(in srgb, var(--color-primary) 85%, black);
  --color-brand-700: color-mix(in srgb, var(--color-primary) 70%, black);
  --color-brand-800: color-mix(in srgb, var(--color-primary) 55%, black);
  --color-brand-900: color-mix(in srgb, var(--color-primary) 40%, black);
  --color-brand-950: color-mix(in srgb, var(--color-primary) 25%, black);

  /* -----------------------------------------------------------------
     GRAY SCALE (ALL derived from --color-gray-base)
     ----------------------------------------------------------------- */
  --color-gray-25: color-mix(in srgb, var(--color-gray-base) 2%, white);
  --color-gray-50: color-mix(in srgb, var(--color-gray-base) 4%, white);
  --color-gray-100: color-mix(in srgb, var(--color-gray-base) 8%, white);
  --color-gray-200: color-mix(in srgb, var(--color-gray-base) 15%, white);
  --color-gray-300: color-mix(in srgb, var(--color-gray-base) 25%, white);
  --color-gray-400: color-mix(in srgb, var(--color-gray-base) 50%, white);
  --color-gray-500: var(--color-gray-base);
  --color-gray-600: color-mix(in srgb, var(--color-gray-base) 85%, black);
  --color-gray-700: color-mix(in srgb, var(--color-gray-base) 70%, black);
  --color-gray-800: color-mix(in srgb, var(--color-gray-base) 55%, black);
  --color-gray-900: color-mix(in srgb, var(--color-gray-base) 40%, black);
  --color-gray-950: color-mix(in srgb, var(--color-gray-base) 25%, black);
  --color-gray-dark: color-mix(in srgb, var(--color-gray-base) 30%, black);

  /* -----------------------------------------------------------------
     SUCCESS SCALE (ALL derived from --color-success)
     ----------------------------------------------------------------- */
  --color-success-25: color-mix(in srgb, var(--color-success) 2%, white);
  --color-success-50: color-mix(in srgb, var(--color-success) 6%, white);
  --color-success-100: color-mix(in srgb, var(--color-success) 15%, white);
  --color-success-200: color-mix(in srgb, var(--color-success) 30%, white);
  --color-success-300: color-mix(in srgb, var(--color-success) 50%, white);
  --color-success-400: color-mix(in srgb, var(--color-success) 75%, white);
  --color-success-500: var(--color-success);
  --color-success-600: color-mix(in srgb, var(--color-success) 85%, black);
  --color-success-700: color-mix(in srgb, var(--color-success) 70%, black);
  --color-success-800: color-mix(in srgb, var(--color-success) 55%, black);
  --color-success-900: color-mix(in srgb, var(--color-success) 40%, black);
  --color-success-950: color-mix(in srgb, var(--color-success) 25%, black);

  /* -----------------------------------------------------------------
     ERROR SCALE (ALL derived from --color-danger)
     ----------------------------------------------------------------- */
  --color-error-25: color-mix(in srgb, var(--color-danger) 2%, white);
  --color-error-50: color-mix(in srgb, var(--color-danger) 5%, white);
  --color-error-100: color-mix(in srgb, var(--color-danger) 10%, white);
  --color-error-200: color-mix(in srgb, var(--color-danger) 20%, white);
  --color-error-300: color-mix(in srgb, var(--color-danger) 40%, white);
  --color-error-400: color-mix(in srgb, var(--color-danger) 65%, white);
  --color-error-500: var(--color-danger);
  --color-error-600: color-mix(in srgb, var(--color-danger) 85%, black);
  --color-error-700: color-mix(in srgb, var(--color-danger) 70%, black);
  --color-error-800: color-mix(in srgb, var(--color-danger) 55%, black);
  --color-error-900: color-mix(in srgb, var(--color-danger) 40%, black);
  --color-error-950: color-mix(in srgb, var(--color-danger) 25%, black);

  /* -----------------------------------------------------------------
     WARNING SCALE (ALL derived from --color-warning)
     ----------------------------------------------------------------- */
  --color-warning-25: color-mix(in srgb, var(--color-warning) 2%, white);
  --color-warning-50: color-mix(in srgb, var(--color-warning) 4%, white);
  --color-warning-100: color-mix(in srgb, var(--color-warning) 10%, white);
  --color-warning-200: color-mix(in srgb, var(--color-warning) 20%, white);
  --color-warning-300: color-mix(in srgb, var(--color-warning) 40%, white);
  --color-warning-400: color-mix(in srgb, var(--color-warning) 65%, white);
  --color-warning-500: var(--color-warning);
  --color-warning-600: color-mix(in srgb, var(--color-warning) 85%, black);
  --color-warning-700: color-mix(in srgb, var(--color-warning) 70%, black);
  --color-warning-800: color-mix(in srgb, var(--color-warning) 55%, black);
  --color-warning-900: color-mix(in srgb, var(--color-warning) 40%, black);
  --color-warning-950: color-mix(in srgb, var(--color-warning) 25%, black);

  /* -----------------------------------------------------------------
     INFO SCALE (ALL derived from --color-info)
     ----------------------------------------------------------------- */
  --color-info-25: color-mix(in srgb, var(--color-info) 2%, white);
  --color-info-50: color-mix(in srgb, var(--color-info) 8%, white);
  --color-info-100: color-mix(in srgb, var(--color-info) 15%, white);
  --color-info-200: color-mix(in srgb, var(--color-info) 25%, white);
  --color-info-300: color-mix(in srgb, var(--color-info) 40%, white);
  --color-info-400: color-mix(in srgb, var(--color-info) 60%, white);
  --color-info-500: var(--color-info);
  --color-info-600: color-mix(in srgb, var(--color-info) 85%, black);
  --color-info-700: color-mix(in srgb, var(--color-info) 70%, black);
  --color-info-800: color-mix(in srgb, var(--color-info) 55%, black);
  --color-info-900: color-mix(in srgb, var(--color-info) 40%, black);
  --color-info-950: color-mix(in srgb, var(--color-info) 25%, black);

  /* -----------------------------------------------------------------
     INFO/BLUE-LIGHT SCALE (derived from --color-primary for consistency)
     ----------------------------------------------------------------- */
  --color-blue-light-25: color-mix(in srgb, var(--color-primary) 2%, white);
  --color-blue-light-50: color-mix(in srgb, var(--color-primary) 5%, white);
  --color-blue-light-100: color-mix(in srgb, var(--color-primary) 12%, white);
  --color-blue-light-200: color-mix(in srgb, var(--color-primary) 25%, white);
  --color-blue-light-300: color-mix(in srgb, var(--color-primary) 45%, white);
  --color-blue-light-400: color-mix(in srgb, var(--color-primary) 70%, white);
  --color-blue-light-500: color-mix(in srgb, var(--color-primary) 90%, white);
  --color-blue-light-600: var(--color-primary);
  --color-blue-light-700: color-mix(in srgb, var(--color-primary) 85%, black);

  /* -----------------------------------------------------------------
     SHADOWS (Tailwind integration)
     ----------------------------------------------------------------- */
  --shadow-theme-xs: var(--shadow-xs);
  --shadow-theme-sm: var(--shadow-sm);
  --shadow-theme-md: var(--shadow-md);
  --shadow-theme-lg: var(--shadow-lg);
  --shadow-theme-xl: var(--shadow-xl);
  --drop-shadow-4xl: 0 35px 35px rgba(0, 0, 0, 0.25), 0 45px 65px rgba(0, 0, 0, 0.15);

  /* -----------------------------------------------------------------
     Z-INDEX
     ----------------------------------------------------------------- */
  --z-index-1: 1;
  --z-index-9: 9;
  --z-index-99: 99;
  --z-index-999: 999;
  --z-index-9999: 9999;
  --z-index-99999: 99999;
  --z-index-999999: 999999;
}


/* ===================================================================
   SECTION 4: BASE STYLES
   =================================================================== */

@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentColor);
  }
  
  button:not(:disabled),
  [role="button"]:not(:disabled) {
    cursor: pointer;
  }
  
  body {
    @apply relative font-normal font-outfit z-1 bg-gray-50;
  }
  
  /* Hide date/time picker arrows */
  input[type="date"]::-webkit-inner-spin-button,
  input[type="time"]::-webkit-inner-spin-button,
  input[type="date"]::-webkit-calendar-picker-indicator,
  input[type="time"]::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
  }
}


/* ===================================================================
   SECTION 5: COMPONENT UTILITIES
   =================================================================== */

/* -----------------------------------------------------------------
   5.1 MENU ITEMS (Sidebar Navigation)
   ----------------------------------------------------------------- */

@utility menu-item {
  @apply relative flex items-center w-full gap-3 px-3 font-medium rounded-lg text-theme-sm;
  padding-top: 7px;
  padding-bottom: 7px;
}

@utility menu-item-active {
  @apply bg-brand-50 text-brand-600 dark:bg-brand-500/[0.18] dark:text-brand-300;
}

@utility menu-item-inactive {
  @apply text-gray-600 hover:bg-gray-100 group-hover:text-gray-800 dark:text-gray-300 dark:hover:bg-gray-800/70 dark:hover:text-white/90;
}

@utility menu-item-icon-size {
  @apply w-5 h-5 flex-shrink-0;
  & svg { width: 100%; height: 100%; }
}

@utility menu-item-icon-active {
  @apply text-brand-600 dark:text-brand-300;
}

@utility menu-item-icon-inactive {
  @apply text-gray-400 group-hover:text-gray-700 dark:text-gray-300 dark:group-hover:text-white/90;
}

/* -----------------------------------------------------------------
   5.2 DROPDOWN MENU ITEMS
   ----------------------------------------------------------------- */

@utility menu-dropdown-item {
  @apply block px-3 py-1.5 text-theme-sm font-medium rounded-md transition-colors;
}

@utility menu-dropdown-item-active {
  @apply text-brand-600 bg-brand-50 dark:text-brand-300 dark:bg-brand-500/[0.14];
}

@utility menu-dropdown-item-inactive {
  @apply text-gray-600 hover:text-gray-900 hover:bg-gray-50 dark:text-gray-300 dark:hover:text-white/90 dark:hover:bg-gray-800/70;
}

@utility menu-dropdown-badge {
  @apply px-1.5 py-0.5 text-xs font-medium rounded;
}

@utility menu-dropdown-badge-active {
  @apply bg-brand-100 text-brand-700 dark:bg-brand-500/[0.18] dark:text-brand-300;
}

@utility menu-dropdown-badge-inactive {
  @apply bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-300;
}


/* ===================================================================
   SECTION 6: FORM ELEMENT STYLES
   =================================================================== */

/* Styled Select/Dropdown with custom chevron - for native <select> elements */
select.igny8-select-styled {
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23647085' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  padding-right: 36px !important;
  border: 1px solid var(--color-stroke) !important;
  background-color: var(--color-panel) !important;
  color: var(--color-text) !important;
}

.dark select.igny8-select-styled {
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%2398A2B3' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-color: var(--color-panel) !important;
  border-color: var(--color-stroke) !important;
  color: var(--color-text) !important;
}

/* For button-based selects (SelectDropdown), icon is rendered by component */
button.igny8-select-styled {
  /* No background-image - ChevronDownIcon is rendered inside the component */
  border: 1px solid var(--color-stroke);
  background-color: var(--color-panel);
  color: var(--color-text);
}

.dark button.igny8-select-styled {
  border-color: var(--color-stroke);
  background-color: var(--color-panel);
  color: var(--color-text);
}

/* Global form surface refinement */
input:not([type="checkbox"]):not([type="radio"]),
textarea,
select {
  border-color: var(--color-stroke);
  background-color: var(--color-panel);
  color: var(--color-text);
}

.dark input:not([type="checkbox"]):not([type="radio"]),
.dark textarea,
.dark select {
  border-color: var(--color-stroke);
  background-color: var(--color-panel);
  color: var(--color-text);
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent);
}

/* Dark mode surface boosts for cards and panels */
.dark .dark\:bg-white\/\[0\.03\] {
  background-color: color-mix(in srgb, var(--color-panel) 92%, transparent) !important;
}

.dark .dark\:bg-white\/\[0\.04\] {
  background-color: color-mix(in srgb, var(--color-panel) 95%, transparent) !important;
}

.dark .dark\:bg-white\/\[0\.08\] {
  background-color: color-mix(in srgb, var(--color-panel) 88%, transparent) !important;
}

.dark .dark\:bg-gray-800\/50,
.dark .dark\:bg-gray-800\/40,
.dark .dark\:bg-gray-800\/30,
.dark .dark\:bg-gray-900\/50 {
  background-color: color-mix(in srgb, var(--color-panel) 75%, transparent) !important;
}

.dark .dark\:border-gray-800,
.dark .dark\:border-gray-700,
.dark .dark\:border-white\/10,
.dark .dark\:border-white\/\[0\.08\],
.dark .dark\:border-white\/\[0\.04\] {
  border-color: var(--color-stroke) !important;
}

/* Sidebar boundary clarity */
.dark aside.border-r {
  border-right-color: var(--color-stroke) !important;
  box-shadow: inset -1px 0 0 color-mix(in srgb, var(--color-gray-base) 55%, black);
}

/* Checkbox styling */
.tableCheckbox:checked ~ span span { @apply opacity-100; }
.tableCheckbox:checked ~ span { @apply border-brand-500 bg-brand-500; }


/* ===================================================================
   SECTION 7: TABLE STYLES
   =================================================================== */

/* Global Table Font Size */
.igny8-table-compact th,
.igny8-table-compact td {
  font-size: 13px !important;
}

/* Compact Table Headers */
.igny8-table-compact th {
  padding: 8px 12px !important;
  font-weight: 500 !important;
  color: var(--color-text-dim) !important;
  text-align: left !important;
  background-color: var(--color-surface) !important;
  border-bottom: 1px solid var(--color-stroke) !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.4 !important;
}

.dark .igny8-table-compact th {
  color: var(--color-text-dim) !important;
  background-color: var(--color-panel-alt) !important;
  border-bottom-color: var(--color-stroke) !important;
}

.igny8-table-compact td {
  padding: 8px !important;
  line-height: 1.4 !important;
  border-bottom: 1px solid var(--color-stroke) !important;
}

.dark .igny8-table-compact td {
  border-bottom-color: var(--color-stroke) !important;
}

/* Table row hover (subtle) */
.igny8-table-compact tbody tr:hover td {
  background-color: color-mix(in srgb, var(--color-primary) 4%, transparent);
}

.dark .igny8-table-compact tbody tr:hover td {
  background-color: color-mix(in srgb, var(--color-primary) 8%, transparent);
}

.igny8-table-compact th.text-center,
.igny8-table-compact td.text-center {
  text-align: center !important;
}

/* Smooth Table Height Transitions */
.igny8-table-container {
  min-height: 500px;
  transition: min-height 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  will-change: min-height;
}

.igny8-table-container.loading {
  min-height: 500px;
  overflow: hidden !important;
  contain: layout style paint;
}

.igny8-table-container.loaded {
  min-height: auto;
  overflow: visible;
  transition: min-height 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  animation: fadeInContainer 0.3s ease-out;
}

.igny8-table-wrapper {
  width: 100%;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.3) transparent;
  transition: opacity 0.4s ease-in-out;
  contain: layout;
}

.igny8-table-smooth {
  width: 100%;
  table-layout: fixed;
  min-width: 100%;
  transition: opacity 0.5s ease-in-out;
  contain: layout;
}

.igny8-table-body {
  position: relative;
  min-height: 450px;
  transition: min-height 0.8s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease-in-out;
  contain: layout;
}

.igny8-data-row {
  animation: fadeInRow 0.6s ease-out forwards;
  opacity: 0;
  transform: translateY(8px);
}

.igny8-skeleton-row {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  display: table-row !important;
}


/* ===================================================================
   SECTION 8: HEADER METRICS BAR
   =================================================================== */

.igny8-header-metrics {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: transparent;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}

.dark .igny8-header-metrics {
  background: transparent;
  box-shadow: var(--shadow-sm);
}

.igny8-header-metric {
  display: flex;
  align-items: center;
  gap: 8px;
}

.igny8-header-metric-separator {
  width: 1px;
  height: 16px;
  background: var(--color-stroke);
  opacity: 0.4;
}

.dark .igny8-header-metric-separator {
  background: var(--color-stroke);
  opacity: 0.3;
}

.igny8-header-metric-label {
  font-size: 13px;
  font-weight: 500;
  text-transform: capitalize;
  letter-spacing: 0.3px;
  color: var(--color-text-dim);
}

.dark .igny8-header-metric-label {
  color: var(--color-text-dim);
}

.igny8-header-metric-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
  margin-left: 4px;
}

.igny8-header-metric-value-credits {
  font-size: 13px;
}

.dark .igny8-header-metric-value {
  color: var(--color-text);
}

.igny8-header-metric-accent {
  width: 4px;
  height: 20px;
  border-radius: 5px;
}

.igny8-header-metric-accent.blue { background: var(--color-primary); }
.igny8-header-metric-accent.green { background: var(--color-success); }
.igny8-header-metric-accent.amber { background: var(--color-warning); }
.igny8-header-metric-accent.purple { background: var(--color-info); }


/* ===================================================================
   SECTION 9: BADGE SPECIAL STYLES
   =================================================================== */

.difficulty-badge {
  border-radius: 3px !important;
  min-width: 28px !important;
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.difficulty-badge.difficulty-very-hard {
  background-color: var(--color-error-600) !important;
  color: white !important;
}

.dark .difficulty-badge.difficulty-very-hard {
  background-color: var(--color-error-600) !important;
  color: white !important;
}


/* ===================================================================
   SECTION 10: CHART LIBRARY OVERRIDES (ApexCharts)
   =================================================================== */

.apexcharts-legend-text { @apply !text-gray-700 dark:!text-gray-400; }
.apexcharts-text { @apply !fill-gray-700 dark:!fill-gray-400; }
.apexcharts-tooltip.apexcharts-theme-light { @apply gap-1 !rounded-lg !border-gray-200 p-3 !shadow-theme-sm dark:!border-gray-800 dark:!bg-gray-900; }
.apexcharts-tooltip-marker { margin-right: 6px; height: 6px; width: 6px; }
.apexcharts-legend-text { @apply !pl-5 !text-gray-700 dark:!text-gray-400; }
.apexcharts-tooltip-series-group { @apply !p-0; }
.apexcharts-tooltip-y-group { @apply !p-0; }
.apexcharts-tooltip-title { @apply !mb-0 !border-b-0 !bg-transparent !p-0 !text-[10px] !leading-4 !text-gray-800 dark:!text-white/90; }
.apexcharts-tooltip-text { @apply !text-theme-xs !text-gray-700 dark:!text-white/90; }
.apexcharts-tooltip-text-y-value { @apply !font-medium; }
.apexcharts-gridline { @apply !stroke-gray-100 dark:!stroke-gray-800; }
#chartTwo .apexcharts-datalabels-group { @apply !-translate-y-24; }
#chartTwo .apexcharts-datalabels-group .apexcharts-text { @apply !fill-gray-800 !font-semibold dark:!fill-white/90; }
#chartDarkStyle .apexcharts-datalabels-group .apexcharts-text { @apply !fill-gray-800 !font-semibold dark:!fill-white/90; }
#chartSixteen .apexcharts-legend { @apply !p-0 !pl-6; }


/* ===================================================================
   SECTION 11: MAP LIBRARY OVERRIDES (jVectorMap)
   =================================================================== */

.jvectormap-container { @apply !bg-gray-50 dark:!bg-gray-900; }
.jvectormap-region.jvectormap-element { @apply !fill-gray-300 hover:!fill-brand-500 dark:!fill-gray-700 dark:hover:!fill-brand-500; }
.jvectormap-marker.jvectormap-element { @apply !stroke-gray-200 dark:!stroke-gray-800; }
.jvectormap-tip { @apply !bg-brand-500 !border-none !px-2 !py-1; }
.jvectormap-zoomin, .jvectormap-zoomout { @apply !bg-brand-500; }


/* ===================================================================
   SECTION 12: UTILITY CLASSES
   =================================================================== */

/* Task dividers */
.task-item + .task-item { @apply !border-t-gray-200 dark:!border-t-gray-700; }

/* Date picker custom styling */
.custom-input-date input::-webkit-calendar-picker-indicator { 
  background-position: center; 
  background-repeat: no-repeat; 
  background-size: 20px; 
  cursor: pointer; 
}

/* Scrollbar hiding */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Chat/Inbox heights */
.chat-height { height: calc(100vh - 8.125rem); }
.inbox-height { height: calc(100vh - 8.125rem); }

/* Filter bar */
.igny8-filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
}


/* ===================================================================
   SECTION 13: ANIMATIONS
   =================================================================== */

@keyframes slide-in-right {
  from { opacity: 0; transform: translateX(100%); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInContainer {
  from { opacity: 0.95; }
  to { opacity: 1; }
}

@keyframes fadeInRow {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes showScrollbar {
  from { scrollbar-width: none; }
  to { scrollbar-width: thin; }
}

.animate-slide-in-right {
  animation: slide-in-right 0.3s ease-out;
}


/* ===================================================================
   END OF DESIGN SYSTEM
   =================================================================== */