/* ===========================================
   ПОЛЯ ФОРМЫ
   =========================================== */

/* Группа: метка + поле ввода + подчёркивание */
.form-group {
    /* Отступ между группами */
    margin-bottom: 22px;
    /* Для абсолютного позиционирования input-line */
    position: relative;
}

/* Метка поля (> ИДЕНТИФИКАТОР, > КЛЮЧ ДОСТУПА) */
.form-group label {
    /* Блочный — занимает всю строку */
    display: block;
    /* Мелкий шрифт */
    font-size: 13px;
    /* Зелёный цвет метки */
    color: var(--neon-green);
    /* Отступ от поля ввода */
    margin-bottom: 6px;
    /* Разреженные буквы */
    letter-spacing: 2px;
    /* Все заглавные */
    text-transform: uppercase;
    /* Футуристичный шрифт */
    font-family: 'Orbitron', sans-serif;
}

/* Поле ввода текста и пароля */
.form-group input {
    /* На всю ширину группы */
    width: 100%;
    /* Внутренние отступы */
    padding: 12px 14px;
    /* Почти прозрачный зелёный фон */
    background: rgba(0, 255, 136, 0.03);
    /* Тонкая зелёная рамка */
    border: 1px solid rgba(0, 255, 136, 0.25);
    /* Минимальное скругление */
    border-radius: 2px;
    /* Цвет вводимого текста */
    color: var(--text-main);
    /* Моноширинный шрифт */
    font-family: 'Share Tech Mono', monospace;
    /* Размер шрифта */
    font-size: 18px;
    /* Плавные переходы при фокусе */
    transition: all 0.3s;
    /* Убираем стандартный outline */
    outline: none;
}

/* Текст-подсказка в пустом поле */
.form-group input::placeholder {
    /* Приглушённый цвет */
    color: var(--text-dim);
    /* Курсив для отличия от реального ввода */
    font-style: italic;
}

/* Состояние поля при фокусе (курсор внутри) */
.form-group input:focus {
    /* Яркая зелёная рамка */
    border-color: var(--neon-green);
    /* Чуть более заметный фон */
    background: rgba(0, 255, 136, 0.06);
    /* Внешнее и внутреннее свечение */
    box-shadow:
        0 0 15px rgba(0, 255, 136, 0.15),
        inset 0 0 15px rgba(0, 255, 136, 0.03);
}

/* Линия подчёркивания под полем ввода */
.input-line {
    /* Абсолютное позиционирование внизу группы */
    position: absolute;
    bottom: 0;
    /* Начинается от центра */
    left: 50%;
    /* Начальная ширина — 0 (невидима) */
    width: 0;
    /* Высота линии */
    height: 2px;
    /* Зелёный цвет линии */
    background: var(--neon-green);
    /* Плавное расширение */
    transition: all 0.4s;
    /* Центрирование от середины */
    transform: translateX(-50%);
    /* Свечение линии */
    box-shadow: 0 0 10px var(--neon-green);
}

/* При фокусе на поле — линия расширяется на всю ширину */
.form-group input:focus ~ .input-line {
    /* Полная ширина */
    width: 100%;
}

/* Красная подсветка поля при ошибке */
.form-group input.input-error {
    /* Красная рамка */
    border-color: var(--neon-red);
    /* Красноватый фон */
    background: rgba(255, 0, 60, 0.05);
    /* Анимация тряски */
    animation: inputShake 0.5s;
}

