/* База и общие компоненты M3 (ui/*): кнопки, поле, меню, окно, вкладки, таблица, значки. */
/* Roboto — локально (styles/fonts/, Apache 2.0, LICENSE.txt рядом), без CDN: латиница и кириллица.
   Начертания 400, 500, 700 (@fontsource/roboto 5.0.8); других весов интерфейс не просит — страж
   tests/test_next_font_weights.py, иначе браузер синтезирует жирный и штрих размазан (TASK-242). */
@font-face {
  font-family: Roboto; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/roboto-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Roboto; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/roboto-cyrillic-400-normal.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: Roboto; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/roboto-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Roboto; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/roboto-cyrillic-500-normal.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: Roboto; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/roboto-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Roboto; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/roboto-cyrillic-700-normal.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--mat-sys-surface);
  color: var(--mat-sys-on-surface);
  font: 400 13px/1.45 var(--am-font);
  font-synthesis: style;  /* жирный — только настоящим начертанием; курсив (*em*) синтезом */
}
button { font: inherit; color: inherit; }
h1, h2, h3 { font-weight: 500; margin: 0; }
b, strong { font-weight: 700; }
[hidden] { display: none !important; }
.muted { color: var(--mat-sys-on-surface-variant); }
.mono { font-family: var(--am-mono); }
svg.i { width: 24px; height: 24px; fill: currentColor; flex: 0 0 auto; }
:focus-visible { outline: 2px solid var(--mat-sys-primary); outline-offset: 1px; }

