/* ==========================================================================
   VT CRM - dizaino sistema
   Dramblio kaulo baze, balti darbo blokai, violetiniai akcentai.
   ========================================================================== */

/* ------------------------------------------------------------------ TOKENS */
:root {
  --ivory-50:#FDFCFA;
  --ivory-100:#FAF7F1;
  --ivory-200:#F5F1E8;
  --ivory-300:#EFEADF;

  --surface:#FFFFFF;
  --surface-2:#FBF9F5;
  --surface-3:#F7F4EE;

  --line:#E7E1D5;
  --line-soft:#F0ECE3;
  --line-strong:#D9D2C4;

  --text:#24222A;
  --text-2:#55515E;
  /* Kodel tamsesni nei anksciau: --text-3 (#8A8593) ant balto dave 3,59:1, o
     --text-4 (#ABA6B2) — 2,22:1, t. y. neperskaitoma pagal WCAG AA. Dabar
     --text-3 laikosi >=4,9:1 ant visu fonu, ant kuriu realiai gula (surface,
     surface-2, surface-3, ivory-100/200, violet-soft), o --text-4 >=4,5:1 ant
     tu, kur ji naudojama (surface, surface-2, surface-3, ivory-100). Atspalvis
     tas pats violetiskai pilkas, pakeistas tik sviesumas — sistema lieka rami. */
  --text-3:#6B6673;
  --text-4:#736C7C;

  --violet:#6B3BF2;
  --violet-600:#5B2EDC;
  --violet-700:#4C25BC;
  --violet-soft:#F3EEFE;
  --violet-soft-2:#E8DFFD;
  --violet-line:#DACCFB;

  /* Kodel atskiri zetonai uzpildui: tamsiose temose --violet turi buti SVIESUS,
     kad butu iskaitomas kaip tekstas ant tamsaus fono (nav-item.active, tab.on),
     bet tada balta ant jo mygtuke duoda vos 3,43:1. Todel mygtuku, avataru ir
     zymekliu uzpildas imamas is --violet-fill, kuris kiekvienoje temoje yra
     pakankamai tamsus baltam tekstui (>=4,5:1). Sviesiose temose jis sutampa su
     akcentu, todel vaizdas nesikeicia. */
  --violet-fill:var(--violet);
  --violet-fill-2:var(--violet-600);
  --violet-on:#FFFFFF;

  --radius-sm:6px;
  --radius:10px;
  --radius-lg:14px;

  --shadow-xs:0 1px 2px rgba(36,34,42,.05);
  --shadow-sm:0 1px 3px rgba(36,34,42,.06), 0 1px 2px rgba(36,34,42,.04);
  --shadow-md:0 4px 16px rgba(36,34,42,.08), 0 1px 3px rgba(36,34,42,.04);
  --shadow-lg:0 18px 48px rgba(36,34,42,.16), 0 2px 8px rgba(36,34,42,.06);

  /* Avataru tonai: sviesus fonas + tamsus to paties atspalvio tekstas.
     Blogiausias kontrastas 4,94:1 (tikrinta visiems atspalviams). */
  --av-bg-s:45%; --av-bg-l:92%;
  --av-fg-s:80%; --av-fg-l:22%;

  --sidebar-w:246px;
  --sidebar-w-collapsed:68px;
  --topbar-h:60px;

  /* Sriftai NEIMAMI is Google Fonts: kiekvienas puslapio atidarymas butu
     perdaves naudotojo IP treciajai saliai be sutikimo (BDAR). 'Inter'
     naudojamas, jei jis idiegtas sistemoje arba savarankiskai priglobtas
     (zr. README); kitu atveju krenta i Segoe UI / SF Pro, kuriu metrika
     artima. Jokiu tinklo uzklausu nera nei vienu atveju. */
  --font:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono:'SF Mono', ui-monospace, 'Cascadia Mono', Menlo, Consolas, monospace;

  /* tonai */
  --t-slate-bg:#EEF1F6;  --t-slate-fg:#465269;  --t-slate-dot:#7387A8;
  --t-grey-bg:#F1EFEA;   --t-grey-fg:#6B6672;   --t-grey-dot:#9C96A3;
  --t-blue-bg:#E8F0FE;   --t-blue-fg:#1D4ED8;   --t-blue-dot:#3B82F6;
  --t-indigo-bg:#EAE9FD; --t-indigo-fg:#4338CA; --t-indigo-dot:#6366F1;
  --t-violet-bg:#F2EDFE; --t-violet-fg:#6B3BF2; --t-violet-dot:#8B5CF6;
  --t-teal-bg:#E1F5F1;   --t-teal-fg:#0F766E;   --t-teal-dot:#14B8A6;
  --t-green-bg:#E6F6EC;  --t-green-fg:#147B3B;  --t-green-dot:#22C55E;
  --t-amber-bg:#FDF3DE;  --t-amber-fg:#AD5009;  --t-amber-dot:#F59E0B;
  --t-red-bg:#FDECEB;    --t-red-fg:#BE2F2A;    --t-red-dot:#EF4444;
  --t-pink-bg:#FCEAF2;   --t-pink-fg:#BE185D;   --t-pink-dot:#EC4899;
  --t-dark-bg:#E8E6E1;   --t-dark-fg:#33303A;   --t-dark-dot:#4B4753;
}

