/* ══════════════════════════════════════════════════════════════════
   Žinių šuolis - bendra skydelių dizaino sistema (mokinys / mokytojas / admin)
   Prekės ženklo paletė: kreminis fonas + mėlynas akcentas (kaip index.html).
   Puslapio <style> blokas kraunamas PO šito failo, tad jame lieka tik
   konkrečiam puslapiui būdingi komponentai ir geometrijos pataisos.
   ══════════════════════════════════════════════════════════════════ */

/* Kintamieji gyvena zs-tokens.css - jį reikia įkelti PRIEŠ šitą failą. */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;overflow:hidden;}
html{background:var(--bg);}
body{
  font-family:'Geist',system-ui,sans-serif;
  background:var(--bg);
  color:var(--ink);
  display:flex;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{background:var(--acc-soft);color:var(--acc-deep);}

/* Plonos, neįkyrios slinkties juostos */
*{scrollbar-width:thin;scrollbar-color:#D6D0C6 transparent;}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:#DBD5CA;border-radius:9999px;border:3px solid transparent;background-clip:content-box;}
::-webkit-scrollbar-thumb:hover{background:#C4BCAE;border:3px solid transparent;background-clip:content-box;}

/* ═══ Šoninė juosta ═══ */
.sb{
  /* 240 px, ne 224 (2026-09-03). Lietuviški meniu pavadinimai ilgi:
     „Prisijungti prie pamokos" yra 149 px, o senasis plotis teksto eilutei
     palikdavo 152 px - t. y. juosta stovėjo ties lūžio riba, o „Reguliarios
     pamokos" su ženkleliu jau lūždavo į dvi eilutes. */
  width:240px;flex-shrink:0;display:flex;flex-direction:column;
  /* Mobiliose naršyklėse 100vh neįskaito slenkančios adreso juostos, tad
     apačia likdavo nukirpta ir nepasiekiama - 100dvh matuoja tikrą matomą
     aukštį (100vh lieka atsarga senoms naršyklėms). */
  height:100vh;height:100dvh;
  background:linear-gradient(180deg,#111C33,#0F172A 55%);
  position:relative;z-index:2;overflow:hidden;
  /* Telefone landscape režimu (viewport-fit=cover) turinys pasislenka nuo
     iškarpos (notch), o tamsus fonas tęsiasi iki pat fizinio krašto. */
  padding-left:env(safe-area-inset-left);
  width:calc(240px + env(safe-area-inset-left));
}
.sb::after{ /* subtilus akcento švytėjimas viršuje */
  content:'';position:absolute;top:-110px;left:-50px;width:240px;height:240px;
  background:radial-gradient(circle,color-mix(in srgb,var(--nav) 34%,transparent),transparent 70%);
  opacity:.75;pointer-events:none;filter:blur(24px);
}
.sb-logo{
  padding:20px 18px 16px;display:flex;align-items:center;gap:10px;color:#fff;
  font-weight:700;font-size:14px;letter-spacing:-.02em;
  border-bottom:1px solid rgba(255,255,255,.08);text-decoration:none;position:relative;z-index:1;
  transition:opacity 180ms var(--ease);
}
.sb-logo:hover{opacity:.8;}
.sb-logo img{height:30px;width:auto;border-radius:8px;background:#fff;padding:2px 5px;flex-shrink:0;}
/* Skydelio vaidmuo - NE kategorija. Iki 2026-09-03 jis buvo `.sb-label`, tad
   atrodė lygiai taip pat kaip meniu kategorijos ir „KOREPETITORIUS" skaitėsi
   kaip antraštė virš „Skydelio". Dabar vaidmuo rašomas įprastu raidynu ir
   tyliau (.62 - tas pats tonas kaip poraštės vaidmuo), o didžiosios su
   išretintu tarpu paliktos TIK kategorijoms. Dviejų reikšmių vienas stilius
   buvo vienintelė priežastis, kodėl kategorijų riba nesimatė. */
.sb-role{
  font-size:12px;font-weight:500;color:rgba(255,255,255,.62);
  padding:12px 22px 2px;position:relative;z-index:1;
}
/* Meniu kategorija. Antraštė - tikras `<h2>`, o pati grupė - `role="group"`
   su `aria-labelledby`, tad ekrano skaitytuvas skelbia „Pamokos, grupė", o ne
   dvylika mygtukų iš eilės. Vaizdas nuo to nepasikeičia nė pikseliu. */
.sb-label{
  margin:0;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.72);padding:16px 22px 6px;position:relative;z-index:1;
}
.sb-grupe{display:flex;flex-direction:column;gap:2px;}
.sb-nav{
  padding:4px 10px;flex:1;display:flex;flex-direction:column;gap:2px;overflow-y:auto;
  position:relative;z-index:1;
  /* Bendras slankiklis (#DBD5CA) sukurtas kreminiam turiniui - tamsioje juostoje
     jis švyti kaip šviesus brūkšnys. Su kategorijomis meniu paaugo ir žemame
     lange tikrai slenka, tad slankiklis pritaikomas savo fonui. */
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent;
}
.sb-nav::-webkit-scrollbar{width:8px;}
.sb-nav::-webkit-scrollbar-track{background:transparent;}
.sb-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border:2px solid transparent;background-clip:content-box;}
.sb-nav::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.32);border:2px solid transparent;background-clip:content-box;}

.nav-link{
  position:relative;display:flex;align-items:center;gap:11px;
  padding:9px 12px;border-radius:11px;font-size:13px;font-weight:500;
  color:rgba(255,255,255,.56);cursor:pointer;border:1px solid transparent;background:none;
  text-align:left;width:100%;font-family:inherit;text-decoration:none;
  transition:color 180ms var(--ease),background 180ms var(--ease),border-color 180ms var(--ease),transform 180ms var(--ease);
}
.nav-link::before{ /* akcento brūkšnys kairėje */
  content:'';position:absolute;left:0;top:50%;width:2px;height:16px;border-radius:9999px;
  background:var(--nav);transform:translateY(-50%) scaleY(0);opacity:0;
  transition:transform 260ms var(--ease),opacity 260ms var(--ease);
}
.nav-link:hover{background:rgba(255,255,255,.07);color:rgba(255,255,255,.92);}
.nav-link:active{transform:scale(.985);}
.nav-link.active{
  background:color-mix(in srgb,var(--nav) 34%,transparent);
  border-color:color-mix(in srgb,var(--nav) 55%,transparent);
  color:#fff;box-shadow:0 8px 20px -12px color-mix(in srgb,var(--nav) 40%,transparent);
}
.nav-link.active::before{transform:translateY(-50%) scaleY(1);opacity:1;}
.nav-link i,.nav-link svg{width:15px;height:15px;flex-shrink:0;opacity:.75;transition:opacity 180ms var(--ease);}
.nav-link:hover i,.nav-link:hover svg{opacity:1;}
.nav-link.active i,.nav-link.active svg{opacity:1;}

/* Meniu punktas, kuris reikalauja dėmesio (pvz. nepasirašyta sutartis).
   Rodomas gintaru, kad nepasimestų tarp įprastų punktų, bet pasirinkta
   skiltis (.active) vis tiek atrodo pasirinkta - todėl :not(.active). */
.nav-link.nav-svarbu:not(.active){
  background:rgba(245,158,11,.14);
  border-color:rgba(245,158,11,.42);
  color:#FDE68A;
}
.nav-link.nav-svarbu:not(.active):hover{background:rgba(245,158,11,.22);color:#FEF3C7;}
.nav-link.nav-svarbu i,.nav-link.nav-svarbu svg{opacity:1;}
.nav-link.nav-svarbu::before{background:#F59E0B;transform:translateY(-50%) scaleY(1);opacity:1;}

/* Skaitiklis meniu punkte (neįvertintos pamokos, reguliarių pamokų serijos,
   nepasirašyta sutartis). Iki 2026-09-03 jis buvo aprašytas ATSKIRAI
   `mokinys.html` ir `mokytojas.html`, dviem skirtingais dydžiais ir dviem
   skirtingomis spalvomis - tas pats elementas dviejuose skydeliuose atrodė
   nevienodai. Paliktas ryškesnis derinys (tamsus tekstas ant gintaro,
   6,97:1; balta ant gintaro būtų davusi 2,15:1) ir kompaktiškesnis dydis. */
.nav-zenkl{
  margin-left:auto;min-width:19px;height:19px;padding:0 6px;border-radius:9999px;
  background:var(--amb,#F59E0B);color:#451A03;font-size:12px;font-weight:800;
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
}

.sb-footer{padding:12px 10px;border-top:1px solid rgba(255,255,255,.08);position:relative;z-index:1;}
.user-row{display:flex;align-items:center;gap:10px;padding:8px 12px;margin-bottom:2px;}
.user-av{
  width:34px;height:34px;border-radius:50%;
  /* --av-nuo leidžia puslapiui pasirinkti tamsesnį gradiento pradžios toną:
     baltoms raidėms ant šviesaus žalio trūkdavo kontrasto (2,54:1). */
  background:linear-gradient(135deg,var(--av-nuo,var(--acc2)),var(--acc));
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:12.5px;
  flex-shrink:0;box-shadow:0 0 0 1px rgba(255,255,255,.14),0 8px 18px -10px var(--acc-glow);
}
.user-name{color:#fff;font-size:13px;font-weight:600;}
.user-role{color:rgba(255,255,255,.62);font-size:12px;}

/* ═══ Pagrindinė sritis ═══ */
.main{flex:1;display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden;min-width:0;background:var(--bg);}
.topbar{
  background:rgba(250,248,244,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--brd);padding:14px 26px;
  padding-right:max(26px, env(safe-area-inset-right));
  display:flex;align-items:center;justify-content:space-between;flex-shrink:0;gap:14px;
  position:relative;z-index:3;
}
.topbar-left{display:flex;align-items:center;gap:12px;min-width:0;}
.topbar-left h1{font-size:18px;font-weight:800;letter-spacing:-.035em;color:var(--ink);}
.topbar-left p{font-size:12px;color:var(--ink3);margin-top:1px;}
.topbar-right{display:flex;align-items:center;gap:10px;}

/* ═══ Mobili šoninė juosta ═══ */
.sb-overlay{display:none;position:fixed;inset:0;z-index:40;background:rgba(15,23,42,.45);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);}
.sb-overlay.open{display:block;animation:zsFade 220ms ease both;}
.ham{display:none;background:none;border:none;cursor:pointer;padding:6px;color:var(--ink2);border-radius:9px;line-height:0;flex-shrink:0;transition:background 160ms var(--ease),color 160ms var(--ease);}
.ham:hover{background:rgba(15,23,42,.06);color:var(--ink);}
.ham svg{width:22px;height:22px;}

/* ═══ Sekcijos ═══ */
.section{display:none;flex:1;overflow:hidden;flex-direction:column;min-height:0;}
.section.active{display:flex;}
.sec-inner{
  flex:1;overflow-y:auto;padding:22px 26px 26px;display:flex;flex-direction:column;gap:14px;
  /* Saugios zonos: landscape režimu turinys nelenda po iškarpa dešinėje,
     o apačioje lieka vietos virš telefono valdymo juostos. */
  padding-right:max(26px, env(safe-area-inset-right));
  padding-bottom:calc(26px + env(safe-area-inset-bottom));
}

/* Sekcijos pasikeitimas: turinys pakyla su nedidele pakopa */
.section.active > .sec-inner > *{animation:zsRise 460ms var(--ease) both;}
.section.active > .sec-inner > *:nth-child(1){animation-delay:0ms;}
.section.active > .sec-inner > *:nth-child(2){animation-delay:45ms;}
.section.active > .sec-inner > *:nth-child(3){animation-delay:85ms;}
.section.active > .sec-inner > *:nth-child(4){animation-delay:120ms;}
.section.active > .sec-inner > *:nth-child(5){animation-delay:150ms;}
.section.active > .sec-inner > *:nth-child(6){animation-delay:175ms;}
.section.active > .sec-inner > *:nth-child(n+7){animation-delay:195ms;}

/* ═══ Kortelės ═══ */
.card{
  background:var(--surface);background-image:var(--elev);
  border:1px solid var(--brd);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--shadow);
  transition:border-color 220ms var(--ease),box-shadow 220ms var(--ease);
}
.card:hover{border-color:var(--brd2);box-shadow:var(--shadow-lift);}
.card-head{padding:14px 18px;border-bottom:1px solid var(--brd);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;gap:12px;flex-wrap:wrap;}
.card-head h2{font-size:13.5px;font-weight:700;color:var(--ink);letter-spacing:-.015em;}
.card-head p{font-size:12px;color:var(--ink3);margin-top:2px;}
.card-body{padding:16px 18px;}

/* ═══ Rodikliai ═══ */
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;flex-shrink:0;}
.stats-row.three{grid-template-columns:repeat(3,1fr);}
.stat{
  position:relative;background:var(--surface);background-image:var(--elev);
  border:1px solid var(--brd);border-radius:var(--r);padding:16px 18px;overflow:hidden;
  box-shadow:var(--shadow);
  transition:transform 260ms var(--ease),box-shadow 260ms var(--ease),border-color 260ms var(--ease);
}
.stat::after{ /* plonas akcento potėpis viršuje */
  content:'';position:absolute;top:0;left:16px;right:16px;height:2px;border-radius:9999px;
  background:linear-gradient(90deg,transparent,var(--acc-line),transparent);
  opacity:0;transition:opacity 260ms var(--ease);
}
.stat:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift);border-color:var(--brd2);}
.stat:hover::after{opacity:1;}
.stat-lbl{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);margin-bottom:9px;}
.stat-val{font-size:25px;font-weight:800;letter-spacing:-.045em;line-height:1;margin-bottom:5px;color:var(--ink);font-variant-numeric:tabular-nums;}
/* Skaičių rašalas - tamsieji tonai. --amb (#F59E0B) ant kreditų kortelės
   gradiento davė 2,09:1, --grn ant balto 2,54:1 - o tai skaičiai, kurių
   mokinys čia ir ieško. Dabar 4,89:1 ir 5,02:1. */
