/* ============================================================================
   White Rook Knjige — app.css
   White Rook dizajn sistem (izvor: S:\Elegant render english\docs\design-handoff,
   Brand Guidelines v1.0): beli/near-black kanvas, siva struktura, JEDAN zeleni
   akcenat #00D98A (tekst na zelenom #06120C, nikad beo), Inter Tight + JetBrains
   Mono, radius 4px, motion cubic-bezier(0.2,0,0,1) 120/200/360ms — fade > slide,
   bez petlji („motion confirms, never decorates").
   Dve teme kroz data-theme na <html>: dark (podrazumevana) i light.
   Raspored ekrana i dalje prati prototip D; boje/tipografija po WR sistemu
   (odluka vlasnika, 21.07.2026 — vidi implementation-notes).
   Bez build koraka; fontovi vendorovani u static/fonts/ (OFL licenca).
   ============================================================================ */

/* ── Fontovi: Inter Tight (UI) + JetBrains Mono (cifre/specifikacije) ─────── */
@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/intertight-latin-ext.496654ac82a3.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/intertight-latin.f5af7a761c2b.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/jbmono-latin-ext.bd4781a31b42.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/jbmono-latin.b636a65da4f0.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Tokeni ── dark je podrazumevana tema (WR portal pattern) ─────────────── */
:root {
  color-scheme: dark;
  --bg:#0a0a0a; --panel:#141414; --panel2:#1d1d1d; --backdrop:#060606;
  --ink:#f5f5f5; --muted:#a3a3a3;
  --line:#262626; --line-strong:#3a3a3a;
  /* JEDAN akcenat — WR zelena; tekst na zelenom je uvek tamni. */
  --accent:#00D98A; --accent-hover:#00C77E; --accent-press:#00B372; --accent-ink:#06120C;
  /* Semantička stanja: ok = brend zelena; ćilibar SAMO za upozorenja (docnja/rok). */
  --ok:#00D98A; --warn:#D9A441; --danger:#E0655A; --sef:#7FA3D9;
  /* Izvedene pilule/linije — automatski prate temu. */
  --accent-bg:color-mix(in srgb, var(--accent) 13%, transparent);
  --accent-line:color-mix(in srgb, var(--accent) 45%, transparent);
  --ok-bg:color-mix(in srgb, var(--ok) 12%, transparent);
  --ok-line:color-mix(in srgb, var(--ok) 40%, transparent);
  --warn-bg:color-mix(in srgb, var(--warn) 12%, transparent);
  --warn-line:color-mix(in srgb, var(--warn) 40%, transparent);
  --danger-bg:color-mix(in srgb, var(--danger) 12%, transparent);
  --danger-line:color-mix(in srgb, var(--danger) 40%, transparent);
  --sef-bg:color-mix(in srgb, var(--sef) 12%, transparent);
  --sef-line:color-mix(in srgb, var(--sef) 40%, transparent);
  --ring:color-mix(in srgb, var(--accent) 30%, transparent);
  --shadow-hover:0 1px 3px rgba(0,0,0,.5);
  --header-bg:color-mix(in srgb, var(--panel) 85%, transparent);
  --font-ui:"Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:"JetBrains Mono", ui-monospace, 'SF Mono', Consolas, monospace;
  --radius:4px; --radius-lg:4px;
  /* Motion sistem (Brand Guidelines): jedan easing, tri trajanja. */
  --ease:cubic-bezier(0.2, 0, 0, 1);
  --t-press:120ms; --t-hover:200ms; --t-reveal:360ms;
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg:#ffffff; --panel:#ffffff; --panel2:#fafafa; --backdrop:#f4f4f4;
  --ink:#111111; --muted:#525252;
  --line:#e8e8e8; --line-strong:#d4d4d4;
  /* Tekstualne varijante stanja potamnjene za čitljivost na belom. */
  --ok:#0B7A55; --warn:#9A6A1F; --danger:#B42318; --sef:#2F5FA8;
  --shadow-hover:0 1px 3px rgba(17,17,17,.06);
}

* { box-sizing:border-box; margin:0; }
.visually-hidden {
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0, 0, 0, 0) !important;
  white-space:nowrap !important;
  border:0 !important;
}
html { scroll-behavior:smooth; }
body { font-family:var(--font-ui); background:var(--bg); color:var(--ink); font-size:13px; -webkit-font-smoothing:antialiased; }
a { color:inherit; }
button { font:inherit; }
.mono, .num { font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-size:.96em; }
[hidden] { display:none !important; }
/* Tranzicija boja pri promeni teme — klasu nakratko dodaje app.js. */
html.theming, html.theming *, html.theming *::before, html.theming *::after {
  transition:background-color var(--t-hover) var(--ease), color var(--t-hover) var(--ease), border-color var(--t-hover) var(--ease) !important;
}

/* ── Ljuska (raspored po prototipu D; boje WR) ────────────────────────────── */
header { display:flex; align-items:center; gap:14px; padding:8px 16px; background:var(--header-bg); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5; }
.logo { display:flex; align-items:center; gap:9px; font-weight:400; letter-spacing:-.01em; font-size:14px; color:var(--ink); text-decoration:none; }
.logo b { font-weight:650; }
.logo .logo-sub { color:var(--muted); font-weight:400; margin-left:1px; }
.logo .logo-icon { display:block; flex-shrink:0; }
:root[data-theme="light"] .logo .logo-icon { filter:invert(1); }
a.logo:hover .logo-sub { color:var(--ink); }
.tabs { display:flex; gap:2px; background:var(--panel2); border:1px solid var(--line); border-radius:calc(var(--radius) + 2px); padding:2px; }
.tabs button { background:none; border:none; color:var(--muted); padding:6px 14px; border-radius:var(--radius); cursor:pointer; font-size:12.5px; transition:color var(--t-hover) var(--ease), background-color var(--t-hover) var(--ease); }
.tabs button[aria-selected="true"] { background:var(--bg); color:var(--ink); box-shadow:inset 0 0 0 1px var(--line); }
.tabs button:focus-visible { outline:3px solid var(--ring); }
.shadow-flag { font-size:11px; font-family:var(--font-mono); letter-spacing:.04em; color:var(--warn); border:1px solid var(--warn-line); background:var(--warn-bg); padding:4px 10px; border-radius:var(--radius); }
.cmd { margin-left:auto; display:flex; align-items:center; gap:8px; background:var(--panel2); border:1px solid var(--line); border-radius:var(--radius); padding:6px 12px; color:var(--muted); font-size:12.5px; min-width:250px; cursor:text; }
.cmd kbd { margin-left:auto; }
kbd { font-family:var(--font-mono); font-size:10.5px; background:var(--panel2); border:1px solid var(--line); border-bottom-width:2px; border-radius:var(--radius); padding:1px 5px; color:var(--muted); }
.new { background:var(--accent); color:var(--accent-ink); border:none; font-weight:600; padding:8px 14px; border-radius:var(--radius); cursor:pointer; text-decoration:none; font-size:13px; transition:background-color var(--t-press) var(--ease); }
.new:hover { background:var(--accent-hover); }
.new:active { background:var(--accent-press); }
.new[aria-disabled="true"] { opacity:.5; cursor:not-allowed; }

