/* ═══════════════════════════════════════════════════════════════════ Delivery Tracker 2.0 — Design System (PΔ.200) Generated from dashboard-v2-prototype.html (approved by owner 2026-07-11). Source of truth for tokens/components: DESIGN-SYSTEM.md. EVERYTHING is namespaced under .dt2 so it coexists with the Tailwind build used by legacy pages. Tokens (:root of the prototype) live on .dt2 itself. #chartTip is intentionally global (appended to ). Do not hand-edit colors outside the token table — see DESIGN-SYSTEM.md §1. ═══════════════════════════════════════════════════════════════════ */ .dt2{ --grab:#00B14F; --grab-dark:#008a3e; --grab-soft:#E6F7EE; --gojek:#EE2737; --gojek-dark:#C11225; --gojek-soft:#FDEDEE; --bg:#F4F6F5; --card:#FFFFFF; --ink:#101828; --muted:#667085; --line:#EAECF0; --amber:#F59E0B; --amber-soft:#FEF3E2; --red:#EF4444; --red-soft:#FDEBEB; --blue:#3B82F6; --blue-soft:#EBF2FE; --radius:16px; --shadow:0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.06); } .dt2 *, .dt2 *::before, .dt2 *::after{box-sizing:border-box; margin:0; padding:0;} .dt2{scroll-behavior:smooth;} .dt2{max-width:100%; overflow-x:hidden; overflow-x:clip;} .dt2{ font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif; background:var(--bg); color:var(--ink); font-size:14px; line-height:1.45; -webkit-font-smoothing:antialiased; overflow-wrap:break-word; } .dt2 .wrap{max-width:1180px; margin:0 auto; padding:0 20px 60px;} .dt2 .grid>*, .dt2 .ads-grid>*, .dt2 .ads-stats>*, .dt2 .ops-grid>*, .dt2 .actions-grid>*, .dt2 .prev-grid>*, .dt2 .mini-kpis>*, .dt2 .status-grid>*, .dt2 .flag-grid>*, .dt2 .soon-grid>*{min-width:0;} .dt2 svg{max-width:100%;} .dt2 .table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%;} .dt2 .topbar{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.94); backdrop-filter:blur(8px); border-bottom:1px solid var(--line);} .dt2 .topbar-in{max-width:1180px; margin:0 auto; padding:10px 20px 0; display:flex; align-items:center; gap:12px; flex-wrap:wrap;} .dt2 .brand{display:flex; align-items:center; gap:9px; font-weight:700; font-size:15px; letter-spacing:-.01em;} .dt2 .brand-mark{width:28px; height:28px; border-radius:8px; background:linear-gradient(135deg,var(--grab),#00D45F); display:flex; align-items:center; justify-content:center; color:#fff; font-size:13px; font-weight:800;} .dt2 .brand small{display:block; font-weight:500; color:var(--muted); font-size:11px; letter-spacing:0;} .dt2 .topbar .spacer{flex:1;} .dt2 .updated{color:var(--muted); font-size:12px;} .dt2 .updated .dot{display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--grab); margin-right:5px; animation:dt2-pulse 2.4s infinite;} @keyframes dt2-pulse{0%,100%{opacity:1}50%{opacity:.35}} .dt2 .rsel{position:relative; display:inline-flex; align-items:center;} .dt2 .rsel select{appearance:none; -webkit-appearance:none; border:1px solid var(--line); background:#fff; border-radius:12px; padding:8px 34px 8px 14px; font-size:13px; font-weight:700; color:var(--ink); font-family:inherit; cursor:pointer; box-shadow:var(--shadow); max-width:260px; text-overflow:ellipsis;} .dt2 .rsel select:hover{border-color:#CBD5E1;} .dt2 .rsel select:focus{outline:2px solid var(--grab-soft); border-color:var(--grab);} .dt2 .rsel::after{content:"▾"; position:absolute; right:12px; pointer-events:none; color:var(--muted); font-size:11px;} .dt2 .viewnav-row{max-width:1180px; margin:0 auto; padding:8px 20px 10px; overflow-x:auto; -webkit-overflow-scrolling:touch;} .dt2 .viewnav{display:inline-flex; background:#fff; border:1px solid var(--line); border-radius:12px; padding:4px; gap:2px; box-shadow:var(--shadow); white-space:nowrap;} /* PΔ.202 — the chrome renders tabs as links (server routes), the prototype used