/* Custom Login Page Styling - Match Dashboard */

/* Change login page background to match dashboard */
body[data-route="login"] {
    background-image: url('/files/healthcare_login_bg.png') !important;
    background-position: top left !important;
    background-repeat: no-repeat !important;
    background-size: 100% auto !important;
    background-attachment: fixed !important;
    background-color: #e8f4f8 !important;
}

/* Ensure the page content wrapper also has the same background */
body[data-route="login"] .page-content-wrapper {
    background-color: #f5f7fa !important;
}

/* Style the login card to have glassmorphism effect like dashboard */
.for-login .page-card,
.for-forgot .page-card,
.for-signup .page-card,
.for-email-login .page-card {
    position: relative;
    border-radius: 15px !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37) !important;
    overflow: hidden;
}

/* Add glassmorphism backdrop effect */
.for-login .page-card::before,
.for-forgot .page-card::before,
.for-signup .page-card::before,
.for-email-login .page-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: -1;
    border-radius: 15px;
}

/* Ensure content is above the backdrop */
.for-login .page-card>*,
.for-forgot .page-card>*,
.for-signup .page-card>*,
.for-email-login .page-card>* {
    position: relative;
    z-index: 1;
}