/* Оформление EduSpaceApp поверх MudBlazor (docs/brand/BRANDBOOK.md).
   Цвета кабинета — в Components/Theme/EsepTheme.cs, здесь они берутся
   переменными MudBlazor (--mud-palette-*) и поэтому сами меняются в тёмной
   теме. Страницы входа обходятся без MudBlazor: их цвета — переменные
   --esep-* ниже, те же значения брендбука. */

@font-face {
    font-family: "Onest";
    src: url("fonts/Onest-Variable.woff") format("woff");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --esep-indigo: #3B33C8;
    --esep-indigo-dark: #2F28A6;
    --esep-lilac: #6F67F5;
    --esep-lavender: #C9C5FF;
    --esep-indigo-light: #EEEDFC;
    --esep-sun: #FFB020;
    --esep-ink: #1B1D3A;
    --esep-graphite: #4A4D6A;
    --esep-fog: #6B6E8A;
    --esep-line: #E3E4EE;
    --esep-paper: #F6F6FB;
    --esep-error: #B02A30;
    --esep-error-bg: #FDECEC;
    --esep-info: #1F56B0;
    --esep-info-bg: #EAF1FD;
    --esep-font: "Onest", "Golos Text", "Segoe UI", Roboto, Arial, sans-serif;
}

body {
    font-family: var(--esep-font);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Заголовок получает фокус после перехода (FocusOnNavigate в Routes.razor) —
   ради чтения с экрана. Рамка вокруг него выглядела как поломка. */
h1:focus,
h1:focus-visible {
    outline: none;
}

/* Фокус с клавиатуры виден всегда: индиго-рамка вокруг кнопок, ссылок,
   пунктов меню и строк, которые открываются. */
a:focus-visible,
button:focus-visible,
.mud-button-root:focus-visible,
.mud-nav-link:focus-visible,
[tabindex="0"]:focus-visible {
    outline: 2px solid var(--mud-palette-primary, var(--esep-indigo));
    outline-offset: 2px;
}

/* Суммы и даты — моноширинными цифрами: разряды стоят столбиком. */
.mud-table,
.mud-simple-table,
.money-table,
.kpi-value,
.act-table,
.nowrap {
    font-variant-numeric: tabular-nums;
}

/* ---------- Каркас: шапка, меню, страница ---------- */

.app-bar {
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.app-bar .mud-toolbar {
    gap: 4px;
}

.app-logo {
    display: flex;
    align-items: center;
    margin-inline: 4px 4px;
    border-radius: 6px;
    flex-shrink: 0;
}

.app-logo img {
    display: block;
    height: 28px;
    width: auto;
}

.app-org {
    align-items: center;
    height: 28px;
    margin-inline-start: 12px;
    padding-inline-start: 16px;
    border-inline-start: 1px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
}

/* Длинное название организации не теснит шапку: обрезается многоточием, целиком — в подсказке. */
.app-org {
    min-width: 0;
    flex-shrink: 1;
}

.app-org-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 40ch;
}

/* На телефоне в шапке места нет — название организации вверху выдвижного меню. */
.app-nav-org {
    padding: 16px 20px 8px;
    color: var(--mud-palette-text-secondary);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.35;
}

/* «Администрирование → Организация»: как название будет выглядеть в шапке. */
.org-preview {
    display: flex;
    align-items: center;
    gap: 0;
    min-width: 0;
    padding: 12px 16px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    background: var(--mud-palette-surface);
    max-width: 760px;
}

.org-preview img {
    height: 24px;
    flex-shrink: 0;
}

.org-preview .app-org {
    flex: 1;
}

.org-preview-lang {
    margin-inline-start: 12px;
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
}

.app-lang .mud-button-root,
.app-user {
    min-height: 40px;
    border-radius: 999px;
    font-weight: 500;
}

.app-user {
    padding: 4px 8px 4px 4px;
    min-width: 0;
}

.app-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--mud-palette-primary-lighten);
    color: var(--mud-palette-primary);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.app-user-name {
    margin-inline: 8px 2px;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-user-menu {
    min-width: 248px;
}

.app-user-head {
    padding: 12px 16px 10px;
}

.app-user-head-name {
    font-weight: 600;
}

.app-user-head-login,
.app-menu-caption {
    color: var(--mud-palette-text-secondary);
    font-size: 0.8125rem;
}

.app-menu-caption {
    padding: 10px 16px 2px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.app-menu-current {
    color: var(--mud-palette-primary);
    font-weight: 600;
}

.logout-form {
    display: block;
    margin: 0;
}

/* Выход — кнопка формы, выглядит как пункт меню. */
.app-menu-submit {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 44px;
    padding: 6px 16px;
    border: 0;
    background: none;
    color: var(--mud-palette-error);
    font: inherit;
    font-size: 0.9375rem;
    text-align: start;
    cursor: pointer;
}

.app-menu-submit:hover {
    background: var(--mud-palette-action-default-hover);
}

.app-drawer {
    border-inline-end: 1px solid var(--mud-palette-lines-default);
}

.app-nav {
    padding: 12px 10px 32px;
}

.app-nav .mud-nav-link {
    align-items: center;
    min-height: 40px;
    margin: 1px 0;
    padding-block: 8px;
    border-radius: 8px;
    color: var(--mud-palette-drawer-text);
}

.app-nav .mud-nav-link .mud-nav-link-text {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.3;
}

.app-nav .mud-nav-link .mud-nav-link-icon {
    color: var(--mud-palette-drawer-icon);
}

/* Выбранный пункт — индиго на светлом индиго (брендбук, раздел 7). */
.app-nav .mud-nav-link.active:not(.mud-nav-link-disabled) {
    background: var(--mud-palette-primary-lighten);
    color: var(--mud-palette-primary);
    border-inline-end: none;
}

.app-nav .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-nav-link-text {
    font-weight: 600;
}

.app-nav .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-nav-link-icon {
    color: var(--mud-palette-primary);
}

.app-nav .mud-nav-link:hover:not(.active) {
    background: var(--mud-palette-action-default-hover);
}

.app-nav .mud-nav-group {
    margin-top: 8px;
}

.app-nav .app-nav-group .mud-nav-link-text {
    color: var(--mud-palette-text-secondary);
    font-weight: 600;
}

.app-main {
    min-height: 100vh;
}

.app-page {
    padding-top: 28px;
    padding-bottom: 56px;
}

/* ---------- Типографика страниц ---------- */

.page-lead {
    max-width: 72ch;
    color: var(--mud-palette-text-secondary);
}

.muted {
    color: var(--mud-palette-text-secondary);
}

.small {
    font-size: 0.8125rem;
}

.nowrap {
    white-space: nowrap;
}

.text-right {
    text-align: right;
}

.clickable {
    cursor: pointer;
}

.deferred {
    font-style: italic;
}

.error-text {
    color: var(--mud-palette-error);
}

/* Кнопки: обычный регистр (тема), высота под палец, без «пилюль». */
.mud-button-root.mud-button {
    border-radius: 8px;
}

.mud-button-filled.mud-button-filled-primary:not(.mud-disabled) {
    box-shadow: none;
}

.mud-button-filled.mud-button-filled-primary:hover:not(.mud-disabled) {
    background-color: var(--mud-palette-primary-darken);
}

.mud-button-outlined {
    border-color: var(--mud-palette-lines-inputs);
}

/* Плашки состояний — фон и текст состояния из брендбука (Darken — текст,
   Lighten — фон), рядом всегда слово. */
.mud-chip {
    font-weight: 500;
}

.mud-chip-text.mud-chip-color-success { color: var(--mud-palette-success-darken); background-color: var(--mud-palette-success-lighten); }
.mud-chip-text.mud-chip-color-info { color: var(--mud-palette-info-darken); background-color: var(--mud-palette-info-lighten); }
.mud-chip-text.mud-chip-color-warning { color: var(--mud-palette-warning-darken); background-color: var(--mud-palette-warning-lighten); }
.mud-chip-text.mud-chip-color-error { color: var(--mud-palette-error-darken); background-color: var(--mud-palette-error-lighten); }
.mud-chip-text.mud-chip-color-primary { color: var(--mud-palette-primary); background-color: var(--mud-palette-primary-lighten); }
.mud-chip-text.mud-chip-color-default { color: var(--mud-palette-text-secondary); background-color: var(--mud-palette-background-gray); }

.mud-alert-text-success { color: var(--mud-palette-success-darken); background-color: var(--mud-palette-success-lighten); }
.mud-alert-text-info { color: var(--mud-palette-info-darken); background-color: var(--mud-palette-info-lighten); }
.mud-alert-text-warning { color: var(--mud-palette-warning-darken); background-color: var(--mud-palette-warning-lighten); }
.mud-alert-text-error { color: var(--mud-palette-error-darken); background-color: var(--mud-palette-error-lighten); }

.mud-alert {
    border-radius: 10px;
}

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

.mud-table-head .mud-table-cell,
.mud-simple-table table thead th {
    color: var(--mud-palette-text-secondary);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.3;
}

.mud-table-row .mud-table-cell,
.mud-simple-table table td {
    overflow-wrap: break-word;
}

/* Панель над таблицей MudBlazor — высотой 64 px. Фильтры и кнопки в ней
   переносятся на вторую строку и наезжали на строки таблицы. */
.mud-table-toolbar {
    height: auto;
    min-height: 64px;
    flex-wrap: wrap;
    row-gap: 8px;
    padding-top: 8px;
    padding-bottom: 8px;
}

.table-search,
.learners-search {
    min-width: 240px;
    max-width: 360px;
}

.kind-filter {
    min-width: 220px;
}

/* Строка — карточка на узком экране (Breakpoint.Sm у MudTable): подпись
   слева, значение справа одной колонкой. Несколько строк значения встают
   друг под другом, а не выталкивают текст за край. */
@media (max-width: 960px) {
    .mud-sm-table .mud-table-cell {
        display: grid;
        grid-template-columns: minmax(6.5rem, 36%) minmax(0, 1fr);
        column-gap: 12px;
        align-items: baseline;
        padding: 5px 16px;
        overflow-wrap: anywhere;
    }

    .mud-sm-table .mud-table-cell::before {
        grid-column: 1;
        grid-row: 1 / span 40;
        padding: 0;
        color: var(--mud-palette-text-secondary);
        font-size: 0.8125rem;
        font-weight: 500;
    }

    .mud-sm-table .mud-table-cell > * {
        grid-column: 2;
        justify-self: start;
        min-width: 0;
        max-width: 100%;
    }

    .mud-sm-table .mud-table-cell.nowrap,
    .mud-sm-table .mud-table-cell .nowrap {
        white-space: normal;
    }

    /* Ячейка без подписи — действия строки: справа, под пальцем. */
    .mud-sm-table .mud-table-cell:not([data-label]) {
        display: flex;
        justify-content: flex-end;
        gap: 8px;
    }

    .mud-sm-table .mud-table-cell:not([data-label])::before {
        content: none;
    }

    .mud-sm-table .mud-table-body .mud-table-row .mud-table-cell:first-child {
        padding-top: 14px;
    }

    .mud-sm-table .mud-table-body .mud-table-row .mud-table-cell:last-child {
        padding-bottom: 14px;
    }

    .mud-sm-table .mud-table-toolbar .mud-input-control,
    .mud-sm-table .mud-table-toolbar .mud-select {
        flex: 1 1 100%;
        min-width: 0 !important;
        max-width: none !important;
    }
}

/* Та же карточка для простых таблиц с классом stack-sm: у ячеек data-label. */
@media (max-width: 600px) {
    .stack-sm table thead {
        display: none;
    }

    .stack-sm table tbody tr {
        display: block;
        padding: 10px 0;
        border-bottom: 1px solid var(--mud-palette-table-lines);
    }

    .stack-sm table tbody tr:last-child {
        border-bottom: none;
    }

    .mud-simple-table.stack-sm table * tr > td {
        display: grid;
        grid-template-columns: minmax(6.5rem, 36%) minmax(0, 1fr);
        column-gap: 12px;
        align-items: baseline;
        padding: 4px 16px;
        border-bottom: none;
        text-align: start;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .mud-simple-table.stack-sm table * tr > td::before {
        content: attr(data-label);
        grid-column: 1;
        grid-row: 1 / span 40;
        color: var(--mud-palette-text-secondary);
        font-size: 0.8125rem;
        font-weight: 500;
    }

    .mud-simple-table.stack-sm table * tr > td > * {
        grid-column: 2;
        min-width: 0;
    }

    .mud-simple-table.stack-sm table * tr > td:not([data-label]) {
        display: flex;
        justify-content: flex-end;
    }

    .mud-simple-table.stack-sm table * tr > td:not([data-label])::before {
        content: none;
    }

    .mud-simple-table.stack-sm table * tr > td:empty {
        display: none;
    }
}

/* ---------- Диалоги ---------- */

.mud-dialog .mud-dialog-title {
    padding: 18px 24px 10px;
}

.mud-dialog .mud-dialog-title .mud-typography {
    font-weight: 600;
}

.mud-dialog .mud-dialog-actions {
    padding: 12px 24px 16px;
    flex-wrap: wrap;
}

/* На телефоне диалог — во весь экран: поля шире, действия всегда внизу. */
@media (max-width: 600px) {
    .mud-dialog-container .mud-dialog {
        position: fixed;
        inset: 0;
        width: 100% !important;
        max-width: 100% !important;
        height: 100%;
        max-height: 100% !important;
        margin: 0;
        border-radius: 0;
        overflow: hidden;
    }

    .mud-dialog .mud-dialog-title {
        padding: 14px 16px 8px;
        border-bottom: 1px solid var(--mud-palette-lines-default);
    }

    .mud-dialog .mud-dialog-content {
        padding: 12px 16px;
        border-radius: 0;
    }

    .mud-dialog .mud-dialog-actions {
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
        border-top: 1px solid var(--mud-palette-lines-default);
        border-radius: 0;
    }

    .mud-dialog .mud-dialog-actions > .mud-button-root {
        flex: 1 1 auto;
    }
}

/* ---------- Телефон: размеры и сенсорные цели ---------- */

@media (max-width: 600px) {
    .app-logo img {
        height: 24px;
    }

    .app-lang .mud-button-icon-start {
        display: none;
    }

    .app-page {
        padding-top: 18px;
        padding-bottom: 40px;
    }

    .mud-typography-h4 {
        font-size: 1.5rem;
        line-height: 1.333;
    }

    .mud-typography-h5 {
        font-size: 1.25rem;
    }

    .mud-tabs-tabbar .mud-tab {
        min-width: 0;
        padding-inline: 12px;
    }
}

/* Палец, а не мышь: кнопки, значки и пункты меню — не меньше 44 px. */
@media (pointer: coarse) {
    .mud-button-root.mud-button {
        min-height: 44px;
    }

    .mud-icon-button {
        min-width: 44px;
        min-height: 44px;
    }

    .mud-nav-link,
    .mud-menu-item,
    .mud-list-item {
        min-height: 44px;
    }
}

/* ---------- Главная ---------- */

.home-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.home-card {
    padding: 18px 12px 10px;
}

.home-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 8px 10px;
}

.home-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--mud-palette-primary-lighten);
    color: var(--mud-palette-primary);
}

