/* ═══════════════════════════════════════════════════════════
   AlexanianOS — Design System v1.0
   Red #A90432 · Blue #15486B · Near-Black #1F2124
   Font: Hanken Grotesk
   ═══════════════════════════════════════════════════════════ */

/* ── Custom Properties ──────────────────────────────────── */
:root {
    --color-red:              #A90432;
    --color-red-dark:         #8a0228;
    --color-red-light:        #fff1f4;
    --color-red-border:       #fecdd3;
    --color-blue:             #15486B;
    --color-blue-light:       #e8f0f5;
    --color-blue-border:      #93c5fd;
    --color-near-black:       #1F2124;

    --color-bg:               #f4f5f7;
    --color-surface:          #ffffff;
    --color-border:           #e2e4e7;
    --color-text:             #1F2124;
    --color-text-muted:       #6b7280;
    --color-text-subtle:      #9ca3af;

    --color-success:          #15803d;
    --color-success-bg:       #f0fdf4;
    --color-success-border:   #bbf7d0;
    --color-warning:          #D97706;
    --color-warning-bg:       #fffbeb;
    --color-warning-border:   #fde68a;
    --color-orange:           #EA580C;
    --color-orange-bg:        #fff2e8;
    --color-orange-border:    #fed7aa;
    --color-danger:           #DC2626;
    --color-danger-bg:        #fef2f2;
    --color-danger-border:    #fecaca;

    --font:                   'Hanken Grotesk', system-ui, -apple-system, sans-serif;

    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;

    --radius-sm: 4px;
    --radius:    8px;
    --radius-lg: 12px;

    --shadow-sm: 0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.05);
    --shadow:    0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.05);
    --shadow-lg: 0 10px 25px rgba(0,0,0,0.12), 0 4px 10px rgba(0,0,0,0.08);

    --nav-height: 56px;
}

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

html { font-size: 16px; -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }

body {
    font-family: var(--font);
    font-size: 1rem;
    color: var(--color-text);
    background: var(--color-bg);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

h1 { font-size: 1.875rem; font-weight: 700; line-height: 1.2; }
h2 { font-size: 1.5rem;   font-weight: 700; line-height: 1.25; }
h3 { font-size: 1.125rem; font-weight: 600; line-height: 1.3; margin-bottom: var(--space-4); }
h4 { font-size: 1rem;     font-weight: 600; }
p  { line-height: 1.6; }
strong { font-weight: 700; }

/* ── App Shell ──────────────────────────────────────────── */
/* padding-top reserves the space .top-nav no longer occupies now that it's fixed (out of flow). */
.app-shell { min-height: 100vh; display: flex; flex-direction: column; padding-top: var(--nav-height); }

/* ── Top Nav ────────────────────────────────────────────── */
/* position:fixed (not sticky) — sticky only resists the *vertical* scroll of its own containing
   block; pages with horizontally-overflowing content (e.g. Pricelist) still drag a sticky header
   sideways with the rest of the page. Fixed pins it to the viewport on both axes. */
.top-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    height: var(--nav-height);
    background: var(--color-near-black);
    display: flex;
    align-items: center;
    padding: 0 var(--space-4);
    gap: var(--space-3);
    box-shadow: var(--shadow);
}

.store-selector {
    width: auto;
    min-width: 110px;
    flex: 0 0 auto;
}

.hamburger-btn {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.375rem;
    line-height: 1;
    padding: var(--space-2);
    cursor: pointer;
    flex-shrink: 0;
}

.app-title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.02em;
    flex: 1;
    text-decoration: none;
    cursor: pointer;
}

.logout-btn {
    margin-left: auto;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.25);
    color: rgba(255,255,255,0.75);
    font-family: var(--font);
    font-size: 0.8125rem;
    font-weight: 600;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}
.logout-btn:hover { border-color: rgba(255,255,255,0.6); color: #fff; }

.nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 150;
}

.nav-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 260px;
    background: var(--color-near-black);
    z-index: 200;
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: var(--shadow-lg);
}

.nav-drawer.open { transform: translateX(0); }

.nav-drawer-title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.02em;
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid rgba(255,255,255,0.1);
    margin-bottom: var(--space-2);
}

.nav-drawer a {
    display: block;
    color: rgba(255,255,255,0.65);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
    padding: var(--space-4) var(--space-6);
    transition: color 0.15s, background 0.15s;
}

.nav-drawer a:hover  { color: #fff; background: rgba(255,255,255,0.06); }
.nav-drawer a.active { color: #fff; background: var(--color-red); }

/* ── Main Content ───────────────────────────────────────── */
.main-content {
    flex: 1;
    max-width: 1024px;
    width: 100%;
    margin: 0 auto;
    padding: var(--space-8) var(--space-6);
}

/* ── Page Header ────────────────────────────────────────── */
.page-header, .count-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-8);
}

.page-header h2, .count-header h2 { margin-bottom: var(--space-1); }

.header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}

.session-meta {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    display: block;
    margin-top: var(--space-1);
}

/* ── Buttons ────────────────────────────────────────────── */
button {
    font-family: var(--font);
    font-size: 0.875rem;
    font-weight: 600;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    padding: 0 var(--space-5);
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    transition: background 0.15s, opacity 0.15s, border-color 0.15s, color 0.15s;
    text-decoration: none;
    letter-spacing: 0.02em;
}

button:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-primary {
    background: var(--color-red);
    color: #fff;
    border: 1px solid transparent;
}
.btn-primary:hover:not(:disabled) { background: var(--color-red-dark); }

.btn-secondary {
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
}
.btn-secondary:hover:not(:disabled) { background: var(--color-bg); border-color: #c0c4cc; }

.btn-danger {
    background: #7f0220;
    color: #fff;
    border: 1px solid transparent;
}
.btn-danger:hover:not(:disabled) { background: #5c0117; }

.btn-sm { height: 32px; padding: 0 var(--space-3); font-size: 0.75rem; }

a.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 var(--space-3);
    font-size: 0.75rem;
    font-family: var(--font);
    font-weight: 600;
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
}
a.btn-secondary:hover { background: var(--color-bg); border-color: #c0c4cc; }

/* ── Forms ──────────────────────────────────────────────── */
.field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.field label {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

input[type="text"],
input[type="number"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="date"],
input:not([type]),
select,
textarea {
    font-family: var(--font);
    font-size: 1rem;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 0 var(--space-3);
    height: 40px;
    width: 100%;
    transition: border-color 0.15s, box-shadow 0.15s;
    outline: none;
    appearance: none;
}

textarea {
    height: auto;
    padding: var(--space-3);
    resize: vertical;
    line-height: 1.5;
}

select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    padding-right: var(--space-8);
}

input:focus, select:focus, textarea:focus {
    border-color: var(--color-red);
    box-shadow: 0 0 0 3px rgba(169,4,50,0.1);
}

input::placeholder, textarea::placeholder { color: var(--color-text-subtle); }

.form-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
}

.form-row label {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.form-row input, .form-row select { width: auto; flex: 1; min-width: 120px; }

/* ── Toggle switch (binary settings — Same as Sold-To, Show Costs, etc.) ─────
   Larger touch target and clearer at-a-glance state than a checkbox, especially
   on mobile. Reserved for on/off preferences; list-selection checkboxes (sample
   log, line selection) stay plain checkboxes since "select this item" is a
   different meaning than "toggle this setting". */
.toggle-switch {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--color-text);
    user-select: none;
}

.toggle-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-track {
    position: relative;
    width: 38px;
    height: 21px;
    flex-shrink: 0;
    background: var(--color-border);
    border-radius: 999px;
    transition: background 0.15s;
}

.toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    transition: transform 0.15s;
}

.toggle-switch input:checked + .toggle-track { background: var(--color-red); }
.toggle-switch input:checked + .toggle-track .toggle-thumb { transform: translateX(17px); }
.toggle-switch input:focus-visible + .toggle-track { box-shadow: 0 0 0 3px rgba(169,4,50,0.25); }
.toggle-switch input:disabled + .toggle-track { opacity: 0.5; }
.toggle-switch:has(input:disabled) { cursor: not-allowed; }

/* ── Tabs ───────────────────────────────────────────────── */
.tab-bar {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--color-border);
    margin-bottom: var(--space-6);
    overflow-x: auto;
    /* Leaving overflow-y unset here computes to auto (per spec, once either axis is non-visible the
       other stops being visible too), so a couple px of sub-pixel vertical overflow from the tab
       buttons' -2px margin/border math was silently triggering an unwanted vertical scrollbar that
       clipped the tabs short — pin it to hidden so only the intended horizontal scroll applies. */
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    /* Its own overflow-x:auto otherwise gives it an automatic min-height of 0 as a flex item, letting a
       height-capped flex-column ancestor (e.g. .manager-dash-body) squeeze it away entirely instead of
       shrinking the scrollable content area — pin it to its natural size instead. */
    flex-shrink: 0;
}