/* ------------------------------------------------------------------- BASE */
*, *::before, *::after { box-sizing:border-box; }
html, body { height:100%; }
body {
  margin:0;
  background:var(--ivory-200);
  color:var(--text);
  font-family:var(--font);
  font-size:13.5px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5 { margin:0; font-weight:600; letter-spacing:-.01em; color:var(--text); }
p { margin:0; }
a { color:inherit; text-decoration:none; }
button, input, select, textarea { font:inherit; color:inherit; }
ul, ol { margin:0; padding:0; list-style:none; }
table { border-collapse:collapse; width:100%; }
::selection { background:var(--violet-soft-2); }

.ico { display:inline-flex; align-items:center; justify-content:center; flex:none; }
.ico svg { display:block; width:16px; height:16px; stroke-width:1.6; }
.ico-14 svg { width:14px; height:14px; }
.ico-18 svg { width:18px; height:18px; }
.ico-20 svg { width:20px; height:20px; }
.ico-24 svg { width:24px; height:24px; }

.mono { font-family:var(--mono); font-size:.92em; letter-spacing:-.01em; }
.num { font-variant-numeric:tabular-nums; }
.muted { color:var(--text-3); }
.muted-2 { color:var(--text-2); }
.small { font-size:12px; }
.xsmall { font-size:11px; }
.strong { font-weight:600; }
.nowrap { white-space:nowrap; }
.truncate { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.right { text-align:right; }
.center { text-align:center; }
.hidden { display:none !important; }
.grow { flex:1 1 auto; min-width:0; }
.row { display:flex; align-items:center; gap:8px; }
.row-tight { display:flex; align-items:center; gap:5px; }
.col { display:flex; flex-direction:column; gap:4px; min-width:0; }
.wrap { flex-wrap:wrap; }
.sep { width:1px; height:18px; background:var(--line); flex:none; }

/* ------------------------------------------------------------------ SHELL */
/* body { zoom: --ui-scale } sumazina/padidina visa islieta, taciau 100vh
   ir toliau reiskia NEmastelinta lango auksti. Todel esant 0,85 sonine
   juosta uzimdavo tik 85 % ekrano, o esant 1,35 — islisdavo. Dalyba is
   mastelio grazina tikra ekrano auksti bet kuriuo masteliu. */
.app { display:flex; min-height:calc(100vh / var(--ui-scale, 1)); }

.sidebar {
  width:var(--sidebar-w); flex:none;
  background:var(--ivory-100);
  border-right:1px solid var(--line);
  display:flex; flex-direction:column;
  position:sticky; top:0; height:calc(100vh / var(--ui-scale, 1));
  transition:width .18s ease;
}
.app.collapsed .sidebar { width:var(--sidebar-w-collapsed); }

.brand { display:flex; align-items:center; gap:10px; padding:16px 16px 14px; }
.brand-mark {
  width:32px; height:32px; border-radius:8px; flex:none;
  background:linear-gradient(140deg, var(--violet-fill) 0%, var(--violet-fill-2) 100%);
  color:var(--violet-on); display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:14px; letter-spacing:-.02em;
  box-shadow:0 2px 6px rgba(107,59,242,.28);
}
.brand-text { min-width:0; }
.brand-name { font-size:13px; font-weight:700; letter-spacing:.02em; color:var(--text); }
.brand-sub { font-size:10px; letter-spacing:.11em; text-transform:uppercase; color:var(--text-3); font-weight:600; }
.app.collapsed .brand-text { display:none; }

.nav { flex:1 1 auto; overflow-y:auto; padding:4px 10px 12px; }
.nav-group-label {
  font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-4); padding:14px 8px 6px;
}
.app.collapsed .nav-group-label { opacity:0; height:14px; padding:6px 0 0; overflow:hidden; }
.nav-item {
  display:flex; align-items:center; gap:10px;
  padding:7px 9px; border-radius:8px; margin-bottom:1px;
  color:var(--text-2); font-weight:500; font-size:13px;
  cursor:pointer; position:relative; white-space:nowrap;
}
.nav-item:hover { background:var(--ivory-300); color:var(--text); }
.nav-item.active { background:var(--violet-soft); color:var(--violet); font-weight:600; }
.nav-item.active .ico svg { stroke-width:2; }
.nav-item .ico { color:currentColor; }
.nav-count {
  margin-left:auto; font-size:11px; font-weight:600; color:var(--text-3);
  background:var(--surface); border:1px solid var(--line); border-radius:20px;
  padding:0 6px; min-width:20px; text-align:center; line-height:17px;
}
/* NE #fff: tamsioje temoje tai virsdavo rysku baltu langeliu soninėje juostoje.
   --surface sviesioje temoje ir taip yra baltas, todel vaizdas nepasikeicia. */
.nav-item.active .nav-count { background:var(--surface); border-color:var(--violet-line); color:var(--violet); }
.nav-count.alert { background:var(--t-red-bg); border-color:transparent; color:var(--t-red-fg); }
.app.collapsed .nav-label, .app.collapsed .nav-count { display:none; }
.app.collapsed .nav-item { justify-content:center; padding:9px; }

.sidebar-foot { border-top:1px solid var(--line); padding:10px; }
.collapse-btn {
  display:flex; align-items:center; gap:10px; width:100%;
  background:none; border:0; padding:7px 9px; border-radius:8px;
  color:var(--text-3); cursor:pointer; font-size:12.5px; font-weight:500;
}
.collapse-btn:hover { background:var(--ivory-300); color:var(--text); }
.app.collapsed .collapse-btn span:not(.ico) { display:none; }
.app.collapsed .collapse-btn { justify-content:center; }

.main { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }

/* ----------------------------------------------------------------- TOPBAR */
.topbar {
  height:var(--topbar-h); flex:none;
  background:rgba(250,247,241,.88); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:12px; padding:0 20px;
  position:sticky; top:0; z-index:60;
}
.global-search { position:relative; flex:1 1 auto; max-width:460px; }
.global-search .ico { position:absolute; left:10px; top:50%; transform:translateY(-50%); color:var(--text-3); pointer-events:none; }
.global-search input {
  width:100%; height:34px; border-radius:8px; border:1px solid var(--line);
  background:var(--surface); padding:0 74px 0 32px; font-size:13px; outline:none;
}
.global-search input::placeholder { color:var(--text-4); }
.global-search input:focus { border-color:var(--violet-line); box-shadow:0 0 0 3px var(--violet-soft); }
.kbd {
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  font-size:10.5px; font-weight:600; color:var(--text-4);
  border:1px solid var(--line); border-radius:5px; padding:1px 5px; background:var(--surface-2);
  font-family:var(--mono);
}
.topbar-spacer { flex:1 1 auto; }

.icon-btn {
  width:34px; height:34px; border-radius:8px; border:1px solid transparent;
  background:none; color:var(--text-2); display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; position:relative; flex:none;
}
.icon-btn:hover { background:var(--ivory-300); color:var(--text); }
.icon-btn.xs { width:26px; height:26px; }
.icon-btn .dot {
  position:absolute; top:6px; right:6px; width:7px; height:7px; border-radius:50%;
  background:var(--t-red-dot); border:1.5px solid var(--ivory-100);
}

.user-chip {
  display:flex; align-items:center; gap:9px; padding:4px 9px 4px 4px;
  border-radius:9px; border:1px solid var(--line); background:var(--surface);
  cursor:pointer; max-width:230px;
}
.user-chip:hover { border-color:var(--line-strong); }
.user-chip-meta { min-width:0; line-height:1.25; }
.user-chip-name { font-size:12.5px; font-weight:600; }
.user-chip-role { font-size:10.5px; color:var(--text-3); }

/* ---------------------------------------------------------------- AVATARS */
.avatar {
  width:28px; height:28px; border-radius:50%; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:10.5px; font-weight:700; letter-spacing:.01em;
  /* Atspalvi (--av-h) nustato JS pagal zmogu, sodruma ir sviesuma - tema.
     Fonas ir tekstas yra to paties atspalvio, tik priesinguose sviesumo
     galuose; taip inicialai iskaitomi visais 360 laipsniu (zr. core/ui.js). */
  --av-h:265;
  background:hsl(var(--av-h), var(--av-bg-s), var(--av-bg-l));
  color:hsl(var(--av-h), var(--av-fg-s), var(--av-fg-l));
  user-select:none;
}
.avatar.sm { width:22px; height:22px; font-size:9px; }
.avatar.lg { width:40px; height:40px; font-size:14px; }
.avatar.xl { width:64px; height:64px; font-size:22px; border-radius:16px; }
.avatar-stack { display:inline-flex; }
.avatar-stack .avatar { border:2px solid var(--surface); margin-left:-7px; }
.avatar-stack .avatar:first-child { margin-left:0; }
.avatar-more {
  background:var(--surface-3); color:var(--text-2); font-size:9.5px;
  border:2px solid var(--surface); margin-left:-7px;
}

/* --------------------------------------------------------------- CONTENT */
.content { flex:1 1 auto; padding:20px 24px 56px; max-width:1720px; width:100%; }
.page-head { display:flex; align-items:flex-start; gap:16px; margin-bottom:18px; }
.page-head .grow { min-width:0; }
.breadcrumbs { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text-3); margin-bottom:5px; }
.breadcrumbs a:hover { color:var(--violet); }
.page-title { font-size:21px; font-weight:650; letter-spacing:-.02em; }
.page-sub { font-size:12.5px; color:var(--text-3); margin-top:3px; }
.page-actions { display:flex; align-items:center; gap:8px; flex:none; }