/* кнопки: «таблетки» 36px */
.btn, .btn-primary, .btn-tonal, .btn-text {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 36px; padding: 0 20px; border-radius: 999px;
  font-weight: 500; font-size: 14px; letter-spacing: .006rem;
  cursor: pointer; white-space: nowrap; text-decoration: none;
}
.btn-primary { border: 0; background: var(--mat-sys-primary); color: var(--mat-sys-on-primary); }
.btn-primary:hover { box-shadow: var(--am-elev-1); }
.btn { border: 1px solid var(--mat-sys-outline); background: transparent; color: var(--mat-sys-primary); }
.btn:hover, .btn-text:hover { background: color-mix(in srgb, var(--mat-sys-primary) 8%, transparent); }
.btn-tonal { border: 0; background: var(--mat-sys-secondary-container); color: var(--mat-sys-on-secondary-container); }
.btn-tonal:hover { box-shadow: var(--am-elev-1); }
.btn-text { border: 0; background: transparent; color: var(--mat-sys-primary); padding: 0 12px; }
.btn svg, .btn-primary svg, .btn-tonal svg, .btn-text svg { width: 18px; height: 18px; }
/* неактивные кнопки (TASK-326): по M3 — содержимое on-surface 38 %, заливка 12 %; наведение не подсвечивает */
:is(.btn, .btn-primary, .btn-tonal, .btn-text):disabled,
:is(.btn, .btn-primary, .btn-tonal, .btn-text):disabled:hover {
  cursor: not-allowed; box-shadow: none; color: color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent);
}
:is(.btn-primary, .btn-tonal):disabled, :is(.btn-primary, .btn-tonal):disabled:hover {
  background: color-mix(in srgb, var(--mat-sys-on-surface) 12%, transparent);
}
.btn:disabled, .btn:disabled:hover { background: transparent; border-color: color-mix(in srgb, var(--mat-sys-on-surface) 12%, transparent); }
.btn-text:disabled, .btn-text:disabled:hover { background: transparent; }
.icon-btn {
  width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent;
  color: inherit; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.icon-btn:hover { background: var(--mat-sys-surface-container-high); }
.icon-btn svg { width: 22px; height: 22px; }

/* сегментная кнопка */
.seg { display: inline-flex; border: 1px solid var(--mat-sys-outline); border-radius: 999px; overflow: hidden; flex: 0 0 auto; }
.seg button {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 14px;
  border: 0; background: transparent; color: var(--mat-sys-on-surface); font-weight: 500; font-size: 13px; cursor: pointer;
}
.seg button + button { border-left: 1px solid var(--mat-sys-outline); }
.seg button.on { background: var(--mat-sys-secondary-container); color: var(--mat-sys-on-secondary-container); }
.seg button svg { width: 16px; height: 16px; }
.seg.sm button { height: 32px; padding: 0 12px; }

/* поле с подписью на рамке */
.field { position: relative; display: flex; }
.field > label {
  position: absolute; left: 10px; top: -8px; padding: 0 4px; font-size: 11px; line-height: 16px;
  color: var(--mat-sys-on-surface-variant); background: var(--field-bg, var(--mat-sys-surface)); pointer-events: none;
}
.field input, .field select, .field textarea {
  width: 100%; height: 40px; padding: 0 14px; border: 1px solid var(--mat-sys-outline);
  border-radius: var(--am-corner-s); background: transparent; color: var(--mat-sys-on-surface); font: inherit; font-size: 14px;
}
.field input:focus, .field select:focus { outline: none; border: 2px solid var(--mat-sys-primary); padding: 0 13px; }
.field:focus-within > label { color: var(--mat-sys-primary); }
.field-area { flex-direction: column; gap: 6px; }
.field-area textarea, .field select { height: auto; min-height: 40px; }
.field-area textarea { padding: 10px 14px; resize: vertical; line-height: 1.45; }
.field textarea:focus, .field select:focus { outline: none; border: 2px solid var(--mat-sys-primary); }

/* Общие классы видов (TASK-284): жили в tasks.css вида «Задачи», и вид без «Задач» — бэклог,
   окно «Сообщить о проблеме» — оставался без них. Стили одного вида другому не нужны. */
.card { background: var(--mat-sys-surface-container-lowest); border: 1px solid var(--mat-sys-outline-variant); border-radius: var(--am-corner-m); }
.label { font-size: 12px; font-weight: 500; color: var(--mat-sys-on-surface-variant); letter-spacing: .031rem; }
.tc-error { margin: 0; font-size: 13px; color: var(--mat-sys-error); white-space: pre-wrap; }
/* поля фильтров: компактные, без подписи на рамке */
.filter-input {
  width: 100%; min-width: 0; height: 32px; padding: 0 8px; font: inherit; font-size: 13px; color: var(--mat-sys-on-surface);
  background: var(--mat-sys-surface-container-lowest); border: 1px solid var(--mat-sys-outline-variant); border-radius: var(--am-corner-s);
}
select.filter-input { cursor: pointer; }
.filter-input:hover { border-color: var(--mat-sys-outline); }
.filter-input:focus { border-color: var(--mat-sys-primary); outline: none; }
.filter-check { flex-direction: row; align-items: center; gap: 8px; align-self: end; height: 32px; font-size: 13px; cursor: pointer; }
/* панель фильтров списка (TASK-287, ui/filters.js) — как в «Задачах»: кнопка «Фильтры» со счётчиком,
   форма над списком, применяется кнопкой; отступ панели от краёв задаёт вид */
.btn.is-active { background: color-mix(in srgb, var(--mat-sys-primary) 10%, transparent); }
/* кнопка «Фильтры» — размера панели закладки (.view-bar .btn-sm) и вне её: в администрировании */
.flt-btn { height: 32px; padding: 0 14px; }
.filters-count {
  display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px;
  font-size: 11px; color: var(--mat-sys-on-primary); background: var(--mat-sys-primary); border-radius: 999px;
}
.filters {
  display: flex; flex-direction: column; gap: 8px; padding: 16px; min-width: 0;
  background: var(--mat-sys-surface-container-low); border: 1px solid var(--mat-sys-outline-variant); border-radius: var(--am-corner-m);
}
.filters-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px 16px; }
.filter { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.filter-label { overflow: hidden; font-size: 12px; color: var(--mat-sys-on-surface-variant); text-overflow: ellipsis; white-space: nowrap; }
/* группа флажков одной ячейкой («Ждёт вас» и «Конфликт» в «Задачах») */
.filter-flags { flex-direction: row; flex-wrap: wrap; gap: 0 16px; align-self: end; }
.filters-actions {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; padding-top: 4px;
  border-top: 1px solid var(--mat-sys-outline-variant);
}
.filters-actions .muted { margin-right: auto; font-size: 12px; }
.filters-actions .btn, .filters-actions .btn-text { height: 32px; }
@media (max-width: 480px) {
  .filters-grid { grid-template-columns: minmax(0, 1fr); }
  /* кнопка «Фильтры» на телефоне — значком со счётчиком во всех местах (TASK-288: в «Задачах» ей
     не хватало ряда панели); подпись остаётся именем кнопки для чтеца экрана */
  .flt-btn { gap: 4px; }
  .flt-btn > span:not(.filters-count) { font-size: 0; }
}

/* значки и счётчики */
.badge {
  display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: 6px;
  font-size: 12px; font-weight: 500; white-space: nowrap;
  background: var(--mat-sys-surface-container-highest); color: var(--mat-sys-on-surface-variant);
}
.badge.t-need { background: var(--mat-sys-secondary-container); color: var(--mat-sys-on-secondary-container); }
.badge.t-error { background: transparent; color: var(--mat-sys-error); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mat-sys-error) 45%, transparent); }
.need {
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--mat-sys-surface-container-highest); color: var(--mat-sys-on-surface-variant);
  font-size: 11px; font-weight: 500;
}

/* вкладки */
.tabs { display: flex; border-bottom: 1px solid var(--mat-sys-outline-variant); flex: 0 0 auto; }
.tab {
  position: relative; padding: 0 16px; height: 44px; border: 0; background: transparent;
  font-size: 14px; font-weight: 500; cursor: pointer; color: var(--mat-sys-on-surface-variant);
}
.tab:hover { background: var(--mat-sys-surface-container-low); }
.tab.on { color: var(--mat-sys-primary); }
.tab.on::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 3px;
  border-radius: 3px 3px 0 0; background: var(--mat-sys-primary);
}