.tab, .tab-active {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    height: 40px;
    padding: 0 var(--space-5);
    margin-bottom: -2px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    letter-spacing: 0.02em;
    white-space: nowrap;
    flex-shrink: 0;
}
.tab:hover { color: var(--color-text); }
.tab-active { color: var(--color-red); border-bottom-color: var(--color-red); }
.tab-bar a { text-decoration: none; display: inline-flex; align-items: center; }

/* ── Modal ──────────────────────────────────────────────── */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(31,33,36,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
    padding: var(--space-4);
}

.modal {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--space-8);
    width: 100%;
    max-width: 480px;
}

.modal h3 { margin-bottom: var(--space-4); }
.modal > p { color: var(--color-text-muted); margin-bottom: var(--space-3); line-height: 1.6; }
.modal-warning { color: var(--color-warning) !important; background: var(--color-warning-bg); border: 1px solid var(--color-warning-border); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); }

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-top: var(--space-6);
}

/* ── Inline error ───────────────────────────────────────── */
.error {
    font-size: 0.875rem;
    color: var(--color-red);
    background: var(--color-red-light);
    border: 1px solid var(--color-red-border);
    border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
}

/* ── Session Cards (Home) ───────────────────────────────── */
.session-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-8);
}

.session-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-4) var(--space-5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    box-shadow: var(--shadow-sm);
}

.session-store {
    display: block;
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: var(--space-1);
}

.session-actions { display: flex; gap: var(--space-2); flex-shrink: 0; }

.empty-state {
    color: var(--color-text-muted);
    padding: var(--space-12) 0;
    text-align: center;
}

/* ── App Tiles (Homepage) ───────────────────────────────── */
.app-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-6);
    max-width: 480px;
}

.app-tile {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-8) var(--space-4);
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    cursor: pointer;
    font-family: var(--font);
    transition: box-shadow 0.15s, transform 0.15s;
}
.app-tile:hover { box-shadow: var(--shadow); transform: translateY(-2px); }

.app-tile-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.02em;
}
.app-tile-icon-red  { background: var(--color-red); }
.app-tile-icon-blue { background: var(--color-blue); }

.app-tile-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
}

/* ── Count Page ─────────────────────────────────────────── */
.pending-scan-overlay {
    position: fixed;
    inset: var(--nav-height) 0 0 0;
    background: rgba(31,33,36,0.6);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    z-index: 150;
    padding: var(--space-8) var(--space-4);
    overflow-y: auto;
}

.pending-scan-card {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--space-6);
    width: 100%;
    max-width: 560px;
}

.pending-item-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}

.pending-type {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    background: var(--color-near-black);
    color: #fff;
    padding: 3px var(--space-2);
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.pending-id {
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.pending-description {
    font-size: 1rem;
    color: var(--color-text-muted);
    margin-bottom: var(--space-4);
}

.rug-size {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-red);
    margin: var(--space-2) 0 var(--space-4);
}

.allocation-banner {
    background: var(--color-blue-light);
    border-left: 3px solid var(--color-blue);
    border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
    font-size: 0.875rem;
}

.allocation-banner strong { color: var(--color-blue); display: block; margin-bottom: var(--space-2); }

.allocation-row {
    display: flex;
    gap: var(--space-4);
    padding: 3px 0;
    flex-wrap: wrap;
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

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

.qty-entry label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: var(--space-2);
}

.qty-entry input { max-width: 180px; }

.lf-entry { display: flex; align-items: center; gap: var(--space-2); }
.lf-entry input { max-width: 90px; }
.lf-entry span { font-weight: 600; color: var(--color-text-muted); }

.running-count {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin-bottom: var(--space-3);
}

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

/* Orphan / notification banners */
.orphan-banner {
    border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
    font-size: 0.875rem;
    font-weight: 600;
    border-left: 4px solid;
}

.orphan-warning {
    background: var(--color-warning-bg);
    border-left-color: var(--color-warning);
    color: var(--color-warning);
}

.orphan-error {
    background: var(--color-red-light);
    border-left-color: var(--color-red);
    color: var(--color-red);
}

.scan-notification {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-success);
    background: var(--color-success-bg);
    border-left: 4px solid var(--color-success);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-3);
}

/* Scan input area */
.scan-input-area {
    position: sticky;
    bottom: 0;
    background: var(--color-bg);
    border-top: 1px solid var(--color-border);
    padding: var(--space-4) 0;
    margin-top: var(--space-6);
}

.scan-field input {
    width: 100%;
    font-size: 1.25rem;
    height: 54px;
    font-weight: 600;
    border: 2px solid var(--color-border);
    border-radius: var(--radius);
    letter-spacing: 0.02em;
}

.scan-field input:focus {
    border-color: var(--color-red);
    box-shadow: 0 0 0 3px rgba(169,4,50,0.1);
}

.undo-btn { margin-top: var(--space-2); }

/* Scan history */
.scan-history { margin-top: var(--space-8); }
.scan-history h3 { margin-bottom: var(--space-3); }

.entry-list { display: flex; flex-direction: column; gap: 2px; }

.entry-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: var(--color-surface);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    border-left: 3px solid transparent;
}

.entry-confirmed { border-left-color: var(--color-success); }
.entry-variance  { border-left-color: var(--color-warning); }
.entry-exception { border-left-color: var(--color-red); }

.entry-seq    { color: var(--color-text-subtle); font-size: 0.75rem; flex-shrink: 0; width: 32px; }
.entry-bin    { font-size: 0.75rem; font-weight: 700; color: var(--color-blue); flex-shrink: 0; }
.entry-time   { font-size: 0.75rem; color: var(--color-text-subtle); margin-left: auto; flex-shrink: 0; }
.entry-type   { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); flex-shrink: 0; width: 90px; }
.entry-id     { font-weight: 700; flex-shrink: 0; }
.entry-desc   { color: var(--color-text-muted); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entry-qty    { color: var(--color-text-muted); flex-shrink: 0; }
.entry-status { flex-shrink: 0; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-subtle); }

/* ── Summary Page ───────────────────────────────────────── */
.summary-stats {
    display: flex;
    gap: var(--space-3);
    margin-bottom: var(--space-8);
    flex-wrap: wrap;
}

.stat-card {
    flex: 1;
    min-width: 90px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-4) var(--space-5);
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: var(--shadow-sm);
}

.stat-number {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: var(--space-2);
    color: var(--color-text);
}

.stat-label {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--color-text-muted);
    text-align: center;
}

.stat-good .stat-number { color: var(--color-success); }
.stat-warn .stat-number { color: var(--color-warning); }
.stat-bad  .stat-number { color: var(--color-red); }

.summary-section { margin-bottom: var(--space-8); }
.summary-section h3 { margin-bottom: var(--space-4); }

/* ── Tables ─────────────────────────────────────────────── */
.summary-table, .report-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    background: var(--color-surface);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.summary-table th, .report-table th {
    background: var(--color-near-black);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: var(--space-3) var(--space-4);
    text-align: left;
}

.summary-table td, .report-table td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
    vertical-align: top;
}

.summary-table tr:last-child td,
.report-table  tr:last-child td { border-bottom: none; }

.summary-table tbody tr:hover td,
.report-table  tbody tr:hover td { background: var(--color-bg); }

.row-negative td:last-child { color: var(--color-red); font-weight: 700; }
.row-positive td:last-child { color: var(--color-success); font-weight: 700; }
.negative { color: var(--color-red) !important; font-weight: 700; }
.positive { color: var(--color-success) !important; font-weight: 700; }

.auto-accepted td { color: var(--color-text-muted); }
.auto-accept-badge { color: var(--color-warning); font-weight: 700; margin-left: 2px; }

.clerk-note        { color: var(--color-text-muted); font-size: 0.8125rem; margin-top: 2px; }
.investigation-note { color: var(--color-blue); font-size: 0.8125rem; margin-top: 2px; }

/* ── Reconciliation ─────────────────────────────────────── */
.recon-instructions {
    background: var(--color-blue-light);
    border-left: 4px solid var(--color-blue);
    border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-6);
    font-size: 0.875rem;
    color: var(--color-blue);
}

.recon-status {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
}

.recon-pending   { background: var(--color-warning-bg); color: var(--color-warning); }
.recon-reviewing { background: var(--color-blue-light); color: var(--color-blue); }
.recon-finalized { background: var(--color-success-bg); color: var(--color-success); }

.adjustment-forms-list {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-4) var(--space-5);
    margin-bottom: var(--space-6);
}

.adjustment-forms-list h4 {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    margin-bottom: var(--space-3);
}

.adjustment-form-row {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-2) 0;
    font-size: 0.875rem;
    color: var(--color-text-muted);
    border-top: 1px solid var(--color-border);
    flex-wrap: wrap;
}

.form-badge {
    font-size: 0.6875rem;
    font-weight: 700;
    background: var(--color-near-black);
    color: #fff;
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Recon lines */
.recon-line {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-4);
    margin-bottom: var(--space-3);
    box-shadow: var(--shadow-sm);
}