.home-links {
    display: flex;
    flex-direction: column;
}

.home-link {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 6px 8px;
    border-radius: 8px;
    color: var(--mud-palette-text-primary);
    text-decoration: none;
    font-weight: 500;
}

.home-link .mud-icon-root {
    color: var(--mud-palette-text-secondary);
}

.home-link:hover {
    background: var(--mud-palette-primary-lighten);
    color: var(--mud-palette-primary);
}

.home-link:hover .mud-icon-root {
    color: var(--mud-palette-primary);
}

.home-link span {
    flex: 1;
}

.home-link-arrow {
    opacity: 0.6;
}

.status-card {
    max-width: 560px;
}

.status-card th {
    width: 45%;
    font-weight: 500;
    text-align: left;
}

.status-problem,
.secret {
    font-family: Consolas, "Courier New", monospace;
    word-break: break-word;
}

.status-problem {
    font-size: 0.85rem;
}

.secret {
    font-size: 1.05rem;
    letter-spacing: 0.04em;
}

/* ---------- Деньги, приказы, карточки ---------- */

.money-down {
    color: var(--mud-palette-warning-darken);
    font-weight: 600;
    white-space: nowrap;
}

.money-up {
    color: var(--mud-palette-success-darken);
    font-weight: 600;
    white-space: nowrap;
}

