/* RMX Farm — izgled po uzoru na RMX_Web (site.css tokeni, docs/pravila_ui.md) i odobrene slike A–D (2026-10-26).
   Boje koje bira korisnik dolaze kao CSS promenljive iz Data/UiIzgled.cs (_Layout <style>); ovde su samo podrazumevane.
   Nova boja / nijansa = promenljiva, nikad fiksna vrednost u pravilu (pravila_ui.md „Boje stanja — jedna paleta“).
   Smer: samo logičke strane (inline-start / end), da isti CSS radi i zdesna nalevo za arapski (zahtevi §4e). */

:root {
  --font: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; --font-tezina: 400; --tekst: #1a1f26;
  --vel: 13px; --vel-labela: 10px; --vel-meni: 13px; --vel-naslov: 18px;
  --ivica-polja: #bcc2c9;
  --okvir-vrh: #1e242c; --okvir-meni: #262d36; --okvir-status: #2a313a; --okvir-izabrano: #2f3742; --okvir-tekst: #d5d9de; --okvir-grupa: #6c747e;
  --akcent: #ded3b4; --akcent-crta: #c8b788;
  --traka: #1e242c; --traka-panel: #2a313a; --traka-tekst: #e8eaed; --traka-akcent: #ded3b4;
  --panel-naslov: #2a313a; --panel-naslov-tekst: #e8eaed; --panel-naslov-crta: #2a313a; --panel-naslov-akcent: #ded3b4;
  --oz-d: 1px; --oz-pocetak: 1px; --oz-pocetak-boja: #2f3742; --oz-okvir: #2f3742; --oz-dno: #2f3742;
  --red-izabran: #eef0f3; --grupa: #ffffff; --grupa-tekst: #5a6570; --grupa-crta: #c9ced4;
  --bg: #d4d8dd;
  /* stalni tokeni (nisu izbor korisnika) */
  --panel: #f2f3f5; --edge: #9aa3ad; --muted: #5a6570; --siva-polja: #e8eaed;
  /* Mirne liste i pregled „kao dokument“ (korisnik 2026-10-27, varijanta B): tanka crta reda, crta grupe / okvira dokumenta,
     izabran red sivo, tamni naglasak (crta pregleda ispod reda). Boja samo za ono što fali: --lo-tx. */
  --crta-reda: #e3e5e8; --crta-grupe: #c9ced4; --naglasak: #2f3742;
  --ok-bg: #e3efe5; --ok-tx: #2e6b38; --ok-ln: #3d8b4a;
  --up-bg: #fbefd6; --up-tx: #7a5200; --up-ln: #c98a12;
  --lo-bg: #f8dedb; --lo-tx: #a93226; --lo-ln: #c0392b;
  --si-bg: #e3e6ea; --si-tx: #3a434e; --si-ln: #8a929c;
  --green: #3d8b4a; --link: #24578a; --hover: #ffe8cc; --radius: 8px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  background: var(--bg); color: var(--tekst); font-family: var(--font); font-weight: var(--font-tezina);
  font-size: var(--vel);
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: var(--vel-naslov); margin: 0 0 2px; }
.opis { color: var(--muted); font-size: calc(var(--vel) - 1px); margin-bottom: 10px; }
.muted { color: var(--muted); }
.sakriveno { display: none !important; }
/* Atribut hidden važi i za elemente kojima CSS daje display (npr. .polja flex) — proba F2 2026-10-27, polja novog poljoprivrednika. */
[hidden] { display: none !important; }

/* ---------- OKVIR: gornja traka, bočni meni, sadržaj, status traka (slika A) ---------- */
/* Meni bočni ili gornji, po izboru korisnika (ui.meni.raspored, korisnik 2026-10-27: „bočni ili gornji meni sa ikonicama kao u
   RMX_Web“, „mora da može da se sklopi“). Uzor RMX_Web site.css .app-sidebar (236 / 58 px) i .app-menu (34 px).
   _Layout: <div class="app meni-bocni|meni-gornji">, deca top → (gornji) → side → main → status → donji-meni. */
