/* ============================================================
   Unbox Books — Strict 3-Color Theme
   Black · White · Orange #ff4d01
   ============================================================ */

/* Global text-size bump — everything 10% bigger (Chrome app supports zoom).
   Print popups are separate documents, so invoices stay unaffected. */
html{ zoom: 1.1; }

:root{
  /* Brand colors — strictly 3 + neutrals */
  --black:#000000;
  --white:#ffffff;
  --orange:#ff4d01;
  --orange-light:#ff6a2a;
  --orange-dark:#d63d00;
  --orange-tint:#fff1ea;

  /* Neutrals (white family — grays for borders/backgrounds) */
  --bg:#f5f5f5;
  --panel:#ffffff;
  --border:#e5e5e5;
  --border-strong:#cccccc;
  --row-alt:#fafafa;
  --row-hover:#fff1ea;

  /* Ink (black family) */
  --ink:#000000;
  --ink-soft:#222222;
  --muted:#4a4a4a;    /* was #666 — bumped for WCAG-AA contrast on light bg */
  --muted-2:#767676;  /* was #999 — readable secondary text */

  /* Mapped semantic vars (re-used by older rules) */
  --blue:var(--black);
  --blue-2:var(--black);
  --blue-3:var(--orange);
  --blue-light:var(--orange-tint);
  --accent:var(--orange);
  --green:var(--black);
  --red:var(--orange);
}

