/**
 * Courier PWA — full-fidelity stylesheet ported from legacy courier/app.css.
 * Mobile-first; iOS safe-area aware; matches MTCC design tokens.
 */

/* ============================================
   CSS VARIABLES
   ============================================ */
:root {
    --primary: #7c3aed;
    --primary-dark: #6d28d9;
    --primary-deeper: #5b21b6;
    --primary-light: #ede9fe;
    --primary-lighter: #f5f3ff;
    --success: #059669;
    --success-light: #10b981;
    --success-bg: #ecfdf5;
    --warning: #f59e0b;
    --warning-bg: #fef3c7;
    --danger: #dc2626;
    --danger-bg: #fef2f2;
    --info: #0284c7;
    --info-bg: #f0f9ff;
    --bg: #f3f4f6;
    --card: #ffffff;
    --text: #1e1b2e;
    --text-secondary: #4b5563;
    --subtext: #6b7280;
    --border: #e5e7eb;
    --border-light: #f3f4f6;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --radius: 12px;
    --radius-sm: 8px;
    --radius-xs: 6px;
    --radius-xl: 20px;
    --shadow-sm: rgba(0, 0, 0, 0.12) 0px 1px 3px;
    --shadow-md: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
    --nav-height: 72px;
    --header-height: 56px;
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-top: env(safe-area-inset-top, 0px);
}

/* ============================================
   BASE RESET
   ============================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
    height: 100%; overscroll-behavior-y: none;
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg); color: var(--text);
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
}
button { font-family: inherit; cursor: pointer; border: none; background: none; -webkit-tap-highlight-color: transparent; }
input { font-family: inherit; }
img { display: block; }

/* ============================================
   SCREEN MANAGEMENT
   ============================================ */
.screen { display: none; height: 100%; width: 100%; position: fixed; top: 0; left: 0; }
.screen.active { display: flex; flex-direction: column; }

/* ============================================
   LOGIN SCREEN — cinematic dark theme
   ============================================ */
.login-wrapper {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center; padding: 32px 24px;
    /* Layered purple/magenta gradient mesh — pulls the logo's magenta-to-violet
       range across a near-black canvas. Animated hue drift for life. */
    background:
        radial-gradient(ellipse 150% 16% at 50% 52%, rgba(178,150,255,0.20) 0%, transparent 70%),
        radial-gradient(ellipse 90% 70% at 50% 6%,  #3a2170 0%, transparent 60%),
        radial-gradient(ellipse 75% 65% at 86% 92%, #7a1f6e 0%, transparent 55%),
        radial-gradient(ellipse 85% 80% at 8% 82%,  #3d1a8a 0%, transparent 55%),
        linear-gradient(160deg, #170e36 0%, #0b0718 60%, #060410 100%);
    position: relative; overflow: hidden;
}
/* Drifting aurora glow */
.login-wrapper::before {
    content: ''; position: absolute; inset: -30%; z-index: 0;
    background:
        radial-gradient(closest-side at 22% 28%, rgba(168,45,138,0.40), transparent 70%),
        radial-gradient(closest-side at 80% 72%, rgba(91,33,182,0.46), transparent 70%),
        radial-gradient(closest-side at 58% 12%, rgba(167,139,250,0.30), transparent 70%);
    filter: blur(42px);
    animation: loginAurora 22s ease-in-out infinite alternate;
    pointer-events: none;
}
/* Vignette to focus the centre — cinematic falloff (kept light so the grid
   floor + routes stay legible behind the UI) */
.login-wrapper::after {
    content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: radial-gradient(ellipse 95% 80% at 50% 42%, transparent 46%, rgba(4,2,12,0.62) 100%);
}
@keyframes loginAurora {
    0%   { transform: translate3d(-4%, -2%, 0) scale(1); }
    50%  { transform: translate3d(3%, 2%, 0) scale(1.1); }
    100% { transform: translate3d(-2%, 3%, 0) scale(1.04); }
}

/* Futuristic perspective "grid floor" receding to a horizon, scrolling toward
   the viewer — the sci-fi logistics ground plane. Masked out near the top. */
.login-grid {
    position: absolute; left: 50%; bottom: -6%;
    width: 340%; height: 70%;
    transform: translateX(-50%) perspective(420px) rotateX(70deg);
    transform-origin: 50% 100%;
    background-image:
        linear-gradient(rgba(178,150,255,0.40) 1.5px, transparent 1.5px),
        linear-gradient(90deg, rgba(178,150,255,0.40) 1.5px, transparent 1.5px);
    background-size: 48px 48px;
    animation: gridMove 4.2s linear infinite;
    pointer-events: none; z-index: 0;
    -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,0.7) 50%, transparent 92%);
            mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,0.7) 50%, transparent 92%);
}
@keyframes gridMove { to { background-position: 0 46px, 0 46px; } }

/* Live delivery-route network — flowing dashed paths + hubs + radar pings +
   package packets travelling along the routes. The "shipping service" motif. */
.login-routes { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.login-routes .flow  { animation: dashFlow 2.4s linear infinite; }
.login-routes .flow2 { animation: dashFlow 2.9s linear infinite; }
@keyframes dashFlow { to { stroke-dashoffset: -160; } }
.routes-nodes circle {
    fill: #ffffff;
    filter: drop-shadow(0 0 6px rgba(190,150,255,0.95));
    animation: nodePulse 3s ease-in-out infinite;
}
.routes-nodes circle:nth-child(2) { animation-delay: -0.8s; }
.routes-nodes circle:nth-child(3) { animation-delay: -1.6s; }
.routes-nodes circle:nth-child(4) { animation-delay: -2.3s; }
@keyframes nodePulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }
.login-routes .ping { fill: none; stroke: rgba(190,150,255,0.8); stroke-width: 1.4; }
.login-routes .packet {
    fill: #ffffff;
    filter: drop-shadow(0 0 7px rgba(210,170,255,1)) drop-shadow(0 0 14px rgba(167,139,250,0.8));
}

/* Giant faded brand P — the requested watermark. Bleeds off-axis, slow float. */
.login-watermark {
    position: absolute; z-index: 0; pointer-events: none;
    width: min(135%, 720px); height: auto;
    top: 44%; left: 58%;
    transform: translate(-50%, -50%) rotate(-9deg);
    opacity: 0.1;
    filter: drop-shadow(0 0 70px rgba(167,139,250,0.5));
    animation: watermarkFloat 16s ease-in-out infinite;
}
@keyframes watermarkFloat {
    0%, 100% { transform: translate(-50%, -50%) rotate(-9deg) scale(1); }
    50%      { transform: translate(-50%, -53%) rotate(-6deg) scale(1.05); }
}

.login-header { text-align: center; margin-bottom: 44px; position: relative; z-index: 1; }
.login-logo {
    display: block; width: min(80vw, 300px); height: auto; margin: 0 auto 18px;
    filter: drop-shadow(0 8px 26px rgba(0,0,0,0.55)) drop-shadow(0 0 22px rgba(167,139,250,0.3));
    animation: logoFloat 7s ease-in-out infinite;
}
@keyframes logoFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.login-title {
    font-size: 1.45rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
    margin-bottom: 6px;
    background: linear-gradient(180deg, #ffffff 0%, #cdbcff 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: #fff;
    filter: drop-shadow(0 2px 18px rgba(124,58,237,0.55));
}
.login-subtitle { font-size: 0.88rem; color: rgba(255,255,255,0.6); font-weight: 500; letter-spacing: 0.04em; }

/* PIN dots */
.pin-display { display: flex; gap: 14px; margin-bottom: 20px; position: relative; z-index: 1; }
.pin-dot {
    width: 18px; height: 18px; border-radius: 50%;
    background: rgba(255,255,255,0.25);
    border: 2px solid rgba(255,255,255,0.4);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.pin-dot.filled {
    background: #fff; border-color: #fff; transform: scale(1.15);
    box-shadow: 0 0 12px rgba(255,255,255,0.4);
}
.pin-dot.error { background: #ef4444; border-color: #ef4444; animation: pinShake 0.4s ease; }
@keyframes pinShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-8px); }
    75% { transform: translateX(8px); }
}
.pin-error { color: #fecaca; font-size: 0.82rem; font-weight: 600; min-height: 24px; margin-bottom: 12px; text-align: center; position: relative; z-index: 1; }

/* PIN keypad — glass buttons */
.pin-keypad {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
    max-width: 280px; width: 100%; position: relative; z-index: 1;
}
.key-btn {
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.15);
    color: #fff; font-size: 1.5rem; font-weight: 600;
    padding: 18px; border-radius: var(--radius);
    transition: all 0.15s ease;
}
.key-btn:active { background: rgba(255,255,255,0.3); transform: scale(0.95); }
.key-fn { font-size: 0.85rem; font-weight: 600; letter-spacing: 0.02em; }

