/* Дополнения к теме Bootswatch Litera (см. макет v2) */
/* Стиль Академии: цвета и шрифт из шаблона презентации Академии. Inter — текст, Inter Black
   (900) — заголовки. Зелёный, жёлтый и красный — только там, где у цвета есть смысл.
   Сам шрифт Inter объявлен внутри страницы (base.html, web._inline_fonts), а не здесь. */
:root {
  --ak-navy: #1B2357;    /* логотип, заголовки, главные кнопки */
  --ak-purple: #69448D;  /* акцент: активная вкладка, фокус */
  --ak-grey: #BFBFBF;    /* рамки кнопок и полей */
  --ak-bg: #F4F5F9;
  --ak-ink: #262C4F;
  --ak-muted: #6B7090;
  --ak-line: #E3E5EE;
  --ak-stripe: #F7F8FB;
  --ak-tint: #E8EAF3;    /* бледный тёмно-синий */
  --bs-primary: #1B2357; --bs-primary-rgb: 27, 35, 87;
  --bs-link-color: #1B2357; --bs-link-color-rgb: 27, 35, 87;
  --bs-link-hover-color: #69448D; --bs-link-hover-color-rgb: 105, 68, 141;
  --bs-body-font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --bs-body-color: #262C4F; --bs-body-color-rgb: 38, 44, 79;
  --bs-emphasis-color: #1B2357; --bs-emphasis-color-rgb: 27, 35, 87;
  --bs-secondary-color: rgba(38, 44, 79, .7);
  --bs-border-color: #E3E5EE;
  --bs-focus-ring-color: rgba(105, 68, 141, .25);
}
body { background: var(--ak-bg); }
p, .alert p { font-family: inherit; }  /* у Litera абзацы набраны Georgia */

/* шапка: логотип Академии | «Посещаемость ВКС» */
.navbar { --bs-navbar-color: var(--ak-muted); --bs-navbar-hover-color: var(--ak-navy); --bs-navbar-active-color: var(--ak-navy); }
.navbar-brand { display: flex; align-items: center; gap: .85rem; font-size: 1.05rem; font-weight: 700; letter-spacing: -.005em; color: var(--ak-navy); }
.brand-logo { height: 32px; width: auto; display: block; }
.brand-sep { width: 1px; height: 26px; background: var(--ak-grey); }
.navbar .nav-link { font-weight: 500; border-bottom: 2px solid transparent; }
.navbar .nav-link.active { border-bottom-color: var(--ak-purple); }
.nav-actor { text-decoration: none; }  /* «ФИО · роль» — ссылка на «Мой пароль» */
.nav-actor:hover, .nav-actor:focus-visible { color: var(--ak-navy); text-decoration: underline; }
@media (max-width: 419.98px) { .brand-sep, .brand-name { display: none; } }
.navbar .nav-link { white-space: nowrap; }
.nav-actor { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 16rem; }
/* планшет и узкий ноутбук: убираем название рядом с логотипом, чтобы меню не переносилось */
@media (min-width: 768px) and (max-width: 1199.98px) { .brand-sep, .brand-name { display: none; } }
/* планшет (iPad стоя — 768–834 px): у админа шесть пунктов меню — мельче и плотнее, логотип
   меньше, иначе шапка шире экрана и страница уезжает вбок */
@media (min-width: 768px) and (max-width: 991.98px) {
  .navbar .nav-main .nav-link { padding-left: .3rem; padding-right: .3rem; font-size: .875rem; }
  .brand-logo { height: 26px; }
}

