/* ==========================================================================
   Vault Design System — Dark Glass
   Inspired by Apple Liquid Glass, Talent Lab, Hirepeak
   ========================================================================== */

/* ---------- Design Tokens ---------- */
:root {
    /* Base Palette */
    --glass-bg-base: #050508;
    --glass-bg-elevated: #0a0a0e;
    --glass-bg-surface: rgba(255, 255, 255, 0.03);
    --glass-bg-surface-hover: rgba(255, 255, 255, 0.055);
    --glass-bg-surface-active: rgba(255, 255, 255, 0.08);
    --glass-bg-surface-selected: rgba(59, 130, 246, 0.12);

    /* Borders */
    --glass-border: rgba(255, 255, 255, 0.05);
    --glass-border-hover: rgba(255, 255, 255, 0.08);
    --glass-border-strong: rgba(255, 255, 255, 0.1);
    --glass-border-interactive: rgba(59, 130, 246, 0.4);

    /* Text */
    --glass-text-primary: rgba(255, 255, 255, 0.92);
    --glass-text-secondary: rgba(255, 255, 255, 0.55);
    --glass-text-tertiary: rgba(255, 255, 255, 0.35);
    --glass-text-placeholder: rgba(255, 255, 255, 0.35);
    --glass-text-on-color: #ffffff;
    --glass-text-error: #f87171;
    --glass-text-inverse: #050508;

    /* Links */
    --glass-link: #60a5fa;
    --glass-link-hover: #93bbfd;

    /* Icons */
    --glass-icon-primary: rgba(255, 255, 255, 0.55);
    --glass-icon-hover: rgba(255, 255, 255, 0.85);
    --glass-icon-interactive: #60a5fa;

    /* Status / Semantic */
    --glass-success: #22c55e;
    --glass-success-muted: rgba(34, 197, 94, 0.12);
    --glass-error: #ef4444;
    --glass-error-muted: rgba(239, 68, 68, 0.12);
    --glass-warning: #f59e0b;
    --glass-warning-muted: rgba(245, 158, 11, 0.12);
    --glass-info: #3b82f6;
    --glass-info-muted: rgba(59, 130, 246, 0.12);

    /* Zone Accents */
    --glass-zone-scanner: #3b82f6;
    --glass-zone-item: #8b5cf6;
    --glass-zone-defects: #f59e0b;
    --glass-zone-form: #64748b;
    --glass-zone-analysis: #10b981;
    --glass-zone-history: #06b6d4;

    /* Glass Effect */
    --glass-blur: blur(12px);
    --glass-blur-heavy: blur(24px) saturate(180%);
    --glass-inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 1px 0 0 rgba(255, 255, 255, 0.03), inset -1px 0 0 rgba(255, 255, 255, 0.03);

    /* Typography */
    --font-sans: 'Inter', -apple-system, 'Segoe UI', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', 'Cascadia Code', monospace;

    /* Spacing */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.25rem;
    --sp-6: 1.5rem;
    --sp-8: 2rem;
    --sp-10: 2.5rem;
    --sp-12: 3rem;

    /* Radius */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* Transitions */
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);
    --duration-instant: 100ms;
    --duration-fast: 150ms;
    --duration-normal: 250ms;
    --duration-slow: 400ms;

    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.25);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.3);
    --shadow-glow-blue: 0 0 20px rgba(59, 130, 246, 0.15);
    --shadow-glow-green: 0 0 12px rgba(34, 197, 94, 0.2);
    --shadow-glow-red: 0 0 12px rgba(239, 68, 68, 0.2);
    --shadow-glow-amber: 0 0 12px rgba(245, 158, 11, 0.2);
    --shadow-glow-purple: 0 0 12px rgba(139, 92, 246, 0.2);
    --shadow-glow-cyan: 0 0 12px rgba(6, 182, 212, 0.2);

    /* Type Scale (aligned to CLAUDE.md spec) */
    --text-xs: 0.75rem;     /* 12px — spec says 12px, not 10px */
    --text-sm: 0.8125rem;   /* 13px */
    --text-base: 0.875rem;  /* 14px */
    --text-md: 1rem;        /* 16px */
    --text-lg: 1rem;        /* 16px */
    --text-xl: 1.125rem;    /* 18px */
    --text-2xl: 1.5rem;     /* 24px */
    --text-3xl: 1.75rem;    /* 28px */
    --text-4xl: 2.25rem;    /* 36px */
    --text-5xl: 3rem;       /* 48px */

    /* DEPRECATED Legacy aliases — migrate all template usage to --glass-* / --sp-* / --text-*
       These exist ONLY for backwards compat. Do NOT reference --cds-* or --spacing-* in new code.
       Canonical tokens: --glass-* (colors/surfaces), --sp-* (spacing), --text-* (font sizes) */
    --spacing-xs: var(--sp-1);
    --spacing-sm: var(--sp-2);
    --spacing-md: var(--sp-3);
    --spacing-lg: var(--sp-4);
    --spacing-xl: var(--sp-5);
    --spacing-2xl: var(--sp-6);
    --spacing-3xl: var(--sp-8);
    --spacing-4xl: var(--sp-12);
    --cds-text-primary: var(--glass-text-primary);
    --cds-text-secondary: var(--glass-text-secondary);
    --cds-text-placeholder: var(--glass-text-placeholder);
    --cds-link-primary: var(--glass-link);
    --cds-support-error: var(--glass-error);
    --cds-support-success: var(--glass-success);
    --cds-support-warning: var(--glass-warning);
    --cds-support-info: var(--glass-info);
    --cds-field: rgba(255, 255, 255, 0.04);
    --cds-border-strong: var(--glass-border-strong);
    --cds-border-subtle: var(--glass-border);
    --cds-focus: rgba(59, 130, 246, 0.6);
    --cds-layer-hover: var(--glass-bg-surface-hover);
    --cds-layer-selected: var(--glass-bg-surface-selected);
    --cds-spacing-03: var(--sp-3);
    --cds-spacing-05: var(--sp-5);
    --cds-spacing-07: var(--sp-8);
    --cds-body-01-font-size: var(--text-base);
    --cds-body-compact-01-font-size: var(--text-base);
    --cds-label-01-font-size: 11px;
    --cds-heading-04-font-size: var(--text-3xl);
    --cds-border-interactive: var(--glass-border-interactive);
    --cds-border-radius: var(--radius-md);
    --cds-spacing-01: var(--sp-1);
    --cds-spacing-02: var(--sp-2);
    --cds-spacing-04: var(--sp-4);
    --cds-spacing-06: var(--sp-6);

    /* Z-index scale */
    --z-base: 1;
    --z-sidebar: 90;
    --z-header: 100;
    --z-dropdown: 200;
    --z-modal: 400;
}

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

html {
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-sans);
    background: var(--glass-bg-base);
    color: var(--glass-text-primary);
    line-height: 1.5;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 55% at 8% 15%, rgba(59,130,246,0.14) 0%, transparent 65%),
        radial-gradient(ellipse 55% 65% at 92% 85%, rgba(139,92,246,0.10) 0%, transparent 65%),
        radial-gradient(ellipse 80% 45% at 50% 50%, rgba(16,185,129,0.07) 0%, transparent 65%),
        radial-gradient(ellipse 40% 35% at 75% 20%, rgba(6,182,212,0.05) 0%, transparent 60%);
    animation: ambient-drift 60s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

/* Noise texture removed — added GPU cost for no functional benefit on MES workstations */

@keyframes ambient-drift {
    0%   { opacity: 1; }
    50%  { opacity: 0.85; }
    100% { opacity: 1; }
}

a { color: var(--glass-link); text-decoration: none; transition: color var(--duration-fast) var(--ease); }
a:hover { color: var(--glass-link-hover); }

.mono, .numeric { font-family: var(--font-mono); }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.15); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------- Header ---------- */
.cds-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 48px;
    display: flex;
    align-items: center;
    padding: 0 var(--sp-4);
    gap: var(--sp-3);
    background: rgba(8, 8, 12, 0.85);
    backdrop-filter: var(--glass-blur-heavy);
    -webkit-backdrop-filter: var(--glass-blur-heavy);
    border-top: 1px solid rgba(255,255,255,0.09);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 1px 0 rgba(59,130,246,0.08), 0 4px 24px rgba(0,0,0,0.4);
    z-index: 100;
}

.cds-header__menu-toggle {
    background: none;
    border: none;
    color: var(--glass-icon-primary);
    cursor: pointer;
    padding: var(--sp-2);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    transition: all var(--duration-fast) var(--ease);
}
.cds-header__menu-toggle:hover { background: rgba(255,255,255,0.08); color: var(--glass-icon-hover); }
.cds-header__menu-toggle svg { fill: currentColor; }

.cds-header__name {
    font-size: 14px;
    font-weight: 500;
    color: var(--glass-text-primary);
    text-decoration: none;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}
.cds-header__logo {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    mix-blend-mode: screen;
}
.cds-header__name--prefix {
    font-weight: 300;
    color: var(--glass-text-secondary);
}

.cds-header__actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--sp-1);
}

.cds-header__action {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--glass-icon-primary);
    background: none;
    border: none;
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: all var(--duration-fast) var(--ease);
    text-decoration: none;
}
.cds-header__action:hover { background: rgba(255,255,255,0.08); color: var(--glass-icon-hover); }
.cds-header__action svg { fill: currentColor; width: 18px; height: 18px; }

.cds-header__user {
    font-size: 12px;
    color: var(--glass-text-tertiary);
    padding-right: var(--sp-1);
}

.cds-header__logout { color: var(--glass-icon-primary); }
.cds-header__logout:hover { color: var(--glass-error); }

