/* ==========================================================================
   WorkBench Mobile App Shell
   iOS-style app experience for phones and tablets (<1024px)
   Desktop (>=1024px) is completely unaffected.
   ========================================================================== */

/* ==========================================================================
   MOBILE DESIGN SYSTEM TOKENS
   See docs/MOBILE_DESIGN_SYSTEM.md for full guide. Every token is a CSS
   custom property so dark mode is a single attribute flip on <html>.
   Theme is selected by:
     <html data-mobile-theme="dark">   (default)
     <html data-mobile-theme="light">
   The mobile JS resolves "system" preference to one of these two values.
   ========================================================================== */
:root {
    /* ---- Layout / safe areas ---- */
    --mob-tab-height: 56px;
    --mob-topbar-height: 52px;
    --mob-safe-bottom: env(safe-area-inset-bottom, 0px);
    --mob-safe-top: env(safe-area-inset-top, 0px);

    /* ---- Legacy --mobile-* aliases ----
       Large parts of this file reference --mobile-* names that were never
       defined, so every var() using them computed to `unset` (e.g. the
       search overlay top bar lost its safe-area padding and the Cancel
       button rendered under the iPhone status bar). Alias them all to the
       real --mob-* tokens. */
    --mobile-safe-top: env(safe-area-inset-top, 0px);
    --mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
    --mobile-tab-height: var(--mob-tab-height, 56px);
    --mobile-transition: var(--mob-motion-ease, ease);
    --mobile-radius-sm: var(--mob-radius-sm, 8px);
    --mobile-bg: var(--mob-bg, #0d1117);
    --mobile-surface: var(--mob-bg-elev, #161b22);
    --mobile-card: var(--mob-card, #1c2128);
    --mobile-card-bg: var(--mob-card, #1c2128);
    --mobile-card-strong: var(--mob-card-strong, #22272e);
    --mobile-card-hover: var(--mob-press, rgba(255, 255, 255, 0.06));
    --mobile-card-active: var(--mob-press-strong, rgba(255, 255, 255, 0.1));
    --mobile-border: var(--mob-border, #30363d);
    --mobile-border-soft: var(--mob-border-soft, #262c33);
    --mobile-text: var(--mob-text, #e6edf3);
    --mobile-text-secondary: var(--mob-text-secondary, #9da7b1);
    --mobile-text-muted: var(--mob-text-muted, #768390);
    --mobile-accent: var(--mob-accent, #e74c3c);
    --mobile-accent-light: var(--mob-accent-light, #f1948a);
    --mobile-success: var(--mob-success, #2ecc71);

    /* ---- Motion ---- */
    --mob-motion-fast: 150ms;
    --mob-motion-base: 250ms;
    --mob-motion-slow: 350ms;
    --mob-motion-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --mob-motion-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --mob-motion-decelerate: cubic-bezier(0, 0, 0.2, 1);

    /* ---- Type scale (iOS-style) ---- */
    --mob-font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
    --mob-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas, monospace;
    --mob-text-xs: 11px;
    --mob-text-sm: 13px;
    --mob-text-base: 15px;
    --mob-text-md: 17px;
    --mob-text-lg: 20px;
    --mob-text-xl: 24px;
    --mob-text-2xl: 28px;
    --mob-leading-tight: 1.2;
    --mob-leading-base: 1.4;
    --mob-leading-relaxed: 1.55;

    /* ---- Spacing scale ---- */
    --mob-space-1: 4px;
    --mob-space-2: 8px;
    --mob-space-3: 12px;
    --mob-space-4: 16px;
    --mob-space-5: 20px;
    --mob-space-6: 24px;
    --mob-space-8: 32px;

    /* ---- Radii ---- */
    --mob-radius-xs: 6px;
    --mob-radius-sm: 10px;
    --mob-radius-md: 14px;
    --mob-radius-lg: 18px;
    --mob-radius-xl: 24px;
    --mob-radius-pill: 9999px;
    --mob-radius: var(--mob-radius-md);

    /* ---- Touch ---- */
    --mob-touch-min: 44px;

    /* ---- Brand accent (theme-stable) ---- */
    --mob-accent: #e74c3c;
    --mob-accent-strong: #c0392b;
    --mob-accent-light: rgba(231, 76, 60, 0.12);
    --mob-success: #10b981;
    --mob-warning: #f59e0b;
    --mob-danger: #ef4444;
    --mob-info: #3b82f6;
    /* Solid status FILLS that carry white labels. The --mob-success /
       --mob-danger hues above are tuned to be read AS text on a dark surface;
       used as a background behind white text they only reach 2.5–3.8:1, so
       filled badges/buttons use these darker variants instead. */
    --mob-solid-success: #0f7a55;
    --mob-solid-warning: #a16207;
    --mob-solid-danger: #dc2626;
    --mob-solid-info: #2563eb;
    --mob-solid-purple: #7c3aed;
    --mobile-accent: var(--mob-accent);
    --mobile-accent-light: var(--mob-accent-light);

    /* ---- Quick-action category colors (shared desktop ↔ mobile)
       These are intentional category indicators, not surface/border tokens.
       Used by the Customers / Vendors / Products mobile action bar AND by
       desktop quick-action / category buttons (e.g. Credit Management orange,
       sales-order Log purple, help-center file-type icons). Desktop CSS/JS
       references --wb-action-* aliases defined in assets/style.css that point
       back here, so this is the single source of truth — tweak here to
       restyle the entire quick-action palette across the product.
       These all carry WHITE labels, so each one must clear 4.5:1 against
       #fff — the previous green (#16a34a, 3.3:1) and orange (#ea580c,
       3.56:1) did not and were darkened one step. ---- */
    --mob-action-blue: #2563eb;     /* new-customer / new-vendor / new-product, doc/docx */
    --mob-action-green: #15803d;    /* customer-menu, xls/xlsx/csv */
    --mob-action-purple: #7c3aed;   /* credit-menu, sales-order Log button */
    --mob-action-orange: #c2410c;   /* excluded / excluded-vendors, ppt/pptx, Credit Management */
    --mob-action-fg: #fff;
}

/* ===== DARK THEME (default) ===== */
:root,
:root[data-mobile-theme="dark"] {
    --mob-bg: #0f172a;
    --mob-bg-elev: #1e293b;
    --mob-card: #1e293b;
    --mob-card-strong: #273449;
    --mob-border: #334155;
    --mob-border-soft: rgba(51, 65, 85, 0.55);
    --mob-text: #f8fafc;
    --mob-text-secondary: #aab8ca; /* was #94a3b8 — bumped for WCAG AA on card bg */
    --mob-text-muted: #9aa8ba;     /* AA on both --mob-card and --mob-card-strong */
    --mob-overlay: rgba(0, 0, 0, 0.55);
    --mob-tab-bg: rgba(15, 23, 42, 0.95);
    --mob-topbar-bg: rgba(15, 23, 42, 0.92);
    --mob-elev-1: 0 1px 2px rgba(0, 0, 0, 0.35);
    --mob-elev-2: 0 4px 12px rgba(0, 0, 0, 0.4);
    --mob-elev-3: 0 10px 30px rgba(0, 0, 0, 0.5);
    --mob-skeleton-from: #1e293b;
    --mob-skeleton-to: #293548;
    --mob-press: rgba(255, 255, 255, 0.06);
    --mob-press-strong: rgba(255, 255, 255, 0.1);

    /* ---- Surface / text aliases used by the feature modules ----
       The mobile feature modules (lobby, dashboard, work-queues, rfq,
       news, pinned, doc-upload, collections) inject their own CSS using
       these names with HARDCODED DARK fallbacks, e.g.
           background: var(--mob-surface, #1c1f27)
       While these names were undefined the fallback always won, so those
       screens rendered dark cards even in light theme — dark text on a
       dark card. They must stay defined in BOTH theme blocks. */
    --mob-surface: var(--mob-card);
    --mob-surface-2: var(--mob-card-strong);
    --mob-surface-strong: var(--mob-card-strong);
    --mob-text-dim: var(--mob-text-secondary);
    --mob-text-primary: var(--mob-text);
    --mobile-bg-secondary: var(--mob-bg-elev);

    /* ---- Semantic tones (badges, pills, callouts) ----
       Tinted background + readable foreground for each meaning. Dark
       theme uses a translucent tint with a pale foreground. */
    --mob-tone-info-bg: rgba(59, 130, 246, 0.18);
    --mob-tone-info-fg: #9dc0ff;
    --mob-tone-info-border: rgba(59, 130, 246, 0.35);
    --mob-tone-success-bg: rgba(16, 185, 129, 0.18);
    --mob-tone-success-fg: #6ee7b7;
    --mob-tone-success-border: rgba(16, 185, 129, 0.35);
    --mob-tone-warn-bg: rgba(245, 158, 11, 0.18);
    --mob-tone-warn-fg: #fbc55f;
    --mob-tone-warn-border: rgba(245, 158, 11, 0.35);
    --mob-tone-danger-bg: rgba(239, 68, 68, 0.18);
    --mob-tone-danger-fg: #ff9d9d;
    --mob-tone-danger-border: rgba(239, 68, 68, 0.35);
    --mob-tone-purple-bg: rgba(139, 92, 246, 0.18);
    --mob-tone-purple-fg: #c9b8fd;
    --mob-tone-purple-border: rgba(139, 92, 246, 0.35);
    --mob-tone-orange-bg: rgba(234, 88, 12, 0.20);
    --mob-tone-orange-fg: #ffac80;
    --mob-tone-orange-border: rgba(234, 88, 12, 0.38);
    --mob-tone-cyan-bg: rgba(6, 182, 212, 0.18);
    --mob-tone-cyan-fg: #7fdcec;
    --mob-tone-cyan-border: rgba(6, 182, 212, 0.35);
    --mob-tone-neutral-bg: var(--mob-card-strong);
    --mob-tone-neutral-fg: var(--mob-text-secondary);
    --mob-tone-neutral-border: var(--mob-border);

    /* Brand accent used as TEXT on a surface. The raw brand red only reaches
       ~3.6:1 on both themes' surfaces, so text/links/outline-buttons use this
       shifted pair instead. Filled brand buttons keep --mob-accent. */
    --mob-accent-on-surface: #ff8f7f;
}

/* ===== LIGHT THEME ===== */
:root[data-mobile-theme="light"] {
    --mob-bg: #f1f5f9;
    --mob-bg-elev: #ffffff;
    --mob-card: #ffffff;
    --mob-card-strong: #f8fafc;
    --mob-border: #e2e8f0;
    --mob-border-soft: rgba(148, 163, 184, 0.35);
    --mob-text: #0f172a;
    --mob-text-secondary: #475569;
    --mob-text-muted: #5b6675; /* #64748b was only 4.34:1 on the page bg */
    --mob-overlay: rgba(15, 23, 42, 0.45);
    --mob-tab-bg: rgba(255, 255, 255, 0.95);
    --mob-topbar-bg: rgba(255, 255, 255, 0.92);
    --mob-elev-1: 0 1px 2px rgba(15, 23, 42, 0.08);
    --mob-elev-2: 0 4px 12px rgba(15, 23, 42, 0.1);
    --mob-elev-3: 0 10px 30px rgba(15, 23, 42, 0.18);
    --mob-skeleton-from: #e2e8f0;
    --mob-skeleton-to: #f1f5f9;
    --mob-press: rgba(15, 23, 42, 0.05);
    --mob-press-strong: rgba(15, 23, 42, 0.08);

    /* ---- Surface / text aliases used by the feature modules (see dark) ---- */
    --mob-surface: var(--mob-card);
    --mob-surface-2: #eef2f7;
    --mob-surface-strong: var(--mob-card-strong);
    --mob-text-dim: var(--mob-text-secondary);
    --mob-text-primary: var(--mob-text);
    --mobile-bg-secondary: var(--mob-bg-elev);

    /* ---- Semantic tones ----
       Light theme needs a solid pale tint with a DARK, saturated
       foreground; the dark theme's pale foregrounds are unreadable here. */
    --mob-tone-info-bg: #e8f0ff;
    --mob-tone-info-fg: #1d4ed8;
    --mob-tone-info-border: #bfd4fe;
    --mob-tone-success-bg: #e3f8ef;
    --mob-tone-success-fg: #047857;
    --mob-tone-success-border: #a7e8cd;
    --mob-tone-warn-bg: #fdf3dc;
    --mob-tone-warn-fg: #92600a;
    --mob-tone-warn-border: #f3d79a;
    --mob-tone-danger-bg: #fdeaea;
    --mob-tone-danger-fg: #b91c1c;
    --mob-tone-danger-border: #f6c4c4;
    --mob-tone-purple-bg: #f0eafe;
    --mob-tone-purple-fg: #6d28d9;
    --mob-tone-purple-border: #d8c9fb;
    --mob-tone-orange-bg: #ffeee2;
    --mob-tone-orange-fg: #9a3d0b;
    --mob-tone-orange-border: #fbcfae;
    --mob-tone-cyan-bg: #e0f4f9;
    --mob-tone-cyan-fg: #0e6f85;
    --mob-tone-cyan-border: #b6e2ee;
    --mob-tone-neutral-bg: #eef2f7;
    --mob-tone-neutral-fg: var(--mob-text-secondary);
    --mob-tone-neutral-border: var(--mob-border);

    /* See dark theme note — brand red as text needs a darker shade here.
       #c0392b clears white/page bg but not the accent-tinted chips, so this
       goes one step darker. */
    --mob-accent-on-surface: #b02f22;
}

/* ===== MOBILE SHELL — ONLY RENDERS < 1024px ===== */
#mobileAppShell {
    display: none;
}

@media (max-width: 1023px) {
    #mobileAppShell {
        display: flex;
        flex-direction: column;
        position: fixed;
        inset: 0;
        z-index: 9000;
        background: var(--mob-bg);
        overflow: hidden;
        font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
        -webkit-font-smoothing: antialiased;
    }

    #mobileAppShell.mob-hidden {
        display: none !important;
    }

    /* Hide desktop elements on mobile when shell is active */
    body.mobile-app-active #mainApp > header,
    body.mobile-app-active #legacyTabNav,
    body.mobile-app-active #mobileMenu {
        display: none !important;
    }

    body.mobile-app-active #mainApp {
        visibility: hidden !important;
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        overflow: hidden !important;
        clip: rect(0 0 0 0) !important;
        clip-path: inset(50%) !important;
        pointer-events: none !important;
    }

    /* Hide the floating messenger FAB when mobile shell is active */
    body.mobile-app-active #messenger-fab {
        display: none !important;
    }
}

/* ===== TOP BAR ===== */
.mob-topbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    height: var(--mob-topbar-height);
    padding-top: var(--mob-safe-top);
    min-height: calc(var(--mob-topbar-height) + var(--mob-safe-top));
    background: var(--mob-topbar-bg);
    border-bottom: 1px solid var(--mob-border);
    flex-shrink: 0;
    position: relative;
    z-index: 10;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}

.mob-topbar-title {
    min-width: 0;
    flex: 1;
    font-size: 17px;
    font-weight: 700;
    color: var(--mob-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.02em;
}

.mob-topbar-btn {
    width: 40px;
    height: 40px;
    min-width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: var(--mob-text-secondary);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease, color 0.15s ease;
    position: relative;
}

.mob-topbar-btn:active {
    background: var(--mob-press-strong);
    color: var(--mob-text);
}

.mob-topbar .mob-save-card {
    width: auto;
    min-width: 44px;
    min-height: 44px;
    flex-shrink: 0;
    gap: 6px;
    text-decoration: none;
    border-radius: 8px;
}
.mob-save-card-label { font-size: 13px; font-weight: 600; white-space: nowrap; }
.mob-save-card:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
@media (max-width: 600px) {
    .mob-save-card-label { display: none; }
    .mob-topbar { gap: 2px; padding-left: 8px; padding-right: 8px; }
    .mob-topbar .mob-conn-label { display: none; }
}

.mob-topbar-btn .mob-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 16px;
    /* Cap badge width so 3+ digit counts (e.g. 137 unread) don't grow past
       the icon and clip the next top-bar button on 375px viewports.
       (task #585 audit) */
    max-width: 28px;
    height: 16px;
    padding: 0 4px;
    background: var(--mob-accent);
    color: white;
    font-size: 10px;
    font-weight: 700;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    overflow: hidden;
    white-space: nowrap;
}

/* ===== CONTENT AREA ===== */
.mob-content {
    flex: 1;
    overflow: hidden;
    position: relative;
    min-height: 0;
}

.mob-screen {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    background: var(--mob-bg);
    /* Same pairing rule as .mob-detail-overlay: a container that sets the
       themed background must also set the themed foreground, or inline
       `color: inherit` content falls back to the desktop body colour. */
    color: var(--mob-text);
    will-change: transform, opacity;
    transition: transform 0.35s var(--mob-motion-ease), opacity 0.35s var(--mob-motion-ease);
}

.mob-screen.active {
    transform: translateX(0);
    opacity: 1;
    z-index: 2;
}

.mob-screen.slide-left {
    transform: translateX(-30%);
    opacity: 0.5;
    z-index: 1;
    pointer-events: none;
}

.mob-screen.slide-right {
    transform: translateX(100%);
    opacity: 1;
    z-index: 3;
    pointer-events: none;
}

.mob-screen.hidden-right {
    transform: translateX(100%);
    opacity: 0;
    z-index: 0;
    pointer-events: none;
}

.mob-screen.hidden-left {
    transform: translateX(-100%);
    opacity: 0;
    z-index: 0;
    pointer-events: none;
}

/* ===== BOTTOM TAB BAR ===== */
.mob-tabbar {
    display: flex;
    align-items: stretch;
    height: calc(var(--mob-tab-height) + var(--mob-safe-bottom));
    padding-bottom: var(--mob-safe-bottom);
    background: var(--mob-tab-bg);
    border-top: 1px solid var(--mob-border);
    flex-shrink: 0;
    position: relative;
    z-index: 10;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}

.mob-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    background: transparent;
    border: none;
    color: var(--mob-text-muted);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.2s ease;
    padding: 4px 0;
    position: relative;
    font-family: inherit;
}

.mob-tab:active {
    transform: scale(0.92);
}

.mob-tab.active {
    color:var(--mob-accent-on-surface);
}

.mob-tab-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.mob-tab-icon svg {
    width: 22px;
    height: 22px;
    stroke-width: 1.8;
}

.mob-tab.active .mob-tab-icon svg {
    stroke-width: 2.2;
}

.mob-tab-label {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1;
}

.mob-tab.active .mob-tab-label {
    font-weight: 600;
}

/* ===== DETAIL VIEW NAVIGATION ===== */
.mob-detail-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: calc(var(--mob-tab-height) + var(--mob-safe-bottom));
    z-index: 9500;
    background: var(--mob-bg);
    /* Feature modules render inline-styled content in here and commonly write
       `color: inherit` on their own buttons/tiles. Without this declaration
       that inherits the DESKTOP app's body colour (a pale on-dark grey), so a
       light-theme phone drew near-white text on the white surface — the
       Warehouse home tiles read as six blank boxes. The overlay owns its
       background, so it must own the matching foreground too. */
    color: var(--mob-text);
    transform: translateX(100%);
    transition: transform 0.35s var(--mob-motion-ease);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.mob-detail-overlay.active {
    transform: translateX(0);
}

.mob-detail-topbar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 8px;
    height: var(--mob-topbar-height);
    padding-top: var(--mob-safe-top);
    min-height: calc(var(--mob-topbar-height) + var(--mob-safe-top));
    background: var(--mob-topbar-bg);
    border-bottom: 1px solid var(--mob-border);
    flex-shrink: 0;
}

.mob-back-btn {
    display: flex;
    align-items: center;
    gap: 2px;
    background: transparent;
    border: none;
    color:var(--mob-accent-on-surface);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    padding: 8px;
    margin-left: -8px;
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
}

.mob-back-btn svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.mob-detail-title {
    flex: 1;
    font-size: 17px;
    font-weight: 600;
    color: var(--mob-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

.mob-detail-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 0;
    /* Prevent any descendant width from punching out of the viewport */
    max-width: 100%;
}

.mob-detail-content > * {
    max-width: 100%;
}

/* ===== ENTITY ACTION BAR =====
   Horizontal scrollable row of quick-action buttons shown above the search
   box on the Customers/Vendors/Products tabs (mobile parity with desktop). */
.mob-action-bar {
    display: flex;
    gap: 8px;
    padding: 10px 12px 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.mob-action-bar::-webkit-scrollbar { display: none; }

.mob-action-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    padding: 0 14px;
    background: var(--mob-card);
    border: 1px solid var(--mob-border);
    border-radius: 19px;
    color: var(--mob-text);
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
}

.mob-action-btn:active {
    background: var(--mob-accent-light);
    border-color:var(--mob-accent-on-surface);
}

.mob-action-icon {
    font-size: 14px;
    line-height: 1;
}

.mob-action-label {
    line-height: 1;
}

/* Color variants for action buttons (matches desktop accent colors).
   Uses --mob-action-* tokens defined in :root so the palette can be tuned
   in one place. */
.mob-action-btn[data-mob-action="new-customer"],
.mob-action-btn[data-mob-action="new-vendor"],
.mob-action-btn[data-mob-action="new-product"] {
    background: var(--mob-action-blue);
    border-color: var(--mob-action-blue);
    color: var(--mob-action-fg);
}
.mob-action-btn[data-mob-action="customer-menu"] {
    background: var(--mob-action-green);
    border-color: var(--mob-action-green);
    color: var(--mob-action-fg);
}
.mob-action-btn[data-mob-action="credit-menu"] {
    background: var(--mob-action-purple);
    border-color: var(--mob-action-purple);
    color: var(--mob-action-fg);
}
.mob-action-btn[data-mob-action="excluded"],
.mob-action-btn[data-mob-action="excluded-vendors"] {
    background: var(--mob-action-orange);
    border-color: var(--mob-action-orange);
    color: var(--mob-action-fg);
}

/* ===== SUBMENU SHEET (bottom sheet shown when an action with submenu is tapped) ===== */
.mob-submenu-list {
    display: flex;
    flex-direction: column;
    padding: 4px 0;
}
.mob-submenu-item {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 14px 16px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--mob-border);
    color: var(--mob-text);
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
}
.mob-submenu-item:last-child { border-bottom: 0; }
.mob-submenu-item:active { background: var(--mob-accent-light); }
.mob-submenu-icon {
    font-size: 22px;
    line-height: 1;
    flex: 0 0 auto;
}
.mob-submenu-text { flex: 1 1 auto; min-width: 0; }
.mob-submenu-title { font-size: 15px; font-weight: 600; color: var(--mob-text); margin-bottom: 2px; }
.mob-submenu-desc { font-size: 12px; color: var(--mob-text-muted); line-height: 1.3; }
.mob-submenu-arrow { width: 18px; height: 18px; color: var(--mob-text-muted); flex: 0 0 auto; }

/* ===== MOBILE-FRIENDLY DESKTOP MODALS =====
   When the mobile shell is active, force any "fixed inset-0" modal opened
   by desktop code (Create Customer, Trade Reference, etc.) to be truly
   full-screen with single-column grids and edge-to-edge content. */
@media (max-width: 768px) {
    body.mobile-app-active .fixed.inset-0 {
        padding: 0 !important;
        align-items: stretch !important;
        justify-content: stretch !important;
    }
    body.mobile-app-active .fixed.inset-0 > div:not([class*="hidden"]) {
        max-width: 100% !important;
        width: 100% !important;
        /* Use dynamic viewport when supported so the sheet doesn't get
           clipped under the iOS URL bar / Android nav bar. */
        max-height: 100vh !important;
        max-height: 100dvh !important;
        height: 100vh !important;
        height: 100dvh !important;
        margin: 0 !important;
        border-radius: 0 !important;
        border-left: 0 !important;
        border-right: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        padding-top: env(safe-area-inset-top, 0px) !important;
    }
    /* Inner scrollable body should fill remaining space */
    body.mobile-app-active .fixed.inset-0 .overflow-y-auto {
        flex: 1 1 auto;
        min-height: 0;
        -webkit-overflow-scrolling: touch;
    }
    /* Collapse multi-column form grids to single column on phones */
    body.mobile-app-active .fixed.inset-0 .grid.grid-cols-2,
    body.mobile-app-active .fixed.inset-0 .grid.grid-cols-3,
    body.mobile-app-active .fixed.inset-0 .grid.grid-cols-4,
    body.mobile-app-active .fixed.inset-0 .md\:grid-cols-2,
    body.mobile-app-active .fixed.inset-0 .md\:grid-cols-3,
    body.mobile-app-active .fixed.inset-0 .md\:grid-cols-4,
    body.mobile-app-active .fixed.inset-0 .lg\:grid-cols-2,
    body.mobile-app-active .fixed.inset-0 .lg\:grid-cols-3,
    body.mobile-app-active .fixed.inset-0 .sm\:grid-cols-2 {
        grid-template-columns: 1fr !important;
    }
    /* Reduce inner padding for cramped section cards */
    body.mobile-app-active .fixed.inset-0 .p-6 { padding: 16px !important; }
    body.mobile-app-active .fixed.inset-0 .p-8 { padding: 16px !important; }
    /* Make buttons easier to tap (44px iOS minimum) */
    body.mobile-app-active .fixed.inset-0 button,
    body.mobile-app-active .fixed.inset-0 select,
    body.mobile-app-active .fixed.inset-0 input,
    body.mobile-app-active .fixed.inset-0 textarea {
        /* iOS minimum touch target (44pt) — bumped from 40px during the
           task #585 mobile audit to bring desktop-modal forms in line with
           the rest of the mobile shell. */
        min-height: 44px;
        font-size: 16px; /* prevent iOS zoom on focus */
    }
    body.mobile-app-active .fixed.inset-0 textarea { min-height: 80px; }
    /* Header should not collapse */
    body.mobile-app-active .fixed.inset-0 [class*="border-b"]:first-child {
        flex: 0 0 auto;
    }
    /* Footer/action bar at the bottom (look for sticky-bottom patterns) */
    body.mobile-app-active .fixed.inset-0 [class*="border-t"]:last-child {
        flex: 0 0 auto;
        padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
    }
    /* Ensure long button rows wrap */
    body.mobile-app-active .fixed.inset-0 .flex.items-center.justify-between {
        flex-wrap: wrap;
        gap: 8px;
    }
}

/* ===== SECTION LIST STYLES ===== */
.mob-section-search {
    padding: 12px 16px;
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--mob-bg);
}

.mob-search-input {
    width: 100%;
    height: 44px;
    padding: 0 14px 0 40px;
    background: var(--mob-card);
    border: 1px solid var(--mob-border);
    border-radius: var(--mob-radius-sm);
    color: var(--mob-text);
    /* 16px prevents iOS from auto-zooming when the field is focused. */
    font-size: 16px;
    outline: none;
    -webkit-appearance: none;
    font-family: inherit;
}

.mob-search-input:focus {
    border-color:var(--mob-accent-on-surface);
    box-shadow: 0 0 0 3px var(--mob-accent-light);
}

.mob-search-input::placeholder {
    color: var(--mob-text-muted);
}

.mob-search-wrap {
    position: relative;
}

.mob-search-wrap svg {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--mob-text-muted);
    pointer-events: none;
}

.mob-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mob-list-header {
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mob-text-muted);
    background: var(--mob-bg);
    position: sticky;
    /* Aligns under .mob-section-search (12px padding + 44px input + 12px padding). */
    top: 68px;
    z-index: 4;
}

.mob-list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--mob-border-soft);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease;
    min-height: 64px;
}

.mob-list-item:active {
    background: var(--mob-press);
}

.mob-list-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 18px;
}

.mob-list-body {
    flex: 1;
    min-width: 0;
}

.mob-list-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--mob-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mob-list-subtitle {
    font-size: 13px;
    color: var(--mob-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}

.mob-list-meta {
    flex-shrink: 0;
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.mob-list-meta-primary {
    font-size: 14px;
    font-weight: 600;
    color: var(--mob-text);
}

.mob-list-meta-secondary {
    font-size: 12px;
    color: var(--mob-text-muted);
}

.mob-list-chevron {
    width: 16px;
    height: 16px;
    color: var(--mob-text-muted);
    flex-shrink: 0;
    margin-left: 4px;
}

/* ===== SKELETON LOADERS ===== */
.mob-skeleton {
    animation: mob-shimmer 1.5s infinite;
    border-radius: 6px;
}

@keyframes mob-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.mob-skeleton-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--mob-border-soft);
}

.mob-skeleton-avatar {
    width: 44px;
    height: 44px;
    border-radius: 12px;
}

.mob-skeleton-lines {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mob-skeleton-line {
    height: 12px;
    border-radius: 6px;
}

.mob-skeleton-line:first-child {
    width: 60%;
}

.mob-skeleton-line:last-child {
    width: 40%;
}

/* ===== PULL TO REFRESH ===== */
.mob-ptr-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 0;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    will-change: max-height, opacity;
}

.mob-ptr-spinner {
    width: 26px;
    height: 26px;
    border: 2.5px solid var(--mob-border);
    border-top-color:var(--mob-accent-on-surface);
    border-radius: 50%;
    animation: mob-spin 0.7s linear infinite;
    will-change: transform;
}

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

/* ===== EMPTY STATE ===== */
.mob-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
}

.mob-empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.4;
}

.mob-empty-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--mob-text);
    margin-bottom: 6px;
}

.mob-empty-text {
    font-size: 14px;
    color: var(--mob-text-muted);
    max-width: 260px;
    line-height: 1.5;
}

.mob-empty-btn {
    margin-top: 20px;
    padding: 10px 24px;
    background: var(--mob-accent);
    color: white;
    border: none;
    border-radius: var(--mob-radius-sm);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
}

.mob-empty-btn:active {
    opacity: 0.85;
}

.mob-empty-actions {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.mob-empty-actions .mob-empty-btn {
    margin-top: 0;
}

.mob-empty-btn--secondary {
    background: transparent;
    color: var(--mob-text);
    border: 1px solid var(--mob-border);
}

/* ===== MOBILE FALLBACK PANEL =====
   Shown when a "More" entry would otherwise bridge to a dense desktop UI
   that isn't usable at phone widths (Eclipse tools, freight tooling,
   admin Health Center, Business Pulse). Gives the user a friendly
   explanation plus a "Continue to desktop view" escape hatch. */
.mob-fallback-overlay {
    position: fixed;
    inset: 0;
    background: var(--mob-overlay);
    z-index: 9700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}
.mob-fallback-overlay.active { opacity: 1; visibility: visible; }
.mob-fallback-card {
    width: 100%;
    max-width: 360px;
    background: var(--mob-bg);
    border-radius: var(--mob-radius);
    padding: 24px 20px 16px;
    text-align: center;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
    transform: scale(0.95);
    transition: transform 0.2s ease;
}
.mob-fallback-overlay.active .mob-fallback-card { transform: scale(1); }
.mob-fallback-icon {
    font-size: 40px;
    margin-bottom: 10px;
    opacity: 0.7;
}
.mob-fallback-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--mob-text);
    margin: 0 0 8px;
}
.mob-fallback-message {
    font-size: 14px;
    color: var(--mob-text-muted);
    line-height: 1.5;
    margin: 0 0 20px;
}
.mob-fallback-actions {
    display: flex;
    gap: 10px;
}
.mob-fallback-btn {
    flex: 1;
    padding: 12px 14px;
    border-radius: var(--mob-radius-sm);
    font-size: 15px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
    min-height: 44px;
}
.mob-fallback-btn--primary {
    background: var(--mob-accent);
    color: white;
}
.mob-fallback-btn--secondary {
    background: transparent;
    color: var(--mob-text);
    border: 1px solid var(--mob-border);
}
.mob-fallback-btn:active { opacity: 0.85; }

/* ===== BOTTOM SHEET ===== */
.mob-sheet-overlay {
    position: fixed;
    inset: 0;
    background: var(--mob-overlay);
    z-index: 9600;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mob-sheet-overlay.active {
    opacity: 1;
    visibility: visible;
}

.mob-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 85vh;
    /* Dynamic viewport keeps the sheet inside the visible area when the
       mobile browser chrome shrinks/expands. Both declarations are kept so
       browsers without dvh support still get a sensible cap. */
    max-height: 85dvh;
    background: var(--mob-card);
    border-radius: 16px 16px 0 0;
    z-index: 9601;
    transform: translateY(100%);
    transition: transform 0.35s var(--mob-motion-ease);
    display: flex;
    flex-direction: column;
    padding-bottom: var(--mob-safe-bottom);
}

.mob-sheet.active {
    transform: translateY(0);
}

.mob-sheet-handle {
    width: 36px;
    height: 5px;
    background: var(--mob-text-muted);
    border-radius: 3px;
    margin: 10px auto 6px;
    opacity: 0.5;
    cursor: grab;
}

.mob-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 16px 12px;
    border-bottom: 1px solid var(--mob-border);
}

.mob-sheet-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--mob-text);
}

/* Sheet close control.
   This used to be a bare 28px circle: the SVG inside it had no width/height
   so it collapsed to nothing, and the hand-rolled "✕" variants inherited no
   font-size — either way the button rendered as an empty grey dot with no
   visible glyph and a sub-44px hit target. Size the glyph explicitly, give
   it full-contrast text colour, and pad the tap area out to the touch
   minimum without growing the visible circle. (Task #1241) */
.mob-sheet-close {
    position: relative;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--mob-press-strong);
    border: 1px solid var(--mob-border);
    color: var(--mob-text);
    font-size: 17px;
    line-height: 1;
    font-family: var(--mob-font-family);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
/* Invisible hit-area extension to the 44px touch minimum. */
.mob-sheet-close::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--mob-touch-min);
    height: var(--mob-touch-min);
    transform: translate(-50%, -50%);
}
.mob-sheet-close svg {
    width: 18px;
    height: 18px;
    display: block;
    stroke: currentColor;
    pointer-events: none;
}
.mob-sheet-close:active {
    background: var(--mob-accent-light);
    color: var(--mob-accent-on-surface);
}

.mob-sheet-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px;
}

/* ===== MORE MENU ===== */
.mob-more-group {
    margin-bottom: 24px;
}

.mob-more-group-title {
    padding: 0 16px 8px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mob-text-muted);
}

.mob-more-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--mob-border-soft);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    background: transparent;
    border-left: none;
    border-right: none;
    border-top: none;
    width: 100%;
    text-align: left;
    font-family: inherit;
    color: var(--mob-text);
    transition: background 0.12s ease;
}

.mob-more-item:active {
    background: var(--mob-press);
}

.mob-more-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.mob-more-label {
    flex: 1;
    font-size: 15px;
    font-weight: 500;
}

.mob-more-arrow {
    width: 16px;
    height: 16px;
    color: var(--mob-text-muted);
    flex-shrink: 0;
}

/* ===== GLOBAL SEARCH OVERLAY ===== */
.mob-search-overlay {
    position: fixed;
    inset: 0;
    z-index: 9700;
    background: var(--mob-bg);
    transform: translateY(-100%);
    transition: transform 0.3s var(--mob-motion-ease);
    display: flex;
    flex-direction: column;
}

