/* -------------------------------------------------------------------------- */
/*                                Design System                               */
/* -------------------------------------------------------------------------- */

:root {
    /* -------------------------------------------------------------------------- */
    /*                              Hyper Parameters                              */
    /* -------------------------------------------------------------------------- */

    /* --- Style Weight (Continuous) --- */
    /* 0.0 = Fine/Flat */
    /* 1.0 = Balanced */
    /* 2.0 = Heavy/Chunky */
    /* Can be any float: 0.5, 1.2, 2.5 etc. */
    --hp-style-weight: 1;

    /* --- Density (Continuous) --- */
    /* 0.5 = Compact */
    /* 1.0 = Standard */
    /* 1.5 = Spacious */
    --hp-density: 1;

    /* --- Contrast Range (Continuous) --- */
    /* Controls the "drama" or difference between: */
    /* - Smallest and Largest text sizes */
    /* - Lightest and Heaviest font weights */
    /* 0.0 = Flat/Uniform (Low contrast) */
    /* 1.0 = Standard */
    /* 2.0 = High Contrast (Dramatic size/weight diffs) */
    --hp-range: 1.0;

    /* --- Border & Shadow Scaling --- */
    --hp-border-scale: 1;
    /* 0 = No border (Floating), 1 = Standard, 2 = Thick */
    --hp-shadow-scale: 1;
    /* 0 = Flat, 1 = Standard, 2 = Deep/Soft */

    /* --- Corner Scale (NEW - independent of style weight) --- */
    /* 0 = Square (Metro/Software), 0.5 = Subtle, 1 = Standard, 2 = Rounded (Web) */
    --hp-corner-scale: 0;

    /* --- Sharpness (NEW - crisp vs soft aesthetic) --- */
    /* 0 = Soft/Diffuse, 1 = Balanced, 2 = Crisp/Sharp */
    /* Affects: shadow blur, border definition, color intensity */
    --hp-sharpness: 1;

    /* --- Color Seeds (Full HSL Control) --- */
    --hp-hue-1: 210;
    --hp-sat-1: 85;  /* Increased from 70 for more vibrant colors */
    --hp-light-1: 50;

    --hp-hue-2: 340;
    --hp-sat-2: 85;  /* Increased from 70 for more vibrant colors */
    --hp-light-2: 50;

    /* --- Shadow Controls --- */
    --hp-shadow-intensity: 0.15;
    --hp-shadow-blur: 1;

    /* --- Hover Intensity (NEW) --- */
    /* Controls how dramatic hover effects are */
    /* 0 = Subtle (minimal change), 1 = Standard, 2 = Dramatic */
    --hp-hover-intensity: 1;

    /* --- Global Scale --- */
    --hp-scale: 1;
    /* Overall Size Multiplier */

    /* ═══════════════════════════════════════════════════════════════════════════ */
    /*                            LIGHTNESS SCALE                                  */
    /* ═══════════════════════════════════════════════════════════════════════════ */
    /* 11-step scale from near-white to near-black */
    /* Used to generate consistent shade palettes for any hue */

    --l-50:  97%;   /* Subtle backgrounds, hover on white */
    --l-100: 94%;   /* Light backgrounds */
    --l-200: 86%;   /* Focus rings, subtle borders */
    --l-300: 77%;   /* Disabled states, light accents */
    --l-400: 66%;   /* Placeholder text, muted elements */
    --l-500: 50%;   /* BASE - Primary buttons, main color */
    --l-600: 42%;   /* Hover state */
    --l-700: 34%;   /* Active/pressed state */
    --l-800: 25%;   /* Dark text, strong emphasis */
    --l-900: 17%;   /* Headings, high contrast */
    --l-950: 10%;   /* Near black */

    /* -------------------------------------------------------------------------- */
    /*                             Derived Variables                              */
    /* -------------------------------------------------------------------------- */

    /* --- Calculations based on Style Weight & Scales --- */

    /* Border Width: Wider range for "Heavy" to "Fine" */
    /* Base 0.5px (Fine) to ~4px (Heavy) */
    --border-width-raw: calc(0.5px + (1.2px * var(--hp-style-weight)));
    --border-width: calc(var(--border-width-raw) * var(--hp-border-scale));

    /* Corner Radius: NOW INDEPENDENT of style weight */
    /* corner-scale 0 = 0px (Square/Metro), 1 = 6px (Standard), 2 = 12px (Rounded/Web) */
    --radius-factor: calc(0px + (6px * var(--hp-corner-scale)));

    /* Font Size Adjustment: Continuous */
    /* 0->-1px, 1->0, 2->+1px */
    --font-adjust: calc(0px + (1px * (var(--hp-style-weight) - 1)));

    /* ═══════════════════════════════════════════════════════════════════════════ */
    /*                          PRIMARY COLOR SCALE                                */
    /* ═══════════════════════════════════════════════════════════════════════════ */

    --c-primary-h: var(--hp-hue-1);
    --c-primary-s: calc(var(--hp-sat-1) * 1%);

    /* Full shade scale */
    --c-primary-50:  hsl(var(--c-primary-h), var(--c-primary-s), var(--l-50));
    --c-primary-100: hsl(var(--c-primary-h), var(--c-primary-s), var(--l-100));
    --c-primary-200: hsl(var(--c-primary-h), var(--c-primary-s), var(--l-200));
    --c-primary-300: hsl(var(--c-primary-h), var(--c-primary-s), var(--l-300));
    --c-primary-400: hsl(var(--c-primary-h), var(--c-primary-s), var(--l-400));
    --c-primary-500: hsl(var(--c-primary-h), var(--c-primary-s), var(--l-500));
    --c-primary-600: hsl(var(--c-primary-h), var(--c-primary-s), var(--l-600));
    --c-primary-700: hsl(var(--c-primary-h), var(--c-primary-s), var(--l-700));
    --c-primary-800: hsl(var(--c-primary-h), var(--c-primary-s), var(--l-800));
    --c-primary-900: hsl(var(--c-primary-h), var(--c-primary-s), var(--l-900));
    --c-primary-950: hsl(var(--c-primary-h), var(--c-primary-s), var(--l-950));

    /* Semantic aliases (backward compatible) */
    --c-primary: var(--c-primary-500);
    --c-primary-l: var(--l-500); /* For legacy compatibility */
    --c-primary-hover: var(--c-primary-600);
    --c-primary-active: var(--c-primary-700);
    --c-primary-bg: var(--c-primary-50);
    --c-primary-ring: var(--c-primary-200);

    /* ═══════════════════════════════════════════════════════════════════════════ */
    /*                         SECONDARY COLOR SCALE                               */
    /* ═══════════════════════════════════════════════════════════════════════════ */

    --c-secondary-h: var(--hp-hue-2);
    --c-secondary-s: calc(var(--hp-sat-2) * 1%);

    /* Full shade scale */
    --c-secondary-50:  hsl(var(--c-secondary-h), var(--c-secondary-s), var(--l-50));
    --c-secondary-100: hsl(var(--c-secondary-h), var(--c-secondary-s), var(--l-100));
    --c-secondary-200: hsl(var(--c-secondary-h), var(--c-secondary-s), var(--l-200));
    --c-secondary-300: hsl(var(--c-secondary-h), var(--c-secondary-s), var(--l-300));
    --c-secondary-400: hsl(var(--c-secondary-h), var(--c-secondary-s), var(--l-400));
    --c-secondary-500: hsl(var(--c-secondary-h), var(--c-secondary-s), var(--l-500));
    --c-secondary-600: hsl(var(--c-secondary-h), var(--c-secondary-s), var(--l-600));
    --c-secondary-700: hsl(var(--c-secondary-h), var(--c-secondary-s), var(--l-700));
    --c-secondary-800: hsl(var(--c-secondary-h), var(--c-secondary-s), var(--l-800));
    --c-secondary-900: hsl(var(--c-secondary-h), var(--c-secondary-s), var(--l-900));
    --c-secondary-950: hsl(var(--c-secondary-h), var(--c-secondary-s), var(--l-950));

    /* Semantic aliases */
    --c-secondary: var(--c-secondary-500);
    --c-secondary-l: var(--l-500);
    --c-secondary-hover: var(--c-secondary-600);
    --c-secondary-active: var(--c-secondary-700);

    /* ═══════════════════════════════════════════════════════════════════════════ */
    /*                          NEUTRAL COLOR SCALE                                */
    /* ═══════════════════════════════════════════════════════════════════════════ */
    /* Tinted grays - uses primary hue at very low saturation for cohesion */

    --c-neutral-s: calc(var(--hp-sat-1) * 0.08%); /* 8% of primary saturation */

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

    /* ═══════════════════════════════════════════════════════════════════════════ */
    /*                        SURFACE & BACKGROUND COLORS                          */
    /* ═══════════════════════════════════════════════════════════════════════════ */

    --c-bg: var(--c-neutral-50);
    --c-surface: hsl(var(--c-primary-h), var(--c-neutral-s), 100%);
    --c-surface-raised: var(--c-surface); /* Use with shadow for elevation */
    --c-surface-sunken: var(--c-neutral-100);

    /* Border Colors */
    --c-border: var(--c-neutral-200);
    --c-border-strong: var(--c-neutral-300);
    --c-border-subtle: var(--c-neutral-100);

    /* Text Colors */
    --c-text-main: var(--c-neutral-900);
    --c-text-muted: var(--c-neutral-500);
    --c-text-subtle: var(--c-neutral-400);
    --c-text-light: var(--c-neutral-50);

    /* ═══════════════════════════════════════════════════════════════════════════ */
    /*                           STATUS COLOR SCALES                               */
    /* ═══════════════════════════════════════════════════════════════════════════ */

    /* Success (Green) */
    --c-success-h: 145;
    --c-success-s: 85%;
    --c-success-50:  hsl(var(--c-success-h), var(--c-success-s), var(--l-50));
    --c-success-100: hsl(var(--c-success-h), var(--c-success-s), var(--l-100));
    --c-success-500: hsl(var(--c-success-h), var(--c-success-s), var(--l-500));
    --c-success-600: hsl(var(--c-success-h), var(--c-success-s), var(--l-600));
    --c-success-700: hsl(var(--c-success-h), var(--c-success-s), var(--l-700));
    --c-success-900: hsl(var(--c-success-h), var(--c-success-s), var(--l-900));
    --c-success: var(--c-success-500);
    --c-success-bg: var(--c-success-50);
    --c-success-text: var(--c-success-900);

    /* Warning (Amber) */
    --c-warning-h: 45;
    --c-warning-s: 95%;
    --c-warning-50:  hsl(var(--c-warning-h), var(--c-warning-s), var(--l-50));
    --c-warning-100: hsl(var(--c-warning-h), var(--c-warning-s), var(--l-100));
    --c-warning-500: hsl(var(--c-warning-h), var(--c-warning-s), 55%); /* Slightly lighter for visibility */
    --c-warning-600: hsl(var(--c-warning-h), var(--c-warning-s), var(--l-600));
    --c-warning-700: hsl(var(--c-warning-h), var(--c-warning-s), var(--l-700));
    --c-warning-900: hsl(var(--c-warning-h), var(--c-warning-s), 25%);
    --c-warning: var(--c-warning-500);
    --c-warning-bg: var(--c-warning-50);
    --c-warning-text: var(--c-warning-900);

    /* Danger (Red) */
    --c-danger-h: 0;
    --c-danger-s: 90%;
    --c-danger-50:  hsl(var(--c-danger-h), var(--c-danger-s), var(--l-50));
    --c-danger-100: hsl(var(--c-danger-h), var(--c-danger-s), var(--l-100));
    --c-danger-500: hsl(var(--c-danger-h), var(--c-danger-s), 55%);
    --c-danger-600: hsl(var(--c-danger-h), var(--c-danger-s), var(--l-600));
    --c-danger-700: hsl(var(--c-danger-h), var(--c-danger-s), var(--l-700));
    --c-danger-900: hsl(var(--c-danger-h), var(--c-danger-s), var(--l-900));
    --c-danger: var(--c-danger-500);
    --c-danger-bg: var(--c-danger-50);
    --c-danger-text: var(--c-danger-900);

    /* Info (Blue) */
    --c-info-h: 200;
    --c-info-s: 90%;
    --c-info-50:  hsl(var(--c-info-h), var(--c-info-s), var(--l-50));
    --c-info-100: hsl(var(--c-info-h), var(--c-info-s), var(--l-100));
    --c-info-500: hsl(var(--c-info-h), var(--c-info-s), 55%);
    --c-info-600: hsl(var(--c-info-h), var(--c-info-s), var(--l-600));
    --c-info-700: hsl(var(--c-info-h), var(--c-info-s), var(--l-700));
    --c-info-900: hsl(var(--c-info-h), var(--c-info-s), var(--l-900));
    --c-info: var(--c-info-500);
    --c-info-bg: var(--c-info-50);
    --c-info-text: var(--c-info-900);

    /* ═══════════════════════════════════════════════════════════════════════════ */
    /*                            HOVER EFFECTS SYSTEM                             */
    /* ═══════════════════════════════════════════════════════════════════════════ */
    /* Controlled by --hp-hover-intensity (0=subtle, 1=standard, 2=dramatic) */

    /* Color shift: how much darker on hover (lightness reduction) */
    --hover-color-shift: calc(8% * var(--hp-hover-intensity));

    /* Shadow lift: elevated shadow on hover */
    --hover-shadow-lift: calc(4px * var(--hp-hover-intensity));
    --hover-shadow-spread: calc(8px * var(--hp-hover-intensity));
    --hover-shadow-opacity: calc(var(--hp-shadow-intensity) * (1 + (0.5 * var(--hp-hover-intensity))));

    /* Border emphasis: darker/more visible border on hover */
    --hover-border-darken: calc(10% * var(--hp-hover-intensity));

    /* Transform: subtle lift effect */
    --hover-translate-y: calc(-1px * var(--hp-hover-intensity));
    --hover-scale: calc(1 + (0.01 * var(--hp-hover-intensity)));

    /* Transition timing */
    --hover-transition: all 0.2s ease;

    /* Pre-computed hover shadows */
    --shadow-hover:
        0 var(--hover-shadow-lift) var(--hover-shadow-spread) 0 hsla(var(--c-primary-h), 10%, 10%, var(--hover-shadow-opacity)),
        0 calc(var(--hover-shadow-lift) * 2) calc(var(--hover-shadow-spread) * 2) 0 hsla(var(--c-primary-h), 10%, 10%, calc(var(--hover-shadow-opacity) * 0.5));

    /* ═══════════════════════════════════════════════════════════════════════════ */
    /*                              GRADIENTS                                      */
    /* ═══════════════════════════════════════════════════════════════════════════ */

    --c-primary-gradient: linear-gradient(135deg, var(--c-primary-500) 0%, var(--c-primary-600) 100%);
    --c-secondary-gradient: linear-gradient(135deg, var(--c-secondary-500) 0%, var(--c-secondary-600) 100%);
    --c-vibrant-gradient: linear-gradient(135deg, var(--c-primary-500) 0%, var(--c-secondary-500) 100%);

    /* Accent Color (complementary) */
    --c-accent-h: calc(var(--hp-hue-1) + 30);
    --c-accent: hsl(var(--c-accent-h), var(--c-primary-s), var(--l-500));

    /* Medal/Rank Colors */
    --c-gold: hsl(45, 100%, 50%);
    --c-silver: hsl(0, 0%, 75%);
    --c-bronze: hsl(30, 60%, 50%);
    --c-platinum: hsl(180, 10%, 90%);

    /* Achievement Gradient */
    --c-achievement-gradient: linear-gradient(135deg, hsl(0, 80%, 70%) 0%, hsl(25, 90%, 60%) 100%);

    /* --- Shadows (Intensity + Blur Control) --- */
    /* --hp-shadow-intensity: 0-0.5 (opacity of shadow) */
    /* --hp-shadow-blur: 0.5-2 (blur multiplier, higher = softer) */
    --shadow-sm:
        0 1px calc(2px * var(--hp-shadow-blur)) 0 hsla(var(--hp-hue-1), 10%, 10%, var(--hp-shadow-intensity)),
        0 2px calc(4px * var(--hp-shadow-blur)) 0 hsla(var(--hp-hue-1), 10%, 10%, calc(var(--hp-shadow-intensity) * 0.5));
    --shadow-md:
        0 2px calc(4px * var(--hp-shadow-blur)) 0 hsla(var(--hp-hue-1), 10%, 10%, var(--hp-shadow-intensity)),
        0 4px calc(8px * var(--hp-shadow-blur)) 0 hsla(var(--hp-hue-1), 10%, 10%, calc(var(--hp-shadow-intensity) * 0.7));
    --shadow-lg:
        0 4px calc(8px * var(--hp-shadow-blur)) 0 hsla(var(--hp-hue-1), 10%, 10%, var(--hp-shadow-intensity)),
        0 8px calc(16px * var(--hp-shadow-blur)) 0 hsla(var(--hp-hue-1), 10%, 10%, calc(var(--hp-shadow-intensity) * 0.8));

    /* --- Typography --- */
    --font-family-pri: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-family-sec: 'Outfit', sans-serif;

    --base-size: 16px;
    /* Apply Style Weight Adjustment to Font Size */
    --font-size-root: calc((var(--base-size) + var(--font-adjust)) * var(--hp-scale));

    /* Derived Type Scale from Range */
    /* Range 0 -> Ratio 1.0 (Flat) */
    /* Range 1 -> Ratio 1.2 (Minor Third) */
    /* Range 2 -> Ratio 1.5 (Perfect Fifth) */
    --type-ratio: calc(1.0 + (0.25 * var(--hp-range)));

    /* Derived Font Weights from Range */
    /* Range 0 -> Light: 400, Bold: 400 (All same) */
    /* Range 1 -> Light: 300, Bold: 600 */
    /* Range 2 -> Light: 200, Bold: 800 */
    --fw-base: 400;
    --fw-light: calc(400 - (100 * var(--hp-range)));
    --fw-bold: calc(400 + (200 * var(--hp-range)));

    /* Modular Scale Calculations */
    --text-xs: calc(var(--text-base) / var(--type-ratio));
    --text-sm: calc(var(--text-base) / var(--type-ratio) * 1.1);
    --text-base: 1rem;
    --text-lg: calc(var(--text-base) * var(--type-ratio));
    --text-xl: calc(var(--text-lg) * var(--type-ratio));
    --text-2xl: calc(var(--text-xl) * var(--type-ratio));
    --text-3xl: calc(var(--text-2xl) * var(--type-ratio));
    --text-4xl: calc(var(--text-3xl) * var(--type-ratio));

    /* --- Spacing --- */
    /* Density affects the space unit */
    --space-unit: calc(0.25rem * var(--hp-scale) * var(--hp-density));
    --space-1: calc(var(--space-unit) * 1);
    --space-2: calc(var(--space-unit) * 2);
    --space-3: calc(var(--space-unit) * 3);
    --space-4: calc(var(--space-unit) * 4);
    --space-6: calc(var(--space-unit) * 6);
    --space-8: calc(var(--space-unit) * 8);
    --space-12: calc(var(--space-unit) * 12);

    /* --- Borders & Effects --- */
    --radius-base: var(--radius-factor);
    --radius-sm: calc(var(--radius-base) * 0.5);
    --radius-md: var(--radius-base);
    --radius-lg: calc(var(--radius-base) * 2);
    --radius-full: 9999px;

    --shadow-glass: 0 8px 32px 0 rgba(31, 38, 135, 0.15);

    --glass-bg: rgba(255, 255, 255, 0.25);
    --glass-border: rgba(255, 255, 255, 0.18);
}

/* -------------------------------------------------------------------------- */
/*                                 Dark Mode                                  */
/* -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
    :root {
        --c-bg-l: 10%;
        --c-surface-l: 15%;
        --c-text-main: hsl(var(--hp-hue-seed-1), 10%, 90%);
        --c-text-muted: hsl(var(--hp-hue-seed-1), 10%, 60%);

        --glass-bg: rgba(0, 0, 0, 0.25);
        --glass-border: rgba(255, 255, 255, 0.05);
    }
}

/* -------------------------------------------------------------------------- */
/*                                   Reset                                    */
/* -------------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: var(--font-size-root);
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family-pri);
    background-color: var(--c-bg);
    color: var(--c-text-main);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* -------------------------------------------------------------------------- */
/*                                 Typography                                 */
/* -------------------------------------------------------------------------- */
/* --- Typography Utilities --- */
.font-light {
    font-weight: var(--fw-light);
}

.font-base {
    font-weight: var(--fw-base);
}

.font-bold {
    font-weight: var(--fw-bold);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-family-sec);
    font-weight: var(--fw-bold);
    line-height: 1.2;
    margin-bottom: var(--space-2);
    color: var(--c-text-main);
}

