/* Каркас админки поверх mdui (Material Design 3).
   Цвета — только роли M3 (rgb(var(--mdui-color-…))), типографика — шкала M3 (--mdui-typescale-…).
   Компоненты (кнопки, поля, списки, диалоги, меню, прогресс) — из mdui; здесь только раскладка
   и то, чего в библиотеке нет: адаптивная таблица, последовательность материалов, предпросмотр сообщения. */

:root {
  --page-max: 1120px;
  --gap: 16px;
  --radius-m: var(--mdui-shape-corner-medium);
  --radius-l: var(--mdui-shape-corner-large);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* mdui-layout full-height: прокручивается область содержимого, верхняя панель и шторка остаются на месте */
html, body { height: 100%; }
body {
  margin: 0;
  background: rgb(var(--mdui-color-surface));
  color: rgb(var(--mdui-color-on-surface));
  font-family: Roboto, "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: var(--mdui-typescale-body-large-size);
  line-height: var(--mdui-typescale-body-large-line-height);
}
/* Пока веб-компоненты не загрузились — не показываем «сырую» разметку */
mdui-layout:not(:defined), mdui-dialog:not(:defined), mdui-dropdown:not(:defined) { visibility: hidden; }

a { color: rgb(var(--mdui-color-primary)); }
a:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid rgb(var(--mdui-color-primary));
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Типографика M3 ---------- */
.headline-small { font-size: var(--mdui-typescale-headline-small-size); line-height: var(--mdui-typescale-headline-small-line-height); font-weight: var(--mdui-typescale-headline-small-weight); margin: 0; }
.title-large { font-size: var(--mdui-typescale-title-large-size); line-height: var(--mdui-typescale-title-large-line-height); font-weight: var(--mdui-typescale-title-large-weight); margin: 0; }
.title-medium { font-size: var(--mdui-typescale-title-medium-size); line-height: var(--mdui-typescale-title-medium-line-height); font-weight: var(--mdui-typescale-title-medium-weight); letter-spacing: var(--mdui-typescale-title-medium-tracking); margin: 0; }
.title-small { font-size: var(--mdui-typescale-title-small-size); line-height: var(--mdui-typescale-title-small-line-height); font-weight: var(--mdui-typescale-title-small-weight); margin: 0; }
.body-medium { font-size: var(--mdui-typescale-body-medium-size); line-height: var(--mdui-typescale-body-medium-line-height); }
.body-small { font-size: var(--mdui-typescale-body-small-size); line-height: var(--mdui-typescale-body-small-line-height); }
.label-large { font-size: var(--mdui-typescale-label-large-size); font-weight: var(--mdui-typescale-label-large-weight); }
.muted { color: rgb(var(--mdui-color-on-surface-variant)); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .875em; word-break: break-all; }

/* ---------- Каркас ---------- */
.app-drawer { --shape-corner: 0; }
.app-drawer .drawer-head { padding: 20px 28px 12px; }
@media (min-width: 1024px) { .app-drawer .drawer-head { display: none; } .app-drawer mdui-list { padding-top: 12px; } }
.app-drawer mdui-list { padding: 0 12px; }
.app-bar-spacer { flex: 1 1 auto; }
.nav-toggle { display: none; }
@media (max-width: 1023.98px) { .nav-toggle { display: inline-flex; } }

.page { max-width: var(--page-max); margin: 0 auto; padding: 24px 24px 96px; }
@media (max-width: 599.98px) { .page { padding: 16px 16px 96px; } }

.page-header { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; justify-content: space-between; margin-bottom: 24px; }
.page-header .titles { min-width: 0; flex: 1 1 320px; }
.page-header .actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-bottom: 4px; color: rgb(var(--mdui-color-on-surface-variant)); font-size: var(--mdui-typescale-body-medium-size); }
.breadcrumbs a { color: inherit; text-decoration: none; }
.breadcrumbs a:hover { color: rgb(var(--mdui-color-primary)); text-decoration: underline; }
.breadcrumbs mdui-icon { font-size: 18px; }

.section { margin-top: 32px; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }

/* Поверхность-контейнер вместо вложенных карточек */
.surface { background: rgb(var(--mdui-color-surface-container-low)); border-radius: var(--radius-l); padding: 16px; }
.surface + .surface { margin-top: 12px; }
.stack > * + * { margin-top: 16px; }
.row { display: flex; gap: 8px 12px; align-items: center; flex-wrap: wrap; }
.row.end { justify-content: flex-end; }
.grow { flex: 1 1 0%; min-width: 0; }
.row > mdui-text-field.grow { flex: 1 1 220px; }
.form-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); align-items: start; }

/* ---------- Статусы (метки состояния, не интерактивные) ---------- */
.status { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 10px 0 8px; border-radius: 8px; white-space: nowrap;
  font-size: var(--mdui-typescale-label-medium-size); font-weight: var(--mdui-typescale-label-medium-weight);
  background: rgb(var(--mdui-color-surface-container-highest)); color: rgb(var(--mdui-color-on-surface-variant)); }
.status mdui-icon { font-size: 16px; }
.status.ok { background: rgb(var(--mdui-color-primary-container)); color: rgb(var(--mdui-color-on-primary-container)); }
.status.wait { background: rgb(var(--mdui-color-secondary-container)); color: rgb(var(--mdui-color-on-secondary-container)); }
.status.warn { background: rgb(var(--app-color-warning-container)); color: rgb(var(--app-color-on-warning-container)); }
.status.err { background: rgb(var(--mdui-color-error-container)); color: rgb(var(--mdui-color-on-error-container)); }
.status.neutral { background: rgb(var(--mdui-color-surface-container-highest)); color: rgb(var(--mdui-color-on-surface-variant)); }

/* ---------- Уведомление в потоке страницы (M3 banner) ---------- */
.notice { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; border-radius: var(--radius-m);
  background: rgb(var(--mdui-color-surface-container-high)); color: rgb(var(--mdui-color-on-surface)); margin-bottom: 12px; }
.notice > mdui-icon { flex: none; margin-top: 2px; color: rgb(var(--mdui-color-on-surface-variant)); }
.notice.warn { background: rgb(var(--app-color-warning-container)); color: rgb(var(--app-color-on-warning-container)); }
.notice.warn > mdui-icon { color: inherit; }
.notice.err { background: rgb(var(--mdui-color-error-container)); color: rgb(var(--mdui-color-on-error-container)); }
.notice.err > mdui-icon { color: inherit; }
.notice .body-medium { margin: 0; }
.notice ul { margin: 4px 0 0; padding-left: 20px; }

/* ---------- Пустое состояние ---------- */
.empty { text-align: center; padding: 40px 16px; color: rgb(var(--mdui-color-on-surface-variant)); }
.empty > mdui-icon { font-size: 48px; color: rgb(var(--mdui-color-outline)); }
.empty p { margin: 8px 0 16px; }