.app {
  display: grid; grid-template-columns: var(--sirina-menija, 224px) minmax(0, 1fr); grid-template-rows: 40px minmax(0, 1fr) 24px;
  height: 100vh; height: 100dvh;
}
/* Gornji: jedna kolona, traka menija ispod gornje trake; bočni meni postoji u HTML-u samo za fioku na telefonu. */
.app.meni-gornji { grid-template-columns: minmax(0, 1fr); grid-template-rows: 40px 34px minmax(0, 1fr) 24px; }
@media (min-width: 701px) {
  .app.meni-gornji > .side { display: none; }
  /* Skupljen bočni meni (html.meni-skupljen, ui.meni.skupljen = da) — samo PC; na telefonu je fioka uvek puna. */
  html.meni-skupljen .app.meni-bocni { --sirina-menija: 58px; }
  /* Animacija širine samo kad korisnik klikne ☰ (JS dodaje html.meni-anim) — ne pri učitavanju strane (RMX_Web sidebar-anim). */
  html.meni-anim .app.meni-bocni { transition: grid-template-columns .15s ease; }
}
.top {
  grid-column: 1 / -1; background: var(--okvir-vrh); color: var(--akcent); display: flex; align-items: center;
  padding: 0 14px; gap: 12px; font-weight: 600; min-width: 0;
}
.top .brand { letter-spacing: .3px; white-space: nowrap; }
/* Ikonica programa (korisnik 2026-10-27, slika „F“, _Layout / Prijava): ista slika kao favicon-48, zaobljeni uglovi u PNG-u. */
.brand-ico { display: block; width: 24px; height: 24px; flex: 0 0 24px; }
.top .brand-ico + .brand { margin-inline-start: -4px; }
.prijava .t .naziv { display: flex; align-items: center; gap: 8px; }
.top .sep { color: var(--okvir-grupa); }
.top .klijent {
  display: flex; align-items: center; gap: 6px; background: var(--okvir-izabrano); padding: 4px 10px; border-radius: 6px;
  border: 1px solid var(--okvir-grupa); color: var(--akcent); max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.top .klijent:hover { text-decoration: none; border-color: var(--akcent-crta); }
.top .klijent small { color: var(--okvir-tekst); font-weight: 400; }
/* Firma = padajuća lista (korisnik 2026-10-27, _Layout data-firme + rmx.js): beli spisak ispod tastera, trenutna sa ✓. */
.top .klijent-izbor { position: relative; min-width: 0; }
.top button.klijent { font: inherit; font-weight: 600; cursor: pointer; }
.top .klijent .ime { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.top .klijent[aria-expanded="true"] { border-color: var(--akcent-crta); }
.firme-meni {
  position: absolute; top: calc(100% + 4px); inset-inline-start: 0; z-index: 200; min-width: 300px; max-width: min(440px, 92vw);
  max-height: 70vh; overflow-y: auto; background: #fff; color: var(--tekst); font-weight: 400; padding: 4px 0;
  border: 1px solid var(--edge); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}
.firme-meni .firme-trazi {
  display: block; margin: 4px 8px 6px; width: calc(100% - 16px); border: 1px solid var(--ivica-polja); border-radius: 4px;
  padding: 4px 8px; min-height: 28px; font: inherit; color: inherit;
}
.firme-meni .firme-trazi:focus { outline: 2px solid var(--akcent-crta); outline-offset: 0; }
.firme-meni a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; padding: 6px 12px; color: var(--tekst);
  border-inline-start: 3px solid transparent;
}
.firme-meni a .naziv { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.firme-meni a small { grid-column: 1 / -1; color: var(--muted); font-size: 11px; }
.firme-meni a:hover, .firme-meni a:focus { background: #eef0f3; text-decoration: none; outline: none; border-inline-start-color: var(--okvir-izabrano); }
.firme-meni a.on { font-weight: 600; }
/* Poslovna godina pored firme (korisnik 2026-10-27, _Layout data-godine): isti taster i spisak kao firma, uži; ranija od tekuće
   = crvena kao RMX_Web .app-godina-ranija (svetlija crvena da se čita na tamnoj traci). */
.firme-meni.godine-meni { min-width: 150px; }
.top .klijent.godina.ranija, .top .klijent.godina.ranija small { color: #ff4f42; }
.top .klijent.godina.ranija { border-color: #ff4f42; }
.firme-meni .prazno { padding: 8px 12px; color: var(--muted); max-width: 400px; }
.top .desno { margin-inline-start: auto; display: flex; gap: 10px; align-items: center; font-weight: 400; color: var(--okvir-tekst); }
.top .jezik { display: flex; border: 1px solid var(--okvir-grupa); border-radius: 6px; overflow: hidden; }
.top .jezik form { margin: 0; }
.top .jezik button { background: none; border: 0; padding: 2px 8px; font: inherit; font-size: 12px; color: var(--okvir-tekst); cursor: pointer; }
.top .jezik button.on { background: var(--okvir-izabrano); color: var(--akcent); font-weight: 600; }
.top .btn-top {
  border: 1px solid var(--akcent-crta); color: var(--akcent); background: none; padding: 2px 10px; border-radius: 6px;
  font: inherit; font-size: 12px; cursor: pointer;
}
/* ☰ (korisnik 2026-10-27): PC + bočni = skupi / raširi meni; PC + gornji = nema ga; telefon = fioka (blok TELEFON).
   Mali okvir oko tri crte kao RMX_Web hamburger; svg 16 viewBox iz _Layout. */
.top .meni-dugme {
  display: none; flex: none; align-items: center; justify-content: center; width: 28px; height: 24px; padding: 0;
  background: none; border: 1px solid var(--okvir-grupa); border-radius: 4px; color: var(--akcent); cursor: pointer;
}
.top .meni-dugme svg { width: 14px; height: 14px; display: block; }
.top .meni-dugme:hover, .top .meni-dugme:focus-visible { border-color: var(--akcent-crta); outline: none; }
.app.meni-bocni .top .meni-dugme { display: inline-flex; }

/* ---------- BOČNI MENI sa ikonicama (_MeniBocni.cshtml; uzor RMX_Web .app-side-*, korisnik 2026-10-27) ----------
   .sl = glavna stavka (veza ili summary grupe), .ik ikonica, .tx tekst, .str strelica grupe; .sg grupa (details), .sp podstavke;
   .on trenutna strana, .aktivna summary grupe trenutne strane, .off deo koji dolazi kasnije (.later = segment).
   Crta na početku = border-inline-start (ne box-shadow inset kao RMX_Web) — prati smer i u arapskom. */
.side {
  background: var(--okvir-meni); color: var(--okvir-tekst); font-size: var(--vel-meni); min-width: 0;
  display: flex; flex-direction: column; gap: 3px; padding: 10px 8px 18px; overflow-x: hidden; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--okvir-izabrano) var(--okvir-meni);
}
.side .sg { margin: 0; flex: none; }
.side .sl {
  display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 8px 12px; padding-inline-start: 9px;
  border: 0; border-inline-start: 3px solid transparent; border-radius: 4px; background: none;
  color: var(--okvir-tekst); font: inherit; text-align: start; text-decoration: none; cursor: pointer; user-select: none; list-style: none;
  width: 100%; flex: none;
}
.side summary.sl::-webkit-details-marker { display: none; }
.side summary.sl::marker { content: ""; }
.side .sl .ik { width: 22px; height: 22px; flex: none; display: block; overflow: visible; }
.side .sl .tx { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side .sl .str { width: 12px; height: 12px; flex: none; margin-inline-start: auto; opacity: .7; transition: transform .15s ease; }
.side .sg[open] > .sl .str { transform: rotate(180deg); }
/* Pod mišem / tastaturom: polje, tekst i crta u boji akcenta, podebljano (RMX_Web 2026-10-13 „B“) — isto podstavke, flyout, gornji. */
.side .sl:hover, .side .sl:focus-visible {
  background: var(--okvir-izabrano); color: var(--akcent); border-inline-start-color: var(--akcent-crta); font-weight: 600;
  text-decoration: none; outline: none;
}
.side .sl.on { background: var(--okvir-izabrano); color: var(--akcent); font-weight: 600; border-inline-start-color: var(--akcent-crta); }
/* Grupa trenutne strane: jak tekst bez polja (RMX_Web .active-group). */
.side .sl.aktivna { color: var(--akcent); font-weight: 600; }
/* Podstavke: uvučene, malo bleđi tekst (izveden iz --okvir-tekst, nije nova boja). */
.side .sp { display: flex; flex-direction: column; gap: 1px; padding: 2px 0 8px; padding-inline-start: 12px; flex: none; }
.side .sp > a, .side .sp > .off {
  display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 8px 12px; padding-inline-start: 23px;
  border-inline-start: 3px solid transparent; border-radius: 4px; white-space: nowrap; min-width: 0;
  color: var(--okvir-tekst); color: color-mix(in srgb, var(--okvir-tekst) 82%, var(--okvir-meni));
}
.side .sp > a:hover, .side .sp > a:focus-visible {
  background: var(--okvir-izabrano); color: var(--akcent); border-inline-start-color: var(--akcent-crta); font-weight: 600;
  text-decoration: none; outline: none;
}
.side .sp > a.on { background: var(--okvir-izabrano); color: var(--akcent); font-weight: 600; border-inline-start-color: var(--akcent-crta); }
.side .sp > .off, .meni-flyout .off, .gornji .gp .off { color: var(--okvir-grupa); cursor: default; }
.side .later, .meni-flyout .later, .gornji .later {
  font-size: 10px; color: var(--okvir-grupa); border: 1px solid var(--okvir-grupa); border-radius: 8px; padding: 0 5px; font-weight: 400;
}
/* .tel = samo telefon (Izlaz i verzija u fioci). */
.side .tel { display: none; margin: 0; }
.side .tel.verzija {
  padding: 10px 12px 4px; color: var(--okvir-grupa); font-size: 11px; border-top: 1px solid var(--okvir-izabrano); margin-top: 6px;
}

/* Skupljen (samo PC, html.meni-skupljen): vide se ikonice, podmeni grupe ide u flyout (#meniFlyout, rmx.js).
   border-inline-end providno = ista širina kao crta na početku, da ikonica ostane tačno na sredini. */
@media (min-width: 701px) {
  html.meni-skupljen .app.meni-bocni .side .tx,
  html.meni-skupljen .app.meni-bocni .side .str,
  html.meni-skupljen .app.meni-bocni .side .sp { display: none; }
  html.meni-skupljen .app.meni-bocni .side { padding-inline: 4px; }
  html.meni-skupljen .app.meni-bocni .side .sl {
    justify-content: center; padding: 10px 0; gap: 0; border-inline-end: 3px solid transparent;
  }
  /* Pod mišem / otvoren flyout: bez polja, akcent ikonica i crta (RMX_Web sklopljen, 2026-10-13 Z5). .mf-otvoren daje JS grupi. */
  html.meni-skupljen .app.meni-bocni .side .sl:hover,
  html.meni-skupljen .app.meni-bocni .side .sg.mf-otvoren > .sl { background: transparent; color: var(--akcent); border-inline-start-color: var(--akcent-crta); }
  html.meni-skupljen .app.meni-bocni .side .sl.on:hover,
  html.meni-skupljen .app.meni-bocni .side .sg.mf-otvoren > .sl.aktivna { background: var(--okvir-izabrano); }
}

/* ---------- FLYOUT skupljenog menija i PADAJUĆI PANEL gornjeg menija — isti izgled (RMX_Web .app-side-flyout / .app-menu-panel,
   „menjati zajedno“). Flyout je fixed van menija (ne seče ga skrol); JS ga postavlja pored summary-ja i skida hidden. ---------- */
.meni-flyout, .gornji .gp {
  min-width: 220px; max-width: 300px; padding: 6px 0; background: var(--okvir-vrh); color: var(--okvir-tekst);
  border: 1px solid var(--okvir-izabrano); border-radius: 4px; box-shadow: 4px 6px 18px rgba(0, 0, 0, .45);
  font-size: var(--vel-meni); overflow-y: auto;
}
.meni-flyout { display: none; position: fixed; z-index: 2000; max-height: calc(100vh - 16px); }
.meni-flyout.is-open { display: block; }
.meni-flyout .mf-naslov {
  padding: 8px 14px 6px; color: var(--okvir-grupa); font-size: calc(var(--vel-meni) - 2px); font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
}
[dir=rtl] .meni-flyout .mf-naslov { letter-spacing: 0; }
.meni-flyout a, .meni-flyout .off, .gornji .gp a, .gornji .gp .off {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 14px; padding-inline-start: 11px;
  border-inline-start: 3px solid transparent; color: var(--okvir-tekst); text-decoration: none; white-space: nowrap;
}
.meni-flyout a:hover, .meni-flyout a:focus-visible, .gornji .gp a:hover, .gornji .gp a:focus-visible {
  background: var(--okvir-izabrano); color: var(--akcent); border-inline-start-color: var(--akcent-crta); font-weight: 600;
  text-decoration: none; outline: none;
}
.meni-flyout a.on, .gornji .gp a.on { background: var(--okvir-izabrano); color: var(--akcent); font-weight: 600; }

/* ---------- GORNJI MENI sa ikonicama (_MeniGornji.cshtml; uzor RMX_Web .app-menu, ikonice na zahtev korisnika 2026-10-27) ----------
   .gm stavka trake, .gg grupa, .gp padajući panel; otvara se mišem, fokusom ili klasom .otvoren (JS, klik / tastatura). */
.gornji {
  grid-column: 1 / -1; display: flex; align-items: stretch; gap: 2px; padding: 0 10px; min-height: 34px; min-width: 0;
  background: var(--okvir-meni); border-bottom: 1px solid var(--okvir-vrh); font-size: var(--vel-meni);
  position: relative; z-index: 60;
}
.gornji .gm {
  display: inline-flex; align-items: center; gap: 7px; padding: 0 12px; height: 100%; white-space: nowrap;
  color: var(--okvir-tekst); background: none; border: 0; border-bottom: 2px solid transparent; font: inherit; font-weight: 500;
  text-decoration: none; cursor: pointer;
}
.gornji .gm .ik { width: 18px; height: 18px; flex: none; display: block; }
.gornji .gm small { font-size: 10px; opacity: .7; }
.gornji .gm.on, .gornji .gm.aktivna { color: var(--akcent); font-weight: 600; border-bottom-color: var(--akcent-crta); }
/* Pod mišem podebljano obrubom slova, ne font-weight — susedne stavke se ne pomeraju (RMX_Web 2026-10-13). */
.gornji .gm:hover, .gornji .gm:focus-visible, .gornji .gg:hover > .gm, .gornji .gg.otvoren > .gm {
  background: var(--okvir-izabrano); color: var(--akcent); border-bottom-color: var(--akcent-crta); text-decoration: none; outline: none;
  -webkit-text-stroke: .4px currentColor;
}
.gornji .gg { position: relative; display: flex; align-items: stretch; }
.gornji .gp { display: none; position: absolute; top: 100%; inset-inline-start: 0; z-index: 50; max-height: calc(100vh - 90px); }
/* Ne .gg:focus-within: posle Escape fokus ostaje na dugmetu i panel ne bi nestao (rmx.js Meni) — tastatura otvara preko .otvoren. */
.gornji .gg:hover .gp, .gornji .gp:focus-within, .gornji .gg.otvoren .gp { display: block; }

/* Zastor iza fioke — samo telefon (blok TELEFON). */
.meni-zastor { display: none; }

.main { padding: 12px 16px; overflow: auto; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.status {
  grid-column: 1 / -1; background: var(--okvir-status); color: var(--okvir-tekst); font-size: 11px; display: flex;
  align-items: center; padding: 0 14px; gap: 22px; white-space: nowrap; overflow: hidden;
}
.donji-meni { display: none; }

/* ---------- TOOLBAR LISTE (Partneri obrazac): Novi · Izmena · Brisanje · Štampa, pa posebni ---------- */
.toolbar {
  background: var(--panel); border: 1px solid var(--edge); border-radius: var(--radius); padding: 6px 8px;
  display: flex; align-items: center; gap: 6px; margin-bottom: 8px; flex-wrap: wrap;
}
.btn {
  background: #e8eaed; border: 1px solid var(--edge); border-radius: 6px; padding: 4px 10px; display: inline-flex;
  align-items: center; gap: 6px; color: #1f252c; white-space: nowrap; font: inherit; cursor: pointer; min-height: 28px;
}
.btn svg { width: 14px; height: 14px; flex: none; }
.btn:hover { background: var(--hover); text-decoration: none; }
.btn[data-akcija="novi"]:hover { background: var(--ok-bg); border-color: var(--ok-ln); }
.btn[data-akcija="izmena"]:hover { background: var(--up-bg); border-color: var(--up-ln); }
.btn[data-akcija="brisanje"]:hover { background: var(--lo-bg); border-color: var(--lo-ln); }
.btn[data-akcija="stampa"]:hover { background: #dfe9f4; border-color: #4f6d8f; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: default; background: #e8eaed; border-color: var(--edge); }
.btn.g { background: var(--green); border-color: #327540; color: #fff; font-weight: 600; }
.btn.g:hover { background: #357a41; }
.sp { flex: 1; }
.pretraga {
  display: flex; align-items: center; border: 1px solid var(--ivica-polja); border-radius: 6px; background: #fff;
  width: 230px; max-width: 100%; padding: 0 4px 0 8px;
}
.pretraga input { border: 0; outline: none; font: inherit; flex: 1; min-width: 0; padding: 4px 0; background: transparent; }
.pretraga button { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 15px; padding: 0 4px; }

/* ---------- TABELA (lista) ---------- */
.panel { background: #fff; border: 1px solid var(--edge); border-radius: var(--radius); overflow: hidden; }
.panel.skrol { overflow: auto; }
table.grid { width: 100%; border-collapse: collapse; }
.grid th {
  background: var(--traka); color: var(--traka-tekst); font-weight: 600; font-size: 12px; text-align: start;
  padding: 3px 8px; white-space: nowrap; user-select: none; position: sticky; top: 0; z-index: 1;
}
.grid th[data-kolona] { cursor: pointer; }
.grid th .s { color: var(--traka-akcent); margin-inline-start: 4px; }
/* Mirna lista (korisnik 2026-10-27: „totalno nepregledno i šareno … treba profesionalan izgled“, izabrao varijantu B):
   belo sa tankom crtom reda, bez pruga; trake meseci / grupa = mali sivi natpis velikim slovima i crta ispod (ne bež traka);
   izabran red svetlo sivo i poluboldovano. Važi za sve liste — „kako izgleda jedan pregled, tako izgledaju svi“.
   Boja traka grupa = Prikaz „Trake grupa u listama“ (korisnik 2026-10-28, UiIzgled.TrakeGrupa), podrazumevano iz Boje izbora. */
.grid td { padding: 6px 8px; border-bottom: 1px solid var(--crta-reda); white-space: nowrap; height: 30px; }
.grid tbody tr[data-id] { cursor: pointer; }
.grid .num, .grid th.num { text-align: end; font-variant-numeric: tabular-nums; }
.grid tr.band td {
  background: var(--grupa); color: var(--grupa-tekst); font-weight: 600; font-size: 11px; letter-spacing: .4px; text-transform: uppercase;
  border-top: 0; border-bottom: 1px solid var(--grupa-crta); height: auto; padding: 12px 8px 3px;
}
/* Razmak između slova kida spojena arapska slova. */
[dir=rtl] .grid tr.band td { letter-spacing: 0; }
/* Boje reda i trake ostaju izbor korisnika (Podešavanja → Prikaz, UiIzgled.Izbori; podrazumevano „Mirna“). */
.grid tr.sel td { background: var(--red-izabran) !important; font-weight: 600; }
/* Samo ćelija pregleda (>), ne i ćelije tabela UNUTAR pregleda (potvrde, dokumenti, vrste — F1 2026-10-27).
   Pregled ispod reda: belo; izabran red i njegov pregled ocrtani ZAJEDNO tankim tamnim okvirom (korisnik 2026-10-28: „crna traka
   … nije lepa (vertikalna) … ceo okvir“, „da se lepo ocrta ono što je odabrano“ — umesto crte 3 px na početku reda).
   Vrsta i boja se biraju u Prikaz → Boje „Oznaka izabranog reda“ / „Boja oznake“ (korisnik 2026-10-28: „ostavi oba da se biraju“):
   --oz-pocetak (debljina crte na početku: okvir 1px, crta 3px, bez 0), --oz-pocetak-boja, --oz-okvir (ostatak okvira; kod crte i
   „bez“ providno), --oz-dno (crta ispod pregleda), --oz-d (debljina okvira 1–3 px, „Debljina okvira“, korisnik 2026-10-28) —
   Data/UiIzgled.cs. Senke nemaju logičku stranu — za arapski obrnuto. */
.grid tr.det > td {
  background: #fff !important; padding: 10px 12px 12px; border-bottom: var(--oz-d) solid var(--oz-dno);
  box-shadow: inset var(--oz-pocetak) 0 0 var(--oz-pocetak-boja), inset calc(-1 * var(--oz-d)) 0 0 var(--oz-okvir);
  white-space: normal; height: auto; cursor: default;
}
[dir=rtl] .grid tr.det > td { box-shadow: inset calc(-1 * var(--oz-pocetak)) 0 0 var(--oz-pocetak-boja), inset var(--oz-d) 0 0 var(--oz-okvir); }
.grid tr.sel:has(+ tr.det) > td { box-shadow: inset 0 var(--oz-d) 0 var(--oz-okvir); }
.grid tr.sel:has(+ tr.det) > td:first-child { box-shadow: inset 0 var(--oz-d) 0 var(--oz-okvir), inset var(--oz-d) 0 0 var(--oz-okvir); }
.grid tr.sel:has(+ tr.det) > td:last-child { box-shadow: inset 0 var(--oz-d) 0 var(--oz-okvir), inset calc(-1 * var(--oz-d)) 0 0 var(--oz-okvir); }
[dir=rtl] .grid tr.sel:has(+ tr.det) > td:first-child { box-shadow: inset 0 var(--oz-d) 0 var(--oz-okvir), inset calc(-1 * var(--oz-d)) 0 0 var(--oz-okvir); }
[dir=rtl] .grid tr.sel:has(+ tr.det) > td:last-child { box-shadow: inset 0 var(--oz-d) 0 var(--oz-okvir), inset var(--oz-d) 0 0 var(--oz-okvir); }
.grid tr.prazno td { color: var(--muted); text-align: center; height: 60px; }
.pregled-naslov { font-weight: 700; margin-bottom: 6px; }

/* ---------- PREGLED „KAO DOKUMENT“ (korisnik 2026-10-27, varijanta B; prvi: Pages/OtkupniListovi/_Pregled.cshtml) ----------
   List papira: zaglavlje (naslov, ko, tasteri na kraju), podaci u dva para po redu (dl), stavke tankim crtama, dole na početku
   šta nedostaje (tamnocrveno), na kraju zbir sa „Ukupno“ ispod debele crte, pa dokumenti. Za druge preglede iste klase, ne kopija.
   Tabele u .dok gase izgled liste (.grid th tamna traka, lepljiv red) — .dok table th je jače od .grid th. */
.dok { max-width: 1100px; background: #fff; border: 1px solid var(--crta-grupe); border-radius: 6px; padding: 14px 18px; }
.dok-zag {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 8px 16px; flex-wrap: wrap;
  border-bottom: 1px solid var(--crta-grupe); padding-bottom: 10px; margin-bottom: 10px;
}
.dok-nasl { font-size: calc(var(--vel) + 3px); font-weight: 700; color: var(--tekst); }
.dok-pod { color: var(--muted); margin-top: 2px; }
.dok-akcije { display: flex; gap: 6px; flex-wrap: wrap; }
.dok-akcije .btn { background: #fff; min-height: 26px; padding: 2px 10px; }
.dok-kv { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr); gap: 4px 16px; margin: 0 0 12px; }
.dok-kv dt { color: var(--muted); }
.dok-kv dd { margin: 0; color: var(--tekst); font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.dok-tabela { overflow-x: auto; }
.dok table { width: 100%; border-collapse: collapse; }
.dok table th {
  background: none; color: var(--si-tx); font-weight: 600; font-size: 12px; text-align: start; position: static;
  border-bottom: 1px solid var(--tekst); padding: 4px 6px; white-space: nowrap;
}
.dok table td { background: none; height: auto; padding: 5px 6px; border-bottom: 1px solid var(--crta-reda); white-space: normal; }
.dok .num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dok-dno { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px 24px; margin-top: 10px; }
.dok-fali { color: var(--lo-tx); }
.dok-fali b { font-weight: 600; }
.dok-zbir { min-width: 300px; margin-inline-start: auto; }
.dok-zbir > div { display: flex; justify-content: space-between; gap: 16px; padding: 2px 0; }
.dok-zbir .uk { border-top: 2px solid var(--tekst); margin-top: 4px; padding-top: 4px; font-weight: 700; font-size: calc(var(--vel) + 1px); }
.dok-odeljak {
  margin: 16px 0 4px; color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase;
}
[dir=rtl] .dok-odeljak { letter-spacing: 0; }

/* ---------- PREGLED ISPOD REDA — PANELI (korisnik 2026-10-27: „vidi donji pregled u RMX_Web … imaš kod ulaznih faktura“) ----------
   Kao RMX_Web Pages/UlazneFakture varijanta B (2026-10-15): dve nezavisne kolone belih panela na sivoj podlozi reda, svaki deo sa
   podebljanim naslovom, labela iznad i vrednost kao tekst sa tankom crtom ispod (bez sivih kutija), tabela preko cele širine ispod.
   Bez tastera u pregledu — radnje su u toolbaru liste. Prvi: Pages/OtkupniListovi/_Pregled.cshtml; ostali pregledi iste klase. */
.grid tr.det > td:has(> .pp) { background: var(--bg) !important; }
/* Paneli idu u ŠIRINU preko celog ekrana, a na užem ekranu se sami prelamaju u novi red (korisnik 2026-10-27: „treba da idu u širinu
   a ne u visinu … ako je ekran manji onda da se floatuju ovi kontejneri“). .pp-kolona ne pravi kolonu (display: contents) — svi paneli
   su u jednom redu koji se prelama; širina panela po sadržaju (.pp-panel 22rem do celog reda, tabele uvek preko cele širine). */
.pp { display: flex; flex-direction: column; gap: 10px; }
.pp-kolone { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.pp-kolona { display: contents; }
.pp-kolone > .pp-kolona > .pp-panel, .pp-kolone > .pp-panel { flex: 1 1 22rem; max-width: 100%; }
.pp-panel { background: #fff; border: 1px solid var(--crta-grupe); border-radius: 6px; padding: 8px 10px; min-width: 0; }
.pp-deo { font-weight: 650; color: var(--tekst); margin-bottom: 6px; }
.pp-polja { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: start; }
.pp-f { display: flex; flex-direction: column; gap: 1px; min-width: 7.5rem; flex: 0 1 9rem; }
.pp-f.pp-siroko { flex: 1 1 14rem; }
.pp-f > span { font-size: var(--vel-labela); font-weight: 600; color: var(--muted); line-height: 1.15; }
.pp-f > b { font-weight: 500; border-bottom: 1px solid var(--crta-reda); padding: 1px 0 3px; min-height: 18px; word-break: break-word; }
.pp-f.pp-broj > b { font-variant-numeric: tabular-nums; }
.pp-f.pp-jako > b { font-weight: 700; }
.pp-f.pp-fali > span, .pp-f.pp-fali > b { color: var(--lo-tx); }
.pp-tabela { overflow-x: auto; }
.pp-panel .pp-polja + .pp-tabela { margin-top: 8px; }
.pp-stavke { width: 100%; border-collapse: collapse; }
/* .grid .pp-stavke: jače od .grid th (tamna traka liste) — tabela u belom panelu ima svetlo zaglavlje, kao RMX_Web. */
.grid .pp-stavke th, .pp-stavke th { position: static; background: none; text-align: start; font-size: 12px; font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--crta-grupe); padding: 3px 6px; white-space: nowrap; }
.pp-stavke td { padding: 4px 6px; border-bottom: 1px solid var(--crta-reda); white-space: normal; height: auto; }
.grid .pp-stavke .num, .pp-stavke .num { text-align: end; font-variant-numeric: tabular-nums; }
.pp .grid.dokumenti th { position: static; }

/* ---------- POLJA: labela iznad, širina po sadržaju (pravila_ui.md „Kartica — labeli / širina polja“) ---------- */
.polja { display: flex; flex-wrap: wrap; gap: 4px 4px; }
.polja + .polja { margin-top: 4px; }
.f { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.f label, .f .lbl { font-size: var(--vel-labela); color: var(--muted); }
/* flex-wrap: više pilula (npr. moduli firme) prelazi u novi red, ne širi tabelu (proba F0 2026-10-27). */
.f .v { background: var(--siva-polja); border-radius: 4px; padding: 4px 8px; min-height: 24px; display: flex; align-items: center; gap: 4px 6px; flex-wrap: wrap; }
.f .v.num { justify-content: flex-end; }
.f input[type=text], .f input[type=email], .f input[type=password], .f input[type=number], .f input[type=date], .f select, .f textarea {
  background: #fff; border: 1px solid var(--ivica-polja); border-radius: 4px; padding: 4px 8px; min-height: 28px; font: inherit; color: inherit; max-width: 100%;
}
.f input:focus, .f select:focus, .f textarea:focus { outline: 2px solid var(--akcent-crta); outline-offset: 0; border-color: var(--akcent-crta); }
.f input[readonly] { background: var(--siva-polja); border-color: var(--siva-polja); }
.f.cek { flex-direction: row; align-items: center; gap: 6px; padding-top: 14px; }
.f.cek label { font-size: var(--vel); color: inherit; }
.w-xs { width: 80px; } .w-s { width: 130px; } .w-m { width: 200px; } .w-l { width: 320px; } .w-xl { width: 480px; }
.greska-polja { color: var(--lo-tx); font-size: 11px; }

/* ---------- KARTICA: naslov fiksno, sredina skroluje, Snimi / Odustani uvek dole ---------- */
.kartica-page { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.kartica-scroll { flex: 1; overflow: auto; min-height: 0; padding-bottom: 8px; }
.kartica-actions {
  display: flex; gap: 8px; align-items: center; padding: 8px 0 0; border-top: 1px solid var(--edge); background: var(--bg);
}
.card-panel { background: #fff; border: 1px solid var(--edge); border-radius: var(--radius); overflow: hidden; margin-bottom: 8px; }
/* Naslov grupe: boje = Podešavanja → Prikaz „Naslovi grupa“ (Data/UiIzgled.cs Paneli, korisnik 2026-10-27); podrazumevano
   iste kao traka panela. Donja crta (senka, ne menja visinu) se vidi samo na svetlim (Bela, Svetlo siva). */
.card-panel .t {
  background: var(--panel-naslov); color: var(--panel-naslov-tekst); font-weight: 600; padding: 3px 10px; display: flex;
  justify-content: space-between; align-items: center; gap: 8px; box-shadow: inset 0 -1px 0 var(--panel-naslov-crta);
}
.card-panel .t small { font-weight: 400; color: var(--panel-naslov-akcent); }
.card-panel .b { padding: 8px 10px; }
.tabs { display: flex; gap: 2px; border-bottom: 2px solid var(--traka-panel); flex-wrap: wrap; }
.tabs button {
  padding: 5px 14px; border: 1px solid var(--edge); border-bottom: none; border-radius: 6px 6px 0 0; background: #e8eaed;
  color: #3a434e; font: inherit; cursor: pointer;
}
.tabs button.on { background: var(--traka-panel); color: var(--traka-akcent); font-weight: 600; border-color: var(--traka-panel); }
.tabs button:focus { outline: 2px solid var(--akcent-crta); }
.tab-panel { background: #fff; border: 1px solid var(--edge); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); padding: 8px 10px; margin-bottom: 8px; }

/* ---------- STAVKE na kartici (potvrde RPG, vrste objekta) i DOKUMENTI uz zapis (F1, 2026-10-27) ---------- */
.grid.stavke td, .grid.dokumenti td { height: auto; padding: 3px 6px; }
.grid.stavke input, .grid.stavke select {
  background: #fff; border: 1px solid var(--ivica-polja); border-radius: 4px; padding: 3px 6px; min-height: 26px; font: inherit; color: inherit; max-width: 100%;
}
.grid.stavke input:focus, .grid.stavke select:focus { outline: 2px solid var(--akcent-crta); outline-offset: 0; }
.btn-x { border: 0; background: none; color: var(--lo-tx); font-size: 16px; cursor: pointer; padding: 0 6px; }
.stavke-alati { display: flex; gap: 8px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.ucitaj-zona {
  border: 2px dashed var(--edge); border-radius: var(--radius); background: #fff; padding: 8px 10px; margin-bottom: 8px;
  display: flex; flex-direction: column; gap: 6px;
}
.ucitaj-zona.preko { border-color: var(--ok-ln); background: var(--ok-bg); }
.ucitaj-zona .red { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ucitaj-zona .red select { border: 1px solid var(--ivica-polja); border-radius: 4px; padding: 3px 6px; min-height: 28px; font: inherit; }
.ucitaj-zona .ucitano { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.ucitaj-zona .ucitano:empty { display: none; }
label.btn input[type=file] { display: none; }
/* Polje popunjeno iz PDF-a: žuto dok se ne snimi (stara vrednost u opisu polja). */
.f input.iz-pdf { background: var(--up-bg); border-color: var(--up-ln); }

/* ---------- DATUM (F2, kao RMX_Web site.css .rmx-date-wrap): tekst po formatu korisnika + skriveno polje za vrednost i kalendar ---------- */
.rmx-date-wrap { position: relative; display: inline-block; vertical-align: top; max-width: 100%; }
.rmx-date-wrap input.rmx-date-prikaz {
  width: 8.6rem; background: #fff; border: 1px solid var(--ivica-polja); border-radius: 4px; padding: 4px 8px; padding-inline-end: 1.85rem;
  min-height: 28px; font: inherit; color: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='2' y='3.2' width='12' height='10.8' rx='1.2' fill='none' stroke='%231a1f26' stroke-width='1.25'/%3E%3Cpath d='M2 6.5h12M5.3 2.3v2.5M10.7 2.3v2.5' fill='none' stroke='%231a1f26' stroke-width='1.25' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 7px center; background-size: 14px 14px;
}
[dir=rtl] .rmx-date-wrap input.rmx-date-prikaz { background-position: left 7px center; }
.rmx-date-wrap input.rmx-date-prikaz:focus { outline: 2px solid var(--akcent-crta); outline-offset: 0; border-color: var(--akcent-crta); background-color: #eef8d8; }
.rmx-date-wrap input.rmx-date-prikaz:disabled, .rmx-date-wrap input.rmx-date-prikaz[readonly] { background-color: var(--siva-polja); }
/* input.rmx-date-native (jače od .f input[type=date]): skriveno polje ostaje 1 × 1 px bez okvira i bez padding-a, i na zaključanoj
   kartici — inače pokrije prve cifre datuma (proba F2 2026-10-27, „3.10.2026“ umesto „28.10.2026“). */
.rmx-date-wrap input.rmx-date-native {
  position: absolute; inset-inline-start: 0; top: 0; width: 1px; height: 1px; min-height: 0; opacity: 0 !important; margin: 0; padding: 0; border: 0; pointer-events: none;
}
.grid.stavke .rmx-date-wrap input.rmx-date-prikaz { min-height: 26px; padding-top: 3px; padding-bottom: 3px; }

/* ---------- OTKUPNI LIST (F2): stavke sa obračunom, zbir (od 2026-10-27 list se ne zaključava) ---------- */
fieldset.bez-okvira { border: 0; margin: 0; padding: 0; min-width: 0; }
/* Onemogućeno polje (npr. uloga „pregled“): sivo kao pregled, da se odmah vidi da se ne menja. */
fieldset:disabled input:not([type=checkbox]):not(.rmx-date-native), fieldset:disabled select, .f input:disabled:not(.rmx-date-native), .f select:disabled {
  background-color: var(--siva-polja); border-color: var(--siva-polja); color: var(--tekst); opacity: 1;
}
.otk-stavke input.num { text-align: end; }
.otk-stavke td[data-otk-osn], .otk-stavke td[data-otk-por], .otk-stavke td[data-otk-uk] { min-width: 90px; }
/* Zbir stavki: belo, debela crta iznad, bold — kao „Ukupno za isplatu“ u pregledu (2026-10-27, bez bež trake). */
.grid tr.otk-zbir td, .grid tfoot tr.otk-zbir td { background: #fff !important; color: var(--tekst); font-weight: 700; border-top: 2px solid var(--tekst); }

/* ---------- STANJA (korisnik 2026-10-27, varijanta B): crno / sivo / belo, boja samo za ono što fali ili ne valja ----------
   .pill je običan tekst (ne kapsula u boji): sivo = podatak / ne, tamno = u redu / da, tamnocrveno poluboldovano = fali, problem
   (.up i .lo isto — „pažnja“ i „ne sme“ se razlikuju rečima, ne bojom). Više oznaka u nizu razdvaja razmak.
   .strip (upozorenje, greška, poruka) nije žuta kutija nego tanka crta na početku reda: crvena = pažnja / greška, tamna = poruka.
   Zelena / žuta / crvena podloga (--ok-bg, --up-bg, --lo-bg) ostaje samo gde je radnja u toku (prevlačenje fajla, polje iz PDF-a,
   prelaz miša preko tastera). */
.pill { display: inline; padding: 0; border: 0; background: none; font-size: inherit; font-weight: 400; color: var(--muted); white-space: nowrap; }
.pill + .pill { margin-inline-start: 8px; }
/* Arapski: ćelija sa latiničnim tekstom teče sleva (unicode-bidi: plaintext), pa razmak „na početku“ pada na pogrešnu stranu —
   zato razmak sa obe strane (proba 2026-10-27, „u PDVfali 2“). */
[dir=rtl] .pill + .pill { margin-inline: 5px; }
.pill.ok { color: var(--tekst); }
.pill.si { color: var(--muted); }
.pill.up, .pill.lo { color: var(--lo-tx); font-weight: 600; }
.strip { border: 0; border-inline-start: 3px solid var(--lo-tx); background: none; color: var(--tekst); border-radius: 0; padding: 2px 10px; margin: 2px 0 8px; }
.strip.lo { color: var(--lo-tx); font-weight: 600; }
.strip.ok { border-inline-start-color: var(--naglasak); }
.plocice { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.tile { background: #fff; border: 1px solid var(--edge); border-radius: var(--radius); padding: 8px 12px; min-width: 170px; }
.tile .k { font-size: 11px; color: var(--muted); }
.tile .n { font-size: 20px; font-weight: 700; }
/* Pločica „u redu“ bez boje; „fali nešto“ (npr. poljoprivrednici za dopunu) = crvena crta na početku, kao .strip. */
.tile.up { border-inline-start: 3px solid var(--lo-tx); }

/* ---------- DIJALOG (brisanje DA/NE, „Sačuvati izmene?“), ČEKANJE, PROZOR ŠTAMPE — zajednički, wwwroot/js/rmx.js ---------- */
.rmx-zastor { position: fixed; inset: 0; background: rgba(20, 24, 30, .45); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.rmx-dijalog { background: #fff; border-radius: var(--radius); border: 1px solid var(--edge); min-width: 300px; max-width: 92vw; box-shadow: 0 8px 30px rgba(0,0,0,.25); overflow: hidden; }
.rmx-dijalog .t { background: var(--traka-panel); color: var(--traka-tekst); font-weight: 600; padding: 6px 12px; }
.rmx-dijalog .b { padding: 12px; white-space: pre-line; }
.rmx-dijalog .a { display: flex; gap: 8px; justify-content: flex-end; padding: 0 12px 12px; }
.rmx-cekanje { position: fixed; inset: 0; background: rgba(20, 24, 30, .25); display: flex; align-items: center; justify-content: center; z-index: 1100; cursor: wait; }
.rmx-cekanje .krug { width: 42px; height: 42px; border: 4px solid #fff; border-top-color: var(--akcent-crta); border-radius: 50%; animation: rmx-vrti .8s linear infinite; }
.rmx-cekanje .tx { color: #fff; margin-inline-start: 12px; font-weight: 600; text-shadow: 0 1px 2px #000; }
@keyframes rmx-vrti { to { transform: rotate(360deg); } }

/* ---------- PROZOR ŠTAMPE / PREGLEDA FAJLA (.sp-*) — jedan okvir za ceo program, rmx.js okvirProzora / stampaDokument / prozor.
   Po uzoru na RMX_Web (korisnik 2026-10-27: „daj vidi kako je rešena štampa u RMX_Web“ — ui_toolbar.md §7g, site.css
   „PROZOR ŠTAMPE“): tamna traka sa crtom akcenta 3 px na vrhu (ivica se vidi i na tamnom zastoru), ikonica, naslov + podnaslov,
   prekidač prikaza (izabran = podvučen akcentom), Štampaj (pun) · PDF · crta · ×. Boje = tokeni okvira i akcenta korisnika
   (Data/UiIzgled.cs), nikad fiksne. Dokument (A4 / matrični) sam crta svoj list na sivoj podlozi (--bg); ram = celo telo. */
.sp-prozor {
  width: min(1100px, 98vw); height: min(94vh, 1100px); display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border-radius: 10px; box-shadow: 0 18px 50px rgba(0, 0, 0, .45); outline: none;
}
.sp-bar {
  flex: none; display: flex; align-items: center; gap: 16px; min-height: 60px; padding-block: 10px; padding-inline: 16px 12px;
  background: var(--okvir-vrh); border-top: 3px solid var(--akcent-crta);
}
.sp-ttl { display: flex; align-items: center; gap: 11px; min-width: 0; flex: 0 1 auto; }
.sp-ik {
  width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 8px;
  background: var(--okvir-izabrano); color: var(--akcent-crta);
}
.sp-ik svg { width: 19px; height: 19px; }
.sp-ttl-tekst { min-width: 0; }
.sp-naslov { color: var(--okvir-tekst); font-size: calc(var(--vel) + 2px); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-pod { color: var(--okvir-tekst); opacity: .72; font-size: calc(var(--vel) - 1px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 360px; }
.sp-seg { display: flex; flex: none; padding: 3px; border-radius: 8px; background: var(--okvir-meni); }
.sp-seg-btn {
  padding: 6px 15px; border: 0; border-radius: 6px; background: transparent; color: var(--okvir-tekst);
  font: inherit; white-space: nowrap; cursor: pointer;
}
.sp-seg-btn:hover:not(:disabled) { color: var(--akcent); }
.sp-seg-btn.on { background: var(--okvir-izabrano); color: var(--akcent); font-weight: 600; box-shadow: inset 0 -2px 0 var(--akcent-crta); }
.sp-akcije { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; flex: none; }
.sp-btn {
  height: 32px; padding: 0 13px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--akcent-crta);
  border-radius: 8px; background: transparent; color: var(--akcent); font: inherit; white-space: nowrap; cursor: pointer;
}
a.sp-btn:hover { text-decoration: none; }
.sp-btn svg, .sp-x svg { width: 16px; height: 16px; flex: none; }
.sp-btn:hover:not(:disabled) { background: var(--okvir-izabrano); }
.sp-btn.sp-glavni { background: var(--akcent-crta); color: var(--okvir-vrh); font-weight: 600; }
.sp-btn.sp-glavni:hover:not(:disabled) { background: var(--akcent-crta); filter: brightness(1.1); }
.sp-btn:disabled, .sp-seg-btn:disabled, .sp-btn.sp-off { opacity: .45; cursor: default; pointer-events: none; }
.sp-sep { width: 1px; height: 28px; margin: 0 4px; background: var(--okvir-grupa); }
.sp-x {
  width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent;
  color: var(--okvir-tekst); cursor: pointer;
}
.sp-x:hover { background: var(--okvir-izabrano); color: var(--akcent); }
.sp-btn:focus-visible, .sp-seg-btn:focus-visible, .sp-x:focus-visible { outline: 2px solid var(--akcent-crta); outline-offset: 2px; }
.sp-telo { position: relative; flex: 1; min-height: 0; background: var(--bg); }
.sp-ram { display: block; width: 100%; height: 100%; border: 0; background: var(--bg); }
/* Pregled fajla (PDF, slika): bela podloga, pregledač PDF-a ima svoju. */
.sp-fajl .sp-telo, .sp-fajl .sp-ram { background: #fff; }
/* „Formiram…“ preko tela dok se dokument pravi (RMX_Web .print-wait); greška = isti prostor, bez kruga. */
.sp-cekanje { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 12px; background: var(--bg); color: var(--tekst); font-weight: 600; }
.sp-cekanje .krug { width: 34px; height: 34px; border: 4px solid #fff; border-top-color: var(--akcent-crta); border-radius: 50%; animation: rmx-vrti .8s linear infinite; }
.sp-cekanje.greska { color: var(--lo-tx); }
.sp-cekanje.greska .krug { display: none; }

/* ---------- PRIJAVA I PRVO POKRETANJE ---------- */
.prijava-pozadina { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.prijava { background: #fff; border: 1px solid var(--edge); border-radius: var(--radius); width: 380px; max-width: 100%; overflow: hidden; }
.prijava .t { background: var(--okvir-vrh); color: var(--akcent); padding: 10px 14px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; }
.prijava .b { padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.prijava .f input { width: 100%; }
.prijava .jezik { display: flex; gap: 4px; }
.prijava .jezik form { margin: 0; }
.prijava .jezik button { background: none; border: 1px solid var(--okvir-grupa); color: var(--okvir-tekst); border-radius: 4px; font: inherit; font-size: 11px; padding: 1px 6px; cursor: pointer; }
.prijava .jezik button.on { color: var(--akcent); border-color: var(--akcent-crta); }
.prijava code { background: var(--siva-polja); padding: 1px 4px; border-radius: 3px; }

/* ---------- ARAPSKI (zdesna nalevo): vrednosti zadržavaju svoj smer (brojevi, PIB, markice) ---------- */
[dir=rtl] .grid td, [dir=rtl] .f .v, [dir=rtl] .pill { unicode-bidi: plaintext; }
[dir=rtl] .num { direction: ltr; }
/* plaintext bi latinični sadržaj (naziv grupe, ime) poravnao levo, a u širokoj tabeli to je van ekrana (prazne trake
   grupa, proba F0 2026-10-27) — u arapskom ćelije uvek desno, kao na slici D. */
[dir=rtl] .grid td, [dir=rtl] .grid th { text-align: right; }

/* ---------- ŠTAMPA (iframe prozora štampe nosi istu klasu) ---------- */
@media print {
  .top, .side, .gornji, .status, .toolbar, .kartica-actions, .donji-meni, .meni-flyout, .meni-zastor { display: none !important; }
  /* Bez menija sadržaj ide celom širinom (inače bi zauzeo kolonu menija). */
  .app { display: block; height: auto; }
  body { background: #fff; }
}

/* Delovi samo za telefon (korisnik 2026-10-27: „telefon mora biti poseban od browsera“) — na PC-u se ne vide; pali ih blok TELEFON.
   Ovde, posle .btn, da pobedi display iz .btn. td.tk = kartica reda liste (rmx.js Lista). */
.tel-naslov, .tel-nazad, .tel-sort, .tel-slikaj, .grid td.tk { display: none; }

/* ---------- GRLA I KRETANJA (F3, korisnik 2026-10-28): markica, serija markica, oznake po redu ---------- */
/* Markica ostaje sleva nadesno i u arapskom (broj), cifre iste širine da se serija čita kao kolona. */
.mk-tekst, input.mk { direction: ltr; unicode-bidi: plaintext; font-variant-numeric: tabular-nums; letter-spacing: .2px; }
[dir=rtl] input.mk { text-align: end; }
.kre-grla input.mk { width: 170px; }
.kre-grla td { vertical-align: top; }
/* Oznaka ispod markice: samo ono što ne valja je tamnocrveno (mirne oznake); predlog tačne K je taster (klik = zameni). */
.mk-upoz { font-size: 11.5px; color: var(--lo-tx); line-height: 1.3; }
.mk-upoz:empty { display: none; }
.mk-upoz > * + * { margin-inline-start: 6px; }
.mk-upoz .muted { color: var(--muted); }
.mk-predlog { border: 0; background: none; padding: 0; font: inherit; color: var(--lo-tx); text-decoration: underline; cursor: pointer; }
.grid.stavke tr.mk-los input.mk { border-color: var(--lo-ln); }
.ser .ser-red { margin-top: 4px; }
.ser .ser-plus { min-width: 36px; justify-content: center; font-weight: 700; font-size: 16px; }
.ser-poruka { min-height: 18px; margin-top: 4px; }
.ser-poruka.lo, [data-kre-sazetak].lo { color: var(--lo-tx); }
.skrol-x { overflow-x: auto; margin-top: 8px; }
/* Izbor „Na farmi · Sva grla“ u opisu liste grla — veza, izabrano podebljano. */
.izbor-prikaza { margin-inline-start: 10px; white-space: nowrap; }
.izbor-prikaza a.on { font-weight: 600; color: var(--tekst); text-decoration: none; }

/* ---------- TELEFON (do 700 px, pravila_ui.md „Telefon“): bez šetanja levo-desno, meni kao fioka, donji meni,
   polja 16 px (iPhone ne uveća stranu), mete za prst ≥ 40 px, široka tabela skroluje samo u svom okviru.
   Od 2026-10-27 telefon ima SVOJ izgled, ne sužen PC (korisnik: „Telefon optimizacija, mora biti posebna od browsera jer na
   telefonu je dosta manji ekran!“, izabrana slika Claude_Code_RMX\RMX_Farm\Telefon_predlog — varijanta A, kartice):
   gornja traka ☰ / ← · naslov ekrana (broj) · ikonica, ispod firma i godina; jezik, korisnik i Izlaz u fioci; liste kao
   kartice; Novi = okrugli „+“; pregled preko celog ekrana sa radnjama dole; kartica sa Snimi dole. Ponašanje: rmx.js
   (jeTelefon, Telefon(), Lista → karticaReda / telPregled / telSort) — ista granica 700 px, menjati zajedno. ---------- */
@media (max-width: 700px) {
  /* Sistemske trake telefona (korisnik 2026-10-27: „proveri kod RMX Web za moj telefon koji je Samsung S25“ → „Da, prenesi“;
     isto kao RMX_Web site.css „TELEFON — okvir“, 2026-10-09). Uz viewport-fit=cover (_Layout) strana ide ispod statusne i donje
     sistemske trake: --rmx-tel-dno = visina donje trake (safe-area-max-inset-bottom je stalna od prvog crtanja, inset-bottom
     ume da bude 0 do prvog skrola), --rmx-tel-vrh = statusna traka. Sve što je prikovano za dno ili vrh ekrana na telefonu
     (donji meni, okrugli „+“, fioka, pregled preko celog ekrana, prozor štampe, dijalozi) koristi ove dve — novi takav
     element isto, nikad gol bottom 0. Visina strane = --rmx-vis (innerHeight, _Layout <head>), 100dvh samo rezerva. */
  :root {
    --rmx-tel-dno: env(safe-area-max-inset-bottom, env(safe-area-inset-bottom, 0px));
    --rmx-tel-vrh: env(safe-area-inset-top, 0px);
    --rmx-tel-meni: calc(56px + var(--rmx-tel-dno));
  }
  .app, .app.meni-bocni, .app.meni-gornji {
    grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) var(--rmx-tel-meni); height: var(--rmx-vis, 100dvh);
  }
  .rmx-zastor { padding-block: var(--rmx-tel-vrh) var(--rmx-tel-dno); }
  /* Gornja traka u dva reda: [☰|←] naslov (broj) ikonica / firma · godina. Naslov ima veliku osnovu da firma pređe u drugi red. */
  .top { padding: calc(2px + var(--rmx-tel-vrh)) 8px 6px; gap: 2px 8px; flex-wrap: wrap; }
  /* ☰ uvek (oba režima) — otvara fioku; veća meta za prst. Na kartici ← umesto ☰ (rmx.js Telefon, .top.ima-nazad). */
  .top .meni-dugme, .app.meni-bocni .top .meni-dugme { display: inline-flex; width: 40px; height: 40px; order: 1; }
  .top .meni-dugme svg { width: 18px; height: 18px; }
  .app .top.ima-nazad .meni-dugme { display: none; }
  .top .tel-nazad {
    display: inline-flex; align-items: center; justify-content: center; order: 1; width: 40px; height: 40px; padding: 0;
    background: none; border: 0; color: var(--traka-tekst); cursor: pointer;
  }
  .top .tel-nazad .ik { width: 24px; height: 24px; }
  [dir=rtl] .top .tel-nazad .ik { transform: scaleX(-1); }
  .top .tel-naslov {
    display: flex; align-items: baseline; gap: 6px; order: 2; flex: 1 1 calc(100% - 100px); min-width: 0;
    color: var(--traka-tekst); font-size: 18px; white-space: nowrap;
  }
  .top .tel-naslov > span { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .top .tel-naslov small { font-size: 13px; font-weight: 400; color: var(--okvir-grupa); }
  .top .brand, .top .sep, .top .desno { display: none; }
  .top .brand-ico { width: 26px; height: 26px; flex-basis: 26px; order: 3; }
  .top .klijent-izbor { order: 4; }
  .top .klijent { display: inline-flex; max-width: 72vw; font-size: 12px; padding: 3px 10px; }
  .top .firme-meni { top: calc(100% + 4px); inset-inline-start: 0; min-width: min(300px, calc(100vw - 16px)); max-width: calc(100vw - 16px); }
  .firme-meni a { min-height: 44px; align-content: center; }
  /* Meni na telefonu (korisnik 2026-10-27, uzor RMX_Web): u oba režima nema gornje trake menija; bočni meni = fioka sa strane
     početka (u arapskom zdesna), zatvorena van ekrana i nevidljiva za Tab; html.meni-otvoren (rmx.js) je uvlači, zastor zatamni
     ostatak. Skupljen režim ne važi (pravila skupljenog su samo za PC), flyout se ne koristi. */
  .gornji { display: none; }
  .meni-flyout { display: none !important; }
  .side {
    position: fixed; inset-block: 0 var(--rmx-tel-meni); inset-inline-start: 0; width: min(290px, 86vw); z-index: 1500;
    padding-top: var(--rmx-tel-vrh);
    transform: translateX(-102%); visibility: hidden; transition: transform .18s ease, visibility 0s linear .18s;
    overscroll-behavior: contain;
  }
  [dir=rtl] .side { transform: translateX(102%); }
  html.meni-otvoren .side {
    transform: none; visibility: visible; transition: transform .18s ease; box-shadow: 4px 0 18px rgba(0, 0, 0, .45);
  }
  html.meni-otvoren[dir=rtl] .side { box-shadow: -4px 0 18px rgba(0, 0, 0, .45); }
  html.meni-otvoren .meni-zastor {
    display: block; position: fixed; inset: 0; z-index: 1400; background: rgba(0, 0, 0, .35);
  }
  /* Fioka od vrha ekrana (gornja traka na telefonu ima dva reda); korisnik i jezik na dnu fioke, uz Izlaz (_MeniBocni .tel). */
  .side .tel-korisnik { padding: 12px 14px 2px; color: var(--okvir-tekst); font-weight: 600; border-top: 1px solid var(--okvir-izabrano); margin-top: 6px; }
  .side .tel.tel-jezik {
    display: flex; margin: 6px 12px 6px; width: max-content; border: 1px solid var(--okvir-grupa); border-radius: 6px; overflow: hidden;
  }
  .side .tel-jezik form { margin: 0; }
  .side .tel-jezik button {
    background: none; border: 0; color: var(--okvir-tekst); font: inherit; font-size: 13px; min-height: 40px; padding: 0 16px; cursor: pointer;
  }
  .side .tel-jezik button.on { background: var(--okvir-izabrano); color: var(--akcent); font-weight: 600; }
  .side .sl { min-height: 44px; }
  .side .sp > a, .side .sp > .off { min-height: 44px; padding-block: 10px; }
  .side .tel { display: block; }
  .status { display: none; }
  .donji-meni {
    display: flex; grid-column: 1 / -1; background: var(--okvir-meni); border-top: 1px solid var(--okvir-izabrano);
    padding-bottom: var(--rmx-tel-dno);
  }
  /* Donji meni: ikonica 20 px iznad teksta (korisnik 2026-10-27 „sa ikonicama“). */
  .donji-meni a, .donji-meni button {
    flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    color: var(--okvir-tekst); background: none; border: 0; font: inherit; font-size: 11px; min-height: 44px; cursor: pointer;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .donji-meni a:hover { text-decoration: none; }
  .donji-meni .ik { width: 20px; height: 20px; flex: none; display: block; }
  .donji-meni .on, html.meni-otvoren .donji-meni [data-meni-fioka] { color: var(--akcent); background: var(--okvir-izabrano); font-weight: 600; }
  .main { padding: 8px; }
  .panel { overflow-x: auto; }
  .pretraga { width: 100%; }
  .f input[type=text], .f input[type=email], .f input[type=password], .f input[type=number], .f input[type=date], .f select, .f textarea, .pretraga input {
    font-size: 16px; min-height: 40px;
  }
  .btn { min-height: 40px; }
  .polja { flex-direction: column; }
  .f, .w-xs, .w-s, .w-m, .w-l, .w-xl { width: 100%; }
  /* Prozor štampe (2026-10-27, kao RMX_Web): ceo ekran, traka u redove (naslov · prekidač · radnje), × gore na kraju uz naslov,
     prekidač skroluje vodoravno u svom okviru, tasteri za prst. */
  .sp-prozor { width: 100vw; height: 100vh; height: var(--rmx-vis, 100dvh); border-radius: 0; }
  .rmx-zastor:has(> .sp-prozor) { padding: 0; }
  .sp-prozor { padding-block: var(--rmx-tel-vrh) var(--rmx-tel-dno); background: var(--okvir-vrh); }
  .sp-bar { position: relative; flex-wrap: wrap; gap: 8px; padding: 8px 10px; }
  .sp-ttl { flex: 1 1 100%; padding-inline-end: 44px; }
  .sp-pod { max-width: 100%; }
  .sp-seg { flex: 0 1 auto; max-width: 100%; overflow-x: auto; }
  .sp-akcije { flex: 1 1 100%; margin-inline-start: 0; flex-wrap: wrap; }
  .sp-btn { height: 40px; }
  .sp-sep { display: none; }
  .sp-x { position: absolute; top: 8px; inset-inline-end: 8px; width: 40px; height: 40px; }
  /* Pregled „kao dokument“ (2026-10-27): široka lista skroluje u svom okviru, a dokument ostaje širok koliko okvir liste
     (100cqi = unutrašnja širina .panel.skrol, bez trake za skrol; 100vw samo za stare pregledače) i prati skrol (sticky na
     početku); podaci jedan par po redu, zaglavlje i dno jedno ispod drugog, zbir cele širine. */
  .panel.skrol { container-type: inline-size; }
  .grid tr.det > td { padding: 8px; }
  .dok { padding: 10px 12px; position: sticky; inset-inline-start: 8px; max-width: calc(100vw - 34px); max-width: calc(100cqi - 16px); }
  .dok-kv { grid-template-columns: max-content minmax(0, 1fr); }
  .dok-zag, .dok-dno { flex-direction: column; align-items: stretch; }
  .dok-akcije .btn { min-height: 40px; }
  .dok-zbir { min-width: 0; width: 100%; margin-inline-start: 0; }

  /* --- Telefon: naslov strane je u gornjoj traci (rmx.js Telefon), opis strane se ne vidi — ostaju samo kontrole u njemu
     (npr. izbor godine), zato font-size 0 na tekstu i normalna veličina na deci. */
  .main h1.tel-u-traci { display: none; }
  .main > .opis { font-size: 0; margin: 0; }
  .main > .opis > * { font-size: 14px; margin: 0 0 8px !important; }

  /* --- Traka liste: pretraga cele širine, ispod ⇅ redosled; Izmena / Brisanje / Štampa su u pregledu zapisa (dole),
     Novi = okrugli „+“ iznad donjeg menija (slika Telefon_predlog A). */
  .toolbar { background: transparent; border: 0; padding: 0; gap: 8px; margin-bottom: 8px; }
  .toolbar .sp, .toolbar [data-akcija="izmena"], .toolbar [data-akcija="brisanje"], .toolbar [data-akcija="stampa"] { display: none; }
  .toolbar .pretraga { order: -1; flex: 1 1 100%; min-height: 44px; border-radius: 8px; padding: 0 6px 0 12px; }
  .toolbar .pretraga button { font-size: 20px; min-width: 36px; min-height: 40px; }
  .tel-sort {
    display: inline-flex; align-items: center; gap: 2px; min-height: 40px; max-width: 100%; padding: 0 4px 0 12px;
    background: #fff; border: 1px solid var(--ivica-polja); border-radius: 20px; color: var(--tekst); font-size: 14px;
  }
  .tel-sort select { border: 0; background: transparent; font: inherit; font-size: 14px; min-height: 38px; max-width: 62vw; color: inherit; }
  .toolbar .btn[data-akcija="novi"], .toolbar .btn[data-akcija="novi"]:hover {
    position: fixed; inset-inline-end: 16px; bottom: calc(16px + var(--rmx-tel-meni)); z-index: 50; width: 56px; height: 56px; padding: 0; gap: 0;
    justify-content: center; border-radius: 50%; font-size: 0; background: var(--naglasak); border: 2px solid var(--akcent-crta);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
  }
  .toolbar .btn[data-akcija="novi"] svg { width: 24px; height: 24px; }
  .toolbar .btn[data-akcija="novi"] svg path { stroke: var(--akcent); }

  /* --- Liste kao kartice (izabrano A): vidi se samo td.tk koju rmx.js napravi od istog reda; zaglavlje kolona sakriveno
     (redosled = ⇅). Boja samo za ono što fali: crta na početku kartice i tamnocrven red „fali …“. */
  .panel:has(> .grid[data-lista]) { background: transparent; border: 0; border-radius: 0; overflow: visible; container-type: normal; }
  .grid[data-lista], .grid[data-lista] > tbody { display: block; }
  .grid[data-lista] > thead, .grid[data-lista] tr.det { display: none; }
  .grid[data-lista] tr[data-id] { display: block; margin-bottom: 8px; }
  .grid[data-lista] tr[data-id] > td { display: none; }
  .grid[data-lista] tr[data-id] > td.tk {
    display: block; height: auto; white-space: normal; font-size: 14px; padding: 10px 12px;
    background: #fff; border: 1px solid var(--crta-grupe); border-radius: 10px;
  }
  .grid[data-lista] tr.tk-fali > td.tk { border-inline-start: 3px solid var(--lo-ln); }
  .grid[data-lista] tr.sel > td.tk { background: #fff !important; font-weight: 400; border-color: var(--naglasak); box-shadow: 0 0 0 1px var(--naglasak); }
  .grid[data-lista] tr.band { display: block; }
  .grid[data-lista] tr.band > td { display: block; height: auto; background: transparent; border: 0; padding: 6px 2px; white-space: normal; }
  .tk-g { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--muted); }
  .tk-n { font-size: 16px; font-weight: 600; margin-top: 2px; overflow-wrap: anywhere; }
  .tk-d { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; margin-top: 2px; }
  .tk-o { font-size: 13px; color: var(--muted); line-height: 1.45; min-width: 0; overflow-wrap: anywhere; }
  .tk-i { font-size: 17px; font-weight: 700; text-align: end; white-space: nowrap; unicode-bidi: plaintext; font-variant-numeric: tabular-nums; }
  .tk-i small { display: block; font-size: 12px; font-weight: 400; color: var(--muted); }
  .tk-s { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
  .tk-fali .tk-s { color: var(--lo-tx); }

  /* --- Pregled zapisa preko celog ekrana (rmx.js telPregled): iznad sadržaja, ispod dijaloga (.rmx-zastor 1000) i fioke;
     donji meni ostaje vidljiv. Tasteri pregleda u traci dole, glavna radnja (Izmena) tamna i poslednja. */
  .tel-pregled { position: fixed; inset: 0 0 var(--rmx-tel-meni) 0; z-index: 900; background: var(--bg); display: flex; flex-direction: column; }
  .tp-vrh { display: flex; align-items: center; gap: 4px; min-height: 52px; padding: calc(4px + var(--rmx-tel-vrh)) 8px 4px; background: var(--okvir-vrh); color: var(--traka-tekst); }
  .tp-nazad { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; color: inherit; cursor: pointer; }
  .tp-nazad svg { width: 24px; height: 24px; }
  [dir=rtl] .tp-nazad svg { transform: scaleX(-1); }
  .tp-nasl { flex: 1; min-width: 0; font-size: 17px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tp-telo { flex: 1; overflow: auto; overflow-x: hidden; padding: 10px; overscroll-behavior: contain; }
  .tp-telo.tp-bel { background: #fff; }
  .tp-telo .dok { position: static; max-width: none; border-radius: 10px; }
  .tp-radnje { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 10px; background: #fff; border-top: 1px solid var(--crta-grupe); }
  .tp-radnje .btn { flex: 1 1 0; min-height: 44px; justify-content: center; font-weight: 600; font-size: 14px; white-space: normal; text-align: center; }
  .tp-radnje .btn.gl { background: var(--naglasak); border-color: var(--naglasak); color: #fff; }
  .tp-radnje .btn.tp-bris { flex: 0 0 auto; color: var(--lo-tx); }

  /* --- Kartica (unos): tasteri dole za prst, Snimi širi i taman (slika Telefon_predlog T3); kamera u zoni dokumenata. */
  .kartica-actions { gap: 8px; }
  .kartica-actions .btn { flex: 1 1 0; min-height: 44px; justify-content: center; }
  .kartica-actions .btn.g { flex: 2 1 0; background: var(--naglasak); border-color: var(--naglasak); }
  .tel-slikaj { display: inline-flex; }

  /* --- Početna i ostale tabele van liste: pločice po dve u redu (prva cele širine), tekst u tabeli se lomi u red. */
  .plocice { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .plocice .tile { min-width: 0; }
  .plocice .tile:first-child { grid-column: 1 / -1; }
  .card-panel .grid td { white-space: normal; height: auto; }
  .ucitaj-zona .btn .ik { width: 18px; height: 18px; }

  /* --- Grla i kretanja (F3): unos serije prstom — polja 16 px i mete ≥ 40 px (taster „+“, ×, predlog K); tabela grla skroluje vodoravno u svom okviru (.skrol-x). */
  .grid.stavke input, .grid.stavke select { font-size: 16px; min-height: 40px; }
  .btn-x { min-width: 40px; min-height: 40px; font-size: 20px; }
  .kre-grla input.mk { width: 100%; min-width: 150px; }
  .ser .ser-plus { min-width: 56px; font-size: 22px; }
  .mk-predlog { min-height: 32px; font-size: 13px; }
  .mk-upoz { font-size: 13px; }
  .izbor-prikaza { display: block; margin: 0; font-size: 14px; }
  .izbor-prikaza a { display: inline-block; min-height: 40px; line-height: 40px; }
}