/* Prekidač teme (slider) */
.theme-toggle { position:relative; width:40px; height:22px; flex-shrink:0; background:var(--panel2); border:1px solid var(--line); border-radius:999px; cursor:pointer; padding:0; transition:background-color var(--t-hover) var(--ease), border-color var(--t-hover) var(--ease); }
.theme-toggle:hover { border-color:var(--line-strong); }
.theme-toggle:focus-visible { outline:3px solid var(--ring); }
.theme-toggle .theme-thumb { position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:var(--muted); transition:transform var(--t-hover) var(--ease), background-color var(--t-hover) var(--ease); }
:root[data-theme="light"] .theme-toggle .theme-thumb { transform:translateX(18px); background:var(--accent); }

/* ── Modul-nav ────────────────────────────────────────────────────────────── */
.nav { display:flex; gap:4px; align-items:center; padding:0 16px; background:var(--panel); border-bottom:1px solid var(--line); overflow-x:auto; }
.nav-link { position:relative; padding:9px 12px; color:var(--muted); text-decoration:none; font-size:12.5px; white-space:nowrap; transition:color var(--t-hover) var(--ease); }
.nav-link::after { content:""; position:absolute; left:12px; right:12px; bottom:0; height:2px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform var(--t-hover) var(--ease); }
.nav-link:hover { color:var(--ink); }
.nav-link.active { color:var(--ink); }
.nav-link.active::after { transform:scaleX(1); }
.nav-link.is-soon { opacity:.45; cursor:not-allowed; }
.nav-gear { margin-left:auto; }
.nav .nav-btn { background:none; border:none; cursor:pointer; }

/* ── Keysbar ──────────────────────────────────────────────────────────────── */
.keysbar { display:flex; gap:18px; align-items:center; background:var(--panel); border-top:1px solid var(--line); padding:7px 16px; font-size:12px; color:var(--muted); position:sticky; bottom:0; }
.keysbar span b { color:var(--ink); font-weight:500; }

/* ── Content ──────────────────────────────────────────────────────────────── */
.content { min-height:calc(100vh - 140px); animation:wr-fade var(--t-reveal) var(--ease); }

/* ── Fiksni okvir (stranice registara) ───────────────────────────────────────
   Ljuska je zakucana za ekran i jedina skrolujuća oblast je mreža. Tako
   zaglavlje kolona ostaje u okviru ekrana, vodoravna traka je uvek na dnu
   ekrana (ne na dnu tabele), a stranične kontrole su uvek pri ruci. Stranice
   koje ne postave `app-frame` ponašaju se kao i pre — obična skrol-stranica. */
body.app-frame { height:100dvh; overflow:hidden; display:flex; flex-direction:column; }
body.app-frame > header,
body.app-frame > .nav,
body.app-frame > .keysbar { flex:none; position:static; }
body.app-frame > .content { flex:1; min-height:0; display:flex; }

/* ── Motion primitive ─────────────────────────────────────────────────────── */
@keyframes wr-fade { from { opacity:0; } to { opacity:1; } }
@keyframes wr-rise { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }
@keyframes wr-pulse {
  0% { box-shadow:0 0 0 0 transparent; }
  20% { box-shadow:0 0 0 4px color-mix(in srgb, currentColor 30%, transparent); }
  100% { box-shadow:0 0 0 10px transparent; }
}
.htmx-settling { animation:wr-fade var(--t-hover) var(--ease); }
#view-pregled:not([hidden]), #view-tabela:not([hidden]) { animation:wr-fade var(--t-hover) var(--ease); }
details.disclose[open] .disclose-body { animation:wr-rise var(--t-hover) var(--ease); }

/* ============================================================================
   WS-K komponentna biblioteka — raspored stranice
   ============================================================================ */

/* Univerzalni omotač sadržaja; .slim za forme, .mid za detalje. `min-width:0`
   sprečava široke tabele da prošire roditelja izvan viewporta umesto da se
   skroluju u svom omotaču. */
.content-pad { width:100%; min-width:0; padding:16px 20px 28px; max-width:1280px; margin:0 auto; }
.content-pad.slim { max-width:780px; }
.content-pad.mid { max-width:1000px; }
/* Izveštaji Glavne knjige imaju mnogo brojčanih kolona: na širokom ekranu koriste
   više prostora nego forme, ali zadržavaju gornju granicu da red teksta ne postane
   nečitljivo dugačak. Registri idu preko `.list-page` i nemaju granicu. */
.content-pad.wide { max-width:1720px; }

/* Zaglavlje stranice: naslov + akcije; .push gura ostatak udesno. */
.toolbar, .page-header { display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.page-title, .toolbar h1, .page-header h1 { font-size:16px; font-weight:600; margin:0; letter-spacing:-.015em; }
.push { margin-left:auto; }
.page-sub { color:var(--muted); font-size:12px; }

/* GET filter forma u zaglavlju (od/do/na dan). */
.filter-form { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.filter-form label { color:var(--muted); font-size:12px; }
.filter-form .input, .filter-form select { width:auto; }

/* ── Tabele ──────────────────────────────────────────────────────────────── */
/* Osnovni omotač: uvek i vodoravni i uspravni scroll-kontejner. `max-height`
   je ono što oživljava lepljivo zaglavlje (`table.grid thead th` je sticky, ali
   sticky traži kontejner ograničene visine) i drži vodoravnu traku dohvatljivom
   bez odlaska na poslednji red. Registri preko ovoga stavljaju `.grid-scroll`
   koji visinu preuzima od fiksnog okvira umesto od ovog gornjeg ograničenja. */
.tablewrap {
  width:100%; max-width:100%; min-width:0;
  max-height:72vh; overflow:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  scrollbar-color:var(--line-strong) var(--panel2);
}
.tablewrap::-webkit-scrollbar { width:10px; height:10px; }
.tablewrap::-webkit-scrollbar-track { background:var(--panel2); }
.tablewrap::-webkit-scrollbar-thumb { background:var(--line-strong); border:2px solid var(--panel2); border-radius:999px; }
/* Kratke, ugnežđene tabele (detalji dokumenta, paneli) ne treba da imaju svoj
   skrol — `auto` visinu daje sadržaj, a lepljivo zaglavlje tu i nema svrhu. */
.tablewrap.tablewrap-auto { max-height:none; overflow:visible; }
.tablewrap { width:100%; max-width:100%; min-width:0; overflow-x:auto; overscroll-behavior-inline:contain; }
table.grid td.empty, table.grid .empty { color:var(--muted); padding:18px; }
tr.row-total { font-weight:600; }
tr.row-total td { border-top:2px solid var(--line-strong); }
tr.row-subtotal td { border-bottom:2px solid var(--line); color:var(--muted); }
td.strong, th.strong { font-weight:600; }
.cur { color:var(--muted); font-family:var(--font-mono); font-size:11px; margin-left:4px; }
.late-days { color:var(--danger); font-family:var(--font-mono); font-size:11px; }

/* ── Paneli i hub kartice ────────────────────────────────────────────────── */
.panel { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-lg); padding:14px 16px; transition:border-color var(--t-hover) var(--ease), box-shadow var(--t-hover) var(--ease); }
/* NBS IPS QR na nalogu za plaćanje: kôd na beloj podlozi (kontrast za skener u obe teme) + obavezna oznaka ispod. */
.qr-figure { margin:8px 0 0; display:inline-flex; flex-direction:column; align-items:center; gap:6px; }
.qr-figure img { display:block; background:#ffffff; border-radius:var(--radius); padding:8px; }
.qr-figure figcaption { margin-top:0; }
.panel + .panel { margin-top:14px; }
.panel-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:10px; }
.panel h2 { font-size:13px; font-weight:600; letter-spacing:-.01em; }
.hub { display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:12px; }
.hub-card { display:block; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-lg); padding:14px 16px; text-decoration:none; transition:border-color var(--t-hover) var(--ease), box-shadow var(--t-hover) var(--ease); }
.hub-card:hover { border-color:var(--line-strong); box-shadow:var(--shadow-hover); }
.hub-card h3 { font-size:13px; font-weight:600; margin-bottom:3px; letter-spacing:-.01em; }
.hub-card p { font-size:11.5px; color:var(--muted); line-height:1.45; }
.hub-card .hub-links { display:flex; gap:8px; margin-top:8px; }

