/* Venipak Korekcijų portalas v2 — design system (see docs/DESIGN.md) */
:root{
  --paper:#f8f9fa; --paper-2:#eef0f3; --surface:#ffffff;
  --ink:#1a1a1a; --ink-2:#626d77; --ink-3:#707983;
  --line:#e5e8ec; --line-2:#d4d9df;
  --accent:#643395; --accent-hover:#4a2670; --accent-soft:#efeaf6; --accent-ink:#4a2670;
  --lime:#e7f43b; --lime-ink:#333a06;
  --good:#427a52; --good-soft:#ecf3ee;
  --warn-bg:#f7ecd4; --warn-ink:#8a6116;
  --bad:#b03a2e; --bad-soft:#f9ece9;
  --info-soft:#e8ecf1; --info-ink:#3f4c5e;
  --radius:10px; --radius-s:8px;
  --shadow:0 1px 2px rgba(74,38,112,.05),0 4px 16px rgba(74,38,112,.05);
  --shadow-lg:0 4px 12px rgba(74,38,112,.10),0 16px 48px rgba(74,38,112,.16);
  --font-display:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --font-text:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --font-mono:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%;max-width:100%;overflow-x:hidden}
body{font-family:var(--font-text);font-size:14px;color:var(--ink);background:var(--paper);
  -webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;margin:0}
a{color:var(--accent-ink)}
button{font:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
::selection{background:var(--lime);color:var(--lime-ink)}

/* ---------- shell ---------- */
.app{display:flex;min-height:100vh;width:100%;max-width:100vw;min-width:0;overflow-x:clip}
.sidebar{width:232px;flex-shrink:0;background:var(--paper-2);border-right:1px solid var(--line);
  position:sticky;top:0;height:100vh;overflow-y:auto;display:flex;flex-direction:column}
.brand{padding:22px 20px 16px}
.brand .logo{font-family:var(--font-display);font-size:19px;font-weight:700;color:var(--ink)}
.brand .logo em{color:var(--accent);font-style:normal}
.brand small{display:block;color:var(--ink-2);font-size:11.5px;margin-top:3px;line-height:1.35}
.nav{padding:6px 10px;flex:1}
.nav .grp{padding:16px 10px 6px;font-size:10.5px;text-transform:uppercase;
  letter-spacing:.12em;color:var(--ink-3);font-weight:600}
.nav .nav-link{display:flex;align-items:center;gap:10px;padding:8px 10px;margin:1px 0;width:100%;
  color:var(--ink-2);text-decoration:none;font-size:13.5px;border-radius:var(--radius-s);
  cursor:pointer;border:1px solid transparent;background:transparent;text-align:left}
.nav .nav-link svg{width:16px;height:16px;flex-shrink:0;opacity:.75}
.nav .nav-link:hover{background:rgba(31,30,29,.05);color:var(--ink)}
.nav .nav-link.active{background:var(--surface);color:var(--accent-ink);font-weight:600;
  border-color:var(--line);box-shadow:inset 3px 0 0 var(--lime),var(--shadow)}
.nav .nav-link.active svg{opacity:1;color:var(--accent)}
.nav .badge{margin-left:auto;background:var(--warn-bg);color:var(--warn-ink);
  font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:99px}
.sidebar .userbox{padding:14px 20px;border-top:1px solid var(--line);font-size:12.5px}
.sidebar .userbox .name{font-weight:600}
.sidebar .userbox .role{color:var(--ink-2)}
.sidebar .userbox button{margin-top:8px}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{background:color-mix(in srgb,var(--paper) 86%,transparent);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);padding:14px 28px;display:flex;align-items:center;
  gap:14px;position:sticky;top:0;z-index:20}
