:root{--red:#CA0300;--ink:#1c1c1e;--mut:#6b7280;--line:#e5e7eb;--bg:#f6f7f9;--ok:#0f9d58}
*{box-sizing:border-box}
body{margin:0;font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;color:var(--ink);background:var(--bg)}
a{color:inherit}
.brand{font-weight:800;letter-spacing:.08em}
.brand span{color:var(--red)}
.brand.big{font-size:27px}
.topbar{display:flex;align-items:center;gap:18px;background:#fff;border-bottom:3px solid var(--red);padding:10px 20px;flex-wrap:wrap}
.topbar nav{display:flex;gap:2px;flex:1;flex-wrap:wrap}
.topbar nav a{padding:6px 10px;border-radius:6px;text-decoration:none;font-size:14px;color:#374151}
.topbar nav a:hover{background:#f1f2f4}
.topbar nav a.on{background:var(--red);color:#fff}
.who{font-size:13px;color:var(--mut)}
.wrap{max-width:1080px;margin:0 auto;padding:28px 20px 60px}
h1{font-size:25px;margin:0 0 4px}
h2{font-size:16px;text-transform:uppercase;letter-spacing:.06em;color:var(--mut);margin:0 0 12px}
.sub{color:var(--mut);margin:0 0 24px}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:34px}
.tile{background:#fff;border:1px solid var(--line);border-radius:10px;padding:16px}
.tile .n{font-size:27px;font-weight:700}
.tile .l{font-size:13px;color:var(--mut);margin-top:2px}
.flow{background:#fff;border:1px solid var(--line);border-radius:10px;padding:20px}
.strip{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.step{padding:7px 12px;border-radius:999px;background:#f1f2f4;color:#9ca3af;font-size:13px;white-space:nowrap}
.step.next{background:var(--ok);color:#fff;box-shadow:0 0 0 4px rgba(15,157,88,.16)}
.strip.purchase .step{background:#f6f2ea}
.note{font-size:13px;color:var(--mut);margin:14px 0 0}
.foot{margin-top:26px;font-size:13px;color:var(--mut)}
code{background:#eef0f3;padding:1px 5px;border-radius:4px}
.login-body{display:flex;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(160deg,#20232a,#3a3f4b)}
.login-card{background:#fff;padding:34px 32px;border-radius:14px;width:340px;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.login-card .sub{margin:6px 0 22px;font-size:13px}
.login-card label{display:block;font-size:13px;color:var(--mut);margin-bottom:14px}
.login-card input{display:block;width:100%;margin-top:5px;padding:10px;border:1px solid var(--line);border-radius:8px;font-size:15px}
.login-card button{width:100%;padding:11px;border:0;border-radius:8px;background:var(--red);color:#fff;font-size:15px;font-weight:600;cursor:pointer}
.err{background:#fdecec;border:1px solid #f5c2c0;color:#9b1c1c;padding:9px 11px;border-radius:8px;font-size:13px;margin-bottom:16px}
.crumb{font-size:13px;margin:0 0 10px}
.searchbar{display:flex;gap:8px;margin:0 0 12px;flex-wrap:wrap}
.searchbar input{flex:1;min-width:240px;padding:9px 11px;border:1px solid var(--line);border-radius:8px;font-size:15px}
.searchbar button{padding:9px 18px;border:0;border-radius:8px;background:var(--red);color:#fff;font-weight:600;cursor:pointer}
.searchbar .clear{align-self:center;font-size:13px;color:var(--mut)}
.scroll{overflow-x:auto;background:#fff;border:1px solid var(--line);border-radius:10px}
table.grid{border-collapse:collapse;width:100%;font-size:14px}
table.grid th{text-align:left;background:#f4f5f7;padding:8px 10px;border-bottom:1px solid var(--line);white-space:normal;overflow-wrap:anywhere;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--mut)}
table.grid td{padding:7px 10px;border-bottom:1px solid #f0f1f3;white-space:normal;overflow-wrap:anywhere;vertical-align:top}
table.grid tr:hover td{background:#fafbfc}
table.grid a{color:var(--red);font-weight:600;text-decoration:none}
table.kv{border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:10px;width:100%;font-size:14px;margin-bottom:24px}
table.kv th{text-align:left;width:220px;padding:7px 12px;color:var(--mut);font-weight:500;border-bottom:1px solid #f0f1f3;vertical-align:top}
table.kv td{padding:7px 12px;border-bottom:1px solid #f0f1f3}
.pager{margin-top:14px;display:flex;gap:16px;font-size:14px}
a.tile.link{text-decoration:none;display:block;transition:border-color .12s}
a.tile.link:hover{border-color:var(--red)}
/* CHG-20260818-032 entry forms */
.entry{max-width:1150px}
.entry fieldset{border:1px solid #d9d9d9;border-radius:6px;padding:12px 16px 16px;margin:0 0 16px;background:#fff}
.entry legend{font-weight:600;color:#CA0300;padding:0 6px;font-size:14px}
.row2{display:flex;flex-wrap:wrap;gap:14px}
.row2 label{display:block;font-size:13px;color:#555;margin-bottom:3px}
.row2 .fld{flex:1 1 210px;min-width:170px}
.row2 .fld.wide{flex:1 1 100%}
.entry input[type=text],.entry input[type=date],.entry input[type=number],.entry select,.entry textarea{width:100%;box-sizing:border-box;padding:7px 8px;border:1px solid #c4c4c4;border-radius:4px;font-size:15px;font-family:inherit}
.entry input:focus,.entry select:focus,.entry textarea:focus{outline:none;border-color:#CA0300;box-shadow:0 0 0 2px rgba(202,3,0,.12)}
.hint{font-size:13px;color:#b06000;margin-top:3px;min-height:14px}
.hint.bad{color:#CA0300;font-weight:600}
button.ok{background:#CA0300;color:#fff;border:0;border-radius:4px;padding:9px 22px;font-size:15px;cursor:pointer}
button.ok:hover{background:#a80200}
button.ghost,a.ghost{background:#fff;color:#333;border:1px solid #c4c4c4;border-radius:4px;padding:8px 16px;font-size:15px;cursor:pointer;text-decoration:none;display:inline-block}
button.ghost:hover,a.ghost:hover{background:#f2f2f2}
.err{background:#fde8e8;border:1px solid #f5aca9;color:#8b0200;padding:10px 12px;border-radius:5px;margin:0 0 14px}
.good{background:#e8f6ec;border:1px solid #a9d9b8;color:#14602c;padding:10px 12px;border-radius:5px;margin:0 0 14px}
table.items{width:100%;border-collapse:collapse;margin-top:6px}
table.items th{background:#f4f4f4;font-size:13px;text-align:left;padding:6px;border:1px solid #ddd;white-space:nowrap}
table.items td{padding:4px;border:1px solid #e5e5e5;vertical-align:top}
table.items input,table.items select{width:100%;box-sizing:border-box;padding:5px;border:1px solid #ccc;border-radius:3px;font-size:14px}
.actions{margin-top:12px;display:flex;gap:10px;align-items:center}
/* CHG-20260818-034 broaden: inputs in this app carry no type attribute */
.entry input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]){width:100%;box-sizing:border-box;padding:7px 8px;border:1px solid #c4c4c4;border-radius:4px;font-size:15px;font-family:inherit;background:#fff}
.entry input[readonly]{background:#f6f6f6;color:#444}
.row2>label{display:block;flex:1 1 210px;min-width:170px;font-size:13px;color:#555}
.row2>label.wide{flex:1 1 100%}
.row2>label>input,.row2>label>select,.row2>label>textarea{margin-top:3px}
.entry h3,.entry .sect{font-size:14px;letter-spacing:.04em;text-transform:uppercase;color:#CA0300;margin:20px 0 4px;border-bottom:1px solid #eee;padding-bottom:4px}
.entry button[type=submit]{background:#CA0300;color:#fff;border:0;border-radius:4px;padding:10px 24px;font-size:15px;cursor:pointer;margin-top:14px}
.entry button[type=submit]:hover{background:#a80200}
table.items input{padding:5px !important;font-size:14px !important;border-radius:3px !important}

/* ---- flow strip polish (ported from console mock-up) 2026-08-20 ---- */
.strip{gap:5px}
.step{padding:8px 13px;font-size:14px;font-weight:600;color:#4b5563;background:#eceef1;border:1px solid #dfe3e8;-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision}
.step.next{background:var(--ok);color:#fff;border-color:#0f9d58;font-weight:700;box-shadow:0 0 0 2px rgba(15,157,88,.22),0 0 8px rgba(15,157,88,.45)}
.strip.purchase .step{background:#f7f1e6;border-color:#ecdfc8;color:#6b5a3e}
.strip.purchase .step.next{background:#f0921f;border-color:#e8871a;color:#fff;box-shadow:0 0 0 2px rgba(240,146,31,.22),0 0 8px rgba(240,146,31,.5)}

/* ---- console.php - deal cards, dark flow strips, action pills ---- */
.cons .searchrow{display:flex;gap:10px;align-items:center;margin:0 0 18px}
.cons .searchrow input{flex:0 1 420px;padding:9px 12px;border:1px solid var(--line);border-radius:8px;font-size:15px}
.cons .searchrow button{padding:9px 16px;border:1px solid var(--line);border-radius:8px;background:#fff;font-size:14px;font-weight:600;cursor:pointer}
.cons .acts{display:flex;gap:4px;margin-left:auto;flex-wrap:nowrap}
.cons .act{width:clamp(74px,6.5vw,98px);min-width:74px;min-height:64px;border-radius:9px;color:#fff;padding:8px 5px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font:700 clamp(10px,.8vw,12px)/1.2 Arial;text-align:center;text-decoration:none;-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision}
.cons .act b{font:400 clamp(14px,1.32vw,19px)/1 Arial}
.cons .deal{background:#fff;border:1px solid var(--line);border-radius:10px;margin-bottom:20px;overflow:hidden}
.cons .ringwrap{background:#0d1424}
.cons .fstrip{display:flex;padding:10px 0 12px}
.cons .fgrp{display:flex;flex-direction:column;min-width:0}
.cons .fgrp.s{flex:8}
.cons .fgrp.p{flex:7}
.cons .glab{font:700 10px/1 Arial;letter-spacing:.11em;padding:2px 0 5px 14px}
.cons .fgrp.s .glab{color:#5eeaad}
.cons .fgrp.p .glab{color:#ffb03f}
.cons .row{display:flex;flex:1}
.cons .fs{flex:1;min-width:0;text-align:center;font:700 10px/1.15 Arial;color:#b3c1dc;position:relative;-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision}
.cons .fs .c{width:46px;height:46px;border-radius:50%;border:1.5px dashed #66779c;color:#a9b8d6;display:flex;align-items:center;justify-content:center;font-size:20px;margin:0 auto 6px}
.cons .fs .lbl{display:block;height:1.25em;line-height:1.15;overflow:hidden}
.cons .fs .dt{display:block;font:700 9.6px/1.1 Arial;color:#c3cee5;margin-top:0}
.cons .fs .tk{position:absolute;top:32px;left:50%;margin-left:6px;width:16px;height:16px;border-radius:50%;font:700 10px/16px Arial;font-style:normal;color:#0d1424;box-shadow:0 0 0 1.5px #0d1424}
.cons .fgrp.s .fs.done{color:#f2fdf7}
.cons .fgrp.s .fs.done .c{border:2px solid #43d99f;color:#7bf5c2}
.cons .fgrp.s .fs.done .tk{background:#3fd39b}
.cons .fgrp.s .fs.done .dt{color:#7bf5c2}
.cons .fgrp.s .fs.next{color:#7bf5c2}
.cons .fgrp.s .fs.next .c{border:2px solid #7bf5c2;color:#a6ffdb;background:rgba(94,234,173,.06);box-shadow:0 0 0 1px rgba(94,234,173,.45),0 0 7px rgba(94,234,173,.5)}
.cons .fgrp.p .fs.done{color:#fff7ec}
.cons .fgrp.p .fs.done .c{border:2px solid #f0921f;color:#ffb554}
.cons .fgrp.p .fs.done .tk{background:#e8871a}
.cons .fgrp.p .fs.done .dt{color:#ffc27a}
.cons .fgrp.p .fs.next{color:#ffb554}
.cons .fgrp.p .fs.next .c{border:2px solid #ffb554;color:#ffc98a;background:rgba(240,146,31,.06);box-shadow:0 0 0 1px rgba(240,146,31,.45),0 0 7px rgba(240,146,31,.5)}
.cons .meta{display:flex;flex-wrap:wrap;gap:2px 28px;padding:14px 16px;font-size:13.5px;background:#f7faf8;border-bottom:1px solid var(--line)}
.cons .meta div{min-width:230px}
.cons .meta span{color:var(--mut);font-size:12px;letter-spacing:.03em}
.cons table{width:100%;border-collapse:collapse;font-size:13.5px}
.cons th{text-align:left;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--mut);border-bottom:1px solid var(--line);padding:9px 10px;font-weight:700}
.cons td{padding:9px 10px;border-bottom:1px solid #f0f2f4;vertical-align:top}
.cons td.six{font-weight:700;color:#123d63}
.cons th.num,.cons td.num{text-align:right;white-space:nowrap}
.cons .pn{font-weight:700}
.cons tfoot td{background:#fafbfc;border-bottom:0}
.cons .empty{padding:18px;color:var(--mut);margin:0}

/* console: wider page so 15 steps get room, labels clipped not collided */
.wrap.cons{max-width:1360px}
.cons .fs{font-size:10px;padding:0 3px}
.cons .fs .lbl{white-space:nowrap;text-overflow:ellipsis}
.cons .fs .dt{font-size:10px}

/* CHG-20260902-W1  Wrapping is the default, everywhere.
   A column too narrow for its text should get taller, never paint over the
   column beside it. Columns are resizable, so anyone who wants one line back
   can drag for it. Cells that genuinely must never wrap - a date, a running
   number, a button row - say so with a class of their own, and a class still
   beats these two element rules. table-layout is deliberately left alone:
   colresize.js needs it fixed to hold the widths a person sets. */
td,th{white-space:normal;overflow-wrap:anywhere}

/* SG/US-CHG-20260921-CUST  customer screen styles, carried from erp4 assets/erp4.css */
/* ---- CHG-20260825-CUST - customer detail cards -----------------------
   Uses only the tokens already defined above: --red --ink --mut --line
   --bg --ok, plus the existing heading ink #16293f. No new palette.     */
.cx-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:14px 16px;background:#fff;border:1px solid var(--line);border-radius:10px;margin:0 0 14px}
.cx-head .cx-id{font-size:20px;font-weight:700;color:var(--red);letter-spacing:.6px;line-height:1.1}
.cx-head .cx-nm{font-size:16.5px;font-weight:700;color:#16293f;line-height:1.25;margin-top:2px}
.cx-head .cx-sp{flex:1 1 40px}
.cx-badge{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;padding:4px 11px;border-radius:999px;border:1px solid var(--line);color:var(--mut);background:var(--bg);white-space:nowrap}
.cx-badge.on{color:var(--ok);border-color:rgba(15,157,88,.35);background:rgba(15,157,88,.08)}
.cx-badge.off{color:var(--red);border-color:rgba(156,12,30,.30);background:rgba(156,12,30,.06)}
.cx-chips{display:flex;flex-wrap:wrap;gap:8px}
.cx-chip{font-size:12.5px;color:var(--mut);background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:4px 9px;white-space:nowrap}
.cx-chip b{color:#16293f;font-weight:600}
a.cx-chip{text-decoration:none;color:var(--red)}
a.cx-chip:hover{border-color:var(--red)}
.cx-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start;margin:0 0 14px}
.cx-card{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.cx-card>h3.cx-h{margin:0;padding:9px 14px;font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.9px;color:#16293f;border-bottom:1px solid var(--line);background:var(--bg)}
.cx-card table.kv{border:0;border-radius:0;width:100%}
.cx-card table.kv th{width:44%;max-width:180px;vertical-align:top}
.cx-card table.kv td{vertical-align:top;word-break:break-word}
.cx-card table.kv tr:last-child th,.cx-card table.kv tr:last-child td{border-bottom:0}
.cx-card.cx-wide{grid-column:1 / -1}
.cx-na{color:var(--mut)}
.cx-audit{font-size:12.5px;color:var(--mut);margin:0 0 14px}
@media (max-width:900px){.cx-grid{grid-template-columns:1fr}}
@media (max-width:560px){
  .cx-head{gap:8px 12px}
  .cx-head .cx-sp{display:none}
  .cx-card table.kv,.cx-card table.kv tbody,.cx-card table.kv tr{display:block;width:100%}
  .cx-card table.kv th,.cx-card table.kv td{display:block;width:auto;max-width:none;border-bottom:0}
  .cx-card table.kv th{padding:9px 14px 0;font-size:12px}
  .cx-card table.kv td{padding:1px 14px 9px}
  .cx-card table.kv tr{border-bottom:1px solid #f0f1f3}
  .cx-card table.kv tr:last-child{border-bottom:0}
}

.cx-up{font-size:12px;margin-left:8px;white-space:nowrap}

/* ---- CHG-20260825-CUST2 - customer search, form and status actions --------
   Same tokens as above: --red --ink --mut --line --bg --ok. No new palette. */
.cx-filters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 14px;
  background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin:0 0 14px}
.cx-filters label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;font-weight:600;color:#16293f;margin:0}
.cx-filters input,.cx-filters select{width:100%;box-sizing:border-box;font-weight:400}
.cx-filters p{grid-column:1 / -1;margin:2px 0 0;display:flex;align-items:center;gap:10px}

.cx-form{background:#fff;border:1px solid var(--line);border-radius:10px;padding:6px 16px 16px;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 16px}
.cx-form h3{grid-column:1 / -1;margin:16px 0 2px;font-size:12.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.9px;color:#16293f;border-bottom:1px solid var(--line);padding-bottom:6px}
.cx-form label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;font-weight:600;color:#16293f;margin:0}
.cx-form input,.cx-form textarea{width:100%;box-sizing:border-box;font-weight:400}
.cx-form textarea{resize:vertical}
.cx-form label.cx-check{flex-direction:row;align-items:center;gap:8px;font-weight:400;padding-top:18px}
.cx-form label.cx-check input{width:auto}
.cx-form>p{grid-column:1 / -1;margin:14px 0 0;display:flex;align-items:center;gap:10px}
.cx-req{color:var(--red)}

.cx-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 14px}
.cx-actions form{margin:0}

@media (max-width:980px){
  .cx-filters{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cx-form{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
  .cx-filters,.cx-form{grid-template-columns:1fr}
  .cx-form label.cx-check{padding-top:2px}
}
.cx-form label>.cx-cap{display:block}
.cx-confirm{background:#fff;border:1px solid var(--line);border-left:4px solid var(--red);
  border-radius:10px;padding:14px 16px;margin:0 0 14px}
.cx-confirm p{margin:0 0 10px}