/* ============================================================
   SKEDS Design System (Road A, Step 18)
   One stylesheet shared by every live screen. The look is lifted
   from the SKEDS prototype: navy rail, Inter, soft cards, status
   pills. Screens keep their own logic; THIS file owns appearance.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap');

:root{
  --ink:#0B1B33; --ink-2:#1F2D44;
  --paper:#F5F8FC; --panel:#FFFFFF;
  --line:#E3E9F2; --line-soft:#EEF3F9;
  --muted:#5B6B82; --muted-2:#8696AB;
  --blue:#2563EB; --blue-deep:#1E3A8A;
  --green:#16A34A; --amber:#FB8C00; --red:#DC2626; --indigo:#6366F1;
  --brand:#F0652A;                       /* SKEDS orange */
  --rail:#0B1B33; --rail-2:#13294B; --rail-line:#22365C;
  --shadow:0 18px 40px -22px rgba(11,27,51,.35);
  --shadow-sm:0 8px 20px -14px rgba(11,27,51,.3);
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{font-family:'Inter',system-ui,sans-serif;background:var(--paper);color:var(--ink);display:flex}

/* ---------- the navy rail ---------- */
.rail{width:216px;flex:none;background:var(--rail);color:#CDD8EA;min-height:100vh;
  display:flex;flex-direction:column;padding:18px 12px;position:sticky;top:0}
.rail .brand{font-weight:800;font-size:21px;color:#fff;letter-spacing:.02em;padding:2px 10px 0;display:flex;align-items:center;gap:9px}
.rail .brand img{height:30px;width:auto}
.rail .brand span{color:var(--brand)}
.rail .tag{font-size:10.5px;color:#8FA1BE;letter-spacing:.05em;padding:2px 10px 16px}
.rail a{display:flex;align-items:center;gap:10px;color:#CDD8EA;text-decoration:none;
  font-size:13.5px;font-weight:600;padding:9px 10px;border-radius:9px;margin:2px 0}
.rail a:hover{background:var(--rail-2);color:#fff}
.rail a.on{background:var(--blue);color:#fff}
.rail a svg{width:16px;height:16px;flex:none}
.rail .foot{margin-top:auto;font-size:11px;color:#8FA1BE;padding:10px}

/* ---------- main column ---------- */
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:14px;padding:14px 24px;
  border-bottom:1px solid var(--line);background:rgba(245,248,252,.9);position:sticky;top:0;z-index:5}
.topbar h1{font-size:18px;margin:0;font-weight:800}
.topbar .spacer{flex:1}
.topbar .who{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:8px}
.topbar .who .av{width:30px;height:30px;border-radius:50%;background:var(--blue);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:12px}
.content{padding:20px 24px;max-width:1080px;width:100%}

/* ---------- cards, forms, buttons ---------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:18px 20px;margin:0 0 16px;box-shadow:var(--shadow-sm)}
.card h2{font-size:14px;margin:0 0 12px;font-weight:800;letter-spacing:.01em}
input,select{padding:9px 11px;border:1px solid #CBD5E1;border-radius:9px;margin:3px 8px 3px 0;
  font-family:inherit;font-size:13.5px;color:var(--ink);background:#fff}
input:focus,select:focus{outline:2px solid #BFDBFE;border-color:var(--blue)}
button{padding:9px 16px;border:0;border-radius:9px;background:var(--blue);color:#fff;
  font-weight:700;cursor:pointer;margin:2px;font-family:inherit;font-size:13px}
button:hover{background:var(--blue-deep)}
button.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
button.ghost:hover{background:var(--line-soft)}

/* ---------- tables ---------- */
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:left;color:var(--muted);font-size:11.5px;letter-spacing:.04em;
  text-transform:uppercase;border-bottom:1px solid var(--line);padding:7px 6px}
td{padding:10px 6px;border-bottom:1px solid var(--line-soft)}
tbody tr:hover{background:#F7FAFF}
td.num{text-align:right;font-variant-numeric:tabular-nums}

/* ---------- status pills ---------- */
.pill{font-size:11px;font-weight:700;padding:3px 10px;border-radius:999px;white-space:nowrap}
.scheduled{background:#EEF2F7;color:#64748B}
.enroute{background:#FFF4E5;color:#B45309}
.inprogress{background:#EEF4FF;color:#2563EB}
.done,.accepted,.paid{background:#EAF7EF;color:#16A34A}
.cancelled,.declined,.void{background:#FDECEC;color:#DC2626}
.draft{background:#EEF2F7;color:#64748B}
.sent{background:#EEF4FF;color:#2563EB}
.approved{background:#F1EDFF;color:#6366F1}
.expired{background:#FFF4E5;color:#B45309}

/* ---------- team role pills ---------- */
.r-owner{background:#F1EDFF;color:#6366F1}
.r-admin{background:#FCE7F3;color:#BE185D}
.r-manager{background:#EEF4FF;color:#2563EB}
.r-dispatcher{background:#FFF4E5;color:#B45309}
.r-tech{background:#EAF7EF;color:#16A34A}
.r-readonly{background:#EEF2F7;color:#64748B}

/* ---------- login gate ---------- */
.gate{margin:10vh auto;max-width:380px;width:100%}
.gate .card{padding:26px}
.gate-logo{display:block;height:52px;max-width:85%;width:auto;object-fit:contain;margin:0 auto 16px}
.gate h1{font-size:20px;margin:0 0 2px}
.gate .sub{color:var(--muted);font-size:13px;margin:0 0 16px}
.gate input{width:100%;margin:5px 0}
.gate button{width:100%;margin-top:6px}

/* ---------- bits ---------- */
#msg{color:var(--muted);font-size:13px;min-height:18px;white-space:pre-wrap;margin-top:6px}
.err{color:var(--red)!important;font-weight:600}
.meta{color:var(--muted);font-size:12.5px}
.lrow input,.lrow select{font-size:12.5px;padding:6px 8px}
#preview{font-size:14px;font-weight:800;margin:8px 0}
#preview span{font-weight:400}
.bal{font-weight:800}
.cl{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:10px 0}
.cl b{font-size:15px}
.ct{font-size:13px;padding:4px 0;border-top:1px dashed var(--line)}
.ct:first-of-type{border-top:1px solid var(--line);margin-top:6px;padding-top:7px}
.jpill{font-size:11px;font-weight:700;background:#EAF7EF;color:#16A34A;border-radius:999px;padding:2px 9px;margin-left:6px}
.addct{margin-top:8px}
.addct input{font-size:12.5px;padding:6px 8px}