.recon-disp-confirmed   { border-left-color: var(--color-success); }
.recon-disp-accept      { border-left-color: var(--color-blue); }
.recon-disp-investigate { border-left-color: var(--color-warning); }
.recon-disp-updatecount { border-left-color: #7c3aed; }
.recon-disp-unset       { border-left-color: var(--color-border); }

.recon-line-header {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    margin-bottom: var(--space-3);
}

.recon-type {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: var(--color-near-black);
    color: #fff;
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.recon-exception-type {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    flex-shrink: 0;
}

.recon-id   { font-weight: 700; }
.recon-desc { color: var(--color-text-muted); }

.recon-qty {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.recon-allocated { color: var(--color-blue); font-weight: 600; }

.recon-variance { font-weight: 700; font-size: 0.875rem; white-space: nowrap; }
.recon-variance.negative { color: var(--color-red); }
.recon-variance.positive { color: var(--color-success); }

.recon-value { font-size: 0.875rem; color: var(--color-text-muted); }

.recon-variance-value { font-size: 0.875rem; font-weight: 700; }
.recon-variance-value.negative { color: var(--color-red); }
.recon-variance-value.positive { color: var(--color-success); }

.recon-line-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-top: var(--space-3);
}

.recon-line-actions select           { width: auto; flex: 1; min-width: 200px; }
.recon-line-actions input[type="text"]   { flex: 1; min-width: 160px; }
.recon-line-actions input[type="number"] { width: 130px; flex: none; }
.recon-line-actions textarea { width: 100%; flex-basis: 100%; }

.recon-locked {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    padding: var(--space-2) var(--space-3);
    background: var(--color-bg);
    border-radius: var(--radius-sm);
    margin-top: var(--space-2);
}

.lock-badge {
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.recon-disposition { font-weight: 600; font-size: 0.875rem; }

.recon-disp-badge-confirmed   { color: var(--color-success); }
.recon-disp-badge-accept      { color: var(--color-blue); }
.recon-disp-badge-investigate { color: var(--color-warning); }
.recon-disp-badge-updatecount { color: #7c3aed; }

.recon-clerk-action { font-size: 0.875rem; font-weight: 600; }
.recon-clerk-note   { font-size: 0.875rem; color: var(--color-text-muted); font-style: italic; }

.recon-investigate-banner {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    background: var(--color-warning-bg);
    border-left: 3px solid var(--color-warning);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-3);
    font-size: 0.875rem;
    color: var(--color-warning);
    font-weight: 600;
}

.recon-note { font-style: italic; color: var(--color-text-muted); font-weight: 400; }

.recon-review-result {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-top: var(--space-2);
    font-size: 0.875rem;
}

.recon-investigation { color: var(--color-blue); }
.recon-meta { color: var(--color-text-subtle); font-size: 0.75rem; }

/* ── Adjustment Form / Report ───────────────────────────── */
.report-toolbar {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    margin-bottom: var(--space-6);
}

.report-page {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-8);
    box-shadow: var(--shadow-sm);
}

.report-header { margin-bottom: var(--space-8); }
.report-header h1 { font-size: 1.5rem; margin-bottom: var(--space-4); }

.report-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-2) var(--space-6);
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin-bottom: var(--space-4);
}

.report-instructions {
    font-size: 0.875rem;
    color: var(--color-blue);
    font-weight: 600;
}

.report-section { margin-bottom: var(--space-8); }
.report-section h2 { font-size: 1.125rem; margin-bottom: var(--space-3); }

.report-footer {
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

/* ── Camera Scanner ─────────────────────────────────────── */
.camera-overlay {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: #000;
}

.camera-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.camera-video video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.camera-ui {
    position: relative;
    z-index: 10;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.camera-toolbar {
    padding: var(--space-4) var(--space-5);
    display: flex;
    justify-content: flex-end;
    background: linear-gradient(to bottom, rgba(0,0,0,0.65), transparent);
}

.camera-close {
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.35);
    color: #fff;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 1.25rem;
    padding: 0;
}

.camera-close:hover { background: rgba(255,255,255,0.28); }

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

.camera-reticle {
    width: 72vw;
    max-width: 320px;
    height: 36vw;
    max-height: 160px;
    border: 2px solid rgba(255,255,255,0.85);
    border-radius: var(--radius);
    box-shadow: 0 0 0 9999px rgba(0,0,0,0.45);
}

.camera-status {
    padding: var(--space-4) var(--space-5) var(--space-10);
    background: linear-gradient(to top, rgba(0,0,0,0.72), transparent);
    min-height: 90px;
    display: flex;
    align-items: flex-end;
}

.camera-hint {
    color: rgba(255,255,255,0.55);
    font-size: 0.875rem;
    text-align: center;
    width: 100%;
}

.camera-message {
    width: 100%;
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius);
    font-weight: 600;
    font-size: 0.9375rem;
    text-align: center;
    color: #fff;
}

.camera-msg-success { background: rgba(21,128,61,0.92); }
.camera-msg-warning { background: rgba(180,83,9,0.92); }
.camera-msg-error   { background: rgba(169,4,50,0.92); }

.bin-field { margin-bottom: var(--space-2); }

.bin-field input {
    width: 100%;
    font-size: 0.9375rem;
    height: 40px;
    font-weight: 500;
    border-radius: var(--radius);
    letter-spacing: 0.02em;
    color: var(--color-blue);
}

.bin-field input:focus {
    border-color: var(--color-blue);
    box-shadow: 0 0 0 3px rgba(21,72,107,0.12);
}

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

.scan-field input { flex: 1; }

.camera-btn {
    flex-shrink: 0;
    height: 54px;
    padding: 0 var(--space-4);
    font-size: 1.375rem;
    background: var(--color-surface);
    border: 2px solid var(--color-border);
    border-radius: var(--radius);
}

.camera-btn:hover:not(:disabled) { background: var(--color-bg); border-color: #c0c4cc; }

/* ── Tag Printing ───────────────────────────────────────── */
.no-print { }

.tag-preview-toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin: var(--space-4) 0;
}

.range-results  { margin-top: var(--space-6); }
.range-section  { margin-bottom: var(--space-6); }

.range-section-header {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-3);
}

/* ── Utility text ───────────────────────────────────────── */
.success-text { color: var(--color-success); font-weight: 600; }
.warning-text { color: var(--color-warning); font-weight: 600; }
.muted        { color: var(--color-text-muted); font-size: 0.875rem; margin-top: var(--space-2); }

/* ── Login ──────────────────────────────────────────────── */
.login-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg);
    padding: var(--space-4);
}

.login-box {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--space-10) var(--space-8);
    width: 100%;
    max-width: 380px;
}

.login-box h1 {
    font-size: 1.75rem;
    margin-bottom: var(--space-8);
    color: var(--color-red);
    text-align: center;
    letter-spacing: -0.01em;
}

.login-box button[type="submit"] {
    width: 100%;
    height: 44px;
    background: var(--color-red);
    color: #fff;
    font-family: var(--font);
    font-size: 0.875rem;
    font-weight: 700;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-top: var(--space-2);
    transition: background 0.15s;
}

.login-box button[type="submit"]:hover:not(:disabled) { background: var(--color-red-dark); }
.login-box button[type="submit"]:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Print (adjustment form) ────────────────────────────── */
@media print {
    .no-print { display: none !important; }

    .report-page  { border: none; box-shadow: none; padding: 0; }
    .main-content { padding: 0; }

    .summary-table th, .report-table th {
        background: #222 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* ── Blazor loading / error UI ──────────────────────────── */
#blazor-error-ui {
    color-scheme: light only;
    background: var(--color-red-light);
    color: var(--color-red);
    border-top: 2px solid var(--color-red);
    bottom: 0;
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: var(--space-3) var(--space-6);
    position: fixed;
    width: 100%;
    z-index: 1000;
    font-size: 0.875rem;
    font-weight: 600;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: var(--space-4);
    top: 50%;
    transform: translateY(-50%);
}

.blazor-error-boundary {
    background: var(--color-red-light);
    border-left: 4px solid var(--color-red);
    padding: var(--space-4) var(--space-6);
    color: var(--color-red);
    border-radius: var(--radius-sm);
}

.blazor-error-boundary::after { content: "An error has occurred."; }

.loading-progress {
    position: absolute;
    display: block;
    width: 8rem;
    height: 8rem;
    inset: 20vh 0 auto 0;
    margin: 0 auto;
}

.loading-progress circle {
    fill: none;
    stroke: var(--color-border);
    stroke-width: 0.6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress circle:last-child {
    stroke: var(--color-red);
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: 600;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.loading-progress-text:after { content: var(--blazor-load-percentage-text, "Loading"); }

/* ── Blazor form validation ─────────────────────────────── */
.valid.modified:not([type=checkbox]) { border-color: var(--color-success); }
.invalid { border-color: var(--color-red) !important; }
.validation-message { color: var(--color-red); font-size: 0.875rem; margin-top: var(--space-1); }

/* ═══════════════════════════════════════════════════════════
   OrderWriter — CRM Dashboard
   ═══════════════════════════════════════════════════════════ */

/* Full-bleed breakout of .main-content's centered 1024px cap —
   the CRM shell is a data-dense app view, not a narrow form page. */
.crm-shell {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: 100vw;
    padding: 0 var(--space-6) var(--space-6);
}

/* ── Global header (Compufloor stats + Tools) ──────────────── */
.crm-header { margin-bottom: var(--space-4); }

.crm-header-toggle {
    display: none;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    border-radius: var(--radius-sm);
    padding: 0 var(--space-4);
    height: 40px;
    align-items: center;
    gap: var(--space-2);
    position: relative;
}

.crm-header-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-3) var(--space-4);
    box-shadow: var(--shadow-sm);
}

.cuf-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-4);
    flex: 1;
}

