/* ══════════════════════════════════════════════════════════════════════════
   UltraFiscal Cloud — design system
   Spruce green + brass, Bricolage Grotesque / Hanken Grotesk / IBM Plex Mono
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Brand — deep spruce greens */
  --brand-950:#0a2c20;
  --brand-900:#0e3b2c;
  --brand-800:#134736;
  --brand-700:#17604a;
  --brand-600:#1c7355;
  --brand-500:#238a67;
  /* Accent — brass / fiscal seal */
  --brass-600:#b07d2b;
  --brass-500:#c7913a;
  --brass-400:#d9ab55;
  --brass-100:#f4e7cc;

  /* Neutrals — warm, green-biased */
  --ink:#152219;
  --ink-2:#37453d;
  --muted:#66746b;
  --faint:#94a09a;
  --line:#e4e9e3;
  --line-2:#d5ddd4;
  --ground:#f3f6f1;
  --surface:#ffffff;
  --surface-2:#eef2eb;

  /* Semantic */
  --success:#1c7a4f;   --success-bg:#e5f1e9;   --success-line:#bfdcc9;
  --warn:#a9781e;      --warn-bg:#f6eeda;       --warn-line:#e6d3a4;
  --danger:#b23a30;    --danger-bg:#f8e7e3;     --danger-line:#eec4bb;
  --info:#1d6a6b;      --info-bg:#e2eeed;       --info-line:#b9d6d4;

  --radius:14px;
  --radius-sm:9px;
  --radius-xs:6px;
  --shadow-sm:0 1px 2px rgba(12,32,22,.05), 0 1px 3px rgba(12,32,22,.05);
  --shadow:0 6px 20px -8px rgba(12,32,22,.16);
  --shadow-lg:0 24px 60px -28px rgba(12,32,22,.35);

  --font-body:"Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display:"Bricolage Grotesque", var(--font-body);
  --font-mono:"IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

* { box-sizing:border-box; }

html, body { height:100%; }

