/* Panel dokumenata (dokumenti.js).
   Boje varijabli dolaze iz stil.css, da panel prati ostatak ljuske. Status i
   grupe nose boju (Vedran 16.10.); bez ikona i sjena. */

.dokumenti { display: none; }

body.dok-spreman.dok-otvoren:not(.neprijavljen) .dokumenti {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 55;
  flex-direction: column;
  background: var(--pozadina);
}

.dokumenti > header { flex: none; }
.dok-glavni-naslov { flex: 1; }
.dok-svi { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.dok-svi input { width: auto; margin: 0; }

.gumb-dokumenti {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  font-size: 13px;
  border-radius: 8px;
}
/* Na telefonu gumb Dokumenti uz kvote i verziju gura postavke i odjavu van
   zaslona, pa se cijela stranica rasiri (390 px zaslon, 545 px stranica) i
   panel dokumenata ispadne odrezan. Ispod 700 px traka ide u dva reda: gore
   ime, broj agenata i gumbi, dolje kvote i verzija. */
@media (max-width: 699px) {
  #zaslon-popis > header { flex-wrap: wrap; row-gap: 6px; }
  #zaslon-popis > header .gumb-dokumenti { margin-left: auto; }
  #zaslon-popis > header .traka-kvota { order: 10; flex: 1 1 100%; margin-left: 0; }
  #zaslon-popis > header #verzija { order: 11; flex: 1 1 100%; font-size: 12px; }
}
/* Ispod 420 px ni prvi red ne stane s rijecju "Klodtoss"; ostaje znak K. */
@media (max-width: 419px) {
  #zaslon-popis > header .brand-mini { font-size: 0; gap: 0; }
}
.dokumenti-broj {
  min-width: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--tekst);
  color: var(--pozadina);
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

/* --- popis ----------------------------------------------------------------- */

.dok-popis {
  flex: 1;
  overflow-y: auto;
  margin: 0;
  padding: 8px;
  list-style: none;
}
.dokumenti.u-detalju .dok-popis { display: none; }

.dok-kartica {
  padding: 10px 12px;
  margin-bottom: 6px;
  border: 1px solid var(--crta);
  border-radius: 8px;
  background: var(--ploha);
  cursor: pointer;
}
.dok-kartica:hover, .dok-kartica:focus { border-color: var(--tekst-tiho); outline: none; }
.dok-kartica.odabran { border-color: var(--tekst); }
.dok-red1 { display: flex; align-items: baseline; gap: 8px; }
.dok-naslov { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.dok-status {
  flex: none;
  padding: 0 6px;
  border: 1px solid var(--crta);
  border-radius: 4px;
  font-size: 12px;
  color: var(--tekst-tiho);
}
.dok-red2 { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; font-size: 12px; }

/* Boja statusa (Vedran 16.10.): lijevi rub kartice i znacka. Ton s prozirnom
   pozadinom da radi i na svijetloj i na tamnoj temi. */
.dok-kartica { border-left-width: 4px; }
.status-u_radu      { --st: var(--stao); }
.status-na_pregledu { --st: var(--gotov); }
.status-odobren     { --st: var(--radi); }
.status-prenesen    { --st: var(--jeeves); }
.status-odbacen     { --st: var(--prekinut); }
.dok-kartica[class*="status-"] { border-left-color: var(--st); }
.dok-kartica[class*="status-"] .dok-status {
  border-color: var(--st);
  color: var(--st);
  background: color-mix(in srgb, var(--st) 14%, transparent);
  font-weight: 600;
}
/* Na pregledu je jedino sto ceka covjeka, pa je znacka puna. Tekst na punoj
   ispuni je --na-punom (tamno na tamnoj temi, bijelo na svijetloj), nikad bijelo
   na narancastoj - to je prije drzalo 2.6:1. */
.status-na_pregledu .dok-status { color: var(--na-punom); background: var(--st); }
.status-na_pregledu { background: color-mix(in srgb, var(--st) 7%, var(--ploha)); }
.status-odbacen .dok-naslov { text-decoration: line-through; color: var(--tekst-tiho); }
.status-prenesen .dok-naslov { color: var(--tekst-tiho); }

/* --- grupe (projekti) ------------------------------------------------------ */

.dok-grupa { list-style: none; margin-bottom: 10px; }
.dok-grupa-popis { margin: 0; padding: 0 0 0 6px; list-style: none; }
.dok-grupa.sklopljena .dok-grupa-popis { display: none; }
.dok-grupa-vrh {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0 0 6px;
  padding: 6px 8px;
  border: 0;
  border-radius: 6px;
  background: color-mix(in srgb, var(--jeeves) 10%, transparent);
  color: var(--tekst);
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.dok-grupa-vrh:hover { background: color-mix(in srgb, var(--jeeves) 18%, transparent); }
.dok-grupa-strelica::before { content: "\25BE"; display: inline-block; width: 1em; }
.dok-grupa.sklopljena .dok-grupa-strelica::before { content: "\25B8"; }
.dok-grupa-ime { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dok-grupa-ceka {
  min-width: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--gotov);
  color: var(--na-punom);
  font-size: 11px;
  line-height: 18px;
  text-align: center;
}
.dok-grupa-broj { font-size: 12px; font-weight: 400; }

/* --- pregled preko zaslona (modal) ------------------------------------------ */

.dok-linkovi { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 6px; }
.dok-linkovi .dok-link { margin-top: 0; }
.dok-slika.dok-modal-otvori { cursor: zoom-in; }
.dok-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3vh 3vw;
  background: rgba(0, 0, 0, .6);
}
.dok-modal.skriveno { display: none; }
.dok-modal-okno {
  display: flex;
  flex-direction: column;
  width: min(1100px, 100%);
  height: 100%;
  border: 1px solid var(--crta);
  border-radius: 8px;
  background: var(--pozadina);
  overflow: hidden;
}
.dok-modal-vrh { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--crta); }
.dok-modal-naslov { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dok-modal-vrh .dok-link { margin: 0; }
.dok-modal-zatvori { width: auto; padding: 6px 12px; font-size: 13px; border-radius: 8px; }
.dok-modal-tijelo { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; background: #fff; }
.dok-modal-okvir { width: 100%; height: 100%; border: 0; }
.dok-modal-slika { max-width: 100%; max-height: 100%; object-fit: contain; }
body.dok-modal-otvoren { overflow: hidden; }
@media (max-width: 700px) { .dok-modal { padding: 0; } .dok-modal-okno { border-radius: 0; } }

.dok-prazno { padding: 12px 4px; font-size: 14px; list-style: none; }

/* --- detalj ---------------------------------------------------------------- */

.dok-detalj {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px 90px;
  font-size: 14px;
}
.dok-detalj button { padding: 8px 12px; font-size: 13px; border-radius: 8px; }
.dok-detalj button:disabled { opacity: .45; cursor: default; }
.dok-detalj select, .dok-detalj textarea { padding: 8px 10px; font-size: 14px; border-radius: 8px; }
.dok-natrag-popis { margin-bottom: 10px; }

.dok-d-naslov { margin: 0 0 8px; font-size: 16px; word-break: break-word; }
.dok-meta { display: grid; grid-template-columns: max-content 1fr; gap: 2px 10px; margin: 0 0 10px; font-size: 13px; }
.dok-meta dt { color: var(--tekst-tiho); }
.dok-meta dd { margin: 0; min-width: 0; word-break: break-word; }
.dok-put { font-family: ui-monospace, monospace; font-size: 12px; }

.dok-pregled { margin: 10px 0; }
.dok-okvir {
  display: block;
  width: 100%;
  height: 420px;
  border: 1px solid var(--crta);
  border-radius: 4px;
  background: #fff;
}
.dok-slika { display: block; max-width: 100%; border: 1px solid var(--crta); }
/* PDF nacrtan pdf.js-om (mobitel): stranice jedna ispod druge, skrol unutar okvira. */
.dok-pdf { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0; }
.dok-pdf .tiho { padding: 8px; color: #555; }
.dok-pdf-str { display: block; width: 100%; height: auto; border-bottom: 1px solid #ccc; }
.dok-modal-tijelo > .dok-pdf { align-self: stretch; }
.dok-link { display: inline-block; margin-top: 6px; color: var(--tekst); font-size: 13px; }

.dok-akcije { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.dok-polje { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--tekst-tiho); }
.dok-polje select { color: var(--tekst); }
.dok-gumbi { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.dok-gumbi .dok-posalji { width: auto; flex: 1; min-width: 120px; }

.dok-podnaslov { margin: 16px 0 6px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.dok-komentari { margin: 0 0 8px; padding: 0; list-style: none; }
.dok-komentari li { padding: 8px 0; border-bottom: 1px solid var(--crta); }
.dok-komentari li.neposlan { padding-left: 8px; border-left: 2px solid var(--tekst); }
.dok-k-vrh { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; }
.dok-k-tekst { white-space: pre-wrap; word-break: break-word; }

.dok-poruka { margin: 8px 0; padding: 6px 10px; border-left: 2px solid var(--tekst-tiho); font-size: 13px; }
.dok-greska { margin: 8px; padding: 6px 10px; border: 1px solid var(--tekst); border-radius: 4px; font-size: 13px; font-weight: 600; }
.dok-greska::before { content: "Greska: "; }
.dok-poruka.dok-greska { margin: 8px 0; }

/* Preko cijelog zaslona Jeevesov mjehur bi sjeo na gumbe panela. */
@media (max-width: 1199px) {
  body.dok-otvoren .jeeves-mjehur { display: none; }
}

/* --- siroki zaslon: stalni desni stupac ------------------------------------- */

@media (min-width: 1200px) {
  body.dok-spreman:not(.neprijavljen) .dokumenti,
  body.dok-spreman.dok-otvoren:not(.neprijavljen) .dokumenti {
    display: flex;
    position: fixed;
    inset: 0 0 0 auto;
    width: var(--desno-sirina, 380px);
    z-index: 20;
    flex-direction: column;
    border-left: 1px solid var(--crta);
    background: var(--pozadina);
  }
  /* Svaki zaslon desno od popisa staje prije panela. Prije je to vrijedilo samo
     za razgovor, pa su desni dio Postavki, terminala, Motora i Sobe (s gumbima)
     ostajali ispod panela (21.10.2026). */
  body.dok-spreman #zaslon-razgovor,
  body.dok-spreman #zaslon-postavke,
  body.dok-spreman #zaslon-terminal,
  body.dok-spreman #zaslon-motori,
  body.dok-spreman #zaslon-soba { right: var(--desno-sirina, 380px); }
  .gumb-dokumenti, .dok-zatvori { display: none; }
  /* Jeeves inace sjedne preko panela. */
  body.dok-spreman .jeeves-mjehur { right: calc(var(--desno-sirina, 380px) + 16px); }
  body.dok-spreman .jeeves { right: calc(var(--desno-sirina, 380px) + 20px); }
}

/* Brzi gumbi na kartici (Vedran 19.10.): Odobri i Odbaci kao ikone u retku
   s podacima. Dodirna povrsina je 32 px, a negativna margina ne siri redak. */
.dok-brzo { display: inline-flex; gap: 2px; margin: -8px -6px -8px auto; }
.dok-brzo-gumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--tekst-tiho);
  cursor: pointer;
}
.dok-brzo-gumb .ik { width: 18px; height: 18px; }
.dok-brzo-gumb:hover, .dok-brzo-gumb:focus-visible { background: color-mix(in srgb, currentColor 14%, transparent); outline: none; }
.dok-brzo-gumb:disabled { opacity: .4; cursor: default; }
.dok-brzo-odobri { color: var(--radi); }