/* ---------- Dark mode overrides ---------- */
html[data-theme="dark"]{
  --bg:#0f0f0f;
  --panel:#1a1a1a;
  --border:#2a2a2a;
  --border-strong:#3a3a3a;
  --row-alt:#161616;
  --row-hover:#2a1a10;
  --orange-tint:#3a1a08;

  --ink:#f0f0f0;
  --ink-soft:#dddddd;
  --muted:#999999;
  --muted-2:#777777;

  --black:#f0f0f0;          /* invert so text-on-black becomes text-on-white-ish */
  --white:#1a1a1a;
  --blue:#f0f0f0;
  --blue-2:#f0f0f0;
}
html[data-theme="dark"] body{background:var(--bg);color:var(--ink)}
html[data-theme="dark"] .panel,
html[data-theme="dark"] table.dt{background:var(--panel);color:var(--ink)}
html[data-theme="dark"] table.dt th{background:#000;color:var(--orange)}
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea{
  background:#2a2a2a;color:var(--ink);border:1px solid var(--border-strong);
}
html[data-theme="dark"] .modal{background:var(--panel);color:var(--ink)}
html[data-theme="dark"] .modal-head{background:#000;color:var(--orange)}
html[data-theme="dark"] .dropdown{background:var(--panel);color:var(--ink);border-color:var(--orange)}
html[data-theme="dark"] .dropdown .item{color:var(--ink)}
html[data-theme="dark"] .dropdown .item:hover{background:var(--orange);color:#000}
html[data-theme="dark"] #menubar{background:var(--panel);border-bottom-color:var(--orange)}
html[data-theme="dark"] #menubar .menu{color:var(--ink)}
html[data-theme="dark"] #menubar .menu:hover{background:var(--orange-tint);color:var(--orange)}
html[data-theme="dark"] #menubar .menu.active{background:var(--orange);color:#000}
html[data-theme="dark"] .qc{background:var(--panel);color:var(--ink);border-color:var(--orange)}
html[data-theme="dark"] .badge{background:#2a2a2a;color:var(--orange)}
html[data-theme="dark"] .toolbar input,
html[data-theme="dark"] .toolbar select{background:#2a2a2a}
html[data-theme="dark"] tr:hover{background:var(--row-hover)}
/* Screen headings keep the black-bar identity in dark mode (matching table
   headers) — the generic var inversion turned them into glaring white bars. */
html[data-theme="dark"] .section-title{background:#000000;color:var(--orange)}

*{box-sizing:border-box}
/* ONE standard font across the whole app — overrides every inline
   font-family (Consolas/monospace/Tahoma etc.) for a uniform look.
   Print popups are separate documents, so invoices keep their own styling. */
*, *::before, *::after{
  font-family:"Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif !important;
}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);
  font-family:"Segoe UI",system-ui,Roboto,Arial,sans-serif;font-size:15px;}
button{font-family:inherit}

/* ---------- Title bar ---------- */
#titlebar{
  background:var(--black);
  color:var(--white);display:flex;align-items:center;gap:12px;
  padding:8px 12px;border-bottom:3px solid var(--orange);
  /* Stick to top of viewport during scroll so the fixed sidebar stays aligned */
  position:sticky; top:0; z-index:55;
  flex-wrap:nowrap;        /* never wrap to a 2nd row — keeps titlebar height stable */
}
#titlebar .brand{font-weight:700;font-size:18px;letter-spacing:.4px;display:flex;align-items:center;height:34px}
#titlebar .brand .brand-logo{height:30px;width:auto;display:block;object-fit:contain}
#titlebar .brand-text{font-weight:700;font-size:18px;letter-spacing:.4px}
#titlebar .brand-text .ed{color:var(--orange);font-weight:600;margin-left:4px;text-transform:uppercase;font-size:13px;letter-spacing:1px}

/* Welcome screen big logo */
.welcome-logo{
  display:flex;justify-content:center;margin-bottom:14px;
}
.welcome-logo img{
  max-height:180px;max-width:520px;width:auto;height:auto;display:block;
  border:3px solid var(--orange);padding:6px;background:var(--black);
}
.welcome-logo .text-fallback{
  background:var(--black);color:var(--orange);font-weight:900;letter-spacing:3px;
  padding:30px 60px;font-size:42px;border:3px solid var(--orange);
  text-align:center;
}
.welcome-logo .text-fallback .sub{
  display:block;color:var(--white);font-size:16px;font-weight:600;letter-spacing:2px;margin-top:6px;
}

/* Login screen logo */
.login-logo{display:flex;justify-content:center;margin-bottom:16px}
.login-logo img{max-height:90px;max-width:280px;width:auto;height:auto;display:block}
/* Clean, centered login form — everything stacked & aligned in one column */
.login-form{max-width:300px;margin:0 auto;display:flex;flex-direction:column;gap:4px;padding-bottom:8px}
.login-form label{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;color:var(--ink-soft);margin-top:10px}
.login-form input{width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid var(--border-strong);border-radius:0;font-size:15px}
.login-form input:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 2px var(--orange-tint)}
#titlebar .company-pill{
  background:var(--orange);color:var(--white);padding:4px 12px;border-radius:0;
  font-size:14px;font-weight:600;letter-spacing:.3px;
  border:none;
}
#titlebar .title-actions{margin-left:auto;display:flex;gap:6px;flex-wrap:nowrap;flex-shrink:0;align-items:center}
#titlebar .brand{min-width:0}
#titlebar #userPill{white-space:nowrap}
.tb-btn{
  background:transparent;color:var(--white);border:1px solid var(--white);
  padding:4px 12px;border-radius:0;cursor:pointer;font-size:14px;
  font-weight:600;letter-spacing:.2px;text-transform:uppercase;
}
.tb-btn:hover{background:var(--orange);border-color:var(--orange)}

/* ---------- Menubar ---------- */
#menubar{
  background:var(--white);
  border-bottom:1px solid var(--border-strong);display:flex;
  padding:0;user-select:none;
  /* Stick directly below the titlebar (sticky chain) — height set by JS via --titlebar-h */
  position:sticky; top:var(--titlebar-h, 50px); z-index:50;
}
#menubar .menu{
  padding:8px 16px;font-size:15px;cursor:pointer;color:var(--black);
  font-weight:600;border-right:1px solid var(--border);
  transition:all .12s;
}
#menubar .menu:hover{background:var(--orange-tint);color:var(--orange-dark)}
#menubar .menu.active{
  background:var(--black);color:var(--white);
}
/* browser-style Back / Forward arrows — first thing on the menubar, every screen */
#menubar .nav-arrow{
  padding:8px 14px;font-size:17px;line-height:1.35;cursor:pointer;
  color:var(--black);font-weight:700;border-right:1px solid var(--border);
  transition:all .12s;user-select:none;
}
#menubar .nav-arrow:hover{background:var(--orange-tint);color:var(--orange-dark)}
#menubar .nav-arrow:active{background:var(--black);color:var(--white)}
/* nowhere to go (fresh home / no forward) → greyed out like a browser */
#menubar .nav-arrow.disabled{opacity:.28;cursor:default}
#menubar .nav-arrow.disabled:hover{background:transparent;color:var(--black)}
html[data-theme="dark"] #menubar .nav-arrow.disabled:hover{background:transparent;color:var(--ink)}
html[data-theme="dark"] #menubar .nav-arrow{color:var(--ink)}
html[data-theme="dark"] #menubar .nav-arrow:hover{background:var(--orange-tint);color:var(--orange)}
#menubar #menuHome{
  background:var(--orange);color:var(--white);
  border-right:2px solid var(--black);
  /* same weight as every other menubar button — only the colour sets it apart */
  font-weight:600;letter-spacing:.4px;
}
#menubar #menuHome:hover{background:var(--orange-dark);color:var(--white)}