h1 {
    font-size: var(--text-4xl);
}

h2 {
    font-size: var(--text-3xl);
}

h3 {
    font-size: var(--text-2xl);
}

h4 {
    font-size: var(--text-xl);
}

h5 {
    font-size: var(--text-lg);
}

h6 {
    font-size: var(--text-base);
}

p {
    margin-bottom: var(--space-2);
    line-height: 1.6;
    font-weight: var(--fw-base);
}

.text-sm {
    font-size: var(--text-sm);
}

.text-xs {
    font-size: var(--text-xs);
}

.text-muted {
    color: var(--c-text-muted);
}

.text-lg {
    font-size: var(--text-lg);
}

.text-xl {
    font-size: var(--text-xl);
}

.text-2xl {
    font-size: var(--text-2xl);
}

.text-3xl {
    font-size: var(--text-3xl);
}

.text-4xl {
    font-size: var(--text-4xl);
}

a {
    color: var(--c-primary);
    text-decoration: none;
    transition: color 0.2s;
}

a:hover {
    color: var(--c-secondary);
}

/* -------------------------------------------------------------------------- */
/*                                 Components                                 */
/* -------------------------------------------------------------------------- */

/* --- Buttons --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: var(--text-sm);
    cursor: pointer;
    transition: var(--hover-transition);
    border: var(--border-width) solid transparent;
    gap: var(--space-2);
    box-shadow: var(--shadow-sm);
}

.btn-pri {
    background-color: var(--c-primary-500);
    color: var(--c-text-light);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    border-color: var(--c-primary-600);
}

.btn-pri:hover {
    background-color: var(--c-primary-600);
    border-color: var(--c-primary-700);
    transform: translateY(var(--hover-translate-y));
    box-shadow: var(--shadow-hover);
}

.btn-pri:active {
    background-color: var(--c-primary-700);
    border-color: var(--c-primary-800);
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

.btn-sec {
    background-color: var(--c-surface);
    border: var(--border-width) solid var(--c-neutral-300);
    color: var(--c-text-main);
}

.btn-sec:hover {
    background-color: var(--c-neutral-50);
    border-color: var(--c-neutral-400);
    transform: translateY(var(--hover-translate-y));
    box-shadow: var(--shadow-hover);
}

.btn-sec:active {
    background-color: var(--c-neutral-100);
    border-color: var(--c-neutral-500);
    transform: translateY(0);
}

.btn-ghost {
    background-color: transparent;
    color: var(--c-text-main);
    box-shadow: none;
}

.btn-ghost:hover {
    background-color: var(--c-neutral-100);
    color: var(--c-text-main);
    transform: translateY(var(--hover-translate-y));
}

.btn-ghost:active {
    background-color: var(--c-neutral-200);
    transform: translateY(0);
}

/* Danger button variant */
.btn-danger {
    background-color: var(--c-danger-500);
    color: var(--c-text-light);
    border-color: var(--c-danger-600);
}

.btn-danger:hover {
    background-color: var(--c-danger-600);
    border-color: var(--c-danger-700);
    transform: translateY(var(--hover-translate-y));
    box-shadow: var(--shadow-hover);
}

.btn-danger-text {
    color: var(--c-danger-600);
    background: transparent;
    border-color: transparent;
}
.btn-danger-text:hover {
    color: var(--c-danger-700);
    background: var(--c-danger-50);
}

/* --- Cards --- */
.card {
    background-color: var(--c-surface);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    box-shadow: var(--shadow-sm);
    border: var(--border-width) solid var(--c-border);
    min-width: 0;
    transition: var(--hover-transition);
}

/* Card size variants - constrain width for atomic/single-purpose cards */
.card-sm { max-width: 280px; }
.card-md { max-width: 360px; }
.card-lg { max-width: 480px; }
.card-xl { max-width: 640px; }
.card-full { max-width: none; width: 100%; }

.card-interactive:hover {
    border-color: var(--c-border-strong);
    box-shadow: var(--shadow-hover);
    transform: translateY(var(--hover-translate-y));
}

.card-glass {
    background: var(--glass-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: var(--border-width) solid var(--glass-border);
    box-shadow: var(--shadow-glass);
}

/* --- Inputs --- */
.input {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    border: var(--border-width) solid var(--c-border);
    background-color: var(--c-surface);
    color: var(--c-text-main);
    font-family: inherit;
    font-size: var(--text-sm);
    transition: all 0.2s;
}

.input:focus {
    outline: none;
    border-color: var(--c-primary-500);
    box-shadow: 0 0 0 3px var(--c-primary-200);
}

.input-error {
    border-color: var(--c-danger) !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
}

.quill-editor {
    height: 200px;
    border: var(--border-width) solid var(--c-border);
    border-radius: var(--radius-md);
}

/* --- Utilities --- */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-4);
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.grid {
    display: grid;
    gap: var(--space-4);
}

.mt-4 {
    margin-top: var(--space-4);
}

.mb-4 {
    margin-bottom: var(--space-4);
}

.p-4 {
    padding: var(--space-4);
}

.text-center {
    text-align: center;
}

/* --- Switch / Toggle --- */
.switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 24px;
    margin-right: var(--space-2);
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--c-surface);
    border: var(--border-width) solid var(--c-border);
    transition: .3s;
    border-radius: 24px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 2px;
    bottom: 1px;
    background-color: var(--c-text-muted);
    transition: .3s;
    border-radius: 50%;
}

input:checked+.slider {
    background-color: var(--c-primary);
    border-color: var(--c-primary);
}

input:checked+.slider:before {
    transform: translateX(24px);
    background-color: var(--c-text-light);
}

/* --- Range Slider --- */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    background: var(--c-border);
    border-radius: var(--radius-sm);
    outline: none;
    cursor: pointer;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background: var(--c-primary);
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid var(--c-surface);
    box-shadow: var(--shadow-sm);
    transition: all 0.15s ease;
}

input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    box-shadow: var(--shadow-md);
}

input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: var(--c-primary);
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid var(--c-surface);
    box-shadow: var(--shadow-sm);
}

input[type="range"]::-moz-range-track {
    height: 6px;
    background: var(--c-border);
    border-radius: var(--radius-sm);
}

/* --- Badge --- */
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-sm {
    padding: 1px 6px;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.3px;
}

/* Soft badges - light background, dark text (default style) */
.badge-pri {
    background-color: var(--c-primary-500);
    color: white;
}

.badge-sec {
    background-color: var(--c-secondary-500);
    color: white;
}

.badge-outline {
    background-color: transparent;
    border: 1px solid var(--c-neutral-400);
    color: var(--c-text-main);
}

.badge-success {
    background-color: var(--c-success-500);
    color: white;
}

.badge-warning {
    background-color: var(--c-warning-500);
    color: var(--c-warning-900);
}

.badge-error {
    background-color: var(--c-danger-500);
    color: white;
}

.badge-info {
    background-color: var(--c-info-500);
    color: white;
}

/* Color dot for groups */
.group-color-dot {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
}

/* Solid badges - full color background */
.badge-pri-solid {
    background-color: var(--c-primary-500);
    color: var(--c-text-light);
}

.badge-success-solid {
    background-color: var(--c-success-500);
    color: white;
}

.badge-warning-solid {
    background-color: var(--c-warning-500);
    color: var(--c-warning-900);
}

.badge-error-solid {
    background-color: var(--c-danger-500);
    color: white;
}

/* --- Alerts --- */
.alert {
    display: flex;
    align-items: center;
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: var(--border-width) solid var(--c-border);
    background: var(--c-surface);
    color: var(--c-text-main);
    border-radius: var(--radius-md);
    gap: var(--space-3);
}

.alert-success {
    background: var(--c-success-bg);
    border-color: var(--c-success);
    color: var(--c-success-text);
}

.alert-warning {
    background: var(--c-warning-bg);
    border-color: var(--c-warning);
    color: var(--c-warning-text);
}

.alert-error {
    background: var(--c-danger-bg);
    border-color: var(--c-danger);
    color: var(--c-danger-text);
}

.alert-info {
    background: var(--c-info-bg);
    border-color: var(--c-info);
    color: var(--c-info-text);
}

/* --- Toast notifications --- */
.toast-container {
    position: fixed;
    bottom: var(--space-4);
    right: var(--space-4);
    z-index: 10000;
}
.toast {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    font-size: var(--text-sm);
    animation: toast-in 0.3s ease;
}
.toast-success { background: var(--c-success); color: white; }
.toast-error { background: var(--c-danger); color: white; }
.toast-info { background: var(--c-info); color: white; }
.toast-warning { background: var(--c-warning); color: #333; }
.toast.card { background: var(--c-surface); color: var(--c-text); border: 1px solid var(--c-border); }
.toast-fade { opacity: 0; transition: opacity 0.3s ease; }
@keyframes toast-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Avatar --- */
.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    background-color: var(--c-surface);
    border: var(--border-width) solid var(--c-border);
    overflow: hidden;
    font-weight: 700;
    color: var(--c-primary);
    font-size: var(--text-sm);
}

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

.avatar-sm {
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    font-size: 10px;
}

.avatar-md {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    font-size: var(--text-xs);
}

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

/* --- Tooltip --- */
.tooltip-wrapper {
    position: relative;
    display: inline-block;
}

.tooltip {
    visibility: hidden;
    background-color: var(--c-text-main);
    color: var(--c-bg);
    text-align: center;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    position: absolute;
    z-index: 1;
    bottom: 125%;
    /* Position above */
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s;
    font-size: var(--text-xs);
    white-space: nowrap;
    pointer-events: none;
}

.tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: var(--c-text-main) transparent transparent transparent;
}

.tooltip-wrapper:hover .tooltip {
    visibility: visible;
    opacity: 1;
}

/* --- Progress Bar --- */
.progress-container {
    width: 100%;
    background-color: var(--c-neutral-200);
    border-radius: 999px;
    overflow: hidden;
    height: 8px;
}

.progress-bar {
    height: 100%;
    background-color: var(--c-primary);
    width: 0%;
    transition: width 0.5s ease;
    border-radius: 999px;
}

.progress-bar.progress-success {
    background-color: var(--c-success);
}

.progress-bar.progress-warning {
    background-color: var(--c-warning);
}

.progress-bar.progress-error {
    background-color: var(--c-danger);
}

.progress-bar.progress-secondary {
    background-color: var(--c-secondary);
}

.progress-striped {
    background-image: linear-gradient(45deg,
            rgba(255, 255, 255, 0.15) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255, 255, 255, 0.15) 50%,
            rgba(255, 255, 255, 0.15) 75%,
            transparent 75%,
            transparent);
    background-size: 1rem 1rem;
}

/* --- Analytics Components --- */

/* Stat Card */
.stat-card {
    background: var(--c-surface);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    border: var(--border-width) solid var(--c-border-subtle);
    box-shadow: var(--shadow-sm);
}

.stat-label {
    font-size: var(--text-xs);
    color: var(--c-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    margin-bottom: var(--space-2);
}

.stat-value {
    font-size: var(--text-3xl);
    font-weight: var(--fw-bold);
    color: var(--c-text-main);
    line-height: 1;
    margin-bottom: var(--space-2);
}

.stat-trend {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-sm);
}

.stat-trend.positive {
    color: var(--c-success);
}

.stat-trend.negative {
    color: var(--c-danger);
}

.stat-trend.neutral {
    color: var(--c-text-muted);
}

/* KPI Card */
.kpi-card {
    background: var(--c-surface);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    border: var(--border-width) solid var(--c-border-subtle);
    box-shadow: var(--shadow-sm);
}

.kpi-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-3);
}

.kpi-title {
    font-size: var(--text-sm);
    color: var(--c-text-muted);
    font-weight: 600;
}

.kpi-values {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: var(--space-3);
}

.kpi-actual {
    font-size: var(--text-2xl);
    font-weight: var(--fw-bold);
    color: var(--c-text-main);
}

.kpi-target {
    font-size: var(--text-sm);
    color: var(--c-text-muted);
}

.kpi-progress-wrapper {
    margin-top: var(--space-2);
}

/* Metric Grid */
.metric-grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* --- Tables --- */
.table {
    width: 100%;
    border-collapse: collapse;
    background: var(--c-surface);
    border-radius: var(--radius-md);
    overflow: hidden;
    border: var(--border-width) solid var(--c-border);
}

.table-header-row {
    background-color: var(--c-neutral-50);
}

.table-header-cell {
    text-align: left;
    padding: var(--space-3) var(--space-4);
    border-bottom: var(--border-width) solid var(--c-border);
    color: var(--c-text-muted);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.table-row {
    border-bottom: var(--border-width) solid var(--c-border-subtle);
    transition: background-color 0.15s;
}

.table-row:last-child {
    border-bottom: none;
}

.table-row:hover {
    background-color: var(--c-primary-50);
}

.table-cell {
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
    color: var(--c-text-main);
}

/* Striped table variant */
.table-striped .table-row:nth-child(even) {
    background-color: var(--c-neutral-50);
}

.table-striped .table-row:nth-child(even):hover {
    background-color: var(--c-primary-50);
}

/* Trend Indicator */
.trend-indicator {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-weight: 600;
}

.trend-arrow {
    font-size: 1.2em;
}

.trend-indicator.up {
    color: var(--c-success);
}

.trend-indicator.down {
    color: var(--c-danger);
}

.trend-indicator.flat {
    color: var(--c-text-muted);
}

/* Chart Card */
.chart-card {
    background: var(--c-surface);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    border: var(--border-width) solid var(--c-border-subtle);
    box-shadow: var(--shadow-sm);
}

.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: var(--border-width) solid var(--c-border);
}

.chart-title {
    font-size: var(--text-lg);
    font-weight: var(--fw-bold);
    color: var(--c-text-main);
}

.chart-controls {
    display: flex;
    gap: var(--space-2);
}

.chart-body {
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* --- Sortable List --- */
.sortable-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sortable-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    cursor: grab;
    transition: all 0.15s ease;
    user-select: none;
}

.sortable-item:hover {
    background: var(--c-bg-muted);
    border-color: var(--c-border-strong);
}

.sortable-handle {
    color: var(--c-muted-fg);
    cursor: grab;
}

.sortable-handle:active {
    cursor: grabbing;
}

.sortable-icon {
    color: var(--c-primary);
}

.sortable-label {
    flex: 1;
    font-size: var(--text-sm);
}

.sortable-dragging {
    opacity: 0.5;
    background: var(--c-primary-50);
    border-color: var(--c-primary);
}

.sortable-drag-over {
    background: var(--c-bg-muted);
}

.sortable-drag-above {
    border-top: 2px solid var(--c-primary);
}

.sortable-drag-below {
    border-bottom: 2px solid var(--c-primary);
}

.sortable-disabled {
    opacity: 0.6;
    cursor: default;
}

.sortable-disabled .sortable-handle {
    cursor: default;
}

/* Sortable variants */
.sortable-compact .sortable-item {
    padding: 8px 12px;
}

.sortable-bordered .sortable-item {
    border-width: 2px;
}

.sortable-cards .sortable-item {
    box-shadow: var(--shadow-sm);
    border: none;
}

.sortable-cards .sortable-item:hover {
    box-shadow: var(--shadow-md);
}


/* --- Tree / File Explorer --- */
.tree {
    font-family: var(--font-family-pri);
    font-size: var(--text-sm);
    line-height: 1.6;
}

.tree-item {
    display: flex;
    align-items: center;
    padding: var(--space-1) var(--space-2);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background-color 0.2s;
    user-select: none;
}

.tree-item:hover {
    background-color: var(--c-neutral-100);
}

.tree-item-selected {
    background-color: var(--c-primary-50);
    border-left: 3px solid var(--c-primary-500);
}

.tree-item-focused {
    outline: 2px solid var(--c-primary-400);
    outline-offset: -2px;
    background-color: var(--c-primary-50);
}

.tree-item-icon {
    margin-right: var(--space-2);
    font-size: 1em;
    min-width: 16px;
    text-align: center;
}

.tree-item-label {
    flex: 1;
}

.tree-item-size {
    margin-left: var(--space-2);
    font-size: var(--text-xs);
    color: var(--c-text-muted);
}

.tree-children {
    margin-left: var(--space-4);
    border-left: 1px solid var(--c-border);
    padding-left: var(--space-2);
}

.tree-item-toggle {
    margin-right: var(--space-1);
    font-size: 0.8em;
    color: var(--c-text-muted);
    min-width: 12px;
}

/* --- Heatmap --- */
.heatmap {
    display: inline-block;
}

.heatmap-grid {
    display: grid;
    gap: 2px;
    grid-auto-flow: column;
}

.heatmap-cell {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    background-color: var(--c-neutral-100);
    transition: all 0.2s;
    cursor: pointer;
}

.heatmap-cell:hover {
    transform: scale(1.2);
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
}

.heatmap-cell[data-level="0"] {
    background-color: var(--c-neutral-100);
}

.heatmap-cell[data-level="1"] {
    background-color: hsl(var(--c-primary-h), 40%, 85%);
}

.heatmap-cell[data-level="2"] {
    background-color: hsl(var(--c-primary-h), 50%, 70%);
}

.heatmap-cell[data-level="3"] {
    background-color: hsl(var(--c-primary-h), 60%, 55%);
}

.heatmap-cell[data-level="4"] {
    background-color: hsl(var(--c-primary-h), 70%, 45%);
}

.heatmap-legend {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-3);
    font-size: var(--text-xs);
    color: var(--c-text-muted);
}

.heatmap-legend-scale {
    display: flex;
    gap: 2px;
}

/* --- Sparkline --- */
.sparkline {
    display: inline-block;
    height: 32px;
    position: relative;
}

.sparkline-svg {
    display: block;
}

/* --- Data Widget --- */
.data-widget {
    background: var(--c-surface);
    border-radius: var(--radius-md);
    border: var(--border-width) solid var(--c-border-subtle);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.data-widget-header {
    padding: var(--space-4);
    border-bottom: var(--border-width) solid var(--c-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.data-widget-title {
    font-size: var(--text-lg);
    font-weight: var(--fw-bold);
    color: var(--c-text-main);
}

.data-widget-body {
    padding: var(--space-4);
}

.data-widget-footer {
    padding: var(--space-3) var(--space-4);
    border-top: var(--border-width) solid var(--c-border);
    background: var(--c-neutral-50);
    font-size: var(--text-sm);
    color: var(--c-text-muted);
}

/* --- Gauge --- */
.gauge {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
}

.gauge-circle {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gauge-svg {
    display: block;
}

.gauge-value {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: var(--text-lg);
    font-weight: var(--fw-bold);
    color: var(--c-text-main);
    pointer-events: none;
}

.gauge-label {
    text-align: center;
    font-size: var(--text-xs);
    color: var(--c-text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* --- Timeline --- */
.timeline {
    position: relative;
    padding-left: var(--space-6);
}

.timeline::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--c-border);
}

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

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

.timeline-marker {
    position: absolute;
    left: -22px;
    top: 4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--c-primary);
    border: 3px solid var(--c-surface);
    box-shadow: 0 0 0 2px var(--c-primary);
}

.timeline-content {
    background: var(--c-surface);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    border: var(--border-width) solid var(--c-border-subtle);
}

.timeline-title {
    font-weight: var(--fw-bold);
    margin-bottom: var(--space-1);
}

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

.timeline-description {
    font-size: var(--text-sm);
    color: var(--c-text-main);
}

/* Animations */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

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

    100% {
        background-position: -200% 0;
    }
}

/* --- Contribution Graph --- */
.contribution-cell {
    transition: all 0.2s;
    cursor: pointer;
}

.contribution-cell:hover {
    transform: scale(1.2);
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
}

.contribution-cell[data-level="0"] {
    background-color: var(--c-neutral-100);
}

.contribution-cell[data-level="1"] {
    background-color: hsl(var(--c-primary-h), 40%, 85%);
}

.contribution-cell[data-level="2"] {
    background-color: hsl(var(--c-primary-h), 50%, 70%);
}

.contribution-cell[data-level="3"] {
    background-color: hsl(var(--c-primary-h), 60%, 55%);
}

.contribution-cell[data-level="4"] {
    background-color: hsl(var(--c-primary-h), 70%, 45%);
}

/* --- Advanced Charts (Phase 8) --- */
.chart-container {
    position: relative;
    width: 100%;
    max-width: 100%;
    height: 100%;
    overflow: hidden;
}

.chart-svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.chart-tooltip {
    position: absolute;
    /* Changed to absolute for body-relative positioning */
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    font-size: var(--text-xs);
    pointer-events: none;
    z-index: 9999;
    /* High z-index for fixed tooltip */
    opacity: 0;
    transition: opacity 0.2s;
    white-space: nowrap;
}

.chart-bar {
    transition: all 0.3s ease;
    cursor: pointer;
}

.chart-bar:hover {
    opacity: 0.8;
}

.chart-line {
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke-dashoffset 1s ease;
}

.chart-dot {
    stroke-width: 2;
    transition: r 0.2s;
    cursor: pointer;
}

.chart-dot:hover {
    r: 6;
}

.chart-axis text {
    font-size: 10px;
    fill: var(--c-text-muted);
}

.chart-axis line,
.chart-axis path {
    stroke: var(--c-border);
}

.chart-grid line {
    stroke: var(--c-border-subtle);
    stroke-dasharray: 4;
}

.chart-slice {
    transition: transform 0.3s;
    cursor: pointer;
}

.chart-slice:hover {
    transform: scale(1.05);
    transform-origin: center;
}

.chart-radar-area {
    fill-opacity: 0.2;
    transition: fill-opacity 0.3s;
}

.chart-radar-area:hover {
    fill-opacity: 0.4;
}

/* Theme Controls */
.controls {
    position: fixed;
    top: 20px;
    right: 20px;
    background: var(--c-surface);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    border: var(--border-width) solid var(--c-border);
    width: 300px;
    z-index: 1000;
    display: none;
    /* Hidden by default */
}

.controls.active {
    display: block;
}

.control-group {
    margin-bottom: var(--space-2);
}

.control-group label {
    display: block;
    font-size: var(--text-xs);
    font-weight: 600;
    margin-bottom: var(--space-1);
}

.control-group input {
    width: 100%;
}

.controls-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-4);
}