.cuf-header-field { display: flex; flex-direction: column; gap: var(--space-1); }
.cuf-header-field label { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); }
.cuf-header-field input { height: 32px; width: 140px; }

.cuf-header-stat { display: flex; flex-direction: column; gap: 2px; }
.cuf-stat-label { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); }
.cuf-stat-value { font-size: 1.0625rem; font-weight: 700; }

.cuf-hide-toggle {
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    height: 32px;
    padding: 0 var(--space-3);
    font-size: 0.75rem;
    border-radius: var(--radius-sm);
}

/* ── Tools dropdown ─────────────────────────────────────────── */
.tools-menu-mobile { display: none; }

.tools-menu { position: relative; }

.tools-menu-trigger {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    border-radius: var(--radius-sm);
    height: 40px;
    padding: 0 var(--space-4);
    position: relative;
}

.tools-menu-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-success);
    border: 1.5px solid var(--color-surface);
}

.tools-menu-overlay { position: fixed; inset: 0; z-index: 190; background: transparent; }

.tools-menu-dropdown {
    position: absolute;
    top: calc(100% + var(--space-2));
    right: 0;
    z-index: 200;
    min-width: 200px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: var(--space-2);
    display: flex;
    flex-direction: column;
}

.tools-menu-item {
    background: transparent;
    border: none;
    color: var(--color-text);
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-2);
    height: 36px;
    padding: 0 var(--space-3);
    border-radius: var(--radius-sm);
    font-weight: 500;
    /* Same root cause as the text-decoration fix below: the global button{} reset sets font-size:
       0.875rem, but <a>-rendered items (Office Dashboard, View Pricelists, etc.) never got that reset
       and rendered at the browser-default 16px instead of the button items' 14px. */
    font-size: 0.875rem;
    /* <a>-rendered items (Office Dashboard, View Pricelists, etc.) otherwise pick up the browser's
       default underline that <button>-rendered items (Stock Check) never had — the global button{}
       reset already sets text-decoration: none, this makes the two link types match it exactly. */
    text-decoration: none;
}
.tools-menu-item:hover { background: var(--color-bg); }

/* Same shaded-background treatment as .lead-card-reminder / .office-dash-row-ready — flags the Office
   Dashboard item when it has a Ready order waiting, same signal that drives .tools-menu-badge on the
   outer "Tools" trigger. */
.tools-menu-item-notify { background: var(--color-success-bg); }
.tools-menu-item-notify:hover { background: var(--color-success-bg); filter: brightness(0.97); }

.tools-menu-item-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-success);
    flex-shrink: 0;
}

/* ── Master-detail body ─────────────────────────────────────── */
.crm-body { display: flex; gap: var(--space-4); align-items: flex-start; }

/* Capped relative to viewport (nav bar + the page's own header/toolbar above it, roughly measured,
   plus a bottom buffer) so a long lead list can't push the pane taller than the screen — the list
   itself then flex-fills whatever room is left under its own header (search/filters/New Lead), rather
   than both being sized independently against a flat 70vh that didn't account for what's above them. */
.crm-list-pane {
    width: 340px;
    flex-shrink: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 220px);
}

.crm-detail-pane {
    flex: 1;
    min-width: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: var(--space-5) var(--space-6);
}

/* Shown for the duration of a lead's data fetch — covers both a first-ever selection (which otherwise
   shows the generic "Select a lead" placeholder) and switching between two already-selected leads
   (which otherwise leaves the previous lead's stale data on screen until the new one arrives). */
.crm-detail-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-8) 0;
    color: var(--color-text-muted);
}
.spinner {
    width: 28px;
    height: 28px;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-red);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

.crm-list-header h3 { margin-bottom: var(--space-3); }
.crm-list-header .form-row { margin-bottom: var(--space-2); }

.crm-list-filters {
    display: flex;
    gap: var(--space-4);
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    margin-bottom: var(--space-3);
    flex-wrap: wrap;
}
.crm-list-filters label { display: flex; align-items: center; gap: var(--space-1); }

.crm-sort-filter-panel {
    display: flex;
    align-items: flex-end;
    gap: var(--space-4);
    flex-wrap: wrap;
    padding: var(--space-3);
    margin-bottom: var(--space-3);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}
.crm-sort-filter-panel .field { margin-bottom: 0; }
.crm-sort-filter-panel .toggle-switch { margin-bottom: var(--space-2); }

/* New Lead sits alongside the (optional) expanded Sort & Filter panel, rather than the panel
   rendering in a separate row below it. */
.crm-new-lead-row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-3);
}
.crm-new-lead-row .crm-sort-filter-panel { flex: 1; min-width: 220px; margin-bottom: 0; }

.crm-back-btn { display: none; margin-bottom: var(--space-3); }

.crm-detail-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-4);
}
.crm-detail-header h2 { margin-bottom: var(--space-1); }
.crm-detail-meta { font-size: 0.8125rem; color: var(--color-text-muted); }

/* OrderEntry-only — .crm-detail-header itself is shared with CrmDashboard, which shouldn't also become
   sticky. Docks just below the fixed .top-nav (var(--nav-height)); needs its own opaque background since
   sticky elements sit above whatever scrolls underneath them. */
.order-entry-sticky-header {
    position: sticky;
    top: var(--nav-height);
    z-index: 90;
    background: var(--color-bg);
    padding-top: var(--space-4);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.lead-expiry-warning {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
    margin-left: var(--space-2);
    vertical-align: middle;
}
.lead-expiry-warning-orange { color: var(--color-orange); background: var(--color-orange-bg); }
.lead-expiry-warning-red    { color: var(--color-danger); background: var(--color-danger-bg); }

/* ── Lead cards ─────────────────────────────────────────────── */
.lead-card-list { display: flex; flex-direction: column; gap: var(--space-2); flex: 1 1 auto; min-height: 120px; overflow-y: auto; }

.lead-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-3) var(--space-4);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.lead-card:hover { border-color: #c0c4cc; }
.lead-card-selected { background: var(--color-red-light); border-color: var(--color-red-border); }

/* Same shaded-background + left-edge-band treatment as .note-card-reminder in the Notes tab, plus a
   small dot badge (kept from the old expiry indicator) so Reminder (yellow/amber) and Orange expiry
   stay visually distinct even though both are warm colors. Priority Red > Orange > Reminder — a lead
   that's both expiring and has a reminder due shows the expiry color; the reminder still shows via
   its bell icon in .lead-card-badges. */
.lead-card-reminder      { border-left: 3px solid var(--color-warning); background: var(--color-warning-bg); }
.lead-card-expiry-orange { border-left: 3px solid var(--color-orange); background: var(--color-orange-bg); }
/* --color-danger, not --color-red — matches the Red used by OrderTile/LeadStatusPanel's status
   dots (.status-dot.red), not the brand red used for buttons/selected state. */
.lead-card-expiry-red    { border-left: 3px solid var(--color-danger); background: var(--color-danger-bg); }

.lead-card-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.lead-card-name { font-weight: 700; font-size: 0.9375rem; }

.lead-card-badges { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }

.lead-badge { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.lead-badge-red    { background: var(--color-danger); }
.lead-badge-orange { background: var(--color-orange); }
.lead-badge-reminder { font-size: 0.8125rem; width: auto; height: auto; }

.lead-card-shipto { font-size: 0.75rem; color: var(--color-text-muted); margin-top: 2px; }

.lead-card-meta {
    display: flex;
    gap: var(--space-2);
    font-size: 0.75rem;
    color: var(--color-text-subtle);
    margin-top: var(--space-2);
}

/* ── Contact info card ──────────────────────────────────────── */
.contact-info-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-4) var(--space-5);
    margin-bottom: var(--space-4);
}
.contact-info-card h4 { margin-bottom: var(--space-3); text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.06em; color: var(--color-text-muted); }

.contact-info-groups {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2) var(--space-6);
}

.info-row { display: flex; gap: var(--space-2); font-size: 0.875rem; padding: 2px 0; }
.info-label { color: var(--color-text-muted); min-width: 90px; flex-shrink: 0; }
.info-value { color: var(--color-text); font-weight: 500; }

/* ── Customer Info modal (New Lead / Edit Customer Info — CustomerNewForm.vb) ──── */
.modal-customer-info { max-width: 840px; width: 95vw; }

.customer-info-panels { display: flex; gap: var(--space-5); align-items: flex-start; margin-top: var(--space-2); }
.customer-info-panel { flex: 1; min-width: 0; margin-bottom: 0; }
.customer-info-panel-disabled { opacity: 0.55; }