/* ---------- Dropdown ---------- */
#dropdownHost{position:relative;z-index:60}
.dropdown{
  position:absolute;top:0;background:var(--white);
  border:1px solid var(--black);
  box-shadow:0 12px 32px rgba(0,0,0,.28);padding:4px 0;
  /* All dropdowns the SAME size — short menus get empty space, long menus
     scroll. Height capped to viewport so it never pushes the page. */
  width: 300px;
  height: min(420px, calc(100vh - 70px));
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;   /* don't bubble wheel to <body> */
}
/* Every dropdown row — item AND category header — shares ONE identical
   hairline divider so lines never double up or go missing */
.dropdown .item{
  padding:7px 14px;display:flex;justify-content:space-between;align-items:center;
  font-size:15px;cursor:pointer;color:var(--ink);font-weight:600;
  border-bottom:1px solid var(--border);
}
/* left label group: bullet marker + text */
.dropdown .mlabel{display:flex;align-items:center;gap:7px;min-width:0}
/* bullet shares the SAME 12px gutter + colour + size as the category arrow */
.dropdown .mbullet{flex:0 0 12px;width:12px;text-align:center;color:var(--orange);font-size:13px;line-height:1}
.dropdown .item:hover .mbullet{color:var(--white)}
.dropdown .item:hover{background:var(--orange);color:var(--white)}
/* explicit separators removed — every row already has its own divider */
.dropdown .sep{display:none}
.dropdown .item .kbd{color:var(--muted);font-size:13px;margin-left:24px}
.dropdown .item:hover .kbd{color:var(--white)}
/* Collapsible category headers — same row style + same divider as items */
.dropdown .mgroup{
  display:flex;align-items:center;gap:7px;
  padding:7px 14px;cursor:pointer;user-select:none;
  font-size:15px;font-weight:600;letter-spacing:.2px;
  color:var(--ink);background:var(--white);
  border-bottom:1px solid var(--border);
}
.dropdown .mgroup:hover{background:var(--orange);color:var(--white)}
.dropdown .mgroup:hover .marrow{color:var(--white)}
.dropdown .mgroup .marrow{width:12px;text-align:center;color:var(--orange);font-size:13px}
.dropdown .mgroup-children{background:var(--white)}
.dropdown .mgroup-children .item{padding-left:30px;font-size:15px}
/* every row keeps its divider — including the last — for full consistency */

/* Bug-fix: sidebar shouldn't propagate wheel to body */
#sidebar{ overscroll-behavior: contain; }

/* Bug-fix: when a dropdown is open, freeze body scroll completely */
body.menu-open{ overflow:hidden !important; }
body.menu-open #workspace{ overflow:hidden; }

/* Bug-fix: modal body should isolate scroll */
.modal .body{ overscroll-behavior: contain; }
.modal-overlay,.overlay{ overscroll-behavior: contain; }

/* ---------- Status bar ---------- */
#statusbar{
  position:fixed;bottom:0;left:0;right:0;height:24px;
  background:var(--black);color:var(--white);
  border-top:none;display:flex;align-items:center;
  padding:0 12px;font-size:13px;justify-content:space-between;
  z-index:40;font-weight:500;
}

