/* ═══════════════════════════════════════════════════════════════════════════════════════════
   ╔═════════════════════════════════════════════════════════════════════════════════════════╗
   ║                           🎯 CSS LAYER ORDERING                                         ║ (Tier 4 — Modern APIs)
   ║              Tailwind v4 Cascade Layer Architecture                                      ║
   ╚═════════════════════════════════════════════════════════════════════════════════════════╝
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
@layer theme, reset, base, layout, components, transitions, utilities, animations;

/* 🔷 @property — typed custom properties (must be outside @layer) */
@property --hue-primary { syntax: "<number>"; inherits: true; initial-value: 45; }
@property --color-progress { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
@property --color-alpha { syntax: "<number>"; inherits: false; initial-value: 1; }
/* 🔷 @property for toast/notification slide-in animation */
@property --slide-offset { syntax: "<length>"; inherits: false; initial-value: 0px; }
/* 🔷 @property for progress ring rotation */
@property --angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
/* 🔷 @property for skeleton loading shimmer */
@property --shimmer-x { syntax: "<percentage>"; inherits: false; initial-value: -100%; }
/* 🔷 @property for scroll progress bar */
@property --scroll-progress { syntax: "<number>"; inherits: true; initial-value: 0; }
/* 🔷 @property for backdrop opacity animation */
@property --overlay-opacity { syntax: "<number>"; inherits: false; initial-value: 0; }

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   ╔═════════════════════════════════════════════════════════════════════════════════════════╗
   ║                           🎨 THEME LAYER                                                ║
   ║              Design Tokens + OKLCH Color System + Fluid Scales                          ║
   ╚═════════════════════════════════════════════════════════════════════════════════════════╝
   
   🔷 INTRINSIC WEB DESIGN PRINCIPLES APPLIED:
   - All sizes use clamp() for fluid, content-aware scaling
   - No fixed breakpoints in tokens - let content decide
   - Perceptually uniform colors with OKLCH
   - Dynamic shadows using relative color syntax
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
@layer theme {
    :root {
        /* ════════════════════════════════════════════════════════════════════════════════════
           🎨 COLOR SYSTEM - OKLCH (Perceptual Uniformity)
           Format: oklch(Lightness Chroma Hue)
           - L: 0-1 (0=black, 1=white)
           - C: 0-0.4 (color intensity)  
           - H: 0-360 (hue angle)
           ════════════════════════════════════════════════════════════════════════════════════ */
        
        /* Primary Palette - Orange/Amber */
        --hue-primary: 45;
        --color-primary-50: oklch(0.98 0.02 var(--hue-primary));
        --color-primary-100: oklch(0.95 0.05 var(--hue-primary));
        --color-primary-200: oklch(0.90 0.10 var(--hue-primary));
        --color-primary-300: oklch(0.82 0.14 var(--hue-primary));
        --color-primary-400: oklch(0.75 0.17 var(--hue-primary));
        --color-primary-500: oklch(0.70 0.18 var(--hue-primary));
        --color-primary-600: oklch(0.62 0.20 var(--hue-primary));
        --color-primary-700: oklch(0.55 0.18 var(--hue-primary));
        --color-primary-800: oklch(0.45 0.15 var(--hue-primary));
        --color-primary-900: oklch(0.35 0.12 var(--hue-primary));
        
        /* Semantic Color Aliases */
        --color-primary: var(--color-primary-500);
        --color-primary-subtle: var(--color-primary-100);
        --color-primary-muted: var(--color-primary-200);

        /* 🔷 Relative Color Syntax — interactive variants derived from base (Baseline 2025) */
        --color-primary-hover: oklch(from var(--color-primary) calc(l - 0.08) c h);
        --color-primary-active: oklch(from var(--color-primary) calc(l - 0.15) c h);
        
        /* Neutral Surface Colors - Light Theme */
        --color-bg-base: oklch(0.985 0.002 250);
        --color-bg-surface: oklch(1.00 0 0);
        --color-bg-elevated: oklch(1.00 0 0);
        --color-bg-subtle: oklch(0.97 0.003 250);
        --color-bg-muted: oklch(0.94 0.005 250);
        --color-bg-hover: oklch(0.92 0.005 250);
        --color-bg-active: oklch(0.89 0.008 250);
        --color-bg-overlay: oklch(0.20 0.02 250 / 0.5);
        
        /* Text Colors - WCAG AA Compliant */
        --color-text: oklch(0.15 0.01 250);
        --color-text-secondary: oklch(0.40 0.01 250);
        --color-text-muted: oklch(0.55 0.01 250);
        --color-text-disabled: oklch(0.70 0.005 250);
        --color-text-inverse: oklch(1.00 0 0);
        --color-text-link: var(--color-primary-600);
        
        /* Border Colors */
        --color-border: oklch(0.90 0.005 250);
        --color-border-subtle: oklch(0.94 0.002 250);
        --color-border-strong: oklch(0.85 0.01 250);
        --color-border-focus: var(--color-primary);
        
        /* Status Colors */
        --color-success: oklch(0.72 0.17 145);
        --color-success-subtle: oklch(0.96 0.04 145);
        --color-warning: oklch(0.80 0.15 85);
        --color-warning-subtle: oklch(0.97 0.04 85);
        --color-error: oklch(0.65 0.22 25);
        --color-error-subtle: oklch(0.96 0.04 25);
        --color-info: oklch(0.70 0.16 230);
        --color-info-subtle: oklch(0.96 0.04 230);

        /* ════════════════════════════════════════════════════════════════════════════════════
           📏 FLUID TYPOGRAPHY - Intrinsic Sizing
           
           Formula: clamp(min, preferred, max)
           - min: minimum size (mobile)
           - preferred: fluid calculation (viewport-relative)
           - max: maximum size (desktop)
           
           🔷 This IS Intrinsic Web Design - sizes adapt to viewport naturally
           ════════════════════════════════════════════════════════════════════════════════════ */
        --text-2xs: clamp(0.625rem, 0.6rem + 0.1vw, 0.6875rem);     /* 10-11px */
        --text-xs: clamp(0.6875rem, 0.65rem + 0.15vw, 0.75rem);     /* 11-12px */
        --text-sm: clamp(0.8125rem, 0.775rem + 0.15vw, 0.875rem);   /* 13-14px */
        --text-base: clamp(0.9375rem, 0.9rem + 0.15vw, 1rem);       /* 15-16px */
        --text-lg: clamp(1.0625rem, 1rem + 0.25vw, 1.125rem);       /* 17-18px */
        --text-xl: clamp(1.1875rem, 1.1rem + 0.35vw, 1.25rem);      /* 19-20px */
        --text-2xl: clamp(1.375rem, 1.25rem + 0.5vw, 1.5rem);       /* 22-24px */
        --text-3xl: clamp(1.75rem, 1.5rem + 1vw, 2rem);             /* 28-32px */
        --text-4xl: clamp(2rem, 1.75rem + 1.5vw, 2.5rem);           /* 32-40px */
        --text-5xl: clamp(2.5rem, 2rem + 2vw, 3rem);                /* 40-48px */

        /* ════════════════════════════════════════════════════════════════════════════════════
           📐 FLUID SPACING - Content-Aware Gaps
           
           🔷 Intrinsic Design: spacing scales with viewport, no breakpoints needed
           ════════════════════════════════════════════════════════════════════════════════════ */
        --space-px: 1px;
        --space-0: 0;
        --space-0-5: clamp(0.0625rem, 0.05rem + 0.05vw, 0.125rem);  /* 1-2px */
        --space-1: clamp(0.1875rem, 0.15rem + 0.15vw, 0.25rem);     /* 3-4px */
        --space-1-5: clamp(0.3125rem, 0.28rem + 0.13vw, 0.375rem);  /* 5-6px */
        --space-2: clamp(0.375rem, 0.35rem + 0.1vw, 0.5rem);        /* 6-8px */
        --space-2-5: clamp(0.5rem, 0.45rem + 0.2vw, 0.625rem);      /* 8-10px */
        --space-3: clamp(0.625rem, 0.55rem + 0.3vw, 0.75rem);       /* 10-12px */
        --space-3-5: clamp(0.75rem, 0.68rem + 0.28vw, 0.875rem);    /* 12-14px */
        --space-4: clamp(0.875rem, 0.8rem + 0.3vw, 1rem);           /* 14-16px */
        --space-5: clamp(1.0625rem, 0.95rem + 0.45vw, 1.25rem);     /* 17-20px */
        --space-6: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);          /* 20-24px */
        --space-7: clamp(1.5rem, 1.3rem + 0.8vw, 1.75rem);          /* 24-28px */
        --space-8: clamp(1.75rem, 1.5rem + 1vw, 2rem);              /* 28-32px */
        --space-10: clamp(2.25rem, 1.9rem + 1.4vw, 2.5rem);         /* 36-40px */
        --space-12: clamp(2.75rem, 2.3rem + 1.8vw, 3rem);           /* 44-48px */
        --space-16: clamp(3.75rem, 3.1rem + 2.6vw, 4rem);           /* 60-64px */
        --space-20: clamp(4.5rem, 3.8rem + 3vw, 5rem);              /* 72-80px */

        /* ════════════════════════════════════════════════════════════════════════════════════
           🏗️ LAYOUT DIMENSIONS
           
           🔷 Using min() and max() for intrinsic constraints
           ════════════════════════════════════════════════════════════════════════════════════ */
        --header-height: clamp(56px, 8vw, 64px);
        --sidebar-expanded: clamp(220px, 20vw, 280px);
        --sidebar-collapsed: clamp(60px, 6vw, 72px);
        --content-max: min(100%, 1400px);
        --modal-max: min(calc(100% - var(--space-8)), 600px);
        --card-min: min(100%, 280px);
        --card-max: 1fr;

        /* ════════════════════════════════════════════════════════════════════════════════════
           🔤 TYPOGRAPHY SYSTEM
           ════════════════════════════════════════════════════════════════════════════════════ */
        --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
        --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
        
        --leading-none: 1;
        --leading-tight: 1.25;
        --leading-snug: 1.375;
        --leading-normal: 1.5;
        --leading-relaxed: 1.625;
        --leading-loose: 2;
        
        --tracking-tighter: -0.05em;
        --tracking-tight: -0.025em;
        --tracking-normal: 0;
        --tracking-wide: 0.025em;
        --tracking-wider: 0.05em;

        /* ════════════════════════════════════════════════════════════════════════════════════
           🔘 BORDER RADIUS - Fluid
           ════════════════════════════════════════════════════════════════════════════════════ */
        --radius-sm: clamp(4px, 0.4vw, 6px);
        --radius-md: clamp(6px, 0.6vw, 8px);
        --radius-lg: clamp(8px, 0.8vw, 12px);
        --radius-xl: clamp(12px, 1vw, 16px);
        --radius-2xl: clamp(16px, 1.2vw, 20px);
        --radius-3xl: clamp(20px, 1.5vw, 24px);
        --radius-full: 9999px;

        /* ════════════════════════════════════════════════════════════════════════════════════
           🌑 SHADOWS — 🔷 Relative Color Syntax (oklch alpha channel)
           ════════════════════════════════════════════════════════════════════════════════════ */
        --shadow-color: var(--color-text);
        --shadow-xs: 0 1px 2px oklch(from var(--shadow-color) l c h / 0.04);
        --shadow-sm:
            0 1px 2px oklch(from var(--shadow-color) l c h / 0.04),
            0 1px 3px oklch(from var(--shadow-color) l c h / 0.06);
        --shadow-md:
            0 2px 4px oklch(from var(--shadow-color) l c h / 0.04),
            0 4px 6px oklch(from var(--shadow-color) l c h / 0.06);
        --shadow-lg:
            0 4px 6px oklch(from var(--shadow-color) l c h / 0.04),
            0 10px 15px oklch(from var(--shadow-color) l c h / 0.08);
        --shadow-xl:
            0 8px 10px oklch(from var(--shadow-color) l c h / 0.04),
            0 20px 25px oklch(from var(--shadow-color) l c h / 0.10);
        --shadow-2xl: 0 25px 50px oklch(from var(--shadow-color) l c h / 0.15);
        --shadow-inner: inset 0 2px 4px oklch(from var(--shadow-color) l c h / 0.05);
        --shadow-glow: 0 0 clamp(16px, 2vw, 24px) oklch(from var(--color-primary) l c h / 0.30);

        /* ════════════════════════════════════════════════════════════════════════════════════
           ⏱️ TRANSITIONS & EASING
           ════════════════════════════════════════════════════════════════════════════════════ */
        --ease-linear: linear;
        --ease-in: cubic-bezier(0.4, 0, 1, 1);
        --ease-out: cubic-bezier(0, 0, 0.2, 1);
        --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
        --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
        --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
        --ease-elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6);
        
        --duration-instant: 50ms;
        --duration-fast: 150ms;
        --duration-normal: 250ms;
        --duration-slow: 400ms;
        --duration-slower: 600ms;

        /* ════════════════════════════════════════════════════════════════════════════════════
           📊 Z-INDEX SCALE
           ════════════════════════════════════════════════════════════════════════════════════ */
        --z-below: -1;
        --z-base: 0;
        --z-raised: 1;
        --z-dropdown: 100;
        --z-fixed: 150;
        --z-sticky: 200;
        --z-overlay: 300;
        --z-modal: 400;
        --z-toast: 500;
        --z-tooltip: 600;
        --z-max: 9999;
        
        /* ════════════════════════════════════════════════════════════════════════════════════
           🎯 PIPELINE/WORKFLOW STAGE COLORS
           Reusable across industries (Sales pipeline, Project stages, Order status, etc.)
           ════════════════════════════════════════════════════════════════════════════════════ */
        --color-stage-1: oklch(0.50 0.10 250);      /* Stage 1: New/Lead - Neutral blue-gray */
        --color-stage-1-bg: oklch(0.95 0.02 250);
        --color-stage-2: oklch(0.50 0.18 230);      /* Stage 2: In Progress - Blue */
        --color-stage-2-bg: oklch(0.94 0.04 230);
        --color-stage-3: oklch(0.58 0.18 70);       /* Stage 3: Review/Proposal - Amber */
        --color-stage-3-bg: oklch(0.96 0.05 70);
        --color-stage-4: oklch(0.50 0.20 290);      /* Stage 4: Negotiation/Pending - Purple */
        --color-stage-4-bg: oklch(0.94 0.04 290);
        --color-stage-5: var(--color-success);      /* Stage 5: Success/Won - Green */
        --color-stage-5-bg: var(--color-success-subtle);
        --color-stage-6: var(--color-error);        /* Stage 6: Failed/Lost - Red */
        --color-stage-6-bg: var(--color-error-subtle);
    }

    /* ════════════════════════════════════════════════════════════════════════════════════════
       🌙 DARK THEME — [data-theme="dark"] overrides
       
       🔷 light-dark() CONVENIENCE TOKENS — use these in new components
       instead of duplicating [data-theme="dark"] overrides.
       Requires color-scheme: light dark on the element (set in reset layer).
       ════════════════════════════════════════════════════════════════════════════════════════ */
    [data-theme="dark"] {
        /* 🔷 Sync color-scheme with manual toggle — enables light-dark() tracking */
        color-scheme: dark;
        --color-bg-base: oklch(0.12 0.015 250);
        --color-bg-surface: oklch(0.16 0.015 250);
        --color-bg-elevated: oklch(0.19 0.015 250);
        --color-bg-subtle: oklch(0.22 0.015 250);
        --color-bg-muted: oklch(0.25 0.015 250);
        --color-bg-hover: oklch(0.28 0.015 250);
        --color-bg-active: oklch(0.32 0.015 250);
        --color-bg-overlay: oklch(0.05 0.01 250 / 0.7);
        
        --color-text: oklch(0.96 0.005 250);
        --color-text-secondary: oklch(0.75 0.01 250);
        --color-text-muted: oklch(0.55 0.01 250);
        --color-text-disabled: oklch(0.40 0.005 250);
        
        --color-border: oklch(0.30 0.015 250);
        --color-border-subtle: oklch(0.25 0.012 250);
        --color-border-strong: oklch(0.38 0.018 250);
        
        --color-primary-subtle: oklch(0.25 0.08 var(--hue-primary));
        --color-primary-muted: oklch(0.30 0.10 var(--hue-primary));
        
        --shadow-color: black;
        --shadow-md:
            0 2px 4px oklch(0 0 0 / 0.30),
            0 4px 8px oklch(0 0 0 / 0.40);
        --shadow-lg:
            0 4px 8px oklch(0 0 0 / 0.40),
            0 10px 20px oklch(0 0 0 / 0.50);
        --shadow-xl:
            0 8px 16px oklch(0 0 0 / 0.50),
            0 20px 40px oklch(0 0 0 / 0.60);
    }

    /* 🔷 light-dark() — theme-aware inline tokens (no [data-theme] duplication needed)
       Usage: background: var(--ld-surface);  color: var(--ld-text);
       These work ONLY when color-scheme: light dark is set (see reset layer). */
    :root {
        --ld-surface: light-dark(oklch(1 0 0), oklch(0.16 0.015 250));
        --ld-elevated: light-dark(oklch(1 0 0), oklch(0.19 0.015 250));
        --ld-subtle: light-dark(oklch(0.97 0.003 250), oklch(0.22 0.015 250));
        --ld-hover: light-dark(oklch(0.92 0.005 250), oklch(0.28 0.015 250));
        --ld-text: light-dark(oklch(0.15 0.01 250), oklch(0.96 0.005 250));
        --ld-text-2: light-dark(oklch(0.40 0.01 250), oklch(0.75 0.01 250));
        --ld-text-muted: light-dark(oklch(0.55 0.01 250), oklch(0.55 0.01 250));
        --ld-border: light-dark(oklch(0.90 0.005 250), oklch(0.30 0.015 250));
        --ld-shadow: light-dark(oklch(0.50 0.02 250 / 0.08), oklch(0 0 0 / 0.4));
    }
    
    /* ════════════════════════════════════════════════════════════════════════════════════════
       🔷 SYSTEM DARK MODE FALLBACK — CSS-only, no JS required
       
       Prevents white flash for dark-mode users when JS hasn't loaded yet.
       Only applies when data-theme is NOT explicitly set (JS overrides this).
       ════════════════════════════════════════════════════════════════════════════════════════ */
    @media (prefers-color-scheme: dark) {
        :root:not([data-theme]) {
            --color-bg-base: oklch(0.12 0.015 250);
            --color-bg-surface: oklch(0.16 0.015 250);
            --color-bg-elevated: oklch(0.19 0.015 250);
            --color-bg-subtle: oklch(0.22 0.015 250);
            --color-bg-muted: oklch(0.25 0.015 250);
            --color-bg-hover: oklch(0.28 0.015 250);
            --color-bg-active: oklch(0.32 0.015 250);
            --color-bg-overlay: oklch(0.05 0.01 250 / 0.7);
            
            --color-text: oklch(0.96 0.005 250);
            --color-text-secondary: oklch(0.75 0.01 250);
            --color-text-muted: oklch(0.55 0.01 250);
            --color-text-disabled: oklch(0.40 0.005 250);
            
            --color-border: oklch(0.30 0.015 250);
            --color-border-subtle: oklch(0.25 0.012 250);
            --color-border-strong: oklch(0.38 0.018 250);
            
            --color-primary-subtle: oklch(0.25 0.08 var(--hue-primary));
            --color-primary-muted: oklch(0.30 0.10 var(--hue-primary));
            
            --shadow-color: black;
            --shadow-md:
                0 2px 4px oklch(0 0 0 / 0.30),
                0 4px 8px oklch(0 0 0 / 0.40);
            --shadow-lg:
                0 4px 8px oklch(0 0 0 / 0.40),
                0 10px 20px oklch(0 0 0 / 0.50);
            --shadow-xl:
                0 8px 16px oklch(0 0 0 / 0.50),
                0 20px 40px oklch(0 0 0 / 0.60);
        }
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   ╔═════════════════════════════════════════════════════════════════════════════════════════╗
   ║                           🔧 RESET LAYER                                                ║
   ╚═════════════════════════════════════════════════════════════════════════════════════════╝
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
@layer reset {
    :where(*, *::before, *::after) {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }
    
    :where(html) {
        font-size: 100%;
        scroll-behavior: smooth;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
        hanging-punctuation: first last;
        /* 🔷 color-scheme — opt in to UA dark mode for scrollbars, form controls */
        color-scheme: light dark;
        /* 🔷 accent-color — theme native checkboxes, radios, range, progress */
        accent-color: var(--color-primary);
        /* 🔷 interpolate-size — animate height: auto, width: auto natively */
        interpolate-size: allow-keywords;
    }
    
    :where(body) {
        min-height: 100dvh;
        line-height: var(--leading-normal);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
    }
    
    :where(button, input, select, textarea) {
        font: inherit;
        color: inherit;
        background: transparent;
        border: none;
    }
    
    /* 🔷 field-sizing: content — auto-resize textareas, auto-width selects (Baseline 2024) */
    :where(textarea) { field-sizing: content; min-height: 3lh; max-height: 15lh; }
    :where(select)   { field-sizing: content; }
    
    :where(button) {
        cursor: pointer;
        touch-action: manipulation;
    }
    
    :where(a) { text-decoration: none; color: inherit; }
    :where(ul, ol) { list-style: none; }
    
    :where(img, svg, video, canvas, picture) {
        display: block;
        max-width: 100%;
        height: auto;
    }
    
    :where(table) { border-collapse: collapse; border-spacing: 0; }
    
    /* Focus Styles — keep specificity for :focus-visible */
    :focus-visible {
        outline: 2px solid var(--color-primary);
        outline-offset: 2px;
    }
    
    :focus:not(:focus-visible) { outline: none; }
    
    /* Reduced Motion */
    @media (prefers-reduced-motion: reduce) {
        :where(*, *::before, *::after) {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
            scroll-behavior: auto !important;
            /* 🔷 Reset will-change — no compositing layers needed when animations disabled */
            will-change: auto !important;
        }
    }
}

/* 🔷 prefers-contrast — high contrast mode */
@media (prefers-contrast: more) {
    [class*="__title"], [class*="__heading"] { font-weight: 700; }
    [class*="btn"], [class*="input"], [class*="select"] { border-width: 2px; }
    /* 🔷 Increase focus ring visibility */
    :focus-visible { outline-width: 3px; }
}

/* 🔷 forced-colors — Windows high contrast */
@media (forced-colors: active) {
    [class*="btn"] { border: 1px solid ButtonText; }
    [class*="input"], [class*="select"] { border: 1px solid CanvasText; }
    [class*="card"], [class*="panel"] { border: 1px solid CanvasText; }
}

/* 🔷 prefers-reduced-transparency — reduce translucent overlays (Baseline 2024)
   Users who need solid backgrounds for readability. */
@media (prefers-reduced-transparency: reduce) {
    ::backdrop { backdrop-filter: none !important; background-color: oklch(0.15 0 0 / 95%); }
    [class*="overlay"], [class*="backdrop"] { backdrop-filter: none !important; background-color: oklch(0.15 0 0 / 95%); }
}

/* 🔷 Initial load transition suppression — prevents "double load" visual artifact.
   Applied/removed by Shell.init() — ensures theme/layout setup is instant. */
:where([data-no-transition], [data-no-transition] *, [data-no-transition] *::before, [data-no-transition] *::after) {
    transition-duration: 0s !important;
}

/* 🔷 scripting: none — progressive enhancement for disabled JS (Baseline 2024) */
@media (scripting: none) {
    .app__loading { display: none; }
    body::before {
        content: "Enterprise OS yêu cầu JavaScript để hoạt động.";
        display: block;
        padding: 2rem;
        text-align: center;
        font-size: 1.25rem;
        color: var(--color-text);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   ╔═════════════════════════════════════════════════════════════════════════════════════════╗
   ║                           📐 BASE LAYER                                                 ║
   ╚═════════════════════════════════════════════════════════════════════════════════════════╝
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
@layer base {
    body {
        font-family: var(--font-sans);
        font-size: var(--text-base);
        background-color: var(--color-bg-base);
        color: var(--color-text);
        height: 100dvh;
        overflow: hidden;
    }
    
    ::selection {
        background-color: var(--color-primary);
        color: var(--color-text-inverse);
    }
    
    /* Scrollbar - Webkit */
    ::-webkit-scrollbar {
        width: clamp(6px, 0.5vw, 8px);
        height: clamp(6px, 0.5vw, 8px);
    }
    
    ::-webkit-scrollbar-track { background: transparent; }
    
    ::-webkit-scrollbar-thumb {
        background-color: var(--color-border);
        border-radius: var(--radius-full);
        
        &:hover { background-color: var(--color-text-muted); }
    }
    
    /* Firefox */
    * {
        scrollbar-width: thin;
        scrollbar-color: var(--color-border) transparent;
    }
    
    h1, h2, h3, h4, h5, h6 {
        font-weight: 600;
        line-height: var(--leading-tight);
        text-wrap: balance;
    }
    
    p { text-wrap: pretty; }
    
    /* 🔷 WCAG 2.5.8 — minimum touch target size (24×24px) */
    :where(button, input, [role="button"]):not([hidden]) {
        min-block-size: max(24px, 1lh);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   ╔═════════════════════════════════════════════════════════════════════════════════════════╗
   ║                           🏗️ LAYOUT LAYER                                               ║
   ║                    ⭐ INTRINSIC WEB DESIGN CORE ⭐                                       ║
   ╚═════════════════════════════════════════════════════════════════════════════════════════╝
   
   🔷 KEY INTRINSIC DESIGN TECHNIQUES:
   1. CSS Grid with named areas for semantic layout
   2. auto-fit/auto-fill with minmax() for fluid grids
   3. Container Queries instead of Media Queries
   4. min(), max(), clamp() for intrinsic sizing
   5. fit-content(), min-content, max-content
   6. Logical properties (inline/block) for internationalization
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
@layer layout {
    
    /* ════════════════════════════════════════════════════════════════════════════════════════
       📦 APP SHELL - CSS Grid with Named Template Areas
       ════════════════════════════════════════════════════════════════════════════════════════ */
    .app {
        display: grid;
        height: 100dvh;
        overflow: hidden;
        background-color: var(--color-bg-base);
        
        /* Smooth layout transitions */
        transition: grid-template-columns var(--duration-normal) var(--ease-spring);
    }
    
    /* ════════════════════════════════════════════════════════════════════════════════════════
       🖥️ LAYOUT: EXPANDED
       Sidebar shows full width with labels
       ════════════════════════════════════════════════════════════════════════════════════════ */
    .app[data-layout="expanded"] {
        grid-template-columns: var(--sidebar-expanded) 1fr;
        grid-template-rows: var(--header-height) 1fr;
        grid-template-areas:
            "sidebar header"
            "sidebar main";
    }
    
    /* ════════════════════════════════════════════════════════════════════════════════════════
       📱 LAYOUT: COLLAPSED
       Sidebar shows icons only
       ════════════════════════════════════════════════════════════════════════════════════════ */
    .app[data-layout="collapsed"] {
        grid-template-columns: var(--sidebar-collapsed) 1fr;
        grid-template-rows: var(--header-height) 1fr;
        grid-template-areas:
            "sidebar header"
            "sidebar main";
    }
    
    /* ════════════════════════════════════════════════════════════════════════════════════════
       🔝 LAYOUT: TOPNAV
       No sidebar, navigation in header
       ════════════════════════════════════════════════════════════════════════════════════════ */
    .app[data-layout="topnav"] {
        grid-template-columns: 1fr;
        grid-template-rows: var(--header-height) 1fr;
        grid-template-areas:
            "header"
            "main";
    }
    
    .app[data-layout="topnav"] .sidebar { display: none; }

    /* Header nav only visible in topnav (sidebar hidden) — avoids duplicate nav */
    .app[data-layout="expanded"] .header__center,
    .app[data-layout="collapsed"] .header__center { display: none; }
    
    /* ════════════════════════════════════════════════════════════════════════════════════════
       📑 SIDEBAR
       🔷 Intrinsic: Uses Container Queries for responsive behavior
       ════════════════════════════════════════════════════════════════════════════════════════ */
    .sidebar {
        grid-area: sidebar;
        
        /* 🔷 Container Query context */
        container-type: inline-size;
        container-name: sidebar;
        
        /* 🔷 CSS Containment — isolate sidebar from main content reflows */
        contain: layout style;
        
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
        
        padding: var(--space-5);
        background-color: var(--color-bg-surface);
        border-inline-end: 1px solid var(--color-border);
        
        overflow-x: hidden;
        overflow-y: auto;
        scrollbar-gutter: stable;
        
        position: sticky;
        inset-block-start: 0;
        height: 100dvh;
        z-index: var(--z-sticky);
        
        /* 🔷 will-change — sidebar animates on layout toggle */
        will-change: padding;
        transition: padding var(--duration-normal) var(--ease-in-out);
    }
    
    /* Collapsed sidebar adjustments */
    .app[data-layout="collapsed"] .sidebar {
        padding: var(--space-3);
        align-items: center;
    }
    
    /* 🔷 CONTAINER QUERIES for Sidebar Components
       When sidebar is narrow, components adapt automatically */
    @container sidebar (width < 100px) {
        .brand { justify-content: center; padding-block-end: var(--space-4); }
        .brand__name { opacity: 0; width: 0; overflow: hidden; }
        .nav__text { display: none; }
        .nav__item { justify-content: center; padding: var(--space-3); }
        :is(.industry__info, .industry__arrow) { display: none; }
        .industry { justify-content: center; }
    }
    
    /* ════════════════════════════════════════════════════════════════════════════════════════
       🎯 HEADER
       🔷 Intrinsic: Flexbox with auto margins for flexible spacing
       ════════════════════════════════════════════════════════════════════════════════════════ */
    .header {
        grid-area: header;
        
        /* 🔷 Container Query context */
        container-type: inline-size;
        container-name: header;
        
        /* 🔷 CSS Containment — header is sticky, isolate from main reflows */
        contain: layout style;
        
        display: flex;
        align-items: center;
        gap: var(--space-4);
        
        padding-inline: var(--space-6);
        background-color: var(--color-bg-surface);
        border-block-end: 1px solid var(--color-border);
        
        position: sticky;
        inset-block-start: 0;
        z-index: var(--z-sticky);
    }
    
    .header__start {
        display: flex;
        align-items: center;
        gap: var(--space-3);
    }
    
    .header__center {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        min-width: 0; /* Allow shrinking */
    }
    
    .header__end {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        margin-inline-start: auto;
    }
    
    /* 🔷 WCAG 2.5.8 — 24px minimum touch target */
    .header__btn {
        min-width: 32px;
        min-height: 32px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    
    .header__sync {
        position: relative;
    }
    
    .header__sync-icon {
        display: inline-block;
        transition: transform var(--duration-normal);
    }
    
    .header__sync--active .header__sync-icon {
        animation: eos-spin 1.5s linear infinite;
    }
    
    .header__sync-badge {
        position: absolute;
        inset-block-start: 2px;
        inset-inline-end: 2px;
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        font-size: 10px;
        font-weight: 700;
        line-height: 16px;
        text-align: center;
        color: white;
        background: oklch(0.63 0.24 25);
        border-radius: var(--radius-full);
    }
    
    @keyframes eos-spin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }

    /* ── User Menu Button ─────────────────────────────────────────────────────── */

    .header__user-avatar {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        border-radius: var(--radius-full);
        background: var(--color-bg-subtle);
        font-size: 0.7rem;
        font-weight: 650;
        line-height: 1;
        transition: background var(--duration-fast), color var(--duration-fast);
    }

    .header__user-avatar--active {
        background: var(--color-primary);
        color: white;
    }

    /* ── User Menu Popover (positioning is outside @layer, see end of file) ── */

    .header__user-menu-inner {
        display: flex;
        flex-direction: column;
    }

    .header__user-menu-header {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        padding: var(--space-4);
        border-block-end: 1px solid var(--color-border-subtle);
        background: var(--color-bg-subtle);
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }

    .header__user-menu-title {
        font-size: 0.85rem;
        font-weight: 650;
    }

    .header__user-menu-avatar {
        flex-shrink: 0;
        width: 36px;
        height: 36px;
        border-radius: var(--radius-full);
        background: var(--color-primary);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.8rem;
        font-weight: 700;
    }

    .header__user-menu-info {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .header__user-menu-name {
        font-size: 0.85rem;
        font-weight: 650;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .header__user-menu-email {
        font-size: 0.75rem;
        color: var(--color-text-secondary);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .header__user-menu-badge {
        flex-shrink: 0;
        font-size: 0.7rem;
        padding: 2px 6px;
        border-radius: var(--radius-full);
        background: var(--color-bg-subtle);
    }

    .header__user-menu-body {
        display: flex;
        flex-direction: column;
        padding: var(--space-2);
    }

    .header__user-menu-hint {
        padding: var(--space-3) var(--space-2);
        font-size: 0.8rem;
        color: var(--color-text-secondary);
        text-wrap: balance;
        margin: 0;
    }

    .header__user-menu-action {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        width: 100%;
        padding: var(--space-2) var(--space-3);
        border: none;
        border-radius: var(--radius-md);
        background: transparent;
        font-size: 0.82rem;
        text-align: start;
        cursor: pointer;
        transition: background var(--duration-fast);
    }

    .header__user-menu-action:hover {
        background: var(--color-bg-subtle);
    }

    .header__user-menu-action--primary {
        background: var(--color-primary);
        color: white;
        justify-content: center;
        font-weight: 600;
        padding: var(--space-2-5) var(--space-4);
    }

    .header__user-menu-action--primary:hover {
        background: var(--color-primary-hover);
    }

    .header__user-menu-action--danger {
        color: oklch(0.55 0.22 25);
    }

    .header__user-menu-action--danger:hover {
        background: oklch(0.95 0.04 25);
    }

    .header__user-menu-separator {
        border: none;
        border-block-start: 1px solid var(--color-border-subtle);
        margin: var(--space-1) 0;
    }

    /* 🔷 CONTAINER QUERIES for Header Components */
    @container header (width < 600px) {
        .header { padding-inline: var(--space-4); gap: var(--space-2); }
        .header__center { display: none; }
        .search { display: none; }
    }

    @container header (width < 400px) {
        .header__end .btn:not(:first-child) { display: none; }
    }
    
    /* ════════════════════════════════════════════════════════════════════════════════════════
       📄 MAIN CONTENT
       🔷 Intrinsic: Container Queries for component responsiveness
       ════════════════════════════════════════════════════════════════════════════════════════ */
    .main {
        grid-area: main;

        /* 🔷 Container Query context - THE KEY for Intrinsic Design */
        container-type: inline-size;
        container-name: main;

        /* 🔷 CSS Containment — main content is independent from sidebar/header */
        contain: style;

        padding: var(--space-6);
        background-color: var(--color-bg-base);
        overflow-y: auto;
        scrollbar-gutter: stable;

        /* 🔷 Scroll-Driven Animation (Baseline 2025) — scroll progress indicator
           Pure CSS, no JS needed. Only visible when content overflows. */
        scroll-timeline: --main-scroll block;
    }
    
    .main__container {
        /* 🔷 Intrinsic sizing: fills available space up to max */
        width: min(100%, var(--content-max));
        margin-inline: auto;
        
        /* 🔷 Prevent layout shift during transitions */
        min-height: 200px;
        contain: layout style;
    }
    
    /* ════════════════════════════════════════════════════════════════════════════════════════
       📱 MOBILE LAYOUT
       🔷 Single media query - the rest is handled by Container Queries
       ════════════════════════════════════════════════════════════════════════════════════════ */
    @media (width <= 768px) {
        .app,
        .app[data-layout="expanded"],
        .app[data-layout="collapsed"],
        .app[data-layout="topnav"] {
            grid-template-columns: 1fr;
            grid-template-rows: var(--header-height) auto 1fr;
            grid-template-areas:
                "header"
                "sidebar"
                "main";
        }
        
        .sidebar {
            position: relative;
            /* 🔷 interpolate-size — animate height: auto natively (no max-height hack) */
            height: 0;
            padding-block: 0;
            opacity: 0;
            overflow: hidden;
            border-inline-end: none;
            border-block-end: 1px solid var(--color-border);
            transition: height var(--duration-normal) var(--ease-in-out),
                        padding-block var(--duration-normal) var(--ease-in-out),
                        opacity var(--duration-normal) var(--ease-in-out);
        }

        .sidebar.is-open {
            height: auto;
            max-height: 80dvh;
            padding-block: var(--space-5);
            opacity: 1;
            overflow-y: auto;
        }
        
        .app[data-layout="topnav"] .sidebar { display: flex; }
        
        .header {
            padding-inline: var(--space-4);
            gap: var(--space-3);
        }
        
        .main { padding: var(--space-4); }
        
        /* Force expanded display on mobile — [data-layout] matches specificity 
           of .app[data-layout="collapsed"] rules, wins by source order */
        .app[data-layout] .nav__text,
        .app[data-layout] .brand__text,
        .app[data-layout] :is(.industry__info, .industry__arrow) {
            opacity: 1;
            width: auto;
        }
        
        .app[data-layout] .nav__item {
            justify-content: flex-start;
            padding: var(--space-3) var(--space-4);
            width: 100%;
            height: auto;
        }
        
        .app[data-layout] .nav {
            flex-direction: column;
            align-items: stretch;
        }
        
        .app[data-layout] .sidebar {
            align-items: stretch;
            padding-inline: var(--space-4);
        }
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   ╔═════════════════════════════════════════════════════════════════════════════════════════╗
   ║                           🧩 COMPONENTS LAYER                                           ║
   ║                    ⭐ INTRINSIC RESPONSIVE COMPONENTS ⭐                                ║
   ╚═════════════════════════════════════════════════════════════════════════════════════════╝
   
   🔷 Components use Container Queries (@container) instead of Media Queries
      This is TRUE Intrinsic Web Design - components adapt to their container,
      not the viewport!
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
@layer components {
    
    /* 🔷 content-visibility — skip off-screen rendering for long lists */
    .table tbody tr { content-visibility: auto; contain-intrinsic-size: auto 44px; }
    .card, .kpi-card { content-visibility: auto; contain-intrinsic-size: auto 120px; contain: layout style paint; }
    .list-item { content-visibility: auto; contain-intrinsic-size: auto 56px; }
    
    /* 🔷 CSS Containment — isolate heavy/independent component subtrees */
    .data-table {
        contain: layout style;
        /* 🔷 tabular-nums — consistent number column alignment */
        font-variant-numeric: tabular-nums;
        /* 🔷 Container Style Queries — compact mode via --compact */
        container-name: table;
    }

    /* 🔷 Container Style Query — compact table rows (Chrome 111+)
       Usage: set --compact: true on .data-table or wrapper to activate */
    @container table style(--compact: true) {
        th, td { padding: var(--space-1) var(--space-2); font-size: var(--text-xs); }
        th { font-size: 0.65rem; }
    }
    .form-group { contain: layout style; }
    .tab-bar-scroll { contain: layout style; }
    .eos-dropdown__menu { contain: layout style paint; }

    /* ── Shared form-input base (zero-specificity) ──────────────────────────────────────── */
    :where(.crm-input, .clinic-input, .clinic-select, .clinic-textarea, .wb-form-input) {
        width: 100%;
        padding: var(--space-2) var(--space-3);
        font-size: var(--text-sm);
        color: var(--color-text);
        background: var(--color-bg-surface);
        border: 1px solid var(--input-border, var(--color-border));
        border-radius: var(--radius-md);
        transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
    }

    :where(.crm-input, .clinic-input, .clinic-select, .clinic-textarea, .wb-form-input)::placeholder {
        color: var(--color-text-muted);
    }

    :where(.crm-input, .clinic-input, .clinic-select, .clinic-textarea, .wb-form-input):hover {
        border-color: var(--color-border-strong);
    }

    :where(.crm-input, .clinic-input, .clinic-select, .clinic-textarea, .wb-form-input):focus {
        outline: none;
        border-color: var(--input-border, var(--color-brand, var(--color-primary)));
        box-shadow: 0 0 0 3px var(--input-focus-ring, oklch(from var(--color-brand, var(--color-primary)) l c h / 0.15));
    }

    /* ════════════════════════════════════════════════════════════════════════════════════════
       🏷️ SIDEBAR BRAND
       ════════════════════════════════════════════════════════════════════════════════════════ */
    .brand {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        padding-block-end: var(--space-6);
        margin-block-end: var(--space-4);
        border-block-end: 1px solid var(--color-border-subtle);
    }
    
    .brand__icon {
        /* Fixed size for visual consistency */
        width: 40px;
        height: 40px;
        flex-shrink: 0;
        
        display: grid;
        place-items: center;
        
        background: linear-gradient(135deg, var(--color-primary), var(--color-primary-600));
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-glow);
        
        & svg {
            width: 22px;
            height: 22px;
            color: var(--color-text-inverse);
        }
    }
    
    .brand__text {
        display: flex;
        flex-direction: column;
        overflow: hidden;
        transition: opacity var(--duration-normal), width var(--duration-normal);
    }
    
    .brand__name {
        font-weight: 700;
        font-size: var(--text-lg);
        color: var(--color-text);
        white-space: nowrap;
        letter-spacing: var(--tracking-tight);
    }
    
    .brand__version {
        font-family: var(--font-mono);
        font-size: var(--text-xs);
        color: var(--color-text-muted);
    }
    
    /* Collapsed state */
    .app[data-layout="collapsed"] .brand {
        justify-content: center;
        padding-block-end: var(--space-4);
    }
    
    .app[data-layout="collapsed"] .brand__name {
        opacity: 0;
        width: 0;
    }
    
    /* ════════════════════════════════════════════════════════════════════════════════════════
       🧭 NAVIGATION
       🔷 Uses CSS Nesting (native) for cleaner code
       ════════════════════════════════════════════════════════════════════════════════════════ */
    .nav {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: var(--space-1);
    }
    
    .nav__item {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        padding: var(--space-3) var(--space-4);
        border-radius: var(--radius-md);
        font-size: var(--text-sm);
        font-weight: 500;
        color: var(--color-text-secondary);
        cursor: pointer;
        position: relative;
        transition: all var(--duration-fast) var(--ease-in-out);
        
        &:hover {
            color: var(--color-text);
            background-color: var(--color-bg-hover);
        }
        
        &.is-active {
            color: var(--color-primary);
            background-color: var(--color-primary-subtle);
            font-weight: 600;
            
            &::before {
                content: '';
                position: absolute;
                inset-inline-start: 0;
                inset-block: 20%;
                width: 3px;
                background-color: var(--color-primary);
                border-radius: 0 var(--radius-full) var(--radius-full) 0;
            }
        }
    }
    
    .nav__icon {
        font-size: 1.25rem;
        flex-shrink: 0;
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .nav__text {
        white-space: nowrap;
        overflow: hidden;
        transition: opacity var(--duration-normal), width var(--duration-normal);
    }
    
    .nav__divider {
        height: 1px;
        background-color: var(--color-border-subtle);
        margin-block: var(--space-2);
    }
    
    .nav__badge {
        margin-inline-start: auto;
        padding: 2px 8px;
        font-size: var(--text-2xs);
        font-weight: 600;
        background-color: var(--color-primary);
        color: white;
        border-radius: var(--radius-full);
    }
    
    .nav__badge--error {
        background-color: var(--color-error);
    }
    
    /* Collapsed state */
    .app[data-layout="collapsed"] .nav {
        width: 100%;
        align-items: center;
    }
    
    .app[data-layout="collapsed"] .nav__text {
        opacity: 0;
        width: 0;
    }
    
    .app[data-layout="collapsed"] .nav__item {
        position: relative;
        justify-content: center;
        padding: var(--space-3);
        width: 48px;
        height: 48px;
        border-radius: var(--radius-lg);

        &.is-active::before { display: none; }
    }

    .app[data-layout="collapsed"] .nav__badge {
        position: absolute;
        top: 2px;
        right: 2px;
        min-width: 18px;
        padding: 1px 4px;
        font-size: 10px;
        margin: 0;
    }

    /* TopNav mode - horizontal nav */
    .header .nav {
        flex-direction: row;
        gap: var(--space-6);
        align-items: center;
    }
    
    .header .nav__item {
        padding: var(--space-2) var(--space-3);
        background: transparent;
        
        &.is-active {
            
            &::before {
                inset-inline: 0;
                inset-block-start: auto;
                inset-block-end: -1px;
                width: 100%;
                height: 2px;
                border-radius: var(--radius-full) var(--radius-full) 0 0;
            }
        }
    }
    
    /* ════════════════════════════════════════════════════════════════════════════════════════
       🔀 SIDEBAR CONTENT SWITCHING
       ════════════════════════════════════════════════════════════════════════════════════════ */
    .sidebar__content {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
    }
    
    .sidebar__content--industry,
    .sidebar__content--builder {
        display: none;
        flex-direction: column;
        flex: 1;
        min-height: 0;
    }
    
    .sidebar__content--industry.is-active,
    .sidebar__content--builder.is-active {
        display: flex;
    }
    
    /* ════════════════════════════════════════════════════════════════════════════════════════
       🏗️ BUILDER MODE SIDEBAR
       ════════════════════════════════════════════════════════════════════════════════════════ */
    .builder-back {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        padding: var(--space-3) var(--space-4);
        font-size: var(--text-sm);
        color: var(--color-text-secondary);
        cursor: pointer;
        transition: color var(--duration-fast);
        
        &:hover {
            color: var(--color-text);
        }
    }
    
    .builder-back__arrow {
        font-size: var(--text-base);
    }
    
    .builder-back__text {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    /* Builder Sections - MODULES nằm ngay sau Builder, TOOLS ở cuối */
    
    /* 🔧 FIX: .nav trong builder sidebar không nên expand (flex: 1)
       Chỉ TOOLS section được đẩy xuống cuối bằng margin-top: auto */
    .sidebar__content--builder > .nav {
        flex: 0 0 auto;
    }
    
    .builder-section {
        padding: var(--space-3) var(--space-4);
    }
    
    .builder-section .nav {
        flex: 0 0 auto;
    }
    
    .builder-section__title {
        font-size: var(--text-xs);
        font-weight: 600;
        color: var(--color-text-muted);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-block-end: var(--space-2);
    }
    
    /* TOOLS section được đẩy xuống cuối sidebar */
    .builder-section--bottom {
        margin-block-start: auto;
        border-block-start: 1px solid var(--color-border-subtle);
    }
    
    /* Add Module Button */
    .builder-add-module {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        padding: var(--space-3);
        margin-block-start: var(--space-2);
        font-size: var(--text-sm);
        font-weight: 500;
        color: var(--color-primary);
        background: var(--color-primary-subtle);
        border: 2px dashed var(--color-primary-muted);
        border-radius: var(--radius-lg);
        cursor: pointer;
        transition: all var(--duration-fast);
        
        &:hover {
            background: var(--color-primary-100);
            border-color: var(--color-primary);
        }
    }
    
    .builder-add-module__icon {
        font-size: var(--text-base);
    }
    
    /* Collapsed state for builder sidebar */
    .app[data-layout="collapsed"] .builder-back__text,
    .app[data-layout="collapsed"] .builder-section__title,
    .app[data-layout="collapsed"] .builder-add-module span:not(.builder-add-module__icon) {
        opacity: 0;
        width: 0;
        overflow: hidden;
    }
    
    .app[data-layout="collapsed"] .builder-add-module {
        justify-content: center;
        padding: var(--space-3);
    }
    
    /* ════════════════════════════════════════════════════════════════════════════════════════
       📦 SIDEBAR SECTIONS — Builder UI elements
       ════════════════════════════════════════════════════════════════════════════════════════ */
    .sidebar__btn--back {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        padding: var(--space-3) var(--space-4);
        font-size: var(--text-sm);
        font-weight: 500;
        color: var(--color-text-secondary);
        cursor: pointer;
        border: none;
        background: none;
        width: 100%;
        text-align: start;
        transition: color var(--duration-fast);
        
        &:hover { color: var(--color-text); }
    }
    
    .sidebar__btn--add {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        padding: var(--space-2) var(--space-4);
        font-size: var(--text-xs);
        color: var(--color-primary);
        cursor: pointer;
        border: none;
        background: none;
        width: 100%;
        text-align: start;
        
        &:hover { background: var(--color-bg-hover); }
    }
    
    .nav__group-title {
        padding: var(--space-3) var(--space-4) var(--space-1);
        font-size: var(--text-xs);
        font-weight: 600;
        color: var(--color-text-muted);
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }
    
    .app[data-layout="collapsed"] .sidebar__btn--back span:last-child,
    .app[data-layout="collapsed"] .sidebar__btn--add span:last-child,
    .app[data-layout="collapsed"] .nav__group-title {
        opacity: 0;
        width: 0;
        overflow: hidden;
    }
    
    /* ════════════════════════════════════════════════════════════════════════════════════════
       🛠️ GLOBAL TOOLS (Sidebar)
       ════════════════════════════════════════════════════════════════════════════════════════ */
    .sidebar__tools {
        padding-block-start: var(--space-3);
        margin-block-start: auto;
        border-block-start: 1px solid var(--color-border-subtle);
    }
    
    .sidebar__tools-title {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        padding: var(--space-2) var(--space-4);
        font-size: var(--text-xs);
        font-weight: 600;
        color: var(--color-text-muted);
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }
    
    .tool-item {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        padding: var(--space-3) var(--space-4);
        border-radius: var(--radius-md);
        font-size: var(--text-sm);
        font-weight: 500;
        color: var(--color-text-secondary);
        cursor: pointer;
        transition: all var(--duration-fast);
        
        &:hover {
            color: var(--color-text);
            background-color: var(--color-bg-hover);
        }
        
        &.is-active {
            color: var(--color-primary);
            background-color: var(--color-primary-subtle);
            font-weight: 600;
        }
    }
    
    .tool-item__icon {
        font-size: 1.1rem;
        flex-shrink: 0;
    }
    
    .tool-item__name {
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .app[data-layout="collapsed"] .sidebar__tools-title span:last-child,
    .app[data-layout="collapsed"] .tool-item__name {
        opacity: 0;
        width: 0;
        overflow: hidden;
    }
    
    /* ════════════════════════════════════════════════════════════════════════════════════════
       🏢 INDUSTRY SELECTOR (Sidebar Footer)
       ════════════════════════════════════════════════════════════════════════════════════════ */
    .sidebar__footer {
        flex-shrink: 0;
        margin-block-start: auto;
        padding-block: var(--space-4) var(--space-2);
        border-block-start: 1px solid var(--color-border-subtle);
    }
    
    .industry {
        --_color: var(--industry-color, var(--color-info));
        display: flex;
        align-items: center;
        gap: var(--space-3);
        padding: var(--space-3);
        border-radius: var(--radius-lg);
        cursor: pointer;
        transition: background-color var(--duration-fast);

        &:hover { background-color: oklch(from var(--_color) l c h / 0.08); }
    }

    .industry__icon {
        width: 40px;
        height: 40px;
        flex-shrink: 0;
        display: grid;
        place-items: center;
        font-size: 1.25rem;
        background: oklch(from var(--_color) l c h / 0.15);
        border-radius: var(--radius-lg);
        transition: background var(--duration-fast), scale var(--duration-fast);
    }

    .industry:hover .industry__icon {
        background: oklch(from var(--_color) l c h / 0.25);
        scale: 1.05;
    }
    
    .industry__info {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        transition: opacity var(--duration-normal), width var(--duration-normal);
    }
    
    .industry__name {
        font-weight: 600;
        font-size: var(--text-sm);
        color: var(--color-text);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .industry__status {
        font-size: var(--text-xs);
        color: var(--color-text-muted);
        display: flex;
        align-items: center;
        gap: var(--space-1);
        
        &::before {
            content: '';
            width: 6px;
            height: 6px;
            background-color: var(--color-success);
            border-radius: var(--radius-full);
        }
    }
    
    .industry__arrow {
        color: var(--color-text-muted);
        font-size: 1.25rem;
        transition: transform var(--duration-fast);
    }
    
    .industry:hover .industry__arrow { transform: translateX(2px); }
    
    /* Collapsed state */
    .app[data-layout="collapsed"] .sidebar__footer {
        width: 100%;
        display: flex;
        justify-content: center;
    }
    
    .app[data-layout="collapsed"] .industry {
        justify-content: center;
        padding: var(--space-2);
    }
    
    .app[data-layout="collapsed"] .industry__info,
    .app[data-layout="collapsed"] .industry__arrow {
        opacity: 0;
        width: 0;
    }

    .sidebar__meta {
        padding-inline: var(--space-3);
        padding-block-start: var(--space-2);
        font-size: var(--text-xs);
        color: var(--color-text-muted);
        opacity: 0.6;
    }

    .app[data-layout="collapsed"] .sidebar__meta {
        display: none;
    }

    /* ════════════════════════════════════════════════════════════════════════════════════════
       🎛️ HEADER COMPONENTS
       ════════════════════════════════════════════════════════════════════════════════════════ */
    
    /* Toggle Button */
    .btn-toggle {
        width: 40px;
        height: 40px;
        flex-shrink: 0;
        display: grid;
        place-items: center;
        border-radius: var(--radius-md);
        color: var(--color-text-secondary);
        transition: all var(--duration-fast);
        
        &:hover {
            background-color: var(--color-bg-hover);
            color: var(--color-text);
        }
        
        &:active { transform: scale(0.95); }
        
        & svg { width: 20px; height: 20px; }
    }
    
    /* Search Bar - 🔷 Intrinsic sizing with clamp() */
    .search {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        
        /* 🔷 INTRINSIC: min 200px, grows to 40% of container, max 480px */
        width: clamp(200px, 40cqi, 480px);
        
        padding: var(--space-2) var(--space-4);
        background-color: var(--color-bg-subtle);
        border: 1px solid transparent;
        border-radius: var(--radius-full);
        transition: all var(--duration-fast);
        
        &:focus-within {
            background-color: var(--color-bg-surface);
            border-color: var(--color-primary);
            box-shadow: 0 0 0 3px var(--color-primary-subtle);
        }
        
        & svg {
            width: 18px;
            height: 18px;
            color: var(--color-text-muted);
            flex-shrink: 0;
        }
        
        & input {
            flex: 1;
            min-width: 0;
            background: transparent;
            
            &::placeholder { color: var(--color-text-muted); }
            &:focus { outline: none; }
        }
    }
    
    /* Icon Button */
    .btn-icon {
        width: 36px;
        height: 36px;
        flex-shrink: 0;
        display: grid;
        place-items: center;
        border-radius: var(--radius-full);
        color: var(--color-text-secondary);
        position: relative;
        transition: all var(--duration-fast);
        
        &:hover {
            background-color: var(--color-bg-hover);
            color: var(--color-text);
        }
        
        & svg { width: 20px; height: 20px; }
    }
    
    .btn-icon__badge {
        position: absolute;
        inset-block-start: 18%;
        inset-inline-end: 18%;
        width: 8px;
        height: 8px;
        background-color: var(--color-primary);
        border: 2px solid var(--color-bg-surface);
        border-radius: var(--radius-full);
    }
    
    /* Avatar */
    .avatar {
        width: 36px;
        height: 36px;
        flex-shrink: 0;
        display: grid;
        place-items: center;
        background: linear-gradient(135deg, var(--color-info), oklch(0.55 0.18 230));
        border-radius: var(--radius-full);
        color: var(--color-text-inverse);
        font-weight: 600;
        font-size: var(--text-sm);
        cursor: pointer;
        transition: transform var(--duration-fast);
        
        &:hover { transform: scale(1.08); }
    }
    
    /* Visibility helpers — sidebar vs topnav layout switching */
    .show-sidebar { display: flex; }
    .show-topnav { display: none; }
    
    .app[data-layout="topnav"] .show-sidebar { display: none; }
    .app[data-layout="topnav"] .show-topnav { display: flex; }
    
    .header__nav-container { display: none; }
    .app[data-layout="topnav"] .header__nav-container {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1;
        min-width: 0; /* Allow shrinking */
        /* overflow: visible to allow dropdown to show */
        overflow: visible;
    }
    
    /* ════════════════════════════════════════════════════════════════════════════════════════
       🔷 PRIORITY+ NAVIGATION - Auto-collapse overflow items
       ════════════════════════════════════════════════════════════════════════════════════════ */
    .priority-nav {
        display: flex;
        align-items: center;
        gap: var(--space-1);
        max-width: 100%;
        position: relative;
        /* Ensure it doesn't grow beyond available space */
        flex: 1;
        min-width: 0;
        /* Allow dropdown to overflow */
        overflow: visible;
    }
    
    .priority-nav__items {
        display: flex;
        align-items: center;
        gap: var(--space-1);
        /* Only this container clips overflow */
        overflow: hidden;
        flex: 1;
        min-width: 0;
    }
    
    .priority-nav__item {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        padding: var(--space-2) var(--space-3);
        border-radius: var(--radius-md);
        font-size: var(--text-sm);
        font-weight: 500;
        color: var(--color-text-secondary);
        white-space: nowrap;
        cursor: pointer;
        transition: all var(--duration-fast);
        flex-shrink: 0;
        
        &:hover {
            background-color: var(--color-bg-hover);
            color: var(--color-text);
        }
        
        &.is-active {
            background-color: var(--color-primary-subtle);
            color: var(--color-primary);
        }
        
        &.is-hidden {
            display: none;
        }
    }
    
    .priority-nav__icon {
        font-size: 1.1em;
    }
    
    .priority-nav__badge {
        font-size: var(--text-xs);
        padding: 2px 6px;
        background-color: var(--color-primary);
        color: white;
        border-radius: var(--radius-full);
        min-width: 18px;
        text-align: center;
        
        &.priority-nav__badge--error {
            background-color: var(--color-error);
        }
    }
    
    /* 🔷 Overflow "More" Button */
    .priority-nav__more {
        display: none; /* Hidden by default, shown by JS */
        align-items: center;
        gap: var(--space-1);
        padding: var(--space-2) var(--space-3);
        border-radius: var(--radius-md);
        font-size: var(--text-sm);
        font-weight: 500;
        color: var(--color-text-secondary);
        background: transparent;
        border: none;
        cursor: pointer;
        white-space: nowrap;
        flex-shrink: 0;
        
        &:hover {
            background-color: var(--color-bg-hover);
            color: var(--color-text);
        }
        
        &.is-visible {
            display: flex;
        }
        
        &::after {
            content: "";
            border: 4px solid transparent;
            border-top-color: currentColor;
            margin-block-start: 2px;
        }
    }
    
    /* Overflow Dropdown Menu — regular positioning (no top-layer) */
    .priority-nav__overflow {
        display: none;
        position: absolute;
        top: 100%;
        right: 0;
        margin-block-start: var(--space-2);

        /* Styling */
        min-width: 200px;
        padding: var(--space-2);
        background-color: var(--color-bg-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-lg);
        z-index: var(--z-dropdown);

        &.is-open {
            display: block;
        }
    }
    
    .priority-nav__overflow-item {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        padding: var(--space-2) var(--space-3);
        border-radius: var(--radius-md);
        font-size: var(--text-sm);
        color: var(--color-text-secondary);
        cursor: pointer;
        transition: all var(--duration-fast);
        
        &:hover {
            background-color: var(--color-bg-hover);
            color: var(--color-text);
        }
        
        &.is-active {
            background-color: var(--color-primary-subtle);
            color: var(--color-primary);
        }
    }
    
    @media (width <= 768px) {
        .search { display: none; }
        /* Match [data-layout="topnav"] specificity so mobile wins by source order */
        .app[data-layout] .header__nav-container { display: none; }
        .app[data-layout] .show-topnav { display: none; }
        .app[data-layout] .show-sidebar { display: flex; }
    }
    
    /* ════════════════════════════════════════════════════════════════════════════════════════
       📊 KPI CARDS
       🔷 INTRINSIC GRID: auto-fit + minmax() = no media queries needed!
       ════════════════════════════════════════════════════════════════════════════════════════ */
    .kpi-grid {
        display: grid;

        /* 🔷 THIS IS INTRINSIC WEB DESIGN:
           - auto-fit: create as many columns as fit
           - minmax(min(100%, 240px), 1fr): each card is at least 240px (or 100% on narrow screens)
           - No media queries needed - grid adapts automatically! */
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
        gap: var(--space-4);
        margin-block-end: var(--space-6);
        /* 🔷 Container Style Queries — compact mode via --compact */
        container-name: kpi-grid;
        /* 🔷 contain — isolate grid layout/paint from siblings */
        contain: layout paint;
    }

    /* 🔷 Container Style Query — compact KPI cards (Chrome 111+)
       Usage: set --compact: true on .kpi-grid or ancestor to activate */
    @container kpi-grid style(--compact: true) {
        .kpi-card { padding: var(--space-3); gap: var(--space-2); }
        .kpi-card__icon { display: none; }
        .kpi-card__change { font-size: var(--text-xs); }
    }
    
    /* 🔷 Container Query for narrow containers */
    @container main (width < 500px) {
        .kpi-grid { grid-template-columns: 1fr; }
    }
    
    .kpi-card {
        /* 🔷 Make this a container query context */
        container-type: inline-size;
        container-name: kpi;
        
        display: flex;
        align-items: flex-start;
        gap: var(--space-4);
        padding: var(--space-5);
        
        background-color: var(--color-bg-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-xl);
        
        position: relative;
        overflow: hidden;
        transition: all var(--duration-normal);
        
        &:hover {
            transform: translateY(-4px);
            border-color: transparent;
            box-shadow: var(--shadow-lg);
        }
        
        /* Top gradient bar */
        &::before {
            content: '';
            position: absolute;
            inset-block-start: 0;
            inset-inline: 0;
            height: 4px;
            background: var(--kpi-gradient, linear-gradient(90deg, var(--color-primary), var(--color-primary-400)));
        }
    }
    
    .kpi-card__icon {
        /* 🔷 Intrinsic sizing based on container */
        width: clamp(44px, 5cqi, 56px);
        aspect-ratio: 1;
        flex-shrink: 0;
        display: grid;
        place-items: center;
        font-size: clamp(1.25rem, 2cqi, 1.5rem);
        background: var(--kpi-gradient, linear-gradient(135deg, var(--color-primary), var(--color-primary-600)));
        border-radius: var(--radius-xl);
        color: var(--color-text-inverse);
    }
    
    .kpi-card__content { flex: 1; min-width: 0; }
    
    .kpi-card__value {
        font-size: var(--text-2xl);
        font-weight: 700;
        color: var(--color-text);
        line-height: var(--leading-tight);
    }
    
    .kpi-card__label {
        font-size: var(--text-sm);
        color: var(--color-text-muted);
        margin-block-start: var(--space-1);
    }
    
    .kpi-card__change {
        font-size: var(--text-xs);
        margin-block-start: var(--space-2);
        
        &.is-positive { color: var(--color-success); }
        &.is-negative { color: var(--color-error); }
    }
    
    /* ════════════════════════════════════════════════════════════════════════════════════════
       📋 SECTION CARD
       ════════════════════════════════════════════════════════════════════════════════════════ */
    .section {
        container-type: inline-size;
        container-name: section;
        
        background-color: var(--color-bg-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-xl);
        padding: var(--space-5);
    }
    
    .section__header {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        gap: var(--space-3);
        margin-block-end: var(--space-4);
        padding-block-end: var(--space-3);
        border-block-end: 1px solid var(--color-border-subtle);
    }
    
    .section__title {
        font-weight: 600;
        font-size: var(--text-base);
        display: flex;
        align-items: center;
        gap: var(--space-2);
    }
    
    .section__actions { display: flex; gap: var(--space-2); }
    
    /* 🔷 Dashboard Grid - Intrinsic two-column layout */
    .dashboard-grid {
        display: grid;
        /* Main content + sidebar (280-360px) */
        grid-template-columns: 1fr minmax(280px, 360px);
        gap: var(--space-4);
    }
    
    /* 🔷 Container Query - stack on narrow containers */
    @container main (width < 900px) {
        .dashboard-grid { grid-template-columns: 1fr; }
    }
    
    /* ════════════════════════════════════════════════════════════════════════════════════════
       🔘 BUTTONS
       ════════════════════════════════════════════════════════════════════════════════════════ */
    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-2);
        padding: var(--space-2) var(--space-4);
        font-size: var(--text-sm);
        font-weight: 500;
        border-radius: var(--radius-md);
        transition: all var(--duration-fast);
        white-space: nowrap;
        cursor: pointer;
        background: var(--color-bg-surface);
        color: var(--color-text);
        border: 1px solid var(--color-border);

        &:hover:not(:disabled) { background: var(--color-bg-hover); }
        &:active:not(:disabled) { transform: scale(0.98); }
        &:disabled { opacity: 0.5; cursor: not-allowed; }
        & > * { pointer-events: none; }
    }

    .btn--primary {
        background: var(--color-primary);
        color: var(--color-text-inverse);
        border-color: var(--color-primary);

        &:hover:not(:disabled) { background: var(--color-primary-600); }
    }

    .btn--secondary {
        background: var(--color-bg-surface);
        border: 1px solid var(--color-border);
        color: var(--color-text);

        &:hover:not(:disabled) { background: var(--color-bg-hover); }
    }

    .btn--ghost {
        background: transparent;
        border-color: transparent;
        color: var(--color-text-secondary);

        &:hover:not(:disabled) {
            background: var(--color-bg-hover);
            color: var(--color-text);
        }
    }

    .btn--sm { padding: var(--space-1-5) var(--space-3); font-size: var(--text-xs); }
    .btn--lg { padding: var(--space-3) var(--space-6); font-size: var(--text-base); }
    
    /* ════════════════════════════════════════════════════════════════════════════════════════
       🏷️ BADGES
       ════════════════════════════════════════════════════════════════════════════════════════ */
    .badge {
        display: inline-flex;
        align-items: center;
        gap: var(--space-1);
        padding: var(--space-0-5) var(--space-2);
        font-size: var(--text-xs);
        font-weight: 600;
        border-radius: var(--radius-full);
        white-space: nowrap;
    }
    
    /* Status variants */
    .badge--primary { background-color: var(--color-primary-subtle); color: var(--color-primary); }
    .badge--success { background-color: var(--color-success-subtle); color: var(--color-success); }
    .badge--warning { background-color: var(--color-warning-subtle); color: var(--color-warning); }
    .badge--error { background-color: var(--color-error-subtle); color: var(--color-error); }
    .badge--info { background-color: var(--color-info-subtle); color: var(--color-info); }
    
    /* Neutral/muted badge */
    .badge--muted { 
        background-color: var(--color-bg-muted); 
        color: var(--color-text-secondary); 
    }
    
    /* ─────────────────────────────────────────────────────────────────────────────────
       Pipeline/Workflow Stage Badges - Reusable across industries
       ───────────────────────────────────────────────────────────────────────────────── */
    .badge--stage-1 { background-color: var(--color-stage-1-bg); color: var(--color-stage-1); }
    .badge--stage-2 { background-color: var(--color-stage-2-bg); color: var(--color-stage-2); }
    .badge--stage-3 { background-color: var(--color-stage-3-bg); color: var(--color-stage-3); }
    .badge--stage-4 { background-color: var(--color-stage-4-bg); color: var(--color-stage-4); }
    .badge--stage-5 { background-color: var(--color-stage-5-bg); color: var(--color-stage-5); }
    .badge--stage-6 { background-color: var(--color-stage-6-bg); color: var(--color-stage-6); }
    
    /* Semantic aliases for common workflows */
    .badge--new { background-color: var(--color-stage-1-bg); color: var(--color-stage-1); }
    .badge--progress { background-color: var(--color-stage-2-bg); color: var(--color-stage-2); }
    .badge--review { background-color: var(--color-stage-3-bg); color: var(--color-stage-3); }
    .badge--pending { background-color: var(--color-stage-4-bg); color: var(--color-stage-4); }
    .badge--complete { background-color: var(--color-stage-5-bg); color: var(--color-stage-5); }
    .badge--cancelled { background-color: var(--color-stage-6-bg); color: var(--color-stage-6); }

    /* ════════════════════════════════════════════════════════════════════════════════════════
       📭 EMPTY STATE
       ════════════════════════════════════════════════════════════════════════════════════════ */
    .empty-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: var(--space-10);
    }
    
    .empty-state__icon { font-size: var(--text-5xl); opacity: 0.3; margin-block-end: var(--space-4); }
    .empty-state__title { font-size: var(--text-xl); font-weight: 600; color: var(--color-text); }
    .empty-state__text { color: var(--color-text-muted); margin-block-start: var(--space-2); max-width: 40ch; }
    
    /* ════════════════════════════════════════════════════════════════════════════════════════
       ➕ MODULE/TOOL DIALOGS - Native <dialog> Element
       🔷 Shared styles for all builder dialogs
       ════════════════════════════════════════════════════════════════════════════════════════ */
    .module-dialog {
        width: min(90vw, 600px);
        max-height: 80dvh;
        background-color: var(--color-bg-surface);
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow-xl);
        overflow: hidden;
        
        /* 🔷 CSS Containment — isolate dialog paint from background */
        contain: layout style paint;
        
        /* 🔷 will-change — dialog animates on open (scale + opacity) */
        will-change: transform, opacity;
    }
    
    .module-dialog__body {
        padding: var(--space-6);
        overflow-y: auto;
        max-height: calc(80dvh - 70px);
        /* 🔷 scrollbar-gutter — prevent layout shift when scrollbar appears */
        scrollbar-gutter: stable;
    }
    
    .module-dialog__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: var(--space-4) var(--space-6);
        border-block-end: 1px solid var(--color-border-subtle);
    }
    
    .module-dialog__title {
        font-size: var(--text-lg);
        font-weight: 600;
    }
    
    /* 🔷 Close button using form method="dialog" */
    .module-dialog__close {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.25rem;
        color: var(--color-text-muted);
        cursor: pointer;
        border-radius: var(--radius-md);
        background: transparent;
        border: none;
        transition: all var(--duration-fast);
        
        &:hover {
            background-color: var(--color-bg-hover);
            color: var(--color-text);
        }
    }
    
    .module-dialog__subtitle {
        color: var(--color-text-muted);
        font-size: var(--text-sm);
        margin-block-end: var(--space-4);
    }
    
    /* Template Grid */
    .template-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: var(--space-3);
    }
    
    .template-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: var(--space-4);
        background-color: var(--color-bg-subtle);
        border: 1px solid transparent;
        border-radius: var(--radius-lg);
        cursor: pointer;
        transition: all var(--duration-fast);
        
        /* 🔷 CSS Containment — isolate card layout from siblings */
        contain: layout style;
        
        &:hover {
            background-color: var(--color-primary-subtle);
            border-color: var(--color-primary);
            transform: translateY(-2px);
        }
    }
    
    .template-card__icon {
        font-size: 2rem;
        margin-block-end: var(--space-2);
    }
    
    .template-card__info {
        width: 100%;
    }
    
    .template-card__name {
        font-weight: 600;
        font-size: var(--text-sm);
        color: var(--color-text);
    }
    
    .template-card__desc {
        font-size: var(--text-xs);
        color: var(--color-text-muted);
        margin-block-start: var(--space-1);
    }
    
    /* ════════════════════════════════════════════════════════════════════════════════════════
       🔔 TOAST NOTIFICATIONS
       ════════════════════════════════════════════════════════════════════════════════════════ */
    .toast-container {
        position: fixed;
        inset-block-start: var(--space-4);
        inset-inline-end: var(--space-4);
        z-index: var(--z-toast);
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
        pointer-events: none;
        
        /* 🔷 CSS Containment — toast overlay is fully independent */
        contain: layout style;
    }
    
    .toast {
        display: flex;
        align-items: flex-start;
        gap: var(--space-3);
        padding: var(--space-4);
        /* 🔷 Intrinsic width */
        width: clamp(280px, 30vw, 400px);
        background-color: var(--color-bg-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow-xl);
        opacity: 0;
        transform: translateX(100%);
        transition: all var(--duration-slow) var(--ease-spring);
        pointer-events: auto;
        
        /* 🔷 will-change — toast slides in/out */
        will-change: transform, opacity;
        /* 🔷 CSS Containment — each toast is independent */
        contain: layout style paint;
        
        &.is-visible { opacity: 1; transform: translateX(0); }
        &--success { border-inline-start: 4px solid var(--color-success); }
        &--error { border-inline-start: 4px solid var(--color-error); }
        &--warning { border-inline-start: 4px solid var(--color-warning); }
    }
    
    .toast__icon { font-size: var(--text-xl); }
    .toast__content { flex: 1; min-width: 0; }
    .toast__title { font-weight: 600; color: var(--color-text); }
    .toast__message { font-size: var(--text-sm); color: var(--color-text-secondary); margin-block-start: var(--space-1); }
    .toast__close {
        padding: var(--space-1);
        color: var(--color-text-muted);
        border-radius: var(--radius-sm);
        &:hover { background-color: var(--color-bg-hover); color: var(--color-text); }
    }
    
    /* ════════════════════════════════════════════════════════════════════════════════════════
       🏢 INDUSTRY PICKER MODAL - Native <dialog> Element
       🔷 Using native dialog for better accessibility & focus management
       ════════════════════════════════════════════════════════════════════════════════════════ */
    
    /* 🔷 Native Dialog Reset & Styling */
    dialog {
        /* Reset */
        padding: 0;
        border: none;
        background: transparent;
        
        /* 🔷 Centering - critical for showModal() */
        position: fixed;
        inset: 0;
        margin: auto;
        
        /* Sizing */
        max-width: min(90vw, var(--modal-max, 800px));
        max-height: 90dvh;
        width: fit-content;
        height: fit-content;
        
        /* Closed state — exit transition animates back to these values */
        opacity: 0;
        transform: scale(0.95);
        transition:
            opacity var(--duration-normal) var(--ease-out),
            transform var(--duration-normal) var(--ease-spring),
            overlay var(--duration-normal) allow-discrete,
            display var(--duration-normal) allow-discrete;

        /* 🔷 Open state */
        &[open] {
            opacity: 1;
            transform: scale(1);
            /* 🔷 Keyframe animation for ENTRY — @starting-style is unreliable
               on cold loads (no cache) because the browser may render one frame
               at the [open] values before starting-style kicks in.
               `backwards` fill-mode applies the `from` keyframe values IMMEDIATELY
               when [open] is added, before the animation starts — eliminates the
               one-frame flash where opacity:1 is painted before animation begins. */
            animation: dialog-entry var(--duration-normal) var(--ease-out) backwards;
        }

        /* 🔷 Native backdrop (no JS needed!) */
        &::backdrop {
            background: var(--color-bg-overlay);
            backdrop-filter: blur(4px);
            opacity: 0;
            transition: opacity var(--duration-normal);
        }

        &[open]::backdrop {
            opacity: 1;
            animation: backdrop-entry var(--duration-normal) var(--ease-out) backwards;
        }
    }

    @keyframes dialog-entry {
        from { opacity: 0; transform: scale(0.95); }
    }

    @keyframes backdrop-entry {
        from { opacity: 0; }
    }

    .picker-dialog {
        max-width: min(90vw, 460px);
    }

    .picker {
        width: min(90vw, 440px);
        max-height: 85dvh;
        overflow-y: auto;
        background-color: var(--color-bg-surface);
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow-2xl);
    }

    .picker__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: var(--space-4) var(--space-5);
        border-block-end: 1px solid var(--color-border);
        background: var(--color-bg-subtle);
    }

    .picker__title {
        font-size: var(--text-lg);
        font-weight: 600;
        color: var(--color-text);
    }

    .picker__close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border: none;
        background: none;
        border-radius: var(--radius-md);
        font-size: var(--text-xl);
        color: var(--color-text-muted);
        cursor: pointer;
        transition: background-color var(--duration-fast);

        &:hover { background-color: var(--color-bg-muted); }
    }

    .picker__grid {
        display: flex;
        flex-direction: column;
        padding: var(--space-2);
    }

    .picker__item {
        --_accent: var(--picker-color, var(--color-primary));
        display: flex;
        align-items: center;
        gap: var(--space-4);
        padding: var(--space-3) var(--space-4);
        border: none;
        border-radius: var(--radius-lg);
        background: none;
        text-align: start;
        cursor: pointer;
        transition: background-color var(--duration-fast);

        &:hover { background-color: var(--color-bg-muted); }

        &.is-active {
            background-color: oklch(from var(--_accent) l c h / 0.08);

            .picker__item-check { opacity: 1; }
            .picker__item-name { color: var(--_accent); }
        }
    }

    .picker__item-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border-radius: var(--radius-lg);
        background: oklch(from var(--_accent) l c h / 0.12);
        font-size: 1.25rem;
        flex-shrink: 0;
    }

    .picker__item-body { flex: 1; min-width: 0; }
    .picker__item-name { font-weight: 600; font-size: var(--text-base); color: var(--color-text); }
    .picker__item-desc { font-size: var(--text-sm); color: var(--color-text-muted); margin-block-start: 2px; }

    .picker__item-check {
        opacity: 0;
        color: var(--_accent);
        font-weight: 700;
        font-size: var(--text-lg);
        flex-shrink: 0;
    }
    
    /* ════════════════════════════════════════════════════════════════════════════════════════
       🎯 POPOVER API - Native Dropdown Styling
       🔷 Using native popover for auto-dismiss, positioning, and layering
       ════════════════════════════════════════════════════════════════════════════════════════ */
    [popover] {
        /* Reset default popover styles */
        border: none;
        padding: 0;
        background: transparent;
        /* 🔷 overscroll-behavior — prevent scroll chaining to parent */
        overscroll-behavior: contain;
        
        /* Animation */
        opacity: 0;
        transform: translateY(-8px) scale(0.95);
        transition: 
            opacity var(--duration-fast) var(--ease-out),
            transform var(--duration-fast) var(--ease-out),
            overlay var(--duration-fast) allow-discrete,
            display var(--duration-fast) allow-discrete;
        
        /* Open state */
        &:popover-open {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
        
        /* 🔷 Starting style for entry animation */
        @starting-style {
            &:popover-open {
                opacity: 0;
                transform: translateY(-8px) scale(0.95);
            }
        }
    }
    
    /* Dropdown popover specific styles */
    .builder-header__dropdown[popover] {
        position: absolute;
        inset: unset;
        top: 100%;
        right: 0;
        margin-block-start: var(--space-2);
        min-width: 180px;
        padding: var(--space-2);
        background-color: var(--color-bg-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-lg);
    }
    
    /* ════════════════════════════════════════════════════════════════════════════════════════
       🎯 :has() SELECTOR ENHANCEMENTS
       🔷 Parent Selection - Browser Support: 94% global
       🔷 Chrome 105+, Firefox 121+, Safari 15.4+, Edge 105+
       ════════════════════════════════════════════════════════════════════════════════════════ */
    
    /* ─────────────────────────────────────────────────────────────────────────────────────────
       📝 FORM VALIDATION - Real-time Visual Feedback (No JavaScript needed!)
       
       🔷 :user-valid / :user-invalid (Baseline 2025)
       Chỉ hiện validation feedback SAU KHI user đã tương tác, tránh "red errors" khi
       form mới mở. Thay thế :invalid:not(:placeholder-shown) hack.
       Fallback: trình duyệt cũ dùng :invalid:not(:placeholder-shown).
       ───────────────────────────────────────────────────────────────────────────────────────── */
    
    /* 🔷 Modern: :user-invalid — chỉ hiện lỗi sau khi user đã nhập/blur */
    .form-group:has(input:user-invalid),
    .form-group:has(textarea:user-invalid),
    .form-group:has(select:user-invalid) {
        --input-border: var(--color-error);
        --input-focus-ring: oklch(from var(--color-error) l c h / 0.2);
    }

    /* 🔷 Modern: :user-valid — success indicator sau khi user đã nhập đúng */
    .form-group:has(input:user-valid),
    .form-group:has(textarea:user-valid) {
        --input-border: var(--color-success);
        --input-focus-ring: oklch(from var(--color-success) l c h / 0.2);
    }

    /* Fallback cho browsers chưa hỗ trợ :user-* (graceful degradation) */
    @supports not selector(:user-invalid) {
        .form-group:has(input:invalid:not(:placeholder-shown)),
        .form-group:has(textarea:invalid:not(:placeholder-shown)),
        .form-group:has(select:invalid) {
            --input-border: var(--color-error);
            --input-focus-ring: oklch(from var(--color-error) l c h / 0.2);
        }

        .form-group:has(input:valid:not(:placeholder-shown)),
        .form-group:has(textarea:valid:not(:placeholder-shown)) {
            --input-border: var(--color-success);
            --input-focus-ring: oklch(from var(--color-success) l c h / 0.2);
        }
    }
    
    /* 🔷 @scope — error messages scoped to nearest form-group (prevents nested cascade) */
    @scope (.form-group) to (.form-group) {
        .form-error {
            display: none;
            color: var(--color-error);
            font-size: var(--text-xs);
            margin-block-start: var(--space-1);
        }

        :scope:has(input:user-invalid) .form-error,
        :scope:has(textarea:user-invalid) .form-error {
            display: block;
            animation: has-shake 0.3s ease-out;
        }
    }
    
    @supports not selector(:user-invalid) {
        .form-group:has(input:invalid:not(:placeholder-shown)) .form-error,
        .form-group:has(textarea:invalid:not(:placeholder-shown)) .form-error {
            display: block;
            animation: has-shake 0.3s ease-out;
        }
    }
    
    /* Required field indicator - tự thêm dấu * */
    .form-group:has(input:required) label::after,
    .form-group:has(textarea:required) label::after,
    .form-group:has(select:required) label::after {
        content: " *";
        color: var(--color-error);
        font-weight: 400;
    }
    
    /* 🔷 Disable submit — dùng :user-invalid nếu có, fallback :invalid */
    form:has(:user-invalid) button[type="submit"],
    form:has(:user-invalid) .btn-submit {
        opacity: 0.5;
        cursor: not-allowed;
        pointer-events: none;
    }
    
    @supports not selector(:user-invalid) {
        form:has(:invalid) button[type="submit"],
        form:has(:invalid) .btn-submit {
            opacity: 0.5;
            cursor: not-allowed;
            pointer-events: none;
        }
    }
    
    @keyframes has-shake {
        0%, 100% { transform: translateX(0); }
        25% { transform: translateX(-4px); }
        75% { transform: translateX(4px); }
    }
    
    /* ─────────────────────────────────────────────────────────────────────────────────────────
       🔍 SEARCH & INPUT GROUP - Container Focus Awareness
       ───────────────────────────────────────────────────────────────────────────────────────── */
    
    /* Search box focus state - highlight toàn bộ container */
    .search:has(input:focus) {
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px var(--color-primary-subtle);
        background-color: var(--color-bg-surface);
    }
    
    /* Input group với icon - highlight khi focus */
    .input-group:has(input:focus) {
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px oklch(from var(--color-primary) l c h / 0.15);
    }
    
    .input-group:has(input:focus) .input-group__icon {
        color: var(--color-primary);
    }
    
    /* ─────────────────────────────────────────────────────────────────────────────────────────
       🎴 CARD & TEMPLATE SELECTION - Checkbox/Radio Selection States
       ───────────────────────────────────────────────────────────────────────────────────────── */
    
    /* Selectable card với hidden checkbox */
    .selectable-card:has(input[type="checkbox"]:checked),
    .selectable-card:has(input[type="radio"]:checked) {
        border-color: var(--color-primary);
        background-color: var(--color-primary-subtle);
        box-shadow: 0 0 0 2px var(--color-primary-subtle), var(--shadow-md);
    }
    
    .selectable-card:has(input[type="checkbox"]:checked)::before,
    .selectable-card:has(input[type="radio"]:checked)::before {
        content: "✓";
        position: absolute;
        inset-block-start: var(--space-2);
        inset-inline-end: var(--space-2);
        width: 24px;
        height: 24px;
        display: grid;
        place-items: center;
        background-color: var(--color-primary);
        color: white;
        border-radius: var(--radius-full);
        font-size: var(--text-sm);
        font-weight: 700;
        z-index: var(--z-raised);
    }
    
    /* Template card selection trong Builder/Tool Picker */
    .template-card:has(input:checked) {
        background-color: var(--color-primary-subtle);
        border-color: var(--color-primary);
        transform: scale(1.02);
    }
    
    /* Picker item selection */
    .picker__item:has(input:checked) {
        border-color: var(--color-primary);
        background-color: var(--color-primary-subtle);
        box-shadow: var(--shadow-lg), var(--shadow-glow);
    }
    
    /* ─────────────────────────────────────────────────────────────────────────────────────────
       🧭 NAVIGATION - Parent Awareness for Active States
       ───────────────────────────────────────────────────────────────────────────────────────── */
    
    /* Nav group containing active item - highlight group */
    .nav__group:has(.nav__item.is-active) {
        background-color: var(--color-bg-subtle);
        border-radius: var(--radius-lg);
        padding: var(--space-2);
        margin: calc(-1 * var(--space-2));
    }
    
    /* Builder section với active module */
    .builder-section:has(.nav__item.is-active) .builder-section__title {
        color: var(--color-primary);
    }
    
    /* Priority nav - show "More" button khi có hidden items */
    .priority-nav:has(.priority-nav__item.is-hidden) .priority-nav__more {
        display: flex;
    }
    
    /* Dropdown có selected item - indicator dot */
    .priority-nav__overflow:has(.priority-nav__overflow-item.is-active)::before {
        content: "";
        position: absolute;
        top: -4px;
        right: var(--space-4);
        width: 8px;
        height: 8px;
        background-color: var(--color-primary);
        border-radius: var(--radius-full);
    }
    
    /* Sidebar có notification badge - subtle pulse */
    .sidebar:has(.nav__badge) .brand__icon {
        animation: has-pulse 2s infinite;
    }
    
    @keyframes has-pulse {
        0%, 100% { box-shadow: var(--shadow-glow); }
        50% { box-shadow: 0 0 20px oklch(from var(--color-primary) l c h / 0.5); }
    }
    
    /* ─────────────────────────────────────────────────────────────────────────────────────────
       📊 TABLE ROW STATES & BULK ACTIONS
       ───────────────────────────────────────────────────────────────────────────────────────── */
    
    /* Row với checkbox selected */
    .data-row:has(input[type="checkbox"]:checked) {
        background-color: var(--color-primary-subtle);
    }
    
    /* Row với status badge */
    .data-row:has(.badge--complete) {
        opacity: 0.7;
    }
    
    .data-row:has(.badge--error),
    .data-row:has(.badge--cancelled) {
        background-color: var(--color-error-subtle);
    }
    
    /* Show bulk actions khi có row được chọn */
    .data-table:has(.data-row input:checked) .bulk-actions {
        display: flex;
    }
    
    .data-table:not(:has(.data-row input:checked)) .bulk-actions {
        display: none;
    }
    
    /* ─────────────────────────────────────────────────────────────────────────────────────────
       📭 EMPTY STATE DETECTION - Auto Show/Hide
       ───────────────────────────────────────────────────────────────────────────────────────── */
    
    /* Grid/List container - show empty state khi không có items */
    .data-list:not(:has(.data-item)) .empty-state {
        display: flex;
    }
    
    .data-list:has(.data-item) .empty-state {
        display: none;
    }
    
    /* Builder cards grid - auto show "add" prompt */
    .bld-cards:not(:has(.bld-card)) .bld-empty {
        display: flex;
        flex: 1;
    }
    
    .bld-cards:has(.bld-card) .bld-empty {
        display: none;
    }
    
    /* Table empty state */
    .data-table:not(:has(tbody tr)) .table-empty {
        display: flex;
    }
    
    /* ─────────────────────────────────────────────────────────────────────────────────────────
       📈 KPI CARDS - Dynamic Trend States
       ───────────────────────────────────────────────────────────────────────────────────────── */
    
    /* KPI card với trend indicator - auto đổi gradient */
    .kpi-card:has(.kpi-trend--up) {
        --kpi-gradient: linear-gradient(90deg, var(--color-success), oklch(0.75 0.15 145));
    }
    
    .kpi-card:has(.kpi-trend--down) {
        --kpi-gradient: linear-gradient(90deg, var(--color-error), oklch(0.70 0.18 25));
    }
    
    .kpi-card:has(.kpi-trend--neutral) {
        --kpi-gradient: linear-gradient(90deg, var(--color-info), oklch(0.72 0.14 230));
    }
    
    /* ─────────────────────────────────────────────────────────────────────────────────────────
       🔧 DIALOG & MODAL STATES
       ───────────────────────────────────────────────────────────────────────────────────────── */
    
    /* Dialog với loading state */
    .module-dialog:has(.loading-spinner) {
        pointer-events: none;
    }
    
    .module-dialog:has(.loading-spinner) .module-dialog__body {
        opacity: 0.5;
        filter: blur(2px);
    }
    
    /* Dialog với form validation - disable submit */
    .module-dialog:has(form:invalid) .dialog-submit {
        opacity: 0.5;
        cursor: not-allowed;
    }
    
    /* ─────────────────────────────────────────────────────────────────────────────────────────
       🏗️ BUILDER EDITOR STATES
       ───────────────────────────────────────────────────────────────────────────────────────── */
    
    /* Editor grid với selected widget */
    .bld-editor__grid:has(.bld-widget.is-selected) {
        --grid-highlight: var(--color-primary-subtle);
    }
    
    /* Show properties panel border khi widget selected */
    .bld-editor:has(.bld-widget.is-selected) .bld-editor__sidebar {
        border-color: var(--color-primary);
    }
    
    /* Empty canvas prompt */
    .bld-editor__grid:not(:has(.bld-widget)) .bld-editor__empty {
        display: flex;
    }
    
    .bld-editor__grid:has(.bld-widget) .bld-editor__empty {
        display: none;
    }
    
    /* Drag over state */
    .bld-editor__grid:has(.bld-drop-placeholder) {
        background-color: var(--color-primary-subtle);
        border-color: var(--color-primary);
    }
    
    /* ─────────────────────────────────────────────────────────────────────────────────────────
       🔎 FILTER/SEARCH UI
       ───────────────────────────────────────────────────────────────────────────────────────── */
    
    /* Filter bar với active filters */
    .filter-bar:has(.filter-tag) {
        padding-block-end: var(--space-3);
        border-block-end: 1px solid var(--color-border-subtle);
        margin-block-end: var(--space-4);
    }
    
    /* Show "Clear all" button khi có filters */
    .filter-bar:has(.filter-tag) .filter-clear-all {
        display: inline-flex;
    }
    
    .filter-bar:not(:has(.filter-tag)) .filter-clear-all {
        display: none;
    }
    
    /* Search results visibility */
    .search-results:has(.result-item) .results-count {
        display: block;
    }
    
    .search-results:not(:has(.result-item)) .no-results {
        display: flex;
    }
    
    /* ─────────────────────────────────────────────────────────────────────────────────────────
       🔽 COLLAPSIBLE SECTIONS
       ───────────────────────────────────────────────────────────────────────────────────────── */
    
    /* Accordion - rotate chevron khi expanded */
    .accordion-item:has(input:checked) .accordion-header__icon {
        transform: rotate(180deg);
    }
    
    /* 🔷 interpolate-size — animate height: auto natively (no max-height: 1000px hack) */
    .accordion-content {
        height: 0;
        overflow: hidden;
        padding-block: 0;
        transition: height var(--duration-normal) var(--ease-in-out),
                    padding-block var(--duration-normal) var(--ease-in-out);
    }

    .accordion-item:has(input:checked) .accordion-content {
        height: auto;
        padding-block: var(--space-4);
    }
    
    /* ════════════════════════════════════════════════════════════════════════════════════════
       🔷 CSS SUBGRID ENHANCEMENTS
       🔷 Perfect Alignment - Browser Support: 93% global
       🔷 Chrome 117+, Firefox 71+, Safari 16+, Edge 117+
       ════════════════════════════════════════════════════════════════════════════════════════ */
    
    /* ─────────────────────────────────────────────────────────────────────────────────────────
       📝 FORM LAYOUTS - Perfect Label/Input Alignment
       Subgrid giúp căn chỉnh hoàn hảo giữa các form rows
       ───────────────────────────────────────────────────────────────────────────────────────── */
    
    /* Settings/Preferences Form - 3 column layout với subgrid */
    .settings-form {
        display: grid;
        grid-template-columns: [label] minmax(120px, auto) [input] 1fr [action] auto;
        gap: var(--space-4) var(--space-6);
        align-items: start;
    }
    
    .settings-form__row {
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns: subgrid;
        align-items: center;
        gap: var(--space-3);
        padding-block: var(--space-3);
        border-block-end: 1px solid var(--color-border-subtle);
        
        &:last-child {
            border-block-end: none;
        }
    }
    
    .settings-form__label {
        grid-column: label;
        font-weight: 500;
        font-size: var(--text-sm);
        color: var(--color-text-secondary);
    }
    
    .settings-form__input {
        grid-column: input;
    }
    
    .settings-form__action {
        grid-column: action;
    }
    
    /* Responsive - stack on narrow screens */
    @container main (width < 500px) {
        .settings-form {
            grid-template-columns: 1fr;
        }
        
        .settings-form__row {
            grid-template-columns: 1fr;
            gap: var(--space-2);
        }
        
        .settings-form__label,
        .settings-form__input,
        .settings-form__action {
            grid-column: 1;
        }
    }
    
    /* ─────────────────────────────────────────────────────────────────────────────────────────
       📋 DATA LIST/TABLE - Row Alignment với Subgrid
       ───────────────────────────────────────────────────────────────────────────────────────── */
    
    /* CSS Grid Table - flexible columns với subgrid rows */
    .grid-table {
        display: grid;
        grid-template-columns: 
            [select] auto 
            [avatar] 48px 
            [name] minmax(120px, 1fr) 
            [email] minmax(150px, 1.5fr) 
            [status] auto 
            [date] minmax(100px, auto) 
            [actions] auto;
        gap: 0;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-xl);
        overflow: hidden;
    }
    
    .grid-table__header,
    .grid-table__row {
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns: subgrid;
        align-items: center;
        gap: var(--space-3);
        padding: var(--space-3) var(--space-4);
    }
    
    .grid-table__header {
        background-color: var(--color-bg-subtle);
        font-size: var(--text-xs);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--color-text-muted);
        border-block-end: 1px solid var(--color-border);
    }
    
    .grid-table__row {
        border-block-end: 1px solid var(--color-border-subtle);
        transition: background-color var(--duration-fast);
        
        &:last-child {
            border-block-end: none;
        }
        
        &:hover {
            background-color: var(--color-bg-hover);
        }
    }
    
    /* Column cells */
    .grid-table__cell {
        min-width: 0;
        
        &--select { grid-column: select; justify-self: center; }
        &--avatar { grid-column: avatar; }
        &--name { grid-column: name; font-weight: 500; }
        &--email { grid-column: email; color: var(--color-text-secondary); }
        &--status { grid-column: status; }
        &--date { grid-column: date; font-size: var(--text-sm); color: var(--color-text-muted); }
        &--actions { grid-column: actions; justify-self: end; }
    }
    
    /* Responsive table - hide columns progressively */
    @container main (width < 900px) {
        .grid-table {
            grid-template-columns: 
                [select] auto 
                [avatar] 48px 
                [name] 1fr 
                [status] auto 
                [actions] auto;
        }
        
        .grid-table__cell--email,
        .grid-table__cell--date {
            display: none;
        }
    }
    
    @container main (width < 600px) {
        .grid-table {
            grid-template-columns: 
                [select] auto 
                [name] 1fr 
                [actions] auto;
        }
        
        .grid-table__cell--avatar,
        .grid-table__cell--status {
            display: none;
        }
    }
    
    /* ─────────────────────────────────────────────────────────────────────────────────────────
       🎴 CARD GRID - Aligned Card Content với Subgrid
       ───────────────────────────────────────────────────────────────────────────────────────── */
    
    /* Product/Feature cards với aligned content */
    .product-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
        gap: var(--space-6);
    }
    
    .product-card {
        display: grid;
        grid-template-rows: [image] auto [title] auto [desc] 1fr [price] auto [action] auto;
        gap: var(--space-3);
        background-color: var(--color-bg-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-xl);
        overflow: hidden;
        transition: all var(--duration-normal);
        
        &:hover {
            border-color: var(--color-primary);
            box-shadow: var(--shadow-lg);
        }
    }
    
    .product-card__image {
        grid-row: image;
        aspect-ratio: 16 / 10;
        object-fit: cover;
        background-color: var(--color-bg-subtle);
    }
    
    .product-card__title {
        grid-row: title;
        padding-inline: var(--space-4);
        font-weight: 600;
        font-size: var(--text-lg);
    }
    
    .product-card__desc {
        grid-row: desc;
        padding-inline: var(--space-4);
        font-size: var(--text-sm);
        color: var(--color-text-muted);
        /* Clamp to 3 lines */
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    .product-card__price {
        grid-row: price;
        padding-inline: var(--space-4);
        font-size: var(--text-xl);
        font-weight: 700;
        color: var(--color-primary);
    }
    
    .product-card__action {
        grid-row: action;
        padding: var(--space-4);
        padding-block-start: 0;
    }
    
    /* ─────────────────────────────────────────────────────────────────────────────────────────
       🧭 NAVIGATION MENU - Subgrid cho Icon + Text alignment
       ───────────────────────────────────────────────────────────────────────────────────────── */
    
    .menu-grid {
        display: grid;
        grid-template-columns: [icon] 24px [text] 1fr [badge] auto [arrow] 20px;
        gap: var(--space-1);
    }
    
    .menu-grid__item {
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns: subgrid;
        align-items: center;
        gap: var(--space-3);
        padding: var(--space-3) var(--space-4);
        border-radius: var(--radius-md);
        cursor: pointer;
        transition: all var(--duration-fast);
        
        &:hover {
            background-color: var(--color-bg-hover);
        }
        
        &.is-active {
            background-color: var(--color-primary-subtle);
            color: var(--color-primary);
        }
    }
    
    .menu-grid__icon { grid-column: icon; font-size: 1.25rem; }
    .menu-grid__text { grid-column: text; font-weight: 500; }
    .menu-grid__badge { grid-column: badge; }
    .menu-grid__arrow { grid-column: arrow; color: var(--color-text-muted); }
    
    /* ─────────────────────────────────────────────────────────────────────────────────────────
       📊 STATS/METRICS GRID - Aligned Values
       ───────────────────────────────────────────────────────────────────────────────────────── */
    
    .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
        gap: var(--space-4);
        /* 🔷 Container Style Queries — enable compact mode via --compact */
        container-name: stats;
        /* 🔷 contain — isolate grid layout/paint from siblings */
        contain: layout paint;
    }

    /* 🔷 Container Style Query — condensed stat cards (Chrome 111+)
       Usage: set --compact: true on .stats-grid or ancestor to activate */
    @container stats style(--compact: true) {
        .stat-card { padding: var(--space-2); gap: 0; }
        .stat-card__icon { display: none; }
        .stat-card__value { font-size: var(--text-lg); }
        .stat-card__change { display: none; }
    }

    /* 🔷 @scope — isolates stat card children from external style leaks */
    @scope (.stat-card) {
        :scope {
            display: grid;
            grid-template-rows: [icon] auto [value] auto [label] auto [change] auto;
            gap: var(--space-1);
            padding: var(--space-4);
            background-color: var(--color-bg-surface);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-lg);
            text-align: center;
        }
        .stat-card__icon { grid-row: icon; font-size: 1.5rem; margin-block-end: var(--space-2); }
        .stat-card__value { grid-row: value; font-size: var(--text-2xl); font-weight: 700; }
        .stat-card__label { grid-row: label; font-size: var(--text-sm); color: var(--color-text-muted); }
        .stat-card__change { grid-row: change; font-size: var(--text-xs); margin-block-start: var(--space-1); }
    }
    
    /* ─────────────────────────────────────────────────────────────────────────────────────────
       📝 DEFINITION LIST - Key-Value Pairs với Subgrid
       ───────────────────────────────────────────────────────────────────────────────────────── */
    
    .definition-list {
        display: grid;
        grid-template-columns: [term] minmax(100px, auto) [desc] 1fr;
        gap: var(--space-3) var(--space-6);
    }
    
    .definition-list__item {
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns: subgrid;
        padding-block: var(--space-2);
        border-block-end: 1px solid var(--color-border-subtle);
        
        &:last-child {
            border-block-end: none;
        }
    }
    
    .definition-list__term {
        grid-column: term;
        font-weight: 500;
        font-size: var(--text-sm);
        color: var(--color-text-secondary);
    }
    
    .definition-list__desc {
        grid-column: desc;
    }
    
    /* ─────────────────────────────────────────────────────────────────────────────────────────
       🏗️ BUILDER CANVAS - Widget Grid với Subgrid
       ───────────────────────────────────────────────────────────────────────────────────────── */
    
    .builder-canvas {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: repeat(auto-fill, minmax(40px, auto));
        gap: var(--space-2);
        padding: var(--space-4);
        min-height: 400px;
    }
    
    .builder-widget {
        display: grid;
        grid-template-columns: subgrid;
        grid-template-rows: subgrid;
        background-color: var(--color-bg-surface);
        border: 2px dashed var(--color-border);
        border-radius: var(--radius-lg);
        padding: var(--space-3);
        transition: all var(--duration-fast);
        
        &:hover {
            border-color: var(--color-primary);
            border-style: solid;
        }
        
        &.is-selected {
            border-color: var(--color-primary);
            border-style: solid;
            box-shadow: 0 0 0 3px var(--color-primary-subtle);
        }
    }
    
    /* Widget sizes using grid placement */
    .builder-widget--1x1 { grid-column: span 3; grid-row: span 2; }
    .builder-widget--2x1 { grid-column: span 6; grid-row: span 2; }
    .builder-widget--3x1 { grid-column: span 9; grid-row: span 2; }
    .builder-widget--4x1 { grid-column: span 12; grid-row: span 2; }
    .builder-widget--2x2 { grid-column: span 6; grid-row: span 4; }
    .builder-widget--4x2 { grid-column: span 12; grid-row: span 4; }
    
    /* ─────────────────────────────────────────────────────────────────────────────────────────
       📱 RESPONSIVE FORM - Inline to Stacked với Subgrid
       ───────────────────────────────────────────────────────────────────────────────────────── */
    
    .inline-form {
        display: grid;
        grid-template-columns: [label] auto [input] 1fr [submit] auto;
        gap: var(--space-3);
        align-items: end;
    }
    
    .inline-form__group {
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns: subgrid;
        align-items: end;
    }
    
    .inline-form__label { grid-column: label; }
    .inline-form__input { grid-column: input; }
    .inline-form__submit { grid-column: submit; }
    
    @container main (width < 500px) {
        .inline-form {
            grid-template-columns: 1fr;
        }
        
        .inline-form__group {
            grid-template-columns: 1fr;
            gap: var(--space-2);
        }
        
        .inline-form__label,
        .inline-form__input,
        .inline-form__submit {
            grid-column: 1;
        }
    }
    
    /* ─────────────────────────────────────────────────────────────────────────────────────────
       🎯 FEATURE COMPARISON TABLE
       ───────────────────────────────────────────────────────────────────────────────────────── */
    
    .comparison-table {
        display: grid;
        grid-template-columns: [feature] minmax(150px, 1fr) repeat(var(--plans, 3), [plan] 1fr);
        gap: 0;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-xl);
        overflow: hidden;
    }
    
    .comparison-table__header,
    .comparison-table__row {
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns: subgrid;
    }
    
    .comparison-table__header {
        background-color: var(--color-bg-subtle);
        font-weight: 600;
    }
    
    .comparison-table__cell {
        padding: var(--space-4);
        border-block-end: 1px solid var(--color-border-subtle);
        display: flex;
        align-items: center;
        justify-content: center;
        
        &:first-child {
            justify-content: flex-start;
            font-weight: 500;
        }
    }
    
    .comparison-table__row:last-child .comparison-table__cell {
        border-block-end: none;
    }
    
    /* Check/X indicators */
    .comparison-table__check { color: var(--color-success); font-size: 1.25rem; }
    .comparison-table__cross { color: var(--color-text-muted); font-size: 1.25rem; }
    
    /* ════════════════════════════════════════════════════════════════════════════════════════
       🛡️ FEATURE DETECTION FALLBACKS
       ════════════════════════════════════════════════════════════════════════════════════════ */
    
    /* Subgrid fallback (93% support) */
    @supports not (grid-template-columns: subgrid) {
        .settings-form__row,
        .grid-table__header,
        .grid-table__row,
        .menu-grid__item,
        .definition-list__item,
        .inline-form__group,
        .comparison-table__header,
        .comparison-table__row {
            grid-template-columns: inherit;
        }
        
        .builder-widget {
            display: block;
        }
    }
    
    /* :has() selector fallback (94% support) - needs JavaScript to add classes */
    @supports not selector(:has(*)) {
        .form-group.is-invalid .form-error {
            display: block;
        }
        
        .selectable-card.is-selected {
            border-color: var(--color-primary);
            background-color: var(--color-primary-subtle);
        }
        
        .data-list.is-empty .empty-state {
            display: flex;
        }
        
        .data-row.is-selected {
            background-color: var(--color-primary-subtle);
        }
    }
    
    /* 🔷 Popover API fallback (97% support) - for older browsers */
    @supports not selector(:popover-open) {
        .priority-nav__overflow {
            /* Revert to old visibility-based approach */
            opacity: 0;
            visibility: hidden;
            transform: translateY(-8px);
            
            &.is-open {
                opacity: 1;
                visibility: visible;
                transform: translateY(0);
            }
        }
    }
}