.controls-header h3 {
    margin: 0;
}

.btn-show-controls {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
    display: block;
    padding: 8px 16px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    cursor: pointer;
    font-family: inherit;
    font-weight: 500;
}

.btn-close-controls {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--c-text-muted);
    line-height: 1;
    padding: 0;
}

@media (max-width: 768px) {
    .controls {
        position: static;
        width: 100%;
        margin-bottom: var(--space-4);
        box-shadow: none;
        border: 1px solid var(--c-border);
    }

    .btn-show-controls {
        top: auto;
        bottom: 20px;
        right: 20px;
    }
}

/* -------------------------------------------------------------------------- */
/*                              Utility Classes                                */
/* -------------------------------------------------------------------------- */

/* Layout */
.flex { display: flex; }
.flex-1 { flex: 1; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.w-full { width: 100%; }

/* Overflow */
.overflow-auto { overflow: auto; }
.overflow-y-auto { overflow-y: auto; }
.overflow-hidden { overflow: hidden; }
.scroll-panel { overflow-y: auto; max-height: calc(100vh - 120px); }

/* Spacing */
.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-5 { padding: var(--space-5); }
.p-6 { padding: var(--space-6); }
.px-1 { padding-left: var(--space-1); padding-right: var(--space-1); }
.pt-0 { padding-top: 0; }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.m-1 { margin: var(--space-1); }
.m-2 { margin: var(--space-2); }
.m-3 { margin: var(--space-3); }
.m-4 { margin: var(--space-4); }
.m-5 { margin: var(--space-5); }
.m-6 { margin: var(--space-6); }
.mx-2 { margin-left: var(--space-2); margin-right: var(--space-2); }
.mx-3 { margin-left: var(--space-3); margin-right: var(--space-3); }
.mx-4 { margin-left: var(--space-4); margin-right: var(--space-4); }
.my-2 { margin-top: var(--space-2); margin-bottom: var(--space-2); }
.my-3 { margin-top: var(--space-3); margin-bottom: var(--space-3); }
.ml-2 { margin-left: var(--space-2); }
.mr-2 { margin-right: var(--space-2); }

/* Text colors */
.text-pri { color: var(--c-primary); }
.text-success { color: var(--c-success); }
.text-warning { color: var(--c-warning); }
.text-danger { color: var(--c-danger); }
.text-white { color: #ffffff !important; }
.text-gray-400 { color: #9ca3af; }
.text-gray-800 { color: #1f2937; }

/* Sidebar */
.sidebar {
    background: var(--c-surface);
    border-right: var(--border-width) solid var(--c-border);
    padding: var(--space-3) 0;
}

.sidebar-section {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--c-text-muted);
    padding: var(--space-3) var(--space-4);
    margin-top: var(--space-2);
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
    margin: var(--space-1) var(--space-2);
    border-radius: var(--radius-md);
    cursor: pointer;
    color: var(--c-text-main);
    font-size: var(--text-sm);
    transition: background 0.15s;
}

.sidebar-link:hover {
    background: var(--c-bg);
}

.sidebar-link.active {
    background: var(--c-primary-100);
    color: var(--c-primary-700);
    font-weight: 500;
}

.sidebar-link i {
    width: 20px;
    color: var(--c-text-muted);
}

.sidebar-link.active i {
    color: var(--c-primary-600);
}

/* Borders */
.border { border: var(--border-width) solid var(--c-border); }
.border-b { border-bottom: var(--border-width) solid var(--c-border, rgba(0,0,0,0.1)); }
.border-r { border-right: var(--border-width) solid var(--c-border); }
.rounded { border-radius: var(--radius-sm); }
.rounded-full { border-radius: 9999px; }

/* Backgrounds */
.bg-white { background-color: white; }
.bg-surface { background-color: var(--c-surface); }
.bg-background { background-color: var(--c-bg); }
.bg-gray-50 { background-color: var(--c-bg); }
.bg-gray-100 { background-color: var(--c-surface); }
.bg-pri-100 { background-color: var(--c-primary-100); }
.bg-neutral-100 { background-color: var(--c-neutral-100); }
.bg-neutral-200 { background-color: var(--c-neutral-200); }

/* Positioning */
.relative { position: relative; }
.absolute { position: absolute; }

/* Padding */
.pl-8 { padding-left: var(--space-8); }
.pt-8 { padding-top: var(--space-8); }
.pb-8 { padding-bottom: var(--space-8); }

/* Margin right */
.mr-2 { margin-right: var(--space-2); }

/* Text truncate */
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.whitespace-pre-wrap { white-space: pre-wrap; }
.transition-opacity { transition: opacity 0.2s; }
.transition-bg { transition: background 0.15s; }
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }

/* --- Messaging UI Components --- */

/* Quill compose container */
.msg-compose-container {
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.msg-compose-actions {
    border-top: 1px solid var(--c-border);
    background: var(--c-surface);
}
.msg-textarea-fallback {
    border: none;
    resize: none;
}

/* Chat layouts */
.msg-chat-layout {
    display: grid;
    grid-template-columns: 340px 1fr;
    height: 100%;
    min-height: 400px;
}
.msg-email-layout {
    display: grid;
    grid-template-columns: 160px 300px 1fr;
    height: 100%;
    min-height: 400px;
}
.msg-board-grid {
    display: grid;
    grid-template-columns: 1fr 150px 100px 120px;
}
.msg-template-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: calc(100% - 50px);
}

/* Thread/message selection states */
.msg-thread-selected {
    background: var(--c-primary-100);
    border-left: 3px solid var(--c-primary);
}
.msg-thread-unselected {
    border-bottom: 1px solid var(--c-border);
}
.msg-folder-selected {
    background: var(--c-primary-100);
    color: var(--c-primary);
}
.msg-item-selected {
    background: var(--c-primary-50);
}

/* Message bubbles */
.msg-bubble-own {
    background: var(--c-primary);
    color: white;
    border-radius: var(--radius-lg) var(--radius-lg) 0 var(--radius-lg);
}
.msg-bubble-other {
    background: var(--c-neutral-100);
    border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) 0;
}
.msg-row-own { justify-content: flex-end; }
.msg-row-reverse { flex-direction: row-reverse; }

/* Reply quote styles */
.msg-reply-quote-own {
    background: rgba(255,255,255,0.2);
}
.msg-reply-quote-other {
    background: var(--c-neutral-100);
    border-left: 2px solid var(--c-primary);
}
.msg-reply-sender-own { opacity: 0.8; }
.msg-reply-sender-other { color: var(--c-primary); }
.msg-reply-text-own { opacity: 0.7; }
.msg-reply-text-other { color: var(--c-muted); }

/* Reply indicator */
.msg-reply-indicator {
    background: var(--c-neutral-200);
}
.msg-reply-preview {
    background: var(--c-neutral-100);
}
.msg-reply-cancel:hover {
    background: var(--c-neutral-200);
}

/* Badges and status */
.msg-badge-primary {
    background: var(--c-primary);
    color: white;
    font-size: 10px;
}
.msg-badge-danger {
    background: var(--c-danger);
    color: white;
}
.msg-badge-success {
    background: #10b981;
    color: white;
}
.msg-badge-gray {
    background: #4a5568;
    color: white;
}
.msg-badge-green {
    background: #059669;
    color: white;
}

/* Text colors */
.text-pri { color: var(--c-primary); }
.opacity-0 { opacity: 0; }
.opacity-70 { opacity: 0.7; }
.opacity-80 { opacity: 0.8; }
.opacity-100 { opacity: 1; }
.opacity-75 { opacity: 0.75; }
.opacity-50 { opacity: 0.5; }
.border-white { border-color: white; }
.border-b-2 { border-bottom: 2px solid; }
.border-none { border: none; }
.bg-transparent { background: transparent; }

/* Sizing utilities */
.w-60 { width: 60px; }
.w-150 { width: 150px; }
.w-auto { width: auto; }
.w-1\/4 { width: 25%; }
.w-1\/3 { width: 33.333%; }
.w-1\/2 { width: 50%; }
.w-2\/3 { width: 66.666%; }
.w-3\/4 { width: 75%; }
.w-3 { width: 0.75rem; }
.w-5 { width: 1.25rem; }
.w-6 { width: 1.5rem; }
.w-8 { width: 2rem; }
.w-10 { width: 2.5rem; }
.w-16 { width: 4rem; }
.h-1 { height: 0.25rem; }
.h-2 { height: 0.5rem; }
.h-3 { height: 0.75rem; }
.h-4 { height: 1rem; }
.h-5 { height: 1.25rem; }
.h-6 { height: 1.5rem; }
.h-8 { height: 2rem; }
.h-10 { height: 2.5rem; }
.h-16 { height: 4rem; }
.h-32 { height: 8rem; }
.border-l { border-left: var(--border-width) solid var(--c-border); }
.input-sm { padding: 0.25rem 0.5rem; font-size: var(--text-sm); }
.max-w-180 { max-width: 180px; }
.max-w-400 { max-width: 400px; }
.min-h-8 { min-height: 2rem; }
.min-h-200 { min-height: 200px; }
.min-h-300 { min-height: 300px; }
.min-h-400 { min-height: 400px; }
.min-h-screen { min-height: 100vh; }
.h-screen { height: 100vh; }
.h-full { height: 100%; }

/* Position utilities */
.sticky-top { position: sticky; top: 1rem; }

/* Hover effects */
.hover-shadow { transition: box-shadow 0.2s, transform 0.2s; }
.hover-shadow:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.15); transform: translateY(-2px); }

/* Border utilities */
.border-2 { border-width: 2px; }
.border-primary { border-color: var(--c-primary); }

/* Badge sizes */
.badge-sm { font-size: 0.65rem; padding: 0.15rem 0.4rem; }

/* Background utilities */
.bg-gray-100 { background-color: #f3f4f6; }

/* Board post styling */
.msg-post-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
}
.msg-post-original {
    background: var(--c-primary-100);
}
.msg-nested-reply {
    border-left: 2px solid var(--c-border);
    padding-left: 12px;
}

/* Template preview */
.msg-preview-bg {
    background: #f9fafb;
}
.msg-preview-card {
    background: white;
    border: 1px solid #e5e7eb;
}
.msg-template-border {
    border: 2px solid var(--c-border);
}
.msg-board-header-grid {
    display: grid;
    grid-template-columns: 1fr 150px 100px 120px;
    background: var(--c-surface);
}
.select-compact {
    width: auto;
    padding: 4px 8px;
}

/* Contact avatar */
.msg-contact-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
}

/* Search icon positioning */
.search-icon { left: var(--space-3); top: 50%; transform: translateY(-50%); opacity: 0.5; }

/* Selector list item */
.selector-item {
    display: flex;
    align-items: flex-start;
    padding: var(--space-3);
    border-bottom: var(--border-width) solid var(--c-border);
    cursor: pointer;
    position: relative;
    transition: background 0.15s;
}
.selector-item:last-child { border-bottom: none; }
.selector-item:hover { background: var(--c-bg); }
.selector-item.selected { background: var(--c-primary-50); }

