/* UOSS portal — projektni sloj preko Bootstrap-a 5.3.3.
 *
 * Učitava se POSLE bootstrap.min.css, fonts.css i tokens.css.
 * Ne sadrži ni jedan hex literal — sve dolazi iz tokens.css.
 *
 * STRATEGIJA: Bootstrap klase se NE preimenuju (.btn, .card, .alert, .table,
 * .messages, .errorlist, .form-control ostaju). Retema se preko njegovih CSS
 * varijabli. Time (a) ne diramo 92 template-a bez potrebe i (b) preživljavaju
 * e2e specovi koji lociraju po CSS klasi — vidi docs/redesign-plan.md §2.1.
 *
 * KRITIČAN DETALJ koji buduće sesije obično promaše: u Bootstrap-u 5.3
 * `.btn-primary` NE ČITA `--bs-primary`. Svaka varijanta postavlja LOKALNE
 * varijable (--bs-btn-bg, --bs-btn-hover-bg, ...). Retema se PO VARIJANTI.
 * Isto važi za `.alert-*` i `.table`.
 *
 * Bootstrap utility klase (.text-muted, .bg-success, ...) nose `!important`,
 * pa ih override zahteva takođe `!important`. To nije nemar.
 *
 * Layout (sidebar, page header, offcanvas) NE ide ovde u Fazi 1 — dolazi u
 * Fazi 3 uz base.html v2.
 */

/* ════════════════════════════════════════════════════════════════════════
   1. Globalno mapiranje na Bootstrap
   ════════════════════════════════════════════════════════════════════════ */

:root {
  /* Tipografija i telo */
  --bs-font-sans-serif: var(--uoss-font-sans);
  --bs-font-monospace: var(--uoss-font-mono);
  --bs-body-font-family: var(--uoss-font-sans);
  --bs-body-font-size: var(--uoss-fs-base);
  --bs-body-line-height: var(--uoss-lh-base);
  --bs-body-color: var(--uoss-ink);
  --bs-body-bg: var(--uoss-bg);
  --bs-emphasis-color: var(--uoss-ink);
  --bs-secondary-color: var(--uoss-muted);   /* nosi .text-muted (70 upotreba) */

  /* Ivice i radius */
  --bs-border-color: var(--uoss-line);
  --bs-border-color-translucent: var(--uoss-line);
  --bs-border-radius: var(--uoss-r-sm);
  --bs-border-radius-sm: var(--uoss-r-sm);
  --bs-border-radius-lg: var(--uoss-r-md);

  /* Linkovi */
  --bs-link-color: var(--uoss-primary);
  --bs-link-color-rgb: var(--uoss-primary-rgb);
  --bs-link-hover-color: var(--uoss-primary-hover);
  --bs-link-hover-color-rgb: var(--uoss-primary-hover-rgb);

  /* Utility rgb trojke — nose .text-*, .bg-*, .border-*. */
  --bs-primary-rgb: var(--uoss-primary-rgb);
  --bs-success-rgb: var(--uoss-success-rgb);
  --bs-danger-rgb: var(--uoss-danger-rgb);   /* nosi .text-danger (30×)     */
  --bs-warning-rgb: var(--uoss-warning-rgb);
  --bs-info-rgb: var(--uoss-info-rgb);
  --bs-secondary-rgb: var(--uoss-muted-rgb);

  /* Focus ring */
  --bs-focus-ring-color: rgba(var(--uoss-focus-rgb), 0.35);
  --bs-focus-ring-width: 2px;
}

/* ════════════════════════════════════════════════════════════════════════
   2. Bazna tipografija
   ════════════════════════════════════════════════════════════════════════ */

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
.h1 {
  font-size: var(--uoss-fs-2xl);
  line-height: var(--uoss-lh-heading);
  font-weight: var(--uoss-fw-bold);
  letter-spacing: var(--uoss-ls-tight);
}

h2,
.h2 {
  font-size: var(--uoss-fs-xl);
  line-height: var(--uoss-lh-heading);
  font-weight: var(--uoss-fw-semibold);
}

h3,
.h3 {
  font-size: var(--uoss-fs-2xl);
  line-height: var(--uoss-lh-heading);
  font-weight: var(--uoss-fw-bold);
  letter-spacing: var(--uoss-ls-tight);
}

h4,
.h4,
h5,
.h5 {
  font-size: var(--uoss-fs-lg);
  line-height: var(--uoss-lh-heading);
  font-weight: var(--uoss-fw-semibold);
}

h6,
.h6 {
  font-size: var(--uoss-fs-base);
  font-weight: var(--uoss-fw-semibold);
}

/* `.h3` je u ovom projektu de-facto naslov stranice (92 template-a koriste
 * `<h1 class="h3">`), pa mora izgledati kao naslov stranice — ne kao h3.    */

small,
.small {
  font-size: var(--uoss-fs-sm);
}

code,
kbd,
samp,
pre {
  font-family: var(--uoss-font-mono);
}

/* Identifikatori i novčani iznosi — IBM Plex Mono je REZERVISAN za ovo.
 * Upotreba: <span class="uoss-id">{{ clan.legitimacija }}</span>            */
.uoss-id,
.uoss-amount {
  font-family: var(--uoss-font-mono);
  font-size: 0.95em;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.uoss-amount {
  font-weight: var(--uoss-fw-medium);
}

/* ════════════════════════════════════════════════════════════════════════
   3. Signature: levi marker („linijski sudija")
   ════════════════════════════════════════════════════════════════════════
   Jedini vizuelni nosilac stanja „ovde si". Tri mesta i nigde više:
   aktivna sidebar stavka, naslov stranice, aktivni/fokusirani red tabele.  */

.uoss-marker {
  position: relative;
  padding-left: var(--uoss-s3);
}

.uoss-marker::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--uoss-marker-w);
  background: var(--uoss-primary);
  border-radius: 0 2px 2px 0;
}

/* ════════════════════════════════════════════════════════════════════════
   4. Fokus — vidljiv na svemu interaktivnom
   ════════════════════════════════════════════════════════════════════════ */

:focus-visible {
  outline: var(--bs-focus-ring-width) solid var(--uoss-focus);
  outline-offset: 1px;
}

/* Bootstrap-ov box-shadow focus na dugmadima/input-ima zamenjujemo outline-om
 * — outline se vidi i na ispunjenom primarnom dugmetu, box-shadow ne.       */
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible,
.page-link:focus-visible,
.dropdown-item:focus-visible {
  box-shadow: none;
  outline: var(--bs-focus-ring-width) solid var(--uoss-focus);
  outline-offset: 1px;
}

/* ════════════════════════════════════════════════════════════════════════
   5. Dugmad — hijerarhija iz dizajn sistema §6.1
   ════════════════════════════════════════════════════════════════════════ */

.btn {
  --bs-btn-font-size: var(--uoss-fs-base);
  --bs-btn-font-weight: var(--uoss-fw-semibold);
  --bs-btn-padding-y: var(--uoss-s2);
  --bs-btn-padding-x: var(--uoss-s4);
  --bs-btn-border-radius: var(--uoss-r-sm);
  --bs-btn-focus-shadow-rgb: var(--uoss-focus-rgb);
}

.btn-sm {
  --bs-btn-font-size: var(--uoss-fs-sm);
  --bs-btn-padding-y: var(--uoss-s1);
  --bs-btn-padding-x: var(--uoss-s3);
}

/* Primarna — najviše JEDNA po stranici. */
.btn-primary {
  --bs-btn-color: var(--uoss-on-primary);
  --bs-btn-bg: var(--uoss-primary);
  --bs-btn-border-color: var(--uoss-primary);
  --bs-btn-hover-color: var(--uoss-on-primary);
  --bs-btn-hover-bg: var(--uoss-primary-hover);
  --bs-btn-hover-border-color: var(--uoss-primary-hover);
  --bs-btn-active-color: var(--uoss-on-primary);
  --bs-btn-active-bg: var(--uoss-primary-hover);
  --bs-btn-active-border-color: var(--uoss-primary-hover);
  --bs-btn-disabled-color: var(--uoss-on-primary);
  --bs-btn-disabled-bg: var(--uoss-line-strong);
  --bs-btn-disabled-border-color: var(--uoss-line-strong);
}

/* Sekundarna — sve ostale radnje. */
.btn-outline-secondary,
.btn-secondary {
  --bs-btn-color: var(--uoss-ink-2);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--uoss-control-border);
  --bs-btn-hover-color: var(--uoss-ink);
  --bs-btn-hover-bg: var(--uoss-subtle);
  --bs-btn-hover-border-color: var(--uoss-muted);
  --bs-btn-active-color: var(--uoss-ink);
  --bs-btn-active-bg: var(--uoss-subtle);
  --bs-btn-active-border-color: var(--uoss-muted);
  --bs-btn-disabled-color: var(--uoss-line-strong);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--uoss-line);
}

