:root { --ink:#1d2433; --mut:#667085; --line:#e4e7ec; --bg:#f6f7f9; --card:#fff; --acc:#1f4fd8; --ok:#186118; --okbg:#e4efe4; --bad:#b42318; --badbg:#fdeeee; --warn:#8a5a00; --warnbg:#fdf0d5; }
* { box-sizing: border-box; }
body { margin:0; font:15px/1.45 "Segoe UI", Aptos, Calibri, system-ui, sans-serif; color:var(--ink); background:var(--bg); }
.top { display:flex; align-items:center; gap:16px; padding:10px 20px; background:#14213d; color:#fff; }
.top a { color:#c9d6ff; text-decoration:none; font-size:14px; }
.title { font-weight:600; font-size:18px; flex:1; }
.ver { font-weight:400; font-size:12px; opacity:.7; }
.who { font-size:13px; display:flex; gap:10px; align-items:center; }
.who button { background:transparent; color:#fff; border:1px solid #ffffff66; }
.tabs { display:flex; gap:4px; padding:0 20px; background:#fff; border-bottom:1px solid var(--line); overflow-x:auto; }
.tabs a { padding:12px 14px; color:var(--mut); text-decoration:none; border-bottom:2px solid transparent; white-space:nowrap; }
.tabs a.on { color:var(--ink); border-color:var(--acc); font-weight:600; }
.view { max-width:1200px; margin:0 auto; padding:20px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:16px 18px; margin-bottom:16px; }
.card h2 { margin:0 0 10px; font-size:17px; }
.card h3 { margin:14px 0 6px; font-size:15px; }
.mut { color:var(--mut); } .small { font-size:13px; }
.grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px; }
.stat { border:1px solid var(--line); border-radius:8px; padding:10px 12px; background:#fbfcfd; }
.stat b { display:block; font-size:24px; font-variant-numeric:tabular-nums; }
.stat span { color:var(--mut); font-size:13px; }
.cols { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:16px; }
table { border-collapse:collapse; width:100%; font-size:14px; }
th, td { text-align:left; padding:6px 8px; border-bottom:1px solid var(--line); vertical-align:top; }
th { font-size:12px; text-transform:uppercase; letter-spacing:.03em; color:var(--mut); font-weight:600; }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; }
.tablewrap { overflow-x:auto; }
button, .btn { font:inherit; padding:8px 14px; border-radius:7px; border:1px solid var(--acc); background:var(--acc); color:#fff; cursor:pointer; }
button.ghost { background:#fff; color:var(--acc); }
button:disabled { opacity:.5; cursor:wait; }
input, select { font:inherit; padding:8px 10px; border:1px solid #cfd4dc; border-radius:7px; background:#fff; }
label { display:block; margin:8px 0; font-size:14px; }
label input[type=email], label input[type=password] { display:block; width:100%; margin-top:4px; }
.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.tag { display:inline-block; padding:1px 8px; border-radius:20px; font-size:12px; background:#eceff3; color:#41485a; }
.tag.ok { background:var(--okbg); color:var(--ok); } .tag.bad { background:var(--badbg); color:var(--bad); } .tag.warn { background:var(--warnbg); color:var(--warn); }
.note { padding:10px 12px; border-radius:8px; background:var(--warnbg); color:var(--warn); margin:8px 0; }
.note.bad { background:var(--badbg); color:var(--bad); } .note.ok { background:var(--okbg); color:var(--ok); }
.vendors { display:flex; flex-wrap:wrap; gap:2px 12px; min-width:320px; }
.vendors label { display:inline-flex; align-items:center; gap:4px; margin:0; white-space:nowrap; font-size:13px; }
.hs.ok { border-left:4px solid var(--ok); } .hs.warn { border-left:4px solid var(--warn); background:var(--warnbg); } .hs.bad { border-left:4px solid var(--bad); background:var(--badbg); } .hs.off { border-left:4px solid #b8c2d6; }
.row label { margin:4px 0; }
textarea { font:inherit; padding:8px 10px; border:1px solid #cfd4dc; border-radius:7px; background:#fff; }
label.block input, label.block textarea { display:block; width:100%; margin-top:4px; box-sizing:border-box; }
.row label input[type=text] { min-width:260px; }
.warnrow td { background:#fff6f6; }
.warnrow td:first-child { border-left:3px solid var(--bad); }
td select, td input[type=text] { max-width:260px; font-size:13px; padding:5px 7px; }
.flash { position:sticky; top:0; z-index:5; padding:10px 20px; background:var(--okbg); color:var(--ok); border-bottom:1px solid var(--line); }
.flash.bad { background:var(--badbg); color:var(--bad); }
.drop { border:2px dashed #b8c2d6; border-radius:10px; padding:22px; text-align:center; background:#fbfcfe; }
.drop.over { border-color:var(--acc); background:#eef3ff; }
.login { max-width:380px; margin:60px auto; }
details summary { cursor:pointer; color:var(--acc); }
/* 0.8 replies */
.reply { border-top:1px solid var(--line); padding:10px 0; }
.reply .tag { margin:4px 4px 0 0; }
.replynew { white-space:pre-wrap; font:inherit; margin:8px 0; padding:10px 12px; background:#f3f6fb; border-left:3px solid var(--acc); border-radius:6px; }
.replytext { white-space:pre-wrap; max-height:420px; overflow:auto; background:#fbfcfd; border:1px solid var(--line); border-radius:6px; padding:10px; }
.replyref { margin:14px 0 0; }
.scopes a.tag { text-decoration:none; padding:4px 12px; font-size:13px; }
input.identin { width:330px; }
@media (max-width:640px) { .view { padding:12px; } .top { padding:10px 12px; } .stat b { font-size:20px; } input.identin { width:100%; } }
/* 2.0: search boxes on lists and long dropdowns */
input.listfind { display:block; margin:6px 0 10px; max-width:360px; }
.selwrap { display:inline-flex; gap:4px; align-items:center; flex-wrap:wrap; }
input.selfind { width:90px; padding:4px 6px; font-size:13px; }
.answers { margin:8px 0; }
/* 2.10.0: the WhatsApp desk thread on the candidate card */
.wathread { display:flex; flex-direction:column; gap:6px; max-height:320px; overflow:auto; padding:6px; background:var(--bg); border-radius:8px; }
.wamsg { max-width:78%; padding:6px 10px; border-radius:10px; white-space:pre-wrap; font-size:13px; }
.wamsg.waout { align-self:flex-end; background:#dcf8c6; }
.wamsg.wain { align-self:flex-start; background:#fff; border:1px solid var(--line); }
/* 2.11.0: case intake */
.candgrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:6px 12px; }
.candgrid label.block { margin:0; }
.candgrid input, .candgrid select { width:100%; }
pre.mailtext { white-space:pre-wrap; font:13px/1.45 inherit; font-family:inherit; max-height:420px; overflow:auto; background:var(--bg); padding:8px; border-radius:8px; margin:0; }

/* 2.26.4: wide tables keep the first column (name) and the last (Save) in view while scrolling sideways */
table.stick th:first-child, table.stick td:first-child { position: sticky; left: 0; z-index: 2; background: #fff; box-shadow: 2px 0 0 rgba(0,0,0,.06); }
table.stick th:last-child, table.stick td:last-child { position: sticky; right: 0; z-index: 2; background: #fff; box-shadow: -2px 0 0 rgba(0,0,0,.06); }
table.stick tr.warnrow td:first-child, table.stick tr.warnrow td:last-child { background: #fff6f6; }
/* 2.26.5: Clients table fits a laptop screen: narrower inputs and dropdown so the Save column does not cover the others */
table.stick td input[type=text], table.stick td input[type=email] { width: 118px !important; min-width: 0 !important; box-sizing: border-box; }
table.stick td select { width: 165px !important; max-width: 165px; }
table.stick th, table.stick td { padding-left: 6px; padding-right: 6px; }

/* 0.8.1 / 2.51.0: the vendor overview grid. Equal boxes, fixed layout, everything on one screen with no sideways scroll on a computer or tablet. */
.ovt{table-layout:fixed;width:100%;border-collapse:separate;border-spacing:0;margin-top:.8rem;font-size:.9rem}
.ovt th,.ovt td{padding:.55rem .25rem;text-align:center;vertical-align:middle;border-bottom:1px solid var(--line);overflow-wrap:anywhere}
.ovt th{font-size:.66rem;line-height:1.15;white-space:normal;letter-spacing:.02em;text-transform:uppercase;color:var(--mut);vertical-align:bottom;padding-bottom:.45rem}
.ovt th:first-child,.ovt td:first-child{width:15%;text-align:left;padding-left:.7rem}
.ovt td.num{text-align:center}
.ovt td .z{color:var(--line);color:#c4c9d1}
.ovt td a,.ovt td .pill{display:inline-block;min-width:2rem;padding:.15rem .4rem;border-radius:6px;background:rgba(177,40,48,.08);font-weight:600;text-decoration:none}
.ovt td a:hover{background:rgba(177,40,48,.16)}
.ovt td .sub{display:block;font-size:.66rem;color:var(--mut);margin-top:.1rem}
.ovt td.tot{font-weight:700}
.ovt tr.all td{background:#f4f5f8;font-weight:700;border-top:2px solid var(--line)}
.ovt tr.all td:first-child{border-radius:0 0 0 8px}.ovt tr.all td:last-child{border-radius:0 0 8px 0}
.ovt .warntxt a,.ovt .warntxt .pill{background:rgba(196,129,0,.16)}.ovt .badtxt a,.ovt .badtxt .pill{background:rgba(177,40,48,.2)}
@media (max-width:820px){.ovtwrap{overflow-x:auto}.ovt{min-width:760px}}