/* ============================================
   EDS Design System v7 — Hybrid
   Combines v3's token architecture with EDS brand identity
   ============================================ */

/* --- Design Tokens --- */
:root {
    /* Typography */
    --font-display: 'DM Sans', system-ui, -apple-system, sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

    --text-2xs: 0.625rem;
    --text-xs: 0.75rem;
    --text-sm: 0.8125rem;
    --text-base: 0.9375rem;
    --text-md: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-5xl: 3rem;

    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;

    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;

    /* --- Color Palette: EDS Brand --- */
    /* Primary — EDS Navy */
    --color-primary-50: #eeeef9;
    --color-primary-100: #d5d4f0;
    --color-primary-200: #a9a7e0;
    --color-primary-300: #7d7ad1;
    --color-primary-400: #524fc1;
    --color-primary-500: #1c1a83;   /* EDS Primary */
    --color-primary-600: #181672;
    --color-primary-700: #131160;
    --color-primary-800: #0f0d4e;
    --color-primary-900: #0a083c;

    /* Secondary — EDS Indigo */
    --color-secondary-50: #ededf4;
    --color-secondary-100: #d3d2e5;
    --color-secondary-200: #a6a5cb;
    --color-secondary-300: #7a78b1;
    --color-secondary-400: #4a4890;  /* EDS Secondary */
    --color-secondary-500: #3d3b7a;
    --color-secondary-600: #332f66;
    --color-secondary-700: #282453;
    --color-secondary-800: #1e1a40;
    --color-secondary-900: #140f2d;

    /* Accent — EDS Red */
    --color-accent-50: #fce8e8;
    --color-accent-100: #f5bfbf;
    --color-accent-200: #e88080;
    --color-accent-300: #d94040;
    --color-accent-400: #c71515;
    --color-accent-500: #b70c0d;   /* EDS Accent */
    --color-accent-600: #9e0a0b;
    --color-accent-700: #850809;
    --color-accent-800: #6c0607;
    --color-accent-900: #530405;

    /* Neutrals — Warm tinted */
    --color-neutral-0: #ffffff;
    --color-neutral-25: #fafafa;
    --color-neutral-50: #f5f5f7;
    --color-neutral-100: #ebebef;
    --color-neutral-200: #d8d8de;
    --color-neutral-300: #b8b8c2;
    --color-neutral-400: #8e8e9b;
    --color-neutral-500: #6b6b78;
    --color-neutral-600: #4e4e5a;
    --color-neutral-700: #37374a;
    --color-neutral-800: #252539;
    --color-neutral-900: #1a1a2e;

    /* Semantic Colors */
    --color-success-50: #ecfdf5;
    --color-success-100: #d1fae5;
    --color-success-500: #28a745;
    --color-success-600: #16a34a;
    --color-success-700: #15803d;

    --color-warning-50: #fffbeb;
    --color-warning-100: #fef3c7;
    --color-warning-500: #f59e0b;
    --color-warning-600: #d97706;

    --color-info-50: #eff6ff;
    --color-info-100: #dbeafe;
    --color-info-500: #3b82f6;
    --color-info-600: #2563eb;

    --color-danger-50: #fef2f2;
    --color-danger-100: #fee2e2;
    --color-danger-500: #ef4444;
    --color-danger-600: #dc2626;

    /* --- Semantic Mappings --- */
    --bg-body: var(--color-neutral-50);
    --bg-card: var(--color-neutral-0);
    --bg-sidebar: var(--color-neutral-0);
    --bg-header: var(--color-neutral-0);
    --bg-input: var(--color-neutral-0);
    --bg-hover: var(--color-primary-50);
    --bg-active: var(--color-primary-100);
    --bg-muted: var(--color-neutral-100);

    --text-primary: var(--color-neutral-900);
    --text-secondary: var(--color-neutral-500);
    --text-muted: var(--color-neutral-400);
    --text-inverse: var(--color-neutral-0);
    --text-link: var(--color-primary-500);
    --text-tertiary: var(--color-neutral-400);

    --bg-subtle: var(--color-neutral-50);

    /* Soft tinted surfaces (info/danger notices) — theme-aware so inline
       styles using these adapt automatically in dark mode. */
    --surface-info-soft: var(--color-primary-50);
    --surface-info-border: var(--color-primary-100);
    --text-info-strong: var(--color-primary-700);
    --surface-danger-soft: var(--color-accent-50);
    --surface-danger-border: var(--color-accent-200);
    --text-danger-strong: var(--color-accent-700);
    --surface-warning-soft: var(--color-warning-50);
    --surface-warning-border: var(--color-warning-100);
    --text-warning-strong: #b45309;  /* warning-700 (no scale token defined) */

    --border-light: var(--color-neutral-100);
    --border-default: var(--color-neutral-200);
    --border-strong: var(--color-neutral-300);
    --border-focus: var(--color-primary-500);

    /* Shorthand aliases */
    --color-success: var(--color-success-500);
    --color-warning: var(--color-warning-500);
    --color-danger: var(--color-danger-500);
    --eds-primary: var(--color-primary-500);
    --color-gray-600: var(--color-neutral-500);
    --color-gray-800: var(--color-neutral-800);

    /* --- Shadows --- */
    --shadow-xs: 0 1px 2px rgba(26, 26, 46, 0.04);
    --shadow-sm: 0 1px 3px rgba(26, 26, 46, 0.06), 0 1px 2px rgba(26, 26, 46, 0.04);
    --shadow-md: 0 4px 6px -1px rgba(26, 26, 46, 0.07), 0 2px 4px -2px rgba(26, 26, 46, 0.05);
    --shadow-lg: 0 10px 15px -3px rgba(26, 26, 46, 0.08), 0 4px 6px -4px rgba(26, 26, 46, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(26, 26, 46, 0.1), 0 8px 10px -6px rgba(26, 26, 46, 0.06);
    --shadow-primary: 0 4px 14px rgba(28, 26, 131, 0.25);
    --shadow-accent: 0 4px 14px rgba(183, 12, 13, 0.2);

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

    /* --- Border Radius --- */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.25rem;
    --radius-full: 9999px;

    /* --- Transitions --- */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* --- Z-Index --- */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 300;
    --z-modal: 400;
    --z-popover: 500;
    --z-toast: 600;
    --z-tooltip: 700;
}

/* --- Animations --- */
@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes slide-up {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes slide-in-right {
    from { opacity: 0; transform: translateX(16px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes scale-in {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}
@keyframes pulse-soft {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* --- Alpine.js Cloak --- */
[x-cloak] { display: none !important; }

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

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--text-primary);
    background-color: var(--bg-body);
    min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
    color: var(--text-primary);
}

a {
    color: var(--text-link);
    text-decoration: none;
    transition: color var(--transition-fast);
}
a:hover { color: var(--color-primary-700); }

:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
}

::selection {
    background: var(--color-primary-100);
    color: var(--color-primary-900);
}

/* --- Buttons --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    line-height: 1;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
    user-select: none;
    height: 36px;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.btn-primary {
    background: linear-gradient(135deg, var(--color-primary-500), var(--color-primary-700));
    color: var(--text-inverse);
    box-shadow: var(--shadow-sm), var(--shadow-primary);
}
.btn-primary:hover {
    background: linear-gradient(135deg, var(--color-primary-600), var(--color-primary-800));
    box-shadow: var(--shadow-md), var(--shadow-primary);
}

.btn-secondary {
    background: var(--color-secondary-400);
    color: var(--text-inverse);
}
.btn-secondary:hover { background: var(--color-secondary-500); }

.btn-accent {
    background: var(--color-accent-500);
    color: var(--text-inverse);
    box-shadow: var(--shadow-sm), var(--shadow-accent);
}
.btn-accent:hover { background: var(--color-accent-600); }

.btn-success {
    background: var(--color-success-500);
    color: var(--text-inverse);
}
.btn-success:hover { background: var(--color-success-600); }

.btn-ghost {
    background: transparent;
    color: var(--text-secondary);
    border-color: var(--border-default);
}
.btn-ghost:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--border-strong);
}

.btn-sm { height: 30px; padding: var(--space-1) var(--space-3); font-size: var(--text-xs); }
.btn-lg { height: 42px; padding: var(--space-3) var(--space-6); font-size: var(--text-base); }
.btn-icon {
    width: 36px;
    padding: 0;
    border-radius: var(--radius-md);
}
.btn-icon.btn-sm { width: 30px; }

/* --- Cards --- */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
}
.card-interactive {
    transition: all var(--transition-base);
    cursor: pointer;
}
.card-interactive:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    border-color: var(--border-default);
}

/* --- Inputs --- */
.input {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--text-primary);
    background: var(--bg-input);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    height: 38px;
}
.input:hover { border-color: var(--border-strong); }
.input:focus,
.input:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: -1px;
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px rgba(28, 26, 131, 0.1);
}
.input::placeholder { color: var(--text-muted); }

.input-icon-wrapper {
    position: relative;
}
.input-icon-wrapper .input { padding-left: var(--space-10); }
.input-icon-wrapper .input-icon {
    position: absolute;
    left: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
    font-size: var(--text-base);
}

select.input {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%236b6b78' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: var(--space-8);
    cursor: pointer;
}

/* --- Badges --- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px var(--space-2);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    border-radius: var(--radius-full);
    white-space: nowrap;
}
.badge-primary { background: var(--color-primary-50); color: var(--color-primary-500); }
.badge-accent { background: var(--color-accent-50); color: var(--color-accent-500); }
.badge-success { background: var(--color-success-50); color: var(--color-success-600); }
.badge-warning { background: var(--color-warning-50); color: var(--color-warning-600); }
.badge-info { background: var(--color-info-50); color: var(--color-info-600); }
.badge-neutral { background: var(--bg-muted); color: var(--text-secondary); }

/* --- Avatar --- */
.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--color-primary-500), var(--color-secondary-400));
    color: var(--text-inverse);
    font-weight: var(--font-semibold);
    flex-shrink: 0;
}
.avatar-sm { width: 28px; height: 28px; font-size: var(--text-xs); }
.avatar-md { width: 36px; height: 36px; font-size: var(--text-sm); }
.avatar-lg { width: 48px; height: 48px; font-size: var(--text-lg); }