/* ---------- Side Navigation ---------- */
.cds-side-nav {
    position: fixed;
    top: 48px;
    left: 0;
    bottom: 0;
    width: 210px;
    background: rgba(10, 10, 14, 0.7);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-right: 1px solid rgba(255,255,255,0.04);
    box-shadow: 1px 0 0 rgba(59,130,246,0.04);
    padding: var(--sp-4) var(--sp-2);
    overflow-y: auto;
    z-index: 90;
    transition: transform var(--duration-normal) var(--ease);
}

.cds-side-nav__items { list-style: none; padding: 0; margin: 0; }
.cds-side-nav__item { margin: 1px 0; }

.cds-side-nav__icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: 0.5;
    transition: opacity var(--duration-fast) var(--ease);
}
.cds-side-nav__link:hover .cds-side-nav__icon { opacity: 0.85; }
.cds-side-nav__link.active .cds-side-nav__icon { opacity: 1; color: #60a5fa; }

.cds-side-nav__link {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-3);
    min-height: 44px;
    font-size: 13px;
    color: var(--glass-text-secondary);
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: all var(--duration-fast) var(--ease);
    font-weight: 400;
}
.cds-side-nav__link:hover { background: rgba(255,255,255,0.06); color: var(--glass-text-primary); box-shadow: inset 2px 0 0 rgba(255,255,255,0.15); }
.cds-side-nav__link:visited { color: var(--glass-text-secondary); }
.cds-side-nav__link:visited:hover { color: var(--glass-text-primary); }
.cds-side-nav__link.active {
    background: linear-gradient(90deg, rgba(59,130,246,0.12), rgba(59,130,246,0.04));
    color: var(--glass-text-primary);
    font-weight: 500;
    box-shadow: inset 3px 0 0 #3b82f6, 0 0 12px rgba(59,130,246,0.08);
}
.cds-side-nav__link.active:visited { color: var(--glass-text-primary); }

.cds-side-nav__section-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--glass-text-secondary);
    padding: var(--sp-3) var(--sp-3) var(--sp-1);
    list-style: none;
}

/* Collapsible nav sections */
.cds-side-nav__section { list-style: none; }

.cds-side-nav__section-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 44px;
    padding: var(--sp-2) var(--sp-3);
    margin: 0;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--glass-text-tertiary);
    background: none;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease);
    list-style: none;
}
.cds-side-nav__section-toggle:hover {
    color: var(--glass-text-secondary);
    background: rgba(255, 255, 255, 0.03);
}
.cds-side-nav__section-toggle .nav-chevron {
    width: 12px;
    height: 12px;
    color: var(--glass-text-tertiary);
    transition: transform var(--duration-fast) var(--ease);
    flex-shrink: 0;
}
.cds-side-nav__section.open .cds-side-nav__section-toggle .nav-chevron {
    transform: rotate(180deg);
}
.cds-side-nav__section.open .cds-side-nav__section-toggle {
    color: var(--glass-text-secondary);
}
/* Section count badge */
.cds-side-nav__section-count {
    font-size: 10px;
    font-weight: 600;
    color: var(--glass-text-tertiary);
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-full);
    padding: 1px 6px;
    margin-left: auto;
    margin-right: var(--sp-2);
    font-family: var(--font-mono);
    letter-spacing: 0;
    text-transform: none;
}

.cds-side-nav__section-items {
    list-style: none;
    padding: 0;
    margin: 0;
    overflow: hidden;
    max-height: 0;
    transition: max-height var(--duration-normal) var(--ease);
}
.cds-side-nav__section.open > .cds-side-nav__section-items {
    max-height: 600px;
}

/* Compact link variant for dense sections — 40px desktop, 44px touch */
.cds-side-nav__link--compact {
    min-height: 40px;
    padding: var(--sp-2) var(--sp-3);
    font-size: 13px;
}

.cds-side-nav__divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--glass-border), transparent);
    margin: var(--sp-2) var(--sp-3);
    list-style: none;
}

/* Desktop: hamburger collapses sidebar */
body.nav-collapsed .cds-side-nav { transform: translateX(-100%); }
body.nav-collapsed .cds-content { margin-left: 0; }

/* Mobile: sidebar hidden by default, slides in on open */
@media (max-width: 900px) {
    .cds-side-nav { transform: translateX(-100%); }
    .cds-side-nav.open { transform: translateX(0); }
}

/* ---------- Content Layout ---------- */
.cds-content {
    margin-left: 210px;
    margin-top: 48px;
    padding: var(--sp-6);
    min-height: calc(100vh - 48px);
    position: relative;
    z-index: 1;
}

@media (max-width: 900px) {
    .cds-content { margin-left: 0; }
}

.cds-grid { max-width: 1400px; }
.cds-grid__col { margin-bottom: var(--sp-4); }

/* ---------- Page Header ---------- */
.cds-page-header { margin-bottom: var(--sp-6); }
.cds-page-header__title, .cds-page-header h1 {
    font-size: 28px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.03em;
    line-height: 1.2;
    padding-bottom: var(--sp-2);
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(90deg, rgba(59,130,246,0.5), rgba(139,92,246,0.3), transparent 70%) 1;
    display: inline-block;
}
.cds-page-header__subtitle, .cds-page-header p {
    font-size: 13px;
    color: var(--glass-text-secondary);
    margin-top: var(--sp-1);
}
.cds-page-header__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
}

/* Station header variant: title left, scanner right */
.cds-page-header--station {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-6);
    margin-bottom: var(--sp-4);
}
.cds-page-header--station h1 { margin-bottom: 0; }
.cds-page-header--station .cds-page-header__scanner {
    flex: 0 1 380px;
    min-width: 260px;
}
.cds-page-header--station .cds-page-header__scanner .cds-scanner-input {
    height: 44px;
    font-size: 15px;
}
.cds-page-header--station .cds-scanner-hint { display: none; }

.cds-text-secondary { color: var(--glass-text-secondary); }

/* ---------- Tiles (Glass Cards) ---------- */
.cds-tile {
    background: var(--glass-bg-surface);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    position: relative;
    overflow: hidden;
    transition: all var(--duration-normal) var(--ease);
}
.cds-tile::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-lg);
    box-shadow: var(--glass-inset-highlight);
    pointer-events: none;
}
.cds-tile:hover {
    background: var(--glass-bg-surface-hover);
    border-color: var(--glass-border-hover);
    transform: translateY(-1px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.3), 0 0 1px rgba(255,255,255,0.08);
}

.cds-tile__header {
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--glass-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
}
.cds-tile__header h3 {
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: -0.01em;
}

.cds-tile__body { padding: var(--sp-5); }

.cds-tile__footer {
    padding: var(--sp-3) var(--sp-5);
    border-top: 1px solid var(--glass-border);
}

/* Zone accents — bottom border + inner radial glow */
.cds-tile[data-zone="scanner"]  { border-bottom: 3px solid rgba(59,130,246,0.45); box-shadow: 0 4px 20px rgba(59,130,246,0.06); background-image: radial-gradient(ellipse at 50% 100%, rgba(59,130,246,0.04) 0%, transparent 60%); }
.cds-tile[data-zone="item"]     { border-bottom: 3px solid rgba(139,92,246,0.45); box-shadow: 0 4px 20px rgba(139,92,246,0.06); background-image: radial-gradient(ellipse at 50% 100%, rgba(139,92,246,0.04) 0%, transparent 60%); }
.cds-tile[data-zone="defects"]  { border-bottom: 3px solid rgba(245,158,11,0.45); box-shadow: 0 4px 20px rgba(245,158,11,0.06); background-image: radial-gradient(ellipse at 50% 100%, rgba(245,158,11,0.04) 0%, transparent 60%); }
.cds-tile[data-zone="form"]     { border-bottom: 3px solid rgba(100,116,139,0.45); box-shadow: 0 4px 20px rgba(100,116,139,0.06); background-image: radial-gradient(ellipse at 50% 100%, rgba(100,116,139,0.04) 0%, transparent 60%); }
.cds-tile[data-zone="analysis"] { border-bottom: 3px solid rgba(16,185,129,0.45); box-shadow: 0 4px 20px rgba(16,185,129,0.06); background-image: radial-gradient(ellipse at 50% 100%, rgba(16,185,129,0.04) 0%, transparent 60%); }
.cds-tile[data-zone="history"]  { border-bottom: 3px solid rgba(6,182,212,0.45); box-shadow: 0 4px 20px rgba(6,182,212,0.06); background-image: radial-gradient(ellipse at 50% 100%, rgba(6,182,212,0.04) 0%, transparent 60%); }
.cds-tile[data-zone]:hover { transform: translateY(-2px); }
.cds-tile[data-zone="scanner"]:hover  { box-shadow: 0 8px 32px rgba(59,130,246,0.12), 0 0 1px rgba(255,255,255,0.08); }
.cds-tile[data-zone="item"]:hover     { box-shadow: 0 8px 32px rgba(139,92,246,0.12), 0 0 1px rgba(255,255,255,0.08); }
.cds-tile[data-zone="defects"]:hover  { box-shadow: 0 8px 32px rgba(245,158,11,0.12), 0 0 1px rgba(255,255,255,0.08); }
.cds-tile[data-zone="form"]:hover     { box-shadow: 0 8px 32px rgba(100,116,139,0.12), 0 0 1px rgba(255,255,255,0.08); }
.cds-tile[data-zone="analysis"]:hover { box-shadow: 0 8px 32px rgba(16,185,129,0.12), 0 0 1px rgba(255,255,255,0.08); }
.cds-tile[data-zone="history"]:hover  { box-shadow: 0 8px 32px rgba(6,182,212,0.12), 0 0 1px rgba(255,255,255,0.08); }

/* Station grid layout */
.cds-station-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-4);
    margin-bottom: var(--sp-4);
}
@media (max-width: 900px) {
    .cds-station-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
    .cds-station-grid { grid-template-columns: 1fr; }
}

