/* Dizajn sustav portala za voditelje.
   Iste boje i tipografija kao admin portal, ali slozene za telefon: voditelji
   zakljucuju radionicu odmah nakon sata, obicno stojeci u ucionici. */

:root {
  --cream:#f6f1e8; --surface:#fff; --ink:#2b2b2b; --body:#5f5b54; --muted:#7c7669; --faint:#98907f;
  --line:#e7ded0; --line-soft:#f0e9dd; --divider:#d5c6ae;
  --sidebar:#e9dfcd;
  --mint:#cfeede; --sky:#d4e9f7; --peach:#ffe7d3; --butter:#fdf0c4;
  --grad-a:#a9d9bd; --grad-b:#79c79c; --green-ink:#2f7a56;
  --blue-ink:#2c5f8f; --orange-ink:#8f5119; --rose:#b04456; --amber:#a3660f;
  --star:#e0a83c; --star-off:#d8d0c2;
  --sans:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --display:"Space Grotesk","Plus Jakarta Sans",sans-serif;
  --shadow:0 1px 2px rgba(43,43,43,.04), 0 6px 18px rgba(43,43,43,.05);
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body {
  margin:0; font-family:var(--sans); font-size:14px; line-height:1.5; color:var(--body);
  background-color:var(--cream);
  background-image:
    radial-gradient(circle at 12% -10%, rgba(207,238,222,.45), transparent 38%),
    radial-gradient(circle at 92% 4%,  rgba(212,233,247,.5),  transparent 36%),
    radial-gradient(circle at 78% 92%, rgba(255,224,207,.35), transparent 40%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}
a { color:var(--blue-ink); }
h1, h2, h3 { font-family:var(--display); color:var(--ink); }
.motif { position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
.motif span { position:absolute; line-height:1; font-family:var(--display); }
.layout { position:relative; z-index:1; display:flex; min-height:100vh; }
.main { flex:1; min-width:0; }

/* ---------- gornja traka voditelja ---------- */
.tbar { display:flex; align-items:center; gap:10px; padding:12px 16px;
  background:rgba(246,241,232,.9); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5; }
.tbar .mark { width:26px; height:26px; flex:0 0 26px; border-radius:7px;
  background:linear-gradient(135deg,var(--grad-a),var(--grad-b)); }
.tbar .name { font-family:var(--display); font-weight:700; color:var(--ink); font-size:14px;
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tbar .back { font-size:13px; text-decoration:none; color:var(--body); }
.tbar .back:hover { color:var(--ink); }
.spacer { flex:1; }
.env { font-size:10px; font-weight:700; letter-spacing:.06em; color:#7a5c10;
  background:var(--butter); border:1px solid #ecd79a; padding:3px 8px; border-radius:6px; }
.who { display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--body); }
.who .av { width:26px; height:26px; border-radius:50%; background:var(--sky); color:var(--blue-ink);
  display:grid; place-items:center; font-size:10.5px; font-weight:700; }
.tbar form { margin:0; flex:0 0 auto; }
.tbar .back { flex:0 0 auto; }
.linkbtn { background:none; border:0; padding:0; font:inherit; font-size:12.5px;
  color:var(--body); text-decoration:underline; cursor:pointer; }
.linkbtn:hover { color:var(--ink); }

/* ---------- sadrzaj ---------- */
.col { max-width:560px; margin:0 auto; padding:18px 16px 110px; }
.wide { max-width:1080px; }
.page-title { font-size:20px; margin:0 0 2px; }
.page-sub { font-size:12.5px; color:var(--muted); margin:0 0 16px; }
.section { font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted);
  font-weight:700; margin:22px 0 8px; }

.flash { padding:10px 13px; border-radius:10px; margin-bottom:12px; font-size:13px;
  border:1px solid var(--line); background:var(--surface); }
.flash-ok { background:var(--mint); border-color:#b6e0c9; color:#245c41; }
.flash-error { background:#fbe3e6; border-color:#f0c2c8; color:#8d2b3a; }
.flash-info { background:var(--sky); border-color:#bcdcf1; color:#204b70; }

/* ---------- gumbi ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:11px 16px; border-radius:11px; border:1px solid var(--line); background:var(--surface);
  font-family:var(--sans); font-size:13.5px; font-weight:600; color:var(--ink);
  text-decoration:none; cursor:pointer; }
.btn:hover { border-color:var(--divider); }
.btn.primary { background:linear-gradient(135deg,var(--grad-a),var(--grad-b)); border-color:#6fbb92;
  color:#173d2c; }
.btn.primary:hover { filter:brightness(1.03); }
.btn.wide { display:flex; width:100%; }
.btn.small { padding:7px 11px; font-size:12.5px; border-radius:9px; }
.btn.danger { color:#8d2b3a; border-color:#f0c2c8; background:#fdf0f1; }
.btn[disabled], .btn.off { opacity:.55; pointer-events:none; }
.hint { font-size:12px; color:var(--muted); text-align:center; margin:8px 0 0; }
.hint.left { text-align:left; }
.hint.spaced { margin-bottom:18px; }

/* ---------- polja ---------- */
.field { margin-bottom:13px; }
.field label { display:block; font-size:12.5px; font-weight:600; color:var(--ink); margin-bottom:5px; }
.field .note { font-size:11.5px; color:var(--muted); font-weight:400; }
input[type=text], input[type=email], input[type=date], input[type=number], select, textarea {
  width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:11px;
  background:var(--surface); font-family:var(--sans); font-size:14px; color:var(--ink); }
input:focus, select:focus, textarea:focus { outline:2px solid #9cc9e8; outline-offset:1px; border-color:#9cc9e8; }
textarea { min-height:150px; resize:vertical; line-height:1.55; }
.row2 { display:flex; gap:11px; flex-wrap:wrap; }
.row2 > * { flex:1 1 160px; }

/* ---------- kartice radionica (2a) ---------- */
.wlist { display:flex; flex-direction:column; gap:8px; }
.wrow { display:flex; align-items:center; gap:11px; padding:12px 13px; border-radius:12px;
  border:1px solid var(--line); background:var(--surface); text-decoration:none; color:inherit;
  box-shadow:var(--shadow); }
.wrow .chip { width:30px; height:30px; flex:0 0 30px; border-radius:9px; display:grid;
  place-items:center; font-family:var(--display); font-weight:700; font-size:13px; }
.wrow .txt { min-width:0; flex:1; overflow-wrap:anywhere; }
.wrow .t { display:block; font-size:14px; font-weight:600; color:var(--ink); }
.wrow .s { display:block; font-size:12px; color:var(--muted); }
.wrow .go { font-size:12.5px; color:var(--body); white-space:nowrap; }
.wrow.done .chip { background:var(--mint); color:var(--green-ink); }
.wrow.done .s { color:var(--green-ink); }
.wrow.active { border:2px solid var(--grad-b); background:#f4fbf7; }
.wrow.active .chip { background:linear-gradient(135deg,var(--grad-a),var(--grad-b)); color:#173d2c; }
.wrow.active .s { color:var(--green-ink); font-weight:600; }
.wrow.active .go { font-weight:700; color:#173d2c; background:linear-gradient(135deg,var(--grad-a),var(--grad-b));
  padding:7px 12px; border-radius:9px; }
.wrow.blocked { border:2px dashed var(--amber); background:#fdf7ec; }
.wrow.blocked .chip { background:var(--butter); color:var(--amber); }
.wrow.blocked .s { color:var(--amber); }
.wrow.ahead { border-style:dashed; background:transparent; box-shadow:none; }
.wrow.ahead .chip { background:var(--line-soft); color:var(--muted); }
.wrow.ahead .t { color:var(--body); font-weight:600; }
.wrow.ahead .go { color:var(--muted); }
.wrow.ahead:hover { background:rgba(255,255,255,.5); }
.wnote { font-size:12px; color:var(--muted); margin-top:10px; }

/* ---------- kartica jedne radionice ---------- */
.tag { display:inline-block; font-size:11.5px; font-weight:700; padding:4px 10px; border-radius:20px; }
.tag.active { background:var(--mint); color:var(--green-ink); }
.tag.done { background:var(--mint); color:var(--green-ink); }
.tag.warn { background:var(--butter); color:var(--amber); }
.tag.grey { background:var(--line-soft); color:var(--muted); }
.tag.blue { background:var(--sky); color:var(--blue-ink); }
.tag.rose { background:#fbe3e6; color:#8d2b3a; }
.wtitle { font-size:22px; margin:10px 0 4px; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:13px;
  padding:14px; box-shadow:var(--shadow); }
.card + .card { margin-top:9px; }
.panel { background:#faf7f1; border:1px solid var(--line); border-radius:13px; padding:14px; }

.doc { display:flex; align-items:center; gap:11px; padding:11px 12px; border-radius:11px;
  border:1px solid var(--line); background:var(--surface); text-decoration:none; color:inherit; }
.doc + .doc { margin-top:7px; }
.doc .pdf { width:30px; height:30px; flex:0 0 30px; border-radius:8px; background:#fbe3e6;
  color:#8d2b3a; display:grid; place-items:center; font-size:9.5px; font-weight:800; }
.doc .txt { flex:1; min-width:0; overflow-wrap:anywhere; }
.doc .t { display:block; font-size:13.5px; font-weight:600; color:var(--ink); }
.doc .s { display:block; font-size:11.5px; color:var(--muted); }
.doc .go { font-size:12.5px; color:var(--blue-ink); white-space:nowrap; }
.doc.extra { opacity:.8; }
.doc.missing { border-style:dashed; background:transparent; }
.doc.missing .pdf { background:var(--line-soft); color:var(--faint); }

.msgrow { display:flex; align-items:center; gap:11px; padding:11px 12px; border-radius:11px;
  border:1px solid #b6e0c9; background:#f2faf5; text-decoration:none; color:inherit; }
.msgrow .txt { flex:1; min-width:0; }
.msgrow .t { display:block; font-size:13.5px; font-weight:600; color:var(--ink); }
.msgrow .s { display:block; font-size:11.5px; color:var(--green-ink); }
.msgrow .go { font-size:12.5px; color:var(--green-ink); white-space:nowrap; }
.msgrow .env2 { width:30px; height:30px; flex:0 0 30px; border-radius:8px; background:var(--mint);
  color:var(--green-ink); display:grid; place-items:center; font-size:14px; }

/* ---------- carobnjak ---------- */
.steps { display:flex; gap:5px; padding:0 16px 12px; }
.steps i { flex:1; height:4px; border-radius:3px; background:var(--line); }
.steps i.on { background:linear-gradient(90deg,var(--grad-a),var(--grad-b)); }
.stepno { font-size:12px; color:var(--muted); }
.foot { position:sticky; bottom:0; padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:rgba(246,241,232,.94); backdrop-filter:blur(8px); border-top:1px solid var(--line); }
/* Na širokom ekranu se gumb inače razvuče preko cijele stranice, a sadržaj stoji u
   uskom stupcu. Podnožje zato prati istu širinu. */
.foot > * { max-width:560px; margin-left:auto; margin-right:auto; }
.foot .pair { display:flex; gap:9px; }
.foot .pair .btn { flex:1; }
.foot .pair .btn.primary { flex:2; }

/* ---------- zvjezdice ---------- */
.rate { margin-bottom:15px; }
.rate .lab { font-size:13px; font-weight:600; color:var(--ink); margin-bottom:5px; }
.stars { display:flex; flex-direction:row-reverse; justify-content:flex-end; gap:3px; }
.stars input { position:absolute; opacity:0; width:1px; height:1px; }
.stars label { font-size:27px; line-height:1; color:var(--star-off); cursor:pointer; padding:0 1px; }
.stars input:checked ~ label,
.stars label:hover, .stars label:hover ~ label { color:var(--star); }
.stars input:focus-visible + label { outline:2px solid #9cc9e8; outline-offset:2px; border-radius:4px; }
.readstars { color:var(--star); letter-spacing:2px; font-size:15px; }
.readstars i { color:var(--star-off); font-style:normal; }
.frow { display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:7px 0; border-bottom:1px solid var(--line-soft); }
.frow:last-child { border-bottom:0; }
.frow .l { font-size:13px; color:var(--body); }
.qa { margin-top:11px; }
.qa .q { font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted);
  font-weight:700; }
.qa .a { font-size:13.5px; color:var(--ink); white-space:pre-wrap; }
.qa + .qa { margin-top:10px; }

/* ---------- pregled e-poruke ---------- */
.inbox { background:#ece7dd; border-radius:13px; padding:13px; }
.mailcard { background:#fff; border-radius:10px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,.08); }
.mailhead { background:linear-gradient(135deg,#79c79c,#4fa87c); color:#fff; padding:16px 18px;
  position:relative; overflow:hidden; }
.mailhead .sym { position:absolute; opacity:.16; font-family:var(--display); line-height:1; }
.mailhead .tile { width:34px; height:34px; border-radius:9px; background:rgba(255,255,255,.92);
  display:inline-grid; place-items:center; font-family:var(--display); font-weight:700;
  color:#2f7a56; font-size:15px; }
.mailhead .wordmark { font-family:var(--display); font-weight:700; font-size:15px; margin-top:8px; }
.mailhead .line { font-size:12.5px; opacity:.92; }
.mailbody { padding:17px 18px; color:#3a3630; font-size:13.5px; }
.mailbody p { margin:0 0 11px; white-space:pre-wrap; }
.mailfoot { background:#f5f1ea; padding:11px 18px; text-align:center; font-size:11px; color:#8a8272; }

/* ---------- prijava ---------- */
.loginwrap { min-height:100vh; display:grid; place-items:center; padding:22px; }
.logincard { width:100%; max-width:360px; background:var(--surface); border:1px solid var(--line);
  border-radius:16px; padding:26px 22px; box-shadow:var(--shadow); text-align:center; }
.logincard .logo { display:block; width:72px; height:auto; margin:0 auto 14px; }
.logincard .mark { width:52px; height:52px; margin:0 auto 12px; border-radius:14px;
  background:linear-gradient(135deg,var(--grad-a),var(--grad-b)); }
.logincard h1 { font-size:21px; margin:0 0 2px; }
.logincard .sub { font-size:12.5px; color:var(--muted); margin:0 0 18px; }
.logincard .field { text-align:left; }
.logincard .big { font-size:34px; }

/* ---------- admin ---------- */
.side { width:198px; flex:0 0 198px; padding:18px 12px; position:sticky; top:0; height:100vh;
  background:var(--sidebar); border-right:1px solid var(--divider); }
.brand { display:flex; align-items:center; gap:9px; padding:2px 8px 20px; }
.brand .mark { width:26px; height:26px; flex:0 0 26px; border-radius:7px;
  background:linear-gradient(135deg,var(--grad-a),var(--grad-b)); }
.brand .txt { font-family:var(--display); font-weight:700; color:var(--ink); font-size:14px; line-height:1.1; }
.brand .txt span { display:block; font-family:var(--sans); font-weight:500; font-size:10.5px; color:var(--muted); }
.nav a { display:block; padding:8px 10px; border-radius:9px; color:var(--body);
  text-decoration:none; font-size:13px; }
.nav a:hover { background:rgba(43,43,43,.06); }
.nav a.on { background:var(--mint); color:var(--ink); font-weight:600; }
.nav .sep { height:1px; background:var(--divider); margin:11px 8px; }
.top { display:flex; align-items:center; gap:12px; padding:15px 22px;
  background:rgba(246,241,232,.88); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5; }
.top h1 { font-size:18px; margin:0; }
.top .year { font-size:12px; color:var(--muted); }

.statbar { display:flex; flex-wrap:wrap; background:var(--surface); border:1px solid var(--line);
  border-radius:12px; padding:11px 0; margin-bottom:14px; box-shadow:var(--shadow); }
.seg { flex:1 1 130px; display:flex; align-items:baseline; gap:7px; padding:4px 18px;
  border-right:1.5px solid var(--divider); }
.seg:last-child { border-right:0; }
.seg b { font-family:var(--display); font-size:20px; font-weight:600; color:var(--ink); }
.seg span { font-size:12.5px; color:var(--body); }

.prow { display:flex; align-items:center; gap:12px; padding:10px 13px; border-bottom:1px solid var(--line-soft); }
.prow:last-child { border-bottom:0; }
.prow .who2 { flex:1 1 200px; min-width:0; }
.prow .who2 b { display:block; font-size:13.5px; color:var(--ink); font-weight:600; }
.prow .who2 span { font-size:11.5px; color:var(--muted); }
.bar { width:140px; height:7px; border-radius:4px; background:var(--line-soft); overflow:hidden; flex:0 0 auto; }
.bar u { display:block; height:100%; background:linear-gradient(90deg,var(--grad-a),var(--grad-b)); }
.cnt { font-family:var(--display); font-size:13px; color:var(--body); white-space:nowrap; }

.schoolcard { background:var(--surface); border:1px solid var(--line); border-radius:13px;
  padding:14px; margin-bottom:11px; box-shadow:var(--shadow); }
.schoolcard h3 { margin:0 0 2px; font-size:15px; }
.schoolcard .sub { font-size:12px; color:var(--muted); margin-bottom:9px; }
.grow { display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:9px 11px;
  border:1px solid var(--line-soft); border-radius:10px; }
.grow + .grow { margin-top:7px; }
.grow .gname { font-size:13.5px; font-weight:600; color:var(--ink); }
.grow .gsub { font-size:11.5px; color:var(--muted); }
.details { margin-top:11px; }
summary { cursor:pointer; font-size:12.5px; color:var(--blue-ink); }
summary::marker { color:var(--faint); }
.inline { display:flex; flex-wrap:wrap; gap:8px; align-items:flex-end; margin-top:9px; }
.inline > div { flex:1 1 150px; }
.inline .field { margin-bottom:0; }

.mrow { display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--line);
  border-radius:11px; background:var(--surface); }
.mrow + .mrow { margin-top:7px; }
.mrow.warn { border-color:#ecd79a; background:#fdf9ee; }
.mrow .pos { font-family:var(--display); font-weight:700; color:var(--muted); width:22px; }
.mrow .t { flex:1; font-size:13.5px; color:var(--ink); font-weight:600; }
.mrow .st { font-size:11.5px; }
.mrow form { margin:0; }

table.plain { width:100%; border-collapse:collapse; font-size:13px; }
table.plain th { text-align:left; font-size:10px; text-transform:uppercase; letter-spacing:.07em;
  color:var(--muted); padding:6px 8px; border-bottom:1px solid var(--line); }
table.plain td { padding:8px; border-bottom:1px solid var(--line-soft); vertical-align:top; }

/* ---------- prazna stanja ---------- */
.empty { text-align:center; padding:34px 18px; color:var(--muted); }
.empty h2 { font-size:17px; color:var(--ink); margin:0 0 6px; }

@media (max-width:640px) {
  .side { display:none; }
  .col { padding:16px 13px 110px; }
  .bar { width:90px; }
  .prow { flex-wrap:wrap; }
}
@media (max-width:480px) {
  .tbar { gap:8px; padding:10px 12px; }
  .who .dn { display:none; }
  .env { display:none; }
  .wrow { padding:11px; gap:9px; }
  .wrow .go { font-size:12px; }
  .wtitle { font-size:19px; }
}

/* tekst samo za citace ekrana */
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }