/* ── Reset & Base ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #f5f7f6;
  --panel-bg: #ffffff;
  --panel-border: #dde5e2;
  --divider: #ebf0ee;
  --text: #12201d;
  --text-muted: #4a5160;
  --text-light: #5d6573;
  --accent: #0f766e;
  --accent-hover: #0b5e58;
  --accent-soft: #e3f4ef;
  /* Two second colours, used sparingly and only for their one meaning:
     mint (from the mark) for "make something new", violet for paying the
     state and for checks that are information, not a warning. */
  --mint: #7be0c5;
  --mint-soft: #ddf6ef;
  --mint-ink: #0b5e58;
  --info: #6a4cd8;
  --info-soft: #efebfd;
  --info-ink: #4f36b8;
  --sidebar-w: 236px;
  /* Status colours as one set: a solid for marks and bars, a soft ground and
     an ink for badges. Anything status-coloured uses these, so a badge, a
     limit bar and a grid square can never drift apart. */
  --danger: #d23f34;
  --danger-soft: #fdecea;
  --danger-ink: #b42318;
  --warn: #d08a00;
  --warn-soft: #fff3dc;
  --warn-ink: #8a5300;
  --success: #1e9e5c;
  --success-soft: #e6f4ea;
  --success-ink: #157f3c;
  --neutral-soft: #edeff3;
  --input-bg: #ffffff;
  --input-border: #d5d9e0;
  --input-focus: #0f766e;
  --radius: 10px;
  --radius-sm: 6px;
  --radius-lg: 12px;
  --radius-pill: 999px;
  --shadow-sm: none;
  --shadow-md: 0 4px 12px rgba(16,24,40,0.10), 0 2px 4px rgba(16,24,40,0.06);
  --shadow-paper: 0 8px 48px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.08);
  --font: "IBM Plex Sans", system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, 'SF Mono', Menlo, monospace;
  --on-accent: #ffffff;
}

/* Mobile Chrome and Safari enlarge long runs of text inside blocks wider than
   the screen. The invoice is always 794px wide, so on a phone its longest line
   ("Slovima: …") was inflated to about 20px, on screen and in the PDF. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

html, body {
  height: 100%;
  font-family: var(--font);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

/* ── Shell: side menu, content, bottom bar ─────────────────────
   Desktop: the menu is a column beside the views. Under 820px it becomes a
   drawer opened from "Više", and the bottom bar carries the four views used
   most, with "+" for a new invoice in the middle. */
#app { flex-direction: row; }
#appSidebar {
  width: var(--sidebar-w);
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 18px 12px 14px;
  background: var(--panel-bg);
  border-right: 1px solid var(--panel-border);
  overflow-y: auto;
  z-index: 100;
}
#appMain {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.app-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 8px;
  color: var(--text);
}
.brand-word {
  font-family: "Manrope", var(--font);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.03em;
  line-height: 1;
}

.side-nav, .side-foot { display: flex; flex-direction: column; gap: 2px; }
.side-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--panel-border); gap: 10px; }
.nav-group {
  padding: 14px 10px 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-light);
}
.side-nav .nav-tab, .side-foot .nav-tab {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--text-muted);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.side-nav .nav-tab span:first-of-type, .side-foot .nav-tab span { flex: 1; }
.side-nav .nav-tab:hover, .side-foot .nav-tab:hover { background: var(--neutral-soft); color: var(--text); }
.side-nav .nav-tab.active, .side-foot .nav-tab.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.nav-ico { flex: none; }
.nav-count {
  font-size: 12px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 10px;
}
.nav-count--danger { background: var(--danger-soft); color: var(--danger-ink); }
.nav-count--warn { background: var(--warn-soft); color: var(--warn-ink); }

.side-toggles { display: flex; gap: 8px; padding: 0 4px; flex-wrap: wrap; }
.side-user { display: flex; align-items: center; gap: 6px; padding: 0 4px 0 10px; }
.user-email {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  color: var(--text-light);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bottom-nav, .nav-backdrop { display: none; }

/* Opened from the home screen there is no browser bar above the page, so the
   content keeps clear of the status bar and the notch. */
@media (display-mode: standalone) {
  #appMain { padding-top: env(safe-area-inset-top); }
  #app { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
  #view-invoice .inv-toolbar { top: env(safe-area-inset-top); }
}

/* A laptop's 1024–1180px leaves the invoice table a few columns too wide;
   a narrower menu and gutters give it back. */
@media (max-width: 1180px) and (min-width: 821px) {
  :root { --sidebar-w: 212px; }
  .view-inner { padding-left: 24px; padding-right: 24px; }
  #appMain .data-table td, #appMain .data-table th { padding-left: 8px; padding-right: 8px; }
}

@media (max-width: 820px) {
  #app { display: block; height: auto; min-height: 100vh; overflow: visible; padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  #appMain { overflow: visible; }
  #appSidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    padding-top: calc(18px + env(safe-area-inset-top));
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
    width: min(300px, 84vw);
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    z-index: 950;
    box-shadow: none;
  }
  #app.nav-open #appSidebar { transform: none; box-shadow: var(--shadow-md); }
  .nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 940;
    background: rgba(10,12,20,0.45);
  }
  .bottom-nav {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: center;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    background: var(--panel-bg);
    border-top: 1px solid var(--panel-border);
  }
  .bottom-nav .nav-tab, .bottom-nav .nav-more {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-height: 48px;
    justify-content: center;
    border: 0;
    background: none;
    color: var(--text-muted);
    font-family: var(--font);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
  }
  .bottom-nav .nav-tab.active { color: var(--accent); font-weight: 600; }
  .bottom-nav .nav-tab--new {
    justify-self: center;
    width: 52px;
    height: 52px;
    min-height: 0;
    border-radius: 26px;
    background: var(--accent);
    color: var(--on-accent);
  }
  .bottom-nav .nav-tab--new.active { color: var(--on-accent); background: var(--accent-hover); }
}

/* ── Surface ────────────────────────────────────────────────────────
   The inset box used for form controls, filter bars and list rows. It was
   redeclared ad hoc in eight places; anything boxed should compose this. */
.surface {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
}

/* ── Form Template Picker ─────────────────────────────────────── */
.form-tmpl-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--panel-border);
  background: var(--panel-bg);
  flex-shrink: 0;
}
.form-tmpl-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

.tmpl-tabs {
  display: flex;
  background: var(--neutral-soft);
  border-radius: var(--radius-pill);
  padding: 3px;
  gap: 2px;
}

.tmpl-tab {
  background: none;
  border: none;
  color: var(--text-light);
  font-size: 12.5px;
  font-weight: 500;
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all 0.15s;
  font-family: var(--font);
}
.tmpl-tab:hover { color: var(--text); }
.tmpl-tab.active {
  background: var(--panel-bg);
  color: var(--accent);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(18, 32, 29, 0.14), 0 0 0 1px var(--panel-border);
}

.hdr-divider { width: 1px; height: 22px; background: var(--panel-border); margin: 0 2px; }

/* ── Language Toggle ──────────────────────────────────────────── */
.lang-toggle {
  display: flex;
  background: var(--neutral-soft);
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}
.lang-btn {
  background: none;
  border: none;
  color: var(--text-light);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  letter-spacing: 0.5px;
  font-family: var(--font);
  transition: all 0.15s;
}
.lang-btn:hover { color: var(--text); }
.lang-btn.active { background: var(--panel-bg); color: var(--text); box-shadow: 0 1px 2px rgba(20,22,28,0.12); }

/* ── Buttons ──────────────────────────────────────────────────── */
button { font-family: var(--font); cursor: pointer; }

.btn-ghost {
  background: none;
  border: 1px solid transparent;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: 8px;
  transition: all 0.15s;
}
.btn-ghost:hover { color: var(--text); background: var(--neutral-soft); }
.btn-ghost--danger { color: var(--danger-ink); }
.btn-ghost--danger:hover { color: var(--danger-ink); background: var(--danger-soft); }

.btn-secondary {
  background: var(--panel-bg);
  border: 1px solid var(--input-border);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s;
}
.btn-secondary:hover { background: var(--neutral-soft); }

.btn-primary {
  background: var(--accent);
  border: none;
  color: var(--on-accent);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 7px;
  transition: all 0.15s;
  letter-spacing: -0.1px;
}
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.btn-xs {
  background: var(--panel-bg);
  border: 1px solid var(--input-border);
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 500;
  padding: 5px 11px;
  border-radius: 7px;
  transition: all 0.12s;
}
.btn-xs:hover { border-color: var(--accent); color: var(--accent); }
.btn-xs--accent { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
.btn-xs--accent:hover { background: var(--accent); color: var(--on-accent); }

/* ── App Body ─────────────────────────────────────────────────── */
#appBody {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* ── Form Panel ───────────────────────────────────────────────── */
#formPanel {
  width: 440px;
  flex-shrink: 0;
  min-height: 0;
  background: var(--bg);
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-right: 1px solid var(--panel-border);
  /* Sections are numbered as steps; fields pair up when the panel is narrow. */
  counter-reset: fsec;
  container: form / inline-size;
}
#formPanel::-webkit-scrollbar { width: 5px; }
#formPanel::-webkit-scrollbar-track { background: transparent; }
#formPanel::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }

/* ── Form Sections ────────────────────────────────────────────── */
.fsec {
  background: var(--panel-bg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--panel-border);
  overflow: hidden;
  flex-shrink: 0;
  counter-increment: fsec;
}

.fsec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--divider);
  background: var(--panel-bg);
}
.fsec.collapsed .fsec-head { border-bottom: none; }
.fsec.collapsed .fsec-body { display: none; }

.fsec-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.fsec-title h3 { font-size: 15px; font-weight: 600; color: var(--text); }
.fsec-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: var(--text);
  color: var(--panel-bg);
  font-size: 12px;
  font-weight: 600;
}
.fsec-dot::before { content: counter(fsec); }

.fsec-actions { display: flex; align-items: center; gap: 6px; }

.collapse-btn {
  background: none;
  border: none;
  color: var(--text-light);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.15s;
}
.collapse-btn:hover { background: var(--input-bg); color: var(--text-muted); }
.fsec.collapsed .collapse-btn svg { transform: rotate(-90deg); }
.collapse-btn svg { transition: transform 0.2s; }

.fsec-body { padding: 16px 18px 18px; }

@container form (max-width: 460px) {
  #formPanel .fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #formPanel .ff-wide { grid-column: 1 / -1; }
}

/* ── Form Grid ────────────────────────────────────────────────── */
.fgrid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.fgrid--2 { grid-template-columns: 1fr 1fr; }
.fgrid + .fgrid { margin-top: 12px; }

/* Narrow dialogs stack rather than squeezing three controls into 380px. */
@media (max-width: 560px) {
  .fgrid, .fgrid--2 { grid-template-columns: 1fr; }
}

/* min-width: 0 lets a column shrink below a date input's intrinsic width;
   without it two date fields side by side pushed the grid past its panel. */
.ff { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ff input:not([type="checkbox"]):not([type="radio"]), .ff select { min-width: 0; width: 100%; }
.ff-full { grid-column: 1 / -1; }
.ff-2 { grid-column: span 1; }
.ff-3 { grid-column: span 1; }
.ff-wide { grid-column: span 2; }

.ff label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
/* A switch is a label too, but it carries a sentence, not a field caption. */
.ff label.toggle {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  text-transform: none;
  letter-spacing: normal;
}

.ff input, .ff select, .ff textarea {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  font-size: 13px;
  color: var(--text);
  font-family: var(--font);
  transition: border-color 0.15s, box-shadow 0.15s;
  width: 100%;
}
.ff input:focus, .ff select:focus, .ff textarea:focus {
  outline: none;
  border-color: var(--input-focus);
  box-shadow: 0 0 0 3px rgba(15,118,110,0.12);
  background: white;
}
.ff input::placeholder { color: var(--text-light); }
.ff-hint { font-size: 11px; color: var(--text-light); line-height: 1.4; }
.ff select { cursor: pointer; }
.ff textarea { resize: vertical; line-height: 1.5; }

/* ── Items Table ──────────────────────────────────────────────── */
#itemsList { display: flex; flex-direction: column; gap: 2px; }

.item-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 0;
  border-bottom: 1px solid var(--panel-border);
}
.item-row:last-child { border-bottom: none; }

/* Top row: full-width description + remove button */
.item-top-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.item-top-row .item-desc { flex: 1; }

