/* ══════════════════════════════════════════════════════════════════════
   ORG-MOJA-DVORANA.CSS — zona „Moja dvorana” (Faza 1, BRIEF_MOJA_DVORANA.md)
   Predlošci: templates/organizator/venue_profil.html (ovp-*),
              templates/organizator/venue_galerija.html (ovg-*),
              vodič-checklist na templates/organizator/dashboard.html (ovd-*)
   Skripte:   static/js/org-venue-profil.js, org-venue-galerija.js, org-vodic.js
   Referenca: static/css/org-cjenik.css (isti ugovor, isti portal).

   UGOVOR OVOG FAJLA (obrazac iz couple-rezervacije.css:1-22 —
   DALIA_FRONTEND_STANDARD.md §c):
     · nema sirovog hex-a: sve boje su tokeni iz dalia-portal.css /
       design_tokens.html / .portal-theme-org (organizator.css)
     · nema sirovog z-indexa (sticky upload traka koristi --z-sticky iz registra)
     · nijedan skraćeni oblik tranzicije: svojstva se navode poimence
     · nema `font-family` mimo tokena (--font-sans / --font-mono)
     · NEMA NOVOG @keyframesa — jedini pokret su token tranzicije
       (micro/content tier; povlačenje vodiča = opacity tranzicija, motion
       plan briefa: subtle fade iz registra, bez novog efekta)
     · @media vrijednosti s ljestvice (480 / 640 / 768 / 900 / 1024)
     · dodirna meta nikad ispod 44 px

   REGISTAR BOJE (IK#8 — boja znači, nikad ne ukrašava):
     spremljeno / korak ispunjen   --sage-500        muted sage, prsten/kvačica
     nije spremljeno               --badge-danger-fg samo na odbijenoj kartici
     korak neispunjen              --ink-mute        tiho — neispunjen korak
                                   nije greška (mikro-prolaz #2)
   Semantika dolazi kao rub/prsten/tinta, nikad kao ispuna plohe. ══════ */

/* ── Odabir dvorane (isti obrazac kao .cj-venue-tab) ─────────────────── */
.ovp-venue-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.ovp-venue-tab {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--paper-2);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color var(--transition-fast), color var(--transition-fast),
              background-color var(--transition-fast);
}
.ovp-venue-tab:hover { border-color: var(--portal-accent); color: var(--portal-accent); }
.ovp-venue-tab.is-active {
  border-color: var(--portal-accent);
  background: var(--portal-tint);
  color: var(--portal-accent);
  font-weight: 600;
}

/* ── Raspored: kartice + živi sažetak (mobitel: niz; desktop: dvije kolone,
   brief § Mobile ponašanje) ─────────────────────────────────────────── */
.ovp-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 1025px) {
  .ovp-layout { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
  .ovp-aside { position: sticky; top: 16px; }
}

/* ── Polja ───────────────────────────────────────────────────────────── */
.ovp-fields { display: grid; gap: 14px; }
.ovp-two { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.ovp-three { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 641px) {
  .ovp-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ovp-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.ovp-field { display: grid; gap: 6px; }
.ovp-label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.ovp-input {
  min-height: 44px;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--paper-2);
  border-radius: var(--radius-sm);
  background: var(--paper);
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.ovp-input:focus {
  outline: none;
  border-color: var(--portal-accent);
  box-shadow: 0 0 0 3px var(--portal-tint);
}
.ovp-textarea { min-height: 88px; resize: vertical; line-height: 1.55; }
.ovp-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "zero" 1;
  text-align: right;
}
.ovp-hint {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-mute);
  max-width: 62ch;
}
.ovp-file { padding: 8px 12px; }

/* ── Podnožje kartice: status + Spremi (CTA u dnu kartice = thumb zona) ── */
.ovp-card-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 0 20px 16px;
}
.ovp-status {
  margin: 0 auto 0 0;
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--ink-mute);
}
.ovp-status.is-saved { color: var(--sage-500); }
.ovp-status.is-failed { color: var(--badge-danger-fg); }
/* Tihi prsten na kartici — poruka po polju bila bi šum (org-cjenik obrazac). */
.ovp-card { transition: border-color var(--transition-base), box-shadow var(--transition-base); }
.ovp-card.is-saved { border-color: color-mix(in srgb, var(--sage-500) 55%, transparent); }
.ovp-card.is-failed { border-color: color-mix(in srgb, var(--badge-danger-fg) 45%, transparent); }
.ovp-card[aria-busy="true"] .org-page-action { opacity: 0.55; pointer-events: none; }

/* ── Sažetak izloga ──────────────────────────────────────────────────── */
.ovp-cover {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
}
.ovp-cover-empty {
  margin: 0 0 10px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-mute);
}
.ovp-sum-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--ink);
}
.ovp-sum-line {
  margin: 2px 0 0;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink-soft);
}
.ovp-sum-line:empty { display: none; }
.ovp-aside-links { flex-wrap: wrap; justify-content: flex-start; }
.ovp-aside-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--portal-accent);
  text-decoration: none;
}
.ovp-aside-links a:hover { text-decoration: underline; }

/* ── Logo organizacije ───────────────────────────────────────────────── */
.ovp-logo-row { display: flex; align-items: center; gap: 16px; }
.ovp-logo {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: 50%;   /* krug; četvrtasti okvir pravne osobe nosi omot `.dw-okvir` (dalia-portal.css) */
  object-fit: cover;
  border: 1px solid var(--paper-2);
}
.ovp-logo--empty { border-style: dashed; background: var(--portal-tint); }

/* ══ Galerija dvorane (ovg-*) ═════════════════════════════════════════ */
/* Mreža: 2 stupca na mobitelu (brief § Mobile), auto-fill od 641px —
   apsorbira N+1 fotografiju bez izmjene layouta (integration contract 3). */
