/* Реестр наставничества — оформление рабочего инструмента.
   Развитие прежней аскетичной темы, а не замена её: характер (спокойный,
   почти монохромный, без декора) сохранён, добавлено то, чего не хватало
   для ощущения законченности:

   1. Слои поверхностей. Раньше всё было на одном чистом белом, и разделы
      различались только волосяной линией — отсюда ощущение черновика.
      Теперь холст слегка приглушён (#fafafa), карточки белые с едва
      заметной тенью, шапка таблицы на своём тоне: глубина читается сразу,
      декора при этом не прибавилось.
   2. Иерархия размеров. Прежде весь текст жил в диапазоне 12–15px, и
      заголовок страницы не отличался от подписи поля. Введена шкала
      12/13/15/18/24 — сканировать глазами стало заметно легче.
   3. Один акцент. Полностью бесцветный интерфейс выглядит не столько
      строгим, сколько незавершённым. Индиго (#3454d1) появляется только
      там, где несёт смысл: активный раздел, ссылки, кольцо фокуса,
      главное действие. Больше нигде.
   4. Статусы — бейджами. Раньше это был просто цветной (а в прошлой теме
      и вовсе бесцветный) текст в ячейке. Пилюля с подложкой и точкой
      читается в плотной таблице с одного взгляда.
   5. Состояния. Плавные переходы, отдельное кольцо :focus-visible для
      клавиатуры, различимые hover/active — то, что отличает проработанный
      инструмент от набора элементов.

   Плотность таблицы при этом не принесена в жертву: данные строк остаются
   на 13px, высота строк выросла минимально. */

:root {
    color-scheme: light;

    /* Нейтральная шкала — чуть холоднее и мягче прежней, чтобы белые
       карточки читались как отдельный слой поверх холста. */
    --color-canvas: #fafafa;
    --color-surface: #ffffff;
    --color-surface-sunken: #f6f7f9;
    --color-border: #e6e8ec;
    --color-border-strong: #d3d7de;
    --color-ink: #1c1f26;
    --color-ink-soft: #4a5160;
    --color-muted: #667085;

    /* Единственный акцент (см. пункт 3 в шапке файла). Контраст на белом
       ≈6.3:1 — проходит WCAG AA и для обычного текста, не только крупного. */
    --color-accent: #3454d1;
    --color-accent-hover: #2942b4;
    --color-accent-soft: #eef1fd;

    /* Семантика статусов. Приглушённые тона: в плотной таблице насыщенный
       цвет на 20+ строках превращается в шум. */
    --color-success: #0f7b53;
    --color-success-soft: #e7f4ee;
    --color-warn: #8a6414;
    --color-warn-soft: #fbf1de;
    --color-danger: #b3332e;
    --color-danger-soft: #fbeceb;

    /* Семантические псевдонимы (имена сохранены — на них завязана разметка
       и inline-стили в JS). */
    --bg: var(--color-canvas);
    --card-bg: var(--color-surface);
    --text: var(--color-ink);
    --text-secondary: var(--color-ink-soft);
    --text-muted: var(--color-muted);
    --border: var(--color-border);
    --border-strong: var(--color-border-strong);

    --success-text: var(--color-success);
    --status-warn-text: var(--color-warn);
    --error-text: var(--color-danger);
    --error-bg: var(--color-danger-soft);

    /* Подсветка строки с истекающим сроком аттестации — см.
       needsAttention() в assignments.js. Настоящий красный здесь
       сознателен: это не оформление, а сигнал «нужно действовать». */
    --alert-red: var(--color-danger);
    --alert-red-bg: #fdf3f2;

    --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, sans-serif;

    /* Шкала 12 / 13 / 15 / 18 / 24 (см. пункт 2 в шапке файла) */
    --text-caption: 12px;
    --text-body-sm: 13px;
    --text-body: 15px;
    --text-title: 18px;
    --text-page-title: 24px;

    --radius-sm: 6px;
    --radius: 10px;
    --radius-lg: 14px;
    --radius-pill: 999px;

    /* Тени-шёпот: обозначают слой, но не «поднимают» элемент визуально. */
    --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
    --shadow-focus: 0 0 0 3px rgba(52, 84, 209, 0.16);
}

* {
    box-sizing: border-box;
}

