/* =====================================================
   AUDIA — LOGIN PAGE
   Light theme + Naturnova navy brand + Solar Orange CTA.
   Per DESIGN.md "Action (Orange)" rule, the login submit
   button uses --ds-color-cta-bg (the vibrant orange).
   ===================================================== */

.login-body {
    background: linear-gradient(
        135deg,
        var(--ds-color-surface) 0%,
        var(--ds-color-surface-container-low) 100%
    );
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin: 0;
    padding: 20px;
    position: relative;
}

.login-body::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 50%, rgba(20, 43, 87, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(254, 155, 79, 0.10) 0%, transparent 50%);
    pointer-events: none;
}

[data-theme="dark"] .login-body {
    background: linear-gradient(135deg, #0f1419 0%, #1a1f2e 100%);
}

[data-theme="dark"] .login-body::before {
    background:
        radial-gradient(circle at 20% 50%, rgba(177, 198, 251, 0.10) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(255, 183, 132, 0.10) 0%, transparent 50%);
}

.login-container {
    width: 100%;
    max-width: 420px;
    margin-top: 100px;
    position: relative;
    z-index: 1;
}

.login-header {
    text-align: center;
    margin-bottom: 40px;
}

.login-logo {
    width: 200px;
    margin-bottom: 20px;
    filter: drop-shadow(0 4px 12px rgba(20, 43, 87, 0.20));
}

/* Theme-aware brand logo: variant A for light (default), variant B for dark */
.login-logo--dark { display: none; }

[data-theme="dark"] .login-logo {
    filter: drop-shadow(0 4px 12px rgba(90, 143, 180, 0.30));
}
[data-theme="dark"] .login-logo--light { display: none; }
[data-theme="dark"] .login-logo--dark  { display: inline-block; }

.login-card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--ds-radius-lg);
    box-shadow: var(--ds-elevation-3);
}

[data-theme="dark"] .login-card {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.login-card .card-body {
    padding: 3rem;
}

.login-card .form-label {
    color: var(--text-color);
    font-family: var(--ds-font-family-base);
    font-size: var(--ds-typo-label-md-size);
    font-weight: var(--ds-typo-label-md-weight);
    line-height: var(--ds-typo-label-md-line-height);
    margin-bottom: 0.5rem;
    letter-spacing: 0.3px;
}

.login-card .input-group {
    border: 1px solid var(--border-color);
    border-radius: var(--ds-radius-default);
    background-color: var(--elevated-bg);
    transition: border-color var(--ds-motion-duration-fast) var(--ds-motion-ease-standard),
                box-shadow var(--ds-motion-duration-fast) var(--ds-motion-ease-standard);
}

.login-card .input-group:focus-within {
    border-color: var(--ds-color-primary);
    box-shadow: 0 0 0 var(--ds-focus-ring-width) rgba(20, 43, 87, 0.18);
}

[data-theme="dark"] .login-card .input-group:focus-within {
    box-shadow: 0 0 0 var(--ds-focus-ring-width) rgba(177, 198, 251, 0.22);
}

.login-card .input-group-text {
    background-color: transparent;
    border: none;
    color: var(--ds-color-primary);
    padding-left: 1rem;
}

.login-card .form-control {
    border: none;
    padding: 0.875rem 1rem;
    font-size: var(--ds-typo-body-md-size);
    background-color: transparent !important;
    color: var(--text-color) !important;
}

.login-card .form-control::placeholder {
    color: var(--text-muted) !important;
}

.login-card .form-control:focus {
    box-shadow: none !important;
    background-color: transparent !important;
    color: var(--text-color) !important;
}

.login-card .form-control:-webkit-autofill,
.login-card .form-control:-webkit-autofill:hover,
.login-card .form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text-color) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--elevated-bg) inset !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* Primary CTA — Solar Orange per DESIGN.md "Action" button */
.login-card .btn-login {
    background-color: var(--ds-color-cta-bg) !important;
    color: var(--ds-color-cta-text) !important;
    border: none;
    padding: 0.875rem 1.5rem;
    font-family: var(--ds-font-family-base);
    font-weight: 600;
    font-size: var(--ds-typo-body-md-size);
    width: 100%;
    border-radius: var(--ds-radius-default);
    box-shadow: var(--ds-elevation-1);
    letter-spacing: 0.3px;
    transition: background-color var(--ds-motion-duration-fast) var(--ds-motion-ease-standard),
                transform var(--ds-motion-duration-fast) var(--ds-motion-ease-standard),
                box-shadow var(--ds-motion-duration-fast) var(--ds-motion-ease-standard);
}

.login-card .btn-login:hover {
    background-color: var(--ds-color-cta-bg-hover) !important;
    transform: translateY(-1px);
    box-shadow: var(--ds-elevation-2);
}

.login-card .btn-login:active {
    background-color: var(--ds-color-cta-bg-pressed) !important;
    transform: translateY(0);
    box-shadow: var(--ds-elevation-1);
}

.login-card .btn-login:focus-visible {
    outline: var(--ds-focus-ring-width) var(--ds-focus-ring-style) var(--ds-focus-ring-color);
    outline-offset: var(--ds-focus-ring-offset);
}

.login-card .alert-danger {
    background-color: var(--ds-color-error-container);
    border: 1px solid var(--ds-color-error);
    color: var(--ds-color-on-error-container);
    border-radius: var(--ds-radius-default);
    font-size: var(--ds-typo-body-sm-size);
}

[data-theme="dark"] .login-card .alert-danger {
    background-color: rgba(255, 107, 107, 0.10);
    border-color: var(--ds-color-error);
    color: var(--ds-color-error);
}