/* ── Дизайн-система кабинетов: каркас ───────────────────────────────────────────
   Слой 3 из 4: страница целиком — боковое меню, верхняя полоса, область
   содержимого — и его поведение на телефоне, планшете и мониторе.

   Порядок вёрстки выбран под порядок чтения: в разметке сначала ссылка пропуска
   навигации, потом меню, потом содержимое. Никаких перестановок средствами
   раскладки: визуальный порядок и порядок обхода клавишей Tab должны совпадать. */

.cabinet {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

/* ── Ссылка пропуска навигации ─────────────────────────────────────────────────
   Видна только при получении фокуса: с клавиатуры человек попадает сразу
   к содержимому, не проходя всё меню по одной ссылке за раз. */
.skip-link {
    position: absolute;
    top: var(--s-2);
    left: var(--s-2);
    z-index: 100;
    transform: translateY(-200%);
    padding: var(--s-3) var(--s-4);
    background-color: var(--c-surface);
    color: var(--c-accent);
    border: 2px solid var(--c-focus);
    border-radius: var(--r-md);
    box-shadow: var(--sh-2);
    text-decoration: none;
    font-weight: var(--fw-medium);
}

.skip-link:focus {
    transform: translateY(0);
}

/* ── Боковое меню ──────────────────────────────────────────────────────────── */
.cabinet__sidebar {
    background-color: var(--c-nav-bg);
    color: var(--c-nav-text);
    display: flex;
    flex-direction: column;
}

.cabinet__brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    min-height: var(--h-topbar);
    padding: var(--s-3) var(--s-4);
    border-bottom: 1px solid var(--c-nav-border);
}

.cabinet__brand-name {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    min-width: 0;
}

.cabinet__brand a {
    color: var(--c-nav-text-strong);
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    letter-spacing: -0.01em;
    text-decoration: none;
}

.cabinet__brand a:hover {
    text-decoration: underline;
}

/* Знак системы собран из фигур, а не из файла значка: лишний запрос и лишний
   двоичный файл в образе ради двух прямоугольников не нужны. */
.cabinet__mark {
    flex: none;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--r-sm);
    background: linear-gradient(135deg, #4f7cf7 0%, #2450c8 100%);
    position: relative;
}

.cabinet__mark::after {
    content: "";
    position: absolute;
    inset: 0.5rem 0.4rem;
    border-left: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
}

.cabinet__nav {
    flex: 1;
    padding: var(--s-4) var(--s-3);
    overflow-y: auto;
}

.cabinet__nav-title {
    margin: 0 0 var(--s-2);
    padding: 0 var(--s-3);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-nav-text);
    opacity: 0.7;
}

.cabinet__nav-title + .cabinet__nav-title,
.nav-list + .cabinet__nav-title {
    margin-top: var(--s-5);
}

.nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-list li + li {
    margin-top: var(--s-1);
}

.nav-link {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    width: 100%;
    min-height: var(--tap);
    padding: var(--s-2) var(--s-3);
    border: 0;
    border-radius: var(--r-md);
    background: none;
    color: var(--c-nav-text);
    font: inherit;
    font-size: var(--fs-md);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--t-fast), color var(--t-fast);
}

.nav-link:hover {
    background-color: var(--c-nav-hover);
    color: var(--c-nav-text-strong);
    text-decoration: none;
}

/* Действующий раздел отмечен и заливкой, и полосой слева: одной заливки мало
   тем, кто плохо различает оттенки на тёмном фоне. */
.nav-link.active {
    background-color: var(--c-nav-active);
    color: var(--c-nav-text-strong);
    font-weight: var(--fw-medium);
    box-shadow: inset 3px 0 0 var(--c-accent);
}

.cabinet__nav-footer {
    padding: var(--s-4) var(--s-3);
    border-top: 1px solid var(--c-nav-border);
}

.cabinet__user {
    padding: 0 var(--s-3) var(--s-3);
    color: var(--c-nav-text);
    font-size: var(--fs-sm);
}

