/* CRM sasaja. Visos reiksmes — is 00-zodynas.css; cia ju nera nė vienos.
   Priezastis ne grozis: kai spalva rasoma ten, kur naudojama, po menesio ju buna trys
   panasios ir nė vienos teisingos. */
* { box-sizing: border-box; }
/* `hidden` privalo nugaleti VISKA. Rasta gyvai 2026-09-02: `#langas` turi
   `display: grid`, o ID selektorius uz narsykles `[hidden] { display: none }`
   stipresnis — tad prisijungimo langas po sekmingo prisijungimo NEDINGDAVO.
   Zmogus matydavo PIN forma su po ja veikiancia programa, vesdavo PIN vel ir vel
   (35 sekmingos sesijos is eiles), o serveris visa ta laika atsakinejo teisingai.
   Sita eilute reikia laikyti PIRMA: kiekvienas naujas `display` taisyklei prilygtu. */
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--kl-fonas);
  color: var(--kl-ink-2);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: var(--kl-tx-m);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.zenklas { font-size: var(--kl-tx-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--kl-grey); }

/* --- prisijungimas --- */
#langas { min-height: 100%; display: grid; place-items: center; padding: 24px; }
#prisijungimas { width: min(340px, 100%); display: grid; gap: 10px; }
#prisijungimas h1 {
  font-size: var(--kl-tx-2xl); font-weight: 500; letter-spacing: -.02em;
  color: var(--kl-ink); margin: 2px 0 14px;
}
label { font-size: var(--kl-tx-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--kl-grey); }
input, select, button {
  font: inherit; padding: 11px 12px;
  border: 1px solid var(--kl-rule); border-radius: var(--kl-r);
  background: var(--kl-fonas); color: var(--kl-ink);
}
/* Telefone PIN yra vienintelis dalykas ekrane — jam ir tarpai tarp skaitmenu. */
#pin { letter-spacing: .35em; text-align: center; font-size: var(--kl-tx-xl); }
input:focus-visible, select:focus-visible, button:focus-visible { outline: 2px solid var(--kl-amber); outline-offset: 2px; }
button { background: var(--kl-ink); color: var(--kl-fonas); border-color: var(--kl-ink); cursor: pointer; }
#klaida { color: var(--kl-klaida); font-size: var(--kl-tx-s); margin: 2px 0 0; }

/* --- programa --- */
/* Antraste ir maketas gyvena skyriuje PROGRAMOS KEVALAS, failo apacioje. */
#skaiciai { display: flex; flex-wrap: wrap; gap: 10px; }
#skaiciai div {
  border: 1px solid var(--kl-rule); border-radius: var(--kl-r);
  padding: 10px 14px; min-width: 104px; background: var(--kl-field);
}
#skaiciai b {
  display: block; font-size: var(--kl-tx-2xl); font-weight: 500;
  color: var(--kl-ink); letter-spacing: -.02em;
}
#skaiciai span { font-size: var(--kl-tx-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--kl-grey); }

.pastaba { color: var(--kl-grey); font-size: var(--kl-tx-s); }

/* --- piltuvas: kanban --- */
#piltuvas { display: flex; gap: 10px; overflow-x: auto; overflow-y: hidden; align-items: stretch; min-height: 0; }
.stulpelis {
  flex: 0 0 232px; border: 1px solid var(--kl-rule); border-radius: var(--kl-r);
  padding: 10px; background: var(--kl-field);
  display: flex; flex-direction: column; min-height: 0; overflow-y: auto;
}
.stulpelis.virs { border-color: var(--kl-amber); background: var(--kl-fonas); }
.stulpelis > header { display: flex; align-items: baseline; gap: 8px; padding: 0 0 6px; border: 0; }
.stulpelis h2 { font-size: var(--kl-tx-s); font-weight: 500; color: var(--kl-ink); margin: 0; }
.stulpelis .kiek { margin-left: auto; color: var(--kl-grey); font-size: var(--kl-tx-s); }
.stulpelis .suma { font-size: var(--kl-tx-xs); color: var(--kl-grey); margin-bottom: 8px; }
.stulpelis[data-tipas="laimeta"] h2 { color: var(--kl-laimeta); }
.stulpelis[data-tipas="pralaimeta"] h2 { color: var(--kl-pralaimeta); }

