/*
  Stomatika — stil.

  DVA REZIMA PRIKAZA, JEDAN KOMPLET EKRANA.
  Sve sto se razlikuje izmedju "Krupno" i "Kompaktno" su promenljive ispod.
  Ako neki ekran zatrazi dva razlicita sablona, to je greska u dizajnu tog
  ekrana, a ne opravdan izuzetak.

  Pravila koja se ne krse (izvedena iz WCAG 2.2, NN/g istrazivanja o starijim
  korisnicima i GOV.UK smernica):
    - svako vazno dugme najmanje 44x44 px
    - nista interaktivno ispod 24x24 px
    - nigde meni koji se otvara na prelazak misem
    - nigde klizac ni prevlacenje
    - tri stanja nalaza se razlikuju I BEZ boje (sara + oznaka)
*/

:root {
  /* KRUPNO — podrazumevano. Za vlasnika i starije korisnike. */
  --font-osnovni: 20px;
  --font-sitni: 16px;
  --font-naslov: 30px;
  --dugme-visina: 56px;
  --dugme-font: 20px;
  --polje-visina: 56px;
  --razmak: 20px;
  --razmak-mali: 12px;
  --zub-sirina: 46px;
  --red-visina: 72px;

  --boja-pozadina: #f4f6f8;
  --boja-povrsina: #ffffff;
  --boja-tekst: #14202b;
  --boja-tekst-blaz: #4a5a68;
  --boja-linija: #c3ced8;
  --boja-glavna: #12507e;
  --boja-glavna-tamna: #0d3c60;
  --boja-upozorenje: #a4231c;
  --boja-upozorenje-pozadina: #fdecea;
  --boja-uspeh: #1e8449;

  --postojece: #1f4e79;
  --planirano: #c0392b;
  --uradjeno: #1e8449;
}

body.kompaktno {
  /* KOMPAKTNO — za sestru i mladje korisnike. Vise stavki na ekranu. */
  --font-osnovni: 15px;
  --font-sitni: 13px;
  --font-naslov: 22px;
  --dugme-visina: 36px;
  --dugme-font: 15px;
  --polje-visina: 36px;
  --razmak: 10px;
  --razmak-mali: 6px;
  --zub-sirina: 34px;
  --red-visina: 52px;
}

* { box-sizing: border-box; }
/* Atribut hidden mora da sakrije i element kome stil daje display: flex. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  font-size: var(--font-osnovni);
  line-height: 1.5;
  color: var(--boja-tekst);
  background: var(--boja-pozadina);
}

/* ---------- Upozorenja, posete, korisnici ---------- */
.upozorenja .upozorenja-dugme { margin-top: var(--razmak-mali); }
.tekst-upozorenja { color: var(--boja-upozorenje); }
.podaci-posete { display: grid; grid-template-columns: minmax(140px, 220px) 1fr; gap: 6px var(--razmak); margin: var(--razmak) 0 0; }
.podaci-posete dt { font-weight: 700; color: var(--boja-tekst-blaz); font-size: var(--font-sitni); padding-top: 2px; }
.podaci-posete dd { margin: 0; overflow-wrap: anywhere; }
.ranija-verzija { border-top: 1px solid var(--boja-linija); padding: var(--razmak-mali) 0; }
.ranija-verzija summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; }
.lozinka { font-family: Consolas, "Courier New", monospace; font-size: calc(var(--font-osnovni) * 1.3); letter-spacing: 1px; }
.zaglavlje a.ko { text-decoration: underline; }
@media (max-width: 720px) {
  .podaci-posete { grid-template-columns: 1fr; gap: 0; }
  .podaci-posete dd { margin-bottom: var(--razmak-mali); }
}

/* ---------- Javni demo ---------- */
.demo-traka {
  background: #f5c542; color: #3d2a00; font-weight: 800; text-align: center;
  padding: 6px var(--razmak); font-size: var(--font-sitni); letter-spacing: .3px;
}
.demo-nalozi { margin-top: var(--razmak); border-top: 1px solid var(--boja-linija); }
.demo-nalozi ul { margin: 6px 0; padding-left: 20px; }

/* ---------- Zaglavlje ---------- */

