/* ══════════════════════════════════════════════════════════════════════
   ORG-DASHBOARD.CSS — Početna organizatora, izvršni pregled (M1, 2026-08-06)
   Brief: docs/briefs/BRIEF_ORG_DASHBOARD.md · Predložak:
   templates/organizator/dashboard.html

   UGOVOR OVOG FAJLA (isti obrazac kao couple-rezervacije.css:1-22 i
   vendor-discovery.css:1-12 — najjeftiniji poznati mehanizam discipline):
     · nema sirovog hex-a: sve boje su tokeni iz dalia-portal.css / design_tokens.html
     · nema sirovog z-indexa: ovaj fajl ne slaže nijedan sloj
     · nijedan skraceni oblik tranzicije: svojstva se uvijek navode poimence
     · nema `font-family` mimo tokena (--font-sans / --font-serif / --font-mono)
     · nema novog @keyframesa: pokret dolazi iz registra (dpFadeIn, dpFadeUp,
       .dp-skel, dalia-highlight-pulse), ovdje su samo token tranzicije
     · @media vrijednosti s ljestvice (480 / 640 / 768 / 900 / 1024, min = +1)
     · dodirna meta nikad ispod 44 px

   Nadograđuje, ne duplicira: mreža (`.org-kpi-grid`), kartica
   (`.org-card*`), traka tabova (`.org-tabs` / `.org-tab`), brojčane plohe
   (`.org-stat*`) i skeleton (`.dp-skel`) dolaze iz organizator.css i
   dalia-portal.css. Ovdje žive samo tri stvari kojih ondje nema: redak
   radara s otkrivanjem, stavka „traži pažnju" i modul koji je iznad 640 px
   tab a ispod njega akordeon.

   REGISTAR BOJE (IK#8 — boja znači, i nikad nije ispuna retka):
     u redu           muted sage       --sage-500        (ne neon zelena)
     traži pažnju     amber patina     --badge-warning-* (ne građevinska žuta)
     propuštena prilika oxidized rose  --rose-500        (ne alarm crvena;
                      jedini nepovratan gubitak na ovom ekranu je upit koji
                      je prešao prag bez odgovora — mikro-prolaz #2)
     nema podataka    stone crtkano    --ink-faint       (mjesto zadržano nije gubitak)
   Semantika uvijek kao prsten/točka/tanka lijeva crta, nikad kao ispuna plohe.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Naslov: mjera retka je značenje, ne ukras ─────────────────────────
   Rečenica s odstupanjem je proizvod ekrana i ne pada ni na jednoj širini,
   ali preko 52ch oko gubi početak sljedećeg retka. */
.odb-headline { max-width: 52ch; }
/* Rečenica-naslov nosi potez, pa se prvi redak liste ispod ne ponavlja
   doslovno (brief, Intent: „iz te rečenice jednim klikom stiže na mjesto
   gdje se to rješava"). Isti oblik kao potez u listi, samo ispod naslova. */
.odb-headline-action { margin-top: 10px; }

.odb-section { margin-top: 20px; }
.odb-section-title {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 400;
  color: var(--ink);
  margin: 0 0 12px;
}

/* ── Brojčani stupci ───────────────────────────────────────────────────
   Recept iz uprava.css:44-52: mono + tabular + prekrižena nula, desno
   poravnato. Brojke koje se skeniraju okomito moraju stajati u koloni. */
.odb-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "zero" 1;
  text-align: right;
}
.odb-metric-num { font-variant-numeric: tabular-nums; }

/* ── Leća po dvorani ───────────────────────────────────────────────────
   Chip red, ne dropdown: aktivno stanje je imenovano dok traje, jer leća
   mijenja svaki broj na stranici i korisnik mora vidjeti kroz što gleda. */
.odb-lens {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}
.odb-lens-chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid var(--paper-2);
  border-radius: 999px;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color var(--transition-fast), border-color var(--transition-fast),
              background-color var(--transition-fast);
}
.odb-lens-chip:hover { color: var(--ink); border-color: var(--ink-faint); }
.odb-lens-chip:focus-visible {
  outline: 2px solid var(--portal-accent);
  outline-offset: 2px;
}
.odb-lens-chip.is-active {
  background: var(--portal-tint);
  border-color: color-mix(in srgb, var(--portal-accent) 40%, transparent);
  color: var(--portal-accent);
}
.odb-lens-note {
  margin: 0 0 16px;
  max-width: 52ch;
  font-size: 13px;
  color: var(--ink-mute);
}

