: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}

/* ---- 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}

/* 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}