/* ==========================================================================
   Elevated POs — purchase orders & job expenses.

   The shared house style, lifted from Elevated AP so the two feel like one
   system, with the PO-specific pieces added at the end of this file. If you
   change something in the common section, change it in budget/css/styles.css
   too or the apps will drift apart.
   ========================================================================== */
:root{
  --red:#e11d2a;  --red-dark:#a5121c;  --red-soft:rgba(225,29,42,.12);
  --ink:#12141a;  --ink-soft:#6b7280;  --ink-faint:#9aa1ac;
  --line:#e3e6ea; --card:#ffffff;      --bg:#f4f6f8;
  --good:#0f7b48; --good-soft:rgba(15,123,72,.1);
  --warn:#b45309; --warn-soft:rgba(180,83,9,.12);
  --bad:#b91c1c;  --bad-soft:rgba(185,28,28,.1);
  --radius:10px;
  --shadow:0 1px 2px rgba(18,20,26,.06), 0 4px 14px rgba(18,20,26,.05);
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-force-light]){
    --ink:#e8eaed; --ink-soft:#9aa1ac; --ink-faint:#6b7280;
    --line:#282c34; --card:#171a20; --bg:#0e1014;
    --good:#34d399; --warn:#fbbf24; --bad:#f87171;
    --good-soft:rgba(52,211,153,.12); --warn-soft:rgba(251,191,36,.12);
    --bad-soft:rgba(248,113,113,.12); --red-soft:rgba(225,29,42,.18);
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.3);
  }
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:var(--font); color:var(--ink); background:var(--bg);
  font-size:15px; line-height:1.45; min-height:100vh;
  padding-bottom:76px; -webkit-tap-highlight-color:transparent;
}
@media (min-width:900px){ body{ padding-bottom:0; } }

/* ------------------------------------------------------------------ chrome */
.topbar{
  position:sticky; top:0; z-index:30; background:var(--card);
  border-bottom:1px solid var(--line); padding-top:env(safe-area-inset-top);
}
.topbar-inner{
  max-width:1180px; margin:0 auto; display:flex; align-items:center;
  gap:12px; padding:11px 16px;
}
.brand{ display:flex; align-items:center; gap:10px; min-width:0; }
.brand .mark{
  width:32px; height:32px; border-radius:8px; background:var(--red); color:#fff;
  display:grid; place-items:center; font-weight:800; font-size:17px; flex:none;
}
.brand b{ font-size:15px; font-weight:700; letter-spacing:-.2px; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; }
.brand small{ display:block; color:var(--ink-soft); font-size:11.5px; font-weight:500; }
.spacer{ flex:1; }
.whoami{ font-size:12px; color:var(--ink-soft); text-align:right; white-space:nowrap; }
.whoami b{ color:var(--ink); display:block; font-size:12.5px; }
.role-chip{
  display:inline-block; font-size:10px; font-weight:800; letter-spacing:.5px;
  text-transform:uppercase; padding:1px 6px; border-radius:4px;
  background:var(--red-soft); color:var(--red);
}
.redline{ height:3px; background:linear-gradient(90deg,var(--red),var(--red-dark)); }

/* -------------------------------------------------------------------- nav */
.tabs{
  position:fixed; left:0; right:0; bottom:0; z-index:30; display:flex;
  background:var(--card); border-top:1px solid var(--line);
  padding:6px 6px calc(6px + env(safe-area-inset-bottom));
}
.tabs button{
  flex:1; border:0; background:transparent; cursor:pointer; color:var(--ink-soft);
  font:700 10.5px var(--font); padding:6px 2px; border-radius:8px;
  display:flex; flex-direction:column; align-items:center; gap:3px;
}
.tabs button .ico{ font-size:17px; line-height:1; }
.tabs button.on{ color:var(--red); background:var(--red-soft); }
@media (min-width:900px){
  .tabs{
    position:sticky; top:60px; bottom:auto; border-top:0;
    border-bottom:1px solid var(--line); padding:0;
    max-width:1180px; margin:0 auto; gap:2px;
  }
  .tabs button{ flex:0 0 auto; flex-direction:row; padding:11px 16px; font-size:13.5px;
    border-radius:0; border-bottom:2px solid transparent; }
  .tabs button.on{ background:transparent; border-bottom-color:var(--red); }
}