.mob-search-overlay.active {
    transform: translateY(0);
}

.mob-search-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    padding-top: calc(8px + var(--mob-safe-top));
    border-bottom: 1px solid var(--mob-border);
    flex-shrink: 0;
}

.mob-search-bar input {
    flex: 1;
    height: 38px;
    padding: 0 12px;
    background: var(--mob-card);
    border: 1px solid var(--mob-border);
    border-radius: var(--mob-radius-sm);
    color: var(--mob-text);
    font-size: 16px;
    outline: none;
    -webkit-appearance: none;
    font-family: inherit;
}

.mob-search-bar input:focus {
    border-color:var(--mob-accent-on-surface);
}

.mob-search-cancel {
    background: transparent;
    border: none;
    color:var(--mob-accent-on-surface);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    padding: 8px;
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
    white-space: nowrap;
}

.mob-search-results {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.mob-search-section {
    padding: 12px 16px 6px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mob-text-muted);
}

.mob-recent-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.mob-recent-item:active {
    background: var(--mob-press);
}

.mob-recent-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    background: var(--mob-card);
    flex-shrink: 0;
}

/* ===== TOPBAR CREATE BUTTON ===== */
.mob-topbar-create {
    color:var(--mob-accent-on-surface);
}

.mob-topbar-create:active {
    background: var(--mob-accent-light);
}

/* ===== TABLET MASTER-DETAIL ===== */
@media (min-width: 768px) and (max-width: 1023px) and (orientation: landscape) {
    .mob-tablet-split {
        display: flex !important;
        flex-direction: row !important;
    }

    .mob-tablet-split .mob-split-list {
        width: 380px;
        min-width: 320px;
        border-right: 1px solid var(--mob-border);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        flex-shrink: 0;
        height: 100%;
    }

    .mob-tablet-split .mob-split-detail {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        height: 100%;
        background: var(--mob-bg);
    }

    .mob-split-detail-empty {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        color: var(--mob-text-muted);
        font-size: 15px;
        padding: 24px;
        text-align: center;
    }

    .mob-split-detail-empty-icon {
        font-size: 40px;
        margin-bottom: 12px;
        opacity: 0.35;
    }

    .mob-tablet-split .mob-list-item.mob-split-active {
        background: var(--mob-accent-light);
        border-left: 3px solid var(--mob-accent);
    }

    .mob-detail-overlay.active {
        transform: translateX(100%) !important;
        pointer-events: none !important;
        visibility: hidden !important;
    }
}

/* ===== FORM BOTTOM SHEET ENHANCEMENTS ===== */
@media (max-width: 1023px) {
    .mob-form-field {
        margin-bottom: 16px;
    }

    .mob-form-label {
        display: block;
        font-size: 13px;
        font-weight: 600;
        color: var(--mob-text-secondary);
        margin-bottom: 6px;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .mob-form-input {
        width: 100%;
        min-height: 48px;
        padding: 12px 14px;
        background: var(--mob-bg);
        border: 1px solid var(--mob-border);
        border-radius: var(--mob-radius-sm);
        color: var(--mob-text);
        font-size: 16px;
        -webkit-appearance: none;
        font-family: inherit;
    }

    .mob-form-input:focus {
        outline: none;
        border-color:var(--mob-accent-on-surface);
        box-shadow: 0 0 0 3px var(--mob-accent-light);
    }

    .mob-form-submit {
        width: 100%;
        min-height: 52px;
        background: var(--mob-accent);
        color: white;
        border: none;
        border-radius: var(--mob-radius-sm);
        font-size: 16px;
        font-weight: 700;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        font-family: inherit;
    }

    .mob-form-submit:active {
        opacity: 0.85;
    }

    .mob-form-submit:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    /* Boost existing modals above the mobile shell */
    #createSalesOrderModal,
    #createPurchaseOrderModal,
    #accountSettingsModal,
    #globalModal,
    #documentPreviewModal,
    #productDetailsModal,
    #taskModal,
    #generationSelectorModal,
    #eclipseGenerationModal {
        z-index: 9800 !important;
    }

    /* Convert existing modals to bottom sheets on mobile */
    #createSalesOrderModal > div,
    #createPurchaseOrderModal > div,
    #globalModal > div {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        /* Dynamic-viewport fallback (task #585 audit): on iOS Safari with the
           URL bar visible, 92vh exceeds the visible area and clips the
           sticky footer of long create-order forms. */
        max-height: 92vh !important;
        max-height: 92dvh !important;
        border-radius: 16px 16px 0 0 !important;
        margin: 0 !important;
        transform: none !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Make modal body scroll while header and footer stay pinned */
    #createSalesOrderModal > div > .p-8,
    #createPurchaseOrderModal > div > .p-8,
    #createSalesOrderModal > div > div:nth-child(2),
    #createPurchaseOrderModal > div > div:nth-child(2) {
        flex: 1 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        max-height: none !important;
        min-height: 0 !important;
    }

    /* Footer buttons always visible at bottom */
    #createSalesOrderModal > div > div:last-child,
    #createPurchaseOrderModal > div > div:last-child {
        flex-shrink: 0 !important;
        border-radius: 0 !important;
        padding-bottom: calc(12px + var(--mob-safe-bottom)) !important;
    }

    /* Header stays compact */
    #createSalesOrderModal > div > div:first-child,
    #createPurchaseOrderModal > div > div:first-child {
        flex-shrink: 0 !important;
        border-radius: 16px 16px 0 0 !important;
        padding: 16px !important;
    }

    /* Ensure modal backdrops display correctly */
    #createSalesOrderModal,
    #createPurchaseOrderModal,
    #accountSettingsModal,
    #globalModal {
        align-items: flex-end !important;
        padding: 0 !important;
    }

    /* Account settings and global modal bottom sheet */
    #accountSettingsModal > div,
    #globalModal > div {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        /* Dynamic-viewport fallback (task #585 audit) — see note above. */
        max-height: 92vh !important;
        max-height: 92dvh !important;
        border-radius: 16px 16px 0 0 !important;
        margin: 0 !important;
        transform: none !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-bottom: calc(16px + var(--mob-safe-bottom)) !important;
    }

    /* Inputs inside modals should be large enough for touch */
    #createSalesOrderModal input,
    #createSalesOrderModal select,
    #createSalesOrderModal textarea,
    #createPurchaseOrderModal input,
    #createPurchaseOrderModal select,
    #createPurchaseOrderModal textarea,
    #accountSettingsModal input,
    #accountSettingsModal select,
    #accountSettingsModal textarea {
        font-size: 16px !important;
        min-height: 44px !important;
    }
}

/* ===== HAPTIC-STYLE PRESS FEEDBACK ===== */
@media (max-width: 1023px) {
    .mob-press-feedback {
        transition: transform 0.1s ease;
    }

    .mob-press-feedback:active {
        transform: scale(0.97);
    }
}

/* ===== THEME-AWARE SKELETON ===== */
.mob-skeleton {
    background: linear-gradient(90deg, var(--mob-skeleton-from) 25%, var(--mob-skeleton-to) 50%, var(--mob-skeleton-from) 75%);
    background-size: 200% 100%;
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
    .mob-screen,
    .mob-detail-overlay,
    .mob-sheet,
    .mob-search-overlay {
        transition-duration: 0.01ms !important;
    }

    .mob-skeleton,
    .mob-ptr-spinner {
        animation: none !important;
    }
}

/* ===== BADGE ON TAB =====
   The badge is positioned relative to the icon (which is `position:
   relative` in the base .mob-tab-icon block above) using a transform from
   the icon's center, so it stays aligned regardless of label width or
   icon size variations. */
.mob-tab .mob-tab-badge {
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translateX(40%);
    min-width: 16px;
    /* Cap badge width so 3+ digit counts don't drift across the next tab
       column at 375px viewports. (task #585 audit) */
    max-width: 28px;
    height: 16px;
    padding: 0 4px;
    background: var(--mob-accent);
    color: white;
    font-size: 10px;
    font-weight: 700;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 0 0 2px var(--mob-tab-bg);
    overflow: hidden;
    white-space: nowrap;
}

/* ===== INLINE CONTENT EMBED ===== */
.mob-embed-frame {
    width: 100%;
    min-height: 200px;
    padding: 12px;
}

/* Fix overflow issues inside mobile screens */
.mob-screen .bg-gray-800 {
    border-radius: var(--mob-radius-sm);
}

/* Ensure no horizontal scroll */
@media (max-width: 1023px) {
    .mob-screen * {
        max-width: 100%;
    }

    .mob-screen table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ==========================================================================
   DESIGN SYSTEM PRIMITIVES (added by task #154)
   ========================================================================== */

/* ===== SPRING-ANIMATED ACTIVE TAB INDICATOR ===== */
.mob-tabbar {
    position: relative;
}
.mob-tab-indicator {
    position: absolute;
    top: 4px;
    left: 0;
    width: 0;
    height: 32px;
    background: var(--mob-accent-light);
    border-radius: var(--mob-radius-md);
    transition:
        transform 380ms var(--mob-motion-spring),
        width 380ms var(--mob-motion-spring),
        opacity 200ms var(--mob-motion-ease);
    pointer-events: none;
    will-change: transform, width;
    opacity: 0;
}
.mob-tabbar.mob-tabbar-ready .mob-tab-indicator {
    opacity: 1;
}
.mob-tab {
    z-index: 1;
}

/* ===== KEYBOARD-AWARE TAB BAR ===== */
.mob-tabbar.mob-tabbar-hidden {
    transform: translateY(110%);
    transition: transform var(--mob-motion-base) var(--mob-motion-ease);
}
.mob-tabbar {
    transition: transform var(--mob-motion-base) var(--mob-motion-ease);
}

/* ===== CONNECTION STATUS DOT (top bar) ===== */
.mob-conn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-right: 4px;
    font-size: var(--mob-text-xs);
    color: var(--mob-text-secondary);
    padding: 2px 8px;
    border-radius: var(--mob-radius-pill);
    background: transparent;
    border: 1px solid transparent;
    transition: background var(--mob-motion-fast) var(--mob-motion-ease),
                color var(--mob-motion-fast) var(--mob-motion-ease),
                border-color var(--mob-motion-fast) var(--mob-motion-ease);
}
.mob-conn[data-state="online"] {
    color:var(--mob-tone-success-fg);
}
.mob-conn[data-state="syncing"] {
    color:var(--mob-tone-warn-fg);
}
.mob-conn[data-state="offline"] {
    color:var(--mob-tone-danger-fg);
    background: var(--mob-tone-danger-bg);
    border-color: rgba(239, 68, 68, 0.25);
}
.mob-conn-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 0 currentColor;
    flex-shrink: 0;
}
.mob-conn[data-state="online"] .mob-conn-dot {
    animation: mob-conn-pulse 2.5s ease-in-out infinite;
}
.mob-conn[data-state="syncing"] .mob-conn-dot {
    animation: mob-conn-pulse 1s ease-in-out infinite;
}
.mob-conn[data-state="offline"] .mob-conn-dot {
    animation: none;
}
@keyframes mob-conn-pulse {
    0%, 100% { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
    50%      { box-shadow: 0 0 0 5px transparent; opacity: 0.55; }
}
.mob-conn-label {
    display: none;
}
@media (min-width: 480px) {
    .mob-conn[data-state="offline"] .mob-conn-label,
    .mob-conn[data-state="syncing"] .mob-conn-label {
        display: inline;
    }
}

/* ===== TOAST / SNACKBAR ===== */
/* The desktop notification tray (#notificationContainer in index.html) is
   `fixed top-20 right-4 z-50`, which sits far BELOW the mobile shell's
   z-index 9000 — so every message a bridged desktop action reports through
   showNotification() was painted underneath the shell and never seen. That
   made actions look like dead ends even when they ran fine. Lift the tray
   above the shell and give it mobile geometry so those messages land where
   the mobile toasts do. (Task #1241) */
body.mobile-app-active #notificationContainer {
    position: fixed;
    top: auto;
    right: 0;
    left: 0;
    bottom: calc(var(--mob-tab-height) + var(--mob-safe-bottom) + 8px);
    z-index: 9901;
    /* The desktop root (#mainApp) is visibility:hidden while the shell is up,
       and visibility INHERITS — so the tray was painted at the right place
       and still invisible. Re-assert it here and on the messages. */
    visibility: visible;
    max-width: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 16px;
    pointer-events: none;
}
body.mobile-app-active #notificationContainer > * {
    pointer-events: auto;
    visibility: visible;
    max-width: min(420px, 92vw);
    width: 100%;
}

.mob-toast-container {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(var(--mob-tab-height) + var(--mob-safe-bottom) + 8px);
    z-index: 9900;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    pointer-events: none;
}
.mob-toast {
    pointer-events: auto;
    min-width: 200px;
    max-width: min(420px, 92vw);
    background: var(--mob-card-strong);
    color: var(--mob-text);
    border: 1px solid var(--mob-border);
    border-radius: var(--mob-radius-md);
    padding: 12px 16px;
    font-size: var(--mob-text-sm);
    line-height: var(--mob-leading-base);
    box-shadow: var(--mob-elev-3);
    display: flex;
    align-items: center;
    gap: 10px;
    transform: translateY(20px) scale(0.96);
    opacity: 0;
    transition:
        transform var(--mob-motion-base) var(--mob-motion-spring),
        opacity var(--mob-motion-base) var(--mob-motion-ease);
}
.mob-toast.mob-toast-in {
    transform: translateY(0) scale(1);
    opacity: 1;
}
.mob-toast-icon {
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
}
.mob-toast-body {
    flex: 1;
    min-width: 0;
}
.mob-toast-action {
    background: transparent;
    border: 0;
    color:var(--mob-accent-on-surface);
    font-weight: 600;
    font-family: inherit;
    font-size: var(--mob-text-sm);
    cursor: pointer;
    padding: 4px 6px;
    -webkit-tap-highlight-color: transparent;
}
.mob-toast[data-type="success"] { border-color: rgba(16, 185, 129, 0.45); }
.mob-toast[data-type="error"]   { border-color: rgba(239, 68, 68, 0.55); }
.mob-toast[data-type="warning"] { border-color: rgba(245, 158, 11, 0.55); }
.mob-toast[data-type="info"]    { border-color: rgba(59, 130, 246, 0.55); }

/* ===== ACTION SHEET ===== */
.mob-actionsheet-overlay {
    position: fixed;
    inset: 0;
    background: var(--mob-overlay);
    z-index: 9750;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--mob-motion-base) var(--mob-motion-ease),
                visibility var(--mob-motion-base);
}
.mob-actionsheet-overlay.active { opacity: 1; visibility: visible; }
.mob-actionsheet {
    position: fixed;
    left: 8px;
    right: 8px;
    bottom: calc(8px + var(--mob-safe-bottom));
    z-index: 9751;
    transform: translateY(110%);
    transition: transform var(--mob-motion-slow) var(--mob-motion-spring);
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}
.mob-actionsheet.active {
    transform: translateY(0);
    pointer-events: auto;
}
.mob-actionsheet-card {
    background: var(--mob-card-strong);
    border-radius: var(--mob-radius-lg);
    overflow: hidden;
    box-shadow: var(--mob-elev-3);
    border: 1px solid var(--mob-border);
}
.mob-actionsheet-title {
    padding: 14px 18px 10px;
    font-size: var(--mob-text-sm);
    font-weight: 500;
    color: var(--mob-text-secondary);
    text-align: center;
    border-bottom: 1px solid var(--mob-border-soft);
}
.mob-actionsheet-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 16px 18px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--mob-border-soft);
    color: var(--mob-text);
    font-size: var(--mob-text-md);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    min-height: var(--mob-touch-min);
}
.mob-actionsheet-item:last-child { border-bottom: 0; }
.mob-actionsheet-item:active { background: var(--mob-press); }
.mob-actionsheet-item.destructive { color:var(--mob-tone-danger-fg); font-weight: 500; }
.mob-actionsheet-item .mob-actionsheet-icon {
    width: 26px;
    text-align: center;
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
}
.mob-actionsheet-cancel {
    background: var(--mob-card-strong);
    border-radius: var(--mob-radius-lg);
    padding: 16px;
    text-align: center;
    color:var(--mob-accent-on-surface);
    font-size: var(--mob-text-md);
    font-weight: 600;
    border: 0;
    width: 100%;
    cursor: pointer;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
    min-height: var(--mob-touch-min);
    box-shadow: var(--mob-elev-3);
}

/* ===== CONFIRM DIALOG ===== */
.mob-confirm-overlay {
    position: fixed;
    inset: 0;
    background: var(--mob-overlay);
    z-index: 9800;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--mob-motion-base) var(--mob-motion-ease),
                visibility var(--mob-motion-base);
}
.mob-confirm-overlay.active { opacity: 1; visibility: visible; }
.mob-confirm-card {
    width: 100%;
    max-width: 320px;
    background: var(--mob-card-strong);
    border-radius: var(--mob-radius-lg);
    overflow: hidden;
    box-shadow: var(--mob-elev-3);
    border: 1px solid var(--mob-border);
    transform: scale(0.92);
    opacity: 0;
    transition: transform var(--mob-motion-slow) var(--mob-motion-spring),
                opacity var(--mob-motion-base) var(--mob-motion-ease);
}
.mob-confirm-overlay.active .mob-confirm-card {
    transform: scale(1);
    opacity: 1;
}
.mob-confirm-body {
    padding: 22px 18px 18px;
    text-align: center;
}
.mob-confirm-title {
    font-size: var(--mob-text-md);
    font-weight: 600;
    color: var(--mob-text);
    margin: 0 0 6px;
}
.mob-confirm-message {
    font-size: var(--mob-text-sm);
    color: var(--mob-text-secondary);
    line-height: var(--mob-leading-base);
    margin: 0;
}
.mob-confirm-actions {
    display: flex;
    border-top: 1px solid var(--mob-border-soft);
}
.mob-confirm-btn {
    flex: 1;
    padding: 14px;
    background: transparent;
    border: 0;
    color:var(--mob-accent-on-surface);
    font-size: var(--mob-text-md);
    font-family: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    min-height: var(--mob-touch-min);
}
.mob-confirm-btn + .mob-confirm-btn {
    border-left: 1px solid var(--mob-border-soft);
}
.mob-confirm-btn.cancel { color: var(--mob-text-secondary); font-weight: 500; }
.mob-confirm-btn.confirm { font-weight: 600; }
.mob-confirm-btn.destructive { color:var(--mob-tone-danger-fg); font-weight: 600; }
.mob-confirm-btn:active { background: var(--mob-press); }

/* ===== SEGMENTED CONTROL ===== */
.mob-segmented {
    display: inline-flex;
    background: var(--mob-card);
    border: 1px solid var(--mob-border);
    border-radius: var(--mob-radius-sm);
    padding: 3px;
    gap: 2px;
    width: 100%;
    max-width: 100%;
}
.mob-segmented-option {
    flex: 1;
    padding: 8px 12px;
    background: transparent;
    border: 0;
    border-radius: 7px;
    color: var(--mob-text-secondary);
    font-size: var(--mob-text-sm);
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background var(--mob-motion-fast) var(--mob-motion-ease),
                color var(--mob-motion-fast) var(--mob-motion-ease);
    min-height: 32px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mob-segmented-option[aria-pressed="true"] {
    background: var(--mob-bg);
    color: var(--mob-text);
    box-shadow: var(--mob-elev-1);
}
.mob-segmented-option:not([aria-pressed="true"]):active {
    background: var(--mob-press);
}

/* ===== SETTINGS SCREEN ===== */
.mob-settings-section {
    margin: 24px 0 8px;
}
.mob-settings-section-title {
    padding: 0 18px 8px;
    font-size: var(--mob-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mob-text-muted);
}
.mob-settings-card {
    background: var(--mob-card);
    border-top: 1px solid var(--mob-border);
    border-bottom: 1px solid var(--mob-border);
    overflow: hidden;
}
.mob-settings-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--mob-border-soft);
    color: var(--mob-text);
    background: transparent;
    border-left: 0; border-right: 0; border-top: 0;
    width: 100%;
    text-align: left;
    font-family: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    min-height: var(--mob-touch-min);
}
.mob-settings-row:last-child { border-bottom: 0; }
.mob-settings-row:active { background: var(--mob-press); }
.mob-settings-row-icon {
    width: 28px;
    height: 28px;
    border-radius: var(--mob-radius-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
.mob-settings-row-body {
    flex: 1;
    min-width: 0;
}
.mob-settings-row-title {
    font-size: var(--mob-text-base);
    font-weight: 500;
    color: var(--mob-text);
}
.mob-settings-row-sub {
    font-size: var(--mob-text-xs);
    color: var(--mob-text-muted);
    margin-top: 2px;
    line-height: var(--mob-leading-base);
}
.mob-settings-row-trail {
    flex-shrink: 0;
    color: var(--mob-text-muted);
    font-size: var(--mob-text-sm);
    display: flex;
    align-items: center;
    gap: 6px;
}
.mob-settings-row.destructive .mob-settings-row-title {
    color:var(--mob-tone-danger-fg);
}

/* iOS-style toggle switch */
.mob-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 26px;
    flex-shrink: 0;
}
.mob-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.mob-switch-slider {
    position: absolute;
    inset: 0;
    background: var(--mob-border);
    border-radius: 13px;
    transition: background var(--mob-motion-base) var(--mob-motion-ease);
    cursor: pointer;
}
.mob-switch-slider::before {
    content: "";
    position: absolute;
    width: 22px;
    height: 22px;
    left: 2px;
    top: 2px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    transition: transform var(--mob-motion-base) var(--mob-motion-spring);
}
.mob-switch input:checked + .mob-switch-slider {
    background: var(--mob-success);
}
.mob-switch input:checked + .mob-switch-slider::before {
    transform: translateX(18px);
}
.mob-switch input:disabled + .mob-switch-slider {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ===== THEME-AWARE EXISTING SURFACES ===== */
/* Fix list-item/header sticky background to follow theme */
.mob-list-header { background: var(--mob-bg); }

/* Profile button in topbar */
.mob-topbar-profile {
    color: var(--mob-text-secondary);
}
.mob-topbar-profile-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--mob-accent);
    color: white;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    letter-spacing: 0;
}

/* Reduced motion overrides for new primitives */
@media (prefers-reduced-motion: reduce) {
    .mob-tab-indicator,
    .mob-toast,
    .mob-actionsheet,
    .mob-confirm-card,
    .mob-tabbar,
    .mob-switch-slider::before {
        transition-duration: 0.01ms !important;
    }
    .mob-conn-dot {
        animation: none !important;
    }
}

/* ==========================================================================
   VENDOR DETAIL (mobile parity)
   ========================================================================== */
.mob-vendor-detail {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    background: var(--mobile-bg);
}
.mob-vendor-hero {
    padding: 16px 16px 12px;
    background: var(--mobile-card);
    border-bottom: 1px solid var(--mobile-border);
}
.mob-vendor-hero-name {
    font-size: 20px;
    font-weight: 700;
    color: var(--mobile-text);
    line-height: 1.25;
    word-break: break-word;
}
.mob-vendor-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
    font-size: 13px;
    color: var(--mobile-text-secondary);
}
.mob-vendor-hero-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.mob-vendor-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}
.mob-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    background: rgba(127,127,127,0.15);
    color: var(--mobile-text-secondary);
    border: 1px solid var(--mobile-border);
    line-height: 1.3;
    white-space: nowrap;
}
.mob-pill.is-success { background: var(--mob-tone-success-bg); color: var(--mob-tone-success-fg); border-color: var(--mob-tone-success-border); }
.mob-pill.is-warn { background: var(--mob-tone-warn-bg); color: var(--mob-tone-warn-fg); border-color: var(--mob-tone-warn-border); }
.mob-pill.is-danger { background: var(--mob-tone-danger-bg); color: var(--mob-tone-danger-fg); border-color: var(--mob-tone-danger-border); }
.mob-pill.is-info { background: var(--mob-tone-info-bg); color: var(--mob-tone-info-fg); border-color: var(--mob-tone-info-border); }
.mob-pill.is-purple { background: var(--mob-tone-purple-bg); color: var(--mob-tone-purple-fg); border-color: var(--mob-tone-purple-border); }

.mob-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 12px 16px 16px;
    background: var(--mobile-card);
    border-bottom: 1px solid var(--mobile-border);
}
.mob-stat-card {
    background: var(--mobile-bg);
    border: 1px solid var(--mobile-border);
    border-radius: 10px;
    padding: 10px 8px;
    text-align: center;
}
.mob-stat-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--mobile-text);
    line-height: 1.2;
    word-break: break-word;
}
.mob-stat-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mobile-text-muted);
    margin-top: 4px;
    font-weight: 600;
}

/* Sticky horizontal segmented control for vendor detail tabs */
.mob-detail-tabs {
    position: sticky;
    top: 0;
    z-index: 6;
    display: flex;
    overflow-x: auto;
    gap: 4px;
    padding: 8px 12px;
    background: var(--mobile-bg);
    border-bottom: 1px solid var(--mobile-border);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.mob-detail-tabs::-webkit-scrollbar { display: none; }
.mob-detail-tab {
    flex: 0 0 auto;
    padding: 8px 14px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--mobile-text-secondary);
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    min-height: 36px;
}
.mob-detail-tab[aria-pressed="true"] {
    background: var(--mobile-accent);
    color: #fff;
    border-color:var(--mob-accent-on-surface);
}
.mob-detail-tab:not([aria-pressed="true"]):active {
    background: rgba(127,127,127,0.1);
}

.mob-detail-pane-host {
    position: relative;
    overflow: hidden;
    flex: 1 0 auto;
    min-height: 200px;
    touch-action: pan-y;
}
.mob-detail-pane-track {
    display: flex;
    width: 500%;
    transition: transform 0.3s var(--mob-motion-ease);
    will-change: transform;
}
.mob-detail-pane-track.is-dragging {
    transition: none;
}
.mob-detail-pane {
    width: 20%;
    flex: 0 0 20%;
    padding: 14px 14px 24px;
    box-sizing: border-box;
}

/* Sticky bottom action bar inside vendor detail content */
.mob-detail-actionbar {
    position: sticky;
    bottom: 0;
    z-index: 7;
    display: flex;
    gap: 8px;
    padding: 10px 12px calc(10px + var(--mob-safe-bottom));
    background: var(--mobile-card);
    border-top: 1px solid var(--mobile-border);
    box-shadow: 0 -4px 12px rgba(0,0,0,0.08);
    margin-top: auto;
}
.mob-detail-actionbar-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 11px 8px;
    background: var(--mobile-bg);
    border: 1px solid var(--mobile-border);
    border-radius: 10px;
    color: var(--mobile-text);
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    min-height: 44px;
}
.mob-detail-actionbar-btn:active {
    background: rgba(127,127,127,0.1);
}
.mob-detail-actionbar-btn.is-primary {
    background: var(--mobile-accent);
    color: #fff;
    border-color:var(--mob-accent-on-surface);
}
.mob-detail-actionbar-btn.is-primary:active {
    filter: brightness(0.92);
}
.mob-detail-actionbar-btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Generic mobile cards used inside vendor panes */
.mob-vcard {
    background: var(--mobile-card);
    border: 1px solid var(--mobile-border);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 12px;
}
.mob-vcard-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mobile-text-muted);
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.mob-vcard-title-action {
    font-size: 12px;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
    color:var(--mob-accent-on-surface);
    cursor: pointer;
    background: none;
    border: 0;
    padding: 4px 6px;
    margin: -4px -6px;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
}
.mob-kv {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    font-size: 14px;
    border-bottom: 1px solid var(--mobile-border-soft, var(--mobile-border));
}
.mob-kv:last-child { border-bottom: 0; }
.mob-kv-label { color: var(--mobile-text-muted); flex-shrink: 0; }
.mob-kv-value { color: var(--mobile-text); text-align: right; word-break: break-word; }
.mob-kv-value a { color:var(--mob-accent-on-surface); text-decoration: none; }

/* Contact rows */
.mob-contact-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--mobile-border-soft, var(--mobile-border));
}
.mob-contact-row:last-child { border-bottom: 0; }
.mob-contact-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--mob-tone-purple-bg);
    color: var(--mob-tone-purple-fg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}
.mob-contact-body { flex: 1; min-width: 0; }
.mob-contact-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--mobile-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mob-contact-meta {
    font-size: 12px;
    color: var(--mobile-text-muted);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mob-contact-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.mob-contact-icon-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--mobile-bg);
    border: 1px solid var(--mobile-border);
    color: var(--mobile-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    text-decoration: none;
    font-size: 15px;
}
.mob-contact-icon-btn:active { background: rgba(127,127,127,0.12); }

/* PO list items */
.mob-po-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid var(--mobile-border-soft, var(--mobile-border));
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.mob-po-row:last-child { border-bottom: 0; }
.mob-po-row:active { background: rgba(127,127,127,0.06); }
.mob-po-id {
    font-size: 14px;
    font-weight: 600;
    color:var(--mob-accent-on-surface);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.mob-po-meta {
    font-size: 11px;
    color: var(--mobile-text-muted);
    margin-top: 2px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
}
.mob-po-trail { text-align: right; flex-shrink: 0; }
.mob-po-total {
    font-size: 14px;
    font-weight: 600;
    color: var(--mobile-text);
}
.mob-po-status {
    font-size: 10px;
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mobile-text-muted);
}

/* Part number rows */
.mob-part-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--mobile-border-soft, var(--mobile-border));
}
.mob-part-row:last-child { border-bottom: 0; }
.mob-part-num {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 14px;
    font-weight: 600;
    color: var(--mob-tone-purple-fg);
    word-break: break-all;
}
.mob-part-prod {
    font-size: 12px;
    color: var(--mobile-text-secondary);
    margin-top: 2px;
}
.mob-part-cmt {
    font-size: 11px;
    color: var(--mobile-text-muted);
    margin-top: 2px;
}

/* Sub-tab pill row (for PO bid/open/shipped/closed inside PO pane) */
.mob-subtabs {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 4px 0 12px;
    scrollbar-width: none;
}
.mob-subtabs::-webkit-scrollbar { display: none; }
.mob-subtab-btn {
    flex: 0 0 auto;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--mobile-card);
    border: 1px solid var(--mobile-border);
    color: var(--mobile-text-secondary);
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.mob-subtab-btn[aria-pressed="true"] {
    background: var(--mobile-accent);
    color: #fff;
    border-color:var(--mob-accent-on-surface);
}

.mob-pane-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 0;
    color: var(--mobile-text-muted);
    font-size: 13px;
}
.mob-pane-empty {
    text-align: center;
    padding: 24px 8px;
    color: var(--mobile-text-muted);
    font-size: 13px;
}
.mob-pane-empty-icon {
    font-size: 32px;
    margin-bottom: 6px;
    opacity: 0.5;
}

/* Camera-capture button in note composer */
.mob-attach-row {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap;
}
.mob-attach-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    border-radius: 999px;
    background: var(--mobile-bg);
    border: 1px solid var(--mobile-border);
    color: var(--mobile-text);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
}
.mob-attach-btn input[type="file"] { display: none; }
.mob-attach-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: var(--mob-tone-purple-bg);
    border-radius: 999px;
    font-size: 11px;
    color: var(--mob-tone-purple-fg);
}
.mob-attach-chip-remove {
    cursor: pointer;
    background: none;
    border: 0;
    color: inherit;
    font-family: inherit;
    padding: 0 0 0 4px;
    font-size: 13px;
}

.mob-textarea {
    width: 100%;
    min-height: 80px;
    padding: 10px 12px;
    background: var(--mobile-bg);
    border: 1px solid var(--mobile-border);
    border-radius: 10px;
    color: var(--mobile-text);
    font-size: 16px;
    font-family: inherit;
    resize: vertical;
    box-sizing: border-box;
}
.mob-textarea:focus { outline: none; border-color:var(--mob-accent-on-surface); }


/* Vendor list filter chip row */
.mob-filter-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px 12px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.mob-filter-row::-webkit-scrollbar { display: none; }
.mob-filter-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding: 7px 12px;
    border-radius: 999px;
    background: var(--mobile-card-bg);
    border: 1px solid var(--mobile-border);
    color: var(--mobile-text);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}
.mob-filter-chip.is-trigger:hover { background: var(--mobile-card-hover, var(--mobile-card-bg)); }
.mob-filter-chip.is-active { background: var(--mobile-accent); color: #fff; border-color:var(--mob-accent-on-surface); }
.mob-filter-chip.is-clear { background: transparent; color: var(--mobile-text-secondary); border-style: dashed; }

/* Inline icon-buttons for contact/part rows (edit / remove) */
.mob-row-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid var(--mobile-border);
    color: var(--mobile-text-secondary);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    margin-left: 4px;
}
.mob-row-action:hover { background: var(--mobile-card-hover, var(--mobile-card-bg)); color: var(--mobile-text); }
.mob-row-action.is-danger:hover { color: var(--mob-tone-danger-fg); border-color: var(--mob-tone-danger-fg); }

/* ==========================================================================
   MOBILE SALES ORDERS (task #155)
   List filters, detail hero, sticky action bar, line editor, wizard.
   ========================================================================== */

/* ---- Search bar filter button ---- */
.mob-search-wrap {
    position: relative;
}
.mob-so-filter-btn {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: transparent;
    color: var(--mob-text-secondary);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.mob-so-filter-btn:active { background: var(--mob-card-strong); }
.mob-so-filter-btn svg { width: 20px; height: 20px; }
.mob-so-filter-dot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mob-accent);
}

/* ---- Status filter chips ---- */
.mob-so-filter-chips {
    display: flex;
    gap: var(--mob-space-2);
    overflow-x: auto;
    padding: var(--mob-space-2) var(--mob-space-4) var(--mob-space-3);
    scrollbar-width: none;
    background: var(--mob-bg);
    position: sticky;
    top: 0;
    z-index: 5;
}
.mob-so-filter-chips::-webkit-scrollbar { display: none; }
.mob-so-filter-chip {
    flex-shrink: 0;
    padding: 8px 14px;
    border-radius: var(--mob-radius-pill);
    background: var(--mob-card);
    color: var(--mob-text-secondary);
    border: 1px solid var(--mob-border);
    font-size: var(--mob-text-sm);
    font-weight: 500;
    font-family: var(--mob-font-family);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: all var(--mob-motion-fast) var(--mob-motion-ease);
}
.mob-so-filter-chip:active { transform: scale(0.95); }
.mob-so-filter-chip.active {
    background: var(--mob-accent);
    color: white;
    border-color:var(--mob-accent-on-surface);
}