/* --- Product Cards --- */
.product-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all var(--transition-base);
    display: flex;
    flex-direction: column;
}
.product-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--border-default);
    transform: translateY(-2px);
}
.product-card-image {
    position: relative;
    width: 100%;
    height: 120px;
    background: var(--color-neutral-50);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.product-card-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.product-card-image .placeholder-icon {
    font-size: 2rem;
    color: var(--color-neutral-300);
}
.product-card-badge {
    position: absolute;
    top: var(--space-2);
    left: var(--space-2);
}
.product-card-actions {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    display: flex;
    gap: var(--space-1);
    opacity: 0;
    transition: opacity var(--transition-fast);
}
.product-card:hover .product-card-actions { opacity: 1; }
.product-card-body {
    padding: var(--space-3) var(--space-4);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.product-card-vendor {
    font-size: var(--text-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.product-card-name {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
a.product-card-name:hover,
a.product-card-image:hover ~ .product-card-body .product-card-name {
    color: var(--color-primary-500);
    text-decoration: underline;
}
.product-card-meta {
    font-size: var(--text-xs);
    color: var(--text-secondary);
}
.product-card-footer {
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.product-card-price {
    font-size: var(--text-lg);
    font-weight: var(--font-bold);
    color: var(--color-primary-500);
}

/* Product list view */
.product-list-item {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    display: flex;
    gap: var(--space-4);
    align-items: center;
    transition: all var(--transition-fast);
}
.product-list-item:hover {
    box-shadow: var(--shadow-sm);
    border-color: var(--border-default);
}
.product-list-item .product-image {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-md);
    background: var(--color-neutral-50);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.product-list-item .product-info { flex: 1; min-width: 0; }
.product-list-item .product-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-shrink: 0;
}

/* --- Sidebar --- */
.sidebar {
    width: 260px;
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    z-index: var(--z-sticky);
    transition: transform var(--transition-base), width var(--transition-base);
}
.sidebar-header {
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.sidebar-logo {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--color-primary-500), var(--color-secondary-400));
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-inverse);
    font-weight: var(--font-bold);
    font-size: var(--text-sm);
}
.sidebar-brand {
    font-family: var(--font-display);
    font-weight: var(--font-bold);
    font-size: var(--text-lg);
    color: var(--color-primary-500);
}
.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-3) var(--space-2);
}
.sidebar-nav-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    cursor: pointer;
    transition: all var(--transition-fast);
    margin-bottom: 2px;
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    font-family: inherit;
}
.sidebar-nav-item:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}
.sidebar-nav-item.active {
    background: var(--color-primary-50);
    color: var(--color-primary-500);
    font-weight: var(--font-semibold);
}
.sidebar-nav-item i { width: 20px; text-align: center; font-size: var(--text-base); }
.sidebar-section-label {
    padding: var(--space-3) var(--space-3) var(--space-1);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.sidebar-footer {
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--border-light);
}

/* --- Collapsible sidebar (desktop only; mobile uses off-canvas) --- */
@media (min-width: 769px) {
    .app-layout.sidebar-collapsed .sidebar { width: 72px; }
    .app-layout.sidebar-collapsed .main-content { margin-left: 72px; }
    /* font-size:0 collapses the bare-text labels next to each icon */
    .app-layout.sidebar-collapsed .sidebar-nav-item {
        font-size: 0;
        justify-content: center;
        gap: 0;
    }
    .app-layout.sidebar-collapsed .sidebar-nav-item i { font-size: var(--text-base); }
    .app-layout.sidebar-collapsed .sidebar-brand,
    .app-layout.sidebar-collapsed .sidebar-subtitle,
    .app-layout.sidebar-collapsed .sidebar-section-label,
    .app-layout.sidebar-collapsed .sidebar-nav-item .badge { display: none; }
    .app-layout.sidebar-collapsed .sidebar-header {
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
    }
    .app-layout.sidebar-collapsed .sidebar-footer { padding-left: var(--space-2); padding-right: var(--space-2); }
}

/* --- Main Layout --- */
.app-layout {
    display: flex;
    min-height: 100vh;
}
.main-content {
    flex: 1;
    margin-left: 260px;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    transition: margin-left var(--transition-base);
}

/* --- Top Header --- */
.top-header {
    height: 56px;
    background: var(--bg-header);
    border-bottom: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    padding: 0 var(--space-6);
    gap: var(--space-4);
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
}
.top-header .search-box {
    flex: 1;
    max-width: 480px;
}

/* --- Page Content Area --- */
.page-content {
    flex: 1;
    padding: var(--space-6);
    max-width: 1400px;
    width: 100%;
}

/* --- Stats Grid --- */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-4);
}
.stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5);
    display: flex;
    align-items: center;
    gap: var(--space-4);
}
.stat-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xl);
    flex-shrink: 0;
}
.stat-icon.primary { background: var(--color-primary-50); color: var(--color-primary-500); }
.stat-icon.success { background: var(--color-success-50); color: var(--color-success-500); }
.stat-icon.warning { background: var(--color-warning-50); color: var(--color-warning-500); }
.stat-icon.accent { background: var(--color-accent-50); color: var(--color-accent-500); }
.stat-icon.info { background: var(--color-info-50); color: var(--color-info-500); }
.stat-value {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
}
.stat-label {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    margin-top: 2px;
}

/* --- Products Grid --- */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-4);
}
.products-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* --- View Toggle --- */
.view-toggle {
    display: inline-flex;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.view-toggle-btn {
    padding: var(--space-2) var(--space-3);
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    transition: all var(--transition-fast);
    font-size: var(--text-sm);
}
.view-toggle-btn:hover { color: var(--text-primary); background: var(--bg-hover); }
.view-toggle-btn.active {
    background: var(--color-primary-500);
    color: var(--text-inverse);
}

/* --- Filter Panel --- */
.filter-panel {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
}
.filter-section { margin-bottom: var(--space-4); }
.filter-section:last-child { margin-bottom: 0; }
.filter-label {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-2);
}
.filter-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    background: var(--color-primary-50);
    color: var(--color-primary-500);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    cursor: pointer;
    transition: all var(--transition-fast);
}
.filter-tag:hover { background: var(--color-primary-100); }
.filter-tag .remove { font-size: 10px; opacity: 0.7; }
.filter-tag .remove:hover { opacity: 1; }

/* --- Pagination --- */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
}
.pagination-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}
.pagination-btn:hover:not(:disabled) {
    border-color: var(--color-primary-500);
    color: var(--color-primary-500);
    background: var(--color-primary-50);
}
.pagination-btn.active {
    background: var(--color-primary-500);
    color: var(--text-inverse);
    border-color: var(--color-primary-500);
}
.pagination-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.pagination-ellipsis {
    width: 36px;
    text-align: center;
    color: var(--text-muted);
    font-size: var(--text-sm);
}

/* --- Toast Notifications --- */
.toast-container {
    position: fixed;
    top: var(--space-4);
    right: var(--space-4);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.toast {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    animation: slide-in-right var(--transition-base) ease-out;
    min-width: 300px;
    max-width: 420px;
}
.toast-success { border-left: 3px solid var(--color-success-500); }
.toast-error { border-left: 3px solid var(--color-danger-500); }
.toast-warning { border-left: 3px solid var(--color-warning-500); }
.toast-info { border-left: 3px solid var(--color-info-500); }

/* --- Cart Drawer --- */
.cart-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 380px;
    height: 100vh;
    background: var(--bg-card);
    border-left: 1px solid var(--border-light);
    box-shadow: var(--shadow-xl);
    z-index: var(--z-modal);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform var(--transition-base);
}
.cart-drawer.open { transform: translateX(0); }
.cart-drawer-header {
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.cart-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-4);
}
.cart-drawer-footer {
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--border-light);
}
.cart-item {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--border-light);
}
.cart-item:last-child { border-bottom: none; }
.cart-item-image {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    background: var(--color-neutral-50);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.cart-item-info { flex: 1; min-width: 0; }
/* Vendor grouping inside the cart drawer (one PO per vendor) */
.cart-vendor-group {
    margin-bottom: var(--space-4);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 0 var(--space-3) var(--space-1);
}
.cart-vendor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--border-light);
}
.cart-vendor-name {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
    min-width: 0;
}
.cart-vendor-icon { margin-right: var(--space-1); }
.cart-vendor-subtotal {
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    color: var(--color-primary-500);
    white-space: nowrap;
}
.cart-vendor-minimum-hint {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--text-warning-strong);
    background: var(--surface-warning-soft);
    border: 1px solid var(--surface-warning-border);
    border-radius: var(--radius-sm);
    padding: var(--space-2);
    margin: var(--space-2) 0;
}
.cart-vendor-minimum-hint i { margin-top: 2px; }
/* Quick add by item number (browse toolbar) */
.quick-add-group {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-2);
    border: 1px dashed var(--border-default);
    border-radius: var(--radius-md);
}
.quick-add-icon { color: var(--color-primary-500); font-size: var(--text-sm); }
.quick-add-input { width: 160px; }
.quick-add-qty { width: 64px; }
.quick-add-btn { white-space: nowrap; }

/* PO numbers shown on converted orders */
.order-po-numbers {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-top: 2px;
    white-space: nowrap;
}
.order-po-count {
    font-weight: var(--font-normal);
    color: var(--text-muted);
    font-size: var(--text-sm);
}
.cart-po-split-note {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-bottom: var(--space-3);
}

/* --- Overlay / Backdrop --- */
.overlay {
    position: fixed;
    inset: 0;
    background: rgba(26, 26, 46, 0.4);
    z-index: var(--z-overlay);
    opacity: 0;
    transition: opacity var(--transition-base);
    pointer-events: none;
}
.overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* --- Orders Table --- */
.data-table {
    width: 100%;
    border-collapse: collapse;
}
.data-table th {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 2px solid var(--border-light);
    background: var(--bg-subtle, var(--color-neutral-25));
}
.data-table td {
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
    border-bottom: 1px solid var(--border-light);
}
.data-table tr:hover td { background: var(--bg-hover); }

/* --- Recently Viewed --- */
.recently-viewed {
    display: flex;
    gap: var(--space-3);
    overflow-x: auto;
    padding-bottom: var(--space-2);
    scrollbar-width: thin;
}
.recently-viewed-item {
    flex: 0 0 140px;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-fast);
}
.recently-viewed-item:hover {
    border-color: var(--color-primary-500);
    box-shadow: var(--shadow-sm);
}

/* --- Tabs --- */
.tabs {
    display: flex;
    border-bottom: 2px solid var(--border-light);
    gap: var(--space-1);
}
.tab {
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--text-secondary);
    cursor: pointer;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all var(--transition-fast);
    background: none;
    font-family: inherit;
}
.tab:hover { color: var(--text-primary); }
.tab.active {
    color: var(--color-primary-500);
    border-bottom-color: var(--color-primary-500);
    font-weight: var(--font-semibold);
}

/* --- Autocomplete Dropdown --- */
.autocomplete-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: var(--z-dropdown);
    max-height: 320px;
    overflow-y: auto;
    margin-top: var(--space-1);
}
.autocomplete-item {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    transition: background var(--transition-fast);
    text-decoration: none;
    color: inherit;
}
.autocomplete-item:hover {
    background: var(--bg-hover);
    text-decoration: none;
    color: inherit;
}

/* --- Loading / Skeleton --- */
.skeleton {
    background: linear-gradient(90deg, var(--color-neutral-100) 25%, var(--color-neutral-50) 50%, var(--color-neutral-100) 75%);
    background-size: 200% 100%;
    animation: pulse-soft 1.5s ease-in-out infinite;
    border-radius: var(--radius-md);
}
.spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-default);
    border-top-color: var(--color-primary-500);
    border-radius: var(--radius-full);
    animation: spin 0.6s linear infinite;
}

/* --- Empty State --- */
.empty-state {
    text-align: center;
    padding: var(--space-12) var(--space-6);
    color: var(--text-secondary);
}
.empty-state-icon {
    font-size: var(--text-5xl);
    margin-bottom: var(--space-4);
    opacity: 0.4;
}
.empty-state-title {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}

/* --- Utility --- */
.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}
.text-center { text-align: center; }
.text-right { text-align: right; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.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); }
.gap-6 { gap: var(--space-6); }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.p-4 { padding: var(--space-4); }
.p-6 { padding: var(--space-6); }
.w-full { width: 100%; }

/* --- Mobile Nav Toggle --- */
.mobile-nav-toggle {
    display: none;
    position: fixed;
    bottom: var(--space-4);
    right: var(--space-4);
    z-index: var(--z-sticky);
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    background: var(--color-primary-500);
    color: var(--text-inverse);
    border: none;
    box-shadow: var(--shadow-lg);
    cursor: pointer;
    font-size: var(--text-xl);
}