.kortele {
  background: var(--kl-fonas); border: 1px solid var(--kl-rule); border-radius: var(--kl-r-s);
  padding: 9px 10px; margin-bottom: 8px; cursor: pointer;
}
.kortele:hover { border-color: var(--kl-faint); }
.kortele.tempiama { opacity: .45; }
.kortele .adresas { font-size: var(--kl-tx-m); font-weight: 500; color: var(--kl-ink); }
.kortele .klientas { font-size: var(--kl-tx-s); color: var(--kl-grey); margin-top: 1px; }
.kortele .apacia { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; margin-top: 7px; }
.kortele .verte { font-size: var(--kl-tx-s); font-variant-numeric: tabular-nums; color: var(--kl-ink-2); }
.kortele .dienos { font-size: var(--kl-tx-xs); color: var(--kl-faint); }
.kortele .dienos.senas { color: var(--kl-amber); }
.kortele .bezenklo { font-size: var(--kl-tx-xs); color: var(--kl-pralaimeta); }

/* --- dialogai: stalcius ir forma --- */
dialog {
  border: 0; border-radius: var(--kl-r); padding: 0; color: var(--kl-ink-2);
  background: var(--kl-fonas); max-width: 560px; width: calc(100% - 24px);
}
dialog::backdrop { background: var(--kl-uzdanga); }
#stalcius { padding: 16px; }
#stalcius > header { display: flex; align-items: center; padding: 0 0 8px; border: 0; }
#stalcius .numeris { font-size: var(--kl-tx-xs); letter-spacing: .12em; color: var(--kl-grey); }
#stalcius .uzdaryti { margin-left: auto; background: none; border: 0; color: var(--kl-grey); cursor: pointer; }
#stalcius h2 { font-size: var(--kl-tx-l); font-weight: 500; color: var(--kl-ink); margin: 0 0 6px; }
#stalcius h3 { font-size: var(--kl-tx-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--kl-grey); margin: 16px 0 6px; }
.kontaktai { display: flex; flex-wrap: wrap; gap: 12px; font-size: var(--kl-tx-s); margin-bottom: 12px; }
.kontaktai a { color: var(--kl-ink-2); }
#stalcius .etapas { width: 100%; }
.uzrasas { display: flex; gap: 8px; margin-top: 10px; }
.uzrasas input { flex: 1; min-width: 0; }
.juosta { list-style: none; margin: 0; padding: 0; }
.juosta li { display: grid; grid-template-columns: 116px 1fr; gap: 8px; padding: 6px 0; border-top: 1px solid var(--kl-hair); font-size: var(--kl-tx-s); }
.juosta time { color: var(--kl-faint); font-size: var(--kl-tx-xs); }
.juosta li[data-tipas="statuso_keitimas"] span { color: var(--kl-grey); }
.juosta .tuscia { color: var(--kl-faint); grid-template-columns: 1fr; }

#naujas form { padding: 16px; display: grid; gap: 8px; }
#naujas h2 { font-size: var(--kl-tx-l); font-weight: 500; color: var(--kl-ink); margin: 0 0 4px; }
#naujas .dvi { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#naujas .mygtukai { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }
#dublikatas { color: var(--kl-amber); font-size: var(--kl-tx-s); margin: 0; }
.antrinis { background: var(--kl-fonas); color: var(--kl-ink-2); border-color: var(--kl-rule); }
.pirminis { background: var(--kl-ink); color: var(--kl-fonas); border-color: var(--kl-ink); }
header .pirminis { padding: 7px 12px; font-size: var(--kl-tx-s); }

/* Telefonas: stulpeliai siauresni, dialogas per visa ekrana. */
@media (max-width: 560px) {
  .stulpelis { flex-basis: 188px; }
  #naujas .dvi { grid-template-columns: 1fr; }
  dialog { max-height: 92vh; }
}


/* --- kainorastis --- */
.kainu-juosta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.kainu-juosta label { font-size: var(--kl-tx-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--kl-grey); }
#k-versija { padding: 6px 8px; font-size: var(--kl-tx-s); }
#k-rakinys { margin: 0; }
.kainu-grupe { margin-top: 16px; }
.kainu-grupe h2 {
  font-size: var(--kl-tx-xs); letter-spacing: .12em; text-transform: uppercase;
  color: var(--kl-grey); font-weight: 500; margin: 0 0 6px;
}
/* Lentele, ne korteliu tinklas: 45 pozicijos skaitomos stulpeliais, ir akis kainas
   lygina tik tada, kai jos viena po kita. */
