/* Boje idu iskljucivo kroz promenljive - inace tamna tema ne moze da radi.
   Nijedna vrednost se ne pise direktno u pravilima ispod. */
:root {
  --border: #d0d5dd;
  --bg: #f7f8fa;
  --surface: #ffffff;
  --text: #1a1d23;
  --muted: #667085;
  --accent: #2563eb;
  --accent-text: #ffffff;
  --green: #1a7f37;
  --green-bg: #dafbe1;
  --red: #b42318;
  --red-bg: #fde2e1;
  --gray-bg: #eaecef;
  --gray-text: #444444;
  --blue-bg: #dbeafe;
  --amber: #9a6700;
  --amber-bg: #fff2cc;
  --scrim: rgba(0, 0, 0, .45);

  /* Visina gornje trake. Traka je fiksirana, pa `body` mora da ostavi tacno
     toliko mesta - zato JEDNA vrednost na jednom mestu. Menja se ovde. */
  --topnav-height: 51px;

  /* Bocni meni ima dva stanja: uska traka sa samim ikonicama, koja stoji UVEK,
     i rasklopljen meni sa nazivima, koji se otvara PREKO sadrzaja. Mesto u
     rasporedu zauzima samo traka - i to uvek isto, pa se nista ne pomera. */
  --sidenav-rail: 60px;
  --sidenav-width: 216px;

  /* Razmak oko naslova stranice: iznad njega i ispod njega, isti.
     Mera je POLA visine slova „U" u naslovu - izmereno u browseru, slovo je
     23px, pa je ovo 12. Ista vrednost drzi naslov odlepljen i od gornje trake i
     od onoga sto ide ispod, pa svaka stranica pocinje isto. */
  --heading-gap: 12px;
}

:root[data-theme="dark"] {
  --border: #303540;
  --bg: #14161a;
  --surface: #1c1f26;
  --text: #e6e8eb;
  --muted: #9aa3b2;
  --accent: #5b9dff;
  --accent-text: #10131a;
  /* prigusene pozadine stanja - pune boje su na tamnom preglasne */
  --green: #58d68a;
  --green-bg: #16301f;
  --red: #ff8a80;
  --red-bg: #3a1c1a;
  --gray-bg: #262a33;
  --gray-text: #c2c8d2;
  --blue-bg: #17263f;
  --amber: #e5b84b;
  --amber-bg: #362c14;
  --scrim: rgba(0, 0, 0, .65);
}

* { box-sizing: border-box; }

body {
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  margin: 0;
  padding-top: var(--topnav-height);  /* mesto za fiksiranu traku */
}

/* Zakucana za vrh: prati stranicu dokle god se skroluje. Visina je zadata
   izricito, jer isti broj mora da zna i `body` (razmak odozgo) - a niza je za
   desetak posto od zatecene, dok su prekidac i linkovi u njoj ostali isti. */
.topnav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  height: var(--topnav-height);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0 24px 0 0;   /* levo nista - hamburger sam drzi svoje mesto */
  display: flex;
  align-items: center;
  gap: 20px;
}

.topnav a {
  text-decoration: none;
  color: var(--text);
  font-weight: 600;
}

.topnav a:hover { color: var(--accent); }

/* gura prekidac teme skroz desno */
.nav-spacer { margin-left: auto; }

.theme-toggle {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  width: 36px;
  height: 32px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}

.theme-toggle:hover { border-color: var(--accent); }

main {
  max-width: 1100px;
  margin: var(--heading-gap) auto;
  padding: 0 20px;
}

h1 { margin: 0 0 var(--heading-gap); }

/* PRVI naslov na stranici uvek stoji na istoj visini, ma koja stranica bila.
   Nekad je to `h1` („Users"), nekad `h2` („Add a time window"), a ispred njega
   moze da stoji prazno polje za poruke - zato ovoliko selektora za jedno
   pravilo. Merilo je pola visine slova „U" u naslovu: isto gore i isto dole. */
main > h1:first-child,
main > h2:first-child,
main > #messages:first-child + h1,
main > #messages:first-child + h2,
main > .page-head:first-child {
  margin-top: 0;
  margin-bottom: var(--heading-gap);
}

/* Ono sto ide ODMAH ISPOD naslova krece tacno na toj meri - bez svog razmaka
   odozgo. Bez ovoga svaka stranica ima drugaciji odnos: pasus nosi 16px,
   forma nista, tabela nesto trece. */