/* --- Checkout Extracted Utilities --- */

/* Empty state headings */
.checkout-empty-heading {
    font-size: var(--text-lg);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.checkout-empty-subtext {
    color: var(--text-tertiary);
    margin-bottom: 1rem;
}

.checkout-inline-btn {
    display: inline-flex;
}

/* Cart item icon */
.checkout-item-icon {
    font-size: 1.5rem;
    color: var(--color-primary-200);
}

/* Budget notice bar */
.checkout-budget-notice {
    margin-top: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.checkout-budget-notice-icon {
    margin-top: 2px;
}

/* Shipping option content */
.checkout-shipping-content {
    flex: 1;
}

.checkout-shipping-title {
    font-weight: 600;
    font-size: var(--text-sm);
}

.checkout-shipping-subtitle {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
}

.checkout-bolt-icon {
    color: #f59e0b;
}

/* Character counter */
.checkout-char-count {
    text-align: right;
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    margin-top: 0.25rem;
}

/* Review section panels */
.review-panel {
    background: var(--bg-body);
    border-radius: var(--radius-md);
    padding: 1rem;
    margin-bottom: 1rem;
}

.review-panel-last {
    background: var(--bg-body);
    border-radius: var(--radius-md);
    padding: 1rem;
}

.review-panel-heading {
    font-weight: 600;
    font-size: var(--text-sm);
    margin-bottom: 0.5rem;
}

.review-panel-heading i {
    color: var(--color-primary-500);
    margin-right: 0.25rem;
}

.review-panel-body {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

/* Review row with top border */
.review-row-divider {
    border-top: 1px solid var(--border-light);
    padding-top: 0.75rem;
    margin-top: 0.25rem;
}

/* Over-budget label highlight */
.review-over-budget-label {
    color: var(--color-accent-600);
    font-weight: 600;
}

.review-over-budget-value {
    color: var(--color-accent-500);
}

/* Error alert bar */
.checkout-error-alert {
    background: var(--surface-danger-soft);
    border: 1px solid var(--surface-danger-border);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-danger-strong);
}

/* District picker in the alert editor — a search, never a raw id field */
.district-chosen {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    background: var(--bg-body);
    font-size: var(--text-sm);
}
.district-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 70;
    max-height: 260px;
    overflow-y: auto;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg, 0 8px 24px rgba(0,0,0,0.12));
}
.district-result-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    width: 100%;
    text-align: left;
    padding: 0.5rem 0.75rem;
    background: none;
    border: none;
    border-bottom: 1px solid var(--border-light);
    cursor: pointer;
    color: var(--text-primary);
    font-size: var(--text-sm);
}
.district-result-item:last-child { border-bottom: none; }
.district-result-item:hover { background: var(--surface-info-soft); }
/* An inactive district can't sign in, so an alert there would never be seen */
.district-result-inactive { opacity: 0.65; }

/* Perishable-without-a-date prompt. Warning, not danger — the order is still
   allowed to go through; this is a "you probably meant to" nudge. */
.checkout-perishable-notice {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    background: var(--surface-warning-soft);
    border: 1px solid var(--surface-warning-border);
    color: var(--text-warning-strong);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
}
.checkout-perishable-body {
    margin-top: 0.25rem;
    font-size: var(--text-sm);
}
.item-perishable-badge { font-size: var(--text-xs); }
/* Clickable item chips inside the notice — each jumps to its line's date input */
.perishable-jump-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin: 0.15rem 0.25rem 0.15rem 0;
    padding: 0.1rem 0.5rem;
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    color: var(--text-warning-strong);
    background: transparent;
    border: 1px solid var(--surface-warning-border);
    border-radius: var(--radius-full);
    cursor: pointer;
}
.perishable-jump-chip:hover {
    background: var(--surface-warning-border);
}
.perishable-jump-chip i { font-size: 0.65em; }
/* Draw the eye to the empty date box on a perishable line */
.item-delivery-date-wanted input[type="date"] {
    border-color: var(--color-warning-500, #f59e0b);
    background: var(--surface-warning-soft);
}
.item-delivery-hint {
    color: var(--text-warning-strong);
    font-style: italic;
}

/* Per-line requested delivery date in the checkout cart review */
.item-delivery-date {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.4rem;
    font-size: var(--text-xs);
    color: var(--text-secondary);
}
.item-delivery-date input[type="date"] {
    width: auto;
    padding: 0.2rem 0.4rem;
    font-size: var(--text-xs);
}
.item-delivery-clear {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-primary-500);
    text-decoration: underline;
    font-size: var(--text-xs);
}

/* System alert banner — an EDS staff notice from the Alerts table. Warning
   colours (not danger): these are operational notices like "orders are closed
   for the year", which people must not miss but which are not errors. */
.system-alert {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 0.75rem 1.25rem;
    background: var(--surface-warning-soft);
    border-bottom: 1px solid var(--surface-warning-border);
    color: var(--text-warning-strong);
}
.system-alert-icon { flex-shrink: 0; }
.system-alert-message { flex: 1; font-weight: 500; }
.system-alert-scope { flex-shrink: 0; }
.system-alert-close {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    opacity: 0.7;
    padding: 0.25rem;
}
.system-alert-close:hover { opacity: 1; }

/* "You already have one awaiting approval" notice — informational, not an error:
   it warns about a likely duplicate but never blocks the submit. */
.checkout-open-reqs {
    background: var(--surface-info-soft);
    border: 1px solid var(--surface-info-border);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    color: var(--text-info-strong);
}
.checkout-open-reqs-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.checkout-open-reqs-close {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    opacity: 0.7;
}
.checkout-open-reqs-close:hover { opacity: 1; }
.checkout-open-reqs-body {
    margin: 0.4rem 0 0.5rem;
    font-size: var(--text-sm);
}
.checkout-open-reqs-list {
    margin: 0;
    padding-left: 1.25rem;
    font-size: var(--text-sm);
}
.checkout-open-reqs-list li { margin-bottom: 0.2rem; }

.checkout-error-dismiss {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    font-size: 1rem;
}

/* Confirmation heading */
.confirmation-heading {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.confirmation-subtext {
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.confirmation-ref {
    font-size: var(--text-sm);
    color: var(--text-tertiary);
    margin-bottom: 1.5rem;
}

/* --- Extracted Inline Utilities (index.html lines 1-600) --- */

/* Layout utilities */
.relative { position: relative; }
.ml-auto { margin-left: auto; }
.flex-1 { flex: 1; }
.flex-wrap { flex-wrap: wrap; }
.flex-shrink-0 { flex-shrink: 0; }
.min-w-0 { min-width: 0; }
.inline-flex { display: inline-flex; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.cursor-pointer { cursor: pointer; }

/* Spacing utilities */
.p-5 { padding: var(--space-5); }
.mb-3 { margin-bottom: var(--space-3); }
.mt-1 { margin-top: var(--space-1); }
.mt-3 { margin-top: var(--space-3); }
.mr-1 { margin-right: var(--space-1); }
.mr-2 { margin-right: var(--space-2); }
.p-8 { padding: var(--space-8); }
.p-16 { padding: var(--space-16); }

/* Flex row combos */
.flex-row-2 { display: flex; align-items: center; gap: var(--space-2); }
.flex-row-3 { display: flex; align-items: center; gap: var(--space-3); }
.flex-col-2 { display: flex; flex-direction: column; gap: var(--space-2); }
.flex-col-3 { display: flex; flex-direction: column; gap: var(--space-3); }

/* Typography */
.meta-text { font-size: var(--text-xs); color: var(--text-muted); }
.meta-text-sm { font-size: var(--text-sm); color: var(--text-muted); }
.label-text { font-size: var(--text-xs); color: var(--text-muted); }
.heading-2xl { font-size: var(--text-2xl); }
.section-heading { font-size: var(--text-lg); margin: 0; }
.section-heading-mb { font-size: var(--text-lg); margin-bottom: var(--space-3); }
.subsection-heading { font-size: var(--text-sm); font-weight: var(--font-semibold); margin-bottom: var(--space-3); }
.font-medium { font-weight: var(--font-medium); }
.font-semibold { font-weight: var(--font-semibold); }
.font-bold { font-weight: var(--font-bold); }
.text-sm { font-size: var(--text-sm); }
.text-xs { font-size: var(--text-xs); }
.text-2xs { font-size: var(--text-2xs); }
.chevron-icon { font-size: var(--text-xs); color: var(--text-muted); }
.icon-muted { color: var(--text-muted); }
.text-success { color: var(--color-success-600); }

/* Sidebar subtitle */
.sidebar-subtitle { font-size: var(--text-xs); color: var(--text-muted); }

/* Header user name */
.header-user-name { font-size: var(--text-sm); font-weight: var(--font-medium); }

/* Autocomplete loading state */
.autocomplete-loading {
    padding: var(--space-3) var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-muted);
    font-size: var(--text-sm);
}

/* Autocomplete inline spinner */
.autocomplete-spinner { width: 16px; height: 16px; border-width: 2px; }

/* Autocomplete item parts */
.autocomplete-item-icon { color: var(--text-muted); font-size: var(--text-xs); flex-shrink: 0; }
.autocomplete-item-body { flex: 1; min-width: 0; }
.autocomplete-item-name { font-weight: var(--font-medium); }
.autocomplete-item-sub { font-size: var(--text-xs); color: var(--text-muted); }
.autocomplete-item-price {
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    color: var(--color-primary-500);
    flex-shrink: 0;
    white-space: nowrap;
}

/* Header actions group */
.header-actions { display: flex; align-items: center; gap: var(--space-3); margin-left: auto; }

/* Cart badge */
.cart-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--color-accent-500);
    color: white;
    font-size: 10px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

/* User dropdown menu */
.user-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: var(--space-2);
    background: var(--bg-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    min-width: 180px;
    z-index: var(--z-dropdown);
    overflow: hidden;
}
.user-dropdown-header {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-light);
}
.user-dropdown-name { font-weight: var(--font-semibold); font-size: var(--text-sm); }
.user-dropdown-role { font-size: var(--text-xs); color: var(--text-muted); }

/* User menu button (unstyled) */
.user-menu-btn {
    cursor: pointer;
    background: none;
    border: none;
    font-family: inherit;
    padding: 0;
}

/* User dropdown item overrides */
.user-dropdown-item { margin: 0; border-radius: 0; }
.user-dropdown-item-accent { margin: 0; border-radius: 0; color: var(--color-accent-500); }

/* Spinner centering */
.spinner-center { margin: 0 auto var(--space-4); }

/* Dashboard subtitle */
.dash-subtitle { color: var(--text-secondary); margin-top: var(--space-1); }
.dash-district-label { color: var(--text-muted); }

/* Dashboard grid layouts */
.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-5); }

/* Card internal spacing */
.card-padded { padding: var(--space-5); }
.card-header-row { margin-bottom: var(--space-4); }

/* Budget grid (3 columns) */
.budget-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin-top: var(--space-4); }
.budget-value { font-weight: var(--font-bold); font-size: var(--text-base); }
.budget-value-remaining { font-weight: var(--font-bold); font-size: var(--text-base); color: var(--color-success-600); }

/* Budget detail section */
.budget-detail-section {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-light);
}

/* Approval stats grid */
.dash-approval-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); text-align: center; }

/* Approval urgent banner */
.dash-urgent-banner {
    margin-top: var(--space-4);
    padding: var(--space-3);
    background: var(--surface-danger-soft);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: var(--text-danger-strong);
}