.scope-note {
  display:inline-flex; align-items:center; gap:6px; font-size:11.5px;
  color:var(--text-3); background:var(--surface-3); border:1px solid var(--line-soft);
  border-radius:20px; padding:2px 10px 2px 8px;
}

/* --------------------------------------------------------------- BUTTONS */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:32px; padding:0 12px; border-radius:8px; font-size:12.5px; font-weight:600;
  border:1px solid var(--line); background:var(--surface); color:var(--text);
  cursor:pointer; white-space:nowrap; transition:background .12s, border-color .12s;
}
.btn:hover { background:var(--surface-2); border-color:var(--line-strong); }
.btn:active { transform:translateY(.5px); }
.btn.primary { background:var(--violet-fill); border-color:var(--violet-fill); color:var(--violet-on); box-shadow:0 1px 2px rgba(107,59,242,.24); }
.btn.primary:hover { background:var(--violet-fill-2); border-color:var(--violet-fill-2); }
.btn.ghost { background:transparent; border-color:transparent; color:var(--text-2); }
.btn.ghost:hover { background:var(--ivory-300); color:var(--text); }
.btn.danger { color:var(--t-red-fg); border-color:var(--t-red-bg); background:var(--t-red-bg); }
/* Ne fiksuota hex spalva: ta buvo visada sviesiai rozine, tad tamsioje temoje
   --t-red-fg (sviesi lasisos spalva, skirta tamsiam fonui) ant jos duodavo
   ~1,6:1. --t-red-bg jau yra fonas, ant kurio --t-red-fg garantuotai skaitomas
   kiekvienoje temoje (zr. .t-red), todel hover tik paryskina ji, o ne keicia. */
.btn.danger:hover { background:var(--t-red-bg); filter:brightness(1.08); border-color:var(--t-red-dot); }
.btn.sm { height:27px; padding:0 9px; font-size:11.5px; border-radius:7px; }
.btn.lg { height:36px; padding:0 15px; font-size:13px; }
.btn[disabled] { opacity:.5; pointer-events:none; }
.btn-group { display:inline-flex; }
.btn-group .btn { border-radius:0; margin-left:-1px; }
.btn-group .btn:first-child { border-radius:8px 0 0 8px; margin-left:0; }
.btn-group .btn:last-child { border-radius:0 8px 8px 0; }

.seg { display:inline-flex; background:var(--surface-3); border:1px solid var(--line); border-radius:8px; padding:2px; gap:2px; }
.seg button {
  border:0; background:none; padding:0 10px; height:26px; border-radius:6px;
  font-size:12px; font-weight:600; color:var(--text-3); cursor:pointer; display:inline-flex; align-items:center; gap:5px;
}
.seg button:hover { color:var(--text); }
.seg button.on { background:var(--surface); color:var(--violet); box-shadow:var(--shadow-xs); }

/* ---------------------------------------------------------------- INPUTS */
.field { display:flex; flex-direction:column; gap:5px; min-width:0; }
.field label { font-size:11.5px; font-weight:600; color:var(--text-2); }
.input, .select, textarea.input {
  height:32px; border-radius:8px; border:1px solid var(--line); background:var(--surface);
  padding:0 10px; font-size:12.5px; outline:none; color:var(--text); width:100%;
}
textarea.input { height:auto; padding:8px 10px; resize:vertical; line-height:1.5; }
.input:focus, .select:focus, textarea.input:focus { border-color:var(--violet-line); box-shadow:0 0 0 3px var(--violet-soft); }
/* Halo virs yra tik dekoratyvus (~1,1:1 kontrastas) - tikras klaviaturos
   fokuso ziedas su pakankamu kontrastu visose temose: */
.input:focus-visible, .select:focus-visible, textarea.input:focus-visible, .global-search input:focus-visible {
  outline:2px solid var(--violet); outline-offset:1px;
}
.select {
  appearance:none; padding-right:26px; cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A8593' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 7px center; background-size:14px;
}
.select.sm, .input.sm { height:28px; font-size:12px; }
.search-input { position:relative; }
.search-input .ico { position:absolute; left:9px; top:50%; transform:translateY(-50%); color:var(--text-3); }
.search-input input { padding-left:30px; }
.checkbox {
  width:15px; height:15px; border-radius:4px; border:1.5px solid var(--line-strong);
  background:var(--surface); cursor:pointer; flex:none; display:inline-flex;
  align-items:center; justify-content:center; color:transparent; padding:0;
}
.checkbox:hover { border-color:var(--violet); }
.checkbox.on, .checkbox.mixed { background:var(--violet-fill); border-color:var(--violet-fill); color:var(--violet-on); }
.checkbox svg { width:11px; height:11px; stroke-width:3; }

.switch { width:34px; height:19px; border-radius:20px; background:var(--line-strong); position:relative; cursor:pointer; border:0; flex:none; transition:background .15s; padding:0; }
.switch::after { content:''; position:absolute; top:2px; left:2px; width:15px; height:15px; border-radius:50%; background:var(--violet-on); transition:transform .15s; box-shadow:var(--shadow-xs); }
.switch.on { background:var(--violet-fill); }
.switch.on::after { transform:translateX(15px); }

