fix: верстка на классах ДС без переопределений

index.html

@@ -7,40 +7,23 @@
 <title>Топ услуг B2C по регионам</title>
 <link rel="icon" href="data:,">
 <script>(function(){var t=null;try{t=localStorage.getItem("demo.theme");}catch(e){}if(t==="dark"||t==="light"){document.documentElement.setAttribute("data-theme",t);}})();</script>
+<link rel="stylesheet" href="./design-system/kt-ai-fonts.css">
 <link rel="stylesheet" href="./design-system/kt-ai-tokens.css">
 <link rel="stylesheet" href="./design-system/kt-ai-components.css">
+<link rel="stylesheet" href="./design-system/kt-ai-page.css">
 <style>
-  /* Дашборд «Топ услуг B2C по регионам» — архетип dashboard дизайн-системы KT AI.
-     Свой стиль — только сетка и отступы; цвета, радиусы, шрифты — токены ДС. */
   *, *::before, *::after { box-sizing: border-box; }
   [hidden] { display: none !important; }
-  html, body { margin: 0; background: var(--kt-ai-bg); color: var(--kt-ai-fg); font-family: var(--kt-ai-font-sans); }
-  body { -webkit-text-size-adjust: 100%; }
   .wrap { max-width: var(--kt-ai-content-wide, 1280px); margin: 0 auto; padding: 0 var(--kt-ai-space-5) var(--kt-ai-space-10); }
-
-  /* Шапка: компактная, без hero */
   .top { position: sticky; top: 0; z-index: var(--kt-ai-z-sticky, 20); background: var(--kt-ai-bg); border-bottom: 1px solid var(--kt-ai-border); }
   .top-in { display: flex; align-items: center; gap: var(--kt-ai-space-4); min-height: 56px; padding: var(--kt-ai-space-2) 0; }
   .top img { width: 28px; height: 28px; flex-shrink: 0; }
   .top .head { min-width: 0; flex: 1; }
-  .top h1 { margin: 0; font-size: var(--kt-ai-text-lg); font-weight: var(--kt-ai-weight-semibold); line-height: var(--kt-ai-leading-tight); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #00963C; }
+  .top h1 { margin: 0; font-size: var(--kt-ai-text-lg); font-weight: var(--kt-ai-weight-semibold); line-height: var(--kt-ai-leading-tight); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--kt-ai-chart-green); }
   .top .sub { margin: 2px 0 0; font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
   .top .tools { display: flex; align-items: center; gap: var(--kt-ai-space-3); flex-shrink: 0; }
-  .iconbtn { width: 32px; height: 32px; display: inline-grid; place-items: center; border-radius: var(--kt-ai-radius-full); border: 1px solid var(--kt-ai-border); background: var(--kt-ai-bg-elevated); color: var(--kt-ai-fg); cursor: pointer; padding: 0; }
-  .iconbtn:hover { background: var(--kt-ai-bg-hover); }
-  .iconbtn svg { width: 16px; height: 16px; }
-  [data-theme="light"] .ic-sun, [data-theme="dark"] .ic-moon { display: none; }
-
-  /* Секции */
   .section { margin-top: var(--kt-ai-space-6); }
   .section-h { display: flex; align-items: baseline; justify-content: space-between; gap: var(--kt-ai-space-4); margin: 0 0 var(--kt-ai-space-3); }
-  .section-h h2 { margin: 0; font-size: var(--kt-ai-text-md); font-weight: var(--kt-ai-weight-semibold); }
-  .section-h .muted { font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); }
-
-  /* KPI: карточки-сетка ДС; длинное значение — меньше кеглем и в одну строку */
-  .kt-ai-kpi .value[data-long="true"] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-
-  /* Чарты: два в ряд на широком экране, столбиком на телефоне */
   .charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--kt-ai-stack-block, 16px); }
   .chart-card h3 { margin: 0 0 var(--kt-ai-space-4); font-size: var(--kt-ai-text-sm); font-weight: var(--kt-ai-weight-semibold); display: flex; justify-content: space-between; align-items: baseline; gap: var(--kt-ai-space-3); flex-wrap: wrap; }
   .chart-card h3 .ttl { white-space: nowrap; }