.order-number {
    margin-left: 8px;
    font-size: 0.95rem;
    color: var(--mud-palette-text-secondary);
}

.order-facts th,
.money-table th {
    font-weight: 500;
    text-align: left;
}

.order-facts th {
    width: 30%;
    color: var(--mud-palette-text-secondary);
}

.money-table td {
    text-align: right;
    white-space: nowrap;
}

.money-table tr.changed td {
    font-weight: 600;
}

.money-table th.why {
    font-weight: 400;
}

.month-runs,
.intake-errors {
    margin: 4px 0 0 18px;
    padding: 0;
    font-size: 0.875rem;
}

.role-note {
    color: var(--mud-palette-text-secondary);
}

.date-filter {
    max-width: 170px;
}

.month-filter {
    max-width: 160px;
}

.year-filter {
    min-width: 190px;
    max-width: 210px;
}

.kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
}

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.kpi-card {
    padding: 16px 18px;
}

.kpi-label {
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

.kpi-value {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
}

.kpi-note {
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

.bar-row {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) auto;
    gap: 10px;
    align-items: center;
    margin-bottom: 8px;
    font-size: 0.875rem;
}

.bar-track {
    background: var(--mud-palette-background-gray);
    border-radius: 999px;
    height: 10px;
}

.bar-fill {
    background: var(--mud-palette-primary);
    border-radius: 999px;
    height: 10px;
}

.bar-value {
    white-space: nowrap;
    text-align: right;
}

/* Отменённое событие движения — зачёркнуто, но видно: история не теряется. */
.movement-history tr.cancelled td:not(:last-child) {
    text-decoration: line-through;
    color: var(--mud-palette-text-secondary);
}

/* Договоры: поля цены и доли — узкие. */
.contract-price {
    max-width: 14rem;
}

.contract-share {
    max-width: 7rem;
}

/* Шаблоны документов (шаг 2.5). */

.template-entity {
    max-width: 420px;
}

.template-card {
    height: 100%;
}

.template-row {
    padding: 8px 0;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.template-row:first-of-type {
    border-top: none;
}

.template-card code,
.mud-simple-table code {
    font-size: 0.82rem;
    white-space: nowrap;
}

/* ---------- Акт сверки: лист бумаги, белый и в тёмной теме ---------- */

.act {
    max-width: 860px;
    background: #fff;
    color: #000;
    padding: 24px 28px;
    border: 1px solid var(--esep-line);
    border-radius: 10px;
    font-size: 0.9rem;
}

.act h1 {
    font-size: 1.2rem;
    text-align: center;
    margin: 0 0 4px;
}

.act-subtitle {
    text-align: center;
    margin: 0 0 16px;
}

.act-parties th {
    text-align: left;
    font-weight: 500;
    padding-right: 16px;
    vertical-align: top;
}

.act-table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
}

.act-table th,
.act-table td {
    border: 1px solid #999;
    padding: 4px 6px;
}

.act-table td:nth-child(3),
.act-table td:nth-child(4) {
    text-align: right;
    white-space: nowrap;
}

.act-total td {
    font-weight: 600;
}

.act-signs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    margin-top: 32px;
}

