:root {
    --navy: #0b2e59;
    --navy-dark: #082140;
    --gold: #d4a527;
    --bg: #f4f6f9;
    --sidebar-w: 250px;
}

* { box-sizing: border-box; }
body { background: var(--bg); font-family: 'Segoe UI', Arial, sans-serif; }

/* ---------- App Shell ---------- */
.app-shell { display: flex; min-height: 100vh; }

.app-sidebar {
    width: var(--sidebar-w);
    background: linear-gradient(180deg, var(--navy) 0%, var(--navy-dark) 100%);
    color: #fff;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    overflow-y: auto;
    z-index: 1000;
    transition: transform .25s ease;
}
.sidebar-brand {
    display: flex; align-items: center; gap: 10px;
    padding: 20px 18px; font-weight: 700; font-size: 18px;
    border-bottom: 1px solid rgba(255,255,255,.1);
}
.sidebar-brand i { color: var(--gold); }
.sidebar-nav { display: flex; flex-direction: column; padding: 10px 0; }
.sidebar-nav a {
    color: rgba(255,255,255,.8); text-decoration: none;
    padding: 12px 20px; display: flex; align-items: center; gap: 12px;
    font-size: 14px; border-left: 3px solid transparent;
}
.sidebar-nav a:hover, .sidebar-nav a.active {
    background: rgba(255,255,255,.08); color: #fff; border-left-color: var(--gold);
}
.sidebar-nav a i { width: 18px; text-align: center; }

.app-main { flex: 1; margin-left: var(--sidebar-w); display: flex; flex-direction: column; min-height: 100vh; }
.app-topbar {
    background: #fff; padding: 14px 24px; display: flex; align-items: center;
    justify-content: space-between; box-shadow: 0 1px 3px rgba(0,0,0,.06);
    position: sticky; top: 0; z-index: 900;
}
.topbar-title { font-size: 18px; font-weight: 600; margin: 0; color: var(--navy); }
.btn-hamburger { background: none; border: none; font-size: 20px; color: var(--navy); }
.app-content { padding: 22px; flex: 1; }

@media (max-width: 991.98px) {
    .app-sidebar { transform: translateX(-100%); }
    .app-sidebar.show { transform: translateX(0); }
    .app-main { margin-left: 0; }
}

/* ---------- KPI Cards ---------- */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.kpi-card {
    background: #fff; border-radius: 10px; padding: 18px; display: flex; align-items: center; gap: 14px;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.kpi-card i { font-size: 26px; opacity: .85; }
.kpi-card span { display: block; font-size: 22px; font-weight: 700; color: #222; }
.kpi-card small { color: #777; font-size: 12px; }
.kpi-blue i { color: #0d6efd; } .kpi-purple i { color: #6f42c1; } .kpi-orange i { color: #fd7e14; }
.kpi-teal i { color: #20c997; } .kpi-green i { color: #198754; } .kpi-red i { color: #dc3545; }
.kpi-grey i { color: #6c757d; }

/* ---------- Cards ---------- */
.card { border: none; border-radius: 10px; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.card-header { background: #fff; border-bottom: 1px solid #eee; font-weight: 600; color: var(--navy); }
.report-card:hover { transform: translateY(-3px); transition: .15s; box-shadow: 0 4px 14px rgba(0,0,0,.1); }

/* ---------- Timeline ---------- */
.timeline { list-style: none; padding-left: 0; margin: 0; }
.timeline li { padding: 10px 0; border-left: 2px solid #eee; padding-left: 16px; margin-left: 6px; position: relative; }
.timeline li::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--navy); position: absolute; left: -6px; top: 14px; }
.timeline li:last-child { border-left-color: transparent; }

/* ---------- Driver pins on map ---------- */
.driver-pin {
    width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    color: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.driver-pin.online { background: #198754; }
.driver-pin.offline { background: #6c757d; }

/* ---------- Login ---------- */
.login-body { background: linear-gradient(135deg, var(--navy), var(--navy-dark)); min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.login-card { background: #fff; border-radius: 14px; padding: 34px; max-width: 400px; width: 100%; box-shadow: 0 10px 40px rgba(0,0,0,.3); }
.login-brand { text-align: center; margin-bottom: 24px; }
.login-brand i { color: var(--gold); }
.login-brand h1 { font-size: 20px; margin: 8px 0 2px; color: var(--navy); }

/* ---------- Public Tracking ---------- */
.tracking-body { background: var(--bg); min-height: 100vh; padding: 30px 16px; }
.tracking-wrap { max-width: 560px; margin: 0 auto; }

/* ---------- Driver PWA ---------- */
.driver-body { background: var(--bg); padding-bottom: 30px; }
.driver-topbar {
    background: var(--navy); color: #fff; padding: 14px 18px; font-weight: 700;
    display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 900;
}
.gps-status-bar { padding: 8px 18px; font-size: 13px; text-align: center; color: #fff; }
.gps-status-bar.gps-on { background: #198754; }
.gps-status-bar.gps-off { background: #6c757d; }
.gps-status-bar.gps-error { background: #dc3545; }
.driver-content { padding: 16px; }
.driver-parcel-card { background: #fff; border-radius: 10px; padding: 14px; margin-bottom: 12px; box-shadow: 0 1px 4px rgba(0,0,0,.08); }