.page-title { font-size: 1.75rem; font-weight: 900; letter-spacing: -.01em; color: var(--ak-navy); margin: 0; }
.hint { color: var(--ak-muted); font-size: .875rem; }
.card { border-color: var(--ak-line); box-shadow: 0 1px 2px rgba(27,35,87,.04); }
.card-header { background: #fff; font-weight: 700; color: var(--ak-navy); border-bottom-color: #eef0f5; }

/* кнопки и поля */
.btn { font-weight: 600; }
.btn-primary { --bs-btn-bg: #1B2357; --bs-btn-border-color: #1B2357; --bs-btn-hover-bg: #2A3470; --bs-btn-hover-border-color: #2A3470;
  --bs-btn-active-bg: #141A42; --bs-btn-active-border-color: #141A42; --bs-btn-disabled-bg: #1B2357; --bs-btn-disabled-border-color: #1B2357;
  --bs-btn-focus-shadow-rgb: 105, 68, 141; }
.btn-outline-primary { --bs-btn-color: #1B2357; --bs-btn-border-color: #1B2357; --bs-btn-hover-bg: #1B2357; --bs-btn-hover-border-color: #1B2357;
  --bs-btn-active-bg: #1B2357; --bs-btn-active-border-color: #1B2357; --bs-btn-disabled-color: #1B2357; --bs-btn-disabled-border-color: #1B2357;
  --bs-btn-focus-shadow-rgb: 105, 68, 141; }
.btn-outline-secondary { --bs-btn-color: #1B2357; --bs-btn-border-color: #BFBFBF; --bs-btn-hover-color: #1B2357; --bs-btn-hover-bg: #EDEEF4;
  --bs-btn-hover-border-color: #BFBFBF; --bs-btn-active-color: #1B2357; --bs-btn-active-bg: #E3E5EE; --bs-btn-active-border-color: #BFBFBF;
  --bs-btn-focus-shadow-rgb: 105, 68, 141; }
.form-control, .form-select { border-color: #D3D5DE; }
.form-control:focus, .form-select:focus { border-color: #9C86B6; box-shadow: 0 0 0 .2rem rgba(105,68,141,.2); }
.form-check-input:checked { background-color: #1B2357; border-color: #1B2357; }
.form-check-input:focus { border-color: #9C86B6; box-shadow: 0 0 0 .2rem rgba(105,68,141,.2); }

/* сообщения: белые или бледные с цветной полоской слева, текст тёмный */
.alert { color: var(--ak-ink); background: #fff; border: 1px solid var(--ak-line); border-left-width: 4px; border-radius: .5rem; }
/* .alert-link тоже: у Litera правило «.alert .alert-link» белое, и одно «.alert a» его не перебивает */
.alert a, .alert .alert-link { color: inherit; font-weight: 600; }
/* кнопка-ссылка в сообщении («Вернуться к форме») — как обычная кнопка, а не текст сообщения
   (и не белый подчёркнутый текст из .alert a у Litera); нажатие и фокус — правила .btn */
.alert a.btn { color: var(--bs-btn-color); font-weight: var(--bs-btn-font-weight); text-decoration: none; }
.alert a.btn:hover { color: var(--bs-btn-hover-color); }
.alert-success { background: #fff; border-left-color: #02b875; }
.alert-info { background: #F3F4F9; border-left-color: var(--ak-navy); }
.alert-warning { background: #FFF8E6; border-color: #F3DFAE; border-left-color: #E0A100; color: #6B4A00; }
.alert-danger { background: #FDECEC; border-color: #F5C6C4; border-left-color: #C9302C; color: #8F1F1C; }

/* строка состояния сборщика: вариант B — белая с зелёной точкой, при ошибке красная */
.status-dot { display: inline-block; flex: none; width: .55rem; height: .55rem; border-radius: 50%; background: #02b875; box-shadow: 0 0 0 3px #D9F4E8; margin-right: .6rem; }
#status-banner.alert-danger .status-dot { background: #c9302c; box-shadow: 0 0 0 3px #F8D3D2; }
#status-banner .status-live { color: var(--ak-muted) !important; }
#status-banner.alert-danger .status-live { color: #8F1F1C !important; }

/* таблицы: чередование строк */
.table { --bs-table-color: var(--ak-ink); }
.table tbody tr:nth-child(even) { background: var(--ak-stripe); }
.table tbody tr:nth-child(even) > * { background-color: var(--ak-stripe); }
/* список групп: полосы по видимым строкам — строки, скрытые фильтром (hidden), не сбивают
   чередование; браузер без «of S» просто покажет таблицу без полос */
.tc-groups tbody tr:nth-child(even), .tc-groups tbody tr:nth-child(even) > * { background: transparent; }
.tc-groups tbody tr:nth-child(even of :not([hidden])),
.tc-groups tbody tr:nth-child(even of :not([hidden])) > * { background: var(--ak-stripe); }
.table thead th { color: var(--ak-muted); font-weight: 600; }

/* матрица посещаемости */
.att { font-size: .85rem; }
.att th, .att td { text-align: center; vertical-align: middle; padding: .35rem .4rem; white-space: nowrap; }
.att th:first-child, .att td:first-child { text-align: left; position: sticky; left: 0; background: #fff; z-index: 1; min-width: 12rem; }
.att tbody tr:nth-child(even) td:first-child { background: var(--ak-stripe); }
.att thead th { font-weight: 600; color: var(--ak-ink); border-bottom: 2px solid var(--ak-line); }
.cell { display: inline-block; min-width: 3.6rem; padding: .1rem .35rem; border-radius: .35rem; font-weight: 600; cursor: pointer; }
.att td > a { text-decoration: none; }  /* ячейки и «—» — ссылки, но без подчёркивания */
.c-green  { background: #e7f7ef; color: #02864f; }
.c-yellow { background: #fff4d9; color: #a96f00; }
.c-red    { background: #fdecec; color: #c9302c; }
.c-nodata { color: #9aa1ab; font-weight: 400; }
.c-future { color: #c5cad3; font-weight: 400; }
.manual::after { content: " ✎"; font-weight: 400; font-size: .75rem; }
.warn-head { color: #b35c00; cursor: help; }
.legend span { margin-right: 1rem; white-space: nowrap; }
.chip { display: inline-block; background: var(--ak-tint); color: var(--ak-navy); border-radius: 1rem; padding: .15rem .65rem; margin: .15rem .2rem .15rem 0; font-size: .85rem; }
.chip.guest { background: #f1f3f6; color: #555; }
.steps .nav-link { color: var(--ak-muted); }
.steps .nav-link.active { color: var(--ak-navy); font-weight: 700; box-shadow: inset 0 2px 0 var(--ak-purple); }
.mark-btns .btn { min-width: 6.5rem; }

.inline { display: inline; margin: 0; }
.wizard-card { max-width: 460px; }
.steps-bar { font-size: 1.05rem; }
.tab-body { border-top-left-radius: 0; border-top-color: #dee2e6; }
.nav-tabs.steps { border-bottom: 0; }
.delete-group summary { list-style: none; cursor: pointer; }
.delete-group summary::-webkit-details-marker { display: none; }
.delete-group[open] { position: relative; }
.delete-group[open] form { position: absolute; right: 0; z-index: 5; width: 21rem; }

.registry-pick summary { list-style: none; cursor: pointer; }
.registry-pick summary::-webkit-details-marker { display: none; }
.registry-pick[open] { position: relative; }
.registry-pick[open] form { position: absolute; right: 0; z-index: 5; width: min(24rem, calc(100vw - 2rem)); }
.registry-group { display: block; }
.registry-group[hidden] { display: none !important; }
.registry-groups { max-height: 16rem; overflow-y: auto; }

/* кнопки статуса в одну строку; на телефоне (ниже) переносятся */
.statuses-table td.status-actions { white-space: nowrap; }
/* статус слушателя «нет в Moodle» под ФИО */
.listener-status { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; max-width: 36rem; }
.listener-status .form-select { flex: 0 1 12rem; width: auto; max-width: 100%; }
.listener-status-text { overflow-wrap: anywhere; }
.listener-table td:first-child { overflow-wrap: anywhere; }  /* длинное слово в ФИО не растягивает таблицу */
.listener-status .form-control { flex: 1 1 12rem; min-width: 0; width: auto; }

@media (max-width: 575.98px) {
  .registry-head { position: relative; }
  .registry-pick[open] { position: static; }
  .registry-pick[open] form { left: 0; right: 0; width: auto; }
}

/* таблица подтверждения расписания */
.schedule-confirm input[type="date"] { min-width: 9rem; }
.schedule-confirm input[type="time"] { min-width: 6rem; }
.schedule-confirm select { min-width: 7.5rem; }
.schedule-confirm input[type="text"] { min-width: 18rem; }
.schedule-confirm select.fmt-select { min-width: 10.5rem; }  /* «не загружать» целиком, со стрелкой */
/* вкладка «Расписание»: столбец флажков для «Сделать очными» / «Сделать ВКС» */
.tc-schedule .tc-check { width: 2rem; }
/* подсветка: сегодня — полоса, «сейчас» — насыщеннее и с полосой слева, «следующее» — бледно-синий */
.table.tc-schedule tbody tr.sched-today > * { background-color: var(--ak-stripe); }
.table.tc-schedule tbody tr.sched-now > * { background-color: #EFE8F6; }
.table.tc-schedule tbody tr.sched-next > * { background-color: var(--ak-tint); }
.table.tc-schedule tbody tr.sched-now > :first-child { box-shadow: inset 4px 0 0 var(--ak-purple); }
.sched-pill { display: inline-block; padding: 0 .5rem; border-radius: 1rem; background: var(--ak-purple); color: #fff; font-size: .75rem; font-weight: 600; white-space: nowrap; }
.sched-pill.next { background: var(--ak-tint); color: var(--ak-navy); box-shadow: inset 0 0 0 1px #A7ACCB; }

/* статусы групп и фильтр-чипы */
.gs { display: inline-block; padding: .15rem .6rem; border-radius: 1rem; font-size: .85rem; font-weight: 600; white-space: nowrap; }
.gs-live  { background: #02b875; color: #fff; }
.gs-live::before { content: ""; display: inline-block; width: .45rem; height: .45rem; margin-right: .4rem; border-radius: 50%; background: #fff; vertical-align: middle; }
.gs-soon  { background: #fff4d9; color: #a96f00; }
.gs-study { background: var(--ak-tint); color: var(--ak-navy); }
.gs-start { background: #F0EAF6; color: var(--ak-purple); }
.gs-done  { background: #EEEFF3; color: var(--ak-muted); }
.gs-none  { background: transparent; color: #8A8FA6; border: 1px dashed var(--ak-grey); }
/* очное занятие: бледный тёмно-синий без точки; от «Обучается» (тот же оттенок) отличает
   тонкая обводка — тенью, чтобы плашка не стала выше остальных */
.gs-inperson { background: #E6E8F2; color: var(--ak-navy); box-shadow: inset 0 0 0 1px #A7ACCB; }
.fmt-inperson { display: inline-block; padding: 0 .45rem; border-radius: 1rem; background: #E6E8F2; color: var(--ak-navy);
  box-shadow: inset 0 0 0 1px #A7ACCB; font-size: .75rem; font-weight: 600; line-height: 1.45; white-space: nowrap; }
.gs-sub { font-size: .78rem; font-weight: 400; letter-spacing: normal; color: var(--ak-muted); margin-top: .15rem; }
.gs-sub:empty { display: none; }
/* плашка записи ВКС под статусом «Идёт занятие» */
.rec { display: inline-block; max-width: 100%; margin-top: .25rem; padding: .1rem .55rem; border-radius: 1rem; font-size: .8rem; font-weight: 600; line-height: 1.4; }
.rec-on { background: #fdecec; color: #c62828; }
.rec-on i { display: inline-block; width: .45rem; height: .45rem; margin-right: .4rem; border-radius: 50%; background: #e53935; vertical-align: middle; }
.rec-off { background: #d32f2f; color: #fff; }
.rec-wait, .rec-break, .rec-after, .rec-unknown { background: #EEEFF3; color: #6b7090; }
.rec-hint { font-size: .78rem; font-weight: 400; color: var(--ak-muted); margin-top: .15rem; }
.rec-hint:empty { display: none; }
/* шапка группы: плашка записи в одну строку со статусом */
.group-head .rec { margin: 0 0 0 .5rem; }
@media (prefers-reduced-motion: no-preference) {
  .rec-on i { animation: rec-blink 1.4s ease-in-out infinite; }
  @keyframes rec-blink { 50% { opacity: .25; } }
}
/* вкладка «Записи ВКС» */
.acc { display: inline-block; padding: .05rem .55rem; border-radius: 1rem; font-size: .8rem; font-weight: 600; line-height: 1.4; }
.acc-all { background: #e3f6ee; color: #02805a; }
.acc-space { background: #EEEFF3; color: #6b7090; }
.tc-recs .muted { color: var(--ak-muted); }
.tc-recs .rec { margin-top: 0; }
.tc-recs tr.day-first > td { border-top: 1px solid var(--ak-line); }
.tc-recs tr.rec-missing > td { background: #fff6f6; }
.tc-recs tr.rec-missing td.rec-none { color: #c62828; font-weight: 600; }
.tc-recs tr.rec-pending td.rec-none { color: var(--ak-muted); }
.tc-recs tr.rec-section > td { padding-top: 1rem; background: transparent; border-bottom: 0; color: var(--ak-muted); font-size: .85rem; font-weight: 600; }
.tc-recs td.rec-actions { text-align: right; }
.tc-recs td.rec-actions .btn { margin-left: .25rem; }
[data-copy-link].copied { border-color: #02b875; color: #02805a; }
.status-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
/* чипы фильтра «Ответственный» (.resp-chip) — того же вида, что чипы статуса */
.status-chip, .resp-chip { display: inline-block; padding: .2rem .75rem; border-radius: 1rem; background: #fff; border: 1px solid var(--ak-line); color: var(--ak-ink); text-decoration: none; font-size: .9rem; }
.status-chip:hover, .resp-chip:hover { background: #EDEEF4; color: var(--ak-navy); }
.status-chip.active, .resp-chip.active { background: var(--ak-navy); border-color: var(--ak-navy); color: #fff; }
.status-chip-n, .resp-chip-n { opacity: .75; margin-left: .15rem; }
.resp-chip.zero:not(.active) { color: #A9ADBF; }
.resp-filter { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.resp-filter .form-select { width: auto; max-width: 16rem; }

/* режим отметок: подсказка, пунктир у ячеек, «▾» у дат, меню ячейки и дня */
.mark-hint { background: #F3F4F9; border: 1px solid #D5D8E6; color: var(--ak-navy); border-radius: .35rem; padding: .4rem .75rem; margin-bottom: .5rem; font-size: .875rem; }
.mark-mode .att td[data-future="0"] { cursor: pointer; }
.mark-mode .att td[data-future="0"] > .cell,
.mark-mode .att td[data-future="0"] > .c-nodata { outline: 1px dashed #9C86B6; outline-offset: 1px; }
.mark-mode .att td[data-future="0"] > .c-nodata { display: inline-block; min-width: 3.6rem; padding: .1rem .35rem; border-radius: .35rem; text-decoration: none; }
.mark-mode .view-hint { display: none; }
.att td.mark-busy > * { opacity: .45; }
.day-btn { display: none; margin-left: .2rem; padding: 0 .3rem; border: 1px solid #D5D8E6; border-radius: .25rem; background: #F3F4F9; color: var(--ak-navy); font-size: .7rem; line-height: 1.3; vertical-align: middle; cursor: pointer; }
.day-btn:hover { background: var(--ak-tint); }
.mark-mode .day-btn { display: inline-block; }
.mark-menu { position: absolute; z-index: 1060; min-width: 11rem; max-width: 20rem; background: #fff; border: 1px solid var(--ak-line); border-radius: .5rem; box-shadow: 0 8px 24px rgba(27,35,87,.16); padding: .3rem 0; font-size: .875rem; }
.mark-menu-head { padding: .25rem .85rem .4rem; color: var(--ak-muted); font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mark-menu-item { display: block; width: 100%; padding: .35rem .85rem; border: 0; background: none; color: var(--ak-ink); text-align: left; white-space: nowrap; cursor: pointer; }
.mark-menu-item:hover, .mark-menu-item:focus { background: #F0F1F7; outline: none; }
.mark-menu-sep { height: 1px; margin: .3rem 0; background: #EEF0F5; }
.mm-sign { display: inline-block; width: .9rem; font-weight: 700; }
.mm-green { color: #02864f; }
.mm-yellow { color: #a96f00; }
.mm-red { color: #c9302c; }

/* общий список «слушатель или роль» */
.bind-row { display: flex; gap: .25rem; flex: 1 1 auto; }
.bind-row .bind-filter { max-width: 9rem; }
.bind-row select { min-width: 12rem; }

/* вход: слева тёмно-синяя панель с белым логотипом, справа форма */
.login-shell { display: grid; grid-template-columns: 5fr 7fr; max-width: 760px; margin: 10vh auto 0; padding: 0; overflow: hidden; }
.login-side { background: var(--ak-navy); padding: 2rem; display: flex; flex-direction: column; justify-content: space-between; min-height: 18rem; }
.login-logo { height: 34px; width: auto; align-self: flex-start; }
.login-product { margin: 0; font-weight: 600; color: #C9CBE0; }
.login-main { padding: 2rem 2.25rem; }
@media (max-width: 575.98px) {
  .login-shell { grid-template-columns: 1fr; margin-top: 4vh; }
  .login-side { min-height: 0; gap: 1.25rem; }
}

/* ---- адаптивность: телефоны, планшеты, широкие мониторы ---- */
.nav-wrap, .page-wrap { max-width: 1680px; margin-left: auto; margin-right: auto; }
.hint a, .page-title { overflow-wrap: anywhere; }
.group-head-main { min-width: 0; flex: 1 1 18rem; }
.delete-group[open] form { width: min(21rem, calc(100vw - 2rem)); }
.att-actions { flex: 0 0 auto; }

/* список групп: ширины столбцов закреплены — фильтры по субсидии и статусу не двигают
   таблицу (при авто-раскладке ширины пересчитывались по видимым строкам) */
/* Ширины — по самому длинному тексту столбца (заголовок не переносится) шрифтом Inter. Закреплено
   ~65 rem: в окне 1280 px на «Программу» остаётся ~10 rem, и обычные длинные слова («руководителей»,
   «профессиональной») переносятся только по пробелам. Слово шире столбца (окно 1200–1279 px) рвётся
   посередине — так задаёт word-wrap: break-word у .card (Bootstrap): лучше, чем текст поверх соседа. */
@media (min-width: 1200px) {
  .tc-groups { table-layout: fixed; }
  .tc-groups .col-star { width: 2rem; }
  .tc-groups .col-code { width: 7.5rem; }
  .tc-groups .col-resp { width: 9rem; }
  .tc-groups .col-first { width: 7rem; }
  .tc-groups .col-date { width: 8.5rem; }
  .tc-groups .col-status { width: 13.5rem; }
  .tc-groups .col-next { width: 9rem; }
  .tc-groups .col-unres { width: 8.75rem; }
  .tc-groups thead th, .tc-groups td:not(.tc-full):not(.tc-side):not(.tc-resp), .tc-groups td.tc-full:last-child { white-space: nowrap; }
  .tc-groups td.tc-star { padding-right: 0; }
  .tc-groups td.tc-resp { font-size: .85rem; line-height: 1.35; }
  /* «Ответственные»: каждая роль своей строкой (на карточках телефона — одной строкой через « · ») */
  .tc-groups .resp-group { display: block; }
  .tc-groups .resp-sep { display: none; }
}
/* широкий экран: место есть — пояснение к статусу снова одной строкой */
@media (min-width: 1600px) {
  .tc-groups .col-status { width: 16rem; }
}

/* карточки: на экранах уже 1200 px таблицы с закреплёнными столбцами не помещаются */
@media (max-width: 1199.98px) {
  .table-cards thead { display: none; }
  .table-cards, .table-cards tbody { display: block; }
  .table-cards tr { display: grid; grid-template-columns: 1fr auto; column-gap: .75rem; padding: .7rem 1rem; border-bottom: 1px solid var(--ak-line); }
  .table-cards tr:last-child { border-bottom: 0; }
  .table-cards tbody tr > * { grid-column: 1 / -1; display: flex; gap: .75rem; padding: .1rem 0; border: 0;
    background-color: transparent !important; box-shadow: none; }
  .table-cards td[data-label]::before { content: attr(data-label); flex: 0 0 8rem; color: var(--ak-muted); font-size: .8rem; padding-top: .1rem; }
  .table-cards td.tc-title { grid-column: 1; grid-row: 1; font-size: 1.05rem; }
  .table-cards td.tc-side { grid-column: 2; grid-row: 1; display: block; text-align: right; }
  /* плашка записи длиннее статуса: на карточке переносится, а не раздвигает её */
  .table-cards td.tc-side .rec { white-space: normal; text-align: right; }
  /* список групп у СКО/КОП: звезда — в строке заголовка карточки, перед кодом */
  .tc-groups.with-star tr { grid-template-columns: auto 1fr auto; }
  .tc-groups.with-star td.tc-star { grid-column: 1; grid-row: 1; display: block; }
  .tc-groups.with-star td.tc-title { grid-column: 2; }
  .tc-groups.with-star td.tc-side { grid-column: 3; }
  .tc-history tr { grid-template-columns: auto auto 1fr; }
  /* расписание: флажок (у редактора), дата, время и вид — первой строкой карточки */
  .tc-schedule tr { grid-template-columns: auto auto auto 1fr; }
  .tc-history td:nth-child(-n+3), .tc-schedule td.tc-meta, .tc-schedule td.tc-check { grid-column: auto; grid-row: 1; display: block; color: var(--ak-muted); font-size: .8rem; }
  .tc-schedule td.tc-check { width: auto; }
  .tc-history td:nth-child(4) { padding-top: .2rem; }  /* когда · кто · группа, ниже — что сделано */
  .tc-schedule td.tc-meta { color: var(--ak-ink); font-size: .9rem; font-weight: 600; }
  .tc-schedule td.tc-kind { font-weight: 400; color: var(--ak-muted); }
  .tc-schedule td.tc-actions { gap: .4rem; padding-top: .35rem; text-align: left !important; }
  .tc-schedule tr.sched-today { background: var(--ak-stripe); }
  .tc-schedule tr.sched-now { background: #EFE8F6; box-shadow: inset 4px 0 0 var(--ak-purple); }
  .tc-schedule tr.sched-next { background: var(--ak-tint); }
  .table.tc-schedule tbody tr.sched-now > :first-child { box-shadow: none; }
  /* «Сотрудники»: три кнопки (~360 px) шире карточки на телефоне — переносятся на вторую строку */
  .tc-users td.tc-full { flex-wrap: wrap; gap: .4rem; padding-top: .35rem; }
  /* «Ключи Толка» в «Настройках»: «Отключить» и «Удалить» — под строками карточки */
  .tc-keys td.tc-full { flex-wrap: wrap; gap: .4rem; padding-top: .35rem; }
  .tc-keys td.tc-full:empty { display: none; }  /* у основного ключа кнопок нет */
  /* «Записи ВКС»: пустые ячейки (дата и пара у второй записи дня) в карточке не показываются,
     кнопки переносятся и идут слева; красная и серая строки дня красятся самой карточкой */
  .tc-recs td:empty { display: none; }
  .tc-recs tr.day-first { border-top: 1px solid var(--ak-line); }
  .tc-recs tr.rec-missing { background: #fff6f6; }
  .tc-recs td.rec-actions { flex-wrap: wrap; gap: .4rem; padding-top: .35rem; text-align: left; }
  .tc-recs td.rec-actions .btn { margin-left: 0; }
  .tc-recs tr.rec-section { padding-bottom: .2rem; }
}

@media (max-width: 991.98px) {
  /* вкладки группы — одной строкой с прокруткой вбок */
  .nav-tabs.steps { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .nav-tabs.steps::-webkit-scrollbar { display: none; }
  .nav-tabs.steps .nav-link { white-space: nowrap; padding: .5rem .75rem; }

  /* строка состояния: «обновляется автоматически» — отдельной строкой под текстом */
  #status-banner { flex-wrap: wrap; }
  #status-banner .status-text { flex: 1 1 0; min-width: 0; }
  #status-banner .status-live { flex-basis: 100%; margin-left: 1.15rem !important; font-size: .75rem; }
}

@media (max-width: 767.98px) {
  /* шапка: логотип и «Выйти» в первой строке, разделы — второй строкой с прокруткой */
  .navbar > .nav-wrap { flex-wrap: wrap; row-gap: .1rem; }
  .nav-wrap .navbar-brand { margin-right: auto; }
  .brand-logo { height: 26px; }
  .nav-actor { display: none; }
  .nav-main { order: 3; flex: 0 0 100%; margin: 0 !important; overflow-x: auto; scrollbar-width: none; }
  .nav-main::-webkit-scrollbar { display: none; }
  .navbar .nav-main .nav-link { padding: .45rem .7rem; white-space: nowrap; }
  .navbar .nav-main .nav-item:first-child .nav-link { padding-left: 0; }

  /* таблица посещаемости: ФИО уже и в две строки, даты листаются вбок */
  .att th:first-child, .att td:first-child { min-width: 8.5rem; max-width: 10rem; white-space: normal; }
  .cell { min-width: 3rem; }
  .att-actions { flex: 1 1 100%; margin-left: 0 !important; }
}

@media (max-width: 575.98px) {
  .nav-wrap, .page-wrap { padding-left: 1rem !important; padding-right: 1rem !important; }
  .page-title { font-size: 1.5rem; }
  .login-main, .login-side { padding: 1.5rem; }
  /* роли в настройках: поле названия во всю ширину, кнопка под ним */
  .roles-table td:first-child form { flex-wrap: wrap; }
  .roles-table td:first-child .form-control { flex: 1 1 100%; }
  /* статусы «нет в Moodle»: то же — название во всю ширину, кнопки переносятся */
  .statuses-table td:first-child form { flex-wrap: wrap; }
  .statuses-table td:first-child .form-control { flex: 1 1 100%; }
  .statuses-table td.status-actions { white-space: normal; }
  /* статус слушателя: поля во всю ширину, кнопка под ними */
  .listener-status .form-select, .listener-status .form-control { flex: 1 1 100%; width: 100%; }
}

/* сенсорные экраны: пункты меню отметок и «▾» у дат — под палец */
@media (pointer: coarse) {
  .mark-menu-item { padding: .6rem 1rem; }
  .day-btn { padding: .15rem .5rem; font-size: .85rem; }
}

/* список групп: поиск и фильтр по субсидии */
.groups-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
.group-search { position: relative; flex: 1 1 300px; max-width: 420px; }
.group-search .form-control { padding-left: 2.1rem; padding-right: 2rem; }
.group-search-icon { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); color: var(--ak-muted); pointer-events: none; }
#group-q::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }  /* своя «×» одна */
.group-search-x { position: absolute; right: .35rem; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: var(--ak-muted); font-size: 1.15rem; line-height: 1; padding: .1rem .45rem; cursor: pointer; }
.group-search-x:hover { color: var(--ak-navy); }
.sub-filter { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.sub-filter-label { color: var(--ak-muted); font-size: .85rem; margin-right: .15rem; }
.sub-btn { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .7rem; border-radius: .5rem; background: #fff; border: 1px solid var(--ak-line); color: var(--ak-ink); text-decoration: none; font-size: .9rem; }
.sub-btn:hover { background: #EDEEF4; color: var(--ak-navy); }
.sub-btn.active { background: var(--ak-navy); border-color: var(--ak-navy); color: #fff; }
.sub-btn b { display: inline-block; min-width: 1.3rem; padding: 0 .3rem; border-radius: .3rem; background: var(--ak-tint); color: var(--ak-navy); font-size: .78rem; text-align: center; }
.sub-btn.active b { background: rgba(255, 255, 255, .22); color: #fff; }
.sub-btn-n { opacity: .75; }
/* ноль при текущих фильтрах — серым, как в макете; выбранная кнопка остаётся тёмной */
.status-chip.zero:not(.active), .sub-btn.zero:not(.active), .sub-btn.zero:not(.active) b { color: #A9ADBF; }
mark { background: #F0EAF6; color: var(--ak-purple); padding: 0 1px; border-radius: 2px; font-weight: 600; }
@media (max-width: 575.98px) {
  .group-search { flex-basis: 100%; max-width: none; }
}

/* «Настройки»: от 992 px меню разделов слева (выбранный — тёмно-синяя плашка), справа —
   карточка раздела; уже — та же разметка строкой вкладок с прокруткой, как на странице
   группы (.nav-tabs.steps выше). Значки: число — красное, точка — у устаревшей копии базы */
.settings-badge { display: inline-block; min-width: 1.3rem; margin-left: .4rem; padding: 0 .4rem; border-radius: 1rem; background: #C9302C;
  color: #fff; font-size: .75rem; font-weight: 700; line-height: 1.3rem; text-align: center; }
.settings-dot { display: inline-block; flex: none; width: .5rem; height: .5rem; margin-left: .45rem; border-radius: 50%; background: #C9302C; vertical-align: middle; }
/* три поля «Учёта посещаемости» — в ряд, подписи в одну строку; уже — по два и по одному */
.settings-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: .75rem 1rem; max-width: 58rem; }
.settings-body { min-width: 0; }
/* скрытый текст значка (visually-hidden — absolute) остаётся внутри пункта: иначе на телефоне
   он выпадает из прокрутки вкладок и раздвигает страницу вбок */
.settings-menu .nav-link { position: relative; }
@media (min-width: 992px) {
  .settings { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 1.5rem; align-items: start; }
  .settings-menu.nav-tabs { position: sticky; top: 1rem; flex-direction: column; gap: .2rem; border-bottom: 0; }
  .settings-menu .nav-link { display: flex; align-items: center; gap: .5rem; margin: 0; padding: .5rem .75rem; border: 0; border-radius: .5rem;
    color: var(--ak-ink); font-weight: 500; white-space: nowrap; }
  .settings-menu .nav-link:hover { background: #EDEEF4; color: var(--ak-navy); }
  .settings-menu .nav-link.active { background: var(--ak-navy); color: #fff; font-weight: 700; box-shadow: none; }
  .settings-menu .settings-badge, .settings-menu .settings-dot { margin-left: auto; }
}
/* «Moodle»: пустая «Проблема» в карточке строки на телефоне не показывается */
.tc-moodle td[data-label]:empty { display: none; }
/* название курса — сплошное «028_2026_Х_Управление…»: без переноса оно вылезает за карточку */
.tc-moodle td { overflow-wrap: anywhere; }
/* пометки у слушателей из Moodle: мелкие и бледные, чтобы не спорить с именем */
.pill-moodle, .pill-missing { display: inline-block; margin-left: .4rem; padding: 0 .45rem; border-radius: 1rem; font-size: .72rem;
  line-height: 1.35rem; vertical-align: middle; white-space: nowrap; }
.pill-moodle { background: var(--ak-tint); color: var(--ak-navy); }
/* «нет в Moodle» — расхождение с Moodle: янтарный, как «Скоро занятие» */
.pill-missing { background: #fff4d9; color: #a96f00; }
.moodle-notice { background: #fff4d9; color: #6b4500; border-left: .25rem solid #e0a100; border-radius: .25rem;
  padding: .55rem .8rem; font-size: .9rem; overflow-wrap: anywhere; }
@media (max-width: 991.98px) {
  /* карточка раздела — под вкладками, как .tab-body на странице группы */
  .settings-body > .card { border-top-left-radius: 0; border-top-color: #dee2e6; }
}

/* Загрузка ВКС */
.load-head { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-bottom: 1rem; }
.load-seg { display: inline-flex; border: 1px solid var(--ak-line); border-radius: .5rem; overflow: hidden; background: #fff; }
.load-seg a { padding: .3rem .9rem; font-size: .9rem; color: var(--ak-ink); text-decoration: none; border-right: 1px solid var(--ak-line); }
.load-seg a:last-child { border-right: 0; }
.load-seg a.on { background: var(--ak-navy); color: #fff; }
.load-nav { display: flex; align-items: center; gap: .5rem; margin-left: auto; flex-wrap: wrap; }
.load-label { color: var(--ak-ink); }
.load-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin-bottom: 1rem; }
.load-tile { background: #fff; border: 1px solid var(--ak-line); border-radius: .5rem; padding: .6rem .9rem; min-width: 0; }
.load-big { font-size: 1.4rem; font-weight: 700; color: var(--ak-navy); }
.load-big.over { color: #c9302c; }
.load-card { padding: .9rem; overflow-x: auto; }
.load-card.mt-3 { padding: 0; }
.load-grid { display: grid; gap: 2px; font-size: .72rem; }
.lt { color: var(--ak-muted); font-size: .72rem; text-align: right; padding-right: .5rem; align-self: center; font-variant-numeric: tabular-nums; }
.lt.hour { color: var(--ak-ink); font-weight: 600; }
.lh { text-align: center; font-size: .78rem; font-weight: 600; line-height: 1.25; padding-bottom: .25rem; color: var(--ak-ink); }
.lh small { display: block; font-weight: 400; color: var(--ak-muted); font-size: .7rem; }
.lh.today { background: var(--ak-navy); color: #fff; border-radius: .4rem; padding-top: .2rem; }
.lh.today small { color: rgba(255, 255, 255, .8); }
.lh.weekend { color: #9aa1ab; }
.lh.today.weekend { color: #fff; }  /* сегодня в выходной — всё равно выделено */
.load-grid.month .lh { font-size: .62rem; }
.lc { display: flex; align-items: center; justify-content: center; gap: .2rem; height: 1.6rem; border-radius: .25rem; font-weight: 600; font-variant-numeric: tabular-nums; text-decoration: none; color: var(--ak-navy); }
.lc small { font-weight: 400; font-size: .6rem; }
.load-grid.month .lc { height: 1.1rem; font-size: .6rem; }
.lc:hover { outline: 2px solid var(--ak-purple); }
.ld-0 { background: var(--ak-stripe); color: transparent; }
.ld-light { background: var(--ak-tint); }
.ld-dark { background: #B9BEDA; }
.ld-near { background: #fff4d9; color: #a96f00; box-shadow: inset 0 0 0 1px #E0A100; }
.ld-over { background: #c9302c; color: #fff; }
/* «сейчас»: клетки столбца «сегодня» чуть темнее — слоем поверх цвета загрузки, сам цвет
   остаётся; подпись строки текущих получаса (в «Месяце» — часа) — фиолетовая плашка, клетка
   «сегодня × сейчас» — фиолетовая рамка внутри клетки (на красной — с белой каймой) */
.lc.today { background-image: linear-gradient(rgba(27, 35, 87, .1), rgba(27, 35, 87, .1)); }
.lt.now { justify-self: end; background: #69448D; color: #fff; font-weight: 700; border-radius: 1rem; padding: .05rem .3rem; margin-right: .15rem; }
.lc.now { outline: 2px solid #69448D; outline-offset: -2px; }
.lc.now.ld-over { box-shadow: inset 0 0 0 3px #fff; }
.load-day-row { display: grid; grid-template-columns: 3.4rem 3.2rem 1fr; gap: .5rem; align-items: center; padding: .2rem 0; border-bottom: 1px solid #f0f1f5; font-size: .85rem; }
.load-legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: center; margin-top: .7rem; font-size: .8rem; color: var(--ak-muted); }
.load-legend .lc { display: inline-block; width: 1.1rem; height: .75rem; vertical-align: middle; margin-right: .3rem; }
.load-groups { list-style: none; margin: 0; padding: 0; }
.load-groups li { padding: .15rem 0; }
@media (max-width: 575.98px) {
  .load-nav { margin-left: 0; }
  .load-tiles { grid-template-columns: 1fr; }
}
.load-arrow { display: inline-flex; align-items: center; padding: .2rem .45rem; }
.lh small { white-space: nowrap; }

/* отчёт «Нет в Moodle»: фильтр флажками в строку. От 768 px — обычная таблица: код группы и
   дата в одну строку, ФИО, статус и комментарий переносятся (даже сплошной URL), чтобы страница
   не раздвигалась. Уже 768 px — карточки: подпись над значением, пустые поля скрыты (в таблице
   пустая ячейка остаётся на месте, иначе дата уедет под чужой заголовок) */
.missing-filter { display: flex; flex-wrap: wrap; gap: .25rem 1.2rem; }
.missing-filter .form-check { margin: 0; overflow-wrap: anywhere; }
.missing-table td.mt-nowrap { white-space: nowrap; }
.missing-table td.mt-wrap { overflow-wrap: anywhere; }
@media (max-width: 767.98px) {
  .missing-table thead { display: none; }
  .missing-table, .missing-table tbody { display: block; }
  .missing-table tbody tr { display: block; padding: .7rem 1rem; border-bottom: 1px solid var(--ak-line); }
  .missing-table tbody tr:last-child { border-bottom: 0; }
  .missing-table.table td { display: block; padding: .1rem 0; border: 0; background-color: transparent; box-shadow: none; white-space: normal; overflow-wrap: anywhere; }
  .missing-table td::before { content: attr(data-label); display: block; color: var(--ak-muted); font-size: .8rem; }
  .missing-table td:first-child { font-size: 1.05rem; }
  .missing-table td:first-child::before { display: none; }
  .missing-table td:empty { display: none; }
}

/* ответственные и звезда «моя группа» */
.resp-line { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; }
.resp-role { font-weight: 600; margin-right: .25rem; }
.star-form { display: inline; margin: 0; }
button.star { border: 0; background: none; padding: 0 .2rem; font-size: 1.25rem; line-height: 1; color: #B8B8C0; cursor: pointer; }
button.star:hover { color: #9A7AB8; }
button.star.on { color: var(--ak-purple); }
.resp-me { font-weight: 600; color: var(--ak-purple); }

/* «Уведомления»: состояние этого устройства и кнопки; на телефоне кнопки переносятся */
.push-card { max-width: 560px; }
.push-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.push-state:empty { display: none; }  /* без текста состояния — без пустого отступа */