.act-sign-title {
    font-weight: 600;
}

.act-sign-line {
    border-top: 1px solid #000;
    margin-top: 36px;
    padding-top: 2px;
    font-size: 0.75rem;
}

.act-made {
    margin-top: 24px;
    font-size: 0.75rem;
    color: #555;
}

@media (max-width: 600px) {
    .act {
        padding: 16px;
        overflow-x: auto;
    }

    .act-signs {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}

@media print {
    .mud-appbar,
    .mud-drawer,
    .no-print {
        display: none !important;
    }

    .mud-main-content {
        padding: 0 !important;
        margin: 0 !important;
    }

    .act {
        border: none;
        padding: 0;
        max-width: none;
    }
}

/* Предпросмотр документа: лист бумаги — белый и в тёмной теме; вёрстку таблиц, кегль и рамки ставит сам документ (DocxPreview). */

.doc-preview {
    max-height: 72vh;
    overflow-y: auto;
    background: var(--mud-palette-background-gray);
    border-radius: 10px;
    padding: 20px 12px;
}

.doc-sheet {
    background: #fff;
    color: #131a24;
    padding: 48px 56px;
    border: 1px solid #cfd6dd;
    border-radius: 4px;
    max-width: 210mm;
    margin: 0 auto;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.14);
    font-family: "Times New Roman", Georgia, serif;
    line-height: 1.45;
    overflow-wrap: break-word;
}