/* Station layout: wide main + compact sidebar */
.cds-station-layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: var(--sp-4);
    align-items: start;
}
.cds-station-layout__sidebar .cds-tile__header {
    padding: var(--sp-2) var(--sp-3);
}
.cds-station-layout__sidebar .cds-tile__header h3 {
    font-size: 12px;
}
.cds-station-layout__sidebar .cds-tile__body {
    padding: var(--sp-2) var(--sp-3);
    max-height: 280px;
    overflow-y: auto;
}
.cds-station-layout__sidebar .cds-data-table td,
.cds-station-layout__sidebar .cds-data-table th {
    padding: var(--sp-1) var(--sp-2);
    font-size: 11px;
}
.cds-station-layout__sidebar .cds-tile + .cds-tile {
    margin-top: var(--sp-3);
}
.cds-station-layout__sidebar .cds-metric__value {
    font-size: var(--text-2xl);
}
@media (max-width: 900px) {
    .cds-page-header--station {
        flex-direction: column;
        align-items: stretch;
    }
    .cds-page-header--station .cds-page-header__scanner {
        min-width: unset;
        flex: 1;
    }
    .cds-station-layout {
        grid-template-columns: 1fr;
    }
}

/* ---------- Metrics ---------- */
.cds-metric__value {
    font-family: var(--font-mono);
    font-size: 36px;
    font-weight: 700;
    color: var(--glass-text-primary);
    line-height: 1;
}
.cds-metric__label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--glass-text-secondary);
    margin-top: var(--sp-2);
}

/* Metric color by zone context */
[data-zone="scanner"] .cds-metric__value  { color: #60a5fa; text-shadow: 0 0 20px rgba(59,130,246,0.3); }
[data-zone="item"] .cds-metric__value     { color: #a78bfa; text-shadow: 0 0 20px rgba(139,92,246,0.3); }
[data-zone="form"] .cds-metric__value     { color: #94a3b8; text-shadow: 0 0 20px rgba(148,163,184,0.2); }
[data-zone="analysis"] .cds-metric__value { color: #34d399; text-shadow: 0 0 20px rgba(16,185,129,0.3); }
[data-zone="history"] .cds-metric__value  { color: #22d3ee; text-shadow: 0 0 20px rgba(6,182,212,0.3); }

/* ---------- Notifications ---------- */
.cds-notification {
    background: var(--glass-bg-surface);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-3);
    position: relative;
    overflow: hidden;
    color: var(--glass-text-primary);
    font-size: 13px;
}
.cds-notification::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    border-radius: 3px 0 0 3px;
}
.cds-notification--info::before    { background: var(--glass-info); box-shadow: var(--shadow-glow-blue); }
.cds-notification--success::before { background: var(--glass-success); box-shadow: var(--shadow-glow-green); }
.cds-notification--error::before   { background: var(--glass-error); box-shadow: var(--shadow-glow-red); }
.cds-notification--warning::before { background: var(--glass-warning); }

/* ---------- Tags / Badges ---------- */
.cds-tag {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    letter-spacing: 0.02em;
    border: 1px solid transparent;
}
.cds-tag--green  { background: var(--glass-success-muted); color: #4ade80; border-color: rgba(34,197,94,0.25); box-shadow: 0 0 8px rgba(34,197,94,0.12); }
.cds-tag--blue   { background: var(--glass-info-muted); color: #60a5fa; border-color: rgba(59,130,246,0.25); box-shadow: 0 0 8px rgba(59,130,246,0.12); }
.cds-tag--yellow { background: var(--glass-warning-muted); color: #fbbf24; border-color: rgba(245,158,11,0.25); box-shadow: 0 0 8px rgba(245,158,11,0.12); }
.cds-tag--red    { background: var(--glass-error-muted); color: #f87171; border-color: rgba(239,68,68,0.25); box-shadow: 0 0 8px rgba(239,68,68,0.12); }
.cds-tag--sm     { font-size: 10px; padding: 2px 8px; }

/* ---------- Data Tables ---------- */
.cds-data-table-container {
    background: var(--glass-bg-surface);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.cds-data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.cds-data-table thead { background: rgba(255,255,255,0.02); }
.cds-data-table th {
    text-align: left;
    padding: var(--sp-3) var(--sp-4);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--glass-text-secondary);
    border-bottom: 1px solid var(--glass-border);
}
.cds-data-table th.numeric { text-align: right; }

.cds-data-table td {
    padding: var(--sp-3) var(--sp-4);
    color: var(--glass-text-secondary);
    border-bottom: 1px solid rgba(255,255,255,0.025);
    vertical-align: middle;
}
.cds-data-table td.numeric, .cds-data-table td.mono {
    font-family: var(--font-mono);
    color: var(--glass-text-primary);
}
.cds-data-table td.numeric { text-align: right; }

.cds-data-table tbody tr { transition: all var(--duration-fast) var(--ease); }
.cds-data-table tbody tr:hover { background: rgba(255,255,255,0.045); box-shadow: inset 3px 0 0 rgba(59,130,246,0.3); }
.cds-data-table tbody tr:last-child td { border-bottom: none; }

/* Checkbox in tables */
.cds-data-table input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--glass-info);
}

/* Pagination */
.cds-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: var(--sp-4) 0;
}
.cds-pagination a, .cds-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 var(--sp-3);
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 500;
    color: var(--glass-text-secondary);
    transition: all var(--duration-fast) var(--ease);
}
.cds-pagination a:hover { background: rgba(255,255,255,0.06); color: var(--glass-text-primary); }
.cds-pagination .current { background: var(--glass-bg-surface-selected); color: var(--glass-text-primary); }
.cds-pagination-info { color: var(--glass-text-tertiary); font-size: 12px; }

/* ---------- Buttons ---------- */
.cds-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    height: 40px;
    padding: 0 var(--sp-5);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease);
    text-decoration: none;
    white-space: nowrap;
    line-height: 1;
}
.cds-btn:hover { transform: translateY(-1px); }
.cds-btn:active { transform: translateY(0); }
.cds-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

.cds-btn--primary {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: var(--glass-text-on-color);
    box-shadow: 0 2px 8px rgba(59,130,246,0.3), 0 0 0 1px rgba(59,130,246,0.1);
}
.cds-btn--primary:hover { box-shadow: 0 4px 20px rgba(59,130,246,0.45), 0 0 40px rgba(59,130,246,0.15); }

.cds-btn--secondary {
    background: var(--glass-bg-surface);
    color: var(--glass-text-primary);
    border: 1px solid var(--glass-border);
}
.cds-btn--secondary:hover { background: var(--glass-bg-surface-hover); border-color: var(--glass-border-hover); }

.cds-btn--danger {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: var(--glass-text-on-color);
    box-shadow: 0 2px 8px rgba(239,68,68,0.3);
}
.cds-btn--danger:hover { box-shadow: 0 4px 20px rgba(239,68,68,0.45), 0 0 40px rgba(239,68,68,0.15); }

.cds-btn--success {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: var(--glass-text-on-color);
    box-shadow: 0 2px 8px rgba(34,197,94,0.3);
}
.cds-btn--success:hover { box-shadow: 0 4px 20px rgba(34,197,94,0.45), 0 0 40px rgba(34,197,94,0.15); }

.cds-btn--warning {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: var(--glass-text-inverse);
    box-shadow: 0 2px 8px rgba(245,158,11,0.3);
}
.cds-btn--warning:hover { box-shadow: 0 4px 20px rgba(245,158,11,0.45), 0 0 40px rgba(245,158,11,0.15); }

.cds-btn--ghost {
    background: transparent;
    color: var(--glass-link);
    border: 1px solid transparent;
}
.cds-btn--ghost:hover { background: rgba(255,255,255,0.06); color: var(--glass-link-hover); }

.cds-btn--sm { height: 32px; padding: 0 var(--sp-3); font-size: 12px; }
.cds-btn--lg { height: 48px; padding: 0 var(--sp-6); font-size: 15px; }
.cds-btn--full { width: 100%; }

/* ---------- Forms & Inputs ---------- */
.cds-form-item { margin-bottom: var(--sp-4); }

.cds-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--glass-text-tertiary);
    margin-bottom: var(--sp-2);
}

.cds-text-input {
    width: 100%;
    height: 40px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--glass-border-strong);
    border-radius: var(--radius-md);
    padding: 0 var(--sp-4);
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--glass-text-primary);
    outline: none;
    transition: all var(--duration-fast) var(--ease);
}
.cds-text-input:focus {
    border-color: var(--glass-border-interactive);
    box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
}
.cds-text-input::placeholder { color: var(--glass-text-placeholder); }
.cds-text-input--lg { height: 48px; font-size: 16px; }

.cds-select {
    width: 100%;
    height: 40px;
    background: rgba(255,255,255,0.04) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(255,255,255,0.4)' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;
    border: 1px solid var(--glass-border-strong);
    border-radius: var(--radius-md);
    padding: 0 var(--sp-8) 0 var(--sp-4);
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--glass-text-primary);
    outline: none;
    appearance: none;
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease);
}
.cds-select:focus { border-color: var(--glass-border-interactive); box-shadow: 0 0 0 3px rgba(59,130,246,0.1); }
/* Scanner + Select in flex layout fix */
.cds-scanner-input[style*="flex"] { min-width: 0; }
.cds-scanner-input ~ .cds-select { width: auto !important; min-width: 180px; max-width: 220px; flex: 0 0 auto; }
/* Ensure ALL select dropdowns have dark backgrounds — prevents white-on-white in dark mode */
select option { background: var(--glass-bg-elevated); color: var(--glass-text-primary); }
select optgroup { background: var(--glass-bg-elevated); color: var(--glass-text-primary); }

