/* MENTOR — jedan vizualni jezik. Paleta i ljestvica SAMO ovdje (:root).
   Boja NOSI tip (dolazi iz baze kao --boja), položaj nosi krug, stanje = ispunjenost. Bez skina. */
:root {
  /* ── TIPOGRAFIJA: četiri veličine, jedna jedinica razmaka ── */
  --f-naslov:   1.55rem;   /* naslov stranice */
  --f-odjeljak: 1.18rem;   /* naslov odjeljka */
  --f-tijelo:   1rem;      /* tijelo */
  --f-sitno:    0.82rem;   /* sitno */
  --lh: 1.55;              /* visina reda tijela ≥ 1,5 */
  --u: 8px;                /* osnovna jedinica razmaka — bez ad-hoc vrijednosti */
  --mjera: 68ch;           /* ~70 znakova po redu za zadatak/opis/nit */
  --mono: ui-monospace, "Cascadia Code", "Consolas", monospace;

  /* ── PALETA (jedno mjesto; grep 0 boja izvan :root) ── */
  --papir:      #F3ECDE;   /* podloga sadržaja */
  --panel:      #ffffff;   /* podloga panela */
  --tinta:      #3A3630;
  --tinta-tiha: #6E675C;
  --okvir:      #D8D2C4;   /* hairline okvir panela/polja */
  --naglasak:   #F4622A;
  --teal:       #2E6E6A;
  --akcent:     var(--teal);
  --okvir-kvadrat: rgba(62,61,54,.4);   /* okvir znaka 2×2 */

  /* stanja = tinte iz palete (ne nove „boje", nego naglasci prikaza) */
  --st-predano:    #C08A2E;  --st-predano-bg:    #F6ECCF;
  --st-vraceno:    var(--naglasak);  --st-vraceno-bg:  #F7DDD2;
  --st-prihvaceno: #6E8B57;  --st-prihvaceno-bg: #E6EFDD;
  --st-uradu:      #5A86A0;  --st-uradu-bg:      #E7EEF2;
  --st-prazno:     var(--tinta-tiha);  --st-prazno-bg: #ECECEC;
  --st-neutral-bg: #EFECE5;

  --primjer-rub: #B9C4B0;  --primjer-bg: #F6F8F4;
  --polje-obrub: #C9C4BA;
  --oznaka-primjer-bg: #F2ECD6; --oznaka-primjer-t: #7C6A2E;
  --oznaka-gradivo-bg: #E6EFDD; --oznaka-gradivo-t: #4B6B3E;
}
* { box-sizing: border-box; }
body { font-family: system-ui, "Segoe UI", sans-serif; margin: 0;
       color: var(--tinta); background: var(--papir);
       font-size: var(--f-tijelo); line-height: var(--lh); }

/* ── ZAGLAVLJE: znak 2×2 + MENTOR + tiho ime/rola · desno meni + odjava ── */
header { display: flex; gap: calc(var(--u)*2); align-items: center;
         padding: calc(var(--u)*1.25) calc(var(--u)*3);
         background: var(--panel); border-bottom: 1px solid var(--okvir); }
.marka { display: flex; align-items: center; gap: var(--u); text-decoration: none; color: var(--tinta); }
.marka-ime { font-weight: 600; letter-spacing: .04em; }
.marka-tko { color: var(--tinta-tiha); font-size: var(--f-sitno); }
.znak { flex: 0 0 auto; }
.znak-krug    { fill: none; stroke: var(--tinta); stroke-width: 2.4; }
.znak-kvadrat { fill: var(--teal); stroke: var(--okvir-kvadrat); stroke-width: 2; }
header nav { display: flex; gap: calc(var(--u)*1.75); align-items: center; }
header a { color: var(--tinta-tiha); text-decoration: none; font-size: var(--f-sitno); }
header a:hover { color: var(--tinta); }
header .razmak { flex: 1; }
.birac select { width: auto; min-height: 0; padding: calc(var(--u)*.5) var(--u);
                font-size: var(--f-sitno); border-color: var(--okvir); }

/* ── OMOT + PANEL: jedan način prikaza bloka ── */
.omot { max-width: 1000px; margin: calc(var(--u)*3) auto; padding: 0 calc(var(--u)*2.5); }
.panel { background: var(--panel); border: 1px solid var(--okvir); border-radius: 10px;
         padding: calc(var(--u)*3) calc(var(--u)*3.5); }
