/* bendrija.eu — tema "bendrija".
   Vienas failas: kintamieji, karkasas, komponentai. Be išorinių priklausomybių. */

:root {
  --c-bg:        #f5f7fa;
  --c-surface:   #ffffff;
  --c-border:    #e3e8ef;
  --c-text:      #1c2733;
  --c-muted:     #64748b;
  --c-brand:     #1d4ed8;
  --c-brand-dk:  #1e3a8a;
  --c-brand-sf:  #eef4ff;
  --c-ok:        #047857;
  --c-ok-sf:     #ecfdf5;
  --c-warn:      #b45309;
  --c-warn-sf:   #fffbeb;
  --c-danger:    #b91c1c;
  --c-danger-sf: #fef2f2;
  --radius:      12px;
  --radius-sm:   8px;
  --shadow:      0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.1);
  --sidebar-w:   220px;
}

/* ---------- Konteksto spalvos ----------
   Vartotojas visada turi matyti, KUR yra. Kiekvienas kontekstas turi savo
   akcentą, savo antraštę šoninėje juostoje ir savo juostelę viršuje.
      savitarna  - mėlyna (gyventojo langas)
      admin      - žalsva (bendrijos administravimas, pirmininkas)
      platforma  - violetinė (visos platformos valdymas)                        */

[data-kontekstas="admin"] {
  --c-brand:    #0f766e;
  --c-brand-dk: #115e59;
  --c-brand-sf: #ecfdf8;
  --c-ctx:      #0f766e;
  --c-ctx-sf:   #ecfdf8;
}

[data-kontekstas="platforma"] {
  --c-brand:    #5b21b6;
  --c-brand-dk: #4c1d95;
  --c-brand-sf: #f4f0ff;
  --c-ctx:      #5b21b6;
  --c-ctx-sf:   #f4f0ff;
}

/* Savitarna - numatytoji mėlyna. Reikšmė selektoriuje BŪTINA: be jos taisyklė
   eina po `admin` ir `platforma` su tokiu pat svoriu ir perrašo jų akcentą,
   o visi trys kontekstai tampa vienodi. Toliau faile yra beraktis
   `[data-kontekstas]` blokas - jis skirtas TIK dydžiams ir spalvų neliečia. */
[data-kontekstas="savitarna"] {
  --c-ctx:    #1d4ed8;
  --c-ctx-sf: #eef4ff;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font: 15px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--c-brand); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { line-height: 1.25; margin: 0 0 .5rem; font-weight: 650; letter-spacing: -.01em; }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.02rem; }
p  { margin: 0 0 1rem; }

.muted { color: var(--c-muted); }
.small { font-size: .875rem; }
.nowrap { white-space: nowrap; }
.right { text-align: right; }

/* ---------- Mygtukai ---------- */

.btn {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem .9rem; border: 1px solid var(--c-border); border-radius: var(--radius-sm);
  background: var(--c-surface); color: var(--c-text); font: inherit; font-weight: 550;
  cursor: pointer; text-decoration: none; transition: background .12s, border-color .12s;
}
.btn:hover { background: #f8fafc; text-decoration: none; }
.btn-primary { background: var(--c-brand); border-color: var(--c-brand); color: #fff; }
.btn-primary:hover { background: var(--c-brand-dk); border-color: var(--c-brand-dk); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--c-muted); }
.btn-ghost:hover { background: #eef2f7; color: var(--c-text); }
.btn-sm { padding: .32rem .6rem; font-size: .85rem; }
.btn-block { width: 100%; justify-content: center; }

/* ---------- Ženkliukai ---------- */

.badge {
  display: inline-block; padding: .2rem .55rem; border-radius: 999px;
  font-size: .78rem; font-weight: 600; line-height: 1.5;
}
.badge-ok     { background: var(--c-ok-sf);     color: var(--c-ok); }
.badge-warn   { background: var(--c-warn-sf);   color: var(--c-warn); }
.badge-danger { background: var(--c-danger-sf); color: var(--c-danger); }
.badge-info   { background: var(--c-brand-sf);  color: var(--c-brand); }
.badge-demo   { background: #f1f5f9; color: var(--c-muted); border: 1px dashed #cbd5e1; }

/* ---------- Kortelės ---------- */

.card {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 1.25rem;
}
.card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.25rem; border-bottom: 1px solid var(--c-border);
}
.card-body { padding: 1.25rem; }
.card-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
            padding: .85rem 1.25rem; border-bottom: 1px solid var(--c-border); }
.card-row:last-child { border-bottom: 0; }

.grid { display: grid; gap: 1.25rem; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---------- Rodikliai ---------- */

.stat { background: var(--c-surface); border: 1px solid var(--c-border);
        border-radius: var(--radius); padding: 1rem 1.15rem; box-shadow: var(--shadow); }
.stat-label { color: var(--c-muted); font-size: .82rem; font-weight: 550; text-transform: uppercase; letter-spacing: .03em; }
.stat-value { font-size: 1.6rem; font-weight: 680; margin-top: .25rem; letter-spacing: -.02em; }
.stat-note  { color: var(--c-muted); font-size: .85rem; }

/* ---------- Lentelė ---------- */

.table { width: 100%; border-collapse: collapse; }
.table th, .table td {
  padding: .45rem 1rem; text-align: left; vertical-align: middle;
  border-bottom: 1px solid var(--c-border); font-size: .875rem;
}
.table th {
  color: var(--c-muted); font-size: .72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em;
}
/* Antraštės juosta ir eilučių juostelės - kad ilgą sąrašą būtų galima
   skaityti akimis. Taikoma VISOMS lentelėms, kad moduliai neatrodytų skirtingi. */
.table thead th { background: #f8f9fa; }
.table tbody tr:nth-child(even) > td { background: rgba(15, 23, 42, .015); }
.table tbody tr:hover > td { background: rgba(37, 99, 235, .045); }
/**
 * Lygiavimas dešinėn lentelėse.
 *
 * `.right` vienas nepadeda: `.table td` yra specifiškesnis (0,1,1 prieš 0,1,0),
 * todėl nustelbdavo ir visi „dešinėn" stulpeliai iš tikrųjų buvo kairėje.
 */
.table th.right, .table td.right { text-align: right; }

/**
 * Mygtukai lentelės gale VISADA prie dešinio krašto - nesvarbu, koks puslapis
 * ar sąrašas. Todėl ne `inline-flex` pagal teksto lygiavimą, o `flex` per visą
 * langelį: taip nuo langelio klasių tai nebepriklauso.
 */
.table td .row-actions { display: flex; justify-content: flex-end; }

.table .addr-name { font-weight: 600; }
.table tr:last-child td { border-bottom: 0; }
.table-wrap { overflow-x: auto; max-width: 100%; }

/* ---------- Programos karkasas (savitarna / admin / platforma) ---------- */

.shell { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w); flex: 0 0 var(--sidebar-w);
  background: var(--c-surface); border-right: 1px solid var(--c-border);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
}
/* Konteksto juostelė viršuje: siaura spalvota linija per visą plotį. */
.ctx-strip { height: 3px; background: var(--c-ctx, var(--c-brand)); }

.sidebar-brand { padding: .8rem 1rem; border-bottom: 1px solid var(--c-border); }

/* Konteksto antraštė šoninėje juostoje. */
.ctx-head {
  padding: .85rem 1.25rem; border-bottom: 1px solid var(--c-border);
  background: var(--c-ctx-sf, var(--c-brand-sf));
}
.ctx-head .ctx-name {
  display: flex; align-items: center; gap: .45rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--c-ctx, var(--c-brand));
}
.ctx-head .ctx-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c-ctx, var(--c-brand)); flex: 0 0 7px; }
.ctx-head .ctx-value { font-weight: 650; margin-top: .15rem; line-height: 1.3; }
.ctx-head .ctx-note { color: var(--c-muted); font-size: .8rem; margin-top: .1rem; }