.doc-sheet p {
    margin: 0 0 6px;
}

/* Fixed: ширины колонок — из документа, длинный ИИК не выталкивает таблицу за лист. */
.doc-sheet .doc-table {
    border-collapse: collapse;
    width: 100%;
    table-layout: fixed;
    margin: 0;
}

.doc-sheet .doc-table td {
    padding: 0 5.4pt;
    vertical-align: top;
    overflow-wrap: break-word;
}

.doc-sheet .doc-table td.doc-gap {
    border: none;
    padding: 0;
}

.doc-sheet .doc-table td p {
    margin: 0;
}

.doc-sheet .doc-body {
    line-height: 1.15;
}

.doc-sheet img {
    max-width: 100%;
    height: auto;
}

/* Незаполненная метка — главное, что должно броситься в глаза. */
.doc-tag {
    background: #fde7e7;
    color: #b3261e;
    padding: 0 3px;
    border-radius: 3px;
    font-weight: 600;
}

.doc-cut,
.doc-empty {
    color: #5f6b7a;
    font-style: italic;
}

@media (max-width: 600px) {
    .doc-preview {
        max-height: none;
        padding: 8px 0;
    }

    .doc-sheet {
        padding: 20px 16px;
    }
}

/* ---------- Вход, смена пароля, «нет доступа», ошибка (AuthLayout) ---------- */

.auth-page {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    grid-template-columns: minmax(320px, 5fr) 7fr;
    background: var(--esep-paper);
    font-family: var(--esep-font);
    color: var(--esep-ink);
}

.auth-side {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
    padding: 56px clamp(32px, 6vw, 88px);
    background: var(--esep-indigo);
    color: #fff;
}

.auth-side-logo {
    width: 168px;
    height: auto;
    position: relative;
}

.auth-side-text {
    position: relative;
    margin: 12px 0 0;
    max-width: 22ch;
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.auth-side-tagline {
    position: relative;
    margin: 0;
    color: var(--esep-lavender);
    font-size: 0.9375rem;
}

/* Знак — водяным знаком в углу (брендбук: «знак — аватар, кнопка, водяной знак»). */
.auth-side-mark {
    position: absolute;
    right: -12%;
    bottom: -14%;
    width: 64%;
    opacity: 0.08;
    pointer-events: none;
}

.auth-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 24px;
}

.auth-card {
    width: 100%;
    max-width: 420px;
    background: #fff;
    border: 1px solid var(--esep-line);
    border-radius: 16px;
    padding: 32px 32px 20px;
    box-shadow: 0 1px 2px rgba(27, 29, 58, 0.04), 0 8px 24px rgba(27, 29, 58, 0.06);
}

.auth-brand {
    margin-bottom: 28px;
}

.auth-brand img {
    display: block;
    height: 32px;
    width: auto;
}

.auth-title {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.333;
    letter-spacing: -0.005em;
    margin: 0 0 16px;
}

.auth-lead,
.auth-hint {
    color: var(--esep-graphite);
    margin: 0 0 16px;
    line-height: 1.5;
}

.auth-hint {
    margin: 18px 0 0;
    color: var(--esep-fog);
    font-size: 0.8125rem;
}

.auth-message {
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 16px;
    line-height: 1.45;
}

.auth-error {
    background: var(--esep-error-bg);
    color: var(--esep-error);
}

.auth-notice {
    background: var(--esep-info-bg);
    color: var(--esep-info);
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.auth-form label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--esep-graphite);
    margin-top: 8px;
}

.auth-form input {
    font: inherit;
    font-size: 1rem;
    min-height: 48px;
    padding: 10px 14px;
    color: var(--esep-ink);
    background: #fff;
    border: 1px solid #B9BBCF;
    border-radius: 10px;
}

.auth-form input:hover {
    border-color: var(--esep-graphite);
}

.auth-form input:focus {
    outline: 2px solid var(--esep-indigo);
    outline-offset: 0;
    border-color: var(--esep-indigo);
}

.auth-submit {
    margin-top: 20px;
    min-height: 48px;
    font: inherit;
    font-weight: 600;
    padding: 10px 16px;
    border: none;
    border-radius: 10px;
    background: var(--esep-indigo);
    color: #fff;
    cursor: pointer;
}

.auth-submit:hover {
    background: var(--esep-indigo-dark);
}

.auth-submit:focus-visible {
    outline: 2px solid var(--esep-indigo);
    outline-offset: 2px;
}