body {
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

::selection { background:var(--brass-100); color:var(--brand-900); }

a { color:var(--brand-700); text-decoration:none; }
a:hover { text-decoration:underline; }

h1, h2, h3 { font-family:var(--font-display); color:var(--ink); letter-spacing:-.015em; margin:0; text-wrap:balance; }
h1 { font-size:1.9rem; font-weight:600; line-height:1.1; }
h2 { font-size:1.15rem; font-weight:600; }
h3 { font-size:1rem; font-weight:600; }
p { margin:0 0 .8rem; }
.muted { color:var(--muted); font-size:.9rem; }

/* ── App shell ──────────────────────────────────────────────────────────── */
.app-shell { min-height:100vh; }

.sidebar {
  position:fixed; inset:0 auto 0 0; width:264px; z-index:40;
  display:flex; flex-direction:column;
  background:linear-gradient(190deg, var(--brand-900) 0%, var(--brand-950) 100%);
  color:#d6e4dc;
  border-right:1px solid rgba(255,255,255,.06);
}

.app-main { margin-left:264px; min-height:100vh; display:flex; flex-direction:column; }
.app-content { padding:38px clamp(20px, 4vw, 52px) 64px; max-width:1180px; width:100%; }

.app-topbar { display:none; }

/* off-canvas toggle */
.nav-toggle-cb { display:none; }
.nav-scrim { display:none; }
.nav-burger { display:none; }

/* ── Brand + navigation ─────────────────────────────────────────────────── */
.brand {
  display:flex; align-items:center; gap:11px;
  padding:22px 22px 20px; margin-bottom:6px;
}
.brand-mark {
  width:38px; height:38px; flex:0 0 38px; border-radius:11px;
  display:grid; place-items:center; color:var(--brand-950);
  background:linear-gradient(160deg, var(--brass-400), var(--brass-600));
  box-shadow:0 4px 12px -4px rgba(199,145,58,.5);
}
.brand-mark svg { width:22px; height:22px; }
.brand-text { font-family:var(--font-display); font-size:1.12rem; font-weight:500; color:#fff; letter-spacing:-.01em; }
.brand-text strong { font-weight:700; }

.nav-groups { display:flex; flex-direction:column; gap:2px; padding:8px 14px; flex:1; overflow-y:auto; }

.nav-link {
  display:flex; align-items:center; gap:12px;
  padding:9px 13px; border-radius:10px;
  color:#b6c9bf; font-size:.925rem; font-weight:500;
  position:relative; transition:background .15s, color .15s;
}
.nav-link:hover { background:rgba(255,255,255,.06); color:#f0f6f2; text-decoration:none; }
.nav-link .ic { width:18px; height:18px; flex:0 0 18px; opacity:.85; }
.nav-link.active {
  background:rgba(255,255,255,.09); color:#fff;
}
.nav-link.active::before {
  content:""; position:absolute; left:-14px; top:50%; transform:translateY(-50%);
  width:4px; height:22px; border-radius:0 4px 4px 0; background:var(--brass-500);
}
.nav-link.active .ic { opacity:1; color:var(--brass-400); }

.nav-divider {
  margin:14px 13px 6px; font-size:.68rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:#6f877b;
}

.nav-user {
  display:flex; align-items:center; gap:10px; justify-content:space-between;
  padding:14px 18px; margin:6px 8px 10px; border-top:1px solid rgba(255,255,255,.08);
}
.nav-user-id { display:flex; align-items:center; gap:10px; min-width:0; }
.nav-avatar {
  width:32px; height:32px; flex:0 0 32px; border-radius:9px; display:grid; place-items:center;
  background:rgba(255,255,255,.1); color:#fff; font-weight:700; font-size:.85rem;
}
.nav-user-email { font-size:.8rem; color:#a9bcb1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nav-signout {
  display:grid; place-items:center; width:32px; height:32px; flex:0 0 32px;
  border:0; border-radius:8px; background:transparent; color:#a9bcb1; cursor:pointer; transition:.15s;
}
.nav-signout:hover { background:rgba(255,255,255,.1); color:#fff; }
.nav-signout .ic { width:17px; height:17px; }

/* ── Company switcher (sidebar) ─────────────────────────────────────────── */
.company-switch { padding:2px 16px 10px; margin:0 6px 4px; border-bottom:1px solid rgba(255,255,255,.08); }
.company-switch-form { margin:0; }
.company-select {
  width:100%; padding:8px 10px; border-radius:9px; cursor:pointer;
  background:rgba(255,255,255,.07); color:#fff; font-size:.9rem; font-weight:600;
  border:1px solid rgba(255,255,255,.12); appearance:none;
}
.company-select:focus { outline:none; border-color:var(--brass-500); box-shadow:0 0 0 3px rgba(199,145,58,.2); }
.company-select option { color:#12261d; }
.company-current {
  display:block; padding:8px 2px; color:#fff; font-size:.95rem; font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.company-new { margin-top:8px; }
.company-new > summary {
  list-style:none; cursor:pointer; color:#a9bcb1; font-size:.78rem; font-weight:600; padding:2px 0;
}
.company-new > summary::-webkit-details-marker { display:none; }
.company-new > summary:hover { color:#fff; }
.company-new-form { display:flex; gap:6px; margin-top:8px; }
.company-new-form input {
  flex:1; min-width:0; padding:7px 9px; border-radius:8px; font-size:.82rem;
  background:rgba(255,255,255,.9); border:1px solid rgba(255,255,255,.15); color:#12261d;
}
.company-new-form button {
  border:0; border-radius:8px; padding:0 12px; cursor:pointer; font-size:.8rem; font-weight:600;
  background:var(--brass-500); color:#2a1c04;
}
.company-new-form button:hover { background:var(--brass-400); }

/* ── Device management (content) ────────────────────────────────────────── */
.panel-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.panel-head h2 { margin:0; }
.panel-more { font-size:.85rem; font-weight:600; color:var(--brand-700); }
.device-list { display:flex; flex-wrap:wrap; gap:10px; margin:6px 0 16px; }
.device-chip {
  display:flex; flex-direction:column; gap:2px; align-items:flex-start;
  padding:10px 16px; border-radius:12px; cursor:pointer; text-align:left;
  background:var(--surface-2); border:1px solid var(--line); transition:.15s;
}
.device-chip:hover { border-color:var(--brand-500); }
.device-chip.sel { border-color:var(--brand-600); background:var(--success-bg); box-shadow:0 0 0 2px rgba(35,138,103,.15); }
.device-chip-name { font-weight:600; font-size:.92rem; color:var(--ink); }
.device-chip-id { font-family:var(--font-mono); font-size:.76rem; color:var(--muted); }
.register-box { margin-top:14px; padding:18px; border:1px dashed var(--line); border-radius:12px; background:var(--surface-2); }
.register-box h3 { margin:0 0 12px; font-size:1rem; }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn-primary, .btn-secondary {
  display:inline-flex; align-items:center; gap:8px; justify-content:center;
  font-family:var(--font-body); font-size:.92rem; font-weight:600;
  padding:10px 18px; border-radius:10px; cursor:pointer; border:1px solid transparent;
  transition:background .15s, box-shadow .15s, transform .05s; text-decoration:none;
}
.btn-primary {
  background:var(--brand-700); color:#fff; box-shadow:0 1px 2px rgba(12,32,22,.15);
}
.btn-primary:hover { background:var(--brand-800); text-decoration:none; box-shadow:var(--shadow); }
.btn-primary:active { transform:translateY(1px); }
.btn-primary:disabled { background:var(--line-2); color:var(--faint); cursor:default; box-shadow:none; }
.btn-secondary {
  background:var(--surface); color:var(--ink); border-color:var(--line-2);
}
.btn-secondary:hover { background:var(--surface-2); text-decoration:none; }
.btn-secondary:disabled { color:var(--faint); cursor:default; }
.btn-link { background:none; border:0; color:var(--danger); cursor:pointer; font-size:.85rem; padding:2px 4px; font-weight:600; }
.btn-link:hover { text-decoration:underline; }
.btn-link.accent { color:var(--brand-700); }

/* ── Cards ──────────────────────────────────────────────────────────────── */
.cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(168px, 1fr)); gap:14px; margin:6px 0 22px; }
.card {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 18px; display:flex; flex-direction:column; gap:5px; box-shadow:var(--shadow-sm);
}
.card .k { font-size:.7rem; text-transform:uppercase; letter-spacing:.09em; color:var(--faint); font-weight:600; }
.card .v { font-family:var(--font-display); font-size:1.32rem; font-weight:600; color:var(--ink); line-height:1.15; font-variant-numeric:tabular-nums; }
.card .v.good { color:var(--success); }
.card .v.bad { color:var(--danger); }

/* ── Panels ─────────────────────────────────────────────────────────────── */
.panel {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px 24px; margin:16px 0; box-shadow:var(--shadow-sm);
}
.panel > h2 { margin-bottom:4px; }
.panel > h2 + .muted, .panel > h2 + p { margin-top:0; }
.panel.ok { border-color:var(--success-line); background:linear-gradient(0deg, var(--success-bg), var(--surface) 60%); }
.panel.err { border-color:var(--danger-line); background:linear-gradient(0deg, var(--danger-bg), var(--surface) 60%); }

/* ── Forms ──────────────────────────────────────────────────────────────── */
.form-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:15px; margin:14px 0 18px; }
label { font-size:.8rem; font-weight:600; color:var(--ink-2); display:flex; flex-direction:column; gap:6px; }
input, select, textarea {
  font-family:var(--font-body); font-size:.95rem; color:var(--ink);
  padding:10px 12px; border:1px solid var(--line-2); border-radius:var(--radius-sm);
  background:var(--surface); transition:border-color .15s, box-shadow .15s; width:100%;
}
input::placeholder { color:var(--faint); }
input:focus, select:focus, textarea:focus {
  outline:none; border-color:var(--brand-500); box-shadow:0 0 0 3px rgba(35,138,103,.14);
}
.picker { display:flex; gap:10px; align-items:center; margin:10px 0; flex-wrap:wrap; }
.picker select, .picker input { width:auto; }
label.check, label.radio { flex-direction:row; align-items:center; gap:8px; font-weight:500; font-size:.9rem; color:var(--ink-2); }
label.check input, label.radio input { width:auto; accent-color:var(--brand-600); }

/* ── Tables ─────────────────────────────────────────────────────────────── */
table.lines { width:100%; border-collapse:collapse; margin:10px 0 4px; font-size:.9rem; }
table.lines thead th {
  text-align:left; font-size:.7rem; text-transform:uppercase; letter-spacing:.07em;
  color:var(--faint); font-weight:700; padding:8px 10px; border-bottom:1px solid var(--line);
}
table.lines td { padding:9px 10px; border-bottom:1px solid var(--line); vertical-align:middle; }
table.lines tbody tr:hover { background:var(--surface-2); }
table.lines tbody tr:last-child td { border-bottom:0; }
table.lines .r, table.lines th.r { text-align:right; font-variant-numeric:tabular-nums; }
table.lines input, table.lines select { padding:7px 9px; font-size:.88rem; }
table.lines input.sm { width:92px; }

.total { text-align:right; font-size:1.05rem; margin-top:12px; font-variant-numeric:tabular-nums; }
.total strong, .card .v { letter-spacing:-.01em; }
.total .warn, span.warn { color:var(--warn); font-weight:600; }
.inv-summary { margin-top:14px; margin-left:auto; width:min(340px, 100%); font-variant-numeric:tabular-nums; }
.inv-summary > div { display:flex; justify-content:space-between; gap:24px; padding:4px 0; font-size:.9rem; color:var(--muted); }
.inv-summary > div strong { color:var(--ink); font-weight:600; }
.inv-summary .grand { border-top:2px solid var(--brand-900); margin-top:4px; padding-top:10px; font-size:1.12rem; color:var(--ink); }
.inv-summary .grand strong { color:var(--brand-800); }

.row-actions { display:flex; gap:14px; align-items:center; }
.row-actions a { color:var(--brand-700); font-size:.85rem; font-weight:600; }

.saved-tag { margin-left:12px; color:var(--success); font-weight:600; font-size:.88rem; }
.quote-note { font-size:.78rem; color:var(--brass-600); margin-top:6px; }

.log {
  background:var(--brand-950); color:#8fd6b6; padding:14px 16px; border-radius:var(--radius-sm);
  font-family:var(--font-mono); font-size:.76rem; line-height:1.7; overflow:auto; max-height:280px;
  border:1px solid rgba(255,255,255,.05);
}
.monitor-note { margin-top:22px; font-size:.8rem; color:var(--faint); font-family:var(--font-mono); }

/* ── Alerts ─────────────────────────────────────────────────────────────── */
.alert { border-radius:var(--radius-sm); padding:13px 16px; margin:14px 0; font-size:.9rem; border:1px solid; }
.alert a { font-weight:600; }
.alert-info { background:var(--info-bg); border-color:var(--info-line); color:#134f50; }
.alert-info a { color:var(--info); }
.alert-success { background:var(--success-bg); border-color:var(--success-line); color:#155c3b; }
.alert-danger { background:var(--danger-bg); border-color:var(--danger-line); color:#8f2c24; }
.alert-danger a { color:var(--danger); }

/* ── Auth (split screen) ────────────────────────────────────────────────── */
.auth-page { display:flex; min-height:100vh; }
.auth-aside {
  flex:1 1 46%; position:relative; overflow:hidden; color:#eaf2ec;
  background:radial-gradient(120% 100% at 0% 0%, var(--brand-700), var(--brand-950));
  padding:56px clamp(36px, 4vw, 68px); display:flex; flex-direction:column;
}
.auth-aside .brand { padding:0; margin:0 0 auto; }
.auth-aside .brand-text { color:#fff; }
.auth-hero { margin:auto 0; }
.auth-hero h1 { color:#fff; font-size:clamp(2rem, 3.4vw, 2.9rem); line-height:1.05; margin-bottom:18px; }
.auth-hero p { color:#b9cdc2; font-size:1.06rem; max-width:34ch; }
.auth-points { list-style:none; padding:0; margin:26px 0 0; display:flex; flex-direction:column; gap:12px; }
.auth-points li { display:flex; align-items:center; gap:11px; color:#cdddd4; font-size:.94rem; }
.auth-points .tick {
  width:22px; height:22px; flex:0 0 22px; border-radius:7px; display:grid; place-items:center;
  background:rgba(216,171,85,.2); color:var(--brass-400); font-size:.7rem;
}
.auth-foot { margin-top:auto; font-size:.8rem; color:#7f978a; padding-top:32px; }

.auth-panel { flex:1 1 54%; display:flex; align-items:center; justify-content:center; padding:40px 24px; background:var(--ground); }
.auth-card { width:100%; max-width:390px; }
.auth-card h1 { font-size:1.7rem; margin-bottom:6px; }
.auth-card > .muted { margin-bottom:22px; }
.auth-card form { display:flex; flex-direction:column; gap:15px; margin:4px 0 18px; }
.auth-card label { font-size:.82rem; }
.auth-card .btn-primary { width:100%; padding:12px; font-size:.98rem; margin-top:4px; }

/* ── Chips / badges ─────────────────────────────────────────────────────── */
.test-badge {
  display:inline-block; margin-top:6px; font-family:var(--font-mono); font-size:.66rem;
  letter-spacing:.1em; background:var(--brass-100); color:var(--brass-600);
  padding:4px 9px; border-radius:6px; font-weight:500;
}

/* ── Printable documents (invoice / quotation) ──────────────────────────── */
.print-root { max-width:820px; margin:0 auto; padding:30px 20px; background:var(--ground); min-height:100vh; }
.invoice-doc { background:#fff; color:#152219; border:1px solid var(--line); border-radius:var(--radius); padding:44px; box-shadow:var(--shadow); }
.inv-head { display:flex; justify-content:space-between; gap:24px; border-bottom:2px solid var(--brand-900); padding-bottom:18px; }
.inv-head h1 { font-size:1.5rem; letter-spacing:.01em; margin-bottom:8px; color:var(--brand-900); }
.inv-head .seller { font-size:1.08rem; font-weight:600; }
.quote-note { font-size:.8rem; }
.inv-meta { text-align:right; font-size:.85rem; }
.inv-meta div { margin-bottom:4px; }
.inv-meta span { color:var(--muted); margin-right:8px; }
.inv-meta strong { font-variant-numeric:tabular-nums; }
.bill-to { margin:20px 0; font-size:.92rem; }
.bill-to span { display:block; color:var(--faint); text-transform:uppercase; font-size:.68rem; letter-spacing:.09em; font-weight:700; margin-bottom:3px; }
.bill-to strong { font-size:1.08rem; }
table.inv-lines { width:100%; border-collapse:collapse; margin:14px 0; font-size:.88rem; }
table.inv-lines th { text-align:left; background:var(--surface-2); padding:9px 10px; border-bottom:1px solid var(--line); font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
table.inv-lines td { padding:9px 10px; border-bottom:1px solid var(--line); }
table.inv-lines .r { text-align:right; font-variant-numeric:tabular-nums; }
table.inv-lines tfoot td { border-top:2px solid var(--brand-900); font-size:1rem; padding-top:12px; }
.inv-foot { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-top:22px; }
.verify span { display:block; color:var(--faint); font-size:.68rem; text-transform:uppercase; letter-spacing:.09em; font-weight:700; }
.verify strong { font-family:var(--font-mono); font-size:.9rem; }
.verify .url { font-family:var(--font-mono); font-size:.72rem; color:var(--brand-700); word-break:break-all; margin-top:8px; }
.verify-facts { display:flex; flex-wrap:wrap; gap:18px 26px; margin-top:12px; }
.verify-facts > div { display:flex; flex-direction:column; }
.verify-facts span { color:var(--faint); font-size:.62rem; text-transform:uppercase; letter-spacing:.08em; font-weight:700; }
.verify-facts strong { font-size:.9rem; font-variant-numeric:tabular-nums; }
.fiscal-note { font-size:.76rem; color:var(--muted); margin-top:12px; }
.qr-wrap { display:flex; flex-direction:column; align-items:center; gap:4px; }
.qr-cap { font-size:.62rem; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
.invoice-doc .qr { width:150px; height:150px; border-radius:8px; }
.print-actions { margin-top:24px; text-align:right; }
.print-actions button {
  background:var(--brand-700); color:#fff; border:0; border-radius:10px; padding:11px 22px;
  cursor:pointer; font-family:var(--font-body); font-weight:600; font-size:.92rem;
}
.print-actions button:hover { background:var(--brand-800); }
.print-actions { display:flex; gap:12px; justify-content:flex-end; }
.pa-btn {
  display:inline-flex; align-items:center; background:var(--surface-2); color:var(--brand-800);
  border:1px solid var(--line); border-radius:10px; padding:11px 22px; font-weight:600; font-size:.92rem;
}
.pa-btn:hover { background:#e6ece4; text-decoration:none; }

/* invoice header: logo + seller details */
.seller-block { display:flex; gap:16px; align-items:flex-start; }
.inv-logo { width:72px; height:72px; object-fit:contain; border-radius:8px; }
.seller-line { font-size:.82rem; color:var(--muted); margin-top:2px; }
.seller-line.strong { color:var(--ink); font-weight:600; margin-top:4px; }
.inv-title-meta { text-align:right; flex:0 0 auto; }
.inv-terms { margin-top:20px; padding-top:14px; border-top:1px solid var(--line); font-size:.82rem; }
.inv-terms div { margin-bottom:4px; }

/* ── Modal ──────────────────────────────────────────────────────────────── */
.modal-overlay {
  position:fixed; inset:0; z-index:200; background:rgba(12,32,22,.5);
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.modal {
  background:var(--surface); border-radius:16px; box-shadow:0 30px 70px -20px rgba(0,0,0,.5);
  width:min(560px, 100%); max-height:90vh; overflow-y:auto; padding:26px;
}
.modal h3 { margin:0 0 16px; font-family:var(--font-display); font-size:1.2rem; }
.modal label { display:block; margin-bottom:12px; font-size:.85rem; font-weight:600; color:var(--ink-2, var(--ink)); }
.modal input, .modal textarea { margin-top:5px; }

/* ── Invoice builder (two-column with sticky summary) ───────────────────── */
.inv-builder { display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:22px; align-items:start; }
.inv-main { min-width:0; display:flex; flex-direction:column; gap:18px; }
.inv-main .panel { margin:0; }
.inv-aside { position:sticky; top:24px; }
.line-editor { overflow-x:auto; }
.credit-fields { margin-top:10px; }

.seg { display:inline-flex; background:var(--surface-2); border:1px solid var(--line); border-radius:10px; padding:3px; gap:2px; }
.seg-btn { border:0; background:transparent; padding:6px 15px; border-radius:8px; cursor:pointer; font-size:.85rem; font-weight:600; color:var(--muted); transition:.15s; }
.seg-btn:hover { color:var(--ink); }
.seg-btn.on { background:var(--surface); color:var(--brand-800); box-shadow:var(--shadow-sm); }

.summary-card { background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); padding:20px; }
.sc-head { font-family:var(--font-display); font-weight:600; font-size:1.02rem; margin-bottom:14px; }
.sc-rows { display:flex; flex-direction:column; gap:8px; font-variant-numeric:tabular-nums; }
.sc-rows > div, .sc-tender > div { display:flex; justify-content:space-between; gap:16px; font-size:.9rem; color:var(--muted); }
.sc-rows strong, .sc-tender strong { color:var(--ink); font-weight:600; }
.sc-total { display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin:14px 0; padding-top:14px; border-top:2px solid var(--brand-900); }
.sc-total span { font-weight:600; color:var(--ink); }
.sc-total strong { font-family:var(--font-display); font-size:1.5rem; color:var(--brand-800); letter-spacing:-.02em; }
.sc-tender { display:flex; flex-direction:column; gap:8px; padding-top:12px; border-top:1px solid var(--line); }
.sc-balance.ok strong { color:var(--success); }
.sc-balance.due strong { color:var(--danger); }
.sc-balance.over strong { color:var(--warn); }
.sc-submit { width:100%; justify-content:center; margin-top:16px; padding:13px; font-size:.95rem; }
.sc-hint { margin:10px 0 0; font-size:.82rem; color:var(--warn); text-align:center; }
.sc-note { margin:12px 0 0; font-size:.78rem; color:var(--muted); text-align:center; }
.sc-saved { margin:10px 0 0; font-size:.85rem; font-weight:600; color:var(--success); text-align:center; }

@media (max-width: 960px) {
  .inv-builder { grid-template-columns:1fr; }
  .inv-aside { position:static; }
}

/* ── HS-code lookup ─────────────────────────────────────────────────────── */
.hs-cell { display:flex; gap:4px; align-items:center; }
.hs-cell input { flex:1; min-width:0; }
.hs-find {
  flex:0 0 auto; border:1px solid var(--line); background:var(--surface-2); border-radius:8px;
  padding:6px 8px; cursor:pointer; font-size:.85rem; line-height:1;
}
.hs-find:hover { background:#e6ece4; }
.hs-search { width:100%; margin-bottom:10px; }
.hs-results { max-height:340px; overflow-y:auto; display:flex; flex-direction:column; gap:2px; }
.hs-row {
  display:flex; gap:12px; align-items:baseline; text-align:left; width:100%;
  padding:8px 10px; border:0; background:transparent; border-radius:8px; cursor:pointer;
}
.hs-row:hover { background:var(--surface-2); }
.hs-code { font-family:var(--font-mono); font-size:.82rem; color:var(--brand-700); font-weight:600; flex:0 0 76px; }
.hs-desc { font-size:.86rem; color:var(--ink); }

/* ── Company settings ───────────────────────────────────────────────────── */
.logo-row { display:flex; gap:22px; align-items:center; flex-wrap:wrap; }
.logo-preview { width:120px; height:120px; object-fit:contain; border:1px solid var(--line); border-radius:12px; background:var(--surface-2); padding:8px; }
.logo-empty {
  width:120px; height:120px; display:grid; place-items:center; border:1px dashed var(--line);
  border-radius:12px; color:var(--faint); font-size:.82rem; background:var(--surface-2);
}
.logo-actions { display:flex; flex-direction:column; gap:6px; }
.save-bar { display:flex; align-items:center; gap:16px; margin-top:6px; }
.save-msg { font-size:.88rem; font-weight:600; }
.save-msg.ok { color:var(--success); }
.save-msg.bad { color:var(--danger); }
.api-key { font-family:var(--font-mono); font-size:.82rem; background:var(--brand-950); color:#8fd6b6; padding:12px 14px; border-radius:8px; margin:8px 0 0; overflow-x:auto; user-select:all; }
code { font-family:var(--font-mono); font-size:.86em; background:var(--surface-2); padding:1px 5px; border-radius:5px; }
.days-row { display:flex; flex-wrap:wrap; gap:8px 16px; margin:8px 0 2px; }

/* Two-step verification */
.totp-setup { display:flex; gap:20px; align-items:center; flex-wrap:wrap; margin:10px 0 6px; }
.totp-qr { border:1px solid var(--border); border-radius:10px; background:#fff; padding:8px; }
.recovery-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px 16px; margin:12px 0 16px; max-width:360px; }
.recovery-grid code { font-size:.95rem; letter-spacing:.04em; text-align:center; padding:6px 8px; user-select:all; }
.muted .good, span.good { color:var(--success); }

@media print {
  .no-print { display:none !important; }
  .print-root { padding:0; background:#fff; }
  .invoice-doc { border:0; box-shadow:none; padding:0; }
}

/* ── Blazor error UI ────────────────────────────────────────────────────── */
#blazor-error-ui {
  display:none; position:fixed; bottom:0; left:0; right:0; z-index:100;
  background:var(--ink); color:#fff; padding:12px 20px; font-size:.88rem;
  box-shadow:0 -4px 20px rgba(0,0,0,.25);
}
#blazor-error-ui .reload, #blazor-error-ui .dismiss { color:var(--brass-400); margin-left:14px; cursor:pointer; }

/* ── Focus visibility ───────────────────────────────────────────────────── */
:focus-visible { outline:2px solid var(--brand-500); outline-offset:2px; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .sidebar { transform:translateX(-100%); transition:transform .22s ease; box-shadow:var(--shadow-lg); }
  .app-main { margin-left:0; }
  .app-topbar {
    display:flex; align-items:center; gap:14px; position:sticky; top:0; z-index:30;
    height:58px; padding:0 18px; background:var(--surface); border-bottom:1px solid var(--line);
  }
  .topbar-brand { font-family:var(--font-display); font-weight:600; color:var(--ink); }
  .topbar-brand span { color:var(--brand-700); }
  .nav-burger { display:flex; flex-direction:column; gap:4px; cursor:pointer; padding:6px; }
  .nav-burger span { width:22px; height:2px; background:var(--ink); border-radius:2px; }
  .nav-toggle-cb:checked ~ .sidebar { transform:translateX(0); }
  .nav-toggle-cb:checked ~ .nav-scrim {
    display:block; position:fixed; inset:0; z-index:35; background:rgba(12,32,22,.4);
  }
  .app-content { padding:24px 18px 56px; }
  .auth-aside { display:none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition:none !important; }
}

/* ── Status pills (on-prem fleet) ───────────────────────────────────────────
   Small inline state chips. Colours reuse the alert palette so a pill and an
   alert reporting the same condition look like the same thing.              */
.pill-ok, .pill-warn, .pill-danger {
  display:inline-block; padding:1px 8px; border-radius:999px;
  font-size:.78rem; font-weight:600; line-height:1.6; white-space:nowrap;
  border:1px solid transparent;
}
.pill-ok     { background:var(--success-bg); border-color:var(--success-line); color:#155c3b; }
.pill-warn   { background:var(--warn-bg);    border-color:var(--warn-line);    color:#7a5612; }
.pill-danger { background:var(--danger-bg);  border-color:var(--danger-line);  color:#8f2c24; }
/* Branch picker in the on-prem fleet table — needs a usable width in a tight column. */
.branch-pick { min-width:9.5rem; }

/* Chart canvases on the on-prem reports. A fixed height is required: Chart.js with
   maintainAspectRatio:false grows to fill its parent, and an unconstrained parent
   makes it grow without bound on every resize. */
.chart-wrap { position:relative; height:280px; margin:16px 0 4px; }

/* One line per currency. Stacked rather than run together, so nobody reads two
   currencies as one figure. */
.money-line { display:block; white-space:nowrap; line-height:1.45; }
.money-line + .money-line { margin-top:2px; }

/* Supporting line under a card's headline figure — the context that stops a
   number being read alone (how many receipts made it, what it averages). */
.card .foot { font-size:.72rem; color:var(--faint); line-height:1.35; }

/* Chart grid, for panels carrying more than one chart. */
.chart-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:18px; }
.chart-grid .chart-wrap { margin:4px 0; }

/* Keep timestamps and short codes on one line in dense tables. */
.lines td.nowrap, .lines th.nowrap { white-space:nowrap; }

/* ── Chart palette ────────────────────────────────────────────────────────
   Charts get their own colours rather than the page's. The UI palette is
   deliberately muted and earthy, which is right for chrome and wrong for a
   chart: --success and --info sit close enough in hue that two series drawn
   in them are genuinely hard to tell apart, which is the one thing a chart
   must never be.

   These are saturated and far apart in hue, and the first three stay
   distinguishable under the common forms of colour blindness — green/blue/
   amber rather than green/red. */
:root {
  --chart-usd:#10B981;   /* emerald  */
  --chart-zwg:#2563EB;   /* blue     */
  --chart-zar:#F59E0B;   /* amber    */
  --chart-alt:#8B5CF6;   /* violet   */

  --chart-vat:#F43F5E;   /* rose — the VAT line, which must read over the bars */

  /* Categorical series, in order. Hues spread around the wheel so adjacent
     slices never blur into one another. */
  --chart-c1:#2563EB;  --chart-c2:#10B981;  --chart-c3:#F59E0B;
  --chart-c4:#8B5CF6;  --chart-c5:#F43F5E;  --chart-c6:#06B6D4;
  --chart-c7:#84CC16;  --chart-c8:#EC4899;

  /* Fleet health: good / needs watching / bad. */
  --chart-ok:#10B981;  --chart-watch:#F59E0B;  --chart-bad:#E11D48;

  --chart-grid:#dfe5df;
  --chart-ink:#152219;
}

/* Build stamps and hashes: monospace keeps them scannable and stops a long one
   stretching its column. */
.mono { font-family:var(--font-mono); font-size:.8rem; word-break:break-all; }

/* A total row's label should sit under the column it labels. Browsers centre th
   by default, which left "Classified total USD" floating away from the names it
   totals. The .r class still wins for the numeric cells. */
table.lines tfoot th { text-align:left; }

/* A till heard from in the last hour but not the last few minutes. Its own
   colour because it is neither healthy nor failing. */
:root { --chart-late:#F97316; }