/* ============================================================================
   Mailbox Manager — "Estafeta" theme (dark)
   One stylesheet, no frameworks, fully offline (fonts self-hosted below).

   Identity: a neighborhood private mail office, after dark. Deep ink-navy
   surfaces, crisp light text, a single azure accent, and the postmark as the
   signature mark. Box numbers shown as engraved metal door-plates. Built to
   read clearly for everyone; reports still print clean black-on-white.
   ============================================================================ */

/* ── self-hosted fonts (latin subset, ~15KB each) ──────────────────────────
   Public Sans — the U.S. civic typeface: legible, professional, postal DNA.
   Saira SemiCondensed — the "engraved signage" voice for numbers/plates.     */
@font-face { font-family:"Public Sans"; font-style:normal; font-weight:400;
  font-display:swap; src:url("/public/fonts/public-sans-400.woff2") format("woff2"); }
@font-face { font-family:"Public Sans"; font-style:normal; font-weight:600;
  font-display:swap; src:url("/public/fonts/public-sans-600.woff2") format("woff2"); }
@font-face { font-family:"Public Sans"; font-style:normal; font-weight:700;
  font-display:swap; src:url("/public/fonts/public-sans-700.woff2") format("woff2"); }
@font-face { font-family:"Saira SemiCondensed"; font-style:normal; font-weight:600;
  font-display:swap; src:url("/public/fonts/saira-sc-600.woff2") format("woff2"); }
@font-face { font-family:"Saira SemiCondensed"; font-style:normal; font-weight:700;
  font-display:swap; src:url("/public/fonts/saira-sc-700.woff2") format("woff2"); }

/* ── theme tokens ───────────────────────────────────────────────────────────
   DEFAULT (:root) is the LIGHT "day office" theme — white page, ink text.
   The original dark "after dark" theme now lives under html[data-theme="dark"]
   and is opted into by the subtle toggle in the nav.
   The top nav stays dark in BOTH themes (--nav-bg is constant): it is the
   postal letterhead bar, and a dark bar over a white page reads as intentional
   rather than re-theming dozens of white-on-dark nav rules. */