.auth-back {
    margin: 18px 0 0;
}

.auth-back a {
    color: var(--esep-indigo);
    font-weight: 500;
}

.auth-languages {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
    justify-content: center;
    margin-top: 28px;
    padding-top: 14px;
    border-top: 1px solid var(--esep-line);
    font-size: 0.875rem;
}

.auth-languages a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 10px;
    border-radius: 8px;
    color: var(--esep-graphite);
    text-decoration: none;
}

.auth-languages a:hover {
    background: var(--esep-indigo-light);
    color: var(--esep-indigo);
}

.auth-languages a.current {
    background: var(--esep-indigo-light);
    color: var(--esep-indigo);
    font-weight: 600;
}

.auth-footer {
    margin: 20px 0 0;
    color: var(--esep-fog);
    font-size: 0.75rem;
}

@media (max-width: 900px) {
    .auth-page {
        grid-template-columns: 1fr;
    }

    .auth-side {
        display: none;
    }
}

@media (max-width: 600px) {
    .auth-main {
        justify-content: flex-start;
        padding: 24px 16px;
    }

    .auth-card {
        padding: 24px 20px 16px;
        border-radius: 14px;
    }

    .auth-brand {
        margin-bottom: 22px;
    }
}

/* Ссылка в строке списка: строка открывается щелчком, ссылка — ещё и с клавиатуры. */
.row-link {
    color: inherit;
    font-weight: 500;
    text-decoration: none;
}

.row-link:hover {
    color: var(--mud-palette-primary);
    text-decoration: underline;
}

/* Пустой список (EmptyState). */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 36px 16px;
    text-align: center;
}

.empty-state-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 6px;
    border-radius: 50%;
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-secondary);
}

.empty-state-icon.positive {
    background: var(--mud-palette-success-lighten);
    color: var(--mud-palette-success-darken);
}

.empty-state-title {
    font-weight: 600;
}

.empty-state-hint {
    max-width: 48ch;
    color: var(--mud-palette-text-secondary);
    font-size: 0.875rem;
}

/* Главная: сводка руководителя — кнопкой под приветствием. */
.home-top {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Плотные таблицы: поля ячеек 12 px вместо 16 + 24 у MudBlazor — на 1280 px
   отчёт с девятью колонками помещается без прокрутки вбок. */
.mud-table-dense * .mud-table-row .mud-table-cell {
    padding: 6px 12px;
}

.mud-table-dense * .mud-table-row .mud-table-cell:first-child {
    padding-inline-start: 16px;
}

.mud-simple-table.mud-table-dense table * tr > td,
.mud-simple-table.mud-table-dense table * tr > th {
    padding: 6px 12px;
}

.mud-simple-table.mud-table-dense table * tr > :first-child {
    padding-inline-start: 16px;
}

/* Итоги юрлица в карточке отчёта: четыре суммы в полширины — поля ячеек уже,
   иначе последняя сумма уезжала за край карточки. */
.mud-simple-table.mud-table-dense.compact-table table * tr > td,
.mud-simple-table.mud-table-dense.compact-table table * tr > th {
    padding: 6px 8px;
}

.mud-simple-table.mud-table-dense.compact-table table * tr > :first-child {
    padding-inline-start: 0;
}

.mud-simple-table.mud-table-dense.compact-table table * tr > :last-child {
    padding-inline-end: 0;
}

/* Заголовок раздела с кнопками: на телефоне кнопки — строкой под заголовком,
   а не одна справа и три под ним. */
@media (max-width: 600px) {
    .section-head > h2 {
        flex-basis: 100%;
    }

    .section-head > .mud-spacer {
        display: none;
    }
}

/* Таблица без заголовков (плательщики, скидки, платежи договора) на телефоне:
   строка — абзац, ячейки идут подряд и переносятся; первая — во всю ширину. */
@media (max-width: 600px) {
    .flow-sm table tbody tr {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 2px 12px;
        padding: 10px 16px;
        border-bottom: 1px solid var(--mud-palette-table-lines);
    }

    .flow-sm table tbody tr:last-child {
        border-bottom: none;
    }

    .mud-simple-table.flow-sm table * tr > td {
        display: block;
        padding: 0;
        border: none;
        text-align: start;
    }

    .mud-simple-table.flow-sm table * tr > td:first-child {
        flex-basis: 100%;
        padding: 0;
        font-weight: 500;
    }

    .mud-simple-table.flow-sm table * tr > td:empty {
        display: none;
    }

    .mud-simple-table.flow-sm table * tr > td:last-child:not(:first-child) {
        margin-inline-start: auto;
    }
}

/* Вкладки — обычным регистром, на телефоне — без стрелок прокрутки. */
.mud-tab {
    text-transform: none;
    font-weight: 500;
    letter-spacing: normal;
}

@media (max-width: 600px) {
    .mud-tab {
        min-width: 0 !important;
        padding-inline: 12px;
    }
}

/* Сводка на телефоне: показатели по два в ряд, а не лентой на пять экранов. */
@media (max-width: 600px) {
    .kpi-grid,
    .kpi-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .kpi-card {
        padding: 12px;
    }

    .kpi-value {
        font-size: 1.125rem;
        white-space: normal;
    }
}

/* ---- Обучение (PLATFORM.md, шаг 4.2) ----
   Инструкции читают по шагам, повторяя за текстом, — крупнее и просторнее
   рабочих экранов: строка до 76 знаков, снимки во всю колонку. */

.learn-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
    gap: 16px;
}

