:root { --navy:#0e223d; --blue:#2475d4; --ink:#17212f; --muted:#667387; --line:#e8edf3; --bg:#f4f7fb; --white:#fff; --teal:#11a893; --gold:#e8a92b; --purple:#8761d7; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
.app-shell { max-width:1540px; margin:auto; padding:30px 28px 48px; }
.page-header { display:flex; justify-content:space-between; align-items:flex-start; gap:24px; margin-bottom:24px; }
.eyebrow { color:var(--blue); font-size:.75rem; letter-spacing:.13em; font-weight:800; margin:0 0 6px; }
h1,h2,p { margin:0; } h1 { color:var(--navy); font-size:2rem; letter-spacing:-.04em; } h2 { font-size:1rem; letter-spacing:-.02em; }
.subtitle,.panel-title p { color:var(--muted); font-size:.88rem; margin-top:5px; }
.page-nav { display:flex; flex-wrap:wrap; gap:7px; margin-top:16px; }.page-nav a { color:var(--muted); text-decoration:none; padding:7px 10px; border-radius:8px; font-size:.8rem; font-weight:750; }.page-nav a:hover { color:var(--blue); background:#edf5ff; }.page-nav a.active { color:var(--blue); background:#e8f2ff; }
.header-meta { margin-top:10px; display:flex; align-items:center; gap:8px; color:var(--muted); font-size:.83rem; white-space:nowrap; }
.status-dot { background:var(--teal); width:9px; height:9px; border-radius:50%; box-shadow:0 0 0 4px #d9f4ee; }
.filter-panel,.panel,.kpi-card { background:var(--white); border:1px solid var(--line); border-radius:16px; box-shadow:0 3px 14px rgba(18,43,75,.035); }
.filter-panel { padding:16px 18px 18px; margin-bottom:18px; }
.filter-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; color:var(--navy); font-weight:750; font-size:.88rem; }.filter-help { color:var(--muted); font-size:.72rem; margin:11px 0 0; }.address-filter { color:var(--muted); display:grid; gap:6px; font-size:.72rem; font-weight:700; }.filter-label { display:block; }.address-combobox { position:relative; min-height:38px; display:flex; flex-wrap:wrap; align-items:center; gap:5px; padding:4px 7px; background:#fff; border:1px solid #dce4ee; border-radius:8px; }.address-combobox:focus-within { border-color:var(--blue); box-shadow:0 0 0 3px #e3effe; }.address-chips { display:flex; flex-wrap:wrap; gap:4px; }.address-chip { max-width:190px; display:flex; align-items:center; gap:5px; color:#16599c; background:#e8f2ff; padding:4px 6px; border-radius:6px; font-size:.68rem; font-weight:750; }.address-chip span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.address-chip b { color:#3d79ba; font-size:.95rem; line-height:.7; }.address-combobox input { min-width:142px; flex:1; min-height:27px; border:0; box-shadow:none; padding:3px; font-size:.76rem; }.address-combobox input:focus { box-shadow:none; }.address-options { position:absolute; z-index:500; left:0; right:0; top:calc(100% + 5px); max-height:260px; overflow:auto; padding:5px; background:#fff; border:1px solid #dce4ee; border-radius:9px; box-shadow:0 12px 24px rgba(24,48,78,.14); }.address-options button { display:block; width:100%; color:var(--ink); background:transparent; padding:8px 9px; text-align:left; border-radius:6px; font-size:.74rem; font-weight:600; }.address-options button:hover { color:var(--blue); background:#edf5ff; }.address-options p { padding:8px; color:var(--muted); font-size:.74rem; }
.check-option { display:flex; align-items:flex-start; gap:8px; padding:8px 9px; border-radius:6px; color:var(--ink); cursor:pointer; font-size:.74rem; font-weight:600; line-height:1.3; }.check-option:hover { background:#edf5ff; color:var(--blue); }.check-option input { width:14px; min-width:14px; min-height:14px; height:14px; margin:1px 0 0; padding:0; accent-color:var(--blue); }.check-option span { overflow-wrap:anywhere; }
button { color:var(--blue); background:#eef6ff; border:0; border-radius:8px; padding:7px 10px; cursor:pointer; font-weight:700; }
.filters { display:grid; grid-template-columns:repeat(auto-fit,minmax(132px,1fr)); gap:11px; }
label { color:var(--muted); display:grid; gap:6px; font-size:.72rem; font-weight:700; }
select,input { width:100%; color:var(--ink); background:#fff; border:1px solid #dce4ee; border-radius:8px; padding:9px 10px; min-height:38px; font:inherit; font-size:.82rem; outline:none; }
select:focus,input:focus { border-color:var(--blue); box-shadow:0 0 0 3px #e3effe; }
.kpi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:18px; }
.admin-summary-panel { margin-bottom:18px; }.admin-summary-table { min-width:420px; }.admin-summary-table th:nth-child(2),.admin-summary-table th:nth-child(3),.admin-summary-table td:nth-child(2),.admin-summary-table td:nth-child(3) { text-align:right; }.admin-summary-table td:first-child { color:var(--navy); font-weight:750; }
.admin-expand-btn { width:100%; display:flex; align-items:center; gap:7px; padding:2px 0; color:var(--navy); background:transparent; text-align:left; font-size:.79rem; }.admin-expand-btn:hover { color:var(--blue); background:transparent; }.admin-chevron { width:14px; color:var(--blue); font-size:.86rem; text-align:center; }.admin-detail-row>td { padding:0 10px 14px 31px; border-top:0; background:#f7faff; }.admin-strata-wrap { padding:10px 12px; border-left:3px solid #d9e9fb; }.admin-strata-table { min-width:560px; background:#fff; border:1px solid #e3eaf2; border-radius:9px; overflow:hidden; }.admin-strata-table th { padding:9px 10px; background:#f1f6fc; }.admin-strata-table td { padding:8px 10px; font-size:.74rem; }.admin-strata-table th:first-child,.admin-strata-table td:first-child { text-align:left !important; }.admin-strata-table th:nth-child(2),.admin-strata-table th:nth-child(3),.admin-strata-table td:nth-child(2),.admin-strata-table td:nth-child(3) { text-align:right; }.strata-dot { display:inline-block; width:9px; height:9px; margin-right:8px; border-radius:50%; background:var(--strata-color); box-shadow:0 0 0 2px #fff,0 0 0 3px color-mix(in srgb,var(--strata-color),transparent 65%); }
.history-map-legend { position:absolute; z-index:950; left:12px; bottom:24px; display:grid; gap:6px; width:205px; padding:10px 11px; color:#526276; background:rgba(255,255,255,.95); border:1px solid rgba(202,218,233,.95); border-radius:10px; box-shadow:0 4px 15px rgba(14,42,72,.16); pointer-events:none; font-size:.66rem; }.history-map-legend strong { color:var(--navy); margin-bottom:1px; font-size:.72rem; }.history-map-legend span { display:flex; align-items:center; gap:7px; }.history-map-legend i { width:10px; height:10px; flex:0 0 10px; border:1px solid #fff; border-radius:50%; background:var(--strata-color); box-shadow:0 0 0 1px rgba(21,43,68,.2); }
@media(max-width:650px){.history-map-legend{top:86px;bottom:auto;left:10px;width:185px;padding:8px 9px}.admin-detail-row>td{padding-left:16px}}
.kpi-card { position:relative; overflow:hidden; padding:17px 18px; } .kpi-card:before { content:""; position:absolute; left:0; top:0; width:5px; height:100%; background:var(--blue); }.accent-gold:before{background:var(--gold)}.accent-teal:before{background:var(--teal)}.accent-purple:before{background:var(--purple)}
.kpi-card span { display:block; color:var(--muted); font-size:.78rem; font-weight:700; margin-bottom:7px; }.kpi-card strong { display:block; color:var(--navy); font-size:1.42rem; letter-spacing:-.03em; }.kpi-card small { display:block; color:var(--muted); margin-top:7px; font-size:.74rem; }
.dashboard-grid { display:grid; grid-template-columns:1.55fr .95fr; gap:18px; }.panel { padding:18px; }.panel-title { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px; }.metric-chip { color:var(--blue); background:#edf5ff; border-radius:999px; padding:5px 9px; font-size:.72rem; font-weight:800; white-space:nowrap; }
.chart-slot { height:258px; }.trend-panel { min-width:0; }.rank-panel { min-width:0; }.salesman-chart { min-height:258px; display:grid; align-content:start; gap:11px; }.bar-row { display:grid; grid-template-columns:minmax(75px,.85fr) 2fr 74px; align-items:center; gap:9px; font-size:.73rem; }.bar-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink); }.bar-track { height:9px; background:#edf1f6; border-radius:999px; overflow:hidden; }.bar-fill { height:100%; background:linear-gradient(90deg,#52a6ff,#2475d4); border-radius:999px; }.bar-value { text-align:right; color:var(--muted); font-size:.7rem; }.history-grid { display:grid; grid-template-columns:1.6fr .9fr; gap:18px; }.month-chart { min-height:258px; display:grid; align-content:center; gap:13px; }.month-row { display:grid; grid-template-columns:82px 1fr; gap:10px; align-items:center; }.month-row strong { display:block; color:var(--ink); font-size:.76rem; }.month-row small { display:block; color:var(--muted); font-size:.7rem; margin-top:3px; }.month-track { height:12px; overflow:hidden; border-radius:999px; background:#edf1f6; }.month-track i { display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,#11a893,#4bc8ba); }
.composition-panel { grid-column:1 / 2; }.type-chart { display:grid; grid-template-columns:145px 1fr; gap:18px; align-items:center; min-height:188px; }.donut-wrap { display:grid; place-items:center; }.donut { width:138px; height:138px; border-radius:50%; display:grid; place-items:center; position:relative; }.donut:after { content:""; position:absolute; width:82px; height:82px; background:#fff; border-radius:50%; }.donut-label { position:relative; z-index:1; text-align:center; font-size:.68rem; color:var(--muted); }.donut-label b { color:var(--navy); display:block; font-size:1.08rem; }.legend { display:grid; gap:8px; }.legend-item { display:grid; grid-template-columns:9px 1fr auto; gap:7px; align-items:center; color:var(--muted); font-size:.73rem; }.legend-item strong { color:var(--ink); font-weight:700; }.legend-swatch { width:9px; height:9px; border-radius:3px; }
.map-panel { grid-column:1 / -1; }.map-title { margin-bottom:12px; } #map { height:480px; border-radius:12px; overflow:hidden; background:#e7edf5; }.leaflet-popup-content { min-width:225px; line-height:1.45; }.popup-name { color:var(--navy); font-size:.88rem; margin:0 0 7px; }.popup-grid { display:grid; grid-template-columns:1fr auto; gap:4px 10px; color:#607086; font-size:.73rem; }.popup-grid b { color:var(--ink); text-align:right; }.leaflet-tooltip { border:0; border-radius:8px; padding:6px 8px; box-shadow:0 4px 14px rgba(10,31,59,.16); font-weight:700; }
.coverage-layout { display:grid; grid-template-columns:minmax(0,1.8fr) minmax(300px,.8fr); gap:18px; }.coverage-map-panel { min-width:0; }.coverage-map-panel #coverageMap { height:560px; border-radius:12px; overflow:hidden; background:#e7edf5; }.route-panel { min-width:0; display:flex; flex-direction:column; }.route-list { overflow:auto; max-height:433px; margin-bottom:14px; }.route-item { display:grid; grid-template-columns:25px 1fr 28px; gap:9px; align-items:start; padding:10px 0; border-bottom:1px solid var(--line); }.route-item strong { font-size:.78rem; line-height:1.3; display:block; }.route-item small { display:block; color:var(--muted); font-size:.7rem; margin-top:3px; }.route-item button { background:transparent; color:#a2acba; padding:1px 3px; font-size:1.2rem; }.route-index,.route-number span { width:23px; height:23px; border-radius:50%; color:#fff; background:var(--gold); display:grid; place-items:center; font-size:.7rem; font-weight:800; }.route-number { background:transparent; border:0; }.route-number span { border:2px solid #fff; box-shadow:0 2px 7px rgba(11,36,67,.28); }.route-actions { margin-top:auto; display:flex; gap:8px; }.route-actions button { flex:1; }.primary-button { color:#fff; background:var(--blue); }.primary-button:disabled { cursor:not-allowed; background:#b8c9de; }.route-note { color:var(--muted); font-size:.73rem; line-height:1.45; margin-top:12px; }.popup-route-button { width:100%; margin-top:10px; color:#fff; background:var(--blue); font-size:.75rem; }
.fixed-start { display:grid; grid-template-columns:25px 1fr; gap:9px; align-items:center; padding:0 0 10px; border-bottom:1px solid var(--line); }.fixed-start-icon,.base-marker span { width:25px; height:25px; border-radius:50%; display:grid; place-items:center; color:#fff; background:#d94f45; font-size:.72rem; font-weight:850; }.fixed-start strong { display:block; font-size:.79rem; }.fixed-start small { color:var(--muted); font-size:.7rem; }.base-marker { background:transparent; border:0; }.base-marker span { width:34px; height:34px; border:3px solid #fff; box-shadow:0 3px 9px rgba(120,28,21,.35); font-size:.82rem; }.popup-start { color:var(--muted); font-size:.77rem; margin:0; }
.table-panel { margin-top:18px; }.table-wrap { overflow:auto; } table { border-collapse:collapse; width:100%; min-width:720px; } th { text-align:left; color:var(--muted); font-size:.7rem; text-transform:uppercase; letter-spacing:.04em; padding:0 10px 10px; } td { border-top:1px solid var(--line); padding:11px 10px; font-size:.79rem; } td:last-child,th:last-child,td:nth-last-child(2),th:nth-last-child(2){text-align:right}.outlet-name { color:var(--navy); font-weight:750; }.empty { color:var(--muted); padding:28px 0; text-align:center; }
.table-tools { display:flex; align-items:flex-end; gap:10px; }.sort-control { min-width:142px; color:var(--muted); font-size:.68rem; }.sort-control select { margin-top:4px; min-height:33px; padding:6px 8px; font-size:.72rem; }.outlet-code { color:var(--muted); font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.73rem; }.history-table td:nth-last-child(2),.history-table th:nth-last-child(2){text-align:left;}
.monthly-history-table td:last-child,.monthly-history-table th:last-child { text-align:center; }.expand-button { color:var(--blue); background:#edf5ff; padding:6px 8px; font-size:.71rem; white-space:nowrap; }.month-detail-row td { padding:0; background:#f8fbff; }.month-detail-wrap { overflow:auto; padding:12px 14px 16px; }.month-detail-wrap table { min-width:780px; }.month-detail-wrap th { padding-top:4px; }.month-detail-wrap td { background:transparent; padding:9px 10px; }.month-detail-wrap td:nth-child(-n+4),.month-detail-wrap th:nth-child(-n+4) { text-align:left !important; }.month-detail-wrap td:nth-last-child(2),.month-detail-wrap th:nth-last-child(2) { text-align:right; }.month-detail-wrap td:last-child,.month-detail-wrap th:last-child { text-align:right; }.month-detail-wrap td:nth-child(2),.month-detail-wrap th:nth-child(2) { text-align:left !important; }
.date-total-row td { color:#315272; background:#eaf3ff !important; font-size:.75rem; font-weight:700; }.date-total-row td:nth-last-child(2),.date-total-row td:last-child { text-align:right; }
.driver-total-row td { background:#fff8e8; color:#6c5310; border-top:2px solid #e8c96e; padding-top:8px; padding-bottom:8px; }.driver-total-row td:first-child,.driver-total-row td:nth-child(2),.driver-total-row td:nth-child(3),.driver-total-row td:nth-child(4) { text-align:left !important; }.driver-total-row td:nth-child(2) strong,.driver-total-row td:nth-child(2) small { display:block; text-align:left !important; }.driver-total-row td:nth-child(2) small { margin-top:3px; color:#8b742c; font-size:.68rem; font-weight:700; }.driver-total-row td:nth-child(5) { text-align:right !important; }.driver-total-row td:last-child { text-align:right; }
.distance-pending { color:#8a6a12; font-size:.72rem; }.distance-unavailable { color:var(--muted); }
.chart-svg { width:100%; height:100%; overflow:visible; }.grid-line { stroke:#e9eff5; stroke-width:1; }.axis-text { fill:#7d8ba0; font-size:10px; }.line-path { fill:none; stroke:#2475d4; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }.area-path { fill:url(#areaGradient); }.point { fill:#fff; stroke:#2475d4; stroke-width:2; }
@media (max-width:1100px) { .filters{grid-template-columns:repeat(4,1fr)}.dashboard-grid{grid-template-columns:1fr}.history-grid{grid-template-columns:1fr}.composition-panel{grid-column:auto}.map-panel{grid-column:auto}.kpi-grid{grid-template-columns:repeat(2,1fr)}.coverage-layout{grid-template-columns:1fr}.route-list{max-height:280px} }
@media (max-width:650px) { .app-shell{padding:20px 14px 34px}.page-header{display:block}.header-meta{margin-top:14px}.filters{grid-template-columns:repeat(2,1fr)}.kpi-grid{grid-template-columns:1fr 1fr;gap:10px}.kpi-card{padding:14px}.kpi-card strong{font-size:1.08rem}.type-chart{grid-template-columns:1fr}.donut-wrap{justify-content:start}.bar-row{grid-template-columns:100px 1fr 64px}#map{height:380px} }
#historyMap { height:640px !important; }
@media (max-width:650px) { #historyMap { height:500px !important; } }
#depotInput { text-align:left !important; justify-self:stretch; }
.address-options .check-option { display:flex !important; align-items:flex-start; justify-content:flex-start; text-align:left !important; }
.address-options .check-option span { flex:1; text-align:left !important; }
.address-options label.check-option { display:grid !important; grid-template-columns:18px minmax(0,1fr) !important; align-items:center !important; justify-items:start !important; width:100% !important; box-sizing:border-box; }
.address-options label.check-option input { justify-self:start !important; }
.address-options label.check-option span { display:block; width:100%; text-align:left !important; }

/* Layout filter: beri ruang cukup agar combobox tidak terlihat bertumpuk di desktop. */
.filters { grid-template-columns: repeat(5, minmax(150px, 1fr)); }
@media (max-width: 1100px) { .filters { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 500px) { .filters { grid-template-columns: 1fr; } }