/* AutoToll GPS portalo stiliai — VIENAS failas visoms sritims (admin, klientas, platintojas),
   įėjimo puslapiams ir deklaracijų vaizdams.

   KODĖL vienas failas: iki 2026-07-30 tie patys stiliai buvo perrašyti ŠEŠIOSE vietose
   (5 šablonai + declarations/api/pages.py). Dėl to jie nebesutapo: SIM kaštų suvestinė
   administratoriaus puslapyje rodėsi be jokio stiliaus, nes `.pastaba` buvo apibrėžta tik
   savitarnos ir platintojų maketuose. Visi nauji stiliai — TIK čia.

   Planas ir likę etapai: serveris/docs/PLANAS-dizaino-pertvarka.md
*/

/* ── Kintamieji ─────────────────────────────────────────────────────────────────── */

:root {
  /* Prekės ženklas (autotoll.eu) — NEKEISTI be atskiro sprendimo */
  --melyna: #14213d;
  --rusva: #fca311;
  --rusva-tamsi: #8f5500;      /* tekstui ant balto: 4,28:1 → ~5,7:1 */

  /* Tekstas */
  --tekstas: #1a1a1a;          /* ant balto 17,4:1 */
  --tekstas-silpnas: #5a5a60;
  --tekstas-ant-melynos: #e5e5e5;

  /* Būsenų spalvos. PRASMIŲ TAISYKLĖ — laikytis, kitaip spalvomis nebegalima pasitikėti:
     žalia   — TIK veikia / sėkmė
     rusva   — TIK reikalauja veiksmo
     raudona — TIK klaida arba sustabdymas
     pilka   — neutralu, veiksmo nereikia */
  --zalia: #0a7a2f;            /* 5,47:1 */
  --raudona: #b00020;          /* 7,33:1 */
  --info: #1b5e9e;             /* neutralu-informatyvu (laukimo režimas, sandėlyje) ~5,5:1 */
  --pilka: #5a5a60;            /* neutralu, veiksmo nereikia */

  /* Paviršiai */
  --fonas-silpnas: #f7f7f9;
  --fonas-iejimas: #f4f4f6;
  --remelis: #e6e6ea;          /* dėžučių rėmeliai */
  --linija: #9a9a9a;           /* lentelių linijos (buvo #d0d0d0 = 1,54:1, beveik nematomos) */

  /* Tarpai — 4 px žingsnio skalė (buvo atsitiktinės .15/.35/.45/.6/.8/1.2/2 rem) */
  --tarpas-1: 4px;
  --tarpas-2: 8px;
  --tarpas-3: 12px;
  --tarpas-4: 16px;
  --tarpas-5: 24px;
  --tarpas-6: 32px;

  --kampas: 6px;               /* vienas visur (buvo 4 / 6 / 8 px) */
  --plotis: 1200px;            /* vienas visoms sritims (buvo 1200 admin, 1100 kitur) */
}

/* ── Pamatas ────────────────────────────────────────────────────────────────────── */

body {
  font-family: system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  margin: 0;
  color: var(--tekstas);
}

/* Teksto skalė. Iki šiol nebuvo NĖ VIENOS font-size taisyklės: antraštės rodėsi
   naršyklės numatytosiomis (h1 ≈ 32 px, kaip reklaminėje svetainėje), o įėjimo
   puslapiuose h1 buvo 19 px — tas pats žymėjimas reiškė du skirtingus dalykus. */
h1 { font-size: 1.5rem; font-weight: 600; margin: 0 0 var(--tarpas-4); }
h2 {
  font-size: 1.15rem; font-weight: 600;
  margin: var(--tarpas-6) 0 var(--tarpas-3);
  padding-top: var(--tarpas-3);
  border-top: 1px solid var(--remelis);
}
h1 + h2 { border-top: 0; padding-top: 0; margin-top: var(--tarpas-4); }
h3 { font-size: 1rem; font-weight: 600; margin: var(--tarpas-5) 0 var(--tarpas-2); }
small, .smulkus { font-size: .85rem; color: var(--tekstas-silpnas); }

/* ── Antraštė ir meniu ──────────────────────────────────────────────────────────── */