/* ---------------------------------------------------------------- BADGES */
.badge {
  display:inline-flex; align-items:center; gap:5px; height:21px; padding:0 8px;
  border-radius:6px; font-size:11.5px; font-weight:600; white-space:nowrap; letter-spacing:-.005em;
}
.badge .dot { width:6px; height:6px; border-radius:50%; background:currentColor; flex:none; opacity:.85; }
.badge.lg { height:25px; font-size:12px; padding:0 10px; }
.badge.plain { background:var(--surface-3); color:var(--text-2); }
.badge.outline { background:transparent; border:1px solid var(--line); color:var(--text-2); }

.t-slate  { background:var(--t-slate-bg);  color:var(--t-slate-fg); }
.t-grey   { background:var(--t-grey-bg);   color:var(--t-grey-fg); }
.t-blue   { background:var(--t-blue-bg);   color:var(--t-blue-fg); }
.t-indigo { background:var(--t-indigo-bg); color:var(--t-indigo-fg); }
.t-violet { background:var(--t-violet-bg); color:var(--t-violet-fg); }
.t-teal   { background:var(--t-teal-bg);   color:var(--t-teal-fg); }
.t-green  { background:var(--t-green-bg);  color:var(--t-green-fg); }
.t-amber  { background:var(--t-amber-bg);  color:var(--t-amber-fg); }
.t-red    { background:var(--t-red-bg);    color:var(--t-red-fg); }
.t-pink   { background:var(--t-pink-bg);   color:var(--t-pink-fg); }
.t-dark   { background:var(--t-dark-bg);   color:var(--t-dark-fg); }
.t-muted  { background:transparent;        color:var(--text-3); }

.prio { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; white-space:nowrap; }
.prio .bar { width:3px; height:13px; border-radius:2px; background:currentColor; flex:none; }
.prio.p-low { color:var(--t-grey-fg); }
.prio.p-mid { color:var(--t-blue-fg); }
.prio.p-high { color:var(--t-amber-fg); }
.prio.p-critical { color:var(--t-red-fg); }

.tag {
  display:inline-flex; align-items:center; gap:4px; height:20px; padding:0 7px;
  border-radius:5px; font-size:11px; font-weight:500;
  background:var(--surface-3); color:var(--text-2); border:1px solid var(--line-soft);
}
.id-chip {
  font-family:var(--mono); font-size:11.5px; font-weight:600; color:var(--text-2);
  background:var(--surface-3); border:1px solid var(--line-soft);
  border-radius:5px; padding:1px 6px; white-space:nowrap;
}
a.id-chip:hover, .id-chip.link:hover { color:var(--violet); border-color:var(--violet-line); background:var(--violet-soft); }

/* ----------------------------------------------------------------- CARDS */
.card {
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-xs);
}
.card-head {
  display:flex; align-items:center; gap:10px; padding:13px 16px;
  border-bottom:1px solid var(--line-soft); min-height:48px;
}
.card-title { font-size:13.5px; font-weight:650; letter-spacing:-.01em; }
.card-sub { font-size:11.5px; color:var(--text-3); }
.card-actions { margin-left:auto; display:flex; align-items:center; gap:6px; }
.card-body { padding:16px; }
.card-body.tight { padding:10px 16px; }
.card-body.flush { padding:0; }
.card-foot { padding:10px 16px; border-top:1px solid var(--line-soft); display:flex; align-items:center; gap:8px; }
.link-more { font-size:12px; font-weight:600; color:var(--violet); cursor:pointer; display:inline-flex; align-items:center; gap:4px; }
.link-more:hover { color:var(--violet-600); }

.grid { display:grid; gap:14px; }
.g-2 { grid-template-columns:repeat(2, minmax(0,1fr)); }
.g-3 { grid-template-columns:repeat(3, minmax(0,1fr)); }
.g-4 { grid-template-columns:repeat(4, minmax(0,1fr)); }
.g-6 { grid-template-columns:repeat(6, minmax(0,1fr)); }
/* minmax(0,...) yra butinas, o ne puosybinis: plikas „1fr“ reiskia
   minmax(auto,1fr), o „auto“ neleidzia stulpeliui susitraukti maziau uz
   turinio min-content ploti. Idejus placia lentele, toks stulpelis atsisako
   mazeti, isstumia tinkleli uz puslapio ribu, o gretimas stulpelis suspaudziamas
   iki vieno zodzio eiluteje. Zemiau esantys g-2/g-3/g-4/g-6 tai jau daro
   teisingai — cia truko. */
.g-2-1 { grid-template-columns:minmax(0,2fr) minmax(0,1fr); }
.g-1-2 { grid-template-columns:minmax(0,1fr) minmax(0,2fr); }
.g-3-2 { grid-template-columns:minmax(0,3fr) minmax(0,2fr); }
.span-2 { grid-column:span 2; }
.span-3 { grid-column:span 3; }
.span-full { grid-column:1 / -1; }

/* ------------------------------------------------------------------- KPI */
.kpi { padding:14px 16px; display:flex; flex-direction:column; gap:8px; min-width:0; }
.kpi-top { display:flex; align-items:center; gap:8px; }
.kpi-label { font-size:11.5px; font-weight:600; color:var(--text-3); letter-spacing:.01em; }
.kpi-ico { width:26px; height:26px; border-radius:7px; display:flex; align-items:center; justify-content:center; margin-left:auto; }
.kpi-value { font-size:26px; font-weight:660; letter-spacing:-.03em; line-height:1.05; font-variant-numeric:tabular-nums; }
.kpi-value .unit { font-size:14px; font-weight:600; color:var(--text-3); margin-left:3px; letter-spacing:0; }
.kpi-foot { display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--text-3); }
.kpi-delta { display:inline-flex; align-items:center; gap:3px; font-weight:600; }
.kpi-delta.up { color:var(--t-green-fg); }
.kpi-delta.down { color:var(--t-red-fg); }
.kpi.clickable { cursor:pointer; }
.kpi.clickable:hover { background:var(--surface-2); }

/* ---------------------------------------------------------------- TABLES */
/* max-height + overflow:auto (ne vien overflow-x) - kitaip .table-wrap
   niekad netampa realiu slinkties konteineriu, o th{position:sticky} zemiau
   niekada nepasilieka matomas slenkant. */
.table-wrap { max-height:calc(100vh / var(--ui-scale, 1) - 220px); overflow:auto; }
table.tbl { font-size:12.5px; }
table.tbl th {
  text-align:left; font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-3); padding:8px 12px; background:var(--surface-2);
  border-bottom:1px solid var(--line); white-space:nowrap; position:sticky; top:0; z-index:2;
}
table.tbl th.sortable { cursor:pointer; user-select:none; }
table.tbl th.sortable:hover { color:var(--text); }
table.tbl th .sort-ico { display:inline-flex; margin-left:4px; opacity:.35; vertical-align:-2px; }
table.tbl th.sorted { color:var(--violet); }
table.tbl th.sorted .sort-ico { opacity:1; }
table.tbl td { padding:9px 12px; border-bottom:1px solid var(--line-soft); vertical-align:middle; }
table.tbl tbody tr:hover td { background:var(--surface-2); }
table.tbl tbody tr.clickable { cursor:pointer; }
table.tbl tbody tr.selected td { background:var(--violet-soft); }
table.tbl tbody tr:last-child td { border-bottom:0; }
table.tbl td.right, table.tbl th.right { text-align:right; }
table.tbl td.center, table.tbl th.center { text-align:center; }
table.tbl .col-check { width:36px; padding-left:14px; padding-right:0; }
table.tbl.dense td { padding:6px 12px; }
.cell-main { font-weight:600; color:var(--text); }
.cell-sub { font-size:11.5px; color:var(--text-3); }
.cell-2 { display:flex; flex-direction:column; gap:1px; min-width:0; }
/* Eiluciu veiksmai: PRIBLESKINTI, ne nematomi.

   Buvo opacity:0 ir pilnas rysklumas tik uzvedus pele. Tai reiske tris
   dalykus: pele nenaudojantis zmogus ju nerasdavo niekada, klaviatura
   pasiekiamas mygtukas buvo fokusuojamas ir NEMATOMAS, o naujas naudotojas
   apskritai nezinojo, kad eilute turi veiksmu - klausimas "kodel peržiūros
   mygtukas atsiranda tik uzvedus?" yra butent apie sita.

   .45 uztenka, kad eilute liktu rami, bet mygtukas butu matomas. :focus-within
   yra ne papuosimas: be jo Tab nuvestu i mygtuka, kurio nesimato. */
.row-actions { display:flex; gap:2px; opacity:.45; transition:opacity .12s ease; }
tr:hover .row-actions,
.list-item:hover .row-actions,
.row-actions:focus-within { opacity:1; }

/* filtru juosta */
.toolbar {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:10px 14px; border-bottom:1px solid var(--line-soft); background:var(--surface);
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
}
.toolbar .search-input { width:250px; }
.toolbar .select { width:auto; min-width:120px; }
.filter-tabs { display:flex; gap:2px; padding:8px 14px 0; border-bottom:1px solid var(--line-soft); background:var(--surface); border-radius:var(--radius-lg) var(--radius-lg) 0 0; overflow-x:auto; }
.filter-tab {
  padding:6px 11px 9px; font-size:12.5px; font-weight:600; color:var(--text-3);
  cursor:pointer; border-bottom:2px solid transparent; white-space:nowrap; display:flex; align-items:center; gap:6px;
}
.filter-tab:hover { color:var(--text); }
.filter-tab.on { color:var(--violet); border-bottom-color:var(--violet); }
.filter-tab .n { font-size:11px; background:var(--surface-3); border-radius:10px; padding:0 6px; color:var(--text-3); font-weight:600; }
.filter-tab.on .n { background:var(--violet-soft); color:var(--violet); }

.active-filters { display:flex; gap:6px; flex-wrap:wrap; padding:0 14px 10px; background:var(--surface); }
.chip-filter {
  display:inline-flex; align-items:center; gap:5px; height:23px; padding:0 4px 0 9px;
  border-radius:6px; font-size:11.5px; font-weight:600;
  background:var(--violet-soft); color:var(--violet); border:1px solid var(--violet-line);
}
.chip-filter button { border:0; background:none; cursor:pointer; color:inherit; display:flex; padding:2px; border-radius:4px; }
.chip-filter button:hover { background:var(--violet-soft-2); }

/* masiniai veiksmai */
.bulk-bar {
  display:flex; align-items:center; gap:10px; padding:9px 14px;
  /* --violet-700, ne --violet: siame fone tekstas naudoja zenkla, kuris
     assets/themes.css garantuotas >=4,8:1 ant --violet-soft KIEKVIENOJE
     temoje (zr. temos komentara ties AKCENTAI) - --violet-700 tokios
     garantijos neturi ir tamsiose temose duoda tik ~2,9-3,5:1. */
  background:var(--violet-soft); border-bottom:1px solid var(--violet-line); color:var(--violet);
  font-size:12.5px; font-weight:600;
}
.bulk-bar .select { height:28px; font-size:12px; background-color:var(--surface); }

/* puslapiavimas */
.pager { display:flex; align-items:center; gap:10px; padding:10px 14px; border-top:1px solid var(--line-soft); font-size:12px; color:var(--text-3); flex-wrap:wrap; }
.pager .pages { display:flex; gap:3px; margin-left:auto; align-items:center; }
.page-btn {
  min-width:27px; height:27px; padding:0 7px; border-radius:7px; border:1px solid transparent;
  background:none; color:var(--text-2); font-size:12px; font-weight:600; cursor:pointer;
}
.page-btn:hover { background:var(--surface-3); }
.page-btn.on { background:var(--violet-fill); border-color:var(--violet-fill); color:var(--violet-on); }
.page-btn[disabled] { opacity:.35; pointer-events:none; }

/* ------------------------------------------------------------------ TABS */
.tabs { display:flex; gap:2px; border-bottom:1px solid var(--line); overflow-x:auto; }
.tab {
  padding:9px 13px; font-size:13px; font-weight:600; color:var(--text-3);
  cursor:pointer; border-bottom:2px solid transparent; white-space:nowrap;
  display:flex; align-items:center; gap:7px; margin-bottom:-1px;
}
.tab:hover { color:var(--text); }
.tab.on { color:var(--violet); border-bottom-color:var(--violet); }
.tab .n { font-size:11px; font-weight:700; background:var(--surface-3); border-radius:10px; padding:0 6px; color:var(--text-3); }
.tab.on .n { background:var(--violet-soft); color:var(--violet); }

/* --------------------------------------------------------- RECORD HEADER */
.record-head { display:flex; gap:18px; padding:18px; align-items:flex-start; }
.record-cover {
  width:210px; height:150px; border-radius:10px; flex:none; overflow:hidden;
  position:relative; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line-soft);
}
.record-cover .ico { color:rgba(255,255,255,.85); }
.record-cover .ph-count {
  position:absolute; bottom:8px; right:8px; background:rgba(20,18,26,.55); color:#fff;
  border-radius:6px; padding:2px 7px; font-size:11px; font-weight:600; backdrop-filter:blur(4px);
  display:flex; align-items:center; gap:4px;
}
.meta-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(128px,1fr)); gap:14px 20px; }
.meta-item { min-width:0; }
.meta-label { font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-4); margin-bottom:3px; }
.meta-value { font-size:13px; font-weight:600; color:var(--text); }
.meta-value.big { font-size:17px; letter-spacing:-.02em; }

.def-list { display:grid; grid-template-columns:auto 1fr; gap:9px 16px; align-items:baseline; font-size:12.5px; }
.def-list dt { color:var(--text-3); white-space:nowrap; }
.def-list dd { margin:0; font-weight:600; text-align:right; }

/* ------------------------------------------------------------- LIST ITEMS */
.list { display:flex; flex-direction:column; }
.list-item {
  display:flex; align-items:center; gap:10px; padding:10px 16px;
  border-bottom:1px solid var(--line-soft); cursor:pointer; min-width:0;
}
.list-item:last-child { border-bottom:0; }
.list-item:hover { background:var(--surface-2); }
.list-item .grow { min-width:0; }
.li-title { font-size:12.5px; font-weight:600; color:var(--text); }
.li-sub { font-size:11.5px; color:var(--text-3); display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.li-right { margin-left:auto; text-align:right; flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:3px; }

/* --------------------------------------------------------------- TIMELINE */
.timeline { position:relative; padding-left:26px; }
.timeline::before { content:''; position:absolute; left:9px; top:6px; bottom:6px; width:1.5px; background:var(--line); }
.tl-item { position:relative; padding:0 0 16px; }
.tl-item:last-child { padding-bottom:2px; }
.tl-dot {
  position:absolute; left:-26px; top:1px; width:19px; height:19px; border-radius:50%;
  background:var(--surface); border:1.5px solid var(--line); display:flex; align-items:center; justify-content:center;
}
.tl-dot .ico svg { width:11px; height:11px; }
.tl-head { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.tl-title { font-size:12.5px; font-weight:600; }
.tl-time { font-size:11px; color:var(--text-4); margin-left:auto; white-space:nowrap; }
.tl-body { font-size:12px; color:var(--text-2); margin-top:3px; }

/* ------------------------------------------------------------ EMPTY/STATE */
.empty { padding:34px 20px; text-align:center; color:var(--text-3); }
.empty .ico { color:var(--text-4); margin-bottom:8px; }
.empty-title { font-size:13px; font-weight:600; color:var(--text-2); margin-bottom:3px; }
.empty-sub { font-size:12px; }

.progress { height:5px; border-radius:4px; background:var(--surface-3); overflow:hidden; }
.progress > span { display:block; height:100%; border-radius:4px; background:var(--violet); }
.progress.thin { height:4px; }

.meter-row { display:flex; align-items:center; gap:10px; padding:7px 0; }
.meter-label { width:132px; flex:none; font-size:12px; font-weight:600; display:flex; align-items:center; gap:7px; min-width:0; }
.meter-track { flex:1 1 auto; height:8px; border-radius:5px; background:var(--surface-3); overflow:hidden; display:flex; }
.meter-track > span { height:100%; }
.meter-value { width:64px; flex:none; text-align:right; font-size:12px; font-weight:600; font-variant-numeric:tabular-nums; }

/* --------------------------------------------------------------- PIPELINE */
.pipeline { display:flex; gap:10px; overflow-x:auto; padding:2px 2px 8px; }
.pipe-col { flex:0 0 232px; background:var(--surface-3); border:1px solid var(--line-soft); border-radius:10px; display:flex; flex-direction:column; max-height:520px; }
.pipe-head { padding:9px 11px; border-bottom:1px solid var(--line-soft); display:flex; align-items:center; gap:7px; }
.pipe-name { font-size:12px; font-weight:700; letter-spacing:-.01em; }
.pipe-n { font-size:11px; font-weight:700; color:var(--text-3); background:var(--surface); border-radius:10px; padding:0 6px; }
.pipe-sum { font-size:11px; color:var(--text-3); margin-left:auto; font-weight:600; }
.pipe-body { padding:8px; display:flex; flex-direction:column; gap:7px; overflow-y:auto; }
.pipe-card {
  background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:9px 10px;
  cursor:pointer; box-shadow:var(--shadow-xs);
}
.pipe-card:hover { border-color:var(--violet-line); box-shadow:var(--shadow-sm); }
.pipe-card-top { display:flex; align-items:center; gap:6px; margin-bottom:4px; }
.pipe-card-title { font-size:12px; font-weight:600; line-height:1.35; }
.pipe-card-foot { display:flex; align-items:center; gap:6px; margin-top:7px; }
.pipe-price { font-size:12px; font-weight:700; letter-spacing:-.01em; }

/* --------------------------------------------------------------- OBJ CARD */
.obj-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(268px,1fr)); gap:14px; }
.obj-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; cursor:pointer; box-shadow:var(--shadow-xs); display:flex; flex-direction:column; }
.obj-card:hover { border-color:var(--violet-line); box-shadow:var(--shadow-md); }
.obj-cover { height:132px; position:relative; display:flex; align-items:center; justify-content:center; }
.obj-cover .badge { position:absolute; top:9px; left:9px; box-shadow:var(--shadow-xs); }
.obj-cover .id-chip { position:absolute; top:9px; right:9px; background:rgba(255,255,255,.92); border-color:transparent; }
.obj-body { padding:11px 13px 13px; display:flex; flex-direction:column; gap:7px; flex:1 1 auto; }
.obj-title { font-size:13px; font-weight:650; line-height:1.3; }
.obj-addr { font-size:11.5px; color:var(--text-3); display:flex; align-items:center; gap:4px; }
.obj-price { font-size:16px; font-weight:680; letter-spacing:-.02em; }
.obj-specs { display:flex; gap:10px; font-size:11.5px; color:var(--text-2); border-top:1px solid var(--line-soft); padding-top:8px; margin-top:auto; }
.obj-specs span { display:flex; align-items:center; gap:4px; }
.obj-foot { display:flex; align-items:center; gap:7px; padding:8px 13px; border-top:1px solid var(--line-soft); background:var(--surface-2); }