@@ -55,56 +38,20 @@
   .brow .fill { display: block; height: 100%; border-radius: 2px; background: var(--kt-ai-chart-blue); transition: width var(--kt-ai-dur-base) var(--kt-ai-ease-standard); }
   .chart-card[data-tone="green"] .fill { background: var(--kt-ai-chart-green); }
   .brow .val { font-family: var(--kt-ai-font-mono); font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
-
-  /* Таблица: тулбар над ней, фильтры-чипы под ним, скролл внутри контейнера */
   .tb { display: flex; align-items: center; gap: var(--kt-ai-space-3); flex-wrap: wrap; min-height: 40px; margin-bottom: var(--kt-ai-space-3); }
   .tb .grow { flex: 1 1 220px; min-width: 0; }
   .tb .kt-ai-select-wrap { flex: 0 1 220px; }
   .tb .count { font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); white-space: nowrap; margin-left: auto; }
   .chips { display: flex; gap: var(--kt-ai-space-2); flex-wrap: wrap; margin-bottom: var(--kt-ai-space-3); }
   .chips:empty { display: none; }
-  .kt-ai-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--kt-ai-border); border-radius: var(--kt-ai-radius-lg); background: var(--kt-ai-bg-elevated); }
-  table.kt-ai-table { width: 100%; border-collapse: collapse; min-width: 560px; }
-  .kt-ai-table th, .kt-ai-table td { padding: 0 var(--kt-ai-space-4); height: var(--kt-ai-table-row, 40px); border-bottom: 1px solid var(--kt-ai-divider, var(--kt-ai-border)); text-align: left; vertical-align: middle; }
-  .kt-ai-table th { position: sticky; top: 0; z-index: 1; background: var(--kt-ai-bg-elevated); font-size: var(--kt-ai-text-xs); font-weight: var(--kt-ai-weight-medium); color: var(--kt-ai-fg-muted); white-space: nowrap; user-select: none; }
-  .kt-ai-table th[data-sort] { cursor: pointer; }
-  .kt-ai-table th[data-sort]:hover { color: var(--kt-ai-fg); }
-  .kt-ai-table th[data-dir]::after { content: " ↓"; } .kt-ai-table th[data-dir="asc"]::after { content: " ↑"; }
-  .kt-ai-table tbody tr:hover { background: var(--kt-ai-bg-hover); }
-  .kt-ai-table tbody tr:last-child td { border-bottom: 0; }
-  .kt-ai-table td { font-size: var(--kt-ai-text-sm); }
-  .kt-ai-table .num { text-align: right; white-space: nowrap; }
-  .kt-ai-table .num .v { font-family: var(--kt-ai-font-mono); font-variant-numeric: tabular-nums; }
-  .kt-ai-table td.svc { max-width: 420px; }
-  .kt-ai-table .svc .t { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-  .kt-ai-table .svc .m { display: none; font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg-muted); }
-  .kt-ai-table mark { background: var(--kt-ai-selection, var(--kt-ai-primary-subtle)); color: inherit; border-radius: 2px; }
-  .kt-ai-table tfoot td { font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); background: var(--kt-ai-bg-soft); }
   .tfoot { display: flex; align-items: center; justify-content: space-between; gap: var(--kt-ai-space-3); flex-wrap: wrap; padding: var(--kt-ai-space-3) 0; font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); }