/* Approval footer info */
.dash-approval-footer { margin-top: var(--space-4); font-size: var(--text-xs); color: var(--text-muted); }

/* Order stats grid (2 columns) */
.dash-order-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
.dash-order-value { font-size: var(--text-2xl); font-weight: var(--font-bold); }
.dash-order-value-approved { font-size: var(--text-2xl); font-weight: var(--font-bold); color: var(--color-success-600); }

/* Budget breakdown progress bar */
.budget-bar-track { height: 6px; background: var(--bg-muted); border-radius: 3px; overflow: hidden; }
.budget-bar-fill { height: 100%; border-radius: 3px; background: var(--color-primary-500); }
.budget-bar-row { display: flex; justify-content: space-between; margin-bottom: 2px; }

/* Budget detail separator */
.budget-report-link { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border-light); }

/* Activity item */
.activity-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--bg-subtle);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background 0.15s;
}
.activity-item-body { flex: 1; min-width: 0; }
.activity-item-right { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
.activity-time { font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; }

/* Recently viewed product card */
.recently-viewed-icon { font-size: 1.5rem; color: var(--color-neutral-300); margin-bottom: var(--space-2); }
.recently-viewed-name { font-size: var(--text-xs); font-weight: var(--font-medium); }
.recently-viewed-price { font-size: var(--text-xs); color: var(--color-primary-500); font-weight: var(--font-bold); }
.recently-viewed-link { cursor: pointer; text-decoration: none; color: inherit; }

/* Featured heading arrow icon */
.icon-arrow-right { margin-left: 4px; font-size: var(--text-xs); }

/* Category picker grid */
.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

/* Category card icon container */
.category-icon-box {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.category-icon-size { font-size: 1.3rem; }

/* Category card content */
.category-card-name { font-weight: var(--font-semibold); font-size: var(--text-base); line-height: var(--leading-tight); }
.category-card-count { font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; }

/* Loading centered state */
.loading-center { text-align: center; padding: var(--space-8); color: var(--text-muted); }
.loading-spinner-block { font-size: var(--text-xl); margin-bottom: var(--space-2); display: block; }

/* Browse all centered */
.browse-all-center { text-align: center; padding: var(--space-4); }

/* Max-width constraint */
.max-w-500 { max-width: 500px; }

/* School icon spacing */
.school-icon { margin-right: 2px; }

/* Budget bar metadata row */
.budget-meta-row { font-size: var(--text-xs); color: var(--text-muted); margin-top: var(--space-2); }

/* --- Responsive --- */
@media (max-width: 1200px) {
    .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
}

@media (max-width: 768px) {
    .sidebar {
        transform: translateX(-100%);
        overflow: hidden;
        visibility: hidden;
    }
    .sidebar.mobile-open {
        transform: translateX(0);
        visibility: visible;
        overflow: visible;
    }
    .main-content {
        margin-left: 0;
    }
    .mobile-nav-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .top-header {
        padding: 0 var(--space-4);
    }
    .page-content {
        padding: var(--space-4);
    }
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .cart-drawer {
        width: 100%;
    }
    /* Data table: horizontal scroll on mobile */
    .data-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .data-table {
        min-width: 520px;
    }
    /* Modal: full-screen on mobile */
    .modal-content-responsive {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
        margin: 0 !important;
    }
    /* Vendor pills: stack on mobile */
    .vendor-scroll {
        flex-wrap: wrap;
        gap: var(--space-2);
    }
    /* Search bar: full width */
    .top-header .search-container {
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }
    .products-grid {
        grid-template-columns: 1fr;
    }
}

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

/* ============================================
   Dashboard Components
   ============================================ */

/* --- Alert Banners --- */
.dash-alerts { display: flex; flex-direction: column; gap: var(--space-3); }
.dash-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
}
.dash-alert-danger {
    background: var(--surface-danger-soft);
    border-left: 4px solid var(--color-accent-500);
    color: var(--text-danger-strong);
}
.dash-alert-warning {
    background: var(--surface-warning-soft);
    border-left: 4px solid var(--color-warning-500);
    color: var(--text-warning-strong);
}
.dash-alert-info {
    background: var(--surface-info-soft);
    border-left: 4px solid var(--color-primary-500);
    color: var(--text-info-strong);
}
.dash-alert-icon { font-size: var(--text-base); flex-shrink: 0; margin-top: 2px; }
.dash-alert-body { flex: 1; min-width: 0; }
.dash-alert-title { font-weight: var(--font-semibold); margin-bottom: 2px; }
.dash-alert-message { opacity: 0.85; font-size: var(--text-xs); }
.dash-alert-dismiss {
    background: none; border: none; cursor: pointer;
    opacity: 0.5; padding: var(--space-1); color: inherit;
    font-size: var(--text-sm); flex-shrink: 0;
}
.dash-alert-dismiss:hover { opacity: 1; }

/* --- Budget Bar --- */
.dash-budget-bar-track {
    width: 100%;
    height: 10px;
    background: var(--bg-muted);
    border-radius: 999px;
    overflow: hidden;
}
.dash-budget-bar-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.5s ease;
}

/* --- Approval Stats --- */
.dash-approval-stat {
    padding: var(--space-3);
    background: var(--bg-subtle);
    border-radius: var(--radius-md);
}
.dash-approval-stat-value {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    line-height: 1.2;
}
.dash-approval-stat-label {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-top: var(--space-1);
}

/* --- Order Status --- */
.dash-order-stat {
    padding: var(--space-3);
    background: var(--bg-subtle);
    border-radius: var(--radius-md);
    text-align: center;
}

/* ============================================
   Reports Module Styles
   ============================================ */

/* --- Report Tabs --- */
.rpt-tabs {
    display: flex;
    gap: var(--space-1);
    background: var(--bg-subtle);
    padding: var(--space-1);
    border-radius: var(--radius-lg);
    overflow-x: auto;
}
.rpt-tab {
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--text-secondary);
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.rpt-tab:hover {
    color: var(--text-primary);
    background: var(--color-neutral-100);
}
.rpt-tab.active {
    color: var(--color-primary-500);
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
    font-weight: var(--font-semibold);
}

/* --- Vertical Bar Chart (monthly trend) --- */
.rpt-bar-chart {
    display: flex;
    align-items: flex-end;
    gap: var(--space-2);
    height: 200px;
    padding-top: var(--space-4);
}
.rpt-bar-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    justify-content: flex-end;
    position: relative;
}
.rpt-bar {
    width: 100%;
    max-width: 40px;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    transition: height 0.6s ease;
    min-height: 4px;
}
.rpt-bar-col:hover .rpt-bar {
    opacity: 0.85;
    filter: brightness(1.1);
}
.rpt-bar-col:hover .rpt-bar-tooltip {
    opacity: 1;
    transform: translateY(-4px);
}
.rpt-bar-tooltip {
    position: absolute;
    top: -8px;
    font-size: var(--text-2xs);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    background: var(--bg-card);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    white-space: nowrap;
    opacity: 0;
    transition: all var(--transition-fast);
    pointer-events: none;
}
.rpt-bar-label {
    font-size: var(--text-2xs);
    color: var(--text-muted);
    margin-top: var(--space-2);
    font-weight: var(--font-medium);
}

/* --- Horizontal Bar Rows (vendor/category lists) --- */
.rpt-hbar-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) 0;
}
.rpt-hbar-row + .rpt-hbar-row {
    border-top: 1px solid var(--border-light);
}
.rpt-hbar-label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 0 0 160px;
    font-size: var(--text-sm);
    min-width: 0;
}
.rpt-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: var(--radius-full);
    background: var(--bg-subtle);
    font-size: var(--text-2xs);
    font-weight: var(--font-bold);
    color: var(--text-muted);
    flex-shrink: 0;
}
.rpt-hbar-track {
    flex: 1;
    height: 8px;
    background: var(--bg-subtle);
    border-radius: var(--radius-full);
    overflow: hidden;
}
.rpt-hbar-fill {
    height: 100%;
    background: var(--color-primary-400);
    border-radius: var(--radius-full);
    transition: width 0.6s ease;
}
.rpt-hbar-value {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    flex: 0 0 80px;
    text-align: right;
    white-space: nowrap;
}

/* --- Budget Ring --- */
.rpt-budget-ring {
    width: 140px;
    height: 140px;
    border-radius: var(--radius-full);
    background: conic-gradient(
        var(--color-primary-400) calc(var(--pct) * 1%),
        var(--color-neutral-100) calc(var(--pct) * 1%)
    );
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}
.rpt-budget-ring-inner {
    width: 110px;
    height: 110px;
    border-radius: var(--radius-full);
    background: var(--bg-card);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* --- Department Budget Grid --- */
.rpt-dept-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--space-4);
}
.rpt-dept-card {
    padding: var(--space-4);
    background: var(--bg-subtle);
    border-radius: var(--radius-lg);
}

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

/* --- Enhanced Focus States (Accessibility) --- */
.btn:focus-visible,
button:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="tab"]:focus-visible,
[role="button"]:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
}

/* High-contrast mode support */
@media (prefers-contrast: more) {
    :root {
        --border-light: var(--color-neutral-300);
        --text-tertiary: var(--color-neutral-600);
        --text-muted: var(--color-neutral-500);
    }
    :focus-visible {
        outline-width: 3px;
    }
}

/* --- Common Utility Classes --- */
.flex-1 { flex: 1; }
.inline-flex { display: inline-flex; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.text-center { text-align: center; }
.cursor-pointer { cursor: pointer; }
.font-semibold { font-weight: var(--font-semibold); }
.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-1 { margin-top: 0.25rem; }
.mt-3 { margin-top: var(--space-3); }
.p-8 { padding: var(--space-8); }
.p-16 { padding: 4rem; }
.gap-3 { gap: var(--space-3); }
.text-tertiary { color: var(--text-tertiary); }
.text-secondary { color: var(--text-secondary); }
.text-accent { color: var(--color-accent-500); }

/* --- Product Detail: Brand Header --- */
.detail-brand-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: inherit;
}

.detail-brand-logo {
    width: 36px;
    height: 36px;
    background: var(--color-primary-500);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: var(--text-sm);
}

.detail-brand-title {
    font-family: var(--font-display);
    font-weight: 600;
}

/* --- Product Detail: Breadcrumb --- */
.breadcrumb-chevron {
    font-size: 0.5rem;
}

/* --- Product Detail: Skeleton Loaders --- */
.skeleton-image {
    height: 320px;
}

.skeleton-badge {
    height: 20px;
    width: 120px;
    margin-bottom: 0.75rem;
}

.skeleton-title {
    height: 28px;
    width: 80%;
    margin-bottom: 0.75rem;
}

.skeleton-price {
    height: 36px;
    width: 100px;
    margin-bottom: 1rem;
}

.skeleton-button {
    height: 44px;
    width: 100%;
}

/* --- Product Detail: Not Found State --- */
.detail-not-found {
    text-align: center;
    padding: 4rem;
}

.detail-not-found-icon {
    font-size: 3rem;
    color: var(--text-tertiary);
    margin-bottom: 1rem;
}

