/* ===== Geist — self-hosted (spine BRAND.md: FLOW aligns to Geist) =====
   Variable woff2 (weight 100–900), extracted from the spine reference mocks
   (kontoryard/spine@42cdfeb) so the wordmark / <y tile / Powered-by credit render
   correctly and offline (FLOW is an offline-first PWA — no CDN font on the critical
   path). Do not re-point these at Google Fonts. */
@font-face {
    font-family: 'Geist';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/geist-sans.woff2?v=5.141.0') format('woff2');
}
@font-face {
    font-family: 'Geist Mono';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/geist-mono.woff2?v=5.141.0') format('woff2');
}

/* ===== Design System v5.0.0 ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
button,
.btn-primary,
.btn-secondary,
.proc-btn {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

:root {
    --primary: #dc143c;
    --primary-light: #e9486b;
    --primary-dark: #b01030;
    --primary-wash: rgba(220, 20, 60, 0.06);
    --grad: linear-gradient(135deg, #dc143c, #ec5a1e 60%, #f59e0b);
    --gold: #f59e0b;
    --gold-light: #fcd34d;
    --bg: #ffffff;
    --surface: #f7f7f8;
    --card: #ffffff;
    --text: #1a1a1a;
    --text-muted: #6b7280;
    --border: #e5e7eb;
    --border-light: #f0f0f2;
    --success: #059669;
    --danger: #dc2626;
    --warning: #d97706;
    --whatsapp: #25d366;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1);
    --r-sm: 6px;
    --r-md: 8px;
    --r-lg: 12px;
    --r-full: 9999px;
}

html,
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    -webkit-tap-highlight-color: transparent;
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
}

/* ===== Header ===== */
.app-header {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Pad the notch/status-bar inset so the brand tile clears the clock & battery (viewport-fit=cover) */
    padding: env(safe-area-inset-top) 16px 0;
    height: calc(56px + env(safe-area-inset-top));
    background: #fff;
    color: var(--primary);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.header-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    flex: 1;
    min-width: 0;
}
.header-text {
    flex: 1;
    min-width: 0;
}
/* FLOW wordmark — light-ember gradient tuned to read on the maroon header */
.header-flow {
    display: inline-block; /* shrink to the text so the gradient maps across the letters, exactly like the splash */
    font-family:
        'Geist',
        -apple-system,
        BlinkMacSystemFont,
        'Segoe UI',
        Roboto,
        sans-serif;
    font-weight: 800;
    font-size: 24px;
    letter-spacing: -0.01em;
    line-height: 1;
    background: linear-gradient(100deg, #dc143c 0%, #f59e0b 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.header-wordmark-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
/* Parent /<y tile — consumed from mark-ky.svg (canonical), says "a Kontor Yard app" */
.header-ky-tile {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    display: block;
}
/* Mount point for the spine per-product name-motion mark; the mark styles itself. */
.header-motion {
    display: inline-flex;
    align-items: center;
    line-height: 0;
}
.header-subtitle {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-muted);
    margin-top: 2px;
}
.btn-icon {
    background: none;
    border: none;
    color: var(--primary);
    cursor: pointer;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-md);
    transition:
        background 0.15s,
        transform 0.15s;
    flex-shrink: 0;
}
.btn-icon:hover {
    background: var(--primary-wash);
    transform: scale(1.08);
}
.btn-icon:active {
    background: var(--primary-wash);
    transform: scale(1);
}
/* Tenant logo slot — the org's own branding, top-right of the bar (admins upload) */
.tenant-slot {
    display: flex;
    align-items: center;
    margin-right: 6px;
    min-width: 0;
}
#tenantLogoImg {
    height: 32px;
    max-width: 110px;
    object-fit: contain;
    display: block;
}
.tenant-logo-add {
    border: 1px dashed var(--border);
    background: none;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: var(--r-md);
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    transition: all 0.15s;
}
.tenant-logo-add:hover {
    color: var(--primary);
    border-color: var(--primary);
}

/* ===== Header centre search + right cluster =====
   Bar order: FLOW brand left · search centre · tenant logo + grid + help right. */
.header-search {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 1 300px;
    min-width: 0;
    padding: 8px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-full);
    color: var(--text-muted);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    transition:
        border-color 0.15s,
        color 0.15s;
}
.header-search:hover {
    border-color: var(--primary);
    color: var(--text);
}
.header-search svg {
    flex-shrink: 0;
}
.header-search-text {
    flex: 1;
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
}
.header-search-kbd {
    font-size: 11px;
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 1px 5px;
    color: var(--text-muted);
}
.header-right {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    min-width: 0;
}
.nav-rail {
    display: none;
}
.tenant-name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text);
    margin-left: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
}
.tenant-name--empty {
    color: var(--text-muted);
    font-weight: 500;
}
.profile-circle {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    margin-left: 8px;
    border: none;
    border-radius: 50%;
    background: var(--grad);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.profile-circle {
    transition:
        transform 0.15s,
        box-shadow 0.15s;
}
.profile-circle:hover {
    transform: scale(1.1);
    box-shadow: var(--shadow-md);
}
.profile-circle:active {
    filter: brightness(0.9);
    transform: scale(1);
}
@media (max-width: 600px) {
    .hide-mobile {
        display: none !important;
    }
}
/* ===== Place lens chips ===== */
.place-chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    margin-bottom: 14px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.place-chips::-webkit-scrollbar {
    display: none;
}
.place-chips:empty {
    display: none;
}
.place-chip {
    flex: 0 0 auto;
    padding: 7px 14px;
    border: 1px solid var(--border);
    border-radius: var(--r-full);
    background: var(--card);
    color: var(--text);
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition:
        background 0.15s,
        border-color 0.15s,
        color 0.15s;
}
.place-chip:hover {
    border-color: var(--primary-light);
    color: var(--primary);
    background: var(--primary-wash);
}
.place-chip.active {
    background: var(--grad);
    color: #fff;
    border-color: transparent;
}
/* count badge inside a chip (e.g. payment-status chips: "Pending 5") */
.place-chip .chip-n {
    opacity: 0.55;
    font-weight: 600;
    margin-left: 1px;
}
.place-chip.active .chip-n {
    opacity: 0.85;
}
/* "Entered in Busy" reconciliation tick — a small pill on Receipts/Payments rows.
   Muted until ticked; green once the entry is posted to Busy. */
.busy-tick {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border: 1px solid var(--border);
    border-radius: var(--r-full);
    background: var(--surface, var(--card));
    color: var(--text-muted);
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
    cursor: pointer;
    transition:
        background 0.15s,
        border-color 0.15s,
        color 0.15s;
}
.busy-tick:hover {
    border-color: var(--primary-light);
    color: var(--primary);
}
.busy-tick.on {
    background: #ecfdf5;
    border-color: #6ee7b7;
    color: #047857;
}
.busy-tick.on:hover {
    border-color: #34d399;
    color: #065f46;
}
/* Payments: ageing of an outstanding order, and the list total row */
.pay-age {
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.pay-age.age-mid {
    color: #b45309;
    font-weight: 600;
}
.pay-age.age-old {
    color: #c62828;
    font-weight: 700;
}
.orders-table tfoot .pay-total-row td {
    font-weight: 700;
    border-top: 2px solid var(--border);
    background: var(--surface);
}
.pay-total-line {
    display: flex;
    justify-content: space-between;
    padding: 12px 14px;
    margin-top: 8px;
    border-top: 2px solid var(--border);
    font-weight: 700;
}

/* ===== Powered by /<ontor yard — the shared spine footer =====
   The credit is the spine's make-powered-by.js (app/brand/), mounted into #app-footer
   in NORMAL flow — never position:fixed (the old pinned .powered-by-bar overlapped the
   phone buttons; that bug is gone). Body is a flex column so the footer reserves its own
   space and drops to the bottom when a screen is short. It shows only once signed in. */
body {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}
#app-footer {
    display: none;
}
body.app-on #app-footer {
    display: block;
    margin-top: auto;
}

/* ===== Feedback screenshots =====
   Captured automatically when the modal opens; the sender previews it and can
   remove it. Admins see a thumbnail per item, click for full size. */
.fb-shot-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding: 8px 10px;
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: var(--r-md);
}
.fb-shot-thumb {
    height: 44px;
    border-radius: 6px;
    border: 1px solid var(--border);
}
.fb-shot-status {
    flex: 1;
    font-size: 12px;
    color: var(--text-muted);
}
.fb-shot-remove {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 14px;
    padding: 4px;
}
.fb-shot-remove:hover {
    color: var(--danger);
}
.fb-shot-mini {
    display: block;
    height: 110px;
    margin: 8px 0 4px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    cursor: zoom-in;
}
.shot-overlay {
    position: fixed;
    inset: 0;
    z-index: 400;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    cursor: zoom-out;
}
.shot-overlay img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
}

@media (max-width: 600px) {
    /* phones: the search pill collapses to a plain icon button */
    .header-search {
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
        padding: 0;
        justify-content: center;
        background: none;
        border: none;
        color: var(--primary);
    }
    .header-search-text,
    .header-search-kbd {
        display: none;
    }
}

/* ===== Quick Menu ===== */
.quick-menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 150;
}
.quick-menu-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.quick-menu-panel {
    position: absolute;
    top: 60px;
    right: 12px;
    background: white;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    min-width: 220px;
    overflow: visible;
    animation: menuSlide 0.15s ease-out;
}
@keyframes menuSlide {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.quick-menu-panel button {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 18px;
    border: none;
    background: white;
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    cursor: pointer;
    text-align: left;
    border-bottom: 1px solid var(--border-light);
    transition:
        background 0.1s,
        color 0.1s;
    position: relative;
}
.quick-menu-panel button:last-child {
    border-bottom: none;
}
.quick-menu-panel button:hover {
    background: var(--primary-wash);
    color: var(--primary);
}
.quick-menu-panel button:active {
    background: var(--surface);
}
.quick-menu-panel button svg {
    color: var(--primary);
    flex-shrink: 0;
}
.quick-menu-user {
    padding: 10px 18px;
    font-size: 12px;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    font-weight: 500;
}

/* ===== Screens ===== */
.screen {
    display: none;
    padding: 20px 16px;
    padding-bottom: 160px;
    width: 100%; /* body is a flex column (for the footer) — without an
                              explicit width a flex item shrinks to its content, so
                              screens must claim the full column; max-width still caps. */
    max-width: 600px;
    margin: 0 auto;
}
.screen.active {
    display: block;
    animation: screenFadeIn 0.2s ease-out;
}
/* Opacity-only — deliberately NO transform. The order screen's fixed cart pane
   lives inside a .screen; a transform on .screen.active would re-anchor that
   position:fixed to the screen (not the viewport) and make the cart scroll/overlap
   with the content — badly on iOS Safari. Keep the fade transform-free. */
@keyframes screenFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
.screen-title {
    display: flex;
    align-items: center;
    gap: 10px;
    position: sticky;
    top: 56px; /* below the sticky app header */
    z-index: 50;
    background: var(--bg);
    margin: 0 -16px 12px;
    padding: 10px 16px;
}
.screen-title h2 {
    flex: 1;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.3px;
}
.order-num {
    font-size: 12px;
    color: var(--primary);
    font-weight: 600;
    background: var(--primary-wash);
    padding: 4px 10px;
    border-radius: var(--r-sm);
}
.btn-back {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    font-size: 18px;
    font-weight: 600;
    padding: 6px 12px;
    cursor: pointer;
    color: var(--primary);
    box-shadow: var(--shadow-sm);
    transition:
        transform 0.18s cubic-bezier(0.25, 0.1, 0.25, 1),
        box-shadow 0.18s,
        background 0.15s;
    will-change: transform;
}
.btn-back:hover {
    transform: scale(1.08);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.btn-back:active {
    background: var(--primary-wash);
    transform: scale(0.98);
}

/* ===== Design System ===== */
.ds-section-title {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
    margin-bottom: 12px;
}

/* ===== Dashboard ===== */
.dashboard-greeting {
    margin-bottom: 20px;
}
.dashboard-greeting h2 {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.3px;
    color: var(--text);
}
.dashboard-greeting .greeting-date {
    font-size: 14px;
    color: var(--text-muted);
    margin-top: 2px;
}
.dashboard-greeting .greeting-meta {
    font-size: 12px;
    color: var(--text-muted);
    opacity: 0.85;
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}

.ds-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-start;
    padding: 12px 0;
    margin-bottom: 36px;
    align-items: flex-start;
    height: 76px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.ds-actions::-webkit-scrollbar {
    display: none;
}
/* auto margins center the row when it fits, unlike justify-content:center
   which clips the left edge once the row overflows */
.ds-action:first-child {
    margin-left: auto;
}
.ds-action:last-child {
    margin-right: auto;
}
.ds-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 84px;
    flex-shrink: 0;
    padding: 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    cursor: pointer;
    transition:
        transform 0.18s cubic-bezier(0.25, 0.1, 0.25, 1),
        box-shadow 0.18s,
        gap 0.18s;
    font-family: inherit;
    transform-origin: bottom center;
    will-change: transform;
    position: relative;
    z-index: 1;
}
.ds-action-label {
    font-size: 11px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition:
        max-height 0.2s,
        opacity 0.15s,
        margin-top 0.2s;
    margin-top: 0;
}
.ds-action:hover {
    z-index: 10;
    transform: translateY(-22px);
}
.ds-action:hover .ds-action-label {
    max-height: 20px;
    opacity: 1;
    margin-top: 4px;
}
.ds-action:active {
    border-color: var(--primary);
    color: var(--primary);
}
.ds-action svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}
.ds-action-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: var(--danger);
    color: white;
    font-size: 10px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    line-height: 1;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
/* ===== Mobile home — command tiles (role-adaptive) =====
   Renders inside #dashboardActions (mobile only; the nav rail covers desktop).
   New Order is the gradient hero; every role-allowed destination is a tap tile. */
.home-hero {
    display: flex;
    align-items: center;
    gap: 13px;
    width: 100%;
    padding: 15px 18px;
    background: var(--grad);
    color: #fff;
    border: none;
    border-radius: 16px;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    box-shadow: 0 12px 24px -12px rgba(220, 20, 60, 0.5);
    transition:
        filter 0.15s,
        transform 0.15s;
}
.home-hero:active {
    filter: brightness(0.93);
    transform: scale(0.99);
}
.home-hero-ic {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
}
.home-hero-ic svg {
    width: 21px;
    height: 21px;
}
.home-hero-txt {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.home-hero-title {
    font-size: 17px;
    font-weight: 700;
}
.home-hero-sub {
    font-size: 12px;
    opacity: 0.9;
    margin-top: 1px;
}
.home-hero-chev {
    font-size: 22px;
    opacity: 0.85;
    line-height: 1;
    flex-shrink: 0;
}

.home-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 10px;
}
.home-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 92px;
    padding: 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 15px;
    cursor: pointer;
    font-family: inherit;
    color: var(--text);
    text-align: left;
    transition:
        transform 0.15s cubic-bezier(0.25, 0.1, 0.25, 1),
        box-shadow 0.15s,
        border-color 0.15s;
}
.home-tile:active {
    transform: scale(0.97);
    border-color: var(--primary);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}
.home-tile-ic {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--primary-wash);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
}
.home-tile-ic svg {
    width: 20px;
    height: 20px;
}
.home-tile-label {
    font-size: 14px;
    font-weight: 600;
    margin-top: 12px;
}
.home-tile-sub {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}
/* Badge functions insert .ds-action-badge into the tile; anchor it to the tile
   corner (higher specificity beats the base and the ≤600 row placement). */
.home-tile .ds-action-badge {
    top: 11px;
    right: 11px;
    left: auto;
    bottom: auto;
    transform: none;
}

/* ===== Procurement catalogue home (dashboard Home for the catalogue role) ===== */
.cat-home-card {
    background: var(--grad);
    color: #fff;
    border-radius: 16px;
    padding: 16px 18px;
    margin-bottom: 14px;
    box-shadow: 0 12px 24px -12px rgba(220, 20, 60, 0.45);
}
.cat-home-vertop {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}
.cat-home-verlabel {
    font-size: 12px;
    font-weight: 600;
    opacity: 0.9;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.cat-home-vernum {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
}
.cat-home-stats {
    display: flex;
    gap: 28px;
    margin-top: 12px;
}
.cat-home-stats div {
    display: flex;
    flex-direction: column;
}
.cat-home-stats b {
    font-size: 20px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.cat-home-stats span {
    font-size: 11px;
    opacity: 0.85;
    font-weight: 500;
}
.cat-home-search-wrap {
    position: relative;
    margin-bottom: 14px;
}
.cat-home-search-wrap svg {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--text-muted);
}
.cat-home-search {
    width: 100%;
    height: 46px;
    padding: 0 14px 0 42px;
    border: 1px solid var(--border);
    border-radius: 12px;
    font-size: 15px;
    font-family: inherit;
    background: var(--surface);
    color: var(--text);
}
.cat-home-search:focus {
    outline: none;
    border-color: var(--primary);
}
.cat-home-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.cat-home-act {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    transition:
        transform 0.15s,
        border-color 0.15s;
}
.cat-home-act:active {
    transform: scale(0.97);
    border-color: var(--primary);
}
.cat-home-ic {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--primary-wash);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
.cat-home-ic svg {
    width: 19px;
    height: 19px;
}
@media (min-width: 768px) {
    .cat-home-actions {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 767px) {
    /* Turn the (mobile-only) actions container from the dock strip into the grid. */
    #dashboardActions {
        display: block;
        height: auto;
        overflow: visible;
        padding: 0;
        margin-bottom: 20px;
    }
    .ds-actions-title {
        display: block;
        margin-bottom: 10px;
    }
}

/* ===== Connection status (pill · dot · popover · banner) =====
   Desktop = labelled pill; mobile = the dot alone. Colours encode the state. */
.conn-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.conn-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 30px;
    padding: 0 11px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: transparent;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: filter 0.15s;
}
.conn-status:hover {
    filter: brightness(0.97);
}
.conn-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: none;
}
.conn-label {
    line-height: 1;
}
.conn-online {
    color: #0b7a52;
    background: rgba(5, 150, 105, 0.1);
}
.conn-online .conn-dot {
    background: var(--success);
}
.conn-syncing {
    color: #1d4ed8;
    background: rgba(37, 99, 235, 0.1);
}
/* Background work in progress → the dot becomes a spinning ring (like SYNC). */
.conn-syncing .conn-dot {
    background: transparent;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(37, 99, 235, 0.28);
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: connSpin 0.7s linear infinite;
}
@keyframes connSpin {
    to {
        transform: rotate(360deg);
    }
}
@media (prefers-reduced-motion: reduce) {
    .conn-syncing .conn-dot {
        animation: none;
        background: #2563eb;
        border-color: transparent;
    }
}
.conn-offline {
    color: #b45309;
    background: rgba(217, 119, 6, 0.12);
}
.conn-offline .conn-dot {
    background: var(--warning);
}
.conn-noserver {
    color: #b91c1c;
    background: rgba(220, 38, 38, 0.1);
}
.conn-noserver .conn-dot {
    background: var(--danger);
}
@media (prefers-reduced-motion: no-preference) {
    .conn-syncing .conn-dot {
        animation: connSpin 0.7s linear infinite;
    }
}

.conn-popover {
    position: absolute;
    top: 38px;
    right: 0;
    width: 232px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
    padding: 14px;
    z-index: 400;
    display: none;
}
.conn-popover.open {
    display: block;
}
.conn-pop-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.conn-pop-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}
.conn-popover.conn-online .conn-pop-head .conn-dot {
    background: var(--success);
}
.conn-popover.conn-syncing .conn-pop-head .conn-dot {
    background: #2563eb;
}
.conn-popover.conn-offline .conn-pop-head .conn-dot {
    background: var(--warning);
}
.conn-popover.conn-noserver .conn-pop-head .conn-dot {
    background: var(--danger);
}
.conn-pop-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    padding: 7px 0;
    border-top: 1px solid var(--border-light);
    color: var(--text-muted);
}
.conn-pop-row b {
    color: var(--text);
    font-weight: 600;
}
.conn-pop-btn {
    width: 100%;
    margin-top: 10px;
    height: 34px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--primary);
    font-family: inherit;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
}
.conn-pop-btn:active {
    background: var(--primary-wash);
}

.conn-banner {
    padding: 9px 16px;
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
}
.conn-banner.conn-syncing {
    background: #e6efff;
    color: #1e40af;
}
.conn-banner.conn-offline {
    background: #fef1e0;
    color: #92400e;
}
.conn-banner.conn-noserver {
    background: #fde5e5;
    color: #991b1b;
}

@media (max-width: 767px) {
    /* Collapse the pill to the coloured dot alone in the tight mobile bar. */
    .conn-status {
        padding: 0;
        width: 30px;
        justify-content: center;
        background: transparent;
    }
    .conn-label {
        display: none;
    }
    .conn-popover {
        width: 210px;
        right: -8px;
    }
}

#procAdminActions button {
    transition:
        transform 0.18s cubic-bezier(0.25, 0.1, 0.25, 1),
        box-shadow 0.18s;
    transform-origin: bottom center;
    will-change: transform;
}
/* Green screen-title add button: + Inward, + Add, + New, + Send */
.btn-primary.btn-add {
    background: var(--success);
    font-size: 13px;
    padding: 8px 14px;
    transition:
        transform 0.18s cubic-bezier(0.25, 0.1, 0.25, 1),
        box-shadow 0.18s,
        background 0.15s;
    will-change: transform;
}
.btn-primary.btn-add:hover {
    transform: scale(1.12);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}
.btn-primary.btn-add:active {
    background: #047857;
    transform: scale(0.98);
}
.ds-action--hero {
    position: fixed;
    margin: 0;
    z-index: 3000;
    pointer-events: none;
    transform-origin: left center;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    transition: none;
}

/* Dashboard Tabs */
.dash-tabs {
    display: flex;
    gap: 0;
    background: var(--surface);
    border-radius: var(--r-lg);
    margin-bottom: 20px;
    overflow: hidden;
    border: 1px solid var(--border);
}
.dash-tab {
    flex: 1;
    padding: 10px 8px;
    border: none;
    background: transparent;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}
.dash-tab:hover:not(.active) {
    background: var(--primary-wash);
    color: var(--primary);
}
.dash-tab.active {
    background: var(--grad);
    color: white;
}

/* ===== Compact mobile home =====
   Phones get a tighter return-visit home: smaller greeting, a three-tile stat
   strip, and the action dock becomes a labelled "Trade channel" list (the dock's
   hover-reveal labels never show on touch). Desktop keeps the dock + KPI grids. */
.ds-actions-title {
    display: none;
}
#homeStatStrip {
    display: none;
}
@media (max-width: 600px) {
    .dashboard-greeting {
        margin-bottom: 12px;
    }
    .dashboard-greeting h2 {
        font-size: 19px;
    }
    .dashboard-greeting .greeting-date {
        font-size: 12px;
        margin-top: 0;
    }

    #homeStatStrip {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 8px;
        margin-bottom: 16px;
    }
    .hs-tile {
        background: var(--surface);
        border: 1px solid var(--border-light);
        border-radius: var(--r-md);
        padding: 10px 6px;
        text-align: center;
    }
    .hs-val {
        font-size: 17px;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
    }
    .hs-lbl {
        font-size: 10px;
        font-weight: 600;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.4px;
        margin-top: 2px;
    }

    .ds-actions-title {
        display: block;
        margin-bottom: 8px;
    }
    .ds-actions {
        flex-direction: column;
        align-items: stretch;
        height: auto;
        gap: 8px;
        padding: 0;
        margin-bottom: 18px;
        overflow: visible;
    }
    .ds-action:first-child {
        margin-left: 0;
    }
    .ds-action:last-child {
        margin-right: 0;
    }
    .ds-action {
        flex-direction: row;
        justify-content: flex-start;
        gap: 12px;
        width: 100%;
        padding: 11px 14px;
    }
    .ds-action svg {
        width: 18px;
        height: 18px;
    }
    .ds-action-label {
        max-height: none;
        opacity: 1;
        margin-top: 0;
        font-size: 13px;
        font-weight: 600;
    }
    .ds-action::after {
        content: '›';
        margin-left: auto;
        color: var(--text-muted);
        font-size: 17px;
        line-height: 1;
    }
    .ds-action:hover {
        transform: none;
    }
    .ds-action-badge {
        top: 50%;
        right: 30px;
        transform: translateY(-50%);
    }

    .dash-tabs {
        margin-bottom: 14px;
    }
    .ds-section-title {
        margin-bottom: 8px;
    }
    .kpi-grid {
        gap: 8px;
    }
    .kpi-card {
        padding: 12px 10px;
    }
    .kpi-val {
        font-size: 18px;
    }
}

.dashboard-stats {
    margin-bottom: 20px;
}
.stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.stat-card {
    background: var(--card);
    border-radius: var(--r-lg);
    padding: 16px;
    text-align: center;
    box-shadow: var(--shadow-sm);
}
.stat-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.stat-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
    font-weight: 500;
}
.stat-sub {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}
.stat-clickable {
    cursor: pointer;
    transition: box-shadow 0.15s;
}
.stat-clickable:active {
    box-shadow: var(--shadow-md);
}
.stat-grid--methods {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.stat-grid--methods .stat-card {
    padding: 10px 8px;
}
.stat-grid--methods .stat-value {
    font-size: 15px;
}
.stat-grid--methods .stat-label {
    font-size: 10px;
    margin-top: 2px;
    letter-spacing: 0.3px;
}

/* ===== Search ===== */
.search-bar {
    margin-bottom: 12px;
}
.search-bar input,
.form-input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    font-size: 15px;
    font-family: inherit;
    background: white;
    transition:
        border-color 0.15s,
        box-shadow 0.15s,
        font-weight 0.15s;
    color: var(--text);
    box-sizing: border-box;
}
select:hover,
input[type='date']:hover {
    font-weight: 700;
}
.search-bar input:focus,
.form-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-wash);
}

/* ===== Orders List ===== */
.orders-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}
.order-card {
    background: var(--card);
    border-radius: var(--r-lg);
    padding: 14px 16px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-light);
}
.order-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}
.order-card-num {
    font-weight: 600;
    color: var(--primary);
    font-size: 13px;
}
.order-card-total {
    font-weight: 700;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}
.order-card-customer {
    font-size: 14px;
    font-weight: 500;
}
.order-card-meta {
    display: flex;
    gap: 12px;
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
    flex-wrap: wrap;
}
/* ===== Cards (form containers) ===== */
.card {
    background: var(--card);
    border-radius: var(--r-lg);
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: var(--shadow-sm);
}
.card-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 14px;
}

/* ===== Forms ===== */
.form-group {
    margin-bottom: 16px;
}
.form-group label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    font-size: 15px;
    font-family: inherit;
    background: white;
    transition:
        border-color 0.15s,
        box-shadow 0.15s;
    color: var(--text);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-wash);
}
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* ===== Buttons ===== */
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    background: var(--grad);
    color: white;
    border: none;
    border-radius: var(--r-md);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: filter 0.15s;
    font-family: inherit;
}
.btn-primary:active {
    filter: brightness(0.88);
    transform: scale(0.98);
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: white;
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
}
.btn-secondary:active {
    background: var(--surface);
    transform: scale(0.98);
}

.btn-danger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: white;
    color: var(--danger);
    border: 1px solid var(--danger);
    border-radius: var(--r-md);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
}
.btn-danger:active {
    background: #fef2f2;
    transform: scale(0.98);
}

.btn-large {
    width: 100%;
    justify-content: center;
    padding: 12px;
    font-size: 15px;
}

.btn-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    background: var(--whatsapp);
    color: white;
    border: none;
    border-radius: var(--r-md);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
}
.btn-whatsapp:active {
    background: #1da851;
}

/* Scan is the primary action on the order screen — a big, comfortable thumb
   target. Manual sits beside it as a smaller companion; Upload is desktop-only. */
.btn-scan {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex: 1;
    min-height: 64px;
    padding: 16px;
    background: var(--gold);
    color: var(--text);
    border: none;
    border-radius: var(--r-md);
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
}
.btn-scan svg {
    width: 26px;
    height: 26px;
}
.btn-scan:active {
    background: var(--gold-light);
    transform: scale(0.99);
}