header {
  background: var(--melyna);
  color: #fff;
  padding: var(--tarpas-2) var(--tarpas-5);
  display: flex;
  gap: var(--tarpas-5);
  align-items: center;
  flex-wrap: wrap;
}
header a { color: var(--tekstas-ant-melynos); text-decoration: none; }
header a:hover { color: #fff; text-decoration: underline; }
header .brand { font-weight: 700; color: var(--rusva); }
header .tarpiklis { flex: 1; }

main { padding: var(--tarpas-5); max-width: var(--plotis); margin: 0 auto; }

/* Nuorodos turinyje. Iki šiol buvo naršyklės numatytosios ryškiai mėlynos ir violetinės
   (aplankytos) — vienintelis dalykas, dėl kurio portalas atrodė kaip „numatytasis HTML". */
main a { color: var(--melyna); text-decoration-color: var(--rusva);
         text-decoration-thickness: 2px; text-underline-offset: 2px; }
main a:hover { color: var(--rusva-tamsi); }

/* ── Lentelės ───────────────────────────────────────────────────────────────────── */

table { border-collapse: collapse; width: 100%; margin: var(--tarpas-4) 0; }
th, td { border: 1px solid var(--linija); padding: var(--tarpas-2) var(--tarpas-3);
         text-align: left; }
th { background: var(--fonas-silpnas); }
/* Eilučių juostos: 9–10 stulpelių lentelėse akis nebepameta eilutės */
tbody tr:nth-child(even) td { background: #fbfbfc; }

/* Lentelės telefone. Iki 2026-07-30 nebuvo NĖ VIENOS apsaugos, todėl plati lentelė
   (SIM 10 stulpelių, mašinos 11) stumdavo VISĄ puslapį kartu su antrašte, o pasukus į
   šoną stulpelių pavadinimai išeidavo iš ekrano. Dabar slankioja tik pati lentelė. */
.lentele-slankioja {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--kampas);
}
.lentele-slankioja > table { min-width: 900px; margin: var(--tarpas-4) 0; }

/* Savybių sąrašas („pavadinimas kairėje — reikšmė dešinėje"). Anksčiau naudojo tą patį
   stilių kaip duomenų lentelės, todėl išsitiesdavo per visus 1200 px ir reikšmė
   atsidurdavo už kelių šimtų pikselių tuščios vietos. */
.savybes { max-width: 560px; }
.savybes th, .savybes td { border: 0; border-bottom: 1px solid var(--remelis); }
.savybes th { background: none; font-weight: 600; color: var(--tekstas-silpnas);
              width: 40%; }

/* ── Formos ─────────────────────────────────────────────────────────────────────── */

fieldset { margin: var(--tarpas-4) 0; border: 1px solid var(--remelis);
           border-radius: var(--kampas); padding: var(--tarpas-4); }
legend { font-weight: 600; padding: 0 var(--tarpas-2); }
form.inline { display: inline; }

/* font: inherit — VIENAS SVARBIAUSIAS pakeitimas. Laukai ir mygtukai NEPERIMA teksto
   stiliaus savaime, todėl naudojo naršyklės formų šriftą (~13 px Arial), o aplinkinis
   tekstas buvo 16 px system-ui: puslapyje sugyveno du šriftai — būtent todėl portalas
   atrodė „nesuformatuotas". Kartu tai sustabdo iPhone Safari savavališką priartinimą,
   kuris įvyksta spustelėjus lauką, kurio tekstas mažesnis nei 16 px. */
input, select, button, textarea {
  font: inherit;
  padding: var(--tarpas-2) var(--tarpas-3);
  margin: var(--tarpas-1);
  border: 1px solid var(--linija);
  border-radius: var(--kampas);
  background: #fff;
  color: var(--tekstas);
}
label { display: block; margin: var(--tarpas-2) 0 var(--tarpas-1); }

/* Mygtukų HIERARCHIJA. Iki 2026-07-30 visi mygtukai buvo vienodi tamsūs, todėl „Pridėti"
   atrodė lygiai taip pat kaip „Deaktyvuoti", o įrenginių lentelėje du tamsūs mygtukai
   kiekvienoje eilutėje svėrė daugiau nei pati informacija. Nuo klaidos apsaugojo tik
   patvirtinimo langas, o ne vizualus signalas.
     .mygtukas--antrinis — lentelių viduje (eilutės nurimsta)
     .mygtukas--rizika   — Sustabdyti / Blokuoti / Deaktyvuoti (pinigai arba ryšys) */
button {
  cursor: pointer;
  background: var(--melyna);
  color: #fff;
  border: 1px solid var(--melyna);
  font-weight: 500;
}
button:hover { filter: brightness(1.25); }
button:active { transform: translateY(1px); }
button:disabled { opacity: .5; cursor: not-allowed; filter: none; }

button.mygtukas--antrinis {
  background: #fff; color: var(--melyna); border-color: var(--melyna);
}
button.mygtukas--antrinis:hover { background: var(--fonas-silpnas); filter: none; }

button.mygtukas--rizika {
  background: #fff; color: var(--raudona); border-color: var(--raudona);
}
button.mygtukas--rizika:hover { background: #fdf0f2; filter: none; }

/* Fokusas. Iki šiol nebuvo jokio savo stiliaus, o naršyklės numatytasis mėlynas apvadas
   ant tamsiai mėlynos antraštės beveik nesiskiria nuo fono. Šviesiame fone gryna
   gintarinė tik ~2:1 (WCAG 1.4.11 reikia ≥3:1) — todėl ten tamsesnis tonas, o
   tamsioje antraštėje/poraštėje lieka gintarinė (7,9:1). */
:focus-visible { outline: 3px solid var(--rusva-tamsi); outline-offset: 2px; }
header :focus-visible { outline-color: var(--rusva); }

/* ── Žinutės ir būsenos ─────────────────────────────────────────────────────────── */

/* .pastaba anksčiau buvo apibrėžta TIK savitarnos ir platintojų maketuose, todėl
   sim.html:11 SIM kaštų suvestinė (kiek kortelių apmokestinama prie 10 € ribos)
   administratoriaus puslapyje rodėsi visai be stiliaus. */
.pastaba {
  background: var(--fonas-silpnas);
  border: 1px solid var(--remelis);
  border-left: 3px solid var(--rusva);
  padding: var(--tarpas-3);
  border-radius: var(--kampas);
  margin: var(--tarpas-4) 0;
}
.pastaba--gerai { border-left-color: var(--zalia); background: #f1f8f3; }
.pastaba--klaida { border-left-color: var(--raudona); background: #fdf0f2; }
.klaida { color: var(--raudona); }

/* ── Būsenų ženkliukai ──────────────────────────────────────────────────────────────
   Ne tik spalva, bet ir ŽENKLAS: taip būsena skaitoma ir spalvų neskiriančiam žmogui,
   ir juodai baltai atspausdinus. Iki 2026-07-30 spalvą turėjo tik 2 iš 5 SIM būsenų —
   „neaktyvi", „aktyvuojama" ir „laukimo režimas" buvo paprastas juodas tekstas, nors
   būtent jos atsako į klausimą, ar kortelė jau kainuoja pinigus.                     */

.zenklas {
  display: inline-block;
  font-size: .85rem;
  font-weight: 600;
  padding: 2px var(--tarpas-2);
  border: 1px solid currentColor;
  border-radius: 999px;
  white-space: nowrap;
}
.zenklas::before { margin-right: var(--tarpas-1); }

/* žalia — TIK veikia; rusva — TIK reikalauja veiksmo; raudona — TIK klaida/sustabdymas;
   pilka ir mėlyna — neutralu, veiksmo nereikia. Kitaip spalvomis nebegalima pasitikėti. */
.z-aktyvi           { color: var(--zalia); }        .z-aktyvi::before { content: "●"; }
.z-nauja            { color: var(--rusva-tamsi); }  .z-nauja::before { content: "○"; }
.z-aktyvuojama      { color: var(--rusva-tamsi); }  .z-aktyvuojama::before { content: "⟳"; }
.z-neaktyvi         { color: var(--pilka); }        .z-neaktyvi::before { content: "○"; }
.z-laukimo_rezimas  { color: var(--info); }         .z-laukimo_rezimas::before { content: "⏸"; }
.z-sustabdyta       { color: var(--raudona); }      .z-sustabdyta::before { content: "✕"; }
.z-isregistruota    { color: var(--pilka); }        .z-isregistruota::before { content: "✕"; }
/* Platintojų sandėlis — ATSKIROS klasės. Anksčiau „parduotas" gaudavo žalią (t. y. tą
   pačią, kuri portale reiškia „veikia ir siunčia"), o „sandėlyje" — rusvą įspėjimo
   spalvą, nors tai visiškai normali būsena. */
.z-sandelyje        { color: var(--info); }         .z-sandelyje::before { content: "▣"; }
.z-parduotas        { color: var(--pilka); }        .z-parduotas::before { content: "✓"; }
.z-deaktyvuotas     { color: var(--raudona); }      .z-deaktyvuotas::before { content: "✕"; }

/* Senosios klasės — kad nepamiršta vieta neliktų visai be spalvos (fail-visible) */
.status-aktyvi { color: var(--zalia); font-weight: 600; }
.status-sustabdyta, .status-isregistruota { color: var(--raudona); }
.status-nauja { color: var(--rusva-tamsi); }

/* ── Telefonas ir planšetė (E3) ─────────────────────────────────────────────────────
   Pirštas apima ~9 mm, o mygtukai buvo ~26 px aukščio su ~5 px tarpais — vietoj
   „Pultas →" buvo lengva paspausti „Sustabdyti" ir realiai atjungti įrenginio ryšį. */
@media (max-width: 700px) {
  main { padding: var(--tarpas-3); }
  input, select, button, textarea { min-height: 44px; margin: var(--tarpas-1) 0; }
  button { padding: var(--tarpas-3) var(--tarpas-4); }
  /* Veiksmų langelis: elementai stulpeliu, kad rizikingas mygtukas nebūtų prilipęs
     prie nekaltos nuorodos */
  td .inline, td form { display: block; }
  td > * { margin-bottom: var(--tarpas-2); }
  /* Nuorodos-veiksmai lentelėse („Pultas →", „Redaguoti") — pirštui, ne pelei */
  td a { display: inline-block; padding: var(--tarpas-2) 0; }
  fieldset { padding: var(--tarpas-3); }
  .savybes { max-width: 100%; }
  header { gap: var(--tarpas-3); padding: var(--tarpas-2) var(--tarpas-3); }
}

/* ── Įėjimo puslapiai (prisijungimas, registracija) ─────────────────────────────── */

body.iejimas {
  display: grid;
  place-items: center;
  min-height: 100vh;
  background: var(--fonas-iejimas);
  padding: var(--tarpas-4);
  box-sizing: border-box;
}
/* <main> įėjimo puslapiuose — tik prieinamumo žymė, grid'o nekeičia */
body.iejimas main { display: contents; }
.kortele {
  background: #fff;
  padding: var(--tarpas-6);
  border-radius: var(--kampas);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
  width: 100%;
  max-width: 360px;
  box-sizing: border-box;
}
.kortele h1 { margin-top: 0; }
.kortele input { width: 100%; margin: 0; box-sizing: border-box; }
.kortele button { margin-top: var(--tarpas-4); width: 100%; }
.kortele .klaida { margin-top: var(--tarpas-3); }

/* ── Žemėlapis ──────────────────────────────────────────────────────────────────────
   Buvo fiksuoti 420 px, įrašyti tiesiai į HTML dviejuose šablonuose. Horizontaliai
   pasuktame telefone (~375 px aukščio) tai aukščiau už visą ekraną. */
.zemelapis {
  height: clamp(240px, 45vh, 420px);
  border: 1px solid var(--remelis);
  border-radius: var(--kampas);
}

/* Tekstinė sritis neturi išlipti už ekrano (buvo cols=60 ≈ 420 px be jokios ribos) */
textarea { width: 100%; max-width: 100%; box-sizing: border-box; }

/* ── D3 „Atsakymas ir įrodymas" priedai (dizaino pertvarka, 2026-08-08) ─────────────
   Kryptis: kiekvienas ekranas pirmiausia atsako į rolės klausimą vienu ramiu sakiniu
   su laiko žyma, po juo — gyvi duomenys kaip įrodymas. Žalia niekada be laiko žymos. */

:root { --fonas-juosta: #eef1f6; }

/* Verdikto eilutė — lygiai viena pirminė puslapiui */
.verdiktas { font-size: 1.25rem; line-height: 1.45; font-weight: 400;
             margin: var(--tarpas-3) 0 var(--tarpas-5); max-width: 62ch; }
.verdiktas .zenklas { font-size: .85rem; vertical-align: 2px; margin-right: var(--tarpas-1); }
.verdiktas .laikas { color: var(--tekstas-silpnas); font-size: .9rem; white-space: nowrap; }
.verdiktas--sekcijos { font-size: 1.05rem; margin: var(--tarpas-2) 0 var(--tarpas-3); }

/* Būsenų juosta — mašinų kortelės su valstybiniais numeriais */
.busenu-juosta { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
                 gap: var(--tarpas-2); padding: var(--tarpas-3); margin: var(--tarpas-4) 0;
                 background: var(--fonas-juosta); border-radius: var(--kampas); list-style: none; }
.busenu-juosta a { display: flex; flex-wrap: wrap; align-items: baseline;
                   gap: var(--tarpas-1) var(--tarpas-2); background: #fff;
                   border: 1px solid var(--remelis); border-radius: var(--kampas);
                   padding: var(--tarpas-2) var(--tarpas-3); min-height: 44px;
                   box-sizing: border-box; text-decoration: none; color: var(--tekstas); }
.busenu-juosta a:hover { border-color: var(--melyna); }
.busenu-juosta .smulkus { flex-basis: 100%; margin-top: 2px; }

.valst-nr { font-weight: 700; font-variant-numeric: tabular-nums;
            letter-spacing: .06em; white-space: nowrap; }

/* Skaičiai lentelėse rikiuojasi stulpeliu (vienodo pločio skaitmenys) */
table { font-variant-numeric: tabular-nums; }

/* Aktyvi meniu nuoroda */
header a[aria-current="page"] { color: #fff; text-decoration: underline;
  text-decoration-color: var(--rusva); text-decoration-thickness: 2px; }
header .brand-prierasas { color: var(--tekstas-ant-melynos); font-size: .85rem; }
header nav { display: contents; }

/* „Pereiti prie turinio" — matoma tik fokusavus klaviatūra */
.pereiti { position: absolute; left: -9999px; top: 0; background: #fff; color: var(--melyna);
           padding: var(--tarpas-2) var(--tarpas-3); border-radius: var(--kampas); z-index: 10; }
.pereiti:focus { left: var(--tarpas-2); top: var(--tarpas-2); }

/* Laukiančių darbų sąrašas */
.darbai { padding-left: 0; list-style: none; }
.darbai li { margin: var(--tarpas-3) 0; }

/* Poraštė su kontaktais */
footer.porastes { border-top: 1px solid var(--remelis); background: var(--fonas-silpnas);
                  margin-top: var(--tarpas-6); padding: var(--tarpas-4) var(--tarpas-5);
                  font-size: .9rem; color: var(--tekstas-silpnas); }
footer.porastes .brand-eilute { color: var(--tekstas); font-weight: 600; }
footer.porastes p { margin: var(--tarpas-1) 0; }

/* Įėjimo kortelės „veidas" (login ir registracija) */
.kortele .brand-blokas { margin: 0 0 var(--tarpas-4); }
.kortele .brand-vardas { display: block; color: var(--melyna); font-weight: 700;
                         font-size: 1.15rem; }

/* E5.4 Formų tinklelis: kiekvienas laukas — etiketė VIRŠ lauko (kaip login.html),
   placeholder liko TIK pavyzdžiui („pvz., FMC920"). Laukui su etikete viduje —
   label + input stulpeliu; align-items: end sulygiuoja pačius laukus, kai etiketės
   skirtingo ilgio. */
.forma-tinklelis { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
                   gap: var(--tarpas-2) var(--tarpas-4); align-items: end; }
.forma-tinklelis > div { display: flex; flex-direction: column; }
.forma-tinklelis label { margin: 0 0 var(--tarpas-1); }
.forma-tinklelis input, .forma-tinklelis select { margin: 0; width: 100%;
                                                  box-sizing: border-box; }
/* Privalomo lauko žvaigždutė — rusva (veiksmo spalva), ne raudona (raudona = klaida) */
.privaloma { color: var(--rusva-tamsi); }

/* E5.5 SIM pultas: lipni antraštė (slenkant per keturias sekcijas visada matosi,
   kurios kortelės pultas atidarytas) ir sekcijų dėžutės vietoj numeruotų antraščių. */
.antraste-lipni { position: sticky; top: 0; background: #fff;
                  padding: var(--tarpas-2) 0; border-bottom: 1px solid var(--remelis);
                  z-index: 5; }
.antraste-lipni h1 { margin: 0; }
.sekcija { background: #fff; border: 1px solid var(--remelis);
           border-radius: var(--kampas); padding: var(--tarpas-4);
           margin: 0 0 var(--tarpas-6); }
.sekcija > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
/* Pilnas ICCID — spustelėjus pažymimas VISAS (kopijavimas be JavaScript) */
.kopijuojama { user-select: all; }

@media (max-width: 700px) {
  .busenu-juosta { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
                   padding: var(--tarpas-2); }
  .verdiktas { font-size: 1.15rem; }
}