/* Selector item content */
.selector-content { flex: 1; min-width: 0; padding-right: 6rem; }
.selector-head { font-weight: 600; font-size: var(--text-sm); margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.selector-body { font-size: var(--text-sm); color: var(--c-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Selector badge container */
.selector-badge-container {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-1);
    max-width: 5.5rem;
}
.selector-badge-container .badge {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Selector icon */
.selector-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--c-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-sm);
    margin-right: var(--space-3);
    flex-shrink: 0;
}

/* Action overlay on hover */
.selector-actions {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    padding: 0 var(--space-3);
    background: linear-gradient(to right, transparent, var(--c-surface) 20%);
    opacity: 0;
    transition: opacity 0.15s;
}
.selector-item:hover .selector-actions { opacity: 1; }

/* Selector editor container */
.publon-selector-editor {
    margin-bottom: var(--space-4);
}

/* Grid layouts */
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid-auto-fr { grid-template-columns: auto 1fr; }
.col-span-2 { grid-column: span 2; }
.grid-350-fr { grid-template-columns: 350px 1fr; }
.grid-meas-3 { grid-template-columns: 1fr 1fr 80px; }
.grid-meas-4a { grid-template-columns: 60px 1fr 70px 80px; }
.grid-meas-4b { grid-template-columns: 80px 1fr 100px; }

/* Control-Stage layouts */
.control-stage { display: grid; min-height: 400px; border: 1px solid var(--c-border); border-radius: var(--radius-md); }
.control-stage-sm { grid-template-columns: 200px 1fr; }
.control-stage-md { grid-template-columns: 300px 1fr; }
.control-stage-lg { grid-template-columns: 400px 1fr; }
.control-stage-xl { grid-template-columns: 500px 1fr; }
.control-stage > *:first-child { display: flex; flex-direction: column; }
.control-stage > *:first-child > *:last-child { flex: 1; }

/* Modal overlay */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Modal content */
.modal-content {
    max-height: 80vh;
    overflow-y: auto;
    background: var(--c-surface);
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}
.modal-sm { width: 400px; }
.modal-450 { width: 450px; }
.modal-md { width: 500px; }
.modal-550 { width: 550px; }
.modal-lg { width: 600px; }

/* Transitions */
.transition-bg { transition: background 0.15s; }

/* Progress bar background container */
.progress-bg {
    height: 8px;
    background: var(--c-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.progress-fill {
    height: 100%;
    border-radius: var(--radius-sm);
    background: var(--c-primary);
}

/* Control panel layout */
.control-stage-layout {
    display: flex;
    height: calc(100vh - 180px);
    align-items: stretch;
    border: var(--border-width) solid var(--c-border);
    border-radius: var(--radius-md);
    /* NEVER use overflow-hidden vertically - causes scrolling issues */
}
.control-panel {
    width: 280px;
    min-width: 280px;
    background: var(--c-surface);
    border-right: var(--border-width) solid var(--c-border);
    display: flex;
    flex-direction: column;
    overflow-y: auto; /* Allow vertical scrolling, not hidden */
}
.stage-panel {
    flex: 1;
    position: relative;
    overflow-y: auto;
    background: var(--c-bg);
    padding: var(--space-4);
}

/* QR code holder */
.qr-holder {
    background: white;
    padding: var(--space-2);
    border-radius: var(--radius-sm);
    border: var(--border-width) solid var(--c-border);
}

/* Min widths */
.min-w-20 { min-width: 80px; }
.min-w-22 { min-width: 90px; }
.min-w-24 { min-width: 96px; }
.min-w-25 { min-width: 100px; }
.min-w-36 { min-width: 144px; }
.min-w-35 { min-width: 140px; }

/* Primary light background */
.bg-primary-light { background: var(--c-primary-100); }

/* Radio button style */
.radio-indicator {
    width: 16px;
    height: 16px;
    border: 2px solid var(--c-border);
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

/* Text colors */
.text-primary { color: var(--c-primary); }
.text-danger { color: var(--c-danger); }

/* Cursor */
.cursor-pointer { cursor: pointer; }

/* Additional flex utilities */
.items-start { align-items: flex-start; }
.justify-center { justify-content: center; }
.flex-shrink-0 { flex-shrink: 0; }

/* Position utilities */
.fixed { position: fixed; }
.inset-0 { top: 0; left: 0; right: 0; bottom: 0; }
.z-1000 { z-index: 1000; }

/* Size utilities */
.w-16 { width: 16px; }
.h-full { height: 100%; }
.max-h-80vh { max-height: 80vh; }
.max-h-90vh { max-height: 90vh; }
.max-h-300 { max-height: 300px; }
.max-h-600 { max-height: 600px; }

/* Font weight */
.font-semibold { font-weight: 600; }
.font-medium { font-weight: 500; }

/* Form elements */
.resize-y { resize: vertical; }
.min-h-80 { min-height: 80px; }
.min-h-60 { min-height: 60px; }

/* Icon containers */
.icon-sm { width: 16px; display: inline-block; }
.icon-20 { width: 20px; display: inline-block; }

/* Control panel widths */
.control-panel-350 { width: 350px; min-width: 350px; }

/* Chart container */
.chart-container {
    width: 100%;
    height: 350px;
    border: var(--border-width) solid var(--c-border);
    border-radius: var(--radius-md);
}

/* Accent bar for list items */
.accent-bar {
    width: 4px;
    height: 40px;
    border-radius: 2px;
}

/* Status badge base */
.status-badge {
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: 500;
}

/* Info highlight */
.info-highlight {
    background: var(--c-bg);
}

/* Selected state highlight */
.selected-highlight {
    background: var(--c-primary-100);
    border-radius: var(--radius-sm);
    padding-left: var(--space-1);
}

/* Modal header/footer borders */
.modal-header {
    border-bottom: var(--border-width) solid var(--c-border);
}
.modal-footer {
    border-top: var(--border-width) solid var(--c-border);
}

/* Modal size xl */
.modal-xl { width: 600px; max-height: 90vh; }

/* Poll Display Overlay (full screen with gradient) */
.poll-display-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    z-index: 10000;
    overflow-y: auto;
    padding: 40px 20px;
}

/* Padding specific */
.py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.px-2 { padding-left: var(--space-2); padding-right: var(--space-2); }
.px-3 { padding-left: var(--space-3); padding-right: var(--space-3); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.pl-2 { padding-left: var(--space-2); }
.pl-3 { padding-left: var(--space-3); }
.pl-4 { padding-left: var(--space-4); }
.pr-3 { padding-right: var(--space-3); }

/* Margin top */
.mt-1 { margin-top: var(--space-1); }

/* Select dropdown width */
.select-w-200 { width: 200px; }

/* Alert badge position */
.alert-badge-pos {
    top: -6px;
    right: -8px;
}
.hidden { display: none; }

/* Button sizes */
.btn-sm {
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-xs);
}
.btn-xs {
    padding: 2px 6px;
    font-size: 10px;
    min-height: 24px;
}
.btn-icon {
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn-icon-sm {
    width: 24px;
    height: 24px;
    padding: 0;
    font-size: 10px;
}

/* Publon Bindings - Selector/Editor Components */
.publon-compact-selector { position: relative; min-width: 200px; }
.publon-select-editor { position: relative; }
.publon-selector-editor { }

.selector-pill {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: var(--border-width) solid var(--c-border);
    border-radius: var(--radius-sm);
    background: var(--c-surface);
    cursor: pointer;
    min-height: 38px;
    transition: border-color 0.15s;
}
.selector-pill:hover { border-color: var(--c-primary); }
.selector-pill.active { border-color: var(--c-primary); }
.selector-pill-caret { color: var(--c-text-muted); }

.selector-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    margin-top: 4px;
    background: var(--c-surface);
    border: var(--border-width) solid var(--c-border);
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    max-height: 300px;
    overflow: hidden;
}

.selector-item {
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
    border-bottom: var(--border-width) solid var(--c-border);
    transition: background 0.15s;
}
.selector-item:hover { background: var(--c-bg); }
.selector-item:last-child { border-bottom: none; }
.selector-item-selected { background: var(--c-primary-100); }
.selector-item-selected:hover { background: var(--c-primary-100); }

.selector-empty {
    padding: var(--space-3);
    text-align: center;
    color: var(--c-text-muted);
    font-size: var(--text-sm);
}

.selector-search-row {
    display: flex;
    gap: var(--space-2);
    padding: var(--space-2);
    align-items: center;
    border-bottom: var(--border-width) solid var(--c-border);
    background: var(--c-bg);
}

.selector-list {
    max-height: 220px;
    overflow-y: auto;
}

.editor-panel {
    background: var(--c-surface);
    border: var(--border-width) solid var(--c-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
}

.editor-selector-panel {
    min-width: 0;
}

.editor-title {
    font-weight: 600;
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: var(--border-width) solid var(--c-border);
}

.editor-field-group { margin-bottom: var(--space-3); }
.editor-field-label {
    display: block;
    margin-bottom: var(--space-1);
    font-weight: 500;
    font-size: var(--text-sm);
}

.editor-btn-row {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

/* Inline editor layouts */
.editor-layout-side-by-side {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}
.editor-layout-stacked { }
.editor-layout-stacked .editor-panel { margin-top: var(--space-4); }

/* Modal styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal {
    background: var(--c-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    min-width: 400px;
    max-width: 600px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
    max-height: calc(80vh - 180px);
}

.modal-header {
    flex-shrink: 0;
}

.modal-actions {
    flex-shrink: 0;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: var(--border-width) solid var(--c-border);
}

.modal-title {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: 600;
}

.modal-close-btn {
    padding: 0 var(--space-2);
    min-width: auto;
    font-size: 18px;
    line-height: 1;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: var(--border-width) solid var(--c-border);
}

.modal-actions .btn-danger-text {
    margin-right: auto;
}

/* Form field readonly display */
.field-readonly {
    padding: var(--space-2);
    background: var(--c-bg);
    border-radius: var(--radius-sm);
    color: var(--c-text-muted);
}

/* Required field asterisk */
.required-marker {
    color: var(--c-danger-600);
}

/* M:N Editor styles */
.publon-mn-editor { }

.mn-title {
    font-weight: 600;
    margin-bottom: var(--space-3);
    font-size: var(--text-lg);
}

.mn-panels-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.mn-panel {
    border: var(--border-width) solid var(--c-border);
    border-radius: var(--radius-md);
    background: var(--c-surface);
    overflow: hidden;
}

.mn-panel-header {
    padding: var(--space-2) var(--space-3);
    background: var(--c-bg);
    border-bottom: var(--border-width) solid var(--c-border);
    font-weight: 600;
    font-size: var(--text-sm);
}

.mn-panel-list {
    max-height: 200px;
    overflow-y: auto;
}

.mn-panel-item {
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
    border-bottom: var(--border-width) solid var(--c-border);
    font-size: var(--text-sm);
    transition: background 0.15s;
}
.mn-panel-item:last-child { border-bottom: none; }
.mn-panel-item:hover { background: var(--c-bg); }
.mn-panel-item-selected {
    background: var(--c-primary-100);
    border-left: 3px solid var(--c-primary);
}
.mn-panel-item-selected:hover { background: var(--c-primary-100); }

.mn-panel-empty {
    padding: var(--space-3);
    color: var(--c-text-muted);
    text-align: center;
    font-size: var(--text-sm);
}

.mn-center-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 100px;
    padding: var(--space-2);
}

.mn-preview {
    text-align: center;
    margin-bottom: var(--space-3);
}

.mn-preview-text {
    font-size: var(--text-xs);
    color: var(--c-text-muted);
}

.mn-preview-arrow {
    font-size: 20px;
    color: var(--c-primary);
    margin: var(--space-1) 0;
}

.mn-link-btn {
    width: 100%;
}
.mn-link-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.mn-links-section {
    border: var(--border-width) solid var(--c-border);
    border-radius: var(--radius-md);
    background: var(--c-surface);
    overflow: hidden;
}

.mn-links-header {
    padding: var(--space-2) var(--space-3);
    background: var(--c-bg);
    border-bottom: var(--border-width) solid var(--c-border);
    font-weight: 600;
    font-size: var(--text-sm);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mn-links-count {
    background: var(--c-primary);
    color: white;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: var(--text-xs);
}

.mn-links-list {
    max-height: 200px;
    overflow-y: auto;
}

.mn-link-item {
    display: flex;
    align-items: center;
    padding: var(--space-2) var(--space-3);
    border-bottom: var(--border-width) solid var(--c-border);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: background 0.15s;
}
.mn-link-item:last-child { border-bottom: none; }
.mn-link-item:hover { background: var(--c-bg); }

.mn-link-content {
    flex: 1;
}

.mn-link-delete {
    min-width: auto;
    padding: 2px 8px;
    font-size: 16px;
}

.mn-links-empty {
    padding: var(--space-4);
    color: var(--c-text-muted);
    text-align: center;
    font-size: var(--text-sm);
}

/* ─────────────────────────────────────────────────────────────────────────
   bindList styles
   ───────────────────────────────────────────────────────────────────────── */
.publon-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.publon-list-quickadd {
    padding: var(--space-2);
    border-top: 1px dashed var(--c-border);
    display: flex;
    gap: var(--space-2);
    align-items: center;
}

.publon-list-empty {
    padding: var(--space-6);
    text-align: center;
    color: var(--c-text-muted);
    font-size: var(--text-sm);
}

.publon-list-item {
    padding: var(--space-2) var(--space-3);
    border-bottom: var(--border-width) solid var(--c-border);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    transition: background 0.15s;
}
.publon-list-item:hover { background: var(--c-bg); }
.publon-list-item-selected { background: var(--c-primary-100); }
.publon-list-item-editing { background: #fffbe6; }

.publon-list-label { flex: 1; }

.publon-list-actions {
    display: flex;
    gap: var(--space-1);
    opacity: 0;
    transition: opacity 0.15s;
}
.publon-list-item:hover .publon-list-actions { opacity: 1; }

.publon-list-action-btn {
    padding: var(--space-1) var(--space-2);
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--text-xs);
}
.publon-list-action-btn.edit { color: var(--c-text-muted); }
.publon-list-action-btn.delete { color: var(--c-danger-600); }

.publon-list-edit-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    width: 100%;
}

.publon-list-field-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.publon-list-field-label {
    width: 80px;
    font-size: var(--text-xs);
    color: var(--c-text-muted);
}

.publon-list-btn-row {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-top: var(--space-1);
}

/* ─────────────────────────────────────────────────────────────────────────
   bindTable styles
   ───────────────────────────────────────────────────────────────────────── */
.publon-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.publon-table-header {
    background: var(--c-bg);
    border-bottom: 2px solid var(--c-border);
}

.publon-table th {
    padding: var(--space-2) var(--space-3);
    text-align: left;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
}

.publon-table th .sort-icon {
    opacity: 0.3;
    font-size: var(--text-xs);
}

.publon-table-actions-header {
    padding: var(--space-2) var(--space-3);
    width: 80px;
}

.publon-table-empty {
    padding: var(--space-6);
    text-align: center;
    color: var(--c-text-muted);
}

.publon-table-row {
    border-bottom: var(--border-width) solid var(--c-border);
    transition: background 0.15s;
}
.publon-table-row:hover { background: var(--c-bg); }
.publon-table-row-selected { background: var(--c-primary-100); }

.publon-table td {
    padding: var(--space-2) var(--space-3);
}

.publon-table-actions-cell {
    padding: var(--space-2) var(--space-3);
    opacity: 0;
    transition: opacity 0.15s;
}
.publon-table-row:hover .publon-table-actions-cell { opacity: 1; }

.publon-table-delete-btn {
    padding: var(--space-1);
    background: none;
    border: none;
    color: var(--c-danger-600);
    cursor: pointer;
}

.publon-table-inline-input {
    width: 100%;
    padding: var(--space-1);
    border: var(--border-width) solid var(--c-primary);
    border-radius: 2px;
    font-size: var(--text-sm);
}

/* ─────────────────────────────────────────────────────────────────────────
   bindForm styles
   ───────────────────────────────────────────────────────────────────────── */
.publon-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.publon-form-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.publon-form-label {
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--c-text-secondary);
}

.publon-form-btn-row {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.publon-form-btn {
    padding: var(--space-2) var(--space-4);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--text-sm);
}
.publon-form-btn.save {
    background: var(--c-primary);
    color: white;
}
.publon-form-btn.save:disabled { opacity: 0.5; }
.publon-form-btn.reset {
    background: var(--c-bg);
    color: var(--c-text);
}
.publon-form-btn.reset:disabled { opacity: 0.5; }
.publon-form-btn.new {
    background: var(--c-success);
    color: white;
    margin-left: auto;
}

/* ─────────────────────────────────────────────────────────────────────────
   bindDropdown styles
   ───────────────────────────────────────────────────────────────────────── */
.publon-dropdown-wrapper {
    position: relative;
}

.publon-dropdown-trigger {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: var(--border-width) solid var(--c-border);
    border-radius: var(--radius-sm);
    background: var(--c-surface);
    cursor: pointer;
    min-height: 38px;
    font-size: var(--text-sm);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.publon-dropdown-trigger:hover { border-color: var(--c-primary); }
.publon-dropdown-trigger.open {
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px var(--c-primary-100);
}

.publon-dropdown-label { flex: 1; }
.publon-dropdown-placeholder { color: var(--c-text-muted); }
.publon-dropdown-caret { color: var(--c-text-muted); }

.publon-dropdown-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    margin-top: var(--space-1);
    background: var(--c-surface);
    border: var(--border-width) solid var(--c-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    max-height: 300px;
    overflow: hidden;
    display: none;
}
.publon-dropdown-panel.open { display: block; }

.publon-dropdown-search {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: none;
    border-bottom: var(--border-width) solid var(--c-border);
    font-size: var(--text-sm);
    outline: none;
}

.publon-dropdown-options {
    max-height: 250px;
    overflow-y: auto;
}

.publon-dropdown-option {
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
    font-size: var(--text-sm);
    transition: background 0.15s;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.publon-dropdown-option:hover { background: var(--c-bg); }
.publon-dropdown-option-selected { background: var(--c-primary-100); }

.publon-dropdown-empty {
    padding: var(--space-3);
    color: var(--c-text-muted);
    text-align: center;
    font-size: var(--text-sm);
}

/* ─────────────────────────────────────────────────────────────────────────
   Tree Bind Type styles
   ───────────────────────────────────────────────────────────────────────── */
.publon-tree {
    font-size: var(--text-sm);
}

.publon-tree-empty {
    color: var(--c-text-muted);
    font-style: italic;
}

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

.publon-tree-node:hover {
    background: var(--c-bg);
}

.publon-tree-node-selected {
    background: var(--c-primary-100);
}

.publon-tree-toggle {
    width: 18px;
    min-width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--c-text-muted);
    font-size: 10px;
    transition: transform 0.2s ease, color 0.15s;
    flex-shrink: 0;
}

.publon-tree-toggle:hover {
    color: var(--c-text);
}

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

/* Spacer for leaf nodes - same width as chevron for alignment */
.publon-tree-spacer {
    display: inline-block;
    width: 10px;
}

.publon-tree-label {
    flex: 1;
}

.publon-tree-children {
    overflow: hidden;
    animation: tree-expand 0.2s ease-out;
}

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

.publon-tree-dragging {
    opacity: 0.5;
}

.publon-tree-drop-target {
    background: var(--c-primary-100);
    outline: 2px dashed var(--c-primary);
    outline-offset: -2px;
}

/* Depth indentation classes */
.publon-tree-depth-0 { padding-left: 8px; }
.publon-tree-depth-1 { padding-left: 28px; }
.publon-tree-depth-2 { padding-left: 48px; }
.publon-tree-depth-3 { padding-left: 68px; }
.publon-tree-depth-4 { padding-left: 88px; }
.publon-tree-depth-5 { padding-left: 108px; }
.publon-tree-depth-6 { padding-left: 128px; }
.publon-tree-depth-7 { padding-left: 148px; }
.publon-tree-depth-8 { padding-left: 168px; }
.publon-tree-depth-9 { padding-left: 188px; }

/* Graph Bind Type styles */
.publon-graph-canvas {
    display: block;
    background-color: var(--c-bg);
    border-radius: var(--radius-sm);
}

.publon-graph-stage {
    height: 400px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Event Microservice Styles - Calendar, Timetable, Agenda, Register
   ═══════════════════════════════════════════════════════════════════════════ */

/* Calendar Bind Type */
.publon-calendar {
    background: var(--c-surface);
    border-radius: var(--radius-md);
}

.publon-calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3);
    border-bottom: 1px solid var(--c-border);
}

.publon-calendar-nav {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.publon-calendar-title {
    font-weight: 600;
    font-size: var(--text-lg);
    min-width: 200px;
    text-align: center;
}

.publon-calendar-views {
    display: flex;
    gap: var(--space-1);
}

/* Month View */
.publon-calendar-month {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: var(--c-border);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.publon-calendar-day-header {
    background: var(--c-neutral-100);
    padding: var(--space-2);
    text-align: center;
    font-weight: 500;
    font-size: var(--text-sm);
    color: var(--c-text-muted);
}

.publon-calendar-day {
    background: var(--c-surface);
    min-height: 100px;
    padding: var(--space-1);
    cursor: pointer;
    transition: background 0.15s;
}

.publon-calendar-day:hover {
    background: var(--c-neutral-50);
}

.publon-calendar-day-other {
    background: var(--c-neutral-50);
}

.publon-calendar-day-other .publon-calendar-day-number {
    color: var(--c-text-muted);
}

.publon-calendar-day-today {
    background: var(--c-primary-50);
}

.publon-calendar-day-today .publon-calendar-day-number {
    background: var(--c-primary);
    color: white;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.publon-calendar-day-number {
    font-size: var(--text-sm);
    font-weight: 500;
    margin-bottom: var(--space-1);
}

.publon-calendar-day-events {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.publon-calendar-event {
    font-size: 11px;
    padding: 2px 4px;
    border-radius: 2px;
    background: var(--event-color, #3498db);
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.publon-calendar-event:hover {
    filter: brightness(1.1);
}

.publon-calendar-more {
    font-size: 11px;
    color: var(--c-text-muted);
    padding: 2px 4px;
}

/* Week View */
.publon-calendar-week {
    display: flex;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    max-height: 600px;
    overflow-y: auto;
}

.publon-calendar-time-col {
    width: 60px;
    flex-shrink: 0;
    background: var(--c-neutral-50);
    border-right: 1px solid var(--c-border);
}

.publon-calendar-time-slot {
    height: 40px;
    font-size: 11px;
    color: var(--c-text-muted);
    text-align: right;
    padding-right: var(--space-2);
    border-bottom: 1px solid var(--c-border);
}

.publon-calendar-day-col {
    flex: 1;
    min-width: 100px;
    border-right: 1px solid var(--c-border);
}

.publon-calendar-day-col:last-child {
    border-right: none;
}

.publon-calendar-day-col-header {
    padding: var(--space-2);
    text-align: center;
    background: var(--c-neutral-50);
    border-bottom: 1px solid var(--c-border);
}

.publon-calendar-day-col.publon-calendar-day-today .publon-calendar-day-col-header {
    background: var(--c-primary-50);
}

.publon-calendar-slots {
    position: relative;
    height: calc(24 * 40px);
}

.publon-calendar-slot {
    height: 40px;
    border-bottom: 1px solid var(--c-border);
}

.publon-calendar-week-event {
    position: absolute;
    left: 2px;
    right: 2px;
    background: var(--event-color, #3498db);
    color: white;
    padding: var(--space-1);
    border-radius: var(--radius-sm);
    overflow: hidden;
    cursor: pointer;
    z-index: 1;
}

.publon-calendar-week-event:hover {
    filter: brightness(1.1);
}

/* Day View */
.publon-calendar-day-view {
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
}

.publon-calendar-day-view-header {
    padding: var(--space-3);
    background: var(--c-neutral-50);
    font-weight: 600;
    border-bottom: 1px solid var(--c-border);
}

.publon-calendar-day-grid {
    position: relative;
    max-height: 600px;
    overflow-y: auto;
}

.publon-calendar-day-row {
    display: flex;
    border-bottom: 1px solid var(--c-border);
}

.publon-calendar-day-time {
    width: 70px;
    padding: var(--space-2);
    font-size: var(--text-sm);
    color: var(--c-text-muted);
    background: var(--c-neutral-50);
    border-right: 1px solid var(--c-border);
}

.publon-calendar-day-cell {
    flex: 1;
    height: 50px;
}

.publon-calendar-day-event {
    position: absolute;
    left: 80px;
    right: var(--space-2);
    background: var(--event-color, #3498db);
    color: white;
    padding: var(--space-2);
    border-radius: var(--radius-sm);
    cursor: pointer;
    z-index: 1;
}

/* Timetable Bind Type */
.publon-timetable {
    background: var(--c-surface);
    border-radius: var(--radius-md);
}

.publon-timetable-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3);
    border-bottom: 1px solid var(--c-border);
}

.publon-timetable-title {
    font-weight: 600;
    min-width: 250px;
    text-align: center;
}

.publon-timetable-grid {
    display: grid;
    grid-template-columns: 120px repeat(var(--cols, 5), 1fr);
    gap: 1px;
    background: var(--c-border);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.publon-timetable-header {
    background: var(--c-neutral-100);
    padding: var(--space-2);
    text-align: center;
    font-weight: 500;
}

.publon-timetable-period {
    background: var(--c-neutral-50);
    padding: var(--space-2);
    border-right: 1px solid var(--c-border);
}

.publon-timetable-cell {
    background: var(--c-surface);
    padding: var(--space-1);
    min-height: 60px;
    cursor: pointer;
    transition: background 0.15s;
}

.publon-timetable-cell:hover {
    background: var(--c-neutral-50);
}

.publon-timetable-event {
    font-size: var(--text-xs);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--event-color, #3498db);
    color: white;
    margin-bottom: 2px;
    cursor: pointer;
}

/* Agenda Bind Type */
.publon-agenda {
    background: var(--c-surface);
    border-radius: var(--radius-md);
}

.publon-agenda-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-8);
    color: var(--c-text-muted);
}

.publon-agenda-day {
    border-bottom: 1px solid var(--c-border);
}

.publon-agenda-day:last-child {
    border-bottom: none;
}

.publon-agenda-day-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--c-neutral-50);
    font-weight: 500;
}

.publon-agenda-day-name {
    font-weight: 600;
}

.publon-agenda-day-date {
    color: var(--c-text-muted);
    font-size: var(--text-sm);
}

.publon-agenda-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
    border-left: 3px solid var(--event-color, #3498db);
    margin-left: var(--space-3);
    transition: background 0.15s;
}

.publon-agenda-item:hover {
    background: var(--c-neutral-50);
}

.publon-agenda-time {
    font-size: var(--text-sm);
    color: var(--c-text-muted);
    min-width: 60px;
}

.publon-agenda-content {
    flex: 1;
}

.publon-agenda-title {
    font-weight: 500;
}

.publon-agenda-location {
    font-size: var(--text-sm);
    color: var(--c-text-muted);
}

/* Register Bind Type */
.publon-register {
    background: var(--c-surface);
    border-radius: var(--radius-md);
}

.publon-register-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3);
    border-bottom: 1px solid var(--c-border);
}

.publon-register-title {
    font-weight: 600;
    font-size: var(--text-lg);
}

.publon-register-stats {
    display: flex;
    gap: var(--space-3);
}

.publon-register-stat {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-sm);
    color: var(--stat-color, var(--c-text-muted));
}

.publon-register-actions {
    display: flex;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--c-border);
    background: var(--c-neutral-50);
}

.publon-register-list {
    max-height: 400px;
    overflow-y: auto;
}

.publon-register-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--c-border);
}

.publon-register-row:last-child {
    border-bottom: none;
}

.publon-register-member {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 1;
}

.publon-register-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--c-primary-100);
    color: var(--c-primary-700);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: var(--text-sm);
}

.publon-register-name {
    font-weight: 500;
}

.publon-register-status {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    color: var(--status-color, var(--c-text-muted));
    background: color-mix(in srgb, var(--status-color, var(--c-text-muted)) 10%, transparent);
}

.publon-register-buttons {
    display: flex;
    gap: var(--space-1);
}

.publon-register-time {
    font-size: var(--text-xs);
    color: var(--c-text-muted);
    min-width: 50px;
    text-align: right;
}

/* Event List in ServiceUi */
.publon-event-list {
    max-height: 200px;
    overflow-y: auto;
}

.publon-event-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.15s;
}

.publon-event-item:hover {
    background: var(--c-neutral-50);
}

