/* ============================================================================
   section-tabs.css — MA_SectionTabs: вкладки 2-го уровня (единый компонент).
   ENG-008 (сертификация 2026-07). Только токены theme.css, ноль хардкод-цветов,
   обе темы (light + dark — цвета наследуются из токенов --accent, --text2, --border).

   КАНОН (см. section-tabs.js «КАНОН РАЗМЕЩЕНИЯ»):
     — ряд .ma-stabs = full-bleed, первый таб на оси контента 264 (левый inset
       --space-6), нижняя рамка --border 2px (жанр Склад/Карточки);
     — вкладка .ma-stab = подпись 14px/600, активная — цвет --accent + подчёркивание
       через border-bottom (сливается с рамкой ряда → margin-bottom:-2px);
     — flex-shrink:0 у ряда — безопасно во flex-column страницах (Склад app-shell,
       Мои расходы data-table-frame): ряд не сжимается.
   ============================================================================ */

.ma-stabs {
  display: flex;
  align-items: stretch;
  gap: 0;
  flex-shrink: 0;
  border-bottom: 2px solid var(--border);
  padding-left: var(--space-6);     /* первый таб на оси контента (264), как .mode-tabs-bar эталона */
  margin-bottom: var(--space-6);
  overflow-x: auto;                 /* узкие экраны — свой горизонтальный скролл, не ломает body */
  overflow-y: hidden;
  scrollbar-width: none;            /* полосу прокрутки прячем — ряд короткий */
}
.ma-stabs::-webkit-scrollbar { height: 0; width: 0; }

.ma-stab {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 12px var(--space-6);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text2);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;              /* слить активное подчёркивание с рамкой ряда */
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}
.ma-stab:hover { color: var(--text); }
.ma-stab.active { color: var(--accent); border-bottom-color: var(--accent); }
.ma-stab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: var(--radius-sm);
}
.ma-stab:disabled,
.ma-stab[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

.ma-stab svg { width: 16px; height: 16px; flex-shrink: 0; }

.ma-stab-label { display: inline-flex; align-items: center; gap: var(--space-2); }

/* Мелкая плашка-статус после подписи (напр. «бета») */
.ma-stab-badge {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  background: var(--accent-light);
  color: var(--accent);
}

/* Суффикс после подписи (напр. бегущая сумма вкладки «Мои расходы») */
.ma-stab-suffix {
  font-size: 13px;
  font-weight: 600;
  color: var(--text2);
  opacity: 0.7;
  transition: opacity 0.15s, color 0.15s;
}
.ma-stab:hover .ma-stab-suffix { opacity: 1; }
.ma-stab.active .ma-stab-suffix { color: var(--accent); opacity: 1; }

/* Узкие экраны (ноутбук 1366 и меньше) — компактнее, единый для всех consumer-страниц */
@media (max-width: 1366px) {
  .ma-stab { padding: 10px var(--space-4); font-size: 13px; }
}