/* public/css/login.css - Версия для новой HTML-структуры */

/* 1. Базовые стили */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body {
    display: flex;
    flex-direction: column; 
    justify-content: center; /* Reinstated for vertical centering */
    align-items: center;
    background-color: #1a1a1a;
    color: #e0e0e0;
    padding: 15px; /* Global padding for body */
    /* padding-top: 15vh; */ /* Removed, justify-content will handle centering */
    min-height: 100vh; 
    box-sizing: border-box;
}

.main-content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center children (login-container, error-message) horizontally */
    width: 100%; /* Take full width to allow children to define their own */
}

/* 2. Контейнер формы (.login-container) - темно-серая рамка */
.login-container {
    background-color: #2c2c2c;
    padding: 20px; /* ОДИНАКОВЫЙ отступ со всех сторон для рамки */
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
}

/* 3. Сама форма (#loginForm) */
#loginForm {
    display: flex;
    flex-direction: column; /* .form-row и .error-message будут в столбик */
    align-items: stretch;
    box-sizing: border-box;
}

/* 4. Новый контейнер для ряда: поле ввода + кнопка (.form-row) */
.form-row {
    display: flex; /* Располагает .input-wrapper и кнопку в ряд */
    align-items: stretch; /* Растягивает .input-wrapper и кнопку по высоте друг друга */
    width: 100%;
    box-sizing: border-box;
}

/* 5. Обертка ТОЛЬКО для поля ввода и его метки (.input-wrapper) */
.input-wrapper {
    flex-grow: 1; /* Занимает все доступное место слева от кнопки */
    background-color: #3a3a3a;
    /* Убираем правый border-radius, чтобы стыковаться с кнопкой */
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    padding: 10px 0px 10px 10px; /* Отступы ВНУТРИ .input-wrapper, справа 0 - overridden in media query */
    box-sizing: border-box;
    display: flex; /* Для центрирования input и label, если нужно */
    align-items: center;
    position: relative;
}

/* 6. Поле ввода пароля */
.input-wrapper input[type="password"] {
    width: 100%; /* Занимает всю ширину .input-wrapper */
    padding: 12px 15px; /* overridden in media query */
    border: none;
    background-color: transparent;
    color: #e0e0e0;
    font-size: 18px; /* overridden in media query */
    outline: none;
    box-sizing: border-box;
}

/* 7. Метка для поля ввода ("Пароль") */
.input-wrapper label {
    position: absolute;
    left: 25px; /* (padding-left .input-wrapper) + (padding-left input) - overridden in media query */
    top: 50%;
    transform: translateY(-50%);
    color: #aaa;
    pointer-events: none;
    transition: all 0.2s ease-out;
    font-size: 18px; /* overridden in media query */
}

.input-wrapper input[type="password"]:focus + label,
.input-wrapper input[type="password"]:not(:placeholder-shown) + label {
    top: 12px; /* overridden in media query */
    left: 15px; /* overridden in media query */
    font-size: 12px; /* overridden in media query */
    color: #00aaff;
    padding: 0 5px;
    background-color: #2c2c2c; /* Фон метки = фон .login-container */
    border-radius: 3px;
}

/* 8. Кнопка отправки (теперь сосед .input-wrapper) */
#submitButton {
    flex-shrink: 0;
    background-color: #595959;
    border: none;
    /* Убираем левый border-radius, чтобы стыковаться с .input-wrapper */
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    padding: 0;
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    /* margin-left УДАЛЕН, так как нет отступа */
}

#submitButton:hover:not(:disabled) {
    background-color: #75767e;
}

#submitButton:disabled {
    background-color: #555;
    cursor: not-allowed;
}

#submitButton .arrow-icon {
    width: 24px; /* overridden in media query */
    height: 24px; /* overridden in media query */
    stroke: white;
}

