/* Finance section («Финансы» / #tab-bank) — scoped LIGHT theme + top tabs.
   The whole sub-tree gets light CSS-variable values, so every sub-tab that
   already uses var(--bg-*)/var(--text-*)/var(--border)/... (Акты, Счета,
   Платежи) turns light automatically. Rest of the app stays dark. */
#tab-bank, #tab-dashboard{
  --bg-0:#f4f6f9; --bg-1:#ffffff; --bg-2:#eef1f5; --bg-3:#f1f4f8; --bg-4:#e2e7ee;
  --border:rgba(17,24,39,.09); --border-hover:rgba(17,24,39,.16);
  --text-0:#10151f; --text-1:#39424f; --text-2:#697587; --text-3:#9aa4b3;
  --accent:#2f6fe0; --accent-hover:#2560cc; --accent-dim:rgba(47,111,224,.10); --accent-glow:rgba(47,111,224,.18);
  /* --warning приведён к #FFCC00 — тот же жёлтый акцент, что на странице
     клиентов (пауза/предупреждения/бейджи); был коричневатый #b5740a. */
  --success:#16a34a; --warning:#FFCC00; --danger:#dc3a34;
  --card-bg:#ffffff; --card-border:rgba(17,24,39,.09);
  --card-shadow:0 1px 2px rgba(16,24,40,.05),0 0 0 1px rgba(17,24,39,.04);
  --zebra:#f8fafc;
  background:var(--bg-0); color:var(--text-1);
}

/* navigation: left sub-nav (.tab-sidebar / .settings-nav-item) inherits the
   light vars above automatically — no layout override needed. */

/* light polish for the existing sub-tab markup (Акты/Счета/Платежи) */
#tab-bank .detail-card{background:var(--bg-1);border:1px solid var(--border);border-radius:12px;padding:16px 18px;box-shadow:var(--card-shadow)}
#tab-bank .btn{background:var(--bg-1);border:1px solid var(--border);color:var(--text-1)}
#tab-bank .btn:hover{background:var(--bg-2)}
#tab-bank .btn-primary{background:var(--accent);border-color:transparent;color:#fff}
#tab-bank .btn-primary:hover{background:var(--accent-hover)}
#tab-bank .btn-success{background:var(--success);border-color:transparent;color:#fff}
#tab-bank .form-input{background:var(--bg-1);border:1px solid var(--border);color:var(--text-0)}
#tab-bank .form-input::placeholder{color:var(--text-3)}

/* ── Обзор («.fxw») — light component palette ── */
#tab-bank .fxw{--ac:#2f6fe0;--acd:#2f6fe0;--gr:#16a34a;--am:#FFCC00;--rd:#dc3a34;--cd:#ffffff;--cd2:#f6f8fb;--bd:rgba(17,24,39,.09);--t0:#10151f;--t1:#39424f;--t2:#697587;--t3:#9aa4b3;color:var(--t0)}
#tab-bank .fxw .fx-hd{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:var(--gap-block);flex-wrap:wrap}
#tab-bank .fxw .fx-h{font-size:18px;font-weight:700;margin:0}
#tab-bank .fxw .fx-act{display:flex;gap:7px;align-items:center}
#tab-bank .fxw .fx-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:8px;border:1px solid var(--bd);background:var(--cd2);color:var(--t1);font-size:12px;font-weight:500;cursor:pointer}
#tab-bank .fxw .fx-btn:hover{background:#eef2f8}
#tab-bank .fxw .fx-sel{background:var(--cd2);border:1px solid var(--bd);border-radius:8px;color:var(--t1);font-size:12px;padding:6px 8px}
#tab-bank .fxw .fx-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:var(--gap-block)}
#tab-bank .fxw .fx-kpi{background:var(--cd);border:1px solid var(--bd);border-top:2.5px solid var(--acd);border-radius:12px;padding:13px 15px;box-shadow:var(--card-shadow)}
#tab-bank .fxw .fx-kpi.a{border-top-color:var(--am)}
#tab-bank .fxw .fx-kpi.g{border-top-color:var(--gr)}
#tab-bank .fxw .fx-kl{font-size:10px;font-weight:600;color:var(--t2);letter-spacing:.5px;text-transform:uppercase}
#tab-bank .fxw .fx-kv{font-size:21px;font-weight:700;margin:6px 0 3px;font-feature-settings:"tnum";white-space:nowrap}
#tab-bank .fxw .fx-ks{font-size:11px;color:var(--t3)}
#tab-bank .fxw .fx-wgs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:var(--gap-block)}
#tab-bank .fxw .fx-wg{background:var(--cd);border:1px solid var(--bd);border-radius:10px;padding:11px 12px;box-shadow:var(--card-shadow)}
#tab-bank .fxw .fx-wl{font-size:10px;color:var(--t3);font-weight:600;text-transform:uppercase;letter-spacing:.5px}
#tab-bank .fxw .fx-wv{font-size:16px;font-weight:700;margin-top:4px;font-feature-settings:"tnum"}
#tab-bank .fxw .fx-card{background:var(--cd);border:1px solid var(--bd);border-radius:12px;padding:13px 15px;margin-bottom:var(--gap-block);box-shadow:var(--card-shadow)}
#tab-bank .fxw .fx-ch{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
#tab-bank .fxw .fx-ct{font-size:13px;font-weight:700}
#tab-bank .fxw .fx-cs{font-size:11px;color:var(--t3)}
#tab-bank .fxw .fx-lk{font-size:11px;color:var(--ac);font-weight:600;cursor:pointer}
#tab-bank .fxw .fx-row2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:var(--gap-block)}
#tab-bank .fxw .fx-row2 .fx-card{margin-bottom:0}
#tab-bank .fxw .fx-lr{display:flex;align-items:center;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--bd);font-size:12px}
#tab-bank .fxw .fx-lr:last-child{border-bottom:none}
#tab-bank .fxw .fx-nm{color:var(--t1)}
#tab-bank .fxw .fx-sub{font-size:10px;color:var(--t3);margin-top:1px}
#tab-bank .fxw .fx-vv{font-family:var(--font-mono);font-weight:600;font-feature-settings:"tnum"}
#tab-bank .fxw .fx-vv.pos{color:var(--gr)}
#tab-bank .fxw .fx-vv.neg{color:var(--rd)}
#tab-bank .fxw .fx-tot{display:flex;align-items:center;justify-content:space-between;padding-top:9px;margin-top:3px;border-top:1px solid var(--bd);font-weight:700;font-size:12px}
#tab-bank .fxw .fx-empty{font-size:11.5px;color:var(--t3);padding:10px 2px}
#tab-bank .fxw .fx-tbl{width:100%;border-collapse:collapse;font-size:11.5px}
#tab-bank .fxw .fx-tbl thead th{text-align:right;font-size:10px;font-weight:600;color:var(--t3);text-transform:uppercase;letter-spacing:.5px;padding:8px 10px;background:var(--bg-3)}
#tab-bank .fxw .fx-tbl thead th:first-child{border-radius:8px 0 0 8px}
#tab-bank .fxw .fx-tbl thead th:last-child{border-radius:0 8px 8px 0}
#tab-bank .fxw .fx-tbl thead th:first-child{text-align:left}
#tab-bank .fxw .fx-tbl tbody td{padding:9px 10px;border:none;text-align:right;font-feature-settings:"tnum"}
#tab-bank .fxw .fx-tbl tbody tr:nth-child(even){background:var(--zebra)}
#tab-bank .fxw .fx-tbl tbody tr:hover{background:var(--bg-2)}
#tab-bank .fxw .fx-tbl tbody td:first-child{text-align:left}
#tab-bank .fxw .fx-cn{display:inline-flex;align-items:center;gap:8px;font-weight:600}
#tab-bank .fxw .fx-dot{width:3px;height:14px;border-radius:2px;display:inline-block}
#tab-bank .fxw .fx-pill{font-size:10px;font-weight:600;padding:2px 8px;border-radius:999px}
#tab-bank .fxw .fx-pill.pg{background:rgba(47,111,224,.10);color:#2f6fe0}
#tab-bank .fxw .fx-pill.pm{background:rgba(181,116,10,.14);color:#9a6309}
#tab-bank .fxw .fx-pause{font-size:9px;font-weight:600;color:#000;background:var(--warning);padding:3px 9px;border-radius:6px;letter-spacing:.5px;white-space:nowrap;vertical-align:middle}