/* ---- Status badges ---- */
.mob-so-status-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--mob-radius-pill);
    font-size: var(--mob-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 4px;
}
.mob-so-status-badge--open      { background: var(--mob-tone-info-bg);  color: var(--mob-tone-info-fg); }
.mob-so-status-badge--invoiced  { background: var(--mob-tone-success-bg);  color: var(--mob-tone-success-fg); }
.mob-so-status-badge--shipped   { background: var(--mob-tone-success-bg);  color: var(--mob-tone-success-fg); }
.mob-so-status-badge--backorder { background: var(--mob-tone-warn-bg);  color: var(--mob-tone-warn-fg); }
.mob-so-status-badge--onhold    { background: var(--mob-tone-warn-bg);  color: var(--mob-tone-warn-fg); }
.mob-so-status-badge--quote     { background: var(--mob-tone-purple-bg);  color: var(--mob-tone-purple-fg); }
.mob-so-status-badge--cancelled { background: var(--mob-tone-danger-bg);   color: var(--mob-tone-danger-fg); }
/* Quote (Bid) expiration badges — rendered beside the status badge on
   quote rows. Tones reuse the existing badge tokens (all defined above). */
.mob-so-exp-badge--expired { background: var(--mob-tone-danger-bg); color: var(--mob-tone-danger-fg); }
.mob-so-exp-badge--soon    { background: var(--mob-tone-warn-bg);   color: var(--mob-tone-warn-fg); }
.mob-so-exp-badge--ok      { background: var(--mob-tone-info-bg);   color: var(--mob-tone-info-fg); }
.mob-so-status-badge + .mob-so-status-badge { margin-left: 6px; }

/* ---- List card ---- */
.mob-so-list .mob-list-icon {
    background: rgba(231,76,60,0.15);
    color:var(--mob-accent-on-surface);
}
.mob-so-list-card { padding-right: 14px; }
.mob-so-list-card .mob-list-meta-primary {
    font-weight: 700;
    color: var(--mob-text);
}
.mob-so-loading-more {
    padding: 0 var(--mob-space-4);
}
.mob-so-list-end {
    padding: 18px 12px;
    text-align: center;
    color: var(--mobile-text-muted);
    font-size: 12px;
    font-style: italic;
}
.mob-so-empty {
    text-align: center;
    padding: 48px 24px;
    color: var(--mob-text-secondary);
}
.mob-so-empty .mob-empty-icon {
    font-size: 48px;
    margin-bottom: 12px;
}
.mob-so-empty-cta {
    margin-top: 16px;
    padding: 12px 24px;
    background: var(--mob-accent);
    color: white;
    border: none;
    border-radius: var(--mob-radius-md);
    font-size: var(--mob-text-base);
    font-weight: 600;
    font-family: var(--mob-font-family);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.mob-so-empty-cta:active { transform: scale(0.97); }

/* ---- Filter sheet form ---- */
.mob-so-filter-form {
    display: flex;
    flex-direction: column;
    gap: var(--mob-space-3);
    padding: var(--mob-space-2) 0 var(--mob-space-4);
}
.mob-so-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.mob-so-field > span {
    font-size: var(--mob-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mob-text-muted);
}
.mob-so-field input,
.mob-so-field select,
.mob-so-field textarea {
    width: 100%;
    padding: 12px 14px;
    background: var(--mob-card-strong);
    color: var(--mob-text);
    border: 1px solid var(--mob-border);
    border-radius: var(--mob-radius-sm);
    font-size: var(--mob-text-base);
    font-family: var(--mob-font-family);
    -webkit-appearance: none;
}
.mob-so-field input:focus,
.mob-so-field select:focus,
.mob-so-field textarea:focus {
    outline: none;
    border-color:var(--mob-accent-on-surface);
}
.mob-so-filter-actions {
    display: flex;
    gap: var(--mob-space-2);
    margin-top: var(--mob-space-3);
}
.mob-so-filter-clear {
    flex: 1;
    padding: 12px;
    background: transparent;
    color: var(--mob-text-secondary);
    border: 1px solid var(--mob-border);
    border-radius: var(--mob-radius-sm);
    font-size: var(--mob-text-base);
    font-family: var(--mob-font-family);
    cursor: pointer;
}
.mob-so-filter-apply {
    flex: 2;
    padding: 12px;
    background: var(--mob-accent);
    color: white;
    border: none;
    border-radius: var(--mob-radius-sm);
    font-size: var(--mob-text-base);
    font-weight: 600;
    font-family: var(--mob-font-family);
    cursor: pointer;
}

/* ==========================================================================
   DETAIL OVERLAY — sales order
   ========================================================================== */
.mob-so-detail {
    padding: 0;
    background: var(--mob-bg);
}

/* Hero */
.mob-so-hero {
    padding: var(--mob-space-4) var(--mob-space-4) var(--mob-space-3);
    background: linear-gradient(135deg, rgba(231,76,60,0.12), rgba(231,76,60,0.04));
    border-bottom: 1px solid var(--mob-border-soft);
}
.mob-so-hero-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--mob-space-2);
    margin-bottom: var(--mob-space-1);
}
.mob-so-hero-id {
    font-size: var(--mob-text-xl);
    font-weight: 700;
    color: var(--mob-text);
}
.mob-so-hero-customer {
    font-size: var(--mob-text-md);
    color: var(--mob-text);
    margin-top: 4px;
}
.mob-so-hero-cid {
    color: var(--mob-text-muted);
    font-size: var(--mob-text-sm);
    font-weight: 500;
}
.mob-so-hero-po {
    font-size: var(--mob-text-sm);
    color: var(--mob-text-secondary);
    margin-top: 4px;
}

/* Generations timeline strip */
.mob-so-timeline {
    display: flex;
    gap: var(--mob-space-2);
    padding: var(--mob-space-3) var(--mob-space-4);
    overflow-x: auto;
    scrollbar-width: none;
    background: var(--mob-bg);
}
.mob-so-timeline::-webkit-scrollbar { display: none; }
.mob-so-timeline-pill {
    flex-shrink: 0;
    padding: 8px 14px;
    border-radius: var(--mob-radius-md);
    background: var(--mob-card);
    color: var(--mob-text-secondary);
    border: 1px solid var(--mob-border);
    font-family: var(--mob-font-family);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    -webkit-tap-highlight-color: transparent;
}
.mob-so-timeline-pill.active {
    background: var(--mob-accent);
    color: white;
    border-color:var(--mob-accent-on-surface);
}
.mob-so-timeline-num { font-size: var(--mob-text-sm); font-weight: 700; }
.mob-so-timeline-status { font-size: var(--mob-text-xs); }

/* "Select Generation" button (shown for orders with > 6 generations) */
.mob-so-gen-picker-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: calc(100% - var(--mob-space-4) * 2);
    margin: var(--mob-space-3) var(--mob-space-4);
    padding: 12px 16px;
    background: var(--mob-card);
    color: var(--mob-text-primary);
    border: 1px solid var(--mob-border);
    border-radius: var(--mob-radius-md);
    font-family: var(--mob-font-family);
    font-size: var(--mob-text-sm);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    text-align: left;
    gap: var(--mob-space-3);
}
.mob-so-gen-picker-btn:active { background: var(--mob-bg); }
.mob-so-gen-picker-current { font-weight: 700; }
.mob-so-gen-picker-count {
    color: var(--mob-text-secondary);
    font-size: var(--mob-text-xs);
    white-space: nowrap;
}

/* "Select Generation" sheet table */
.mob-so-gen-picker { padding: 0; }
.mob-so-gen-picker-meta {
    padding: var(--mob-space-3) var(--mob-space-4);
    color: var(--mob-text-secondary);
    font-size: var(--mob-text-xs);
    border-bottom: 1px solid var(--mob-border);
}
.mob-so-gen-picker-table {
    display: flex;
    flex-direction: column;
}
.mob-so-gen-picker-head,
.mob-so-gen-row {
    display: grid;
    /* gen | priceBranch | shipBranch | status | print | shipDate | shipVia */
    grid-template-columns: 56px 60px 60px 1fr 50px 84px 1fr;
    gap: 6px;
    align-items: center;
    padding: 10px var(--mob-space-3);
    font-size: var(--mob-text-xs);
}
.mob-so-gen-row .c-prbr,
.mob-so-gen-row .c-shbr {
    color: var(--mob-text-secondary);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mob-so-gen-picker-head {
    position: sticky;
    top: 0;
    background: var(--mob-bg);
    color: var(--mob-text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--mob-border);
    z-index: 1;
}
.mob-so-gen-picker-body {
    /* Dynamic-viewport fallback (task #585 audit) keeps the picker inside
       the visible area when the iOS URL bar is showing. */
    max-height: 70vh;
    max-height: 70dvh;
    overflow-y: auto;
}
.mob-so-gen-row {
    background: transparent;
    color: var(--mob-text-primary);
    border: none;
    border-bottom: 1px solid var(--mob-border);
    cursor: pointer;
    font-family: var(--mob-font-family);
    text-align: left;
    -webkit-tap-highlight-color: transparent;
}
.mob-so-gen-row:active,
.mob-so-gen-row:hover { background: var(--mob-card); }
.mob-so-gen-row.is-active { background: rgba(255, 87, 34, 0.08); }
.mob-so-gen-row .c-gen { font-weight: 700; color:var(--mob-accent-on-surface); }
.mob-so-gen-row .c-status,
.mob-so-gen-row .c-print,
.mob-so-gen-row .c-date,
.mob-so-gen-row .c-via {
    color: var(--mob-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mob-so-gen-row .mob-so-status-badge {
    padding: 2px 6px;
    font-size: 10px;
    border-radius: var(--mob-radius-sm);
}

/* Section card */
.mob-so-section-card {
    margin: var(--mob-space-3) var(--mob-space-4);
    padding: var(--mob-space-4);
    background: var(--mob-card);
    border: 1px solid var(--mob-border);
    border-radius: var(--mob-radius-md);
}
.mob-so-section-title {
    font-size: var(--mob-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mob-text-muted);
    margin-bottom: var(--mob-space-2);
    display: flex;
    align-items: center;
    gap: var(--mob-space-2);
}
.mob-so-section-count {
    font-size: var(--mob-text-xs);
    background: var(--mob-card-strong);
    color: var(--mob-text-secondary);
    padding: 2px 6px;
    border-radius: var(--mob-radius-pill);
    font-weight: 700;
}
.mob-so-pair {
    display: flex;
    gap: var(--mob-space-3);
    margin: var(--mob-space-3) var(--mob-space-4);
}
.mob-so-pair > .mob-so-section-card {
    margin: 0;
    flex: 1;
    min-width: 0;
}
.mob-so-section-half { padding: var(--mob-space-3); }
.mob-so-addr {
    color: var(--mob-text);
    font-size: var(--mob-text-sm);
    font-weight: 500;
}
.mob-so-addr-sub {
    color: var(--mob-text-secondary);
    font-size: var(--mob-text-xs);
    margin-top: 2px;
    line-height: 1.4;
}
.mob-so-addr-id {
    font-size: var(--mob-text-xs);
    color: var(--mob-text-muted);
    font-family: var(--mob-font-mono, monospace);
    margin-bottom: 2px;
}
/* Task #1244 — Bill To / Ship To hydration affordances. The card shows a
   skeleton while the customer-address fetch is in flight and an explicit
   failure line when it comes back empty, instead of blank space. */
.mob-so-addr-loading { margin-top: 6px; }
.mob-so-addr-loading .mob-skeleton-line {
    height: 10px;
    margin-bottom: 6px;
    width: 100%;
}
.mob-so-addr-loading-label {
    color: var(--mob-text-muted);
    font-size: var(--mob-text-xs);
    margin-top: 2px;
}
.mob-so-addr-failed {
    color: var(--mob-text-muted);
    font-style: italic;
}
.mob-so-addr-bill { border-left: 3px solid #3b82f6; }
.mob-so-addr-ship { border-left: 3px solid #10b981; }

/* Hero invoice + meta grid + compliance badges */
.mob-so-hero-invoice {
    font-size: var(--mob-text-sm);
    color: var(--mob-text-secondary);
    margin-top: 4px;
    font-family: var(--mob-font-mono, monospace);
}
.mob-so-hero-invoice span {
    color: var(--mob-text);
    font-weight: 700;
    margin-left: 4px;
}
.mob-so-hero-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--mob-space-2) var(--mob-space-3);
    margin-top: var(--mob-space-3);
    padding-top: var(--mob-space-3);
    border-top: 1px solid var(--mob-border);
}
.mob-so-hero-meta-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.mob-so-hero-meta-wide { grid-column: 1 / -1; }
.mob-so-hero-meta-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mob-text-muted);
    font-weight: 600;
}
.mob-so-hero-meta-val {
    font-size: var(--mob-text-sm);
    color: var(--mob-text);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mob-so-link {
    color:var(--mob-accent-on-surface);
    text-decoration: none;
}
.mob-so-link:active { opacity: 0.7; }
.mob-so-hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: var(--mob-space-2);
}
.mob-so-hero-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: var(--mob-radius-pill);
    font-size: 11px;
    font-weight: 600;
    border: 1px solid transparent;
}
.mob-so-hero-badge--ok {
    background: var(--mob-tone-success-bg);
    color: var(--mob-tone-success-fg);
    border-color: var(--mob-tone-success-border);
}
.mob-so-hero-badge--warn {
    background: var(--mob-tone-warn-bg);
    color: var(--mob-tone-warn-fg);
    border-color: var(--mob-tone-warn-border);
}
/* Quiet variant — used by the "link saved card" entry point on an order with
   no card on file yet (it is an offer, not a state to call out). */
.mob-so-hero-badge--muted {
    background: var(--mob-tone-neutral-bg);
    color: var(--mob-tone-neutral-fg);
}
/* Tappable hero badges (payment-on-file call-out) */
button.mob-so-hero-badge {
    font-family: inherit;
    line-height: 1.3;
    min-height: 28px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
button.mob-so-hero-badge:active { opacity: 0.7; }

/* Internal notes / shipping instructions panel */
.mob-so-notes-card .mob-so-note-block {
    padding: var(--mob-space-2) 0;
    border-bottom: 1px dashed var(--mob-border);
}
.mob-so-notes-card .mob-so-note-block:last-child { border-bottom: none; }
.mob-so-note-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mob-text-muted);
    font-weight: 700;
    margin-bottom: 4px;
}
.mob-so-note-text {
    font-size: var(--mob-text-sm);
    color: var(--mob-text);
    white-space: pre-wrap;
    line-height: 1.45;
}
.mob-so-note-block--internal .mob-so-note-text { color: var(--mob-tone-warn-fg); }
.mob-so-note-block--header .mob-so-note-text { color: var(--mob-text-secondary); }

/* Line item additions: customer part #, comment, multi-heat row, ship qty,
   return-line accent. */
.mob-so-line-cust {
    font-size: var(--mob-text-xs);
    color: var(--mob-tone-info-fg);
    margin-top: 2px;
}
.mob-so-line-comment {
    font-size: var(--mob-text-xs);
    color: var(--mob-tone-warn-fg);
    font-style: italic;
    margin-top: 2px;
    line-height: 1.3;
}
.mob-so-line-pid {
    font-family: var(--mob-font-mono, monospace);
    color: var(--mob-tone-warn-fg);
}
.mob-so-line-ship {
    color: var(--mob-tone-success-fg);
    font-weight: 600;
}
.mob-so-line-heats {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}
.mob-so-line--return {
    background: rgba(239, 68, 68, 0.06);
    border-left: 3px solid #ef4444;
}
.mob-so-line--return .mob-so-line-ext { color: var(--mob-tone-danger-fg); }

/* Key/value rows */
.mob-so-kv {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.mob-so-kv-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px dashed var(--mob-border-soft);
}
.mob-so-kv-row:last-child { border-bottom: none; }
.mob-so-kv-label {
    color: var(--mob-text-secondary);
    font-size: var(--mob-text-sm);
}
.mob-so-kv-val {
    color: var(--mob-text);
    font-size: var(--mob-text-sm);
    font-weight: 500;
}
.mob-so-kv-strong .mob-so-kv-label,
.mob-so-kv-strong .mob-so-kv-val {
    font-weight: 700;
    font-size: var(--mob-text-base);
    color: var(--mob-text);
}

