/* ==========================================================================
   Įmonių duomenų valdymo sistema – dizaino sistema
   ========================================================================== */

:root {
  /* --- Paviršiai --- */
  --fonas:        #f5f6f8;
  --pavirsius:    #ffffff;
  --pavirsius-2:  #fafbfc;
  --pavirsius-3:  #f2f4f7;

  /* --- Linijos --- */
  --linija:       #e4e7ec;
  --linija-rysk:  #d0d5dd;

  /* --- Tekstas --- */
  --tekstas:      #101828;
  --tekstas-2:    #475467;
  --tekstas-3:    #98a2b3;

  /* --- Firminė spalva --- */
  --pagr:         #2f5aa8;
  --pagr-tamsi:   #244780;
  --pagr-sviesi:  #eaf0fa;

  /* --- Būsenų spalvos --- */
  --gerai:        #067647;
  --gerai-fonas:  #ecfdf3;
  --ispejimas:    #b54708;
  --ispej-fonas:  #fffaeb;
  --pavojus:      #b42318;
  --pavoj-fonas:  #fef3f2;
  --info:         #175cd3;
  --info-fonas:   #eff8ff;

  /* --- Tarpai --- */
  --t1: 4px;  --t2: 8px;  --t3: 12px;
  --t4: 16px; --t5: 24px; --t6: 32px;

  /* --- Apvalinimas --- */
  --r1: 6px; --r2: 8px; --r3: 12px; --r4: 16px;

  /* --- Šešėliai --- */
  --sesel-1: 0 1px 2px rgba(16, 24, 40, .05);
  --sesel-2: 0 1px 3px rgba(16, 24, 40, .1), 0 1px 2px rgba(16, 24, 40, .06);
  --sesel-3: 0 4px 8px -2px rgba(16, 24, 40, .1), 0 2px 4px -2px rgba(16, 24, 40, .06);
  --sesel-4: 0 20px 24px -4px rgba(16, 24, 40, .08), 0 8px 8px -4px rgba(16, 24, 40, .03);

  /* --- Išdėstymas --- */
  --meniu-plotis: 244px;
  --virsus-aukstis: 56px;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  background: var(--fonas);
  color: var(--tekstas);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: 22px; }
h2 { font-size: 18px; }
h3 { font-size: 15px; }
h4 { font-size: 13px; }

a { color: var(--pagr); }

/* ==========================================================================
   IŠDĖSTYMAS
   ========================================================================== */

.programa {
  display: grid;
  grid-template-columns: var(--meniu-plotis) 1fr;
  /* Vidurinė eilutė – priežiūros juostai. Kai jos nėra, elementas paslėptas
     ir `auto` eilutė lieka nulinio aukščio. */
  grid-template-rows: var(--virsus-aukstis) auto 1fr;
  grid-template-areas: "meniu virsus" "meniu juosta" "meniu turinys";
  height: 100vh;
}

/* --- Viršutinė juosta --- */
.virsus {
  grid-area: virsus;
  background: var(--pavirsius);
  border-bottom: 1px solid var(--linija);
  display: flex;
  align-items: center;
  gap: var(--t3);
  padding: 0 var(--t5);
  z-index: 20;
}
.virsus .antraste { font-size: 15px; font-weight: 600; }
.virsus .poantraste { font-size: 12px; color: var(--tekstas-3); }
.virsus .desine { margin-left: auto; display: flex; align-items: center; gap: var(--t2); }

/* --- Šoninis meniu --- */
.meniu {
  grid-area: meniu;
  background: var(--pavirsius);
  border-right: 1px solid var(--linija);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 30;
}

.meniu-logo {
  height: var(--virsus-aukstis);
  display: flex;
  align-items: center;
  gap: var(--t2);
  padding: 0 var(--t4);
  border-bottom: 1px solid var(--linija);
  flex-shrink: 0;
}
.meniu-logo .zenklas {
  width: 30px; height: 30px;
  border-radius: var(--r2);
  background: linear-gradient(135deg, var(--pagr), var(--pagr-tamsi));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px;
  flex-shrink: 0;
}
.meniu-logo .vardas { font-weight: 600; font-size: 13.5px; line-height: 1.2; }
.meniu-logo .tipas { font-size: 11px; color: var(--tekstas-3); }

.meniu-sarasas { flex: 1; overflow-y: auto; padding: var(--t3) var(--t2); }

.meniu-grupe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--tekstas-3);
  padding: var(--t3) var(--t3) var(--t1);
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
}
.meniu-grupe:hover { color: var(--tekstas-2); }
.meniu-grupe .rodykle { font-size: 10px; transition: transform .15s; }
.meniu-grupe.uzdaryta .rodykle { transform: rotate(-90deg); }
.meniu-grupe-turinys[hidden] { display: none; }
/* Meniu numeracija: grupė „2.", punktas „2.3" */
.meniu-punktas .meniu-nr { font-size: 10.5px; color: var(--tekstas-3); min-width: 24px; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.meniu-grupe.meniu-grupe-fiks { cursor: default; }
.meniu-grupe.meniu-grupe-fiks[hidden] { display: none; }
/* paslėpti meniu punktai (pagal teises) – .meniu-punktas display:flex kitaip nustelbia [hidden] */
.meniu-punktas[hidden] { display: none !important; }
.meniu-punktas.netrukus { opacity: .55; cursor: default; }
.meniu-punktas.netrukus:hover { background: none; color: var(--tekstas-2); }
.meniu-punktas .netrukus-zyme {
  margin-left: auto;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--tekstas-3);
  border: 1px solid var(--ribos);
  border-radius: 99px;
  padding: 1px 6px;
}

.meniu-punktas {
  display: flex;
  align-items: center;
  gap: var(--t3);
  padding: 8px var(--t3);
  border-radius: var(--r2);
  color: var(--tekstas-2);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
  margin-bottom: 2px;
}
.meniu-punktas:hover { background: var(--pavirsius-3); color: var(--tekstas); }
.meniu-punktas.aktyvus { background: var(--pagr-sviesi); color: var(--pagr); font-weight: 600; }
.meniu-punktas .ikona { width: 18px; text-align: center; flex-shrink: 0; font-size: 15px; }
.meniu-punktas .skaitiklis {
  margin-left: auto;
  background: var(--pavojus);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 5px;
}
.meniu-punktas.aktyvus .skaitiklis { background: var(--pagr); }

.meniu-apacia { border-top: 1px solid var(--linija); padding: var(--t3) var(--t2); flex-shrink: 0; }

/* --- Turinio sritis --- */
.turinys {
  grid-area: turinys;
  overflow-y: auto;
  padding: var(--t5);
}
.turinys.be-tarpu { padding: 0; }

.puslapio-galva {
  display: flex;
  align-items: flex-start;
  gap: var(--t4);
  margin-bottom: var(--t5);
  flex-wrap: wrap;
}
.puslapio-galva .aprasas { font-size: 13px; color: var(--tekstas-2); margin-top: 2px; }
.puslapio-galva .veiksmai { margin-left: auto; display: flex; gap: var(--t2); flex-wrap: wrap; }

/* Mobili versija */
@media (max-width: 900px) {
  .programa {
    grid-template-columns: 1fr;
    grid-template-areas: "virsus" "juosta" "turinys";
  }
  .meniu {
    position: fixed; left: 0; top: 0; bottom: 0;
    width: var(--meniu-plotis);
    transform: translateX(-100%);
    transition: transform .2s ease;
    box-shadow: var(--sesel-4);
  }
  .meniu.atidarytas { transform: translateX(0); }
  .meniu-jungiklis { display: flex !important; }
  .turinys { padding: var(--t4); }
}
.meniu-jungiklis { display: none; }

/* ==========================================================================
   TELEFONAI (<= 640 px)
   ==========================================================================
   Iki šiol žemiausias lūžio taškas buvo 700 px ir keitė keturias eilutes –
   telefonams sistema nebuvo pritaikyta visai. Čia surinkta tai, ką galima
   sutvarkyti bendrai, nekeičiant kiekvieno ekrano atskirai.
   ========================================================================== */

