/* Procurement-to-pay screens. Uses the app's colour variables from index.html. */
.badge-blue { background: rgba(59,130,246,.12); color: #60a5fa; border: 1px solid rgba(59,130,246,.2); }
.badge-grey { background: rgba(240,235,224,.06); color: var(--t2); border: 1px solid var(--b2); }
.badge-red { background: rgba(224,61,90,.12); color: #f87171; border: 1px solid rgba(224,61,90,.2); }
.p2p-toolbar { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:12px; }
.p2p-toolbar .grow { flex:1; min-width:160px; }
.p2p-tabs { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.p2p-card { background:var(--bg2); border:1px solid var(--border); border-radius:var(--r-md); padding:14px; margin-bottom:12px; }
.p2p-card h3 { font-size:13px; margin:0 0 10px; color:var(--t1); font-weight:700; }
.p2p-kv { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:8px 16px; font-size:12px; }
.p2p-kv div span { display:block; color:var(--t3); font-size:10.5px; text-transform:uppercase; letter-spacing:.4px; }
.p2p-table { width:100%; border-collapse:collapse; font-size:12px; }
.p2p-table th { text-align:left; padding:8px 10px; color:var(--t3); font-size:10px; text-transform:uppercase; letter-spacing:.4px; border-bottom:1px solid var(--border); white-space:nowrap; background:var(--bg3); }
.p2p-table td { padding:8px 10px; border-bottom:1px solid var(--border); vertical-align:top; }
.p2p-table tr.click { cursor:pointer; }
.p2p-table tr.click:hover td { background:rgba(79,142,247,.06); }
.p2p-table td.num, .p2p-table th.num { text-align:right; font-variant-numeric:tabular-nums; }
.p2p-scroll { overflow-x:auto; border:1px solid var(--border); border-radius:10px; }
.p2p-chain { display:flex; flex-direction:column; gap:6px; }
.p2p-step { display:flex; gap:10px; align-items:flex-start; padding:8px 10px; border-radius:8px; background:var(--bg3); font-size:12px; }
.p2p-step .dot { width:10px; height:10px; border-radius:50%; margin-top:4px; flex-shrink:0; background:var(--t4); }
.p2p-step.approved .dot { background:var(--emerald); } .p2p-step.pending .dot { background:var(--amber); }
.p2p-step.rejected .dot, .p2p-step.returned .dot { background:var(--crimson); }
.p2p-timeline { border-left:2px solid var(--border); margin-left:6px; padding-left:12px; font-size:12px; }
.p2p-timeline div { margin-bottom:8px; } .p2p-timeline small { color:var(--t3); display:block; }
.p2p-thumbs { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.p2p-thumbs a, .p2p-thumbs .thumb { width:64px; height:64px; border-radius:8px; overflow:hidden; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:10px; color:var(--t3); background:var(--bg3); }
.p2p-thumbs img { width:100%; height:100%; object-fit:cover; }
.p2p-flag { display:inline-block; font-size:10px; padding:1px 6px; border-radius:10px; background:rgba(224,61,90,.12); color:#f87171; margin:0 3px 3px 0; }
.p2p-note { font-size:12px; color:var(--t2); background:var(--bg3); border-radius:8px; padding:8px 10px; margin-bottom:10px; }
.p2p-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width: 760px) { .p2p-grid2 { grid-template-columns:1fr; } }

/* ── platform: pending-sync badge, offline photos, integrations ── */
.p2p-sync-badge { display:inline-flex; align-items:center; gap:5px; margin-left:auto; margin-right:8px; padding:5px 10px; border-radius:16px; font-size:11.5px; font-weight:600;
  background:rgba(217,119,6,.14); color:#fbbf24; border:1px solid rgba(217,119,6,.35); cursor:pointer; white-space:nowrap; font-family:inherit; }
.p2p-sync-badge[hidden] { display:none; }
.p2p-sync-badge.off { background:rgba(240,235,224,.06); color:var(--t2); border-color:var(--b2); }
.p2p-sync-badge.bad { background:rgba(224,61,90,.14); color:#f87171; border-color:rgba(224,61,90,.35); }
.p2p-sync-badge + #topbar-btn { margin-left:0; }
@media (max-width: 480px) { .p2p-sync-badge { font-size:10.5px; padding:4px 8px; margin-right:4px; max-width:46vw; overflow:hidden; text-overflow:ellipsis; } }
.p2p-thumbs .thumb.waiting { position:relative; opacity:.7; border-style:dashed; border-color:var(--amber); }
.p2p-thumbs .thumb.waiting::after { content:'Waiting'; position:absolute; bottom:0; left:0; right:0; font-size:9px; text-align:center; background:rgba(0,0,0,.6); color:#fbbf24; }
.p2p-int-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:12px; }
.p2p-int-card { margin-bottom:0; font-size:12.5px; }
.p2p-int-meta { margin-top:8px; font-size:11.5px; color:var(--t2); word-break:break-word; }
.p2p-int-meta code { font-size:10.5px; color:var(--t2); }
@media (max-width: 480px) { .p2p-int-grid { grid-template-columns:1fr; } }

/* ── pettycash and driver domains: phone-first field screens ── */
.pc-phone { max-width:620px; margin:0 auto; }
.pc-h { font-size:13px; font-weight:700; color:var(--t1); margin:16px 0 8px; }
.pc-form .form-label { font-size:12.5px; }
.pc-big { font-size:16px; min-height:46px; }
.pc-submit { width:100%; min-height:50px; font-size:15px; margin-top:12px; }
.pc-ceiling { font-size:12.5px; color:var(--t2); background:var(--bg3); border-radius:8px; padding:8px 10px; margin-bottom:10px; }
.pc-warn { font-size:13px; color:#f87171; background:rgba(224,61,90,.10); border:1px solid rgba(224,61,90,.25); border-radius:8px; padding:8px 10px; margin-bottom:8px; }
.pc-seg { display:flex; gap:6px; flex-wrap:wrap; }
.pc-seg label { flex:1; min-width:90px; cursor:pointer; }
.pc-seg input { position:absolute; opacity:0; pointer-events:none; }
.pc-seg span { display:flex; align-items:center; justify-content:center; min-height:46px; padding:0 10px; border:1px solid var(--border); border-radius:10px; background:var(--bg3); font-size:14px; color:var(--t2); text-align:center; }
.pc-seg input:checked + span { border-color:var(--gold); color:var(--t1); background:rgba(201,162,39,.14); font-weight:700; }
.pc-seg input:disabled + span { opacity:.4; }
.pc-list { display:flex; flex-direction:column; gap:8px; }
.pc-item { background:var(--bg2); border:1px solid var(--border); border-radius:var(--r-md); padding:12px; cursor:pointer; }
.pc-item:hover { border-color:var(--b1); }
.pc-item-top, .pc-item-bot { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.pc-item-mid { font-size:12px; color:var(--t3); margin-top:3px; }
.pc-item-bot { margin-top:8px; }
.pc-amt { font-size:16px; font-weight:700; color:var(--t1); font-variant-numeric:tabular-nums; }
.pc-empty { font-size:12.5px; color:var(--t3); padding:10px 2px; }
.pc-bar { height:12px; border-radius:6px; background:var(--bg3); overflow:hidden; }
.pc-bar div { height:100%; background:var(--emerald); }
.pc-bar div.high { background:var(--amber); } .pc-bar div.full { background:var(--crimson); }
.pc-sig { width:100%; height:170px; background:#fff; border-radius:8px; border:1px solid var(--border); touch-action:none; display:block; }
.drv-items { display:flex; flex-direction:column; gap:6px; }
.drv-item { background:var(--bg2); border:1px solid var(--border); border-radius:10px; padding:10px; }
.drv-item.defect { border-color:rgba(224,61,90,.5); }
.drv-item.pass { border-color:rgba(16,185,129,.35); }
.drv-item-name { font-size:14px; font-weight:600; color:var(--t1); margin-bottom:8px; }
.drv-btns { display:flex; gap:6px; }
.drv-btn { flex:1; min-height:46px; border-radius:10px; border:1px solid var(--border); background:var(--bg3); color:var(--t2); font-size:14px; font-weight:600; cursor:pointer; }
.drv-btn.on.pass, .drv-btn.on.present { background:rgba(16,185,129,.18); border-color:var(--emerald); color:var(--t1); }
.drv-btn.on.defect { background:rgba(224,61,90,.18); border-color:var(--crimson); color:var(--t1); }
.drv-btn.on.na, .drv-btn.on { background:rgba(201,162,39,.14); border-color:var(--gold); color:var(--t1); }
.drv-btn.on.pass { background:rgba(16,185,129,.18); border-color:var(--emerald); }
.drv-btn.on.defect { background:rgba(224,61,90,.18); border-color:var(--crimson); }
.drv-tick { display:flex; gap:10px; align-items:center; font-size:14px; margin:10px 0 0; cursor:pointer; }
.drv-tick input { width:22px; height:22px; }
.drv-ul { margin:6px 0 0 18px; font-size:12.5px; }
.drv-map { display:flex; gap:12px; align-items:flex-start; flex-wrap:wrap; margin-top:8px; }
.drv-map svg { width:170px; max-width:45%; flex-shrink:0; }
.drv-zone { cursor:pointer; }
.drv-zone rect { fill:var(--bg3); stroke:var(--t3); stroke-width:1.5; }
.drv-zone.existing rect { fill:rgba(245,158,11,.35); stroke:var(--amber); }
.drv-zone.new rect { fill:rgba(224,61,90,.45); stroke:var(--crimson); }
.drv-zone:hover rect { stroke-width:3; }
.drv-zone text { font-size:11px; fill:var(--t2); text-anchor:middle; dominant-baseline:middle; pointer-events:none; }
.drv-zone-btns { flex:1; min-width:140px; display:flex; flex-direction:column; gap:6px; }
.drv-zbtn { min-height:40px; border-radius:8px; border:1px solid var(--border); background:var(--bg3); color:var(--t2); font-size:13px; text-align:left; padding:0 10px; cursor:pointer; }
.drv-zbtn.existing { border-color:var(--amber); } .drv-zbtn.new { border-color:var(--crimson); color:var(--t1); }
.drv-legend { font-size:11px; color:var(--t3); margin-top:8px; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.drv-dot { display:inline-block; width:10px; height:10px; border-radius:3px; background:var(--bg3); border:1px solid var(--t3); }
.drv-dot.existing { background:rgba(245,158,11,.5); border-color:var(--amber); } .drv-dot.new { background:rgba(224,61,90,.6); border-color:var(--crimson); }
.drv-zone-panel { margin-top:12px; padding:12px; border-radius:10px; background:var(--bg3); }
.drv-dmg { display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:12.5px; padding:6px 0; border-bottom:1px solid var(--border); }
.drv-result.good { border-color:var(--emerald); } .drv-result.warn { border-color:var(--amber); } .drv-result.bad { border-color:var(--crimson); }
@media (max-width: 480px) { .drv-map svg { max-width:100%; width:150px; margin:0 auto; } .drv-zone-btns { min-width:100%; } }

/* ── Workshop domain (work orders, vehicle board, PM, performance) ── */
.ws-filter { max-width:170px; }
.ws-check { display:flex; gap:8px; align-items:flex-start; font-size:12.5px; margin:6px 0; cursor:pointer; }
.ws-check input { margin-top:2px; flex-shrink:0; }
.ws-list { display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
.ws-item { background:var(--bg2); border:1px solid var(--border); border-radius:var(--r-md); padding:10px 12px; cursor:pointer; }
.ws-item:hover { border-color:rgba(79,142,247,.4); }
.ws-item.ws-alert { border-left:3px solid var(--crimson); }
.ws-row { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-bottom:3px; font-size:12.5px; }
.ws-main { color:var(--t1); }
.ws-sub, .ws-hint { color:var(--t3); font-size:11.5px; }
.ws-hint { margin-top:3px; }
.ws-form { max-width:760px; }
.ws-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:0 10px; }
.ws-grid3 { display:grid; grid-template-columns:90px 1fr 1fr; gap:0 10px; }
.ws-pick { display:flex; flex-direction:column; gap:6px; margin-top:8px; max-height:50vh; overflow-y:auto; }
.ws-pick-item { text-align:left; background:var(--bg3); border:1px solid var(--border); border-radius:8px; padding:9px 10px; color:var(--t1); font-size:12.5px; cursor:pointer; display:flex; flex-wrap:wrap; gap:4px 6px; align-items:center; }
.ws-pick-item small { width:100%; color:var(--t3); }
.ws-pick-item:disabled { opacity:.5; cursor:not-allowed; }
.ws-veh-card { background:var(--bg3); border-radius:8px; padding:10px; }
.ws-line { border:1px solid var(--border); border-radius:8px; padding:10px; margin-bottom:8px; background:var(--bg3); }
.ws-line-bad { border-color:rgba(224,61,90,.5); }
.ws-x { margin-left:auto; padding:2px 6px; }
.ws-just { border-top:1px dashed var(--border); padding-top:8px; margin-top:6px; }
.ws-block { font-size:12px; color:#f87171; background:rgba(224,61,90,.08); border-radius:6px; padding:6px 8px; margin-top:6px; }
.ws-actions { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.ws-head .ws-actions { margin-top:10px; }
.ws-checks div, .ws-notes div { font-size:12px; margin-bottom:5px; }
.ws-notes { margin-top:5px; padding-left:8px; border-left:2px solid var(--amber); }
.ws-ex { font-size:12px; padding:6px 0; border-bottom:1px solid var(--border); cursor:pointer; }
.ws-item.ws-static { cursor:default; }
.ws-veh-card .p2p-kv { grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); }
@media (max-width: 520px) {
  .ws-filter { max-width:none; flex:1 1 45%; }
  .ws-grid2 { grid-template-columns:1fr; }
  .ws-grid3 { grid-template-columns:1fr 1fr; }
  .ws-grid3 > :first-child { grid-column:1 / -1; }
  .ws-actions .btn { flex:1 1 auto; justify-content:center; }
  .p2p-card { padding:12px; }
}

/* ── Receiving (stores): delivery, issue and acceptance cards, phone-first ── */
.rcv-cards { display:flex; flex-direction:column; gap:8px; }
.rcv-card { background:var(--bg3); border:1px solid var(--border); border-radius:10px; padding:10px 12px; font-size:12.5px; }
.rcv-card-top { display:flex; justify-content:space-between; gap:8px; align-items:flex-start; margin-bottom:4px; }
.rcv-card-title { font-weight:700; color:var(--t1); min-width:0; overflow-wrap:anywhere; }
.rcv-card-line { color:var(--t2); margin-top:2px; overflow-wrap:anywhere; }
.rcv-card-actions { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.rcv-card .form-group { margin-top:8px; }
.rcv-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.rcv-line-head { font-size:12px; color:var(--t2); margin-bottom:6px; }
.rcv-count-row { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:6px 0; border-bottom:1px solid var(--border); font-size:12.5px; }
.rcv-pick { display:flex; flex-direction:column; gap:4px; max-height:220px; overflow:auto; margin-bottom:10px; font-size:12.5px; }
@media (max-width: 480px) { .rcv-card-actions .btn { flex:1; justify-content:center; } }

/* external repairs (external domain) */
.ext-cr, .ext-ses { border:1px solid var(--border); border-radius:10px; padding:10px 12px; margin-bottom:10px; background:var(--bg3); }
.ext-cr .p2p-kv, .ext-ses .p2p-kv { margin-top:8px; }
.ext-diffs { margin-top:8px; font-size:12px; padding:8px 10px; border-radius:8px; background:rgba(224,61,90,.08); border:1px solid rgba(224,61,90,.2); }
.ext-diffs div { margin-top:4px; }
.ext-angles { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:4px 10px; }
.ext-angles .form-group { margin-bottom:6px; }
.ext-acc { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:6px 12px; font-size:12.5px; }
.ext-acc label { display:flex; gap:8px; align-items:center; min-height:32px; }
.ext-dmg { border:1px dashed var(--border); border-radius:8px; padding:8px 10px; margin-bottom:8px; }
@media (max-width: 480px) { .ext-angles { grid-template-columns:1fr 1fr; } .ext-acc { grid-template-columns:1fr; } }
.p2p-q-item { display:flex; gap:10px; padding:10px; border:1px solid var(--border); border-radius:10px; margin-bottom:8px; background:var(--bg3); font-size:12.5px; }
.p2p-q-item.failed { border-color:rgba(224,61,90,.4); }
.p2p-q-thumb { width:48px; height:48px; flex-shrink:0; border-radius:8px; object-fit:cover; display:flex; align-items:center; justify-content:center; background:var(--bg2); color:var(--t3); font-size:20px; }
.p2p-q-body { flex:1; min-width:0; word-break:break-word; }
.p2p-q-err { margin-top:4px; font-size:11.5px; color:var(--red); }
/* masterdata: badges inside key-value grids keep their own width */
.p2p-kv div span.badge { display:inline-block; }

/* ── control domain: charts, audit cards, report filters, public report page ── */
.ctl-empty { font-size:12px; color:var(--t3); padding:14px 4px; }
.ctl-bars { display:flex; flex-direction:column; gap:6px; }
.ctl-bar { display:grid; grid-template-columns:minmax(90px,38%) 1fr auto; gap:8px; align-items:center; font-size:12px; padding:2px 4px; border-radius:6px; }
.ctl-bar.click { cursor:pointer; } .ctl-bar.click:hover { background:var(--hover-tint, rgba(79,142,247,.06)); }
.ctl-bar-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--t1); }
.ctl-bar-label small { display:block; color:var(--t3); font-size:10.5px; }
.ctl-bar-track { height:10px; background:var(--bg3); border-radius:4px; overflow:hidden; }
.ctl-bar-fill { height:100%; background:var(--sapphire, #4f8ef7); border-radius:0 4px 4px 0; min-width:2px; }
.ctl-bar-fill.warn { background:var(--amber, #d97706); }
.ctl-bar-value { font-variant-numeric:tabular-nums; color:var(--t2); white-space:nowrap; }
.ctl-svg { width:100%; height:auto; display:block; }
.ctl-svg .ctl-grid { stroke:var(--border); stroke-width:1; }
.ctl-svg .ctl-axis { fill:var(--t3); font-size:10px; }
.ctl-svg .ctl-col.s1, .ctl-legend i.s1 { fill:var(--sapphire, #4f8ef7); background:var(--sapphire, #4f8ef7); }
.ctl-svg .ctl-col.s2, .ctl-legend i.s2 { fill:var(--gold, #c9a84c); background:var(--gold, #c9a84c); }
.ctl-legend { display:flex; gap:14px; font-size:11.5px; color:var(--t2); margin-bottom:4px; }
.ctl-legend i { display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:5px; vertical-align:-1px; }
.ctl-param { margin-bottom:2px; color:var(--t2); } .ctl-param b { color:var(--t1); font-weight:600; }
.ctl-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:10px; margin-bottom:12px; }
.ctl-card { background:var(--bg2); border:1px solid var(--border); border-radius:var(--r-md, 10px); padding:12px; }
.ctl-card.click { cursor:pointer; } .ctl-card.click:hover { border-color:var(--sapphire, #4f8ef7); }
.ctl-card .btn { min-height:36px; }
.ctl-meter { height:6px; background:var(--bg3); border-radius:4px; overflow:hidden; margin:8px 0 6px; }
.ctl-meter div { height:100%; background:var(--emerald, #0fa572); }
.ctl-filters { display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; }
.ctl-filters .form-group { margin-bottom:6px; min-width:140px; flex:1; }
.ctl-attest-row { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:6px 0; border-top:1px solid var(--border); font-size:12.5px; }
@media (max-width: 520px) {
  .ctl-cards { grid-template-columns:1fr; }
  .ctl-bar { grid-template-columns:1fr auto; } .ctl-bar-track { grid-column:1 / -1; grid-row:2; }
  .ctl-filters .form-group { min-width:100%; }
}
#p2p-anon-link { position:fixed; right:16px; bottom:14px; z-index:5; font-size:11.5px; color:var(--t2); text-decoration:none; padding:6px 12px; border-radius:16px; border:1px solid var(--border, rgba(128,128,128,.25)); background:var(--bg2, transparent); }
#p2p-anon-link:hover { color:var(--gold, #c9a84c); }
#p2p-anon { position:fixed; inset:0; overflow-y:auto; background:var(--ink, #080c14); z-index:50; display:flex; justify-content:center; align-items:flex-start; padding:32px 16px; }
#p2p-anon .anon-card { width:100%; max-width:520px; background:var(--bg2, #111827); border:1px solid var(--border, rgba(255,255,255,.08)); border-radius:16px; padding:24px 20px; color:var(--t1); }
#p2p-anon h2 { margin:0 0 6px; font-size:20px; }
#p2p-anon .anon-sub { font-size:13px; color:var(--t2); margin:0 0 16px; line-height:1.5; }
#p2p-anon label { display:block; font-size:12px; color:var(--t2); margin-bottom:12px; }
#p2p-anon label .form-input { margin-top:5px; width:100%; }
#p2p-anon .anon-error { color:#f87171; font-size:12.5px; min-height:16px; margin-bottom:8px; }
#p2p-anon .anon-ok { font-size:15px; color:var(--emerald, #0fa572); font-weight:600; }
#p2p-anon .anon-foot { text-align:center; margin:16px 0 0; font-size:12.5px; }
#p2p-anon .anon-foot a { color:var(--t3); }
/* sourcing: keep document numbers on one line in tables */
.src-no { white-space: nowrap; }