/* ------------------------------------------------------------------- view */
.view{ max-width:1180px; margin:0 auto; padding:16px; display:grid; gap:14px; }
.head h1{ margin:0 0 2px; font-size:21px; letter-spacing:-.4px; }
.head p{ margin:0; color:var(--ink-soft); font-size:13.5px; }

.card{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow); padding:16px;
}
.card h2{
  margin:0 0 12px; font-size:14px; letter-spacing:-.1px;
  display:flex; align-items:center; gap:8px;
}
.card h2 .hint{ margin-left:auto; font-size:11.5px; color:var(--ink-soft); font-weight:500; }
.grid{ display:grid; gap:14px; }
@media (min-width:760px){ .grid.two{ grid-template-columns:1fr 1fr; } }

/* ------------------------------------------------------------------ stats */
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; }
.stat{ border:1px solid var(--line); border-radius:8px; padding:11px 13px; background:var(--card); }
.stat .lbl{ font-size:10.5px; font-weight:800; letter-spacing:.6px; text-transform:uppercase;
  color:var(--ink-soft); }
.stat .val{ font-size:22px; font-weight:750; letter-spacing:-.6px; margin-top:2px;
  font-variant-numeric:tabular-nums; }
.stat .sub{ font-size:11.5px; color:var(--ink-soft); margin-top:1px; }
.stat.bad .val{ color:var(--bad); }
.stat.warn .val{ color:var(--warn); }
.stat.good .val{ color:var(--good); }