.stat-val.b{color:var(--acc);}.stat-val.g{color:var(--grn-ink);}.stat-val.a{color:var(--amb-ink);}.stat-val.r{color:var(--red-ink);}.stat-val.p{color:var(--pur);}
.stat-sub{font-size:12px;color:var(--ink3);}
.stat.kred,.stat.warn{border-color:var(--amb-line);background-image:linear-gradient(180deg,#FFFCF2,#FFFBEB);}
.stat.kred .stat-lbl,.stat.warn .stat-lbl{color:#92400E;}

/* ═══ Ženkleliai ═══ */
.badge{display:inline-flex;align-items:center;padding:3px 9px;border-radius:9999px;font-size:12px;font-weight:600;white-space:nowrap;border:1px solid transparent;}
/* Ženklelių tekstas - tamsieji tonai. Šviesieji (#16A34A, #D97706, #DC2626,
   #2563EB) ant savo pastelinių fonų davė 3,07-4,41:1, o WCAG 2.2 AA reikalauja
   4,5:1. Fonai ir kraštinės nesikeičia - keičiasi tik rašalas. */
.bg{background:var(--grn-soft);color:var(--grn-ink);border-color:var(--grn-line);}
.ba{background:var(--amb-soft);color:var(--amb-ink);border-color:var(--amb-line);}
.br{background:var(--red-soft);color:var(--red-ink);border-color:var(--red-line);}
.bb{background:var(--blu-soft);color:#1E40AF;border-color:var(--blu-line);}
.bp{background:var(--pur-soft);color:var(--pur);border-color:var(--pur-line);}
.bn{background:#FFFFFF;color:var(--ink3);border-color:var(--brd);}
/* Įvykdyta - neutrali: tai istorija, ji turi atsitraukti. Anksčiau dalijosi
   žalia „bg" klase su „vyksta dabar". */
.bi{background:#F1F5F9;color:#334155;border-color:#CBD5E1;}

/* ═══ Mygtukai ═══ */
.btn-blue{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--acc);
  background:linear-gradient(180deg,var(--acc),color-mix(in srgb,var(--acc) 86%,#000));
  color:#fff;padding:9px 17px;border-radius:11px;font-size:13px;font-weight:700;
  border:none;cursor:pointer;text-decoration:none;font-family:inherit;
  box-shadow:0 1px 2px rgba(15,23,42,.12),0 10px 22px -12px var(--acc-glow);
  transition:transform 180ms var(--ease),box-shadow 220ms var(--ease),filter 180ms var(--ease);
}
.btn-blue:hover{filter:brightness(1.06);box-shadow:0 2px 4px rgba(15,23,42,.12),0 14px 28px -12px var(--acc-glow);transform:translateY(-1px);}
.btn-blue:active{transform:translateY(0) scale(.98);}
.btn-blue i,.btn-blue svg{width:14px;height:14px;}
.btn-white{
  display:inline-flex;align-items:center;gap:7px;background:#fff;color:var(--acc-deep);
  font-weight:700;font-size:13px;padding:10px 19px;border-radius:11px;border:none;cursor:pointer;
  white-space:nowrap;text-decoration:none;font-family:inherit;
  box-shadow:0 1px 2px rgba(15,23,42,.10),0 12px 26px -16px rgba(15,23,42,.6);
  transition:transform 180ms var(--ease),box-shadow 220ms var(--ease);
}
.btn-white:hover{transform:translateY(-1px);box-shadow:0 2px 6px rgba(15,23,42,.12),0 16px 30px -16px rgba(15,23,42,.7);}
.btn-white:active{transform:scale(.98);}
.btn-ghost{
  display:inline-flex;align-items:center;gap:6px;background:#fff;color:var(--ink2);
  padding:8px 15px;border-radius:10px;font-size:12.5px;font-weight:600;border:1px solid var(--brd);
  cursor:pointer;font-family:inherit;
  transition:background 180ms var(--ease),border-color 180ms var(--ease),color 180ms var(--ease),transform 180ms var(--ease);
}
.btn-ghost:hover{border-color:var(--acc-line);color:var(--acc);background:var(--acc-soft);}
.btn-ghost:active{transform:scale(.98);}
.btn-ghost:disabled{opacity:.5;cursor:not-allowed;}
.btn-ghost i,.btn-ghost svg{width:14px;height:14px;}
.btn-ok{
  display:inline-flex;align-items:center;gap:5px;padding:5px 12px;border-radius:9px;
  font-size:12px;font-weight:700;color:var(--grn-ink);background:var(--grn-soft);
  border:1px solid var(--grn-line);cursor:pointer;font-family:inherit;white-space:nowrap;
  transition:background 160ms var(--ease),transform 160ms var(--ease);
}
.btn-ok:hover{background:#DCFCE7;}
.btn-ok:active{transform:scale(.97);}
.btn-ok:disabled{opacity:.5;cursor:not-allowed;}
.btn-ok i,.btn-ok svg{width:12px;height:12px;}
.btn-danger{
  display:inline-flex;align-items:center;gap:6px;background:var(--red-soft);color:var(--red-ink);
  border:1px solid var(--red-line);padding:8px 15px;border-radius:10px;
  font-size:12.5px;font-weight:700;cursor:pointer;font-family:inherit;
  transition:background 160ms var(--ease),transform 160ms var(--ease);
}
.btn-danger:hover{background:#FEE2E2;}
.btn-danger:active{transform:scale(.98);}
.btn-danger i,.btn-danger svg{width:13px;height:13px;}
.btn-cancel{
  display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:9px;
  font-size:12px;font-weight:600;color:var(--red-ink);background:var(--red-soft);
  border:1px solid var(--red-line);cursor:pointer;font-family:inherit;white-space:nowrap;
  transition:background 160ms var(--ease),transform 160ms var(--ease);
}
.btn-cancel:hover{background:#FEE2E2;}
.btn-cancel:active{transform:scale(.97);}
.btn-cancel i,.btn-cancel svg{width:12px;height:12px;}
.btn-cancel-dis{
  display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:9px;
  font-size:12px;font-weight:600;color:var(--ink3);background:var(--s2);
  border:1px solid var(--brd);cursor:not-allowed;white-space:nowrap;
}
.link-btn{font-size:12.5px;font-weight:700;color:var(--acc);background:none;border:none;cursor:pointer;padding:0;text-decoration:none;transition:opacity 160ms var(--ease);min-height:24px;display:inline-flex;align-items:center;}
.link-btn:hover{opacity:.75;text-decoration:underline;}

/* ═══ Hero blokas ═══ */
.hero{
  position:relative;border-radius:var(--r);padding:22px 26px;flex-shrink:0;overflow:hidden;
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  background:linear-gradient(135deg,var(--acc-deep),var(--acc));
  background:
    radial-gradient(120% 160% at 8% -40%,rgba(255,255,255,.22),transparent 55%),
    radial-gradient(90% 140% at 95% 140%,color-mix(in srgb,var(--acc2) 55%,transparent),transparent 62%),
    linear-gradient(135deg,var(--acc-deep),var(--acc));
  box-shadow:0 1px 2px rgba(15,23,42,.10),0 22px 44px -26px var(--acc-glow);
}
.hero > *{position:relative;z-index:1;}
.hero.alert{background:radial-gradient(120% 160% at 8% -40%,rgba(255,255,255,.24),transparent 55%),linear-gradient(135deg,#92400E,#D97706);box-shadow:0 1px 2px rgba(15,23,42,.1),0 22px 44px -26px rgba(217,119,6,.45);}
/* Pamokos būsena hero kortelėje. Buvo 9,5 px didžiosiomis ties 3,14:1 -
   ir antraštėlės pavidalas, ir žemiau DESIGN.md 12 px ribos. Dabar normalus
   sakinys, 4,84:1. */
.hero-eyebrow{font-size:12.5px;font-weight:600;letter-spacing:0;color:rgba(255,255,255,.9);margin-bottom:7px;}
.hero-title{font-size:21px;font-weight:800;letter-spacing:-.035em;color:#fff;margin-bottom:7px;}
/* .78 ant hero gradiento davė 4,06-4,49:1 (išmatuota pikseliais) - riba 4,5:1 */
.hero-meta{display:flex;align-items:center;flex-wrap:wrap;gap:16px;color:rgba(255,255,255,.92);font-size:12.5px;}
.hero-meta-item{display:flex;align-items:center;gap:6px;}
.hero-meta-item i,.hero-meta-item svg{width:13px;height:13px;opacity:.85;}

/* ═══ Sąrašų eilutės ═══ */
.lesson-item,.row-item{
  display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:12px;
  background:var(--s2);border:1px solid transparent;
  transition:background 180ms var(--ease),border-color 180ms var(--ease),transform 180ms var(--ease);
}
.lesson-item{margin-bottom:6px;}
.row-item + .row-item{margin-top:6px;}
.lesson-item:hover,.row-item:hover{background:#F5F3EE;border-color:var(--brd);transform:translateX(2px);}
.lesson-item.first{background:var(--acc-soft);border-color:var(--acc-line);}
.row-av,.l-av{width:32px;height:32px;border-radius:9999px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;flex-shrink:0;color:#fff;}
.row-main{flex:1;min-width:0;}
.row-t,.l-name{font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.row-s,.l-sub{font-size:12px;color:var(--ink3);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.l-time{margin-left:auto;font-size:12px;font-weight:700;color:var(--ink2);white-space:nowrap;text-align:right;}
/* Pamokos atšaukimas eilutėje - matomas tik užvedus arba per klaviatūrą,
   kad kasdienis sąrašas neatrodytų kaip raginimas atšaukti */
.l-cancel{
  flex-shrink:0;width:26px;height:26px;border-radius:8px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--brd);background:#fff;color:var(--ink3);
  opacity:0;transition:opacity 160ms var(--ease),background 160ms var(--ease),color 160ms var(--ease);
}
.lesson-item:hover .l-cancel,.l-cancel:focus-visible{opacity:1;}
.l-cancel:hover{background:#FEE2E2;border-color:#FECACA;color:var(--red);}
/* Likus <24 val. atšaukti nebegalima - vietoj mygtuko rodomas pilkas ženklas */
.l-cancel.dis{cursor:not-allowed;background:var(--s2);color:var(--ink3);}
.l-cancel.dis:hover{background:var(--s2);border-color:var(--brd);color:var(--ink3);}
.l-cancel i,.l-cancel svg{width:13px;height:13px;}
@media (hover:none){.l-cancel{opacity:1;}}
.list-body{padding:11px 12px;}

/* ═══ Greiti veiksmai ═══ */
.qa-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:14px 16px;}
.qa-btn{
  display:flex;align-items:center;gap:8px;padding:11px 12px;border-radius:12px;
  border:1px solid var(--brd);background:var(--s2);cursor:pointer;
  font-size:12.5px;font-weight:600;color:var(--ink2);font-family:inherit;text-decoration:none;
  transition:background 180ms var(--ease),border-color 180ms var(--ease),color 180ms var(--ease),transform 180ms var(--ease),box-shadow 180ms var(--ease);
}
.qa-btn:hover{border-color:var(--acc-line);color:var(--acc);background:var(--acc-soft);transform:translateY(-2px);box-shadow:0 10px 20px -16px var(--acc-glow);}
.qa-btn:active{transform:translateY(0) scale(.98);}
.qa-btn i,.qa-btn svg{width:15px;height:15px;flex-shrink:0;}

/* ═══ Lentelės ═══ */
.table-wrap{
  background:var(--surface);border:1px solid var(--brd);border-radius:var(--r);
  overflow:auto;box-shadow:var(--shadow);
  /* Telefone lentelė netelpa ir slenka horizontaliai, bet apie tai niekas
     nesakė - dešinysis kraštas nublunka, kol yra kur slinkti, ir dingsta
     nuslinkus iki galo. Piešiama pačiu fonu (background-attachment:local),
     tad papildomo elemento nereikia. */
  background-image:linear-gradient(to right,var(--surface),var(--surface)),
                   linear-gradient(to left,rgba(15,23,42,.10),rgba(15,23,42,0));
  background-position:right center,right center;
  background-repeat:no-repeat;
  background-size:100% 100%,26px 100%;
  background-attachment:local,scroll;
}
.card .table-wrap{border:none;border-radius:0;box-shadow:none;}
table{width:100%;border-collapse:collapse;}
thead th{
  padding:11px 18px;text-align:left;font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--ink3);background:var(--s2);
  border-bottom:1px solid var(--brd);white-space:nowrap;
  /* `position:sticky` čia buvo negyvas: .table-wrap neturėjo aukščio ribos,
     tad viduje niekas niekada nesislinkdavo vertikaliai ir antraštė neturėjo
     prie ko lipti. Riba duodama tik ilgiems sąrašams (žr. .table-wrap.ilgas). */
  position:sticky;top:0;z-index:1;
}
/* Matomas tik ekrano skaitytuvui - tuščiai veiksmų stulpelio antraštei. */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
tbody td{padding:13px 18px;border-bottom:1px solid var(--brd);font-size:13px;color:var(--ink2);vertical-align:middle;}
tbody tr:last-child td{border-bottom:none;}
tbody tr{transition:background 140ms var(--ease);}
tbody tr:hover td{background:#FBFAF7;}
td.strong{font-weight:600;color:var(--ink);}
.cell-user{display:flex;align-items:center;gap:10px;}
/* Prisegtas veiksmų stulpelis */
td.sticky-col{position:sticky;right:0;background:#fff;box-shadow:-10px 0 10px -10px rgba(15,23,42,.16);}
thead th.sticky-col{position:sticky;right:0;top:0;background:var(--s2);z-index:2;box-shadow:-10px 0 10px -10px rgba(15,23,42,.16);}
tbody tr:hover td.sticky-col{background:#FBFAF7;}

/* ═══ Filtrai ir paieška ═══ */
.filter-bar{display:flex;align-items:center;gap:8px;flex-shrink:0;flex-wrap:wrap;}
.filter-btn{
  padding:7px 14px;border-radius:9999px;font-size:12.5px;font-weight:600;color:var(--ink3);
  background:#fff;border:1px solid var(--brd);cursor:pointer;font-family:inherit;
  transition:background 180ms var(--ease),border-color 180ms var(--ease),color 180ms var(--ease),transform 160ms var(--ease),box-shadow 180ms var(--ease);
}
.filter-btn:hover:not(.on){border-color:var(--acc-line);color:var(--acc);background:var(--acc-soft);}
.filter-btn:active{transform:scale(.97);}
/* Naktinis, ne mėlynas: mėlyna šioje sistemoje reiškia „paspaudžiama ir
   suveiks", o pasirinktas filtras stovėjo 8 px nuo mėlyno „Rezervuoti pamoką". */
.filter-btn.on{background:var(--ink);color:#fff;border-color:var(--ink);box-shadow:0 8px 18px -14px rgba(15,23,42,.5);}
.search{position:relative;}
.search svg,.search i{width:13px;height:13px;position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--ink3);}
.search input,.search-inp{
  padding:8px 12px 8px 32px;font-size:12.5px;border-radius:10px;border:1px solid var(--brd);
  font-family:inherit;color:var(--ink);outline:none;min-width:210px;background:#fff;
  transition:border-color 180ms var(--ease),box-shadow 180ms var(--ease);
}
.search input:focus,.search-inp:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgba(37,99,235,.10);}

/* ═══ Formos ═══ */
.f-lbl{display:block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.11em;color:var(--ink3);margin-bottom:6px;}
.f-inp{
  width:100%;border:1px solid var(--brd);border-radius:10px;padding:9px 12px;font-size:13.5px;
  font-family:inherit;outline:none;color:var(--ink);background:#fff;
  transition:border-color 180ms var(--ease),box-shadow 180ms var(--ease);
}
.f-inp:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgba(37,99,235,.10);}
textarea.f-inp{resize:none;}
input[type=checkbox],input[type=radio]{accent-color:var(--acc);}

/* ═══ Pastabos / informacinės juostos ═══ */
/* `display:flex` klasėje nugali naršyklės `[hidden]{display:none}`, tad be
   šios eilutės paslėpta klaidos juosta vis tiek matoma - tuščias raudonas
   stačiakampis virš formos. Taisyklė turi eiti PRIEŠ display deklaraciją
   nebūtina, bet specifiškumas su [hidden] didesnis, tad ji laimi. */
.note[hidden],.policy-note[hidden],.info-box[hidden],.avail-info[hidden]{display:none;}
.note,.policy-note,.info-box,.avail-info{
  display:flex;align-items:flex-start;gap:10px;padding:12px 15px;border-radius:12px;
  font-size:12px;line-height:1.55;background:var(--surface);border:1px solid var(--brd);color:var(--ink2);
  box-shadow:var(--shadow);
}
.note i,.note svg,.policy-note i,.policy-note svg{width:15px;height:15px;flex-shrink:0;margin-top:1px;color:var(--ink3);}
.note.info{background:var(--s2);border-color:var(--brd);color:var(--ink2);box-shadow:none;}
.note.warn,.policy-note{background:var(--amb-soft);border-color:var(--amb-line);color:#78350F;box-shadow:none;}
.note.warn i,.note.warn svg,.policy-note i,.policy-note svg{color:#D97706;}
.note.err{background:var(--red-soft);border-color:var(--red-line);color:var(--red-ink);box-shadow:none;}
.note.err i,.note.err svg{color:var(--red);}
.info-box{padding:16px 18px;align-items:flex-start;gap:12px;}
.info-box i,.info-box svg{width:18px;height:18px;flex-shrink:0;color:var(--ink3);margin-top:1px;}
/* h2, nes šios antraštės skiltyse eina pirmos po <h1> - anksčiau čia buvo
   h3 ir antraščių lygis šokdavo per vieną. */
.info-box h2,.info-box h3{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:5px;}
.info-box p{font-size:12px;color:var(--ink2);line-height:1.6;}
.msg{font-size:12px;color:var(--ink3);}

/* ═══ Tuščios būsenos ═══ */
.empty-box{
  padding:34px 24px;text-align:center;color:var(--ink3);font-size:12.5px;line-height:1.6;
  display:flex;flex-direction:column;align-items:center;gap:4px;
}
/* Tuščios būsenos ženklas. Buvo plikas 38 px skritulys - vienodas ir „dar nėra
   failų", ir „nepavyko įkelti", tad pati grafika nieko nesakė. Dabar ženklas
   piešiamas (ikona `data-ico` per zsIkonos), o klaidos atvejis (.klaida)
   nusidažo raudonai, kad dvi visiškai skirtingos būsenos nebeatrodytų vienodai. */
.empty-box::before{
  content:'';width:38px;height:38px;border-radius:50%;margin-bottom:8px;
  background:var(--acc-soft);border:1px solid var(--acc-line);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%232563EB' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7V5a2 2 0 0 1 2-2h3l2 2h7a2 2 0 0 1 2 2v1'/%3E%3Cpath d='M2 10h20l-1.5 9a2 2 0 0 1-2 2H5.5a2 2 0 0 1-2-2Z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;
}
.empty-box.klaida::before{
  background-color:var(--red-soft);border-color:var(--red-line);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23B91C1C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3C/svg%3E");
}

/* ═══ Failai ═══ */
.file-item{
  display:flex;align-items:center;gap:12px;padding:11px 14px;
  background:#fff;border:1px solid var(--brd);border-radius:12px;text-decoration:none;
  transition:background 180ms var(--ease),border-color 180ms var(--ease),transform 180ms var(--ease),box-shadow 180ms var(--ease);
}
a.file-item:hover{border-color:var(--acc-line);background:var(--acc-soft);transform:translateX(2px);box-shadow:0 10px 20px -18px var(--acc-glow);}
/* 34 px, nes tekstas pakeltas iki 12 px pagal DESIGN.md ribą - „PDF" 800 svoriu
   32 px dėžutėje gulėtų prie pat kraštų. Rašalas - tamsieji tonai: šviesieji
   ant savo pastelinių fonų davė 3,15-4,75:1. */
.file-ext{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;letter-spacing:.02em;flex-shrink:0;}
.fe-pdf,.file-ext.pdf{background:var(--red-soft);color:var(--red-ink);}
.fe-doc,.file-ext.doc{background:var(--blu-soft);color:#1E40AF;}
.fe-img,.file-ext.img{background:var(--grn-soft);color:var(--grn-ink);}
.file-ext.ppt{background:#FFF7ED;color:#C2410C;}
.fe-def{background:var(--s2);color:var(--ink3);}
.file-meta{flex:1;min-width:0;}
.file-nm,.file-name{font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.file-dt,.file-date{font-size:12px;color:var(--ink3);margin-top:1px;}
.dl-icon{width:15px;height:15px;flex-shrink:0;color:var(--ink3);}

/* ═══ Šoninis langas (drawer) ═══ */
.dr-overlay{display:none;position:fixed;inset:0;z-index:60;background:rgba(15,23,42,.42);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);}
.dr-overlay.open{display:block;animation:zsFade 240ms ease both;}
.drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:61;width:min(480px,100vw);
  background:var(--bg);border-left:1px solid var(--brd);box-shadow:-30px 0 70px -30px rgba(15,23,42,.45);
  transform:translateX(100%);transition:transform 360ms var(--ease);display:flex;flex-direction:column;
  padding-right:env(safe-area-inset-right);
}
.drawer.open{transform:translateX(0);}
.dr-head{padding:17px 20px;border-bottom:1px solid var(--brd);display:flex;align-items:center;gap:12px;flex-shrink:0;background:var(--surface);}
.dr-body{flex:1;overflow-y:auto;padding:18px 20px;display:flex;flex-direction:column;gap:18px;}
.dr-sec h3{font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink3);margin-bottom:9px;}
.dr-close{margin-left:auto;background:none;border:none;cursor:pointer;color:var(--ink3);padding:6px;border-radius:9px;line-height:0;transition:background 160ms var(--ease),color 160ms var(--ease);}
.dr-close:hover{background:var(--s2);color:var(--ink);}
.dr-kv{display:grid;grid-template-columns:110px 1fr;gap:5px 10px;font-size:13px;}
.dr-kv dt{color:var(--ink3);}
.dr-kv dd{color:var(--ink);font-weight:500;overflow-wrap:anywhere;}

/* Perėjimo tarp puslapių stilius (#zs-veil) - dashboard-ui.js. */

/* ═══ Animacijos ═══ */
@keyframes zsRise{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}
@keyframes zsFade{from{opacity:0;}to{opacity:1;}}
@keyframes zsEnter{from{opacity:0;transform:translateY(6px) scale(.995);}to{opacity:1;transform:none;}}
@keyframes zsPulse{0%,100%{opacity:1;}50%{opacity:.45;}}

/* ═══ Mobilus išdėstymas ═══ */
@media(max-width:639px){
  .sb{position:fixed;left:0;top:0;bottom:0;z-index:50;transform:translateX(-100%);transition:transform 320ms var(--ease);box-shadow:20px 0 60px -20px rgba(15,23,42,.45);}
  .sb.open{transform:translateX(0);}
  .ham{display:flex;align-items:center;justify-content:center;}
  .main{width:100%;}
  .topbar{padding:12px 16px;padding-right:max(16px, env(safe-area-inset-right));}
  .sec-inner{
    padding:16px;
    padding-right:max(16px, env(safe-area-inset-right));
    padding-bottom:calc(16px + env(safe-area-inset-bottom));
  }
  .stats-row,.stats-row.three{grid-template-columns:1fr 1fr;}
  .row-item .badge{white-space:normal;text-align:right;}
  .search input{min-width:0;width:100%;}
  .card-head .search,.filter-bar .search{width:100%;margin-left:0;}
  .card-head{align-items:flex-start;}
}

/* ═══ Sumažintas judesys ═══ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-delay:0ms !important;transition-duration:.01ms !important;}
}

/* ═══ Slapukų juosta (analytics.js) ═══
   analytics.js savo stilius įterpia vėliau, tad reikia didesnio
   specifiškumo - ID + klasė. */
#zs-consent .zs-consent__box{
  border-color:var(--brd);border-radius:var(--r);
  box-shadow:0 1px 2px rgba(15,23,42,.06),0 22px 48px -26px rgba(15,23,42,.55);
}
#zs-consent .zs-consent__btn--primary{background:var(--acc);}
#zs-consent .zs-consent__btn--primary:hover{background:var(--acc-deep);}

/* ── Prieinamumas ─────────────────────────────────────────────────────────────
   1) Matomas fokusas. Klaviatūra naršančiam be jo nesimato, kur jis yra;
      :focus-visible neliečia paspaudimų pele, tad pelės naudotojui niekas
      nepasikeičia. Atskirus stilius turintys elementai šį perrašo patys.
   2) „Pereiti prie turinio" nuoroda - pirmasis <body> vaikas kiekviename
      puslapyje. Matoma tik gavusi fokusą (Tab), kad klaviatūra naršantis
      neturėtų kaskart praeiti pro visą meniu. Taikinys - id="turinys".
   ────────────────────────────────────────────────────────────────────────── */
:focus-visible{outline:2px solid var(--acc,#2563EB);outline-offset:2px;}
.zs-skip{position:fixed;left:8px;top:-64px;z-index:99999;background:#0F172A;color:#fff;
  padding:10px 16px;border-radius:0 0 10px 10px;text-decoration:none;
  font:600 14px/1.2 system-ui,-apple-system,"Segoe UI",sans-serif;transition:top .15s ease;}
.zs-skip:focus{top:0;}

/* ── Užrakintas veiksmas ──
   Kol nėra patvirtintos sutarties, serveris rezervacijos ir pirkimo nepriima.
   Mygtukas neslepiamas ir neišjungiamas: jis nustoja būti mėlynas (mėlyna šioje
   sistemoje reiškia „paspaudžiama ir suveiks"), gauna spynos ženklą ir veda ten,
   kur problema sprendžiama - į sutarties skiltį. */
.vartai-uzrakinta{
  background:var(--amb-soft) !important;
  background-image:none !important;
  color:var(--amb-ink) !important;
  border:1px solid #D97706 !important;
  box-shadow:none !important;
  filter:none !important;
}
.vartai-uzrakinta:hover{
  background:#FDE68A !important;
  color:var(--amb-ink) !important;
  transform:none !important;
  box-shadow:none !important;
}
/* Priežastis. Buvo `white-space:nowrap` ir dėl to 251 px mygtukas 300 px
   kortelėje išsiliedavo 80 px už jos krašto (išmatuota ties 1440 px), o žemiau
   520 px priežastis dingdavo visai - telefone užrakintas mygtukas nesakydavo
   nieko. Dabar ji laužoma kaip įprastas tekstas ir rodoma visuose pločiuose. */
.vartai-uzrakinta{flex-wrap:wrap;white-space:normal;}
.vartai-uzrakinta::after{
  content:"Laukiame sutarties";
  flex-basis:100%;
  font-size:12px;font-weight:600;letter-spacing:.01em;
  opacity:.85;
}

/* ── Pranešimų juosta ──
   Viena vieta atšaukimo, apmokėjimo ir serijos atnaujinimo rezultatui. Anksčiau
   klaidos ėjo per naršyklės sisteminį langą, o sėkmė nebūdavo skelbiama niekaip.
   role="status" + aria-live daro ją ir vienintele šio puslapio garsine sritimi. */
.pranesimas{
  margin:0 24px 16px;padding:13px 16px;
  border-radius:var(--r);border:1px solid;
  font-size:13.5px;line-height:1.5;font-weight:500;
}
.pranesimas.gerai{background:var(--grn-soft);border-color:#16A34A;color:#15803D;}
.pranesimas.klaida{background:#FEF2F2;border-color:#DC2626;color:#991B1B;}
@media (max-width:700px){ .pranesimas{margin:0 16px 14px;} }

/* Kelias pirkti tuščioje kreditų kortelėje. Ne mėlynas: kortelė gintarinė, o
   mėlyna sistemoje priklauso pagrindiniam veiksmui puslapyje. */
.stat-veiksmas{
  display:inline-flex;align-items:center;gap:6px;margin-top:10px;
  padding:7px 13px;border-radius:9999px;
  background:#fff;border:1px solid #D97706;color:var(--amb-ink);
  font-size:12.5px;font-weight:700;text-decoration:none;
  transition:background 180ms var(--ease);
}
.stat-veiksmas:hover{background:var(--amb-soft);}
.stat-veiksmas i,.stat-veiksmas svg{width:13px;height:13px;}

/* Ilgas sąrašas gauna aukščio ribą, ir tik tada prilipdyta antraštė ką nors
   reiškia. Riba parinkta taip, kad ekrane liktų matoma ir skiltis aplink. */
.table-wrap.ilgas{max-height:min(62vh,620px);}

/* ── Lentelė telefone virsta kortelėmis ──
   Pamokų lentelė yra 682 px, o jos langelis telefone - 356 px: 44 % turinio
   likdavo už krašto, ir būtent ten gulėjo apmokėjimo būsena bei mygtukai
   „Apmokėti" ir „Atšaukti". Prisegtas stulpelis ir šešėlis tai švelnino, bet
   horizontaliai slenkama lentelė vis tiek yra prastas atsakymas telefone.
   Nuo 700 px eilutė tampa kortele: data - antraštė, dalykas - pavadinimas,
   likę laukai gauna etiketes iš `data-st`, o veiksmai atsiduria pilno pločio
   eilutėje kortelės apačioje. */
@media (max-width: 700px) {
  .table-wrap{overflow:visible;background:none;border:none;box-shadow:none;background-image:none;}
  .table-wrap.ilgas{max-height:none;}
  .table-wrap table,.table-wrap tbody,.table-wrap tr,.table-wrap td{display:block;width:auto;}
  .table-wrap thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);}
  .table-wrap tr{
    background:var(--surface);border:1px solid var(--brd);border-radius:var(--r);
    box-shadow:var(--shadow);padding:14px 16px;margin-bottom:12px;
  }
  .table-wrap td{border:none;padding:3px 0;text-align:left !important;}
  /* Etiketė prieš reikšmę - be antraščių eilutės langelis būtų beprasmis */
  .table-wrap td[data-st]::before{
    content:attr(data-st) ": ";
    font-size:12px;font-weight:700;color:var(--ink3);
  }
  /* Antraštė, pavadinimas ir ženkleliai etiketės nereikalauja - jie savaime aiškūs */
  .table-wrap td.ls-antraste::before,
  .table-wrap td.ls-pav::before,
  .table-wrap td.ls-zenklas::before{content:none;}
  .table-wrap td.ls-antraste{font-size:13px;font-weight:700;color:var(--ink);padding-bottom:6px;}
  .table-wrap td.ls-pav{padding-bottom:8px;}
  .table-wrap td.ls-zenklas{display:inline-block;margin:2px 6px 2px 0;}
  .table-wrap td.sticky-col{
    position:static;box-shadow:none;background:none;
    margin-top:10px;padding-top:10px;border-top:1px solid var(--brd);
  }
  .table-wrap td.sticky-col:empty{display:none;}
  .table-wrap td.sticky-col > div{display:flex !important;justify-content:stretch !important;gap:8px;}
  .table-wrap td.sticky-col > div > *{flex:1;justify-content:center;}
  /* Tuščios būsenos eilutė lieka viena juosta, ne kortelė */
  .table-wrap tr:has(td[colspan]){padding:0;border:none;box-shadow:none;background:none;}
}