/* ======================================================
   THEME VARIABLES (DEFAULT = LIGHT)
====================================================== */

:root, [data-bs-theme="light"] {
    --login-overlay-gradient: linear-gradient(
        to bottom right,
        hsla(0, 0%, 100%, 0.7),
        hsla(0, 10%, 80%, 0.75),
        hsla(0, 15%, 70%, 0.75)
    );

    --login-card-bg: rgba(255,255,255,0.35);
    --login-card-border: rgba(0,0,0,0.05);

    --login-input-bg: hsla(0, 10%, 100%, 0.2);
    --login-input-border: rgba(0,0,0,0.08);
    --login-input-text: #212529;
    --login-input-placeholder: rgba(0,0,0,0.45);

    --login-icon-color: rgba(0,0,0,0.6);

    --login-checkbox-border: rgba(0,0,0,0.3);
    --login-label-color: rgba(0,0,0,0.7);

    --login-button-bg: #224abe;
    --login-button-hover: #1b3e9e;

    --login-subtitle-color: rgba(0,0,0,0.6);
}


/* ======================================================
   DARK THEME OVERRIDE
====================================================== */

[data-bs-theme="dark"] {
    --login-overlay-gradient: linear-gradient(
        to bottom right,
        hsla(220, 60%, 12%, 0.85),
        hsla(220, 50%, 15%, 0.75),
        hsla(220, 40%, 20%, 0.7)
    );

    --login-card-bg: rgba(255,255,255,0.08);
    --login-card-border: rgba(255,255,255,0.18);

    --login-input-bg: hsla(0, 0%, 100%, 0.08);
    --login-input-border: hsla(0, 0%, 100%, 0.15);
    --login-input-text: #ffffff;
    --login-input-placeholder: rgba(255,255,255,0.6);

    --login-icon-color: rgba(255,255,255,0.7);

    --login-checkbox-border: rgba(255,255,255,0.4);
    --login-label-color: rgba(59, 56, 56, 0.75);

    --login-button-bg: hsl(220 60% 30%);
    --login-button-hover: hsl(220 60% 36%);

    --login-subtitle-color: rgba(255,255,255,0.7);
}


/* ======================================================
   BACKGROUND
====================================================== */

.img-login {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.custom-gradient {
    position: absolute;
    inset: 0;
    background-image: var(--login-overlay-gradient);
}


/* ======================================================
   GLASS CARD
====================================================== */

.glass-card {
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    background-color: var(--login-card-bg);
    border: 1px solid var(--login-card-border);
    transition: all 0.3s ease;
}


/* ======================================================
   FORM CONTROL
====================================================== */

.form-control-custom {
    /* height: 48px; */
    font-size: 0.95rem;
    border-radius: 0.5rem;
    transition: all 0.25s ease;

    color: var(--login-input-text) !important;
    background-color: var(--login-input-bg) !important;
    border: 1px solid var(--login-input-border) !important;
}

.form-control-custom:focus {
    box-shadow: 0 0 0 0.15rem rgba(78,115,223,.25);
}

.form-control-custom::placeholder {
    color: var(--login-input-placeholder) !important;
}


/* ======================================================
   CHECKBOX
====================================================== */

.custom-checkbox {
    background-color: transparent;
    border: 2px solid var(--login-input-border) !important;
    transition: all 0.2s ease;
}

.checkbox-label {
    color: var(--login-label-color);
}
[data-bs-theme="dark"] .custom-checkbox:not(:checked) {
    background-color: var(--login-input-bg) !important;
}


/* ======================================================
   BUTTON
====================================================== */

.btn-submit, html[data-bs-theme=dark] .btn-submit {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--login-button-bg);
    --bs-btn-border-color: var(--login-button-bg);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: color-mix(in lch, var(--login-button-bg) 70%, black);
    --bs-btn-hover-border-color: rgba(var(--bs-primary-rgb), .3);
    --bs-btn-focus-shadow-rgb: 95, 118, 200;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: rgba(var(--bs-primary-rgb), .3);
    --bs-btn-active-border-color: rgba(var(--bs-primary-rgb), .3);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--login-button-bg);
    --bs-btn-disabled-border-color: var(--login-button-bg);
}

.btn-submit:hover {
    background: var(--login-button-hover);
}


/* ======================================================
   SUBTITLE
====================================================== */

.sub-title {
    font-size: .85rem;
    color: var(--login-subtitle-color);
    transition: color 0.3s ease;
}