.customer-info-shipto-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.customer-info-sameassoldto { align-self: flex-start; }

.customer-info-validation-row { border-top: 1px solid var(--color-border); padding-top: var(--space-3); margin-top: var(--space-2); }
.address-validation-label { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-text-muted); white-space: nowrap; }

/* ── KPI tiles ──────────────────────────────────────────────── */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.kpi-tile {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-3) var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.kpi-value { font-size: 1.25rem; font-weight: 700; }
.kpi-label { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); }

/* ── Quick actions ──────────────────────────────────────────── */
.quick-actions { margin-bottom: var(--space-5); }
.quick-actions h4 { text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.06em; color: var(--color-text-muted); margin-bottom: var(--space-3); }
.quick-actions-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ── Summary tab layout ─────────────────────────────────────── */
.crm-summary-grid { display: grid; grid-template-columns: 1fr 280px; gap: var(--space-6); align-items: start; }

/* ── Status row / Lead status panel (shared by LeadStatusPanel & OrderTile) ── */
.lead-status-panel {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-4);
}
.lead-status-panel h4 { text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.06em; color: var(--color-text-muted); margin-bottom: var(--space-3); }

.status-row-list { display: flex; flex-direction: column; gap: var(--space-2); }

.status-row { display: flex; align-items: baseline; gap: var(--space-2); font-size: 0.8125rem; }
.status-category { color: var(--color-text-muted); min-width: 80px; flex-shrink: 0; }
.status-desc { font-weight: 600; }

.status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; align-self: center; }
.status-dot.grey,  .status-desc.grey  { color: var(--color-text-subtle); }
.status-dot.red,   .status-desc.red   { color: var(--color-danger); }
.status-dot.amber, .status-desc.amber { color: var(--color-warning); }
.status-dot.green, .status-desc.green { color: var(--color-success); }
.status-dot.grey  { background: var(--color-text-subtle); }
.status-dot.red   { background: var(--color-danger); }
.status-dot.amber { background: var(--color-warning); }
.status-dot.green { background: var(--color-success); }

/* ── Orders & Quotes tab ────────────────────────────────────── */
.orders-tab-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}
.orders-tab-header h4 { margin-bottom: 0; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.06em; color: var(--color-text-muted); }
.orders-tab-subheader { text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.06em; color: var(--color-text-muted); margin: var(--space-6) 0 var(--space-3); }

.order-tile-grid { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-4); }

.order-tile {
    width: 280px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-3) var(--space-4);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: border-color 0.15s;
}
.order-tile:hover { border-color: #c0c4cc; }
.order-tile-selected { border-color: var(--color-blue); border-width: 2px; }

.order-tile-top { display: flex; justify-content: space-between; gap: var(--space-3); }

.order-tile-no { font-weight: 700; font-size: 0.9375rem; }
.order-tile-cuf { font-size: 0.75rem; color: var(--color-text-muted); }
.order-tile-type { font-size: 0.75rem; margin-top: var(--space-1); }
.order-tile-date { font-size: 0.75rem; color: var(--color-text-muted); }

.order-tile-financials { text-align: right; flex-shrink: 0; }
.order-tile-fin-row { display: flex; justify-content: space-between; gap: var(--space-2); font-size: 0.75rem; min-width: 130px; }
.order-tile-fin-row span:first-child { color: var(--color-text-muted); }

.order-tile-divider { height: 1px; background: var(--color-border); margin: var(--space-3) 0; }

.order-tile-conditions { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-3); }

.order-tile-ready {
    width: 100%;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    font-size: 0.8125rem;
    height: 34px;
}
.order-tile-ready.ready { background: var(--color-success); border-color: var(--color-success); color: #fff; }

.order-tile-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin-top: var(--space-2); }
.order-tile-action { width: 100%; height: 34px; }

/* ── E-Sign modal ───────────────────────────────────────────── */
.modal-esign { max-width: 520px; width: 95vw; }
.esign-status-block { border: 1px solid var(--color-border); border-radius: 6px; padding: var(--space-3); margin-bottom: var(--space-3); }
.esign-resend-note { color: var(--color-text-muted); font-size: 0.8125rem; margin-top: var(--space-2); }
.esign-send-options { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }

/* Same fix as .order-lines-table above: .summary-table's overflow:hidden (for rounded corners) also
   clips this table's per-row kebab dropdown, since it extends below the table's own bounds. */
.invoice-table { overflow: visible; }
.invoice-table thead tr th:first-child { border-top-left-radius: var(--radius); }
.invoice-table thead tr th:last-child { border-top-right-radius: var(--radius); }
.invoice-table tr { cursor: pointer; }
/* !important so selection reliably wins over higher-specificity backgrounds sharing this class
   elsewhere (e.g. Order Lookup's zebra striping, .order-lookup-table tbody tr:nth-child(even) td,
   which otherwise outranks this rule's specificity on even rows) — same precedent as
   .product-picker-row-selected. */
.invoice-row-selected td { background: var(--color-blue-light) !important; }

/* ── Sample Log tab ─────────────────────────────────────────── */
.sample-checklist { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }

.sample-row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-3) var(--space-4);
    cursor: pointer;
}

.sample-row input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; width: auto; height: auto; }

.sample-row-body { display: flex; flex-direction: column; gap: 2px; }
.sample-desc { font-weight: 600; font-size: 0.875rem; }
.sample-meta { font-size: 0.75rem; color: var(--color-text-muted); }

.sample-check-done {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-success);
    font-size: 0.75rem;
    font-weight: 700;
    margin-top: 3px;
}

.sample-checklist-returned .sample-row { cursor: default; background: var(--color-bg); }
.sample-checklist-returned .sample-desc { color: var(--color-text-muted); font-weight: 500; }

/* ── Notes tab ──────────────────────────────────────────────── */
.note-feed { display: flex; flex-direction: column; gap: var(--space-3); }

.note-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-4);
}
.note-card-reminder { border-left: 3px solid var(--color-warning); background: var(--color-warning-bg); }

.note-reminder-badge {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-warning);
    margin-bottom: var(--space-2);
}

.note-text { font-size: 0.875rem; margin-bottom: var(--space-3); white-space: pre-wrap; }

.note-reminder-locked-hint {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    margin-top: var(--space-1);
}

.note-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.note-byline { font-size: 0.75rem; color: var(--color-text-subtle); }
.note-reminder-pending { color: var(--color-text-muted); }
.note-actions { display: flex; gap: var(--space-2); }

/* ── Activity Log tab ───────────────────────────────────────── */
.activity-heading { margin-top: 0; }

.activity-feed {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0 var(--space-4);
}

.activity-row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border);
}
.activity-row:last-child { border-bottom: none; }

.activity-type {
    flex-shrink: 0;
    width: 100px;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
}

.activity-main { display: flex; flex-direction: column; gap: 2px; }
.activity-desc { font-size: 0.875rem; }
.activity-meta { font-size: 0.75rem; color: var(--color-text-subtle); }

/* ── Payment tab ────────────────────────────────────────────── */
.payment-order-table { margin-bottom: var(--space-5); }
.payment-order-table tbody tr { cursor: pointer; }
.payment-order-table tr.payment-row-selected td { background: var(--color-blue-light); }
.payment-order-table td:nth-child(3), .payment-order-table td:nth-child(4), .payment-order-table td:nth-child(5),
.payment-order-table th:nth-child(3), .payment-order-table th:nth-child(4), .payment-order-table th:nth-child(5) { text-align: right; }

.payment-profile-list { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-3); }

.payment-profile-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-2);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-3) var(--space-4);
    cursor: pointer;
}
.payment-profile-selected { border-color: var(--color-blue); border-width: 2px; }

.payment-profile-main { display: flex; align-items: baseline; gap: var(--space-3); }
.payment-profile-card { font-weight: 700; font-size: 0.9375rem; }
.payment-profile-card-sub { font-weight: 400; font-size: 0.8125rem; color: var(--color-text-muted); margin-left: var(--space-1); }
.payment-profile-expiry { font-size: 0.8125rem; color: var(--color-text-muted); }

.payment-profile-badges { display: flex; gap: var(--space-2); flex-wrap: wrap; }

.validation-badge {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
}
.validation-badge.green { background: var(--color-success-bg); color: var(--color-success); }
.validation-badge.amber { background: var(--color-warning-bg); color: var(--color-warning); }
.validation-badge.red   { background: var(--color-red-light); color: var(--color-red); }
.validation-badge.grey  { background: var(--color-bg); color: var(--color-text-subtle); }

.payment-history-header { margin-top: var(--space-5); }

.payment-history-table tbody tr { cursor: pointer; }
.payment-history-table tr.payment-row-selected td { background: var(--color-blue-light); }

.payment-source-other { font-size: 0.75rem; color: var(--color-text-subtle); }

.payment-action-row {
    display: flex;
    align-items: flex-end;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-top: var(--space-4);
}

.payment-outstanding { display: flex; flex-direction: column; gap: 2px; }
.payment-amount-field { margin-bottom: 0; max-width: 160px; }