body {
    font-family: var(--font-sans);
    /* tnum — табличные цифры: даты и номера в колонках выстраиваются по
       разрядам; cv11 — однозначная строчная «a» у Inter. */
    font-feature-settings: "tnum" on, "cv11" on;
    font-weight: 400;
    background: var(--bg);
    color: var(--text);
    font-size: var(--text-body-sm);
    line-height: 1.5;
    letter-spacing: -0.006em;
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.page {
    max-width: 1240px;
    margin: 0 auto;
    padding: 32px 24px 96px;
}

/* ---- Шапка ---- */

.nav-bar {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 10;
}

.nav-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.nav-brand {
    font-weight: 600;
    font-size: var(--text-body);
    letter-spacing: -0.02em;
    color: var(--text);
}

.nav-links {
    display: flex;
    gap: 2px;
}

.nav-link {
    color: var(--text-muted);
    text-decoration: none;
    font-size: var(--text-body-sm);
    font-weight: 500;
    padding: 7px 12px;
    border-radius: var(--radius-sm);
    transition: color 0.15s ease, background 0.15s ease;
}

.nav-link:hover {
    color: var(--text);
    background: var(--color-surface-sunken);
}

.nav-link-active,
.nav-link-active:hover {
    color: var(--color-accent);
    background: var(--color-accent-soft);
}

/* ---- Заголовок страницы ---- */

.page-header,
.upload-card {
    width: fit-content;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.page-header {
    text-align: center;
    margin-bottom: 28px;
}

h1 {
    font-size: var(--text-page-title);
    line-height: 1.25;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--text);
    margin: 0 0 6px;
}

/* Заголовок карточки пары — это ФИО (данные), потому нейтральнее. */
#pageTitle {
    font-weight: 550;
    letter-spacing: -0.02em;
}

.subtitle {
    color: var(--text-muted);
    font-size: var(--text-body-sm);
    margin: 0;
}

/* ---- Карточки ---- */

.card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: 20px;
    margin-bottom: 16px;
}

.section-title {
    font-size: var(--text-title);
    line-height: 1.35;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text);
    margin: 0;
}

.toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.save-all-box {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.hint {
    font-size: var(--text-caption);
    color: var(--text-muted);
    line-height: 1.6;
    margin: 10px 0 0;
}

#registryEmpty,
#listEmpty,
#attemptsEmpty {
    padding: 32px 20px;
    margin: 0;
    text-align: center;
}

/* .table-card обнуляет padding у секции (таблица должна доходить до
   скруглённых углов карточки — см. .table-card ниже), поэтому любой текст
   ПЕРЕД .table-scroll (заголовок, пояснение) нуждается в собственном отступе —
   без него он вплотную упирается в рамку карточки. */
.table-card-header {
    padding: 20px 20px 16px;
}

.table-card-header .section-title {
    margin-bottom: 8px;
}

.table-card-header .hint {
    margin: 0;
}

.status-msg {
    font-size: var(--text-caption);
    color: var(--text-muted);
    /* Без nowrap: короткие статусы («Сохранено», «12 из 20») и так в одну
       строку, а длинные сообщения об ошибках переносятся, а не вылезают за
       рамку карточки. */
    overflow-wrap: break-word;
    min-width: 0;
}

/* ---- Кнопки ---- */

.btn {
    appearance: none;
    background: var(--color-surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 7px 14px;
    font-size: var(--text-body-sm);
    font-weight: 500;
    font-family: inherit;
    letter-spacing: -0.006em;
    line-height: 1.4;
    color: var(--text);
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease,
        color 0.15s ease;
}

/* .btn задаёт display безусловно, поэтому при равной специфичности с
   UA-правилом [hidden]{display:none} выигрывало бы наше — без этой строки
   hidden-атрибут на кнопке (см. #cancelEditBtn) не скрывал бы её. */
.btn[hidden] {
    display: none;
}

.btn:hover:not(:disabled) {
    background: var(--color-surface-sunken);
    border-color: var(--color-muted);
}

.btn:active:not(:disabled) {
    background: #eef0f3;
}

.btn:focus-visible {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: var(--shadow-focus);
}

.btn:disabled {
    opacity: 0.5;
    cursor: default;
}

/* Главное действие — единственная заливка акцентом на экране. */
.btn-primary {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}

.btn-primary:hover:not(:disabled) {
    background: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
}

.btn-primary:active:not(:disabled) {
    background: #24379a;
}

.btn-secondary {
    background: var(--color-surface);
}

.btn-danger {
    color: var(--color-danger);
    border-color: #e8c9c7;
}

.btn-danger:hover:not(:disabled) {
    background: var(--color-danger-soft);
    border-color: var(--color-danger);
}

.link-action {
    color: var(--color-accent);
    text-decoration: none;
    font-weight: 500;
    border-radius: 3px;
    transition: color 0.15s ease;
}

.link-action:hover {
    color: var(--color-accent-hover);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.link-action:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

/* ---- Загрузка приказов ---- */

.upload-card {
    /* Пунктир — привычный для зоны загрузки язык, при этом без заливки и
       иконок: зона читается, но не спорит с таблицей ниже. */
    border-style: dashed;
    border-color: var(--border-strong);
    box-shadow: none;
    background: var(--color-surface);
}

.upload-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.file-picker {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 9px 18px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-accent);
    background: var(--color-accent);
    color: #fff;
    font-size: var(--text-body-sm);
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

.file-picker:hover {
    background: var(--color-accent-hover);
}

.file-picker:focus-within {
    box-shadow: var(--shadow-focus);
}

.file-picker input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
}

/* ---- Панель фильтров ---- */

.filter-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 12px 16px;
}

