/* geePlan — stilovi (vanilla, bez build koraka). Čist, profesionalan interni alat. */

:root {
  --bg: #f4f5f7;
  --panel: #ffffff;
  --ink: #1c2530;
  --ink-soft: #5b6672;
  --line: #e2e6ea;
  --line-strong: #cfd5db;
  --brand: #1f6feb;
  --brand-ink: #ffffff;
  --brand-soft: #eaf1fe;
  --ok: #1a7f47;
  --ok-soft: #e6f4ec;
  --warn: #b26a00;
  --warn-soft: #fbf1df;
  --danger: #c23934;
  --danger-soft: #fbeae9;
  --shadow: 0 1px 3px rgba(20, 30, 45, .08), 0 1px 2px rgba(20, 30, 45, .04);
  --radius: 10px;
  --radius-sm: 7px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font: 15px/1.5 -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0 0 .4em; font-weight: 650; letter-spacing: -.01em; }
h1 { font-size: 1.55rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1rem; }

/* --- App shell / navigacija --- */
#shell { background: var(--panel); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.shell-inner { max-width: 1180px; margin: 0 auto; padding: 0 20px; height: 56px; display: flex; align-items: center; gap: 24px; }
.brand { display: flex; align-items: center; font-weight: 700; font-size: 1.15rem; color: var(--ink); letter-spacing: -.02em; }
.brand:hover { text-decoration: none; }
.brand-a { display: inline-grid; place-items: center; width: 26px; height: 26px; margin-right: 2px; background: var(--brand); color: #fff; border-radius: 7px; font-weight: 800; }
/* Logotip instalacije (white-label). Visina je fiksna, širina se prilagođava — logotipi
   dolaze u raznim omjerima, a zaglavlje ne smije skakati. */
.brand-logo { height: 26px; width: auto; max-width: 120px; margin-right: 8px; object-fit: contain; }
.brand-naziv { white-space: nowrap; }
.nav { display: flex; gap: 4px; }
.nav-link { padding: 6px 12px; border-radius: var(--radius-sm); color: var(--ink-soft); font-weight: 550; }
.nav-link:hover { background: var(--bg); text-decoration: none; color: var(--ink); }
.nav-link.active { background: var(--brand-soft); color: var(--brand); }
.shell-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.user { display: flex; align-items: center; gap: 8px; color: var(--ink-soft); font-size: .9rem; }
.user-ime { font-weight: 600; color: var(--ink); }
/* Javna demo instalacija (DEMO_MODE): jedan redak ispod zaglavlja (app.js mountShell). */
.demo-traka { background: var(--warn-soft); color: var(--warn); border-bottom: 1px solid var(--line); text-align: center; font-size: .85rem; font-weight: 600; padding: 4px 12px; }

/* --- Bočni izbornik (uski ekrani) --- (feedback 2026-09-29: gornja traka se na mobitelu ne da koristiti)
   Na širokom ekranu ☰, ploča i pozadina uopće nisu prikazani — traka je nepromijenjena. Ispod 720 px se
   skrivaju nav, ime i Odjava, a ostaju logo + brojači + ☰. Visina trake ostaje 56 px (skok na fazu računa na nju). */
.shell-menu { display: none; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel);
  flex-direction: column; align-items: center; justify-content: center; gap: 5px; cursor: pointer; padding: 0; }
.shell-menu span { display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; }
.shell-menu[aria-expanded="true"] { background: var(--brand-soft); border-color: var(--brand); }
.shell-drawer-backdrop { display: none; position: fixed; inset: 0; background: rgba(18, 26, 38, .45); z-index: 29; }
.shell-drawer { display: none; position: fixed; top: 0; right: 0; bottom: 0; width: min(300px, 86vw); background: var(--panel); z-index: 30;
  box-shadow: -8px 0 30px rgba(15, 25, 40, .25); flex-direction: column; animation: drawer-in .18s ease-out; overflow-y: auto; }
@keyframes drawer-in { from { transform: translateX(24px); opacity: .6; } }
.shell-drawer-vrh { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px 12px 18px; border-bottom: 1px solid var(--line); min-height: 56px; }
.shell-drawer-nav { display: flex; flex-direction: column; padding: 8px; gap: 2px; }
.shell-drawer-nav .nav-link { padding: 12px 14px; font-size: 1.02rem; }
.shell-drawer-dno { margin-top: auto; padding: 12px 18px 18px; border-top: 1px solid var(--line); }
@media (max-width: 720px) {
  .shell-inner { gap: 10px; padding: 0 12px; }
  .shell-inner .nav, .shell-inner .user, .shell-inner .shell-odjava { display: none; }
  .shell-right { gap: 8px; }
  .shell-menu { display: flex; }
  .shell-zad { padding: 4px 8px; white-space: nowrap; }
  .shell-zad-txt { display: none; }   /* na uskom ekranu samo ikona + broj */
  .shell-drawer-backdrop:not([hidden]) { display: block; }
  .shell-drawer:not([hidden]) { display: flex; }
  body.drawer-otvoren { overflow: hidden; }
}

/* --- Layout --- */
.wrap { max-width: 1180px; margin: 0 auto; padding: 26px 20px 60px; }
.page-head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.page-head h1 { margin: 0; }
.page-head .spacer { flex: 1; }
.muted { color: var(--ink-soft); }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.grid { display: grid; gap: 14px; }

/* --- Kartice / paneli --- */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.card-pad { padding: 18px 20px; }

