/* Authentication Page Styles */

.auth-body {
    font-family: 'Quicksand', sans-serif;
    position: relative;
    /* Fallback only — the live image lives in ::before so we can hue-rotate
       it independently of the auth card. */
    background: radial-gradient(ellipse at center, #0a3346 0%, #04101e 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 20px;
    color: #f4f6fb;
    overflow: hidden;
}

/* Cover — abstract oceanic wash (login-bg.jpg). A light navy veil keeps
   the glass card readable; ::after breathes through Seahorse blues/teals
   instead of the old nav-icon reds. */
.auth-body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -2;
    background:
        linear-gradient(180deg, rgba(8, 14, 32, 0.28), rgba(4, 10, 24, 0.42)),
        url('../img/login-bg.jpg?v=3') center/cover no-repeat;
}

/* Register `--c1` / `--c2` as <color> properties so @keyframes interpolates
   them smoothly. Without @property they'd be treated as plain strings and
   the animation would jump between colors instead of cross-fading. */
@property --c1 {
    syntax: '<color>';
    inherits: false;
    initial-value: #e74c3c;
}
@property --c2 {
    syntax: '<color>';
    inherits: false;
    initial-value: #ff6b6b;
}

.auth-body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background: linear-gradient(135deg, var(--c1), var(--c2));
    /* `overlay` at full opacity lets the underwater scene's structure show
       through (highlights stay bright, shadows stay dark) but the midtones
       are firmly painted with whichever nav-icon gradient the keyframe is
       currently on — so each phase reads as that icon's actual color. */
    mix-blend-mode: soft-light;
    opacity: 0.55;
    animation: auth-palette-cycle 60s linear infinite;
    will-change: --c1, --c2;
}