.cabinet__user-name {
    display: block;
    color: var(--c-nav-text-strong);
    font-weight: var(--fw-medium);
    overflow-wrap: anywhere;
}

.cabinet__nav-footer form {
    margin: 0;
}

/* ── Переключатель меню на узком экране ────────────────────────────────────────
   Раскрытие сделано флажком и подписью к нему, без сценария: меню обязано
   открываться и тогда, когда JavaScript ещё не загрузился. Флажок доступен
   с клавиатуры, подпись даёт ему название, обводка фокуса переносится на неё. */
.cabinet__toggle {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
}

.cabinet__toggle-button {
    display: none;
    align-items: center;
    gap: var(--s-2);
    min-height: var(--tap);
    padding: var(--s-2) var(--s-3);
    border-radius: var(--r-md);
    color: var(--c-nav-text-strong);
    font-size: var(--fs-sm);
    cursor: pointer;
}

.cabinet__toggle:focus-visible ~ .cabinet__brand .cabinet__toggle-button {
    outline: 3px solid var(--c-focus);
    outline-offset: 2px;
}

/* Три полосы нарисованы границами: значок-файл потребовал бы либо запроса,
   либо строки base64 в разметке. */
.cabinet__toggle-icon {
    width: 1.25rem;
    height: 0.875rem;
    border-top: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    position: relative;
}

.cabinet__toggle-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    border-top: 2px solid currentColor;
    transform: translateY(-1px);
}

/* ── Область содержимого ───────────────────────────────────────────────────── */
.cabinet__main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.cabinet__topbar {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    min-height: var(--h-topbar);
    padding: var(--s-2) var(--s-5);
    background-color: var(--c-surface);
    border-bottom: 1px solid var(--c-border);
    color: var(--c-text-muted);
    font-size: var(--fs-sm);
}

.cabinet__content {
    padding: var(--s-6) var(--s-5) var(--s-8);
    width: 100%;
    max-width: var(--w-content);
}

/* ── Телефон и планшет ─────────────────────────────────────────────────────────
   Нижняя граница — 360 пикселей: это распространённый недорогой телефон,
   а не исключение. */
@media (max-width: 63.99em) {
    .cabinet__sidebar {
        position: sticky;
        top: 0;
        z-index: 20;
        max-height: 100dvh;
        overflow-y: auto;
    }

    .cabinet__toggle-button {
        display: inline-flex;
    }

    /* Меню свёрнуто, пока флажок не отмечен. */
    .cabinet__nav,
    .cabinet__nav-footer {
        display: none;
    }

    .cabinet__toggle:checked ~ .cabinet__nav,
    .cabinet__toggle:checked ~ .cabinet__nav-footer {
        display: block;
    }

    .cabinet__content {
        padding: var(--s-5) var(--s-4) var(--s-7);
    }

    .cabinet__topbar {
        padding-left: var(--s-4);
        padding-right: var(--s-4);
    }
}