/* ── Radar po dvoranama: sortabilna tablica (nalog N2) ─────────────────
   Ista komponenta na Početnoj i /organizator/dvorane. Recept iz
   uprava.css:44-52 i :205-215 (gusta lista/tablica, DALIA_FRONTEND_STANDARD
   §c): hairline umjesto elevacije, brojke mono + tabular + desno (`.odb-num`
   već postoji iznad), status kao tanka lijeva crta + prsten — NIKAD ispuna
   retka (registar boje na vrhu ovog fajla). Redak ostaje klikabilan prema
   dvorani (`data-href`, delegacija u org-radar-table.js); sortiranje živi
   isključivo u `<thead>`, pa ne dira tu navigaciju. */
.odb-radar-table-wrap {
  /* Isti donji prag kao stari `<details>` popis: mjesto ostaje stabilno dok
     skeleton ustupa mjesto tablici. */
  min-height: calc(56px * 2);
}
.odb-radar-table thead th { padding: 0; }
.odb-th-sort {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  min-height: 32px;
  padding: 9px 12px;
  border: none;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  text-align: left;
  cursor: pointer;
  transition: color var(--transition-fast);
}
.odb-radar-table .odb-th-num .odb-th-sort { justify-content: flex-end; }
.odb-th-sort:hover { color: var(--ink); }
.odb-th-sort:focus-visible {
  outline: 2px solid var(--portal-accent);
  outline-offset: -2px;
}
/* Strelica dolazi iz `aria-sort` na `<th>`, ne iz odvojene klase — stanje i
   izgled ne mogu se razići jer je jedan te isti atribut nosi oboje. */
.odb-th-sort::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  opacity: 0.35;
}
th[aria-sort="ascending"] .odb-th-sort::after { border-bottom: 4px solid var(--portal-accent); opacity: 1; }
th[aria-sort="descending"] .odb-th-sort::after { border-top: 4px solid var(--portal-accent); opacity: 1; }

.odb-radar-tr {
  animation: dpFadeUp 320ms var(--ease) both;
  transition: background-color var(--transition-fast);
}
.odb-radar-tr[data-href] { cursor: pointer; }
.odb-radar-tr:hover { background: var(--portal-tint); }
/* Stagger do osam redaka, dalje bez odgode: čekanje ispod prsta nije efekt. */
.odb-radar-tr:nth-child(2) { animation-delay: 40ms; }
.odb-radar-tr:nth-child(3) { animation-delay: 80ms; }
.odb-radar-tr:nth-child(4) { animation-delay: 120ms; }
.odb-radar-tr:nth-child(5) { animation-delay: 160ms; }
.odb-radar-tr:nth-child(6) { animation-delay: 200ms; }
.odb-radar-tr:nth-child(7) { animation-delay: 240ms; }
.odb-radar-tr:nth-child(8) { animation-delay: 280ms; }

.odb-radar-name-cell { display: flex; align-items: flex-start; gap: 10px; }
.odb-radar-name-wrap { min-width: 0; }
.odb-radar-link {
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  overflow-wrap: anywhere;
}
a.odb-radar-link:hover { text-decoration: underline; }
.odb-radar-link:focus-visible {
  outline: 2px solid var(--portal-accent);
  outline-offset: 2px;
}
/* Signal (IK#7) ostaje vidljiv, ne zaključan u otkrivanje — peek sloj
   (nalog N1) preuzima ovo mjesto kad stigne. */
.odb-radar-signal-sub {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--ink-mute);
}

/* Točka je prsten, ne ispuna retka. Boja nosi jedno značenje po retku. */
.odb-dot {
  flex: none;
  margin-top: 4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--ink-faint);
  background: transparent;
}
.odb-radar-tr.is-ok .odb-dot { border-color: var(--sage-500); }
.odb-radar-tr.is-attention .odb-dot { border-color: var(--badge-warning-fg); }
.odb-radar-tr.is-lost .odb-dot { border-color: var(--rose-500); }
.odb-radar-tr.is-unknown .odb-dot { border-style: dashed; }
/* Tanka lijeva crta ponavlja isti registar bez bojanja cijelog retka —
   isti obrazac kao `.u-row-crit td:first-child` u uprava.css:217-218. */