.btn-outline-primary {
  --bs-btn-color: var(--uoss-primary);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--uoss-primary);
  --bs-btn-hover-color: var(--uoss-on-primary);
  --bs-btn-hover-bg: var(--uoss-primary);
  --bs-btn-hover-border-color: var(--uoss-primary);
  --bs-btn-active-color: var(--uoss-on-primary);
  --bs-btn-active-bg: var(--uoss-primary-hover);
  --bs-btn-active-border-color: var(--uoss-primary-hover);
  --bs-btn-disabled-color: var(--uoss-line-strong);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--uoss-line);
}

/* Destruktivna, dva različita konteksta — razlika je stvarna, ne kozmetička.
 *
 * `.btn-outline-danger` = destruktivna akcija u REDU TABELE ili toolbar-u.
 * Obris, jer ispunjeno crveno dugme u listi od 40 redova vuče pogled na
 * najopasniju radnju umesto na podatke. Ono samo VODI na potvrdu.
 *
 * `.btn-danger` = POTVRĐENA destruktivna akcija na posebnoj strani za potvrdu.
 * Ispuna, jer je tamo to primarna (i jedina prava) akcija stranice — korisnik
 * je već pročitao šta briše. Sve 13 upotreba u projektu su tačno to:
 * `*_confirm_delete.html` submit dugme („Obriši", „Deaktiviraj", „Oduzmi").
 * Svođenje na obris bi oslabilo baš ono dugme zbog kog stranica postoji.     */
.btn-danger {
  --bs-btn-color: var(--uoss-on-primary);
  --bs-btn-bg: var(--uoss-danger);
  --bs-btn-border-color: var(--uoss-danger);
  --bs-btn-hover-color: var(--uoss-on-primary);
  --bs-btn-hover-bg: var(--uoss-danger-hover);
  --bs-btn-hover-border-color: var(--uoss-danger-hover);
  --bs-btn-active-color: var(--uoss-on-primary);
  --bs-btn-active-bg: var(--uoss-danger-hover);
  --bs-btn-active-border-color: var(--uoss-danger-hover);
  --bs-btn-disabled-color: var(--uoss-on-primary);
  --bs-btn-disabled-bg: var(--uoss-line-strong);
  --bs-btn-disabled-border-color: var(--uoss-line-strong);
}

.btn-outline-danger {
  --bs-btn-color: var(--uoss-danger);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--uoss-danger);
  --bs-btn-hover-color: var(--uoss-on-primary);
  --bs-btn-hover-bg: var(--uoss-danger);
  --bs-btn-hover-border-color: var(--uoss-danger);
  --bs-btn-active-color: var(--uoss-on-primary);
  --bs-btn-active-bg: var(--uoss-danger-hover);
  --bs-btn-active-border-color: var(--uoss-danger-hover);
  --bs-btn-disabled-color: var(--uoss-line-strong);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--uoss-line);
}

/* Tekstualna — Odustani, Nazad. */
.btn-link {
  --bs-btn-color: var(--uoss-primary);
  --bs-btn-hover-color: var(--uoss-primary-hover);
  --bs-btn-font-weight: var(--uoss-fw-normal);
  --bs-btn-padding-x: var(--uoss-s2);
  text-decoration: none;
}

.btn-link:hover {
  text-decoration: underline;
}

/* Statusna boja NIJE boja radnje — ove varijante se svode na sekundarnu.
 * (Trenutno po jedna pojava; uklanjaju se iz template-a u Fazi 4.)          */
.btn-outline-warning,
.btn-outline-success,
.btn-outline-info {
  --bs-btn-color: var(--uoss-ink-2);
  --bs-btn-border-color: var(--uoss-control-border);
  --bs-btn-hover-color: var(--uoss-ink);
  --bs-btn-hover-bg: var(--uoss-subtle);
  --bs-btn-hover-border-color: var(--uoss-muted);
}

/* ════════════════════════════════════════════════════════════════════════
   6. Tabela — glavna komponenta portala (dizajn sistem §6.2)
   ════════════════════════════════════════════════════════════════════════ */

.table {
  --bs-table-color: var(--uoss-ink);
  --bs-table-bg: var(--uoss-surface);
  --bs-table-border-color: var(--uoss-line);
  --bs-table-striped-color: var(--uoss-ink);
  --bs-table-striped-bg: var(--uoss-subtle);
  --bs-table-hover-color: var(--uoss-ink);
  --bs-table-hover-bg: var(--uoss-primary-tint);
  margin-bottom: 0;
}

/* Oznaka kolone: mala, uppercase, prigušena — glava tabele ne takmiči se
 * sa podacima za pažnju.                                                   */
.table > thead > tr > th {
  font-size: var(--uoss-fs-xs);
  font-weight: var(--uoss-fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--uoss-ls-label);
  color: var(--uoss-muted);
  background-color: var(--uoss-bg);
  border-bottom: 1px solid var(--uoss-line-strong);
  white-space: nowrap;
  vertical-align: bottom;
}

/* Sortabilno zaglavlje kolone. Nov obrazac — do sada nijedan `<th>` u portalu
 * nije bio klikabilan. Link nasleđuje tipografiju zaglavlja (mala verzalna
 * oznaka), pa se NE sme bojiti kao običan link: kolona koja izgleda kao link
 * takmiči se za pažnju sa podacima, a cela glava tabele je namerno prigušena. */
.uoss-th-sort {
  display: inline-flex;
  align-items: center;
  gap: var(--uoss-s1);
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-decoration: none;
}

.uoss-th-sort:hover {
  color: var(--uoss-ink-2);
  text-decoration: underline;
}

/* Aktivna kolona je jedina tamna — tako se u glavi tabele vidi po čemu je
 * spisak uređen, bez dodatnog teksta.                                        */
.uoss-th-sort.is-active {
  color: var(--uoss-ink);
}

/* Sprite nema `chevron-up`/`chevron-down`, pa se `chevron-right` rotira:
 * -90° = rastuće, +90° = opadajuće. Isti trik kao chevron akordeona u §14.   */
/* Strelica postoji na SVAKOJ sortabilnoj koloni, ali je providna dok kolona nije
 * aktivna ili pod mišem. Sedam stalno vidljivih strelica je šum u glavi tabele;
 * nula strelica je nevidljiva mogućnost — korisnik ne može da zna da je zaglavlje
 * klikabilno. Ovako glava ostaje mirna, a mogućnost se otkriva pri prelasku mišem.
 * `opacity`, NE `visibility`: promena širine pri hover-u bi pomerala tekst.    */
.uoss-th-sort-icon {
  transform: rotate(-90deg);
  opacity: 0;
}

.uoss-th-sort:hover .uoss-th-sort-icon {
  opacity: 0.55;
}

.uoss-th-sort.is-active .uoss-th-sort-icon {
  opacity: 1;
}

/* Ćelija koja se NE prelama. Za kratke, atomarne vrednosti — ime i prezime,
 * oznaka OSO, datum — gde prelom pravi dvo/trored i naduva visinu CELOG reda,
 * pa gusta tabela izgubi red-po-red ritam. Tabela je u `.table-responsive`
 * omotaču, pa višak širine skroluje umesto da lomi tekst.                    */
.uoss-nowrap {
  white-space: nowrap;
}

[aria-sort="descending"] .uoss-th-sort-icon {
  transform: rotate(90deg);
}

.table > tbody > tr > td,
.table > tbody > tr > th {
  font-size: var(--uoss-fs-td);
  line-height: var(--uoss-lh-table);
  /* Poravnanje cifara u koloni — bez ovoga je skeniranje kolona
   * „Datum i vreme" i „Iznos" naporno.                                     */
  font-variant-numeric: tabular-nums;
}

/* Hover na svakoj tabeli, ne samo na `.table-hover` (nijedan template ga ne
 * koristi). Zebra ostaje, ali je tiha — dva sloja se ne sukobljavaju jer je
 * hover jasno tintovan a zebra skoro neprimetna.
 *
 * MORA se raditi preko `--bs-table-*-state`, NE preko `background-color`.
 * Bootstrap 5.3 boji ćelije kroz `box-shadow: inset 0 0 0 9999px var(
 * --bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg)))`.
 * Direktan `background-color` bi ostao ISPOD te inset senke, pa hover na
 * neparnim (zebra) redovima ne bi bio vidljiv. `-state` je i po specifičnosti
 * prvi u tom fallback lancu, pa nadjačava zebru — što je i cilj.
 * (`--bs-table-accent-bg` je legacy 5.2 ime; u 5.3 je zadnji fallback.)     */