.learn-card {
    display: flex;
    gap: 16px;
    padding: 16px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    background: var(--mud-palette-surface);
    color: inherit;
    text-decoration: none;
    transition: border-color .15s, box-shadow .15s;
}

.learn-card:hover { border-color: var(--mud-palette-primary); box-shadow: 0 2px 10px rgba(27, 29, 58, .08); }
.learn-card-icon { color: var(--mud-palette-primary); flex: 0 0 auto; font-size: 2rem !important; }
.learn-card-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.learn-card-title { font-weight: 700; font-size: 1.05rem; }
.learn-card-who { color: var(--mud-palette-text-secondary); font-size: .85rem; }

.learn-layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}

.learn-toc {
    position: sticky;
    top: 76px;
    padding: 12px 16px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    background: var(--mud-palette-surface);
    font-size: .9rem;
}

.learn-toc-title { font-weight: 700; margin-bottom: 8px; }
.learn-toc ol { margin: 0; padding-left: 20px; }
.learn-toc li { margin: 0; padding: 4px 0; }
.learn-toc a { color: inherit; text-decoration: none; }
.learn-toc a:hover { color: var(--mud-palette-primary); text-decoration: underline; }

/* Уже 1400 — оглавление над текстом: сбоку оно ужимает снимки. */
@media (max-width: 1400px) {
    .learn-layout { grid-template-columns: minmax(0, 1fr); }
    .learn-toc { position: static; }
    .learn-toc ol { columns: 2 240px; column-gap: 32px; }
    .learn-toc li { break-inside: avoid; }
}

.learn { max-width: 960px; font-size: 1rem; line-height: 1.6; }
.learn h2 { font-size: 1.4rem; margin: 40px 0 12px; scroll-margin-top: 76px; }
.learn h3 { font-size: 1.1rem; margin: 24px 0 8px; }
.learn p, .learn li { max-width: 76ch; }
/* MudBlazor обнуляет отступы абзацев — в тексте инструкции они нужны. */
.learn p, .learn ul, .learn ol { margin: 0 0 12px; }
.learn ul, .learn ol { padding-left: 24px; }
.learn li { margin: 4px 0; }
.learn table { border-collapse: collapse; margin: 12px 0; }
.learn th, .learn td { border: 1px solid var(--mud-palette-lines-default); padding: 6px 10px; text-align: left; vertical-align: top; }
.learn th { background: var(--mud-palette-background-gray); }

/* `Кнопка` — надпись на экране: похожа на кнопку, а не на код. */
.learn code {
    font-family: inherit;
    font-size: .92em;
    padding: 1px 8px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    background: var(--mud-palette-background-gray);
    white-space: nowrap;
}

/* ① в тексте — как номер красной рамки на снимке (tools/learning/Screens/Studio.cs). */
.learn-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #E5484D;
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    line-height: 1;
    vertical-align: 1px;
}

.learn-shot { margin: 16px 0 24px; }
.learn-shot img {
    display: block;
    max-width: 100%;
    height: auto;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(27, 29, 58, .08);
}
.learn-shot figcaption { color: var(--mud-palette-text-secondary); font-size: .88rem; margin-top: 6px; }

