/* ═══════════════════════════════════════════════════════════════════════
       ALTA OILS ERP — Apple Liquid Glass Design System
    ═══════════════════════════════════════════════════════════════════════ */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
        --rose: #9f1239;
        --rose-light: #be123c;
        --rose-pale: #fff1f2;
        --rose-glass: rgba(159,18,57,0.12);
        /* Solar-glow halo. Tuned per theme: on a light background the halo has to stay
           restrained to read as a glow rather than a smudge, so it leans on the deeper
           accent and lower alpha than the dark theme uses. */
        --glow-core: rgba(225,29,72,0.38);
        --glow-far: rgba(225,29,72,0.18);
        --glow-core-hot: rgba(225,29,72,0.55);
        --glow-far-hot: rgba(225,29,72,0.28);
        --accent: #e11d48;
        --gold: #d97706;
        --green: #059669;
        --blue: #2563eb;
        --orange: #ea580c;
        --red: #dc2626;

        --bg: #f8f4f5;
        --bg2: #f1ecee;
        --sidebar-bg: rgba(255,255,255,0.82);
        --card-bg: rgba(255,255,255,0.75);
        --card-border: rgba(255,255,255,0.65);
        --text-primary: #1c1c1e;
        --text-secondary: #636366;
        --text-tertiary: #8a8a90;
        --divider: rgba(0,0,0,0.08);

        /* Surface & interaction tokens (theme-aware) */
        --surface-2: rgba(255,255,255,0.6);
        --hover: rgba(0,0,0,0.04);
        --hover-2: rgba(0,0,0,0.06);
        --field-bg: rgba(255,255,255,0.85);
        --field-border: rgba(0,0,0,0.1);
        --field-focus-bg: #ffffff;
        --th-bg: rgba(0,0,0,0.025);
        --row-hover: rgba(159,18,57,0.045);
        --tab-active-bg: #ffffff;
        --topbar-bg: rgba(255,255,255,0.72);
        --btn-ghost-bg: rgba(0,0,0,0.04);
        --btn-ghost-hover-bg: #ffffff;
        --nav-active-bg: rgba(159,18,57,0.1);
        --nav-active-border: rgba(159,18,57,0.15);
        --wizard-bg: rgba(248,244,245,0.98);
        --wizard-header-bg: rgba(255,255,255,0.8);
        --scrollbar: rgba(0,0,0,0.16);
        --glass-inset: inset 0 1px 0 rgba(255,255,255,0.85);
        --solid-surface: #ffffff;
        --solid-surface-2: #fbf8f9;

        --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
        --shadow-md: 0 4px 16px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
        --shadow-lg: 0 20px 60px rgba(0,0,0,0.12), 0 8px 20px rgba(0,0,0,0.06);
        --shadow-glass: 0 8px 32px rgba(0,0,0,0.08), var(--glass-inset);

        --blur: blur(40px) saturate(180%);
        --blur-sm: blur(16px) saturate(160%);
        --r-xs: 10px;
        --r-sm: 14px;
        --r-md: 20px;
        --r-lg: 28px;
        --r-xl: 36px;
        --transition: 0.22s cubic-bezier(0.4,0,0.2,1);
    }

    /* ── Dark theme (JS sets data-theme on <html>; defaults to system on load) ── */
    :root[data-theme="dark"] {
        --rose: #ff3d8b;
        --rose-light: #ff5c9e;
        --rose-glass: rgba(255,61,139,0.16);
        /* Dark surfaces let the halo burn brighter without turning into a smudge. */
        --glow-core: rgba(255,61,139,0.50);
        --glow-far: rgba(255,61,139,0.24);
        --glow-core-hot: rgba(255,61,139,0.72);
        --glow-far-hot: rgba(255,61,139,0.38);
        --accent: #ff4d6d;
        --gold: #f0a92b;
        --green: #34d399;
        --blue: #60a5fa;
        --orange: #fb923c;
        --red: #f87171;

        --bg: #0e0f12;
        --bg2: #141519;
        --sidebar-bg: rgba(20,21,25,0.85);
        --card-bg: rgba(30,31,37,0.72);
        --card-border: rgba(255,255,255,0.09);
        --text-primary: #f3f3f6;
        --text-secondary: #a6a6ae;
        --text-tertiary: #71717a;
        --divider: rgba(255,255,255,0.09);

        --surface-2: rgba(255,255,255,0.045);
        --hover: rgba(255,255,255,0.05);
        --hover-2: rgba(255,255,255,0.08);
        --field-bg: rgba(255,255,255,0.05);
        --field-border: rgba(255,255,255,0.12);
        --field-focus-bg: rgba(255,255,255,0.08);
        --th-bg: rgba(255,255,255,0.03);
        --row-hover: rgba(255,61,139,0.12);
        --tab-active-bg: rgba(255,255,255,0.14);
        --topbar-bg: rgba(20,21,25,0.72);
        --btn-ghost-bg: rgba(255,255,255,0.06);
        --btn-ghost-hover-bg: rgba(255,255,255,0.14);
        --nav-active-bg: rgba(255,61,139,0.16);
        --nav-active-border: rgba(255,61,139,0.28);
        --wizard-bg: rgba(14,15,18,0.98);
        --wizard-header-bg: rgba(28,29,34,0.85);
        --scrollbar: rgba(255,255,255,0.18);
        --glass-inset: inset 0 1px 0 rgba(255,255,255,0.05);
        --solid-surface: #1c1d23;
        --solid-surface-2: #232429;

        --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
        --shadow-md: 0 4px 16px rgba(0,0,0,0.45), 0 2px 4px rgba(0,0,0,0.35);
        --shadow-lg: 0 20px 60px rgba(0,0,0,0.6), 0 8px 20px rgba(0,0,0,0.45);
        --shadow-glass: 0 8px 32px rgba(0,0,0,0.42), var(--glass-inset);
    }

    html, body, #root { height: 100%; }
    body {
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
        background: var(--bg);
        color: var(--text-primary);
        -webkit-font-smoothing: antialiased;
        overflow: hidden;
        transition: background-color 0.3s ease, color 0.3s ease;
    }
    /* Keyboard-accessible focus ring */
    a:focus-visible, button:focus-visible, input:focus-visible,
    select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
        outline: 2px solid var(--rose-light);
        outline-offset: 2px;
    }
    @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
    }

    /* Business-professional flat background — no decorative color blobs. */

    /* ── Scrollbar ── */
    ::-webkit-scrollbar { width: 5px; height: 5px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 8px; }

    /* ── Glass Panel ── */
    .glass {
        background: var(--card-bg);
        backdrop-filter: var(--blur);
        -webkit-backdrop-filter: var(--blur);
        border: 1px solid var(--card-border);
        box-shadow: var(--shadow-glass);
    }
    .glass-sm {
        background: var(--surface-2);
        backdrop-filter: var(--blur-sm);
        -webkit-backdrop-filter: var(--blur-sm);
        border: 1px solid var(--card-border);
        box-shadow: var(--shadow-sm);
    }

    /* ── Layout ── */
    .layout { display: flex; height: 100vh; position: relative; z-index: 1; overflow: hidden; }

    /* ── Sidebar ── */
    .sidebar {
        width: 280px; /* Slightly wider */
        min-width: 280px;
        background: var(--sidebar-bg);
        backdrop-filter: var(--blur);
        -webkit-backdrop-filter: var(--blur);
        border-right: 1px solid var(--divider);
        display: flex;
        flex-direction: column;
        z-index: 10;
        box-shadow: 2px 0 20px rgba(0,0,0,0.05);
        transition: width var(--transition), min-width var(--transition);
        position: relative;
    }
    .sidebar.collapsed {
        width: 80px;
        min-width: 80px;
    }
    .sidebar.collapsed .sidebar-logo h1,
    .sidebar.collapsed .sidebar-logo p,
    .sidebar.collapsed .sidebar-section-label,
    .sidebar.collapsed .nav-item-label {
        display: none;
    }
    .sidebar.collapsed .sidebar-logo {
        padding: 32px 0 24px 0;
        text-align: center;
    }
    .sidebar.collapsed .sidebar-logo::before {
        content: '🌹';
        font-size: 24px;
        color: var(--rose);
        font-weight: 800;
    }
    .sidebar-logo {
        padding: 32px 24px 24px;
        border-bottom: 1px solid var(--divider);
        height: 100px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        cursor: pointer;
        transition: var(--transition);
    }
    .sidebar-logo:hover { background: var(--hover); }
    .sidebar-logo h1 {
        font-size: 26px;
        font-weight: 800;
        background: linear-gradient(135deg, var(--rose) 0%, #c2185b 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        letter-spacing: -0.5px;
    }
    .sidebar-logo p { font-size: 14px; color: var(--text-tertiary); margin-top: 4px; font-weight: 500; letter-spacing: 0.3px; }
    .sidebar-nav { flex: 1; padding: 20px 16px; overflow-y: auto; }
    .sidebar-section-label {
        font-size: 13px;
        font-weight: 700;
        color: var(--text-tertiary);
        letter-spacing: 0.8px;
        text-transform: uppercase;
        padding: 16px 12px 8px;
    }
    .nav-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 14px;
        border-radius: var(--r-sm);
        cursor: pointer;
        transition: all var(--transition);
        font-size: 16px;
        font-weight: 500;
        color: var(--text-secondary);
        border: 1px solid transparent;
        margin-bottom: 4px;
        background: transparent;
        width: 100%;
        text-align: left;
    }
    .nav-item:hover {
        background: var(--hover);
        color: var(--rose);
    }
    .nav-item.active {
        background: var(--nav-active-bg);
        color: var(--rose);
        font-weight: 700;
        border-color: var(--nav-active-border);
    }
    .nav-icon {
        width: 34px; height: 34px;
        border-radius: 8px;
        display: flex; align-items: center; justify-content: center;
        font-size: 18px;
        flex-shrink: 0;
        transition: all var(--transition);
    }
    .nav-item.active .nav-icon {
        background: var(--rose-glass);
    }

    /* ── Main Content ── */
    .main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
    .topbar {
        height: 68px;
        background: var(--topbar-bg);
        backdrop-filter: var(--blur-sm);
        -webkit-backdrop-filter: var(--blur-sm);
        border-bottom: 1px solid var(--divider);
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 32px;
        gap: 16px;
        flex-shrink: 0;
        z-index: 5;
    }
    .topbar-search {
        display: flex;
        align-items: center;
        gap: 10px;
        background: var(--hover);
        border: 1px solid var(--field-border);
        border-radius: 12px;
        padding: 10px 16px;
        flex: 1;
        max-width: 400px;
    }
    .topbar-search input {
        border: none; background: transparent;
        font-size: 16px; color: var(--text-primary);
        width: 100%; outline: none;
        font-family: inherit;
    }
    .topbar-search input::placeholder { color: var(--text-tertiary); }

    /* ── Global Search (topbar "super search" / command palette) ── */
    .global-search {
        position: relative;
        display: flex;
        align-items: center;
        gap: 12px;
        flex: 1;
        max-width: 640px;
        background: var(--solid-surface);
        border: 1.5px solid var(--field-border);
        border-radius: 100px;
        padding: 13px 14px 13px 22px;
        transition: all var(--transition);
    }
    .global-search:focus-within {
        border-color: var(--rose-light);
        box-shadow: 0 0 0 5px var(--rose-glass);
    }
    .global-search-icon { font-size: 20px; color: var(--text-tertiary); flex-shrink: 0; transition: color var(--transition); }
    .global-search:focus-within .global-search-icon { color: var(--rose); }
    .global-search input {
        flex: 1; min-width: 0;
        border: none; background: transparent;
        font-size: 17px; font-weight: 500; color: var(--text-primary);
        outline: none; font-family: inherit;
    }
    .global-search input::placeholder { color: var(--text-tertiary); font-weight: 400; }
    .global-search-clear {
        width: 30px; height: 30px; flex-shrink: 0;
        border-radius: 50%; border: none;
        background: var(--hover-2); color: var(--text-secondary);
        font-size: 14px; display: flex; align-items: center; justify-content: center;
        cursor: pointer; transition: all var(--transition);
    }
    .global-search-clear:hover { background: var(--rose); color: white; }
    .global-search-kbd {
        flex-shrink: 0;
        font-size: 12px; font-weight: 700; color: var(--text-tertiary);
        background: var(--hover-2);
        border: 1px solid var(--divider);
        border-radius: 7px;
        padding: 5px 9px;
        font-family: inherit;
        white-space: nowrap;
    }
    .global-search-panel {
        position: absolute;
        top: calc(100% + 10px);
        left: 0; right: 0;
        max-height: 70vh;
        overflow-y: auto;
        background: var(--solid-surface);
        border: 1px solid var(--card-border);
        border-radius: var(--r-md);
        box-shadow: var(--shadow-lg);
        z-index: 60;
        padding: 8px;
    }
    .global-search-group + .global-search-group { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--divider); }
    .global-search-group-label {
        font-size: 11px; font-weight: 700; color: var(--text-tertiary);
        text-transform: uppercase; letter-spacing: 0.5px;
        padding: 6px 10px 4px;
    }
    .global-search-item {
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
        padding: 10px 12px;
        border-radius: var(--r-sm);
        cursor: pointer;
        transition: background var(--transition);
    }
    .global-search-item:hover { background: var(--row-hover); }
    .global-search-item-title { font-size: 15px; font-weight: 700; color: var(--text-primary); }
    .global-search-item-sub { font-size: 13px; color: var(--text-tertiary); margin-top: 1px; }
    .global-search-item-right { font-size: 14px; font-weight: 700; color: var(--text-secondary); white-space: nowrap; flex-shrink: 0; }
    .global-search-empty { padding: 28px 16px; text-align: center; color: var(--text-tertiary); font-size: 14px; }

    .topbar-actions { display: flex; align-items: center; gap: 16px; }
    .topbar-btn {
        width: 40px; height: 40px;
        border-radius: 12px;
        border: 1px solid var(--divider);
        background: var(--surface-2);
        display: flex; align-items: center; justify-content: center;
        cursor: pointer; font-size: 18px;
        transition: all var(--transition);
        position: relative;
        color: var(--text-secondary);
    }
    .topbar-btn:hover { background: var(--btn-ghost-hover-bg); color: var(--text-primary); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
    .notif-dot {
        position: absolute; top: 8px; right: 8px;
        width: 10px; height: 10px;
        background: var(--accent);
        border-radius: 50%;
        border: 2px solid white;
    }
    .avatar {
        width: 40px; height: 40px;
        background: linear-gradient(135deg, var(--rose) 0%, #be185d 100%);
        border-radius: 12px;
        display: flex; align-items: center; justify-content: center;
        color: white; font-size: 15px; font-weight: 800;
        cursor: pointer;
        box-shadow: 0 2px 8px rgba(159,18,57,0.3);
    }

    /* ── Page Content ── */
    .page { flex: 1; overflow-y: auto; padding: 32px; position: relative; }

    /* A .page-view is a full-screen page laid over the list that spawned it. It is
       absolutely positioned against .page, but .page still holds that (taller) list
       and still scrolls — so scrolling dragged the overlay up and exposed the list
       underneath it. While a page-view is mounted the list must not scroll: the
       page-view does its own scrolling. */
    .page:has(> .page-view) { overflow: hidden; }

    .page-view {
        position: absolute;
        inset: 0;
        background: var(--bg);
        z-index: 50;
        padding: 32px;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .page-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 32px;
        gap: 16px;
        flex-wrap: wrap;
    }
    .page-header > :first-child { flex: 1 1 320px; min-width: 0; }
    .page-header > :last-child:not(:first-child) { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; align-items: center; }
    .page-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
    .page-title { font-size: 32px; font-weight: 800; color: var(--text-primary); letter-spacing: -0.8px; }
    .page-subtitle { font-size: 16px; color: var(--text-secondary); margin-top: 6px; }

    /* ── Buttons ── */
    .btn {
        display: inline-flex; align-items: center; justify-content: center;
        gap: 8px;
        padding: 12px 24px;
        border-radius: var(--r-sm);
        font-size: 17px; font-weight: 600;
        cursor: pointer; border: none;
        transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
        font-family: inherit;
        white-space: nowrap;
        user-select: none;
        -webkit-user-select: none;
    }
    .btn:hover:not(:disabled) {
        transform: translateY(-1.5px);
    }
    .btn:active:not(:disabled) {
        transform: scale(0.97) translateY(1px);
        transition: transform 0.08s ease-out;
    }
    .btn:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px rgba(235, 1, 138, 0.35);
    }
    .btn-primary {
        background: linear-gradient(135deg, var(--rose) 0%, var(--accent) 100%);
        color: white;
        box-shadow: 0 4px 12px rgba(159,18,57,0.3);
    }
    .btn-primary:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(159,18,57,0.4); }
    .btn-primary:active:not(:disabled) { transform: scale(0.97) translateY(1px); box-shadow: 0 2px 6px rgba(159,18,57,0.3); }
    .btn-ghost {
        background: var(--btn-ghost-bg);
        color: var(--text-secondary);
        border: 1px solid var(--divider);
    }
    .btn-ghost:hover:not(:disabled) { background: var(--btn-ghost-hover-bg); color: var(--text-primary); }
    .btn-ghost:active:not(:disabled) { transform: scale(0.97) translateY(1px); }
    .btn-danger {
        background: rgba(220,38,38,0.08);
        color: #dc2626;
        border: 1px solid rgba(220,38,38,0.15);
    }
    .btn-danger:hover:not(:disabled) { background: #dc2626; color: white; box-shadow: 0 4px 14px rgba(220,38,38,0.3); }
    .btn-danger:active:not(:disabled) { transform: scale(0.97) translateY(1px); }
    .btn-success {
        background: rgba(5,150,105,0.1);
        color: var(--green);
        border: 1px solid rgba(5,150,105,0.2);
    }
    .btn-success:hover:not(:disabled) { background: var(--green); color: white; box-shadow: 0 4px 14px rgba(5,150,105,0.3); }
    .btn-success:active:not(:disabled) { transform: scale(0.97) translateY(1px); }
    .btn-secondary {
        background: rgba(100,116,139,0.08);
        color: var(--text-secondary);
        border: 1px solid rgba(100,116,139,0.2);
    }
    .btn-secondary:hover:not(:disabled) { background: rgba(100,116,139,0.15); color: var(--text-primary); }
    .btn-secondary:active:not(:disabled) { transform: scale(0.97) translateY(1px); }
    .btn-sm { padding: 8px 16px; font-size: 16px; }
    .btn-lg { padding: 16px 32px; font-size: 20px; }
    .btn-xl { padding: 20px 40px; font-size: 22px; font-weight: 800; border-radius: var(--r-md); }
    .btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none !important; }


    /* ── Solar glow ──
       A warm halo radiating out from the button, breathing while hovered, to pull the
       eye to the one action that matters on the screen. Built from box-shadow spread
       rather than a blurred pseudo-element so it never participates in layout and
       never needs a stacking context to sit behind its own button. */
    .btn-glow { position: relative; }
    .btn-glow:hover:not(:disabled) {
        transform: translateY(-2px);
        animation: solarPulse 2.4s ease-in-out infinite;
    }
    .btn-glow:focus-visible:not(:disabled) { animation: solarPulse 2.4s ease-in-out infinite; }
    @keyframes solarPulse {
        0%, 100% {
            box-shadow: 0 4px 14px rgba(159,18,57,0.35),
                        0 0 20px 3px var(--glow-core),
                        0 0 40px 10px var(--glow-far);
        }
        50% {
            box-shadow: 0 6px 20px rgba(159,18,57,0.45),
                        0 0 34px 7px var(--glow-core-hot),
                        0 0 66px 18px var(--glow-far-hot);
        }
    }
    /* The pulse is decorative; honour a reduced-motion preference by holding the halo
       at its bright resting state instead of animating it. */
    @media (prefers-reduced-motion: reduce) {
        .btn-glow:hover:not(:disabled) {
            animation: none;
            box-shadow: 0 4px 14px rgba(159,18,57,0.35),
                        0 0 30px 6px var(--glow-core-hot),
                        0 0 56px 14px var(--glow-far-hot);
        }
    }

    /* ── Dashboard quick actions ── */
    .quick-actions-row { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 28px; }
    .quick-action-btn {
        display: inline-flex; align-items: center; gap: 10px;
        padding: 15px 26px;
        border-radius: 100px;
        border: 1.5px solid var(--card-border);
        background: var(--solid-surface-2);
        color: var(--text-secondary);
        font-size: 16px; font-weight: 700;
        cursor: pointer;
        transition: all var(--transition);
        font-family: inherit;
        box-shadow: var(--shadow-sm);
    }
    .quick-action-btn span { font-size: 20px; }
    .quick-action-btn:hover { background: var(--rose-glass); color: var(--rose); border-color: rgba(159,18,57,0.25); transform: translateY(-2px); box-shadow: var(--shadow-md); }

    /* ── KPI Cards ── */
    .kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 28px; }
    .kpi-grid-3 { grid-template-columns: repeat(3, 1fr); }
    /* Analytics: two chart cards side by side, one column when narrow. */
    .ana-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
    @media (max-width: 1100px) { .ana-grid { grid-template-columns: minmax(0, 1fr); } }
    .kpi-card {
        border-radius: var(--r-md);
        padding: 26px;
        display: flex; flex-direction: column;
        transition: all var(--transition);
    }
    .kpi-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg) !important; }
    .kpi-icon {
        width: 50px; height: 50px;
        border-radius: 14px;
        display: flex; align-items: center; justify-content: center;
        font-size: 26px;
        margin-bottom: 16px;
    }
    .kpi-value { font-size: 30px; font-weight: 800; color: var(--text-primary); letter-spacing: -0.5px; }
    .kpi-label { font-size: 14px; font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.4px; margin-top: 6px; }
    .kpi-sub { font-size: 14px; color: var(--text-secondary); margin-top: 10px; }

    /* ── Tables ── */
    /* A card clips to its radius but never hides a wide table — it scrolls sideways instead. */
    .card { border-radius: var(--r-md); overflow-x: auto; overflow-y: hidden; }
    .card-header {
        padding: 22px 28px;
        display: flex; align-items: center; justify-content: space-between;
        border-bottom: 1px solid var(--divider);
    }
    .card-title { font-size: 18px; font-weight: 700; color: var(--text-primary); }
    table { width: 100%; border-collapse: collapse; }
    thead th {
        padding: 12px 18px;
        text-align: left;
        font-size: 13px;
        white-space: nowrap;
        font-weight: 700;
        color: var(--text-tertiary);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        background: var(--th-bg);
        border-bottom: 1px solid var(--divider);
    }
    tbody tr {
        border-bottom: 1px solid var(--divider);
        transition: background var(--transition);
        cursor: pointer;
    }
    tbody tr:last-child { border-bottom: none; }
    tbody tr:hover { background: var(--row-hover); }
    td { padding: 14px 18px; font-size: 15px; color: var(--text-primary); }
    /* Identifiers (lot / order / batch numbers) never wrap mid-code. */
    td [style*="monospace"], td .badge { white-space: nowrap; }
    /* Editable grids (cost lines, item rows): tighter cells so inputs get the room. */
    .table-compact th, .table-compact td { padding: 8px 8px; }
    .table-compact tbody tr { cursor: default; }
    .table-compact tbody tr:hover { background: transparent; }

    /* ── Badges ── */
    .badge {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 6px 14px;
        border-radius: 100px;
        font-size: 13px;
        font-weight: 600;
    }
    .badge-green { background: rgba(5,150,105,0.1); color: #059669; }
    .badge-yellow { background: rgba(217,119,6,0.1); color: #d97706; }
    .badge-red { background: rgba(220,38,38,0.1); color: #dc2626; }
    .badge-blue { background: rgba(37,99,235,0.1); color: #2563eb; }
    .badge-gray { background: rgba(0,0,0,0.06); color: var(--text-secondary); }
    .badge-orange { background: rgba(234,88,12,0.1); color: #ea580c; }
    .badge-rose { background: rgba(159,18,57,0.1); color: var(--rose); }

    /* ── Lighter glass panel (for sub-cards) ── */
    .glass-sm {
        background: var(--surface-2);
        backdrop-filter: blur(20px) saturate(160%);
        -webkit-backdrop-filter: blur(20px) saturate(160%);
        border: 1px solid var(--card-border);
        box-shadow: var(--shadow-sm);
    }

    /* ── Credit Limit Bar ── */
    .credit-bar-track {
        width: 100%;
        height: 8px;
        background: rgba(0,0,0,0.08);
        border-radius: 100px;
        overflow: hidden;
    }
    .credit-bar-fill {
        height: 100%;
        border-radius: 100px;
        transition: width 0.6s cubic-bezier(0.4,0,0.2,1);
    }


    .step-badge {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 6px 14px;
        border-radius: 100px;
        font-size: 13px; font-weight: 600;
    }

    /* ── Filter Tabs ── */
    .filter-tabs {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        background: var(--hover);
        border-radius: 14px;
        padding: 6px;
        margin-bottom: 24px;
    }
    .filter-tab {
        padding: 8px 16px;
        border-radius: 10px;
        font-size: 14.5px;
        white-space: nowrap;
        font-weight: 600;
        color: var(--text-secondary);
        cursor: pointer;
        transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
        border: none;
        background: transparent;
        font-family: inherit;
        user-select: none;
        -webkit-user-select: none;
    }
    .filter-tab:hover:not(.active) {
        color: var(--text-primary);
        background: rgba(100,116,139,0.08);
    }
    .filter-tab:active {
        transform: scale(0.96);
    }
    .filter-tab.active {
        background: var(--tab-active-bg);
        color: var(--text-primary);
        box-shadow: var(--shadow-sm);
    }


    /* ── Inventory & Lots: Products/Lots mode switch ──
       A bigger, centered, brand-pink pair of pills — this is the top-level view
       switch for the whole page, so it gets more visual weight than an ordinary
       filter tab. Scoped to its own classes rather than touching .filter-tab,
       which is shared by every other filter row in the app. */
    .inv-mode-switch {
        display: flex;
        justify-content: center;
        gap: 18px;
        margin: 4px 0 26px;
    }
    .inv-mode-btn {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 16px 38px;
        border-radius: 100px;
        font-size: 19px;
        font-weight: 800;
        font-family: inherit;
        border: 2px solid var(--divider);
        background: var(--card-bg);
        color: var(--text-secondary);
        cursor: pointer;
        transition: all 0.25s cubic-bezier(0.34,1.56,0.64,1);
        box-shadow: var(--shadow-sm);
    }
    .inv-mode-btn .inv-mode-icon { font-size: 26px; line-height: 1; }
    .inv-mode-btn:hover:not(.active) {
        transform: translateY(-2px);
        border-color: #F3A5C8;
        color: var(--text-primary);
    }
    .inv-mode-btn.active {
        background: linear-gradient(135deg, #F3A5C8, var(--rose-light));
        color: white;
        border-color: transparent;
        transform: translateY(-2px) scale(1.04);
        animation: invModePulse 2.8s ease-in-out infinite;
    }
    @keyframes invModePulse {
        0%, 100% { box-shadow: 0 8px 22px rgba(243,165,200,0.45), 0 0 0 6px rgba(243,165,200,0.14); }
        50%      { box-shadow: 0 10px 30px rgba(243,165,200,0.6),  0 0 0 10px rgba(243,165,200,0.2); }
    }
    @media (prefers-reduced-motion: reduce) {
        .inv-mode-btn.active { animation: none; box-shadow: 0 8px 22px rgba(243,165,200,0.45), 0 0 0 6px rgba(243,165,200,0.14); }
    }

    /* ── Inventory & Lots: product-group divider row ──
       Separates one product's lots from the next inside the flat Lots table. */
    .lot-group-divider td {
        padding: 10px 16px !important;
        background: linear-gradient(90deg, rgba(243,165,200,0.22), rgba(243,165,200,0.03));
        border-left: 4px solid #F3A5C8;
        border-top: 1px solid rgba(243,165,200,0.3);
        border-bottom: 1px solid rgba(243,165,200,0.3);
        font-weight: 800;
        font-size: 14px;
        letter-spacing: 0.4px;
        color: var(--rose-light);
        cursor: default;
    }

    /* ─────────────────────────────────────────────────────────────────
       DIRECTORY MODULES (Clients / Suppliers / Workers) — shared
       premium search hero + symmetric 3-per-row card grid
    ───────────────────────────────────────────────────────────────── */
    .directory-search-hero {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 8px 12px 8px 26px;
        border-radius: 100px;
        background: var(--card-bg);
        backdrop-filter: var(--blur);
        -webkit-backdrop-filter: var(--blur);
        border: 1.5px solid var(--card-border);
        box-shadow: var(--shadow-glass);
        transition: all var(--transition);
    }
    .directory-search-hero:focus-within {
        border-color: var(--rose-light);
        box-shadow: 0 0 0 5px var(--rose-glass), var(--shadow-glass);
        transform: translateY(-1px);
    }
    .directory-search-hero .directory-search-icon {
        font-size: 22px;
        color: var(--text-tertiary);
        flex-shrink: 0;
        transition: color var(--transition);
    }
    .directory-search-hero:focus-within .directory-search-icon { color: var(--rose); }
    .directory-search-hero input {
        flex: 1;
        border: none;
        background: transparent;
        outline: none;
        font-family: inherit;
        font-size: 20px;
        font-weight: 500;
        color: var(--text-primary);
        padding: 10px 0;
        min-width: 0;
    }
    .directory-search-hero input::placeholder { color: var(--text-tertiary); font-weight: 400; }
    .directory-search-clear {
        width: 32px; height: 32px;
        border-radius: 50%;
        border: none;
        background: var(--hover-2);
        color: var(--text-secondary);
        font-size: 15px;
        display: flex; align-items: center; justify-content: center;
        cursor: pointer;
        flex-shrink: 0;
        transition: all var(--transition);
    }
    .directory-search-clear:hover { background: var(--rose); color: white; transform: scale(1.08); }
    .directory-search-count {
        flex-shrink: 0;
        font-size: 15px;
        font-weight: 700;
        color: var(--rose);
        background: var(--rose-glass);
        padding: 10px 18px;
        border-radius: 100px;
        white-space: nowrap;
    }

    .directory-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }
    @media (max-width: 1500px) { .directory-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 980px)  { .directory-grid { grid-template-columns: 1fr; } }

    .directory-card {
        display: flex;
        flex-direction: column;
        min-width: 0;
        border-radius: var(--r-lg);
        padding: 28px;
        cursor: pointer;
        transition: all var(--transition);
        height: 100%;
    }
    .directory-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-lg);
        border-color: rgba(159,18,57,0.25);
    }
    .directory-avatar {
        width: 56px; height: 56px;
        border-radius: 16px;
        background: linear-gradient(135deg, var(--rose) 0%, var(--accent) 100%);
        color: white;
        display: flex; align-items: center; justify-content: center;
        font-size: 20px; font-weight: 800;
        flex-shrink: 0;
        box-shadow: 0 4px 14px rgba(159,18,57,0.3);
    }
    .directory-stat-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin: 18px 0;
    }
    .directory-stat-tile {
        background: var(--surface-2);
        border: 1px solid var(--card-border);
        border-radius: var(--r-sm);
        padding: 12px 14px;
    }
    .directory-stat-tile .directory-stat-label {
        font-size: 12px;
        font-weight: 700;
        color: var(--text-tertiary);
        text-transform: uppercase;
        letter-spacing: 0.4px;
        margin-bottom: 4px;
    }
    .directory-stat-tile .directory-stat-value {
        font-size: 19px;
        font-weight: 800;
        color: var(--text-primary);
        letter-spacing: -0.3px;
    }

    /* ─────────────────────────────────────────────────────────────────
       MODAL DIALOG (wizard-overlay + wizard) — every popup/confirmation
       in the app shares this scaffolding. Every caller sets its own
       max-width inline; the dialog sizes to its content instead of
       forcing the full viewport, so a quick confirmation reads as a
       popup, not a navigation to a new page.
    ───────────────────────────────────────────────────────────────── */
    .wizard-overlay {
        position: fixed; inset: 0;
        background: rgba(15, 10, 20, 0.65);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        z-index: 9999;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px;
        overflow-y: auto;
    }
    .wizard {
        width: 100%;
        max-width: 640px;
        max-height: 90vh;
        background: var(--wizard-bg);
        backdrop-filter: blur(40px) saturate(200%);
        -webkit-backdrop-filter: blur(40px) saturate(200%);
        border: 1px solid var(--divider);
        border-radius: var(--r-lg);
        box-shadow: 0 25px 60px rgba(0,0,0,0.3);
        overflow-y: auto;
        animation: wizardIn 0.28s cubic-bezier(0.16, 1, 0.3, 1);
        margin: auto;
    }
    @keyframes wizardIn {
        from { opacity: 0; transform: scale(0.94) translateY(14px); }
        to   { opacity: 1; transform: scale(1) translateY(0); }
    }
    .wizard-header {
        padding: 30px 40px 24px;
        border-bottom: 1px solid var(--divider);
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: var(--wizard-header-bg);
        position: sticky;
        top: 0;
        z-index: 10;
    }
    .wizard-title { font-size: 28px; font-weight: 800; color: var(--text-primary); }
    .wizard-subtitle { font-size: 16px; color: var(--text-secondary); margin-top: 4px; }
    .wizard-close {
        width: 44px; height: 44px;
        border-radius: 12px;
        border: 1px solid var(--divider);
        background: var(--surface-2);
        cursor: pointer;
        display: flex; align-items: center; justify-content: center;
        font-size: 20px; color: var(--text-secondary);
        transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.15s ease, color 0.15s ease;
        user-select: none;
        -webkit-user-select: none;
    }
    .wizard-close:hover { background: var(--btn-ghost-hover-bg); color: var(--text-primary); }
    .wizard-close:active { transform: scale(0.92); }


    /* Step indicator */
    .wizard-steps {
        display: flex;
        align-items: center;
        padding: 24px 40px;
        background: transparent;
    }
    .wizard-step-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        flex: 1;
        min-width: 100px;
        transition: all 0.3s ease;
    }
    .wizard-step-item:not(:last-child)::after {
        content: '';
        position: absolute;
        top: 22px;
        left: 60%;
        right: -40%;
        height: 2px;
        background: var(--divider);
        z-index: 0;
    }
    .wizard-step-item.done:not(:last-child)::after,
    .wizard-step-item.active:not(:last-child)::after {
        background: linear-gradient(90deg, var(--rose) 0%, rgba(159,18,57,0.3) 100%);
    }
    .step-circle {
        width: 44px; height: 44px;
        border-radius: 50%;
        background: var(--hover-2);
        border: 2px solid var(--divider);
        display: flex; align-items: center; justify-content: center;
        font-size: 15px; font-weight: 700;
        color: var(--text-tertiary);
        position: relative; z-index: 1;
        transition: all var(--transition);
    }
    .wizard-step-item.active .step-circle {
        background: var(--rose);
        border-color: var(--rose);
        color: white;
        box-shadow: 0 4px 12px rgba(159,18,57,0.4);
    }
    .wizard-step-item.done .step-circle {
        background: linear-gradient(135deg, #059669 0%, #10b981 100%);
        border-color: #059669;
        color: white;
    }
    .step-label {
        font-size: 13px; font-weight: 600;
        color: var(--text-tertiary);
        margin-top: 8px;
        text-align: center;
        line-height: 1.3;
        transition: all 0.3s ease;
    }
    .wizard-step-item.active .step-label { color: var(--rose); }
    .wizard-step-item.done .step-label { color: #059669; }

    /* Wizard body */
    .wizard-body { padding: 40px; flex: 1; overflow-y: auto; }
    .wizard-footer {
        padding: 24px 40px;
        border-top: 1px solid var(--divider);
        background: var(--surface-2);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
    }

    /* ── Form controls ── */
    /* One field scale for the whole app (2026-09-24): 46 px fields, 15 px text, the label
       right above — the same geometry on every form, so nothing looks stretched or cramped. */
    .form-group { margin-bottom: 18px; }
    .form-label { display: block; font-size: 13.5px; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; }
    .form-control {
        width: 100%;
        min-height: 46px;
        padding: 11px 14px;
        border: 1.5px solid var(--field-border);
        border-radius: var(--r-sm);
        font-size: 15px;
        line-height: 1.35;
        font-family: inherit;
        color: var(--text-primary);
        background: var(--field-bg);
        transition: all var(--transition);
        outline: none;
        appearance: none;
    }
    .form-control::placeholder { color: var(--text-tertiary); }
    .form-control:focus {
        border-color: var(--rose-light);
        background: var(--field-focus-bg);
        box-shadow: 0 0 0 4px var(--rose-glass);
    }
    .form-control option { color: var(--text-primary); background: var(--bg2); }
    textarea.form-control { resize: vertical; min-height: 80px; line-height: 1.45; }
    /* appearance:none hid the arrow — a select looked like a text field. */
    select.form-control { padding-right: 38px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238e8e93' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 12px 8px; }
    select.form-control[multiple] { background-image: none; padding-right: 14px; }
    .form-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
    .form-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }

    /* ── Line Items ── */
    .line-item {
        display: grid;
        grid-template-columns: 2fr 1fr 1fr 1fr auto;
        gap: 12px;
        align-items: start;
        padding: 18px;
        border-radius: var(--r-md);
        background: var(--surface-2);
        border: 1px solid var(--card-border);
        margin-bottom: 12px;
        position: relative;
    }
    .line-item.out-of-stock {
        border-color: rgba(217,119,6,0.3);
        background: rgba(254,243,199,0.5);
    }
    .stock-warning {
        grid-column: 1 / -1;
        display: flex; align-items: center; gap: 8px;
        font-size: 14px; color: #92400e;
        background: rgba(251,191,36,0.2);
        border: 1px solid rgba(251,191,36,0.4);
        padding: 10px 14px;
        border-radius: 8px;
        margin-top: 6px;
    }

    /* ── Alert Boxes ── */
    .alert {
        display: flex; align-items: flex-start; gap: 10px;
        padding: 14px 16px;
        border-radius: var(--r-sm);
        font-size: 13px;
        margin-bottom: 16px;
    }
    .alert-warning { background: rgba(251,191,36,0.12); border: 1px solid rgba(251,191,36,0.3); color: #92400e; }
    .alert-success { background: rgba(5,150,105,0.1); border: 1px solid rgba(5,150,105,0.2); color: #065f46; }
    .alert-error { background: rgba(220,38,38,0.08); border: 1px solid rgba(220,38,38,0.2); color: #991b1b; }
    .alert-info { background: rgba(37,99,235,0.07); border: 1px solid rgba(37,99,235,0.15); color: #1e40af; }
    :root[data-theme="dark"] .alert-warning { color: #fcd34d; }
    :root[data-theme="dark"] .alert-success { color: #6ee7b7; }
    :root[data-theme="dark"] .alert-error { color: #fca5a5; }
    :root[data-theme="dark"] .alert-info { color: #93c5fd; }

    /* ── Proforma Invoice Preview ── */
    /* Styles the Offer Summary card. Its background used to be pinned to white while the
       text followed the theme, which left the whole table unreadable in dark mode. It is
       an in-app card, not a printed page — the printable documents are rendered separately
       under .printable-document — so it takes the themed surface. */
    .proforma-preview {
        background: var(--card-bg);
        border-radius: var(--r-md);
        border: 1px solid var(--divider);
        overflow: hidden;
        box-shadow: var(--shadow-md);
    }
    /* The header/meta/table rules that used to live here styled the inline proforma
       preview, which was removed — the proforma is reached from its own button and
       printed through .printable-document. */
    .proforma-total {
        padding: 20px 24px;
        display: flex;
        justify-content: flex-end;
        border-top: 1px solid var(--divider);
        background: rgba(0,0,0,0.02);
    }
    .proforma-total-box { text-align: right; }
    .proforma-total-label { font-size: 12px; color: var(--text-tertiary); font-weight: 600; }
    .proforma-total-value { font-size: 28px; font-weight: 800; color: var(--rose); margin-top: 4px; }

    /* ── Shipping Checklist ── */
    .checklist-item {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 14px 18px;
        border-radius: var(--r-sm);
        background: rgba(255,255,255,0.6);
        border: 1px solid rgba(255,255,255,0.5);
        margin-bottom: 8px;
        transition: all var(--transition);
    }
    .checklist-item.checked {
        background: rgba(5,150,105,0.06);
        border-color: rgba(5,150,105,0.2);
    }
    .check-box {
        width: 22px; height: 22px;
        border-radius: 7px;
        border: 2px solid var(--divider);
        display: flex; align-items: center; justify-content: center;
        cursor: pointer;
        transition: all var(--transition);
        flex-shrink: 0;
    }
    .check-box.checked {
        background: var(--green);
        border-color: var(--green);
        color: white;
    }
    .checklist-name { flex: 1; font-size: 14px; font-weight: 500; }
    .checklist-item.checked .checklist-name { text-decoration: line-through; color: var(--text-tertiary); }
    .attach-btn {
        display: flex; align-items: center; gap: 5px;
        font-size: 12px; font-weight: 600;
        color: var(--text-tertiary);
        padding: 5px 10px;
        border-radius: 8px;
        border: 1px solid var(--divider);
        background: rgba(255,255,255,0.8);
        cursor: pointer;
        transition: all var(--transition);
    }
    .attach-btn:hover { color: var(--rose); border-color: rgba(159,18,57,0.3); }
    .attach-btn.has-file { color: var(--green); border-color: rgba(5,150,105,0.3); background: rgba(5,150,105,0.06); }

    /* ── AR Aging ── */
    .ar-row {
        display: grid;
        grid-template-columns: 1fr 1fr auto auto auto;
        gap: 12px;
        align-items: center;
        padding: 16px 20px;
        border-radius: var(--r-sm);
        background: rgba(255,255,255,0.6);
        border: 1px solid rgba(255,255,255,0.5);
        margin-bottom: 8px;
        transition: all var(--transition);
    }
    .ar-row:hover { background: rgba(255,255,255,0.85); transform: translateX(2px); }
    .overdue-indicator {
        display: flex; align-items: center; gap: 6px;
        padding: 6px 12px;
        border-radius: 100px;
        font-size: 12px; font-weight: 700;
    }
    .overdue-0 { background: rgba(5,150,105,0.1); color: var(--green); }
    .overdue-1 { background: rgba(217,119,6,0.1); color: var(--gold); }
    .overdue-2 { background: rgba(234,88,12,0.1); color: var(--orange); }
    .overdue-3 { background: rgba(220,38,38,0.1); color: #dc2626; }

    /* ── Payment method cards ── */
    /* Auto-fit rather than a fixed 3 columns: the method list mirrors the DB enum and
       grew from 3 to 6, and hard-coding the count would have squashed them. */
    .payment-method-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 10px;
        margin-bottom: 20px;
    }
    /* These backgrounds were pinned to white while the text colour follows the theme, so
       in dark mode the labels sat near-invisible on a pale card. Tokenised so the card
       tracks its own theme. */
    .payment-method-card {
        padding: 14px 12px;
        border-radius: var(--r-sm);
        border: 2px solid var(--divider);
        background: var(--card-bg);
        cursor: pointer;
        transition: all var(--transition);
        text-align: center;
        font-size: 13px;
        font-weight: 600;
        color: var(--text-secondary);
    }
    .payment-method-card:hover { border-color: var(--rose); background: var(--hover); }
    .payment-method-card.selected {
        border-color: var(--rose);
        background: var(--rose-glass);
        color: var(--rose);
    }
    .payment-method-card .pm-icon { font-size: 22px; margin-bottom: 6px; }

    /* ── Credit Limit Bar ── */
    .credit-bar-track {
        height: 8px;
        background: rgba(0,0,0,0.08);
        border-radius: 100px;
        overflow: hidden;
        margin-top: 8px;
    }
    .credit-bar-fill {
        height: 100%;
        border-radius: 100px;
        transition: width 0.6s cubic-bezier(0.34,1.56,0.64,1);
    }

    /* ── Sample approval ── */
    .sample-choice {
        flex: 1;
        padding: 20px;
        border-radius: var(--r-md);
        border: 2px solid var(--divider);
        background: rgba(255,255,255,0.6);
        cursor: pointer;
        transition: all var(--transition);
        text-align: center;
        font-weight: 700;
    }
    .sample-choice:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
    .sample-choice.approve { color: var(--green); }
    .sample-choice.approve:hover, .sample-choice.approve.selected {
        border-color: var(--green);
        background: rgba(5,150,105,0.08);
    }
    .sample-choice.reject { color: #dc2626; }
    .sample-choice.reject:hover, .sample-choice.reject.selected {
        border-color: #dc2626;
        background: rgba(220,38,38,0.06);
    }
    .sample-icon { font-size: 36px; margin-bottom: 8px; }

    /* ── Deal detail view (read mode) ── */
    .deal-step-timeline {
        position: relative;
        padding-left: 36px;
    }
    .deal-step-timeline::before {
        content: '';
        position: absolute;
        left: 14px; top: 0; bottom: 0;
        width: 3px;
        background: var(--divider);
        border-radius: 2px;
    }
    .timeline-item {
        position: relative;
        padding-bottom: 28px;
        transition: all 0.3s ease;
    }
    .timeline-item:hover { transform: translateX(4px); }
    .timeline-dot {
        position: absolute;
        left: -30px;
        top: 6px;
        width: 18px; height: 18px;
        border-radius: 50%;
        border: 2px solid white;
        box-shadow: 0 0 0 2px var(--divider);
    }

    /* ── Animations ── */
    @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
    .fade-in { animation: fadeIn 0.3s ease forwards; }


    @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }
    .pulsing { animation: pulse 1.5s ease infinite; }

    /* ── Notification center ─────────────────────────────────────────────
       Every message shows in its usual inline spot AND as a centered popup so
       nobody wonders whether a click did anything. Success/info popups float
       (the page stays clickable, auto-dismiss with a progress bar); errors and
       confirm/prompt dialogs block until answered. The 🔔 keeps the history. */
    .notice-layer {
        position: fixed; inset: 0; z-index: 10001;
        display: flex; align-items: center; justify-content: center;
        padding: 24px; pointer-events: none;
    }
    .notice-layer.blocking { pointer-events: auto; background: rgba(15,10,20,0.35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
    .notice {
        pointer-events: auto;
        width: 100%; max-width: 460px;
        background: var(--wizard-bg);
        backdrop-filter: blur(40px) saturate(200%); -webkit-backdrop-filter: blur(40px) saturate(200%);
        border: 1px solid var(--divider);
        border-radius: var(--r-lg);
        box-shadow: 0 25px 60px rgba(0,0,0,0.28);
        padding: 28px 30px 24px;
        text-align: center;
        animation: wizardIn 0.28s cubic-bezier(0.34,1.56,0.64,1);
        position: relative; overflow: hidden;
    }
    .notice.leaving { animation: noticeOut 0.22s ease forwards; }
    @keyframes noticeOut { to { opacity: 0; transform: scale(0.94) translateY(8px); } }
    .notice-icon {
        width: 64px; height: 64px; border-radius: 20px; margin: 0 auto 14px;
        display: flex; align-items: center; justify-content: center; font-size: 32px;
    }
    .notice-success .notice-icon { background: rgba(5,150,105,0.12); }
    .notice-error   .notice-icon { background: rgba(220,38,38,0.12); }
    .notice-warning .notice-icon { background: rgba(217,119,6,0.14); }
    .notice-info    .notice-icon { background: rgba(37,99,235,0.12); }
    .notice-confirm .notice-icon { background: rgba(159,18,57,0.10); }
    .notice-title { font-size: 19px; font-weight: 800; letter-spacing: -0.01em; color: var(--text-primary); margin-bottom: 6px; }
    .notice-msg { font-size: 15px; line-height: 1.5; color: var(--text-secondary); white-space: pre-line; }
    .notice-details {
        margin: 14px 0 0; padding: 12px 14px; text-align: left;
        background: var(--surface-2); border: 1px solid var(--divider); border-radius: var(--r-sm);
        font-size: 13px; color: var(--text-secondary); list-style: none;
        display: flex; flex-direction: column; gap: 4px; max-height: 180px; overflow-y: auto;
    }
    .notice-actions { display: flex; gap: 10px; justify-content: center; margin-top: 20px; }
    .notice-actions .btn { min-width: 110px; }
    .notice-progress { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--rose); opacity: 0.55; animation: noticeProgress linear forwards; }
    .notice-success .notice-progress { background: var(--green); }
    .notice-info    .notice-progress { background: var(--blue); }
    .notice-warning .notice-progress { background: var(--gold); }
    @keyframes noticeProgress { from { width: 100%; } to { width: 0%; } }
    .notice input.form-control { text-align: left; margin-top: 14px; }

    .notif-badge {
        position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 6px;
        border-radius: 10px; background: var(--rose); color: #fff; font-size: 11px; font-weight: 800;
        display: flex; align-items: center; justify-content: center; border: 2px solid var(--topbar-bg, #fff);
    }
    .notif-panel {
        position: absolute; right: 0; top: calc(100% + 8px); width: 360px; max-height: 70vh; overflow-y: auto;
        border-radius: 16px; padding: 8px; z-index: 60; box-shadow: 0 12px 32px rgba(0,0,0,0.12);
        background: var(--wizard-bg); backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%);
    }
    .notif-row { display: flex; gap: 10px; padding: 10px 12px; border-radius: 12px; align-items: flex-start; }
    .notif-row:hover { background: var(--hover); }
    .notif-row .t { font-weight: 700; font-size: 13px; color: var(--text-primary); }
    .notif-row .m { font-size: 12px; color: var(--text-secondary); line-height: 1.4; }
    .notif-row .w { font-size: 11px; color: var(--text-tertiary); margin-top: 2px; }
    .filter-tab .count { font-size: 12px; font-weight: 700; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--surface-2); color: var(--text-tertiary); }
    .filter-tab.active .count { background: rgba(159,18,57,0.10); color: var(--rose); }

    /* ── Warehouse maps ──────────────────────────────────────────────────────
       A warehouse page: hero (name, storage type, live stats), toolbar (search + legend),
       the canvas, and a slide-in drawer for the clicked position. Two renderers:
       .floor = pallets in aisles (IBC tote fills a pallet, drums sit in numbered slots),
       .racks = shelf rows with positions holding chips. */
    .wh-card { padding: 22px; cursor: pointer; transition: transform .15s, box-shadow .15s; }
    .wh-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }

    .wh-hero {
        display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
        padding: 18px 22px; margin-bottom: 14px; border-radius: var(--r-lg);
        background: linear-gradient(120deg, color-mix(in srgb, var(--wh-color, var(--rose)) 14%, var(--card-bg)), var(--card-bg) 70%);
        border: 1px solid var(--card-border, var(--divider)); box-shadow: var(--shadow-glass);
    }
    .wh-hero-icon { width: 60px; height: 60px; border-radius: 18px; display: flex; align-items: center; justify-content: center; font-size: 30px; background: color-mix(in srgb, var(--wh-color, var(--rose)) 16%, transparent); flex-shrink: 0; }
    .wh-hero-title { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .wh-hero-code { font-family: monospace; font-size: 15px; font-weight: 700; color: var(--text-tertiary); margin-left: 6px; }
    .wh-hero-sub { font-size: 13px; color: var(--text-secondary); margin-top: 2px; }
    .wh-hero-stats { display: flex; gap: 22px; }
    .wh-hero-stats .v { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
    .wh-hero-stats .v span { font-size: 14px; color: var(--text-tertiary); font-weight: 600; }
    .wh-hero-stats .l { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-tertiary); font-weight: 700; }

    .wh-toolbar { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
    .wh-legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--text-secondary); }
    .wh-legend span { display: inline-flex; align-items: center; gap: 6px; }
    .wh-legend i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
    .wh-legend i.ibc { border-radius: 3px; background: repeating-linear-gradient(45deg, var(--text-tertiary) 0 2px, transparent 2px 5px); }
    .wh-banner { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; margin-bottom: 12px; border-radius: var(--r-sm); background: rgba(5,150,105,0.10); border: 1px solid rgba(5,150,105,0.3); color: var(--text-primary); font-size: 14px; position: sticky; top: 76px; z-index: 5; backdrop-filter: blur(10px); }

    .wh-canvas { display: flex; flex-direction: column; gap: 16px; padding: 20px; border-radius: var(--r-lg); border: 1px solid var(--card-border, var(--divider)); background: var(--card-bg); box-shadow: var(--shadow-glass); }
    .wh-canvas.floor { background-color: var(--card-bg); background-image: radial-gradient(color-mix(in srgb, var(--text-tertiary) 28%, transparent) 1px, transparent 1px); background-size: 22px 22px; }
    .wh-row { display: flex; align-items: stretch; gap: 12px; }
    .wh-row-label {
        width: 64px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
        color: var(--text-tertiary); background: var(--surface-2); border: 1px solid var(--divider); border-radius: 16px;
    }
    .wh-row-label .k { font-size: 10px; letter-spacing: .1em; font-weight: 800; }
    .wh-row-label .n { font-size: 24px; font-weight: 800; color: var(--text-primary); line-height: 1; }
    .wh-row-label .c { font-size: 11px; font-weight: 600; }
    .wh-shelf, .wh-aisle { flex: 1; min-width: 0; display: flex; gap: 10px; padding: 12px; overflow-x: auto; border-radius: 18px; border: 1px solid var(--divider); }
    .wh-shelf { background: linear-gradient(180deg, var(--surface-2), transparent 60%), var(--card-bg); box-shadow: inset 0 -6px 0 color-mix(in srgb, var(--text-tertiary) 25%, transparent); }
    .wh-aisle { background: color-mix(in srgb, var(--surface-2) 70%, transparent); border-style: dashed; }

    /* shelves */
    .wh-slot {
        width: 172px; min-height: 124px; flex-shrink: 0; position: relative; cursor: pointer;
        border-radius: 14px; border: 1.5px solid var(--divider); background: var(--card-bg); padding: 10px 9px 8px;
        display: flex; flex-direction: column; gap: 5px; transition: transform .15s, box-shadow .15s, border-color .15s, opacity .2s;
    }
    .wh-slot.empty { border-style: dashed; background: transparent; }
    .wh-slot:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--text-tertiary); }
    .wh-slot.selected { border-color: var(--rose); box-shadow: 0 0 0 3px rgba(159,18,57,0.16); }
    .wh-slot.dim { opacity: 0.25; }
    .wh-slot.target { border-color: var(--green); border-style: dashed; }
    .wh-slot.target:hover { background: rgba(5,150,105,0.08); }
    .wh-pos { position: absolute; top: 6px; right: 9px; font-size: 11px; font-weight: 800; color: var(--text-tertiary); }
    .wh-chip { border-radius: 9px; padding: 6px 8px; font-size: 12px; line-height: 1.25; border-left: 3px solid; background: var(--surface-2); min-width: 0; }
    .wh-chip .p { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-primary); }
    .wh-chip .l { color: var(--text-tertiary); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .wh-chip .q { font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }

    /* pallets */
    .wh-pallet {
        width: 176px; flex-shrink: 0; cursor: pointer; border-radius: 14px; overflow: hidden; position: relative;
        border: 1.5px solid var(--divider); background: var(--card-bg);
        transition: transform .15s, box-shadow .15s, border-color .15s, opacity .2s;
    }
    .wh-pallet:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--text-tertiary); }
    .wh-pallet.empty .wh-pallet-load { background: transparent; }
    .wh-pallet.selected { border-color: var(--rose); box-shadow: 0 0 0 3px rgba(159,18,57,0.16); }
    .wh-pallet.dim { opacity: 0.25; }
    .wh-pallet.target { border-color: var(--green); border-style: dashed; }
    .wh-pallet.target:hover { background: rgba(5,150,105,0.06); }
    .wh-pallet.blocked { opacity: 0.45; cursor: not-allowed; }
    .wh-pallet-load { padding: 10px 10px 8px; min-height: 132px; display: flex; align-items: center; justify-content: center; }
    .wh-pallet-base {
        display: flex; justify-content: space-between; align-items: center; padding: 5px 10px; font-size: 11px; font-weight: 800;
        color: #5b4423; background: repeating-linear-gradient(90deg, #d9b98a 0 14px, #c9a874 14px 18px); border-top: 2px solid #b48f5c;
    }
    :root[data-theme="dark"] .wh-pallet-base { color: #f1e2c8; background: repeating-linear-gradient(90deg, #6b5330 0 14px, #57431f 14px 18px); border-top-color: #8a6b3d; }
    .wh-pallet-cnt { font-weight: 700; opacity: .85; }
    .wh-drums { display: grid; gap: 8px 10px; width: 100%; }
    .wh-drum { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; border-radius: 10px; padding: 3px; }
    .wh-drum-top {
        width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px;
        border: 3px solid; box-shadow: inset 0 -6px 0 rgba(0,0,0,0.12), inset 0 3px 0 rgba(255,255,255,0.35), 0 2px 4px rgba(0,0,0,0.18);
    }
    .wh-drum-lbl { text-align: center; line-height: 1.15; min-width: 0; width: 100%; }
    .wh-drum-lbl .p { font-size: 10.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-primary); }
    .wh-drum-lbl .q { font-size: 10.5px; color: var(--text-tertiary); font-weight: 700; font-variant-numeric: tabular-nums; }
    .wh-drum.empty { justify-content: center; }
    .wh-drum.empty span { width: 46px; height: 46px; border-radius: 50%; border: 2px dashed var(--divider); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: var(--text-tertiary); opacity: .7; }
    .wh-drum.empty.target span { border-color: var(--green); color: var(--green); opacity: 1; }
    .wh-drum.empty.target:hover { background: rgba(5,150,105,0.12); }
    .wh-ibc { width: 100%; height: 124px; border-radius: 12px; border: 2px solid; position: relative; overflow: hidden; display: flex; align-items: flex-end; }
    .wh-ibc-cage { position: absolute; inset: 0; background-image: linear-gradient(color-mix(in srgb, var(--text-tertiary) 22%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--text-tertiary) 22%, transparent) 1px, transparent 1px); background-size: 16px 16px; opacity: .8; }
    .wh-ibc-label { position: relative; padding: 8px 10px; width: 100%; background: linear-gradient(transparent, var(--card-bg) 40%); }
    .wh-ibc-label .p { font-size: 12px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .wh-ibc-label .l { font-size: 11px; color: var(--text-tertiary); }
    .wh-ibc-label .q { font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }

    /* drawer */
    .wh-drawer {
        position: fixed; top: 0; right: 0; height: 100vh; width: min(440px, 100vw); z-index: 95; display: flex; flex-direction: column;
        background: var(--wizard-bg); backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%);
        border-left: 1px solid var(--divider); box-shadow: -20px 0 50px rgba(0,0,0,0.18); animation: whDrawerIn .22s cubic-bezier(.2,.8,.2,1);
    }
    @keyframes whDrawerIn { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }
    .wh-drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px 14px; border-bottom: 1px solid var(--divider); }
    .wh-drawer-body { padding: 16px 20px 30px; overflow-y: auto; flex: 1; }
    .wh-drawer-section { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--text-tertiary); margin: 4px 0 8px; display: flex; align-items: center; gap: 8px; }
    .wh-drawer-section span { background: var(--surface-2); border: 1px solid var(--divider); border-radius: 999px; padding: 1px 8px; font-size: 11px; color: var(--text-secondary); }

    .wh-stype-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .wh-stype { border: 1.5px solid var(--divider); border-radius: 14px; padding: 12px 14px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; transition: all .15s; }
    .wh-stype:hover { border-color: var(--text-tertiary); }
    .wh-stype.on { border-color: var(--rose); background: rgba(159,18,57,0.06); box-shadow: 0 0 0 3px rgba(159,18,57,0.12); }

    /* ── Blend workbench ── */
    .blend-pick { border-left: 3px solid; border-radius: 10px; padding: 8px 10px; margin-bottom: 6px; background: var(--card-bg); border-top: 1px solid var(--divider); border-right: 1px solid var(--divider); border-bottom: 1px solid var(--divider); }
    .blend-pick:hover { background: var(--hover); }
    .blend-line { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; border-left: 4px solid; border-radius: 12px; padding: 10px 12px; }
    .blend-yield { border: 1px solid var(--divider); border-radius: 12px; padding: 10px 14px; background: var(--surface-2); display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
    .blend-yield .row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
    .blend-yield .row.total { border-top: 1px solid var(--divider); padding-top: 6px; font-size: 16px; }

    /* ── Divider ── */
    .divider { height: 1px; background: var(--divider); margin: 20px 0; }

    /* ── Empty states (one look everywhere) ── */
    .empty-state { padding: 56px 24px; text-align: center; color: var(--text-tertiary); }
    .empty-state-icon { font-size: 46px; margin-bottom: 12px; line-height: 1; }
    .empty-state-title { font-weight: 700; font-size: 18px; color: var(--text-primary); margin-bottom: 6px; }
    .empty-state-hint { font-size: 14px; max-width: 460px; margin: 0 auto; line-height: 1.5; }
    .empty-state-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }

    /* ── "⋯ More" action menu ── */
    .action-menu {
        position: absolute; top: calc(100% + 8px); right: 0; min-width: 260px; z-index: 60;
        background: var(--solid-surface); border: 1px solid var(--divider); border-radius: 14px;
        box-shadow: var(--shadow-lg); padding: 6px; animation: fadeIn 0.15s ease;
    }
    .action-menu-item {
        display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
        padding: 10px 12px; border-radius: 10px; border: none; background: transparent; cursor: pointer;
        font-family: inherit; font-size: 14px; font-weight: 600; color: var(--text-primary);
        transition: background var(--transition);
    }
    .action-menu-item:hover { background: var(--hover); }
    .action-menu-item small { display: block; font-weight: 500; font-size: 12px; color: var(--text-tertiary); margin-top: 1px; }
    .action-menu-icon { width: 28px; height: 28px; border-radius: 8px; background: var(--surface-2); display: inline-flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }
    .btn-ghost.active { background: var(--btn-ghost-hover-bg); color: var(--text-primary); }

    /* ── Responsive ── */
    .menu-btn { display: none; }
    .nav-scrim { display: none; }
    @media (max-width: 1280px) {
        .sidebar { width: 240px; min-width: 240px; }
        .page, .page-view { padding: 24px; }
        .topbar { padding: 0 20px; }
    }
    @media (max-width: 1180px) {
        .detail-grid { grid-template-columns: minmax(0, 1fr) !important; }
        .user-menu-name { display: none; }
    }
    @media (max-width: 900px) {
        /* Sidebar becomes a drawer opened from the ☰ button in the top bar. */
        .menu-btn { display: flex; flex-shrink: 0; }
        .sidebar {
            position: fixed; top: 0; bottom: 0; left: 0; z-index: 120;
            width: 280px; min-width: 280px;
            transform: translateX(-100%);
            transition: transform var(--transition);
            box-shadow: none;
        }
        .sidebar.open { transform: translateX(0); box-shadow: 0 0 60px rgba(0,0,0,0.25); }
        .nav-scrim { display: block; position: fixed; inset: 0; background: rgba(0,0,0,0.35); z-index: 110; animation: fadeIn 0.2s ease; }
        .page, .page-view { padding: 16px; }
        .page-title { font-size: 26px; }
        .kpi-grid, .directory-grid { grid-template-columns: 1fr 1fr; }
        .form-grid-2, .form-grid-3 { grid-template-columns: minmax(0, 1fr); }
        .wizard { margin: 10px; border-radius: var(--r-lg); }
        .topbar-actions { gap: 8px; }
    }
    @media (max-width: 600px) {
        .kpi-grid, .directory-grid { grid-template-columns: 1fr; }
        .global-search { padding: 9px 10px 9px 14px; }
        .global-search input { font-size: 14px; }
    }
    /* ── Offer step ── */
    .offer-card {
        background: var(--card-bg);
        border: 1.5px solid var(--divider);
        border-radius: 16px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.06);
        overflow: hidden;
    }
    .offer-card-head {
        display: flex; justify-content: space-between; align-items: center;
        padding: 16px 24px;
        background: var(--rose-glass);
        border-bottom: 1px solid var(--divider);
    }
    .offer-card-body { padding: 20px 24px; overflow-x: auto; }
    .offer-terms-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 20px 28px;
    }
    .offer-term-label {
        font-size: 13px; font-weight: 700; letter-spacing: 0.4px;
        text-transform: uppercase; color: var(--text-tertiary);
        margin-bottom: 4px;
    }
    .offer-term-value {
        font-size: 15px; color: var(--text-primary);
        white-space: pre-wrap; line-height: 1.5;
    }
    /* An unset term is a to-do, not a value — say so without shouting. */
    .offer-term-value.empty { color: var(--text-tertiary); font-style: italic; }

    /* ── Terms sections — groups a flat field list into distinct, scannable blocks.
       Accent colors deliberately mirror the document buttons above (gold=proforma,
       green=invoice) so Terms visually maps onto what it drives. */
    .offer-term-subcard {
        border: 1px solid var(--divider);
        border-left: 4px solid var(--rose);
        border-radius: var(--r-sm);
        background: var(--surface-2);
        padding: 18px 22px;
        margin-bottom: 18px;
    }
    .offer-term-subcard:last-child { margin-bottom: 0; }
    .offer-term-subcard-head {
        display: flex; align-items: center; gap: 8px;
        font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px;
        color: var(--rose);
        margin-bottom: 16px;
    }
    .offer-term-subcard-head span:first-child { font-size: 15px; }
    .offer-term-subcard.accent-proforma { border-left-color: var(--gold); }
    .offer-term-subcard.accent-proforma .offer-term-subcard-head { color: var(--gold); }
    .offer-term-subcard.accent-invoice { border-left-color: var(--green); }
    .offer-term-subcard.accent-invoice .offer-term-subcard-head { color: var(--green); }

    /* ── Generated document buttons ──
       The payoff of the offer step: big, unmistakable, and impossible to confuse with
       each other. Deliberately larger than any other control on the screen. */
    .doc-button-row {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 16px;
        margin-bottom: 24px;
    }
    .doc-button {
        display: flex; align-items: center; gap: 16px;
        padding: 22px 24px;
        border-radius: var(--r-md);
        border: 2px solid var(--divider);
        background: var(--card-bg);
        cursor: pointer;
        text-align: left;
        font-family: inherit;
        transition: all var(--transition);
    }
    .doc-button-icon { font-size: 32px; line-height: 1; }
    .doc-button-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
    .doc-button-title { font-size: 18px; font-weight: 800; color: var(--text-primary); }
    .doc-button-sub {
        font-size: 14px; color: var(--text-tertiary);
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .doc-button:hover:not(:disabled) {
        transform: translateY(-3px);
        border-color: var(--rose);
        box-shadow: 0 8px 24px rgba(159,18,57,0.18), 0 0 28px 4px var(--glow-core);
    }
    .doc-button:active:not(:disabled) { transform: translateY(-1px); }
    .doc-button:disabled { opacity: 0.5; cursor: not-allowed; }
    .doc-button.proforma:hover:not(:disabled) { border-color: var(--gold); }
    .doc-button.invoice:hover:not(:disabled)  { border-color: var(--green); }

    /* ── Drag and Drop File Upload Zones ── */
    .drag-drop-zone {
        border: 2px dashed var(--divider);
        border-radius: var(--r-md);
        padding: 24px 20px;
        text-align: center;
        background: var(--surface-2);
        cursor: pointer;
        transition: all 0.2s ease;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        position: relative;
        user-select: none;
        box-sizing: border-box;
        width: 100%;
    }
    .drag-drop-zone:hover {
        border-color: var(--rose-light);
        background: var(--card-bg);
    }
    .drag-drop-zone.active {
        border-color: var(--rose) !important;
        background: rgba(159,18,57,0.08) !important;
        transform: scale(1.01);
        box-shadow: 0 0 0 4px rgba(159,18,57,0.18);
    }
    .drag-drop-zone.active.link {
        border-color: var(--gold) !important;
        background: rgba(217,119,6,0.08) !important;
        box-shadow: 0 0 0 4px rgba(217,119,6,0.18);
        cursor: no-drop;
    }
    .drag-drop-zone.compact {
        padding: 12px 16px;
        flex-direction: row;
        gap: 12px;
        text-align: left;
        justify-content: flex-start;
    }
    .drag-drop-icon {
        font-size: 28px;
        line-height: 1;
        transition: transform 0.2s;
    }
    .drag-drop-zone.compact .drag-drop-icon {
        font-size: 22px;
    }
    .drag-drop-zone.active .drag-drop-icon {
        transform: translateY(-2px) scale(1.15);
    }
    .drag-drop-title {
        font-size: 14px;
        font-weight: 700;
        color: var(--text-primary);
    }
    .drag-drop-hint {
        font-size: 12px;
        color: var(--text-tertiary);
        margin-top: 2px;
    }

    /* ── Print Styles ── */
    /* Screen-hidden sheet that becomes the printed page (stock take count sheet) */
    .print-only-sheet { display: none; }
    @media print { .print-only-sheet { display: block !important; } }

    /* ── QR label sheets (A4) ── */
    .label-sheet { display: grid; background: white; color: #111; width: 210mm; box-sizing: border-box; }
    .label-sheet.s70  { grid-template-columns: repeat(3, 70mm); grid-auto-rows: 37mm; padding-top: 0.5mm; }
    .label-sheet.s105 { grid-template-columns: repeat(2, 105mm); grid-auto-rows: 74.25mm; }
    .label { box-sizing: border-box; padding: 2.5mm 3mm; display: flex; align-items: center; gap: 2.5mm; overflow: hidden; break-inside: avoid; page-break-inside: avoid; outline: 0.2mm dashed #cbd5e1; outline-offset: -0.1mm; font-family: 'Inter', system-ui, sans-serif; color: #111; }
    .label.empty { outline-color: #eee; }
    .label-text { min-width: 0; flex: 1; }
    .label-sheet.print-only { display: none; }
    @media print {
        @page { margin: 0; size: A4 portrait; }
        body * { visibility: hidden; }
        .printable-document, .printable-document * { visibility: visible; }
        .doc-print-root .label-sheet.print-only, .doc-print-root .label-sheet.print-only * { visibility: visible; }
        .doc-print-root .label-sheet.print-only { display: grid; position: absolute; left: 0; top: 0; margin: 0; padding: 0; }
        .label { outline: none !important; }
        /* a fixed ancestor would clip printing to one page — sheets can span several */
        .doc-print-root { position: static !important; height: auto !important; overflow: visible !important; backdrop-filter: none !important; background: white !important; }
        .printable-document {
            position: absolute; left: 0; top: 0;
            width: 100%; height: 100%; margin: 0; padding: 40px;
            background: white !important;
            color: black !important;
            box-shadow: none !important;
        }
        .no-print { display: none !important; }
        * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
        body::before, body::after { display: none !important; }
    }

/* ── Duplicate-invoice guard (2026-09-21): the same bill must never be entered, uploaded or paid twice ── */
.dup-number-input { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 700; letter-spacing: 0.02em; }
.dup-number-chip { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 800; font-size: 15px; padding: 4px 10px; border-radius: 8px; background: rgba(37,99,235,0.08); border: 1px solid rgba(37,99,235,0.25); }
.dup-guard { margin-top: 12px; border-radius: 14px; padding: 14px 16px; border: 2px solid; animation: dupIn 0.25s ease-out; }
.dup-guard.dup-hard { border-color: #dc2626; background: rgba(220,38,38,0.07); box-shadow: 0 0 0 4px rgba(220,38,38,0.10); }
.dup-guard.dup-soft { border-color: #d97706; background: rgba(217,119,6,0.07); }
.dup-guard-head { display: flex; gap: 12px; align-items: flex-start; }
.dup-guard-icon { font-size: 26px; line-height: 1; animation: dupPulse 1.2s ease-in-out infinite; }
.dup-guard-title { font-weight: 900; font-size: 15px; letter-spacing: -0.01em; }
.dup-hard .dup-guard-title { color: #b91c1c; }
.dup-soft .dup-guard-title { color: #b45309; }
.dup-guard-sub { font-size: 13px; color: var(--text-secondary); margin-top: 2px; }
.dup-guard-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.dup-guard-item { background: var(--card-bg, rgba(255,255,255,0.7)); border: 1px solid var(--divider); border-radius: 10px; padding: 10px 12px; border-left-width: 5px; }
.dup-guard-item.duplicate { border-left-color: #dc2626; }
.dup-guard-item.possible { border-left-color: #d97706; }
.dup-guard-item-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 13.5px; }
.dup-guard-num { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 900; color: var(--rose); }
.dup-guard-why { font-size: 13px; color: var(--text-secondary); margin-top: 6px; line-height: 1.45; }
.dup-guard-override { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--divider); font-size: 13.5px; }
.dup-badge { background: #dc2626 !important; color: #fff !important; font-weight: 900 !important; margin-right: 4px; animation: dupPulse 1.6s ease-in-out infinite; }
.dup-banner { display: flex; gap: 14px; align-items: center; padding: 14px 18px; margin-bottom: 18px; border-radius: 14px; border: 2px solid #dc2626; background: rgba(220,38,38,0.08); cursor: pointer; font-size: 14px; }
@keyframes dupIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes dupPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .dup-guard, .dup-guard-icon, .dup-badge { animation: none; } }

/* ── Files: cards, links and the multi-file attachment field (2026-09-24) ──
   Every upload takes up to 10 files; each shows as a card that never pushes its
   neighbours around — long names ellipsize instead of widening the layout. */
.file-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.file-card { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 7px 8px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--divider); }
.file-card-thumb { flex-shrink: 0; width: 40px; height: 40px; border-radius: 8px; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 22px; text-decoration: none; background: var(--card-bg); border: 1px solid var(--divider); }
.file-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.file-card-text { flex: 1; min-width: 0; text-decoration: none; color: inherit; }
.file-card-name { font-size: 13px; font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-card-sub { font-size: 11.5px; color: var(--text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-card-remove { flex-shrink: 0; padding: 2px 8px !important; }
.file-card-lock { flex-shrink: 0; opacity: 0.45; padding: 0 6px; }
.file-links { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; max-width: 100%; }
.file-links a { font-size: 13.5px; max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; vertical-align: bottom; }

.attach-input { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.attach-row { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 5px 5px 5px 12px; border-radius: 12px; background: var(--card-bg); border: 1.5px solid var(--divider); transition: all 0.2s ease; }
.attach-row.active { border: 2px dashed var(--rose); background: rgba(159,18,57,0.08); box-shadow: 0 0 0 4px rgba(159,18,57,0.15); }
.attach-row-icon { font-size: 16px; opacity: 0.5; flex-shrink: 0; }
.attach-row-link { flex: 1; min-width: 0; border: none; background: transparent; outline: none; font-size: 14px; font-family: inherit; color: var(--text-primary); padding: 6px 0; }
.attach-row-btn { flex-shrink: 0; margin: 0; cursor: pointer; background: var(--blue); color: #fff; padding: 8px 14px; border-radius: 8px; font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.attach-row-btn.busy { opacity: 0.6; cursor: wait; }
.attach-row.active .attach-row-btn { background: var(--rose); }

/* ── Sales order page (2026-09-24) ──
   Denser controls than the app default (the SO is the busiest screen), real pages
   for Documents and History instead of a sidebar tab, and layouts that wrap instead
   of scrolling a field out of sight. Scoped to .so-page so no other screen moves. */
.so-page .form-group { margin-bottom: 16px; }
.so-page .offer-card-body { padding: 18px 20px; }
.so-page td { padding: 11px 14px; }
.so-page thead th { padding: 10px 14px; }
.so-page td, .so-page .offer-term-value { overflow-wrap: break-word; }
.so-page td[style*="nowrap"], .so-page td:has(> .badge) { overflow-wrap: normal; }

.so-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; padding: 4px 0 16px; margin-bottom: 16px; border-bottom: 1px solid var(--divider); }
.so-back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: var(--text-secondary); cursor: pointer; margin-bottom: 8px; }
.so-title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.so-title h2 { margin: 0; font-size: 26px; line-height: 1.2; overflow-wrap: anywhere; }
.so-sub { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14.5px; color: var(--text-secondary); margin-top: 8px; }
.so-head-actions { display: flex; gap: 8px; align-items: center; }

.so-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; padding: 5px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--divider); width: fit-content; max-width: 100%; }
.so-tab { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 10px; border: none; background: transparent; font: inherit; font-size: 14.5px; font-weight: 700; color: var(--text-secondary); cursor: pointer; transition: background 0.15s, color 0.15s; }
.so-tab:hover { background: var(--hover); color: var(--text-primary); }
.so-tab.active { background: var(--card-bg); color: var(--rose); box-shadow: 0 2px 10px rgba(0,0,0,0.06); }
.so-tab .count { font-size: 12px; font-weight: 800; padding: 1px 8px; border-radius: 999px; background: var(--rose-glass); color: var(--rose); }

.so-steps.wizard-steps { padding: 16px 20px; margin-bottom: 18px; border-radius: 18px; background: var(--card-bg); border: 1px solid var(--card-border); overflow-x: auto; }
.so-steps .step-circle { width: 36px; height: 36px; font-size: 14px; }
.so-steps .wizard-step-item:not(:last-child)::after { top: 18px; }
.so-steps .step-label { font-size: 13.5px; margin-top: 6px; }

.so-page { max-width: 1320px; margin: 0 auto; width: 100%; }
.so-flow { padding-bottom: 60px; }
.so-main { padding: 24px 26px; border-radius: 20px; background: var(--card-bg); border: 1px solid var(--card-border); box-shadow: 0 10px 40px rgba(0,0,0,0.03); min-width: 0; }
.so-main-title { display: flex; align-items: center; gap: 12px; font-size: 22px; font-weight: 800; padding-bottom: 14px; margin-bottom: 20px; border-bottom: 1px solid var(--divider); }
.so-card { padding: 20px 22px; border-radius: 18px; background: var(--card-bg); border: 1px solid var(--card-border); box-shadow: 0 8px 32px rgba(0,0,0,0.02); min-width: 0; }
.so-card-title { font-size: 11.5px; font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.so-kv { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--divider); font-size: 13.5px; }
.so-kv:last-child { border-bottom: none; }
.so-kv > span:first-child { color: var(--text-secondary); font-weight: 500; flex-shrink: 0; }
.so-kv > span:last-child { font-weight: 700; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.so-mini-link { font-size: 12.5px; font-weight: 700; color: var(--blue); cursor: pointer; text-transform: none; letter-spacing: 0; background: none; border: none; font-family: inherit; padding: 0; }
@media (max-width: 700px) { .so-main { padding: 16px; } .so-title h2 { font-size: 21px; } }

/* Packaging editor: one row per product that wraps on narrow screens, instead of a
   table that pushed the quantity field out of the card when a packaging name was long. */
.pkg-rows { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.pkg-row { display: grid; grid-template-columns: minmax(150px, 210px) minmax(0, 1fr) minmax(100px, 140px); gap: 10px; align-items: center; padding: 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--divider); }
.pkg-row > * { min-width: 0; }
.pkg-row-name { font-weight: 700; font-size: 14.5px; line-height: 1.3; overflow-wrap: anywhere; }
.pkg-row-name small { display: block; font-weight: 500; color: var(--text-tertiary); font-size: 12.5px; }
.pkg-col-label { display: block; font-size: 11.5px; font-weight: 700; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 4px; }
.pkg-row-name { grid-column: 1 / -1; }
.pkg-row .form-control { min-height: 46px; }
.pkg-row.extra { grid-template-columns: minmax(0, 1fr) minmax(100px, 140px) auto; }
.pkg-head { display: grid; grid-template-columns: minmax(140px, 1.1fr) minmax(150px, 0.8fr) minmax(200px, 1.6fr) minmax(90px, 0.5fr); gap: 10px; padding: 0 13px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-tertiary); }
.pkg-summary-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid rgba(5,150,105,0.12); }
.pkg-summary-row > div { min-width: 0; overflow-wrap: anywhere; }
.pkg-summary-row > div:last-child { text-align: right; }
@media (max-width: 900px) {
    .pkg-head { display: none; }
    .pkg-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .pkg-row-name, .pkg-row .pkg-wide { grid-column: 1 / -1; }
    .pkg-col-label { display: block; }
}

/* Documents page */
.so-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.so-fact { padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--divider); min-width: 0; }
.so-fact-label { font-size: 11.5px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 4px; }
.so-fact-value { font-size: 15px; font-weight: 700; color: var(--text-primary); overflow-wrap: anywhere; }
.so-fact-value.muted { color: var(--text-tertiary); font-weight: 500; font-style: italic; }
.so-fact-sub { font-size: 12px; color: var(--text-tertiary); margin-top: 2px; overflow-wrap: anywhere; }
.doc-cat { margin-bottom: 20px; }
.doc-cat-head { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-secondary); padding-bottom: 8px; margin-bottom: 10px; border-bottom: 1px solid var(--divider); }
.doc-cat-head .count { font-size: 11.5px; padding: 1px 8px; border-radius: 999px; background: var(--surface-2); color: var(--text-tertiary); }
.doc-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.doc-uploader { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 260px); gap: 10px; align-items: start; }
@media (max-width: 700px) { .doc-uploader { grid-template-columns: minmax(0, 1fr); } }

/* History page */
.so-tl-day { font-size: 12px; font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase; color: var(--text-tertiary); margin: 16px 0 4px; }
.so-tl-item { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--divider); }
.so-tl-avatar { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 800; color: #fff; }
.so-tl-line { font-size: 14px; line-height: 1.45; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.so-tl-when { font-size: 12.5px; color: var(--text-tertiary); }
.so-tl-note { margin-top: 6px; font-size: 14.5px; line-height: 1.5; padding: 9px 12px; border-radius: 10px; background: var(--hover); white-space: pre-wrap; overflow-wrap: anywhere; }
.so-tl-files { margin-top: 8px; }
/* Dropdowns (lot / packaging pickers) must be able to leave the card — a clipped
   dropdown looked like the field had vanished. The head keeps the card's corners. */
.so-page .offer-card, .so-page .offer-card-body { overflow: visible; }
.so-page .offer-card-head { border-radius: 16px 16px 0 0; flex-wrap: wrap; gap: 8px; }
.so-page .sample-choice { flex: 1 1 200px; }
.so-page .doc-button-row { margin-bottom: 18px; }
.so-page .offer-card-head > div { flex-wrap: wrap; min-width: 0; }
.so-steps .wizard-step-item { min-width: 84px; }

/* Shipping step checklist (2026-09-24): what is done / what is next, each item jumps to its section. */
.ship-checklist { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; margin-bottom: 22px; }
.ship-check { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--divider); background: var(--surface-2); text-align: left; cursor: pointer; font: inherit; color: var(--text-primary); min-width: 0; }
.ship-check:hover { border-color: var(--rose-light); }
.ship-check strong { display: block; font-size: 14px; }
.ship-check small { display: block; font-size: 12px; line-height: 1.3; color: var(--text-tertiary); }
.ship-check > span:last-child { min-width: 0; }
.ship-check-dot { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; background: var(--card-bg); border: 2px solid var(--divider); color: var(--text-tertiary); }
.ship-check.done { background: rgba(5,150,105,0.07); border-color: rgba(5,150,105,0.25); }
.ship-check.done .ship-check-dot { background: #059669; border-color: #059669; color: #fff; }
.ship-check.done small { color: #047857; }
/* Segmented choice (payment type / method / transport payer) — one row, same height as a field. */
.seg { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--divider); }
.seg button { flex: 1 1 auto; border: none; background: transparent; font: inherit; font-size: 14px; font-weight: 600; color: var(--text-secondary); padding: 7px 10px; border-radius: 9px; cursor: pointer; white-space: nowrap; }
.seg button.active { background: var(--card-bg); color: var(--rose); box-shadow: 0 2px 8px rgba(0,0,0,0.07); }
.terms-section-title { font-size: 12px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; color: var(--text-tertiary); margin: 6px 0 10px; }

/* Transport card (2026-09-24): three cases as big choices, the one detail each needs, and
   what transport earns or costs us. */
.freight-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.freight-opt { display: flex; align-items: flex-start; gap: 10px; padding: 14px; border-radius: 14px; border: 1.5px solid var(--divider); background: var(--surface-2); text-align: left; cursor: pointer; font: inherit; color: var(--text-primary); transition: border-color 0.15s, box-shadow 0.15s, background 0.15s; min-width: 0; }
.freight-opt:hover:not(:disabled) { border-color: var(--rose-light); }
.freight-opt.active { border-color: var(--rose); background: var(--card-bg); box-shadow: 0 0 0 3px var(--rose-glass); }
.freight-opt.suggested:not(.active) { border-style: dashed; border-color: rgba(217,119,6,0.55); }
.freight-opt-icon { font-size: 22px; line-height: 1; flex-shrink: 0; }
.freight-opt-text { flex: 1; min-width: 0; }
.freight-opt-text strong { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14.5px; }
.freight-opt-text small { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.4; color: var(--text-tertiary); }
.freight-opt-tag { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; padding: 1px 7px; border-radius: 999px; background: rgba(217,119,6,0.12); color: var(--gold); }
.freight-opt-check { flex-shrink: 0; font-size: 14px; color: var(--text-tertiary); }
.freight-opt.active .freight-opt-check { color: var(--rose); }
.freight-detail { display: grid; grid-template-columns: minmax(150px, 0.8fr) minmax(0, 1.6fr) auto; gap: 10px; align-items: end; margin-top: 12px; padding: 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--divider); }
.freight-detail.two { grid-template-columns: minmax(0, 1fr) auto; }
.freight-current { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--divider); font-size: 14px; }
.freight-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.freight-summary > div { padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--divider); min-width: 0; }
.freight-summary span { display: block; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-tertiary); }
.freight-summary strong { display: block; font-size: 16px; margin-top: 2px; }
.freight-summary small { display: block; font-size: 12px; color: var(--text-tertiary); }
@media (max-width: 700px) { .freight-detail, .freight-detail.two { grid-template-columns: minmax(0, 1fr); } .freight-summary { grid-template-columns: minmax(0, 1fr); } }
.freight-opt:disabled { opacity: 0.45; cursor: not-allowed; }

/* Suppliers of goods and services (2026-09-25): category chips, payee → supplier box. */
.cat-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.cat-chip { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--divider); background: var(--card-bg); text-align: left; font: inherit; color: var(--text-primary); cursor: pointer; }
.cat-chip:hover { border-color: var(--rose-light); }
.cat-chip.on { border-color: var(--rose); background: var(--rose-glass); box-shadow: 0 0 0 2px var(--rose-glass); }
.cat-chip-icon { font-size: 20px; }
.cat-chip strong { display: block; font-size: 13.5px; }
.cat-chip small { display: block; font-size: 12px; color: var(--text-tertiary); }
.supplier-cats { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 18px; }
.supplier-cat { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--divider); background: var(--card-bg); font: inherit; color: var(--text-primary); cursor: pointer; text-align: left; }
.supplier-cat strong { display: block; font-size: 13px; white-space: nowrap; }
.supplier-cat small { display: block; font-size: 11.5px; color: var(--text-tertiary); white-space: nowrap; }
.supplier-cat em { font-style: normal; font-weight: 800; font-size: 12px; padding: 1px 7px; border-radius: 999px; background: var(--surface-2); }
.supplier-cat.on { border-color: var(--rose); background: var(--rose-glass); }
.payee-dd { position: absolute; left: 0; right: 0; top: 50px; z-index: 60; background: var(--solid-surface); border: 1px solid var(--card-border); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,0.14); overflow: hidden; max-height: 320px; overflow-y: auto; }
.payee-opt { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: none; border-bottom: 1px solid var(--divider); background: transparent; text-align: left; font: inherit; color: var(--text-primary); cursor: pointer; }
.payee-opt:hover, .payee-opt.on { background: var(--rose-glass); }
.payee-opt small { color: var(--text-tertiary); }
.payee-opt.add { color: var(--rose); font-weight: 700; }
.payee-linked { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; font-size: 13px; }
.payee-linked.muted { color: var(--text-tertiary); }