.ovg-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (min-width: 641px) {
  .ovg-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}
.ovg-card {
  position: relative;
  border: 1px solid var(--paper-2);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--paper);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast),
              opacity var(--transition-base);
}
.ovg-card.is-busy { opacity: 0.55; }
.ovg-card.is-failed { border-color: color-mix(in srgb, var(--badge-danger-fg) 45%, transparent); }
.ovg-card.is-cover { border-color: color-mix(in srgb, var(--sage-500) 55%, transparent); }
.ovg-card[draggable="true"] { cursor: grab; }
.ovg-card.is-dragging { opacity: 0.4; }
.ovg-img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--portal-tint);
}
.ovg-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid color-mix(in srgb, var(--sage-500) 55%, transparent);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--sage-500);
}
/* Akcije NA objektu (IK#1/IK#2), uvijek vidljive — hover-only reveal bi na
   mobitelu sakrio jedini put do radnje (IK#9). */
.ovg-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px 4px;
  border-top: 1px solid var(--paper-2);
}
.ovg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 8px;
  border: none;
  background: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--ink-soft);
  cursor: pointer;
  transition: color var(--transition-fast), background-color var(--transition-fast);
}
.ovg-btn:hover { color: var(--portal-accent); background: var(--portal-tint); }
.ovg-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ovg-btn svg { width: 18px; height: 18px; stroke: currentColor; }
.ovg-btn:disabled { opacity: 0.4; pointer-events: none; }
.ovg-btn--cover { margin-right: auto; }

/* Upload: gumb u thumb zoni — sticky traka na dnu mobilnog kadra. */
.ovg-upload-bar {
  position: sticky;
  bottom: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0 calc(12px + env(safe-area-inset-bottom));
  /* Ista podloga kao .org-layout (organizator.css:49) — traka mora prekriti
     sadržaj koji klizi ispod nje. */
  background: var(--paper);
}
@media (min-width: 769px) {
  .ovg-upload-bar { position: static; padding: 12px 0 0; }
}
.ovg-count {
  margin: 0 0 0 auto;
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
}
.ovg-status {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--ink-mute);
}
.ovg-status.is-saved { color: var(--sage-500); }
.ovg-status.is-failed { color: var(--badge-danger-fg); }

/* ══ Vodič „Postavite dvoranu” (ovd-*, presuda 7) ═════════════════════ */
/* Tiho povlačenje kad je sve zeleno: subtle fade (content tier, tranzicija
   — bez novog keyframea), pa `hidden` nakon isteka. */
.ovd-card {
  transition: opacity var(--transition-slow);
}
.ovd-card.is-going { opacity: 0; }
.ovd-steps { display: grid; }
.ovd-step {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 2px 4px;
  border-top: 1px solid var(--paper-2);
  font-family: var(--font-sans);
  font-size: 13.5px;
  color: var(--ink);
  text-decoration: none;
  transition: background-color var(--transition-fast);
}
.ovd-step:first-child { border-top: none; }
.ovd-step:hover { background: var(--portal-tint); }
.ovd-step:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
/* Kvačica iz statusne palete: ispunjeno = sage prsten + kvačica, neispunjeno
   = tihi prazan krug (nikad crn, nikad crven — IK#8). */
.ovd-tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid var(--paper-2);
  color: transparent;
  transition: border-color var(--transition-base), color var(--transition-base);
}
.ovd-tick svg { width: 14px; height: 14px; stroke: currentColor; }
.ovd-step.is-done .ovd-tick {
  border-color: color-mix(in srgb, var(--sage-500) 65%, transparent);
  color: var(--sage-500);
}
.ovd-step.is-done .ovd-step-label { color: var(--ink-mute); }
.ovd-step-label { flex: 1 1 auto; min-width: 0; }
.ovd-step-go {
  font-size: 12.5px;
  color: var(--portal-accent);
  white-space: nowrap;
}
.ovd-step.is-done .ovd-step-go { visibility: hidden; }

/* ── Tamni način ─────────────────────────────────────────────────────── */
body.dark-mode .ovp-venue-tab { border-color: var(--org-d-line); color: var(--org-d-mute); }
body.dark-mode .ovp-venue-tab.is-active { background: var(--org-d-line); color: var(--portal-accent); }
body.dark-mode .ovp-label,
body.dark-mode .ovp-hint,
body.dark-mode .ovp-status,
body.dark-mode .ovp-cover-empty,
body.dark-mode .ovg-count,
body.dark-mode .ovg-status { color: var(--org-d-mute); }
body.dark-mode .ovp-input {
  background: var(--org-d-bg);
  border-color: var(--org-d-line);
  color: var(--org-d-head);
}
body.dark-mode .ovp-sum-name { color: var(--org-d-head); }
body.dark-mode .ovp-sum-line { color: var(--org-d-text); }
body.dark-mode .ovg-card { background: var(--org-d-bg); border-color: var(--org-d-line); }
body.dark-mode .ovg-actions { border-top-color: var(--org-d-line); }
body.dark-mode .ovg-btn { color: var(--org-d-mute); }
body.dark-mode .ovg-badge { background: var(--org-d-bg); }
body.dark-mode .ovg-upload-bar { background: var(--org-d-bg); }
body.dark-mode .ovd-step { border-top-color: var(--org-d-line); color: var(--org-d-text); }
body.dark-mode .ovd-tick { border-color: var(--org-d-line); }
body.dark-mode .ovd-step.is-done .ovd-step-label { color: var(--org-d-mute); }

/* ── Pristupačnost pokreta ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ovp-venue-tab,
  .ovp-input,
  .ovp-card,
  .ovg-card,
  .ovg-btn,
  .ovd-card,
  .ovd-step,
  .ovd-tick { transition: none; }
}