/* Азот: оформление виджетов.
 * Только токены темы и var(--mc). Собственных цветов нет.
 * Подключается после theme.css, до azot-charts.js.
 */

.mx-az-widget {
  background: var(--surface, #171c2e);
  border: 1px solid var(--line, #2a3049);
  border-radius: 6px;
  padding: 10px 12px 8px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

/* Подпись виджета — капитель, как подписи разделов в Мидасе */
.mx-az-head {
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dim, #8b90a5);
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mx-az-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.mx-az-svg  { flex: 1; min-height: 0; }

.mx-az-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dim, #8b90a5);
  font-size: 12px;
  text-align: center;
}

/* ------------------------------------------------------------------ KPI */
.mx-az-kpi-value {
  font-size: 24px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text, #e8e4d8);
  line-height: 1.15;
}
.mx-az-kpi-delta {
  font-size: 11px;
  color: var(--dim, #8b90a5);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.mx-az-kpi-prev { letter-spacing: .02em; }

/* --------------------------------------------------------------- фигуры */
.mx-az-bar        { fill: var(--mc, #62c6d8); opacity: .75; transition: opacity .12s; }
.mx-az-bar.total  { fill: var(--dim, #8b90a5); opacity: .5; }
.mx-az-line       { fill: none; stroke: var(--mc, #62c6d8); stroke-width: 2; stroke-linejoin: round; }
.mx-az-dot        { fill: var(--mc, #62c6d8); }
.mx-az-axis       { stroke: var(--line, #2a3049); stroke-width: 1; }
.mx-az-hit        { fill: transparent; }

.mx-az-lbl { font-size: 11px; fill: var(--text, #e8e4d8); }
.mx-az-val { font-size: 10.5px; fill: var(--dim, #8b90a5); font-variant-numeric: tabular-nums; }

/* Фрагмент, который можно отобрать. Активный виден обводкой, а не только
   цветом: цвет никогда не единственный носитель смысла. */
.mx-az-pick { cursor: pointer; }
.mx-az-pick:hover .mx-az-bar,
.mx-az-pick:hover .mx-az-dot { opacity: 1; }
.mx-az-pick.on .mx-az-bar { opacity: 1; stroke: var(--text, #e8e4d8); stroke-width: 1.5; }
.mx-az-pick.on .mx-az-dot { stroke: var(--text, #e8e4d8); stroke-width: 2; }
.mx-az-pick:focus-visible { outline: none; }
.mx-az-pick:focus-visible .mx-az-bar,
.mx-az-pick:focus-visible .mx-az-dot { stroke: var(--mc, #62c6d8); stroke-width: 2; opacity: 1; }

/* Подписи оси под фигурой: в SVG они ломались бы при узкой колонке */
.mx-az-xaxis { display: flex; margin-top: 4px; }
.mx-az-xaxis span {
  font-size: 10px;
  color: var(--dim, #8b90a5);
  text-align: center;
  padding: 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------------------------------------------------------------- топ-N */
.mx-az-list { flex: 1; min-height: 0; overflow-y: auto; }
.mx-az-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  border-bottom: 1px solid var(--line, #2a3049);
  font-size: 12px;
}
.mx-az-row:last-child { border-bottom: none; }
.mx-az-row-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: var(--mc, #62c6d8);
  opacity: .12;
  pointer-events: none;
}
.mx-az-row-lbl {
  flex: 1;
  position: relative;
  color: var(--text, #e8e4d8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mx-az-row-val {
  position: relative;
  color: var(--text, #e8e4d8);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.mx-az-row:hover .mx-az-row-fill { opacity: .2; }
.mx-az-row.on { box-shadow: inset 2px 0 0 var(--mc, #62c6d8); }
.mx-az-row.on .mx-az-row-fill { opacity: .22; }
.mx-az-row:focus-visible { outline: 1px solid var(--mc, #62c6d8); outline-offset: -1px; }

@media (prefers-reduced-motion: reduce) {
  .mx-az-bar, .mx-az-row-fill { transition: none; }
}

/* ==================================================== рабочий стол дашборда */

/* Подвкладки дашбордов — та же строка, что подвкладки Структуры в Мидасе */
.mx-az-subbar {
  display: flex; gap: 2px; flex: none;
  border-bottom: 1px solid var(--line, #2a3049);
  margin-bottom: 10px;
}
.mx-az-tab {
  background: none; border: 0; border-bottom: 2px solid transparent;
  color: var(--dim, #8b90a5); font: inherit; font-size: 13px;
  padding: 8px 14px; cursor: pointer;
}
.mx-az-tab:hover { color: var(--text, #e8e4d8); }
.mx-az-tab.on { color: var(--mc, #62c6d8); border-bottom-color: var(--mc, #62c6d8); }

/* Панель инструментов: контекст слева, отбор, черта, действия справа */
.mx-az-tools { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex: none; }
.mx-az-spacer { flex: 1; }
.mx-az-period {
  background: var(--bg, #101422); border: 1px solid var(--line, #2a3049);
  border-radius: 6px; color: var(--text, #e8e4d8); font: inherit; font-size: 13px;
  padding: 6px 12px; cursor: pointer; min-width: 190px; text-align: left;
}
.mx-az-period:hover, .mx-az-period:focus-visible { border-color: var(--mc, #62c6d8); outline: none; }
.mx-az-linked { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--dim, #8b90a5); }

/* Сетка: 12 колонок, шаг строки фиксирован — виджет не растягивается под экран */
.mx-az-grid {
  display: grid; grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 40px; gap: 10px; flex: none; margin-bottom: 10px;
}
.mx-az-cell { min-width: 0; min-height: 0; display: flex; }
.mx-az-cell > .mx-az-widget { flex: 1; min-width: 0; }

/* Слой отбора: чипы над таблицей, ручные фильтры колонок живут отдельно */
.mx-az-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; flex: none; }
.mx-az-chips:empty { display: none; }
.mx-az-chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--mc, #62c6d8); border-radius: 999px;
  padding: 3px 6px 3px 10px; font-size: 12px; color: var(--text, #e8e4d8);
}
.mx-az-chip b { font-weight: 500; }
.mx-az-chip.neg { border-style: dashed; }
.mx-az-chip-x { background: none; border: 0; color: var(--dim, #8b90a5); cursor: pointer; font-size: 11px; padding: 0 2px; }
.mx-az-chip-x:hover { color: var(--text, #e8e4d8); }
.mx-az-clear { background: none; border: 0; color: var(--dim, #8b90a5); font: inherit; font-size: 12px; cursor: pointer; }
.mx-az-clear:hover { color: var(--mc, #62c6d8); }

/* Нижняя таблица: своя прокрутка до низа окна, липкая шапка */
.mx-az-table { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.mx-az-table-wrap { overflow: auto; border: 1px solid var(--line, #2a3049); border-radius: 6px; }
.mx-az-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.mx-az-tbl th {
  position: sticky; top: 0; z-index: 2;
  background: var(--surface, #171c2e); color: var(--dim, #8b90a5);
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 400;
  text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line, #2a3049);
  white-space: nowrap;
}
.mx-az-tbl td {
  padding: 6px 10px; border-bottom: 1px solid var(--line, #2a3049);
  color: var(--text, #e8e4d8); max-width: 320px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mx-az-tbl th.num, .mx-az-tbl td.num { text-align: right; font-variant-numeric: tabular-nums; }
.mx-az-tbl tbody tr:hover td { background: color-mix(in srgb, var(--mc, #62c6d8) 7%, transparent); }
.mx-az-total { font-size: 11px; color: var(--dim, #8b90a5); padding: 6px 2px; flex: none; }
/* Шапка модулей МАНИИ: свёрнутая плашка платформы и вкладки в строке модуля.
 *
 * Лежит в azot.css, потому что подключается только index.html модулей и
 * грузится после theme.css. Если появится третий модуль со своей темой —
 * вынести в shared/shell.css отдельной поставкой.
 */

/* Кнопка раскрытия плашки: знак Everett — элемент уровня платформы,
   поэтому всё платформенное прячется именно под ним. */
.topbtn {
  display: flex; align-items: center; gap: 4px;
  background: none; border: 0; padding: 0 2px; margin-right: 2px;
  cursor: pointer; color: var(--dim, #8b90a5); line-height: 0;
}
.topbtn .dd { font-size: 10px; line-height: 1; transition: transform .12s; }
.topbtn[aria-expanded="true"] .dd { transform: rotate(180deg); }
.topbtn:hover .dd { color: var(--text, #e8e4d8); }
.topbtn:focus-visible { outline: 1px solid var(--mc, #62c6d8); outline-offset: 3px; border-radius: 4px; }

/* Вкладки разделов переехали в .modbar: своя рамка снизу больше не нужна,
   подчёркивание активной вкладки совпадает с линией самой строки модуля. */
.modbar .secbar {
  border-bottom: 0;
  padding: 0;
  gap: 0;
  align-self: stretch;
  align-items: stretch;
}
.modbar .secbar a { padding: 0 14px; display: flex; align-items: center; }
.modbar .secbar button#mode-btn { margin-left: 8px; align-self: center; }
.modbar { gap: 14px; }

/* Черта-разделитель: 2px × 22px цветом модуля (брендбук, раздел 7).
   Объявлена здесь на случай, если ui-kit на странице не подключён. */
.mx-sep {
  flex: none;
  width: 2px; height: 22px;
  background: var(--mc, #62c6d8);
  border-radius: 1px;
  opacity: .55;
  align-self: center;
}

@media (max-width: 900px) {
  .modbar { flex-wrap: wrap; gap: 8px 12px; }
  .modbar .secbar { order: 3; width: 100%; }
  .modbar .mx-sep { display: none; }
}

/* Плашка платформы действительно скрывается: у .top в теме display:flex,
   а атрибут hidden даёт display:none слабым правилом браузера и проигрывает
   по специфичности. !important — ровно тот случай, что разрешён брендбуком:
   перебить общий стиль темы. */
.top[hidden] { display: none !important; }

/* Кнопка режима интерфейса прижимается к правому краю строки вкладок,
   вплотную к разрезу: это переключатель уровня модуля, а не ещё одна вкладка. */
.modbar .secbar { flex: 1; min-width: 0; }
.modbar .secbar button#mode-btn { margin-left: auto; }

/* Вкладок у Мидаса девять, и на средних экранах строка теснится.
   Прокрутка вкладок вместо переноса: строка модуля остаётся одной высоты. */
.modbar .secbar { overflow-x: auto; scrollbar-width: none; }
.modbar .secbar::-webkit-scrollbar { display: none; }

/* Группы вкладок: отчёт и его подразделы. Подразделы видны только
   у раскрытой группы — отступом и точкой-разделителем показано, что это
   уровень ниже, а не соседние вкладки того же ранга. */
.secgrp { display: flex; align-items: stretch; }
/* Группа — отчёт, и читается как заголовок: акцент модуля.
   Подразделы приглушены, положение отмечает черта снизу, а не цвет. */
.modbar .secgrp > a { color: var(--mc, #62c6d8); }
.modbar .secgrp > a:hover { color: var(--mc, #62c6d8); filter: brightness(1.2); }
.modbar .seckids a { color: var(--dim, #8b90a5); }
.modbar .seckids a:hover { color: var(--text, #e8e4d8); }
.modbar .secbar a.on { border-bottom-color: var(--mc, #62c6d8); }
.seckids { display: flex; align-items: stretch; margin-left: 2px; padding-left: 10px; position: relative; }
.seckids::before {
  content: '';
  position: absolute; left: 0; top: 50%;
  width: 3px; height: 3px; margin-top: -1.5px;
  border-radius: 50%;
  background: var(--dim, #8b90a5);
  opacity: .6;
}
.modbar .seckids a { font-size: 12.5px; padding: 0 11px; }

/* Служебная группа идёт сразу за отчётами, отделённая чертой: она не отчёт,
   но и не уезжает в другой конец строки — глазу проще, когда всё рядом.
   Черта та же, что .mx-sep, но пришита к группе, а не отдельным элементом. */
.secgrp.right { margin-left: 14px; padding-left: 16px; position: relative; }
.secgrp.right::before {
  content: '';
  position: absolute; left: 0; top: 50%; margin-top: -11px;
  width: 2px; height: 22px;
  background: var(--mc, #62c6d8);
  border-radius: 1px;
  opacity: .55;
}
.modbar .secgrp.right > a { color: var(--dim, #8b90a5); }
.modbar .secgrp.right > a:hover { color: var(--text, #e8e4d8); filter: none; }