:root {
  --bg: #f6f7f5;
  --surface: #ffffff;
  --text: #1c231f;
  --muted: #6b7570;
  --border: #e3e6e2;
  --primary: #1f7a4d;
  --primary-dark: #175c3a;
  --accent: #e0a72e;
  --danger: #c0392b;
  --radius: 14px;
  --nav-h: 62px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12140f;
    --surface: #1b1f19;
    --text: #eef1ec;
    --muted: #9aa39c;
    --border: #2a2f27;
    --primary: #38a86a;
    --primary-dark: #2c8956;
    --accent: #f0bb4a;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.4;
}
a { color: var(--primary); text-decoration: none; }

.container { max-width: 720px; margin: 0 auto; padding: 12px 14px; }

.topbar {
  position: sticky; top: 0; z-index: 10;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 4px rgba(20, 30, 20, 0.05);
  padding: 10px 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.topbar h1 { font-size: 1.05rem; margin: 0; font-weight: 700; }
.topbar .brand { color: var(--primary); font-weight: 800; letter-spacing: -0.02em; }
/* The brand is a link back to the home menu; give it a real tap target so it
   doesn't feel like inert heading text on a phone. */
a.brand { display: inline-block; padding: 2px 0; }
a.brand:active { opacity: 0.6; }

/* Stacked on a phone: side by side, the category <select> is wide enough
   ("Όλες οι κατηγορίες") to squeeze the search box down to about four
   characters. They only share a row once there's width for both. */
.searchbar { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.searchbar select { width: 100%; }
@media (min-width: 480px) {
  .searchbar { flex-direction: row; }
  .searchbar select { width: auto; }
}
.search-field { position: relative; flex: 1; display: flex; min-width: 0; }
.searchbar input[type="search"] {
  flex: 1; padding: 10px 38px 10px 12px; border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font-size: 1rem;
  min-width: 0;
}
/* Chrome's own clear button only appears on desktop, so there's a real one -
   it also has to clear the query server-side, not just the input. */
.searchbar input[type="search"]::-webkit-search-cancel-button { display: none; }
.search-clear {
  position: absolute; right: 4px; top: 0; bottom: 0;
  display: flex; align-items: center; justify-content: center;
  width: 34px; color: var(--muted); font-size: 1.3rem; line-height: 1;
  text-decoration: none;
}
.search-clear:active { color: var(--text); }
select {
  padding: 10px 12px; border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font-size: 0.95rem;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 11px 16px; border-radius: var(--radius); border: none;
  background: var(--primary); color: #fff; font-weight: 600; font-size: 0.95rem;
  cursor: pointer;
}
.btn:active { background: var(--primary-dark); }
.btn.secondary { background: var(--surface); color: var(--text); border: 1px solid var(--border); }
.btn.danger { background: var(--danger); }
.btn.block { width: 100%; }
.btn:disabled { opacity: 0.5; }

.card, .doc-list {
  box-shadow: 0 1px 3px rgba(20, 30, 20, 0.06);
}

.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px; margin-bottom: 10px;
}

.item-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 480px) { .item-grid { grid-template-columns: 1fr 1fr; } }

.item-card { display: flex; flex-direction: column; gap: 6px; position: relative; }
.item-card .cat { color: var(--muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: .03em; }
.item-card .name { font-weight: 600; font-size: 0.98rem; }
.item-card .price { font-size: 1.15rem; font-weight: 800; color: var(--primary); }
.item-card .price small { font-weight: 500; color: var(--muted); font-size: 0.72rem; }
.old-price { text-decoration: line-through; color: var(--muted); font-size: 0.85rem; display: inline-block; }
.price .badge { vertical-align: middle; margin: 0 2px; }
.item-card .meta { color: var(--muted); font-size: 0.8rem; }
.item-card .row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }

.fav-btn {
  position: absolute; top: 10px; right: 10px; background: none; border: none; cursor: pointer;
  font-size: 1.3rem; line-height: 1; padding: 4px; color: var(--muted);
}
.fav-btn.is-fav { color: var(--accent); }
/* In the cart the star sits inline with the price and the ✕, not pinned to a
   card corner - the cart rows are full-width and have no free corner. */