/* --- Gumbi --- */
.btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: var(--panel); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; transition: .12s; }
.btn:hover { background: var(--bg); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.btn-primary:hover { background: #1a5fd0; }
.btn-ghost { border-color: transparent; background: transparent; }
.btn-ghost:hover { background: var(--bg); }
.btn-danger { color: var(--danger); border-color: var(--line-strong); }
.btn-danger:hover { background: var(--danger-soft); border-color: var(--danger); }
.btn-sm { padding: 5px 11px; font-size: .87rem; }
.btn:disabled { opacity: .55; cursor: not-allowed; }

/* --- Forme --- */
.field { display: block; margin-bottom: 14px; }
.field > label { display: block; font-size: .82rem; font-weight: 600; color: var(--ink-soft); margin-bottom: 5px; }
.field .req { color: var(--danger); }
input[type=text], input[type=password], input[type=date], input[type=time], input[type=email], input[type=number], input[type=search], select, textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  font: inherit; color: var(--ink); background: #fff; transition: .12s;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
textarea { min-height: 76px; resize: vertical; }
/* Polje čija vrijednost dolazi iz šifrarnika (povezani suradnik) — zaključano i zasjenčeno,
   da se jasno vidi da se ne uređuje ovdje nego u Šifrarniku. */
input.iz-sifrarnika, textarea.iz-sifrarnika, select.iz-sifrarnika {
  background: var(--bg); color: var(--ink-soft); cursor: not-allowed;
}
.form-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
/* Uzastopna polja u JEDNOM redu (npr. Datum + Vrijeme u modalu). */
.field-red { display: flex; gap: 12px; }
.field-red > .field { flex: 1; min-width: 0; }
@media (max-width: 620px) { .form-2 { grid-template-columns: 1fr; } }

/* Polje lozinke s "oko" toggle-om (točkice ↔ vidljivo) */
.pwd-polje { position: relative; }
.pwd-polje input { padding-right: 42px; }

/* Editable combobox (App.combo): input + uvijek vidljiv ▾ + padajući panel */
.combo { position: relative; }
.combo-input { padding-right: 34px; }
.combo-strelica {
  position: absolute; top: 0; right: 0; height: 100%; width: 32px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; cursor: pointer; color: var(--ink-soft);
}
.combo-strelica:hover { color: var(--ink); }
.combo-strelica svg { width: 12px; height: 12px; transition: transform .15s; }
.combo.open .combo-strelica svg { transform: rotate(180deg); }
.combo-panel {
  position: absolute; z-index: 50; top: calc(100% + 3px); left: 0; right: 0;
  max-height: 210px; overflow-y: auto; background: #fff;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm); box-shadow: 0 8px 24px rgba(15, 25, 40, .14);
}
.combo-opcija { padding: 8px 11px; cursor: pointer; font-size: .9rem; }
.combo-opcija:hover { background: var(--brand-soft); color: var(--brand); }
.combo-prazno { padding: 8px 11px; font-size: .85rem; color: var(--ink-soft); }
/* Sakrij preglednikov ugrađeni reveal/clear (Edge ::-ms-reveal) — koristimo vlastito "oko" */
.pwd-polje input::-ms-reveal, .pwd-polje input::-ms-clear { display: none; }
.pwd-oko { position: absolute; top: 50%; right: 5px; transform: translateY(-50%); display: grid; place-items: center;
  width: 32px; height: 32px; padding: 0; border: none; background: transparent; color: var(--ink-soft); cursor: pointer; border-radius: 6px; }
.pwd-oko:hover { color: var(--brand); background: var(--bg); }
.pwd-oko svg { display: block; width: 19px; height: 19px; }

/* --- Tablice --- */
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.table th { font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-soft); font-weight: 650; background: #fafbfc; }
.table tbody tr { cursor: default; }
.table tbody tr.clickable:hover { background: var(--brand-soft); cursor: pointer; }
/* Sortabilna zaglavlja (App.sortTablica): klik sortira, ▲/▼ pokazuje smjer aktivnog stupca. */
.table th.sortiv { cursor: pointer; user-select: none; white-space: nowrap; }
.table th.sortiv:hover { color: var(--ink); background: var(--brand-soft); }
.table th.sortiv.sortiran { color: var(--ink); }
.table th.sortiv .th-str { margin-left: 5px; font-size: .8em; }
.table th.sortiv:not(.sortiran):hover .th-str::after { content: '↕'; opacity: .5; }
.table td.num { text-align: right; font-variant-numeric: tabular-nums; }
/* --- Osobni raspored stupaca (Kolone): izbornik „Stupci ▾" + preslagivanje povlacenjem --- */
.dash-sekcija-alat { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.grid-alat { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.stupci-izbornik { position: relative; display: inline-block; }
.stupci-btn { white-space: nowrap; }
.stupci-pop { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30;
  min-width: 210px; max-height: 60vh; overflow-y: auto; background: var(--bg);
  border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.15); padding: 6px; }
.stupci-pop[hidden] { display: none; }
.stupci-red { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 6px; cursor: pointer; font-size: .9rem; }
.stupci-red:hover { background: var(--brand-soft); }
.stupci-red input[disabled] { opacity: .5; cursor: not-allowed; }
.stupci-reset { display: block; width: 100%; margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--line); border-radius: 0; text-align: left; }
/* Reorder: touch-action:none da dodir POVLACI stupac umjesto da skrola stranicu. */
.table th.kol-move { cursor: grab; touch-action: none; }
.table th.kol-move.kol-vucem { cursor: grabbing; opacity: .55; background: var(--brand-soft); }
.table th.kol-cilj { box-shadow: inset 3px 0 0 var(--brand); }
/* --- Filtri popisa (NadzorFiltri): gumb uz naslov + skocni OVERLAY panel. Dijele ih Pregled
   (dashboard.html) i Projekti (projekti.html) — stilovi su ovdje da panel svugdje lebdi (nije
   inline u redu). Panel ima i klasu .card (pozadina/obrub). --- */
.nf-omot { position: relative; }
.nf-gumb { display: inline-flex; align-items: center; gap: 7px; }
.nf-gumb.nf-ima { border-color: var(--brand); color: var(--brand); }
.nf-znacka { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--brand);
  color: #fff; font-size: .7rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.nf-znacka[hidden] { display: none; }   /* inline-flex bi inace nadjacao [hidden] */
/* Panel visi ispod gumba, poravnat lijevo s njim; na uskom ekranu ne bjezi van. */
.nf-pop { position: absolute; top: calc(100% + 8px); left: 0; z-index: 60; width: 620px;
  max-width: min(92vw, 620px); padding: 14px 16px; box-shadow: 0 12px 32px rgba(0,0,0,.16); }
.nf-pop[hidden] { display: none; }
.nf-pop-glava { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.nf-pop-noga { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); }
.nf-mreza { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
@media (max-width: 560px) { .nf-mreza { grid-template-columns: 1fr; } }
.nf-polje { display: flex; flex-direction: column; gap: 3px; font-size: .74rem; color: var(--ink-soft); font-weight: 600; }
.nf-polje select, .nf-tekst { width: 100%; }
.nf-polje-tekst { grid-column: 1 / -1; }   /* trazilica preko cijele sirine */
/* Panel "svi podaci" ispod retka (cfg.detalji) — otvara se klikom na red. */
.table th.th-caret { width: 30px; }
.table td.det-caret { width: 30px; text-align: center; color: var(--ink-soft); user-select: none; }
.table tbody tr.otvoren td.det-caret { color: var(--brand); }
.table tbody tr.otvoren { background: var(--brand-soft); box-shadow: inset 3px 0 0 var(--brand); }
.table tr.det-red > td { padding: 0; background: var(--bg); border-bottom: 1px solid var(--line); }
.det-box { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px 22px; padding: 14px 18px; }
.det-par.det-sirok { grid-column: 1 / -1; }
.det-lab { font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-soft); font-weight: 650; }
.det-val { font-size: .9rem; color: var(--ink); white-space: pre-wrap; word-break: break-word; }
/* Tablica šira od kartice (mnogo stupaca, uski prozor ili zoom) → kartica se SKROLA vodoravno umjesto
   da gumbi akcija vise izvan okvira (Djelatnici, 2026-09-27). Zaobljeni rubovi ostaju na kartici. */
.card > #sadrzaj { overflow-x: auto; border-radius: inherit; }
.table td.akcije { text-align: right; white-space: nowrap; width: 1%; }
.table td.akcije .btn { margin-left: 4px; }

/* Komunikacija: spojena ćelija "Dogovorena radnja" + poveznica */
.kom-dog { line-height: 1.3; }
.kom-meta { display: flex; align-items: center; gap: 6px; margin-top: 3px; flex-wrap: wrap; }
.kom-zad { display: inline-block; padding: 1px 7px; border-radius: 999px; background: var(--brand-soft); color: var(--brand);
  font-size: .72rem; font-weight: 700; }
.kom-link { white-space: nowrap; font-size: .85rem; }
.kom-put { font-size: .8rem; color: var(--ink-soft); word-break: break-all; }
/* NAS putanja: gumb za Explorer + sama putanja. Gumb se ne smije stisnuti uz dugu putanju. */
.nas-celija { display: flex; align-items: flex-start; gap: 7px; }
.nas-btn { flex-shrink: 0; padding: 2px 7px; line-height: 1.5; }

/* Deep-link isticanje retka (dolazak s "Moja zaduženja") */
.table tbody tr.istaknuto { background: var(--brand-soft); box-shadow: inset 3px 0 0 var(--brand); animation: istakni 2.2s ease-out 1; }
@keyframes istakni { 0%, 60% { background: var(--brand-soft); } 100% { background: transparent; } }
/* Isto isticanje za checklist-stavku (nije <tr> nego .chk-red) i za red stavke u Ganttu */
.chk-red.istaknuto,
.cl-faza.istaknuto,
.gantt-red.istaknuto { box-shadow: inset 3px 0 0 var(--brand); animation: istakni 2.2s ease-out 1; }
/* Skok među tabovima (📊 checklist→Gantt, 📋 Gantt→checklist) — nenametljiv, jači na hover */
.chk-skok, .gantt-skok { opacity: .55; padding: 0 4px; }
.chk-skok:hover, .gantt-skok:hover { opacity: 1; }
.gantt-skok { flex: 0 0 auto; margin-left: 4px; }
/* Skok na razini FAZE poravnava zaglavlje na vrh (block:start). #shell je sticky, visina 56px,
   pa bez odmaka faza-zaglavlje završi IZA trake. scroll-margin-top ga spusti ispod nje. */
.cl-faza-head { scroll-margin-top: 70px; }
.gantt-red[data-faza-id] { scroll-margin-top: 70px; }

/* Drag & drop preslagivanje redova (npr. Faze template) */
.table th.th-drag { width: 34px; }
.table td.drag-handle { width: 34px; text-align: center; color: var(--ink-soft); cursor: grab; user-select: none; font-size: 1.1rem; line-height: 1; }
.table td.drag-handle:hover { color: var(--ink); }
.table td.drag-handle:active { cursor: grabbing; }
.table tbody tr[draggable] { cursor: default; }
.table tbody tr.dragging { opacity: .55; background: var(--brand-soft); }

/* ===== Checklist grupirani prikaz (foldable Faza → Grupa + drag&drop) ===== */
.cl-uputa { margin: 0 0 12px; font-size: .85rem; }
.cl-alat { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-bottom: 14px; }
.cl-alat-grupa { display: inline-flex; align-items: center; gap: 4px; }
.cl-alat-lbl { font-size: .8rem; color: var(--ink-soft); font-weight: 600; margin-right: 2px; }
.cl-tri { padding: 3px 9px; font-size: .72rem; line-height: 1; min-width: 30px; }
.cl-wrap { display: flex; flex-direction: column; gap: 12px; }
.cl-caret { display: inline-block; width: 14px; color: var(--ink-soft); font-size: .8rem; flex-shrink: 0; }

/* Faza = velika "elipsa" */
.cl-faza { border: 1px solid var(--line-strong); border-radius: 14px; overflow: hidden; background: var(--panel); }
.cl-faza-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; cursor: pointer; background: #f7f9fb; user-select: none; }
.cl-faza-head:hover { background: var(--brand-soft); }
.cl-faza-red { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; background: var(--brand-soft); color: var(--brand); border-radius: 7px; font-size: .8rem; font-weight: 700; }
.cl-faza-naziv { font-weight: 650; flex: 1; }
.cl-faza-grupe { flex-shrink: 0; font-size: .78rem; padding: 3px 9px; }
.cl-count { font-variant-numeric: tabular-nums; color: var(--ink-soft); font-size: .82rem; font-weight: 600; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 1px 9px; }
.cl-faza-body { padding: 10px 14px 14px; display: flex; flex-direction: column; gap: 8px; }
.cl-faza.collapsed .cl-faza-body { display: none; }

/* Grupa = manja "elipsa" unutar faze */
.cl-grupa { border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.cl-grupa-head { display: flex; align-items: center; gap: 9px; padding: 8px 12px; cursor: pointer; user-select: none; border-radius: 10px; }
.cl-grupa-head:hover { background: #fafbfc; }
.cl-grupa.dragging { opacity: .5; border-style: dashed; }
.cl-grip-grupa { font-size: .95rem; }
.cl-grupa-naziv { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); font-weight: 700; flex: 1; }
.cl-grupa-body { padding: 4px 8px 8px; display: flex; flex-direction: column; gap: 5px; min-height: 16px; }
.cl-grupa.collapsed .cl-grupa-body { display: none; }
.cl-grupa-prazno { font-size: .8rem; padding: 8px 10px; border: 1px dashed var(--line-strong); border-radius: 8px; text-align: center; }
.cl-grupa-body:empty::after { content: 'ovamo povuci stavku'; display: block; text-align: center; color: var(--ink-soft); font-size: .8rem; padding: 8px; border: 1px dashed var(--line-strong); border-radius: 8px; }

/* Stavka */
.cl-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.cl-item.clickable { cursor: pointer; }
.cl-item.clickable:hover { border-color: var(--brand); background: var(--brand-soft); }
.cl-item.dragging { opacity: .5; border-style: dashed; }
.cl-grip { color: var(--ink-soft); cursor: grab; font-size: 1.05rem; line-height: 1; flex-shrink: 0; }
.cl-grip:active { cursor: grabbing; }

/* --- Grupirani pod-resurs (Mape kod dokumenata) — isti jezik kao grupe checkliste --- */
.gr-lista { display: flex; flex-direction: column; gap: 10px; }
.gr-mapa { border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.gr-mapa.dragging { opacity: .5; border-style: dashed; }
.gr-mapa-head { display: flex; align-items: center; gap: 9px; padding: 8px 12px; cursor: pointer; user-select: none; border-radius: 10px; }
.gr-mapa-head:hover { background: #fafbfc; }
.gr-caret { color: var(--ink-soft); font-size: .8rem; width: 10px; }
.gr-mapa-naziv { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); font-weight: 700; flex: 1; }
.gr-broj { font-size: .75rem; color: var(--ink-soft); background: var(--bg); border-radius: 999px; padding: 1px 8px; }
/* Gumb za preimenovanje se pojavi tek na hover zaglavlja — ne odvlači pažnju. */
.gr-preimenuj { opacity: 0; padding: 1px 7px; transition: opacity .12s; }
.gr-mapa-head:hover .gr-preimenuj, .gr-preimenuj:focus { opacity: 1; }
.gr-mapa.collapsed .gr-mapa-body { display: none; }
.gr-mapa-body { padding: 4px 8px 8px; display: flex; flex-direction: column; gap: 5px; min-height: 16px; }
.gr-red { display: flex; align-items: center; gap: 10px; padding: 7px 9px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--panel); cursor: pointer; }
.gr-red:hover { border-color: var(--line-strong); }
.gr-red.dragging { opacity: .5; border-style: dashed; }
.gr-red.istaknuto { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.gr-glavno { flex: 1; min-width: 0; }
.gr-naziv { font-weight: 600; font-size: .9rem; }
.gr-meta { font-size: .76rem; color: var(--ink-soft); }
.gr-put { flex: 1; min-width: 0; }
.gr-akcije { display: flex; gap: 6px; flex-shrink: 0; }
.gr-ikona { flex-shrink: 0; font-size: 1.1rem; line-height: 1; width: 1.4rem; text-align: center; }
@media (max-width: 760px) { .gr-red { flex-wrap: wrap; } .gr-put { flex-basis: 100%; } }

/* --- Dokumenti: segment (Uvedeni | Mapa projekta) + pogled „Mapa projekta" (stvarno stablo) --- */
.dok-segment { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); overflow: hidden; margin-right: auto; }
.dok-seg-btn { border: none; border-radius: 0; background: var(--panel); color: var(--ink-soft); padding: 5px 14px; }
.dok-seg-btn + .dok-seg-btn { border-left: 1px solid var(--line-strong); }
.dok-seg-btn.aktivan { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.nas-stablo { margin-top: 4px; }
.nas-traka { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.nas-traka .nas-bc { margin-bottom: 0; flex: 1; min-width: 0; }
.nas-povezi { flex-shrink: 0; }
.nas-povezi.aktivan { background: var(--brand-soft); color: var(--brand); border-color: var(--brand); }
.nas-bc { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; margin-bottom: 10px; }
.nas-bc-seg { border: none; background: none; color: var(--brand); padding: 2px 6px; border-radius: var(--radius-sm); font-size: .85rem; line-height: 1.4; display: inline-flex; align-items: center; cursor: pointer; }
.nas-bc-seg:hover { background: var(--brand-soft); }
.nas-bc-sep { color: var(--ink-soft); font-size: .85rem; }
.nas-bc-home { border: none; background: none; font-size: .95rem; line-height: 1.4; display: inline-flex; align-items: center; padding: 2px 6px; border-radius: var(--radius-sm); cursor: pointer; }
.nas-bc-home:hover { background: var(--brand-soft); }
/* „▸" na kraju putanje → izbornik podmapa (zaron i dok je filter aktivan). */
.nas-bc-vise-wrap { position: relative; display: inline-flex; }
.nas-bc-vise { border: none; background: none; color: var(--ink-soft); font-size: .85rem; line-height: 1.4; display: inline-flex; align-items: center; padding: 2px 4px; border-radius: var(--radius-sm); cursor: pointer; }
.nas-bc-vise:hover { background: var(--brand-soft); color: var(--brand); }
/* Widget više NAS putanja (komunikacija → poveznice) + ćelija „Poveznica" u gridu. */
.pov-lista { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.pov-red { display: flex; gap: 8px; align-items: flex-start; }
.pov-polja { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.pov-akc { display: flex; gap: 4px; flex-shrink: 0; }
.kom-pov { display: flex; flex-direction: column; gap: 4px; }
/* Panel vezanih dokumenata na „razmotanom" redu Ulaznih podataka. */
.ulazni-dok { padding: 14px 18px; }
.ulazni-dok-lista { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.ulazni-dok-red { display: flex; align-items: center; gap: 10px; }
.ulazni-dok-glavno { flex: 1; min-width: 0; }
.ulazni-dok-naziv { font-weight: 600; font-size: .9rem; }
.ulazni-dok-put { font-size: .8rem; color: var(--ink-soft); word-break: break-all; }
.nas-bc-pop { position: absolute; top: 100%; left: 0; z-index: 30; margin-top: 2px; min-width: 190px; max-height: 320px; overflow: auto; background: var(--panel); border: 1px solid var(--line-strong); border-radius: 8px; box-shadow: var(--shadow); padding: 4px; }
.nas-bc-pop-item { display: block; width: 100%; text-align: left; border: none; background: none; padding: 6px 8px; border-radius: 6px; cursor: pointer; color: var(--ink); font: inherit; font-size: .85rem; white-space: nowrap; }
.nas-bc-pop-item:hover { background: var(--brand-soft); }
.nas-bc-pop-prazno { padding: 6px 8px; color: var(--ink-soft); font-size: .85rem; }
.nas-lista { display: flex; flex-direction: column; gap: 4px; }
.nas-red { display: flex; align-items: center; gap: 10px; padding: 7px 9px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--panel); }
.nas-red.clickable { cursor: pointer; }
.nas-red:hover { border-color: var(--line-strong); }
.nas-red.nas-mapa { background: var(--bg); }
.nas-ikona { flex-shrink: 0; font-size: 1.15rem; line-height: 1; width: 1.5rem; text-align: center; }
.nas-glavno { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.nas-naziv { font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nas-meta { font-size: .76rem; color: var(--ink-soft); }
.nas-akcije { display: flex; gap: 6px; flex-shrink: 0; }
.nas-red .nas-akcije { opacity: 0; transition: opacity .12s; }
.nas-red:hover .nas-akcije, .nas-red:focus-within .nas-akcije { opacity: 1; }
@media (hover: none) { .nas-red .nas-akcije { opacity: 1; } }
.nas-uvedeno { flex-shrink: 0; font-size: .72rem; font-weight: 600; color: var(--ok, #1a7f37); background: var(--ok-soft, #e8f5ec);
  border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.nas-sken { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; padding: 8px 10px;
  background: var(--brand-soft); border-radius: var(--radius-sm); font-size: .85rem; }
.nas-sken-txt { flex: 1; color: var(--ink-soft); }
.sken-lista { display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow-y: auto; margin-top: 6px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 6px; }
.sken-red { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: var(--radius-sm); cursor: pointer; }
.sken-red:hover { background: var(--bg); }
.sken-glavno { display: flex; flex-direction: column; min-width: 0; }
.sken-ime { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sken-put { font-size: .78rem; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- Pretraga dokumenata (Uvedeni + Mapa projekta) --- */
.uv-pretraga { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.uv-q { flex: 1; max-width: 420px; }
.uv-broj { font-size: .8rem; color: var(--ink-soft); white-space: nowrap; }
.nas-pretraga-traka { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.nas-pretraga-red { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nas-q { flex: 1 1 120px; min-width: 100px; max-width: 460px; }
.nas-cipovi { display: flex; gap: 4px; flex-wrap: wrap; }
.nas-cip.aktivan, .nas-neuv.aktivan, .nas-sadrzaj.aktivan, .nas-rek.aktivan { background: var(--brand-soft); color: var(--brand); border-color: var(--brand); font-weight: 600; }
.nas-red-glavni { flex-wrap: nowrap; align-items: flex-end; }   /* pretraga + datumi: jedan red na desktopu */
.nas-red-glavni .nas-q { max-width: none; }                     /* search ispuni red do datumskih grupa */
.nas-datum-raspon { display: flex; align-items: flex-end; gap: 10px; flex-shrink: 0; flex-wrap: nowrap; }
.nas-datum-grupa { display: flex; flex-direction: column; gap: 2px; }   /* label iznad polja */
.nas-datum-lbl { font-size: .8rem; color: var(--ink-soft); white-space: nowrap; }
.nas-datum-polje { width: 140px; padding: 4px 6px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--panel); color: var(--ink); font: inherit; font-size: .85rem; }
/* Mobitel: prvi red se lomi — pretraga u svoj red, pa datumske grupe (mogu u dva retka). */
@media (max-width: 700px) {
  .nas-red-glavni { flex-wrap: wrap; align-items: stretch; }
  .nas-red-glavni .nas-q { flex-basis: 100%; }
  .nas-datum-raspon { flex-wrap: wrap; }
}
.nas-pretraga-info { font-size: .85rem; color: var(--ink-soft); margin-bottom: 8px; }
.cl-item-text { flex: 1; line-height: 1.3; }
.cl-badge { font-size: .72rem; font-weight: 600; color: var(--ink-soft); background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.cl-del { flex-shrink: 0; }
body.cl-dragging .cl-item { cursor: grabbing; }

/* Checkbox polje u formi (label uz kvačicu, bez donjeg razmaka labela) */
.field-check { margin-bottom: 14px; }
/* Kvačica i tekst u ISTOM retku i kad je tekst dug: bez prelamanja u novi red (dugi opis bi inače
   „visio" ispod kvačice — feedback 2026-09-29, Djelatnici → Dnevni e-mail sažetak). */
.field-check .row { flex-wrap: nowrap; align-items: flex-start; }
.field-check label { margin: 0; font-weight: 550; color: var(--ink); flex: 1 1 auto; min-width: 0; line-height: 1.35; cursor: pointer; }
.field-check input[type=checkbox] { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 2px; cursor: pointer; }

/* --- Značke / statusi --- */
.badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .74rem; font-weight: 650; letter-spacing: .02em; }
.badge-admin { background: var(--brand-soft); color: var(--brand); }
.badge-ok { background: var(--ok-soft); color: var(--ok); }
.badge-warn { background: var(--warn-soft); color: var(--warn); }
.badge-muted { background: var(--bg); color: var(--ink-soft); }
.tip { display: inline-block; padding: 2px 9px; border-radius: var(--radius-sm); background: var(--bg); color: var(--ink-soft); font-size: .76rem; font-weight: 600; }

/* --- Prazno stanje --- */
.empty { text-align: center; padding: 50px 20px; color: var(--ink-soft); }
.empty svg { opacity: .4; margin-bottom: 10px; }

/* --- Drag&drop zona za uvoz Excela --- */
#dropzona { transition: outline-color .12s, background .12s; outline: 2px dashed transparent; outline-offset: -2px; }
#dropzona.drag { outline-color: var(--brand); background: var(--brand-soft); }
#dropzona.drag * { pointer-events: none; }
.dropzona-hint { font-size: .82rem; margin-top: 10px; }

/* --- Modal --- */
.modal-backdrop { position: fixed; inset: 0; background: rgba(18, 26, 38, .45); display: grid; place-items: start center; padding: 60px 16px; z-index: 40; overflow: auto; }
.modal { background: var(--panel); border-radius: var(--radius); box-shadow: 0 12px 40px rgba(15, 25, 40, .25); width: 100%; max-width: 560px; animation: pop .16s ease-out; }
.modal-siroki { max-width: 820px; }
.modal-backdrop-potvrda { z-index: 60; background: rgba(18, 26, 38, .35); }   /* potvrda iznad otvorenog modala */
.modal-potvrda { max-width: 420px; }
.modal-potvrda .modal-body p { margin: 0; }   /* birač NAS putanje: puni preglednik + pretraga treba širinu */
@keyframes pop { from { transform: translateY(8px) scale(.98); opacity: 0; } }
.modal-head { display: flex; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.modal-head h2 { margin: 0; }
.modal-head .x { margin-left: auto; }
.modal-body { padding: 18px 20px; }
.modal-foot { padding: 14px 20px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 10px; }

/* --- Moja zaduženja (dogovorene radnje iz komunikacije) --- */
/* Sažetak po hitnosti uz naslov: mali obojani čipovi (kasne/danas/blizu…). */
.zad-zbroj { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: 6px; vertical-align: middle; }
.zad-cip { font-size: 12px; font-weight: 600; padding: 1px 8px; border-radius: 999px;
  background: var(--bg); color: var(--ink-soft); border: 1px solid var(--line); }
.zad-cip.h-kasni { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.zad-cip.h-danas, .zad-cip.h-blizu { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.zad-lista { display: flex; flex-direction: column; gap: 6px; }
.zad-red { display: flex; align-items: flex-start; gap: 12px; padding: 9px 12px; border: 1px solid var(--line);
  border-left: 3px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--panel); color: var(--ink); }
.zad-red:hover { text-decoration: none; border-color: var(--brand); background: var(--brand-soft); }
.zad-rok { flex-shrink: 0; width: 116px; font-size: .78rem; font-weight: 700; color: var(--ink-soft); padding-top: 1px; }
.zad-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.zad-sazetak { font-weight: 600; font-size: .9rem; line-height: 1.3; }
.zad-projekt { font-size: .78rem; color: var(--ink-soft); }
.zad-polja { margin-left: auto; font-weight: 400; }
/* Kartice zaduženja/obavijesti/sati (početna + Pregled): zajednički okvir s unutarnjim razmakom. */
.zad-blok { margin-bottom: 22px; padding: 14px 18px; }
.zad-blok h2 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; font-size: 1.05rem; }
.zad-blok h2 .n { color: var(--ink-soft); font-weight: 600; }
.zad-dog { font-size: .78rem; color: var(--ink-soft); font-style: italic; }
.zad-prazno { font-size: .88rem; color: var(--ink-soft); padding: 4px 0; }
/* Hitnost: boja lijevog ruba + oznake roka */
.zad-red.h-kasni { border-left-color: var(--danger); }
.zad-red.h-kasni .zad-rok { color: var(--danger); }
.zad-red.h-danas { border-left-color: var(--warn); }
.zad-red.h-danas .zad-rok { color: var(--warn); }
/* "blizu roka" (unutar UPOZORENJE_DANA) — upozorenje prije samog roka, mekše od "danas". */
.zad-red.h-blizu { border-left-color: var(--warn); }
.zad-red.h-blizu .zad-rok { color: var(--warn); }
.zad-red.h-uskoro { border-left-color: var(--brand); }

/* Snooze na zaduženju: stavka = poveznica (red) + akcije IZVAN poveznice (da klik na gumb
   ne navigira). */
.zad-stavka { display: flex; align-items: stretch; gap: 6px; }
.zad-stavka .zad-red { flex: 1; min-width: 0; }
.zad-akcije { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.zad-snooze-sel { font-size: .76rem; padding: 2px 3px; }
.zad-snooze-btn { font-size: .76rem; padding: 3px 8px; white-space: nowrap; cursor: pointer;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--panel); color: var(--ink-soft); }
.zad-snooze-btn:hover { border-color: var(--brand); color: var(--brand); }
.zad-odgoda-do { font-size: .74rem; color: var(--ink-soft); white-space: nowrap; align-self: center; }
.zad-stavka.odgodjena .zad-red { opacity: .72; }
/* Podlista odgođenih (foldable, zatvorena po defaultu) */
.zad-odgodjena { margin-top: 12px; }
.zad-odgodjena > summary { cursor: pointer; font-size: .92rem; font-weight: 600; color: var(--ink-soft); padding: 4px 0; }
.zad-odgodjena[open] > summary { margin-bottom: 8px; }

/* Brojnik u gornjoj traci */
.shell-zad { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
  background: var(--danger-soft); color: var(--danger); font-size: .82rem; font-weight: 700; white-space: nowrap; }
.shell-zad:hover { text-decoration: none; filter: brightness(.96); }
/* `hidden` mora pobijediti display:inline-flex — inače prazne „pilule" ostaju vidljive (nalaz 2026-09-29). */
.shell-zad[hidden] { display: none; }

/* --- Toast --- */
#toast-wrap { position: fixed; bottom: 22px; right: 22px; display: flex; flex-direction: column; gap: 8px; z-index: 60; }
.toast { padding: 11px 16px; border-radius: var(--radius-sm); background: var(--ink); color: #fff; box-shadow: var(--shadow); font-weight: 550; font-size: .9rem; animation: slidein .2s ease-out; white-space: pre-line; }   /* pre-line: poruke s novim redom (npr. plan sati faze) */
.toast-ok { background: var(--ok); }
.toast-err { background: var(--danger); }
.toast.nestaje { opacity: 0; transition: opacity .3s; }
@keyframes slidein { from { transform: translateX(12px); opacity: 0; } }

/* --- Login --- */
.login-page { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.login-card { width: 100%; max-width: 380px; }
.login-brand { text-align: center; margin-bottom: 22px; }
.login-brand .logo { display: inline-grid; place-items: center; width: 52px; height: 52px; background: var(--brand); color: #fff; border-radius: 13px; font-weight: 800; font-size: 1.7rem; margin-bottom: 10px; }
/* Logotip instalacije na ekranu za prijavu (white-label). */
.login-logo { display: block; max-height: 64px; max-width: 200px; width: auto; margin: 0 auto 12px; object-fit: contain; }
.login-err { background: var(--danger-soft); color: var(--danger); padding: 9px 13px; border-radius: var(--radius-sm); font-size: .88rem; margin-bottom: 14px; }

/* --- Spinner --- */
.spinner { width: 22px; height: 22px; border: 2.5px solid var(--line); border-top-color: var(--brand); border-radius: 50%; animation: spin .7s linear infinite; margin: 40px auto; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Prekidač moda bojanja rokova (Bez/Moje/Sve) — alatna traka checklista/Gantta i početna. */
.boje-rokova { display: inline-flex; align-items: center; gap: 3px; }
.boje-rokova-lbl { font-size: .8rem; color: var(--ink-soft); margin-right: 2px; }
.boje-rokova-b.aktivan { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }

/* Segmentirani prekidač (npr. Projekti: Aktivni / Arhiva / Svi) — gumbi spojeni u jednu grupu. */
.seg { display: inline-flex; gap: 0; }
.seg .btn { border-radius: 0; margin-left: -1px; }
.seg .btn:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); margin-left: 0; }
.seg .btn:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.seg .btn.active { background: var(--brand-soft); color: var(--brand); border-color: var(--brand); font-weight: 650; position: relative; z-index: 1; }

/* ===== Uski ekran (mobitel) — sadržaj modula (feedback 2026-09-29) =====================================
   Obrazac je interna.html: stupci se slažu jedan ispod drugog, gumbi se PRELAMAJU u novi red umjesto da vise
   izvan okvira, tablice skrolaju vodoravno unutar svog okvira (ne cijela stranica). Sve je unutar media upita —
   na širokom ekranu (> 720 px) izgled je nepromijenjen. Ljuska (☰ bočni izbornik) je gore, u svom bloku. */
@media (max-width: 720px) {
  .wrap { padding: 16px 12px 44px; }
  /* Zaglavlje stranice: naslov u svom redu, gumbi/prekidači ispod i prelamaju se; poveznica „← natrag" iznad naslova. */
  .page-head { flex-wrap: wrap; gap: 8px 10px; margin-bottom: 16px; }
  .page-head h1 { flex: 1 1 100%; font-size: 1.35rem; }
  .page-head > a:first-child { margin-right: 0 !important; }
  .page-head > a:first-child + h1 { margin-top: -4px; }
  .page-head .spacer { display: none; }
  .page-head input[type=search] { flex: 1 1 100%; min-width: 0 !important; margin-right: 0 !important; }
  /* Tablica = vlastiti okvir koji skrola vodoravno (kao .docs-content table); stupci s tekstom dobiju
     minimalnu širinu da se riječi ne lome slovo po slovo. */
  .table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table th { white-space: nowrap; }
  .table td { min-width: 6.5em; }
  .table td.akcije, .table td.num, .table td.det-caret, .table td.drag-handle { min-width: 0; }
  .table th, .table td { padding: 9px 10px; }
  .card-pad { padding: 14px; }
  /* Alatne trake i redovi gumba: prelamanje umjesto bježanja izvan okvira. */
  .cl-alat { gap: 6px 12px; }
  .dash-sekcija-alat { flex-wrap: wrap; }
  .uv-pretraga { flex-wrap: wrap; }
  .uv-q { flex: 1 1 100%; max-width: none; }
  .nas-traka .nas-bc { flex-basis: 100%; }
  /* Filtar (NadzorFiltri): panel preko cijele širine ispod trake, ne visi desno izvan ekrana. */
  .nf-pop { position: fixed; top: 64px; left: 12px; right: 12px; width: auto; max-width: none; max-height: calc(100vh - 80px); overflow-y: auto; }
  /* Moja zaduženja (početna + Pregled): rok u svom redu, naslov i drugi redak ispod punom širinom,
     „1d ▾ / Odgodi" u jednom redu desno ispod kartice. */
  .zad-stavka { flex-wrap: wrap; gap: 4px; }
  .zad-stavka .zad-red { flex: 1 1 100%; flex-direction: column; gap: 3px; }
  .zad-rok { width: auto; }
  .zad-akcije { flex: 1 1 100%; justify-content: flex-end; }
  .zad-akcije .zad-snooze-sel { width: auto; }
  .zad-blok { padding: 12px 14px; }
  /* Modal: puna širina, male margine; zaglavlje i dno (Spremi/Odustani) ljepljivi dok se obrazac skrola. */
  .modal-backdrop { padding: 24px 12px; }
  .modal-head { position: sticky; top: 0; z-index: 2; background: var(--panel); border-radius: var(--radius) var(--radius) 0 0; padding: 14px 16px; }
  .modal-body { padding: 14px 16px; }
  .modal-foot { position: sticky; bottom: 0; z-index: 2; background: var(--panel); border-radius: 0 0 var(--radius) var(--radius); flex-wrap: wrap; padding: 12px 16px; }
  .field-red { flex-wrap: wrap; }
  .field-red > .field { flex: 1 1 140px; }
  #toast-wrap { left: 12px; right: 12px; bottom: 12px; }
}
@media (max-width: 520px) {
  .modal-backdrop { padding: 12px 8px; }
  .modal-foot .btn { flex: 1 1 auto; justify-content: center; }
  .page-head .btn-primary { margin-left: auto; }
}
/* Dodirni zasloni: gumbi dovoljno visoki za prst (40 px). */
@media (hover: none) {
  .btn, .zad-snooze-btn, .zad-snooze-sel, .pill, .tab { min-height: 40px; }
}