/* Order screen: four equal action buttons across one row (Rapid Scan · Add New
   Product · Upload · Start Shared Order-the gradient hero), then a full-width
   gradient search bar with a shine sweep. Equal font + box size across all four. */
/* Phone: a 2-column grid. Rapid Scan is the primary action, so it spans the full
   width on top; Add New Product + Guest Scanner sit side-by-side below. Boxes get
   ~half the row (plenty for the labels) instead of four nowrap buttons squeezed
   into one line where the text overflowed. Desktop (≥768) resets to a 4-col grid. */
/* Phone: Rapid Scan · Add New Product · Guest Scanner on ONE line, compact
   (owner, 2026-08-18). Icon over a small label; Upload stays desktop-only. */
#screen-order .scan-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
#screen-order .scan-row > .btn-manual,
#screen-order .scan-row > #guestSessionBar {
    min-width: 0;
}
#screen-order .scan-row > .btn-manual.btn-upload-append {
    display: none;
}
#screen-order .scan-row #guestSessionBar {
    display: flex;
    padding: 0;
    margin: 0;
}
#screen-order .scan-row .btn-scan,
#screen-order .scan-row .btn-manual,
#screen-order .scan-row .btn-guest-start {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-align: center;
    width: 100%;
    min-height: 52px;
    padding: 7px 4px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.15;
    white-space: normal;
}
#screen-order .scan-row .btn-scan svg {
    width: 20px;
    height: 20px;
}
#screen-order .scan-row .btn-guest-start {
    background: var(--grad);
    color: #fff;
    border: none;
    border-radius: var(--r-md);
    cursor: pointer;
    box-shadow: 0 3px 14px rgba(220, 20, 60, 0.18);
}
#screen-order .scan-row .btn-guest-start svg {
    width: 18px;
    height: 18px;
}
#screen-order .search-bar {
    position: relative;
    overflow: hidden;
    border-radius: var(--r-md);
    background:
        linear-gradient(var(--card), var(--card)) padding-box,
        var(--grad) border-box;
    border: 2.5px solid transparent;
    box-shadow: 0 3px 16px rgba(220, 20, 60, 0.12);
}
#screen-order .search-bar input {
    border: none;
    background: transparent;
    box-shadow: none;
    padding: 15px 16px;
    font-size: 16px;
    font-weight: 700;
    background-image: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    caret-color: var(--primary);
}
#screen-order .search-bar input::placeholder {
    -webkit-text-fill-color: initial;
    color: var(--primary);
    opacity: 0.75;
    font-weight: 700;
}
#screen-order .search-bar input:focus {
    box-shadow: none;
    outline: none;
}
#screen-order .search-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: 42%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.85), transparent);
    transform: skewX(-18deg);
    animation: flow-shine 3.4s ease-in-out infinite;
    pointer-events: none;
}
@keyframes flow-shine {
    0%,
    20% {
        left: -60%;
    }
    62%,
    100% {
        left: 130%;
    }
}
@media (prefers-reduced-motion: reduce) {
    #screen-order .search-bar::after {
        animation: none;
        display: none;
    }
}
.scan-row {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}
.btn-manual {
    padding: 12px 14px;
    background: white;
    color: var(--primary);
    border: 1px solid var(--primary);
    border-radius: var(--r-md);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    font-family: inherit;
    flex-shrink: 0;
}
.btn-manual:active {
    background: var(--primary-wash);
}
/* Uploading items is a desktop convenience — hidden on the phone (Modernization) */
.btn-upload-append {
    display: none;
}

/* ===== New Order intro cards ===== */
/* Equal-size neutral cards (2-up on phone, 3-up on desktop). No loud gradient —
   Start Shared Order just wears FLOW-gradient *text* as its quiet signature.
   All cards zoom slightly on hover. */
.intro-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}
.intro-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-height: 128px;
    padding: 18px 16px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition:
        transform 0.18s cubic-bezier(0.25, 0.1, 0.25, 1),
        box-shadow 0.18s,
        border-color 0.18s;
    will-change: transform;
}
.intro-card:hover {
    transform: scale(1.04);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
    border-color: var(--primary-light);
}
.intro-card:active {
    transform: scale(0.98);
}
.intro-card svg {
    color: var(--primary);
    margin-bottom: 2px;
}
.intro-card-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
}
.intro-card-sub {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.3;
}
/* Start Shared Order — FLOW's signature: gradient title text (not a gradient card) */
.intro-card--shared .intro-card-title {
    background: linear-gradient(100deg, #dc143c 0%, #f59e0b 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
/* Upload from a file is a desktop convenience — hidden on the phone */
.intro-card--upload {
    display: none;
}

/* Found-customer card inside the capture modal's name/phone step */
.cc-found {
    margin-top: 12px;
    padding: 12px 14px;
    background: var(--primary-wash);
    border: 1px solid var(--primary-light);
    border-radius: var(--r-md);
}
.cc-found-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--primary);
}
.cc-found-meta {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}
.cc-found-hd {
    font-size: 11.5px;
    color: var(--text-muted);
    margin-bottom: 8px;
}
.cc-found-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    text-align: left;
    background: var(--card);
    border: 1px solid var(--border-light);
    border-radius: var(--r-sm);
    padding: 8px 11px;
    margin-bottom: 6px;
    cursor: pointer;
}
.cc-found-row:last-of-type {
    margin-bottom: 0;
}
.cc-found-row:hover {
    border-color: var(--primary);
}
.cc-found-row-main {
    min-width: 0;
    font-size: 13px;
}
.cc-found-row-meta {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 400;
    margin-top: 1px;
}
.cc-found-row-use {
    font-size: 12px;
    color: var(--primary);
    white-space: nowrap;
    font-weight: 600;
}
.cc-found-more {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 6px;
    text-align: center;
}

/* ===== Customer capture modal (stepped) ===== */
.cc-dots {
    display: flex;
    justify-content: center;
    gap: 7px;
    padding: 14px 0 4px;
}
.cc-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--border);
    transition:
        background 0.2s,
        transform 0.2s;
}
.cc-dot.active {
    background: var(--primary);
    transform: scale(1.25);
}
.cc-body {
    padding: 8px 20px 4px;
}
.cc-step {
    display: none;
}
.cc-step.active {
    display: block;
}
.cc-hint {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 10px;
    line-height: 1.4;
}
.cc-phone-row {
    display: flex;
    gap: 8px;
}
.cc-dial {
    flex: 0 0 64px;
    text-align: center;
    font-weight: 600;
}
.cc-phone-num {
    flex: 1;
    min-width: 0;
}
.cc-error {
    font-size: 12px;
    color: var(--danger, #dc143c);
    margin-top: 6px;
}
.cc-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px 18px;
    border-top: 1px solid var(--border-light);
}
.cc-footer .btn-secondary {
    flex: 0 0 auto;
}
.cc-footer .btn-primary {
    flex: 1;
}
.cc-skip {
    flex: 0 0 auto;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    padding: 8px;
}
.cc-skip:active {
    color: var(--text);
}

/* Step-1 visiting-card scan: the gradient hero. Same FLOW gradient + shape as the
   home hero, sized for the capture modal. A clean scan fills every field and skips
   the rest of the steps. */
.cc-scan-hero {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 13px 15px;
    margin-bottom: 12px;
    background: var(--grad);
    color: #fff;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    box-shadow: 0 10px 22px -12px rgba(220, 20, 60, 0.55);
    transition:
        filter 0.15s,
        transform 0.15s;
}
.cc-scan-hero:active {
    filter: brightness(0.94);
    transform: scale(0.99);
}
.cc-scan-hero-ic {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
}
.cc-scan-hero-txt {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.cc-scan-hero-title {
    font-size: 15px;
    font-weight: 700;
}
.cc-scan-hero-sub {
    font-size: 12px;
    opacity: 0.9;
    margin-top: 1px;
}
.cc-scan-hero-arrow {
    flex-shrink: 0;
    opacity: 0.85;
}

/* Scan status / result — reads back what OCR captured (or an error to retry). */
.cc-scan-status {
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--text);
    background: var(--primary-wash);
    border-radius: var(--r-sm);
    padding: 9px 12px;
    margin-bottom: 12px;
}
.cc-scan-status.is-error {
    background: #fdecec;
    color: var(--danger, #dc143c);
}
.cc-scan-status b {
    font-weight: 700;
}

/* "or enter manually" divider between the scan hero and the fields. */
.cc-or {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 0 12px;
    color: var(--text-muted);
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.cc-or::before,
.cc-or::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-light);
}

/* ===== Photo Capture ===== */
.photo-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    border: 2px dashed var(--border);
    border-radius: var(--r-md);
    cursor: pointer;
    color: var(--text-muted);
    font-size: 14px;
    gap: 8px;
    overflow: hidden;
    position: relative;
}
.photo-preview img {
    width: 100%;
    height: auto;
    max-height: 200px;
    object-fit: contain;
    border-radius: var(--r-sm);
}
.photo-preview.has-photo {
    border-style: solid;
    border-color: var(--success);
    min-height: auto;
}
.photos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.photos-grid img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--r-sm);
    cursor: pointer;
}
.photo-thumb-wrap {
    position: relative;
}
.photo-remove-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: rgba(220, 38, 38, 0.85);
    color: white;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===== Order Sections ===== */
.section-subtotal {
    text-align: right;
    font-weight: 700;
    font-size: 14px;
    color: var(--text);
    padding: 8px 0 4px;
    border-top: 1px solid var(--border);
    margin-top: 4px;
}
.multiplier-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--card);
    padding: 10px 14px;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: 8px;
}
.multiplier-bar label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}
.ot-select {
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    font-size: 14px;
    font-weight: 600;
    background: white;
    color: var(--primary);
    cursor: pointer;
    font-family: inherit;
}
.scan-section {
    margin-bottom: 12px;
}
/* Keep the scan bar pinned so every scan lands in the same place and the
   newly-added item flows in right below it. Sticks under the sticky
   screen-title (app header 56px + title row ~58px). */
#screen-order .scan-section {
    position: sticky;
    top: 116px;
    z-index: 40;
    background: var(--bg);
    padding-top: 8px;
    padding-bottom: 8px;
    margin-top: -8px;
}
/* Brief highlight so a freshly scanned item is easy to spot */
@keyframes itemJustAdded {
    from {
        background: var(--primary-wash);
    }
    to {
        background: transparent;
    }
}
.order-item.just-added {
    animation: itemJustAdded 1.2s ease-out;
}

/* ===== Just-scanned preview =====
   Confirms each scan in the operator's line of sight (below the scan bar)
   before the item settles into the order list further down. */
.scan-preview {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--card);
    border: 1px solid var(--primary);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    padding: 10px 14px;
    margin-bottom: 12px;
}
.scan-preview-img {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    border-radius: var(--r-md);
    background: var(--bg);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: var(--text-muted);
}
.scan-preview-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.scan-preview-info {
    flex: 1;
    min-width: 0;
}
.scan-preview-barcode {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.2px;
}
.scan-preview-name {
    font-size: 13px;
    color: var(--text-light);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.scan-preview-meta {
    flex: 0 0 auto;
    text-align: right;
}
.scan-preview-price {
    font-size: 15px;
    font-weight: 700;
    color: var(--primary);
}
.scan-preview-badge {
    font-size: 11px;
    font-weight: 600;
    color: var(--success);
    margin-top: 2px;
}
/* Replays on every scan: item drops in from the scan bar and settles */
@keyframes scanDropIn {
    0% {
        opacity: 0;
        transform: translateY(-14px) scale(0.98);
    }
    55% {
        opacity: 1;
        transform: translateY(3px) scale(1.01);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
.scan-preview.pop {
    animation: scanDropIn 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ===== Search Results ===== */
.search-results {
    background: var(--card);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    max-height: 350px;
    overflow-y: auto;
    margin-bottom: 12px;
    border: 1px solid var(--border);
}
.search-result-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-light);
    cursor: pointer;
    transition: background 0.1s;
}
.search-result-item:active {
    background: var(--surface);
}
.search-result-item:last-child {
    border-bottom: none;
}
.search-result-img {
    width: 48px;
    height: 48px;
    border-radius: var(--r-sm);
    object-fit: cover;
    background: var(--surface);
    flex-shrink: 0;
}
.search-result-img.no-img {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: var(--text-muted);
    text-align: center;
}
.search-result-info {
    flex: 1;
    min-width: 0;
}
.search-result-barcode {
    font-size: 12px;
    font-weight: 600;
    color: var(--primary);
}
.search-result-name {
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.search-result-price {
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* ===== Order Item ===== */
.order-section {
    margin-bottom: 8px;
}
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--card);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
}
.section-header h3 {
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}
.item-count {
    background: var(--primary);
    color: white;
    font-size: 12px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--r-full);
    min-width: 24px;
    text-align: center;
}
.items-list {
    background: var(--card);
    border-radius: 0 0 var(--r-lg) var(--r-lg);
    box-shadow: var(--shadow-sm);
}
.order-item {
    display: flex;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-light);
    align-items: flex-start;
}
.order-item:last-child {
    border-bottom: none;
}
/* Money modules (day-4): big record-action cards + cash-ledger rows */
.money-action-card {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    background: var(--primary-wash, #fdf0f2);
    border: 1.5px solid var(--primary);
    border-radius: var(--r-lg);
    padding: 14px 16px;
    margin: 4px 0 14px;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: var(--text);
}
.money-action-card .mac-plus {
    font-size: 26px;
    color: var(--primary);
    flex: none;
    line-height: 1;
}
.money-action-card .mac-txt {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.money-action-card .mac-txt strong {
    font-size: 15px;
    color: var(--primary);
}
.money-action-card .mac-txt span {
    font-size: 12px;
    color: var(--text-muted);
}
.money-action-card:active {
    transform: scale(0.99);
}
.cl-row {
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr) 96px 96px;
    gap: 8px;
    align-items: center;
    padding: 8px 0;
    border-bottom: 0.5px solid var(--border-light);
    font-size: 13px;
}
.cl-row:last-child {
    border-bottom: none;
}
.cl-when {
    font-size: 11px;
    color: var(--text-muted);
}
.cl-what {
    min-width: 0;
}
.cl-sub {
    font-size: 11px;
    color: var(--text-muted);
}
.cl-amt {
    text-align: right;
    font-weight: 700;
}
.cl-run {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.cl-row--count {
    background: #fffdf3;
}
.cl-row--open .cl-run,
.cl-row--close .cl-run {
    font-weight: 700;
}
.cl-lastcount {
    font-size: 12.5px;
    color: var(--text-muted);
    margin: 8px 2px 0;
}
@media (max-width: 600px) {
    .cl-row {
        grid-template-columns: minmax(0, 1fr) 84px 84px;
    }
    .cl-when {
        grid-column: 1 / -1;
        padding-top: 2px;
    }
}
/* Colour×qty sheet route toggle (day-3): Stock first vs All to Order */
.ocq-route-btn.active {
    background: var(--primary) !important;
    color: #fff !important;
}
/* Grouped scan card — one row per scan, colour breakdown inside (2026-08-22) */
.oi-colour-lines {
    margin-top: 4px;
    border-top: 1px dashed var(--border-light);
}
.oi-colour-line {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    border-bottom: 1px dashed var(--border-light);
}
.oi-colour-line:last-child {
    border-bottom: none;
}
.oi-cl-hint {
    font-size: 10px;
    color: var(--text-muted);
    white-space: nowrap;
}
.oi-cl-spacer {
    flex: 1;
}
.oi-colour-line .qty-btn {
    width: 28px;
    height: 28px;
    font-size: 15px;
}
.oi-colour-line .oi-colour {
    margin: 0;
}
.order-item-img {
    width: 56px;
    height: 56px;
    border-radius: var(--r-sm);
    object-fit: cover;
    background: var(--surface);
    flex-shrink: 0;
}
.order-item-details {
    flex: 1;
    min-width: 0;
}
.order-item-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}
.order-item-top > div:first-child {
    min-width: 0;
    overflow: hidden;
}
.order-item-barcode {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.4px;
    color: var(--primary);
    background: var(--primary-wash);
    padding: 2px 9px;
    border-radius: var(--r-sm);
    font-variant-numeric: tabular-nums;
    margin-bottom: 3px;
}
.order-item-barcode::before {
    content: '';
    width: 13px;
    height: 13px;
    flex: none;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='1.6' height='14'/%3E%3Crect x='6' y='5' width='1' height='14'/%3E%3Crect x='9' y='5' width='2' height='14'/%3E%3Crect x='13' y='5' width='1' height='14'/%3E%3Crect x='16' y='5' width='2' height='14'/%3E%3Crect x='20' y='5' width='1' height='14'/%3E%3C/svg%3E")
        center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='1.6' height='14'/%3E%3Crect x='6' y='5' width='1' height='14'/%3E%3Crect x='9' y='5' width='2' height='14'/%3E%3Crect x='13' y='5' width='1' height='14'/%3E%3Crect x='16' y='5' width='2' height='14'/%3E%3Crect x='20' y='5' width='1' height='14'/%3E%3C/svg%3E")
        center/contain no-repeat;
}
.order-item-name {
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.order-item-price {
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
/* Inline colour selector on an order tile — tap to set/change colour (no edit modal) */
.oi-colour {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 3px 0;
    padding: 3px 9px 3px 5px;
    border: 1px solid var(--border);
    border-radius: var(--r-full);
    background: var(--card, #fff);
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    line-height: 1.4;
    max-width: 100%;
}
.oi-colour > span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.oi-colour:active {
    background: var(--surface);
}
.oi-colour-caret {
    color: var(--text-muted);
    font-size: 10px;
    margin-left: -1px;
}
.oi-colour--empty {
    border-style: dashed;
    color: var(--text-muted);
    font-weight: 600;
}
.oi-colour-plus {
    font-weight: 800;
    color: var(--primary);
}
.order-item-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}
.qty-control {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    overflow: hidden;
}
.qty-btn {
    width: 44px;
    height: 44px;
    border: none;
    background: var(--surface);
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.qty-btn:active {
    background: var(--border);
}
.qty-value {
    width: 36px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    border: none;
    background: white;
    padding: 4px;
    font-variant-numeric: tabular-nums;
}
.stock-toggle {
    display: flex;
    gap: 4px;
}
.stock-btn {
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: white;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}
.stock-btn.active-stock {
    background: var(--success);
    color: white;
    border-color: var(--success);
}
.stock-btn.active-order {
    background: var(--gold);
    color: var(--text);
    border-color: var(--gold);
}
.order-item-note {
    width: 100%;
    margin-top: 4px;
    padding: 4px 8px;
    border: 1px solid var(--border-light);
    border-radius: var(--r-sm);
    font-size: 12px;
    font-family: inherit;
    resize: none;
}
.btn-edit-item {
    background: none;
    border: none;
    color: var(--primary);
    font-size: 18px;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    opacity: 0.5;
}
.btn-edit-item:active {
    opacity: 1;
}
.btn-remove {
    background: none;
    border: none;
    color: var(--danger);
    font-size: 20px;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    opacity: 0.5;
}
.btn-remove:active {
    opacity: 1;
}
.edit-item-photo-preview {
    width: 100%;
    height: 160px;
    border: 2px dashed var(--border);
    border-radius: var(--r-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    overflow: hidden;
    color: var(--text-muted);
    font-size: 13px;
    margin-bottom: 12px;
}
.edit-item-photo-preview.has-photo {
    border-style: solid;
    border-color: var(--primary);
}
.edit-item-photo-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ===== Screen Footer ===== */
.screen-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px 16px;
    background: white;
    box-shadow: 0 -1px 8px rgba(0, 0, 0, 0.06);
    z-index: 50;
    max-width: 600px;
    margin: 0 auto;
}
.order-quick-total {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 14px;
    color: var(--text-muted);
}
/* Desktop-only pieces of the order summary pane (v5.315.0): hidden on phone/tablet,
   where the bottom bar stays as it was. */
.order-pane-head,
.order-quick-meta {
    display: none;
}
.share-buttons {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
}
/* The action bar is position:fixed, so the scrollable content needs room beneath it
   or the last rows (Balance) sit hidden behind it. Desktop = single-row bar. */
#screen-view-order {
    padding-bottom: 132px;
}
/* View-order footer holds 9 controls: on mobile a hidden scroll-row buried
   half of them ("Record Payment is hiding") — grid shows everything at once */
@media (max-width: 600px) {
    #screen-view-order .share-buttons {
        display: grid;
        grid-template-columns: 1fr 1fr;
        overflow: visible;
    }
    #screen-view-order .share-buttons .delivery-select {
        width: 100%;
    }
    #screen-view-order {
        padding-bottom: 312px;
    }
}
/* Rail-only bits: the Status label shows in the desktop rail; the exports
   wrapper is transparent on mobile so PDF/Excel stay individual grid cells.
   The rail order number and summary boxes exist only on desktop — on mobile
   the same totals/payments render as cards in the content column. */
.rail-label {
    display: none;
}
.rail-exports {
    display: contents;
}
.rail-order-num {
    display: none;
}
#railSummary {
    display: none;
}
/* Action buttons carry an icon + label; on mobile they stay labelled grid
   cells, on desktop the rail turns them into hover-expanding icon tiles.
   Icon colours carry the meaning: gradient pencil, green cash, amber invoice. */
.vo-act-row {
    display: contents;
}
.vo-act svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
.vo-act--pay svg {
    color: #059669;
}
.vo-act--inv svg {
    color: #f59e0b;
}
/* Downloads: quiet rectangular bars (bottom of the rail on desktop) */
.rail-exports {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}
.vo-dl {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 10px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
}
.vo-dl svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}
.vo-dl:hover {
    color: var(--text);
    background: var(--surface);
}

/* Internal notes card */
.vo-note-input {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}
.vo-note-input input {
    flex: 1;
}
.vo-note {
    padding: 9px 0;
    border-bottom: 1px solid var(--border-light);
}
.vo-note:last-child {
    border-bottom: none;
}
.vo-note-text {
    font-size: 13px;
    white-space: pre-wrap;
}
.vo-note-meta {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 3px;
}
.vo-note-empty {
    font-size: 12px;
    color: var(--text-muted);
    padding: 4px 0;
}
.vo-note-hint {
    font-size: 10.5px;
    color: var(--text-muted);
    margin-top: 10px;
}

/* Order Details items sheet: fixed columns under a muted header row, all
   rows sharing one indent so nothing sticks out of line. */
#viewOrderContent .vo-items-head,
#viewOrderContent .summary-item {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr) 52px 38px 68px;
    gap: 8px;
    align-items: baseline;
}
#viewOrderContent .vo-items-head {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-light);
}
/* Header cells align with their columns: numeric right, qty right */
#viewOrderContent .vo-items-head div:nth-child(3),
#viewOrderContent .vo-items-head div:nth-child(4),
#viewOrderContent .vo-items-head div:nth-child(5) {
    text-align: right;
}
#viewOrderContent .summary-item {
    padding: 7px 0;
    font-size: 12px;
    color: var(--text);
    border-bottom: 1px solid var(--border-light);
}
#viewOrderContent .summary-item:last-of-type {
    border-bottom: none;
}
#viewOrderContent .vo-col-code {
    font-weight: 600;
    white-space: nowrap;
}
/* Select mode adds a pick dot inside the code cell — widen the code column by the
   dot's footprint (24px) so a wide code (e.g. DSGMX025) never wraps or overflows. */
#viewOrderContent .vo-fsec--selecting .vo-items-head,
#viewOrderContent .vo-fsec--selecting .summary-item {
    grid-template-columns: 116px minmax(0, 1fr) 52px 38px 68px;
}
#viewOrderContent .vo-col-name {
    display: flex;
    align-items: center;
    gap: 7px;
    overflow: hidden;
}
#viewOrderContent .vo-name-txt {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
#viewOrderContent .vo-thumb {
    width: 30px;
    height: 30px;
    border-radius: 5px;
    object-fit: cover;
    flex: none;
    background: var(--surface);
    border: 1px solid var(--border-light);
}
#viewOrderContent .vo-col-ws {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
#viewOrderContent .vo-col-qty {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
#viewOrderContent .vo-col-val {
    text-align: right;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
#viewOrderContent .vo-item-note {
    grid-column: 1 / -1;
    font-size: 11px;
    color: var(--primary);
    font-style: italic;
}
#viewOrderContent .section-subtotal {
    font-size: 13px;
}
@media (max-width: 600px) {
    #viewOrderContent .vo-items-head,
    #viewOrderContent .summary-item {
        grid-template-columns: 70px minmax(0, 1fr) 42px 30px 54px;
        gap: 6px;
    }
    /* Select mode adds the pick dot — widen the code column by its footprint here too. */
    #viewOrderContent .vo-fsec--selecting .vo-items-head,
    #viewOrderContent .vo-fsec--selecting .summary-item {
        grid-template-columns: 94px minmax(0, 1fr) 42px 30px 54px;
    }
    #viewOrderContent .summary-item {
        font-size: 11px;
    }
    #viewOrderContent .vo-thumb {
        width: 26px;
        height: 26px;
    }
}

/* Order Details customer block — name leads, details underneath in the same
   quiet meta style as the dashboard order cards */
.vo-name {
    font-family:
        'Geist',
        -apple-system,
        sans-serif;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.3px;
    margin: 2px 0;
}
.vo-business {
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    margin-bottom: 4px;
}
.vo-meta {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.7;
}
.vo-date {
    font-size: 12px;
    margin-top: 4px;
}
.share-buttons .btn-primary,
.share-buttons .btn-whatsapp,
.share-buttons .btn-secondary {
    flex: 1;
    justify-content: center;
    padding: 12px 8px;
    font-size: 14px;
}

/* ===== Summary ===== */
.summary-customer {
    font-size: 14px;
    line-height: 1.6;
}
.summary-customer strong {
    color: var(--primary);
}
.summary-items {
    font-size: 14px;
}
.summary-item {
    display: flex;
    flex-wrap: wrap;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-light);
    gap: 4px 8px;
}
.summary-item:last-child {
    border-bottom: none;
}
.summary-item-name {
    flex: 1;
    min-width: 60%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.summary-item-qty {
    color: var(--text-muted);
    min-width: 40px;
    text-align: center;
}
.summary-item-price {
    font-weight: 600;
    min-width: 70px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.summary-item-ws {
    font-size: 11px;
    color: var(--text-muted);
}
.summary-item-note {
    font-size: 12px;
    color: var(--primary);
    font-style: italic;
    width: 100%;
}

.summary-totals {
    margin-top: 8px;
}
.total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-size: 14px;
}
.total-row input {
    width: 120px;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    font-size: 14px;
    text-align: right;
    font-family: inherit;
    font-variant-numeric: tabular-nums;
}
.total-row select {
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    font-size: 14px;
    font-family: inherit;
    background: white;
}
.grand-total {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    border-top: 2px solid var(--primary);
    margin-top: 4px;
    padding-top: 10px;
}
.balance-due {
    font-size: 16px;
    font-weight: 700;
    color: var(--danger);
}

/* ===== Modal ===== */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.modal-content {
    background: white;
    border-radius: var(--r-lg);
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: var(--shadow-lg);
    animation: modalIn 0.2s ease-out;
}
@keyframes modalIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-light);
}
.modal-header h3 {
    font-size: 16px;
    font-weight: 600;
}

/* "Order saved" confirmation */
.os-modal {
    max-width: 360px;
    text-align: center;
    padding: 26px 24px 22px;
}
.os-check {
    width: 60px;
    height: 60px;
    margin: 2px auto 14px;
    border-radius: 50%;
    background: var(--grad);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 22px -8px rgba(220, 20, 60, 0.5);
    animation: osPop 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}
@keyframes osPop {
    from {
        opacity: 0;
        transform: scale(0.6);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}
.os-title {
    font-size: 19px;
    font-weight: 700;
    margin: 0 0 2px;
}
.os-num {
    font-size: 15px;
    font-weight: 600;
    color: var(--primary);
    letter-spacing: 0.3px;
}
.os-meta {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 3px;
}
.os-sync {
    font-size: 12px;
    margin: 10px 0 18px;
    min-height: 16px;
}
.os-sync--ok {
    color: var(--success);
}
.os-sync--wait {
    color: var(--text-muted);
}
.os-sync--local {
    color: var(--text-muted);
}
.os-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.os-home {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 500;
    padding: 6px;
    font-family: inherit;
}
.os-home:active {
    color: var(--text);
}
.btn-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--text-muted);
    padding: 4px;
    line-height: 1;
}