.zaglavlje {
  background: var(--boja-glavna);
  color: #fff;
  padding: var(--razmak-mali) var(--razmak);
  display: flex;
  align-items: center;
  gap: var(--razmak);
  flex-wrap: wrap;
}
.zaglavlje a { color: #fff; }
.znak {
  font-weight: 700;
  font-size: calc(var(--font-osnovni) * 1.15);
  letter-spacing: .5px;
  text-decoration: none;
}
.zaglavlje-desno { margin-left: auto; display: flex; gap: var(--razmak-mali); align-items: center; }
.zaglavlje .ko { font-size: var(--font-sitni); opacity: .9; }

/* ---------- Osnovni elementi ---------- */

main { padding: var(--razmak); max-width: 1400px; margin: 0 auto; }

h1 { font-size: var(--font-naslov); margin: 0 0 var(--razmak); }
h2 { font-size: calc(var(--font-naslov) * .72); margin: var(--razmak) 0 var(--razmak-mali); }

.ploca {
  background: var(--boja-povrsina);
  border: 1px solid var(--boja-linija);
  border-radius: 8px;
  padding: var(--razmak);
  margin-bottom: var(--razmak);
}

/* Sve interaktivno postuje minimum. 44px je pravilo, ne preporuka. */
.dugme,
button,
input[type="submit"] {
  min-height: var(--dugme-visina);
  min-width: 44px;
  padding: 0 calc(var(--razmak) * .9);
  font-size: var(--dugme-font);
  font-family: inherit;
  border: 2px solid var(--boja-glavna);
  border-radius: 6px;
  background: var(--boja-glavna);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.dugme:hover, button:hover { background: var(--boja-glavna-tamna); }
.dugme:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 4px solid #f0a500;
  outline-offset: 2px;
}
.dugme.sporedno {
  background: #fff;
  color: var(--boja-glavna);
}
.dugme.sporedno:hover { background: #e8eef4; }

/* Glavne radnje (Traži, Upiši nalaz, Otvori karton, Poništi) nikad ne padaju
   ispod 44px -- ni u Kompaktno. Kompaktno smanjuje sporedne kontrole na 36px:
   to je svesna zamena veličine za gustinu, koju korisnik sam bira. */
.glavno { min-height: max(var(--dugme-visina), 44px); }

.skriveno { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
tr.ponisten td { color: var(--boja-tekst-blaz); }
tr.ponisten .tekst-nalaza { text-decoration: line-through; }
.oznaka-ponisten { color: var(--boja-upozorenje); font-size: var(--font-sitni); letter-spacing: 1px; }

input[type="text"], input[type="password"], input[type="search"],
input[type="email"], select, textarea {
  min-height: var(--polje-visina);
  font-size: var(--font-osnovni);
  font-family: inherit;
  padding: 6px 12px;
  border: 2px solid var(--boja-linija);
  border-radius: 6px;
  background: #fff;
  color: var(--boja-tekst);
  width: 100%;
}
textarea { min-height: calc(var(--polje-visina) * 1.6); }
label { display: block; font-size: var(--font-sitni); font-weight: 600; margin-bottom: 4px; }

.polje { margin-bottom: var(--razmak-mali); }
.red-polja { display: flex; gap: var(--razmak-mali); flex-wrap: wrap; }
.red-polja > .polje { flex: 1 1 200px; }

.greska { color: var(--boja-upozorenje); font-size: var(--font-sitni); font-weight: 600; }
.pomoc  { color: var(--boja-tekst-blaz); font-size: var(--font-sitni); }

.poruka {
  padding: var(--razmak-mali) var(--razmak);
  border-radius: 6px;
  margin-bottom: var(--razmak-mali);
  border-left: 6px solid var(--boja-uspeh);
  background: #e8f6ee;
  font-weight: 600;
}
.poruka.greska { border-left-color: var(--boja-upozorenje); background: var(--boja-upozorenje-pozadina); }

/* ---------- Pretraga ---------- */

.pretraga-polje { display: flex; gap: var(--razmak-mali); margin-bottom: var(--razmak); }
.pretraga-polje input { font-size: calc(var(--font-osnovni) * 1.2); }

.spisak-pacijenata { list-style: none; margin: 0; padding: 0; }
.spisak-pacijenata li { border-bottom: 1px solid var(--boja-linija); }
.spisak-pacijenata a {
  display: flex;
  align-items: center;
  gap: var(--razmak);
  min-height: var(--red-visina);
  padding: var(--razmak-mali);
  text-decoration: none;
  color: var(--boja-tekst);
  flex-wrap: wrap;
}
.spisak-pacijenata a:hover { background: #eaf1f7; }
.spisak-pacijenata .ime { font-weight: 700; font-size: calc(var(--font-osnovni) * 1.05); }
.spisak-pacijenata .sitno { color: var(--boja-tekst-blaz); font-size: var(--font-sitni); }

/* ---------- Traka upozorenja ---------- */
/* Na zvanicnom obrascu Komore stoji polje "Znak upozorenja" gore levo,
   popunjeno bojenom olovkom. Ovo je isto to, samo sto se ne moze zaboraviti. */

.upozorenja {
  background: var(--boja-upozorenje-pozadina);
  border: 3px solid var(--boja-upozorenje);
  border-radius: 8px;
  padding: var(--razmak-mali) var(--razmak);
  margin-bottom: var(--razmak);
}
.upozorenja .naslov {
  color: var(--boja-upozorenje);
  font-weight: 800;
  text-transform: uppercase;
  font-size: var(--font-sitni);
  letter-spacing: 1px;
}
.upozorenja ul { margin: 4px 0 0; padding-left: 20px; }
.upozorenja li { font-weight: 700; font-size: calc(var(--font-osnovni) * 1.05); }

/* ---------- Zaglavlje kartona ---------- */

.pacijent-traka { display: flex; gap: var(--razmak); align-items: baseline; flex-wrap: wrap; }
.pacijent-traka .ime { font-size: var(--font-naslov); font-weight: 700; }
.pacijent-traka .podatak { color: var(--boja-tekst-blaz); font-size: var(--font-sitni); }

/* ---------- Odontogram ---------- */

.sema { margin-bottom: var(--razmak); }
.sema-naslov {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: var(--font-sitni);
  border-bottom: 2px solid var(--boja-tekst);
  padding-bottom: 2px;
  margin-bottom: var(--razmak-mali);
}
.vilica { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.strana-oznaka {
  font-weight: 700;
  color: var(--boja-tekst-blaz);
  width: 22px;
  text-align: center;
  font-size: var(--font-sitni);
}
.niz-zuba { display: flex; gap: 3px; }
.sredina { width: 3px; background: var(--boja-tekst); align-self: stretch; margin: 0 5px; }

.zub {
  width: var(--zub-sirina);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: none;
  border: none;
  padding: 2px;
  min-height: auto;
  cursor: pointer;
}
.zub svg { width: var(--zub-sirina); height: var(--zub-sirina); display: block; }
.zub .broj {
  /* Na papiru brojeva NEMA. Ovde su prisutni, ali diskretni. */
  font-size: var(--font-sitni);
  color: var(--boja-tekst-blaz);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.zub.izabran .broj { color: #fff; background: var(--boja-glavna); border-radius: 4px; padding: 1px 4px; font-weight: 700; }
.zub:hover svg .okvir { stroke: var(--boja-glavna); stroke-width: 4; }
.zub.izabran svg .okvir { stroke: var(--boja-glavna); stroke-width: 5; }

.zub svg .povrsina { stroke: #7c8a96; stroke-width: 1.5; fill: #fff; }
.zub svg .okvir { fill: none; stroke: #55626d; stroke-width: 2.5; }
.zub svg .precrtan { stroke: var(--boja-upozorenje); stroke-width: 7; stroke-linecap: round; }
.zub svg .oznaka-celog {
  font-size: 34px; font-weight: 700; text-anchor: middle; fill: #fff;
  paint-order: stroke; stroke: rgba(0,0,0,.35); stroke-width: 3;
}

/* ---------- Legenda stanja ---------- */
/* Tri stanja se razlikuju bojom I sarom. Ko ne razlikuje boje, razlikuje saru. */

.legenda-stanja { display: flex; gap: var(--razmak); flex-wrap: wrap; font-size: var(--font-sitni); }
.legenda-stanja span { display: inline-flex; align-items: center; gap: 6px; }
.uzorak { width: 22px; height: 22px; border: 2px solid #55626d; border-radius: 3px; }
.uzorak.postojece { background: var(--postojece); }
.uzorak.planirano {
  background: var(--planirano);
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.65) 0 3px, transparent 3px 6px);
}
.uzorak.uradjeno {
  background: var(--uradjeno);
  background-image: radial-gradient(rgba(255,255,255,.75) 1.6px, transparent 1.8px);
  background-size: 6px 6px;
}

/* ---------- Tabele ---------- */

table { width: 100%; border-collapse: collapse; font-size: var(--font-osnovni); }
th, td { text-align: left; padding: var(--razmak-mali); border-bottom: 1px solid var(--boja-linija); }
th { font-size: var(--font-sitni); text-transform: uppercase; letter-spacing: .5px; color: var(--boja-tekst-blaz); }
tbody tr:hover { background: #f0f5f9; }

/* ---------- Dugmad za povrsine i oznake ---------- */

.povrsine-izbor, .oznake-izbor { display: flex; gap: var(--razmak-mali); flex-wrap: wrap; }
.prekidac {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--dugme-visina);
  min-width: 56px;
  padding: 0 14px;
  border: 2px solid var(--boja-linija);
  border-radius: 6px;
  background: #fff;
  font-size: var(--dugme-font);
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}
.prekidac input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.prekidac:has(input:checked) {
  background: var(--boja-glavna);
  border-color: var(--boja-glavna);
  color: #fff;
}
.prekidac:has(input:focus-visible) { outline: 4px solid #f0a500; outline-offset: 2px; }

/* ---------- Dve kolone ---------- */

.dve-kolone { display: flex; gap: var(--razmak); align-items: flex-start; flex-wrap: wrap; }
.dve-kolone > * { flex: 1 1 420px; min-width: 0; }

/* ---------- Provera dizajna ---------- */
/* Ukljucuje se sa ?provera=1 — ispisuje stvarne dimenzije na ekranu,
   da se pravila vide, a ne da se veruje na rec. */

body.provera .dugme::after,
body.provera button::after { content: " [" attr(data-mera) "]"; font-size: 11px; opacity: .8; }
body.provera .mera {
  position: absolute; background: #f0a500; color: #000; font-size: 11px;
  padding: 0 4px; border-radius: 3px; font-weight: 700; z-index: 5;
}
body.provera .zub { outline: 1px dashed #f0a500; }

/* ---------- Ivice i preklapanja ---------- */

.zub { text-decoration: none; color: inherit; }
.zaglavlje-desno { flex-wrap: wrap; justify-content: flex-end; }
.pacijent-traka { min-width: 0; }
.pacijent-traka .ime { overflow-wrap: anywhere; }

/* Hronologija: kolona "Zub" i dugme ne smeju da se lome u vise redova. */
.tabela-nalaza td.zub-kolona { white-space: nowrap; }
.tabela-nalaza td.radnja { width: 1%; white-space: nowrap; text-align: right; }
.tabela-nalaza .ko-je { white-space: nowrap; }
.dugme.ispravi { min-height: 44px; padding: 0 14px; }

/* Na racunaru hronologija dobija dve trecine, legenda jednu. */
.dve-kolone > .sira { flex: 2 1 560px; }
.dve-kolone > .uza  { flex: 1 1 300px; }
/* Panel sa crtezom zuba nikad nije uzi od samog crteza: ako nema mesta pored
   forme, prelazi u svoj red umesto da se zubi odseku. */
.dve-kolone > .ploca-seme { flex: 2 1 auto; min-width: min(100%, max-content); overflow-x: auto; }

/* ---------- Glavni meni ---------- */
/* Uvek vidljiv, bez padajucih menija. */

.glavni-meni { display: flex; gap: 4px; flex-wrap: wrap; }
.glavni-meni a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
  color: #fff; text-decoration: none; border-radius: 6px; font-weight: 600;
  border: 2px solid transparent;
}
.glavni-meni a:hover { background: var(--boja-glavna-tamna); }
.glavni-meni a[aria-current="page"] { border-color: #fff; }

/* ---------- Laboratorija ---------- */
/* Kasnjenje se oznacava TEKSTOM i bojom -- ne samo bojom. */

.oznaka-kasni {
  display: inline-block; color: #fff; background: var(--boja-upozorenje);
  font-weight: 800; font-size: var(--font-sitni); letter-spacing: .5px;
  padding: 1px 8px; border-radius: 4px;
}
.oznaka-danas {
  display: inline-block; color: #3d2a00; background: #f5c542;
  font-weight: 800; font-size: var(--font-sitni); padding: 1px 8px; border-radius: 4px;
}
tr.red-kasni td:first-child { box-shadow: inset 5px 0 0 var(--boja-upozorenje); }
.dugmad-u-redu { display: flex; gap: var(--razmak-mali); flex-wrap: wrap; justify-content: flex-end; }
/* Na racunaru dugmad u tabeli stoje u jednom redu (na telefonu se prelamaju). */
@media (min-width: 721px) {
  .tabela-nalaza td.radnja .dugmad-u-redu { flex-wrap: nowrap; align-items: center; }
}

/* ---------- Naplata ---------- */

.stanje-racuna { display: flex; gap: var(--razmak); flex-wrap: wrap; margin-bottom: var(--razmak); }
.stanje-racuna > .ploca { flex: 1 1 180px; margin: 0; }
.stanje-racuna .iznos { font-size: calc(var(--font-naslov) * .95); font-weight: 800; font-variant-numeric: tabular-nums; }
.stanje-racuna .iznos small { font-size: var(--font-sitni); font-weight: 600; color: var(--boja-tekst-blaz); }
.stanje-racuna .dug { border: 3px solid var(--boja-upozorenje); background: var(--boja-upozorenje-pozadina); }
.stanje-racuna .dug .iznos { color: var(--boja-upozorenje); }
.oznaka-dug {
  display: inline-block; font-size: var(--font-sitni); font-weight: 700; color: var(--boja-upozorenje);
  border: 2px solid var(--boja-upozorenje); border-radius: 4px; padding: 0 6px;
}
.pregled-iznosa { font-size: calc(var(--font-osnovni) * 1.1); }

/* ---------- Cefalometrija ---------- */

.cef-status {
  background: #fff6db; border: 2px solid #c99a06; border-radius: 8px;
  padding: var(--razmak-mali) var(--razmak); margin-bottom: var(--razmak);
  font-size: var(--font-sitni); color: #3d2e00;
}
.cef-radna { display: flex; gap: var(--razmak); align-items: flex-start; flex-wrap: wrap; }
.cef-slika-ploca { flex: 3 1 520px; min-width: 0; }
.cef-panel { flex: 1 1 300px; min-width: 0; }
.cef-alati { display: flex; gap: var(--razmak-mali); flex-wrap: wrap; align-items: center; margin-bottom: var(--razmak-mali); }
.cef-okvir {
  overflow: auto; max-height: 78vh; border: 1px solid var(--boja-linija);
  border-radius: 6px; background: #111;
}
.cef-okvir svg { display: block; width: 100%; height: auto; cursor: crosshair; }
.cef-spisak { display: flex; flex-direction: column; gap: 6px; }
.cef-stavka {
  display: flex; align-items: center; gap: 10px; text-align: left; justify-content: flex-start;
  min-height: 44px; padding: 6px 12px; background: #fff; color: var(--boja-tekst);
  border: 2px solid var(--boja-linija); border-radius: 6px; font-size: var(--font-sitni);
}
.cef-stavka:hover { background: #eaf1f7; }
.cef-stavka.aktivna { border-color: var(--boja-glavna); background: #e3eef8; box-shadow: inset 5px 0 0 var(--boja-glavna); }
.cef-stavka .kvacica {
  flex: 0 0 22px; height: 22px; border: 2px solid #7c8a96; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; font-size: 13px;
}
.cef-stavka.postavljena .kvacica { background: var(--boja-uspeh); border-color: var(--boja-uspeh); color: #fff; }
.cef-stavka.postavljena .kvacica::after { content: "✓"; }
.cef-tacka { fill: #ffcf33; stroke: #000; stroke-width: 1.5; }
.cef-tacka.lenjir { fill: #33d1ff; }
.cef-natpis { fill: #ffcf33; font-weight: 700; paint-order: stroke; stroke: #000; stroke-width: 3px; }
.cef-linija { stroke: #33d1ff; opacity: .85; }
.cef-pregled { width: 100%; height: auto; background: #111; border-radius: 6px; display: block; }
.cef-grupa { font-size: var(--font-sitni); text-transform: uppercase; letter-spacing: 1px; margin: var(--razmak) 0 4px; }
.cef-izvor { margin-top: 4px; }
.broj-kolona { text-align: right; font-variant-numeric: tabular-nums; }
.tabela-klizac { overflow-x: auto; }

/* ---------- Nalaz za stampu ---------- */

.list-nalaza {
  background: #fff; border: 1px solid var(--boja-linija); border-radius: 8px;
  padding: 28px; max-width: 900px; font-size: 15px; color: #111;
}
.list-zaglavlje {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 16px;
  flex-wrap: wrap; border-bottom: 2px solid #111; padding-bottom: 10px; margin-bottom: 14px;
}
.list-ordinacija { font-size: 20px; font-weight: 700; }
.list-naslov { font-size: 17px; font-weight: 800; letter-spacing: 2px; }
.list-sitno { font-size: 13px; color: #444; }
.list-nalaza table { font-size: 14px; }
.list-podaci th { width: 1%; white-space: nowrap; color: #444; font-size: 12px; }
.list-podaci td, .list-podaci th { padding: 4px 8px; }
.list-seme { margin: 14px 0; }
.list-nalaza, body .list-nalaza { --zub-sirina: 32px; }
.list-nalaza .zub .broj { font-size: 11px; }
.list-h2 { font-size: 16px; margin: 16px 0 6px; }
.list-tabela th, .list-tabela td { padding: 4px 8px; }
.list-potpis {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-top: 48px; gap: 16px;
}
.list-potpis .linija { width: 240px; max-width: 60vw; border-bottom: 1px solid #111; height: 32px; }

/* ---------- Telefon ---------- */

@media (max-width: 720px) {
  main { padding: 12px; }
  .ploca { padding: 12px; }
  .zaglavlje { padding: 10px 12px; gap: 8px; }
  .zaglavlje .ko { flex-basis: 100%; }
  .zaglavlje-desno { margin-left: 0; width: 100%; justify-content: flex-start; }

  /* Odontogram: vilica se lomi na sredini u dva reda po osam zuba -- desna
     polovina iznad leve. Zubi ostaju dovoljno veliki za prst, bez pomeranja
     levo-desno. */
  body, body.kompaktno { --zub-sirina: 34px; }
  .vilica { align-items: flex-start; gap: 4px; }
  .strana-oznaka { width: 12px; padding-top: 10px; flex: 0 0 12px; }
  /* Tacno osam zuba + sedam razmaka od 3px -- ni piksel vise, inace cela
     stranica postane sira od ekrana i sve desne ivice se odseku. */
  .niz-zuba { flex-wrap: wrap; row-gap: 6px; width: calc(8 * var(--zub-sirina) + 21px); }
  .sredina { flex-basis: 100%; height: 0; margin: 0; background: none; }
  .zub { padding: 1px; }

  /* Tabele se na telefonu slazu u kartice: svaki red je jedan blok. */
  .tabela-nalaza thead { display: none; }
  .tabela-nalaza, .tabela-nalaza tbody, .tabela-nalaza tr, .tabela-nalaza td { display: block; width: 100%; }
  .tabela-nalaza tr { border-bottom: 1px solid var(--boja-linija); padding: 10px 0; }
  .tabela-nalaza td { border: none; padding: 2px 0; text-align: left; }
  .tabela-nalaza td.radnja { width: 100%; text-align: left; padding-top: 8px; }
  .tabela-nalaza td[data-naslov]::before {
    content: attr(data-naslov) ": ";
    color: var(--boja-tekst-blaz); font-size: var(--font-sitni);
  }
  .dve-kolone > * { flex-basis: 100%; }
  .legenda-stanja { margin-left: 0 !important; }

  /* Traka za kasnjenje ide uz celu karticu, a tekst se odmakne -- ne preko teksta. */
  tr.red-kasni td:first-child { box-shadow: none; }
  .tabela-nalaza tr.red-kasni { box-shadow: inset 5px 0 0 var(--boja-upozorenje); padding-left: 14px; }

  /* Polja jedno ispod drugog; i ona sa sirinom zadatom u sablonu. */
  .red-polja > .polje { flex: 1 1 100% !important; }
  input, select, textarea { max-width: 100%; }
  .pacijent-traka { flex-wrap: wrap; gap: 10px; }
  .pretraga-polje { flex-wrap: wrap; }
  .pretraga-polje input { flex: 1 1 100%; }
  .pretraga-polje button { flex: 1 1 100%; }
}

@media print {
  @page { size: A4; margin: 14mm; }
  .zaglavlje, .dugme, button, .pretraga-polje, .samo-ekran, .poruka { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  main { padding: 0; max-width: none; }
  .list-nalaza { border: none; border-radius: 0; padding: 0; max-width: none; }
  .list-nalaza .zub svg .povrsina { stroke: #444; }
  .list-nalaza, body .list-nalaza { --zub-sirina: 30px; }
  .list-seme .niz-zuba { flex-wrap: nowrap; width: auto; }
  .list-seme .sredina { flex-basis: auto; width: 2px; height: auto; background: #111; margin: 0 4px; }
  .list-tabela tr, .list-seme { break-inside: avoid; }
}

/* Nalaz na telefonu: seme se lome kao i na kartonu, list bez okvira. */
@media (max-width: 720px) {
  .list-nalaza { padding: 14px; }
  body .list-nalaza { --zub-sirina: 30px; }
  .list-nalaza .niz-zuba { width: calc(8 * var(--zub-sirina) + 21px); }
}

/* ---------- Kalendar ---------- */
/* Bez prevlacenja. Prazno polje je link za novi termin, termin je link na
   svoju stranu. Siroka mreza se pomera u svom okviru, nikad cela stranica. */

:root { --kal-polje: 26px; --kal-kolona-min: 150px; --kal-sati: 56px; }
body.kompaktno { --kal-polje: 20px; --kal-kolona-min: 120px; --kal-sati: 46px; }

.kal-traka { display: flex; gap: var(--razmak-mali); align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: var(--razmak-mali); }
.kal-traka h1 { margin: 0; }
.kal-radnje { display: flex; gap: var(--razmak-mali); flex-wrap: wrap; }
.kal-kontrole { justify-content: flex-start; gap: var(--razmak); }

.kal-izbor { display: inline-flex; flex-wrap: wrap; border: 2px solid var(--boja-glavna); border-radius: 6px; overflow: hidden; }
.kal-izbor a {
  display: inline-flex; align-items: center; min-height: max(var(--dugme-visina), 44px);
  padding: 0 14px; text-decoration: none; color: var(--boja-glavna); background: #fff;
  font-weight: 600; font-size: var(--dugme-font);
}
.kal-izbor a + a { border-left: 2px solid var(--boja-glavna); }
.kal-izbor a[aria-current="page"] { background: var(--boja-glavna); color: #fff; }
.kal-skok { display: flex; gap: var(--razmak-mali); align-items: center; }
.kal-skok input[type="date"] {
  min-height: var(--polje-visina); font-size: var(--font-osnovni); font-family: inherit;
  padding: 4px 10px; border: 2px solid var(--boja-linija); border-radius: 6px;
}

.kal-okvir { overflow-x: auto; padding: 0; }
.kal {
  display: grid;
  grid-template-columns: var(--kal-sati) repeat(var(--kolona), minmax(var(--kal-kolona-min), 1fr));
  font-size: var(--font-sitni);
}
.kal-ugao, .kal-dan, .kal-resurs, .kal-sati { background: var(--boja-povrsina); }
.kal-ugao, .kal-sati { position: sticky; left: 0; z-index: 3; }
.kal-dan {
  padding: 8px; border-bottom: 1px solid var(--boja-linija); border-left: 2px solid var(--boja-tekst-blaz);
  font-weight: 700; font-size: var(--font-osnovni); display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.kal-dan a { color: var(--boja-tekst); }
.kal-dan.danas { background: #fff7dd; }
.kal-napomena {
  flex-basis: 100%; font-weight: 600; font-size: var(--font-sitni);
  background: repeating-linear-gradient(45deg, #e3e7eb 0 6px, #f4f6f8 6px 12px);
  border: 1px solid var(--boja-linija); border-radius: 4px; padding: 2px 6px; color: var(--boja-tekst) !important;
}
.kal-resurs {
  padding: 6px 8px; border-bottom: 2px solid var(--boja-linija); border-left: 1px solid var(--boja-linija);
  font-weight: 700; box-shadow: inset 0 4px 0 var(--boja, transparent); overflow-wrap: anywhere;
}
.kal-resurs-napomena { font-weight: 600; color: var(--boja-upozorenje); }
.kal-sat {
  height: var(--kal-polje); text-align: right; padding-right: 6px; line-height: 1;
  color: var(--boja-tekst-blaz); font-variant-numeric: tabular-nums;
}
.kal-sat.pun { border-top: 1px solid var(--boja-linija); padding-top: 3px; font-weight: 700; color: var(--boja-tekst); }

.kal-kolona { position: relative; border-left: 1px solid var(--boja-linija); }
.kal-polje { display: block; height: var(--kal-polje); border-top: 1px dotted #e1e6eb; }
.kal-polje.pun { border-top: 1px solid var(--boja-linija); }
.kal-polje:focus-visible { outline: 3px solid #f0a500; outline-offset: -3px; background: #fff7dd; }

.kal-blok {
  position: absolute; z-index: 2; box-sizing: border-box; overflow: hidden;
  display: flex; flex-direction: column; gap: 0; padding: 1px 6px 1px 8px;
  background: var(--boja, #1f5f99); color: #fff; text-decoration: none;
  border: 1px solid #fff; border-radius: 5px;
  /* Tacno jedan red teksta po polju kalendara -- termin od 30 minuta ima dva
     cela reda, nikad dva i po. */
  line-height: calc(var(--kal-polje) - 3px);
}
.kal-blok > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 0 auto; }
.kal-blok:focus-visible { outline: 4px solid #f0a500; z-index: 4; }
.kal-blok .kal-vreme { font-variant-numeric: tabular-nums; }
/* Upozorenje se ne oslanja samo na boju: znak + tekst + zuta ivica. */
.kal-blok.ima-upozorenje { box-shadow: inset 0 0 0 3px #f5c542; }
.kal-blok .kal-upozorenje { font-weight: 800; background: #f5c542; color: #3d2a00; border-radius: 3px; padding: 0 4px; }
.kal-blok.status-nije_dosao { background: repeating-linear-gradient(135deg, var(--boja, #1f5f99) 0 8px, #56626d 8px 16px); }
.kal-blok.blokada {
  z-index: 1; color: var(--boja-tekst); border: 1px solid #9aa6b1; opacity: .95;
  background: repeating-linear-gradient(45deg, #dfe4e9 0 8px, #eef1f4 8px 16px);
}

.kal-mesec { table-layout: fixed; min-width: 560px; }
.kal-mesec th { text-align: center; }
.kal-mesec td { padding: 0; vertical-align: top; border: 1px solid var(--boja-linija); }
.kal-mesec td a {
  display: flex; flex-direction: column; gap: 2px; min-height: calc(var(--red-visina) * 1.3);
  padding: 6px; color: var(--boja-tekst); text-decoration: none;
}
.kal-mesec td.van-meseca a { color: var(--boja-tekst-blaz); background: #f7f9fa; }
.kal-mesec td.neradni a { background: #f1f3f5; }
.kal-mesec td.danas a { background: #fff7dd; box-shadow: inset 0 0 0 3px #f5c542; }
.kal-mesec .broj-dana { font-weight: 800; font-size: var(--font-osnovni); }
.kal-mesec .broj-termina { font-weight: 700; color: var(--boja-glavna); }
.oznaka-blokirano { font-size: var(--font-sitni); font-weight: 700; color: var(--boja-tekst-blaz); }

/* Forma termina */
.grupa-polja { border: 1px solid var(--boja-linija); border-radius: 8px; padding: var(--razmak-mali) var(--razmak); margin: 0 0 var(--razmak); }
.grupa-polja legend { font-weight: 700; padding: 0 6px; }
.oznaka-polja { display: block; font-size: var(--font-sitni); font-weight: 600; margin-bottom: 4px; }
.rezultati-pretrage { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rezultati-pretrage .rezultat { width: 100%; justify-content: flex-start; flex-wrap: wrap; text-align: left; }
.izabran-pacijent { display: flex; gap: var(--razmak-mali); align-items: center; flex-wrap: wrap; margin-bottom: var(--razmak-mali); }
.izabran-pacijent .ime { font-size: calc(var(--font-osnovni) * 1.15); font-weight: 700; }
.kraj-termina { margin: 6px 0 0; }
.prekidac.potvrda { border-color: var(--boja-upozorenje); color: var(--boja-upozorenje); }
.oznaka-statusa { font-weight: 800; font-size: var(--font-sitni); border: 2px solid currentColor; border-radius: 4px; padding: 0 8px; color: var(--boja-glavna); }
.oznaka-statusa.status-otkazan, .oznaka-statusa.status-nije_dosao { color: var(--boja-upozorenje); }
.oznaka-statusa.status-dosao { color: var(--boja-uspeh); }
.naredni-termini { list-style: none; margin: var(--razmak-mali) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px var(--razmak); }

/* Podesavanja */
.spisak-podesavanja { list-style: none; margin: 0; padding: 0; }
.spisak-podesavanja > li { border-bottom: 1px solid var(--boja-linija); padding: var(--razmak-mali) 0; }
.spisak-podesavanja > li.iskljuceno input[type="text"] { color: var(--boja-tekst-blaz); text-decoration: line-through; }
.red-podesavanja { display: flex; gap: var(--razmak-mali); align-items: center; flex-wrap: wrap; }
.red-podesavanja input[type="text"] { flex: 1 1 180px; width: auto; }
.red-podesavanja button[disabled] { opacity: .4; cursor: default; }
.ime-doktora { margin: 0 0 6px; box-shadow: inset 6px 0 0 var(--boja); padding-left: 14px; }
.izbor-boje { display: flex; flex-wrap: wrap; gap: 6px; }
.prekidac.boja { gap: 8px; min-width: 0; }
.uzorak-boje { width: 20px; height: 20px; border-radius: 4px; background: var(--boja); display: inline-block; border: 1px solid #fff; }

/* Ukljuci/iskljuci sa pravom kutijicom -- da ne lici na dugme "Sacuvaj". */
.prekidac.kutija { gap: 10px; font-weight: 600; }
.prekidac.kutija input { position: static; opacity: 1; width: 24px; height: 24px; margin: 0; accent-color: var(--boja-glavna); }
.prekidac.kutija:has(input:checked) { background: #fff; color: var(--boja-tekst); border-color: var(--boja-glavna); }
.kal-mesec td.blokiran a { background: repeating-linear-gradient(45deg, #eef1f4 0 6px, #fff 6px 12px); }

@media (max-width: 720px) {
  body, body.kompaktno { --kal-kolona-min: 128px; --kal-sati: 44px; }
  /* Mesec na telefonu: samo brojevi, bez reci -- sedam kolona staje u ekran. */
  .kal-mesec { min-width: 0; }
  .kal-mesec th { padding: 6px 0; letter-spacing: 0; }
  .kal-mesec td a { padding: 4px 3px; min-height: 64px; }
  .kal-mesec .rec, .kal-mesec .oznaka-blokirano { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .kal-mesec .broj-termina { font-size: var(--font-osnovni); }
  .kal-kontrole { gap: var(--razmak-mali); }
  .kal-izbor a { padding: 0 10px; }
  .kal-dan { font-size: var(--font-sitni); }
  .kal-skok { flex-wrap: wrap; }
}