/* Lines */
.mob-so-line-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.mob-so-line {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--mob-border-soft);
}
.mob-so-line:last-child { border-bottom: none; }
.mob-so-line-swipe {
    position: relative;
    background: var(--mob-card);
    transition: transform 0.25s var(--mob-motion-ease);
    z-index: 1;
}
.mob-so-line-row {
    display: flex;
    align-items: flex-start;
    gap: var(--mob-space-3);
    padding: var(--mob-space-3) 2px;
    cursor: pointer;
}
.mob-so-line-num {
    width: 24px;
    text-align: center;
    color: var(--mob-text-muted);
    font-size: var(--mob-text-sm);
    font-weight: 600;
    padding-top: 2px;
}
.mob-so-line-main {
    flex: 1;
    min-width: 0;
}
.mob-so-line-desc {
    color: var(--mob-text);
    font-size: var(--mob-text-sm);
    font-weight: 500;
    line-height: var(--mob-leading-tight);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.mob-so-line-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mob-space-2);
    margin-top: 4px;
    color: var(--mob-text-secondary);
    font-size: var(--mob-text-xs);
}
.mob-so-line-heat {
    background: var(--mob-tone-warn-bg);
    color: var(--mob-tone-warn-fg);
    border: none;
    padding: 2px 8px;
    border-radius: var(--mob-radius-pill);
    font-size: var(--mob-text-xs);
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.mob-so-line-ext {
    color: var(--mob-text);
    font-size: var(--mob-text-sm);
    font-weight: 700;
    white-space: nowrap;
}
.mob-so-line-expanded {
    padding: var(--mob-space-2) var(--mob-space-3) var(--mob-space-3) 38px;
    display: flex;
    gap: var(--mob-space-2);
    background: var(--mob-bg);
    border-top: 1px solid var(--mob-border-soft);
}
.mob-so-line-expanded button {
    flex: 1;
    padding: 10px;
    border-radius: var(--mob-radius-sm);
    border: 1px solid var(--mob-border);
    background: var(--mob-card-strong);
    color: var(--mob-text);
    font-family: var(--mob-font-family);
    font-size: var(--mob-text-sm);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.mob-so-line-delete { color:var(--mob-tone-danger-fg) !important; }
.mob-so-line-swipe-actions {
    position: absolute;
    top: 0; bottom: 0; right: 0;
    width: 96px;
    display: flex;
    align-items: stretch;
    background: var(--mob-danger);
}
.mob-so-line-swipe-delete {
    flex: 1;
    background: var(--mob-solid-danger);
    color: white;
    border: none;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    font-family: var(--mob-font-family);
}

/* Sidebar tabs */
.mob-so-sidebar-card { padding: 0; overflow: hidden; }
.mob-so-tabs {
    display: flex;
    background: var(--mob-card-strong);
    border-bottom: 1px solid var(--mob-border);
}
.mob-so-tab {
    flex: 1;
    min-width: 0;
    padding: var(--mob-space-3) 6px;
    background: transparent;
    color: var(--mob-text-secondary);
    border: none;
    border-bottom: 2px solid transparent;
    font-size: var(--mob-text-sm);
    font-weight: 500;
    font-family: var(--mob-font-family);
    /* Four tabs on a 360px phone: keep each label on one line rather than
       wrapping "Print & Send" into a ragged two-line block. (Task #1241) */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
/* Narrow phones: shrink the label a step so the longest tab ("Print & Send")
   fits whole instead of ellipsising. */
@media (max-width: 430px) {
    .mob-so-tab {
        padding-left: 2px;
        padding-right: 2px;
        font-size: var(--mob-text-xs);
        letter-spacing: -0.01em;
    }
}
.mob-so-tab.active {
    color:var(--mob-accent-on-surface);
    border-bottom-color:var(--mob-accent-on-surface);
}
.mob-so-sidebar-body {
    padding: var(--mob-space-3);
    min-height: 120px;
}

/* --------------------------------------------------------------------------
   EMBEDDED DESKTOP PANELS (notes / tasks) INSIDE THE MOBILE SIDEBAR
   --------------------------------------------------------------------------
   notes-tasks.js renders Tailwind dark-theme markup (bg-gray-800, text-white,
   border-gray-700, bg-gray-700 inputs). Dropped straight into the mobile
   sidebar that produced a dark grey card sitting inside a light screen, with
   its own duplicate Notes/Tasks tab row above the mobile one. Re-skin it to
   the mobile theme tokens and hide the inner tab buttons — the mobile
   .mob-so-tabs row is the single, obvious tab bar. (Task #1241) */
.mob-so-embed-panel [id^="ntTab-"] {
    display: none !important;
}
/* The inner header only held the (now hidden) tab buttons plus the
   refresh/sound/generation controls — collapse its divider and padding so it
   doesn't read as a second header. */
.mob-so-embed-panel > div > .border-b {
    border-bottom: 0 !important;
    padding: 0 0 var(--mob-space-2) 0 !important;
}
.mob-so-embed-panel > div {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
}
.mob-so-embed-panel [class*="bg-gray-8"],
.mob-so-embed-panel [class*="bg-gray-9"] {
    background: var(--mob-card) !important;
}
.mob-so-embed-panel [class*="bg-gray-7"],
.mob-so-embed-panel [class*="bg-gray-6"] {
    background: var(--mob-card-strong) !important;
}
.mob-so-embed-panel [class*="border-gray-"] {
    border-color: var(--mob-border) !important;
}
.mob-so-embed-panel [class*="text-white"],
.mob-so-embed-panel [class*="text-gray-1"],
.mob-so-embed-panel [class*="text-gray-2"],
.mob-so-embed-panel [class*="text-gray-3"] {
    color: var(--mob-text) !important;
}
.mob-so-embed-panel [class*="text-gray-4"],
.mob-so-embed-panel [class*="text-gray-5"] {
    color: var(--mob-text-secondary) !important;
}
.mob-so-embed-panel input,
.mob-so-embed-panel textarea,
.mob-so-embed-panel select {
    background: var(--mob-bg) !important;
    color: var(--mob-text) !important;
    border-color: var(--mob-border) !important;
    /* 16px keeps iOS from zooming the viewport on focus. */
    font-size: 16px !important;
}
.mob-so-embed-panel input::placeholder,
.mob-so-embed-panel textarea::placeholder {
    color: var(--mob-text-muted) !important;
}
/* Keep the brand-red primary buttons (Post Note / Create Task) — they read
   correctly on both themes — but make sure their label stays white. */
.mob-so-embed-panel [class*="bg-mls-red"],
.mob-so-embed-panel [class*="bg-red-"] {
    background: var(--mob-accent) !important;
    color: #fff !important;
}
.mob-so-embed-panel button {
    min-height: 36px;
    font-family: var(--mob-font-family);
}
/* The desktop panel caps its own lists with max-h-96 + overflow — a nested
   scroller inside the page scroller is unusable on a phone. */
.mob-so-embed-panel [class*="max-h-"] {
    max-height: none !important;
    overflow: visible !important;
}

/* --------------------------------------------------------------------------
   HEADER EDITOR SHEET
   --------------------------------------------------------------------------
   The sheet body inherits the desktop shell's light-on-dark text colour, so
   inline-styled labels vanished against the light sheet surface. Every piece
   of this form now names its own theme token. (Task #1241) */
.mob-so-header-editor {
    color: var(--mob-text);
    font-family: var(--mob-font-family);
}
.mob-so-hdr-field {
    margin-bottom: var(--mob-space-4);
}
.mob-so-hdr-label {
    display: block;
    font-size: var(--mob-text-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mob-text-secondary);
    margin-bottom: 6px;
}
.mob-so-header-editor .mob-form-input {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    background: var(--mob-bg);
    border: 1px solid var(--mob-border);
    border-radius: var(--mob-radius-sm);
    color: var(--mob-text);
    /* 16px avoids the iOS focus zoom. */
    font-size: 16px;
    font-family: inherit;
    -webkit-appearance: none;
}
.mob-so-header-editor .mob-form-input:focus {
    outline: none;
    border-color: var(--mob-accent-on-surface);
    box-shadow: 0 0 0 3px var(--mob-accent-light);
}
.mob-so-hdr-textarea {
    min-height: 84px;
    resize: vertical;
    line-height: var(--mob-leading-base);
}
.mob-so-header-editor .mob-so-hdr-save {
    width: 100%;
    min-height: 52px;
    margin-top: var(--mob-space-2);
    background: var(--mob-accent);
    color: #fff;
    border: none;
    border-radius: var(--mob-radius-sm);
    font-size: 16px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.mob-so-header-editor .mob-so-hdr-save:disabled { opacity: 0.55; }
.mob-so-hdr-ro {
    margin-top: var(--mob-space-6);
    padding-top: var(--mob-space-4);
    border-top: 1px solid var(--mob-border);
}
.mob-so-hdr-ro-title {
    font-size: var(--mob-text-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mob-text-secondary);
}
.mob-so-hdr-ro-note {
    font-size: var(--mob-text-sm);
    color: var(--mob-text-muted);
    line-height: var(--mob-leading-base);
    margin: 4px 0 var(--mob-space-3);
}
/* Matrix-refused header field: value shown read-only with Eclipse's reason. */
.mob-so-hdr-field[data-ecl-readonly="true"] .mob-so-hdr-ro-input {
    opacity: 0.75;
    cursor: not-allowed;
    min-height: 44px;
    display: flex;
    align-items: center;
    white-space: pre-wrap;
    word-break: break-word;
}
.mob-so-hdr-none-editable {
    padding: var(--mob-space-3);
    border: 1px dashed var(--mob-border);
    border-radius: var(--mob-radius-sm);
    color: var(--mob-text-secondary);
}
.mob-so-hdr-ro-row {
    display: flex;
    justify-content: space-between;
    gap: var(--mob-space-3);
    padding: 8px 0;
    border-bottom: 1px solid var(--mob-border-soft);
    font-size: var(--mob-text-sm);
}
.mob-so-hdr-ro-row:last-child { border-bottom: 0; }
.mob-so-hdr-ro-label { color: var(--mob-text-secondary); }
.mob-so-hdr-ro-value {
    color: var(--mob-text);
    font-weight: 600;
    text-align: right;
    word-break: break-word;
}
.mob-so-sidebar-loading {
    color: var(--mob-text-muted);
    text-align: center;
    padding: var(--mob-space-4);
}
.mob-so-empty-inline {
    text-align: center;
    color: var(--mob-text-muted);
    padding: var(--mob-space-4);
    font-size: var(--mob-text-sm);
}
.mob-so-attach-actions,
.mob-so-docs {
    display: flex;
    flex-direction: column;
    gap: var(--mob-space-2);
}
.mob-so-attach-btn,
.mob-so-doc-btn {
    padding: var(--mob-space-3);
    background: var(--mob-card-strong);
    border: 1px solid var(--mob-border);
    border-radius: var(--mob-radius-sm);
    color: var(--mob-text);
    font-family: var(--mob-font-family);
    font-size: var(--mob-text-base);
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    display: flex;
    align-items: center;
    gap: var(--mob-space-2);
}
.mob-so-attach-btn:active,
.mob-so-doc-btn:active { transform: scale(0.98); }

/* Attachments tab — list + status pill (SO sidebar + PO Activity sheet) */
.mob-so-attach { display: flex; flex-direction: column; gap: var(--mob-space-3); }
.mob-so-attach-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--mob-space-2);
}
.mob-so-attach-actions .mob-so-attach-btn { justify-content: center; text-align: center; }
.mob-so-attach-status {
    padding: var(--mob-space-2) var(--mob-space-3);
    border-radius: var(--mob-radius-sm);
    font-size: var(--mob-text-sm);
    background: var(--mob-card-strong);
    border: 1px solid var(--mob-border);
    color: var(--mob-text-muted);
}
.mob-so-attach-status.is-busy  { color: var(--mob-text); }
.mob-so-attach-status.is-ok    { color: var(--mob-tone-success-fg); border-color: #064e3b; background: var(--mob-tone-success-bg); }
.mob-so-attach-status.is-warn  { color: var(--mob-tone-warn-fg); border-color: #78350f; background: var(--mob-tone-warn-bg); }
.mob-so-attach-status.is-error { color: var(--mob-tone-danger-fg); border-color: #7f1d1d; background: var(--mob-tone-danger-bg); }
.mob-so-attach-list { display: flex; flex-direction: column; gap: var(--mob-space-2); }
.mob-so-attach-item {
    display: flex;
    align-items: center;
    gap: var(--mob-space-3);
    padding: var(--mob-space-3);
    background: var(--mob-card-strong);
    border: 1px solid var(--mob-border);
    border-radius: var(--mob-radius-sm);
    color: var(--mob-text);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
.mob-so-attach-item:active { transform: scale(0.99); }
.mob-so-attach-icon { font-size: 22px; line-height: 1; }
.mob-so-attach-meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mob-so-attach-name {
    font-size: var(--mob-text-base);
    font-weight: 600;
    color: var(--mob-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mob-so-attach-sub  { font-size: var(--mob-text-xs); color: var(--mob-text-muted); }
.mob-so-attach-arrow { color: var(--mob-text-muted); font-size: 22px; line-height: 1; padding-left: 4px; }

/* PO Activity sheet — top tab bar (Notes / Tasks / Docs) */
.mob-po-acttabs {
    display: flex;
    gap: 4px;
    padding: 8px 12px 0;
    border-bottom: 1px solid var(--mobile-border, #2a2a2a);
}
.mob-po-acttab {
    flex: 1 1 0;
    padding: 10px 8px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--mobile-text-muted, #888);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.mob-po-acttab.is-active {
    color: var(--mobile-text, #fff);
    border-bottom-color:var(--mob-accent-on-surface);
}
.mob-po-acttab:active { opacity: 0.7; }

/* PO Docs tab body */
.mob-po-docs { display: flex; flex-direction: column; gap: 10px; padding: 12px 0; }
.mob-po-docs-section-title {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mobile-text-muted, #888);
    margin-bottom: 4px;
}
.mob-po-docs-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
}
.mob-po-doc-btn {
    padding: 12px;
    background: var(--mobile-surface, #1a1a1a);
    border: 1px solid var(--mobile-border, #2a2a2a);
    border-radius: 8px;
    color: var(--mobile-text, #fff);
    font-family: inherit;
    font-size: 14px;
    cursor: pointer;
    text-align: center;
    -webkit-tap-highlight-color: transparent;
}
.mob-po-doc-btn:active { transform: scale(0.98); }

/* Section title used inside the SO sidebar Docs tab to label the
 * Eclipse-attached documents block under the printable buttons. Matches
 * the PO Activity sheet's section titles for visual consistency. */
.mob-so-docs-section-title {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mob-text-muted, #888);
    margin-bottom: 4px;
}

/* Eclipse documents list — shown on both the SO sidebar Docs tab and the
 * PO Activity sheet Docs tab. Mirrors the desktop right-sidebar
 * DocumentManager output (signed BOLs, PODs, vendor confirmations, …). */
.mob-eclipse-docs { display: flex; flex-direction: column; gap: var(--mob-space-2); }
.mob-eclipse-docs-list { display: flex; flex-direction: column; gap: var(--mob-space-2); }
.mob-eclipse-docs-warning {
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--mob-tone-warning-bg, rgba(245, 158, 11, 0.12));
    color: var(--mob-tone-warning-fg, #b45309);
    font-size: 12px;
    line-height: 1.4;
}
.mob-eclipse-doc {
    display: flex;
    align-items: stretch;
    gap: 0;
    background: var(--mob-card-strong);
    border: 1px solid var(--mob-border);
    border-radius: var(--mob-radius-sm);
    overflow: hidden;
}
.mob-eclipse-doc-tap {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--mob-space-3);
    padding: var(--mob-space-3);
    background: transparent;
    border: none;
    color: var(--mob-text);
    font-family: var(--mob-font-family);
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.mob-eclipse-doc-tap:active { transform: scale(0.99); }
.mob-eclipse-doc-actions {
    display: flex;
    align-items: stretch;
    border-left: 1px solid var(--mob-border);
}
.mob-eclipse-doc-icon {
    background: transparent;
    border: none;
    color: var(--mob-text);
    font-size: 18px;
    padding: 0 14px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.mob-eclipse-doc-icon + .mob-eclipse-doc-icon {
    border-left: 1px solid var(--mob-border);
}
.mob-eclipse-doc-icon:active { transform: scale(0.95); }

/* ===== ECLIPSE DOCUMENT DETAILS SHEET =====
 * Mobile parity for the desktop DocumentManager.showDocumentInfo modal:
 * profile id, original filename, attached-by, attach date, MTR Sheet IDs,
 * linked entities, and a destructive Delete affordance. Dynamically
 * injected (vs. the shared #mobSheet) so it can layer above the PO
 * Activity sheet — its overlay/sheet sit at z-index 9700/9701, above
 * the shared sheet's 9600/9601. */
.mob-doc-info-overlay { z-index: 9700; }
.mob-doc-info-sheet {
    z-index: 9701;
    /* Dynamic-viewport fallback (task #585 audit). */
    max-height: 85vh;
    max-height: 85dvh;
}
.mob-doc-info-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.mob-doc-info-loading,
.mob-doc-info-error {
    padding: 24px 4px;
    text-align: center;
    color: var(--mob-text-muted);
    font-size: 14px;
}
.mob-doc-info-error { color:var(--mob-tone-danger-fg); }
.mob-doc-info-muted { color: var(--mob-text-muted); font-size: 12px; }
.mob-doc-info-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--mob-text);
    line-height: 1.35;
    word-break: break-word;
}
.mob-doc-info-rows {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    background: var(--mob-card-strong);
    border: 1px solid var(--mob-border);
    border-radius: var(--mob-radius-sm);
    padding: 12px 14px;
}
.mob-doc-info-row {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 12px;
    align-items: baseline;
}
.mob-doc-info-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mob-text-muted);
    font-weight: 600;
}
.mob-doc-info-val {
    font-size: 14px;
    color: var(--mob-text);
    word-break: break-word;
}
.mob-doc-info-val.is-mono {
    font-family: var(--mob-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 12.5px;
}
.mob-doc-info-val.is-muted { color: var(--mob-text-muted); }
.mob-doc-info-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.mob-doc-info-section-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mob-text-muted);
    font-weight: 600;
}
.mob-doc-info-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.mob-doc-info-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    background: var(--mob-press-strong);
    color: var(--mob-text);
    border: 1px solid var(--mob-border);
}
.mob-doc-info-chip.is-mtr {
    background: var(--mob-tone-warn-bg);
    color: var(--mob-tone-warn-fg);
    border-color: var(--mob-tone-warn-border);
    font-family: var(--mob-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
}
.mob-doc-info-links {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--mob-card-strong);
    border: 1px solid var(--mob-border);
    border-radius: var(--mob-radius-sm);
    padding: 10px 12px;
}
.mob-doc-info-link {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 13px;
    color: var(--mob-text);
}
.mob-doc-info-link-type {
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--mob-press);
    color: var(--mob-text-secondary);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.mob-doc-info-link-id {
    font-family: var(--mob-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 12.5px;
    word-break: break-all;
}
.mob-doc-info-link-flag {
    margin-left: auto;
    font-size: 11px;
    color:var(--mob-tone-danger-fg);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.mob-doc-info-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--mob-border-soft);
}
.mob-doc-info-btn {
    appearance: none;
    border: 1px solid var(--mob-border);
    background: var(--mob-card-strong);
    color: var(--mob-text);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    padding: 12px 14px;
    border-radius: var(--mob-radius-sm);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.mob-doc-info-btn:active { transform: scale(0.99); }
.mob-doc-info-btn.is-danger {
    background: var(--mob-tone-danger-bg);
    color: var(--mob-tone-danger-fg);
    border-color: var(--mob-tone-danger-border);
}

/* Inline "Upload to Eclipse" affordance — collapsed toggle button that
 * expands into a touch-friendly form. Lives at the top of the
 * .mob-eclipse-docs container on both the SO sidebar Docs tab and the
 * PO Activity sheet Docs tab so drivers/receivers can push a wet-signed
 * BOL straight into Eclipse from the phone (parity with desktop's
 * DocumentManager.showUploadModal). */
.mob-eclipse-upload {
    display: flex;
    flex-direction: column;
    gap: var(--mob-space-2);
}
.mob-eclipse-upload-toggle {
    justify-content: flex-start;
    width: 100%;
}
.mob-eclipse-upload-toggle-icon { font-size: 20px; line-height: 1; }
.mob-eclipse-upload-toggle-label {
    flex: 1 1 auto;
    text-align: left;
    font-weight: 600;
}
.mob-eclipse-upload-toggle-caret {
    color: var(--mob-text-muted);
    font-size: 14px;
    transition: transform 0.18s ease;
}
.mob-eclipse-upload.is-open .mob-eclipse-upload-toggle-caret {
    transform: rotate(180deg);
}
.mob-eclipse-upload-form {
    display: flex;
    flex-direction: column;
    gap: var(--mob-space-3);
    padding: var(--mob-space-3);
    background: var(--mob-card-strong);
    border: 1px solid var(--mob-border);
    border-radius: var(--mob-radius-sm);
}
.mob-eclipse-upload-form[hidden] { display: none; }
.mob-eclipse-upload-files {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--mob-space-2);
}
.mob-eclipse-upload-files .mob-so-attach-btn { justify-content: center; text-align: center; }
.mob-eclipse-upload-pick-icon { font-size: 18px; line-height: 1; }
.mob-eclipse-upload-selected {
    display: flex;
    align-items: center;
    gap: var(--mob-space-2);
    padding: var(--mob-space-2) var(--mob-space-3);
    background: var(--mob-card);
    border: 1px solid var(--mob-border);
    border-radius: var(--mob-radius-sm);
    color: var(--mob-text);
    font-size: var(--mob-text-sm);
}
.mob-eclipse-upload-selected[hidden] { display: none; }
.mob-eclipse-upload-sel-icon { font-size: 16px; line-height: 1; }
.mob-eclipse-upload-sel-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mob-eclipse-upload-sel-clear {
    background: transparent;
    border: none;
    color: var(--mob-text-muted);
    font-size: 18px;
    line-height: 1;
    padding: 4px 8px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.mob-eclipse-upload-sel-clear:active { color: var(--mob-tone-danger-fg); }
.mob-eclipse-upload-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.mob-eclipse-upload-field-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mob-text-muted);
}
.mob-eclipse-upload-input {
    width: 100%;
    padding: 10px 12px;
    background: var(--mob-card);
    border: 1px solid var(--mob-border);
    border-radius: var(--mob-radius-sm);
    color: var(--mob-text);
    font-family: var(--mob-font-family);
    font-size: var(--mob-text-base);
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}
.mob-eclipse-upload-input:focus {
    outline: none;
    border-color:var(--mob-accent-on-surface);
}
select.mob-eclipse-upload-input {
    background-image: linear-gradient(45deg, transparent 50%, var(--mob-text-muted) 50%),
                      linear-gradient(135deg, var(--mob-text-muted) 50%, transparent 50%);
    background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 30px;
}
.mob-eclipse-upload-mtr {
    background: var(--mob-card);
    border: 1px solid var(--mob-border);
    border-radius: var(--mob-radius-sm);
    padding: 0;
}
.mob-eclipse-upload-mtr-summary {
    list-style: none;
    padding: 10px 12px;
    color: var(--mob-text);
    font-size: var(--mob-text-sm);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.mob-eclipse-upload-mtr-summary::-webkit-details-marker { display: none; }
.mob-eclipse-upload-mtr-summary::before {
    content: '▸';
    display: inline-block;
    margin-right: 6px;
    color: var(--mob-text-muted);
    transition: transform 0.18s ease;
}
.mob-eclipse-upload-mtr[open] .mob-eclipse-upload-mtr-summary::before {
    transform: rotate(90deg);
}
.mob-eclipse-upload-mtr-body {
    padding: 0 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.mob-eclipse-upload-hint {
    margin: 0;
    font-size: 12px;
    color: var(--mob-text-muted);
    line-height: 1.4;
}
.mob-eclipse-upload-status {
    padding: var(--mob-space-2) var(--mob-space-3);
    border-radius: var(--mob-radius-sm);
    font-size: var(--mob-text-sm);
    background: var(--mob-card);
    border: 1px solid var(--mob-border);
    color: var(--mob-text-muted);
}
.mob-eclipse-upload-status[hidden] { display: none; }
.mob-eclipse-upload-status.is-busy  { color: var(--mob-text); }
.mob-eclipse-upload-status.is-ok    { color: var(--mob-tone-success-fg); border-color: #064e3b; background: var(--mob-tone-success-bg); }
.mob-eclipse-upload-status.is-warn  { color: var(--mob-tone-warn-fg); border-color: #78350f; background: var(--mob-tone-warn-bg); }
.mob-eclipse-upload-status.is-error { color: var(--mob-tone-danger-fg); border-color: #7f1d1d; background: var(--mob-tone-danger-bg); }
.mob-eclipse-upload-actions {
    display: flex;
    gap: var(--mob-space-2);
    justify-content: flex-end;
}
.mob-eclipse-upload-actions .mob-so-doc-btn { flex: 0 0 auto; padding: 10px 16px; }
.mob-eclipse-upload-submit {
    background: var(--mobile-accent, #ef4444);
    border-color:var(--mob-accent-on-surface);
    color: #fff;
    font-weight: 600;
}
.mob-eclipse-upload-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Sticky bottom action bar */
.mob-so-actionbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    /* Fully opaque. --mob-tab-bg is 95% alpha and relies on backdrop-filter
       to hide what's underneath; where that filter is unsupported or
       disabled, page text showed straight through the action bar and made
       its labels unreadable. This bar sits over scrolling content, so it
       needs its own solid surface. (Task #1241) */
    background: var(--mob-card);
    border-top: 1px solid var(--mob-border);
    padding: 6px 0 calc(6px + var(--mob-safe-bottom));
    z-index: 90;
    box-shadow: 0 -2px 10px rgba(15, 23, 42, 0.08);
}
.mob-so-actionbar-spacer {
    height: calc(80px + var(--mob-safe-bottom));
}
.mob-so-actionbar-btn {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    color: var(--mob-text-secondary);
    font-family: var(--mob-font-family);
    font-size: var(--mob-text-xs);
    font-weight: 500;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 4px;
    min-height: var(--mob-touch-min);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
/* Labels must never be clipped to an unreadable sliver by a neighbouring
   bar or a narrow column (task #1241). */
.mob-so-actionbar-btn > span:last-child {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.25;
}
.mob-so-actionbar-btn:active { transform: scale(0.95); }
.mob-so-actionbar-icon {
    font-size: 22px;
    line-height: 1;
}
.mob-so-actionbar-btn--accent {
    color:var(--mob-accent-on-surface);
    font-weight: 700;
}
.mob-so-actionbar-btn--accent .mob-so-actionbar-icon {
    color:var(--mob-accent-on-surface);
}

/* Ensure the global tab bar doesn't overlap a screen action bar inside a
   detail view. The old selector was `.mob-detail-overlay.active .mob-tabbar`,
   but .mob-tabbar is a SIBLING of the overlay inside the mobile shell, never
   a descendant — so the rule never matched and both bars rendered at once,
   clipping the sales-order action bar's labels. openDetail()/closeDetail()
   now toggle `body.mob-detail-open` and we key off that instead.
   (Task #1241) */
body.mob-detail-open .mob-tabbar { display: none; }

/* With the tab bar gone the overlay owns the full height, so the action bar
   can sit flush on the bottom edge — but it still has to clear the iOS home
   indicator on its own. */
body.mob-detail-open .mob-detail-overlay { bottom: 0; }

/* ==========================================================================
   NUMERIC KEYPAD LINE EDITOR (inside sheet)
   ========================================================================== */
.mob-so-numkey-edit {
    display: flex;
    flex-direction: column;
    gap: var(--mob-space-3);
}
.mob-so-numkey-prod {
    color: var(--mob-text);
    font-weight: 600;
}
.mob-so-numkey-fields {
    display: flex;
    gap: var(--mob-space-2);
}
.mob-so-numkey-field {
    flex: 1;
    padding: var(--mob-space-3);
    background: var(--mob-card-strong);
    border: 2px solid var(--mob-border);
    border-radius: var(--mob-radius-sm);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.mob-so-numkey-field.active { border-color:var(--mob-accent-on-surface); }
.mob-so-numkey-field span:first-child {
    font-size: var(--mob-text-xs);
    color: var(--mob-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.mob-so-numkey-value {
    font-size: var(--mob-text-xl);
    font-weight: 700;
    color: var(--mob-text);
    font-variant-numeric: tabular-nums;
}
.mob-so-numkey {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--mob-space-2);
}
.mob-so-numkey-btn {
    padding: var(--mob-space-4);
    background: var(--mob-card-strong);
    color: var(--mob-text);
    border: 1px solid var(--mob-border);
    border-radius: var(--mob-radius-sm);
    font-size: var(--mob-text-lg);
    font-weight: 600;
    font-family: var(--mob-font-family);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.mob-so-numkey-btn:active { background: var(--mob-accent); color: white; }
.mob-so-numkey-actions {
    display: flex;
    gap: var(--mob-space-2);
}
.mob-so-numkey-cancel,
.mob-so-numkey-save {
    flex: 1;
    padding: var(--mob-space-3);
    border-radius: var(--mob-radius-sm);
    font-family: var(--mob-font-family);
    font-size: var(--mob-text-base);
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--mob-border);
}
.mob-so-numkey-cancel {
    background: transparent;
    color: var(--mob-text-secondary);
}
.mob-so-numkey-save {
    background: var(--mob-accent);
    color: white;
    border-color:var(--mob-accent-on-surface);
}

/* ==========================================================================
   CREATE SALES ORDER WIZARD (full-screen overlay)
   ========================================================================== */
.mob-so-wizard {
    position: fixed;
    inset: 0;
    background: var(--mob-bg);
    z-index: 9000;
    display: none;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform var(--mob-motion-slow) var(--mob-motion-ease);
}
.mob-so-wizard.active {
    display: flex;
    transform: translateY(0);
}
.mob-so-wizard-head {
    padding: calc(var(--mob-space-3) + var(--mob-safe-top)) var(--mob-space-4) var(--mob-space-3);
    background: var(--mob-bg-elev);
    border-bottom: 1px solid var(--mob-border);
    position: relative;
}
.mob-so-wizard-close {
    position: absolute;
    top: calc(var(--mob-space-2) + var(--mob-safe-top));
    right: var(--mob-space-2);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: var(--mob-text-secondary);
    font-size: 24px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.mob-so-wizard-title {
    font-size: var(--mob-text-md);
    font-weight: 700;
    color: var(--mob-text);
    text-align: center;
    margin-bottom: var(--mob-space-3);
}
.mob-so-wizard-progress {
    display: flex;
    justify-content: space-between;
    gap: 4px;
    margin-top: var(--mob-space-2);
}
.mob-so-wizard-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: var(--mob-text-muted);
    font-size: var(--mob-text-xs);
    position: relative;
}
.mob-so-wizard-step-num {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--mob-card-strong);
    color: var(--mob-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    border: 2px solid var(--mob-border);
}
.mob-so-wizard-step.active .mob-so-wizard-step-num {
    background: var(--mob-accent);
    color: white;
    border-color:var(--mob-accent-on-surface);
}
.mob-so-wizard-step.done .mob-so-wizard-step-num {
    background: var(--mob-solid-success);
    color: white;
    border-color:var(--mob-tone-success-fg);
}
.mob-so-wizard-step.active { color: var(--mob-text); font-weight: 600; }
.mob-so-wizard-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--mob-space-4);
    -webkit-overflow-scrolling: touch;
}
.mob-so-wiz-pane {
    display: flex;
    flex-direction: column;
    gap: var(--mob-space-3);
}
.mob-so-wiz-info {
    color: var(--mob-text-secondary);
    font-size: var(--mob-text-sm);
}
.mob-so-wiz-results {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.mob-so-wiz-result {
    background: var(--mob-card);
    border: 1px solid var(--mob-border);
    border-radius: var(--mob-radius-sm);
    padding: var(--mob-space-3);
    text-align: left;
    font-family: var(--mob-font-family);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.mob-so-wiz-result:active { background: var(--mob-card-strong); }
.mob-so-wiz-result-name {
    color: var(--mob-text);
    font-size: var(--mob-text-sm);
    font-weight: 500;
}
.mob-so-wiz-result-sub {
    color: var(--mob-text-secondary);
    font-size: var(--mob-text-xs);
    margin-top: 2px;
}
.mob-so-wiz-loading {
    color: var(--mob-text-muted);
    padding: var(--mob-space-3);
    text-align: center;
}
.mob-so-wiz-selected {
    background: var(--mob-tone-success-bg);
    border: 1px solid var(--mob-success);
    border-radius: var(--mob-radius-sm);
    padding: var(--mob-space-3);
    color: var(--mob-text);
    font-size: var(--mob-text-sm);
}
.mob-so-wiz-shipto-options {
    display: flex;
    flex-direction: column;
    gap: var(--mob-space-2);
}
.mob-so-wiz-shipto-card {
    background: var(--mob-card);
    border: 2px solid var(--mob-border);
    border-radius: var(--mob-radius-md);
    padding: var(--mob-space-3);
    text-align: left;
    font-family: var(--mob-font-family);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.mob-so-wiz-shipto-card.selected { border-color:var(--mob-accent-on-surface); }
.mob-so-wiz-shipto-name {
    color: var(--mob-text);
    font-weight: 600;
    font-size: var(--mob-text-base);
}
.mob-so-wiz-shipto-sub {
    color: var(--mob-text-secondary);
    font-size: var(--mob-text-xs);
    margin-top: 2px;
}
.mob-so-wiz-lines-list {
    display: flex;
    flex-direction: column;
    gap: var(--mob-space-2);
    margin-top: var(--mob-space-2);
}
.mob-so-wiz-line {
    display: flex;
    align-items: center;
    gap: var(--mob-space-2);
    padding: var(--mob-space-3);
    background: var(--mob-card);
    border: 1px solid var(--mob-border);
    border-radius: var(--mob-radius-sm);
}
.mob-so-wiz-line-main { flex: 1; min-width: 0; color: var(--mob-text); font-size: var(--mob-text-sm); }
.mob-so-wiz-line-meta {
    color: var(--mob-text-secondary);
    font-size: var(--mob-text-xs);
    margin-top: 2px;
}
.mob-so-wiz-line-remove {
    background: transparent;
    border: none;
    color:var(--mob-tone-danger-fg);
    font-size: var(--mob-text-md);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    width: 32px; height: 32px;
}
.mob-so-wizard-footer {
    display: flex;
    gap: var(--mob-space-3);
    padding: var(--mob-space-3) var(--mob-space-4) calc(var(--mob-space-3) + var(--mob-safe-bottom));
    background: var(--mob-bg-elev);
    border-top: 1px solid var(--mob-border);
    align-items: center;
    justify-content: space-between;
}
.mob-so-wizard-back,
.mob-so-wizard-next,
.mob-so-wizard-submit {
    padding: var(--mob-space-3) var(--mob-space-5);
    border-radius: var(--mob-radius-sm);
    font-family: var(--mob-font-family);
    font-size: var(--mob-text-base);
    font-weight: 600;
    cursor: pointer;
    border: none;
    -webkit-tap-highlight-color: transparent;
}
.mob-so-wizard-back {
    background: transparent;
    color: var(--mob-text-secondary);
    border: 1px solid var(--mob-border);
}
.mob-so-wizard-next,
.mob-so-wizard-submit {
    background: var(--mob-accent);
    color: white;
    flex: 1;
    max-width: 220px;
}

/* ==========================================================================
   TABLET LANDSCAPE — sales detail in split pane, shrink action bar
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1023px) and (orientation: landscape) {
    .mob-tablet-split .mob-split-detail .mob-so-actionbar {
        position: sticky;
        bottom: 0;
        left: auto;
        right: auto;
    }
    .mob-tablet-split .mob-split-detail .mob-so-pair {
        flex-direction: row;
    }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .mob-so-wizard,
    .mob-so-line-swipe {
        transition-duration: 0.01ms !important;
    }
}

/* ==========================================================================
   SALES — RECENTS, CACHE BADGE, LINE REORDER (added by mobile-sales-orders)
   ========================================================================== */
.mob-so-recents {
    margin: 8px 12px 12px;
    padding: 8px 12px;
    background: var(--mob-surface, #fff);
    border: 1px solid var(--mob-border, #e5e7eb);
    border-radius: 12px;
}
.mob-so-recents-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mob-text-muted, #6b7280);
    margin-bottom: 6px;
}
.mob-so-recents .mob-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.mob-so-recent-item {
    cursor: pointer;
}

/* Cache freshness banner inside the detail hero */
.mob-so-cache-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
}
.mob-so-cache-badge--fresh {
    background: var(--mob-tone-success-bg);
    color: var(--mob-tone-success-fg);
    border: 1px solid var(--mob-tone-success-border);
}
.mob-so-cache-badge--stale {
    background: var(--mob-tone-warn-bg);
    color: var(--mob-tone-orange-fg);
    border: 1px solid var(--mob-tone-warn-border);
}
.mob-so-cache-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 6px;
}
.mob-so-cache-badge--fresh .mob-so-cache-dot {
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
}
.mob-so-cache-badge--stale .mob-so-cache-dot {
    animation: mob-so-pulse 1.6s ease-in-out infinite;
}
@keyframes mob-so-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

@media (prefers-reduced-motion: reduce) {
    .mob-so-cache-badge--stale .mob-so-cache-dot { animation: none; }
}

/* ========================================================================== */
/* PURCHASE ORDER MOBILE PARITY                                                */
/* List filters, full detail (hero/cards/lines/timeline), receiving sheet,     */
/* line item editor, sticky action bar.                                        */
/* ========================================================================== */

/* ---- Filter chips row (above list) ---- */
.mob-po-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 12px 8px;
    align-items: center;
}
.mob-po-chips:empty { display: none; }
.mob-po-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: var(--mobile-accent-light);
    border: 1px solid var(--mobile-accent);
    color:var(--mob-accent-on-surface);
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
}
.mob-po-chip-x {
    background: transparent;
    border: 0;
    color: inherit;
    font-size: 16px;
    line-height: 1;
    padding: 0 0 0 2px;
    cursor: pointer;
    font-family: inherit;
}
.mob-po-chip-clear {
    background: transparent;
    border: 0;
    color: var(--mobile-text-muted);
    font-size: 12px;
    padding: 6px 8px;
    cursor: pointer;
    font-family: inherit;
    text-decoration: underline;
}

/* ---- Filter sheet inputs ---- */
.mob-po-daterange {
    display: flex;
    gap: 8px;
    align-items: center;
}
.mob-po-daterange .mob-form-input { flex: 1; min-width: 0; }
.mob-po-daterange-sep {
    font-size: 12px;
    color: var(--mobile-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.mob-po-filter-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}
.mob-po-filter-actions .mob-form-submit { flex: 2; }
.mob-po-btn-secondary {
    flex: 1;
    min-height: 52px;
    background: transparent;
    color: var(--mobile-text-secondary);
    border: 1px solid var(--mobile-border);
    border-radius: var(--mobile-radius-sm);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
}
.mob-po-btn-secondary:active { background: rgba(127,127,127,0.08); }

/* ---- Status pill ---- */
.mob-po-status-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.6;
}
.mob-po-status-success { background: var(--mob-tone-success-bg); color: var(--mob-tone-success-fg); }
.mob-po-status-warning { background: var(--mob-tone-warn-bg); color: var(--mob-tone-orange-fg); }
.mob-po-status-danger  { background: var(--mob-tone-danger-bg);  color: var(--mob-tone-danger-fg); }
.mob-po-status-info    { background: var(--mob-tone-info-bg); color: var(--mob-tone-info-fg); }

/* ---- Detail layout ---- */
.mob-po-detail {
    padding: 12px 12px 88px; /* leave room for sticky action bar */
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.mob-po-detail .mob-po-card,
.mob-po-detail .mob-po-hero {
    background: var(--mobile-card);
    border: 1px solid var(--mobile-border);
    border-radius: 14px;
    overflow: hidden;
}

/* Hero */
.mob-po-hero {
    padding: 16px;
    background: linear-gradient(135deg, rgba(231,76,60,0.05), rgba(231,76,60,0.0)) , var(--mobile-card);
}
.mob-po-hero-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}
.mob-po-hero-id {
    font-size: 13px;
    font-weight: 600;
    color: var(--mobile-text-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.mob-po-hero-vendor {
    font-size: 18px;
    font-weight: 700;
    color: var(--mobile-text);
    line-height: 1.2;
}
.mob-po-hero-vid {
    font-size: 12px;
    font-weight: 500;
    color: var(--mobile-text-muted);
    margin-left: 6px;
}
.mob-po-hero-total {
    font-size: 28px;
    font-weight: 700;
    color: var(--mobile-text);
    margin-top: 8px;
    line-height: 1.1;
}
.mob-po-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-top: 10px;
    font-size: 12px;
    color: var(--mobile-text-secondary);
}
.mob-po-hero-meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.mob-po-cache-badge {
    margin-top: 12px;
    padding: 6px 10px;
    background: var(--mob-tone-warn-bg);
    border: 1px solid var(--mob-tone-warn-border);
    color: var(--mob-tone-orange-fg);
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.mob-po-cache-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #d97706;
    animation: mob-spin 1.4s linear infinite;
}
.mob-po-offline-badge {
    margin-top: 12px;
    padding: 6px 10px;
    background: var(--mob-tone-danger-bg);
    border: 1px solid var(--mob-tone-danger-border);
    color: var(--mob-tone-danger-fg);
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.mob-po-offline-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #dc2626;
    box-shadow: 0 0 0 2px rgba(239,68,68,0.18);
}
.mob-po-queue-banner-slot { display: block; }
.mob-po-queue-banner {
    margin: 12px 0 0;
    padding: 10px 12px;
    background: var(--mob-tone-info-bg);
    border: 1px solid var(--mob-tone-info-border);
    border-radius: 10px;
    color: var(--mob-tone-neutral-fg);
}
.mob-po-queue-banner-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.mob-po-queue-icon {
    font-size: 18px;
    flex-shrink: 0;
}
.mob-po-queue-text {
    flex: 1;
    min-width: 0;
}
.mob-po-queue-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--mob-tone-info-fg);
}
.mob-po-queue-sub {
    font-size: 11px;
    color: var(--mobile-text-muted);
    margin-top: 2px;
}
.mob-po-queue-err {
    font-size: 11px;
    color: var(--mob-tone-danger-fg);
    margin-top: 4px;
    word-break: break-word;
}
.mob-po-queue-retry {
    background: var(--mob-tone-info-bg);
    border: 1px solid var(--mob-tone-info-border);
    color: var(--mob-tone-info-fg);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
}
.mob-po-queue-retry:disabled {
    opacity: 0.6;
    cursor: progress;
}

/* Card scaffolding */
.mob-po-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--mobile-text-muted);
    border-bottom: 1px solid var(--mobile-border);
}
.mob-po-card-meta {
    color: var(--mobile-text-secondary);
    text-transform: none;
    font-weight: 600;
    letter-spacing: 0;
}
.mob-po-card-body { padding: 12px 14px; }
.mob-po-card-line {
    font-size: 13px;
    color: var(--mobile-text-secondary);
    line-height: 1.4;
}
.mob-po-card-line.strong { color: var(--mobile-text); font-weight: 600; font-size: 14px; }

.mob-po-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (max-width: 480px) { .mob-po-grid { grid-template-columns: 1fr; } }
.mob-po-half {}

.mob-po-kv {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 13px;
    color: var(--mobile-text-secondary);
}
.mob-po-kv strong { color: var(--mobile-text); font-weight: 600; }
.mob-po-kv-total {
    border-top: 1px solid var(--mobile-border);
    padding-top: 10px;
    margin-top: 6px;
    font-size: 15px;
    font-weight: 700;
}
.mob-po-kv-total strong { color:var(--mob-accent-on-surface); }

/* Progress bar */
.mob-po-progress {
    height: 8px;
    background: var(--mobile-border);
    border-radius: 999px;
    overflow: hidden;
    margin: 10px 14px 4px;
}
.mob-po-progress-sm { height: 6px; margin: 6px 0 0; }
.mob-po-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--mobile-accent) 0%, #e74c3c 100%);
    border-radius: 999px;
    transition: width 0.3s ease;
}
.mob-po-progress-pct {
    padding: 2px 14px 12px;
    font-size: 12px;
    color: var(--mobile-text-muted);
    text-align: right;
}

/* Generations timeline */
.mob-po-timeline {
    padding: 10px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.mob-po-timeline-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.mob-po-tl-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--mobile-accent);
    margin-top: 4px;
    flex: 0 0 auto;
    box-shadow: 0 0 0 3px var(--mobile-card), 0 0 0 4px var(--mobile-border);
}
.mob-po-tl-success .mob-po-tl-dot { background: #0f7a55; box-shadow: 0 0 0 3px var(--mobile-card), 0 0 0 4px rgba(16,185,129,0.3); }
.mob-po-tl-warning .mob-po-tl-dot { background: #f59e0b; box-shadow: 0 0 0 3px var(--mobile-card), 0 0 0 4px rgba(245,158,11,0.3); }
.mob-po-tl-danger  .mob-po-tl-dot { background: #dc2626; box-shadow: 0 0 0 3px var(--mobile-card), 0 0 0 4px rgba(239,68,68,0.3); }
.mob-po-tl-info    .mob-po-tl-dot { background: #3b82f6; box-shadow: 0 0 0 3px var(--mobile-card), 0 0 0 4px rgba(59,130,246,0.3); }
.mob-po-tl-body { flex: 1; min-width: 0; text-align: left; }
.mob-po-tl-title { font-size: 13px; font-weight: 600; color: var(--mobile-text); }
.mob-po-tl-meta { font-size: 12px; color: var(--mobile-text-muted); margin-top: 2px; }
/* Generation cards are real <button>s now (clickable picker) — strip
   default UA chrome and add an active-state ring for the viewing gen. */
button.mob-po-timeline-item {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 8px 10px;
    width: 100%;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
    transition: background 0.15s ease, border-color 0.15s ease;
}
button.mob-po-timeline-item:hover { background: rgba(59,130,246,0.04); }
button.mob-po-timeline-item:active { background: var(--mob-tone-info-bg); }
button.mob-po-timeline-item.is-active {
    background: rgba(59,130,246,0.08);
    border-color: var(--mob-tone-info-border);
}
.mob-po-tl-active {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    color: var(--mob-tone-info-fg);
    background: var(--mob-tone-info-bg);
    vertical-align: middle;
}

/* Line items */
.mob-po-lines {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
.mob-po-line {
    padding: 12px 14px;
    border-bottom: 1px solid var(--mobile-border);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease, transform 0.2s ease;
    position: relative;
    background: var(--mobile-card);
}
.mob-po-line:last-child { border-bottom: 0; }
.mob-po-line:active { background: rgba(127,127,127,0.06); }
.mob-po-line.mob-po-line-swiped { transform: translateX(-72px); background: rgba(239,68,68,0.06); }
.mob-po-line-main {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.mob-po-line-num {
    flex: 0 0 auto;
    min-width: 32px;
    padding: 3px 8px;
    background: var(--mobile-accent-light);
    color:var(--mob-accent-on-surface);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    line-height: 1.2;
}
.mob-po-line-body { flex: 1; min-width: 0; }
.mob-po-line-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--mobile-text);
    line-height: 1.3;
}
.mob-po-line-sub {
    margin-top: 3px;
    font-size: 12px;
    color: var(--mobile-text-muted);
    line-height: 1.3;
}
.mob-po-line-meta {
    flex: 0 0 auto;
    text-align: right;
}
.mob-po-line-cost {
    font-size: 14px;
    font-weight: 700;
    color: var(--mobile-text);
}
.mob-po-line-cost-sub {
    font-size: 11px;
    color: var(--mobile-text-muted);
    margin-top: 2px;
}
/* Vendor list price (strikethrough) shown next to negotiated cost */
.mob-po-line-list {
    text-decoration: line-through;
    color: var(--mobile-text-muted);
    margin-right: 2px;
}
.mob-po-line-net {
    color: var(--mob-tone-success-fg);
    font-weight: 700;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
/* Per-line comments (matches desktop's line-comments column) */
.mob-po-line-comments {
    margin-top: 6px;
    padding: 6px 8px;
    background: rgba(59,130,246,0.06);
    border-left: 2px solid rgba(59,130,246,0.5);
    border-radius: 4px;
    font-size: 12px;
    color: var(--mobile-text-secondary);
    line-height: 1.4;
    word-break: break-word;
}
/* Return-line accent (negative ordered qty) */
.mob-po-line--return {
    background: linear-gradient(to right, rgba(239,68,68,0.06), transparent 60%);
    border-left: 3px solid #ef4444;
}
.mob-po-line--return .mob-po-line-num {
    color: var(--mob-tone-danger-fg);
    font-weight: 700;
}
.mob-po-line-return-label {
    color: var(--mob-tone-danger-fg) !important;
    font-weight: 700 !important;
}
.mob-po-line-recv {
    margin-top: 8px;
    padding-left: 42px;
}
.mob-po-line-recv-label {
    font-size: 11px;
    color: var(--mobile-text-muted);
    font-weight: 600;
}
.mob-po-mtr-btn {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    background: var(--mob-tone-purple-bg);
    color: var(--mob-tone-purple-fg);
    border: 0;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}
.mob-po-mtr-btn:active { background: rgba(124,58,237,0.22); }

/* Sidebar tab buttons */
.mob-po-side-tabs {
    display: flex;
    gap: 8px;
    padding: 12px 14px;
}
.mob-po-side-tab {
    flex: 1;
    padding: 10px;
    background: var(--mobile-bg);
    border: 1px solid var(--mobile-border);
    border-radius: 10px;
    color: var(--mobile-text);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
}
.mob-po-side-tab:active { background: var(--mobile-accent-light); border-color:var(--mob-accent-on-surface); }

/* Sticky action bar (anchored to overlay bottom) */
.mob-po-sticky-actions {
    position: sticky;
    bottom: 0;
    background: var(--mobile-card);
    border-top: 1px solid var(--mobile-border);
    padding: 10px 12px calc(10px + var(--mobile-safe-bottom));
    display: flex;
    gap: 8px;
    z-index: 5;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.1);
}
.mob-po-act {
    flex: 1;
    min-height: 48px;
    background: var(--mobile-bg);
    color: var(--mobile-text);
    border: 1px solid var(--mobile-border);
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
}
.mob-po-act:active { background: var(--mobile-accent-light); }
.mob-po-act-primary {
    background: var(--mobile-accent);
    color: #fff;
    border-color:var(--mob-accent-on-surface);
    flex: 1.6;
}
.mob-po-act-primary:active { background: #c0392b; border-color: #c0392b; }

/* Make the 5-button sticky bar (Receive/Edit/Print/Email/More) breathe.
   Smaller font + tighter padding so labels fit without wrapping. */
.mob-po-sticky-actions .mob-po-act { font-size: 13px; padding: 0 6px; }
.mob-po-sticky-actions .mob-po-act-primary { flex: 1.4; }
.mob-po-actionbar-spacer { height: 80px; }

/* Hero meta grid (matches the SO hero pattern) */
.mob-po-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 16px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.18);
}
.mob-po-hero-meta-item {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.mob-po-hero-meta-wide { grid-column: 1 / -1; }
.mob-po-hero-meta-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.75;
}
.mob-po-hero-meta-val {
    font-size: 13px;
    font-weight: 600;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mob-po-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dashed currentColor;
}
.mob-po-link:active { opacity: 0.7; }

.mob-po-hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}
.mob-po-hero-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    background: rgba(255,255,255,0.18);
    color: #fff;
}
.mob-po-hero-badge--ok { background: rgba(34,197,94,0.30); }
.mob-po-hero-badge--warn { background: rgba(234,179,8,0.30); }

/* Order-details grid (mirrors desktop wb-meta-grid). 2-column on phones,
   3-column on tablets so all 20+ rows fit without scrolling forever. */
.mob-po-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 14px;
}
@media (min-width: 768px) { .mob-po-detail-grid { grid-template-columns: 1fr 1fr 1fr; } }
.mob-po-detail-grid-item { min-width: 0; }
.mob-po-detail-grid-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--mobile-text-muted);
}
.mob-po-detail-grid-val {
    font-size: 14px;
    font-weight: 600;
    color: var(--mobile-text);
    margin-top: 2px;
    word-break: break-word;
}

/* Notes blocks (read-only, color-coded by type to match desktop) */
.mob-po-note-block {
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--mobile-bg);
    border-left: 3px solid var(--mobile-border);
    margin-bottom: 8px;
}
.mob-po-note-block:last-child { margin-bottom: 0; }
.mob-po-note-block--shipping { border-left-color: var(--mob-tone-info-fg); background: rgba(59,130,246,0.06); }
.mob-po-note-block--internal { border-left-color: var(--mob-tone-warn-fg); background: rgba(245,158,11,0.06); }
.mob-po-note-block--buyer { border-left-color: #8b5cf6; background: rgba(139,92,246,0.06); }
.mob-po-note-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mobile-text-muted);
    margin-bottom: 4px;
}
.mob-po-note-text {
    font-size: 13px;
    color: var(--mobile-text);
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.45;
}

/* Address cards (Ship From / Remit To / Ship To). Render as a 3-up grid
   on tablets, stacked on phones — matches desktop's address-card row. */
.mob-po-grid-3 { grid-template-columns: 1fr; }
@media (min-width: 600px) { .mob-po-grid-3 { grid-template-columns: 1fr 1fr 1fr; } }
.mob-po-addr-card .mob-po-card-header { background: var(--mobile-bg); }
.mob-po-addr-card--from .mob-po-card-header { border-left: 3px solid #3b82f6; }
.mob-po-addr-card--remit .mob-po-card-header { border-left: 3px solid #10b981; }
.mob-po-addr-card--to .mob-po-card-header { border-left: 3px solid #f59e0b; }
.mob-po-addr-id {
    font-size: 11px;
    font-weight: 600;
    color: var(--mobile-text-muted);
    margin-bottom: 4px;
}
.mob-po-addr {
    font-size: 14px;
    font-weight: 700;
    color: var(--mobile-text);
}
.mob-po-addr-sub {
    font-size: 13px;
    color: var(--mobile-text-secondary);
    margin-top: 4px;
    line-height: 1.4;
}

/* Vendor part + heat numbers in the line item header. The base
   .mob-po-mtr-btn rule lives near the line-item styles above; only the
   --sm modifier (used for the stacked extra-heats row) is added here. */
.mob-po-line-prod {
    font-weight: 600;
    color: var(--mobile-text-secondary);
}
.mob-po-line-vp {
    color: var(--mobile-text-muted);
    font-size: 11px;
}
.mob-po-line-heats {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}
.mob-po-mtr-btn--sm { padding: 1px 6px; font-size: 10px; }

/* Sub-rows in the totals breakdown (Freight In/Out, Handling In/Out) */
.mob-po-kv-sub {
    padding-left: 12px;
    color: var(--mobile-text-muted);
    font-size: 12px;
}
.mob-po-kv-sub strong { color: var(--mobile-text-secondary); font-weight: 500; }

/* ---- Receiving sheet ---- */
.mob-recv-summary {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--mobile-bg);
    border-bottom: 1px solid var(--mobile-border);
}
.mob-recv-summary-pct {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--mobile-accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
}
.mob-recv-summary-info { flex: 1; min-width: 0; font-size: 14px; color: var(--mobile-text); font-weight: 600; }
.mob-recv-summary-mini { font-size: 12px; color: var(--mobile-text-muted); font-weight: 500; margin-top: 2px; }

.mob-recv-actions-row {
    display: flex;
    gap: 8px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--mobile-border);
}
.mob-recv-quick {
    flex: 1;
    min-height: 40px;
    font-size: 13px;
}

.mob-recv-lines {
    list-style: none;
    margin: 0;
    padding: 0;
}
.mob-recv-line {
    padding: 14px 16px;
    border-bottom: 1px solid var(--mobile-border);
}
.mob-recv-line:last-child { border-bottom: 0; }
.mob-recv-line-header { margin-bottom: 10px; }
.mob-recv-line-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--mobile-text);
    line-height: 1.3;
}
.mob-recv-line-sub {
    font-size: 12px;
    color: var(--mobile-text-muted);
    margin-top: 3px;
    line-height: 1.4;
}
.mob-recv-line-qty {
    display: flex;
    gap: 8px;
    align-items: center;
}
.mob-recv-step {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--mobile-border);
    background: var(--mobile-bg);
    color: var(--mobile-text);
    font-size: 22px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
}
.mob-recv-step:active { background: var(--mobile-accent-light); border-color:var(--mob-accent-on-surface); }
.mob-recv-qty-input {
    flex: 1;
    min-width: 0;
    height: 44px;
    border: 1px solid var(--mobile-border);
    border-radius: 10px;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    color: var(--mobile-text);
    background: var(--mobile-bg);
    -webkit-appearance: none;
    font-family: inherit;
}
.mob-recv-qty-input:focus { outline: none; border-color:var(--mob-accent-on-surface); box-shadow: 0 0 0 3px var(--mobile-accent-light); }
.mob-recv-fill {
    flex: 0 0 auto;
    height: 44px;
    padding: 0 10px;
    border: 1px solid var(--mobile-accent);
    background: var(--mobile-accent-light);
    color:var(--mob-accent-on-surface);
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
}
.mob-recv-photos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 8px;
    margin-top: 10px;
}
.mob-recv-photo-add {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    width: 100%;
    gap: 4px;
    padding: 6px;
    border: 1px dashed var(--mobile-border);
    border-radius: 12px;
    background: var(--mobile-bg);
    color: var(--mobile-text-secondary);
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}
.mob-recv-photo-add-icon { font-size: 22px; line-height: 1; }
.mob-recv-photo-add-label { line-height: 1.2; }
.mob-recv-photo-add:active,
.mob-recv-photo-add:focus-within { background: var(--mobile-accent-light); border-color:var(--mob-accent-on-surface); color:var(--mob-accent-on-surface); }
.mob-recv-photo-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--mobile-border);
    background: var(--mobile-bg);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    cursor: zoom-in;
    -webkit-tap-highlight-color: transparent;
    transition: transform 120ms ease, box-shadow 120ms ease;
}
.mob-recv-photo-thumb:focus-visible { outline: 2px solid var(--mobile-accent); outline-offset: 2px; }
.mob-recv-photo-thumb:active { transform: scale(0.97); }
.mob-recv-photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mob-recv-photo-x {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    border: 0;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
}
.mob-recv-photo-x:hover { background: rgba(0, 0, 0, 0.78); }