/* ── Tekstualne pomoćne klase ────────────────────────────────────────────── */
.muted { color:var(--muted); }
.intro { color:var(--muted); margin:0 0 14px; line-height:1.55; }
.footnote { color:var(--muted); font-size:11.5px; margin-top:12px; max-width:760px; line-height:1.5; }
.empty-state { color:var(--muted); padding:28px 16px; text-align:center; }

/* ── Akcije u redovima tabele ────────────────────────────────────────────── */
.row-actions { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.inline-form { display:inline; }
details.disclose summary { list-style:none; cursor:pointer; }
details.disclose summary::-webkit-details-marker { display:none; }
details.disclose .disclose-body { margin-top:6px; display:flex; gap:6px; align-items:center; }

/* ── Podešavanja: rail + panel ────────────────────────────────────────────── */
.settings { display:grid; grid-template-columns:200px 1fr; gap:0; max-width:1100px; margin:18px auto; padding:0 20px; }
.settings-rail { display:flex; flex-direction:column; gap:2px; border-right:1px solid var(--line); padding-right:12px; }
.settings-tab { background:none; border:none; text-align:left; color:var(--muted); padding:8px 12px; border-radius:var(--radius); cursor:pointer; font-size:12.5px; text-decoration:none; transition:color var(--t-hover) var(--ease), background-color var(--t-hover) var(--ease); }
.settings-tab[aria-selected="true"] { background:var(--panel2); color:var(--ink); box-shadow:inset 2px 0 0 var(--accent); }
.settings-tab:focus-visible { outline:3px solid var(--ring); }
#settings-panel { padding-left:22px; min-width:0; }
#settings-panel h1 { font-size:16px; font-weight:600; margin-bottom:4px; letter-spacing:-.015em; }
#settings-panel .sub { color:var(--muted); font-size:12px; margin-bottom:16px; }

/* ── Forme ────────────────────────────────────────────────────────────────── */
.field { margin-bottom:14px; }
.field > label { display:block; font-family:var(--font-mono); font-size:10px; font-weight:500; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:5px; }
.input, textarea, select, input[type="text"], input[type="email"], input[type="number"], input[type="password"], input[type="date"] {
  width:100%; background:var(--panel2); color:var(--ink); border:1px solid var(--line); border-radius:var(--radius); padding:8px 10px; font:inherit;
  transition:border-color var(--t-hover) var(--ease);
}
input[type="checkbox"] { width:auto; accent-color:var(--accent); }
.input::placeholder, textarea::placeholder { color:var(--muted); }
.input:hover, textarea:hover, select:hover, input:hover { border-color:var(--line-strong); }
.input:focus, textarea:focus, select:focus, input:focus { outline:3px solid var(--ring); outline-offset:0; border-color:var(--accent); }
/* `background-size` je OBAVEZAN: SVG ima samo `viewBox`, bez `width`/`height`, pa nema sopstvenu
   veličinu — a slika bez sopstvene veličine se ponaša kao `contain` i razvuče se preko celog polja.
   Na uskom selectu („Redova · 50") strelica je tako narastala preko teksta i ličila na kvačicu. */
select { appearance:none; padding-right:30px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none' stroke='%23888888'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; background-size:10px 6px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 18px; }
.field .hint { font-size:11px; color:var(--muted); margin-top:4px; text-transform:none; letter-spacing:0; font-family:var(--font-ui); }
.field.has-error .input, .field.has-error input { border-color:var(--danger); }
.error { color:var(--danger); font-size:11.5px; }
.field .error { margin-top:4px; }
ul.errorlist, span.errorlist { color:var(--danger); font-size:11.5px; margin-top:4px; list-style:none; padding:0; display:block; }
.form-actions { display:flex; gap:8px; margin-top:18px; }

/* Flash poruke — jedinstven rečnik: ok/success, err/error, warning, info.
   Jednokratni puls je JEDINI „attention cue" u sistemu (Brand Guidelines). */
.flash { border-radius:var(--radius); padding:8px 12px; font-size:12px; margin-bottom:14px; animation:wr-pulse 800ms var(--ease); }
.flash.ok, .flash.success { color:var(--ok); border:1px solid var(--ok-line); background:var(--ok-bg); }
.flash.err, .flash.error, .flash.danger { color:var(--danger); border:1px solid var(--danger-line); background:var(--danger-bg); }
.flash.warning, .flash.warn { color:var(--warn); border:1px solid var(--warn-line); background:var(--warn-bg); }
.flash.info, .flash.debug { color:var(--sef); border:1px solid var(--sef-line); background:var(--sef-bg); }

/* ── Dugmad ───────────────────────────────────────────────────────────────── */
.btn { font:inherit; font-size:12px; padding:8px 14px; border-radius:var(--radius); border:1px solid var(--line); background:var(--panel2); color:var(--ink); cursor:pointer; text-decoration:none; display:inline-block; transition:border-color var(--t-hover) var(--ease), background-color var(--t-press) var(--ease), box-shadow var(--t-hover) var(--ease), color var(--t-hover) var(--ease); }
.btn:hover { border-color:var(--line-strong); box-shadow:var(--shadow-hover); }
.btn:focus-visible { outline:3px solid var(--ring); }
.btn-primary { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:600; }
.btn-primary:hover { background:var(--accent-hover); border-color:var(--accent-hover); }
.btn-primary:active { background:var(--accent-press); border-color:var(--accent-press); }
.btn-danger:hover { border-color:var(--danger); color:var(--danger); }
.btn-sm { padding:5px 9px; font-size:11.5px; }
.btn[disabled], .btn.is-loading { opacity:.6; pointer-events:none; }

/* ── Tabela računa (podešavanja) ─────────────────────────────────────────── */
.bank-table { width:100%; border-collapse:collapse; }
.bank-table th { font-family:var(--font-mono); font-size:10px; font-weight:500; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); text-align:left; padding:6px 8px; border-bottom:1px solid var(--line); }
.bank-table td { padding:7px 8px; border-bottom:1px solid var(--line); }
.bank-table .r { text-align:right; }

/* ── Login ────────────────────────────────────────────────────────────────── */
.auth-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; background:var(--backdrop); }
.auth-card { width:min(360px,100%); background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-lg); padding:26px 24px; animation:wr-rise var(--t-reveal) var(--ease); }
.auth-card .logo { justify-content:center; margin-bottom:18px; font-size:15px; }

/* ============================================================================
   Pregled + Radna tabela (raspored iz prototipa D, boje WR)
   ============================================================================ */