.putokaz-fokus { max-width: 1000px; margin: calc(var(--u)*2) auto calc(var(--u)*-1);
                 padding: 0 calc(var(--u)*2.5); }
.omot p, .panel p { max-width: var(--mjera); }
.podnozje { max-width: 1000px; margin: calc(var(--u)*4) auto calc(var(--u)*3);
            padding: 0 calc(var(--u)*2.5); color: var(--tinta-tiha); }

/* ── TIPOGRAFIJA stranice ── */
h1, .naslov { font-size: var(--f-naslov); font-weight: 600; margin: 0 0 calc(var(--u)*1.5); }
h2 { font-size: var(--f-odjeljak); font-weight: 600; margin: calc(var(--u)*3) 0 calc(var(--u)*1); }
h2:first-child, h1:first-child, .naslov:first-child { margin-top: 0; }
.naslov-razmak { margin-top: calc(var(--u)*3); }
.sitno { font-size: var(--f-sitno); }
.tiho  { color: var(--tinta-tiha); }
code, .kod { font-family: var(--mono); }
a.natrag { display: inline-block; margin-top: calc(var(--u)*2); font-size: var(--f-sitno); color: var(--tinta-tiha); }
.zz { color: var(--st-predano); font-size: var(--f-sitno); }
.napomena { color: var(--tinta-tiha); font-size: var(--f-sitno); }
.greska-poruka { color: var(--naglasak); }

/* ── MAPA (SVG): stanje = ispunjenost boje tipa ── */
.mapa { width: 100%; max-width: 560px; height: auto; display: block; margin: calc(var(--u)*2) 0; }
.veliki { fill: var(--boja); stroke: var(--boja); stroke-width: 2.5; }
.veliki.obris { fill-opacity: 0; }
.veliki.pun   { fill-opacity: .15; }
.kvadrat { stroke: var(--okvir-kvadrat); }
.mali { fill: var(--boja); stroke: var(--boja); stroke-width: 2; }
.mali.obris      { fill-opacity: 0; }
.mali.predano    { fill-opacity: .35; }
.mali.prihvaceno { fill-opacity: 1; }
.mali.vraceno    { fill-opacity: 1; }
.mali.locked     { fill-opacity: 0; stroke-dasharray: 4 3; opacity: .4; }
.naziv-kruga { fill: var(--tinta); font-size: var(--f-tijelo); font-weight: 600; }
svg a { cursor: pointer; }
svg a:hover .mali, svg a:hover .veliki { stroke-width: 3.4; }
/* karika: ispuna naglasak + obrub 1,5px u boji papira — OBAVEZAN na svih 5 boja */
.karika-svg { fill: var(--naglasak); stroke: var(--papir); stroke-width: 1.5px; }

/* ── ULAZ: kartice u boji tipa ── */
.kartice { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
           gap: calc(var(--u)*2); margin: calc(var(--u)*2.5) 0; max-width: 760px; }
.kartica { display: flex; flex-direction: column; gap: calc(var(--u)*1.5); min-height: 128px;
           padding: calc(var(--u)*2); border-radius: 12px; text-decoration: none; color: var(--tinta);
           background: color-mix(in srgb, var(--boja) 26%, var(--panel));
           border: 2px solid color-mix(in srgb, var(--boja) 55%, var(--panel)); }
.kartica:hover { border-color: color-mix(in srgb, var(--boja) 80%, var(--panel)); }
.kartica-naslov { font-size: var(--f-odjeljak); font-weight: 600; }
.kartica.zakljucana { background: var(--st-neutral-bg); border-color: var(--okvir); color: var(--tinta-tiha); }
.zasto { font-size: var(--f-sitno); color: var(--tinta-tiha); }
.napredak { display: flex; flex-wrap: wrap; gap: 5px; margin-top: auto; }
.napredak .dot { width: 9px; height: 9px; border-radius: 50%;
                 border: 1.5px solid var(--boja); background: transparent; }
.napredak .dot.pun { background: var(--boja); }

/* ── KRUG: crtani kružići uz naziv teme ── */
.lista-kruzica { list-style: none; padding: 0; margin: calc(var(--u)*2) 0; }
.red-kruzic { margin: var(--u) 0; }
.red-link, .red-neklik { display: flex; align-items: center; gap: calc(var(--u)*1.5);
                         text-decoration: none; color: var(--tinta); padding: calc(var(--u)*.5) 0; }