table.kainos { width: 100%; border-collapse: collapse; font-size: var(--kl-tx-s); }
table.kainos th {
  text-align: left; font-weight: 500; color: var(--kl-grey); font-size: var(--kl-tx-xs);
  letter-spacing: .08em; text-transform: uppercase; padding: 0 8px 5px; border-bottom: 1px solid var(--kl-rule);
}
table.kainos td { padding: 7px 8px; border-bottom: 1px solid var(--kl-hair); vertical-align: baseline; }
table.kainos tr:hover td { background: var(--kl-field); }
table.kainos .kodas { font-variant-numeric: tabular-nums; color: var(--kl-grey); white-space: nowrap; }
table.kainos .pav { color: var(--kl-ink); }
table.kainos .vnt { color: var(--kl-faint); white-space: nowrap; }
table.kainos .kaina { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.kainos .kaina input {
  width: 92px; text-align: right; font-variant-numeric: tabular-nums;
  font-size: var(--kl-tx-s); padding: 4px 6px;
}
table.kainos .kaina input:disabled { background: none; border-color: transparent; color: var(--kl-ink-2); }
table.kainos tr.keista td { background: var(--kl-field); }
table.kainos tr.keista .kaina { color: var(--kl-amber); }

/* Telefonas: antraste turi LUZTI, o ne stumti mygtukus uz ekrano; lentele — tilpti.
   Ismatuota 2026-09-02 ties 360 px: be siu taisykliu dokumentas isplito iki 441 px. */
@media (max-width: 560px) {
  table.kainos { table-layout: fixed; }
  table.kainos th, table.kainos td { padding: 6px 4px; }
  table.kainos .kodas { font-size: var(--kl-tx-xs); overflow-wrap: anywhere; }
  table.kainos .pav { overflow-wrap: anywhere; }
  /* „Vnt." telefone nuimamas: matas beveik visada matomas is pavadinimo, o stulpelis
     atima ploti, kurio reikia kainai. */
  table.kainos .vnt { display: none; }
  table.kainos .kaina input { width: 72px; }
}

/* ======================================================= PROGRAMOS KEVALAS ==
   Stalui — kaire juosta; telefonui — apacios juosta (nykstys siekia apacia, ne
   virsu). Turinys slenka SAVYJE, o ne kartu su remu: butent nejudantis remas
   skiria programa nuo puslapio.
   Grandinei butinas `min-height:0` / `min-width:0` — be ju ilgas sarasas istempia
   maketa uz lango (ta pati liga jau buvo pagauta agento lange).            */

#programa { height: 100%; display: grid; grid-template-columns: 232px 1fr; min-height: 0; }

#rail {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 12px; border-right: 1px solid var(--kl-rule); background: var(--kl-field);
  min-width: 0;
}
#rail .zenklas { padding: 2px 8px 12px; }
#sritys { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#sritys button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; font-size: var(--kl-tx-m); text-align: left;
  border: 0; border-radius: var(--kl-r-s); background: none; color: var(--kl-ink-2); cursor: pointer;
}
#sritys button:hover { background: var(--kl-hair); }
#sritys button[aria-current="page"] { background: var(--kl-fonas); color: var(--kl-ink); box-shadow: inset 0 0 0 1px var(--kl-rule); }
#sritys svg, header .pirminis svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.rail-apacia { margin-top: auto; display: grid; gap: 6px; padding: 8px; border-top: 1px solid var(--kl-rule); }
.rail-apacia span { font-size: var(--kl-tx-s); color: var(--kl-grey); overflow-wrap: anywhere; }
.rail-apacia button { justify-self: start; padding: 5px 9px; font-size: var(--kl-tx-s); background: none; border-color: var(--kl-rule); color: var(--kl-ink-2); }

.turinys { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
header {
  display: flex; align-items: center; gap: 10px; flex: none;
  padding: 12px 20px; border-bottom: 1px solid var(--kl-rule); background: var(--kl-fonas);
}
header h1 { font-size: var(--kl-tx-xl); font-weight: 500; letter-spacing: -.02em; color: var(--kl-ink); margin: 0; }
header .pastaba { margin: 0; }
header .pirminis { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; font-size: var(--kl-tx-s); }
main { flex: 1; min-height: 0; overflow: auto; padding: 20px; display: grid; gap: 16px; align-content: stretch; }

/* Telefonas: juosta nusileidzia i apacia ir virsta keturiais nykscio taikiniais. */
@media (max-width: 720px) {
  #programa { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  #rail {
    grid-row: 2; flex-direction: row; align-items: center; gap: 0;
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
    border-right: 0; border-top: 1px solid var(--kl-rule); background: var(--kl-fonas);
  }
  #rail .zenklas, .rail-apacia span { display: none; }
  #sritys { flex-direction: row; flex: 1; }
  #sritys button { flex-direction: column; gap: 3px; justify-content: center; padding: 7px 4px; font-size: var(--kl-tx-xs); }
  #sritys button[aria-current="page"] { box-shadow: none; background: var(--kl-field); }
  .rail-apacia { margin-top: 0; border-top: 0; padding: 0 6px; }
  header { padding: 10px 14px; }
  header h1 { font-size: var(--kl-tx-l); }
  /* Antrastes pastaba telefone nuimama: ji atima eilute, o ta pati informacija
     matoma sriities viduje. */
  header .pastaba { display: none; }
  header .pirminis span { display: none; }
  main { padding: 14px; }
}

