:root{--brand:#084298;--brand2:#0d6efd;--cream:#e7f1ff;--ink:#273142;--muted:#6b7280;--line:#d7e7ff}
html{font-size:15px}body{background:#f5f7fb;color:var(--ink);padding-bottom:68px}.app-navbar{background:linear-gradient(120deg,var(--brand),var(--brand2))}.page-title{font-weight:800;letter-spacing:-.02em}.card{border:0;border-radius:18px;box-shadow:0 5px 24px rgba(21,35,54,.06)}.stat-card{min-height:125px}.stat-card .icon{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--cream);font-size:1.35rem;color:var(--brand2)}.stat-value{font-size:1.75rem;font-weight:800}.table-card{overflow:hidden}.table{margin-bottom:0}.table thead th{white-space:nowrap;background:#fafafa;color:#667085;font-size:.8rem;text-transform:uppercase;letter-spacing:.03em}.badge-soft{background:#fff3cd;color:#7a5800}.customer-card{transition:.2s}.customer-card:hover{transform:translateY(-2px)}.route-seq{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--brand2);color:white;font-weight:700}.form-control,.form-select{border-radius:10px;min-height:44px}.btn{border-radius:10px}.btn-brand{background:var(--brand2);border-color:var(--brand2);color:#fff}.btn-brand:hover{background:var(--brand);border-color:var(--brand);color:#fff}.invoice-sheet{max-width:850px;margin:auto;background:#fff;padding:28px;border-radius:18px}.mobile-bottom-nav{position:fixed;bottom:0;left:0;right:0;z-index:1040;background:#fff;border-top:1px solid #e5e7eb;display:flex;justify-content:space-around;padding:7px 2px env(safe-area-inset-bottom);box-shadow:0 -4px 18px rgba(0,0,0,.06)}.mobile-bottom-nav a{text-decoration:none;color:#6b7280;display:flex;flex-direction:column;align-items:center;gap:1px;min-width:55px}.mobile-bottom-nav i{font-size:1.25rem}.delivery-row{border-left:4px solid var(--brand2)}.map-box{background:#eef7ef;border:1px dashed #9ecaa4;border-radius:12px;padding:12px}.sticky-actions{position:sticky;bottom:76px;z-index:10}.empty-state{padding:48px 20px;text-align:center;color:var(--muted)}
@media(max-width:767.98px){html{font-size:14px}.card{border-radius:14px}.page-title{font-size:1.45rem}.table-responsive .table{min-width:720px}.invoice-sheet{padding:18px}.desktop-only{display:none!important}.stat-card{min-height:105px}.stat-value{font-size:1.4rem}}
@media(min-width:992px){body{padding-bottom:0}.mobile-bottom-nav{display:none!important}}
.nav-logo{display:inline-grid;place-items:center;width:36px;height:36px;margin-right:.6rem;border-radius:11px;background:rgba(255,255,255,.16)}.btn-sbu{display:flex;flex-direction:column;align-items:flex-start;color:#fff;border:1px solid rgba(255,255,255,.2);line-height:1.15;padding:.45rem .8rem}.btn-sbu small{opacity:.75;font-size:.68rem}.btn-sbu:hover,.btn-sbu:focus{color:#fff;background:rgba(255,255,255,.1)}.login-page{background:radial-gradient(circle at 10% 10%,#dbeafe,transparent 35%),radial-gradient(circle at 90% 90%,#ccfbf1,transparent 35%),#f8fafc}.login-card{border-radius:24px}.brand-mark{display:grid;place-items:center;width:58px;height:58px;border-radius:18px;background:linear-gradient(135deg,#2563eb,#06b6d4);color:#fff;font-size:1.65rem}.demo-login{background:#eff6ff;color:#1e40af;padding:.75rem 1rem;border-radius:12px}.delivery-map{height:620px;border-radius:18px}.chart-wrap{height:280px}.metric-mini{display:flex;flex-direction:column;background:#f1f5f9;border-radius:14px;padding:1rem}.metric-mini b{font-size:1.5rem}.metric-mini span{font-size:.78rem;color:#64748b}.dt-container .dt-search input{border:1px solid #dbe2ea;border-radius:10px;padding:.42rem .7rem}.dt-container .dt-layout-row{align-items:center;margin:.75rem 0}@media(max-width:991.98px){.delivery-map{height:460px}.btn-sbu{margin-top:.75rem}.navbar-collapse{padding-bottom:1rem}}@media print{.no-print,.app-navbar,.mobile-bottom-nav,.alert{display:none!important}body,main{background:#fff!important;padding:0!important}.card{box-shadow:none!important;border:0!important}}
.delivery-map {
    width: 100%;
    height: 620px;
    border-radius: 18px;
    z-index: 1;
}

.delivery-sequence-label {
    background: #0d6efd;
    border: none;
    border-radius: 50%;
    color: white;
    font-weight: 700;
    min-width: 25px;
    height: 25px;
    line-height: 18px;
    text-align: center;
}

    .delivery-sequence-label::before {
        display: none;
    }

.delivery-popup {
    min-width: 180px;
    line-height: 1.6;
}

@media (max-width: 991.98px) {
    .delivery-map {
        height: 460px;
    }
}
#deliveryMap {
    display: block;
    position: relative;
    width: 100%;
    height: 600px !important;
    min-height: 600px;
    overflow: hidden;
    background: #e5e7eb;
    border-radius: 16px;
    z-index: 1;
}

    #deliveryMap.leaflet-container {
        height: 600px !important;
    }

@media (max-width: 768px) {
    #deliveryMap,
    #deliveryMap.leaflet-container {
        height: 450px !important;
        min-height: 450px;
    }
}