.publon-event-item-color {
    width: 4px;
    height: 32px;
    border-radius: 2px;
    background: var(--event-color, #3498db);
}

.publon-event-item-content {
    flex: 1;
    min-width: 0;
}

/* Expanded view */
.expanded-list-container {
    border: var(--border-width) solid var(--c-border);
    border-top: none;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    background: var(--c-surface);
    max-height: 250px;
    overflow-y: auto;
}

.expanded-search-row {
    display: flex;
    gap: var(--space-2);
    padding: var(--space-2);
    align-items: center;
    border: var(--border-width) solid var(--c-border);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    background: var(--c-bg);
}

.expanded-view {
    margin-top: var(--space-2);
}

/* Hover edit button */
.item-edit-btn {
    opacity: 0;
    transition: opacity 0.15s;
}
.selector-item:hover .item-edit-btn { opacity: 1; }

/* Output panel */
.output {
    height: 400px;
    overflow-y: auto;
    padding: var(--space-4);
    background: hsl(var(--hp-hue-seed-1), 10%, 12%);
    color: hsl(var(--hp-hue-seed-1), 5%, 90%);
    border-radius: var(--radius-md);
    font-family: var(--font-family-pri);
    font-size: var(--text-sm);
    white-space: pre-wrap;
    word-break: break-all;
}
/* Leaflet custom marker overrides */
.leaflet-div-icon-custom {
    background: transparent !important;
    border: none !important;
}
.custom-marker {
    background: transparent;
    border: none;
}

/* --- Modals --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(2px);
}

.modal {
    background: var(--c-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    min-width: 400px;
    max-width: 90vw;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
    border: var(--border-width) solid var(--c-border);
}

.modal h3 {
    margin: 0 0 var(--space-4) 0;
    font-size: var(--text-lg);
    font-weight: 600;
}

/* --- Forms --- */
.form-group {
    margin-bottom: var(--space-4);
}

.form-group label {
    display: block;
    font-size: var(--text-sm);
    font-weight: 500;
    margin-bottom: var(--space-1);
    color: var(--c-text-main);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: var(--border-width) solid var(--c-border);
    border-radius: var(--radius-sm);
    background: var(--c-bg);
    color: var(--c-text-main);
    font-size: var(--text-sm);
    font-family: inherit;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px hsl(var(--c-primary-h), var(--c-primary-s), 90%);
}

.form-group input[type="checkbox"] {
    width: auto;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--c-border);
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/*                              DARK MODE                                       */
/* ═══════════════════════════════════════════════════════════════════════════ */
/* Activate with: <html data-theme="dark"> or class="dark" on any container */

[data-theme="dark"],
.dark {
    /* Invert the semantic color mappings */
    --c-bg: var(--c-neutral-950);
    --c-surface: var(--c-neutral-900);
    --c-surface-raised: var(--c-neutral-800);
    --c-surface-sunken: var(--c-neutral-950);

    /* Borders - lighter in dark mode */
    --c-border: var(--c-neutral-700);
    --c-border-strong: var(--c-neutral-600);
    --c-border-subtle: var(--c-neutral-800);

    /* Text - invert for dark backgrounds */
    --c-text-main: var(--c-neutral-100);
    --c-text-muted: var(--c-neutral-400);
    --c-text-subtle: var(--c-neutral-500);
    --c-text-light: var(--c-neutral-900);

    /* Primary colors - slightly boost lightness for dark bg */
    --c-primary: var(--c-primary-400);
    --c-primary-hover: var(--c-primary-300);
    --c-primary-active: var(--c-primary-500);
    --c-primary-bg: hsl(var(--c-primary-h), calc(var(--c-primary-s) * 0.3), 15%);
    --c-primary-ring: hsl(var(--c-primary-h), var(--c-primary-s), 25%);

    /* Secondary colors */
    --c-secondary: var(--c-secondary-400);
    --c-secondary-hover: var(--c-secondary-300);
    --c-secondary-active: var(--c-secondary-500);

    /* Status colors - adjust for dark mode visibility */
    --c-success: var(--c-success-500);
    --c-success-bg: hsl(var(--c-success-h), calc(var(--c-success-s) * 0.3), 15%);
    --c-success-text: var(--c-success-100);

    --c-warning: var(--c-warning-500);
    --c-warning-bg: hsl(var(--c-warning-h), calc(var(--c-warning-s) * 0.3), 15%);
    --c-warning-text: var(--c-warning-100);

    --c-danger: var(--c-danger-500);
    --c-danger-bg: hsl(var(--c-danger-h), calc(var(--c-danger-s) * 0.3), 15%);
    --c-danger-text: var(--c-danger-100);

    --c-info: var(--c-info-500);
    --c-info-bg: hsl(var(--c-info-h), calc(var(--c-info-s) * 0.3), 15%);
    --c-info-text: var(--c-info-100);

    /* Shadows - more subtle in dark mode, use darker color */
    --hp-shadow-intensity: 0.4;
    --shadow-sm:
        0 1px calc(2px * var(--hp-shadow-blur)) 0 hsla(0, 0%, 0%, var(--hp-shadow-intensity)),
        0 2px calc(4px * var(--hp-shadow-blur)) 0 hsla(0, 0%, 0%, calc(var(--hp-shadow-intensity) * 0.5));
    --shadow-md:
        0 2px calc(4px * var(--hp-shadow-blur)) 0 hsla(0, 0%, 0%, var(--hp-shadow-intensity)),
        0 4px calc(8px * var(--hp-shadow-blur)) 0 hsla(0, 0%, 0%, calc(var(--hp-shadow-intensity) * 0.7));
    --shadow-lg:
        0 4px calc(8px * var(--hp-shadow-blur)) 0 hsla(0, 0%, 0%, var(--hp-shadow-intensity)),
        0 8px calc(16px * var(--hp-shadow-blur)) 0 hsla(0, 0%, 0%, calc(var(--hp-shadow-intensity) * 0.8));
    --shadow-hover:
        0 var(--hover-shadow-lift) var(--hover-shadow-spread) 0 hsla(0, 0%, 0%, var(--hover-shadow-opacity)),
        0 calc(var(--hover-shadow-lift) * 2) calc(var(--hover-shadow-spread) * 2) 0 hsla(0, 0%, 0%, calc(var(--hover-shadow-opacity) * 0.5));

    /* Gradients for dark mode */
    --c-primary-gradient: linear-gradient(135deg, var(--c-primary-500) 0%, var(--c-primary-400) 100%);
    --c-secondary-gradient: linear-gradient(135deg, var(--c-secondary-500) 0%, var(--c-secondary-400) 100%);
}

/* Dark mode button adjustments */
[data-theme="dark"] .btn-pri,
.dark .btn-pri {
    background-color: var(--c-primary-500);
    border-color: var(--c-primary-400);
    color: var(--c-neutral-950);
}

[data-theme="dark"] .btn-pri:hover,
.dark .btn-pri:hover {
    background-color: var(--c-primary-400);
    border-color: var(--c-primary-300);
}

[data-theme="dark"] .btn-sec,
.dark .btn-sec {
    background-color: var(--c-neutral-800);
    border-color: var(--c-neutral-600);
    color: var(--c-neutral-100);
}

[data-theme="dark"] .btn-sec:hover,
.dark .btn-sec:hover {
    background-color: var(--c-neutral-700);
    border-color: var(--c-neutral-500);
}

[data-theme="dark"] .btn-ghost:hover,
.dark .btn-ghost:hover {
    background-color: var(--c-neutral-800);
}

/* Dark mode input adjustments */
[data-theme="dark"] .input,
.dark .input {
    background-color: var(--c-neutral-900);
    border-color: var(--c-neutral-700);
    color: var(--c-neutral-100);
}

[data-theme="dark"] .input:focus,
.dark .input:focus {
    border-color: var(--c-primary-500);
    box-shadow: 0 0 0 3px var(--c-primary-ring);
}

/* --- Tabs --- */
.tabs {
    width: 100%;
}

.tabs-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: var(--space-4);
    gap: var(--space-1);
}

.tab-btn {
    padding: var(--space-2) var(--space-4);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--c-text-muted);
    font-weight: 500;
    font-size: var(--text-sm);
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    bottom: -1px;
}

.tab-btn:hover {
    color: var(--c-primary-600);
    background-color: var(--c-primary-50);
}

.tab-btn.active {
    color: var(--c-primary-600);
    border-bottom-color: var(--c-primary-500);
}

.tabs-content {
    padding: var(--space-2) 0;
}

.tab-pane {
    display: none;
}

.tab-pane.active {
    display: block;
}

/* Tabs variants */
.tabs-pills .tabs-header {
    border-bottom: none;
    gap: var(--space-2);
}

.tabs-pills .tab-btn {
    border-radius: var(--radius-md);
    border-bottom: none;
    bottom: 0;
}

.tabs-pills .tab-btn.active {
    background-color: var(--c-primary-100);
    color: var(--c-primary-700);
}

.tabs-boxed .tabs-header {
    background-color: var(--c-neutral-100);
    padding: var(--space-1);
    border-radius: var(--radius-md);
    border-bottom: none;
}

.tabs-boxed .tab-btn {
    border-radius: var(--radius-sm);
    border-bottom: none;
    bottom: 0;
}

.tabs-boxed .tab-btn.active {
    background-color: var(--c-surface);
    color: var(--c-text-main);
    box-shadow: var(--shadow-sm);
}

/* Underline variant - just underline on active tab */
.tabs-underline .tab-btn {
    background: transparent;
    border-bottom: 2px solid transparent;
}

.tabs-underline .tab-btn:hover {
    background: transparent;
}

.tabs-underline .tab-btn.active {
    border-bottom-color: var(--c-primary-500);
}

/* --- Accordion --- */
.accordion {
    border: var(--border-width) solid var(--c-border);
    border-radius: var(--radius-md);
    overflow: visible;
}

.accordion-item {
    border-bottom: var(--border-width) solid var(--c-border);
}

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

.accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
    font-weight: 600;
    background-color: var(--c-surface);
    color: var(--c-text-main);
    transition: background-color 0.2s, color 0.2s;
}

.accordion-header:hover {
    background-color: var(--c-primary-50);
}

.accordion-header.active {
    background-color: var(--c-primary-600);
    color: white;
}

.accordion-icon {
    font-size: var(--text-sm);
    color: var(--c-text-muted);
    transition: transform 0.3s, color 0.2s;
}

.accordion-header.active .accordion-icon {
    transform: rotate(180deg);
    color: white;
}

.accordion-body {
    display: none;
    overflow: visible;
}

.accordion-body.expanded {
    display: block;
}

.accordion-content {
    padding: var(--space-3);
    color: var(--c-text-muted);
    background-color: var(--c-surface);
    border-top: var(--border-width) solid var(--c-border-subtle);
}

/* Accordion flush variant (no outer border) */
.accordion-flush {
    border: none;
    border-radius: 0;
}

.accordion-flush .accordion-item {
    border-radius: 0;
}

.accordion-flush .accordion-header {
    background-color: transparent;
    padding-left: 0;
    padding-right: 0;
}

.accordion-flush .accordion-content {
    padding-left: 0;
    padding-right: 0;
    background-color: transparent;
    border-top: none;
}

/* === Accordion Stepper Mode === */

.accordion-stepper {
    counter-reset: step-counter;
}

.accordion-stepper .step-item {
    position: relative;
}

/* Connecting line between steps */
.accordion-stepper .step-item:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 23px;
    top: 48px;
    bottom: 0;
    width: 2px;
    background-color: var(--c-neutral-300);
    z-index: 0;
}

.accordion-stepper .step-item.step-complete:not(:last-child)::after {
    background-color: var(--c-success);
}

/* Step indicator circle */
.step-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: var(--c-neutral-200);
    color: var(--c-text-muted);
    font-size: var(--text-sm);
    font-weight: 600;
    margin-right: var(--space-3);
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
}

.step-indicator.active {
    background-color: var(--c-primary-600);
    color: white;
    box-shadow: 0 0 0 4px var(--c-primary-100);
}

.step-indicator.complete {
    background-color: var(--c-success);
    color: white;
}

.step-indicator.complete .step-number {
    display: none;
}

.step-indicator.complete::after {
    content: '✓';
    font-size: var(--text-sm);
}

/* Step header styling */
.accordion-stepper .step-header {
    background-color: transparent;
    padding-left: var(--space-2);
}

.accordion-stepper .step-header:hover {
    background-color: var(--c-neutral-50);
}

.accordion-stepper .step-header.active {
    background-color: transparent;
    color: var(--c-text-main);
}

.accordion-stepper .step-header.active .accordion-title {
    color: var(--c-primary-700);
    font-weight: 600;
}

/* Step icon (caret/checkmark) */
.accordion-stepper .step-icon {
    color: var(--c-text-muted);
}

.accordion-stepper .step-header.active .step-icon {
    color: var(--c-primary-600);
}

.accordion-stepper .step-icon.step-complete {
    color: var(--c-success);
    font-weight: bold;
}

/* Step item states */
.accordion-stepper .step-item.step-pending .accordion-title {
    color: var(--c-text-muted);
}

.accordion-stepper .step-item.step-active .accordion-title {
    color: var(--c-primary-700);
}

.accordion-stepper .step-item.step-complete .accordion-title {
    color: var(--c-text-main);
}

/* Step content area */
.step-content {
    /* min-height removed - was causing empty gaps when content is empty */
}

.step-content:not(:empty) {
    min-height: 40px;
}

/* Step navigation */
.step-nav {
    border-color: var(--c-neutral-200);
}

/* Locked future steps - cursor indicator */
.accordion-stepper .step-item.step-pending .step-header {
    cursor: not-allowed;
    opacity: 0.7;
}

.accordion-stepper .step-item.step-complete .step-header {
    cursor: pointer;
}

/* Fix for scrolling grid/flex children */
.grid > .overflow-y-auto,
.flex > .overflow-y-auto {
    min-height: 0;
}

/* --- Modal --- */
.modal-overlay {
    background-color: hsla(var(--c-neutral-h), var(--c-neutral-s), 10%, 0.6);
}

/* === Icon System === */

/* Base icon styling */
.icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    vertical-align: middle;
    line-height: 1;
}

.icon svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* Default path styling */
.icon svg path {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Primary shape - main filled shape */
.icon svg .icon-primary {
    fill: none;
    stroke: none;
}

/* Secondary shape - accent filled shape */
.icon svg .icon-secondary {
    fill: none;
    stroke: none;
}

/* Outline path - stroked */
.icon svg .icon-outline {
    fill: none;
    stroke: currentColor;
}

/* === TONE VARIANTS === */

/* Mono - outline only, no fills */
.icon-mono svg .icon-primary { fill: none; }
.icon-mono svg .icon-secondary { fill: none; }
.icon-mono svg .icon-outline { stroke: currentColor; }

/* 2-Tone - primary and secondary shapes with different fills */
.icon-2tone svg .icon-primary {
    fill: var(--icon-color-pri, var(--c-primary-500));
}
.icon-2tone svg .icon-secondary {
    fill: var(--icon-color-sec, var(--c-primary-200));
}
.icon-2tone svg .icon-outline {
    stroke: var(--icon-color-outline, currentColor);
}

/* Primary color options */
.icon-pri-500 { --icon-color-pri: var(--c-primary-500); }
.icon-pri-400 { --icon-color-pri: var(--c-primary-400); }
.icon-pri-600 { --icon-color-pri: var(--c-primary-600); }
.icon-pri-700 { --icon-color-pri: var(--c-primary-700); }
.icon-pri-secondary { --icon-color-pri: var(--c-secondary-500); }
.icon-pri-neutral { --icon-color-pri: var(--c-neutral-500); }
.icon-pri-dark { --icon-color-pri: var(--c-neutral-700); }

/* Secondary color options */
.icon-sec-100 { --icon-color-sec: var(--c-primary-100); }
.icon-sec-200 { --icon-color-sec: var(--c-primary-200); }
.icon-sec-300 { --icon-color-sec: var(--c-primary-300); }
.icon-sec-secondary { --icon-color-sec: var(--c-secondary-200); }
.icon-sec-neutral { --icon-color-sec: var(--c-neutral-200); }
.icon-sec-white { --icon-color-sec: white; }
.icon-sec-none { --icon-color-sec: transparent; }

/* === STROKE COLOR OPTIONS === */

/* Primary shades */
.icon-stroke-pri svg .icon-stroke { stroke: var(--c-primary-500); }
.icon-stroke-pri-dark svg .icon-stroke { stroke: var(--c-primary-700); }
.icon-stroke-pri-light svg .icon-stroke { stroke: var(--c-primary-400); }

/* Neutral/black shades */
.icon-stroke-dark svg .icon-stroke { stroke: var(--c-neutral-800); }
.icon-stroke-medium svg .icon-stroke { stroke: var(--c-neutral-500); }
.icon-stroke-light svg .icon-stroke { stroke: var(--c-neutral-400); }

/* White (for dark backgrounds) */
.icon-stroke-white svg .icon-stroke { stroke: white; }
.icon-stroke-white svg .icon-fill { fill: rgba(255,255,255,0.2); stroke: rgba(255,255,255,0.3); }

/* === FILL COLOR OPTIONS === */
.icon-fill-pri svg .icon-fill { fill: var(--c-primary-200); }
.icon-fill-sec svg .icon-fill { fill: var(--c-secondary-200); }
.icon-fill-neutral svg .icon-fill { fill: var(--c-neutral-200); }
.icon-fill-none svg .icon-fill { fill: none; stroke: none; }

/* Stroke weights */
.icon-hairline svg path { stroke-width: 0.5; }
.icon-thin svg path { stroke-width: 1; }
.icon-regular svg path { stroke-width: 1.5; }
.icon-bold svg path { stroke-width: 2; }
.icon-heavy svg path { stroke-width: 2.5; }
.icon-no-stroke svg path { stroke: none !important; }

/* Line styles */
.icon-rounded svg {
    stroke-linecap: round;
    stroke-linejoin: round;
}

.icon-square svg {
    stroke-linecap: square;
    stroke-linejoin: miter;
}

/* Effects */
.icon-shadow svg {
    filter: drop-shadow(1px 1px 1px var(--c-neutral-400));
}

.icon-glow svg {
    filter: drop-shadow(0 0 3px var(--c-primary-400));
}

/* Sizes */
.icon-xs { font-size: 0.75rem; }
.icon-sm { font-size: 1rem; }
.icon-md { font-size: 1.5rem; }
.icon-lg { font-size: 2rem; }
.icon-xl { font-size: 3rem; }
.icon-2xl { font-size: 4rem; }

/* Color overrides for status contexts */
.icon-success svg { stroke: var(--c-success-600); }
.icon-success.icon-2tone svg { stroke: var(--c-success-600); fill: var(--c-success-100); }

.icon-warning svg { stroke: var(--c-warning-600); }
.icon-warning.icon-2tone svg { stroke: var(--c-warning-600); fill: var(--c-warning-100); }

.icon-danger svg { stroke: var(--c-danger-600); }
.icon-danger.icon-2tone svg { stroke: var(--c-danger-600); fill: var(--c-danger-100); }

.icon-info svg { stroke: var(--c-info-600); }
.icon-info.icon-2tone svg { stroke: var(--c-info-600); fill: var(--c-info-100); }

/* Interactive states */
.icon-interactive {
    cursor: pointer;
    transition: transform 0.15s, filter 0.15s;
}

.icon-interactive:hover {
    transform: scale(1.1);
}

.icon-interactive:hover.icon-glow svg {
    filter: drop-shadow(0 0 5px var(--c-primary-400));
}

/* Auto dark mode based on system preference */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --c-bg: hsl(var(--c-primary-h), var(--c-neutral-s), 8%);
        --c-surface: hsl(var(--c-primary-h), var(--c-neutral-s), 12%);
        --c-surface-raised: hsl(var(--c-primary-h), var(--c-neutral-s), 16%);
        --c-border: hsl(var(--c-primary-h), var(--c-neutral-s), 25%);
        --c-border-strong: hsl(var(--c-primary-h), var(--c-neutral-s), 35%);
        --c-text-main: hsl(var(--c-primary-h), var(--c-neutral-s), 95%);
        --c-text-muted: hsl(var(--c-primary-h), var(--c-neutral-s), 60%);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/*                           APP SHELL LAYOUT                                   */
/* ═══════════════════════════════════════════════════════════════════════════ */

.app-shell {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

.app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
    padding: 0 var(--space-4);
    background: var(--c-surface);
    border-bottom: var(--border-width) solid var(--c-border);
    flex-shrink: 0;
}

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

.app-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--c-primary);
    color: white;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: var(--text-sm);
}

.app-title {
    font-weight: 600;
    font-size: var(--text-lg);
}

.app-module-name {
    color: var(--c-text-muted);
    font-size: var(--text-sm);
}

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

.app-body {
    display: flex;
    flex: 1;
    overflow: hidden;
}

