/* ext.css — стили новых разделов (Материалы, Безубыточность LIVE, BOM, Сценарии, Документы, AI).
   Самодостаточно. styles.css и design-system.css НЕ трогаются. Всё scoped к новым секциям/классам. */

/* ---------- таблицы ---------- */
.ext-table-wrap { width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.ext-table { width:100%; border-collapse:collapse; font-size:var(--text-sm); color:var(--text-2); }
.ext-table th { position:sticky; top:0; text-align:left; font-weight:500; color:var(--text-3);
  background:linear-gradient(180deg,var(--grad-cell-top),var(--grad-cell-bot));
  padding:9px 12px; border-bottom:1px solid var(--border-2); white-space:nowrap; }
.ext-table td { padding:8px 12px; border-bottom:1px solid var(--border-1); vertical-align:top; }
.ext-table tr:hover td { background:rgba(180,230,235,0.04); }
.ext-table td.num, .ext-table th.num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.ext-table .strong { color:var(--text-1); font-weight:600; }
.ext-table .muted { color:var(--text-2); }

.ext-note { color:var(--text-3); font-size:var(--text-xs); margin-top:var(--sp-2); line-height:1.5; }
.ext-note-block { display:block; padding:10px 14px; border:1px solid var(--border-2); border-radius:var(--r-sm);
  background:rgba(255,200,87,0.06); color:var(--text-2); margin:0 0 var(--sp-3); }

.ext-select { background:linear-gradient(180deg,var(--grad-pill-top),var(--grad-pill-bot));
  color:var(--text-1); border:1px solid var(--border-2); border-radius:var(--r-sm);
  padding:9px 14px; font-size:var(--text-sm); font-family:var(--font-body); min-width:280px; cursor:pointer; }

/* ---------- статус-пилюли ---------- */
.pill { display:inline-block; padding:2px 9px; border-radius:var(--r-pill); font-size:var(--text-xs); font-weight:500; white-space:nowrap; border:1px solid transparent; }
.pill.ok   { color:var(--green-ok);  background:rgba(111,220,140,0.12); border-color:rgba(111,220,140,0.30); }
.pill.warn { color:var(--amber-warn);background:rgba(255,200,87,0.12);  border-color:rgba(255,200,87,0.30); }
.pill.risk { color:var(--red-risk);  background:rgba(255,139,115,0.12); border-color:rgba(255,139,115,0.30); }
.pill.crit { color:var(--red-crit);  background:rgba(255,98,98,0.14);   border-color:rgba(255,98,98,0.34); }
.pill.info { color:var(--text-2);    background:rgba(180,230,235,0.08); border-color:var(--border-2); }
.pill.blue { color:#8fd3ff;          background:rgba(120,190,255,0.12); border-color:rgba(120,190,255,0.30); }
.pill.gray { color:var(--text-3);    background:rgba(180,230,235,0.05); border-color:var(--border-1); }

/* ---------- индикатор безубыточности ---------- */
.be2-indicator-card { text-align:center; padding:22px 18px 18px; }
.be2-ind-label { color:var(--text-3); font-size:var(--text-sm); letter-spacing:.02em; }
.be2-ind-value { font-family:var(--font-display); font-size:clamp(2rem,1.4rem+3vw,3.2rem); line-height:1; margin:8px 0 4px; font-variant-numeric:tabular-nums; }
.be2-ind-sub { font-size:var(--text-sm); color:var(--text-2); }
.be2-ind-bar { position:relative; height:10px; border-radius:var(--r-pill); margin-top:14px;
  background:linear-gradient(90deg, rgba(255,98,98,.5) 0%, rgba(255,200,87,.5) 45%, rgba(111,220,140,.5) 100%); overflow:hidden; }
.be2-ind-bar i { position:absolute; top:-3px; width:4px; height:16px; border-radius:2px; background:#fff; box-shadow:0 0 6px rgba(255,255,255,.8); transition:left .35s var(--ease-out); }
.be2-good { color:var(--green-ok); } .be2-warn { color:var(--amber-warn); } .be2-bad { color:var(--red-crit); }
.be2-indicator-card.is-good { border-color:rgba(111,220,140,.35) !important; }
.be2-indicator-card.is-warn { border-color:rgba(255,200,87,.35) !important; }
.be2-indicator-card.is-bad  { border-color:rgba(255,98,98,.4) !important; }

/* ---------- рычаги ---------- */
.be2-controls { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:14px 22px; }
.be2-ctrl { display:flex; flex-direction:column; gap:6px; font-size:var(--text-sm); color:var(--text-2); }
.be2-ctrl .row { display:flex; justify-content:space-between; align-items:center; }
.be2-ctrl strong { color:var(--text-1); font-variant-numeric:tabular-nums; }
.be2-ctrl input[type=range] { width:100%; accent-color:#5cdcd0; }
.be2-ctrl.grp .tag { font-size:var(--text-xs); color:var(--text-3); }
.be2-actions { display:flex; gap:10px; margin-top:var(--sp-2); flex-wrap:wrap; }
.be2-product-row { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }

/* ---------- сценарии ---------- */
.scn-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; }
.scn-card { border:1px solid var(--border-2); border-radius:var(--r-md); padding:14px 16px;
  background:linear-gradient(180deg,var(--grad-card-top),var(--grad-card-bot)); }
.scn-card.base { border-color:var(--border-3); }
.scn-card h4 { margin:0 0 10px; font-size:var(--text-base); color:var(--text-1); font-weight:600; line-height:1.25; }
.scn-rows { display:grid; grid-template-columns:auto 1fr; gap:4px 10px; font-size:var(--text-sm); }
.scn-rows .k { color:var(--text-2); } .scn-rows .v { text-align:right; color:var(--text-1); font-variant-numeric:tabular-nums; }
.scn-rows .v.neg { color:var(--red-risk); } .scn-rows .v.pos { color:var(--green-ok); }
.scn-card .scn-liq { margin-top:10px; }

/* ---------- цепочки ---------- */
.chains-wrap { display:grid; gap:14px; }
.chain { border:1px solid var(--border-2); border-radius:var(--r-md); padding:12px 14px; background:rgba(180,230,235,0.03); }
.chain h4 { margin:0 0 10px; font-size:var(--text-base); color:var(--text-1); }
.chain-flow { display:flex; flex-wrap:wrap; align-items:stretch; gap:8px; }
.chain-step { display:flex; align-items:center; gap:8px; }
.chain-step .box { padding:7px 12px; border-radius:var(--r-sm); background:linear-gradient(180deg,var(--grad-cell-top),var(--grad-cell-bot));
  border:1px solid var(--border-2); color:var(--text-2); font-size:var(--text-sm); }
.chain-step .arrow { color:var(--red-risk); font-weight:700; }
.chain-step:last-child .arrow { display:none; }

/* ---------- kanban ---------- */
.kanban { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; }
.kanban .col { border:1px solid var(--border-2); border-radius:var(--r-md); padding:12px; text-align:center;
  background:linear-gradient(180deg,var(--grad-card-top),var(--grad-card-bot)); }
.kanban .col .cnt { font-family:var(--font-display); font-size:1.8rem; line-height:1; }
.kanban .col .nm { color:var(--text-2); font-size:var(--text-xs); margin-top:6px; }
.kanban .col .bar { height:4px; border-radius:2px; margin-top:8px; background:var(--border-2); }

/* ---------- фильтры ---------- */
.ext-filter { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:var(--sp-2); }
.ext-filter button { background:linear-gradient(180deg,var(--grad-pill-top),var(--grad-pill-bot));
  color:var(--text-2); border:1px solid var(--border-2); border-radius:var(--r-pill);
  padding:5px 13px; font-size:var(--text-xs); cursor:pointer; font-family:var(--font-body); transition:.15s; }
.ext-filter button:hover { border-color:var(--border-3); color:var(--text-1); }
.ext-filter button.active { background:linear-gradient(180deg,#1c5560,#0c3239); color:var(--text-1); border-color:var(--border-3); }

/* ---------- инсайты ---------- */
.ins-list { display:grid; gap:10px; }
.ins-card { display:grid; grid-template-columns:4px 1fr; gap:0; border:1px solid var(--border-1); border-radius:var(--r-md); overflow:hidden; background:rgba(180,230,235,0.03); }
.ins-card .stripe { width:4px; }
.ins-card .body { padding:11px 14px; }
.ins-card .head { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; flex-wrap:wrap; }
.ins-card .title { color:var(--text-1); font-weight:600; font-size:var(--text-sm); }
.ins-card .meta { color:var(--text-2); font-size:var(--text-xs); margin-top:4px; }
.ins-card .act { color:var(--text-2); font-size:var(--text-sm); margin-top:6px; }
.ins-card.crit .stripe { background:var(--red-crit); } .ins-card.warn .stripe { background:var(--amber-warn); }
.ins-card.info .stripe { background:#8fd3ff; } .ins-card.ok .stripe { background:var(--green-ok); }

.ext-bignum { font-variant-numeric:tabular-nums; }

/* drill-down документ → согласования */
.ext-table button.pill, .appr-obj-chip { cursor:pointer; font-family:var(--font-body); }
.appr-link { line-height:1.2; }
.appr-obj-chip { background:linear-gradient(180deg,#1c5560,#0c3239) !important; color:var(--text-1) !important; border:1px solid var(--border-3) !important; }

/* модальное окно документа (демо-режим) */
.ext-modal-bd { position:fixed; inset:0; background:rgba(3,18,21,.66); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); z-index:99999; display:none; align-items:center; justify-content:center; padding:20px; }
.ext-modal-bd.open { display:flex; }
.ext-modal { width:min(580px,94vw); max-height:86vh; overflow:auto; border-radius:var(--r-lg); border:1px solid var(--border-3);
  background:linear-gradient(180deg,var(--surface-2),var(--surface-0)); box-shadow:0 30px 80px rgba(0,0,0,.55); color:var(--text-1); }
.ext-modal-head { position:sticky; top:0; padding:18px 56px; border-bottom:1px solid var(--border-2); background:linear-gradient(180deg,var(--surface-2),rgba(19,65,72,.92)); }
.ext-modal-head h3 { margin:0; font-size:var(--text-lg); color:var(--text-1); line-height:1.25; text-align:center; }
.ext-modal-close { position:absolute; top:14px; right:16px; background:none; border:1px solid var(--border-2); color:var(--text-2); border-radius:8px; min-width:32px; height:32px; cursor:pointer; font-size:16px; line-height:1; }
.ext-modal-close:hover { color:var(--text-1); border-color:var(--border-3); }
.ext-modal-body { padding:18px 20px; }
.ext-modal-notice { display:flex; align-items:flex-start; gap:12px; padding:12px 14px; border-radius:var(--r-md); background:rgba(120,190,255,.10); border:1px solid rgba(120,190,255,.30); color:var(--text-1); margin-bottom:16px; font-size:var(--text-sm); line-height:1.5; }
.ext-modal-notice .ico { flex:0 0 auto; width:1.6rem; text-align:center; font-size:1.3rem; line-height:1.5; }
.ext-modal-fields { display:grid; grid-template-columns:auto 1fr; gap:9px 16px; font-size:var(--text-sm); }
.ext-modal-fields .k { color:var(--text-3); white-space:nowrap; }
.ext-modal-fields .v { color:var(--text-1); }
.ext-modal-actions { margin-top:18px; display:flex; gap:10px; }
.ext-modal-actions .btn[disabled] { opacity:.5; cursor:not-allowed; }
.row-clickable { cursor:pointer; }
.row-clickable:hover td { background:rgba(180,230,235,0.07); }

/* выпадающий список (.pp-select) поверх соседних карточек */
.pp-select.open { z-index: 200; }
.pp-select-panel { z-index: 200; }
#bom-unit .card { overflow: visible; }

/* при открытом дропдауне внутри карточки — поднять всю карточку над соседями */
.card.pp-host-open { position: relative; z-index: 1000; overflow: visible; }

/* ── Глобальная плавающая кнопка «Наверх» (matte liquid glass) ── */
.sge-scroll-top {
  position: fixed;
  right: 28px;
  bottom: 28px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(190, 245, 255, 0.18);
  background: linear-gradient(180deg, rgba(20, 88, 94, 0.55), rgba(14, 66, 72, 0.45));
  color: rgba(220, 240, 242, 0.92);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
  opacity: 0; visibility: hidden;
  transform: translateY(8px) scale(0.96);
  transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s,
              box-shadow .18s ease, border-color .18s ease, color .18s ease;
  z-index: 500;
}
.sge-scroll-top.is-visible {
  opacity: 1; visibility: visible;
  transform: translateY(0) scale(1);
  transition: opacity .22s ease, transform .22s ease, visibility 0s,
              box-shadow .18s ease, border-color .18s ease, color .18s ease;
}
.sge-scroll-top:hover {
  color: #fff;
  border-color: rgba(92, 220, 208, 0.42);
  box-shadow: 0 8px 26px rgba(0,0,0,.32),
              0 0 0 1px rgba(92, 220, 208, 0.18),
              0 0 18px rgba(92, 220, 208, 0.22);
}
.sge-scroll-top:active { transform: translateY(0) scale(0.94); }
.sge-scroll-top:focus-visible { outline: 2px solid rgba(92,220,208,.55); outline-offset: 3px; }
.sge-scroll-top svg { width: 20px; height: 20px; display: block; }
@media print { .sge-scroll-top { display: none !important; } }

/* ============================================================
   МОБИЛЬНАЯ НАВИГАЦИЯ (гамбургер + slide-in drawer)
   Активируется ≤ 900px. Десктоп не затронут.
   ============================================================ */
.sge-burger { display: none; }

@media (max-width: 900px){
  /* Скрыть десктопную горизонтальную nav и иконки */
  .header3 .main-nav { display: none !important; }
  .header3 > .main-nav-btn.icon-only { display: none !important; }
  /* Бургер виден */
  .sge-burger {
    display: inline-flex; align-items: center; justify-content: center;
    flex-direction: column; gap: 4px;
    width: 40px; height: 40px; border-radius: 10px;
    padding: 0; margin: 0 6px 0 auto;
    background: linear-gradient(180deg, rgba(20,88,94,.55), rgba(14,66,72,.45));
    border: 1px solid rgba(190,245,255,.18);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    backdrop-filter: blur(12px) saturate(140%);
    color: rgba(220,240,242,.92);
    cursor: pointer;
    transition: border-color .18s ease, box-shadow .18s ease;
  }
  .sge-burger:hover { border-color: rgba(92,220,208,.42); box-shadow: 0 0 0 1px rgba(92,220,208,.16); }
  .sge-burger span {
    display: block; width: 18px; height: 2px; background: currentColor;
    border-radius: 1px; transition: transform .25s ease, opacity .2s ease;
  }
  body.sge-mobile-open .sge-burger span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
  body.sge-mobile-open .sge-burger span:nth-child(2){ opacity: 0; }
  body.sge-mobile-open .sge-burger span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

  /* Компактный хедер */
  .header3 { padding-left: 12px !important; padding-right: 8px !important; }
  /* Бренд: оставляем логотип, текст сжать */
  .brand3 .brand-line1 { font-size: 1.05rem; }
  .brand3 .brand-line2 { font-size: 0.72rem; }
}

/* Backdrop */
.sge-mobile-backdrop {
  position: fixed; inset: 0;
  background: rgba(3,18,21,.55);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden;
  transition: opacity .25s ease, visibility 0s linear .25s;
  z-index: 9000;
}
body.sge-mobile-open .sge-mobile-backdrop {
  opacity: 1; visibility: visible;
  transition: opacity .25s ease, visibility 0s;
}

/* Drawer */
.sge-mobile-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(320px, 88vw);
  background: linear-gradient(180deg, rgba(20,88,94,.92), rgba(14,66,72,.92));
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  border-left: 1px solid rgba(190,245,255,.14);
  box-shadow: -20px 0 50px rgba(0,0,0,.35);
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.4,0,.2,1);
  z-index: 9001;
  display: flex; flex-direction: column;
  color: var(--text-1, #f0fafb);
}
body.sge-mobile-open .sge-mobile-drawer { transform: translateX(0); }
body.sge-mobile-open { overflow: hidden; }

.sge-mobile-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(190,245,255,.12);
}
.sge-mobile-title {
  font-family: var(--font-display, Fraunces, Georgia, serif);
  font-size: 1.05rem; color: var(--text-1, #f0fafb); letter-spacing: 0.02em;
}
.sge-mobile-close {
  background: none; border: 1px solid rgba(190,245,255,.18);
  color: var(--text-2, #b8d8da); width: 32px; height: 32px;
  border-radius: 8px; cursor: pointer; font-size: 16px;
  transition: color .15s, border-color .15s;
}
.sge-mobile-close:hover { color: var(--text-1, #f0fafb); border-color: rgba(92,220,208,.4); }

.sge-mobile-list {
  flex: 1; overflow-y: auto; padding: 12px 10px 24px;
  display: flex; flex-direction: column; gap: 4px;
  -webkit-overflow-scrolling: touch;
}
.sge-mobile-list::-webkit-scrollbar { width: 4px; }
.sge-mobile-list::-webkit-scrollbar-thumb { background: rgba(190,245,255,.18); border-radius: 2px; }

.sge-mobile-main {
  display: flex; justify-content: space-between; align-items: center;
  width: 100%; padding: 14px 14px; border-radius: 10px;
  background: rgba(255,255,255,.02); border: 1px solid transparent;
  color: var(--text-1, #f0fafb); font-size: 0.96rem;
  font-family: inherit; cursor: pointer; text-align: left;
  transition: background .15s, border-color .15s, color .15s;
}
.sge-mobile-main:hover, .sge-mobile-main:active {
  background: rgba(92,220,208,.10); border-color: rgba(92,220,208,.22);
}
.sge-mobile-group.is-current > .sge-mobile-main,
.sge-mobile-main.solo.is-active {
  background: linear-gradient(180deg, rgba(92,220,208,.14), rgba(92,220,208,.08));
  border-color: rgba(92,220,208,.3);
}
.sge-mobile-main .chev {
  width: 16px; height: 16px;
  transition: transform .22s ease;
  color: var(--text-3, #7ea6aa);
}
.sge-mobile-group.is-open .sge-mobile-main .chev { transform: rotate(180deg); }

.sge-mobile-sub {
  max-height: 0; overflow: hidden; padding: 0 0 0 12px;
  display: flex; flex-direction: column; gap: 2px;
  transition: max-height .28s ease, padding .22s ease;
}
.sge-mobile-group.is-open .sge-mobile-sub {
  max-height: 800px; padding: 4px 0 10px 12px;
}
.sge-mobile-link {
  display: block; width: 100%;
  padding: 11px 14px; border-radius: 8px;
  background: transparent; border: none;
  color: var(--text-2, #b8d8da); font-size: 0.9rem;
  font-family: inherit; cursor: pointer; text-align: left;
  transition: background .15s, color .15s;
  line-height: 1.35;
}
.sge-mobile-link:hover { background: rgba(92,220,208,.08); color: var(--text-1, #f0fafb); }
.sge-mobile-link.is-active {
  background: rgba(92,220,208,.14); color: var(--text-1, #f0fafb);
  border-left: 2px solid #5cdcd0; padding-left: 12px;
}

.sge-mobile-divider {
  height: 1px; background: rgba(190,245,255,.10);
  margin: 10px 4px;
}
.sge-mobile-action {
  padding: 12px 14px; border-radius: 10px;
  background: transparent; border: 1px solid rgba(190,245,255,.10);
  color: var(--text-2, #b8d8da); font-size: 0.92rem;
  text-align: left; cursor: pointer; font-family: inherit;
  transition: background .15s, color .15s, border-color .15s;
}
.sge-mobile-action:hover {
  background: rgba(92,220,208,.08);
  color: var(--text-1, #f0fafb);
  border-color: rgba(92,220,208,.24);
}

/* ── Компактные KPI-карточки в разделах документов (6 в одну строку) ── */
#doc-kpi,
#appr-kpi,
#prot-kpi,
#ar-ap > .kpi-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  gap: 10px !important;
}
#doc-kpi .kpi,
#appr-kpi .kpi,
#prot-kpi .kpi,
#ar-ap > .kpi-grid > .kpi {
  padding: 12px 14px !important;
  min-height: 0 !important;
  height: auto !important;
  grid-template-rows: auto auto auto !important;
}
#doc-kpi .kpi .label,
#appr-kpi .kpi .label,
#prot-kpi .kpi .label,
#ar-ap > .kpi-grid > .kpi .label {
  font-size: 0.74rem;
  line-height: 1.2;
}
#doc-kpi .kpi .value,
#appr-kpi .kpi .value,
#prot-kpi .kpi .value,
#ar-ap > .kpi-grid > .kpi .value {
  font-size: 1.55rem !important;
  line-height: 1.1 !important;
  letter-spacing: 0.01em;
  margin: 4px 0 0 !important;
}
#doc-kpi .kpi .conclusion,
#appr-kpi .kpi .conclusion,
#prot-kpi .kpi .conclusion {
  display: none;
}
#ar-ap > .kpi-grid > .kpi .conclusion {
  font-size: 0.7rem !important;
  opacity: 0.7;
  margin-top: 2px;
}
#ar-ap > .kpi-grid > .kpi .deltas {
  font-size: 0.68rem !important;
  margin-top: 2px;
}
#doc-kpi .kpi .label svg.card-status-icon,
#appr-kpi .kpi .label svg.card-status-icon,
#prot-kpi .kpi .label svg.card-status-icon,
#ar-ap > .kpi-grid > .kpi .label svg.card-status-icon {
  width: 14px; height: 14px;
}

/* На узких экранах автоматически переносит */
@media (max-width: 900px) {
  #doc-kpi, #appr-kpi, #prot-kpi, #ar-ap > .kpi-grid {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important;
  }
}