/* --- samata stalciuje --- */
.samata { display: grid; gap: 10px; }
.samatos-lentele .kiekis { white-space: nowrap; }
.samatos-lentele .kiekis input { width: 64px; text-align: right; font-size: var(--kl-tx-s); padding: 4px 6px; }
.samatos-lentele .veiksmas { width: 28px; }
.samatos-lentele .tuscia { color: var(--kl-faint); }
.samatos-lentele .trink { background: none; border: 0; color: var(--kl-faint); cursor: pointer; padding: 2px 4px; }
.samatos-lentele .trink:hover { color: var(--kl-klaida); }
/* Sumos — desineje, viena po kita: akis kainas lygina stulpeliu, ne eilute. */
.samatos-sumos { display: flex; justify-content: flex-end; gap: 14px; font-size: var(--kl-tx-s); color: var(--kl-grey); }
.samatos-sumos b { color: var(--kl-ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.nauja-eilute { display: flex; gap: 6px; }
.nauja-eilute select { flex: 1; min-width: 0; font-size: var(--kl-tx-s); padding: 5px 6px; }
.nauja-eilute input { width: 76px; font-size: var(--kl-tx-s); padding: 5px 6px; }

/* Stalcius telefone: sesi stulpeliai i 366 px netelpa. Nuimam VIENETO kaina — ji
   svarbi tikrinant, o telefone tikrinama retai; suma ir kiekis lieka.
   Ismatuota 2026-09-02: be sios taisykles stalciaus viduje uz krasto kyso 29 elementai. */
@media (max-width: 560px) {
  .samatos-lentele { table-layout: fixed; }
  .samatos-lentele .vnt-kaina { display: none; }
  .samatos-lentele th, .samatos-lentele td { padding: 6px 3px; }
  .samatos-lentele .kiekis input { width: 52px; }
  .nauja-eilute { flex-wrap: wrap; }
  .nauja-eilute select { flex: 1 0 100%; }
}

/* Grid/flex vaiko numatytasis minimalus plotis yra jo TURINYS, ne nulis — todel ilgas
   pavadinimas lenteleje isstumia ja uz stalciaus krasto. Ismatuota 2026-09-02: 38 (360 px)
   ir 40 (1440 px) elementu uz krasto BE siu triju eiluciu. Ta pati liga jau buvo pagauta
   agento lange vertikaliai; cia ji horizontali. */
.samata, .samata > *, .samata > * > * { min-width: 0; }
.samatos-lentele { table-layout: fixed; width: 100%; }
.samatos-lentele .pav { overflow-wrap: anywhere; }
.samatos-lentele .kodas { overflow-wrap: anywhere; white-space: normal; }

/* `table-layout: fixed` be aiskiu plociu dalija stulpelius PO LYGIAI — todel kodas
   gavo tiek pat, kiek pavadinimas, ir pavadinimai luzo i penkias eilutes. Plociai
   duodami antrastei: fiksuota lentele ima juos is pirmos eilutes. */
.samatos-lentele th.kodas { width: 21%; }
.samatos-lentele th.pav { width: 33%; }
.samatos-lentele th.kiekis { width: 17%; }
.samatos-lentele th.vnt-kaina { width: 13%; }
.samatos-lentele th.suma { width: 14%; }
.samatos-lentele th.veiksmas { width: 2%; }
.samatos-lentele .kodas { font-size: var(--kl-tx-xs); }
.samatos-sumos { padding-top: 8px; border-top: 1px solid var(--kl-rule); }
@media (max-width: 560px) {
  .samatos-lentele th.kodas { width: 26%; }
  .samatos-lentele th.pav { width: 36%; }
  .samatos-lentele th.kiekis { width: 21%; }
  .samatos-lentele th.suma { width: 17%; }
}