/* таблица */
.grid-table { border-collapse: collapse; width: 100%; font-size: 13px; }
.grid-table th, .grid-table td {
  border: 1px solid var(--mat-sys-outline-variant); padding: 0 8px; height: 34px; text-align: left; white-space: nowrap;
}
.grid-table th { height: 30px; background: var(--mat-sys-surface-container-low); font-weight: 500; }
.grid-table .num { text-align: right; }
.grid-table .empty { text-align: center; color: var(--mat-sys-on-surface-variant); }

/* меню */
.cmenu, .popover {
  position: fixed; z-index: 30; background: var(--mat-sys-surface-container-lowest);
  border: 1px solid var(--mat-sys-outline-variant); border-radius: var(--am-corner-m); box-shadow: var(--am-elev-3);
}
.cmenu { min-width: 220px; padding: 6px; display: flex; flex-direction: column; }
.mi {
  display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 0 12px; border: 0;
  border-radius: var(--am-corner-s); background: transparent; color: var(--mat-sys-on-surface);
  font-size: 14px; text-align: left; cursor: pointer;
}
.mi:hover, .mi:focus-visible { background: var(--mat-sys-surface-container-high); outline: none; }
.mi svg { width: 20px; height: 20px; fill: var(--mat-sys-on-surface-variant); }

/* модальное окно */
.scrim2 {
  position: fixed; inset: 0; z-index: 45; background: rgb(0 0 0 / 32%);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.dlg {
  width: 520px; max-width: 100%; max-height: calc(100vh - 32px); overflow-y: auto; overflow-x: hidden;
  background: var(--mat-sys-surface-container-lowest); border-radius: var(--am-corner-xl); box-shadow: var(--am-elev-3);
  padding: 24px; display: flex; flex-direction: column; gap: 18px; --field-bg: var(--mat-sys-surface-container-lowest);
}
.dlg h2 { font-size: 22px; font-weight: 400; }
.dlg-actions { display: flex; justify-content: flex-end; gap: 8px; }
/* тело окна — общее для всех видов (TASK-268: жило в таблице «Агентов», без неё зазоры пропадали) */
.dlg-body { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.dlg-note { margin: 0; font-size: 12px; }
.dlg-error { margin: 0; font-size: 13px; color: var(--mat-sys-error); }
/* широкое окно с формой: постановка задачи, запись бэклога, обращение; на телефоне — во всю
   ширину (max-width: 100% у .dlg) */
.dlg.dlg-wide { width: 720px; }
.nt-form { display: flex; flex-direction: column; gap: 18px; }
.nt-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }

/* сообщения */
#snackbars {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60;
  display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none;
}
.snackbar {
  display: flex; align-items: center; gap: 12px; min-height: 48px; max-width: min(640px, calc(100vw - 32px));
  padding: 6px 8px 6px 16px; border-radius: 4px; box-shadow: var(--am-elev-3); pointer-events: auto;
  background: var(--mat-sys-inverse-surface); color: var(--mat-sys-inverse-on-surface); font-size: 14px;
}
.snackbar.error { background: var(--mat-sys-error-container); color: var(--mat-sys-on-error-container); }
.snackbar .btn-text { color: inherit; height: 32px; }

/* заглушка «в работе» */
.stub { max-width: 520px; margin: 64px auto; padding: 0 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.stub-ico {
  width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--mat-sys-surface-container-high); color: var(--mat-sys-on-surface-variant);
}
.stub h2 { font-size: 18px; }
.stub p { margin: 0; font-size: 14px; }

/* Тема терминала (TASK-267): поле эмулятора и предпросмотр в «Внешнем виде». «Как интерфейс» —
   токены текущей темы; явная тема терминала — свои токены, тема интерфейса на них не влияет. */
.term-box, .term-preview {
  --term-bg: var(--mat-sys-surface-container-lowest);
  --term-fg: var(--mat-sys-on-surface);
  --term-accent: var(--mat-sys-primary);
  --term-border: var(--mat-sys-outline-variant);
}
:root[data-term-theme="light"] :is(.term-box, .term-preview) {
  --term-bg: var(--am-term-light-bg);
  --term-fg: var(--am-term-light-fg);
  --term-accent: var(--am-term-light-accent);
  --term-border: var(--am-term-light-border);
  color-scheme: light;
}
:root[data-term-theme="dark"] :is(.term-box, .term-preview) {
  --term-bg: var(--am-term-dark-bg);
  --term-fg: var(--am-term-dark-fg);
  --term-accent: var(--am-term-dark-accent);
  --term-border: var(--am-term-dark-border);
  color-scheme: dark;
}