/* Bottom row: qty / price / total labels + inputs */
.item-bottom-row {
  display: flex;
  gap: 12px;
  align-items: flex-end;
}
.item-num-grp {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.item-num-grp--total { margin-left: auto; }
.item-num-lbl {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.item-num-grp input[type="number"] { width: 80px; text-align: right; }

.item-row input {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  font-size: 13px;
  color: var(--text);
  font-family: var(--font);
  width: 100%;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.item-row input:focus {
  outline: none;
  border-color: var(--input-focus);
  box-shadow: 0 0 0 3px rgba(15,118,110,0.12);
  background: white;
}
.item-row input::placeholder { color: var(--text-light); }

.item-total-display {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  text-align: right;
  padding: 6px 0;
  min-width: 80px;
}

.item-rm {
  background: none;
  border: none;
  color: var(--text-light);
  width: 26px;
  height: 26px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.12s;
  flex-shrink: 0;
  font-size: 16px;
  line-height: 1;
}
.item-rm:hover { background: #fee2e2; color: var(--danger); }

.btn-add-item {
  display: flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: 1.5px dashed var(--input-border);
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  width: 100%;
  margin-top: 8px;
  transition: all 0.15s;
}
.btn-add-item:hover { border-color: var(--accent); color: var(--accent); background: rgba(15,118,110,0.04); }
.add-item-row { display: flex; gap: 8px; }
.add-item-row .btn-add-item { flex: 1; }
.catalog-pick { cursor: pointer; font-family: var(--font); appearance: auto; }

.totals-block {
  margin-top: 14px;
  border-top: 1px solid var(--panel-border);
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.total-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--text-muted);
}
.total-row span:last-child { font-weight: 500; color: var(--text); }
.total-row--grand {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.total-row--grand span { color: var(--text) !important; }

/* ── Work Specification (form) ────────────────────────────────── */
.spec-cols-hdr {
  display: grid;
  grid-template-columns: 1fr 80px 28px;
  gap: 8px;
  padding: 0 4px 6px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.spec-cols-hdr span:nth-child(2) { text-align: right; }
#specsList { display: flex; flex-direction: column; gap: 6px; }
.spec-row {
  display: grid;
  grid-template-columns: 1fr 80px 28px;
  gap: 8px;
  align-items: center;
}
.spec-row .spec-qty { text-align: right; }
.spec-row input {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  font-size: 13px;
  color: var(--text);
  font-family: var(--font);
  width: 100%;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.spec-row input:focus {
  outline: none;
  border-color: var(--input-focus);
  box-shadow: 0 0 0 3px rgba(15,118,110,0.12);
  background: white;
}
.spec-row input::placeholder { color: var(--text-light); }
.spec-rm { font-size: 16px; }

/* ── Signature Pad (form) ─────────────────────────────────────── */
.btn-clear-sig {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid #fca5a5;
  background: none;
  color: #ef4444;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  font-family: var(--font);
}
.btn-clear-sig:hover { background: #fef2f2; }

.sig-pad-wrap {
  background: #f8f9fb;
  border: 1.5px dashed #d0d7e2;
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: crosshair;
  position: relative;
}
#sigCanvas {
  display: block;
  width: 100%;
  height: 110px;
  touch-action: none;
  cursor: crosshair;
}
.sig-hint {
  font-size: 11px;
  color: #bbb;
  text-align: center;
  margin: 6px 0 0;
}

/* ── Preview Panel ────────────────────────────────────────────── */
#previewPanel {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #e4e7f0;
}

.preview-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 20px;
  background: #dde1eb;
  border-bottom: 1px solid #ccd0de;
  flex-shrink: 0;
}
.preview-label { font-size: 12px; font-weight: 600; color: #7b859a; text-transform: uppercase; letter-spacing: 0.5px; }
.zoom-ctrl { display: flex; align-items: center; gap: 4px; }
.zoom-btn {
  background: white;
  border: 1px solid #ccd0de;
  color: var(--text-muted);
  width: 26px;
  height: 26px;
  border-radius: 4px;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.12s;
  line-height: 1;
}
.zoom-btn:hover { background: var(--accent); color: white; border-color: var(--accent); }
.zoom-fit { font-size: 11px; width: auto; padding: 0 8px; font-weight: 600; }
#zoomDisplay { font-size: 12px; font-weight: 600; color: var(--text-muted); min-width: 36px; text-align: center; }

#previewOuter {
  flex: 1;
  overflow: auto;
  display: flex;
  justify-content: center;
  padding: 36px 24px;
}
#previewOuter::-webkit-scrollbar { width: 7px; height: 7px; }
#previewOuter::-webkit-scrollbar-track { background: transparent; }
#previewOuter::-webkit-scrollbar-thumb { background: #b8beca; border-radius: 4px; }

#previewWrap {
  position: relative;
  flex-shrink: 0;
}

#invoicePreview {
  width: 794px;
  min-height: 1123px;
  background: white;
  transform-origin: top center;
  box-shadow: var(--shadow-paper);
}

/* The same page outside the editor: the read-only view of a saved invoice,
   the page a client opens by link, and the off-screen copy a PDF is
   rasterised from. */
#invoiceView, #shareInvoice, #pdfStage {
  width: 794px;
  min-height: 1123px;
  background: #fff;
}
#invoiceView, #shareInvoice { transform-origin: top left; box-shadow: var(--shadow-paper); }
#pdfStage { position: fixed; left: -10000px; top: 0; }

/* ══════════════════════════════════════════════════════════════
   INVOICE TEMPLATE STYLES
   ══════════════════════════════════════════════════════════════ */

/* ── Shared Invoice Base ─────────────────────────────────────── */
.invoice {
  font-family: var(--font);
  color: #1a1d2e;
  position: relative;
}

/* ── Shared: logo ────────────────────────────────────────────
   Stored at twice the printed size. The modern and corporate headers are
   dark, so the logo sits on its own white plate there; a dark logo would
   vanish otherwise. */
.inv-logo { display: block; max-width: 200px; max-height: 56px; margin-bottom: 10px; object-fit: contain; }
.invoice.template-modern .inv-logo,
.invoice.template-corporate .inv-logo { background: #fff; padding: 6px 8px; border-radius: 6px; }
.invoice.fit-2 .inv-logo { max-height: 46px; margin-bottom: 8px; }
.invoice.fit-3 .inv-logo { max-height: 38px; margin-bottom: 6px; }

/* ── Shared: storno stamp ──────────────────────────────────────
   Laid over the page rather than in the flow, so a cancelled invoice keeps
   exactly the layout it was issued with. The page ignores the theme. */
.inv-stamp {
  position: absolute;
  top: 300px;
  left: 50%;
  transform: translateX(-50%) rotate(-14deg);
  z-index: 2;
  padding: 10px 28px;
  border: 4px solid rgba(200, 30, 30, 0.75);
  border-radius: 8px;
  color: rgba(200, 30, 30, 0.8);
  font-size: 44px;
  font-weight: 800;
  letter-spacing: 6px;
  text-align: center;
  line-height: 1.1;
  pointer-events: none;
}
.inv-stamp span { display: block; font-size: 14px; letter-spacing: 1px; font-weight: 700; }

/* ── Shared: VAT status line ─────────────────────────────────── */
.inv-vat-line {
  margin-top: 5px;
  font-weight: 700;
  font-style: italic;
}

/* ─── MODERN TEMPLATE ──────────────────────────────────────── */
.invoice.template-modern .inv-hdr {
  background: #141926;
  padding: 40px 48px 36px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.invoice.template-modern .inv-co-name {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.5px;
  line-height: 1.2;
}
.invoice.template-modern .inv-co-sub {
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  margin-top: 4px;
  font-weight: 400;
}
.invoice.template-modern .inv-hdr-right { text-align: right; }
.invoice.template-modern .inv-title-word {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,0.45);
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.invoice.template-modern .inv-number-val {
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -1px;
}
.invoice.template-modern .inv-accent-bar {
  height: 4px;
  background: #2b55d4;
}
.invoice.template-modern .inv-meta {
  background: #f6f8fc;
  border-bottom: 1px solid #e7ebf3;
  padding: 18px 48px;
  display: flex;
  gap: 40px;
}
.invoice.template-modern .inv-meta-k {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #2b55d4;
  margin-bottom: 4px;
}
.invoice.template-modern .inv-meta-v {
  font-size: 13.5px;
  font-weight: 600;
  color: #141926;
}
.invoice.template-modern .inv-parties {
  padding: 36px 48px;
  display: flex;
  gap: 48px;
}
.invoice.template-modern .inv-party-tag {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: #2b55d4;
  margin-bottom: 12px;
}
.invoice.template-modern .inv-party-name {
  font-size: 15px;
  font-weight: 700;
  color: #141926;
  margin-bottom: 6px;
  line-height: 1.3;
}
.invoice.template-modern .inv-party-line {
  font-size: 13px;
  color: #4b5675;
  line-height: 1.7;
}
.invoice.template-modern .inv-tbl-wrap { padding: 0 48px; }
.invoice.template-modern .inv-tbl {
  width: 100%;
  border-collapse: collapse;
}
.invoice.template-modern .inv-tbl thead tr {
  background: #141926;
}
.invoice.template-modern .inv-tbl thead th {
  padding: 12px 16px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: rgba(255,255,255,0.75);
  text-align: left;
}
.invoice.template-modern .inv-tbl thead th.num-col { text-align: right; }
.invoice.template-modern .inv-tbl tbody td {
  padding: 13px 16px;
  font-size: 13.5px;
  color: #2d3555;
  border-bottom: 1px solid #eceef6;
  vertical-align: top;
}
.invoice.template-modern .inv-tbl tbody td.num-col { text-align: right; font-weight: 500; }
.invoice.template-modern .inv-tbl tbody tr:nth-child(even) td { background: #f8f9fc; }
.invoice.template-modern .inv-totals {
  display: flex;
  justify-content: flex-end;
  padding: 20px 48px 4px;
}
.invoice.template-modern .inv-totals-inner { min-width: 260px; }
.invoice.template-modern .inv-tot-row {
  display: flex;
  justify-content: space-between;
  padding: 7px 0;
  border-bottom: 1px solid #eceef6;
  font-size: 13.5px;
  color: #4b5675;
}
.invoice.template-modern .inv-tot-row span:last-child { font-weight: 600; color: #141926; }
/* Full-width grand total band */
.invoice.template-modern .inv-grand-band {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #141926;
  color: #fff;
  padding: 16px 48px;
  font-size: 15px;
  font-weight: 700;
  margin-top: 12px;
}
.invoice.template-modern .inv-pay-items { display: flex; flex-direction: column; gap: 14px; }
.invoice.template-modern .inv-pay-k {
  font-size: 9.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.8px; color: #9baac7; margin-bottom: 3px;
}
.invoice.template-modern .inv-pay-v {
  font-size: 12.5px; font-weight: 600; color: #141926;
  font-family: var(--font-mono);
}
.invoice.template-modern .inv-footer-note {
  margin: 0 48px 48px;
  font-size: 11.5px;
  color: #8899bb;
  line-height: 1.6;
  padding-top: 20px;
  border-top: 1px solid #e7ebf3;
  font-style: italic;
}

/* ─── MINIMAL TEMPLATE ─────────────────────────────────────── */
.invoice.template-minimal .inv-hdr {
  padding: 36px 56px 24px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 1px solid #e0e0e0;
}
.invoice.template-minimal .inv-co-name {
  font-size: 15px;
  font-weight: 700;
  color: #111;
  letter-spacing: -0.2px;
}
.invoice.template-minimal .inv-co-sub {
  font-size: 12px;
  color: #999;
  margin-top: 3px;
}
.invoice.template-minimal .inv-hdr-right { text-align: right; }
.invoice.template-minimal .inv-title-word {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: #bbb;
  margin-bottom: 6px;
}
.invoice.template-minimal .inv-number-val {
  font-size: 22px;
  color: #111;
  font-weight: 700;
  letter-spacing: -0.5px;
}
.invoice.template-minimal .inv-meta {
  padding: 28px 56px;
  display: flex;
  gap: 48px;
  border-bottom: 1px solid #ebebeb;
}
.invoice.template-minimal .inv-meta-k {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #aaa;
  margin-bottom: 5px;
}
.invoice.template-minimal .inv-meta-v {
  font-size: 13.5px;
  font-weight: 600;
  color: #111;
}
.invoice.template-minimal .inv-parties {
  padding: 36px 56px;
  display: flex;
  gap: 56px;
  border-bottom: 1px solid #ebebeb;
}
.invoice.template-minimal .inv-party-tag {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: #bbb;
  margin-bottom: 12px;
}
.invoice.template-minimal .inv-party-name {
  font-size: 15px;
  font-weight: 700;
  color: #111;
  margin-bottom: 6px;
}
.invoice.template-minimal .inv-party-line {
  font-size: 13px;
  color: #555;
  line-height: 1.75;
}
.invoice.template-minimal .inv-tbl-wrap { padding: 0 56px; }
.invoice.template-minimal .inv-tbl { width: 100%; border-collapse: collapse; }
.invoice.template-minimal .inv-tbl thead th {
  padding: 14px 0;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #999;
  text-align: left;
  border-bottom: 2px solid #111;
}
.invoice.template-minimal .inv-tbl thead th.num-col { text-align: right; }
.invoice.template-minimal .inv-tbl tbody td {
  padding: 14px 0;
  font-size: 13.5px;
  color: #222;
  border-bottom: 1px solid #ebebeb;
  vertical-align: top;
}
.invoice.template-minimal .inv-tbl tbody td.num-col { text-align: right; }
.invoice.template-minimal .inv-totals {
  display: flex;
  justify-content: flex-end;
  padding: 20px 56px 4px;
}
.invoice.template-minimal .inv-totals-inner { min-width: 260px; }
.invoice.template-minimal .inv-tot-row {
  display: flex;
  justify-content: space-between;
  padding: 9px 0;
  font-size: 13.5px;
  color: #666;
}
.invoice.template-minimal .inv-tot-row span:last-child { font-weight: 600; color: #111; }
.invoice.template-minimal .inv-grand-band {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0;
  padding: 14px 56px;
  border-top: 2px solid #111;
  font-size: 15px;
  font-weight: 700;
  color: #111;
}
.invoice.template-minimal .inv-pay-items { display: flex; flex-direction: column; gap: 14px; }
.invoice.template-minimal .inv-pay-k {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #bbb;
  margin-bottom: 3px;
}
.invoice.template-minimal .inv-pay-v {
  font-size: 12.5px;
  font-weight: 600;
  color: #111;
  font-family: var(--font-mono);
}
.invoice.template-minimal .inv-footer-note {
  margin: 0 56px 56px;
  font-size: 11px;
  color: #bbb;
  line-height: 1.6;
  border-top: 1px solid #ebebeb;
  padding-top: 20px;
  font-style: italic;
}

/* ─── CORPORATE TEMPLATE ───────────────────────────────────── */
.invoice.template-corporate .inv-hdr {
  background: #002347;
  padding: 36px 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.invoice.template-corporate .inv-co-name {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.3px;
}
.invoice.template-corporate .inv-co-sub {
  font-size: 12.5px;
  color: rgba(255,255,255,0.5);
  margin-top: 4px;
}
.invoice.template-corporate .inv-hdr-right { text-align: right; }
.invoice.template-corporate .inv-title-word {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: #c6922a;
  margin-bottom: 6px;
}
.invoice.template-corporate .inv-number-val {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.5px;
}
.invoice.template-corporate .inv-gold-bar { height: 3px; background: linear-gradient(90deg, #c6922a, #e8b84b, #c6922a); }
.invoice.template-corporate .inv-meta {
  background: #f4f6fa;
  border-bottom: 1px solid #dde2ee;
  padding: 16px 48px;
  display: flex;
  gap: 40px;
}
.invoice.template-corporate .inv-meta-k {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #c6922a;
  margin-bottom: 4px;
}
.invoice.template-corporate .inv-meta-v {
  font-size: 13px;
  font-weight: 700;
  color: #002347;
}
.invoice.template-corporate .inv-parties {
  padding: 32px 48px;
  display: flex;
  gap: 48px;
  border-bottom: 1px solid #dde2ee;
}
.invoice.template-corporate .inv-party-tag {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #c6922a;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid #dde2ee;
}
.invoice.template-corporate .inv-party-name {
  font-size: 14.5px;
  font-weight: 700;
  color: #002347;
  margin-bottom: 6px;
}
.invoice.template-corporate .inv-party-line {
  font-size: 12.5px;
  color: #445577;
  line-height: 1.75;
}
.invoice.template-corporate .inv-tbl-wrap { padding: 0 48px; }
.invoice.template-corporate .inv-tbl { width: 100%; border-collapse: collapse; }
.invoice.template-corporate .inv-tbl thead tr { background: #002347; }
.invoice.template-corporate .inv-tbl thead th {
  padding: 12px 16px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: rgba(255,255,255,0.7);
  text-align: left;
}
.invoice.template-corporate .inv-tbl thead th.num-col { text-align: right; }
.invoice.template-corporate .inv-tbl tbody td {
  padding: 12px 16px;
  font-size: 13px;
  color: #2a3550;
  border-bottom: 1px solid #e5eaf5;
  vertical-align: top;
}
.invoice.template-corporate .inv-tbl tbody td.num-col { text-align: right; font-weight: 500; }
.invoice.template-corporate .inv-tbl tbody tr:nth-child(even) td { background: #f6f8fc; }
.invoice.template-corporate .inv-totals {
  display: flex;
  justify-content: flex-end;
  padding: 20px 48px 4px;
}
.invoice.template-corporate .inv-totals-inner {
  min-width: 280px;
  border: 1px solid #dde2ee;
  border-radius: 6px;
  overflow: hidden;
}
.invoice.template-corporate .inv-tot-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 16px;
  font-size: 13px;
  color: #556;
  border-bottom: 1px solid #dde2ee;
}
.invoice.template-corporate .inv-tot-row:last-child { border-bottom: none; }
.invoice.template-corporate .inv-tot-row span:last-child { font-weight: 600; color: #002347; }
.invoice.template-corporate .inv-grand-band {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #002347;
  color: #fff;
  padding: 14px 48px;
  font-size: 14px;
  font-weight: 700;
}
.invoice.template-corporate .inv-pay-items { display: flex; flex-direction: column; gap: 14px; }
.invoice.template-corporate .inv-pay-k {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #889aaa;
  margin-bottom: 3px;
}
.invoice.template-corporate .inv-pay-v {
  font-size: 12.5px;
  font-weight: 600;
  color: #002347;
  font-family: var(--font-mono);
}
.invoice.template-corporate .inv-footer-note {
  margin: 0 48px 48px;
  font-size: 11px;
  color: #99aacc;
  line-height: 1.6;
  padding-top: 18px;
  border-top: 1px solid #dde2ee;
  font-style: italic;
}

/* ── Serbian Invoice Elements (shared across templates) ──────── */
.invoice.template-modern .inv-sr-slovima,
.invoice.template-minimal .inv-sr-slovima,
.invoice.template-corporate .inv-sr-slovima {
  font-size: 12.5px;
  line-height: 1.7;
}
.invoice.template-modern .inv-sr-slovima { padding: 0 48px 20px; color: #445; border-bottom: 1px solid #e7ebf3; }
.invoice.template-minimal .inv-sr-slovima { padding: 0 56px 20px; color: #555; }
.invoice.template-corporate .inv-sr-slovima { padding: 0 48px 20px; color: #445577; }
.inv-sr-slovima strong { font-weight: 600; }

/* ── Invoice Signature (all templates) ───────────────────────── */
.inv-signature {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 20px 56px 8px;
  gap: 6px;
}
.invoice.template-modern .inv-signature  { padding: 20px 48px 8px; }
.invoice.template-corporate .inv-signature { padding: 20px 48px 8px; }
.inv-sig-img-wrap { display: flex; justify-content: flex-end; }
.inv-sig-img { max-width: 220px; max-height: 80px; object-fit: contain; display: block; }
.inv-sig-underline { width: 220px; border-top: 1px solid #ccc; }
.inv-sig-name { font-size: 11px; color: #999; text-align: right; margin-top: 2px; }

/* ── Invoice Work Spec Table (all templates) ─────────────────── */
.inv-spec {
  padding: 24px 56px 8px;
  border-top: 1px solid #ebebeb;
  margin-top: 8px;
}
.invoice.template-modern .inv-spec   { padding: 24px 48px 8px; border-top-color: #e7ebf3; }
.invoice.template-corporate .inv-spec { padding: 24px 48px 8px; border-top-color: #dde2ee; }
.inv-spec-hdr {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: #aaa;
  margin-bottom: 12px;
}
.inv-spec-tbl { width: 100%; border-collapse: collapse; }
.inv-spec-tbl th {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #ccc;
  text-align: left;
  padding: 0 0 8px;
  border-bottom: 1px solid #ebebeb;
}
.inv-spec-tbl td {
  font-size: 12.5px;
  color: #444;
  padding: 8px 0;
  border-bottom: 1px solid #f4f4f4;
  vertical-align: top;
  line-height: 1.5;
}
.inv-spec-tbl td:first-child { font-weight: 500; color: #222; }
.spec-num-col { width: 90px; text-align: right; font-variant-numeric: tabular-nums; }
.inv-spec-tbl th.spec-num-col { text-align: right; }
.inv-spec-tbl tfoot td { border-bottom: none; border-top: 1px solid #ddd; font-weight: 700; color: #222; padding-top: 10px; }
.spec-total-row td { font-size: 12.5px; }

/* ── Fit to one A4 page ──────────────────────────────────────────
   invoice.js measures the rendered document and steps through these until
   it fits on one page; only the vertical rhythm changes, never the type size
   or the horizontal grid. `.invoice.fit-N x` ties with the template rules
   (`.invoice.template-X x`) and wins by coming after them, so keep this block
   below the templates. It serves the editor, the read-only view and the
   off-screen PDF copy alike. Anything still too tall is scaled down in the
   PDF itself (see fitPages() in invoice.js). */
.invoice.fit-1 .inv-hdr { padding-top: 28px; padding-bottom: 20px; }
.invoice.fit-1 .inv-meta { padding-top: 14px; padding-bottom: 14px; }
.invoice.fit-1 .inv-parties { padding-top: 24px; padding-bottom: 24px; }
.invoice.fit-1 .inv-party-tag { margin-bottom: 8px; }
.invoice.fit-1 .inv-party-line { line-height: 1.55; }
.invoice.fit-1 .inv-pay-items { gap: 10px; }
.invoice.fit-1 .inv-tbl thead th { padding-top: 10px; padding-bottom: 10px; }
.invoice.fit-1 .inv-tbl tbody td { padding-top: 10px; padding-bottom: 10px; }
.invoice.fit-1 .inv-totals { padding-top: 12px; }
.invoice.fit-1 .inv-grand-band { padding-top: 12px; padding-bottom: 12px; }
.invoice.fit-1 .inv-sr-slovima { padding-bottom: 14px; }
.invoice.fit-1 .inv-footer-note { margin-bottom: 20px; padding-top: 14px; }
.invoice.fit-1 .inv-spec { padding-top: 16px; margin-top: 0; }
.invoice.fit-1 .inv-spec-tbl td { padding-top: 6px; padding-bottom: 6px; }
.invoice.fit-1 .inv-qr,
.invoice.fit-1 .inv-signature { padding-top: 12px; }

.invoice.fit-2 .inv-hdr { padding-top: 22px; padding-bottom: 16px; }
.invoice.fit-2 .inv-meta { padding-top: 10px; padding-bottom: 10px; }
.invoice.fit-2 .inv-parties { padding-top: 16px; padding-bottom: 16px; }
.invoice.fit-2 .inv-party-tag { margin-bottom: 6px; }
.invoice.fit-2 .inv-party-name { margin-bottom: 3px; }
.invoice.fit-2 .inv-party-line { line-height: 1.42; }
.invoice.fit-2 .inv-pay-items { gap: 6px; }
.invoice.fit-2 .inv-tbl thead th { padding-top: 8px; padding-bottom: 8px; }
.invoice.fit-2 .inv-tbl tbody td { padding-top: 7px; padding-bottom: 7px; }
.invoice.fit-2 .inv-totals { padding-top: 8px; }
.invoice.fit-2 .inv-tot-row { padding-top: 5px; padding-bottom: 5px; }
.invoice.fit-2 .inv-grand-band { padding-top: 10px; padding-bottom: 10px; margin-top: 6px; }
.invoice.fit-2 .inv-sr-slovima { padding-bottom: 10px; line-height: 1.5; }
.invoice.fit-2 .inv-footer-note { margin-bottom: 12px; padding-top: 10px; }
.invoice.fit-2 .inv-spec { padding-top: 12px; margin-top: 0; }
.invoice.fit-2 .inv-spec-hdr { margin-bottom: 6px; }
.invoice.fit-2 .inv-spec-tbl th { padding-bottom: 5px; }
.invoice.fit-2 .inv-spec-tbl td { padding-top: 4px; padding-bottom: 4px; line-height: 1.4; }
.invoice.fit-2 .inv-qr,
.invoice.fit-2 .inv-signature { padding-top: 8px; }
.invoice.fit-2 .inv-sig-img { max-height: 64px; }

.invoice.fit-3 .inv-hdr { padding-top: 18px; padding-bottom: 12px; }
.invoice.fit-3 .inv-meta { padding-top: 8px; padding-bottom: 8px; }
.invoice.fit-3 .inv-parties { padding-top: 12px; padding-bottom: 12px; }
.invoice.fit-3 .inv-party-tag { margin-bottom: 4px; }
.invoice.fit-3 .inv-party-name { margin-bottom: 2px; }
.invoice.fit-3 .inv-party-line { line-height: 1.32; }
.invoice.fit-3 .inv-pay-items { gap: 4px; }
.invoice.fit-3 .inv-tbl thead th { padding-top: 6px; padding-bottom: 6px; }
.invoice.fit-3 .inv-tbl tbody td { padding-top: 5px; padding-bottom: 5px; }
.invoice.fit-3 .inv-totals { padding-top: 6px; }
.invoice.fit-3 .inv-tot-row { padding-top: 3px; padding-bottom: 3px; }
.invoice.fit-3 .inv-grand-band { padding-top: 8px; padding-bottom: 8px; margin-top: 4px; }
.invoice.fit-3 .inv-sr-slovima { padding-bottom: 8px; line-height: 1.4; }
.invoice.fit-3 .inv-footer-note { margin-bottom: 8px; padding-top: 8px; }
.invoice.fit-3 .inv-spec { padding-top: 8px; margin-top: 0; }
.invoice.fit-3 .inv-spec-hdr { margin-bottom: 4px; }
.invoice.fit-3 .inv-spec-tbl th { padding-bottom: 4px; }
.invoice.fit-3 .inv-spec-tbl td { padding-top: 3px; padding-bottom: 3px; line-height: 1.3; }
.invoice.fit-3 .inv-qr,
.invoice.fit-3 .inv-signature { padding-top: 6px; padding-bottom: 4px; }
.invoice.fit-3 .inv-sig-img { max-height: 56px; }

/* ══════════════════════════════════════════════════════════════
   MODALS
   ══════════════════════════════════════════════════════════════ */
.modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; }
.modal[hidden] { display: none; }
.modal-bg { position: absolute; inset: 0; background: rgba(10,12,20,0.55); backdrop-filter: blur(3px); cursor: pointer; }
.modal-box {
  position: relative;
  background: white;
  border-radius: 12px;
  width: 500px;
  max-width: calc(100vw - 40px);
  max-height: 75vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25), 0 4px 16px rgba(0,0,0,0.1);
  overflow: hidden;
}
.modal-box--sm { width: 380px; }
/* The company form has three columns of real values; at 500px they were cut off. */
.modal-box--wide { width: 760px; }
/* A whole invoice page, scaled to the dialog's width. */
.modal-box--doc { width: 880px; max-width: calc(100vw - 32px); max-height: 92vh; }
.doc-view {
  max-height: calc(92vh - 150px);
  overflow: auto;
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 16px;
}
.doc-view-wrap { margin: 0 auto; overflow: hidden; }
.doc-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }

.modal-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px 16px;
  border-bottom: 1px solid var(--panel-border);
  flex-shrink: 0;
}
.modal-hdr h3 { font-size: 15px; font-weight: 700; color: var(--text); }
.modal-x {
  position: relative;
  background: none;
  border: none;
  color: var(--text-light);
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.12s;
}
.modal-x:hover { background: var(--input-bg); color: var(--text); }

/* Drawn rather than an inline <svg>: the same icon markup was pasted into all
   nine dialogs, so a change meant nine edits and one of them getting missed. */
.modal-x::before,
.modal-x::after {
  content: '';
  position: absolute;
  width: 13px;
  height: 1.5px;
  border-radius: 1px;
  background: currentColor;
}
.modal-x::before { transform: rotate(45deg); }
.modal-x::after { transform: rotate(-45deg); }
.modal-body { padding: 18px 22px 22px; overflow-y: auto; flex: 1; }

/* Saved item rows in modals */
.saved-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--panel-border);
  margin-bottom: 8px;
  gap: 10px;
  transition: border-color 0.12s;
}
.saved-item:hover { border-color: var(--accent); }
.saved-item-info { flex: 1; min-width: 0; }
.saved-item-name { font-size: 13.5px; font-weight: 600; color: var(--text); }
.saved-item-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.saved-item-actions { display: flex; gap: 6px; flex-shrink: 0; }
.btn-load-item {
  background: var(--accent);
  border: none;
  color: var(--on-accent);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 4px;
  transition: background 0.12s;
}
.btn-load-item:hover { background: var(--accent-hover); }
.btn-del-item {
  background: none;
  border: 1px solid var(--panel-border);
  color: var(--text-light);
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 4px;
  transition: all 0.12s;
}
.btn-del-item:hover { border-color: var(--danger); color: var(--danger); background: #fff0f0; }

.modal-empty {
  text-align: center;
  padding: 32px 20px;
  color: var(--text-muted);
  font-size: 13.5px;
}
.modal-empty p:first-child { font-size: 28px; margin-bottom: 8px; }

/* ── Toast Notifications ──────────────────────────────────── */
#toastContainer {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 2000;
}
.toast {
  background: #1a1d2e;
  color: white;
  padding: 10px 18px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  display: flex;
  align-items: center;
  gap: 8px;
  animation: toastIn 0.2s ease;
  max-width: 320px;
}
.toast--success { border-left: 3px solid #22c55e; }
.toast--error { border-left: 3px solid #ef4444; }
.toast--info { border-left: 3px solid var(--accent); }
@keyframes toastIn { from { opacity:0; transform: translateY(8px); } to { opacity:1; transform: translateY(0); } }

/* ── Print Styles ─────────────────────────────────────────── */
@media print {
  * { -webkit-print-color-adjust: exact !important; color-adjust: exact !important; print-color-adjust: exact !important; }
  #app { display: none !important; }
  #printArea {
    display: block !important;
    position: fixed;
    inset: 0;
    background: white;
    z-index: 99999;
  }
  #printArea .invoice {
    width: 100% !important;
    min-height: auto !important;
    box-shadow: none !important;
    transform: none !important;
  }
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1100px) {
  #formPanel { width: 360px; }
}

@media (max-width: 900px) {
  #appBody { flex-direction: column; }
  #formPanel { width: 100%; height: 50vh; border-right: none; border-bottom: 1px solid var(--panel-border); }
  #previewPanel { height: 50vh; }
}

/* ── View switching ───────────────────────────────────────────── */
/* Scrolling is the default rather than an opt-in list of view ids: that list
   was hand-kept, and a new view added later simply never scrolled. Only the
   invoice editor opts out, because it drives its own panes. */
.view { display: none; flex: 1; min-height: 0; overflow-y: auto; }
.view--active { display: flex; flex-direction: column; }
#view-invoice.view--active { overflow: hidden; }

.view-inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px 32px 60px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.view-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.view-head h2 { font-size: 26px; font-weight: 600; letter-spacing: -0.01em; }
.view-sub { font-size: 13px; color: var(--text-light); margin-top: 4px; }
.view-head-actions { display: flex; align-items: flex-end; gap: 10px; }

.inline-field {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.inline-field input {
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text);
  padding: 5px 8px;
  background: var(--panel-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
}

/* ── Auth screen ──────────────────────────────────────────────── */
.auth-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--bg);
}
.auth-card {
  width: 100%;
  max-width: 380px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 16px;
  padding: 28px;
}
.auth-brand { display: flex; align-items: center; gap: 13px; margin-bottom: 22px; }
.auth-brand h1 { font-size: 26px; }
.auth-brand p { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

.auth-tabs {
  display: flex;
  gap: 3px;
  padding: 3px;
  background: var(--neutral-soft);
  border-radius: var(--radius);
  margin-bottom: 18px;
}
.auth-tab {
  flex: 1;
  padding: 7px;
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.auth-tab.active {
  background: var(--panel-bg);
  color: var(--accent);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(18, 32, 29, 0.14), 0 0 0 1px var(--panel-border);
}
[data-theme="dark"] .auth-tab.active { background: var(--accent-soft); box-shadow: none; }

/* Forgot, reset and verify replace the tabs with a heading of their own. */
.auth-head { margin-bottom: 16px; }
.auth-head h2 { font-size: 18px; margin-bottom: 6px; }
.auth-head p { font-size: 13px; line-height: 1.5; color: var(--text-muted); overflow-wrap: anywhere; }
.auth-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.auth-label-row .link-btn { font-weight: 500; }
.auth-links { display: flex; justify-content: center; }
.auth-links:not(:has(> :not([hidden]))) { display: none; }
.auth-notice {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--success-ink);
  background: var(--success-soft);
  border-radius: var(--radius-sm);
  padding: 9px 11px;
  margin-bottom: 13px;
  overflow-wrap: anywhere;
}

.auth-form { display: flex; flex-direction: column; gap: 13px; }
.auth-submit { width: 100%; justify-content: center; margin-top: 4px; }
.auth-error {
  font-size: 12.5px;
  color: var(--danger-ink);
  background: var(--danger-soft);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
}

/* ── Panels ───────────────────────────────────────────────────── */
.panel {
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-lg);
  padding: 18px 22px;
}
.panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 13px;
  flex-wrap: wrap;
}
.panel-head h3 { font-size: 15px; font-weight: 600; }
.panel-hint { font-size: 12.5px; color: var(--text-light); }
.panel-head > div > .panel-hint { display: block; margin-top: 2px; }
.panel-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; align-self: center; margin-left: auto; }
/* A panel's own button (Dodaj firmu, Sačuvaj limite, Preuzmi …) closes it on
   the right, where the eye ends the form. */
.panel > .btn-primary, .panel > .btn-secondary { display: flex; width: fit-content; margin-left: auto; text-decoration: none; }

/* A paid status is itself the way to change the payment. */
.status-btn { background: none; border: none; padding: 0; cursor: pointer; font: inherit; }

.logo-preview {
  min-height: 64px; display: flex; align-items: center; justify-content: center;
  padding: 10px; border: 1px dashed var(--panel-border); border-radius: var(--radius-sm);
  background: #fff;
}
.logo-preview img { max-width: 240px; max-height: 80px; object-fit: contain; }
.logo-preview .muted { color: #8a90a2; font-size: 12px; }

.reminder-form { margin-top: 14px; align-items: end; }
.ical-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ical-row input {
  flex: 1 1 260px; min-width: 0; padding: 7px 10px;
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 12px;
  background: var(--input-bg); border: 1px solid var(--input-border);
  border-radius: var(--radius-sm); color: var(--text);
}
.ical-note { margin-top: 8px; display: block; }

.rates-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.rate-cell { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 12px; }
.rate-code { font-weight: 700; font-size: 13px; }
.rate-value { font-variant-numeric: tabular-nums; font-size: 15px; }
.push-status { font-size: 14px; color: var(--text-muted); margin-bottom: 12px; }
.push-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.push-actions:not(:has(button:not([hidden]))) { display: none; }
.rates-source { display: block; margin-top: 10px; }
.rates-convert { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.rates-convert .filter-field { flex: 0 1 200px; }
.rates-convert .filter-field--narrow { flex: 0 0 100px; min-width: 0; }
.rates-swap { height: var(--ctl-h); width: 44px; justify-content: center; padding: 0; }
.rates-result { font-size: 18px; font-weight: 600; align-self: center; }
@media (max-width: 620px) {
  .rates-convert .filter-field:first-child { flex: 1 1 100%; }
  .rates-convert .filter-field--narrow { flex: 1 1 0; }
  .rates-result { flex: 1 1 100%; }
}

/* ── 30-day rate chart: one series, recessive grid, crosshair on hover ── */
.rates-chart { position: relative; min-height: 220px; touch-action: pan-y; }
.rates-chart svg { display: block; overflow: visible; }
.rc-grid { stroke: var(--divider); stroke-width: 1; }
.rc-axis { font-size: 11px; fill: var(--text-light); }
.rc-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.rc-dot { fill: var(--accent); stroke: var(--panel-bg); stroke-width: 2; }
.rc-label { font-size: 12px; font-weight: 600; fill: var(--text); }
.rc-cross { stroke: var(--text-light); stroke-width: 1; stroke-dasharray: 3 3; }
.rc-tip {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--text);
  color: var(--panel-bg);
  font-size: 12px;
  pointer-events: none;
  white-space: nowrap;
}
.rc-tip strong { font-size: 14px; }
.rc-tip-date, .rc-tip-list { opacity: 0.75; }
.rates-table { margin-top: 12px; }
.rates-table summary { cursor: pointer; font-size: 13px; color: var(--accent); font-weight: 500; }
.rates-table .table-scroll { margin-top: 8px; max-height: 320px; overflow-y: auto; }

/* Payments dialog: what came in so far, then what is left. */
.pay-table { margin-bottom: 4px; }
.pay-table td { padding-top: 6px; padding-bottom: 6px; }
.pay-remaining { margin: 6px 0 12px; font-weight: 600; }
.status-btn:hover .badge { filter: brightness(0.96); text-decoration: underline; }

.dash-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; }

/* ── To do ───────────────────────────────────────────────────────
   Rows written by three modules into one panel; with none of them it has
   nothing to say and leaves the page. */
.todo-panel { padding: 0; overflow: hidden; }
.todo-panel:not(:has(.todo-item)) { display: none; }
.todo-panel .panel-head { padding: 16px 22px; margin: 0; border-bottom: 1px solid var(--divider); }
.todo-item { display: flex; align-items: center; gap: 16px; padding: 14px 22px; border-bottom: 1px solid var(--divider); }
.todo-panel > div:last-of-type > .todo-item:last-child { border-bottom: 0; }
.todo-ico { width: 36px; height: 36px; flex: none; border-radius: 10px; display: grid; place-items: center; }
.todo-ico--danger { background: var(--danger-soft); color: var(--danger-ink); }
.todo-ico--warn { background: var(--warn-soft); color: var(--warn-ink); }
.todo-ico--accent { background: var(--accent-soft); color: var(--accent); }
.todo-ico--mint { background: var(--mint-soft); color: var(--mint-ink); }
.todo-ico--info { background: var(--info-soft); color: var(--info-ink); }
.btn-xs--info { background: var(--info-soft); border-color: transparent; color: var(--info-ink); }
.btn-xs--info:hover { background: var(--info); color: #fff; }
.badge-info { background: var(--info-soft); color: var(--info-ink); }
.todo-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.todo-title { font-weight: 600; }
.todo-sub { font-size: 13px; color: var(--text-light); }
.todo-item > button { flex: none; white-space: nowrap; }
@media (max-width: 620px) {
  .todo-item { flex-wrap: wrap; align-items: flex-start; padding: 14px 16px; }
  .todo-body { flex-basis: calc(100% - 52px); }
  .todo-item > button { margin-left: 52px; min-height: 40px; }
}

/* ── Figures under the to-do list ────────────────────────────────── */
.kpi-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.kpi { background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: var(--radius-lg); padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.kpi-label { font-size: 13px; color: var(--text-light); }
.kpi-value { font-size: 22px; font-weight: 600; }
.kpi-sub { font-size: 13px; color: var(--text-muted); }
.kpi-sub--up { color: var(--success-ink); }
.kpi-sub--down { color: var(--danger-ink); }
@media (max-width: 760px) { .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kpi:last-child { grid-column: 1 / -1; } }
@media (max-width: 620px) {
  .limit-cards { gap: 12px; }
  .limit-card { padding: 16px; }
  .lc-value { font-size: 22px; }
  .lc-limit { font-size: 13px; }
  .lc-bar { margin: 10px 0 8px; }
  .kpi { padding: 14px 16px; }
  .kpi-value { font-size: 17px; }
}
/* The bottom bar's "+" is the new-invoice button on a phone. */
@media (max-width: 820px) {
  .view-head .btn-primary[data-goto="invoice"] { display: none; }
}

/* ── Recent invoices on the dashboard ────────────────────────────── */
.recent-list { display: flex; flex-direction: column; }
.recent-row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--divider); }
.recent-row:last-child { border-bottom: 0; }
.recent-main, .recent-side { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.recent-main .link-btn { align-self: flex-start; }
.recent-side { align-items: flex-end; }
.recent-client { font-size: 13px; color: var(--text-light); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 900px) { .dash-grid { grid-template-columns: minmax(0, 1fr); } }

.empty-note {
  font-size: 12.5px;
  color: var(--text-light);
  padding: 14px 0;
  text-align: center;
}

/* ── Limit cards ──────────────────────────────────────────────── */
.limit-cards { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
@media (max-width: 760px) { .limit-cards { grid-template-columns: minmax(0, 1fr); } }

/* The figure stays ink; the bar carries the state, accent while there is
   room and the status colours as the limit comes near. */
.limit-card {
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
}
.limit-card--ok     { --lc-color: var(--accent); }
.limit-card--warn   { --lc-color: var(--warn); }
.limit-card--danger { --lc-color: var(--danger); }

.lc-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
  flex-wrap: wrap;
}
.lc-head h3 { font-size: 14px; font-weight: 600; }
.lc-hint { font-size: 12px; color: var(--text-light); }

.lc-amount { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.lc-value {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
}
.lc-limit { font-size: 14px; color: var(--text-light); }

.lc-bar {
  height: 8px;
  background: var(--neutral-soft);
  border-radius: 4px;
  overflow: hidden;
  margin: 14px 0 10px;
}
.lc-fill {
  height: 100%;
  border-radius: 4px;
  background: var(--lc-color, var(--success));
  transition: width 0.25s ease;
}

.lc-foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--text-muted); }
.lc-foot strong { color: var(--text); font-weight: 600; }
.limit-card--danger .lc-foot strong { color: var(--danger-ink); }
.lc-note {
  font-size: 12px;
  color: var(--text-light);
  margin-top: 10px;
}
/* A card can carry several notes — the basis it is measured on, then whatever
   that basis leaves out. One separator opens the group; the rest just stack, or
   the card reads as a stack of rules instead of one footnote. */
.lc-note + .lc-note { margin-top: 4px; padding-top: 0; border-top: none; }

/* ── Roll-off list ────────────────────────────────────────────── */
.rolloff-list { display: flex; flex-direction: column; }
.rolloff-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--panel-border);
}
.rolloff-row:last-child { border-bottom: none; }
.rolloff-date { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rolloff-frees { font-size: 12.5px; font-weight: 600; }
.rolloff-from {
  font-size: 11px;
  color: var(--text-light);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rolloff-amount {
  font-size: 13px;
  font-weight: 600;
  color: var(--success);
  font-variant-numeric: tabular-nums;
}

/* ── Monthly chart ────────────────────────────────────────────── */
.chart {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 152px;
  overflow-x: auto;
  padding-top: 6px;
}
.chart-col {
  flex: 1 0 30px;
  min-width: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  height: 100%;
}
.chart-bar-wrap { flex: 1; width: 100%; display: flex; align-items: flex-end; min-height: 0; }
/* The latest month in the full green, the ones before it in mint: the eye
   goes to the month being compared. */
.chart-bar {
  width: 100%;
  background: var(--mint);
  border-radius: 3px 3px 0 0;
  min-height: 3px;
}
.chart-val { font-size: 9.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.chart-lbl { font-size: 9.5px; color: var(--text-light); white-space: nowrap; }
.chart-lbl em { font-style: normal; opacity: 0.6; margin-left: 1px; }

/* ── Data tables ──────────────────────────────────────────────── */
.table-scroll { overflow-x: auto; margin: 0 -22px; padding: 0 22px; }
.data-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.data-table th {
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-light);
  padding: 0 10px 9px;
  border-bottom: 1px solid var(--panel-border);
  white-space: nowrap;
}
.data-table td {
  padding: 11px 10px;
  border-bottom: 1px solid var(--divider);
  vertical-align: middle;
}
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: var(--bg); }
.data-table tfoot td {
  padding-top: 10px;
  border-bottom: none;
  border-top: 1px solid var(--panel-border);
}
.data-table .col-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.data-table .col-narrow { width: 34px; color: var(--text-light); }
.data-table .col-actions { text-align: right; white-space: nowrap; }
.data-table .col-actions button + button { margin-left: 4px; }

/* ── Invoice list on a phone ────────────────────────────────────────
   Five columns and five buttons do not fit 375px; the table scrolled
   sideways and hid the status and every action. Under 620px each row
   becomes a card: number and status, client and amount, then the date,
   with "Pregled" and "⋯" (the rest, as a sheet). */
@media (max-width: 620px) {
  .table-scroll:has(> .inv-table) { overflow-x: visible; }
  .inv-table thead { display: none; }
  .inv-table tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "number status"
      "client amount"
      "date   actions";
    align-items: center;
    gap: 4px 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--panel-border);
  }
  .inv-table tbody td { display: block; padding: 0; border: none; }
  .inv-table .c-number { grid-area: number; }
  .inv-table .c-status { grid-area: status; justify-self: end; }
  .inv-table .c-client { grid-area: client; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .inv-table .c-amount { grid-area: amount; font-weight: 600; }
  .inv-table .c-date { grid-area: date; font-size: 11.5px; color: var(--text-muted); }
  .inv-table .col-actions { grid-area: actions; justify-self: end; }
  .inv-table .act-wide { display: none; }
}

.client-form-actions { display: flex; gap: 8px; }
.modal-subhead { margin: 20px 0 8px; font-size: 13px; font-weight: 600; }

/* Not a .ff: field rules would stretch the checkboxes to full width and set
   each criterion as an uppercase field label. It spans the form's grid itself. */
.indep { grid-column: 1 / -1; margin-top: 6px; padding-top: 4px; border-top: 1px solid var(--panel-border); }
.indep-hint { margin: 0; font-size: 12px; color: var(--text-muted); }
.indep-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.indep-list { display: grid; gap: 6px; margin-top: 8px; }
.indep-item { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.4; cursor: pointer; }
.indep-item input { margin-top: 2px; flex: none; }
.indep-item small { display: block; color: var(--text-muted); font-size: 11.5px; margin-top: 2px; }
.indep-item--auto { cursor: default; }

/* Clients on a phone: name and turnover on top, then share, owed and the
   date of the last invoice. The invoice count needs its heading to mean
   anything, so it goes with it. */
@media (max-width: 620px) {
  .table-scroll:has(> .clients-table) { overflow-x: visible; }
  .clients-table thead { display: none; }
  .clients-table tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name rsd" "last share" "test owed";
    gap: 4px 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--panel-border);
  }
  .clients-table tbody td { display: block; padding: 0; border: none; }
  .clients-table .c-name { grid-area: name; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .clients-table .c-rsd { grid-area: rsd; font-weight: 600; }
  .clients-table .c-last { grid-area: last; font-size: 11.5px; color: var(--text-muted); }
  .clients-table .c-share { grid-area: share; }
  .clients-table .c-count { display: none; }
  .clients-table .c-owed { grid-area: owed; }
  .clients-table .c-test { grid-area: test; }
  .client-inv-table td { padding-left: 4px; padding-right: 4px; }
}

/* Deadlines on a phone: what and amount on top, date (and status) below. */
@media (max-width: 620px) {
  .upcoming-table tbody tr, .reminders-table tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "what amount" "date status";
    gap: 4px 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--panel-border);
  }
  .reminders-table tbody tr { grid-template-areas: "what amount" "when actions" "date actions"; }
  .upcoming-table tbody td, .reminders-table tbody td { display: block; padding: 0; border: none; }
  .upcoming-table .c-what, .reminders-table .c-what { grid-area: what; }
  .upcoming-table .c-amount, .reminders-table .c-amount { grid-area: amount; }
  .upcoming-table .c-date, .reminders-table .c-date { grid-area: date; font-size: 11.5px; color: var(--text-muted); }
  .upcoming-table .c-status { grid-area: status; }
  .reminders-table .c-when { grid-area: when; font-size: 11.5px; }
  .reminders-table .col-actions { grid-area: actions; align-self: center; }
}

/* The catalogue on a phone: name and price on top, unit and actions below. */
@media (max-width: 620px) {
  .catalog-table tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name price" "unit actions";
    gap: 4px 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--panel-border);
  }
  .catalog-table tbody td { display: block; padding: 0; border: none; }
  .catalog-table .c-name { grid-area: name; overflow: hidden; text-overflow: ellipsis; }
  .catalog-table .c-price { grid-area: price; }
  .catalog-table .c-unit { grid-area: unit; font-size: 11.5px; }
  .catalog-table .col-actions { grid-area: actions; }
}
.data-table .strong { font-weight: 600; }
.data-table .muted { color: var(--text-muted); }
.data-table tr.row-warn td { background: #fffbeb; }
.data-table tr.row-danger td { background: #fef2f2; }

.badge {
  display: inline-block;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 20px;
  white-space: nowrap;
}

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

/* ── Invoice list: summary strip, status chips, search ───────────── */
.summary-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-lg);
}
.summary-strip:empty { display: none; }
.strip-cell { padding: 16px 20px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.strip-cell + .strip-cell { border-left: 1px solid var(--divider); }
.strip-label { font-size: 13px; color: var(--text-light); }
.strip-value { font-size: 19px; font-weight: 600; overflow-wrap: anywhere; }
.strip-value--danger { color: var(--danger-ink); }

.list-panel { padding: 0; overflow: hidden; }
.list-panel .table-scroll { margin: 0; padding: 0; }
.list-panel .data-table thead th { background: var(--bg); padding-top: 10px; padding-bottom: 10px; }
.list-panel .data-table th:first-child, .list-panel .data-table td:first-child { padding-left: 18px; }
.list-panel .data-table th:last-child, .list-panel .data-table td:last-child { padding-right: 18px; }
.list-panel > .empty-note { padding: 28px 18px; }
.list-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--divider);
}
.chip-group { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--input-border);
  border-radius: 8px;
  background: var(--panel-bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.chip:hover { border-color: var(--accent); }
.chip-count { font-size: 12px; font-weight: 600; padding: 0 6px; border-radius: 9px; background: var(--neutral-soft); color: var(--text-muted); }
.chip--on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.chip--on .chip-count { background: rgba(255,255,255,0.22); color: var(--on-accent); }
.search-field {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px;
  min-width: 240px;
  border: 1px solid var(--input-border);
  border-radius: 8px;
  background: var(--input-bg);
  color: var(--text-light);
}
.search-field:focus-within { border-color: var(--input-focus); }
.search-field input { border: 0; outline: none; background: transparent; font: inherit; color: var(--text); width: 100%; min-width: 0; }
.inv-table .c-client { max-width: 260px; }
.cell-main, .cell-sub { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-sub { font-size: 12px; color: var(--text-light); }
.mail-off [data-needs-mail] { display: none !important; }
#sendForm .ff .modal-note { margin-top: 5px; }
.send-attach { font-size: 12.5px; padding: 8px 11px; margin: 12px 0; color: var(--text-muted); overflow-wrap: anywhere; }
/* "Otvoren": information, not a warning, so violet. */
.opened-mark { color: var(--info-ink); }
#sendForm .toggle + .toggle { margin-top: 12px; }
/* The archive: a long name is cut, not wrapped over three lines. */
.doc-table .c-number { max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-table a { text-decoration: none; }
.ff input[type="file"] { height: auto; padding: 6px; cursor: pointer; }
.ff input[type="file"]::file-selector-button {
  margin-right: 10px; padding: 5px 12px; border: 1px solid var(--input-border); border-radius: var(--radius-sm);
  background: var(--panel-bg); color: var(--text); font: inherit; font-weight: 500; cursor: pointer;
}
/* Sign-up: the terms are accepted with one box, the documents a click away. */
.auth-check { position: relative; display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; line-height: 1.45; color: var(--text-muted); cursor: pointer; }
.auth-check input { margin-top: 2px; accent-color: var(--accent); flex: none; }
.auth-check a { color: var(--accent); }

/* ── Terms and privacy (server/legal.js) ────────────────────── */
.legal-body { height: auto; min-height: 100%; }
.legal-bar { display: flex; align-items: center; justify-content: space-between; max-width: 760px; margin: 0 auto; padding: 18px 20px; }
.legal-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); }
.legal-brand img { border-radius: 8px; }
.legal-brand .brand-word { font-size: 20px; }
.legal-lang { display: flex; gap: 4px; }
.legal-lang a { padding: 4px 9px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 600; color: var(--text-muted); text-decoration: none; }
.legal-lang a[aria-current] { background: var(--accent-soft); color: var(--accent); }
.legal-page { max-width: 760px; margin: 0 auto; padding: 8px 20px 40px; }
.legal-doc { background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: var(--radius-lg); padding: 36px 40px; line-height: 1.65; font-size: 14.5px; color: var(--text); }
.legal-doc h1 { font-size: 28px; letter-spacing: -0.02em; margin: 0 0 4px; }
.legal-doc h2 { font-size: 16px; margin: 28px 0 8px; }
.legal-doc p, .legal-doc ul { margin: 0 0 12px; }
.legal-doc ul { padding-left: 20px; }
.legal-doc li { margin-bottom: 6px; }
.legal-doc a { color: var(--accent); }
.legal-updated { color: var(--text-muted); font-size: 13px; margin-bottom: 22px !important; }
.legal-missing { background: var(--warn-soft); color: var(--warn-ink); padding: 0 4px; border-radius: 4px; font-size: 0.92em; }
.legal-page .legal-links { margin-top: 18px; }
@media (max-width: 620px) {
  .legal-doc { padding: 24px 18px; font-size: 14px; }
  .legal-doc h1 { font-size: 23px; }
}

.legal-links { display: flex; gap: 8px; justify-content: center; margin: 4px 0 24px; font-size: 12px; color: var(--text-muted); }
.legal-links a { color: var(--text-muted); }
.legal-links a:hover { color: var(--text); }
.view-foot-note { margin-top: 10px; font-size: 12px; color: var(--text-muted); text-align: right; }

/* The editor writing a profaktura: what only an invoice has is not there. */
#view-invoice.is-proforma [data-invoice-only] { display: none !important; }
.link-row { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.link-row .ff { flex: 1; min-width: 0; }
.link-row input { font-family: var(--font-mono); font-size: 12px; }
.link-row a { text-decoration: none; }
#linkBox .modal-note { margin: 0 0 6px; }
#linkForm { margin-top: 14px; }

/* ── The invoice a client opens by link (share.html) ────────── */
.share-body { height: auto; min-height: 100%; }
.share-bar {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; padding-top: max(12px, env(safe-area-inset-top));
  background: var(--panel-bg); border-bottom: 1px solid var(--panel-border);
}
.share-who { min-width: 0; }
.share-firm { font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-sub { display: flex; align-items: center; gap: 8px; margin-top: 2px; font-size: 12.5px; color: var(--text-muted); }
.share-bar .btn-primary { flex-shrink: 0; }
.share-main { display: flex; justify-content: center; padding: 24px 16px 48px; }
#shareWrap { overflow: hidden; }
.share-state { margin: 80px auto; color: var(--text-muted); text-align: center; }
.share-state.share-gone { display: grid; gap: 6px; max-width: 360px; }
.share-gone strong { color: var(--text); font-size: 16px; }
.btn-more { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 30px; padding: 0; vertical-align: middle; }
.inv-table .act-narrow { display: none; }

@media (max-width: 620px) {
  .summary-strip { grid-template-columns: minmax(0, 1fr); }
  .strip-cell { flex-direction: row; justify-content: space-between; align-items: baseline; padding: 10px 16px; }
  .strip-cell + .strip-cell { border-left: 0; border-top: 1px solid var(--divider); }
  .strip-value { font-size: 15px; text-align: right; }
  .list-toolbar { padding: 12px 14px; }
  .chip-group { flex-wrap: nowrap; overflow-x: auto; margin: 0 -14px; padding: 0 14px 2px; width: calc(100% + 28px); scrollbar-width: none; }
  .chip-group::-webkit-scrollbar { display: none; }
  .chip { flex: none; height: 36px; border-radius: 18px; }
  .search-field { min-width: 0; width: 100%; height: 44px; }
  .list-panel .inv-table tbody tr { padding: 14px 16px; }
  .list-panel .data-table.inv-table tbody td { padding: 0; }
  .list-panel .data-table.inv-table tbody tr:last-child { border-bottom: 0; }
  .inv-table .act-narrow { display: inline-block; }
  /* Client cards keep the same inset as invoice cards. */
  .list-panel .clients-table tbody tr { padding: 12px 16px; }
  .list-panel .data-table.clients-table tbody td { padding: 0; }
  /* The lists run edge to edge here, so "Prikaži još" brings its own inset. */
  .list-panel .pager { padding: 12px 16px 16px; }
}
.badge-ok { background: var(--success-soft); color: var(--success-ink); }
.badge-muted { background: var(--neutral-soft); color: var(--text-muted); }
.badge-link { background: transparent; color: var(--accent); padding: 0 0 0 3px; }

/* ── KPO add form ─────────────────────────────────────────────── */
.kpo-add-form { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.kpo-add-form .ff { flex: 0 0 auto; min-width: 130px; }
.kpo-add-form .ff-grow { flex: 1 1 160px; }

/* ── Settings ─────────────────────────────────────────────────── */
.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 13px;
  margin-bottom: 15px;
}
.settings-note { font-size: 12.5px; color: var(--text-muted); margin-bottom: 13px; }

/* ── Invoice view toolbar ─────────────────────────────────────── */
.inv-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 24px;
  background: var(--panel-bg);
  border-bottom: 1px solid var(--panel-border);
  flex-shrink: 0;
  flex-wrap: wrap;
}
.inv-toolbar-left { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.inv-title { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.inv-title h2 { font-size: 20px; font-weight: 600; white-space: nowrap; }
#editorNumber { font-size: 14px; color: var(--text-muted); }
.inv-toolbar .form-tmpl-label { display: none; }
.inv-toolbar-right { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-left: auto; }

/* ── Booking modal ────────────────────────────────────────────── */
.modal-lead {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 14px;
}
.book-impact { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.impact-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  background: var(--input-bg);
  border-left: 3px solid var(--success);
  font-variant-numeric: tabular-nums;
}
.impact-note {
  font-size: 11.5px;
  color: var(--text-light);
  margin: 2px 0 0;
}
.impact-ok     { border-left-color: var(--success); }
.impact-warn   { border-left-color: #f59e0b; background: #fffbeb; }
.impact-danger { border-left-color: var(--danger); background: #fef2f2; }

.btn-sm { padding: 4px 9px; font-size: 11.5px; }

@media (max-width: 820px) {
  #appBody { flex-direction: column; overflow: visible; }
  #formPanel { width: 100%; }
  .view-inner { padding: 16px 14px 50px; }
}

/* Author rules like `.ff { display: flex }` outrank the UA stylesheet's
   `[hidden] { display: none }`, so the attribute needs enforcing globally. */
[hidden] { display: none !important; }

.inv-toolbar .btn-ghost { border-color: var(--input-border); }

/* ── Company picker + bank account groups ─────────────────────────── */
.company-pick { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.company-pick label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
}
.company-pick select { flex: 1; min-width: 0; }

.fsec-note {
  font-size: 11px;
  color: var(--text-light);
  line-height: 1.45;
  margin-bottom: 11px;
}

.acc-group {
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  padding: 10px 11px 11px;
  margin-top: 11px;
  background: #fbfcfe;
}
.acc-group-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 9px;
}
.acc-group-hdr span:first-child {
  font-size: 11px;
  font-weight: 650;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.acc-badge {
  font-size: 9.5px;
  font-weight: 600;
  color: var(--text-light);
  background: var(--panel-bg);
  border: 1px solid var(--input-border);
  border-radius: 20px;
  padding: 2px 7px;
  white-space: nowrap;
}
/* Inside the modal the group is a grid child, so it must not inherit .ff's column flex */
.modal .acc-group { display: block; }

/* ── Collapsed section summary ────────────────────────────────────
   A section whose contents rarely change folds to one line saying what is
   in it, so the issuer and the client can be confirmed at a glance instead
   of re-read field by field. Clicking the line opens the section. */
.fsec-summary {
  flex: 1;
  min-width: 0;
  margin: 0 10px;
  padding: 0;
  background: none;
  border: none;
  font: inherit;
  font-size: 12px;
  color: var(--text-muted);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.fsec-summary:hover { color: var(--text); }
.fsec:not(.collapsed) .fsec-summary { visibility: hidden; }
/* Saving the issuer's fields only means something while they are open. */
.fsec.collapsed #btnSaveCompany,
.fsec.collapsed #btnLoadClient { display: none; }
.fsec-summary .sum-warn { color: var(--warn-ink); font-weight: 600; }

/* ── Payment account picker ─────────────────────────────────────── */
.pay-pick { display: flex; align-items: center; gap: 8px; }
.pay-pick .tmpl-tabs { flex: 1; }
.pay-pick .tmpl-tab { flex: 1; }
.pay-pick select { width: 84px; flex-shrink: 0; }
.pay-account {
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.pay-account--missing { color: var(--warn-ink); font-weight: 600; }

/* ── Toolbar overflow menu ──────────────────────────────────────── */
.tb-menu { position: relative; }
.tb-menu > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.tb-menu > summary::-webkit-details-marker { display: none; }
.tb-menu-list {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 50;
  min-width: 200px;
  padding: 5px;
  display: flex;
  flex-direction: column;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}
.tb-menu-list button {
  background: none;
  border: none;
  font: inherit;
  font-size: 12.5px;
  color: var(--text);
  text-align: left;
  padding: 7px 10px;
  border-radius: 5px;
  cursor: pointer;
}
.tb-menu-list button:hover { background: var(--input-bg); }
.tb-menu-list .tb-menu-danger { color: var(--danger-ink); }
/* On a phone "Više" is the first button in the bar, so its menu opens to the
   right; anchored right, it hung off the left edge of the screen. */
@media (max-width: 820px) {
  .tb-menu-list { left: 0; right: auto; }
}
/* The same menu dropped from any "⋯" (openMenu in app.js), placed by script
   next to its button; above the phone's bottom bar, below every dialog. */
.pop-menu { position: fixed; right: auto; z-index: 960; }
.pop-menu[hidden] { display: none; }
.tb-menu-list button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
@media (max-width: 620px) {
  .tb-menu-list button { font-size: 14px; padding: 11px 12px; }
}

/* ── Companies list in Settings ───────────────────────────────────── */
.company-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--panel-border);
  flex-wrap: wrap;
}
.company-row:last-child { border-bottom: none; }
.company-info { min-width: 0; }
.company-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  flex-wrap: wrap;
}
.company-sub {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.company-actions { display: flex; gap: 5px; flex-wrap: wrap; }

#modalCompany .modal-box { max-width: 620px; }
#modalCompany .modal-body { max-height: 72vh; overflow-y: auto; }

/* ══════════════════════════════════════════════════════════════════
   Polish pass
   ══════════════════════════════════════════════════════════════════ */

:root {
  --ctl-h: 32px;               /* one control height across the app */
  --ctl-h-sm: 26px;
  --focus-ring: 0 0 0 3px rgba(15,118,110,0.16);
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1.5 5 5.5 9 1.5' fill='none' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ── Selects: native chrome replaced so they match the inputs ─────── */
select,
.ff select,
.inline-field select,
.company-pick select {
  appearance: none;
  -webkit-appearance: none;
  background-image: var(--chevron);
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
  cursor: pointer;
}
select::-ms-expand { display: none; }

/* The issuing-company picker is the most consequential choice on the form,
   so it reads as a control rather than as another text field. */
.company-pick select {
  height: var(--ctl-h);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  background-color: var(--panel-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  padding: 0 28px 0 10px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.company-pick select:hover { border-color: #c9d0e0; }
.company-pick select:focus {
  outline: none;
  border-color: var(--input-focus);
  box-shadow: var(--focus-ring);
}

/* ── Consistent control heights ───────────────────────────────────── */
.ff input, .ff select { height: var(--ctl-h); }
.ff textarea { min-height: 62px; padding-top: 8px; }
.ff input[type="date"] { padding-right: 8px; }
input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  min-width: 0;
  max-width: 100%;
  text-align: left;
  line-height: normal;
}
input[type="date"]::-webkit-date-and-time-value { text-align: left; margin: 0; }
input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0.6; cursor: pointer; }

.inline-field input, .inline-field select { height: var(--ctl-h-sm); }

.btn-primary, .btn-secondary { min-height: var(--ctl-h); }
.btn-ghost { min-height: var(--ctl-h); }
.btn-xs { min-height: 24px; }
.btn-primary, .btn-secondary, .btn-ghost, .btn-xs, .nav-tab, .tmpl-tab, .zoom-btn {
  cursor: pointer;
  font-family: var(--font);
}

/* Money reads as money: no spinner arrows, digits aligned */
input[type="number"] { font-variant-numeric: tabular-nums; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }
.item-unit { width: 64px; }
.catalog-form { margin-top: 14px; align-items: end; }
.catalog-actions { display: flex; gap: 6px; }
.item-qty, .item-price, .spec-qty,
[name="amountRsd"], #setYearLimit, #setRollingLimit, #setRollingMonths { text-align: right; }

/* ── Keyboard focus is visible on every interactive element ───────── */
button:focus-visible, a:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
button:focus:not(:focus-visible) { outline: none; }

/* ── Signature status on the invoice form ─────────────────────────── */
.sig-status {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  padding: 9px 11px;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
}
.sig-thumb {
  height: 34px;
  width: auto;
  max-width: 120px;
  object-fit: contain;
  flex-shrink: 0;
}
.sig-status-text { font-size: 12px; color: var(--text-muted); line-height: 1.4; }
.sig-status-text strong { color: var(--text); font-weight: 600; }
.sig-status-text--empty { color: var(--text-light); }

#companySigCanvas { display: block; width: 100%; height: 110px; touch-action: none; }
.acc-group .sig-pad-wrap { background: #fff; margin-bottom: 7px; }
.sig-hint { font-size: 11px; color: var(--text-light); }

/* ── Tables ───────────────────────────────────────────────────────── */
/* Long ledgers stay readable while scrolling. */
#kpoTable .table-scroll { max-height: 62vh; overflow-y: auto; }
#kpoTable thead th {
  position: sticky;
  top: 0;
  background: var(--panel-bg);
  z-index: 1;
  box-shadow: inset 0 -1px 0 var(--panel-border);
}
.data-table tbody tr { transition: background 0.1s; }
.data-table td, .data-table th { white-space: nowrap; }
.data-table td.muted:not(.col-num) { white-space: normal; }

/* ── Empty states ─────────────────────────────────────────────────── */
.empty-note { padding: 22px 0; line-height: 1.5; }

/* ── Loading placeholder so the dashboard never flashes blank ─────── */
.lc-skeleton {
  height: 104px;
  border-radius: var(--radius);
  border: 1px solid var(--panel-border);
  background: linear-gradient(100deg, #f3f4f8 30%, #e9ebf2 50%, #f3f4f8 70%);
  background-size: 220% 100%;
  animation: shimmer 1.1s linear infinite;
}
@keyframes shimmer { from { background-position: 120% 0; } to { background-position: -20% 0; } }

/* ── Toasts ───────────────────────────────────────────────────────── */
#toastContainer { max-width: min(380px, calc(100vw - 32px)); }
.toast { line-height: 1.4; align-items: flex-start; }
.toast--success { box-shadow: 0 4px 16px rgba(0,0,0,0.2), inset 3px 0 0 var(--success); }
.toast--error { box-shadow: 0 4px 16px rgba(0,0,0,0.2), inset 3px 0 0 var(--danger); }
.toast--info { box-shadow: 0 4px 16px rgba(0,0,0,0.2), inset 3px 0 0 var(--accent); }
.toast > span:first-child { flex-shrink: 0; opacity: 0.85; }

/* ── Thin, quiet scrollbars ───────────────────────────────────────── */
.table-scroll::-webkit-scrollbar, .modal-body::-webkit-scrollbar,
.view::-webkit-scrollbar, .chart::-webkit-scrollbar { width: 8px; height: 8px; }
.table-scroll::-webkit-scrollbar-thumb, .modal-body::-webkit-scrollbar-thumb,
.view::-webkit-scrollbar-thumb, .chart::-webkit-scrollbar-thumb {
  background: #d6dae4; border-radius: 4px;
}
.table-scroll::-webkit-scrollbar-track, .modal-body::-webkit-scrollbar-track,
.view::-webkit-scrollbar-track, .chart::-webkit-scrollbar-track { background: transparent; }

/* ── Disabled state ───────────────────────────────────────────────── */
button:disabled { opacity: 0.55; cursor: not-allowed; }

/* ── Respect a reduced-motion preference ──────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Print: only the document ─────────────────────────────────────── */
@media print {
  #appSidebar, .bottom-nav, .inv-toolbar, #formPanel, .preview-bar, #toastContainer, .modal { display: none !important; }
}

/* ── Narrow screens ───────────────────────────────────────────────── */
@media (max-width: 820px) {
  .view-head { align-items: flex-start; }
  .view-head-actions { width: 100%; justify-content: space-between; }
  .kpo-add-form .ff, .kpo-add-form .ff-grow { flex: 1 1 100%; }
  .kpo-add-form button { width: 100%; justify-content: center; }
  .company-row { align-items: flex-start; }
  .inv-toolbar { gap: 8px; }
  .inv-toolbar-right { width: 100%; }
  #modalCompany .modal-box, .modal-box { max-width: calc(100vw - 24px); }
  /* Above the bottom bar, not under it. */
  #toastContainer { left: 16px; right: 16px; bottom: calc(84px + env(safe-area-inset-bottom)); max-width: none; }
}

/* Nothing may push the page sideways; only designated strips scroll. */
html, body { overflow-x: hidden; }

/* ── Signature tools ─────────────────────────────────────────────── */
.sig-tools { display: flex; gap: 5px; }
.sig-hint--tip { color: var(--text-light); margin-top: 3px; }
/* Chequerboard shows that the imported signature is genuinely transparent */
.acc-group .sig-pad-wrap {
  background-color: #fff;
  background-image:
    linear-gradient(45deg, #f1f2f6 25%, transparent 25%, transparent 75%, #f1f2f6 75%),
    linear-gradient(45deg, #f1f2f6 25%, transparent 25%, transparent 75%, #f1f2f6 75%);
  background-size: 14px 14px;
  background-position: 0 0, 7px 7px;
}
#companySigCanvas { cursor: crosshair; }

/* ── Ledger filter bar ────────────────────────────────────────────── */
.filter-bar {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  padding: 11px 12px;
  margin-bottom: 13px;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
}
.filter-field { display: flex; flex-direction: column; gap: 4px; min-width: 128px; }
.filter-field--grow { flex: 1 1 180px; }
.filter-field > span {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.filter-field select, .filter-field input {
  height: var(--ctl-h);
  font-family: var(--font);
  font-size: 13px;
  color: var(--text);
  background-color: var(--panel-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  padding: 0 10px;
  width: 100%;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.filter-field select { padding-right: 28px; }
.filter-field select:focus, .filter-field input:focus {
  outline: none;
  border-color: var(--input-focus);
  box-shadow: var(--focus-ring);
}
.filter-bar .btn-xs { min-height: var(--ctl-h); padding: 0 12px; }

/* ── Sortable headers ─────────────────────────────────────────────── */
.data-table th.th-sort {
  cursor: pointer;
  user-select: none;
  transition: color 0.12s;
}
.data-table th.th-sort:hover { color: var(--text); }
.sort-arrow {
  display: inline-block;
  margin-left: 4px;
  font-size: 9px;
  opacity: 0;
  transition: opacity 0.12s;
}
.data-table th.th-sort:hover .sort-arrow { opacity: 0.45; }
.sort-arrow--on { opacity: 1; color: var(--accent); }

@media (max-width: 820px) {
  .filter-field, .filter-field--grow { flex: 1 1 100%; }
  .filter-bar .btn-xs { width: 100%; }
}

/* ── Pagination ───────────────────────────────────────────────────── */
.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  margin-top: 2px;
  border-top: 1px solid var(--panel-border);
  flex-wrap: wrap;
}
.pager-info { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pager-buttons { display: flex; align-items: center; gap: 8px; }
.filter-field--narrow { min-width: 96px; flex: 0 0 auto; }

/* ── A long note must not stretch the table to thousands of pixels ── */
.data-table td.cell-note {
  max-width: 260px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-muted);
}

/* ── Inline row editing ───────────────────────────────────────────── */
.data-table tr.row-editing td {
  background: #eef2ff;
  padding-top: 5px;
  padding-bottom: 5px;
}
.data-table tr.row-editing input {
  width: 100%;
  min-width: 84px;
  height: 28px;
  font-family: var(--font);
  font-size: 12.5px;
  color: var(--text);
  background: var(--panel-bg);
  border: 1px solid var(--input-border);
  border-radius: 4px;
  padding: 0 7px;
}
.data-table tr.row-editing input:focus {
  outline: none;
  border-color: var(--input-focus);
  box-shadow: var(--focus-ring);
}
.data-table tr.row-editing .edit-amount { text-align: right; font-variant-numeric: tabular-nums; }
.data-table tr.row-editing .edit-note { min-width: 150px; }

@media (max-width: 820px) {
  .pager { justify-content: center; }
  .pager-info { width: 100%; text-align: center; }
  .pager-buttons { width: 100%; justify-content: center; }
  .pager-buttons .btn-secondary { flex: 1; justify-content: center; }
  .data-table td.cell-note { max-width: 150px; }
  #view-invoices .filter-field--grow { flex: 1 1 100%; }
}

/* ── Confirmation dialog ──────────────────────────────────────────── */
.modal--confirm { z-index: 2500; }          /* sits above any modal it opens from */
.modal--confirm .modal-bg { background: rgba(12, 15, 26, 0.5); }
.modal--confirm .modal-box { max-width: 420px; }

.confirm-head { display: flex; align-items: flex-start; gap: 13px; }
.confirm-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fef2f2;
  color: var(--danger);
}
.modal--confirm:not(.modal--danger) .confirm-icon {
  background: rgba(15,118,110,0.1);
  color: var(--accent);
}
.confirm-copy h3 { font-size: 14.5px; font-weight: 650; line-height: 1.35; }
.confirm-copy p {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-top: 6px;
  /* The entry being deleted is named on its own line before the consequence. */
  white-space: pre-line;
}

.confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
}
.confirm-actions button { min-width: 96px; justify-content: center; }

.btn-danger {
  background: var(--danger);
  border: 1px solid var(--danger);
  color: #fff;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  min-height: var(--ctl-h);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  gap: 7px;
  transition: background 0.15s;
}
.btn-danger:hover { background: #dc2626; border-color: #dc2626; }

@media (max-width: 820px) {
  .confirm-actions { flex-direction: column-reverse; }
  .confirm-actions button { width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════
   Dark theme
   The header, nav and auth screen were already dark, so this recolours
   the panels. data-theme is always resolved to light or dark by the
   inline script, so the palette is defined exactly once.
   ══════════════════════════════════════════════════════════════════ */

[data-theme="dark"] {
  --bg: #0f131c;
  --panel-bg: #171c27;
  --panel-border: #262d3b;
  --divider: #222937;
  --accent-soft: #133a35;
  --mint-soft: #12352f;
  --mint-ink: #7be0c5;
  --info: #9d86ff;
  --info-soft: #2a2450;
  --info-ink: #b9abff;
  --text: #e9edf5;
  --text-muted: #9aa4b6;
  --text-light: #828b9e;
  --accent: #3ccfb1;
  --accent-hover: #6ee0c8;
  --on-accent: #0f131c;
  --danger: #f87171;
  --danger-soft: #3a1f1d;
  --danger-ink: #fca5a5;
  --warn: #fbbf24;
  --warn-soft: #3a2e10;
  --warn-ink: #fcd34d;
  --success: #34d399;
  --success-soft: #123026;
  --success-ink: #6ee7b0;
  --neutral-soft: #222a37;
  --input-bg: #11161f;
  --input-border: #2f3747;
  --input-focus: #3ccfb1;
  --focus-ring: 0 0 0 3px rgba(60,207,177,0.22);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.45), 0 1px 4px rgba(0,0,0,0.3);
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1.5 5 5.5 9 1.5' fill='none' stroke='%239aa3b2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  color-scheme: dark;
}

/* ── The printed document never follows the theme ─────────────────
   html2canvas captures what is on screen, so a dark preview would mean
   a dark PDF. #invoicePreview sets its own white background and .invoice
   its own ink; this pins the surroundings and the signature pad too. */
[data-theme="dark"] #previewPanel { background: #10121a; }
[data-theme="dark"] .preview-bar { background: #14171f; border-bottom-color: #262b38; }
[data-theme="dark"] .preview-label { color: var(--text-muted); }
[data-theme="dark"] .zoom-btn { border-color: #2e3442; color: var(--text-muted); background: #1b1f28; }
[data-theme="dark"] .zoom-btn:hover { background: #232834; color: var(--text); }
[data-theme="dark"] #previewOuter::-webkit-scrollbar-thumb { background: #333a48; }
[data-theme="dark"] #formPanel::-webkit-scrollbar-thumb { background: #333a48; }

/* The signature is ink destined for a white page, so its pad stays light. */
[data-theme="dark"] .sig-pad-wrap { background: #f8f9fb; border-color: #cbd3e0; }
[data-theme="dark"] .acc-group .sig-pad-wrap { background-color: #fff; }

/* ── Surfaces ─────────────────────────────────────────────────────── */
[data-theme="dark"] .tmpl-tab.active {
  background: var(--accent-soft);
  color: var(--accent);
  box-shadow: none;
}
[data-theme="dark"] .inv-toolbar { background: var(--panel-bg); border-bottom-color: var(--panel-border); }
[data-theme="dark"] .acc-group { background: rgba(255,255,255,0.03); }
[data-theme="dark"] .lc-bar { background: #262b38; }
[data-theme="dark"] .filter-bar { background: rgba(255,255,255,0.03); }

/* ── Buttons outside the dark header ─────────────────────────────── */
[data-theme="dark"] .btn-ghost:hover { background: rgba(255,255,255,0.07); color: var(--text); }
[data-theme="dark"] .btn-ghost--danger { color: #fca5a5; }
[data-theme="dark"] .btn-ghost--danger:hover { color: #fecaca; background: rgba(248,113,113,0.14); }
[data-theme="dark"] .btn-secondary { background: #1e222c; border-color: #2e3442; color: var(--text); }
[data-theme="dark"] .btn-secondary:hover { background: #262b38; border-color: #39404f; }
[data-theme="dark"] .btn-xs { border-color: #2e3442; }
[data-theme="dark"] .btn-xs:hover { border-color: var(--accent); color: var(--accent); }
[data-theme="dark"] .btn-clear-sig { border-color: rgba(248,113,113,0.4); color: #fca5a5; }
[data-theme="dark"] .btn-clear-sig:hover { background: rgba(248,113,113,0.12); }
[data-theme="dark"] .item-rm:hover { background: rgba(248,113,113,0.16); }
[data-theme="dark"] .btn-del-item:hover { background: rgba(248,113,113,0.14); }
[data-theme="dark"] .company-pick select:hover { border-color: #39404f; }

/* ── Tables ───────────────────────────────────────────────────────── */
[data-theme="dark"] .data-table td { border-bottom-color: #21262f; }
[data-theme="dark"] .data-table tbody tr:hover { background: rgba(255,255,255,0.035); }
[data-theme="dark"] .data-table tr.row-warn td { background: rgba(245,158,11,0.10); }
[data-theme="dark"] .data-table tr.row-danger td { background: rgba(248,113,113,0.12); }
[data-theme="dark"] .data-table tr.row-editing td { background: rgba(60,207,177,0.13); }
[data-theme="dark"] #kpoTable thead th {
  background: var(--panel-bg);
  box-shadow: inset 0 -1px 0 var(--panel-border);
}
[data-theme="dark"] .table-scroll::-webkit-scrollbar-thumb,
[data-theme="dark"] .modal-body::-webkit-scrollbar-thumb,
[data-theme="dark"] .view::-webkit-scrollbar-thumb,
[data-theme="dark"] .chart::-webkit-scrollbar-thumb { background: #333a48; }

/* ── Status colours: brighter, since dark backgrounds eat contrast ── */
[data-theme="dark"] .rolloff-amount { color: #34d399; }
[data-theme="dark"] .impact-row { background: rgba(255,255,255,0.04); }
[data-theme="dark"] .impact-warn { background: rgba(245,158,11,0.12); border-left-color: #fbbf24; }
[data-theme="dark"] .impact-danger { background: rgba(248,113,113,0.13); }
[data-theme="dark"] .chart-bar { background: var(--mint-soft); }
.chart-bar.chart-bar--now { background: var(--accent); }
[data-theme="dark"] .lc-skeleton {
  background: linear-gradient(100deg, #1a1e28 30%, #232834 50%, #1a1e28 70%);
  border-color: var(--panel-border);
}

/* ── Auth, modals, toasts ─────────────────────────────────────────── */
[data-theme="dark"] .auth-card { box-shadow: 0 20px 60px rgba(0,0,0,0.6); }
[data-theme="dark"] .modal-bg { background: rgba(0,0,0,0.68); }
[data-theme="dark"] .modal--confirm .modal-bg { background: rgba(0,0,0,0.7); }
[data-theme="dark"] .modal-box { box-shadow: 0 20px 60px rgba(0,0,0,0.6); }
[data-theme="dark"] .confirm-icon { background: rgba(248,113,113,0.15); }
[data-theme="dark"] .modal--confirm:not(.modal--danger) .confirm-icon { background: rgba(60,207,177,0.16); }
[data-theme="dark"] .toast { background: #262b38; border: 1px solid #333a48; }
[data-theme="dark"] .saved-item:hover { background: rgba(255,255,255,0.035); }
[data-theme="dark"] .sig-status { background: var(--input-bg); border-color: var(--input-border); }
[data-theme="dark"] .sig-hint { color: var(--text-light); }
[data-theme="dark"] .fsec-note { color: var(--text-light); }

/* ── Theme toggle ─────────────────────────────────────────────────── */
.theme-toggle .theme-btn { padding: 4px 8px; display: grid; place-items: center; }
.theme-toggle .theme-btn svg { display: block; }

/* These use the `white` keyword, which the first pass over hex colours missed. */
[data-theme="dark"] .modal-box { background: var(--panel-bg); }
[data-theme="dark"] .fsec-head { background: var(--panel-bg); }
[data-theme="dark"] .ff input:focus,
[data-theme="dark"] .ff select:focus,
[data-theme="dark"] .ff textarea:focus,
[data-theme="dark"] .item-row input:focus,
[data-theme="dark"] .spec-row input:focus { background: #232834; }

@media (max-width: 340px) {
  /* Let the freed-up amount drop to its own line rather than be clipped. */
  .rolloff-row { flex-wrap: wrap; gap: 2px 12px; }
  .rolloff-amount { width: 100%; text-align: right; }
}

/* ── Theme toggle: the selected option has to be unmistakable ─────── */
.theme-toggle .theme-btn--auto {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 0 9px;
}
.side-toggles .lang-btn.active { background: var(--accent); color: var(--on-accent); box-shadow: none; }

/* ── Inline notice ────────────────────────────────────────────────
   Only an error inside a dialog uses it now; the dashboard's reminders
   became rows of the to-do list. */
.notice {
  padding: 12px 14px;
  border-radius: var(--radius);
  background: var(--warn-soft);
  color: var(--warn-ink);
  font-size: 13px;
}

/* ── Status chips ─────────────────────────────────────────────────── */
.badge-warn { background: var(--warn-soft); color: var(--warn-ink); }
.badge-danger { background: var(--danger-soft); color: var(--danger-ink); }

.notice--danger { background: var(--danger-soft); color: var(--danger-ink); }

/* ── Two-basis cross-check ────────────────────────────────────────── */
.basis-why { font-size: 12.5px; color: var(--text-muted); line-height: 1.55; margin-bottom: 14px; }
.basis-table { display: flex; flex-direction: column; gap: 2px; }
.basis-row {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid var(--panel-border);
}
.basis-row:last-child { border-bottom: none; }
.basis-label { font-size: 12.5px; font-weight: 600; }
.basis-figure { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.basis-figure em {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.basis-figure strong { font-size: 14px; font-variant-numeric: tabular-nums; }
.basis-ok { color: var(--text); }
.basis-warn { color: #d97706; }
.basis-danger { color: var(--danger); }
[data-theme="dark"] .basis-warn { color: #fbbf24; }
.basis-pct { font-size: 11.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.basis-note { font-size: 11.5px; color: var(--text-light); line-height: 1.5; margin-top: 10px; }

@media (max-width: 620px) {
  .basis-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .basis-label { margin-bottom: 2px; }
}

.basis-note--warn { color: var(--danger); font-weight: 600; }

/* ── Ledger provenance ────────────────────────────────────────────── */
.link-btn {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  white-space: nowrap;
}
.link-btn:hover { text-decoration: underline; }
.muted-sm { font-size: 11.5px; color: var(--text-light); white-space: nowrap; }

/* Action buttons keep their label on one line; the field next to them yields. */
.view-head-actions .btn-primary,
.view-head-actions .btn-secondary,
.view-head-actions .btn-ghost { white-space: nowrap; flex-shrink: 0; }

/* ── KPO export dialog ─────────────────────────────────────────── */
.export-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 14px 0 4px;
}

.chip-btn {
  padding: 5px 11px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 999px;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}

.chip-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.export-preview {
  margin: 14px 0 0;
  padding: 10px 12px;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  text-align: center;
}

.export-preview--empty { color: var(--danger); }

.export-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

.export-actions .btn-primary { flex: 1; }

.export-actions button:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* ── Taxes ─────────────────────────────────────────────────────── */
.tax-due { display: flex; flex-direction: column; gap: 8px; }

.tax-due-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 12px;
}

.tax-due-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 200px; }
.tax-due-label { font-weight: 600; font-size: 13px; }
.tax-due-period { font-size: 11.5px; color: var(--text-muted); }

.tax-due-amount {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
}

.tax-due-actions { display: flex; gap: 6px; margin-left: auto; }

.tax-grid-m { text-align: center !important; }
.tax-grid-label {
  font-weight: 600;
  font-size: 12.5px;
  text-align: left;
  white-space: nowrap;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tax-cell { text-align: center; }

.tax-dot {
  display: inline-block;
  width: 15px;
  height: 15px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 5px;
  cursor: pointer;
  vertical-align: middle;
  transition: transform .1s, box-shadow .1s;
}
.tax-dot:hover { transform: scale(1.18); }
.tax-dot:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.tax-dot--paid    { background: var(--success); }
.tax-dot--overdue { background: var(--danger); }
.tax-dot--due     { background: var(--warn); }
.tax-dot--open    { background: var(--input-bg); border-color: var(--input-border); }

.tax-legend {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 14px 0 0;
  font-size: 11.5px;
  color: var(--text-muted);
}
.tax-legend .tax-dot { cursor: default; margin-left: 10px; }
.tax-legend .tax-dot:first-child { margin-left: 0; }
.tax-legend .tax-dot:hover { transform: none; }

/* The QR must stay on white in both themes — a phone camera reads contrast,
   and a dark-inverted code does not scan. */
.qr-wrap {
  padding: 14px;
  text-align: center;
  background: #fff;
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
}

/* A definite width, not 100%: the wrapper sizes to its content, so a
   percentage width here resolves against nothing and collapses to zero. */
.qr-wrap svg { display: inline-block; width: 260px; max-width: 100%; height: auto; }

.qr-mark {
  margin: 6px 0 0;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-align: center;
  color: var(--text-muted);
}

.qr-detail {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 5px 14px;
  margin: 14px 0 0;
  font-size: 12.5px;
}
.qr-detail dt { color: var(--text-muted); }
.qr-detail dd { margin: 0; font-weight: 600; word-break: break-word; }

.modal-note {
  margin: 12px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-muted);
}

.row-muted { opacity: .55; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }

@media (max-width: 620px) {
  .tax-due-actions { margin-left: 0; width: 100%; }
  .tax-due-actions .btn-xs { flex: 1; }
}

/* ── NBS IPS QR on the invoice ─────────────────────────────────── */
.inv-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.inv-foot .inv-signature { margin-left: auto; }

.inv-qr {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 20px 0 8px 56px;
}
.invoice.template-modern .inv-qr,
.invoice.template-corporate .inv-qr { padding-left: 48px; }

/* Fixed size and white ground in both themes: a phone camera reads contrast,
   and the code must not scale with the zoom control. */
/* 116px lands at roughly 30 mm on the A4 page, which keeps a 61-module code at
   about 0.5 mm per module — the practical floor for scanning off paper. */
.inv-qr-img {
  display: block;
  width: 116px;
  height: 116px;
  background: #fff;
}

/* The NBS requires this mark beside the code wherever it is printed. */
.inv-qr-mark {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .08em;
  color: #999;
}

.preview-hint {
  margin-left: 10px;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 600;
  color: var(--warn-ink);
  background: var(--warn-soft);
  border-radius: 999px;
  white-space: nowrap;
}

/* ── Standard obligations wizard ───────────────────────────────── */
.std-rows { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }

.std-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 9px 10px;
}

.std-row-label { font-size: 12.5px; font-weight: 600; }
.std-row-fields { display: flex; gap: 8px; }
.std-row-account { flex: 1; min-width: 0; font-size: 12px; }
.std-row-amount { width: 128px; flex: 0 0 auto; text-align: right; }
/* The decision's rows are form fields like any other; they had no styling at
   all and rendered as bare browser inputs. */
.std-row-fields input {
  height: var(--ctl-h);
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  padding: 0 10px;
  color: var(--text);
  font-family: var(--font);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.std-row-fields input:focus {
  outline: none;
  border-color: var(--input-focus);
  box-shadow: 0 0 0 3px rgba(15,118,110,0.12);
}
.std-row-fields input.mono { font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace); }

.empty { text-align: center; padding: 22px 12px; color: var(--text-muted); }
.empty p { margin: 0 0 14px; }

@media (max-width: 520px) {
  .std-row-fields { flex-direction: column; }
  .std-row-amount { width: 100%; text-align: left; }
}

.tax-due-note {
  margin: 0 0 12px;
  font-size: 12.5px;
  color: var(--text-muted);
}

/* ── Toggle ─────────────────────────────────────────────────────────
   A labelled on/off switch. First one in the app; anything needing a
   boolean should compose this rather than styling a bare checkbox. */
.toggle {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  /* The hidden checkbox below is absolutely positioned, so this has to be its
     containing block. Without it the input was laid out against the initial
     containing block and did not scroll with #formPanel: scroll down to the
     switch and the input stayed 1657px behind it. Clicking the label focuses
     that input, the browser scrolls to reveal it, and a 100vh layout jumps its
     whole content off screen — a blank page, no error, no request. */
  position: relative;
}

.toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.toggle-track {
  flex: 0 0 auto;
  position: relative;
  width: 34px;
  height: 20px;
  margin-top: 1px;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 999px;
  transition: background .15s, border-color .15s;
}

.toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  background: var(--text-light);
  border-radius: 50%;
  transition: transform .15s, background .15s;
}

.toggle input:checked + .toggle-track {
  background: var(--accent);
  border-color: var(--accent);
}
.toggle input:checked + .toggle-track .toggle-knob {
  background: #fff;
  transform: translateX(14px);
}
.toggle input:focus-visible + .toggle-track { box-shadow: var(--focus-ring); }

.toggle-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.toggle-title { font-size: 12.5px; font-weight: 600; color: var(--text); }
.toggle-hint { font-size: 11px; color: var(--text-muted); line-height: 1.45; }

/* ══════════════════════════════════════════════════════════════════
   Phone
   Tables that scrolled sideways hid their most important column (the
   amount in the KPO book, every month after February in the tax grid)
   behind a swipe nobody makes. Under 620px each becomes a stack of
   cards instead; under 820px the editor shows the form or the preview,
   never both stacked with a scroll inside a scroll.
   ══════════════════════════════════════════════════════════════════ */
.editor-switch { display: none; }

@media (max-width: 820px) {
  #view-invoice.view--active { overflow: visible; }
  .inv-toolbar {
    position: sticky;
    top: 0;
    z-index: 30;
    padding: 8px 14px;
  }
  .editor-switch { display: flex; width: 100%; }
  /* The bar sticks while the form scrolls; on a phone it keeps only what acts. */
  .inv-title { display: none; }
  .editor-switch .tmpl-tab { flex: 1; }
  .form-tmpl-label { display: none; }
  .inv-toolbar-left, .inv-toolbar-left .tmpl-tabs { width: 100%; }
  /* The template is picked while looking at the page, so on the form it
     would only cost the sticky bar a row. */
  #view-invoice:has(#appBody:not(.show-preview)) .inv-toolbar-left { display: none; }
  .inv-toolbar-left .tmpl-tab { flex: 1; }
  .inv-toolbar-right { flex-wrap: nowrap; }
  .inv-toolbar-right .hdr-divider { display: none; }
  #btnSaveInvoice, #btnGeneratePDF { flex: 1; justify-content: center; white-space: nowrap; }

  #formPanel { height: auto; overflow: visible; border-bottom: none; }
  #previewPanel { display: none; height: auto; }
  #appBody.show-preview #formPanel { display: none; }
  #appBody.show-preview #previewPanel { display: flex; }
  #previewOuter { overflow: visible; padding: 16px 0; }
}

@media (max-width: 620px) {
  /* Filters: the two selects share a line, the search gets its own. */
  .filter-field { flex: 1 1 calc(50% - 5px); min-width: 0; }
  .filter-field--grow { flex: 1 1 100%; }
  .filter-field--narrow { flex: 1 1 calc(50% - 5px); }

  /* The desktop ledger scrolls inside a 62vh box; on a phone the page scrolls. */
  #kpoTable .table-scroll { max-height: none; overflow-y: visible; }
  .table-scroll:has(> .kpo-table),
  .table-scroll:has(> .obl-table),
  .table-scroll:has(> .tax-grid) { overflow-x: visible; }

  /* ── KPO book ── */
  .kpo-table thead { display: none; }
  .kpo-table tbody tr {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) auto;
    grid-template-areas:
      "ord number amount"
      ".   date   source"
      ".   orig   orig"
      ".   note   actions";
    align-items: center;
    gap: 3px 10px;
    padding: 11px 0;
    border-bottom: 1px solid var(--panel-border);
  }
  .kpo-table tbody td { display: block; padding: 0; border: none; max-width: none; }
  .kpo-table .c-ord { grid-area: ord; color: var(--text-light); }
  .kpo-table .c-number { grid-area: number; font-weight: 600; }
  .kpo-table .c-amount { grid-area: amount; text-align: right; }
  .kpo-table .c-date { grid-area: date; font-size: 11.5px; color: var(--text-muted); }
  .kpo-table .c-source { grid-area: source; justify-self: end; }
  .kpo-table .c-orig { grid-area: orig; text-align: left; font-size: 11.5px; }
  .kpo-table .c-note { grid-area: note; font-size: 11.5px; color: var(--text-muted); white-space: normal; }
  .kpo-table .col-actions { grid-area: actions; justify-self: end; }
  .kpo-table .c-orig.is-empty,
  .kpo-table td.c-note:empty,
  .kpo-table .col-actions:not(:has(button)) { display: none; }
  .kpo-table .row-editing input { width: 100%; }
  /* Tint the card being edited as one block, not cell by cell. */
  .kpo-table tbody tr.row-editing { background: var(--input-bg); border-radius: var(--radius-sm); padding: 11px 8px; }
  /* Outranks the dark theme's per-cell tint, (0,3,2). */
  .data-table.kpo-table tbody tr.row-editing td { background: none; }
  .kpo-table tfoot tr { display: flex; justify-content: space-between; padding-top: 10px; }
  .kpo-table tfoot td { padding: 0; border: none; }
  .kpo-table tfoot td:empty { display: none; }

  /* ── Tax year grid: the name over its twelve months ── */
  .tax-grid, .tax-grid thead, .tax-grid tbody { display: block; }
  .tax-grid tr {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: center;
  }
  .tax-grid th, .tax-grid td { padding: 4px 0; border: none; text-align: center; }
  .tax-grid thead th:first-child,
  .tax-grid thead th:last-child { display: none; }
  .tax-grid thead th { font-size: 9px; letter-spacing: 0; }
  .tax-grid tbody tr { row-gap: 2px; padding: 8px 0; border-bottom: 1px solid var(--panel-border); }
  .tax-grid .tax-grid-label {
    grid-column: 1 / -1;
    max-width: none;
    white-space: normal;
    text-align: left;
    text-transform: none;
    letter-spacing: 0;
  }
  .tax-grid tbody td.col-num {
    grid-column: 1 / -1;
    text-align: right;
    font-size: 11.5px;
    color: var(--text-muted);
  }

  /* ── Tax obligations ── */
  .obl-table thead { display: none; }
  .obl-table tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "label   amount"
      "account due"
      "ref     actions";
    align-items: center;
    gap: 3px 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--panel-border);
  }
  .obl-table tbody td { display: block; padding: 0; border: none; }
  .obl-table .c-label { grid-area: label; font-weight: 600; }
  .obl-table .c-amount { grid-area: amount; font-weight: 600; text-align: right; }
  .obl-table .c-account { grid-area: account; font-size: 11.5px; }
  .obl-table .c-due { grid-area: due; justify-self: end; font-size: 11.5px; color: var(--text-muted); }
  .obl-table .c-ref { grid-area: ref; font-size: 11.5px; color: var(--text-muted); }
  .obl-table .col-actions { grid-area: actions; justify-self: end; }
}


/* ── Status badge dot (dizajn sistem) ─────────────────────────── */
.badge-ok, .badge-warn, .badge-danger, .badge-muted, .badge-info {
  display: inline-flex; align-items: center; gap: 5px;
}
.badge-ok::before, .badge-warn::before, .badge-danger::before, .badge-muted::before, .badge-info::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; opacity: .85; flex: none;
}