.red-link:hover { color: var(--tinta); }
.red-neklik { color: var(--tinta-tiha); }
.ikona { width: 36px; height: 36px; flex: 0 0 auto; }
.kruzic-red { display: inline-block; padding: 6px 12px; border: 2px solid var(--okvir);
              border-radius: 30px; text-decoration: none; color: var(--tinta); }

/* ── TRI SLOJA SADRŽAJA (pravilo · primjer · greška) razlikuju se ── */
/* pravilo (zadatak/propis/napomena): tipografija kuće, bez potpisa */
.zadatak-okvir { background: var(--st-neutral-bg); border: 1px solid var(--okvir); border-radius: 8px;
                 padding: calc(var(--u)*1.5) calc(var(--u)*2); margin: calc(var(--u)*2) 0; max-width: var(--mjera); }
.zadatak-okvir h2 { margin-top: 0; }
.zadatak-okvir > p { font-size: var(--f-tijelo); }
.propis { color: var(--naglasak); font-weight: 600; }
.napomena-crta { border-top: 1px solid var(--okvir); margin-top: var(--u); padding-top: calc(var(--u)*.75); }
/* primjer = uvučen, tiša tinta, autor+datum */
.karta { padding: var(--u) 0 var(--u) calc(var(--u)*1.5); margin: calc(var(--u)*1.5) 0;
         border-left: 3px solid var(--okvir); max-width: var(--mjera); }
.karta .slika { font-size: var(--f-tijelo); line-height: var(--lh); color: var(--tinta); }
.primjer { margin-left: calc(var(--u)*3); padding: var(--u) calc(var(--u)*1.5);
           border-left: 3px solid var(--primjer-rub); background: var(--primjer-bg); color: var(--tinta-tiha);
           font-size: var(--f-sitno); max-width: var(--mjera); }
.primjer .autor { font-size: var(--f-sitno); color: var(--tinta-tiha); }
/* tipična greška = naglasak */
.greska { border-left: 3px solid var(--naglasak); padding: var(--u) calc(var(--u)*1.5);
          color: var(--naglasak); font-size: var(--f-sitno); max-width: var(--mjera); }
.greska .autor { font-size: var(--f-sitno); color: var(--tinta-tiha); }
/* HTML točkica karike — isto pravilo obruba na svih 5 boja */
.karika-tocka { width: 11px; height: 11px; border-radius: 50%; background: var(--naglasak);
                border: 1.5px solid var(--papir); display: inline-block; }

/* ── POLJA: oznaka NAD poljem, vidljiv okvir, dovoljna visina ── */
form label, .polje label { display: block; font-size: var(--f-sitno); color: var(--tinta-tiha);
                           margin: calc(var(--u)*1.75) 0 calc(var(--u)*.5); }
input, textarea, select { font: inherit; color: var(--tinta); background: var(--panel);
    padding: calc(var(--u)*1) calc(var(--u)*1.25); width: 100%; max-width: 34rem;
    border: 1.5px solid var(--polje-obrub); border-radius: 6px; min-height: 2.5em; }
textarea { min-height: 5em; line-height: var(--lh); }
input[type=checkbox], input[type=radio] { width: auto; min-height: 0; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--akcent); outline-offset: 1px; border-color: var(--akcent); }
button { font: inherit; padding: calc(var(--u)*1) calc(var(--u)*1.75); background: var(--akcent);
         color: var(--panel); border: 0; border-radius: 6px; cursor: pointer; }
button:hover { filter: brightness(.9); }
button.tipka-tiho { background: var(--tinta-tiha); }

table { border-collapse: collapse; margin: calc(var(--u)*1.5) 0; }
td, th { border: 1px solid var(--okvir); padding: calc(var(--u)*.75) var(--u);
         font-size: var(--f-sitno); text-align: left; }
td { font-variant-numeric: tabular-nums; }

/* ── ŽIVI ELABORAT + točke ── */
.poglavlje { border-left: 3px solid var(--okvir); padding: calc(var(--u)*.5) calc(var(--u)*1.5);
             margin: calc(var(--u)*1.5) 0; max-width: var(--mjera); }