.topbar .page-title{font-family:var(--font-display);font-size:21px;font-weight:700;letter-spacing:-.02em;
  flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.content{padding:26px 28px 60px;max-width:1480px;width:100%;margin:0 auto}
.nav-toggle,.sidebar-veil{display:none}

/* The card editor owns the viewport. The generic portal chrome is removed so
   the 224 / fluid / 360 workspace matches the handoff and body never develops
   a second, blank scroll range. */
body.workspace-open{overflow:hidden}
.app.card-workspace-mode{position:fixed;inset:0;height:100dvh;min-height:0;background:var(--surface)}
.app.card-workspace-mode>.sidebar,
.app.card-workspace-mode .topbar,
.app.card-workspace-mode>.sidebar-veil{display:none}
.app.card-workspace-mode .main{height:100%;min-height:0}
.app.card-workspace-mode .content{height:100%;max-width:none;margin:0;padding:0;min-height:0}
.app.card-workspace-mode .content>div{height:100%;min-height:0}

/* ---------- controls ---------- */
.btn{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:var(--radius-s);
  border:1px solid var(--accent);background:var(--accent);color:#fff;cursor:pointer;
  font-size:13px;font-weight:600;transition:background .15s,border-color .15s}
.btn:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.sec{background:var(--surface);color:var(--ink);border-color:var(--line-2)}
.btn.sec:hover{background:var(--paper-2)}
.btn.ghost{background:transparent;color:var(--ink-2);border-color:transparent}
.btn.ghost:hover{background:rgba(31,30,29,.06);color:var(--ink)}
.btn.danger{background:var(--bad);border-color:var(--bad)}
.btn.sm{padding:4px 10px;font-size:12px}
select,input[type=text],input[type=number],input[type=password],textarea{
  padding:7px 10px;border:1px solid var(--line-2);border-radius:var(--radius-s);
  background:var(--surface);color:var(--ink);font:inherit;font-size:13px}
select:focus,input:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)}
label.lbl{display:block;font-size:12px;color:var(--ink-2);margin-bottom:4px;font-weight:600}
.inline{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* ---------- cards & layout ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px;margin-bottom:18px;box-shadow:var(--shadow)}
.card h2{font-size:16.5px;margin-bottom:2px}
.card .sub{color:var(--ink-2);font-size:12.5px;margin-bottom:14px;line-height:1.45}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.grid-ov{display:grid;grid-template-columns:1.55fr 1fr;gap:16px;align-items:start}
@media(max-width:1100px){.grid2,.grid3,.grid-ov{grid-template-columns:1fr}}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:18px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px;box-shadow:var(--shadow)}
.kpi .l{font-size:11px;color:var(--ink-2);text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.kpi .v{font-family:var(--font-display);font-size:26px;font-weight:700;margin-top:6px;
  font-variant-numeric:tabular-nums}
.kpi .d{font-size:12px;color:var(--ink-2);margin-top:3px}
.kpi.accent .v{color:var(--accent-ink)}

/* ---------- tables ---------- */
.tablewrap{overflow:auto;max-height:70vh;border:1px solid var(--line);border-radius:var(--radius-s)}
table{border-collapse:separate;border-spacing:0;width:100%;font-size:12.8px}
th,td{padding:7px 10px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
th:first-child,td:first-child{text-align:left}
thead th{background:var(--paper-2);color:var(--ink-2);position:sticky;top:0;z-index:2;
  font-weight:600;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em}
tbody td{font-variant-numeric:tabular-nums;font-family:var(--font-mono);font-size:12.3px}
tbody td:first-child,tbody td.txt{font-family:var(--font-text);font-size:12.8px}
tbody th[scope=row]{font-family:var(--font-text);font-size:12.8px;font-weight:500;text-align:left;
  color:var(--ink);background:var(--surface);text-transform:none;letter-spacing:0}
tbody tr:hover td{background:rgba(31,30,29,.025)}
tr.total td{font-weight:700;background:var(--paper-2)}
tr.total th[scope=row]{font-weight:700;background:var(--paper-2)}
tr.cnt td{color:var(--ink-2)}
td.neg{color:var(--bad)}
td.month-empty{background:var(--warn-bg)}
th.month-empty{background:var(--warn-bg);color:var(--warn-ink)}
td.clickable{cursor:pointer}
td.clickable:hover{background:var(--accent-soft)!important;box-shadow:inset 0 0 0 1px var(--accent)}
td.adj-mark{position:relative}
td.adj-mark::after{content:'';position:absolute;top:3px;right:3px;width:6px;height:6px;
  border-radius:50%;background:var(--accent)}

/* ---------- pills & banners ---------- */
.pill{display:inline-block;padding:2px 9px;border-radius:99px;font-size:11px;font-weight:600;
  font-family:var(--font-text)}
.pill.warn{background:var(--warn-bg);color:var(--warn-ink)}
.pill.ok{background:var(--good-soft);color:var(--good)}
.pill.bad{background:var(--bad-soft);color:var(--bad)}
.pill.info{background:var(--info-soft);color:var(--info-ink)}
.pill.accent{background:var(--accent-soft);color:var(--accent-ink)}
.banner{border:1px solid;border-radius:var(--radius-s);padding:10px 14px;font-size:12.8px;
  margin-bottom:14px;line-height:1.5}
.banner svg{width:15px;height:15px;flex-shrink:0;vertical-align:-3px;margin-right:4px}
.btn svg{width:15px;height:15px;flex-shrink:0}
.drop svg{width:40px;height:40px;color:var(--ink-3)}
.empty svg{width:36px;height:36px;color:var(--ink-3)}
.banner.warn{background:var(--warn-bg);border-color:#ecd9a8;color:var(--warn-ink)}
.banner.info{background:var(--info-soft);border-color:#d5dae2;color:var(--info-ink)}
.banner.good{background:var(--good-soft);border-color:#cfe2d5;color:var(--good)}
.banner.bad{background:var(--bad-soft);border-color:#eccfca;color:var(--bad)}
.muted{color:var(--ink-2)}.small{font-size:12px}
code{background:var(--paper-2);padding:1px 6px;border-radius:5px;font-family:var(--font-mono);font-size:12px}

/* ---------- drawer (cell drill-down) ---------- */
.drawer-veil{position:fixed;inset:0;background:rgba(31,30,29,.32);z-index:40;
  animation:fade .18s ease}
.drawer{position:fixed;top:0;right:0;bottom:0;width:520px;max-width:92vw;background:var(--surface);
  z-index:41;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;
  animation:slidein .2s ease}
.drawer header{padding:18px 22px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
.drawer header h2{font-size:17px;flex:1}
.drawer .body{padding:18px 22px;overflow-y:auto;flex:1}
@keyframes slidein{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
@keyframes fade{from{opacity:0}to{opacity:1}}
.waterfall{display:flex;flex-direction:column;gap:6px;margin:10px 0 16px}
.waterfall .row{display:flex;justify-content:space-between;padding:8px 12px;
  border:1px solid var(--line);border-radius:var(--radius-s);font-variant-numeric:tabular-nums}
.waterfall .row.final{background:var(--paper-2);font-weight:700}
.waterfall .row.adj{background:var(--accent-soft);border-color:#ded2ec}

/* ---------- modal ---------- */
.modal-veil{position:fixed;inset:0;background:rgba(31,30,29,.4);z-index:50;display:flex;
  align-items:center;justify-content:center;animation:fade .15s ease}
.modal{background:var(--surface);border-radius:14px;box-shadow:var(--shadow-lg);
  width:480px;max-width:92vw;max-height:88vh;overflow:auto;padding:24px}
.modal h2{font-size:18px;margin-bottom:6px}
.modal .sub{color:var(--ink-2);font-size:13px;margin-bottom:16px;line-height:1.5}
.modal .actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}
.modal-error{margin-top:14px;padding:9px 11px;border:1px solid #eccfca;border-radius:var(--radius-s);
  background:var(--bad-soft);color:var(--bad);font-size:12.5px;font-weight:600}
.field{margin-bottom:13px}

/* ---------- toast ---------- */
.toasts{position:fixed;bottom:22px;right:22px;z-index:60;display:flex;flex-direction:column;gap:8px}
.toast{background:var(--ink);color:var(--paper);padding:11px 16px;border-radius:10px;
  box-shadow:var(--shadow-lg);font-size:13px;animation:fade .2s ease;max-width:380px}
.toast.error{background:var(--bad)}
.toast.ok{background:var(--good)}

/* ---------- login ---------- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--paper)}
.login{width:380px;background:var(--surface);border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--shadow-lg);padding:34px}
.login h1{font-size:24px;margin-bottom:4px}
.login .sub{color:var(--ink-2);font-size:13px;margin-bottom:22px}
.login .field input{width:100%}
.login .btn{width:100%;justify-content:center;margin-top:6px;padding:10px}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;
  margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* ---------- dropzone & upload ---------- */
.drop{border:2px dashed var(--line-2);border-radius:var(--radius);padding:36px;text-align:center;
  color:var(--ink-2);background:var(--surface);cursor:pointer;transition:border-color .15s,background .15s}
.drop:hover,.drop.over{border-color:var(--accent);background:var(--accent-soft)}
.steps{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.step{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-3);font-weight:600}
.step .n{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line-2);
  display:flex;align-items:center;justify-content:center;font-size:11.5px}
.step.active{color:var(--accent-ink)}
.step.active .n{border-color:var(--accent);background:var(--accent);color:#fff}
.step.done{color:var(--good)}
.step.done .n{border-color:var(--good);background:var(--good-soft)}
.step .sep{width:26px;height:1px;background:var(--line-2)}

/* ---------- charts ---------- */
.chart svg{display:block;width:100%}
.chart text{font-family:var(--font-text)}
.legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;font-size:11.5px;color:var(--ink-2)}
.legend .sw{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}

/* ---------- skeleton & empty ---------- */
.skel{background:linear-gradient(90deg,var(--paper-2) 25%,#e6e9ed 50%,var(--paper-2) 75%);
  background-size:200% 100%;animation:sk 1.2s infinite;border-radius:var(--radius-s);min-height:60px}
@keyframes sk{from{background-position:200% 0}to{background-position:-200% 0}}
.empty{padding:44px;text-align:center;color:var(--ink-2)}
.empty .big{font-family:var(--font-display);font-size:17px;color:var(--ink);margin-bottom:6px}
.section-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:16px;flex-wrap:wrap}
.section-tabs button{padding:8px 14px;border:none;background:none;cursor:pointer;font-size:13px;
  color:var(--ink-2);border-bottom:2px solid transparent;margin-bottom:-1px;font-weight:600}
.section-tabs button.active{color:var(--accent-ink);border-bottom-color:var(--accent)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 18px;font-size:12.8px}
.kv dt{color:var(--ink-2)}.kv dd{margin:0;font-variant-numeric:tabular-nums}
@media print{.sidebar,.topbar{display:none}}

/* ---------- chart tuning knobs (charts.js) ---------- */
:root{
  --area-op:.126; --minor-op:1; --vlabel-op:1; --prior-op:1;
  --soft-bg:color-mix(in srgb,var(--accent) 4.2%,#fff);
  --soft-line:color-mix(in srgb,var(--accent) 10.5%,#fff);
}

/* ---------- KPI additions ---------- */
.kpi.accent{background:var(--soft-bg);border-color:var(--soft-line)}
.kpi .delta{font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
.kpi .delta.good{color:var(--good)}
.kpi .delta.bad{color:var(--bad)}
.kpi .delta-sub{font-size:11px;color:var(--ink-3);font-weight:400;margin-left:4px}
.kpi .spark{display:block;width:100%;height:28px;margin-top:5px}

/* 12-segment months strip (clickable -> report) */
.seg{display:flex;gap:2.5px;margin-top:7px}
.seg i{flex:1;height:9px;border-radius:2px;background:var(--accent);display:block;padding:0}
.seg i.miss{background:var(--warn-bg);box-shadow:inset 0 0 0 1px #ecd9a8}
.seg-wrap{cursor:pointer;border-radius:6px;text-decoration:none;color:inherit;display:block}
.seg-wrap:hover .seg i:not(.miss){background:var(--accent-hover)}
.seg-cta{font-size:10.5px;color:var(--accent-ink);font-weight:600;margin-top:6px;display:inline-flex;gap:3px}

/* ---------- chart tooltip + interactive legend ---------- */
.chart-wrap{position:relative}
.chart-tt{position:absolute;pointer-events:none;background:var(--ink);color:#f1f1f1;padding:8px 11px;
  border-radius:8px;font-size:11.5px;box-shadow:0 6px 22px rgba(0,0,0,.28);z-index:6;min-width:158px;
  font-variant-numeric:tabular-nums;display:none}
.chart-tt .tt-h{font-weight:700;margin-bottom:5px}
.chart-tt .tt-r{display:flex;justify-content:space-between;gap:18px;line-height:1.5}
.chart-tt .tt-r.sub{color:var(--ink-3);font-size:10.5px}
.chart-tt .tt-r b{font-weight:600}
.legend .lg-toggle{border:none;background:none;cursor:pointer;font:inherit;font-size:11.5px;color:var(--ink-2);
  display:inline-flex;align-items:center;gap:6px;padding:2px 3px;border-radius:5px}
.legend .lg-toggle .sw{width:11px;height:11px;border-radius:3px;display:inline-block}
.legend .lg-toggle .sw.dash{background:none!important;border-top:2px dashed var(--ink-3);border-radius:0;height:0;width:14px}
.legend .lg-toggle.off{opacity:.42;text-decoration:line-through}

/* ---------- close checklist (Apžvalga) ---------- */
.close-steps{--ck-gap:9px;--ck-mark:27px;--ck-title:13px;
  display:flex;flex-direction:column;gap:var(--ck-gap);position:relative}
.close-steps .step2{display:flex;gap:14px;align-items:flex-start;position:relative}
.close-steps .step2 .n{width:var(--ck-mark);height:var(--ck-mark);border-radius:50%;flex:0 0 auto;position:relative;z-index:2;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;
  border:2px solid var(--line-2);background:var(--surface);color:var(--ink-3)}
.close-steps .step2:not(:last-child)::before{content:'';position:absolute;left:calc(var(--ck-mark)/2 - 1px);
  top:var(--ck-mark);height:calc(100% + var(--ck-gap) - var(--ck-mark));width:2px;background:var(--line-2);z-index:1}
.close-steps .step2.done .n{background:var(--good-soft);border-color:var(--good);color:var(--good)}
.close-steps .step2.done:not(:last-child)::before{background:var(--good)}
.close-steps .step2.current .n{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 0 0 4px var(--accent-soft)}
/* lime is MARKER-ONLY: a small dot on the current step, never text/line */
.close-steps .step2.current .n .lime{position:absolute;right:-3px;top:-3px;width:12px;height:12px;border-radius:50%;
  background:var(--lime);border:2px solid var(--surface)}
.close-steps .step2 .n svg{width:14px;height:14px}
.ico15{width:15px;height:15px;flex-shrink:0;display:inline-flex}
.ico15 svg{width:100%;height:100%;display:block}
.close-steps .b{padding-top:calc((var(--ck-mark) - 20px)/2);min-width:0;flex:1}
.close-steps .t{font-size:var(--ck-title);font-weight:600;letter-spacing:-.01em}
.close-steps .step2.done .t,.close-steps .step2.pending .t{color:var(--ink-2)}
.close-steps .dsc{font-size:11.5px;color:var(--ink-2);margin-top:2px;line-height:1.4}
.st-pill{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:1px 7px;border-radius:99px;margin-left:8px}
.st-pill.done{background:var(--good-soft);color:var(--good)}
.st-pill.cur{background:var(--accent-soft);color:var(--accent-ink)}

/* ---------- share-of-total micro-bar (Analizė tables) ---------- */
.sharebar{display:flex;align-items:center;gap:9px;justify-content:flex-end}
.sharebar .track{width:70px;height:7px;background:var(--paper-2);border-radius:2px;overflow:hidden;flex:0 0 auto}
.sharebar .fill{height:100%;background:var(--accent);border-radius:2px}
.sharebar .pct{min-width:44px;text-align:right;font-variant-numeric:tabular-nums}

/* ---------- inline divider stat strip (Tendencijos header) ---------- */
.statstrip{display:flex;align-items:stretch;gap:0;padding:4px 0}
.statstrip>.stat{flex:1;padding:13px 20px;min-width:0}
.statstrip>.sep{width:1px;background:var(--line);margin:12px 0}
.statstrip .l{font-size:10.5px;color:var(--ink-2);text-transform:uppercase;letter-spacing:.07em;font-weight:600}
.statstrip .v{font-size:20px;font-weight:700;letter-spacing:-.02em;margin-top:3px;white-space:nowrap;font-variant-numeric:tabular-nums}
.statstrip .d{font-size:11px;color:var(--ink-3)}

/* ---------- Slice 2 additions (recon views — Analizė two-column pane) ---------- */
.grid-an{display:grid;grid-template-columns:1.6fr 1fr;gap:16px;align-items:start}
@media(max-width:1100px){.grid-an{grid-template-columns:1fr}}

/* ---------- Slice 3 additions (data views — force mono on non-first/first table cells) ---------- */
table td.mono{font-family:var(--font-mono)}

/* ============================================================
   Slice 4 additions — Kliento kortelė v2 (card editor v2, Ledger 19)
   Merged from design_handoff_portal_redesign/card-editor-additions.css.
   Selector collision fixed vs existing .seg (12-segment months strip,
   views_recon.js): the card-editor "segmented control" is renamed .segctl.
   Density/placement/disabled-style knobs unchanged (see source header):
     --pv --gp --ipv --secgap · --trdir/--trw · --dis-bd/--dis-bg
   ============================================================ */

/* ---------- page shell: nav left, editor center, test panel docked ---------- */
.cardshell{display:flex;flex-direction:column;height:100%;min-height:0;width:100%;background:var(--paper);overflow:hidden}
.cardtop{position:sticky;top:0;z-index:12;display:flex;align-items:center;gap:10px;min-height:64px;
  padding:11px 18px;border-bottom:1px solid var(--line);background:var(--surface);box-shadow:0 1px 0 rgba(74,38,112,.03)}
.cardtop h1{font-size:18px!important;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cardtop-back{border:0;background:transparent;color:var(--ink-2);font:inherit;font-size:12px;font-weight:700;
  padding:7px 2px;cursor:pointer;white-space:nowrap}
.cardtop-back:hover{color:var(--accent-ink)}
.cardtop .btn{min-height:36px}
.cardpage{flex:1;display:flex;min-height:0;overflow:hidden}
.cardpage .cardnav{width:224px;flex-shrink:0;border-right:1px solid var(--line);
  background:var(--paper);padding:16px 12px;overflow-y:auto}
.cardnav a{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:var(--radius-s);
  cursor:pointer;font-size:12.5px;font-weight:700;color:var(--ink);text-decoration:none}
.cardnav a:hover{background:var(--paper-2)}
.cardnav a.active::before{content:'';width:3px;height:14px;border-radius:2px;
  background:var(--lime);box-shadow:0 0 0 .5px #cdd943}
.cardnav .sub{padding:0 10px 8px;font-size:11px;color:var(--ink-3);line-height:1.7}
.cardnav .wait-dot{width:7px;height:7px;border-radius:50%;background:var(--warn-bg);
  border:1px solid #d9bd7a;margin-left:auto;flex-shrink:0}
.cardpage .cardmain{flex:1;display:flex;flex-direction:var(--trdir,row);min-height:0;min-width:0}
.cardpage .cardscroll{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:20px 26px;min-width:0}
.cardpage .cardscroll>div{max-width:880px;margin:0 auto}

/* ---------- section headings ---------- */
.sec-group{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);margin:10px 0}
.sec-h{display:flex;align-items:center;gap:10px;margin-bottom:12px;
  font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}

/* ---------- chip input (payer IDs, name fragments, emails, INT prefixes) ---------- */
.chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:7px 9px;
  border:1px solid var(--line-2);border-radius:var(--radius-s);min-height:37px;background:var(--surface)}
.chips:focus-within{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)}
.chips .chip{display:inline-flex;align-items:center;gap:6px;padding:3px 7px 3px 9px;
  background:var(--paper);border:1px solid var(--line-2);border-radius:7px;font-size:12px;font-weight:600}
.chips .chip button{border:none;background:none;padding:4px;min-width:24px;min-height:24px;display:flex;
  align-items:center;justify-content:center;cursor:pointer;color:var(--ink-3)}
.chips .chip button:hover{color:var(--bad)}
.chips input{border:none;outline:none;font:inherit;font-size:12.5px;min-width:70px;flex:1;background:transparent}

/* ---------- toggle switch ---------- */
.switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:12.5px}
.switch input{position:absolute;opacity:0;width:1px;height:1px}
.switch .tr{width:34px;height:20px;border-radius:99px;background:#c9ced4;position:relative;
  flex-shrink:0;transition:background .15s}
.switch .tr::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;
  border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform .15s}
.switch input:checked+.tr{background:var(--accent)}
.switch input:checked+.tr::after{transform:translateX(14px)}
.switch input:focus-visible+.tr{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- segmented control (gyvos formulės / tik reikšmės, LT / EN) ----------
   NOTE: renamed from the source .seg to .segctl — .seg is already the
   12-segment "months with data" strip (views_recon.js / app-additions.css). */
.segctl{display:inline-flex;border:1px solid var(--line-2);border-radius:var(--radius-s);overflow:hidden}
.segctl button{padding:6px 13px;border:none;background:var(--surface);color:var(--ink-2);
  font:inherit;font-size:12px;font-weight:600;cursor:pointer}
.segctl button.active{background:var(--accent);color:#fff;font-weight:700}

/* ---------- blocked / intentional-disabled sections ---------- */
.card.dis{border:var(--dis-bd,1px solid var(--line));background:var(--dis-bg,#fbfbfc);box-shadow:none}
.card.dis h2,.card.dis .sec-h{color:var(--ink-2)}
.card.dis .body{opacity:.55;pointer-events:none}
.is-disabled{opacity:.55}
.statechip{display:inline-block;padding:2px 8px;border-radius:99px;background:var(--warn-bg);
  color:var(--warn-ink);font-size:10.5px;font-weight:700}

/* ---------- tariff version timeline ---------- */
.vlist{border:1px solid var(--line);border-radius:9px;background:var(--paper);padding:12px 14px}
.vlist .vrow{display:flex;align-items:center;gap:9px;padding:6px 0;font-size:12.5px}
.vlist .vrow .dot{width:10px;height:10px;border-radius:3px;background:var(--line-2);flex-shrink:0}
.vlist .vrow.cur .dot{background:var(--lime);border:1px solid #cdd943}
.vlist .vrow:not(.cur){color:var(--ink-2)}

/* ---------- add-fee ghost buttons ---------- */
.btn.ghost-add{border:1.5px dashed #c9ced4;background:transparent;color:var(--ink-2);font-weight:600}
.btn.ghost-add:hover{border-color:var(--accent);color:var(--accent-ink);background:var(--accent-soft)}

/* ---------- empty collapsed section (city zones etc.) ---------- */
.empty-sec{border:1.5px dashed var(--line-2);border-radius:9px;padding:16px 18px;
  display:flex;align-items:center;gap:14px;font-size:12.5px;color:var(--ink-2);line-height:1.5}

/* ---------- test-run panel (docked) ---------- */
.testrun{width:var(--trw,360px);flex-shrink:0;border-left:1px solid var(--line);
  border-top:1px solid var(--line);background:var(--surface);overflow-y:auto;padding:18px 20px}
.testrun .cmp{display:grid;grid-template-columns:1fr 76px 76px;font-size:11.8px}
.testrun .cmp .h{padding:6px 0;font-size:10.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-2);text-align:right}
.testrun .cmp .h.cand{color:var(--accent-ink)}
.testrun .cmp .l{padding:7px 0;border-top:1px solid var(--paper-2);color:var(--ink-2)}
.testrun .cmp .v{padding:7px 0;border-top:1px solid var(--paper-2);text-align:right;
  font-family:var(--font-mono);font-size:11.5px;font-variant-numeric:tabular-nums}
.testrun mark,.diff-mark{background:var(--lime);color:var(--lime-ink);padding:1px 6px;
  border-radius:5px;font-weight:700;font-variant-numeric:tabular-nums}
.file-picker{margin:10px 0}
.test-drop{width:100%;min-height:68px;border:1.5px dashed var(--line-2);border-radius:9px;background:var(--paper);
  color:var(--ink);padding:12px;display:flex;align-items:center;gap:11px;text-align:left;cursor:pointer}
.test-drop.compact{min-height:58px}
.test-drop:hover,.test-drop.over{border-color:var(--accent);background:var(--accent-soft)}
.test-drop span{display:flex;flex-direction:column;gap:2px;min-width:0}
.test-drop small{color:var(--ink-2);font-size:11.5px;font-weight:500}
.file-summary{display:flex;align-items:center;gap:6px;min-height:29px;padding:3px 2px;color:var(--ink-2);font-size:11.5px}
.file-summary span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- discount tier rows (grid, Ledger 20 Nuolaidos) ---------- */
.discrow{display:grid;grid-template-columns:140px 118px 1fr 122px 132px 1fr 22px;
  gap:8px;align-items:center;padding:7px 0;border-top:1px solid var(--paper-2)}
.discrow-h{display:grid;grid-template-columns:140px 118px 1fr 122px 132px 1fr 22px;
  gap:8px;padding:0 0 5px;font-size:10.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-2)}

/* ---------- review gotcha (Ledger 21): inputs inside grid tracks overflow their
   track at intrinsic width unless constrained — always width:100%;min-width:0.
   (Source file only had min-width:0; width:100% added here.) ---------- */
.cardpage .cardscroll input:not(.switch input),.cardpage .cardscroll select,
.testrun input:not(.switch input),
.discrow input,.discrow select{width:100%;min-width:0}

/* ---------- responsive reflow (WCAG 1.4.10): the 224px nav + 360px docked
   test panel never reflowed, clipping content at narrow viewports/400% zoom.
   Reuses the existing --trdir/--trw "below-mode" knobs — nav collapses into a
   horizontal scrollable strip above the editor, test panel moves below it. ---------- */
@media(max-width:1180px){
  .cardpage{flex-direction:column;--trdir:column;--trw:100%}
  .cardpage .cardnav{width:100%;flex-shrink:0;border-right:none;border-bottom:1px solid var(--line);
    display:flex;align-items:center;gap:2px;overflow-x:auto;overflow-y:hidden;white-space:nowrap}
  .cardpage .cardnav a{flex:0 0 auto}
  .cardpage .cardnav .sub{display:none}
  .cardpage .cardmain{--trdir:row}
  .cardpage .cardscroll{overflow-x:hidden}
  .testrun{--trw:330px}
}

@media(max-width:820px){
  .sidebar{position:fixed;z-index:70;left:0;top:0;bottom:0;height:100dvh;transform:translateX(-102%);
    transition:transform .2s cubic-bezier(.22,1,.36,1);box-shadow:var(--shadow-lg)}
  .sidebar-veil{display:block;position:fixed;inset:0;z-index:69;background:rgba(31,30,29,.38);
    opacity:0;visibility:hidden;transition:opacity .18s ease,visibility .18s ease}
  body.nav-open{overflow:hidden}
  body.nav-open .sidebar{transform:translateX(0)}
  body.nav-open .sidebar-veil{opacity:1;visibility:visible}
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:0 0 44px;
    border:1px solid var(--line);border-radius:var(--radius-s);background:var(--surface);color:var(--ink);font-size:20px}
  .topbar{padding:8px 12px;gap:9px;min-height:60px;flex-wrap:wrap}
  .topbar .page-title{font-size:18px}
  .topbar>[data-x=yearbox]{margin-left:53px;order:3;width:calc(100% - 53px)}
  .topbar>[data-x=updated]{display:none!important}
  .content{padding:16px 12px 42px;max-width:100%;min-width:0}
  .content .inline{min-width:0;max-width:100%}
  .content .inline[style*="flex-shrink:0"]{flex:1 1 100%!important;margin-left:0!important}
  .card{padding:15px;margin-bottom:14px;max-width:100%;min-width:0}
  .grid2,.grid3,.grid-ov{grid-template-columns:minmax(0,1fr)}
  .tablewrap{max-width:100%;width:100%}
  .tablewrap table{width:max-content;min-width:100%}
  .tablewrap th:first-child,.tablewrap td:first-child{position:sticky;left:0;z-index:1;background:var(--surface)}
  .tablewrap thead th:first-child{z-index:3;background:var(--paper-2)}
  tr.total th:first-child,tr.total td:first-child{background:var(--paper-2)}
  .btn{min-height:44px;padding:9px 13px}
  .btn.sm{min-height:36px;padding:6px 10px}
  select,input[type=text],input[type=number],input[type=password],textarea{max-width:100%;font-size:16px}

  .app.card-workspace-mode .content{padding:0}
  .cardtop{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:7px 9px;
    min-height:0;padding:9px 10px}
  .cardtop-back{grid-column:1;grid-row:1}
  .cardtop h1{grid-column:2;grid-row:1;font-size:16px!important}
  .cardtop>[data-x=save]{grid-column:3;grid-row:1;min-height:40px;padding:7px 10px;font-size:0}
  .cardtop>[data-x=save] svg{width:17px;height:17px}
  .cardtop>[data-x=save] .pill{font-size:11px}
  .cardtop>[data-x=rename],.cardtop>.pill.ok,.cardtop>.pill.info,.cardtop>[data-x=nextrev],.cardtop>span[style*="flex:1"]{display:none!important}
  .cardtop>.pill.accent{grid-column:1/2;grid-row:2}
  .cardtop>.switch{grid-column:2;grid-row:2}
  .cardtop>[data-x=cancel]{grid-column:3;grid-row:2;min-height:36px;padding:5px 8px}
  .cardpage{overflow-y:auto;overflow-x:hidden;display:block}
  .cardpage .cardnav{position:sticky;top:0;z-index:9;padding:7px 8px;background:var(--surface)}
  .cardpage .cardnav a{min-height:40px}
  .cardpage .cardmain{display:block}
  .cardpage .cardscroll{overflow:visible;padding:14px 12px}
  .cardpage .cardscroll>div{max-width:none}
  .testrun{width:100%;overflow:visible;border-left:0;border-top:1px solid var(--line);padding:16px 12px 28px}
  .discrow,.discrow-h{grid-template-columns:minmax(130px,1fr) minmax(110px,1fr);overflow-x:auto}
  .modal{padding:19px;max-width:calc(100vw - 24px)}
  .drawer{max-width:100vw;width:100vw}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}