/* Кабинет HOME в стиле сайта sensor23.com (22.10.2026), с шага 2 — оформление по умолчанию.
   Подключается поверх style.css всегда; старый вид — по ссылке ?style=old (см. index.html).
   Источник стиля: 04_marketing/blog_prototype/site/src/styles/sensor.css и v2.css + живая страница
   sensor23.com/eng-iv-drip/madrid: Nata Sans, тёмный #151714, кремовый #f6f3ed, плашки #f4f2ef,
   текст #201c1a, золото #9a7a31 и градиент #b08b45 → #e3cd7b → #a77b34, заголовки в верхнем регистре, без скруглений. */

/* у Nata Sans кавычки-ёлочки похожи на ‹‹ ››, поэтому « » берём из системного шрифта */
@font-face { font-family: 'KabQuotes'; src: local('Helvetica Neue'), local('Arial'); unicode-range: U+00AB, U+00BB; }
@font-face { font-family: 'Nata Sans'; src: url('/app/fonts/NataSans-Regular.ttf') format('truetype'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Nata Sans'; src: url('/app/fonts/NataSans-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Nata Sans'; src: url('/app/fonts/NataSans-ExtraBold.ttf') format('truetype'); font-weight: 800; font-display: swap; }

:root {
  --font-ui: 'KabQuotes', 'Nata Sans', Arial, sans-serif;
  --gold-grad: linear-gradient(90deg, #b08b45 0%, #e3cd7b 52%, #a77b34 100%);
  --page: #ffffff; --surface: #ffffff; --surface-2: #f4f2ef; --side: #f6f3ed; --side-ink: #201c1a; --side-muted: #6b6560;
  --ink: #201c1a; --ink-2: #4a4440; --muted: #6b6560; --grid: rgba(21,23,20,0.08); --axis: rgba(21,23,20,0.28);
  --border: rgba(21,23,20,0.12); --accent: #8a6a24; --accent-ink: #f6f3ed; --hover: rgba(154,122,49,0.07);
  --btn: #151714; --btn-ink: #f6f3ed;
  --series-1: #c4a35d; --good: #2f8a55; --good-ink: #22663f; --warn: #d0791f; --warn-ink: #9a520f;
  --crit: #b8352b; --crit-ink: #9e2a21; --nodata: #8a837b;
}
:root[data-theme="dark"] {
  --page: #151714; --surface: #151714; --surface-2: #1e201c; --side: #0f100e; --side-ink: #f4f2ef; --side-muted: #a8a196;
  --ink: #f4f2ef; --ink-2: #d7d1c5; --muted: #a8a196; --grid: rgba(246,243,237,0.08); --axis: rgba(246,243,237,0.26);
  --border: rgba(246,243,237,0.14); --accent: #e3cd7b; --accent-ink: #151714; --hover: rgba(227,205,123,0.07);
  --btn: #e3cd7b; --btn-ink: #151714;
  --series-1: #c9a85a; --good: #4fb27a; --good-ink: #6cc792; --warn: #e8913a; --warn-ink: #f0a55a;
  --crit: #e0574b; --crit-ink: #f07a6f;
}

body { font: 14px/1.5 var(--font-ui); -webkit-font-smoothing: antialiased; letter-spacing: 0.005em; }

/* ---------- меню слева: кремовое (тёмное в тёмной теме), логотип сайта ---------- */
.shell { grid-template-columns: 232px 1fr; }
.side { padding: 26px 18px 20px; border-right: 1px solid var(--border); }
.brand { display: block; padding: 0 8px 30px; }
.brand .logo { width: 148px; height: 37px; border-radius: 0; background: url('/app/brand/gold-logo.svg') left center / contain no-repeat; color: transparent; font-size: 0; }
.brand b { display: none; }
.brand small { margin-top: 12px; opacity: 1; font-size: 0; }
.brand small::before { content: 'HOME · кабинет'; color: var(--side-muted); font: 600 12px/1.3 var(--font-ui); letter-spacing: 1.6px; text-transform: uppercase; }
nav a { border-radius: 0; padding: 9px 8px 9px 12px; margin-bottom: 1px; font-size: 14px; color: var(--side-ink); border-left: 2px solid transparent; }
nav a:hover { background: var(--hover); }
nav a.on { background: transparent; border-left-color: #b08b45; font-weight: 600; }
:root[data-theme="dark"] nav a.on { border-left-color: #e3cd7b; }
.badge { border-radius: 0; background: transparent; color: var(--crit-ink); border: 1px solid var(--crit); font-size: 12px; font-weight: 600; padding: 0 6px; line-height: 18px; }
button.ghost { border-radius: 0; background: transparent; color: var(--side-ink); border: 1px solid var(--border); padding: 9px 10px; font-size: 13px; }
button.ghost:hover { background: var(--hover); border-color: var(--axis); }
.side-foot small { color: var(--side-muted); opacity: 1; }

/* ---------- шапка раздела ---------- */
main { padding: 0 36px 56px; }
.bar { padding: 30px 0 18px; margin-bottom: 30px; }
.bar h1 { font: 500 30px/1.05 var(--font-ui); text-transform: uppercase; letter-spacing: -0.03em; }
.filters { font-size: 13px; }
.filters label { display: inline-flex; align-items: center; gap: 8px; font: 600 12px/1 var(--font-ui); letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); }
select, input[type=date], input[type=search], .chform input[type=text], .pform input[type=text], table.steps input, table.steps select, .cform input, table.duty input {
  border-radius: 0; font-family: var(--font-ui); background: transparent; border: 1px solid var(--border); padding: 7px 10px; text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 14px; }
select:hover, input:hover { border-color: var(--axis); }
.range { font-size: 13px; }

/* ---------- вкладки: строка с золотой чертой, как меню сайта ---------- */
.tabs { gap: 0 26px; top: 86px; padding: 0; margin-bottom: 32px; border-bottom: 1px solid var(--border); }
.tab { border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; padding: 10px 0 11px; margin-bottom: -1px;
  font: 600 12px/1.3 var(--font-ui); letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); }
.tab:hover { color: var(--ink); border-bottom-color: var(--axis); }
.tab.on { background: transparent; color: var(--ink); border-bottom-color: #b08b45; font-weight: 700; }
:root[data-theme="dark"] .tab.on { border-bottom-color: #e3cd7b; }

/* ---------- блоки: без плашек, только тонкая линия сверху и воздух ---------- */
.panel, .block { background: transparent; border: 0; border-top: 1px solid var(--border); border-radius: 0; padding: 26px 0 30px; margin-bottom: 8px; }
.blocks { gap: 0 48px; }
.panel h2, .block h2 { font: 500 19px/1.15 var(--font-ui); text-transform: uppercase; letter-spacing: -0.01em; margin: 0 0 8px; }
.block .who { font-size: 12px; margin-bottom: 18px; }
h3 { font: 600 12px/1.3 var(--font-ui); letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); margin: 22px 0 10px; }
.note { font-size: 12px; line-height: 1.55; max-width: 980px; }

/* ---------- показатели: как полоса «24/7/365 · 60 min» на сайте ---------- */
.kpis { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 0; margin: 0 0 34px; }
.kpi { border: 0; border-left: 1px solid var(--border); border-radius: 0; background: transparent; padding: 16px 18px 18px; }
.tabs + .panel, .tabs + .block, .bar + * > .kpis:first-child { border-top: 0; }
.tabs + .panel { padding-top: 0; }
.kpi .lbl { font: 600 12px/1.3 var(--font-ui); letter-spacing: 1.1px; text-transform: uppercase; color: var(--muted); }
.kpi .val { font: 400 32px/1.1 var(--font-ui); letter-spacing: -0.02em; margin: 10px 0 6px; }
.kpi .sub { font-size: 12px; line-height: 1.45; }
.kpi.good, .kpi.warn, .kpi.crit { border-left: 1px solid var(--border); }
.kpi.good .val { color: var(--good-ink); } .kpi.warn .val { color: var(--warn-ink); } .kpi.crit .val { color: var(--crit-ink); }
.kpi.nodata { background: transparent; border-style: solid; }
.kpi.nodata .val { font-size: 17px; font-weight: 400; margin-top: 14px; }
.kpi .st i { border-radius: 0; width: 7px; height: 7px; }

/* ---------- таблицы ---------- */
table { font-size: 13.5px; }
th { font: 600 12px/1.3 var(--font-ui); letter-spacing: 0.7px; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--ink); padding: 9px 10px 9px 0; white-space: normal; vertical-align: bottom; min-width: 64px; }
:root[data-theme="dark"] th { border-bottom-color: var(--axis); }
td { border-bottom: 1px solid var(--grid); padding: 11px 10px 11px 0; }
td.n, th.n { padding-left: 10px; }
tr.click:hover td { background: var(--hover); }
table.stk th:first-child, table.stk td:first-child { background: var(--page); }
table.stk tr.click:hover td:first-child { background: color-mix(in srgb, var(--page) 93%, #b08b45); }
tr.tot td { background: var(--surface-2); }
.hbar { height: 6px; border-radius: 0; }
.prog { height: 4px; border-radius: 0; width: 96px; background: var(--grid); }
.prog i { background: var(--gold-grad); }
.fbar, .fbar i { border-radius: 0; }

/* ---------- графики: золотые столбики, тонкая сетка ---------- */
.chart .bar { fill: var(--series-1); }
.chart .tick { font-family: var(--font-ui); fill: var(--muted); }
.chart .goal { stroke: var(--ink); stroke-width: 1; }
.chart .goal-l { font-family: var(--font-ui); fill: var(--ink); }
.panel .chart { max-width: 760px; margin: 10px 0 4px; }
.tip { border-radius: 0; font-family: var(--font-ui); box-shadow: 0 8px 24px rgba(0,0,0,.14); }

/* ---------- кнопки и ярлыки: прямоугольные, как на сайте ---------- */
button.mini, button.more { border-radius: 0; font: 400 13px/1.3 var(--font-ui); padding: 6px 14px; background: transparent; border: 1px solid var(--border); }
button.mini:hover, button.more:hover { border-color: var(--ink); background: transparent; }
button.mini.primary { background: var(--btn); border-color: var(--btn); color: var(--btn-ink); }
button.mini.primary:hover { filter: brightness(1.12); }
.pill { border-radius: 0; font-size: 12px; padding: 2px 8px; }
.panel a, .block a, .acts a { color: var(--accent); text-underline-offset: 3px; }
nav a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, tr:focus-visible, .tab:focus-visible { outline: 2px solid #b08b45; outline-offset: 2px; }

/* ---------- тревоги ---------- */
.probs { gap: 14px; margin-top: 14px; }
.prob { border: 0; border-left: 2px solid var(--warn); border-radius: 0; background: var(--surface-2); padding: 14px 16px; }
.prob.crit { border-left-color: var(--crit); }

/* ---------- карточка (выезжающая справа) ---------- */
.drawer-in { border-left: 1px solid var(--border); padding: 30px 32px; }
.card-h h2 { font: 500 24px/1.1 var(--font-ui); text-transform: uppercase; letter-spacing: -0.02em; }
.close { border-radius: 0; }

/* ---------- «Открытие города» ---------- */
.chform { gap: 10px; margin: 16px 0 18px; }
/* длинные заголовки столбцов переносятся, чтобы таблица городов помещалась в 1440 px */
th.n { white-space: normal; }

/* ---------- шаг 2: весь кабинет (22.10.2026) ---------- */
/* одна линия под шапкой: шапка без черты, черту даёт первый блок */
.bar { border-bottom: 0; margin-bottom: 6px; }
#view > .kpis:first-child { border-top: 1px solid var(--border); padding-top: 4px; }
/* показатели переносятся на второй ряд — разделитель слева у каждого, крайний слева обрезается */
.kpis { margin-left: -18px; overflow: hidden; }
.kpi, .kpi:first-child, .kpi.good, .kpi.warn, .kpi.crit, .kpi.good:first-child, .kpi.warn:first-child, .kpi.crit:first-child { border-left: 1px solid var(--border); margin-left: -1px; padding-left: 18px; }
/* вкладки прилипают ровно под шапкой (высота шапки 84 px), строка итогов — фон и в закреплённом столбце */
.tabs { top: 84px; }
table.stk tr.tot td:first-child { background: var(--surface-2); }
/* карточки справа: ссылки золотые, цифры чуть мельче, чем на странице */
.drawer a { color: var(--accent); text-underline-offset: 3px; }
.drawer .kpi .val { font-size: 26px; }
.drawer .kpis { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
/* вкладки прилипают под шапкой любой высоты: высоту шапки пишет index.html в --bar-h */
.tabs { top: var(--bar-h, 84px); }
td small { font-size: 12px; }
/* 1280–1366 px: меню и поля уже, заголовок мельче — шапка и широкие таблицы помещаются */
@media (max-width: 1366px) {
  .shell { grid-template-columns: 208px 1fr; }
  .side { padding: 24px 14px 18px; }
  main { padding: 0 28px 48px; }
  .bar h1 { font-size: 26px; }
  .bar { gap: 10px 20px; }
  .filters { gap: 8px 12px; }
  td { padding-right: 8px; } td.n, th.n { padding-left: 8px; }
  table.calls .why-c { min-width: 260px; }
  table.calls .offer { min-width: 160px; }
}
/* верхняя черта у ряда показателей в начале раздела — без вылета влево из-за отрицательного отступа */
#view > .kpis:first-child { border-top: 0; background: linear-gradient(var(--border), var(--border)) 18px 0 / calc(100% - 18px) 1px no-repeat; }
/* лента переписки в карточке клиента: квадратные метки, как вся графика сайта */
.tl .dot { border-radius: 0; width: 7px; height: 7px; margin-top: 6px; }
.tl li { border-bottom-color: var(--grid); padding: 5px 0; }
.kpi .st i, .tl .dot { flex: none; }
/* наведение на строку: закреплённый первый столбец того же цвета, что и строка */
table.stk tr.click:hover td:first-child { background: color-mix(in srgb, var(--page) 93%, #b08b45); }
tr.click:hover td { background: color-mix(in srgb, var(--page) 93%, #b08b45); }

/* ---------- переключатель темы (22.10.2026): прямоугольный, золотой в тёмной теме ---------- */
.theme-sw { border-radius: 0; border-color: var(--axis); }
.theme-sw button { border-radius: 0; font: 600 12px/1.2 var(--font-ui); letter-spacing: 1.2px; text-transform: uppercase; padding: 7px 14px; color: var(--muted); }
.theme-sw button:hover { color: var(--ink); background: var(--hover); }
.theme-sw button[aria-checked="true"] { background: var(--btn); color: var(--btn-ink); }
.theme-sw button:focus-visible { outline: 2px solid #b08b45; outline-offset: -2px; }
.bar { padding-top: 14px; }
.bar > [data-theme-switch] { margin-bottom: -4px; }

/* «Позвонить»: плашки и счётчики отделов — квадратные, как остальные плашки сайта (23.10.2026) */
.dchip { border-radius: 0; font-family: var(--font-ui); }

/* «Позвонить»: поверх правил для 1366 px и узкого экрана — колонки не вылезают за таблицу */
table.calls .why-c { min-width: 240px; }
table.calls .offer { min-width: 150px; }
table.calls .acts .mini { padding: 4px 10px; font: 400 12px/1.3 var(--font-ui); }