/* 1. Центрирование блока на странице */
#auth-tab {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh; /* Растягиваем на всю высоту окна */
    padding: 20px;
    margin: 0;
}

/* 2. Стили для формы и таблицы (базовые) */
#auth-form table {
    width: 100%; /* Таблица всегда на всю ширину карточки */
    border-collapse: collapse; /* Убираем зазоры в таблице */
}

/* 3. Стили для полей ввода и текста */
#auth-form input[type="text"],
#auth-form input[type="password"] {
    width: 100%; /* Поля ввода занимают всю ширину ячейки */
    padding: 12px;
    box-sizing: border-box; /* Чтобы padding не увеличивал ширину */
    font-size: 16px; /* Базовый размер шрифта для ПК */
    border: 1px solid #ccc;
    border-radius: 4px;
}

#auth-form td:first-child {
    font-weight: bold;
    padding-right: 15px; /* Отступ для подписей */
}

/* 4. Стили для кнопки */
#auth_button {
    width: 100%; /* Кнопка на всю ширину */
    padding: 12px;
    font-size: 16px;
    cursor: pointer;
}

/* 5. Адаптивность для телефонов (до 600px) */

@media (max-width: 600px) {
   body {
        font-size: 18px; 
        padding: 15px; /* Отступы по краям экрана, чтобы ничего не прилипало */
    }

    /* Увеличиваем базовый шрифт для всего блока */
    #auth-tab {
        font-size: 18px; 
        padding: 10px;
    }

    /* Делаем заголовки еще крупнее */
    .panel-header {
        font-size: 24px;
        padding: 15px;
    }

    /* Увеличиваем поля ввода и отступы */
    #auth-form input[type="text"],
    #auth-form input[type="password"] {
        font-size: 18px;
        padding: 14px;
        margin-top: 8px; /* Увеличенный отступ между строками */
    }

    /* Увеличиваем кнопку "Войти" */
    #auth_button {
        font-size: 20px;
        padding: 16px;
        margin-top: 20px;
    }

}