/* [1] Мобильные (до 576px) */
@media (max-width: 575.98px) {

    /* Очень маленькие устройства: телефоны */
    :root {
        --base-padding: 1em;
        --base-font-size: 1.8vw;
        --menu-font-size: 2.6vw;
        --content-menu-font-size: 1.9vw;
        --h1-font-size:1.7vw;
    }
}

/* [2] Малые планшеты (576px — 767.98px) */
@media (min-width: 576px) and (max-width: 767.98px) {

    /* Малые планшеты в портрете */
    :root {
        --base-padding: 1em;
        --base-font-size: 1.6vw;
        --menu-font-size: 3vw;
        --content-menu-font-size: 1.7vw;
        --h1-font-size:1.5vw;
    }

}

/* [3] Планшеты (768px — 991.98px) */
@media (min-width: 768px) and (max-width: 991.98px) {

    /* iPad, планшеты */
    :root {
        --base-padding: 0.5em;
        --base-font-size: 1vw;
        --menu-font-size: 2.2vw;
        --content-menu-font-size: 1.1vw;
        --h1-font-size:2.1vw;
    }
}

/* [4] Малые десктопы / большие планшеты (992px — 1199.98px) */
@media (min-width: 992px) and (max-width: 1199.98px) {

    /* Небольшие мониторы, 1080p на малом масштабе */
    :root {
        --base-padding: 0.5em;
        --base-font-size: 1vw;
        --menu-font-size: 2vw;
        --content-menu-font-size: 1.1vw;
        --h1-font-size:1.9vw;
    }
}

/* [5] Стандартные десктопы (1200px — 1399.98px) */
@media (min-width: 1200px) and (max-width: 1399.98px) {

    /* Обычные FullHD (1920x1080) при масштабе 100–125% */
    :root {
        --base-padding: 0.5em;
        --base-font-size: 1vw;
        --menu-font-size: 1.8vw;
        --content-menu-font-size: 1.1vw;
        --h1-font-size:1.7vw;
        
    }
}

/* [6] Большие десктопы (1400px — 1599.98px) */
@media (min-width: 1400px) and (max-width: 1599.98px) {

    /* QHD-экраны (2560x1440), старые 4K */
    :root {
        --base-padding: 0.5em;
        --base-font-size: 1vw;
        --menu-font-size: 1.6vw;
        --content-menu-font-size: 1.1vw;
        --h1-font-size:1.5vw;
    }
}

/* [7] Очень большие экраны (1600px — 1899.98px) */
@media (min-width: 1600px) and (max-width: 1899.98px) {

    /* 4K (3840x2160) при масштабе 150% или больше */
    :root {
        --base-padding: 0.5em;
        --base-font-size: 1vw;
        --menu-font-size: 1.4vw;
        --content-menu-font-size: 0.9vw;
        --h1-font-size:1.2vw;
    }
}

/* [8] Альтернативно: от 1900px и выше */
@media (min-width: 1900px) {
    :root {
        --base-padding: 0.5em;
        --base-font-size: 0.9vw;
        --menu-font-size: 1.5vw;
        --content-menu-font-size: 0.9vw;
        --h1-font-size:1.3vw;
        --h2-font-size: 1.2vw
    }
}


/* Адаптация таблицы */
@media (max-width: 767.98px) {
    .data-table {
        padding: 0;
    }

    /* Скрываем заголовок */
    .table-header {
        display: none;
    }

    /* Каждая строка — карточка */
    .table-row {
        flex-direction: column;
        border: 2px solid #e5e7eb;
        background: #f9fafb;
        overflow: hidden;

        box-shadow: var(--base-box-shadow);
        border-radius: var(--base-border-radius);
        padding: var(--base-padding);
        margin: calc(var(--base-padding)*0.5);
        font-size: calc(var(--base-font-size)*2.5);
    }

    .cell {
        display: flex;
        justify-content: space-between;
        padding: calc(var(--base-padding)*0.5);
        border: none;
        border-bottom: 1px solid #e5e7eb;
    }

    .cell:last-child {
        border-bottom: none;
        justify-content: center;
        flex-wrap: wrap;
        gap: 6px;
    }

    /* Подпись перед значением */
    .cell::before {
        content: attr(data-label) ": ";
        font-weight: 600;
        color: #4b5563;
        min-width: 100px;
    }

    /* Убираем отступы у кнопок в карточке */
    .btn {
        padding: 6px 10px;
        font-size: 12px;
    }
}