/* -------------------------------------------------------------- CALENDAR */
.cal-grid { display:grid; grid-template-columns:56px repeat(7, minmax(0,1fr)); border-left:1px solid var(--line-soft); }
.cal-head-cell { padding:8px 6px; text-align:center; border-bottom:1px solid var(--line); border-right:1px solid var(--line-soft); background:var(--surface-2); position:sticky; top:0; z-index:3; }
.cal-dow { font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3); }
.cal-dnum { font-size:16px; font-weight:650; letter-spacing:-.02em; margin-top:1px; }
.cal-head-cell.today .cal-dnum { color:var(--violet-on); background:var(--violet-fill); width:26px; height:26px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; margin:1px auto 0; font-size:13px; }
.cal-time { font-size:10.5px; color:var(--text-4); text-align:right; padding:0 7px; height:46px; border-right:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); position:relative; }
.cal-time span { position:relative; top:-6px; background:var(--surface); padding:0 2px; }
.cal-cell { height:46px; border-right:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); position:relative; }
.cal-cell.weekend { background:var(--surface-2); }
.cal-cell.now { background:var(--violet-soft); }
.cal-ev {
  position:absolute; left:2px; right:2px; border-radius:5px; padding:2px 5px;
  font-size:10.5px; line-height:1.25; overflow:hidden; cursor:pointer; z-index:1;
  border-left:2.5px solid currentColor;
}
.cal-ev:hover { z-index:5; box-shadow:var(--shadow-md); }
.cal-ev b { display:block; font-weight:650; font-size:10.5px; }
.cal-ev .ev-sub { opacity:.8; font-size:10px; }

.cal-month { display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); border-left:1px solid var(--line-soft); border-top:1px solid var(--line-soft); }
.cal-mcell { min-height:104px; border-right:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); padding:5px 6px; display:flex; flex-direction:column; gap:2px; }
.cal-mcell.out { background:var(--surface-2); }
.cal-mcell.today-cell { background:var(--violet-soft); }
.cal-mnum { font-size:11.5px; font-weight:650; color:var(--text-2); margin-bottom:2px; }
.cal-mcell.today-cell .cal-mnum { color:var(--violet); }
.cal-pill {
  font-size:10.5px; border-radius:4px; padding:1px 5px; cursor:pointer;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:500;
  display:flex; align-items:center; gap:4px;
}
.cal-pill .cdot { width:5px; height:5px; border-radius:50%; background:currentColor; flex:none; }

.mini-cal { display:grid; grid-template-columns:repeat(7,1fr); gap:1px; }
.mini-cal .mc-dow { font-size:9.5px; font-weight:700; color:var(--text-4); text-align:center; padding-bottom:3px; }
.mini-cal button {
  border:0; background:none; height:24px; border-radius:6px; font-size:11.5px; cursor:pointer;
  color:var(--text-2); font-weight:500; position:relative;
}
.mini-cal button:hover { background:var(--surface-3); }
.mini-cal button.out { color:var(--text-4); }
.mini-cal button.on { background:var(--violet-fill); color:var(--violet-on); font-weight:700; }
.mini-cal button.has::after { content:''; position:absolute; bottom:3px; left:50%; transform:translateX(-50%); width:3px; height:3px; border-radius:50%; background:var(--violet); }
.mini-cal button.on.has::after { background:var(--violet-on); }

/* ----------------------------------------------------------------- FILES */
.folder-tree { display:flex; flex-direction:column; gap:2px; }
.folder-item {
  display:flex; align-items:center; gap:9px; padding:7px 10px; border-radius:8px;
  cursor:pointer; font-size:12.5px; font-weight:500; color:var(--text-2);
}
.folder-item:hover { background:var(--surface-3); color:var(--text); }
.folder-item.on { background:var(--violet-soft); color:var(--violet); font-weight:600; }
.folder-item .n { margin-left:auto; font-size:11px; color:var(--text-3); font-weight:600; }
.folder-item.on .n { color:var(--violet); }
.file-ico { width:30px; height:30px; border-radius:7px; display:flex; align-items:center; justify-content:center; flex:none; font-size:9px; font-weight:800; letter-spacing:.02em; }

/* ---------------------------------------------------------------- DRAWER */
.overlay {
  position:fixed; inset:0; background:rgba(30,27,38,.34); z-index:200;
  opacity:0; pointer-events:none; transition:opacity .18s; backdrop-filter:blur(1.5px);
}
.overlay.on { opacity:1; pointer-events:auto; }
.drawer {
  position:fixed; top:0; right:0; bottom:0; width:min(560px, 94vw);
  background:var(--surface); z-index:201; box-shadow:var(--shadow-lg);
  transform:translateX(102%); transition:transform .22s cubic-bezier(.32,.72,.35,1);
  display:flex; flex-direction:column;
}
.drawer.on { transform:none; }
.drawer.wide { width:min(880px, 96vw); }
.drawer-head { padding:15px 18px; border-bottom:1px solid var(--line); display:flex; align-items:flex-start; gap:12px; }
.drawer-body { flex:1 1 auto; overflow-y:auto; padding:18px; }
.drawer-foot { padding:12px 18px; border-top:1px solid var(--line); display:flex; gap:8px; justify-content:flex-end; background:var(--surface-2); }

.modal {
  position:fixed; top:50%; left:50%; transform:translate(-50%,-48%) scale(.98);
  width:min(620px, 94vw); max-height:88vh; background:var(--surface); border-radius:var(--radius-lg);
  z-index:201; box-shadow:var(--shadow-lg); display:flex; flex-direction:column;
  opacity:0; pointer-events:none; transition:opacity .16s, transform .16s;
}
.modal.on { opacity:1; pointer-events:auto; transform:translate(-50%,-50%) scale(1); }
.modal-head { padding:15px 18px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:10px; }
.modal-body { padding:18px; overflow-y:auto; }
.modal-foot { padding:12px 18px; border-top:1px solid var(--line); display:flex; gap:8px; justify-content:flex-end; background:var(--surface-2); border-radius:0 0 var(--radius-lg) var(--radius-lg); }

.menu {
  position:absolute; background:var(--surface); border:1px solid var(--line);
  border-radius:10px; box-shadow:var(--shadow-lg); padding:5px; min-width:198px; z-index:300;
}
.menu-item {
  display:flex; align-items:center; gap:9px; padding:7px 9px; border-radius:7px;
  font-size:12.5px; cursor:pointer; color:var(--text-2); white-space:nowrap;
}
.menu-item:hover { background:var(--surface-3); color:var(--text); }
.menu-item.on { color:var(--violet); background:var(--violet-soft); font-weight:600; }
.menu-item.danger { color:var(--t-red-fg); }
.menu-sep { height:1px; background:var(--line-soft); margin:4px 0; }
.menu-label { font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-4); padding:7px 9px 4px; }