/* Scanner modal */
.scanner-modal #scannerView {
    width: 100%;
    aspect-ratio: 4/3;
    background: black;
}
.scanner-view-wrap {
    position: relative;
}

/* Full-screen scan surface (owner, 2026-08-20): scanning owns the whole screen —
   live camera on phones, barcode-gun input on desktop — and STAYS OPEN across adds;
   the colour×qty sheet overlays it without stopping the camera. */
.modal.scanner-fullscreen {
    padding: 0;
    align-items: stretch;
}
.scanner-fullscreen .scanner-modal {
    max-width: none;
    width: 100%;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
    display: flex;
    flex-direction: column;
}
/* Clear the iPhone notch / status bar: in fullscreen the header rides the very
   top of the screen, so its title + close (×) button must be pushed below the
   safe-area inset or they hide behind the status bar (owner, 2026-08-28). */
.scanner-fullscreen .scanner-modal .modal-header {
    padding-top: calc(env(safe-area-inset-top) + 16px);
}
.scanner-fullscreen .scanner-view-wrap {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    background: #000;
}
.scanner-fullscreen .scanner-modal #scannerView {
    height: 100%;
    aspect-ratio: auto;
}
.scanner-fullscreen .scanner-modal #scannerView video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.scanner-modal.gun-mode .scanner-view-wrap {
    display: none;
}
.scanner-modal.gun-mode .scanner-manual {
    padding: 18px 16px;
}
.scanner-fullscreen .scanner-manual input {
    font-size: 18px;
    padding: 14px;
}
.scanner-fullscreen .scanner-status {
    flex: none;
}
.scanner-modal.gun-mode .scanner-status {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

/* Scan confirmation: bucket pinned top-right over the camera; each scanned
   product pops in as a tile beneath it, holds, then flies into the bucket —
   so the rep never has to close the scanner to check the order. */
.scan-bucket {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 6;
}
.scan-bucket svg {
    width: 20px;
    height: 20px;
}
.scan-bucket-count {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    background: var(--success);
    color: white;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
@keyframes bucketBump {
    0% {
        transform: scale(1);
    }
    35% {
        transform: scale(1.22);
    }
    100% {
        transform: scale(1);
    }
}
.scan-bucket.bump {
    animation: bucketBump 0.3s ease-out;
}

.scan-fly-tile {
    position: absolute;
    top: 58px;
    right: 10px;
    max-width: min(80%, 300px);
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--card);
    border: 1px solid var(--primary);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    padding: 8px 12px;
    z-index: 7;
    transform-origin: top right;
}
@keyframes scanTileIn {
    0% {
        opacity: 0;
        transform: translateY(-10px) scale(0.95);
    }
    60% {
        opacity: 1;
        transform: translateY(2px) scale(1.01);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
.scan-fly-tile.show {
    animation: scanTileIn 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes scanTileFly {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
    100% {
        opacity: 0.15;
        transform: translate(var(--fly-x, 100px), var(--fly-y, -48px)) scale(0.06);
    }
}
.scan-fly-tile.fly {
    animation: scanTileFly 0.38s cubic-bezier(0.5, 0, 0.85, 0.4) both;
}
.scan-fly-img {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: var(--r-sm);
    background: var(--bg);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    color: var(--text-muted);
}
.scan-fly-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.scan-fly-info {
    min-width: 0;
}
.scan-fly-barcode {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
}
.scan-fly-name {
    font-size: 11px;
    color: var(--text-light);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.scan-fly-ws {
    font-size: 12px;
    font-weight: 700;
    color: var(--primary);
}
.scanner-status {
    padding: 10px 16px;
    text-align: center;
    font-size: 14px;
    color: var(--text-muted);
}
.scanner-manual {
    display: flex;
    gap: 8px;
    padding: 10px 16px;
    border-top: 1px solid var(--border-light);
}
.scanner-manual input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    font-size: 14px;
    font-family: inherit;
}
.scanner-manual button {
    padding: 8px 16px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: var(--r-sm);
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    font-family: inherit;
}

/* View order */
#viewOrderContent .card {
    margin-bottom: 12px;
}

/* ===== Toast ===== */
.toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--text);
    color: white;
    padding: 10px 20px;
    border-radius: var(--r-md);
    font-size: 14px;
    font-weight: 500;
    z-index: 300;
    opacity: 0;
    transition: all 0.25s ease;
    pointer-events: none;
    white-space: nowrap;
}
.toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ===== Empty State ===== */
.empty-state {
    text-align: center;
    padding: 48px 20px;
    color: var(--text-muted);
}
.empty-state svg {
    opacity: 0.2;
    margin-bottom: 12px;
}
.empty-state p {
    font-size: 14px;
    line-height: 1.6;
}

/* ===== Utility ===== */
hr {
    border: none;
    border-top: 1px solid var(--border-light);
    margin: 4px 0;
}

/* ===== OCR ===== */
.ocr-status {
    text-align: center;
    padding: 8px;
    font-size: 13px;
    color: var(--primary);
    font-weight: 500;
    animation: pulse 1.5s infinite;
}
@keyframes pulse {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.4;
    }
}

/* ===== Crop ===== */
#cropModal {
    z-index: 250;
}
.crop-modal {
    max-height: 95vh;
}
.crop-container {
    position: relative;
    width: 100%;
    max-height: 60vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    touch-action: none;
}
.crop-container img {
    max-width: 100%;
    max-height: 60vh;
    object-fit: contain;
    display: block;
}
.crop-box {
    position: absolute;
    border: 2px solid white;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
    cursor: move;
    min-width: 40px;
    min-height: 40px;
}
.crop-actions {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    justify-content: flex-end;
}

/* ===== Splash / brand load motion =====
   The hand-rolled splash (@keyframes splashFlowIn/Shine/SubIn/Fade + .splash-*)
   is REMOVED. The brand motion is now owned end-to-end by the spine module
   app/brand/make-brand-motion.js, mounted on #brand-stage (see index.html).
   Do not re-add splash animation here — any motion change happens in the spine. */

/* ===== Login Screen — canonical shared spec (spine/shared-screens/LOGIN.md) =====
   Pixel-uniform across FLOW/SYNC/BEAM/LEAF; only the wordmark word + gradient change.
   Geist type, 8px spacing scale, neutral ink button, card 400px. */
/* Brand-motion splash gate — the full splash overlay only paints on a genuine cold,
   signed-out open (html[data-boot="1"], stamped pre-paint in index.html). On every warm
   load / PWA-resume it stays hidden so there is no 4.8s white flash between actions. */
#brand-stage {
    display: none;
}
html[data-boot='1'] #brand-stage {
    display: block;
}

.login-screen {
    position: relative;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    padding: 24px;
    font-family:
        'Geist',
        -apple-system,
        BlinkMacSystemFont,
        'Segoe UI',
        Roboto,
        sans-serif;
}
.login-wrap {
    width: 100%;
    max-width: 400px;
    text-align: center;
}
/* Header = the motion module's risen end frame — the /<y-tile login mark (LOGIN.md,
   adopted 2026-08-12). Mirrors make-brand-motion.js's end-frame geometry exactly (word
   50/850/-.03em, ink /<y tile 48px beside it, descriptor 14 straight beneath) so the cold-
   boot rise lands on this to the pixel. The 26px header→card gap matches the module's
   toLogin(card) default so the flex-centred group and the risen lockup coincide. Consume
   the module's geometry; do not re-tune locally. */
.login-brand {
    margin-bottom: 26px;
}
.login-row {
    display: flex;
    align-items: center;
    justify-content: center;
}
.login-flow {
    font-family:
        'Geist',
        -apple-system,
        BlinkMacSystemFont,
        'Segoe UI',
        Roboto,
        sans-serif;
    font-weight: 850;
    font-size: 50px;
    line-height: 0.95;
    letter-spacing: -0.03em;
    background: linear-gradient(96deg, #dc143c, #f59e0b);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    display: inline-block;
}
/* /<y tile — the neutral-ink parent mark (identical in every product, both themes; never
   the product gradient). /< sky, y light. Mono, per LOGIN.md. */
.login-tile {
    width: 48px;
    height: 48px;
    margin-left: 12px;
    flex: none;
    border-radius: 12px;
    background: #111827;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 600;
    font-size: 18px;
    letter-spacing: -0.5px;
    box-shadow:
        0 6px 16px -6px rgba(17, 24, 39, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.login-tile .s {
    color: #38bdf8;
    padding-left: 2px;
}
.login-tile .y {
    color: #eef2f8;
    padding-right: 2px;
}
.login-desc {
    margin-top: 14px;
    font-size: 14px;
    font-weight: 400;
    color: var(--text-muted);
}
.login-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 32px;
    text-align: left;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
}
.login-card-title {
    font-size: 18px;
    font-weight: 500;
    color: var(--text);
    margin-bottom: 24px;
}
.login-field {
    margin-bottom: 18px;
}
.login-field label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.login-field input,
.login-setup input {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 15px;
    font-weight: 400;
    outline: none;
    transition:
        border-color 0.15s,
        box-shadow 0.15s;
    font-family: inherit;
}
.login-field input:focus,
.login-setup input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-wash);
}
.login-btn {
    width: 100%;
    height: 48px;
    margin-top: 24px;
    background: #111827;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition:
        opacity 0.15s,
        transform 0.1s;
}
.login-btn:hover {
    opacity: 0.9;
}
.login-btn:active {
    transform: scale(0.99);
}
.login-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0;
    color: var(--text-muted);
    font-size: 12px;
}
.login-divider::before,
.login-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}
.login-google-btn {
    width: 100%;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #fff;
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition:
        background 0.15s,
        transform 0.1s;
}
.login-google-btn:hover {
    background: var(--surface, #f9fafb);
}
.login-google-btn:active {
    transform: scale(0.99);
}
.login-google-btn:disabled {
    opacity: 0.6;
    cursor: default;
}
.login-error {
    color: var(--danger);
    font-size: 13px;
    min-height: 18px;
    margin-bottom: 6px;
}
.login-hint {
    font-size: 13px;
    font-weight: 400;
    color: var(--text-muted);
    margin-top: 24px;
    text-align: center;
}
.login-hint a {
    color: var(--text);
    text-decoration: none;
    border-bottom: 1px solid var(--border);
}
/* Login-screen Powered-by footer (LOGIN.md): pinned at the bottom of the column, out of
   the flex flow so the header + card still centre as one group (the module measures only
   the card, not the footer — matching that keeps the risen lockup and the static frame
   coincident). The spine make-powered-by component reserves its own space and is theme-
   aware; it renders on FLOW's white ground here. */
#login-footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
}
/* FLOW is a light-only, white-ground app (charter: "no dark variant"; the brand splash is
   mandated on white). The shared Powered-by footer is theme-aware and, under an OS dark
   preference, flips to light text — which would read light-on-white (nearly invisible) on
   our white ground. Pin it to its light rendering wherever it appears (login + signed-in
   app). This overrides only the component's CSS custom properties (specificity via the id);
   the vendored module file stays untouched (spine-owned). If FLOW ever gains a true dark
   theme, remove this and let the component follow the surface. */
#login-footer .kypb,
#app-footer .kypb {
    --kypb-accent: #1e40af;
    --kypb-ink: #0b0b0b;
    --kypb-muted: #6b7280;
    --kypb-line: #e6e6e6;
}
/* No mobile size override — the motion module renders the wordmark at 50px at every width
   (its geometry is the source of truth), and the static header must match it exactly so the
   cold-boot rise lands seamlessly. Card stays width:100% within the 24px page padding, never
   wider than 400px. */

/* ===== Dashboard Filters ===== */
.dashboard-filters {
    margin-bottom: 12px;
}
.filter-row {
    display: flex;
    gap: 8px;
}
.filter-row input,
.filter-row select {
    flex: 1;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    font-size: 13px;
    background: white;
    font-family: inherit;
}
.dashboard-stats .stat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
.dashboard-stats .stat-card {
    text-align: center;
    padding: 16px;
    background: white;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
}
.dashboard-stats .stat-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.dashboard-stats .stat-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

.date-quick-filters {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.date-quick-filters::-webkit-scrollbar {
    display: none;
}
.date-quick-btn {
    padding: 7px 14px;
    border: 1px solid var(--border);
    border-radius: var(--r-full);
    background: var(--card);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
    font-family: inherit;
}
.date-quick-btn:hover {
    background: var(--primary-wash);
    border-color: var(--primary);
    color: var(--primary);
}
.date-quick-btn.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}
.date-quick-btn.active:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    color: white;
}

.toggle-cancelled-btn {
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--r-full);
    padding: 6px 14px;
    font-size: 13px;
    color: var(--text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    font-family: inherit;
}
.toggle-cancelled-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

/* ===== Desktop Orders Table ===== */
.orders-table-wrap {
    overflow-x: auto;
}
.orders-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.orders-table th {
    text-align: left;
    padding: 10px 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    border-bottom: 2px solid var(--border);
    white-space: nowrap;
}
.orders-table th.num,
.orders-table td.num {
    text-align: right;
}
.orders-table .order-row {
    cursor: pointer;
    transition: background 0.1s;
}
.orders-table .order-row:hover {
    background: var(--primary-wash);
}
.orders-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-light);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.orders-table .order-num-cell {
    font-weight: 600;
    color: var(--primary);
}

/* Cancelled orders */
.cancelled-row {
    opacity: 0.45;
}
.cancelled-row:hover {
    background: var(--surface);
}
.cancelled-card {
    opacity: 0.45;
}

/* ===== Manage Users ===== */
.user-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-light);
    gap: 12px;
}
.user-info {
    min-width: 0;
    flex: 1;
}
.user-email {
    font-weight: 600;
    font-size: 14px;
    word-break: break-all;
}
.user-role-label {
    font-size: 12px;
    color: var(--text-muted);
}
.user-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}
.user-action-btn {
    padding: 6px 12px;
    font-size: 12px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: white;
    cursor: pointer;
    white-space: nowrap;
    font-family: inherit;
}
.user-action-btn:hover {
    background: var(--surface);
}
.user-role-select {
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    font-size: 13px;
    font-family: inherit;
}

.cancelled-banner {
    background: #fef2f2;
    color: var(--danger);
    border: 1px solid var(--danger);
    border-radius: var(--r-md);
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 12px;
    text-align: center;
}
.cancelled-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    color: var(--danger);
    background: #fef2f2;
    border: 1px solid var(--danger);
    border-radius: var(--r-sm);
    padding: 1px 6px;
    vertical-align: middle;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dashboard-ticket-summary {
    margin-bottom: 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
}

/* ===== Tickets ===== */
.ticket-stats {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
}
.ticket-stat {
    flex: 1;
    text-align: center;
    padding: 12px 6px;
    border-radius: var(--r-lg);
    background: white;
    box-shadow: var(--shadow-sm);
}
.ticket-stat-count {
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.ticket-stat-label {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.ticket-stat.overdue .ticket-stat-count {
    color: var(--danger);
}
.ticket-stat.closed .ticket-stat-count {
    color: var(--success);
}

.ticket-filters {
    display: flex;
    gap: 6px;
    padding: 0 16px 12px;
}
.ticket-filter-btn {
    flex: 1;
    padding: 8px 4px;
    border: 1px solid var(--border);
    border-radius: var(--r-full);
    background: white;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
}
.ticket-filter-btn.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.tickets-list {
    padding: 0 16px 80px;
}
.ticket-card {
    background: white;
    border-radius: var(--r-lg);
    border: 1px solid var(--border);
    padding: 14px 16px;
    margin-bottom: 8px;
}
.ticket-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}
.ticket-card-num {
    font-size: 11px;
    font-weight: 600;
    color: var(--primary);
}
.ticket-card-subject {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    margin: 4px 0;
}
.ticket-card-meta {
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: 6px;
}
.ticket-status-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--r-full);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.ticket-status-badge.open {
    background: #fff7ed;
    color: #c2410c;
}
.ticket-status-badge.overdue {
    background: #fef2f2;
    color: var(--danger);
}
.ticket-status-badge.closed {
    background: #ecfdf5;
    color: var(--success);
}

.ticket-detail-card {
    background: white;
    border-radius: var(--r-lg);
    border: 1px solid var(--border);
    padding: 16px;
    margin: 0 16px 10px;
}
.ticket-detail-subject {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 8px;
}
.ticket-detail-meta {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.8;
}
.ticket-detail-actions {
    display: flex;
    gap: 8px;
    padding: 0 16px 10px;
}
.ticket-detail-actions button {
    flex: 1;
}

.ticket-notes-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    padding: 8px 16px 4px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.ticket-note {
    background: white;
    border-radius: var(--r-lg);
    border: 1px solid var(--border-light);
    padding: 12px 16px;
    margin: 0 16px 6px;
}
.ticket-note-author {
    font-size: 12px;
    font-weight: 600;
    color: var(--primary);
}
.ticket-note-time {
    font-size: 11px;
    color: var(--text-muted);
    margin-left: 8px;
}
.ticket-note-text {
    font-size: 13px;
    color: var(--text);
    margin-top: 4px;
    white-space: pre-wrap;
}
.ticket-note-input {
    position: fixed;
    bottom: 22px;
    left: 0;
    right: 0;
    background: white;
    border-top: 1px solid var(--border);
    padding: 10px 16px;
    display: flex;
    gap: 8px;
    align-items: flex-end;
    z-index: 50;
}
.ticket-note-input textarea {
    flex: 1;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    font-size: 14px;
    font-family: inherit;
    resize: none;
}
.ticket-note-input button {
    padding: 10px 16px;
    white-space: nowrap;
}
/* Paperclip attach control in the WhatsApp reply composer (open-window only). */
.ticket-note-input .wa-attach {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 12px;
    font-size: 17px;
    line-height: 1;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
    cursor: pointer;
    user-select: none;
}
.ticket-note-input .wa-attach:active {
    transform: scale(0.98);
}

