:root {
  --fonas: #f4f6f9;
  --plokste: #ffffff;
  --krastas: #dfe4ec;
  --krastas-rysku: #c3cbd9;
  --tekstas: #16202e;
  --blankus: #64748b;
  --pagrindine: #1f3a5f;
  --pagrindine-sviesi: #2f5686;
  --akcentas: #0f7b6c;
  --zalia: #0f7b6c;
  --geltona: #b45309;
  --raudona: #b42318;
  --melyna: #1d4ed8;
  --pilka: #64748b;
  --tamsi: #334155;
  --sesely: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .1);
  --radius: 8px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 14px/1.5 "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--tekstas);
  background: var(--fonas);
}

/* Bridgeview ženklas fone. Laikom `body::before`, o ne `background-image`, kad
   jis liktų stovėti vietoje slenkant ir kad būtų galima atskirai valdyti
   permatomumą. `pointer-events: none` būtinas: kitaip nematomas sluoksnis
   gaudytų pelės paspaudimus. */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: url('/logo-pilkas.svg') center 58% / min(560px, 52vw) no-repeat;
  opacity: .05;
}
#karkasas, .pranesimai, .perziura-fonas { position: relative; z-index: 1; }

/* Logotipo faile aplink piešinį yra nemažai tuščios vietos, todėl aukštis
   imamas su atsarga: matomas ženklas išeina maždaug perpus mažesnis. */
.prisijungimas .logo { display: block; width: 100%; max-width: 260px; margin: -18px auto 0; }
.prisijungimo-pav { text-align: center; color: var(--blankus); font-size: 13px;
                    margin: -14px 0 18px; }

button, input, select, textarea { font: inherit; color: inherit; }

/* ── Karkasas ────────────────────────────────────────────────────────────── */

/* Antraštė laužiasi į kelias eilutes.
   Su finansų skyriumi meniu punktų pasidarė šešiolika, ir vienoje eilutėje jie
   nebetelpa: paskutiniai iškeliaudavo už ekrano krašto, o „Atsijungti“ užlipdavo
   ant jų. Todėl fiksuotas aukštis pakeistas mažiausiu, o eilutė laužiasi. */