main > h1:first-child + *,
main > h2:first-child + *,
main > #messages:first-child + h1 + *,
main > #messages:first-child + h2 + *,
main > .page-head:first-child + * {
  margin-top: 0;
}

/* Prvi element UNUTAR bilo kog omotaca ne dodaje razmak odozgo.
   Bez ovoga razmak pasusa „procuri" kroz omotac bez ivice i padne na nas
   (`#content`, `#intro`...), pa je ista stranica imala 16 umesto 12 - a razlika
   se ne vidi u kodu nego tek na ekranu. */
main > * > :first-child { margin-top: 0; }

/* naslovi odeljaka se uvlace isto koliko i nazivi polja */
main h2 { text-indent: 9px; }

.table-wrap { overflow-x: auto; }

table {
  border-collapse: collapse;
  width: 100%;
  background: var(--surface);
}

th, td {
  border: 1px solid var(--border);
  padding: 8px 10px;
  text-align: left;
  font-size: 14px;
}

th { background: var(--gray-bg); }

.schedule .truncate {
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nowrap { white-space: nowrap; }

/* Polje za mali broj (koliko naloga sme da poveze) - inace se rasteze preko
   cele celije i izgleda kao polje za tekst. */
input.narrow { width: 5em; }

/* Brojcana polja u tabeli: tacno onoliko koliko im treba, ni cifru vise.
   `tiny` prima tri cifre (granica profila je 999), `small` pet-sest (krediti).
   Strelice se ne gase - njima se i podize po koraku. */
input.tiny,
input.small {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

input.tiny { width: 4.2em; }
input.small { width: 6.2em; }

/* Kljuc za aplikaciju na telefonu i rezervni kodovi: prekucavaju se rukom, pa
   moraju da budu jednosirinski i razmaknuti - inace se 0 i O, 1 i l mesaju. */
.setup-key,
pre.codes {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 1.15rem;
  letter-spacing: 0.08em;
  background: var(--gray-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 14px;
  display: inline-block;
  user-select: all;
}

pre.codes {
  line-height: 1.9;
  margin: 12px 0;
}

/* Zamka za automate: polje koje covek ne vidi, a automat popuni.
   Sklanja se sa ekrana, ne gasi - `display:none` i `hidden` automati
   prepoznaju i preskacu. */
.trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Red u kom polje i dugme stoje jedno pored drugog (npr. lozinka + radnja). */
.form-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 10px 0 18px;
}

.form-row .hint { flex-basis: 100%; margin: 0; }

tr.row-published td { background: var(--green-bg); }
tr.row-failed td,
tr.row-uploading td { background: var(--blue-bg); }

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
}

.badge-published { background: var(--green-bg); color: var(--green); }
.badge-failed { background: var(--red-bg); color: var(--red); }
.badge-pending { background: var(--gray-bg); color: var(--gray-text); }
.badge-uploading { background: var(--blue-bg); color: var(--accent); }
.badge-warn { background: var(--amber-bg); color: var(--amber); }

.inline-form { display: inline; margin-left: 8px; }

.btn-delete {
  background: var(--surface);
  border: 1px solid var(--red);
  color: var(--red);
  border-radius: 4px;
  padding: 3px 8px;
  cursor: pointer;
  font-size: 12px;
}

.btn-delete:hover { background: var(--red-bg); }
.btn-delete:disabled { opacity: 0.5; cursor: not-allowed; }

.form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 520px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px;
}

/* Naziv polja se uvlaci za jedan znak - taman toliko da stoji iznad teksta
   koji se u polje kuca (polje ima 9px unutrasnjeg razmaka), a ne skroz uz
   ivicu. Uvlacenje ide kroz `text-indent`, a NE kroz `padding`: polje je dete
   oznake, pa bi ga padding pomerio zajedno sa naslovom i suzio. */
.form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-weight: 600;
  font-size: 14px;
  text-indent: 9px;
}

/* `text-indent` se nasledjuje, pa bi tekst U polju bio pomeren jos jednom */
.form input, .form select, .form textarea {
  font-weight: normal;
  font-size: 14px;
  text-indent: 0;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 5px;
  font-family: inherit;
  background: var(--bg);
  color: var(--text);
}

.form textarea { min-height: 70px; resize: vertical; }

/* bez ovoga kalendar/strelice ostaju crni na tamnoj pozadini */
:root[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
}