.poglavlje.stanje-predano { border-left-color: var(--st-predano); }
.poglavlje.stanje-vraceno { border-left-color: var(--st-vraceno); }
.poglavlje.stanje-prihvaceno { border-left-color: var(--st-prihvaceno); }
.pog-naslov { font-size: var(--f-odjeljak); margin: calc(var(--u)*.5) 0; }
.pog-broj { color: var(--tinta-tiha); font-weight: 600; margin-right: 6px; font-family: var(--mono); }
.pog-stanje { font-size: var(--f-sitno); color: var(--tinta-tiha); font-weight: 400; }
.poglavlje .clan p { margin: calc(var(--u)*.4) 0; }

.traka { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--u)*1.25);
         margin: calc(var(--u)*1) 0; }
.brend-stanje { padding: 0 calc(var(--u)*.75); border-radius: 10px; background: var(--st-neutral-bg); }
.brend-stanje.zeleno { background: var(--st-prihvaceno-bg); color: var(--st-prihvaceno); }
.brend-stanje.zuto   { background: var(--st-predano-bg); color: var(--st-predano); }
.brend-stanje.crveno { background: var(--st-vraceno-bg); color: var(--naglasak); }
.brend-stanje.u-radu { background: var(--st-uradu-bg); color: var(--st-uradu); }
.brend-stanje.sivo   { background: var(--st-prazno-bg); color: var(--tinta-tiha); }
.tocka { border-left: 3px solid var(--okvir); padding: calc(var(--u)*.5) calc(var(--u)*1.5);
         margin: calc(var(--u)*1.25) 0; max-width: var(--mjera); }
.tocka.pod { margin-left: calc(var(--u)*2); }
.tocka.stanje-predano { border-left-color: var(--st-predano); }
.tocka.stanje-vraceno { border-left-color: var(--st-vraceno); }
.tocka.stanje-prihvaceno { border-left-color: var(--st-prihvaceno); }
.tocka.stanje-u_radu { border-left-color: var(--st-uradu); }
.segment { margin: calc(var(--u)*.5) 0; padding-left: var(--u); border-left: 2px solid var(--okvir); }
.seg-oznaka { font-weight: 600; font-family: var(--mono); }
.seg-stanje { margin-left: calc(var(--u)*.5); }

/* ── EKRAN KRUŽIĆA — četiri različita oblika ── */
.putokaz { margin: 0 0 calc(var(--u)*.5); }
.putokaz a { color: var(--tinta-tiha); }
.opis { min-height: 9em; }
.autosave-red { display: flex; align-items: center; gap: calc(var(--u)*1.5); flex-wrap: wrap; }
#autosave-oznaka { color: var(--tinta-tiha); }
/* karika = istaknut blok, naglasak s LIJEVE strane, s potpisom */
.karika-okvir { border-left: 4px solid var(--naglasak); background: var(--st-vraceno-bg);
                padding: calc(var(--u)*1.25) calc(var(--u)*1.75); margin: calc(var(--u)*2) 0;
                border-radius: 0 8px 8px 0; color: var(--tinta); max-width: var(--mjera); }
.karika-okvir .autor { margin-top: calc(var(--u)*.5); font-size: var(--f-sitno); color: var(--tinta-tiha); }
.povijest { border-left: 3px solid var(--okvir); padding: calc(var(--u)*.25) var(--u); margin: calc(var(--u)*.5) 0; }
textarea[disabled] { background: var(--st-neutral-bg); color: var(--tinta-tiha); }

/* nit „Nejasno" — dvije boje, uvučena, ime i vrijeme */
.nit-upis { padding: calc(var(--u)*.75) var(--u); margin: calc(var(--u)*.5) 0;
            border-radius: 6px; max-width: var(--mjera); }
.nit-kandidat { background: var(--st-uradu-bg); border-left: 3px solid var(--st-uradu); }
.nit-mentor   { background: var(--st-neutral-bg); border-left: 3px solid var(--akcent); }
.nit-upis .autor { font-size: var(--f-sitno); color: var(--tinta-tiha); margin-bottom: calc(var(--u)*.25); }
.u-gradivo, .u-gradivu { display: inline-block; margin-left: var(--u); padding: 0 calc(var(--u)*.75);
             font-size: var(--f-sitno); color: var(--oznaka-gradivo-t); background: var(--oznaka-gradivo-bg); border-radius: 10px; }
.moj-primjer { display: inline-block; margin-left: var(--u); font-size: var(--f-sitno);
               color: var(--oznaka-primjer-t); background: var(--oznaka-primjer-bg); padding: 0 calc(var(--u)*.75); border-radius: 10px; }