/* ---------- Workspace ---------- */
#workspace{
  padding:16px;padding-bottom:32px;min-height:calc(100vh - 100px);
}
.panel{
  background:var(--panel);border:1px solid var(--border);
  border-radius:0;padding:18px;
}
.panel h1{
  font-size:20px;margin:0 0 6px;color:var(--black);font-weight:700;
  border-bottom:3px solid var(--orange);padding-bottom:8px;display:inline-block;
  text-transform:uppercase;letter-spacing:.5px;
}
.panel h2{font-size:17px;color:var(--black);margin:18px 0 8px;font-weight:700;
  text-transform:uppercase;letter-spacing:.4px;border-left:3px solid var(--orange);padding-left:8px}
/* h3 sub-headings — consistent across every screen (modules used ad-hoc inline h3) */
.panel h3, #workspace h3, .modal-body h3{
  font-size:14px;color:var(--black);margin:14px 0 6px;font-weight:700;
  text-transform:uppercase;letter-spacing:.3px;
}
.panel p.hint{color:var(--muted);font-size:13px;margin-top:18px}

/* Quick cards on welcome */
.quick-cards{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:10px;margin-top:16px;
}
.qc{
  border:1px solid var(--border-strong);background:var(--white);
  padding:18px 8px;text-align:center;cursor:pointer;
  transition:all .15s;border-radius:0;
}
.qc:hover{
  border-color:var(--orange);background:var(--orange);color:var(--white);
  transform:translateY(-2px);
}
.qc:hover .qc-icon{color:var(--white)}
.qc-icon{
  font-size:24px;font-weight:700;color:var(--orange);
  height:34px;line-height:34px;
  transition:color .15s;
}

/* ---------- Forms ---------- */
.form-grid{display:grid;grid-template-columns:160px 1fr;gap:8px 12px;align-items:center}
.form-grid label{font-size:14px;color:var(--ink-soft);text-align:right;font-weight:600;text-transform:uppercase;letter-spacing:.3px}
.form-grid input[type=text],
.form-grid input[type=number],
.form-grid input[type=date],
.form-grid input[type=month],
.form-grid input[type=email],
.form-grid input[type=password],
.form-grid select,
.form-grid textarea{
  border:1px solid var(--border-strong);background:var(--white);padding:6px 8px;
  font-size:15px;width:100%;font-family:inherit;border-radius:0;
  color:var(--ink);
}
.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus{
  outline:none;border-color:var(--orange);background:var(--white);
  box-shadow:0 0 0 2px var(--orange-tint);
}
.form-grid textarea{resize:vertical;min-height:50px}
.form-grid .full{grid-column:1/-1}
.field-note{font-size:13px;color:var(--muted);margin-top:2px}

.btn{
  background:var(--black);color:var(--white);
  border:1px solid var(--black);padding:7px 16px;border-radius:0;
  cursor:pointer;font-size:15px;font-weight:600;
  text-transform:uppercase;letter-spacing:.4px;
  transition:all .12s;
}
.btn:hover{background:var(--orange);border-color:var(--orange)}
.btn.secondary{
  background:var(--white);color:var(--black);
  border:1px solid var(--black);
}
.btn.secondary:hover{background:var(--black);color:var(--white)}
.btn.danger{
  background:var(--orange);border-color:var(--orange);color:var(--white);
}
.btn.danger:hover{background:var(--orange-dark);border-color:var(--orange-dark)}
.btn.small{padding:4px 10px;font-size:13px;letter-spacing:.3px}
/* + New Product button: orange by default, black on hover (inverted from normal .btn) */
#addItem{background:var(--orange);border-color:var(--orange)}
#addItem:hover{background:var(--black);border-color:var(--black)}

/* ---------- Voucher item search combobox ----------
   [ 46px photo ][ name input      ]
   [            ][ 📦 stock · last ]  — stock line under the NAME, photo spans both */
.ln-itemwrap{position:relative;display:flex;align-items:center;gap:8px;flex-wrap:nowrap;padding:3px 4px 3px 5px}
.ln-itemcol{flex:1 1 0;width:1%;min-width:120px;display:flex;flex-direction:column;justify-content:center}
.line-table td .ln-itemcol input.ln-item,
input.ln-item{width:100%;min-width:0}
.ln-info{font-size:10px;line-height:1.3;margin-top:1px;padding:0 7px}
.ln-info:empty{display:none}
/* product photo beside the picked item (voucher line) */
.ln-thumb{width:46px;height:46px;flex:0 0 46px;object-fit:cover;
  border:1px solid var(--border-strong);border-radius:0;background:var(--panel)}