.virsus {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 5px 20px; min-height: 54px; row-gap: 2px;
  background: var(--pagrindine); color: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
}
.zenklas { font-weight: 700; letter-spacing: .3px; margin-right: 16px; white-space: nowrap; }
.zenklas span { opacity: .65; font-weight: 400; }
.virsus nav { display: flex; gap: 2px; flex: 1 1 auto; flex-wrap: wrap; }
.virsus nav a {
  color: #cbd5e1; text-decoration: none; padding: 7px 11px;
  border-radius: 6px; font-weight: 500; white-space: nowrap;
}
.virsus nav a:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.virsus nav a.aktyvus { background: rgba(255, 255, 255, .16); color: #fff; }
.virsus .stumti { margin-left: auto; }
.virsus .vartotojas { color: #cbd5e1; font-size: 13px; }
.virsus .vartotojas b { color: #fff; }

/* Turinys užima visą langą.
   Anksčiau čia stovėjo `max-width: 1600px; margin: 0 auto`, ir plačiame ekrane
   sąrašas likdavo siaura juosta su tuščiais laukais abipus. Jonas 2026-09-07:
   „padaryk taip, kad nebūtų viskas šone“. Lentelėms platus ekranas yra pliusas,
   todėl riba nuimta visai. */
main { padding: 20px 24px; }

/* Formos plačiame ekrane neišsitampo per visą ekrano plotį: septyniolika laukų
   vienoje eilutėje neskaitomi. Lentelės ir suvestinės ribos neturi. */
.laukai { max-width: 1500px; }

h1 { font-size: 21px; margin: 0 0 4px; font-weight: 650; }
h2 { font-size: 16px; margin: 0 0 12px; font-weight: 650; }
h3 { font-size: 13px; margin: 0 0 10px; font-weight: 650; text-transform: uppercase;
     letter-spacing: .5px; color: var(--blankus); }
a { color: var(--melyna); }

.antraste { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.antraste .stumti { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.paantraste { color: var(--blankus); font-size: 13px; }

.plokste {
  background: var(--plokste); border: 1px solid var(--krastas);
  border-radius: var(--radius); box-shadow: var(--sesely); padding: 16px; margin-bottom: 16px;
}
/* `clip`, ne `hidden`, ir tai ne skonio reikalas.
   `overflow: hidden` paverčia plokštę slinkimo konteineriu, o tada lentelės
   lipni antraštė (`position: sticky; top: --virsaus-aukstis`) kabinasi ne prie
   puslapio viršaus, o prie plokštės krašto ir nusileidžia 126 px žemyn, tai yra
   į lentelės vidurį, uždengdama antrą eilutę. `clip` apkarpo lygiai taip pat,
   bet slinkimo konteinerio nesukuria, todėl antraštė lieka savo vietoje. */
.plokste.tanki { padding: 0; overflow: clip; }

/* ── Mygtukai ────────────────────────────────────────────────────────────── */

.mygtukas {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border: 1px solid var(--krastas-rysku); border-radius: 6px;
  background: #fff; cursor: pointer; font-weight: 500; white-space: nowrap;
  transition: background .12s, border-color .12s;
}
.mygtukas:hover { background: #f1f4f8; }
.mygtukas.pirminis { background: var(--pagrindine); border-color: var(--pagrindine); color: #fff; }
.mygtukas.pirminis:hover { background: #17304f; }
.mygtukas.pavojingas { color: var(--raudona); border-color: #f2c4c0; }
.mygtukas.pavojingas:hover { background: #fef2f2; }
.mygtukas.mazas { padding: 5px 10px; font-size: 13px; }
.mygtukas:disabled { opacity: .5; cursor: not-allowed; }

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

.laukai { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 12px 14px; }
.laukas { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.laukas > label { font-size: 12px; font-weight: 600; color: #475569; }
.laukas > label .vnt { font-weight: 400; color: var(--blankus); }
.laukas .uzuomina { font-size: 11px; color: var(--blankus); line-height: 1.35; }
.laukas.placiai { grid-column: 1 / -1; }

input[type=text], input[type=number], input[type=date], input[type=password], select, textarea {
  padding: 7px 9px; border: 1px solid var(--krastas-rysku); border-radius: 6px;
  background: #fff; width: 100%; min-width: 0;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid rgba(31, 58, 95, .25); outline-offset: -1px; border-color: var(--pagrindine);
}
textarea { resize: vertical; min-height: 62px; }
.raktas { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 11px; color: #94a3b8; }

.filtrai {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  padding: 12px 16px; background: var(--plokste);
  border: 1px solid var(--krastas); border-radius: var(--radius); margin-bottom: 14px;
}
.filtrai input[type=text], .filtrai select { width: auto; min-width: 140px; }
.filtrai .paieska { flex: 1; min-width: 220px; }

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

.lentele { width: 100%; border-collapse: collapse; }
.lentele th {
  text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .4px;
  color: var(--blankus); font-weight: 650; padding: 10px 12px;
  border-bottom: 1px solid var(--krastas); background: #fafbfd; position: sticky;
  /* Meniu juosta auga, kai skilčių daugėja ir jos persilaužia į antrą eilutę.
     Tikrą jos aukštį įrašo `app.js`, o 54 px lieka tik kaip atsarginė reikšmė. */
  top: var(--virsaus-aukstis, 54px);
}
.lentele td { padding: 9px 12px; border-bottom: 1px solid #eef1f6; vertical-align: middle; }
.lentele tbody tr:hover { background: #f7f9fc; cursor: pointer; }
/* Suma niekada nesilaužo per dvi eilutes: „372 399,96 €“, perskeltas ties
   euro ženklu, akimirkai atrodo kaip du skirtingi skaičiai. */
.lentele .skaicius { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lentele .blankus { color: var(--blankus); }
.lentele a { font-weight: 550; text-decoration: none; }
.lentele a:hover { text-decoration: underline; }

.tuscia { padding: 44px 20px; text-align: center; color: var(--blankus); }

/* ── Ženkliukai ──────────────────────────────────────────────────────────── */

.zenkliukas {
  display: inline-block; padding: 2px 9px; border-radius: 20px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
  background: #eef1f6; color: var(--tamsi);
}
.zenkliukas.zalia   { background: #e3f4f0; color: var(--zalia); }
.zenkliukas.geltona { background: #fdf3e4; color: var(--geltona); }
.zenkliukas.raudona { background: #fdeceb; color: var(--raudona); }
.zenkliukas.melyna  { background: #e8eefc; color: var(--melyna); }
.zenkliukas.pilka   { background: #eef1f6; color: var(--pilka); }
.zenkliukas.tamsi   { background: #e2e8f0; color: var(--tamsi); }
/* Golden product: tiekėjo technika, kurią galim siūlyti be išankstinio pirkimo */
.zenkliukas.auksine { background: #fdf4d7; color: #8a6400; }

/* ── Kortelės ────────────────────────────────────────────────────────────── */

.tinklelis { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.kortele {
  background: var(--plokste); border: 1px solid var(--krastas); border-radius: var(--radius);
  overflow: hidden; cursor: pointer; transition: box-shadow .15s, transform .15s;
  display: flex; flex-direction: column;
}
.kortele:hover { box-shadow: 0 4px 12px rgba(16, 24, 40, .12); transform: translateY(-1px); }
.kortele .virselis {
  aspect-ratio: 4 / 3; background: #e8ecf2 center/cover no-repeat;
  display: flex; align-items: center; justify-content: center; color: #94a3b8; font-size: 12px;
}
.kortele .kunas { padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.kortele .pav { font-weight: 620; line-height: 1.3; }
.kortele .smulkiai { font-size: 12px; color: var(--blankus); }
.kortele .apacia { margin-top: auto; padding-top: 6px; display: flex; justify-content: space-between;
                   align-items: center; gap: 8px; }

.rodikliai { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 18px; }
.rodiklis { background: var(--plokste); border: 1px solid var(--krastas); border-radius: var(--radius);
            padding: 14px 16px; box-shadow: var(--sesely); }
.rodiklis .reiksme { font-size: 26px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.rodiklis .pav { font-size: 12px; color: var(--blankus); margin-top: 2px; }

/* Kortelės dvi skiltys. Riba reikalinga tik labai plačiam ekranui: be jos
   forma ir istorija atsiduria priešinguose 4K monitoriaus kraštuose, ir akims
   tenka keliauti per tuščią vidurį. Sąrašų lentelės ribos neturi. */
.stulpeliai { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; align-items: start;
              max-width: 2100px; }
@media (max-width: 1100px) { .stulpeliai { grid-template-columns: 1fr; } }

/* ── Nuotraukos ──────────────────────────────────────────────────────────── */

.nuotrauku-tinklelis { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.nuotrauka {
  position: relative; aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden;
  border: 1px solid var(--krastas); background: #e8ecf2;
}
.nuotrauka img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }
.nuotrauka .veiksmai {
  position: absolute; inset: auto 0 0 0; display: flex; gap: 4px; padding: 5px;
  background: linear-gradient(transparent, rgba(0, 0, 0, .68)); opacity: 0; transition: opacity .15s;
}
.nuotrauka:hover .veiksmai { opacity: 1; }
.nuotrauka .veiksmai button {
  flex: 1; padding: 4px 6px; font-size: 11px; border: 0; border-radius: 4px;
  background: rgba(255, 255, 255, .92); cursor: pointer; font-weight: 600;
}
.nuotrauka .veiksmai button:hover { background: #fff; }
.nuotrauka.pagrindine { outline: 3px solid var(--akcentas); outline-offset: -3px; }
.nuotrauka .zyme {
  position: absolute; top: 6px; left: 6px; background: var(--akcentas); color: #fff;
  font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 4px; letter-spacing: .3px;
}

.numetimas {
  border: 2px dashed var(--krastas-rysku); border-radius: var(--radius);
  padding: 26px; text-align: center; color: var(--blankus); cursor: pointer;
  transition: border-color .15s, background .15s;
}
.numetimas:hover, .numetimas.virs { border-color: var(--pagrindine); background: #f0f4fa; color: var(--pagrindine); }

.perziura-fonas {
  position: fixed; inset: 0; background: rgba(8, 12, 20, .93); z-index: 100;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.perziura-fonas img { max-width: 100%; max-height: 100%; object-fit: contain; }
.perziura-fonas .uzdaryti {
  position: absolute; top: 16px; right: 20px; background: rgba(255, 255, 255, .12);
  color: #fff; border: 0; width: 38px; height: 38px; border-radius: 50%; font-size: 20px; cursor: pointer;
}
.perziura-fonas .rodykle {
  position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255, 255, 255, .12);
  color: #fff; border: 0; width: 46px; height: 68px; font-size: 26px; cursor: pointer; border-radius: 6px;
}
.perziura-fonas .rodykle.kaire { left: 16px; }
.perziura-fonas .rodykle.desine { right: 16px; }

/* ── Dokumentai ──────────────────────────────────────────────────────────── */

.dok-grupe { margin-bottom: 16px; }
.dok-grupe:last-child { margin-bottom: 0; }
.dok-grupe h4 {
  margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .4px;
  text-transform: uppercase; color: var(--pagrindine);
  padding-bottom: 4px; border-bottom: 1px solid var(--krastas);
}

.dok-irasas {
  display: flex; align-items: center; gap: 10px; padding: 8px;
  border: 1px solid var(--krastas); border-radius: 6px; margin-bottom: 8px;
  background: #fff;
}
.dok-irasas:last-child { margin-bottom: 0; }

.dok-virselis {
  width: 62px; height: 62px; flex: none; border-radius: 4px; overflow: hidden;
  background: #eef1f6; display: flex; align-items: center; justify-content: center;
}
.dok-virselis img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.dok-zenklas {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; color: var(--raudona); letter-spacing: .5px;
}
.dok-zenklas span { font-size: 10px; font-weight: 500; color: var(--blankus); margin-top: 2px; }

.dok-info { flex: 1; min-width: 0; font-size: 13px; }
.dok-info b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dok-info .kas { color: var(--blankus); font-size: 11px; line-height: 1.4; }

.dok-veiksmai { display: flex; flex-direction: column; gap: 4px; flex: none; }
.dok-veiksmai .mygtukas { text-decoration: none; justify-content: center; font-size: 12px; padding: 4px 8px; }

/* ── Video ───────────────────────────────────────────────────────────────── */

.video-irasas {
  border: 1px solid var(--krastas); border-radius: var(--radius);
  overflow: hidden; margin-bottom: 12px; background: #0b1220;
}
.video-irasas video { width: 100%; display: block; max-height: 340px; background: #000; }
.video-apacia {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  background: var(--plokste); border-top: 1px solid var(--krastas); flex-wrap: wrap;
}
.video-apacia .video-info { flex: 1; min-width: 0; font-size: 13px; }
.video-apacia .video-info b { display: block; overflow: hidden;
                              text-overflow: ellipsis; white-space: nowrap; }
.video-apacia .kas { color: var(--blankus); font-size: 11px; }
.video-apacia .mygtukas { text-decoration: none; }

/* ── Įvykiai ─────────────────────────────────────────────────────────────── */

.ivykiai { display: flex; flex-direction: column; gap: 10px; max-height: 460px; overflow-y: auto; }
.ivykis { display: flex; gap: 10px; font-size: 13px; padding-bottom: 10px; border-bottom: 1px solid #eef1f6; }
.ivykis:last-child { border-bottom: 0; }
.ivykis .laikas { color: var(--blankus); font-size: 11px; white-space: nowrap; min-width: 76px;
                  font-variant-numeric: tabular-nums; }
.ivykis .turinys { flex: 1; min-width: 0; }
.ivykis .kas { color: var(--blankus); font-size: 11px; }

/* ── Prisijungimas ───────────────────────────────────────────────────────── */

.prisijungimas { max-width: 340px; margin: 90px auto; }
.prisijungimas .plokste { padding: 26px; }
.prisijungimas h1 { text-align: center; margin-bottom: 20px; }
.prisijungimas .laukas { margin-bottom: 14px; }
.prisijungimas .mygtukas { width: 100%; justify-content: center; }

/* ── Pranešimai ──────────────────────────────────────────────────────────── */

.pranesimai { position: fixed; right: 18px; bottom: 18px; z-index: 200; display: flex;
              flex-direction: column; gap: 8px; }
.pranesimas {
  background: var(--tamsi); color: #fff; padding: 11px 16px; border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25); max-width: 380px; font-size: 13px;
  animation: ikilti .2s ease-out;
}
.pranesimas.klaida { background: var(--raudona); }
.pranesimas.gerai { background: var(--zalia); }
@keyframes ikilti { from { transform: translateY(8px); opacity: 0; } }

.krovimas { padding: 44px; text-align: center; color: var(--blankus); }
.juosta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.grupe { margin-bottom: 22px; }
.grupe:last-child { margin-bottom: 0; }

/* ── Pardavimų dalis ─────────────────────────────────────────────────────── */

/* Suvestinės lentelė eina virš didžiosios, todėl jos antraštė neprilimpa:
   kitaip apatinės lentelės antraštė uždengtų viršutinės eilutes. */
.plokste.tanki.santrauka .lentele th { position: static; }

/* Komandos langai: po vieną kiekvienam vadybininkui */
.komandos-tinklelis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px; margin-bottom: 18px;
}
.komandos-kortele {
  background: var(--plokste); border: 1px solid var(--krastas); border-radius: var(--radius);
  box-shadow: var(--sesely); padding: 14px 16px; text-decoration: none; color: inherit;
  display: flex; flex-direction: column; gap: 12px;
  transition: box-shadow .15s, transform .15s;
}
.komandos-kortele:hover { box-shadow: 0 4px 12px rgba(16, 24, 40, .12); transform: translateY(-1px); }
.komandos-kortele.tylu { opacity: .72; }
.komandos-kortele .virsus { display: flex; justify-content: space-between; gap: 10px; }
.komandos-kortele .vardas { font-weight: 650; font-size: 15px; }
.komandos-kortele .rinka { font-size: 12px; color: var(--blankus); }
.komandos-kortele .aktyvumas { text-align: right; white-space: nowrap; }
.komandos-kortele .aktyvumas b { font-size: 20px; }
.komandos-kortele .aktyvumas span { font-size: 12px; color: var(--blankus); margin-left: 3px; }

.komandos-kortele .skaiciai { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.komandos-kortele .skaiciai div { display: flex; flex-direction: column; }
.komandos-kortele .skaiciai b { font-size: 15px; font-variant-numeric: tabular-nums; }
.komandos-kortele .skaiciai span { font-size: 11px; color: var(--blankus); }
.komandos-kortele .apacia { font-size: 11px; color: var(--blankus);
                            border-top: 1px solid #eef1f6; padding-top: 8px; }

/* Vadybininko aktyvumas per 30 dienų */
.dienos { display: flex; align-items: flex-end; gap: 3px; height: 86px; }
.diena { flex: 1; height: 100%; display: flex; align-items: flex-end;
         background: #f1f4f8; border-radius: 3px; overflow: hidden; }
.diena .stulpelis { width: 100%; background: var(--pagrindine); border-radius: 3px; min-height: 2px; }

/* Technikos rinkimosi langas pasiūlyme */
.rinkimas {
  max-width: 980px; width: 100%; max-height: 88vh;
  display: flex; flex-direction: column; margin: 0;
}
.rinkimas .filtrai { margin-bottom: 0; padding: 10px 12px; }
.rinkimo-sarasas { flex: 1; overflow-y: auto; min-height: 140px; }

.rinkimo-eilute {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 10px; border-bottom: 1px solid #eef1f6; cursor: pointer;
}
.rinkimo-eilute:hover { background: #f7f9fc; }
.rinkimo-eilute.jau { opacity: .55; cursor: default; }
.rinkimo-eilute input[type=checkbox] { width: 17px; height: 17px; flex: none; cursor: pointer; }

.rinkimo-virselis {
  width: 78px; height: 54px; flex: none; border-radius: 5px; overflow: hidden;
  background: #eef1f6; display: flex; align-items: center; justify-content: center;
}
.rinkimo-virselis img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rinkimo-virselis .be-nuotraukos { font-size: 11px; color: var(--blankus); }

.rinkimo-info { flex: 1; min-width: 0; font-size: 13px; }
.rinkimo-info b { display: block; }
.rinkimo-info .kas { color: var(--blankus); font-size: 12px; }
.rinkimo-kaina {
  flex: none; text-align: right; font-size: 13px;
  display: flex; flex-direction: column; align-items: flex-end; gap: 3px;
}
.rinkimo-kaina .kas { color: var(--blankus); font-size: 11px; }

/* Riba tarp pirkimų ir pardavimų nuorodų viršutinėje juostoje */
.virsus nav .skirtukas {
  width: 1px; align-self: stretch; margin: 10px 8px;
  background: rgba(255, 255, 255, .22);
}

/* Aštuoni punktai netelpa siaurame ekrane, todėl ten juosta suglaudžiama */
@media (max-width: 1180px) {
  .virsus nav a { padding: 7px 9px; font-size: 13px; }
  .zenklas span { display: none; }
}
@media (max-width: 900px) {
  .virsus { height: auto; flex-wrap: wrap; padding: 8px 12px; }
  .virsus nav { flex-wrap: wrap; }
}