/* Login ekran (faza 10.2) — split-screen layout, specifičan za ovaj ekran, ne ponovo
   koristi se na drugim stranicama pa ne ide u design-system.css. */

body {
  background: #e9e4d8;
}

/* ===== INTRO OVERLAY (dopuna) — kratka splash sekvenca ISKLJUČIVO na login stranici, pre
   same forme; prikazuje se pri SVAKOM učitavanju /login (bez pamćenja "već viđeno" po
   sesiji/danu — login je jedina ruta koja se ponovo otvara posle svakog logout-a). Overlay
   sedi PREKO već renderovane forme (isti template/poseta, ne posebna ruta) — kad sekvenca
   završi, JS ga sakriva (display:none) i forma je odmah interaktivna ispod, bez network
   poziva. Reference: docs/design/intro-mockup.html.
   Tajming (ukupno 3.5s, sve odmereno CSS animation-delay):
     0.00s–2.20s  logo zumira iz malog u puno stanje (cubic-bezier usporava pri kraju)
     2.20s–3.20s  jednokratan "shine" prelazak preko pozadine
     3.20s–3.50s  ceo overlay bledi (opacity 1->0), otkriva login formu ispod
   Boja pozadine (#022113) je namerno tamnija od --green — posebna nijansa samo za intro,
   ne dira se postojeći --green korišćen svuda drugde (login panel, dashboard sidebar). */
.intro-overlay {
  position: fixed;
  inset: 0;
  background: #022113;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  overflow: hidden;
}

.intro-overlay.intro-hidden {
  display: none;
}

.intro-overlay.playing {
  animation: intro-fade-out 0.3s ease 3.2s 1 forwards;
}

@keyframes intro-fade-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.intro-logo-wrap {
  width: 380px;
  max-width: 62vw;
  transform: scale(0.32);
  position: relative;
  z-index: 1;
}

.intro-overlay.playing .intro-logo-wrap {
  animation: intro-zoom 2.2s cubic-bezier(0.16, 1, 0.3, 1) 0s forwards;
}

.intro-logo-wrap svg {
  width: 100%;
  height: auto;
  display: block;
}

@keyframes intro-zoom {
  from {
    transform: scale(0.32);
  }

  to {
    transform: scale(1);
  }
}

.intro-shine {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.intro-shine::before {
  content: "";
  position: absolute;
  top: -60%;
  left: -60%;
  width: 50%;
  height: 220%;
  background: linear-gradient(90deg, transparent, rgba(210, 171, 103, 0.4), transparent);
  transform: rotate(18deg);
}

.intro-overlay.playing .intro-shine::before {
  animation: intro-shine-sweep 1s ease-in-out 2.2s 1 forwards;
}

@keyframes intro-shine-sweep {
  0% {
    left: -60%;
  }

  100% {
    left: 130%;
  }
}

/* Korisnici koji traže manje pokreta — logo se odmah prikazuje u punoj veličini, bez
   zoom/shine animacija, samo kratak fade (JS takođe koristi kraće ukupno trajanje u ovom
   režimu, videti login.html). */
@media (prefers-reduced-motion: reduce) {
  .intro-logo-wrap {
    transform: scale(1);
  }

  .intro-overlay.playing .intro-logo-wrap {
    animation: none;
  }

  .intro-overlay.playing .intro-shine::before {
    animation: none;
  }

  .intro-overlay.playing {
    animation: intro-fade-out 0.25s ease 0.1s 1 forwards;
  }
}

.screen {
  display: flex;
  min-height: 100vh;
  width: 100%;
}

.panel-brand {
  flex: 0 0 44%;
  background: var(--green);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  position: relative;
  padding: 64px;
  overflow: hidden;
}

.panel-brand::before {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  border: 1px solid rgba(210, 171, 103, 0.25);
  border-radius: 50%;
  top: -160px;
  left: -160px;
}

.panel-brand::after {
  content: "";
  position: absolute;
  width: 360px;
  height: 360px;
  border: 1px solid rgba(210, 171, 103, 0.18);
  border-radius: 50%;
  bottom: -140px;
  right: -140px;
}

.shine {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.shine::before {
  content: "";
  position: absolute;
  top: -60%;
  left: -60%;
  width: 50%;
  height: 220%;
  background: linear-gradient(90deg, transparent, rgba(210, 171, 103, 0.34), transparent);
  transform: rotate(18deg);
  animation: shine-sweep 7.5s ease-in-out infinite;
}

@keyframes shine-sweep {
  0% {
    left: -60%;
  }

  73% {
    left: 130%;
  }

  100% {
    left: 130%;
  }
}

.brand-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  /* min-width:0 (ispravka, 2026-07-19) — flex stavke imaju podrazumevano min-width:auto, što
     im brani da se skupe ispod širine sopstvenog sadržaja (ovde: 360px logo) čak i kad
     .panel-brand (44% viewport-a) na užim prozorima ima manje raspoloživog prostora. Bez ovoga
     .panel-brand svoj overflow:hidden koristi da ODSECE deo loga (deluje kao da je "pobegao"
     udesno) umesto da ga glatko smanji preko max-width ispod. */
  min-width: 0;
  max-width: 100%;
}

.brand-inner svg.logo {
  width: 360px;
  max-width: 100%;
  height: auto;
  margin-bottom: 26px;
}

.tagline {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 17px;
  color: var(--cream);
  opacity: 0.8;
  margin: 0;
  letter-spacing: 0.3px;
}

.system-tag {
  position: absolute;
  left: 64px;
  bottom: 48px;
  z-index: 1;
}

.system-tag .badge-tag {
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--gold);
  text-transform: uppercase;
  opacity: 0.55;
  margin: 0;
}

.panel-form {
  flex: 1;
  background: var(--cream-2);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
}

.form-inner {
  width: 100%;
  max-width: 360px;
}

.form-inner h1 {
  font-weight: 600;
  font-size: 28px;
  color: var(--text-dark);
  margin: 0 0 6px;
}

.form-inner p.sub {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0 0 32px;
}

.form-inner .btn-primary {
  width: 100%;
  height: 46px;
  margin-top: 8px;
}

/* Poruka posle POST /admin/demo-reset (?toast=... na /login) — isti oblik kao .form-error
   ispod, samo u zelenoj (--green) umesto crvenoj toniranosti, pošto je ovo potvrda uspešne
   akcije, ne greška. */
.form-toast {
  font-size: 13px;
  color: var(--green);
  background: rgba(22, 51, 42, 0.08);
  border: 1px solid rgba(22, 51, 42, 0.25);
  border-radius: 6px;
  padding: 10px 12px;
  margin: 0 0 20px;
}

.form-error {
  font-size: 13px;
  color: #a13d3d;
  background: rgba(161, 61, 61, 0.08);
  border: 1px solid rgba(161, 61, 61, 0.25);
  border-radius: 6px;
  padding: 10px 12px;
  margin: 0 0 20px;
}

.footnote {
  margin-top: 28px;
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
}

@media (max-width: 820px) {
  .panel-brand {
    display: none;
  }

  .panel-form {
    flex: 1;
  }
}

/* Dodato za mdpoliklinika-demo — Asklepion Codex kao glavni wordmark iznad postojećeg logoa
   klinike, i dugmad za brze demo naloge na formi za prijavu. */
.demo-wordmark {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 28px;
  color: var(--cream);
  letter-spacing: 0.5px;
  margin: 0 0 18px;
}

.demo-account-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 14px 0;
}

.btn-demo-account {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--cream-2);
  color: var(--text-dark);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.btn-demo-account:hover {
  background: var(--cream);
  border-color: var(--gold);
}