/* ── Монитор ─────────────────────────────────────────────────────────────────── */
@media (min-width: 64em) {
    .cabinet {
        flex-direction: row;
    }

    .cabinet__sidebar {
        width: var(--w-sidebar);
        flex: none;
        height: 100vh;
        height: 100dvh;
        position: sticky;
        top: 0;
    }

    .cabinet__toggle-button {
        display: none;
    }

    .cabinet__topbar {
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .cabinet__content {
        padding: var(--s-6) var(--s-6) var(--s-8);
    }
}

/* ── Каркас посадочной страницы ────────────────────────────────────────────────
   Единственная страница, которую видят до входа, и потому единственная, у которой
   свой каркас. Бокового меню здесь нет намеренно: пока вход не выполнен, вести
   из меню некуда, и тёмная полоса в треть экрана рассказывала бы только о том,
   что разделов не видно.

   Всё остальное — та же система: те же токены, те же кнопки, та же ссылка
   пропуска навигации и то же поведение тёмной темы.

   Страница собрана из полос во всю ширину экрана: тёмная рама (шапка, первый
   экран, призыв ко входу, подвал) и светлое или тёмное по теме содержимое между
   ними. Поэтому ширину держит не <main>, а обёртка внутри каждой полосы. */
.landing {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

/* Тёмная полоса. Общие значения подменяются значениями полосы, и всё, что
   внутри неё, — кнопки, ссылки, обводка фокуса — перекрашивается само, без
   второго набора правил. color-scheme говорит браузеру, что полоса тёмная:
   так верно рисуются полосы прокрутки и поля ввода. */
.landing-ink {
    color-scheme: dark;
    --c-bg: var(--c-ink-bg);
    --c-surface: var(--c-ink-surface);
    --c-surface-sunken: var(--c-ink-surface-sunken);
    --c-surface-raised: var(--c-ink-surface);
    --c-border: var(--c-ink-border);
    --c-border-strong: var(--c-ink-border-strong);
    --c-text: var(--c-ink-text);
    --c-text-muted: var(--c-ink-muted);
    --c-accent: var(--c-ink-accent);
    --c-accent-hover: var(--c-ink-accent-hover);
    --c-accent-solid: var(--c-ink-accent-solid);
    --c-accent-solid-hover: var(--c-ink-accent-solid-hover);
    --c-focus: var(--c-ink-focus);
    background-color: var(--c-bg);
    color: var(--c-text);
}

/* Одна мера ширины на все полосы: без неё на широком мониторе шапка, текст
   и подвал расходятся по левому краю на десятки пикселей. */
.landing-wrap {
    width: 100%;
    max-width: var(--w-content);
    margin: 0 auto;
    padding-left: var(--s-5);
    padding-right: var(--s-5);
}

.landing__bar {
    border-bottom: 1px solid var(--c-border);
}

.landing__foot {
    border-top: 1px solid var(--c-border);
}

.landing__bar-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3) var(--s-4);
    padding-top: var(--s-3);
    padding-bottom: var(--s-3);
}

.landing__brand {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    min-width: 0;
}

.landing__brand-name {
    display: block;
    color: var(--c-text);
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    letter-spacing: -0.01em;
}

.landing__brand-note {
    display: block;
    color: var(--c-text-muted);
    font-size: var(--fs-sm);
}

.landing__main {
    flex: 1;
}

.landing__foot-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-2) var(--s-4);
    padding-top: var(--s-5);
    padding-bottom: var(--s-6);
    color: var(--c-text-muted);
    font-size: var(--fs-sm);
}

/* Перечень стандартов в подвале набран моноширинным: это имена, а не фраза. */
.landing__foot-tech {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.04em;
}

/* На телефоне поле — 16 пикселей: меньше — текст липнет к краю стекла,
   больше — строка становится короче трёх-четырёх слов. */
@media (max-width: 30em) {
    .landing-wrap {
        padding-left: var(--s-4);
        padding-right: var(--s-4);
    }
}

@media (min-width: 64em) {
    .landing-wrap {
        padding-left: var(--s-6);
        padding-right: var(--s-6);
    }
}

/* ── Служебная полоса Blazor ───────────────────────────────────────────────────
   Разметку требует сам каркас; оформление приведено к системе, чтобы сообщение
   о разрыве связи не выглядело чужим на странице. */
#blazor-error-ui {
    display: none;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 1000;
    box-sizing: border-box;
    width: 100%;
    padding: var(--s-3) var(--s-5);
    background-color: var(--c-warning-soft);
    color: var(--c-warning-on-soft);
    border-top: 1px solid var(--c-warning);
    box-shadow: var(--sh-2);
    font-size: var(--fs-sm);
}

#blazor-error-ui .dismiss {
    position: absolute;
    top: var(--s-2);
    right: var(--s-3);
    cursor: pointer;
    font-size: var(--fs-lg);
    line-height: 1;
}