.detail-not-found-heading {
    font-size: var(--text-xl);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.detail-not-found-message {
    color: var(--text-tertiary);
    margin-bottom: 1.5rem;
}

.detail-not-found-action {
    display: inline-flex;
    width: auto;
}

/* --- Product Detail: Category & Section --- */
.detail-category-row {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.detail-category-icon {
    color: var(--color-primary-300);
}

.detail-section-heading {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 600;
    margin-bottom: 1rem;
}

/* --- Responsive --- */
.rpt-responsive-grid {
    /* handled by grid defaults, override for small screens */
}
@media (max-width: 768px) {
    .rpt-responsive-grid {
        grid-template-columns: 1fr !important;
    }
    .rpt-hbar-label {
        flex: 0 0 120px;
    }
    .rpt-bar-chart {
        height: 150px;
    }
    .rpt-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ============================================
   Extracted Inline Styles — Lines 600+ (second half)
   Prefixed: browse-*, order-*, tpl-*, saved-*, approval-*, cart-*
   ============================================ */

/* --- Shared utility classes (second-half scope) --- */
.flex-wrap { flex-wrap: wrap; }
.text-right { text-align: right; }
.overflow-x-auto { overflow-x: auto; }
.w-full { width: 100%; }
.flex-col { flex-direction: column; }
.flex-shrink-0 { flex-shrink: 0; }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-5 { padding: var(--space-5); }
.p-6 { padding: var(--space-6); }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.min-w-0 { min-width: 0; }

/* --- Meta text patterns --- */
.meta-text { font-size: var(--text-xs); color: var(--text-muted); }
.meta-text-secondary { font-size: var(--text-sm); color: var(--text-secondary); }
.meta-label { font-size: var(--text-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }

/* --- Font sizing --- */
.text-2xs { font-size: var(--text-2xs); }
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.font-medium { font-weight: var(--font-medium); }
.font-bold { font-weight: var(--font-bold); }
.color-primary { color: var(--color-primary-500); }

/* --- Browse catalog --- */
.browse-heading { font-size: var(--text-2xl); }
.browse-product-count { color: var(--text-secondary); font-size: var(--text-sm); }
.browse-sort-select { width: auto; min-width: 160px; }
.browse-filter-bar { padding: var(--space-3) var(--space-4); }
.browse-search-wrapper { flex: 1; min-width: 200px; position: relative; }
.browse-price-input { width: 80px; }
.browse-price-separator { color: var(--text-muted); }
.browse-clear-all { font-size: var(--text-xs); }
.browse-autocomplete-loading {
    padding: var(--space-3) var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-muted);
    font-size: var(--text-sm);
}
.browse-autocomplete-spinner { width: 16px; height: 16px; border-width: 2px; }
.browse-autocomplete-icon { color: var(--text-muted); font-size: var(--text-xs); flex-shrink: 0; }
.browse-autocomplete-name { font-weight: var(--font-medium); }
.browse-autocomplete-vendor { font-size: var(--text-xs); color: var(--text-muted); }
.browse-autocomplete-price {
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    color: var(--color-primary-500);
    flex-shrink: 0;
    white-space: nowrap;
}

/* --- Browse skeleton loading --- */
.browse-skeleton-image { height: 180px; }
.browse-skeleton-vendor { height: 12px; width: 60%; margin-bottom: var(--space-2); }
.browse-skeleton-name { height: 14px; width: 90%; margin-bottom: var(--space-2); }
.browse-skeleton-meta { height: 12px; width: 40%; }
.browse-skeleton-padding { padding: var(--space-4); }

/* --- Product card description clamp --- */
.browse-description-clamp {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* --- Product list view --- */
.browse-list-image {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.browse-list-image img { max-width: 48px; max-height: 48px; object-fit: contain; }
.browse-list-vendor {
    font-size: var(--text-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.browse-list-name { font-weight: var(--font-semibold); cursor: pointer; }
.browse-list-description {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 500px;
}
.browse-list-price {
    font-size: var(--text-lg);
    font-weight: var(--font-bold);
    color: var(--color-primary-500);
}

/* --- Load more area --- */
.browse-load-more { text-align: center; margin-top: var(--space-4); }
.browse-load-more-btn { min-width: 200px; }
.browse-load-more-icon { margin-right: var(--space-2); }
.browse-load-more-count { font-size: var(--text-xs); color: var(--text-muted); margin-top: var(--space-2); }

/* --- Orders view --- */
.order-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-4);
}
.order-heading { font-size: var(--text-2xl); margin: 0; }
.order-refresh-icon { margin-right: var(--space-2); }
.order-tab-badge { margin-left: var(--space-1); font-size: var(--text-xs); }
.order-loading-card { padding: var(--space-8); text-align: center; }
.order-loading-spinner { font-size: 2rem; color: var(--eds-primary); margin-bottom: var(--space-4); }
.order-empty-icon { font-size: 3rem; color: var(--text-muted); margin-bottom: var(--space-4); }
.order-empty-heading { margin-bottom: var(--space-2); color: var(--text-primary); }
.order-empty-text { color: var(--text-muted); margin-bottom: var(--space-4); }
.order-empty-btn-icon { margin-right: var(--space-2); }
.order-no-filter { padding: var(--space-6); text-align: center; color: var(--text-muted); }
.order-row-bold { font-weight: var(--font-semibold); }

/* --- Template orders --- */
.tpl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-4);
}
.tpl-card {
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.tpl-icon-badge { font-size: var(--text-2xs); }
.tpl-icon-spacing { margin-right: var(--space-1); }
.tpl-skeleton-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-3);
}
.tpl-skeleton-title { height: 16px; width: 70%; margin-bottom: var(--space-2); }
.tpl-skeleton-line1 { height: 12px; width: 100%; margin-bottom: var(--space-1); }
.tpl-skeleton-line2 { height: 12px; width: 60%; }
.tpl-skeleton-card { padding: var(--space-5); }
.tpl-description {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.5;
    flex: 1;
}
.tpl-item-footer {
    font-size: var(--text-xs);
    color: var(--text-muted);
    border-top: 1px solid var(--border-light);
    padding-top: var(--space-2);
}
.tpl-expand-section {
    border-top: 1px solid var(--border-light);
    padding-top: var(--space-2);
}
.tpl-item-row {
    padding: var(--space-1) 0;
    font-size: var(--text-xs);
}
.tpl-item-name { color: var(--text-primary); font-weight: var(--font-medium); }
.tpl-item-vendor { color: var(--text-muted); }
.tpl-qty-btn {
    width: 22px;
    height: 22px;
    padding: 0;
    min-width: 0;
    font-size: 10px;
}
.tpl-qty-value {
    min-width: 20px;
    text-align: center;
    font-weight: var(--font-semibold);
}
.tpl-item-price {
    white-space: nowrap;
    color: var(--text-secondary);
    min-width: 50px;
    text-align: right;
}
.tpl-delete-icon { font-size: var(--text-xs); color: var(--color-danger-500); }
.tpl-add-btn { flex: 1; }
.tpl-empty { padding: var(--space-8); }

/* --- Saved lists --- */
.saved-heading { font-size: var(--text-2xl); }
.saved-card { padding: var(--space-4); }
.saved-builder { padding: var(--space-5); margin-bottom: var(--space-4); }
.saved-builder-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-4);
}
.saved-builder-title { font-size: var(--text-lg); font-weight: var(--font-semibold); }
.saved-builder-title-icon { color: var(--color-primary-500); }
.saved-field-group { margin-bottom: var(--space-4); }
.saved-field-label {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    display: block;
    margin-bottom: var(--space-1);
}
.saved-field-max-width { max-width: 400px; }
.saved-search-group { margin-bottom: var(--space-4); position: relative; z-index: 10; }
.saved-search-flex { display: flex; gap: var(--space-2); align-items: stretch; }
.saved-search-input-wrap { position: relative; flex: 1; max-width: 500px; }
.saved-search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 30;
    background: var(--color-neutral-0);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    max-height: 320px;
    overflow-y: auto;
    margin-top: 4px;
}
.saved-search-result {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: none;
    background: var(--color-neutral-0);
    text-align: left;
    cursor: pointer;
    border-bottom: 1px solid var(--border-light);
    font-size: var(--text-sm);
}
.saved-search-result-icon { color: var(--text-muted); width: 16px; text-align: center; }
.saved-search-result-name {
    font-weight: var(--font-medium);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.saved-search-result-meta { font-size: var(--text-xs); color: var(--text-muted); }
.saved-search-result-price {
    font-weight: var(--font-semibold);
    color: var(--color-primary-500);
    white-space: nowrap;
}
.saved-search-result-add { color: var(--color-success-500); }
.saved-filter-select { max-width: 170px; flex-shrink: 0; }
.saved-items-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-2);
}
.saved-items-count { color: var(--text-muted); }
.saved-items-total {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--color-primary-500);
}
.saved-empty-dropzone {
    padding: var(--space-6);
    text-align: center;
    border: 2px dashed var(--border-default);
    border-radius: var(--radius-md);
    color: var(--text-muted);
}
.saved-empty-icon {
    font-size: var(--text-xl);
    margin-bottom: var(--space-2);
    display: block;
}
.saved-empty-text { font-size: var(--text-sm); }
.saved-items-list {
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.saved-item-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
}
.saved-item-info { flex: 1; min-width: 0; overflow: hidden; }
.saved-item-name {
    font-weight: var(--font-medium);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.saved-item-vendor {
    font-size: var(--text-xs);
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.saved-qty-controls { display: flex; align-items: center; gap: var(--space-1); flex-shrink: 0; }
.saved-qty-btn { padding: 2px 6px; min-width: auto; }
.saved-qty-btn-icon { font-size: 10px; }
.saved-qty-value {
    min-width: 24px;
    text-align: center;
    font-weight: var(--font-semibold);
}
.saved-item-price {
    width: 70px;
    text-align: right;
    font-weight: var(--font-semibold);
    flex-shrink: 0;
}
.saved-item-remove {
    padding: 2px 6px;
    min-width: auto;
    color: var(--color-accent-500);
    flex-shrink: 0;
}
.saved-item-remove-icon { font-size: 11px; }
.saved-actions-footer {
    display: flex;
    gap: var(--space-2);
    justify-content: flex-end;
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-light);
}
.saved-empty-actions {
    display: flex;
    gap: var(--space-2);
    justify-content: center;
    margin-top: var(--space-4);
}
.saved-list-toggle-icon {
    font-size: var(--text-xs);
    color: var(--text-muted);
    transition: transform 0.2s;
}
.saved-list-name { font-weight: var(--font-semibold); font-size: var(--text-base); }
.saved-list-meta { font-size: var(--text-xs); color: var(--text-muted); margin-left: 22px; }
.saved-list-expand {
    margin-top: var(--space-3);
    border-top: 1px solid var(--border-light);
    padding-top: var(--space-3);
}
.saved-list-expand-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-1) 0;
    font-size: var(--text-sm);
}
.saved-list-expand-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}
.saved-list-expand-qty { color: var(--text-muted); flex-shrink: 0; font-size: var(--text-xs); }
.saved-list-expand-price {
    font-weight: var(--font-semibold);
    flex-shrink: 0;
    min-width: 65px;
    text-align: right;
}
.saved-list-expand-footer {
    display: flex;
    justify-content: flex-end;
    padding-top: var(--space-2);
    border-top: 1px solid var(--border-light);
    margin-top: var(--space-2);
}
.saved-list-total {
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    color: var(--color-primary-500);
}

