/* Каркас страницы: верхняя панель, меню пользователя, заголовок раздела, подвал списка. */

/* --- Верхняя панель --- */

.app-bar {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: var(--home-surface);
    border-bottom: 1px solid var(--home-border);
    box-shadow: var(--home-shadow);
}

.app-bar-inner {
    display: flex;
    align-items: stretch;
    gap: 1.5rem;
    height: 56px;
}

.app-logo {
    display: flex;
    align-items: center;
    font-size: 1.35rem;
}

/* Логотип — сердечко */
.brand-heart {
    color: var(--home-accent);
}

.app-nav {
    display: flex;
    align-items: stretch;
    gap: .25rem;
    flex-grow: 1;
}

.app-nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 0 .75rem;
    color: var(--home-muted);
    font-weight: 500;
    letter-spacing: .01em;
}

.app-nav-link:hover {
    color: var(--home-text);
}

.app-nav-link.active {
    color: var(--home-primary);
}

/* Индикатор активного пункта — полоса снизу, как у вкладок Material */
.app-nav-link.active::after {
    content: "";
    position: absolute;
    left: .5rem;
    right: .5rem;
    bottom: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--home-primary);
}

/* --- Меню пользователя --- */

.app-user {
    display: flex;
    align-items: center;
}

.app-user-toggle {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .25rem .5rem .25rem .25rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--home-text);
    font-weight: 500;
}

.app-user-toggle:hover,
.app-user-toggle[aria-expanded="true"] {
    background: var(--home-surface-variant);
}

.app-user-toggle.active {
    box-shadow: inset 0 0 0 2px rgba(var(--home-primary-rgb), .35);
}

.app-user-toggle .bi-chevron-down {
    color: var(--home-muted);
    font-size: .75rem;
}

.app-menu {
    --bs-dropdown-min-width: 260px;
    --bs-dropdown-padding-y: .5rem;
    --bs-dropdown-border-width: 0;
    --bs-dropdown-border-radius: var(--home-radius);
    --bs-dropdown-box-shadow: var(--home-shadow-menu);
    --bs-dropdown-link-color: var(--home-text);
    --bs-dropdown-link-hover-bg: var(--home-surface-variant);
    --bs-dropdown-link-active-color: var(--home-primary);
    --bs-dropdown-link-active-bg: var(--home-primary-container);
    --bs-dropdown-item-padding-y: .55rem;
    --bs-dropdown-item-padding-x: 1.25rem;
    --bs-dropdown-divider-bg: var(--home-border);
    box-shadow: var(--bs-dropdown-box-shadow);
}

.app-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: .85rem;
}

.app-menu .dropdown-item i {
    color: var(--home-muted);
    font-size: 1.05rem;
}

.app-menu .dropdown-item.active i {
    color: var(--home-primary);
}

/* Переключатель темы: вся строка — label, клик по ней переключает и не закрывает меню */
.app-menu-switch {
    cursor: pointer;
    user-select: none;
}

.app-menu-switch .form-check-input {
    margin-top: 0;
    cursor: pointer;
}

.app-menu-user {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .5rem 1.25rem .75rem;
}

.app-menu-user-name {
    font-weight: 500;
    overflow-wrap: anywhere;
}

/* --- Раздел --- */

.page {
    padding-top: 2rem;
    padding-bottom: 3rem;
}

.page-header {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.page-heading {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
}

/* Иконка раздела — квадрат в тоне основного цвета */
.page-icon,
.page-back {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: var(--home-radius);
    font-size: 1.35rem;
}

.page-icon {
    background: var(--home-primary-container);
    color: var(--home-primary);
}

.page-back {
    border: 1px solid var(--home-border);
    background: var(--home-surface);
    color: var(--home-text);
}

.page-back:hover {
    background: var(--home-surface-variant);
    color: var(--home-primary);
}

.page-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: -.01em;
}

.page-subtitle {
    margin: .15rem 0 0;
    color: var(--home-muted);
    font-size: .9rem;
}

.page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

/* Заголовок блока внутри раздела: подпись слева, кнопки справа */
.section-header {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .75rem;
}

.section-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
}

/* Панель фильтров над списком */
.filter-bar {
    background: var(--home-surface);
    border: 1px solid var(--home-border);
    border-radius: var(--home-radius);
    box-shadow: var(--home-shadow);
    padding: 1rem;
    margin-bottom: 1.25rem;
}

/* Строка с количеством записей и постраничной навигацией */
.pagination-bar {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
    justify-content: space-between;
    margin-top: 1.25rem;
}

.pagination-bar .pagination {
    margin-bottom: 0;
}

/* --- Раздел на весь экран: ViewData["Fill"] = true ---
   Страница не прокручивается: блоки делят высоту экрана, растущий блок раздела прокручивается внутри себя.
   Цепочка до него — flex-колонки с min-height: 0, иначе flex растянет их по содержимому (по всему логу).
   Ниже --page-fill-min-height экран не сжимаем: там страница прокручивается как обычно, а не давит блоки.
   На узком экране — обычная прокрутка; то же условие повторяют стили страниц (pages/server-control.css). */
@media (min-width: 768px) {
    body.page-fill {
        --page-fill-min-height: 640px;
        display: flex;
        flex-direction: column;
        min-height: 0;
        height: max(100vh, var(--page-fill-min-height));
        height: max(100dvh, var(--page-fill-min-height));
    }

    body.page-fill > main,
    body.page-fill .page {
        display: flex;
        flex: 1;
        flex-direction: column;
        min-height: 0;
    }

    /* Нижний отступ плотнее: он отнимается у прокручиваемого блока. Верхний и под заголовком не трогаем —
       иначе шапка раздела стоит выше, чем на обычных страницах, и прыгает при переходе */
    body.page-fill .page {
        padding-bottom: 1.25rem;
    }
}

@media (max-width: 575.98px) {
    .app-bar-inner {
        gap: .75rem;
    }

    .page {
        padding-top: 1.25rem;
    }
}