.odb-radar-tr.is-lost td:first-child { box-shadow: inset 2px 0 0 0 var(--rose-500); }
.odb-radar-tr.is-attention td:first-child { box-shadow: inset 2px 0 0 0 var(--badge-warning-fg); }

.odb-radar-empty { padding: 24px 20px; }

/* ── Traži pažnju ──────────────────────────────────────────────────────
   Jedna rečenica plus jedan potez po stavci. Redoslijed je najstarije prvo
   i dolazi iz rute; CSS ne preslaguje. */
.odb-attention { padding: 4px 0 4px; }
.odb-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 14px 20px;
  border-top: 1px solid var(--paper-2);
}
.odb-item:first-child { border-top: none; }
.odb-item.is-lost { box-shadow: inset 2px 0 0 0 var(--rose-500); }
.odb-item.is-attention { box-shadow: inset 2px 0 0 0 var(--badge-warning-fg); }
.odb-item-body { flex: 1 1 260px; min-width: 0; }
.odb-item-sentence {
  margin: 0;
  max-width: 52ch;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink);
}
.odb-item-meta,
.odb-item-siblings {
  margin: 4px 0 0;
  max-width: 52ch;
  font-size: 12.5px;
  color: var(--ink-mute);
}
.odb-item-siblings { color: var(--ink-soft); }
.odb-item-action {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid color-mix(in srgb, var(--portal-accent) 40%, transparent);
  border-radius: 999px;
  color: var(--portal-accent);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}
.odb-item-action:hover {
  background: color-mix(in srgb, var(--portal-accent) 8%, transparent);
  border-color: var(--portal-accent);
}
.odb-item-action:focus-visible {
  outline: 2px solid var(--portal-accent);
  outline-offset: 2px;
}

/* ── Metrike s kontekstom ──────────────────────────────────────────────
   Brojka bez usporedbe nije izvršna razina: na uskom ekranu se ne crta, na
   širokom stoji jer prostor postoji i kontekst je u modulu ispod. */
.odb-metric { display: flex; flex-direction: column; }
.odb-metric.is-novalue .odb-metric-num { display: none; }
.odb-metric.is-novalue .org-kpi-label { margin-top: 0; }

/* ── Moduli: iznad 640 px tabovi, ispod akordeon ───────────────────────
   Jedan DOM, dva prikaza. Traka tabova se ispod 640 px gasi umjesto da se
   pretvara u vodoravni scroll. */
.odb-module + .odb-module { margin-top: 12px; }
.odb-module-head {
  display: none;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 12px 20px;
  border: none;
  background: transparent;
  font-family: var(--font-serif);
  font-size: 17px;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.odb-module-chevron {
  width: 9px;
  height: 9px;
  border-right: 1.5px solid var(--ink-mute);
  border-bottom: 1.5px solid var(--ink-mute);
  transform: rotate(45deg);
  transition: transform var(--transition-fast);
}
.odb-module-head[aria-expanded="true"] .odb-module-chevron { transform: rotate(-135deg); }
.odb-module-body { animation: dpFadeIn 220ms var(--ease) both; }

/* ── Tablica modula ───────────────────────────────────────────────────
   Hairline umjesto elevacije; brojčani stupci desno. Široka tablica skrola
   u svom omotaču, tijelo stranice nikad vodoravno. */
.odb-table-wrap { margin-top: 14px; }
.odb-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.odb-table th,
.odb-table td {
  padding: 9px 12px;
  border-top: 1px solid var(--paper-2);
  text-align: left;
  font-weight: 400;
  color: var(--ink);
}
.odb-table thead th {
  border-top: none;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.odb-table .odb-th-num,
.odb-table td.odb-num { text-align: right; }
.odb-table tbody th { color: var(--ink-soft); }

/* ── Prazna stanja ────────────────────────────────────────────────────
   Ovdje ih NEMA. Obitelj je `.org-empty*` u organizator.css i vrijedi za
   cijeli portal: ovaj fajl je 6.8.2026. nakratko imao vlastitu paralelnu
   (`.odb-empty*`) pokraj postojeće, dvije obitelji za istu stvar u istom
   valu. Preseljena je, ne kopirana. */

/* ── Podnožje sekcije, tihe napomene ──────────────────────────────────
   Degradirani signal se imenuje riječima. Nula i „nismo mogli pročitati"
   su dvije različite tvrdnje i ne smiju izgledati isto. */
.odb-card-foot { padding-top: 4px; }
.odb-foot-note {
  margin: 10px 0 0;
  max-width: 52ch;
  font-size: 12.5px;
  color: var(--ink-mute);
}
.odb-foot-note a { color: var(--portal-accent); text-decoration: none; }
.odb-foot-note a:hover { text-decoration: underline; }
.odb-foot-note.is-degraded { color: var(--badge-warning-fg); }

/* ── Učitavanje i greška leće ─────────────────────────────────────────
   Skeleton je postojeći arhetip „list"; nijedan novi se ne uvodi. */
.odb-skel { padding: 8px 20px; }
/* Traka skeletona je visoka točno kao redak radara (40 + 16 = 56 px), pa
   dolazak podataka ne pomiče ništa ispod sebe. */
.odb-skel .dp-skel__bar { height: 40px; margin: 0 0 16px; }
.odb-skel[hidden] { display: none; }
.odb-error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 16px 20px;
  font-size: 13.5px;
  color: var(--badge-warning-fg);
}
.odb-error[hidden] { display: none; }
.odb-retry {
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid color-mix(in srgb, var(--portal-accent) 40%, transparent);
  border-radius: 999px;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--portal-accent);
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}
.odb-retry:hover {
  background: color-mix(in srgb, var(--portal-accent) 8%, transparent);
  border-color: var(--portal-accent);
}
/* Sekcija koja čeka odgovor gasi stari sadržaj, ne miče ga: mjesto ostaje
   zauzeto pa ništa ne skače kad brojke stignu. */