/* ---------- Показатели ---------- */
.stats { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.stats mdui-card { padding: 16px; width: 100%; }
.stat-value { font-size: var(--mdui-typescale-headline-medium-size); line-height: var(--mdui-typescale-headline-medium-line-height); }
.stat-label { color: rgb(var(--mdui-color-on-surface-variant)); font-size: var(--mdui-typescale-body-medium-size); }

/* ---------- Списки ---------- */
.list-surface { background: rgb(var(--mdui-color-surface-container-low)); border-radius: var(--radius-l); overflow: hidden; }
.list-surface mdui-list { padding: 4px 0; }
.list-surface mdui-divider { margin: 0 16px; }
.item-actions { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.list-row { display: flex; align-items: center; flex-wrap: wrap; gap: 0 8px; padding: 0 8px; }
.list-row > mdui-list-item { flex: 1 1 260px; min-width: 0; }
@media (max-width: 599.98px) { .list-row > .item-actions { padding: 0 0 8px 48px; flex-wrap: nowrap; } }

/* ---------- Адаптивная таблица: на узком экране строки превращаются в карточки-строки ---------- */
.data-table { width: 100%; border-collapse: collapse; background: rgb(var(--mdui-color-surface-container-low)); border-radius: var(--radius-l); overflow: hidden; }
.data-table th, .data-table td { text-align: left; padding: 12px 16px; border-bottom: 1px solid rgb(var(--mdui-color-outline-variant)); vertical-align: middle; }
.data-table tr:last-child td { border-bottom: none; }
.data-table th { font-size: var(--mdui-typescale-label-large-size); font-weight: var(--mdui-typescale-label-large-weight); color: rgb(var(--mdui-color-on-surface-variant)); background: rgb(var(--mdui-color-surface-container)); white-space: nowrap; }
.data-table td.num, .data-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table td.actions { text-align: right; white-space: nowrap; }
.data-table tbody tr:hover { background: rgb(var(--mdui-color-on-surface) / .04); }
@media (max-width: 719.98px) {
  .data-table, .data-table tbody, .data-table tr, .data-table td { display: block; width: 100%; }
  .data-table thead { display: none; }
  .data-table tr { padding: 12px 16px; border-bottom: 1px solid rgb(var(--mdui-color-outline-variant)); }
  .data-table tr:last-child { border-bottom: none; }
  .data-table td { border: none; padding: 2px 0; }
  .data-table td[data-label]::before { content: attr(data-label) ": "; font-family: Roboto, "Segoe UI", system-ui, sans-serif; color: rgb(var(--mdui-color-on-surface-variant)); font-size: var(--mdui-typescale-body-small-size); }
  .data-table td.num { text-align: left; }
  .data-table td.actions { text-align: left; padding-top: 8px; }
  .data-table td.primary-cell { font-size: var(--mdui-typescale-title-medium-size); }
}

/* ---------- Последовательность материалов урока ---------- */
.sequence { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.seq-item { position: relative; padding-left: 52px; padding-bottom: 12px; }
.seq-item::before { /* линия между шагами */
  content: ""; position: absolute; left: 19px; top: 44px; bottom: 0; width: 2px; background: rgb(var(--mdui-color-outline-variant)); }
.seq-item:last-child::before { display: none; }
.seq-num { position: absolute; left: 0; top: 4px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: rgb(var(--mdui-color-secondary-container)); color: rgb(var(--mdui-color-on-secondary-container));
  font-size: var(--mdui-typescale-title-medium-size); font-weight: 500; }
.seq-card { background: rgb(var(--mdui-color-surface-container-low)); border-radius: var(--radius-l); padding: 12px 8px 12px 16px; }
.seq-card.highlight { outline: 2px solid rgb(var(--mdui-color-primary)); }
.seq-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 40px; }
.seq-kind { display: inline-flex; align-items: center; gap: 6px; font-size: var(--mdui-typescale-title-small-size); font-weight: 500; }
.seq-kind mdui-icon { color: rgb(var(--mdui-color-primary)); }
.seq-file { color: rgb(var(--mdui-color-on-surface-variant)); font-size: var(--mdui-typescale-body-medium-size); min-width: 0; overflow-wrap: anywhere; }
.seq-body { padding: 8px 8px 0 0; }
.stage-compact { display: none; }
@media (max-width: 599.98px) {
  .seq-head > .seq-status { order: 10; flex-basis: 100%; }
  .seq-body .stages { display: none; }
  .stage-compact { display: block; margin: 8px 0 4px; font-size: var(--mdui-typescale-label-large-size); }
  .seq-item { padding-left: 0; }
  .seq-item::before { display: none; }
  .seq-num { position: static; width: 28px; height: 28px; font-size: var(--mdui-typescale-label-large-size); flex: none; }
  .seq-card { padding: 12px; }
}

/* Этапы обработки файла */
.stages { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; margin: 8px 0 4px; list-style: none; padding: 0; }
.stage { display: inline-flex; align-items: center; gap: 4px; font-size: var(--mdui-typescale-label-medium-size); color: rgb(var(--mdui-color-on-surface-variant)); }
.stage mdui-icon { font-size: 18px; }
.stage.done { color: rgb(var(--mdui-color-primary)); }
.stage.current { color: rgb(var(--mdui-color-on-surface)); font-weight: 600; }
.stage.failed { color: rgb(var(--mdui-color-error)); font-weight: 600; }
.stage-sep { color: rgb(var(--mdui-color-outline)); font-size: 16px; }
.progress-line { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.progress-line mdui-linear-progress { flex: 1 1 auto; }
.progress-text { font-size: var(--mdui-typescale-body-small-size); color: rgb(var(--mdui-color-on-surface-variant)); white-space: nowrap; }

/* Новая версия файла (замена) — внутри карточки материала */
.replacement { margin-top: 12px; padding: 12px; border-radius: var(--radius-m); background: rgb(var(--mdui-color-surface-container)); }
.replacement > .row mdui-icon { color: rgb(var(--mdui-color-primary)); }

/* Панель форматирования */
.format-bar { display: flex; flex-wrap: wrap; gap: 2px; margin-bottom: 4px; }

/* Предпросмотр сообщения Telegram */
.tg-chat { max-width: 520px; margin: 0 auto; padding: 12px; border-radius: var(--radius-l); background: rgb(var(--mdui-color-surface-container)); }
.bubble { background: rgb(var(--mdui-color-surface-container-lowest)); color: rgb(var(--mdui-color-on-surface)); border-radius: 16px 16px 16px 4px; padding: 8px 12px; margin-bottom: 8px;
  overflow-wrap: anywhere; font-size: var(--mdui-typescale-body-medium-size); line-height: var(--mdui-typescale-body-medium-line-height); }
.bubble .media { display: flex; align-items: center; gap: 8px; padding: 16px; margin: -4px -8px 6px; border-radius: 12px; background: rgb(var(--mdui-color-surface-container-high)); }
.bubble blockquote { border-left: 3px solid rgb(var(--mdui-color-primary)); margin: 4px 0; padding-left: 8px; }
.bubble code, .bubble pre { font-family: ui-monospace, Menlo, monospace; background: rgb(var(--mdui-color-surface-container-high)); border-radius: 4px; padding: 0 4px; }
.bubble pre { padding: 8px; overflow-x: auto; }
.bubble .spoiler { background: rgb(var(--mdui-color-outline)); color: transparent; border-radius: 4px; }
.bubble .spoiler:hover { background: transparent; color: inherit; }
.seq-body .bubble { max-width: 560px; background: rgb(var(--mdui-color-surface-container-lowest)); }

/* Столбики активности (горизонтальная гистограмма) */
.bars { display: grid; grid-template-columns: auto 1fr auto; gap: 6px 12px; align-items: center; font-size: var(--mdui-typescale-body-small-size); }
.bars .bar { height: 12px; border-radius: 0 6px 6px 0; background: rgb(var(--mdui-color-primary)); min-width: 2px; }
.bars .day { color: rgb(var(--mdui-color-on-surface-variant)); font-variant-numeric: tabular-nums; }
.bars .val { font-variant-numeric: tabular-nums; }

/* Вход */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 16px; background: rgb(var(--mdui-color-surface-container)); }
.login-card { width: 100%; max-width: 400px; padding: 32px 24px; }

/* Диалоги на телефоне — на всю ширину */
mdui-dialog::part(panel) { max-width: min(560px, calc(100vw - 32px)); }
.dialog-form { display: grid; gap: 16px; min-width: min(420px, calc(100vw - 96px)); }
.checks { display: grid; gap: 4px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

.inline-form { display: inline-flex; margin: 0; }
.show-compact { display: none; }
@media (max-width: 599.98px) { .hide-compact { display: none; } .show-compact { display: grid; } }
/* Опасное основное действие — цветовая роль error */
mdui-button.danger { --mdui-color-primary: var(--mdui-color-error); --mdui-color-on-primary: var(--mdui-color-on-error); }
details.editor { margin-top: 8px; }
details.editor > summary { cursor: pointer; color: rgb(var(--mdui-color-primary)); padding: 8px 0; list-style: none; display: inline-flex; align-items: center; gap: 4px; min-height: 40px; }
details.editor > summary::-webkit-details-marker { display: none; }
details.editor > summary::before { content: "edit"; font-family: "Material Symbols Outlined"; font-size: 20px; }
details.editor[open] > summary::before { content: "expand_less"; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }