/* =============================================================
   RiskSensei — SIDEBARS stylesheet (SCOPED EXTRACT, adapted)
   In scope ONLY:
     1. Left sidebar  (.left-sidebar  — the "Binder" navigation)
     2. Right stepper (.right-stepper — the workflow progress rail)
        + its mobile fallback (.stepper-mobile)
     3. AI usage meter (.ai-meter, bottom variant) — lives at the
        bottom of the left sidebar.
   The top bar and the in-app/content area are OUT OF SCOPE.

   NOTE (adaptation): the design tokens are declared on the sidebar
   WRAPPER selectors (not :root) so the generic names (--ink, --line,
   --panel, --ac …) cannot leak into the top bar / content area.
   ============================================================= */

/* ---------- design tokens — scoped to the sidebar wrappers ---------- */
.left-sidebar, .right-stepper, .stepper-mobile{
  --panel:#ffffff;       /* surfaces / cards */
  --panel-2:#eceff4;     /* recessed surfaces, sheet bg */
  --chrome:#e7ecf1;      /* sidebar chrome bg */
  --line:#dce2ea;        /* hairline borders */
  --line-2:#c9d2dd;      /* stronger borders */
  --ink:#1e293b;         /* primary text */
  --ink-2:#475569;       /* secondary text */
  --ink-3:#7b8694;       /* muted text */
  --active:#dbe2eb;      /* active nav-item bg */
  --hover:rgba(30,41,59,.05);
  --mono:'Poppins','Geist',system-ui,sans-serif; /* AI kreditų skaičiai — Poppins */
  --shadow-sm:0 1px 2px rgba(15,23,42,.06);
  --shadow-lg:0 20px 56px -16px rgba(15,23,42,.30);

  /* right-stepper accent (kept as a variable so it can be themed) */
  --step:#2563eb;
  /* brand accent (AI-meter spark uses this) */
  --ac:#2563eb;--ac-50:#eff6ff;--ac-200:#bfdbfe;

  font-family:'Geist','Inter',system-ui,sans-serif;
}

/* density (drives nav item sizing) — applied on the app root */
[data-density="comfortable"]{--nav-fs:13.5px;--item-h:34px;}
[data-density="compact"]{--nav-fs:12.5px;--item-h:29px;}
/* fallback in case data-density is absent */
.left-sidebar{--nav-fs:13.5px;--item-h:34px;}
[data-density="compact"] .left-sidebar{--nav-fs:12.5px;--item-h:32px;}

/* =============================================================
   1) LEFT SIDEBAR — "Binder" model
   ============================================================= */
.left-sidebar{position:relative;background:var(--panel);border-right:1px solid var(--line);flex-shrink:0;display:flex;flex-direction:column;width:266px;height:100vh;transition:width .26s cubic-bezier(.2,.8,.2,1);}
[data-density="compact"] .left-sidebar:not(.collapsed){width:240px;}
.left-sidebar.collapsed{width:70px;}