/* ---- Receiving photo fullscreen lightbox ---- */
.mob-recv-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.94);
    z-index: 1000000;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transition: opacity 180ms ease;
    -webkit-user-select: none;
    user-select: none;
    padding-top: env(safe-area-inset-top, 0);
    padding-bottom: env(safe-area-inset-bottom, 0);
}
.mob-recv-lightbox.active { opacity: 1; }
.mob-recv-lb-close {
    position: absolute;
    top: calc(env(safe-area-inset-top, 0) + 12px);
    right: 12px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    border: 0;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    z-index: 3;
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
}
.mob-recv-lb-close:hover { background: rgba(255, 255, 255, 0.24); }
.mob-recv-lb-counter {
    position: absolute;
    top: calc(env(safe-area-inset-top, 0) + 18px);
    left: 0;
    right: 0;
    text-align: center;
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    font-weight: 600;
    pointer-events: none;
    z-index: 1;
}
.mob-recv-lb-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    border: 0;
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
}
.mob-recv-lb-nav.prev { left: 12px; }
.mob-recv-lb-nav.next { right: 12px; }
.mob-recv-lb-nav:hover { background: rgba(255, 255, 255, 0.24); }
.mob-recv-lightbox.single .mob-recv-lb-nav,
.mob-recv-lightbox.single .mob-recv-lb-dots { display: none; }
.mob-recv-lb-stage {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    touch-action: none;
}
.mob-recv-lb-stage img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
    cursor: zoom-in;
    transition: transform 220ms ease;
    will-change: transform;
}
.mob-recv-lb-stage img.zoomed {
    transform: scale(2);
    cursor: zoom-out;
}
.mob-recv-lb-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 12px 0 calc(12px + env(safe-area-inset-bottom, 0));
}
.mob-recv-lb-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    transition: background 200ms ease, transform 200ms ease;
}
.mob-recv-lb-dot.active {
    background: #fff;
    transform: scale(1.15);
}
.mob-recv-submit-bar {
    position: sticky;
    bottom: 0;
    display: flex;
    gap: 8px;
    padding: 12px 16px calc(12px + var(--mobile-safe-bottom));
    background: var(--mobile-card);
    border-top: 1px solid var(--mobile-border);
    z-index: 1;
}
.mob-recv-submit-bar .mob-form-submit { flex: 2; }
.mob-recv-submit-bar .mob-po-btn-secondary { flex: 1; }

/* ---- Line item editor ---- */
.mob-po-line-edit-product {
    background: var(--mobile-bg);
    padding: 12px;
    border-radius: 10px;
    margin-bottom: 16px;
}
.mob-po-line-edit-name { font-size: 15px; font-weight: 600; color: var(--mobile-text); }
.mob-po-line-edit-sub { font-size: 12px; color: var(--mobile-text-muted); margin-top: 3px; }
.mob-po-line-edit-totals {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-top: 1px solid var(--mobile-border);
    border-bottom: 1px solid var(--mobile-border);
    margin: 0 0 16px;
    font-size: 14px;
    color: var(--mobile-text-secondary);
}
.mob-po-line-edit-totals strong { color:var(--mob-accent-on-surface); font-weight: 700; font-size: 16px; }
.mob-po-line-edit-hint {
    font-size: 11px;
    color: var(--mobile-text-muted);
    margin-top: 12px;
    line-height: 1.4;
    text-align: center;
}

/* ---- Notes panel host ---- */
.mob-po-notes-host {
    min-height: 240px;
    background: var(--mobile-bg);
    border-radius: 10px;
    padding: 4px;
}
.mob-po-notes-host .mob-po-notes-host { padding: 0; }

/* PO list pagination sentinel */
.mob-po-load-more {
    padding: 18px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--mobile-text-muted);
    font-size: 13px;
    font-weight: 600;
}
.mob-po-load-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--mobile-border);
    border-top-color:var(--mob-accent-on-surface);
    border-radius: 50%;
    animation: mob-spin 0.7s linear infinite;
}
.mob-po-load-end {
    padding: 18px 12px;
    text-align: center;
    color: var(--mobile-text-muted);
    font-size: 12px;
    font-style: italic;
}
@keyframes mob-spin { to { transform: rotate(360deg); } }

/* ============================================================================
   MOBILE CUSTOMERS — Native customer detail, hero, segmented tabs, action bar,
   AR aging buckets, contacts, portal users, filter chips, create wizard.
   ============================================================================ */

/* ----- Loading & spinner ----- */
.mob-cust-loading {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 60px 20px; gap: 14px; color: var(--mob-text-muted, var(--mobile-text-muted));
    font-size: 14px;
}
.mob-cust-loading-inline {
    padding: 18px; text-align: center; color: var(--mob-text-muted, var(--mobile-text-muted));
    font-size: 13px;
}
.mob-cust-empty-inline {
    padding: 16px; text-align: center; color: var(--mob-text-muted, var(--mobile-text-muted));
    font-size: 13px;
}
.mob-cust-spinner {
    width: 30px; height: 30px;
    border: 3px solid var(--mob-border, var(--mobile-border));
    border-top-color:var(--mob-accent-on-surface);
    border-radius: 50%;
    animation: mobCustSpin 0.9s linear infinite;
}
@keyframes mobCustSpin { to { transform: rotate(360deg); } }

/* ----- Detail container ----- */
.mob-cust-detail {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding-bottom: calc(70px + env(safe-area-inset-bottom)); /* room for bottom action bar */
}

/* ----- Hero ----- */
.mob-cust-hero {
    background: linear-gradient(180deg, var(--mob-card, var(--mobile-card)) 0%, var(--mob-bg, var(--mobile-bg)) 100%);
    padding: 18px 16px 14px;
    border-bottom: 1px solid var(--mob-border, var(--mobile-border));
}
.mob-cust-hero-top { display: flex; align-items: center; gap: 14px; }
.mob-cust-avatar {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%);
    color: white; font-size: 24px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex: 0 0 auto;
}
.mob-cust-hero-info { flex: 1 1 auto; min-width: 0; }
.mob-cust-name {
    font-size: 19px; font-weight: 700;
    color: var(--mob-text, var(--mobile-text));
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mob-cust-id {
    font-size: 13px;
    color: var(--mob-text-muted, var(--mobile-text-muted));
    margin-top: 2px;
}
.mob-cust-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.mob-cust-badge {
    display: inline-flex; align-items: center;
    padding: 3px 9px; font-size: 11px; font-weight: 600;
    border-radius: 999px; line-height: 1.3;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.mob-cust-badge.badge-billto    { background: var(--mob-tone-info-bg); color: var(--mob-tone-info-fg); }
.mob-cust-badge.badge-shipto    { background: var(--mob-tone-success-bg); color: var(--mob-tone-success-fg); }
.mob-cust-badge.badge-prospect  { background: var(--mob-tone-warn-bg); color: var(--mob-tone-orange-fg); }
.mob-cust-badge.badge-cod       { background: var(--mob-tone-danger-bg);  color: var(--mob-tone-danger-fg); }
.mob-cust-badge.badge-hold      { background: var(--mob-tone-danger-bg);  color: var(--mob-tone-danger-fg); }
.mob-cust-badge.badge-tax       { background: var(--mob-tone-purple-bg); color: var(--mob-tone-purple-fg); }
.mob-cust-badge.badge-web       { background: var(--mob-tone-info-bg); color: var(--mob-tone-info-fg); }
/* Saved payment methods badge (CardVault) — rendered as a tappable button */
.mob-cust-badge.badge-cards,
.mob-cust-badge.badge-cards-pending,
.mob-cust-badge.badge-cards-none {
    border: none; cursor: pointer; font-family: inherit;
    padding: 3px 9px; font-size: 11px; font-weight: 600;
    border-radius: 999px; line-height: 1.3;
    text-transform: uppercase; letter-spacing: 0.04em;
    -webkit-appearance: none; appearance: none;
}
.mob-cust-badge.badge-cards         { background: var(--mob-tone-success-bg); color: var(--mob-tone-success-fg); }
.mob-cust-badge.badge-cards-pending { background: var(--mob-tone-warn-bg); color: var(--mob-tone-orange-fg); }
.mob-cust-badge.badge-cards-none    { background: var(--mob-tone-neutral-bg); color: var(--mob-tone-neutral-fg); }

.mob-cust-quickstats {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 8px; margin-top: 14px;
}
.mob-cust-stat {
    background: var(--mob-card, var(--mobile-card));
    border: 1px solid var(--mob-border, var(--mobile-border));
    border-radius: 10px;
    padding: 8px 10px;
    text-align: center;
}
.mob-cust-stat-label {
    font-size: 10px; font-weight: 600;
    color: var(--mob-text-muted, var(--mobile-text-muted));
    text-transform: uppercase; letter-spacing: 0.05em;
}
.mob-cust-stat-value {
    font-size: 15px; font-weight: 700;
    color: var(--mob-text, var(--mobile-text));
    margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mob-cust-stat-value.mob-cust-good { color: var(--mob-tone-success-fg); }
.mob-cust-stat-value.mob-cust-bad  { color: var(--mob-tone-danger-fg); }
.mob-cust-stat-value.mob-cust-stat-sm { font-size: 12px; }

.mob-cust-hero-actions { display: flex; gap: 10px; margin-top: 14px; }
.mob-cust-hero-act {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    gap: 3px; padding: 9px 4px;
    background: var(--mob-card, var(--mobile-card));
    border: 1px solid var(--mob-border, var(--mobile-border));
    border-radius: 12px;
    color:var(--mob-accent-on-surface);
    font-size: 12px; font-weight: 600;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
.mob-cust-hero-act:active { background: rgba(99,102,241,0.08); }
.mob-cust-hero-act-icon { font-size: 18px; line-height: 1; }

/* ----- Segmented tab bar (horizontal scrollable) ----- */
.mob-cust-segbar {
    display: flex; gap: 4px;
    padding: 8px 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: var(--mob-bg, var(--mobile-bg));
    border-bottom: 1px solid var(--mob-border, var(--mobile-border));
    position: sticky; top: 0; z-index: 10;
}
.mob-cust-segbar::-webkit-scrollbar { display: none; }
.mob-cust-seg {
    flex: 0 0 auto;
    padding: 7px 14px;
    background: transparent;
    border: 1px solid var(--mob-border, var(--mobile-border));
    border-radius: 999px;
    color: var(--mob-text-secondary, var(--mobile-text-muted));
    font-size: 13px; font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.mob-cust-seg[aria-selected="true"] {
    background: var(--mob-accent, var(--mobile-accent));
    border-color:var(--mob-accent-on-surface);
    color: white;
}
.mob-cust-seg:not([aria-selected="true"]):active { background: rgba(127,127,127,0.08); }

/* ----- Tab panel ----- */
.mob-cust-panel { padding-bottom: 16px; }
.mob-cust-tabbody {
    display: flex; flex-direction: column; gap: 12px;
    padding: 12px 0;
}

/* ----- Cards ----- */
.mob-cust-card {
    background: var(--mob-card, var(--mobile-card));
    border-top: 1px solid var(--mob-border, var(--mobile-border));
    border-bottom: 1px solid var(--mob-border, var(--mobile-border));
    overflow: hidden;
}
.mob-cust-card-flush > .mob-cust-card-title { border-bottom: 1px solid var(--mob-border-soft, var(--mobile-border)); }
.mob-cust-card-warn { background: rgba(245,158,11,0.06); }
.mob-cust-card-title {
    padding: 12px 16px 8px;
    font-size: 11px; font-weight: 700;
    color: var(--mob-text-muted, var(--mobile-text-muted));
    text-transform: uppercase; letter-spacing: 0.06em;
}
.mob-cust-card-action {
    display: block;
    padding: 10px 16px;
    color:var(--mob-accent-on-surface);
    font-size: 13px; font-weight: 600;
    text-decoration: none;
    border-top: 1px solid var(--mob-border-soft, var(--mobile-border));
    -webkit-tap-highlight-color: transparent;
}
.mob-cust-row {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--mob-border-soft, var(--mobile-border));
    min-height: 36px;
}
.mob-cust-row:last-child { border-bottom: 0; }
.mob-cust-row-label {
    flex: 0 0 38%; font-size: 12px; font-weight: 600;
    color: var(--mob-text-muted, var(--mobile-text-muted));
    text-transform: uppercase; letter-spacing: 0.04em;
    line-height: 1.45;
}
.mob-cust-row-value {
    flex: 1 1 auto;
    font-size: 14px;
    color: var(--mob-text, var(--mobile-text));
    overflow-wrap: anywhere;
    line-height: 1.4;
}
.mob-cust-row-value a { color:var(--mob-accent-on-surface); text-decoration: none; }
.mob-cust-multiline { white-space: pre-line; padding: 12px 16px; font-size: 14px; line-height: 1.45; color: var(--mob-text, var(--mobile-text)); }
.mob-cust-stat-grid {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 10px; padding: 10px 16px 14px;
}
.mob-cust-stat-grid > div {
    background: var(--mob-bg, var(--mobile-bg));
    border-radius: 8px;
    padding: 10px;
    border: 1px solid var(--mob-border-soft, var(--mobile-border));
}
.mob-cust-mb { margin-bottom: 12px; }

/* ----- Aging buckets ----- */
.mob-cust-aging-grid {
    display: grid; grid-template-columns: repeat(5, 1fr);
    gap: 6px; padding: 8px 12px 8px;
}
.mob-cust-aging-bucket {
    display: flex; flex-direction: column;
    background: var(--mob-bg, var(--mobile-bg));
    border: 1px solid var(--mob-border, var(--mobile-border));
    border-radius: 8px;
    padding: 8px 4px;
    text-align: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
}
.mob-cust-aging-bucket:active { background: rgba(99,102,241,0.10); }
.mob-cust-aging-bucket.is-overdue {
    border-color: var(--mob-tone-danger-border);
    background: rgba(220,38,38,0.06);
}
.mob-cust-aging-label {
    font-size: 10px; font-weight: 600;
    color: var(--mob-text-muted, var(--mobile-text-muted));
    text-transform: uppercase; letter-spacing: 0.04em;
}
.mob-cust-aging-value {
    font-size: 12px; font-weight: 700;
    color: var(--mob-text, var(--mobile-text));
    margin-top: 4px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mob-cust-aging-bucket.is-overdue .mob-cust-aging-value { color: var(--mob-tone-danger-fg); }
.mob-cust-aging-meta {
    padding: 8px 16px 14px;
    font-size: 12px;
    color: var(--mob-text-muted, var(--mobile-text-muted));
}
.mob-cust-aging-drill {
    padding: 24px 16px;
    text-align: center;
}
.mob-cust-aging-drill-amt { font-size: 32px; font-weight: 700; color: var(--mob-text, var(--mobile-text)); }
.mob-cust-aging-drill-label { font-size: 13px; color: var(--mob-text-muted, var(--mobile-text-muted)); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.05em; }

/* ----- Contact tap rows ----- */
.mob-cust-contact-row {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--mob-border-soft, var(--mobile-border));
    color: var(--mob-text, var(--mobile-text));
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    min-height: 56px;
}
.mob-cust-contact-row:last-child { border-bottom: 0; }
.mob-cust-contact-row:active { background: rgba(99,102,241,0.06); }
.mob-cust-contact-icon { flex: 0 0 auto; font-size: 22px; line-height: 1; }
.mob-cust-contact-body { flex: 1 1 auto; min-width: 0; }
.mob-cust-contact-primary { font-size: 15px; font-weight: 600; color: var(--mob-text, var(--mobile-text)); }
.mob-cust-contact-secondary { font-size: 12px; color: var(--mob-text-muted, var(--mobile-text-muted)); margin-top: 2px; }
.mob-cust-contact-action {
    flex: 0 0 auto;
    color:var(--mob-accent-on-surface);
    font-size: 13px; font-weight: 600;
}

/* ----- CRM activity & reminders ----- */
.mob-cust-activity-list { list-style: none; margin: 0; padding: 0; }
.mob-cust-activity-row {
    display: flex; gap: 12px; padding: 12px 16px;
    border-bottom: 1px solid var(--mob-border-soft, var(--mobile-border));
}
.mob-cust-activity-row:last-child { border-bottom: 0; }
.mob-cust-activity-row.is-overdue { background: rgba(220,38,38,0.05); }
.mob-cust-activity-icon { flex: 0 0 auto; font-size: 18px; }
.mob-cust-activity-body { flex: 1 1 auto; min-width: 0; }
.mob-cust-activity-title { font-size: 14px; font-weight: 600; color: var(--mob-text, var(--mobile-text)); text-transform: capitalize; }
.mob-cust-activity-notes { font-size: 13px; color: var(--mob-text-secondary, var(--mobile-text)); margin-top: 4px; line-height: 1.4; }
.mob-cust-activity-meta { font-size: 11px; color: var(--mob-text-muted, var(--mobile-text-muted)); margin-top: 4px; }

.mob-cust-crm-actions {
    display: flex; flex-wrap: wrap; gap: 8px;
    padding: 12px 16px;
}
.mob-cust-mini-btn {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 7px 12px;
    background: var(--mob-card, var(--mobile-card));
    border: 1px solid var(--mob-border, var(--mobile-border));
    border-radius: 999px;
    color: var(--mob-text, var(--mobile-text));
    font-size: 12px; font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
}
.mob-cust-mini-btn:active { background: rgba(99,102,241,0.10); }
.mob-cust-mini-btn.destructive { color: var(--mob-tone-danger-fg); border-color: var(--mob-tone-danger-border); }

/* ----- Forms (sheets / wizard) ----- */
.mob-cust-form { display: flex; flex-direction: column; gap: 14px; padding: 8px 4px 24px; }
.mob-cust-form-label {
    display: flex; flex-direction: column; gap: 6px;
    font-size: 12px; font-weight: 600;
    color: var(--mob-text-muted, var(--mobile-text-muted));
    text-transform: uppercase; letter-spacing: 0.05em;
}
.mob-cust-form-label-inline {
    display: flex; align-items: center; gap: 8px;
    font-size: 14px; font-weight: 500;
    color: var(--mob-text, var(--mobile-text));
}
.mob-cust-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mob-cust-input {
    width: 100%;
    padding: 11px 12px;
    background: var(--mob-bg, var(--mobile-bg));
    border: 1px solid var(--mob-border, var(--mobile-border));
    border-radius: 10px;
    color: var(--mob-text, var(--mobile-text));
    font-size: 16px;
    font-family: inherit;
    -webkit-appearance: none;
    outline: none;
    box-sizing: border-box;
}
.mob-cust-input:focus { border-color:var(--mob-accent-on-surface); box-shadow: 0 0 0 3px rgba(99,102,241,0.18); }
.mob-cust-input[type="date"] { min-height: 44px; }
textarea.mob-cust-input { min-height: 90px; resize: vertical; }
.mob-cust-action-primary {
    display: block; width: 100%;
    padding: 13px 16px;
    background: var(--mob-accent, var(--mobile-accent));
    border: 0;
    border-radius: 12px;
    color: white;
    font-size: 15px; font-weight: 700;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
    margin-top: 4px;
}
.mob-cust-action-primary:disabled { opacity: 0.6; cursor: wait; }

/* ----- Wizard nav ----- */
.mob-cust-wizard-progress {
    font-size: 11px; font-weight: 700;
    color: var(--mob-text-muted, var(--mobile-text-muted));
    text-transform: uppercase; letter-spacing: 0.08em;
    margin-bottom: 12px; text-align: center;
}
.mob-cust-wizard-nav {
    display: flex; gap: 10px; align-items: center;
}
.mob-cust-wizard-nav .mob-cust-mini-btn { flex: 0 0 auto; }
.mob-cust-wizard-nav .mob-cust-action-primary { flex: 1 1 auto; margin-top: 0; }

/* ----- Bottom action bar (sticky) ----- */
.mob-cust-actionbar {
    position: fixed;
    left: 0; right: 0;
    bottom: calc(var(--mobile-tab-height) + var(--mobile-safe-bottom));
    z-index: 9510;
    display: flex; gap: 6px;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    background: var(--mob-card, var(--mobile-card));
    border-top: 1px solid var(--mob-border, var(--mobile-border));
    box-shadow: 0 -4px 12px rgba(0,0,0,0.05);
}
/* Only float over the detail overlay */
.mob-detail-overlay .mob-cust-actionbar {
    bottom: 0;
    padding-bottom: max(8px, env(safe-area-inset-bottom));
}
.mob-cust-actionbar-btn {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 6px 4px;
    background: transparent; border: 0;
    color: var(--mob-text-secondary, var(--mobile-text-muted));
    font-size: 11px; font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
    border-radius: 8px;
}
.mob-cust-actionbar-btn:active { background: rgba(99,102,241,0.10); }
.mob-cust-actionbar-btn.primary { color:var(--mob-accent-on-surface); }
.mob-cust-actionbar-icon { font-size: 18px; line-height: 1; }

/* ----- Filter chips (list screen) ----- */
.mob-cust-filterbar {
    display: flex; gap: 6px;
    padding: 6px 12px 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: var(--mob-bg, var(--mobile-bg));
}
.mob-cust-filterbar::-webkit-scrollbar { display: none; }
.mob-cust-chip {
    flex: 0 0 auto;
    padding: 5px 11px;
    background: var(--mob-card, var(--mobile-card));
    border: 1px solid var(--mob-border, var(--mobile-border));
    border-radius: 999px;
    color: var(--mob-text-secondary, var(--mobile-text-muted));
    font-size: 12px; font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
    white-space: nowrap;
}
.mob-cust-chip.active {
    background: var(--mob-accent, var(--mobile-accent));
    border-color:var(--mob-accent-on-surface);
    color: white;
}
.mob-cust-chip-link {
    background: transparent;
    color:var(--mob-accent-on-surface);
    border-style: dashed;
}
.mob-cust-chip-clear { color: var(--mob-tone-danger-fg); border-color: var(--mob-tone-danger-border); }

/* ----- Load more ----- */
.mob-cust-loadmore {
    display: block; width: calc(100% - 24px);
    margin: 12px; padding: 12px;
    background: var(--mob-card, var(--mobile-card));
    border: 1px solid var(--mob-border, var(--mobile-border));
    border-radius: 10px;
    color:var(--mob-accent-on-surface);
    font-size: 14px; font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
}
.mob-cust-loadmore:active { background: rgba(99,102,241,0.08); }

/* ----- Part numbers list ----- */
.mob-cust-part-list { list-style: none; margin: 0; padding: 0; }
.mob-cust-part-row { padding: 10px 16px; border-bottom: 1px solid var(--mob-border-soft, var(--mobile-border)); }
.mob-cust-part-customer { font-size: 14px; font-weight: 700; color: var(--mob-text, var(--mobile-text)); font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; }
.mob-cust-part-our { font-size: 12px; color:var(--mob-accent-on-surface); margin-top: 2px; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; }
.mob-cust-part-comment { font-size: 11px; color: var(--mob-text-muted, var(--mobile-text-muted)); margin-top: 4px; }
.mob-cust-search-inline { padding: 10px 14px; }

/* ----- Portal users ----- */
.mob-cust-portal-list { list-style: none; margin: 0; padding: 0; }
.mob-cust-portal-row {
    padding: 12px 16px;
    border-bottom: 1px solid var(--mob-border-soft, var(--mobile-border));
}
.mob-cust-portal-info { margin-bottom: 8px; }
.mob-cust-portal-name { font-size: 14px; font-weight: 700; color: var(--mob-text, var(--mobile-text)); }
.mob-cust-portal-pri { display: inline-block; padding: 1px 6px; background: var(--mob-tone-info-bg); color: var(--mob-tone-info-fg); font-size: 10px; font-weight: 700; border-radius: 999px; vertical-align: middle; margin-left: 4px; }
.mob-cust-portal-email { font-size: 12px; color: var(--mob-text-secondary, var(--mobile-text-muted)); margin-top: 2px; }
.mob-cust-portal-meta { font-size: 11px; color: var(--mob-text-muted, var(--mobile-text-muted)); margin-top: 4px; }
.mob-cust-portal-active { color: var(--mob-tone-success-fg); font-weight: 600; }
.mob-cust-portal-inactive { color: var(--mob-tone-danger-fg); font-weight: 600; }
.mob-cust-portal-unv { color: var(--mob-tone-orange-fg); font-weight: 600; }
.mob-cust-portal-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }

/* ----- Notes & tasks host ----- */
.mob-cust-notes-host { padding: 4px 0 12px; min-height: 80px; }

/* ----- Ship-To location cards ----- */
.mob-cust-shipto {
    padding: 10px 0;
    border-top: 1px solid var(--mob-border-soft, var(--mobile-border));
}
.mob-cust-shipto:first-of-type { border-top: 0; padding-top: 4px; }
.mob-cust-shipto-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.mob-cust-shipto-name { font-size: 14px; font-weight: 700; color: var(--mob-text, var(--mobile-text)); }
.mob-cust-shipto-id { font-size: 11px; color: var(--mob-text-muted, var(--mobile-text-muted)); font-family: ui-monospace, SFMono-Regular, monospace; }
.mob-cust-shipto-line { font-size: 13px; color: var(--mob-text-secondary, var(--mobile-text-secondary)); line-height: 1.45; }
.mob-cust-shipto-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mob-cust-shipto-actions .mob-cust-mini-btn { text-decoration: none; }

/* ----- Recent Activity (orders/quotes/invoices) feed ----- */
.mob-cust-act-list { list-style: none; margin: 0; padding: 0; }
.mob-cust-act-row {
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
    padding: 10px 0;
    border-top: 1px solid var(--mob-border-soft, var(--mobile-border));
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(37,99,235,0.08);
}
.mob-cust-act-row:first-child { border-top: 0; }
.mob-cust-act-row:active { background: rgba(37,99,235,0.06); }
.mob-cust-act-main { min-width: 0; flex: 1; }
.mob-cust-act-id { font-size: 14px; font-weight: 700; color: var(--mob-text, var(--mobile-text)); }
.mob-cust-act-meta { font-size: 12px; color: var(--mob-text-muted, var(--mobile-text-muted)); margin-top: 2px; }
.mob-cust-act-amt { font-size: 14px; font-weight: 700; color: var(--mob-text, var(--mobile-text)); white-space: nowrap; }

/* ----- Per-contact role + tappable phone/email ----- */
.mob-cust-contact-role { color: var(--mob-text-muted, var(--mobile-text-muted)); font-weight: 400; font-size: 12px; }
.mob-cust-contact-link { color: var(--mob-tone-info-fg); text-decoration: none; }
.mob-cust-contact-link:active { text-decoration: underline; }

/* ----- Wizard wrap ----- */
.mob-cust-wizard { padding: 12px 4px; }

/* ----- AR drill-down invoice list ----- */
.mob-cust-mt { margin-top: 12px; }
.mob-cust-action-secondary {
    width: 100%;
    padding: 12px 16px;
    background: transparent;
    color: var(--mob-text-secondary, var(--mobile-text-muted));
    border: 1px solid var(--mob-border-soft, var(--mobile-border));
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.mob-cust-action-secondary:active { background: rgba(255,255,255,0.04); }
.mob-cust-inv-list { list-style: none; margin: 12px 0 0; padding: 0; }
.mob-cust-inv-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 12px 14px;
    border-top: 1px solid var(--mob-border-soft, var(--mobile-border));
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.mob-cust-inv-row:first-child { border-top: 0; }
.mob-cust-inv-row:active { background: rgba(255,255,255,0.04); }
.mob-cust-inv-main { flex: 1; min-width: 0; }
.mob-cust-inv-num { font-size: 14px; font-weight: 700; color: var(--mob-text, var(--mobile-text)); }
.mob-cust-inv-meta { font-size: 11px; color: var(--mob-text-muted, var(--mobile-text-muted)); margin-top: 2px; }
.mob-cust-inv-amt { font-size: 14px; font-weight: 700; color: var(--mob-tone-danger-fg); white-space: nowrap; }

/* ----- Part # actions ----- */
.mob-cust-part-actions { display: flex; gap: 6px; margin-top: 8px; }

/* ----- Contact row editable ----- */
.mob-cust-contact-row-editable { align-items: flex-start; }
.mob-cust-contact-actions { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; flex-shrink: 0; }

/* ==========================================================================
   UNIFIED SEARCH OVERLAY (Task #160)
   ========================================================================== */
.mob-search-topbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    padding-top: calc(10px + var(--mobile-safe-top));
    border-bottom: 1px solid var(--mobile-border);
    background: var(--mobile-bg);
    flex-shrink: 0;
}

.mob-search-mode {
    flex: 1;
    display: flex;
    background: var(--mobile-card);
    border: 1px solid var(--mobile-border);
    border-radius: 999px;
    padding: 3px;
    gap: 2px;
}

.mob-search-mode-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: transparent;
    border: none;
    color: var(--mobile-text-muted);
    font-size: 13px;
    font-weight: 600;
    padding: 8px 12px;
    border-radius: 999px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
    transition: background 0.18s, color 0.18s;
}
.mob-search-mode-btn.active {
    background: var(--mobile-accent);
    color: #fff;
    box-shadow: 0 2px 8px rgba(59,130,246,0.25);
}
.mob-search-mode-icon {
    width: 16px;
    height: 16px;
    display: inline-flex;
}
.mob-search-mode-icon svg { width: 100%; height: 100%; }

/* Search bar redesign */
.mob-search-bar {
    padding: 10px 12px;
    gap: 8px;
}
.mob-search-input-wrap {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    background: var(--mobile-card);
    border: 1px solid var(--mobile-border);
    border-radius: 12px;
    padding: 0 10px;
    height: 44px;
    transition: border-color 0.18s, box-shadow 0.18s;
}
.mob-search-input-wrap:focus-within {
    border-color:var(--mob-accent-on-surface);
    box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}
.mob-search-input-icon {
    width: 18px;
    height: 18px;
    color: var(--mobile-text-muted);
    flex-shrink: 0;
    margin-right: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.mob-search-input-icon svg { width: 100%; height: 100%; }
.mob-search-input-icon-exact {
    color:var(--mob-tone-success-fg);
}

.mob-search-bar input {
    flex: 1;
    height: 40px;
    background: transparent;
    border: none;
    color: var(--mobile-text);
    font-size: 16px;
    outline: none;
    -webkit-appearance: none;
    font-family: inherit;
    padding: 0;
}
.mob-search-bar input:focus { border: none; }

.mob-search-clear,
.mob-search-mic,
.mob-search-filter {
    background: transparent;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    color: var(--mobile-text-muted);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}
.mob-search-clear svg,
.mob-search-mic svg,
.mob-search-filter svg {
    width: 18px;
    height: 18px;
}
.mob-search-clear:active,
.mob-search-mic:active,
.mob-search-filter:active {
    background: rgba(255,255,255,0.06);
}
.mob-search-mic.listening {
    color: var(--mob-tone-danger-fg);
    animation: mob-mic-pulse 1.2s ease-in-out infinite;
}
@keyframes mob-mic-pulse {
    0%,100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}
.mob-search-filter {
    width: 44px;
    height: 44px;
    border: 1px solid var(--mobile-border);
    border-radius: 12px;
    background: var(--mobile-card);
}

.mob-search-overlay.voice-listening::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 30%, rgba(239,68,68,0.10), transparent 60%);
    pointer-events: none;
    animation: mob-mic-bg 1.4s ease-in-out infinite;
    z-index: 1;
}
@keyframes mob-mic-bg {
    0%,100% { opacity: 0.7; }
    50% { opacity: 1; }
}

/* Hint banner */
.mob-search-hint {
    padding: 8px 14px;
    margin: 6px 12px 0;
    background: rgba(16,185,129,0.10);
    border: 1px solid var(--mob-tone-success-border);
    color: var(--mobile-text);
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.4;
}
.mob-search-hint-badge {
    display: inline-block;
    background: var(--mob-solid-success);
    color: #fff;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    margin-right: 6px;
    vertical-align: 1px;
}

/* Suggestion pins */
.mob-search-section-action {
    float: right;
    background: transparent;
    border: none;
    color:var(--mob-accent-on-surface);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    text-transform: none;
    letter-spacing: 0;
    -webkit-tap-highlight-color: transparent;
}

.mob-search-pins {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 4px 12px 4px;
}
.mob-search-pin {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--mobile-card);
    border: 1px solid var(--mobile-border);
    border-radius: 12px;
    padding: 12px 6px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    color: var(--mobile-text);
    font-family: inherit;
    transition: transform 0.15s, background 0.15s;
}
.mob-search-pin:active {
    transform: scale(0.97);
    background: rgba(255,255,255,0.04);
}
.mob-search-pin-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}
.mob-search-pin-label {
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    line-height: 1.2;
}