/* ── Segmented control (reused: OrderEntry order type) ─────── */
.segmented-control {
    display: inline-flex;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 3px;
}

.segment, .segment-active {
    background: transparent;
    border: none;
    height: 32px;
    padding: 0 var(--space-4);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-muted);
    border-radius: var(--radius-sm);
}
.segment-active { background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-sm); }

/* ── OrderEntry — classification strip ─────────────────────── */
.order-classification {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-4);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-4);
    margin-bottom: var(--space-5);
}

.order-classification-field { margin-bottom: 0; min-width: 160px; }

.order-classification-check {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.875rem;
    height: 40px;
    white-space: nowrap;
}
.order-classification-check input { width: auto; }

.order-classification-locked { opacity: 0.6; }

/* ── OrderEntry — line entry strip ──────────────────────────── */
.line-entry {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-4);
    margin-bottom: var(--space-5);
}

.line-entry-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--color-blue-light);
    border-left: 3px solid var(--color-blue);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-4);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-blue);
}

.line-entry-fields {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.line-entry-field-code { margin-bottom: 0; width: 90px; }
.line-entry-field-desc { margin-bottom: 0; width: 180px; }
.line-entry-field-sm { margin-bottom: 0; width: 90px; }

.line-entry-addons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
}

.line-entry-addons-mobile { display: none; }

.addons-menu { position: relative; }
.addons-menu-dropdown { min-width: 180px; }

.moulding-filter-input { display: block; width: 100%; margin-bottom: var(--space-3); }
.picker-list { display: flex; flex-direction: column; gap: var(--space-1); max-height: 320px; overflow-y: auto; margin-bottom: var(--space-2); }
.picker-item {
    text-align: left;
    justify-content: flex-start;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    font-size: 0.875rem;
}
.picker-item:hover { border-color: var(--color-blue); }

.notes-textarea {
    width: 100%;
    resize: vertical;
    font-family: inherit;
    font-size: 0.875rem;
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.notes-readonly-text { white-space: pre-wrap; font-size: 0.875rem; padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg); }

.modal-notes { max-width: 620px; }

.notes-presets { margin-bottom: var(--space-4); }
.notes-presets-label { display: block; text-transform: uppercase; font-size: 0.6875rem; letter-spacing: 0.06em; color: var(--color-text-muted); margin-bottom: var(--space-2); }
.notes-preset-pills { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.notes-preset-pill {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: var(--space-1) var(--space-3);
    font-size: 0.8125rem;
    color: var(--color-text);
    cursor: pointer;
}
.notes-preset-pill:hover { border-color: var(--color-blue); color: var(--color-blue); }

/* ── OrderEntry — Product Picker (Browse + Search) ───────────── */
/* overflow-x here (not on .product-picker-browse-desktop) is deliberate: panes size to their own
   content with no cap, so if the row of panes together exceeds the modal's width, the whole modal
   scrolls horizontally rather than an inner row scrolling under a truncated view. */
.modal-product-picker { max-width: 960px; width: 95vw; overflow-x: auto; }

.product-picker-toprow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
}

.product-picker-discontinued { font-size: 0.8125rem; color: var(--color-text-muted); display: flex; align-items: center; gap: var(--space-2); }

.product-picker-browse-desktop { display: flex; gap: var(--space-3); padding-bottom: var(--space-2); }
.product-picker-browse-mobile { display: none; }

.product-picker-pane { flex: 0 0 auto; width: max-content; min-width: 170px; }
.product-picker-pane-header {
    text-transform: uppercase;
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    margin-bottom: var(--space-2);
}
.product-picker-pane-list {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    max-height: 300px;
    overflow-y: auto;
}
.product-picker-mobile-list { max-height: 340px; }

.product-picker-item {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-2) var(--space-3);
    font-size: 0.8125rem;
    color: var(--color-text);
    cursor: pointer;
}
.product-picker-item:last-child { border-bottom: none; }
.product-picker-item:hover { background: var(--color-bg); }
.product-picker-item-selected, .product-picker-item-selected:hover { background: var(--color-blue); color: #fff; }

.product-picker-breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-bottom: var(--space-3);
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}
.product-picker-crumb { background: transparent; border: none; padding: 0; font-size: 0.8125rem; color: var(--color-text-muted); cursor: pointer; }
.product-picker-crumb-active { color: var(--color-blue); font-weight: 600; }

.product-picker-search-fields { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.product-picker-search-input {
    flex: 1 1 140px;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
}
.product-picker-search-input-code { flex: 0 1 90px; }

.product-picker-results-scroll { max-height: 320px; overflow-y: auto; }
.product-picker-results-table thead th { cursor: pointer; user-select: none; }
.product-picker-results-table tbody tr { cursor: pointer; }
.product-picker-results-table tbody tr:hover td { background: var(--color-bg); }
.product-picker-row-selected td { background: var(--color-blue-light) !important; }

.product-picker-instock-badge {
    background: var(--color-blue-light);
    color: var(--color-blue);
    border-radius: var(--radius-sm);
    padding: 2px 6px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* ── Stock Check (read-only — shares .modal-product-picker + .product-picker-* with Product Picker) */
.stock-check-discontinued { margin-bottom: var(--space-3); }
.stock-check-item-heading { margin-bottom: var(--space-3); font-size: 0.9375rem; }
.stock-check-table tbody tr:hover td { background: transparent; }
.stock-check-row-inhouse td { font-weight: 600; }

/* ── Pricelist (own page, opens in a new tab — reference tool kept open in the background) ──── */
.pricelist-shell h2 { margin-bottom: var(--space-4); }

.pricelist-toprow { display: flex; gap: var(--space-4); margin-bottom: var(--space-4); }

.pricelist-body { display: flex; gap: var(--space-4); align-items: flex-start; }

.pricelist-nav-desktop { display: flex; gap: var(--space-3); flex-shrink: 0; }
.pricelist-nav-mobile { display: none; }
.pricelist-nav-list { max-height: 420px; }

/* Display list can run to 50-100+ items with long names — grow to fit content (both directions)
   up to a sane cap, then fall back to the inherited scroll (.product-picker-pane-list) once even
   that cap is exceeded. */
.pricelist-display-pane { flex: 0 1 auto; width: max-content; min-width: 170px; max-width: min(420px, 32vw); }
.pricelist-display-pane .product-picker-item { overflow-wrap: break-word; }
.pricelist-display-list { max-height: min(640px, calc(100vh - 260px)); overflow-x: hidden; }

/* flex-wrap approximates the original's "dock right if there's room, else dock underneath" behavior
   with pure CSS (no JS width-measuring): each grid gets a min-width, and the Mouldings box wraps to
   its own line once the row can't fit both at their minimums. */
.pricelist-grids { display: flex; flex-wrap: wrap; gap: var(--space-4); flex: 1; min-width: 0; align-items: flex-start; }
/* No overflow/min-width:0 clipping here — a wide table is allowed to overflow past this box (and
   past .crm-shell's full-bleed 100vw) so the page itself scrolls horizontally, rather than hunting
   for a scrollbar buried at the bottom of a tall internal scroll container. */
.pricelist-grid-main { flex: 2 1 480px; }
.pricelist-grid-mouldings { flex: 1 1 240px; min-width: 0; max-width: 320px; overflow-x: auto; }
.pricelist-mobile-tabs { display: none; }

/* Denser than the default .summary-table — these lists can run long, so every row counts. */
.pricelist-table th, .pricelist-table td { padding: var(--space-1) var(--space-2); font-size: 0.75rem; line-height: 1.25; }
.pricelist-table tbody tr:nth-child(even) td { background: var(--color-bg); }
/* Overrides .summary-table's width:100% — grow past the container to natural content width
   instead of squeezing every column into whatever room is left. */
.pricelist-grid-main .pricelist-table { width: max-content; min-width: 100%; }

/* ── Sample Log (own page, opens in a new tab — store-wide sample browsing/search tool,
   distinct from CrmDashboard's per-lead Sample Log tab) ─────────────────────────────── */
.samplelog-shell h2 { margin-bottom: var(--space-4); }

.samplelog-body { display: flex; gap: var(--space-4); align-items: flex-start; }

/* Capped relative to viewport (nav bar + this page's own "Sample Log" heading above it, plus a
   bottom buffer) so a long record list can't push the page taller than the screen — the table itself
   then flex-fills whatever room is left under its own header/search panel, same pattern as
   .crm-list-pane/.lead-card-list. */
.samplelog-list-pane {
    flex: 3 1 480px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    /* 56px nav bar + 32px .main-content top padding + 46px "Sample Log" h2 (30px + 16px margin) + 24px
       .crm-shell bottom padding + 32px .main-content bottom padding = 190px of fixed chrome around this
       pane, measured directly rather than guessed — a too-small offset here (180px was 10px short)
       leaves just enough page-level overflow to trigger an unwanted whole-page scrollbar. */
    max-height: calc(100vh - 190px);
}
.samplelog-detail-pane {
    flex: 2 1 360px;
    min-width: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: var(--space-5) var(--space-6);
}

.samplelog-table-scroll { flex: 1 1 auto; min-height: 120px; overflow: auto; }

/* "All Outstanding" modal — wider than the default .modal-notes cap (4 data columns) and its table
   scrolls internally, same fixed-cap convention as .picker-list/.order-lookup-results-scroll, so a long
   outstanding-samples list can't push the modal past the viewport. */
.modal-outstanding { max-width: 760px; }
.samplelog-outstanding-scroll { max-height: 420px; overflow-y: auto; margin-bottom: var(--space-3); }
.sortable-th { cursor: pointer; user-select: none; white-space: nowrap; }

/* Sticky header inside a scrolling wrapper — the standard technique every data-grid library uses
   internally (AG Grid, MUI DataGrid, etc.): one <table>, one column-width computation (so header and
   body cells can never drift out of alignment, unlike splitting thead/tbody into separate block boxes),
   with just the header row pinned via position:sticky as its content scrolls underneath. .summary-table's
   own overflow:hidden (for its rounded corners) would otherwise become the sticky positioning context
   instead of the actual scroll wrapper, so overflow/radius/shadow move from the table onto the wrapper —
   an overflow:auto container with its own border-radius clips its scrolling content just as cleanly. */
.samplelog-table-scroll,
.manager-dash-table-area .admin-table-scroll,
.samplelog-outstanding-scroll {
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.samplelog-table-scroll table,
.manager-dash-table-area table,
.samplelog-outstanding-scroll table {
    overflow: visible;
    border-radius: 0;
    box-shadow: none;
}
.samplelog-table-scroll table thead th,
.manager-dash-table-area table thead th,
.samplelog-outstanding-scroll table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
}
.samplelog-table tbody tr { cursor: pointer; }

.samplelog-search-panel {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
}
.samplelog-search-actions { justify-content: flex-start; }

.samplelog-detail-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-2); }
.samplelog-detail-meta { font-size: 0.8125rem; color: var(--color-text-muted); }

