/* ============================================================
   HAULION v3 — Clean Modern Fleet Management UI
   ============================================================ */

/* --- Design Tokens --- */
:root {
    --c-brand:      #1B3A6B;   /* deep navy — primary brand */
    --c-brand-mid:  #2952A3;   /* mid blue */
    --c-accent:     #E85D3A;   /* vivid orange-red */
    --c-green:      #1A7A45;
    --c-amber:      #B45309;
    --c-teal:       #0D7377;

    --c-bg:         #F1F4F9;
    --c-surface:    #FFFFFF;
    --c-surface2:   #F8F9FC;
    --c-border:     #E2E8F0;
    --c-border2:    #CBD5E1;

    --c-text:       #0F172A;
    --c-text-2:     #475569;
    --c-text-3:     #94A3B8;

    --sidebar-w:    248px;
    --topbar-h:     56px;
    --r-sm:         6px;
    --r-md:         10px;
    --r-lg:         14px;
    --shadow-sm:    0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
    --shadow-md:    0 4px 16px rgba(0,0,0,.08);
    --shadow-lg:    0 12px 40px rgba(0,0,0,.12);
    --transition:   150ms ease;
}

/* --- Reset --- */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:15px; -webkit-text-size-adjust:100%; }
body {
    font-family:'Barlow',system-ui,sans-serif;
    background:var(--c-bg);
    color:var(--c-text);
    line-height:1.55;
    min-height:100vh;
}
a { color:var(--c-brand); text-decoration:none; transition:color var(--transition); }
a:hover { color:var(--c-accent); }
button,input,select,textarea { font-family:inherit; font-size:inherit; }
img { max-width:100%; display:block; }

/* ============================================================
   LAYOUT
   ============================================================ */
.app-wrapper { display:flex; min-height:100vh; }