/* Production from stock (2026-09-25): add a lot / drum, and send to the processor. */
.mat-add { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.4fr) minmax(110px, 0.8fr) auto; gap: 10px; align-items: end; padding: 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--divider); }
.mat-send { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 14px; border: 1px dashed var(--rose-light); background: var(--rose-glass); }
@media (max-width: 800px) { .mat-add { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .mat-add > :first-child { grid-column: 1 / -1; } }

/* AI review (2026-09-24): progress tiles, Data health rows, finding cards. */
.ai-progress { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.ai-row { display: grid; grid-template-columns: 96px 130px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 18px; border-bottom: 1px solid var(--divider); cursor: pointer; font-size: 13.5px; }
.ai-row:last-child { border-bottom: none; }
.ai-row:hover { background: var(--rose-glass); }
.ai-rec { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 700; white-space: nowrap; color: var(--rose); }
.ai-text { min-width: 0; overflow-wrap: anywhere; color: var(--text-secondary); }
.ai-text strong { color: var(--text-primary); }
.ai-go { color: var(--rose); font-size: 12.5px; white-space: nowrap; }
.ai-card { padding: 14px 18px; border-radius: 16px; background: var(--card-bg); border: 1px solid var(--card-border); border-left: 4px solid var(--divider); }
.ai-card.sev-error { border-left-color: var(--red); }
.ai-card.sev-warning { border-left-color: var(--orange); }
.ai-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.ai-title { font-size: 15px; flex: 1 1 260px; min-width: 0; }
.ai-meta { font-size: 12px; color: var(--text-tertiary); }
.ai-detail { margin-top: 8px; font-size: 13.5px; color: var(--text-secondary); white-space: pre-line; overflow-wrap: anywhere; }
.ai-fix { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; margin-top: 10px; padding: 8px 12px; border-radius: 10px; background: var(--surface-2); font-size: 13.5px; }
.ai-evidence { display: inline-flex; gap: 4px; align-items: center; min-width: 0; overflow-wrap: anywhere; }
.ai-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; }
@media (max-width: 700px) { .ai-row { grid-template-columns: auto minmax(0, 1fr); } .ai-row .ai-text { grid-column: 1 / -1; } .ai-row .ai-go { display: none; } }

/* A carrier invoice split by waybill (2026-09-24): one row per AWB, its order on the right. */
.awb-toggle { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; margin: 0 0 12px; border-radius: 12px; border: 1px solid var(--divider); background: var(--surface-2); cursor: pointer; font-size: 14px; line-height: 1.45; }
.awb-toggle input { margin-top: 3px; width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--rose); }
.awb-toggle.on { border-color: var(--rose-light); background: var(--rose-glass); }
.awb-lines { display: flex; flex-direction: column; gap: 8px; }
.awb-head, .awb-row { display: grid; grid-template-columns: minmax(130px, 1.1fr) minmax(0, 2fr) minmax(110px, 0.9fr) minmax(120px, 0.9fr) 36px; gap: 8px; align-items: center; }
.awb-head { font-size: 11.5px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-tertiary); padding: 0 2px; }
.awb-row .form-control { margin: 0; }
.awb-order { font-size: 13px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.awb-sum { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; padding: 10px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--divider); font-size: 13.5px; }
.awb-sum strong { font-variant-numeric: tabular-nums; }
.awb-pick { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 12px 9px 28px; border-top: 1px dashed var(--divider); cursor: pointer; font-size: 13.5px; }
.awb-pick:hover { background: var(--rose-glass); }
.awb-pick.taken { cursor: default; opacity: 0.55; }
.awb-pick.taken:hover { background: none; }
.awb-pick.match { background: rgba(5,150,105,0.08); }
@media (max-width: 700px) {
  .awb-head { display: none; }
  .awb-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 36px; padding: 10px; border: 1px solid var(--divider); border-radius: 12px; }
  .awb-row > :nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .awb-row > :nth-child(4) { grid-column: 1 / -1; grid-row: 3; }
}