.app-sidebar {
    width: 240px;
    min-width: 240px;
    background: var(--c-surface);
    border-right: var(--border-width) solid var(--c-border);
    overflow-y: auto;
    flex-shrink: 0;
}

.app-content {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-6);
    background: var(--c-bg);
}

/* Sidebar modules */
.sidebar-module {
    border-bottom: var(--border-width) solid var(--c-border);
}

.sidebar-module-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    cursor: pointer;
    transition: background 0.15s ease;
}

.sidebar-module-header:hover {
    background: var(--c-bg);
}

.sidebar-module.active .sidebar-module-header {
    background: var(--c-primary-100);
    color: var(--c-primary-700);
    font-weight: 500;
}

.sidebar-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: var(--c-border);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: 600;
}

.sidebar-module.active .sidebar-icon {
    background: var(--c-primary);
    color: white;
}

.sidebar-label {
    font-size: var(--text-sm);
}

.sidebar-views {
    background: var(--c-bg);
    padding: var(--space-1) 0;
}

.sidebar-view {
    padding: var(--space-2) var(--space-4);
    padding-left: calc(var(--space-4) + 32px);
    font-size: var(--text-sm);
    color: var(--c-text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
}

.sidebar-view:hover {
    background: var(--c-surface);
    color: var(--c-text-main);
}

.sidebar-view.active {
    background: var(--c-surface);
    color: var(--c-primary);
    font-weight: 500;
}

/* Page titles */
.page-title {
    font-size: var(--text-2xl);
    font-weight: 600;
    margin-bottom: var(--space-6);
}

.section-title {
    font-size: var(--text-lg);
    font-weight: 500;
    margin-top: var(--space-6);
    margin-bottom: var(--space-4);
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/*                              HERO SECTIONS                                  */
/* ═══════════════════════════════════════════════════════════════════════════ */

.hero {
    text-align: center;
    padding: var(--space-12) var(--space-6);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-6);
}

.hero-title {
    font-size: var(--text-4xl);
    font-weight: var(--fw-bold);
    margin-bottom: var(--space-4);
    color: var(--c-text-main);
}

.hero-subtitle {
    font-size: var(--text-lg);
    color: var(--c-text-muted);
    margin-bottom: var(--space-6);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.hero-actions {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
    flex-wrap: wrap;
}

/* Hero size variants */
.hero-compact {
    padding: var(--space-6) var(--space-4);
}

.hero-full {
    padding: var(--space-12) var(--space-8);
    min-height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Hero style variants */
.hero-gradient {
    background: linear-gradient(135deg, var(--c-primary-50), var(--c-primary-100));
}

.hero-gradient .hero-subtitle {
    color: var(--c-neutral-600);
}

.hero-flat {
    background: var(--c-bg);
    border: var(--border-width) solid var(--c-border);
}

.hero-elevated {
    background: var(--c-surface);
    box-shadow: var(--shadow-lg);
}

.hero-vibrant {
    background: var(--c-vibrant-gradient);
    color: white;
}

.hero-vibrant .hero-title,
.hero-vibrant .hero-subtitle {
    color: white;
}

.hero-vibrant .hero-subtitle {
    opacity: 0.9;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/*                             FEATURE GRID                                    */
/* ═══════════════════════════════════════════════════════════════════════════ */

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.feature-grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.feature-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.feature-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 768px) {
    .feature-grid-2,
    .feature-grid-3,
    .feature-grid-4 {
        grid-template-columns: 1fr;
    }
}

.feature-card {
    background: var(--c-surface);
    border: var(--border-width) solid var(--c-border);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    transition: var(--hover-transition);
}

.feature-card:hover {
    border-color: var(--c-primary);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--c-primary-100);
    color: var(--c-primary);
    border-radius: var(--radius-md);
    font-size: var(--text-xl);
    margin-bottom: var(--space-4);
}

.feature-title {
    font-size: var(--text-lg);
    font-weight: 600;
    margin-bottom: var(--space-2);
}

.feature-desc {
    font-size: var(--text-sm);
    color: var(--c-neutral-600);
    line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/*                              CODE BLOCKS                                    */
/* ═══════════════════════════════════════════════════════════════════════════ */

.code-block {
    background: var(--c-neutral-100);
    border: var(--border-width) solid var(--c-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    overflow-x: auto;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: var(--text-sm);
    line-height: 1.6;
}

.code-block code {
    background: none;
    padding: 0;
    color: var(--c-text-main);
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/*                            SERVICE LIST                                     */
/* ═══════════════════════════════════════════════════════════════════════════ */

.service-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.service-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--c-surface);
    border: var(--border-width) solid var(--c-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
}

.service-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.service-name {
    font-weight: 600;
}

.service-desc {
    font-size: var(--text-sm);
    color: var(--c-text-muted);
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/*                           PAGE FRAME LAYOUT                                 */
/* ═══════════════════════════════════════════════════════════════════════════ */

.page-frame {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--c-surface);
    border-bottom: var(--border-width) solid var(--c-border);
    flex-shrink: 0;
}

.page-header-left {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

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

.page-header-right {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.page-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--c-primary);
    border-radius: var(--radius-sm);
    color: white;
    font-weight: bold;
    font-size: var(--text-base);
}

.page-brand {
    font-weight: var(--fw-bold);
    font-size: var(--text-lg);
}

.page-main {
    flex: 1;
    min-height: 0;
}

.page-stage {
    padding: var(--space-4);
}

.page-stage-container {
    max-width: 1200px;
    margin: 0 auto;
}

.page-footer-wrapper {
    background: var(--c-neutral-900);
    color: var(--c-neutral-300);
    flex-shrink: 0;
    padding-top: var(--space-8);
}

.page-footer {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-6) var(--space-6) var(--space-8);
}

.page-footer-columns {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
    justify-content: space-between;
    margin-bottom: var(--space-6);
}

.page-footer-column {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 150px;
}

.page-footer-heading {
    font-weight: 600;
    margin-bottom: var(--space-2);
    color: var(--c-neutral-100);
}

.page-footer-link {
    font-size: var(--text-sm);
    color: var(--c-neutral-400);
    cursor: pointer;
    text-decoration: none;
}

.page-footer-link:hover {
    color: var(--c-neutral-200);
    text-decoration: underline;
}

.page-footer-copyright {
    font-size: var(--text-sm);
    padding-top: var(--space-4);
    border-top: var(--border-width) solid var(--c-neutral-700);
    color: var(--c-neutral-500);
}

/* Icon button (for style editor, etc.) */
.icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--c-text-muted);
    transition: var(--hover-transition);
}

.icon-btn:hover {
    background: var(--c-neutral-100);
    color: var(--c-text-main);
}

/* Stats row */
.stats-row {
    display: flex;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
    flex-wrap: wrap;
}

.stats-row .stat-card {
    flex: 1;
    min-width: 150px;
}

/* Module tiles */
.module-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-4);
}

.module-tile {
    background: var(--c-surface);
    border: var(--border-width) solid var(--c-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    cursor: pointer;
    transition: all 0.2s ease;
}

.module-tile:hover {
    border-color: var(--c-primary);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.tile-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--c-primary);
    color: white;
    border-radius: var(--radius-md);
    font-size: var(--text-xl);
    font-weight: 600;
    margin-bottom: var(--space-3);
}

.tile-name {
    font-weight: 500;
    margin-bottom: var(--space-1);
}

.tile-desc {
    font-size: var(--text-xs);
    color: var(--c-text-muted);
    line-height: 1.4;
}

/* Cards grid */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-4);
}

.course-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-4);
}

.charts-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-6);
}

