/* =====================================================
   Login page — порт стилей из PayScrowing UserLogin.razor.
   Light: пастельный градиент + полупрозрачная стеклянная карточка.
   Dark:  GitHub-dark градиент + тёмная карточка.
   ===================================================== */

.login-bg {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f0eeff 0%, #e8f0ff 50%, #f5f0ff 100%);
    padding: 20px;
}

html.app-dark .login-bg {
    background: linear-gradient(135deg, #010409 0%, #0d1117 50%, #090d14 100%);
}

/* ── Карточка ───────────────────────────────────────── */
.login-card {
    width: 100%;
    max-width: 400px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(200, 190, 240, 0.5);
    border-radius: 20px;
    padding: 40px 36px 36px;
    box-shadow: 0 8px 40px rgba(80, 50, 160, 0.10), 0 2px 8px rgba(0,0,0,0.06);
    animation: login-appear 0.35s cubic-bezier(.22,.68,0,1.2);
}

html.app-dark .login-card {
    background: rgba(22, 27, 34, 0.92);
    border-color: #30363d;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0,0,0,0.3);
}

@keyframes login-appear {
    from { opacity: 0; transform: translateY(24px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* ── Заголовок ──────────────────────────────────────── */
.login-logo-wrap {
    text-align: center;
    margin-bottom: 4px;
}

.login-logo-img {
    width: 200px;
    height: auto;
    max-width: 100%;
}

.login-subtitle {
    text-align: center;
    font-size: 0.85rem;
    color: #7a7a9a;
    margin: 0 0 28px;
    font-weight: 400;
}

html.app-dark .login-subtitle {
    color: #8b949e;
}

/* ── Поля ───────────────────────────────────────────── */
.login-field {
    margin-bottom: 18px;
}

.login-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: #4a4470;
    margin-bottom: 6px;
    letter-spacing: 0.03em;
}

html.app-dark .login-label {
    color: #8b949e;
}

.login-textbox,
.login-field .dxbl-textbox {
    width: 100%;
}

.login-field .dxbl-textbox .dxbl-edit-field-root,
.login-field .dxbl-textbox {
    border-radius: 10px !important;
    border: 1px solid #d0cce8 !important;
    background: #ffffff !important;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.login-field .dxbl-textbox .dxbl-edit-field {
    color: #2e2a45 !important;
    background: transparent !important;
    font-size: 0.9rem !important;
}

.login-field .dxbl-textbox:focus-within .dxbl-edit-field-root,
.login-field .dxbl-textbox:focus-within {
    border-color: #7c6bc4 !important;
    box-shadow: 0 0 0 3px rgba(124, 107, 196, 0.15) !important;
}

/* Тёмная тема — поля */
html.app-dark .login-field .dxbl-textbox .dxbl-edit-field-root,
html.app-dark .login-field .dxbl-textbox {
    border-color: #30363d !important;
    background: #0d1117 !important;
}

html.app-dark .login-field .dxbl-textbox .dxbl-edit-field {
    color: #c9d1d9 !important;
}

html.app-dark .login-field .dxbl-textbox .dxbl-placeholder {
    color: #484f58 !important;
}

html.app-dark .login-field .dxbl-textbox:focus-within .dxbl-edit-field-root,
html.app-dark .login-field .dxbl-textbox:focus-within {
    border-color: #58a6ff !important;
    box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.12) !important;
}

/* ── Кнопка входа ───────────────────────────────────── */
.login-btn {
    width: 100%;
    padding: 11px 0;
    border: none;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 6px;
    transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
    background: linear-gradient(135deg, #6b52c8 0%, #4e3b8c 100%);
    color: #ffffff;
    box-shadow: 0 4px 16px rgba(78, 59, 140, 0.35);
    letter-spacing: 0.03em;
}

.login-btn:hover {
    background: linear-gradient(135deg, #7c62d8 0%, #5e4a9e 100%);
    box-shadow: 0 6px 20px rgba(78, 59, 140, 0.45);
    transform: translateY(-1px);
}

.login-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(78, 59, 140, 0.3);
}

html.app-dark .login-btn {
    background: linear-gradient(135deg, #1f6feb 0%, #1158a8 100%);
    box-shadow: 0 4px 16px rgba(31, 111, 235, 0.30);
}

html.app-dark .login-btn:hover {
    background: linear-gradient(135deg, #388bfd 0%, #1f6feb 100%);
    box-shadow: 0 6px 20px rgba(31, 111, 235, 0.40);
}

/* ── Футер карточки ─────────────────────────────────── */
.login-footer {
    text-align: center;
    margin-top: 18px;
}

.login-hint {
    font-size: 0.82rem;
    color: #7a7a9a;
    margin-bottom: 6px;
}

html.app-dark .login-hint {
    color: #8b949e;
}

.login-request {
    background: none;
    border: none;
    color: #6b52c8;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 6px;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.login-request:hover {
    color: #4e3b8c;
    text-decoration: underline;
}

html.app-dark .login-request {
    color: #58a6ff;
}

html.app-dark .login-request:hover {
    color: #79b8ff;
}

/* ── Валидация ──────────────────────────────────────── */
.login-validation {
    display: block;
    font-size: 0.75rem;
    color: #cf222e;
    margin-top: 4px;
}

html.app-dark .login-validation {
    color: #f78166;
}

/* ── Адаптив ────────────────────────────────────────── */
@media (max-width: 480px) {
    .login-card {
        padding: 28px 20px 24px;
    }
    .login-logo-img {
        width: 160px;
    }
}

/* ── Заглушаем main-content padding на странице логина:
      сама login-bg уже центрирует всё. ─────────────── */
.main-content:has(.login-bg) {
    padding: 0;
    background: transparent;
    /* Шапки на логине нет — забираем всю высоту вьюпорта (иначе остаётся
       зарезервированный под топбар зазор calc(100vh - topbar)). */
    max-height: 100vh;
    max-height: 100dvh;
}