/* ============================================================
   Blue Ridge — OFFICE CHROME  ·  "machine shop mission control"
   Loaded AFTER each office page's inline <style>, so equal-
   specificity rules here win by cascade order.
   index.html (the field app / paper invoice) does NOT load this.
   Additive only: no ids or behavior change, presentation only.
   rev: v16.1
   ============================================================ */

:root{
  /* flip the palette: light ink on dark steel */
  --ink:#e9eff6;
  --ink-soft:#93a7bc;
  --line:#33495f;
  --line-soft:#22334a;
  --steel:#6ea8dc;
  --good:#4fca82;
  --bad:#ff6f61;
  --flag:#f0a63a;               /* brass — the motor-shop accent */
  --panel:rgba(15,24,37,.82);
  --panel-edge:#2a3c52;
  --glow:0 0 0 1px rgba(110,168,220,.07), 0 18px 50px rgba(0,0,0,.5);
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}

/* ---------- hull: dark steel + faint blueprint grid ---------- */
body{
  color:var(--ink);
  background:
    radial-gradient(1000px 520px at 50% -14%, rgba(110,168,220,.16), transparent 62%),
    repeating-linear-gradient(0deg, transparent 0 47px, rgba(110,168,220,.045) 47px 48px),
    repeating-linear-gradient(90deg, transparent 0 47px, rgba(110,168,220,.045) 47px 48px),
    linear-gradient(180deg,#0a121d 0%,#0d1726 55%,#0a111c 100%);
  background-attachment:fixed;
}
a{color:var(--steel)}

/* ---------- masthead ---------- */
.ctop h1{color:#fff;letter-spacing:.4px}
.ctop img{width:76px;height:auto;filter:drop-shadow(0 0 14px rgba(110,168,220,.35))}
#who{font-family:var(--mono);font-size:.72rem !important;letter-spacing:.06em;color:var(--ink-soft) !important}

/* ---------- section nav (shared across office pages) ---------- */
.onav{display:flex;gap:2px;flex-wrap:wrap;align-items:center;margin:-2px 0 16px;border-bottom:1px solid var(--panel-edge)}
.onav a{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);text-decoration:none;padding:9px 12px;margin-bottom:-1px;
  border-bottom:2px solid transparent;white-space:nowrap;
}
.onav a:hover{color:#fff}
.onav a.on{color:#fff;border-bottom-color:var(--flag)}
.onav a.field{margin-left:auto;color:var(--flag)}
.onav a.field:hover{color:#ffc46b}
@media(max-width:560px){.onav a{padding:9px 8px;font-size:.64rem}.onav a.field{margin-left:0}}

/* ---------- panels: dark glass with a machined edge ---------- */
.panel{background:var(--panel);border:1px solid var(--panel-edge);box-shadow:var(--glow);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.panel h3{color:#fff}
.card{background:rgba(20,31,47,.7);border-color:var(--line)}

/* ---------- stat cards: telemetry ---------- */
.stat{
  background:linear-gradient(180deg,rgba(24,37,55,.92),rgba(13,22,35,.92));
  border:1px solid var(--panel-edge);position:relative;overflow:hidden;
  transition:border-color .15s, transform .15s;
}
.stat::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--steel) 0%,rgba(110,168,220,.05) 70%)}
.stat:hover{border-color:var(--steel);transform:translateY(-1px)}
.stat .lbl{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;color:var(--ink-soft)}
.stat .num{
  font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:600;color:#fff;
  text-shadow:0 0 16px rgba(110,168,220,.35);
}
.stat.flag::before{background:linear-gradient(90deg,var(--bad) 0%,rgba(255,111,97,.05) 70%)}
.stat.flag .num{color:var(--bad);text-shadow:0 0 16px rgba(255,111,97,.3)}

/* ---------- registers (tables) ---------- */
table.reg{background:rgba(11,19,30,.85);border:1px solid var(--panel-edge)}
table.reg th{background:#101c2c;color:#9db4cb;font-family:var(--mono);font-weight:600;letter-spacing:.1em;border-bottom:1px solid var(--panel-edge)}
table.reg td{color:var(--ink);border-bottom:1px solid var(--line-soft);font-variant-numeric:tabular-nums}
table.reg tbody tr{transition:background .12s}
table.reg tbody tr:hover{background:rgba(110,168,220,.06)}
/* overdue rows get a red machined edge (progressive enhancement) */
table.reg tbody tr:has(.pill.overdue) td:first-child{box-shadow:inset 3px 0 0 var(--bad)}
table.reg tbody tr:has(.pill.UNMATCHED) td:first-child,
table.reg tbody tr:has(.pill.AWAITING_CUSTOMER) td:first-child{box-shadow:inset 3px 0 0 var(--flag)}
table.mini-t th,table.mini-t td{border-bottom:1px solid var(--line-soft)}
table.mini-t th{color:var(--ink-soft);font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase}

/* phones: registers scroll sideways instead of crushing */
@media(max-width:720px){
  table.reg{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  table.reg th,table.reg td{white-space:nowrap}
}

/* ---------- status pills: readable on dark ---------- */
.pill{font-family:var(--mono);letter-spacing:.04em}
.pill.submitted,.pill.sent,.pill.INVOICED,.pill.MATCHED,.pill.AWAITING_REVIEW{background:rgba(240,166,58,.16);color:var(--flag)}
.pill.ready{background:rgba(110,168,220,.18);color:var(--steel)}
.pill.rejected{background:rgba(147,167,188,.14);color:var(--ink-soft)}
.pill.created{background:rgba(110,168,220,.12);color:var(--ink-soft)}
.tag{font-family:var(--mono)}
.tag.bill{background:rgba(240,166,58,.15);color:var(--flag)}
.yes{color:var(--good)}.no{color:var(--ink-soft)}

/* ---------- controls, buttons ---------- */
.ghost{border:1px solid var(--line);color:var(--ink-soft);background:none;transition:border-color .12s,color .12s}
.ghost:hover{border-color:var(--steel);color:var(--steel)}
.primary{
  background:linear-gradient(180deg,#3b7fc4,#2a5f96);color:#fff;border:none;
  box-shadow:0 6px 18px rgba(59,127,196,.35), inset 0 1px 0 rgba(255,255,255,.18);
}
.primary:hover{filter:brightness(1.08)}
.mini{border-color:var(--steel);color:var(--steel)}
.mini:hover{background:rgba(110,168,220,.12)}
.fbtn.active{background:var(--steel);border-color:var(--steel);color:#0a121d}
.del{border-color:var(--bad);color:var(--bad)}
.del:hover{background:rgba(255,111,97,.12)}
.drop{border-color:var(--line);background:rgba(110,168,220,.05);color:var(--ink-soft)}
.drop.drag{background:rgba(110,168,220,.14);border-color:var(--steel)}

/* ---------- form hardware ---------- */
input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea{
  background:#0e1927;color:var(--ink);border:1px solid var(--line);
  transition:border-color .12s;
}
input:focus,select:focus,textarea:focus{border-color:var(--steel)}
input::placeholder,textarea::placeholder{color:#5c7186}
input[type=checkbox],input[type=radio]{accent-color:var(--steel)}
/* keep checkboxes checkbox-sized even inside .login (its `input` rule is broad) */
.login input[type=checkbox],#needLogin input[type=checkbox]{width:18px;height:18px;margin:0}
/* Chrome autofill: keep the dark instrument panel, not pale yellow */
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus{
  -webkit-box-shadow:inset 0 0 0 1000px #0e1927;
  -webkit-text-fill-color:var(--ink);
  caret-color:var(--ink);
}
select option{background:#0e1927;color:var(--ink)}
label.fld{font-family:var(--mono);letter-spacing:.1em}
input[list]::-webkit-calendar-picker-indicator{filter:invert(.7)}

/* ---------- unified sign-in card ---------- */
#needLogin{max-width:340px;margin:12vh auto;text-align:center;padding:30px 26px;border-radius:20px}
#needLogin .login-logo{width:150px;height:auto;filter:drop-shadow(0 0 18px rgba(110,168,220,.4))}
#needLogin h2{font-family:Georgia,serif;color:#fff;margin:10px 0 2px;font-size:1.25rem}
#needLogin .login-sub{font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 16px}
#needLogin input{width:100%;height:48px;text-align:center;font-family:var(--mono);font-size:1.25rem;letter-spacing:.25em;margin-bottom:12px}
#needLogin .primary{width:100%;min-height:46px}
#needLogin p[role=alert]{color:var(--bad);font-size:.8rem;min-height:18px}
/* console's admin login card, same treatment */
.login{background:var(--panel);border:1px solid var(--panel-edge);box-shadow:var(--glow);border-radius:20px}
.login h2{color:#fff}
.login img{filter:drop-shadow(0 0 18px rgba(110,168,220,.4))}

/* ---------- corrections page notices, readable on dark ---------- */
.hard{background:rgba(255,111,97,.1);border-left-color:var(--bad);color:#ffb4ac}
.warn{background:rgba(240,166,58,.1);border-left-color:var(--flag);color:#f4c988}
.banner{background:rgba(79,202,130,.1);border-color:rgba(79,202,130,.35);color:#8fe0b2}
.draftbox{background:rgba(110,168,220,.07);border-color:var(--line)}
.muted{color:var(--ink-soft)}
.kv b{color:#fff}

/* ---------- toasts ---------- */
.toast{background:#16273c;border:1px solid var(--panel-edge)}

/* ---------- empty states ---------- */
#results:empty::after{
  content:"Search invoices, POs, customers, checks, and vendors.";
  display:block;padding:12px 4px 4px;font-size:.8rem;color:var(--ink-soft);font-family:var(--mono);letter-spacing:.04em;
}
#dueBody:empty::after{
  content:"No payment clocks running — all caught up.";
  display:block;padding:6px 4px;font-size:.85rem;color:var(--good);
}
#cases:empty::after{
  content:"No correction cases. Nice and quiet.";
  display:block;padding:6px 4px;font-size:.85rem;color:var(--ink-soft);
}

/* ---------- money + counts read like instruments ---------- */
#arBody,#dueBody,.recon-row .nums{font-variant-numeric:tabular-nums}

/* ---------- scrollbars ---------- */
::-webkit-scrollbar{height:10px;width:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#243a52;border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:#33495f}

/* ---------- focus ring on dark ---------- */
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #7fb6e8;outline-offset:2px}

/* ---------- print: back to paper ---------- */
@media print{
  body{background:#fff !important;color:#000}
  .onav,.filters,.controls,.toast,.drop,button,.ghost,.primary,.mini,.del,#needLogin{display:none !important}
  .panel,.card{background:#fff !important;border:1px solid #999 !important;box-shadow:none !important;-webkit-backdrop-filter:none;backdrop-filter:none}
  .panel h3,.ctop h1,.kv b,.stat .num{color:#000 !important;text-shadow:none !important}
  .stat{background:#fff !important;border:1px solid #999 !important}
  .stat .lbl{color:#444 !important}
  table.reg{background:#fff !important;border:1px solid #999 !important;display:table !important}
  table.reg th{background:#eee !important;color:#000 !important}
  table.reg td{color:#000 !important;border-color:#ccc !important}
  .pill{border:1px solid #999;background:#fff !important;color:#000 !important}
}