/* ===== WhatsApp Inbox (Messages) ===== */
.conv-row {
    display: flex;
    align-items: center;
    gap: 12px;
    background: white;
    border: 1px solid var(--border-light);
    border-radius: var(--r-lg);
    padding: 12px 16px;
    margin: 0 16px 6px;
    cursor: pointer;
    transition: box-shadow 0.15s;
}
.conv-row:active {
    box-shadow: var(--shadow-md);
}
.conv-main {
    flex: 1;
    min-width: 0;
}
.conv-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.conv-preview {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.conv-dir {
    color: var(--text-muted);
}
.conv-unread {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success);
    margin-right: 6px;
    vertical-align: middle;
}
.conv-side {
    flex: 0 0 auto;
    text-align: right;
}
.conv-time {
    font-size: 11px;
    color: var(--text-muted);
}
.conv-open {
    font-size: 10px;
    font-weight: 600;
    color: var(--success);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 2px;
}
.msg-thread {
    padding: 12px 16px 96px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
}
.msg-row {
    display: flex;
    flex-direction: column;
    max-width: 78%;
}
.msg-in {
    align-self: flex-start;
    align-items: flex-start;
}
.msg-out {
    align-self: flex-end;
    align-items: flex-end;
}
.msg-bubble {
    padding: 8px 12px;
    border-radius: var(--r-lg);
    font-size: 14px;
    line-height: 1.4;
    word-break: break-word;
}
.msg-in .msg-bubble {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-top-left-radius: 4px;
}
.msg-out .msg-bubble {
    background: var(--primary-wash);
    color: var(--text);
    border: 1px solid var(--primary);
    border-top-right-radius: 4px;
}
.msg-time {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 3px;
}
.msg-status {
    text-transform: capitalize;
}
/* ===== WhatsApp-Web-style split inbox (day-5) ===== */
.wa-shell {
    display: flex;
    height: calc(100dvh - 215px);
    min-height: 460px;
    background: var(--card);
    border: 1px solid var(--border-light);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.wa-side {
    width: 100%;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #e9edef;
    background: #fff;
}
.wa-side-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px 2px;
    flex: none;
}
.wa-side-title {
    font-weight: 800;
    font-size: 17px;
    color: #111b21;
}
.wa-side-acts {
    display: flex;
    gap: 4px;
}
.wa-hbtn {
    border: none;
    background: none;
    color: #54656f;
    cursor: pointer;
    padding: 6px;
    border-radius: 50%;
    display: flex;
    align-items: center;
}
.wa-hbtn:hover {
    background: #f0f2f5;
    color: #1fa855;
}
.wa-filters {
    display: flex;
    gap: 6px;
    padding: 2px 12px 8px;
    flex: none;
}
.wa-fchip {
    border: none;
    background: #f0f2f5;
    color: #54656f;
    font-size: 12.5px;
    font-weight: 600;
    border-radius: 999px;
    padding: 5px 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.wa-fchip.active {
    background: #d9fdd3;
    color: #1a6b3a;
}
.wa-fchip-n {
    background: #25d366;
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    border-radius: 999px;
    padding: 0 5px;
    min-width: 16px;
    text-align: center;
}
.wa-otp-btn:hover {
    color: #b8860b;
}
.wa-search {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px;
    padding: 7px 12px;
    background: #f0f2f5;
    border-radius: 8px;
    color: #54656f;
    flex: none;
}
.wa-search input {
    flex: 1;
    border: none;
    background: none;
    outline: none;
    font-size: 13.5px;
    color: #111b21;
}
.wa-convos {
    flex: 1;
    overflow-y: auto;
}
.wa-convo {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 0.5px solid #f0f2f5;
}
.wa-convo:hover {
    background: #f5f6f6;
}
.wa-convo.active {
    background: #f0f2f5;
}
.wa-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.5px;
}
.wa-convo-main {
    flex: 1;
    min-width: 0;
}
.wa-convo-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}
.wa-convo-name {
    font-weight: 600;
    font-size: 14.5px;
    color: #111b21;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wa-convo-time {
    font-size: 11px;
    color: #667781;
    flex: none;
}
.wa-convo-time.unread {
    color: #1fa855;
    font-weight: 700;
}
.wa-convo-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
}
.wa-convo-preview {
    font-size: 12.5px;
    color: #667781;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.wa-badge {
    flex: none;
    min-width: 19px;
    height: 19px;
    border-radius: 999px;
    background: #25d366;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
}
.wa-window-dot {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #25d366;
    opacity: 0.6;
}
.wa-main {
    flex: 1;
    min-width: 0;
    display: none;
    flex-direction: column;
    background: #efeae2;
    position: relative;
}
.wa-main::before {
    /* subtle doodle-ish texture, pure CSS */
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.4;
    background-image: radial-gradient(#d5cfc4 0.85px, transparent 0.85px);
    background-size: 22px 22px;
}
.wa-thread-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: #f0f2f5;
    border-bottom: 1px solid #e9edef;
    flex: none;
    position: relative;
    z-index: 1;
}
.wa-thread-head .wa-avatar {
    width: 38px;
    height: 38px;
    font-size: 14px;
}
.wa-back {
    display: none;
    border: none;
    background: none;
    font-size: 20px;
    cursor: pointer;
    color: #54656f;
    padding: 4px;
}
.wa-head-txt {
    min-width: 0;
}
.wa-head-name {
    font-weight: 700;
    font-size: 15px;
    color: #111b21;
}
.wa-head-sub {
    font-size: 11.5px;
    color: #667781;
}
.wa-msgs {
    flex: 1;
    overflow-y: auto;
    padding: 14px 7%;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.wa-day {
    align-self: center;
    margin: 10px 0 6px;
}
.wa-day span {
    background: #fff;
    color: #54656f;
    font-size: 11.5px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 8px;
    box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
}
.wa-msgs .msg-row {
    max-width: 68%;
}
.wa-msgs .wa-bubble {
    padding: 6px 8px 7px 9px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.35;
    box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
    border: none;
    word-break: break-word;
}
.wa-msgs .msg-in .wa-bubble {
    background: #fff;
    color: #111b21;
    border-top-left-radius: 0;
}
.wa-msgs .msg-out .wa-bubble {
    background: #d9fdd3;
    color: #111b21;
    border-top-right-radius: 0;
}
.wa-meta {
    float: right;
    margin: 6px -2px -4px 8px;
    font-size: 10.5px;
    color: #667781;
    white-space: nowrap;
}
.wa-tick {
    letter-spacing: -2.5px;
    font-size: 12px;
    color: #8696a0;
}
.wa-tick--read {
    color: #53bdeb;
}
.wa-tick--fail {
    color: #c0392b;
    letter-spacing: 0;
}
.wa-caption {
    margin-top: 3px;
}
.wa-msgs .msg-window-note {
    align-self: center;
    background: #fff7d6;
    color: #8a6d00;
    font-size: 12px;
    padding: 6px 14px;
    border-radius: 8px;
    margin-top: 10px;
    box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
}
.wa-composer {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 8px 12px;
    background: #f0f2f5;
    flex: none;
    position: relative;
    z-index: 1;
}
.wa-composer .wa-attach {
    color: #54656f;
    cursor: pointer;
    padding: 8px 4px;
    display: flex;
    align-items: center;
}
.wa-cbtn {
    border: none;
    background: none;
    color: #54656f;
    cursor: pointer;
    padding: 8px 3px;
    display: flex;
    align-items: center;
}
.wa-cbtn:hover {
    color: #1fa855;
}
.wa-composer--closed {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}
.wa-closed-note {
    font-size: 12.5px;
    color: #8a6d00;
    background: #fff7d6;
    border-radius: 8px;
    padding: 8px 12px;
}
.wa-tmpl-btn {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #1fa855;
    background: #fff;
    color: #1fa855;
    font-weight: 700;
    font-size: 13.5px;
    border-radius: 10px;
    padding: 9px 16px;
    cursor: pointer;
}
.wa-tmpl-btn:hover {
    background: #1fa855;
    color: #fff;
}
/* Picker overlays (templates + quick replies) */
.wa-ov {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.wa-ov-card {
    background: var(--card);
    width: 100%;
    border-radius: 16px;
    padding: 16px 18px;
    max-height: 84vh;
    overflow-y: auto;
}
.wa-ov-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    font-size: 16px;
}
.wa-ov-x {
    border: none;
    background: none;
    font-size: 22px;
    cursor: pointer;
    color: var(--text-muted);
}
.wa-ov-add {
    border: 1px solid var(--primary);
    background: none;
    color: var(--primary);
    font-weight: 700;
    font-size: 12.5px;
    border-radius: 8px;
    padding: 5px 12px;
    cursor: pointer;
}
.wa-ov-empty {
    color: var(--text-muted);
    font-size: 13px;
    padding: 18px 4px;
    text-align: center;
    line-height: 1.5;
}
.wa-ov-lbl {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 4px;
    font-weight: 600;
}
.wa-ov-inp {
    width: 100%;
    border: 1px solid var(--border, #ddd);
    border-radius: 9px;
    padding: 9px 12px;
    font: inherit;
    font-size: 14px;
}
textarea.wa-ov-inp {
    resize: vertical;
}
.wa-ov-save {
    width: 100%;
    margin-top: 12px;
    border: none;
    background: #1fa855;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    border-radius: 10px;
    padding: 11px;
    cursor: pointer;
}
.wa-ov-save:disabled {
    opacity: 0.6;
}
.wa-ov-back {
    border: 1px solid var(--border, #ddd);
    background: none;
    border-radius: 10px;
    padding: 11px 16px;
    cursor: pointer;
    font-weight: 600;
}
.wa-ov-err {
    color: #c0392b;
    font-size: 12.5px;
    margin-top: 8px;
}
.wa-qr-list,
.wa-tmpl-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.wa-qr-row {
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 0.5px solid var(--border-light);
}
.wa-qr-main {
    flex: 1;
    min-width: 0;
    padding: 10px 4px;
    cursor: pointer;
}
.wa-qr-title {
    font-weight: 700;
    font-size: 13.5px;
}
.wa-qr-text {
    font-size: 12.5px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wa-qr-del {
    border: none;
    background: none;
    color: var(--text-muted);
    font-size: 18px;
    cursor: pointer;
    flex: none;
    padding: 4px 8px;
}
.wa-tmpl-row {
    padding: 10px 8px;
    border-radius: 10px;
    cursor: pointer;
    border: 1px solid var(--border-light);
    margin-bottom: 6px;
}
.wa-tmpl-row:hover {
    background: #f5f6f6;
}
.wa-tmpl-top {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: baseline;
}
.wa-tmpl-name {
    font-weight: 700;
    font-size: 13.5px;
    color: var(--primary);
}
.wa-tmpl-cat {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: capitalize;
    flex: none;
}
.wa-tmpl-body {
    font-size: 12.5px;
    color: var(--text-muted);
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wa-tmpl-preview {
    background: #d9fdd3;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 14px;
    line-height: 1.4;
    color: #111b21;
}
/* Create-template form */
.wa-ct-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
.wa-ct-addvar {
    border: 1px solid var(--primary);
    background: none;
    color: var(--primary);
    font-weight: 700;
    font-size: 11px;
    border-radius: 7px;
    padding: 2px 8px;
    cursor: pointer;
    margin-left: 8px;
}
.wa-ct-exhead {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 8px;
    font-weight: 600;
}
.wa-ct-preview-col {
    min-width: 0;
}
.wa-ct-phone {
    background: #efeae2;
    border-radius: 14px;
    padding: 16px 12px;
    min-height: 160px;
    background-image: radial-gradient(#d5cfc4 0.85px, transparent 0.85px);
    background-size: 20px 20px;
}
.wa-ct-bubble {
    background: #fff;
    border-radius: 8px;
    border-top-left-radius: 0;
    padding: 8px 10px;
    font-size: 13.5px;
    line-height: 1.4;
    color: #111b21;
    box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
}
.wa-ct-hd {
    font-weight: 700;
    margin-bottom: 3px;
}
.wa-ct-ft {
    color: #667781;
    font-size: 11.5px;
    margin-top: 5px;
}
@media (min-width: 620px) {
    .wa-ct-grid {
        grid-template-columns: 1.3fr 1fr;
    }
    .wa-ct-preview-col {
        position: sticky;
        top: 0;
    }
}
.wa-composer textarea {
    flex: 1;
    resize: none;
    border: none;
    outline: none;
    background: #fff;
    border-radius: 10px;
    padding: 10px 14px;
    font: inherit;
    font-size: 14px;
    max-height: 120px;
}
.wa-send {
    flex: none;
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    background: #1fa855;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wa-send:disabled {
    opacity: 0.6;
}
.wa-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}
.wa-empty-inner {
    text-align: center;
    max-width: 320px;
    padding: 20px;
}
@media (min-width: 1024px) {
    .wa-side {
        width: 380px;
        flex: none;
    }
    .wa-main {
        display: flex;
    }
}
@media (max-width: 1023px) {
    .wa-shell {
        height: calc(100dvh - 185px);
        min-height: 420px;
    }
    .wa-shell.thread-open .wa-side {
        display: none;
    }
    .wa-shell.thread-open .wa-main {
        display: flex;
    }
    .wa-back {
        display: block;
    }
    .wa-msgs {
        padding: 12px 10px;
    }
    .wa-msgs .msg-row {
        max-width: 82%;
    }
}
/* Media bubbles (day-4): tappable image thumbs + document links */
.msg-media-img {
    display: block;
    max-width: 220px;
    max-height: 260px;
    border-radius: 10px;
    object-fit: cover;
}
.msg-media-doc {
    display: inline-block;
    font-weight: 600;
    color: var(--primary);
    text-decoration: underline;
    word-break: break-all;
}
.msg-media-missing {
    font-size: 11.5px;
    color: var(--text-muted);
    font-style: italic;
}
.msg-window-note {
    flex: 1;
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
    padding: 4px 8px;
}

/* ===== Procurement ===== */
.proc-panel {
    padding: 0 16px 16px;
}
.proc-card {
    background: var(--card);
    border-radius: var(--r-lg);
    padding: 12px;
    margin-bottom: 10px;
    box-shadow: var(--shadow-sm);
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.proc-card-tap {
    cursor: pointer;
    transition: box-shadow 0.15s;
}
.proc-card-tap:active {
    box-shadow: var(--shadow-md);
}
.proc-card-no-img {
    display: flex;
    align-items: center;
    justify-content: center;
}
.proc-card-photo {
    width: 70px;
    height: 70px;
    border-radius: var(--r-md);
    object-fit: contain;
    flex-shrink: 0;
    background: var(--surface);
}
.proc-card-info {
    flex: 1;
    min-width: 0;
}
.proc-card-info h4 {
    font-size: 14px;
    margin-bottom: 2px;
}
.proc-card-info p {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 2px;
}
.proc-card-barcode {
    font-family: monospace;
    font-size: 13px;
    font-weight: 700;
    color: var(--primary);
}
.proc-card-ws-line {
    display: none;
}
.flag-option {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    cursor: pointer;
    padding: 6px 0;
}
.flag-option input[type='checkbox'] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
}
.proc-card-flag-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    background: var(--danger, #dc2626);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: var(--r-sm);
    z-index: 1;
}
.proc-card-photo-wrap {
    position: relative;
}
.proc-card-flag-icon {
    position: absolute;
    bottom: 6px;
    right: 6px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.85);
    color: var(--text-muted);
    font-size: 15px;
    cursor: pointer;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: all 0.15s;
}
.proc-card-flag-icon.flagged {
    background: var(--danger, #ef4444);
    color: #fff;
}
.proc-card-photo-wrap[onclick] {
    cursor: pointer;
}
.proc-card-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
}
.proc-btn {
    padding: 6px 12px;
    border-radius: var(--r-sm);
    border: none;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}
.proc-btn-approve {
    background: var(--success);
    color: white;
}
.proc-btn-reject {
    background: var(--danger);
    color: white;
}
/* Inward form */
.inward-photo-section {
    margin-bottom: 16px;
}
.inward-photo-preview {
    width: 100px;
    height: 100px;
    border: 2px dashed var(--border);
    border-radius: var(--r-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 11px;
    overflow: hidden;
    background: var(--surface);
}
.inward-photo-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.edit-photo-preview {
    width: 100%;
    height: 160px;
    border: 2px dashed var(--border);
    border-radius: var(--r-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 13px;
    overflow: hidden;
    background: var(--surface);
}
.edit-photo-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.photo-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.photo-lightbox img {
    max-width: 95%;
    max-height: 95%;
    object-fit: contain;
    border-radius: var(--r-md);
}
.inward-barcode-preview {
    background: var(--surface);
    border-radius: var(--r-lg);
    padding: 12px;
    margin-bottom: 12px;
    text-align: center;
    font-family: monospace;
    font-size: 18px;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: 2px;
}
.proc-form-row {
    display: flex;
    gap: 12px;
}
.proc-form-row .form-group {
    flex: 1;
}

/* Supplier list */
.supplier-card {
    background: var(--card);
    border-radius: var(--r-lg);
    padding: 14px;
    margin-bottom: 8px;
    box-shadow: var(--shadow-sm);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.supplier-card h4 {
    font-size: 14px;
    margin-bottom: 2px;
}
.supplier-card .supplier-code {
    font-family: monospace;
    font-size: 13px;
    color: var(--primary);
    font-weight: 700;
}
.supplier-card .supplier-count {
    font-size: 12px;
    color: var(--text-muted);
}
.proc-empty {
    text-align: center;
    padding: 48px 16px;
    color: var(--text-muted);
    font-size: 14px;
}

/* ===== Browse Catalogue ===== */
.browse-search {
    width: 100%;
    padding: 10px 14px;
    font-size: 14px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: white;
    margin-bottom: 10px;
    font-family: inherit;
    transition:
        border-color 0.15s,
        box-shadow 0.15s;
}
.browse-search:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-wash);
    outline: none;
}
.browse-chip-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.browse-chip {
    padding: 5px 12px;
    border-radius: var(--r-full);
    font-size: 13px;
    font-weight: 500;
    border: 1px solid var(--border);
    background: white;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}
.browse-chip.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}
.browse-chip:not(.active):hover {
    border-color: var(--primary-light);
    color: var(--primary);
}
.browse-chip.active:hover {
    background: var(--primary-dark);
}
.browse-chip.chip-warn {
    border-color: var(--warning);
    color: var(--warning);
    background: #fffbeb;
}
.browse-chip .chip-count {
    font-size: 11px;
    opacity: 0.7;
    margin-left: 2px;
}
.browse-filter-row {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}
.browse-select {
    flex: 1;
    padding: 8px 10px;
    font-size: 13px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: white;
    min-width: 0;
    font-family: inherit;
}
.browse-select:focus {
    border-color: var(--primary);
    outline: none;
}
.browse-count {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

/* View Toggle */
.view-toggle {
    display: flex;
    gap: 0;
    background: var(--surface);
    border-radius: var(--r-md);
    border: 1px solid var(--border);
    overflow: hidden;
}
.view-btn {
    padding: 10px 12px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.view-btn:not(:last-child) {
    border-right: 1px solid var(--border);
}
.view-btn.active {
    background: var(--primary);
    color: white;
}
.view-btn:hover:not(.active) {
    background: var(--primary-wash);
    color: var(--primary);
}
.view-btn:not(.active):hover {
    background: var(--border-light);
}
.proc-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--danger);
    display: inline-block;
    vertical-align: top;
    margin-left: 2px;
}
.browse-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
}
.browse-grid .proc-card {
    flex-direction: column;
    padding: 0;
    margin-bottom: 0;
    overflow: hidden;
    position: relative;
}
.browse-grid .proc-card-photo-wrap {
    width: 100%;
    height: 140px;
}
.browse-grid .proc-card-photo {
    width: 100%;
    height: 100%;
    border-radius: 0;
    object-fit: contain;
}
.browse-grid .proc-card-info {
    padding: 8px 10px 10px;
}
.browse-grid .proc-card-info h4 {
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.browse-grid .proc-card-info p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.browse-grid .proc-card-actions {
    flex-direction: row;
    padding: 0 10px 8px;
    gap: 6px;
}
.browse-delete-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Small icons view */
.browse-grid.view-small {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 6px;
}
.browse-grid.view-small .proc-card-photo-wrap {
    height: 90px;
}
.browse-grid.view-small .proc-card-info {
    padding: 6px 8px 8px;
}
.browse-grid.view-small .proc-card-info h4 {
    font-size: 11px;
}
.browse-grid.view-small .proc-card-info p {
    font-size: 10px;
    display: none;
}
.browse-grid.view-small .proc-card-info p.proc-card-barcode {
    display: block;
    font-size: 11px;
}
.browse-grid.view-small .proc-card-info .proc-card-ws-line {
    display: block;
    font-size: 10px;
}
.browse-grid.view-small .proc-card-flag-icon {
    width: 20px;
    height: 20px;
    font-size: 11px;
    bottom: 3px;
    right: 3px;
}
.browse-grid.view-small .proc-card-actions {
    padding: 0 8px 6px;
}
.browse-grid.view-small .proc-card-actions .proc-btn {
    font-size: 10px;
    padding: 4px 8px;
}

/* List view */
.browse-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
}
@media (min-width: 768px) {
    .browse-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (min-width: 1200px) {
    .browse-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
.browse-list .proc-card {
    flex-direction: row;
    padding: 10px 12px;
    margin-bottom: 0;
    align-items: center;
    gap: 12px;
    position: relative; /* anchor the select tick */
    min-width: 0; /* let the card shrink into its column so text truncates instead of overflowing */
}
.browse-list .proc-card-photo {
    width: 56px;
    height: 56px;
    border-radius: var(--r-md);
    flex-shrink: 0;
}
.browse-list .proc-card-info {
    flex: 1;
    min-width: 0;
}
.browse-list .proc-card-info h4 {
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.browse-list .proc-card-info p {
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.browse-list .proc-card-actions {
    flex-direction: row;
    gap: 6px;
    flex-shrink: 0;
}
.browse-list .proc-card-flag-icon {
    position: static;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    font-size: 14px;
}
.browse-list .browse-delete-btn {
    position: static;
    width: 28px;
    height: 28px;
    background: var(--danger);
}

/* Detail (table) view */
.browse-detail {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    overflow: hidden;
    background: white;
}
.browse-detail-header {
    display: grid;
    grid-template-columns: 30px minmax(0, 1.9fr) 68px 40px minmax(0, 0.9fr) 24px;
    gap: 6px;
    padding: 8px 12px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.browse-detail-header .sort-header {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 3px;
    user-select: none;
}
.browse-detail-header .sort-header:hover {
    color: var(--text);
}
.browse-detail-header .sort-arrow {
    font-size: 10px;
    opacity: 0.4;
}
.browse-detail-header .sort-header.active .sort-arrow {
    opacity: 1;
    color: var(--primary);
}
.browse-detail .proc-card {
    display: grid;
    grid-template-columns: 30px minmax(0, 1.9fr) 68px 40px minmax(0, 0.9fr) 24px;
    gap: 6px;
    padding: 8px 12px;
    margin-bottom: 0;
    border-radius: 0;
    box-shadow: none;
    border-bottom: 1px solid var(--border-light);
    align-items: center;
    background: white;
    position: relative; /* anchor the select tick */
}
.proc-card-flag-col {
    display: flex;
    justify-content: center;
}
.proc-card-flag-col .proc-card-flag-icon {
    position: static;
    width: 24px;
    height: 24px;
    font-size: 13px;
}
.browse-detail .proc-card:last-child,
.browse-detail .btn-primary:last-child {
    border-bottom: none;
}
.browse-detail .proc-card-photo {
    width: 36px;
    height: 36px;
    border-radius: var(--r-sm);
    flex-shrink: 0;
}
.browse-detail .proc-card-info {
    min-width: 0;
}
.browse-detail .proc-card-info h4 {
    font-size: 13px;
    line-height: 1.3;
    /* On mobile the name column is narrow — let it wrap to 2 lines instead of
       clipping to a few characters, so the full product name stays readable. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 0;
    word-break: break-word;
}
.browse-detail .proc-card-info p {
    display: none;
}
.browse-detail .proc-card-barcode-col {
    font-family: monospace;
    font-size: 12px;
    font-weight: 600;
    color: var(--primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.browse-detail .proc-card-ws-col {
    font-size: 12px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.browse-detail .proc-card-supplier-col {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.browse-detail .proc-card-actions {
    grid-column: 1 / -1;
    flex-direction: row;
    gap: 6px;
    padding: 4px 0 0 44px;
}
.browse-detail .browse-delete-btn {
    position: static;
    width: 24px;
    height: 24px;
    background: var(--danger);
    grid-column: 1 / -1;
    justify-self: end;
}
/* Detail (table) view — extra data columns; hidden by default, shown on desktop (≥1024px) */
.browse-detail .dcol-x,
.browse-detail-header .dcol-x {
    display: none;
}
.browse-detail .proc-card-cat-col,
.browse-detail .proc-card-sub-col,
.browse-detail .proc-card-type-col,
.browse-detail .proc-card-created-col,
.browse-detail .proc-card-flagreason-col {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.browse-detail .proc-card-weight-col {
    font-size: 12px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.browse-detail .proc-card-flagreason-col.has-flag {
    color: var(--danger);
}

@media (min-width: 480px) {
    .browse-grid {
        grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    }
    .browse-grid.view-small {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    }
    .browse-detail .proc-card,
    .browse-detail-header {
        grid-template-columns: 34px minmax(0, 1.7fr) 100px 54px minmax(0, 0.9fr) 30px;
    }
}

/* ===== Operations Screen ===== */
.ops-content {
    padding: 0 16px 24px;
}
.ops-section {
    margin-bottom: 24px;
}
.ops-section-title {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-light);
}
.ops-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
}
.ops-stat-card {
    background: var(--card);
    border-radius: var(--r-lg);
    padding: 16px;
    text-align: center;
    box-shadow: var(--shadow-sm);
}
.ops-stat-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.ops-stat-label {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.ops-warn {
    border-left: 3px solid var(--warning);
}
.ops-chart {
    background: var(--card);
    border-radius: var(--r-lg);
    padding: 16px;
    overflow-x: auto;
    box-shadow: var(--shadow-sm);
}
.ops-chart-bars {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 120px;
    min-width: fit-content;
}
.ops-chart-bar {
    width: 16px;
    min-height: 2px;
    background: var(--primary);
    border-radius: 2px 2px 0 0;
    position: relative;
}
.ops-chart-bar:hover::after {
    content: attr(data-tip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--text);
    color: #fff;
    font-size: 10px;
    padding: 3px 6px;
    border-radius: var(--r-sm);
    white-space: nowrap;
    pointer-events: none;
}
.ops-chart-labels {
    display: flex;
    gap: 3px;
    margin-top: 4px;
}
.ops-chart-labels span {
    width: 16px;
    text-align: center;
    font-size: 8px;
    color: var(--text-muted);
}
.ops-user-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: var(--card);
    border-radius: var(--r-md);
    margin-bottom: 6px;
    font-size: 13px;
    box-shadow: var(--shadow-sm);
}
.ops-user-email {
    font-weight: 500;
}
.ops-user-role {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: var(--r-full);
    background: var(--surface);
    color: var(--text-muted);
    font-weight: 500;
}
.ops-user-role.admin {
    background: var(--primary);
    color: #fff;
}
.ops-user-orders {
    font-size: 12px;
    color: var(--text-muted);
}
.ops-audit-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    background: var(--card);
    border-radius: var(--r-md);
    margin-bottom: 6px;
    font-size: 12px;
    box-shadow: var(--shadow-sm);
}
.ops-audit-icon {
    font-size: 16px;
    flex-shrink: 0;
    margin-top: 1px;
}
.ops-audit-body {
    flex: 1;
    min-width: 0;
}
.ops-audit-action {
    font-weight: 600;
    font-size: 13px;
}
.ops-audit-details {
    color: var(--text-muted);
    margin-top: 2px;
}
.ops-audit-meta {
    font-size: 11px;
    color: var(--text-muted);
    text-align: right;
    white-space: nowrap;
    flex-shrink: 0;
}
.ops-firebase-bar {
    height: 8px;
    background: var(--surface);
    border-radius: var(--r-sm);
    overflow: hidden;
    margin: 6px 0 4px;
}
.ops-firebase-fill {
    height: 100%;
    border-radius: var(--r-sm);
    transition: width 0.3s;
}
.ops-firebase-fill.green {
    background: var(--success);
}
.ops-firebase-fill.yellow {
    background: var(--warning);
}
.ops-firebase-fill.red {
    background: var(--danger);
}
.ops-firebase-label {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--text-muted);
}

/* ===== Guest Scanner ===== */
#guestSessionBar {
    padding: 0 16px;
    margin-bottom: 8px;
}
.btn-guest-start {
    width: 100%;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--primary);
    background: transparent;
    border: 1px dashed var(--primary);
    border-radius: var(--r-md);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: inherit;
}
.guest-active-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: var(--r-md);
    font-size: 13px;
    font-weight: 500;
    color: #065f46;
}
.guest-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success);
    animation: guestPulse 2s infinite;
}
@keyframes guestPulse {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.4;
    }
}
.guest-active-bar button {
    margin-left: auto;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid #a7f3d0;
    border-radius: var(--r-sm);
    background: white;
    color: #065f46;
    cursor: pointer;
}
.guest-active-bar .btn-end {
    color: var(--danger);
    border-color: #fecaca;
    margin-left: 4px;
}

/* ===== Live Orders ===== */
.live-orders-wrap {
    margin: 0 16px 12px;
    border: 1px solid #a7f3d0;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: #ecfdf5;
}
.live-orders-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #065f46;
    border-bottom: 1px solid #a7f3d0;
}
.live-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success);
    animation: guestPulse 1.5s ease-in-out infinite;
}
.live-order-card {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid #d1fae5;
}
.live-order-card:last-child {
    border-bottom: none;
}
.live-order-mine {
    cursor: pointer;
}
.live-order-mine:active {
    background: #d1fae5;
}
/* These rows are full-width; the gloss-pop scale-zoom grows them past the
   overflow:hidden wrap and clips the cancel ×. Highlight the background instead. */
