/* ============================================================
   CalcGor — prijava (login.php)
   Tokeni crteža vrijede samo na body.prijava-stranica. Boje se izvode iz
   tema-tokena u app.css, pa svijetla i tamna tema rade same od sebe.
   ============================================================ */

body.prijava-stranica {
  --crtez-mreza: color-mix(in srgb, var(--tekst-3) 13%, transparent);   /* linije razine */
  --crtez-crta: color-mix(in srgb, var(--tekst-3) 34%, transparent);    /* skala, obris spremnika */
  --crtez-natpis: color-mix(in srgb, var(--tekst-3) 55%, transparent);  /* brojke skale (ukras, aria-hidden) */
  --crtez-naglasak: color-mix(in srgb, var(--p-500) 55%, transparent);  /* graf, oznaka razine */
  --crtez-tekucina: color-mix(in srgb, var(--p-500) 8%, transparent);
  --crtez-tekucina-2: color-mix(in srgb, var(--p-500) 4%, transparent);
  --znak-v: 56px;                                                        /* znak aplikacije */
  --kartica-prijave: 400px;
  --pokret-spori: 9s;        /* njihanje tekućine */
  --pokret-razina: 14s;      /* lagano dizanje i spuštanje razine */
  --pokret-crtanje: 2.4s;    /* graf se iscrta jednom */

  display: grid; place-items: center; min-height: 100dvh; padding: 24px 16px;
}

/* ---------- Crtež u pozadini ---------- */
.prijava-crtez, .prijava-traka {
  position: fixed; z-index: -1; pointer-events: none;
}
.prijava-crtez { inset: 0; width: 100%; height: 100%; }
.prijava-traka { display: none; top: 0; left: 0; width: 100%; height: 140px; }

.crtez-mreza { stroke: var(--crtez-mreza); stroke-width: 1; stroke-dasharray: 2 6; }
.crtez-crta { stroke: var(--crtez-crta); stroke-width: 1.25; fill: none; }
.crtez-crta-jaka { stroke: var(--crtez-crta); stroke-width: 2; fill: none; }
.crtez-natpis {
  fill: var(--crtez-natpis); font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: var(--f-natpis); font-weight: 500;
}
.crtez-oznaka { fill: var(--crtez-naglasak); }
.crtez-graf { stroke: var(--crtez-naglasak); stroke-width: 1.75; fill: none; stroke-linejoin: round; stroke-linecap: round; }
.crtez-tocka { fill: var(--pozadina); stroke: var(--crtez-naglasak); stroke-width: 1.75; }
.crtez-tekucina { fill: var(--crtez-tekucina); }
.crtez-tekucina-2 { fill: var(--crtez-tekucina-2); }
.crtez-povrsina { stroke: var(--crtez-naglasak); stroke-width: 1.5; fill: none; }

.crtez-val { animation: val-lijevo var(--pokret-spori) linear infinite; }
.crtez-val-2 { animation: val-desno calc(var(--pokret-spori) * 1.5) linear infinite; }
.crtez-razina { animation: razina var(--pokret-razina) ease-in-out infinite alternate; }
.crtez-graf-crta {
  /* duljina veća od svake crte grafa (najdulja ≈ 1460 jedinica) */
  stroke-dasharray: 1600; stroke-dashoffset: 1600;
  animation: graf-crtanje var(--pokret-crtanje) cubic-bezier(.4,0,.2,1) .3s forwards;
}

@keyframes val-lijevo { to { transform: translateX(-100px); } }
@keyframes val-desno { from { transform: translateX(-100px); } to { transform: translateX(0); } }
@keyframes razina { to { transform: translateY(-14px); } }
@keyframes graf-crtanje { to { stroke-dashoffset: 0; } }

/* Uz smanjeni pokret app.css gasi animacije; graf se tada mora vidjeti odmah. */
@media (prefers-reduced-motion: reduce) {
  .crtez-graf-crta { stroke-dashoffset: 0; }
}

/* ---------- Glava i kartica ---------- */
.prijava { width: min(var(--kartica-prijave), 100%); }

.prijava-znak {
  width: var(--znak-v); height: var(--znak-v); border-radius: var(--r-m); margin: 0 auto 16px;
  display: grid; place-items: center; color: var(--p-500);
  background: var(--ploha);
  border: 1px solid var(--rub-jaci);
  box-shadow: var(--sjena-1), var(--rub-svjetlo);
}
.prijava-znak svg { width: 30px; height: 30px; }
.znak-razina { stroke: var(--p-500); }
.znak-tekucina { fill: color-mix(in srgb, var(--p-500) 18%, transparent); }

.prijava h1 {
  font-size: var(--f-stranica); font-weight: 800; letter-spacing: -.8px; line-height: 1.15;
  text-align: center;
}
.prijava .slogan {
  text-align: center; color: var(--tekst-2); font-size: var(--f-tekst); font-weight: 600;
  margin: 8px 0 4px; letter-spacing: -.2px;
}
.prijava .slogan-pod {
  text-align: center; color: var(--tekst-3); font-size: var(--f-sitno); margin: 0 0 24px;
}

.prijava .kartica { box-shadow: var(--sjena-2), var(--rub-svjetlo); }
.prijava .kartica::before {
  /* tanka mjerna crta na vrhu kartice: crtice kao na baždarnoj letvi */
  content: ""; position: absolute; left: 22px; right: 22px; top: 0; height: 6px;
  background: repeating-linear-gradient(90deg, var(--crtez-crta) 0 1px, transparent 1px 12px);
  opacity: .8;
}

.lozinka-omot { position: relative; }
.lozinka-omot input { padding-right: 52px; }
.lozinka-oko {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: var(--h-gumb-mali); height: var(--h-gumb-mali); border: none; background: transparent;
  color: var(--tekst-3); display: grid; place-items: center; cursor: pointer; border-radius: var(--r-s);
  transition: var(--prijelaz);
}
.lozinka-oko:hover { background: var(--ploha-3); color: var(--tekst); }
.lozinka-oko:focus-visible {
  /* puna boja naglaska: ≥ 3 : 1 prema plohi u obje teme (55 % mješavina iz app.css daje 1,7 : 1) */
  outline: 3px solid var(--p-500); outline-offset: 2px;
}

.prijava-noga { text-align: center; margin-top: 22px; font-size: var(--f-natpis); color: var(--tekst-3); line-height: 1.7; }
.prijava-noga .autor { font-weight: 600; color: var(--tekst-2); }
.prijava-noga .mono { font-family: "JetBrains Mono", ui-monospace, monospace; }

/* ---------- Mobitel i uski ekrani: samo tanka traka ---------- */
@media (max-width: 760px) {
  .prijava-crtez { display: none; }
  .prijava-traka { display: block; }
  body.prijava-stranica { place-items: start center; padding-top: 48px; }
}