/* approva — app layer on the Ownware UI kit (assets/ui/ownware-ui.css). Accent + app-specific rules only; generic rules come from the kit. */
:root{--accent:#4338ca;--accent-dark:#3730a3;--accent-soft:#eceafe;--on-accent:#ffffff;--accent-ink:var(--on-accent)}
html[data-theme="dark"]{--accent:#a5b4fc;--accent-dark:#c7d2fe;--accent-soft:#1e1b47;--on-accent:#0a0920;--accent-ink:var(--on-accent)}

/* A long admin nav in a flex column shrinks its own brand row to nothing without this; and an
   org name longer than the sidebar should trail off, not be cut mid-letter. */
.side .brand{flex:0 0 auto}
.side .brand,.side .brand span{text-overflow:ellipsis;min-width:0}

/* ── request stages and seats (the kit knows none of these words) ───────── */
.pill.draft,.pill.requester{background:var(--chip);color:var(--sub)}
.pill.pending{background:var(--warnbg);color:var(--warn)}
.pill.partially_approved{background:var(--infobg);color:var(--info)}
.pill.approved{background:var(--okbg);color:var(--ok)}
.pill.rejected{background:var(--badbg);color:var(--bad)}
.pill.po_issued,.pill.admin,.pill.approver{background:var(--accent-soft);color:var(--accent)}

/* the approval chain, drawn as the seats it actually is */
.levels{display:flex;gap:6px;align-items:center;margin-top:4px}
.levels .lv{width:26px;height:8px;border-radius:5px;background:var(--line)}
.levels .lv.done{background:var(--ok)}
.levels .lv.rej{background:var(--bad)}

/* ── the hero: the approval queue ──────────────────────────────────────── */
.queue{display:grid;gap:12px}
.qcard{border:1px solid var(--line);border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow);overflow:hidden}
.qcard.over{border-color:color-mix(in srgb,var(--warn) 45%,var(--line))}
.qcard .qh{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:14px 16px 10px;align-items:start}
.qcard .qt{min-width:0}
.qcard .qt b{font-family:var(--display);font-size:1.02rem;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qcard .qt .meta{font-size:.84rem;color:var(--sub);margin-top:3px}
.qcard .amt{text-align:right;white-space:nowrap}
.qcard .amt b{font-family:var(--display);font-size:1.25rem;font-variant-numeric:tabular-nums;display:block}
.qcard .amt .thr{font-size:.76rem;color:var(--sub);margin-top:2px}
.qcard .chain{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:0 16px 12px;font-size:.82rem;color:var(--sub)}
.qcard .seat{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:2px 10px;background:var(--bg)}
.qcard .seat i{width:8px;height:8px;border-radius:50%;background:var(--line);display:inline-block}
.qcard .seat.done{border-color:color-mix(in srgb,var(--ok) 40%,var(--line));color:var(--ok)}
.qcard .seat.done i{background:var(--ok)}
.qcard .seat.now{border-color:var(--accent);color:var(--accent);font-weight:600}
.qcard .seat.now i{background:var(--accent)}
.qcard .qlines{padding:0 16px 12px;font-size:.86rem;color:var(--sub)}
.qcard .qact{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;align-items:center;padding:12px 16px;border-top:1px solid var(--line);background:var(--bg)}
.qcard .qact input{min-height:38px}
.qcard .qmsg{display:none;padding:10px 16px;border-top:1px solid var(--line);font-size:.88rem}
.qcard.refused .qmsg{display:block;background:var(--badbg);color:var(--bad)}
.qcard.settled{opacity:.55}

#lines input{padding:8px 10px}
#lines td{padding:6px 8px}
.totals{margin-top:12px;display:flex;justify-content:flex-end}
.totals table{width:auto;background:transparent}
.totals td{border:none;padding:3px 6px}
.totals .grand{font-size:1.15rem;font-weight:800}
/* This app ships its own .tl-dot, so the kit's rail-and-bullet decoration is turned off. */
.timeline{list-style:none;padding:0;margin:0;border-left:0}
.timeline li::before{display:none}
.timeline li{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.timeline li:last-child{border-bottom:none}
.timeline .tl-dot{width:10px;height:10px;border-radius:50%;background:var(--accent);margin-top:5px;flex-shrink:0}
.timeline .tl-dot.rej{background:var(--bad)}
.timeline .tl-dot.ok{background:var(--ok)}
.timeline .tl-body{flex:1}
.timeline .tl-action{font-weight:600;font-size:.9rem}
.timeline .tl-at{font-size:.78rem;color:var(--sub)}
.topbar .t .sub{max-width:78ch}
.po-doc{max-width:820px;margin:24px auto;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:40px;box-shadow:var(--shadow)}
.po-head{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:2px solid var(--ink);padding-bottom:18px;margin-bottom:22px}
.po-head .org{font-size:1.4rem;font-weight:800}
.po-head .potitle{font-size:1.6rem;font-weight:800;letter-spacing:.02em;text-align:right}
.po-meta{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:24px}
.po-meta .b{font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--sub);font-weight:700;margin-bottom:3px}
.po-actions{max-width:820px;margin:16px auto 0;display:flex;gap:8px;justify-content:flex-end}
@media print{ .po-actions,.noprint{display:none!important} .po-doc{border:none;box-shadow:none;margin:0;max-width:none}}

/* ── phone (app layer loads after the kit) ─────────────────────────────── */
@media(max-width:700px){
  .qcard .qh{grid-template-columns:minmax(0,1fr)}
  .qcard .amt{text-align:left}
  .qcard .qact{grid-template-columns:minmax(0,1fr);row-gap:8px}
  .qcard .qact .btn{width:100%}
  .topbar .t h1{white-space:normal!important;max-width:100%!important}
}

/* --- kit defect, worked around here rather than forking the locked kit ---------------------
   .side .brand ellipsises as a block, but the kit also sets `.side .brand span{display:inline-block}`.
   An inline-block cannot be broken, so a long organisation name does not truncate — it is dropped
   whole and the sidebar reads "◆ ...". Seen live with org_name = "Northwind Trading Co".
   Making the NAME span inline lets the block's own text-overflow do its job. The real fix belongs
   in ownware-ui.css (it affects every app whose brand name is long); this keeps Approva readable
   until the kit carries it. */
.side .brand span:not(.dot){display:inline;vertical-align:baseline}