.table > tbody > tr:hover > * {
  --bs-table-color-state: var(--bs-table-hover-color);
  --bs-table-bg-state: var(--bs-table-hover-bg);
}

/* Aktivan / fokusiran red — signature marker na prvoj ćeliji. */
.table > tbody > tr:focus-within > td:first-child {
  position: relative;
}

.table > tbody > tr:focus-within > td:first-child::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--uoss-marker-w);
  background: var(--uoss-primary);
}

/* Kolona akcija. */
.table .text-end {
  white-space: nowrap;
}

.table-responsive {
  border: 1px solid var(--uoss-line);
  border-radius: var(--uoss-r-md);
  background: var(--uoss-surface);
}

/* ─── 6.1 Ikonično dugme u koloni akcija + tooltip ─────────────────────────
 * Kolona akcija sa četiri tekstualna dugmeta („Detalji", „OSO funkcije",
 * „Izmeni", „Deaktiviraj") je šira od svih kolona sa podacima zajedno — radnje
 * nadglasavaju sadržaj zbog kog tabela postoji. Ikonica vraća taj odnos.
 *
 * ZAŠTO CSS tooltip a ne Bootstrap: sedam spiskova se re-renderuje kroz htmx
 * (`hx-swap`), a Bootstrap tooltip je JS instanca vezana za konkretan DOM čvor
 * — posle svakog swap-a tražio bi re-init na `htmx:afterSwap`. Pseudo-element
 * nema stanje koje swap može da izgubi. (U projektu ni ne postoji nijedna
 * Bootstrap tooltip inicijalizacija, pa `title` sam po sebi ne bi ni radio kao
 * tooltip, samo kao sporo nativno oblače.)
 *
 * PRISTUPAČNOST: tooltip je DEKORACIJA. Ime radnje nosi `aria-label` na samom
 * dugmetu, sa nepromenjenim tekstom — sadržaj pseudo-elementa čitači ekrana ne
 * izlažu pouzdano, a `getByRole(name:)` u e2e testovima poredi baš pristupačno
 * ime. Zato: `aria-label` i `data-uoss-tip` uvek nose ISTI string.            */

.uoss-btn-icon {
  position: relative; /* sidro za ::before/::after tooltipa */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* `.btn-sm` daje horizontalni `--uoss-s3` a vertikalni `--uoss-s1`; oko
   * kvadratne ikonice to pravi izduženo dugme. Jednak x/y padding → kvadrat. */
  padding: var(--uoss-s2);
  /* Ikona je 1em, pa veličinu dugmeta i ikone diktira font-size. `--uoss-fs-sm`
   * iz `.btn-sm` dao bi 13px ikonicu i pretesnu metu za prst.                 */
  --bs-btn-font-size: var(--uoss-fs-base);
  line-height: 1;
}

/* Balončić i strelica dele skriveno stanje i prelaz.
 * `transition` se NE gasi ovde pod `prefers-reduced-motion` — globalno pravilo
 * u §16 već hvata `*::before` i `*::after`.                                   */
.uoss-btn-icon[data-uoss-tip]::before,
.uoss-btn-icon[data-uoss-tip]::after {
  position: absolute;
  bottom: 100%;
  z-index: 3;
  opacity: 0;
  visibility: hidden;
  /* Balončić prekriva susedni red; bez ovoga bi pojeo klik na dugme ispod. */
  pointer-events: none;
  transition: opacity 0.12s ease-in;
}

.uoss-btn-icon[data-uoss-tip]::after {
  content: attr(data-uoss-tip);
  /* Poravnanje UZ DESNU ivicu dugmeta, ne centrirano: kolona akcija je krajnje
   * desna u tabeli, pa bi centriran balončić izašao iz `.table-responsive`
   * omotača (`overflow-x: auto` ga odseca) i iz ekrana. Ovako raste ulevo, ka
   * sredini tabele — uvek u vidnom polju.
   * Nagore, a ne nadole: iznad prvog reda stoji `<thead>`, pa balončić ostaje
   * unutar omotača i za prvi red; ispod poslednjeg reda nema ničega.          */
  right: 0;
  margin-bottom: var(--uoss-s1); /* mesto za strelicu */
  padding: var(--uoss-s1) var(--uoss-s2);
  border-radius: var(--uoss-r-sm);
  background: var(--uoss-ink);
  color: var(--uoss-surface);
  font-size: var(--uoss-fs-xs);
  font-weight: var(--uoss-fw-normal);
  line-height: var(--uoss-lh-tight);
  letter-spacing: normal; /* dugme u `<thead>` kontekstu ne sme da nasledi ls */
  text-transform: none;
  white-space: nowrap;
}

/* Strelica: prazan okvir 8×8 sa obojenom gornjom ivicom. Centrirana na dugme
 * (a ne na balončić) — pokazuje na metu, ne na sebe.                          */
.uoss-btn-icon[data-uoss-tip]::before {
  content: "";
  right: calc(50% - var(--uoss-s1));
  border: var(--uoss-s1) solid transparent;
  border-top-color: var(--uoss-ink);
}

/* `:focus-visible`, ne `:focus` — tooltip mora da postoji i za tastaturu, ali
 * ne sme da iskoči na klik mišem (fokus posle klika bi ga ostavio zalepljenog). */
.uoss-btn-icon[data-uoss-tip]:hover::before,
.uoss-btn-icon[data-uoss-tip]:hover::after,
.uoss-btn-icon[data-uoss-tip]:focus-visible::before,
.uoss-btn-icon[data-uoss-tip]:focus-visible::after {
  opacity: 1;
  visibility: visible;
}

/* Dugme „kopiraj u clipboard" (static/js/clipboard.js) — sekundarna radnja
 * UZ vrednost u ćeliji, ne u koloni akcija. Zato je bez okvira i manje od
 * ostalih ikonica-dugmadi: stoji u prigušenom redu teksta i ne sme da ga
 * nadjača. Tooltip raste UDESNO: dugme je u PRVOJ koloni, pa bi podrazumevani
 * balončić (raste ulevo, vidi gore) odsekao `.table-responsive` omotač.       */
.uoss-btn-copy {
  --bs-btn-font-size: var(--uoss-fs-xs);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-hover-bg: var(--uoss-bg);
  padding: var(--uoss-s1);
  color: var(--uoss-muted);
}

.uoss-btn-copy:hover,
.uoss-btn-copy:focus-visible {
  color: var(--uoss-ink);
}

.uoss-btn-copy.is-copied {
  color: var(--uoss-success);
}

.uoss-btn-copy[data-uoss-tip]::after {
  right: auto;
  left: 0;
}

/* Statusno dugme M4 u koloni akcija imenika (design-system §6.6c — NAMERNI
 * izuzetak od §6.1 „statusna boja nije boja radnje"): boja ovde NOSI stanje
 * dostave, a tekst „M4" + tooltip/aria-label nose značenje (§2.3). Zeleno
 * (`--ok`) je link na zaštićen PDF; crveno (`--missing`) je `<span>` bez radnje,
 * fokusabilan samo zbog tooltipa. Hover blago potamni tint (color-mix nad
 * postojećim tokenima — bez novih hex literala).                               */
.uoss-btn-m4 {
  --bs-btn-font-size: var(--uoss-fs-xs);
  padding: var(--uoss-s1) var(--uoss-s2);
  letter-spacing: 0.02em;
}

.uoss-btn-m4--ok {
  --bs-btn-color: var(--uoss-success);
  --bs-btn-bg: var(--uoss-success-tint);
  --bs-btn-border-color: var(--uoss-success);
  --bs-btn-hover-color: var(--uoss-success);
  --bs-btn-hover-bg: color-mix(in srgb, var(--uoss-success-tint), var(--uoss-success) 14%);
  --bs-btn-hover-border-color: var(--uoss-success);
  --bs-btn-active-color: var(--uoss-success);
  --bs-btn-active-bg: color-mix(in srgb, var(--uoss-success-tint), var(--uoss-success) 22%);
  --bs-btn-active-border-color: var(--uoss-success);
}

.uoss-btn-m4--missing {
  --bs-btn-color: var(--uoss-danger);
  --bs-btn-bg: var(--uoss-danger-tint);
  --bs-btn-border-color: var(--uoss-danger);
  --bs-btn-hover-color: var(--uoss-danger);
  --bs-btn-hover-bg: color-mix(in srgb, var(--uoss-danger-tint), var(--uoss-danger) 14%);
  --bs-btn-hover-border-color: var(--uoss-danger);
  cursor: default; /* nije radnja — samo stanje */
}

.uoss-btn-copy[data-uoss-tip]::before {
  right: auto;
  left: calc(50% - var(--uoss-s1));
}