@media (max-width: 640px) {

  /* 1. iOS priartinimas įvedant.
     Safari priartina puslapį, kai fokusuojamo lauko šriftas mažesnis nei
     16 px. Sistemoje numatytasis buvo 13,5 px, tad priartindavo KIEKVIENAS
     laukas – įskaitant lentelių langelius. Priartinus puslapis lieka
     pastumtas, ir kitą lauką reikia gaudyti. */
  input, select, textarea,
  table.lentele.du input[type="number"],
  .tab-langelis, .du-pastaba { font-size: 16px; }

  /* 2. Viršutinė juosta neišstumia puslapio.
     Ji neturėjo nei `flex-wrap`, nei plotio ribos, o vaikai (rolių jungiklis,
     įmonės žymė, naudotojo vardas) kartu užima ~450 px. Rezultatas – visas
     dokumentas slenka horizontaliai. */
  body, .programa { overflow-x: hidden; }
  .virsus { padding: 0 var(--t3); gap: var(--t2); }
  .virsus .poantraste { display: none; }
  .imones-zyme { max-width: 120px; }
  /* Rolių jungiklyje palieka tik ikonas – tekstas užima ~260 px. */
  .rolės-jungiklis button span.tekstas { display: none; }
  .naudotojo-mygt .vardas, .naudotojo-mygt .role { display: none; }

  /* 3. Kortelės ir lentelės neišsikiša už ekrano.
     Dauguma lentelių neturi `overflow-x` rėmo, o `th { white-space: nowrap }`
     verčia jas platesnes nei 100 %. Slinkimas paliekamas KORTELĖS viduje –
     taip slenka lentelė, o ne visas puslapis. */
  .kortele > .kunas { padding: var(--t4); }
  .kortele > .kunas.glaudus,
  .kortele > .kunas > .lentele-remas { overflow-x: auto; }
  .kortele > .kunas > table.lentele { display: block; overflow-x: auto; }
  .lentele-remas { max-height: none; min-height: 0; }

  /* 4. Modalas: 96 px apdailos ant 360 px ekrano paliko 264 px turiniui. */
  .uzdanga { padding: var(--t2); align-items: flex-end; }
  .modalas { max-height: 94vh; border-radius: var(--r4) var(--r4) 0 0; }
  .modalas > .galva { padding: var(--t3) var(--t4); }
  .modalas > .kunas { padding: var(--t4); }
  .modalas > .apacia { padding: var(--t3) var(--t4); }
  .modalas > .apacia .mygt { flex: 1; }

  /* 5. Formos vienu stulpeliu.
     Daugiastulpeliai tinkleliai rašomi INLINE stiliais, kurių medijos
     užklausa nepasiekia, todėl reikia `!important`. Be to keturi stulpeliai
     modale duoda ~37 px įvedimo plotį. */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  /* 6. Lietimo taikiniai.
     Rekomenduojama riba – 44 px; `.mygt.mazas` buvo ~30 px. */
  .mygt { padding: 11px 16px; }
  .mygt.mazas { padding: 9px 12px; font-size: 13px; }
  .mygt.ikonos { padding: 10px 12px; }
  .skirtukas { padding: 12px 16px; }
  .meniu-punktas { padding: 12px var(--t3); }
  .varnele { padding: 10px 0; }

  /* 7. Įrankių juostos laužiasi, o ne stumia turinį. */
  .galva, .galvute, .veiksmai, .masiniai-veiksmai .veiksmai { flex-wrap: wrap; }
  .lipni-juosta { flex-wrap: wrap; }
  .lipni-juosta .mygt { flex: 1; }

  /* 8. Dokumento lapas. Fiksuotas 132 px vidinis paraštės plotis ant 360 px
     ekrano palikdavo ~196 px teksto – apie 20 ženklų eilutėje. */
  .sheet { padding: 24px 18px 32px 22px; font-size: 11pt; }
  .sheet .sig2 { grid-template-columns: 1fr; row-gap: 18px; }
  .sheet .sig2 .sline .sigimg { max-width: 100%; }
}

/* Sistemos priežiūros juosta.
   Įmonė turi matyti, kad jos duomenyse dirba prižiūrėtojas – ir kodėl.
   Todėl juosta ryški ir nepraslystanti, kaip ir aktyvios įmonės žymė. */
.prieziuros-juosta {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 24px;
  background: #fff4e5;
  border-bottom: 2px solid var(--ispejimas);
  color: #7a3e00;
  font-size: 13px;
}
.prieziuros-juosta .ikona { font-size: 18px; line-height: 1.2; }
.prieziuros-juosta .mazas { font-size: 12px; opacity: .9; margin-top: 2px; }
.prieziuros-juosta .mygt { margin-left: auto; flex-shrink: 0; }
#prieziurosJuosta { grid-area: juosta; }

/* Meniu uždangalas telefone: be jo pameniu užima 68 % ekrano ir
   užsidaro tik nuėjus į kitą skiltį. */
.meniu-uzdangalas {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(16, 24, 40, .4);
  z-index: 29;
}
@media (max-width: 900px) {
  .meniu.atidarytas ~ .meniu-uzdangalas { display: block; }
}
/* `hidden` visada laimi: uždangalą valdo ir JS (kad veiktų paspaudimas),
   ir CSS – be šios eilutės jos viena kitai prieštarautų. */
.meniu-uzdangalas[hidden] { display: none; }

/* ==========================================================================
   MYGTUKAI
   ========================================================================== */

.mygt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid transparent;
  border-radius: var(--r2);
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s;
  background: var(--pagr);
  color: #fff;
  box-shadow: var(--sesel-1);
}
.mygt:hover:not(:disabled) { background: var(--pagr-tamsi); }
.mygt:disabled { opacity: .5; cursor: not-allowed; }
.mygt:focus-visible { outline: 2px solid var(--pagr); outline-offset: 2px; }

.mygt.antrinis {
  background: var(--pavirsius);
  color: var(--tekstas-2);
  border-color: var(--linija-rysk);
}
.mygt.antrinis:hover:not(:disabled) { background: var(--pavirsius-3); color: var(--tekstas); }

.mygt.pavojus { background: var(--pavojus); }
.mygt.pavojus:hover:not(:disabled) { background: #912018; }

.mygt.tylus { background: none; color: var(--tekstas-2); box-shadow: none; }
.mygt.tylus:hover:not(:disabled) { background: var(--pavirsius-3); color: var(--tekstas); }

.mygt.mazas { padding: 5px 10px; font-size: 12px; }
.mygt.ikonos { padding: 7px 9px; }

/* ==========================================================================
   FORMOS
   ========================================================================== */

.laukas { display: block; margin-bottom: var(--t4); }
.laukas > .zyme {
  display: block;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--tekstas-2);
  margin-bottom: 5px;
}
.laukas > .uzuomina { font-size: 11.5px; color: var(--tekstas-3); margin-top: 5px; }

input, select, textarea {
  width: 100%;
  padding: 8px 11px;
  border: 1px solid var(--linija-rysk);
  border-radius: var(--r2);
  font-size: 13.5px;
  font-family: inherit;
  background: var(--pavirsius);
  color: var(--tekstas);
  box-shadow: var(--sesel-1);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--pagr);
  box-shadow: 0 0 0 3px var(--pagr-sviesi);
}
input:disabled, select:disabled, textarea:disabled {
  background: var(--pavirsius-3);
  color: var(--tekstas-3);
  cursor: not-allowed;
}
textarea { min-height: 90px; resize: vertical; line-height: 1.5; }

select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 15px;
  padding-right: 32px;
}

/* Mėnesio pasirinkimas: strėlytės visada, o kur naršyklė nepalaiko
   `input[type=month]` (Firefox) – du sąrašai vietoj įvedimo langelio. */
.menuo-remas { display: flex; align-items: stretch; gap: 6px; flex-wrap: wrap; }
.menuo-remas input[type="month"] { flex: 1; min-width: 0; }
.menuo-remas select.menuo-men { flex: 1.4; min-width: 96px; }
.menuo-remas select.menuo-metai { flex: 1; min-width: 82px; }
.menuo-remas .menuo-strele {
  padding: 0 10px;
  line-height: 1;
  font-size: 17px;
  flex: 0 0 auto;
}

.laukai-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--t4); }
.laukai-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 var(--t3); }
@media (max-width: 700px) { .laukai-2, .laukai-3 { grid-template-columns: 1fr; } }

/* Responsyvus laukų tinklelis: pats susidėlioja į mažiau stulpelių (ar žemyn),
   kai lango plotis mažas – 14" nešiojamam, telefonui. Prisitaiko ir prie laukų
   skaičiaus (2/3/4 laukai vienoje eilutėje). */
.lauku-tinklelis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}

.varnele {
  display: flex;
  align-items: flex-start;
  gap: var(--t2);
  font-size: 13.5px;
  cursor: pointer;
  padding: 6px 0;
}
.varnele input[type="checkbox"] {
  width: 16px; height: 16px;
  margin: 2px 0 0;
  flex-shrink: 0;
  accent-color: var(--pagr);
  box-shadow: none;
  cursor: pointer;
}

/* ==========================================================================
   KORTELĖS
   ========================================================================== */

.kortele {
  background: var(--pavirsius);
  border: 1px solid var(--linija);
  border-radius: var(--r3);
  box-shadow: var(--sesel-1);
  overflow: hidden;
}
.kortele > .galva {
  padding: var(--t4) var(--t5);
  border-bottom: 1px solid var(--linija);
  display: flex;
  align-items: center;
  gap: var(--t3);
  flex-wrap: wrap;
}
.kortele > .galva .veiksmai {
  margin-left: auto; display: flex; gap: var(--t2);
  /* Be laužymo penki mygtukai sudaro nedalomą ~450 px eilutę ir išstumia
     kortelę už ekrano ribų. */
  flex-wrap: wrap;
}
.kortele > .kunas { padding: var(--t5); }
.kortele > .kunas.glaudus { padding: 0; }

.korteliu-tinklas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--t4);
  margin-bottom: var(--t5);
}