.ln-thumb.ln-noimg{display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--muted-2)}
.ln-item-dd{
  background:var(--white);border:2px solid var(--black);border-radius:0;
  max-height:300px;overflow-y:auto;box-shadow:0 6px 20px rgba(0,0,0,.22);
}
.ln-item-dd .ln-opt{
  padding:6px 11px;cursor:pointer;border-bottom:1px solid var(--border);
  display:flex;flex-direction:row;align-items:center;gap:9px;line-height:1.25;
}
.ln-item-dd .ln-opt:last-child{border-bottom:none}
.ln-item-dd .ln-opt:hover,
.ln-item-dd .ln-opt.active{background:var(--orange);color:var(--white)}
.ln-item-dd .ln-opt .opt-img{
  width:36px;height:36px;flex:0 0 36px;object-fit:cover;border:1px solid var(--border);
  background:var(--panel);border-radius:0;display:flex;align-items:center;justify-content:center;font-size:18px;
}
.ln-item-dd .ln-opt .opt-noimg{color:var(--muted-2)}
.ln-item-dd .ln-opt .opt-txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.ln-item-dd .ln-opt .nm{font-weight:600;font-size:13px}
.ln-item-dd .ln-opt .meta{font-size:10px;color:var(--muted)}
.ln-item-dd .ln-opt:hover .meta,
.ln-item-dd .ln-opt.active .meta{color:#ffe9df}
.ln-item-dd .ln-opt.empty{color:var(--muted);cursor:default}
.ln-item-dd .ln-opt.empty:hover{background:var(--white);color:var(--muted)}

/* ---------- Tables ---------- */
.dt{
  width:100%;border-collapse:collapse;background:var(--white);
  border:1px solid var(--border-strong);font-size:14px;
}
.dt thead th{
  background:var(--black);
  color:var(--white);font-weight:700;padding:8px;text-align:left;
  border-bottom:none;border-right:1px solid var(--ink-soft);font-size:13px;
  text-transform:uppercase;letter-spacing:.4px;
}
.dt tbody td{
  padding:6px 8px;border-bottom:1px solid var(--border);border-right:1px solid var(--border);
}
.dt tbody tr:nth-child(even){background:var(--row-alt)}
.dt tbody tr:hover{background:var(--row-hover);cursor:pointer}
/* Column alignment — header (th), body (td) and footer MUST share the same
   class so a column's heading lines up with its values. These intentionally
   out-rank the default ".dt thead th{text-align:left}" so a right/center
   header is no longer forced back to the left. Convention:
     .num / .right  → numbers, amounts, qty, counts  (right-aligned)
     .center        → status / badges / single marks (centered)
     .left          → force left when needed
   Put the SAME alignment class on the <th> and every <td> in that column. */
.dt thead th.num,    .dt tbody td.num,    .dt tfoot td.num,
.dt thead th.right,  .dt tbody td.right,  .dt tfoot td.right  {text-align:right}
.dt thead th.num,    .dt tbody td.num,    .dt tfoot td.num    {font-variant-numeric:tabular-nums}
.dt thead th.center, .dt tbody td.center, .dt tfoot td.center {text-align:center}
.dt thead th.left,   .dt tbody td.left,   .dt tfoot td.left   {text-align:left}
.dt tfoot td{
  background:var(--orange-tint);font-weight:700;padding:8px;
  border-top:2px solid var(--orange);color:var(--black);
}

/* Voucher line table (editable) */
.line-table{width:100%;border-collapse:collapse;font-size:14px;margin-top:6px}
.line-table th{
  background:var(--black);color:var(--white);padding:6px;font-weight:700;
  border:1px solid var(--black);font-size:13px;
  text-transform:uppercase;letter-spacing:.3px;
}
.line-table td{border:1px solid var(--border-strong);padding:0;background:var(--white)}
.line-table td input,
.line-table td select,
.line-table td textarea{
  border:none;background:transparent;padding:5px 7px;width:100%;
  font-family:inherit;font-size:14px;color:var(--ink);
}
.line-table td input:focus,
.line-table td select:focus,
.line-table td textarea:focus{
  outline:2px solid var(--orange);background:var(--white);
}
.line-table td.num input{text-align:right}
.line-table tfoot td{
  background:var(--orange-tint);font-weight:700;padding:6px 8px;
  border:1px solid var(--orange);
}
.line-table .del-btn{
  background:transparent;border:none;color:var(--orange);cursor:pointer;
  font-size:18px;padding:2px 6px;font-weight:700;
}
.line-table .del-btn:hover{color:var(--orange-dark)}

/* Toolbar over lists */
.toolbar{
  display:flex;gap:8px;align-items:center;
  padding:10px;background:var(--white);border:1px solid var(--border-strong);
  border-bottom:none;border-radius:0;
}
.toolbar input[type=text],.toolbar input[type=date],.toolbar input[type=month],.toolbar select{
  border:1px solid var(--border-strong);padding:5px 8px;font-size:14px;
  background:var(--white);border-radius:0;color:var(--ink);
}
.toolbar input:focus,.toolbar select:focus{outline:none;border-color:var(--orange)}
.toolbar .grow{flex:1}
.section-title{
  background:var(--black);color:var(--white);
  padding:8px 12px;font-weight:700;font-size:15px;border-radius:0;
  display:flex;justify-content:space-between;align-items:center;
  border-left:5px solid var(--orange);
  text-transform:uppercase;letter-spacing:.4px;
}
/* In-screen sub-heading (e.g. one block per ledger inside a combined report) —
   lighter than .section-title, replaces ad-hoc raw <h2>/<h3> for consistency. */
.sub-title{
  font-weight:700;font-size:15px;color:var(--ink);
  margin:14px 0 6px;padding-bottom:4px;
  border-bottom:2px solid var(--orange);
}

/* ---------- Modal ---------- */
.modal-host{
  position:fixed;inset:0;background:rgba(0,0,0,.65);
  display:flex;align-items:flex-start;justify-content:center;
  z-index:100;padding-top:30px;
}
.modal-host.hidden{display:none}
.modal{
  background:var(--white);border-radius:0;width:min(960px,96vw);
  max-height:88vh;display:flex;flex-direction:column;
  box-shadow:0 12px 32px rgba(0,0,0,.28);border:2px solid var(--black);
}
.modal.wide{width:min(1180px,98vw)}
.modal.narrow{width:min(520px,96vw)}
.modal-head{
  background:var(--black);color:var(--white);
  padding:10px 14px;display:flex;align-items:center;
  border-radius:0;border-bottom:3px solid var(--orange);
}
.modal-title{font-weight:700;font-size:16px;flex:1;text-transform:uppercase;letter-spacing:.4px}
.modal-close{
  background:transparent;color:var(--white);border:none;font-size:22px;
  cursor:pointer;line-height:1;padding:0 6px;font-weight:700;
}
.modal-close:hover{color:var(--orange)}
.modal-body{padding:14px;overflow:auto;flex:1}
.modal-foot{
  padding:10px 14px;border-top:1px solid var(--border-strong);background:var(--bg);
  display:flex;justify-content:flex-end;gap:8px;border-radius:0;
}

/* ---------- Toast ---------- */
#toastHost{position:fixed;bottom:36px;right:14px;z-index:200;display:flex;flex-direction:column;gap:6px}
.toast{
  background:var(--black);color:var(--white);padding:10px 16px;border-radius:0;
  font-size:14px;box-shadow:0 4px 14px rgba(0,0,0,.3);
  border-left:5px solid var(--orange);min-width:240px;animation:slideIn .25s ease;
  font-weight:500;
}
.toast.ok{border-left-color:var(--orange)}
.toast.err{background:var(--orange);border-left-color:var(--black)}
@keyframes slideIn{from{transform:translateX(20px);opacity:0}to{transform:translateX(0);opacity:1}}

/* ---------- Misc ---------- */
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;font-size:14px}
.kv .k{color:var(--muted);text-align:right}
.kv .v{font-weight:700;color:var(--ink)}
.badge{
  display:inline-block;padding:2px 8px;border-radius:0;font-size:12px;
  background:var(--black);color:var(--white);font-weight:700;
  text-transform:uppercase;letter-spacing:.4px;
}
.badge.gst{background:var(--orange);color:var(--white)}
.badge.cr{background:var(--orange);color:var(--white)}
.badge.dr{background:var(--black);color:var(--white)}
.right{text-align:right}
.center{text-align:center}
/* Status colors — strictly orange (positive/negative differentiated by text) */
.text-red{color:var(--orange);font-weight:700}
.text-green{color:var(--black);font-weight:700}
.text-muted{color:var(--muted)}
hr.sep{border:none;border-top:1px solid var(--border);margin:10px 0}