/* ----------------------------------------------------------------- tables */
.tbl{ width:100%; border-collapse:collapse; font-size:13.5px; }
.tbl th{
  text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.5px;
  color:var(--ink-soft); font-weight:800; padding:8px 10px;
  border-bottom:1.5px solid var(--line); white-space:nowrap;
}
.tbl td{ padding:10px; border-bottom:1px solid var(--line); vertical-align:middle; }
.tbl td.num, .tbl th.num{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.tbl tr:last-child td{ border-bottom:0; }
.tbl tr.tot td{ font-weight:800; border-top:2px solid var(--line); }
.tbl tbody tr:hover{ background:var(--bg); }
.scroll{ overflow-x:auto; margin:0 -16px; padding:0 16px; }

/* ------------------------------------------------------------------- bits */
.pill{
  display:inline-block; font-size:10.5px; font-weight:800; letter-spacing:.3px;
  padding:2px 7px; border-radius:999px; text-transform:uppercase;
}
.pill.open{ background:var(--bg); color:var(--ink-soft); border:1px solid var(--line); }
.pill.approved{ background:var(--good-soft); color:var(--good); }
.pill.paid{ background:var(--good-soft); color:var(--good); }
.pill.partial{ background:var(--warn-soft); color:var(--warn); }
.pill.overdue{ background:var(--bad-soft); color:var(--bad); }
.pill.disputed{ background:var(--warn-soft); color:var(--warn); }
.pill.void{ background:var(--bg); color:var(--ink-faint); text-decoration:line-through; }
.pill.sub{ background:var(--red-soft); color:var(--red); }

.btn{
  border:1px solid var(--line); background:var(--card); color:var(--ink);
  font:600 13.5px var(--font); padding:9px 14px; border-radius:8px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
}
.btn:hover{ border-color:var(--ink-faint); }
.btn:active{ transform:translateY(1px); }
.btn.primary{ background:var(--red); border-color:var(--red); color:#fff; }
.btn.primary:hover{ background:var(--red-dark); border-color:var(--red-dark); }
.btn.sm{ padding:5px 10px; font-size:12px; border-radius:6px; }
.btn.danger{ color:var(--bad); border-color:var(--bad-soft); }
.btn.block{ width:100%; }
.btn:disabled{ opacity:.5; cursor:not-allowed; }
.row{ display:flex; gap:9px; flex-wrap:wrap; }
.row>*{ flex:1 1 150px; }
.row.auto>*{ flex:0 0 auto; }

label.f{ display:block; margin-bottom:11px; }
label.f>span{ display:block; font-size:12px; font-weight:700; color:var(--ink-soft); margin-bottom:4px; }
label.f .sub{ font-weight:500; font-size:11px; color:var(--ink-faint); margin-top:3px; display:block; }
input,select,textarea{
  width:100%; padding:9px 11px; font:inherit; font-size:15px; color:var(--ink);
  background:var(--card); border:1px solid var(--line); border-radius:8px; outline:none;
}
input:focus,select:focus,textarea:focus{ border-color:var(--red); box-shadow:0 0 0 3px var(--red-soft); }
/* A field the PO cannot be posted without, once they have tried. */
input.miss,select.miss,textarea.miss{ border-color:var(--bad); background:var(--bad-soft); }
label.f>span .req{ color:var(--bad); font-weight:700; }
.chk{ display:flex; gap:9px; align-items:flex-start; font-size:13.5px; margin-bottom:11px; }
.chk input{ width:17px; height:17px; margin-top:1px; accent-color:var(--red); flex:none; }

.note{ border:1px solid var(--line); border-radius:8px; padding:11px 13px; font-size:13px; }
.note.bad{ background:var(--bad-soft); border-color:var(--bad); }
.note.warn{ background:var(--warn-soft); border-color:var(--warn); }
.note.good{ background:var(--good-soft); border-color:var(--good); }
.empty{ text-align:center; color:var(--ink-soft); padding:26px 12px; font-size:13.5px; }
.muted{ color:var(--ink-soft); }
.mono{ font-family:var(--mono); font-size:12.5px; }
hr.sep{ border:0; border-top:1px solid var(--line); margin:14px 0; }

/* ------------------------------------------------------------------ modal */
.back{
  position:fixed; inset:0; z-index:60; background:rgba(10,12,16,.55);
  display:flex; align-items:flex-end; justify-content:center; padding:0;
}
@media (min-width:700px){ .back{ align-items:center; padding:24px; } }
.modal{
  background:var(--card); width:100%; max-width:560px; max-height:90vh; overflow:auto;
  border-radius:14px 14px 0 0; padding:18px 18px calc(18px + env(safe-area-inset-bottom));
  border:1px solid var(--line);
}
@media (min-width:700px){ .modal{ border-radius:14px; } }
.modal h3{ margin:0 0 14px; font-size:17px; }
.modal .acts{ display:flex; gap:9px; margin-top:14px; }
.modal .acts .btn{ flex:1; }

.toast{
  position:fixed; left:50%; bottom:88px; transform:translate(-50%,10px); z-index:70;
  background:var(--ink); color:var(--bg); padding:9px 16px; border-radius:8px;
  font-size:13.5px; font-weight:600; opacity:0; pointer-events:none;
  transition:opacity .18s, transform .18s;
}
.toast.on{ opacity:1; transform:translate(-50%,0); }
@media (min-width:900px){ .toast{ bottom:24px; } }

/* ------------------------------------------------------------------ login */
.gate{ max-width:400px; margin:8vh auto; padding:20px; }
.gate .card{ padding:22px; }
.gate .mark{
  width:44px; height:44px; border-radius:11px; background:var(--red); color:#fff;
  display:grid; place-items:center; font-weight:800; font-size:22px; margin-bottom:14px;
}

/* --------------------------------------------------------------- printing */
.print-only{ display:none; }
@media print{
  @page{ margin:13mm; }
  html,body{ background:#fff !important; color:#000 !important; padding:0 !important; }
  .topbar,.tabs,.toast,.back,.btn,.no-print{ display:none !important; }
  .view{ max-width:none; padding:0; gap:8px; }
  .card{ border:0 !important; box-shadow:none !important; padding:0 0 8px !important;
         break-inside:avoid; page-break-inside:avoid; }
  .card h2{ font-size:12pt; border-bottom:1px solid #000; padding-bottom:3px; margin:10px 0 6px; }
  .print-only{ display:block; }
  .print-head h1{ font-size:17pt; margin:0 0 3px; }
  .print-head p{ font-size:9pt; color:#333; margin:0 0 12px; }
  .tbl{ font-size:9pt; }
  .tbl th{ color:#000; border-bottom:1px solid #000; }
  .tbl td{ border-bottom:1px solid #ccc; }
  .tbl thead{ display:table-header-group; }
  .tbl tr{ break-inside:avoid; }
  .scroll{ overflow:visible; margin:0; padding:0; }
  .stat{ border:1px solid #999 !important; }
  .pill{ border:1px solid #666 !important; color:#000 !important; background:#fff !important; }
  .muted,.stat .lbl,.stat .sub{ color:#333 !important; }
}


/* ==========================================================================
   The PO page — everything below here is specific to /po
   ========================================================================== */

/* Grid items refuse to shrink below their widest content, so one wide table
   stretched the whole page past a phone screen. Let them shrink; the tables
   scroll inside .scroll instead. */
.view>*{ min-width:0; }

/* ------------------------------------------------------------ PO lookup box */
.po-find{ display:flex; gap:9px; align-items:flex-end; }
.po-find label.f{ flex:1; margin:0; }
.po-find input{ font-size:20px; font-weight:700; letter-spacing:.5px; font-variant-numeric:tabular-nums; }

/* ------------------------------------------------------------ the job card */
.job-head{ display:flex; gap:12px; align-items:flex-start; flex-wrap:wrap; }
.job-head .po-num{
  font:800 22px var(--font); letter-spacing:-.5px; color:var(--red);
  font-variant-numeric:tabular-nums;
}
.job-head .who{ flex:1; min-width:200px; }
.job-head .who b{ display:block; font-size:16px; }
.job-head .who span{ color:var(--ink-soft); font-size:13px; display:block; }
.kv{ display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; margin-top:14px; }
.kv div{ border:1px solid var(--line); border-radius:8px; padding:8px 11px; }
.kv .k{ font-size:10.5px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:var(--ink-soft); }
.kv .v{ font-size:16px; font-weight:700; font-variant-numeric:tabular-nums; }

/* --------------------------------------------------------- material lines */
.lines .ln{ display:grid; grid-template-columns:1fr 70px 100px 32px; gap:7px; margin-bottom:7px; }
.lines .ln input{ padding:8px 9px; font-size:14px; }
.lines .ln .x{ border:0; background:transparent; color:var(--ink-faint); font-size:18px; cursor:pointer; }
.lines .ln .x:hover{ color:var(--bad); }
.lines .lh{ display:grid; grid-template-columns:1fr 70px 100px 32px; gap:7px;
  font-size:10.5px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:var(--ink-soft); margin-bottom:4px; }
.linesum{ text-align:right; font-size:12.5px; color:var(--ink-soft); margin:-2px 0 11px; }
.linesum b{ color:var(--ink); }

/* --------------------------------------------------------------- statuses */
.pill.posted{ background:var(--good-soft); color:var(--good); }
.pill.pending{ background:var(--warn-soft); color:var(--warn); }
.pill.failed{ background:var(--bad-soft); color:var(--bad); }
.pill.injobber{ background:var(--bg); color:var(--ink-soft); border:1px solid var(--line); }

.filters{ display:flex; gap:9px; flex-wrap:wrap; margin-bottom:12px; }
.filters>*{ flex:1 1 160px; }
.small{ font-size:12px; }
.err{ color:var(--bad); font-size:12px; }

/* ------------------------------------------------- the header on a phone */
@media (max-width:560px){
  .whoami{ display:none; }
  .applink .lbl{ display:none; }
  .lines .ln, .lines .lh{ grid-template-columns:1fr 54px 84px 26px; }
}

/* ============================================================ tool tracking */
.mono{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px; letter-spacing:.3px; }
.warn-txt{ color:var(--warn); font-weight:700; }
tr.dim td{ opacity:.55; }
.pill.mgr{ background:var(--red-soft); color:var(--red); }
.pill.out{ background:var(--warn-soft); color:var(--warn); }
.pill.in{ background:var(--good-soft); color:var(--good); }
.pill.missing,.pill.repair{ background:var(--bad-soft); color:var(--bad); }
textarea{ min-height:120px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px; }

/* The sticker sheet. Sized for a 2" square label: big enough for a phone to
   read the code at arm's length, small enough for a drill body. */
.sheet{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:10px; }
.sticker{
  display:flex; gap:10px; align-items:center; padding:10px;
  border:1px dashed var(--line); border-radius:8px; background:#fff; break-inside:avoid;
}
.sticker .qr{ width:76px; height:76px; flex:none; }
.sticker .qr svg{ width:100%; height:100%; display:block; }
.sticker .lab{ min-width:0; }
.sticker .lab b{ display:block; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:15px; letter-spacing:.5px; color:#000; }
.sticker .lab span{ display:block; font-size:11.5px; color:#333; line-height:1.25;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.sticker .lab small{ display:block; font-size:8.5px; color:#777; margin-top:2px; text-transform:uppercase; letter-spacing:.4px; }

@media print{
  .topbar,.noprint,.head,.toast,#modalRoot{ display:none !important; }
  body{ background:#fff; }
  .view{ padding:0; max-width:none; }
  .sheet{ grid-template-columns:repeat(3,1fr); gap:6px; }
  .sticker{ border:1px dashed #bbb; }
}

/* -------------------------------------------------- adding a phone by link */
.pill.warn-pill{ background:var(--warn-soft); color:var(--warn); display:inline-block; margin-top:3px; }
.claimwrap{ display:flex; gap:18px; align-items:flex-start; flex-wrap:wrap; }
.claimqr{ width:170px; height:170px; flex:none; padding:8px; background:#fff;
  border:1px solid var(--line); border-radius:10px; }
.claimqr svg{ width:100%; height:100%; display:block; }
.claimurl{ word-break:break-all; background:var(--bg); border:1px solid var(--line);
  border-radius:8px; padding:8px 10px; font-size:12.5px; }

/* ======================================================== get the app page */
h2 .step{
  display:inline-flex; align-items:center; justify-content:center;
  width:23px; height:23px; margin-right:8px; border-radius:50%;
  background:var(--red); color:#fff; font-size:13px; font-weight:800;
}
.claimqr.big{ width:250px; height:250px; padding:12px; }
.claimside{ flex:1 1 280px; min-width:250px; }
.waiting{ margin-top:12px; font-size:13.5px; color:var(--ink-soft); display:flex; align-items:center; gap:8px; }
.spin{
  width:14px; height:14px; border-radius:50%; flex:none;
  border:2px solid var(--line); border-top-color:var(--red);
  animation:spin .8s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.cols{ display:flex; gap:26px; flex-wrap:wrap; }
.cols .col{ flex:1 1 260px; }
.cols h3{ margin:0 0 8px; font-size:15.5px; }
.cols ol{ margin:0; padding-left:20px; }
.cols li{ margin-bottom:7px; font-size:14.5px; }
b.k{ background:var(--bg); border:1px solid var(--line); border-radius:5px; padding:1px 6px; font-size:13.5px; }
ul.plain{ margin:0 0 10px; padding-left:18px; }
ul.plain li{ margin-bottom:6px; font-size:14.5px; }

@media print{
  .topbar,.noprint,.head{ display:none !important; }
  body{ background:#fff; }
  .view{ padding:0; max-width:none; }
  .card{ border:0; box-shadow:none; padding:0 0 18px; break-inside:avoid; }
  .claimqr.big{ width:300px; height:300px; }
  @page{ margin:14mm; }
}