/* Recent chips */
.mob-search-recents {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px 12px 4px;
}
.mob-search-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--mobile-card);
    border: 1px solid var(--mobile-border);
    color: var(--mobile-text);
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.mob-search-chip-icon {
    width: 14px;
    height: 14px;
    color: var(--mobile-text-muted);
}
.mob-search-chip:active { background: rgba(255,255,255,0.06); }

/* Saved presets */
.mob-search-presets {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 12px 4px;
}
.mob-search-preset {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--mobile-card);
    border: 1px solid var(--mobile-border);
    color: var(--mobile-text);
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
    text-align: left;
}
.mob-search-preset-icon {
    width: 18px;
    height: 18px;
    color: var(--mobile-text-muted);
}
.mob-search-preset-name {
    display: block;
    font-size: 14px;
    font-weight: 600;
}
.mob-search-preset-type {
    display: block;
    font-size: 11px;
    color: var(--mobile-text-muted);
    text-transform: capitalize;
}

/* Tips */
.mob-search-tips {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 12px 24px;
    color: var(--mobile-text-muted);
    font-size: 13px;
}
.mob-search-tip {
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1.4;
}
.mob-search-tip-key {
    flex-shrink: 0;
    min-width: 24px;
    height: 24px;
    background: var(--mobile-card);
    border: 1px solid var(--mobile-border);
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: ui-monospace, Menlo, monospace;
    color: var(--mobile-text);
    padding: 0 6px;
    font-weight: 700;
    font-size: 13px;
}
.mob-search-tip-key svg { width: 14px; height: 14px; }
.mob-search-tip code {
    background: var(--mobile-card);
    border: 1px solid var(--mobile-border);
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 12px;
}

/* Result groups */
.mob-search-group {
    border-bottom: 1px solid var(--mobile-border);
}
.mob-search-group-header {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: transparent;
    border: none;
    color: var(--mobile-text);
    padding: 12px 16px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
    text-align: left;
}
.mob-search-group-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}
.mob-search-group-label {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.mob-search-group-count {
    background: var(--mobile-card);
    border: 1px solid var(--mobile-border);
    border-radius: 10px;
    padding: 2px 8px;
    font-size: 11px;
    color: var(--mobile-text-muted);
    min-width: 22px;
    text-align: center;
}
.mob-search-group-chevron {
    width: 16px;
    height: 16px;
    color: var(--mobile-text-muted);
    transition: transform 0.2s;
    flex-shrink: 0;
}
.mob-search-group-chevron svg { width: 100%; height: 100%; }
.mob-search-group.collapsed .mob-search-group-chevron {
    transform: rotate(-90deg);
}
.mob-search-group.collapsed .mob-search-group-body {
    display: none;
}
.mob-search-group-body { padding: 0 0 6px; }
.mob-search-group-empty {
    padding: 8px 16px 14px;
    color: var(--mobile-text-muted);
    font-size: 13px;
}
.mob-search-group-empty-state {
    opacity: 0.6;
}
/* Per-group search failure note (e.g. the busy-database message) — must
   stay legible, so it is never dimmed like the plain "No matches" state. */
.mob-search-group-error {
    color: #fbbf24;
}
[data-theme="light"] .mob-search-group-error {
    color: #b45309;
}

.mob-search-loading-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--mobile-accent);
    animation: mob-load-dot 1s ease-in-out infinite;
}
@keyframes mob-load-dot {
    0%,100% { opacity: 0.4; }
    50% { opacity: 1; }
}

.mob-search-live-badge {
    background: linear-gradient(135deg, #0d6e4c, #0f7a55);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
    padding: 2px 6px;
    border-radius: 4px;
    animation: mob-live-pulse 1.2s ease-in-out;
}
@keyframes mob-live-pulse {
    0% { transform: scale(0.8); opacity: 0; }
    50% { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}
.mob-search-live-arrived .mob-search-group-header {
    background: rgba(16,185,129,0.06);
}

.mob-search-exact-badge {
    background: var(--mob-solid-success);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
    padding: 2px 5px;
    border-radius: 4px;
    margin-right: 6px;
    vertical-align: 1px;
}

.mob-empty-btn {
    display: inline-block;
    margin-top: 12px;
    background: var(--mobile-accent);
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
}

/* ==========================================================================
   AI ASK PANE
   ========================================================================== */
.mob-ask-pane {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--mobile-bg);
    overflow: hidden;
}
.mob-ask-messages {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.mob-ask-welcome {
    text-align: center;
    padding: 40px 24px;
    color: var(--mobile-text-muted);
}
.mob-ask-welcome-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 12px;
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.mob-ask-welcome-icon svg { width: 28px; height: 28px; }
.mob-ask-welcome-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--mobile-text);
    margin-bottom: 6px;
}
.mob-ask-welcome-text {
    font-size: 13px;
    line-height: 1.5;
}

.mob-ask-bubble {
    display: flex;
    max-width: 88%;
}
.mob-ask-bubble-body {
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.5;
    word-wrap: break-word;
}
.mob-ask-user {
    align-self: flex-end;
}
.mob-ask-user .mob-ask-bubble-body {
    background: var(--mobile-accent);
    color: #fff;
    border-bottom-right-radius: 4px;
}
.mob-ask-asst .mob-ask-bubble-body {
    background: var(--mobile-card);
    border: 1px solid var(--mobile-border);
    color: var(--mobile-text);
    border-bottom-left-radius: 4px;
}
.mob-ask-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--mobile-text-muted);
    margin: 0 2px;
    animation: mob-ask-dots 1.2s ease-in-out infinite;
}
.mob-ask-dot:nth-child(2) { animation-delay: 0.18s; }
.mob-ask-dot:nth-child(3) { animation-delay: 0.36s; }
@keyframes mob-ask-dots {
    0%,80%,100% { opacity: 0.3; transform: translateY(0); }
    40% { opacity: 1; transform: translateY(-4px); }
}

.mob-ask-suggestions {
    display: flex;
    gap: 6px;
    padding: 6px 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-shrink: 0;
    border-top: 1px solid var(--mobile-border);
}
.mob-ask-suggestions::-webkit-scrollbar { display: none; }
.mob-ask-suggestion {
    flex-shrink: 0;
    background: var(--mobile-card);
    border: 1px solid var(--mobile-border);
    color: var(--mobile-text);
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
}
.mob-ask-suggestion:active { background: rgba(255,255,255,0.06); }

.mob-ask-composer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px calc(8px + var(--mobile-safe-bottom));
    border-top: 1px solid var(--mobile-border);
    background: var(--mobile-bg);
}
.mob-ask-composer input {
    flex: 1;
    height: 44px;
    background: var(--mobile-card);
    border: 1px solid var(--mobile-border);
    border-radius: 22px;
    color: var(--mobile-text);
    padding: 0 16px;
    font-size: 16px;
    outline: none;
    font-family: inherit;
}
.mob-ask-composer input:focus { border-color:var(--mob-accent-on-surface); }
.mob-ask-send {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--mobile-accent);
    border: none;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}
.mob-ask-send svg { width: 20px; height: 20px; }
.mob-ask-send:active { transform: scale(0.94); }

.mob-ask-actions {
    text-align: center;
    padding: 6px 0 4px;
}
.mob-ask-clear {
    background: transparent;
    border: 1px solid var(--mobile-border);
    color: var(--mobile-text-muted);
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12px;
    cursor: pointer;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
}

.mob-ask-refs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px 4px;
}
.mob-ask-ref {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--mobile-card);
    border: 1px solid var(--mobile-border);
    color: var(--mobile-text);
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.mob-ask-ref-icon { font-size: 14px; }

/* ==========================================================================
   MOBILE MTR OVERLAY
   ========================================================================== */
.mob-mtr-overlay {
    position: fixed;
    inset: 0;
    z-index: 9750;
    background: var(--mobile-bg);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.28s var(--mobile-transition);
}
.mob-mtr-overlay.active { transform: translateX(0); }

.mob-mtr-topbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    padding-top: calc(8px + var(--mobile-safe-top));
    border-bottom: 1px solid var(--mobile-border);
    flex-shrink: 0;
}
.mob-mtr-back {
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    color: var(--mobile-text);
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.mob-mtr-back svg { width: 22px; height: 22px; }
.mob-mtr-title {
    flex: 1;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    color: var(--mobile-text);
}
.mob-mtr-search {
    padding: 10px 12px;
    border-bottom: 1px solid var(--mobile-border);
    flex-shrink: 0;
}
.mob-mtr-results {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* ==========================================================================
   ADVANCED FILTER SHEET
   ========================================================================== */
.mob-filter-sheet {
    position: fixed;
    inset: 0;
    z-index: 9800;
    background: var(--mobile-bg);
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.3s var(--mobile-transition);
}
.mob-filter-sheet.active { transform: translateY(0); }

.mob-filter-topbar {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    padding-top: calc(10px + var(--mobile-safe-top));
    border-bottom: 1px solid var(--mobile-border);
    flex-shrink: 0;
}
.mob-filter-cancel,
.mob-filter-reset {
    background: transparent;
    border: none;
    color:var(--mob-accent-on-surface);
    font-size: 15px;
    font-weight: 500;
    padding: 8px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
}
.mob-filter-title {
    flex: 1;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    color: var(--mobile-text);
}

.mob-filter-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px;
}
.mob-filter-field {
    margin-bottom: 16px;
}
.mob-filter-label {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mobile-text-muted);
    margin-bottom: 6px;
    font-weight: 600;
}
.mob-filter-input {
    width: 100%;
    height: 44px;
    background: var(--mobile-card);
    border: 1px solid var(--mobile-border);
    border-radius: 10px;
    color: var(--mobile-text);
    padding: 0 12px;
    font-size: 16px;
    outline: none;
    font-family: inherit;
    -webkit-appearance: none;
}
.mob-filter-input:focus { border-color:var(--mob-accent-on-surface); }

/* Salesperson typeahead picker (inside / outside) */
.mob-sp-picker {
    position: relative;
    display: block;
}
.mob-sp-picker input.mob-sp-picker-text {
    width: 100%;
    padding-right: 36px; /* room for the clear button */
}
.mob-sp-picker-clear {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--mobile-text-muted, #888);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    -webkit-tap-highlight-color: transparent;
}
.mob-sp-picker-clear:hover { color: var(--mobile-text, #eee); }
.mob-sp-picker-list {
    position: absolute;
    z-index: 50;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 240px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--mobile-card, #1f1f23);
    border: 1px solid var(--mobile-border, #333);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
    padding: 4px;
}
.mob-sp-picker-option {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    color: var(--mobile-text, #eee);
    padding: 10px 12px;
    font-size: 14px;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
}
.mob-sp-picker-option:hover,
.mob-sp-picker-option:active {
    background: rgba(255, 255, 255, 0.06);
}
.mob-sp-picker-empty {
    padding: 12px;
    color: var(--mobile-text-muted, #888);
    font-size: 13px;
    text-align: center;
}

.mob-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.mob-filter-chip {
    background: var(--mobile-card);
    border: 1px solid var(--mobile-border);
    color: var(--mobile-text);
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 13px;
    cursor: pointer;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.mob-filter-chip.active {
    background: var(--mobile-accent);
    border-color:var(--mob-accent-on-surface);
    color: #fff;
}

.mob-filter-presets {
    margin-top: 24px;
    padding-top: 12px;
    border-top: 1px solid var(--mobile-border);
}
.mob-filter-presets-title {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mobile-text-muted);
    font-weight: 600;
    margin-bottom: 8px;
}
.mob-filter-preset-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}
.mob-filter-preset-load {
    flex: 1;
    background: var(--mobile-card);
    border: 1px solid var(--mobile-border);
    color: var(--mobile-text);
    padding: 10px 12px;
    border-radius: 10px;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.mob-filter-preset-name { font-size: 14px; font-weight: 600; }
.mob-filter-preset-meta { font-size: 11px; color: var(--mobile-text-muted); }
.mob-filter-preset-del {
    width: 36px;
    height: 36px;
    background: transparent;
    border: 1px solid var(--mobile-border);
    border-radius: 8px;
    color: var(--mobile-text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
}
.mob-filter-preset-del svg { width: 16px; height: 16px; }

.mob-filter-actions {
    display: flex;
    gap: 8px;
    padding: 10px 12px calc(10px + var(--mobile-safe-bottom));
    border-top: 1px solid var(--mobile-border);
    background: var(--mobile-bg);
    flex-shrink: 0;
}
.mob-filter-save {
    flex: 1;
    height: 48px;
    background: var(--mobile-card);
    border: 1px solid var(--mobile-border);
    color: var(--mobile-text);
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
}
.mob-filter-apply {
    flex: 2;
    height: 48px;
    background: var(--mobile-accent);
    border: none;
    color: #fff;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
}
.mob-filter-apply:active { transform: scale(0.98); }

/* ==========================================================================
   LIGHT THEME OVERRIDES
   ========================================================================== */
[data-theme="light"] .mob-search-pin:active,
[data-theme="light"] .mob-search-chip:active,
[data-theme="light"] .mob-ask-suggestion:active {
    background: rgba(0,0,0,0.04);
}
[data-theme="light"] .mob-search-clear:active,
[data-theme="light"] .mob-search-mic:active,
[data-theme="light"] .mob-search-filter:active {
    background: rgba(0,0,0,0.05);
}
[data-theme="light"] .mob-search-live-arrived .mob-search-group-header {
    background: var(--mob-tone-success-bg);
}

/* ==========================================================================
   PRODUCT CATALOG — full mobile parity (Task 159)
   ========================================================================== */

/* Search bar with embedded scan button (products tab) */
.mob-search-wrap.mob-search-wrap-scan { padding-right: 4px; }
.mob-search-wrap.mob-search-wrap-scan .mob-search-input { padding-right: 44px; }
.mob-search-scan-btn {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(231, 76, 60, 0.12);
    color: var(--mob-accent-on-surface);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    padding: 0;
}
.mob-search-scan-btn:active { background: rgba(231, 76, 60, 0.22); transform: translateY(-50%) scale(0.94); }
.mob-search-scan-btn svg { width: 22px; height: 22px; }

/* Product filter chip row */
.mob-prod-filters {
    display: flex;
    gap: 8px;
    padding: 6px 12px 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.mob-prod-filters::-webkit-scrollbar { display: none; }
.mob-prod-filter-chip {
    flex: 0 0 auto;
    height: 30px;
    padding: 0 12px;
    border-radius: 15px;
    background: var(--mobile-card);
    border: 1px solid var(--mobile-border);
    color: var(--mobile-text-secondary);
    font-size: 12.5px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    -webkit-tap-highlight-color: transparent;
}
.mob-prod-filter-chip[aria-pressed="true"] {
    background: rgba(231, 76, 60, 0.16);
    border-color: rgba(231, 76, 60, 0.55);
    color: var(--mob-accent-on-surface);
}
.mob-prod-filter-chip:active { transform: scale(0.96); }
.mob-prod-filter-chip-caret { font-size: 10px; opacity: 0.6; }

/* ===== PRODUCT DETAIL ===== */
.mob-prod-detail {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px));
}
.mob-prod-hero {
    display: flex;
    gap: 12px;
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--mobile-border);
    background: var(--mobile-card);
}
.mob-prod-hero-img {
    flex: 0 0 84px;
    width: 84px;
    height: 84px;
    border-radius: 12px;
    background: var(--mobile-bg);
    border: 1px solid var(--mobile-border);
    object-fit: contain;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mobile-text-muted);
    font-size: 30px;
}
.mob-prod-hero-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.mob-prod-hero-body { flex: 1; min-width: 0; }
.mob-prod-hero-id {
    font-size: 11px;
    font-weight: 600;
    color: var(--mobile-text-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 2px;
}
.mob-prod-hero-title {
    font-size: 15px;
    line-height: 1.3;
    font-weight: 600;
    color: var(--mobile-text);
    margin-bottom: 4px;
    word-break: break-word;
}
.mob-prod-hero-meta {
    font-size: 12px;
    color: var(--mobile-text-secondary);
    line-height: 1.4;
}
.mob-prod-hero-price {
    margin-top: 6px;
    font-size: 17px;
    font-weight: 700;
    color: var(--mobile-text);
}
.mob-prod-hero-price-uom { font-size: 12px; color: var(--mobile-text-muted); font-weight: 500; margin-left: 4px; }

.mob-stock-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 11px;
    font-size: 11.5px;
    font-weight: 600;
    background: var(--mob-tone-success-bg);
    color: var(--mob-tone-success-fg);
    margin-top: 6px;
}
.mob-stock-pill::before {
    content: '';
    width: 6px; height: 6px; border-radius: 50%;
    background: currentColor;
}
.mob-stock-pill.low { background: var(--mob-tone-warn-bg); color: var(--mob-tone-warn-fg); }
.mob-stock-pill.out { background: var(--mob-tone-danger-bg); color: var(--mob-tone-danger-fg); }

/* Sticky segmented control (sub-tabs) */
.mob-prod-segments {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    gap: 0;
    background: var(--mobile-bg);
    border-bottom: 1px solid var(--mobile-border);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.mob-prod-segments::-webkit-scrollbar { display: none; }
.mob-prod-segment-tab {
    flex: 0 0 auto;
    padding: 12px 16px;
    background: none;
    border: none;
    color: var(--mobile-text-secondary);
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.mob-prod-segment-tab[aria-selected="true"] {
    color: var(--mob-accent-on-surface);
    border-bottom-color: var(--mob-accent-on-surface);
}

.mob-prod-pane {
    padding: 12px 14px;
    animation: mobProdPaneIn 0.18s ease;
}
@keyframes mobProdPaneIn {
    from { opacity: 0; transform: translateX(8px); }
    to   { opacity: 1; transform: translateX(0); }
}
.mob-prod-pane-empty {
    padding: 32px 16px;
    text-align: center;
    color: var(--mobile-text-muted);
    font-size: 13px;
}

/* Sticky bottom action bar */
.mob-prod-action-bar {
    position: fixed;
    left: 0; right: 0;
    bottom: 0;
    z-index: 50;
    display: flex;
    gap: 6px;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
    background: var(--mobile-card);
    border-top: 1px solid var(--mobile-border);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
.mob-tablet-split .mob-prod-action-bar {
    position: sticky;
    left: auto; right: auto;
}
.mob-prod-action {
    flex: 1;
    min-height: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    background: none;
    border: none;
    color: var(--mobile-text-secondary);
    font-size: 11px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    border-radius: 10px;
    -webkit-tap-highlight-color: transparent;
    padding: 4px 2px;
}
.mob-prod-action:active { background: var(--mobile-bg); }
.mob-prod-action svg { width: 22px; height: 22px; }
.mob-prod-action.primary {
    background: #e74c3c;
    color: #fff;
}
.mob-prod-action.primary:active { background: #c0392b; }

/* Branch / pricing rows */
.mob-prod-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--mobile-card);
    border: 1px solid var(--mobile-border);
    border-radius: 12px;
    margin-bottom: 8px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.mob-prod-row:active { background: var(--mobile-bg); }
.mob-prod-row-body { flex: 1; min-width: 0; }
.mob-prod-row-title { font-size: 14px; font-weight: 600; color: var(--mobile-text); }
.mob-prod-row-sub { font-size: 12px; color: var(--mobile-text-secondary); margin-top: 2px; }
.mob-prod-row-meta { text-align: right; }
.mob-prod-row-meta-primary { font-size: 14px; font-weight: 700; color: var(--mobile-text); }
.mob-prod-row-meta-sub { font-size: 11px; color: var(--mobile-text-muted); margin-top: 2px; }
.mob-prod-row-meta-primary.in { color: var(--mob-tone-success-fg); }
.mob-prod-row-meta-primary.out { color: var(--mob-tone-danger-fg); }
.mob-prod-row-meta-primary.warn { color: var(--mob-tone-warn-fg); }
/* Inline pill-style hints used on bin location rows ("needs count",
   "dead stock"). Sized to read well on phones without crowding the
   compact secondary line. */
.mob-prod-row-hint {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    border: 1px solid transparent;
    font-size: 10px;
    font-weight: 600;
    margin-left: 4px;
    vertical-align: 1px;
    white-space: nowrap;
}
.mob-prod-row-hint.warn { background: var(--mob-tone-warn-bg); color: var(--mob-tone-warn-fg); border-color: var(--mob-tone-warn-border); }
.mob-prod-row-hint.dead { background: var(--mob-tone-neutral-bg); color: var(--mob-tone-neutral-fg); border-color: var(--mob-tone-neutral-border); }

/* Customer context pill */
.mob-prod-ctx {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(99, 102, 241, 0.10);
    border: 1px solid rgba(99, 102, 241, 0.32);
    border-radius: 12px;
    margin-bottom: 12px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.mob-prod-ctx:active { background: rgba(99, 102, 241, 0.18); }
.mob-prod-ctx-icon {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--mob-tone-info-bg);
    color: var(--mob-tone-info-fg);
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
}
.mob-prod-ctx-body { flex: 1; min-width: 0; }
.mob-prod-ctx-title { font-size: 11px; font-weight: 600; color: var(--mobile-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.mob-prod-ctx-name { font-size: 14px; color: var(--mobile-text); font-weight: 600; margin-top: 2px; }
.mob-prod-ctx-arrow { color: var(--mobile-text-muted); font-size: 18px; }

/* UOM picker */
.mob-prod-uom-picker {
    display: flex;
    gap: 6px;
    padding: 4px;
    background: var(--mobile-bg);
    border-radius: 10px;
    margin-bottom: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.mob-prod-uom-picker::-webkit-scrollbar { display: none; }
.mob-prod-uom-option {
    flex: 0 0 auto;
    padding: 8px 14px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--mobile-text-secondary);
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.mob-prod-uom-option[aria-pressed="true"] {
    background: var(--mobile-card);
    color: var(--mobile-text);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.mob-prod-uom-conv {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 12px;
    background: var(--mobile-card);
    border: 1px solid var(--mobile-border);
    border-radius: 12px;
}
.mob-prod-uom-conv-cell { padding: 8px; text-align: center; }
.mob-prod-uom-conv-label { font-size: 11px; color: var(--mobile-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.mob-prod-uom-conv-value { font-size: 18px; color: var(--mobile-text); font-weight: 700; margin-top: 2px; }

/* ===== ADD-TO-CART SHEET ===== */
.mob-cart-form { padding: 4px 0 8px; }
.mob-cart-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--mobile-border);
}
.mob-cart-row:last-of-type { border-bottom: none; }
.mob-cart-row-label { font-size: 13px; color: var(--mobile-text-secondary); font-weight: 500; }
.mob-cart-row-value { font-size: 14px; color: var(--mobile-text); font-weight: 600; text-align: right; }

.mob-cart-qty {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--mobile-border);
    border-radius: 12px;
    overflow: hidden;
    background: var(--mobile-bg);
    width: 168px;
}
.mob-cart-qty-btn {
    flex: 0 0 44px;
    background: var(--mobile-card);
    border: none;
    color: var(--mobile-text);
    font-size: 22px;
    font-weight: 700;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.mob-cart-qty-btn:active { background: var(--mobile-border); }
.mob-cart-qty-input {
    flex: 1;
    width: 100%;
    border: none;
    background: transparent;
    text-align: center;
    color: var(--mobile-text);
    font-size: 16px;
    font-weight: 600;
    outline: none;
    font-family: inherit;
    min-width: 0;
}
.mob-cart-uom-select,
.mob-cart-branch-select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--mobile-border);
    border-radius: 10px;
    background: var(--mobile-card);
    color: var(--mobile-text);
    font-size: 16px;
    font-family: inherit;
    -webkit-appearance: none;
    appearance: none;
}
.mob-cart-warning {
    background: var(--mob-tone-warn-bg);
    color: var(--mob-tone-warn-fg);
    border: 1px solid var(--mob-tone-warn-border);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 12.5px;
    margin: 8px 0;
}
.mob-cart-submit {
    width: 100%;
    margin-top: 14px;
    padding: 14px;
    background: #e74c3c;
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.mob-cart-submit:active { background: #c0392b; transform: scale(0.99); }
.mob-cart-submit:disabled { background: var(--mobile-border); color: var(--mobile-text-muted); cursor: not-allowed; }

/* ===== BARCODE SCANNER OVERLAY ===== */
.mob-scan-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: #000;
    display: none;
    flex-direction: column;
}
.mob-scan-overlay.active { display: flex; }
.mob-scan-video {
    flex: 1;
    width: 100%;
    object-fit: cover;
    background: #000;
}
.mob-scan-frame {
    position: absolute;
    inset: 0;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mob-scan-reticle {
    width: min(72vw, 320px);
    height: min(40vw, 200px);
    border: 2px solid rgba(255, 255, 255, 0.85);
    border-radius: 16px;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55);
    position: relative;
}
.mob-scan-reticle::after {
    content: '';
    position: absolute;
    left: 12px; right: 12px;
    top: 50%;
    height: 2px;
    background: #e74c3c;
    box-shadow: 0 0 12px rgba(231, 76, 60, 0.85);
    animation: mobScanLine 1.6s ease-in-out infinite;
}
@keyframes mobScanLine {
    0%   { transform: translateY(-70px); opacity: 0.2; }
    50%  { transform: translateY(70px); opacity: 1; }
    100% { transform: translateY(-70px); opacity: 0.2; }
}
.mob-scan-topbar {
    position: absolute;
    top: 0; left: 0; right: 0;
    padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    z-index: 2;
    background: linear-gradient(to bottom, rgba(0,0,0,0.55), transparent);
}
.mob-scan-close {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    border: none;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    -webkit-tap-highlight-color: transparent;
}
.mob-scan-title { font-size: 14px; font-weight: 600; }
.mob-scan-bottom {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    text-align: center;
    color: #fff;
    background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
    z-index: 2;
}
.mob-scan-hint { font-size: 13px; opacity: 0.85; margin-bottom: 10px; }
.mob-scan-manual {
    display: inline-block;
    padding: 10px 18px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #fff;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.mob-scan-error {
    color: var(--mob-tone-danger-fg);
    background: var(--mob-tone-danger-bg);
    border: 1px solid var(--mob-tone-danger-border);
    padding: 14px;
    margin: 16px;
    border-radius: 12px;
    font-size: 13px;
    text-align: center;
}

/* Customer search list inside sheet */
.mob-cust-search-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--mobile-border);
    border-radius: 10px;
    background: var(--mobile-card);
    color: var(--mobile-text);
    font-size: 16px;
    font-family: inherit;
    margin-bottom: 10px;
    outline: none;
}
.mob-cust-search-input:focus { border-color: var(--mob-tone-info-fg); }

/* Section title inside detail panes */
.mob-prod-section-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--mobile-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 4px 4px 8px;
}

/* ===== Mobile Product Detail — Parity additions (Task #253) ===== */
.mob-prod-hero-alt {
    font-size: 12.5px;
    color: var(--mobile-text-secondary);
    margin-top: 4px;
    line-height: 1.35;
    max-height: 3.6em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
.mob-prod-hero-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    align-items: center;
}
.mob-prod-status-badge {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 8px;
    border-radius: 11px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    background: var(--mob-tone-info-bg);
    color: var(--mob-tone-info-fg);
    border: 1px solid var(--mob-tone-info-border);
}
.mob-prod-status-badge.mob-prod-status-ok {
    background: var(--mob-tone-success-bg);
    color: var(--mob-tone-success-fg);
    border-color: var(--mob-tone-success-border);
}
.mob-prod-status-badge.mob-prod-status-warn {
    background: var(--mob-tone-warn-bg);
    color: var(--mob-tone-warn-fg);
    border-color: var(--mob-tone-warn-border);
}
.mob-prod-status-badge.mob-prod-status-danger {
    background: var(--mob-tone-danger-bg);
    color: var(--mob-tone-danger-fg);
    border-color: var(--mob-tone-danger-border);
}

.mob-prod-card {
    background: var(--mobile-card);
    border: 1px solid var(--mobile-border);
    border-radius: 12px;
    padding: 12px 14px;
    margin: 4px 0 10px;
}
.mob-prod-card-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--mobile-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}
.mob-prod-card-body {
    font-size: 13px;
    color: var(--mobile-text);
    line-height: 1.45;
    white-space: pre-wrap;
}
.mob-prod-card-sub {
    margin-top: 6px;
    font-size: 12px;
    color: var(--mobile-text-secondary);
}

.mob-prod-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--mobile-border);
    border-radius: 12px;
    background: var(--mobile-card);
    margin: 4px 0 10px;
    -webkit-overflow-scrolling: touch;
}
.mob-prod-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
    color: var(--mobile-text);
    min-width: 100%;
}
.mob-prod-table thead th {
    text-align: left;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mobile-text-muted);
    font-weight: 700;
    padding: 8px 10px;
    background: var(--mobile-bg);
    border-bottom: 1px solid var(--mobile-border);
    position: sticky;
    top: 0;
    white-space: nowrap;
}
.mob-prod-table thead th.num,
.mob-prod-table tbody td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.mob-prod-table tbody td {
    padding: 9px 10px;
    border-bottom: 1px solid var(--mobile-border);
    vertical-align: top;
}
.mob-prod-table tbody tr:last-child td { border-bottom: none; }
.mob-prod-table-sub {
    margin-top: 2px;
    font-size: 10.5px;
    color: var(--mobile-text-muted);
    font-weight: 400;
}

/* ===== Sales-orders dedicated filter sheet — preset block ===== */
.mob-so-filter-presets-block {
    margin: 8px 0 6px;
    padding: 12px;
    background: var(--mobile-card);
    border: 1px solid var(--mobile-border);
    border-radius: 12px;
}
.mob-so-filter-presets-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.mob-so-filter-presets-head > span {
    font-size: 11px;
    font-weight: 700;
    color: var(--mobile-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.mob-so-filter-save-preset {
    background: transparent;
    border: 1px solid var(--mobile-border);
    color: var(--mob-tone-info-fg);
    border-radius: 8px;
    padding: 5px 10px;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
}
.mob-so-filter-save-preset:active { transform: scale(0.97); }
.mob-so-filter-presets-empty {
    font-size: 12px;
    color: var(--mobile-text-muted);
    padding: 8px 4px;
    text-align: center;
}
.mob-so-filter-preset-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}
.mob-so-filter-preset-row:last-child { margin-bottom: 0; }
.mob-so-filter-preset-load {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--mobile-bg);
    border: 1px solid var(--mobile-border);
    border-radius: 10px;
    padding: 9px 12px;
    cursor: pointer;
    color: var(--mobile-text);
    font-family: inherit;
    text-align: left;
}
.mob-so-filter-preset-load:active { transform: scale(0.98); }
.mob-so-filter-preset-name { font-size: 13px; font-weight: 600; }
.mob-so-filter-preset-meta { font-size: 11px; color: var(--mobile-text-muted); }
.mob-so-filter-preset-del {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--mobile-border);
    background: var(--mobile-bg);
    color: var(--mobile-text-muted);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
}
.mob-so-filter-preset-del:active { transform: scale(0.95); color: var(--mob-tone-danger-fg); }

/* ==========================================================================
   EMAIL COMPOSER MODAL — MOBILE/TABLET RESPONSIVE OVERRIDES
   The composer (#emailComposerModal, defined in assets/email-composer.js)
   ships with desktop sizing (max-w-3xl, max-h-[90vh], centered overlay).
   On phones the toolbar overflows, the Send button scrolls off-screen,
   and the recipient/CC fields are clipped. These rules:
     - <=480px: render as a full-screen sheet flush with the viewport,
       sticky composer header at the top and a sticky Send/Cancel footer
       at the bottom so the primary action is always reachable.
     - 481px–767px: also full-screen (small tablets / large phones).
     - >=768px: keep the centered modal, but tighten max-width so it
       fits comfortably in landscape phones and small tablets.
   The toolbar wraps onto multiple rows on narrow widths so font/format
   buttons stay tappable. The attachments block becomes a collapsible
   <details>-style chip when there are no attachments yet.
   ========================================================================== */