.odb-section.is-loading .odb-radar,
.odb-section.is-loading .odb-attention { display: none; }

/* ── Mobitel ──────────────────────────────────────────────────────────
   Dizajn počinje na 390 px. Redak radara ostaje pun redak, ne sitniji
   tekst: ono što ne stane pada u karticu otkrivanja. */
@media (max-width: 640px) {
  .odb-module-tabs { display: none; }
  .odb-module-head { display: flex; }
  .odb-item { padding: 14px 16px; }
  .odb-item-action { width: 100%; justify-content: center; }
  /* Brojka bez usporedbe se na uskom ekranu ne renderira: bez konteksta ona
     nije stavka izvršnog pregleda nego ukras koji troši prvi zaslon. */
  .odb-metric--nocompare { display: none; }
}

@media (max-width: 480px) {
  .odb-section-title { font-size: 17px; }
}

/* Iznad praga akordeona modul je panel u traci tabova: glava akordeona se
   gasi, a panel je ono što tab otvara. */
@media (min-width: 641px) {
  .odb-module + .odb-module { margin-top: 0; }
}

/* ── Tamni način ──────────────────────────────────────────────────────
   Vrijednosti dolaze iz `--org-d-*` skupa koji organizator.css već veže na
   `.portal-theme-org`; ovdje se ne uvodi nijedna nova. */
body.dark-mode .odb-section-title,
body.dark-mode .odb-radar-link,
body.dark-mode .odb-item-sentence { color: var(--org-d-head); }
body.dark-mode .odb-table th,
body.dark-mode .odb-table td { color: var(--org-d-text); }
body.dark-mode .odb-item,
body.dark-mode .odb-table th,
body.dark-mode .odb-table td { border-top-color: var(--org-d-line); }
body.dark-mode .odb-item:first-child,
body.dark-mode .odb-table thead th { border-top: none; }
body.dark-mode .odb-radar-tr:hover { background: var(--org-d-line); }
body.dark-mode .odb-lens-chip { border-color: var(--org-d-line); color: var(--org-d-mute); }
body.dark-mode .odb-lens-chip.is-active { background: var(--org-d-line); color: var(--org-d-head); }
body.dark-mode .odb-module-head { color: var(--org-d-head); }
body.dark-mode .odb-table thead th,
body.dark-mode .odb-table tbody th,
body.dark-mode .odb-th-sort,
body.dark-mode .odb-foot-note,
body.dark-mode .odb-radar-signal-sub { color: var(--org-d-mute); }

/* ── Reduced motion ───────────────────────────────────────────────────
   Promjena ostaje jasna, samo bez gibanja. Nijedan efekt ovdje nije nositelj
   informacije, pa se svi gase bez gubitka. */
@media (prefers-reduced-motion: reduce) {
  .odb-radar-tr,
  .odb-module-body { animation: none; }
  .odb-module-chevron { transition: none; }
}