:root {
  /* surfaces (light — white primary, faint cool tints for structure) */
  --bg:#ffffff; --bg-2:#eef2f7; --card:#ffffff; --card-2:#f7f9fc;
  /* text */
  --text:#1d2733; --muted:#5b6b7d; --heading:#0f1722;
  /* azure accent — brand, active, focus, signature (deepened for white bg) */
  --accent:#2f74a3; --accent-strong:#1f5e8a; --accent-dim:#e6f0f9;
  /* steel — primary buttons */
  --steel:#2f74a3; --steel-dark:#27617f;
  /* status (light tints: soft background + readable dark text) */
  --red:#d6473c; --red-soft:#fcebe9; --red-line:#f0c4bf; --red-text:#b1382e;
  --green:#2f9e63; --green-soft:#e7f6ee; --green-line:#bfe3cf; --green-text:#1e7a49;
  --amber:#c5872a; --amber-soft:#fbf2e1; --amber-line:#ecd6ac; --amber-text:#8a5e15;
  --purple:#7a63d6; --purple-soft:#efeafb; --purple-line:#d8cef3; --purple-text:#5a44ad;
  /* lines & shape */
  --line:#e3e8ef; --line-strong:#cdd7e3;
  /* component fills the semantic tokens above can't express directly */
  --input-bg:#ffffff; --zebra:rgba(16,30,50,.028);
  --plate-bg:linear-gradient(180deg,#eef3f8,#dde6f0);
  --plate-bg-hover:linear-gradient(180deg,#e3ebf4,#cfdaea);
  --plate-text:#243345; --plate-line:#c2cdda;
  --badge-bg:#eef2f7; --badge-text:#46566a; --badge-line:#d4dde7;
  --btn-gray-hover:#e9eef4; --btn-gray-hover-line:#b8c4d2;
  /* the dark letterhead bar — held constant across themes */
  --nav-bg:#16202d;
  --r:8px; --r-sm:5px; --r-pill:999px;
  --shadow-sm:0 1px 2px rgba(16,30,50,.08);
  --shadow:0 10px 28px rgba(16,30,50,.14);
  --gap:16px; --navh:56px;
  --font:"Public Sans","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  --font-cond:"Saira SemiCondensed","Arial Narrow",var(--font);
  --font-mono:"Cascadia Mono",Consolas,ui-monospace,"Courier New",monospace;
  /* airmail stripe (red/blue dashes over the dark bar) */
  --airmail:repeating-linear-gradient(-45deg,
    var(--red) 0 11px,transparent 11px 22px,var(--accent) 22px 33px,transparent 33px 44px);
}

/* ── dark theme (opt-in via the page toggle) — the original "after dark" ink ── */
html[data-theme="dark"] {
  --bg:#0f1722; --bg-2:#16202d; --card:#1a2533; --card-2:#1f2c3c;
  --text:#e6edf5; --muted:#92a2b6; --heading:#f3f7fc;
  --accent:#5aa0e0; --accent-strong:#7ab6ec; --accent-dim:#21384f;
  --steel:#2f74a3; --steel-dark:#27617f;
  --red:#e15b4f; --red-soft:#37201e; --red-line:#5d342f; --red-text:#f1948b;
  --green:#52b07f; --green-soft:#152e20; --green-line:#2c5740; --green-text:#83d6a8;
  --amber:#d79a3f; --amber-soft:#322716; --amber-line:#574323; --amber-text:#e6bd79;
  --purple:#9c87e6; --purple-soft:#221d37; --purple-line:#3c3360; --purple-text:#b9aaf0;
  --line:#283747; --line-strong:#3a4d63;
  --input-bg:#121b27; --zebra:rgba(255,255,255,.022);
  --plate-bg:linear-gradient(180deg,#2b3b50,#1f2c3b);
  --plate-bg-hover:linear-gradient(180deg,#33445c,#243345);
  --plate-text:var(--heading); --plate-line:var(--line-strong);
  --badge-bg:#26323f; --badge-text:#c4d0de; --badge-line:var(--line-strong);
  --btn-gray-hover:#27364a; --btn-gray-hover-line:#4a5e76;
  --shadow-sm:0 1px 2px rgba(0,0,0,.45);
  --shadow:0 10px 28px rgba(0,0,0,.55);
  color-scheme:dark;
}

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; color-scheme:light; }
body { margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font); font-size:15.5px; line-height:1.55;
  -webkit-font-smoothing:antialiased; }
::selection { background:var(--accent-dim); }

.container { width:100%; max-width:1820px; margin:0 auto;
  padding:clamp(16px,2vw,30px) clamp(16px,2.5vw,42px) 60px; }

/* ── navigation: elevated ink bar with an airmail stripe on top ──────────── */
.nav { position:sticky; top:0; z-index:50; min-height:var(--navh);
  display:flex; align-items:center; gap:2px; flex-wrap:wrap;
  background:var(--nav-bg); padding:11px clamp(16px,2.5vw,42px) 9px;
  border-bottom:3px solid var(--accent); }
.nav::before, .kiosk-bar::before { content:""; position:absolute; top:0; left:0;
  right:0; height:4px; background:var(--airmail); }
.kiosk-bar { position:relative; display:flex; align-items:center; gap:16px;
  min-height:var(--navh); background:var(--nav-bg);
  padding:13px clamp(16px,2.5vw,42px) 11px; border-bottom:3px solid var(--accent); }
.kiosk-bar .brand, .nav .brand { display:flex; align-items:center; gap:10px;
  font-family:var(--font-cond); font-size:1.28em; font-weight:700; color:#fff;
  letter-spacing:.02em; text-transform:uppercase; margin-right:16px; text-decoration:none; }
.kiosk-bar .brand:hover, .nav .brand:hover { text-decoration:none; background:none; }
.kiosk-bar .kiosk-title { color:var(--accent-strong); font-weight:600; font-size:.95em;
  font-family:var(--font); text-transform:none; letter-spacing:0; }
.brand .mark { width:26px; height:26px; flex:0 0 auto; }
/* Inline UI icons (partials/icon.ejs). Inherit text colour via currentColor.
   In flex buttons the gap handles spacing; in headings/links the margin does. */
.icon { width:1.1em; height:1.1em; flex:none; vertical-align:-0.18em; }
h1 > .icon, h2 > .icon, h3 > .icon { margin-right:.4em; vertical-align:-0.12em; }
.warnbar > .icon, .muted > .icon { margin-right:.3em; }
.nav a { color:#aeb9c6; text-decoration:none; padding:7px 12px;
  border-radius:var(--r-sm); font-weight:600; font-size:.95em;
  box-shadow:inset 0 -2px 0 transparent; transition:color .12s, box-shadow .12s, background .12s; }
.nav a:hover { background:rgba(255,255,255,.06); color:#fff; text-decoration:none; }
.nav a.active { color:#fff; box-shadow:inset 0 -2px 0 var(--accent); }
.navsearch { margin-left:auto; }
/* The nav sits on the dark bar in both themes, so its search field keeps the
   white-on-translucent treatment regardless of theme. Scoped under `.nav` so it
   outranks the light-theme `input[type=search]` rule (equal-specificity tie that
   otherwise loses on source order — which left dark text on a dark field). */
.nav .navsearch input { width:330px; max-width:56vw; padding:8px 16px;
  border:1px solid rgba(255,255,255,.16); border-radius:var(--r-pill); font-size:14.5px;
  background:rgba(255,255,255,.06); color:#fff; transition:background .15s,border-color .15s; }
.nav .navsearch input::placeholder { color:#8493a6; }
.nav .navsearch input:focus { outline:none; background:rgba(255,255,255,.12);
  border-color:var(--accent); color:#fff; box-shadow:none; }
.nav .navsearch input:focus::placeholder { color:#a9b6c6; }
.linklike { background:none; border:none; color:#aeb9c6; cursor:pointer;
  font:inherit; font-size:13.5px; font-weight:600; padding:7px 11px; border-radius:var(--r-sm); }
.linklike:hover { color:#fff; background:rgba(255,255,255,.06); }
/* Language dropdown: a real <select>, but themed to sit in the dark nav (custom
   chevron, translucent fill) instead of the default OS widget that looked foreign. */
.nav-lang { display:flex; align-items:center; }
.nav-lang select { appearance:none; -webkit-appearance:none;
  background-color:rgba(255,255,255,.06);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4.5l4 4 4-4' fill='none' stroke='%238493a6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat; background-position:right 9px center; background-size:11px;
  border:1px solid rgba(255,255,255,.16); border-radius:var(--r-sm);
  color:#dfe6ee; font:inherit; font-size:.95em; font-weight:600; line-height:1.4;
  padding:6px 28px 6px 11px; cursor:pointer; transition:background-color .15s, border-color .15s; }
.nav-lang select:hover { background-color:rgba(255,255,255,.12); border-color:#4a5e76; }
.nav-lang select:focus { outline:none; border-color:var(--accent); }
.nav-lang option { background:var(--card); color:var(--text); }
/* Theme toggle: lives at the foot of the page, deliberately low-key — the white
   page is the primary look, so dark mode is a quiet opt-in tucked below content.
   The sun/moon swap is driven purely by [data-theme] so it always matches state. */
.page-foot { display:flex; justify-content:center; padding:8px 0 30px; }
.theme-toggle { display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; padding:0; background:none; border:1px solid transparent;
  cursor:pointer; color:var(--muted); opacity:.6; border-radius:var(--r-sm);
  transition:color .12s, opacity .12s, background .12s, border-color .12s; }
.theme-toggle:hover { opacity:1; color:var(--accent-strong);
  background:var(--card-2); border-color:var(--line); }
.theme-toggle .icon { width:18px; height:18px; vertical-align:0; }
.theme-toggle .icon-moon { display:inline-flex; }
.theme-toggle .icon-sun { display:none; }
html[data-theme="dark"] .theme-toggle .icon-moon { display:none; }
html[data-theme="dark"] .theme-toggle .icon-sun { display:inline-flex; }

/* ── typography ─────────────────────────────────────────────────────────── */
h1 { font-family:var(--font-cond); font-size:clamp(1.5em,2.3vw,1.95em); font-weight:700;
  letter-spacing:.01em; margin:8px 0 18px; display:flex; align-items:center; gap:11px;
  flex-wrap:wrap; color:var(--heading); }
h2 { font-family:var(--font-cond); font-size:1.28em; font-weight:700; letter-spacing:.01em;
  margin:24px 0 12px; color:var(--heading); }
h3 { font-size:1.05em; font-weight:700; color:var(--heading); }
a { color:var(--accent-strong); text-decoration:none; }
a:hover { text-decoration:underline; }
.muted { color:var(--muted); }
code { font-family:var(--font-mono); background:var(--bg-2); padding:1px 5px;
  border-radius:4px; font-size:.92em; color:var(--accent-strong); }

/* masthead — office name + date + postmark, the page's "letterhead" */
.masthead { display:flex; justify-content:space-between; align-items:center; gap:24px;
  margin:6px 0 22px; padding-bottom:16px; border-bottom:2px solid var(--line-strong); }
.masthead .mh-title { font-family:var(--font-cond); font-weight:700;
  font-size:clamp(1.5em,3vw,2.1em); letter-spacing:.01em; color:var(--heading);
  text-transform:uppercase; line-height:1.05; }
.masthead .mh-sub { color:var(--muted); font-weight:600; margin-top:2px; }
.masthead .postmark { flex:0 0 auto; }

.flash { background:var(--green-soft); border:1px solid var(--green-line);
  border-left:4px solid var(--green); color:var(--green-text); padding:12px 16px;
  border-radius:var(--r-sm); margin-bottom:18px; font-weight:600; }

/* ── cards: PO-box-door tiles ───────────────────────────────────────────── */
.cards { display:grid; gap:var(--gap);
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); }
.card { display:block; background:var(--card-2); border:1px solid var(--line-strong);
  border-radius:var(--r); padding:16px 18px 15px; color:var(--text); position:relative;
  overflow:hidden; box-shadow:var(--shadow-sm);
  transition:box-shadow .15s, transform .12s, border-color .15s; }
a.card:hover { text-decoration:none; box-shadow:var(--shadow); transform:translateY(-2px);
  border-color:var(--accent); }
.card .icon { display:block; width:22px; height:22px; color:var(--muted); margin-bottom:12px; }
.card.alert .icon { color:var(--red-text); }   /* match the tinted number */
.card .big { font-family:var(--font-cond); font-size:2.25em; font-weight:700; line-height:1.04;
  letter-spacing:.01em; font-variant-numeric:tabular-nums; color:var(--heading); }
.card .label { color:var(--muted); font-weight:600; font-size:.88em; margin-top:2px;
  text-transform:uppercase; letter-spacing:.03em; }
.card.alert .big { color:var(--red-text); }

.panel { background:var(--card); border:1px solid var(--line-strong); border-radius:var(--r);
  padding:20px 22px; margin:var(--gap) 0; box-shadow:var(--shadow-sm); }
.panel > h2:first-child, .panel > h1:first-child, .panel > h3:first-child { margin-top:0; }

/* ── tables: ledger ─────────────────────────────────────────────────────── */
table { width:100%; border-collapse:collapse; background:var(--card);
  border-radius:var(--r); border:1px solid var(--line-strong); overflow:hidden;
  box-shadow:var(--shadow-sm); }
.panel table, .year-detail table { box-shadow:none; border:none; border-radius:0; }
/* Opt back into rounded corners for a panel table (e.g. All payments). */
.panel table.rounded { border:1px solid var(--line-strong); border-radius:var(--r); overflow:hidden; }
th, td { text-align:left; padding:10px 14px; border-bottom:1px solid var(--line);
  vertical-align:middle; }
th { background:var(--bg-2); font-size:.72em; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:var(--muted);
  border-bottom:2px solid var(--line-strong); }
td { font-variant-numeric:tabular-nums; }
tbody tr:nth-child(even) td { background:var(--zebra); }
tr:last-child td { border-bottom:none; }
tbody tr:hover td, table tr:hover td { background:var(--accent-dim); }
table.plain { border:none; box-shadow:none; }
table.plain tr:hover td, table.plain tr:nth-child(even) td { background:inherit; }

/* engraved metal door-plate for box numbers (the most-scanned datum) */
.boxplate { display:inline-block; font-family:var(--font-cond); font-weight:700;
  font-size:1.05em; letter-spacing:.06em; color:var(--plate-text);
  background:var(--plate-bg); border:1px solid var(--plate-line);
  border-radius:4px; padding:1px 9px; line-height:1.5;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08); }
a .boxplate { color:var(--plate-text); }
a:hover .boxplate { border-color:var(--accent); background:var(--plate-bg-hover); }
.boxplate.lg { font-size:1.5em; padding:2px 12px; }

/* ── badges: inked stamps ───────────────────────────────────────────────── */
.badge { display:inline-block; padding:2px 9px; border-radius:4px; font-size:.72em;
  font-weight:700; white-space:nowrap; letter-spacing:.04em; text-transform:uppercase;
  line-height:1.6; border:1px solid var(--badge-line); background:var(--badge-bg); color:var(--badge-text); }
.badge.ok { background:var(--green-soft); color:var(--green-text); border-color:var(--green-line); }
.badge.duesoon { background:var(--amber-soft); color:var(--amber-text); border-color:var(--amber-line); }
.badge.overdue { background:var(--red-soft); color:var(--red-text); border-color:var(--red-line); }
.badge.hold { background:var(--red); color:#fff; border-color:var(--red); }
.badge.closed { background:var(--bg-2); color:var(--muted); border-color:var(--line); }
.badge.personal { background:var(--accent-dim); color:var(--accent-strong); border-color:#2f567a; }
.badge.business { background:var(--purple-soft); color:var(--purple-text); border-color:var(--purple-line); }
/* carrier badges keep recognizable brand hues (bright chips read as labels) */
.badge.UPS { background:#5e4426; color:#ffb500; border-color:#7a5d36; }
.badge.USPS { background:#163a5e; color:#7fbef0; border-color:#27567f; }
.badge.FedEx { background:#3a2a63; color:#c3a9f0; border-color:#4d3c80; }
.badge.DHL { background:#5a3f10; color:#ffcf66; border-color:#7a571a; }
.badge.Amazon { background:#5a3410; color:#ffb066; border-color:#7a4a1a; }
.badge.OTC { background:#0f3a36; color:#5fd6ca; border-color:#1c5750; }
.badge.IslandWide { background:#15391f; color:#7ad696; border-color:#27572f; }
.badge.Walmart { background:#0c365e; color:#6fb6f0; border-color:#1c557f; }
.badge.Sephora { background:#2b2b30; color:#e6e6ea; border-color:#444450; }
.badge.SHEIN { background:#2a2a2a; color:#eaeaea; border-color:#444; }
.badge.Temu { background:#5a3a10; color:#ffb866; border-color:#7a521a; }
.badge.AliExpress { background:#5a201a; color:#ff9080; border-color:#7a2e26; }
.badge.eBay { background:#16345e; color:#ff8a8d; border-color:#27507f; }
.badge.Target { background:#5a1a1a; color:#ff8a8a; border-color:#7a2626; }
.badge.Other { background:var(--bg-2); color:var(--muted); border-color:var(--line); }

/* ── forms & buttons ────────────────────────────────────────────────────── */
label { display:block; font-weight:600; font-size:.88em; margin:14px 0 5px; color:var(--text); }
input[type=text], input[type=search], input[type=number], input[type=date],
input[type=email], input[type=password], select, textarea {
  width:100%; padding:9px 12px; font-size:15.5px; color:var(--text);
  border:1px solid var(--line-strong); border-radius:var(--r-sm); background:var(--input-bg);
  font-family:inherit; transition:border-color .12s, box-shadow .12s; }
input::placeholder, textarea::placeholder { color:#6f7f92; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(90,160,224,.22); }
input:hover, select:hover, textarea:hover { border-color:#4a5e76; }
textarea { min-height:92px; resize:vertical; }
select { cursor:pointer; }
/* native date/select widgets readable on dark (light theme uses the default) */
html[data-theme="dark"] input[type=date]::-webkit-calendar-picker-indicator { filter:invert(.8); }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:7px;
  background:var(--steel); color:#fff; border:1px solid var(--steel-dark); padding:9px 17px;
  font-size:15px; font-weight:700; border-radius:var(--r-sm); cursor:pointer;
  text-decoration:none; font-family:inherit; box-shadow:var(--shadow-sm);
  transition:background .12s, transform .06s, box-shadow .12s; }
.btn:hover { background:#357fad; text-decoration:none; box-shadow:var(--shadow); }
.btn:active { transform:translateY(1px); box-shadow:var(--shadow-sm); }
.btn.green { background:var(--green); border-color:var(--green-line); color:#06180e; } .btn.green:hover { background:#62c08e; }
.btn.red { background:var(--red); border-color:var(--red-line); color:#1a0807; } .btn.red:hover { background:#e96c61; }
.btn.gray { background:var(--card-2); color:var(--text); border:1px solid var(--line-strong); }
.btn.gray:hover { background:var(--btn-gray-hover); border-color:var(--btn-gray-hover-line); }
.btn.small { padding:5px 11px; font-size:13.5px; }
/* Icon-only action buttons in tables (delete X, etc.): softer rounded corners. */
.btn.red.small { border-radius:var(--r); }
.row { display:flex; gap:var(--gap); flex-wrap:wrap; }
.row > * { flex:1; min-width:200px; }
.actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; align-items:center; }
form.inline { display:inline; }
/* Buttons on the standalone message page (no access, not found, error). */
.msg-actions { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:20px; }

/* ── box contacts (multiple phones/emails) ──────────────────────────────── */
.contacts { margin:8px 0; }
.contact-line { display:flex; align-items:center; gap:8px; padding:4px 0; flex-wrap:wrap; }
.contact-actions { display:inline-flex; gap:6px; margin-left:auto; }
.contact-add { display:flex; gap:10px; flex-wrap:wrap; margin-top:8px;
  padding-top:8px; border-top:1px solid var(--line); }
.contact-add form.inline { display:inline-flex; gap:5px; }
.contact-add input { width:auto; min-width:118px; padding:5px 9px; font-size:13.5px; }

/* Rows hidden behind a "Show more" button (package history, payments). */
.more-row { display:none; }
.more-row.show { display:table-row; }

/* Payment panel: form | history split, divided by a line and kept compact. */
.pay-split { gap:0; }
.pay-split > div:first-child { padding-right:24px; }
.pay-split > div + div { padding-left:24px; border-left:1px solid var(--line-strong); }
.pay-split label { margin-top:10px; }
.pay-split .year-track { margin:8px 0 4px; }
/* Keep paired inputs lined up even when one field's label wraps to two lines. */
.payform .row { align-items:flex-end; }
@media (max-width:720px) {
  .pay-split > div:first-child { padding-right:0; }
  .pay-split > div + div { padding-left:0; padding-top:14px; margin-top:8px;
    border-left:0; border-top:1px solid var(--line-strong); }
}

/* Box page tabs: Information / Packages. */
.tabs { display:flex; gap:2px; margin:0 0 18px; border-bottom:2px solid var(--line-strong); }
.tab { background:none; border:0; border-bottom:2px solid transparent; margin-bottom:-2px;
  padding:9px 18px; font:inherit; font-size:15px; font-weight:700; color:var(--muted);
  cursor:pointer; display:inline-flex; align-items:center; gap:7px;
  border-radius:var(--r-sm) var(--r-sm) 0 0; }
.tab:hover { color:var(--text); }
.tab.active { color:var(--accent); border-bottom-color:var(--accent); }
.tab-hidden { display:none !important; }            /* beats .row's display:flex */
@media print { .tabs { display:none; } .tab-hidden { display:revert !important; } }

/* ── admin: employees list + permission picker ──────────────────────────── */
/* page header row: title on the left, primary action on the right */
.page-head { display:flex; align-items:flex-end; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin:8px 0 20px; }
.page-head h1 { margin:0; }
.page-head .sub { color:var(--muted); font-weight:600; font-size:.92em; margin-top:3px;
  max-width:60ch; }

/* permission chips shown in the employees table */
.perm-chips { display:flex; flex-wrap:wrap; gap:5px; }
.chip { display:inline-block; padding:2px 10px; border-radius:var(--r-pill); font-size:.74em;
  font-weight:600; letter-spacing:.02em; white-space:nowrap;
  background:var(--accent-dim); color:var(--accent-strong); border:1px solid #2f567a; }

/* permission picker: a grid of selectable tiles (the checkbox lives inside) */
.perm-grid { display:grid; gap:10px; margin:8px 0 4px;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); }
.perm-option { display:flex; align-items:center; gap:11px; cursor:pointer; user-select:none;
  margin:0; font-weight:600; font-size:.96em; padding:12px 14px; border-radius:var(--r);
  background:var(--card-2); border:1px solid var(--line-strong);
  border-left:4px solid var(--line-strong);
  transition:border-color .12s, background .12s, box-shadow .12s; }
.perm-option:hover { border-color:#4a5e76; }
.perm-option input { width:19px; height:19px; flex:0 0 auto; margin:0; cursor:pointer;
  accent-color:var(--accent); }
.perm-option .perm-name { line-height:1.2; color:var(--text); }
.perm-option:has(input:checked) { border-left-color:var(--accent); background:var(--accent-dim);
  box-shadow:var(--shadow-sm); }
.perm-option:has(input:checked) .perm-name { color:var(--heading); }

/* ── in-page confirm dialog (replaces native confirm/prompt) ─────────────── */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(4,7,12,.72);
  z-index:300; align-items:center; justify-content:center; padding:16px; }
.modal-overlay.open { display:flex; animation:modal-fade .12s ease-out; }
@keyframes modal-fade { from { opacity:0; } to { opacity:1; } }
.modal-card { background:var(--card); border:1px solid var(--line-strong);
  border-top:4px solid var(--accent); border-radius:var(--r); box-shadow:var(--shadow);
  width:min(94vw,460px); padding:22px 24px;
  animation:modal-pop .14s ease-out; }
@keyframes modal-pop { from { transform:translateY(8px) scale(.98); opacity:.6; } to { transform:none; opacity:1; } }
.modal-msg { margin:0; font-size:1.08em; line-height:1.45; font-weight:600;
  color:var(--heading); white-space:pre-line; }
.modal-input { margin-top:14px; }
.modal-input-label { margin:0 0 5px; }
.modal-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:20px; }

/* ── warning banner ─────────────────────────────────────────────────────── */
.warnbar { background:var(--red-soft); border:1px solid var(--red-line); border-left:4px solid var(--red);
  color:var(--red-text); padding:12px 16px; border-radius:var(--r-sm); font-weight:700; margin:14px 0; }

/* ── scan page ──────────────────────────────────────────────────────────── */
.scaninput { font-size:25px !important; padding:14px 16px !important;
  font-family:var(--font-mono); letter-spacing:.02em; border-width:2px !important;
  border-color:var(--accent) !important; }
/* The base `table` rule clips to rounded corners with overflow:hidden, which
   would cut off a box-assignment dropdown that opens from a scan row. Let the
   scan log overflow so the suggestion list is always fully visible. */
#scans { overflow:visible; }
.suggest { position:relative; }
.suggest .list { position:absolute; z-index:30; left:0; right:0; background:var(--card-2);
  border:1px solid var(--line-strong); border-radius:var(--r-sm); box-shadow:var(--shadow);
  max-height:320px; overflow:auto; margin-top:4px; }
.suggest .list button { display:block; width:100%; text-align:left; background:none;
  border:none; border-bottom:1px solid var(--line); padding:11px 14px; font-size:15px;
  cursor:pointer; font-family:inherit; color:var(--text); }
.suggest .list button:last-child { border-bottom:none; }
.suggest .list button:hover { background:var(--accent-dim); }
.suggest .list button.exact { background:var(--green-soft); color:var(--green-text); font-weight:700; }

/* ── bar chart (pure CSS) ───────────────────────────────────────────────── */
.chart { display:flex; align-items:flex-end; gap:6px; height:160px; padding-top:10px; }
.chart .bar { flex:1; display:flex; flex-direction:column; justify-content:flex-end;
  align-items:center; height:100%; font-size:11.5px; color:var(--muted); }
.chart .bar .fill { width:100%; background:linear-gradient(180deg,var(--accent),var(--steel-dark));
  border-radius:3px 3px 0 0; min-height:2px; transition:height .3s; }
.chart .bar:hover .fill { background:linear-gradient(180deg,var(--accent-strong),var(--accent)); }
.chart .bar .v { font-weight:700; color:var(--heading); margin-bottom:3px;
  font-variant-numeric:tabular-nums; }

/* ── wall display ───────────────────────────────────────────────────────── */
body.wall { background:#0b1019; color:#f3eef2; }
.wall h1 { color:#fff; padding:26px 34px 0; margin:0; }
.wall .wallgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:24px; padding:30px 34px; }
.wall .wallcard { background:#18222f; border:1px solid #2a3747; border-radius:14px;
  padding:32px; text-align:center; border-top:4px solid var(--accent); }
.wall .wallcard::after { display:none; }
.wall .wallcard .big { font-family:var(--font-cond); font-size:5em; font-weight:700;
  line-height:1; letter-spacing:0; color:#fff; }
.wall .wallcard .label { font-size:1.35em; color:#9fb0c4; margin-top:6px;
  text-transform:uppercase; letter-spacing:.04em; }
.wall .wallcard.alert { border-top-color:var(--red); }
.wall .wallcard.warn { border-top-color:var(--amber); }
.wall .wallcard.good { border-top-color:var(--green); }
.wall .wallcard.alert .big { color:#ff6b57; }
.wall .wallcard.warn .big { color:#ffb84d; }
.wall .wallcard.good .big { color:#5ad17a; }
.wall table { background:transparent; color:#dce5ef; margin:0 34px; width:calc(100% - 68px);
  border:none; box-shadow:none; }
.wall th { background:transparent; color:#9fb0c4; border-color:#2a3747; }
.wall td { border-color:#2a3747; }
.wall tr:nth-child(even) td, .wall tr:hover td { background:transparent; }

/* ── year tracker ───────────────────────────────────────────────────────── */
.year-track { display:grid; gap:12px; margin:10px 0 18px;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); }
.year-block { border-radius:var(--r); padding:13px 15px; cursor:pointer;
  border:1px solid var(--line-strong); border-left:4px solid var(--line-strong);
  background:var(--card-2); box-shadow:var(--shadow-sm);
  transition:transform .1s, box-shadow .12s; user-select:none; }
.year-block:hover { transform:translateY(-2px); box-shadow:var(--shadow); }
.year-block.active-block { outline:2px solid var(--accent); outline-offset:1px; }
.year-block.full { border-left-color:var(--green); background:var(--green-soft); }
.year-block.partial { border-left-color:var(--amber); background:var(--amber-soft); }
.year-block.unpaid { border-left-color:var(--red); background:var(--red-soft); }
.year-block .yr-label { font-size:.78em; font-weight:700; color:var(--muted);
  text-transform:uppercase; letter-spacing:.05em; margin-bottom:3px; }
.year-block .yr-status { font-family:var(--font-cond); font-weight:700; font-size:1.1em; }
.year-block.full .yr-status { color:var(--green-text); }
.year-block.partial .yr-status { color:var(--amber-text); }
.year-block.unpaid .yr-status { color:var(--red-text); }
.year-block .yr-amount { font-size:.85em; color:var(--muted); margin-top:5px;
  font-variant-numeric:tabular-nums; }
.year-block .yr-breakdown { display:flex; flex-direction:column; gap:1px; margin-top:4px;
  font-size:.72em; color:var(--muted); font-variant-numeric:tabular-nums;
  border-top:1px solid var(--line); padding-top:4px; }
.year-detail { display:none; background:var(--bg-2); border:1px solid var(--line-strong);
  border-radius:var(--r); padding:16px 18px; margin-bottom:14px; }
.year-detail.open { display:block; }
.year-detail h4 { margin:0 0 12px; font-size:1em; display:flex; align-items:center;
  gap:10px; flex-wrap:wrap; }
.year-detail table { margin:0; }
.year-detail .add-link { display:inline-block; margin-top:12px; font-size:.9em; }

/* ── postmark signature ─────────────────────────────────────────────────── */
.postmark { width:118px; height:118px; }
.postmark svg { width:100%; height:100%; display:block; }
.brand .postmark { width:auto; height:auto; }
@keyframes stamp-in { 0% { opacity:0; transform:scale(1.25) rotate(-9deg); }
  60% { opacity:1; transform:scale(.97) rotate(-7deg); } 100% { transform:scale(1) rotate(-8deg); } }
.masthead .postmark svg { transform:rotate(-8deg); animation:stamp-in .45s ease-out both; }

/* ── focus visibility (a11y) ────────────────────────────────────────────── */
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* ── scrollbars ─────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width:11px; height:11px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--line-strong); border-radius:8px;
  border:3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background:#4a5e76; }

/* ── print: clean black-on-white documents (overrides the dark theme) ────── */
.sig-line { border-bottom:1.5px solid #444; min-width:220px; display:inline-block; height:1.4em; }
.mono { font-family:var(--font-mono); }
.slip { padding:18px 24px; margin:0; break-inside:avoid; page-break-inside:avoid; }
.slip-box { font-family:var(--font-cond); font-size:1.7em; font-weight:700; letter-spacing:.02em; }
.slip-sub { font-size:1.05em; margin:4px 0 12px; }
.slip-line { font-size:1.2em; padding:4px 0; }
.slip-line .mono { font-size:1.35em; font-weight:700; }
.cut { border-top:1px dashed #9aa7b6; text-align:center; color:#8a96a5; font-size:.8em;
  margin-top:16px; padding-top:8px; overflow:hidden; white-space:nowrap; }

/* payment-reminder slips (RECORDATORIO DE PAGO) — 4 to a printed page */
.reminder-slip { padding:14px 26px 18px; border-bottom:1.5px solid var(--line-strong); }
.reminder-slip:last-child { border-bottom:none; }
.rem-head { font-family:"Segoe Script","Brush Script MT","Snell Roundhand",cursive;
  font-size:1.95em; text-align:center; margin-bottom:6px; }
.rem-row { display:flex; align-items:baseline; justify-content:space-between; gap:16px; }
.rem-buzon { font-family:var(--font-cond); font-weight:700; font-size:1.35em; letter-spacing:.01em; }
.rem-num { font-size:1.15em; border-bottom:1.5px solid currentColor; padding:0 .4em; }
.rem-amount { font-family:var(--font-cond); font-weight:700; font-size:1.5em; white-space:nowrap; }
.rem-mes { font-family:var(--font-cond); font-weight:700; font-size:1.12em; margin:6px 0 10px; }
.rem-mes-val { padding:0 .4em; border-bottom:1.5px solid currentColor; }
.rem-fine { font-size:.82em; line-height:1.3; margin:3px 0; color:var(--muted); }

@media print {
  @page { margin:0; }
  .no-print, .nav, .flash { display:none !important; }
  body { background:#fff; font-size:12px; }
  .container { max-width:100%; padding:12mm 12mm; }
  .panel, table, .card { border:none; box-shadow:none; }
  th { position:static; }
  th, td { padding:5px 6px; }
  a { color:inherit; text-decoration:none; }
  .masthead { border-bottom:2px solid #000; }
  .masthead .postmark svg { animation:none; }
  /* force solid black on white so reports print on any (even monochrome) printer */
  * { color:#000 !important; background:#fff !important; box-shadow:none !important; }
  .boxplate { background:#fff !important; border:1px solid #000 !important; }
  .badge { border:1px solid #000 !important; padding:2px 8px; font-weight:700; }
  tbody tr:nth-child(even) td { background:#fff !important; }
  .sig-line { border-bottom:1.5px solid #000 !important; }
  .cut { border-top:1px dashed #000 !important; color:#000 !important; }
  .postmark svg { color:#000 !important; }
  /* reminder slips: exactly 4 per page, never split across a page boundary */
  .reminder-slip { break-inside:avoid; page-break-inside:avoid;
    min-height:60mm; padding:9mm 14mm; border-bottom:1px solid #000; }
  .reminder-slip:nth-of-type(4n) { break-after:page; page-break-after:always; border-bottom:none; }
  .reminder-slip:last-child { border-bottom:none; }
  .rem-fine { color:#000 !important; }
}

/* ── small screens ──────────────────────────────────────────────────────── */
@media (max-width:900px) { th { position:static; } }
@media (max-width:640px) {
  .container { padding:14px 14px 48px; }
  .nav { gap:0; padding:9px 12px 7px; }
  .nav a { padding:7px 9px; font-size:.9em; }
  .nav .brand { margin-right:8px; font-size:1.15em; }
  .nav .navsearch input { width:100%; max-width:none; }
  .navsearch { margin-left:0; width:100%; order:3; margin-top:6px; }
  .masthead { flex-direction:column; align-items:flex-start; gap:12px; }
  .panel { padding:16px 14px; }
  .card .big { font-size:2em; }
  body { font-size:15px; }
  h1 { font-size:1.5em; margin:4px 0 14px; }
  .scaninput { font-size:1.3rem !important; padding:13px 14px !important; }
  .camera-btn { width:100%; text-align:center; font-size:1.05rem; padding:.8rem 1rem; margin-top:10px; }
  .row > * { flex:1 1 100%; min-width:0; }

  /* Scan log: reflow the wide table into stacked cards (labels via CSS vars). */
  #scans { display:block; background:transparent; border:none; box-shadow:none; }
  #scans tbody { display:block; }
  #scans .scan-head { display:none; }
  #scans tr { display:block; background:var(--card); border:1px solid var(--line-strong);
    border-radius:var(--r); box-shadow:var(--shadow-sm); margin-bottom:12px; overflow:visible; }
  #scans tr:nth-child(even) td { background:none; }
  #scans td { display:flex; justify-content:space-between; align-items:center; gap:14px;
    border:none; border-bottom:1px solid var(--line); padding:10px 14px; text-align:right;
    font-size:.95rem; }
  #scans tr td:last-child { border-bottom:none; }
  #scans td::before { font-weight:700; font-size:.72rem; text-transform:uppercase;
    letter-spacing:.04em; color:var(--muted); text-align:left; white-space:nowrap; }
  #scans td:nth-child(1)::before { content:var(--l-time,"Time"); }
  #scans td:nth-child(2)::before { content:var(--l-carrier,"Carrier"); }
  #scans td:nth-child(3)::before { content:var(--l-tracking,"Tracking"); }
  #scans td:nth-child(4)::before { content:var(--l-location,"Location"); }
  #scans td:nth-child(5)::before { content:var(--l-box,"Mailbox"); }
  #scans td:nth-child(3) { font-family:var(--font-mono); word-break:break-all; }
  #scans td.assign-cell { flex-direction:column; align-items:stretch; text-align:left; min-width:0; }
  #scans td.assign-cell::before { margin-bottom:6px; }
  #scans td:last-child { justify-content:flex-end; }
  #scans td:last-child::before { content:none; }
  #scans .btn.small { padding:8px 14px; font-size:.9rem; }
}

/* ── offline / online status banners ────────────────────────────────────── */
.offline-banner { background:var(--red-soft); color:var(--red-text); border-left:4px solid var(--red);
  padding:.7rem 1.1rem; margin-bottom:14px; border-radius:var(--r-sm); font-weight:600; }
.online-banner { background:var(--green-soft); color:var(--green-text); border-left:4px solid var(--green);
  padding:.7rem 1.1rem; margin-bottom:14px; border-radius:var(--r-sm); font-weight:600; }

/* ── offline-queue badge variants ───────────────────────────────────────── */
.badge.pending-sync { background:var(--amber-soft); color:var(--amber-text); border-color:var(--amber-line); }
.badge.syncing-sync { background:var(--accent-dim); color:var(--accent-strong); border-color:#2f567a; }
.badge.sync-fail { background:var(--red-soft); color:var(--red-text); border-color:var(--red-line); }
.badge.sync-dupe { background:var(--amber-soft); color:var(--amber-text); border-color:var(--amber-line); }

/* ── camera ─────────────────────────────────────────────────────────────── */
.camera-btn { margin-top:10px; font-size:.95rem; }
#camera-overlay { display:none; position:fixed; inset:0; background:rgba(4,7,12,.92);
  z-index:200; align-items:center; justify-content:center; }
.camera-wrap { position:relative; width:min(96vw,640px); }
#camera-video { width:100%; border-radius:var(--r); display:block; background:#000; }
.camera-reticle { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:62%; height:28%; border:2.5px solid rgba(225,91,79,.9); border-radius:6px;
  pointer-events:none; box-shadow:0 0 0 4000px rgba(0,0,0,.35); }
.camera-hint { position:absolute; bottom:48px; left:50%; transform:translateX(-50%);
  color:rgba(255,255,255,.85); font-size:.88rem; pointer-events:none;
  text-shadow:0 1px 3px rgba(0,0,0,.8); white-space:nowrap; }
.camera-close { position:absolute; top:10px; right:10px; z-index:1; }

/* ── signature overlay ──────────────────────────────────────────────────── */
.sig-overlay { display:none; position:fixed; inset:0; background:rgba(4,7,12,.7);
  z-index:200; align-items:center; justify-content:center; padding:16px; }
.sig-overlay.open { display:flex; }
.sig-card { background:var(--card); border-radius:var(--r); padding:20px 22px;
  width:min(96vw,560px); box-shadow:var(--shadow); border:1px solid var(--line-strong); }
/* signature is captured as a PNG, so the pad stays white regardless of theme */
.sig-canvas { display:block; width:100%; height:220px; background:#fff;
  border:1px solid var(--line-strong); border-radius:var(--r-sm); touch-action:none;
  cursor:crosshair; }
.pkg-check { width:26px; height:26px; cursor:pointer; accent-color:var(--green); }

/* ── signature viewer popup (read-only, sized for the tablet) ────────────── */
.sigview-card { width:min(96vw,820px); }
#sigview-img { display:block; width:100%; min-height:300px; max-height:70vh;
  object-fit:contain; background:#fff; border:1px solid var(--line-strong);
  border-radius:var(--r-sm); }
.sigview-close { width:100%; font-size:1.1em; padding:14px; }

/* ── reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce) {
  * { animation-duration:.001ms !important; animation-iteration-count:1 !important;
      transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .masthead .postmark svg { transform:rotate(-8deg); }
  a.card:hover, .year-block:hover { transform:none; }
}

/* ---- correcting a package from the list (public/pkgedit.js) ----
   A cell that can be fixed hints at it on hover rather than showing a pencil on
   every row, which would clutter a list of hundreds of packages. */
td.editable { cursor:pointer; position:relative; }
td.editable:hover { background:var(--accent-dim); box-shadow:inset 0 0 0 1px var(--line-strong); }

/* The editor has to fit the cell it replaces. No min-width, border-box sizing
   and inherited type metrics, so opening one never widens the column nor grows
   the row — the rest of the list stays exactly where it was. */
.cell-edit {
  width:100%; max-width:100%; box-sizing:border-box;
  margin:0; padding:0 4px;
  font:inherit; font-size:.9em; line-height:1.5;
  border:1px solid var(--accent); border-radius:3px;
}

/* Mailbox suggestions float above the table rather than pushing the row taller. */
.cell-edit-results {
  position:absolute; z-index:30; left:0; top:100%; min-width:100%;
  display:flex; flex-direction:column; gap:2px; padding:4px;
  background:var(--card); border:1px solid var(--line-strong);
  border-radius:4px; box-shadow:0 6px 18px rgba(0,0,0,.18);
}
.cell-edit-results:empty { display:none; padding:0; border:0; box-shadow:none; }
.cell-edit-results .btn { font-size:.75em; text-align:left; white-space:nowrap; }

@media print { td.editable:hover { background:none; box-shadow:none; } }