/* =========================================
   GLOBAL BLUE THEME
   Add this at the end of site.css
   ========================================= */

:root {
    --theme-primary: #0d6efd;
    --theme-primary-dark: #084298;
    --theme-primary-light: #e7f1ff;
    --theme-primary-hover: #0b5ed7;
    --theme-gradient-start: #0d6efd;
    --theme-gradient-end: #084298;
    /* Override Bootstrap primary colour */
    --bs-primary: #0d6efd;
    --bs-primary-rgb: 13, 110, 253;
    --bs-link-color: #0d6efd;
    --bs-link-hover-color: #0a58ca;
}

/* Page background */
body {
    background-color: #f4f8ff !important;
}

/* Primary buttons */
.btn-primary {
    color: #ffffff !important;
    background-color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
}

    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary:active {
        color: #ffffff !important;
        background-color: var(--theme-primary-hover) !important;
        border-color: var(--theme-primary-hover) !important;
    }

/* Outline buttons */
.btn-outline-primary {
    color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
}

    .btn-outline-primary:hover {
        color: #ffffff !important;
        background-color: var(--theme-primary) !important;
    }

/* Navigation bar */
.navbar,
.main-header {
    background: linear-gradient( 135deg, var(--theme-gradient-start), var(--theme-gradient-end) ) !important;
}

/* Sidebar */
.sidebar,
.main-sidebar {
    background-color: #073b7a !important;
}

    .sidebar .nav-link.active,
    .main-sidebar .nav-link.active {
        color: #ffffff !important;
        background-color: var(--theme-primary) !important;
    }

    .sidebar .nav-link:hover,
    .main-sidebar .nav-link:hover {
        color: #ffffff !important;
        background-color: rgba(13, 110, 253, 0.55) !important;
    }

/* Cards */
.card-header.bg-primary,
.bg-primary {
    color: #ffffff !important;
    background-color: var(--theme-primary) !important;
}

.card {
    border-color: #d7e7ff;
}

/* Links */
a {
    color: var(--theme-primary);
}

    a:hover {
        color: var(--theme-primary-dark);
    }