/* Анимация тряски поля влево-вправо при ошибке */
@keyframes inputShake {
    /* Начало и конец — на месте */
    0%, 100% { transform: translateX(0); }
    /* Сдвиги влево-вправо с затуханием */
    20% { transform: translateX(-8px); }
    40% { transform: translateX(8px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

/* ===========================================
   КНОПКА ВХОДА
   =========================================== */

/* Основная кнопка «ИНИЦИИРОВАТЬ ВХОД» */
.btn-login {
    /* На всю ширину карточки */
    width: 100%;
    /* Внутренние отступы */
    padding: 14px;
    /* Градиентный фон из основных зелёных */
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    /* Неоновый зелёный текст */
    color: var(--neon-green);
    /* Яркая зелёная рамка */
    border: 1px solid var(--neon-green);
    /* Минимальное скругление */
    border-radius: 2px;
    /* Футуристичный шрифт */
    font-family: 'Orbitron', sans-serif;
    /* Размер шрифта */
    font-size: 16px;
    /* Жирное начертание */
    font-weight: 700;
    /* Разреженные буквы */
    letter-spacing: 3px;
    /* Курсор-указатель при наведении */
    cursor: pointer;
    /* Для бегущего света (псевдоэлемент) */
    position: relative;
    /* Скрываем свет за пределами кнопки */
    overflow: hidden;
    /* Плавные переходы */
    transition: all 0.3s;
    /* Все буквы заглавные */
    text-transform: uppercase;
    /* Отступ от последнего поля */
    margin-top: 10px;
}

/* Кнопка при наведении мыши */
.btn-login:hover {
    /* Инвертируем: зелёный фон, тёмный текст */
    background: var(--neon-green);
    color: var(--bg-dark);
    /* Интенсивное свечение */
    box-shadow:
        0 0 30px rgba(0, 255, 136, 0.4),
        0 0 60px rgba(0, 255, 136, 0.2);
    /* Лёгкий подъём */
    transform: translateY(-2px);
}

/* Кнопка при нажатии */
.btn-login:active {
    /* Возврат на место */
    transform: translateY(0);
}

/* Бегущий световой блик внутри кнопки */
.btn-login::before {
    /* Пустой контент */
    content: '';
    /* Абсолютно позиционирован внутри кнопки */
    position: absolute;
    top: 0;
    /* Начинает за левым краем */
    left: -100%;
    /* На всю кнопку */
    width: 100%;
    height: 100%;
    /* Полупрозрачный блик */
    background: linear-gradient(
        90deg,
        transparent,
        rgba(0, 255, 136, 0.15),
        transparent
    );
    /* Бесконечная анимация пробега */
    animation: sweep 3s linear infinite;
}

/* Заблокированная кнопка (во время загрузки) */
.btn-login:disabled {
    /* Полупрозрачная */
    opacity: 0.4;
    /* Курсор «запрещено» */
    cursor: not-allowed;
    /* Без подъёма */
    transform: none;
}

/* Заблокированная кнопка при наведении — без эффектов */
.btn-login:disabled:hover {
    /* Остаётся градиент */
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    /* Остаётся зелёный текст */
    color: var(--neon-green);
    /* Без свечения */
    box-shadow: none;
}

/* ===========================================
   АВАРИЙНЫЙ ВХОД АДМИНИСТРАТОРА
   Блок скрыт по умолчанию и показывается только
   после отказа 503 (перегруженный сервер).
   =========================================== */

/* Контейнер флажка аварийного входа */
.login-override {
    /* По умолчанию скрыт */
    display: none;
    /* Выравнивание флажка и подписи по центру */
    align-items: center;
    /* Отступ до кнопки входа */
    margin-bottom: 14px;
    /* Приглушённый цвет подписи */
    color: var(--text-dim);
    /* Мелкий шрифт */
    font-size: 12px;
    /* Разреженные буквы */
    letter-spacing: 0.5px;
}

/* Видимый блок (после отказа 503) */
.login-override.visible {
    /* Показываем как строку */
    display: flex;
}

/* Флажок обхода: небольшой квадрат в стиле интерфейса */
.login-override input[type="checkbox"] {
    /* Фиксированный размер */
    width: 14px;
    /* Фиксированный размер */
    height: 14px;
    /* Отступ до подписи */
    margin: 0 8px 0 0;
    /* Отключаем системный стиль — рисуем сами */
    appearance: none;
    -webkit-appearance: none;
    /* Полупрозрачная рамка */
    border: 1px solid rgba(0, 255, 136, 0.35);
    /* Почти прозрачный фон */
    background: rgba(0, 255, 136, 0.03);
    /* Курсор указателя */
    cursor: pointer;
}

/* Отмеченный флажок — с галочкой */
.login-override input[type="checkbox"]:checked {
    /* Зелёная рамка выбранного состояния */
    border-color: var(--neon-green);
    /* Слабое свечение */
    box-shadow: 0 0 6px rgba(0, 255, 136, 0.35);
}

/* Подпись флажка */
.login-override label {
    /* Разрешаем перенос строки */
    cursor: pointer;
    /* Наследуем приглушённый цвет */
    color: inherit;
    /* Мелкий шрифт */
    font-size: inherit;
    /* Без прописных букв */
    text-transform: none;
    /* Без разрежённых букв метки поля */
    letter-spacing: inherit;
}