.live-order-card.gloss-pop:hover {
    transform: none;
    box-shadow: none;
    background: #d1fae5;
}
.live-order-card.gloss-pop:active {
    transform: none;
    background: #a7f3d0;
}
.live-order-info {
    flex: 1;
    min-width: 0;
}
.live-order-num {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
}
.live-order-meta {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}
.live-order-stats {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
    margin-left: 12px;
    text-align: center;
}
.live-stat-val {
    font-size: 20px;
    font-weight: 700;
    color: #065f46;
    font-variant-numeric: tabular-nums;
}
.live-stat-lbl {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.live-end-btn {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    margin-left: 8px;
    border: 1px solid #fecaca;
    border-radius: 50%;
    background: #fef2f2;
    color: var(--danger);
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* ===== Invoice ===== */
.invoiced-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    color: #2563eb;
    background: #eff6ff;
    border: 1px solid #2563eb;
    border-radius: var(--r-sm);
    padding: 1px 6px;
    vertical-align: middle;
}
.invoiced-banner {
    background: #eff6ff;
    color: #2563eb;
    padding: 10px 16px;
    border-radius: var(--r-md);
    font-weight: 600;
    margin-bottom: 12px;
    text-align: center;
}
/* Part invoice — some items on the order still uninvoiced. Amber, distinct from
   the blue full-invoice badge/banner. */
.part-invoiced-badge {
    color: #b45309;
    background: #fffbeb;
    border-color: #b45309;
}
.part-invoiced-banner {
    background: #fffbeb;
    color: #b45309;
}

/* ===== Suppliers module ===== */
.sup-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 4px;
}
.sup-subtle {
    font-size: 13px;
    color: var(--text-muted);
}
.sup-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.sup-btn {
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text);
    border-radius: var(--r-full);
    padding: 6px 13px;
    font-size: 12.5px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition:
        background 0.12s,
        border-color 0.12s,
        color 0.12s;
}
.sup-btn:hover {
    border-color: var(--primary-light);
    color: var(--primary);
}
.sup-btn--primary {
    background: var(--grad);
    color: #fff;
    border-color: transparent;
}
.sup-btn--go {
    border-color: #1f7a3d;
    color: #1f7a3d;
}
.sup-btn--go:hover {
    background: #e8f5ec;
    color: #1f7a3d;
}
.sup-btn--x {
    border-color: #e0b4b4;
    color: #b23;
}
.sup-btn--x:hover {
    background: #fdecec;
    color: #b23;
}
.sup-list {
    padding: 4px 12px;
}
.sup-row {
    display: grid;
    grid-template-columns: 122px minmax(130px, 1.3fr) 128px 76px 128px minmax(110px, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 10px 4px;
    border-bottom: 0.5px solid var(--border-light);
    font-size: 13px;
}
.sup-row:last-child {
    border-bottom: none;
}
.sup-row--head {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    padding-bottom: 6px;
}
.sup-code {
    font-weight: 700;
}
.sup-num {
    font-weight: 400;
    font-size: 11px;
    color: var(--text-muted);
}
.sup-cc {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    background: var(--surface, #f2f2f4);
    border: 1px solid var(--border-light);
    border-radius: 5px;
    padding: 0 5px;
    color: var(--text-muted);
    vertical-align: middle;
}
.sup-dim {
    color: var(--text-light);
}
.sup-pill {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    border-radius: var(--r-sm);
    padding: 1px 7px;
    vertical-align: middle;
    margin-left: 4px;
}
.sup-pill--pending {
    background: #fffbeb;
    color: #b45309;
    border: 1px solid #fde68a;
}
.sup-pill--rej {
    background: #fef2f2;
    color: #b23;
    border: 1px solid #fecaca;
}
.sup-pill--off {
    background: #f3f4f6;
    color: #6b7280;
    border: 1px solid #e5e7eb;
}
.sup-row-acts {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.craft-row {
    display: flex;
    gap: 8px;
    margin-bottom: 6px;
    align-items: center;
}
.craft-row .craft-name {
    flex: 1;
}
.craft-row .craft-code {
    width: 76px;
    text-transform: uppercase;
}
.sup-hint {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
    line-height: 1.4;
}
/* Search / filter toolbar + sortable headers + bulk bar */
.sup-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0 2px;
}
.sup-search {
    flex: 1;
    min-width: 220px;
}
.sup-filter {
    width: auto;
    min-width: 150px;
    flex: none;
}
.sup-th {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.sup-th:hover {
    color: var(--text);
}
.sup-th--chk,
.sup-chk {
    display: flex;
    align-items: center;
    justify-content: center;
}
.sup-th--chk input,
.sup-chk input {
    width: 15px;
    height: 15px;
    cursor: pointer;
    margin: 0;
}
.sup-selectable .sup-row {
    grid-template-columns: 32px 116px minmax(130px, 1.3fr) 128px 76px 128px minmax(110px, 1fr) auto;
}
.sup-row--picked {
    background: #f6f3fb;
}
.sup-prodlink {
    border: none;
    background: none;
    color: var(--primary);
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.sup-prodlink:hover {
    opacity: 0.75;
}
.sup-dupwarn {
    font-size: 12px;
    color: #b45309;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    padding: 7px 10px;
    margin: -4px 0 12px;
    line-height: 1.45;
}
.sup-dupwarn b {
    color: #92400e;
}

/* PDF export chooser */
.pdfo-group-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin: 10px 0 6px;
}
.pdfo-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.pdfo-opt {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13.5px;
    padding: 8px 10px;
    border: 1px solid var(--border-light);
    border-radius: 9px;
    cursor: pointer;
}
.pdfo-opt:has(input:checked) {
    border-color: var(--primary);
    background: var(--primary-wash, #fdf2f4);
}
.pdfo-opt--off {
    opacity: 0.45;
    cursor: default;
}
.pdfo-opt input {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: var(--primary);
}

/* Inward: multi-row add (compact — one field line + one notes/barcode line per row) */
.inward-modal {
    max-width: 1100px;
    width: 100%;
}
#inwardRows {
    counter-reset: inwrow;
}
.inw-row {
    border: 1px solid var(--border-light);
    border-radius: 10px;
    padding: 8px 10px 6px;
    margin-bottom: 8px;
    background: var(--surface, #fafafa);
    counter-increment: inwrow;
}
.inw-row-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.inw-row-n::before {
    content: '#' counter(inwrow);
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
}
.inw-bc {
    font-family: monospace;
    font-size: 12px;
    font-weight: 700;
    color: var(--primary);
    white-space: nowrap;
}
.inw-row-x {
    border: none;
    background: none;
    color: var(--text-muted);
    font-size: 18px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}
.inw-row-x:hover {
    color: #b23;
}
/* supplier combobox */
.inw-supwrap {
    position: relative;
    flex: 1;
    min-width: 180px;
    max-width: 380px;
}
.inw-sup-list {
    position: absolute;
    top: calc(100% + 3px);
    left: 0;
    right: 0;
    z-index: 40;
    background: var(--card, #fff);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    max-height: 260px;
    overflow: auto;
}
.inw-sup-item {
    padding: 8px 12px;
    font-size: 13px;
    cursor: pointer;
}
.inw-sup-item:hover {
    background: var(--primary-wash, #fdf2f4);
}
.inw-sup-none {
    padding: 8px 12px;
    font-size: 12px;
    color: var(--text-muted);
}
.inw-sup-add {
    border-top: 1px solid var(--border-light);
    color: var(--primary);
    font-weight: 700;
    position: sticky;
    bottom: 0;
    background: var(--card, #fff);
}
/* one compact field line */
.inw-grid {
    display: grid;
    grid-template-columns: 44px minmax(150px, 1.8fr) 84px 74px 84px minmax(105px, 1fr) minmax(105px, 1fr) 72px;
    gap: 6px;
    align-items: center;
}
.inw-grid .form-input {
    padding: 8px 9px;
    font-size: 13px;
}
.inw-photo {
    width: 44px;
    height: 44px;
    border: 1px dashed var(--border);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    background: var(--card, #fff);
}
.inw-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* notes + manual barcode share the footer line */
.inw-foot {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
}
.inw-foot .inw-notes {
    flex: 1;
    padding: 8px 9px;
    font-size: 13px;
}
.inw-foot .inw-manual {
    flex: 1;
    margin: 0;
}
.inw-foot .inw-manual .form-input {
    padding: 8px 9px;
    font-size: 13px;
}
.inw-manual-toggle {
    font-size: 11.5px;
    color: var(--primary);
    white-space: nowrap;
}
.inw-add-row {
    width: 100%;
    border: 1px dashed var(--border);
    background: none;
    border-radius: 10px;
    padding: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary);
    cursor: pointer;
    font-family: inherit;
    margin: 2px 0 4px;
}
.inw-add-row:hover {
    border-color: var(--primary-light);
    background: var(--primary-wash, #fdf2f4);
}
@media (max-width: 760px) {
    .inw-grid {
        grid-template-columns: 44px 1fr 1fr;
    }
    .inw-grid .inw-desc {
        grid-column: 2 / -1;
    }
    .inw-supwrap {
        max-width: none;
    }
    .inw-foot {
        flex-wrap: wrap;
    }
}
.sup-bulkbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    background: #f6f3fb;
    border: 1px solid #e6ddf5;
    border-radius: 10px;
    padding: 8px 12px;
    margin: 10px 0;
}
.sup-bulk-n {
    font-size: 13px;
    color: #6b3fc2;
}
.sup-bulk-n b {
    font-size: 15px;
}
@media (max-width: 720px) {
    .sup-row,
    .sup-selectable .sup-row {
        grid-template-columns: 1fr 1fr;
        gap: 4px 10px;
    }
    .sup-selectable .sup-row {
        grid-template-columns: 20px 1fr 1fr;
    }
    .sup-row--head {
        display: none;
    }
    .sup-c-craft::before {
        content: 'Craft: ';
        color: var(--text-muted);
    }
    .sup-c-contact::before {
        content: 'Contact: ';
        color: var(--text-muted);
    }
    .sup-c-prod::before {
        content: 'Products: ';
        color: var(--text-muted);
    }
    .sup-c-gst::before {
        content: 'GST: ';
        color: var(--text-muted);
    }
    .sup-chk {
        grid-row: span 3;
    }
    .sup-row-acts {
        grid-column: 1 / -1;
        justify-content: flex-start;
        margin-top: 4px;
    }
}

/* Invoice manager modal (multi-invoice, ADR-030) */
.inv-summary {
    display: flex;
    gap: 10px;
    padding: 12px 0 10px;
}
.inv-summary > div {
    flex: 1;
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: var(--r-md);
    padding: 8px 10px;
}
.inv-summary span {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
}
.inv-summary b {
    font-size: 14px;
}
.inv-st--invoiced {
    color: var(--success);
}
.inv-st--partial {
    color: var(--warning);
}
.inv-st--none {
    color: var(--text-muted);
}
.inv-unknown {
    color: var(--text-muted);
    font-weight: 400;
}
.inv-over {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
    border-radius: var(--r-md);
    padding: 8px 12px;
    font-size: 12.5px;
    margin-bottom: 10px;
}
.inv-list {
    margin-bottom: 14px;
}
.inv-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-light);
}
.inv-row-main {
    flex: 1;
    font-size: 13.5px;
}
.inv-row-sub {
    color: var(--text-muted);
    font-size: 11.5px;
    margin-left: 8px;
    font-weight: 400;
}
.inv-row-x {
    border: 0;
    background: none;
    color: var(--danger);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}
.inv-empty {
    color: var(--text-muted);
    font-size: 13px;
    padding: 8px 0;
}
.inv-add {
    border-top: 1px solid var(--border-light);
    padding-top: 12px;
}
.inv-add-row {
    display: flex;
    gap: 10px;
}
.inv-add-row .form-group {
    flex: 1;
}
.inv-hint {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 10px;
}

/* Payments — quick reconciliation panel (period × method) */
.pay-recon {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 14px 16px;
    margin-bottom: 16px;
}
.pay-recon-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.pay-recon-title {
    font-weight: 800;
    font-size: 14px;
}
.pay-recon-periods {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.pay-recon-chip {
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text-muted);
    border-radius: var(--r-full);
    padding: 5px 12px;
    font-size: 12.5px;
    cursor: pointer;
}
.pay-recon-chip.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
.pay-recon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
}
.pay-recon-cell {
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: var(--r-md);
    padding: 9px 12px;
}
.pay-recon-cell span {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.pay-recon-cell b {
    font-size: 16px;
    font-variant-numeric: tabular-nums;
}
.pay-recon-empty {
    grid-column: 1 / -1;
    color: var(--text-muted);
    font-size: 13px;
    padding: 8px 2px;
}
.pay-recon-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 2px solid var(--border);
}
.pay-recon-total span {
    font-size: 12.5px;
    color: var(--text-muted);
}
.pay-recon-total b {
    font-size: 20px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--primary);
}

/* Customer detail — BUSY history (internal, admin/manager) */
.busy-hist {
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 12px 14px;
    margin-bottom: 14px;
    background: var(--card);
}
.busy-hist-head {
    font-weight: 800;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.busy-hist-tag {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--warning);
    background: #fef3c7;
    border-radius: 999px;
    padding: 1px 8px;
}
.busy-hist-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
}
.busy-hist-stats > div {
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: var(--r-md);
    padding: 8px 11px;
}
.busy-hist-stats b {
    display: block;
    font-size: 16px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.busy-hist-stats span {
    font-size: 11px;
    color: var(--text-muted);
}
.busy-hist-details {
    margin-top: 10px;
}
.busy-hist-details > summary {
    cursor: pointer;
    font-size: 12.5px;
    color: var(--text-light);
    padding: 4px 0;
}
.busy-hist-tblwrap {
    overflow-x: auto;
    border: 1px solid var(--border-light);
    border-radius: var(--r-md);
    margin-top: 8px;
    max-height: 320px;
    overflow-y: auto;
}
.busy-hist-tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.busy-hist-tbl th {
    position: sticky;
    top: 0;
    background: var(--surface);
    text-align: left;
    padding: 6px 9px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-light);
}
.busy-hist-tbl td {
    padding: 5px 9px;
    border-bottom: 1px solid var(--border-light);
}
.busy-hist-note {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 10px;
}

/* Order screen: live cart summary in the desktop right rail (hidden on mobile). */
.order-cart-rail {
    display: none;
}
.cart-rail-head,
.cart-reopen-tab {
    display: none;
}

/* Order Notes — a bar; sticks to the bottom on desktop (footer is the side rail). */
.order-notes-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--card);
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
    padding: 10px 14px;
    margin-top: 12px;
    border-radius: var(--r-md);
}
.onb-label {
    font-weight: 700;
    font-size: 13px;
    color: var(--text-muted);
    flex: none;
}
.order-notes-bar textarea {
    flex: 1;
    resize: none;
    margin: 0;
    min-height: 38px;
}
@media (min-width: 1024px) {
    .order-notes-bar {
        position: sticky;
        bottom: 0;
        z-index: 30;
        border-radius: var(--r-md) var(--r-md) 0 0;
    }
}
.ocr-hd {
    font-weight: 800;
    font-size: 13px;
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.ocr-hd span {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 600;
}
.ocr-empty {
    color: var(--text-muted);
    font-size: 12.5px;
    padding: 14px 2px;
    text-align: center;
}

/* List view — compact rectangular rows filling down. */
.ocr-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 0;
    border-bottom: 1px solid var(--border-light);
}
.ocr-item:last-child {
    border-bottom: none;
}
.ocr-thumb {
    width: 34px;
    height: 34px;
    border-radius: var(--r-sm);
    object-fit: cover;
    background: var(--surface);
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    color: var(--text-muted);
    overflow: hidden;
}
.ocr-main {
    flex: 1;
    min-width: 0;
}
.ocr-name {
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ocr-sub {
    font-size: 11px;
    color: var(--text-muted);
}
.ocr-amt {
    font-size: 12.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Cart view toggle (Showcase / List) in the rail header. */
/* Cart view retired on the order screen: desktop docks the cart alongside, and on
   the phone the single main list is easier to manage (owner, 2026-08-18). Hidden
   everywhere; the pane-cart rules below are now inert. */
.cart-view-toggle {
    display: none !important;
}
.cvt-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 22px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    border-radius: 5px;
    cursor: pointer;
}
.cvt-btn:hover {
    color: var(--text);
}
.cvt-btn.active {
    background: var(--card);
    color: var(--primary);
    box-shadow: var(--shadow-sm);
}

/* Narrow screens: the cart can't dock, so the toggle switches which pane shows.
   'main' = the order-taking screen; 'cart' = the grouped showcase cards. In cart
   view the footer flows inline (not the fixed bottom bar) so the cart scrolls
   naturally with the totals + View Summary below it. */
@media (max-width: 1023px) {
    #screen-order.pane-cart .order-pane-main {
        display: none;
    }
    #screen-order.pane-cart .screen-footer {
        position: static;
        max-width: none;
        margin: 0;
        padding: 0;
        background: transparent;
        box-shadow: none;
    }
    #screen-order.pane-cart .order-cart-rail {
        display: flex;
        flex-direction: column;
        margin-top: 4px;
    }
    #screen-order.pane-cart .cart-rail-head {
        display: flex;
        align-items: center;
        margin-bottom: 8px;
    }
    #screen-order.pane-cart .cart-rail-head .cart-rail-title {
        font-weight: 800;
    }
    #screen-order.pane-cart .cart-rail-head .cart-rail-btn {
        display: none;
    }
    #screen-order.pane-cart .order-quick-total {
        margin-top: 12px;
    }
}

/* Collapsible groups — Ready (in stock) and In Production (to produce). */
.ocr-group {
    margin-bottom: 8px;
}
.ocr-group-head {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 6px;
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: var(--r-sm);
    cursor: pointer;
    text-align: left;
}
.ocr-group-head:hover {
    background: var(--card);
}
.ocr-chev {
    flex: none;
    color: var(--text-muted);
    transition: transform 0.18s ease;
}
.ocr-group.collapsed .ocr-chev {
    transform: rotate(-90deg);
}
.ocr-group-title {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}
.ocr-group-title.ready {
    color: var(--primary);
}
.ocr-group-title.prod {
    color: #b45309;
}
.ocr-group-count {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    background: var(--card);
    border-radius: 999px;
    padding: 1px 7px;
}
.ocr-group-total {
    margin-left: auto;
    font-size: 12.5px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.ocr-group-body {
    overflow: hidden;
    transition:
        max-height 0.2s ease,
        opacity 0.2s ease,
        margin 0.2s ease;
    max-height: 460px;
    opacity: 1;
    margin-top: 8px;
}
.ocr-group.collapsed .ocr-group-body {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
}

/* Product-card carousel: 3 cards in view, arrows page through the rest. */
.ocr-carousel {
    position: relative;
}
.ocr-track {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 2px;
}
.ocr-track::-webkit-scrollbar {
    display: none;
}
.ocr-card {
    flex: 0 0 calc((100% - 16px) / 3);
    scroll-snap-align: start;
    background: var(--card);
    border: 1px solid var(--border-light);
    border-radius: var(--r-md);
    padding: 7px;
    text-align: center;
    min-width: 0;
}
.ocr-card-thumb {
    width: 100%;
    aspect-ratio: 1;
    border-radius: var(--r-sm);
    background: var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    color: var(--text-muted);
    overflow: hidden;
    margin-bottom: 6px;
}
.ocr-card-name {
    font-size: 11px;
    font-weight: 700;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ocr-card-sub {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ocr-card-amt {
    font-size: 12px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    margin-top: 4px;
}
.ocr-nav {
    position: absolute;
    top: 38%;
    transform: translateY(-50%);
    z-index: 2;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text);
    font-size: 16px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
}
.ocr-nav:hover {
    background: var(--surface);
}
.ocr-nav.prev {
    left: -8px;
}
.ocr-nav.next {
    right: -8px;
}

/* Scan confirmation popup — big photo of what was just added, auto-continues and
   flies into the cart. */
.scan-added-pop {
    position: fixed;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
    z-index: 1500;
    display: none;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: var(--card);
    border-radius: 18px;
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.28);
    padding: 20px 24px;
    width: min(300px, 82vw);
    pointer-events: none;
    animation: sap-in 0.16s ease;
}
@keyframes sap-in {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.9);
    }
    to {
        opacity: 1;
    }
}
.scan-added-pop.flying {
    transition:
        transform 0.46s cubic-bezier(0.5, 0.1, 0.25, 1),
        opacity 0.46s ease;
    animation: none;
}
.sap-check {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--success);
    color: #fff;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}
.sap-photo {
    width: 152px;
    height: 152px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 12px;
}
.sap-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.sap-name {
    font-weight: 700;
    font-size: 15px;
    margin-top: 10px;
    max-width: 100%;
}
.sap-sub {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}
.sap-count {
    font-size: 12px;
    color: var(--primary);
    font-weight: 700;
    margin-top: 8px;
}
@media (prefers-reduced-motion: reduce) {
    .scan-added-pop {
        animation: none;
    }
    .scan-added-pop.flying {
        transition: opacity 0.3s ease;
    }
}

.delivery-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    border-radius: var(--r-sm);
    padding: 1px 6px;
    vertical-align: middle;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.delivery-badge.production {
    background: #fff7ed;
    color: #c2410c;
    border: 1px solid #fdba74;
}
.delivery-badge.ready {
    background: #fff8e1;
    color: #f57f17;
    border: 1px solid #ffe082;
}
.delivery-badge.dispatched {
    background: #eef2ff;
    color: #4338ca;
    border: 1px solid #c7d2fe;
}
.delivery-badge.delivered {
    background: #ecfdf5;
    color: #059669;
    border: 1px solid #6ee7b7;
}
.payment-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    border-radius: var(--r-sm);
    padding: 1px 6px;
    vertical-align: middle;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.payment-badge.paid {
    background: #ecfdf5;
    color: #059669;
    border: 1px solid #6ee7b7;
}
.payment-badge.partial {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fcd34d;
}
.status-filters {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}
.status-filters select {
    flex: 1;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    font-size: 13px;
    background: var(--card);
    color: var(--text);
    font-family: inherit;
}
.delivery-select {
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    font-size: 13px;
    font-weight: 600;
    background: var(--card);
    color: var(--text);
    font-family: inherit;
    cursor: pointer;
}
/* ===== Product page (edit modal) manage row + browse status whispers ===== */
.proc-card-dot {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--danger);
    z-index: 2;
    pointer-events: none;
}
.proc-card-flag-col .proc-card-dot {
    position: static;
    display: inline-block;
}
.status-pill {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: var(--r-full);
    vertical-align: middle;
    margin-left: 6px;
    letter-spacing: 0.3px;
}
.status-pill--published {
    background: rgba(5, 150, 105, 0.12);
    color: var(--success);
}
.status-pill--pending {
    background: rgba(217, 119, 6, 0.12);
    color: var(--warning);
}
.status-pill--flagged {
    background: rgba(220, 38, 38, 0.12);
    color: var(--danger);
}
.status-pill--deleted {
    background: var(--surface);
    color: var(--text-muted);
}
.modal-manage {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border-light);
}
.modal-manage .btn-secondary {
    font-size: 13px;
    padding: 8px 14px;
}
.modal-manage-note {
    font-size: 12px;
    color: var(--text-muted);
    flex: 1;
    min-width: 0;
}
.modal-delete-btn {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--danger);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 8px 10px;
    font-family: inherit;
}

/* Bulk select / edit */
.browse-select-btn {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    font-size: 13px;
    font-weight: 500;
    padding: 6px 14px;
    cursor: pointer;
    color: var(--text);
    font-family: inherit;
    transition:
        background 0.15s,
        border-color 0.15s;
}
.browse-select-btn.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}
.browse-select-btn:hover:not(.active) {
    background: var(--primary-wash);
    border-color: var(--primary-light);
    color: var(--primary);
}
.browse-check {
    display: none;
    position: absolute;
    top: 8px;
    left: 8px;
    width: 20px;
    height: 20px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid var(--border-strong);
    z-index: 4;
}
.browse-selecting .browse-check {
    display: block;
}
.browse-selecting .proc-card {
    cursor: pointer;
}
.browse-selecting .proc-card-photo-wrap {
    pointer-events: none;
}
.proc-card--sel {
    box-shadow: 0 0 0 2px var(--primary);
    border-color: transparent;
}
/* Row views (list/detail): tint the selected row — a ring would be clipped by the
   table's overflow and is overridden by the row's box-shadow:none. */
.browse-list .proc-card--sel,
.browse-detail .proc-card--sel {
    background: var(--primary-wash);
    box-shadow: none;
}
.proc-card--sel .browse-check {
    background: var(--primary);
    border-color: var(--primary);
}
.proc-card--sel .browse-check::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 1px;
    width: 6px;
    height: 11px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.bulk-action-bar {
    position: fixed;
    bottom: 22px;
    left: 0;
    right: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    background: var(--card);
    border-top: 1px solid var(--border);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
    padding: 10px 16px;
    max-width: 600px;
    margin: 0 auto;
}
.bulk-count {
    font-size: 13px;
    font-weight: 600;
    flex: 1;
    min-width: 90px;
}
.bulk-act {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    font-size: 13px;
    font-weight: 500;
    padding: 7px 12px;
    cursor: pointer;
    color: var(--text);
    font-family: inherit;
}
.bulk-act--danger {
    color: var(--danger);
}
.bulk-act--restore {
    color: var(--success);
    font-weight: 600;
}
.bulk-done {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}
@media (min-width: 768px) {
    /* Fixed bottom inputs/bars clear the nav rail and re-centre with it */
    .bulk-action-bar {
        left: 50%;
        transform: translateX(-50%);
        max-width: 800px;
    }
    body.app-on .bulk-action-bar {
        left: calc(50% + 32px);
        transition: left 0.22s cubic-bezier(0.22, 1, 0.36, 1);
    }
    body.app-on.rail-pinned-body .bulk-action-bar {
        left: calc(50% + 106px);
    }
    body.app-on .ticket-note-input {
        left: 64px;
        transition: left 0.22s cubic-bezier(0.22, 1, 0.36, 1);
    }
    body.app-on.rail-pinned-body .ticket-note-input {
        left: 212px;
    }
}

/* Manage categories & types */
.tax-cat-block {
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 10px;
    margin-bottom: 10px;
    background: var(--surface);
}
.tax-cat-block .tax-cat-name {
    font-weight: 600;
}
.tax-subs {
    margin: 6px 0 0 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.tax-subrow {
    display: flex;
    align-items: center;
    gap: 6px;
}
.tax-subrow .tax-sub-input {
    flex: 1;
    font-size: 13px;
    padding: 6px 10px;
}
.tax-add-sub {
    align-self: flex-start;
    background: none;
    border: none;
    color: var(--primary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 2px 0;
    font-family: inherit;
}
.tax-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.tax-row .tax-input {
    flex: 1;
}
.tax-remove {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 20px;
    cursor: pointer;
    padding: 2px 8px;
    line-height: 1;
    flex-shrink: 0;
}
.tax-remove:hover {
    color: var(--danger);
}

/* Opt-in hover lift — applied individually to named buttons, not universal */
.hover-pop {
    transition:
        transform 0.18s cubic-bezier(0.25, 0.1, 0.25, 1),
        box-shadow 0.18s,
        background 0.15s;
    will-change: transform;
}
.hover-pop:hover {
    transform: scale(1.04);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}
.hover-pop:active {
    transform: scale(0.98);
}

/* Small Excel export icon button */
.excel-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 30px;
    background: #217346;
    color: #fff;
    border: none;
    border-radius: var(--r-sm);
    cursor: pointer;
    flex-shrink: 0;
    transition:
        background 0.15s,
        transform 0.15s;
}
.excel-btn svg {
    width: 18px;
    height: 18px;
}
.excel-btn:hover {
    background: #1a5c37;
    transform: scale(1.06);
}

/* ===== Reconnect to shared order banner ===== */
.reconnect-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--primary-wash);
    border: 1px solid var(--primary);
    border-radius: var(--r-md);
    padding: 10px 14px;
    margin-bottom: 16px;
}
.reconnect-text {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary);
}
.reconnect-resume {
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: var(--r-sm);
    font-size: 13px;
    font-weight: 600;
    padding: 7px 14px;
    cursor: pointer;
    font-family: inherit;
}
.reconnect-end {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 13px;
    cursor: pointer;
    font-family: inherit;
    padding: 7px 6px;
}

/* ===== Inventory ===== */
.inv-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--card);
    border: 1px solid var(--border-light);
    border-radius: var(--r-md);
    padding: 10px 12px;
    margin-bottom: 6px;
    box-shadow: var(--shadow-sm);
}
.inv-row-main {
    flex: 1;
    min-width: 0;
}
.inv-row-barcode {
    font-size: 13px;
    font-weight: 600;
    color: var(--primary);
}
.inv-row-desc {
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.inv-row-meta {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}
.inv-qty {
    min-width: 34px;
    text-align: center;
    padding: 4px 8px;
    border-radius: var(--r-full);
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.inv-qty--in {
    background: rgba(5, 150, 105, 0.12);
    color: var(--success);
}
.inv-qty--out {
    background: rgba(220, 38, 38, 0.12);
    color: var(--danger);
}
.inv-qty--none {
    background: var(--surface);
    color: var(--text-muted);
}
.tally-thumb {
    width: 40px;
    height: 40px;
    border-radius: var(--r-sm);
    object-fit: cover;
    flex-shrink: 0;
    cursor: pointer;
    background: var(--surface);
}
.tally-thumb--none {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 14px;
    cursor: default;
    border: 1px solid var(--border-light);
}
.tally-flag {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 17px;
    cursor: pointer;
    padding: 4px 6px;
    flex-shrink: 0;
    line-height: 1;
}
.tally-flag:hover {
    color: var(--danger);
}
.tally-controls {
    display: flex;
    align-items: center;
    gap: 6px;
}
.tally-btn {
    width: 30px;
    height: 30px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--card);
    font-size: 16px;
    cursor: pointer;
    font-family: inherit;
}
.tally-count {
    width: 52px;
    text-align: center;
    padding: 6px 4px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    font-size: 14px;
    font-family: inherit;
}
.tally-remove {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 18px;
    cursor: pointer;
    padding: 4px;
}

/* ===== Premium Surface: single source of truth ===== */
/* Identical to .kpi-clickable — reusable utility for any interactive surface */
.gloss-pop,
.kpi-clickable {
    cursor: pointer;
    transition:
        transform 0.15s,
        box-shadow 0.15s;
}
.gloss-pop:hover,
.kpi-clickable:hover {
    transform: scale(1.045);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.gloss-pop:active,
.kpi-clickable:active {
    transform: scale(0.97);
}

/* ===== Stat Drilldown ===== */
.drilldown-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.drilldown-modal {
    background: white;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    width: 100%;
    max-width: 500px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    animation: modalIn 0.2s ease-out;
}
.drilldown-header {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-light);
    gap: 12px;
}
.drilldown-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    flex: 1;
}
.drilldown-total {
    font-weight: 700;
    font-size: 14px;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.drilldown-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--text-muted);
    padding: 0 4px;
}
.drilldown-list {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.drilldown-row {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border-light);
    cursor: pointer;
    transition: background 0.1s;
}
.drilldown-row:active {
    background: var(--surface);
}
.drilldown-row-left {
    flex: 1;
    min-width: 0;
}
.drilldown-row-name {
    font-weight: 600;
    font-size: 14px;
}
.drilldown-row-meta {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}
.drilldown-row-amount {
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
    margin-left: 12px;
    font-variant-numeric: tabular-nums;
}

/* ===== CRM ===== */
.crm-card {
    background: white;
    border-radius: var(--r-lg);
    padding: 14px 16px;
    margin-bottom: 12px;
    box-shadow: var(--shadow-sm);
}
.crm-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}
.crm-card-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--text);
}
.crm-card-biz {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 1px;
}
.crm-card-value {
    font-weight: 600;
    font-size: 14px;
    color: var(--text);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.crm-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-muted);
}
.crm-dormant {
    color: var(--warning);
    font-weight: 500;
}
.crm-followup {
    color: var(--primary);
    font-weight: 500;
}

.crm-detail-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}
.crm-stat {
    background: white;
    border-radius: var(--r-lg);
    padding: 16px;
    text-align: center;
    box-shadow: var(--shadow-sm);
}
.crm-stat-val {
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.crm-stat-lbl {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
    font-weight: 500;
}
.crm-detail-info {
    background: white;
    border-radius: var(--r-lg);
    padding: 14px 16px;
    margin-bottom: 16px;
    font-size: 13px;
    line-height: 1.8;
    box-shadow: var(--shadow-sm);
}
.crm-section-title {
    font-weight: 600;
    font-size: 12px;
    margin: 20px 0 8px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.crm-note-form {
    background: white;
    border-radius: var(--r-lg);
    padding: 14px;
    margin-bottom: 12px;
    box-shadow: var(--shadow-sm);
}
.crm-followup-item {
    font-size: 13px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-light);
}
.crm-followup-item.overdue {
    color: var(--danger);
}

.crm-timeline {
    margin-bottom: 20px;
}
.crm-tl-item {
    display: flex;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-light);
}
.crm-tl-item:last-child {
    border-bottom: none;
}
.crm-tl-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}
.crm-tl-content {
    flex: 1;
    min-width: 0;
}
.crm-tl-title {
    font-size: 13px;
    font-weight: 500;
    word-break: break-word;
}
.crm-tl-sub {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}
.crm-tl-date {
    font-size: 11px;
    color: #aaa;
    margin-top: 2px;
}

/* ===== KPI Grid ===== */
.kpi-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.kpi-card {
    background: white;
    border-radius: var(--r-lg);
    padding: 16px;
    text-align: center;
    box-shadow: var(--shadow-sm);
}
.kpi-card.kpi-warn {
    border-left: 3px solid var(--warning);
}
.kpi-val {
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.kpi-lbl {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ===== Responsive: Tablet ===== */
@media (min-width: 601px) {
    /* keep room for the fixed bottom bar — a bare `padding: 24px` here used to
       wipe the mobile padding-bottom, hiding the last card behind the bar */
    .screen {
        padding: 24px;
        padding-bottom: 182px;
        max-width: 800px;
    }
    .screen-title {
        margin: 0 -24px 12px;
        padding: 10px 24px;
    }
    .screen-footer {
        left: 50%;
        transform: translateX(-50%);
        max-width: 800px;
    }
    .summary-item-name {
        max-width: 50%;
    }
}

/* ===== Responsive: Desktop ===== */
@media (min-width: 768px) {
    .screen {
        max-width: 1200px;
        margin: 0 auto;
    }
    .stat-grid,
    .dashboard-stats .stat-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    .kpi-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}
/* ===== Desktop nav rail =====
   Every grid-menu destination, docked left on all signed-in screens. Icon
   width by default; hovering expands the whole column (labels slide in) and
   it collapses when the cursor leaves or a selection is made. The chevron at
   the bottom pins it open (SYNC-style), which shifts the content over. */
@media (min-width: 768px) {
    .ds-actions {
        display: none;
    } /* home strip: the rail covers it on desktop */
    body.app-on {
        padding-left: 64px;
        transition: padding-left 0.22s cubic-bezier(0.22, 1, 0.36, 1);
    }
    body.app-on.rail-pinned-body {
        padding-left: 212px;
    }
    /* The bar spans the full window — it pulls back over the body's rail
       padding so the FLOW mark sits at the true top-left corner. */
    body.app-on .app-header {
        margin-left: -64px;
        transition: margin-left 0.22s cubic-bezier(0.22, 1, 0.36, 1);
    }
    body.app-on.rail-pinned-body .app-header {
        margin-left: -212px;
    }
    /* Fixed bottom bars centre on the viewport — nudge them by half the rail
       offset so they stay centred under the shifted content column. */
    body.app-on .screen-footer {
        left: calc(50% + 32px);
        transition: left 0.22s cubic-bezier(0.22, 1, 0.36, 1);
    }
    body.app-on.rail-pinned-body .screen-footer {
        left: calc(50% + 106px);
    }
    body.app-on #navRail {
        display: flex;
        position: fixed;
        left: 0;
        top: 57px;
        bottom: 22px;
        width: 64px;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        padding: 12px 8px;
        background: #fff;
        border-right: 1px solid rgba(0, 0, 0, 0.08);
        overflow-y: auto;
        overflow-x: hidden;
        white-space: nowrap;
        z-index: 90;
        transition:
            width 0.22s cubic-bezier(0.22, 1, 0.36, 1),
            box-shadow 0.22s;
    }
    body.app-on #navRail:hover:not(.rail-snap) {
        width: 204px;
        box-shadow: var(--shadow-lg);
    }
    body.app-on #navRail.rail-pinned {
        width: 204px;
        box-shadow: none;
    }
    #navRail .ds-action {
        width: 100%;
        flex-direction: row;
        justify-content: flex-start;
        gap: 12px;
        padding: 12px 13px;
        transition:
            background 0.15s,
            border-color 0.15s,
            color 0.15s;
    }
    /* Row highlight follows the pointer through the rail */
    #navRail .ds-action:hover {
        transform: none;
        background: var(--primary-wash);
        border-color: var(--primary-light);
        color: var(--primary);
    }
    #navRail .ds-action svg {
        width: 22px;
        height: 22px;
        flex-shrink: 0;
    }
    #navRail .ds-action-label {
        max-height: none;
        max-width: 0;
        opacity: 0;
        overflow: hidden;
        margin-top: 0;
        font-size: 13px;
        font-weight: 500;
        transition:
            opacity 0.18s,
            max-width 0.22s;
    }
    #navRail:hover:not(.rail-snap) .ds-action-label,
    #navRail.rail-pinned .ds-action-label {
        max-width: 130px;
        opacity: 1;
    }
    .rail-pin {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 34px;
        margin-bottom: 4px;
        border: 1px solid var(--border);
        border-radius: var(--r-md);
        background: var(--surface);
        color: var(--text-muted);
        cursor: pointer;
        font-family: inherit;
    }
    .rail-pin:hover {
        color: var(--primary);
        border-color: var(--primary-light);
        background: var(--primary-wash);
    }
    .rail-pin svg {
        transition: transform 0.22s;
    }
    #navRail.rail-pinned .rail-pin svg {
        transform: rotate(180deg);
    }
    /* The current screen's row stays lit in the brand gradient */
    #navRail .ds-action.active,
    #navRail .ds-action.active:hover {
        background: var(--grad);
        border-color: transparent;
        color: #fff;
    }
    #navRail .ds-action.active:hover {
        filter: brightness(1.05);
    }
}
/* Order Details on desktop: the action bar leaves the bottom edge and becomes
   a sticky vertical rail beside the order — every control gets full-width room
   and the content is never hidden behind a fixed bar. Mobile keeps the grid. */