/* ── Tabs ── */
.cds-tabs { display: flex; gap: 0; border-bottom: 2px solid var(--cds-border-subtle); }
.cds-tabs__tab {
    padding: var(--cds-spacing-03) var(--cds-spacing-05);
    background: none; border: none; border-bottom: 2px solid transparent;
    color: var(--cds-text-secondary); font-size: var(--cds-body-compact-01-font-size);
    font-weight: 500; cursor: pointer; margin-bottom: -2px; transition: all 0.15s;
}
.cds-tabs__tab:hover { color: var(--cds-text-primary); border-bottom-color: var(--cds-border-interactive); }
.cds-tabs__tab--active { color: var(--cds-text-primary); border-bottom-color: var(--cds-link-primary); }

/* ── Radio / Checkbox helpers ── */
.cds-radio, .cds-checkbox { display: inline-flex; align-items: center; gap: var(--cds-spacing-02); cursor: pointer; color: var(--cds-text-primary); font-size: var(--cds-body-compact-01-font-size); }
.cds-radio input, .cds-checkbox input { accent-color: var(--cds-link-primary); }

/* ── Label sizes ── */
.cds-label--sm { font-size: var(--cds-body-compact-01-font-size); color: var(--cds-text-secondary); margin-bottom: var(--cds-spacing-01); display: block; }

/* ── Tile toggle ── */
.cds-tile__toggle { float: right; color: var(--cds-text-secondary); }

/* Select elements using cds-text-input class need dropdown arrow + appearance fix */
select.cds-text-input {
    appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(255,255,255,0.4)' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: var(--sp-8);
}

/* CS note category selects */
.cs-note-category {
    height: 36px;
    background: rgba(255,255,255,0.04) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(255,255,255,0.4)' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center;
    border: 1px solid var(--glass-border-strong);
    border-radius: var(--radius-md);
    padding: 0 var(--sp-8) 0 var(--sp-3);
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--glass-text-primary);
    outline: none;
    appearance: none;
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease);
}
.cs-note-category:focus {
    border-color: var(--glass-border-interactive);
    box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
}

textarea.cds-text-input {
    height: auto;
    min-height: 80px;
    padding: var(--sp-3) var(--sp-4);
    resize: vertical;
}

/* ---------- Scanner Input ---------- */
.cds-scanner-input {
    width: 100%;
    height: 52px;
    background: rgba(59,130,246,0.06);
    border: 1.5px solid rgba(59,130,246,0.25);
    border-radius: var(--radius-md);
    padding: 0 var(--sp-5);
    font-family: var(--font-mono);
    font-size: 18px;
    font-weight: 500;
    color: var(--glass-text-primary);
    text-align: center;
    letter-spacing: 0.08em;
    outline: none;
    transition: all var(--duration-fast) var(--ease);
    animation: scanner-breathe 3s ease-in-out infinite;
}
@keyframes scanner-breathe {
    0%, 100% { border-color: rgba(59,130,246,0.2); box-shadow: 0 0 8px rgba(59,130,246,0.04); }
    50%      { border-color: rgba(59,130,246,0.35); box-shadow: 0 0 16px rgba(59,130,246,0.08); }
}
.cds-scanner-input:focus {
    animation: none;
    border-color: rgba(59,130,246,0.6);
    box-shadow: 0 0 0 3px rgba(59,130,246,0.12), 0 0 24px rgba(59,130,246,0.12);
    background: rgba(59,130,246,0.08);
}
.cds-scanner-input::placeholder { color: var(--glass-text-placeholder); font-weight: 400; }
.cds-scanner-input.success { border-color: var(--glass-success); background: rgba(34,197,94,0.06); }
.cds-scanner-input.error { border-color: var(--glass-error); background: rgba(239,68,68,0.06); }

.cds-scanner-hint {
    font-size: 12px;
    color: var(--glass-text-tertiary);
    margin-top: var(--sp-2);
    text-align: center;
}

/* ---------- Modal ---------- */
.cds-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 400;
    align-items: center;
    justify-content: center;
}
.cds-modal-overlay.active { display: flex; }

.cds-modal {
    background: var(--glass-bg-elevated);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    width: 90%;
    max-width: 560px;
    max-height: 85vh;
    overflow-y: auto;
    animation: modal-in var(--duration-normal) var(--ease);
}

@keyframes modal-in {
    from { opacity: 0; transform: scale(0.95) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.cds-modal__header {
    padding: var(--sp-5);
    border-bottom: 1px solid var(--glass-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.cds-modal__header h2 { font-size: 18px; font-weight: 600; color: var(--glass-text-primary); }
.cds-modal__close {
    background: none;
    border: none;
    color: var(--glass-text-tertiary);
    font-size: 24px;
    cursor: pointer;
    padding: var(--sp-1);
    border-radius: var(--radius-md);
    transition: all var(--duration-fast) var(--ease);
}
.cds-modal__close:hover { color: var(--glass-text-primary); background: rgba(255,255,255,0.06); }

.cds-modal__body { padding: var(--sp-5); }
.cds-modal__footer { padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--glass-border); }

/* ---------- Empty State ---------- */
.cds-empty-state {
    text-align: center;
    padding: var(--sp-12) var(--sp-4);
    color: var(--glass-text-tertiary);
}

/* ---------- Detail Rows ---------- */
.cds-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: var(--sp-2) 0;
    border-bottom: 1px solid rgba(255,255,255,0.025);
}
.cds-detail-row:last-child { border-bottom: none; }
.cds-detail-label { font-size: 12px; color: var(--glass-text-tertiary); font-weight: 500; }
.cds-detail-value { font-size: 13px; color: var(--glass-text-primary); text-align: right; }

/* ---------- Grading Layout ---------- */
.cds-grading-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4);
}
@media (max-width: 900px) { .cds-grading-layout { grid-template-columns: 1fr; } }

.cds-encap-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4);
}
@media (max-width: 900px) { .cds-encap-layout { grid-template-columns: 1fr; } }

/* Grade Inputs */
.cds-grade-inputs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-3);
}

.cds-text-input--grade-group label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--glass-text-tertiary);
    margin-bottom: var(--sp-1);
}
.cds-text-input--grade-group input,
input.cds-text-input--grade {
    width: 100%;
    height: 44px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--glass-border-strong);
    border-radius: var(--radius-md);
    padding: 0 var(--sp-3);
    font-family: var(--font-mono);
    font-size: 18px;
    font-weight: 600;
    color: var(--glass-text-primary);
    text-align: center;
    outline: none;
    transition: all var(--duration-fast) var(--ease);
}
.cds-text-input--grade-group input:focus,
input.cds-text-input--grade:focus {
    border-color: var(--glass-border-interactive);
    box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
}

/* Master Grade Display */
.cds-master-grade { text-align: center; padding: var(--sp-4); }
.cds-master-grade__value, #master-grade-display {
    font-family: var(--font-mono);
    font-size: 48px;
    font-weight: 700;
    color: var(--glass-text-primary);
    line-height: 1;
}
.cds-master-grade__tier {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: var(--sp-2);
    color: var(--glass-text-tertiary);
}
.tier-flawless  { color: #22c55e; text-shadow: 0 0 20px rgba(34,197,94,0.4), 0 0 60px rgba(34,197,94,0.15); }
.tier-mint      { color: #3b82f6; text-shadow: 0 0 20px rgba(59,130,246,0.4), 0 0 60px rgba(59,130,246,0.15); }
.tier-near_mint { color: #06b6d4; text-shadow: 0 0 20px rgba(6,182,212,0.3); }
.tier-excellent { color: #8b5cf6; text-shadow: 0 0 20px rgba(139,92,246,0.3); }
.tier-good      { color: #f59e0b; text-shadow: 0 0 20px rgba(245,158,11,0.3); }
.tier-poor      { color: #ef4444; text-shadow: 0 0 20px rgba(239,68,68,0.3); }

/* Preset Buttons */
.cds-preset-buttons { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.cds-preset-btn {
    height: 32px;
    padding: 0 var(--sp-3);
    background: var(--glass-bg-surface);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    color: var(--glass-text-secondary);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease);
}
.cds-preset-btn:hover { background: var(--glass-bg-surface-hover); color: var(--glass-text-primary); border-color: var(--glass-border-hover); }

/* Traffic Light */
.cds-traffic-light { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); }

/* ---------- Scan Result ---------- */
.cds-scan-result {
    padding: var(--sp-4);
    border-radius: var(--radius-lg);
    margin-top: var(--sp-3);
}
.cds-scan-result[data-scan-status="success"] {
    background: rgba(34,197,94,0.08);
    border: 1px solid rgba(34,197,94,0.25);
    box-shadow: 0 0 20px rgba(34,197,94,0.08), inset 0 1px 0 rgba(34,197,94,0.1);
}
.cds-scan-result[data-scan-status="error"] {
    background: rgba(239,68,68,0.08);
    border: 1px solid rgba(239,68,68,0.25);
    box-shadow: 0 0 20px rgba(239,68,68,0.08), inset 0 1px 0 rgba(239,68,68,0.1);
}
.cds-scan-result__placeholder {
    text-align: center;
    color: var(--glass-text-tertiary);
    padding: var(--sp-8);
}
.cds-scan-result__label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--glass-text-tertiary);
}
.cds-scan-result__value { font-size: 14px; color: var(--glass-text-primary); }

/* ---------- Bulk Mode ---------- */
.cds-bulk-toggle {
    height: 32px;
    padding: 0 var(--sp-4);
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 600;
    background: var(--glass-bg-surface);
    color: var(--glass-text-secondary);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease);
}
.cds-bulk-toggle:hover { background: var(--glass-bg-surface-hover); color: var(--glass-text-primary); }
.cds-bulk-toggle.active {
    background: var(--glass-bg-surface-selected);
    color: var(--glass-text-primary);
    border-color: var(--glass-border-interactive);
}

.cds-bulk-action-bar {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-4);
    background: rgba(59,130,246,0.15);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-radius: var(--radius-md);
    margin-top: var(--sp-3);
    border: 1px solid rgba(59,130,246,0.2);
}
.cds-bulk-count { color: var(--glass-text-primary); font-size: 13px; }
.cds-count-number { font-family: var(--font-mono); font-weight: 600; }

/* ---------- Clickable Cards (e.g., report index) ---------- */
a.cds-tile, .cds-tile a:only-child {
    display: block;
    text-decoration: none;
    cursor: pointer;
}
a.cds-tile:hover .cds-tile__header h3,
a .cds-tile:hover h3 {
    color: var(--glass-link);
}

/* ---------- Help System ---------- */
.cds-help-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--sp-4);
}
.cds-help-content { color: var(--glass-text-secondary); line-height: 1.7; }
.cds-help-content h2, .cds-help-content h3 { color: var(--glass-text-primary); margin: var(--sp-4) 0 var(--sp-2); }
.cds-help-content p { margin-bottom: var(--sp-3); }
.cds-help-content ul, .cds-help-content ol { padding-left: var(--sp-6); margin-bottom: var(--sp-3); }
.cds-help-content kbd {
    background: var(--glass-bg-surface);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    padding: 2px 6px;
    font-family: var(--font-mono);
    font-size: 12px;
}