/* Summary tiles above the Workflow steps (2026-09-24) — replace the old side column. */
.so-tiles-wrap { margin-bottom: 16px; }
.so-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 10px; }
.so-tile { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 14px 16px; border-radius: 16px; background: var(--card-bg); border: 1px solid var(--card-border); box-shadow: 0 4px 18px rgba(0,0,0,0.03); text-align: left; font: inherit; color: var(--text-primary); }
.so-tile.clickable { cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; }
.so-tile.clickable:hover { border-color: var(--rose-light); box-shadow: 0 6px 22px rgba(159,18,57,0.08); }
.so-tile.open { border-color: var(--rose); box-shadow: 0 0 0 3px var(--rose-glass); }
.so-tile-label { display: flex; justify-content: space-between; gap: 6px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 2px; }
.so-tile-more { color: var(--rose); font-size: 12px; }
.so-tile-value { display: block; font-size: 19px; font-weight: 800; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.so-tile-value.clamp2 { white-space: normal; font-size: 16px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.so-tile-value.small { white-space: normal; font-size: 14.5px; font-weight: 600; }
.so-tile-inline { font-size: 13.5px; font-weight: 600; color: var(--text-secondary); }
.so-tile-sub { display: block; font-size: 12.5px; color: var(--text-tertiary); overflow-wrap: anywhere; }
.so-meter { display: block; height: 5px; border-radius: 999px; background: var(--divider); overflow: hidden; margin: 5px 0 2px; }
.so-meter > span { display: block; height: 100%; border-radius: 999px; }
.so-pnl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 10px; padding: 14px 18px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--divider); }
.so-pnl-item span { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-tertiary); }
.so-pnl-item strong { display: block; font-size: 17px; }
.so-pnl-item small { display: block; font-size: 12px; color: var(--text-tertiary); }
.so-pnl-op { font-size: 20px; font-weight: 700; color: var(--text-tertiary); }
.so-pnl-note { flex-basis: 100%; font-size: 12.5px; color: var(--text-tertiary); line-height: 1.5; }

