/* ══════════════════════════════════════════════════════════════════════
   ORG-PEEK.CSS — peek kartica organizatora (N1, 2026-08-06)
   Nalog: docs/bi/VERA_STRUKTURNI_PASS_1_2026-08-06.md §3 N1
   Ruta: /organizator/peek/<vrsta>/<id>.json · Skripta: static/js/org-peek.js

   UGOVOR OVOG FAJLA (obrazac iz 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 / .portal-theme-org
     · nema sirovog z-indexa: sloj se izvodi iz registra (--z-sheet-backdrop),
       isti izraz koji .seat-guest-card već koristi (seating.css:885)
     · nijedan skraćeni oblik tranzicije: svojstva se navode poimence
     · nema `font-family` mimo tokena (--font-sans / --font-mono)
     · NEMA NOVOG @keyframesa: otkrivanje je tranzicija opacity + transform,
       a `prefers-reduced-motion` je gasi u cijelosti
     · @media vrijednosti s ljestvice (480 / 640 / 768 / 900 / 1024)
     · dodirna meta nikad ispod 44 px (izlaz kartice, gumb zatvaranja)

   JEDNA KARTICA ZA CIJELI PORTAL. Sedam modala je već previše (STANDARD §e#5);
   osmi popup po ekranu bio bi isti kvar u manjem pakiranju. Zato je ovdje točno
   jedan element, jedan raspored i jedna obitelj klasa, a svaki sljedeći ekran
   dodaje samo `data-peek` atribut.

   ZAŠTO NIJE MODAL. Peek ne uzima fokus, nema backdrop i nema zamku fokusa:
   otvara se na prijelaz miša ili dugi pritisak, zatvara se Escapeom, klikom van
   i odlaskom pokazivača. Modal traži odluku; peek daje kontekst.

   REGISTAR BOJE (IK#8 — boja znači, nikad ne ukrašava):
     tiho / zadano     --ink-soft         vrijednost retka
     traži pažnju      --badge-warning-fg amber patina, ne građevinska žuta
     propuštena prilika --rose-700        oxidized rose; SAMO za nepovratan
                        gubitak (upit preko praga bez odgovora, mikro-prolaz #2)
   Semantika dolazi kao tinta teksta i tanka lijeva crta, nikad kao ispuna.
   ══════════════════════════════════════════════════════════════════════ */

.org-peek {
  /* Iznad ploha ljuske (--z-topbar 50) i iznad dan-lista kalendara
     (--z-sheet 1050) — kartica se poziva i s elementa koji taj list otvara, pa
     mora nadvisiti i njega. Izraz, ne sirovi broj: isti oblik kao
     `.seat-guest-card` (seating.css:885), jedina postojeća peek ploha u repou. */
  position: fixed;
  z-index: calc(var(--z-sheet-backdrop, 1040) + 20);
  top: 0;
  left: 0;
  width: 300px;
  max-width: calc(100vw - 24px);
  padding: 14px 16px;
  border: 1px solid var(--ink-faint);
  border-radius: var(--radius-sm, 12px);
  background: var(--paper);
  box-shadow: var(--shadow);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
  /* Otkrivanje bez keyframea: dvije tranzicije i jedan razred.
     `visibility` je u paru s `opacity` da zatvorena kartica ne hvata miš. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity var(--transition-fast, 180ms ease),
              transform var(--transition-fast, 180ms ease),
              visibility var(--transition-fast, 180ms ease);
}
.org-peek[hidden] { display: none; }
.org-peek.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ── Glava: tko/što je ovo ───────────────────────────────────────────── */
.org-peek-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.25;
  color: var(--ink);
}
.org-peek-sub {
  margin: 3px 0 0;
  font-size: 11.5px;
  color: var(--ink-mute);
}

/* ── Retci: ključ lijevo, vrijednost desno ───────────────────────────── */
.org-peek-rows {
  margin: 10px 0 0;
  display: grid;
  gap: 6px;
}
.org-peek-row {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: 4px 10px;
  margin: 0;
  align-items: baseline;
}
.org-peek-key {
  font-size: 11px;
  color: var(--ink-mute);
  white-space: nowrap;
}
/* Vrijednost desno i s `tabular-nums`: retci se skeniraju okomito, pa se
   znamenke moraju poklapati (uprava.css:44-52 recept, STANDARD §d). */