/* ---------- HTMX Loading ---------- */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: block; }
.scan-loading {
    padding: var(--sp-4);
    text-align: center;
    color: var(--glass-text-tertiary);
    font-style: italic;
}

/* ---------- Login Page ---------- */
.cds-login {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: var(--glass-bg-base);
    position: relative;
}
.cds-login::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse 50% 40% at 25% 25%, rgba(59,130,246,0.12) 0%, transparent 70%),
        radial-gradient(ellipse 40% 50% at 75% 75%, rgba(139,92,246,0.10) 0%, transparent 70%),
        radial-gradient(ellipse 60% 30% at 50% 60%, rgba(6,182,212,0.06) 0%, transparent 70%);
    animation: ambient-drift 60s ease-in-out infinite;
    pointer-events: none;
}

.cds-login__container { position: relative; z-index: 1; width: 100%; max-width: 420px; padding: var(--sp-4); }
.cds-login__card {
    padding: var(--sp-8) var(--sp-8) var(--sp-6);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 16px 64px rgba(0,0,0,0.5), 0 0 1px rgba(255,255,255,0.1), 0 0 80px rgba(59,130,246,0.06), inset 0 1px 0 rgba(255,255,255,0.08), inset 0 -1px 0 rgba(255,255,255,0.02);
    background-image: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.03) 0%, transparent 50%);
}
.cds-login__header { text-align: center; margin-bottom: var(--sp-8); }
.cds-login__logo {
    font-family: var(--font-mono);
    font-size: 44px;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: #ffffff;
    text-shadow: 0 0 40px rgba(59,130,246,0.3), 0 0 80px rgba(59,130,246,0.15), 0 2px 4px rgba(0,0,0,0.5);
}
.cds-login__logo-img {
    width: 200px;
    height: auto;
    display: block;
    margin: 0 auto;
    mix-blend-mode: screen;
}
.cds-login__subtitle {
    font-size: 13px;
    color: var(--glass-text-tertiary);
    margin-top: var(--sp-2);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 500;
}
.cds-login__form .cds-btn {
    margin-top: var(--sp-5);
    height: 44px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.04em;
    box-shadow: 0 4px 20px rgba(59,130,246,0.4), 0 0 60px rgba(59,130,246,0.1);
}
.cds-login__form .cds-btn:hover {
    box-shadow: 0 6px 28px rgba(59,130,246,0.5), 0 0 80px rgba(59,130,246,0.15);
}

/* ---------- Journey & Timeline ---------- */
.journey-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--sp-4);
}
.journey-stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-4) var(--sp-2);
    gap: 0;
}
.journey-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
    min-width: 80px;
}
.step-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    font-family: var(--font-mono);
    border: 2px solid var(--glass-border);
    color: var(--glass-text-tertiary);
    background: var(--glass-bg-surface);
    transition: all var(--duration-normal) var(--ease);
}
.journey-step.completed .step-circle {
    background: rgba(34, 197, 94, 0.15);
    border-color: var(--glass-success);
    color: var(--glass-success);
}
.journey-step.current .step-circle {
    background: rgba(59, 130, 246, 0.15);
    border-color: var(--glass-info);
    color: var(--glass-info);
    box-shadow: 0 0 12px rgba(59, 130, 246, 0.25);
}
.step-label {
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--glass-text-tertiary);
    text-align: center;
}
.journey-step.completed .step-label { color: var(--glass-success); }
.journey-step.current .step-label { color: var(--glass-info); }
.step-connector {
    flex: 1;
    min-width: 24px;
    height: 2px;
    background: var(--glass-border);
    margin: 0 var(--sp-1);
    align-self: flex-start;
    margin-top: 18px;
}
.step-connector.completed { background: var(--glass-success); }

.journey-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
    padding-left: var(--sp-6);
}
.journey-timeline::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 4px;
    bottom: 4px;
    width: 2px;
    background: var(--glass-border);
}
.timeline-event {
    position: relative;
    padding: var(--sp-3) 0;
}
.timeline-dot {
    position: absolute;
    left: calc(-1 * var(--sp-6) + 2px);
    top: calc(var(--sp-3) + 4px);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--glass-text-tertiary);
    border: 2px solid var(--glass-bg-base);
}
.timeline-event.check-in .timeline-dot { background: var(--glass-info); }
.timeline-event.check-out .timeline-dot { background: var(--glass-success); }
.timeline-event.graded .timeline-dot { background: #8b5cf6; }
.timeline-event.hold .timeline-dot { background: var(--glass-error); }
.timeline-description {
    font-size: 0.875rem;
    color: var(--glass-text-primary);
}
.timeline-meta {
    font-size: 0.75rem;
    color: var(--glass-text-tertiary);
    margin-top: var(--sp-1);
}

/* ---------- LPN Label Form Row ---------- */
.cds-form-row {
    display: flex;
    gap: var(--sp-3);
    align-items: flex-end;
}
.cds-form-row .cds-text-input {
    flex: 0 0 160px;
}

/* ---------- Station Split Layout (Fab/Encap product display) ---------- */
.station-split-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--sp-5);
    align-items: start;
}
.station-split-layout__data {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}
.station-split-layout__image {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    background: var(--glass-bg-surface);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: var(--sp-3);
    overflow: hidden;
}
.station-split-layout__image img {
    max-width: 100%;
    max-height: 400px;
    object-fit: contain;
    border-radius: var(--radius-sm);
}
.station-split-layout__image .no-image {
    color: var(--glass-text-tertiary);
    font-size: 0.875rem;
    text-align: center;
}
@media (max-width: 768px) {
    .station-split-layout {
        grid-template-columns: 1fr;
    }
}

/* ---------- Missing Utility Classes ---------- */
.label, .cds-field-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--glass-text-tertiary);
    margin-bottom: var(--sp-1);
}

.text-tertiary { color: var(--glass-text-tertiary); }
.text-secondary { color: var(--glass-text-secondary); }

/* Missing tag variant */
.cds-tag--purple { background: rgba(139,92,246,0.12); color: #a78bfa; border-color: rgba(139,92,246,0.25); box-shadow: 0 0 8px rgba(139,92,246,0.12); }

/* ---------- Focus Visible (Accessibility) ---------- */
.cds-btn:focus-visible,
.cds-side-nav__link:focus-visible,
.cds-header__action:focus-visible,
.cds-header__menu-toggle:focus-visible,
.cds-modal__close:focus-visible,
.cds-preset-btn:focus-visible,
.cds-bulk-toggle:focus-visible,
.cds-pagination a:focus-visible,
a:focus-visible {
    outline: 2px solid var(--glass-info);
    outline-offset: 2px;
}

/* ---------- Skip to Content ---------- */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.skip-to-content {
    position: fixed;
    top: -100%;
    left: var(--sp-4);
    z-index: 999;
    padding: var(--sp-3) var(--sp-5);
    background: var(--glass-info);
    color: white;
    border-radius: var(--radius-md);
    font-weight: 600;
    text-decoration: none;
    transition: top 0.2s;
}
.skip-to-content:focus {
    top: var(--sp-2);
}

/* ---------- Missing Animations ---------- */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    15%, 45%, 75% { transform: translateX(-6px); }
    30%, 60%, 90% { transform: translateX(6px); }
}
.shake { animation: shake 0.5s ease-in-out; }

@keyframes flash-red {
    0%, 100% { background-color: transparent; }
    50% { background-color: rgba(239, 68, 68, 0.15); }
}
.flash-red { animation: flash-red 0.5s ease 3; }

@keyframes fade-in-up {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.fade-in-up { animation: fade-in-up 0.25s var(--ease); }

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
.skeleton {
    background: linear-gradient(90deg, var(--glass-bg-surface) 25%, var(--glass-bg-surface-hover) 50%, var(--glass-bg-surface) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    border-radius: var(--radius-md);
}

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

@keyframes btn-pulse {
    0% { box-shadow: 0 0 0 0 rgba(59,130,246,0.4); }
    100% { box-shadow: 0 0 0 12px rgba(59,130,246,0); }
}

@keyframes input-flash {
    0% { background: rgba(59,130,246,0.15); }
    100% { background: rgba(255,255,255,0.04); }
}
.input-flash { animation: input-flash 0.5s ease-out; }

@keyframes value-pulse {
    0% { color: #60a5fa; text-shadow: 0 0 20px rgba(59,130,246,0.6); }
    100% { color: inherit; text-shadow: none; }
}

/* ---------- Traffic Light Widget ---------- */
.cds-traffic-light .light {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--glass-border);
    transition: all var(--duration-normal) var(--ease);
}
.cds-traffic-light .light.red.active {
    background: var(--glass-error);
    border-color: var(--glass-error);
    box-shadow: 0 0 20px rgba(239,68,68,0.5), 0 0 40px rgba(239,68,68,0.2);
}
.cds-traffic-light .light.green.active {
    background: var(--glass-success);
    border-color: var(--glass-success);
    box-shadow: 0 0 20px rgba(34,197,94,0.5), 0 0 40px rgba(34,197,94,0.2);
}
.cds-traffic-light .light.yellow.active {
    background: var(--glass-warning);
    border-color: var(--glass-warning);
    box-shadow: 0 0 20px rgba(245,158,11,0.5), 0 0 40px rgba(245,158,11,0.2);
}

/* ---------- Scan Result Icon & Message ---------- */
.scan-result-icon {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: var(--sp-3);
    line-height: 1;
}
[data-scan-status="success"] .scan-result-icon { color: var(--glass-success); }
[data-scan-status="error"] .scan-result-icon { color: var(--glass-error); }

.scan-result-message {
    text-align: center;
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: var(--sp-3);
}
[data-scan-status="success"] .scan-result-message { color: var(--glass-success); }
[data-scan-status="error"] .scan-result-message { color: var(--glass-error); }

.scan-result-details {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--sp-2) var(--sp-4);
    font-size: 13px;
}

/* ---------- Loading Spinner ---------- */
.scan-loading::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--glass-border);
    border-top-color: var(--glass-info);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    margin-right: var(--sp-2);
    vertical-align: middle;
}