.filter-input {
    padding: 7px 11px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-strong);
    background: var(--color-surface);
    color: var(--text);
    font-family: inherit;
    font-size: var(--text-body-sm);
    line-height: 1.4;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.filter-input::placeholder {
    color: var(--text-muted);
}

input.filter-input {
    min-width: 240px;
    flex: 1 1 240px;
}

select.filter-input {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 30px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23667085' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 11px center;
    cursor: pointer;
}

.filter-input:hover {
    border-color: var(--color-muted);
}

.filter-input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: var(--shadow-focus);
}

/* ---- Таблицы ---- */

.table-card {
    padding: 0;
    overflow: hidden;
}

.table-scroll {
    overflow-x: auto;
}

.results-table {
    width: 100%;
    /* Фиксированная %-раскладка на узком экране сжимала бы колонки до
       нечитаемого; min-width вместо переноса включает горизонтальную
       прокрутку в .table-scroll. */
    min-width: 1040px;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: var(--text-body-sm);
}

/* Реестр пар (8 колонок: Наставник, Наставляемый, Отделение, Должность,
   Промежуточная, Итоговая, Статус, действия). */
.registry-table th:nth-child(1) { width: 14%; }
.registry-table th:nth-child(2) { width: 14%; }
.registry-table th:nth-child(3) { width: 9%; }
.registry-table th:nth-child(4) { width: 14%; }
.registry-table th:nth-child(5) { width: 12%; }
.registry-table th:nth-child(6) { width: 12%; }
.registry-table th:nth-child(7) { width: 8%; }
.registry-table th:nth-child(8) { width: 17%; }

/* Реестр заключений (7 колонок: Номер, ФИО наставляемого, ФИО наставника,
   Отделение, Тип аттестации, Дата аттестации, действия). */
.conclusions-table th:nth-child(1) { width: 9%; }
.conclusions-table th:nth-child(2) { width: 18%; }
.conclusions-table th:nth-child(3) { width: 18%; }
.conclusions-table th:nth-child(4) { width: 17%; }
.conclusions-table th:nth-child(5) { width: 13%; }
.conclusions-table th:nth-child(6) { width: 11%; }
.conclusions-table th:nth-child(7) { width: 14%; }

/* Банк вопросов (6 колонок: Роль, Тип, Отделение, Вопрос, Активен, действия) —
   без явных ширин колонки делились бы поровну, и «Вопрос» (самый длинный
   текст) сжимался бы в один ряд с короткими «Роль»/«Активен», вынуждая
   переносы и лишнюю горизонтальную прокрутку. */
#questionsTable th:nth-child(1) { width: 12%; }
#questionsTable th:nth-child(2) { width: 12%; }
#questionsTable th:nth-child(3) { width: 10%; }
#questionsTable th:nth-child(4) { width: 46%; }
#questionsTable th:nth-child(5) { width: 8%; }
#questionsTable th:nth-child(6) { width: 12%; }

/* Попытки тестирования (7 колонок: Кандидат, Отделение, Роль, Тип аттестации,
   Попыток, Результат, действие). */
#attemptsTable th:nth-child(1) { width: 20%; }
#attemptsTable th:nth-child(2) { width: 10%; }
#attemptsTable th:nth-child(3) { width: 14%; }
#attemptsTable th:nth-child(4) { width: 14%; }
#attemptsTable th:nth-child(5) { width: 10%; }
#attemptsTable th:nth-child(6) { width: 14%; }
#attemptsTable th:nth-child(7) { width: 18%; }

/* Шапка на своём тоне и «липкая» при прокрутке длинного реестра — колонки
   не теряются, когда строк больше экрана. */
.results-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    text-align: left;
    font-weight: 550;
    font-size: 11px;
    line-height: 1.35;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: var(--color-surface-sunken);
    padding: 11px 12px;
    border-bottom: 1px solid var(--border);
    white-space: normal;
    overflow-wrap: break-word;
}

.results-table td {
    padding: 11px 12px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
    color: var(--text-secondary);
}

/* Первые колонки — ключевые (ФИО): их читают в первую очередь. */
.results-table td:first-child,
.results-table td:nth-child(2) {
    color: var(--text);
    font-weight: 500;
}

