/* =========================================================
   YourDrive Login v2
   Strong layout reset + dashboard-like dark UI
   ========================================================= */

:root {
    --yd-login-bg: #070b12;
    --yd-login-surface: #111827;
    --yd-login-surface-2: #172033;
    --yd-login-border: rgba(96, 165, 250, .22);
    --yd-login-text: #f8fafc;
    --yd-login-muted: rgba(203, 213, 225, .78);
    --yd-login-primary: #38bdf8;
}

/* Strong reset because old login styles used body/container positioning */
html {
    width: 100%;
    min-height: 100%;
}

body,
body.login-page,
body.yd-login-page {
    width: 100%;
    min-height: 100vh;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 22% 12%, rgba(56, 189, 248, .15), transparent 31%),
        radial-gradient(circle at 78% 85%, rgba(37, 99, 235, .12), transparent 34%),
        linear-gradient(135deg, #050816, #0b1020 52%, #101827) !important;
    color: var(--yd-login-text) !important;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

/* Center everything that looks like the old login wrapper */
body.login-page,
body.yd-login-page,
body:has(.login-card),
body:has(.login-box),
body:has(.auth-card),
body:has(.login-container) {
    display: grid !important;
    place-items: center !important;
}

/* Fallback if :has is not available: old wrappers get centered themselves */
.login-page,
.yd-login-page {
    display: grid !important;
    place-items: center !important;
}

.login-card,
.login-box,
.login-container,
.auth-card,
.login-wrapper,
.login-panel {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    float: none !important;

    width: min(460px, calc(100vw - 40px)) !important;
    max-width: 460px !important;
    min-height: auto !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;

    background:
        radial-gradient(circle at 14% 0%, rgba(56, 189, 248, .08), transparent 30%),
        linear-gradient(180deg, rgba(31, 41, 55, .96), rgba(15, 23, 42, .97)) !important;
    border: 1px solid rgba(148, 163, 184, .22) !important;
    border-radius: 28px !important;
    padding: 36px !important;
    box-shadow: 0 30px 90px rgba(0,0,0,.45) !important;
    color: var(--yd-login-text) !important;
    text-align: left !important;
}

/* Logo */
.login-card img,
.login-box img,
.auth-card img,
.login-container img,
.login-logo img,
.logo img {
    display: block !important;
    max-width: 210px !important;
    max-height: 76px !important;
    width: auto !important;
    height: auto !important;
    margin: 0 auto 22px !important;
    object-fit: contain !important;
}

/* Text */
.login-card h1,
.login-box h1,
.login-container h1,
.auth-card h1 {
    margin: 0 0 10px !important;
    color: var(--yd-login-text) !important;
    font-size: 36px !important;
    line-height: 1.05 !important;
    letter-spacing: -0.055em !important;
    font-weight: 850 !important;
    text-align: center !important;
}

.login-card p,
.login-box p,
.login-container p,
.auth-card p,
.login-subtitle,
.login-card .subtitle {
    margin: 0 0 24px !important;
    color: var(--yd-login-muted) !important;
    font-size: 16px !important;
    line-height: 1.45 !important;
    text-align: center !important;
}

/* The inactivity text was inheriting old serif/bold styles */
.login-card .notice,
.login-box .notice,
.login-container .notice,
.login-card .message,
.login-box .message,
.login-container .message,
.login-card strong,
.login-box strong,
.login-container strong {
    color: rgba(248, 250, 252, .88) !important;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-weight: 650 !important;
}

/* Form */
.login-card form,
.login-box form,
.login-container form,
.auth-card form {
    display: block !important;
    margin: 0 !important;
    width: 100% !important;
}

.login-card input,
.login-box input,
.login-container input,
.auth-card input,
.login-card input[type="text"],
.login-card input[type="password"],
.login-card input[type="email"] {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
    margin: 0 0 14px !important;
    padding: 15px 17px !important;

    border-radius: 17px !important;
    border: 1px solid rgba(96, 165, 250, .20) !important;
    background: rgba(15, 23, 42, .78) !important;
    color: var(--yd-login-text) !important;

    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
    outline: none !important;
    box-shadow: none !important;
}

.login-card input::placeholder,
.login-box input::placeholder,
.login-container input::placeholder,
.auth-card input::placeholder {
    color: rgba(203, 213, 225, .52) !important;
}

.login-card input:focus,
.login-box input:focus,
.login-container input:focus,
.auth-card input:focus {
    border-color: rgba(56, 189, 248, .62) !important;
    box-shadow: 0 0 0 4px rgba(56, 189, 248, .10) !important;
}

.login-card button,
.login-box button,
.login-container button,
.auth-card button,
.login-card input[type="submit"],
.login-box input[type="submit"],
.login-container input[type="submit"] {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 6px 0 0 !important;
    padding: 15px 18px !important;

    border-radius: 17px !important;
    border: 1px solid rgba(56, 189, 248, .32) !important;
    background: linear-gradient(135deg, rgba(56, 189, 248, .28), rgba(37, 99, 235, .26)) !important;
    color: var(--yd-login-text) !important;

    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    cursor: pointer !important;
    box-shadow: none !important;
}

.login-card button:hover,
.login-box button:hover,
.login-container button:hover,
.auth-card button:hover,
.login-card input[type="submit"]:hover {
    background: linear-gradient(135deg, rgba(56, 189, 248, .38), rgba(37, 99, 235, .34)) !important;
}

.login-links,
.login-footer,
.login-card .links,
.login-box .links,
.login-container .links {
    display: flex !important;
    justify-content: space-between !important;
    gap: 16px !important;
    margin-top: 22px !important;
    color: var(--yd-login-muted) !important;
    font-size: 14px !important;
}

.login-card a,
.login-box a,
.login-container a,
.auth-card a {
    color: rgba(248, 250, 252, .76) !important;
    text-decoration: none !important;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

.login-card a:hover,
.login-box a:hover,
.login-container a:hover,
.auth-card a:hover {
    color: var(--yd-login-primary) !important;
}

.login-error,
.yd-login-error,
.error,
.alert-error {
    background: rgba(239, 68, 68, .16) !important;
    border: 1px solid rgba(248, 113, 113, .30) !important;
    color: #fecaca !important;
    border-radius: 15px !important;
    padding: 12px 14px !important;
    margin: 0 0 16px !important;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

@media (max-width: 560px) {
    body,
    body.login-page,
    body.yd-login-page {
        min-height: 100svh;
        padding: 24px 0 !important;
        align-items: start !important;
    }

    .login-card,
    .login-box,
    .login-container,
    .auth-card,
    .login-wrapper,
    .login-panel {
        width: min(420px, calc(100vw - 28px)) !important;
        padding: 26px !important;
        border-radius: 24px !important;
    }

    .login-links,
    .login-footer,
    .login-card .links,
    .login-box .links,
    .login-container .links {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }
}