/* ---------- HTMX Swap Transitions ---------- */
.htmx-added { animation: fade-in-up 0.25s var(--ease); }

/* ---------- Notification Auto-dismiss ---------- */
@keyframes notification-dismiss {
    0%, 75% { opacity: 1; max-height: 100px; margin-bottom: var(--sp-3); }
    100% { opacity: 0; max-height: 0; padding: 0; margin: 0; overflow: hidden; }
}
.cds-notification--auto-dismiss { animation: notification-dismiss 6s ease forwards; }

/* ---------- Error Severity ---------- */
.cds-scan-result.error-critical {
    border-color: rgba(239,68,68,0.6);
    box-shadow: 0 0 30px rgba(239,68,68,0.2), inset 0 1px 0 rgba(239,68,68,0.15);
}
.cds-scan-result.error-warning {
    background: rgba(245,158,11,0.08);
    border: 1px solid rgba(245,158,11,0.25);
    box-shadow: 0 0 20px rgba(245,158,11,0.08);
}

/* ---------- Form Error ---------- */
.cds-form-error {
    color: var(--glass-error);
    font-size: 12px;
    margin-top: var(--sp-1);
}

/* ---------- Progress Bar ---------- */
.cds-progress-bar {
    width: 100%;
    height: 6px;
    background: var(--glass-bg-surface);
    border-radius: var(--radius-full);
    overflow: hidden;
}
.cds-progress-bar__fill {
    height: 100%;
    border-radius: var(--radius-full);
    background: linear-gradient(90deg, var(--glass-info), var(--glass-success));
    transition: width 0.5s var(--ease);
}

/* ---------- Spacing Utilities ---------- */
.cds-mb-0 { margin-bottom: 0; }
.cds-mb-1 { margin-bottom: var(--sp-1); }
.cds-mb-2 { margin-bottom: var(--sp-2); }
.cds-mb-3 { margin-bottom: var(--sp-3); }
.cds-mb-4 { margin-bottom: var(--sp-4); }
.cds-mb-5 { margin-bottom: var(--sp-5); }
.cds-mb-6 { margin-bottom: var(--sp-6); }
.cds-mb-8 { margin-bottom: var(--sp-8); }
.cds-mt-0 { margin-top: 0; }
.cds-mt-1 { margin-top: var(--sp-1); }
.cds-mt-2 { margin-top: var(--sp-2); }
.cds-mt-3 { margin-top: var(--sp-3); }
.cds-mt-4 { margin-top: var(--sp-4); }
.cds-mt-5 { margin-top: var(--sp-5); }
.cds-mt-6 { margin-top: var(--sp-6); }
.cds-mt-8 { margin-top: var(--sp-8); }
.cds-p-2 { padding: var(--sp-2); }
.cds-p-3 { padding: var(--sp-3); }
.cds-p-4 { padding: var(--sp-4); }
.cds-p-5 { padding: var(--sp-5); }
.cds-p-6 { padding: var(--sp-6); }
.cds-pt-3 { padding-top: var(--sp-3); }
.cds-pt-4 { padding-top: var(--sp-4); }
.cds-pt-5 { padding-top: var(--sp-5); }
.cds-pb-3 { padding-bottom: var(--sp-3); }
.cds-pb-4 { padding-bottom: var(--sp-4); }
.cds-pb-5 { padding-bottom: var(--sp-5); }
.cds-gap-1 { gap: var(--sp-1); }
.cds-gap-2 { gap: var(--sp-2); }
.cds-gap-3 { gap: var(--sp-3); }
.cds-gap-4 { gap: var(--sp-4); }
.cds-gap-5 { gap: var(--sp-5); }
.cds-gap-6 { gap: var(--sp-6); }

/* ---------- Display & Alignment Utilities ---------- */
.cds-d-none { display: none; }
.cds-d-block { display: block; }
.cds-d-grid { display: grid; }
.cds-text-center { text-align: center; }
.cds-text-right { text-align: right; }
.cds-flex { display: flex; }
.cds-flex-center { display: flex; align-items: center; justify-content: center; }
.cds-flex-between { display: flex; align-items: center; justify-content: space-between; }
.cds-flex-col { display: flex; flex-direction: column; }
.cds-flex-1 { flex: 1; }
.cds-flex-wrap { flex-wrap: wrap; }
.cds-items-center { align-items: center; }
.cds-justify-between { justify-content: space-between; }
.cds-justify-center { justify-content: center; }
.cds-items-start { align-items: flex-start; }
.cds-cursor-pointer { cursor: pointer; }
.cds-w-full { width: 100%; }
.cds-fw-600 { font-weight: 600; }
.cds-text-xs { font-size: var(--text-xs); }
.cds-text-sm { font-size: var(--text-sm); }
.cds-text-2xl { font-size: var(--text-2xl); }
.cds-master-grade__value--text { font-size: var(--text-2xl); }
.cds-pre-wrap { white-space: pre-wrap; line-height: 1.6; }
.cds-note-text { color: var(--glass-text-secondary); font-size: var(--text-sm); line-height: 1.5; margin: 0; }
.cds-form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.cds-form-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.cds-form-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }

/* ---------- Icon Utilities ---------- */
.cds-tile__header-icon {
    width: 14px;
    height: 14px;
    margin-right: var(--sp-2);
    vertical-align: -0.125em;
    flex-shrink: 0;
}
.cds-icon-inline {
    width: 14px;
    height: 14px;
    margin-right: var(--sp-1);
    vertical-align: -0.125em;
    flex-shrink: 0;
}

/* ---------- Border Utilities ---------- */
.cds-border-top { border-top: 1px solid var(--glass-border); }
.cds-border-bottom { border-bottom: 1px solid var(--glass-border); }

/* ---------- Metric Tile (composite) ---------- */
.cds-metric-tile .cds-tile__body {
    text-align: center;
    padding: var(--sp-5) var(--sp-4);
}

/* ---------- Detail Grid ---------- */
.cds-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--sp-6);
}

/* ---------- Button Extra Small ---------- */
.cds-btn--xs {
    height: 28px;
    padding: 0 var(--sp-3);
    font-size: 11px;
    border-radius: var(--radius-sm);
}

/* ---------- Inline Action Group ---------- */
.cds-action-group {
    display: flex;
    gap: var(--sp-2);
    align-items: center;
}

/* ---------- Tile Stack (auto-spacing between stacked tiles) ---------- */
.cds-tile-stack > .cds-tile + .cds-tile {
    margin-top: var(--sp-4);
}

/* ---------- HTMX Row Loading Indicator ---------- */
tr.htmx-request { opacity: 0.5; pointer-events: none; }

/* ---------- Defect List Touch Targets ---------- */
.cds-defect-item { min-height: 44px; display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) 0; cursor: pointer; }

/* ---------- Touch Target Fixes ---------- */
.cds-preset-btn { min-height: 44px; }
.cds-bulk-toggle { min-height: 44px; }
.cds-data-table input[type="checkbox"] { width: 20px; height: 20px; }
@media (pointer: coarse) {
    .cds-data-table input[type="checkbox"] { width: 24px; height: 24px; }
    label.cds-cursor-pointer { min-height: 44px; }
}

/* ---------- Station Scan Area (prominent empty state) ---------- */
.cds-scan-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    text-align: center;
    color: var(--glass-text-secondary);
    font-size: 14px;
}
.cds-scan-area svg {
    width: 48px;
    height: 48px;
    margin-bottom: var(--sp-4);
    opacity: 0.3;
    color: var(--glass-text-tertiary);
}
.cds-scan-area__hint {
    font-size: 13px;
    color: var(--glass-text-tertiary);
    margin-top: var(--sp-2);
}

/* ---------- Dashboard Layout ---------- */
.cds-dashboard-bottom {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: var(--sp-5);
    align-items: start;
}
@media (max-width: 900px) {
    .cds-dashboard-bottom { grid-template-columns: 1fr; }
}

/* ---------- Quick Actions ---------- */
.cds-quick-actions {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}
.cds-quick-action {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--radius-md);
    color: var(--glass-text-secondary);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: all var(--duration-fast) var(--ease);
    border: 1px solid transparent;
}
.cds-quick-action:hover {
    background: var(--glass-bg-surface-hover);
    color: var(--glass-text-primary);
    border-color: var(--glass-border);
}
.cds-quick-action:visited { color: var(--glass-text-secondary); }
.cds-quick-action:visited:hover { color: var(--glass-text-primary); }
.cds-quick-action__icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    opacity: 0.5;
}
.cds-quick-action:hover .cds-quick-action__icon { opacity: 0.85; }