.line-right .fav-btn { position: static; padding: 6px 2px; }

.qty-form { display: flex; align-items: center; gap: 6px; }
.qty-form input[type="number"] {
  width: 58px; padding: 8px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); text-align: center; font-size: 1rem;
}
.qty-form button { padding: 8px 12px; border-radius: 10px; border: none; background: var(--primary); color: #fff; font-weight: 700; }

table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
th, td { padding: 8px 6px; border-bottom: 1px solid var(--border); text-align: left; }
th { color: var(--muted); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; }
.badge.pos { background: rgba(224,164,46,.18); color: var(--accent); }
.badge.neg { background: rgba(31,122,77,.15); color: var(--primary); }

/* App-shell layout: body is a non-scrolling flex column whose height/width
   are set in REAL pixels by app.js (sizeAppShell), and only .container
   scrolls inside it. The bottom nav is then just the last flex item - no
   `position: fixed` anywhere.

   Why not CSS (`100vh`/`100dvh`) or `position: fixed`: on the phone this was
   built for, Chrome has a per-site zoom set, and in that state
   `window.innerWidth/innerHeight` (and every CSS viewport unit, and the
   containing block used for `position: fixed`) report the UNZOOMED viewport
   - 580x1128 - while the page actually renders into 406x790. A fixed
   bottom:0 bar was therefore laid out ~338px below the real visible bottom
   AND ~174px too wide (last two tabs off-screen), and it did not even stay
   pinned during scroll. `document.documentElement.clientWidth/clientHeight`
   are the only measurements that report the true rendered viewport there, so
   the shell is sized from those. */
body.app-shell {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
body.app-shell .topbar { flex: 0 0 auto; position: static; }
body.app-shell .container {
  flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding-bottom: 12px;
  /* `width: 100%` is required, not redundant: .container keeps `margin: 0
     auto` to stay centred on wide screens, and auto cross-axis margins on a
     flex item suppress the default `align-items: stretch`. Without this the
     container shrink-to-fits its max-content width (wider than the phone
     viewport), which pushed each row's qty/+ control off the right edge. */
  width: 100%;
}

/* "You are ordering for someone else" bar. Deliberately loud (accent colour,
   sits directly under the topbar on every page) - placing an order under the
   wrong ΑΦΜ is not a mistake that should be easy to make. Like the topbar it is
   a fixed-size flex item of the app shell, so it never scrolls away. */
.acting-bar {
  flex: 0 0 auto;
  background: var(--accent); color: #fff;
  padding: 8px 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.acting-who { min-width: 0; }
.acting-label { display: block; font-size: 0.68rem; opacity: 0.85; text-transform: uppercase; letter-spacing: 0.04em; }
.acting-who strong { display: block; font-size: 0.95rem; line-height: 1.2; }
.acting-meta { font-size: 0.72rem; opacity: 0.9; }
.acting-actions { display: flex; gap: 6px; flex: 0 0 auto; }
.acting-actions .btn {
  padding: 6px 10px; font-size: 0.78rem;
  background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.45); color: #fff;
}
.acting-actions .btn:active { background: rgba(255, 255, 255, 0.32); }

/* Customer picker rows: the whole row is the form, so the "Επιλογή" button and
   the details it belongs to can never drift apart. */
.cust-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; }
.cust-info { min-width: 0; }
.cust-info .name { font-weight: 600; font-size: 0.95rem; }
.cust-info .meta { color: var(--muted); font-size: 0.8rem; margin-top: 2px; }
.cust-row .btn { flex: 0 0 auto; padding: 8px 14px; }

.bottom-nav {
  flex: 0 0 auto;
  min-height: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--surface); border-top: 1px solid var(--border);
  box-shadow: 0 -1px 4px rgba(20, 30, 20, 0.05);
  display: flex; z-index: 20;
}
.bottom-nav a {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; color: var(--muted); font-weight: 600; position: relative; padding: 0 1px;
}
.bottom-nav a.active { color: var(--primary); }
.bottom-nav .icon { font-size: 1.2rem; line-height: 1; }
.bottom-nav .label {
  font-size: 0.62rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bottom-nav .cart-badge {
  position: absolute; top: 2px; right: calc(50% - 22px); background: var(--danger); color: #fff;
  border-radius: 999px; font-size: 0.62rem; min-width: 16px; height: 16px; display: flex;
  align-items: center; justify-content: center; padding: 0 3px;
}

.empty-state { text-align: center; color: var(--muted); padding: 40px 16px; }

.summary-row { display: flex; justify-content: space-between; padding: 6px 0; }
.summary-row.total { font-weight: 800; font-size: 1.1rem; border-top: 1px solid var(--border); margin-top: 6px; padding-top: 10px; }

.form-group { margin-bottom: 14px; }
.form-group label { display: block; font-size: 0.85rem; color: var(--muted); margin-bottom: 4px; font-weight: 600; }
.form-group input, .form-group textarea {
  width: 100%; padding: 11px 12px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font-size: 1rem;
}
.error-box { background: rgba(192,57,43,.12); color: var(--danger); padding: 10px 12px; border-radius: 10px; margin-bottom: 14px; font-size: 0.9rem; }
.hint { color: var(--muted); font-size: 0.8rem; margin-top: 4px; }

.pagination { display: flex; justify-content: center; gap: 6px; margin: 16px 0; flex-wrap: wrap; }
.pagination a, .pagination span {
  padding: 8px 12px; border-radius: 10px; border: 1px solid var(--border); font-size: 0.9rem; color: var(--text);
}
.pagination .current { background: var(--primary); color: #fff; border-color: var(--primary); }

.center { text-align: center; }
.stack-lg > * + * { margin-top: 16px; }
.login-wrap { max-width: 380px; margin: 12vh auto; padding: 0 16px; }
.login-logo { text-align: center; font-size: 1.6rem; font-weight: 800; color: var(--primary); margin-bottom: 24px; }

.home-menu {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px;
}
.home-tile {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 28px 12px; color: var(--text); font-weight: 700;
  box-shadow: 0 1px 4px rgba(20, 30, 20, 0.05);
}
.home-tile-icon { font-size: 2rem; line-height: 1; }
.home-tile-label { font-size: 0.95rem; }
.home-tile .cart-badge {
  position: absolute; top: 10px; right: 10px; background: var(--danger); color: #fff;
  border-radius: 999px; font-size: 0.7rem; min-width: 18px; height: 18px; display: flex;
  align-items: center; justify-content: center; padding: 0 4px;
}

/* Payment details on the account page. Each IBAN is one row with a copy
   button; the number itself is also tappable so a mis-aimed tap still copies
   instead of doing nothing. */
.pay-list { display: flex; flex-direction: column; gap: 10px; }
.pay-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 10px 12px;
}
.pay-row-main { flex: 1 1 auto; min-width: 0; }
.pay-bank { font-size: 0.78rem; color: var(--muted); font-weight: 600; }
.pay-iban {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.86rem; font-weight: 700; letter-spacing: 0.01em;
  color: var(--text); background: none; border: none; padding: 0; text-align: left;
  /* IBANs are too wide for a narrow phone, so let them wrap instead of
     forcing the row to overflow horizontally. */
  overflow-wrap: anywhere; width: 100%;
}
.pay-copy {
  flex: 0 0 auto; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--bg); color: var(--text); font-size: 0.82rem; font-weight: 700;
}
.pay-copy:active { background: var(--border); }
.pay-copy.copied { background: var(--primary); color: #fff; border-color: var(--primary); }
.pay-beneficiary { font-size: 0.88rem; margin: 12px 0 0; }
.pay-beneficiary strong { font-weight: 700; }

.table-wrap { overflow-x: auto; }

.admin-table td, .admin-table th { white-space: nowrap; }
.inline-form { display: inline; }

.doc-list {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; margin-bottom: 10px;
}
.doc-row { display: flex; align-items: stretch; border-bottom: 1px solid var(--border); }
.doc-row:last-child { border-bottom: none; }
.doc-row-link, .doc-row-static {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 14px;
  color: var(--text); text-decoration: none;
}
.doc-row-link:active { background: var(--bg); }
.doc-row-main { flex: 1; min-width: 0; }
.doc-row-title { font-weight: 600; font-size: 0.95rem; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.doc-row-date { color: var(--muted); font-size: 0.8rem; margin-top: 2px; }
.doc-row-amount { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.doc-row-chevron { color: var(--muted); font-size: 1.3rem; line-height: 1; }
.doc-row-reorder { display: flex; align-items: center; border-left: 1px solid var(--border); }
.doc-row-reorder button {
  background: none; border: none; color: var(--primary); font-size: 1.25rem; line-height: 1;
  cursor: pointer; padding: 0 16px; height: 100%;
}
.doc-row-reorder button:active { background: var(--bg); }
.doc-line { gap: 6px; }

.line-right { display: flex; align-items: center; gap: 10px; }
.delete-btn {
  background: none; border: none; color: var(--danger); font-size: 1.15rem; line-height: 1;
  padding: 6px 4px; cursor: pointer;
}

.news-card { gap: 0; }
.news-image { width: 100%; max-height: 320px; object-fit: cover; border-radius: 10px; margin-bottom: 10px; }
.news-date { color: var(--muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 2px; }
.news-body { margin: 6px 0 10px; white-space: pre-wrap; font-size: 0.92rem; }

/* ------------------------------------------------------------------------
   Catalog / cart refresh: compact item cards, the quantity stepper, the
   checkout bar and notices.
   ------------------------------------------------------------------------ */
html { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.topbar-btn { padding: 6px 10px; font-size: 0.8rem; white-space: nowrap; }

/* Compact "ordering for" bar: one line for the shop name, one for the rest. */
.acting-bar { padding: 6px 14px; }
.acting-who { display: flex; flex-direction: column; }
.acting-label { font-size: 0.62rem; }
.acting-name, .acting-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acting-who strong.acting-name { font-size: 1rem; }

.searchbar { margin: 10px 0; }
.searchbar-row { display: flex; gap: 8px; min-width: 0; }
.searchbar-row select { flex: 1 1 auto; min-width: 0; width: auto; }
.quick-link { flex: 0 0 auto; padding: 8px 12px; font-size: 0.85rem; white-space: nowrap; }
.search-clear[hidden] { display: none; }
.results-count { margin: 0 0 8px; }
#catalog-results { transition: opacity 0.15s; }
#catalog-results.loading { opacity: 0.5; }

.item-card { padding: 12px; gap: 4px; }
.item-card.in-cart { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary) inset; }
.item-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.item-top .fav-btn { position: static; padding: 0 2px; margin: -2px -2px 0 0; }
.item-top .name { flex: 1 1 auto; min-width: 0; font-weight: 600; }
.item-card .name {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.stock.in { color: var(--primary); }
.stock.out { color: var(--accent); }
.item-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: 6px; }
.price-block { min-width: 0; }
.item-card .price { font-size: 1.12rem; line-height: 1.2; }
.price-sub { color: var(--muted); font-size: 0.75rem; display: flex; gap: 6px; align-items: baseline; }
.price-sub .old-price { font-size: 0.75rem; }

/* Stepper: "Προσθήκη" until the item is in the basket, then − n +. */
.stepper { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.stepper .step-btn, .stepper input { display: none; }
.stepper.has-qty .step-btn, .stepper.has-qty input { display: inline-flex; }
.stepper.has-qty .add-btn { display: none; }
.step-btn {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--surface); color: var(--primary); font-size: 1.25rem; font-weight: 700;
  align-items: center; justify-content: center; cursor: pointer; padding: 0; line-height: 1;
}
.step-btn:active { background: var(--bg); }
.stepper input[type="number"] {
  width: 50px; height: 36px; padding: 0 4px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); text-align: center; font-size: 1rem; font-weight: 700;
  -moz-appearance: textfield;
}
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.add-btn {
  padding: 9px 16px; border-radius: 999px; border: none; background: var(--primary); color: #fff;
  font-weight: 700; font-size: 0.9rem; cursor: pointer;
}
.add-btn:active { background: var(--primary-dark); }

/* Cart lines */
.cart-line { padding: 12px; }
.cart-line .meta { color: var(--muted); font-size: 0.8rem; margin-top: 2px; }
.line-total { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.line-right { gap: 6px; }
.delete-btn { font-size: 1.05rem; opacity: 0.75; }

/* Total + way to the checkout form, always above the tab bar on the cart. */
.checkout-bar {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 14px; background: var(--surface); border-top: 1px solid var(--border);
}
.checkout-bar-label { color: var(--muted); font-size: 0.72rem; }
.checkout-bar strong { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.checkout-bar .btn { padding: 10px 16px; }

/* Notices. Absolute within the app shell (which app.js sizes in real pixels);
   never position: fixed - see the app-shell note above. */
body.app-shell { position: relative; }
.toast {
  position: absolute; left: 50%; bottom: calc(var(--nav-h) + 14px); z-index: 50;
  transform: translate(-50%, 12px); opacity: 0; pointer-events: none;
  max-width: calc(100% - 28px); width: max-content;
  background: #1c231f; color: #fff; border-radius: 12px; padding: 10px 14px;
  font-size: 0.88rem; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  display: flex; align-items: center; gap: 12px;
  transition: opacity 0.18s, transform 0.18s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast.error { background: var(--danger); }
.toast button { background: none; border: none; color: var(--accent); font-weight: 800; font-size: 0.88rem; padding: 0; cursor: pointer; }
body:has(.checkout-bar) .toast { bottom: calc(var(--nav-h) + 74px); }

.pagination { align-items: center; }
.pagination .gap { border: none; padding: 8px 2px; color: var(--muted); }

.empty-icon { font-size: 2.6rem; margin-bottom: 8px; }
.empty-actions { display: flex; flex-direction: column; gap: 8px; max-width: 300px; margin: 18px auto 0; }

@media (prefers-color-scheme: dark) {
  .toast { background: #eef1ec; color: #12140f; }
  .toast button { color: var(--primary-dark); }
}

.remarks-block { padding: 6px 0; font-size: 0.88rem; overflow-wrap: anywhere; }
.remarks-block .hint { display: block; margin: 0 0 2px; }
.info-box { background: rgba(31,122,77,.12); color: var(--primary); padding: 10px 12px; border-radius: 10px; margin-bottom: 12px; font-size: 0.9rem; }

.resume-card { display: flex; align-items: center; gap: 12px; color: var(--text); margin-top: 10px; border-color: var(--primary); }
.resume-icon { font-size: 1.6rem; line-height: 1; }
.resume-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.resume-main .hint { margin-top: 2px; }
@media (min-width: 480px) {
  .searchbar-row { flex: 0 1 auto; }
  .searchbar-row select { max-width: 240px; }
}
/* Shop PC / tablet: use the width - three columns of items. */
@media (min-width: 1000px) {
  .container { max-width: 980px; }
  .item-grid { grid-template-columns: 1fr 1fr 1fr; }
}

.admin-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (min-width: 800px) { .admin-tiles { grid-template-columns: repeat(4, 1fr); } }
.admin-tiles .home-tile { padding: 20px 10px; text-align: center; }
.tile-sub { color: var(--muted); font-size: 0.75rem; font-weight: 500; }

/* --- Invoices app (timologia.<server> and /admin/invoices, 27/10/2026) --- */
.inv-app { --inv: #1f5f7a; --inv-soft: rgba(31, 95, 122, .10); --ok: #1f7a4d; --todo: #b7791f; --primary: #1f5f7a; --primary-dark: #174a60; }
@media (prefers-color-scheme: dark) { .inv-app { --inv: #5aa9c9; --inv-soft: rgba(90, 169, 201, .14); --ok: #38a86a; --todo: #f0bb4a; --primary: #5aa9c9; --primary-dark: #4790ad; } }
.inv-app [hidden] { display: none !important; }
.inv-app .btn:not(.secondary):not(.danger) { background: var(--inv); }
.inv-btn-lg { padding: 14px 16px; font-size: 1.02rem; font-weight: 700; border-radius: 12px; }

.inv-login { max-width: 380px; margin: 9vh auto 24px; padding: 0 16px; }
.inv-login-brand { text-align: center; margin-bottom: 22px; }
.inv-login-brand img { border-radius: 18px; box-shadow: 0 8px 24px rgba(31, 95, 122, .25); }
.inv-login-brand h1 { margin: 14px 0 4px; font-size: 1.6rem; letter-spacing: -0.02em; }
.inv-login-brand p { margin: 0; color: var(--muted); font-size: 0.92rem; }
.inv-login-card { padding: 20px; }
.inv-pass { position: relative; }
.inv-pass input { padding-right: 44px; }
.inv-pass-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: none; font-size: 1.1rem; cursor: pointer; padding: 6px; }
.inv-login-foot { text-align: center; color: var(--muted); font-size: 0.8rem; margin-top: 18px; }

.inv-topbar h1 { display: flex; align-items: center; gap: 8px; }
.inv-topbar h1 img { border-radius: 7px; }
.inv-topbar-right { display: flex; align-items: center; gap: 8px; }
.inv-user { font-size: 0.8rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40vw; }
.inv-container > * + * { margin-top: 14px; }

.inv-upload { padding: 16px; }
.inv-upload-head h2 { margin: 0 0 4px; font-size: 1.05rem; }
.inv-upload-head p { margin: 0 0 12px; color: var(--muted); font-size: 0.85rem; }
.inv-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.inv-pick-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 18px 8px;
  border: 1.5px solid var(--inv); border-radius: 14px; background: var(--inv-soft); color: var(--inv); font-weight: 700; cursor: pointer; text-align: center; }
.inv-pick-btn:active { transform: scale(.98); }
.inv-pick-icon { font-size: 1.9rem; line-height: 1; }
.inv-drop { margin-top: 10px; padding: 10px; border: 1.5px dashed var(--border); border-radius: 12px; text-align: center; color: var(--muted); font-size: 0.82rem; }
.inv-drop.over { border-color: var(--inv); background: var(--inv-soft); color: var(--inv); }
@media (hover: none) { .inv-drop { display: none; } }
.inv-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; margin: 10px 0; }
.inv-thumbs:empty { display: none; }
.inv-thumb { position: relative; aspect-ratio: 3 / 4; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); background: var(--bg); display: flex; align-items: center; justify-content: center; }
.inv-thumb img { width: 100%; height: 100%; object-fit: cover; }
.inv-thumb-pdf { font-weight: 800; color: var(--danger); font-size: 1.1rem; }
.inv-thumb-name { position: absolute; left: 0; right: 0; bottom: 0; padding: 2px 4px; font-size: 0.62rem; background: rgba(0, 0, 0, .55); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inv-thumb-x { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .6); color: #fff; font-size: 0.75rem; cursor: pointer; }
#inv-submit { margin-top: 12px; }
.inv-busy { margin-top: 14px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.inv-spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--inv-soft); border-top-color: var(--inv); animation: inv-spin .8s linear infinite; }
@keyframes inv-spin { to { transform: rotate(360deg); } }
.inv-steps { list-style: none; margin: 0; padding: 0; font-size: 0.88rem; color: var(--muted); }
.inv-steps li::before { content: '○ '; }
.inv-steps li.on { color: var(--text); }
.inv-steps li.on::before { content: '● '; color: var(--inv); }

.inv-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.inv-stat { border: 1px solid var(--border); background: var(--surface); border-radius: 12px; padding: 10px 6px; text-align: center; cursor: pointer; color: var(--text); font: inherit; }
.inv-stat b { display: block; font-size: 1.35rem; color: var(--inv); }
.inv-stat span { font-size: 0.74rem; color: var(--muted); }
.inv-stat.bad b { color: var(--danger); }

.inv-listbar { display: flex; flex-direction: column; gap: 8px; }
.inv-tabs { display: flex; gap: 6px; overflow-x: auto; }
.inv-tab { border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 0.82rem; white-space: nowrap; cursor: pointer; }
.inv-tab.active { background: var(--inv); border-color: var(--inv); color: #fff; }
.inv-search { width: 100%; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; }
.inv-empty { text-align: center; padding: 18px 0; }

.inv-list > * + * { margin-top: 8px; }
.inv-row { position: relative; display: flex; gap: 10px; justify-content: space-between; padding: 12px 12px 12px 16px; overflow: hidden; }
.inv-row::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--border); }
.inv-row.st-review::before { background: var(--todo); }
.inv-row.st-done::before { background: var(--ok); }
.inv-row.st-dup::before, .inv-row.st-error::before { background: var(--danger); }
.inv-row-link { position: absolute; inset: 0; z-index: 1; }
.inv-row-main { min-width: 0; }
.inv-row-title { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inv-row-meta { font-size: 0.8rem; margin-top: 2px; }
.inv-row-meta.mute { color: var(--muted); font-size: 0.74rem; }
.inv-row-error { color: var(--danger); font-size: 0.78rem; margin-top: 4px; }
.inv-row-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.inv-row-total { font-weight: 700; font-variant-numeric: tabular-nums; }
.inv-row-badges { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.inv-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; background: var(--bg); color: var(--muted); }
.inv-badge.ok { background: rgba(31, 122, 77, .14); color: var(--ok); }
.inv-badge.todo { background: rgba(224, 164, 46, .18); color: var(--todo); }
.inv-badge.bad { background: rgba(192, 57, 43, .14); color: var(--danger); }
.inv-row-del { position: relative; z-index: 2; margin: 0; }
.inv-row-del button { border: 0; background: none; cursor: pointer; font-size: 0.95rem; opacity: .55; padding: 2px 4px; }
.inv-row-del button:hover { opacity: 1; }
@media (min-width: 640px) {
  .inv-listbar { flex-direction: row; align-items: center; justify-content: space-between; }
  .inv-search { max-width: 260px; }
}
.inv-entry { display: flex; align-items: center; gap: 12px; margin-top: 14px; color: var(--text); }
.inv-entry img { border-radius: 10px; flex-shrink: 0; }
.inv-entry-go { margin-left: auto; font-size: 1.6rem; color: var(--muted); }

/* Order check on the invoice review page (orderCheck.js) */
.oc-card { border-left: 4px solid var(--accent); }
.oc-card.oc-ok { border-left-color: var(--primary); }
.oc-card summary { cursor: pointer; list-style: none; }
.oc-card summary::-webkit-details-marker { display: none; }
.oc-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 0.85rem; }
.oc-table th { text-align: left; color: var(--muted); font-weight: 600; font-size: 0.75rem; padding: 4px; border-bottom: 1px solid var(--border); }
.oc-table td { padding: 6px 4px; border-bottom: 1px solid var(--border); vertical-align: top; }
.oc-table .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.oc-st { white-space: nowrap; font-weight: 700; font-size: 0.78rem; text-align: right; }
.oc-ok .oc-st, tr.oc-ok .oc-st { color: var(--primary); }
tr.oc-missing .oc-st, tr.oc-short .oc-st { color: var(--danger); }
tr.oc-more .oc-st, tr.oc-extra .oc-st { color: var(--accent); }
tr.oc-older .oc-st { color: var(--muted); }
tr.oc-missing td:first-child { font-weight: 600; }
.inv-badge.warn { background: rgba(224, 164, 46, .18); color: var(--todo, var(--accent)); }