.learn-alert {
    margin: 16px 0;
    padding: 12px 16px;
    border-left: 4px solid var(--mud-palette-info);
    border-radius: 8px;
    background: var(--esep-info-bg);
    /* Фон подсказки светлый и в тёмной теме — текст на нём всегда тёмный. */
    color: #1B1D3A;
    max-width: 76ch;
}
.learn-alert p { margin: 4px 0; }
.learn-alert code { background: rgba(255, 255, 255, .7); border-color: rgba(27, 29, 58, .18); }
.learn-alert-title { font-weight: 700; }
.learn-alert-tip { border-left-color: var(--mud-palette-success); background: #EAF7EF; }
.learn-alert-important { border-left-color: var(--mud-palette-primary); background: var(--esep-indigo-light); }
.learn-alert-warning { border-left-color: var(--mud-palette-warning); background: #FFF6E5; }


/* ---- Повторное ревью (DESIGN-REVIEW.md, раздел 6) ---- */

/* Описание экрана (PageLead): на компьютере целиком, кнопки нет. */
.page-lead-text {
    font-size: var(--mud-typography-body1-size, 0.9375rem);
    line-height: 1.6;
}

.page-lead-more {
    display: none;
}

/* Отбор (FilterPanel): на компьютере — строкой, кнопка «Отбор» не нужна. */
.filter-panel .filter-toggle {
    display: none;
}

@media (max-width: 600px) {
    /* Длинное описание — две строки и «Подробнее». */
    .page-lead.collapsible:not(.expanded) .page-lead-text {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .page-lead-more {
        display: inline-flex;
        align-items: center;
        min-height: 36px;
        padding: 0;
        border: 0;
        background: none;
        color: var(--mud-palette-primary);
        font: inherit;
        font-size: 0.875rem;
        font-weight: 500;
        cursor: pointer;
    }

    /* Отбор — под кнопкой: до первой строки списка — один экран, а не полтора. */
    .filter-panel .filter-toggle {
        display: inline-flex;
    }

    .filter-panel:not(.open) .filter-body {
        display: none;
    }

    .filter-panel .filter-body .mud-input-control,
    .filter-panel .filter-body .mud-select {
        flex: 1 1 100%;
        min-width: 0 !important;
        max-width: none !important;
    }
}

@media (pointer: coarse) {
    .page-lead-more {
        min-height: 44px;
    }
}

/* «Задолженность»: остаток, начислено, оплачено — одной колонкой «Расчёт». */
.settlement {
    display: grid;
    grid-template-columns: auto auto;
    column-gap: 10px;
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    white-space: nowrap;
}

.settlement dt {
    color: var(--mud-palette-text-secondary);
}

.settlement dd {
    margin: 0;
    text-align: right;
}

/* «Напомнить» — у плательщика: заметная, но тихая кнопка WhatsApp. */
.remind-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    padding: 2px 10px 2px 6px;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 999px;
    color: var(--mud-palette-success-darken);
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.remind-link:hover {
    background: var(--mud-palette-success-lighten);
    border-color: var(--mud-palette-success);
}

@media (pointer: coarse) {
    .remind-link {
        min-height: 44px;
        padding-inline: 14px;
    }

    /* Номер телефона в строке — под палец. */
    .phone-link {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    .learn-toc a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}

/* «Роли и права»: длинное право переносится, а не выталкивает страницу вбок. */
.role-permissions .mud-chip {
    height: auto;
    min-height: 24px;
    max-width: 100%;
    padding-block: 2px;
    white-space: normal;
    line-height: 1.3;
}

.role-permissions .mud-chip .mud-chip-content {
    white-space: normal;
}

/* «Перезаключение»: помехи одной плашкой. */
.renewal-problems {
    margin: 0;
    padding-inline-start: 20px;
}

/* Таблицы денег студента: строки с заголовками-ячейками (th) — тоже
   абзацем (flow-sm) или карточкой (stack-sm). */
@media (max-width: 600px) {
    .flow-sm table thead {
        display: none;
    }

    .mud-simple-table.flow-sm table * tr > th {
        display: block;
        padding: 0;
        border: none;
        text-align: start;
        white-space: normal;
    }

    .mud-simple-table.flow-sm table * tr > th:first-child {
        flex-basis: 100%;
        font-weight: 500;
    }

    .mud-simple-table.flow-sm.money-table th.why {
        flex: 1 1 60%;
    }

    .mud-simple-table.stack-sm table tbody tr > th {
        display: grid;
        grid-template-columns: minmax(6.5rem, 36%) minmax(0, 1fr);
        column-gap: 12px;
        align-items: baseline;
        padding: 4px 16px;
        border-bottom: none;
        text-align: start;
        white-space: normal;
    }

    .mud-simple-table.stack-sm table tbody tr > th::before {
        content: attr(data-label);
        grid-column: 1;
        color: var(--mud-palette-text-secondary);
        font-size: 0.8125rem;
        font-weight: 500;
    }

    .mud-simple-table.stack-sm.money-table td {
        text-align: start;
    }
}

/* Плашка в строке-карточке: MudChip обёрнут в .mud-chip-container с display: contents —
   выравнивание задаём самой плашке, иначе она растягивается на всю колонку. */
@media (max-width: 960px) {
    .mud-sm-table .mud-table-cell > .mud-chip-container > .mud-chip {
        grid-column: 2;
        justify-self: start;
    }
}

@media (max-width: 600px) {
    .mud-simple-table.stack-sm table * tr > td > .mud-chip-container > .mud-chip {
        grid-column: 2;
        justify-self: start;
    }
}

/* «Учащиеся»: поиск — главное на панели, подсказка «Номер, ФИО, ИИН или телефон» видна целиком. */
@media (min-width: 601px) {
    .learners-search {
        min-width: 340px;
        flex: 1 1 340px;
    }
}

/* Значения карточек графика (ячейки-заголовки th) — тем же весом, что и остальные. */
@media (max-width: 600px) {
    .mud-simple-table.stack-sm table tbody tr > th {
        font-weight: 400;
    }
}

/* ---------- Вход родителей (docs/PARENT-CABINET.md, шаг 8.6) ---------- */

/* Люди с одним номером — столбиком, без маркеров: имя, ниже — кто он детям. */
.phone-people {
    list-style: none;
    margin: 12px 0 8px;
    padding: 0;
}

.phone-people li + li {
    margin-top: 10px;
}

.phone-person-name {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
}

.parents-search {
    min-width: 260px;
    max-width: 360px;
}

.parents-kind {
    min-width: 220px;
    max-width: 280px;
}

.parents-settings {
    max-width: 880px;
}

/* Подробности события — как записаны: моноширинно и мелко, длинная строка переносится. */
.log-details {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    overflow-wrap: anywhere;
}