-  .kt-ai-empty { padding: var(--kt-ai-space-10) var(--kt-ai-space-5); text-align: center; color: var(--kt-ai-fg-muted); }
-  .kt-ai-empty .title { color: var(--kt-ai-fg); font-weight: var(--kt-ai-weight-medium); margin-bottom: var(--kt-ai-space-2); }
-
-  /* Телефон: ДС разворачивает таблицу в карточки строк с подписями полей (data-label);
-     услуга — заголовок карточки, поиск ДС на телефоне прячет — возвращаем в тулбаре */
   @media (max-width: 639.98px) {
     .wrap { padding-left: var(--kt-ai-space-4); padding-right: var(--kt-ai-space-4); }
     .top .sub { display: none; }
-    .kt-ai-kpi-strip[data-cards="true"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--kt-ai-space-3); }
-    .kt-ai-kpi-strip[data-cards="true"] .kt-ai-kpi:last-child { grid-column: 1 / -1; }
-    .kt-ai-kpi-strip[data-cards="true"] .value { font-size: var(--kt-ai-text-lg); }
     .chart-card h3 .muted { flex: 1 1 100%; }
     .tb .kt-ai-search-field, .tb .kt-ai-search { display: block; }
     .tb .kt-ai-select-wrap { flex-basis: 100%; }
     .tb .count { margin-left: 0; width: 100%; }
-    .kt-ai-table-wrap { border: 0; background: none; overflow: visible; }
-    table.kt-ai-table { min-width: 0; }
-    .kt-ai-table td, .kt-ai-table th { padding: var(--kt-ai-space-2) 0; height: auto; border-bottom: 0; }
-    .kt-ai-table td:first-child { display: block; padding: 0 0 var(--kt-ai-space-3); margin-bottom: var(--kt-ai-space-2); border-bottom: 1px solid var(--kt-ai-divider, var(--kt-ai-border)); font-weight: var(--kt-ai-weight-semibold); }
-    .kt-ai-table td.svc { max-width: none; }
-    .kt-ai-table .svc .t { white-space: normal; }
-    .kt-ai-table .svc .m { display: none; }
-    .kt-ai-table td:nth-child(2) { display: flex; padding: var(--kt-ai-space-2) 0; margin: 0; border-bottom: 0; font-weight: var(--kt-ai-weight-regular); text-align: right; }
-    .kt-ai-table td:nth-child(2)::before { display: block; }
     .brow { grid-template-columns: minmax(80px, 40%) minmax(0, 1fr) auto; }
   }
   @media (prefers-reduced-motion: reduce) { .brow .fill { transition: none; } }