@media (min-width: 768px) {
    .view-order-layout {
        display: flex;
        gap: 24px;
        align-items: flex-start;
    }
    .view-order-layout > #viewOrderContent {
        flex: 1;
        min-width: 0;
    }
    #screen-view-order {
        padding-bottom: 40px;
    }
    #screen-view-order .screen-footer {
        position: sticky;
        top: 24px;
        left: auto;
        transform: none;
        flex: 0 0 260px;
        max-width: none;
        margin: 0;
        padding: 0 0 12px 20px;
        background: none;
        box-shadow: none;
        border-left: 1px solid var(--border-light);
        max-height: calc(100vh - 40px);
        overflow-y: auto;
    }
    #screen-view-order .rail-order-num {
        display: block;
        text-align: center;
        font-family:
            'Geist',
            -apple-system,
            sans-serif;
        font-size: 15px;
        font-weight: 700;
        letter-spacing: 0.3px;
        color: var(--primary);
        background: var(--primary-wash);
        border-radius: var(--r-md);
        padding: 9px 10px;
        margin-bottom: 10px;
    }
    #screen-view-order .screen-title .order-num {
        display: none;
    }
    #screen-view-order .vo-totals-card,
    #screen-view-order .vo-invoicing-card,
    #screen-view-order .vo-payments-card {
        display: none;
    }
    #railSummary {
        display: block;
    }
    .rail-box {
        background: var(--surface);
        border: 1px solid var(--border-light);
        border-radius: var(--r-lg);
        padding: 10px 14px;
        margin-top: 14px;
    }
    .rail-box-title {
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--text-muted);
        margin: 4px 0 2px;
    }
    .rail-box .total-row {
        font-size: 13px;
        padding: 5px 0;
    }
    .rail-box .grand-total {
        font-size: 14px;
        padding-top: 8px;
    }
    .rail-box .balance-due {
        font-size: 14px;
    }
    #screen-view-order .share-buttons {
        display: flex;
        flex-direction: column;
        gap: 8px;
        overflow: visible;
    }
    #screen-view-order .share-buttons .btn-primary,
    #screen-view-order .share-buttons .btn-secondary,
    #screen-view-order .share-buttons .btn-danger {
        flex: 0 0 auto;
        width: 100%;
        justify-content: center;
    }
    #screen-view-order .share-buttons .delivery-select {
        width: 100%;
    }
    #screen-view-order .rail-label {
        display: block;
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--text-muted);
        margin: 8px 0 -4px;
    }
    /* Main actions: a row of icon tiles that lift and reveal their label on
       hover — the home dock's move, scaled down for the rail. */
    #screen-view-order .vo-act-row {
        display: flex;
        gap: 8px;
    }
    #screen-view-order .share-buttons .vo-act {
        flex: 1;
        width: auto;
        flex-direction: column;
        gap: 0;
        padding: 13px 4px;
        transition:
            transform 0.18s cubic-bezier(0.25, 0.1, 0.25, 1),
            box-shadow 0.18s,
            filter 0.15s;
        position: relative;
    }
    #screen-view-order .vo-act svg {
        width: 20px;
        height: 20px;
    }
    #screen-view-order .vo-act .vo-act-label {
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        margin-top: 0;
        font-size: 10px;
        font-weight: 600;
        line-height: 1.25;
        text-align: center;
        transition:
            max-height 0.2s,
            opacity 0.15s,
            margin-top 0.2s;
    }
    #screen-view-order .vo-act:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-md);
        z-index: 5;
    }
    #screen-view-order .vo-act:hover .vo-act-label {
        max-height: 30px;
        opacity: 1;
        margin-top: 5px;
    }
    /* Downloads sit at the very bottom of the rail as quiet stacked bars */
    #screen-view-order .rail-exports {
        flex-direction: column;
        margin-top: 14px;
    }
    #screen-view-order .share-buttons .btn-danger {
        margin-top: 20px;
        padding: 8px 12px;
        font-size: 13px;
    }
}
@media (min-width: 768px) {
    #screen-dashboard .search-bar {
        display: flex;
        gap: 12px;
        align-items: center;
    }
    #screen-order .scan-section {
        display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: stretch;
    }
    #screen-order .scan-section .scan-row,
    #screen-order .scan-section .search-bar,
    #screen-order .scan-section #guestSessionBar {
        margin: 0;
    }
    /* Four truly-equal action buttons: grid columns are equal regardless of the
       text length in each (flex distribution wasn't, because of nowrap widths). */
    #screen-order .scan-row {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
    }
    #screen-order .scan-row > .btn-scan {
        grid-column: auto;
    }
    .btn-upload-append {
        display: inline-flex;
        align-items: center;
    }
    #screen-order .scan-row > .btn-manual.btn-upload-append {
        display: inline-flex;
    }
    /* three equal cards across on desktop */
    .intro-cards {
        grid-template-columns: repeat(3, 1fr);
        max-width: 720px;
    }
    .intro-card--upload {
        display: flex;
    }
    /* Desktop keeps a level scan row — no oversized thumb card needed */
    .btn-scan {
        min-height: 0;
        padding: 12px 16px;
        font-size: 14px;
    }
    .btn-scan svg {
        width: 20px;
        height: 20px;
    }
    .order-quick-total {
        display: flex;
        gap: 24px;
    }
    .browse-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 12px;
    }
    .browse-grid.view-small {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 8px;
    }
    .browse-grid .proc-card-photo-wrap {
        height: 170px;
    }
    .browse-grid.view-small .proc-card-photo-wrap {
        height: 100px;
    }
    .browse-detail .proc-card,
    .browse-detail-header {
        grid-template-columns: 40px 1fr 130px 70px 90px 32px;
        gap: 12px;
    }
    .browse-detail .proc-card-info h4 {
        -webkit-line-clamp: 1;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .drilldown-modal {
        border-radius: 16px;
        margin-bottom: 10vh;
    }
    .drilldown-overlay {
        align-items: center;
    }
}

@media (min-width: 1024px) {
    .screen {
        max-width: 900px;
    }
    .screen-footer {
        max-width: 900px;
    }
    /* Procurement is a scanning grid, not a reading/form screen — let it use the
       desktop width so the auto-fill product grid shows more columns at the same
       card size. Other screens stay at 900px (correct for forms + reading). */
    #screen-procurement {
        max-width: 1400px;
    }
    /* Dashboard is an at-a-glance summary — widen it too so the KPI cards flow
       more-per-row (auto-fill keeps card size, no stretch on short rows). */
    #screen-dashboard {
        max-width: 1400px;
    }
    #screen-dashboard .kpi-grid {
        grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
    }
    /* Activity page: feed on the left, metrics on the right */
    #screen-operations {
        max-width: 1200px;
    }
    .activity-layout {
        display: grid;
        grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr);
        gap: 20px;
        align-items: start;
    }
    /* Detail (table) view fills the desktop width with all product fields */
    .browse-detail .proc-card,
    .browse-detail-header {
        grid-template-columns:
            40px minmax(150px, 1.5fr) 108px 94px 92px 58px 64px 82px 58px 90px minmax(120px, 1.3fr)
            26px;
        gap: 10px;
    }
    .browse-detail .proc-card .dcol-x {
        display: block;
    }
    .browse-detail-header .dcol-x {
        display: flex;
    }
}

/* ===== Order screen: wide dense voucher on desktop, rail in the gutter =====
   ADR-028: the order column widens (620 → 880) and each scanned item becomes a
   compact single row instead of a stacked card, so the whole voucher is legible
   at a glance on a monitor. The floating summary/CTA bar moves into the right
   gutter; content column + rail are centred as one 1204px group, no overlap.
   Mobile/tablet (< 1024px) keep the stacked touch card unchanged. */
@media (min-width: 1024px) {
    /* Bottom sticky summary bar (owner, 2026-08-20: the docked side cart was never
       looked at — "the summary should show as a bottom sticky row"). The order screen
       gets the full width back; the footer pins to the bottom with qty · WS total ·
       ₹ total · View Summary in one row. The rail/reopen-tab markup stays for the
       phone Main/Cart pane toggle but never shows on desktop. */
    .multiplier-bar .cart-view-toggle {
        display: none;
    }
    /* Two columns: the form on the left, a sticky summary pane on the right
       (owner, 2026-09-16: the fixed bottom bar hid behind a laptop's taskbar —
       "instead of a bar, build the summary into the form, a fixed pane on the
       right"). The pane is the same .screen-footer element (same ids, same live
       numbers), re-homed into the right column and stuck to the top of the
       viewport under the header, so it never depends on the window's bottom edge.
       MUST be scoped to .active: a bare `#screen-order` (id) outranks
       `.screen{display:none}` / `.screen.active{display:block}` (classes), so an
       unscoped `display:grid` here kept the order screen rendered on EVERY wide
       desktop page — stuck above whatever screen you navigated to (5.318.0 fix). */
    #screen-order.active {
        max-width: none;
        margin: 0;
        padding: 0 max(16px, calc((100vw - 1264px) / 2)) 40px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) 292px;
        column-gap: 22px;
        align-items: start;
    }
    #screen-order > * {
        grid-column: 1;
        min-width: 0;
    }
    #screen-order > .screen-footer {
        grid-column: 2;
        grid-row: 1 / span 80;
        position: sticky;
        top: 76px;
        left: auto;
        right: auto;
        bottom: auto;
        transform: none;
        width: auto;
        max-width: none;
        margin: 0;
        padding: 16px 18px 18px;
        display: flex;
        flex-direction: column;
        gap: 0;
        border: 1px solid var(--border);
        border-radius: 14px;
        background: var(--card);
        box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
        z-index: 5;
    }
    #screen-order .cart-rail-head,
    #screen-order .order-cart-rail,
    #screen-order .cart-reopen-tab {
        display: none !important;
    }
    #screen-order .order-pane-head {
        display: block;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--text-muted);
        margin-bottom: 10px;
    }
    #screen-order .order-quick-total {
        flex-direction: column;
        gap: 0;
        margin: 0 0 6px;
        font-size: 13px;
    }
    #screen-order .order-quick-total span {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 10px;
        padding: 9px 0;
        border-bottom: 1px dashed var(--border);
    }
    #screen-order .order-quick-total strong {
        font-size: 17px;
        color: var(--text);
        font-variant-numeric: tabular-nums;
    }
    #screen-order .order-quick-total span:last-child strong {
        font-size: 22px;
        color: var(--primary);
    }
    #screen-order .order-quick-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin: 6px 0 14px;
    }
    #screen-order .order-quick-meta span {
        font-size: 11.5px;
        color: var(--text-muted);
        background: var(--surface, #f6f4f1);
        border-radius: 999px;
        padding: 3px 9px;
    }
    #screen-order .order-quick-meta .oqm-empty {
        background: none;
        padding: 0;
    }
    #screen-order .screen-footer .btn-large,
    #screen-order .screen-footer .btn-primary {
        width: 100%;
        justify-content: center;
        flex: none;
        margin: 0;
    }
    /* No fixed bottom bar on desktop any more — the notes bar sticks to the true bottom. */
    #screen-order .order-notes-bar {
        bottom: 0;
    }

    /* Dense one-row-per-item: img | name/barcode/colour/hint … price | qty | Stock/Order | ✎ × | notes */
    #screen-order .order-item {
        align-items: center;
        padding: 7px 14px;
    }
    #screen-order .order-item-details {
        display: flex;
        align-items: center;
        gap: 14px;
    }
    #screen-order .order-item-top {
        flex: 1 1 auto;
        min-width: 0;
    }
    #screen-order .order-item-top > div:first-child {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
    }
    #screen-order .order-item-barcode {
        margin-bottom: 0;
    }
    #screen-order .order-item-name {
        max-width: 240px;
    }
    #screen-order .order-item-top > div:last-child {
        flex: 0 0 auto;
    }
    #screen-order .order-item-controls {
        margin-top: 0;
        flex: 0 0 auto;
    }
    #screen-order .order-item-note {
        width: 190px;
        flex: 0 0 190px;
        margin-top: 0;
    }
    #screen-order .qty-btn {
        width: 32px;
        height: 32px;
        font-size: 16px;
    }
    #screen-order .qty-value {
        width: 30px;
    }
    #screen-order .stock-btn {
        padding: 6px 9px;
    }

    /* Grouped scan cards keep the stacked layout — the colour breakdown needs
       its own lines, so the dense one-row flattening doesn't apply to them. */
    #screen-order .order-item--scan {
        align-items: flex-start;
    }
    #screen-order .order-item--scan .order-item-details {
        display: block;
    }
    #screen-order .order-item--scan .order-item-controls {
        margin-top: 6px;
    }
    #screen-order .order-item--scan .order-item-note {
        width: 100%;
        flex: none;
        margin-top: 6px;
    }
    #screen-order .order-item--scan .oi-colour-lines {
        max-width: 560px;
    }
    #screen-order .order-item--scan .qty-btn {
        width: 28px;
        height: 28px;
        font-size: 15px;
    }
}

/* Feedback tab */
.feedback-summary {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    flex-wrap: wrap;
}
.feedback-count {
    font-size: 13px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 12px;
    cursor: pointer;
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease;
}
.feedback-count:hover {
    transform: scale(1.05);
}
.feedback-count.fb-filter-active {
    box-shadow: 0 0 0 2px var(--text);
    transform: scale(1.05);
}
.feedback-new {
    background: #f3e8ee;
    color: var(--primary);
}
.feedback-ack {
    background: #fef3c7;
    color: #92400e;
}
.feedback-done {
    background: #d1fae5;
    color: #065f46;
}
.feedback-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.feedback-item {
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 12px 14px;
}
.feedback-item.fb-status-new {
    border-left: 3px solid var(--primary);
}
.feedback-item.fb-status-ack {
    border-left: 3px solid #f59e0b;
}
.feedback-item.fb-status-done {
    border-left: 3px solid var(--success);
    opacity: 0.7;
}
.fb-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    flex-wrap: wrap;
    gap: 4px;
}
.fb-category {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--primary);
}
.fb-meta {
    font-size: 11px;
    color: var(--text-muted);
}
.fb-message {
    font-size: 14px;
    line-height: 1.4;
    margin-bottom: 8px;
    white-space: pre-wrap;
    word-break: break-word;
}
.fb-actions {
    display: flex;
    gap: 8px;
}
.fb-action {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: var(--r-sm);
    border: 1px solid var(--border);
    background: white;
    cursor: pointer;
    font-family: inherit;
}
.fb-action:hover {
    background: var(--surface);
}
.fb-action-resolve {
    background: var(--success);
    color: white;
    border-color: var(--success);
}
.fb-action-resolve:hover {
    opacity: 0.9;
    background: var(--success);
}
.fb-action-delete {
    background: none;
    border: none;
    color: var(--danger);
    margin-left: auto;
}
.fb-action-delete:hover {
    background: rgba(220, 38, 38, 0.06);
}
.fb-resolved-label {
    font-size: 11px;
    color: var(--success);
    font-weight: 600;
}

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

/* ===== Global Search (⌘K) ===== */
.header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.search-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 12vh 16px 16px;
    background: rgba(20, 10, 16, 0.38);
    backdrop-filter: blur(3px);
    animation: gsFade 0.14s ease;
}
@keyframes gsFade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
.search-box {
    width: 100%;
    max-width: 560px;
    background: var(--card);
    border-radius: 16px;
    box-shadow:
        var(--shadow-lg),
        0 0 0 1px var(--border-light);
    overflow: hidden;
    animation: gsRise 0.16s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes gsRise {
    from {
        transform: translateY(-8px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}
.search-input-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-light);
}
.search-input-ico {
    color: var(--text-muted);
    flex: 0 0 auto;
}
.search-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 17px;
    color: var(--text);
    font-family: inherit;
}
.search-input::placeholder {
    color: var(--text-muted);
}
.search-esc {
    flex: 0 0 auto;
    border: none;
    background: transparent;
    color: var(--text-muted);
    border-radius: 8px;
    width: 30px;
    height: 30px;
    padding: 0;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.search-esc:hover {
    color: var(--text);
    background: var(--surface);
}
.search-results {
    max-height: 56vh;
    overflow-y: auto;
    padding: 6px;
}
.gs-hint {
    padding: 22px 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
}
.gs-group-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
    padding: 12px 12px 5px;
}
.gs-result {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border-radius: 10px;
    cursor: pointer;
}
.gs-result.gs-sel {
    background: var(--primary-wash);
}
.gs-ico {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    background: var(--surface);
    color: var(--primary);
}
.gs-ico--order {
    color: #2563eb;
}
.gs-ico--customer {
    color: #059669;
}
.gs-ico--ticket {
    color: #d97706;
}
.gs-ico--supplier {
    color: #7c3aed;
}
.gs-ico--feedback {
    color: #db2777;
}
.gs-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.gs-primary {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gs-secondary {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===== Clear-all-filters quick button ===== */
.clear-filters-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition:
        background 0.15s ease,
        color 0.15s ease,
        border-color 0.15s ease,
        transform 0.12s ease;
    white-space: nowrap;
}
.clear-filters-btn:hover {
    background: var(--primary-wash);
    border-color: var(--primary-light);
    color: var(--primary);
    transform: translateY(-1px);
}
.clear-filters-btn:active {
    transform: translateY(0);
}
.clear-filters-btn svg {
    flex: 0 0 auto;
}

/* ===== Procurement export menu (admin) ===== */
.export-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 60;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
    padding: 4px;
    min-width: 190px;
}
.export-menu button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 9px 12px;
    background: transparent;
    border: none;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    color: var(--text);
    cursor: pointer;
    white-space: nowrap;
}
.export-menu button:hover {
    background: var(--primary-wash);
    color: var(--primary);
}

/* ===== Active-filter chips (browse) ===== */
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--primary-wash);
    color: var(--primary);
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease;
}
.filter-chip:hover {
    background: rgba(220, 20, 60, 0.14);
}
.filter-chip-x {
    font-size: 16px;
    line-height: 1;
    opacity: 0.8;
}

/* ===== Procurement action buttons (uniform, responsive: 4-up desktop / 2x2 mobile) ===== */
.proc-actions {
    display: grid;
    grid-template-columns: 1fr 1fr; /* mobile: always 2×2, never 3+1 */
    gap: 10px;
    margin-bottom: 12px;
}
@media (min-width: 768px) {
    .proc-actions {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    }
}
.proc-act {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 10px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    color: var(--text);
    cursor: pointer;
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.12s ease;
}
.proc-act svg {
    width: 20px;
    height: 20px;
    color: var(--primary);
    flex-shrink: 0;
}
.proc-act:hover {
    border-color: var(--primary-light);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}
.proc-act:active {
    transform: translateY(0);
}
/* Publish is the step that makes work visible to reps — it wears the brand
   gradient, and pulses with a count while approved products wait on it. */
.proc-act--publish {
    background: var(--grad);
    color: #fff;
    border-color: transparent;
    position: relative;
}
.proc-act--publish svg {
    color: #fff;
}
.proc-act--publish:hover {
    border-color: transparent;
    filter: brightness(1.06);
}
@keyframes publishPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(220, 20, 60, 0.45);
    }
    70% {
        box-shadow: 0 0 0 12px rgba(220, 20, 60, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(220, 20, 60, 0);
    }
}
.proc-act--publish.pulse {
    animation: publishPulse 1.8s ease-out infinite;
}

/* Shine sweep — draws the eye to an action tile that has items waiting on it
   (e.g. ERP export with new products). Animates a gradient's position (not a
   transform) so the corner badge is never clipped. */
.proc-act--shine {
    position: relative;
    background: linear-gradient(180deg, #fff, #fff4f4);
    border-color: var(--primary-light);
}
.proc-act--shine::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 42%, rgba(220, 20, 60, 0.22) 50%, transparent 58%);
    background-size: 220% 100%;
    background-position: 180% 0;
    animation: shineSweep 2.8s ease-in-out infinite;
}
@keyframes shineSweep {
    0% {
        background-position: 180% 0;
    }
    55%,
    100% {
        background-position: -90% 0;
    }
}
@media (prefers-reduced-motion: reduce) {
    .proc-act--shine::after {
        animation: none;
    }
}
.proc-act-badge {
    position: absolute;
    top: -7px;
    right: -7px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    background: #fff;
    color: var(--primary);
    border: 1.5px solid var(--primary);
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===== Activity page (revamped Operations) ===== */
.activity-side .ops-stat-card {
    position: relative;
}
.ops-estimate-tag {
    position: absolute;
    top: 14px;
    right: 14px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    background: #faeeda;
    color: #854f0b;
    padding: 2px 8px;
    border-radius: 999px;
}

/* ===== Consignment (Shop-in-Shop) ===== */
.cns-party-group {
    margin-bottom: 18px;
}
.cns-party-head {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 2px 8px;
    border-bottom: 1px solid var(--border-light);
    margin-bottom: 8px;
}
.cns-party-name {
    font-size: 16px;
    font-weight: 800;
    color: var(--text);
}
.cns-party-meta {
    font-size: 12px;
    color: var(--text-muted);
}
.cns-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 12px 14px;
    margin-bottom: 8px;
    cursor: pointer;
    transition:
        box-shadow 0.15s,
        transform 0.15s;
}
.cns-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}
.cns-card-main {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 6px;
}
.cns-card-no {
    font-weight: 700;
    color: var(--primary-dark);
    font-size: 15px;
}
.cns-card-date {
    font-size: 12px;
    color: var(--text-muted);
}
.cns-card-stats {
    display: flex;
    gap: 14px;
    font-size: 12.5px;
    color: var(--text-light);
}
.cns-pending {
    color: var(--warning);
    font-weight: 700;
}

/* Import drop zone */
.cns-drop {
    border: 2px dashed var(--border-strong);
    border-radius: var(--r-lg);
    background: var(--surface);
    transition:
        background 0.15s,
        border-color 0.15s;
}
.cns-drop.cns-drag {
    border-color: var(--primary);
    background: var(--primary-wash);
}
.cns-drop-inner {
    padding: 40px 20px;
    text-align: center;
    cursor: pointer;
}
.cns-drop-icon {
    font-size: 34px;
    color: var(--primary);
}

/* Review + detail */
.cns-review-head {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 12px;
}
.cns-review-summary {
    font-size: 13px;
    color: var(--text-light);
    background: var(--surface);
    border-radius: var(--r-sm);
    padding: 8px 12px;
    margin-bottom: 10px;
}
.cns-warn {
    background: #fdf3e7;
    color: #8a5a00;
    border: 1px solid #f0d9b5;
    border-radius: var(--r-sm);
    padding: 8px 12px;
    font-size: 12.5px;
    margin-bottom: 10px;
}
.cns-tip {
    background: #edf5ff;
    color: #1d4e89;
    border: 1px solid #cbddf5;
    border-radius: var(--r-sm);
    padding: 8px 12px;
    font-size: 12.5px;
    margin-bottom: 10px;
}
.cns-recovered {
    font-size: 11px;
    font-weight: 600;
    color: #0b7a3e;
    cursor: help;
}
.cns-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--border-light);
    border-radius: var(--r-md);
}
.cns-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.cns-table th {
    text-align: left;
    background: var(--surface);
    color: var(--text-muted);
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 8px 10px;
    position: sticky;
    top: 0;
}
.cns-table td {
    padding: 8px 10px;
    border-top: 1px solid var(--border-light);
    vertical-align: middle;
}
.cns-table tr.cns-needsphoto td {
    background: #fff9f2;
}
.cns-table tr.cns-line-done td {
    opacity: 0.5;
}
/* Settled (closed) consignments — collapsed section on the list */
.cns-settled {
    margin-top: 18px;
    border-top: 1px solid var(--border, #e5e5e5);
    padding-top: 8px;
}
.cns-settled > summary {
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 8px 2px;
    list-style: revert;
}
.cns-settled[open] > summary {
    margin-bottom: 6px;
}
.cns-card--settled {
    opacity: 0.72;
}
.cns-desc {
    max-width: 240px;
}
.cns-code {
    font-size: 11px;
    color: var(--primary-dark);
    background: var(--primary-wash);
    padding: 1px 5px;
    border-radius: var(--r-full);
}
.cns-thumb {
    width: 34px;
    height: 34px;
    object-fit: cover;
    border-radius: var(--r-sm);
    cursor: pointer;
    border: 1px solid var(--border);
}
.cns-photo-btn {
    font-size: 12px;
    padding: 5px 8px;
    border: 1px dashed var(--border-strong);
    background: transparent;
    color: var(--text-muted);
    border-radius: var(--r-sm);
    cursor: pointer;
    white-space: nowrap;
}
.cns-photo-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}
.cns-detail-head {
    margin-bottom: 10px;
}
.cns-detail-no {
    font-weight: 800;
    font-size: 17px;
    color: var(--primary-dark);
}
.cns-detail-party {
    font-size: 13px;
    color: var(--text-light);
    margin-top: 2px;
}
.cns-line-actions {
    white-space: nowrap;
}
.cns-mini-btn {
    font-size: 11.5px;
    padding: 4px 9px;
    border: 1px solid var(--primary);
    background: var(--primary);
    color: #fff;
    border-radius: var(--r-sm);
    cursor: pointer;
    margin-left: 4px;
}
.cns-mini-btn.cns-mini-ret {
    background: transparent;
    color: var(--text-light);
    border-color: var(--border-strong);
}
.cns-mini-btn:hover {
    filter: brightness(1.05);
}
@media (max-width: 640px) {
    .cns-review-head {
        grid-template-columns: 1fr;
    }
}

/* Consignment — reconcile / invoices */
.cns-party-headrow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.cns-summary-btn {
    font-size: 12.5px;
    font-weight: 700;
    padding: 6px 13px;
    border: 1px solid var(--border-strong);
    background: var(--card);
    color: var(--text-light);
    border-radius: var(--r-full);
    cursor: pointer;
    white-space: nowrap;
}
.cns-summary-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}
.cns-invoice-btn {
    font-size: 12px;
    font-weight: 700;
    padding: 5px 11px;
    border: none;
    border-radius: var(--r-full);
    background: var(--warning);
    color: #fff;
    cursor: pointer;
    white-space: nowrap;
}
.cns-invoice-btn:hover {
    filter: brightness(1.05);
}
.cns-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}
.cns-chip {
    font-size: 11.5px;
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: var(--r-full);
    padding: 3px 10px;
    color: var(--text-light);
}
.cns-export {
    width: 100%;
    min-height: 120px;
    margin-top: 10px;
    font-family: ui-monospace, Menlo, monospace;
    font-size: 11px;
    white-space: pre;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: 8px;
    display: none;
}
.cns-pill {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: var(--r-full);
    text-transform: capitalize;
}
.cns-pill-paid {
    background: #e3f5e8;
    color: #1b7a3d;
}
.cns-pill-part {
    background: #fdf3e7;
    color: #8a5a00;
}
.cns-pill-unpaid {
    background: #fbe8e8;
    color: #b02525;
}
.cns-mini-btn.cns-mini-cn {
    background: transparent;
    color: #b02525;
    border-color: #e7b4b4;
}