.samplelog-pending-item { display: flex; align-items: center; justify-content: space-between; cursor: default; }
.samplelog-pending-item:hover { border-color: var(--color-border); }

/* ── Generic sortable table header (Sample Log, Order Lookup, ...) ──────────── */
.sortable-th { cursor: pointer; user-select: none; white-space: nowrap; }

/* ── Generic inline confirm banner (yes/no prompt without a native dialog) ──── */
.confirm-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    background: var(--color-blue-light);
    border-left: 3px solid var(--color-blue);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-4);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-blue);
}
.confirm-banner-actions { display: flex; gap: var(--space-2); flex-shrink: 0; }

/* ── Order Lookup (dialog — Tools menu, store-wide order search with/without a lead) ────── */
.order-lookup-search { margin-bottom: var(--space-4); }

/* 4-column grid (label, field, label, field) so every field lines up to the same column widths
   across rows, regardless of label text length — a flex .form-row per line can't guarantee that. */
.order-lookup-search-grid {
    display: grid;
    grid-template-columns: max-content 1fr max-content 1fr;
    gap: var(--space-3) var(--space-3);
    align-items: center;
    margin-bottom: var(--space-3);
}
.order-lookup-search-grid label {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    white-space: nowrap;
}
.order-lookup-search-grid input[type="text"] { width: 100%; }

.date-range-field { display: flex; align-items: center; gap: var(--space-2); }
.date-range-field input[type="date"] { flex: 1; min-width: 0; }
.date-range-toggle { flex-shrink: 0; }

.order-lookup-checks { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-3); }
.order-lookup-permission-note { font-size: 0.75rem; }
.order-lookup-search-actions { justify-content: flex-start; margin-top: var(--space-2); }

.order-lookup-results-scroll { max-height: 420px; overflow-y: auto; overflow-x: auto; }
.order-lookup-table th, .order-lookup-table td { white-space: nowrap; padding: var(--space-1) var(--space-2); font-size: 0.75rem; line-height: 1.25; }
.order-lookup-table tbody tr { cursor: pointer; }
.order-lookup-table tbody tr:nth-child(even) td { background: var(--color-bg); }

/* Action bar sits directly under the table and only appears once a row is selected — ties the
   actions to their context instead of floating disabled buttons at the bottom of the whole dialog. */
.selected-row-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
    flex-shrink: 0;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-4);
    margin-top: var(--space-3);
}
.selected-row-label { font-size: 0.875rem; }

/* ── Admin (Tools menu, ManagerOnly + future AdminOnly flag — Users + Reference Tables tabs) ──── */
.admin-users-filter { display: block; width: 100%; max-width: 360px; margin-bottom: var(--space-3); }
.admin-table-scroll { overflow-x: auto; }
.admin-users-table tbody tr { cursor: pointer; }

.admin-manage-user-modal { max-width: 560px; }
.admin-modal-subheader { margin: var(--space-5) 0 var(--space-3); font-size: 0.9375rem; }

.admin-toggle-grid { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); margin-bottom: var(--space-2); }

.admin-store-checklist { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.admin-store-check { display: inline-flex; align-items: center; gap: var(--space-1); font-size: 0.875rem; }
.admin-store-check input { width: auto; }

.admin-reset-password-panel {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
}
.admin-reset-password-actions { justify-content: flex-start; margin-top: var(--space-2); }
.admin-reset-password-confirm { color: var(--color-success); font-size: 0.875rem; font-weight: 600; }

.admin-reference-body { display: flex; gap: var(--space-4); align-items: flex-start; }
.admin-reference-nav { flex-shrink: 0; }
.admin-reference-editor { flex: 1; min-width: 0; }

.admin-reference-list { display: flex; flex-direction: column; gap: var(--space-2); max-width: 420px; }
.admin-reference-row { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.admin-reference-row input, .admin-reference-row textarea { flex: 1; }

.admin-terms-category-bar { margin-bottom: var(--space-4); }
.admin-terms-hint { color: var(--color-text-muted); font-size: 0.8125rem; margin-bottom: var(--space-3); }

/* ── Office + Manager Dashboards (Tools menu, own page/new tab — non-modal singletons in the original) ── */
.dashboard-filters { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-4); flex-shrink: 0; }
.dashboard-filters .form-row { margin-bottom: 0; }
.office-dash-table tbody tr { cursor: pointer; }
.office-dash-row-ready td { background: var(--color-success-bg) !important; }

.manager-dash-close-rate { font-size: 0.9375rem; font-style: italic; font-weight: 700; white-space: nowrap; }
.manager-dash-note-cell {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Capped relative to viewport (nav bar + the page's own "Manager Dashboard" heading above it, plus a
   bottom buffer) so a long lead list can't push the action bar off-page — the table area flex-fills
   whatever room is left under the filters/tabs, and the selected-row action bar stays pinned right
   below it instead of requiring a full-page scroll to reach. Same pattern as .crm-list-pane. */
.manager-dash-body {
    display: flex;
    flex-direction: column;
    /* 56px nav bar + 32px .main-content top padding + 30px "Manager Dashboard" h2 (no margin-bottom on
       this page's plain h2, unlike Sample Log's) + 24px .crm-shell bottom padding + 32px .main-content
       bottom padding = 174px of fixed chrome, measured directly rather than guessed. */
    max-height: calc(100vh - 174px);
}
.manager-dash-table-area { flex: 1 1 auto; min-height: 120px; overflow: hidden; display: flex; flex-direction: column; }
.manager-dash-table-area .admin-table-scroll { flex: 1 1 auto; overflow: auto; }

/* ── OrderEntry — totals & completion ────────────────────────── */
.order-totals {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-4);
    max-width: 360px;
    margin-left: auto;
}

.order-totals-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-2) 0;
    font-size: 0.875rem;
}
.order-totals-row + .order-totals-row { border-top: 1px solid var(--color-border); }

.order-totals-total { font-weight: 700; font-size: 1rem; }
.order-totals-balance { font-weight: 700; font-size: 1.0625rem; color: var(--color-blue); }

.order-totals-deposit-input { display: flex; gap: var(--space-2); align-items: center; }
.order-totals-deposit-input input { width: 100px; text-align: right; }

.order-complete-btn { width: 100%; margin-top: var(--space-4); }

/* .summary-table sets overflow:hidden (to clip content to its rounded corners), but that also clips
   any per-line kebab dropdown that needs to extend below the table's own bounds. Override it here and
   round the header row's own corners directly instead, so the visual look is unaffected. */
.order-lines-table { table-layout: fixed; overflow: visible; }
.order-lines-table thead tr th:first-child { border-top-left-radius: var(--radius); }
.order-lines-table thead tr th:last-child { border-top-right-radius: var(--radius); }
.order-lines-table col.col-select { width: 4%; }
.order-lines-table col.col-style { width: 8%; }
.order-lines-table col.col-colour { width: 7%; }
.order-lines-table col.col-desc { width: 17%; }
.order-lines-table col.col-colourdesc { width: 13%; }
.order-lines-table col.col-qty { width: 6%; }
.order-lines-table col.col-unit { width: 6%; }
.order-lines-table col.col-unitprice { width: 9%; }
.order-lines-table col.col-linetotal { width: 9%; }
.order-lines-table col.col-rollno { width: 6%; }
.order-lines-table col.col-actions { width: 15%; }

