/* ============================================================ Superior Logistics — VAULT shared theme Warm-brass-on-charcoal. Cinzel serif titles, sans body, white cards on cream, green/amber/red status pills. Load with: Fonts: Cinzel (via Google Fonts) in . ============================================================ */ :root{ --panel:#fff; --ink:#1b2430; --muted:#6b7787; --line:#e5e2d9; --brand:#b8933f; --brand-dark:#9a7a34; --brand-deep:#8a6d2c; --brand-tint:#f5ecdd; --gold-hi:#e9cf86; --gold-ink:#26210d; --header:#333940; --header-dark:#23272c; --ok:#3f7d3a; --okbg:#e7f0df; --warn:#a9781f; --warnbg:#f6ecd4; --bad:#b23b31; --badbg:#f6e2df; --soft:#f6f4ee; --serif:'Cinzel',Georgia,serif; --shadow:0 1px 3px rgba(40,32,12,.08),0 1px 2px rgba(40,32,12,.05); } /* --- base --- */ body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--soft)} .serif{font-family:var(--serif);letter-spacing:.3px} /* --- charcoal sticky header --- */ header.top,.v-head{background:linear-gradient(135deg,var(--header-dark),var(--header));color:#fff;padding:11px 22px;display:flex;align-items:center;gap:14px;position:sticky;top:0;z-index:50} header.top h1,.v-head .brand{font-size:17px;margin:0;font-weight:700;font-family:var(--serif);letter-spacing:.4px} .v-head .brand i{color:var(--gold-hi);font-style:normal} header.top .role,.v-head .role{font-size:10px;text-transform:uppercase;letter-spacing:.5px;background:rgba(255,255,255,.2);padding:2px 7px;border-radius:6px} .v-head a{color:#e8edf2;text-decoration:none;font-size:13px} .v-head button.out{background:rgba(255,255,255,.15);border:0;color:#fff;padding:7px 12px;border-radius:8px;font-size:12px;cursor:pointer;font-weight:600} /* --- tabs (used in header) --- */ .v-tabs{display:flex;gap:6px} .v-tabs button{background:rgba(255,255,255,.12);color:#fff;border:none;border-radius:9px;padding:8px 14px;cursor:pointer;font-size:13.5px;font-weight:600} .v-tabs button.on{background:linear-gradient(180deg,var(--gold-hi),var(--brand));color:var(--gold-ink)} /* --- page header --- */ .page-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:18px;gap:16px;flex-wrap:wrap} .page-head h2{margin:0;font-size:22px;font-family:var(--serif);letter-spacing:.3px} .page-head p{margin:4px 0 0;color:var(--muted);font-size:13px} /* --- buttons --- */ .btn{border:0;background:linear-gradient(180deg,var(--gold-hi),var(--brand));color:var(--gold-ink);padding:9px 15px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit} .btn:hover{background:linear-gradient(180deg,var(--brand),var(--brand-dark))} .btn.ghost{background:#fff;color:var(--brand-deep);border:1px solid var(--line)} .btn.sm{padding:5px 10px;font-size:12px} .btn.danger{background:#fff;color:var(--bad);border:1px solid var(--line)} .btn.green{background:var(--ok);color:#fff} .btn:disabled{opacity:.5;cursor:not-allowed} /* --- cards --- */ .card{background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);margin-bottom:20px;overflow:hidden} .card .ch,.card>h2{padding:14px 18px;border-bottom:1px solid var(--line);font-weight:700;font-size:14px;font-family:var(--serif);letter-spacing:.4px;display:flex;justify-content:space-between;align-items:center;background:linear-gradient(180deg,rgba(184,147,63,.07),transparent);margin:0} .card-body{padding:16px 18px} /* --- KPI tiles --- */ .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:14px;margin-bottom:22px} .kpi{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px;box-shadow:var(--shadow)} .kpi .n{font-size:28px;font-weight:800;line-height:1} .kpi .l{color:var(--muted);font-size:12px;margin-top:6px} /* --- tables --- */ table.v{width:100%;border-collapse:collapse;font-size:13px} table.v th{text-align:left;padding:10px 14px;color:var(--muted);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.4px;border-bottom:1px solid var(--line);background:var(--soft)} table.v td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:middle} table.v tr:last-child td{border-bottom:0} /* --- status pills --- */ .pill{display:inline-block;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:700;white-space:nowrap} .pill.ok{background:var(--okbg);color:var(--ok)} .pill.warn{background:var(--warnbg);color:var(--warn)} .pill.bad{background:var(--badbg);color:var(--bad)} .pill.muted{background:#f1f5f9;color:var(--muted)} .pill.blue{background:var(--brand-tint);color:var(--brand-deep)} /* --- chips / toolbar / forms --- */ .chip{padding:5px 11px;border:1px solid var(--line);background:#fff;border-radius:999px;font-size:12px;font-weight:600;color:var(--muted);cursor:pointer} .chip.on{background:var(--brand-deep);color:#fff;border-color:var(--brand-deep)} .toolbar{display:flex;gap:10px;margin-bottom:14px;align-items:center;flex-wrap:wrap} .toolbar input,.toolbar select{padding:8px 11px;border:1px solid var(--line);border-radius:8px;font-size:13px;background:#fff} .fg{margin-bottom:14px} .fg label{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:5px} .fg input,.fg select,.fg textarea{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:8px;font-size:14px;font-family:inherit} /* --- modal / toast / spinner --- */ .ov{position:fixed;inset:0;background:rgba(15,23,42,.45);display:flex;align-items:flex-start;justify-content:center;z-index:100;padding:40px 16px;overflow:auto} .modal{background:#fff;border-radius:14px;width:100%;max-width:640px;box-shadow:0 20px 50px rgba(0,0,0,.3)} .toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:11px 18px;border-radius:9px;font-size:13px;z-index:200;box-shadow:0 8px 24px rgba(0,0,0,.25)} .spinner::before{content:"";display:inline-block;width:22px;height:22px;border:3px solid var(--line);border-top-color:var(--brand);border-radius:50%;animation:v-spin .7s linear infinite} @keyframes v-spin{to{transform:rotate(360deg)}} /* --- login (dark radial) --- */ .login-wrap{min-height:100vh;display:grid;place-items:center;background:radial-gradient(130% 100% at 50% 20%,#2b3138,#14181c 70%,#0d1013)} .login-card{background:#fff;border-radius:16px;padding:34px;width:360px;box-shadow:0 24px 60px rgba(0,0,0,.45);border-top:3px solid var(--brand)} .login-card h1{font-family:var(--serif);letter-spacing:.3px;font-size:19px} /* --- big mobile action button (timeclock) --- */ .big-btn{display:block;width:100%;border:0;border-radius:14px;padding:20px;font-size:20px;font-weight:800;margin-top:14px;cursor:pointer;font-family:var(--serif);letter-spacing:.3px} .big-btn.gold{background:linear-gradient(180deg,var(--gold-hi),var(--brand));color:var(--gold-ink)} .big-btn.out{background:#fff;color:var(--bad);border:1.5px solid var(--line)} .big-btn.ghost{background:#fff;color:var(--brand-deep);border:1.5px solid var(--line)} /* --- mobile / responsive rules (phones & small tablets) --- The app is one responsive site: full layout on office desktops, compact tap-friendly layout on drivers' phones. These rules target the shared header patterns used across pages (.head, header, .tabs) plus tables and content, so pages fit narrow screens. */ @media (max-width:760px){ /* headers wrap instead of overflowing off-screen */ .head, header{ flex-wrap:wrap !important; row-gap:8px; padding-left:12px !important; padding-right:12px !important; } .head .tabs, header .tabs{ margin-left:0 !important; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; flex-wrap:nowrap; padding-bottom:2px; } .head .tabs::-webkit-scrollbar, header .tabs::-webkit-scrollbar{ height:0; } .tabs .tab, .head .tab{ flex:0 0 auto; } /* the shared nav dropdown (Clock + Menu) is the primary nav on mobile; give it room */ .slo-nav{ margin-left:auto; } /* wide tables scroll horizontally inside their container rather than stretching the page */ .v-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; } .v-scroll table{ min-width:560px; } table{ max-width:100%; } /* content sizing: cards and wraps use full width with comfortable padding */ .wrap, .container, main{ padding-left:12px !important; padding-right:12px !important; } .card{ border-radius:12px; } /* inputs at 16px avoid iOS auto-zoom on focus */ input, select, textarea{ font-size:16px !important; } /* tap targets a bit larger */ .btn{ padding-top:10px; padding-bottom:10px; } } /* Pages can mark their old inline nav links with class="desktop-nav" to hide them on mobile (the ☰ Menu dropdown covers navigation there, preventing header overflow). */ @media (max-width:760px){ .desktop-nav{ display:none !important; } }