/* Offer line items: one card per line, "what" on the first row, "how much" on the second. */
.li-list { display: flex; flex-direction: column; gap: 12px; }
.li-card { padding: 12px 16px 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--divider); min-width: 0; }
.li-card.short { border-color: rgba(217,119,6,0.4); background: rgba(254,243,199,0.35); }
.li-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 6px; font-size: 12px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; color: var(--text-tertiary); }
.li-head > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.li-head-name { text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--text-secondary); }
.li-row { display: grid; gap: 12px; }
.li-row > * { min-width: 0; }
.li-row-what { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.li-row-howmuch { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 10px; }
.li-row-desc { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 10px; }
.li-label { display: block; font-size: 13px; font-weight: 600; color: var(--text-secondary); margin-bottom: 5px; }
.li-total { display: flex; align-items: center; min-height: 46px; padding: 0 14px; border-radius: var(--r-sm); border: 1.5px dashed var(--divider); background: var(--card-bg); font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .li-row-what, .li-row-desc { grid-template-columns: minmax(0, 1fr); } .li-row-howmuch { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Edit Offer totals — four equal boxes, the VAT % a real field. */
.offer-totals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.offer-totals > div { padding: 10px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--divider); min-width: 0; }
.offer-totals span { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 4px; }
.offer-totals strong { display: block; font-size: 18px; font-variant-numeric: tabular-nums; }
.offer-totals .form-control { min-height: 38px !important; padding: 6px 10px !important; }
.offer-totals .grand { background: rgba(159,18,57,0.06); border-color: rgba(159,18,57,0.18); }
.offer-totals .grand strong { font-size: 22px; font-weight: 900; color: var(--rose); }
@media (max-width: 760px) { .offer-totals { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.li-card .form-control { padding: 11px 14px; font-size: 15px; min-height: 46px; }
.li-card textarea.form-control { min-height: 72px; }
@media (max-width: 600px) { .so-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .so-tile { padding: 12px; } .so-tile-value { font-size: 16px; } }

/* ── App-wide geometry pass (2026-09-24) ─────────────────────────────────── */
select.form-control:focus { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%239f1239' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 12px 8px; }
/* Tables: identifiers, dates and money never break over lines; two-line cells keep lists narrow. */
td[style*="monospace"], .nowrap { white-space: nowrap; }
td.num, th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cell-2l { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cell-2l > small { font-size: 12.5px; color: var(--text-tertiary); font-weight: 500; }
.table-wrap { width: 100%; overflow-x: auto; }
/* Table-embedded inputs (inline editors) use the compact size. */
.table-compact .form-control, td > .form-control { min-height: 40px; padding: 8px 12px; }
td > select.form-control { padding-right: 34px; }

/* List toolbar: labelled date range + sort, 40 px high. */
.list-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.date-range { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 6px 0 12px; border-radius: 12px; background: var(--card-bg); border: 1px solid var(--divider); }
.date-range label, .sort-pick { display: flex; align-items: center; gap: 6px; margin: 0; }
.date-range label > span, .sort-pick > span { font-size: 11.5px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-tertiary); }
.date-range input { border: none; background: transparent; outline: none; font: inherit; font-size: 14px; color: var(--text-primary); height: 38px; padding: 0 2px; min-width: 128px; }
.date-range-sep { color: var(--text-tertiary); }
.date-range-icon { font-size: 14px; }
.date-range-clear { border: none; background: var(--surface-2); color: var(--text-secondary); width: 28px; height: 28px; border-radius: 8px; cursor: pointer; font-size: 12px; }
.sort-pick { height: 42px; padding: 0 4px 0 12px; border-radius: 12px; background: var(--card-bg); border: 1px solid var(--divider); }
.sort-pick select { border: none; background: transparent; outline: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--text-primary); height: 38px; cursor: pointer; padding-right: 6px; }

/* Purchase-order lines: product wide, then quantity, price, total — labels above. */
.po-line { grid-template-columns: minmax(0, 2.2fr) minmax(110px, 0.8fr) minmax(130px, 0.9fr) minmax(130px, 0.9fr) auto; align-items: end; }
.po-line .li-remove { height: 46px; }
@media (max-width: 760px) { .po-line { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .po-line > :first-child { grid-column: 1 / -1; } }
.po-vat-box select.form-control { min-height: 38px; padding-top: 6px; padding-bottom: 6px; }
/* Receiving: one card per ordered line. */
.rcv-card { padding: 12px 16px 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--divider); }
.rcv-card.done { background: rgba(5,150,105,0.05); border-color: rgba(5,150,105,0.25); }
.rcv-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.rcv-head strong { font-size: 15px; }
.rcv-progress { font-size: 13px; color: var(--text-secondary); white-space: nowrap; }
.rcv-fields { display: grid; grid-template-columns: minmax(140px, 1fr) minmax(160px, 1fr) minmax(150px, auto); gap: 12px; align-items: end; }
.rcv-check { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 12px; border-radius: var(--r-sm); border: 1.5px solid var(--field-border); background: var(--field-bg); font-size: 14px; font-weight: 600; cursor: pointer; }
@media (max-width: 760px) { .rcv-fields { grid-template-columns: minmax(0, 1fr); } }
/* Opening balances / journal lines: fixed column plan so inputs get real width. */
.table-fixed { table-layout: fixed; }
.table-fixed td, .table-fixed th { vertical-align: middle; }
.row-actions { display: flex; gap: 6px; align-items: center; }
/* Compact period switch labels fit next to sub-tabs on one row. */
.toolbar-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.kpi-grid.auto5 { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.table-dense th, .table-dense td { padding-left: 12px; padding-right: 12px; }
.offer-totals.po { grid-template-columns: minmax(230px, 1.5fr) repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) { .offer-totals.po { grid-template-columns: repeat(2, minmax(0, 1fr)); } .offer-totals.po > :first-child { grid-column: 1 / -1; } }
.attach-row { min-height: 46px; box-sizing: border-box; }