/* Generic utility — used across many tables (Pricelist, Office Dashboard, Compufloor History, Admin,
   Order Lookup, Sample Log, Stock Check, etc.), not just order-lines-table. */
.align-right { text-align: right; }

/* Every table already marks its <th> with align-right to match its right-aligned <td> cells, but
   .summary-table th/.report-table th (an element+class selector, specificity 0,1,1) was silently
   beating the plain .align-right class (0,1,0) and forcing every one of those headers back to
   text-align: left. Bumping this override to a class+element+class selector wins outright. */
.summary-table th.align-right, .report-table th.align-right { text-align: right; }

.order-lines-table .order-lines-group-header td {
    background: var(--color-bg);
    font-weight: 700;
    font-size: 0.8125rem;
    color: var(--color-text);
}

.order-lines-table .order-lines-group-header .order-lines-group-total-cell {
    font-style: italic;
    color: var(--color-blue);
    font-weight: 600;
}

.order-lines-table tr.order-line-row-grouped.group-accent-a td:first-child {
    box-shadow: inset 3px 0 0 var(--color-blue);
}
.order-lines-table tr.order-line-row-grouped.group-accent-b td:first-child {
    box-shadow: inset 3px 0 0 var(--color-blue-border);
}
.order-lines-table tr.order-line-row-grouped:not(.order-lines-group-header) td:nth-child(4) { padding-left: calc(var(--space-3) + 6px); }

.order-line-row-editing td { background: var(--color-blue-light); }

.order-lines-bulk-actions { display: flex; align-items: center; gap: var(--space-2); }

.group-rename-trigger { border: none; background: transparent; margin-left: var(--space-2); font-size: 0.75rem; }
.group-rename-row { display: flex; align-items: center; gap: var(--space-2); }
.group-rename-input {
    flex: 1;
    height: 28px;
    font-size: 0.8125rem;
    font-weight: 700;
    border: 1px solid var(--color-blue);
    border-radius: var(--radius-sm);
    padding: 0 var(--space-2);
}

.order-lines-actions { white-space: nowrap; }

.order-lines-actions-desktop { display: flex; align-items: center; gap: var(--space-2); }
.order-lines-actions-mobile { display: none; position: relative; }

.btn-icon-stack { display: flex; flex-direction: column; gap: 2px; }

.btn-icon {
    width: 26px;
    height: 24px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    border-radius: var(--radius-sm);
    font-size: 0.625rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}
.btn-icon:disabled { opacity: 0.35; cursor: default; }
.btn-icon:not(:disabled):hover { background: var(--color-bg); }

.line-kebab-trigger {
    width: 32px;
    height: 32px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    border-radius: var(--radius-sm);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}
.line-kebab-trigger:hover { background: var(--color-bg); }

/* Desktop-only per-line action icons (Stock Check / Add-ons) — replaces the old desktop "Add-ons for
   this line" kebab with two direct square icon buttons, same sizing/visual language as the kebab. */
.line-icon-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    border-radius: var(--radius-sm);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    color: var(--color-text);
}
.line-icon-btn:disabled { opacity: 0.35; cursor: default; }
.line-icon-btn:not(:disabled):hover { background: var(--color-bg); }
.line-icon-btn svg { flex-shrink: 0; width: 14px; height: 14px; }

.line-kebab-dropdown { min-width: 160px; }

.invoice-row-actions { position: relative; text-align: right; }

/* ── Documents tab ──────────────────────────────────────────── */
.documents-upload-zone { position: relative; }
.doc-dropzone {
    border: 2px dashed var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-6);
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.875rem;
    margin-bottom: var(--space-4);
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.doc-dropzone-active { border-color: var(--color-red); background: var(--color-red-light); color: var(--color-red); }

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

.document-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-3) var(--space-4);
}

.document-icon { font-size: 1.5rem; flex-shrink: 0; }

.document-main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.document-name { font-weight: 600; font-size: 0.875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.document-meta { font-size: 0.75rem; color: var(--color-text-subtle); }

.document-actions { display: flex; gap: var(--space-2); flex-shrink: 0; }

/* ── Responsive: master-detail collapse on mobile ──────────── */
@media (max-width: 900px) {
    .crm-shell { padding: 0 var(--space-4) var(--space-4); }

    .crm-header-toggle { display: inline-flex; }
    .crm-header-content { display: none; }
    .crm-header.expanded .crm-header-content { display: flex; flex-direction: column; align-items: stretch; }

    .tools-menu-desktop { display: none; }
    .tools-menu-mobile { display: block; }

    .crm-body { flex-direction: column; }
    .crm-list-pane, .crm-detail-pane { width: 100%; }

    .crm-body.has-selection .crm-list-pane { display: none; }
    .crm-body:not(.has-selection) .crm-detail-pane { display: none; }

    .crm-body.has-selection .crm-back-btn { display: inline-flex; }

    .crm-summary-grid { grid-template-columns: 1fr; }
    .contact-info-groups { grid-template-columns: 1fr; }

    .order-tile { width: 100%; }
    .invoice-table .col-secondary { display: none; }
    .payment-order-table .col-secondary { display: none; }
    /* visibility:collapse on <col> is unreliable in Safari/iOS (silently ignored, leaving the
       column's width allocated in this table-layout:fixed table and causing severe cell overlap) —
       zero the col width (universally honored) and separately hide the cells themselves, same
       pattern already used successfully by every other .col-secondary table in this file. */
    .order-lines-table col.col-secondary { width: 0; }
    .order-lines-table td.col-secondary, .order-lines-table th.col-secondary { display: none; }
    .order-lines-table col.col-desc { width: 24%; }
    .order-lines-table col.col-colourdesc { width: 20%; }
    .order-lines-table col.col-qty { width: 12%; }
    .order-lines-table col.col-unit { width: 10%; }
    .order-lines-table col.col-linetotal { width: 16%; }
    .order-lines-table col.col-actions { width: 18%; }
    .order-lines-table tr.order-line-row-grouped td:first-child { box-shadow: none; }
    .order-lines-table tr.order-line-row-grouped.group-accent-a.order-lines-group-header td:nth-child(2),
    .order-lines-table tr.order-line-row-grouped.group-accent-a:not(.order-lines-group-header) td:nth-child(4) {
        box-shadow: inset 3px 0 0 var(--color-blue);
    }
    .order-lines-table tr.order-line-row-grouped.group-accent-b.order-lines-group-header td:nth-child(2),
    .order-lines-table tr.order-line-row-grouped.group-accent-b:not(.order-lines-group-header) td:nth-child(4) {
        box-shadow: inset 3px 0 0 var(--color-blue-border);
    }
    .order-lines-actions-desktop { display: none; }
    .order-lines-actions-mobile { display: block; }

    .line-entry-addons-desktop { display: none; }
    .line-entry-addons-mobile { display: flex; }

    .modal-product-picker { width: 100%; }
    .product-picker-browse-desktop { display: none; }
    .product-picker-browse-mobile { display: block; }
    .modal-customer-info { width: 100%; }
    .customer-info-panels { flex-direction: column; }
    .product-picker-results-table .col-secondary { display: none; }
    .stock-check-table .col-secondary { display: none; }
    .pricelist-table .col-secondary { display: none; }

    .pricelist-nav-desktop { display: none; }
    .pricelist-nav-mobile { display: block; }
    .pricelist-body { flex-direction: column; align-items: stretch; min-width: 0; }
    .pricelist-grids { flex-direction: column; align-items: stretch; min-width: 0; }
    .pricelist-grid-main, .pricelist-grid-mouldings { flex: 1 1 auto; width: 100%; max-width: none; min-width: 0; }
    .pricelist-mobile-tabs { display: block; margin-bottom: var(--space-3); }
    .pricelist-hide-mobile { display: none; }

    .activity-row { flex-direction: column; gap: 2px; }
    .activity-type { width: auto; }

    .document-row { flex-wrap: wrap; }
    .document-actions { width: 100%; justify-content: flex-end; }

    .samplelog-table .col-secondary { display: none; }
    .samplelog-body { flex-direction: column; }
    .samplelog-list-pane, .samplelog-detail-pane { width: 100%; }
    .samplelog-body.has-selection .samplelog-list-pane { display: none; }
    .samplelog-body:not(.has-selection) .samplelog-detail-pane { display: none; }
    .samplelog-body.has-selection .crm-back-btn { display: inline-flex; }

    .order-lookup-table .col-secondary { display: none; }
    .order-lookup-search-grid { grid-template-columns: max-content 1fr; }
    .selected-row-bar { flex-direction: column; align-items: stretch; }

    .admin-users-table .col-secondary { display: none; }
    .admin-reference-body { flex-direction: column; }

    .office-dash-table .col-secondary { display: none; }
    .dashboard-filters { flex-direction: column; align-items: stretch; }
}