/* Ćelija „Član" u imeniku: ime naglašeno, kontakt (mejl, telefon) ispod,
 * prigušeno. `nowrap` drži svaki red na jednoj liniji — ista logika kao
 * `.uoss-nowrap` za atomarne vrednosti.                                     */
.uoss-clan-cell__ime,
.uoss-clan-cell__kontakt {
  display: flex;
  align-items: center;
  gap: var(--uoss-s2);
  white-space: nowrap;
}

.uoss-clan-cell__kontakt {
  gap: var(--uoss-s1);
  color: var(--uoss-muted);
  font-size: var(--uoss-fs-sm);
  line-height: var(--uoss-lh-tight);
}

/* Tačkica statusa člana (design-system §6.6a). IZUZETAK od pravila „status
 * nikad samo obojena tačka": tekst statusa nosi visually-hidden span (čitač
 * ekrana) i `title` (miš) — vizuelno sama tačka, jer je u gustoj koloni
 * „Član" badge sa tekstom pretežak. Boje su postojeći semantički tokeni.     */
.uoss-status-dot {
  display: inline-block;
  flex-shrink: 0;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: var(--uoss-muted);
}

.uoss-status-dot--aktivan {
  background-color: var(--uoss-success);
}

.uoss-status-dot--mirovanje {
  background-color: var(--uoss-muted);
}

.uoss-status-dot--neaktivan {
  background-color: var(--uoss-danger);
}

/* ════════════════════════════════════════════════════════════════════════
   6.2 Pretraživ select (Tom Select)
   ════════════════════════════════════════════════════════════════════════
   Vendorovana `bootstrap5` tema već poklapa izgled sa `.form-select`, pa se
   ovde podešava samo ono što tema ne može da zna — širina u filter redu.

   Filteri stoje u `.col-auto`, koji se skuplja na sadržaj. Prazan multiselect
   ima samo placeholder, pa bi kontrola bila uža od svake svoje opcije i „skakala"
   pri svakom izboru. Minimalna širina to drži mirnim.                        */

.ts-wrapper {
  min-width: 14rem;
}

/* Fokusni prsten: tema ga crta kao `box-shadow`, a projekat svuda koristi
 * `outline` (§4) — bez ovoga bi pretraživ select bio jedina kontrola sa
 * drugačijim fokusom.                                                        */
.ts-wrapper.focus .ts-control {
  box-shadow: none;
  outline: var(--bs-focus-ring-width) solid var(--uoss-focus);
  outline-offset: 1px;
}

/* ════════════════════════════════════════════════════════════════════════
   7. Kartica — ivica, BEZ senke (senka ×10 na stranici pravi kašu)
   ════════════════════════════════════════════════════════════════════════ */

.card {
  --bs-card-bg: var(--uoss-surface);
  --bs-card-border-color: var(--uoss-line);
  --bs-card-border-radius: var(--uoss-r-md);
  --bs-card-inner-border-radius: var(--uoss-r-md);
  --bs-card-cap-bg: var(--uoss-bg);
  --bs-card-spacer-y: var(--uoss-s5);
  --bs-card-spacer-x: var(--uoss-s5);
  --bs-card-cap-padding-y: var(--uoss-s3);
  --bs-card-cap-padding-x: var(--uoss-s5);
  box-shadow: none;
}

.card-header {
  border-bottom-color: var(--uoss-line);
  font-weight: var(--uoss-fw-semibold);
}

/* ════════════════════════════════════════════════════════════════════════
   8. Forma (dizajn sistem §6.3)
   ════════════════════════════════════════════════════════════════════════
   Klase se u Fazi 2 dodaju widget-ima kroz django-widget-tweaks; ovde se
   stilizuju same klase.                                                    */

.form-label {
  font-size: var(--uoss-fs-sm);
  font-weight: var(--uoss-fw-semibold);
  color: var(--uoss-ink-2);
  margin-bottom: var(--uoss-s1);
}

/* `<legend class="form-label">` imenuje grupu radio/checkbox opcija u
 * `_field.html`. Bootstrap reboot legend-u daje `float: left`, `width: 100%` i
 * `font-size: calc(1.275rem + .3vw)` — bez ovog reseta pitanje bi bilo ogromno
 * i plutalo bi, pa bi tražilo clearfix. Font-size bi `.form-label` i sam
 * nadjačao specifičnošću, ali float i width ne bi.                           */
legend.form-label {
  float: none;
  width: auto;
  padding: 0;
  font-size: var(--uoss-fs-sm);
  line-height: inherit;
}

/* Grupa opcija: bez ivice fieldset-a, razmak nosi `wrap` klasa. */
fieldset > .form-check:last-child {
  margin-bottom: 0;
}

.form-control,
.form-select {
  font-size: var(--uoss-fs-base);
  color: var(--uoss-ink);
  background-color: var(--uoss-surface);
  border-color: var(--uoss-control-border);
  border-radius: var(--uoss-r-sm);
  padding: var(--uoss-s2) var(--uoss-s3);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--uoss-focus);
  box-shadow: none;
}

.form-control::placeholder {
  color: var(--uoss-muted);
  opacity: 1;
}

.form-control:disabled,
.form-select:disabled {
  background-color: var(--uoss-subtle);
  color: var(--uoss-muted);
}

.form-check-input {
  border-color: var(--uoss-control-border);
}

.form-check-input:checked {
  background-color: var(--uoss-primary);
  border-color: var(--uoss-primary);
}

.form-text {
  font-size: var(--uoss-fs-sm);
  color: var(--uoss-muted);
}

/* Oznaka obaveznog polja. */
.uoss-required {
  color: var(--uoss-danger);
  text-decoration: none;
  border-bottom: 0;
  margin-left: 2px;
}

/* Django-ov `<ul class="errorlist">`. Klasa se MORA zadržati — asertuju je
 * e2e specovi tests/e2e/2-4 i tests/e2e/3-7.
 *
 * Selektor je NAMERNO `ul.errorlist`, ne `.errorlist`: `templates/accounts/
 * login.html` nosi `class="alert alert-danger errorlist"` na `<div>`-u, pa bi
 * nekvalifikovano pravilo resetovalo padding tog alerta i razbilo ga.        */
ul.errorlist {
  list-style: none;
  margin: var(--uoss-s1) 0 0;
  padding: 0;
  font-size: var(--uoss-fs-sm);
  color: var(--uoss-danger);
}

ul.errorlist li + li {
  margin-top: 2px;
}

/* Polje sa greškom. */
.form-control.is-invalid,
.form-select.is-invalid {
  border-color: var(--uoss-danger);
}

.invalid-feedback {
  font-size: var(--uoss-fs-sm);
  color: var(--uoss-danger);
}

/* ════════════════════════════════════════════════════════════════════════
   8.1 Raspored duge forme — suzena kolona + grupe polja
   ════════════════════════════════════════════════════════════════════════
   Registracija člana ima 13 polja. Kao jedan niz blokova pune širine to je
   dugačak skrol bez ijedne orijentacione tačke, a na sadržaju širokom 1000px
   labela stoji predaleko od vrednosti da bi se par čitao kao celina.

   Tri poteza, sva u postojećem rečniku sistema — nijedan nov token, nijedna
   nova boja:
     * kolona forme se sužava (polje ne postaje čitljivije time što je šire);
     * polja se grupišu u `<fieldset>` sa `<legend>` — semantički, pa čitač
       ekrana najavljuje grupu, ne samo niz labela;
     * kratka polja idu u dve kolone kroz POSTOJEĆI Bootstrap grid.

   Legenda namerno koristi isti registar kao zaglavlje tabele (§6) i naslov
   sekcije u sidebar-u (§14): verzal, `--uoss-fs-xs`, `--uoss-muted`. To je
   rečnik koji portal već ima za „oznaka grupe", pa forma ne uvodi četvrti.  */

.uoss-form {
  /* ~46rem: dve kolone od po ~21rem staju, a jedno polje ne raste preko
   * širine na kojoj se labela i vrednost još čitaju kao par.               */
  max-width: 46rem;
}

.uoss-form-group {
  /* `<fieldset>` nosi podrazumevane ivice i razmake pregledača — gasimo ih;
   * razdvajanje nosi razmak i linija ispod legende, ne okvir.              */
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0; /* fieldset ima `min-width: min-content` — lomi grid bez ovoga */
}

.uoss-form-group + .uoss-form-group {
  margin-top: var(--uoss-s6);
}

.uoss-form-group > legend {
  width: 100%;
  margin-bottom: var(--uoss-s4);
  padding-bottom: var(--uoss-s2);
  border-bottom: 1px solid var(--uoss-line);
  font-size: var(--uoss-fs-xs);
  font-weight: var(--uoss-fw-semibold);
  line-height: var(--uoss-lh-tight);
  text-transform: uppercase;
  letter-spacing: var(--uoss-ls-label);
  color: var(--uoss-muted);
}

