/* ═══════════════════════════════════════════════════════════════════════════
   GOLDEN MEAT SDN. BHD. — Picking Order Management
   Palette:
     Cold chain blue  #0ea5e9 / #0284c7 / #e0f2fe
     Meat red         #dc2626 / #991b1b / #fee2e2
     Slate dark       #0f172a / #1e293b / #334155
     Ice white        #f8fafc / #f1f5f9
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Toast notification ─────────────────────────────────────────────────── */
.toast-wrap {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 9999;
    pointer-events: none;
}
.toast {
    padding: 12px 20px;
    border-radius: 10px;
    background: #1e293b;
    color: #f8fafc;
    font-size: 0.875rem;
    font-weight: 500;
    box-shadow: 0 8px 24px rgba(0,0,0,.28);
    display: flex;
    align-items: center;
    gap: 10px;
    border-left: 4px solid #22c55e;
    animation: toastIn .22s cubic-bezier(.22,1,.36,1);
    white-space: nowrap;
}
.toast.toast-error { border-left-color: #ef4444; }
@keyframes toastIn {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: translateX(0);    }
}

/* ── Dashboard ──────────────────────────────────────────────────────────── */

/* KPI row */
.db-kpi-row {
    display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px;
}
.db-kpi {
    flex: 1 1 140px;
    display: flex; align-items: center; gap: 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px 18px;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.db-kpi-icon {
    width: 44px; height: 44px; border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem; flex-shrink: 0;
}
.db-kpi-val  { font-size: 1.7rem; font-weight: 700; line-height: 1; color: var(--text-primary); }
.db-kpi-lbl  { font-size: 0.72rem; color: var(--text-muted); margin-top: 2px; text-transform: uppercase; letter-spacing: .04em; }

/* Pipeline card */
.db-pipeline-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px 20px;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.db-pipeline-bar {
    display: flex; height: 28px; border-radius: 8px; overflow: hidden; gap: 2px; margin: 10px 0 12px;
}
.db-pipe-seg {
    display: flex; align-items: center; justify-content: center;
    font-size: 0.72rem; font-weight: 600; color: #fff;
    transition: flex .4s ease; min-width: 0; overflow: hidden;
}
.db-pipe-draft      { background: #94a3b8; }
.db-pipe-ready      { background: #38bdf8; }
.db-pipe-picking    { background: #f59e0b; }
.db-pipe-packed     { background: #8b5cf6; }
.db-pipe-dispatched { background: #6366f1; }
.db-pipe-delivered  { background: #22c55e; }
.db-pipe-cancelled  { background: #f87171; }
.db-pipeline-legend {
    display: flex; flex-wrap: wrap; gap: 10px 18px;
}
.db-pipe-leg-item {
    display: flex; align-items: center; gap: 6px;
    font-size: 0.78rem; color: var(--text-secondary);
}
.db-pipe-dot {
    width: 10px; height: 10px; border-radius: 50%;
}

/* Two-column layout */
.db-two-col {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px;
}
@media (max-width: 820px) { .db-two-col { grid-template-columns: 1fr; } }

/* Card */
.db-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
    overflow: hidden;
}
.db-card-header {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 0.9rem; font-weight: 600; color: var(--text-primary);
    margin-bottom: 14px; padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}
.db-card-sub { font-size: 0.75rem; color: var(--text-muted); font-weight: 400; }

/* Picker list */
.db-picker-list { display: flex; flex-direction: column; gap: 14px; }
.db-picker-row  { display: flex; align-items: flex-start; gap: 12px; }
.db-picker-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: linear-gradient(135deg, #0ea5e9, #0284c7);
    color: #fff; font-size: 1rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.db-picker-info { flex: 1; min-width: 0; }
.db-picker-name { font-size: 0.88rem; font-weight: 600; color: var(--text-primary); margin-bottom: 5px; }
.db-stat-pills  { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.db-picker-bar-row { display: flex; align-items: center; gap: 8px; }
.db-mini-bar-wrap {
    flex: 1; height: 5px; background: var(--border);
    border-radius: 3px; overflow: hidden;
}
.db-mini-bar {
    height: 100%; background: linear-gradient(90deg, #0ea5e9, #22c55e);
    border-radius: 3px; transition: width .4s ease;
}
.db-bar-pct { font-size: 0.73rem; color: var(--text-muted); white-space: nowrap; }

/* Change request grid */
.db-cr-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 4px;
}
.db-cr-cell {
    border-radius: 10px; padding: 14px 16px; text-align: center;
}
.db-cr-val { font-size: 1.6rem; font-weight: 700; line-height: 1; }
.db-cr-lbl { font-size: 0.72rem; margin-top: 3px; text-transform: uppercase; letter-spacing: .04em; }
.db-cr-pending  { background: #fef9c3; color: #a16207; }
.db-cr-accepted { background: #dcfce7; color: #15803d; }
.db-cr-rejected { background: #fee2e2; color: #dc2626; }
.db-cr-rate     { background: #e0f2fe; color: #0284c7; }

/* Lorry table */
.db-table { width: 100%; border-collapse: collapse; font-size: 0.83rem; }
.db-table thead th {
    padding: 7px 10px; text-align: left;
    font-size: 0.69rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--text-muted); border-bottom: 1px solid var(--border);
}
.db-table tbody td { padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.db-table tbody tr:last-child td { border-bottom: none; }
.db-table tbody tr:hover { background: var(--hover); }

/* Transporter rows */
.db-transporter-row {
    padding: 12px 0; border-bottom: 1px solid var(--border);
}
.db-transporter-row:last-child { border-bottom: none; }
.db-trans-head {
    display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;
}
.db-trans-name { font-size: 0.88rem; font-weight: 600; color: var(--text-primary); }
.db-trans-code { font-size: 0.73rem; color: var(--text-muted); background: var(--border); padding: 1px 6px; border-radius: 4px; margin-left: 6px; }
.db-trans-rate { font-size: 1.1rem; font-weight: 700; color: #15803d; }
.db-trans-bar-wrap {
    display: flex; height: 10px; border-radius: 5px; overflow: hidden; gap: 2px; margin-bottom: 6px;
}
.db-trans-counts { display: flex; gap: 12px; font-size: 0.72rem; color: var(--text-muted); }

.db-empty { text-align: center; color: var(--text-muted); font-size: 0.875rem; padding: 24px 0; }

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

:root {
    /* Brand */
    --red:          #dc2626;
    --red-dk:       #991b1b;
    --red-lt:       #fee2e2;
    --blue:         #0ea5e9;
    --blue-dk:      #0284c7;
    --blue-lt:      #e0f2fe;
    --blue-xlt:     #f0f9ff;

    /* Sidebar – light (default) */
    --sb-bg:           #ffffff;
    --sb-border:       #e8edf2;
    --sb-txt:          #64748b;
    --sb-active:       #f1f5f9;
    --sb-accent:       #0ea5e9;
    /* Sidebar theme-sensitive tokens */
    --sb-brand-name:   #0f172a;
    --sb-brand-sub:    #94a3b8;
    --sb-hover-bg:     rgba(0,0,0,0.04);
    --sb-hover-color:  #334155;
    --sb-active-bg:    rgba(14,165,233,0.10);
    --sb-active-color: #0284c7;
    --sb-foot-name:    #1e293b;
    --sb-section-lbl:  #94a3b8;

    /* Page */
    --page-bg:      #f1f5f9;
    --card-bg:      #ffffff;
    --border:       #e2e8f0;
    --border-dk:    #cbd5e1;

    /* Text */
    --text:         #0f172a;
    --text-2:       #334155;
    --text-muted:   #64748b;

    /* Semantic */
    --success:      #16a34a;
    --warning:      #d97706;
    --danger:       #dc2626;

    /* Aliases used by dashboard + misc components */
    --surface:        #ffffff;
    --text-primary:   #0f172a;
    --text-secondary: #334155;
    --hover:          #f8fafc;
    /* Nav-group helpers */
    --sidebar-hover:  rgba(0,0,0,0.04);
    --border-strong:  #cbd5e1;
    --accent:         #0ea5e9;
}

/* ════════════════════════════════════════════════════════════════════════
   DARK THEME — token overrides (desaturated slate, not inverted black).
   Active when <html data-theme="dark"> — set by helpers.js setTheme() and the
   no-flash load script in App.razor.
   ════════════════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
    --red:          #f87171;
    --red-dk:       #fca5a5;
    --red-lt:       rgba(248,113,113,0.16);
    --blue:         #38bdf8;
    --blue-dk:      #7dd3fc;
    --blue-lt:      rgba(56,189,248,0.16);
    --blue-xlt:     rgba(56,189,248,0.10);

    --sb-bg:           #111a2b;
    --sb-border:       #283549;
    --sb-txt:          #8b9bb4;
    --sb-active:       #1b2638;
    --sb-accent:       #38bdf8;
    --sb-brand-name:   #e8edf5;
    --sb-brand-sub:    #8b9bb4;
    --sb-hover-bg:     rgba(255,255,255,0.05);
    --sb-hover-color:  #c2cdde;
    --sb-active-bg:    rgba(56,189,248,0.16);
    --sb-active-color: #7dd3fc;
    --sb-foot-name:    #e8edf5;
    --sb-section-lbl:  #8b9bb4;

    --page-bg:      #0b1220;
    --card-bg:      #111a2b;
    --border:       #283549;
    --border-dk:    #3a4a63;

    --text:         #e8edf5;
    --text-2:       #c2cdde;
    --text-muted:   #8b9bb4;

    --success:      #4ade80;
    --warning:      #fbbf24;
    --danger:       #f87171;

    --surface:        #111a2b;
    --text-primary:   #e8edf5;
    --text-secondary: #c2cdde;
    --hover:          #1b2638;
    --sidebar-hover:  rgba(255,255,255,0.05);
    --border-strong:  #3a4a63;
    --accent:         #38bdf8;

    color-scheme: dark;
}

body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: var(--page-bg);
    color: var(--text);
    font-size: 14px;
}

/* ══════════════════════════════════════════════════════════════════════════
   APP SHELL
   ══════════════════════════════════════════════════════════════════════════ */
.app-shell  { display: flex; height: 100vh; overflow: hidden; }
.main-area  { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
.page-content { flex: 1; overflow-y: auto; padding: 28px 32px; }

/* ══════════════════════════════════════════════════════════════════════════
   SIDEBAR
   ══════════════════════════════════════════════════════════════════════════ */
.sidebar {
    width: 230px; min-width: 230px;
    background: var(--sb-bg);
    display: flex; flex-direction: column;
    border-right: 1px solid var(--sb-border);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    transition: scrollbar-color 0.3s;
}
.sidebar:hover { scrollbar-color: var(--border) transparent; }
.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: transparent; border-radius: 99px; transition: background 0.3s; }
.sidebar:hover::-webkit-scrollbar-thumb { background: var(--border); }

/* Brand */
.nav-brand {
    display: flex; align-items: center; gap: 12px;
    padding: 22px 20px 18px;
    border-bottom: 1px solid var(--sb-border);
    text-decoration: none;
}
.brand-logo {
    width: 38px; height: 38px; border-radius: 10px;
    background: linear-gradient(135deg, var(--red) 0%, #b91c1c 100%);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(220,38,38,0.4);
}
.brand-text { display: flex; flex-direction: column; }
.brand-name {
    font-size: 0.92rem; font-weight: 800; color: var(--sb-brand-name);
    letter-spacing: -0.01em; line-height: 1.1;
}
.brand-sub {
    font-size: 0.62rem; color: var(--sb-brand-sub); text-transform: uppercase;
    letter-spacing: 0.08em; margin-top: 1px;
}

/* Nav links */
.nav-links { flex: 1; padding: 8px 0; }

.nav-section-label {
    font-size: 0.63rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.12em; color: var(--sb-section-lbl);
    padding: 10px 20px 4px;
}

/* Icon container */
.nav-icon-wrap {
    width: 28px; height: 28px; border-radius: 7px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; transition: background 0.15s;
}
.nav-item.active .nav-icon-wrap { background: rgba(14,165,233,0.22); }

.nav-icon { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.55; }
.nav-item:hover .nav-icon { opacity: 0.85; }
.nav-item.active .nav-icon { opacity: 1; color: #38bdf8; }

.nav-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px;
    margin: 1px 10px;
    border-radius: 8px;
    color: var(--sb-txt); text-decoration: none;
    font-size: 0.865rem; font-weight: 500;
    transition: background 0.15s, color 0.15s;
}
.nav-item:hover { background: var(--sb-hover-bg); color: var(--sb-hover-color); }
.nav-item.active { background: var(--sb-active-bg); color: var(--sb-active-color); }

.nav-badge {
    margin-left: auto; background: var(--red); color: #fff;
    border-radius: 999px; padding: 1px 7px;
    font-size: 0.67rem; font-weight: 700;
    box-shadow: 0 1px 4px rgba(220,38,38,0.5);
}

/* Footer — user context */
.nav-footer {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px; border-top: 1px solid var(--sb-border);
}
.nav-foot-avatar {
    width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
    background: linear-gradient(135deg, var(--blue-dk), #0369a1);
    color: #fff; font-size: 0.78rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.nav-foot-info { flex: 1; min-width: 0; }
.nav-foot-name {
    font-size: 0.78rem; font-weight: 600; color: var(--sb-foot-name);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3;
}
.nav-foot-role { font-size: 0.68rem; color: var(--sb-txt); line-height: 1.3; }
.nav-foot-online { display: flex; align-items: center; gap: 4px; margin-top: 2px; }
.nav-foot-dot {
    width: 6px; height: 6px; border-radius: 50%; background: #22c55e;
    box-shadow: 0 0 0 2px rgba(34,197,94,0.2);
}
.nav-foot-status { font-size: 0.65rem; color: #475569; }

/* ══════════════════════════════════════════════════════════════════════════
   TOPBAR
   ══════════════════════════════════════════════════════════════════════════ */
.topbar {
    height: 58px; background: var(--card-bg);
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 28px; flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.topbar-left, .topbar-right { display: flex; align-items: center; gap: 14px; }

.topbar-breadcrumb {
    font-size: 0.83rem; color: var(--text-muted); font-weight: 500;
}
.topbar-divider { width: 1px; height: 20px; background: var(--border); }

/* Cold chain status chip in topbar */
.topbar-chip {
    display: flex; align-items: center; gap: 6px;
    background: var(--blue-xlt); border: 1px solid var(--blue-lt);
    border-radius: 999px; padding: 4px 12px;
    font-size: 0.72rem; font-weight: 600; color: var(--blue-dk);
}
.topbar-chip-dot {
    width: 6px; height: 6px; border-radius: 50%; background: var(--blue);
}

/* User menu */
.user-menu-wrap { position: relative; }
.topbar-user {
    display: flex; align-items: center; gap: 10px;
    background: none; border: 1px solid var(--border); cursor: pointer;
    padding: 6px 12px 6px 6px; border-radius: 10px;
    transition: border-color 0.15s, background 0.15s;
}
.topbar-user:hover { border-color: var(--blue); background: var(--blue-xlt); }

.user-avatar {
    width: 32px; height: 32px; border-radius: 8px;
    background: linear-gradient(135deg, var(--blue-dk) 0%, #0369a1 100%);
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.78rem; letter-spacing: 0.02em;
}
.user-info { text-align: left; }
.user-name { display: block; font-size: 0.83rem; font-weight: 600; color: var(--text); line-height: 1.2; }
.user-role { display: block; font-size: 0.7rem; color: var(--text-muted); }

.user-chevron { color: var(--text-muted); transition: transform 0.2s; flex-shrink: 0; }
.user-chevron.open { transform: rotate(180deg); }

/* Dropdown */
.user-dropdown {
    position: absolute; top: calc(100% + 8px); right: 0;
    background: var(--card-bg); border: 1px solid var(--border);
    border-radius: 12px; box-shadow: 0 10px 32px rgba(15,23,42,0.14);
    min-width: 210px; z-index: 200; overflow: hidden;
    animation: dropIn 0.15s ease;
}
@keyframes dropIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }

.ud-header { display: flex; align-items: center; gap: 12px; padding: 16px 16px 12px; }
.ud-avatar {
    width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
    background: linear-gradient(135deg, var(--blue-dk) 0%, #0369a1 100%);
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.88rem;
}
.ud-name { font-weight: 700; font-size: 0.875rem; color: var(--text); }
.ud-role {
    font-size: 0.72rem; color: var(--text-muted); margin-top: 2px;
    font-weight: 500;
}
.ud-divider { height: 1px; background: var(--border); margin: 0 12px; }
.ud-item {
    display: flex; align-items: center; gap: 9px;
    width: 100%; padding: 10px 16px; border: none; background: none;
    font-size: 0.855rem; color: var(--text-2); cursor: pointer;
    transition: background 0.12s;
}
.ud-item:hover  { background: var(--page-bg); }
.ud-logout      { color: var(--danger); }
.ud-logout:hover{ background: var(--red-lt); }
.ud-backdrop    { position: fixed; inset: 0; z-index: 150; }

/* ══════════════════════════════════════════════════════════════════════════
   LOGIN PAGE
   ══════════════════════════════════════════════════════════════════════════ */
.login-shell { display: flex; min-height: 100vh; }

/* Left panel — cold storage / industrial */
.login-left {
    flex: 1;
    background: var(--sb-bg);
    background-image:
        radial-gradient(circle at 20% 20%, rgba(14,165,233,0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(220,38,38,0.06) 0%, transparent 50%),
        linear-gradient(170deg, #0f172a 0%, #1e293b 100%);
    display: flex; flex-direction: column; justify-content: center;
    padding: 60px 64px;
    position: relative; overflow: hidden;
}

/* subtle frost pattern */
.login-left::before {
    content: '';
    position: absolute; inset: 0;
    background-image: radial-gradient(circle, rgba(14,165,233,0.04) 1px, transparent 1px);
    background-size: 32px 32px;
    pointer-events: none;
}

.login-brand {
    display: flex; align-items: center; gap: 14px; margin-bottom: 56px;
    position: relative;
}
.login-brand-logo {
    width: 50px; height: 50px; border-radius: 14px;
    background: linear-gradient(135deg, var(--red) 0%, #b91c1c 100%);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 4px 16px rgba(220,38,38,0.35);
}
.login-brand-text {}
.login-brand-name {
    font-size: 1.3rem; font-weight: 800; color: #fff;
    letter-spacing: -0.02em; line-height: 1.1;
}
.login-brand-tagline {
    font-size: 0.7rem; color: #475569; text-transform: uppercase;
    letter-spacing: 0.1em; margin-top: 3px;
}

.login-hero { position: relative; margin-bottom: 52px; }
.login-hero h1 {
    font-size: 2.6rem; font-weight: 800; color: #fff;
    line-height: 1.15; margin-bottom: 18px; letter-spacing: -0.03em;
}
.login-hero h1 span { color: var(--blue); }
.login-hero p {
    font-size: 0.95rem; color: #64748b; line-height: 1.65;
    max-width: 380px;
}

/* three feature pills */
.login-features { display: flex; flex-direction: column; gap: 12px; position: relative; }
.login-feature {
    display: flex; align-items: center; gap: 14px;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px; padding: 13px 16px;
}
.lf-icon {
    width: 36px; height: 36px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; flex-shrink: 0;
}
.lf-icon.cold  { background: rgba(14,165,233,0.15); }
.lf-icon.meat  { background: rgba(220,38,38,0.15); }
.lf-icon.truck { background: rgba(100,116,139,0.2); }
.lf-label      { font-size: 0.82rem; font-weight: 600; color: #cbd5e1; }
.lf-desc       { font-size: 0.72rem; color: #475569; margin-top: 1px; }

/* Right panel — login form */
.login-right {
    width: 460px; flex-shrink: 0;
    background: var(--card-bg);
    display: flex; align-items: center; justify-content: center;
    padding: 48px 44px;
    border-left: 1px solid var(--border);
}
@media (max-width: 800px) {
    .login-left { display: none; }
    .login-right { width: 100%; border-left: none; }
}

.login-form-wrap { width: 100%; max-width: 360px; }

.login-form-header { margin-bottom: 32px; }
.login-form-header h2 {
    font-size: 1.7rem; font-weight: 800; color: var(--text);
    letter-spacing: -0.03em; margin-bottom: 6px;
}
.login-form-header p { font-size: 0.875rem; color: var(--text-muted); }

.login-error {
    background: var(--red-lt); color: var(--red-dk);
    border: 1px solid #fca5a5; border-radius: 8px;
    padding: 11px 14px; font-size: 0.845rem; margin-bottom: 20px;
    display: flex; align-items: center; gap: 8px;
}

.btn-login {
    width: 100%; height: 46px; border: none; border-radius: 10px;
    background: linear-gradient(135deg, var(--red) 0%, #b91c1c 100%);
    color: #fff; font-size: 0.935rem; font-weight: 700;
    cursor: pointer; margin-top: 8px;
    display: flex; align-items: center; justify-content: center; gap: 9px;
    transition: opacity 0.2s, transform 0.15s;
    box-shadow: 0 3px 12px rgba(220,38,38,0.35);
}
.btn-login:hover:not(:disabled) { opacity: 0.92; transform: translateY(-1px); }
.btn-login:active:not(:disabled){ transform: translateY(0); }
.btn-login:disabled { opacity: 0.55; cursor: not-allowed; box-shadow: none; }

.login-divider {
    display: flex; align-items: center; gap: 12px;
    margin: 22px 0; color: var(--text-muted); font-size: 0.75rem;
}
.login-divider::before, .login-divider::after {
    content: ''; flex: 1; height: 1px; background: var(--border);
}

.pwd-toggle {
    position: absolute; right: 11px; top: 50%; transform: translateY(-50%);
    background: none; border: none; cursor: pointer;
    font-size: 0.75rem; color: var(--blue-dk); font-weight: 600;
    padding: 2px 6px; border-radius: 4px; transition: background 0.12s;
}
.pwd-toggle:hover { background: var(--blue-lt); }

.spinner {
    width: 17px; height: 17px;
    border: 2px solid rgba(255,255,255,0.35);
    border-top-color: #fff; border-radius: 50%;
    animation: spin 0.65s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ══════════════════════════════════════════════════════════════════════════
   PICKING LIST PAGE
   ══════════════════════════════════════════════════════════════════════════ */
.pl-page { max-width: 1280px; margin: 0 auto; }

/* Toolbar */
.pl-toolbar {
    display: flex; align-items: flex-start; justify-content: space-between;
    margin-bottom: 22px; flex-wrap: wrap; gap: 14px;
}
.pl-title {
    font-size: 1.5rem; font-weight: 800; color: var(--text);
    letter-spacing: -0.02em;
}
.pl-sub { font-size: 0.8rem; color: var(--text-muted); margin-top: 3px; }

.live-indicator {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.75rem; color: var(--text-muted);
    background: var(--card-bg); border: 1px solid var(--border);
    border-radius: 20px; padding: 4px 10px; white-space: nowrap;
}
.live-dot {
    display: inline-block; width: 7px; height: 7px;
    background: #22c55e; border-radius: 50%;
    animation: pulse-green 2s ease-in-out infinite;
}
@keyframes pulse-green {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.5; transform: scale(1.4); }
}

.pl-search {
    padding: 8px 14px; border: 1px solid var(--border); border-radius: 8px;
    font-size: 0.875rem; width: 230px; background: var(--card-bg);
    color: var(--text); transition: border-color 0.15s, box-shadow 0.15s;
}
.pl-search::placeholder { color: #94a3b8; }
.pl-search:focus {
    outline: none; border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(14,165,233,0.12);
}

.pl-filter {
    appearance: none; -webkit-appearance: none;
    padding: 6px 30px 6px 14px;
    border: 1.5px solid transparent; border-radius: 20px;
    font-size: 0.82rem; font-weight: 500;
    background-color: #f1f5f9; color: var(--text);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center; background-size: 14px;
}
.pl-filter:hover {
    background-color: #e2e8f0; border-color: #cbd5e1;
}
.pl-filter:focus {
    outline: none; background-color: #eff6ff; border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(14,165,233,0.12);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230ea5e9' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* Status pills */
.pl-pills { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
.pl-pill {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 18px; border-radius: 10px;
    font-size: 0.82rem; font-weight: 600; cursor: pointer;
    border: 1.5px solid transparent;
    transition: transform 0.15s, box-shadow 0.15s;
    user-select: none;
}
.pl-pill:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.pl-pill span   { color: inherit; }
.pl-pill strong { font-size: 1.05rem; margin-left: 2px; }

.pl-pill-draft    { background: #f8fafc; color: #475569; border-color: var(--border); }
.pl-pill-ready    { background: var(--blue-xlt); color: var(--blue-dk); border-color: var(--blue-lt); }
.pl-pill-picking  { background: #fffbeb; color: #92400e; border-color: #fde68a; }
.pl-pill-packed   { background: #f5f3ff; color: #5b21b6; border-color: #ddd6fe; }
.pl-pill-dispatch { background: #f0fdf4; color: #166534; border-color: #bbf7d0; }

/* ── Filter Bar (fbar) ──────────────────────────────────────────────────── */
.fbar {
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 18px;
    display: flex; flex-direction: column; gap: 10px;
}
.fbar-row {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.fbar-search {
    width: 220px; flex: 0 0 220px;
    padding: 7px 12px;
    border: 1px solid var(--border); border-radius: 8px;
    font-size: 0.875rem; background: #fff; color: var(--text);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.fbar-search::placeholder { color: #94a3b8; }
.fbar-search:focus {
    outline: none; border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(14,165,233,0.10);
}
.fbar-select {
    appearance: none; -webkit-appearance: none;
    padding: 6px 30px 6px 14px;
    border: 1.5px solid transparent; border-radius: 20px;
    font-size: 0.82rem; font-weight: 500;
    background-color: #f1f5f9; color: var(--text);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center; background-size: 14px;
}
.fbar-select:hover {
    background-color: #e2e8f0; border-color: #cbd5e1;
}
.fbar-select:focus {
    outline: none; background-color: #eff6ff; border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(14,165,233,0.12);
    /* Opening the list focuses the control. Windows paints this image
       across the select, so drop it while open. The closed control keeps
       the single chevron from the base rule. */
    background-image: none;
    background-repeat: no-repeat;
}
.fbar-select option {
    /* Windows draws this popup on a light surface, including in dark mode. */
    background-color: #ffffff;
    color: #0f172a;
}
[data-theme="dark"] .fbar-select:hover {
    background-color: var(--hover);
    border-color: var(--border-strong);
    color: var(--text);
}
[data-theme="dark"] .fbar-select:focus {
    background-color: var(--surface);
    color: var(--text);
    border-color: var(--accent);
}
.fbar-date {
    padding: 7px 10px;
    border: 1px solid var(--border); border-radius: 8px;
    font-size: 0.875rem; background: #fff; color: var(--text);
}
.fbar-date:focus { outline: none; border-color: var(--blue); }
.fbar-date-label {
    display: flex; align-items: center; gap: 6px;
    font-size: 0.8rem; color: var(--text-muted); white-space: nowrap;
}
.fbar-clear {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 12px; border-radius: 8px;
    border: 1px solid #fca5a5; background: #fff5f5; color: #dc2626;
    font-size: 0.8rem; font-weight: 500; cursor: pointer;
    transition: background 0.15s; white-space: nowrap; margin-left: auto;
}
.fbar-clear:hover { background: #fee2e2; }
.fbar-chips {
    display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
}
.fbar-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 12px; border-radius: 999px;
    border: 1.5px solid var(--border); background: #fff;
    font-size: 0.8rem; font-weight: 500; color: var(--text-muted);
    cursor: pointer; transition: all 0.15s; white-space: nowrap;
    user-select: none; line-height: 1.5;
}
/* Inactive tints — each chip shows its status colour at rest */
.fbar-chip-draft      { background: #f1f5f9; color: #475569; border-color: #cbd5e1; }
.fbar-chip-ready      { background: #e0f2fe; color: #0284c7; border-color: #bae6fd; }
.fbar-chip-picking    { background: #fffbeb; color: #92400e; border-color: #fde68a; }
.fbar-chip-packed     { background: #ecfeff; color: #0e7490; border-color: #a5f3fc; }
.fbar-chip-dispatched { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }
.fbar-chip-delivered  { background: #f0fdf4; color: #166534; border-color: #bbf7d0; }
.fbar-chip-cancelled  { background: #fff1f2; color: #be123c; border-color: #fecdd3; }
.fbar-chip-rejected   { background: #fff1f2; color: #b91c1c; border-color: #fecaca; }
.fbar-chip-pending    { background: #fffbeb; color: #92400e; border-color: #fde68a; }
.fbar-chip-accepted   { background: #f0fdf4; color: #166534; border-color: #bbf7d0; }

/* Hover — slightly deeper tint */
.fbar-chip:hover          { filter: brightness(0.95); }
.fbar-chip-all:hover      { background: #f1f5f9; color: var(--text); border-color: #94a3b8; }

/* Active — solid filled, white text */
.fbar-chip.active { border-color: transparent; color: #fff; filter: none; }
.fbar-chip-all.active        { background: #334155; }
.fbar-chip-draft.active      { background: #94a3b8; }
.fbar-chip-ready.active      { background: #0ea5e9; }
.fbar-chip-picking.active    { background: #f59e0b; }
.fbar-chip-packed.active     { background: #06b6d4; }
.fbar-chip-dispatched.active { background: #f97316; }
.fbar-chip-delivered.active  { background: #22c55e; }
.fbar-chip-cancelled.active  { background: #f87171; }
.fbar-chip-rejected.active   { background: #ef4444; }
.fbar-chip-period.active     { background: #0ea5e9; }
.fbar-chip-pending.active    { background: #f59e0b; }
.fbar-chip-accepted.active   { background: #22c55e; }
.fbar-count {
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.10);
    min-width: 18px; padding: 0 4px;
    border-radius: 999px; font-size: 0.68rem; font-weight: 700; line-height: 1.6;
}
.fbar-chip.active .fbar-count { background: rgba(255,255,255,0.28); }

/* Fbar status counters (new lorry-grouped view) */
.fbar-stat {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 0.8rem; color: var(--text-muted); font-weight: 500;
}

/* ── Lorry-grouped picking list ───────────────────── */
.lorry-group {
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 10px;
    overflow: hidden;
    background: var(--card-bg);
}
.lorry-group-header {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 10px 14px;
    background: var(--sidebar-bg);
    cursor: pointer;
    user-select: none;
    border-bottom: 1px solid var(--border);
    gap: 8px;
}
.lorry-group-header:hover { background: #f1f5f9; }
.lorry-group-title {
    display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0;
}
.lorry-date-sep { font-size: 0.78rem; font-weight: 600; color: var(--text-muted); padding: 4px 2px; letter-spacing: 0.03em; border-bottom: 1px solid var(--border); margin-bottom: 2px; }
.lorry-group-code { font-weight: 700; font-size: 0.95rem; }
.lorry-group-trans { font-size: 0.8rem; color: var(--text-muted); }
.lorry-group-count { font-size: 0.75rem; color: var(--text-muted); background: var(--border); padding: 1px 7px; border-radius: 999px; }
.lorry-group-pickers {
    display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
}
.lorry-group-chevron { font-size: 0.7rem; color: var(--text-muted); margin-left: auto; }

/* Picker chips */
.picker-chip {
    display: inline-flex; align-items: center; gap: 4px;
    background: #dbeafe; color: #1e40af;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 0.75rem; font-weight: 600;
}
.picker-chip-remove {
    background: none; border: none; cursor: pointer;
    color: #60a5fa; padding: 0 2px; line-height: 1; font-size: 0.75rem;
}
.picker-chip-remove:hover { color: #ef4444; }
.picker-add-select {
    font-size: 0.75rem;
    border: 1px dashed #94a3b8;
    border-radius: 6px;
    padding: 2px 6px;
    background: white;
    color: var(--text-muted);
    cursor: pointer;
    outline: none;
}
.picker-add-select:hover { border-color: #3b82f6; }

/* Active lorry group highlight */
.lorry-group-active {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px #bfdbfe;
}
.lorry-group-active .lorry-group-header {
    background: #eff6ff;
    border-bottom-color: #bfdbfe;
}

/* Chevron toggle button */
.lorry-group-chevron-btn {
    background: none; border: none; cursor: pointer;
    color: var(--text-muted); font-size: 0.72rem;
    padding: 2px 4px; border-radius: 4px;
    line-height: 1; flex-shrink: 0;
}
.lorry-group-chevron-btn:hover { background: var(--border); color: var(--text); }

/* Manage tab — order selector rows */
.manage-order-row {
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.15s;
}
.manage-order-row:last-child { border-bottom: none; }
.manage-order-row:hover { background: #f8fafc; border-radius: 6px; padding-left: 6px; }

/* Order rows inside lorry group */
.lorry-order {
    display: flex; flex-direction: column; gap: 6px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.12s;
}
.lorry-order:last-child { border-bottom: none; }
.lorry-order:hover { background: #f8fafc; }
.lorry-order-active { background: #eff6ff !important; }
.lorry-order-head {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.lorry-order-name { font-weight: 600; font-size: 0.88rem; flex: 1; min-width: 0; }

/* Items mini-table inside lorry order */
.lorry-items-table {
    width: 100%;
    font-size: 0.78rem;
    border-collapse: collapse;
}
.lorry-items-table td {
    padding: 2px 6px;
    color: #475569;
}
.lorry-items-table td:first-child { color: #1e293b; padding-left: 0; }
.lorry-items-table td:last-child { text-align: right; }

/* Order cards */
.pl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 14px;
}

.pl-card {
    background: var(--card-bg); border-radius: 12px;
    border: 1.5px solid var(--border);
    padding: 17px 18px; cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
    position: relative; overflow: hidden;
}
/* subtle left accent bar */
.pl-card::before {
    content: ''; position: absolute;
    left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--border); border-radius: 12px 0 0 12px;
    transition: background 0.15s;
}
.pl-card:hover {
    border-color: var(--blue-lt);
    box-shadow: 0 4px 20px rgba(14,165,233,0.1);
    transform: translateY(-1px);
}
.pl-card:hover::before { background: var(--blue); }
.pl-card-active {
    border-color: var(--blue) !important;
    box-shadow: 0 0 0 3px rgba(14,165,233,0.15), 0 4px 20px rgba(14,165,233,0.1) !important;
}
.pl-card-active::before { background: var(--blue) !important; }

.pl-card-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 9px;
}
.pl-docno {
    font-size: 0.7rem; color: var(--text-muted); font-weight: 700;
    letter-spacing: 0.05em; font-family: 'Consolas', monospace;
}
.pl-card-name {
    font-weight: 700; font-size: 0.95rem; color: var(--text);
    margin-bottom: 9px; line-height: 1.3;
}
.pl-card-meta {
    display: flex; flex-wrap: wrap; gap: 10px;
    font-size: 0.775rem; color: var(--text-muted); margin-bottom: 8px;
}
.pl-card-lorry {
    font-size: 0.775rem; color: var(--blue-dk); font-weight: 600;
    display: flex; align-items: center; gap: 4px;
}
.pl-card-warn {
    font-size: 0.73rem; color: #92400e; background: #fffbeb;
    border: 1px solid #fde68a; padding: 3px 9px; border-radius: 5px;
    display: inline-block;
}
.pl-card-wa {
    font-size: 0.73rem; color: #065f46; font-weight: 500; margin-top: 2px;
}
.pl-card-picker {
    font-size: 0.775rem; color: #5b21b6; font-weight: 500;
    margin-top: 2px;
}

/* ══════════════════════════════════════════════════════════════════════════
   SLIDE-IN DETAIL PANEL
   ══════════════════════════════════════════════════════════════════════════ */
.panel-backdrop {
    position: fixed; inset: 0;
    background: rgba(15,23,42,0.55);
    backdrop-filter: blur(3px);
    z-index: 300;
}
.panel {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 960px; max-width: 96vw;
    height: 88vh; max-height: 88vh;
    background: var(--card-bg); z-index: 301;
    display: flex; flex-direction: column;
    border-radius: 14px;
    box-shadow: 0 24px 64px rgba(15,23,42,0.28);
    animation: panelIn 0.2s cubic-bezier(0.22,1,0.36,1);
}
@keyframes panelIn {
    from { transform: translate(-50%, -48%); opacity: 0; }
    to   { transform: translate(-50%, -50%); opacity: 1; }
}

/* Narrow variant — for detail panels that don't need the full 960px */
.panel-narrow {
    width: 520px; max-width: 96vw;
    height: 88vh;
}

/* ── Row interactions (clickable table rows) ── */
.row-clickable { cursor: pointer; transition: background 0.1s; }
.row-clickable:hover td { background: var(--blue-xlt) !important; }
.row-selected td { background: #eff6ff !important; }
.row-selected:hover td { background: #dbeafe !important; }

/* ── Lorry cards inside transporter detail panel ── */
.lorry-card {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; margin-bottom: 6px;
    border: 1px solid var(--border); border-radius: 8px;
    background: var(--page-bg);
    transition: border-color 0.12s, box-shadow 0.12s;
}
.lorry-card:hover { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(14,165,233,0.1); }
.lorry-card-body {
    flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.lorry-card-desc { font-size: 0.83rem; font-weight: 600; color: var(--text); }
.lorry-card-remark { font-size: 0.73rem; color: var(--text-muted); }
.lorry-card-right {
    display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}

/* ── Lorry inline edit/add form ── */
.lorry-edit-card {
    padding: 12px 14px; margin-bottom: 8px;
    border: 1.5px solid var(--blue); border-radius: 10px;
    background: var(--blue-xlt);
}
.lorry-edit-row {
    display: flex; gap: 8px; margin-bottom: 8px;
}
.lorry-edit-check {
    display: flex; align-items: center; gap: 8px;
    font-size: 0.8rem; color: var(--text-2); cursor: pointer;
    margin-bottom: 10px;
}

/* ── Lorry add panel (two-step: pick existing → create new) ── */
.lorry-add-panel {
    margin-top: 12px;
    border: 1.5px solid var(--border); border-radius: 10px;
    padding: 14px; background: var(--page-bg);
}
.lorry-add-section-label {
    font-size: 0.68rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.08em; color: var(--text-muted);
    margin-bottom: 10px;
}
.lorry-add-divider {
    display: flex; align-items: center; gap: 10px;
    margin: 14px 0; color: var(--text-muted); font-size: 0.75rem;
}
.lorry-add-divider::before,
.lorry-add-divider::after {
    content: ''; flex: 1; height: 1px; background: var(--border);
}
.lorry-reassign-note {
    font-size: 0.78rem; color: #92400e;
    background: #fffbeb; border: 1px solid #fcd34d;
    border-radius: 6px; padding: 6px 10px; margin-bottom: 8px;
}

.panel-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    padding: 20px 22px 18px; border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    background: linear-gradient(to bottom, var(--blue-xlt), var(--card-bg));
}

/* ── Redesigned panel header (v2) ── */
.panel-header-v2 {
    display: flex; flex-direction: column; gap: 4px;
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    background: linear-gradient(to bottom, var(--blue-xlt), var(--card-bg));
}
.phv2-row1 {
    display: flex; align-items: center; gap: 8px;
}
.phv2-meta {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    font-size: 0.78rem; color: var(--text-muted); margin-top: 2px;
}
.phv2-progress-pill {
    display: inline-flex; align-items: center;
    font-size: 0.72rem; font-weight: 700;
    padding: 1px 8px; border-radius: 999px;
}
.phv2-progress-pill.pill-done    { background: #dcfce7; color: #15803d; }
.phv2-progress-pill.pill-partial { background: #fef9c3; color: #92400e; }
.phv2-progress-pill.pill-empty   { background: #f1f5f9; color: #64748b; }
.phv2-actions {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    margin-top: 8px; padding-top: 8px;
    border-top: 1px solid var(--border);
}
.phv2-hint {
    font-size: 0.75rem; color: #b45309; margin-left: 4px;
}
.phv2-date {
    font-size: 0.78rem; font-weight: 600;
    color: var(--blue-mid, #3b82f6);
}

/* Delivery section header inside Items tab */
.panel-del-section {
    border-bottom: 1px solid var(--border);
}
.panel-del-section:last-child { border-bottom: none; }
.panel-del-section-hdr {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 16px;
    background: #f8fafc;
    border-bottom: 1px solid var(--border);
    font-size: 0.82rem;
}
.panel-del-lorrycode { font-weight: 700; color: var(--text); }
.panel-docno {
    font-size: 0.68rem; font-weight: 700; color: var(--blue-dk);
    letter-spacing: 0.08em; font-family: 'Consolas', monospace;
    background: var(--blue-lt); padding: 2px 8px; border-radius: 4px;
    display: inline-block; margin-bottom: 5px;
}
.panel-name {
    font-size: 1.15rem; font-weight: 800; color: var(--text);
    letter-spacing: -0.02em;
}
.order-view-header {
    display: grid; grid-template-columns: 1fr auto;
    align-items: start; column-gap: 12px;
}
.order-view-doc-row {
    display: flex; align-items: center; gap: 10px; min-width: 0; flex-wrap: wrap;
}
.order-view-header .panel-docno {
    font-size: 0.86rem; padding: 5px 12px; margin-bottom: 0;
}
.order-view-status { display: flex; flex-direction: row; align-items: center; gap: 8px; }
.order-view-status-detail { font-size: 0.72rem; color: #94a3b8; }
.order-view-date-line {
    grid-column: 1 / -1;
    display: flex; align-items: baseline; gap: 8px; margin-top: 8px;
}
.order-view-label {
    font-size: 0.67rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.08em; color: var(--text-muted);
}
.order-view-date {
    font-size: 1.05rem; font-weight: 400; color: var(--text);
    letter-spacing: -0.02em;
}
.order-view-actions {
    display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
    padding: 10px 22px; border-bottom: 1px solid var(--border);
}
.order-field {
    display: flex; flex-direction: column; gap: 2px;
    padding: 8px 0; min-width: 0;
}
.order-field-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px;
}
.order-field-value {
    font-size: 0.95rem; font-weight: 700; color: var(--text);
    text-align: left; word-break: break-word;
}
.order-field-address { font-weight: 600; white-space: pre-wrap; }
.order-other-info .order-other-value {
    font-size: 0.82rem; font-weight: 600; color: var(--text-muted);
    word-break: break-word;
}
@media (max-width: 520px) {
    .order-field-row { grid-template-columns: 1fr; }
}
.panel-close {
    background: none; border: none; cursor: pointer;
    width: 30px; height: 30px; border-radius: 7px;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.9rem; color: var(--text-muted);
    transition: background 0.12s, color 0.12s; flex-shrink: 0;
}
.panel-close:hover { background: var(--red-lt); color: var(--red); }

/* ── Order Info Cards (expandable, in Info tab) ── */
.order-info-card {
    border-bottom: 1px solid var(--border);
    background: #fff;
    transition: background 0.12s;
}
.order-info-card:last-child { border-bottom: none; }
.order-info-card-open { background: #fafcff; }
.order-info-card-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; padding: 10px 14px 6px;
    cursor: pointer; user-select: none;
}
.order-info-card-header:hover { background: #f1f5f9; }
.order-info-card-left {
    display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0;
}
.order-info-card-right {
    display: flex; align-items: center; gap: 6px; flex-shrink: 0;
}
.order-info-company {
    font-weight: 600; font-size: 0.88rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.order-info-items {
    padding: 0 14px 8px 14px;
    display: flex; flex-direction: column; gap: 3px;
}
.order-info-item-row {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 0.78rem; color: #475569;
}
.order-info-item-desc { flex: 1; }
.order-info-item-qty {
    font-size: 0.75rem; font-weight: 600; color: #94a3b8;
    margin-left: 8px;
}
.order-info-item-qty.qty-done  { color: #16a34a; }
.order-info-item-qty.qty-partial { color: #d97706; }
.order-info-details {
    padding: 8px 14px 12px;
    border-top: 1px dashed var(--border);
    display: flex; flex-direction: column; gap: 4px;
}
.reschedule-line-row { display:flex; align-items:center; gap:8px; padding:5px 0; border-bottom:1px solid var(--border); font-size:0.85rem; cursor:pointer; }
.extra-actions-wrap { display:flex; flex-direction:column; gap:8px; }
.extra-actions-row  { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

/* ── Reschedule modal ─────────────────────────────────────────────────────── */
.resched-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 1100;
}
.resched-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1101;
    width: min(520px, 96vw);
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(0,0,0,.55);
    overflow: hidden;
}
.resched-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 14px;
    border-bottom: 1px solid #334155;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text);
    flex-shrink: 0;
}
/* Settings — no dark strip, just padding on modal bg */
.resched-settings {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px 20px 12px;
    flex-shrink: 0;
}
.resched-field { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 130px; }
.resched-field-label { font-size: 0.72rem; color: #94a3b8; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
/* "Items to reschedule" divider label */
.resched-section-label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 20px 10px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: .05em;
    flex-shrink: 0;
}
.resched-section-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #334155;
}
/* Scrollable item list */
.resched-body {
    flex: 1;
    overflow-y: auto;
    padding-bottom: 8px;
}
.resched-group { margin-bottom: 2px; }
/* Group header — no background, title left, "All" checkbox right */
.resched-group-hdr {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px 6px;
}
.resched-group-title { font-weight: 700; font-size: 0.84rem; color: var(--text); }
.resched-group-sub   { font-size: 0.75rem; color: #64748b; }
.resched-all-lbl {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    color: #64748b;
    cursor: pointer;
    user-select: none;
}
.resched-lines { }
/* Item rows — accent left border when checked */
.resched-line {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 20px 9px 20px;
    border-left: 3px solid transparent;
    border-bottom: 1px solid rgba(255,255,255,.04);
    cursor: pointer;
    transition: border-color .12s, background .12s;
}
.resched-line:hover { background: rgba(255,255,255,.03); }
.resched-line-on {
    border-left-color: #0ea5e9;
    background: rgba(14,165,233,.06);
}
.resched-line-name  { flex: 1; font-size: 0.84rem; color: #64748b; min-width: 0; transition: color .12s; }
.resched-line-on .resched-line-name { color: #f1f5f9; }
.resched-line-alloc { font-size: 0.78rem; color: #475569; white-space: nowrap; flex-shrink: 0; }
.resched-line-on .resched-line-alloc { color: #94a3b8; }
/* Qty row (non-picked lines) */
.resched-line-qty   { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
.resched-qty-input  { width: 64px; font-size: 0.82rem; padding: 3px 6px; background: #0f172a; border: 1px solid #334155; color: #e2e8f0; border-radius: 6px; text-align: center; }
.resched-qty-of     { font-size: 0.78rem; color: #475569; }
/* Header row for picked lines */
.resched-line-header { cursor: pointer; }
/* Partial selection (some but not all pieces checked) */
.resched-line-partial {
    border-left-color: #64748b;
    background: rgba(100,116,139,.06);
}
.resched-line-partial .resched-line-name { color: #94a3b8; }
/* "N/M" selected count shown in the header alloc cell */
.resched-sel-count {
    font-weight: 700;
    color: #38bdf8;
    margin-right: 4px;
}
/* Individual picked-unit rows */
.resched-unit-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 20px 6px 36px;   /* deeper indent than line rows */
    border-left: 3px solid transparent;
    border-bottom: 1px solid rgba(255,255,255,.03);
    cursor: pointer;
    transition: border-color .12s, background .12s;
}
.resched-unit-row:hover  { background: rgba(255,255,255,.03); }
.resched-unit-on {
    border-left-color: #0ea5e9;
    background: rgba(14,165,233,.08);
}
.resched-unit-label  { flex: 1; font-size: 0.8rem; color: #64748b; transition: color .12s; }
.resched-unit-on .resched-unit-label { color: #e2e8f0; }
.resched-unit-weight {
    font-size: 0.82rem;
    font-weight: 700;
    color: #475569;
    transition: color .12s;
}
.resched-unit-on .resched-unit-weight { color: #38bdf8; }
.resched-modal-error {
    padding: 6px 20px 10px;
    color: #f87171;
    font-size: 0.82rem;
    flex-shrink: 0;
}
.resched-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid #334155;
    flex-shrink: 0;
    background: #1e293b;
}

.panel-body { flex: 1; overflow-y: auto; }
.panel-section {
    padding: 18px 22px;
    border-bottom: 1px solid var(--border);
}
.panel-section:last-child { border-bottom: none; }
.panel-section-title {
    font-size: 0.67rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.1em; color: var(--text-muted);
    margin-bottom: 13px; display: flex; align-items: center; gap: 8px;
}
.panel-section-title::after {
    content: ''; flex: 1; height: 1px; background: var(--border);
}

.info-row {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 16px; padding: 6px 0; font-size: 0.86rem;
    border-bottom: 1px solid #f8fafc;
}
.info-row:last-child { border-bottom: none; }
.info-row span  { color: var(--text-muted); flex-shrink: 0; }
.info-row strong{ text-align: right; word-break: break-word; color: var(--text); }

.panel-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.panel-table th {
    padding: 7px 10px; text-align: left;
    font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.07em; color: var(--text-muted);
    background: var(--page-bg);
    border-bottom: 1px solid var(--border);
}
.panel-table td {
    padding: 9px 10px; border-bottom: 1px solid #f1f5f9;
    color: var(--text-2);
}
.panel-table tr:last-child td { border-bottom: none; }
.panel-table tr:hover td { background: var(--blue-xlt); }

.panel-msg {
    margin-top: 12px; padding: 10px 14px;
    border-radius: 8px; font-size: 0.845rem; font-weight: 500;
    background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0;
}

/* ══════════════════════════════════════════════════════════════════════════
   BADGES
   ══════════════════════════════════════════════════════════════════════════ */
.badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 9px; border-radius: 5px;
    font-size: 0.7rem; font-weight: 700; white-space: nowrap;
    letter-spacing: 0.02em;
}
.badge-draft      { background: #f1f5f9; color: #64748b; }
.badge-ready      { background: #fef9c3; color: #a16207; }
.badge-picking    { background: #fffbeb; color: #92400e; }
.badge-packed     { background: #f5f3ff; color: #5b21b6; }
.badge-dispatched { background: #f0fdf4; color: #166534; }
.badge-delivered  { background: #f0fdf4; color: #166534; }
.badge-cancelled  { background: var(--red-lt); color: var(--red-dk); }
.badge-rejected   { background: #fff7ed; color: #c2410c; }
.badge-merged     { background: #faf5ff; color: #7e22ce; }

/* ══════════════════════════════════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════════════════════════════════ */
.btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border: none; border-radius: 8px;
    cursor: pointer; font-size: 0.845rem; font-weight: 600;
    text-decoration: none; transition: opacity 0.15s, transform 0.12s;
    white-space: nowrap;
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn:hover:not(:disabled) { opacity: 0.88; transform: translateY(-1px); }
.btn:active:not(:disabled){ transform: translateY(0); }

.btn-primary   { background: var(--blue);    color: #fff; box-shadow: 0 2px 8px rgba(14,165,233,0.3); }
.btn-success   { background: var(--success); color: #fff; box-shadow: 0 2px 8px rgba(22,163,74,0.3); }
.btn-danger    { background: var(--danger);  color: #fff; box-shadow: 0 2px 8px rgba(220,38,38,0.3); }
.btn-warning   { background: var(--warning); color: #fff; box-shadow: 0 2px 8px rgba(245,158,11,0.3); }
.btn-secondary {
    background: var(--card-bg); color: var(--text-2);
    border: 1px solid var(--border-dk); box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.btn-sm { padding: 5px 11px; font-size: 0.775rem; }

/* Dark mode lightens the accent tokens, so solid buttons switch to dark ink for AA contrast. */
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .btn-success,
[data-theme="dark"] .btn-warning,
[data-theme="dark"] .btn-danger { color: #0b1220; }

/* ══════════════════════════════════════════════════════════════════════════
   FORMS
   ══════════════════════════════════════════════════════════════════════════ */
.form-group { margin-bottom: 17px; }
.form-label {
    display: block; font-size: 0.82rem; font-weight: 600;
    margin-bottom: 6px; color: var(--text-2);
}
.form-control {
    width: 100%; padding: 9px 13px;
    border: 1.5px solid var(--border); border-radius: 8px;
    font-size: 0.875rem; background: var(--card-bg); color: var(--text);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.form-control:focus {
    outline: none; border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(14,165,233,0.12);
}
.gm-date { position: relative; }
.gm-date-text {
    position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
    pointer-events: none; font-size: 0.875rem; color: var(--text); z-index: 1;
}
.gm-date input[type="date"] { color: transparent; }
.gm-date input[type="date"]::-webkit-datetime-edit,
.gm-date input[type="date"]::-webkit-datetime-edit-fields-wrapper,
.gm-date input[type="date"]::-webkit-datetime-edit-text,
.gm-date input[type="date"]::-webkit-datetime-edit-month-field,
.gm-date input[type="date"]::-webkit-datetime-edit-day-field,
.gm-date input[type="date"]::-webkit-datetime-edit-year-field {
    color: transparent;
}
.gm-date-filter .plt-status-sel { min-width: 138px; padding-right: 28px; }
.gm-date-filter .gm-date-text { left: 10px; }
.gm-date-text-empty { color: var(--text-muted); }
/* ── Modal / panel form selects ── */
select.form-control {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 15px;
    padding-right: 36px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
select.form-control:hover {
    border-color: #94a3b8;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
select.form-control:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(14,165,233,0.12);
    /* Windows copies this image into the native popup and tiles it.
       Drop it while focused so the open list stays a plain option list. */
    background-image: none;
}
select.form-control option {
    /* Windows draws this popup on a light surface, including in dark mode. */
    background-color: #ffffff;
    color: #0f172a;
}

/* ══════════════════════════════════════════════════════════════════════════
   TABLES (CRUD pages)
   ══════════════════════════════════════════════════════════════════════════ */
.table-wrap {
    background: var(--card-bg); border-radius: 12px;
    border: 1px solid var(--border);
    overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
table { width: 100%; border-collapse: collapse; }
th, td { padding: 11px 16px; text-align: left; }
th {
    background: var(--page-bg); font-size: 0.7rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted);
    border-bottom: 2px solid var(--border);
}
td { font-size: 0.875rem; border-bottom: 1px solid var(--border); color: var(--text-2); }
tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--blue-xlt); }

/* ══════════════════════════════════════════════════════════════════════════
   MODALS
   ══════════════════════════════════════════════════════════════════════════ */
.modal-backdrop {
    position: fixed; inset: 0; background: rgba(15,23,42,0.5);
    backdrop-filter: blur(3px);
    z-index: 400; display: flex; align-items: center; justify-content: center;
}
.modal {
    background: var(--card-bg); border-radius: 14px;
    padding: 28px 32px; width: 500px; max-width: 95vw;
    max-height: 90vh; overflow-y: auto;
    box-shadow: 0 24px 64px rgba(15,23,42,0.25);
    animation: modalIn 0.18s ease;
}
@keyframes modalIn { from { opacity:0; transform: scale(0.96); } to { opacity:1; transform: none; } }
.modal-title {
    font-size: 1.1rem; font-weight: 800; color: var(--text);
    margin-bottom: 22px; letter-spacing: -0.02em;
}
.modal-footer {
    display: flex; gap: 8px; justify-content: flex-end;
    margin-top: 26px; padding-top: 18px;
    border-top: 1px solid var(--border);
}

/* ══════════════════════════════════════════════════════════════════════════
   PAGE HEADER (CRUD pages)
   ══════════════════════════════════════════════════════════════════════════ */
.page-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 24px; flex-wrap: wrap; gap: 12px;
}
.page-title {
    font-size: 1.45rem; font-weight: 800; color: var(--text);
    letter-spacing: -0.02em;
}

/* ══════════════════════════════════════════════════════════════════════════
   MISC / UTILITIES
   ══════════════════════════════════════════════════════════════════════════ */
.text-muted  { color: var(--text-muted); font-size: 0.845rem; }
.empty-state {
    text-align: center; padding: 72px 24px;
    color: var(--text-muted); font-size: 0.925rem;
}
.empty-state::before {
    content: '🔍'; display: block; font-size: 2.5rem; margin-bottom: 12px; opacity: 0.5;
}

/* ══════════════════════════════════════════════════════════════════════════
   CRUD PAGES (Transporters, Lorries, Users)
   ══════════════════════════════════════════════════════════════════════════ */

.crud-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    margin-bottom: 18px; flex-wrap: wrap; gap: 12px;
}
.crud-header .page-title { margin-bottom: 3px; }
.page-sub { font-size: 0.8rem; color: var(--text-muted); }

.crud-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.crud-toolbar {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 14px; flex-wrap: wrap;
}
.record-count { font-size: 0.8rem; color: var(--text-muted); white-space: nowrap; }

/* Table container card */
.table-container {
    background: var(--card-bg); border-radius: 12px;
    border: 1px solid var(--border);
    overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.table-container table { margin: 0; }
.table-container th:first-child, .table-container td:first-child { padding-left: 20px; }
.table-container th:last-child,  .table-container td:last-child  { padding-right: 20px; }

/* Row actions */
.row-actions { display: flex; gap: 6px; justify-content: flex-end; }
.btn-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border: none; border-radius: 7px;
    cursor: pointer; font-size: 0.78rem; font-weight: 600;
    transition: background 0.12s;
}
.btn-icon-edit   { background: var(--blue-lt);  color: var(--blue-dk); }
.btn-icon-edit:hover  { background: #bae6fd; }

/* Inline cell styles */
.cell-code {
    font-family: 'Consolas', monospace; font-size: 0.82rem; font-weight: 700;
    color: var(--text); letter-spacing: 0.03em;
}
.cell-sub { font-size: 0.78rem; color: var(--text-muted); margin-top: 1px; }

/* Role pills */
.role-manager    { background: #d1fae5; color: #065f46; }
.role-supervisor { background: var(--blue-lt); color: var(--blue-dk); }
.role-picker     { background: #fffbeb; color: #92400e; }

/* ── Import modal ───────────────────────────────────────────────────────── */
.import-modal { width: 640px; }
.import-modal .modal-title { margin-bottom: 6px; }
.import-steps { display: flex; gap: 6px; margin-bottom: 20px; }
.import-step {
    flex: 1; padding: 8px 10px; border-radius: 8px; text-align: center;
    font-size: 0.75rem; font-weight: 600; background: var(--page-bg);
    color: var(--text-muted); border: 1px solid var(--border);
}
.import-step.active { background: var(--blue-lt); color: var(--blue-dk); border-color: var(--blue); }
.import-step.done   { background: #d1fae5; color: #065f46; border-color: #86efac; }

.import-zone {
    border: 2px dashed var(--border-dk); border-radius: 10px;
    padding: 32px 20px; text-align: center; cursor: pointer;
    transition: border-color 0.15s, background 0.15s; margin-bottom: 16px;
    background: var(--page-bg);
}
.import-zone:hover { border-color: var(--blue); background: var(--blue-xlt); }
.import-zone-icon  { font-size: 2rem; margin-bottom: 8px; }
.import-zone-text  { font-size: 0.88rem; color: var(--text-muted); }
.import-zone-hint  { font-size: 0.75rem; color: var(--text-muted); margin-top: 4px; }

.import-preview-wrap {
    max-height: 220px; overflow-y: auto; border: 1px solid var(--border);
    border-radius: 8px; margin-bottom: 14px;
}
.import-preview-wrap table { font-size: 0.8rem; }
.import-preview-wrap th { position: sticky; top: 0; z-index: 1; font-size: 0.7rem; }

.import-result {
    display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px;
}
.result-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 12px; border-radius: 999px; font-size: 0.8rem; font-weight: 700;
}
.result-chip-ok  { background: #d1fae5; color: #065f46; }
.result-chip-err { background: var(--red-lt); color: var(--red-dk); }
.result-chip-skip{ background: #f1f5f9; color: var(--text-muted); }

.import-error-list {
    max-height: 120px; overflow-y: auto; background: var(--red-lt);
    border: 1px solid #fca5a5; border-radius: 8px; padding: 10px 14px;
    font-size: 0.78rem; color: var(--red-dk);
}
.import-error-list li { margin-bottom: 3px; }

/* ── Blazor error ───────────────────────────────────────────────────────── */
#blazor-error-ui {
    background: #7f1d1d; color: #fff;
    padding: 12px 24px; position: fixed; bottom: 0; left: 0; right: 0;
    display: none; z-index: 9999; font-size: 0.875rem;
    border-top: 2px solid #991b1b;
}
#blazor-error-ui .reload  { color: #fca5a5; margin-left: 10px; font-weight: 600; }
#blazor-error-ui .dismiss { float: right; cursor: pointer; opacity: 0.7; }
#blazor-error-ui .dismiss:hover { opacity: 1; }

/* ══════════════════════════════════════════════════════════════════════════
   SHARED MODAL  (used by Orders, PickingList, etc.)
   ══════════════════════════════════════════════════════════════════════════ */
.ord-modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 1050;
    animation: fadeIn 0.15s ease;
}
.ord-modal {
    position: fixed; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1051;
    background: var(--card-bg);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    width: min(760px, 95vw);
    max-height: 88vh;
    display: flex; flex-direction: column;
    animation: slideUp 0.18s ease;
}
.ord-modal-sm   { width: min(440px, 95vw); }
.ord-modal-wide { width: min(1160px, 96vw); height: 88vh; max-height: 88vh; }
.ord-modal-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 20px; border-bottom: 1px solid var(--border);
    font-weight: 600; font-size: 1rem; flex-shrink: 0;
}
.ord-modal-body  { overflow-y: auto; padding: 8px 20px 16px; flex: 1; }
.ord-modal-wide .ord-modal-body {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex: 1;
    min-height: 0;
}
.ord-modal-footer{
    display: flex; justify-content: flex-end; gap: 10px;
    padding: 14px 20px; border-top: 1px solid var(--border); flex-shrink: 0;
}

/* ── Split layout: left sidebar (fields) + right panel (items table) ── */
.ord-modal-split {
    display: grid;
    grid-template-columns: 300px 1fr;
    flex: 1;          /* fill the flex body */
    min-height: 0;
    overflow: hidden;
}
.ord-modal-left {
    overflow-y: auto;
    padding: 14px 18px 24px;
    border-right: 1px solid var(--border);
}
.ord-modal-right {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    padding: 14px 18px 24px;
}
.ord-modal-right > .panel-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.ord-items-scroll {
    flex: 1;
    overflow-x: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 220px;
    border: 1px solid var(--border);
    border-radius: 8px;
}
/* Compact column widths inside the items table */
.ord-qty   { width: 72px  !important; min-width: 72px  !important; }
.ord-uom   { width: 72px  !important; min-width: 72px  !important; }
.ord-price { width: 104px !important; min-width: 104px !important; }

/* ── Items & Transporters group (Info tab, Draft orders) ── */
.transport-group {
    margin-bottom: 10px;
}
.transport-group:last-child { margin-bottom: 0; }
.transport-group-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--blue-dk);
    padding: 4px 0 4px 2px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 2px;
}
.transport-item-row {
    padding-left: 10px !important;
    font-size: 0.83rem;
}

/* ── Settings page ── */
.settings-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px 24px;
    margin-bottom: 20px;
    max-width: 800px;
}
.settings-card-header {
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}
.settings-card-icon { font-size: 1.6rem; }
.settings-card-title { font-weight: 700; font-size: 1rem; color: var(--text); }
.settings-card-sub   { font-size: 0.8rem; color: var(--text-muted); margin-top: 2px; }
.settings-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
}
.settings-row:last-of-type { border-bottom: none; }
.settings-row-label .form-label { font-size: 0.88rem; font-weight: 600; }
.settings-row-hint  { font-size: 0.78rem; color: var(--text-muted); margin-top: 4px; line-height: 1.5; }
.settings-row-hint code { background: var(--page-bg); padding: 1px 5px; border-radius: 4px; font-size: 0.78rem; }
.settings-preview { font-size: 0.8rem; color: var(--text-muted); white-space: nowrap; }
.panel-msg-error {
    background: #fef2f2 !important; color: #b91c1c !important; border-color: #fecaca !important;
    display: flex; align-items: flex-start; gap: 8px;
}

/* New / Edit Order modals — form polish */
.ord-modal-wide .form-control:focus {
    outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.18);
}
.ord-modal-wide .form-control.is-invalid {
    border-color: #fecaca; background: #fffafa; box-shadow: 0 0 0 2px rgba(220,38,38,.12);
}
.settings-row-label { min-width: 0; }
.settings-row-ctrl  { min-width: 0; }
@media (max-width: 600px) {
    .settings-row { grid-template-columns: 1fr; }
    .settings-card { padding: 14px 16px; }
}

/* ── DB Settings ──────────────────────────────────────────────────────────── */
.db-localhost-badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 0.72rem; font-weight: 600;
    background: #fef3c7; color: #92400e;
    border: 1px solid #fcd34d;
    border-radius: 20px; padding: 2px 9px;
    margin-left: 8px; vertical-align: middle;
}
.db-mode-toggle {
    display: inline-flex;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--page-bg);
    flex-shrink: 0;
}
.db-mode-toggle button {
    padding: 6px 16px;
    font-size: 0.8rem;
    font-weight: 600;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.db-mode-toggle button:hover:not(.active) {
    background: var(--hover);
    color: var(--text);
}
.db-mode-toggle button.active {
    background: var(--blue);
    color: #fff;
}
.db-cs-preview {
    display: block;
    background: var(--page-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 0.78rem;
    word-break: break-all;
    color: var(--text-muted);
    line-height: 1.6;
    width: 100%;
}
.db-cs-textarea {
    width: 100%;
    min-height: 90px;
    font-size: 0.82rem;
    font-family: monospace;
    resize: vertical;
}
.db-restart-confirm {
    margin-top: 14px;
    padding: 14px 16px;
    background: #fff7ed;
    border: 1px solid #fdba74;
    border-radius: 10px;
    font-size: 0.85rem;
    color: #7c2d12;
    line-height: 1.6;
}
.db-history-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--page-bg);
    border: 1px solid var(--border);
    border-radius: 9px;
    margin-bottom: 8px;
}
.db-history-info  { flex: 1; min-width: 0; }
.db-history-cs    { font-size: 0.77rem; word-break: break-all; color: var(--text); }
.db-history-meta  { font-size: 0.73rem; color: var(--text-muted); margin-top: 4px; display: block; }

/* ── Order Inbox ─────────────────────────────────────────────────────────── */
.inbox-list       { display: flex; flex-direction: column; gap: 16px; max-width: 860px; }
.inbox-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px 22px;
    animation: fadeIn 0.18s ease;
}
.inbox-card-header  { margin-bottom: 14px; }
.inbox-card-company { font-size: 1.05rem; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.inbox-card-meta    { display: flex; flex-wrap: wrap; gap: 6px; }
.inbox-meta-chip {
    font-size: 0.76rem; color: var(--text-muted);
    background: var(--page-bg); border: 1px solid var(--border);
    border-radius: 20px; padding: 2px 10px;
}
.inbox-meta-transporter { color: #0369a1; background: #e0f2fe; border-color: #bae6fd; }

.inbox-card-items   { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.inbox-item-row     { display: flex; align-items: baseline; gap: 6px; font-size: 0.87rem; }
.inbox-item-dot     { color: var(--text-muted); flex-shrink: 0; }
.inbox-item-desc    { flex: 1; color: var(--text); }
.inbox-item-further { color: var(--text-muted); font-size: 0.82rem; }
.inbox-item-qty     { font-weight: 600; color: var(--text-2); white-space: nowrap; }

.inbox-existing-section {
    background: #fefce8;
    border: 1px solid #fde68a;
    border-radius: 9px;
    padding: 12px 14px;
    margin-bottom: 14px;
}
.inbox-existing-label { font-size: 0.82rem; color: #92400e; margin-bottom: 8px; }
.inbox-existing-row {
    display: flex; align-items: center; gap: 10px;
    font-size: 0.82rem; padding: 4px 0;
    border-bottom: 1px solid #fde68a;
}
.inbox-existing-row:last-child { border-bottom: none; }
.inbox-existing-docno { font-weight: 600; color: var(--text); }
.inbox-existing-date  { color: var(--text-muted); }
.inbox-existing-items { color: var(--text-muted); margin-left: auto; }

.inbox-status-badge   { font-size: 0.72rem; font-weight: 600; border-radius: 20px; padding: 2px 8px; }
.inbox-status-draft      { background: #e0f2fe; color: #0369a1; }
.inbox-status-ready      { background: #dcfce7; color: #15803d; }
.inbox-status-picking    { background: #fef9c3; color: #a16207; }
.inbox-status-packed     { background: #f3e8ff; color: #7e22ce; }
.inbox-status-dispatched { background: #e0e7ff; color: #4338ca; }

.inbox-merge-panel {
    background: var(--page-bg);
    border: 1px solid var(--border);
    border-radius: 9px;
    padding: 14px 16px;
    margin-bottom: 14px;
    animation: fadeIn 0.15s ease;
}
.inbox-card-actions {
    display: flex; gap: 8px; flex-wrap: wrap;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    margin-top: 6px;
}
.inbox-toast {
    position: fixed; bottom: 28px; right: 28px; z-index: 9999;
    padding: 12px 20px; border-radius: 10px;
    font-size: 0.875rem; font-weight: 600;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    animation: slideUp 0.25s ease;
    pointer-events: none;
}
.inbox-toast-ok  { background: #16a34a; color: #fff; }
.inbox-toast-err { background: #dc2626; color: #fff; }

@keyframes fadeIn  { from { opacity:0 } to { opacity:1 } }
@keyframes slideUp { from { opacity:0; transform:translate(-50%,-46%) } to { opacity:1; transform:translate(-50%,-50%) } }

/* ══════════════════════════════════════════════════════════════════════════
   PANEL TABS  (Picking List detail panel)
   ══════════════════════════════════════════════════════════════════════════ */
.panel-tabs {
    display: flex; flex-shrink: 0;
    border-bottom: 2px solid var(--border);
    background: var(--page-bg);
}
.panel-tab {
    flex: 1; padding: 11px 14px; border: none; cursor: pointer;
    font-size: 0.835rem; font-weight: 600; color: var(--text-muted);
    background: none; border-bottom: 2px solid transparent; margin-bottom: -2px;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
    display: flex; align-items: center; justify-content: center; gap: 6px;
}
.panel-tab.active  { color: var(--blue-dk); border-bottom-color: var(--blue); background: var(--card-bg); }
.panel-tab:hover:not(.active) { color: var(--text-2); background: rgba(14,165,233,0.05); }
.panel-tab-badge {
    background: #22c55e; color: #fff;
    border-radius: 999px; padding: 1px 6px; font-size: 0.65rem; font-weight: 700;
}

/* ══════════════════════════════════════════════════════════════════════════
   PER-ITEM PICKING UI
   ══════════════════════════════════════════════════════════════════════════ */
.pick-progress-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 8px;
}
.pick-progress-label { font-size: 0.8rem; color: var(--text-muted); font-weight: 500; }
.pick-progress-bar {
    height: 7px; background: var(--border); border-radius: 99px; overflow: hidden;
}
.pick-progress-fill {
    height: 100%;
    background: linear-gradient(to right, var(--blue), #22c55e);
    border-radius: 99px; transition: width 0.4s ease;
}

.pick-item {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 12px; padding: 11px 0;
    border-bottom: 1px solid var(--border);
}
.pick-item:last-child { border-bottom: none; }
.pick-item-done {
    background: #f0fdf4; border-radius: 9px;
    padding: 10px 10px; margin: 2px -10px;
    border-bottom: none !important;
}
.pick-item-done + .pick-item-done { margin-top: 4px; }

.pick-item-info { flex: 1; min-width: 0; }
.pick-item-name {
    font-weight: 600; font-size: 0.875rem; color: var(--text);
    margin-bottom: 2px; display: flex; align-items: center; gap: 5px;
}
.pick-item-done .pick-item-name { color: var(--text-muted); }
.pick-item-sub  { font-size: 0.76rem; color: var(--text-muted); margin-bottom: 3px; }
.pick-item-ordered { font-size: 0.76rem; color: var(--text-muted); }

.pick-item-ctrl {
    display: flex; align-items: center; gap: 6px; flex-shrink: 0;
}
.pick-qty-input {
    width: 68px; padding: 5px 8px !important;
    font-size: 0.875rem !important; text-align: center;
}
.pick-item-uom  { font-size: 0.75rem; color: var(--text-muted); white-space: nowrap; }
.pick-done-qty  {
    font-size: 0.8rem; color: #166534; font-weight: 600; white-space: nowrap;
    display: flex; align-items: center; gap: 4px;
}
.pick-qty-mismatch {
    color: #dc2626 !important;
}
.pick-pack-hint {
    margin-top: 8px;
    font-size: 0.78rem;
    color: #d97706;
    display: flex; align-items: center; gap: 5px;
}

/* ══════════════════════════════════════════════════════════════════════════
   ITEM CARDS  (new picking-detail design)
   ══════════════════════════════════════════════════════════════════════════ */
.pitem-list {
    display: flex; flex-direction: column; gap: 8px;
    padding: 8px 14px 4px;
}
.pitem {
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    padding: 11px 13px 10px;
    transition: border-color 0.15s, background 0.15s;
}
.pitem-progress { border-color: #bae6fd; background: #f0f9ff; }
.pitem-done     { border-color: #bbf7d0; background: #f0fdf4; }

/* header row */
.pitem-head {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 8px; margin-bottom: 2px;
}
.pitem-title {
    display: flex; align-items: center; gap: 6px;
    font-weight: 600; font-size: 0.9rem; color: #0f172a;
    flex: 1; min-width: 0;
}
.pitem-check {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border-radius: 50%;
    background: #16a34a; color: #fff;
    font-size: 0.65rem; font-weight: 900;
    flex-shrink: 0;
}
.pitem-badge {
    font-size: 0.72rem; font-weight: 700; white-space: nowrap;
    padding: 3px 8px; border-radius: 20px; flex-shrink: 0;
}
.pitem-badge-done     { background: #dcfce7; color: #15803d; }
.pitem-badge-progress { background: #e0f2fe; color: #0369a1; }
.pitem-badge-empty    { background: #f1f5f9; color: #94a3b8; }

.pitem-sub {
    font-size: 0.78rem; color: #64748b; margin-bottom: 2px;
}
.pitem-ordered {
    font-size: 0.78rem; color: #94a3b8; margin-bottom: 6px;
}

/* done bar */
.pitem-done-bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px;
    background: #dcfce7; border-radius: 6px;
    padding: 6px 10px;
    font-size: 0.82rem; font-weight: 600; color: #166534;
    margin-top: 4px;
}
.pitem-done-bar-toggle {
    cursor: pointer; user-select: none;
    transition: background 0.15s;
}
.pitem-done-bar-toggle:hover { background: #bbf7d0; }
.pitem-toggle-chevron {
    font-size: 0.68rem; color: #166534; opacity: 0.75;
}
.pitem-weights-panel {
    display: flex; flex-wrap: wrap; gap: 5px;
    margin-top: 6px; padding: 8px 10px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0; border-radius: 6px;
}
.pitem-undo-btn {
    background: none; border: 1px solid #86efac; border-radius: 5px;
    cursor: pointer; color: #166534; font-size: 0.75rem;
    padding: 2px 8px; white-space: nowrap;
    transition: background 0.15s;
}
.pitem-undo-btn:hover { background: #bbf7d0; }

/* ── Edit a completed line in place (weight correction) ─────────────────────── */
.pitem-edit {
    margin-top: 10px; background: var(--surface, #fff);
    border: 1px dashed var(--blue, #0ea5e9); border-radius: 10px; padding: 12px 13px;
}
.pitem-edit-row { display: flex; align-items: center; gap: 9px; margin: 7px 0; }
.pitem-edit-no { flex: 0 0 32px; color: var(--text-muted, #64748b); font-weight: 700; font-size: 0.82rem; }
.pitem-edit-row .pitem-add-input { width: 120px; }
.pitem-edit-unit { color: var(--text-muted, #64748b); font-size: 0.8rem; }
.pitem-edit-row .pitem-chip-del { margin-left: auto; }
.pitem-edit-add {
    background: none; border: 1px solid var(--blue, #0ea5e9); color: var(--blue-dk, #0284c7);
    border-radius: 6px; padding: 5px 11px; font-size: 0.78rem; cursor: pointer; margin-top: 2px;
}
.pitem-edit-add:hover { background: var(--blue-xlt, #e0f2fe); }
.pitem-edit-foot {
    display: flex; gap: 8px; justify-content: flex-end;
    margin-top: 12px; border-top: 1px solid var(--border, #e2e8f0); padding-top: 10px;
}
.pitem-edit-cancel {
    background: var(--surface, #fff); border: 1px solid var(--border, #e2e8f0);
    color: var(--text-muted, #64748b); border-radius: 6px; padding: 6px 12px;
    font-size: 0.8rem; cursor: pointer;
}
.pitem-edit-cancel:hover { background: var(--hover, #f1f5f9); }

/* Orders table — weight toggle button + sub-row */
.wt-toggle-btn {
    background: none; border: 1px solid #bae6fd; border-radius: 6px;
    cursor: pointer; color: #0369a1; font-size: 0.76rem; font-weight: 600;
    padding: 3px 8px; white-space: nowrap;
    display: inline-flex; align-items: center; gap: 5px;
    transition: background 0.15s, border-color 0.15s;
}
.wt-toggle-btn:hover, .wt-toggle-btn.open { background: #e0f2fe; border-color: #7dd3fc; }
.wt-sub-row td {
    padding: 6px 12px 10px !important;
    background: #f8fafc;
    border-top: none !important;
}

/* unit chips */
.pitem-chips {
    display: flex; flex-wrap: wrap; gap: 5px;
    margin: 6px 0 4px;
}
.pitem-chip {
    display: inline-flex; align-items: center; gap: 5px;
    background: #e0f2fe; border: 1px solid #bae6fd; border-radius: 20px;
    padding: 3px 8px 3px 7px;
    font-size: 0.78rem;
}
.pitem-chips-ro .pitem-chip { background: #f1f5f9; border-color: #e2e8f0; }
.pitem-chip-no    { font-weight: 700; color: #0369a1; }
.pitem-chip-wt    { color: #0f172a; font-weight: 500; }
.pitem-chip-lorry { font-size: 0.7rem; color: #6d28d9; background: #ede9fe; border-radius: 10px; padding: 1px 5px; }
.pitem-chip-del {
    background: none; border: none; cursor: pointer;
    color: #94a3b8; font-size: 0.68rem; padding: 0 0 0 2px;
    line-height: 1; transition: color 0.12s;
}
.pitem-chip-del:hover { color: #dc2626; }

/* mini progress bar (per-item) */
.pitem-mini-bar {
    height: 3px; background: #e2e8f0; border-radius: 3px;
    margin: 4px 0 6px; overflow: hidden;
}
.pitem-mini-fill {
    height: 100%; background: var(--blue); border-radius: 3px;
    transition: width 0.3s ease;
}

/* add-unit row */
.pitem-add-row {
    display: flex; align-items: center; gap: 7px;
    margin-top: 2px; flex-wrap: wrap;
}
.pitem-lorry-select {
    font-size: 0.8rem; padding: 5px 8px;
    border: 1.5px solid #c4b5fd; border-radius: 7px;
    background: #faf5ff; color: #5b21b6; cursor: pointer;
    max-width: 140px;
}
.pitem-lorry-badge {
    font-size: 0.78rem; color: #6d28d9;
    background: #ede9fe; border-radius: 10px;
    padding: 3px 8px; white-space: nowrap;
}
.pitem-add-input {
    width: 130px; padding: 6px 10px;
    font-size: 0.875rem;
    border: 1.5px solid #cbd5e1; border-radius: 7px;
    background: #fff; outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.pitem-add-input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px #bae6fd55; }

/* action buttons bar at bottom of items tab */
.pick-actions-bar {
    padding: 10px 14px 14px;
    border-top: 1px solid #f1f5f9;
    margin-top: 4px;
}
.pick-actions-btns {
    display: flex; gap: 8px; flex-wrap: wrap;
}

/* Persistent action footer — outside tabs, pinned to panel bottom */
.panel-action-footer {
    padding: 12px 16px 14px;
    border-top: 2px solid #f1f5f9;
    background: #fff;
    flex-shrink: 0;                  /* don't compress when panel-body scrolls */
}
.panel-action-btns {
    display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 0;
}

/* ── Ghost action button (replaces plain text links) ─────────────────── */
.btn-create-link {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px;
    border: 1.5px dashed var(--border); border-radius: 20px;
    background: transparent; cursor: pointer;
    color: var(--text-2); font-size: 0.8rem; font-weight: 600;
    text-decoration: none;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.btn-create-link:hover {
    border-color: var(--blue);
    color: var(--blue-dk);
    background: var(--blue-xlt);
}
.inline-create-form {
    background: #f8fafc;
    border: 1.5px dashed #cbd5e1;
    border-radius: 8px;
    padding: 12px 14px 14px;
    margin-bottom: 10px;
}
.inline-create-title {
    font-size: 0.82rem; font-weight: 700; color: #475569;
    margin-bottom: 10px;
    display: flex; align-items: center; gap: 5px;
}
.inline-create-error {
    font-size: 0.78rem; color: #dc2626; margin-bottom: 8px;
}

/* ── Per-unit weight tracking ─────────────────────────────────────────── */
.pick-unit-section {
    width: 100%;
    margin-top: 8px;
    display: flex; flex-direction: column; gap: 6px;
}
.pick-unit-progress {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.pick-unit-list {
    display: flex; flex-direction: column; gap: 3px;
}
.pick-unit-row {
    display: flex; align-items: center; gap: 8px;
    background: #f1f5f9;
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 0.8rem;
}
.pick-unit-no {
    min-width: 30px;
    font-weight: 700;
    color: #64748b;
}
.pick-unit-weight {
    flex: 1;
    font-weight: 600;
    color: #0f172a;
}
.pick-unit-remove {
    background: none; border: none; cursor: pointer;
    color: #94a3b8; font-size: 0.75rem; padding: 2px 4px;
    border-radius: 4px;
    line-height: 1;
    transition: color 0.15s, background 0.15s;
}
.pick-unit-remove:hover { color: #dc2626; background: #fee2e2; }
.pick-unit-add-row {
    display: flex; align-items: center; gap: 6px;
    margin-top: 2px;
}
.pick-unit-input {
    width: 84px;
    padding: 5px 8px;
    font-size: 0.875rem;
    text-align: center;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #fff;
    outline: none;
    transition: border-color 0.15s;
}
.pick-unit-input:focus { border-color: var(--blue); box-shadow: 0 0 0 2px #bae6fd; }
.pick-unit-kg-label {
    font-size: 0.78rem;
    color: var(--text-muted);
    white-space: nowrap;
}
.pick-unit-add-btn { white-space: nowrap; }
/* Done summary row */
.pick-unit-done-row {
    display: flex; align-items: center; gap: 10px;
    flex-wrap: wrap;
    margin-top: 6px;
    width: 100%;
}
.pick-unit-done-count {
    font-size: 0.82rem;
    font-weight: 700;
    color: #166534;
}
.pick-unit-done-weight {
    font-size: 0.82rem;
    color: #0369a1;
    font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════════════════
   CHANGE REQUEST  (pending WhatsApp modification review)
   ══════════════════════════════════════════════════════════════════════════ */
.badge-change-pending {
    margin-left: 5px;
    font-size: 0.78rem;
    cursor: default;
}
.cr-section {
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: 10px;
    padding: 14px 16px;
    margin: 0 0 14px;
}
.cr-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px;
}
.cr-title  { font-weight: 700; font-size: 0.9rem; color: #92400e; }
.cr-date   { font-size: 0.75rem; color: #b45309; }
.cr-group-label {
    font-size: 0.72rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .04em; color: #78716c; margin-bottom: 6px;
}
.cr-diff-row {
    display: flex; align-items: flex-start; gap: 6px;
    font-size: 0.82rem; margin-bottom: 5px; flex-wrap: wrap;
}
.cr-field  { color: #78716c; min-width: 90px; flex-shrink: 0; }
.cr-old    { color: #dc2626; text-decoration: line-through; word-break: break-word; }
.cr-arrow  { color: #78716c; flex-shrink: 0; }
.cr-new    { color: #16a34a; font-weight: 600; word-break: break-word; }
.cr-items  { display: flex; flex-direction: column; gap: 4px; }
.cr-item-row {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 0.82rem; padding: 3px 0; border-bottom: 1px solid #fde68a;
}
.cr-item-row:last-child { border-bottom: none; }
.cr-item-name { color: #1c1917; }
.cr-item-sub  { color: #78716c; }
.cr-item-qty  { color: #92400e; font-weight: 600; white-space: nowrap; margin-left: 8px; }
.cr-actions     { margin-top: 12px; padding-top: 12px; border-top: 1px solid #fcd34d; }
.cr-note        { font-size: 0.82rem; resize: vertical; }
.cr-reviewed-by {
    margin-top: 10px; padding-top: 8px;
    border-top: 1px solid var(--border);
    font-size: 0.78rem; color: var(--text-muted);
}

/* ── History Timeline (in History tab) ───────────────────────────────────── */
.hist-timeline {
    padding: 8px 6px 4px;
}
.hist-tl-entry {
    display: flex;
    gap: 14px;
    position: relative;
}
.hist-tl-col {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: 16px;
}
.hist-tl-entry:not(:last-child) .hist-tl-col::after {
    content: '';
    position: absolute;
    left: 7px;
    top: 18px;
    bottom: -6px;
    width: 2px;
    background: var(--border);
    border-radius: 1px;
}
.hist-tl-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #0ea5e9;
    border: 3px solid var(--card-bg, #1e293b);
    box-shadow: 0 0 0 2px rgba(14,165,233,.3);
    flex-shrink: 0;
    margin-top: 2px;
    position: relative;
    z-index: 1;
}
.hist-tl-body {
    flex: 1;
    min-width: 0;
    padding-bottom: 20px;
}
.hist-tl-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
.hist-tl-note {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text);
    line-height: 1.4;
}
.hist-tl-meta {
    font-size: 0.72rem;
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}
.hist-tl-diff {
    font-size: 0.78rem;
    margin-top: 4px;
    padding: 2px 7px;
    border-radius: 4px;
    width: fit-content;
}
.hist-tl-removed { background: #fee2e2; color: #991b1b; }
.hist-tl-added   { background: #dcfce7; color: #166534; }
.hist-tl-changed { background: #fef9c3; color: #854d0e; }

/* ── Change Requests page ─────────────────────────────────────────────────── */
.cr-page-list { display: flex; flex-direction: column; gap: 16px; padding-bottom: 40px; }

.cr-page-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.cr-card-pending  { border-left: 4px solid #f59e0b; }
.cr-card-accepted { border-left: 4px solid #16a34a; }
.cr-card-rejected { border-left: 4px solid #dc2626; }

.cr-page-card-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px 10px;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap; gap: 8px;
}
.cr-page-docno    { font-weight: 700; font-size: 0.95rem; color: var(--text-primary); margin-right: 8px; }
.cr-page-customer { font-size: 0.85rem; color: var(--text-muted); }
.cr-page-rev      { font-size: 0.75rem; color: var(--text-muted); }
.cr-page-date     { font-size: 0.75rem; color: var(--text-muted); }
.cr-page-body     { padding: 14px 18px; }
.cr-page-actions  { padding: 12px 18px 16px; border-top: 1px solid var(--border); background: var(--page-bg); }

/* ══════════════════════════════════════════════════════════════════════════
   CARD / TABLE VIEW TOGGLE  (Picking List)
   ══════════════════════════════════════════════════════════════════════════ */
.pl-view-toggle {
    display: flex; align-items: center; gap: 4px;
    margin-bottom: 12px;
    background: var(--page-bg); border: 1px solid var(--border);
    border-radius: 9px; padding: 3px;
    width: fit-content;
}
.pl-view-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; border-radius: 6px; border: none; cursor: pointer;
    font-size: 0.82rem; font-weight: 600; color: var(--text-muted);
    background: transparent; transition: background 0.15s, color 0.15s;
}
.pl-view-btn.active {
    background: var(--card-bg); color: var(--text);
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}
.pl-view-btn:hover:not(.active) { color: var(--text-2); }

/* View bar — wraps view-toggle group and separate select toggle */
.pl-view-bar           { display:flex; align-items:center; justify-content:space-between;
                         margin-bottom:18px; gap:10px; flex-wrap:wrap; }

/* Separate multi-select toggle button */
.pl-select-toggle      { display:inline-flex; align-items:center; gap:6px;
                         padding:6px 14px; border-radius:8px;
                         border:1.5px solid var(--border); background:var(--card-bg);
                         color:var(--text-muted); cursor:pointer;
                         font-size:0.82rem; font-weight:600;
                         transition:all 0.15s; }
.pl-select-toggle:hover { border-color:#0ea5e9; color:#0ea5e9; }
.pl-select-toggle.active { background:#eff6ff; border-color:#0ea5e9;
                            color:#0ea5e9; box-shadow:0 0 0 2px rgba(14,165,233,0.15); }

/* ══════════════════════════════════════════════════════════════════════════
   FLEET BOARD PAGE
   ══════════════════════════════════════════════════════════════════════════ */
.fb-section-header     { display:flex; align-items:center; gap:10px;
                         margin:0 0 12px; padding-bottom:8px;
                         border-bottom:2px solid var(--border); }
.fb-section-icon       { font-size:1.2rem; }
.fb-section-title      { font-size:1rem; font-weight:800; color:var(--text); }
.fb-section-count      { font-size:0.78rem; color:var(--text-muted);
                         background:var(--bg-2,#f1f5f9); padding:2px 10px;
                         border-radius:999px; font-weight:600; }
.ld-lorry-delivering   { border-color:#6366f1 !important;
                         box-shadow:0 0 0 1.5px rgba(99,102,241,0.18); }
.ld-lorry-delivering .ld-lorry-header { background:linear-gradient(to right, #312e81, #1e1b4b); }

/* ══════════════════════════════════════════════════════════════════════════
   FLEET BOARD PAGE  (was: LORRY DISPATCH PAGE)
   ══════════════════════════════════════════════════════════════════════════ */
/* Unassigned banner */
.ld-banner {
    background: #fffbeb; color: #92400e;
    border: 1px solid #fde68a; border-radius: 10px;
    padding: 12px 18px; font-size: 0.875rem;
    margin-bottom: 18px; display: flex; align-items: center; gap: 8px;
}

/* Lorry card */
.ld-lorry-card {
    background: var(--card-bg);
    border: 1.5px solid var(--border);
    border-radius: 14px;
    margin-bottom: 16px;
    overflow: visible;   /* must NOT clip — kebab menus are absolute-positioned children */
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
/* Round the bottom corners of the flat table so card still looks clipped */
.fb-line-table tbody tr:last-child td:first-child { border-radius: 0 0 0 13px; }
.fb-line-table tbody tr:last-child td:last-child  { border-radius: 0 0 13px 0; }

/* Lorry header */
.ld-lorry-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px;
    background: linear-gradient(to right, #334155, #1e293b);
    flex-wrap: wrap; gap: 10px;
}
.ld-lorry-title {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.ld-lorry-icon { font-size: 1.2rem; }
.ld-lorry-code {
    font-size: 1rem; font-weight: 800; color: #fff;
    font-family: 'Consolas', monospace; letter-spacing: 0.04em;
}
.ld-lorry-sep { color: #475569; }
.ld-lorry-transporter {
    font-size: 0.875rem; color: #94a3b8; font-weight: 500;
}
.ld-lorry-desc {
    font-size: 0.78rem; color: #64748b;
}
.ld-lorry-badges { display: flex; gap: 6px; flex-wrap: wrap; }

/* Order rows */
.ld-orders { border-top: 1px solid var(--border); }
.ld-order { border-bottom: 1px solid var(--border); }
.ld-order:last-child { border-bottom: none; }

.ld-order-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 18px; cursor: pointer; gap: 12px;
    transition: background 0.12s;
}
.ld-order-head:hover { background: var(--blue-xlt); }

.ld-order-left {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0;
}
.ld-order-company {
    font-weight: 600; font-size: 0.9rem; color: var(--text);
}
.ld-order-addr {
    font-size: 0.75rem; color: var(--text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 260px;
}
.ld-order-right {
    display: flex; align-items: center; gap: 10px; flex-shrink: 0; flex-wrap: wrap;
}
.ld-picker {
    font-size: 0.78rem; color: #5b21b6; font-weight: 500; white-space: nowrap;
}
.ld-item-count {
    font-size: 0.78rem; color: var(--text-muted); white-space: nowrap;
}
.ld-chevron {
    color: var(--text-muted);
    transition: transform 0.2s;
    display: flex; align-items: center;
}
.ld-chevron.open { transform: rotate(180deg); }

/* Expanded items table */
.ld-items {
    padding: 0 18px 14px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    animation: fadeIn 0.15s ease;
}
.ld-item-table {
    width: 100%; border-collapse: collapse; font-size: 0.82rem;
}
.ld-item-table th {
    padding: 7px 12px; text-align: left;
    font-size: 0.67rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.07em; color: var(--text-muted);
    background: var(--page-bg);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.ld-item-table td {
    padding: 8px 12px; border-bottom: 1px solid #f1f5f9;
    color: var(--text-2); white-space: nowrap;
}
.ld-item-table tr:last-child td { border-bottom: none; }
.ld-item-table tr:hover td { background: var(--blue-xlt); }

/* ══════════════════════════════════════════════════════════════════════════
   NO-WRAP TABLE CELLS  (main data tables only — panel tables stay wrappable)
   ══════════════════════════════════════════════════════════════════════════ */
.ord-table td,
.table-container td { white-space: nowrap; }

/* ── Filter toolbar controls ──────────────────────────────────────────────
   Desktop: dissolve wrappers so every child participates in parent flex.
   Mobile: collapses to a search-row + collapsible filter panel.
   ────────────────────────────────────────────────────────────────────────── */
.pl-toolbar-controls {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex: 1;
}
/* transparent containers on desktop */
.pl-search-row   { display: contents; }
.pl-filter-panel { display: contents; }
/* toggle btn hidden on desktop */
.pl-filter-toggle { display: none; }

/* ── Role-info toggle button ─────────────────────────────────────────────── */
.btn-link-sm {
    background: none; border: none; cursor: pointer;
    font-size: 0.78rem; color: var(--blue-dk); font-weight: 600;
    padding: 2px 8px; border-radius: 5px;
    transition: background 0.12s;
}
.btn-link-sm:hover { background: var(--blue-lt); }

/* ── Role legend cards ───────────────────────────────────────────────────── */
.role-card {
    background: var(--card-bg); border: 1px solid var(--border);
    border-radius: 10px; padding: 14px;
}
.role-card-manager    { border-left: 4px solid #059669; }
.role-card-supervisor { border-left: 4px solid var(--blue); }
.role-card-picker     { border-left: 4px solid #d97706; }
.role-card-name { font-weight: 700; font-size: 0.88rem; }

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE / RESPONSIVE
   ══════════════════════════════════════════════════════════════════════════ */

/* ── App restore / auto-login spinner ───────────────────────────────────── */
.app-restoring {
    position: fixed; inset: 0;
    background: var(--sb-bg);
    display: flex; align-items: center; justify-content: center;
    z-index: 9000;
}
.app-restoring-spinner {
    width: 44px; height: 44px;
    border: 3px solid rgba(14,165,233,0.2);
    border-top-color: var(--blue);
    border-radius: 50%;
    animation: spin 0.75s linear infinite;
}

/* ── Hamburger button (hidden on desktop) ───────────────────────────────── */
.topbar-hamburger {
    display: none;
    align-items: center; justify-content: center;
    width: 38px; height: 38px;
    background: none; border: 1px solid var(--border);
    border-radius: 9px; cursor: pointer; color: var(--text-2);
    transition: background 0.15s, border-color 0.15s;
    flex-shrink: 0;
}
.topbar-hamburger:hover {
    background: var(--blue-xlt); border-color: var(--blue);
}

/* ── Sidebar overlay (mobile backdrop) ─────────────────────────────────── */
.sidebar-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(15,23,42,0.55);
    backdrop-filter: blur(2px);
    z-index: 499;
    animation: fadeIn 0.18s ease;
}

/* ══════════════════════════════════════════════════════════════════════════
   BREAKPOINT ≤ 768 px  (phones + small tablets)
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* Show hamburger, hide topbar chip & divider */
    .topbar-hamburger { display: flex; }
    .topbar-divider   { display: none; }
    .topbar-chip      { display: none; }
    .topbar-breadcrumb{ font-size: 0.78rem; }

    /* Topbar padding */
    .topbar { padding: 0 14px; gap: 8px; }

    /* Compress user-info on small screens */
    .user-info .user-role { display: none; }
    .user-info .user-name { font-size: 0.78rem; }

    /* Sidebar becomes a slide-in drawer */
    .sidebar {
        position: fixed; top: 0; left: 0; bottom: 0;
        width: 240px; z-index: 500;
        transform: translateX(-100%);
        transition: transform 0.25s cubic-bezier(0.22,1,0.36,1),
                    box-shadow 0.25s ease;
        box-shadow: none;
    }
    .sidebar.mob-open {
        transform: translateX(0);
        box-shadow: 8px 0 40px rgba(15,23,42,0.35);
    }
    .sidebar-overlay { display: block; }

    /* Page content padding */
    .page-content { padding: 16px 14px; }

    /* Picking list / Orders toolbar: search row + collapsible filter panel */
    .pl-toolbar {
        flex-direction: column; align-items: stretch; gap: 10px;
    }
    .pl-toolbar-controls {
        display: flex; flex-direction: column; align-items: stretch; gap: 8px;
    }
    .pl-search-row {
        display: flex !important;
        align-items: center; gap: 8px;
    }
    .pl-search-row .pl-search { flex: 1; min-width: 0; width: auto; }
    .pl-filter-toggle {
        display: flex;
        align-items: center; gap: 5px;
        padding: 8px 12px;
        border: 1px solid var(--border); border-radius: 8px;
        background: var(--card-bg); cursor: pointer;
        font-size: 0.82rem; font-weight: 600; color: var(--text-2);
        white-space: nowrap; flex-shrink: 0;
        transition: border-color 0.15s, background 0.15s;
    }
    .pl-filter-toggle.has-filters {
        border-color: var(--blue); background: var(--blue-xlt); color: var(--blue-dk);
    }
    .pl-filter-panel {
        display: none !important;
        flex-direction: column; gap: 8px;
        padding: 12px;
        background: var(--page-bg);
        border: 1px solid var(--border);
        border-radius: 10px;
    }
    .pl-filter-panel.open { display: flex !important; }
    .pl-filter-panel .pl-filter { width: 100%; }
    .pl-filter-panel .ord-date-label {
        display: flex; flex-direction: column; gap: 4px;
        font-size: 0.8rem; font-weight: 600; color: var(--text-2);
    }
    .pl-filter-panel .ord-date-label .pl-filter { width: 100%; }

    /* Users crud-toolbar also uses these classes */
    .crud-toolbar .pl-search-row { flex-wrap: nowrap; }

    /* Role legend: 1 column on mobile */
    .role-legend-grid { grid-template-columns: 1fr !important; }

    .pl-search  { width: 100%; }
    .pl-filter  { width: 100%; }

    /* Status pills: 2-column grid */
    .pl-pills {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .pl-pill { justify-content: center; text-align: center; }

    /* Cards: single column */
    .pl-grid { grid-template-columns: 1fr; }

    /* Panel full-screen on mobile */
    .panel {
        top: 0; left: 0;
        transform: none;
        width: 100%; max-width: 100%;
        height: 100%; max-height: 100%;
        border-radius: 0;
    }

    /* Orders toolbar: stack */
    .crud-header   { flex-direction: column; align-items: stretch; }
    .crud-actions  { flex-wrap: wrap; }
    .crud-toolbar  { flex-direction: column; align-items: stretch; }

    /* Tables: horizontal scroll */
    .table-wrap,
    .table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    table { min-width: 540px; }

    /* Modals */
    .ord-modal, .modal {
        width: 100%;
        max-width: 100%;
        border-radius: 16px 16px 0 0;
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        transform: none;
        max-height: 92vh;
        animation: slideUpMob 0.22s ease;
    }
    .ord-modal-sm   { width: 100%; }
    .ord-modal-wide { width: 100%; height: 94vh; max-height: 94vh; }
    .ord-modal-split {
        grid-template-columns: 1fr;
        overflow-y: auto;
        overflow-x: hidden;
    }
    .ord-modal-left  { border-right: none; border-bottom: 1px solid var(--border); }
    .ord-modal-right { overflow: visible; }
    @keyframes slideUpMob {
        from { opacity:0; transform: translateY(40px); }
        to   { opacity:1; transform: translateY(0); }
    }
    /* Re-center the standard modal backdrop click-target */
    .modal-backdrop { align-items: flex-end; }

    /* Touch-friendly buttons */
    .btn    { padding: 10px 16px; font-size: 0.875rem; }
    .btn-sm { padding: 8px 12px; font-size: 0.8rem; }
    .btn-login { height: 50px; font-size: 1rem; }

    /* Login page: remove left panel, full-width form */
    .login-left  { display: none; }
    .login-right { width: 100%; border-left: none; padding: 32px 20px; }
    .login-form-wrap { max-width: 100%; }
    .login-form-header h2 { font-size: 1.45rem; }

    /* Stats bar: 2 columns */
    .ord-stats { grid-template-columns: 1fr 1fr; }

    /* Page header: stack */
    .page-header { flex-direction: column; align-items: stretch; }
}

/* ══════════════════════════════════════════════════════════════════════════
   BREAKPOINT ≤ 480 px  (phones only)
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    /* Stats bar: 1 column on very small phones */
    .ord-stats { grid-template-columns: 1fr; }

    /* Pills: 1 column */
    .pl-pills { grid-template-columns: 1fr; }

    /* Topbar user: avatar only, hide name */
    .user-info { display: none; }
    .user-chevron { display: none; }
    .topbar-user { padding: 6px; border-radius: 50%; }
}

/* ══════════════════════════════════════════════════════════════════════════
   DELIVERY MANAGEMENT  (.del-*)
   ══════════════════════════════════════════════════════════════════════════ */
.del-list          { display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
.del-card          { background:var(--surface-2,#f8fafc); border:1px solid var(--border,#e2e8f0);
                     border-radius:8px; padding:10px 12px; }
.del-card-header   { display:flex; align-items:center; gap:8px; }
.del-badge         { font-size:0.7rem; font-weight:700; background:#0ea5e9; color:#fff;
                     border-radius:4px; padding:2px 7px; }
.del-lorry         { flex:1; font-size:0.85rem; font-weight:600; }
.del-trans         { font-weight:400; color:#64748b; font-size:0.8rem; }
.del-remove-btn    { background:none; border:none; color:#94a3b8; cursor:pointer; font-size:1rem;
                     padding:0 4px; line-height:1; }
.del-remove-btn:hover { color:#dc2626; }
.del-lines         { margin-top:6px; display:flex; flex-direction:column; gap:3px; }
.del-line          { font-size:0.8rem; color:#64748b; }
.lorry-link {
    color: inherit;
    text-decoration: underline dotted;
    font-weight: 600;
}
.lorry-link:hover { color: var(--primary); text-decoration: underline; }

.del-unit-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; padding-left: 12px; }
.del-unit-chip {
    font-size: 0.72rem;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    padding: 1px 6px;
    color: #475569;
    font-family: 'Courier New', monospace;
}

/* Item allocation row inside Add Delivery form */
.del-alloc-row     { display:grid; grid-template-columns:1fr 80px auto;
                     align-items:center; gap:8px; margin-bottom:6px; }
.del-alloc-desc    { font-size:0.82rem; color:#334155; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.del-alloc-input   { padding:4px 8px !important; font-size:0.82rem !important; }
.del-alloc-uom     { font-size:0.78rem; color:#94a3b8; white-space:nowrap; }

/* ══════════════════════════════════════════════════════════════════════════
   ASSIGN LORRY MODAL  (.asgn-*)
   ══════════════════════════════════════════════════════════════════════════ */
/* Existing-deliveries summary */
.asgn-existing          { background:var(--input-bg); border:1px solid var(--border); border-radius:8px; padding:10px 12px; margin-bottom:12px; }
.asgn-existing-title    { font-size:0.75rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.5px; margin-bottom:6px; }
.asgn-existing-row      { display:flex; align-items:flex-start; gap:8px; font-size:0.82rem; padding:3px 0; }
.asgn-lorry-tag         { background:var(--badge-bg,#e2e8f0); color:var(--text); border-radius:4px; padding:2px 8px; font-size:0.75rem; font-weight:600; white-space:nowrap; flex-shrink:0; }

/* Item rows */
.asgn-item-row          { padding:9px 0; border-bottom:1px solid var(--border); }
.asgn-item-row:last-child { border-bottom:none; }
.asgn-item-full         { opacity:0.5; }
.asgn-item-top          { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.asgn-item-check        { display:flex; align-items:center; gap:7px; flex:1; font-size:0.85rem; min-width:0; }
.asgn-item-check span   { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.asgn-item-qty          { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.asgn-full-badge        { font-size:0.7rem; color:#16a34a; font-weight:600; white-space:nowrap; background:#dcfce7; border-radius:4px; padding:1px 5px; }

/* Progress bar */
.asgn-progress-wrap     { display:flex; align-items:center; gap:8px; }
.asgn-progress-bar      { flex:1; height:5px; background:var(--border); border-radius:3px; overflow:hidden; display:flex; }
.asgn-progress-other    { background:#94a3b8; height:100%; transition:width .2s; }
.asgn-progress-this     { background:#22c55e; height:100%; transition:width .2s; }
.asgn-progress-label    { font-size:0.72rem; color:var(--text-muted); white-space:nowrap; min-width:80px; text-align:right; }

/* Weighed-piece picker. Backgrounds follow the theme so dark-mode text stays readable. */
.asgn-pieces {
    margin-top: 8px; padding: 9px 10px;
    background: var(--hover); border: 1px solid var(--border); border-radius: 9px;
}
.asgn-pieces-head {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 0.72rem; font-weight: 700; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: .03em; margin-bottom: 6px;
}
.asgn-pieces-all {
    display: inline-flex; align-items: center; gap: 5px;
    font-weight: 600; color: var(--blue-dk); cursor: pointer; text-transform: none;
}
.asgn-piece {
    display: flex; align-items: center; gap: 9px;
    padding: 6px 9px; border: 1px solid var(--border); border-radius: 7px;
    margin-bottom: 4px; font-size: 0.83rem; cursor: pointer;
    background: var(--card-bg); color: var(--text);
}
.asgn-piece.on { background: var(--blue-xlt); }
.asgn-piece-no { font-weight: 600; color: var(--text-2); }
.asgn-piece-wt { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text); }
.asgn-unweighed {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 9px; border: 1px dashed var(--border-dk); border-radius: 7px;
    background: var(--page-bg); font-size: 0.82rem; margin-top: 5px; color: var(--text-2);
}

/* Unassigned warning & partial badge */
.asgn-unassigned-warn   { background:#fef3c7; border:1px solid #fde68a; color:#92400e; border-radius:6px; padding:8px 12px; font-size:0.82rem; margin-top:10px; }
.ord-partial-badge      { display:inline-block; font-size:0.68rem; background:#fef3c7; color:#92400e; border-radius:3px; padding:1px 5px; margin-left:5px; vertical-align:middle; font-weight:600; }

/* ═══════════════════════════════════════════════════════════════════════════
   PRINT DELIVERY ORDER  (.do-*)
   Screen styles for the modal preview
   ══════════════════════════════════════════════════════════════════════════ */
.do-print-modal    { max-width:820px !important; width:820px !important; }
.do-print-area     { padding:24px !important; background:#fff; overflow-y:auto; max-height:72vh; }
.do-doc            { font-family:'Segoe UI',Arial,sans-serif; color:#1e293b; margin-bottom:32px; }
.do-page-break     { page-break-before:always; }

.do-company        { font-size:1.1rem; font-weight:800; color:#0284c7; letter-spacing:.5px; margin-bottom:2px; }
.do-title          { font-size:1.5rem; font-weight:700; color:#1e293b; border-bottom:3px solid #0ea5e9;
                     padding-bottom:6px; margin-bottom:14px; }
.do-meta           { display:grid; grid-template-columns:auto 1fr; gap:4px 16px; margin-bottom:18px; }
.do-meta-row       { display:contents; }
.do-meta-row span  { font-size:0.8rem; color:#64748b; font-weight:600; white-space:nowrap; }
.do-meta-row strong{ font-size:0.85rem; color:#1e293b; }

.do-table              { width:100%; border-collapse:collapse; font-size:0.83rem; margin-bottom:24px; }
.do-table th           { background:#0ea5e9; color:#fff; padding:7px 10px; text-align:left;
                         font-size:0.78rem; font-weight:600; }
.do-table td           { padding:5px 10px; vertical-align:top; }
.do-sub                { display:inline; font-size:0.78rem; color:#64748b; }

/* Item header row — bold border top, light blue tint */
.do-item-row td        { border-top:1.5px solid #bae6fd; background:#f0f9ff;
                         padding-top:8px; padding-bottom:4px; }

/* Per-piece sub-rows — indented, no background alternation */
.do-piece-row td       { border-bottom:none; padding-top:2px; padding-bottom:2px;
                         font-size:0.8rem; }
.do-piece-label        { padding-left:28px !important; color:#334155; }

/* Total weight row — subtle separator above */
.do-total-row td       { border-top:1px dashed #cbd5e1; border-bottom:2px solid #e2e8f0;
                         padding-top:4px; padding-bottom:8px; font-size:0.8rem; }

.do-footer         { display:flex; gap:40px; margin-top:48px; }
.do-sig            { flex:1; }
.do-sig-line       { border-bottom:1.5px solid #334155; height:40px; }
.do-sig-label      { font-size:0.75rem; color:#64748b; margin-top:6px; text-align:center; }

/* ── Print media — only the .do-print-area prints ── */
@media print {
    body > *                { display:none !important; }
    .do-print-area          { display:block !important; position:fixed; inset:0;
                              background:#fff; padding:20px; overflow:visible; }
    .no-print               { display:none !important; }
    .ord-modal-backdrop     { display:none !important; }
    .do-page-break          { page-break-before:always; }
    .do-table               { font-size:0.78rem; }
}

/* ══════════════════════════════════════════════════════════════════════════
   MULTI-SELECT + BULK ACTION BAR  (.pl-bulk-bar, .pl-card-check)
   ══════════════════════════════════════════════════════════════════════════ */
.pl-select-btn         { gap:6px; }
.pl-card               { position:relative; }
.pl-card-check         { position:absolute; top:10px; right:10px;
                         width:22px; height:22px; border-radius:6px;
                         border:2px solid #94a3b8; background:#fff;
                         display:flex; align-items:center; justify-content:center;
                         font-size:0.8rem; font-weight:800; color:#fff;
                         transition:all 0.15s; z-index:2; }
.pl-card-check.checked { background:#0ea5e9; border-color:#0ea5e9; }
.pl-card-checked       { border-color:#0ea5e9 !important; box-shadow:0 0 0 2px rgba(14,165,233,0.25); }
.ord-row-checked       { background:rgba(14,165,233,0.08) !important; }

.pl-bulk-bar           { position:fixed; bottom:16px; left:50%; transform:translateX(-50%);
                         background:#1e293b; color:#fff; border-radius:12px;
                         padding:10px 14px; display:flex; align-items:center; gap:16px;
                         box-shadow:0 8px 24px rgba(0,0,0,0.28); z-index:900;
                         min-width:460px; max-width:92vw;
                         opacity:0.75; transition:opacity 0.15s, transform 0.2s; }
.pl-bulk-bar.active    { opacity:1; }
.pl-bulk-info          { display:flex; align-items:center; gap:8px; font-size:0.88rem; }
.pl-bulk-count         { display:inline-flex; align-items:center; justify-content:center;
                         min-width:28px; height:28px; padding:0 8px; border-radius:999px;
                         background:#0ea5e9; color:#fff; font-weight:800; font-size:0.85rem; }
.pl-bulk-actions       { display:flex; align-items:center; gap:8px; margin-left:auto; }
.pl-bulk-actions .btn  { font-size:0.8rem; padding:6px 10px; }
.btn-close-bulk        { background:transparent; border:none; color:#cbd5e1;
                         width:28px; height:28px; border-radius:6px; cursor:pointer;
                         font-size:1rem; }
.btn-close-bulk:hover  { background:rgba(255,255,255,0.12); color:#fff; }

@media (max-width: 640px) {
    .pl-bulk-bar       { min-width:0; width:calc(100vw - 24px); flex-wrap:wrap; }
    .pl-bulk-actions   { width:100%; justify-content:flex-end; }
}

/* ══════════════════════════════════════════════════════════════════════════
   LORRY DISPATCH — progress + dispatch button
   ══════════════════════════════════════════════════════════════════════════ */
.ld-lorry-ready        { border-color:#10b981 !important;
                         box-shadow:0 0 0 2px rgba(16,185,129,0.18), 0 2px 8px rgba(0,0,0,0.06); }

.ld-progress-row       { display:flex; align-items:center; gap:14px;
                         padding:10px 18px; background:#f8fafc;
                         border-top:1px solid var(--border);
                         border-bottom:1px solid var(--border); }
.ld-progress-bar       { flex:1; height:8px; background:#e2e8f0;
                         border-radius:999px; overflow:hidden; }
.ld-progress-fill      { height:100%;
                         background:linear-gradient(90deg,#f59e0b 0%,#10b981 100%);
                         transition:width 0.25s; }
.ld-progress-label     { font-size:0.78rem; color:#475569;
                         font-weight:600; white-space:nowrap; }
.ld-dispatch-btn       { white-space:nowrap; }
.ld-dispatch-btn:disabled { opacity:0.55; cursor:not-allowed; }
.fb-open-btn           { white-space:nowrap; font-size:0.72rem; padding:2px 8px; }

/* Fleet Board — kebab menu */
.kebab-wrap        { position: relative; display: inline-block; }
.kebab-btn {
    display: flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 6px;
    border: 1px solid transparent; background: transparent;
    color: #64748b; cursor: pointer; font-size: 1.1rem; line-height: 1;
    transition: background .12s, color .12s;
}
.kebab-btn:hover   { background: #334155; color: #e2e8f0; border-color: #475569; }
.kebab-menu {
    position: absolute; right: 0; top: calc(100% + 4px);
    background: #1e293b; border: 1px solid #334155; border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.45);
    min-width: 150px; z-index: 200; overflow: hidden;
}
.kebab-item {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 14px; font-size: 0.82rem; color: #cbd5e1;
    cursor: pointer; white-space: nowrap;
    transition: background .1s;
}
.kebab-item:hover  { background: #334155; color: #f1f5f9; }
.ki-icon           { font-size: 0.9rem; width: 16px; text-align: center; }
.kebab-divider     { height: 1px; background: #334155; margin: 2px 0; }
.kebab-backdrop    { position: fixed; inset: 0; z-index: 199; }

/* Fleet Board — flat delivery-line table */
.fb-line-table {
    width: 100%; border-collapse: collapse; font-size: 0.82rem;
    margin-top: 8px;
}
.fb-line-table thead tr {
    border-bottom: 1px solid var(--border);
}
.fb-line-table th {
    padding: 5px 10px; text-align: left;
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: var(--text-muted);
}
.fb-line-table td { padding: 7px 10px; border-bottom: 1px solid #f1f5f920; }
.fb-line-table tr:last-child td { border-bottom: none; }
.fb-line-row:hover td { background: var(--blue-xlt); }
.fb-col-item     { min-width: 120px; }
.fb-col-num      { text-align: right; width: 52px; font-weight: 700; }
.fb-col-uom      { width: 52px; }
.fb-col-docno    { width: 110px; }
.fb-col-customer { min-width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.fb-col-status   { width: 90px; }
.fb-col-actions  { width: 1px; white-space: nowrap; text-align: right; }
.ld-lorry-ready .ld-progress-fill { background:#10b981; }
.ld-lorry-ready .ld-progress-row  { background:#ecfdf5; }

/* ═══════════════════════════════════════════════════════════════════════════
   UI IMPROVEMENTS v2 — Bigger Buttons, Alerts, Summary Bar, Shortcuts
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Dashboard — Alerts Row ──────────────────────────────────────────────── */
.db-alerts-row {
    display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px;
}
.db-alert-card {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 16px; border-radius: 12px;
    border: 1.5px solid transparent;
    font-size: 0.83rem; font-weight: 500;
    flex: 1 1 220px; min-width: 200px;
    cursor: default;
}
.db-alert-card.alert-red   { background: #fff1f2; border-color: #fca5a5; color: #b91c1c; }
.db-alert-card.alert-amber { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.db-alert-card.alert-blue  { background: #f0f9ff; border-color: #bae6fd; color: #0369a1; }
.db-alert-card.alert-green { background: #f0fdf4; border-color: #86efac; color: #15803d; }
.db-alert-icon  { font-size: 1.1rem; flex-shrink: 0; margin-top: 1px; }
.db-alert-body  { display: flex; flex-direction: column; gap: 2px; }
.db-alert-title { font-weight: 700; }
.db-alert-desc  { font-size: 0.76rem; opacity: 0.85; }

/* ── Nav Badge Pulse ─────────────────────────────────────────────────────── */
@keyframes nav-badge-pulse {
    0%   { transform: scale(1);    box-shadow: 0 0 0 0   rgba(239,68,68,.6);  }
    40%  { transform: scale(1.35); box-shadow: 0 0 0 6px rgba(239,68,68,.0);  }
    100% { transform: scale(1);    box-shadow: 0 0 0 0   rgba(239,68,68,.0);  }
}
.nav-badge.pulse { animation: nav-badge-pulse 0.5s ease 4; }

/* ── Orders — Summary Bar ────────────────────────────────────────────────── */
.orders-summary-bar {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 9px 14px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 10px;
    font-size: 0.8rem; color: var(--text-muted);
}
.orders-summary-label { font-weight: 500; margin-right: 2px; }
.orders-summary-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: 999px;
    font-weight: 600; font-size: 0.77rem; cursor: pointer;
    transition: filter .12s;
}
.orders-summary-chip:hover { filter: brightness(.93); }
.orders-summary-chip.chip-total   { background: #f1f5f9; color: #334155; }
.orders-summary-chip.chip-pending { background: #fef9c3; color: #a16207; }
.orders-summary-chip.chip-active  { background: #dbeafe; color: #1d4ed8; }
.orders-summary-chip.chip-done    { background: #dcfce7; color: #15803d; }
.orders-summary-sep { color: var(--border-dk); padding: 0 2px; }

/* ── Quick Status Advance ────────────────────────────────────────────────── */
.status-advance-wrap {
    position: relative; display: inline-flex; flex-direction: column;
}
.status-badge-btn {
    border: none; background: none; padding: 0; cursor: pointer;
    display: inline-flex; align-items: center; gap: 4px;
}
.status-badge-btn .chevron {
    font-size: 0.6rem; opacity: .65; transition: transform .15s;
}
.status-badge-btn.open .chevron { transform: rotate(180deg); }
.status-advance-menu {
    position: absolute; top: calc(100% + 5px); left: 0; z-index: 300;
    background: #fff; border: 1px solid var(--border);
    border-radius: 10px; box-shadow: 0 8px 28px rgba(0,0,0,.14);
    min-width: 180px; overflow: hidden;
    animation: toastIn .14s ease;
}
.status-advance-item {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 14px; font-size: 0.82rem; font-weight: 500;
    cursor: pointer; color: var(--text);
    border: none; background: none; width: 100%; text-align: left;
    transition: background .1s;
}
.status-advance-item:hover       { background: #f1f5f9; }
.status-advance-item.adv-success { color: #15803d; }
.status-advance-item.adv-danger  { color: var(--danger); }
.status-advance-item.adv-lorry   { color: #0369a1; }
.status-advance-divider {
    height: 1px; background: var(--border); margin: 2px 0;
}

/* ── Picking List — Big Action Buttons ───────────────────────────────────── */
.phv2-big-actions {
    display: flex; flex-direction: column; gap: 8px;
    padding: 12px 16px 4px; border-top: 1px solid var(--border);
    margin-top: 4px;
}
.btn-action-big {
    display: flex; align-items: center; justify-content: center;
    gap: 10px; width: 100%;
    padding: 15px 20px; border-radius: 12px; border: none; cursor: pointer;
    font-size: 1rem; font-weight: 700; letter-spacing: .01em;
    transition: transform .1s, filter .15s, box-shadow .15s;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
    -webkit-tap-highlight-color: transparent;
}
.btn-action-big:active           { transform: scale(.97); }
.btn-action-big:disabled         { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-action-big.big-primary      { background: #0ea5e9; color: #fff; }
.btn-action-big.big-primary:not(:disabled):hover  { filter: brightness(1.08); }
.btn-action-big.big-success      { background: #22c55e; color: #fff; }
.btn-action-big.big-success:not(:disabled):hover  { filter: brightness(1.08); }
.btn-action-big.big-warning      { background: #f59e0b; color: #fff; }
.btn-action-big.big-warning:not(:disabled):hover  { filter: brightness(1.08); }
.btn-action-big.big-purple       { background: #8b5cf6; color: #fff; }
.btn-action-big.big-purple:not(:disabled):hover   { filter: brightness(1.08); }
.btn-action-big.big-orange       { background: #f97316; color: #fff; }
.btn-action-big.big-orange:not(:disabled):hover   { filter: brightness(1.08); }
.btn-action-big .btn-big-icon    { font-size: 1.25rem; }
.btn-action-big .btn-big-label   { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
.btn-action-big .btn-big-sub     { font-size: 0.72rem; font-weight: 400; opacity: .85; }
.phv2-small-actions {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    padding: 8px 16px 10px;
}

/* ── Actionable Empty States ─────────────────────────────────────────────── */
.empty-state-v2 {
    display: flex; flex-direction: column; align-items: center;
    gap: 10px; padding: 64px 24px; text-align: center;
}
.empty-state-v2-icon   { font-size: 3rem; line-height: 1; }
.empty-state-v2-title  { font-size: 1.05rem; font-weight: 700; color: var(--text); }
.empty-state-v2-sub    { font-size: 0.85rem; color: var(--text-muted); max-width: 290px; line-height: 1.5; }
.empty-state-v2-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }

/* ── Keyboard Shortcut Overlay ───────────────────────────────────────────── */
.kbd-overlay-backdrop {
    position: fixed; inset: 0; background: rgba(15,23,42,.55);
    z-index: 9000; display: flex; align-items: center; justify-content: center;
    animation: fadeIn .15s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.kbd-overlay {
    background: #fff; border-radius: 16px;
    padding: 28px 32px; max-width: 420px; width: 90%;
    box-shadow: 0 24px 60px rgba(0,0,0,.25);
}
.kbd-overlay-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 18px;
}
.kbd-overlay-title { font-size: 1.05rem; font-weight: 800; color: var(--text); }
.kbd-table { width: 100%; border-collapse: collapse; }
.kbd-table td { padding: 7px 0; font-size: 0.84rem; }
.kbd-table td:first-child { color: var(--text-muted); }
.kbd-table td:last-child  { text-align: right; }
kbd {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 3px 7px; border-radius: 5px;
    background: #f1f5f9; border: 1px solid #cbd5e1;
    color: #334155; font-size: 0.76rem; font-weight: 700;
    font-family: 'Consolas', monospace; min-width: 26px;
    box-shadow: 0 2px 0 #cbd5e1; margin-left: 4px;
}
.kbd-trigger {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 10px; border-radius: 7px; cursor: pointer;
    border: 1px solid var(--border); background: #fff;
    font-size: 0.75rem; color: var(--text-muted);
    transition: background .12s;
}
.kbd-trigger:hover { background: #f1f5f9; }

/* ── Inbox — Customer History Strip ─────────────────────────────────────── */
.inbox-history-strip {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 7px 14px;
    background: #f8fafc; border-top: 1px solid var(--border);
    font-size: 0.78rem; color: var(--text-muted);
}
.inbox-history-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 9px; border-radius: 999px;
    font-size: 0.73rem; font-weight: 600;
}
.inbox-history-chip.chip-good    { background: #dcfce7; color: #15803d; }
.inbox-history-chip.chip-neutral { background: #e0f2fe; color: #0369a1; }
.inbox-history-chip.chip-new     { background: #fff7ed; color: #c2410c; }
.inbox-dup-banner {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 14px;
    background: #fffbeb; border-top: 1px solid #fde68a;
    font-size: 0.81rem; color: #92400e; font-weight: 500;
}

/* ── Lorry Group Header Enhancement ─────────────────────────────────────── */
.lorry-group-progress {
    display: flex; align-items: center; gap: 6px;
    font-size: 0.72rem; color: var(--text-muted);
}
.lorry-group-prog-bar {
    width: 60px; height: 5px; background: var(--border);
    border-radius: 3px; overflow: hidden; display: inline-block;
}
.lorry-group-prog-fill {
    height: 100%; background: #22c55e; border-radius: 3px;
    transition: width .3s ease;
}
.lorry-group-status-row {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 12px 8px; flex-wrap: wrap;
}
.lorry-group-stat-chip {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 2px 8px; border-radius: 999px;
    font-size: 0.7rem; font-weight: 600; cursor: pointer;
}

/* ══════════════════════════════════════════════════════════════════════════
   PICKING LIST — TWO-COLUMN BOARD LAYOUT
   ══════════════════════════════════════════════════════════════════════════ */

/* Lorry card grid — responsive 2-col layout */
.pl-lorry-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 14px;
    padding-bottom: 24px;
    align-items: start;
}

/* ── Lorry Card ──────────────────────────────────────────────────────────── */
.pl-lorry-card {
    background: var(--card-bg);
    border: 1.5px solid var(--border);
    border-radius: 12px;
    padding: 12px 14px;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, transform .1s;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pl-lorry-card:hover {
    border-color: #94a3b8;
    box-shadow: 0 2px 10px rgba(0,0,0,.08);
}
.pl-lorry-card-active {
    border-color: var(--blue) !important;
    box-shadow: 0 0 0 3px rgba(14,165,233,.15), 0 2px 10px rgba(0,0,0,.08) !important;
}
.pl-lorry-card:active { transform: scale(.995); }

/* Card header row */
.pl-lc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}
.pl-lc-plate {
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--text);
}
.pl-lc-plate.unassigned {
    color: #f59e0b;
}
.pl-lc-trans {
    font-size: 0.78rem;
    color: var(--text-muted);
    flex: 1;
}
.pl-lc-count {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
}
.pl-lc-date {
    font-size: 0.72rem;
    color: var(--text-muted);
    white-space: nowrap;
}

/* Progress bar */
.pl-lc-progress-track {
    height: 5px;
    background: var(--border);
    border-radius: 3px;
    overflow: hidden;
}
.pl-lc-progress-fill {
    height: 100%;
    border-radius: 3px;
    background: #94a3b8;
    transition: width .4s ease;
}
.pl-lc-progress-fill.fill-done    { background: #22c55e; }
.pl-lc-progress-fill.fill-partial { background: #0ea5e9; }
.pl-lc-progress-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: -2px;
}

/* Status chips row */
.pl-lc-chips {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

/* Pickers row */
.pl-lc-pickers {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* Inline action button on card */
.pl-lc-action {
    margin-top: 2px;
}
.pl-lc-action .btn-action-big {
    padding: 10px 14px;
    font-size: 0.88rem;
}
.pl-lc-action a.btn-action-big {
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* ── Panel header v2 (inside right column) ───────────────────────────────── */
.panel-header-v2 {
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
}
.panel-header-v2 .panel-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

/* Picking detail: close sits in the top-right corner, same as the order view.
   The panel itself must not scroll, or the header (and the close button) slide away. */
.panel.picking-panel { overflow: hidden; }
.panel.picking-panel .panel-body { min-height: 0; }
.panel-header-v2.picking-panel-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    column-gap: 8px;
}
.panel-header-v2.picking-panel-header > :not(.panel-close) { grid-column: 1; }
.panel-header-v2.picking-panel-header > .panel-close {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
}

/* ── Responsive: single column on narrow screens ─────────────────────────── */
@media (max-width: 600px) {
    .pl-lorry-grid {
        grid-template-columns: 1fr;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   PICKING LIST — TABLE LAYOUT
   ══════════════════════════════════════════════════════════════════════════ */

/* Header bar */
.plt-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px 10px;
    gap: 12px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--border);
    background: var(--card-bg);
}
.plt-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}
.plt-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.plt-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.plt-search-icon {
    position: absolute;
    left: 10px;
    font-size: .85rem;
    pointer-events: none;
}
.plt-search {
    padding: 6px 10px 6px 30px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: .875rem;
    background: var(--bg);
    color: var(--text-primary);
    width: 220px;
}
.plt-search:focus { outline: none; border-color: var(--blue); }
.plt-status-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
}
.plt-status-label {
    font-size: .85rem;
    color: var(--text-muted);
    white-space: nowrap;
}
.plt-status-sel {
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: .875rem;
    background: var(--bg);
    color: var(--text-primary);
    cursor: pointer;
}
/* Table */
.plt-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
    background: var(--card-bg);
}
.plt-table thead tr {
    background: var(--nav-bg);
    color: #fff;
}
.plt-table thead th {
    padding: 10px 14px;
    text-align: left;
    font-weight: 600;
    font-size: .8rem;
    letter-spacing: .03em;
    white-space: nowrap;
}
.plt-th-num { text-align: center !important; }

/* Group header row */
.plt-group-row td {
    padding: 10px 14px 6px;
    background: var(--bg);
}
.plt-group-label {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.plt-group-pending { color: #d97706; }
.plt-group-ongoing { color: var(--blue); }
.plt-group-done    { color: #16a34a; }
.plt-group-unassigned { color: #0f172a; }
.pl-unassigned-note {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 6px 0 10px; font-size: 0.8rem; color: #7e22ce;
}

/* ── Orders: group-by-transporter toggle ─────────────────────────── */
.ord-grp-switch {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 5px 11px; border: 1px solid var(--border); border-radius: 9px;
    background: #fff; color: var(--text-muted);
    font-size: .82rem; font-weight: 600; cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.ord-grp-switch:hover { background: #f8fafc; }
.ord-grp-switch .ogs-track {
    position: relative; width: 36px; height: 20px; flex: 0 0 auto;
    border-radius: 999px; background: #cbd5e1; transition: background .18s;
}
.ord-grp-switch .ogs-knob {
    position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
    border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(15,23,42,.35);
    transition: transform .18s;
}
.ord-grp-switch.on { color: var(--blue-dk); border-color: #bae6fd; background: var(--blue-xlt); }
.ord-grp-switch.on .ogs-track { background: var(--blue); }
.ord-grp-switch.on .ogs-knob  { transform: translateX(16px); }
.ord-grp-switch:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ── Orders: transporter group header rows ───────────────────────── */
.ord-tgroup-row { cursor: pointer; }
.ord-tgroup-row > td { padding: 0 !important; background: #f1f5f9; border-bottom: 1px solid var(--border); }
.ord-tgroup-row:hover > td { background: #e9eef4; }
.ord-tgroup-combo > td { background: linear-gradient(90deg, #faf5ff, #f1f5f9); }
.ord-tgroup-combo:hover > td { background: linear-gradient(90deg, #f3e8ff, #e9eef4); }
.ord-tgroup-unassigned > td { background: #fafbfc; }
.ord-tgroup-head { display: flex; align-items: center; gap: 9px; padding: 9px 14px; }
.ord-tgroup-chev { display: inline-flex; color: var(--text-muted); transition: transform .2s ease; }
.ord-tgroup-chev.is-collapsed { transform: rotate(-90deg); }
.ord-tgroup-check { width: 15px; height: 15px; cursor: pointer; flex: 0 0 auto; }
.ord-tgroup-dots { display: inline-flex; align-items: center; }
.ord-tdot {
    width: 10px; height: 10px; border-radius: 3px; display: inline-block;
    border: 1.5px solid #fff; margin-right: -3px; box-shadow: 0 0 0 1px rgba(15,23,42,.10);
}
.ord-tdot:last-child { margin-right: 0; }
.ord-tdot-un { background: #cbd5e1; }
.ord-tgroup-name { font-weight: 700; font-size: .9rem; color: var(--text); }
.ord-tgroup-combo .ord-tgroup-name { color: #0f172a; }
.ord-tgroup-unassigned .ord-tgroup-name { color: var(--text-muted); font-weight: 600; }
.ord-tgroup-badge {
    font-size: .62rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    background: #f3e8ff; color: #7e22ce; padding: 2px 7px; border-radius: 6px;
}
.ord-tgroup-count {
    margin-left: auto; font-size: .76rem; font-weight: 600; color: var(--text-muted);
    background: #e2e8f0; padding: 2px 10px; border-radius: 999px; font-variant-numeric: tabular-nums;
}
.ord-tgroup-combo .ord-tgroup-count      { background: #f3e8ff; color: #7e22ce; }
.ord-tgroup-unassigned .ord-tgroup-count { background: #fde68a; color: #92400e; }

/* ── Orders: merge hint chip (select mode) ───────────────────────── */
.ord-merge-hint {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 0.76rem; font-weight: 500; color: var(--blue-dk);
    background: var(--blue-xlt); border: 1px solid var(--blue-lt);
    padding: 4px 11px; border-radius: 999px; white-space: nowrap;
}

/* ── Orders: merged-tombstone toggle + survivor flag ─────────────── */
.ord-merged-toggle        { background: #faf5ff; color: #7e22ce; border-color: #e9d5ff; }
.ord-merged-toggle:hover  { background: #f3e8ff; }
.ord-merged-toggle.active { background: #7e22ce; color: #fff; border-color: transparent; }
.ord-merged-chip {
    display: inline-flex; align-items: center; gap: 4px; margin-left: 7px;
    font-size: 0.68rem; font-weight: 700; color: #7e22ce;
    background: #faf5ff; border: 1px solid #e9d5ff; border-radius: 999px;
    padding: 1px 8px; vertical-align: 1px;
}

/* Data rows */
.plt-row {
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background .12s;
}
.plt-row:hover { background: color-mix(in srgb, var(--blue) 5%, transparent); }
.plt-row td { padding: 10px 14px; vertical-align: middle; }
.plt-row-active td:first-child { box-shadow: inset 3px 0 0 var(--blue); }
.plt-row-active { background: color-mix(in srgb, var(--blue) 8%, transparent) !important; }
.ord-row-warn   td:first-child { box-shadow: inset 3px 0 0 #f59e0b; }
.ord-row-urgent td:first-child { box-shadow: inset 3px 0 0 #ef4444; }
.ord-row-urgent { background: #fff5f5; }
.plt-col-docno   { font-weight: 600; color: var(--blue); white-space: nowrap; }
.plt-col-type    { color: var(--text-muted); font-size: .8rem; white-space: nowrap; }
.plt-col-customer { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plt-col-date    { color: var(--text-muted); white-space: nowrap; }
.plt-col-lorry   { min-width: 140px; }
.plt-lorry-code  { font-weight: 700; color: var(--blue); display: block; }
.plt-lorry-trans { font-size: .78rem; color: var(--text-muted); display: block; margin-top: 1px; }
.plt-col-customers { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .85rem; }
.plt-done-check  { color: #16a34a; font-weight: 700; }
.plt-col-num     { text-align: center; }
.plt-col-pct     { min-width: 120px; }
.plt-pct-bar {
    height: 4px;
    background: var(--border);
    border-radius: 4px;
    margin-top: 4px;
    overflow: hidden;
}
.plt-pct-bar div {
    height: 100%;
    background: var(--blue);
    border-radius: 4px;
    transition: width .3s;
}

/* Action buttons */

/* Empty / loading */
.plt-empty   { padding: 40px !important; text-align: center; color: var(--text-muted); }
.plt-loading { padding: 40px; text-align: center; color: var(--text-muted); }

/* Stats bar above table */
.plt-stats-bar {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    padding: 7px 14px; margin-bottom: 8px;
    background: var(--card-bg); border: 1px solid var(--border);
    border-radius: 10px; font-size: 0.8rem;
}
.plt-stat { color: var(--text); }
.plt-stat strong { font-weight: 700; }
.plt-stat-sep { color: var(--border); }
.plt-stat-pending strong { color: #0ea5e9; }
.plt-stat-ongoing strong { color: #f59e0b; }
.plt-stat-done strong { color: #22c55e; }
.plt-stat-refresh { margin-left: auto; color: var(--text-muted); font-size: 0.75rem; }

/* ══════════════════════════════════════════════════════════════════════════
   ORDERS — SPLIT-VIEW REDESIGN
   ══════════════════════════════════════════════════════════════════════════ */

/* Split layout: list left, persistent panel right */
.ord-split-layout {
    display: flex;
    gap: 14px;
    height: calc(100vh - 56px); /* 56px = nav height */
    overflow: hidden;
    padding: 16px 20px;
    box-sizing: border-box;
    max-width: 1600px;
    margin: 0 auto;
}

/* Left column — order list */
.ord-list-col {
    width: 44%;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: hidden;
}

/* Right column — persistent detail */
.ord-detail-col {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--card-bg);
}

/* ── OrderDetailModal in inline mode ─────────────────────────────────────── */
.panel-inline {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}
.panel-inline .panel-header {
    flex-shrink: 0;
    border-bottom: 1px solid var(--border);
    padding: 16px 20px 12px;
}
.panel-inline .panel-tabs {
    flex-shrink: 0;
    padding: 0 16px;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
}
.panel-inline .panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
}

/* Empty right panel */
.ord-panel-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--text-muted);
    padding: 48px 24px;
    text-align: center;
}
.ord-panel-empty-icon { font-size: 2.5rem; }
.ord-panel-empty-text { font-weight: 600; font-size: 1rem; }
.ord-panel-empty-sub  { font-size: 0.82rem; max-width: 240px; }

/* ── Order list ──────────────────────────────────────────────────────────── */
.ord-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 2px 16px;
}

/* ── Order row card ──────────────────────────────────────────────────────── */
.ord-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--card-bg);
    border: 1.5px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, transform .1s;
    border-left-width: 4px;
    border-left-color: transparent;
}
.ord-row:hover {
    border-color: #94a3b8;
    box-shadow: 0 2px 8px rgba(0,0,0,.07);
}
.ord-row:active { transform: scale(.998); }
.ord-row-active {
    border-color: var(--blue) !important;
    box-shadow: 0 0 0 3px rgba(14,165,233,.12), 0 2px 8px rgba(0,0,0,.07) !important;
}

/* Urgency tinting via left border colour */
.ord-row-warn   { border-left-color: #f59e0b !important; }
.ord-row-urgent { border-left-color: #ef4444 !important; background: #fff5f5; }

/* Row body */
.ord-row-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ord-row-top {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
.ord-row-customer {
    font-size: 0.88rem;
    color: var(--text);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}
.ord-row-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    color: var(--text-muted);
    flex-wrap: wrap;
}
.ord-row-age {
    font-size: 0.7rem;
    color: #94a3b8;
}

/* Row right: badge + advance button */
.ord-row-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    flex-shrink: 0;
}

/* Single-tap advance button */
.ord-advance-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 6px;
    border: 1.5px solid #22c55e;
    background: #f0fdf4;
    color: #16a34a;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .12s, transform .1s;
    white-space: nowrap;
}
.ord-advance-btn:hover  { background: #dcfce7; }
.ord-advance-btn:active { transform: scale(.95); }

/* Checkbox column in select mode */
.ord-row-check {
    display: flex;
    align-items: center;
    padding-right: 4px;
}
/* Bulk select count badge */
.ord-sel-count {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--blue);
    background: #eff6ff;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid #bfdbfe;
}

/* Load more / footer */
.ord-load-more {
    padding: 8px 4px 4px;
    display: flex;
    justify-content: center;
}
.ord-list-footer {
    padding: 8px 4px 4px;
    text-align: center;
    font-size: 0.78rem;
    color: var(--text-muted);
}

/* ── Responsive: stack on narrow screens ─────────────────────────────────── */
@media (max-width: 960px) {
    .ord-split-layout {
        flex-direction: column;
        height: auto;
        overflow: visible;
        padding: 12px 16px;
    }
    .ord-list-col {
        width: 100%;
        max-height: 55vh;
        overflow-y: auto;
    }
    .ord-detail-col {
        min-height: 420px;
    }
}

/* ── Dashboard Charts ─────────────────────────────────────────── */
.db-chart-wrap { position: relative; margin-top: 4px; }
.db-chart-wrap canvas { display: block; width: 100% !important; }
.db-two-col-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; margin-bottom: 16px; }

/* nav group (expandable sidebar section) */
.nav-group-header {
    display: flex; align-items: center; gap: 9px;
    padding: 7px 10px; border-radius: 8px;
    font-size: 0.82rem; font-weight: 500; color: var(--text-muted);
    cursor: pointer; transition: background .12s, color .12s;
    user-select: none;
}
.nav-group-header:hover { background: var(--sidebar-hover); color: var(--text-secondary); }
.nav-group-header.open  { color: var(--text-secondary); }
.nav-group-chevron { margin-left: auto; font-size: 0.65rem; color: var(--border-strong); transition: transform .2s; }
.nav-group-header.open .nav-group-chevron { transform: rotate(90deg); }

.nav-sub { padding-left: 12px; overflow: hidden; display: flex; flex-direction: column; gap: 1px; }
.nav-sub-item {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 10px; border-radius: 7px;
    font-size: 0.79rem; font-weight: 500; color: var(--text-muted);
    cursor: pointer; text-decoration: none;
    border-left: 2px solid var(--border);
    margin-left: 8px;
    transition: background .12s, color .12s, border-color .12s;
}
.nav-sub-item:hover  { background: var(--sidebar-hover); color: var(--text-secondary); border-color: var(--border-strong); }
.nav-sub-item.active { color: var(--accent); font-weight: 600; border-color: var(--accent); background: rgba(59,130,246,.07); }
.nav-sub-icon { font-size: 0.85rem; width: 16px; text-align: center; flex-shrink: 0; }

/* ── Dark theme overrides ────────────────────────────────────── */
[data-theme="dark"] {
    /* Page */
    --page-bg:         #0f172a;
    --card-bg:         #1e293b;
    --border:          #334155;
    --border-dk:       #475569;
    --text:            #f1f5f9;
    --text-2:          #e2e8f0;
    --text-muted:      #94a3b8;
    --surface:         #1e293b;
    --text-primary:    #f1f5f9;
    --text-secondary:  #e2e8f0;
    --hover:           #334155;
    --border-strong:   #475569;
    --sidebar-hover:   rgba(255,255,255,0.06);

    /* Sidebar dark */
    --sb-bg:           #0f172a;
    --sb-border:       #1e293b;
    --sb-txt:          #94a3b8;
    --sb-active:       #1e293b;

    --sb-brand-name:   #ffffff;
    --sb-brand-sub:    #475569;
    --sb-hover-bg:     rgba(255,255,255,0.06);
    --sb-hover-color:  #e2e8f0;
    --sb-active-bg:    rgba(14,165,233,0.12);
    --sb-active-color: #ffffff;
    --sb-foot-name:    #e2e8f0;
    --sb-section-lbl:  #64748b;
}

/* ── Dashboard date-range filter ─────────────────────────────── */
.db-date-input {
    background: var(--card-bg, #1e293b);
    border: 1px solid var(--border, #334155);
    border-radius: 6px;
    color: var(--text, #e2e8f0);
    font-size: .78rem;
    padding: 4px 8px;
    height: 30px;
    cursor: pointer;
    outline: none;
    transition: border-color .15s;
    color-scheme: dark;
}
.db-date-input:focus,
.db-date-input:hover {
    border-color: var(--accent, #38bdf8);
}
.db-filter-label {
    font-size: .72rem;
    color: var(--text-muted, #64748b);
    white-space: nowrap;
}

/* ── User Preferences page ───────────────────────────────────── */
.pref-section {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 22px 24px;
    margin-bottom: 20px;
}
.pref-section-header {
    display: flex; align-items: flex-start; gap: 14px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}
.pref-section-icon { font-size: 1.4rem; margin-top: 1px; }
.pref-section-title { font-size: 0.98rem; font-weight: 700; color: var(--text); margin-bottom: 2px; }
.pref-section-desc  { font-size: 0.78rem; color: var(--text-muted); }

/* Theme picker grid */
.pref-theme-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.pref-theme-card {
    position: relative;
    background: var(--page-bg);
    border: 2px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
    text-align: left;
    transition: border-color .15s, box-shadow .15s;
}
.pref-theme-card:hover { border-color: var(--accent); }
.pref-theme-card.active {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(14,165,233,0.14);
}

/* Mini app preview */
.pref-theme-preview {
    width: 100%; height: 80px; border-radius: 8px;
    display: flex; overflow: hidden;
    margin-bottom: 12px;
    border: 1px solid rgba(0,0,0,0.08);
}
.pref-preview-light { background: #f1f5f9; }
.pref-preview-dark  { background: #0f172a; }

.pref-preview-light .ppt-sidebar { width: 36px; background: #ffffff; border-right: 1px solid #e2e8f0; flex-shrink: 0; }
.pref-preview-dark  .ppt-sidebar { width: 36px; background: #0f172a; border-right: 1px solid #1e293b; flex-shrink: 0; }

.ppt-body { flex: 1; padding: 6px 8px; display: flex; flex-direction: column; gap: 5px; }
.pref-preview-light .ppt-bar  { height: 10px; background: #ffffff; border-radius: 3px; border: 1px solid #e2e8f0; }
.pref-preview-dark  .ppt-bar  { height: 10px; background: #1e293b; border-radius: 3px; }
.pref-preview-light .ppt-card { flex: 1; background: #ffffff; border-radius: 4px; border: 1px solid #e2e8f0; }
.pref-preview-dark  .ppt-card { flex: 1; background: #1e293b; border-radius: 4px; }

.pref-theme-label { display: flex; flex-direction: column; gap: 2px; }
.pref-theme-name  { font-size: 0.88rem; font-weight: 600; color: var(--text); }
.pref-theme-desc  { font-size: 0.74rem; color: var(--text-muted); }

.pref-theme-check {
    position: absolute; top: 10px; right: 10px;
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--accent); color: #fff;
    font-size: 0.7rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}

/* ── Partially Dispatched badge (split orders) ───────────────────────────────── */
.badge-partial { background:#ffedd5; color:#9a3412; border:1px solid #fdba74; }

/* ── Partially Delivered badge (some legs delivered, some still out) ─────────── */
.badge-partial-delivered { background:#d1fae5; color:#065f46; border:1px solid #6ee7b7; }

/* ── Assign-Lorry recall warning (target lorry is out for delivery) ──────────── */
.ord-otw-warn {
    display:flex; align-items:flex-start; gap:10px;
    background:#fffbeb; border:1px solid #fde68a; border-left:4px solid #f59e0b;
    border-radius:0 8px 8px 0; padding:10px 13px; margin:4px 0 12px;
}
.ord-otw-warn-ic  { font-size:1.05rem; line-height:1.3; flex:0 0 auto; }
.ord-otw-warn-txt { font-size:0.85rem; color:#92400e; line-height:1.45; }
.btn-recall       { background:#f59e0b; color:#fff; border:1px solid #f59e0b; }
.btn-recall:hover { background:#d97706; border-color:#d97706; }
[data-theme="dark"] .ord-otw-warn     { background:rgba(245,158,11,.12); border-color:rgba(245,158,11,.35); }
[data-theme="dark"] .ord-otw-warn-txt { color:#fcd34d; }
[data-theme="dark"] .btn-recall       { background:#d97706; border-color:#d97706; }

/* ── Picking List dispatch button states ─────────────────────────────────── */
.plt-out-label { color:#3730a3; font-weight:700; font-size:0.78rem; white-space:nowrap; }
[data-theme="dark"] .plt-out-label { color:#c4b5fd; }

/* A disabled Dispatch button must read as disabled, not as an active green CTA */
.ld-dispatch-btn:disabled, .ld-dispatch-btn[disabled] {
    opacity: .45; cursor: not-allowed; box-shadow: none; filter: saturate(.4);
}

/* Fleet Board — collapse / expand a lorry's item details */
.fb-collapse-btn {
    background: none; border: none; cursor: pointer; padding: 3px; margin-right: 2px;
    color: var(--text-muted, #64748b); display: inline-flex; align-items: center; border-radius: 6px;
}
.fb-collapse-btn:hover { background: var(--hover, #f1f5f9); color: var(--text, #0f172a); }
.fb-collapse-btn:focus-visible { outline: 2px solid var(--blue, #0ea5e9); outline-offset: 1px; }
.fb-chevron { transition: transform .18s ease; }
.fb-chevron.open { transform: rotate(90deg); }
.ld-lorry-card.ld-collapsed .fb-line-table { display: none; }
.ld-lorry-card.ld-collapsed .ld-progress-row { margin-bottom: 4px; }
@media (prefers-reduced-motion: reduce) { .fb-chevron { transition: none; } }

/* Picking List — collapsible status groups (Pending / Ongoing / Done) */
.plt-group-toggle { cursor: pointer; user-select: none; }
.plt-group-toggle:hover .plt-group-label { filter: brightness(1.12); }
.plt-group-chevron { display: inline-block; transition: transform .15s ease; font-size: 0.85em; }
.plt-group-chevron.open { transform: rotate(90deg); }
.plt-row-hidden { display: none; }
@media (prefers-reduced-motion: reduce) { .plt-group-chevron { transition: none; } }

/* ── Resizable pop-up forms (modals + slide-over panels) ─────────────────── */
.ord-modal, .panel { resize: both; overflow: auto; min-width: 300px; min-height: 200px; }

/* ── Adjustable table columns (drag-grip injected by helpers.js) ─────────── */
.col-resizer {
    position: absolute; top: 0; right: 0; width: 7px; height: 100%;
    cursor: col-resize; user-select: none; z-index: 6; touch-action: none;
}
.col-resizer:hover { background: var(--blue, #0ea5e9); opacity: .5; }

/* ════════════════════════════════════════════════════════════════════════
   DARK THEME — overrides for components that hardcode light colours
   ════════════════════════════════════════════════════════════════════════ */
/* Status badges → soft translucent tints with light-tone text */
[data-theme="dark"] .badge-draft,
[data-theme="dark"] .badge-cancelled,
[data-theme="dark"] .badge-merged       { background:rgba(148,163,184,.16); color:#cbd5e1; }
[data-theme="dark"] .badge-ready,
[data-theme="dark"] .badge-readytopick   { background:rgba(56,189,248,.16);  color:#7dd3fc; }
[data-theme="dark"] .badge-picking       { background:rgba(251,191,36,.16);  color:#fcd34d; }
[data-theme="dark"] .badge-packed        { background:rgba(74,222,128,.16);  color:#86efac; }
[data-theme="dark"] .badge-dispatched    { background:rgba(129,140,248,.20); color:#c7d2fe; }
[data-theme="dark"] .badge-delivered     { background:rgba(74,222,128,.18);  color:#86efac; }
[data-theme="dark"] .badge-rejected      { background:rgba(248,113,113,.16); color:#fca5a5; }
[data-theme="dark"] .badge-partial       { background:rgba(251,146,60,.16);  color:#fdba74; border-color:rgba(251,146,60,.4); }
[data-theme="dark"] .badge-partial-delivered { background:rgba(16,185,129,.16); color:#6ee7b7; border-color:rgba(16,185,129,.4); }

/* Surfaces that hardcode #fff → use the theme surface token */
[data-theme="dark"] .ord-modal,
[data-theme="dark"] .ord-modal-header,
[data-theme="dark"] .ord-modal-footer,
[data-theme="dark"] .ord-modal-body,
[data-theme="dark"] .panel,
[data-theme="dark"] .panel-header,
[data-theme="dark"] .panel-header-v2,
[data-theme="dark"] .panel-body,
[data-theme="dark"] .user-dropdown,
[data-theme="dark"] .kebab-menu,
[data-theme="dark"] .ld-lorry-card,
[data-theme="dark"] .plt-header,
[data-theme="dark"] .pl-bulk-bar { background:var(--surface); color:var(--text); border-color:var(--border); }

/* Inputs / selects / textareas */
[data-theme="dark"] .form-control,
[data-theme="dark"] .fbar-search,
[data-theme="dark"] .plt-search,
[data-theme="dark"] .plt-status-sel,
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea { background-color:var(--surface); color:var(--text); border-color:var(--border-strong); }
[data-theme="dark"] .form-control::placeholder,
[data-theme="dark"] input::placeholder { color:var(--text-muted); }

/* Table headers / striped rows that hardcode light */
[data-theme="dark"] .fb-line-table th,
[data-theme="dark"] .plt-table thead th,
[data-theme="dark"] .panel-table th,
[data-theme="dark"] .db-table thead th { background:var(--hover); color:var(--text-muted); }
[data-theme="dark"] .plt-group-row { background:var(--hover); }

/* Smooth flip */
body { transition: background-color .25s ease, color .25s ease; }

/* ════════════════════════════════════════════════════════════════════════
   DARK THEME — stragglers found in a static CSS audit (hardcoded light values
   that the token block can't reach). Dark-only & additive — light mode unchanged.
   ════════════════════════════════════════════════════════════════════════ */
/* subtle #f8fafc / #f1f5f9 fills → dark hover surface */
[data-theme="dark"] .fbar,
[data-theme="dark"] .fbar-chip,
[data-theme="dark"] .fbar-chip-draft,
[data-theme="dark"] .pl-pill-draft,
[data-theme="dark"] .manage-order-row:hover,
[data-theme="dark"] .lorry-order:hover,
[data-theme="dark"] .lorry-group-header:hover,
[data-theme="dark"] .phv2-progress-pill.pill-empty,
[data-theme="dark"] .result-chip-skip,
[data-theme="dark"] .pitem-badge-empty,
[data-theme="dark"] .pitem-chips-ro .pitem-chip,
[data-theme="dark"] .inline-create-form,
[data-theme="dark"] .orders-summary-chip.chip-total {
    background: var(--hover); color: var(--text-2); border-color: var(--border);
}
[data-theme="dark"] .order-info-card-header:hover,
[data-theme="dark"] .fbar-chip-all:hover { background: var(--border); }

/* #fff surfaces → dark surface */
[data-theme="dark"] .pitem,
[data-theme="dark"] .order-info-card,
[data-theme="dark"] .order-info-card-header { background: var(--surface); color: var(--text); border-color: var(--border); }

/* Order info — delivery cards. --surface-2 is unset, so they fell back to #f8fafc. */
[data-theme="dark"] .del-card {
    background: var(--hover);
    border-color: var(--border);
    color: var(--text);
}
[data-theme="dark"] .del-trans,
[data-theme="dark"] .del-line { color: var(--text-muted); }

/* Assign Lorry — plate badge. --badge-bg is unset, so it stayed #e2e8f0 under light text. */
[data-theme="dark"] .asgn-lorry-tag {
    background: var(--border-strong);
    color: var(--text);
}

/* Fleet Board — lorry count pill. --bg-2 is unset, so it stayed #f1f5f9. */
[data-theme="dark"] .fb-section-count {
    background: var(--border-strong);
    color: var(--text);
}

/* Orders — Group by transporter chip. Background was hardcoded #fff. */
[data-theme="dark"] .ord-grp-switch {
    background: var(--border-strong);
    color: var(--text);
    border-color: var(--border);
}
[data-theme="dark"] .ord-grp-switch:hover {
    background: color-mix(in srgb, var(--border-strong) 78%, white);
}
[data-theme="dark"] .ord-grp-switch.on {
    color: var(--blue-dk);
    border-color: rgba(56,189,248,.45);
    background: var(--blue-xlt);
}

/* #eff6ff / #f0f9ff active & selected → dark blue tint */
[data-theme="dark"] .lorry-group-active .lorry-group-header,
[data-theme="dark"] .lorry-order-active,
[data-theme="dark"] .row-selected td,
[data-theme="dark"] .pl-select-toggle.active,
[data-theme="dark"] .pitem-progress {
    background: rgba(56,189,248,.14) !important; border-color: rgba(56,189,248,.4) !important;
}

/* tinted pills */
[data-theme="dark"] .phv2-progress-pill.pill-partial { background: rgba(251,191,36,.16); color: #fcd34d; }
[data-theme="dark"] .phv2-hint { color: #fdba74; }
[data-theme="dark"] .pitem-badge-progress           { background: rgba(56,189,248,.16); color: #7dd3fc; }
[data-theme="dark"] .pitem-title { color: var(--text); }
[data-theme="dark"] .pitem-sub { color: var(--text-2); }
[data-theme="dark"] .pitem-ordered { color: var(--text-muted); }
[data-theme="dark"] .pitem-done {
    background: rgba(74,222,128,.12);
    border-color: rgba(74,222,128,.4);
}
[data-theme="dark"] .panel-del-section-hdr {
    background: var(--hover);
    color: var(--text);
}
[data-theme="dark"] .panel-del-section-hdr .pl-docno,
[data-theme="dark"] .panel-del-section-hdr .lorry-order-name { color: var(--text); }
[data-theme="dark"] .pl-unassigned-note { color: #e9d5ff; }

/* hardcoded dark text → light */
[data-theme="dark"] .lorry-items-table td:first-child,
[data-theme="dark"] .del-alloc-desc,
[data-theme="dark"] .orders-summary-chip.chip-total { color: var(--text); }

/* Weight chips stayed light-blue / light-green, so light weight text vanished. */
[data-theme="dark"] .pitem-chip {
    background: rgba(56,189,248,.18);
    border-color: rgba(56,189,248,.45);
}
[data-theme="dark"] .pitem-chip-no { color: #7dd3fc; }
[data-theme="dark"] .pitem-chip-wt { color: #f8fafc; }
[data-theme="dark"] .pitem-chip-del { color: #cbd5e1; }
[data-theme="dark"] .pitem-chip-del:hover { color: #fca5a5; }
[data-theme="dark"] .pitem-weights-panel {
    background: rgba(74,222,128,.08);
    border-color: rgba(74,222,128,.35);
}

/* Orders transporter group headers — light fills were the same shade as --text */
[data-theme="dark"] .ord-tgroup-row > td { background: var(--hover); }
[data-theme="dark"] .ord-tgroup-row:hover > td { background: color-mix(in srgb, var(--hover) 82%, white); }
[data-theme="dark"] .ord-tgroup-combo > td { background: linear-gradient(90deg, #2e1065, var(--hover)); }
[data-theme="dark"] .ord-tgroup-combo:hover > td { background: linear-gradient(90deg, #3b0764, color-mix(in srgb, var(--hover) 82%, white)); }
[data-theme="dark"] .ord-tgroup-unassigned > td { background: var(--surface); }
[data-theme="dark"] .ord-tgroup-unassigned:hover > td { background: color-mix(in srgb, var(--surface) 55%, var(--hover)); }
[data-theme="dark"] .ord-tgroup-combo .ord-tgroup-name { color: #fff; }
[data-theme="dark"] .ord-tgroup-count { background: var(--border); color: var(--text-muted); }
[data-theme="dark"] .ord-tgroup-combo .ord-tgroup-count { background: rgba(168,85,247,.22); color: #fff; }
[data-theme="dark"] .ord-tgroup-unassigned .ord-tgroup-count { background: rgba(251,191,36,.16); color: #fcd34d; }
[data-theme="dark"] .ord-tgroup-badge { background: rgba(168,85,247,.22); color: #fff; }
[data-theme="dark"] .ord-tdot { border-color: var(--hover); box-shadow: none; }
[data-theme="dark"] .ord-tgroup-combo .ord-tdot { border-color: #2e1065; }
[data-theme="dark"] .ord-tgroup-unassigned .ord-tdot { border-color: var(--surface); }

/* Group header label only — white in dark mode. Doc numbers stay var(--blue). */
[data-theme="dark"] .plt-group-unassigned { color: #fff; }

/* Keep the printable Delivery Order on "paper" (white) even in dark mode */
[data-theme="dark"] .do-doc,
[data-theme="dark"] .do-print-area { background: #ffffff; color: #1e293b; }
[data-theme="dark"] .do-print-area .do-table td,
[data-theme="dark"] .do-print-area .do-meta-row strong { color: #1e293b; }

/* ── New / Edit Order modal — header & section polish ─────────────────────── */
.ord-titlewrap { display:flex; align-items:center; gap:11px; min-width:0; }
.ord-title-ic  { width:32px; height:32px; border-radius:9px; background:var(--blue-xlt); color:var(--blue-dk);
                 display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ord-title     { font-size:1.02rem; font-weight:800; color:var(--text); line-height:1.2; }
.ord-subtitle  { font-size:.74rem; color:var(--text-muted); margin-top:1px; font-weight:400; }
.ord-sec-ic    { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2;
                 stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.ord-modal-wide .panel-section-title { display:flex; align-items:center; gap:6px; }
.ord-error     { margin:0 0 14px; }
.ord-foot-note { margin-right:auto; font-size:.76rem; color:var(--text-muted); }

/* ── Dark theme — Fleet Board progress row (was hardcoded light #f8fafc) ──── */
[data-theme="dark"] .ld-progress-row              { background: var(--hover); border-color: var(--border); }
[data-theme="dark"] .ld-progress-bar              { background: var(--border); }
[data-theme="dark"] .ld-progress-label            { color: var(--text-2); }
[data-theme="dark"] .ld-lorry-ready .ld-progress-row { background: rgba(74,222,128,.12); }
[data-theme="dark"] .ld-banner                    { background: rgba(251,191,36,.12); color: #fcd34d; border-color: rgba(251,191,36,.3); }

/* ── Dark theme — straggler sweep, pass 2 (everything beyond the first audit) ── */
/* white surfaces → dark surface */
[data-theme="dark"] .orders-summary-bar,
[data-theme="dark"] .status-advance-menu,
[data-theme="dark"] .kbd-overlay,
[data-theme="dark"] .kbd-trigger { background: var(--surface); color: var(--text); border-color: var(--border); }
/* subtle fills → dark hover */
[data-theme="dark"] .del-unit-chip,
[data-theme="dark"] .status-advance-item:hover,
[data-theme="dark"] .kbd-trigger:hover,
[data-theme="dark"] .inbox-history-strip { background: var(--hover); border-color: var(--border); }
/* keyboard keys */
[data-theme="dark"] kbd { background: var(--hover); border-color: var(--border-strong); color: var(--text-2); box-shadow: 0 2px 0 var(--border-strong); }
/* light-tint chips → dark tints */
[data-theme="dark"] .orders-summary-chip.chip-pending,
[data-theme="dark"] .inbox-history-chip.chip-new    { background: rgba(251,191,36,.16); color: #fcd34d; }
[data-theme="dark"] .orders-summary-chip.chip-active,
[data-theme="dark"] .inbox-history-chip.chip-neutral,
[data-theme="dark"] .ord-sel-count                  { background: rgba(56,189,248,.16); color: #7dd3fc; border-color: rgba(56,189,248,.3); }
[data-theme="dark"] .orders-summary-chip.chip-done,
[data-theme="dark"] .inbox-history-chip.chip-good   { background: rgba(74,222,128,.16); color: #86efac; }
/* amber / blue banners */
[data-theme="dark"] .inbox-dup-banner,
[data-theme="dark"] .db-alert-card.alert-amber { background: rgba(251,191,36,.12); color: #fcd34d; border-color: rgba(251,191,36,.3); }
[data-theme="dark"] .db-alert-card.alert-blue  { background: rgba(56,189,248,.12); color: #7dd3fc; border-color: rgba(56,189,248,.3); }

/* ════════════════════════════════════════════════════════════════════════
   CHECKBOXES — one unified custom control across the whole app.
   Replaces the inconsistent native boxes (some bare, some with a no-op
   accent-color:var(--primary) — a token that was never defined).
   Token-driven so it adapts to light/dark automatically; placed LAST so it
   wins the equal-specificity tie with the generic [data-theme="dark"] input
   rule earlier in this file. An <input> can't host ::before/::after, so the
   tick/dash is drawn as an inline background SVG.
   ════════════════════════════════════════════════════════════════════════ */
input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin: 0;
    border: 1.5px solid var(--border-strong);
    border-radius: 5px;
    background-color: var(--surface);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 72%;
    cursor: pointer;
    vertical-align: middle;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

input[type="checkbox"]:hover:not(:disabled) {
    border-color: var(--accent);
}

input[type="checkbox"]:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.30);                 /* fallback */
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
}

input[type="checkbox"]:checked {
    background-color: var(--accent);
    border-color: var(--accent);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E");
}

input[type="checkbox"]:indeterminate {
    background-color: var(--accent);
    border-color: var(--accent);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M4 8h8'/%3E%3C/svg%3E");
}

input[type="checkbox"]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}