/* ═══════════════════════════════════════════════════════════════════
   MANAGE SHELL — Identity-shell для страниц /Account/Manage/*.

   Полностью статичный CSS-layout, не зависит от JS-инициализации
   Syncfusion и от наличия SignalR-канала. Используется в ManageLayout
   (см. Components/Account/Shared/ManageLayout.razor).

   Раскладка на CSS Grid:
     ┌── header ───────────────────────────────┐
     │ brand · back-link · spacer · user · out │
     ├── sidebar ──────┬── content ────────────┤
     │ навигация       │  страница раздела      │
     │ ─────           │                       │
     │ legal / version │                       │
     └─────────────────┴───────────────────────┘
   ═══════════════════════════════════════════════════════════════════ */

.manage-shell {
    display: grid;
    grid-template-rows: 60px 1fr;
    grid-template-columns: 260px 1fr;
    grid-template-areas:
        "header  header"
        "sidebar content";
    min-height: 100vh;
    background-color: #f7f8fa;
    color: #1a2632;
}

/* ── Шапка ─────────────────────────────────────────────────────── */
.manage-header {
    grid-area: header;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 0 1.25rem;
    background-color: #ffffff;
    border-bottom: 1px solid #e6e8ec;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    position: sticky;
    top: 0;
    z-index: 10;
}

/* Лого-ссылка ведёт на главную приложения. Цвет совпадает с фирменным
   синим (#0066cc), используемым в шапке основного MainLayout — поэтому
   при переходе из аккаунт-зоны обратно бренд читается одинаково. */
.manage-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 1.05rem;
    color: #0066cc;
    text-decoration: none;
}
.manage-brand:hover,
.manage-brand:focus {
    color: #004d99;
    text-decoration: none;
}
.manage-brand i {
    font-size: 1.2rem;
}

/* Возврат к рабочему пространству — главный «эскейп». Намеренно
   нейтрального серого цвета, чтобы не конкурировать с брендом. */
.manage-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.55rem;
    border-radius: 0.375rem;
    color: #5a6470;
    font-size: 0.85rem;
    text-decoration: none;
    transition: background-color 120ms ease, color 120ms ease;
}
.manage-back-link:hover,
.manage-back-link:focus {
    background-color: rgba(0, 102, 204, 0.08);
    color: #0066cc;
    text-decoration: none;
}
.manage-back-link i {
    font-size: 0.85rem;
}

.manage-header-spacer {
    flex: 1;
}

/* Имя/логин активного пользователя — индикатор «в чьём кабинете мы»,
   обрезается с многоточием, чтобы длинные логины не ломали шапку. */
.manage-user-name {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.85rem;
    color: #5a6470;
}

.manage-logout-form {
    margin: 0;
    line-height: 0;
}

/* Кнопка выхода в шапке — белая, с красным акцентом при наведении.
   Намеренно НЕ заливаем красным сразу, чтобы случайный клик не уводил
   из приложения; красный включается только в момент намерения (hover/focus). */
.manage-logout-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    height: 2.1rem;
    padding: 0 0.85rem;
    border: 1px solid #d8dce1;
    border-radius: 0.375rem;
    background-color: #ffffff;
    color: #344050;
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.manage-logout-btn:hover {
    background-color: #fff5f5;
    border-color: #d9534f;
    color: #b02a37;
}
.manage-logout-btn:active {
    background-color: #ffe5e5;
}
.manage-logout-btn:focus-visible {
    outline: none;
    border-color: #d9534f;
    box-shadow: 0 0 0 3px rgba(217, 83, 79, 0.18);
}
.manage-logout-btn i {
    font-size: 0.9rem;
}

/* ── Боковая панель ────────────────────────────────────────────── */
.manage-sidebar {
    grid-area: sidebar;
    display: flex;
    flex-direction: column;
    padding: 1.25rem 0.75rem 1rem;
    background-color: #ffffff;
    border-right: 1px solid #e6e8ec;
    overflow-y: auto;
}

.manage-nav {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    flex: 1;
}

.manage-nav-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

/* Заголовок секции — мелкий, разрядка, верхний регистр. Это «label»,
   а не пункт, поэтому он не интерактивен и приглушённого серого цвета. */