/* Empty state */
.empty{
  padding:30px;text-align:center;color:var(--muted);font-size:15px;
  background:var(--white);border:1px dashed var(--border-strong);
}

/* Two-column / Three-column */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.three-col{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}

/* Voucher header — responsive, evenly-aligned field grid (label + control) */
.vhead{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:9px 26px;align-items:center}
/* min-width:0 everywhere — grid/flex default to min-width:auto, so ONE long
   customer/item name used to blow the field past the panel's right edge */
.vhead .vf{display:grid;grid-template-columns:120px 1fr;gap:6px 10px;align-items:center;min-width:0}
.vhead .vf>*{min-width:0}
.vhead .vf .inline{min-width:0}
.vhead .vf .inline .btn{flex:0 0 auto}
.vhead .vf>label{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;color:var(--ink-soft);text-align:right}
.vhead .vf>input,.vhead .vf>select{border:1px solid var(--border-strong);background:var(--white);padding:6px 8px;font-size:15px;width:100%;border-radius:0;font-family:inherit;color:var(--ink)}
.vhead .vf>input:focus,.vhead .vf>select:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 2px var(--orange-tint)}
.vhead .vf .inline{display:flex;gap:6px;align-items:center}
.vhead .vf .inline select{flex:1;min-width:0;border:1px solid var(--border-strong);background:var(--white);padding:6px 8px;font-size:15px;border-radius:0;font-family:inherit;color:var(--ink)}

