/* ---------------------------------------------------------------------------
   Tema. Tamsi tema yra numatytoji (:root). Šviesi tema – :root[data-theme=light].
   Visos spalvos ateina tik iš šių kintamųjų.
   --------------------------------------------------------------------------- */
:root {
  color-scheme: dark;

  /* pagrindai */
  --bg: #0f141b;          /* gilus melsvai pilkas fonas (ne juodas) */
  --surface: #161d26;     /* kortelės */
  --surface-2: #1d2631;   /* pakelti paviršiai: hover, laukai, žymos */
  --surface-3: #24303d;   /* aukščiausias: pasirinktas įrašas */

  /* linijos */
  --line: #2a3542;
  --line-strong: #3a4757;

  /* tekstas */
  --ink: #e6ebf1;         /* pirminis (beveik baltas) */
  --ink-2: #b3c0ce;       /* antrinis */
  --muted: #8794a3;       /* prislopintas */

  /* akcentas */
  --accent: #5aa2e0;
  --accent-hover: #74b3ea;
  --accent-ink: #0b1219;  /* tekstas ant akcento */

  /* semantika + minkšti variantai */
  --ok: #58cc95;
  --ok-soft: #152c22;
  --ok-line: #2b6349;
  --warn: #e2b164;
  --warn-soft: #2e2617;
  --warn-line: #5e4a24;
  --bad: #f0857c;
  --bad-soft: #33201f;
  --bad-line: #6e3a35;

  /* pagalbiniai */
  --track: #232d39;       /* juostų / grafikų fonas */
  --img-frame: #1d2631;   /* rėmelis po peržiūros paveikslėliu */
  --code-bg: #1d2631;
  --code-ink: #cfe0f0;
  --shadow: 0 1px 2px rgba(0, 0, 0, .45);

  --radius: 6px;
}

:root[data-theme="light"] {
  color-scheme: light;

  --bg: #f4f5f7;
  --surface: #ffffff;
  --surface-2: #eef1f5;
  --surface-3: #e8f0f8;

  --line: #d8dbe0;
  --line-strong: #c2c7d0;

  --ink: #1c2126;
  --ink-2: #414b57;
  --muted: #667080;

  --accent: #17558f;
  --accent-hover: #1b6ab4;
  --accent-ink: #ffffff;

  --ok: #1c7a4a;
  --ok-soft: #e6f4ec;
  --ok-line: #b6ddc7;
  --warn: #a86a00;
  --warn-soft: #fff4e0;
  --warn-line: #f0d5a5;
  --bad: #b3261e;
  --bad-soft: #fdecea;
  --bad-line: #f2c0bb;

  --track: #e7eaee;
  --img-frame: #ffffff;
  --code-bg: #f1f3f6;
  --code-ink: #24303d;
  --shadow: 0 1px 2px rgba(20, 30, 45, .06);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.45 -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
a { color: var(--accent); }
a:hover { color: var(--accent-hover); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
::selection { background: var(--accent); color: var(--accent-ink); }

header.top {
  display: flex; align-items: center; gap: 24px;
  background: var(--surface); border-bottom: 1px solid var(--line);
  padding: 10px 20px; position: sticky; top: 0; z-index: 10;
}
.brand { font-weight: 700; letter-spacing: .3px; color: var(--ink); }
.brand span { color: var(--muted); font-weight: 400; }
header nav { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
header nav a {
  padding: 6px 12px; border-radius: var(--radius); text-decoration: none;
  color: var(--ink);
}
header nav a:hover { background: var(--surface-2); color: var(--ink); }
header nav a.on { background: var(--accent); color: var(--accent-ink); }
.ver { color: var(--muted); font-size: 12px; white-space: nowrap; }

.theme-toggle {
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2);
  border-radius: var(--radius); padding: 4px 9px; font: inherit; line-height: 1.1;
  cursor: pointer;
}
.theme-toggle:hover { background: var(--surface-3); color: var(--ink); }

main { padding: 20px; max-width: 1500px; margin: 0 auto; }
h1 { font-size: 20px; margin: 0 0 16px; color: var(--ink); }
h2 { font-size: 15px; margin: 24px 0 8px; text-transform: uppercase;
     letter-spacing: .6px; color: var(--muted); }
h3 { font-size: 14px; margin: 0 0 8px; color: var(--ink); }

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 16px; margin-bottom: 16px;
  box-shadow: var(--shadow);
}
.grid { display: grid; gap: 14px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1400px) { .g5 { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 1100px) { .g5, .g4, .g3 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 700px) { .grid { grid-template-columns: 1fr; } }

.kpi { background: var(--surface); border: 1px solid var(--line);
       border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); }
.kpi .label { color: var(--muted); font-size: 12px; text-transform: uppercase;
              letter-spacing: .5px; }
.kpi .value { font-size: 30px; font-weight: 700; line-height: 1.15; margin-top: 4px;
              color: var(--ink); }
.kpi .sub { color: var(--muted); font-size: 12px; margin-top: 2px; }
.kpi.hero .value { font-size: 42px; }
.kpi.ok .value { color: var(--ok); }
.kpi.warn .value { color: var(--warn); }
.kpi.bad .value { color: var(--bad); }

table { width: 100%; border-collapse: collapse; font-size: 13px; color: var(--ink); }
th, td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--line); }
th { color: var(--muted); font-weight: 600; font-size: 11px;
     text-transform: uppercase; letter-spacing: .5px; }