/* ── Дашборд: «Пульс бизнеса» hero KPI-карточки (как в макете) ── */
#tab-dashboard .pulse-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:var(--gap-block)}
#tab-dashboard .pulse-card{background:var(--bg-1);border:1px solid var(--border);border-top:2.5px solid var(--accent);border-radius:12px;padding:13px 15px;box-shadow:var(--card-shadow)}
#tab-dashboard .pulse-card.warn{border-top-color:var(--warning)}
#tab-dashboard .pulse-card.success{border-top-color:var(--success)}
#tab-dashboard .pulse-card.danger{border-top-color:var(--danger)}
#tab-dashboard .pulse-label{font-size:11px;color:var(--text-2);font-weight:600;text-transform:uppercase;letter-spacing:.5px}
#tab-dashboard .pulse-value{font-size:23px;font-weight:700;color:var(--text-0);margin:5px 0 2px;font-feature-settings:"tnum";white-space:nowrap}
#tab-dashboard .pulse-sub{font-size:11px;color:var(--text-3)}
@media(max-width:480px){#tab-dashboard .pulse-grid{grid-template-columns:1fr 1fr}}

/* ═══ Дашборд — единый чистый стиль под макет (карточки/лейблы/раскрывашки) ═══ */
#tab-dashboard{padding:18px 26px 44px!important}
#tab-dashboard>div>h2,#tab-dashboard h2{letter-spacing:-.3px}
#tab-dashboard .dash-sec-label{font-size:11px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.7px;margin:var(--gap-section) 2px 12px;gap:8px}
#tab-dashboard .analytics-card h3{font-weight:700;color:var(--text-0)}
#tab-dashboard .analytics-card{background:var(--bg-1);border:1px solid var(--border);border-radius:12px;box-shadow:var(--card-shadow)}
#tab-dashboard .widget{background:var(--bg-1);border:1px solid var(--border);border-radius:12px;box-shadow:var(--card-shadow);padding:13px 15px}
#tab-dashboard .widget-label{font-size:11px;color:var(--text-2);font-weight:600;text-transform:uppercase;letter-spacing:.5px}
#tab-dashboard .widget-value{font-size:21px;font-weight:700;color:var(--text-0);margin-top:4px}
#tab-dashboard .widget-sub{font-size:11px;color:var(--text-3);margin-top:2px}
#tab-dashboard details.acc-expand{border-radius:12px}
/* ── Таблицы дашборда: вариант A «зебра» ── */
#tab-dashboard table.ztbl{width:100%;border-collapse:collapse;font-size:11.5px}
#tab-dashboard .ztbl th{font-size:10px;font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:.5px;text-align:right;padding:8px 10px;background:var(--bg-3);border:none}
#tab-dashboard .ztbl th:first-child{text-align:left;border-radius:8px 0 0 8px}
#tab-dashboard .ztbl th:last-child{border-radius:0 8px 8px 0}
#tab-dashboard .ztbl td{padding:9px 10px;text-align:right;white-space:nowrap;border:none;font-size:11.5px}
#tab-dashboard .ztbl td:first-child{text-align:left}
#tab-dashboard .ztbl tbody tr:nth-child(even){background:var(--zebra)}
#tab-dashboard .ztbl tbody tr:hover{background:var(--bg-2)}
#tab-dashboard .dchip{font-size:10.5px;font-weight:600;padding:4px 12px;border-radius:999px;background:var(--bg-2);color:var(--text-2);border:none;cursor:pointer;font-family:inherit;transition:background .12s,color .12s}
#tab-dashboard .dchip:hover{background:var(--bg-3)}
#tab-dashboard .dchip.on{background:var(--accent-dim);color:var(--accent)}
#tab-dashboard .row-act{width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:6px;background:var(--bg-1);color:var(--text-2);cursor:pointer;font-size:12px}
#tab-dashboard .row-act:hover{background:var(--bg-2);color:var(--text-0)}

/* ── «Требует внимания» — 4 карточки одинаковой ширины/высоты/стиля ── */
#tab-dashboard #newExtWidgets>.analytics-card{height:206px;padding:14px;display:flex;flex-direction:column;overflow:hidden}
/* тело каждой карточки (после заголовка) растягивается на всю высоту → графики
   и списки занимают одинаковую площадь, ряд смотрится гармонично */
#tab-dashboard #newExtWidgets>.analytics-card>.att-grid,
#tab-dashboard #newExtWidgets #trendBarsWrapNew{flex:1}
#tab-dashboard .att-grid{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:8px}
#tab-dashboard .att-tile{display:flex;align-items:center;gap:9px;padding:10px 12px;border-radius:10px;font-size:12px;min-height:44px;transition:filter .12s}
#tab-dashboard .att-tile:hover{filter:brightness(.97)}
#tab-dashboard .att-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
#tab-dashboard .att-label{flex:1;color:var(--text-1);font-weight:500;line-height:1.3;min-width:0}
#tab-dashboard .att-extra{display:block;font-size:10.5px;font-weight:400;color:var(--text-3)}
#tab-dashboard .att-count{font-size:16px;font-weight:700;font-feature-settings:"tnum"}
@media(max-width:640px){#tab-dashboard .att-grid{grid-template-columns:1fr 1fr}}

/* ── KPI-плитки внутри раскрывашек (Ротации·IP·ёмкость, Задержки) ── */
#tab-dashboard .kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:var(--gap-block)}
#tab-dashboard .kpi-tile{background:var(--bg-2);border-radius:10px;padding:11px 12px;min-width:0;text-align:center}
#tab-dashboard .kpi-tile .l{font-size:10px;color:var(--text-3);text-transform:uppercase;letter-spacing:.05em;font-weight:600;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#tab-dashboard .kpi-tile .v{font-size:18px;font-weight:700;color:var(--text-0);line-height:1.15;font-feature-settings:"tnum";white-space:nowrap}
#tab-dashboard .kpi-tile .s{font-size:10px;color:var(--text-3);margin-top:3px}

/* ── «Тренд и операторы» — два столбца внутри раскрывашки ── */
#tab-dashboard #newTrendOps{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:640px){#tab-dashboard #newTrendOps{grid-template-columns:1fr}}

/* ── Таблицы «Ротации · IP · ёмкость» — сетка 2×2 (по макету) ── */
#tab-dashboard .infra-tbl-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:820px){#tab-dashboard .infra-tbl-grid{grid-template-columns:1fr}}

/* ── Иконки-чипы (по макету: голубые скруглённые квадраты вместо эмодзи) ── */
#tab-dashboard .ico-chip{display:inline-block;width:15px;height:15px;border-radius:4px;background:var(--accent-dim);border:1.5px solid color-mix(in srgb,var(--accent) 45%,transparent);box-sizing:border-box;flex-shrink:0}
#tab-dashboard .ico-chip.lg{width:26px;height:26px;border-radius:7px}
#tab-dashboard .acc-expand-icon{display:inline-flex;color:var(--accent);font-size:0;flex-shrink:0}

/* ── Шеврон раскрывашек: ▾ закрыто → ▴ открыто (по макету) ── */
#tab-dashboard .acc-expand > summary::after{content:'›';font-size:15px;transform:rotate(90deg);transition:transform .15s}
#tab-dashboard .acc-expand[open] > summary::after{transform:rotate(-90deg)}

/* ── Парк по серверам — 3 колонки как в макете ── */
#tab-dashboard .fleet-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:var(--gap-block)}
@media(max-width:900px){#tab-dashboard .fleet-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){#tab-dashboard .fleet-grid{grid-template-columns:1fr}}

@media(max-width:480px){#tab-dashboard{padding:12px 12px 70px!important}}

/* Мобильный диапазон (топ-бар): fx-сетки Финансов схлопываются */
@media(max-width:768px){
  #tab-bank .fxw .fx-kpis{grid-template-columns:1fr 1fr}
  #tab-bank .fxw .fx-wgs{grid-template-columns:1fr 1fr}
  #tab-bank .fxw .fx-row2{grid-template-columns:1fr}
  #tab-bank .fxw .fx-kv{font-size:clamp(15px,4.6vw,21px)}
}