/* KPI */
.kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; padding:16px 20px 4px; max-width:1280px; margin:0 auto; }
.kpi { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-lg); padding:12px 16px; transition:border-color var(--t-hover) var(--ease); }
.kpi .l { font-family:var(--font-mono); font-size:10px; font-weight:500; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
.kpi .v { font-size:20px; font-weight:600; margin-top:4px; }
.kpi .d { font-size:11.5px; color:var(--muted); margin-top:2px; }
.kpi.pos .v { color:var(--ok); } .kpi.neg .v { color:var(--danger); }

/* Board */
.board { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; padding:14px 20px 28px; max-width:1280px; margin:0 auto; align-items:start; }
.col > h2 { font-family:var(--font-mono); font-size:10.5px; font-weight:500; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); padding:6px 4px 8px; display:flex; justify-content:space-between; border-bottom:2px solid var(--line); margin-bottom:10px; }
.col > h2 .sum { color:var(--ink); font-weight:600; }
.card { background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--line); border-radius:var(--radius-lg); padding:11px 12px; margin-bottom:10px; cursor:pointer; transition:border-color var(--t-hover) var(--ease), box-shadow var(--t-hover) var(--ease), background-color var(--t-hover) var(--ease); }
.card:hover { border-color:var(--line-strong); border-left-color:inherit; box-shadow:var(--shadow-hover); }
.card:focus-visible { outline:3px solid var(--ring); outline-offset:2px; }
.card .top { display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.card .no { font-size:11.5px; color:var(--muted); }
.card .amt { font-weight:600; font-size:14px; }
.card .who { font-weight:600; margin:3px 0 1px; font-size:13px; }
.card .proj { font-size:11.5px; color:var(--muted); }
.card .meta { display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; }
.tag { font-size:10.5px; font-family:var(--font-mono); padding:2px 8px; border-radius:999px; border:1px solid var(--line); color:var(--muted); background:var(--panel2); }
.tag.sef { border-color:var(--sef-line); color:var(--sef); background:var(--sef-bg); }
.tag.eur { border-color:var(--line-strong); color:var(--muted); background:transparent; }
.tag.due { color:var(--warn); border-color:var(--warn-line); background:var(--warn-bg); }
.tag.late { color:var(--danger); border-color:var(--danger-line); background:var(--danger-bg); font-weight:600; }
.tag.ok { color:var(--ok); border-color:var(--ok-line); background:var(--ok-bg); }
.c-sef { border-left-color:var(--sef) !important; } .c-due { border-left-color:var(--warn) !important; }
.c-late { border-left-color:var(--danger) !important; } .c-paid { border-left-color:var(--accent) !important; opacity:.85; }
.kamata { margin-top:8px; font-size:11.5px; color:var(--danger); background:var(--danger-bg); border:1px solid var(--danger-line); border-radius:var(--radius); padding:5px 8px; display:flex; justify-content:space-between; }
.paidline { font-size:11.5px; color:var(--ok); margin-top:7px; }
.boardhint { max-width:1280px; margin:0 auto; padding:0 20px 20px; color:var(--muted); font-size:12px; }

/* Radna tabela */
.filters { display:flex; gap:8px; padding:12px 16px 10px; align-items:center; flex-wrap:wrap; }
.chip { font-size:12px; padding:5px 11px; border-radius:999px; border:1px solid var(--line); color:var(--muted); background:var(--panel); cursor:pointer; text-decoration:none; display:inline-block; transition:border-color var(--t-hover) var(--ease), color var(--t-hover) var(--ease), background-color var(--t-hover) var(--ease); }
.chip:hover { border-color:var(--line-strong); color:var(--ink); }
.chip.active { border-color:var(--accent); color:var(--ink); background:var(--accent-bg); }
.chip:focus-visible { outline:3px solid var(--ring); }
.filters .count { margin-left:auto; color:var(--muted); font-size:12px; }
.filterbar { display:flex; gap:12px; padding:12px 16px 2px; align-items:flex-end; flex-wrap:wrap; }
.filterbar label { display:flex; flex-direction:column; gap:3px; font-size:11px; color:var(--muted); }
.filterbar input, .filterbar select { background:var(--panel); border:1px solid var(--line); color:var(--ink); border-radius:var(--radius); padding:5px 8px; font-size:12px; width:auto; }
.filterbar .chip { align-self:center; }
.layout { display:grid; grid-template-columns:1fr 380px; }
.gridwrap { overflow:auto; border-top:1px solid var(--line); max-height:calc(100vh - 190px); }
table.grid { width:100%; border-collapse:collapse; white-space:nowrap; }
table.grid thead th { position:sticky; top:0; background:var(--panel); font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); text-align:left; padding:8px 12px; border-bottom:1px solid var(--line); font-weight:500; z-index:2; }
table.grid tbody td { padding:7px 12px; border-bottom:1px solid var(--line); transition:background-color var(--t-press) var(--ease); }
table.grid tbody tr:hover td { background:var(--panel); }
table.grid tbody tr[tabindex] { cursor:pointer; }
table.grid tbody tr:focus-visible { outline:3px solid var(--ring); outline-offset:-3px; }
table.grid tbody tr.sel td { background:var(--accent-bg); }
table.grid tbody tr.sel td:first-child { box-shadow:inset 3px 0 0 var(--accent); }
table.grid td.r, table.grid th.r { text-align:right; }
/* Ujednačena visina redova — red sa dugmetom ne sme da bude viši od reda sa tekstom. */
table.grid.rows-even tbody td { height:34px; padding-top:0; padding-bottom:0; vertical-align:middle; }
table.grid.rows-even tbody td .btn { margin:0; vertical-align:middle; }
table.grid.rows-even tfoot th { height:34px; padding-top:0; padding-bottom:0; vertical-align:middle; }

/* Nabavka ima više finansijskih kolona od ostalih registara. Podaci se ne
   skraćuju niti sakrivaju; dugi nazivi dobavljača mogu da pređu u novi red. */
/* Nabavka ima više finansijskih kolona od ostalih registara. Omotač je i
   horizontalni i vertikalni scroll-kontejner, pa je vodoravna traka dostupna
   i na dugoj listi bez odlaska na poslednji red. Podaci se ne skraćuju niti
   sakrivaju; dugi nazivi dobavljača mogu da pređu u novi red. */
.content-pad.purchase-list { max-width:none; }
.purchase-list, .purchase-list > form, .purchase-list .panel { min-width:0; }
.purchase-tablewrap {
  overflow:auto;
  scrollbar-gutter:stable;
  scrollbar-color:var(--line-strong) var(--panel2);
}
.purchase-tablewrap--viewport { max-height:68vh; }
.purchase-tablewrap::-webkit-scrollbar { width:10px; height:10px; }
.purchase-tablewrap::-webkit-scrollbar-track { background:var(--panel2); }
.purchase-tablewrap::-webkit-scrollbar-thumb { background:var(--line-strong); border:2px solid var(--panel2); border-radius:999px; }
table.grid.purchase-table { width:100%; min-width:900px; }
table.grid.purchase-invoice-table { min-width:1680px; }
table.grid.purchase-payment-table { min-width:980px; }
table.grid.purchase-subscription-table { min-width:1050px; }
table.grid.purchase-import-table { min-width:980px; }
table.grid.purchase-table .purchase-col-select { width:48px; min-width:48px; text-align:center; }
table.grid.purchase-table .purchase-col-number { min-width:150px; }
table.grid.purchase-table .purchase-col-supplier {
  width:320px;
  min-width:260px;
  max-width:360px;
  white-space:normal;
  overflow-wrap:anywhere;
}
table.grid.purchase-table .purchase-col-date { min-width:105px; }
table.grid.purchase-table .purchase-col-source { min-width:80px; }
table.grid.purchase-table .purchase-col-currency { min-width:58px; }
table.grid.purchase-table .purchase-col-state { min-width:120px; }
table.grid.purchase-table .purchase-col-amount { min-width:122px; }
/* Bruto i neto jedan do drugog: procep od ~10 znakova (5ch + 5ch) i razdelna vertikalna linija.
   `margin` uz `padding` da procep opstane i ako neko pravilo pregazi padding. */
