/* ========================================================================= admin-refresh.css — shared UI refresh for the MachTanker admin. Loaded AFTER css/style.css (via includes/header.php, in ) so these rules win on source order. Aligns the admin to the driver-app brand (blue #0B66A8) and adds mobile-safe defaults + reusable status badges. Conservative & additive: tune or remove this one file to revert. ========================================================================= */ :root { --brand: #0B66A8; --brand-hover: #095487; --brand-50: #E7F1F8; --success: #1B7A3D; --success-50: #E6F0EA; --warning: #B26A00; --warning-50: #FBF1E3; --error: #C0362C; --error-50: #F8E9E7; --muted: #475569; --muted-50: #EEF1F5; --ink: #1F2933; --text: #344054; --label: #667085; --border: #E5E9F0; --canvas: #F2F4F7; } /* ---- Brand: recolor the template's green/magenta to brand blue ---- */ .btn-primary, .bg-primary { background-color: var(--brand) !important; border-color: var(--brand) !important; color: #fff !important; } .btn-primary:hover, .btn-primary:focus, .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active { background-color: var(--brand-hover) !important; border-color: var(--brand-hover) !important; } .btn-primary:focus, .btn-primary.focus { box-shadow: 0 0 0 .2rem rgba(11, 102, 168, .35) !important; } .text-primary { color: var(--brand) !important; } .btn-outline-primary { color: var(--brand) !important; border-color: var(--brand) !important; } .btn-outline-primary:hover { background-color: var(--brand) !important; color: #fff !important; } a { color: var(--brand); } a:hover { color: var(--brand-hover); } /* active sidebar item accent */ .deznav .metismenu > li.active > a, .deznav .metismenu > li > a:hover, .deznav .metismenu > li > a:focus { color: var(--brand) !important; } /* page canvas: drop the faint green tint */ body { background-color: var(--canvas) !important; } /* ---- Reusable status badge (used by lists + dashboard) ---- */ .st-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1.4; white-space: nowrap; } .st-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .st-ongoing { color: var(--brand); background: var(--brand-50); } .st-completed { color: var(--success); background: var(--success-50); } .st-pending { color: var(--warning); background: var(--warning-50); } .st-cancelled { color: var(--error); background: var(--error-50); } .st-expired { color: var(--error); background: var(--error-50); } .st-neutral { color: var(--muted); background: var(--muted-50); } /* ---- Card polish ---- */ .card { border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 1px 3px rgba(16, 24, 40, .05); } /* ========================================================================= MOBILE-SAFE DEFAULTS (the client uses the admin mostly on a phone) Goal: NO horizontal page scroll; tables scroll inside their own box; primary info/actions stay reachable; comfortable tap targets. ========================================================================= */ /* never let a page overflow sideways (a stray wide element shouldn't shift the whole page) */ html, body { max-width: 100%; overflow-x: hidden; } /* tables: keep horizontal scroll INSIDE the .table-responsive box, momentum-scroll on touch */ .table-responsive { -webkit-overflow-scrolling: touch; width: 100%; } @media (max-width: 768px) { /* comfortable tap targets for row actions / small buttons */ .btn, .btn-sm, table .btn { min-height: 38px; } /* let action-button groups wrap instead of pushing the row wider */ td .btn + .btn, td a + a { margin-top: 2px; } /* tighten card padding so more content fits the first view */ .card-body { padding: 14px; } /* keep media fluid (images/embeds never force horizontal scroll) */ img, video, iframe, embed, object { max-width: 100%; height: auto; } /* stat numbers a touch smaller so cards aren't oversized on a phone */ .dashboard_bar { font-size: 18px; } } /* ========================================================================= PERF FIX (2026-06-03): deznav hides ALL page content (#main-wrapper opacity:0) until window.load — i.e. until EVERY resource (1.5MB+ JS/CSS, ~2MB pdfmake on vender_rep) finishes downloading + parsing. Even with Cloudflare caching + gzip the admin felt slow / showed a long blank because content waits for window.load. Reveal content immediately (as soon as this CSS applies) and drop the full-screen blocking spinner. ========================================================================= */ #main-wrapper { opacity: 1 !important; } #preloader { display: none !important; }