.org-peek-val {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.org-peek-row.is-attention .org-peek-val { color: var(--badge-warning-fg); }
.org-peek-row.is-risk .org-peek-val { color: var(--rose-700); }
/* Tanka lijeva crta umjesto ispune — semantika je prsten, ne ploha. */
.org-peek-row.is-attention,
.org-peek-row.is-risk {
  padding-left: 8px;
  margin-left: -8px;
  border-left: 2px solid var(--badge-warning-fg);
}
.org-peek-row.is-risk { border-left-color: var(--rose-500); }

/* ── Stanja: učitavanje, izostanak, greška ───────────────────────────── */
.org-peek-note {
  margin: 10px 0 0;
  font-size: 11.5px;
  color: var(--ink-mute);
}
.org-peek-note.is-degraded { color: var(--badge-warning-fg); }

/* ── Točno jedan izlaz dublje (IK#1) ─────────────────────────────────── */
.org-peek-exit {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--portal-accent);
  text-decoration: none;
}
.org-peek-exit:hover { text-decoration: underline; }
.org-peek-exit:focus-visible {
  outline: 2px solid var(--portal-accent);
  outline-offset: 2px;
  border-radius: var(--radius-xs, 8px);
}

/* ── Zatvaranje na dodiru ─────────────────────────────────────────────
   Miš odlazi i kartica se gasi sama; prst nema "odlazak", pa dugi pritisak
   mora dobiti vidljiv izlaz (IK#9 — touch parnjak nosi isti sadržaj, ne
   osiromašen). Gumb postoji SAMO kad je kartica otvorena dodirom. */
.org-peek-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 44px;
  height: 44px;
  display: none;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-sm, 12px);
  background: transparent;
  color: var(--ink-mute);
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.org-peek.is-touch .org-peek-close { display: inline-flex; }
.org-peek.is-touch .org-peek-title { padding-right: 36px; }
.org-peek-close:focus-visible {
  outline: 2px solid var(--portal-accent);
  outline-offset: -2px;
}

/* ── Okidač ───────────────────────────────────────────────────────────
   Element s `data-peek` zadržava svoj glagol (redak radara se i dalje otvara,
   dan-ćelija i dalje otvara list); peek je dodatni sloj, ne zamjena. Na dodiru
   se gasi kontekstni izbornik i selekcija teksta koje dugi pritisak inače
   pokrene, inače se gesta bori sa sustavom. */
[data-peek] { -webkit-touch-callout: none; }
[data-peek].is-peek-open { -webkit-user-select: none; user-select: none; }

/* ── Uska širina ──────────────────────────────────────────────────────
   Ispod 480 px kartica se lijepi uz rubove umjesto da viri; JS je i dalje
   pozicionira, ovdje se mijenja samo mjera. */
@media (max-width: 480px) {
  .org-peek {
    width: calc(100vw - 24px);
    font-size: 13.5px;
  }
}

/* ── Tamni način ──────────────────────────────────────────────────────
   Element nosi paletu plohe na kojoj SJEDI: kartica se ubacuje unutar
   `.portal-theme-org`, pa `--org-d-*` vrijede (mikro-prolaz #7). */
body.dark-mode .org-peek {
  background: var(--org-d-card);
  border-color: var(--org-d-line);
  color: var(--org-d-text);
}
body.dark-mode .org-peek-title,
body.dark-mode .org-peek-val { color: var(--org-d-head); }
body.dark-mode .org-peek-sub,
body.dark-mode .org-peek-key,
body.dark-mode .org-peek-note,
body.dark-mode .org-peek-close { color: var(--org-d-mute); }

/* ── Reduced motion ───────────────────────────────────────────────────
   Kartica se i dalje pojavi i nestane — promjena ostaje jasna, samo bez
   gibanja i bez prijelaza (VISUAL_CANON:48, IK#10). */
@media (prefers-reduced-motion: reduce) {
  .org-peek {
    transition: none;
    transform: none;
  }
  .org-peek.is-open { transform: none; }
}