/* ====== Brand tokens ====== */
:root {
    --brand: #344F96; /* primary brand */
    --brand-2: #4A5EB1; /* hover/secondary */
    --bg-1: #0e1530; /* dark gradient start */
    --bg-2: #1a275c; /* dark gradient end */
}

/* ====== Page base ====== */
html, body {
    height: 100%;
}

body {
    margin: 0;
    font-family: 'Inter', Arial, sans-serif;
}

.login-body {
    min-height: 100%;
    color: #111;
    background: radial-gradient(80% 100% at 80% 10%, rgba(74,94,177,.35), transparent 60%), linear-gradient(145deg, var(--bg-1), var(--bg-2));
}

/* ====== Layout (two columns → stacked on mobile) ====== */
.auth-wrapper {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    min-height: 100vh;
}

@media (max-width: 992px) {
    .auth-wrapper {
        grid-template-columns: 1fr;
    }
}

/* ====== Brand panel (left) ====== */
.brand-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 32px;
}

.brand-panel-inner {
    width: 100%;
    max-width: 560px;
    color: #fff;
}

.brand-logo {
    height: 185px;
    margin-bottom: 16px;
    filter: drop-shadow(0 6px 18px rgba(0,0,0,.25));
}

.brand-title {
    font-weight: 700;
    margin: 8px 0;
}

.brand-subtitle {
    color: #e7e9ff;
    opacity: .9;
    line-height: 1.6;
}

.brand-footer {
    margin-top: 28px;
    font-size: 12px;
    color: #dfe4ff;
    opacity: .8;
}

/* ====== Form panel (right) ====== */
.form-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 20px;
}

/* Glass card */
.glass-card {
    width: 100%;
    max-width: 460px;
    background: rgba(255,255,255,.9);
    backdrop-filter: blur(8px);
    border-radius: 16px;
    padding: 28px;
    border: 1px solid rgba(255,255,255,.35);
}

/* ====== Form controls / floating labels ====== */
.form-floating > .form-control {
    height: 3.1rem;
    padding: 1rem .75rem .5rem .75rem;
}

.form-floating > label {
    color: #6b7280;
}

.form-control:focus {
    border-color: var(--brand-2);
    box-shadow: 0 0 0 0.2rem rgba(52,79,150,.15);
}

/* Toggle password button */
.btn-toggle-pass {
    position: absolute;
    right: .5rem;
    top: .5rem;
    border: 0;
    background: transparent;
    color: #6b7280;
}

    .btn-toggle-pass:hover {
        color: #111;
    }

/* Links + buttons */
.link-accent {
    color: var(--brand);
    text-decoration: none;
}

    .link-accent:hover {
        color: var(--brand-2);
        text-decoration: underline;
    }

.btn-primary {
    background: var(--brand);
    border-color: var(--brand);
}

    .btn-primary:hover, .btn-primary:focus {
        background: var(--brand-2);
        border-color: var(--brand-2);
    }

/* ====== Toast variants (works with Bootstrap toasts) ====== */
.toast-success {
    background: #28a745 !important;
    color: #fff !important;
}

.toast-error {
    background: #dc3545 !important;
    color: #fff !important;
}

.toast-warning {
    background: #ffc107 !important;
    color: #212529 !important;
}

/* Optional: make toast icons align nicely */
.toast .toast-body i {
    vertical-align: -0.125em;
}