/* ===== Founder Console (owner-only) ===== */
#screen-founder {
    max-width: 1180px;
    margin: 0 auto;
}
.fc {
    --fc-g1: #dc143c;
    --fc-g2: #ec5a1e;
    --fc-g3: #f59e0b;
    --fc-info: #5b6b8c;
    --fc-notice: #8a5a00;
    --fc-warn: #b26a00;
    --fc-crit: #b02525;
    --fc-ok: #1b7a3d;
    padding: 0 4px 60px;
}
.fc-loading,
.fc-empty {
    padding: 26px;
    text-align: center;
    color: var(--text-muted);
}
.fc-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 2px 4px;
}
.fc-word {
    font-weight: 900;
    font-size: 22px;
    letter-spacing: 0.5px;
    background: linear-gradient(135deg, var(--fc-g1), var(--fc-g2), var(--fc-g3));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.fc-tag {
    font-size: 11px;
    font-weight: 800;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 3px 10px;
}
.fc-hmeta {
    margin-left: auto;
    font-size: 12px;
    color: var(--text-muted);
}
.fc-sec {
    font-size: 12.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    margin: 30px 4px 12px;
}
.fc-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 16px 18px;
}
/* hero */
.fc-hero {
    background: linear-gradient(135deg, var(--fc-g1), var(--fc-g2) 60%, var(--fc-g3));
    color: #fff;
    border-radius: 20px;
    padding: 20px 22px;
    margin-top: 16px;
    box-shadow: 0 12px 34px -18px rgba(220, 20, 60, 0.7);
}
.fc-hero-line {
    font-size: 15px;
    font-weight: 600;
    opacity: 0.96;
}
.fc-tiles {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin-top: 16px;
}
.fc-tile .v {
    font-size: 24px;
    font-weight: 900;
    line-height: 1;
}
.fc-tile .l {
    font-size: 11px;
    opacity: 0.85;
    margin-top: 5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
/* attention */
.fc-att {
    display: grid;
    gap: 10px;
}
.fc-rec {
    display: flex;
    gap: 13px;
    align-items: flex-start;
    background: var(--card);
    border: 1px solid var(--border);
    border-left-width: 4px;
    border-radius: 14px;
    padding: 13px 15px;
    transition:
        transform 0.15s,
        box-shadow 0.15s;
}
.fc-rec:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}
.fc-rec.critical {
    border-left-color: var(--fc-crit);
}
.fc-rec.warning {
    border-left-color: var(--fc-warn);
}
.fc-rec.notice {
    border-left-color: var(--fc-notice);
}
.fc-rec.info {
    border-left-color: var(--fc-info);
}
.fc-rec .fc-ic {
    font-size: 20px;
}
.fc-body {
    flex: 1;
}
.fc-t {
    font-weight: 800;
    font-size: 14.5px;
}
.fc-s {
    color: var(--text-muted);
    font-size: 13px;
    margin-top: 3px;
}
.fc-go {
    align-self: center;
    font-size: 12px;
    font-weight: 800;
    color: var(--fc-g2);
    white-space: nowrap;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 6px 12px;
    background: var(--card);
    cursor: pointer;
}
.fc-sevchip {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 7px;
    border-radius: 999px;
    margin-left: 6px;
}
.sev-critical {
    background: #fbe8e8;
    color: var(--fc-crit);
}
.sev-warning {
    background: #fdf0e0;
    color: var(--fc-warn);
}
.sev-notice {
    background: #fdf3e7;
    color: var(--fc-notice);
}
.sev-info {
    background: #eef1f7;
    color: var(--fc-info);
}
/* feed */
.fc-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 10px;
}
.fc-chip {
    font-size: 12px;
    font-weight: 700;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 5px 12px;
    color: var(--text-muted);
    background: var(--card);
    cursor: pointer;
}
.fc-chip.on {
    background: var(--primary-wash);
    color: var(--fc-g2);
    border-color: var(--primary-wash);
}
.fc-search {
    margin-left: auto;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 7px 14px;
    font-size: 13px;
    min-width: 200px;
    background: var(--card);
    color: var(--text);
}
.fc-ev {
    display: grid;
    grid-template-columns: 96px 24px 1fr auto;
    gap: 11px;
    align-items: center;
    padding: 10px 2px;
    border-top: 1px solid var(--border-light);
}
.fc-ev:first-of-type {
    border-top: 0;
}
.fc-when {
    font-size: 12px;
    color: var(--text-muted);
}
.fc-ic2 {
    font-size: 16px;
}
.fc-sum {
    font-size: 14px;
    font-weight: 600;
}
.fc-oldnew {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}
.fc-oldnew b {
    color: var(--text);
}
.fc-who {
    font-size: 11.5px;
    color: var(--text-muted);
    text-align: right;
}
.fc-meta {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}
.fc-catchip {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 7px;
    border-radius: 6px;
    margin-left: 6px;
}
.cat-security {
    background: #fbe8e8;
    color: var(--fc-crit);
}
.cat-config {
    background: #eef4ff;
    color: #2f5fb0;
}
.cat-business {
    background: #eef7f0;
    color: var(--fc-ok);
}
.cat-data {
    background: #fdf3e7;
    color: var(--fc-notice);
}
.cat-system {
    background: #f0eef4;
    color: #5a4a76;
}
.fc-roll {
    font-size: 10px;
    font-weight: 800;
    color: var(--fc-g2);
    border: 1px dashed var(--fc-g2);
    border-radius: 6px;
    padding: 1px 6px;
    margin-left: 6px;
}
/* grids + kpis */
.fc-grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.fc-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 11px;
}
.fc-kpi {
    background: var(--primary-wash);
    border-radius: 12px;
    padding: 11px 13px;
}
.fc-kpi .v {
    font-size: 19px;
    font-weight: 900;
}
.fc-kpi .l {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 3px;
}
.fc-kpi.warn {
    background: #fdf0e0;
}
.fc-kpi.warn .v {
    color: var(--fc-warn);
}
.fc-ev2 {
    display: grid;
    grid-template-columns: 24px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 8px 2px;
    border-top: 1px solid var(--border-light);
}
.fc-ev2:first-child {
    border-top: 0;
}
.fc-posture {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}
.fc-pill {
    font-size: 12px;
    font-weight: 700;
    border-radius: 999px;
    padding: 5px 11px;
}
.fc-pill.bad {
    background: #fbe8e8;
    color: var(--fc-crit);
}
.fc-pill.warn {
    background: #fdf0e0;
    color: var(--fc-warn);
}
.fc-pill.ok {
    background: #eef7f0;
    color: var(--fc-ok);
}
.fc-na {
    opacity: 0.7;
    font-size: 12px;
    color: var(--text-muted);
    border: 1px dashed var(--border);
    border-radius: 12px;
    padding: 11px 15px;
    margin-top: 12px;
}
.fc-foot {
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
    margin-top: 26px;
}
@media (max-width: 900px) {
    .fc-tiles {
        grid-template-columns: repeat(2, 1fr);
    }
    .fc-grid2 {
        grid-template-columns: 1fr;
    }
    .fc-kpis {
        grid-template-columns: repeat(2, 1fr);
    }
    .fc-ev {
        grid-template-columns: 1fr;
        gap: 3px;
    }
    .fc-who {
        text-align: left;
    }
}

/* Consignment — XML-export guidance (import screen) */
.cns-guide {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 14px 16px;
    margin-bottom: 12px;
}
.cns-guide-title {
    font-size: 14.5px;
    font-weight: 800;
    margin-bottom: 8px;
}
.cns-guide-steps {
    margin: 0 0 10px;
    padding-left: 20px;
    font-size: 13.5px;
    line-height: 1.9;
}
.cns-guide-chip {
    display: inline-block;
    background: var(--primary);
    color: #fff;
    font-weight: 800;
    font-size: 12px;
    padding: 1px 10px;
    border-radius: var(--r-full);
}
.cns-guide-why {
    font-size: 12px;
    color: var(--text-muted);
    border-top: 1px solid var(--border-light);
    padding-top: 8px;
}
.cns-tip-ok {
    background: #e9f6ee;
    color: #1b7a3d;
    border-color: #cbe8d5;
}

/* Consignment — detail Edit (correction) mode */
.cns-detail-headrow {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}
.cns-edit-btn {
    font-size: 12.5px;
    font-weight: 700;
    padding: 6px 14px;
    border: 1px solid var(--border-strong);
    background: var(--card);
    color: var(--text-light);
    border-radius: var(--r-full);
    cursor: pointer;
}
.cns-edit-btn.on {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
.cns-del-btn {
    color: var(--danger);
    border-color: var(--danger);
}
.cns-del-btn:hover {
    background: var(--danger);
    color: #fff;
}
.cns-editbar {
    background: #fdf3e7;
    color: #8a5a00;
    border: 1px solid #f0d9b5;
    border-radius: var(--r-sm);
    padding: 7px 12px;
    font-size: 12.5px;
    margin-bottom: 10px;
}
.cns-mini-btn.cns-mini-undo {
    background: transparent;
    color: #8a5a00;
    border-color: #e4c48c;
}
.cns-noundo {
    color: var(--text-muted);
    font-size: 12px;
}

/* Consignment — partner portal (staff side) */
.cns-portal-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 800;
    padding: 7px 14px;
    border: 1px solid transparent;
    border-radius: var(--r-full);
    background: var(--grad);
    color: #fff;
    cursor: pointer;
    white-space: nowrap;
    transition:
        transform 0.12s,
        box-shadow 0.12s,
        filter 0.12s;
}
.cns-portal-btn svg {
    width: 14px;
    height: 14px;
    color: #fff;
}
.cns-portal-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
    filter: brightness(1.06);
}
.cns-portal-box {
    max-width: 420px;
    width: 92vw;
    padding: 24px 22px 18px;
}
.cns-portal-box h3 {
    font-size: 18px;
    margin: 0 0 4px;
}
.cns-portal-hint {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 6px 0 16px;
}
.cns-portal-pin {
    text-align: center;
    font-size: 15px;
    color: var(--text-muted);
    background: var(--primary-wash);
    border-radius: var(--r-md);
    padding: 10px;
    margin-bottom: 10px;
}
.cns-portal-pin b {
    font-size: 30px;
    letter-spacing: 0.18em;
    color: var(--primary-dark);
    margin-left: 8px;
}
.cns-portal-qr {
    text-align: center;
    margin: 6px 0 10px;
}
.cns-portal-qr img {
    border: 1px solid var(--border-light);
    border-radius: var(--r-md);
}
.cns-portal-btns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 10px;
}
.cns-portal-btns button {
    font-size: 13px;
    padding: 9px 8px;
}
/* partner request inbox */
.cns-reqbox {
    background: #fdf8ee;
    border: 1px solid #f0dfc0;
    border-radius: var(--r-md);
    padding: 10px 14px;
    margin-bottom: 12px;
}
.cns-reqhead {
    font-weight: 800;
    font-size: 13.5px;
    color: #8a5a00;
    margin-bottom: 6px;
}
.cns-reqrow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    border-top: 1px solid #f0dfc0;
    font-size: 13.5px;
}
.cns-reqrow:first-of-type {
    border-top: 0;
}
.cns-reqmeta {
    font-size: 12px;
    color: var(--text-muted);
    margin-left: 8px;
}
.cns-reqbtns {
    display: flex;
    gap: 6px;
    flex: none;
}
/* sales-home partner PIN rows */
.sp-pin-row {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 10px 14px;
    margin-bottom: 8px;
}
.sp-pin-party {
    font-weight: 700;
    font-size: 14px;
    flex: 1;
}
.sp-pin-code {
    font-size: 20px;
    font-weight: 900;
    letter-spacing: 0.15em;
    color: var(--primary-dark);
}
.sp-pin-rotate {
    font-size: 12px;
    font-weight: 700;
    padding: 6px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-full);
    background: var(--card);
    color: var(--text-light);
    cursor: pointer;
}

/* Consignment — partner stock-take review */
.cns-st-diff {
    font-size: 12.5px;
    color: #8a5a00;
    background: #fdf3e7;
    border-radius: var(--r-sm);
    padding: 6px 10px;
    margin-top: 6px;
}
.cns-st-ok {
    font-size: 12.5px;
    color: var(--success, #1b7a3d);
    background: #e9f6ee;
    border-radius: var(--r-sm);
    padding: 6px 10px;
    margin-top: 6px;
}

/* ===== Order Import (Excel/CSV) preview modal ===== */
.oi-modal-content {
    max-width: 680px;
    display: flex;
    flex-direction: column;
}
.oi-hint {
    padding: 10px 20px;
    font-size: 12.5px;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-light);
}
.oi-hint strong {
    color: var(--text, #1f2937);
    font-weight: 600;
}
.oi-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 12px 20px 4px;
}
.oi-pill {
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
}
.oi-pill-ok {
    color: #1b7a3d;
    background: #e9f6ee;
}
.oi-pill-new {
    color: #7c3aed;
    background: #f3e8ff;
}
.oi-pill-err {
    color: #b42318;
    background: #fee4e2;
}
.oi-summary-total {
    margin-left: auto;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-muted);
}
.oi-body {
    overflow: auto;
    padding: 8px 20px;
    flex: 1;
    max-height: 52vh;
}
.oi-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.oi-table th {
    text-align: left;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-muted);
    font-weight: 600;
    padding: 6px 8px;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    background: var(--bg);
}
.oi-table td {
    padding: 7px 8px;
    border-bottom: 1px solid var(--border-light);
    vertical-align: middle;
}
.oi-table .oi-num {
    text-align: right;
    white-space: nowrap;
}
.oi-bc {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.oi-row-new td {
    background: rgba(124, 58, 237, 0.04);
}
.oi-row-err td {
    background: #fef3f2;
    color: var(--text-muted);
}
.oi-desc {
    width: 150px;
    max-width: 40vw;
    font-size: 12.5px;
    padding: 3px 7px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
}
.oi-tag {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 4px;
    white-space: nowrap;
}
.oi-tag-new {
    color: #7c3aed;
    background: #f3e8ff;
}
.oi-tag-warn {
    color: #8a5a00;
    background: #fdf3e7;
}
.oi-tag-err {
    color: #b42318;
    background: #fee4e2;
}
.oi-x {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    padding: 4px;
    border-radius: 4px;
}
.oi-x:hover {
    color: #b42318;
    background: #fee4e2;
}
.oi-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding: 14px 20px;
    border-top: 1px solid var(--border-light);
}
.oi-actions .btn {
    min-width: 96px;
}
.oi-actions .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ===== Bulk product import (column mapping + preview) ===== */
.bi-hint {
    font-size: 12.5px;
    color: var(--text-muted);
    padding: 12px 20px 4px;
    line-height: 1.5;
}
.bi-imgnote {
    font-size: 12px;
    color: #1b7a3d;
    background: #e9f6ee;
    margin: 6px 20px 0;
    padding: 6px 10px;
    border-radius: var(--r-sm);
}
.bi-map-grid {
    padding: 10px 20px 4px;
}
.bi-map-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}
.bi-map-label {
    flex: 0 0 42%;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    flex-direction: column;
}
.bi-map-hint {
    font-size: 10.5px;
    font-weight: 400;
    color: var(--text-muted);
    margin-top: 1px;
}
.bi-req {
    color: #b42318;
}
.bi-map-select {
    flex: 1;
    min-width: 0;
    font-size: 13px;
}
.bi-table th,
.bi-table td {
    vertical-align: middle;
}
.bi-thumb {
    width: 34px;
    height: 34px;
    border-radius: var(--r-sm);
    object-fit: cover;
    display: inline-block;
    background: var(--border-light);
}
.bi-thumb-empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 12px;
}
.bi-result {
    padding: 28px 20px;
    text-align: center;
}
.bi-result-big {
    font-size: 18px;
    font-weight: 700;
    color: #1b7a3d;
    margin-bottom: 6px;
}
.bi-result-sub {
    font-size: 13px;
    color: var(--text-muted);
}
.bi-result-fail {
    margin-top: 14px;
    font-size: 12px;
    color: #b42318;
    background: #fef3f2;
    padding: 8px 12px;
    border-radius: var(--r-sm);
    text-align: left;
}
@media (max-width: 560px) {
    .bi-map-label {
        flex-basis: 38%;
    }
}

/* ===== Action cards (Current Stock, Consignments, New hub, …) ===== */
.inv-action-cards,
.action-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 12px;
}
@media (min-width: 720px) {
    .inv-action-cards,
    .action-cards {
        grid-template-columns: repeat(4, 1fr);
    }
}
.action-cards--3 {
    grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 720px) {
    .action-cards--3 {
        grid-template-columns: repeat(3, 1fr);
    }
}
.inv-act-card,
.action-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    padding: 13px 14px;
    border: 1px solid var(--border, #e5e5e5);
    border-radius: 14px;
    background: var(--surface, #fff);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition:
        transform 0.12s ease,
        box-shadow 0.12s ease,
        border-color 0.12s ease;
}
.inv-act-card svg,
.action-card svg {
    width: 22px;
    height: 22px;
    color: var(--primary);
    margin-bottom: 6px;
}
.inv-act-card:hover:not(:disabled),
.action-card:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
    border-color: var(--primary-light);
}
.inv-act-card:active:not(:disabled),
.action-card:active:not(:disabled) {
    transform: translateY(0);
}
.inv-act-card .iac-title,
.action-card .iac-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
}
.inv-act-card .iac-sub,
.action-card .iac-sub {
    font-size: 11px;
    color: var(--text-muted);
}
.inv-act-card--primary,
.action-card--primary {
    background: var(--grad);
    border-color: transparent;
}
.inv-act-card--primary svg,
.inv-act-card--primary .iac-title,
.action-card--primary svg,
.action-card--primary .iac-title {
    color: #fff;
}
.inv-act-card--primary .iac-sub,
.action-card--primary .iac-sub {
    color: #fff;
    opacity: 0.85;
}
.inv-act-card--primary:hover:not(:disabled),
.action-card--primary:hover:not(:disabled) {
    filter: brightness(1.06);
    box-shadow: var(--shadow);
}

/* ===== Admin control hub + admin screens ===== */
.admin-hub-intro {
    color: var(--text-muted);
    font-size: 13px;
    margin: 0 0 14px;
    max-width: 640px;
}
.admin-hub-cards {
    max-width: 720px;
}
.admin-screen-body {
    max-width: 640px;
}
.users-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}
.add-user-guide .card-title {
    font-weight: 700;
    font-size: 14px;
    color: var(--text);
}
.add-user-guide-box {
    background: var(--bg-subtle, #f6f6f8);
    border: 1px solid var(--border, #e4e4e8);
    border-radius: 10px;
    padding: 14px 16px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-muted, #555);
}
.add-user-guide-box ol {
    margin: 8px 0 10px 18px;
    padding: 0;
}
.add-user-guide-box a {
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
}

/* Settings rows (label + right-aligned control) */
.settings-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.setting-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 16px;
    border: 1px solid var(--border, #e5e5e5);
    border-radius: 14px;
    background: var(--surface, #fff);
}
.setting-text {
    min-width: 0;
}
.setting-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
}
.setting-sub {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.5;
    margin-top: 2px;
}
/* Inventory Control — greyed "coming soon" placeholder rows (parked features) */
.setting-row--soon {
    opacity: 0.55;
}
.setting-row--soon .ky-switch {
    cursor: not-allowed;
    pointer-events: none;
}
.soon-pill {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--text-muted);
    background: var(--primary-wash);
    border-radius: 999px;
    padding: 2px 8px;
    margin-left: 6px;
    vertical-align: middle;
}
/* Live on/off state pill next to a setting title */
.setting-state {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--text-muted);
    background: var(--border-light);
    border-radius: 999px;
    padding: 2px 8px;
    margin-left: 6px;
    vertical-align: middle;
}
.setting-state--on {
    color: #fff;
    background: var(--primary);
}

/* Toggle switch (self-contained) */
.ky-switch {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    cursor: pointer;
}
.ky-switch input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}
.ky-switch-track {
    width: 44px;
    height: 26px;
    border-radius: 999px;
    background: var(--border, #d4d4d8);
    transition: background 0.18s ease;
    display: inline-flex;
    align-items: center;
    padding: 3px;
}
.ky-switch-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: transform 0.18s ease;
}
.ky-switch input:checked + .ky-switch-track {
    background: var(--grad, var(--primary));
}
.ky-switch input:checked + .ky-switch-track .ky-switch-thumb {
    transform: translateX(18px);
}
.ky-switch input:disabled + .ky-switch-track {
    opacity: 0.55;
}
.ky-switch input:focus-visible + .ky-switch-track {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
.inv-act-card--off,
.action-card--off {
    opacity: 0.5;
    cursor: not-allowed;
}
.inv-act-card--off:hover,
.action-card--off:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--border, #e5e5e5);
}
.ticket-filter-btn .chip-n {
    font-weight: 700;
    opacity: 0.65;
    margin-left: 3px;
}
.nh-more-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin: 20px 2px 8px;
}

/* ===== Top-ordered ranked list ===== */
.top-ord-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 4px;
    border-bottom: 0.5px solid var(--border, #eee);
    cursor: pointer;
}
.top-ord-row:hover {
    background: var(--border-light, #fafafa);
}
.top-ord-rank {
    flex: 0 0 22px;
    text-align: center;
    font-weight: 800;
    color: var(--text-muted);
    font-size: 12px;
}
.top-ord-img {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    object-fit: cover;
    background: var(--border-light, #f0f0f0);
    flex: 0 0 auto;
}
.top-ord-img--none {
    background: var(--border-light, #f0f0f0);
}
.top-ord-info {
    flex: 1;
    min-width: 0;
}
.top-ord-bc {
    font-weight: 600;
    color: var(--primary);
    font-size: 12px;
}
.top-ord-desc {
    font-size: 12px;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.top-ord-meta {
    font-size: 10px;
    color: var(--text-muted);
}
.top-ord-qty {
    flex: 0 0 84px;
    text-align: right;
}
.top-ord-n {
    font-weight: 800;
    font-size: 15px;
    color: var(--text);
}
.top-ord-bar {
    height: 4px;
    border-radius: 2px;
    background: var(--grad);
    margin-left: auto;
    margin-top: 3px;
}

/* ===== BUSY export modal ===== */
.be-loading,
.be-empty {
    font-size: 13px;
    color: var(--text-muted);
    padding: 10px 2px;
}
.be-empty {
    color: #1b7a3d;
    font-weight: 600;
}
.be-big {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
}
.be-sub {
    font-size: 12.5px;
    color: var(--text-muted);
    margin: 4px 0 12px;
}
.be-mix {
    color: #8a5a00;
    font-weight: 600;
}
.be-dl {
    width: 100%;
}
.be-note {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 8px;
    line-height: 1.45;
}
.be-hr {
    border: none;
    border-top: 1px solid var(--border-light);
    margin: 16px 0;
}
.be-range-title {
    font-size: 13px;
    font-weight: 700;
}
.be-range-sub {
    font-size: 11.5px;
    color: var(--text-muted);
    margin: 2px 0 10px;
    line-height: 1.45;
}
.be-range-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.be-range-row .form-input {
    flex: 1;
    min-width: 0;
}
.be-range-arrow {
    color: var(--text-muted);
}

/* ===== Payments — multi-line record + inline edit/delete ===== */
.pay-line {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.pay-line .pay-line-amt {
    flex: 1 1 110px;
    min-width: 90px;
}
.pay-line .pay-line-method {
    flex: 1 1 120px;
    min-width: 100px;
}
.pay-line .pay-line-custom {
    flex: 1 1 100%;
}
.pay-line-remove {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 15px;
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    line-height: 1;
    flex: 0 0 auto;
}
.pay-line-remove:hover {
    color: #b42318;
    background: #fee4e2;
}
.pay-add-line {
    font-size: 13px;
    padding: 8px 12px;
}
.pay-total-preview {
    font-size: 13px;
    font-weight: 600;
    color: var(--primary);
    min-height: 18px;
    margin-bottom: 10px;
}

.pay-row .pay-right {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.pay-actions {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: 4px;
}
.pay-edit,
.pay-del {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    padding: 4px 6px;
    border-radius: 6px;
    color: var(--text-muted);
}
.pay-edit:hover {
    color: var(--primary);
    background: var(--primary-wash);
}
.pay-del:hover {
    color: #b42318;
    background: #fee4e2;
}

/* ===== Leads — live card scanner + sparkle read (lead-capture.js) ===== */
#leadScanner {
    position: fixed;
    inset: 0;
    z-index: 500;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
#leadScanVideo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Sales-rep home: two big primary cards (Start New Order · Scan Lead) over three
   full-width rows (Customers · Add Ticket · Give Feedback) */
.sales-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 2px 0 10px;
}
.sales-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    text-align: left;
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: 20px;
    padding: 18px 16px;
    min-height: 160px;
    cursor: pointer;
    font-family: inherit;
}
.sales-card:active {
    transform: scale(0.99);
}
.sales-card-ic {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--primary-wash);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
}
.sales-card-ic svg {
    width: 26px;
    height: 26px;
}
.sales-card-label {
    font-size: 19px;
    font-weight: 800;
    line-height: 1.15;
    margin-top: auto;
}
.sales-card-sub {
    font-size: 12.5px;
    color: var(--text-muted);
}
/* Start New Order — filled FLOW gradient block */
.sales-card--fill {
    background: var(--grad);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 10px 26px -12px rgba(220, 20, 60, 0.55);
}
.sales-card--fill .sales-card-ic {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}
.sales-card--fill .sales-card-sub {
    color: rgba(255, 255, 255, 0.85);
}
/* Scan Lead — surface card, label painted in the FLOW gradient */
.sales-card--ink .sales-card-label {
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.sales-rows {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 2px 0 8px;
}
.sales-row {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    text-align: left;
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: 16px;
    padding: 15px 16px;
    min-height: 66px;
    cursor: pointer;
    font-family: inherit;
}
.sales-row:active {
    transform: scale(0.99);
}
.sales-row-ic {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--primary-wash);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
}
.sales-row-ic svg {
    width: 22px;
    height: 22px;
}
.sales-row-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sales-row-label {
    font-size: 16px;
    font-weight: 700;
}
.sales-row-sub {
    font-size: 12.5px;
    color: var(--text-muted);
}
.sales-row-chev {
    flex: 0 0 auto;
    font-size: 22px;
    color: var(--text-muted);
    line-height: 1;
}

/* Master-piece badge on an order item (last-piece kept, or master-only product) */
.oi-master-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    color: #8a6d00;
    background: #fff4d6;
    border: 1px solid #f0d98a;
    padding: 1px 7px;
    border-radius: 5px;
    margin-top: 3px;
}
/* Master-piece toggle row in the product editor */
.ep-master-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    margin-bottom: 12px;
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    cursor: pointer;
}
.ep-master-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ep-master-title {
    font-size: 13.5px;
    font-weight: 700;
}
.ep-master-sub {
    font-size: 11.5px;
    color: var(--text-muted);
}

/* Sales-rep Leads screen: one big scan card + a small manual fallback link */
.lead-scan-hero {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    background: var(--grad);
    color: #fff;
    border: none;
    border-radius: 18px;
    padding: 22px 20px;
    cursor: pointer;
    box-shadow: 0 10px 24px -10px rgba(220, 20, 60, 0.5);
    text-align: left;
}
.lead-scan-hero:active {
    transform: scale(0.985);
}
.lead-scan-hero-ic {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
}
.lead-scan-hero-ic svg {
    width: 26px;
    height: 26px;
}
.lead-scan-hero-txt {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.lead-scan-hero-title {
    font-size: 19px;
    font-weight: 700;
}
.lead-scan-hero-sub {
    font-size: 13px;
    opacity: 0.9;
    line-height: 1.3;
}
.lead-scan-manual {
    display: block;
    width: 100%;
    margin-top: 14px;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 500;
    padding: 10px;
    cursor: pointer;
    font-family: inherit;
}
.lead-scan-manual:active {
    color: var(--text);
}

/* ===== Trade Show Mode ===== */
.trade-show-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 7px 14px;
    background: var(--grad);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.1px;
    z-index: 90;
}
.trade-show-banner b {
    font-weight: 800;
}
.tsb-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
    animation: tsPulse 1.6s ease-out infinite;
    flex: 0 0 auto;
}
@keyframes tsPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6);
    }
    70% {
        box-shadow: 0 0 0 7px rgba(255, 255, 255, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
}
.ts-admin-card {
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 16px;
}
.ts-admin-title {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 10px;
}
.ts-off-copy {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0 0 14px;
}
.ts-live {
}
.ts-live-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
}
.ts-live-head .tsb-dot {
    background: var(--primary);
    box-shadow: 0 0 0 0 rgba(220, 20, 60, 0.6);
}
.ts-live-sub {
    font-size: 12px;
    color: var(--text-muted);
    margin: 4px 0 12px;
}
.ts-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.ts-stat {
    background: #fff;
    border: 1px solid var(--border-light);
    border-radius: 10px;
    padding: 10px 6px;
    text-align: center;
}
.ts-stat-val {
    font-size: 19px;
    font-weight: 700;
}
.ts-stat-lbl {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}
.ts-live-val {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 10px;
    line-height: 1.5;
}
.ts-ws {
    opacity: 0.7;
}