.toast-wrap { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); z-index:400; display:flex; flex-direction:column; gap:8px; align-items:center; }
.toast {
  background:#2C2934; color:#fff; border-radius:9px; padding:9px 14px; font-size:12.5px; font-weight:500;
  box-shadow:var(--shadow-lg); display:flex; align-items:center; gap:9px;
  animation:toastIn .2s ease; max-width:min(520px, 92vw);
}
.toast .ico { color:#A78BFA; }
@keyframes toastIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

/* ------------------------------------------------------- SEARCH DROPDOWN */
.search-pop {
  position:absolute; top:calc(100% + 6px); left:0; right:0; background:var(--surface);
  border:1px solid var(--line); border-radius:11px; box-shadow:var(--shadow-lg);
  max-height:min(520px, 72vh); overflow-y:auto; padding:6px; z-index:80;
}
.sp-group-label { font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-4); padding:8px 9px 4px; display:flex; align-items:center; gap:6px; }
.sp-item { display:flex; align-items:center; gap:10px; padding:7px 9px; border-radius:8px; cursor:pointer; }
.sp-item:hover, .sp-item.cursor { background:var(--violet-soft); }
.sp-title { font-size:12.5px; font-weight:600; }
.sp-sub { font-size:11.5px; color:var(--text-3); }

/* ---------------------------------------------------------------- CHARTS */
.chart-svg { display:block; width:100%; overflow:visible; }
.chart-svg text { font-family:var(--font); }
.legend { display:flex; flex-wrap:wrap; gap:6px 14px; }
.legend-item { display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--text-2); }
.legend-swatch { width:9px; height:9px; border-radius:3px; flex:none; }
.donut-center { text-align:center; }

/* -------------------------------------------------------------- SETTINGS */
.settings-layout { display:grid; grid-template-columns:216px 1fr; gap:18px; align-items:start; }
.set-nav { display:flex; flex-direction:column; gap:1px; position:sticky; top:calc(var(--topbar-h) + 16px); }
.set-nav-item { padding:8px 11px; border-radius:8px; font-size:12.5px; font-weight:500; color:var(--text-2); cursor:pointer; display:flex; align-items:center; gap:9px; }
.set-nav-item:hover { background:var(--ivory-300); color:var(--text); }
.set-nav-item.on { background:var(--violet-soft); color:var(--violet); font-weight:600; }
.set-row { display:flex; align-items:center; gap:14px; padding:13px 16px; border-bottom:1px solid var(--line-soft); }
.set-row:last-child { border-bottom:0; }
.set-row .grow { min-width:0; }
.set-name { font-size:12.5px; font-weight:600; }
.set-desc { font-size:11.5px; color:var(--text-3); margin-top:1px; }

.integration-card { border:1px solid var(--line); border-radius:11px; padding:13px; display:flex; flex-direction:column; gap:9px; background:var(--surface); }
.integration-card:hover { border-color:var(--line-strong); }
.int-top { display:flex; align-items:center; gap:10px; }
.int-logo { width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex:none; }
.int-flow { display:flex; flex-direction:column; gap:4px; font-size:11.5px; color:var(--text-2); border-top:1px solid var(--line-soft); padding-top:9px; }
.int-flow div { display:flex; align-items:center; gap:6px; }

.perm-table th { text-align:center; }
.perm-table th:first-child { text-align:left; }
.perm-table td { text-align:center; }
.perm-table td:first-child { text-align:left; font-weight:600; }
.perm-yes { color:var(--t-green-fg); }
.perm-no { color:var(--text-4); }
.perm-part { color:var(--t-amber-fg); }

/* ------------------------------------------------------------ RESPONSIVE */
@media (max-width:1400px) {
  .g-6 { grid-template-columns:repeat(3, minmax(0,1fr)); }
}
@media (max-width:1200px) {
  .g-4 { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .g-2-1, .g-1-2, .g-3-2 { grid-template-columns:minmax(0,1fr); }
  .span-2, .span-3 { grid-column:span 1; }
}
@media (max-width:980px) {
  :root { --sidebar-w:68px; }
  .sidebar .brand-text, .nav-label, .nav-count { display:none; }
  .nav-item { justify-content:center; padding:9px; }
  .g-3, .g-6 { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .settings-layout { grid-template-columns:minmax(0,1fr); }
  .record-head { flex-direction:column; }
  .record-cover { width:100%; height:170px; }
}
@media (max-width:720px) {
  .content { padding:14px 12px 40px; }
  .g-2, .g-3, .g-4, .g-6 { grid-template-columns:minmax(0,1fr); }
  .global-search { max-width:none; }
  .page-head { flex-direction:column; }
}

/* ------------------------------------------------------------------ PRINT */
@media print {
  .sidebar, .topbar, .page-actions, .toolbar, .pager { display:none !important; }
  body { background:#fff; }
  .card { break-inside:avoid; box-shadow:none; }
}

/* ------------------------------------------------------- STULPELINE DIAGRAMA */
/* Vietoj istempto SVG - iprastas islietas. Etiketes lieka normalaus dydzio,
   o spalvos ateina is temos, todel diagrama vienodai skaitoma sviesioje ir
   tamsioje temoje. */
.bchart { display:flex; align-items:stretch; gap:6px; width:100%; }
.bchart-col { flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:4px; }
.bchart-val {
  flex:none; height:14px; font-size:11px; font-weight:700; line-height:14px;
  text-align:center; color:var(--text-2); font-variant-numeric:tabular-nums;
}
.bchart-track { flex:1 1 auto; min-height:0; display:flex; align-items:flex-end; }
.bchart-bar { width:100%; border-radius:3px 3px 0 0; min-height:2px; }
.bchart-lbl {
  flex:none; font-size:10.5px; line-height:1.25; text-align:center;
  color:var(--text-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
@media (max-width:720px) {
  /* Telefone etiketes netelpa horizontaliai - pasukame jas. */
  .bchart { gap:3px; }
  .bchart-lbl {
    writing-mode:vertical-rl; transform:rotate(180deg);
    white-space:nowrap; max-height:64px; margin:0 auto;
  }
}

/* ------------------------------------------------------- LINIJINE DIAGRAMA */
/* SVG tempiamas tik linijai ir uzpildui; taskai ir etiketes yra HTML, todel
   nei apskritimai, nei tekstas neiskraipomi (zr. core/ui.js ui.lineChart). */
.lchart { display:flex; flex-direction:column; width:100%; }
.lchart-plot { position:relative; flex:1 1 auto; min-height:0; }
.lchart-svg { display:block; width:100%; height:100%; }
.lchart-dot {
  position:absolute; width:7px; height:7px; border-radius:50%;
  transform:translate(-50%, -50%);
  background:var(--surface); border:1.6px solid var(--violet);
  box-sizing:border-box; pointer-events:auto;
}
.lchart-lbls { position:relative; flex:none; height:16px; margin-top:4px; }
.lchart-lbl {
  position:absolute; top:0; font-size:10.5px; line-height:16px;
  color:var(--text-3); white-space:nowrap;
}