.manage-nav-header {
    padding: 0 0.85rem;
    margin-bottom: 0.3rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8a939e;
}

/* Базовый стиль пункта меню — общий для всех секций. Блочный flex,
   фиксированное место под иконку, мягкая подсветка при hover. */
.manage-nav .nav-link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.5rem 0.85rem;
    border-radius: 0.375rem;
    color: #344050;
    font-size: 0.9rem;
    line-height: 1.3;
    text-decoration: none;
    transition: background-color 100ms ease, color 100ms ease;
}
.manage-nav .nav-link:hover {
    background-color: rgba(0, 102, 204, 0.08);
    color: #0066cc;
    text-decoration: none;
}
/* Активный пункт — синий фон + жирный шрифт. Класс .active навешивается
   компонентом Blazor NavLink при совпадении URL. */
.manage-nav .nav-link.active {
    background-color: rgba(0, 102, 204, 0.12);
    color: #0066cc;
    font-weight: 600;
}

.manage-nav .nav-link i {
    flex-shrink: 0;
    width: 1.1rem;
    font-size: 0.95rem;
    text-align: center;
}

/* Тонкая линия перед опасной секцией — визуально отделяет «удаление»
   от обычных разделов, чтобы пользователь не кликнул его по инерции. */
.manage-nav-divider {
    height: 1px;
    margin: 0.4rem 0.5rem;
    background-color: #e6e8ec;
}

/* Опасная секция — красный акцент во всех состояниях.
   Используется только для удаления аккаунта. */
.manage-nav-danger .nav-link {
    color: #b02a37;
}
.manage-nav-danger .nav-link:hover {
    background-color: rgba(217, 83, 79, 0.10);
    color: #b02a37;
}
.manage-nav-danger .nav-link.active {
    background-color: rgba(217, 83, 79, 0.14);
    color: #842029;
}

/* Подвал боковой панели — правовые ссылки и версия сборки.
   margin-top:auto прижимает блок ко дну панели, независимо от высоты меню. */
.manage-sidebar-footer {
    margin-top: auto;
    padding: 0.85rem 0.85rem 0.25rem;
    border-top: 1px solid #eef0f3;
    font-size: 0.72rem;
    color: #8a939e;
}
.manage-sidebar-links {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.manage-sidebar-links a {
    color: #5a6470;
    text-decoration: none;
}
.manage-sidebar-links a:hover {
    color: #0066cc;
    text-decoration: underline;
}
.manage-sidebar-version {
    margin-top: 0.25rem;
    font-variant-numeric: tabular-nums;
}

/* ── Контент ───────────────────────────────────────────────────── */
.manage-content {
    grid-area: content;
    padding: 2rem 2.5rem 3rem;
    overflow-x: hidden;
}
/* Ограничение ширины колонки контента: формы и текст становятся
   неудобными для чтения шире ~880px (правило типографики). */
.manage-content-inner {
    max-width: 880px;
}

/* Снимаем верхний margin у первого заголовка страницы — он должен
   начинаться ровно по верхнему padding'у контентной области. */
.manage-content-inner > h1:first-child,
.manage-content-inner > h2:first-child,
.manage-content-inner > h3:first-child {
    margin-top: 0;
    margin-bottom: 1rem;
    font-weight: 700;
    color: #1a2632;
}

/* ── Адаптив для узких экранов ─────────────────────────────────── */
@media (max-width: 768px) {
    /* На мобильном раскладываем грид в одну колонку: header → sidebar → content.
       Sidebar занимает auto-высоту (на полный экран не растягиваем),
       а content — оставшееся пространство. */
    .manage-shell {
        grid-template-rows: 60px auto 1fr;
        grid-template-columns: 1fr;
        grid-template-areas:
            "header"
            "sidebar"
            "content";
    }
    .manage-sidebar {
        border-right: none;
        border-bottom: 1px solid #e6e8ec;
    }
    .manage-content {
        padding: 1.25rem 1rem 2rem;
    }
    /* На узких экранах в шапке оставляем только иконки кнопок — текст
       прячем, чтобы шапка не переносилась на вторую строку. */
    .manage-back-link span,
    .manage-logout-btn span {
        display: none;
    }
    .manage-user-name {
        max-width: 120px;
    }
}