.amount-pair { display:inline-flex; align-items:stretch; line-height:1.6; }
.amount-pair > span { display:inline-flex; align-items:baseline; gap:6px; }
.amount-pair > span:first-child { padding-right:5ch; margin-right:0; }
.amount-pair > span + span {
  padding-left:5ch;
  border-left:2px solid var(--muted);
}
table.grid td a { text-decoration:none; }
table.grid td a:hover { color:var(--accent-hover); text-decoration:underline; }
:root[data-theme="light"] table.grid td a:hover { color:var(--ok); }

/* Kolone koje smeju da prelome tekst (dugacak naziv dobavljaca, vise oznaka statusa).
   `table.grid` je podrazumevano `nowrap`; ovo je izuzetak koji specifikacija kolone trazi. */
table.grid .col-wrap {
  white-space:normal;
  overflow-wrap:anywhere;
  min-width:200px;
  max-width:340px;
}
table.grid .col-wrap .tag { display:inline-block; margin:0 3px 3px 0; white-space:normal; }
table.grid td.col-actions { white-space:normal; }
table.grid td.col-actions .row-actions { align-items:flex-start; }
table.grid td.col-actions details.disclose .disclose-body {
  flex-direction:column;
  align-items:flex-start;
  max-width:100%;
}
table.grid td.col-actions .btn { max-width:100%; white-space:normal; line-height:1.25; }
table.grid td.col-actions .input { min-width:0; }
.sef-quick-sync { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.sef-quick-sync-copy { min-width:min(100%, 310px); flex:1 1 330px; }
.sef-quick-sync-copy h2 { margin-bottom:3px; }
.sef-quick-sync-copy .muted { margin:0; }
.sef-quick-sync > .flash { flex:1 0 100%; margin:0; }
.sef-quick-actions,
.sef-quick-range-form { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.sef-quick-actions { margin-left:auto; }
.sef-collapsible-panel > .sef-panel-summary {
  display:flex;
  align-items:center;
  gap:10px;
  min-height:28px;
  cursor:pointer;
  list-style:none;
  font-size:13px;
  font-weight:600;
}
.sef-collapsible-panel > .sef-panel-summary::-webkit-details-marker { display:none; }
.sef-collapsible-panel > .sef-panel-summary::before {
  content:"›";
  color:var(--muted);
  font-size:18px;
  line-height:1;
  transform:rotate(0deg);
  transition:transform var(--t-hover) var(--ease);
}
.sef-collapsible-panel[open] > .sef-panel-summary::before { transform:rotate(90deg); }
.sef-collapsible-panel > .sef-panel-summary .tag,
.sef-collapsible-panel > .sef-panel-summary .muted { margin-left:auto; font-weight:400; }
.sef-collapsible-panel > .sef-collapsible-body { margin-top:12px; }
.dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:7px; vertical-align:1px; }
.s-draft { background:var(--muted); } .s-sef { background:var(--sef); } .s-ok { background:var(--accent); } .s-due { background:var(--warn); } .s-late { background:var(--danger); }
aside.detail { border-left:1px solid var(--line); background:var(--panel); overflow-y:auto; padding:16px; max-height:calc(100vh - 190px); }
.kv { display:grid; grid-template-columns:130px 1fr; row-gap:7px; font-size:12.5px; border-top:1px solid var(--line); padding-top:12px; }
.kv dt { color:var(--muted); } .kv dd { text-align:right; }
.timeline { border-top:1px solid var(--line); margin-top:12px; padding-top:10px; font-size:12px; }
.timeline div { padding:4px 0 4px 14px; position:relative; color:var(--muted); }
.timeline div::before { content:""; position:absolute; left:0; top:9px; width:6px; height:6px; border-radius:50%; background:var(--line-strong); }
.timeline div.hot { color:var(--ink); font-weight:600; }
.timeline div.hot::before { background:var(--accent); }
.detail h2 { font-size:14px; display:flex; justify-content:space-between; gap:8px; align-items:baseline; margin:0 0 2px; }
.detail .st { font-size:11px; font-family:var(--font-mono); }
.detail .who { font-weight:600; margin:2px 0 4px; }
.kv dd.big { font-size:15px; font-weight:600; }
.btns { margin-top:14px; display:flex; gap:8px; flex-wrap:wrap; }

/* ============================================================================
   Mreža podataka — zajednička za sve registre
   Stranica registra: <body class="app-frame"> → .content-pad.list-page →
   .list-head (naslov, čipovi, .listbar) → .tablewrap.grid-scroll → .list-foot
   (.pager). Visinu mreži daje okvir, ne sadržaj, pa zaglavlje kolona i
   vodoravna traka ostaju u okviru ekrana bez obzira na broj redova.
   ============================================================================ */
.content-pad.list-page {
  display:flex; flex-direction:column; flex:1; min-height:0;
  max-width:none; padding-bottom:0;
}
.list-head, .list-foot { flex:none; min-width:0; }
/* Oblast koju HTMX menja (čipovi, traka, mreža, pager). Nosi visinu dalje ka
   mreži, pa `.grid-scroll` može da uzme sav preostali prostor. */
.list-region { display:flex; flex-direction:column; flex:1; min-height:0; }
.list-region > .grid-form { display:flex; flex-direction:column; flex:1; min-height:0; }

/* Skrolujuća mreža. Van fiksnog okvira i dalje ima gornju granicu, pa lepljivo
   zaglavlje radi i ako stranica nekim putem ostane bez `app-frame`. */
.tablewrap.grid-scroll { max-height:72vh; }
body.app-frame .tablewrap.grid-scroll { flex:1; min-height:0; max-height:none; }

/* Zaglavlje mora da prekrije redove koji prolaze ispod njega; `--panel` je
   neprozirno u obe teme, pa se ništa ne providi. */
.grid-scroll table.grid thead th { z-index:2; box-shadow:0 1px 0 var(--line); }

/* Zamrznuta kolona pri vodoravnom pomeranju. Pozadina mora biti neprozirna,
   zato se poluprozirna stanja (izbor reda) slažu preko `--bg` kao podloge.
   Razdelnu liniju crta pseudo-element — `border` na sticky ćeliji uz
   `border-collapse:collapse` ume da nestane, a `box-shadow` bi se sudario sa
   oznakom izabranog reda. */
.grid-scroll table.grid th.col-sticky,
.grid-scroll table.grid td.col-sticky { position:sticky; left:0; z-index:1; background:var(--bg); }
/* Druga zamrznuta kolona staje odmah do prve (48px = širina kolone sa čekboksom). */
.grid-scroll table.grid th.col-sticky-2,
.grid-scroll table.grid td.col-sticky-2 { position:sticky; left:48px; z-index:1; background:var(--bg); }
.grid-scroll table.grid thead th.col-sticky-2 { z-index:3; background:var(--panel); }
.grid-scroll table.grid tbody tr:hover td.col-sticky-2 { background:var(--panel); }
.grid-scroll table.grid tbody tr.sel td.col-sticky-2 { background:linear-gradient(var(--accent-bg), var(--accent-bg)), var(--bg); }
.grid-scroll table.grid th.col-sticky-2::after,
.grid-scroll table.grid td.col-sticky-2::after { content:""; position:absolute; top:0; bottom:0; right:0; width:1px; background:var(--line); }
.grid-scroll table.grid tfoot td.col-sticky-2, .grid-scroll table.grid tfoot th.col-sticky-2 { z-index:3; }
.grid-scroll table.grid thead th.col-sticky { z-index:3; background:var(--panel); }
.grid-scroll table.grid tbody tr:hover td.col-sticky { background:var(--panel); }
.grid-scroll table.grid tbody tr.sel td.col-sticky {
  background:linear-gradient(var(--accent-bg), var(--accent-bg)), var(--bg);
}
.grid-scroll table.grid th.col-sticky::after,
.grid-scroll table.grid td.col-sticky::after {
  content:""; position:absolute; top:0; bottom:0; right:0; width:1px; background:var(--line);
}

/* Sortivo zaglavlje: ceo naslov je link, strelica pokazuje aktivni smer. */
table.grid thead th.sortable { padding:0; }
table.grid thead th.sortable a {
  display:block; padding:8px 12px; color:inherit; text-decoration:none; white-space:nowrap;
  transition:color var(--t-hover) var(--ease);
}
table.grid thead th.sortable a:hover { color:var(--ink); }
table.grid thead th.sortable a:focus-visible { outline:3px solid var(--ring); outline-offset:-3px; }
table.grid thead th.sortable a::after { content:"↕"; margin-left:6px; opacity:.35; }
table.grid thead th.sortable.asc a::after { content:"↑"; opacity:1; color:var(--accent); }
table.grid thead th.sortable.desc a::after { content:"↓"; opacity:1; color:var(--accent); }
table.grid thead th.sortable.r a { text-align:right; }

/* Kolone sakrivene izborom korisnika (JS dodaje klasu; podaci se ne brišu). */
table.grid .is-col-hidden { display:none; }

/* Zbir nad CELIM filterom, ne nad tekućom stranom — zato je i označen i zato
   ostaje prilepljen za dno mreže. Ograničeno na `.grid-scroll` da se ne dira
   `tfoot` na postojećim izveštajima. */
.grid-scroll table.grid tfoot td, .grid-scroll table.grid tfoot th {
  position:sticky; bottom:0; z-index:2; background:var(--panel2);
  border-top:2px solid var(--line-strong); font-weight:600; white-space:nowrap;
  padding:7px 12px;
}
.grid-scroll table.grid.rows-even tfoot th { height:34px; padding-top:0; padding-bottom:0; }
.grid-scroll table.grid tfoot td.col-sticky, .grid-scroll table.grid tfoot th.col-sticky { z-index:3; }
.grid-scroll table.grid tfoot .scope { font-weight:400; color:var(--muted); font-size:11px; }

/* ── Traka iznad mreže: pretraga, broj zapisa, redova/strani, kolone, izvoz ── */
.listbar { display:flex; gap:10px; align-items:center; flex-wrap:wrap; padding:0 0 10px; }
.listbar-search { display:flex; gap:6px; align-items:center; min-width:0; }
.listbar-search .input { width:clamp(200px, 32vw, 420px); }
.listbar-search .input[type="search"]::-webkit-search-cancel-button { cursor:pointer; }
.listbar-count { color:var(--muted); font-size:12px; white-space:nowrap; }
.listbar-per { display:flex; gap:6px; align-items:center; color:var(--muted); font-size:12px; white-space:nowrap; }
.listbar-per select { width:auto; padding:5px 26px 5px 8px; font-size:12px; }
/* Čipovi i traka žive u zaglavlju liste — bez spoljnog razmaka iz `.filters`. */
.list-head .filters { padding:0 0 10px; }
.list-head .page-header { margin-bottom:10px; }

/* Izbor kolona — obično <details>, bez biblioteka i bez pozicionog JS-a.
   Panel se kači za DESNU IVICU TRAKE, ne za samo dugme: kad je dugme blizu leve
   ivice, panel širine 220px bi inače izašao van ekrana. */
.listbar { position:relative; }
.col-picker { position:static; }
.col-picker > summary { list-style:none; cursor:pointer; }
.col-picker > summary::-webkit-details-marker { display:none; }
.col-picker-body {
  position:absolute; right:0; top:calc(100% + 4px); z-index:6; min-width:220px;
  background:var(--panel); border:1px solid var(--line-strong); border-radius:var(--radius);
  padding:10px 12px; box-shadow:0 4px 16px rgba(0,0,0,.35);
  max-height:60vh; overflow:auto;
  animation:wr-rise var(--t-hover) var(--ease);
}
:root[data-theme="light"] .col-picker-body { box-shadow:0 4px 16px rgba(17,17,17,.12); }
.col-picker-body label { display:flex; gap:8px; align-items:center; padding:4px 0; font-size:12px; cursor:pointer; }
.col-picker-body .col-picker-reset { margin-top:8px; width:100%; }

/* ── Stranični čar ─────────────────────────────────────────────────────────── */
.pager {
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  padding:9px 0; border-top:1px solid var(--line);
}
.pager-info { color:var(--muted); font-size:12px; white-space:nowrap; }
.pager-pages { display:flex; gap:2px; align-items:center; margin-left:auto; }
.pager-page {
  display:inline-block; min-width:28px; text-align:center; padding:5px 7px;
  border:1px solid transparent; border-radius:var(--radius);
  color:var(--muted); text-decoration:none; font-family:var(--font-mono); font-size:11.5px;
  transition:color var(--t-hover) var(--ease), border-color var(--t-hover) var(--ease);
}
a.pager-page:hover { color:var(--ink); border-color:var(--line-strong); }
a.pager-page:focus-visible { outline:3px solid var(--ring); }
.pager-page.current { color:var(--ink); border-color:var(--accent); background:var(--accent-bg); font-weight:600; }
.pager-page.is-gap { color:var(--muted); border:none; min-width:16px; padding:5px 2px; }
.pager-page[aria-disabled="true"] { opacity:.35; pointer-events:none; }
.pager-jump { display:flex; gap:6px; align-items:center; color:var(--muted); font-size:12px; white-space:nowrap; }
.pager-jump input {
  width:64px; padding:5px 8px; font-size:12px; text-align:right;
  font-family:var(--font-mono); font-variant-numeric:tabular-nums;
}

/* ── Uski ekrani: okvir ostaje, ali gornji deo se sabija ─────────────────── */
@media (max-width:820px) {
  .content-pad.list-page { padding-left:12px; padding-right:12px; }
  .listbar-search { flex:1 1 100%; }
  .listbar-search .input { width:100%; }
  .pager-pages { margin-left:0; }
  /* Čipovi u jedan red koji se pomera vodoravno — prelomljeni u tri reda
     pojeli bi visinu koja treba mreži. */
  .list-head .filters { flex-wrap:nowrap; overflow-x:auto; overscroll-behavior-inline:contain; }
  .list-head .filters .chip { flex:none; }
  .list-head .filters .count { display:none; }
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width:1100px) {
  .kpis, .board { grid-template-columns:repeat(2,1fr); }
  .layout { grid-template-columns:1fr; }
  aside.detail { max-height:none; border-left:none; border-top:1px solid var(--line); }
}
@media (max-width:820px) {
  .settings { grid-template-columns:1fr; }
  .settings-rail { flex-direction:row; overflow-x:auto; border-right:none; border-bottom:1px solid var(--line); padding:0 0 8px; }
  #settings-panel { padding-left:0; padding-top:16px; }
  .form-grid { grid-template-columns:1fr; }
}
@media (max-width:640px) { .board { grid-template-columns:1fr; } .cmd { display:none; } }

/* ============================================================================
   WS-K F2 — editor fakture (prototip A raspored): levi unos + desni A4 pregled
   ============================================================================ */
.editor-wrap { display:grid; grid-template-columns:460px 1fr; }
.editor-form { border-right:1px solid var(--line); padding:18px 22px 40px; overflow-y:auto; max-height:calc(100vh - 140px); }
.editor-form .sub { color:var(--muted); font-size:12px; margin:2px 0 14px; }
.editor-form fieldset { border:none; border-top:1px solid var(--line); padding:14px 0 6px; margin-top:10px; }
.editor-form legend { font-family:var(--font-mono); font-size:10px; font-weight:500; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); padding-right:10px; }
.editor-row { display:grid; grid-template-columns:1fr 1fr; gap:0 10px; }
table.items-edit { width:100%; border-collapse:collapse; margin:6px 0 8px; }
table.items-edit th { font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); text-align:left; padding:4px 6px 4px 0; border-bottom:1px solid var(--line); font-weight:500; }
table.items-edit td { padding:4px 6px 4px 0; vertical-align:top; }
table.items-edit input, table.items-edit select { padding:6px 8px; }
/* Engleski opis stoji ispod srpskog u istoj ćeliji — bez nove kolone i sitnije, jer je pomoćni. */
table.items-edit input[name$="description_en"] { margin-top:3px; font-size:12px; color:var(--muted); }
.items-edit .col-qty { width:64px; } .items-edit .col-price { width:100px; }
.items-edit .col-vat { width:116px; } .items-edit .col-x { width:26px; }
.add-line { background:none; border:1px dashed var(--line-strong); color:var(--muted); width:100%; padding:7px; border-radius:var(--radius); cursor:pointer; font:inherit; transition:border-color var(--t-hover) var(--ease), color var(--t-hover) var(--ease); }
.add-line:hover { border-color:var(--accent); color:var(--ink); }
.line-x { background:none; border:none; color:var(--muted); cursor:pointer; padding:7px 0; transition:color var(--t-press) var(--ease); }
.line-x:hover { color:var(--danger); }
.editor-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:16px; position:sticky; bottom:0; background:var(--bg); padding:12px 0; border-top:1px solid var(--line); }
.editor-form details.disclose { margin-top:12px; }
.preview-pane { overflow-y:auto; max-height:calc(100vh - 140px); padding:28px; display:flex; flex-direction:column; align-items:center; gap:12px; background:var(--backdrop); }
.preview-pane .bar { width:min(760px,100%); display:flex; align-items:center; gap:10px; font-size:12px; color:var(--muted); }
.preview-pane .bar .spacer { flex:1; }