.lead-scan-guide {
    position: relative;
    width: 88%;
    max-width: 560px;
    aspect-ratio: 1.4;
    border: 3px solid rgba(255, 255, 255, 0.9);
    border-radius: 14px;
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.45);
}
.lead-scan-status {
    position: absolute;
    top: calc(env(safe-area-inset-top) + 18px);
    left: 0;
    right: 0;
    text-align: center;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
    padding: 0 16px;
}
.lead-scan-controls {
    position: absolute;
    bottom: calc(env(safe-area-inset-bottom) + 22px);
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px;
}
.lead-scan-btn {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 11px 18px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.lead-scan-btn:active {
    transform: scale(0.96);
}
.lead-scan-shutter {
    width: 66px;
    height: 66px;
    border-radius: 50%;
    background: #fff;
    border: 4px solid rgba(255, 255, 255, 0.55);
    padding: 0;
}
.lead-scan-shutter:disabled {
    opacity: 0.5;
}
/* Sparkles while FLOW AI reads — prominent, over a dim backdrop so they pop */
.lead-scan-spark {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.5));
}
.lead-scan-spark span {
    position: absolute;
    color: #fff;
    font-size: 44px;
    opacity: 0;
    text-shadow:
        0 0 12px #fff,
        0 0 26px var(--primary, #dc143c),
        0 0 40px #f59e0b;
    animation: leadSparkle 1.05s ease-in-out infinite;
}
.lead-scan-spark span:nth-child(1) {
    top: 26%;
    left: 18%;
    animation-delay: 0s;
    font-size: 52px;
}
.lead-scan-spark span:nth-child(2) {
    top: 38%;
    left: 72%;
    animation-delay: 0.12s;
}
.lead-scan-spark span:nth-child(3) {
    top: 60%;
    left: 30%;
    animation-delay: 0.24s;
    font-size: 38px;
}
.lead-scan-spark span:nth-child(4) {
    top: 24%;
    left: 54%;
    animation-delay: 0.36s;
}
.lead-scan-spark span:nth-child(5) {
    top: 56%;
    left: 64%;
    animation-delay: 0.48s;
    font-size: 56px;
}
.lead-scan-spark span:nth-child(6) {
    top: 44%;
    left: 40%;
    animation-delay: 0.6s;
}
.lead-scan-spark span:nth-child(7) {
    top: 70%;
    left: 50%;
    animation-delay: 0.72s;
    font-size: 34px;
}
.lead-scan-spark span:nth-child(8) {
    top: 32%;
    left: 34%;
    animation-delay: 0.84s;
}
.lead-scan-spark span:nth-child(9) {
    top: 66%;
    left: 78%;
    animation-delay: 0.96s;
    font-size: 40px;
}
@keyframes leadSparkle {
    0%,
    100% {
        opacity: 0;
        transform: scale(0.3) rotate(0deg);
    }
    45% {
        opacity: 1;
        transform: scale(1.25) rotate(45deg);
    }
}
.lead-scan-status {
    z-index: 2;
}

/* ===== Org home: banner + chosen tiles + full-width desktop (5.227.0, owner day-2) ===== */
.home-banner {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 16px;
    box-shadow: var(--shadow, 0 2px 10px rgba(0, 0, 0, 0.08));
}
.home-banner img {
    display: block;
    width: 100%;
    height: clamp(160px, 32vh, 340px);
    object-fit: cover;
}
.home-banner-edit {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    border: none;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 700;
    background: rgba(17, 24, 39, 0.72);
    color: #fff;
    cursor: pointer;
}
.home-banner--empty {
    border: 1.5px dashed var(--border, #d8d2c6);
    background: var(--bg-soft, #faf8f3);
    color: var(--text-muted);
    text-align: center;
    padding: 20px;
    cursor: pointer;
    font-weight: 600;
    border-radius: 16px;
}
.home-banner--empty span {
    display: block;
    font-size: 11px;
    font-weight: 400;
    margin-top: 3px;
}
.home-more-toggle {
    width: 100%;
    border: none;
    background: none;
    color: var(--text-muted);
    font-size: 12.5px;
    font-weight: 700;
    padding: 10px 0 4px;
    cursor: pointer;
}

/* Desktop home gets a real body again — banner + org-chosen tiles (the rail
   still carries full navigation; only the DASHBOARD grid un-hides). */
@media (min-width: 768px) {
    #screen-dashboard .ds-actions {
        display: block;
        height: auto;
        overflow: visible;
        padding: 0;
        margin-bottom: 16px;
    }
    #screen-dashboard .home-tiles {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
        gap: 10px;
    }
    #screen-dashboard .home-hero {
        max-width: 460px;
        margin-bottom: 12px;
    }
    /* The rail's collapsed-label rule (.ds-action-label max-height:0/opacity:0)
       was swallowing tile labels on the desktop home — un-collapse them here. */
    #screen-dashboard .home-tile .ds-action-label,
    #screen-dashboard .home-hero .ds-action-label {
        max-height: none;
        opacity: 1;
        margin-top: 2px;
        font-size: 13px;
        font-weight: 600;
        overflow: visible;
    }
    .home-banner img {
        height: clamp(280px, 68vh, 640px);
    } /* the "3/4-page" brand canvas */
}

/* Full width on desktop for the working screens (owner: "use the entire
   screen space"). Content-heavy screens drop the 1200px cap; forms/summary
   keep theirs. The order screen's item lists stay ONE per row (owner,
   2026-08-22: "want 1 below the other" — the two-up grid is out). */
@media (min-width: 1024px) {
    #screen-dashboard,
    #screen-orders,
    #screen-payments,
    #screen-order,
    #screen-customers,
    #screen-procurement,
    #screen-inventory,
    #screen-consignment,
    #screen-purchase-orders,
    #screen-messages,
    #screen-receipts,
    #screen-cash,
    #screen-sales-report,
    #screen-suppliers {
        max-width: none;
        padding-left: 36px;
        padding-right: 36px;
    }
}

/* ===== Field-agent stripped UI (role-field body class) =====================
   A field agent's phone shows only: scan + a searchable list of their own leads
   they can tap to call. No leads screen-title/back, no global search, no help or
   feedback. Applied in applyRoleRestrictions(). */
body.role-field #screen-lead-capture .screen-title,
body.role-field #btnSearch,
body.role-field #btnFeedback,
body.role-field #btnHelp {
    display: none !important;
}

/* ===== Needs Attention strip (Home, admin/manager) — rule-based highlights ===== */
.attn-wrap {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 12px;
    margin: 12px 0;
    overflow: hidden;
}
.attn-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 10px 14px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
}
.attn-title {
    font-size: 13.5px;
    font-weight: 700;
    color: #92400e;
}
.attn-total {
    display: inline-block;
    min-width: 20px;
    padding: 1px 7px;
    border-radius: 999px;
    background: #f59e0b;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    margin-left: 4px;
}
.attn-chev {
    color: #b45309;
    font-size: 12px;
}
.attn-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 10px;
    padding: 0 12px 12px;
}
.attn-card {
    background: #fff;
    border: 1px solid #fde68a;
    border-radius: 10px;
    padding: 8px 10px;
}
.attn-card-head {
    font-size: 12px;
    font-weight: 700;
    color: #92400e;
    margin-bottom: 6px;
}
.attn-count {
    color: #b45309;
    font-weight: 800;
}
/* Clickable card head + "see all" — drill into the pre-filtered Orders list. */
.attn-card-link {
    display: flex;
    align-items: baseline;
    gap: 4px;
    width: 100%;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
}
.attn-card-link:hover {
    text-decoration: underline;
}
.attn-open {
    margin-left: auto;
    font-weight: 800;
    color: #b45309;
}
.attn-more-link {
    display: block;
    width: 100%;
    border: none;
    background: none;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    color: #b45309;
    font-weight: 600;
    border-radius: 6px;
}
.attn-more-link:hover {
    background: #fff7e0;
}
.attn-row {
    display: flex;
    gap: 8px;
    align-items: baseline;
    width: 100%;
    padding: 5px 6px;
    border: none;
    background: none;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    font-size: 12.5px;
}
.attn-row:hover {
    background: #fff7e0;
}
.attn-ord {
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
}
.attn-cust {
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}
.attn-why {
    color: #b45309;
    font-size: 11.5px;
    white-space: nowrap;
}
.attn-more {
    font-size: 11.5px;
    color: var(--text-muted);
    padding: 3px 6px;
}
@media (max-width: 640px) {
    .attn-cards {
        grid-template-columns: 1fr;
    }
    .attn-why {
        white-space: normal;
    }
}

/* ===== Top-bar Messages button + unread badge ===== */
#btnMessages {
    position: relative;
}
.msg-badge {
    position: absolute;
    top: -2px;
    right: -3px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: #dc143c;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    line-height: 16px;
    text-align: center;
    display: none;
}
.msg-badge.on {
    display: block;
    animation: msgBadgePop 0.3s ease;
}
@keyframes msgBadgePop {
    0% {
        transform: scale(0.4);
    }
    70% {
        transform: scale(1.25);
    }
    100% {
        transform: scale(1);
    }
}

/* ===== Data-gaps view (Catalogue — A2 pass-1) ===== */
.gap-summary {
    font-size: 12.5px;
    color: #92400e;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 10px;
    padding: 9px 12px;
    margin-bottom: 12px;
    line-height: 1.5;
}
.proc-gap-chips {
    margin-top: 4px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.gap-chip {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 700;
    color: #92400e;
    background: #fef3c7;
    border: 1px solid #fde68a;
    border-radius: 999px;
    padding: 1px 8px;
    white-space: nowrap;
}

/* Gap-type toggles in the data-gaps summary (tap to ignore / re-enable) */
.gap-tgl {
    display: inline-block;
    margin: 2px 3px;
    padding: 2px 10px;
    border-radius: 999px;
    border: 1px solid #fde68a;
    background: #fef3c7;
    color: #92400e;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
}
.gap-tgl.off {
    background: #f3f4f6;
    border-color: #e5e7eb;
    color: #9ca3af;
    text-decoration: line-through;
}
.gap-tgl:active {
    transform: scale(0.96);
}
.gap-hint {
    display: block;
    margin-top: 4px;
    font-weight: 400;
}

/* ===== Find by photo (visual duplicate-check, ADR-045) ===== */
.vs-hint {
    font-size: 12.5px;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 6px 0;
}
.vs-linkbtn {
    border: none;
    background: none;
    color: var(--primary);
    font-weight: 700;
    cursor: pointer;
    font-size: 12.5px;
    padding: 0 2px;
    text-decoration: underline;
    font-family: inherit;
}
.vs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 10px;
}
.vs-hit {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    padding: 6px;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
}
.vs-hit img,
.vs-noimg {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 6px;
    background: #f6f6f6;
}
.vs-noimg {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 11px;
}
.vs-bc {
    font-size: 11px;
    font-weight: 700;
    font-family: monospace;
}
.vs-nm {
    font-size: 11px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.vs-sim {
    font-size: 10.5px;
    font-weight: 700;
    color: #6b3fc2;
}
@media (max-width: 480px) {
    .vs-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Inline visual duplicate-check strip under an inward row (ADR-045) */
.inw-similar {
    margin: 4px 0 10px;
}
.vs-inline-status {
    font-size: 11.5px;
    color: var(--text-muted);
}
.vs-inline-ok {
    font-size: 11.5px;
    color: #2e7d32;
    font-weight: 600;
}
.vs-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    padding: 6px 10px;
}
.vs-inline-warn {
    font-size: 11.5px;
    font-weight: 700;
    color: #92400e;
}
.vs-inline-hit {
    display: flex;
    align-items: center;
    gap: 5px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    padding: 3px 8px 3px 3px;
    cursor: pointer;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
}
.vs-inline-hit img {
    width: 34px;
    height: 34px;
    object-fit: cover;
    border-radius: 5px;
}
.vs-inline-note {
    font-size: 10.5px;
    color: var(--text-muted);
}

/* ===== Mobile nav drawer + hamburger (roadmap: mobile reimagine) ===== */
/* Mobile-first: hamburger shows on phones; the desktop rail (≥768px) replaces it. */
.mobile-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-right: 4px;
    border: none;
    background: none;
    color: var(--text);
    cursor: pointer;
    flex: 0 0 auto;
    border-radius: 8px;
}
.mobile-menu-btn:active {
    background: rgba(0, 0, 0, 0.06);
}
.mobile-drawer-scrim {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
    z-index: 200;
}
.mobile-drawer-scrim.open {
    opacity: 1;
    pointer-events: auto;
}
.mobile-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 82%;
    max-width: 320px;
    background: #fff;
    box-shadow: 2px 0 24px rgba(0, 0, 0, 0.18);
    transform: translateX(-100%);
    transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 201;
    display: flex;
    flex-direction: column;
    padding-top: env(safe-area-inset-top);
    overflow-y: auto;
}
.mobile-drawer.open {
    transform: translateX(0);
}
.mdrawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}
.mdrawer-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
}
.mdrawer-close {
    border: none;
    background: none;
    font-size: 26px;
    line-height: 1;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0 4px;
}
.mdrawer-items {
    display: flex;
    flex-direction: column;
    padding: 8px;
    gap: 2px;
}
.mdrawer-item {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 13px 14px;
    border: none;
    background: none;
    border-radius: 10px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    color: var(--text);
    text-align: left;
    cursor: pointer;
}
.mdrawer-item svg {
    width: 21px;
    height: 21px;
    flex: 0 0 auto;
    color: var(--text-muted);
}
.mdrawer-item:active {
    background: rgba(0, 0, 0, 0.05);
}
.mdrawer-item.active {
    background: linear-gradient(135deg, #dc143c, #f59e0b);
    color: #fff;
}
.mdrawer-item.active svg {
    color: #fff;
}
body.mdrawer-lock {
    overflow: hidden;
}

/* Collapsed-strip chips (the phone default for Needs attention). */
.attn-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 12px 12px;
}
.attn-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 11px;
    border: 1px solid #fde68a;
    background: #fffdf5;
    border-radius: 999px;
    font-family: inherit;
    font-size: 14px;
    color: #92400e;
    cursor: pointer;
}
.attn-chip b {
    font-weight: 800;
    color: #b45309;
}
.attn-chip:active {
    background: #fff7e0;
}

/* The desktop nav rail owns navigation ≥768px — hide the mobile affordances. */
@media (min-width: 768px) {
    .mobile-menu-btn,
    .mobile-drawer,
    .mobile-drawer-scrim {
        display: none !important;
    }
}

/* ===== Nav grouping — rail + drawer section headers ===== */
/* Rail: a divider between groups; the label shows only when the rail is expanded
   (hover/pinned), mirroring how .ds-action-label behaves. */
.rail-group {
    margin: 6px 4px 2px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    padding-top: 6px;
}
.rail-group-label {
    display: none;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 0 8px;
    white-space: nowrap;
}
@media (min-width: 768px) {
    body.app-on #navRail:hover:not(.rail-snap) .rail-group-label,
    body.app-on #navRail.rail-pinned .rail-group-label {
        display: block;
    }
}
/* Mobile drawer group headers (always shown — the drawer is full width). */
.mdrawer-group {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 14px 14px 4px;
}

/* ===== Two-row mobile header (owner, 2026-09-10) ===== */
/* Branding + account stay on row 1; the menu button, a real search field and the
   action icons drop to a roomy second bar — no more squashed icon cluster. The
   header is position:sticky, so growing to two rows just pushes content down. */
.header-break {
    display: none;
}
@media (max-width: 600px) {
    .app-header {
        height: auto;
        min-height: calc(56px + env(safe-area-inset-top));
        flex-wrap: wrap;
        row-gap: 8px;
        padding-bottom: 8px;
        align-items: center;
    }
    /* The account cluster is wrapped in .header-right; display:contents promotes its
       children (connection, profile, the action icons) into the header's own flex
       row so they can be ordered across the two rows. Without this, ordering those
       children does nothing and the wrapper collapsed — the icons + profile vanished. */
    .header-right {
        display: contents;
    }
    /* Row 1: brand (grows) pushes connection + profile to the right. */
    .header-brand {
        order: 1;
        flex: 1 1 auto;
        min-width: 0;
    }
    .conn-wrap {
        order: 2;
    }
    .tenant-slot {
        order: 3;
    }
    .profile-circle {
        order: 4;
    }
    /* Force the wrap: everything after here drops to a second bar. */
    .header-break {
        display: block;
        order: 5;
        flex-basis: 100%;
        height: 0;
        margin: 0;
    }
    /* Row 2: menu button + a real search field (grows) + the action icons. */
    .mobile-menu-btn {
        order: 6;
        flex: 0 0 auto;
    }
    .header-search {
        order: 7;
        /* basis 0 so the field only takes leftover width and never pushes the
           action icons onto a third row; min-width keeps it usable. */
        flex: 1 1 0;
        min-width: 64px;
        width: auto;
        height: 38px;
        padding: 0 12px;
        justify-content: flex-start;
        gap: 8px;
        background: var(--surface, #f4f4f5);
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: 10px;
        color: var(--text-muted);
    }
    .header-search .header-search-text {
        display: inline;
        font-size: 14px;
    }
    .header-actions {
        order: 8;
        flex: 0 0 auto;
        gap: 2px;
    }
    /* Compact the row-2 icons so menu + search + all of them share one bar. */
    .header-actions .btn-icon {
        width: 36px;
        height: 36px;
    }
    /* The full-screen toggle stays desktop-only even in the roomy bar. */
    #btnFullscreen {
        display: none;
    }
}

/* ===== Leads — WhatsApp broadcast + multi-select (LeadBroadcast) ===== */
.ai-badge {
    display: inline-block;
    vertical-align: middle;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.2px;
    line-height: 1.4;
    color: #7a3e00;
    background: linear-gradient(90deg, #fff1c2, #ffd98a 50%, #fff1c2);
    background-size: 200% 100%;
    animation: ai-badge-shimmer 3.2s linear infinite;
    white-space: nowrap;
}
.home-tile[style*='--grad'] .ai-badge,
.ai-badge--onbrand {
    color: #fff;
    background: rgba(255, 255, 255, 0.22);
    animation: none;
}
@keyframes ai-badge-shimmer {
    to {
        background-position: -200% 0;
    }
}
@media (prefers-reduced-motion: reduce) {
    .ai-badge {
        animation: none;
    }
}
.lead-tools {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 2px 0 10px;
}
.lead-tool {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid var(--border, #e6e1d6);
    background: var(--surface, #fff);
    color: var(--text, #222);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.lead-tool.on {
    background: var(--text, #222);
    color: #fff;
    border-color: transparent;
}
.lead-tool-wa {
    background: var(--whatsapp, #25d366);
    color: #fff;
    border-color: transparent;
}
.lead-tool-demo {
    margin-left: auto;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--text-light);
    border: 1px dashed var(--border, #e6e1d6);
    border-radius: 6px;
    padding: 2px 6px;
}
.lead-row--sel {
    border-color: var(--whatsapp, #25d366) !important;
    background: rgba(37, 211, 102, 0.08);
}
.lead-chk {
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    border: 2px solid var(--border, #cfc8ba);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface, #fff);
}
.lead-chk.on {
    background: var(--whatsapp, #25d366);
    border-color: var(--whatsapp, #25d366);
}
.lead-wa-btn {
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: none;
    background: var(--whatsapp, #25d366);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.lead-selbar {
    position: fixed;
    left: 50%;
    bottom: calc(14px + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    z-index: 390;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px 8px 14px;
    border-radius: 999px;
    background: #1c1c1e;
    color: #fff;
    box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.45);
    max-width: calc(100vw - 24px);
    white-space: nowrap;
}
.lead-selbar-n {
    font-weight: 700;
    font-size: 13px;
}
.lead-selbar-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: transparent;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.lead-selbar-btn.wa {
    background: var(--whatsapp, #25d366);
    border-color: transparent;
}
.lead-selbar-btn[disabled] {
    opacity: 0.45;
    cursor: default;
}
.lead-selbar-x {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}
/* composer sheet */
.lb-scrim {
    position: fixed;
    inset: 0;
    z-index: 420;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.lb-sheet {
    width: 100%;
    max-width: 560px;
    max-height: 92vh;
    overflow: auto;
    background: var(--surface, #fff);
    color: var(--text, #222);
    border-radius: 18px 18px 0 0;
    padding: 14px 16px calc(16px + env(safe-area-inset-bottom));
    box-shadow: 0 -12px 40px -10px rgba(0, 0, 0, 0.35);
}
@media (min-width: 700px) {
    .lb-scrim {
        align-items: center;
    }
    .lb-sheet {
        border-radius: 18px;
        max-height: 88vh;
    }
}
.lb-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.lb-wa {
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--whatsapp, #25d366);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lb-head-t {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}
.lb-head-t b {
    font-size: 16px;
}
.lb-head-t span {
    font-size: 12px;
    color: var(--text-light);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lb-x {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: var(--bg-soft, #f4f1ea);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    color: var(--text, #222);
}
.lb-demo {
    font-size: 11.5px;
    color: #8a6d00;
    background: #fff8e1;
    border: 1px solid #f3e2a3;
    border-radius: 8px;
    padding: 6px 10px;
    margin-bottom: 10px;
}
.lb-segs {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
}
.lb-seg {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.lb-seg-l {
    flex: none;
    width: 62px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--text-light);
}
.lb-chip {
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid var(--border, #e6e1d6);
    background: var(--surface, #fff);
    color: var(--text, #222);
    font-size: 12.5px;
    cursor: pointer;
}
.lb-chip.on {
    background: var(--text, #222);
    color: #fff;
    border-color: transparent;
}
.lb-recip {
    font-size: 13px;
    color: var(--text-light);
    padding: 8px 0 10px;
    border-top: 1px solid var(--border, #e6e1d6);
}
.lb-recip b {
    color: var(--text, #222);
    font-size: 15px;
}
.lb-tokens {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-light);
    margin-bottom: 6px;
    flex-wrap: wrap;
}
.lb-tok {
    padding: 3px 8px;
    border-radius: 6px;
    border: 1px solid var(--border, #e6e1d6);
    background: var(--bg-soft, #f4f1ea);
    font-family: ui-monospace, Menlo, monospace;
    font-size: 11.5px;
    cursor: pointer;
    color: var(--text, #222);
}
.lb-chars {
    margin-left: auto;
}
.lb-text {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--border, #e6e1d6);
    border-radius: 12px;
    padding: 10px 12px;
    font: inherit;
    font-size: 14px;
    line-height: 1.45;
    resize: vertical;
    background: var(--surface, #fff);
    color: var(--text, #222);
}
.lb-prev-wrap {
    margin: 10px 0 12px;
    padding: 12px;
    border-radius: 12px;
    background: #e5ddd5
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><circle cx="20" cy="20" r="1" fill="%23d3c9bd"/></svg>');
}
.lb-prev-l {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: #6b6257;
    margin-bottom: 6px;
}
.lb-bubble {
    position: relative;
    display: inline-block;
    max-width: 88%;
    background: #dcf8c6;
    color: #111;
    border-radius: 10px 0 10px 10px;
    padding: 8px 10px 16px;
    font-size: 13.5px;
    line-height: 1.4;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12);
    margin-left: 12%;
    white-space: pre-wrap;
    word-break: break-word;
}
.lb-bubble-t {
    position: absolute;
    right: 8px;
    bottom: 3px;
    font-size: 10px;
    color: #4fa3e0;
}
.lb-send {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 13px 16px;
    border-radius: 12px;
    border: none;
    background: var(--whatsapp, #25d366);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}
.lb-send em {
    font-style: normal;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    opacity: 0.85;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 5px;
    padding: 1px 5px;
}
.lb-send[disabled] {
    opacity: 0.45;
    cursor: default;
}
.lb-send.done {
    background: var(--text, #222);
    margin-top: 12px;
}
.lb-hist {
    margin-top: 14px;
    border-top: 1px solid var(--border, #e6e1d6);
    padding-top: 10px;
}
.lb-hist-l {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--text-light);
    margin-bottom: 6px;
}
.lb-hist-row {
    display: flex;
    gap: 8px;
    align-items: baseline;
    font-size: 12.5px;
    padding: 4px 0;
}
.lb-hist-row span {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lb-hist-row time {
    color: var(--text-light);
    font-size: 11.5px;
}
/* progress */
.lb-bar {
    height: 6px;
    border-radius: 999px;
    background: var(--bg-soft, #f4f1ea);
    overflow: hidden;
    margin-bottom: 10px;
}
.lb-bar span {
    display: block;
    height: 100%;
    background: var(--whatsapp, #25d366);
    transition: width 0.25s ease;
}
.lb-prog {
    max-height: 52vh;
    overflow: auto;
}
.lb-prow {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 4px;
    border-bottom: 1px solid var(--border, #eee9df);
}
.lb-pav {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--bg-soft, #f4f1ea);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--text-light);
}
.lb-pname {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lb-pname small {
    font-weight: 400;
    font-size: 11.5px;
    color: var(--text-light);
}
.lb-pst {
    flex: none;
    font-size: 11.5px;
    font-weight: 700;
    border-radius: 6px;
    padding: 2px 8px;
}
.lb-pst.q {
    color: var(--text-light);
    background: var(--bg-soft, #f4f1ea);
}
.lb-pst.s {
    color: #8a6d00;
    background: #fff8e1;
}
.lb-pst.d {
    color: #0a7d3c;
    background: #e6f6ec;
}

/* Typed alias editor (ADR-052) — rows of {type · [customer header] · value · remove}
   in the product edit modal and inward. Kept compact; the customer-header input is
   hidden unless the 'Customer' type is chosen (toggled in _aliasRowSync). */
.alias-editor {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.alias-row {
    display: flex;
    gap: 6px;
    align-items: center;
}
.alias-row .alias-type {
    flex: 0 0 132px;
}
.alias-row .alias-label {
    flex: 0 0 120px;
}
.alias-row .alias-value {
    flex: 1 1 auto;
    min-width: 0;
}
.alias-row .alias-del {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 20px;
    line-height: 1;
    border-radius: 6px;
    cursor: pointer;
}
.alias-row .alias-del:hover {
    background: var(--bg);
    color: var(--danger, #dc2626);
}
.alias-add-btn {
    margin-top: 8px;
    font-size: 13px;
    padding: 6px 14px;
}

/* Inward per-row typed-alias editor (ADR-053) — spans the row grid, revealed by
   the "+ Other codes" link; reuses .alias-editor / .alias-row from the modal. */
.inw-aliases-wrap {
    grid-column: 1 / -1;
    padding: 8px 0 2px;
}
.inw-alias-toggle {
    margin-left: 12px;
}