/* Traka sa radnjama: odvojena linijom da se „Registruj člana" ne bi čitalo kao
 * još jedno polje na kraju niza.                                           */
.uoss-form-actions {
  margin-top: var(--uoss-s6);
  padding-top: var(--uoss-s4);
  border-top: 1px solid var(--uoss-line);
  display: flex;
  align-items: center;
  gap: var(--uoss-s3);
}

/* ════════════════════════════════════════════════════════════════════════
   9. Poruke i upozorenja (dizajn sistem §6.5)
   ════════════════════════════════════════════════════════════════════════
   `<div class="messages">` i `.alert` unutar njega MORAJU ostati — asertuje
   ih tests/e2e/2-4/consent-submit-success.spec.ts.                         */

.messages {
  margin-bottom: var(--uoss-s5);
}

.alert {
  --bs-alert-border-radius: var(--uoss-r-md);
  border-width: 1px;
  border-left-width: var(--uoss-marker-w);
  padding: var(--uoss-s3) var(--uoss-s4);
  font-size: var(--uoss-fs-base);
}

.alert-success {
  --bs-alert-color: var(--uoss-success);
  --bs-alert-bg: var(--uoss-success-tint);
  --bs-alert-border-color: var(--uoss-success);
  --bs-alert-link-color: var(--uoss-success);
}

.alert-warning {
  --bs-alert-color: var(--uoss-warning);
  --bs-alert-bg: var(--uoss-warning-tint);
  --bs-alert-border-color: var(--uoss-warning);
  --bs-alert-link-color: var(--uoss-warning);
}

.alert-danger {
  --bs-alert-color: var(--uoss-danger);
  --bs-alert-bg: var(--uoss-danger-tint);
  --bs-alert-border-color: var(--uoss-danger);
  --bs-alert-link-color: var(--uoss-danger);
}

.alert-info,
.alert-primary {
  --bs-alert-color: var(--uoss-info);
  --bs-alert-bg: var(--uoss-info-tint);
  --bs-alert-border-color: var(--uoss-info);
  --bs-alert-link-color: var(--uoss-info);
}

.alert-secondary,
.alert-light,
.alert-dark {
  --bs-alert-color: var(--uoss-ink-2);
  --bs-alert-bg: var(--uoss-subtle);
  --bs-alert-border-color: var(--uoss-line-strong);
  --bs-alert-link-color: var(--uoss-ink);
}

/* ════════════════════════════════════════════════════════════════════════
   10. Badž statusa — tint pozadina + tekst u statusnoj boji
   ════════════════════════════════════════════════════════════════════════
   Bootstrap `.bg-*` utility nosi `!important`, pa override zahteva isto.
   Ovo istovremeno rešava kontrast: `bg-warning text-dark` sa utišanim
   #8A5A0B bio bi 2:1 (nečitljiv), a tint+tekst je 4.7:1.                   */

.badge {
  font-size: var(--uoss-fs-xs);
  font-weight: var(--uoss-fw-semibold);
  border-radius: var(--uoss-r-sm);
  padding: var(--uoss-s1) var(--uoss-s2);
  letter-spacing: 0.02em;
}

.badge.bg-success,
.badge.text-bg-success {
  background-color: var(--uoss-success-tint) !important;
  color: var(--uoss-success) !important;
}

.badge.bg-warning,
.badge.text-bg-warning {
  background-color: var(--uoss-warning-tint) !important;
  color: var(--uoss-warning) !important;
}

.badge.bg-danger,
.badge.text-bg-danger {
  background-color: var(--uoss-danger-tint) !important;
  color: var(--uoss-danger) !important;
}

.badge.bg-primary,
.badge.text-bg-primary,
.badge.bg-info,
.badge.text-bg-info {
  background-color: var(--uoss-info-tint) !important;
  color: var(--uoss-info) !important;
}

.badge.bg-secondary,
.badge.text-bg-secondary,
.badge.bg-light,
.badge.text-bg-light {
  background-color: var(--uoss-subtle) !important;
  color: var(--uoss-ink-2) !important;
}

/* Bedž pola (M/Ž) pored naziva lige, tima i kluba — partials/_pol_bedz.html.
 * Mali „oblačić" iste tipografije kao .badge, ali kompaktniji i fiksne širine
 * da M i Ž stoje poravnato u koloni. Značenje nosi slovo (+ title/aria-label),
 * boja je samo pomoć oku.                                                    */
.uoss-pol-bedz {
  display: inline-block;
  min-width: 1.35em;
  padding: 0.05em 0.3em;
  border-radius: var(--uoss-r-sm);
  font-size: var(--uoss-fs-xs);
  font-weight: var(--uoss-fw-semibold);
  line-height: var(--uoss-lh-tight);
  text-align: center;
  vertical-align: 0.1em;
  white-space: nowrap;
}

.uoss-pol-bedz--muski {
  background-color: var(--uoss-info-tint);
  color: var(--uoss-info);
}

.uoss-pol-bedz--zenski {
  background-color: var(--uoss-pol-zenski-tint);
  color: var(--uoss-pol-zenski);
}

/* ════════════════════════════════════════════════════════════════════════
   11. Paginacija
   ════════════════════════════════════════════════════════════════════════ */

.pagination {
  --bs-pagination-font-size: var(--uoss-fs-sm);
  --bs-pagination-color: var(--uoss-primary);
  --bs-pagination-bg: var(--uoss-surface);
  --bs-pagination-border-color: var(--uoss-line);
  --bs-pagination-hover-color: var(--uoss-primary-hover);
  --bs-pagination-hover-bg: var(--uoss-subtle);
  --bs-pagination-hover-border-color: var(--uoss-line-strong);
  --bs-pagination-active-color: var(--uoss-on-primary);
  --bs-pagination-active-bg: var(--uoss-primary);
  --bs-pagination-active-border-color: var(--uoss-primary);
  --bs-pagination-disabled-color: var(--uoss-muted);
  --bs-pagination-disabled-bg: var(--uoss-bg);
  --bs-pagination-disabled-border-color: var(--uoss-line);
  --bs-pagination-border-radius: var(--uoss-r-sm);
  margin-top: var(--uoss-s4);
  margin-bottom: 0;
}

/* ════════════════════════════════════════════════════════════════════════
   12. Dropdown
   ════════════════════════════════════════════════════════════════════════ */

.dropdown-menu {
  --bs-dropdown-font-size: var(--uoss-fs-base);
  --bs-dropdown-bg: var(--uoss-surface);
  --bs-dropdown-border-color: var(--uoss-line);
  --bs-dropdown-border-radius: var(--uoss-r-md);
  --bs-dropdown-link-color: var(--uoss-ink);
  --bs-dropdown-link-hover-color: var(--uoss-ink);
  --bs-dropdown-link-hover-bg: var(--uoss-subtle);
  --bs-dropdown-link-active-color: var(--uoss-primary);
  --bs-dropdown-link-active-bg: var(--uoss-primary-tint);
  --bs-dropdown-divider-bg: var(--uoss-line);
  --bs-dropdown-item-padding-y: var(--uoss-s2);
  --bs-dropdown-item-padding-x: var(--uoss-s4);
  box-shadow: var(--uoss-shadow);
}

/* ════════════════════════════════════════════════════════════════════════
   12a. Modal potvrde (dizajn sistem §6.13)
   ════════════════════════════════════════════════════════════════════════
   Retema se kroz Bootstrap `--bs-modal-*` varijable, kao dropdown iznad —
   klase se ne preimenuju (§6).

   SENKA JE IZUZETAK koji §4 dopušta uz offcanvas i dropdown: modal je jedini
   element koji lebdi iznad zatamnjene pozadine, pa senka nije ukras nego
   jedini nosilac te razlike. U vidnom polju je najviše jedan.

   ZATAMNJENJE je `--uoss-primary` na niskoj neprozirnosti, ne crna: pod
   hladnom grafitnom paletom crni veo izgleda kao rupa u stranici. Piše se
   preko `--uoss-*-rgb` trojke (§2.3) — nijedan hex literal ne izlazi iz
   `tokens.css`.                                                            */

.modal {
  --bs-modal-bg: var(--uoss-surface);
  --bs-modal-color: var(--uoss-ink);
  --bs-modal-border-color: var(--uoss-line);
  --bs-modal-border-radius: var(--uoss-r-md);
  --bs-modal-inner-border-radius: var(--uoss-r-md);
  --bs-modal-box-shadow: var(--uoss-shadow);
  --bs-modal-padding: var(--uoss-s5);
  --bs-modal-header-padding: var(--uoss-s4) var(--uoss-s5);
  --bs-modal-header-border-color: var(--uoss-line);
  --bs-modal-footer-border-color: var(--uoss-line);
  --bs-modal-footer-gap: var(--uoss-s2);
}