@@ -184,22 +131,22 @@ const DATA = [
 {"region": "Астана", "service": "B2C Абонплата ШПД по FTTx ГТС (New)", "qty": 37372, "sum": 238463786.09},
 {"region": "г.Алматы", "service": "B2C Абонплата ШПД по FTTx ГТС (New)", "qty": 39671, "sum": 237005698.16},
 {"region": "г.Алматы", "service": "Абонплата ШПД по FTTx для B2C", "qty": 35588, "sum": 152893561.28},
-{"region": "Астана", "service": "2025 B2C Абонплата за Домашний Интернет FTTx ГТС", "qty": 35637, "sum": 136187938.99},
+{"region": "Астана", "service": "2025 B2C Абонплата за Домашний интернет FTTx ГТС", "qty": 35637, "sum": 136187938.99},
 {"region": "Астана", "service": "B2C TV Plus Абонплата Full ГТС", "qty": 47661, "sum": 132060372.93},
 {"region": "Астана", "service": "2021 B2C Абонплата за мобильный номер Kcell GSM закр.", "qty": 61700, "sum": 123403164.43},
 {"region": "г.Алматы", "service": "2022 B2C Абонплата за мобильный номер MT-C GSM закр.", "qty": 57378, "sum": 110497209.55},
-{"region": "г.Алматы", "service": "2025 B2C Абонплата за Домашний Интернет FTTx ГТС", "qty": 29997, "sum": 106749675.59},
+{"region": "г.Алматы", "service": "2025 B2C Абонплата за Домашний интернет FTTx ГТС", "qty": 29997, "sum": 106749675.59},
 {"region": "Астана", "service": "2022 B2C Абонплата за мобильный номер MT-C GSM закр.", "qty": 52504, "sum": 99235780.41},
-{"region": "Астана", "service": "2022 B2C Абонплата за Домашний Интернет FTTx ГТС", "qty": 36946, "sum": 96430127.27},
+{"region": "Астана", "service": "2022 B2C Абонплата за Домашний интернет FTTx ГТС", "qty": 36946, "sum": 96430127.27},
 {"region": "Астана", "service": "Абонплата ШПД по FTTx для B2C", "qty": 19565, "sum": 88834659.73},
-{"region": "Астана", "service": "2024 B2C Абонплата за Домашний Интернет FTTx ГТС", "qty": 22167, "sum": 83549325.34},
+{"region": "Астана", "service": "2024 B2C Абонплата за Домашний интернет FTTx ГТС", "qty": 22167, "sum": 83549325.34},
 {"region": "г.Алматы", "service": "B2C TV Plus Абонплата Full ГТС", "qty": 31221, "sum": 83511013.05},
 {"region": "г.Алматы", "service": "2021 B2C Абонплата за мобильный номер Kcell GSM закр.", "qty": 40838, "sum": 82748215.46},
 {"region": "г.Семей", "service": "2022 B2C Абонплата за мобильный номер MT-C GSM закр.", "qty": 41486, "sum": 76400272.02},
 {"region": "Астана", "service": "TV Plus Абонплата за Премиальный пакет ГТС", "qty": 29210, "sum": 71278165.09},
-{"region": "г.Алматы", "service": "2022 B2C Абонплата за Домашний Интернет FTTx ГТС", "qty": 24001, "sum": 62521274.3},
+{"region": "г.Алматы", "service": "2022 B2C Абонплата за Домашний интернет FTTx ГТС", "qty": 24001, "sum": 62521274.3},
 {"region": "Астана", "service": "2021 B2C Абонплата за мобильный номер Kcell GSM откр.", "qty": 27864, "sum": 59635624.39},
-{"region": "г.Алматы", "service": "2024 B2C Абонплата за Домашний Интернет FTTx ГТС", "qty": 15678, "sum": 58970815.48},
+{"region": "г.Алматы", "service": "2024 B2C Абонплата за Домашний интернет FTTx ГТС", "qty": 15678, "sum": 58970815.48},
 {"region": "г.Актобе", "service": "2022 B2C Абонплата за мобильный номер MT-C GSM закр.", "qty": 30641, "sum": 55819936.98},
 {"region": "г.Алматы", "service": "B2C Абонплата за основной телефон ГТС", "qty": 52732, "sum": 49636818.5},
 {"region": "г.Актобе", "service": "2021 B2C Абонплата за мобильный номер Kcell GSM закр.", "qty": 25178, "sum": 48000483.43},
@@ -207,11 +154,11 @@ const DATA = [
 {"region": "г.Павлодар", "service": "2022 B2C Абонплата за мобильный номер MT-C GSM закр.", "qty": 23334, "sum": 44857518.84},
 {"region": "г.Алматы", "service": "B2C TV Plus Аренда STB оператора новое", "qty": 96183, "sum": 43252519.71},
 {"region": "г.Караганда", "service": "Абонплата ШПД по FTTx для B2C", "qty": 8916, "sum": 41624727.66},
-{"region": "Астана", "service": "2026 B2C Абонплата за Домашний Интернет FTTx ГТС", "qty": 13685, "sum": 41618770.34},
+{"region": "Астана", "service": "2026 B2C Абонплата за Домашний интернет FTTx ГТС", "qty": 13685, "sum": 41618770.34},
-{"region": "г.Алматы", "service": "2018 B2C Абонплата за Домашний Интернет FTTx ГТС", "qty": 11568, "sum": 40199964.35},
+{"region": "г.Алматы", "service": "2018 B2C Абонплата за Домашний интернет FTTx ГТС", "qty": 11568, "sum": 40199964.35},
 {"region": "г.Тараз", "service": "2022 B2C Абонплата за мобильный номер MT-C GSM закр.", "qty": 21880, "sum": 39564813.34},
 {"region": "г.Алматы", "service": "Абонплата ШПД по ADSL для B2C", "qty": 10710, "sum": 36238454.72},
-{"region": "г.Алматы", "service": "2020 B2C Абонплата за Домашний Интернет FTTx ГТС", "qty": 12148, "sum": 36010481.68},
+{"region": "г.Алматы", "service": "2020 B2C Абонплата за Домашний интернет FTTx ГТС", "qty": 12148, "sum": 36010481.68},
 {"region": "г.Усть-Каменогорск", "service": "2022 B2C Абонплата за мобильный номер MT-C GSM закр.", "qty": 18362, "sum": 35883527.39},
 {"region": "г. Шымкент", "service": "2022 B2C Абонплата за мобильный номер MT-C GSM закр.", "qty": 19180, "sum": 35338634.51},
 {"region": "г. Шымкент", "service": "2021 B2C Абонплата за мобильный номер Kcell GSM закр.", "qty": 18945, "sum": 35138664.91},
@@ -224,12 +171,12 @@ const DATA = [
 {"region": "Астана", "service": "B2C Аренда оборудования ONT оператора - новое", "qty": 87071, "sum": 31220264.09},
 {"region": "г.Павлодар", "service": "B2C Абонплата ШПД по FTTx ГТС (New)", "qty": 6104, "sum": 30831455.08},
 {"region": "г.Кокшетау", "service": "2022 B2C Абонплата за мобильный номер MT-C GSM закр.", "qty": 16818, "sum": 30654924.73},
-{"region": "г.Актобе", "service": "2025 B2C Абонплата за Домашний Интернет FTTx ГТС", "qty": 8613, "sum": 30562705.78},
+{"region": "г.Актобе", "service": "2025 B2C Абонплата за Домашний интернет FTTx ГТС", "qty": 8613, "sum": 30562705.78},
 {"region": "г.Костанай", "service": "2022 B2C Абонплата за мобильный номер MT-C GSM закр.", "qty": 16473, "sum": 30539180.35},
 {"region": "Енбекшиказахский район", "service": "2022 B2C Абонплата за мобильный номер MT-C GSM закр.", "qty": 17347, "sum": 30429552.38},
-{"region": "г.Актобе", "service": "2022 B2C Абонплата за Домашний Интернет FTTx ГТС", "qty": 11709, "sum": 30303557.0},
+{"region": "г.Актобе", "service": "2022 B2C Абонплата за Домашний интернет FTTx ГТС", "qty": 11709, "sum": 30303557.0},
 {"region": "г.Кызылорда", "service": "2022 B2C Абонплата за мобильный номер MT-C GSM закр.", "qty": 16539, "sum": 29772241.67},
-{"region": "г.Алматы", "service": "2026 B2C Абонплата за Домашний Интернет FTTx ГТС", "qty": 10206, "sum": 29200316.21},
+{"region": "г.Алматы", "service": "2026 B2C Абонплата за Домашний интернет FTTx ГТС", "qty": 10206, "sum": 29200316.21},
 {"region": "г.Караганда", "service": "2022 B2C Абонплата за мобильный номер MT-C GSM закр.", "qty": 15714, "sum": 28837871.98}
 ];
 const $ = id => document.getElementById(id);
@@ -240,14 +187,12 @@ const esc = s => String(s).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(
 const PAGE = 25;
 const state = { metric: "qty", region: "", q: "", sort: "qty", dir: "desc", shown: PAGE };
 
-// тема
 $("theme").onclick = () => {
   const t = document.documentElement.getAttribute("data-theme") === "dark" ? "light" : "dark";
   document.documentElement.setAttribute("data-theme", t);
   try { localStorage.setItem("demo.theme", t); } catch (e) {}
 };
 
-// KPI
 const totalQty = DATA.reduce((s, r) => s + r.qty, 0), totalSum = DATA.reduce((s, r) => s + r.sum, 0);
 const regions = [...new Set(DATA.map(r => r.region))].sort((a, b) => a.localeCompare(b, "ru"));
 $("k-qty").textContent = fmt(totalQty);
@@ -286,7 +231,6 @@ document.querySelectorAll(".kt-ai-segmented .seg").forEach(b => b.onclick = () =
   renderTop(); renderTable();
 });
 
-// таблица
 function setRegion(r) { state.region = r; $("region").value = r; state.shown = PAGE; renderTop(); renderTable(); }
 $("region").onchange = () => setRegion($("region").value);
 $("q").oninput = () => { state.q = $("q").value.trim().toLowerCase(); state.shown = PAGE; renderTable(); };