/* Papir — svetla paleta strogo izolovana unutar .a4 (ista u obe teme). */
.a4 {
  --p-paper:#FAFAF7; --p-ink:#1C1E21; --p-muted:#6B7078; --p-line:#DCDDD6; --p-stamp:#2B4C8C;
  width:min(760px,100%); aspect-ratio:210/297; background:var(--p-paper); color:var(--p-ink);
  box-shadow:0 2px 6px rgba(0,0,0,.25), 0 12px 32px rgba(0,0,0,.20);
  padding:6.5% 7%; position:relative; font-family:Georgia,'Times New Roman',serif;
  font-size:12.5px; line-height:1.45;
  animation:wr-rise var(--t-reveal) var(--ease);
}
/* Zaglavlje „Registar": levo samo znak, naslov na sredini okvira, treća kolona prazna radi
   simetrije. Prati arhivski PDF (`documents/pdf/invoice.html`) — menjati zajedno. */
.a4 .frame { border:1px solid var(--p-ink); }
.a4 .head { display:grid; grid-template-columns:34% 1fr 34%; align-items:center; border-bottom:0; padding:0; }
.a4 .head > div { padding:8px 10px; }
.a4 .ident { border-right:1px solid var(--p-ink); text-align:center; }
.a4 .brand-logo { display:block; max-height:44px; max-width:100%; object-fit:contain; margin:0 auto; }
.a4 .brand { font-size:14px; font-weight:700; letter-spacing:.02em; }