/* Statistikos kortelė */
.stat {
  background: var(--pavirsius);
  border: 1px solid var(--linija);
  border-radius: var(--r3);
  padding: var(--t4) var(--t5);
  box-shadow: var(--sesel-1);
}
.stat .pav {
  font-size: 12.5px;
  color: var(--tekstas-2);
  font-weight: 500;
  display: flex; align-items: center; gap: 6px;
}
.stat .reiksme { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; margin-top: var(--t2); }
.stat .papildoma { font-size: 12px; color: var(--tekstas-3); margin-top: 2px; }
.stat.svarbu { border-color: #fec84b; background: var(--ispej-fonas); }
.stat.svarbu .reiksme { color: var(--ispejimas); }

/* ==========================================================================
   LENTELĖS
   ========================================================================== */

/* Lentelės rėmas.
 *
 * Aukštis ribojamas, kad slenkant SĄRAŠĄ antraštė liktų vietoje, o po ja
 * nedingtų, kuris stulpelis ką reiškia. Trumpoms lentelėms tai nieko
 * nekeičia – slankiklis atsiranda tik tada, kai eilučių iš tikrųjų daug.
 *
 * 300 px – vieta meniu juostai, skilties antraštei ir kortelės galvai. */
/* `min-height` būtinas: telefone gulsčiai 100vh ≈ 400 px, tad be jo
   `calc(100vh - 300px)` palieka ~100 px – dvi eilutes su prilipdyta antrašte. */
.lentele-remas { overflow: auto; max-height: calc(100vh - 300px); min-height: 200px; }
/* Kur lentelė yra ne pagrindinis turinys (modaluose, siaurose kortelėse),
   aukščio riboti nereikia. */
.lentele-remas.laisvas { max-height: none; overflow-x: auto; overflow-y: visible; }

table.lentele { width: 100%; border-collapse: collapse; font-size: 13px; }
table.lentele thead th { position: sticky; top: 0; z-index: 3; }
table.lentele th {
  text-align: left;
  padding: 7px var(--t3);
  background: var(--pavirsius-2);
  color: var(--tekstas-2);
  font-size: 12px;
  font-weight: 600;
  border-bottom: 1px solid var(--linija);
  white-space: nowrap;
}
table.lentele td {
  padding: 7px var(--t3);
  border-bottom: 1px solid var(--linija);
  vertical-align: middle;
}
table.lentele tbody tr:last-child td { border-bottom: none; }

/* Darbo užmokesčio kortelė – daug stulpelių. Antraštės laužomos į kelias
   eilutes (siauresni stulpeliai), o skaičiai lieka vienoje eilutėje ir
   lygiuojami. Taip 14" ekrane matosi daugiau stulpelių ir telpa spaudinant. */
/* Kompaktiška: stulpelio plotis – pagal SKAIČIŲ arba antraštę (laužomą į 2–3
   eilutes ties tarpais), o NE per visą lapo plotį. `width:auto` + auto išdėstymas,
   antraštės laužiasi; siauras stulpelis lieka siauras. Netelpant – slenkama
   (`.kortele-spauda { overflow-x:auto }`). */
/* `width: min-content` – kiekvienas stulpelis susitraukia iki plačiausio žodžio,
   todėl DVIEJŲ žodžių antraštės („GPM mokestis") laužomos į dvi eilutes ir
   stulpelis tampa siauras (kaip apatinėje lentelėje su daugiau stulpelių). */
.kortele-lentele { table-layout: auto; width: min-content; }
/* Aukštesnis specifiškumas nei `table.lentele th` (kuris turi white-space:nowrap),
   kad antraštės iš tikrųjų laužtųsi į kelias eilutes. */
table.lentele.kortele-lentele th {
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
  vertical-align: bottom;
  text-align: center;
  padding: 3px 5px;
  font-size: 11px;
  line-height: 1.15;
}
/* „Mėnuo" stulpelis siauras – jame tik numeris arba „Iš viso". */
.kortele-lentele th:first-child,
.kortele-lentele td:first-child { width: 3.4em; }
/* Kiekvienas stulpelis atskiriamas: gretimi duomenų stulpeliai – kas antras
   su lengvu atspalviu (ir ekrane, ir spausdinant). */
.kortele-lentele tbody td:nth-child(even),
.kortele-lentele tfoot td:nth-child(even) { background: rgba(31, 111, 235, 0.06); }
.kortele-lentele tbody td:nth-child(odd),
.kortele-lentele tfoot td:nth-child(odd) { background: rgba(120, 120, 120, 0.05); }
.kortele-lentele tbody td:first-child,
.kortele-lentele tfoot td:first-child { background: transparent; }
/* Aukštesnis specifiškumas nei `table.lentele td` (padding 7px), kad eilutės
   būtų tik tokio aukščio, kokio reikia skaičiui + ~1 mm tarpelis (2 px). */
table.lentele.kortele-lentele td {
  padding: 2px 6px;
  text-align: center;
  white-space: nowrap;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.kortele-lentele th:first-child,
.kortele-lentele td:first-child { text-align: center; font-weight: 600; }

@media print {
  /* Lapo orientaciją (gulsčiai/stačiai) nustato JS `UI.spausdinti(orient)` –
     laikinu <style> su `@page`. Vardinių `@page` čia nebenaudojame, nes Chrome
     dėl jų įterpdavo tuščią pirmą lapą ir vis tiek spausdindavo stačiai. */
  /* Slinkimo langai spausdinant nebekerpa turinio. */
  .kortele-spauda,
  .du-remas,
  .lentele-remas { overflow: visible !important; max-height: none !important; }
  /* Pastaba: kortelės stulpelių plotį/šriftą spausdinant nustato
     `UI.spausdintiLange` `stiliai` (panele-atlyginimai.js). Anksčiau čia buvę
     `.kortele-lentele{font-size:9px!important}` ir `.kortele-spauda table{width:100%!important}`
     nugalėdavo tuos `stiliai` – todėl stulpeliai likdavo platūs. Pašalinta. */
}
table.lentele tbody tr.spaudziama { cursor: pointer; }
table.lentele tbody tr.spaudziama:hover { background: var(--pavirsius-2); }
table.lentele td .antrinis { font-size: 12px; color: var(--tekstas-3); margin-top: 1px; }
table.lentele .desineje { text-align: right; }
table.lentele .centre { text-align: center; }

/* Kompaktiška lentelė (matricai) */
table.lentele.glaudi th, table.lentele.glaudi td { padding: 7px var(--t3); font-size: 12.5px; }

/* ==========================================================================
   ŽYMĖS IR BŪSENOS
   ========================================================================== */

.zyme {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  padding: 2px 9px;
  border-radius: 20px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.zyme.pilka   { background: var(--pavirsius-3); color: var(--tekstas-2); border-color: var(--linija); }
.zyme.melyna  { background: var(--info-fonas);  color: var(--info);      border-color: #b2ddff; }
.zyme.zalia   { background: var(--gerai-fonas); color: var(--gerai);     border-color: #abefc6; }
.zyme.geltona { background: var(--ispej-fonas); color: var(--ispejimas); border-color: #fedf89; }
.zyme.raudona { background: var(--pavoj-fonas); color: var(--pavojus);   border-color: #fecdca; }

.tasko-zyme { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ==========================================================================
   PRANEŠIMAI
   ========================================================================== */

.zinute {
  border-radius: var(--r2);
  padding: 11px 14px;
  font-size: 13.5px;
  border: 1px solid;
  margin-bottom: var(--t4);
  display: flex;
  gap: var(--t2);
  align-items: flex-start;
}
.zinute .ikona { flex-shrink: 0; }
.zinute.info      { background: var(--info-fonas);  border-color: #b2ddff; color: #175cd3; }
.zinute.gerai     { background: var(--gerai-fonas); border-color: #abefc6; color: #067647; }
.zinute.ispejimas { background: var(--ispej-fonas); border-color: #fedf89; color: #b54708; }
.zinute.klaida    { background: var(--pavoj-fonas); border-color: #fecdca; color: #b42318; }

/* Tuščia būsena */
.tuscia {
  text-align: center;
  padding: var(--t6) var(--t5);
  color: var(--tekstas-3);
}
.tuscia .ikona { font-size: 34px; opacity: .45; margin-bottom: var(--t3); }
.tuscia .pav { font-size: 15px; font-weight: 600; color: var(--tekstas-2); margin-bottom: var(--t1); }
.tuscia .aprasas { font-size: 13px; max-width: 400px; margin: 0 auto var(--t4); }

/* Trumpas pranešimas (toast) */
#pranesimai {
  position: fixed;
  bottom: var(--t5);
  left: 50%;
  transform: translateX(-50%);
  z-index: 900;
  display: flex;
  flex-direction: column;
  gap: var(--t2);
  align-items: center;
  pointer-events: none;
}
.pranesimas {
  background: var(--tekstas);
  color: #fff;
  max-width: calc(100vw - 24px);
  padding: 10px 18px;
  border-radius: var(--r2);
  font-size: 13.5px;
  font-weight: 500;
  box-shadow: var(--sesel-4);
  animation: kilti .18s ease;
}
.pranesimas.klaida { background: var(--pavojus); }
.pranesimas.gerai  { background: var(--gerai); }
@keyframes kilti { from { opacity: 0; transform: translateY(8px); } }

/* ==========================================================================
   MODALAI
   ========================================================================== */

.uzdanga {
  position: fixed;
  inset: 0;
  background: rgba(16, 24, 40, .5);
  backdrop-filter: blur(2px);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--t5);
  animation: rodytis .12s ease;
}
@keyframes rodytis { from { opacity: 0; } }

.modalas {
  background: var(--pavirsius);
  border-radius: var(--r4);
  width: min(760px, 100%);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--sesel-4);
}
.modalas.platus { width: min(1140px, 100%); }
.modalas.siauras { width: min(460px, 100%); }
.modalas > .galva {
  padding: var(--t4) var(--t5);
  border-bottom: 1px solid var(--linija);
  display: flex;
  align-items: center;
  gap: var(--t3);
}
.modalas > .galva h3 { flex: 1; }
.modalas > .kunas { flex: 1; overflow-y: auto; padding: var(--t5); }
.modalas > .apacia {
  padding: var(--t4) var(--t5);
  border-top: 1px solid var(--linija);
  display: flex;
  justify-content: flex-end;
  gap: var(--t2);
  flex-wrap: wrap;
  background: var(--pavirsius-2);
}

/* ==========================================================================
   SKIRTUKAI
   ========================================================================== */

.skirtukai {
  display: flex;
  gap: var(--t1);
  border-bottom: 1px solid var(--linija);
  margin-bottom: var(--t5);
  overflow-x: auto;
}
.skirtukas {
  padding: 9px var(--t4);
  border: none;
  background: none;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--tekstas-2);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-family: inherit;
  white-space: nowrap;
  display: flex; align-items: center; gap: 6px;
}
.skirtukas:hover { color: var(--tekstas); }
.skirtukas.aktyvus { color: var(--pagr); border-bottom-color: var(--pagr); font-weight: 600; }
/* Laukiančių darbų ženkliukas prie skirtuko (pvz. „Išlaidos 4"). */
.skirtuko-zenklas {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; margin-left: 4px;
  background: var(--pavojus); color: #fff;
  font-size: 11px; font-weight: 700; border-radius: 9px;
  vertical-align: middle;
}

/* ==========================================================================
   ROLIŲ PERJUNGIKLIS
   ========================================================================== */

.rolės-jungiklis {
  display: flex;
  background: var(--pavirsius-3);
  border-radius: var(--r2);
  padding: 3px;
  gap: 2px;
}
.rolės-jungiklis button {
  border: none;
  background: none;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--tekstas-2);
  cursor: pointer;
  font-family: inherit;
  display: flex; align-items: center; gap: 5px;
  white-space: nowrap;
}
.rolės-jungiklis button.aktyvus {
  background: var(--pavirsius);
  color: var(--pagr);
  box-shadow: var(--sesel-2);
}

/* Juosta, primenanti apie darbuotojo vaizdą */
.vaizdo-juosta {
  background: var(--ispej-fonas);
  border-bottom: 1px solid #fedf89;
  color: var(--ispejimas);
  padding: 8px var(--t5);
  font-size: 12.5px;
  display: flex;
  align-items: center;
  gap: var(--t2);
  font-weight: 500;
}
.vaizdo-juosta .mygt { margin-left: auto; }

/* ==========================================================================
   NAUDOTOJO MENIU
   ========================================================================== */

.naudotojo-mygt {
  display: flex;
  align-items: center;
  gap: var(--t2);
  border: 1px solid var(--linija);
  background: var(--pavirsius);
  border-radius: var(--r2);
  padding: 4px 10px 4px 4px;
  cursor: pointer;
  font-family: inherit;
}
.naudotojo-mygt:hover { background: var(--pavirsius-3); }
.avataras {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--pagr-sviesi);
  color: var(--pagr);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  flex-shrink: 0;
}
.naudotojo-mygt .vardas { font-size: 13px; font-weight: 500; }
.naudotojo-mygt .role { font-size: 11px; color: var(--tekstas-3); }

.iskleidimas {
  position: absolute;
  top: calc(var(--virsus-aukstis) - 6px);
  right: var(--t5);
  background: var(--pavirsius);
  border: 1px solid var(--linija);
  border-radius: var(--r3);
  box-shadow: var(--sesel-4);
  min-width: 220px;
  padding: var(--t1);
  z-index: 100;
}
.iskleidimas .punktas {
  display: flex;
  align-items: center;
  gap: var(--t2);
  padding: 8px var(--t3);
  border-radius: var(--r1);
  font-size: 13.5px;
  color: var(--tekstas-2);
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
}
.iskleidimas .punktas:hover { background: var(--pavirsius-3); color: var(--tekstas); }
.iskleidimas .skirtukas-linija { height: 1px; background: var(--linija); margin: var(--t1) 0; }
.iskleidimas .galvute { padding: var(--t2) var(--t3); border-bottom: 1px solid var(--linija); margin-bottom: var(--t1); }
.iskleidimas .galvute .v { font-size: 13px; font-weight: 600; }
.iskleidimas .galvute .p { font-size: 11.5px; color: var(--tekstas-3); }

/* ==========================================================================
   PAGALBINĖS KLASĖS
   ========================================================================== */

.kraunama {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--t2);
  padding: var(--t6);
  color: var(--tekstas-3);
  font-size: 13.5px;
}
.suktukas {
  width: 16px; height: 16px;
  border: 2px solid var(--linija-rysk);
  border-top-color: var(--pagr);
  border-radius: 50%;
  animation: suktis .6s linear infinite;
}
@keyframes suktis { to { transform: rotate(360deg); } }

.tekstas-2 { color: var(--tekstas-2); }
.tekstas-3 { color: var(--tekstas-3); }
.mazas { font-size: 12px; }
.pilkas { color: var(--tekstas-3); }
.dešinėn { margin-left: auto; }
.nieko { display: none !important; }

/* ==========================================================================
   PRISIJUNGIMO PUSLAPIS
   ========================================================================== */

.prisijungimo-fonas {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--t5);
  background:
    radial-gradient(1000px 500px at 50% -10%, #e8eefb 0%, transparent 60%),
    var(--fonas);
}
.prisijungimo-kortele {
  background: var(--pavirsius);
  border: 1px solid var(--linija);
  border-radius: var(--r4);
  box-shadow: var(--sesel-4);
  padding: var(--t6);
  max-width: 420px;
  width: 100%;
}
.prisijungimo-kortele .logo {
  width: 46px; height: 46px;
  border-radius: var(--r3);
  background: linear-gradient(135deg, var(--pagr), var(--pagr-tamsi));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  margin-bottom: var(--t4);
}

/* Laukų grupės paryškinimas, kai į ją nušokama greitąja navigacija. */
.kortele.paryskinta {
  outline: 2px solid var(--pagr);
  outline-offset: 2px;
  transition: outline-color .25s ease;
}

/* Varnelių tinklelis – teisių ir dokumentų sąrašams. */
.varneliu-tinklas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 4px 14px;
}

/* Registro lentelė: daug stulpelių, todėl kompaktiškiau ir su slinkimu. */
/* Fiksuotas išdėstymas: lentelė telpa į langą (width:100%), o stulpeliai
   proporcingai siaurėja pagal nustatytą plotį. Tekstas laužomas ŽEMYN (kaip
   pastabose), todėl nereikia plataus horizontalaus slinkimo – aktualu 14"
   ekranui ir telefonui. */
.registro-lentele { font-size: 13px; table-layout: fixed; width: 100%; }
.registro-lentele td, .registro-lentele th {
  padding: 6px 8px;
  vertical-align: top;
  overflow-wrap: anywhere;   /* ilgi žodžiai/kodai laužomi, kad netemptų stulpelio */
}
.registro-lentele tbody tr:hover { background: var(--pagr-sviesi); }

/* Eilutės, kurių datą verta peržiūrėti. */
.registro-lentele tr.abejotina td:first-child { box-shadow: inset 3px 0 0 var(--ispejimas, #d98324); }

/* ---------------------------------------------------------------------------
   Prilipdytos veiksmų juostos
   Ilgose formose išsaugojimo mygtukas nuslinkdavo iš akių, todėl jis lieka
   matomas slenkant. Sticky veikia, nes slenka .turinys, o ne visas langas.
   --------------------------------------------------------------------------- */

/* Viršutinė juosta (darbuotojo redaktoriaus antraštė su „Išsaugoti"). */
.lipni-virsune {
  position: sticky;
  top: calc(var(--t5) * -1);
  z-index: 20;
  background: var(--fonas);
  padding-top: var(--t5);
  margin-top: calc(var(--t5) * -1);
}
.lipni-virsune.slenkama {
  box-shadow: 0 4px 12px rgba(15, 23, 42, .08);
  border-bottom: 1px solid var(--linija);
}

/* Apatinė juosta (įmonės duomenys, nustatymai). */
.lipni-juosta {
  position: sticky;
  bottom: calc(var(--t5) * -1);
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--t2);
  padding: var(--t4) var(--t5);
  margin: var(--t5) calc(var(--t5) * -1) calc(var(--t5) * -1);
  background: var(--pavirsius);
  border-top: 1px solid var(--linija);
  box-shadow: 0 -4px 12px rgba(15, 23, 42, .06);
}
.lipni-juosta .zinute-kaire { margin-right: auto; }

@media (max-width: 700px) {
  .lipni-juosta { flex-wrap: wrap; }
  .lipni-juosta .mygt { flex: 1; justify-content: center; }
}

/* Skirtukai lieka po prilipdyta antrašte. Poslinkis nustatomas iš JS,
   nes antraštės aukštis priklauso nuo vardo ilgio ir ekrano pločio. */
.lipni-skirtukai {
  position: sticky;
  z-index: 19;
  background: var(--fonas);
}

/* Instrukcijų turinys – ateina kaip HTML iš duomenų bazės. */
.instrukcija { font-size: 14px; line-height: 1.55; }
.instrukcija h3 { font-size: 15px; margin: 18px 0 8px; color: var(--pagr); }
.instrukcija h3:first-child { margin-top: 0; }
.instrukcija p { margin: 0 0 10px; }
.instrukcija ul, .instrukcija ol { margin: 0 0 12px; padding-left: 22px; }
.instrukcija li { margin-bottom: 5px; }
.instrukcija code {
  background: var(--pavirsius-2); padding: 1px 5px;
  border-radius: 4px; font-size: 12.5px;
}
.instrukcija kbd {
  background: var(--pavirsius-2); border: 1px solid var(--linija);
  border-bottom-width: 2px; border-radius: 4px;
  padding: 1px 6px; font-size: 12px; font-family: inherit;
}

/* ---------------------------------------------------------------------------
   Aktyvios įmonės žymė viršuje.
   Dirbant su keliomis įmonėmis tai vienintelis nuolat matomas dalykas,
   rodantis, kurios įmonės duomenys tvarkomi. Todėl ryški ir nepraslystanti.
   --------------------------------------------------------------------------- */
.imones-zyme {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  background: var(--pagr-sviesi);
  border: 1px solid var(--pagr);
  border-radius: var(--r3);
  cursor: default;
  font: inherit;
  max-width: 260px;
}
.imones-zyme[data-perjungiama="taip"] { cursor: pointer; }
.imones-zyme[data-perjungiama="taip"]:hover { background: #dde7f7; }

/* Likęs sesijos laikas (iki automatinio atsijungimo). */
.sesijos-laikas {
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--tekstas-3);
  padding: 4px 8px;
  border: 1px solid var(--linija);
  border-radius: var(--r3);
  white-space: nowrap;
}
.sesijos-laikas.sesija-baigiasi {
  color: #fff;
  background: var(--pavojus, #c0392b);
  border-color: var(--pavojus, #c0392b);
  font-weight: 700;
}

.imones-kodas {
  background: var(--pagr); color: #fff;
  padding: 2px 7px; border-radius: var(--r2);
  font-size: 11px; font-weight: 700; letter-spacing: .5px;
}
.imones-vardas {
  font-size: 13px; font-weight: 600; color: var(--pagr-tamsi);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.imones-rodykle { color: var(--pagr); font-size: 11px; }

@media (max-width: 900px) { .imones-vardas { display: none; } }

/* Įspėjimas apie veiksmą tarp įmonių – turi atrodyti rimtai. */
.tarp-imoniu {
  border: 2px solid var(--pavojus, #b42318);
  border-radius: var(--r3);
  padding: 12px 14px;
  background: #fef3f2;
}
.tarp-imoniu b { color: var(--pavojus, #b42318); }

/* Masinių veiksmų juosta registruose. */
.masiniai-veiksmai {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 16px;
  background: var(--pagr-sviesi);
  border-top: 1px solid var(--pagr);
  border-bottom: 1px solid var(--pagr);
}
.masiniai-veiksmai .veiksmai { flex: 1; justify-content: flex-end; }

/* Greita galiojimo varnelė – kad būtų aišku, jog ji keičia duomenis iš karto. */
.galiojimo-varnele { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.galiojimo-varnele input:checked + span { color: var(--sekme, #067647); font-weight: 600; }
.galiojimo-varnele input:not(:checked) + span { color: var(--pilka-tekstas, #667085); }

/* Eilutė, kuriai reikalavimas netaikomas – matoma, bet nebeaktuali. */
tr.prigesinta { opacity: .55; }

/* ==========================================================================
   DARBO UŽMOKESČIO ŽINIARAŠTIS
   ==========================================================================
   Žiniaraštis turi 24 stulpelius (vardas + 11 įvedimo + 12 skaičiuojamų).
   Į 14" nešiojamojo ekraną jie netelpa, o slenkant į šoną dingsta būtent tai,
   ko reikia: kieno eilutė redaguojama ir kaip pasikeitė sumos. Todėl:

     · vardo stulpelis PRIKLIJUOTAS kairėje,
     · trys svarbiausios sumos PRIKLIJUOTOS dešinėje,
     · antraštė ir „Iš viso" eilutė priklijuotos viršuje ir apačioje.

   Numatytai rodomas tik įvedimas ir trys esminės sumos – likusios dešimt
   atskleidžiamos jungikliu. Tada visa lentelė telpa be slinkimo.

   Pločio biudžetas 1366 px ekranui: 1366 − 244 (meniu) − 48 (paraštės)
   ≈ 1072 px. Naudojame 108 + 11×58 + 3×88 ≈ 1010 px.
   ========================================================================== */

table.lentele.du { font-size: 12.5px; }
table.lentele.du th,
table.lentele.du td { padding: 5px 6px; white-space: nowrap; }
/* Antraštes laužome į kelias eilutes (ties tarpais; ilgą žodį – tik jei kitaip
   netelpa), kad stulpeliai susiaurėtų iki `colgroup` pločių, o ne iki ilgiausio
   antraštės žodžio. Duomenų langeliai lieka vienoje eilutėje. */
table.lentele.du thead th {
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
  vertical-align: bottom;
  line-height: 1.12;
}

/* Skaitiniai laukeliai: siauri, be naršyklės rodyklių – jos valgo ~16 px
   kiekviename stulpelyje, o dienas patogiau įrašyti nei prispausdinti. */
table.lentele.du input[type="number"] {
  width: 100%;
  min-width: 0;
  padding: 3px 4px;
  font-size: 12.5px;
  text-align: right;
  -moz-appearance: textfield;
}
table.lentele.du input[type="number"]::-webkit-outer-spin-button,
table.lentele.du input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
/* Rodoma TIK spausdintuve (per UI.spausdintiLange), ne įprastame rodinyje. */
.tik-spausdinti { display: none; }

table.lentele.du col.du-in { width: 58px; }
/* Eurų laukai platesni – suma su centais (pvz. 1 234.56) turi matytis visa. */
table.lentele.du col.du-in-eur { width: 84px; }
table.lentele.du col.du-vardas { width: 108px; }
table.lentele.du col.du-calc { width: 76px; }
table.lentele.du col.du-kertine { width: 88px; }

/* Žiniaraščio spaudinio darbuotojo stulpelio taisyklės perkeltos į
   `UI.spausdintiLange` `stiliai` (panele-atlyginimai.js) – kad galiotų ir lango
   peržiūrai, ir spaudai, ir nesusitrauktų iki vieno simbolio išplėstame rodinyje. */

/* --- Priklijuota antraštė ir suvestinė --- */
table.lentele.du thead th { position: sticky; top: 0; z-index: 3; }
table.lentele.du tfoot td {
  position: sticky; bottom: 0; z-index: 3;
  background: var(--pavirsius-2);
  border-top: 2px solid var(--linija);
  font-weight: 700;
}

/* --- Priklijuotas vardo stulpelis --- */
table.lentele.du .du-vardas-c {
  position: sticky; left: 0; z-index: 2;
  background: var(--pavirsius);
  border-right: 1px solid var(--linija);
}
table.lentele.du thead .du-vardas-c,
table.lentele.du tfoot .du-vardas-c { z-index: 4; }

/* --- Priklijuotos kertinės sumos dešinėje ---
   Poslinkiai atitinka `col.du-kertine` plotį (88 px). */
table.lentele.du .du-k1 { position: sticky; right: 176px; }
table.lentele.du .du-k2 { position: sticky; right:  88px; }
table.lentele.du .du-k3 { position: sticky; right:   0; }
table.lentele.du .du-k1,
table.lentele.du .du-k2,
table.lentele.du .du-k3 {
  z-index: 2;
  background: var(--pavirsius);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
table.lentele.du .du-k1 { border-left: 1px solid var(--linija); }
table.lentele.du thead .du-k1,
table.lentele.du thead .du-k2,
table.lentele.du thead .du-k3,
table.lentele.du tfoot .du-k1,
table.lentele.du tfoot .du-k2,
table.lentele.du tfoot .du-k3 { z-index: 4; background: var(--pavirsius-2); }

/* Skaičiuojami langeliai – pilkas fonas, kaip nurodo paaiškinimas. */
table.lentele.du td.calc {
  text-align: right;
  color: var(--tekstas-2);
  font-variant-numeric: tabular-nums;
}

/* Persiskaičiavusi suma trumpam pažymima – kitaip ekrane nematyti,
   KAS pasikeitė įvedus skaičių. */
@keyframes du-blyksnis {
  from { background: var(--gerai-fonas); }
  to   { background: transparent; }
}
table.lentele.du td.pakito { animation: du-blyksnis 1.1s ease-out; }
table.lentele.du .du-k1.pakito,
table.lentele.du .du-k2.pakito,
table.lentele.du .du-k3.pakito { animation: none; box-shadow: inset 0 0 0 2px var(--gerai); }

/* Lentelės rėmas: aukštis ribojamas, kad priklijuota suvestinė turėtų
   prie ko klijuotis, o meniu ir antraštė liktų matomi. */
.du-remas { overflow: auto; max-height: calc(100vh - 330px); min-height: 220px; }

/* Siauresnis 14" ekranas. Labai dažnas atvejis – 1920×1080 su 150 % masteliu
   naršyklei atrodo kaip 1280 px. Prie pradinių pločių lentelė ten dar
   slystų, todėl stulpeliai suspaudžiami. Skaičiai lygiuojami dešinėn, tad
   ilgesnė reikšmė lieka matoma net ir susiaurėjus laukeliui. */
@media (max-width: 1400px) {
  table.lentele.du col.du-in     { width: 54px; }
  table.lentele.du col.du-vardas { width: 94px; }
  table.lentele.du col.du-kertine { width: 82px; }
  table.lentele.du .du-k1 { right: 164px; }
  table.lentele.du .du-k2 { right:  82px; }
  table.lentele.du th, table.lentele.du td { padding: 5px 4px; }
  table.lentele.du { font-size: 12px; }
}

/* Priklijuotas pirmasis stulpelis plačioms lentelėms (priskyrimų matrica,
   registrai). Slenkant į šoną kitaip dingsta, KIENO eilutė žiūrima – ta pati
   bėda, dėl kurios buvo pertvarkytas darbo užmokesčio žiniaraštis. */
table.lentele.lipni-pirmas th:first-child,
table.lentele.lipni-pirmas td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--pavirsius);
  border-right: 1px solid var(--linija);
}
table.lentele.lipni-pirmas thead th:first-child { z-index: 4; background: var(--pavirsius-2); }
table.lentele.lipni-pirmas tbody tr:hover td:first-child { background: var(--pavirsius-2); }

/* --- Darbo laiko tabelis ---
   31 dienos stulpelis + suvestinė netelpa į ekraną jokiu būdu, todėl
   naudojama ta pati sandara kaip DU žiniaraštyje: priklijuotas vardas
   kairėje, suvestinė dešinėje. Dienos stulpeliai siauri – juose telpa
   „8" arba „8A". */
/* Tabelio stulpelių pločiai.
   Anksčiau čia buvo `col { width: auto }`, bet lentelė `colgroup` neturėjo
   iš viso, tad taisyklė nieko nedarė, o dešinėje priklijuotų stulpelių
   poslinkiai (paveldėti iš `.du`: 176/88/0) neatitiko tikrųjų pločių –
   „Neatvykimai" plačiau už „Dirbta d.". Dabar pločiai nustatomi čia, o
   poslinkiai iš jų ir suskaičiuoti: 96 + 104 = 200. */
table.lentele.tab-lentele col.tab-vardas { width: 108px; }
table.lentele.tab-lentele col.tab-norma  { width: 54px; }
table.lentele.tab-lentele col.tab-diena  { width: 30px; }
table.lentele.tab-lentele col.tab-k1     { width: 72px; }
table.lentele.tab-lentele col.tab-k2     { width: 96px; }
table.lentele.tab-lentele col.tab-k3     { width: 104px; }

table.lentele.tab-lentele .du-k1 { right: 200px; }
table.lentele.tab-lentele .du-k2 { right: 104px; }
table.lentele.tab-lentele .du-k3 { right: 0; }
table.lentele.tab-lentele th.tab-d,
table.lentele.tab-lentele td.tab-d { width: 30px; min-width: 30px; padding: 2px 1px; }
table.lentele.tab-lentele .tab-langelis {
  width: 100%; min-width: 0; padding: 2px 1px;
  font-size: 11.5px; text-align: center; text-transform: uppercase;
}
/* Savaitgaliai ir šventės – kad kalendorius būtų matomas iš karto. */
table.lentele.tab-lentele .savaitgalis { background: var(--pavirsius-2); }
table.lentele.tab-lentele .svente { background: #fff3cd; }
table.lentele.tab-lentele thead .svente { background: #ffe69c; }
/* Langelis, kurio žymė atėjo iš įsakymo ar prašymo – kad būtų matyti, kas
   yra sistemos pasiūlymas, o kas finansininkės įrašas. */
table.lentele.tab-lentele td.is-dok { box-shadow: inset 0 -2px 0 var(--pagr); }

/* --- Darbuotojo darbo laiko kalendorius (savitarna) ---
   Vienam žmogui kalendorius skaitomas geriau nei 31 stulpelio lentelė:
   iš karto matyti, kurią dieną kas buvo. */
.dl-kalendorius {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  max-width: 560px;
}
.dl-savaite {
  text-align: center; font-size: 11px; font-weight: 600;
  color: var(--tekstas-3); padding-bottom: 2px;
}
.dl-tuscia { min-height: 46px; }
.dl-diena {
  min-height: 46px; border: 1px solid var(--linija); border-radius: var(--r2);
  padding: 3px 4px; background: var(--pavirsius);
}
.dl-diena.nedarbo { background: var(--pavirsius-2); }
.dl-diena.svente  { background: #fff3cd; }
.dl-diena.zymeta  { box-shadow: inset 0 -3px 0 var(--pagr); }
.dl-nr  { font-size: 10.5px; color: var(--tekstas-3); }
.dl-val { font-size: 13px; font-weight: 600; text-align: right; }

@media print {
  .dl-diena, .dl-kalendorius { break-inside: avoid; }
}

/* --- Vardas, pastaba ir mokama suma žiniaraščiuose --- */

/* Vardo stulpelis platesnis: jame telpa inicialai, vardas, faktinis darbo
   laikas iš tabelio ir pastabos laukelis. Vien inicialų neužteko – tikrinant
   eilutę reikia matyti, kieno ji. */
table.lentele.du col.du-vardas { width: 158px; }
@media (max-width: 1400px) {
  table.lentele.du col.du-vardas { width: 146px; }
  table.lentele.du col.du-in     { width: 52px; }
}
table.lentele.du .du-vardas-c { white-space: normal; line-height: 1.15; }

/* Svarbiausia eilutėje – KIENO ji, todėl ryškus vardas, o inicialai tik
   pagalbinė žyma. Anksčiau buvo atvirkščiai: dvi didelės raidės ir smulkus
   vardas, nors iš „VGJ" ir „VG" žmogaus greitai neatpažinsi. */
table.lentele.du .du-vardas-p { font-weight: 700; font-size: 12.5px; }
table.lentele.du .du-inic {
  font-size: 10.5px; color: var(--tekstas-3); letter-spacing: .3px;
}

/* Pastaba prie eilutės – kaip Excelyje šalia sumos. Tyli, kol tuščia. */
.du-pastaba {
  width: 100%; margin-top: 3px; padding: 1px 3px;
  font-size: 11px; border: 1px solid transparent; background: transparent;
}
.du-pastaba:hover, .du-pastaba:focus {
  border-color: var(--linija); background: var(--pavirsius);
}
.du-pastaba:not(:placeholder-shown) {
  border-color: var(--linija); background: var(--gerai-fonas);
}

/* Į banką mokama suma – tai, ko ieškoma pirmiausia. */
table.lentele.du .du-k3 { font-weight: 700; }
table.lentele.du tbody .du-k3 { color: var(--tekstas); font-size: 13px; }

/* Tabelio antraštė: savaitės diena virš datos. Be jos pildant nesimato,
   kur savaitgalis ir kuris stulpelis yra penktadienis – o jo norma kitokia. */
table.lentele.tab-lentele thead .tab-d { padding: 2px 1px; line-height: 1.1; }
table.lentele.tab-lentele .tab-sav {
  font-size: 9.5px; font-weight: 600; color: var(--tekstas-3);
  text-transform: none; letter-spacing: 0;
}
table.lentele.tab-lentele thead .tab-nr { font-size: 11.5px; font-weight: 700; }
/* Savaitgalio ir šventės antraštės ryškesnės – kad iš karto matytųsi ritmas. */
table.lentele.tab-lentele thead .savaitgalis .tab-sav { color: var(--ispejimas); }
table.lentele.tab-lentele thead .svente .tab-sav { color: #7a5c00; }

/* --- Tabelio pasiūlymai ir patvirtinimas ---
 *
 * Sistema mėnesį užpildo pati, todėl nepatikrintas tabelis atrodytų lygiai
 * taip pat kaip patikrintas. Blanki rausva sako: „čia mano spėjimas".
 * Palietus reikšmę arba ją patvirtinus ji tampa juoda – matyti, kur žmogaus
 * akis jau buvo. */
table.lentele.tab-lentele .tab-langelis {
  color: #111; font-weight: 600;
}
table.lentele.tab-lentele .tab-langelis.siulymas {
  color: #c98b9e;            /* blanki rausva – matoma, bet netvirtina */
  font-weight: 400;
  font-style: italic;
}
table.lentele.tab-lentele .tab-langelis.siulymas:focus {
  color: #111; font-style: normal; font-size: 13px;
}
/* ---------------------------------------------------------------------------
   TABELIS TELEFONE
   Tinklelis su 31 dienos stulpeliu telefone netelpa iš principo, todėl
   rodomos kortelės: vienas darbuotojas – viena kortelė, dienos vertikaliai.
   --------------------------------------------------------------------------- */
.tab-korteles { display: flex; flex-direction: column; gap: 10px; padding: 12px; }
.tab-kortele { margin: 0; }
.tab-kortele-galva {
  cursor: pointer;
  padding: 12px 14px;
  list-style: none;
  display: flex; align-items: center; gap: 10px;
}
.tab-kortele-galva::-webkit-details-marker { display: none; }
.tab-kortele-galva::after { content: "▾"; margin-left: auto; color: var(--tekstas-3); }
.tab-kortele[open] .tab-kortele-galva::after { content: "▴"; }
.tab-kortele[open] .tab-kortele-galva { border-bottom: 1px solid var(--linija); }

.tab-dienos { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.tab-diena-eil {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 8px;
  border-radius: var(--r1);
}
.tab-diena-eil.savaitgalis { background: var(--pavirsius-2); }
.tab-diena-eil.svente { background: #fff3cd; }
.tab-diena-nr { flex: 1; min-width: 0; }
/* Langelis kortelėje – normalaus dydžio, ne 20 px kaip tinklelyje. */
.tab-diena-eil .tab-langelis {
  width: 92px; flex: 0 0 92px;
  padding: 8px; font-size: 16px; text-align: center;
}
.tab-suma {
  padding: 12px 14px;
  border-top: 1px solid var(--linija);
  background: var(--pavirsius-2);
  font-weight: 600;
}

/* Viršvalandinių ir naktinių valandų mygtukas prie eilutės.
   Kai jų yra, mygtukas rodo sumą – kitaip jos liktų paslėptos lange. */
.tab-papild {
  padding: 0 4px;
  font-size: 10.5px;
  line-height: 1.4;
  color: var(--tekstas-3);
}
.tab-papild:not(:disabled):hover { color: var(--pagr); }

/* Eilutės patvirtinimo mygtukas – tik kol toje eilutėje liko pasiūlymų. */
.tab-patv { color: var(--gerai); font-weight: 700; }

/* Šiandiena savitarnos darbo laike.
   Kalendorius atrodė vienodai nuo pirmos iki paskutinės dienos, tad kur esi
   mėnesyje – nesimatė. Ta pati žyma ir kalendoriuje, ir pildymo lentelėje. */
.dl-diena.siandien {
  outline: 2px solid var(--pagr);
  outline-offset: -2px;
  background: var(--pagr-sviesi);
}
.dl-siandien {
  display: inline-block;
  margin-left: 4px;
  padding: 0 5px;
  border-radius: 8px;
  background: var(--pagr);
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  vertical-align: middle;
}
tr.dl-eil-siandien { background: var(--pagr-sviesi) !important; }

/* Ta pati blanki rausva darbuotojo savitarnoje, pildant savo valandas.
   Spalva viena ir ta pati sąmoningai: reikšmė reiškia tą patį abiejose
   vietose – „sistema taip mano, patvirtinkite arba pataisykite". */
input.dl-siulymas {
  color: #c98b9e;
  font-style: italic;
}
input.dl-siulymas:focus { color: #111; font-style: normal; }
.dl-siulymas-pvz { color: #c98b9e; font-style: italic; }

@media print {
  input.dl-siulymas { color: #666; }
}

@media print {
  /* Spaudinyje spalva nieko nesako – blankios reikšmės rodomos kursyvu. */
  table.lentele.tab-lentele .tab-langelis.siulymas { color: #666; }
  .tab-patv { display: none; }
}

/* Pranešimas apie naują sistemos versiją.
   Automatiškai neperkraunama: naudotojas gali būti viduryje pildymo. */
.nauja-versija {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  z-index: 400; display: flex; align-items: center; gap: 10px;
  background: var(--pavirsius); border: 1px solid var(--linija);
  border-radius: var(--r2); box-shadow: var(--sesel-2);
  padding: 9px 12px; font-size: 13px; max-width: calc(100vw - 24px);
}

/* --- Tabelis: laikas ir patvirtinimo būsena ---
 *
 * Trys skirtingi dalykai, kuriuos reikia atskirti akimi:
 *   pilka   – diena dar neįvyko (planas, tikrinti nėra ko);
 *   rausva  – diena buvo, bet niekas jos nepatikrino;
 *   juoda   – patikrinta.
 * Anksčiau ateitis ir nepatikrinta praeitis atrodė vienodai, todėl sistema
 * prašydavo patvirtinti tai, kas dar neįvyko. */
/* Ateities pasiūlymas – pilkas. Klasė PAPILDO `siulymas`, o ne pakeičia ją:
   antraip įrašant tabelį ateities dienos nustotų būti pasiūlymais ir
   pasitvirtintų pačios. */
table.lentele.tab-lentele .tab-langelis.siulymas.ateitis {
  color: #9aa4b0; font-weight: 400; font-style: italic;
  /* Prognozė – mažesnėmis raidėmis, kad faktas (praeitis) iš karto skirtųsi
     nuo dar neįvykusio plano. */
  font-size: 11px;
}
/* Šiandienos stulpelis – kad iš karto matytųsi, kur esame. */
table.lentele.tab-lentele .siandien { box-shadow: inset 2px 0 0 var(--pagr), inset -2px 0 0 var(--pagr); }
table.lentele.tab-lentele thead .siandien .tab-nr {
  background: var(--pagr); color: #fff; border-radius: 3px;
}
.tab-eil-busena { margin-top: 3px; }

@media print {
  table.lentele.tab-lentele .tab-langelis.siulymas.ateitis { color: #999; }
  table.lentele.tab-lentele .siandien { box-shadow: none; }
  .tab-eil-busena button { display: none; }
}

/* ==========================================================================
   ATLYGINIMŲ ŽINIARAŠTIS TELEFONE
   ==========================================================================

   Žiniaraštyje 20+ stulpelių. Ant 360 px ekrano jis netelpa niekaip: net su
   priklijuotais stulpeliais matomi trys skaičiai iš dvidešimties, o horizontalus
   slinkimas nuolat pameta, kieno eilutė skaitoma.

   Todėl telefone TA PATI lentelė paverčiama kortelėmis – po vieną darbuotojui.
   Kiekvienas langelis gauna savo pavadinimą iš `data-antraste`, o antraščių
   eilutė nebereikalinga. Atvaizdavimas nedubliuojamas sąmoningai: antras
   piešimas reikštų ir antrą įvykių laidumą, o gyvos peržiūros skaičiavimas
   tyliai išsiskirtų su lentelės versija. */
@media (max-width: 640px) {
  .du-remas { overflow: visible; max-height: none; }

  table.lentele.du,
  table.lentele.du tbody,
  table.lentele.du tfoot,
  table.lentele.du tr,
  table.lentele.du td { display: block; width: auto; }

  /* Antraščių eilutė ir stulpelių pločiai kortelėms netaikomi. */
  table.lentele.du thead,
  table.lentele.du colgroup { display: none; }

  table.lentele.du tr {
    border: 1px solid var(--linija);
    border-radius: var(--r3);
    margin-bottom: var(--t3);
    background: var(--pavirsius);
    overflow: hidden;
  }

  /* Vardas – kortelės antraštė per visą plotį. */
  table.lentele.du .du-vardas-c {
    position: static;
    width: auto;
    background: var(--pavirsius-2);
    border-bottom: 1px solid var(--linija);
    padding: var(--t3);
    white-space: normal;
  }
  table.lentele.du .du-inic { display: none; }

  /* Likę langeliai – „pavadinimas … reikšmė" vienoje eilutėje. */
  table.lentele.du tbody td:not(.du-vardas-c),
  table.lentele.du tfoot td:not(.du-vardas-c) {
    position: static;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--t3);
    padding: 7px var(--t3);
    border-bottom: 1px solid var(--linija);
    white-space: normal;
  }
  table.lentele.du tr td:last-child { border-bottom: none; }

  table.lentele.du td[data-antraste]::before {
    content: attr(data-antraste);
    color: var(--tekstas-2);
    font-size: 12.5px;
    text-align: left;
    flex: 1;
  }
  table.lentele.du td[data-antraste] > input { max-width: 110px; text-align: right; }

  /* Bruto / Mokesčiai / Į banką – kertinės sumos, todėl ryškesnės. */
  table.lentele.du .du-k1,
  table.lentele.du .du-k2,
  table.lentele.du .du-k3 {
    font-weight: 600;
    color: var(--tekstas);
    background: var(--pavirsius-3);
  }
  table.lentele.du .du-k1 { border-left: none; }

  /* Suvestinė „Iš viso" – atskira kortelė apačioje, be klijavimo. */
  table.lentele.du tfoot tr { border-color: var(--linija-rysk); }
  table.lentele.du tfoot .du-tuscia { display: none; }
}

/* Apskaičiuotas laukelis (VDU): reikšmė atsirado ne iš niekur, o iš
   skaičiavimo. Be žymės pirmas noras yra ją pataisyti ranka. */
table.lentele.du input.apskaiciuota {
  border-color: var(--pagr);
  background: var(--pagr-sviesi);
}

/* ==========================================================================
   TABELIO TINKLELIS TELEFONE
   ==========================================================================

   Tabelyje 31 dienos stulpelis po 30 px – 930 px ant 360 px ekrano. Kortelėmis
   paversti kaip žiniaraščio negalima: gautųsi 31 eilutė vienam darbuotojui.

   Todėl dienos dėliojamos kaip KALENDORIUS – po 7 per eilutę, kaip mėnesį ir
   įpratę matyti. Kiekviename langelyje – savaitės diena ir data, nes
   antraščių eilutės kortelėje nebėra. */
@media (max-width: 640px) {
  table.lentele.du.tab-lentele tr {
    padding-bottom: var(--t2);
  }

  /* Dienos – tinklelis po 7. Likę langeliai (vardas, norma, suvestinė)
     paveldi bendrą „pavadinimas … reikšmė" elgseną. */
  table.lentele.du.tab-lentele td.tab-d {
    position: static;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 2px;
    width: calc(100% / 7);
    padding: 4px 2px;
    border-bottom: none;
    vertical-align: top;
  }

  table.lentele.du.tab-lentele td.tab-d::before {
    content: attr(data-sav) " " attr(data-diena-nr);
    font-size: 10.5px;
    color: var(--tekstas-3);
    flex: none;
    text-align: center;
  }

  table.lentele.du.tab-lentele td.tab-d > input {
    max-width: 100%;
    width: 100%;
    text-align: center;
    padding: 6px 2px;
  }

  /* Šiandienos ir nedarbo dienų žymos turi likti matomos ir tinklelyje. */
  table.lentele.du.tab-lentele td.tab-d.siandien::before {
    color: var(--pagr);
    font-weight: 700;
  }

  /* Vardas ir mygtukas „papildomos valandos" – per visą plotį. */
  table.lentele.du.tab-lentele td.tab-norma {
    justify-content: space-between;
  }
}

/* Greito darbuotojo perjungimo meniu darbuotojo kortelės antraštėje. */
.darb-greitas {
  max-width: 220px;
  padding: 6px 10px;
  border: 1px solid var(--linija-rysk);
  border-radius: 8px;
  background: var(--pavirsius, #fff);
  color: var(--tekstas-2);
  font-size: 13px;
  cursor: pointer;
}
.darb-greitas:hover { border-color: var(--pagrindine, #667); color: var(--tekstas); }

/* „Patvirtino X" – dokumento antraštėje.
   Būsenos žymė („patvirtintas") pasako TIK būseną; iš jos nesimato, kas ir
   kada dokumentą užbaigė, todėl vadovui atrodydavo, kad darbas dar laukia. */
.patvirtino-zyme {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  background: #e7f6ed;
  border: 1px solid #a7d9bd;
  color: #146b45;
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
}
.patvirtino-zyme b { font-weight: 700; }

/* Pasenusi VDU reikšmė: įrašyta anksčiau, o bazė nuo tada pasikeitė. */
td.pasenes-vdu { background: #fff7e6; }
td.pasenes-vdu .vdu-taisyti {
  display: block;
  width: 100%;
  margin-top: 2px;
  padding: 1px 4px;
  color: #8a5a00;
  font-size: 11px;
  line-height: 1.4;
  white-space: nowrap;
}

/* --- Vykdoma užklausa ir neįrašyti pakeitimai (api.js, ui.js) --- */
.mygt.vykdoma { cursor: progress; position: relative; }
.mygt.vykdoma::after {
  content: ''; width: 12px; height: 12px; margin-left: 6px; display: inline-block;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: mygt-sukasi .7s linear infinite; vertical-align: -2px;
}
@keyframes mygt-sukasi { to { transform: rotate(360deg); } }
body.yra-neissaugotu #tIrasyti::after,
body.yra-neissaugotu #zIrasyti::after {
  content: '●'; color: var(--ispejimas); margin-left: 6px; font-size: 12px;
}
body.yra-neissaugotu #tIrasyti,
body.yra-neissaugotu #zIrasyti { box-shadow: 0 0 0 2px var(--ispejimas); }

/* --- RS teksto redaktorius (panele-rs.js) --- */
.rs-red-juosta { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; padding: 6px; border: 1px solid var(--linija, #e4e7ec); border-bottom: 0; border-radius: 8px 8px 0 0; background: #f9fafb; position: sticky; top: 0; z-index: 2; }
.rs-red-lapas { border: 1px solid var(--linija, #e4e7ec); border-radius: 0 0 8px 8px; padding: 32px 40px; min-height: 60vh; max-height: 70vh; overflow: auto; background: #fff; font: 11pt/1.45 'Times New Roman', serif; color: #101828; }
.rs-red-lapas:focus { outline: 2px solid #2f5aa8; }
.rs-red-lapas table { border-collapse: collapse; width: 100%; margin: 6px 0; }
.rs-red-lapas td, .rs-red-lapas th { border: 1px solid #98a2b3; padding: 3px 6px; vertical-align: top; }
.rs-red-lapas .pv-antraste { color: #475467; font-size: 10pt; border-bottom: 1px dashed #d0d5dd; margin-bottom: 10px; }
.modalas.platus, .platus .modalas { max-width: 1000px; width: 96vw; }

/* --- RS dokumentų sąrašas: suskleidžiami skyriai, kompaktiškos eilutės --- */
.rs-skyrius { overflow: hidden; }
.rs-sk-galva { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 12px; border: 0; background: #f9fafb; cursor: pointer; font: inherit; text-align: left; }
.rs-sk-galva:hover { background: #f2f4f7; }
.rs-sk-galva .rodykle { width: 12px; color: #667085; }
table.rs-lentele td { padding: 3px 10px; font-size: 12.5px; line-height: 1.3; vertical-align: middle; }
table.rs-lentele tr:nth-child(even) td { background: #fafbfc; }
table.rs-lentele tr.spaudziama:hover td { background: #eef4ff; cursor: pointer; }
.rs-lentele .rs-k { width: 92px; font-weight: 600; white-space: nowrap; font-size: 12px; }
.rs-lentele .rs-d { width: 120px; white-space: nowrap; font-size: 12px; color: #475467; }
.rs-lentele .rs-b { width: 150px; white-space: nowrap; }
.rs-punkt { margin-left: 6px; font-size: 11px; color: #98a2b3; }

/* Tabelis: dokumentai, kurių pagrindu atsirado žymės (įsakymai, prašymai). */
/* Kompaktiškai: žymės viena šalia kitos, viena eilute – eilutė nebeplatėja. */
.tab-dok { display: flex; flex-wrap: wrap; gap: 2px; margin: 2px 0; }
.tab-dok-zyme { border: 0; background: var(--pagr-sviesi, #eaf0fa); color: var(--pagr, #2f5aa8); border-radius: 3px;
  padding: 0 3px; font-size: 9.5px; cursor: pointer; line-height: 1.5; white-space: nowrap; }
.tab-dok-zyme:hover { text-decoration: underline; }
.tab-dok-zyme .pilkas { font-size: 9px; margin-left: 1px; }
.tab-dok-zyme.tab-dok-naujas { background: var(--ispej-fonas, #fffaeb); color: var(--ispejimas, #b54708); border: 1px dashed #fedf89; }


/* =========================================================================
   Kompaktiški langai (VG 2026-10-03): antraštė su filtrais ir veiksmais
   užima kuo mažiau aukščio; ilgi paaiškinimai suskleisti į vieną eilutę.
   ========================================================================= */
.kortele > .galva { padding: 8px 14px; gap: 8px; }
.kortele > .galva .veiksmai { gap: 4px; }
.kortele > .galva .mygt { padding: 5px 10px; font-size: 12.5px; box-shadow: none; }
.kortele > .galva .laukas > .zyme { font-size: 11px; margin-bottom: 2px; }
.kortele > .galva input, .kortele > .galva select { padding: 5px 8px; }
.kortele > .galva .menuo-remas .menuo-strele { padding: 0 8px; font-size: 15px; }
.zinute { padding: 7px 12px; font-size: 13px; }
.zinute.suskleidziama { align-items: center; }
.zinute.suskleista > div:not(.zinute-daugiau) {
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; flex: 1; min-width: 0;
}
.zinute.suskleista br { display: none; }
.zinute-daugiau { margin-left: auto; flex: 0 0 auto; border: 0; background: none; color: inherit; font: inherit;
  font-size: 12px; font-weight: 600; cursor: pointer; padding: 0 2px; white-space: nowrap; text-decoration: underline; }
@media print { .zinute.suskleista > div { display: block; -webkit-line-clamp: unset; } }

/* Lentelės: daugiau eilučių be slinkimo. Veiksmų mygtukai eilutės gale –
   mažesni ir vienoje eilutėje (kitaip eilutė virsta dviguba). */
table.lentele th { padding: 5px 10px; }
table.lentele td { padding: 4px 10px; }
table.lentele td .mygt.mazas, table.lentele td .mygt.tylus { padding: 3px 7px; font-size: 11.5px; box-shadow: none; }
table.lentele td:last-child:has(.mygt) { white-space: nowrap; }
/* Tas pats ir registrų / KVS lentelėms (.registro-lentele) – jos fiksuoto
   išdėstymo, todėl veiksmų stulpelis plečiamas pagal turinį (nowrap). */
.registro-lentele td, .registro-lentele th { padding: 4px 8px; }
.registro-lentele td .mygt.mazas, .registro-lentele td .mygt.tylus { padding: 3px 7px; font-size: 11.5px; box-shadow: none; }
.registro-lentele td:last-child:has(.mygt) { white-space: nowrap; }
.registro-lentele td:last-child:has(.mygt) .mygt { margin: 1px 0; }

/* Meniu: glaudūs punktai, ryškūs grupių pavadinimai
   (gerai matomi ir tamsiame ekrane). */
.meniu-sarasas { padding: 6px 6px; }
.meniu-grupe { padding: 8px 8px 2px; font-size: 11px; font-weight: 700; color: var(--tekstas-2); letter-spacing: .05em; }
.meniu-grupe:hover { color: var(--tekstas); }
.meniu-punktas { padding: 4px 8px; gap: 8px; font-size: 13px; margin-bottom: 0; line-height: 1.3; }
.meniu-punktas .ikona { font-size: 14px; }
.meniu-grupe-turinys + .meniu-grupe { margin-top: 2px; border-top: 1px solid var(--linija); }

/* DU žiniaraščio apačia: prognozė, mokėtinos įmokos ir pastabos – vienoje
   kompaktiškoje eilutėje (siaurame ekrane – viena po kita). */
.du-apacia { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: flex-start;
  padding: 8px 14px; border-top: 1px solid var(--linija); }
.du-apacia-dalis { margin: 0; }
.du-prognoze { flex: 0 1 420px; }
.du-apacia-antr { font-size: 12px; color: var(--info, #175cd3); margin-bottom: 3px; }
.du-prognoze table.lentele td, .du-prognoze table.lentele th { padding: 2px 8px; font-size: 12px; }
.du-mokejimai { display: flex; gap: 18px; align-items: flex-start; flex: 0 1 auto; }
.du-mok-blokas { min-width: 150px; }
.du-mok-suma { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.3; }
.du-mok-info { cursor: help; color: var(--info, #175cd3); font-weight: 700; padding: 0 4px; }
.du-pastabos { flex: 1 1 260px; }
.du-pastabos textarea { min-height: 0; padding: 5px 8px; }

/* =========================================================================
   TANKUS REŽIMAS VISAI SISTEMAI (VG 2026-10-03): kuo daugiau informacijos
   be slinkimo – VISUOSE languose, ne po vieną. Mažinami bendri tarpų
   kintamieji (juos naudoja kortelės, formos, sąrašai, langai), laukų ir
   mygtukų aukštis; formos plačiame lange – 3–4 laukai eilutėje.
   Telefono taisyklės (@media) lieka savo vietose.
   ========================================================================= */
:root {
  --t1: 3px; --t2: 5px; --t3: 8px;
  --t4: 10px; --t5: 14px; --t6: 20px;
}
body { font-size: 13.5px; line-height: 1.4; }
input, select, textarea { padding: 5px 9px; font-size: 13px; box-shadow: none; }
textarea { line-height: 1.35; }
.laukas { margin-bottom: 8px; }
.laukas > .zyme { font-size: 11.5px; margin-bottom: 2px; }
.laukas > .uzuomina { font-size: 11px; margin-top: 2px; }
.mygt { padding: 6px 12px; font-size: 12.5px; gap: 5px; }
.mygt.mazas { padding: 4px 8px; font-size: 11.5px; }
.kortele > .galva h2, .kortele > .galva h3 { margin: 0; font-size: 14.5px; }
.modalas > .galva { padding: 10px 14px; }
.modalas > .apacia { padding: 8px 14px; }
/* Formos: tiek stulpelių, kiek telpa (min. 220 px laukui) – plačiame lange 3–4. */
.laukai-2, .laukai-3 { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 12px; }
@media (max-width: 640px) {
  input, select, textarea { font-size: 16px; }   /* iOS nepriartina */
  .laukai-2, .laukai-3 { grid-template-columns: 1fr; }
}