/* ============================================================
   TMS Admin — Professional Theme (Bootstrap 5.3 + Bootstrap Icons)
   Color palette: modern slate/indigo, clean cards, subtle shadows
   ============================================================ */

:root {
    --tms-primary: #4f46e5;
    --tms-primary-rgb: 79, 70, 229;
    --tms-accent: #10b981;
    --tms-sidebar-bg: #0f172a;
    --tms-sidebar-width: 260px;
    --tms-topbar-h: 64px;
    --tms-bg: #f1f5f9;
    --tms-border: #e2e8f0;
    --tms-card-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    --tms-card-shadow-hover: 0 4px 12px rgba(0,0,0,.08);
    --tms-radius: 12px;
}

* { box-sizing: border-box; }
body { background: var(--tms-bg); font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; color: #1e293b; margin: 0; }

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

/* ===== Sidebar ===== */
.sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; width: var(--tms-sidebar-width);
    background: var(--tms-sidebar-bg); color: #cbd5e1; z-index: 1040;
    border-right: 1px solid rgba(148,163,184,.14);
    box-shadow: 8px 0 24px rgba(15,23,42,.08);
    display: flex; flex-direction: column;
    transform: translateX(-100%); transition: transform .25s ease;
}
@media (min-width: 992px) {
    .sidebar { transform: translateX(0); }
    .main-content { margin-left: var(--tms-sidebar-width); }
}
.sidebar.show { transform: translateX(0); box-shadow: 4px 0 20px rgba(0,0,0,.2); }