.a4 .zones { display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--p-ink); border-top:0; }
.a4 .zones > div { padding:8px 10px; }
.a4 .zones > div + div { border-left:1px solid var(--p-ink); }
.a4 .zones .name { font-weight:700; font-size:12px; }
.a4 .zones .row { color:var(--p-muted); font-size:11px; }

.a4 .dates { display:grid; grid-template-columns:repeat(3, 1fr); border:1px solid var(--p-ink); border-top:0; margin-bottom:10px; }
.a4 .dates > div { padding:6px 10px; }
.a4 .dates > div + div { border-left:1px solid var(--p-ink); }
.a4 .dates b { font-size:12px; display:block; }

.a4 .lbl { display:block; font-family:var(--font-ui); font-size:9px; text-transform:uppercase; letter-spacing:.1em; color:var(--p-muted); }
.a4 table.items .en { display:block; font-size:10px; color:var(--p-muted); }
.a4 .sum { display:grid; grid-template-columns:1fr 58%; gap:10px; margin-top:10px; }
.a4 table.breakdown { width:100%; }
.a4 table.breakdown tr.grand td { background:var(--p-ink); color:var(--p-paper); font-weight:700; font-size:13px; }
.a4 table.breakdown tr.grand td { border-bottom:0; }
.logo-preview { max-height:60px; max-width:220px; object-fit:contain; background:#fff; padding:6px; border-radius:var(--radius); }
.section-head { font-size:14px; font-weight:600; margin:26px 0 2px; padding-top:18px; border-top:1px solid var(--line); }
.a4 .head small { display:block; font-size:10px; color:var(--p-muted); font-family:var(--font-ui); letter-spacing:.03em; margin-top:3px; }
.a4 .doc { text-align:center; }
.a4 .doc h2 { font-size:21px; font-weight:700; letter-spacing:.04em; margin:0; }
.a4 .doc-alt { font-size:10px; color:var(--p-muted); font-weight:400; margin-top:1px; }
.a4 .doc .no { font-size:13px; margin-top:6px; }
.a4 .parties { display:flex; justify-content:space-between; gap:24px; margin:14px 0; }
.a4 .party .lbl { font-family:var(--font-ui); font-size:9px; text-transform:uppercase; letter-spacing:.1em; color:var(--p-muted); }
.a4 .party .lbl2 { margin-top:6px; }
.a4 .party .name { font-weight:700; }
.a4 .party.right { text-align:right; }
.a4 table.paper { width:100%; border-collapse:collapse; font-size:11.5px; }
.a4 table.paper th { font-family:var(--font-ui); font-size:9px; text-transform:uppercase; letter-spacing:.08em; color:var(--p-muted); border-top:1px solid var(--p-ink); border-bottom:1px solid var(--p-line); padding:5px 4px; text-align:left; font-weight:600; }
.a4 table.paper td { padding:6px 4px; border-bottom:1px solid var(--p-line); vertical-align:top; }
/* Brojevi na papiru idu UI sansom, ne mono fontom: JetBrains Mono nosi tačku u nuli, pa se iznos
   može pročitati kao osmica. Isti razlog i ista odluka kao u arhivskom PDF-u. */
.a4 .num-p, .a4 .dates b { font-family:var(--font-ui); font-variant-numeric:tabular-nums; }
.a4 .num-p { text-align:right; }
.a4 th.num-p { text-align:right; }
.a4 .totals-p { margin-top:8px; margin-left:auto; width:56%; }
.a4 .totals-p td { border:none; padding:2.5px 4px; }
.a4 .totals-p tr.grand td { border-top:2px solid var(--p-ink); font-weight:700; font-size:13px; padding-top:6px; }
.a4 .foot-p { position:absolute; bottom:5.5%; left:7%; right:7%; border-top:1px solid var(--p-line); padding-top:10px; font-size:10.5px; color:var(--p-ink); }
.a4 .foot-p b { font-family:var(--font-ui); font-size:9px; text-transform:uppercase; letter-spacing:.08em; color:var(--p-muted); display:block; font-weight:600; }
.a4 .empty-p { color:var(--p-muted); font-style:italic; }

@media (max-width:980px) {
  .editor-wrap { grid-template-columns:1fr; }
  .editor-form { border-right:none; border-bottom:1px solid var(--line); max-height:none; }
  .preview-pane { max-height:none; }
}

/* ── WS-M: SVG grafikoni (završni račun) ──────────────────────────────────── */
/* Serije podataka: zelena = prihodi/novo (brend akcenat), neutralna siva = rashodi/kontekst,
   linija rezultata u boji teksta; ćilibar ostaje rezervisan za upozorenja. Na svetloj temi
   markovi su potamnjeni radi kontrasta na belom (isti princip kao tekst-varijante stanja). */
:root { --viz-a:#00C77E; --viz-b:#5E6875; }
:root[data-theme="light"] { --viz-a:#0B8A5F; --viz-b:#8B93A1; }
.viz { margin:4px 0 2px; }
.viz svg { width:100%; height:auto; display:block; }
.viz-legend { display:flex; gap:16px; align-items:center; margin:2px 0 8px; font-family:var(--font-mono); font-size:10px; font-weight:500; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); flex-wrap:wrap; }
.viz-key { display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:6px; vertical-align:-1px; }
.viz-key.a { background:var(--viz-a); } .viz-key.b { background:var(--viz-b); } .viz-key.ink { background:var(--ink); }
.viz-key.line { height:3px; border-radius:1.5px; width:14px; vertical-align:2px; }
.viz-key.proj { opacity:.45; }
.viz-bar.a { fill:var(--viz-a); } .viz-bar.b { fill:var(--viz-b); }
.viz-bar.proj { opacity:.45; }
.viz-line { fill:none; stroke:var(--ink); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.viz-line.proj { opacity:.55; }
.viz-dot { fill:var(--ink); stroke:var(--panel); stroke-width:2; }
.viz-dot.proj { opacity:.55; }
.viz-grid { stroke:var(--line); stroke-width:1; }
.viz-zero { stroke:var(--line-strong); stroke-width:1; }
.viz-tick { font-family:var(--font-mono); font-size:9.5px; fill:var(--muted); }
.viz-tick.muted { opacity:.6; }
.viz-hbar { fill:var(--viz-b); } .viz-hbar.a { fill:var(--viz-a); }
.viz-hlabel { font-family:var(--font-ui); font-size:11px; fill:var(--ink); }
.viz-hvalue { font-family:var(--font-mono); font-size:10px; fill:var(--muted); }
.viz-duo { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.viz-note { font-size:11.5px; color:var(--muted); margin-top:8px; line-height:1.5; }
.kpis.annual { padding:0; margin:0 0 14px; max-width:none; grid-template-columns:repeat(6,1fr); }
.kpi .spark { display:block; margin-top:7px; width:110px; height:30px; }
.viz-spark { fill:none; stroke:var(--viz-b); stroke-width:1.5; }
.viz-spark-dot { fill:var(--viz-a); }
.viz-table summary { cursor:pointer; font-family:var(--font-mono); font-size:10px; font-weight:500; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); padding:6px 0; }
.viz-table[open] summary { margin-bottom:6px; }
.plan-input { width:110px; text-align:right; font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
@media (max-width:1100px) { .kpis.annual { grid-template-columns:repeat(3,1fr); } }
@media (max-width:760px) { .viz-duo { grid-template-columns:1fr; } .kpis.annual { grid-template-columns:repeat(2,1fr); } }

/* Uvoz ulaznih računa — kamera ostaje unutar panela i na uskom ekranu. */
[data-qr-video] { display:block; max-width:100%; height:auto; margin-top:12px; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--backdrop); }
[data-qr-video][hidden] { display:none; }
/* Okvir preko pregleda: neutralan dok traži, ćilibar kad vidi kod koji još ne čita, zelen kad ga pročita. */
.qr-viewfinder { position:relative; display:block; width:fit-content; max-width:100%; margin-top:12px; overflow:hidden; border-radius:var(--radius-lg); }
.qr-viewfinder:has([data-qr-video][hidden]) { display:none; }
.qr-viewfinder [data-qr-video] { margin-top:0; }
.qr-viewfinder-frame { position:absolute; top:50%; left:50%; height:70%; max-width:85%; aspect-ratio:1; transform:translate(-50%,-50%); border:2px solid rgba(255,255,255,.75); border-radius:var(--radius); box-shadow:0 0 0 9999px rgba(0,0,0,.25); pointer-events:none; transition:border-color 200ms cubic-bezier(0.2,0,0,1); }
[data-qr-video][hidden] + .qr-viewfinder-frame { display:none; }
[data-qr-scan-state="seen"] .qr-viewfinder-frame { border-color:var(--warn); }
[data-qr-scan-state="done"] .qr-viewfinder-frame { border-color:var(--ok); }

/* ── Smanjen pokret: animacije se gase, stanja ostaju ─────────────────────── */
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation:none !important; transition:none !important; }
}

/* ── Globalna pretraga (Ctrl+K) ───────────────────────────────────────────── */
.palette-backdrop {
  position:fixed; inset:0; z-index:20; display:flex; justify-content:center;
  padding:12vh 16px 16px; background:color-mix(in srgb, var(--backdrop) 80%, transparent);
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
  animation:wr-fade var(--t-hover) var(--ease);
}
.palette-backdrop[hidden] { display:none; }
.palette {
  width:min(620px, 100%); max-height:70vh; display:flex; flex-direction:column;
  background:var(--panel); border:1px solid var(--line-strong); border-radius:var(--radius-lg);
  box-shadow:0 12px 40px rgba(0,0,0,.45); overflow:hidden;
  animation:wr-rise var(--t-hover) var(--ease);
}
:root[data-theme="light"] .palette { box-shadow:0 12px 40px rgba(17,17,17,.18); }
.palette-input {
  width:100%; border:none; border-bottom:1px solid var(--line); border-radius:0;
  background:var(--panel); padding:14px 16px; font-size:14px;
}
.palette-input:focus { outline:none; border-color:var(--accent); }
.palette-results { overflow-y:auto; padding:6px 0; }
.palette-group { padding:6px 0; }
.palette-group h3 {
  font-family:var(--font-mono); font-size:10px; font-weight:500; text-transform:uppercase;
  letter-spacing:.08em; color:var(--muted); padding:6px 16px 4px;
}
.palette-hit {
  display:flex; justify-content:space-between; gap:12px; align-items:baseline;
  padding:7px 16px; text-decoration:none; color:var(--ink);
  transition:background-color var(--t-press) var(--ease);
}
.palette-hit:hover, .palette-hit.is-active { background:var(--accent-bg); }
.palette-hit:focus-visible { outline:3px solid var(--ring); outline-offset:-3px; }
.palette-label { font-weight:500; }
.palette-detail { color:var(--muted); font-size:11.5px; font-family:var(--font-mono); text-align:right; }
.palette-empty { color:var(--muted); padding:16px; font-size:12.5px; }
.palette-foot {
  display:flex; gap:14px; padding:8px 16px; border-top:1px solid var(--line);
  color:var(--muted); font-size:11px;
}
.palette-results-page { border:1px solid var(--line); border-radius:var(--radius); margin-top:14px; }
button.cmd { text-align:left; }