/* ─── Shared dialog & button primitives (auth, publish, settings popups) ─── */
@layer components {

    /* Dialog */
    .ea__dialog {
        border: none;
        border-radius: var(--radius-xl);
        padding: 0;
        background: var(--color-bg-surface);
        color: var(--color-text);
        box-shadow: var(--shadow-xl);
        max-width: min(500px, calc(100vw - var(--space-8)));
        max-height: min(85dvh, 700px);
        overflow-y: auto;

        &::backdrop {
            background: oklch(0 0 0 / 0.4);
            backdrop-filter: blur(4px);
        }
    }

    /* Security dialog content */
    .ea__sec {
        padding: clamp(1.5rem, 5vw, 2.5rem) clamp(1.25rem, 4vw, 2rem);
        text-align: start;
    }

    .ea__sec-title {
        font-size: var(--text-lg);
        font-weight: 700;
        margin: 0 0 var(--space-5);
        text-align: center;
    }

    .ea__sec-label {
        font-size: var(--text-sm);
        font-weight: 650;
        margin: 0 0 var(--space-1);
    }

    .ea__sec-hint {
        font-size: var(--text-xs);
        color: var(--color-text-muted);
        margin: 0 0 var(--space-3);
        line-height: var(--leading-relaxed);
    }

    .ea__sec-fields {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
    }

    .ea__sec-input {
        padding: var(--space-2) var(--space-3);
        border: 1.5px solid var(--color-border);
        border-radius: var(--radius-md);
        font: inherit;
        font-size: var(--text-sm);
        background: var(--color-bg-surface);
        color: var(--color-text);
        transition: border-color var(--duration-fast);

        &:focus {
            outline: none;
            border-color: var(--color-primary);
            box-shadow: 0 0 0 3px oklch(from var(--color-primary) l c h / 0.15);
        }
    }

    .ea__sec-section {
        margin-top: var(--space-5);
        padding-top: var(--space-5);
        border-top: 1px solid var(--color-border-subtle);
    }

    .ea__sec-close {
        margin-top: var(--space-5);
        width: 100%;
    }

    /* Reusable buttons */
    .eos-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-2);
        padding: var(--space-2) var(--space-4);
        font: inherit;
        font-size: var(--text-sm);
        font-weight: 600;
        border: 1.5px solid transparent;
        border-radius: var(--radius-md);
        cursor: pointer;
        transition: all var(--duration-fast);
    }

    .eos-btn--primary {
        background: var(--color-primary);
        color: white;
        border-color: var(--color-primary);

        &:hover { background: var(--color-primary-hover); }
    }

    .eos-btn--outline {
        background: transparent;
        border-color: var(--color-border);
        color: var(--color-text);

        &:hover { background: var(--color-bg-hover); }
    }

    .eos-btn--danger {
        color: var(--color-error);
        border-color: var(--color-error);
        background: transparent;

        &:hover { background: oklch(from var(--color-error) l c h / 0.08); }
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   ╔═════════════════════════════════════════════════════════════════════════════════════════╗
   ║                           🛠️ UTILITIES LAYER                                            ║
   ╚═════════════════════════════════════════════════════════════════════════════════════════╝
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
@layer utilities {
    .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
    .skip-link { position: absolute; top: -100%; left: 50%; transform: translateX(-50%); z-index: 99999; padding: 0.75em 1.5em; background: var(--color-accent); color: white; border-radius: var(--radius-md); font-weight: 600; text-decoration: none; transition: top 0.2s; }
    .skip-link:focus { top: var(--space-3); }
    .hidden { display: none !important; }
    .flex { display: flex; }
    .grid { display: grid; }
    .inline-flex { display: inline-flex; }
    .flex-col { flex-direction: column; }
    .flex-wrap { flex-wrap: wrap; }
    .items-center { align-items: center; }
    .items-start { align-items: flex-start; }
    .justify-center { justify-content: center; }
    .justify-between { justify-content: space-between; }
    .place-items-center { place-items: center; }
    .gap-1 { gap: var(--space-1); }
    .gap-2 { gap: var(--space-2); }
    .gap-3 { gap: var(--space-3); }
    .gap-4 { gap: var(--space-4); }
    .gap-6 { gap: var(--space-6); }
    .w-full { width: 100%; }
    .h-full { height: 100%; }
    .min-w-0 { min-width: 0; }
    .text-center { text-align: center; }
    .font-medium { font-weight: 500; }
    .font-semibold { font-weight: 600; }
    .font-bold { font-weight: 700; }
    /* 🔷 overflow: clip — no scroll container needed for text truncation */
    .truncate { overflow: clip; text-overflow: ellipsis; white-space: nowrap; }
    .text-primary { color: var(--color-text); }
    .text-secondary { color: var(--color-text-secondary); }
    .text-muted { color: var(--color-text-muted); }
    .text-success { color: var(--color-success); }
    .text-error { color: var(--color-error); }
    .rounded { border-radius: var(--radius-md); }
    .rounded-lg { border-radius: var(--radius-lg); }
    .rounded-xl { border-radius: var(--radius-xl); }
    .rounded-full { border-radius: var(--radius-full); }
    
    /* ═══════════════════════════════════════════════════════════════════════════════════════
       🎯 :has() UTILITY HELPERS
       🔷 Generic utilities - Component-specific :has() rules are in @layer components
       ═══════════════════════════════════════════════════════════════════════════════════════ */
    
    /* 🔷 Generic card with image - adjust layout */
    .card:has(img) {
        display: grid;
        grid-template-rows: auto 1fr;
    }
    
    .card:not(:has(img)) {
        padding: var(--space-6);
    }
    
    /* 🔷 Button group states */
    .btn-group:has(.btn:disabled) {
        opacity: 0.7;
    }
    
    .btn-group:has(.btn.is-active) {
        --btn-group-active: 1;
    }
    
    /* 🔷 Details/Summary enhancement */
    details:has([open]) > summary {
        color: var(--color-primary);
        font-weight: 600;
    }
    
    details:has([open]) > summary::after {
        transform: rotate(90deg);
    }
    
    /* 🔷 Container với nhiều items - auto scroll */
    .scroll-container:has(> *:nth-child(5)) {
        overflow-y: auto;
        max-height: 400px;
    }
    
    /* 🔷 Section với empty content */
    .section:has(.section__body:empty)::after {
        content: "Không có dữ liệu";
        display: block;
        text-align: center;
        padding: var(--space-8);
        color: var(--color-text-muted);
    }
    
    /* 🔷 Wrapper có focused child */
    .focus-within-highlight:has(:focus) {
        outline: 2px solid var(--color-primary);
        outline-offset: 2px;
    }
    
    /* 🔷 Parent của disabled element */
    .disabled-parent:has(:disabled) {
        opacity: 0.6;
        pointer-events: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   ╔═════════════════════════════════════════════════════════════════════════════════════════╗
   ║                           🎬 ANIMATIONS LAYER                                           ║
   ╚═════════════════════════════════════════════════════════════════════════════════════════╝
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
@layer animations {
    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
    @keyframes slideUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes scaleIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
    @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
    @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
    
    .animate-fadeIn { animation: fadeIn var(--duration-normal) var(--ease-out) forwards; will-change: opacity; }
    .animate-slideUp { animation: slideUp var(--duration-normal) var(--ease-out) forwards; will-change: transform, opacity; }
    .animate-scaleIn { animation: scaleIn var(--duration-normal) var(--ease-spring) forwards; will-change: transform, opacity; }
    .animate-spin { animation: spin 1s linear infinite; will-change: transform; }
    .animate-pulse { animation: pulse 2s var(--ease-in-out) infinite; }
    
    /* Loading Spinner */
    .spinner {
        width: 32px;
        height: 32px;
        border: 3px solid var(--color-border);
        border-top-color: var(--color-primary);
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
        will-change: transform;
    }
    
    /* 🔷 Scroll-driven animations (when supported) */
    @supports (animation-timeline: scroll()) {
        .animate-on-scroll {
            animation: slideUp linear both;
            animation-timeline: view();
            animation-range: entry 0% cover 40%;
        }
    }
}

/* 🔷 Container Style Queries — sidebar adapts to --compact state */
@container style(--sidebar-compact: true) {
    .sidebar__label { display: none; }
    .sidebar__icon { font-size: 1.5rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   ╔═════════════════════════════════════════════════════════════════════════════════════════╗
   ║                    🔷 CSS ANCHOR POSITIONING (Chrome 125+)                              ║
   ║        Progressive enhancement — fallback to absolute positioning                       ║
   ╚═════════════════════════════════════════════════════════════════════════════════════════╝
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* Dropdown trigger establishes an anchor */
.eos-dropdown__trigger,
[data-anchor-name] {
    anchor-name: --trigger;
}

/* 🔷 Anchor-positioned dropdown — auto-flips when clipped */
@supports (position-anchor: --trigger) {
    .eos-dropdown__menu {
        position: fixed;
        position-anchor: --trigger;
        top: anchor(bottom);
        left: anchor(left);
        margin-block-start: var(--space-1);
        
        /* 🔷 position-try-fallbacks — flip if no room below */
        position-try-fallbacks: flip-block, flip-inline;
        position-visibility: anchors-visible;
    }
}

/* Tooltip anchor positioning */
@supports (position-anchor: --tooltip-anchor) {
    [data-tooltip] { anchor-name: --tooltip-anchor; }
    
    .eos-tooltip {
        position: fixed;
        position-anchor: --tooltip-anchor;
        bottom: anchor(top);
        left: anchor(center);
        translate: -50% 0;
        margin-block-end: var(--space-2);
        position-try-fallbacks: flip-block;
        position-visibility: anchors-visible;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   ╔═════════════════════════════════════════════════════════════════════════════════════════╗
   ║                🔷 SCROLL-DRIVEN ANIMATIONS (Chrome 115+)                                ║
   ║        Zero-JS scroll progress, parallax, and reveal effects                            ║
   ╚═════════════════════════════════════════════════════════════════════════════════════════╝
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* 🔷 Scroll progress indicator — replaces JS scroll event listeners */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--color-primary);
    transform-origin: left;
    z-index: var(--z-fixed);

    animation: scroll-grow linear both;
    animation-timeline: scroll(root);
}

@keyframes scroll-grow {
    from { scale: 0 1; }
    to { scale: 1 1; }
}

/* 🔷 Main content scroll progress — thin bar at top of content area
   Uses named scroll-timeline from .main { scroll-timeline: --main-scroll block }
   Only visible when content overflows — pure CSS, zero JS */
@supports (animation-timeline: scroll()) {
    .main::before {
        content: '';
        position: sticky;
        top: calc(-1 * var(--space-6));
        left: 0;
        display: block;
        height: 2px;
        margin: calc(-1 * var(--space-6)) calc(-1 * var(--space-6)) 0;
        background: var(--color-primary);
        transform-origin: left;
        z-index: var(--z-raised);
        animation: scroll-grow linear both;
        animation-timeline: --main-scroll;
    }
}

/* 🔷 Scroll-linked fade-in for cards and list items */
@supports (animation-timeline: view()) {
    .scroll-reveal {
        animation: scroll-fade-in linear both;
        animation-timeline: view();
        animation-range: entry 0% cover 30%;
    }

    @keyframes scroll-fade-in {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
    }

    /* Staggered reveal for grid items */
    .scroll-reveal-stagger > * {
        animation: scroll-fade-in linear both;
        animation-timeline: view();
        animation-range: entry 0% cover 40%;
    }

    /* 🔷 Auto-apply scroll reveal to dashboard stat cards and section cards
       Progressive enhancement — no JS changes needed, graceful fallback */
    .stats-grid > .stat-card,
    .chart-stat-card {
        animation: scroll-fade-in linear both;
        animation-timeline: view();
        animation-range: entry 0% cover 40%;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   ╔═════════════════════════════════════════════════════════════════════════════════════════╗
   ║                    🔷 EXCLUSIVE ACCORDION (Chrome 120+)                                 ║
   ║        Native <details name="group"> exclusivity                                        ║
   ╚═════════════════════════════════════════════════════════════════════════════════════════╝
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* 🔷 Animate details open/close with interpolate-size */
details {
    overflow: clip;
    
    &[open] > :not(summary) {
        animation: details-open var(--duration-normal) var(--ease-out);
    }
}

@keyframes details-open {
    from { opacity: 0; translate: 0 -8px; }
}

/* 🔷 View Transitions — SPA module switching (Chrome 111+) */

.app__main {
    view-transition-name: main-content;
}

.app__sidebar {
    view-transition-name: sidebar;
}

::view-transition-old(main-content) {
    animation: vt-fade-out 150ms ease-out both;
}

::view-transition-new(main-content) {
    animation: vt-fade-in 150ms ease-out both;
}

::view-transition-group(sidebar) {
    animation-duration: 0s; /* Sidebar stays still during transitions */
}

@keyframes vt-fade-out {
    to { opacity: 0; }
}

@keyframes vt-fade-in {
    from { opacity: 0; }
}

/* 🔷 Theme switching — smooth 200ms crossfade for all colors */
::view-transition-old(root) {
    animation: vt-fade-out 200ms ease-out both;
}
::view-transition-new(root) {
    animation: vt-fade-in 200ms ease-in both;
    mix-blend-mode: normal;
}

/* 🔷 Respect reduced motion for view transitions */
@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
        animation-duration: 0.01ms !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════════════════
   🔷 PWA — Offline / Connectivity Indicator
   
   Uses [data-offline] attribute set by core/pwa.js on <html> element.
   Shows a subtle offline banner without JavaScript — pure CSS.
   ═══════════════════════════════════════════════════════════════════════════════════════ */
@layer utilities {
    /* Offline banner — appears at top of page when data-offline is set */
    html[data-offline]::after {
        content: '📡 Offline — dữ liệu có thể không cập nhật';
        position: fixed;
        inset-block-start: 0;
        inset-inline: 0;
        z-index: var(--z-max);
        padding: var(--space-1-5) var(--space-4);
        background: light-dark(
            oklch(0.85 0.12 55),
            oklch(0.35 0.10 55)
        );
        color: light-dark(
            oklch(0.25 0.05 55),
            oklch(0.95 0.02 55)
        );
        font-size: var(--text-xs);
        font-weight: 500;
        text-align: center;
        animation: slideDown 0.3s ease-out;
    }
    
    /* Push app content down when offline banner is visible */
    html[data-offline] body {
        padding-block-start: 30px;
    }
    
    @keyframes slideDown {
        from { transform: translateY(-100%); }
        to { transform: translateY(0); }
    }
    
    @media (prefers-reduced-motion: reduce) {
        html[data-offline]::after { animation: none; }
    }
    
    /* PWA standalone mode — adjust for window controls overlay */
    @media (display-mode: standalone) {
        .app__header {
            padding-block-start: env(titlebar-area-height, 0);
        }
    }
    
    @media (display-mode: window-controls-overlay) {
        .app__header {
            padding-inline-start: env(titlebar-area-x, 0);
            padding-block-start: env(titlebar-area-height, 0);
        }
        
        .app__header-title {
            -webkit-app-region: drag;
            app-region: drag;
        }
    }
}


/* ═══════════════════════════════════════════════════════════════════════════════════════════
   ╔═════════════════════════════════════════════════════════════════════════════════════════╗
   ║                    🔷 SCROLL-SNAP — Native Carousel & List UX                          ║
   ║                          Baseline 2023 — 97% Support                                    ║
   ╚═════════════════════════════════════════════════════════════════════════════════════════╝
   
   Horizontal scrollable containers with snap points for:
   - Pipeline/Kanban stages (CRM)
   - Appointment timeline (Clinic)
   - Section navigator (Website Builder)
   - Tab bar overflow on mobile
   - Card carousels
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
@layer components {
    
    /* ─────────────────────────────────────────────────────────────────────────────────────────
       Generic snap container — add .snap-x or .snap-y to any scrollable
       ───────────────────────────────────────────────────────────────────────────────────────── */
    .snap-x {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--space-4);
        overscroll-behavior-x: contain;
        /* Hide scrollbar on mobile, show thin on desktop */
        scrollbar-width: thin;
        
        &::-webkit-scrollbar { height: 4px; }
        &::-webkit-scrollbar-thumb { 
            background: oklch(from var(--color-text) l c h / 0.2);
            border-radius: var(--radius-full);
        }
    }
    
    .snap-y {
        overflow-y: auto;
        scroll-snap-type: y mandatory;
        scroll-padding-block: var(--space-4);
        overscroll-behavior-y: contain;
    }
    
    /* Snap proximity — gentler snapping (good for long content) */
    .snap-x-proximity { 
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scroll-padding-inline: var(--space-4);
        overscroll-behavior-x: contain;
    }
    
    /* Snap alignment utilities */
    .snap-start { scroll-snap-align: start; }
    .snap-center { scroll-snap-align: center; }
    .snap-end { scroll-snap-align: end; }
    
    /* Snap stop — prevents skipping items during fast scroll */
    .snap-stop { scroll-snap-stop: always; }
    
    /* ─────────────────────────────────────────────────────────────────────────────────────────
       Pipeline/Kanban horizontal stages — CRM
       ───────────────────────────────────────────────────────────────────────────────────────── */
    .pipeline-stages {
        display: flex;
        gap: var(--space-4);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--space-4);
        overscroll-behavior-x: contain;
        padding-block: var(--space-2);
        
        & > * {
            scroll-snap-align: start;
            min-width: min(85vw, 320px);
            flex-shrink: 0;
        }
    }
    
    /* ─────────────────────────────────────────────────────────────────────────────────────────
       Tab bar overflow — snaps to active tab
       ───────────────────────────────────────────────────────────────────────────────────────── */
    .tab-bar-scroll {
        display: flex;
        gap: var(--space-1);
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scroll-padding-inline: var(--space-3);
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        
        &::-webkit-scrollbar { display: none; }
        
        & > * {
            scroll-snap-align: center;
            flex-shrink: 0;
        }
    }
    
    /* ─────────────────────────────────────────────────────────────────────────────────────────
       Card carousel — horizontal card scroller
       ───────────────────────────────────────────────────────────────────────────────────────── */
    .card-carousel {
        display: flex;
        gap: var(--space-4);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--space-6);
        overscroll-behavior-x: contain;
        padding: var(--space-2) 0;
        
        scrollbar-width: none;
        &::-webkit-scrollbar { display: none; }
        
        & > * {
            scroll-snap-align: start;
            scroll-snap-stop: always;
            min-width: min(90vw, 340px);
            flex-shrink: 0;
        }
    }
    
    /* ─────────────────────────────────────────────────────────────────────────────────────────
       Vertical snap — timeline/schedule view
       ───────────────────────────────────────────────────────────────────────────────────────── */
    .timeline-snap {
        overflow-y: auto;
        scroll-snap-type: y proximity;
        scroll-padding-block: var(--space-4);
        overscroll-behavior-y: contain;
        
        & > * {
            scroll-snap-align: start;
        }
    }
}


/* ═══════════════════════════════════════════════════════════════════════════════════════════
   ╔═════════════════════════════════════════════════════════════════════════════════════════╗
   ║               🔷 VIEW-TRANSITION-CLASS — Group Element Transitions                      ║
   ║                          Chrome 125+ / Baseline 2025                                    ║
   ╚═════════════════════════════════════════════════════════════════════════════════════════╝
   
   Group multiple elements under same transition animation class,
   eliminating need for unique view-transition-name per element.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
@layer transitions {

    /* Cards — all cards crossfade together */
    .card, .data-card, .stat-card {
        view-transition-class: eos-card;
    }

    ::view-transition-group(*.eos-card) {
        animation-duration: 150ms;
        animation-timing-function: ease-out;
    }

    /* List items — table rows, list entries */
    .data-row, .list-item {
        view-transition-class: eos-list-item;

        /* 🔷 CSS Containment — isolate rows for fast reflow during virtual scroll */
        contain: layout style;
    }

    ::view-transition-group(*.eos-list-item) {
        animation-duration: 100ms;
        animation-timing-function: ease-out;
    }

    /* Navigation items — stay still */
    .nav__item {
        view-transition-class: eos-nav;
    }

    ::view-transition-group(*.eos-nav) {
        animation-duration: 0s;
    }

    /* 🔷 Reduced motion override */
    @media (prefers-reduced-motion: reduce) {
        ::view-transition-group(*.eos-card),
        ::view-transition-group(*.eos-list-item) {
            animation-duration: 0.01ms !important;
        }
    }
}


/* ═══════════════════════════════════════════════════════════════════════════════════════════
   ╔═════════════════════════════════════════════════════════════════════════════════════════╗
   ║               🔷 CSS MATH FUNCTIONS — round(), mod(), rem()                             ║
   ║                          Baseline 2024 — 94% Support                                    ║
   ╚═════════════════════════════════════════════════════════════════════════════════════════╝
   
   Advanced math operations for pixel-perfect calculations.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
@layer utilities {
    
    /* 🔷 round() — snap to pixel grid, prevent subpixel rendering */
    .text-grid-snapped {
        font-size: round(nearest, var(--text-base), 1px);
        line-height: round(up, calc(var(--text-base) * var(--leading-normal)), 1px);
    }
    
    /* 🔷 mod() — cycle through hue for auto-colored tags/badges
       🔷 light-dark() — theme-aware without [data-theme="dark"] duplication */
    .auto-hue {
        --_hue: mod(calc(var(--index, 0) * 47), 360);
        --_badge-color: light-dark(oklch(0.70 0.16 var(--_hue)), oklch(0.80 0.14 var(--_hue)));
        --_badge-bg: light-dark(oklch(0.95 0.04 var(--_hue)), oklch(0.25 0.06 var(--_hue)));
        color: var(--_badge-color);
        background: var(--_badge-bg);
    }
    
    /* 🔷 round() — snap icon sizes to even pixels (crisp rendering) */
    .icon {
        width: round(nearest, 1.25em, 2px);
        height: round(nearest, 1.25em, 2px);
    }
    
    /* 🔷 round() — grid-aligned spacing */
    .grid-aligned {
        padding: round(nearest, var(--space-4), 4px);
        gap: round(nearest, var(--space-3), 4px);
    }
    
    /* 🔷 rem() — remainder for alternating patterns (even/odd rows without nth-child) */
    .stripe-row {
        --_stripe: rem(var(--row-index, 0), 2);
        /* Use with calc: if _stripe == 0 → even, else → odd */
    }
}


/* ═══════════════════════════════════════════════════════════════════════════════════════════
   ╔═════════════════════════════════════════════════════════════════════════════════════════╗
   ║               🔷 CSS CUSTOM HIGHLIGHT API — Search Result Styling                       ║
   ║                          Baseline 2024 — 91% Support                                    ║
   ╚═════════════════════════════════════════════════════════════════════════════════════════╝
   
   Zero-DOM-mutation text highlighting via CSS.highlights registry.
   Used by CommandPalette, search modules, text editors.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
@layer components {
    
    /* 🔷 Search result highlight — set via CSS.highlights.set('search-result', ...)
       🔷 light-dark() — theme-aware without [data-theme="dark"] duplication */
    ::highlight(search-result) {
        background-color: light-dark(oklch(0.88 0.16 85 / 0.6), oklch(0.45 0.14 85 / 0.5));
        color: light-dark(oklch(0.20 0.05 85), oklch(0.95 0.03 85));
    }

    /* 🔷 Active/focused search match */
    ::highlight(search-active) {
        background-color: light-dark(oklch(0.75 0.20 45), oklch(0.55 0.18 45 / 0.7));
        color: light-dark(oklch(0.15 0.05 45), oklch(0.98 0.02 45));
    }
    
    /* 🔷 Spell check / validation errors */
    ::highlight(spelling-error) {
        text-decoration: wavy underline oklch(0.65 0.22 25);
        text-underline-offset: 3px;
    }
    
    /* 🔷 Diff highlighting — additions and deletions */
    ::highlight(diff-added) {
        background-color: oklch(0.92 0.08 145 / 0.4);
    }
    
    ::highlight(diff-removed) {
        background-color: oklch(0.92 0.08 25 / 0.4);
        text-decoration: line-through;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════════════════════
   ╔═════════════════════════════════════════════════════════════════════════════════════════╗
   ║               🔷 @media (scripting) — Progressive Enhancement                          ║
   ║                          Baseline 2024 — 89% Support                                    ║
   ╚═════════════════════════════════════════════════════════════════════════════════════════╝
   
   Graceful degradation khi JS disabled hoặc chưa load.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
@layer utilities {
    
    /* Nội dung chỉ hiện khi KHÔNG có JS */
    .js-only { display: none; }
    .no-js-only { display: block; }
    
    @media (scripting: enabled) {
        .js-only { display: revert; }
        .no-js-only { display: none; }
    }
    
    /* Khi JS bị tắt — hiện fallback message */
    @media (scripting: none) {
        .app__loading { display: none !important; }
        
        .app::after {
            content: '⚠️ Enterprise OS yêu cầu JavaScript để hoạt động. Vui lòng bật JavaScript trong cài đặt trình duyệt.';
            display: flex;
            align-items: center;
            justify-content: center;
            position: fixed;
            inset: 0;
            padding: var(--space-8);
            background: var(--color-bg-base);
            color: var(--color-text);
            font-size: var(--text-lg);
            text-align: center;
            z-index: var(--z-max);
        }
    }
    
    /* SSR/initial-only: content pre-rendered, interactive features chưa sẵn sàng */
    @media (scripting: initial-only) {
        /* Ẩn các nút interactive cho đến khi JS hydrate */
        button:not([type="submit"]),
        [role="button"] {
            opacity: 0.5;
            pointer-events: none;
        }
    }
}


/* ═══════════════════════════════════════════════════════════════════════════════════════════
   ╔═════════════════════════════════════════════════════════════════════════════════════════╗
   ║               🔷 @scope — Component Style Isolation (Baseline 2024)                     ║
   ║                     Chrome 118+, Edge 118+, Safari 17.4+                                ║
   ╚═════════════════════════════════════════════════════════════════════════════════════════╝
   
   @scope limits style reach — no styles leak into nested components.
   Lower-boundary (:to) prevents styles from reaching child scopes.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
@layer components {
    
    /* 🔷 @scope for toast container — styles don't leak into toast content slots */
    @scope (.toast-container) to (.toast__content) {
        :scope {
            /* Scoped custom properties for animation control */
            --_toast-gap: var(--space-3);
        }
        .toast {
            /* 🔷 @starting-style for toast entry animation */
            @starting-style {
                &.is-visible {
                    opacity: 0;
                    transform: translateX(100%);
                }
            }
        }
    }
    
    /* 🔷 @scope for module dialog — isolate dialog chrome from dialog body content */
    @scope (.module-dialog) to (.module-dialog__body > *) {
        :scope {
            /* Scoped reset — dialog chrome doesn't inherit content fonts */
            font-family: var(--font-sans);
            font-size: var(--text-base);
        }
        .module-dialog__header {
            /* 🔷 text-wrap: balance — prevent orphans in dialog titles */
            text-wrap: balance;
        }
    }
}


/* ═══════════════════════════════════════════════════════════════════════════════════════════
   ╔═════════════════════════════════════════════════════════════════════════════════════════╗
   ║               🔷 content-visibility: auto — Render-on-demand (Baseline 2024)            ║
   ║               🔷 Scroll-driven Animations utilities (Baseline 2024)                     ║
   ╚═════════════════════════════════════════════════════════════════════════════════════════╝
   
   Skip rendering of off-screen content to improve initial paint and scroll FPS.
   contain-intrinsic-size avoids layout shift when content renders.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
@layer utilities {
    
    /* 🔷 content-visibility: auto — lazy-render off-screen cards */
    .cv-auto {
        content-visibility: auto;
        contain-intrinsic-size: auto 300px;
    }
    
    /* Larger blocks (data tables, settings panels) */
    .cv-auto-lg {
        content-visibility: auto;
        contain-intrinsic-size: auto 600px;
    }
    
    /* 🔷 interpolate-size: allow-keywords — animate to/from auto heights */
    .animate-height {
        interpolate-size: allow-keywords;
        transition: height var(--duration-normal) var(--ease-out);
    }
    
    /* 🔷 round() function — pixel-perfect grid alignment */
    .grid-aligned {
        width: round(nearest, 100%, 1px);
        height: round(nearest, 100%, 1px);
    }
    
    /* 🔷 Scroll-driven animation — fade in when scrolled into view */
    @supports (animation-timeline: view()) {
        .animate-on-scroll {
            animation: fade-in-up linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 100%;
        }
        
        @keyframes fade-in-up {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
    }
    
    /* 🔷 field-sizing: content — textarea auto-grows with content */
    .field-auto {
        field-sizing: content;
        min-height: 2lh;
        max-height: 20lh;
    }
    
    /* 🔷 transition-behavior: allow-discrete — animate display/overlay properties
       Enables smooth show/hide transitions for elements with display:none toggling.
       Baseline 2024 (Chrome 117+, Safari 17.4+, Firefox 129+) */
    .discrete-transition {
        transition-behavior: allow-discrete;
    }
    
    /* 🔷 overflow: clip — performant clipping without scroll container
       Unlike overflow:hidden, does NOT create a scroll container.
       Use for decorative clipping (cards, badges, pills). Baseline 2022. */
    .overflow-clip {
        overflow: clip;
    }
    
    /* 🔷 font-variant-numeric: tabular-nums — consistent number column alignment */
    .tabular-nums {
        font-variant-numeric: tabular-nums;
    }
    
    /* 🔷 @media (hover: hover) — only apply hover effects on hover-capable devices
       Prevents :hover from "sticking" on touch devices after tap. Baseline widely. */
    @media (hover: hover) {
        .hover-lift:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-lg);
        }
        .hover-glow:hover {
            box-shadow: 0 0 0 3px oklch(from var(--color-brand) l c h / 0.25);
        }
    }
    
    /* 🔷 :focus-visible — consistent keyboard focus ring utility */
    .focus-ring:focus-visible {
        outline: 2px solid var(--color-brand);
        outline-offset: 2px;
    }
    
    /* 🔷 text-wrap: pretty — improved last-line balancing for paragraphs
       Avoids orphaned words on the last line. Chrome 117+, Safari 17.4+. */
    .text-pretty {
        text-wrap: pretty;
    }
    
    /* 🔷 will-change hint — opt-in GPU compositing for heavy animations */
    .will-animate {
        will-change: transform, opacity;
    }
    
    /* 🔷 contain: content — isolate layout/paint for performance */
    .contain-content {
        contain: content;
    }
    
    /* 🔷 Dynamic viewport units — correct for mobile browser chrome */
    .h-dvh { height: 100dvh; }
    .min-h-dvh { min-height: 100dvh; }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   🔷 POPOVER OVERRIDES — must be OUTSIDE @layer to beat UA [popover] defaults
   🔷 CSS Anchor Positioning (Baseline 2026) — menu anchored to button, auto-flips
   ═══════════════════════════════════════════════════════════════════════════════════════ */

#user-btn {
    anchor-name: --user-btn;
}

#user-menu {
    position: fixed;
    position-anchor: --user-btn;

    /* Anchor to bottom-right of button, menu's top-right corner aligns */
    inset: auto;
    top: anchor(bottom);
    right: anchor(right);
    margin-top: var(--space-1);

    /* 🔷 position-try-fallbacks — auto-flip if not enough space below */
    position-try-fallbacks: flip-block;

    width: clamp(240px, 30vw, 300px);
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg-surface);
    box-shadow: var(--shadow-lg);

    opacity: 1;
    transform: translateY(0);
    transition: opacity var(--duration-fast), transform var(--duration-fast),
                display var(--duration-fast) allow-discrete;
}

#user-menu:not(:popover-open) {
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
}

@starting-style {
    #user-menu:popover-open {
        opacity: 0;
        transform: translateY(-4px);
    }
}