/* Form controls */
.form-control:focus,
.form-select:focus {
    border-color: #86b7fe !important;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}

/* Checkboxes and radio buttons */
.form-check-input:checked {
    background-color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
}

/* Tables */
.table-primary,
.table thead.bg-primary {
    color: #ffffff !important;
    background-color: var(--theme-primary) !important;
}

/* Pagination */
.page-link {
    color: var(--theme-primary) !important;
}

.page-item.active .page-link {
    color: #ffffff !important;
    background-color: var(--theme-primary) !important;
    border-color: var(--theme-primary) !important;
}

/* Dropdown */
.dropdown-item.active,
.dropdown-item:active {
    color: #ffffff !important;
    background-color: var(--theme-primary) !important;
}

/* Badges */
.badge.bg-primary {
    background-color: var(--theme-primary) !important;
}

/* Login and business selection header */
.login-header,
.business-selection-header,
.theme-header {
    color: #ffffff;
    background: linear-gradient( 135deg, var(--theme-gradient-start), var(--theme-gradient-end) ) !important;
}

/* Decorative icons */
.text-primary {
    color: var(--theme-primary) !important;
}

.border-primary {
    border-color: var(--theme-primary) !important;
}

/* 2026 premium teal/slate refresh */
:root{--brand:#0f766e;--brand2:#14b8a6;--cream:#ccfbf1;--ink:#0f172a;--line:#dbe7e5;--theme-primary:#0f766e;--theme-primary-dark:#115e59;--theme-primary-light:#ccfbf1;--theme-primary-hover:#0d9488;--theme-gradient-start:#0f172a;--theme-gradient-end:#0f766e;--bs-primary:#0f766e;--bs-primary-rgb:15,118,110;--bs-link-color:#0f766e;--bs-link-hover-color:#115e59}
body{background:linear-gradient(180deg,#f8fafc 0,#f0fdfa 100%)!important}.app-navbar,.navbar,.main-header{background:linear-gradient(110deg,#0f172a,#134e4a 60%,#0f766e)!important}.card,.filter-panel,.profile-shell{border:1px solid rgba(15,118,110,.08);box-shadow:0 10px 35px rgba(15,23,42,.07)}.btn-brand{background:linear-gradient(135deg,#0f766e,#14b8a6);border:0}.page-hero{min-height:150px;border-radius:24px;padding:28px 32px;background:linear-gradient(120deg,#0f172a,#134e4a);color:#fff;display:flex;align-items:center;justify-content:space-between;overflow:hidden;position:relative}.page-hero h1{font-weight:800;margin:.25rem 0}.page-hero p{margin:0;color:#ccfbf1}.eyebrow{font-size:.72rem;letter-spacing:.16em;font-weight:800;color:#5eead4}.hero-icon{font-size:5rem;opacity:.16}.filter-panel{background:#fff;border-radius:18px;padding:16px}.metric-card{background:#fff;border-radius:18px;padding:20px;border:1px solid #e2e8f0}.metric-card span{display:block;color:#64748b;font-size:.8rem}.metric-card strong{display:block;font-size:1.8rem;margin-top:4px}.delivery-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.delivery-card{background:#fff;border:1px solid #e2e8f0;border-radius:20px;padding:18px;box-shadow:0 8px 28px rgba(15,23,42,.055)}.delivery-card-top{display:flex;gap:12px}.address-line{display:flex;gap:8px;margin:14px 0;color:#475569}.address-line i{color:#0f766e}.item-chips{display:flex;flex-wrap:wrap;gap:7px}.item-chip{background:#f0fdfa;border:1px solid #ccfbf1;border-radius:999px;padding:6px 10px;font-size:.8rem}.item-chip em{font-style:normal;color:#0f766e;margin-left:4px}.delivery-footer{border-top:1px solid #eef2f7;margin-top:16px;padding-top:14px;display:flex;justify-content:space-between;align-items:center;gap:12px}.agent{display:flex;align-items:center;gap:9px}.agent img{width:42px;height:42px;border-radius:50%;object-fit:cover;border:2px solid #ccfbf1}.agent small,.agent strong{display:block}.agent small{font-size:.68rem;color:#94a3b8}.status-pill{font-size:.68rem;font-weight:800;padding:5px 9px;border-radius:999px;height:max-content;background:#fef3c7;color:#92400e}.status-delivered{background:#dcfce7;color:#166534}.status-not-delivered{background:#fee2e2;color:#991b1b}.status-partially-delivered{background:#ffedd5;color:#9a3412}.profile-shell{background:#fff;border-radius:24px;overflow:hidden}.profile-banner{height:140px;background:linear-gradient(120deg,#0f172a,#0f766e,#2dd4bf)}.profile-body{padding:0 28px 32px}.profile-photo-xl{width:128px;height:128px;border-radius:50%;object-fit:cover;border:6px solid #fff;margin-top:-64px;box-shadow:0 8px 24px rgba(15,23,42,.18)}
@media(max-width:991.98px){.delivery-grid{grid-template-columns:1fr}.page-hero{min-height:125px;padding:22px}.hero-icon{font-size:3.5rem}.delivery-footer{align-items:flex-end}}