/* Phones AND large phones / small tablets — full-screen sheet */
@media (max-width: 767px) {
    body.mobile-app-active #emailComposerModal {
        padding: 0 !important;
        align-items: stretch !important;
        justify-content: stretch !important;
    }
    body.mobile-app-active #emailComposerModal > div {
        max-width: 100% !important;
        width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        border-radius: 0 !important;
        border-left: 0 !important;
        border-right: 0 !important;
        border-top: 0 !important;
    }

    /* Sticky composer header (gradient bar) */
    body.mobile-app-active #emailComposerModal > div > div:first-child {
        position: sticky;
        top: 0;
        z-index: 5;
        padding-top: calc(var(--mob-safe-top) + 12px) !important;
        border-radius: 0 !important;
    }

    /* Body scroll area: leave room for sticky footer below */
    body.mobile-app-active #emailComposerModal > div > div:nth-child(2) {
        padding: 16px !important;
        gap: 12px;
        padding-bottom: calc(96px + var(--mob-safe-bottom)) !important;
    }

    /* Field labels + inputs scaled for phone */
    body.mobile-app-active #emailComposerModal label {
        font-size: 12px !important;
    }
    body.mobile-app-active #emailComposerModal input[type="text"],
    body.mobile-app-active #emailComposerModal select,
    body.mobile-app-active #emailComposerModal #emailComposerSubject,
    body.mobile-app-active #emailComposerModal #emailComposerTo,
    body.mobile-app-active #emailComposerModal #emailComposerCc,
    body.mobile-app-active #emailComposerModal #emailComposerFrom {
        font-size: 16px !important; /* prevents iOS auto-zoom on focus */
        min-height: 44px;            /* iOS minimum touch target */
    }

    /* Recipient chips wrap cleanly — the input is a single line, but
       comma-separated addresses spill onto a second visual line via
       the helper text and via word-wrap on the input value. */
    body.mobile-app-active #emailComposerModal #emailComposerTo,
    body.mobile-app-active #emailComposerModal #emailComposerCc {
        word-break: break-all;
    }

    /* Format toolbar — wrap onto multiple rows so all buttons remain
       reachable instead of clipping off the right edge. */
    body.mobile-app-active #emailComposerModal #emailComposerBody {
        min-height: 160px !important;
        font-size: 16px !important;
    }
    body.mobile-app-active #emailComposerModal [contenteditable="true"] {
        -webkit-user-select: text;
        user-select: text;
    }
    /* The toolbar is the first child of the body's bordered container */
    body.mobile-app-active #emailComposerModal #emailComposerBody + *,
    body.mobile-app-active #emailComposerModal .flex.flex-wrap.gap-1.p-2 {
        row-gap: 6px !important;
    }
    body.mobile-app-active #emailComposerModal .flex.flex-wrap.gap-1.p-2 button,
    body.mobile-app-active #emailComposerModal .flex.flex-wrap.gap-1.p-2 select {
        min-height: 36px;
        min-width: 36px;
    }

    /* Attachments area — keep stacked on phone */
    body.mobile-app-active #emailComposerModal #attachOrderSection {
        flex-wrap: wrap !important;
        row-gap: 8px;
    }
    body.mobile-app-active #emailComposerModal #attachOrderSection select,
    body.mobile-app-active #emailComposerModal #attachOrderSection button {
        min-height: 44px;
    }
    body.mobile-app-active #emailComposerModal #hidePricingOption {
        flex-basis: 100%;
        justify-content: center;
    }

    /* Sticky footer with Send/Cancel — always visible above keyboard.
       Targets the action-button row inside the body scroll area. */
    body.mobile-app-active #emailComposerModal .flex.justify-end.gap-3.pt-4 {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 12px 16px calc(12px + var(--mob-safe-bottom)) 16px !important;
        margin: 0 !important;
        background: rgb(17, 24, 39); /* gray-900 to match modal */
        border-top: 1px solid rgb(55, 65, 81); /* gray-700 */
        z-index: 6;
    }
    body.mobile-app-active #emailComposerModal .flex.justify-end.gap-3.pt-4 button {
        flex: 1;
        min-height: 48px;
        font-size: 15px;
        justify-content: center;
    }
}

/* Tablets in portrait/landscape (>=768px and <1024px) — keep as a
   centered modal but bound the width to the viewport with breathing
   room and ensure the body height fits within the available space. */
@media (min-width: 768px) and (max-width: 1023px) {
    body.mobile-app-active #emailComposerModal {
        padding: 24px !important;
    }
    body.mobile-app-active #emailComposerModal > div {
        max-width: 720px !important;
        width: 100% !important;
        /* Dynamic-viewport fallback (task #585 audit). */
        max-height: calc(100vh - 48px) !important;
        max-height: calc(100dvh - 48px) !important;
    }
    body.mobile-app-active #emailComposerModal #emailComposerBody {
        min-height: 200px !important;
    }
}

/* ============================================================
   NATIVE SCREENS: Inventory Inquiry / Tasks / Outside-Sales CRM
   Launched from the More tab; all <1024px only.
   ============================================================ */

.mob-empty-sm {
    padding: 16px;
    text-align: center;
    color: var(--mobile-text-muted);
    font-size: 14px;
}

/* Generic floating action button (shared) */
.mob-fab {
    position: fixed;
    right: 18px;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--mobile-accent);
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    z-index: 50;
}
.mob-fab:active { transform: scale(0.94); }
.mob-fab svg { width: 26px; height: 26px; }

/* Task #1029: mobile New Call FAB — sits above the per-tab create FAB slot
   so the two never overlap; green to match the desktop "New call" button. */
.mob-newcall-fab {
    bottom: calc(140px + env(safe-area-inset-bottom, 0px));
    background: #15803d;
}
body.mobile-app-active.wbp-in-call .mob-newcall-fab { display: none; }

/* ---------- Inventory Inquiry ---------- */
.mob-inv-screen { padding: 12px 14px 32px; }
.mob-inv-searchbar { position: sticky; top: 0; z-index: 5; background: var(--mobile-bg); padding-bottom: 10px; }
.mob-inv-body { margin-top: 4px; }
.mob-inv-detail { display: flex; flex-direction: column; gap: 14px; }
.mob-inv-back {
    align-self: flex-start;
    background: var(--mobile-card);
    border: 1px solid var(--mobile-border);
    color: var(--mobile-text);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 14px;
}
.mob-inv-prodhead { padding: 2px; }
.mob-inv-prodname { font-size: 18px; font-weight: 700; color: var(--mobile-text); line-height: 1.25; }
.mob-inv-prodid { font-size: 13px; color: var(--mobile-text-muted); margin-top: 4px; }
.mob-inv-note {
    background: var(--mob-tone-warn-bg);
    border: 1px solid var(--mob-tone-warn-border);
    color: var(--mob-tone-warn-fg);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 13px;
}
.mob-inv-totals {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.mob-inv-stat {
    background: var(--mobile-card);
    border: 1px solid var(--mobile-border);
    border-radius: 10px;
    padding: 10px 6px;
    text-align: center;
}
.mob-inv-stat-val { font-size: 18px; font-weight: 700; color: var(--mobile-text); }
.mob-inv-stat-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--mobile-text-muted); margin-top: 3px; }
.mob-inv-branches-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--mobile-text-muted); margin-top: 4px; }
.mob-inv-branch-card {
    background: var(--mobile-card);
    border: 1px solid var(--mobile-border);
    border-radius: 10px;
    padding: 12px;
}
.mob-inv-branch-name { font-size: 15px; font-weight: 600; color: var(--mobile-text); margin-bottom: 8px; }
.mob-inv-branch-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 14px; }
.mob-inv-cell { display: flex; justify-content: space-between; font-size: 13px; }
.mob-inv-cell-label { color: var(--mobile-text-muted); }
.mob-inv-cell-val { color: var(--mobile-text); font-weight: 600; }

/* ---------- Freight Desk ---------- */
.mob-freight-screen { padding: 0 0 40px; }
.mob-freight-modes {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    gap: 8px;
    background: var(--mobile-bg);
    padding: 12px 14px;
    border-bottom: 1px solid var(--mobile-border);
}
.mob-freight-mode {
    flex: 1 1 0;
    background: var(--mobile-card);
    border: 1px solid var(--mobile-border);
    color: var(--mobile-text-secondary);
    border-radius: 10px;
    padding: 10px 8px;
    font-size: 14px;
    font-weight: 600;
}
.mob-freight-mode.active { background: var(--mobile-accent); border-color:var(--mob-accent-on-surface); color: #fff; }
.mob-freight-body { padding: 14px; }
.mob-freight-form { display: flex; flex-direction: column; gap: 12px; }
.mob-freight-sectiontitle {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mobile-text-muted);
    margin-top: 4px;
}
.mob-freight-field { display: flex; flex-direction: column; gap: 5px; }
.mob-freight-label { font-size: 12px; color: var(--mobile-text-muted); }
.mob-freight-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mob-freight-grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.mob-freight-grid-zip { display: grid; grid-template-columns: 1.1fr 1.4fr 0.7fr; gap: 10px; }
.mob-freight-acc { display: flex; flex-wrap: wrap; gap: 8px; }
.mob-freight-acc-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--mobile-card);
    border: 1px solid var(--mobile-border);
    border-radius: 999px;
    padding: 7px 12px;
    font-size: 12px;
    color: var(--mobile-text-secondary);
}
.mob-freight-acc-chip input { accent-color:var(--mob-accent-on-surface); width: 15px; height: 15px; }
.mob-freight-submit {
    width: 100%;
    height: 50px;
    margin-top: 6px;
    background: var(--mobile-accent);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
}
.mob-freight-submit:active { transform: scale(0.985); }
.mob-freight-submit:disabled { opacity: 0.6; }
.mob-freight-results { margin-top: 6px; display: flex; flex-direction: column; gap: 10px; }
.mob-freight-results-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mobile-text-muted);
}
.mob-freight-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    padding: 18px;
    color: var(--mobile-text-muted);
    font-size: 14px;
}
.mob-freight-spin {
    width: 18px;
    height: 18px;
    border: 3px solid var(--mobile-border);
    border-top-color:var(--mob-accent-on-surface);
    border-radius: 50%;
    animation: mob-freight-spin 0.7s linear infinite;
}
@keyframes mob-freight-spin { to { transform: rotate(360deg); } }
.mob-freight-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--mobile-card);
    border: 1px solid var(--mobile-border);
    border-radius: 12px;
    padding: 12px;
}
.mob-freight-card.best { border-color: rgba(34, 197, 94, 0.5); box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.25); }
.mob-freight-card-tap:active { transform: scale(0.99); background: var(--mobile-card-hover, rgba(255, 255, 255, 0.04)); }
.mob-freight-card-bar { width: 5px; align-self: stretch; border-radius: 4px; flex: 0 0 auto; }
.mob-freight-card-main { flex: 1 1 auto; min-width: 0; }
.mob-freight-card-carrier { font-size: 15px; font-weight: 600; color: var(--mobile-text); }
.mob-freight-card-transit { font-size: 12px; color: var(--mobile-text-muted); margin-top: 2px; }
.mob-freight-card-price { text-align: right; flex: 0 0 auto; }
.mob-freight-card-amt { font-size: 17px; font-weight: 700; color: var(--mob-tone-success-fg); }
.mob-freight-card-best { font-size: 11px; color: var(--mob-tone-success-fg); }
.mob-freight-card-strike { font-size: 11px; color: var(--mobile-text-muted); text-decoration: line-through; }
.mob-freight-card .mob-more-arrow { flex: 0 0 auto; width: 18px; height: 18px; color: var(--mobile-text-muted); }
.mob-freight-warn {
    background: var(--mob-tone-warn-bg);
    border: 1px solid var(--mob-tone-warn-border);
    color: var(--mob-tone-warn-fg);
    border-radius: 10px;
    padding: 12px;
    font-size: 13px;
}
.mob-freight-err {
    background: var(--mob-tone-danger-bg);
    border: 1px solid var(--mob-tone-danger-border);
    color: var(--mob-tone-danger-fg);
    border-radius: 10px;
    padding: 12px;
    font-size: 13px;
}
.mob-freight-err-detail { margin-top: 6px; font-size: 12px; opacity: 0.85; }
.mob-freight-booksheet { display: flex; flex-direction: column; gap: 12px; }
.mob-freight-booksection {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--mobile-border);
    border-radius: 12px;
    background: var(--mobile-card);
}
.mob-freight-unitrows { display: flex; flex-direction: column; gap: 12px; }
.mob-freight-unithead { display: flex; align-items: center; justify-content: space-between; color: var(--mobile-text); }
.mob-freight-addunit,
.mob-freight-removeunit {
    min-height: 44px;
    border: 1px solid var(--mobile-border);
    border-radius: 10px;
    background: var(--mobile-card);
    color: var(--mob-accent-on-surface);
    font-weight: 600;
    padding: 8px 12px;
}
.mob-freight-help { margin: 0; color: var(--mobile-text-muted); font-size: 12px; line-height: 1.45; }
.mob-freight-sync-ok {
    padding: 10px 12px;
    border: 1px solid var(--mob-tone-success-border);
    border-radius: 10px;
    background: var(--mob-tone-success-bg);
    color: var(--mob-tone-success-fg);
    font-size: 13px;
}
.mob-freight-sync-retry {
    display: block;
    min-height: 44px;
    margin-top: 8px;
    padding: 8px 12px;
    border: 1px solid currentColor;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font-weight: 700;
}
.mob-freight-booksheet .mob-filter-input[aria-invalid="true"] {
    border-color: var(--mob-tone-danger-border);
    box-shadow: 0 0 0 2px var(--mob-tone-danger-bg);
}
.mob-freight-booksheet .mob-filter-input:focus-visible,
.mob-freight-booksheet .mob-freight-submit:focus-visible {
    outline: 2px solid var(--mob-accent-on-surface);
    outline-offset: 2px;
}
@media (max-width: 430px) {
    .mob-freight-booksheet .mob-freight-grid2,
    .mob-freight-booksheet .mob-freight-grid-zip {
        grid-template-columns: minmax(0, 1fr);
    }
}
.mob-freight-bookrow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: var(--mobile-text-secondary);
}
.mob-freight-bookrow strong { color: var(--mobile-text); font-weight: 600; }
.mob-freight-booktotal { color: var(--mob-tone-success-fg) !important; font-size: 17px; }
.mob-freight-bookresult { margin-top: 4px; }
.mob-freight-booked { display: flex; flex-direction: column; gap: 8px; text-align: left; }
.mob-freight-booked-icon {
    align-self: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--mob-tone-success-bg);
    color: var(--mob-tone-success-fg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: 700;
}
.mob-freight-booked-title { text-align: center; font-size: 17px; font-weight: 700; color: var(--mobile-text); margin-bottom: 4px; }
/* ---------- Shipment Tracking ---------- */
.mob-track-screen { padding: 12px 14px 32px; }
.mob-track-searchbar { position: sticky; top: 0; z-index: 5; background: var(--mobile-bg); padding-bottom: 10px; }
.mob-track-inputrow { display: flex; gap: 8px; align-items: stretch; }
.mob-track-inputrow .mob-filter-input { flex: 1 1 auto; }
.mob-track-scan {
    flex: 0 0 auto;
    width: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mobile-card);
    border: 1px solid var(--mobile-border);
    color: var(--mobile-text);
    border-radius: 10px;
    -webkit-tap-highlight-color: transparent;
}
.mob-track-scan svg { width: 22px; height: 22px; }
.mob-track-scan:active { opacity: 0.8; }
.mob-track-chips { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.mob-track-chips::-webkit-scrollbar { display: none; }
.mob-track-chip {
    flex: 0 0 auto;
    background: var(--mobile-card);
    border: 1px solid var(--mobile-border);
    color: var(--mobile-text-secondary);
    border-radius: 999px;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
}
.mob-track-chip.active { background: var(--mobile-accent); border-color:var(--mob-accent-on-surface); color: #fff; }
.mob-track-go {
    width: 100%;
    margin-top: 10px;
    padding: 12px;
    background: var(--mobile-accent);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
}
.mob-track-go:active { opacity: 0.85; }
.mob-track-body { margin-top: 4px; }
.mob-track-detail { display: flex; flex-direction: column; gap: 14px; }
.mob-track-hero {
    background: var(--mobile-card);
    border: 1px solid var(--mobile-border);
    border-left: 4px solid #3b82f6;
    border-radius: 12px;
    padding: 14px;
}
.mob-track-hero--delivered { border-left-color: var(--mob-tone-success-fg); }
.mob-track-hero--exception { border-left-color: var(--mob-tone-danger-fg); }
.mob-track-hero--outfordelivery { border-left-color: var(--mob-tone-warn-fg); }
.mob-track-hero-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mob-track-carrier { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--mobile-text-muted); }
.mob-track-pill {
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--mob-tone-info-bg);
    color: var(--mob-tone-info-fg);
    border: 1px solid var(--mob-tone-info-border);
}
.mob-track-pill--delivered { background: var(--mob-tone-success-bg); color: var(--mob-tone-success-fg); border-color: var(--mob-tone-success-border); }
.mob-track-pill--exception { background: var(--mob-tone-danger-bg); color: var(--mob-tone-danger-fg); border-color: var(--mob-tone-danger-border); }
.mob-track-pill--outfordelivery { background: var(--mob-tone-warn-bg); color: var(--mob-tone-warn-fg); border-color: var(--mob-tone-warn-border); }
.mob-track-num { margin-top: 8px; font-size: 17px; font-weight: 700; color: var(--mobile-text); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; }
.mob-track-route {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--mobile-card);
    border: 1px solid var(--mobile-border);
    border-radius: 10px;
    padding: 12px;
}
.mob-track-route-end { flex: 1 1 0; min-width: 0; }
.mob-track-route-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--mobile-text-muted); }
.mob-track-route-val { font-size: 14px; font-weight: 600; color: var(--mobile-text); margin-top: 2px; }
.mob-track-route-arrow { flex: 0 0 auto; color: var(--mobile-text-muted); font-size: 18px; }
.mob-track-meta { display: grid; grid-template-columns: 1fr; gap: 6px 14px; }
.mob-track-tl { list-style: none; margin: 0; padding: 4px 0 0; }
.mob-track-tl-item { position: relative; display: flex; gap: 12px; padding: 0 0 16px 4px; }
.mob-track-tl-item::before {
    content: '';
    position: absolute;
    left: 9px;
    top: 14px;
    bottom: -2px;
    width: 2px;
    background: var(--mobile-border);
}
.mob-track-tl-item:last-child { padding-bottom: 0; }
.mob-track-tl-item:last-child::before { display: none; }
.mob-track-tl-dot {
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    margin-top: 3px;
    border-radius: 50%;
    background: var(--mobile-card);
    border: 2px solid var(--mobile-text-muted);
    z-index: 1;
}
.mob-track-tl-item.is-latest .mob-track-tl-dot { background: var(--mobile-accent); border-color:var(--mob-accent-on-surface); }
.mob-track-tl-content { flex: 1 1 auto; min-width: 0; }
.mob-track-tl-desc { font-size: 14px; font-weight: 600; color: var(--mobile-text); line-height: 1.3; }
.mob-track-tl-item.is-latest .mob-track-tl-desc { color: var(--mobile-text); }
.mob-track-tl-meta { font-size: 12px; color: var(--mobile-text-muted); margin-top: 2px; }
.mob-track-ext {
    display: inline-block;
    text-align: center;
    padding: 11px;
    background: var(--mobile-card);
    border: 1px solid var(--mobile-border);
    border-radius: 10px;
    color:var(--mob-accent-on-surface);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

/* ---------- Tasks / Follow-ups ---------- */
.mob-tasks-screen { padding: 0 0 90px; }
.mob-tasks-toolbar { position: sticky; top: 0; z-index: 5; background: var(--mobile-bg); padding: 12px 14px 8px; border-bottom: 1px solid var(--mobile-border); }
.mob-tasks-chips { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.mob-tasks-chips::-webkit-scrollbar { display: none; }
.mob-tasks-chip {
    flex: 0 0 auto;
    background: var(--mobile-card);
    border: 1px solid var(--mobile-border);
    color: var(--mobile-text-secondary);
    border-radius: 999px;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 600;
}
.mob-tasks-chip.active { background: var(--mobile-accent); border-color:var(--mob-accent-on-surface); color: #fff; }
.mob-tasks-body { padding: 12px 14px; }
.mob-tasks-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.mob-task-card {
    background: var(--mobile-card);
    border: 1px solid var(--mobile-border);
    border-radius: 12px;
    padding: 12px 14px;
}
.mob-task-card.done { opacity: 0.6; }
.mob-task-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.mob-task-title { font-size: 15px; font-weight: 600; color: var(--mobile-text); line-height: 1.3; }
.mob-task-card.done .mob-task-title { text-decoration: line-through; }
.mob-task-badge {
    flex: 0 0 auto;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--mobile-card-strong, #273449);
    color: var(--mobile-text-secondary);
}
.mob-task-badge.overdue { background: rgba(231, 76, 60, 0.18); color: var(--mob-accent-on-surface); }
.mob-task-badge.done { background: var(--mob-tone-success-bg); color: var(--mob-tone-success-fg); }
.mob-task-desc { font-size: 13px; color: var(--mobile-text-secondary); margin-top: 6px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mob-task-meta { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-top: 8px; font-size: 12px; color: var(--mobile-text-muted); }
.mob-task-due.overdue { color: var(--mob-accent-on-surface); font-weight: 600; }
.mob-task-link { color:var(--mob-accent-on-surface); }
/* Task #1606: Eclipse tracker chip on a task card. */
.mob-task-trk { color: var(--mobile-text-muted); }
.mob-task-trk.queued { color: var(--mobile-text-secondary); }
.mob-task-trk.failed { color: var(--mob-accent-on-surface); font-weight: 600; }
.mob-task-actions { display: flex; gap: 8px; margin-top: 10px; }
.mob-task-act {
    flex: 1;
    height: 38px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid var(--mobile-border);
    background: var(--mobile-bg);
    color: var(--mobile-text);
}
.mob-task-act.complete { background: var(--mob-tone-success-bg); border-color: var(--mob-tone-success-border); color: var(--mob-tone-success-fg); }
.mob-task-act:active { transform: scale(0.97); }

/* ---------- Outside-Sales CRM ---------- */
.mob-crm-screen { padding: 14px 14px 40px; display: flex; flex-direction: column; gap: 16px; }
.mob-crm-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mob-crm-tile {
    background: var(--mobile-card);
    border: 1px solid var(--mobile-border);
    border-radius: 12px;
    padding: 14px 8px;
    text-align: center;
}
.mob-crm-tile-val { font-size: 22px; font-weight: 700; color: var(--mobile-text); }
.mob-crm-tile-label { font-size: 11px; color: var(--mobile-text-muted); margin-top: 4px; }
.mob-crm-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mob-crm-action {
    background: var(--mobile-card);
    border: 1px solid var(--mobile-border);
    border-radius: 12px;
    padding: 12px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--mobile-text-secondary);
}
.mob-crm-action:active { transform: scale(0.96); }
.mob-crm-sectiontitle { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--mobile-text-muted); }
.mob-crm-reminders, .mob-crm-visits { display: flex; flex-direction: column; gap: 8px; }
.mob-crm-rem {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--mobile-card);
    border: 1px solid var(--mobile-border);
    border-radius: 10px;
    padding: 10px 12px;
}
.mob-crm-rem.overdue { border-left: 4px solid #e74c3c; }
.mob-crm-rem-main { flex: 1; min-width: 0; }
.mob-crm-rem-title { font-size: 14px; font-weight: 600; color: var(--mobile-text); }
.mob-crm-rem-sub { font-size: 12px; color: var(--mobile-text-muted); margin-top: 2px; }
.mob-crm-rem-done {
    flex: 0 0 auto;
    border: 1px solid var(--mob-tone-success-border);
    background: var(--mob-tone-success-bg);
    color: var(--mob-tone-success-fg);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 600;
}
.mob-crm-visit {
    display: flex;
    gap: 10px;
    background: var(--mobile-card);
    border: 1px solid var(--mobile-border);
    border-radius: 10px;
    padding: 10px 12px;
}
.mob-crm-visit-icon { font-size: 20px; flex: 0 0 auto; }
.mob-crm-visit-main { flex: 1; min-width: 0; }
.mob-crm-visit-cust { font-size: 14px; font-weight: 600; color: var(--mobile-text); }
.mob-crm-visit-sub { font-size: 12px; color: var(--mobile-text-muted); margin-top: 2px; }
.mob-crm-visit-summary { font-size: 13px; color: var(--mobile-text-secondary); margin-top: 4px; line-height: 1.4; }

/* CRM forms in bottom sheet */
.mob-crm-form { display: flex; flex-direction: column; gap: 6px; padding-bottom: 12px; }
.mob-crm-form .mob-filter-label { margin-top: 8px; }
.mob-crm-form textarea.mob-filter-input { height: auto; padding: 10px 12px; line-height: 1.4; }
.mob-crm-gps { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--mobile-text-secondary); margin-top: 12px; }
.mob-crm-gps input { width: 18px; height: 18px; }

/* Shared customer picker */
.mob-cust-pick { position: relative; }
.mob-cust-pick-results { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; max-height: 220px; overflow-y: auto; }
.mob-cust-pick-row {
    text-align: left;
    background: var(--mobile-bg);
    border: 1px solid var(--mobile-border);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 14px;
    color: var(--mobile-text);
}
.mob-cust-pick-id { color: var(--mobile-text-muted); font-size: 12px; }
.mob-cust-pick-chosen { margin-top: 8px; font-size: 13px; color: var(--mob-tone-success-fg); }

/* CRM: My customers + view-all visits */
.mob-crm-sectiontitle-row { display: flex; align-items: center; justify-content: space-between; }
.mob-crm-viewall {
    background: none; border: none; color:var(--mob-accent-on-surface);
    font-size: 13px; font-weight: 600; padding: 4px 6px; cursor: pointer;
}
.mob-crm-customers { display: flex; flex-direction: column; gap: 8px; }
.mob-crm-cust {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
    background: var(--mobile-card, #1c1f26); border: 1px solid var(--mobile-border, #2a2e37);
    border-radius: 12px; padding: 12px 14px; color: var(--mobile-text); cursor: pointer;
}
.mob-crm-cust:active { background: var(--mobile-card-active, #252934); }
.mob-crm-cust-main { flex: 1; min-width: 0; }
.mob-crm-cust-name { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mob-crm-cust-sub { font-size: 12px; color: var(--mobile-text-muted); margin-top: 2px; }
.mob-crm-cust-badge {
    flex-shrink: 0; font-size: 11px; font-weight: 700; color: #fff;
    background: #e74c3c; border-radius: 999px; padding: 3px 8px;
}
.mob-crm-cust-arrow { flex-shrink: 0; color: var(--mobile-text-muted); font-size: 18px; }
.mob-tasks-sentinel { height: 1px; }

/* Messenger: full-screen, mobile-optimized when the mobile shell is active */
.messenger-mobile-back, .messenger-mobile-phone { display: none; }
body.mobile-app-active #messenger-header { gap: 4px; padding: 8px !important; }
body.mobile-app-active #messenger-header > div { min-width: 0; gap: 2px !important; }
body.mobile-app-active #messenger-header button {
    min-width: 44px !important; min-height: 44px !important; flex-shrink: 0;
}
body.mobile-app-active .messenger-mobile-back,
body.mobile-app-active .messenger-mobile-phone {
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: none; color: #fff; border-radius: 8px;
}
body.mobile-app-active .messenger-mobile-back svg,
body.mobile-app-active .messenger-mobile-phone svg { width: 22px; height: 22px; }
body.mobile-app-active #messenger-header button:focus-visible {
    outline: 3px solid #64cef7; outline-offset: -3px;
}
body.mobile-app-active #messenger-header button[title="Minimize"],
body.mobile-app-active #messenger-header button[title="Close"] { display: none; }
body.mobile-app-active .mob-topbar-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.mobile-app-active #messenger-panel {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    /* messenger.js sets --msgr-vvh from visualViewport so the composer
       stays above the on-screen keyboard (iOS doesn't shrink 100dvh). */
    height: var(--msgr-vvh, 100dvh) !important;
    max-height: none !important;
    border: none !important;
    border-radius: 0 !important;
    z-index: 9998 !important;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-sizing: border-box;
}
/* Lock background scroll while the full-screen messenger is open */
body.mobile-app-active.messenger-open { overflow: hidden; }
/* Larger tap targets for the chat-header call/PTT controls on touch */
body.mobile-app-active #chat-header button { padding: 8px !important; }
body.mobile-app-active #chat-header button svg { width: 20px !important; height: 20px !important; }
/* 16px inputs prevent iOS Safari from auto-zooming the page on focus */
body.mobile-app-active #messenger-panel #chat-input,
body.mobile-app-active #messenger-panel #messenger-search-input {
    font-size: 16px !important;
    min-height: 40px;
}
/* Comfortable touch rows for buddy / conversation / search-result lists */
body.mobile-app-active #messenger-body > div[onclick],
body.mobile-app-active #messenger-search-results > div[onclick] {
    min-height: 52px;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}
/* Bigger tab hit areas (Buddies / Chats / Calls) */
body.mobile-app-active #messenger-tabs button {
    padding: 12px 8px !important;
    font-size: 13px !important;
}
/* Incoming call / PTT prompt: never overflow narrow screens, and keep the
   Accept/Decline buttons thumb-sized */
body.mobile-app-active #messenger-incoming-call {
    width: min(340px, 92vw) !important;
    max-width: 92vw !important;
    top: calc(env(safe-area-inset-top, 0px) + 16px) !important;
    box-sizing: border-box;
}
body.mobile-app-active #messenger-incoming-call button {
    min-height: 46px;
}
/* Call-waiting banner (second incoming call while on a call) */
body.mobile-app-active #messenger-call-waiting {
    width: min(420px, 94vw) !important;
    top: calc(env(safe-area-inset-top, 0px) + 12px) !important;
    box-sizing: border-box;
}

/* ===== NATIVE MOBILE CART SCREEN ===== */
.mob-empty-sub {
    margin-top: 6px;
    font-size: 13px;
    color: var(--mobile-text-muted);
    text-align: center;
}
.mob-cartv-screen { padding: 4px 0 24px; }
.mob-cartv-list { display: flex; flex-direction: column; gap: 10px; }
.mob-cartv-item {
    background: var(--mobile-card);
    border: 1px solid var(--mobile-border);
    border-radius: 14px;
    padding: 12px;
}
.mob-cartv-item-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}
.mob-cartv-item-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--mobile-text);
    line-height: 1.3;
    min-width: 0;
    overflow-wrap: anywhere;
}
.mob-cartv-remove {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    min-width: 32px;
    border: none;
    border-radius: 10px;
    background: var(--mobile-bg);
    color: var(--mobile-text-muted);
    font-size: 14px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.mob-cartv-remove:active { background: rgba(231, 76, 60, 0.18); color: var(--mob-accent-on-surface); }
.mob-cartv-item-sub {
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--mobile-text-secondary);
}
.mob-cartv-item-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}
.mob-cartv-item-uom {
    font-size: 12px;
    font-weight: 600;
    color: var(--mobile-text-muted);
    letter-spacing: 0.03em;
}
.mob-cartv-item-total {
    margin-left: auto;
    font-size: 14px;
    font-weight: 700;
    color: var(--mobile-text);
    font-variant-numeric: tabular-nums;
}
.mob-cartv-footer {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--mobile-border);
}
.mob-cartv-totrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    color: var(--mobile-text-secondary);
}
.mob-cartv-totrow strong { color: var(--mobile-text); font-size: 15px; }
.mob-cartv-secondary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px;
}
.mob-cartv-linkbtn {
    background: none;
    border: none;
    color: var(--mobile-text-secondary);
    font-size: 13px;
    font-family: inherit;
    padding: 10px 8px;
    min-height: 44px;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    -webkit-tap-highlight-color: transparent;
}
.mob-cartv-linkbtn:active { color: var(--mobile-text); }
.mob-cartv-checkout { padding-bottom: 8px; }
.mob-cartv-custpicked {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: rgba(99, 102, 241, 0.10);
    border: 1px solid rgba(99, 102, 241, 0.32);
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 10px;
    font-size: 14px;
    color: var(--mobile-text);
}
.mob-cartv-custpicked span { font-size: 12px; color: var(--mobile-text-secondary); }
.mob-cartv-custpicked.empty {
    background: var(--mobile-card);
    border-color: var(--mobile-border);
    color: var(--mobile-text-muted);
}
.mob-cartv-bidrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 0 4px;
    font-size: 14px;
    color: var(--mobile-text);
    min-height: 44px;
    cursor: pointer;
}
.mob-cartv-bidrow input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--mob-accent-on-surface);
    flex: 0 0 auto;
}
.mob-cartv-shipnote {
    font-size: 12px;
    color: var(--mobile-text-muted);
    margin: 4px 0 6px;
    line-height: 1.4;
}

/* ===== SO WIZARD: QTY STEPPER + CUSTOM SHIP-TO FORM ===== */
.mob-so-wiz-line-qty {
    display: flex;
    align-items: stretch;
    flex: 0 0 auto;
    border: 1px solid var(--mob-border, var(--mobile-border));
    border-radius: 10px;
    overflow: hidden;
    background: var(--mob-bg, var(--mobile-bg));
    width: 118px;
    height: 40px;
}
.mob-so-wiz-qty-btn {
    flex: 0 0 36px;
    border: none;
    background: var(--mob-card, var(--mobile-card));
    color: var(--mob-text, var(--mobile-text));
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.mob-so-wiz-qty-btn:active { background: var(--mob-border, var(--mobile-border)); }
.mob-so-wiz-qty-input {
    flex: 1;
    width: 100%;
    min-width: 0;
    border: none;
    background: transparent;
    text-align: center;
    color: var(--mob-text, var(--mobile-text));
    font-size: 16px;
    font-weight: 600;
    font-family: inherit;
    outline: none;
}
/* Per-line unit of measure + length (feet/inches) entry — task #1166 */
.mob-so-wiz-line-controls {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex: 0 0 auto;
}
.mob-so-wiz-line-uom,
.mob-so-wiz-line-uom-fixed {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--mob-text-secondary, var(--mobile-text-muted));
    text-transform: uppercase;
}
.mob-so-wiz-line-uom {
    height: 30px;
    padding: 0 6px;
    border: 1px solid var(--mob-border, var(--mobile-border));
    border-radius: 8px;
    background: var(--mob-bg, var(--mobile-bg));
    color: var(--mob-text, var(--mobile-text));
    font-family: inherit;
}
.mob-so-wiz-line-len {
    display: flex;
    gap: 6px;
}
.mob-so-wiz-len-field {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 74px;
    height: 40px;
    padding: 0 6px;
    border: 1px solid var(--mob-border, var(--mobile-border));
    border-radius: 10px;
    background: var(--mob-bg, var(--mobile-bg));
}
.mob-so-wiz-len-field input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    text-align: right;
    color: var(--mob-text, var(--mobile-text));
    font-size: 16px;
    font-weight: 600;
    font-family: inherit;
    outline: none;
}
.mob-so-wiz-len-field span {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 700;
    color: var(--mob-text-secondary, var(--mobile-text-muted));
}

.mob-so-wiz-shipto-form { margin-top: 12px; }
.mob-so-wiz-shipto-grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* iOS zoom guard: SO wizard / mobile module fields must be >=16px.
   (--mob-text-base is 15px, which triggers input-focus zoom on iPhones.) */