/* --- Approvals view --- */
.approval-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-4);
}
.approval-heading { font-size: var(--text-2xl); }
.approval-search-wrap { margin-bottom: var(--space-4); max-width: 500px; position: relative; }
.approval-clear-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: 4px;
}
.approval-error-card {
    padding: var(--space-4);
    border-left: 3px solid var(--color-accent-500);
    margin-bottom: var(--space-4);
}
.approval-error-content {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-accent-600);
}
.approval-loading {
    text-align: center;
    padding: var(--space-8);
    color: var(--text-muted);
}
.approval-loading-icon { font-size: var(--text-2xl); margin-bottom: var(--space-3); }
.approval-count { font-size: var(--text-sm); color: var(--text-muted); margin-bottom: var(--space-3); }
.approval-list { display: flex; flex-direction: column; gap: var(--space-3); }
.approval-card { padding: var(--space-4); }
/* Selected for batch approve — a left rail rather than a fill, so the card's
   own status colours stay readable in both themes */
.approval-card-selected {
    border-color: var(--color-primary-500);
    box-shadow: inset 3px 0 0 0 var(--color-primary-500);
}
.approval-card-layout {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-4);
    flex-wrap: wrap;
}
.approval-card-info { flex: 1; min-width: 200px; }
.approval-req-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
}
.approval-req-number { font-weight: var(--font-bold); font-size: var(--text-md); }
.approval-submitter { font-size: var(--text-sm); color: var(--text-secondary); margin-bottom: var(--space-1); }
.approval-school { font-size: var(--text-xs); color: var(--text-muted); margin-bottom: var(--space-1); }
.approval-school-icon { margin-right: 3px; }
.approval-school-separator { color: var(--text-muted); }
.approval-details { display: flex; gap: var(--space-4); font-size: var(--text-sm); color: var(--text-muted); }
.approval-detail-icon { margin-right: 4px; }
.approval-detail-amount { font-weight: var(--font-semibold); color: var(--color-primary-500); }
.approval-notes {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-top: var(--space-2);
    font-style: italic;
}
.approval-actions {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    flex-shrink: 0;
}
.approval-reject-btn {
    background: var(--color-accent-500);
    color: white;
    border-color: var(--color-accent-500);
}
.approval-skeleton-loading {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-3);
}
.approval-skeleton-card { padding: var(--space-4); }
.approval-skeleton-layout {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-4);
}
.approval-skeleton-buttons { display: flex; gap: var(--space-2); }
.approval-end-indicator {
    text-align: center;
    padding: var(--space-4);
    color: var(--text-muted);
    font-size: var(--text-sm);
}

/* --- Approval detail modal --- */
.approval-modal-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    font-size: var(--text-sm);
}
.approval-detail-label { color: var(--text-muted); }
.approval-detail-total { color: var(--color-primary-500); }
.approval-detail-heading {
    font-size: var(--text-md);
    font-weight: var(--font-semibold);
    margin-bottom: var(--space-2);
}
.approval-detail-loading {
    text-align: center;
    padding: var(--space-4);
    color: var(--text-muted);
}
.approval-detail-table-wrap {
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: var(--space-4);
}
.approval-detail-table { width: 100%; font-size: var(--text-sm); border-collapse: collapse; }
.approval-detail-table thead tr { background: var(--bg-subtle); text-align: left; }
.approval-detail-table th,
.approval-detail-table td { padding: var(--space-2) var(--space-3); }
.approval-detail-table tbody tr { border-top: 1px solid var(--border-light); }
.approval-detail-item-cell { display: flex; align-items: center; gap: var(--space-2); }
.approval-detail-item-thumb {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--bg-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
}
.approval-detail-item-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.approval-detail-item-name { font-weight: var(--font-medium); }
.approval-detail-item-sku { font-size: var(--text-xs); color: var(--text-muted); }
.approval-modal-actions {
    display: flex;
    gap: var(--space-3);
    justify-content: flex-end;
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-light);
}

/* --- Modal shared styles --- */
.modal-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: var(--z-modal);
    background: var(--bg-card);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
}
.modal-sm { width: 90%; max-width: 450px; padding: var(--space-5); }
.modal-md { width: 90%; max-width: 600px; max-height: 85vh; overflow-y: auto; }
.modal-lg { width: 92%; max-width: 700px; max-height: 85vh; overflow-y: auto; }
.modal-xl { width: min(900px, 90vw); max-height: 80vh; overflow: auto; padding: var(--space-6); }
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4) var(--space-6);
    border-bottom: 1px solid var(--border-light);
}
.modal-header-title { font-size: var(--text-lg); font-weight: var(--font-bold); margin: 0; }
.modal-body { padding: var(--space-6); }
.modal-footer {
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--border-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.modal-actions { display: flex; gap: var(--space-2); justify-content: flex-end; }

/* --- Approval confirm/reject dialogs --- */
.approval-dialog-heading { font-size: var(--text-lg); margin-bottom: var(--space-3); }
.approval-dialog-icon-approve { color: var(--color-success-500); }
.approval-dialog-icon-reject { color: var(--color-accent-500); }
.approval-dialog-text { font-size: var(--text-sm); color: var(--text-secondary); margin-bottom: var(--space-3); }
.approval-dialog-field-group { margin-bottom: var(--space-4); }
.approval-dialog-field-label {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    display: block;
    margin-bottom: var(--space-1);
}
.approval-dialog-required { color: var(--color-accent-500); }
.approval-dialog-counter {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-top: var(--space-1);
}
.approval-dialog-min-warning { color: var(--color-accent-500); }

/* --- Reports --- */
.rpt-heading { font-size: var(--text-2xl); margin: 0; }
.rpt-subtitle { color: var(--text-secondary); margin-top: var(--space-1); font-size: var(--text-sm); }
.rpt-controls { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.rpt-divider { width: 1px; height: 20px; background: var(--border-default); margin: 0 var(--space-1); }
.rpt-date-picker { padding: var(--space-4); display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.rpt-date-label { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--text-secondary); }
.rpt-date-input { width: auto; font-size: var(--text-sm); }
.rpt-card-padded { padding: var(--space-5); }
.rpt-section-heading { font-size: var(--text-lg); margin: 0; }
.rpt-section-heading-mb { font-size: var(--text-lg); margin: 0 0 var(--space-4) 0; }
.rpt-2col-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
}
.rpt-3col-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
    text-align: center;
}
.rpt-stat-tiny { font-size: var(--text-2xs); margin-top: 2px; }
.rpt-budget-center { text-align: center; margin-bottom: var(--space-4); }
.rpt-budget-pct { font-size: var(--text-2xl); font-weight: var(--font-bold); }
.rpt-budget-label-sm { font-size: var(--text-xs); color: var(--text-muted); }
.rpt-budget-stat-label { font-size: var(--text-xs); color: var(--text-muted); }
.rpt-budget-stat-value { font-weight: var(--font-bold); }
.rpt-budget-stat-remaining { font-weight: var(--font-bold); color: var(--color-success-600); }
.rpt-table-rank { color: var(--text-muted); font-weight: var(--font-semibold); }
.rpt-table-vendor-name { font-weight: var(--font-semibold); color: var(--color-primary-500); }
.rpt-table-amount-bold { text-align: right; font-weight: var(--font-semibold); }
.rpt-table-share-bar { display: flex; align-items: center; gap: var(--space-2); }
.rpt-table-share-pct { font-size: var(--text-xs); color: var(--text-muted); width: 40px; text-align: right; }
.rpt-cat-card-header { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.rpt-cat-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
}
.rpt-cat-name { font-weight: var(--font-semibold); color: var(--color-primary-500); }
.rpt-cat-pct { font-size: var(--text-xs); color: var(--text-muted); }
.rpt-cat-spend-value { font-size: var(--text-2xl); font-weight: var(--font-bold); margin-bottom: var(--space-3); }
.rpt-orders-meta { display: flex; gap: var(--space-3); align-items: center; }
.rpt-orders-count { font-size: var(--text-sm); color: var(--text-muted); }

/* --- Drill-down modal --- */
.rpt-drill-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: var(--z-modal);
    background: var(--bg-card);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    box-shadow: var(--shadow-xl);
    width: min(900px, 90vw);
    max-height: 80vh;
    overflow: auto;
}
.rpt-drill-loading { text-align: center; padding: var(--space-8); }
.rpt-drill-subtitle { font-size: var(--text-sm); color: var(--text-muted); margin-top: 2px; }
.rpt-drill-table-maxw { max-width: 200px; }
.rpt-drill-sku { font-size: var(--text-xs); color: var(--text-muted); }
.rpt-drill-school { font-size: var(--text-sm); }
.rpt-drill-date { font-size: var(--text-xs); color: var(--text-muted); }
.rpt-drill-req { font-size: var(--text-xs); }

/* --- Cart drawer --- */
.cart-heading { font-size: var(--text-lg); font-weight: var(--font-bold); }
.cart-heading-count { color: var(--text-muted); font-weight: var(--font-normal); }
.cart-item-icon { color: var(--color-neutral-300); }
.cart-item-name { font-size: var(--text-sm); font-weight: var(--font-semibold); }
.cart-item-vendor { font-size: var(--text-xs); color: var(--text-muted); }
.cart-qty-btn { width: 24px; height: 24px; font-size: var(--text-xs); }
.cart-qty-value {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    min-width: 20px;
    text-align: center;
}
.cart-remove-btn {
    width: 24px;
    height: 24px;
    font-size: var(--text-xs);
    color: var(--color-danger-500);
    margin-left: auto;
}
.cart-item-total { font-weight: var(--font-bold); color: var(--color-primary-500); white-space: nowrap; }
.cart-budget-warning {
    padding: var(--space-3);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-3);
    font-size: var(--text-sm);
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
}
.cart-budget-icon { margin-top: 2px; }
.cart-subtotal-label { font-weight: var(--font-semibold); }
.cart-subtotal-value { font-size: var(--text-xl); font-weight: var(--font-bold); }
.cart-remaining { margin-bottom: var(--space-3); font-size: var(--text-xs); color: var(--text-muted); }

/* --- Toast notifications --- */
.toast-container {
    position: fixed;
    top: 1.25rem;
    right: 1.25rem;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: none;
}
.toast-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.875rem 1.25rem;
    background: var(--bg-card);
    border-radius: 0.75rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    border-left: 4px solid var(--eds-primary);
    min-width: 280px;
    max-width: 420px;
    font-size: 0.9rem;
    pointer-events: auto;
}
.toast-message { flex: 1; color: var(--color-gray-800); }
.toast-dismiss {
    background: none;
    border: none;
    cursor: pointer;
    opacity: 0.4;
    padding: 0 0.25rem;
    font-size: 0.85rem;
    color: var(--color-gray-600);
}

/* --- Save list / template dialogs --- */
.saved-dialog { min-width: 360px; }
.saved-dialog-heading { font-size: var(--text-lg); font-weight: var(--font-bold); margin-bottom: var(--space-4); }
.tpl-dialog { min-width: 400px; max-width: 480px; }
.tpl-dialog-text { font-size: var(--text-sm); color: var(--text-secondary); margin-bottom: var(--space-4); }
.tpl-dialog-label {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--text-secondary);
    display: block;
    margin-bottom: var(--space-1);
}