/* ---------- Quick Actions Row (inline in page header) ---------- */
.cds-quick-actions-row {
    display: flex;
    gap: var(--sp-2);
    align-items: center;
}
.cds-quick-action-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-4);
    min-height: 44px;
    border-radius: var(--radius-md);
    color: var(--glass-text-secondary);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: all var(--duration-fast) var(--ease);
    border: 1px solid var(--glass-border);
    background: var(--glass-bg-surface);
}
.cds-quick-action-btn:hover {
    background: var(--glass-bg-surface-hover);
    color: var(--glass-text-primary);
    border-color: var(--glass-border-hover);
}
.cds-quick-action-btn:visited { color: var(--glass-text-secondary); }
.cds-quick-action-btn:visited:hover { color: var(--glass-text-primary); }
.cds-quick-action-btn .cds-quick-action__icon { width: 16px; height: 16px; }
@media (max-width: 900px) {
    .cds-quick-actions-row { display: none; }
}

/* ---------- Tile Link (clickable tiles) ---------- */
.cds-tile-link { text-decoration: none; color: inherit; cursor: pointer; }
.cds-tile-link:visited { color: inherit; }

/* ---------- Queue Grid (5-col for station queues) ---------- */
.cds-queue-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--sp-4);
}
@media (max-width: 900px) {
    .cds-queue-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 500px) {
    .cds-queue-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Queue Cell (dashboard station queues) ---------- */
.cds-queue-cell {
    text-align: center;
    padding: var(--sp-3);
    border-radius: var(--radius-lg);
}
.cds-queue-cell--bottleneck {
    border: 1px solid rgba(245, 158, 11, 0.4);
    background: rgba(245, 158, 11, 0.05);
}
.cds-queue-cell--medium { border-color: rgba(245, 158, 11, 0.3); }
.cds-queue-cell--high { border-color: rgba(239, 68, 68, 0.4); background: rgba(239, 68, 68, 0.05); }

.cds-queue-bar {
    height: 3px;
    background: var(--glass-bg-surface);
    border-radius: var(--radius-full);
    margin-top: var(--sp-2);
    overflow: hidden;
}
.cds-queue-bar__fill {
    height: 100%;
    width: 40%;
    border-radius: var(--radius-full);
    background: var(--glass-info);
    transition: width 0.5s var(--ease);
}
.cds-queue-bar__fill--medium { width: 65%; background: var(--glass-warning); }
.cds-queue-bar__fill--high { width: 90%; background: var(--glass-error); }

/* ---------- Metric Value Sizes ---------- */
.cds-metric__value--sm { font-size: var(--text-2xl); }

/* ---------- Empty State ---------- */
.cds-empty-state {
    text-align: center;
    padding: var(--sp-10) var(--sp-4);
    color: var(--glass-text-secondary);
    font-size: 14px;
}
.cds-empty-state svg {
    display: block;
    margin: 0 auto var(--sp-4);
    opacity: 0.25;
    width: 48px;
    height: 48px;
    color: var(--glass-text-tertiary);
}
.cds-empty-state__title {
    font-size: 16px;
    font-weight: 600;
    color: var(--glass-text-primary);
    margin-bottom: var(--sp-2);
}
.cds-empty-state__action {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    margin-top: var(--sp-4);
    padding: var(--sp-2) var(--sp-4);
    border-radius: var(--radius-md);
    background: var(--glass-bg-surface);
    border: 1px solid var(--glass-border);
    color: var(--glass-link);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: all var(--duration-fast) var(--ease);
}
.cds-empty-state__action:hover {
    background: var(--glass-bg-surface-hover);
    border-color: var(--glass-border-interactive);
}

/* ---------- Mobile Sidebar Backdrop ---------- */
.cds-sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 80;
}
.cds-sidebar-backdrop.active { display: block; }

/* ---------- Breadcrumbs ---------- */
.cds-breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: 13px;
    color: var(--glass-text-tertiary);
    margin-bottom: var(--sp-4);
}
.cds-breadcrumb a {
    color: var(--glass-text-secondary);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease);
}
.cds-breadcrumb a:hover { color: var(--glass-text-primary); }
.cds-breadcrumb__sep { color: var(--glass-text-tertiary); opacity: 0.5; }
.cds-breadcrumb__current { color: var(--glass-text-primary); font-weight: 500; }

/* ---------- DXF Generator ---------- */
.dxf-form-section { margin-bottom: var(--sp-4); }
.dxf-form-section:last-child { margin-bottom: 0; }

.dxf-section-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--glass-text-tertiary);
    margin-bottom: var(--sp-3);
}

.dxf-dim-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-3);
}

.dxf-nudge-group {
    display: flex;
    align-items: stretch;
    gap: 0;
}
.dxf-nudge-group .cds-text-input {
    border-radius: 0;
    text-align: center;
    flex: 1;
    min-width: 0;
}
.dxf-nudge-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    flex-shrink: 0;
    background: var(--glass-bg-surface);
    border: 1px solid var(--glass-border);
    color: var(--glass-text-primary);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease);
}
.dxf-nudge-btn:first-child { border-radius: var(--radius-md) 0 0 var(--radius-md); }
.dxf-nudge-btn:last-child { border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.dxf-nudge-btn:hover { background: var(--glass-bg-surface-hover); }
.dxf-nudge-btn:active { background: rgba(59, 130, 246, 0.2); }

.dxf-gap-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-3);
}

.dxf-calc-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-2) var(--sp-4);
    padding: var(--sp-3) var(--sp-4);
    background: rgba(16, 185, 129, 0.06);
    border: 1px solid rgba(16, 185, 129, 0.15);
    border-radius: var(--radius-md);
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--glass-text-primary);
    animation: fade-in-up 0.25s var(--ease);
}
.dxf-calc-panel__label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #34d399;
    margin-bottom: var(--sp-2);
    grid-column: 1 / -1;
}

.dxf-preview-container {
    background: var(--glass-bg-surface);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: var(--sp-4);
    text-align: center;
}
.dxf-preview-container img {
    max-width: 100%;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
}

.dxf-component {
    padding-bottom: var(--sp-4);
    margin-bottom: var(--sp-4);
    border-bottom: 1px solid var(--glass-border);
}
.dxf-component:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
.dxf-component h4 {
    font-size: 13px;
    font-weight: 600;
    color: var(--glass-text-primary);
    margin-bottom: var(--sp-3);
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}
.dxf-component h4 .dxf-component-badge {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    background: rgba(139, 92, 246, 0.12);
    color: #a78bfa;
    border: 1px solid rgba(139, 92, 246, 0.25);
}

.dxf-comp-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-3);
    margin-bottom: var(--sp-3);
}
.dxf-comp-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-3);
    margin-bottom: var(--sp-3);
}

.dxf-checkbox-row {
    display: flex;
    gap: var(--sp-5);
    margin-bottom: var(--sp-3);
}

.dxf-preset-bar {
    display: flex;
    gap: var(--sp-2);
    margin-bottom: var(--sp-4);
}
.dxf-preset-bar .cds-preset-btn.active {
    background: var(--glass-bg-surface-selected);
    color: var(--glass-text-primary);
    border-color: var(--glass-border-interactive);
    box-shadow: 0 0 12px rgba(59, 130, 246, 0.12);
}

/* Toggle chevron */
.dxf-chevron {
    width: 16px;
    height: 16px;
    color: var(--glass-text-tertiary);
    transition: transform var(--duration-fast) var(--ease);
    flex-shrink: 0;
}
.dxf-chevron.open { transform: rotate(180deg); }

/* Search mode pills */
.dxf-search-pills {
    display: flex;
    gap: var(--sp-1);
    margin-bottom: var(--sp-4);
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-md);
    padding: 3px;
    border: 1px solid var(--glass-border);
}
.dxf-search-pill {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-1);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 500;
    color: var(--glass-text-secondary);
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease);
    border: none;
    background: none;
}
.dxf-search-pill:hover { color: var(--glass-text-primary); background: rgba(255, 255, 255, 0.04); }
.dxf-search-pill.active {
    background: rgba(59, 130, 246, 0.12);
    color: var(--glass-text-primary);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}
.dxf-search-pill input[type="radio"] { display: none; }

/* Material thickness inline */
.dxf-material-row {
    display: flex;
    align-items: flex-end;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
}
.dxf-material-row .cds-text-input { width: 140px; flex-shrink: 0; }

/* Sidebar help rows tighter */
.dxf-help-row {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-2) 0;
}
.dxf-help-row:not(:last-child) { border-bottom: 1px solid rgba(255, 255, 255, 0.025); }
.dxf-help-step {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    font-family: var(--font-mono);
    background: rgba(59, 130, 246, 0.1);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.2);
    flex-shrink: 0;
}
.dxf-help-text {
    font-size: 12px;
    color: var(--glass-text-secondary);
    line-height: 1.5;
}