/* ============ Compact voucher form (.vform) ============
   Data-entry screens pack tighter than report panels — smaller paddings and
   labels so the whole header fits without dead space; same 3-color identity. */
.vform{padding:10px 14px}
.vform h1{font-size:15px;padding-bottom:4px;margin-bottom:2px}
.vform .vhead{gap:4px 16px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.vform .vhead .vf{grid-template-columns:104px 1fr;gap:4px 8px}
.vform .vhead .vf>label{font-size:10.5px}
.vform .vhead .vf>input,.vform .vhead .vf>select,
.vform .vhead .vf .inline select{padding:4px 7px;font-size:13px}
.vform .vhead .vf .inline .btn{padding:3px 8px;font-size:12px}
.vform hr.sep{margin:6px 0}
.vform .form-grid{gap:4px 10px}
.vform .form-grid label{font-size:11px}
.vform .form-grid input[type=text],.vform .form-grid input[type=number],
.vform .form-grid input[type=date],.vform .form-grid select{padding:4px 7px;font-size:13px}
.vform .line-table td input,.vform .line-table td select{padding:4px 6px;font-size:13px}
.vform .line-table th{padding:4px 6px;font-size:11.5px}

/* ============================================================
   Busy-style Startup launcher (pre-login)
   ============================================================ */
/* Rendered inside #workspace (normal flow, NOT position:fixed) so mouse clicks
   hit-test correctly even with html{zoom}. Negative margins bleed over the
   workspace padding so the navy stage fills edge-to-edge. */
#startupOverlay{
  margin:-16px -16px -32px; min-height:100vh;
  background:linear-gradient(135deg,#0d1b2a 0%,#13263b 55%,#0d1b2a 100%);
  display:flex; align-items:center; justify-content:center; padding:24px;
}
.su-card{
  width:100%; max-width:480px; background:var(--panel);
  border-top:4px solid var(--orange); border-radius:4px;
  box-shadow:0 18px 60px rgba(0,0,0,.45); overflow:hidden;
}
.su-brand{ text-align:center; padding:26px 20px 14px; }
.su-brand img{ height:46px; width:auto; object-fit:contain; margin-bottom:8px; }
.su-title{ font-size:26px; font-weight:700; letter-spacing:1px; color:var(--ink); }
.su-title span{ color:var(--orange); }
.su-sub{ font-size:13px; color:var(--muted); margin-top:4px; }
.su-body{ padding:6px 24px 22px; }
.su-h{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.6px;
  color:var(--muted-2); margin:0 0 8px; }
.su-list{ display:flex; flex-direction:column; gap:6px; max-height:300px; overflow:auto; }
.su-co{
  display:flex; align-items:center; gap:10px; text-align:left; cursor:pointer;
  border:1px solid var(--border-strong); background:var(--white); color:var(--ink);
  padding:11px 12px; font-family:inherit; font-size:15px; border-radius:3px;
}
.su-co:hover{ border-color:var(--orange); background:var(--orange-tint); }
.su-co-name{ font-weight:600; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.su-co-code{ font-size:11px; font-weight:700; color:var(--orange-dark); background:var(--orange-tint);
  border:1px solid var(--orange); border-radius:3px; padding:1px 5px; margin-right:2px; }
.su-co-meta{ font-size:12px; color:var(--muted); white-space:nowrap; }
.su-co-go{ font-size:13px; font-weight:700; color:var(--orange); white-space:nowrap; }
.su-empty{ border:1px dashed var(--border-strong); border-radius:3px; padding:18px;
  text-align:center; color:var(--muted); font-size:13px; line-height:1.6; }
.su-actions{ display:flex; flex-direction:column; gap:8px; }
.su-btn{
  width:100%; text-align:left; cursor:pointer; font-family:inherit; font-size:14px;
  padding:11px 14px; border:1px solid var(--border-strong); background:var(--white);
  color:var(--ink); border-radius:3px;
}
.su-btn:hover{ border-color:var(--orange); background:var(--orange-tint); color:var(--orange-dark); }
.su-btn.primary{ background:var(--orange); border-color:var(--orange); color:var(--white); font-weight:600; }
.su-btn.primary:hover{ background:var(--orange-dark); color:var(--white); }
.su-btn.danger{ color:var(--orange-dark); }
.su-btn.danger:hover{ background:var(--orange); color:var(--white); border-color:var(--orange); }
.su-foot{ border-top:1px solid var(--border); padding:10px 24px; display:flex;
  justify-content:space-between; gap:14px; align-items:center; flex-wrap:wrap;
  font-size:11px; color:var(--muted-2); background:var(--row-alt); }
.su-foot .su-note{ max-width:440px; }
/* in-launcher confirm — a normal flex child of #startupOverlay (the menu card is
   hidden while it shows). No position:absolute/fixed → clicks hit-test correctly
   under html{zoom}, unlike a fixed modal layered over a fixed overlay. */
.su-confirm-box{ background:var(--panel); border-top:4px solid var(--orange);
  border-radius:4px; box-shadow:0 18px 60px rgba(0,0,0,.5); width:100%; max-width:380px;
  padding:24px 24px 20px; }
.su-confirm-msg{ font-size:16px; font-weight:600; color:var(--ink); margin-bottom:18px; }
.su-confirm-btns{ display:flex; gap:10px; justify-content:flex-end; }
.su-confirm-btns .su-btn{ width:auto; min-width:90px; text-align:center; }

/* Print mode */
@media print{
  #titlebar,#menubar,#statusbar,.modal-foot,.modal-head,.no-print{display:none !important}
  body{background:#fff}
  .modal-host{position:static;background:#fff;padding:0}
  .modal{box-shadow:none;border:none;width:100%;max-height:none}
  .modal-body{overflow:visible;padding:0}
}

/* Keyboard-drive focus visibility (launcher + lists) */
.su-btn:focus,.su-co:focus{outline:2px solid var(--orange);outline-offset:-2px}

/* Chrome-style swipe-navigation indicator (two-finger back/forward) */
#gestureNav{
  position:fixed;top:50%;margin-top:-22px;z-index:9999;
  width:44px;height:44px;border-radius:50%;
  background:var(--black);color:var(--white);border:2px solid var(--orange);
  display:flex;align-items:center;justify-content:center;
  font-size:20px;font-weight:700;line-height:1;
  box-shadow:0 4px 14px rgba(0,0,0,.35);
  pointer-events:none;opacity:0;
}
#gestureNav.done{background:var(--orange);border-color:var(--orange);color:#fff}