/* Bootstrap crta senku na `.modal-content` preko svoje varijable samo kad je
 * modal „static"; ovde se postavlja bezuslovno da izgled ne zavisi od te grane. */
.modal-content {
  box-shadow: var(--uoss-shadow);
}

.modal-backdrop {
  --bs-backdrop-bg: rgb(var(--uoss-primary-rgb));
  --bs-backdrop-opacity: 0.35;
}

.modal-title {
  font-size: var(--uoss-fs-lg);
  font-weight: var(--uoss-fw-semibold);
  color: var(--uoss-ink);
}

/* Odustani je tekstualno dugme (§6.1) i stoji LEVO od potvrde; bez ovoga
 * `.btn-link` u podnožju nosi Bootstrap-ov plavi default. */
.modal-footer .btn-link {
  color: var(--uoss-ink-2);
  text-decoration: none;
}

.modal-footer .btn-link:hover,
.modal-footer .btn-link:focus-visible {
  color: var(--uoss-ink);
  text-decoration: underline;
}

/* ════════════════════════════════════════════════════════════════════════
   13. Ikone iz sprite-a
   ════════════════════════════════════════════════════════════════════════
   Upotreba:
     <svg class="uoss-icon" aria-hidden="true">
       <use href="{% static 'icons/uoss.svg' %}#trophy"></use>
     </svg>
   Ikona koja je JEDINI sadržaj dugmeta mora imati aria-label na dugmetu.   */

.uoss-icon {
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  fill: currentColor;
  vertical-align: -0.125em;
}

.uoss-icon-lg {
  width: 1.5em;
  height: 1.5em;
}

.uoss-icon-xl {
  width: 2.5em;
  height: 2.5em;
}

/* ════════════════════════════════════════════════════════════════════════
   14. Sidebar i layout aplikacije (dizajn sistem §4, §6.8)
   ════════════════════════════════════════════════════════════════════════
   Faza 3b: privremeni `navbar-dark bg-dark` blok je uklonjen — top-navbar više
   ne postoji.

   Skelet: `templates/partials/_sidebar.html` je `.offcanvas-lg.offcanvas-start`,
   pa Bootstrap sam radi off-canvas ISPOD 992px (transform + backdrop + fokus), a
   NA ≥992px gasi transform/visibility i sakriva `.offcanvas-header`. Naš zadatak
   je samo da iznad breakpoint-a vratimo `position: fixed` i širinu, i da damo
   `.uoss-main` levi odmak. Nula linija novog JS-a.

   Pozadina/ivica NISU na `.uoss-sidebar` nego na `.uoss-sidebar-body`: Bootstrap
   na ≥992px forsira `background-color: transparent !important` na samom
   offcanvas elementu, pa bi svaka boja tamo zahtevala `!important` protiv njega. */

.uoss-sidebar {
  --bs-offcanvas-width: var(--uoss-sidebar-w);
  --bs-offcanvas-border-color: var(--uoss-line);
  --bs-offcanvas-padding-x: 0;
  --bs-offcanvas-padding-y: 0;
}

.uoss-sidebar .offcanvas-header {
  padding: var(--uoss-s3) var(--uoss-s4);
  border-bottom: 1px solid var(--uoss-line);
  background: var(--uoss-bg);
}

/* `.offcanvas-body` je istovremeno i kolona sidebar-a: navigacija raste, footer
 * je priljubljen uz dno.                                                     */
.uoss-sidebar-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background: var(--uoss-bg);
}

/* Brand — samo desktop (na mobilnom ga nosi .uoss-topbar / .offcanvas-header). */
.uoss-sidebar-brand-link {
  align-items: center;
  gap: var(--uoss-s2);
  padding: var(--uoss-s4);
  color: var(--uoss-ink);
  font-size: var(--uoss-fs-lg);
  font-weight: var(--uoss-fw-bold);
  letter-spacing: var(--uoss-ls-tight);
  text-decoration: none;
  border-bottom: 1px solid var(--uoss-line);
}

.uoss-sidebar-brand-link:hover,
.uoss-sidebar-brand-link:focus-visible {
  color: var(--uoss-primary);
}

.uoss-sidebar-brand {
  font-size: var(--uoss-fs-lg);
  font-weight: var(--uoss-fw-bold);
  letter-spacing: var(--uoss-ls-tight);
  color: var(--uoss-ink);
}

/* Skrolabilni deo: samo lista sekcija, da footer ostane vidljiv.             */
.uoss-nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-bottom: var(--uoss-s4);
}

/* Traka na naslovu sama razdvaja sekcije, pa veliki razmak vise nije potreban. */
.uoss-nav-section + .uoss-nav-section {
  margin-top: var(--uoss-s3);
}

/* Naslov sekcije je `<summary>` — disclosure kontrola akordeona. Otvorena je tačno
 * jedna sekcija: ona kojoj tekuća stranica pripada (server je razrešava).
 * Strogi akordeon nosi `<details name>` nativno, bez ijedne linije JS-a.       */
.uoss-nav-heading {
  display: flex;
  align-items: center;
  gap: var(--uoss-s2);
  margin: 0;
  padding: var(--uoss-s2) var(--uoss-s4);
  font-size: var(--uoss-fs-xs);
  font-weight: var(--uoss-fw-semibold);
  line-height: var(--uoss-lh-tight);
  text-transform: uppercase;
  letter-spacing: var(--uoss-ls-section);
  color: var(--uoss-muted);
  cursor: pointer;
  user-select: none;
  list-style: none; /* gasi podrazumevani trougao (Firefox, Chrome)  */
  /* Naslov nosi POZADINSKU TRAKU, stavke sede na čistoj pozadini sidebar-a.
   * Razlika u nijansi sive (muted naslov vs ink stavka) plus verzal i uvlačenje
   * se u praksi pokazala kao nedovoljna — traka je strukturna, ne tonska, pa ne
   * zavisi od finog razlikovanja sivih na lošijem monitoru ili pri jakom svetlu. */
  background: var(--uoss-subtle);
  border-top: 1px solid var(--uoss-line);
  border-bottom: 1px solid var(--uoss-line);
}

/* WebKit trougao ima sopstveni pseudo-element koji `list-style` ne hvata. */
.uoss-nav-heading::-webkit-details-marker {
  display: none;
}

/* `<h2>` unutar `<summary>` ostaje zbog strukture naslova (čitač ekrana i dalje
 * dobija nivo 2), ali ne pravi sopstveni box — ikona i labela su flex stavke
 * samog `<summary>`-ja.                                                        */
.uoss-nav-heading h2 {
  display: contents;
  font: inherit;
  letter-spacing: inherit;
  margin: 0;
}

.uoss-nav-heading:hover {
  color: var(--uoss-ink-2);
}

/* Naslov OTVORENE sekcije se namerno NE zatamnjuje. Prvo je tako bilo, pa se
 * pokazalo da tamni naslov dobije istu boju kao stavke ispod sebe — a to je baš
 * par koji korisnik gleda. Otvorenost je ionako očigledna (chevron je okrenut,
 * stavke stoje ispod), pa ta razlika nije potrebna; razlika naslov-vs-stavka
 * jeste. Sav kontrast ide na nju: naslov ostaje prigušen u oba stanja.        */

/* Fokusni prsten NE pišemo ovde — globalni `:focus-visible` (§5) hvata `<summary>`
 * jer je ono fokusabilno po difoltu. Duplirano pravilo bi samo moglo da odluta. */

/* Chevron gleda desno kad je sekcija sklopljena, dole kad je otvorena.
 * `prefers-reduced-motion` gasi rotaciju globalnim pravilom u §16.            */
.uoss-nav-chevron {
  margin-left: auto;
  color: var(--uoss-muted);
  transition: transform 120ms ease-in;
}

.uoss-nav-section[open] > .uoss-nav-heading .uoss-nav-chevron {
  transform: rotate(90deg);
}

.uoss-nav-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Omotač stare nav grupe (`nav-group-*`). Nosi testid i fail-closed gejt, ali
 * vizuelno je providan: stavke se nastavljaju bez dodatnog naslova i uvlačenja.
 * Vidi „Ugovor za sidebar (3b)" u docs/redesign-plan.md.                      */
.uoss-nav-group {
  display: contents;
}

