*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--ground);
  color:var(--ink);
  font:var(--font-size)/1.55 var(--f-ui);
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.wrap{max-width:var(--page-width);margin:0;padding:26px 30px 30px}
h1{font-size:24px;letter-spacing:-.02em;margin:0 0 4px;font-weight:var(--weight-heading,700)}
h2{font-size:16px;letter-spacing:-.01em;margin:0 0 12px;font-weight:var(--weight-heading,700)}
.sub{color:var(--ink-3);font-size:14px;margin:0 0 22px}
.head{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.head .sub{margin:0}
.head .spacer{margin-left:auto}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- list page command bar (Shipments, Customer Invoices,
   Offers, Daily Expenses) ----------
   One thin row above the table: a "Show filters" button, the count and
   totals, page-specific chips, and the page's own actions. The filter
   form lives in .cb-panel, which floats OVER the table when opened
   (cmdbar.js) instead of pushing it down - the table keeps the room. */
.cmdwrap{position:relative;margin-bottom:12px}
.cmdbar{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);
  padding:7px 10px;
}
.cb-btn{
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  font:700 13.5px var(--f-ui);color:var(--ink);background:var(--surface);
  border:1px solid var(--rule);border-radius:6px;padding:6px 12px;
}
.cb-btn:hover,.cb-btn[aria-expanded="true"]{border-color:var(--accent);color:var(--accent)}
.cb-badge{background:var(--accent);color:#fff;border-radius:999px;font:700 11px/1.4 var(--f-ui);padding:0 7px}
.cb-count{font-size:13.5px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.cb-count b{color:var(--ink);font-weight:700}
.cb-count b.amt-paid{color:var(--pal-green, #198754)}
.cb-count b.amt-remaining{color:var(--pal-red, #DC3545)}
.cb-sep{color:var(--ink-3);margin:0 6px}
.cb-spacer{margin-left:auto}
.cmdbar .btn.cb-new{padding:7px 16px;font-size:13.5px}
.cb-check{display:inline-flex;align-items:center;gap:5px;font:500 13px var(--f-ui);color:var(--ink-2);cursor:pointer;margin:0;text-transform:none;letter-spacing:0}

.cb-pick{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.cb-pick[hidden],.cb-panel[hidden]{display:none}
.cb-chip{display:inline-flex;align-items:center;gap:7px;border-radius:999px;font:700 12.5px var(--f-mono);white-space:nowrap}
.cb-chip.acid{background:#FAEEDA;border:1px solid #E7C98A;color:#633806;padding:3px 4px 3px 12px}
.cb-chip.acid .cb-k{font:800 11px var(--f-mono);letter-spacing:.08em}
.cb-chip.acid .cb-file{font-weight:500;color:#8A6F22}
.cb-copy{
  display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;
  border:0;border-radius:50%;background:#E7C98A;color:#633806;cursor:pointer;padding:0;
}
.cb-copy:hover{background:#C5A55A;color:#fff}
.cb-copy.done{background:var(--pal-green, #198754);color:#fff}
.cb-chip.pay{padding:4px 12px;font-family:var(--f-ui)}
.cb-chip.pay.full{background:var(--pal-green, #198754);color:#fff}
.cb-chip.pay.part{background:#FCEBEB;color:var(--pal-red, #DC3545);border:1px solid #F7C1C1}
.cb-chip.pay.over{background:var(--pal-red, #DC3545);color:#fff}
.cb-clear{border:0;background:none;color:var(--ink-3);font-size:18px;line-height:1;cursor:pointer;padding:0 4px}
.cb-clear:hover{color:var(--ink)}

.cb-panel{
  position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:40;
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);
  box-shadow:0 14px 34px rgba(0,0,0,.18);padding:16px 18px;
}
.cb-panel .filters{margin:0;background:transparent;border:none;padding:0}

/* ---------- Style Guide: "Your style" picker ----------
   Each option is a submit button drawn as a tiny screenshot of that
   style (colours come inline from the style's own file). */
.sg-themes{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
.sg-theme{
  display:flex;flex-direction:column;gap:8px;padding:8px;cursor:pointer;text-align:left;
  background:var(--surface);border:2px solid var(--rule);border-radius:var(--radius);font:inherit;color:var(--ink);
}
.sg-theme:hover{border-color:var(--accent)}
.sg-theme.on{border-color:var(--ok);box-shadow:0 0 0 3px var(--ok-soft)}
.sg-theme-shot{display:flex;height:96px;border-radius:6px;overflow:hidden;border:1px solid rgba(0,0,0,.08)}
.sg-theme-rail{width:26px;display:flex;flex-direction:column;gap:5px;padding:9px 6px}
.sg-theme-rail i{display:block;height:4px;border-radius:2px}
.sg-theme-page{flex:1;display:flex;flex-direction:column;gap:5px;padding:7px}
.sg-theme-bar{display:flex;align-items:center;gap:5px;height:14px;padding:0 5px;border:1px solid;border-radius:3px}
.sg-theme-bar b{width:18px;height:6px;border-radius:2px}
.sg-theme-bar em{flex:1;height:3px;border-radius:2px;opacity:.5}
.sg-theme-split{display:flex;align-items:stretch;height:28px;border-radius:4px;overflow:hidden}
.sg-theme-split span{width:30px;display:flex;align-items:center;justify-content:center;font:700 10px var(--f-mono)}
.sg-theme-split em{flex:1;margin:9px 8px;height:4px;border-radius:2px;opacity:.55}
.sg-theme-rows{flex:1;display:flex;flex-direction:column;justify-content:center;gap:4px;padding:0 6px;border:1px solid;border-radius:3px}
.sg-theme-rows em{display:block;height:3px;border-radius:2px;opacity:.6}
.sg-theme-rows em + em{width:60%}
.sg-theme-name{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font:700 13px var(--f-ui);padding:0 2px}

/* ---------- cards ---------- */
.card{
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);
  margin-bottom:20px;overflow:hidden;
}
.card > h2{
  margin:0;padding:13px 18px;border-bottom:1px solid var(--rule-soft);
  font:600 12px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
  display:flex;align-items:center;gap:10px;
}
.card > h2 .count{
  margin-left:auto;font-weight:400;letter-spacing:0;text-transform:none;
}

/* "Create report" popover - a <details> living inside a .card > h2
   flex row (search.php's per-module result cards). Plain HTML
   disclosure, no JS: the browser owns open/close and outside-click
   already closes it via the summary's own focus behavior. */
.report-picker{position:relative;font:400 12.5px var(--f-ui);text-transform:none;letter-spacing:0}
.report-picker:not(:last-child){margin-left:auto}
.report-picker summary{
  cursor:pointer;list-style:none;color:var(--ink-2);
  border:1px solid var(--rule);border-radius:5px;padding:5px 11px;background:var(--surface);
}
.report-picker summary::-webkit-details-marker,
.report-picker summary::marker{display:none;content:''}
.report-picker summary:hover{border-color:var(--accent);color:var(--accent)}
.report-picker[open] summary{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.report-picker-body{
  position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:230px;
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);
  box-shadow:0 10px 28px rgba(0,0,0,.18);padding:14px;
}
.report-picker-body .rp-label{font:500 10.5px/1 var(--f-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px}
.report-picker-cols{display:flex;flex-direction:column;gap:7px;margin-bottom:12px;max-height:240px;overflow:auto}
.report-picker-cols label{display:flex;align-items:center;gap:7px;font:400 13px var(--f-ui);color:var(--ink);text-transform:none;letter-spacing:0}
.report-picker-cols input{margin:0}
.card .body{padding:18px}
.grid{display:grid;gap:20px}
@media(min-width:1000px){.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}}

/* ---------- stat tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-bottom:24px}
.tile{background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);padding:15px 17px}
.tile b{display:block;font-size:25px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.15}
.tile span{display:block;font:500 10px/1.3 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-top:6px}
.tile.warn b{color:var(--warn)}
.tile.accent b{color:var(--accent)}

/* ---------- tables ---------- */
.tw{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:14px}
th{
  text-align:left;white-space:nowrap;
  font:600 10.5px/1 var(--f-mono);letter-spacing:.09em;text-transform:uppercase;
  padding:11px 14px;
  color:var(--th-fg, var(--ink-3));
  background:var(--th-bg, var(--surface));
  border-bottom:2px solid var(--th-accent, var(--rule));
}
td{padding:var(--row-pad) 14px;border-bottom:1px solid var(--rule-soft);vertical-align:top}
tbody tr:hover td{background:var(--surface-2)}
tbody tr:last-child td{border-bottom:0}
th.r,td.r{text-align:right}
.num{font-variant-numeric:tabular-nums;white-space:nowrap}
td .num{font-family:var(--f-mono);font-size:13px}
.mono{font-family:var(--f-mono);font-size:13px}
.dim{color:var(--ink-3)}
.empty{padding:34px 18px;text-align:center;color:var(--ink-3);font-size:14px}

/* ---------- chips ---------- */
.chip{
  display:inline-block;font:500 10.5px/1.5 var(--f-mono);letter-spacing:.04em;
  padding:2px 8px;border-radius:3px;white-space:nowrap;
  background:var(--surface-2);color:var(--ink-2);
}
.chip.ok{background:var(--ok-soft);color:var(--ok)}
.chip.warn{background:var(--warn-soft);color:var(--warn)}
.chip.acc{background:var(--accent-soft);color:var(--accent)}

/* ---------- stage rail ---------- */
.stagerail{display:flex;gap:3px;align-items:center}
.stagerail i{
  width:15px;height:7px;border-radius:2px;background:var(--rule);display:block;
}
.stagerail i.done{background:var(--accent)}
.stagerail i.dated{background:var(--ok)}

/* ---------- forms ---------- */
.form{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.form .full{grid-column:1/-1}
label{display:block;font:500 10.5px/1 var(--f-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
input[type=text],input[type=password],input[type=number],input[type=date],select,textarea{
  width:100%;padding:var(--field-pad, 8px 10px);font:14px var(--f-ui);color:var(--ink);
  background:var(--surface);border:1.5px solid var(--field-border, var(--rule));border-radius:var(--field-radius, 4px);
}
input:focus,select:focus,textarea:focus{border-color:var(--focus, var(--accent));outline:none;box-shadow:0 0 0 3px var(--focus-glow, var(--accent-soft))}
textarea{min-height:76px;resize:vertical}
.hint{font-size:12px;color:var(--ink-3);margin-top:5px}
.check{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--ink)}
.check input{width:16px;height:16px;margin:0}
.actions{display:flex;gap:10px;align-items:center;padding:16px 18px;border-top:1px solid var(--rule-soft);background:var(--surface-2)}

/* ---------- settings.php: font style picker ---------- */
.settings-preview{
  border:1.5px dashed var(--rule);border-radius:8px;padding:18px 20px;margin-bottom:20px;background:var(--surface-2);
  transition:font-size .1s ease;
}
.settings-preview .sp-label{
  margin:0 0 10px;font:600 10.5px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
}
.settings-preview .sp-h{margin:0 0 6px;font-size:22px;letter-spacing:-.02em;color:var(--ink);transition:font-family .1s,font-weight .1s}
.settings-preview .sp-body{margin:0;color:var(--ink-2);line-height:1.55;transition:font-family .1s,font-size .1s}
.font-style-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.font-style-opt{
  display:flex;align-items:center;gap:12px;padding:12px 14px;border:1.5px solid var(--rule);border-radius:8px;
  cursor:pointer;transition:border-color .15s,background .15s;
}
.font-style-opt:hover{background:var(--surface-2)}
.font-style-opt.on{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 8%, transparent)}
.font-style-opt input{margin:0;flex:none}
.fso-preview{
  flex:none;width:40px;height:40px;border-radius:8px;background:var(--surface-2);
  display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:700;color:var(--accent);
}
.font-style-opt.on .fso-preview{background:var(--accent);color:#fff}
.fso-text{display:flex;flex-direction:column;gap:2px;font-size:13px}
.fso-text .dim{font-size:12px}

/* Prominent by default - see README.md "Buttons" for the convention
   this follows across every form: bigger touch target, bold label,
   a resting shadow tinted from the button's own colour, and a small
   lift on hover so the whole app's buttons read as things to press
   rather than flat text with a border. */
.btn{
  display:inline-flex;align-items:center;gap:6px;padding:10px 20px;border-radius:6px;border:1.5px solid transparent;
  font:700 14.5px var(--f-ui);cursor:pointer;background:var(--accent);color:#fff;
  box-shadow:0 2px 6px color-mix(in srgb, var(--accent) 35%, transparent);
  transition:transform .12s ease,box-shadow .18s ease,filter .18s ease,background .18s ease,border-color .18s ease,color .18s ease;
}
.btn:hover{filter:brightness(1.08);text-decoration:none;transform:translateY(-1px);box-shadow:0 6px 16px color-mix(in srgb, var(--accent) 40%, transparent)}
.btn:active{transform:translateY(0);filter:brightness(1);box-shadow:0 2px 6px color-mix(in srgb, var(--accent) 35%, transparent)}
.btn.ghost{background:var(--surface);border-color:var(--rule);color:var(--ink-2);box-shadow:none}
.btn.ghost:hover{background:var(--surface-2);filter:none;border-color:var(--accent);color:var(--accent);box-shadow:0 3px 10px rgba(0,0,0,.07)}
.btn.danger{background:var(--warn);box-shadow:0 2px 6px color-mix(in srgb, var(--warn) 35%, transparent)}
.btn.danger:hover{box-shadow:0 6px 16px color-mix(in srgb, var(--warn) 40%, transparent)}
.btn.sm{padding:6px 13px;font-size:13px;border-radius:5px}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}

/* ---------- messages ---------- */
.flash{
  background:var(--ok-soft);border:1px solid var(--ok);color:var(--ok);
  padding:11px 16px;border-radius:5px;margin-bottom:20px;font-size:14px;
}
.err{
  background:var(--warn-soft);border:1px solid var(--warn);color:var(--warn);
  padding:11px 16px;border-radius:5px;margin-bottom:20px;font-size:14px;
}
.err ul{margin:6px 0 0;padding-left:20px}

/* ---------- filter bar ---------- */
.filters{
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);
  padding:14px 18px;margin-bottom:20px;
  display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap;
}
.filters > div{min-width:135px}
.filters label{margin-bottom:5px}
.filters .go{display:flex;gap:8px}

/* ---------- infographic bars (Shipment reports) ----------
   A magnitude bar (.ibar) next to a table row's number - one
   fill, width set inline as a % of that table's own max, so the
   eye catches the biggest supplier/year/etc. before reading a
   single digit. A paid/remaining bar (.pbar) is the same idea in
   two colours - paid green, remaining red, EGY TITANS' own
   convention everywhere else money is shown as settled or owing. */
.ibar{background:var(--rule-soft);border-radius:3px;height:6px;overflow:hidden;margin-top:5px;min-width:60px}
.ibar-fill{background:var(--accent);height:100%;border-radius:3px}
.pbar{background:var(--warn-soft, var(--rule-soft));border-radius:3px;height:8px;overflow:hidden;margin-top:5px;display:flex;min-width:80px}
.pbar-paid{background:var(--ok);height:100%}
.pbar-remaining{background:var(--warn);height:100%}
.legend{display:flex;gap:16px;align-items:center;font-size:12px;color:var(--ink-3)}
.legend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px;vertical-align:-1px}
.legend i.paid{background:var(--ok)}
.legend i.remaining{background:var(--warn)}

/* ---------- detail rows ---------- */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;background:var(--rule-soft)}
.facts > div{background:var(--surface);padding:13px 18px}
.facts dt{font:500 10.5px/1 var(--f-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.facts dd{margin:0;font-size:14.5px}
.facts dd.big{font-size:19px;font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums}

footer{
  max-width:var(--page-width);margin:0 auto;padding:0 22px 40px;
  color:var(--ink-3);font:12px/1.7 var(--f-mono);
}

/* ---------- who is signed in ---------- */
.nav .who{
  display:flex;align-items:center;gap:2px;
  margin-left:14px;padding-left:14px;border-left:1px solid var(--rule);
}
.nav .who a{font-size:13.5px;color:var(--ink-2)}
.nav .who a.out{color:var(--ink-3);font-size:13px}
.badge{
  display:inline-block;min-width:17px;padding:1px 5px;margin-left:5px;
  border-radius:9px;background:var(--warn);color:#fff;
  font:600 10.5px/1.5 var(--f-mono);text-align:center;
}
.nav a.on .badge{background:#fff;color:var(--accent)}

/* ---------- inside a pop-up window ----------
   A page opened in a window does not need the app's own top
   bar - the window already has a title bar with Back on it.
   The class is added by the snippet in _head.php. */
/* replaced by the rail rules in main.css */


/* ============================================================
   FORMUI DETAILS
   Each value falls back to what the app used before, so the
   other five themes look exactly as they did - only formui.css
   defines these tokens.
   ============================================================ */

/* warm zebra rows, the way FormUI stripes its tables */
tbody tr:nth-child(even) td{background:var(--zebra, transparent)}
tbody tr:hover td{background:var(--surface-2)}

/* buttons: bold, navy, FormUI's corner radius */
.btn{font-weight:var(--btn-weight, 500);border-radius:var(--btn-radius, 4px)}
.btn.save{background:var(--btn-save, var(--accent));border-color:var(--btn-save, var(--accent))}

/* a selected row or field gets the gold ring, not a navy one */
.picked{box-shadow:0 0 0 2px var(--select-ring, var(--accent-soft))}

/* ---------- attachment button, one per file row ---------- */
.docbtn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:7px;flex:none;
  color:var(--sym, var(--ink-3));background:transparent;
  border:1px solid transparent;
}
.docbtn:hover{background:color-mix(in srgb, var(--sym, var(--accent)) 12%, transparent);
  border-color:color-mix(in srgb, var(--sym, var(--accent)) 30%, transparent);text-decoration:none}
.docbtn svg{width:16px;height:16px}
.docbtn .dc-n{
  position:absolute;top:-5px;right:-5px;min-width:15px;height:15px;padding:0 3px;
  border-radius:8px;background:var(--sym, var(--accent));color:#fff;
  font:700 9.5px/15px var(--f-mono);text-align:center;
}
th.docs-col{width:44px}
td.docs-col{text-align:center}

/* ---------- money that means something, coloured on purpose ----------
   Paid is always green, remaining/required is always red - the
   same two colours wherever either appears, not just where it
   happens to be flagged overdue. */
.amt-paid{color:var(--pal-green, #198754)}
.amt-remaining{color:var(--pal-red, #DC3545)}
.amt-remaining.zero{color:inherit}
.amt-balance{color:var(--accent, #2C4A7C)}

/* ---------- "Completed" mark - Daily Expenses ledger ----------
   A plain native checkbox - the browser's own box-with-a-checkmark,
   just tinted green via accent-color rather than a custom-drawn
   circle. Simpler and more reliable than faking a checkmark glyph
   on a replaced element like <input>. */
.de-complete{
  accent-color:var(--pal-green, #198754);
  width:18px;height:18px;cursor:pointer;vertical-align:middle;margin:0;
}
.de-complete:disabled{cursor:default;opacity:.6}
/* the same mark, static - for read-only rows (opening balance, viewers) */
.de-check{color:var(--pal-green, #198754);font-weight:700}

/* ---------- Income / Expense inputs - Daily Expenses ledger ----------
   Bold and coloured while being typed into, not just once saved and
   shown read-only - the same green/red as everywhere else money is
   coloured. Locked (see deLockAmounts()) rather than editable once
   the row's other amount box already has a value, so one line can
   never carry both at once. */
input.de-income{color:var(--pal-green, #198754);font-weight:700}
input.de-expense{color:var(--pal-red, #DC3545);font-weight:700}
input.de-income:disabled, input.de-expense:disabled{opacity:.45;background:var(--surface-2)}

/* ---------- auto-save row feedback - Daily Expenses ledger ---------- */
.de-saving{opacity:.55;transition:opacity .15s}
.de-row-error{box-shadow:inset 3px 0 0 var(--pal-red, #DC3545)}

/* ---------- Items column - fills the whole cell, colour says what a
   glance at the count could not: green once the breakdown fully
   accounts for the entry, accent while it is still partial, dim when
   there is nothing there yet - click anywhere in the cell to open it,
   not just the small count/label it used to be. */
.de-items{padding:0 !important;position:relative;min-height:38px}
.de-items-btn{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font:600 12.5px/1.3 var(--f-mono, monospace);text-decoration:none;
  background:var(--surface-2);color:var(--ink-3);
  transition:background .12s, color .12s;
}
.de-items-btn:hover{text-decoration:none;filter:brightness(0.96)}
.de-items-btn.has-lines{background:var(--accent-soft);color:var(--accent)}
.de-items-btn.is-complete{background:var(--ok-soft);color:var(--ok)}

/* ---------- currency codes and short-word pills, coloured from
   the symbol register (currency_chip() / type_pill() in symbols.php) */
.tagcol{font-weight:700;font-size:12px}
.pillcol{
  display:inline-block;padding:2px 9px;border-radius:20px;
  background:color-mix(in srgb, var(--pc) 14%, transparent);
  color:var(--pc);border:1px solid color-mix(in srgb, var(--pc) 32%, transparent);
  font:700 11px/1.7 var(--f-mono);letter-spacing:.04em;
}

/* ---------- money and quantity fields, on any form ----------
   Any field whose name marks it as a monetary figure (net value,
   additional cost, amount, price, declared value...) - right-aligned
   tabular numerals, the way the figure reads on the invoice it came
   from, not left-aligned like a name would be. Not scoped to .form
   so the same class works inside .gridform's table cells too. */
input[type=text].r{
  text-align:right;font-family:var(--f-mono);font-variant-numeric:tabular-nums;
}
/* the one field on a form that is never typed into - a running
   total, worked out live from two others as you type them */
input[readonly]{
  background:var(--surface-2);color:var(--ink-2);cursor:default;
}

/* a dropdown that actually has something chosen in it - green the
   moment a real value is picked, same green the app already uses
   for Paid, so the eye reads it as "this is filled in and correct"
   rather than a new colour meaning a new thing */
select.picked{
  border-color:var(--pal-green, #198754);
  background:color-mix(in srgb, var(--pal-green, #198754) 7%, var(--surface));
}

/* ---------- a table that is really a form ----------
   Rows of inputs for fast entry: cell padding tightens so a dozen
   lines fit on one screen, and the fields sit flush in the cell
   rather than floating inside it. */
.gridform td{padding:5px 8px;vertical-align:middle}
.gridform th{padding:9px 8px}
.gridform input[type=text],
.gridform select{padding:6px 8px;font-size:13.5px}
.gridform .check{gap:6px}
.gridform tr.newrow td{background:var(--surface-2)}
.gridform tr.newrow td:first-child{
  font:600 9.5px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
}

/* ============================================================
   SHIPMENTS: frozen header, expanders, pager
   ============================================================ */

/* ---------- complete / wrong marks ---------- */
.okmark{color:var(--pal-green, #198754);font-weight:700}
.badmark{color:var(--pal-red, #DC3545);font-weight:700}

/* ---------- header that stays put while the rows scroll ---------- */
.tw.freeze{max-height:calc((100vh - 150px) / var(--ui-zoom, 1));overflow:auto}
.tw.freeze thead th{position:sticky;top:0;z-index:2}

/* ---------- the row that opens to show payments ---------- */
.rowexp{
  width:24px;height:24px;border-radius:5px;border:1px solid transparent;
  background:transparent;color:var(--ink-3);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;font-size:12px;
  transition:transform .12s ease;
}
.rowexp:hover{background:var(--surface-2);color:var(--accent)}
.rowexp.open{transform:rotate(180deg);color:var(--accent)}
.rowexp.off{opacity:.25;cursor:default}
tr.exprow td{background:var(--surface-2);padding:0}
.expwrap{padding:10px 14px 14px 52px}
.exptable{
  width:auto;min-width:620px;font-size:13px;
  background:var(--surface);border-radius:5px;
}
.exptable th{background:transparent;border-bottom:1px solid var(--rule-soft);font-size:10px}
.exptable td,.exptable th{padding:7px 16px;white-space:nowrap}
/* the figures need room of their own - right-aligned amounts sitting
   flush against a left-aligned swift number read as one long number */
.exptable td.r,.exptable th.r{padding-right:26px}
.exptable tfoot td{border-top:1px solid var(--rule-soft)}
tr.pickrow{cursor:pointer}
tr.picked-row td{background:var(--gold-pale, #F5EEDC)}

/* ---------- the Shipments table specifically ---------- */
.shiptable{border-radius:16px}
.shiptable thead th{font-weight:700}
.shiptable .rowexp{width:30px;height:30px;font-size:17px;color:var(--gold, #C8A951)}
.shiptable .rowexp:hover{background:var(--gold-pale, #F5EEDC);color:var(--gold-bright, #DCC072)}
.shiptable .rowexp.open{color:var(--gold-bright, #DCC072)}

/* ---------- pager ---------- */
.pager{
  display:flex;align-items:center;gap:6px;
  padding:12px 18px;border-top:1px solid var(--rule-soft);
}
.pgbtn{
  min-width:30px;height:30px;padding:0 8px;border-radius:5px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--rule);color:var(--ink-2);font-size:14px;text-decoration:none;
}
.pgbtn:hover{background:var(--surface-2);text-decoration:none}
.pgbtn.off{opacity:.35;pointer-events:none}
.pgnow{
  padding:0 10px;font:600 12px/1 var(--f-mono);letter-spacing:.06em;color:var(--ink);
}
.pgcount{margin-left:auto;font-size:12px;color:var(--ink-3)}

/* ---------- the paperclip reads gold in the list ---------- */
td.docs-col .docbtn{color:var(--gold, #C5A55A)}
td.docs-col .docbtn .dc-n{background:var(--gold, #C5A55A);color:#3A2E0B}
td.docs-col .docbtn:hover{
  background:color-mix(in srgb, var(--gold, #C5A55A) 16%, transparent);
  border-color:color-mix(in srgb, var(--gold, #C5A55A) 36%, transparent);
}

/* ---------- attachment preview, in the page it was opened from ---------- */
.docview{border-top:1px solid var(--rule-soft)}
.docview .dv-head{
  display:flex;align-items:center;gap:10px;
  padding:10px 18px;background:var(--surface-2);
  border-bottom:1px solid var(--rule-soft);
}
.docview .dv-head b{font-size:13.5px;font-weight:600}
.docview .dv-head .spacer{margin-left:auto}
.docview iframe{display:block;width:100%;height:min(70vh,620px);border:0;background:var(--surface-2)}

/* ---------- row action icons: View / Edit / Delete ---------- */
.rowacts{display:flex;gap:3px;align-items:center;justify-content:flex-end}
.rowacts input[type=checkbox]{flex:none;margin:0 1px 0 0;cursor:pointer}
.rowact{
  width:28px;height:28px;border-radius:7px;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--ink-3);border:1px solid transparent;background:transparent;cursor:pointer;
}
.rowact svg{width:15px;height:15px}
.rowact:hover{background:var(--surface-2);text-decoration:none}
.rowact.view:hover{color:var(--accent);border-color:color-mix(in srgb, var(--accent) 30%, transparent)}
.rowact.edit:hover{color:var(--pal-yellow-dark, #CA8A04);border-color:color-mix(in srgb, var(--pal-yellow-dark, #CA8A04) 30%, transparent)}
.rowact.del:hover{color:var(--pal-red, #DC3545);border-color:color-mix(in srgb, var(--pal-red, #DC3545) 30%, transparent)}
/* .pdf's printer icon already carries its own colours (not
   currentColor), so only the hover ring needs a rule here */
.rowact.pdf:hover{border-color:color-mix(in srgb, var(--gold, #C5A55A) 40%, transparent)}
/* a plain × or ↻ glyph button (no svg) needs its own size - .rowact
   svg above only covers icon buttons */
.rowact{font-size:16px;line-height:1}

/* a grid row staged for removal on Save - dimmed and struck through
   rather than gone, since the point is it can still be undone with
   one more click before Save actually acts on it */
tr.marked-del{opacity:.5}
tr.marked-del select,
tr.marked-del input[type=text]{text-decoration:line-through}
tr.marked-del .rowact.del{color:var(--pal-green, #198754)}

/* ---------- inline lookup editor (the pencil beside a dropdown) ---------- */
.lked-pencil{
  width:26px;height:26px;margin-left:6px;border-radius:4px;border:1px solid var(--gold);
  background:var(--surface);color:var(--gold);cursor:pointer;font-size:13px;
  display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;
}
.lked-pencil:hover{background:var(--gold);color:#fff;border-color:var(--gold)}
.lked-pop{
  position:absolute;z-index:60;margin-top:4px;width:320px;max-width:90vw;
  background:var(--surface);border:1px solid var(--rule);border-radius:6px;
  box-shadow:0 10px 30px -10px rgba(0,0,0,.3);padding:10px;
}
.lked-list{max-height:220px;overflow-y:auto;margin-bottom:8px}
.lked-row{display:flex;gap:5px;align-items:center;margin-bottom:5px}
.lked-row input{
  flex:1;min-width:0;padding:5px 7px;font-size:12.5px;
  border:1px solid var(--rule);border-radius:4px;background:var(--surface);color:var(--ink);
}
.lked-row .btn{padding:4px 8px;flex:none}
.lked-add{display:flex;gap:5px;border-top:1px solid var(--rule-soft);padding-top:8px}
.lked-add input{
  flex:1;min-width:0;padding:6px 8px;font-size:12.5px;
  border:1px solid var(--rule);border-radius:4px;background:var(--surface);color:var(--ink);
}
.lked-add .btn{flex:none;white-space:nowrap}

/* ---------- "open note" popup - one soft nudge when a related
   supplier/customer/person form opens, see _head.php / _foot.php ---------- */
.note-popup-overlay{
  position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.45);
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.note-popup{
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);
  box-shadow:0 20px 60px -15px rgba(0,0,0,.45);
  width:440px;max-width:100%;max-height:85vh;overflow-y:auto;padding:20px;
}
.note-popup h3{margin:0 0 14px;font-size:16px}
.note-popup-item{border:1px solid var(--rule-soft);border-radius:6px;padding:12px;margin-bottom:10px}
.note-popup-item:last-of-type{margin-bottom:16px}
.note-popup-meta{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.note-popup-text{margin-bottom:8px;font-size:14px;line-height:1.45}
.note-popup-actions{display:flex;justify-content:flex-end;gap:8px}

/* ---------- delete confirmation popup - replaces the browser's own
   confirm() for delete buttons, see assets/confirm.js ----------
   This element is always in the DOM (shared across every page) and
   toggled with the [hidden] attribute rather than PHP leaving it out
   - unlike .note-popup-overlay below, which only exists in the DOM
   when there's something to show. [hidden] and a same-specificity
   class selector tie in the cascade, and the later one (this file)
   wins - so display had to move behind :not([hidden]) or the popup
   showed, empty, on every single page. */
.dd-confirm-overlay{
  position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.45);
  align-items:center;justify-content:center;padding:20px;
}
.dd-confirm-overlay:not([hidden]){display:flex}
.dd-confirm{
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);
  box-shadow:0 20px 60px -15px rgba(0,0,0,.45);
  width:380px;max-width:100%;padding:20px;
}
.dd-confirm-msg{font-size:14.5px;line-height:1.5;color:var(--ink);margin-bottom:18px}
.dd-confirm-actions{display:flex;justify-content:flex-end;gap:8px}

/* Quotation Request - per-currency total pills (list, form, sheet) */
.qr-totals{display:inline-flex;gap:6px;flex-wrap:wrap}
.qr-tot{display:inline-flex;align-items:baseline;gap:5px;padding:3px 9px;border-radius:999px;background:var(--surface-2);font:600 12.5px/1.3 var(--f-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.qr-cur{font-size:10.5px;letter-spacing:.06em;color:var(--ink-3)}

/* ddCombo - type-to-search dropdown (assets/combo.js) */
.dd-combo{position:relative}
.dd-combo-native{display:none !important}
.dd-combo-input{width:100%;padding-right:30px}
.dd-combo-caret{position:absolute;right:10px;top:50%;width:8px;height:8px;margin-top:-6px;border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);transform:rotate(45deg);cursor:pointer;transition:transform .15s}
.dd-combo.open .dd-combo-caret{transform:rotate(-135deg);margin-top:-2px}
.dd-combo.disabled .dd-combo-caret{opacity:.4}
.dd-combo-list{position:absolute;z-index:40;left:0;right:0;top:calc(100% + 4px);max-height:280px;overflow-y:auto;margin:0;padding:4px;list-style:none;background:var(--surface);border:1px solid var(--rule);border-radius:var(--field-radius, 8px);box-shadow:var(--sh-lift, 0 10px 26px rgba(0,0,0,.15))}
.dd-combo-list li{display:flex;justify-content:space-between;gap:10px;padding:7px 10px;border-radius:6px;font-size:13.5px;color:var(--ink);cursor:pointer}
.dd-combo-list li.active{background:var(--accent-soft)}
.dd-combo-list li.picked{font-weight:700}
.dd-combo-list li mark{background:color-mix(in srgb, var(--gold) 35%, transparent);color:inherit;border-radius:2px;padding:0 1px}
.dd-combo-code{font:500 11.5px/1.6 var(--f-mono);color:var(--ink-3);white-space:nowrap}
.dd-combo-list li.dd-combo-none{cursor:default;color:var(--ink-3);font-size:12.5px;justify-content:center}
.dd-combo-text{min-width:0;overflow:hidden;text-overflow:ellipsis}