/* Telefon i tablet (PWA prolaz, 21.10.2026). Ucitava se zadnje, pa nadjaca
   pravila modula. Velicine meta za dodir i polja od 16 px stoje pod
   (pointer: coarse), da desktop s misem ostane kakav je bio.

   Visina: pwa.js postavlja --vvh na visinu vidljivog dijela zaslona
   (visualViewport). Na iOS-u tipkovnica ne skracuje layout viewport, pa bez
   ovoga polja za unos ostanu ispod tipkovnice. */

:root { --vvh: 100dvh; }
body { height: var(--vvh); }
.zaslon { bottom: auto; height: var(--vvh); }
body.dok-spreman.dok-otvoren:not(.neprijavljen) .dokumenti { bottom: auto; height: var(--vvh); }

/* --- safe area: notch i zaobljeni rubovi (standalone, vodoravno) ---------- */
header {
  padding-left: max(14px, env(safe-area-inset-left));
  padding-right: max(14px, env(safe-area-inset-right));
}
.podnozje, .soba-ulazi {
  padding-left: max(12px, env(safe-area-inset-left));
  padding-right: max(12px, env(safe-area-inset-right));
}
#zaslon-popis .tok, #tok-poruka, .postavke-tok, .soba-tok, .dok-popis, .art-popis, .dat-popis {
  padding-left: max(8px, env(safe-area-inset-left));
  padding-right: max(8px, env(safe-area-inset-right));
}
.dok-popis, .art-popis, .dat-popis { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
.dok-detalj { padding-bottom: calc(90px + env(safe-area-inset-bottom)); }

/* --- instanca bez Jeevesa (JEEVES=0, npr. toss uprave) -------------------- */
body.bez-jeevesa #jeeves-mjehur,
body.bez-jeevesa #glas-zovi,
body.bez-jeevesa #jeeves,
body.bez-jeevesa #jeeves-zastor { display: none !important; }
body.bez-jeevesa #zaslon-popis .tok { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
body.bez-jeevesa #tok-poruka { padding-bottom: 16px; }
/* APK Ktoss je Vedranov telefon za Jeevesa; na drugoj instanci ne znaci nista. */
body.instanca .preuzimanje { display: none; }

/* --- zaglavlja: jedan red, dugi naslovi s tri tocke ------------------------ */
header { position: sticky; top: 0; z-index: 5; }
.zaglavlje-tijelo strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#zaslon-popis > header .brand-mini { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- meni "..." ------------------------------------------------------------ */
.meni-popis { max-height: calc(var(--vvh) - 90px); overflow-y: auto; max-width: calc(100vw - 16px); }
.obavijesti-stanje {
  margin-left: 6px;
  padding: 0 6px;
  border: 1px solid var(--crta-ui);
  border-radius: var(--r-1);
  font-size: 0.75rem;
  color: var(--tekst-tiho);
}
.obavijesti-stavka[aria-checked="true"] .obavijesti-stanje { background: var(--tekst); border-color: var(--tekst); color: var(--pozadina); }
.obavijesti-savjet { display: block; font-size: 0.75rem; max-width: 30ch; }
.obavijesti-stavka[aria-checked="true"] .obavijesti-savjet { display: none; }

/* --- panel Dokumenti / Artifakti / Datoteke -------------------------------- */
.desno-tabovi { overflow-x: auto; scrollbar-width: none; }
.desno-tabovi::-webkit-scrollbar { display: none; }
.desno-tab { flex: none; white-space: nowrap; }
.dok-svi { flex: none; }
/* Otvoren artifakt zauzima cijeli panel; popis se vraca gumbom natrag. */
.dokumenti:has(.art-detalj:not(.skriveno)) .art-popis { display: none !important; }
.art-traka .art-zaglavlje { flex: 1; }
.art-naslov, .art-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dok-okvir { height: min(420px, 55dvh); }

/* Dijeljenje: kvacica lijevo od imena, ne iznad (globalni input je 100 %). */
.dij-red { display: flex; align-items: center; gap: 10px; min-height: 36px; overflow-wrap: anywhere; }
.dij-red input, .dij-filtar input { width: auto; flex: none; margin: 0; }
.dij-okno { width: min(420px, 92vw); }

/* Datoteke: duga imena dobivaju cijeli redak na uskom zaslonu. */
.dat-ime { display: block; }

@media (max-width: 599px) {
  .dokumenti > header { flex-wrap: wrap; row-gap: 0; }
  .desno-tabovi { gap: 0; }
  .desno-tab { padding: 6px 8px; }
  /* "svi" ide u svoj red; tri taba i natrag tada stanu i na 360 px. */
  .dok-svi { order: 3; flex: 1 1 100%; justify-content: flex-end; min-height: 36px; }
  .dat-red { flex-wrap: wrap; }
  .dat-otvori { flex: 1 1 100%; padding-bottom: 2px; }
  .dat-radnje { margin-left: auto; padding: 0 6px 6px; }
  .dij-prozor { align-items: flex-end; }
  .dij-okno {
    width: 100%;
    max-width: 100%;
    max-height: 85dvh;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    border-width: 1px 0 0;
  }
}

/* --- soba ------------------------------------------------------------------- */
#zaslon-soba > header { flex: none; }
.soba-red textarea { min-height: 44px; }
@media (max-width: 699px) {
  .soba-tok { padding: 8px 10px; }
  .soba-red textarea { resize: none; }
  .soba-radnje button { padding: 2px 8px; font-size: 12px; }
}

/* --- razgovor s agentom ----------------------------------------------------- */
@media (max-width: 480px) {
  #zaslon-razgovor > header { gap: 4px; }
  #zaslon-razgovor .zaglavlje-tijelo small { display: none; }
}

/* --- Nova s izborom teme: na 390 px tri razreda stoje u jednom redu,
   imena modela se lome, a tema s dugim imenom ide u svoj red. ------------- */
@media (max-width: 480px) {
  .nova-tema .sazetak-okno { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
  .nova-tema-razredi { gap: 4px; }
  .nova-tema-razredi button { padding: 6px 8px; }
  .nova-tema-gumbi button { max-width: 100%; }
  .nova-tema .sazetak-gumbi { flex-wrap: wrap; }
}

/* --- dodir: mete od 44 px i polja od 16 px ---------------------------------- */
@media (pointer: coarse) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
  textarea,
  select { font-size: 16px !important; }
  input[type=checkbox], input[type=radio] { width: 20px; height: 20px; }

  .gumb-dokumenti { min-height: 44px; padding: 6px 12px; }
  .popis .udji { width: 44px; }
  .desno-tab { min-height: 44px; }
  .dok-svi { min-height: 44px; padding: 0 6px; }
  .dok-grupa-vrh { min-height: 44px; }
  .dok-brzo { margin: -10px -8px -10px auto; }
  .dok-brzo-gumb { width: 44px; height: 44px; }
  .dij-gumb { min-height: 44px; min-width: 64px; padding: 4px 12px; font-size: 14px; }
  .dij-red { min-height: 44px; }
  .dij-gumbi button { min-height: 44px; padding: 8px 18px; }
  .dok-detalj button, .dok-modal-zatvori { min-height: 44px; }
  .dok-linkovi .dok-link { display: inline-flex; align-items: center; min-height: 44px; }
  .art-gumb, .art-verzija, .dat-radnje .art-gumb { min-height: 44px; }
  .dat-mrvica { min-height: 44px; }
  .motori-radnje button { min-height: 44px; }
  #zaslon-razgovor .stani { min-height: 44px; }
  .soba-radnje button, .soba-red button { min-height: 44px; }
  .preuzimanje a { display: inline-block; padding: 12px 0; }
  .pretplata .upisi { min-height: 44px; min-width: 64px; }
  .dok-detalj select { min-height: 44px; }
  .soba-red textarea { resize: none; }
}