/* "Forgot your PIN?" link under the keypad */
.forgot-pin-link {
    position: relative; z-index: 1;
    margin-top: 20px;
    background: none; border: none;
    color: rgba(255,255,255,0.7); font-family: inherit;
    font-size: 0.84rem; font-weight: 600; letter-spacing: 0.02em;
    padding: 8px 14px; border-radius: 999px; cursor: pointer;
    text-decoration: underline; text-underline-offset: 3px;
    text-decoration-color: rgba(255,255,255,0.3);
    transition: color 0.15s, background 0.15s;
}
.forgot-pin-link:active { background: rgba(255,255,255,0.08); color: #fff; }

/* ---- Forgot-PIN recovery modal ---- */
.fp-overlay {
    position: fixed; inset: 0; z-index: 10600;
    display: flex; align-items: flex-end; justify-content: center;
    background: rgba(4,2,12,0.6);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    opacity: 0; transition: opacity 0.25s ease;
    padding: 0 12px calc(12px + env(safe-area-inset-bottom, 0px));
}
.fp-overlay.open { opacity: 1; }
.fp-card {
    width: 100%; max-width: 460px;
    background: linear-gradient(180deg, #221544 0%, #160d31 100%);
    border: 1px solid rgba(167,139,250,0.22);
    border-radius: 22px; padding: 26px 22px 24px;
    box-shadow: 0 -10px 50px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.03) inset;
    transform: translateY(24px); transition: transform 0.28s cubic-bezier(0.16,1,0.3,1);
    position: relative; color: #fff; font-family: inherit;
}
.fp-overlay.open .fp-card { transform: translateY(0); }
.fp-close {
    position: absolute; top: 12px; right: 14px;
    width: 34px; height: 34px; border-radius: 50%;
    background: rgba(255,255,255,0.08); border: none; color: rgba(255,255,255,0.7);
    font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.fp-close:active { background: rgba(255,255,255,0.16); }
.fp-title { font-size: 1.2rem; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 6px; }
.fp-sub { font-size: 0.88rem; color: rgba(255,255,255,0.66); line-height: 1.45; margin-bottom: 16px; }
.fp-form { display: flex; flex-direction: column; gap: 10px; }
.fp-input {
    width: 100%; padding: 14px 16px; border-radius: 12px;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(167,139,250,0.28);
    color: #fff; font-size: 1rem; font-family: inherit; outline: none;
    transition: border-color 0.15s, background 0.15s;
}
.fp-input::placeholder { color: rgba(255,255,255,0.4); }
.fp-input:focus { border-color: #a78bfa; background: rgba(255,255,255,0.1); }
.fp-btn {
    width: 100%; padding: 14px; border-radius: 12px; border: none; cursor: pointer;
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
    color: #fff; font-family: inherit; font-size: 0.98rem; font-weight: 700;
    box-shadow: 0 8px 22px rgba(124,58,237,0.4);
    transition: transform 0.12s, opacity 0.15s;
}
.fp-btn:active { transform: scale(0.97); }
.fp-btn:disabled { opacity: 0.6; }
.fp-msg { font-size: 0.84rem; line-height: 1.4; margin-top: 12px; display: none; }
.fp-msg.show { display: block; }
.fp-msg.ok  { color: #6ee7b7; }
.fp-msg.err { color: #fca5a5; }
.fp-divider {
    display: flex; align-items: center; gap: 12px;
    margin: 18px 0 14px; color: rgba(255,255,255,0.4); font-size: 0.78rem; font-weight: 600;
}
.fp-divider::before, .fp-divider::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,0.12); }
.fp-contact { display: flex; gap: 10px; }
.fp-contact-btn {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 13px; border-radius: 12px; text-decoration: none;
    background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12);
    color: #fff; font-size: 0.9rem; font-weight: 600;
    transition: background 0.15s;
}
.fp-contact-btn:active { background: rgba(255,255,255,0.16); }
.fp-phone-label { text-align: center; margin-top: 12px; font-size: 0.82rem; color: rgba(255,255,255,0.5); font-weight: 600; letter-spacing: 0.02em; }

/* ============================================
   APP HEADER
   ============================================ */
.app-header {
    height: var(--header-height);
    padding-top: var(--safe-top);
    background: #fff; border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 16px; flex-shrink: 0; z-index: 100;
    box-shadow: var(--shadow-sm);
}
.app-header-left   { display: flex; align-items: center; }
.app-header-center { flex: 1; text-align: center; }
.app-header-right  { display: flex; align-items: center; gap: 8px; }
.header-logo-img { height: 30px; width: auto; }
.header-logo-img.ps-mark { color: #7c3aed; }
.header-user-name { font-size: 0.82rem; font-weight: 600; color: var(--text); margin-right: 4px; }

/* ============================================
   HAMBURGER + DRAWER
   ============================================ */
.hamburger-btn {
    width: 36px; height: 36px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 5px;
    background: none; border: none; cursor: pointer;
    padding: 6px; border-radius: 8px;
    transition: background 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.hamburger-btn:active { background: var(--gray-100); }
.hamburger-btn span {
    display: block; width: 20px; height: 2px;
    background: var(--text); border-radius: 2px;
    transition: transform 0.3s, opacity 0.2s;
}
.hamburger-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger-btn.open span:nth-child(2) { opacity: 0; }
.hamburger-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.drawer-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 199;
    opacity: 0; visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}
.drawer-overlay.open { opacity: 1; visibility: visible; }

.drawer {
    position: fixed; top: 0; left: 0;
    width: 280px; height: 100%;
    background: #fff;
    z-index: 200;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex; flex-direction: column;
    box-shadow: 4px 0 24px rgba(0,0,0,0.15);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.drawer.open { transform: translateX(0); }

.drawer-header {
    padding: 20px 16px 16px;
    padding-top: calc(20px + env(safe-area-inset-top));
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    display: flex; align-items: flex-start; justify-content: space-between;
    flex-shrink: 0;
}
.drawer-profile { display: flex; align-items: center; gap: 12px; }
.drawer-avatar {
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(255,255,255,0.25);
    color: #fff; font-size: 1.1rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.drawer-user-info { display: flex; flex-direction: column; gap: 2px; }
.drawer-name { font-size: 1rem; font-weight: 700; color: #fff; }
.drawer-role { font-size: 0.72rem; color: rgba(255,255,255,0.85); font-weight: 500; }
.drawer-close-btn {
    width: 32px; height: 32px; border-radius: 50%;
    background: rgba(255,255,255,0.18);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    border: none; cursor: pointer; flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}
.drawer-close-btn:active { background: rgba(255,255,255,0.3); }

.drawer-body { flex: 1; padding: 8px 0 16px; }
.drawer-section { padding: 4px 0; }
.drawer-section + .drawer-section { border-top: 1px solid var(--border); }
.drawer-section-label {
    padding: 10px 20px 6px;
    font-size: 0.66rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--gray-400);
}
.drawer-item {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; padding: 12px 20px;
    background: none; border: none; cursor: pointer;
    font-size: 0.88rem; color: var(--text); font-weight: 600;
    text-decoration: none; text-align: left;
    transition: background 0.15s;
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
}
.drawer-item:active { background: var(--gray-50); }
.drawer-item-left { display: flex; align-items: center; gap: 12px; }
.drawer-item-icon {
    width: 32px; height: 32px; border-radius: 8px;
    background: var(--gray-100);
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem;
    color: var(--gray-500); flex-shrink: 0;
}
.drawer-item-icon.status-icon { background: none; width: 32px; }
.drawer-item-meta {
    font-size: 0.74rem; color: var(--gray-400); font-weight: 500;
}

.role-pill {
    padding: 4px 10px; border-radius: 20px;
    font-size: 0.68rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px;
}
.role-pill.role-courier    { background: #dbeafe; color: #1e40af; }
.role-pill.role-mtcc_staff { background: #fef3c7; color: #92400e; }
.role-pill.role-admin      { background: var(--primary-light); color: var(--primary); }

.availability-dot {
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--gray-300);
    transition: background 0.2s, box-shadow 0.2s;
}
.availability-dot.online  { background: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,0.2); }
.availability-dot.offline { background: var(--gray-300); }

/* ============================================
   MAIN CONTENT AREA
   ============================================ */
.app-content { flex: 1; overflow: hidden; position: relative; }
.tab-pane {
    display: none; flex-direction: column; height: 100%;
    position: absolute; inset: 0;
}
.tab-pane.active { display: flex; }

.tab-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px 10px; flex-shrink: 0;
}
.tab-header h2 { font-size: 1.15rem; font-weight: 700; color: var(--text); letter-spacing: -0.01em; }

.refresh-btn {
    width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--gray-400); transition: all 0.2s ease;
}
.refresh-btn:active { background: var(--gray-100); color: var(--primary); transform: rotate(180deg); }
.refresh-btn.spinning svg { animation: spin 0.6s linear; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.tab-body {
    flex: 1; overflow-y: auto; padding: 0 16px 16px;
    -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain;
}

/* ============================================
   LOADING + EMPTY STATES
   ============================================ */
.loading-state {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 60px 20px; gap: 14px; color: var(--subtext);
    font-size: 0.85rem; font-weight: 500;
}
.spinner-ring {
    width: 32px; height: 32px;
    border: 3px solid var(--gray-200); border-top-color: var(--primary);
    border-radius: 50%; animation: ring-spin 0.8s linear infinite;
}
@keyframes ring-spin { to { transform: rotate(360deg); } }

.empty-state {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 60px 24px; text-align: center;
}
.empty-state-icon {
    width: 64px; height: 64px; background: var(--primary-light); border-radius: 50%;
    display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
    color: var(--primary);
}
.empty-state h3 { font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.empty-state p { font-size: 0.82rem; color: var(--subtext); line-height: 1.5; max-width: 260px; }

/* Skeleton card (pre-load shimmer) */
.skel-card {
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 14px; margin-bottom: 10px; overflow: hidden; position: relative;
}
.skel-card::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);
    animation: shimmer 1.4s infinite;
}
@keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.skel-line { background: var(--gray-200); border-radius: 4px; height: 12px; margin-bottom: 10px; }
.skel-line.short { width: 40%; }
.skel-line.med { width: 70%; }
.skel-line.full { width: 90%; }

/* ============================================
   SECTION LABELS
   ============================================ */
.section-label {
    font-size: 0.72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--subtext); padding: 12px 0 8px;
}

/* ============================================
   ORDER CARDS
   ============================================ */
.order-card {
    background: var(--card); border-radius: var(--radius);
    border: 1px solid var(--border); box-shadow: var(--shadow-sm);
    padding: 14px; margin-bottom: 10px;
    transition: all 0.2s ease; cursor: pointer; position: relative;
}
.order-card:active { transform: scale(0.985); box-shadow: var(--shadow-md); }

.order-card-header {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 8px; margin-bottom: 10px;
}
.order-ref {
    font-size: 0.9rem; font-weight: 700; color: var(--text); letter-spacing: -0.01em;
}
.status-ready       .order-ref { color: #b45309; }
.status-dispatched  .order-ref { color: #6d28d9; }
.status-shipped     .order-ref { color: #0f766e; }
.status-delivered   .order-ref { color: #047857; }
.status-pickedup    .order-ref { color: #15803d; }
.status-missing     .order-ref { color: #991b1b; }

.order-status-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; border-radius: 20px;
    font-size: 0.68rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px;
    border: 1px solid; flex-shrink: 0;
}
.badge-unpaid     { background: #fefce8; color: #a16207; border-color: #eab308; }
.badge-paid       { background: #fef9c3; color: #854d0e; border-color: #ca8a04; }
.badge-preflight  { background: #f5f3ff; color: #6d28d9; border-color: #8b5cf6; }
.badge-file_issue { background: #fff7ed; color: #c2410c; border-color: #ea580c; }
.badge-printing   { background: #eef2ff; color: #4338ca; border-color: #6366f1; }
.badge-ready      { background: #fffbeb; color: #b45309; border-color: #d97706; }
.badge-dispatched { background: #f5f3ff; color: #6d28d9; border-color: #7c3aed; }
.badge-shipped    { background: #f0fdfa; color: #0f766e; border-color: #14b8a6; }
.badge-delivered  { background: #ecfdf5; color: #047857; border-color: #059669; }
.badge-pickedup   { background: #f0fdf4; color: #15803d; border-color: #22c55e; }
.badge-missing    { background: #fef2f2; color: #991b1b; border-color: #dc2626; }

.order-destination {
    display: flex; align-items: center; gap: 6px;
    font-size: 0.82rem; font-weight: 600; color: var(--text-secondary);
    margin-bottom: 8px;
}
.order-destination svg { color: var(--primary); flex-shrink: 0; }

.order-customer {
    font-size: 0.95rem; font-weight: 700; color: var(--text);
    margin-bottom: 4px;
}

.order-card-body {
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px;
    padding-top: 10px; margin-top: 10px; border-top: 1px solid var(--border-light);
}
.order-detail { display: flex; flex-direction: column; }
.order-detail-label {
    font-size: 0.62rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--gray-400);
}
.order-detail-value { font-size: 0.82rem; font-weight: 600; color: var(--text-secondary); }

.tenant-chip {
    display: inline-block; background: var(--gray-100); color: var(--gray-500);
    padding: 2px 6px; border-radius: 4px; font-size: 0.62rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em; margin-left: 6px; vertical-align: middle;
}

/* Accept button */
.accept-btn {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    width: 100%; padding: 10px; margin-top: 10px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: #fff; border-radius: var(--radius-sm);
    font-size: 0.82rem; font-weight: 700; letter-spacing: 0.01em;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(124,58,237,0.3);
}
.accept-btn:active { transform: scale(0.97); box-shadow: 0 1px 4px rgba(124,58,237,0.3); }
.accept-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

/* ============================================
   COUNTDOWN TIMER
   ============================================ */
.order-countdown {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; border-radius: 8px;
    font-size: 0.75rem; font-weight: 700;
    letter-spacing: 0.02em;
    background: var(--gray-100); color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}
.order-countdown.cd-green  { background: #ecfdf5; color: var(--success); }
.order-countdown.cd-orange { background: #fef3c7; color: #b45309; }
.order-countdown.cd-red    { background: #fef2f2; color: var(--danger); animation: pulse-red 1.4s ease-in-out infinite; }
.order-countdown.countdown-overdue { background: var(--danger); color: #fff; animation: pulse-red 1s ease-in-out infinite; }
@keyframes pulse-red { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }

/* ============================================
   BATCH CARDS
   ============================================ */
.batch-card {
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow-sm);
    margin-bottom: 12px; overflow: hidden; cursor: pointer;
    transition: all 0.2s ease;
}
.batch-card:active { transform: scale(0.985); box-shadow: var(--shadow-md); }
.batch-card-header {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: #fff; padding: 12px 14px;
    display: flex; justify-content: space-between; align-items: center;
}
.batch-id { font-size: 0.9rem; font-weight: 800; letter-spacing: 0.02em; }
.batch-count { font-size: 0.72rem; opacity: 0.9; font-weight: 600; }
.batch-body { padding: 12px 14px; }
.batch-meta {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
    font-size: 0.75rem; color: var(--text-secondary); font-weight: 600;
}
.batch-meta .lbl { color: var(--gray-400); font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; display: block; margin-bottom: 2px; }
.batch-refs { margin-top: 10px; font-size: 0.72rem; color: var(--subtext); }

/* ============================================
   BOTTOM NAVIGATION
   ============================================ */
.bottom-nav {
    padding: 8px 0;
    padding-bottom: calc(8px + var(--safe-bottom));
    background: #fff; border-top: 1px solid var(--border);
    display: flex; align-items: stretch; justify-content: space-around;
    flex-shrink: 0; z-index: 100;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.04); overflow: visible;
}
.nav-item {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 2px;
    color: var(--gray-400); font-size: 0.58rem; font-weight: 600;
    transition: all 0.2s ease; position: relative;
    padding: 0 2px; min-width: 0;
    background: transparent; border: none;
}
.nav-label {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 100%; display: block; text-align: center;
}
.nav-item.active { color: var(--primary); }
.nav-item.active::after {
    content: ''; position: absolute; top: 0; left: 50%;
    transform: translateX(-50%); width: 20px; height: 3px;
    background: var(--primary); border-radius: 0 0 3px 3px;
}
.nav-icon { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; }
.nav-icon svg { width: 22px; height: 22px; }

/* Scan button — raised, circular, bordered */
.nav-item.scan-tab { position: relative; }
.nav-item.scan-tab .nav-icon {
    width: 54px; height: 54px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    border-radius: 50%; color: #fff; margin-top: -22px;
    box-shadow: 0 4px 14px rgba(124,58,237,0.35);
    transition: all 0.2s ease;
    border: 3.5px solid #fff;
    outline: 1px solid rgba(124,58,237,0.15);
}
.nav-item.scan-tab .nav-icon svg { width: 26px; height: 26px; }
.nav-item.scan-tab:active .nav-icon { transform: scale(0.92); }
.nav-item.scan-tab.active::after { display: none; }

.nav-badge {
    position: absolute; top: 4px; right: 50%;
    transform: translateX(14px); min-width: 16px; height: 16px;
    background: var(--danger); color: #fff;
    font-size: 0.58rem; font-weight: 700;
    border-radius: 8px; display: flex; align-items: center; justify-content: center;
    padding: 0 4px; border: 2px solid #fff;
}

/* ============================================
   TOAST NOTIFICATIONS (top, left-border)
   ============================================ */
.toast-container {
    position: fixed; top: calc(12px + var(--safe-top)); left: 16px; right: 16px;
    z-index: 3000; display: flex; flex-direction: column; gap: 8px;
    pointer-events: none;
}
.toast {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px; background: #fff;
    border-radius: var(--radius); box-shadow: var(--shadow-lg);
    border-left: 4px solid; font-size: 0.82rem; font-weight: 600;
    pointer-events: auto; animation: toastIn 0.3s ease;
}
.toast.success { border-color: var(--success); color: #065f46; }
.toast.error   { border-color: var(--danger);  color: #991b1b; }
.toast.info    { border-color: var(--info);    color: #075985; }
.toast.fade-out { animation: toastOut 0.3s ease forwards; }
@keyframes toastIn  { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toastOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-20px); } }
.toast-retry { margin-left: auto; padding: 4px 10px; background: rgba(0,0,0,0.08); border: none; border-radius: 6px; font-size: 0.72rem; font-weight: 700; color: inherit; cursor: pointer; white-space: nowrap; pointer-events: auto; }
.toast-retry:active { background: rgba(0,0,0,0.15); }

/* Undo toast — same base styling as info toast, with a yellow accent + countdown bar */
.toast.undo { border-color: #f59e0b; color: #78350f; padding-bottom: 12px; }
.toast-undo {
    margin-left: auto;
    padding: 5px 12px;
    background: #f59e0b;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 0.74rem;
    font-weight: 800;
    cursor: pointer;
    letter-spacing: 0.05em;
    pointer-events: auto;
}
.toast-undo:active { background: #d97706; }
.toast-countdown {
    position: absolute;
    left: 12px; right: 12px; bottom: 6px;
    height: 3px;
    background: rgba(245, 158, 11, 0.18);
    border-radius: 2px;
    overflow: hidden;
}
.toast.undo { position: relative; }
.toast-countdown-fill {
    height: 100%;
    background: #f59e0b;
    transform: scaleX(1);
    transform-origin: left center;
    transition: transform linear;
}

/* ============================================
   FIRST-TIME ONBOARDING OVERLAY
   ============================================ */
.onboarding-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.62);
    z-index: 10500;
    animation: onboardingIn 0.18s ease;
}
.onboarding-overlay.fade-out { animation: onboardingOut 0.2s ease forwards; }
@keyframes onboardingIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes onboardingOut { from { opacity: 1; } to { opacity: 0; } }

.onboarding-card {
    position: fixed;
    width: 280px;
    background: #fff;
    border-radius: 14px;
    padding: 16px 18px 14px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
    z-index: 10501;
    font-family: inherit;
}
.onboarding-card.anchored::after {
    content: '';
    position: absolute;
    left: 50%; bottom: -8px;
    transform: translateX(-50%) rotate(45deg);
    width: 14px; height: 14px;
    background: #fff;
    border-radius: 2px;
}
.onboarding-card:not(.anchored) {
    transform: translate(-50%, -50%);
    max-width: calc(100vw - 32px);
}

.onboarding-progress {
    font-size: 0.68rem;
    font-weight: 700;
    color: #9ca3af;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.onboarding-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: #1a1625;
    margin-bottom: 4px;
}
.onboarding-body {
    font-size: 0.84rem;
    color: #4b5563;
    line-height: 1.45;
    margin-bottom: 12px;
}
.onboarding-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}
.onboarding-skip {
    background: none;
    border: none;
    color: #9ca3af;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    padding: 6px 4px;
}
.onboarding-skip:active { color: #4b5563; }
.onboarding-next {
    background: var(--primary, #7c3aed);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 0.82rem;
    font-weight: 800;
    cursor: pointer;
    letter-spacing: 0.02em;
}
.onboarding-next:active { background: #6d28d9; }

/* Spotlight effect: lift the targeted nav item above the dim layer */
.onboarding-spot {
    position: relative;
    z-index: 10502 !important;
    background: #fff !important;
    border-radius: 12px !important;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.85), 0 0 24px 6px rgba(124, 58, 237, 0.55) !important;
    animation: onboardingPulse 1.6s ease-in-out infinite;
}
@keyframes onboardingPulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.85), 0 0 24px 6px rgba(124, 58, 237, 0.55); }
    50%      { box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.85), 0 0 32px 10px rgba(124, 58, 237, 0.8); }
}

/* ============================================
   DELIVERY STEP INDICATOR — timeline style
   Markers + connectors in one flex row. Each cell holds a marker on top
   and its label centered below. Connectors flex between cells.
   - Done    = filled green circle with white check icon
   - Active  = green ring with pulsing inner dot
   - Pending = hollow grey ring
   - Line between done cells = solid green
   - Line before/after pending cells = dashed grey
   No background fill — sits transparent on whatever the body shows.
   ============================================ */
.step-track {
    display: flex; align-items: flex-start;
    padding: 18px 12px 14px;
    margin: 4px 0;
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
}
.step-cell {
    display: flex; flex-direction: column; align-items: center;
    flex-shrink: 0; min-width: 64px;
}
.step-marker {
    width: 22px; height: 22px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-sizing: border-box;
    background: #fff;
    transition: all 0.25s ease;
}
.step-marker-pending {
    border: 2px solid var(--border);
    color: transparent;
}
.step-marker-active {
    border: 2px solid #10b981;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(16,185,129,0.15);
    animation: stepMarkerPulse 1.6s ease-in-out infinite;
    position: relative;
}
.step-marker-active::after {
    content: ''; width: 9px; height: 9px; border-radius: 50%;
    background: #10b981;
}
.step-marker-done {
    border: 2px solid #10b981;
    background: #10b981;
    color: #fff;
}
@keyframes stepMarkerPulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(16,185,129,0.15); }
    50%      { box-shadow: 0 0 0 7px rgba(16,185,129,0.06); }
}

.step-label {
    margin-top: 7px;
    font-size: 0.64rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.4px;
    color: var(--subtext);
    text-align: center;
    white-space: nowrap;
    transition: color 0.2s ease;
}
.step-label.on { color: #059669; font-weight: 800; }

/* Connector bar — sits between cells. Vertically centered to the marker
   row (margin-top = half of marker height = 11px - half of bar height). */
.step-bar {
    flex: 1;
    height: 2px;
    margin-top: 10px;
    align-self: flex-start;
    min-width: 8px;
}
.step-bar-done {
    background: #10b981;
}
.step-bar-upcoming {
    /* Dashed pattern via background-image so the dash size is precise. */
    background-image: linear-gradient(to right, var(--border) 50%, transparent 50%);
    background-size: 8px 2px;
    background-repeat: repeat-x;
}

/* ============================================
   BUTTON LOADING SPINNER
   The .btn-spinner element replaces the button's inner HTML during async
   work (see btnLoading() in app.js). Inherits color from the button so it
   shows on dark + light variants.
   ============================================ */
@keyframes btnSpin { to { transform: rotate(360deg); } }
.btn-loading { pointer-events: none; opacity: 0.85; cursor: progress; }
.btn-spinner {
    width: 16px; height: 16px;
    border: 2px solid currentColor; border-right-color: transparent;
    border-radius: 50%;
    display: inline-block; vertical-align: middle;
    animation: btnSpin 0.65s linear infinite;
}
.btn-loading-label { margin-left: 8px; vertical-align: middle; }
button.btn-loading { display: inline-flex; align-items: center; justify-content: center; gap: 0; }

/* ============================================
   DETAIL PANEL (slide-up)
   ============================================ */
.detail-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.4);
    opacity: 0; visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    z-index: 500;
}
.detail-overlay.open { opacity: 1; visibility: visible; }
.detail-panel {
    position: fixed; left: 0; right: 0; bottom: 0;
    max-height: 90vh; background: #fff;
    border-radius: 20px 20px 0 0;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
    z-index: 501;
    display: flex; flex-direction: column;
    overflow: hidden;             /* clip the gradient corners cleanly */
    box-shadow: 0 -10px 40px rgba(0,0,0,0.15);
}
.detail-panel.open { transform: translateY(0); }

/* Rich gradient header at the very top of the panel.
   The status colour is set on the panel via two CSS vars:
     --rh-from / --rh-to   (set by JS using setPanelGradient).
   A drag handle pill sits at the top-center via ::before so the user
   can reach it for the swipe-down dismiss gesture. */
.detail-rich-head {
    flex-shrink: 0;
    padding: 18px 20px 14px;
    color: #fff;
    background: linear-gradient(135deg, var(--rh-from, #7c3aed), var(--rh-to, #6d28d9));
    border-radius: 20px 20px 0 0;
    position: relative;
    cursor: grab;
}
.detail-rich-head:active { cursor: grabbing; }
.detail-rich-head::before {
    content: ''; position: absolute;
    top: 8px; left: 50%; transform: translateX(-50%);
    width: 40px; height: 4px;
    border-radius: 2px;
    background: rgba(255,255,255,0.45);
}
.drh-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-top: 6px;
}
.drh-label {
    font-size: 0.6rem; font-weight: 800; opacity: 0.7;
    letter-spacing: 0.08em; text-transform: uppercase;
    margin-bottom: 2px;
}
.drh-due { font-size: 0.85rem; font-weight: 700; line-height: 1.25; }
.drh-due .drh-by { font-weight: 600; opacity: 0.7; font-size: 0.74rem; margin: 0 4px; }
.drh-status-badge {
    display: inline-flex; align-items: center;
    padding: 4px 10px; border-radius: 999px;
    background: rgba(255,255,255,0.22); color: #fff;
    font-size: 0.66rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.05em;
    flex-shrink: 0; white-space: nowrap;
}

.detail-body {
    flex: 1; overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px 20px 16px;
    background: #fff;
}

/* ============================================
   HOME DASHBOARD
   ============================================ */
.greeting { font-size: 1.4rem; font-weight: 800; margin-bottom: 3px; letter-spacing: -0.01em; }
.greeting-sub { font-size: 0.82rem; color: var(--subtext); margin-bottom: 18px; }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 20px; }
.stat-card {
    background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
    padding: 14px 10px; text-align: center; box-shadow: var(--shadow-sm);
}
.stat-val { font-size: 1.5rem; font-weight: 800; color: var(--text); letter-spacing: -0.02em; }
.stat-lbl { font-size: 0.62rem; color: var(--subtext); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-top: 4px; }

/* ============================================
   HOME TAB — Legacy-faithful sections
   ============================================ */
.home-greeting-row { margin-bottom: 14px; }

.home-stats {
    display: flex; align-items: center;
    background: #fff; border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow-sm);
    padding: 16px 0; margin-bottom: 18px;
}
.home-stat { flex: 1; text-align: center; }
.home-stat-value {
    font-size: 1.4rem; font-weight: 800; color: var(--text);
    letter-spacing: -0.02em; line-height: 1.1;
}
.home-stat-value.perf-green  { color: #059669; }
.home-stat-value.perf-amber  { color: #d97706; }
.home-stat-value.perf-red    { color: #dc2626; }
.home-stat-label {
    font-size: 0.65rem; font-weight: 700; color: var(--gray-400);
    text-transform: uppercase; letter-spacing: 0.04em; margin-top: 4px;
}
.home-stat-divider { width: 1px; align-self: stretch; background: var(--border); margin: 4px 0; }

.home-section { margin-bottom: 16px; }
.home-section-header {
    display: flex; align-items: center; gap: 8px;
    font-size: 0.78rem; font-weight: 700; color: var(--gray-600);
    margin-bottom: 8px; padding-left: 4px;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.home-section-dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--gray-300);
}
.home-section-dot.dot-transit { background: #14b8a6; box-shadow: 0 0 6px rgba(20,184,166,0.5); }
.home-section-dot.dot-pickup  { background: #3b82f6; }
.home-section-dot.dot-urgent  { background: #dc2626; animation: pulse-red 1.4s ease-in-out infinite; }
.home-section-dot.dot-issue   { background: #d97706; }

/* Active order tile (in-transit / pickup-pending) */
.home-active-card {
    display: block; width: 100%; text-align: left;
    background: #fff; border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow-sm);
    padding: 12px 14px; margin-bottom: 8px;
    cursor: pointer; font-family: inherit;
    transition: transform 0.15s, box-shadow 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.home-active-card:active { transform: scale(0.985); box-shadow: var(--shadow-md); }
.home-active-card.home-transit-card { border-left: 4px solid #14b8a6; }
.home-active-card.home-pickup-card  { border-left: 4px solid #3b82f6; }
.home-active-top {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 4px;
}
.home-active-ref { font-size: 0.92rem; font-weight: 800; font-family: ui-monospace, monospace; }
.home-active-dest {
    display: flex; align-items: center; gap: 6px;
    font-size: 0.82rem; color: var(--text); font-weight: 600;
}

/* Urgent order tile */
.home-urgent-card {
    display: block; width: 100%; text-align: left;
    border-radius: var(--radius); padding: 12px 14px; margin-bottom: 8px;
    cursor: pointer; font-family: inherit; border: 1.5px solid;
    transition: transform 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.home-urgent-card:active { transform: scale(0.985); }
.home-urgent-red    { background: #fef2f2; border-color: #fca5a5; color: #991b1b; }
.home-urgent-orange { background: #fff7ed; border-color: #fdba74; color: #9a3412; }
.home-urgent-top {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 2px;
}
.home-urgent-ref { font-size: 0.92rem; font-weight: 800; font-family: ui-monospace, monospace; }
.home-urgent-time {
    padding: 2px 9px; border-radius: 999px;
    background: rgba(255,255,255,0.6);
    font-size: 0.7rem; font-weight: 800;
}
.home-urgent-detail { font-size: 0.78rem; opacity: 0.85; }

/* Available orders summary */
.home-available-card {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%;
    padding: 14px 16px;
    background: linear-gradient(135deg, var(--primary-lighter), #fff);
    border: 1px solid var(--primary-light);
    border-radius: var(--radius);
    cursor: pointer; font-family: inherit;
    transition: transform 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.home-available-card:active { transform: scale(0.985); }
.home-avail-left { display: flex; align-items: center; gap: 12px; }
.home-avail-count {
    font-size: 1.6rem; font-weight: 800; color: var(--primary);
    line-height: 1;
}
.home-avail-text { font-size: 0.85rem; color: var(--text); font-weight: 600; }
.home-available-card svg { color: var(--primary); flex-shrink: 0; }

/* ============================================
   ACCOUNT
   ============================================ */
/* Profile header — gradient banner with avatar + name + role */
.acct-profile {
    display: flex; align-items: center; gap: 14px;
    padding: 24px 20px 20px;
    margin: -16px -20px 16px;
    background: linear-gradient(135deg, var(--primary), var(--primary-deeper));
    color: #fff;
}
.acct-avatar {
    width: 52px; height: 52px; border-radius: 50%;
    background: rgba(255,255,255,0.22);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem; font-weight: 800; color: #fff;
    flex-shrink: 0;
}
.acct-info { flex: 1; min-width: 0; }
.acct-name { font-size: 1.1rem; font-weight: 700; line-height: 1.2; }
.acct-role { font-size: 0.78rem; opacity: 0.85; margin-top: 2px; }

.acct-section {
    margin-bottom: 14px;
}
.acct-section-label {
    font-size: 0.7rem; font-weight: 700; color: var(--gray-400);
    text-transform: uppercase; letter-spacing: 0.05em;
    margin-bottom: 8px; padding-left: 4px;
}

/* Availability toggle — its own card */
.acct-toggle-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px;
    background: #fff; border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.acct-toggle-left {
    display: flex; align-items: center; gap: 10px;
    font-weight: 700; font-size: 0.92rem; color: var(--text);
}

/* Earnings + stats card */
.acct-card {
    display: block; width: 100%; text-align: left;
    background: #fff; border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow-sm);
    padding: 0; overflow: hidden;
    transition: transform 0.15s; cursor: pointer;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
}
.acct-card:active { transform: scale(0.985); }
.acct-earnings-row { display: flex; padding: 16px; }
.acct-earn-block { flex: 1; text-align: center; }
.acct-earn-value { font-size: 1.2rem; font-weight: 800; color: var(--text); }
.acct-earn-label {
    font-size: 0.66rem; color: var(--gray-400); font-weight: 700;
    text-transform: uppercase; margin-top: 2px; letter-spacing: 0.04em;
}
.acct-earn-divider { width: 1px; background: var(--border); margin: 4px 0; }
.acct-card-footer {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px 16px;
    background: var(--gray-50);
    border-top: 1px solid var(--border-light);
    font-size: 0.78rem; font-weight: 700; color: var(--primary);
}

/* Stats row (today's deliveries / earnings / active) */
.acct-stats-row {
    display: flex; justify-content: space-around;
    background: #fff; border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow-sm);
    padding: 16px 8px;
}
.acct-stat { text-align: center; }
.acct-stat-value { font-size: 1.25rem; font-weight: 800; color: var(--text); line-height: 1.2; }
.acct-stat-label {
    font-size: 0.65rem; font-weight: 700; color: var(--gray-400);
    text-transform: uppercase; margin-top: 4px; letter-spacing: 0.03em;
}

/* Support link rows */
.acct-link {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px;
    background: #fff; border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: 6px;
    text-decoration: none; color: var(--text);
    transition: background 0.15s;
}
.acct-link:active { background: var(--gray-100); }
.acct-link-left {
    display: flex; align-items: center; gap: 12px;
    font-weight: 600; font-size: 0.88rem;
}
.acct-link-left svg { color: var(--gray-500); flex-shrink: 0; }
.acct-link-meta { font-size: 0.75rem; color: var(--gray-400); font-weight: 500; }

/* Footer section with sign-out button + version */
.acct-footer-section {
    margin-top: 24px; text-align: center; padding-bottom: 20px;
}
.acct-app-version {
    font-size: 0.7rem; color: var(--gray-300); font-weight: 600; margin-top: 12px;
}
.acct-signout {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 24px;
    border: 1px solid var(--danger);
    background: #fff; color: var(--danger);
    border-radius: var(--radius-sm);
    font-size: 0.88rem; font-weight: 700;
    font-family: inherit; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.acct-signout:active { background: var(--danger-bg); }

/* Toggle switch */
.toggle-switch {
    position: relative; width: 46px; height: 26px; flex-shrink: 0; margin-left: auto;
    background: var(--gray-200); border-radius: 26px; cursor: pointer;
    transition: background 0.3s;
}
.toggle-switch::before {
    content: ''; position: absolute; width: 22px; height: 22px;
    left: 2px; bottom: 2px; background: #fff; border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2); transition: transform 0.3s;
}
.toggle-switch.on { background: #10b981; }
.toggle-switch.on::before { transform: translateX(20px); }

/* ============================================
   OFFLINE BANNER
   ============================================ */
.offline-banner {
    position: fixed; top: var(--safe-top); left: 0; right: 0;
    background: var(--warning-bg); color: #92400e;
    text-align: center; padding: 6px 12px;
    font-size: 0.78rem; font-weight: 700;
    z-index: 200; display: none;
}
.offline-banner.visible { display: block; }

/* ============================================
   SCANNER
   ============================================ */
.scan-section {
    display: flex; flex-direction: column; gap: 12px; padding-top: 4px;
    min-height: calc(100vh - 200px);
}

.scanner-viewport {
    width: 100%; aspect-ratio: 3/4;
    max-height: 60vh;
    background: var(--gray-900); border-radius: var(--radius);
    overflow: hidden; position: relative;
    display: flex; align-items: center; justify-content: center;
}
.scanner-viewport video, .scanner-viewport canvas {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.scanner-placeholder {
    color: rgba(255,255,255,0.5); font-size: 0.85rem; font-weight: 600;
    text-align: center; padding: 20px;
}

.scanner-frame {
    position: absolute; width: 85%; height: 30%;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    z-index: 5; pointer-events: none;
}
.frame-corner {
    position: absolute; width: 24px; height: 24px;
    border-color: var(--primary); border-style: solid; border-width: 0;
}
.frame-corner.tl { top: 0; left: 0; border-top-width: 3px; border-left-width: 3px; border-top-left-radius: 6px; }
.frame-corner.tr { top: 0; right: 0; border-top-width: 3px; border-right-width: 3px; border-top-right-radius: 6px; }
.frame-corner.bl { bottom: 0; left: 0; border-bottom-width: 3px; border-left-width: 3px; border-bottom-left-radius: 6px; }
.frame-corner.br { bottom: 0; right: 0; border-bottom-width: 3px; border-right-width: 3px; border-bottom-right-radius: 6px; }

.scan-line {
    position: absolute; top: 0; left: 10%; width: 80%; height: 2px;
    background: linear-gradient(90deg, transparent, var(--primary), transparent);
    animation: scanMove 2s ease-in-out infinite;
    box-shadow: 0 0 8px rgba(124,58,237,0.5);
}
@keyframes scanMove { 0%, 100% { top: 10%; } 50% { top: 90%; } }

.scanner-controls { display: flex; gap: 8px; }
.scanner-btn {
    flex: 1; padding: 12px; border-radius: var(--radius-sm);
    background: var(--gray-100); color: var(--text);
    font-size: 0.85rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center; gap: 6px;
}
.scanner-btn.primary { background: var(--primary); color: #fff; }
.scanner-btn:active { transform: scale(0.97); }

.scan-fallback {
    margin-top: auto;
    padding-top: 4px;
    display: flex; flex-direction: column; gap: 6px;
}
.scan-fallback-label {
    font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--subtext);
    padding-left: 4px;
}

.manual-entry {
    display: flex; gap: 8px; background: #fff;
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: 10px; box-shadow: var(--shadow-sm);
}
.manual-entry input {
    flex: 1; padding: 10px 12px; border: 1px solid var(--border);
    border-radius: var(--radius-sm); font-size: 0.95rem;
    font-family: inherit; letter-spacing: 0.02em;
    background: #fff;
}
.manual-entry input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(124,58,237,0.12); }
.manual-entry .search-btn {
    padding: 10px 16px; background: var(--primary); color: #fff;
    border-radius: var(--radius-sm); font-weight: 700; font-size: 0.82rem;
}

/* Scan result modal — slide-up sheet. Layout: green "Order Found" tab
   sitting flush on top of the panel (rounded top corners only), purple
   ID bar edge-to-edge at the panel top with the panel's rounded corners,
   info rows on plain white body, sticky CTA dock at bottom. */
.scan-result-panel { padding-bottom: 0; overflow: visible; }

/* "Order Found" tab — flush against the panel top, no gap. Top corners
   rounded only, bottom corners square (notebook-tab style). */
.scan-found-tab {
    position: absolute; bottom: 100%; left: 50%;
    transform: translateX(-50%);
    margin-bottom: 0;
    padding: 9px 26px;
    border-radius: 14px 14px 0 0;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #fff; font-size: 0.78rem; font-weight: 800;
    letter-spacing: 0.08em; text-transform: uppercase;
    box-shadow: 0 -6px 18px rgba(16,185,129,0.30);
    white-space: nowrap; z-index: 5;
    /* Hidden while panel is closed so it doesn't show above the bottom nav. */
    opacity: 0; visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}
.scan-result-panel.open .scan-found-tab {
    opacity: 1; visibility: visible;
    animation: scanFoundTabPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes scanFoundTabPop {
    from { transform: translateX(-50%) translateY(8px) scale(0.85); opacity: 0; }
    to   { transform: translateX(-50%) translateY(0) scale(1); opacity: 1; }
}
/* Purple ID bar — edge-to-edge at the very top of the panel. Top corners
   match the panel's 20px radius so the bar fills the rounded top
   visually; bottom corners are square so info rows sit flush below. */
.scan-result-head {
    padding: 16px 22px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: #fff;
    border-radius: 20px 20px 0 0;
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
.scan-result-ref { font-size: 1.15rem; font-weight: 800; letter-spacing: 0.02em; }
.scan-result-status {
    padding: 5px 10px; border-radius: 999px;
    background: rgba(255,255,255,0.22); color: #fff;
    font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
    white-space: nowrap;
}
/* Info rows — plain on the panel's white background, no card wrapper. */
.scan-result-rows { display: flex; flex-direction: column; }
.scan-result-row {
    display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
    padding: 10px 0; border-bottom: 1px solid var(--border-light);
}
.scan-result-row:last-child { border-bottom: none; }
.srr-label {
    font-size: 0.72rem; font-weight: 700; color: var(--subtext);
    text-transform: uppercase; letter-spacing: 0.05em; flex-shrink: 0;
}
.srr-val {
    font-size: 0.95rem; font-weight: 600; color: var(--text);
    text-align: right; word-break: break-word;
}
.srr-mono { font-family: ui-monospace, monospace; font-size: 0.85rem; letter-spacing: 0.02em; }

/* Sticky bottom CTA dock — primary green Confirm Pickup full-width at the
   very bottom; failsafe options sit smaller in a row above it. */
.scan-modal-cta {
    position: sticky; bottom: 0; z-index: 2;
    background: #fff; padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--border-light);
    display: flex; flex-direction: column; gap: 8px;
}
.scan-cta-secondary-row {
    display: flex; flex-direction: column; gap: 8px;
}
.scan-cta-secondary {
    width: 100%; padding: 12px;
    background: transparent; color: var(--subtext);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    font-size: 0.85rem; font-weight: 600;
    transition: all 0.15s ease;
}
.scan-cta-secondary:hover { background: var(--gray-50); color: var(--text); }
.scan-cta-secondary:active { transform: scale(0.98); }
.scan-cta-primary {
    width: 100%; padding: 18px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #fff; border: none; border-radius: var(--radius);
    font-size: 1.05rem; font-weight: 800; letter-spacing: 0.01em;
    box-shadow: 0 8px 20px rgba(16,185,129,0.35);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    display: flex; align-items: center; justify-content: center; gap: 10px;
}
.scan-cta-primary:active { transform: scale(0.98); box-shadow: 0 4px 12px rgba(16,185,129,0.3); }
.scan-cta-primary.scan-cta-neutral {
    background: var(--gray-100); color: var(--text);
    box-shadow: none;
}

/* Legacy inline scan result styles — kept harmless for any place that
   still renders them (none currently do, but leave as a safety net). */
.scan-result-body { padding: 14px; }
.scan-actions {
    display: flex; flex-direction: column; gap: 8px;
    padding: 0 14px 14px;
}
.scan-action-btn {
    width: 100%; padding: 14px 12px; border-radius: var(--radius-sm);
    font-size: 0.95rem; font-weight: 700; text-align: center;
    border: 2px solid transparent; transition: all 0.15s ease;
}
.scan-action-btn.primary,
.scan-action-btn.suggested {
    background: var(--primary); color: #fff;
    border-color: var(--primary);
    box-shadow: 0 4px 10px rgba(124,58,237,0.25);
}
.scan-action-btn.secondary {
    background: transparent; color: var(--subtext);
    border-color: var(--border);
    font-size: 0.82rem; font-weight: 600;
    padding: 10px 12px;
}
.scan-action-btn.secondary:hover { background: var(--gray-50); color: var(--text); }
.scan-action-btn:active { transform: scale(0.97); }

/* Batch scan progress banner */
.batch-scan-banner {
    padding: 10px 14px;
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff; border-radius: var(--radius);
    margin-bottom: 10px;
}
.batch-scan-title { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.02em; margin-bottom: 6px; }
.batch-scan-progress {
    height: 6px; background: rgba(255,255,255,0.25); border-radius: 3px; overflow: hidden;
}
.batch-scan-progress > div { height: 100%; background: #fff; transition: width 0.25s ease; }
.batch-scan-list { font-size: 0.72rem; opacity: 0.9; margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px; }
.bs-chip {
    display: inline-block; padding: 2px 8px;
    border-radius: 999px; background: rgba(255,255,255,0.2);
    font-weight: 700; font-size: 0.7rem;
}
.bs-chip.done { background: rgba(255,255,255,0.9); color: var(--success); }
.bs-exit {
    margin-top: 8px; padding: 6px 12px;
    background: rgba(0,0,0,0.15); color: #fff;
    border-radius: var(--radius-sm);
    font-size: 0.74rem; font-weight: 700;
}
.bs-exit:active { background: rgba(0,0,0,0.3); }

/* ============================================
   PHOTO CAPTURE (fullscreen)
   ============================================ */
.photo-modal {
    position: fixed; inset: 0; z-index: 2000;
    background: #000; display: none;
    flex-direction: column;
}
.photo-modal.open { display: flex; }
.photo-head {
    padding: calc(12px + var(--safe-top)) 16px 12px;
    display: flex; justify-content: space-between; align-items: center;
    color: #fff;
    background: linear-gradient(180deg, rgba(0,0,0,0.7), transparent);
}
.photo-cancel { color: #fff; font-size: 0.95rem; font-weight: 600; padding: 4px 0; }
.photo-title { font-size: 0.95rem; font-weight: 700; letter-spacing: 0.02em; }
.photo-viewport {
    flex: 1; position: relative; background: #000;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.photo-viewport video { width: 100%; height: 100%; object-fit: cover; }
.photo-preview {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; display: none; background: #000;
}
.photo-preview.show { display: block; }
.photo-frame {
    position: absolute; inset: 10% 8%;
    pointer-events: none;
}
.photo-frame.hide { display: none; }
.pf-corner {
    position: absolute; width: 28px; height: 28px;
    border-color: #fff; border-style: solid; border-width: 0;
}
.pf-corner.tl { top: 0; left: 0; border-top-width: 3px; border-left-width: 3px; }
.pf-corner.tr { top: 0; right: 0; border-top-width: 3px; border-right-width: 3px; }
.pf-corner.bl { bottom: 0; left: 0; border-bottom-width: 3px; border-left-width: 3px; }
.pf-corner.br { bottom: 0; right: 0; border-bottom-width: 3px; border-right-width: 3px; }
.photo-scanline {
    position: absolute; left: 0; right: 0; top: 50%;
    height: 1px; background: rgba(255,255,255,0.5);
    box-shadow: 0 0 12px rgba(255,255,255,0.4);
}
.photo-actions {
    padding: 20px 16px calc(20px + var(--safe-bottom));
    display: flex; align-items: center; justify-content: center; gap: 14px;
    background: linear-gradient(0deg, rgba(0,0,0,0.7), transparent);
}
.photo-shutter {
    width: 70px; height: 70px; border-radius: 50%;
    border: 4px solid #fff;
    background: transparent; padding: 0;
    display: flex; align-items: center; justify-content: center;
}
.shutter-inner {
    width: 54px; height: 54px; border-radius: 50%;
    background: #fff; transition: all 0.1s ease;
}
.photo-shutter:active .shutter-inner { background: var(--gray-400); transform: scale(0.9); }

.btn-ghost {
    padding: 12px 20px; border-radius: var(--radius-sm);
    background: rgba(255,255,255,0.15); color: #fff;
    font-size: 0.88rem; font-weight: 700;
    border: 1px solid rgba(255,255,255,0.25);
}
.btn-primary {
    padding: 12px 24px; border-radius: var(--radius-sm);
    background: #fff; color: var(--primary);
    font-size: 0.88rem; font-weight: 800;
}

/* ============================================
   ISSUE REPORTING MODAL
   ============================================ */
.issue-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.4);
    opacity: 0; visibility: hidden; z-index: 700;
    transition: opacity 0.3s, visibility 0.3s;
}
.issue-overlay.open { opacity: 1; visibility: visible; }
.issue-panel {
    position: fixed; left: 0; right: 0; bottom: 0;
    max-height: 90vh; background: #fff;
    border-radius: 20px 20px 0 0;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
    z-index: 701;
    display: flex; flex-direction: column;
}
.issue-panel.open { transform: translateY(0); }
.issue-head {
    padding: 10px 20px 14px; border-bottom: 1px solid var(--border-light);
    display: flex; align-items: center; gap: 10px;
}
.issue-title { flex: 1; font-size: 1.05rem; font-weight: 800; color: var(--text); text-align: center; }
.issue-back {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--gray-100); color: var(--gray-600);
    display: flex; align-items: center; justify-content: center;
}
.issue-body { flex: 1; overflow-y: auto; padding: 16px 20px calc(20px + var(--safe-bottom)); }

.issue-type-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
.issue-type-btn {
    padding: 16px 12px; border-radius: var(--radius);
    background: var(--gray-50); border: 1px solid var(--border);
    text-align: left; display: flex; flex-direction: column; gap: 4px;
    transition: all 0.15s ease;
}
.issue-type-btn:active { transform: scale(0.97); background: var(--primary-lighter); border-color: var(--primary); }
.issue-type-emoji { font-size: 1.6rem; line-height: 1; }
.issue-type-label { font-size: 0.82rem; font-weight: 700; color: var(--text); }
.issue-type-desc { font-size: 0.68rem; color: var(--subtext); line-height: 1.3; }

.issue-detail-card {
    padding: 12px; background: var(--primary-lighter); border-radius: var(--radius);
    display: flex; align-items: center; gap: 10px; margin-bottom: 16px;
}
.issue-detail-card .emoji { font-size: 1.8rem; line-height: 1; }
.issue-detail-card .name { font-size: 0.95rem; font-weight: 700; color: var(--primary-deeper); }
.issue-detail-card .desc { font-size: 0.75rem; color: var(--primary-dark); margin-top: 2px; }

.issue-notes {
    width: 100%; min-height: 80px; max-height: 180px;
    padding: 12px 14px; border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.92rem; font-family: inherit; resize: vertical;
    margin-bottom: 14px;
}
.issue-notes:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(124,58,237,0.12); }
.issue-char-count { font-size: 0.72rem; color: var(--gray-400); text-align: right; margin-top: -10px; margin-bottom: 12px; }

.issue-photo-section {
    padding: 14px; background: var(--gray-50);
    border-radius: var(--radius); margin-bottom: 14px;
    text-align: center;
}
.issue-photo-label {
    font-size: 0.72rem; font-weight: 700; color: var(--subtext);
    text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px;
}
.issue-photo-label .req { color: var(--danger); }
.issue-photo-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 18px; border-radius: var(--radius-sm);
    background: #fff; border: 2px dashed var(--primary);
    color: var(--primary); font-size: 0.82rem; font-weight: 700;
}
.issue-photo-btn:active { transform: scale(0.97); background: var(--primary-lighter); }
.issue-photo-preview {
    width: 100%; max-height: 180px; object-fit: cover;
    border-radius: var(--radius); margin-bottom: 10px;
}

.issue-submit {
    width: 100%; padding: 14px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff; font-size: 0.95rem; font-weight: 800;
    border-radius: var(--radius-sm); letter-spacing: 0.02em;
    box-shadow: 0 4px 12px rgba(124,58,237,0.3);
}
.issue-submit:disabled { opacity: 0.6; cursor: not-allowed; box-shadow: none; }
.issue-submit:active:not(:disabled) { transform: scale(0.98); }

/* ============================================
   TRANSIT VIEW (DoorDash-style fullscreen)
   ============================================ */
.transit-view {
    position: fixed; inset: 0; z-index: 600;
    background: #0f172a;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
    display: flex; flex-direction: column;
}
.transit-view.open { transform: translateY(0); }
.transit-head {
    position: absolute; top: 0; left: 0; right: 0; z-index: 3;
    padding: calc(14px + var(--safe-top)) 14px 14px;
    display: flex; align-items: center; gap: 12px;
    background: linear-gradient(180deg, rgba(15,23,42,0.75), transparent);
}
.transit-back {
    width: 42px; height: 42px; border-radius: 50%;
    background: rgba(255,255,255,0.25); backdrop-filter: blur(10px);
    color: #fff; display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255,255,255,0.2);
}
.transit-back:active { background: rgba(255,255,255,0.35); }
.transit-live {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 999px;
    background: rgba(16,185,129,0.25); backdrop-filter: blur(10px);
    color: #fff; font-size: 0.72rem; font-weight: 800;
    border: 1px solid rgba(16,185,129,0.4);
}
.transit-live-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #10b981; animation: pulse-dot 1.4s ease-in-out infinite;
}
@keyframes pulse-dot { 0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0.6); } 50% { box-shadow: 0 0 0 6px rgba(16,185,129,0); } }
.transit-ref {
    margin-left: auto; font-size: 0.9rem; font-weight: 800; color: #fff;
    padding: 6px 12px; background: rgba(255,255,255,0.15); backdrop-filter: blur(10px);
    border-radius: 999px;
}

.transit-map {
    height: 52vh; background: #1e293b;
    position: relative; display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.transit-map-placeholder {
    color: rgba(255,255,255,0.3);
    display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.transit-map-iframe {
    width: 100%; height: 100%; border: 0; display: block;
}

.transit-sheet {
    flex: 1; background: #fff;
    border-radius: 20px 20px 0 0;
    margin-top: -20px; position: relative; z-index: 2;
    padding: 18px 18px calc(18px + var(--safe-bottom));
    overflow-y: auto;
    box-shadow: 0 -8px 24px rgba(0,0,0,0.15);
}
.tv-dest-name { font-size: 1.3rem; font-weight: 800; color: var(--text); margin-bottom: 4px; }
.tv-dest-addr { font-size: 0.9rem; color: var(--subtext); margin-bottom: 14px; }

.tv-due-bar {
    padding: 12px; border-radius: var(--radius);
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 14px; background: var(--success-bg);
}
.tv-due-bar.urgency-orange { background: #ffedd5; }
.tv-due-bar.urgency-red    { background: #fee2e2; animation: pulse-red 1.4s ease-in-out infinite; }
.tv-due-icon {
    width: 36px; height: 36px; border-radius: 50%;
    background: #d1fae5; display: flex; align-items: center; justify-content: center;
    color: var(--success); flex-shrink: 0;
}
.tv-due-bar.urgency-orange .tv-due-icon { background: #ffedd5; color: #ea580c; }
.tv-due-bar.urgency-red    .tv-due-icon { background: #fee2e2; color: var(--danger); }
.tv-due-text { font-size: 0.78rem; color: var(--success); font-weight: 700; }
.tv-due-bar.urgency-orange .tv-due-text { color: #9a3412; }
.tv-due-bar.urgency-red    .tv-due-text { color: #991b1b; }
.tv-due-countdown {
    margin-left: auto; padding: 4px 10px; border-radius: 8px;
    background: #d1fae5; color: var(--success); font-variant-numeric: tabular-nums;
    font-size: 0.82rem; font-weight: 800;
}
.tv-due-bar.urgency-orange .tv-due-countdown { background: #ffedd5; color: #9a3412; }
.tv-due-bar.urgency-red    .tv-due-countdown { background: #fee2e2; color: #991b1b; }

.tv-nav-btn {
    width: 100%; padding: 14px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff; border-radius: var(--radius);
    font-size: 0.95rem; font-weight: 800; letter-spacing: 0.02em;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    box-shadow: 0 4px 12px rgba(124,58,237,0.3);
    margin-bottom: 14px;
}
.tv-nav-btn:active { transform: scale(0.98); }

.tv-payout {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 999px;
    background: var(--success-bg); color: var(--success);
    font-size: 0.78rem; font-weight: 800; margin-bottom: 14px;
}

.tv-quick-actions {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px;
}
.tv-quick {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 12px 8px; border-radius: var(--radius);
    background: var(--gray-50); border: 1px solid var(--border);
    color: var(--text); font-size: 0.72rem; font-weight: 600;
}
.tv-quick svg { color: var(--primary); }
.tv-quick:active { background: var(--primary-lighter); }

.tv-meta {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    padding: 12px; border-radius: var(--radius); background: var(--gray-50);
    margin-bottom: 12px;
}
.tv-meta-row { display: flex; flex-direction: column; }
.tv-meta-lbl { font-size: 0.62rem; color: var(--gray-400); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.tv-meta-val { font-size: 0.88rem; color: var(--text); font-weight: 700; }

.tv-secondary {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.tv-secondary button {
    padding: 10px; border-radius: var(--radius-sm);
    background: var(--gray-100); color: var(--text);
    font-size: 0.8rem; font-weight: 700;
}
.tv-secondary button.danger { background: var(--danger-bg); color: var(--danger); }
.tv-secondary button:active { transform: scale(0.97); }

/* ============================================
   EARNINGS DASHBOARD
   ============================================ */
.earnings-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px;
}
.earnings-card {
    background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
    padding: 14px; box-shadow: var(--shadow-sm);
}
.earnings-card .label { font-size: 0.62rem; color: var(--subtext); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.earnings-card .value { font-size: 1.4rem; font-weight: 800; color: var(--text); letter-spacing: -0.01em; margin-top: 3px; }
.earnings-card.featured { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; }
.earnings-card.featured .label { color: rgba(255,255,255,0.7); }
.earnings-card.featured .value { color: #fff; }

.earnings-chart {
    background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
    padding: 16px; margin-bottom: 14px; box-shadow: var(--shadow-sm);
}
.chart-title { font-size: 0.78rem; font-weight: 700; color: var(--text); margin-bottom: 12px; }
.chart-bars {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px;
    height: 140px; align-items: end;
}
.chart-bar {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    height: 100%; justify-content: flex-end;
}
.chart-bar .bar {
    width: 100%; min-height: 4px;
    background: var(--primary-light); border-radius: 4px 4px 0 0;
    transition: height 0.3s ease;
}
.chart-bar.today .bar { background: var(--primary); }
.chart-bar .amt { font-size: 0.62rem; color: var(--subtext); font-weight: 700; }
.chart-bar .day { font-size: 0.62rem; color: var(--gray-400); font-weight: 600; }

.recent-list {
    background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
    overflow: hidden;
}
.recent-row {
    padding: 12px 14px; display: flex; justify-content: space-between; align-items: center;
    border-bottom: 1px solid var(--border-light);
}
.recent-row:last-child { border-bottom: none; }
.recent-info .rref { font-size: 0.82rem; font-weight: 700; color: var(--primary); }
.recent-info .rdate { font-size: 0.7rem; color: var(--subtext); margin-top: 2px; }
.recent-amt { font-size: 0.9rem; font-weight: 800; color: var(--success); }

/* ============================================
   DETAIL PANEL — ACTION BUTTONS
   ============================================ */
.detail-actions {
    display: flex; flex-direction: column; gap: 10px;
    margin-top: 18px;
}
.detail-actions .full { width: 100%; }
/* Split row — Report issue + Release sit side-by-side instead of stacked. */
.da-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.da-btn {
    padding: 14px; border-radius: var(--radius-sm);
    font-size: 0.88rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    transition: all 0.15s ease;
}
.da-btn.primary { background: var(--primary); color: #fff; }
.da-btn.primary:active { background: var(--primary-dark); transform: scale(0.98); }
.da-btn.success { background: var(--success); color: #fff; }
.da-btn.success:active { background: #047857; transform: scale(0.98); }
.da-btn.secondary { background: var(--gray-100); color: var(--text); }
.da-btn.secondary:active { background: var(--gray-200); }
.da-btn.danger { background: var(--danger-bg); color: var(--danger); border: 1px solid #fecaca; }
.da-btn.danger:active { background: #fee2e2; }

/* ============================================
   ORDER CARD — Legacy-faithful port (matches u:/mtcc-print/courier/app.css)
   ============================================ */

/* Card itself — needs overflow:hidden so the gradient due bar's negative
   margin clips inside the rounded corners. THIS WAS THE MISSING BIT. */
.order-card { overflow: hidden; }

/* Due bar — gradient backgrounds with WHITE TEXT (matching legacy).
   margin: -14px -14px 8px takes it flush to the card edges; rounded
   top corners come from the card's own overflow:hidden + the bar's
   own border-radius on its top corners. */
.card-due-bar {
    display: flex; align-items: center; gap: 5px;
    padding: 8px 14px;
    margin: -14px -14px 8px -14px;
    border-radius: var(--radius) var(--radius) 0 0;
    font-size: 0.72rem; font-weight: 700;
    background: rgba(124,58,237,0.06); color: var(--primary);
}
/* Status-coloured gradients (single-order cards) */
.card-due-bar.due-status-ready      { background: linear-gradient(135deg, #d97706, #b45309); color: #fff; }
.card-due-bar.due-status-dispatched { background: linear-gradient(135deg, #7c3aed, #6d28d9); color: #fff; }
.card-due-bar.due-status-shipped    { background: linear-gradient(135deg, #14b8a6, #0d9488); color: #fff; }
.card-due-bar.due-status-delivered  { background: linear-gradient(135deg, #059669, #047857); color: #fff; }
.card-due-bar.due-status-pickedup   { background: linear-gradient(135deg, #22c55e, #16a34a); color: #fff; }
.card-due-bar.due-status-missing    { background: linear-gradient(135deg, #dc2626, #b91c1c); color: #fff; }
.card-due-bar.due-status-printing   { background: linear-gradient(135deg, #6366f1, #4f46e5); color: #fff; }
.card-due-bar.due-status-preflight  { background: linear-gradient(135deg, #8b5cf6, #7c3aed); color: #fff; }
/* MTCC phase gradients */
.card-due-bar.due-mtcc-production       { background: linear-gradient(135deg, #6366f1, #4f46e5); color: #fff; }
.card-due-bar.due-mtcc-preparing        { background: linear-gradient(135deg, #d97706, #b45309); color: #fff; }
.card-due-bar.due-mtcc-ontheway         { background: linear-gradient(135deg, #14b8a6, #0d9488); color: #fff; }
.card-due-bar.due-mtcc-ready-for-pickup { background: linear-gradient(135deg, #059669, #047857); color: #fff; }
.card-due-bar.due-mtcc-pickedup         { background: linear-gradient(135deg, #22c55e, #16a34a); color: #fff; }
.card-due-bar.due-mtcc-missing          { background: linear-gradient(135deg, #dc2626, #b91c1c); color: #fff; }
.card-due-bar.due-mtcc-default          { background: linear-gradient(135deg, #64748b, #475569); color: #fff; }
/* Urgency overrides for courier (red <2h / orange <4h) */
.card-due-bar.due-urgent-red    { background: linear-gradient(135deg, #dc2626, #b91c1c); color: #fff; }
.card-due-bar.due-urgent-orange { background: linear-gradient(135deg, #ea580c, #c2410c); color: #fff; }
/* Top-of-list pulse — only the SINGLE most-urgent card in any list gets
   this treatment. Subtle ring + glow around the card so it draws the eye
   without screaming. Other red-tier cards demote to orange in the JS so
   the courier gets a clear visual hierarchy. */
.card-due-bar.is-top-urgent {
    position: relative;
    box-shadow: 0 0 0 1px rgba(220,38,38,0.6), 0 0 14px rgba(220,38,38,0.25);
    animation: cardTopUrgentPulse 1.6s ease-in-out infinite;
}
@keyframes cardTopUrgentPulse {
    0%, 100% { box-shadow: 0 0 0 1px rgba(220,38,38,0.55), 0 0 10px rgba(220,38,38,0.18); }
    50%      { box-shadow: 0 0 0 2px rgba(220,38,38,0.85), 0 0 22px rgba(220,38,38,0.5); }
}
@media (prefers-reduced-motion: reduce) {
    .card-due-bar.is-top-urgent { animation: none; }
}

.due-text-mtcc {
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.due-bar-badge { font-size: 0.58rem !important; padding: 2px 6px !important; }
.badge-sm      { font-size: 0.58rem !important; padding: 2px 6px !important; }

/* The status badge inside a gradient due bar gets a translucent white pill */
.card-due-bar .order-status-badge.due-bar-badge {
    background: rgba(255,255,255,0.22);
    color: #fff;
    border: 0;
}

/* Top row: ID + payout (courier only) */
.order-card-top {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 8px; margin-bottom: 4px;
}
.order-card-top-left {
    display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1;
}

/* Order ref — color matches status (legacy ref-status-* rules) */
.order-ref {
    font-size: 0.95rem; font-weight: 700; color: var(--text);
    letter-spacing: -0.01em; line-height: 1.1;
}
.ref-label {
    color: var(--gray-400);
    font-size: 0.62rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em;
    margin-right: 2px;
}
.ref-status-preflight, .ref-status-file_issue, .ref-status-printing { color: #6366f1; }
.ref-status-ready                                                    { color: #d97706; }
.ref-status-dispatched, .ref-status-shipped                          { color: #14b8a6; }
.ref-status-delivered                                                { color: #059669; }
.ref-status-pickedup                                                 { color: #22c55e; }
.ref-status-missing, .ref-status-unclaimed                           { color: #dc2626; }
/* Urgency override — red <2h, orange <4h, applied on top of status colour
   so the ref number visually matches the card's due-bar gradient. */
.ref-urgent-red    { color: #dc2626 !important; }
.ref-urgent-orange { color: #ea580c !important; }

/* ============================================
   ACTIVE DELIVERY BANNER (top of My Deliveries)
   Teal gradient pill linking to the in-transit order's transit view.
   ============================================ */
.active-delivery-banner {
    display: flex; align-items: center; gap: 12px;
    width: 100%;
    padding: 14px 16px;
    margin: 0 0 14px;
    background: linear-gradient(135deg, #14b8a6, #0d9488);
    color: #fff;
    border: 0; border-radius: var(--radius);
    cursor: pointer; font-family: inherit; text-align: left;
    box-shadow: 0 4px 14px rgba(20,184,166,0.25);
    -webkit-tap-highlight-color: transparent;
}
.active-delivery-banner:active { transform: scale(0.99); filter: brightness(0.95); }
.active-delivery-banner .adb-pulse {
    width: 10px; height: 10px; border-radius: 50%;
    background: #4ade80; box-shadow: 0 0 8px rgba(74,222,128,0.7);
    animation: transit-blink 1.2s ease-in-out infinite;
    flex-shrink: 0;
}
.active-delivery-banner .adb-text { flex: 1; min-width: 0; }
.active-delivery-banner .adb-title {
    font-size: 0.85rem; font-weight: 700; line-height: 1.2;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.active-delivery-banner .adb-title strong { font-family: ui-monospace, monospace; font-weight: 800; }
.active-delivery-banner .adb-sub {
    font-size: 0.72rem; font-weight: 500; opacity: 0.85;
    margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.active-delivery-banner .adb-cta {
    font-size: 0.85rem; font-weight: 700; flex-shrink: 0;
    padding-left: 6px;
}

/* ============================================
   DELIVERIES FILTER TABS (All / MTCC / Office)
   Segmented pill control. Active = white pill, others = ghost.
   ============================================ */
.deliveries-tabs {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 0; padding: 4px;
    background: var(--gray-100);
    border-radius: 10px;
    margin-bottom: 14px;
}
.dlv-tab {
    padding: 9px 0;
    background: transparent; border: 0;
    font-size: 0.82rem; font-weight: 700;
    color: var(--gray-500);
    border-radius: 8px;
    cursor: pointer; font-family: inherit;
    transition: background 0.18s, color 0.18s, box-shadow 0.18s;
}
.dlv-tab.active {
    background: #fff; color: var(--text);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.dlv-tab:active:not(.active) { background: rgba(0,0,0,0.04); }

/* ============================================
   WEATHER BANNER — single global instance below the app header. Themed
   gradient + animated overlay (rain streaks, snow flakes, sun rays, etc.)
   driven by the data-condition attribute. Stays visible across every tab.
   ============================================ */
.weather-banner {
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    z-index: 90;
    height: 0;
    transition: height 0.35s ease;
    color: #fff;
    font-size: 0.78rem;
}
.weather-banner.is-ready { height: 38px; }

.weather-banner .wb-content {
    position: relative; z-index: 2;
    display: flex; align-items: center; gap: 8px;
    height: 100%; padding: 0 16px;
}
.weather-banner .wb-effect {
    position: absolute; inset: 0; z-index: 1;
    pointer-events: none;
    /* Per-condition animations defined below in [data-condition=...] */
}

.wb-icon { font-size: 1.1rem; line-height: 1; flex-shrink: 0; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.18)); }
.wb-temp { font-weight: 800; letter-spacing: 0.01em; }
.wb-desc { font-weight: 500; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: 0.92; }
.wb-sep  { opacity: 0.55; font-size: 0.7rem; }
.wb-wind {
    display: inline-flex; align-items: center; gap: 3px;
    font-weight: 500; font-size: 0.74rem;
    flex-shrink: 0; opacity: 0.92;
}
.wb-wind svg { stroke: rgba(255,255,255,0.85); }
.wb-bonus {
    display: inline-flex; align-items: center;
    padding: 3px 9px; border-radius: 999px;
    background: #fbbf24; color: #78350f;
    font-size: 0.68rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.04em;
    flex-shrink: 0; margin-left: auto;
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}

/* ── Theme: SUN — warm orange/yellow gradient with slow shifting rays ── */
.weather-banner[data-condition="sun"] {
    background: linear-gradient(120deg, #f59e0b 0%, #fbbf24 50%, #f97316 100%);
    background-size: 200% 200%;
    animation: wb-sun-shift 18s ease-in-out infinite;
}
.weather-banner[data-condition="sun"] .wb-effect {
    background:
        radial-gradient(circle at 20% 50%, rgba(255,255,255,0.18), transparent 40%),
        radial-gradient(circle at 80% 50%, rgba(255,255,255,0.14), transparent 40%);
    animation: wb-sun-rays 7s ease-in-out infinite alternate;
}
@keyframes wb-sun-shift { 0%,100%{background-position:0% 50%;} 50%{background-position:100% 50%;} }
@keyframes wb-sun-rays  { from{opacity:0.55;} to{opacity:1;} }

/* ── Theme: PARTLY CLOUDY — soft blue/orange split ── */
.weather-banner[data-condition="partly_cloudy"] {
    background: linear-gradient(120deg, #60a5fa 0%, #93c5fd 50%, #fcd34d 100%);
    background-size: 200% 200%;
    animation: wb-sun-shift 22s ease-in-out infinite;
}

/* ── Theme: CLOUDY — flat slate gradient with slow drift ── */
.weather-banner[data-condition="cloudy"] {
    background: linear-gradient(120deg, #94a3b8 0%, #64748b 50%, #475569 100%);
    background-size: 200% 200%;
    animation: wb-sun-shift 26s ease-in-out infinite;
}

/* ── Theme: RAIN / DRIZZLE — blue-grey + animated falling streaks ── */
.weather-banner[data-condition="rain"],
.weather-banner[data-condition="drizzle"] {
    background: linear-gradient(120deg, #1e3a8a 0%, #1e40af 50%, #334155 100%);
}
.weather-banner[data-condition="rain"] .wb-effect,
.weather-banner[data-condition="drizzle"] .wb-effect {
    background-image:
        repeating-linear-gradient(115deg,
            transparent 0 12px,
            rgba(255,255,255,0.18) 12px 13px,
            transparent 13px 24px);
    animation: wb-rain 0.7s linear infinite;
}
.weather-banner[data-condition="drizzle"] .wb-effect { animation-duration: 1.2s; opacity: 0.6; }
@keyframes wb-rain { from{background-position:0 0;} to{background-position:-24px 38px;} }

/* ── Theme: THUNDER — dark stormy + occasional flash ── */
.weather-banner[data-condition="thunder"] {
    background: linear-gradient(120deg, #0f172a 0%, #1e293b 50%, #334155 100%);
}
.weather-banner[data-condition="thunder"] .wb-effect {
    background-image:
        repeating-linear-gradient(115deg,
            transparent 0 10px,
            rgba(255,255,255,0.25) 10px 11px,
            transparent 11px 22px);
    animation: wb-rain 0.5s linear infinite, wb-flash 6s ease-in-out infinite;
}
@keyframes wb-flash {
    0%, 92%, 100% { background-color: transparent; }
    93%, 95%      { background-color: rgba(255,255,255,0.45); }
    94%           { background-color: rgba(255,255,255,0.0); }
}

/* ── Theme: SNOW — soft blue/white + drifting flakes ── */
.weather-banner[data-condition="snow"] {
    background: linear-gradient(120deg, #cbd5e1 0%, #e2e8f0 50%, #cbd5e1 100%);
    color: #1e293b;
}
.weather-banner[data-condition="snow"] .wb-icon { filter: none; }
.weather-banner[data-condition="snow"] .wb-wind svg { stroke: #475569; }
.weather-banner[data-condition="snow"] .wb-effect {
    background:
        radial-gradient(circle at 15% 30%, #fff 0.8px, transparent 1.5px),
        radial-gradient(circle at 35% 70%, #fff 0.8px, transparent 1.5px),
        radial-gradient(circle at 55% 20%, #fff 0.8px, transparent 1.5px),
        radial-gradient(circle at 75% 80%, #fff 0.8px, transparent 1.5px),
        radial-gradient(circle at 90% 40%, #fff 0.8px, transparent 1.5px);
    background-size: 60px 60px;
    animation: wb-snow 8s linear infinite;
    opacity: 0.9;
}
@keyframes wb-snow { from{background-position:0 0;} to{background-position:-30px 60px;} }

/* ── Theme: FOG — muted misty grey ── */
.weather-banner[data-condition="fog"] {
    background: linear-gradient(120deg, #9ca3af 0%, #d1d5db 50%, #9ca3af 100%);
    background-size: 200% 200%;
    animation: wb-sun-shift 20s ease-in-out infinite;
    color: #1f2937;
}
.weather-banner[data-condition="fog"] .wb-icon { filter: none; }
.weather-banner[data-condition="fog"] .wb-wind svg { stroke: #4b5563; }

/* ── Theme: CLEAR NIGHT — deep indigo with twinkling dots ── */
.weather-banner[data-condition="clear_night"] {
    background: linear-gradient(120deg, #1e1b4b 0%, #312e81 50%, #4c1d95 100%);
}
.weather-banner[data-condition="clear_night"] .wb-effect {
    background:
        radial-gradient(circle at 20% 40%, #fff 0.6px, transparent 1px),
        radial-gradient(circle at 50% 70%, #fff 0.6px, transparent 1px),
        radial-gradient(circle at 80% 30%, #fff 0.6px, transparent 1px);
    animation: wb-twinkle 4s ease-in-out infinite alternate;
}
@keyframes wb-twinkle { from{opacity:0.4;} to{opacity:1;} }

/* Bad-weather emphasis: amber bonus pill is already styled above; the
   gradient for the active condition still wins, but the `is-bad` flag
   slightly intensifies the bottom shadow so the bonus stands out. */
.weather-banner.is-bad { box-shadow: inset 0 -2px 0 rgba(0,0,0,0.18); }

/* Payout block on the right (courier role only) */
.card-payout-area { text-align: right; flex-shrink: 0; }
.card-payout-big {
    font-size: 1.2rem; font-weight: 800; color: #15803d;
    line-height: 1.1; font-variant-numeric: tabular-nums;
}
.card-payout-bonus { font-size: 0.62rem; font-weight: 600; color: #16a34a; opacity: 0.75; }

/* Transit hero banner (purple→teal gradient) for in-transit orders */
.transit-hero-banner {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 16px;
    margin: -14px -14px 10px -14px;
    background: linear-gradient(135deg, #14b8a6 0%, #0d9488 50%, #0f766e 100%);
    color: #fff; font-size: 0.75rem; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    border-radius: var(--radius) var(--radius) 0 0;
}
/* Pickup Pending variant — courier accepted but hasn't collected yet.
   Purple instead of teal so it reads as "earlier phase" than In Transit. */
.transit-hero-banner.pickup-pending-banner {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 50%, #5b21b6 100%);
}
.transit-hero-banner.pickup-pending-banner .transit-pulse {
    background: #fbbf24; box-shadow: 0 0 6px rgba(251,191,36,0.6);
}
.transit-hero-banner + .card-due-bar { margin-top: 0; border-radius: 0; }
.thb-left { display: inline-flex; align-items: center; gap: 8px; }
.thb-right { font-size: 0.68rem; font-weight: 600; opacity: 0.85; animation: thb-nudge 2s ease-in-out infinite; text-transform: none; letter-spacing: normal; }
@keyframes thb-nudge { 0%,100%{opacity:0.6;} 50%{opacity:1;} }
.transit-pulse {
    display: inline-block; width: 10px; height: 10px; border-radius: 50%;
    background: #4ade80; box-shadow: 0 0 6px rgba(74,222,128,0.6);
    animation: transit-blink 1.2s ease-in-out infinite;
}
@keyframes transit-blink {
    0%,100% { opacity: 1; transform: scale(1); }
    50%     { opacity: 0.4; transform: scale(0.8); }
}
.order-card.in-transit-card {
    border-color: #0d9488;
    background: linear-gradient(135deg, rgba(13,148,136,0.04) 0%, var(--card) 40%);
    box-shadow: 0 2px 12px rgba(13,148,136,0.15);
}

/* Vertical pickup → dropoff timeline (legacy structure) */
.card-route-vertical {
    padding: 8px 0 2px;
    margin-top: 6px;
    border-top: 1px dashed #e5e7eb;
}
.card-route-stop { display: flex; gap: 12px; align-items: stretch; }
.card-route-dot-col {
    display: flex; flex-direction: column; align-items: center;
    width: 24px; flex-shrink: 0;
    padding-top: 14px;       /* aligns icon with the NAME, not the label above */
}
.card-route-icon { width: 18px; height: 18px; flex-shrink: 0; }
.card-route-line-v {
    width: 0; flex: 1; min-height: 20px;
    border-left: 2px dashed var(--gray-300);
    margin: 3px 0 0;
}
.card-route-info { flex: 1; min-width: 0; padding-bottom: 10px; }
.card-route-stop:last-child .card-route-info { padding-bottom: 2px; }
.card-route-label {
    font-size: 0.62rem; font-weight: 700; color: var(--gray-400);
    text-transform: uppercase; letter-spacing: 0.06em;
}
.card-route-name { font-size: 0.82rem; font-weight: 700; color: var(--text); line-height: 1.2; }
.card-route-addr { font-size: 0.68rem; color: var(--subtext); line-height: 1.3; margin-top: 1px; }
.card-route-instructions { color: #2563eb !important; font-weight: 600; font-style: italic; font-size: 0.72rem !important; }
.card-route-notes { color: #d97706; font-style: italic; }

/* Footer (matching legacy .order-card-footer with negative margins so
   the top border spans the card edge-to-edge) */
.order-card-footer {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 0 2px;
    border-top: 1px solid #e5e7eb;
    margin: 6px -14px 0;
    padding-left: 14px; padding-right: 14px;
}
.card-footer-left, .card-footer-right { display: flex; align-items: center; gap: 6px; }
.card-meta {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 0.78rem; font-weight: 600; color: #374151;
}
.card-meta svg { stroke: rgb(124, 58, 237); }
.card-footer-dot { margin: 0 5px; color: var(--gray-300); font-size: 0.6rem; }

/* Issue badge */
.order-issue-badge {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 0.7rem; font-weight: 700; color: #d97706;
    background: #fffbeb; border: 1px solid #fde68a;
    padding: 2px 8px; border-radius: 6px; margin-left: 6px;
}

/* Delivery photo thumbnail on completed cards */
.card-photo-preview {
    position: relative; margin: 8px -14px -10px;
    border-top: 1px solid var(--border);
    line-height: 0; overflow: hidden;
}
.card-photo-preview img { width: 100%; height: 110px; object-fit: cover; display: block; }
.card-photo-label {
    position: absolute; bottom: 8px; left: 8px;
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 0.62rem; font-weight: 700; color: #fff;
    background: rgba(0,0,0,0.6); padding: 3px 8px; border-radius: 4px;
}

/* MTCC card variant — body grid for customer/event lines */
.order-card.mtcc-card .order-card-body {
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px;
    margin-top: 4px; padding-top: 0; border: 0;
}

/* Pipeline tier dimming */
.pipeline-card.pipeline-24h   { opacity: 1; }
.pipeline-card.pipeline-48h   { opacity: 0.85; }
.pipeline-card.pipeline-72h   { opacity: 0.7; }
.pipeline-card.pipeline-later { opacity: 0.6; }

/* ============================================
   DETAIL PANEL — Legacy-faithful slide-up sheet
   Gradient header colored by status. Sectioned content. Drag handle.
   Reused for courier + MTCC + batch detail.
   ============================================ */

/* (.detail-rich-head + .drh-* + drag handle defined above with .detail-panel) */

/* ============================================
   BV7 — Detail-panel route card (port from legacy)
   Stats bar → static Google map → Google/Apple nav buttons → pickup
   stop → dropoff stop. Each stop has icon column + content column with
   name/addr/phone/hours/open-closed indicator + per-stop nav arrow.
   ============================================ */
.bv7-map-block {
    border: 1px solid #e5e7eb; border-radius: 10px;
    overflow: hidden; margin-bottom: 8px;
}
.bv7-stats-bar {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 16px; background: #f8fafc;
    border-bottom: 1px solid #e5e7eb;
    flex-wrap: wrap;
}
.bv7-stats-title {
    font-size: 0.75rem; font-weight: 700; color: #374151;
    text-transform: uppercase; letter-spacing: 0.04em;
    margin-right: auto;
}
.bv7-stats-sep { color: #d1d5db; font-size: 0.75rem; }
.bv7-stat {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 0.78rem; color: #6b7280;
}
.bv7-stat svg { stroke: #9ca3af; }
.bv7-stat strong { color: #7c3aed; font-weight: 700; }
.bv7-stat-dot { color: #c4b5fd; font-size: 0.7rem; margin: 0 2px; }
.route-info-loading { font-style: italic; opacity: 0.7; }
.bv7-map-link { display: block; line-height: 0; }
.bv7-map-img { width: 100%; height: auto; display: block; }
.bv7-map-iframe { width: 100%; height: 250px; border: 0; display: block; }

.route-map-buttons {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.route-map-buttons.single { grid-template-columns: 1fr; }
.route-app-btn {
    display: flex; align-items: center; justify-content: center;
    gap: 6px; padding: 12px;
    background: #fff; color: #374151;
    border: 1px solid #e5e7eb; border-radius: var(--radius-sm);
    font-size: 0.82rem; font-weight: 700;
    text-decoration: none; transition: background 0.15s;
}
.route-app-btn:active { background: #f9fafb; transform: scale(0.97); }
.route-app-btn.google svg { stroke: #4285f4; }
.route-app-btn.apple  svg { stroke: #000; }

.batch-timeline-v7 { padding: 12px 0 0; }
.bv7-stop { display: flex; align-items: stretch; }
.bv7-left {
    display: flex; flex-direction: column; align-items: center;
    width: 24px; flex-shrink: 0; margin-right: 14px; padding-top: 22px;
}
.bv7-icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.bv7-line {
    flex: 1; width: 0;
    border-left: 2px dashed #d1d5db;
    margin: 15px 0 0 0; min-height: 32px;
}
.bv7-right { flex: 1; min-width: 0; padding-bottom: 18px; position: relative; }
.bv7-label { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.route-stop-label {
    font-size: 0.65rem; font-weight: 700; color: #7c3aed;
    text-transform: uppercase; letter-spacing: 0.06em;
}
.bv7-name { font-size: 0.92rem; font-weight: 700; color: #1a1625; line-height: 1.3; }
.bv7-addr { font-size: 0.75rem; color: #6b7280; margin-top: 3px; line-height: 1.4; }

/* Wayfinding line (pickup-override "details") — inline italic note instead
   of a callout box. Reads as a sub-line under the address. */
.bv7-wayfinding {
    display: flex; align-items: center; gap: 6px;
    margin-top: 4px; padding: 0;
    background: transparent; border: none; border-radius: 0;
    font-size: 0.82rem; font-style: italic; font-weight: 500;
    color: #2563eb; line-height: 1.35;
}
.bv7-wayfinding svg { flex-shrink: 0; color: #2563eb; }

/* Phone + hours + open-closed indicator */
.bv7-contact-row {
    display: flex; align-items: center; gap: 8px;
    margin-top: 6px; flex-wrap: wrap;
}
.bv7-phone {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 0.75rem; color: #374151; text-decoration: none; font-weight: 500;
}
.bv7-phone:active { text-decoration: underline; }
.bv7-phone svg { stroke: #7c3aed; }
.bv7-vdivider { width: 1px; height: 14px; background: #d1d5db; margin: 0 4px; }
.bv7-hours {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 0.72rem; color: #374151; font-weight: 400;
}
.bv7-hours svg { stroke: #7c3aed; }
.bv7-hours-divider { width: 1px; height: 12px; background: #d1d5db; margin: 0 4px; }
.bv7-hours-status { font-size: 0.68rem; font-weight: 700; }
.bv7-hours-status.open   { color: #059669; }
.bv7-hours-status.closed { color: #dc2626; }

/* Batch detail — current/done pills next to stop label */
.batch-current-pill {
    display: inline-flex; align-items: center;
    padding: 2px 8px; border-radius: 999px;
    background: linear-gradient(135deg, #14b8a6, #0d9488);
    color: #fff; font-size: 0.62rem; font-weight: 800;
    letter-spacing: 0.05em; text-transform: uppercase;
    margin-left: 6px;
    animation: pulse-current 1.5s ease-in-out infinite;
}
@keyframes pulse-current {
    0%, 100% { box-shadow: 0 0 0 0 rgba(20,184,166,0.5); }
    50%      { box-shadow: 0 0 0 6px rgba(20,184,166,0); }
}
.batch-done-pill {
    display: inline-flex; align-items: center;
    padding: 2px 8px; border-radius: 999px;
    background: #ecfdf5; color: #059669;
    font-size: 0.62rem; font-weight: 800;
    letter-spacing: 0.05em; text-transform: uppercase;
    border: 1px solid #a7f3d0;
    margin-left: 6px;
}
.bv7-stop-done .bv7-name { opacity: 0.65; text-decoration: line-through; }
.bv7-stop-done .bv7-addr { opacity: 0.5; }

/* ============================================
   PHOTO LIGHTBOX (fullscreen viewer)
   ============================================ */
.photo-lightbox {
    position: fixed; inset: 0; z-index: 11000;
    background: rgba(0,0,0,0.92);
    display: none; align-items: center; justify-content: center;
    padding: 20px;
    cursor: zoom-out;
    animation: plb-fade 0.18s ease-out;
}
.photo-lightbox.open { display: flex; }
@keyframes plb-fade { from { opacity: 0; } to { opacity: 1; } }
.photo-lightbox img {
    max-width: 100%; max-height: 100%; object-fit: contain;
    border-radius: 8px; box-shadow: 0 16px 64px rgba(0,0,0,0.5);
}
.plb-close {
    position: absolute;
    top: calc(16px + env(safe-area-inset-top, 0px));
    right: 16px;
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(255,255,255,0.18); color: #fff;
    border: 0; display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.plb-close:active { background: rgba(255,255,255,0.3); }

/* ============================================
   DELIVERY HISTORY (inside earnings panel)
   ============================================ */
.hist-period-pills {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 6px; padding: 4px;
    background: var(--gray-100);
    border-radius: 10px;
    margin-bottom: 12px;
}
.hist-pill {
    padding: 8px 0;
    background: transparent; border: 0;
    font-size: 0.78rem; font-weight: 700;
    color: var(--gray-500);
    border-radius: 8px;
    cursor: pointer; font-family: inherit;
    transition: background 0.18s, color 0.18s;
}
.hist-pill.active {
    background: #fff; color: var(--text);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.hist-pill:active:not(.active) { background: rgba(0,0,0,0.04); }

.hist-perf-row {
    display: flex; align-items: center;
    background: #fff; border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow-sm);
    padding: 14px 0; margin-bottom: 14px;
}
.hist-perf-block { flex: 1; text-align: center; }
.hist-perf-value {
    font-size: 1.25rem; font-weight: 800; color: var(--text);
    letter-spacing: -0.01em; line-height: 1.1;
}
.hist-perf-value.perf-green { color: #059669; }
.hist-perf-value.perf-amber { color: #d97706; }
.hist-perf-value.perf-red   { color: #dc2626; }
.hist-perf-label {
    font-size: 0.62rem; font-weight: 700; color: var(--gray-400);
    text-transform: uppercase; letter-spacing: 0.04em; margin-top: 4px;
}
.hist-perf-divider { width: 1px; align-self: stretch; background: var(--border); margin: 4px 0; }

.hist-list {
    display: flex; flex-direction: column; gap: 6px;
    margin-bottom: 14px;
}
.hist-row {
    display: flex; align-items: center; gap: 10px;
    background: #fff; border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
}
.hist-photo {
    width: 44px; height: 44px; border-radius: 8px; overflow: hidden;
    flex-shrink: 0; padding: 0; border: 0; cursor: pointer;
    background: var(--gray-100);
    -webkit-tap-highlight-color: transparent;
}
.hist-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hist-photo:active { transform: scale(0.95); }
.hist-photo-empty {
    width: 44px; height: 44px; border-radius: 8px;
    background: var(--gray-50); border: 1px dashed var(--border);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.hist-row-body { flex: 1; min-width: 0; }
.hist-row-top {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 2px;
}
.hist-row-ref {
    font-family: ui-monospace, monospace; font-weight: 800;
    font-size: 0.85rem; color: var(--text);
}
.hist-row-late {
    padding: 1px 7px; border-radius: 999px;
    background: #fef2f2; color: #991b1b;
    font-size: 0.62rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.hist-row-meta {
    font-size: 0.74rem; color: var(--subtext); font-weight: 500;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hist-row-amt {
    font-size: 0.95rem; font-weight: 800; color: #15803d;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.hist-pager {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 8px 0;
}
.hist-page-btn {
    padding: 8px 14px; border-radius: var(--radius-sm);
    background: #fff; border: 1px solid var(--border);
    color: var(--text); font-weight: 700; font-size: 0.82rem;
    cursor: pointer; font-family: inherit;
    -webkit-tap-highlight-color: transparent;
}
.hist-page-btn:active:not(:disabled) { background: var(--gray-100); }
.hist-page-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.hist-page-info { font-size: 0.78rem; color: var(--subtext); font-weight: 600; }

/* Per-stop nav arrow (top-right of stop content) */
.bv7-nav {
    position: absolute; top: 18px; right: 0;
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px;
    border-radius: 10px; background: #f5f3ff; border: 1px solid #e9d5ff;
    text-decoration: none; transition: background 0.15s;
}
.bv7-nav:active { background: #ede9fe; }

/* Order item card under pickup stop */
.bv7-items { margin-top: 10px; }
.bv7-item {
    background: #fff; border: 1px solid #e5e7eb; border-radius: 8px;
    padding: 12px 14px; margin-bottom: 8px;
}
.bv7-item-field {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 3px 0;
}
.bv7-item-label {
    font-size: 0.68rem; font-weight: 600; color: #9ca3af;
    text-transform: uppercase; letter-spacing: 0.03em;
    flex-shrink: 0; min-width: 70px;
}
.bv7-item-val { font-size: 0.8rem; color: #374151; text-align: right; }
.bv7-item-vref-bold { font-size: 0.82rem; font-weight: 700; color: #1a1625; font-family: ui-monospace, monospace; }
.bv7-item-barcode { font-family: ui-monospace, monospace; font-size: 0.78rem; }
.bv7-item-bottom-row {
    display: flex; justify-content: space-between; align-items: center;
    padding-top: 8px; margin-top: 6px;
    border-top: 1px solid #f3f4f6;
}
.bv7-item-boxes {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 0.72rem; font-weight: 600; color: #6b7280;
}
.bv7-item-boxes svg { stroke: #3b82f6; }
.bv7-item-meta { font-size: 0.72rem; color: #9ca3af; font-weight: 500; }
.bv7-item-issue-reported {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 0.7rem; font-weight: 700; color: #d97706;
    background: #fffbeb; border: 1px solid #fde68a;
    padding: 2px 8px; border-radius: 6px;
}

/* Quick connect support footer */
.bv7-quick-connect {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; margin: 14px 0 4px;
    background: #f8fafc; border: 1px solid #e5e7eb;
    border-radius: 12px;
}
.bv7-qc-label { display: flex; flex-direction: column; }
.bv7-qc-name { font-size: 0.82rem; font-weight: 600; color: #1a1625; }
.bv7-qc-name-lg { font-size: 0.95rem; }
.bv7-qc-buttons { display: flex; gap: 10px; }
.bv7-qc-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px 18px; min-height: 42px;
    border-radius: 10px; background: #fff;
    border: 1px solid #e9d5ff;
    color: #7c3aed; font-weight: 600; font-size: 0.85rem;
    font-family: inherit; cursor: pointer;
    text-decoration: none; transition: background 0.15s, transform 0.1s;
}
.bv7-qc-btn:hover  { background: #faf5ff; }
.bv7-qc-btn:active { background: #f5f3ff; transform: scale(0.97); }
.bv7-qc-btn span { white-space: nowrap; }

/* Detail dock — SIBLING of .detail-body inside .detail-panel (which is
   display:flex column). The body fills available space (flex:1) and
   scrolls; the dock takes its natural height and sits at the panel's
   bottom edge. No sticky positioning, no negative margins — the panel
   itself is fixed bottom:0, so the dock's bottom edge is the iOS URL
   bar's top edge. Truly flush, no gap. */
.detail-dock {
    flex-shrink: 0;
    background: #fff;
    border-top: 1px solid #f3f4f6;
    box-shadow: 0 -8px 24px rgba(15,23,42,0.04);
}
/* Support row inside the dock — flat, edge-to-edge */
.detail-dock .bv7-quick-connect {
    margin: 0; padding: 12px 16px;
    background: transparent; border: 0; border-radius: 0;
    border-bottom: 1px solid #f3f4f6;
}
/* Slide-pill wrapper — sits as the second row inside the dock. Bottom
   padding is at least 14px (so the pill has visible breathing room above
   the URL bar) and grows to safe-area-inset-bottom on notched PWA mode. */
.courier-sticky-action {
    position: relative;
    margin: 0;
    padding: 14px 14px max(14px, env(safe-area-inset-bottom, 0px));
    background: transparent;
    border-top: 0;
    box-shadow: none;
    z-index: 1;
}
.courier-sticky-action .btn-scan-goto {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; padding: 20px 18px;
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
    color: #fff; border: 0; border-radius: 50px;
    font-size: 1.05rem; font-weight: 700;
    box-shadow: 0 4px 14px rgba(124,58,237,0.3);
}
.courier-sticky-action .btn-scan-goto:active { filter: brightness(0.92); transform: scale(0.99); }
.courier-sticky-action .btn-scan-goto svg { stroke: #fff; }

/* Slide-pill — fully rounded, green border highlight, soft glow shadow.
   Chevrons live in two side bands (10–28% and 72–90%), leaving the centre
   clear so "Slide to Accept Delivery" stays legible against the green
   gradient. */
.courier-sticky-action .swipe-track {
    border-radius: 50px !important;
    height: 68px !important;
    overflow: hidden !important;
    border: 2px solid #10b981 !important;
    box-shadow: 0 6px 18px rgba(16,185,129,0.22) !important;
}
.courier-sticky-action .swipe-track::before {
    content: '';
    position: absolute; inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='64' viewBox='0 0 24 64'><g fill='none' stroke='%23047857' stroke-opacity='0.5' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'><polyline points='8 22 14 32 8 42'/></g></svg>");
    background-repeat: repeat-x;
    background-position: 0 center;
    background-size: 24px 64px;
    animation: stickyChevrons 1.6s linear infinite;
    pointer-events: none;
    /* Two visible bands: 10–28% and 72–90%. Middle (label area) is clear. */
    mask-image: linear-gradient(to right,
        transparent 0%, transparent 8%,
        #000 14%, #000 28%,
        transparent 36%, transparent 64%,
        #000 72%, #000 86%,
        transparent 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right,
        transparent 0%, transparent 8%,
        #000 14%, #000 28%,
        transparent 36%, transparent 64%,
        #000 72%, #000 86%,
        transparent 92%, transparent 100%);
}
@keyframes stickyChevrons {
    from { background-position-x: 0; }
    to   { background-position-x: 24px; }
}
.courier-sticky-action .swipe-track.dragging::before,
.courier-sticky-action .swipe-track.confirmed::before { opacity: 0; }

.courier-sticky-action .swipe-track .swipe-label {
    font-size: 1.02rem !important;
    font-weight: 800 !important;
    color: #064e3b !important;
    letter-spacing: 0.01em;
    text-shadow: 0 0 4px rgba(255,255,255,0.55);
    z-index: 1;
}

/* Thumb — visually centred (track inner = 64px after 2px borders, thumb
   56px → top:4px). Deeper shadow than default for primary-action affordance. */
.courier-sticky-action .swipe-track .swipe-thumb {
    top: 4px !important; left: 4px !important;
    width: 56px !important; height: 56px !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.18) !important;
}
.courier-sticky-action .swipe-track.confirmed .swipe-thumb {
    transform: translateX(calc(100% - 64px)) !important;
}

/* Breathing room above the sticky CTA so the support row isn't crowded
   when scrolled to the bottom. */
.bv7-quick-connect { margin-bottom: 16px; }

/* Green is set per-render via swipeConfirm.color='green' — no overrides
   needed; the default green track is already vibrant. */

/* Share tracking button */
.share-tracking-btn {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    width: 100%; padding: 10px;
    margin: 4px 0 8px;
    background: #fff; color: var(--primary);
    border: 1.5px solid var(--primary);
    border-radius: var(--radius-sm);
    font-size: 0.82rem; font-weight: 600;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.share-tracking-btn:active { transform: scale(0.97); background: #f5f3ff; }

/* Urgency banner — coloured fill + border, but extends full-width to the
   detail panel edges (negative side margins cancel .detail-body's 20px
   horizontal padding). No rounded corners since it abuts panel edges. */
.detail-urgency-banner {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 20px;
    /* -16px top cancels .detail-body's 16px top padding so the banner sits
       flush against the gradient header with no visible gap. */
    margin: -16px -20px 14px;
    border-radius: 0;
    border-left: none; border-right: none;
    border-top: none; border-bottom: 1.5px solid;
    font-size: 0.85rem;
}
.detail-urgency-banner.urgency-red    { background: #fef2f2; border-color: #fca5a5; color: #991b1b; }
.detail-urgency-banner.urgency-orange { background: #fff7ed; border-color: #fdba74; color: #9a3412; }
.detail-urgency-banner svg { flex-shrink: 0; }
.detail-urgency-banner strong { display: block; font-size: 0.95rem; line-height: 1.2; }
.detail-urgency-banner span  { font-size: 0.75rem; opacity: 0.85; display: block; margin-top: 1px; }

/* Pipeline banner (for orders still being printed) */
.detail-pipeline-banner {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 14px; border-radius: var(--radius-sm);
    margin-bottom: 14px;
    background: #eef2ff; border: 1.5px solid #c7d2fe; color: #4338ca;
    font-size: 0.85rem;
}
.detail-pipeline-banner svg { flex-shrink: 0; margin-top: 2px; }
.detail-pipeline-banner strong { font-size: 0.92rem; line-height: 1.2; }
.detail-pipeline-banner span   { font-size: 0.75rem; color: #4f46e5; opacity: 0.85; display: block; margin-top: 2px; }

/* Order header section (ID + payout) */
.detail-order-header-v2 {
    display: flex; justify-content: space-between; align-items: flex-start;
    margin-bottom: 14px;
}
.detail-order-header-v2 .label-tiny {
    font-size: 0.62rem; font-weight: 700; color: var(--gray-400);
    text-transform: uppercase; letter-spacing: 0.05em;
}
.detail-order-header-v2 .ref-big {
    font-size: 1.5rem; font-weight: 800; color: var(--text); margin-top: 2px;
    letter-spacing: -0.02em;
    /* Same font family as cards (no monospace) but visibly larger as the
       primary identity element on the detail panel. */
}
.detail-order-header-v2 .payout-side { text-align: right; }
.detail-order-header-v2 .payout-side .amt {
    font-size: 1.05rem; font-weight: 800; color: #15803d; margin-top: 2px;
    font-variant-numeric: tabular-nums;
}

/* Detail field grid (MTCC detail layout) */
.detail-field-grid {
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 14px;
}
.detail-field-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 11px 14px; border-bottom: 1px solid var(--border-light);
    font-size: 0.85rem;
}
.detail-field-row:last-child { border-bottom: 0; }
.detail-field-row .lbl {
    font-size: 0.62rem; font-weight: 700; color: var(--gray-500);
    text-transform: uppercase; letter-spacing: 0.05em;
}
.detail-field-row .val { font-weight: 600; color: var(--text); text-align: right; }
.detail-field-row .val a { color: var(--primary); text-decoration: none; }

/* Section title used between blocks in the detail panel */
.detail-section-title {
    font-size: 0.65rem; font-weight: 800; color: var(--gray-500);
    text-transform: uppercase; letter-spacing: 0.06em;
    margin: 16px 0 8px; padding-left: 2px;
}

/* Payout breakdown card — total row in muted bg, breakdown rows below.
   Class names match openDetail's payoutCardHtml output. */
.detail-payout {
    background: #fff; border: 1px solid var(--border);
    border-radius: var(--radius-sm); overflow: hidden; margin: 0 0 14px;
}
.detail-payout .payout-total-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 14px;
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    border-bottom: 1px solid #bbf7d0;
}
.detail-payout .payout-total-label {
    font-size: 0.74rem; font-weight: 700; color: #15803d;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.detail-payout .payout-total-amount {
    font-size: 1.25rem; font-weight: 800; color: #15803d;
    font-variant-numeric: tabular-nums;
}
.detail-payout .payout-items { padding: 4px 0; }
.detail-payout .payout-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 7px 14px; font-size: 0.82rem;
}
.detail-payout .payout-row + .payout-row { border-top: 1px dashed #f3f4f6; }
.detail-payout .payout-row-label  { color: var(--subtext); }
.detail-payout .payout-row-amount { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.detail-payout .payout-row-bonus .payout-row-label,
.detail-payout .payout-row-bonus .payout-row-amount { color: #16a34a; font-weight: 700; }

/* MTCC pickup audit block (below details, above actions) */
.mtcc-audit-block {
    background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: var(--radius-sm);
    padding: 11px 14px; margin-bottom: 14px;
    font-size: 0.82rem; color: #065f46;
}
.mtcc-audit-block strong { display: block; font-weight: 700; }
.mtcc-audit-block span   { display: block; font-size: 0.72rem; opacity: 0.85; margin-top: 2px; }

/* ============================================
   RESPONSIVE / SAFE AREA
   ============================================ */
@media (max-width: 360px) {
    .login-title { font-size: 1.5rem; }
    .key-btn { padding: 14px; font-size: 1.3rem; }
    .stat-val { font-size: 1.25rem; }
}