.uoss-sidebar .uoss-nav-link {
  display: flex;
  align-items: center;
  gap: var(--uoss-s2);
  width: 100%;
  padding: var(--uoss-s2) var(--uoss-s4);
  border: 0;
  background: transparent;
  color: var(--uoss-ink);
  font-size: var(--uoss-fs-base);
  line-height: var(--uoss-lh-base);
  text-align: left;
  text-decoration: none;
}

/* Stavke su UVUČENE u odnosu na naslov sekcije. Ovo je glavni nosilac hijerarhije:
 * bez uvlačenja ikona stavke stoji na istom x-u kao ikona naslova, pa se ceo
 * sidebar čita kao jednoličan niz redova — naslov se ne razaznaje od stavke.
 * Uvlači se samo navigacija; „Odjava" u footeru nosi istu klasu, ali nije stavka
 * nijedne sekcije i ostaje poravnata.                                         */
.uoss-sidebar .uoss-nav .uoss-nav-link {
  padding-left: var(--uoss-s5);
}

.uoss-sidebar .uoss-nav-link .uoss-icon {
  color: var(--uoss-muted);
}

.uoss-sidebar .uoss-nav-link:hover {
  background: var(--uoss-subtle);
  color: var(--uoss-ink);
}

/* Aktivna stavka: signature marker (§5) + bela površina + težina 600. Marker
 * dolazi iz `.uoss-marker::before`; ovde se dodaju pozadina i težina.
 *
 * Pozadina je `--uoss-surface`, NE `--uoss-primary-tint`. Tint (#EBF0F5) i
 * pozadina sidebar-a (`--uoss-bg`, #F7F8FA) razlikuju se za par procenata
 * luminanse — na spisku od 35 stavki aktivna se prosto nije videla. Bela
 * površina ide na DRUGU stranu od hover-a (`--uoss-subtle`, tamniji od pozadine),
 * pa se ta dva stanja ne mešaju. Tekst je `--uoss-primary` na beloj: 8.0:1.    */
.uoss-sidebar .uoss-nav-link.is-active {
  background: var(--uoss-surface);
  color: var(--uoss-primary);
  font-weight: var(--uoss-fw-semibold);
}

.uoss-sidebar .uoss-nav-link.is-active .uoss-icon {
  color: var(--uoss-primary);
}

/* PODMENI (npr. „Knjiga i obrasci"): grupa sa naslovom postaje ugnežđen
 * `<details>`, uvek zatvoren pri učitavanju. `<summary>` izgleda kao obična
 * stavka (ista klasa `uoss-nav-link`) + chevron, jer je za korisnika to stavka
 * koja se otvara — ne novi naslov sekcije. Stavke podmenija su uvučene JOŠ
 * jedan korak: uvlačenje je nosilac hijerarhije (§6.8).                      */
.uoss-sidebar .uoss-nav-submenu__summary {
  cursor: pointer;
  user-select: none;
  list-style: none;
}

.uoss-nav-submenu__summary::-webkit-details-marker {
  display: none;
}

.uoss-nav-submenu__details[open] > .uoss-nav-submenu__summary .uoss-nav-chevron {
  transform: rotate(90deg);
}

.uoss-sidebar .uoss-nav .uoss-nav-submenu__list .uoss-nav-link {
  padding-left: calc(var(--uoss-s5) + var(--uoss-s5));
}

/* Footer: identifikacija + Odjava (POST forma).                              */
.uoss-sidebar-footer {
  flex: 0 0 auto;
  padding: var(--uoss-s3) 0;
  border-top: 1px solid var(--uoss-line);
}

.uoss-sidebar-user {
  display: flex;
  flex-direction: column;
  padding: 0 var(--uoss-s4) var(--uoss-s2);
  line-height: var(--uoss-lh-tight);
}

.uoss-sidebar-email {
  font-size: var(--uoss-fs-sm);
  font-weight: var(--uoss-fw-semibold);
  color: var(--uoss-ink);
  overflow-wrap: anywhere;
}

.uoss-sidebar-role {
  font-size: var(--uoss-fs-xs);
  color: var(--uoss-muted);
}

/* ── Mobilna traka (<992px) ─────────────────────────────────────────────── */

.uoss-topbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  display: flex;
  align-items: center;
  gap: var(--uoss-s2);
  padding: var(--uoss-s2) var(--uoss-s4);
  background: var(--uoss-surface);
  border-bottom: 1px solid var(--uoss-line);
}

.uoss-topbar-toggle {
  display: inline-flex;
  align-items: center;
  padding: var(--uoss-s1) var(--uoss-s2);
  border: 1px solid var(--uoss-line-strong);
  border-radius: var(--uoss-r-sm);
  background: transparent;
  color: var(--uoss-ink);
}

.uoss-topbar-title {
  font-size: var(--uoss-fs-lg);
  font-weight: var(--uoss-fw-bold);
  letter-spacing: var(--uoss-ls-tight);
  color: var(--uoss-ink);
}

/* Off-canvas panel (<992px) — jedina senka u sistemu pored dropdown-a (§4).  */
@media (max-width: 991.98px) {
  .uoss-sidebar {
    box-shadow: var(--uoss-shadow);
  }
}

/* ── Fiksni sidebar (≥992px) ────────────────────────────────────────────── */

@media (min-width: 992px) {
  /* `background: ... !important` NIJE nemar: Bootstrap na ≥992px postavlja
   * `background-color: transparent !important` i na `.offcanvas-lg` i na
   * `.offcanvas-lg .offcanvas-body`, pa se boja bez `!important` ne može vratiti. */
  .uoss-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1020;
    width: var(--uoss-sidebar-w);
    border-right: 1px solid var(--uoss-line);
    background: var(--uoss-bg) !important;
  }

  .uoss-sidebar-body {
    height: 100%;
  }

  body.uoss-app .uoss-main {
    margin-left: var(--uoss-sidebar-w);
  }
}

/* ════════════════════════════════════════════════════════════════════════
   15. Sadržaj i pomoćne klase
   ════════════════════════════════════════════════════════════════════════ */

main.container {
  max-width: var(--uoss-content-max);
}

/* Skip-link — vidljiv samo na fokusu tastaturom. Bootstrap-ova
 * `.visually-hidden-focusable` radi otkrivanje; ovo je samo izgled kad se
 * pojavi, da ne „iskoči" kao neoblikovan tekst preko sadržaja.              */
.uoss-skip-link:focus-visible {
  position: fixed;
  top: var(--uoss-s2);
  left: var(--uoss-s2);
  z-index: 2000;
  padding: var(--uoss-s2) var(--uoss-s4);
  background: var(--uoss-primary);
  color: var(--uoss-on-primary);
  border-radius: var(--uoss-r-sm);
  font-weight: var(--uoss-fw-semibold);
  text-decoration: none;
  box-shadow: var(--uoss-shadow);
}

/* Error stranice (404 / 403). 500 je NAMERNO samostalan i nosi svoj inline
 * stil — vidi komentar u templates/500.html i plan §2.6.                    */
.uoss-error-page {
  max-width: 34rem;
  margin: var(--uoss-s7) auto;
  padding: var(--uoss-s7) var(--uoss-s5);
  text-align: center;
  background: var(--uoss-surface);
  border: 1px solid var(--uoss-line);
  border-radius: var(--uoss-r-md);
}

.uoss-error-page .uoss-icon-xl {
  color: var(--uoss-line-strong);
  margin-bottom: var(--uoss-s3);
}

.uoss-error-code {
  margin: 0 0 var(--uoss-s1);
  font-family: var(--uoss-font-mono);
  font-size: var(--uoss-fs-xs);
  font-weight: var(--uoss-fw-semibold);
  letter-spacing: var(--uoss-ls-label);
  color: var(--uoss-muted);
}

.uoss-error-page h1 {
  margin-bottom: var(--uoss-s3);
}

.uoss-error-page p {
  margin-bottom: var(--uoss-s5);
}

/* ─── Zaglavlje stranice (partials/_page_header.html) ─────────────────────
 * Zamenjuje 29 ad-hoc `d-flex justify-content-between align-items-center mb-3`
 * blokova. Glavni dobitak je `flex-wrap`: stari obrazac se NE lomi u novi red,
 * pa na 390px naslov i pet dugmadi izlaze iz ekrana.                        */
.uoss-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--uoss-s3);
}

.uoss-page-header__title {
  min-width: 0; /* dozvoljava skraćivanje dugog naslova umesto prelivanja */
}

.uoss-page-header__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--uoss-s2);
}

/* ─── Prazno stanje (partials/_empty_state.html) ───────────────────────────*/
.uoss-empty {
  padding: var(--uoss-s7) var(--uoss-s5);
  text-align: center;
  color: var(--uoss-muted);
  background: var(--uoss-surface);
  border: 1px dashed var(--uoss-line-strong);
  border-radius: var(--uoss-r-md);
}