/* --- Product detail modal --- */
.product-modal-hero {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-8);
    background: var(--bg-subtle);
}
.product-modal-vendor { font-size: var(--text-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--space-1); }
.product-modal-name { font-size: var(--text-xl); font-weight: var(--font-bold); margin-bottom: var(--space-2); line-height: 1.3; }
.product-modal-item-number { font-size: var(--text-sm); color: var(--text-secondary); margin-bottom: var(--space-4); }
.product-modal-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}
.product-modal-detail-card { padding: var(--space-3); margin: 0; }
.product-modal-detail-label { font-size: var(--text-xs); color: var(--text-muted); margin-bottom: 2px; }
.product-modal-detail-value { font-weight: var(--font-semibold); }
.product-modal-detail-price { font-size: var(--text-lg); font-weight: var(--font-bold); color: var(--color-primary-500); }
.product-modal-supplier-box {
    background: var(--bg-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin-bottom: var(--space-6);
}
.product-modal-supplier-heading { font-size: var(--text-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--space-2); }
.product-modal-supplier-name { font-weight: var(--font-semibold); margin-bottom: var(--space-1); }
.product-modal-supplier-number { font-size: var(--text-sm); color: var(--text-secondary); }
.product-modal-actions { display: flex; gap: var(--space-3); }
.product-modal-add-btn { flex: 1; }
.product-modal-add-icon { margin-right: var(--space-2); }

/* --- Order detail modal --- */
.order-modal-summary {
    padding: var(--space-4) var(--space-6);
    background: var(--bg-subtle);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}
.order-modal-summary-label { font-size: var(--text-xs); color: var(--text-muted); text-transform: uppercase; }
.order-modal-summary-value { font-weight: var(--font-semibold); }
.order-modal-summary-total { font-weight: var(--font-bold); color: var(--eds-primary); }
.order-modal-notes {
    padding: var(--space-3) var(--space-6);
    border-bottom: 1px solid var(--border-light);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}
.order-modal-notes-icon { margin-right: var(--space-2); }
.order-modal-items { padding: var(--space-4) var(--space-6); }
.order-modal-items-heading {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    margin-bottom: var(--space-3);
}
.order-modal-loading { text-align: center; padding: var(--space-6); color: var(--text-muted); }
.order-modal-empty { text-align: center; padding: var(--space-6); color: var(--text-muted); }
.order-modal-item-cell { display: flex; align-items: center; gap: var(--space-2); }
.order-modal-item-thumb {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--bg-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
}
.order-modal-item-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.order-modal-item-name { font-weight: var(--font-semibold); }
.order-modal-item-sku { font-size: var(--text-xs); color: var(--text-muted); }
.order-modal-total-row { border-top: 2px solid var(--border-default); }
.order-modal-total-label { text-align: right; font-weight: var(--font-bold); }
.order-modal-total-value { text-align: right; font-weight: var(--font-bold); color: var(--eds-primary); }
.order-modal-reorder-icon { margin-right: var(--space-1); }

/* --- Demo persona switcher --- */
.demo-switcher { position: fixed; bottom: 16px; right: 16px; z-index: 9999; }
.demo-switcher-toggle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid var(--color-primary-300);
    background: var(--color-primary-500);
    color: white;
    cursor: pointer;
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: transform 0.15s;
}
.demo-switcher-panel {
    position: absolute;
    bottom: 54px;
    right: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    padding: 12px;
    min-width: 220px;
}
.demo-switcher-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 8px;
}
.demo-persona-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
}
.demo-persona-avatar-admin {
    background: var(--color-primary-100);
    color: var(--color-primary-600);
}
.demo-persona-avatar-teacher {
    background: var(--color-success-100);
    color: var(--color-success-600);
}
.demo-persona-name { font-weight: 600; line-height: 1.2; }
.demo-persona-role { font-size: 11px; color: var(--text-muted); }

/* --- Remaining Extraction: Utilities & Components --- */

/* Transitions */
.transition-shadow { transition: box-shadow 0.15s; }
.transition-shadow-transform { transition: box-shadow 0.15s, transform 0.15s; }
.transition-transform { transition: transform 0.2s; }
.resize-vertical { resize: vertical; }

/* Table alignment */
.th-center { text-align: center; }
.th-right { text-align: right; }
.td-center { text-align: center; }
.td-right { text-align: right; }
.td-right-bold { text-align: right; font-weight: var(--font-semibold); }
.th-w-40 { width: 40px; }
.th-w-200 { width: 200px; }
.table-sm { font-size: var(--text-sm); }

/* Modal dialogs — shared positioning */
.modal-overlay { position: fixed; inset: 0; }
.modal-center {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--bg-card);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    z-index: var(--z-modal);
}
.modal-sm { width: 90%; max-width: 450px; padding: var(--space-5); }
.modal-md { width: 90%; max-width: 600px; max-height: 85vh; overflow-y: auto; }
.modal-lg { width: 90%; max-width: 700px; max-height: 80vh; overflow-y: auto; padding: var(--space-5); }
.modal-xl { width: 92%; max-width: 700px; max-height: 85vh; overflow-y: auto; }
.z-overlay { z-index: var(--z-overlay); }
.z-50 { z-index: 50; }
.z-51 { z-index: 51; }
.z-60 { z-index: 60; }
.z-61 { z-index: 61; }

/* Approval cards — remaining inline patterns */
.approval-error-box { padding: var(--space-4); border-left: 3px solid var(--color-accent-500); margin-bottom: var(--space-4); }
.approval-error-row { display: flex; align-items: center; gap: var(--space-2); color: var(--color-accent-600); }
.approval-time { color: var(--text-muted); }
.approval-notes-preview { font-size: var(--text-xs); color: var(--text-muted); margin-top: var(--space-2); font-style: italic; }
.approval-skeleton-body { flex: 1; }
.approval-skeleton-row { height: 18px; width: 120px; margin-bottom: var(--space-2); }
.approval-skeleton-row-md { height: 14px; width: 250px; margin-bottom: var(--space-2); }
.approval-skeleton-row-sm { height: 12px; width: 200px; margin-bottom: var(--space-2); }
.approval-skeleton-row-xs { height: 14px; width: 150px; }
.approval-skeleton-btn { height: 32px; border-radius: var(--radius-md); }
.approval-skeleton-btn-sm { width: 60px; }
.approval-skeleton-btn-md { width: 80px; }
.approval-skeleton-btn-lg { width: 70px; }
.approval-modal-label { color: var(--text-muted); }
.approval-modal-total-value { color: var(--color-primary-500); }

/* Reports — remaining inline patterns */
.rpt-cat-card {
    padding: var(--space-5);
    cursor: pointer;
    transition: box-shadow 0.15s;
}
.rpt-dept-bar-track { height: 6px; }
.rpt-dept-bar-meta { font-size: var(--text-2xs); color: var(--text-muted); margin-top: var(--space-1); }
.rpt-orders-table-wrap { overflow-x: auto; }
.rpt-drill-heading-row { margin-bottom: var(--space-4); }

/* Cart drawer — remaining */
.cart-budget-alert {
    padding: var(--space-3);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-3);
    font-size: var(--text-sm);
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
}
.cart-checkout-link { text-decoration: none; }

/* Saved lists — remaining */
.saved-list-builder-card { padding: var(--space-5); margin-bottom: var(--space-4); }
.saved-list-builder-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-4); }
.saved-list-builder-heading { font-size: var(--text-lg); font-weight: var(--font-semibold); }
.saved-list-field-group { margin-bottom: var(--space-4); }
.saved-list-field-label { font-size: var(--text-sm); font-weight: var(--font-medium); display: block; margin-bottom: var(--space-1); }
.saved-list-input-max { max-width: 400px; }
.saved-list-search-input-max { max-width: 500px; }

/* Save-list dialog */
.save-list-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: var(--z-modal);
    background: var(--bg-card);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    box-shadow: var(--shadow-xl);
    min-width: 360px;
}
.save-template-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: var(--z-modal);
    background: var(--bg-card);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    box-shadow: var(--shadow-xl);
    min-width: 400px;
    max-width: 480px;
}

/* Product/order modal — img sizing (kept for non-onerror images) */
.img-contain { max-width: 100%; max-height: 100%; object-fit: contain; }
.img-thumb-48 { max-width: 48px; max-height: 48px; object-fit: contain; }

/* Loading states */
.loading-state { text-align: center; color: var(--text-muted); }
.loading-state-icon { font-size: var(--text-2xl); margin-bottom: var(--space-3); }

/* Empty padding variants */
.p-12 { padding: var(--space-12, 3rem); }
.empty-state-padded { padding: var(--space-12, 3rem) 0; }

/* Order modal badge */
.order-modal-status-badge { margin-top: var(--space-1); }

/* Browse autocomplete body (duplicate from first half — used in second half too) */
.browse-autocomplete-body { flex: 1; min-width: 0; }

/* Text alignment */
.text-left { text-align: left; }

/* Empty state padding variant */
.empty-state-p8 { padding: var(--space-8) 0; }

/* Reports — department budget card */
.rpt-dept-bar-name { font-weight: var(--font-semibold); font-size: var(--text-sm); }
.rpt-dept-bar-badge { font-size: var(--text-2xs); }

/* Reports — category card h-bar height */
.rpt-cat-hbar { height: 8px; }

/* ============================================
   Dark Theme
   Overrides only the semantic mappings — every component reads these
   tokens, so flipping them here re-themes the whole app. Activated by
   setting data-theme="dark" on <html> (see the inline script in each page
   <head>). Must come after :root so equal-specificity selectors win.
   ============================================ */
[data-theme="dark"] {
    color-scheme: dark;

    /* Surfaces */
    --bg-body: var(--color-neutral-900);     /* app background */
    --bg-card: var(--color-neutral-800);     /* cards / panels */
    --bg-sidebar: var(--color-neutral-800);
    --bg-header: var(--color-neutral-800);
    --bg-input: var(--color-neutral-700);
    --bg-hover: var(--color-neutral-700);
    --bg-active: var(--color-primary-700);
    --bg-muted: var(--color-neutral-700);
    --bg-subtle: var(--color-neutral-800);

    /* Text */
    --text-primary: var(--color-neutral-50);
    --text-secondary: var(--color-neutral-300);
    --text-muted: var(--color-neutral-400);
    --text-tertiary: var(--color-neutral-400);
    --text-inverse: var(--color-neutral-900);
    --text-link: var(--color-primary-300);

    /* Borders */
    --border-light: var(--color-neutral-700);
    --border-default: var(--color-neutral-700);
    --border-strong: var(--color-neutral-600);

    /* Soft tinted surfaces — dark hue washes with light text */
    --surface-info-soft: color-mix(in srgb, var(--color-primary-500) 24%, var(--bg-card));
    --surface-info-border: color-mix(in srgb, var(--color-primary-500) 40%, transparent);
    --text-info-strong: var(--text-primary);
    --surface-danger-soft: color-mix(in srgb, var(--color-accent-500) 22%, var(--bg-card));
    --surface-danger-border: color-mix(in srgb, var(--color-accent-500) 40%, transparent);
    --text-danger-strong: var(--text-primary);
    --surface-warning-soft: color-mix(in srgb, var(--color-warning-500) 20%, var(--bg-card));
    --surface-warning-border: color-mix(in srgb, var(--color-warning-500) 40%, transparent);
    --text-warning-strong: var(--text-primary);

    /* Shadows — deeper on dark surfaces */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.55), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 8px 10px -6px rgba(0, 0, 0, 0.5);
}

/* Dark theme — soft-tint surfaces for badges & stat chips.
   Alerts/notices get their soft tints from the --surface-*-soft token set
   (single source of truth, theme-aware). Badges and stat chips keep their
   own lifted text shades, so they're handled per-class here. */