tbody tr:hover { background: var(--surface-2); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table-wrap { overflow-x: auto; }

.tag { display: inline-block; padding: 1px 7px; border-radius: 10px; font-size: 11px;
       border: 1px solid var(--line-strong); background: var(--surface-2);
       color: var(--ink-2); }
.tag.auto { background: var(--ok-soft); border-color: var(--ok-line); color: var(--ok); }
.tag.ret { background: var(--bad-soft); border-color: var(--bad-line); color: var(--bad); }
.tag.match { background: var(--ok-soft); border-color: var(--ok-line); color: var(--ok); }
.tag.likely { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn); }
.tag.mismatch, .tag.none { background: var(--bad-soft); border-color: var(--bad-line);
                           color: var(--bad); }
/* Aplinkos ženkliukas: imitatorius pilkas, Training geltonas, Live žalias. */
.tag.env { text-decoration: none; letter-spacing: .3px; text-transform: uppercase; }
.tag.env-mock { background: var(--surface-2); border-color: var(--line-strong);
                color: var(--muted); }
.tag.env-training { background: var(--warn-soft); border-color: var(--warn-line);
                    color: var(--warn); }
.tag.env-live { background: var(--ok-soft); border-color: var(--ok-line); color: var(--ok); }
/* „Pasiruošimas“ punktų būsenos. */
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%;
       margin-right: 7px; background: var(--muted); vertical-align: middle; }
.dot.ok { background: var(--ok); }
.dot.bad { background: var(--bad); }
.dot.warn { background: var(--warn); }
.dot.manual { background: var(--muted); opacity: .55; }
.ready-list { list-style: none; margin: 0; padding: 0; }
.ready-list li { padding: 5px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.ready-list li:last-child { border-bottom: 0; }
.ready-list .val { color: var(--muted); font-size: 12px; }
.muted { color: var(--muted); }
.small { font-size: 12px; }

form.inline { display: inline; }
input[type=text], input[type=number], input[type=date], select, textarea {
  border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 5px 8px;
  font: inherit; background: var(--surface-2); color: var(--ink); width: 100%;
}
input[type=text]:focus, input[type=number]:focus, input[type=date]:focus,
select:focus, textarea:focus {
  border-color: var(--accent); outline: none;
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); }
label.field { display: block; margin-bottom: 10px; }
label.field span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 3px; }
button, .btn {
  border: 1px solid var(--line-strong); background: var(--surface-2);
  border-radius: var(--radius);
  padding: 6px 14px; font: inherit; cursor: pointer; text-decoration: none;
  color: var(--ink); display: inline-block;
}
button:hover, .btn:hover { background: var(--surface-3); color: var(--ink); }
button.primary, .btn.primary { background: var(--accent); border-color: var(--accent);
                               color: var(--accent-ink); }
button.primary:hover, .btn.primary:hover { background: var(--accent-hover);
                                           border-color: var(--accent-hover);
                                           color: var(--accent-ink); }
button.good { background: var(--ok); border-color: var(--ok); color: var(--accent-ink); }
button.danger { background: var(--bad); border-color: var(--bad); color: var(--accent-ink); }
button.good:hover, button.danger:hover { filter: brightness(1.08); }
.toolbar { display: flex; gap: 8px; align-items: end; flex-wrap: wrap; margin-bottom: 14px; }
.toolbar .field { width: auto; min-width: 130px; }