/* 9. Спиннер и таймер (без изменений в базовых стилях) */
.spinner { border: 4px solid rgba(255,255,255,0.3); border-radius: 50%; border-top-color: #fff; width: 24px; height: 24px; animation: spin 1s linear infinite; display: none; } /* overridden in media query */
.countdown { position: absolute; font-size: 12px; color: white; font-weight: bold; display: none; line-height: 1; } /* overridden in media query */
@keyframes spin { to { transform: rotate(360deg); } }

/* 10. Сообщение об ошибке - СКОРРЕКТИРОВАНО */
.error-message {
    text-align: center;
    color: #ff4d4d;
    font-size: 14px;
    min-height: 20px; /* Reserve space for one line of text */
    box-sizing: border-box;
    background-color: transparent; 
    border-radius: 6px; 
    width: 90vw; /* Default width, similar to loginForm on mobile */
    max-width: calc(500px + 40px); /* Max width similar to desktop loginForm */
    /* margin-top and padding removed from base, applied when not empty */
}

.error-message:not(:empty) {
    margin-top: 15px; 
    padding: 10px;
}

/* 11. Адаптивность: Десктоп (481px и шире) */
@media (min-width: 481px) {
    .login-container {
        /* Original H_lc = (70vw + 40px) / 4.5. New width 35vw. */
        /* H_lc = (35vw_form_width + 40px_container_padding) / 4.5 */
        height: calc((35vw + 40px) / 4.5); /* Approx 7.7778vw + 8.8889px */
        /* Original --form-row-dynamic-height = H_lc - 40px container padding */
        /* New --form-row-dynamic-height: derived from new H_lc */
        --form-row-dynamic-height: calc(((35vw + 40px) / 4.5) - 40px); /* Approx 7.7778vw - 31.1111px */
    }

    #loginForm {
        width: 35vw; /* Halved from 70vw */
    }

    .form-row,
    .input-wrapper,
    #submitButton {
        height: var(--form-row-dynamic-height);
    }

    #submitButton {
         width: var(--form-row-dynamic-height); /* To keep it square */
    }
    
    .input-wrapper {
        padding: 0 0 0 calc(var(--form-row-dynamic-height) * 0.0555); /* ~10px for 180px, scales with height */
    }

    .input-wrapper input[type="password"] {
        font-size: calc(var(--form-row-dynamic-height) * 0.6); /* Input text 60% of wrapper height */
        height: 100%; 
        line-height: var(--form-row-dynamic-height); 
        padding: 0 calc(var(--form-row-dynamic-height) * 0.1388); /* original 0 25px for 180px */
    }

    .input-wrapper label { /* Default state of the label */
        font-size: calc(var(--form-row-dynamic-height) * 0.25); /* Label font size 25% of wrapper height */
        left: calc(var(--form-row-dynamic-height) * 0.1944); /* Aligns with start of input text */
        /* top: 50%; transform: translateY(-50%) remains from base styles for vertical centering */
    }

    .input-wrapper input[type="password"]:focus + label,
    .input-wrapper input[type="password"]:not(:placeholder-shown) + label {
        /* Scaled focused label: original 16px for 180px height, original default label was 24px. Ratio 16/24 = 0.666... */
        /* New default label font-size is 0.25 * H. So focused is 0.25 * H * 0.666... = 0.1665 * H */
        font-size: calc(var(--form-row-dynamic-height) * 0.1665);
        top: calc(var(--form-row-dynamic-height) * 0.0555); /* original 10px for 180px */
        left: calc(var(--form-row-dynamic-height) * 0.1111); /* original 20px for 180px */
    }

    #submitButton .arrow-icon {
        width: calc(var(--form-row-dynamic-height) * 0.2666); 
        height: calc(var(--form-row-dynamic-height) * 0.2666); 
    }

    .spinner { 
        width: calc(var(--form-row-dynamic-height) * 0.2666); 
        height: calc(var(--form-row-dynamic-height) * 0.2666); 
        border-width: calc(var(--form-row-dynamic-height) * 0.0277); 
    }

    .countdown { 
        font-size: calc(var(--form-row-dynamic-height) * 0.1111); 
    }

    .error-message {
        width: 35vw; /* Match new desktop loginForm width */
        /* min-height is inherited. margin-top and padding will be applied by :not(:empty) */
        /* Specific max-width is already on the base .error-message */
    }
}

/* 12. Адаптивность: Мобильные (480px и уже) */
@media (max-width: 480px) {
    .login-container {
        padding: 15px;
        /* height rule from desktop does not apply here */
    }
    #loginForm {
        width: 90vw;
    }
    .form-row, 
    .input-wrapper,
    #submitButton {
        height: 60px; /* As per rules_login.md */
    }
    #submitButton {
        width: 60px; /* Make it square */
    }
    .input-wrapper {
        padding: 0 0 0 10px; /* Adjusted padding for consistency */
    }
    .input-wrapper input[type="password"] {
        font-size: 36px; /* 60% of 60px */
        height: 100%; /* Fill the .input-wrapper height */
        line-height: 60px; /* Vertically center text/cursor */
        padding: 0 15px; /* Adjusted padding */
    }
    .input-wrapper label { 
        font-size: 16px; /* Keep label font size reasonable */
        left: 25px; /* (10px wrapper padding-left) + (15px input padding-left) */
    }
    .input-wrapper input[type="password"]:focus + label,
    .input-wrapper input[type="password"]:not(:placeholder-shown) + label {
        top: 5px; /* Adjusted for new input field layout */
        left: 10px; 
        font-size: 10px; 
    }
    #submitButton .arrow-icon {
        width: 20px; 
        height: 20px; 
    }
    .spinner { width: 20px; height: 20px; border-width: 3px; }
    .countdown { font-size: 10px; }
    
    .error-message {
        width: 90vw; /* Match mobile loginForm width */
        /* min-height is inherited. margin-top and padding will be applied by :not(:empty) */
    }

    .error-message:not(:empty) {
        margin-top: 10px; /* Smaller margin for mobile */
        padding: 8px;    /* Smaller padding for mobile */
    }
}