/* ===== 1. GLOBAL LAYOUT SPACING ===== */
:root{
    /* Шаги вертикальных/горизонтальных отступов */
    --space-1: 0.5rem;   /* 8 px */
    --space-2: 1rem;     /* 16 px */
    --space-3: 1.5rem;   /* 24 px */
}

/* Контейнеры страниц */
.page-container{
    padding-inline: var(--space-2);
}
@media (min-width: 992px){
    .page-container{
        padding-inline: var(--space-3);
    }
}

/* ===== 2. HEADER ===== */
.logo{
    height: 3rem;
    transition: transform .15s ease;
}
.vr{
    width: 1px;
    min-height: 2.5rem;
    background: var(--brand-gray);
}

/* ===== 3. TOGGLE BUTTONS ===== */
.btn-active{
    background: var(--brand-white);
    color: var(--brand-black);
    border: none;
}
.btn-inactive{
    background: transparent;
    color: var(--brand-white);
    border: 1px solid var(--brand-white);
}
.btn-active,
.btn-inactive{
    padding: .625rem 1.25rem;
    font-size: 1rem;
    border-radius: var(--radius-lg);
    transition: background .15s ease, color .15s ease;
}

/* ===== 4. TABLE: базовые правки ===== */
.table thead th{
    vertical-align: middle;                 /* выравниваем по высоте */
}

/* ===== 5. MOBILE (≤ 576 px) ===== */
@media (max-width: 576px){
    .page-header .page-title{
        font-size: clamp(1.125rem, 4.5vw + .25rem, 1.25rem);
        text-align: left;
        margin-top: var(--space-1);   /* небольшая щель над текстом */
        margin-bottom: -1.75rem !important;   /* небольшая щель над текстом */
    }
    
    /* 2. Переключатели в строку. Размер переключателей корректный */
    .button-group {
        display: flex !important;
        gap: var(--space-1);
        align-items: stretch;      /* все кнопки будут одной высоты */
        margin-bottom: 1rem;
        margin-top: 3rem;
    }

    .button-group .btn {
        justify-content: center;
    }
    
    /* первая кнопка – минимум 30% ширины контейнера */
    .button-group .btn:first-child {
        flex: 0 0 35%;
        max-width: 35%;
    }

    /* вторая кнопка – оставшиеся 70%, с переносом текста по необходимости */
    .button-group .btn:last-child {
        flex: 1 1 55%; /* примерно 10% занимает промежуток между кнопками */
        min-width: 55%;
        white-space: normal;       /* разрешаем перенос текста */
        word-break: break-word;    /* если слово слишком длинное */
    }

    /* 3. Логотип чуть меньше, чтобы освободить место заголовку */
    .logo{
        height: 1.5rem;
    }

    /* --- NEW: расположение плашки над кнопками --- */
    .controls{
        width: 100%;
        padding-inline: 0;
        flex-direction: column-reverse;
        align-items: stretch;
        margin: 2.5rem 0 -0.35rem 0;
    }

    /* плашка на всю строку и небольшой отступ вниз */
    .info-badge{
        width: 100%;
        margin-bottom: 0.2rem;
    }

    /* уменьшенный отступ над группой кнопок */
    .button-group{
        width: 100%;
        margin-top: var(--space-1);
        margin-bottom: 1rem;
    }
}