.sidebar-brand {
    display: flex; align-items: center; gap: 12px;
    padding: 20px 22px; border-bottom: 1px solid rgba(255,255,255,.08);
}
.brand-lockup { min-width: 0; }
.brand-logo {
    display: block; width: 172px; height: auto; padding: 7px 10px;
    background: #fff; border-radius: 10px;
}
.brand-lockup small { display: block; margin: 7px 4px 0; color: #94a3b8; font-size: 12px; }

.sidebar-nav { flex: 1; padding: 16px 12px; overflow-y: auto; }
.sidebar-group {
    margin: 18px 14px 8px; color: #94a3b8; font-size: 10px; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
}
.sidebar-link {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 14px; margin-bottom: 4px; border-radius: 10px;
    color: #cbd5e1; text-decoration: none; font-size: 14px; font-weight: 500;
    transition: background .15s, color .15s, transform .15s;
}
.sidebar-link:hover { background: rgba(255,255,255,.09); color: #fff; transform: translateX(2px); }
.sidebar-link.active {
    background: #fff; color: #312e81; font-weight: 700;
    box-shadow: inset 3px 0 var(--tms-accent), 0 6px 18px rgba(0,0,0,.18);
}
.sidebar-link.active svg { color: var(--tms-primary); }
.sidebar-link i { font-size: 18px; width: 22px; text-align: center; }
.sidebar-link i[data-lucide], .sidebar-link svg { width: 20px; height: 20px; }

.sidebar-footer { padding: 14px 18px; border-top: 1px solid rgba(255,255,255,.08); }

.sidebar-overlay {
    display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1035;
}
.sidebar-overlay.show { display: block; }

/* ===== Topbar ===== */
.main-content { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topbar {
    height: var(--tms-topbar-h); background: #fff; border-bottom: 1px solid var(--tms-border);
    display: flex; align-items: center; gap: 12px; padding: 0 24px;
    position: sticky; top: 0; z-index: 1020;
}
.topbar-title { font-size: 18px; font-weight: 700; color: #0f172a; }
.btn-icon { padding: 6px; color: #475569; font-size: 22px; text-decoration: none; }
.profile-menu-toggle {
    display: flex; align-items: center; gap: 9px; padding: 5px 9px;
    background: transparent; border: 1px solid transparent; border-radius: 10px;
    color: #1e293b; transition: background .15s, border-color .15s, box-shadow .15s;
}
.profile-menu-toggle:hover, .profile-menu-toggle[aria-expanded="true"] {
    background: #f8fafc; border-color: var(--tms-border);
}
.profile-menu-toggle:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(var(--tms-primary-rgb), .16); }
.profile-menu-toggle::after { margin-left: 2px; color: #64748b; }
.profile-menu-copy { line-height: 1.15; text-align: left; }
.profile-menu-copy strong { display: block; font-size: 13px; font-weight: 650; }
.profile-menu-copy small { display: block; margin-top: 3px; color: #64748b; font-size: 11px; }
.profile-dropdown {
    min-width: 220px; margin-top: 10px; padding: 8px;
    border: 1px solid var(--tms-border); border-radius: 12px;
    box-shadow: 0 14px 36px rgba(15,23,42,.14);
}
.profile-dropdown .dropdown-item {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px;
    border-radius: 8px; color: #334155; font-size: 14px; font-weight: 500;
}
.profile-dropdown .dropdown-item svg { width: 18px; height: 18px; color: #64748b; }
.profile-dropdown .dropdown-item:hover { background: #f1f5f9; color: var(--tms-primary); }
.profile-dropdown .dropdown-item:hover svg { color: var(--tms-primary); }
.profile-dropdown .dropdown-divider { margin: 6px 4px; border-color: var(--tms-border); }
.profile-dropdown .logout-item, .profile-dropdown .logout-item svg { color: #dc2626; }
.profile-dropdown .logout-item:hover { background: #fef2f2; color: #b91c1c; }

.page-content { padding: 28px; max-width: 1500px; width: 100%; margin: 0 auto; }

/* ===== Avatar ===== */
.avatar-sm { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 2px solid #e2e8f0; }

/* ===== Cards ===== */
.tms-card {
    background: #fff; border: 1px solid var(--tms-border); border-radius: var(--tms-radius);
    box-shadow: var(--tms-card-shadow); overflow: hidden;
}
.tms-card-header {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    padding: 16px 22px; border-bottom: 1px solid var(--tms-border);
}
.tms-card-header h6 { margin: 0; font-size: 16px; font-weight: 700; color: #0f172a; }
.tms-card-body { padding: 22px; }

/* ===== Stat cards ===== */
.stat-card {
    background: #fff; border: 1px solid var(--tms-border); border-radius: var(--tms-radius);
    padding: 22px; box-shadow: var(--tms-card-shadow);
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    transition: box-shadow .2s, transform .2s;
}
.stat-card:hover { box-shadow: var(--tms-card-shadow-hover); transform: translateY(-2px); }
.stat-card .stat-label { font-size: 13px; color: #64748b; font-weight: 500; margin: 0; }
.stat-card .stat-value { font-size: 30px; font-weight: 700; color: #0f172a; line-height: 1.2; margin: 4px 0 2px; }
.stat-card .stat-sub { font-size: 12px; color: #94a3b8; }
.stat-icon {
    width: 52px; height: 52px; border-radius: 12px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 24px;
}
.stat-icon svg { width: 26px; height: 26px; }

/* ===== Tables ===== */
.tms-table { width: 100%; border-collapse: collapse; }
.tms-table thead th {
    text-align: left; padding: 12px 18px; font-size: 12px; font-weight: 600;
    color: #64748b; text-transform: uppercase; letter-spacing: .5px;
    background: #f8fafc; border-bottom: 1px solid var(--tms-border);
}
.tms-table tbody td { padding: 14px 18px; font-size: 14px; color: #334155; border-bottom: 1px solid #f1f5f9; }
.tms-table tbody tr:last-child td { border-bottom: none; }
.tms-table tbody tr:hover { background: #f8fafc; }
.customer-name-link { color: #1e293b; font-weight: 600; text-decoration: none; }
.customer-name-link:hover { color: var(--tms-primary); }

/* ===== Badges ===== */
.tms-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 600;
}
.badge-success { background: #dcfce7; color: #16a34a; }
.badge-warning { background: #fef3c7; color: #d97706; }
.badge-danger  { background: #fee2e2; color: #dc2626; }
.badge-muted   { background: #f1f5f9; color: #64748b; }
.badge-info    { background: #dbeafe; color: #2563eb; }
.badge-primary { background: #dbeafe; color: #2563eb; }

/* ===== Buttons ===== */
.btn-primary { background: var(--tms-primary); border-color: var(--tms-primary); }
.btn-primary:hover { background: #4338ca; border-color: #4338ca; }
.btn-icon-action {
    width: 32px; height: 32px; border: none; background: #f1f5f9; border-radius: 8px;
    color: #475569; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    transition: all .15s;
}
.btn-icon-action:hover { background: #e2e8f0; color: #1e293b; }
.btn-icon-action.danger:hover { background: #fee2e2; color: #dc2626; }

/* ===== Forms ===== */
.form-control, .form-select { border-radius: 8px; border-color: #cbd5e1; font-size: 14px; padding: 9px 12px; }
.form-control:focus, .form-select:focus { border-color: var(--tms-primary); box-shadow: 0 0 0 3px rgba(var(--tms-primary-rgb), .15); }
.form-label { font-size: 13px; font-weight: 600; color: #334155; margin-bottom: 6px; }

/* ===== Progress bars (for breakdowns) ===== */
.tms-progress { height: 8px; background: #f1f5f9; border-radius: 4px; overflow: hidden; margin-top: 4px; }
.tms-progress-bar { height: 100%; border-radius: 4px; transition: width .3s; }

/* ===== Page header ===== */
.page-header { margin-bottom: 24px; }
.page-header h2 { font-size: 24px; font-weight: 700; color: #0f172a; margin: 0; }
.page-header p { color: #64748b; margin: 4px 0 0; font-size: 14px; }

/* ===== Modal ===== */
.modal-content { border-radius: 14px; border: none; box-shadow: 0 20px 50px rgba(0,0,0,.15); }
.modal-header { border-bottom: 1px solid var(--tms-border); padding: 18px 24px; }
.modal-body { padding: 24px; }
.modal-footer { border-top: 1px solid var(--tms-border); padding: 16px 24px; }
.modal-title { font-weight: 700; }

/* ===== Filters toolbar ===== */
.filter-toolbar { display: flex; gap: 12px; flex-wrap: wrap; padding: 14px 22px; border-bottom: 1px solid var(--tms-border); align-items: center; }
.filter-toolbar .form-control, .filter-toolbar .form-select { max-width: 220px; }

/* ===== Transport orders and dispatch ===== */
.order-empty-state { min-height:360px; padding:56px 24px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.order-empty-icon { width:64px; height:64px; display:grid; place-items:center; margin-bottom:18px; border-radius:18px; background:#eef2ff; color:var(--tms-primary); }
.order-empty-icon svg { width:30px; height:30px; }
.order-empty-state h3 { margin:0 0 8px; font-size:20px; }
.order-empty-state p { margin:0 0 22px; color:#64748b; line-height:1.65; }
.order-toolbar .order-search { width:min(440px,100%); }
.route-arrow { display:inline-flex; align-items:center; gap:6px; }
.route-arrow svg { width:14px; height:14px; color:#94a3b8; }
.order-summary-card .summary-empty { min-height:150px; display:grid; place-items:center; align-content:center; gap:8px; text-align:center; color:#94a3b8; }
.summary-empty svg { width:28px; height:28px; }
.summary-empty p { margin:0; font-size:13px; line-height:1.6; }
.summary-route { display:flex; flex-direction:column; gap:3px; padding-bottom:16px; border-bottom:1px solid var(--tms-border); }
.summary-route span,.summary-note { color:#64748b; font-size:12px; }
.summary-list { margin:8px 0 0; }
.summary-list div { display:flex; justify-content:space-between; gap:16px; padding:9px 0; }
.summary-list dt { color:#64748b; font-size:13px; font-weight:500; }
.summary-list dd { margin:0; color:#0f172a; font-size:13px; font-weight:650; text-align:right; }
.summary-list .summary-total { margin-top:4px; padding-top:14px; border-top:1px solid var(--tms-border); }
.summary-list .summary-total dd { color:var(--tms-primary); font-size:16px; }
.summary-note { margin:8px 0 0; line-height:1.5; }
.dispatch-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px; }
.dispatch-metrics { display:flex; align-items:center; gap:18px; color:#64748b; font-size:13px; }
.dispatch-search { width:min(380px,100%); }
.dispatch-board { display:grid; grid-template-columns:repeat(7,minmax(286px,1fr)); gap:14px; overflow-x:auto; padding:2px 2px 14px; scroll-snap-type:x proximity; }
.dispatch-column { min-height:420px; overflow:hidden; border:1px solid var(--tms-border); border-radius:var(--tms-radius); background:#eef2f7; scroll-snap-align:start; }
.dispatch-column-header { min-height:54px; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:13px 14px; border-bottom:1px solid var(--tms-border); background:#fff; }
.dispatch-column-title { display:flex; align-items:center; gap:8px; font-size:14px; }
.dispatch-column-title svg { width:17px; height:17px; color:#64748b; }
.dispatch-column-body { display:grid; align-content:start; gap:10px; padding:10px; }
.dispatch-empty { min-height:110px; display:grid; place-items:center; align-content:center; gap:7px; color:#94a3b8; font-size:12px; }
.dispatch-empty svg { width:22px; height:22px; }
.dispatch-job-card { padding:14px; border:1px solid #dbe3ee; border-radius:10px; background:#fff; box-shadow:0 1px 2px rgba(15,23,42,.04); }
.dispatch-job-top { display:flex; justify-content:space-between; gap:8px; margin-bottom:10px; }
.dispatch-job-top a { color:var(--tms-primary); font-size:13px; font-weight:700; text-decoration:none; }
.dispatch-job-top time,.dispatch-product,.dispatch-time { color:#64748b; font-size:12px; }
.dispatch-customer { display:block; overflow:hidden; margin-bottom:5px; font-size:13px; white-space:nowrap; text-overflow:ellipsis; }
.dispatch-route { display:flex; align-items:center; gap:5px; color:#475569; font-size:12px; }
.dispatch-route svg { width:13px; height:13px; color:#94a3b8; }
.dispatch-product { margin-top:4px; }
.dispatch-resource { display:flex; align-items:center; gap:9px; margin-top:12px; padding:9px; border-radius:8px; background:#f8fafc; }
.dispatch-resource>svg { width:18px; height:18px; color:#64748b; }
.dispatch-resource div { min-width:0; display:flex; flex-direction:column; }
.dispatch-resource strong { font-size:12px; }.dispatch-resource span { color:#64748b; font-size:11px; }
.dispatch-time { display:flex; align-items:center; gap:5px; margin-top:8px; }.dispatch-time svg { width:13px; height:13px; }
.dispatch-actions { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; padding-top:12px; border-top:1px solid #f1f5f9; }
.dispatch-actions .btn { flex:1 1 auto; }.dispatch-actions svg { width:14px; height:14px; }
.dispatch-reject { margin-top:10px; padding:10px; border-radius:8px; background:#fff1f2; }
.dispatch-reject label { display:block; margin-bottom:5px; color:#9f1239; font-size:12px; font-weight:650; }
.dispatch-reject textarea { width:100%; margin-bottom:7px; padding:7px 8px; border:1px solid #fda4af; border-radius:7px; font-size:12px; resize:vertical; }
.dispatch-reject>div { display:flex; gap:6px; }
@media(max-width:767.98px){.order-toolbar .order-search,.dispatch-search{width:100%;}.dispatch-toolbar{align-items:stretch;flex-direction:column}.dispatch-metrics{justify-content:space-between;gap:8px}.dispatch-board{grid-template-columns:repeat(7,minmax(82vw,1fr))}.order-summary-card{position:static!important}}

/* Fleet live map */
.fleet-live-shell{display:grid;gap:18px}.fleet-live-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}.fleet-live-head h2{display:flex;align-items:center;gap:9px;margin:0;color:#0f172a;font-size:24px}.fleet-live-head h2 svg{width:23px;color:#5b45e7}.fleet-live-head p{margin:5px 0 0;color:#64748b}.fleet-live-sync{display:flex;align-items:center;gap:9px;white-space:nowrap;color:#64748b;font-size:13px}.fleet-live-sync .btn{display:inline-flex;align-items:center;gap:6px}.fleet-live-sync .btn svg{width:15px}.fleet-live-dot{width:9px;height:9px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 5px #dcfce7}.fleet-live-dot.error{background:#ef4444;box-shadow:0 0 0 5px #fee2e2}.fleet-live-legend{display:flex;flex-wrap:wrap;gap:9px}.fleet-live-legend span{display:flex;align-items:center;gap:7px;padding:7px 11px;border:1px solid #e2e8f0;border-radius:999px;background:#fff;color:#475569;font-size:12px}.fleet-live-legend i{width:9px;height:9px;border-radius:50%}.fleet-live-legend i.live{background:#22c55e}.fleet-live-legend i.stale{background:#f59e0b}.fleet-live-legend i.offline{background:#94a3b8}.fleet-live-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(300px,.8fr);gap:16px;min-height:620px}.fleet-live-map-card,.fleet-live-list-card{position:relative;background:#fff;border:1px solid #e2e8f0;border-radius:18px;overflow:hidden;box-shadow:0 8px 28px rgba(15,23,42,.06)}.fleet-live-map{width:100%;height:100%;min-height:620px;background:#e9eef5}.fleet-live-map-unavailable{background:linear-gradient(135deg,#eef2f7,#dbe3ed)}.fleet-live-map-warning{position:absolute;z-index:600;top:12px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;width:min(520px,calc(100% - 24px));padding:10px 13px;border:1px solid #fed7aa;border-radius:12px;background:rgba(255,247,237,.96);color:#9a3412;font-size:12px;box-shadow:0 8px 22px rgba(15,23,42,.12)}.fleet-live-map-warning svg{width:17px;flex:0 0 auto}.fleet-live-empty{position:absolute;z-index:500;left:50%;top:50%;transform:translate(-50%,-50%);width:min(330px,calc(100% - 32px));padding:24px;border-radius:18px;background:rgba(255,255,255,.94);box-shadow:0 16px 38px rgba(15,23,42,.16);display:flex;flex-direction:column;align-items:center;text-align:center;gap:7px;color:#64748b}.fleet-live-empty svg{width:32px;height:32px;color:#5b45e7}.fleet-live-empty strong{color:#0f172a}.fleet-live-list-card{display:flex;flex-direction:column;max-height:620px}.fleet-live-list-title{display:flex;align-items:center;justify-content:space-between;padding:17px 18px;border-bottom:1px solid #e2e8f0;font-weight:700;color:#0f172a}.fleet-live-list{overflow:auto}.fleet-live-list-empty{margin:0;padding:38px 18px;text-align:center;color:#64748b}.fleet-live-item{border-bottom:1px solid #eef2f6;background:#fff;transition:.15s}.fleet-live-item:hover{background:#f8f7ff}.fleet-live-locate{width:100%;border:0;background:transparent;padding:15px 15px 9px;display:flex;align-items:center;gap:11px;text-align:left}.fleet-live-item-icon{width:42px;height:42px;flex:0 0 auto;border-radius:13px;background:#dcfce7;color:#16a34a;display:grid;place-items:center}.fleet-live-item.stale .fleet-live-item-icon{background:#fef3c7;color:#d97706}.fleet-live-item.offline .fleet-live-item-icon{background:#e2e8f0;color:#64748b}.fleet-live-item-icon svg,.fleet-live-locate>svg{width:20px}.fleet-live-locate>svg{color:#94a3b8}.fleet-live-item-main{min-width:0;flex:1;display:grid;gap:2px}.fleet-live-item-main strong{color:#0f172a}.fleet-live-item-main small,.fleet-live-item-main span,.fleet-live-item-main em{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fleet-live-item-main small,.fleet-live-item-main span{color:#64748b;font-size:12px}.fleet-live-item-main em{color:#16a34a;font-size:11px;font-style:normal}.fleet-live-item.stale em{color:#b45309}.fleet-live-item.offline em{color:#64748b}.fleet-live-job-link{display:block;margin:0 15px 12px 68px;color:#5b45e7;font-size:12px;font-weight:700;text-decoration:none}.fleet-live-marker-shell{background:transparent;border:0}.fleet-live-marker{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#fff;box-shadow:0 4px 14px rgba(15,23,42,.28)}.fleet-live-marker span{width:20px;height:20px;border-radius:50% 50% 50% 4px;background:#22c55e;transform:rotate(-45deg);border:3px solid #fff;box-shadow:0 0 0 2px #22c55e}.fleet-live-marker.stale span{background:#f59e0b;box-shadow:0 0 0 2px #f59e0b}.fleet-live-marker.offline span{background:#94a3b8;box-shadow:0 0 0 2px #94a3b8}.leaflet-popup-content{line-height:1.55}.leaflet-popup-content a{color:#5b45e7;font-weight:700}.fleet-popup-state.live{color:#15803d}.fleet-popup-state.stale{color:#b45309}.fleet-popup-state.offline{color:#64748b}
@media(max-width:991.98px){.fleet-live-grid{grid-template-columns:1fr;min-height:0}.fleet-live-map{min-height:55vh}.fleet-live-list-card{max-height:360px}}
@media(max-width:575.98px){.fleet-live-head{flex-direction:column}.fleet-live-sync{width:100%;justify-content:space-between}.fleet-live-map{min-height:52vh}.fleet-live-head h2{font-size:21px}}
.document-audit-strip{display:flex;flex-wrap:wrap;gap:10px 18px;padding:12px 15px;border:1px solid #e2e8f0;border-radius:13px;background:#f8fafc;color:#64748b;font-size:12px}.document-audit-strip strong{color:#334155;margin-right:4px}

/* ===== Quiet Operations design system ===== */
:root { --tms-topbar-h:68px; --tms-bg:#f8fafc; }
.sidebar-brand { padding:22px 20px 18px; }
.brand-logo { width:168px; }
.sidebar-nav { padding:18px 12px; }
.sidebar-link.active { background:rgba(var(--tms-primary-rgb),.24); color:#fff; font-weight:650; box-shadow:inset 3px 0 var(--tms-accent); }
.topbar { padding:0 28px; }
.topbar-title { font-size:15px; font-weight:650; color:#475569; }
.page-content { padding:32px; max-width:1440px; }
.tms-card { box-shadow:0 1px 2px rgba(15,23,42,.035); }
.tms-card-header h6 { display:flex; align-items:center; gap:8px; font-size:15px; font-weight:650; }
.tms-table thead th { text-transform:none; letter-spacing:.2px; font-weight:650; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; border-radius:9px; font-weight:600; }
.btn svg { width:17px; height:17px; }
.btn-primary { box-shadow:0 1px 2px rgba(79,70,229,.2); }
.page-header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.page-header h2 { display:flex; align-items:center; gap:9px; letter-spacing:-.02em; }
.filter-toolbar { background:#fbfdff; }
.alert { display:flex; align-items:center; gap:9px; border:0; border-radius:10px; }
.alert svg { width:18px; height:18px; flex:0 0 auto; }
.nav-pills { gap:6px; padding:5px; background:#eef2f7; border-radius:11px; width:max-content; }
.nav-pills .nav-link { display:flex; align-items:center; gap:7px; padding:8px 14px; border-radius:8px; color:#475569; font-size:14px; font-weight:600; }
.nav-pills .nav-link.active { background:#fff; color:var(--tms-primary); box-shadow:0 1px 3px rgba(15,23,42,.09); }
.fleet-tabs { max-width:100%; overflow-x:auto; scrollbar-width:none; }
.fleet-tabs .nav-pills { flex-wrap:nowrap; }
.fleet-tabs .nav-link { white-space:nowrap; }
.input-group-text { border-color:#cbd5e1; background:#f8fafc; color:#64748b; }
.table-responsive { scrollbar-width:thin; scrollbar-color:#cbd5e1 transparent; }
.modal-content { overflow:hidden; }
.dropdown-menu { border-color:var(--tms-border); }

.dashboard-kpis { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); margin-bottom:20px; background:#fff; border:1px solid var(--tms-border); border-radius:var(--tms-radius); box-shadow:0 1px 2px rgba(15,23,42,.035); overflow:hidden; }
.kpi-item { display:flex; align-items:center; gap:13px; min-width:0; padding:20px; border-right:1px solid var(--tms-border); }
.kpi-item:last-child { border-right:0; }
.kpi-icon { width:42px; height:42px; flex:0 0 auto; display:grid; place-items:center; border-radius:10px; }
.kpi-icon svg { width:21px; height:21px; }
.kpi-copy { min-width:0; }
.kpi-label { margin:0 0 3px; color:#64748b; font-size:12px; font-weight:600; white-space:nowrap; }
.kpi-value { color:#0f172a; font-size:24px; line-height:1; font-weight:750; letter-spacing:-.03em; }
.kpi-sub { display:block; margin-top:5px; color:#94a3b8; font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tone-indigo { background:#eef2ff; color:#4f46e5; } .tone-violet { background:#f5f3ff; color:#7c3aed; }
.tone-amber { background:#fffbeb; color:#d97706; } .tone-rose { background:#ecfeff; color:#0891b2; }
.tone-emerald { background:#ecfdf5; color:#059669; }
.status-overview .tms-card-body { padding:0 22px; }
.status-section { display:grid; grid-template-columns:210px minmax(0,1fr); gap:26px; padding:24px 0; }
.status-section + .status-section { border-top:1px solid var(--tms-border); }
.status-heading { display:flex; align-items:flex-start; gap:10px; }
.status-heading-icon { width:36px; height:36px; display:grid; place-items:center; flex:0 0 auto; border-radius:9px; background:#f1f5f9; color:#475569; }
.status-heading-icon svg { width:18px; height:18px; }
.status-heading h3 { margin:1px 0 3px; color:#0f172a; font-size:14px; font-weight:700; }
.status-heading p { margin:0; color:#94a3b8; font-size:12px; }
.status-list { display:grid; gap:15px; }
.status-row-head { display:flex; justify-content:space-between; gap:12px; margin-bottom:6px; color:#475569; font-size:13px; }
.status-count { color:#0f172a; font-weight:700; }
.status-percent { color:#94a3b8; font-weight:500; }
.empty-state { margin:0; padding:18px; color:#64748b; text-align:center; background:#f8fafc; border-radius:10px; }

body.auth-page { min-height:100vh; padding:24px; display:grid; place-items:center; background:#dfe7f1; }
.auth-shell { width:min(1120px,100%); min-height:650px; display:grid; grid-template-columns:1fr 1fr; background:#eef2f7; border:1px solid #cbd5e1; border-radius:20px; box-shadow:0 24px 70px rgba(15,23,42,.16); overflow:hidden; }
.auth-brand-panel { display:flex; flex-direction:column; justify-content:space-between; padding:48px; color:#fff; background:linear-gradient(90deg,rgba(8,18,40,.92) 0%,rgba(15,23,42,.78) 58%,rgba(15,23,42,.5) 100%),url('/img/fleetvale-login-logistics-bg.jpg') center/cover no-repeat; }
.auth-brand-logo { width:190px; padding:8px 11px; background:#fff; border-radius:10px; }
.auth-eyebrow { color:#a7f3d0; font-size:11px; font-weight:750; letter-spacing:.13em; text-transform:uppercase; }
.auth-brand-panel h2 { max-width:390px; margin:15px 0 12px; font-size:34px; line-height:1.3; font-weight:720; letter-spacing:-.03em; }
.auth-brand-panel p { max-width:390px; margin:0; color:#cbd5e1; font-size:14px; line-height:1.75; }
.auth-trust { display:flex; align-items:center; gap:10px; color:#cbd5e1; font-size:12px; }
.auth-trust svg { width:18px; height:18px; color:#34d399; }
.auth-form-panel { display:grid; place-items:center; padding:40px; background:#eef2f7; }
.auth-wrapper { width:100%; max-width:450px; padding:32px; background:#fff; border:1px solid #dbe3ee; border-radius:16px; box-shadow:0 10px 30px rgba(15,23,42,.07); }
.auth-mobile-logo { display:none; width:185px; margin:0 auto 28px; }
.auth-title { margin:0 0 7px; color:#0f172a; font-size:26px; font-weight:720; letter-spacing:-.025em; }
.auth-sub { margin:0 0 28px; color:#64748b; font-size:14px; }
.auth-footer { margin-top:24px; color:#64748b; text-align:center; font-size:14px; }
.auth-footer a { color:var(--tms-primary); font-weight:650; text-decoration:none; }
.auth-footer a:hover { text-decoration:underline; }
.auth-wrapper .input-group-text svg,.auth-wrapper .btn-auth svg { width:18px; height:18px; }
.btn-auth { width:100%; min-height:44px; font-size:15px; }
.auth-copyright { margin:26px 0 0; color:#94a3b8; text-align:center; font-size:12px; }

/* ===== Professional form pages ===== */
.form-page-header { max-width:960px; margin-bottom:22px; }
.form-back-link { display:inline-flex; align-items:center; gap:6px; margin-bottom:16px; color:#64748b; font-size:13px; font-weight:600; text-decoration:none; }
.form-back-link:hover { color:var(--tms-primary); }
.form-back-link svg { width:16px; height:16px; }
.form-eyebrow { display:block; margin-bottom:5px; color:var(--tms-primary); font-size:11px; font-weight:750; letter-spacing:.08em; }
.form-page-header h2 { margin:0; color:#0f172a; font-size:25px; font-weight:720; letter-spacing:-.025em; }
.form-page-header p { margin:5px 0 0; color:#64748b; font-size:14px; }
.form-shell { max-width:960px; }
.form-required-note { color:#94a3b8; font-size:11px; }
.form-required-note b { color:#dc2626; }
.body-type-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.body-type-option { display:flex; align-items:center; gap:10px; min-height:44px; padding:10px 12px; border:1px solid #dbe3ee; border-radius:9px; background:#fff; color:#475569; font-size:13px; font-weight:600; cursor:pointer; transition:border-color .15s,background .15s,box-shadow .15s; }
.body-type-option:hover { border-color:#a5b4fc; background:#fafaff; }
.body-type-option:has(input:checked) { border-color:#818cf8; background:#eef2ff; color:#3730a3; box-shadow:0 0 0 2px rgba(var(--tms-primary-rgb),.08); }
.body-type-option .form-check-input { flex:0 0 auto; margin:0; }
.form-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:28px; padding-top:18px; border-top:1px solid var(--tms-border); }
.form-actions .btn { min-width:104px; }

/* ===== Notification center ===== */
.notification-menu { margin-right:4px; }
.notification-toggle { position:relative; width:40px; height:40px; display:grid; place-items:center; padding:0; border:1px solid transparent; border-radius:10px; background:transparent; color:#475569; }
.notification-toggle:hover,.notification-toggle[aria-expanded="true"] { background:#f8fafc; border-color:var(--tms-border); color:var(--tms-primary); }
.notification-toggle:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(var(--tms-primary-rgb),.16); }
.notification-toggle svg { width:19px; height:19px; }
.notification-badge { position:absolute; top:2px; right:1px; min-width:17px; height:17px; display:grid; place-items:center; padding:0 4px; border:2px solid #fff; border-radius:999px; background:#dc2626; color:#fff; font-size:9px; font-weight:750; line-height:1; }
.notification-dropdown { width:min(380px,calc(100vw - 24px)); margin-top:10px; padding:0; overflow:hidden; border:1px solid var(--tms-border); border-radius:14px; box-shadow:0 18px 45px rgba(15,23,42,.16); }
.notification-header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:15px 16px; border-bottom:1px solid var(--tms-border); }
.notification-header strong { display:block; color:#0f172a; font-size:14px; }
.notification-header small { display:block; margin-top:2px; color:#94a3b8; font-size:11px; }
.notification-header form,.notification-list form { margin:0; }
.notification-read-all { padding:4px 0; border:0; background:transparent; color:var(--tms-primary); font-size:12px; font-weight:650; }
.notification-read-all:hover { color:#4338ca; text-decoration:underline; }
.notification-list { max-height:420px; overflow-y:auto; }
.notification-item { position:relative; width:100%; display:grid; grid-template-columns:38px minmax(0,1fr) 8px; align-items:start; gap:11px; padding:13px 16px; border:0; border-bottom:1px solid #f1f5f9; background:#fff; color:#334155; text-align:left; }
.notification-item:hover { background:#f8fafc; }
.notification-item:focus-visible { position:relative; z-index:1; outline:2px solid rgba(var(--tms-primary-rgb),.45); outline-offset:-2px; }
.notification-item.unread { background:#f8faff; }
.notification-icon { width:36px; height:36px; display:grid; place-items:center; border-radius:10px; }
.notification-icon svg { width:18px; height:18px; }
.notification-info { background:#eef2ff; color:#4f46e5; }
.notification-success { background:#ecfdf5; color:#059669; }
.notification-warning { background:#fffbeb; color:#d97706; }
.notification-danger { background:#fef2f2; color:#dc2626; }
.notification-copy { min-width:0; }
.notification-copy strong,.notification-copy span,.notification-copy time { display:block; }
.notification-copy strong { color:#1e293b; font-size:13px; font-weight:680; }
.notification-copy span { display:-webkit-box; margin-top:3px; overflow:hidden; color:#64748b; font-size:12px; line-height:1.45; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.notification-copy time { margin-top:6px; color:#94a3b8; font-size:10px; }
.notification-dot { align-self:center; width:7px; height:7px; border-radius:50%; background:var(--tms-primary); }
.notification-empty { display:grid; place-items:center; gap:8px; padding:36px 20px; color:#94a3b8; font-size:12px; text-align:center; }
.notification-empty svg { width:24px; height:24px; }

/* ===== Breadcrumbs ===== */
.app-breadcrumb { margin:0 0 16px; }
.app-breadcrumb ol { display:flex; align-items:center; flex-wrap:wrap; gap:0; margin:0; padding:0; list-style:none; }
.app-breadcrumb li { display:inline-flex; align-items:center; color:#94a3b8; font-size:12px; font-weight:550; }
.app-breadcrumb li + li::before { content:"/"; margin:0 9px; color:#cbd5e1; }
.app-breadcrumb svg { width:14px; height:14px; margin-right:6px; color:#94a3b8; }
.app-breadcrumb a { color:#64748b; text-decoration:none; transition:color .15s; }
.app-breadcrumb a:hover { color:var(--tms-primary); }
.app-breadcrumb a:focus-visible { outline:2px solid rgba(var(--tms-primary-rgb),.35); outline-offset:3px; border-radius:3px; }
.app-breadcrumb [aria-current="page"] span { color:#334155; font-weight:650; }

/* ===== System polish: executive dashboard, tables, feedback ===== */
:where(a,button,input,select,textarea):focus-visible { outline:3px solid rgba(var(--tms-primary-rgb),.22); outline-offset:2px; }
.tms-badge { white-space:nowrap; }
.tms-table thead th { position:sticky; top:0; z-index:2; background:#f8fafc; }
.tms-table .btn-sm { min-height:34px; min-width:34px; }
.dispatch-board { max-width:100%; }
.dispatch-column-header { position:sticky; top:0; z-index:2; }
.page-eyebrow { display:block; margin-bottom:6px; color:var(--tms-primary); font-size:10px; font-weight:750; letter-spacing:.12em; }
.dashboard-header { margin-bottom:22px; }
.dashboard-header-actions { display:flex; gap:9px; }
.executive-kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:18px; }
.executive-kpi { min-width:0; padding:19px 20px; border:1px solid var(--tms-border); border-radius:13px; background:#fff; box-shadow:0 1px 2px rgba(15,23,42,.035); }
.executive-kpi.profit { border-color:#c7d2fe; background:linear-gradient(145deg,#fff 0%,#f5f3ff 100%); }
.kpi-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; color:#64748b; font-size:12px; font-weight:650; }
.kpi-heading .kpi-icon { width:36px; height:36px; }
.kpi-heading .kpi-icon svg { width:18px; height:18px; }
.kpi-number { display:block; margin:15px 0 10px; color:#0f172a; font-size:29px; line-height:1; font-weight:760; letter-spacing:-.035em; }
.kpi-number.money { font-size:23px; }
.kpi-delta { display:inline-flex; align-items:center; gap:4px; color:#64748b; font-size:11px; font-weight:600; }
.kpi-delta svg { width:13px; height:13px; }
.kpi-delta.positive { color:#047857; }.kpi-delta.negative { color:#dc2626; }.kpi-delta.neutral { color:#64748b; }
.kpi-footer { display:flex; align-items:center; justify-content:space-between; gap:8px; }.kpi-footer>span:last-child { color:#6d28d9; font-size:11px; font-weight:700; }
.dashboard-chart-grid { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(330px,.85fr); gap:18px; margin-bottom:18px; }
.chart-card .tms-card-header { min-height:70px; }.chart-card .tms-card-header p { margin:3px 0 0; color:#94a3b8; font-size:11px; }
.chart-wrap { position:relative; width:100%; height:230px; }.chart-donut { max-width:340px; height:220px; margin:auto; }
.priority-card .attention-list { min-height:274px; max-height:274px; overflow-y:auto; }.priority-card .attention-item { padding-top:10px; padding-bottom:10px; }
.status-card .tms-card-body { display:grid; place-items:center; }.donut-center { position:absolute; inset:50% auto auto 50%; display:grid; transform:translate(-50%,-63%); text-align:center; pointer-events:none; }.donut-center strong { color:#0f172a; font-size:25px; line-height:1; }.donut-center span { margin-top:5px; color:#94a3b8; font-size:10px; }
.dashboard-grid { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(340px,.85fr); gap:18px; }
.operations-card .tms-card-header,.attention-card .tms-card-header { min-height:74px; }
.operations-card .tms-card-header p,.attention-card .tms-card-header p { margin:3px 0 0; color:#94a3b8; font-size:11px; }
.operations-card .tms-card-header>a { display:inline-flex; align-items:center; gap:5px; color:var(--tms-primary); font-size:12px; font-weight:650; text-decoration:none; }.operations-card .tms-card-header>a svg { width:14px;height:14px; }
.operation-row { display:grid; grid-template-columns:minmax(180px,.75fr) minmax(160px,1fr); align-items:center; gap:24px; padding:14px 0; }
.operation-row+.operation-row { border-top:1px solid #f1f5f9; }
.operation-label { display:flex; align-items:center; gap:11px; }.operation-icon { width:35px;height:35px;display:grid;place-items:center;border-radius:9px;background:color-mix(in srgb,var(--op-color) 10%,white);color:var(--op-color); }.operation-icon svg{width:17px;height:17px;}
.operation-label strong,.operation-label small { display:block; }.operation-label strong { color:#334155;font-size:13px; }.operation-label small { margin-top:2px;color:#94a3b8;font-size:10px; }
.operation-value { display:grid;grid-template-columns:34px 1fr;align-items:center;gap:12px; }.operation-value>strong { color:#0f172a;font-size:17px;text-align:right; }
.attention-list { min-height:286px; }
.attention-item { display:grid;grid-template-columns:36px minmax(0,1fr) 16px;align-items:center;gap:11px;padding:13px 18px;border-bottom:1px solid #f1f5f9;color:inherit;text-decoration:none; }.attention-item:hover { background:#f8fafc; }.attention-item:last-child{border-bottom:0;}.attention-item>svg{width:15px;height:15px;color:#cbd5e1;}
.attention-status { width:34px;height:34px;display:grid;place-items:center;border-radius:9px; }.attention-status svg{width:17px;height:17px;}.attention-status.warning{background:#fffbeb;color:#d97706;}.attention-status.danger{background:#fef2f2;color:#dc2626;}
.attention-copy { min-width:0; }.attention-copy strong,.attention-copy span,.attention-copy small{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}.attention-copy strong{color:#1e293b;font-size:12px;}.attention-copy span{margin-top:2px;color:#64748b;font-size:11px;}.attention-copy small{margin-top:3px;color:#94a3b8;font-size:10px;}
.dashboard-empty { min-height:286px;display:grid;place-items:center;align-content:center;gap:6px;color:#94a3b8;text-align:center; }.dashboard-empty svg{width:27px;height:27px;color:#10b981;}.dashboard-empty strong{color:#475569;font-size:13px;}.dashboard-empty span{font-size:11px;}
.fleet-health { display:flex;align-items:center;gap:24px;margin-top:18px;padding:15px 18px;border:1px solid var(--tms-border);border-radius:12px;background:#fff; }.fleet-health>div{display:flex;align-items:center;gap:9px;padding-right:24px;border-right:1px solid var(--tms-border);}.fleet-health-icon{width:32px;height:32px;display:grid;place-items:center;border-radius:8px;background:#ecfdf5;color:#059669;}.fleet-health-icon.warning{background:#fffbeb;color:#d97706;}.fleet-health-icon svg{width:16px;height:16px;}.fleet-health p{margin:0;}.fleet-health strong,.fleet-health p span{display:block;}.fleet-health strong{color:#1e293b;font-size:14px;}.fleet-health p span{color:#64748b;font-size:10px;}.metric-note{display:flex;align-items:center;gap:6px;margin-left:auto!important;color:#94a3b8;font-size:10px;}.metric-note svg{width:14px;height:14px;flex:0 0 auto;}
.tms-toast-container { position:fixed; top:82px; right:20px; z-index:1090; display:grid; gap:9px; width:min(360px,calc(100vw - 32px)); }
.tms-toast { display:flex;align-items:flex-start;gap:10px;padding:13px 14px;border:1px solid var(--tms-border);border-left:4px solid var(--tms-primary);border-radius:11px;background:#fff;box-shadow:0 14px 35px rgba(15,23,42,.16); }.tms-toast.success{border-left-color:#059669}.tms-toast.danger{border-left-color:#dc2626}.tms-toast svg{width:18px;height:18px;flex:0 0 auto}.tms-toast span{font-size:13px;color:#334155;}

@media (max-width:1199.98px) { .executive-kpis{grid-template-columns:1fr 1fr}.dashboard-chart-grid,.dashboard-grid{grid-template-columns:1fr}.fleet-health{flex-wrap:wrap}.metric-note{width:100%;margin-left:0!important} }
@media (max-width:767.98px) { .dashboard-header-actions{width:100%}.dashboard-header-actions .btn{flex:1}.executive-kpis{grid-template-columns:1fr}.chart-wrap{height:220px}.priority-card{order:-1}.priority-card .attention-list{max-height:none}.operation-row{grid-template-columns:1fr;gap:8px}.fleet-health{align-items:flex-start;flex-direction:column;gap:12px}.fleet-health>div{width:100%;padding:0 0 12px;border-right:0;border-bottom:1px solid var(--tms-border)} }

@media (min-width:992px) { .topbar-title { visibility:hidden; } }
@media (max-width:1199.98px) {
  .dashboard-kpis { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .kpi-item:nth-child(3) { border-right:0; }
  .kpi-item:nth-child(n+4) { border-top:1px solid var(--tms-border); }
}
@media (max-width:991.98px) {
  .page-content { padding:24px; }
  .auth-shell { grid-template-columns:1fr; min-height:0; max-width:560px; }
  .auth-brand-panel { display:none; }
  .auth-form-panel { padding:48px; }
  .auth-mobile-logo { display:block; }
}
@media (max-width:767.98px) {
  .topbar { padding:0 16px; } .page-content { padding:20px 16px; }
  .page-header { flex-direction:column; } .page-header h2 { font-size:21px; }
  .dashboard-kpis { grid-template-columns:1fr 1fr; }
  .kpi-item,.kpi-item:nth-child(3) { border-right:1px solid var(--tms-border); border-top:1px solid var(--tms-border); }
  .kpi-item:nth-child(-n+2) { border-top:0; } .kpi-item:nth-child(2n) { border-right:0; }
  .status-section { grid-template-columns:1fr; gap:18px; }
  .filter-toolbar .form-control,.filter-toolbar .form-select { max-width:none; flex:1 1 180px; }
  .body-type-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:575.98px) {
  .body-type-grid { grid-template-columns:1fr; }
  .form-actions { flex-direction:column-reverse; }
  .form-actions .btn { width:100%; }
}
@media (max-width:575.98px) {
  body.auth-page { padding:0; background:#fff; }
  .auth-shell { border:0; border-radius:0; box-shadow:none; min-height:100vh; }
  .auth-form-panel { padding:36px 24px; background:#fff; }
  .auth-wrapper { padding:0; border:0; border-radius:0; box-shadow:none; }
  .dashboard-kpis { grid-template-columns:1fr; }
  .kpi-item,.kpi-item:nth-child(3),.kpi-item:nth-child(n+4) { border-right:0; border-top:1px solid var(--tms-border); }
  .kpi-item:first-child { border-top:0; }
}