.mob-so-field input,
.mob-so-field select,
.mob-so-field textarea { font-size: 16px; }

/* ===== SO WIZARD: FULL HEADER FORM + PER-LINE DETAILS ===== */
.mob-so-field-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.mob-so-wiz-subhead {
    margin: 6px 0 -2px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mob-text-muted, var(--mobile-text-muted));
}
.mob-so-wiz-subhead:not(:first-child) {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--mob-border, var(--mobile-border));
}
.mob-so-wiz-hint {
    font-size: 11px;
    line-height: 1.4;
    color: var(--mob-text-secondary, var(--mobile-text-muted));
    margin-top: -2px;
}
.mob-so-wiz-linkbtn {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--mob-accent-on-surface, var(--mobile-accent));
    text-decoration: underline;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
/* The ship-via type-ahead anchors its absolutely-positioned dropdown here. */
.mob-so-shipvia-wrap {
    display: block;
    position: relative;
}
/* Line rows gain a full-width details panel, so they must wrap. */
.mob-so-wiz-line { flex-wrap: wrap; }
.mob-so-wiz-line-more {
    margin-top: 6px;
    padding: 0;
    background: none;
    border: none;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    color: var(--mob-accent-on-surface, var(--mobile-accent));
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.mob-so-wiz-line-details {
    flex: 1 0 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--mob-border, var(--mobile-border));
}

/* ==========================================================================
   IN-APP DOCUMENT VIEWER (#mobDocViewer)
   Full-screen viewer with an explicit Back button so installed-PWA users
   (no browser chrome) are never stranded inside a window.open'd document.
   ========================================================================== */
.mob-docviewer {
    position: fixed;
    inset: 0;
    z-index: 9720;
    background: var(--mob-bg);
    transform: translateX(100%);
    transition: transform 0.35s var(--mob-motion-ease), visibility 0s 0.35s;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Fully invisible while closed — the JS also toggles display:none, but
       this guarantees the Back/share/download chrome can never leak below
       the tab bar even if the element is left in flow (stale JS/CSS). */
    visibility: hidden;
    pointer-events: none;
}
.mob-docviewer.active {
    transform: translateX(0);
    transition: transform 0.35s var(--mob-motion-ease), visibility 0s 0s;
    visibility: visible;
    pointer-events: auto;
}
.mob-docviewer-topbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    padding-top: calc(8px + var(--mob-safe-top));
    background: var(--mob-bg-elev);
    border-bottom: 1px solid var(--mob-border);
    flex-shrink: 0;
}
.mob-docviewer-title {
    flex: 1;
    min-width: 0;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    color: var(--mob-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mob-docviewer-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}
.mob-docviewer-actions .mob-topbar-btn svg {
    width: 20px;
    height: 20px;
}
.mob-docviewer-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: #000;
}
.mob-docviewer-framewrap {
    flex: 1;
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
.mob-docviewer-frame {
    width: 100%;
    height: 100%;
    border: none;
    background: #fff;
}
.mob-docviewer-imgwrap {
    flex: 1;
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
}
.mob-docviewer-imgwrap img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* ==========================================================================
   PHONE BUTTON (mobile top bar) + phone UI fit on small screens
   ========================================================================== */
#mobPhoneBtn {
    position: relative;
}
#mobPhoneBtn .mob-phone-dot {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 1.5px solid var(--mob-bg);
    pointer-events: none;
}

/* Phone modal (dialer / panel / transfer / add / parties / save contact)
   → native-feeling bottom sheet on mobile: slide-up entrance, grabber
   handle, internal scrolling, safe-area padding, sticky action row, big
   circular keypad, 16px inputs (no iOS focus zoom), 44px touch targets. */
@keyframes mobWbpSheetUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}
body.mobile-app-active #wbPhoneModal.wbp-overlay {
    align-items: flex-end;
    justify-content: stretch;
    background: var(--mob-overlay);
}
body.mobile-app-active #wbPhoneModal .wbp-modal {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px 20px 0 0;
    background: #16162a;
    max-height: calc(100dvh - var(--mob-safe-top) - 24px);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 26px 18px calc(14px + var(--mob-safe-bottom));
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.45);
    animation: mobWbpSheetUp 0.3s var(--mob-motion-decelerate);
    position: relative;
}
/* Grabber handle */
body.mobile-app-active #wbPhoneModal .wbp-modal::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.22);
}
body.mobile-app-active #wbPhoneModal .wbp-modal-title {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-align: center;
    margin-bottom: 14px;
}
/* Inputs: 16px minimum so iOS never zooms on focus; comfortable height */
body.mobile-app-active #wbPhoneModal .wbp-input {
    font-size: 16px;
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 12px;
}
body.mobile-app-active #wbPhoneModal select.wbp-input { min-height: 44px; }
/* Buttons: iOS 44px minimum touch target */
body.mobile-app-active #wbPhoneModal .wbp-btn {
    min-height: 44px;
    padding: 10px 16px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 12px;
    flex: 1;
}
body.mobile-app-active #wbPhoneModal .wbp-row { gap: 10px; }
body.mobile-app-active #wbPhoneModal .wbp-check { min-height: 32px; }
/* Dialer number input: big, centered, phone-like */
body.mobile-app-active #wbPhoneModal #wbpDialNumber {
    font-size: 22px;
    font-weight: 600;
    text-align: center;
    letter-spacing: 0.02em;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 0;
    min-height: 52px;
    margin-bottom: 4px;
}
body.mobile-app-active #wbPhoneModal #wbpDialNumber:focus { outline: none; }
/* Keypad: large circular keys like a native dialer */
body.mobile-app-active #wbPhoneModal .wbp-keypad {
    grid-template-columns: repeat(3, minmax(44px, 72px));
    justify-content: center;
    column-gap: clamp(12px, 6vw, 26px);
    row-gap: 14px;
    margin: 14px 0 10px;
}
body.mobile-app-active #wbPhoneModal .wbp-key {
    width: 100%;
    max-width: 72px;
    aspect-ratio: 1;
    height: auto;
    min-height: 44px;
    border-radius: 50%;
    font-size: 28px;
    font-weight: 500;
    padding: 0;
    border: none;
    background: #2c2c44;
    color: #eee;
    -webkit-tap-highlight-color: transparent;
}
body.mobile-app-active #wbPhoneModal .wbp-key:active {
    background: #3a3a58;
    transform: scale(0.94);
}
/* Coworker / contact suggestion rows: bigger touch targets */
body.mobile-app-active #wbPhoneModal .wbp-cowork,
body.mobile-app-active #wbPhoneModal .wbp-contact {
    min-height: 48px;
    padding: 10px 14px;
    font-size: 15px;
    border-radius: 12px;
}
/* Action row sticks to the bottom of the sheet above the home indicator */
body.mobile-app-active #wbPhoneModal .wbp-modal-actions {
    position: sticky;
    bottom: calc(-14px - var(--mob-safe-bottom));
    margin: 12px -18px calc(-14px - var(--mob-safe-bottom));
    padding: 12px 18px calc(12px + var(--mob-safe-bottom));
    background: #16162a;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    justify-content: stretch;
    z-index: 2;
}
body.mobile-app-active #wbPhoneModal .wbp-modal-actions .wbp-btn { flex: 1; }
/* The dialer's green Call button dominates; Cancel stays secondary */
body.mobile-app-active #wbPhoneModal #wbpDialGo { flex: 2; font-size: 17px; }
/* Panel (Calls / Voicemail / Dashboard / Settings) tabs scroll on phones */
body.mobile-app-active #wbPhoneModal .wbp-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
}
body.mobile-app-active #wbPhoneModal .wbp-tabs::-webkit-scrollbar { display: none; }
body.mobile-app-active #wbPhoneModal .wbp-tab {
    min-height: 40px;
    font-size: 15px;
    white-space: nowrap;
    flex-shrink: 0;
}
body.mobile-app-active #wbPhoneModal .wbp-tabs .wbp-btn { flex: 0 0 auto; min-height: 38px; }
/* Wide (panel/settings) sheet uses nearly the full height */
body.mobile-app-active #wbPhoneModal .wbp-modal.wide {
    width: 100% !important;
    height: calc(100dvh - var(--mob-safe-top) - 24px);
}
/* Settings tables scroll horizontally instead of clipping */
body.mobile-app-active #wbPhoneModal .wbp-table { display: block; overflow-x: auto; }

/* Task #2145 — Dialer is deliberately mode-driven, not focus-driven. The
   keyboard may cover part of the viewport, but never removes Close, Call,
   selected destination or the route back to the keypad. */
body.mobile-app-active #wbPhoneModal .wbp-modal.wbp-dial-modal {
    height: min(calc(var(--wbp-dial-vh, 100dvh) - var(--mob-safe-top) - 12px), calc(100dvh - var(--mob-safe-top) - 12px));
    max-height: none;
    overflow: hidden;
    padding-bottom: 0;
    margin-bottom: var(--wbp-dial-keyboard, 0px);
    background: var(--mob-card);
    color: var(--mob-text);
}
body.mobile-app-active #wbPhoneModal .wbp-dial-modal .wbp-dial-head {
    flex: 0 0 auto;
    min-height: 44px;
}
body.mobile-app-active #wbPhoneModal .wbp-dial-modal .wbp-dial-close,
body.mobile-app-active #wbPhoneModal .wbp-dial-modal .wbp-dial-backspace {
    min-width: 44px;
    min-height: 44px;
    color: var(--mob-accent-on-surface);
    font-size: 15px;
    font-weight: 650;
}
body.mobile-app-active #wbPhoneModal .wbp-dial-modal .wbp-dial-destination {
    flex: 0 0 auto;
    padding: 5px 4px 7px;
    color: var(--mob-text-secondary);
    font-size: 13px;
}
body.mobile-app-active #wbPhoneModal .wbp-dial-modal .wbp-dial-entry {
    flex: 0 0 auto;
    border-bottom: 1px solid var(--mob-border);
}
/* Only this middle column scrolls. Header, destination, input, mode switch,
   progress and Call actions are outside it, so keyboard viewport changes can
   never push the only recovery controls below the visible bottom edge. */
body.mobile-app-active #wbPhoneModal .wbp-dial-modal .wbp-dial-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
body.mobile-app-active #wbPhoneModal .wbp-dial-modal #wbpDialNumber {
    margin: 0;
    color: var(--mob-text);
    caret-color: var(--mob-text);
    -webkit-text-fill-color: var(--mob-text);
}
body.mobile-app-active #wbPhoneModal .wbp-dial-modal #wbpDialNumber::placeholder {
    color: var(--mob-text-secondary);
    -webkit-text-fill-color: var(--mob-text-secondary);
    opacity: 1;
}
body.mobile-app-active #wbPhoneModal .wbp-dial-mode {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    flex: 0 0 auto;
    padding: 10px 0 6px;
}
body.mobile-app-active #wbPhoneModal .wbp-dial-mode button {
    min-height: 44px;
    border: 1px solid var(--mob-border);
    border-radius: 10px;
    background: var(--mob-card-strong);
    color: var(--mob-text-secondary);
    font: inherit;
    font-size: 14px;
    font-weight: 650;
}
body.mobile-app-active #wbPhoneModal .wbp-dial-mode button.on {
    background: var(--mob-accent);
    border-color: var(--mob-accent);
    color: var(--mob-action-fg);
}
body.mobile-app-active #wbPhoneModal .wbp-dial-modal .wbp-dial-tabs,
body.mobile-app-active #wbPhoneModal .wbp-dial-modal .wbp-cowork-list,
body.mobile-app-active #wbPhoneModal .wbp-dial-modal .wbp-contact-list {
    display: none;
}
body.mobile-app-active #wbPhoneModal .wbp-dial-modal.wbp-search-mode .wbp-dial-tabs {
    display: flex;
    flex: 0 0 auto;
    overflow-x: auto;
    padding-bottom: 4px;
    margin: 0;
    flex-wrap: nowrap;
}
body.mobile-app-active #wbPhoneModal .wbp-dial-modal.wbp-search-mode .wbp-dial-tabs button {
    min-height: 44px;
    flex: 0 0 auto;
    padding: 8px 11px;
}
body.mobile-app-active #wbPhoneModal .wbp-dial-modal.wbp-search-mode .wbp-cowork-list,
body.mobile-app-active #wbPhoneModal .wbp-dial-modal.wbp-search-mode .wbp-contact-list {
    display: block;
    flex: 0 0 auto;
}
body.mobile-app-active #wbPhoneModal .wbp-dial-modal.wbp-search-mode .wbp-cowork-list {
    flex: 0 1 38%;
}
body.mobile-app-active #wbPhoneModal .wbp-dial-modal.wbp-search-mode .wbp-contact-list {
    flex: 1 1 auto;
    min-height: 80px;
    padding-bottom: 8px;
}
body.mobile-app-active #wbPhoneModal .wbp-dial-modal:not(.wbp-search-mode) .wbp-keypad {
    flex: 0 0 auto;
    margin: 8px 0;
}
body.mobile-app-active #wbPhoneModal .wbp-dial-modal.wbp-search-mode .wbp-keypad,
body.mobile-app-active #wbPhoneModal .wbp-dial-modal.wbp-search-mode .wbp-callfrom {
    display: none;
}
body.mobile-app-active #wbPhoneModal .wbp-dial-modal .wbp-callfrom {
    flex: 0 0 auto;
    max-height: 106px;
    overflow-y: auto;
}
body.mobile-app-active #wbPhoneModal .wbp-dial-modal .wbp-key {
    background: var(--mob-card-strong);
    color: var(--mob-text);
}
body.mobile-app-active #wbPhoneModal .wbp-dial-modal .wbp-key:active {
    background: var(--mob-press-strong);
}
body.mobile-app-active #wbPhoneModal .wbp-dial-modal .wbp-cowork,
body.mobile-app-active #wbPhoneModal .wbp-dial-modal .wbp-contact {
    background: var(--mob-card-strong);
    border-color: var(--mob-border);
    color: var(--mob-text);
}
body.mobile-app-active #wbPhoneModal .wbp-dial-modal .wbp-cowork-ext,
body.mobile-app-active #wbPhoneModal .wbp-dial-modal .wbp-contact-num,
body.mobile-app-active #wbPhoneModal .wbp-dial-modal .wbp-dim {
    color: var(--mob-text-secondary);
}
body.mobile-app-active #wbPhoneModal .wbp-dial-modal .wbp-dial-tabs button {
    background: var(--mob-card-strong);
    border-color: var(--mob-border);
    color: var(--mob-text-secondary);
}
body.mobile-app-active #wbPhoneModal .wbp-dial-modal .wbp-dial-tabs button.on {
    background: var(--mob-accent);
    border-color: var(--mob-accent);
    color: var(--mob-action-fg);
}
body.mobile-app-active #wbPhoneModal .wbp-dial-modal .wbp-contact-tag {
    color: var(--mob-text-secondary);
    background: var(--mob-card);
}
body.mobile-app-active #wbPhoneModal .wbp-dial-modal .wbp-dial-status {
    flex: 0 0 auto;
    padding: 5px 2px;
    color: var(--mob-text-secondary);
}
body.mobile-app-active #wbPhoneModal .wbp-dial-modal .wbp-dial-status-error {
    color: var(--mob-tone-danger-fg);
}
body.mobile-app-active #wbPhoneModal .wbp-dial-modal .wbp-dial-recovery {
    flex: 0 0 auto;
    padding: 0 0 6px;
}
body.mobile-app-active #wbPhoneModal .wbp-dial-modal .wbp-dial-recovery .wbp-btn {
    width: 100%;
    color: var(--mob-text);
    background: var(--mob-tone-warn-bg);
    border-color: var(--mob-tone-warn-border);
}
body.mobile-app-active #wbPhoneModal .wbp-dial-modal .wbp-modal-actions {
    flex: 0 0 auto;
    position: static;
    margin: 0 -18px;
    padding: 10px 18px calc(10px + var(--mob-safe-bottom));
}
/* A landscape iPhone with its keyboard open can expose only 320–400px. Keep
   the navigation and fixed action rail intact, leaving the middle column for
   at least one readable result rather than clipping it below the keyboard. */
@media (max-height: 500px) {
    body.mobile-app-active #wbPhoneModal .wbp-modal.wbp-dial-modal {
        padding: 18px 12px 0;
    }
    body.mobile-app-active #wbPhoneModal .wbp-dial-modal .wbp-dial-destination {
        min-height: 18px;
        padding: 2px 2px;
        line-height: 14px;
    }
    body.mobile-app-active #wbPhoneModal .wbp-dial-modal #wbpDialNumber {
        min-height: 44px;
        font-size: 18px;
    }
    body.mobile-app-active #wbPhoneModal .wbp-dial-modal .wbp-dial-mode {
        padding: 5px 0 3px;
    }
    body.mobile-app-active #wbPhoneModal .wbp-dial-modal:not(.wbp-search-mode) .wbp-keypad {
        grid-template-columns: repeat(3, 48px);
        gap: 5px 20px;
        margin: 3px 0;
    }
    body.mobile-app-active #wbPhoneModal .wbp-dial-modal .wbp-key {
        max-width: 48px;
        min-height: 48px;
        font-size: 22px;
    }
    body.mobile-app-active #wbPhoneModal .wbp-dial-modal .wbp-dial-mode button,
    body.mobile-app-active #wbPhoneModal .wbp-dial-modal.wbp-search-mode .wbp-dial-tabs button {
        min-height: 44px;
    }
    body.mobile-app-active #wbPhoneModal .wbp-dial-modal .wbp-modal-actions {
        margin: 0 -12px;
        gap: 8px;
        padding: 7px 12px calc(7px + var(--mob-safe-bottom));
    }
    body.mobile-app-active #wbPhoneModal .wbp-dial-modal .wbp-modal-actions .wbp-btn {
        min-height: 44px;
        min-width: 0;
        padding: 8px 10px;
    }
    body.mobile-app-active #wbPhoneModal .wbp-dial-modal.wbp-search-mode .wbp-cowork-list {
        flex-basis: 28%;
    }
}
/* visualViewport can shrink under the iOS keyboard while the layout viewport
   remains ~780px. JS applies this class from visualViewport.height so the
   compact math above is not limited to physically short windows. */
body.mobile-app-active #wbPhoneModal .wbp-modal.wbp-dial-modal.wbp-dial-compact { padding: 18px 12px 0; }
body.mobile-app-active #wbPhoneModal .wbp-dial-modal.wbp-dial-compact .wbp-dial-destination { min-height:18px; padding:2px; line-height:14px; }
body.mobile-app-active #wbPhoneModal .wbp-dial-modal.wbp-dial-compact #wbpDialNumber { min-height:44px; font-size:18px; }
body.mobile-app-active #wbPhoneModal .wbp-dial-modal.wbp-dial-compact .wbp-dial-mode { padding:5px 0 3px; }
body.mobile-app-active #wbPhoneModal .wbp-dial-modal.wbp-dial-compact:not(.wbp-search-mode) .wbp-keypad { grid-template-columns:repeat(3,48px); gap:5px 20px; margin:3px 0; }
body.mobile-app-active #wbPhoneModal .wbp-dial-modal.wbp-dial-compact .wbp-key { max-width:48px; min-height:48px; font-size:22px; }
body.mobile-app-active #wbPhoneModal .wbp-dial-modal.wbp-dial-compact .wbp-dial-mode button,
body.mobile-app-active #wbPhoneModal .wbp-dial-modal.wbp-dial-compact.wbp-search-mode .wbp-dial-tabs button { min-height:44px; }
body.mobile-app-active #wbPhoneModal .wbp-dial-modal.wbp-dial-compact .wbp-modal-actions { margin:0 -12px; gap:8px; padding:7px 12px calc(7px + var(--mob-safe-bottom)); }
body.mobile-app-active #wbPhoneModal .wbp-dial-modal.wbp-dial-compact .wbp-modal-actions .wbp-btn { min-width:0; min-height:44px; padding:8px 10px; }
body.mobile-app-active #wbPhoneModal .wbp-dial-modal.wbp-dial-compact.wbp-search-mode .wbp-cowork-list { flex-basis:28%; }

/* Task 2249: one retained phone surface, within the visual viewport. */
.wbp-mobile-overlay[hidden],
.wbp-mobile-phone .wbp-mobile-section[hidden] { display: none !important; }
body.mobile-app-active #wbPhoneModal.wbp-mobile-overlay {
    /* Messenger is a body-level full-screen panel at 9998. Phone must stack
       above it so the existing dialer and Minimize button remain reachable. */
    position: fixed !important;
    inset: 0 !important;
    z-index: 10020 !important;
    align-items: flex-start;
    padding: 0;
    background: rgba(4, 12, 24, .6);
}
body.mobile-app-active #wbPhoneModal .wbp-modal.wbp-mobile-phone {
    position: fixed;
    top: var(--wbp-mobile-top, 0px);
    bottom: auto;
    left: 0;
    width: 100%;
    max-width: none;
    height: var(--wbp-dial-vh, 100dvh);
    max-height: var(--wbp-dial-vh, 100dvh);
    margin: 0;
    padding: max(8px, env(safe-area-inset-top)) 14px max(8px, env(safe-area-inset-bottom));
    border-radius: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
    animation: none;
}
.wbp-mobile-phone .wbp-dial-head,
.wbp-mobile-phone .wbp-mobile-nav,
.wbp-mobile-phone .wbp-dial-status,
.wbp-mobile-phone .wbp-dial-recovery { flex-shrink: 0; }
.wbp-mobile-nav { display: flex; gap: 4px; padding: 8px 0; }
.wbp-mobile-nav button {
    flex: 1; min-height: 44px; border: 1px solid #637184;
    border-radius: 9px; color: inherit; background: transparent;
    font: inherit; font-size: 13px;
}
.wbp-mobile-nav button[aria-current="page"] { background: #176b92; color: white; border-color: #56b6df; }
.wbp-mobile-section { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 6px 0 12px; }
.wbp-mobile-phone .wbp-mobile-section[data-section="dialer"] { display: flex; flex-direction: column; }
body.mobile-app-active #wbPhoneModal .wbp-mobile-phone .wbp-dial-body { flex: 1 0 auto; overflow: visible; }
.wbp-mobile-phone .wbp-mobile-recent { padding: 14px 4px; border-bottom: 1px solid #637184; line-height: 1.6; }
.wbp-mobile-phone .wbp-table { min-width: 0; width: 100%; table-layout: fixed; }
.wbp-mobile-phone .wbp-table td { overflow-wrap: anywhere; white-space: normal !important; }
.wbp-mobile-phone .wbp-vm { flex-wrap: wrap; }
.wbp-mobile-phone .wbp-vm-info { min-width: 0; overflow-wrap: anywhere; }
.wbp-mobile-phone button:focus-visible { outline: 3px solid #64cef7; outline-offset: 2px; }
body.mobile-app-active.wbp-modal-open #wbPhoneModal .wbp-mobile-phone #wbPhoneCallBar {
    display: flex !important; position: relative !important; inset: auto !important;
    transform: none; width: 100%; flex-shrink: 0; max-height: 30%; overflow: auto;
    z-index: auto; box-sizing: border-box;
}

/* Incoming-call toast: keep clear of the notch, span the width, and give
   Accept/Decline real native-sized touch targets. */
body.mobile-app-active .wbp-incoming {
    top: calc(var(--mob-safe-top) + 8px) !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    max-width: none !important;
    border-radius: 18px;
}
body.mobile-app-active .wbp-incoming .wbp-inc-actions { gap: 12px; }
body.mobile-app-active .wbp-incoming .wbp-inc-actions .wbp-btn {
    flex: 1;
    min-height: 48px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 14px;
}

/* Active-call bar: sit above the tab bar instead of under it, wrap the
   control buttons, keep them thumb-sized. */
body.mobile-app-active .wbp-callbar {
    bottom: calc(var(--mob-tab-height) + var(--mob-safe-bottom) + 10px) !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    max-width: none !important;
    transform: none !important;
    flex-wrap: wrap;
    border-radius: 16px;
}
body.mobile-app-active .wbp-callbar .wbp-cb-actions { width: 100%; }
body.mobile-app-active .wbp-callbar .wbp-cbtn {
    min-height: 40px;
    padding: 8px 12px;
    font-size: 14px;
    border-radius: 10px;
    flex: 1 0 auto;
}

/* ------------------------------------------------------------------
   Sales order → Payment Methods (card vault on mobile)
   Rendered by CardVault.injectMobileOrderSection into #mobSoPaymentBody.
   Desktop reuses a dense Tailwind row built for a wide modal; these are
   the phone-sized equivalents (full-width tap targets, one line each).
   ------------------------------------------------------------------ */
.mob-cv-loading,
.mob-cv-empty {
    font-size: var(--mob-text-sm);
    color: var(--mob-text-muted);
    padding: 10px 2px;
}
.mob-cv-empty--quiet {
    color: var(--mob-text-dim);
    font-style: italic;
}
.mob-cv-row {
    display: block;
    width: 100%;
    text-align: left;
    background: var(--mob-surface-2);
    border: 1px solid var(--mob-border-soft);
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 8px;
    /* Comfortable thumb target — these rows open the card detail modal. */
    min-height: 48px;
    cursor: pointer;
}
.mob-cv-row:active {
    background: var(--mob-surface-strong);
}
.mob-cv-row-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.mob-cv-row-title {
    font-size: var(--mob-text-base);
    font-weight: 600;
    color: var(--mob-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mob-cv-row-sub {
    display: block;
    margin-top: 3px;
    font-size: var(--mob-text-sm);
    color: var(--mob-text-secondary);
}
.mob-cv-status {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 9999px;
    border: 1px solid transparent;
    white-space: nowrap;
}
.mob-cv-status--ok {
    background: var(--mob-tone-success-bg);
    color: var(--mob-tone-success-fg);
    border-color: var(--mob-tone-success-border);
}
.mob-cv-status--warn {
    background: var(--mob-tone-warn-bg);
    color: var(--mob-tone-warn-fg);
    border-color: var(--mob-tone-warn-border);
}
.mob-cv-status--info {
    background: var(--mob-tone-info-bg);
    color: var(--mob-tone-info-fg);
    border-color: var(--mob-tone-info-border);
}
.mob-cv-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}
.mob-cv-btn {
    flex: 1 1 auto;
    min-height: 44px;
    padding: 10px 12px;
    font-size: var(--mob-text-base);
    font-weight: 600;
    border-radius: 10px;
    background: var(--mob-surface-2);
    color: var(--mob-text-primary);
    border: 1px solid var(--mob-border);
    cursor: pointer;
}
.mob-cv-btn:active {
    background: var(--mob-surface-strong);
}
.mob-cv-btn--primary {
    background: var(--mob-accent);
    color: var(--mob-accent-on-surface);
    border-color: var(--mob-accent-strong);
}

/* ------------------------------------------------------------------
   More → Communication → Phone Contacts (assets/mobile-phone-contacts.js)
   Personal contacts, the shared company book, and the staff extension
   directory. The desktop equivalent is a <table>; on a phone every row is
   a full-width block with its call action on the right.
   ------------------------------------------------------------------ */
.mphc-wrap {
    padding: 12px 14px 88px;
}
.mphc-scopes {
    display: flex;
    gap: 6px;
    background: var(--mob-surface-2);
    border: 1px solid var(--mob-border-soft);
    border-radius: 10px;
    padding: 4px;
    margin-bottom: 10px;
}
.mphc-scope {
    flex: 1 1 0;
    min-height: 38px;
    border: none;
    background: transparent;
    color: var(--mob-text-secondary);
    font-size: var(--mob-text-base);
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
}
.mphc-scope.active {
    background: var(--mob-accent);
    color: var(--mob-accent-on-surface);
}
.mphc-searchbar {
    margin-bottom: 10px;
}
.mphc-search {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    font-size: var(--mob-text-base);
    color: var(--mob-text-primary);
    background: var(--mob-surface-2);
    border: 1px solid var(--mob-border);
    border-radius: 10px;
}
.mphc-search::placeholder { color: var(--mob-text-dim); }
.mphc-note {
    font-size: var(--mob-text-sm);
    color: var(--mob-text-muted);
    margin-bottom: 8px;
    line-height: 1.4;
}
.mphc-empty {
    font-size: var(--mob-text-base);
    color: var(--mob-text-muted);
    text-align: center;
    padding: 28px 10px;
    line-height: 1.5;
}
.mphc-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--mob-surface-2);
    border: 1px solid var(--mob-border-soft);
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 8px;
}
.mphc-row-info {
    flex: 1 1 auto;
    min-width: 0;
}
.mphc-row-name {
    font-size: var(--mob-text-base);
    font-weight: 600;
    color: var(--mob-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mphc-row-sub {
    font-size: var(--mob-text-sm);
    color: var(--mob-text-secondary);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mphc-row-note {
    font-size: var(--mob-text-sm);
    color: var(--mob-text-dim);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mphc-row-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
}
.mphc-btn {
    min-height: 40px;
    padding: 8px 12px;
    font-size: var(--mob-text-sm);
    font-weight: 600;
    border-radius: 8px;
    background: var(--mob-surface-strong);
    color: var(--mob-text-primary);
    border: 1px solid var(--mob-border);
    cursor: pointer;
    white-space: nowrap;
}
.mphc-btn--call {
    background: var(--mob-tone-success-bg);
    color: var(--mob-tone-success-fg);
    border-color: var(--mob-tone-success-border);
}
.mphc-btn--icon {
    min-width: 40px;
    padding: 8px 10px;
    font-size: 18px;
    line-height: 1;
}
/* Add-contact FAB — sits above the detail screen's own bottom padding. */
.mphc-fab {
    position: fixed;
    right: 18px;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    width: 56px;
    height: 56px;
    border-radius: 50%;
    font-size: 26px;
    line-height: 1;
    font-weight: 400;
    background: var(--mob-accent);
    color: var(--mob-accent-on-surface);
    border: none;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
    cursor: pointer;
    z-index: 30;
}
.mphc-form {
    padding: 4px 2px 8px;
}
.mphc-label {
    display: block;
    font-size: var(--mob-text-sm);
    font-weight: 600;
    color: var(--mob-text-secondary);
    margin: 10px 0 4px;
}
.mphc-optional {
    font-weight: 400;
    color: var(--mob-text-dim);
}
.mphc-input {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    font-size: var(--mob-text-base);
    color: var(--mob-text-primary);
    background: var(--mob-surface-2);
    border: 1px solid var(--mob-border);
    border-radius: 10px;
}
.mphc-save {
    width: 100%;
    min-height: 48px;
    margin-top: 16px;
    font-size: var(--mob-text-base);
    font-weight: 600;
    border-radius: 10px;
    background: var(--mob-accent);
    color: var(--mob-accent-on-surface);
    border: none;
    cursor: pointer;
}
.mphc-save[disabled] { opacity: .6; }

/* ------------------------------------------------------------------
   Sales order → Shipment Tracking (mobile)
   Same /api/order-tracking.php data as the desktop panel, laid out as
   stacked cards instead of a two-column grid.
   ------------------------------------------------------------------ */
.mob-so-tracking-card .mob-so-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.mob-so-track-refresh {
    flex: 0 0 auto;
    min-width: 36px;
    min-height: 36px;
    font-size: 16px;
    line-height: 1;
    border-radius: 8px;
    background: var(--mob-surface-2);
    color: var(--mob-text-secondary);
    border: 1px solid var(--mob-border-soft);
    cursor: pointer;
}
.mob-track-loading,
.mob-track-empty {
    font-size: var(--mob-text-sm);
    color: var(--mob-text-muted);
    padding: 10px 2px;
    line-height: 1.45;
}
.mob-track-row {
    background: var(--mob-surface-2);
    border: 1px solid var(--mob-border-soft);
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 8px;
}
.mob-track-row-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.mob-track-carrier {
    font-size: var(--mob-text-base);
    font-weight: 600;
    color: var(--mob-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mob-track-status {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 9999px;
    border: 1px solid transparent;
    white-space: nowrap;
}
.mob-track-status--ok {
    background: var(--mob-tone-success-bg);
    color: var(--mob-tone-success-fg);
    border-color: var(--mob-tone-success-border);
}
.mob-track-status--info {
    background: var(--mob-tone-info-bg);
    color: var(--mob-tone-info-fg);
    border-color: var(--mob-tone-info-border);
}
.mob-track-status--bad {
    background: var(--mob-tone-danger-bg);
    color: var(--mob-tone-danger-fg);
    border-color: var(--mob-tone-danger-border);
}
.mob-track-status--neutral {
    background: var(--mob-tone-neutral-bg);
    color: var(--mob-tone-neutral-fg);
    border-color: var(--mob-tone-neutral-border);
}
.mob-track-num {
    display: block;
    margin-top: 6px;
    font-size: var(--mob-text-base);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--mob-accent-light);
    /* Tracking numbers are long — let them wrap rather than overflow. */
    word-break: break-all;
}
.mob-track-num--plain {
    color: var(--mob-text-secondary);
    font-family: inherit;
}
.mob-track-facts,
.mob-track-date {
    margin-top: 4px;
    font-size: var(--mob-text-sm);
    color: var(--mob-text-secondary);
    line-height: 1.4;
}
.mob-track-date { color: var(--mob-text-dim); }
.mob-track-bol {
    display: inline-block;
    margin-top: 8px;
    padding: 8px 12px;
    min-height: 40px;
    font-size: var(--mob-text-sm);
    font-weight: 600;
    border-radius: 8px;
    background: var(--mob-surface-strong);
    color: var(--mob-text-primary);
    border: 1px solid var(--mob-border);
    text-decoration: none;
}

/* ── Text (SMS) buttons (assets/sms-text-button.js) ─────────────────────
   Rendered as <button> beside the existing <a href="tel:"> Call actions, so
   reset the UA button chrome and inherit the surrounding link styling. */
button.mls-sms-btn { font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button.mls-sms-btn--mobile-hero { appearance: none; -webkit-appearance: none; }
button.mls-sms-btn--mobile-icon { appearance: none; -webkit-appearance: none; }
button.mls-sms-btn--mobile-link {
    color: var(--mob-accent-on-surface, var(--mobile-accent, #6366f1));
    border-color: currentColor;
    background: none;
    line-height: 1.4;
    white-space: nowrap;
    flex-shrink: 0;
}
button.mls-sms-btn--mobile-link:active { opacity: 0.7; }
/* Vendor hero quick actions had no rules of their own; mirror the customer hero. */
.mob-vendor-hero-actions { display: flex; gap: 10px; margin-top: 14px; }
.mob-vendor-hero-act {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    gap: 3px; padding: 9px 4px;
    background: var(--mob-card, var(--mobile-card));
    border: 1px solid var(--mob-border, var(--mobile-border));
    border-radius: 12px;
    color: var(--mob-accent-on-surface, var(--mobile-accent, #6366f1));
    font-size: 12px; font-weight: 600;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
.mob-vendor-hero-act:active { background: rgba(99,102,241,0.08); }
.mob-vendor-hero-act-icon { font-size: 18px; line-height: 1; }