.spark { display: flex; align-items: flex-end; gap: 1px; height: 46px; }
.spark i { flex: 1; background: var(--accent); opacity: .75; min-height: 1px;
           border-radius: 1px; }

.review { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 16px;
          align-items: start; }
@media (max-width: 1000px) { .review { grid-template-columns: 1fr; } }
.qlist { max-height: 78vh; overflow: auto; }
.qitem { display: block; padding: 8px 10px; border-bottom: 1px solid var(--line);
         text-decoration: none; color: var(--ink); }
.qitem:hover { background: var(--surface-2); color: var(--ink); }
.qitem.on { background: var(--surface-3); color: var(--ink); }
.qitem .row1 { display: flex; justify-content: space-between; gap: 8px; }
img.label-img { max-width: 100%; border: 1px solid var(--line-strong);
                border-radius: var(--radius); background: var(--img-frame); }
/* modelio vertinimo peržiūra */
.evalgrid { display: grid; grid-template-columns: minmax(320px, 460px) minmax(0, 1fr);
            gap: 16px; align-items: start; }
@media (max-width: 1000px) { .evalgrid { grid-template-columns: 1fr; } }
img.eval-img { width: 100%; display: block; }
.evalcard { scroll-margin-top: 70px; }
.evalcard.on { border-color: var(--accent); }
.ok-ink { color: var(--ok); font-weight: 700; }
.bad-ink { color: var(--bad); font-weight: 700; }
.warn-ink { color: var(--warn); font-weight: 700; }
.tag.small { font-size: 10px; margin-left: 4px; }

code {
  background: var(--code-bg); color: var(--code-ink); border: 1px solid var(--line);
  border-radius: 4px; padding: 0 4px; font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
pre { background: var(--code-bg); color: var(--code-ink); border: 1px solid var(--line);
      border-radius: var(--radius); padding: 10px 12px; overflow-x: auto; }
pre code { background: none; border: 0; padding: 0; }
kbd { border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 4px;
      padding: 0 5px; font-size: 11px; background: var(--surface-2); color: var(--ink-2); }
.note { background: var(--warn-soft); border: 1px solid var(--warn-line);
        border-radius: var(--radius); padding: 8px 10px; font-size: 12px;
        color: var(--ink-2); }
.bar { height: 8px; background: var(--track); border-radius: 4px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--accent); }

/* Kalendoriaus ir flotilės lentelės (2026-09-19): daug stulpelių, todėl mažesnis
   šriftas ir „lipnūs" pirmi stulpeliai netaikomi – užtenka horizontalaus slinkimo. */
table tfoot th { border-top: 2px solid var(--line-strong); font-weight: 700; }


/* ---------------------------------------------------------------------------
   Mazgų kortelės ir lygių spalvos (2026-09-22). Flotilės apžvalga telefone turi
   būti skaitoma be horizontalaus slinkimo, todėl plačios lentelės vietoje –
   kortelės su „raktas / reikšmė" poromis.
   --------------------------------------------------------------------------- */
:root {
  --lvl-L1: #5aa2e0;      /* adresas */
  --lvl-L2: #58cc95;      /* gavėjas */
  --lvl-L3: #e2b164;      /* telefonas */
  --lvl--: #8794a3;       /* nežinomas režimas */
}

.nodes { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.card.node { border-left: 3px solid var(--line-strong); }
.card.node.ok { border-left-color: var(--ok); }
.card.node.warn { border-left-color: var(--warn); }
.card.node.bad { border-left-color: var(--bad); }

/* „Raktas / reikšmė" tinklelis: dvi skiltys plačiame ekrane, viena telefone. */
.kv { display: grid; gap: 2px 16px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.kv > div { display: flex; justify-content: space-between; gap: 8px; align-items: baseline;
            padding: 3px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.kv > div > span { color: var(--muted); font-size: 12px; white-space: nowrap; }
.kv > div > b { font-weight: 600; text-align: right; min-width: 0; overflow-wrap: anywhere; }

.tag.lvl { border-color: var(--line-strong); font-weight: 600; }
.tag.lvl-L1 { color: var(--lvl-L1); }
.tag.lvl-L2 { color: var(--lvl-L2); }
.tag.lvl-L3 { color: var(--lvl-L3); }

.note.bad { border-color: var(--bad-line); background: var(--bad-soft); }

details.card > summary { cursor: pointer; font-weight: 600; }

@media (max-width: 560px) {
  .nodes { grid-template-columns: 1fr; }
  .kv { grid-template-columns: 1fr; }
}