/* Naršymo kelias viršutinėje juostoje. */
.crumbs { display: flex; align-items: center; gap: .4rem; font-size: .88rem; min-width: 0; flex-wrap: wrap; }
.crumbs a { color: var(--c-muted); }
.crumbs a:hover { color: var(--c-text); text-decoration: none; }
.crumbs .sep { color: #cbd5e1; }
.crumbs .now { font-weight: 650; }
.ctx-chip {
  display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .6rem;
  border-radius: 999px; font-size: .76rem; font-weight: 650;
  background: var(--c-ctx-sf, var(--c-brand-sf)); color: var(--c-ctx, var(--c-brand));
}
.brand { display: flex; align-items: center; gap: .55rem; font-weight: 700; color: var(--c-text); letter-spacing: -.01em; }
.brand:hover { text-decoration: none; }
.brand-mark {
  width: 26px; height: 26px; border-radius: 7px; flex: 0 0 26px;
  background: linear-gradient(135deg, var(--c-brand), #3b82f6);
}
.sidebar-scope { padding: .75rem 1.25rem; border-bottom: 1px solid var(--c-border); }
.sidebar-scope .label { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--c-muted); font-weight: 600; }
.sidebar-scope .value { font-weight: 600; margin-top: .1rem; }

.nav { padding: .5rem; flex: 1; overflow-y: auto; }

/**
 * Sekcijos antraštė: maža, kapitelė, prisispaudusi prie krašto.
 *
 * Ji stovi arčiau krašto nei jos punktai - iš atitraukimo iš karto matyti,
 * kas kam priklauso, todėl struktūrą galima perskaityti neskaitant žodžių.
 * Antraštė tamsesnė už punktus: ji rikiuoja, o ne konkuruoja su jais.
 */
.nav-title {
  padding: .7rem .5rem .25rem; font-size: .68rem; text-transform: uppercase;
  letter-spacing: .07em; color: #94a3b8; font-weight: 700;
}
.nav-title + .nav-link, .nav-group[open] > .nav-title + .nav-link { margin-top: .1rem; }

/* Sulankstoma sekcija (dar neparuoštos dalys). */
.nav-group > summary.nav-title { cursor: pointer; list-style: none; display: flex; align-items: center; gap: .35rem; }
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group > summary.nav-title::before { content: "▸"; font-size: .7em; }
.nav-group[open] > summary.nav-title::before { content: "▾"; }
.nav-group > summary.nav-title:hover { color: var(--c-text); }
.nav-group .nav-link { color: var(--c-muted); }
.nav-group .nav-link:hover { color: var(--c-text); }

/**
 * Punktai atitraukti nuo krašto ir suverti ant plonos linijos.
 *
 * Linija eina per visą grupę, todėl akis mato bloką, o ne atskiras eilutes;
 * aktyviam punktui ji paryškėja ir tampa žymekliu - taip aktyvumas matomas
 * net tada, kai fono spalva blanki.
 */
.nav-link {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  margin-left: .65rem; padding: .32rem .6rem;
  border-left: 2px solid var(--c-border);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--c-text); font-weight: 500; font-size: .86rem; line-height: 1.35;
}
.nav-link.active { border-left-color: var(--c-brand); }
.nav-link:hover { background: #f1f5f9; text-decoration: none; }
.nav-link.active { background: var(--c-brand-sf); color: var(--c-brand); font-weight: 600; }
.nav-count { background: #e2e8f0; color: var(--c-muted); border-radius: 999px; padding: 0 .45rem; font-size: .76rem; font-weight: 600; }
.nav-link.active .nav-count { background: #dbeafe; color: var(--c-brand); }
.sidebar-foot { padding: .5rem; border-top: 1px solid var(--c-border); }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .8rem 1.75rem; background: var(--c-surface); border-bottom: 1px solid var(--c-border);
}
.topbar-left  { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.topbar-right { display: flex; align-items: center; gap: .6rem; }

.user { display: flex; align-items: center; gap: .55rem; }
.avatar {
  width: 32px; height: 32px; border-radius: 50%; flex: 0 0 32px;
  background: var(--c-brand-sf); color: var(--c-brand);
  display: flex; align-items: center; justify-content: center; font-weight: 650; font-size: .8rem;
}
.user-name { font-weight: 600; line-height: 1.2; }
.user-note { color: var(--c-muted); font-size: .78rem; line-height: 1.2; }

/* Turinys užima VISĄ likusį lango plotį - nėra dirbtinio siaurinimo. */
.content { padding: 1.75rem; width: 100%; max-width: none; }

/* Labai plačiuose ekranuose paliekamas didesnis paraštės tarpas. */
@media (min-width: 1900px) { .content { padding: 2rem 3rem; } }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.toolbar { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

/* ---------- Konteksto perjungimas ---------- */

.switcher { position: relative; }
.switcher > summary { list-style: none; cursor: pointer; }
.switcher > summary::-webkit-details-marker { display: none; }
.switcher-menu {
  position: absolute; right: 0; top: calc(100% + .4rem); z-index: 20; min-width: 260px;
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--radius); box-shadow: 0 8px 24px rgba(16,24,40,.12); padding: .4rem;
}
.switcher-menu .label { padding: .45rem .6rem .25rem; font-size: .72rem; text-transform: uppercase;
                        letter-spacing: .05em; color: var(--c-muted); font-weight: 600; }
.switcher-item { display: block; padding: .5rem .6rem; border-radius: var(--radius-sm); color: var(--c-text); }
.switcher-item:hover { background: #f1f5f9; text-decoration: none; }
.switcher-item .sub { color: var(--c-muted); font-size: .8rem; }
/* Kanalų juosta: viena grupė, ne trys atskiri mygtukai - taip iš karto matyti,
   kad tai vienas pasirinkimas iš kelių, o ne trys nesusiję veiksmai. */
.kanalai { display: inline-flex; border: 1px solid var(--c-border); border-radius: var(--radius-sm); overflow: hidden; }
.kanalas {
  padding: .28rem .7rem; font-size: .8rem; font-weight: 550; line-height: 1.45;
  color: var(--c-muted); background: var(--c-surface); white-space: nowrap;
  border-right: 1px solid var(--c-border);
}
.kanalas:last-child { border-right: 0; }
.kanalas:hover { background: #f1f5f9; color: var(--c-text); text-decoration: none; }
/* Aktyvus imtas konteksto spalva - ta pačia, kuria nudažyta juostelė viršuje. */
.kanalas.aktyvus {
  background: var(--c-ctx, var(--c-brand)); color: #fff; font-weight: 600;
}
.kanalas.aktyvus:hover { background: var(--c-ctx, var(--c-brand)); color: #fff; }

.switcher-sep { height: 1px; background: var(--c-border); margin: .35rem .4rem; }
/* Pasirinktas punktas: varnelė dešinėje, kad sąraše matytųsi, kur esi. */
.switcher-item.aktyvus { background: var(--c-brand-sf); color: var(--c-brand); font-weight: 600; }
.switcher-item.aktyvus .sub { color: var(--c-brand); opacity: .75; }
.switcher-item.aktyvus::after { content: "✓"; float: right; margin-top: -1.2rem; }

/* ---------- Viešas puslapis ---------- */

.public-top {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.75rem; background: var(--c-surface); border-bottom: 1px solid var(--c-border);
  position: sticky; top: 0; z-index: 10;
}
.public-nav { display: flex; align-items: center; gap: 1.25rem; }
.public-nav a { color: var(--c-muted); font-weight: 550; }
.public-nav a:hover { color: var(--c-text); text-decoration: none; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 1.75rem; }

.hero { padding: 4.5rem 0 3.5rem; text-align: center; }
.hero h1 { font-size: 2.6rem; letter-spacing: -.03em; margin-bottom: 1rem; }
.hero p { font-size: 1.12rem; color: var(--c-muted); max-width: 640px; margin: 0 auto 1.75rem; }
.hero-actions { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }

.section { padding: 3rem 0; }
.section-head { text-align: center; margin-bottom: 2rem; }
.section-head p { color: var(--c-muted); max-width: 560px; margin: .5rem auto 0; }

.feature { background: var(--c-surface); border: 1px solid var(--c-border);
           border-radius: var(--radius); padding: 1.4rem; box-shadow: var(--shadow); }
.feature h3 { margin-bottom: .35rem; }
.feature p { color: var(--c-muted); margin: 0; font-size: .95rem; }
.feature-mark {
  width: 34px; height: 34px; border-radius: 9px; margin-bottom: .85rem;
  background: var(--c-brand-sf); color: var(--c-brand);
  display: flex; align-items: center; justify-content: center; font-weight: 700;
}

.cta { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius);
       padding: 2.25rem; text-align: center; box-shadow: var(--shadow); }

.footer { border-top: 1px solid var(--c-border); margin-top: 3rem; padding: 1.5rem 0 2.5rem; color: var(--c-muted); font-size: .9rem; }
.footer-in { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.footer a { color: var(--c-muted); }

/* ---------- Filtrų juosta ---------- */

.filterbar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap; margin-bottom: 1rem;
}
.chip {
  display: inline-block; padding: .3rem .7rem; border-radius: 999px;
  border: 1px solid var(--c-border); background: var(--c-surface);
  color: var(--c-muted); font-size: .85rem; font-weight: 550;
}
.chip:hover { color: var(--c-text); text-decoration: none; background: #f8fafc; }
.chip-on { background: var(--c-brand-sf); border-color: #bfdbfe; color: var(--c-brand); }
.chip-on:hover { background: var(--c-brand-sf); color: var(--c-brand); }

/* ---------- Formos ---------- */

.input {
  appearance: none; font: inherit; color: var(--c-text);
  padding: .5rem .7rem; border: 1px solid var(--c-border); border-radius: var(--radius-sm);
  background: var(--c-surface); min-width: 0; width: 100%;
}
.input:focus { outline: 2px solid #bfdbfe; outline-offset: 1px; border-color: var(--c-brand); }
select.input { padding-right: 1.6rem; }

.field { margin-bottom: 1.1rem; }
.field > label { display: block; font-weight: 600; font-size: .88rem; margin-bottom: .3rem; }
.field .hint { color: var(--c-muted); font-size: .83rem; margin-top: .3rem; }
.field .check { display: flex; align-items: center; gap: .5rem; font-weight: 500; }
.field .check input { width: auto; }

/* Paieška antraštėje neturi išstumti mygtukų į kitą eilutę. */
.page-head .input { width: 240px; flex: 0 0 240px; }

.form-row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.form-row .input { width: auto; flex: 1 1 220px; }
.form-row select.input { flex: 0 0 auto; }

.card-body .grid .field { margin-bottom: 0; }

/* ---------- Smulkmenos ---------- */

.addr { display: flex; align-items: center; gap: .75rem; }
.addr-mark { width: 34px; height: 34px; border-radius: 9px; flex: 0 0 34px;
             background: var(--c-brand-sf); color: var(--c-brand);
             display: flex; align-items: center; justify-content: center; font-weight: 650; font-size: .85rem; }
.addr-name { font-weight: 600; }

.notice { background: var(--c-warn-sf); border: 1px solid #fde68a; color: #92400e;
          border-radius: var(--radius); padding: .85rem 1.1rem; margin-bottom: 1.25rem; font-size: .92rem; }
.notice-info { background: var(--c-brand-sf); border-color: #bfdbfe; color: var(--c-brand-dk); }

.empty { text-align: center; padding: 2.5rem 1rem; color: var(--c-muted); }

/* ---------- Darbinis langas: kompaktiškesnis matas ----------
 *
 * KUR TAIKOMA IR KODĖL BŪTENT TAIP
 *
 * Kabliukas - `data-kontekstas` ant <body>. Jį uždeda TIK `layouts/app.tpl`,
 * t. y. administravimas ir savitarna; `layouts/public.tpl` jokio konteksto
 * neturi, todėl viešų puslapių ir titulinio šis matas neliečia. Taip vienoje
 * vietoje aprėpiamas visas darbinis langas, nepridedant klasės kiekvienam
 * šablonui ir nepaliečiant rinkodaros puslapių.
 *
 * Pradžioje buvo sumažinta tik savitarna, o administravimas paliktas platesnis -
 * esą plačioms lentelėms reikia oro. Praktika parodė kitaip: du skirtingi
 * masteliai tame pačiame lange (o pirmininkas tarp jų vaikšto nuolat) erzina
 * labiau nei ankštumas, ir kiekvienas naujas komponentas reikalauja apsispręsti
 * du kartus. Matas vienas.
 *
 * Keičiamos TIK tarpų ir šriftų reikšmės. Spalvos, rėmeliai ir išdėstymas lieka
 * tie patys, todėl sistema atrodo ta pati, tik tankesnė.
 *
 * Mastelis ~0,9: 15px → 13,5px pagrindas, antraštės ir rodikliai proporcingai.
 *
 * KIEK MAŽINTA IR KODĖL SUSTOTA TIES 13,5
 *
 * Buvo bandyta ir 12,5px. Ekrane telpa daugiau, bet tekstas ima atrodyti
 * suspaustas, o pelnas mažas: sąraše pridedama viena eilutė. 13,5 yra riba,
 * ties kuria dar skaitoma ramiai. Jei kada prireiktų keisti - keičiamos
 * reikšmės šiame bloke, ir tik jos.
 */

body[data-kontekstas] { font-size: 13.5px; }

/* `.page-head h1` toliau faile nurodomas atskirai ir turi tokį patį svorį,
   todėl vien `h1` čia nieko nekeistų - reikia to paties tikslumo selektoriaus. */
[data-kontekstas] h1 { font-size: 1.3rem; }
[data-kontekstas] .page-head h1 { font-size: 1.05rem; }
[data-kontekstas] .page-head .muted { font-size: .78rem; }
[data-kontekstas] h2 { font-size: 1.05rem; }
[data-kontekstas] h3 { font-size: .92rem; }

[data-kontekstas] .content   { padding: 1.1rem 1.25rem; }
[data-kontekstas] .topbar    { padding: .55rem 1.25rem; }
[data-kontekstas] .page-head { margin-bottom: 1rem; }

[data-kontekstas] .card      { margin-bottom: .85rem; }
[data-kontekstas] .card-head { padding: .7rem .95rem; }
[data-kontekstas] .card-body { padding: .85rem .95rem; }
[data-kontekstas] .card-row  { padding: .6rem .95rem; }
[data-kontekstas] .grid      { gap: .85rem; }

/* Rodikliai buvo garsiausi: 1,6rem skaičius vienam butui - per daug balso. */
[data-kontekstas] .stat       { padding: .7rem .9rem; }
[data-kontekstas] .stat-label { font-size: .7rem; }
[data-kontekstas] .stat-value { font-size: 1.25rem; margin-top: .1rem; }
[data-kontekstas] .stat-note  { font-size: .78rem; }

[data-kontekstas] .table th,
[data-kontekstas] .table td   { padding: .36rem .7rem; font-size: .82rem; }
[data-kontekstas] .table th   { font-size: .67rem; }

[data-kontekstas] .notice     { padding: .6rem .85rem; margin-bottom: .85rem; font-size: .85rem; }
[data-kontekstas] .empty      { padding: 1.6rem 1rem; }
[data-kontekstas] .badge      { font-size: .73rem; padding: .15rem .5rem; }

/* Mygtukai ir laukai: jie „paveldi“ šriftą, todėl be šito likdavo didžiausi
   elementai lange - o gyventojui jie svarbūs, bet ne garsiausi. */
[data-kontekstas] .btn        { padding: .36rem .7rem; font-size: .85rem; }
[data-kontekstas] .btn-sm     { padding: .26rem .55rem; font-size: .8rem; }
[data-kontekstas] .input      { padding: .32rem .6rem; font-size: .85rem; }
[data-kontekstas] .field      { margin-bottom: .8rem; }
[data-kontekstas] .field > label { font-size: .82rem; }
[data-kontekstas] .addr-mark  { width: 28px; height: 28px; flex-basis: 28px; font-size: .78rem; }

/* Šoninė juosta ir viršutinė eilutė - kad langas atrodytų vientisas. */
[data-kontekstas] .sidebar-brand     { padding: .6rem .85rem; }
[data-kontekstas] .ctx-head          { padding: .65rem 1rem; }
[data-kontekstas] .ctx-head .ctx-value { font-size: .95rem; }
[data-kontekstas] .ctx-head .ctx-note  { font-size: .75rem; }
[data-kontekstas] .nav-title         { padding: .55rem .5rem .2rem; font-size: .65rem; }
[data-kontekstas] .nav-link          { padding: .26rem .55rem; font-size: .82rem; }
[data-kontekstas] .crumbs            { font-size: .82rem; }
[data-kontekstas] .avatar            { width: 28px; height: 28px; flex-basis: 28px; font-size: .75rem; }

/* ---------- Siauras ekranas ---------- */

@media (max-width: 1200px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .content { padding: 1.25rem; }
  .page-head { align-items: flex-start; }
}

/* Telefonas ir siauri planšetės vaizdai. */
@media (max-width: 720px) {
  .shell { flex-direction: column; }

  /*
   * Viršutinė eilutė telefone: trys mygtukai, bendrijų sąrašas ir vardas į
   * vieną eilutę netelpa - be laužymo „Administravimas“ tiesiog užlipdavo ant
   * vardo. Leidžiame persikelti į kitą eilutę ir kiek suspaudžiame kanalus.
   */
  .topbar { flex-wrap: wrap; row-gap: .45rem; }
  .topbar-right { flex-wrap: wrap; row-gap: .45rem; }
  .kanalas { padding: .26rem .55rem; font-size: .75rem; }

  /* Šoninė juosta virsta viršutine: kontekstas lieka matomas, meniu - slenkamas. */
  .sidebar {
    width: 100%; flex: none; height: auto; position: sticky; top: 0; z-index: 30;
    border-right: 0; border-bottom: 1px solid var(--c-border);
  }
  .sidebar-brand { padding: .75rem 1rem; }
  .ctx-head { padding: .6rem 1rem; }
  .ctx-head .ctx-note { display: none; }

  .nav {
    display: flex; gap: .35rem; padding: .5rem .75rem;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav-title, .sidebar-foot { display: none; }
  .nav-link { white-space: nowrap; padding: .4rem .7rem; margin-left: 0; border-left: 0; border-radius: var(--radius-sm); }

  /*
   * Telefone juosta yra viena slenkama eilutė, todėl grupės ir antras lygis
   * turi į ją įsilieti, o ne likti vertikaliais blokais: `details` viduje
   * esantys blokai flex eilutėje išsikiša už ekrano krašto ir nusikerpa.
   *
   * Grupės antraštė lieka matoma ir virsta paspaudžiamu ženkleliu: paslėpus ją,
   * sulankstytos grupės („Nustatymai“) telefone taptų visai nepasiekiamos.
   */
  .nav { align-items: center; }

  /*
   * `<details>` atidarytą turinį naršyklė deda į savo vidinį bloką, todėl
   * `display: flex` ant pačios grupės jo neišskleidžia į eilutę - vaikai vis
   * tiek stojasi vienas po kitu. Vietoj kovos su tuo vidiniu bloku, patys
   * vaikai paverčiami `inline-flex`: blokiniame konteineryje jie tada plaukia
   * viena eilute. Tai veikia visose naršyklėse, be `::details-content`.
   */
  .nav-group { white-space: nowrap; }
  /* Naujesnėse naršyklėse vidinį `<details>` bloką galima ištirpinti - tada
     grupės antraštė ir jos nuorodos telefone sustoja į vieną eilutę. Senesnėse
     taisyklė tiesiog ignoruojama, ir antraštė lieka virš nuorodų: irgi
     skaitoma, tik dviem eilutėmis. */
  .nav-group::details-content { display: contents; }
  .nav-group > .nav-link, .nav-group > .nav-sub { display: inline-flex; vertical-align: middle; }
  .nav-group > summary.nav-title {
    display: inline-flex; vertical-align: middle; white-space: nowrap;
    padding: .4rem .7rem; border-radius: var(--radius-sm);
    background: var(--c-bg); font-size: .74rem; margin-right: .35rem;
  }
  .nav-group > .nav-link { margin-right: .35rem; }

  .nav-sub { align-items: center; gap: .35rem; margin: 0 .35rem 0 0; border-left: 0; }
  .nav-sub-link {
    white-space: nowrap; padding: .4rem .7rem; border-radius: var(--radius-sm);
    background: var(--c-bg); font-size: .8rem;
  }

  .topbar { padding: .6rem 1rem; flex-wrap: wrap; row-gap: .5rem; }
  .topbar-left { order: 2; width: 100%; }
  .topbar-right { order: 1; width: 100%; justify-content: space-between; }
  .crumbs { font-size: .82rem; }
  .user-note { display: none; }

  .content { padding: 1rem; }

  /* Viešo puslapio viršus telefone: logotipas eilutėje, meniu po juo. */
  .public-top {
    padding: .75rem 1rem; flex-wrap: wrap; row-gap: .6rem;
  }
  .public-nav {
    width: 100%; gap: .9rem; flex-wrap: wrap;
    justify-content: space-between; font-size: .92rem;
  }
  .wrap { padding: 0 1rem; }

  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }

  /* Antraštė ir veiksmai - vienas po kito, mygtukai per visą plotį. */
  .page-head { flex-direction: column; align-items: stretch; gap: .75rem; }
  .page-head h1 { font-size: 1.4rem; }
  .page-head .toolbar { width: 100%; }
  .page-head .toolbar > .btn,
  .page-head .toolbar > form { width: 100%; }
  .page-head .input { width: 100%; flex: 1 1 auto; }

  /* Filtrai slenkami pirštu, o ne laužomi į kelias eilutes. */
  .filterbar { flex-direction: column; align-items: stretch; gap: .5rem; }
  .filterbar .toolbar {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: .25rem; scrollbar-width: none;
    /* Be min-width:0 lankstus elementas nesusitraukia iki ekrano pločio ir
       išstumia visą puslapį į šoną. */
    min-width: 0; max-width: 100%;
  }
  .filterbar .toolbar::-webkit-scrollbar { display: none; }
  .chip { white-space: nowrap; }

  /* Eilutė kortelėje: tekstas viršuje, veiksmas apačioje. */
  .card-row { flex-direction: column; align-items: flex-start; gap: .6rem; }
  .card-row .right { text-align: left; width: 100%; }
  .card-head { flex-direction: column; align-items: flex-start; gap: .5rem; }

  /* Lentelės slenkamos horizontaliai, bet lieka įskaitomos. */
  .table-wrap { -webkit-overflow-scrolling: touch; }
  .table th, .table td { padding: .6rem .9rem; }

  /**
   * Ilgos lentelės (class="table cards") telefone virsta kortelėmis: kiekviena
   * eilutė - blokas, o stulpelio pavadinimas rodomas prie reikšmės (data-label).
   * Taip nereikia slinkti į šonus ir viskas lieka įskaitoma.
   */
  .table.cards thead { display: none; }
  .table.cards, .table.cards tbody, .table.cards tr, .table.cards td { display: block; width: 100%; }
  .table.cards tr {
    border: 1px solid var(--c-border); border-radius: var(--radius-sm);
    padding: .6rem .8rem; margin: 0 0 .6rem;
  }
  .table.cards td {
    border: 0; padding: .25rem 0;
    display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  }
  .table.cards td::before {
    content: attr(data-label); color: var(--c-muted); font-size: .8rem; font-weight: 600;
    flex: 0 0 auto;
  }
  .table.cards td[data-label=""]::before { content: none; }
  .table.cards td.right { text-align: left; }
  .table.cards .addr { width: 100%; }

  /* Formos: laukai vienas po kito, mygtukas per visą plotį. */
  .form-row { flex-direction: column; align-items: stretch; }
  .form-row .input, .form-row select.input, .form-row .btn { width: 100%; flex: 1 1 auto; }

  /* Konteksto meniu telefone - beveik per visą ekraną. */
  .switcher-menu { right: 0; left: auto; min-width: min(88vw, 320px); }

  .stat-value { font-size: 1.4rem; }
  .hero { padding: 3rem 0 2.5rem; }
  .hero h1 { font-size: 1.9rem; }
  .hero p { font-size: 1rem; }
  .hero-actions .btn { width: 100%; justify-content: center; }
}

@media (max-width: 420px) {
  .avatar { display: none; }
  .btn { padding: .45rem .75rem; }
}

/* -------------------------------------------------------------------------
   Teisių matrica (Žmonės): siauri stulpeliai su varnelėmis.
   Antraštės trumpos, todėl stulpelis neišpučia lentelės; telefone eilutė
   virsta kortele ir varnelė atsiduria šalia stulpelio pavadinimo.
   ------------------------------------------------------------------------- */
.center { text-align: center; }
.table th.teise { width: 1%; white-space: nowrap; font-size: .78rem; }
.table td input[type="checkbox"] { width: 1.05rem; height: 1.05rem; accent-color: var(--c-accent, #2f6feb); }
.table td input[type="checkbox"]:disabled { opacity: .85; cursor: default; }

@media (max-width: 760px) {
  .table.cards td.center { text-align: left; }
  .table.cards td.center::before { display: inline-block; min-width: 8rem; }
}

/* Glaudus vaizdas yra numatytasis visoms lentelėms - žr. .table viršuje.
   „tight“ lieka tik kaip vardas, jau naudojamas šablonuose. */
/* „tight“ paliktas kaip vardas senuose šablonuose - bazinė lentelė jau glaudi. */

/* Puslapiavimo juosta: numeriai + ankstesnis/kitas vienoje eilutėje. */
.pager { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-top: 1rem; }
.pager .chip { min-width: 2rem; text-align: center; }

@media (max-width: 760px) {
  .table.cards td { padding-top: .3rem; padding-bottom: .3rem; }
}

/* -------------------------------------------------------------------------
   Žemėlapis žmonių sąraše. Sulankstomas blokas (details), kad nedomintų tada,
   kai ieškai pagal vardą, bet būtų po ranka, kai ieškai pagal namą.
   ------------------------------------------------------------------------- */
.map-card { padding: 0; margin-bottom: 1rem; overflow: hidden; }
.map-card > summary {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem;
  padding: .75rem 1rem; cursor: pointer; font-weight: 600; list-style: none;
}
.map-card > summary::-webkit-details-marker { display: none; }
.map-card > summary::before { content: "▸"; color: var(--c-muted); }
.map-card[open] > summary::before { content: "▾"; }
.map-card > summary:hover { background: var(--c-soft, #f5f7fa); }
.map { height: 380px; width: 100%; }
.map-people { margin: .35rem 0; }
.map-links { margin-top: .4rem; font-size: .85rem; }
.filterbar.picked { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-bottom: .75rem; }

@media (max-width: 760px) {
  .map { height: 300px; }
}

/* -------------------------------------------------------------------------
   Veiksmų mygtukai lentelės eilutėje: kvadratiniai, tik kontūras, ikona viduje.
   Toks pat stilius visuose moduliuose, kad eilutės pabaiga visada atrodytų
   vienodai ir nereikėtų skaityti žodžių.
   ------------------------------------------------------------------------- */
.row-actions { display: inline-flex; gap: .35rem; justify-content: flex-end; }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; flex: 0 0 2rem;
  border: 1px solid var(--c-border); border-radius: var(--radius-sm);
  background: var(--c-surface); color: var(--c-text);
  cursor: pointer; padding: 0; text-decoration: none;
}
.icon-btn svg { width: 1.05rem; height: 1.05rem; display: block; }
.icon-btn:hover { border-color: var(--c-brand); color: var(--c-brand); background: var(--c-brand-sf); }
.icon-btn:focus-visible { outline: 2px solid #bfdbfe; outline-offset: 1px; }
.icon-btn.danger:hover { border-color: #d92d20; color: #d92d20; background: #fef3f2; }

/* Neaktyvus mygtukas: matomas, bet aiškiai neveikiantis (dar nepadaryta dalis). */
.icon-btn[disabled],
.icon-btn.off { opacity: .4; pointer-events: none; }

@media (max-width: 760px) {
  .table.cards .row-actions { justify-content: flex-start; }
}

/* Būstų sąrašas žmogaus eilutėje: kiekvienas adresas - atskira nuoroda. */
.bustas-eil { line-height: 1.35; }
.bustas-eil + .bustas-eil { margin-top: .15rem; }

/* Teisių matricoje stulpelių daug, todėl vardas, paštas ir telefonas nesilaužo
   į dvi eilutes - kitaip eilutė tampa dviaukštė ir sąrašas pailgėja dvigubai. */
.table td.nowrap,
.table th.teise { white-space: nowrap; }
.table .bustas-eil { white-space: nowrap; }

/* Rikiuojamos antraštės: visa antraštė - nuoroda, rodyklė rodo kryptį. */
.table thead .sort {
  color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: .2rem;
}
.table thead .sort:hover { color: var(--c-brand); }
.table thead .sort-on { color: var(--c-brand); }
.sort-rodykle { font-size: .7em; line-height: 1; }

/* Vietos nurodymas būsto kortelėje: žemėlapis ir po juo koordinatės su mygtukais. */
.map-form {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .6rem; padding: .75rem 1rem;
}
.map-form .toolbar { margin: 0; }

/* Žmogaus prisegimo juosta: paieškos laukas ir mygtukas vienoje eilutėje. */
.prisegimas { justify-content: flex-start; }
.prisegimas .input { width: auto; flex: 1 1 260px; max-width: 420px; }

/* -------------------------------------------------------------------------
   Kompaktiški skaičiai kortelės viršuje: viena juosta vietoj keturių didelių
   kortelių - pirmininkas mato viską neslinkdamas.
   ------------------------------------------------------------------------- */
.figures {
  display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem;
}
.figure {
  display: flex; align-items: baseline; gap: .45rem;
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--radius-sm); padding: .4rem .75rem;
}
.figure-label { color: var(--c-muted); font-size: .8rem; }
.figure-value { font-weight: 650; }
.figure-bad .figure-value { color: #d92d20; }

/* Dviejų stulpelių eilutė: forma plati, žemėlapis siauras. */
.split { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.split > .card { margin-bottom: 0; }
.map-small { height: 240px; }

@media (max-width: 1100px) {
  .split { grid-template-columns: minmax(0, 1fr); }
}

/* -------------------------------------------------------------------------
   Sąrašų vaizdas, suderintas su acc.test administravimo puslapiais:
   glaudžios eilutės, šviesi antraštė, juostelės ir pažymėjimas pelės
   užvedimu - kad ilgą sąrašą būtų galima skaityti akimis, o ne pirštu.
   ------------------------------------------------------------------------- */


/* Antraštės eilutė virš sąrašo: pavadinimas, kiekis ir veiksmai vienoje juostoje. */
.page-head h1 { font-size: 1.15rem; }
.page-head .muted { font-size: .8rem; }

/* Puslapiavimas kortelės apačioje, kaip acc.test. */
.card > .pager { margin: 0; padding: .5rem .9rem; border-top: 1px solid var(--c-border); }

@media (max-width: 760px) {
  .table.cards tbody tr:nth-child(even) > td,
  .table.cards tbody tr:hover > td { background: transparent; }
}

/* Glaudi forma: laukai žemesni ir arčiau vienas kito. Naudojama ten, kur
   forma yra antraeilė - žmogus daugiau skaito nei rašo. */
.form-tight .field { margin-bottom: .55rem; }
.form-tight .field > label { font-size: .8rem; margin-bottom: .18rem; }
.form-tight .input { padding: .33rem .6rem; font-size: .875rem; }
.form-tight .hint { font-size: .76rem; margin: -.3rem 0 .55rem; }
.form-tight .check label { font-weight: 400; font-size: .85rem; margin: 0; }
.form-tight textarea.input { min-height: 2.6rem; }

/* -------------------------------------------------------------------------
   Formos laukų tinklelis: vienoje eilutėje telpa keli laukai, o platesniems
   (adresas, savininkas) skiriama dviguba vieta. Taip forma tampa žemesnė ir
   akis nesiblaško šokinėdama per visą kortelės plotį.
   ------------------------------------------------------------------------- */
.laukai { display: grid; gap: 0 .75rem; }
.laukai-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.laukai .span-2 { grid-column: span 2; }

/* Apatinė juosta: būsena kairėje, mygtukai dešinėje - kaip įprasta formose. */
.veiksmu-juosta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .6rem; padding-top: .35rem; border-top: 1px solid var(--c-border); margin-top: .25rem;
}
.veiksmu-juosta .toolbar { margin: 0; }
.veiksmu-juosta .check label { font-weight: 500; font-size: .85rem; margin: 0; }

/* Kortelių antraštės - vienodo dydžio visuose moduliuose. */
.card-head h3 { font-size: .95rem; }

/* Kortelės prasideda nuo viršaus ir baigiasi ten, kur baigiasi jų turinys -
   tempiant iki vienodo aukščio formos apačioje likdavo tuščias plotas. */
.split { align-items: start; }
.split .map-small { height: 200px; }

@media (max-width: 1100px) {
  .laukai-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split .map-small { min-height: 220px; }
}

@media (max-width: 640px) {
  .laukai-3 { grid-template-columns: minmax(0, 1fr); }
  .laukai .span-2 { grid-column: auto; }
}

/* =========================================================================
   TANKUS VAIZDAS (2026-09-12)
   Mažesnis tekstas ir laukai, plokštesnės kortelės, vienodi 1rem tarpai.
   Pavyzdys - acc.test administravimo langai: informacijos daug, todėl
   apdaila turi netrukdyti.
   ========================================================================= */

/* Mygtukai ir laukai - vienodo, mažesnio dydžio visur. */
.btn { padding: .35rem .75rem; font-size: .85rem; }
.btn-sm { padding: .25rem .55rem; font-size: .8rem; }
.input { padding: .35rem .6rem; font-size: .875rem; }
.field { margin-bottom: .6rem; }
.field > label { font-size: .8rem; margin-bottom: .2rem; }
.field .hint { font-size: .76rem; margin-top: .2rem; }
.field .check label { font-weight: 500; font-size: .85rem; margin: 0; }

/* Kortelės be šešėlio: lieka tik plona linija, todėl puslapis atrodo ramesnis
   ir nesijaučia sudėtas iš daugybės atskirų blokų. */
.card { box-shadow: none; margin-bottom: 1rem; }
.card-head { padding: .6rem 1rem; }
.card-head h3 { font-size: .9rem; margin: 0; }
.card-body { padding: 1rem; }
.card-row { padding: .55rem 1rem; }
.table th, .table td { padding: .45rem 1rem; }
.content { padding: 1.25rem; }
.page-head h1 { font-size: 1.15rem; }

/* --- Viršutinė juosta prilipdoma ir sulygiuojama su logotipu -------------- */
:root { --topbar-h: 50px; }

.ctx-strip { position: sticky; top: 0; z-index: 41; }

.sidebar-brand {
  height: var(--topbar-h); padding: 0 1rem;
  display: flex; align-items: center;
}

.topbar {
  position: sticky; top: 3px; z-index: 40;
  min-height: var(--topbar-h); padding: 0 1.25rem;
}

@media (max-width: 900px) {
  /* Siaurame ekrane juosta nebeprilipdoma - ji laužoma į dvi eilutes ir
     užimtų per daug vietos. */
  .topbar { position: static; min-height: 0; padding: .5rem 1rem; }
  .sidebar-brand { height: auto; padding: .6rem 1rem; }
}

/* Varnelių stulpeliai: antraštė ir varnelė lygiuojamos į to paties stulpelio
   vidurį, o stulpelis siauras - kad eilutė neišsitemptų. */
.table th.center, .table td.center { text-align: center; }
.table th.center .sort { justify-content: center; width: 100%; }
.table td.center input[type="checkbox"] { margin: 0 auto; display: block; }

/* -------------------------------------------------------------------------
   Dialogas (naršyklės <dialog>): tas pats kortelės stilius, tik iškeltas virš
   puslapio. Esc, fokusas ir fonas - naršyklės rūpestis.
   ------------------------------------------------------------------------- */
.dialogas {
  border: 1px solid var(--c-border); border-radius: var(--radius);
  padding: 0; width: min(30rem, calc(100vw - 2rem)); color: var(--c-text);
  background: var(--c-surface); box-shadow: 0 10px 40px rgba(15, 23, 42, .18);
}
.dialogas::backdrop { background: rgba(15, 23, 42, .35); }
.dialogas-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .6rem 1rem; border-bottom: 1px solid var(--c-border);
}
.dialogas-head h3 { font-size: .9rem; margin: 0; }
.dialogas-body { padding: 1rem; }
.dialogas-body select.input { height: auto; padding: .25rem; }
.dialogas-body select.input option { padding: .2rem .35rem; }
.dialogas-foot {
  display: flex; justify-content: flex-end; gap: .4rem;
  padding: .6rem 1rem; border-top: 1px solid var(--c-border);
}

/* Teisių stulpelių antraštės: ikona virš trumpo pavadinimo. Ikona pasako
   reikšmę iš karto, o pilnas paaiškinimas - užvedus pele (title). */
.teise-ikona { display: block; line-height: 0; }
.table th.teise { width: 2.2rem; text-align: center; }
.table th.teise .sort { justify-content: center; }
.teise-ikona svg { width: 1.05rem; height: 1.05rem; display: inline-block; color: var(--c-muted); }
.table th.teise .sort { flex-direction: column; gap: 0; }
.table th.teise { padding-top: .35rem; padding-bottom: .35rem; }

/* ---------------------------------------------------------------- objektas

   Būsto kortelė dviem skiltimis: kairėje dirbama (duomenys, žmonės, teisės),
   dešinėje - apžvalga, kurią galima skaityti neslenkant. Siauresniame ekrane
   skiltys sukrenta viena po kita, apžvalga - apačioje. */

.objektas {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 1rem;
  align-items: start;
}

.objektas-main > .card { margin-bottom: 1rem; }
.objektas-main > .card:last-child { margin-bottom: 0; }

.objektas-sonas {
  position: sticky;
  top: calc(var(--topbar-h) + .75rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.objektas-sonas > .card { margin-bottom: 0; }
.objektas-sonas .map-small { height: 180px; }

@media (max-width: 1180px) {
  .objektas { grid-template-columns: minmax(0, 1fr); }
  .objektas-sonas { position: static; }
  .objektas-sonas .map-small { height: 220px; }
}

/* Grupės antraštė formoje ir apžvalgoje - vietoj atskiros kortelės. */
.grupe {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin: .2rem 0 .5rem;
}

.laukai-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.laukai .span-3 { grid-column: span 3; }

@media (max-width: 900px) {
  .laukai-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .laukai .span-3 { grid-column: span 2; }
}

@media (max-width: 560px) {
  .laukai-4 { grid-template-columns: minmax(0, 1fr); }
  .laukai .span-3 { grid-column: auto; }
}

/* Faktų sąrašas: etiketė kairėje, reikšmė dešinėje, viena eilutė kiekvienam. */
.faktai { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .18rem .75rem; }
.faktai dt { font-size: .8rem; color: var(--c-muted); }
.faktai dd { margin: 0; font-size: .825rem; text-align: right; font-variant-numeric: tabular-nums; }

.card-body.bordered { border-top: 1px solid var(--c-border); }

.sarasas { list-style: none; margin: 0; padding: 0; }
.sarasas li { display: flex; justify-content: space-between; gap: .5rem; padding: .2rem 0; font-size: .825rem; }
.sarasas li + li { border-top: 1px dashed var(--c-border); }

/* Ilga pastaba neturi išpūsti adreso stulpelio - visa ji lieka „title" užuominoje. */
.trumpa { max-width: 17rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Platus dialogas - būsto duomenims, kur laukai eina po kelis į eilutę. */
.dialogas-platus { width: min(52rem, calc(100vw - 2rem)); }
.dialogas-platus .dialogas-body { max-height: calc(100vh - 12rem); overflow-y: auto; }

/* Skaitymo režimas: neaktyvios varnelės matomos, bet blankios. Įjungus
   redagavimą lentelė gauna švelnų foną, kad būtų aišku, jog ji „gyva". */
.teise-varnele:disabled { opacity: .55; cursor: default; }
form.taisoma .table tbody tr:hover { background: var(--c-brand-sf); }
form.taisoma .teise-varnele { outline: 2px solid transparent; }

/* „hidden" turi nugalėti komponentų display - kitaip paslėpti mygtukai lieka matomi. */
[hidden] { display: none !important; }

/* ------------------------------------------------------------------ skirtukai

   Vienas žmogus, trys klausimai: kas jis, ką jam rašėme, kas su juo vyko.
   Viename lange jie trukdytų vienas kitam, todėl skiriami skirtukais. */

.tabai {
  display: flex; gap: .25rem; margin: -.25rem 0 1rem;
  border-bottom: 1px solid var(--c-border);
}

/**
 * Skirtukai su šonais: kiekvienas - atskiras aplankalas su rėmeliu iš trijų
 * pusių. Aktyvusis „prakanda" apatinę liniją ir atsiduria ant turinio, todėl
 * iš karto matyti, kuris lapas atverstas - be spalvos ieškojimo.
 */
.tabas {
  padding: .5rem 1.1rem; font-size: .875rem; font-weight: 600;
  color: var(--c-muted); text-decoration: none;
  background: #f1f3f6;
  border: 1px solid var(--c-border); border-bottom: 0;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  margin-bottom: -1px; position: relative;
}
.tabas:hover { color: var(--c-text); background: #e9edf3; }
.tabas.aktyvus {
  color: var(--c-brand-dk); background: var(--c-surface);
  border-color: var(--c-border);
  box-shadow: inset 0 2px 0 var(--c-brand);
}
/* Balta juostelė uždengia apatinę liniją - aktyvus lapas susilieja su turiniu. */
.tabas.aktyvus::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 1px; background: var(--c-surface);
}

/* ------------------------------------------------------------------- juosta

   Laiko juosta: kairėje data, dešinėje įvykis. Spalvotas taškas pasako rūšį
   iš karto - nereikia skaityti, kad atskirtum įmoką nuo prisijungimo. */

.juosta { list-style: none; margin: 0; padding: 0; }
.juosta li {
  display: grid; grid-template-columns: 6.5rem 1fr; gap: .75rem;
  padding: .45rem 0 .45rem 1rem; position: relative;
  border-left: 2px solid var(--c-border);
}
.juosta li::before {
  content: ''; position: absolute; left: -5px; top: .75rem;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-muted); box-shadow: 0 0 0 3px var(--c-surface);
}
.juosta-laiskas::before  { background: var(--c-brand); }
.juosta-skaityta::before { background: var(--c-ok); }
.juosta-pinigai::before  { background: var(--c-ok); }
.juosta-saskaita::before { background: var(--c-warn); }
.juosta-prisijungimas::before { background: var(--c-muted); }

.juosta-data { display: block; font-size: .8rem; font-variant-numeric: tabular-nums; }
.juosta-antraste { font-size: .875rem; font-weight: 500; }

@media (max-width: 560px) {
  .juosta li { grid-template-columns: 1fr; gap: .1rem; }
  .tabai { overflow-x: auto; }
}

/* Dvi skiltys bet kur: kairėje - tai, kas skaitoma, dešinėje - tai, kuo veikiama. */
.skiltys { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1rem; align-items: start; }
.skiltys-main > .card { margin-bottom: 1rem; }
.skiltys-main > .card:last-child { margin-bottom: 0; }
.skiltys-sonas { position: sticky; top: calc(var(--topbar-h) + .75rem); display: flex; flex-direction: column; gap: 1rem; }
.skiltys-sonas > .card { margin-bottom: 0; }

@media (max-width: 1180px) {
  .skiltys { grid-template-columns: minmax(0, 1fr); }
  .skiltys-sonas { position: static; }
}

/* Skirtuko skaitiklis: kiek būstų ar sąskaitų, nespaudžiant. */
.tabo-sk {
  display: inline-block; min-width: 1.15rem; padding: 0 .3rem; margin-left: .15rem;
  font-size: .7rem; font-weight: 600; line-height: 1.15rem; text-align: center;
  color: var(--c-muted); background: rgba(15, 23, 42, .07); border-radius: 999px;
}
.tabas.aktyvus .tabo-sk { color: var(--c-brand-dk); background: var(--c-brand-sf); }

/* Istorija kompaktiškai: data ir laikas vienoje eilutėje, eilutės arčiau. */
.juosta li { padding: .25rem 0 .25rem .85rem; gap: .6rem; grid-template-columns: 8.5rem 1fr; align-items: baseline; }
.juosta li::before { top: .6rem; width: 6px; height: 6px; left: -4px; }
.juosta-laikas { display: flex; gap: .35rem; align-items: baseline; }
.juosta-data { font-size: .78rem; }
.juosta-antraste { font-size: .825rem; font-weight: 500; }
.juosta-turinys { display: flex; flex-wrap: wrap; gap: .1rem .5rem; align-items: baseline; }

/* ------------------------------------------------------------------ kortelės

   Nustatymų apžvalga: grupės kaip kortelės, kad būtų galima akimis peršokti
   visas iš karto ir pamatyti, kurioje dar trūksta duomenų. */

.korteles { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: .75rem; }
.kortele {
  display: block; padding: .85rem 1rem; text-decoration: none; color: inherit;
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.kortele:hover { border-color: var(--c-brand); box-shadow: 0 2px 10px rgba(29, 78, 216, .1); }
.kortele-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.kortele-head h3 { margin: 0; font-size: .95rem; }
.kortele p { margin: .3rem 0 .5rem; }
.kortele-sar { list-style: none; margin: 0; padding: 0; font-size: .8rem; }
.kortele-sar li {
  padding: .12rem 0; color: var(--c-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kortele-foot { margin-top: .5rem; }

.laukai-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 700px) { .laukai-2 { grid-template-columns: minmax(0, 1fr); } }

/* Profilis: vardas ir inicialai viršuje, faktai apačioje. */
.profilio-antraste { display: flex; align-items: center; gap: .75rem; margin-bottom: .85rem; }
.avatar-didelis { width: 2.75rem; height: 2.75rem; font-size: 1rem; }
.profilio-vardas { font-size: 1.05rem; font-weight: 600; }

/* Vardas viršuje dešinėje yra nuoroda - tegu ir atrodo paspaudžiamas. */
a.user { text-decoration: none; color: inherit; border-radius: var(--radius-sm); padding: .15rem .3rem; }
a.user:hover { background: rgba(15, 23, 42, .05); }

/* ------------------------------------------------------------------ filtrai

   Vienas blokas, viena forma. Laukai tankiai, bet kiekvienas su savo etikete -
   be jų po savaitės nebeatsimintum, kuris laukelis ką filtruoja. */

.filtrai { margin-bottom: .75rem; }
.filtrai-laukai {
  display: grid; gap: .25rem .6rem; align-items: end;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  padding: .7rem .85rem;
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.filtrai-laukai .field { margin-bottom: .25rem; min-width: 0; }

/* Aiškus tinklelis vietoj auto-fit: kitaip paskutiniai laukai nukrenta po
   vieną ir blokas atrodo atsitiktinis. */
.filtrai-laukai > .f-paieska  { grid-column: span 3; }
.filtrai-laukai > .f-bukle    { grid-column: span 2; }
.filtrai-laukai > .f-tiekejas { grid-column: span 3; }
.filtrai-laukai > .f-data     { grid-column: span 2; }
.filtrai-laukai > .f-suma     { grid-column: span 2; }
.filtru-mygtukai {
  grid-column: span 8; display: flex; gap: .35rem;
  align-items: center; justify-content: flex-end;
}

@media (max-width: 980px) {
  .filtrai-laukai { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .filtrai-laukai > .f-paieska, .filtrai-laukai > .f-tiekejas { grid-column: span 6; }
  .filtrai-laukai > .f-bukle { grid-column: span 6; }
  .filtrai-laukai > .f-data, .filtrai-laukai > .f-suma { grid-column: span 3; }
  .filtru-mygtukai { grid-column: span 6; justify-content: flex-start; }
}

/* Būklės ženklai: ikonų juosta vietoj kelių tekstinių stulpelių. Reikšmę
   pasako „title", todėl eilutė lieka siaura, o prasmė - pasiekiama. */
.zenklai { display: inline-flex; gap: .2rem; align-items: center; }
.zenklas { display: inline-flex; line-height: 0; cursor: help; }
.zenklas svg { width: 1rem; height: 1rem; }
.zenklas-ok     { color: var(--c-ok); }
.zenklas-warn   { color: var(--c-warn); }
.zenklas-danger { color: var(--c-danger); }
.zenklas-info   { color: var(--c-brand); }
.zenklas-muted  { color: #b6bfcc; }

/* Tankus sąrašas: eilutės žemesnės, kad į ekraną tilptų kelis kartus daugiau. */
.table.tankus th, .table.tankus td { padding-top: .22rem; padding-bottom: .22rem; }

/* Banko operacijos: kryptis pasakoma spalva ir ženklu - eilutėje jų daug,
   ir vien tekstas „įplauka/išlaida" užimtų per daug vietos. */
.suma-in  { color: var(--c-ok); }
.suma-out { color: var(--c-text); }

.siulymai { display: flex; flex-wrap: wrap; gap: .25rem; margin-bottom: .25rem; }
.siulymas { display: inline; }
.siulymai .btn { font-weight: 500; }

/* Sąvaržėlė sąskaitų sąraše: kiek dokumentų prisegta.
   Skaičius rodomas tik nuo dviejų - prie vieno jis nieko nepasako, o eilutę
   triukšmina. */
.saga {
  display: inline-flex; align-items: center; gap: .15rem; line-height: 0;
  color: var(--c-brand); text-decoration: none;
}
.saga:hover { color: var(--c-brand-dk); }
.saga svg { width: 1rem; height: 1rem; }
.saga-sk { font-size: .72rem; font-weight: 600; line-height: 1; }

/* Failų laukas: naršyklės „Choose file" mygtukas su .input rėmeliu atrodo
   suspaustas, todėl aukštis ir vidinis tarpas nustatomi atskirai. */
.input[type="file"] { padding: .35rem .5rem; line-height: 1.4; }

/* Dokumentų sąrašas sąskaitos kortelės šone: vardas ir dydis vienoje eilutėje,
   ilgas vardas trumpinamas, o ne laužia bloką. */
.failu-sarasas { list-style: none; margin: 0; padding: 0; }
.failu-sarasas li {
  display: flex; align-items: center; gap: .4rem;
  padding: .25rem 0; border-bottom: 1px dashed var(--c-border);
}
.failu-sarasas li:last-child { border-bottom: 0; }
.failu-sarasas a {
  display: inline-flex; align-items: center; gap: .3rem; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.failu-sarasas a svg { flex: 0 0 auto; width: 1rem; height: 1rem; }
.failu-sarasas li .small { margin-left: auto; flex: 0 0 auto; }

/* Duomenų kilmė: iš kur atsirado eilutė. Ženklas tyliai pilkas - jis yra
   patikrinimo priemonė, o ne pagrindinė informacija, todėl neturi konkuruoti
   su suma ar mokėtojo vardu. */
.kilme {
  display: inline-block; padding: 0 .35rem; margin-left: .3rem;
  font-size: .68rem; font-weight: 600; line-height: 1.15rem; letter-spacing: .01em;
  color: var(--c-muted); background: rgba(15, 23, 42, .06);
  border-radius: 3px; cursor: help; vertical-align: middle; white-space: nowrap;
}
/* Ranka įvesta - vienintelė, kurią verta pastebėti: joje gali būti apsirikta. */
.kilme-ranka { color: #8a6100; background: rgba(217, 154, 0, .14); }
.kilme-senas { opacity: .75; }

/* Peržiūros suvestinė: keli skaičiai viena eilute prieš sprendimą. */
.kort-eile {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: .6rem; margin-bottom: 1rem;
}
@media (max-width: 760px) { .kort-eile { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kort-rod {
  padding: .6rem .8rem; background: var(--c-surface);
  border: 1px solid var(--c-border); border-radius: var(--radius-sm);
}
.kort-rod-sk { font-size: 1.15rem; font-weight: 600; line-height: 1.2; }
.kort-rod-lab { font-size: .72rem; color: var(--c-muted); text-transform: uppercase; letter-spacing: .03em; }

/* Peržiūros eilutės, kurių kelti nereikia arba negalima. */
.eil-buvo { opacity: .6; }
.eil-bloga { background: rgba(220, 38, 38, .05); }

/* Pašalinta iš apskaitos: eilutė matoma tik atsirinkus, ir iš karto aišku kodėl. */
.eil-pasalinta { opacity: .65; }
.eil-pasalinta .suma-in, .eil-pasalinta .suma-out { text-decoration: line-through; }

/* Mažesnis laukelis lentelės viduje: peržiūroje paskirtis taisoma vietoje,
   todėl laukas turi tilpti į eilutę ir neišpūsti jos aukščio. */
.input-sm {
  padding: .25rem .45rem; font-size: .82rem; line-height: 1.3;
}
td .input-sm { width: 100%; }

/* Bendrijos pinigų lygtis: matyti turi ne atskiri skaičiai, o kaip jie
   susideda. Todėl tarpinė ir galutinė eilutės atskiriamos linija ir svoriu. */
.lygtis td { padding-top: .5rem; padding-bottom: .5rem; }
.lygtis-baze td { font-weight: 600; }
.lygtis-tarpine td { border-top: 2px solid var(--c-border); font-weight: 600; }
.lygtis-galutine td {
  border-top: 2px solid var(--c-border); font-weight: 700; font-size: 1.05rem;
  background: var(--c-brand-sf);
}
.lygtis-minus td:first-child { padding-left: 1.25rem; }

/* Kvito eilučių sąrašas peržiūroje: sulankstytas, kad lentelė liktų skaitoma,
   bet atidaromas vienu paspaudimu - būtent čia klaida dar atitaisoma pigiai. */
.eiluciu-sarasas summary { cursor: pointer; }
.eiluciu-sarasas ul { list-style: none; margin: .3rem 0 0; padding: 0 0 0 .5rem; }
.eiluciu-sarasas li {
  padding: .15rem 0; font-size: .85rem;
  border-left: 2px solid var(--c-border); padding-left: .5rem;
}

/* ============================================================ išrašytos sąskaitos */

/* Nesumokėta suma. Naudojama ir kvituose, ir išrašytose sąskaitose: visur, kur
   skaičius reiškia „šitų pinigų dar nėra“, jis turi atrodyti vienodai. */
.skola { color: var(--c-danger); font-weight: 600; }

/* Anuliuota, praėjusi, nebeaktualu - matoma, bet netraukia akies. */
.badge-muted { background: #f1f5f9; color: var(--c-muted); }

/* Dvi kortelės greta: rekvizitai ir suma. Siaurame ekrane - viena po kitos. */
.kort-grid {
  display: grid; grid-template-columns: 1.4fr 1fr;
  gap: .8rem; margin-bottom: 1rem;
}
@media (max-width: 860px) { .kort-grid { grid-template-columns: 1fr; } }

/* Rekvizitų sąrašas: etiketė ir reikšmė poromis. `dl` pasirinktas ne dėl
   gražumo - tai ir yra apibrėžimų sąrašas, ir taip jį perskaito ekrano
   skaitytuvas. */
.savybes {
  display: grid; grid-template-columns: auto 1fr;
  gap: .35rem .8rem; margin: 0; padding: .8rem .9rem;
}
.savybes dt { color: var(--c-muted); font-size: .85rem; }
.savybes dd { margin: 0; }
@media (max-width: 520px) {
  .savybes { grid-template-columns: 1fr; gap: 0; }
  .savybes dt { margin-top: .5rem; }
}

/* Sumų lentelė: eilutės be rėmelių, o „iš viso“ atskirta linija ir svoriu -
   kad akis rastų galutinį skaičių neieškodama. */
.sumos td { border: 0; padding: .3rem .9rem; }
.sumos .viso td { border-top: 2px solid var(--c-border); padding-top: .5rem; }

/* ============================================================ spausdinimas */

.spauda-body { background: #e9edf2; margin: 0; padding: 1rem; }

.spauda-juosta {
  display: flex; gap: .5rem; justify-content: flex-end; flex-wrap: wrap;
  max-width: 21cm; margin: 0 auto .8rem;
}
.spauda-juosta .btn { display: inline-flex; align-items: center; gap: .35rem; }



/* Lapas - A4 pločio, baltas, su paraštėmis. Ekrane atrodo kaip popierius,
   todėl prieš spausdinant matyti, kas išeis. */
.spauda-lapas {
  max-width: 21cm; margin: 0 auto; padding: 1.6cm 1.4cm;
  background: #fff; color: #111;
  box-shadow: 0 2px 12px rgba(16, 24, 40, .12);
  font-size: .92rem; line-height: 1.45;
}

.spauda-antraste { text-align: center; margin-bottom: 1.4rem; }
.spauda-antraste h1 { font-size: 1.25rem; margin: 0 0 .3rem; letter-spacing: .02em; }
.spauda-numeris { font-size: 1.05rem; }
.spauda-data { color: #444; font-size: .88rem; margin-top: .2rem; }

.spauda-salys { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-bottom: 1.2rem; }
.spauda-salis { font-size: .88rem; }
.spauda-etikete {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
  color: #666; margin-bottom: .25rem;
}
.spauda-vardas { font-weight: 700; font-size: .98rem; margin-bottom: .15rem; }

.spauda-lentele { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }
.spauda-lentele th, .spauda-lentele td {
  border: 1px solid #bbb; padding: .35rem .5rem; font-size: .86rem; vertical-align: top;
}
.spauda-lentele th { background: #f2f4f7; font-weight: 600; text-align: left; }
.spauda-lentele .right { text-align: right; }

.spauda-sumos { text-align: right; margin-bottom: .6rem; }
.spauda-sumos div { padding: .12rem 0; }
.spauda-sumos span { display: inline-block; min-width: 10rem; color: #444; }
.spauda-viso { font-size: 1.05rem; border-top: 2px solid #333; padding-top: .3rem !important; margin-top: .2rem; }

.spauda-zodziais { margin-bottom: 1rem; font-size: .88rem; }
.spauda-pastaba { margin-bottom: 1rem; font-size: .88rem; white-space: pre-line; }

.spauda-rekvizitai {
  border: 1px solid #ccc; background: #fafbfc;
  padding: .6rem .8rem; margin-bottom: 1.6rem; font-size: .88rem;
}
.spauda-smulkiai { color: #555; font-size: .8rem; margin-top: .2rem; }

.spauda-parasai { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 2.4rem; }
.spauda-linija { display: block; border-bottom: 1px solid #333; height: 1.6rem; }

/* Anuliuotos sąskaitos negalima atspausdinti taip, kad ji atrodytų galiojanti. */
.spauda-anuliuota {
  border: 2px solid #b91c1c; color: #b91c1c; font-weight: 700;
  text-align: center; padding: .5rem; margin-bottom: 1rem; letter-spacing: .08em;
}

/* Telefone lapas nebetelpa į A4 paraštes, o horizontalus slinkimas yra
   blogiausia, kas gali nutikti dokumentui: sumų stulpelis atsiduria už ekrano.
   Todėl paraštės sumažinamos, o eilučių lentelė gauna savo slinkimą. */
@media (max-width: 560px) {
  .spauda-body { padding: .5rem; }
  .spauda-lapas { padding: 1rem .8rem; font-size: .86rem; }
  .spauda-salys { grid-template-columns: 1fr; gap: .8rem; }
  .spauda-lentele { display: block; overflow-x: auto; white-space: nowrap; }
  .spauda-sumos span { min-width: 0; margin-right: .5rem; }
  .spauda-parasai { grid-template-columns: 1fr; gap: 1.2rem; }
}

/* Spausdinant lieka tik dokumentas: jokio fono, šešėlio ir mygtukų juostos. */
@media print {
  .spauda-body { background: #fff; padding: 0; }
  .spauda-juosta { display: none; }
  .spauda-lapas { max-width: none; margin: 0; padding: 0; box-shadow: none; }
  .spauda-lentele { page-break-inside: auto; }
  .spauda-lentele tr { page-break-inside: avoid; }
}

/* Patikrų blokas sąraše: sulankstytas, kol viskas sutampa. Atidarytas jis
   užimtų ekraną kasdien be reikalo, o paslėptas visai - būtų nematomas
   refleksas, tai yra jokio. */
.patikru-blokas { padding: 0; margin-bottom: 1rem; }
.patikru-blokas summary {
  cursor: pointer; padding: .7rem .9rem; font-weight: 600;
  display: flex; align-items: center; gap: .5rem;
}
.patikru-blokas[open] summary { border-bottom: 1px solid var(--c-border); }

/* Dialoge laukeliai stovi arčiau vienas kito nei puslapyje: 1,25rem tarpas
   tinka kortelėms, bet dialoge jis išpučia formą per ekrano aukštį. */
.dialogas .dlg-grid { gap: .6rem 1rem; margin-bottom: .1rem; }

/* ============================================================ antras meniu lygis */

/* Pjūviai po aktyviu punktu. Įtraukti giliau ir mažesni: antras lygis turi
   matytis kaip antras lygis net nežiūrint į liniją kairėje. */
.nav-sub {
  margin: .1rem 0 .35rem 1.35rem;
  border-left: 2px solid var(--c-border);
}
.nav-sub-link {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .24rem .6rem;
  color: var(--c-muted); font-size: .82rem; line-height: 1.3;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.nav-sub-link:hover { background: #f1f5f9; color: var(--c-text); text-decoration: none; }
.nav-sub-link.active { background: var(--c-brand-sf); color: var(--c-brand); font-weight: 600; }
.nav-sub-link .nav-count { font-size: .72rem; background: transparent; }
.nav-sub-link:hover .nav-count { background: #e2e8f0; }
.nav-sub-link.active .nav-count { background: #dbeafe; color: var(--c-brand); }

/* Skaičius, į kurį verta pažiūrėti: neišsiųsti juodraščiai ir vėluojantys
   mokėjimai. Nulis lieka pilkas - įspėjimas be priežasties nustoja veikti. */
.nav-count-warn { background: var(--c-danger-sf); color: var(--c-danger); }
.nav-sub-link .nav-count-warn { background: var(--c-danger-sf); color: var(--c-danger); }

/* ============================================================ kvitų išrašymas */

/* Režimų perjungimas. Ne skirtukai, o dvi kortelės su paaiškinimu: „Ranka“ nėra
   atsarginis kelias, o atskiras darbas, ir vien pavadinimo tam nepakanka. */
.rezimai { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-bottom: 1rem; }
@media (max-width: 620px) { .rezimai { grid-template-columns: 1fr; } }
.rezimas {
  display: flex; flex-direction: column; gap: .15rem;
  padding: .7rem .9rem; background: var(--c-surface);
  border: 1px solid var(--c-border); border-radius: var(--radius-sm);
  color: var(--c-text);
}
.rezimas:hover { border-color: var(--c-brand); text-decoration: none; }
.rezimas.aktyvus {
  border-color: var(--c-brand); background: var(--c-brand-sf); color: var(--c-brand);
  box-shadow: inset 3px 0 0 var(--c-brand);
}

/* Objektų pasirinkimas: tinklelis, o ne sąrašas - 30 adresų stulpeliu verstų
   slinkti per visą ekraną, nors kiekvienas jų yra vos kelių žodžių. */
.objektu-tinklas {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: .25rem .8rem;
  max-height: 22rem; overflow-y: auto;
  padding: .2rem; border: 1px solid var(--c-border); border-radius: var(--radius-sm);
}
.objektas-langelis {
  display: flex; align-items: baseline; gap: .45rem;
  padding: .25rem .4rem; border-radius: var(--radius-sm); cursor: pointer;
  font-size: .88rem; line-height: 1.3;
}
.objektas-langelis:hover { background: #f1f5f9; }
.objektas-langelis input { margin: 0; flex: 0 0 auto; }

/* Rankinė eilutė: rūšis, pavadinimas, suma, šalinimas - viena eilute, kad
   akis matytų visą įrašą iš karto, o ne vertikalią formą kiekvienai eilutei. */
.rankos-eilute {
  display: grid; grid-template-columns: 9rem 1fr 7rem 2rem;
  gap: .4rem; align-items: center; margin-bottom: .4rem;
}
@media (max-width: 620px) {
  .rankos-eilute { grid-template-columns: 1fr 1fr; }
  .rankos-eilute input[name="e_pav[]"] { grid-column: 1 / -1; }
}
.rankos-suma { text-align: right; }

.varnele {
  display: flex; align-items: baseline; gap: .45rem;
  margin-top: .8rem; cursor: pointer; font-size: .9rem;
}
.varnele input { margin: 0; }

/* Eilučių varnelės peržiūroje: paspaudžiama visa eilutė, ne tik langelis. */
.eiluciu-sarasas li label { display: flex; align-items: baseline; gap: .4rem; cursor: pointer; }
.eiluciu-sarasas li label input { margin: 0; flex: 0 0 auto; }

/* Papildoma išlaida generatoriaus peržiūroje: rūšis, pavadinimas, suma vienoje
   eilutėje po objekto eilučių sąrašu. Įrašoma tik generuojant - iki tol tai
   tik laukeliai, todėl atrodo kaip formos dalis, o ne kaip esama eilutė. */
.papildoma {
  display: grid; grid-template-columns: 8rem 1fr 6rem;
  gap: .3rem; margin: .5rem 0 .2rem .5rem;
  padding-left: .5rem; border-left: 2px dashed var(--c-border);
}
@media (max-width: 620px) {
  .papildoma { grid-template-columns: 1fr 1fr; }
  .papildoma input[name^="p_pav"] { grid-column: 1 / -1; }
}


/* Veiksmų stulpelis su ikonomis.

   Ikona mygtuke turi stovėti viduryje, o mygtukas būti kvadratinis - kitaip
   penki ikoniniai mygtukai eilėje atrodo kaip penki skirtingo pločio langeliai.
   `gap` reikalingas todėl, kad dalis jų yra atskirose formose (POST), ir tarpo
   tarp jų kitaip nebūtų. */
.veiksmai { white-space: nowrap; }
.veiksmai > *,
.veiksmai form { display: inline-flex; gap: .25rem; vertical-align: middle; }
.veiksmai .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .28rem .4rem;
    min-width: 1.9rem;
}
.veiksmai .btn svg { display: block; }


/* Tekstas tik ekrano skaitytuvui: stulpelio antraštė, kurios akimis matyti
   nereikia (ikonų stulpelis), bet be kurios lentelė jam lieka be pavadinimo. */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}


/* Eilės rodyklės. Siauresnės už kitus veiksmų mygtukus - jos yra tvarkymas,
   o ne veiksmas, ir neturi traukti akies tiek pat. Ikona ta pati, 16px, kaip
   visur kitur (tpl/dalys/ikona-*.tpl), tik mygtuko apvadas siauresnis. */
.rodykles .btn { min-width: 1.6rem; padding: .28rem .3rem; }
.rodykles .btn[disabled] { opacity: .35; cursor: default; }


/* Ikona tekste kaip nuoroda (sąvaržėlė prie sąskaitos numerio, spausdinimas
   kvito eilutėje). Skirtingai nei `.veiksmai`, ji stovi ŠALIA teksto, o ne
   savo stulpelyje, todėl neturi mygtuko apvado ir lygiuojasi su eilute. */
.ikonos-nuoroda {
    display: inline-flex;
    align-items: center;
    vertical-align: -.2em;
    margin-left: .35rem;
    color: var(--c-muted);
    text-decoration: none;
}
.ikonos-nuoroda:hover,
.ikonos-nuoroda:focus-visible { color: var(--c-link, currentColor); }
.ikonos-nuoroda svg { display: block; }


/* ===================================================================== *
 *  DOKUMENTAS: sąskaita popieriui ir PDF (tpl/bills/kvitasSpauda.tpl)
 *
 *  Atskiros `.dok-*` taisyklės, o ne bendros `.table` / `.card`, todėl, kad
 *  ekrano stiliai yra kompromisas su siauru telefonu: minkšti kampai, pilkas
 *  fonas, dideli tarpai. Ant popieriaus tas pats atrodo kaip iškarpa iš
 *  svetainės, o ne kaip dokumentas. Čia matas yra milimetrai ir A4 lapas.
 *
 *  Spalvų beveik nėra sąmoningai: nespalvotas spausdintuvas - įprastas, o
 *  dokumentas, kurio esmė dingsta be spalvos, yra blogas dokumentas. Spalva
 *  lieka tik ten, kur ji dubliuoja žodį („Terminas praėjęs").
 * ===================================================================== */

.dok { color: #111; font-size: 10.5pt; line-height: 1.45; }

/* --- antraštė: kas išrašė (kairėje) ir koks tai dokumentas (dešinėje) */
.dok-virsus {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 1.5rem; padding-bottom: 4mm; border-bottom: 1.5pt solid #111;
}
.dok-israse-vardas { font-size: 13pt; font-weight: 700; margin-bottom: 1.5mm; }
.dok-smulkiai { font-size: 8.5pt; color: #444; line-height: 1.4; }

.dok-antspaudas { text-align: right; flex: 0 0 auto; }
.dok-tipas {
  font-size: 8.5pt; text-transform: uppercase; letter-spacing: .08em; color: #444;
}
.dok-nr { font-size: 16pt; font-weight: 700; margin: .5mm 0 2mm; }

.dok-datos { font-size: 9pt; margin-left: auto; border-collapse: collapse; }
.dok-datos td { padding: .3mm 0 .3mm 3mm; text-align: right; }
.dok-datos td:first-child { color: #444; padding-left: 0; }

/* --- mokėtojas ir mokėtina suma vienoje juostoje */
.dok-juosta {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 1.5rem; margin: 5mm 0 6mm;
}
.dok-etikete {
  font-size: 8pt; text-transform: uppercase; letter-spacing: .08em;
  color: #444; margin-bottom: 1mm;
}
.dok-vardas { font-size: 11.5pt; font-weight: 600; }
.dok-moketi { text-align: right; flex: 0 0 auto; }
.dok-suma { font-size: 20pt; font-weight: 700; line-height: 1.1; }
.dok-apmoketa { font-size: 9pt; font-weight: 600; }
.dok-veluoja { font-size: 9pt; font-weight: 600; color: #b42318; }

/* --- eilutės.

   `thead` kartojamas kiekviename lape, o eilutė per puslapių ribą nelaužoma:
   kitaip antrame lape stovi skaičiai be stulpelių pavadinimų. */
.dok-lentele {
  width: 100%; border-collapse: collapse; font-size: 9.5pt;
}
.dok-lentele thead { display: table-header-group; }
.dok-lentele tr { page-break-inside: avoid; }
.dok-lentele th {
  text-align: left; font-size: 8pt; text-transform: uppercase;
  letter-spacing: .06em; color: #444; font-weight: 600;
  padding: 0 2mm 1.5mm; border-bottom: .75pt solid #111;
}
.dok-lentele td { padding: 1.8mm 2mm; border-bottom: .5pt solid #d7dbe0; vertical-align: top; }
.dok-lentele th:first-child, .dok-lentele td:first-child { padding-left: 0; }
.dok-lentele th:last-child,  .dok-lentele td:last-child  { padding-right: 0; }
.dok-eil { width: 8mm; color: #666; }
.dok-skaicius { text-align: right; white-space: nowrap; }

.dok-lentele tfoot td { border-bottom: none; padding: 1.2mm 2mm; }
.dok-dalis td { color: #444; font-size: 9pt; }
.dok-viso td {
  font-weight: 700; font-size: 11pt;
  border-top: .75pt solid #111; padding-top: 2mm;
}

/* --- kur mokėti. Rėmelis, o ne fonas: pilkas fonas juodai baltame
       spausdintuve virsta taškeliais, o rėmelis lieka rėmeliu. */
.dok-mokejimas { margin-top: 7mm; border: .75pt solid #111; padding: 3mm 4mm; }
.dok-rekvizitai { width: 100%; border-collapse: collapse; font-size: 9.5pt; }
.dok-rekvizitai td { padding: .8mm 0; vertical-align: top; }
.dok-rekvizitai td:first-child { width: 38mm; color: #444; }

.dok-apacia {
  margin-top: 8mm; padding-top: 2.5mm; border-top: .5pt solid #d7dbe0;
  font-size: 8pt; color: #666;
}

@media (max-width: 620px) {
  .dok-virsus, .dok-juosta { flex-direction: column; gap: .8rem; }
  .dok-antspaudas, .dok-moketi { text-align: left; }
  .dok-datos { margin-left: 0; }
  .dok-datos td { text-align: left; padding-left: 0; padding-right: 3mm; }
  .dok-lentele { font-size: 9pt; }
  .dok-lentele th:nth-child(3), .dok-lentele td:nth-child(3) { display: none; }
}

@media print {
  .dok { font-size: 10pt; }
  .dok-mokejimas { page-break-inside: avoid; }
}


/* Ikona mygtuke šalia teksto (Protokolas, Spausdinti). Be to ikona atsisėda
   ant pagrindo linijos ir tekstas pakyla per porą pikselių. */
.toolbar .btn { display: inline-flex; align-items: center; gap: .35rem; }
.toolbar .btn svg { display: block; }


/* ---------- Sunaudojimo grafikas (tpl/dalys/grafikas-stulpeliai.tpl) ----

   Stačiakampiai, o ne SVG diagrama: dvylika stulpelių nėra priežastis tempti
   biblioteką, o `div` su procentiniu aukščiu pats prisitaiko prie pločio ir
   tvarkingai spausdinasi. Aukštis fiksuotas taškais - kitaip procentai
   neturėtų nuo ko skaičiuotis. */
.grafikas { padding: .2rem .9rem .9rem; }

.grafiko-stulpeliai { display: flex; align-items: flex-end; gap: .35rem; }
.grafiko-stulpelis { flex: 1 1 0; min-width: 0; text-align: center; }

/* Juostos langelis fiksuoto aukščio, juosta jame - absoliuti, nuo apačios.
   Flex'e procentinis aukštis neturi nuo ko skaičiuotis ir juostas suspaudžia
   į vienodas; čia bazė aiški, todėl 40 % ir 100 % tikrai skiriasi. */
.grafiko-vieta { position: relative; height: 96px; }
.grafiko-juosta {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: var(--c-brand, #2563eb); border-radius: 3px 3px 0 0;
  min-height: 2px; opacity: .85;
}
.grafiko-stulpelis:hover .grafiko-juosta { opacity: 1; }

/* Skaičius virš stulpelio. Siauruose telefonuose jis nebetelpa ir tik
   susilieja į dėmę, todėl ten paliekamas tik grafikas ir mėnuo. */
.grafiko-reiksme {
  font-size: .68rem; color: var(--c-muted); margin-bottom: .15rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.grafiko-menuo { font-size: .7rem; color: var(--c-muted); margin-top: .25rem; }
.grafiko-santrauka { margin-top: .6rem; }

.bendras-skaitiklis { border-top: 1px solid var(--c-border); }
.bendras-skaitiklis:first-of-type { border-top: 0; }
.bendro-antraste {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 1rem; padding: .8rem .9rem .2rem;
}

@media (max-width: 620px) {
  .grafiko-reiksme { display: none; }
  .grafiko-vieta { height: 74px; }
  .bendro-antraste { flex-direction: column; gap: .3rem; }
  .bendro-antraste .right { text-align: left; }
}

@media print {
  .grafiko-juosta { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Nuotraukos laukas prie rodmens. Tikras `input[type=file]` paslepiamas, o
   matomas yra jo `label` - kitaip kiekvienoje naršyklėje jis atrodo kitaip
   („Choose file", „Naršyti…", „Pasirinkti failą") ir lentelėje užima daugiau
   vietos nei pats rodmuo. Paslėptas jis lieka pasiekiamas klaviatūra ir
   ekrano skaitytuvui, nes `label` jį apgaubia. */
/* Blokas, ne `inline-block`: langelis su rodmeniu yra `nowrap`, todėl šalia
   jo mygtukas išlįstų į gretimą stulpelį. Savo eilutėje jis ir logiškesnis -
   pirma skaičius, paskui jo įrodymas. */
.foto-laukas { display: block; margin-top: .35rem; cursor: pointer; white-space: normal; }
.foto-laukas input[type="file"] {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0;
}
.foto-laukas > span {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .78rem; color: var(--c-muted);
    border: 1px dashed var(--c-border); border-radius: 6px;
    padding: .2rem .45rem;
}
.foto-laukas input:focus-visible + span,
.foto-laukas:hover > span { color: var(--c-text, inherit); border-style: solid; }

/* Pasirinkus failą - kad matytųsi, jog kažkas prisegta. */
.foto-laukas.yra > span { border-style: solid; color: var(--c-ok, #15803d); }

.foto-sarasas { display: flex; gap: .3rem; justify-content: flex-end; margin-top: .3rem; }


/* ---------- Metų linijinis grafikas (tpl/dalys/grafikas-linijos.tpl) ----------

   Administravimo sąrašo viršuje: viena linija vienam mazgui, dvylika taškų.
   SVG tempiasi per visą plotį, aukštis fiksuotas - kitaip plačiame ekrane jis
   išaugtų į pusę puslapio ir nustumtų lentelę, dėl kurios čia ir ateinama. */
.rodmenu-grafikas .card-head { flex-wrap: wrap; gap: .5rem; }
.rodmenu-grafikas .card-body { padding-top: .4rem; }

.grafiko-remas { position: relative; }
.grafiko-remas svg { display: block; width: 100%; height: 250px; overflow: visible; }

.grafiko-legenda { display: flex; flex-wrap: wrap; gap: .25rem .9rem; }
.legendos-zyma { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; color: var(--c-muted); }
.legendos-zyma i,
.grafiko-debesis i {
  width: .6rem; height: .6rem; border-radius: 2px; flex: 0 0 auto; display: inline-block;
}

/* Debesėlis po pele. `pointer-events: none` būtina: kitaip jis atsiduria po
   pele, perima `mousemove`, ir grafikas ima mirksėti. */
.grafiko-debesis {
  position: absolute; top: .5rem; z-index: 2; pointer-events: none;
  background: var(--c-card, #fff); border: 1px solid var(--c-border);
  border-radius: 8px; padding: .45rem .6rem;
  box-shadow: 0 6px 18px rgba(16, 24, 40, .12);
  font-size: .8rem; white-space: nowrap;
}
.grafiko-debesis div { display: flex; align-items: center; gap: .35rem; margin-top: .2rem; }
.grafiko-debesis b { margin-left: auto; padding-left: .6rem; }

@media (max-width: 620px) {
  .grafiko-remas svg { height: 200px; }
  .grafiko-debesis { display: none; }
}


/* Grupės antraštė sąraše (namas / adresas). Rodoma tik tada, kai grupių
   daugiau nei viena — kitaip kartotų puslapio antraštę. */
.grupes-antraste {
  padding: .6rem .9rem .3rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--c-muted);
  border-top: 1px solid var(--c-border);
}
.card > .grupes-antraste:first-of-type { border-top: 0; }


/* ===================================================================== *
 *  BENDRIJOS SKAITIKLIŲ ANALITIKA (tpl/dalys/grafikas-metai.tpl)
 *
 *  Skaičiai viršuje, grafikas po jais: atsakymas, paskui pagrindimas.
 *  Grafike du stulpeliai mėnesiui - šiemet ir pernai. Šalia, o ne vienas ant
 *  kito: perdengti gražesni, bet iš jų neįskaitomas mažesnysis, o būtent jis
 *  dažniausiai ir yra bazė, su kuria lyginama.
 * ===================================================================== */

/* --- rodiklių juosta */
.rodikliai {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: .25rem; padding: .2rem .9rem .9rem;
}
.rodiklis { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.rodiklio-zyma {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--c-muted);
}
.rodiklio-verte { font-size: 1.35rem; font-weight: 700; line-height: 1.2; }
.rodiklio-verte small { font-size: .8rem; font-weight: 500; color: var(--c-muted); }
.rodiklio-po { font-size: .76rem; color: var(--c-muted); }

.pokytis, .metu-pokytis { font-weight: 600; }
.pokytis.auga,   .metu-pokytis.auga   { color: #b42318; }
.pokytis.mazeja, .metu-pokytis.mazeja { color: #15803d; }

/* --- metų grafikas */
.metu-grafikas { padding: 0 .9rem .9rem; }
.metu-stulpeliai { display: flex; align-items: flex-end; gap: .3rem; }
.metu-menuo { flex: 1 1 0; min-width: 0; text-align: center; }

.metu-reiksme {
  font-size: .7rem; color: var(--c-muted); margin-bottom: .2rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Juostų langelis fiksuoto aukščio: `flex` viduje procentinis aukštis neturi
   nuo ko skaičiuotis ir visos juostos išeina vienodos. */
.metu-vieta {
  position: relative; height: 110px;
  display: flex; align-items: flex-end; justify-content: center; gap: 2px;
}
.metu-juosta { width: 46%; max-width: 22px; border-radius: 3px 3px 0 0; min-height: 1px; }
.metu-juosta.pernai { background: #cbd5e1; }
.metu-juosta.siemet { background: var(--c-brand, #2563eb); }

.metu-menuo.neiprastas .metu-juosta.siemet { background: #d97706; }
.metu-menuo.neiprastas .metu-zyma { color: #b45309; font-weight: 700; }

.metu-zyma {
  font-size: .72rem; color: var(--c-muted); margin-top: .3rem;
  display: flex; flex-direction: column; gap: .05rem;
}
.metu-pokytis { font-size: .68rem; }

.metu-legenda { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin-top: .7rem; }
.metu-legenda span { display: inline-flex; align-items: center; gap: .35rem; }
.metu-legenda i { width: .6rem; height: .6rem; border-radius: 2px; display: inline-block; }
.metu-legenda i.siemet { background: var(--c-brand, #2563eb); }
.metu-legenda i.pernai { background: #cbd5e1; }
.metu-legenda i.neiprastas { background: #d97706; }

@media (max-width: 900px) {
  .rodikliai { grid-template-columns: repeat(2, 1fr); gap: .8rem .5rem; }
}

@media (max-width: 620px) {
  /* Telefone dvylika mėnesių su reikšmėmis ir procentais susilieja į dėmę.
     Lieka tai, ką galima perskaityti: juostos ir mėnesio numeris. */
  .metu-reiksme, .metu-pokytis { display: none; }
  .metu-vieta { height: 84px; }
  .rodiklio-verte { font-size: 1.15rem; }
}

@media print {
  .metu-juosta { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Serijos taškas lentelės antraštėje - ta pati spalva, kaip grafike. Be jo
   lentelė ir grafikas atrodo kaip du atskiri dalykai apie tą patį. */
.seriju-taskas {
  display: inline-block; width: .6rem; height: .6rem;
  border-radius: 50%; vertical-align: baseline;
}

/* Poraštės eilutės: metų suma, pernykštė ir pokytis. Pilkesnės už sumą -
   pagrindinis skaičius lieka viršuje, o šitos yra jo kontekstas. */
.poraste-pernai th, .poraste-pokytis th { font-weight: 500; border-top: 0; padding-top: .15rem; }
.poraste-pernai th:first-child, .poraste-pokytis th:first-child { font-weight: 600; }

/* „naujas" prie rodmens - pakeistas prietaisas. Be šios žymos „Iki" stulpelyje
   27 505 virsta 757, ir lentelė atrodo sugedusi, nors sunaudojimas teisingas. */
.zyma-keitesi {
  font-size: .66rem; text-transform: uppercase; letter-spacing: .04em;
  background: rgba(148, 163, 184, .22); color: var(--c-muted);
  border-radius: 4px; padding: .05rem .25rem; margin-left: .25rem;
  vertical-align: 1px;
}

/* ==========================================================================
   VIEŠAS PUSLAPIS (pardavimo puslapiai: /, /lt/galimybes, /lt/kainos, …)
   ==========================================================================

   KODĖL VISOS KLASĖS PRASIDEDA `v-`

   Sistemos vidus ir pardavimo puslapis yra du skirtingi produktai viename
   kode. Sistemoje svarbu tankis - kuo daugiau eilučių ekrane; pardavimo
   puslapyje atvirkščiai - oras ir vienas dalykas iš karto. Todėl jie turi
   skirtingus dydžius, skirtingus tarpus ir skirtingas antraštes, o `v-`
   prefiksas garantuoja, kad jie niekada nesusidurs: pakeitus `.card` viešame
   puslapyje nesugriūna nė vienas administravimo langas.

   Failas prirašytas app.css GALE sąmoningai - taip matyti, kad tai atskiras
   sluoksnis, o ne sistemos dizaino dalis.                                    */

:root {
  --v-tamsi:     #0b1524;
  --v-tamsi-2:   #132339;
  --v-melyna:    #1d4ed8;
  --v-melyna-dk: #1739a8;
  --v-melyna-sf: #eef4ff;
  --v-tekstas:   #14202e;
  --v-pilka:     #5a6b80;
  --v-remas:     #e1e7f0;
  --v-fonas:     #ffffff;
  --v-fonas-2:   #f6f8fc;
  --v-ok:        #047857;
  --v-ok-sf:     #ecfdf5;
  --v-warn:      #b45309;
  --v-warn-sf:   #fffbeb;
  --v-r:         14px;
  --v-r-s:       10px;
  --v-seselis:   0 1px 2px rgba(11,21,36,.05), 0 8px 24px -12px rgba(11,21,36,.18);
  --v-seselis-2: 0 2px 4px rgba(11,21,36,.06), 0 24px 48px -24px rgba(11,21,36,.28);
}

/* ---------- Pagrindas ---------- */

.v-body {
  background: var(--v-fonas);
  color: var(--v-tekstas);
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.v-body main { display: block; }

.v-wrap {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}

.v-siauras { max-width: 780px; }

/* Klaviatūra naršančiam: iki pirmo TAB nematoma. */
.v-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--v-melyna); color: #fff; padding: .7rem 1.1rem;
  border-radius: 0 0 var(--v-r-s) 0; font-weight: 600;
}
.v-skip:focus { left: 0; text-decoration: none; }

/* ---------- Tipografija ---------- */

.v-h1 {
  font-size: clamp(2rem, 1.3rem + 2.6vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: -.025em;
  font-weight: 700;
  margin: 0 0 1rem;
  color: inherit;
}
.v-h1-maz { font-size: clamp(1.8rem, 1.3rem + 1.9vw, 2.6rem); }

.v-h2 {
  font-size: clamp(1.45rem, 1.15rem + 1.1vw, 2.1rem);
  line-height: 1.2;
  letter-spacing: -.02em;
  font-weight: 700;
  margin: 0 0 .75rem;
}
.v-h2-maz { font-size: 1.25rem; letter-spacing: -.01em; }

.v-h3 {
  font-size: 1.075rem;
  line-height: 1.35;
  font-weight: 650;
  margin: 0 0 .4rem;
}

.v-lead {
  font-size: clamp(1.05rem, .98rem + .35vw, 1.2rem);
  line-height: 1.6;
  color: var(--v-pilka);
  margin: 0 0 1.75rem;
}

.v-po-h2 { color: var(--v-pilka); margin: 0; font-size: 1.05rem; }

.v-uzrasas {
  text-transform: uppercase;
  letter-spacing: .09em;
  font-size: .75rem;
  font-weight: 700;
  color: var(--v-melyna);
  margin: 0 0 .6rem;
}

.v-smulkiai { font-size: .875rem; color: var(--v-pilka); }

.v-zyme {
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--v-melyna-sf); color: var(--v-melyna-dk);
  border: 1px solid #d5e2ff;
  padding: .35rem .8rem; border-radius: 999px;
  font-size: .82rem; font-weight: 600; margin: 0 0 1.1rem;
}
.v-zyme::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--v-ok); flex: none;
}
.v-zyme-centre { margin-left: auto; margin-right: auto; }

.v-nuoroda {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 600; color: var(--v-melyna); text-decoration: none;
}
.v-nuoroda:hover { text-decoration: underline; }
.v-nuoroda .v-ikona { width: 18px; height: 18px; transition: transform .15s; }
.v-nuoroda:hover .v-ikona { transform: translateX(3px); }

.v-ikona { width: 22px; height: 22px; flex: none; }

/* ---------- Mygtukai ---------- */

.v-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .62rem 1.15rem;
  border: 1px solid transparent; border-radius: var(--v-r-s);
  font: inherit; font-weight: 600; line-height: 1.35;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .14s, border-color .14s, color .14s, transform .14s;
}
.v-btn:hover { text-decoration: none; transform: translateY(-1px); }
.v-btn:active { transform: none; }
.v-btn:focus-visible { outline: 2px solid var(--v-melyna); outline-offset: 2px; }

.v-btn-pirm   { background: var(--v-melyna); color: #fff; box-shadow: 0 6px 16px -8px rgba(29,78,216,.9); }
.v-btn-pirm:hover { background: var(--v-melyna-dk); color: #fff; }

.v-btn-remas  { background: #fff; color: var(--v-tekstas); border-color: var(--v-remas); }
.v-btn-remas:hover { background: var(--v-fonas-2); border-color: #cfdae9; color: var(--v-tekstas); }

.v-btn-tylus  { background: transparent; color: var(--v-tekstas); }
.v-btn-tylus:hover { background: var(--v-fonas-2); }

.v-btn-baltas { background: #fff; color: var(--v-tamsi); }
.v-btn-baltas:hover { background: #eef2f8; color: var(--v-tamsi); }

.v-btn-did    { padding: .85rem 1.55rem; font-size: 1.02rem; }
.v-btn-block  { width: 100%; }

.v-mygtukai { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ---------- Viršus ---------- */

.v-top {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--v-remas);
}

.v-top-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 68px;
}

.v-brand {
  display: inline-flex; align-items: center; gap: .55rem;
  font-weight: 700; font-size: 1.1rem; letter-spacing: -.02em;
  color: var(--v-tekstas); text-decoration: none;
}
.v-brand:hover { text-decoration: none; }
.v-brand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 9px;
  background: linear-gradient(140deg, var(--v-melyna), #3b82f6);
  color: #fff; flex: none;
}
.v-brand-eu { color: var(--v-melyna); }
.v-brand-sviesus { color: #fff; }
.v-brand-sviesus .v-brand-eu { color: #93b4ff; }

/* Meniu: žymimasis langelis, kad veiktų be JavaScript.
   Plačiame ekrane langelis ignoruojamas - meniu matomas visada. */
.v-meniu { position: relative; display: flex; align-items: center; }

.v-meniu-jungiklis {
  /* Paslėptas, bet PASIEKIAMAS klaviatūra: `display:none` atimtų TAB. */
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; border: 0; overflow: hidden; clip-path: inset(50%);
}

.v-meniu-mygtukas {
  display: none;
  width: 42px; height: 42px; border-radius: var(--v-r-s);
  border: 1px solid var(--v-remas); background: #fff;
  cursor: pointer; align-items: center; justify-content: center;
  flex-direction: column; gap: 4px;
}
.v-meniu-mygtukas span { display: block; width: 17px; height: 2px; background: var(--v-tekstas); border-radius: 2px; }
.v-meniu-jungiklis:focus-visible + .v-meniu-mygtukas { outline: 2px solid var(--v-melyna); outline-offset: 2px; }

.v-nav { display: flex; align-items: center; gap: .35rem; }

.v-nav-l {
  padding: .5rem .75rem; border-radius: var(--v-r-s);
  color: var(--v-pilka); font-weight: 550; text-decoration: none;
}
.v-nav-l:hover { background: var(--v-fonas-2); color: var(--v-tekstas); text-decoration: none; }
.v-nav-a { color: var(--v-tekstas); background: var(--v-fonas-2); }

.v-kalbos {
  display: inline-flex; gap: 2px; margin-left: .4rem;
  background: var(--v-fonas-2); border: 1px solid var(--v-remas);
  border-radius: 999px; padding: 2px;
}
.v-kalba {
  padding: .25rem .55rem; border-radius: 999px;
  font-size: .78rem; font-weight: 650; color: var(--v-pilka); text-decoration: none;
}
.v-kalba:hover { color: var(--v-tekstas); text-decoration: none; }
.v-kalba-a { background: #fff; color: var(--v-tekstas); box-shadow: 0 1px 2px rgba(11,21,36,.08); }

.v-top-veiksmai { display: flex; align-items: center; gap: .5rem; margin-left: .6rem; }

/* ---------- Hero ---------- */

.v-hero {
  position: relative;
  padding: clamp(3rem, 1.5rem + 6vw, 6rem) 0 clamp(3rem, 1.5rem + 5vw, 5rem);
  background:
    radial-gradient(1100px 520px at 88% -8%, #e8efff 0%, rgba(232,239,255,0) 62%),
    radial-gradient(760px 420px at 2% 8%, #f2f6ff 0%, rgba(242,246,255,0) 60%),
    var(--v-fonas);
  overflow: hidden;
}

.v-hero-in {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 3vw, 4rem);
  align-items: center;
}

.v-irodymai {
  list-style: none; margin: 1.75rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
}
.v-irodymai li {
  display: flex; align-items: center; gap: .45rem;
  font-size: .92rem; color: var(--v-pilka); font-weight: 550;
}
.v-irodymai .v-ikona { width: 17px; height: 17px; color: var(--v-ok); stroke-width: 2.4; }

/* ---------- Sistemos vaizdas ---------- */

.v-hero-vaizdas { perspective: 1600px; }

.v-langas {
  background: #fff;
  border: 1px solid var(--v-remas);
  border-radius: var(--v-r);
  box-shadow: var(--v-seselis-2);
  overflow: hidden;
  transform: rotateY(-6deg) rotateX(2deg);
}

.v-langas-virsus {
  display: flex; align-items: center; gap: 6px;
  padding: .6rem .85rem;
  background: var(--v-fonas-2);
  border-bottom: 1px solid var(--v-remas);
}
.v-taskas { width: 9px; height: 9px; border-radius: 50%; background: #d3dbe6; flex: none; }
.v-langas-adresas {
  margin-left: .75rem; flex: 1;
  background: #fff; border: 1px solid var(--v-remas); border-radius: 6px;
  padding: .18rem .55rem; font-size: .72rem; color: var(--v-pilka);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.v-langas-turinys { padding: 1.1rem; }

.v-langas-antraste {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; margin-bottom: 1rem;
}
.v-langas-h { font-weight: 700; font-size: 1.05rem; }
.v-langas-po { font-size: .8rem; color: var(--v-pilka); }

.v-zenkl {
  display: inline-block; padding: .18rem .55rem; border-radius: 999px;
  font-size: .74rem; font-weight: 650; white-space: nowrap;
}
.v-zenkl-ok   { background: var(--v-ok-sf);   color: var(--v-ok); }
.v-zenkl-warn { background: var(--v-warn-sf); color: var(--v-warn); }

.v-rodikliai { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; margin-bottom: 1rem; }
.v-rodiklis {
  background: var(--v-fonas-2); border: 1px solid var(--v-remas);
  border-radius: var(--v-r-s); padding: .6rem .7rem;
}
.v-rodiklis-z { display: block; font-size: .7rem; color: var(--v-pilka); }
.v-rodiklis-v { display: block; font-size: 1.02rem; letter-spacing: -.01em; }

.v-eil {
  display: flex; align-items: center; gap: .7rem;
  padding: .7rem .2rem; border-top: 1px solid var(--v-remas);
}
.v-eil-zyme {
  width: 34px; height: 34px; border-radius: 9px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--v-melyna-sf); color: var(--v-melyna-dk);
  font-size: .76rem; font-weight: 700;
}
.v-eil-vardas { flex: 1; font-weight: 600; font-size: .92rem; min-width: 0; }
.v-eil-vardas em {
  display: block; font-style: normal; font-weight: 400;
  font-size: .78rem; color: var(--v-pilka);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.v-juostele {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-top: .9rem; padding: .6rem .75rem;
  background: var(--v-melyna-sf); border-radius: var(--v-r-s);
  font-size: .82rem;
}
.v-juostele-z { font-weight: 650; color: var(--v-melyna-dk); }
.v-juostele-v { color: var(--v-pilka); }

/* ---------- Faktų juosta ---------- */

.v-faktai { border-top: 1px solid var(--v-remas); border-bottom: 1px solid var(--v-remas); background: var(--v-fonas-2); }
.v-faktai-in {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1rem; padding-top: 1.75rem; padding-bottom: 1.75rem;
}
.v-faktas { text-align: center; }
.v-faktas-sk {
  display: block; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem);
  font-weight: 700; letter-spacing: -.03em; color: var(--v-melyna);
  line-height: 1.1;
}
.v-faktas-uz { display: block; font-size: .86rem; color: var(--v-pilka); margin-top: .25rem; }

/* ---------- Sekcijos ---------- */

.v-sekcija { padding: clamp(3rem, 1.8rem + 4.5vw, 5.5rem) 0; }
.v-sekcija-pilka { background: var(--v-fonas-2); border-top: 1px solid var(--v-remas); border-bottom: 1px solid var(--v-remas); }

.v-sekcijos-virsus { max-width: 680px; margin: 0 0 2.5rem; }
.v-sekcijos-apacia { margin: 2.25rem 0 0; }

.v-virsus {
  padding: clamp(2.5rem, 1.5rem + 3.5vw, 4.25rem) 0 clamp(1.5rem, 1rem + 2vw, 2.5rem);
  background: radial-gradient(900px 400px at 50% -30%, #e9f0ff 0%, rgba(233,240,255,0) 65%), var(--v-fonas);
  text-align: center;
}
.v-virsus .v-lead { margin-left: auto; margin-right: auto; }
/* Po puslapio antraštės sekcija prasideda arčiau: dvi pilnos paraštės iš eilės
   padaro tuščią ekraną, kuriame nėra nieko, ką būtų galima skaityti. */
.v-virsus + .v-sekcija { padding-top: clamp(1.5rem, 1rem + 2vw, 2.75rem); }
.v-virsus .v-mygtukai { justify-content: center; }

.v-trupiniai {
  border-bottom: 1px solid var(--v-remas);
  font-size: .82rem; color: var(--v-pilka);
}
.v-trupiniai .v-wrap { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; padding-top: .7rem; padding-bottom: .7rem; }
.v-trupiniai a { color: var(--v-pilka); }
.v-trupiniai [aria-current] { color: var(--v-tekstas); font-weight: 600; }

/* ---------- Tinklelis ir kortelės ---------- */

.v-tinklas { display: grid; gap: 1.25rem; }
.v-tinklas-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.v-tinklas-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.v-tinklas-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.v-kort {
  background: #fff; border: 1px solid var(--v-remas); border-radius: var(--v-r);
  padding: 1.4rem; box-shadow: var(--v-seselis);
  transition: transform .16s, box-shadow .16s, border-color .16s;
}
.v-kort:hover { transform: translateY(-2px); box-shadow: var(--v-seselis-2); border-color: #cfdae9; }
.v-kort-plati { padding: 1.75rem; }
.v-kort-p { color: var(--v-pilka); margin: 0; font-size: .94rem; }

.v-kort-ikona {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px; margin-bottom: .9rem;
  background: var(--v-melyna-sf); color: var(--v-melyna);
}

.v-sarasas { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .5rem; }
.v-sarasas li { display: flex; align-items: flex-start; gap: .55rem; font-size: .92rem; color: var(--v-tekstas); }
.v-sarasas .v-ikona { width: 17px; height: 17px; color: var(--v-ok); stroke-width: 2.4; margin-top: .25rem; }

/* ---------- Pokytis: buvo -> bus ---------- */

.v-pokytis { display: grid; gap: .75rem; }
.v-pokytis-eil {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem;
  background: #fff; border: 1px solid var(--v-remas); border-radius: var(--v-r); padding: 1rem 1.25rem;
}
.v-pokytis-buvo, .v-pokytis-bus { display: flex; align-items: flex-start; gap: .6rem; font-size: .94rem; }
.v-pokytis-buvo { color: var(--v-pilka); }
.v-pokytis-buvo .v-ikona { color: #b91c1c; width: 18px; height: 18px; margin-top: .2rem; }
.v-pokytis-bus { font-weight: 550; }
.v-pokytis-bus .v-ikona { color: var(--v-ok); width: 18px; height: 18px; stroke-width: 2.4; margin-top: .2rem; }
.v-pokytis-rodykle { color: #c3cddc; }

/* ---------- Personos ---------- */

.v-persona {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--v-remas); border-radius: var(--v-r);
  padding: 1.6rem; box-shadow: var(--v-seselis);
}
.v-persona .v-nuoroda { margin-top: auto; padding-top: 1.25rem; }
.v-persona-ikona {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 14px; margin-bottom: 1rem;
  background: linear-gradient(140deg, var(--v-melyna), #3b82f6); color: #fff;
}

/* ---------- Žingsniai ---------- */

.v-zingsniai {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem;
  counter-reset: v-z;
}
.v-zingsnis {
  position: relative;
  background: #fff; border: 1px solid var(--v-remas); border-radius: var(--v-r); padding: 1.6rem;
}
.v-zingsnio-nr {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%; margin-bottom: .9rem;
  background: var(--v-tamsi); color: #fff; font-weight: 700; font-size: 1rem;
}

/* ---------- Sauga ---------- */

.v-sauga-in {
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 1rem + 3vw, 3.5rem); align-items: start;
}
.v-sauga-tekstas { position: relative; }
.v-sauga-zenklas {
  display: inline-flex; align-items: center; justify-content: center;
  width: 76px; height: 76px; border-radius: 22px; margin-top: 1.5rem;
  background: var(--v-tamsi); color: #7fa8ff;
}
.v-sauga-zenklas .v-ikona { width: 38px; height: 38px; stroke-width: 1.4; }

.v-sauga-sarasas { display: grid; gap: 1rem; }
.v-sauga-eil {
  display: flex; gap: 1rem; align-items: flex-start;
  background: #fff; border: 1px solid var(--v-remas); border-radius: var(--v-r); padding: 1.2rem;
}
.v-sauga-ikona {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 11px; flex: none;
  background: var(--v-melyna-sf); color: var(--v-melyna);
}

/* ---------- Moduliai (galimybių puslapis) ---------- */

.v-moduliai { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.v-modulis {
  background: #fff; border: 1px solid var(--v-remas); border-radius: var(--v-r); padding: 1.75rem;
  box-shadow: var(--v-seselis); scroll-margin-top: 90px;
}
.v-modulio-antraste { display: flex; align-items: center; gap: .9rem; margin-bottom: .75rem; }
.v-modulio-antraste .v-kort-ikona { margin-bottom: 0; }
.v-modulio-antraste .v-h2 { margin: 0; }

/* ---------- Planai ---------- */

/* `stretch`, o ne `start`: vienodo aukščio kortelės reiškia, kad mygtukai
   stovi vienoje linijoje ir planus galima lyginti akimis, o ne skaitant. */
.v-planai {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem; align-items: stretch;
}
.v-planas {
  position: relative; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--v-remas); border-radius: var(--v-r);
  padding: 1.75rem; box-shadow: var(--v-seselis);
}
.v-planas .v-btn { margin-top: auto; }
.v-planas .v-sarasas + .v-btn,
.v-planas .v-planas-kaina + .v-btn { margin-top: 1.5rem; }
.v-planas-top {
  border-color: var(--v-melyna); box-shadow: var(--v-seselis-2);
}
.v-planas-zyme {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--v-melyna); color: #fff; white-space: nowrap;
  padding: .25rem .75rem; border-radius: 999px; font-size: .74rem; font-weight: 650;
}
.v-planas-h { font-size: 1.2rem; margin: 0 0 .35rem; font-weight: 700; }
.v-planas-p { color: var(--v-pilka); font-size: .92rem; margin: 0 0 1.1rem; }
.v-planas-kaina { display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; }
.v-planas-kaina strong { font-size: 2.1rem; letter-spacing: -.03em; line-height: 1; }
.v-planas-kaina span { color: var(--v-pilka); font-size: .88rem; }
.v-planas-susitarus { font-size: 1.3rem !important; }

/* ---------- D.U.K. ---------- */

.v-duk { display: grid; gap: .6rem; }
.v-duk-eil {
  background: #fff; border: 1px solid var(--v-remas); border-radius: var(--v-r);
  overflow: hidden;
}
.v-duk-eil[open] { border-color: #cfdae9; box-shadow: var(--v-seselis); }
.v-duk-k {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.35rem; cursor: pointer;
  font-weight: 600; list-style: none;
}
.v-duk-k::-webkit-details-marker { display: none; }
.v-duk-k:hover { background: var(--v-fonas-2); }
.v-duk-zenklas {
  position: relative; width: 16px; height: 16px; flex: none;
}
.v-duk-zenklas::before, .v-duk-zenklas::after {
  content: ""; position: absolute; background: var(--v-melyna); border-radius: 2px;
  transition: transform .15s, opacity .15s;
}
.v-duk-zenklas::before { top: 7px; left: 0; width: 16px; height: 2px; }
.v-duk-zenklas::after  { left: 7px; top: 0; width: 2px; height: 16px; }
.v-duk-eil[open] .v-duk-zenklas::after { transform: scaleY(0); opacity: 0; }
.v-duk-a { padding: 0 1.35rem 1.25rem; color: var(--v-pilka); }

.v-pagalba {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1.25rem; margin-top: 2.5rem;
  background: var(--v-melyna-sf); border: 1px solid #d5e2ff;
  border-radius: var(--v-r); padding: 1.5rem 1.75rem;
}
.v-pagalba .v-h2 { margin-bottom: .25rem; }

/* ---------- Kontaktai ---------- */

.v-kont {
  display: flex; flex-direction: column; align-items: flex-start;
  background: #fff; border: 1px solid var(--v-remas); border-radius: var(--v-r);
  padding: 1.6rem; box-shadow: var(--v-seselis); color: inherit; text-decoration: none;
  transition: transform .16s, box-shadow .16s, border-color .16s;
}
a.v-kont:hover { transform: translateY(-2px); box-shadow: var(--v-seselis-2); border-color: #cfdae9; text-decoration: none; }
.v-kont-v { font-size: 1.2rem; letter-spacing: -.01em; margin: .1rem 0 .35rem; }
.v-kont-statinis .v-btn { margin-top: 1rem; }

.v-rekvizitai {
  margin-top: 2rem; background: var(--v-fonas-2);
  border: 1px solid var(--v-remas); border-radius: var(--v-r); padding: 1.75rem;
}
.v-rekv-sarasas { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2rem; }
.v-rekv-sarasas > div { margin: 0; }
.v-rekv-sarasas dt { font-size: .8rem; color: var(--v-pilka); }
.v-rekv-sarasas dd { margin: .1rem 0 0; font-weight: 600; }

/* ---------- Baigiamoji juosta ---------- */

.v-cta {
  background:
    radial-gradient(680px 320px at 15% 0%, #1e3a8a 0%, rgba(30,58,138,0) 70%),
    var(--v-tamsi);
  color: #fff;
  padding: clamp(2.5rem, 1.5rem + 3vw, 4rem) 0;
}
.v-cta-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap;
}
.v-cta-h { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); margin: 0 0 .4rem; letter-spacing: -.02em; }
.v-cta-p { margin: 0; color: #b9c7dd; max-width: 46ch; }
.v-cta-mygtukai { display: flex; gap: .75rem; flex-wrap: wrap; }
.v-cta .v-btn-remas { background: transparent; color: #fff; border-color: rgba(255,255,255,.28); }
.v-cta .v-btn-remas:hover { background: rgba(255,255,255,.09); color: #fff; }

/* ---------- Poraštė ---------- */

.v-footer { background: var(--v-tamsi); color: #a9b8ce; padding: 3rem 0 1.5rem; }
.v-footer-tinklas {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 2rem; padding-bottom: 2rem;
}
.v-footer-tekstas { margin: 1rem 0 0; font-size: .9rem; max-width: 38ch; color: #8ea1bb; }
.v-footer-h { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: #e6edf7; margin: 0 0 .85rem; }
.v-footer-stulpelis { display: flex; flex-direction: column; gap: .5rem; }
.v-footer-stulpelis a { color: #a9b8ce; font-size: .92rem; text-decoration: none; }
.v-footer-stulpelis a:hover { color: #fff; text-decoration: underline; }
.v-footer-smulkiai { font-size: .82rem; color: #7e91ab; }

.v-footer-apacia {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  border-top: 1px solid rgba(255,255,255,.1); padding-top: 1.25rem;
  font-size: .84rem; color: #8ea1bb;
}
.v-footer-teises { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.v-footer-teises a { color: #8ea1bb; }
.v-footer-teises a:hover { color: #fff; }

/* ==========================================================================
   SIAURI EKRANAI
   ==========================================================================
   Telefonas nėra „mažesnė versija“ - jame pardavimo puslapį skaito daugiau
   žmonių nei kompiuteryje. Todėl keičiasi ne tik stulpelių skaičius, bet ir
   tvarka: sistemos vaizdas nusileidžia PO teksto, nes pirmiausia reikia
   perskaityti, kas tai yra.                                                  */

@media (max-width: 980px) {
  .v-hero-in    { grid-template-columns: 1fr; }
  .v-hero-vaizdas { order: 2; }
  .v-langas     { transform: none; }
  .v-tinklas-4  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v-moduliai   { grid-template-columns: 1fr; }
  .v-sauga-in   { grid-template-columns: 1fr; }
  .v-planai     { grid-template-columns: 1fr; }
  .v-planas-top { order: -1; }
  .v-zingsniai  { grid-template-columns: 1fr; }
  .v-tinklas-3  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  /* Meniu suskleidžiamas: matomas tik pažymėjus langelį. */
  .v-meniu-mygtukas { display: flex; }

  .v-nav { display: none; }
  .v-meniu-jungiklis:checked ~ .v-nav { display: flex; }

  .v-nav {
    position: absolute; right: 0; top: calc(100% + 18px);
    flex-direction: column; align-items: stretch;
    min-width: 240px; padding: .6rem;
    background: #fff; border: 1px solid var(--v-remas);
    border-radius: var(--v-r); box-shadow: var(--v-seselis-2);
  }
  .v-nav-l { padding: .65rem .8rem; }
  .v-kalbos { margin: .4rem 0 .2rem; align-self: flex-start; }
  .v-top-veiksmai {
    flex-direction: column; align-items: stretch; margin: .4rem 0 0;
    padding-top: .6rem; border-top: 1px solid var(--v-remas);
  }
}

@media (max-width: 720px) {
  .v-faktai-in  { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1rem; }
  .v-tinklas-2,
  .v-tinklas-3,
  .v-tinklas-4  { grid-template-columns: 1fr; }
  .v-rodikliai  { grid-template-columns: 1fr 1fr; }
  .v-rekv-sarasas { grid-template-columns: 1fr; }
  .v-cta-in     { flex-direction: column; align-items: flex-start; }
  .v-cta-mygtukai .v-btn { flex: 1; }
  .v-footer-tinklas { grid-template-columns: 1fr 1fr; gap: 1.75rem; }
  .v-footer-apie { grid-column: 1 / -1; }

  /* „Buvo -> bus“ vienas po kito: trys stulpeliai telefone nebeskaitomi. */
  .v-pokytis-eil { grid-template-columns: 1fr; gap: .5rem; }
  .v-pokytis-rodykle { transform: rotate(90deg); justify-self: start; }

  .v-mygtukai .v-btn { flex: 1 1 auto; }
}

@media (max-width: 460px) {
  .v-wrap { padding: 0 18px; }
  .v-footer-tinklas { grid-template-columns: 1fr; }
}

/* Judesio mažinimas - sisteminis nustatymas, kurio reikia ne dėl grožio. */
@media (prefers-reduced-motion: reduce) {
  .v-btn, .v-kort, .v-kont, .v-nuoroda .v-ikona, .v-duk-zenklas::before, .v-duk-zenklas::after {
    transition: none !important;
  }
  .v-btn:hover, .v-kort:hover, a.v-kont:hover { transform: none; }
}

/* Spausdinant pardavimo puslapį (pasitaiko - valdybai) nereikia nei meniu,
   nei tamsių juostų. */
@media print {
  .v-top, .v-cta, .v-footer, .v-skip { display: none !important; }
  .v-hero, .v-virsus, .v-sekcija-pilka { background: none !important; }
  .v-kort, .v-persona, .v-modulis, .v-planas { box-shadow: none !important; break-inside: avoid; }
}

/* ============================================ pranešimų skambutis juostoje

   Dėžutė pasiekiama iš kiekvieno kanalo, todėl ženklas gyvena viršutinėje
   juostoje, o ne šoniniame meniu: šoninis meniu kiekviename kanale kitoks.

   Taškiukas vietoj skaičiaus: viršuje svarbu ne kiek, o ar yra. */
.dezute {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 9px;
  color: var(--c-muted); text-decoration: none;
}
.dezute:hover { background: var(--c-bg); color: var(--c-text); }
.dezute.yra { color: var(--c-text); }
.dezute-taskas {
  position: absolute; top: 6px; right: 6px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-danger);
  box-shadow: 0 0 0 2px var(--c-surface);
}

/* ====================================== sisteminio administratoriaus juosta

   Rodoma, kai platformos savininkas dirba bendrijoje, kuriai nėra priskirtas.
   Per visą lango plotį ir virš turinio, o ne ženkliukas kampe: tai vienintelis
   dalykas, kurį reikia matyti kiekviename ekrane. */
.sistemine-juosta {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: var(--c-warn-sf); color: var(--c-warn);
  border-bottom: 1px solid var(--c-border);
  padding: .6rem 1.75rem; font-size: .88rem;
}
.sistemine-juosta strong { color: inherit; }