.tipski-popis { border-left: 3px solid var(--okvir); padding: calc(var(--u)*.5) var(--u); margin: var(--u) 0; }
.tipski-popis .brojac { color: var(--tinta-tiha); }
.tipski-popis .nudge { color: var(--naglasak); margin-top: calc(var(--u)*.5); }

/* PRILOG — slot i učitane datoteke (kandidat + mentorov pogled) */
.prilog-slot { border-left: 3px solid var(--okvir); padding: calc(var(--u)*.5) calc(var(--u)*1.5);
               margin: calc(var(--u)*1.5) 0; max-width: var(--mjera); }
.prilog-red { display: flex; align-items: center; gap: var(--u); flex-wrap: wrap;
              padding: calc(var(--u)*.25) 0; }
.prilog-upload { margin-top: calc(var(--u)*.75); }
.prilog-upload input[type=file] { max-width: 22rem; }

/* ── ULAZ: četiri vinjete (skin). Slika na vrhu, fallback = obojena karta ispod. ── */
.vinjete-red { display: flex; align-items: flex-end; justify-content: center; flex-wrap: wrap;
               gap: calc(var(--u)*3); margin: calc(var(--u)*3) 0; }
.vinjeta { text-align: center; max-width: 220px; }
.vinjeta-okvir { position: relative; display: inline-block; min-width: 120px; min-height: 110px; }
/* fallback karta (iza slike) — obojena, s nazivom; vidljiva kad slika padne */
.vinjeta-karta { position: absolute; inset: 0; z-index: 0; display: flex; align-items: center;
                 justify-content: center; text-align: center; padding: var(--u); font-weight: 600;
                 color: var(--tinta); border-radius: 10px;
                 background: color-mix(in srgb, var(--boja) 26%, var(--panel));
                 border: 2px solid color-mix(in srgb, var(--boja) 55%, var(--panel)); }
.vinjeta-slika { position: relative; z-index: 1; display: block; margin: 0 auto; width: auto;
                 max-width: 100%; height: clamp(120px, 20vw, 240px);
                 object-fit: contain; object-position: bottom center; }
.vinjeta-slika.nema { display: none; }                 /* onerror → skriveno, karta ispod ostaje */
.vinjeta-slika.zakljucana { filter: grayscale(.85) opacity(.5); }   /* isprana = prigušena */
.vinjeta-plocha { display: block; }
.vinjeta-plocha:hover .vinjeta-slika {
    filter: drop-shadow(0 0 7px color-mix(in srgb, var(--boja) 65%, transparent)); }
.vinjeta-naziv { margin-top: var(--u); font-weight: 600; }
.vinjeta .napredak { justify-content: center; margin-top: calc(var(--u)*.5); }
.vinjeta .zasto { max-width: 220px; margin: calc(var(--u)*.5) auto 0; }
/* toranj = dvije jasno odvojene klikabilne plohe (frakcije izmjerene iz skina) */
.vinjeta-toranj .meta { position: absolute; z-index: 2; display: block; border-radius: 4px; }
.meta-zgrada { left: 0; right: 0; top: 0; bottom: 15%; }             /* cijela zgrada */
.meta-prizemlje { left: 6.5%; right: 6.6%; bottom: 0; height: 15%; } /* prizemlje = poslovni prostor */
.vinjeta-toranj .meta:hover {
    outline: 2px solid color-mix(in srgb, var(--boja) 70%, transparent); outline-offset: -2px;
    background: color-mix(in srgb, var(--boja) 12%, transparent); }
.toranj-mete { margin-top: var(--u); }
.meta-red { margin: calc(var(--u)*1) 0; }

/* PREDMET — vježbovna čestica (ispod zadatka / u zaglavlju). Fallback = ljudska rečenica. */
.predmet-sazeto { margin: calc(var(--u)*.5) 0 calc(var(--u)*1.5); }
.predmet-zaglavlje { margin: calc(var(--u)*-.5) 0 calc(var(--u)*1.5); }

/* tihi dodatak uz naslov (· arhiva, · vještačenje, · tip) i uzorak boje tipa (data → --boja) */
.tih-dodatak { font-weight: 400; font-size: var(--f-sitno); color: var(--tinta-tiha); }
.boja-uzorak { display: inline-block; width: 14px; height: 14px; border-radius: 3px;
               background: var(--boja); border: 1px solid var(--okvir); }