@keyframes auth-palette-cycle {
    0%   { --c1: #0984e3; --c2: #74b9ff; }   /* Seahorse blue */
    20%  { --c1: #0d9488; --c2: #6dd5fa; }   /* teal / foam */
    40%  { --c1: #21304d; --c2: #a29bfe; }   /* navy / periwinkle */
    60%  { --c1: #0a3346; --c2: #14b8a6; }   /* deep water */
    80%  { --c1: #4c6ef5; --c2: #74b9ff; }   /* dusk blue */
    100% { --c1: #0984e3; --c2: #74b9ff; }
}

/* Respect users who don't want motion — freeze the color wash on its
   starting hue. */
@media (prefers-reduced-motion: reduce) {
    .auth-body::after {
        animation: none;
    }
}

.auth-container {
    width: 100%;
    max-width: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Liquid glass card — same recipe as .center-dropdown / modal cards in
   app-modules.css, tuned for a dark underwater background: stronger blur
   so the busy scene reads through as soft light/dark blobs, slightly
   higher opacity so the form copy stays legible. */
.auth-card {
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 22px;
    backdrop-filter: blur(28px) saturate(1.3);
    -webkit-backdrop-filter: blur(28px) saturate(1.3);
    box-shadow:
        0 24px 56px rgba(2, 8, 24, 0.45),
        0 4px 14px rgba(2, 8, 24, 0.25),
        inset 1.5px 1.5px 1px 0 rgba(255, 255, 255, 0.55),
        inset -1px -1px 1px 0.5px rgba(255, 255, 255, 0.25),
        inset 0 0 0 1px rgba(255, 255, 255, 0.18);
    padding: 40px 35px;
    width: 100%;
    box-sizing: border-box;
}

.auth-header {
    text-align: center;
    margin-bottom: 30px;
}

.seahorse-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #f4f6fb;
    margin: 0;
    letter-spacing: -0.5px;
    text-shadow: 0 2px 12px rgba(2, 8, 24, 0.45);
}

.auth-tabs {
    display: flex;
    margin-bottom: 30px;
    border-radius: 12px;
    background: rgba(8, 14, 32, 0.25);
    padding: 4px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.auth-tab {
    flex: 1;
    background: transparent;
    border: none;
    padding: 12px 16px;
    border-radius: 8px;
    font-family: 'Quicksand', sans-serif;
    font-weight: 500;
    color: rgba(244, 246, 251, 0.75);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.4);
    font-size: 0.95rem;
}

.auth-tab:hover {
    color: #ffffff;
}

/* Liquid-glass active tab — same recipe as the auth-card itself, just
   denser so the label stays clearly readable on a frosted surface. */
.auth-tab-active {
    background: rgba(255, 255, 255, 0.40);
    color: #f4f6fb !important;
    border: 1px solid rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(18px) saturate(1.3);
    -webkit-backdrop-filter: blur(18px) saturate(1.3);
    text-shadow: 0 1px 4px rgba(2, 8, 24, 0.35);
    box-shadow:
        0 4px 14px rgba(2, 8, 24, 0.28),
        inset 1.5px 1.5px 1px 0 rgba(255, 255, 255, 0.55),
        inset -1px -1px 1px 0.5px rgba(255, 255, 255, 0.25),
        inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.auth-form {
    margin-bottom: 20px;
    /* Lock the form pane to one consistent height across tabs so the card
       doesn't pop between sizes when toggling between SSO and API Key.
       Sized to fit the API Key form's input + label + submit button. */
    min-height: 152px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-weight: 600;
    color: #f4f6fb;
    margin-bottom: 8px;
    font-size: 0.95rem;
    text-shadow: 0 1px 4px rgba(2, 8, 24, 0.35);
}

.form-group input {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 10px;
    font-size: 1rem;
    font-family: 'Quicksand', sans-serif;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.85);
    color: #1a2540;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.form-group input:focus {
    outline: none;
    border-color: rgba(120, 180, 255, 0.85);
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 0 0 3px rgba(120, 180, 255, 0.25);
}

.form-group input::placeholder {
    color: #8aa1c1;
}

/* Liquid-glass submit button. Translucent white surface so the cycling
   palette behind the card tints through, with `backdrop-filter` to keep
   the body text on the button legible on top of a busy underwater scene. */
.auth-submit-btn {
    width: 100%;
    background: linear-gradient(
        180deg,
        rgba(74, 144, 226, 0.82) 0%,
        rgba(9, 132, 227, 0.88) 100%
    );
    color: #f4f6fb;
    border: 1px solid rgba(160, 206, 255, 0.55);
    padding: 16px;
    border-radius: 14px;
    font-family: 'Quicksand', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.4);
    margin-top: 10px;
    backdrop-filter: blur(18px) saturate(1.3);
    -webkit-backdrop-filter: blur(18px) saturate(1.3);
    text-shadow: 0 1px 4px rgba(2, 8, 24, 0.35);
    box-shadow:
        0 6px 20px rgba(9, 132, 227, 0.38),
        inset 1.5px 1.5px 1px 0 rgba(255, 255, 255, 0.45),
        inset -1px -1px 1px 0.5px rgba(9, 80, 160, 0.25),
        inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.auth-submit-btn:hover {
    background: linear-gradient(
        180deg,
        rgba(90, 158, 235, 0.9) 0%,
        rgba(9, 132, 227, 0.96) 100%
    );
    transform: translateY(-2px);
    box-shadow:
        0 10px 28px rgba(9, 132, 227, 0.46),
        inset 2px 2px 1px 0 rgba(255, 255, 255, 0.55),
        inset -1px -1px 1px 1px rgba(9, 80, 160, 0.3),
        inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}

.auth-submit-btn:active {
    transform: translateY(0);
    background: linear-gradient(
        180deg,
        rgba(74, 144, 226, 0.78) 0%,
        rgba(9, 112, 200, 0.86) 100%
    );
}

.auth-submit-btn:disabled {
    background: rgba(9, 132, 227, 0.32);
    color: rgba(244, 246, 251, 0.6);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.auth-error {
    background: #fee;
    border: 1px solid #fcc;
    border-radius: 8px;
    padding: 12px 16px;
    margin-top: 15px;
}

.auth-error p {
    color: #d32f2f;
    margin: 0;
    font-size: 0.9rem;
    font-weight: 500;
}

.auth-success {
    background: #eff7ef;
    border: 1px solid #c8e6c9;
    border-radius: 8px;
    padding: 12px 16px;
    margin-top: 15px;
}

.auth-success p {
    color: #2e7d32;
    margin: 0;
    font-size: 0.9rem;
    font-weight: 500;
}

.auth-message {
    color: rgba(244, 246, 251, 0.85);
    font-style: italic;
    text-align: center;
    line-height: 1.5;
    margin: 20px 0;
    text-shadow: 0 1px 4px rgba(2, 8, 24, 0.35);
}

.auth-message--muted {
    margin-top: 14px;
    font-size: 0.85rem;
    font-style: normal;
}

/* Microsoft brand button — same liquid-glass surface as the default
   submit button (so the four MS tiles read as the brand cue, not the
   button background). Inherits the frosted bg + blur from .auth-submit-btn
   and just keeps the inline-flex layout for the logo + label. */
.auth-submit-btn--microsoft {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.ms-logo {
    display: inline-grid;
    grid-template-columns: 9px 9px;
    grid-template-rows: 9px 9px;
    gap: 2px;
    width: 20px;
    height: 20px;
}

.ms-tile { display: block; width: 100%; height: 100%; }
.ms-tile--r { background: #f25022; }
.ms-tile--g { background: #7fba00; }
.ms-tile--b { background: #00a4ef; }
.ms-tile--y { background: #ffb900; }

.auth-door-link {
    text-align: center;
    margin: 22px 0 0;
}

.auth-door-link a {
    color: rgba(244, 246, 251, 0.85);
    font-weight: 600;
    text-decoration: none;
}

.auth-door-link a:hover {
    color: #ffffff;
}

/* Loading state */
.auth-submit-btn.loading {
    position: relative;
    color: transparent;
}

.auth-submit-btn.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    border: 2px solid transparent;
    border-top: 2px solid white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Responsive design */
@media (max-width: 480px) {
    .auth-container {
        padding: 15px;
    }
    
    .auth-card {
        padding: 30px 25px;
    }
    
    .seahorse-title {
        font-size: 2rem;
    }
    
    .auth-tabs {
        flex-direction: column;
        gap: 4px;
    }
    
    .auth-tab {
        text-align: center;
    }
}