.uoss-empty--compact {
  padding: var(--uoss-s5) var(--uoss-s4);
}

/* Prazno stanje unutar ćelije tabele (`<td colspan>` u `{% empty %}` grani).
 * Red tabele već ima svoj okvir i zebra-prugu, pa bi kartica dala dva okvira
 * jedan u drugom. Ovo je zato PRESENTATION fix, a ne restrukturiranje DOM-a:
 * `{% empty %}` grana ostaje netaknuta u sva četiri template-a. */
td > .uoss-empty {
  border: 0;
  background: none;
  padding: var(--uoss-s5) var(--uoss-s3);
}

.uoss-empty .uoss-icon-xl {
  color: var(--uoss-line-strong);
  margin-bottom: var(--uoss-s3);
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* ─── Paginacija (partials/_pagination.html, _po_strani.html) ──────────────
 * Izbor veličine strane iznad tabele, levo. Ispod tabele: info tekst levo,
 * dugmad desno; na uskom ekranu se prelama u dva reda. Oba stoje IZVAN
 * `.table-responsive` omotača, pa ne skroluju horizontalno sa tabelom.       */
.uoss-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--uoss-s3);
  margin-top: var(--uoss-s4);
}
.uoss-pagination .pagination {
  margin-top: 0;
  flex-wrap: wrap;
}
.uoss-pagination-info {
  color: var(--uoss-muted);
  font-size: var(--uoss-fs-sm);
  font-variant-numeric: tabular-nums;
}
.uoss-po-strani {
  display: flex;
  align-items: center;
  gap: var(--uoss-s2);
  margin-bottom: var(--uoss-s3);
  font-size: var(--uoss-fs-sm);
}
.uoss-po-strani .form-select {
  width: auto;
}

/* Kolona sa nazivom OSO: fiksna širina, dugačak naziv („VI — Јабланички/
 * Топлички/Пчињски округ") se prelama u više redova umesto da širi tabelu.
 * Prelom, ne „…": ceo naziv ostaje vidljiv bez miša, na telefonu i pri štampi. */
.table .uoss-col-oso {
  width: 14rem;
  min-width: 14rem;
  max-width: 14rem;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* ─── htmx indikator učitavanja ────────────────────────────────────────────
 * htmx sam prebacuje `.htmx-request` na element sa `hx-indicator`. Bez ovoga
 * pretraga i filtriranje nemaju NIJEDAN vizuelni signal da se nešto dešava
 * (8 template-a koristi htmx, nijedan nije imao indikator).                 */
.htmx-indicator {
  opacity: 0;
  transition: opacity 120ms ease-in;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  opacity: 1;
}

/* Tabela u toku osvežavanja — prigušena, da se vidi da podaci nisu konačni. */
.htmx-request .uoss-refreshing,
.uoss-refreshing.htmx-request {
  opacity: 0.55;
  transition: opacity 120ms ease-in;
}

/* Fotografija člana — zamenjuje inline `style="height:160px"` i
 * `style="max-width:160px|180px"` iz četiri template-a. */
.uoss-photo-placeholder {
  height: 160px;
  background: var(--uoss-subtle);
  color: var(--uoss-muted);
  font-size: var(--uoss-fs-sm);
}

.uoss-photo {
  max-width: 180px;
  max-height: 160px;
  height: auto;
}

/* ─── Statusna kartica komandne table (dizajn sistem §6.10) ────────────────
 * Cela kartica je link — cilj klika je ceo pravougaonik, ne broj u njemu.
 * BEZ `uoss-marker`: §5 dopušta marker na TAČNO tri mesta i kartica nije jedno
 * od njih; stanje „ovde si" ostaje ekskluzivno sidebar-u.
 * Nula je PRIGUŠENA — „0 registracija na čekanju" je dobra vest i ne sme da
 * vuče pogled kao broj koji traži radnju.                                    */
.uoss-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--uoss-s4);
}

.uoss-stat-card {
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.uoss-stat-card > .card {
  height: 100%;
  transition: border-color 120ms ease-in;
}

.uoss-stat-card:hover > .card,
.uoss-stat-card:focus-visible > .card {
  border-color: var(--uoss-primary);
}

/* Fokus ring nosi kartica, ne <a> — inače ring obilazi ivicu kartice spolja. */
.uoss-stat-card:focus-visible {
  outline: none;
}

.uoss-stat-card:focus-visible > .card {
  outline: var(--bs-focus-ring-width) solid var(--uoss-focus);
  outline-offset: 2px;
}

.uoss-stat-card__value {
  font-size: var(--uoss-fs-3xl);
  font-weight: var(--uoss-fw-semibold);
  line-height: var(--uoss-lh-tight);
}

.uoss-stat-card--zero .uoss-stat-card__value {
  color: var(--uoss-muted);
}

.uoss-stat-card__label {
  color: var(--uoss-ink-2);
  font-size: var(--uoss-fs-sm);
}

/* ════════════════════════════════════════════════════════════════════════
   16. Smanjeno kretanje
   ════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   Auth stranice — prijava, aktivacija naloga (design-system §6.12)
   ════════════════════════════════════════════════════════════════════════
   Anonimni korisnik nema sidebar, pa je strana prazna osim forme. Ljuska je
   namerno tiha: brend iznad kartice, kartica sa naslovom i formom, jedna
   rečenica uputstva ispod. Nema senke (§4), nema gradijenta (§2.4), jedno
   primarno dugme (§6.1).

   Jedini upečatljiv detalj: marker naslova (§3, „naslov stranice") nije
   uvučen u karticu nego LEŽI NA NJENOJ LEVOJ IVICI — kao linijski sudija na
   aut-liniji. Isti motiv nosi i znak u brendu (bela uspravna crta), pa brend
   i naslov čine jednu figuru. Marker ostaje na istom mestu u hijerarhiji
   (h1), samo je pomeren za padding kartice.                                  */

.uoss-auth {
  --uoss-auth-pad: var(--uoss-s6);
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 26rem;
  /* `main.py-4` već daje 24px gore i dole; ljuska popunjava ostatak ekrana da
   * bi kartica stajala u optičkom centru, ne zalepljena za vrh.              */
  min-height: calc(100vh - 2 * var(--uoss-s5));
  min-height: calc(100dvh - 2 * var(--uoss-s5));
  margin: 0 auto;
}

.uoss-auth__brand {
  display: flex;
  align-items: center;
  gap: var(--uoss-s3);
  margin-bottom: var(--uoss-s5);
}

.uoss-auth__mark {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
}

.uoss-auth__org {
  display: flex;
  flex-direction: column;
  margin: 0;
  line-height: var(--uoss-lh-tight);
}

.uoss-auth__org-name {
  font-size: var(--uoss-fs-lg);
  font-weight: var(--uoss-fw-semibold);
  color: var(--uoss-ink);
}

.uoss-auth__org-full {
  margin-top: 2px;
  font-size: var(--uoss-fs-sm);
  color: var(--uoss-muted);
}

.uoss-auth__card {
  padding: var(--uoss-auth-pad);
  background: var(--uoss-surface);
  border: 1px solid var(--uoss-line);
  border-radius: var(--uoss-r-md);
}

.uoss-auth__title {
  margin-bottom: var(--uoss-s5);
  font-size: var(--uoss-fs-3xl);
  font-weight: var(--uoss-fw-semibold);
  line-height: var(--uoss-lh-tight);
  color: var(--uoss-ink);
}

/* Marker se izvlači iz naslova na levu ivicu kartice (vidi zaglavlje bloka).
 * `left` = −padding kartice − 1px ivice, pa crta pokriva ivicu, ne stoji
 * pored nje. Zaobljenje samo desno, kao i svuda (§3).                        */
.uoss-auth__title.uoss-marker {
  padding-left: 0;
}

.uoss-auth__title.uoss-marker::before {
  left: calc(-1 * var(--uoss-auth-pad) - 1px);
  top: 0.15em;
  bottom: 0.15em;
}

/* Dugme preko cele širine: u uskoj kartici sa dva polja kratko dugme
 * levo ostavlja rupu desno i čita se kao sporedna radnja.                   */
.uoss-auth__submit {
  width: 100%;
  margin-top: var(--uoss-s2);
}

.uoss-auth__help {
  margin: var(--uoss-s4) 0 0;
  padding: 0 var(--uoss-s1);
  font-size: var(--uoss-fs-sm);
  color: var(--uoss-muted);
}

@media (max-width: 575.98px) {
  .uoss-auth {
    --uoss-auth-pad: var(--uoss-s5);
    /* Na telefonu tastatura ionako skraćuje ekran — kartica ide ka vrhu. */
    justify-content: flex-start;
    min-height: 0;
  }
}