.results-table tbody tr {
    transition: background 0.12s ease;
}

.results-table tbody tr:hover {
    background: var(--color-surface-sunken);
}

.results-table tbody tr:last-child td {
    border-bottom: none;
}

.results-table td:last-child .btn {
    padding: 5px 10px;
    font-size: var(--text-caption);
}

/* display:flex прямо на <td> ломает высоту строки — flex-ячейка перестаёт
   тянуться на всю высоту ряда (её задаёт vertical-align у обычных ячеек),
   отчего нижняя граница строки в этой колонке съезжала выше остальных.
   Flex — на обёртке внутри ячейки, сама ячейка остаётся table-cell. */
.row-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.results-table .hint {
    color: var(--text-muted);
    margin: 2px 0 0;
    font-size: 11px;
    line-height: 1.45;
}

/* Строка с истекающим (или истёкшим) сроком аттестации. */
tr.row-attention td {
    background: var(--alert-red-bg);
    color: var(--alert-red);
}

tr.row-attention td:first-child,
tr.row-attention td:nth-child(2) {
    color: var(--alert-red);
}

tr.row-attention:hover td {
    background: #fbe9e7;
}

/* ---- Статусы как бейджи ---- */

/* Пилюля с точкой: в плотной таблице фигура считывается быстрее, чем
   цветной текст, и не зависит от одного лишь цвета (см. текст рядом). */
.status-good,
.status-warn,
.status-bad {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px 3px 7px;
    border-radius: var(--radius-pill);
    font-size: var(--text-caption);
    font-weight: 500;
    line-height: 1.5;
    white-space: nowrap;
}

.status-good::before,
.status-warn::before,
.status-bad::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
}

.status-good {
    color: var(--color-success);
    background: var(--color-success-soft);
}

.status-warn {
    color: var(--color-warn);
    background: var(--color-warn-soft);
}

.status-bad {
    color: var(--color-danger);
    background: var(--color-danger-soft);
}

/* Заливка бейджа в подсвеченной строке — сохраняет свой смысловой цвет
   (зелёный/жёлтый/красный), а не гасится до одинакового блёклого белого:
   статус должен читаться и здесь, это единственное, что отличает одну
   «горящую» строку от другой. */

/* ---- Поля формы ---- */

.doc-fields {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 14px 18px;
    margin-top: 18px;
    margin-bottom: 20px;
}

.doc-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Тот же случай, что и .btn[hidden] выше: .doc-field задаёт display
   безусловно, и при равной специфичности с UA-правилом [hidden]{display:none}
   побеждало бы наше — hidden-атрибут (например #continueUntilField,
   #roleField на /test) не скрывал бы поле. */
.doc-field[hidden] {
    display: none;
}

.doc-field label {
    font-size: var(--text-caption);
    font-weight: 500;
    color: var(--text-muted);
}

.doc-field input,
.doc-field select {
    padding: 8px 11px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-strong);
    background: var(--color-surface);
    color: var(--text);
    font-family: inherit;
    font-size: var(--text-body-sm);
    line-height: 1.4;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.doc-field input::placeholder {
    color: var(--text-muted);
}

.doc-field select {
    padding-right: 30px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23667085' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 11px center;
}

.doc-field input:hover,
.doc-field select:hover {
    border-color: var(--color-muted);
}

.doc-field input:focus,
.doc-field select:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: var(--shadow-focus);
}

.doc-modal-footer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

/* ---- Вход ---- */

.login-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: var(--color-canvas);
}

.login-page {
    width: 100%;
    max-width: 380px;
    padding: 24px;
}

.login-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    text-align: center;
    background: var(--color-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: 32px 28px;
}

.login-title {
    font-size: var(--text-title);
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text);
    margin: 0;
}

.login-error {
    color: var(--color-danger);
    background: var(--color-danger-soft);
    border: 1px solid #eecfcd;
    border-radius: var(--radius-sm);
    padding: 9px 12px;
    font-size: var(--text-caption);
    margin: 0;
}

.login-input {
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    font-size: var(--text-body);
    font-family: inherit;
    background: var(--color-surface);
    color: var(--text);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.login-input::placeholder {
    color: var(--text-muted);
}

.login-input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: var(--shadow-focus);
}

.login-submit {
    justify-content: center;
    padding-top: 9px;
    padding-bottom: 9px;
}

/* Пользователи с включённым «уменьшить движение» не должны получать
   лишних переходов — правило обязательно по чек-листу доступности. */
@media (prefers-reduced-motion: reduce) {
    * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

@media (max-width: 480px) {
    .page {
        padding: 24px 14px 48px;
    }
    .card {
        padding: 16px;
    }
}