/* --- Sidebar --- */
.sidebar {
    width:var(--sidebar-w);
    background:var(--c-brand);
    display:flex;
    flex-direction:column;
    position:fixed;
    top:0; left:0; bottom:0;
    z-index:200;
    overflow-y:auto;
    overscroll-behavior:contain;
    transition:left .25s cubic-bezier(.4,0,.2,1);
}
.sidebar-logo {
    display:flex;
    align-items:center;
    gap:.6rem;
    padding:1.1rem 1.25rem;
    border-bottom:1px solid rgba(255,255,255,.1);
    font-family:'Barlow Condensed',sans-serif;
    font-size:1.35rem;
    font-weight:700;
    letter-spacing:.08em;
    color:#fff;
    flex-shrink:0;
}
.logo-icon { color:var(--c-accent); font-size:1.2rem; flex-shrink:0; }
.logo-text { flex:1; }
.sidebar-close { display:none; background:none; border:none; color:rgba(255,255,255,.5); font-size:1rem; cursor:pointer; padding:.2rem; border-radius:4px; }
.sidebar-close:hover { color:#fff; }

.sidebar-nav { flex:1; padding:.75rem 0; }
.nav-section {
    padding:.85rem 1.1rem .3rem;
    font-size:.65rem;
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:rgba(255,255,255,.35);
}
.nav-item {
    display:flex;
    align-items:center;
    gap:.7rem;
    padding:.58rem 1.1rem;
    color:rgba(255,255,255,.68);
    font-size:.875rem;
    font-weight:500;
    border-radius:0;
    transition:background var(--transition),color var(--transition);
    position:relative;
}
.nav-item:hover { background:rgba(255,255,255,.08); color:#fff; }
.nav-item.active {
    background:rgba(255,255,255,.12);
    color:#fff;
    font-weight:600;
}
.nav-item.active::before {
    content:'';
    position:absolute;
    left:0; top:20%; bottom:20%;
    width:3px;
    background:var(--c-accent);
    border-radius:0 3px 3px 0;
}
.nav-icon { font-size:.9rem; opacity:.85; flex-shrink:0; width:18px; text-align:center; display:inline-flex; align-items:center; justify-content:center; }

.sidebar-footer {
    padding:.9rem 1.1rem;
    border-top:1px solid rgba(255,255,255,.1);
    flex-shrink:0;
}
.user-info { display:flex; align-items:center; gap:.65rem; margin-bottom:.65rem; }
.user-avatar {
    width:32px; height:32px;
    border-radius:50%;
    background:var(--c-accent);
    color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-size:.8rem; font-weight:700;
    flex-shrink:0;
}
.user-name { font-size:.82rem; font-weight:600; color:#fff; line-height:1.2; }
.user-role { font-size:.72rem; color:rgba(255,255,255,.45); }
.logout-btn {
    display:block;
    text-align:center;
    padding:.4rem;
    border-radius:var(--r-sm);
    background:rgba(255,255,255,.06);
    color:rgba(255,255,255,.55);
    font-size:.78rem;
    font-weight:500;
    transition:all var(--transition);
}
.logout-btn:hover { background:rgba(232,93,58,.25); color:#fff; }

/* --- Main content --- */
.main-content { margin-left:var(--sidebar-w); flex:1; display:flex; flex-direction:column; min-height:100vh; min-width:0; }

/* --- Topbar --- */
.topbar {
    height:var(--topbar-h);
    background:var(--c-surface);
    border-bottom:1px solid var(--c-border);
    display:flex;
    align-items:center;
    padding:0 1.5rem;
    position:sticky;
    top:0; z-index:100;
    gap:1rem;
}
.topbar-left { display:flex; align-items:center; gap:.75rem; flex:1; min-width:0; }
.topbar-title {
    font-family:'Barlow Condensed',sans-serif;
    font-size:1.15rem;
    font-weight:700;
    letter-spacing:.05em;
    text-transform:uppercase;
    color:var(--c-brand);
    white-space:nowrap;
}
.topbar-right { display:flex; align-items:center; gap:.75rem; flex-shrink:0; }
.topbar-date { font-size:.78rem; color:var(--c-text-3); font-weight:500; }
.topbar-new-job {
    padding:.38rem .9rem;
    background:var(--c-brand);
    color:#fff;
    border-radius:var(--r-sm);
    font-size:.8rem;
    font-weight:600;
    transition:background var(--transition);
    white-space:nowrap;
}
.topbar-new-job:hover { background:var(--c-brand-mid); color:#fff; }

/* --- Mobile hamburger --- */
.hamburger {
    display:none;
    flex-direction:column;
    gap:4px;
    background:none;
    border:none;
    cursor:pointer;
    padding:6px;
    border-radius:var(--r-sm);
    flex-shrink:0;
}
.hamburger span { display:block; width:20px; height:2px; background:var(--c-text-2); border-radius:2px; }
.sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:199; }
.sidebar-overlay.visible { display:block; }

/* --- Page content --- */
.page-content { padding:1.5rem; flex:1; max-width:1400px; width:100%; }

/* ============================================================
   ALERTS
   ============================================================ */
.alert {
    display:flex;
    align-items:flex-start;
    gap:.75rem;
    padding:.85rem 1.1rem;
    border-radius:var(--r-md);
    margin-bottom:1.25rem;
    font-size:.875rem;
    font-weight:500;
    border:1px solid transparent;
}
.alert-success { background:#F0FDF4; color:#166534; border-color:#BBF7D0; }
.alert-error   { background:#FFF5F5; color:#991B1B; border-color:#FECACA; }
.alert-warning { background:#FFFBEB; color:#92400E; border-color:#FDE68A; }
.alert-close { margin-left:auto; background:none; border:none; cursor:pointer; opacity:.5; font-size:1rem; line-height:1; flex-shrink:0; padding:.1rem; }
.alert-close:hover { opacity:1; }

/* ============================================================
   CARDS
   ============================================================ */
.card {
    background:var(--c-surface);
    border-radius:var(--r-md);
    border:1px solid var(--c-border);
    box-shadow:var(--shadow-sm);
}
.card-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:.9rem 1.25rem;
    border-bottom:1px solid var(--c-border);
    gap:1rem;
    flex-wrap:wrap;
}
.card-header h2 {
    font-family:'Barlow Condensed',sans-serif;
    font-size:1rem;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--c-brand);
}
.card-body { padding:1.25rem; }

/* ============================================================
   STAT CARDS
   ============================================================ */
.stats-row {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(175px,1fr));
    gap:1rem;
    margin-bottom:1.25rem;
}
.stat-card {
    background:var(--c-surface);
    border:1px solid var(--c-border);
    border-radius:var(--r-md);
    padding:1.1rem 1.25rem;
    box-shadow:var(--shadow-sm);
    position:relative;
    overflow:hidden;
    border-top:3px solid var(--color, var(--c-brand));
}
.stat-card .s-label {
    font-size:.72rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.1em;
    color:var(--c-text-3);
    margin-bottom:.35rem;
}
.stat-card .s-value {
    font-family:'Barlow Condensed',sans-serif;
    font-size:2.1rem;
    font-weight:700;
    color:var(--c-text);
    line-height:1;
    margin-bottom:.25rem;
}
.stat-card .s-sub { font-size:.75rem; color:var(--c-text-3); }
.stat-card-link {
    display:block;
    text-decoration:none;
    color:inherit;
    cursor:pointer;
    transition:transform .15s ease, box-shadow .15s ease;
}
.stat-card-link:hover {
    transform:translateY(-2px);
    box-shadow:var(--shadow-md);
    color:inherit;
}
.stat-card-link:hover .s-arrow { opacity:1; transform:translateX(2px); }
.s-arrow {
    position:absolute;
    bottom:.85rem;
    right:.9rem;
    font-size:.7rem;
    color:var(--color, var(--c-brand));
    opacity:.3;
    transition:opacity .15s ease, transform .15s ease;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
    display:inline-flex;
    align-items:center;
    gap:.4rem;
    padding:.48rem 1rem;
    border-radius:var(--r-sm);
    font-size:.82rem;
    font-weight:600;
    cursor:pointer;
    border:1px solid transparent;
    transition:all var(--transition);
    white-space:nowrap;
    text-decoration:none;
    line-height:1.4;
}
.btn:hover { opacity:.88; transform:translateY(-1px); }
.btn:active { transform:none; }
.btn-primary   { background:var(--c-brand); color:#fff; border-color:var(--c-brand); }
.btn-primary:hover { background:var(--c-brand-mid); color:#fff; opacity:1; }
.btn-secondary { background:var(--c-surface2); color:var(--c-text-2); border-color:var(--c-border); }
.btn-danger    { background:#FFF5F5; color:#DC2626; border-color:#FECACA; }
.btn-danger:hover { background:#DC2626; color:#fff; opacity:1; }
.btn-success   { background:#F0FDF4; color:#166534; border-color:#BBF7D0; }
.btn-sm { padding:.3rem .7rem; font-size:.76rem; }
.btn-group { display:flex; gap:.4rem; flex-wrap:wrap; }

/* ============================================================
   TABLES
   ============================================================ */
.table-wrap { overflow-x:auto; }
table.tbl { width:100%; border-collapse:collapse; font-size:.85rem; }
table.tbl thead th {
    padding:.65rem 1rem;
    text-align:left;
    font-size:.68rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.09em;
    color:var(--c-text-3);
    background:var(--c-surface2);
    border-bottom:1px solid var(--c-border);
    white-space:nowrap;
}
table.tbl tbody td {
    padding:.72rem 1rem;
    border-bottom:1px solid var(--c-border);
    color:var(--c-text-2);
    vertical-align:middle;
}
table.tbl tbody tr:last-child td { border-bottom:none; }
table.tbl tbody tr:hover td { background:var(--c-surface2); }
table.tbl a { font-weight:600; color:var(--c-brand); }
table.tbl a:hover { color:var(--c-accent); }
/* Prevent table link colour overriding button styles inside tables */
table.tbl .btn { color:inherit; font-weight:600; }
table.tbl a.btn-primary,  table.tbl .btn-primary  { color:#fff !important; }
table.tbl a.btn-secondary,table.tbl .btn-secondary { color:var(--c-text-2) !important; }
table.tbl a.btn-danger,   table.tbl .btn-danger    { color:#DC2626 !important; }
.td-actions { white-space:nowrap; display:flex; gap:.3rem; align-items:center; padding:.5rem .9rem; }
.td-trunc { max-width:180px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ============================================================
   BADGES
   ============================================================ */
.badge {
    display:inline-flex;
    align-items:center;
    padding:.2rem .6rem;
    border-radius:20px;
    font-size:.7rem;
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;
    white-space:nowrap;
}
/* Status */
.badge-pending     { background:#FEF3C7; color:#92400E; }
.badge-active      { background:#DBEAFE; color:#1E40AF; }
.badge-completed   { background:#D1FAE5; color:#065F46; }
.badge-cancelled   { background:#F1F5F9; color:#64748B; }
.badge-confirmed   { background:#E0F2FE; color:#0C4A6E; border:1px solid #BAE6FD; }
.badge-in-transit  { background:#EDE9FE; color:#4C1D95; border:1px solid #DDD6FE; }
.badge-delivered   { background:#D1FAE5; color:#064E3B; border:1px solid #A7F3D0; }
/* Assets */
.badge-available   { background:#D1FAE5; color:#065F46; }
.badge-in-use      { background:#DBEAFE; color:#1E40AF; }
.badge-maintenance { background:#FEF3C7; color:#92400E; }
.badge-retired     { background:#F1F5F9; color:#64748B; }
/* Invoices */
.badge-paid        { background:#D1FAE5; color:#065F46; }
.badge-unpaid      { background:#FEF3C7; color:#92400E; }
.badge-overdue     { background:#FFF5F5; color:#DC2626; }
.badge-void        { background:#F1F5F9; color:#64748B; }
/* Drivers */
.badge-on-leave    { background:#EDE9FE; color:#5B21B6; }
.badge-inactive    { background:#F1F5F9; color:#64748B; }
/* Log */
.badge-created        { background:#D1FAE5; color:#065F46; }
.badge-updated        { background:#DBEAFE; color:#1E40AF; }
.badge-deleted        { background:#FFF5F5; color:#DC2626; }
.badge-status_changed { background:#FEF3C7; color:#92400E; }
.badge-note_added     { background:#EDE9FE; color:#5B21B6; }
.badge-load_added     { background:#ECFEFF; color:#155E75; }
.badge-lg { font-size:.8rem; padding:.3rem .9rem; }

/* ============================================================
   FORMS
   ============================================================ */
.form-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
    gap:1rem 1.25rem;
    padding:1.1rem 1.25rem;
}
.form-group { display:flex; flex-direction:column; gap:.35rem; }
.form-group label, .f-label {
    font-size:.72rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:var(--c-text-3);
}
.form-group input,
.form-group select,
.form-group textarea {
    padding:.55rem .85rem;
    border:1.5px solid var(--c-border);
    border-radius:var(--r-sm);
    background:var(--c-surface);
    color:var(--c-text);
    font-size:.9rem;
    transition:border-color var(--transition),box-shadow var(--transition);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline:none;
    border-color:var(--c-brand);
    box-shadow:0 0 0 3px rgba(27,58,107,.1);
}
.form-group input.readonly-fld,
input.readonly-fld { background:var(--c-surface2); color:var(--c-brand); font-weight:700; cursor:default; }
.form-full { grid-column:1/-1; }
.form-section-title {
    grid-column:1/-1;
    font-size:.7rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.12em;
    color:var(--c-text-3);
    padding-top:.5rem;
    border-top:1px solid var(--c-border);
    margin-top:.25rem;
}
.form-section-title:first-of-type { border-top:none; margin-top:0; padding-top:0; }
.form-actions {
    display:flex;
    gap:.6rem;
    padding:1rem 1.25rem;
    border-top:1px solid var(--c-border);
    background:var(--c-surface2);
    border-radius:0 0 var(--r-md) var(--r-md);
    flex-wrap:wrap;
}

/* Toggle */
.toggle-wrap { display:flex; align-items:center; gap:.6rem; padding-top:.35rem; }
.toggle-wrap input[type=checkbox] { display:none; }
.toggle { width:36px; height:20px; background:var(--c-border2); border-radius:20px; position:relative; cursor:pointer; transition:background var(--transition); flex-shrink:0; }
.toggle::after { content:''; position:absolute; width:14px; height:14px; background:#fff; border-radius:50%; top:3px; left:3px; transition:left var(--transition); box-shadow:0 1px 3px rgba(0,0,0,.2); }
.toggle-wrap input:checked + .toggle { background:var(--c-green); }
.toggle-wrap input:checked + .toggle::after { left:19px; }
.toggle-label-txt { font-size:.85rem; font-weight:500; color:var(--c-text-2); }

/* ============================================================
   FILTER TABS
   ============================================================ */
.filter-tabs { display:flex; gap:0; border-bottom:1px solid var(--c-border); padding:0 1.25rem; overflow-x:auto; }
.filter-tab {
    padding:.55rem 1rem;
    font-size:.8rem;
    font-weight:600;
    color:var(--c-text-3);
    border-bottom:2px solid transparent;
    white-space:nowrap;
    transition:color var(--transition),border-color var(--transition);
}
.filter-tab:hover { color:var(--c-brand); }
.filter-tab.active { color:var(--c-brand); border-color:var(--c-accent); }

/* ============================================================
   SEARCH INPUT
   ============================================================ */
.search-input {
    padding:.42rem .85rem;
    border:1.5px solid var(--c-border);
    border-radius:var(--r-sm);
    font-size:.83rem;
    background:var(--c-surface);
    color:var(--c-text);
    transition:border-color var(--transition);
    min-width:180px;
}
.search-input:focus { outline:none; border-color:var(--c-brand); }

/* ============================================================
   ESTIMATOR PANEL
   ============================================================ */
.estimator {
    background:linear-gradient(135deg,var(--c-brand) 0%,var(--c-brand-mid) 100%);
    padding:1rem 1.25rem;
}
.estimator h3 { font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:rgba(255,255,255,.85); margin-bottom:.75rem; }
.estimator-row { display:grid; grid-template-columns:repeat(auto-fill,minmax(155px,1fr)); gap:.75rem; align-items:end; }
.estimator .form-group label { color:rgba(255,255,255,.85) !important; font-weight:700; }
.estimator .form-group input {
    background:rgba(255,255,255,.12);
    border-color:rgba(255,255,255,.25);
    color:#fff !important;
}
.estimator .form-group input::placeholder { color:rgba(255,255,255,.45); }
.estimator .form-group input:focus { border-color:rgba(255,255,255,.7); box-shadow:none; background:rgba(255,255,255,.18); }
.estimator .readonly-fld { background:rgba(255,255,255,.08) !important; color:#fff !important; }
.estimator .btn-apply { background:var(--c-accent); color:#fff; border:none; width:100%; justify-content:center; font-size:.85rem; }
.estimator-status { font-size:.75rem; color:rgba(255,255,255,.7); margin-top:.4rem; min-height:1.2em; }
.estimator-status.loading { color:rgba(255,255,255,.5); }
.estimator-status.ok { color:#86EFAC; }
.estimator-status.err { color:#FCA5A5; }

/* ============================================================
   JOB DETAIL
   ============================================================ */
.job-layout { display:grid; grid-template-columns:1fr 280px; gap:1.25rem; align-items:start; }
.job-main   { display:flex; flex-direction:column; gap:1.25rem; }
.job-aside  { display:flex; flex-direction:column; gap:1.25rem; }

.job-hero {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    padding:1.1rem 1.25rem;
    flex-wrap:wrap;
    gap:1rem;
    border-bottom:1px solid var(--c-border);
}
.job-ref-label { font-size:.68rem; text-transform:uppercase; letter-spacing:.1em; color:var(--c-text-3); margin-bottom:.2rem; }
.job-ref-num { font-family:'Barlow Condensed',sans-serif; font-size:1.75rem; font-weight:700; color:var(--c-brand); }
.job-actions { display:flex; gap:.4rem; flex-wrap:wrap; }

.info-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); }
.info-section { padding:1rem 1.25rem; border-right:1px solid var(--c-border); border-bottom:1px solid var(--c-border); }
.info-section:last-child { border-right:none; }
.info-section h3 { font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--c-text-3); margin-bottom:.75rem; }
.info-dl { display:grid; grid-template-columns:auto 1fr; gap:.3rem .75rem; align-items:baseline; }
.info-dl dt { font-size:.75rem; color:var(--c-text-3); white-space:nowrap; }
.info-dl dd { font-size:.875rem; color:var(--c-text); font-weight:500; }

.status-bar {
    display:flex;
    align-items:center;
    gap:.85rem;
    padding:.8rem 1.25rem;
    border-top:1px solid var(--c-border);
    background:var(--c-surface2);
    font-size:.82rem;
    font-weight:600;
    color:var(--c-text-2);
    flex-wrap:wrap;
}

/* Financial colours */
.pos { color:var(--c-green); font-weight:700; }
.neg { color:#DC2626; font-weight:700; }

/* ============================================================
   MAP
   ============================================================ */
.map-container { height:380px; background:var(--c-surface2); position:relative; display:flex; align-items:center; justify-content:center; }
.map-loading { text-align:center; color:var(--c-text-3); }
.map-spinner { width:28px; height:28px; border:2px solid var(--c-border); border-top-color:var(--c-brand); border-radius:50%; animation:spin .8s linear infinite; margin:0 auto .5rem; }
@keyframes spin { to { transform:rotate(360deg); } }
.map-info { padding:.6rem 1.25rem; background:var(--c-surface2); border-top:1px solid var(--c-border); display:flex; gap:1.5rem; font-size:.8rem; color:var(--c-text-2); }
.map-marker-pin {
    width:26px; height:26px; border-radius:50% 50% 50% 0;
    transform:rotate(-45deg); display:flex; align-items:center; justify-content:center;
    font-size:.7rem; font-weight:700; color:#fff; box-shadow:0 2px 6px rgba(0,0,0,.25);
}
.pin-a { background:var(--c-brand); }
.pin-b { background:var(--c-accent); }

/* ============================================================
   WEATHER
   ============================================================ */
.weather-panels { display:grid; grid-template-columns:1fr 1fr; }
.weather-panel { padding:1.1rem 1.25rem; border-right:1px solid var(--c-border); }
.weather-panel:last-child { border-right:none; }
.wp-location { font-size:.78rem; font-weight:600; color:var(--c-text-2); margin-bottom:.2rem; }
.wp-date { font-size:.72rem; color:var(--c-text-3); margin-bottom:.85rem; }
.wp-loading { color:var(--c-text-3); font-size:.82rem; }
.wp-icon { font-size:2.2rem; margin-bottom:.25rem; }
.wp-desc { font-size:.9rem; font-weight:600; color:var(--c-text); margin-bottom:.6rem; }
.wp-stats { display:flex; flex-direction:column; gap:.25rem; }
.wp-stat { display:flex; justify-content:space-between; font-size:.78rem; color:var(--c-text-3); }
.wp-stat strong { color:var(--c-text-2); }
.wp-note { font-size:.72rem; color:var(--c-amber); margin-top:.4rem; background:#FFFBEB; padding:.25rem .5rem; border-radius:4px; }

/* ============================================================
   NOTES THREAD
   ============================================================ */
.notes-thread { padding:.75rem 1.25rem; display:flex; flex-direction:column; gap:.85rem; }
.notes-empty { color:var(--c-text-3); font-size:.85rem; text-align:center; padding:1rem 0; }
.note-item { display:flex; gap:.65rem; align-items:flex-start; }
.note-av { width:30px; height:30px; border-radius:50%; background:var(--c-brand); color:#fff; display:flex; align-items:center; justify-content:center; font-size:.75rem; font-weight:700; flex-shrink:0; }
.note-av.mine { background:var(--c-teal); }
.note-body { flex:1; }
.note-meta { display:flex; gap:.5rem; align-items:center; margin-bottom:.2rem; }
.note-meta strong { font-size:.82rem; color:var(--c-text); }
.note-time { font-size:.72rem; color:var(--c-text-3); }
.note-text { font-size:.85rem; color:var(--c-text-2); line-height:1.55; }
.note-del { margin-left:auto; background:none; border:none; cursor:pointer; color:var(--c-text-3); font-size:.7rem; padding:.15rem .35rem; border-radius:4px; }
.note-del:hover { background:#FFF5F5; color:#DC2626; }
.notes-add { padding:.75rem 1.25rem; border-top:1px solid var(--c-border); background:var(--c-surface2); }
.notes-add-row { display:flex; gap:.6rem; align-items:flex-start; }
.notes-add textarea { flex:1; padding:.5rem .75rem; border:1.5px solid var(--c-border); border-radius:var(--r-sm); font-size:.85rem; resize:vertical; min-height:56px; font-family:inherit; }
.notes-add textarea:focus { outline:none; border-color:var(--c-brand); }

/* ============================================================
   ACTIVITY LOG (sidebar + page)
   ============================================================ */
.log-list { padding:.4rem 0; }
.log-item { display:flex; gap:.6rem; padding:.6rem 1.25rem; border-bottom:1px solid var(--c-border); align-items:flex-start; }
.log-item:last-child { border-bottom:none; }
.log-dot { width:8px; height:8px; border-radius:50%; background:var(--c-text-3); margin-top:.4rem; flex-shrink:0; }
.log-dot-created { background:var(--c-green); }
.log-dot-updated { background:var(--c-brand); }
.log-dot-deleted { background:#DC2626; }
.log-dot-status_changed { background:var(--c-amber); }
.log-dot-note_added { background:var(--c-teal); }
.log-dot-load_added { background:var(--c-teal); }
.log-body { flex:1; min-width:0; }
.log-action { font-size:.8rem; font-weight:600; color:var(--c-text); text-transform:capitalize; }
.log-user, .log-detail, .log-ts { font-size:.73rem; color:var(--c-text-3); }
.log-detail { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ============================================================
   MODAL
   ============================================================ */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:300; display:flex; align-items:center; justify-content:center; padding:1rem; }
.modal-box { background:var(--c-surface); border-radius:var(--r-lg); padding:2rem; max-width:420px; width:100%; box-shadow:var(--shadow-lg); text-align:center; animation:modal-in .18s ease; }
@keyframes modal-in { from{transform:scale(.94);opacity:0} to{transform:scale(1);opacity:1} }
.modal-icon { font-size:2rem; margin-bottom:.65rem; color:var(--c-accent); }
.modal-box h3 { font-size:1.15rem; font-weight:700; color:var(--c-text); margin-bottom:.4rem; }
.modal-box p { font-size:.875rem; color:var(--c-text-2); line-height:1.6; margin-bottom:1.4rem; }
.modal-actions { display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; }

/* ============================================================
   TRAILER CAPACITY
   ============================================================ */
.capacity-bar-wrap { background:var(--c-surface2); border-radius:20px; height:10px; overflow:hidden; margin:.5rem 0; }
.capacity-bar { height:100%; border-radius:20px; background:var(--c-brand); transition:width .4s ease; }
.capacity-bar.warn { background:var(--c-amber); }
.capacity-bar.over { background:#DC2626; }
.capacity-pct { font-size:.75rem; color:var(--c-text-3); font-weight:600; }
.load-row { display:flex; align-items:center; gap:.75rem; padding:.7rem 1.25rem; border-bottom:1px solid var(--c-border); flex-wrap:wrap; }
.load-row:last-child { border-bottom:none; }
.load-badge { padding:.2rem .55rem; background:#ECFEFF; color:#155E75; border-radius:4px; font-size:.72rem; font-weight:700; }
.load-badge.backload { background:#EDE9FE; color:#5B21B6; }
.load-meta { flex:1; min-width:0; }
.load-meta strong { font-size:.85rem; color:var(--c-text); display:block; }
.load-meta span { font-size:.75rem; color:var(--c-text-3); }
.load-actions { flex-shrink:0; }

/* ============================================================
   DRIVER PROFILE
   ============================================================ */
.driver-hero { display:flex; align-items:center; gap:1rem; padding:1.1rem 1.25rem; flex-wrap:wrap; border-bottom:1px solid var(--c-border); }
.driver-av-lg { width:56px; height:56px; border-radius:50%; background:var(--c-brand); color:#fff; font-size:1.4rem; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.driver-info { flex:1; }
.driver-info h1 { font-size:1.4rem; font-weight:700; color:var(--c-text); margin-bottom:.3rem; }
.driver-info .tags { display:flex; gap:.35rem; flex-wrap:wrap; }
.driver-actions { flex-shrink:0; }
.driver-detail-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1.25rem; }
.driver-section { min-width:0; }
.detail-list { padding:.25rem 1.25rem .75rem; }
.dl-row { display:flex; gap:.6rem; padding:.48rem 0; border-bottom:1px solid var(--c-border); font-size:.85rem; align-items:flex-start; }
.dl-row:last-child { border-bottom:none; }
.dl-key { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--c-text-3); min-width:100px; max-width:120px; flex-shrink:0; padding-top:.15rem; line-height:1.4; }
.dl-val { color:var(--c-text); flex:1; min-width:0; word-break:break-word; line-height:1.5; }

/* Expiry tags */
.exp-ok      { color:var(--c-green); }
.exp-soon    { color:var(--c-amber); font-weight:600; }
.exp-expired { color:#DC2626; font-weight:700; }
.exp-tag { display:inline-block; padding:.15rem .5rem; border-radius:20px; font-size:.7rem; font-weight:700; }
.exp-tag.exp-ok      { background:#D1FAE5; color:#065F46; }
.exp-tag.exp-soon    { background:#FEF3C7; color:#92400E; }
.exp-tag.exp-expired { background:#FFF5F5; color:#DC2626; }

.missing-pill { font-size:.68rem; background:#FFF5F5; color:#DC2626; padding:.15rem .45rem; border-radius:20px; font-weight:700; }
.info-missing { font-size:.82rem; color:var(--c-amber); padding:.5rem 1.25rem .75rem; }

/* ============================================================
   DASHBOARD
   ============================================================ */
.dash-grid { display:grid; grid-template-columns:1fr 280px; gap:1.25rem; align-items:start; }
.dash-main  { display:flex; flex-direction:column; gap:1.25rem; }
.dash-side  { display:flex; flex-direction:column; gap:1.25rem; }
.qa-list    { padding:.5rem .75rem; display:flex; flex-direction:column; gap:.4rem; }
.qa-btn {
    display:flex; align-items:center; gap:.85rem;
    padding:.8rem 1rem;
    font-size:.875rem; font-weight:700;
    color:#fff;
    border-radius:var(--r-md);
    background:var(--c-brand);
    border:1px solid rgba(255,255,255,.1);
    transition:all .2s cubic-bezier(.4,0,.2,1);
    text-decoration:none;
    position:relative;
    overflow:hidden;
}
.qa-btn::before {
    content:'';
    position:absolute;
    inset:0;
    background:rgba(255,255,255,0);
    transition:background .2s;
}
.qa-btn:hover { transform:translateY(-2px) translateX(2px); box-shadow:0 6px 20px rgba(27,58,107,.3); color:#fff; opacity:1; }
.qa-btn:hover::before { background:rgba(255,255,255,.08); }
.qa-btn:active { transform:translateY(0); }
.qa-btn:nth-child(1) { background:linear-gradient(135deg,#1B3A6B,#2952A3); }
.qa-btn:nth-child(2) { background:linear-gradient(135deg,#1A7A45,#2D9A5A); }
.qa-btn:nth-child(3) { background:linear-gradient(135deg,#0D7377,#14A8AE); }
.qa-btn:nth-child(4) { background:linear-gradient(135deg,#7C3AED,#9F67FA); }
.qa-btn:nth-child(5) { background:linear-gradient(135deg,#B45309,#D97706); }
.qa-btn:nth-child(6) { background:linear-gradient(135deg,#E85D3A,#F97316); }
.qa-btn-icon { font-size:1rem; flex-shrink:0; width:20px; text-align:center; display:inline-flex; align-items:center; justify-content:center; opacity:.9; }
.qa-btn-text { flex:1; }
.qa-btn-text strong { display:block; font-size:.88rem; color:#fff; }
.qa-btn-text span { font-size:.72rem; color:rgba(255,255,255,.65); font-weight:500; }
.expiry-alert { border-left:3px solid var(--c-amber); }
.expiry-row { display:flex; align-items:center; gap:.75rem; padding:.6rem 1.25rem; border-bottom:1px solid var(--c-border); flex-wrap:wrap; }
.expiry-row:last-child { border-bottom:none; }
.expiry-name { font-size:.85rem; font-weight:600; color:var(--c-text); min-width:140px; }
.expiry-tags { display:flex; gap:.35rem; flex-wrap:wrap; }

/* Activity feed */
.activity-list { padding:.35rem 0; }
.activity-item { display:flex; gap:.6rem; padding:.55rem 1.25rem; border-bottom:1px solid var(--c-border); font-size:.8rem; }
.activity-item:last-child { border-bottom:none; }
.act-dot { width:7px; height:7px; border-radius:50%; margin-top:.35rem; flex-shrink:0; background:var(--c-text-3); }
.act-created { background:var(--c-green); } .act-updated { background:var(--c-brand); }
.act-deleted { background:#DC2626; } .act-status_changed { background:var(--c-amber); }
.act-note_added,.act-load_added { background:var(--c-teal); }
.act-body { flex:1; line-height:1.45; }
.act-user { font-weight:600; color:var(--c-text); }
.act-time { font-size:.7rem; color:var(--c-text-3); margin-top:.1rem; }

/* ============================================================
   REVENUE DASHBOARD
   ============================================================ */
.rev-kpis { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:1rem; margin-bottom:1.25rem; }
.rev-period-bar { display:flex; align-items:center; gap:.5rem; padding:.6rem 1.25rem; border-bottom:1px solid var(--c-border); background:var(--c-surface2); }
.rev-period-btn {
    padding:.35rem .85rem;
    border-radius:20px;
    font-size:.78rem;
    font-weight:600;
    border:1px solid var(--c-border);
    background:var(--c-surface);
    color:var(--c-text-3);
    cursor:pointer;
    transition:all var(--transition);
    text-decoration:none;
}
.rev-period-btn.active, .rev-period-btn:hover { background:var(--c-brand); color:#fff; border-color:var(--c-brand); }
.rev-table-num { text-align:right; font-family:'Barlow Condensed',sans-serif; font-size:1rem; font-weight:700; color:var(--c-text); }
.rev-bar-cell { width:160px; }
.rev-mini-bar { height:6px; border-radius:3px; background:var(--c-brand); min-width:2px; }
.top-customer-rank { font-family:'Barlow Condensed',sans-serif; font-size:1.3rem; font-weight:700; color:var(--c-text-3); width:28px; text-align:center; }

/* ============================================================
   PAGINATION
   ============================================================ */
.pagination { display:flex; gap:.3rem; padding:.85rem 1.25rem; justify-content:center; border-top:1px solid var(--c-border); }
.page-btn { padding:.32rem .7rem; border-radius:var(--r-sm); font-size:.8rem; font-weight:600; background:var(--c-surface2); border:1px solid var(--c-border); color:var(--c-text-2); cursor:pointer; text-decoration:none; }
.page-btn:hover, .page-btn.active { background:var(--c-brand); color:#fff; border-color:var(--c-brand); }

/* ============================================================
   LOGIN PAGE
   ============================================================ */
/* ══════════════════════════════════════════════════════════════
   AUTH PAGES — centred card layout
   ══════════════════════════════════════════════════════════════ */
body.login-page {
    padding: 0;
    margin: 0;
    min-height: 100vh;
    background: linear-gradient(160deg, #0a1628 0%, #0f2240 45%, #1B3A6B 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: 'Barlow', sans-serif;
}
body.login-page::before {
    content: '';
    position: fixed;
    top: -120px; right: -120px;
    width: 480px; height: 480px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(232,93,58,.14) 0%, transparent 70%);
    pointer-events: none; z-index: 0;
}
body.login-page::after {
    content: '';
    position: fixed;
    bottom: -100px; left: -100px;
    width: 400px; height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(27,58,107,.5) 0%, transparent 70%);
    pointer-events: none; z-index: 0;
}

/* ── Auth wrapper ────────────────────────────────────────────── */
.auth-wrap {
    position: relative; z-index: 1;
    width: 100%;
    max-width: 440px;
    padding: 1.5rem 1rem 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ── Logo header ─────────────────────────────────────────────── */
.auth-logo {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: 2rem;
    text-decoration: none;
}
.auth-logo-icon {
    width: 40px; height: 40px;
    background: rgba(232,93,58,.2);
    border: 1.5px solid rgba(232,93,58,.4);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    color: #E85D3A; font-size: 1.15rem;
}
.auth-logo-text {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.6rem; font-weight: 800;
    letter-spacing: .1em; color: #fff;
}

/* ── Card ────────────────────────────────────────────────────── */
.auth-card {
    width: 100%;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 20px 60px rgba(0,0,0,.35), 0 4px 16px rgba(0,0,0,.2);
    overflow: hidden;
}
.auth-card-header {
    padding: 1.75rem 2rem 1.25rem;
    border-bottom: 1px solid #f1f4f9;
}
.auth-card-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.6rem; font-weight: 800;
    color: #0f2240; letter-spacing: .02em;
    margin: 0 0 .2rem;
}
.auth-card-sub {
    font-size: .85rem;
    color: #64748b;
    margin: 0;
}
.auth-card-body {
    padding: 1.5rem 2rem 2rem;
}

/* ── Admin badge ─────────────────────────────────────────────── */
.auth-admin-badge {
    display: flex; align-items: center; gap: .6rem;
    background: #fef3c7; border: 1px solid #fcd34d;
    border-radius: 8px; padding: .6rem .9rem;
    font-size: .82rem; color: #92400e;
    margin-bottom: 1.25rem;
}

/* ── Alerts ──────────────────────────────────────────────────── */
.auth-error {
    display: flex; align-items: flex-start; gap: .5rem;
    padding: .75rem 1rem;
    background: #fef2f2; border: 1px solid #fecaca;
    color: #991b1b; border-radius: 8px;
    font-size: .87rem; line-height: 1.5;
    margin-bottom: 1.25rem;
}
.auth-warn {
    display: flex; align-items: flex-start; gap: .5rem;
    padding: .75rem 1rem;
    background: #fffbeb; border: 1px solid #fcd34d;
    color: #92400e; border-radius: 8px;
    font-size: .87rem; line-height: 1.5;
    margin-bottom: 1.25rem;
}
.auth-success {
    display: flex; align-items: flex-start; gap: .5rem;
    padding: .75rem 1rem;
    background: #f0fdf4; border: 1px solid #86efac;
    color: #166534; border-radius: 8px;
    font-size: .87rem; line-height: 1.5;
    margin-bottom: 1.25rem;
}

/* ── Fields ──────────────────────────────────────────────────── */
.auth-field { margin-bottom: 1rem; }
.auth-field label {
    display: block;
    font-size: .7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .08em;
    color: #475569; margin-bottom: .35rem;
}
.auth-field input {
    width: 100%; padding: .7rem .9rem;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    font-size: .93rem; font-family: inherit;
    color: #1a1a2e; background: #fff;
    transition: border-color .15s, box-shadow .15s;
    box-sizing: border-box;
}
.auth-field input:focus {
    outline: none;
    border-color: #1B3A6B;
    box-shadow: 0 0 0 3px rgba(27,58,107,.09);
}
.auth-field-row {
    display: flex; justify-content: space-between;
    align-items: center; margin-bottom: .35rem;
}
.auth-field-row label { margin-bottom: 0; }
.auth-field-hint { font-size: .72rem; color: #94a3b8; margin-top: .25rem; }
.auth-field-err  { font-size: .75rem; color: #dc2626; font-weight: 600; margin-top: .25rem; }
.auth-forgot {
    font-size: .78rem; color: #94a3b8;
    text-decoration: none;
}
.auth-forgot:hover { color: #1B3A6B; }

/* ── Submit ──────────────────────────────────────────────────── */
.auth-submit {
    width: 100%; padding: .85rem;
    background: #1B3A6B; color: #fff;
    border: none; border-radius: 10px;
    font-size: .97rem; font-weight: 700;
    font-family: inherit; cursor: pointer;
    margin-top: 1.25rem;
    display: flex; align-items: center; justify-content: center; gap: .45rem;
    transition: background .15s, transform .1s, box-shadow .15s;
    text-decoration: none;
}
.auth-submit:hover {
    background: #152d56;
    box-shadow: 0 4px 16px rgba(27,58,107,.35);
    transform: translateY(-1px);
}
.auth-submit:active { transform: none; }
.auth-submit.danger { background: #dc2626; }
.auth-submit.danger:hover { background: #b91c1c; box-shadow: 0 4px 16px rgba(220,38,38,.3); }

/* ── Footer link ─────────────────────────────────────────────── */
.auth-footer {
    text-align: center;
    margin-top: 1.5rem;
    font-size: .83rem;
    color: rgba(255,255,255,.5);
}
.auth-footer a { color: rgba(255,255,255,.8); font-weight: 600; text-decoration: none; }
.auth-footer a:hover { color: #fff; }

/* ── Divider ─────────────────────────────────────────────────── */
.auth-divider {
    text-align: center;
    margin: 1.25rem 0 0;
    font-size: .82rem; color: #94a3b8;
}
.auth-divider a { color: #1B3A6B; font-weight: 600; }

/* ── Tag line under logo ─────────────────────────────────────── */
.auth-tagline {
    font-size: .73rem;
    color: rgba(255,255,255,.35);
    letter-spacing: .18em;
    text-transform: uppercase;
    margin-top: -.5rem;
    margin-bottom: 2rem;
}

/* ── Mobile ──────────────────────────────────────────────────── */
@media (max-width: 500px) {
    .auth-wrap { padding: 1.25rem .75rem 2rem; }
    .auth-logo { margin-bottom: 1.5rem; }
    .auth-card-header { padding: 1.25rem 1.25rem 1rem; }
    .auth-card-body { padding: 1.25rem 1.25rem 1.5rem; }
    .auth-card { border-radius: 14px; }
    input { font-size: 16px !important; }
}

/* ── Keep old login-submit class working on any pages not yet migrated ── */
.login-submit { width:100%; margin-top:1.25rem; padding:.8rem; background:var(--c-brand); color:#fff; border:none; border-radius:8px; font-size:.95rem; font-weight:700; cursor:pointer; letter-spacing:.04em; transition:background .15s; display:block; text-align:center; text-decoration:none; }
.login-submit:hover { background:var(--c-brand-mid); }

.alert-collapse-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: .8rem 1.1rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--c-text);
    font-size: .88rem;
    text-align: left;
    gap: .75rem;
}
.alert-collapse-btn:hover { background: var(--c-surface2); }

.alert-collapse-left  { display: flex; align-items: center; gap: .55rem; flex: 1; }
.alert-collapse-right { display: flex; align-items: center; gap: .75rem; flex-shrink: 0; }

/* Pulsing severity dot */
.alert-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}
.alert-dot-red   { background: #EF4444; box-shadow: 0 0 0 3px rgba(239,68,68,.2); animation: pulse-red 1.8s infinite; }
.alert-dot-amber { background: #F59E0B; box-shadow: 0 0 0 3px rgba(245,158,11,.2); }
@keyframes pulse-red {
    0%, 100% { box-shadow: 0 0 0 3px rgba(239,68,68,.2); }
    50%       { box-shadow: 0 0 0 6px rgba(239,68,68,.05); }
}

/* Count badge next to title */
.alert-badge {
    font-size: .65rem;
    font-weight: 700;
    padding: .15rem .5rem;
    border-radius: 20px;
    letter-spacing: .04em;
}
.alert-badge-red   { background: #FEE2E2; color: #B91C1C; }
.alert-badge-amber { background: #FEF3C7; color: #92400E; }

/* Chevron spin */
.alert-chevron {
    color: var(--c-text-3);
    font-size: .72rem;
    transition: transform .25s ease;
}

.alert-body {
    padding: 0 1.1rem 1rem;
    border-top: 1px solid var(--c-border);
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — mobile, tablet, and desktop refinements
   Breakpoints: 480 / 640 / 768 / 960 / 1100
   ══════════════════════════════════════════════════════════════ */

/* ── Base resets ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
img, video, svg { max-width: 100%; height: auto; }

/* ── Table: always scroll horizontally ──────────────────────── */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl { min-width: 540px; }

/* ── Filter tabs: horizontal scroll, no wrap ────────────────── */
.filter-tabs {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; flex-wrap: nowrap !important;
}
.filter-tabs::-webkit-scrollbar { display: none; }

/* ── Print: hide chrome ──────────────────────────────────────── */
@media print {
    .sidebar, .topbar, .sidebar-overlay, .jv-header-actions { display: none !important; }
    .main-content { margin-left: 0 !important; }
    .page-content { padding: 0 !important; }
}

/* ── ≤1100px  tablet landscape ──────────────────────────────── */
@media (max-width: 1100px) {
    .dash-grid, .db-grid { grid-template-columns: 1fr; }
    .jv-wrap { grid-template-columns: 1fr; }
    .jv-kpi-row { grid-template-columns: repeat(2, 1fr); }
    .jv-kpi:nth-child(2) { border-right: none; }
    .jv-kpi:nth-child(1),
    .jv-kpi:nth-child(2) { border-bottom: 1px solid var(--c-border); }
    .jf-wrap { grid-template-columns: 1fr; }
    .jf-aside { display: contents; }
    .jf-aside > * { display: flex; flex-direction: column; }
}

/* ── ≤960px  tablet portrait ─────────────────────────────────── */
@media (max-width: 960px) {
    .db-side { display: grid; grid-template-columns: 1fr 1fr; }
    .db-kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .info-grid { grid-template-columns: 1fr 1fr; }
    .driver-detail-grid { grid-template-columns: 1fr; }
}

/* ── ≤768px  mobile landscape / small tablet ─────────────────── */
@media (max-width: 768px) {
    /* Sidebar: slide in from left */
    .sidebar {
        position: fixed; top: 0; left: -var(--sidebar-w, 248px);
        left: -248px; height: 100vh; z-index: 200;
        transition: left .25s cubic-bezier(.4,0,.2,1);
    }
    .sidebar.open { left: 0; }
    .sidebar-close { display: block; }
    .main-content { margin-left: 0; }
    .topbar { left: 0 !important; padding: 0 1rem; }

    /* Page content */
    .page-content { padding: 1rem; }
    .page-header { flex-direction: column; align-items: flex-start; gap: .65rem; }
    .page-header .btn { width: 100%; justify-content: center; }
    .page-title { font-size: 1.3rem; }

    /* Card tweaks */
    .card { border-radius: 10px; }
    .card-header { padding: .85rem 1rem; flex-wrap: wrap; gap: .5rem; }
    .card-header h2 { font-size: .95rem; }

    /* Settings tabs wrap */
    .settings-tab-nav { flex-wrap: wrap; gap: .3rem; }
    .settings-tab { padding: .45rem .75rem; font-size: .8rem; }

    /* Job view header actions: wrap and stack nicely */
    .jv-header-actions { gap: .4rem; }
    .jv-status-form { width: 100%; justify-content: flex-end; margin-left: 0 !important; border-top: 1px solid var(--c-border); padding-top: .6rem; }
    .jv-status-form select { flex: 1; }

    /* Job view 2-col grids collapse */
    .jv-kpi-row { grid-template-columns: repeat(2, 1fr); }
    .jv-route { grid-template-columns: 1fr; }
    .jv-route-col.delivery { border-left: none; border-top: 1px solid var(--c-border); }
    .jv-route-connector { display: none; }
    
    /* Dashboard side panel stacks */
    .db-side { display: flex; flex-direction: column; }

    /* Touch targets */
    .btn { min-height: 40px; }
    .btn-sm { min-height: 34px; }

    /* Table columns: tighter on tablet */
    .tbl td, .tbl th { padding: .5rem .75rem; font-size: .83rem; }

    /* Admin grids */
    .admin-grid-2, .admin-grid-3 { grid-template-columns: 1fr !important; }
    .kpi-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── ≤640px  mobile ──────────────────────────────────────────── */
@media (max-width: 640px) {
    .page-content { padding: .85rem; }

    /* Stats / KPI grids */
    .stats-row, .db-kpi-grid { grid-template-columns: 1fr 1fr !important; gap: .65rem; }
    .stat-card { padding: .85rem; }
    .s-value { font-size: 1.5rem !important; }
    .db-kpi-value { font-size: 1.4rem; }
    .jv-kpi-row { grid-template-columns: 1fr 1fr; }

    /* Job form route grid */
    .jf-route-grid { grid-template-columns: 1fr; }
    .jf-route-col:first-child { border-radius: 8px 8px 0 0; }
    .jf-route-col:last-child  { border-radius: 0 0 8px 8px; border-left: none !important; border-top: 1px solid var(--c-border); }
    .jf-grid-2, .jf-grid-3 { grid-template-columns: 1fr; }
    .jf-route-dates { grid-template-columns: 1fr 1fr; }

    /* Customer+assignment row in job view */
    .jv-ca-grid { grid-template-columns: 1fr !important; }

    /* Auth / register */
    .auth-card-header { padding: 1.25rem 1.25rem 1rem; }
    .auth-card-body { padding: 1.25rem; }
    .auth-grid { grid-template-columns: 1fr !important; }
    .auth-grid-full { grid-column: 1 !important; }
    .auth-plan-tabs { flex-wrap: wrap; }
    .tm-plans { grid-template-columns: 1fr 1fr !important; }

    /* Tables: hide lower-priority columns */
    .tbl .hide-mobile { display: none; }
    .tbl td, .tbl th { padding: .45rem .55rem; font-size: .8rem; }

    /* Modal */
    .modal-box { padding: 1.5rem 1.25rem; }
}

/* ── ≤480px  small phones ────────────────────────────────────── */
@media (max-width: 480px) {
    .page-content { padding: .65rem; }
    .topbar { padding: 0 .75rem; }
    .topbar-date { display: none; } /* hide date on tiny screens — clock only */
    .topbar-new-job { display: none; } /* use the nav instead */
    
    .db-kpi-grid { grid-template-columns: 1fr 1fr !important; gap: .5rem; }
    .db-kpi-icon { display: none; }
    .db-kpi-value { font-size: 1.25rem; }

    .jv-kpi-row { grid-template-columns: 1fr 1fr; }
    .jv-kpi { padding: .65rem .75rem; }
    .jv-kpi-val { font-size: 1rem; }

    /* Trial plan picker */
    .tm-plans { grid-template-columns: 1fr !important; }
    .tm-header { padding: 1.25rem; }
    .tm-body { padding: 1rem; }

    /* Note: iOS zoom prevention - inputs need 16px min */
    input, select, textarea { font-size: 16px !important; }
    .auth-card-body input,
    .auth-card-body select { font-size: 16px !important; }
}

/* ── Pointer: coarse (touch devices — enlarge tap targets) ───── */
@media (pointer: coarse) {
    .btn { min-height: 44px; }
    .btn-sm { min-height: 38px; }
    .nav-item { min-height: 44px; }
    .filter-tab, .db-status-tab, .jobs-status-tab { min-height: 36px; padding-top: .45rem; padding-bottom: .45rem; }
    select, input[type=date], input[type=time] { min-height: 44px; }
    .trailer-select-card { min-height: 70px; }
}

/* ── Topbar hamburger visibility ─────────────────────────────── */
.hamburger { display: none; }
@media (max-width: 768px) {
    .hamburger { display: flex; align-items: center; }
}

/* ── ac-dropdown scroll ──────────────────────────────────────── */
.ac-dropdown li:last-child { border-bottom: none !important; }
.ac-dropdown::-webkit-scrollbar { width: 5px; }
.ac-dropdown::-webkit-scrollbar-track { background: #f8fafc; border-radius: 9px; }
.ac-dropdown::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 9px; }
.jf-route-col { overflow: visible !important; }
.jf-field { overflow: visible !important; }