/* ============================================================
   LOGIN PAGE
   ============================================================ */
.auth-shell {
    min-height: 100vh;
}

/* ---- Brand panel (left, desktop only) ---- */
.auth-panel {
    position: relative;
    overflow: hidden;
    color: #fff;
    transition: background 0.3s ease;
}

[data-bs-theme="light"] .auth-panel {
    background: linear-gradient(135deg, #1d6cf0 0%, #7c3aed 100%);
}
[data-bs-theme="dark"] .auth-panel {
    background: linear-gradient(135deg, #123a8f 0%, #4c1d95 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.auth-panel::before,
.auth-panel::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.10);
    pointer-events: none;
}
.auth-panel::before { width: 420px; height: 420px; top: -140px; right: -120px; }
.auth-panel::after   { width: 320px; height: 320px; bottom: -120px; left: -100px; background: rgba(255, 255, 255, 0.07); }

[data-bs-theme="dark"] .auth-panel::before { background: rgba(255, 255, 255, 0.06); }
[data-bs-theme="dark"] .auth-panel::after  { background: rgba(255, 255, 255, 0.04); }

.auth-panel-content {
    position: relative;
    z-index: 1;
}

.auth-feature {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.auth-feature-icon {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.22);
    flex-shrink: 0;
}

.auth-quote {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* ---- Form side (right) ---- */
.auth-form-side {
    background-color: var(--bs-body-bg);
}

.auth-card-wrap {
    width: 100%;
    max-width: 420px;
}

/* Input groups with leading icon */
.auth-input-group {
    position: relative;
}
.auth-input-group .auth-input-icon {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    color: var(--bs-secondary-color);
    pointer-events: none;
    font-size: 1rem;
}
.auth-input-group .form-control {
    padding-left: 2.6rem;
}
.auth-input-group .auth-toggle-password {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    color: var(--bs-secondary-color);
    padding: 6px 8px;
    line-height: 1;
    transition: color 0.15s ease;
}
.auth-input-group .auth-toggle-password:hover { color: var(--bs-body-color); }

/* Invalid state (custom, mirrors bootstrap is-invalid without JS validation API) */
.auth-input-group.is-invalid .form-control {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12) !important;
}
.auth-error-msg {
    color: #ef4444;
    display: none;
}
.auth-input-group.is-invalid + .auth-error-msg,
.is-invalid ~ .auth-error-msg {
    display: block;
}

/* Divider with text */
.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--bs-secondary-color);
}
.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background-color: var(--bs-border-color);
}

/* Submit button loading state */
#btn-login .spinner-border {
    width: 1rem;
    height: 1rem;
    border-width: 2px;
}

/* Theme toggle top-right */
.auth-theme-toggle {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 5;
}

@media (max-width: 991.98px) {
    .auth-panel { display: none !important; }
}