/* folder tabs */
.binder-tabs{display:flex;gap:5px;padding:12px 12px 0;flex-shrink:0;}
.collapsed .binder-tabs{flex-direction:column;align-items:center;gap:6px;padding:12px 0 0;}
.btab{position:relative;flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:6px;height:40px;border:1px solid transparent;border-bottom:none;border-radius:11px 11px 0 0;background:transparent;color:var(--ink-3);font-size:12px;font-weight:700;cursor:pointer;transition:color .15s,background .15s;margin-bottom:-1px;z-index:3;font-family:inherit;padding:0 6px;}
.btab svg{flex-shrink:0;}
.left-sidebar .btab.btab-platform.on{color:var(--ac);}
.btab:not(.on):hover{color:var(--ink);background:var(--hover);border-radius:10px 10px 0 0;}
.btab.on{color:var(--ink);background:var(--panel-2);border-color:var(--line);}
/* „Nustatymai" aktyvus skirtukas — mėlynas akcentas (šriftas + piktograma per currentColor) */
.left-sidebar .btab.btab-settings.on{color:var(--ac);}
.btab .lab{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
/* 3 skirtukai (super) — tik ikonos, vardai per tooltip (title). */
.binder-tabs.tabs-3 .btab{gap:0;}
.binder-tabs.tabs-3 .btab .lab{display:none;}
.collapsed .btab{width:46px;height:44px;border:1px solid transparent;border-radius:12px;margin:0;}
.collapsed .btab .lab{display:none;}
.collapsed .btab:not(.on):hover{border-radius:12px;}
.collapsed .btab.on{background:var(--panel-2);border-color:var(--line);box-shadow:var(--shadow-sm);}

/* sheet — the card that flips between menu and settings */
.binder-sheet{flex:1;display:flex;flex-direction:column;min-height:0;margin:0 12px 12px;background:var(--panel-2);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-sm);overflow:hidden;}
.left-sidebar[data-panel="main"]:not(.collapsed) .binder-sheet{border-top-left-radius:0;}
.left-sidebar[data-panel="settings"]:not(.collapsed) .binder-sheet{border-top-right-radius:0;}
.collapsed .binder-sheet{margin:8px 9px 10px;border-radius:14px;overflow:visible;}
.binder-scroll{flex:1;overflow-y:auto;padding:9px 10px 11px;}
.collapsed .binder-sheet>.rail-scroll{padding:7px 0;}

/* archive link + nav groups */
.archive-link{display:flex;align-items:center;gap:7px;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);background:transparent;border:none;cursor:pointer;padding:6px 10px 14px;transition:.15s;font-family:inherit;}
.archive-link:hover{color:var(--ink);}
.nav-group{margin-bottom:12px;}
.nav-group:last-child{margin-bottom:2px;}
.group-head{font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);padding:0 10px;margin-bottom:4px;}