.checkbox-label {
  flex-direction: row !important;
  align-items: center;
  gap: 8px !important;
  text-indent: 0;   /* uz cekboks tekst ide odmah, bez uvlaka */
}

.form button {
  background: var(--accent);
  color: var(--accent-text);
  border: none;
  border-radius: 5px;
  padding: 10px 16px;
  font-weight: 600;
  cursor: pointer;
  align-self: flex-start;
}

.form button:hover { opacity: 0.9; }

/* Oko na polju za lozinku - klikom se vidi sta je otkucano.
   Selektor je `.form .password-toggle` (dve klase) da bi nadjacao
   `.form button` (klasa + element), koji pravi plavo dugme. Bez toga bi oko
   izgledalo kao dugme "Sign in". */
.password-field {
  position: relative;
  display: block;
}

.form .password-field input {
  width: 100%;
  padding-right: 38px;  /* mesto za oko, da tekst ne prolazi ispod njega */
}

/* Edge sam dodaje svoje oko - bez ovoga bi ih bilo dva jedno do drugog */
.password-field input::-ms-reveal { display: none; }

.form .password-toggle {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 28px;
  padding: 0;
  background: none;
  color: var(--muted);
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.form .password-toggle:hover {
  color: var(--text);
  opacity: 1;
}

.form .password-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.password-toggle svg {
  width: 18px;
  height: 18px;
  display: block;
}

/* Koje se oko vidi vodi se iz `aria-pressed`, ne iz zasebne klase - tako
   prikaz i ono sto citac ekrana javlja ne mogu da se raziđu. */
.password-toggle .eye-closed { display: none; }
.password-toggle[aria-pressed="true"] .eye-open { display: none; }
.password-toggle[aria-pressed="true"] .eye-closed { display: block; }

.hint {
  font-size: 13px;
  color: var(--muted);
}

.error {
  background: var(--red-bg);
  color: var(--red);
  border: 1px solid var(--red);
  border-radius: 5px;
  padding: 10px 14px;
  font-size: 14px;
}

.ok {
  background: var(--green-bg);
  color: var(--green);
  border: 1px solid var(--green);
  border-radius: 5px;
  padding: 10px 14px;
  font-size: 14px;
}

.detail th {
  width: 160px;
}

a { color: var(--accent); }

.tech {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}

.tech summary { cursor: pointer; }

.storage { margin: 12px 0 20px; max-width: 520px; }

.storage-track {
  height: 8px;
  background: var(--gray-bg);
  border-radius: 4px;
  overflow: hidden;
}

.storage-fill {
  height: 100%;
  background: var(--accent);
}

.storage-fill-full { background: var(--red); }

.storage .hint { margin: 6px 0 0; }

.topnav a.current { color: var(--accent); }

[hidden] { display: none !important; }

.whoami {
  font-size: 13px;
  color: var(--muted);
  margin-right: 12px;
}

/* stanje kredita u zaglavlju - vidi se sa svake stranice */
.nav-credits {
  font-size: 13px;
  padding: 3px 10px;
  margin-right: 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
}

.nav-credits:hover {
  color: var(--text);
  border-color: var(--accent);
}

.big-number {
  font-size: 28px;
  font-weight: 600;
  margin: 0 0 4px;
}

.amount-in { color: var(--green); }
.amount-out { color: var(--muted); }

.linkish {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font: inherit;
  padding: 0;
  text-decoration: underline;
}

.banner {
  background: var(--amber-bg);
  color: var(--amber);
  border: 1px solid var(--amber);
  border-radius: 5px;
  padding: 8px 12px;
}

/* traka koja objasnjava da je program samo za gledanje - dugme u njoj ostaje
   zivo i kad je sve ostalo ugaseno */
.banner-readonly .linkish {
  color: var(--amber);
  font-weight: 600;
  text-decoration: underline;
}

/* ugaseno dugme mora da IZGLEDA ugaseno, inace korisnik klikce u prazno */
button:disabled,
input:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.auth-tabs { display: flex; gap: 8px; margin-bottom: 16px; }

.auth-tabs button {
  background: none;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 6px 14px;
  cursor: pointer;
  font: inherit;
}

.auth-tabs button.active { border-color: var(--accent); color: var(--accent); }

/* izbor koji trenutno nije aktivan (opseg ili tacno vreme) - vidi se da
   postoji, ali je jasno da se ne koristi */
.dimmed {
  opacity: .45;
}

/* „objavi odmah" - radnja koja stvarno nesto salje napolje, pa se razlikuje
   od obicnog linka, ali nije crvena kao brisanje */
.btn-now {
  background: var(--surface);
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: 4px;
  padding: 3px 8px;
  cursor: pointer;
  font-size: 12px;
}

.btn-now:hover { background: var(--blue-bg); }

/* napomena uz mrezu: koliko je mesta ostalo tog dana */
.cap-note { font-weight: normal; }

/* mreza koja je danas popunila svoj broj objava */
.cap-full { color: var(--amber); font-weight: 600; }

/* Napomena koja upozorava, ali ne zabranjuje - npr. da klip nije Short-oblika.
   Boje idu kroz promenljive, inace tamna tema pukne bas na ovom mestu. */
.warn-note {
  font-size: 13px;
  color: var(--amber);
  background: var(--amber-bg);
  border: 1px solid var(--amber);
  border-radius: 5px;
  padding: 8px 10px;
  margin: 0;
}

/* --- Birac vremena --------------------------------------------------------
   Klik na polje otvara brojcanik: prvo sati (00-11 spolja, 12-23 unutra), pa
   minuti na pet. Omotac je isti obrazac kao `.password-field` iznad —
   `position: relative` oko polja, panel apsolutno ispod njega, pa se raspored
   forme ne pomera kad se otvori.

   Selektori namerno imaju DVE klase: `.form button` farba svako dugme u formi u
   plavo i daje mu `align-self: flex-start`, pa bi brojcanik bio gomila plavih
   pravougaonika. Isti razlog kao kod `.password-toggle`. */
.time-field {
  position: relative;
  display: block;
}

.form .time-field input {
  width: 100%;
  padding-right: 28px;  /* mesto za strelicu, da tekst ne prolazi ispod nje */
}

.form .time-open {
  position: absolute;
  top: 50%;
  right: 3px;
  transform: translateY(-50%);
  width: 22px;
  height: 26px;
  padding: 0;
  font-size: 11px;
  background: none;
  color: var(--muted);
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.form .time-open:hover {
  color: var(--text);
  opacity: 1;
}

.time-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 20;
  width: 304px;      /* brojcanik (276) + unutrasnji razmak panela */
  max-width: calc(100vw - 32px);
  padding: 12px 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}

/* Kad se sat dovlaci u vidno polje, zakucana traka ne sme da mu odsece vrh. */
.time-panel {
  scroll-margin-top: calc(var(--topnav-height) + 12px);
  scroll-margin-bottom: 12px;
}

/* pri dnu ekrana panel ide iznad polja */
.time-panel-above {
  top: auto;
  bottom: calc(100% + 6px);
}

/* --- izabrano vreme, iznad brojcanika --- */
.time-readout {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  margin-bottom: 10px;
}

.form .time-readout .time-part {
  padding: 2px 6px;
  font-size: 26px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  background: none;
  color: var(--muted);
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

/* korak koji se upravo bira */
.form .time-readout .time-part.now {
  background: var(--blue-bg);
  color: var(--accent);
  opacity: 1;
}

.time-colon {
  font-size: 24px;
  font-weight: 600;
  color: var(--muted);
}

/* --- brojcanik --- */
.time-clock {
  position: relative;
  margin: 0 auto;
  background: var(--gray-bg);
  border-radius: 50%;
}

.form .time-clock button {
  position: absolute;
  align-self: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  padding: 0;
  font-size: 14px;
  font-weight: normal;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  background: none;
  color: var(--text);
  border: none;
  border-radius: 50%;
  cursor: pointer;
}

/* unutrasnji krug (12-23) je tisi, da se dva kruga razlikuju na prvi pogled -
   inace se broj trazi dvaput duze. Slova su skoro ista kao spolja: ranije su
   bila sitna, a bas ti sati se najvise koriste. */
.form .time-clock .time-night {
  font-size: 13px;
  color: var(--muted);
}

.form .time-clock button:hover {
  background: var(--surface);
  color: var(--text);
  opacity: 1;
}

/* vrednost koja trenutno stoji u polju */
.form .time-clock button.chosen,
.form .time-clock button.chosen:hover {
  background: var(--accent);
  color: var(--accent-text);
}

/* kazaljka - pokazuje izabrano i prati mis dok se bira */
.time-hand {
  position: absolute;
  left: 50%;
  bottom: 50%;
  width: 2px;
  background: var(--accent);
  border-radius: 1px;
  transform-origin: 50% 100%;
  transition: transform .18s ease, height .18s ease;
}

.time-center {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  margin: -4px 0 0 -4px;
  background: var(--accent);
  border-radius: 50%;
}

/* --- Red „From [Set] 14:00   To [Set] 16:00" ------------------------------
   Oba vremena stoje u JEDNOM redu, svako kao grupa od tri stvari: naziv,
   dugme koje otvara sat, i kutija koja vreme samo POKAZUJE. Kutija se ne kuca
   i ne klikce - jedini put do vrednosti je brojcanik. */
.time-row {
  display: flex;
  gap: 12px;
}

/* Svaka grupa uzima TACNO pola reda, pa se „From" lepi uz levu a „To" uz desnu
   ivicu - obe poravnate sa poljem za naziv iznad. */
.time-set {
  position: relative;   /* sat se otvara poravnat sa celom grupom */
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.form .time-set .time-set-label {
  display: inline;
  min-width: 4.4em;     /* „FROM" i „TO" zauzimaju isto, pa su grupe ogledalo */
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

.form .time-set-button {
  align-self: auto;
  flex: none;
  padding: 6px 16px;
  font-size: 14px;
  font-weight: 600;
  background: none;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 999px;
  cursor: pointer;
}

/* Sama u redu (kao „Exact time" na „Add clip") grupa se ne razvlaci preko cele
   forme - ostaje iste sirine kao jedna od dve na „Time windows". */
.time-row .time-set:only-child {
  flex: 0 1 50%;
  min-width: 220px;
}

/* kutija sa vremenom popunjava ostatak grupe, pa je vreme na istom mestu u obe */
.time-set .time-field {
  flex: 1;
  min-width: 0;
}

.form .time-set-button:hover {
  background: var(--accent);
  color: var(--accent-text);
  opacity: 1;
}

/* Kutija sa vremenom: izgleda kao ispis, ne kao polje za unos. `readonly` je
   na samom polju - ovo je samo da se i vidi da se u njega ne kuca. */
.form .time-field input.time-box {
  width: 100%;
  padding: 0;
  font-size: 23px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  text-align: center;
  background: none;
  color: var(--text);
  border: none;
  pointer-events: none;
  user-select: none;
}

/* „prelazi ponoc" u tabeli - napomena, ne greska */
.overnight-note {
  color: var(--amber);
  font-weight: 600;
}

/* kad sat otvara dugme, oslonac je grupa oko polja, ne polje samo */
.time-field-flat { position: static; }

.time-box::placeholder {
  color: var(--muted);
  font-weight: 400;
}

/* --- Trajanje opsega i dugme, u istom redu -------------------------------
   Bila su jedno ispod drugog, pa je forma bila visoka bez potrebe. Sad stoje
   na suprotnim krajevima jednog reda: dugme je poravnato sa desnom ivicom
   polja iznad njega, a razmak medju njima drzi `space-between`. */
.form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.form .form-actions button {
  align-self: auto;
  padding: 8px 22px;
  font-size: 14px;
}

/* Kutija sa trajanjem stoji UVEK, i prazna (`Duration: --`) - da se raspored
   ne pomera u trenutku kad se vreme izabere. */
.time-length {
  flex: 1;              /* sirinu daje red, ne tekst - kutija se nikad ne menja */
  min-width: 0;
  margin: 0;
  padding: 8px 12px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  background: var(--bg);
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 8px;
  /* i visina mora da ostane ista: duza poruka se ne prelama u dva reda */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Opseg koji prelazi u sledeci dan. Zuto kao ostala upozorenja koja NE
   zabranjuju - opseg preko ponoci je ispravan, samo se lako previdi. */
.time-length-overnight {
  background: var(--amber-bg);
  color: var(--amber);
  border-color: var(--amber);
  font-weight: 600;
}

/* --- Oblacic uz dugme ----------------------------------------------------
   Poruka o gresci je stajala u traci na vrhu strane i gurala ceo sadrzaj
   nadole - covek gleda u dugme, a stranica mu poskoci pod rukom. Oblacic
   LEBDI (`position: absolute`), pa ne pomera nista ispod sebe. */
.form-actions {
  position: relative;
}

.bubble {
  position: absolute;
  top: calc(100% + 12px);   /* ISPOD dugmeta: iznad je red sa „From"/„To", a
                               poruka ne sme da pokrije polja koja se popravljaju */
  right: 0;
  z-index: 30;
  max-width: 400px;
  padding: 12px 16px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  border: 1px solid;
  border-radius: 10px;
}

/* strelica ka dugmetu: dva trougla jedan preko drugog, da se vidi i ivica */
.bubble::before,
.bubble::after {
  content: "";
  position: absolute;
  bottom: 100%;
  right: 30px;
  border: 9px solid transparent;
}

.bubble::before { border-bottom-color: inherit; }

.bubble::after {
  margin-bottom: -1px;
  border-bottom-color: inherit;
}

.bubble-error {
  background: var(--red-bg);
  color: var(--red);
  border-color: var(--red);
}

.bubble-error::after { border-bottom-color: var(--red-bg); }

.bubble-ok {
  background: var(--green-bg);
  color: var(--green);
  border-color: var(--green);
}

.bubble-ok::after { border-bottom-color: var(--green-bg); }

/* Sirine kolona zadaje TABELA, ne sadrzaj (`table-layout: fixed`) - inace duzi
   naziv gurne ostale kolone, pa granice poskacu cim se doda jos jedan red.
   Zbir mora da bude 100%. */
/* Sirine kolona zadaje TABELA, ne sadrzaj - inace duzi naziv gurne ostale
   kolone, pa granice poskacu cim se doda jos jedan red. Same vrednosti se
   RACUNAJU u `windows.js` (`fitColumns`), u pikselima, iz najsireg sto u koloni
   stoji: ukucan broj bi zastareo prvi put kad se neki tekst promeni.

   Ovde NEMA `min-width` po koloni - uz `table-layout: fixed` ga browser
   ignorise (provereno), pa bi stajao kao obecanje koje se ne ispunjava.

   `measuring` je stanje u kom se meri: tabela se nakratko razvuce po sadrzaju,
   bez prelamanja. */
.table-even { table-layout: fixed; }

.table-even.measuring {
  table-layout: auto;
  width: auto;
  min-width: 0;
  white-space: nowrap;
}

/* vreme i dugme se nikad ne prelamaju u dva reda */
.table-even td:nth-child(2),
.table-even td:nth-child(3),
.table-even td:last-child { white-space: nowrap; }

/* dugme u poslednjoj koloni stoji na sredini svog polja */
.table-even th:last-child,
.table-even td:last-child { text-align: center; }

/* --- Prozorce za potvrdu -------------------------------------------------
   Zamena za browserovo `confirm()`, koje izgleda kao poruka iz drugog programa
   i ne moze da kaze cega tacno nestaje. */
.confirm-dialog {
  max-width: 420px;
  padding: 22px 24px 18px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.confirm-dialog::backdrop {
  background: var(--scrim);
}

.confirm-dialog p {
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.45;
}

.confirm-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.confirm-buttons button {
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  border-radius: 6px;
  cursor: pointer;
}

/* „Cancel" je ono na cemu stoji fokus - obicno dugme, bez boje */
.confirm-cancel {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
}

.confirm-cancel:hover { border-color: var(--accent); }

/* radnja koja stvarno brise - crvena, kao i ostala brisanja u programu */
.confirm-go {
  background: var(--red);
  color: var(--surface);
  border: 1px solid var(--red);
}

.confirm-go:hover { opacity: .9; }

/* --- Bocni meni ----------------------------------------------------------
   Stavke su ranije stajale u gornjoj traci, jedna do druge. Tamo su rasle u
   sirinu i gurale sve ostalo; ovde ih ima koliko treba.

   Meni LEBDI preko sadrzaja i ne ucestvuje u rasporedu stranice. Prva izvedba
   ga je gurala u stranu, pa je sadrzaj poskakivao na svako otvaranje - a to je
   tacno ono sto se najvise primeti i najvise smeta. Ovako stranica izgleda
   identicno bez obzira da li je meni otvoren. */
/* Sadrzaj se centrira kao i pre, ali nikad ne zalazi pod traku sa ikonicama:
   `max()` uzima vecu od dve mere - koliko treba za centriranje, ili sirinu
   trake. Traka je uvek iste sirine, pa se ovaj razmak nikad ne menja. */
body.has-sidenav main {
  margin-left: max(var(--sidenav-rail), calc((100% - 1100px) / 2));
  margin-right: auto;
}

.sidenav {
  position: fixed;
  top: var(--topnav-height);
  left: 0;
  bottom: 0;
  z-index: 45;
  width: var(--sidenav-rail);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 8px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  overflow-x: hidden;
  overflow-y: auto;

  /* Sirina se menja samo kod menija - a on je `fixed`, pa raspored stranice
     ne oseca nista. Sadrzaj ostaje tacno gde je bio i dok je meni otvoren. */
  transition: width .18s ease;
}

:root[data-sidenav="open"] .sidenav { width: var(--sidenav-width); }

/* naziv se vidi samo dok je meni rasklopljen; na traci ga zamenjuje `title` */
.nav-label { display: none; }

:root[data-sidenav="open"] .nav-label { display: inline; }

.sidenav a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  border-radius: 8px;
  white-space: nowrap;   /* naziv se ne prelama dok se meni sklapa */
}

.sidenav a:hover { background: var(--gray-bg); }

/* stranica na kojoj se covek trenutno nalazi */
.sidenav a.current {
  background: var(--blue-bg);
  color: var(--accent);
}

.nav-icon {
  flex: none;
  width: 20px;
  height: 20px;
}

/* „Your account" ide na dno menija, odvojeno od ostalih stavki */
.sidenav #nav-account { margin-top: auto; }

/* Hamburger stoji tacno iznad ikonica u meniju, i tu ostaje bez obzira da li je
   meni sklopljen ili raspoklopljen - u traci je, a traka se ne pomera.
   Racun: ikonice u meniju su uvucene 8px (razmak menija) + 10px (razmak stavke)
   i siroke su 20px, dakle sredina im je na 28px. Dugme je siroko 36px, pa mu
   sredina pada na `margin-left + 18` - odatle 10px. */
.sidenav-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  margin-left: 10px;
  width: 36px;
  height: 32px;
  padding: 0;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
}

.sidenav-toggle:hover { border-color: var(--accent); }

/* naziv stranice, odmah uz hamburger */
.nav-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Naslov stranice i poruka u istom redu. Poruka je ranije stajala iznad
   sadrzaja i gurala ga nadole svaki put kad se pojavi - a pojavljuje se posle
   svake izmene, taman kad covek gleda red koji je menjao. */
.page-head {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.page-head h1 { margin: 0; }

/* bez ovoga bi razmak oko poruke svejedno povecao visinu reda */
.page-head #messages p {
  margin: 0;
  padding: 6px 12px;
  font-size: 13px;
}

/* --- Stranica Users -------------------------------------------------------
   Svaki zapis je JEDAN red. Objasnjenja koja su ranije stajala u celijama
   razvlacila su red na tri reda teksta i trosila mesto koje treba kolonama -
   sad stoje u traci na dnu. */
.users-table th,
.users-table td { white-space: nowrap; }

/* Svaka kolona osim „Email" se skuplja na svoj sadrzaj.
   `width: 1%` uz `nowrap` je stara i pouzdana stvar: trazena sirina je
   besmisleno mala, pa je sadrzaj nadjaca i celija stane tacno oko njega -
   a sve sto pretekne ode koloni bez zadate sirine, dakle „Email".
   Probano i sa `table-layout: fixed` + `min-width`: Chrome tamo `min-width`
   po celiji IGNORISE, sto je i bio razlog da se ovde ide ovako. */
.users-table th.snug,
.users-table td.snug { width: 1%; }

/* brojevi se citaju u koloni, pa idu desno i jednosirinski */
.users-table td.number {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Zaglavlje se poravnava po KLASI, ne po polozaju kolone. Ranije je stajalo
   `nth-child(5..7)` (za YT/IG/TT na stranici Users) - pa je na svakoj drugoj
   tabeli sa istom klasom peta kolona ispadala desno bez razloga. */
.users-table th.number { text-align: right; }

/* --- Zaglavlje po kom se sortira ------------------------------------------ */

.users-table th.sortable {
  cursor: pointer;
  user-select: none;   /* dvoklik inace oboji naslov umesto da sortira dvaput */
}

.users-table th.sortable:hover { color: var(--accent); }

/* Fokus mora da se VIDI: zaglavlje se obilazi tastaturom, a bez ovoga se ne zna
   gde si. Ide unutra (`-2px`), da ga susedna celija ne odsece. */
.users-table th.sortable:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.users-table th.sorted { color: var(--accent); }

/* Isto sortiranje radi i na tabeli rasporeda (`js/sorting.js`). */
.schedule th.sortable {
  cursor: pointer;
  user-select: none;
}

.schedule th.sortable:hover { color: var(--accent); }
.schedule th.sorted { color: var(--accent); }

.schedule th.sortable:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* Red koji stoji umesto tabele kad nema nijednog zapisa. Zaglavlje se zadrzava
   (da se vidi sta ce stranica pokazivati), pa poruka ide preko svih kolona. */
.empty-row {
  padding: 28px 12px;
  text-align: center;
  color: var(--muted);
}

/* Strelica drzi svoje mesto i kad je prazna - inace se cela kolona pomeri za
   sirinu strelice cim se po njoj sortira. */
.sort-arrow {
  display: inline-block;
  width: 1em;
  margin-left: 2px;
  font-size: 12px;
}

/* Padajuci meni sa ulogom, obojen prema stanju.
   Boja NIJE ukras: spisak se cita odozgo nadole i oko trazi ono sto odudara -
   crveni red se nadje pre nego sto se procita ijedno slovo. */
.role-select {
  font-weight: 600;
  border-width: 1px;
  border-style: solid;
  border-radius: 999px;
  padding: 4px 10px;
}

.role-inactive { background: var(--red-bg); color: var(--red); border-color: var(--red); }
.role-waiting { background: var(--amber-bg); color: var(--amber); border-color: var(--amber); }
.role-active { background: var(--green-bg); color: var(--green); border-color: var(--green); }

/* administrator: vidi se, ne menja se */
.role-admin {
  background: var(--gray-bg);
  color: var(--gray-text);
  border-color: var(--border);
}

/* --- Traka sa bojama uloga, zalepljena za dno ------------------------------
   JEDAN red, iste visine kao gornja traka - ista promenljiva, da ostanu
   vezane. Ranije je nosila sedam objasnjenja, rasla do `30vh` i uzimala
   trecinu stranice na tekst koji se procita jednom; sve to je sad u
   prozorcetu iza dugmeta „?" pored naslova. */
.legend {
  position: fixed;
  left: var(--sidenav-rail);
  right: 0;
  bottom: 0;
  z-index: 30;
  height: var(--topnav-height);
  padding: 0 24px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
}

.legend-inner {
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  gap: 24px;
  font-size: 13px;
  color: var(--muted);
}

.legend-item b:not(.dot) { color: var(--text); }

/* tackica u boji uloge, da se traka cita zajedno sa tabelom */
.dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 6px;
  border-radius: 50%;
  vertical-align: baseline;
}

.dot-inactive { background: var(--red); }
.dot-waiting { background: var(--amber); }
.dot-active { background: var(--green); }

/* sadrzaj ne sme da zavrsi ispod trake - tacno njena visina plus razmak */
body:has(.legend) main { padding-bottom: calc(var(--topnav-height) + 24px); }

/* --- Dugme „?" pored naslova i prozorce koje otvara ------------------------ */

.help-button {
  width: 22px;
  height: 22px;
  padding: 0;
  flex: none;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--bg);
  color: var(--muted);
  font: 600 13px/1 inherit;
  font-family: inherit;
  cursor: pointer;
  /* naslov i dugme sedaju na istu osnovnu liniju, bez ovoga dugme „pluta" */
  align-self: center;
}

.help-button:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.info-dialog {
  max-width: 560px;
  /* Sa deset kolona objasnjenja su prerasla ekran i prozorce je pocinjalo na
     sredini teksta. Skrol ide UNUTRA, a ne na stranici. */
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  padding: 22px 24px 18px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
}

/* dugme „Close" ostaje na dnu vidljivog dela, ne bezi u skrol */
.info-dialog .confirm-buttons {
  position: sticky;
  bottom: -18px;
  padding: 10px 0 0;
  background: var(--surface);
}

.info-dialog::backdrop { background: var(--scrim); }

.info-dialog h2 {
  margin: 0 0 14px;
  font-size: 17px;
  text-indent: 0;   /* `main h2` uvlaci naslove odeljaka, ovde to ne treba */
}

.info-dialog dl { margin: 0 0 18px; }

.info-dialog dt {
  margin-top: 12px;
  font-weight: 600;
  font-size: 14px;
}

.info-dialog dt:first-child { margin-top: 0; }

.info-dialog dd {
  margin: 3px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
}

/* Red koji se klikce (spisak kvarova - klik otvara pun detalj). */
tr.clickable { cursor: pointer; }
tr.clickable:hover td { background: var(--bg); }