/* Data tables */
.data-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--c-surface);
    border: var(--border-width) solid var(--c-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

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

.data-table th {
    background: var(--c-bg);
    font-weight: 500;
    font-size: var(--text-sm);
    color: var(--c-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.data-table tbody tr:hover {
    background: var(--c-bg);
}

.data-table tbody tr:last-child td {
    border-bottom: none;
}

/* Status variants */
.status-success {
    background: var(--c-success-100);
    color: var(--c-success-700);
}

.status-warning {
    background: var(--c-warning-100);
    color: var(--c-warning-700);
}

.status-danger {
    background: var(--c-danger-100);
    color: var(--c-danger-700);
}

.status-info {
    background: var(--c-info-100);
    color: var(--c-info-700);
}

/* Controls bar */
.controls-bar {
    display: flex;
    align-items: flex-end;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.actions-bar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    padding: var(--space-3);
    background: var(--c-surface);
    border: var(--border-width) solid var(--c-border);
    border-radius: var(--radius-md);
}

/* Chart placeholder */
.chart-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    background: var(--c-bg);
    border: 2px dashed var(--c-border);
    border-radius: var(--radius-md);
    color: var(--c-text-muted);
    font-style: italic;
}

/* -------------------------------------------------------------------------- */
/*                           RESPONSIVE DESIGN                                */
/* -------------------------------------------------------------------------- */

/* ═══════════════════════════════════════════════════════════════════════════ */
/*                          MOBILE FIRST (up to 480px)                         */
/* ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    /* Typography - Scale down headings significantly on mobile */
    :root {
        --hp-scale: 0.9; /* Overall scale reduction */
        --hp-density: 0.85; /* Tighter spacing on mobile */
    }

    h1 { font-size: var(--text-3xl); }
    h2 { font-size: var(--text-2xl); }
    h3 { font-size: var(--text-xl); }
    h4 { font-size: var(--text-lg); }

    /* Buttons - Full width and adjusted padding */
    .btn {
        width: 100%;
        justify-content: center;
    }

    .btn-group {
        flex-direction: column;
        gap: var(--space-2);
    }

    .btn-group .btn {
        width: 100%;
    }

    /* Cards - Reduce padding and adjust layout */
    .card {
        padding: var(--space-3);
        border-radius: var(--radius-sm);
        box-shadow: var(--shadow-sm);
    }

    .cards-grid {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }

    /* Tables - Horizontal scroll wrapper */
    .table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .table {
        min-width: 600px; /* Ensure table doesn't collapse */
    }

    .table-cell,
    .table-header-cell {
        padding: var(--space-2) var(--space-2);
        font-size: var(--text-sm);
    }

    /* Modals - Full screen on mobile */
    .modal-content,
    .modal {
        width: 100vw !important;
        max-width: 100vw;
        min-height: 100vh;
        margin: 0;
        border-radius: 0;
    }

    .modal-sm,
    .modal-md,
    .modal-lg,
    .modal-xl,
    .modal-450,
    .modal-550 {
        width: 100vw !important;
        max-width: 100vw;
        min-height: 100vh;
        margin: 0;
        border-radius: 0;
    }

    /* Forms - Full width inputs */
    .form-group input,
    .form-group select,
    .form-group textarea {
        font-size: 16px; /* Prevents iOS zoom on focus */
    }

    .form-actions {
        flex-direction: column;
        gap: var(--space-2);
    }

    .form-actions .btn {
        width: 100%;
    }

    /* Flex layouts - Stack on mobile */
    .flex-mobile-col {
        flex-direction: column;
    }

    /* Spacing adjustments */
    .p-4 { padding: var(--space-3); }
    .p-6 { padding: var(--space-4); }
    .gap-4 { gap: var(--space-3); }

    /* Navigation - Touch friendly */
    .sidebar-link,
    .nav-item {
        min-height: 44px; /* Apple's touch target recommendation */
        padding: var(--space-3) var(--space-4);
    }

    .app-sidebar {
        display: none; /* Hide by default, show via toggle */
    }

    .module-tiles {
        grid-template-columns: 1fr;
    }

    /* Control panels - Full width on mobile */
    .controls {
        position: static;
        width: 100%;
        margin-bottom: var(--space-4);
        box-shadow: none;
        border: 1px solid var(--c-border);
    }

    /* Stats - Stack vertically */
    .stats-row {
        flex-direction: column;
        gap: var(--space-2);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/*                      TABLET (481px to 768px)                                */
/* ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 481px) and (max-width: 768px) {
    :root {
        --hp-scale: 0.95;
        --hp-density: 0.9;
    }

    h1 { font-size: var(--text-3xl); }
    h2 { font-size: var(--text-2xl); }

    /* Cards - 2 columns on tablet */
    .cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Modals - 90% width on tablet */
    .modal-content,
    .modal {
        width: 90vw;
        max-width: 600px;
    }

    .modal-lg,
    .modal-xl {
        width: 90vw;
        max-width: 700px;
    }

    /* Tables - Adjust padding */
    .table-cell,
    .table-header-cell {
        padding: var(--space-2) var(--space-3);
    }

    /* Module tiles - 2 columns */
    .module-tiles {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Sidebar - Collapsible */
    .app-sidebar {
        display: none;
    }

    .controls {
        position: static;
        width: 100%;
        margin-bottom: var(--space-4);
        box-shadow: none;
        border: 1px solid var(--c-border);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/*                     DESKTOP (769px to 1024px)                               */
/* ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1024px) {
    :root {
        --hp-scale: 0.98;
    }

    /* Cards - 3 columns on smaller desktop */
    .cards-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }

    /* Module tiles - 3 columns */
    .module-tiles {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/*                        LARGE DESKTOP (1025px+)                              */
/* ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1025px) {
    /* Cards - 4 columns on large screens */
    .cards-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }

    /* Module tiles - 4 columns */
    .module-tiles {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/*                       RESPONSIVE UTILITY CLASSES                            */
/* ═══════════════════════════════════════════════════════════════════════════ */

/* Hide/Show utilities */
.hide-mobile { display: block; }
.show-mobile { display: none; }

@media (max-width: 768px) {
    .hide-mobile { display: none; }
    .show-mobile { display: block; }
}

/* Flex direction utilities */
.flex-col-mobile { flex-direction: row; }

@media (max-width: 768px) {
    .flex-col-mobile { flex-direction: column; }
}

/* Text alignment utilities */
.text-center-mobile { text-align: left; }

@media (max-width: 768px) {
    .text-center-mobile { text-align: center; }
}

/* Width utilities */
.w-full-mobile { width: auto; }

@media (max-width: 768px) {
    .w-full-mobile { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/*                       TOUCH DEVICE OPTIMIZATIONS                            */
/* ═══════════════════════════════════════════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets for touch devices */
    .btn,
    .sidebar-link,
    .nav-item,
    a {
        min-height: 44px;
        min-width: 44px;
    }

    /* Remove hover effects on touch devices */
    .btn:hover,
    .card-interactive:hover,
    .table-row:hover {
        transform: none;
    }

    /* Increase form input sizes */
    .form-group input,
    .form-group select,
    .form-group textarea {
        min-height: 44px;
        font-size: 16px; /* Prevents zoom on iOS */
    }
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/*                          LANDSCAPE MOBILE                                   */
/* ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) and (orientation: landscape) {
    /* Reduce vertical spacing in landscape */
    :root {
        --hp-density: 0.8;
    }

    /* Modals take less vertical space */
    .modal-content,
    .modal {
        max-height: 95vh;
        overflow-y: auto;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/*                       TAG SYSTEM                                            */
/* ═══════════════════════════════════════════════════════════════════════════ */

/* Tag pill - uses CSS custom properties for dynamic colors */
.tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: var(--text-xs);
    font-weight: 500;
    white-space: nowrap;
    background-color: var(--tag-bg, #607D8B);
    color: var(--tag-text, #fff);
}

.tag-pill-editable {
    cursor: pointer;
}

.tag-pill-remove {
    cursor: pointer;
    opacity: 0.7;
    font-size: 14px;
    line-height: 1;
    margin-left: 2px;
}

.tag-pill-remove:hover {
    opacity: 1;
}

/* Selectable tag pill (for picker) */
.tag-pill-selectable {
    cursor: pointer;
    border: none;
    transition: background-color 0.2s, color 0.2s;
}

.tag-pill-selectable:hover {
    filter: brightness(0.9);
}

.tag-pill-selectable[data-selected="false"] {
    background-color: var(--c-neutral-200);
    color: var(--c-text-main);
}

/* Filter button style */
.tag-filter-btn {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: var(--text-xs);
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
    border-width: 1px;
    border-style: solid;
    border-color: var(--tag-bg, #4CAF50);
    background-color: transparent;
    color: inherit;
}

.tag-filter-btn:hover {
    filter: brightness(0.95);
}

.tag-filter-btn[data-selected="true"] {
    background-color: var(--tag-bg, #4CAF50);
    color: var(--tag-text, #fff);
}

/* Color dot indicator */
.color-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--dot-color, #607D8B);
}

.color-dot-lg {
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

/* Tag group in picker */
.tag-group {
    margin-bottom: var(--space-3);
}

.tag-group-header {
    font-size: var(--text-sm);
    font-weight: 600;
    margin-bottom: var(--space-1);
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.tag-group-indent-1 { margin-left: var(--space-4); }
.tag-group-indent-2 { margin-left: var(--space-8); }
.tag-group-indent-3 { margin-left: var(--space-12); }

/* Tag tree node */
.tag-tree-node {
    margin-bottom: var(--space-2);
}

.tag-tree-node-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
}

.tag-tree-node-label {
    font-weight: 600;
}

.tag-tree-node-desc {
    font-size: var(--text-xs);
    color: var(--c-text-muted);
}

.tag-tree-node-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-left: var(--space-5);
    margin-bottom: var(--space-2);
}

.tag-tree-indent-1 { margin-left: var(--space-5); }
.tag-tree-indent-2 { margin-left: var(--space-10); }
.tag-tree-indent-3 { margin-left: var(--space-16); }

/* Modal size variants */
.modal-sm { max-width: 400px; }
.modal-md { max-width: 500px; }
.modal-lg { max-width: 700px; }

.modal-scrollable {
    display: flex;
    flex-direction: column;
    max-height: 70vh;
}

.modal-scrollable .modal-body {
    flex: 1;
    overflow-y: auto;
}

/* Tag filter buttons */
.tag-filter-btn {
    border: 1px solid var(--tag-border, #607D8B);
    border-radius: var(--radius-full);
    padding: 2px 8px;
    font-size: var(--text-xs);
    cursor: pointer;
    transition: all 0.2s;
    background-color: transparent;
    color: inherit;
}

.tag-filter-btn[data-selected="true"] {
    background-color: var(--tag-bg, #607D8B);
    color: var(--tag-text, #fff);
}

.tag-filter-btn:hover {
    opacity: 0.8;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/*                       PRINT STYLES                                          */
/* ═══════════════════════════════════════════════════════════════════════════ */
@media print {
    /* Hide non-essential elements */
    .sidebar,
    .app-sidebar,
    .nav,
    .btn,
    .controls,
    .modal-overlay {
        display: none !important;
    }

    /* Optimize for printing */
    body {
        background: white;
        color: black;
    }

    .card {
        box-shadow: none;
        border: 1px solid #ccc;
        page-break-inside: avoid;
    }

    /* Ensure readable text */
    * {
        color: black !important;
        background: white !important;
    }
}

/* -------------------------------------------------------------------------- */
/*                              Map Service Styles                            */
/* -------------------------------------------------------------------------- */

/* Category tag styling */
.map-category-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: opacity 0.15s ease;
    background-color: var(--cat-bg, #607d8b);
    color: var(--cat-fg, #ffffff);
}

.map-category-tag:hover {
    opacity: 0.85;
}

.map-category-tag-selected {
    outline: 2px solid var(--c-text);
    outline-offset: 1px;
}

/* Color dot in marker list */
.map-color-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
    background-color: var(--dot-color, #607d8b);
}

/* Map marker icon */
.map-marker-wrapper {
    background: transparent !important;
    border: none !important;
}

.map-marker-icon {
    width: var(--marker-size, 20px);
    height: var(--marker-size, 20px);
    border-radius: 50%;
    background-color: var(--marker-color, #607d8b);
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Modal size variant */
.modal-sm {
    max-width: 400px;
}

/* Min height utility */
.min-h-64 {
    min-height: 16rem;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/*                           AVATAR GROUP                                        */
/* ═══════════════════════════════════════════════════════════════════════════ */

.avatar-group {
    display: flex;
}

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

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

/* ═══════════════════════════════════════════════════════════════════════════ */
/*                           TASK CARD                                           */
/* ═══════════════════════════════════════════════════════════════════════════ */

.task-card {
    border: 1px solid var(--c-border);
}

.task-card.bg-blue-50 { background-color: #eff6ff; }
.task-card.bg-green-50 { background-color: #f0fdf4; }
.task-card.bg-yellow-50 { background-color: #fefce8; }
.task-card.bg-red-50 { background-color: #fef2f2; }
.task-card.bg-purple-50 { background-color: #faf5ff; }

/* Priority borders */
.border-l-4 { border-left-width: 4px; border-left-style: solid; }
.border-gray-300 { border-left-color: #d1d5db; }
.border-yellow-400 { border-left-color: #facc15; }
.border-red-500 { border-left-color: #ef4444; }

/* ═══════════════════════════════════════════════════════════════════════════ */
/*                           RIBBON COMPONENT                                   */
/* ═══════════════════════════════════════════════════════════════════════════ */

.blui-ribbon {
    display: flex;
    flex-direction: column;
    background: var(--c-surface);
    border: var(--border-width) solid var(--c-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

/* Tab bar */
.ribbon-tab-bar {
    display: flex;
    align-items: center;
    padding: var(--space-1) var(--space-2);
    background: var(--c-neutral-100);
    border-bottom: var(--border-width) solid var(--c-border);
    min-height: 32px;
}

.ribbon-tabs {
    display: flex;
    gap: var(--space-1);
}

.ribbon-tab-btn {
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--c-text-muted);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.15s ease;
}

.ribbon-tab-btn:hover {
    color: var(--c-text-main);
    background: var(--c-neutral-200);
}

.ribbon-tab-btn.active {
    color: var(--c-primary);
    background: var(--c-surface);
    box-shadow: var(--shadow-sm);
}

/* Collapse button */
.ribbon-collapse-btn {
    margin-left: auto;
    padding: var(--space-1);
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--c-text-muted);
    border-radius: var(--radius-sm);
}

.ribbon-collapse-btn:hover {
    background: var(--c-neutral-200);
}

/* Content area */
.ribbon-content {
    padding: var(--space-2);
    min-height: 80px;
    transition: all 0.2s ease;
}

.ribbon-collapsed .ribbon-content {
    display: none;
}

.ribbon-tab-content {
    display: flex;
    gap: var(--space-2);
    align-items: stretch;
}

/* Groups */
.ribbon-group {
    display: flex;
    flex-direction: column;
    padding: 0 var(--space-3);
    min-width: 60px;
}

.ribbon-group-border {
    border-right: var(--border-width) solid var(--c-border);
    margin-right: var(--space-2);
}

.ribbon-group-items {
    display: flex;
    align-items: flex-start;
    gap: var(--space-1);
    flex: 1;
}

.ribbon-group-label {
    font-size: 10px;
    color: var(--c-text-muted);
    text-align: center;
    margin-top: var(--space-1);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Large button */
.ribbon-btn-lg {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-2);
    min-width: 56px;
    background: transparent;
    border: var(--border-width) solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.15s ease;
    gap: var(--space-1);
}

.ribbon-btn-lg:hover {
    background: var(--c-neutral-100);
    border-color: var(--c-border);
}

.ribbon-btn-lg.active {
    background: var(--c-primary-100);
    border-color: var(--c-primary-300);
}

.ribbon-btn-lg .ribbon-btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ribbon-btn-lg .ribbon-btn-label {
    font-size: 11px;
    color: var(--c-text-main);
    white-space: nowrap;
}

/* Small button */
.ribbon-btn-sm {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    background: transparent;
    border: var(--border-width) solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: var(--text-sm);
    white-space: nowrap;
}

.ribbon-btn-sm:hover {
    background: var(--c-neutral-100);
    border-color: var(--c-border);
}

.ribbon-btn-sm.active {
    background: var(--c-primary-100);
    border-color: var(--c-primary-300);
}

.ribbon-btn-sm .ribbon-btn-text {
    color: var(--c-text-main);
}

/* Icon-only button */
.ribbon-btn-icon-only {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: var(--space-1);
    background: transparent;
    border: var(--border-width) solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.15s ease;
}

.ribbon-btn-icon-only:hover {
    background: var(--c-neutral-100);
    border-color: var(--c-border);
}

.ribbon-btn-icon-only.active {
    background: var(--c-primary-100);
    border-color: var(--c-primary-300);
}

/* Button stack */
.ribbon-btn-stack {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ribbon-btn-stack .ribbon-btn-sm {
    padding: 2px var(--space-2);
}

/* Separator */
.ribbon-separator {
    width: var(--border-width);
    background: var(--c-border);
    margin: 0 var(--space-2);
    align-self: stretch;
}

/* Split button */
.ribbon-split-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.ribbon-split-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-2);
    background: transparent;
    border: var(--border-width) solid transparent;
    border-bottom: none;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    cursor: pointer;
    transition: all 0.15s ease;
    gap: var(--space-1);
}

.ribbon-split-main:hover {
    background: var(--c-neutral-100);
    border-color: var(--c-border);
}

.ribbon-split-drop {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px var(--space-2);
    background: transparent;
    border: var(--border-width) solid transparent;
    border-top: var(--border-width) solid var(--c-border);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    cursor: pointer;
    width: 100%;
}

.ribbon-split-drop:hover {
    background: var(--c-neutral-100);
    border-color: var(--c-border);
}

/* Dropdown */
.ribbon-dropdown {
    position: relative;
}

.ribbon-btn-dropdown .ribbon-chevron {
    display: inline-flex;
    margin-left: var(--space-1);
}

.ribbon-btn-dropdown .ribbon-chevron svg {
    width: 10px;
    height: 10px;
}

.ribbon-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 150px;
    background: var(--c-surface);
    border: var(--border-width) solid var(--c-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    z-index: 100;
    padding: var(--space-1);
}

.ribbon-dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--text-sm);
    text-align: left;
    transition: background 0.15s ease;
}

.ribbon-dropdown-item:hover {
    background: var(--c-neutral-100);
}

/* Gallery */
.ribbon-gallery {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.ribbon-gallery-grid {
    display: grid;
    gap: 2px;
}

.ribbon-gallery-item {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--c-neutral-100);
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 10px;
}

.ribbon-gallery-item:hover {
    border-color: var(--c-neutral-400);
    transform: scale(1.1);
}

.ribbon-gallery-item.active {
    border-color: var(--c-primary);
    box-shadow: 0 0 0 2px var(--c-primary-200);
}

.ribbon-gallery-expand {
    padding: 2px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--c-text-muted);
}

.ribbon-gallery-expand:hover {
    color: var(--c-text-main);
}

/* ========================================
   Component Library - Refactored Styles
   ======================================== */

/* Split Panel */
.split-container {
    display: flex;
    height: 100%;
    width: 100%;
}
.split-horizontal { flex-direction: row; }
.split-vertical { flex-direction: column; }

/* Table */
.table {
    width: 100%;
    border-collapse: collapse;
}

/* Progress Stacked */
.progress-stacked {
    width: 100%;
    height: 8px;
    background: rgba(0,0,0,0.1);
    border-radius: 999px;
    overflow: hidden;
    display: flex;
}
.progress-stacked-lg { height: 12px; }
.progress-stacked-sm { height: 4px; }

/* Conversation */
.conversation {
    display: flex;
    height: 500px;
}

/* Navbar */
.navbar {
    width: 100%;
    padding: var(--space-4);
    background: var(--c-surface);
    border-bottom: var(--border-width) solid rgba(0,0,0,0.05);
    justify-content: space-between;
}

/* Pagination */
.pagination {
    gap: var(--space-2);
}

/* Checkbox/Radio Wrapper */
.checkbox-wrapper,
.radio-wrapper {
    gap: var(--space-2);
    cursor: pointer;
}

/* Textarea */
.textarea {
    min-height: 100px;
    resize: vertical;
    font-family: inherit;
}

/* Slider Container */
.slider-container {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* Spinner */
.spinner {
    width: 24px;
    height: 24px;
    border: 3px solid rgba(0,0,0,0.1);
    border-top-color: var(--c-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
.spinner-sm { width: 16px; height: 16px; border-width: 2px; }
.spinner-lg { width: 32px; height: 32px; border-width: 4px; }

/* Skeleton */
.skeleton {
    background: linear-gradient(90deg, var(--c-surface) 25%, rgba(0,0,0,0.05) 50%, var(--c-surface) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-sm);
    width: 100%;
    height: 20px;
}

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

/* Points Counter */
.points-counter {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

/* Leaderboard Row */
.leaderboard-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border-bottom: var(--border-width) solid rgba(0,0,0,0.05);
}
.leaderboard-row-highlight {
    background: var(--c-primary-50);
}

/* Badge Card */
.badge-card {
    text-align: center;
    padding: var(--space-4);
}
.badge-locked {
    opacity: 0.5;
    filter: grayscale(100%);
}

/* Progress Dashboard */
.progress-dashboard {
    padding: var(--space-4);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
}

/* Daily Progress */
.daily-progress {
    padding: var(--space-3);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
}

/* Badge Display Grid */
.badge-display {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--space-4);
}

/* Rank Badge */
.rank-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-md);
    color: white;
    font-weight: bold;
    font-size: var(--text-xs);
}
.rank-bronze { background: var(--c-bronze, #cd7f32); }
.rank-silver { background: var(--c-silver, #c0c0c0); }
.rank-gold { background: var(--c-gold, #ffd700); }
.rank-platinum { background: var(--c-platinum, #e5e4e2); }

/* Achievement Toast */
.achievement-toast {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 2000;
    min-width: 300px;
    transform: translateY(-100px);
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    background: linear-gradient(135deg, var(--c-primary), var(--c-secondary));
    color: white;
}
.achievement-toast-show {
    transform: translateY(0);
    opacity: 1;
}

/* Progress Ring */
.progress-ring {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
}

/* Milestone Marker */
.milestone-marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: var(--text-xs);
    font-weight: bold;
}
.milestone-reached {
    background: var(--c-primary);
    color: white;
}
.milestone-pending {
    background: rgba(0,0,0,0.1);
    color: var(--c-text-muted);
}

/* Streak Counter */
.streak-counter {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    background: var(--c-achievement-gradient, linear-gradient(135deg, var(--c-primary), var(--c-secondary)));
    color: white;
    font-weight: bold;
}

/* Streak Calendar */
.streak-calendar {
    display: inline-block;
}

/* Trophy Card */
.trophy-card {
    text-align: center;
    padding: var(--space-6);
    background: var(--c-vibrant-gradient, linear-gradient(135deg, var(--c-primary), var(--c-secondary)));
    color: white;
}

/* Trophy Case */
.trophy-case {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-4);
}

/* Reward Card */
.reward-card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
}

/* Facet Filter */
.facet-filter {
    padding: var(--space-3);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
}

/* Points Counter Inner Elements */
.points-counter-icon {
    font-size: var(--text-xl);
}
.points-counter-value {
    font-size: var(--text-2xl);
    color: var(--c-primary);
    font-weight: bold;
}
.points-counter-label {
    font-size: var(--text-sm);
    color: var(--c-text-muted);
}

/* Badge Card Inner Elements */
.badge-card-icon {
    font-size: var(--text-4xl);
    margin-bottom: var(--space-2);
}
.badge-card-name {
    font-weight: bold;
    font-size: var(--text-base);
    margin-bottom: var(--space-1);
}
.badge-card-desc {
    font-size: var(--text-xs);
    color: var(--c-text-muted);
}
.badge-card-lock {
    font-size: var(--text-xs);
    margin-top: var(--space-2);
    color: var(--c-text-muted);
}

/* Trophy Card Inner Elements */
.trophy-card-icon {
    font-size: 4rem;
    margin-bottom: var(--space-3);
}
.trophy-card-name {
    font-size: var(--text-xl);
    font-weight: bold;
    margin-bottom: var(--space-1);
}
.trophy-card-desc {
    font-size: var(--text-sm);
    opacity: 0.9;
}

/* Reward Card Inner Elements */
.reward-card-icon {
    font-size: var(--text-3xl);
}
.reward-card-content {
    flex: 1;
}
.reward-card-name {
    font-weight: bold;
}
.reward-card-desc {
    font-size: var(--text-sm);
    color: var(--c-text-muted);
}
.reward-card-cost {
    font-weight: bold;
    color: var(--c-primary);
}

/* Modal Enhanced - Transition states */
.modal-hidden {
    display: none;
}
.modal-visible {
    display: flex;
}
.modal-fade-in {
    opacity: 1;
}
.modal-fade-out {
    opacity: 0;
}
.modal-content-show {
    transform: scale(1);
}
.modal-content-hide {
    transform: scale(0.9);
}
.modal-transition {
    transition: opacity 0.3s ease;
}
.modal-content-transition {
    transition: transform 0.3s ease;
}
.modal-min-w { min-width: 300px; }
.modal-max-w { max-width: 500px; }
.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

/* Toast */
.toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 2000;
    min-width: 250px;
    transform: translateY(100px);
    opacity: 0;
    transition: all 0.3s ease;
}
.toast-show {
    transform: translateY(0);
    opacity: 1;
}

/* Sidebar */
.sidebar {
    width: 250px;
    height: 100vh;
    background: var(--c-surface);
    border-right: var(--border-width) solid rgba(0,0,0,0.05);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0;
    top: 0;
    transition: transform 0.3s ease;
}
.sidebar-collapsed {
    transform: translateX(-100%);
}
.sidebar-link-active {
    background-color: rgba(0,0,0,0.05);
    font-weight: 600;
}

/* Split Pane Enhancements */
.split-pane {
    overflow: auto;
}
.split-gutter {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--c-border, #e5e7eb);
}
.split-gutter-horizontal {
    width: 8px;
    cursor: col-resize;
}
.split-gutter-vertical {
    height: 8px;
    cursor: row-resize;
}
.split-gutter-grip {
    background: var(--c-text-muted, #9ca3af);
    border-radius: 2px;
    opacity: 0.5;
}
.split-gutter-grip-horizontal {
    width: 4px;
    height: 30px;
}
.split-gutter-grip-vertical {
    width: 30px;
    height: 4px;
}

/* Navbar Links Container */
.navbar-links {
    gap: var(--space-4);
}

/* Navbar Link */
.navbar-link {
    cursor: pointer;
    font-weight: 500;
}

/* Sidebar Menu */
.sidebar-menu {
    list-style: none;
    padding: 0;
}
.sidebar-menu-item {
    margin-bottom: var(--space-2);
}
.sidebar-link {
    display: block;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    color: var(--c-text-main);
    transition: background 0.2s;
}

/* Leaderboard Row - Inner Elements */
.leaderboard-rank {
    min-width: 40px;
    height: 40px;
    border-radius: 50%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: var(--text-sm);
}
.leaderboard-rank-1 { background: var(--c-gold, #ffd700); }
.leaderboard-rank-2 { background: var(--c-silver, #c0c0c0); }
.leaderboard-rank-3 { background: var(--c-bronze, #cd7f32); }
.leaderboard-rank-other { background: var(--c-text-muted); }
.leaderboard-level {
    font-size: 11px;
    color: var(--c-text-muted);
}
.leaderboard-score {
    font-size: 14px;
    font-weight: bold;
    color: var(--c-primary);
}

/* Achievement Toast - Inner Elements */
.achievement-content {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.achievement-icon {
    font-size: 48px;
}
.achievement-text {
    flex: 1;
}
.achievement-label {
    opacity: 0.9;
    margin-bottom: var(--space-1);
}

/* Level Bar Header */
.level-bar-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--space-2);
}

/* Progress Ring */
.progress-ring-wrapper {
    position: relative;
}
.progress-ring-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: var(--text-lg);
    font-weight: bold;
}

/* Trophy Card Inner Elements */
.trophy-icon {
    font-size: 64px;
    margin-bottom: var(--space-3);
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
}
.trophy-desc {
    opacity: 0.9;
}
.trophy-date {
    opacity: 0.7;
}

/* Reward Card Inner Elements */
.reward-icon {
    font-size: 48px;
}
.reward-content {
    flex: 1;
}
.reward-value {
    color: var(--c-primary);
}

/* Challenge Card Header */
.challenge-header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-bottom: var(--space-3);
}

/* Checkbox/Radio Box Styles */
.checkbox-box {
    width: 20px;
    height: 20px;
    border: var(--border-width) solid var(--c-text-muted);
    border-radius: var(--radius-sm);
    transition: all 0.2s;
    background: var(--c-surface);
    color: var(--c-text-light);
}
.checkbox-box-checked {
    background-color: var(--c-primary);
    border-color: var(--c-primary);
}

/* Radio Circle */
.radio-circle {
    width: 20px;
    height: 20px;
    border: var(--border-width) solid var(--c-text-muted);
    border-radius: 50%;
    transition: all 0.2s;
    background: var(--c-surface);
    position: relative;
}
.radio-circle-checked {
    border-color: var(--c-primary);
}
.radio-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--c-primary);
    transform: scale(0);
    transition: transform 0.2s;
}
.radio-dot-checked {
    transform: scale(1);
}

/* Slider Input */
.slider-input {
    flex: 1;
}
.slider-value {
    min-width: var(--space-6);
    text-align: right;
}

/* --- Icon Picker --- */
.icon-picker-cell {
    transition: background-color 0.2s;
}
.icon-picker-cell:hover {
    background-color: var(--c-neutral-100);
}
.icon-picker-cell.selected {
    background-color: var(--c-primary-light);
}

/* --- Folder Tree --- */
.folder-tree-row {
    transition: background-color 0.2s;
}
.folder-tree-row.selected {
    background-color: var(--c-primary-light);
}
.folder-tree-row.drag-over {
    background-color: var(--c-primary-light);
    border-top: 2px solid var(--c-primary);
}
.folder-tree-row.dragging {
    opacity: 0.5;
}
.folder-tree-rename-input {
    width: 100%;
    padding: 2px 4px;
    font-size: inherit;
    border: 1px solid var(--c-primary);
    border-radius: 2px;
}
.folder-tree-context-menu {
    position: fixed;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: var(--space-1);
    z-index: 1000;
    min-width: 120px;
}
.folder-tree-context-item {
    padding: var(--space-2);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background-color 0.2s;
}
.folder-tree-context-item:hover {
    background-color: var(--c-muted);
}

/* --- File DropZone --- */
.file-dropzone-trigger {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    cursor: pointer;
    border: 2px dashed var(--c-text-muted);
    background: var(--c-surface);
    transition: border-color 0.2s, background-color 0.2s;
    padding: var(--space-6);
    border-radius: var(--radius-md);
}
.file-dropzone-trigger:hover {
    border-color: var(--c-primary);
}
.file-dropzone-trigger.dragover {
    border-color: var(--c-primary);
    background-color: rgba(var(--c-primary-rgb), 0.05);
}
.file-dropzone-icon {
    color: var(--c-primary);
}

/* --- Conversation List --- */
.conv-list-item {
    transition: background-color 0.2s;
}
.conv-list-item:hover {
    background-color: var(--c-muted);
}
.conv-list-item.selected {
    background-color: var(--c-primary-light);
}
.conv-list-item.selected:hover {
    background-color: var(--c-primary-light);
}

/* --- Chat Message --- */
.conv-message {
    position: relative;
    margin-bottom: 12px;
}
.conv-message.nested {
    border-left: 2px solid var(--c-border);
    padding-left: 12px;
}
.conv-message-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.conv-author.own {
    color: var(--c-primary);
}
.conv-message-content {
    background: var(--c-surface);
    padding: 8px 12px;
    border-radius: var(--radius-md);
    display: inline-block;
    max-width: 80%;
}
.conv-attachments {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap;
}
.conv-attachment {
    background: var(--c-muted);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    cursor: pointer;
    transition: background-color 0.2s;
}
.conv-attachment:hover {
    background-color: var(--c-neutral-200);
}

/* --- Chat Message Actions --- */
.conv-reactions {
    display: flex;
    gap: 4px;
    margin-top: 6px;
}
.conv-reaction {
    background: var(--c-muted);
    padding: 2px 6px;
    border-radius: 12px;
    font-size: 12px;
    cursor: pointer;
    transition: background-color 0.2s;
}
.conv-reaction:hover {
    background-color: var(--c-neutral-200);
}
.conv-actions {
    display: flex;
    gap: 8px;
    margin-top: 6px;
    opacity: 0;
    transition: opacity 0.2s;
}
.conv-message:hover .conv-actions {
    opacity: 1;
}
.conv-action-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--text-xs);
    color: var(--c-text-muted);
}
.conv-action-btn:hover {
    color: var(--c-text);
}
.conv-reply-indicator {
    display: none;
    padding: var(--space-2);
    background: var(--c-muted);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-2);
}
.conv-reply-indicator.active {
    display: block;
}
.conv-reply-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.conv-reply-close {
    background: none;
    border: none;
    cursor: pointer;
}
.conv-reply-preview {
    color: var(--c-muted-fg);
    margin-top: 4px;
}

/* --- Emoji Picker --- */
.emoji-picker,
.conv-emoji-picker {
    position: fixed;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: var(--space-2);
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    z-index: 1000;
}
.emoji-picker-btn {
    cursor: pointer;
    font-size: 18px;
    padding: 4px;
    border: none;
    background: none;
    border-radius: var(--radius-sm);
    transition: background-color 0.2s;
}
.emoji-picker-btn:hover {
    background-color: var(--c-muted);
}

/* --- BlUi Graph --- */
.blui-graph {
    border: 1px solid #ccc;
    background: #fafafa;
}
.blui-graph .blui-nodes g {
    cursor: move;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SEMANTIC COLOR UTILITIES
   For status indicators, badges, backgrounds, and text colors
   ═══════════════════════════════════════════════════════════════════════════ */

/* Background colors - Solid */
.bg-primary { background-color: var(--c-primary); }
.bg-secondary { background-color: var(--c-secondary); }
.bg-success { background-color: var(--c-success); }
.bg-warning { background-color: var(--c-warning); }
.bg-danger { background-color: var(--c-danger); }
.bg-info { background-color: var(--c-info); }

/* Background colors - Light (for cards, alerts) */
.bg-primary-50 { background-color: var(--c-primary-50); }
.bg-primary-100 { background-color: var(--c-primary-100); }
.bg-secondary-50 { background-color: var(--c-secondary-50); }
.bg-secondary-100 { background-color: var(--c-secondary-100); }
.bg-success-50 { background-color: #f0fdf4; }
.bg-success-100 { background-color: #dcfce7; }
.bg-warning-50 { background-color: #fffbeb; }
.bg-warning-100 { background-color: #fef3c7; }
.bg-danger-50 { background-color: #fef2f2; }
.bg-danger-100 { background-color: #fee2e2; }
.bg-info-50 { background-color: #eff6ff; }
.bg-info-100 { background-color: #dbeafe; }

/* Background colors - Dark variants */
.bg-danger-700 { background-color: #b91c1c; }
.bg-warning-600 { background-color: #d97706; }

/* Text colors */
.text-primary { color: var(--c-primary); }
.text-primary-700 { color: var(--c-primary-700); }
.text-secondary { color: var(--c-secondary); }
.text-secondary-700 { color: var(--c-secondary-700); }
.text-success { color: var(--c-success); }
.text-success-700 { color: #15803d; }
.text-warning { color: var(--c-warning); }
.text-warning-600 { color: #d97706; }
.text-warning-700 { color: #b45309; }
.text-danger { color: var(--c-danger); }
.text-danger-700 { color: #b91c1c; }
.text-info { color: var(--c-info); }

/* Border colors */
.border-primary { border-color: var(--c-primary); }
.border-secondary { border-color: var(--c-secondary); }
.border-success { border-color: var(--c-success); }
.border-warning { border-color: var(--c-warning); }
.border-danger { border-color: var(--c-danger); }
.border-danger-200 { border-color: #fecaca; }
.border-info { border-color: var(--c-info); }

/* Border left accent */
.border-l-4 { border-left-width: 4px; border-left-style: solid; }

/* Ring (focus/selected) */
.ring-2 { box-shadow: 0 0 0 2px var(--c-primary-200); }
.ring-danger { box-shadow: 0 0 0 2px var(--c-danger-200, #fecaca); }
.ring-warning { box-shadow: 0 0 0 2px var(--c-warning-200, #fde68a); }
.ring-success { box-shadow: 0 0 0 2px var(--c-success-200, #bbf7d0); }

/* Light background colors for icons/accents */
.bg-primary-50 { background-color: #eff6ff; }
.bg-primary-100 { background-color: #dbeafe; }
.bg-secondary-50 { background-color: #faf5ff; }
.bg-secondary-100 { background-color: #f3e8ff; }
.bg-success-100 { background-color: #dcfce7; }
.bg-warning-100 { background-color: #fef3c7; }
.bg-danger-100 { background-color: #fee2e2; }
.bg-info-100 { background-color: #e0f2fe; }

/* Gray scale backgrounds */
.bg-gray-50 { background-color: #f9fafb; }
.bg-gray-100 { background-color: #f3f4f6; }
.bg-gray-200 { background-color: #e5e7eb; }
.bg-gray-500 { background-color: #6b7280; }
.bg-gray-700 { background-color: var(--c-neutral-700); }
.bg-gray-800 { background-color: var(--c-neutral-800); }
.bg-gray-900 { background-color: var(--c-neutral-900); }

/* Gray scale text */
.text-gray-400 { color: #9ca3af; }
.text-gray-500 { color: #6b7280; }
.text-gray-600 { color: #4b5563; }
.text-gray-700 { color: #374151; }
.text-gray-900 { color: #111827; }

/* Red text scale */
.text-red-600 { color: #dc2626; }

/* Green text scale */
.text-green-600 { color: #16a34a; }

/* ═══════════════════════════════════════════════════════════════════════════
   Service Explorer - Two Panel Layout
   ═══════════════════════════════════════════════════════════════════════════ */

/* Main container - two panel layout */
.se-container {
    display: flex;
    height: 100%;
    min-height: 500px;
}

/* Left panel - structure, properties, add bar */
.se-left-panel {
    width: 320px;
    min-width: 280px;
    max-width: 400px;
    border-right: 1px solid var(--c-border);
    display: flex;
    flex-direction: column;
    background: var(--c-surface);
}

/* Right panel - preview area */
.se-right-panel {
    flex: 1;
    overflow: auto;
    background: var(--c-bg);
}

/* Section within left panel */
.se-section {
    padding: 12px;
    border-bottom: 1px solid var(--c-border);
}

.se-section:last-child {
    border-bottom: none;
}

/* Section title */
.se-section-title {
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--c-text-muted);
    margin-bottom: 8px;
}

/* Structure tree enhancements */
.se-tree-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color 0.15s;
}

.se-tree-item:hover {
    background: var(--c-hover);
}

.se-tree-item.selected {
    background: var(--c-primary-100);
}

.se-tree-item-icon {
    width: 16px;
    color: var(--c-text-muted);
}

.se-tree-item-label {
    flex: 1;
    font-size: 13px;
}

.se-tree-item-badge {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
    background: var(--c-bg);
    color: var(--c-text-muted);
    border: 1px solid var(--c-border);
}

.se-tree-item-badge.service {
    background: var(--c-primary-100);
    color: var(--c-primary);
    border-color: var(--c-primary-200);
}

.se-tree-item-badge.empty {
    background: var(--c-warning-100);
    color: var(--c-warning);
    border-color: var(--c-warning);
    font-style: italic;
}

.se-tree-item-add {
    opacity: 0;
    transition: opacity 0.15s;
}

.se-tree-item:hover .se-tree-item-add {
    opacity: 1;
}

/* Properties panel */
.se-props-empty {
    color: var(--c-text-muted);
    font-size: 13px;
    text-align: center;
    padding: 20px;
}

/* Add bar at bottom */
.se-add-bar {
    margin-top: auto;
    padding: 12px;
    border-top: 1px solid var(--c-border);
    background: var(--c-surface);
}

/* Preview highlighting */
.viewport-highlight {
    outline: 2px solid var(--c-primary) !important;
    outline-offset: 2px !important;
    border-radius: var(--radius-sm);
    transition: outline 0.2s ease, outline-offset 0.2s ease;
}

/* Preview clickable areas */
[data-viewport-path] {
    cursor: pointer;
    transition: outline 0.15s ease, outline-offset 0.15s ease, box-shadow 0.15s ease;
}

[data-viewport-path]:hover:not(.viewport-highlight) {
    outline: 1px dashed var(--c-primary-light, #93c5fd);
    outline-offset: 1px;
}

/* -------------------------------------------------------------------------- */
/*                    Extended Utility Classes (Composable)                    */
/* -------------------------------------------------------------------------- */

/* Display & Layout */
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.hidden { display: none; }
.block { display: block; }

/* Flex extensions */
.flex-row { flex-direction: row; }
.flex-shrink-0 { flex-shrink: 0; }
.flex-grow { flex-grow: 1; }
.items-start { align-items: flex-start; }
.items-stretch { align-items: stretch; }
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }
.self-center { align-self: center; }

/* Grid patterns */
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
.auto-flow-col { grid-auto-flow: column; }

/* Card Grid - responsive cards with fixed max-width and equal heights */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--card-width, 280px), 1fr));
    gap: var(--space-4);
    align-items: stretch;
}
.card-grid > * {
    display: flex;
    flex-direction: column;
}
.card-grid-sm { --card-width: 200px; }
.card-grid-md { --card-width: 280px; }
.card-grid-lg { --card-width: 340px; }
.card-grid-xl { --card-width: 400px; }

/* Card Grid hover effects */
.card-grid > .card {
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.card-grid > .card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--c-border-strong);
}
.card-grid > .card-interactive:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--c-primary-300);
}

/* Common widths */
.w-16 { width: 16px; }
.w-36 { width: 36px; }
.w-60 { width: 60px; }
.min-w-0 { min-width: 0; }
.max-w-full { max-width: 100%; }

/* Common heights */
.h-6 { height: 6px; }
.h-8 { height: 8px; }
.h-12 { height: 12px; }
.h-full { height: 100%; }
.min-h-0 { min-height: 0; }

/* Overflow */
.overflow-x-auto { overflow-x: auto; }

/* Text */
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-mono { font-family: monospace; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.uppercase { text-transform: uppercase; }
.italic { font-style: italic; }

/* Cursor */
.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }

/* Border radius */
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-none { border-radius: 0; }
.rounded-pill { border-radius: 9999px; }

/* Borders */
.border-t { border-top: var(--border-width) solid var(--c-border); }
.border-l { border-left: var(--border-width) solid var(--c-border); }
.border-0 { border: none; }
.border-pri { border-color: var(--c-primary); }

/* Shadows */
.shadow-none { box-shadow: none; }
.shadow-sm { box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.shadow-md { box-shadow: 0 4px 6px rgba(0,0,0,0.1); }

/* Opacity */
.opacity-50 { opacity: 0.5; }
.opacity-70 { opacity: 0.7; }

/* Transitions */
.transition-all { transition: all 0.15s ease; }
.transition-colors { transition: color 0.15s, background-color 0.15s; }

/* Z-index */
.z-10 { z-index: 10; }
.z-50 { z-index: 50; }

/* Position */
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }

/* Selection */
.select-none { user-select: none; }

/* -------------------------------------------------------------------------- */
/*                    Component Base & Modifier Classes                        */
/* -------------------------------------------------------------------------- */

/* Panel layouts (sidebar, control panels) */
.panel { background: var(--c-surface); border-radius: var(--radius-md); }
.panel-bordered { border: 1px solid var(--c-border); }
.panel-flat { background: transparent; border-radius: 0; }

/* Compact modifier - works on many components */
.compact { padding: var(--space-1) !important; }
.compact > * { padding: var(--space-1); }

/* Sidebar panel widths */
.sidebar-sm { width: 200px; min-width: 200px; }
.sidebar-md { width: 260px; min-width: 260px; }
.sidebar-lg { width: 320px; min-width: 320px; }

/* Interactive elements */
.interactive { cursor: pointer; transition: all 0.15s; }
.interactive:hover { opacity: 0.8; }

/* Color accent borders */
.accent-left-pri { border-left: 3px solid var(--c-primary); }
.accent-left-success { border-left: 3px solid var(--c-success); }
.accent-left-warning { border-left: 3px solid var(--c-warning); }
.accent-left-danger { border-left: 3px solid var(--c-danger); }

/* Fullscreen overlay */
.fullscreen { position: fixed; inset: 0; z-index: 100; }

/* Contribution graph cell sizing */
.contribution-cell-sm { width: 8px !important; height: 8px !important; }

/* -------------------------------------------------------------------------- */
/*                    Component-Specific Utilities                             */
/* -------------------------------------------------------------------------- */

/* Tiny button (for tool panels, icon buttons) */
.btn-xs {
    padding: 2px 8px;
    font-size: var(--text-xs);
    min-height: auto;
}

/* Icon cell (for icon grids, selectors) */
.icon-cell {
    width: 48px;
    height: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background 0.15s;
}
.icon-cell:hover { background: var(--c-hover); }
.icon-cell.selected { background: var(--c-primary-100); }
.icon-cell-label { font-size: 9px; color: var(--c-text-muted); overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* Code block / output preview */
.code-block {
    background: var(--c-neutral-100);
    border-radius: var(--radius-sm);
    padding: var(--space-2);
    font-family: monospace;
    font-size: var(--text-xs);
    white-space: pre-wrap;
    overflow-x: auto;
}
.code-block-lg { max-height: 100px; }
.code-block-xl { height: 400px; resize: vertical; }

/* Progress bar utilities */
.progress-bar {
    height: 8px;
    background: var(--c-neutral-200);
    border-radius: 4px;
    overflow: hidden;
}
.progress-bar-sm { height: 6px; border-radius: 3px; }
.progress-bar-fill {
    height: 100%;
    background: var(--c-primary);
    border-radius: inherit;
    transition: width 0.3s;
}
.progress-bar-success .progress-bar-fill { background: var(--c-success); }
.progress-bar-warning .progress-bar-fill { background: var(--c-warning); }
.progress-bar-danger .progress-bar-fill { background: var(--c-danger); }

/* Chat / conversation layouts */
.chat-sidebar {
    width: 220px;
    border-right: 1px solid var(--c-border);
    display: flex;
    flex-direction: column;
}
.chat-main { flex: 1; display: flex; flex-direction: column; }
.chat-messages { flex: 1; overflow-y: auto; padding: var(--space-3); }
.chat-input-area { display: flex; gap: 8px; align-items: flex-end; padding: var(--space-2); border-top: 1px solid var(--c-border); }

/* Typing indicator */
.typing-indicator {
    display: none;
    padding: 8px 12px;
    background: var(--c-muted);
    border-left: 3px solid var(--c-primary);
    margin: 0 12px;
    font-size: var(--text-xs);
}
.typing-indicator.visible { display: block; }

/* Mini input (for compact toolbars) */
.input-xs {
    padding: 4px 8px;
    font-size: var(--text-xs);
    min-height: auto;
}

/* Gamification: Level display */
.level-badge {
    min-width: 80px;
    text-align: center;
}
.level-icon { font-size: 24px; }
.level-label { font-size: var(--text-xs); color: var(--c-text-muted); }
.level-name { font-size: var(--text-xs); font-weight: 600; }

/* Gamification: Achievement/badge chip */
.achievement-chip {
    padding: 4px 8px;
    background: var(--c-neutral-100);
    border-radius: var(--radius-sm);
    font-size: 11px;
}

/* Week calendar grid (7 columns) */
.week-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

/* Flex utilities - more specific */
.flex-1 { flex: 1; }
.flex-auto { flex: auto; }

/* Width utilities */
.w-full { width: 100%; }
.w-80 { width: 80px; }
.w-220 { width: 220px; }
.w-280 { width: 280px; }
.w-320 { width: 320px; }

/* Height utilities */
.h-60 { height: 60px; }
.h-120 { height: 120px; }
.min-h-450 { min-height: 450px; }
.min-h-600 { min-height: 600px; }

/* Font sizes */
.text-9 { font-size: 9px; }
.text-10 { font-size: 10px; }
.text-11 { font-size: 11px; }
.text-12 { font-size: 12px; }
.text-14 { font-size: 14px; }
.text-96 { font-size: 96px; }

/* Common margin utilities */
.mt-auto { margin-top: auto; }
.ml-auto { margin-left: auto; }

/* Overflow */
.overflow-y-auto { overflow-y: auto; }
.overflow-hidden { overflow: hidden; }

/* Background and surface */
.bg-surface { background: var(--c-surface); }
.bg-muted { background: var(--c-muted); }

/* Streak calendar */
.streak-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.streak-cell { width: 12px; height: 12px; border-radius: 2px; background: rgba(0,0,0,0.05); }
.streak-cell.active { background: var(--c-primary); }

/* Text color variants */
.text-success { color: var(--c-success); }

/* ═══════════════════════════════════════════════════════════════════════════ */
/*                         COMPONENT VARIANT CLASSES                            */
/* ═══════════════════════════════════════════════════════════════════════════ */

/* -------------------------------------------------------------------------- */
/*                              Card Variants                                  */
/* -------------------------------------------------------------------------- */

.card-elevated {
    box-shadow: var(--shadow-md);
}

.card-flat {
    box-shadow: none;
    border: 1px solid var(--c-border);
}

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

.card-comfortable {
    padding: var(--space-8);
}

/* -------------------------------------------------------------------------- */
/*                            Accordion Variants                               */
/* -------------------------------------------------------------------------- */

.accordion-bordered .accordion-item {
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-2);
}

.accordion-separated .accordion-item {
    margin-bottom: var(--space-3);
    background: var(--c-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.accordion-compact .accordion-header {
    padding: var(--space-2);
}
.accordion-compact .accordion-content {
    padding: var(--space-2);
}

/* -------------------------------------------------------------------------- */
/*                            Icon Factory Variants                            */
/* -------------------------------------------------------------------------- */

.icon-factory-compact {
    gap: var(--space-2);
}
.icon-factory-compact .icon-cell {
    width: 36px;
    height: 36px;
}

.icon-factory-minimal {
    background: transparent;
    border: none;
    padding: 0;
}

/* -------------------------------------------------------------------------- */
/*                            Stat Card Variants                               */
/* -------------------------------------------------------------------------- */

.stat-card {
    background: var(--c-surface);
    border-radius: var(--radius-md);
    padding: var(--space-4);
}

.stat-card-compact {
    padding: var(--space-2);
}
.stat-card-compact .stat-value { font-size: var(--text-lg); }
.stat-card-compact .stat-label { font-size: var(--text-xs); }

.stat-card-large {
    padding: var(--space-6);
}
.stat-card-large .stat-value { font-size: var(--text-3xl); }
.stat-card-large .stat-label { font-size: var(--text-base); }

.stat-card-minimal {
    background: transparent;
    padding: var(--space-2);
    border: none;
    box-shadow: none;
}

.stat-card-horizontal {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.stat-card-horizontal .stat-icon { order: -1; }

.stat-card-bordered {
    border: 1px solid var(--c-border);
    box-shadow: none;
}

/* -------------------------------------------------------------------------- */
/*                             KPI Card Variants                               */
/* -------------------------------------------------------------------------- */

.kpi-card {
    background: var(--c-surface);
    border-radius: var(--radius-md);
    padding: var(--space-4);
}

.kpi-card-compact {
    padding: var(--space-2);
}
.kpi-card-compact .kpi-value { font-size: var(--text-lg); }

.kpi-card-large {
    padding: var(--space-6);
}
.kpi-card-large .kpi-value { font-size: var(--text-3xl); }

.kpi-card-horizontal {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.kpi-card-success {
    border-left: 4px solid var(--c-success);
}
.kpi-card-success .kpi-value { color: var(--c-success); }

.kpi-card-warning {
    border-left: 4px solid var(--c-warning);
}
.kpi-card-warning .kpi-value { color: var(--c-warning); }

/* -------------------------------------------------------------------------- */
/*                          Trend Indicator Variants                           */
/* -------------------------------------------------------------------------- */

.trend-indicator {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.trend-badge {
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: 500;
}
.trend-badge.trend-up { background: var(--c-success-100); color: var(--c-success); }
.trend-badge.trend-down { background: var(--c-danger-100); color: var(--c-danger); }

.trend-compact {
    font-size: var(--text-xs);
}

.trend-large {
    font-size: var(--text-lg);
}
.trend-large .trend-icon { font-size: var(--text-xl); }

/* -------------------------------------------------------------------------- */
/*                           Metric Grid Variants                              */
/* -------------------------------------------------------------------------- */

.metric-grid {
    display: grid;
    gap: var(--space-4);
}

.metric-grid-compact {
    gap: var(--space-2);
}

.metric-grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.metric-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.metric-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* -------------------------------------------------------------------------- */
/*                            Chart Card Variants                              */
/* -------------------------------------------------------------------------- */

.chart-card {
    background: var(--c-surface);
    border-radius: var(--radius-md);
    padding: var(--space-4);
}

.chart-card-compact {
    padding: var(--space-2);
}
.chart-card-compact .chart-title { font-size: var(--text-sm); }

.chart-card-large {
    padding: var(--space-6);
}
.chart-card-large .chart-area { min-height: 400px; }

.chart-card-flat {
    background: transparent;
    padding: 0;
    border: none;
}

.chart-card-bordered {
    border: 1px solid var(--c-border);
    box-shadow: none;
}

/* -------------------------------------------------------------------------- */
/*                             Heatmap Variants                                */
/* -------------------------------------------------------------------------- */

.heatmap {
    display: inline-block;
}

.heatmap-github .heatmap-cell {
    border-radius: 2px;
}

.heatmap-compact .heatmap-cell {
    width: 8px;
    height: 8px;
    gap: 1px;
}

.heatmap-large .heatmap-cell {
    width: 16px;
    height: 16px;
    gap: 3px;
}

.heatmap-rounded .heatmap-cell {
    border-radius: 50%;
}