/* Layer legend */
.dxf-layer-legend {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    margin-top: var(--sp-3);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--glass-border);
}
.dxf-layer-item {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: 12px;
    color: var(--glass-text-secondary);
}
.dxf-layer-swatch {
    width: 12px;
    height: 3px;
    border-radius: 2px;
    flex-shrink: 0;
}
.dxf-layer-swatch--ref { background: #06b6d4; }
.dxf-layer-swatch--cut { background: #ef4444; }
.dxf-layer-swatch--opt { background: #22c55e; }

@media (max-width: 900px) {
    .dxf-gap-grid { grid-template-columns: repeat(2, 1fr); }
    .dxf-preset-bar { flex-wrap: wrap; }
}

/* ---------- Print ---------- */
@media print {
    body::before, .cds-header, .cds-side-nav, .cds-bulk-toggle { display: none !important; }
    .cds-content { margin: 0; padding: var(--sp-4); }
    body { background: #fff; color: #000; }
    .cds-tile { border: 1px solid #ddd; background: #fff; backdrop-filter: none; }
    .cds-data-table th, .cds-data-table td { color: #000; border-color: #ddd; }
    .cds-btn { display: none; }
}

/* ---------------------------------------------------------------------------
   Production Dashboard
   --------------------------------------------------------------------------- */

.dashboard-hero {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--cds-spacing-05);
    margin-bottom: var(--cds-spacing-07);
}

.dashboard-card {
    background: var(--cds-layer-01);
    border-radius: 4px;
    padding: var(--cds-spacing-06);
    text-align: center;
    border-top: 4px solid transparent;
}

.dashboard-card__label {
    font-size: var(--cds-heading-compact-01-font-size);
    font-weight: 600;
    color: var(--cds-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--cds-spacing-03);
}

.dashboard-card__count {
    font-size: 5rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: var(--cds-spacing-03);
    font-family: 'JetBrains Mono', monospace;
}

.dashboard-card__goal {
    font-size: var(--cds-body-01-font-size);
    color: var(--cds-text-secondary);
}

.dashboard-card__pct {
    font-size: var(--cds-heading-03-font-size);
    font-weight: 600;
    margin-top: var(--cds-spacing-03);
}

/* Color classes */
.dashboard-goal--green { border-top-color: #24a148; }
.dashboard-goal--green .dashboard-card__count,
.dashboard-goal--green .dashboard-card__pct { color: #24a148; }

.dashboard-goal--yellow { border-top-color: #f1c21b; }
.dashboard-goal--yellow .dashboard-card__count,
.dashboard-goal--yellow .dashboard-card__pct { color: #f1c21b; }

.dashboard-goal--orange { border-top-color: #ff832b; }
.dashboard-goal--orange .dashboard-card__count,
.dashboard-goal--orange .dashboard-card__pct { color: #ff832b; }

.dashboard-goal--red { border-top-color: #da1e28; }
.dashboard-goal--red .dashboard-card__count,
.dashboard-goal--red .dashboard-card__pct { color: #da1e28; }

/* History table color on td */
td.dashboard-goal--green { color: #24a148; }
td.dashboard-goal--yellow { color: #f1c21b; }
td.dashboard-goal--orange { color: #ff832b; }
td.dashboard-goal--red { color: #da1e28; }

/* Turnaround metrics */
.dashboard-turnaround {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--cds-spacing-05);
    margin-bottom: var(--cds-spacing-07);
}

.dashboard-turnaround__card {
    background: var(--cds-layer-01);
    border-radius: 4px;
    padding: var(--cds-spacing-06);
    text-align: center;
}

.dashboard-turnaround__value {
    font-size: 3rem;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    color: var(--cds-text-primary);
}

.dashboard-turnaround__label {
    font-size: var(--cds-body-01-font-size);
    color: var(--cds-text-secondary);
    margin-top: var(--cds-spacing-02);
}

/* History table */
.dashboard-history {
    width: 100%;
    border-collapse: collapse;
}

.dashboard-history th,
.dashboard-history td {
    padding: var(--cds-spacing-04) var(--cds-spacing-05);
    text-align: center;
    font-size: var(--cds-heading-compact-01-font-size);
}

.dashboard-history th {
    color: var(--cds-text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--cds-border-subtle);
}

.dashboard-history td {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.5rem;
    font-weight: 600;
}

.dashboard-history td:first-child {
    text-align: left;
    font-family: 'Inter', sans-serif;
    font-size: var(--cds-body-01-font-size);
    color: var(--cds-text-secondary);
}

.dashboard-history tr {
    border-bottom: 1px solid var(--cds-border-subtle);
}

/* TV mode overrides */
.dashboard-tv .dashboard-card__count {
    font-size: 8rem;
}

.dashboard-tv .dashboard-turnaround__value {
    font-size: 4rem;
}

.dashboard-tv .dashboard-history td {
    font-size: 2rem;
}

.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--cds-spacing-07);
}

.dashboard-header__title {
    font-size: var(--cds-heading-04-font-size);
    font-weight: 600;
    color: var(--cds-text-primary);
}

.dashboard-header__meta {
    font-size: var(--cds-body-01-font-size);
    color: var(--cds-text-secondary);
}

.dashboard-section-label {
    font-size: var(--cds-heading-compact-01-font-size);
    font-weight: 600;
    color: var(--cds-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--cds-spacing-04);
}

/* --- Dashboard Enhancements --- */

/* Progress bar under each card */
.dashboard-card__progress {
    margin-top: var(--cds-spacing-03);
    height: 6px;
    background: rgba(255,255,255,0.08);
    border-radius: 3px;
    overflow: hidden;
}
.dashboard-card__progress-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.dashboard-goal--green .dashboard-card__progress-fill { background: #24a148; }
.dashboard-goal--yellow .dashboard-card__progress-fill { background: #f1c21b; }
.dashboard-goal--orange .dashboard-card__progress-fill { background: #ff832b; }
.dashboard-goal--red .dashboard-card__progress-fill { background: #da1e28; }

/* Glow pulse on cards that hit goal */
.dashboard-goal--green .dashboard-card__count {
    text-shadow: 0 0 30px rgba(36, 161, 72, 0.4);
}
.dashboard-goal--green {
    animation: goalGlow 3s ease-in-out infinite;
}
@keyframes goalGlow {
    0%, 100% { box-shadow: 0 0 0 rgba(36, 161, 72, 0); }
    50% { box-shadow: 0 0 24px rgba(36, 161, 72, 0.2); }
}

/* ==========================================================================
   Interaction Polish — Professional Motion & Feedback

   Design principles:
   - Motion confirms actions, never decorates
   - Nothing bounces, wiggles, or overshoots
   - Transitions are fast and purposeful (≤250ms)
   - Scan feedback is the priority — operators need instant visual confirmation
   - Static elements (tags, headers, table rows) don't animate on hover
   ========================================================================== */

/* ── Button Press Feedback ── */
.cds-btn:active { transform: translateY(0) scale(0.98); transition-duration: var(--duration-instant); }
.cds-btn:focus-visible { outline: 2px solid var(--glass-link); outline-offset: 2px; }

/* ── Tile Hover ── */
.cds-tile {
    transition: box-shadow var(--duration-normal) var(--ease-out),
                border-color var(--duration-fast) var(--ease);
}
.cds-tile:hover {
    box-shadow: var(--shadow-md), 0 0 1px rgba(255,255,255,0.06);
}

/* ── Form Focus ── */
.cds-text-input:focus, .cds-select:focus, textarea.cds-text-input:focus {
    box-shadow: 0 0 0 3px rgba(59,130,246,0.12);
    background: rgba(255,255,255,0.06);
}

/* ── HTMX Content Swaps (fade in, no movement) ── */
.htmx-added { animation: content-fade-in var(--duration-fast) var(--ease-out); }
.htmx-swapping { opacity: 0; transition: opacity var(--duration-instant) var(--ease); }

@keyframes content-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ── Scan Result Feedback (the most important interaction in the app) ── */
[data-scan-status] { animation: scan-appear var(--duration-normal) var(--ease-out); }
@keyframes scan-appear {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Success — green border pulse confirms the scan registered */
[data-scan-status="success"] {
    animation: scan-appear var(--duration-normal) var(--ease-out),
               success-confirm 0.5s var(--ease) 0.1s;
}
@keyframes success-confirm {
    0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.25); }
    100% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
}

/* Error — red border pulse signals a problem */
[data-scan-status="error"] {
    animation: scan-appear var(--duration-normal) var(--ease-out),
               error-alert 0.5s var(--ease) 0.1s;
}
@keyframes error-alert {
    0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.25); }
    100% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
}

/* ── Notification Entrance ── */
.cds-notification { animation: notification-in var(--duration-fast) var(--ease-out); }
@keyframes notification-in {
    from { opacity: 0; transform: translateX(-8px); }
    to { opacity: 1; transform: translateX(0); }
}

/* ── Table Row Hover (background only, no movement) ── */
.cds-data-table tbody tr {
    transition: background var(--duration-instant) var(--ease);
}
.cds-data-table tbody tr:hover {
    background: var(--glass-bg-surface-hover);
}

/* ── Sidebar Navigation ── */
.cds-sidenav a, .cds-sidenav button {
    transition: background var(--duration-fast) var(--ease),
                color var(--duration-fast) var(--ease);
}

/* ── Tile Load (reports/dashboard grids only — subtle, fast) ── */
.cds-reports-grid > * {
    animation: tile-load var(--duration-normal) var(--ease-out) backwards;
}
.cds-reports-grid > :nth-child(2) { animation-delay: 30ms; }
.cds-reports-grid > :nth-child(3) { animation-delay: 60ms; }
.cds-reports-grid > :nth-child(4) { animation-delay: 90ms; }
.cds-reports-grid > :nth-child(5) { animation-delay: 120ms; }
.cds-reports-grid > :nth-child(6) { animation-delay: 150ms; }

@keyframes tile-load {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ── HTMX Loading Indicator (200ms delay prevents flash on fast responses) ── */
.htmx-indicator { opacity: 0; transition: opacity var(--duration-fast) var(--ease); }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { opacity: 1; transition-delay: 200ms; }

/* Spinner */
.cds-loading {
    display: inline-block; width: 20px; height: 20px;
    border: 2px solid rgba(255,255,255,0.15);
    border-top-color: var(--glass-link);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
.cds-loading--lg { width: 40px; height: 40px; border-width: 3px; }

/* ── Empty State ── */
.cds-empty-state { animation: content-fade-in var(--duration-normal) var(--ease-out); }

/* ── Skeleton Shimmer (for loading placeholders) ── */
.cds-skeleton {
    background: linear-gradient(90deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0.03) 100%);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    border-radius: var(--radius-sm);
}

/* ── Modal ── */
.cds-modal-overlay { animation: content-fade-in var(--duration-fast) var(--ease); }
.cds-modal { animation: modal-in var(--duration-normal) var(--ease-out); }

/* ── Progress Bar ── */
.cds-progress__bar { transition: width 0.6s var(--ease-out); }