/* nav items */
.nav-item{position:relative;width:100%;display:flex;align-items:center;gap:11px;min-height:var(--item-h);padding:5px 11px;border-radius:10px;background:transparent;border:none;cursor:pointer;color:var(--ink-2);font-size:var(--nav-fs);font-weight:600;transition:.15s;margin-bottom:1px;text-align:left;font-family:inherit;}
.nav-item:hover{background:var(--hover);color:var(--ink);}
.nav-item.is-active{background:var(--active);color:var(--ink);}
.nav-item.is-active svg{color:var(--ink);}
.nav-text{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;}
.nav-label{max-width:100%;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.nav-subtitle{font-size:10.5px;font-weight:500;color:var(--ink-3);margin-top:1px;}
.nav-item.is-active .nav-subtitle{color:var(--ink-2);}
.nav-sub{font-size:9.5px;font-weight:700;color:var(--ink-3);background:var(--panel-2);border:1px solid var(--line);padding:1px 6px;border-radius:6px;letter-spacing:.02em;}
.nav-item.is-active .nav-sub{color:var(--ink-2);background:#fff;border-color:var(--line-2);}
.nav-badge{min-width:19px;height:19px;border-radius:99px;background:#2262ca;color:#fff;font-size:10.5px;font-weight:700;display:grid;place-items:center;padding:0 5px;}
/* „Aktyvaus vertinimo" (pareigybės) sekcijos punktų pavadinimai — mėlyni. */
.aa-tree .nav-label{color:#2262ca;}
.aa-tree .nav-item.is-active .nav-label{color:#1b4fa6;}

/* „Hibridas": aktyvaus vertinimo antraštė (B lygmuo) VIRŠUJE — be kortelės rėmo,
   tik pavadinimas + objektas, atskirtas plona linija nuo įrankių. */
.aa-context{padding:2px 11px 9px;margin-bottom:6px;border-bottom:1px solid var(--line);}
.aa-context .aa-title{font-size:13.5px;font-weight:700;color:#2262ca;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.aa-context .aa-sub{font-size:10.5px;color:var(--ink-3);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* „Ataskaitos" suskleidžiamas medis */
.nav-item.tree-parent .tree-chev{margin-left:4px;color:var(--ink-3);flex-shrink:0;}
.nav-item.tree-parent.is-active .tree-chev{color:var(--ink);}
.tree-children{margin:1px 0 2px;}
.tree-children .nav-item{padding-left:30px;min-height:30px;}

/* Medžio jungiamosios linijos. „Šakos" stuburas (.aa-branch) eina per įrankius ir
   baigiasi ties „Ataskaitos" centru; vaikų stuburas — nuo „Ataskaitos" iki
   PASKUTINIO vaiko centro (jokio kabančio galo). */
.aa-tree{position:relative;}
.aa-branch{position:relative;padding-left:14px;}
.aa-branch::before{content:"";position:absolute;left:6px;top:16px;bottom:19px;width:1.5px;background:var(--line-2);border-radius:2px;}
.aa-branch>.nav-item{position:relative;}
.aa-branch>.nav-item::before{content:"";position:absolute;left:-8px;top:50%;transform:translateY(-50%);width:8px;height:1.5px;background:var(--line-2);border-radius:2px;}
/* įdėtas Ataskaitų vaikų medis */
.aa-tree .tree-children{position:relative;}
.aa-tree .tree-children::before{content:"";position:absolute;left:20px;top:-19px;bottom:19px;width:1.5px;background:var(--line-2);border-radius:2px;}
.aa-tree .tree-children>.nav-item{position:relative;}
.aa-tree .tree-children>.nav-item::before{content:"";position:absolute;left:20px;top:50%;transform:translateY(-50%);width:9px;height:1.5px;background:var(--line-2);border-radius:2px;}

/* „DSS sistema" medis Įmonės grupėje — tos pačios jungiamosios linijos kaip
   Ataskaitose, bet be mėlynų vertinimo etikečių (todėl atskira klasė). */
.company-tree{position:relative;}
.company-tree .tree-children{position:relative;}
.company-tree .tree-children::before{content:"";position:absolute;left:20px;top:-19px;bottom:19px;width:1.5px;background:var(--line-2);border-radius:2px;}
.company-tree .tree-children>.nav-item{position:relative;}
.company-tree .tree-children>.nav-item::before{content:"";position:absolute;left:20px;top:50%;transform:translateY(-50%);width:9px;height:1.5px;background:var(--line-2);border-radius:2px;}

/* Grupių atskyrimas: plona linija virš ĮMONĖ grupės (kai rodomi vertinimo įrankiai) */
.company-sep{border-top:1px solid var(--line);margin-top:4px;padding-top:9px;}

/* suskleisto bėgio grupių skirtukas */
.rail-divider{width:26px;height:1px;background:var(--line-2);margin:5px 0;flex-shrink:0;}

/* AI meter — pinned to the bottom of the sheet, persists across tabs */
.sheet-foot{border-top:1px solid var(--line);padding:10px;}

/* Programos versija — po AI skaitikliu, kairėje, prislopinta (mono). */
.sheet-ver{margin-top:8px;display:flex;flex-direction:column;gap:1px;padding-left:2px;}
.sheet-ver .sv-v{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9.5px;font-weight:600;color:var(--ink-3);letter-spacing:.02em;}
.sheet-ver .sv-b{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9px;color:var(--ink-3);opacity:.75;}

/* collapse handle on the spine */
.binder-handle{position:absolute;top:50%;transform:translateY(-50%);right:-11px;width:22px;height:22px;border-radius:99px;background:var(--panel);border:1px solid var(--line-2);color:var(--ink-3);display:grid;place-items:center;cursor:pointer;z-index:30;box-shadow:var(--shadow-sm);transition:color .15s,border-color .15s,background .15s;}
.binder-handle:hover{color:var(--ink);border-color:var(--ink-3);background:var(--panel-2);}

/* ---------- collapsed icon rail ---------- */
.rail-scroll{flex:1;width:100%;overflow:visible;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 0;}
.rail-slot{position:relative;display:flex;justify-content:center;width:100%;}
.rail-btn{position:relative;width:46px;height:46px;border-radius:13px;display:grid;place-items:center;color:var(--ink-2);background:transparent;border:none;cursor:pointer;transition:.15s;}
.rail-btn:hover{background:var(--hover);color:var(--ink);}
.rail-btn.is-active{background:var(--active);color:var(--ink);}

/* Suskleisto bėgio apačia — įmonės indikatorius (super) + sunaudoti AI kreditai. */
.rail-foot{border-top:1px solid var(--line);padding:8px 0 10px;display:flex;flex-direction:column;align-items:center;gap:6px;flex-shrink:0;}
.rail-company{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:transparent;color:var(--ink-2);cursor:pointer;transition:.15s;}
.rail-company:hover{background:var(--hover);color:var(--ink);}
.rail-company.has-co{background:#ecfdf5;border-color:#a7f3d0;color:#059669;}
.rail-company.has-co:hover{background:#d1fae5;}
.rail-credits{display:flex;flex-direction:column;align-items:center;gap:1px;color:#16a34a;line-height:1;cursor:default;}
.rail-credits span{color:var(--ink-2);font-size:11px;font-weight:700;letter-spacing:.01em;}
.rail-badge{position:absolute;top:6px;right:6px;min-width:16px;height:16px;border-radius:99px;background:#2262ca;color:#fff;font-size:9.5px;font-weight:700;display:grid;place-items:center;padding:0 4px;border:2px solid var(--chrome);}
.flyout{position:absolute;left:50px;top:0;z-index:60;padding-left:10px;opacity:0;pointer-events:none;transition:opacity .12s;}
.rail-slot:hover .flyout{opacity:1;pointer-events:auto;}
.flyout-card{background:var(--panel);border:1px solid var(--line);border-radius:13px;box-shadow:var(--shadow-lg);padding:7px;min-width:160px;}
.fly-single{white-space:nowrap;padding:6px 11px;}
.fly-label{font-size:13px;font-weight:600;color:var(--ink);}

/* =============================================================
   3) AI USAGE METER (bottom-of-sidebar variant)
   ============================================================= */
.ai-meter{position:relative;}
.ai-trigger{display:inline-flex;align-items:center;gap:7px;border-radius:10px;cursor:pointer;transition:.15s;font-family:inherit;}
.ai-spark{width:18px;height:18px;border-radius:7px;display:grid;place-items:center;background:var(--ac-50);color:var(--ac);flex-shrink:0;}
.ai-trigger .chev{color:var(--ink-3);transition:transform .2s;}
.ai-meter.open .ai-trigger .chev{transform:rotate(180deg);}

.ai-bottom .ai-trigger{width:100%;padding:9px 11px;border:1px solid var(--line);background:var(--panel);border-radius:11px;flex-direction:row;gap:9px;}
.ai-bottom .ai-trigger:hover{border-color:var(--line-2);background:var(--panel-2);}
.ai-bottom .ai-meta{flex:1;min-width:0;text-align:left;display:flex;flex-direction:column;gap:1px;}
.ai-bottom .ai-meta .l{font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);display:flex;align-items:center;gap:5px;}
.ai-bottom .ai-meta .l .dot{width:6px;height:6px;border-radius:99px;flex-shrink:0;}
.ai-bottom .ai-meta .v{font-size:13px;font-weight:600;color:var(--ink-2);font-family:var(--mono);font-feature-settings:"tnum" 1;}

/* popover (opens upward from the bottom meter) */
.ai-pop{position:absolute;z-index:80;width:268px;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);padding:15px;}
.ai-bottom .ai-pop{bottom:calc(100% + 9px);left:0;right:0;width:auto;}
.aip-head{display:flex;align-items:center;gap:9px;margin-bottom:13px;}
.aip-title{font-size:13px;font-weight:700;color:var(--ink);flex:1;}
.ai-test{font-size:9px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);border:1px solid var(--line-2);border-radius:5px;padding:1px 5px;}
.aip-model{font-size:12px;font-weight:600;color:var(--ink);background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:7px 10px;display:flex;align-items:center;gap:7px;margin-bottom:13px;}
.aip-model em{font-style:normal;color:var(--ink-3);font-weight:500;margin-left:auto;}
.aip-rows{display:grid;gap:7px;font-size:12px;margin-bottom:2px;}
.aip-rows .r{display:flex;justify-content:space-between;color:var(--ink-3);}
.aip-rows .r b{color:var(--ink);font-weight:600;font-family:var(--mono);font-feature-settings:"tnum" 1;}
.aip-rows .r.total{padding-top:8px;border-top:1px dashed var(--line);color:var(--ink-2);font-weight:600;}
.aip-rows .r.total b{color:var(--ink);}
.aip-link{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;margin-top:13px;padding:9px;border-radius:9px;border:1px solid var(--line);background:transparent;cursor:pointer;font-size:12.5px;font-weight:600;color:var(--ink-2);transition:.14s;font-family:inherit;}
.aip-link:hover{background:var(--panel-2);color:var(--ink);border-color:var(--line-2);}

/* =============================================================
   2) RIGHT STEPPER (v3 layout)
   ============================================================= */
.right-stepper{position:relative;width:182px;flex-shrink:0;border-left:1px solid var(--line);background:#f9fafb;overflow-y:auto;display:flex;flex-direction:column;padding:20px 16px 24px;height:100vh;transition:width .26s cubic-bezier(.2,.8,.2,1);font-family:'Geist','Inter',system-ui,sans-serif;}

/* collapse toggle */
.rs-toggle{position:absolute;top:14px;right:12px;width:24px;height:24px;border-radius:7px;border:1px solid var(--line);background:var(--panel);color:var(--ink-3);display:grid;place-items:center;cursor:pointer;transition:.15s;}
.rs-toggle:hover{background:var(--hover);color:var(--ink);}

/* progress header */
.rs-head{position:relative;margin-bottom:22px;}
.rs-label{font-size:9.5px;font-weight:800;letter-spacing:.10em;text-transform:uppercase;color:var(--ink-3);}
.rs-pct{font-size:30px;font-weight:800;color:var(--ink);letter-spacing:-.03em;line-height:1.05;margin-top:1px;}
.rs-pct-mini{display:none;font-size:13px;font-weight:800;color:var(--ink);letter-spacing:-.02em;text-align:center;}
.rs-bar{height:5px;border-radius:99px;background:var(--line);margin:9px 0 7px;overflow:hidden;}
.rs-bar span{display:block;height:100%;border-radius:99px;background:var(--step);transition:width .4s;}
.rs-sub{font-size:10.5px;color:var(--ink-3);font-weight:500;}

/* step list */
.rs-list{display:flex;flex-direction:column;margin-top:6px;}
.rs-step{display:flex;gap:11px;text-align:left;}
.rs-rail{display:flex;flex-direction:column;align-items:center;flex-shrink:0;width:28px;}
.rs-dot{width:28px;height:28px;border-radius:99px;display:grid;place-items:center;border:2px solid var(--line-2);background:var(--panel-2);color:var(--ink-3);flex-shrink:0;transition:.2s;}
.rs-num{font-size:11px;font-weight:700;}
.rs-conn{width:2px;height:30px;background:var(--line-2);border-radius:2px;margin:5px 0;}
.rs-text{padding-top:4px;min-width:0;}
.rs-name{font-size:14px;font-weight:700;line-height:1.15;letter-spacing:-.01em;color:var(--ink);}
.rs-status{margin-top:3px;font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);}
.rs-step.is-clickable{cursor:pointer;}
.rs-step.is-clickable .rs-text:hover .rs-name{color:var(--step);}

/* states */
.state-done .rs-dot{border-color:var(--step);background:var(--panel);color:var(--step);}
.state-done .rs-conn{background:var(--step);}
.state-active .rs-dot{border-color:var(--step);background:var(--panel);color:var(--step);box-shadow:0 0 0 4px color-mix(in srgb,var(--step) 16%,transparent);}
.state-active .rs-name{color:var(--step);}
.state-active .rs-status{color:var(--step);}
.state-next .rs-dot{border-color:var(--line-2);background:var(--panel);color:var(--ink-2);}
.state-next .rs-name{color:var(--ink);}
.state-pending .rs-dot{border-color:var(--line-2);background:var(--panel-2);color:var(--ink-3);}
.state-pending .rs-name{color:var(--ink-3);}

/* active-step pulse (guarded for reduced-motion) */
@media (prefers-reduced-motion: no-preference){
  .state-active .rs-dot{animation:rsPulse 2.2s ease-out infinite;}
}
@keyframes rsPulse{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--step) 32%,transparent);}
  70%{box-shadow:0 0 0 9px color-mix(in srgb,var(--step) 0%,transparent);}
  100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--step) 0%,transparent);}
}

/* collapsed: dots + % number only */
.right-stepper.is-collapsed{width:56px;padding:20px 0 24px;align-items:center;}
.is-collapsed .rs-toggle{position:static;margin:0 auto 12px;}
.is-collapsed .rs-head{margin-bottom:18px;width:100%;}
.is-collapsed .rs-label,.is-collapsed .rs-pct,.is-collapsed .rs-bar,.is-collapsed .rs-sub,.is-collapsed .rs-text{display:none;}
.is-collapsed .rs-pct-mini{display:block;}
.is-collapsed .rs-list{align-items:center;margin-top:6px;}
.is-collapsed .rs-step{justify-content:center;gap:0;}
.is-collapsed .rs-rail{width:28px;}

/* =============================================================
   MOBILE: right stepper becomes a bottom horizontal bar (<=900px)
   ============================================================= */
.stepper-mobile{display:none;font-family:'Geist','Inter',system-ui,sans-serif;}
@media (max-width:900px){
  .right-stepper{display:none;}
  .stepper-mobile{display:block;flex-shrink:0;border-top:1px solid var(--line);background:#f9fafb;padding:9px 12px calc(9px + env(safe-area-inset-bottom));box-shadow:0 -4px 18px -8px rgba(28,27,25,.18);}
  .sm-top{display:flex;align-items:baseline;gap:8px;margin-bottom:9px;padding:0 2px;}
  .sm-label{font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);}
  .sm-sub{font-size:11px;color:var(--ink-3);}
  .sm-track{display:flex;align-items:flex-start;padding:1px 0;}
  .sm-step{position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;}
  .sm-step:not(:last-child)::after{content:"";position:absolute;top:11px;left:calc(50% + 13px);width:calc(100% - 26px);height:2px;background:var(--line);border-radius:2px;}
  .sm-step.state-done::after{background:var(--step);}
  .sm-lab{display:none;}
}
.sm-dot{width:26px;height:26px;border-radius:99px;display:grid;place-items:center;border:2px solid var(--line);background:var(--panel-2);color:var(--ink-3);flex-shrink:0;}
.sm-num{font-size:11px;font-weight:700;}
.sm-step.state-done .sm-dot{background:var(--step);border-color:var(--step);color:#fff;}
.sm-step.state-active .sm-dot{background:var(--panel);border-color:var(--step);color:var(--step);box-shadow:0 0 0 4px color-mix(in srgb,var(--step) 16%,transparent);}
@media (prefers-reduced-motion: no-preference){
  .sm-step.state-active .sm-dot{animation:rsPulse 2.2s ease-out infinite;}
}
.sm-step.state-next .sm-dot{background:var(--panel);border-color:color-mix(in srgb,var(--step) 40%,var(--line));color:var(--step);}