/* Pill badges */
[data-theme="dark"] .badge-primary { background: color-mix(in srgb, var(--color-primary-500) 26%, var(--bg-card)); color: var(--color-primary-200); }
[data-theme="dark"] .badge-accent  { background: color-mix(in srgb, var(--color-accent-500) 24%, var(--bg-card));  color: var(--color-accent-200); }
[data-theme="dark"] .badge-success { background: color-mix(in srgb, var(--color-success-500) 24%, var(--bg-card)); color: color-mix(in srgb, var(--color-success-500) 55%, white); }
[data-theme="dark"] .badge-warning { background: color-mix(in srgb, var(--color-warning-500) 24%, var(--bg-card)); color: color-mix(in srgb, var(--color-warning-500) 60%, white); }
[data-theme="dark"] .badge-info    { background: color-mix(in srgb, var(--color-info-500) 24%, var(--bg-card));    color: color-mix(in srgb, var(--color-info-500) 60%, white); }

/* Dashboard stat-icon chips */
[data-theme="dark"] .stat-icon.primary { background: color-mix(in srgb, var(--color-primary-500) 28%, var(--bg-card)); color: var(--color-primary-200); }
[data-theme="dark"] .stat-icon.success { background: color-mix(in srgb, var(--color-success-500) 26%, var(--bg-card)); color: color-mix(in srgb, var(--color-success-500) 60%, white); }
[data-theme="dark"] .stat-icon.warning { background: color-mix(in srgb, var(--color-warning-500) 26%, var(--bg-card)); color: color-mix(in srgb, var(--color-warning-500) 65%, white); }
[data-theme="dark"] .stat-icon.accent  { background: color-mix(in srgb, var(--color-accent-500) 26%, var(--bg-card));  color: var(--color-accent-200); }
[data-theme="dark"] .stat-icon.info    { background: color-mix(in srgb, var(--color-info-500) 26%, var(--bg-card));    color: color-mix(in srgb, var(--color-info-500) 65%, white); }

/* Post-parity components that keep raw light-palette tints in light mode */
[data-theme="dark"] .sidebar-nav-item.active {
    background: color-mix(in srgb, var(--color-primary-500) 28%, var(--bg-sidebar));
    color: var(--color-primary-200);
}
[data-theme="dark"] .product-card-image,
[data-theme="dark"] .cart-item-image { background: var(--color-neutral-700); }



/* ============================================
   Order lock badge, cancel button, status timeline
   (EDSIQ parity: reqs lock once approved; lifecycle
   Pending Approval -> Approved -> At EDS -> PO Printed)
   ============================================ */
.order-lock-icon {
    margin-left: var(--space-2);
    color: var(--text-muted);
    font-size: var(--text-xs);
}

.order-cancel-btn { color: var(--color-accent-500); }
.order-cancel-btn:hover { background: var(--surface-danger-soft); color: var(--text-danger-strong); }

.approval-lock-note {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    background: var(--bg-muted);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
}
.approval-lock-note i { margin-right: var(--space-1); }

.order-timeline {
    display: flex;
    align-items: flex-start;
    padding: var(--space-4) var(--space-5) var(--space-2);
    gap: 0;
}
.order-timeline-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    min-width: 0;
}
.order-timeline-track {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: center;
    position: relative;
}
.order-timeline-line {
    position: absolute;
    right: 50%;
    left: -50%;
    height: 2px;
    background: var(--border-default);
    z-index: 0;
}
.order-timeline-step.is-done .order-timeline-line,
.order-timeline-step.is-current .order-timeline-line {
    background: var(--color-success-500);
}
.order-timeline-step.is-terminal .order-timeline-line { background: var(--color-accent-500); }
.order-timeline-dot {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    z-index: 1;
    background: var(--bg-muted);
    color: var(--text-muted);
    border: 2px solid var(--border-default);
}
.order-timeline-step.is-done .order-timeline-dot {
    background: var(--color-success-500);
    border-color: var(--color-success-500);
    color: white;
}
.order-timeline-step.is-current .order-timeline-dot {
    background: var(--bg-card);
    border-color: var(--color-success-500);
    color: var(--color-success-500);
    box-shadow: 0 0 0 4px rgba(40, 167, 69, 0.15);
}
.order-timeline-step.is-terminal .order-timeline-dot {
    background: var(--color-accent-500);
    border-color: var(--color-accent-500);
    color: white;
}
.order-timeline-label {
    margin-top: var(--space-2);
    font-size: var(--text-2xs);
    font-weight: var(--font-semibold);
    color: var(--text-secondary);
}
.order-timeline-step.is-current .order-timeline-label { color: var(--color-success-600); }
.order-timeline-step.is-terminal .order-timeline-label { color: var(--color-accent-600); }

/* ============================================
   Approval history + chain banner
   ============================================ */
.approval-chain-banner {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--text-info-strong);
    background: var(--surface-info-soft);
    border: 1px solid var(--surface-info-border);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
}
.approval-chain-banner i { margin-top: 2px; }

.history-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-2) 0 var(--space-3);
}
.history-event {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    font-size: var(--text-sm);
}
.history-event > i {
    margin-top: 2px;
    width: 16px;
    text-align: center;
    color: var(--text-muted);
}
.history-event.is-submitted > i { color: var(--color-info-500); }
.history-event.is-approved > i { color: var(--color-success-500); }
.history-event.is-rejected > i { color: var(--color-accent-500); }
.history-event.is-awaiting > i { color: var(--color-warning-500); }
.history-event-label { font-weight: var(--font-medium); color: var(--text-primary); }
.history-event.is-awaiting .history-event-label { color: var(--color-warning-600, #b45309); font-style: italic; }
.history-event-date { font-size: var(--text-xs); color: var(--text-muted); }

/* History event comments + cancelled state */
.history-event.is-cancelled > i { color: var(--color-accent-500); }
.history-event-comment {
    margin-top: var(--space-1);
    padding: var(--space-1) var(--space-3);
    border-left: 3px solid var(--border-default);
    font-size: var(--text-xs);
    font-style: italic;
    color: var(--text-secondary);
}

/* ===========================================
   Dashboard restructure — hero panels + supporting metrics
   =========================================== */
.dash-hero-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: var(--space-3);
}
@media (max-width: 720px) {
    .dash-hero-grid { grid-template-columns: 1fr; }
}

.dash-hero {
    display: flex;
    flex-direction: column;
}
.dash-hero-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}
.dash-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}
.dash-hero-eyebrow i { color: var(--text-tertiary); }

.dash-hero-figure {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin-top: var(--space-2);
}
.dash-hero-number {
    font-size: 2.5rem;
    font-weight: var(--font-bold);
    line-height: 1;
    color: var(--text-primary);
}
.dash-hero-unit {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.dash-hero-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-3);
}
.chip {
    font-size: var(--text-xs);
    padding: 3px 10px;
    border-radius: var(--radius-md);
    white-space: nowrap;
}
.chip-accent { background: var(--surface-info-soft); color: var(--color-primary-600); }
.chip-muted  { background: var(--bg-muted); color: var(--text-secondary); }

.dash-hero-note {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-light);
    font-size: var(--text-xs);
    color: var(--text-tertiary);
}

.dash-hero-cta { margin-top: var(--space-3); }
.dash-hero-bar { margin-top: var(--space-4); }
.dash-hero-barmeta {
    display: flex;
    justify-content: space-between;
    margin-top: var(--space-2);
    font-size: var(--text-xs);
    color: var(--text-secondary);
}

.dash-metric-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
}
@media (max-width: 720px) {
    .dash-metric-row { grid-template-columns: 1fr 1fr; }
}
.dash-metric-tile {
    background: var(--bg-muted);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
}
.dash-metric-label {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}
.dash-metric-value {
    font-size: var(--text-2xl);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin-top: 2px;
}
.dash-metric-value-muted { color: var(--text-tertiary); }
.dash-metric-note {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
}

/* --- Dashboard loading skeleton --- */
.dash-skeleton-hero { height: 220px; }
.dash-skeleton-tile { height: 62px; border-radius: var(--radius-md); }

/* --- Unpriced catalog-award lines (price loads later via CrossRef) --- */
.unpriced-flag {
    color: var(--text-tertiary);
    font-style: italic;
    font-weight: var(--font-normal);
    cursor: help;
}
.unpriced-notice {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    background: var(--surface-info-soft);
    border: 1px solid var(--surface-info-border);
    color: var(--text-info-strong);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-3);
    font-size: var(--text-sm);
}
.unpriced-notice i { margin-top: 3px; }

/* --- District Maintenance (CS) --- */
.distadmin-layout {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(320px, 1.4fr);
    gap: var(--space-4);
    align-items: start;
}
@media (max-width: 900px) {
    .distadmin-layout { grid-template-columns: 1fr; }
}
.distadmin-result {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    text-align: left;
    padding: var(--space-2) var(--space-3);
    margin-top: var(--space-1);
    background: var(--bg-subtle);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
}
.distadmin-result:hover { background: var(--bg-muted); }
.distadmin-result-selected {
    border-color: var(--color-primary-500);
    background: var(--surface-info-soft);
}
.distadmin-money-input {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}
.distadmin-money-input input { width: 130px; }

/* --- Printable PO document --- */
.po-print-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal, 1000);
    background: #f3f4f6;
    overflow-y: auto;
    padding: var(--space-4);
}
.po-print-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 8.5in;
    margin: 0 auto var(--space-3);
}
.po-print-doc {
    background: #ffffff;
    color: #111827;
    max-width: 8.5in;
    margin: 0 auto;
    padding: 0.6in 0.6in 0.5in;
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
    font-size: 12px;
    line-height: 1.4;
}
.po-doc-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 2px solid #111827;
    padding-bottom: 10px;
    margin-bottom: 14px;
}
.po-doc-title { font-size: 20px; font-weight: 800; letter-spacing: 0.04em; }
.po-doc-num { font-size: 14px; font-weight: 600; margin-top: 2px; }
.po-doc-head-right { text-align: right; font-size: 12px; }
.po-doc-head-right div { margin-bottom: 2px; }
.po-doc-addr-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}
.po-doc-addr { border: 1px solid #d1d5db; padding: 8px 10px; border-radius: 4px; }
.po-doc-addr-label {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.06em; color: #6b7280; margin-bottom: 4px;
}
.po-doc-addr-phone { margin-top: 4px; color: #374151; }
.po-doc-table { width: 100%; border-collapse: collapse; margin-bottom: 12px; }
.po-doc-table th {
    text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em;
    color: #374151; border-bottom: 1.5px solid #111827; padding: 6px 8px;
}
.po-doc-table td { padding: 6px 8px; border-bottom: 1px solid #e5e7eb; vertical-align: top; }
.po-doc-table tfoot td { border-bottom: none; border-top: 1.5px solid #111827; font-size: 13px; padding-top: 8px; }
.po-doc-table .td-right { text-align: right; }
.po-doc-alt {
    display: inline-block; font-size: 9px; font-weight: 700; color: #b45309;
    background: #fef3c7; padding: 0 4px; border-radius: 3px; margin-left: 4px;
}
.po-doc-foot { font-size: 11px; color: #6b7280; border-top: 1px dashed #d1d5db; padding-top: 8px; }

@media print {
    body * { visibility: hidden !important; }
    .po-print-overlay, .po-print-overlay * { visibility: visible !important; }
    .po-print-overlay {
        position: absolute !important;
        inset: 0 !important;
        background: #ffffff !important;
        padding: 0 !important;
        overflow: visible !important;
    }
    .po-print-no-print { display: none !important; }
    .po-print-doc { box-shadow: none !important; max-width: none !important; margin: 0 !important; padding: 0.4in !important; }
}