/* /Components/Account/Pages/ExternalLogin.razor.rz.scp.css */
/* ExternalLogin page specific styles with highest priority */

/* Force full-width buttons */
button[type="submit"].btn-signin[b-vfki78i4n1] {
    background: linear-gradient(135deg, #4285f4 0%, #5a67d8 100%) !important;
    border: none !important;
    border-radius: 14px !important;
    padding: 22px 40px !important;
    font-weight: 600 !important;
    font-size: 17px !important;
    transition: all 0.3s ease !important;
    color: white !important;
    width: 100% !important;
    display: block !important;
    box-shadow: 0 4px 15px rgba(66, 133, 244, 0.3) !important;
    letter-spacing: 0.5px !important;
    min-height: 58px !important;
    text-align: center !important;
    cursor: pointer !important;
}

button[type="submit"].btn-signin:hover[b-vfki78i4n1] {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 30px rgba(66, 133, 244, 0.5) !important;
    background: linear-gradient(135deg, #3367d6 0%, #4c63d2 100%) !important;
    color: white !important;
}

button[type="submit"].btn-signin:active[b-vfki78i4n1] {
    transform: translateY(0) !important;
    box-shadow: 0 4px 15px rgba(66, 133, 244, 0.4) !important;
}

/* Form floating with icon - Improved version */
.form-floating.with-icon[b-vfki78i4n1] {
    position: relative !important;
}

.form-floating.with-icon .input-icon[b-vfki78i4n1] {
    position: absolute !important;
    left: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #4285f4 !important;
    font-size: 16px !important;
    z-index: 4 !important;
    pointer-events: none !important;
}

.form-floating.with-icon .form-control[b-vfki78i4n1] {
    padding-left: 50px !important;
    padding-right: 20px !important;
    padding-top: 1.625rem !important;
    padding-bottom: 0.625rem !important;
    height: 58px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    background-color: #f7fafc !important;
    transition: all 0.3s ease !important;
}

.form-floating.with-icon > .form-control:focus[b-vfki78i4n1],
.form-floating.with-icon > .form-control:not(:placeholder-shown)[b-vfki78i4n1] {
    padding-top: 1.625rem !important;
    padding-bottom: 0.625rem !important;
}

.form-floating.with-icon .form-control:focus[b-vfki78i4n1] {
    border-color: #5a67d8 !important;
    box-shadow: 0 0 0 3px rgba(90, 103, 216, 0.1) !important;
    background-color: white !important;
    outline: none !important;
}

.form-floating.with-icon > label[b-vfki78i4n1] {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    padding: 1rem 0.75rem !important;
    padding-left: 50px !important;
    pointer-events: none !important;
    border: 1px solid transparent !important;
    transform-origin: 0 0 !important;
    transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out !important;
    color: #718096 !important;
}

.form-floating.with-icon > .form-control:focus ~ label[b-vfki78i4n1],
.form-floating.with-icon > .form-control:not(:placeholder-shown) ~ label[b-vfki78i4n1],
.form-floating.with-icon > .form-select ~ label[b-vfki78i4n1] {
    opacity: 0.65 !important;
    transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem) !important;
}

/* Alert styling */
.alert[b-vfki78i4n1] {
    border-radius: 12px !important;
    border: none !important;
    padding: 16px 20px !important;
    font-size: 14px !important;
}

.alert-info[b-vfki78i4n1] {
    background-color: #d1ecf1 !important;
    color: #0c5460 !important;
}

/* Auth links styling */
.auth-links[b-vfki78i4n1] {
    text-align: center !important;
    margin-top: 20px !important;
}

.auth-links a[b-vfki78i4n1] {
    color: #667eea !important;
    text-decoration: none !important;
    font-size: 14px !important;
    display: block !important;
    margin: 8px 0 !important;
    transition: color 0.3s ease !important;
}

.auth-links a:hover[b-vfki78i4n1] {
    color: #764ba2 !important;
    text-decoration: underline !important;
}

.auth-links a i[b-vfki78i4n1] {
    width: 16px !important;
    text-align: center !important;
}

/* Validation messages */
.text-danger[b-vfki78i4n1] {
    font-size: 12px !important;
    margin-top: 5px !important;
    color: #e50000 !important;
}

/* Spacing utilities */
.mb-3[b-vfki78i4n1] {
    margin-bottom: 1rem !important;
}
/* /Components/Account/Pages/ForgotPassword.razor.rz.scp.css */
/* ForgotPassword page specific styles with highest priority */

/* Force full-width buttons */
button[type="submit"].btn-signin[b-lf207slqk3] {
    background: linear-gradient(135deg, #4285f4 0%, #5a67d8 100%) !important;
    border: none !important;
    border-radius: 14px !important;
    padding: 22px 40px !important;
    font-weight: 600 !important;
    font-size: 17px !important;
    transition: all 0.3s ease !important;
    color: white !important;
    width: 100% !important;
    display: block !important;
    box-shadow: 0 4px 15px rgba(66, 133, 244, 0.3) !important;
    letter-spacing: 0.5px !important;
    min-height: 58px !important;
    text-align: center !important;
    cursor: pointer !important;
}

button[type="submit"].btn-signin:hover[b-lf207slqk3] {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 30px rgba(66, 133, 244, 0.5) !important;
    background: linear-gradient(135deg, #3367d6 0%, #4c63d2 100%) !important;
    color: white !important;
}

button[type="submit"].btn-signin:active[b-lf207slqk3] {
    transform: translateY(0) !important;
    box-shadow: 0 4px 15px rgba(66, 133, 244, 0.4) !important;
}

/* Form controls */
.form-control[b-lf207slqk3] {
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 18px 20px !important;
    font-size: 15px !important;
    transition: all 0.3s ease !important;
    background-color: #f7fafc !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.form-control:focus[b-lf207slqk3] {
    border-color: #5a67d8 !important;
    box-shadow: 0 0 0 3px rgba(90, 103, 216, 0.1) !important;
    background-color: white !important;
    outline: none !important;
}

.form-control[b-lf207slqk3]::placeholder {
    color: #a0aec0 !important;
    font-size: 14px !important;
}

/* Form labels */
.form-label[b-lf207slqk3] {
    color: #4a5568 !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    margin-bottom: 10px !important;
    display: block !important;
}

/* Form floating with icon - Improved version */
.form-floating.with-icon[b-lf207slqk3] {
    position: relative !important;
}

.form-floating.with-icon .input-icon[b-lf207slqk3] {
    position: absolute !important;
    left: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #4285f4 !important;
    font-size: 16px !important;
    z-index: 4 !important;
    pointer-events: none !important;
}

.form-floating.with-icon .form-control[b-lf207slqk3] {
    padding-left: 50px !important;
    padding-right: 20px !important;
    padding-top: 1.625rem !important;
    padding-bottom: 0.625rem !important;
    height: 58px !important;
}

.form-floating.with-icon > .form-control:focus[b-lf207slqk3],
.form-floating.with-icon > .form-control:not(:placeholder-shown)[b-lf207slqk3] {
    padding-top: 1.625rem !important;
    padding-bottom: 0.625rem !important;
}

.form-floating.with-icon > label[b-lf207slqk3] {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    padding: 1rem 0.75rem !important;
    padding-left: 50px !important;
    pointer-events: none !important;
    border: 1px solid transparent !important;
    transform-origin: 0 0 !important;
    transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out !important;
    color: #718096 !important;
}

.form-floating.with-icon > .form-control:focus ~ label[b-lf207slqk3],
.form-floating.with-icon > .form-control:not(:placeholder-shown) ~ label[b-lf207slqk3],
.form-floating.with-icon > .form-select ~ label[b-lf207slqk3] {
    opacity: 0.65 !important;
    transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem) !important;
}

/* Auth links styling */
.auth-links[b-lf207slqk3] {
    text-align: center !important;
    margin-top: 20px !important;
}

.auth-links a[b-lf207slqk3] {
    color: #667eea !important;
    text-decoration: none !important;
    font-size: 14px !important;
    display: block !important;
    margin: 8px 0 !important;
    transition: color 0.3s ease !important;
}

.auth-links a:hover[b-lf207slqk3] {
    color: #764ba2 !important;
    text-decoration: underline !important;
}

.auth-links a i[b-lf207slqk3] {
    width: 16px !important;
    text-align: center !important;
}

/* Validation messages */
.text-danger[b-lf207slqk3] {
    font-size: 12px !important;
    margin-top: 5px !important;
    color: #e50000 !important;
}

/* Spacing utilities */
.mb-3[b-lf207slqk3] {
    margin-bottom: 1rem !important;
}

.mb-4[b-lf207slqk3] {
    margin-bottom: 1.5rem !important;
}
/* /Components/Account/Pages/Login.razor.rz.scp.css */
/* Login page specific styles with highest priority */

/* Login container */
.login-container[b-niqfcjfe1m] {
    width: 100%;
}

/* Alert styling */
.alert[b-niqfcjfe1m] {
    border-radius: 12px;
    border: none;
    margin-bottom: 1rem;
    padding: 0.875rem;
    font-size: 14px;
}

.alert-danger[b-niqfcjfe1m] {
    background-color: #fee;
    color: #c33;
    border-left: 4px solid #c33;
}

.alert-danger .alert-content[b-niqfcjfe1m] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.alert-dismissible .btn-close[b-niqfcjfe1m] {
    padding: 0;
    opacity: 0.7;
}

.alert-dismissible .btn-close:hover[b-niqfcjfe1m] {
    opacity: 1;
}

/* Form validation messages */
.validation-summary-errors[b-niqfcjfe1m] {
    background-color: #fee;
    color: #c33;
    padding: 0.75rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    font-size: 13px;
}

.validation-summary-errors ul[b-niqfcjfe1m] {
    margin: 0;
    padding-left: 1.25rem;
}

.validation-summary-errors li[b-niqfcjfe1m] {
    margin: 0.25rem 0;
}

/* Form groups and labels */
.form-group[b-niqfcjfe1m] {
    position: relative;
}

.form-label[b-niqfcjfe1m] {
    color: #4a5568;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 0.5rem;
    display: block;
}

.form-label i[b-niqfcjfe1m] {
    color: #5a67d8;
    font-size: 16px;
    width: 20px;
}

/* Input group styling */
.input-group[b-niqfcjfe1m] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.input-group:focus-within[b-niqfcjfe1m] {
    box-shadow: 0 4px 16px rgba(90, 103, 216, 0.15);
    border-color: #5a67d8;
}

.input-group-text[b-niqfcjfe1m] {
    background-color: #f7fafc;
    border: 1px solid #e2e8f0;
    border-right: none;
    color: #4285f4;
    font-size: 16px;
    padding: 0 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.input-group:focus-within .input-group-text[b-niqfcjfe1m] {
    background-color: white;
    border-color: #5a67d8;
}

/* Form controls */
.form-control[b-niqfcjfe1m] {
    border: 1px solid #e2e8f0;
    border-radius: 0;
    padding: 0.875rem 1rem;
    font-size: 15px;
    transition: all 0.3s ease;
    background-color: #f7fafc;
    color: #2d3748;
}

.input-group-lg .form-control[b-niqfcjfe1m] {
    padding: 0.75rem 1rem;
}

.form-control:focus[b-niqfcjfe1m] {
    border-color: #5a67d8;
    box-shadow: none;
    background-color: white;
    outline: none;
}

.form-control[b-niqfcjfe1m]::placeholder {
    color: #a0aec0;
    font-size: 14px;
}

/* Password toggle button */
.input-group .btn-outline-secondary[b-niqfcjfe1m] {
    border: 1px solid #e2e8f0;
    border-left: none;
    background-color: #f7fafc;
    color: #5a67d8;
    padding: 0 1rem;
    transition: all 0.3s ease;
}

.input-group .btn-outline-secondary:hover[b-niqfcjfe1m] {
    background-color: white;
    color: #4c63d2;
    border-color: #5a67d8;
}

.input-group .btn-outline-secondary:focus[b-niqfcjfe1m] {
    border-color: #5a67d8;
    box-shadow: none;
}

/* Form check (remember me) */
.form-check[b-niqfcjfe1m] {
    display: flex;
    align-items: center;
    margin: 0;
    gap: 0.5rem;
}

.form-check-input[b-niqfcjfe1m] {
    width: 20px;
    height: 20px;
    border: 2px solid #e2e8f0;
    border-radius: 6px;
    transition: all 0.2s ease;
    cursor: pointer;
    margin-top: 0;
    flex-shrink: 0;
}

.form-check-input:checked[b-niqfcjfe1m] {
    background-color: #5a67d8;
    border-color: #5a67d8;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

.form-check-input:focus[b-niqfcjfe1m] {
    box-shadow: 0 0 0 3px rgba(90, 103, 216, 0.1);
    border-color: #5a67d8;
}

.form-check-label[b-niqfcjfe1m] {
    color: #4a5568;
    font-size: 15px;
    margin-bottom: 0;
    cursor: pointer;
    user-select: none;
    font-weight: 500;
}

/* Validation messages */
.text-danger[b-niqfcjfe1m] {
    font-size: 12px;
    color: #c33;
    margin-top: 0.5rem;
}

/* Security message */
.security-message[b-niqfcjfe1m] {
    background: rgba(90, 103, 216, 0.05);
    border-left: 3px solid #5a67d8;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    color: #4a5568;
    font-size: 13px;
    display: flex;
    align-items: center;
}

.security-message i[b-niqfcjfe1m] {
    color: #5a67d8;
}

/* Forgot password link */
.forgot-password-link[b-niqfcjfe1m] {
    color: #5a67d8;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
    white-space: nowrap;
}

.forgot-password-link:hover[b-niqfcjfe1m] {
    color: #4c63d2;
    text-decoration: underline;
}

/* Sign In Button */
.btn-signin[b-niqfcjfe1m] {
    background: linear-gradient(135deg, #5a67d8 0%, #4c63d2 100%) !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 0.875rem 1.5rem !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    transition: all 0.3s ease !important;
    color: white !important;
    box-shadow: 0 4px 15px rgba(90, 103, 216, 0.3) !important;
    letter-spacing: 0.3px !important;
    min-height: 52px !important;
    text-align: center !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.btn-signin:hover[b-niqfcjfe1m] {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 30px rgba(90, 103, 216, 0.4) !important;
    background: linear-gradient(135deg, #4c63d2 0%, #3f5bc4 100%) !important;
    color: white !important;
}

.btn-signin:active[b-niqfcjfe1m] {
    transform: translateY(0) !important;
    box-shadow: 0 4px 15px rgba(90, 103, 216, 0.3) !important;
}

/* Passkey button styling */
.btn-passkey[b-niqfcjfe1m] {
    border: 2px solid #5a67d8 !important;
    border-radius: 12px !important;
    padding: 0.75rem 1.5rem !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    transition: all 0.3s ease !important;
    color: #5a67d8 !important;
    background-color: transparent !important;
    min-height: 50px !important;
    text-align: center !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.btn-passkey:hover[b-niqfcjfe1m] {
    background-color: #5a67d8 !important;
    color: white !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 15px rgba(90, 103, 216, 0.2) !important;
}

.btn-passkey:active[b-niqfcjfe1m] {
    transform: translateY(0) !important;
}

/* OR divider styling */
.auth-divider-or[b-niqfcjfe1m] {
    position: relative;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20px;
}

.auth-divider-or[b-niqfcjfe1m]::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #e2e8f0;
    z-index: 1;
}

.auth-divider-or span[b-niqfcjfe1m] {
    background: white;
    padding: 0 1rem;
    color: #718096;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: 600;
    z-index: 2;
    position: relative;
    display: inline-block;
}

/* Sign Up Section */
.auth-signup-section[b-niqfcjfe1m] {
    margin-top: 1rem;
    padding-top: 0.875rem;
    border-top: 1px solid #e2e8f0;
}

.auth-signup-section p[b-niqfcjfe1m] {
    color: #718096;
    margin-bottom: 0.5rem;
}

.signup-link[b-niqfcjfe1m] {
    color: #5a67d8;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
}

.signup-link:hover[b-niqfcjfe1m] {
    color: #4c63d2;
    text-decoration: underline;
}

/* Utility classes */
.w-100[b-niqfcjfe1m] {
    width: 100% !important;
}

.mb-2[b-niqfcjfe1m] {
    margin-bottom: 0.5rem !important;
}

.mb-3[b-niqfcjfe1m] {
    margin-bottom: 0.875rem !important;
}

.mb-4[b-niqfcjfe1m] {
    margin-bottom: 1.25rem !important;
}

.me-1[b-niqfcjfe1m] {
    margin-right: 0.25rem !important;
}

.me-2[b-niqfcjfe1m] {
    margin-right: 0.5rem !important;
}

.mt-2[b-niqfcjfe1m] {
    margin-top: 0.5rem !important;
}

.d-block[b-niqfcjfe1m] {
    display: block !important;
}

.d-flex[b-niqfcjfe1m] {
    display: flex !important;
}

.align-items-center[b-niqfcjfe1m] {
    align-items: center !important;
}

.justify-content-between[b-niqfcjfe1m] {
    justify-content: space-between !important;
}

.text-muted[b-niqfcjfe1m] {
    color: #718096 !important;
}

.text-center[b-niqfcjfe1m] {
    text-align: center !important;
}

/* Responsive adjustments */
@media (max-width: 576px) {
    .form-label[b-niqfcjfe1m] {
        font-size: 14px;
    }

    .form-control[b-niqfcjfe1m] {
        font-size: 16px;
    }

    .btn-signin[b-niqfcjfe1m] {
        padding: 0.75rem 1rem !important;
        min-height: 48px !important;
    }

    .auth-signup-section[b-niqfcjfe1m] {
        margin-top: 1rem;
        padding-top: 0.75rem;
    }

    .input-group .btn-outline-secondary[b-niqfcjfe1m] {
        padding: 0 0.75rem;
    }
}

/* Accessibility focus states */
*:focus-visible[b-niqfcjfe1m] {
    outline: 2px solid #5a67d8;
    outline-offset: 2px;
}

/* Smooth transitions */
.btn[b-niqfcjfe1m], .form-control[b-niqfcjfe1m], .form-check-input[b-niqfcjfe1m], a[b-niqfcjfe1m] {
    transition: all 0.2s ease;
}
/* /Components/Account/Pages/LoginWith2fa.razor.rz.scp.css */
/* LoginWith2fa page specific styles with highest priority */

/* Force full-width buttons */
button[type="submit"].btn-signin[b-wwkhn9netn] {
    background: linear-gradient(135deg, #4285f4 0%, #5a67d8 100%) !important;
    border: none !important;
    border-radius: 14px !important;
    padding: 22px 40px !important;
    font-weight: 600 !important;
    font-size: 17px !important;
    transition: all 0.3s ease !important;
    color: white !important;
    width: 100% !important;
    display: block !important;
    box-shadow: 0 4px 15px rgba(66, 133, 244, 0.3) !important;
    letter-spacing: 0.5px !important;
    min-height: 58px !important;
    text-align: center !important;
    cursor: pointer !important;
}

button[type="submit"].btn-signin:hover[b-wwkhn9netn] {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 30px rgba(66, 133, 244, 0.5) !important;
    background: linear-gradient(135deg, #3367d6 0%, #4c63d2 100%) !important;
    color: white !important;
}

button[type="submit"].btn-signin:active[b-wwkhn9netn] {
    transform: translateY(0) !important;
    box-shadow: 0 4px 15px rgba(66, 133, 244, 0.4) !important;
}

/* Form controls */
.form-control[b-wwkhn9netn] {
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 18px 20px !important;
    font-size: 15px !important;
    transition: all 0.3s ease !important;
    background-color: #f7fafc !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.form-control:focus[b-wwkhn9netn] {
    border-color: #5a67d8 !important;
    box-shadow: 0 0 0 3px rgba(90, 103, 216, 0.1) !important;
    background-color: white !important;
    outline: none !important;
}

/* Form floating with icon - Improved version */
.form-floating.with-icon[b-wwkhn9netn] {
    position: relative !important;
}

.form-floating.with-icon .input-icon[b-wwkhn9netn] {
    position: absolute !important;
    left: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #4285f4 !important;
    font-size: 16px !important;
    z-index: 4 !important;
    pointer-events: none !important;
}

.form-floating.with-icon .form-control[b-wwkhn9netn] {
    padding-left: 50px !important;
    padding-right: 20px !important;
    padding-top: 1.625rem !important;
    padding-bottom: 0.625rem !important;
    height: 58px !important;
}

.form-floating.with-icon > .form-control:focus[b-wwkhn9netn],
.form-floating.with-icon > .form-control:not(:placeholder-shown)[b-wwkhn9netn] {
    padding-top: 1.625rem !important;
    padding-bottom: 0.625rem !important;
}

.form-floating.with-icon > label[b-wwkhn9netn] {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    padding: 1rem 0.75rem !important;
    padding-left: 50px !important;
    pointer-events: none !important;
    border: 1px solid transparent !important;
    transform-origin: 0 0 !important;
    transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out !important;
    color: #718096 !important;
}

.form-floating.with-icon > .form-control:focus ~ label[b-wwkhn9netn],
.form-floating.with-icon > .form-control:not(:placeholder-shown) ~ label[b-wwkhn9netn],
.form-floating.with-icon > .form-select ~ label[b-wwkhn9netn] {
    opacity: 0.65 !important;
    transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem) !important;
}

/* Form check styling */
.form-check[b-wwkhn9netn] {
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
}

.form-check-input[b-wwkhn9netn] {
    border-radius: 6px !important;
    border: 2px solid #e2e8f0 !important;
    width: 20px !important;
    height: 20px !important;
    transition: all 0.2s ease !important;
    margin-top: 0 !important;
    flex-shrink: 0 !important;
}

.form-check-input:checked[b-wwkhn9netn] {
    background-color: #4285f4 !important;
    border-color: #4285f4 !important;
}

.form-check-input:focus[b-wwkhn9netn] {
    box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.1) !important;
}

.form-check-label[b-wwkhn9netn] {
    color: #4a5568 !important;
    font-size: 15px !important;
    margin-left: 10px !important;
    font-weight: 500 !important;
    margin-bottom: 0 !important;
}

/* Auth links styling */
.auth-links[b-wwkhn9netn] {
    text-align: center !important;
    margin-top: 20px !important;
}

.auth-links a[b-wwkhn9netn] {
    color: #667eea !important;
    text-decoration: none !important;
    font-size: 14px !important;
    display: block !important;
    margin: 8px 0 !important;
    transition: color 0.3s ease !important;
}

.auth-links a:hover[b-wwkhn9netn] {
    color: #764ba2 !important;
    text-decoration: underline !important;
}

.auth-links a i[b-wwkhn9netn] {
    width: 16px !important;
    text-align: center !important;
}

/* Text muted styling */
.text-muted[b-wwkhn9netn] {
    color: #718096 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}

/* Validation messages */
.text-danger[b-wwkhn9netn] {
    font-size: 12px !important;
    margin-top: 5px !important;
    color: #e50000 !important;
}

/* Spacing utilities */
.mb-3[b-wwkhn9netn] {
    margin-bottom: 1rem !important;
}

.text-center[b-wwkhn9netn] {
    text-align: center !important;
}
/* /Components/Account/Pages/LoginWithRecoveryCode.razor.rz.scp.css */
/* LoginWithRecoveryCode page specific styles with highest priority */

/* Force full-width buttons */
button[type="submit"].btn-signin[b-ye0rgdmfyx] {
    background: linear-gradient(135deg, #4285f4 0%, #5a67d8 100%) !important;
    border: none !important;
    border-radius: 14px !important;
    padding: 22px 40px !important;
    font-weight: 600 !important;
    font-size: 17px !important;
    transition: all 0.3s ease !important;
    color: white !important;
    width: 100% !important;
    display: block !important;
    box-shadow: 0 4px 15px rgba(66, 133, 244, 0.3) !important;
    letter-spacing: 0.5px !important;
    min-height: 58px !important;
    text-align: center !important;
    cursor: pointer !important;
}

button[type="submit"].btn-signin:hover[b-ye0rgdmfyx] {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 30px rgba(66, 133, 244, 0.5) !important;
    background: linear-gradient(135deg, #3367d6 0%, #4c63d2 100%) !important;
    color: white !important;
}

button[type="submit"].btn-signin:active[b-ye0rgdmfyx] {
    transform: translateY(0) !important;
    box-shadow: 0 4px 15px rgba(66, 133, 244, 0.4) !important;
}

/* Form controls */
.form-control[b-ye0rgdmfyx] {
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 18px 20px !important;
    font-size: 15px !important;
    transition: all 0.3s ease !important;
    background-color: #f7fafc !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.form-control:focus[b-ye0rgdmfyx] {
    border-color: #5a67d8 !important;
    box-shadow: 0 0 0 3px rgba(90, 103, 216, 0.1) !important;
    background-color: white !important;
    outline: none !important;
}

.form-control[b-ye0rgdmfyx]::placeholder {
    color: #a0aec0 !important;
    font-size: 14px !important;
}

/* Form labels */
.form-label[b-ye0rgdmfyx] {
    color: #4a5568 !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    margin-bottom: 10px !important;
    display: block !important;
}

/* Form floating with icon - Improved version */
.form-floating.with-icon[b-ye0rgdmfyx] {
    position: relative !important;
}

.form-floating.with-icon .input-icon[b-ye0rgdmfyx] {
    position: absolute !important;
    left: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #4285f4 !important;
    font-size: 16px !important;
    z-index: 4 !important;
    pointer-events: none !important;
}

.form-floating.with-icon .form-control[b-ye0rgdmfyx] {
    padding-left: 50px !important;
    padding-right: 20px !important;
    padding-top: 1.625rem !important;
    padding-bottom: 0.625rem !important;
    height: 58px !important;
}

.form-floating.with-icon > .form-control:focus[b-ye0rgdmfyx],
.form-floating.with-icon > .form-control:not(:placeholder-shown)[b-ye0rgdmfyx] {
    padding-top: 1.625rem !important;
    padding-bottom: 0.625rem !important;
}

.form-floating.with-icon > label[b-ye0rgdmfyx] {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    padding: 1rem 0.75rem !important;
    padding-left: 50px !important;
    pointer-events: none !important;
    border: 1px solid transparent !important;
    transform-origin: 0 0 !important;
    transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out !important;
    color: #718096 !important;
}

.form-floating.with-icon > .form-control:focus ~ label[b-ye0rgdmfyx],
.form-floating.with-icon > .form-control:not(:placeholder-shown) ~ label[b-ye0rgdmfyx],
.form-floating.with-icon > .form-select ~ label[b-ye0rgdmfyx] {
    opacity: 0.65 !important;
    transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem) !important;
}

/* Auth links styling */
.auth-links[b-ye0rgdmfyx] {
    text-align: center !important;
    margin-top: 20px !important;
}

.auth-links a[b-ye0rgdmfyx] {
    color: #667eea !important;
    text-decoration: none !important;
    font-size: 14px !important;
    display: block !important;
    margin: 8px 0 !important;
    transition: color 0.3s ease !important;
}

.auth-links a:hover[b-ye0rgdmfyx] {
    color: #764ba2 !important;
    text-decoration: underline !important;
}

.auth-links a i[b-ye0rgdmfyx] {
    width: 16px !important;
    text-align: center !important;
}

/* Text muted styling */
.text-muted[b-ye0rgdmfyx] {
    color: #718096 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}

/* Validation messages */
.text-danger[b-ye0rgdmfyx] {
    font-size: 12px !important;
    margin-top: 5px !important;
    color: #e50000 !important;
}

/* Spacing utilities */
.mb-3[b-ye0rgdmfyx] {
    margin-bottom: 1rem !important;
}

.mb-4[b-ye0rgdmfyx] {
    margin-bottom: 1.5rem !important;
}

.text-center[b-ye0rgdmfyx] {
    text-align: center !important;
}
/* /Components/Account/Pages/Manage/Index.razor.rz.scp.css */
.modern-page-header[b-ym1gqgzyez] {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  border-bottom: 1px solid #e2e8f0;
  margin-bottom: 0;
  padding-bottom: 2rem;
}

.header-icon[b-ym1gqgzyez] {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  color: white;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.modern-page-header:hover .header-icon[b-ym1gqgzyez] {
  transform: scale(1.05);
}

.header-content[b-ym1gqgzyez] {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.5rem;
  padding-top: 0.25rem;
  flex: 1;
}

.header-content h1[b-ym1gqgzyez] {
  font-size: 1.75rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
  line-height: 1.2;
}

.header-content p[b-ym1gqgzyez] {
  font-size: 0.95rem;
  color: #64748b;
  margin: 0;
  font-weight: 400;
  line-height: 1.4;
}

/* Profile Header Card - Enhanced */
.profile-header-card[b-ym1gqgzyez] {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: 0 8px 24px rgba(102, 126, 234, 0.25);
  color: white;
  animation: slideDown-b-ym1gqgzyez 0.4s ease;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.profile-header-background[b-ym1gqgzyez] {
  position: absolute;
  top: -50%;
  right: -50%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

@keyframes slideDown-b-ym1gqgzyez {
  from {
    opacity: 0;
    transform: translateY(-15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.profile-avatar-wrapper[b-ym1gqgzyez] {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex: 1;
  position: relative;
  z-index: 1;
}

.avatar-circle[b-ym1gqgzyez] {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px);
  border: 3px solid rgba(255, 255, 255, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  font-weight: 700;
  color: white;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.avatar-circle:hover[b-ym1gqgzyez] {
  transform: scale(1.08);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
}

.avatar-initials[b-ym1gqgzyez] {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.profile-info[b-ym1gqgzyez] {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.profile-name[b-ym1gqgzyez] {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
  color: white;
}

.profile-email[b-ym1gqgzyez] {
  margin: 0;
  font-size: 1rem;
  opacity: 0.95;
  color: rgba(255, 255, 255, 0.95);
  font-weight: 500;
}

.profile-status-group[b-ym1gqgzyez] {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.profile-status[b-ym1gqgzyez] {
  margin: 0;
  font-size: 0.9rem;
}

.status-badge[b-ym1gqgzyez] {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 24px;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  animation: fadeInScale-b-ym1gqgzyez 0.4s ease 0.2s both;
}

.status-badge:hover[b-ym1gqgzyez] {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}

.status-active[b-ym1gqgzyez] {
  background: rgba(76, 175, 80, 0.3);
  border-color: rgba(76, 175, 80, 0.5);
}

.status-active:hover[b-ym1gqgzyez] {
  background: rgba(76, 175, 80, 0.4);
}

@keyframes fadeInScale-b-ym1gqgzyez {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.btn-profile-edit[b-ym1gqgzyez] {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.4);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  font-size: 1.2rem;
}

.btn-profile-edit:hover[b-ym1gqgzyez] {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1) rotate(10deg);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Card Styling - Enhanced */
.card[b-ym1gqgzyez] {
  border: none;
  border-radius: 1rem;
  overflow: hidden;
  transition: all 0.3s ease;
}

.card:hover[b-ym1gqgzyez] {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08) !important;
  transform: translateY(-4px);
}

.card-header[b-ym1gqgzyez] {
  border-bottom: 2px solid #f0f0f0;
  background-color: #fafafa;
}

.card-title[b-ym1gqgzyez] {
  font-weight: 700;
  font-size: 1.1rem;
  color: #1e293b;
}

/* Form Card Specific */
.form-card[b-ym1gqgzyez] {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
}

/* Form Section Group - New Visual Organization */
.form-section-group[b-ym1gqgzyez] {
  margin-bottom: 2rem;
}

.form-section-group:last-of-type[b-ym1gqgzyez] {
  margin-bottom: 0;
}

.form-section-title[b-ym1gqgzyez] {
  font-size: 1rem;
  font-weight: 700;
  color: #1e293b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
}

.form-section-divider[b-ym1gqgzyez] {
  height: 2px;
  background: linear-gradient(90deg, #667eea 0%, transparent 100%);
  margin-bottom: 1.5rem;
}

/* Form Section Styling */
.form-section[b-ym1gqgzyez] {
  animation: fadeIn-b-ym1gqgzyez 0.3s ease;
}

@keyframes fadeIn-b-ym1gqgzyez {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.form-label[b-ym1gqgzyez] {
  color: #1e293b;
  margin-bottom: 0.75rem;
  font-size: 0.975rem;
  font-weight: 600;
  display: flex;
  align-items: center;
}

.form-control[b-ym1gqgzyez] {
  border: 2px solid #e2e8f0;
  border-radius: 0.625rem;
  transition: all 0.3s ease;
  font-size: 1rem;
  background-color: #ffffff;
}

.form-control[b-ym1gqgzyez]::placeholder {
  color: #a0aec0;
  opacity: 0.7;
}

.form-control:hover:not(:disabled)[b-ym1gqgzyez] {
  border-color: #cbd5e1;
  background-color: #f9fafb;
}

.form-control:focus[b-ym1gqgzyez] {
  border-color: #667eea;
  box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1), inset 0 0 0 1px rgba(102, 126, 234, 0.05);
  background-color: #ffffff;
}

.form-control-lg[b-ym1gqgzyez] {
  padding: 0.875rem 1.125rem;
  font-size: 1rem;
}

.form-control-static[b-ym1gqgzyez] {
  background-color: #f8fafc;
  border-color: #e2e8f0;
  cursor: not-allowed;
  color: #64748b;
  font-weight: 500;
}

.form-control-static:disabled[b-ym1gqgzyez] {
  opacity: 1;
  color: #64748b;
}

.form-control-modified[b-ym1gqgzyez] {
  border-color: #43e97b;
  background-color: rgba(67, 233, 123, 0.03);
}

.input-group[b-ym1gqgzyez] {
  border-radius: 0.625rem;
  overflow: hidden;
}

.input-group-readonly .form-control[b-ym1gqgzyez] {
  border-right: none;
}

.input-group-readonly .input-group-text[b-ym1gqgzyez] {
  border-left: none;
}

.input-group-text[b-ym1gqgzyez] {
  border: 2px solid #e2e8f0;
  color: #64748b;
  font-size: 1rem;
  background-color: #f8fafc;
  transition: all 0.3s ease;
}

.input-group:has(.form-control:focus) .input-group-text[b-ym1gqgzyez] {
  border-color: #667eea;
  background-color: #ffffff;
}

.btn-link-icon[b-ym1gqgzyez] {
  padding: 0.625rem 1rem !important;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  background-color: #f8fafc !important;
  color: #667eea !important;
  border-color: #e2e8f0 !important;
  font-size: 1.1rem;
}

.btn-link-icon:hover[b-ym1gqgzyez] {
  transform: scale(1.15);
  color: #764ba2 !important;
  background-color: #f0f0f0 !important;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}

/* Validation Feedback */
.validation-feedback[b-ym1gqgzyez] {
  margin-bottom: 1.5rem;
}

.validation-feedback .alert[b-ym1gqgzyez] {
  margin-bottom: 0;
  border-radius: 0.625rem;
  border: none;
  padding: 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  background-color: #fee;
  color: #c33;
}

.validation-feedback .alert[b-ym1gqgzyez]::before {
  content: '\f06a';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  flex-shrink: 0;
}

.validation-feedback .alert-dismissible[b-ym1gqgzyez] {
  padding-right: 3.5rem;
}

.validation-feedback .btn-close[b-ym1gqgzyez] {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
}

.invalid-feedback[b-ym1gqgzyez] {
  color: #dc3545;
  font-size: 0.85rem;
  display: block;
  margin-top: 0.5rem;
  font-weight: 500;
}

/* Button Styling */
.btn-primary[b-ym1gqgzyez] {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  transition: all 0.3s ease;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
  border-radius: 0.625rem;
}

.btn-primary:hover:not(:disabled)[b-ym1gqgzyez] {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4);
}

.btn-primary:active:not(:disabled)[b-ym1gqgzyez] {
  transform: translateY(-1px);
}

.btn-primary:disabled[b-ym1gqgzyez] {
  opacity: 0.7;
  cursor: not-allowed;
}

.spinner-border-sm[b-ym1gqgzyez] {
  width: 1rem;
  height: 1rem;
  border-width: 0.2em;
}

/* Form Actions */
.form-actions[b-ym1gqgzyez] {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 2px solid #f0f0f0;
}

/* Security Card */
.security-card[b-ym1gqgzyez] {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.04) 0%, rgba(118, 75, 162, 0.04) 100%);
  border: 1px solid #e2e8f0;
}

.btn-outline-custom[b-ym1gqgzyez] {
  font-weight: 600;
  border-width: 2px;
  padding: 0.75rem 1.25rem;
  border-radius: 0.625rem;
  background-color: transparent;
  transition: all 0.3s ease;
  min-height: 48px;
  text-align: center;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-security[b-ym1gqgzyez] {
  font-size: 0.95rem;
}

.btn-outline-pink[b-ym1gqgzyez] {
  border-color: #f093fb;
  color: #f093fb;
}

.btn-outline-pink:hover[b-ym1gqgzyez] {
  background-color: #f093fb;
  color: white;
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(240, 147, 251, 0.3);
}

.btn-outline-blue[b-ym1gqgzyez] {
  border-color: #4facfe;
  color: #4facfe;
}

.btn-outline-blue:hover[b-ym1gqgzyez] {
  background-color: #4facfe;
  color: white;
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(79, 172, 254, 0.3);
}

.btn-outline-orange[b-ym1gqgzyez] {
  border-color: #fa709a;
  color: #fa709a;
}

.btn-outline-orange:hover[b-ym1gqgzyez] {
  background-color: #fa709a;
  color: white;
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(250, 112, 154, 0.3);
}

.btn-outline-custom:active:not(:disabled)[b-ym1gqgzyez] {
  transform: translateY(-1px);
}

/* Profile Tips Card */
.profile-tips-card[b-ym1gqgzyez] {
  overflow: visible;
}

.tip-item[b-ym1gqgzyez] {
  display: flex;
  gap: 1rem;
  padding: 1.25rem;
  border-radius: 0.625rem;
  margin-bottom: 1rem;
  transition: all 0.3s ease;
  position: relative;
  background: #fafafa;
}

.tip-item:hover[b-ym1gqgzyez] {
  transform: translateX(6px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
  background: white;
}

.tip-item-purple[b-ym1gqgzyez] {
  border-left: 4px solid #667eea;
}

.tip-item-blue[b-ym1gqgzyez] {
  border-left: 4px solid #4facfe;
}

.tip-item-green[b-ym1gqgzyez] {
  border-left: 4px solid #43e97b;
}

.tip-item-orange[b-ym1gqgzyez] {
  border-left: 4px solid #fa709a;
}

.tip-icon[b-ym1gqgzyez] {
  width: 50px;
  height: 50px;
  border-radius: 0.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.tip-item-purple .tip-icon[b-ym1gqgzyez] {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.tip-item-blue .tip-icon[b-ym1gqgzyez] {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(79, 172, 254, 0.3);
}

.tip-item-green .tip-icon[b-ym1gqgzyez] {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(67, 233, 123, 0.3);
}

.tip-item-orange .tip-icon[b-ym1gqgzyez] {
  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(250, 112, 154, 0.3);
}

.tip-item:hover .tip-icon[b-ym1gqgzyez] {
  transform: scale(1.15) rotate(-8deg);
}

.tip-content[b-ym1gqgzyez] {
  flex: 1;
}

.tip-title[b-ym1gqgzyez] {
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 0.25rem;
  color: #1e293b;
}

.tip-text[b-ym1gqgzyez] {
  font-size: 0.85rem;
  color: #6c757d;
  line-height: 1.5;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .profile-header-card[b-ym1gqgzyez] {
    flex-direction: column;
    gap: 1.5rem;
    align-items: flex-start;
  }

  .btn-profile-edit[b-ym1gqgzyez] {
    align-self: flex-end;
    margin-top: -2rem;
  }
}

@media (max-width: 768px) {
  .modern-page-header[b-ym1gqgzyez] {
    gap: 1rem;
    padding-bottom: 1.5rem;
  }

  .header-icon[b-ym1gqgzyez] {
    width: 48px;
    height: 48px;
    font-size: 1.5rem;
  }

  .header-content h1[b-ym1gqgzyez] {
    font-size: 1.5rem;
  }

  .header-content p[b-ym1gqgzyez] {
    font-size: 0.9rem;
  }

  .avatar-circle[b-ym1gqgzyez] {
    width: 70px;
    height: 70px;
    font-size: 2rem;
  }

  .profile-name[b-ym1gqgzyez] {
    font-size: 1.4rem;
  }

  .profile-email[b-ym1gqgzyez] {
    font-size: 0.95rem;
  }

  .btn-profile-edit[b-ym1gqgzyez] {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }

  .tip-item[b-ym1gqgzyez] {
    padding: 1rem;
    margin-bottom: 0.875rem;
  }

  .tip-icon[b-ym1gqgzyez] {
    width: 45px;
    height: 45px;
    font-size: 1.2rem;
  }

  .profile-avatar-wrapper[b-ym1gqgzyez] {
    gap: 1rem;
  }

  .form-control-lg[b-ym1gqgzyez] {
    font-size: 1rem;
    padding: 0.75rem 1rem;
  }

  .form-section-title[b-ym1gqgzyez] {
    font-size: 0.95rem;
  }

  .btn-outline-custom[b-ym1gqgzyez] {
    padding: 0.65rem 1.125rem;
    min-height: 44px;
  }
}

@media (max-width: 480px) {
  .modern-page-header[b-ym1gqgzyez] {
    gap: 0.75rem;
    padding-bottom: 1rem;
  }

  .header-icon[b-ym1gqgzyez] {
    width: 44px;
    height: 44px;
    font-size: 1.25rem;
  }

  .header-content h1[b-ym1gqgzyez] {
    font-size: 1.25rem;
  }

  .header-content p[b-ym1gqgzyez] {
    font-size: 0.85rem;
  }

  .profile-header-card[b-ym1gqgzyez] {
    padding: 1.25rem;
    gap: 1rem;
  }

  .profile-header-background[b-ym1gqgzyez] {
    display: none;
  }

  .avatar-circle[b-ym1gqgzyez] {
    width: 55px;
    height: 55px;
    font-size: 1.5rem;
  }

  .profile-name[b-ym1gqgzyez] {
    font-size: 1.1rem;
  }

  .profile-email[b-ym1gqgzyez] {
    font-size: 0.85rem;
  }

  .btn-profile-edit[b-ym1gqgzyez] {
    width: 36px;
    height: 36px;
    font-size: 0.9rem;
  }

  .card-body[b-ym1gqgzyez] {
    padding: 1rem;
  }

  .btn-outline-custom[b-ym1gqgzyez] {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    min-height: 40px;
  }

  .btn-primary[b-ym1gqgzyez] {
    font-size: 0.95rem;
  }

  .form-label[b-ym1gqgzyez] {
    font-size: 0.9rem;
  }

  .form-control[b-ym1gqgzyez],
  .form-control-lg[b-ym1gqgzyez] {
    font-size: 0.95rem;
    padding: 0.65rem 0.875rem;
  }

  .form-section-title[b-ym1gqgzyez] {
    font-size: 0.85rem;
  }

  .profile-avatar-wrapper[b-ym1gqgzyez] {
    gap: 0.75rem;
  }

  .tip-item[b-ym1gqgzyez] {
    padding: 0.875rem;
    gap: 0.75rem;
  }

  .tip-icon[b-ym1gqgzyez] {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }

  .tip-title[b-ym1gqgzyez] {
    font-size: 0.85rem;
  }

  .tip-text[b-ym1gqgzyez] {
    font-size: 0.8rem;
  }
}
/* /Components/Account/Pages/Register.razor.rz.scp.css */
/* Register page specific styles with highest priority */

/* Force full-width buttons */
button[type="submit"].btn-signin[b-l23c8jkmc4] {
    background: linear-gradient(135deg, #4285f4 0%, #5a67d8 100%) !important;
    border: none !important;
    border-radius: 14px !important;
    padding: 22px 40px !important;
    font-weight: 600 !important;
    font-size: 17px !important;
    transition: all 0.3s ease !important;
    color: white !important;
    width: 100% !important;
    display: block !important;
    box-shadow: 0 4px 15px rgba(66, 133, 244, 0.3) !important;
    letter-spacing: 0.5px !important;
    min-height: 58px !important;
    text-align: center !important;
    cursor: pointer !important;
}

button[type="submit"].btn-signin:hover[b-l23c8jkmc4] {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 30px rgba(66, 133, 244, 0.5) !important;
    background: linear-gradient(135deg, #3367d6 0%, #4c63d2 100%) !important;
    color: white !important;
}

button[type="submit"].btn-signin:active[b-l23c8jkmc4] {
    transform: translateY(0) !important;
    box-shadow: 0 4px 15px rgba(66, 133, 244, 0.4) !important;
}

/* Form floating with icon - Improved version */
.form-floating.with-icon[b-l23c8jkmc4] {
    position: relative !important;
}

.form-floating.with-icon .input-icon[b-l23c8jkmc4] {
    position: absolute !important;
    left: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #4285f4 !important;
    font-size: 16px !important;
    z-index: 4 !important;
    pointer-events: none !important;
}

.form-floating.with-icon .form-control[b-l23c8jkmc4] {
    padding-left: 50px !important;
    padding-right: 20px !important;
    padding-top: 1.625rem !important;
    padding-bottom: 0.625rem !important;
    height: 58px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    background-color: #f7fafc !important;
    transition: all 0.3s ease !important;
}

.form-floating.with-icon > .form-control:focus[b-l23c8jkmc4],
.form-floating.with-icon > .form-control:not(:placeholder-shown)[b-l23c8jkmc4] {
    padding-top: 1.625rem !important;
    padding-bottom: 0.625rem !important;
}

.form-floating.with-icon .form-control:focus[b-l23c8jkmc4] {
    border-color: #5a67d8 !important;
    box-shadow: 0 0 0 3px rgba(90, 103, 216, 0.1) !important;
    background-color: white !important;
    outline: none !important;
}

.form-floating.with-icon > label[b-l23c8jkmc4] {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    padding: 1rem 0.75rem !important;
    padding-left: 50px !important;
    pointer-events: none !important;
    border: 1px solid transparent !important;
    transform-origin: 0 0 !important;
    transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out !important;
    color: #718096 !important;
}

.form-floating.with-icon > .form-control:focus ~ label[b-l23c8jkmc4],
.form-floating.with-icon > .form-control:not(:placeholder-shown) ~ label[b-l23c8jkmc4],
.form-floating.with-icon > .form-select ~ label[b-l23c8jkmc4] {
    opacity: 0.65 !important;
    transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem) !important;
}

/* Form check styling */
.form-check[b-l23c8jkmc4] {
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
}

.form-check-input[b-l23c8jkmc4] {
    border-radius: 6px !important;
    border: 2px solid #e2e8f0 !important;
    width: 20px !important;
    height: 20px !important;
    transition: all 0.2s ease !important;
    margin-top: 0 !important;
    flex-shrink: 0 !important;
}

.form-check-input:checked[b-l23c8jkmc4] {
    background-color: #4285f4 !important;
    border-color: #4285f4 !important;
}

.form-check-input:focus[b-l23c8jkmc4] {
    box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.1) !important;
}

.form-check-label[b-l23c8jkmc4] {
    color: #4a5568 !important;
    font-size: 15px !important;
    margin-left: 10px !important;
    font-weight: 500 !important;
    margin-bottom: 0 !important;
}

/* Auth links styling */
.auth-links[b-l23c8jkmc4] {
    text-align: center !important;
    margin-top: 20px !important;
}

.auth-links a[b-l23c8jkmc4] {
    color: #667eea !important;
    text-decoration: none !important;
    font-size: 14px !important;
    display: block !important;
    margin: 8px 0 !important;
    transition: color 0.3s ease !important;
}

.auth-links a:hover[b-l23c8jkmc4] {
    color: #764ba2 !important;
    text-decoration: underline !important;
}

.auth-links a i[b-l23c8jkmc4] {
    width: 16px !important;
    text-align: center !important;
}

/* Row styling */
.row[b-l23c8jkmc4] {
    margin-left: -8px !important;
    margin-right: -8px !important;
}

.row > [class*='col-'][b-l23c8jkmc4] {
    padding-left: 8px !important;
    padding-right: 8px !important;
}

/* Validation messages */
.text-danger[b-l23c8jkmc4] {
    font-size: 12px !important;
    margin-top: 5px !important;
    color: #e50000 !important;
}

/* Spacing utilities */
.mb-3[b-l23c8jkmc4] {
    margin-bottom: 1rem !important;
}
/* /Components/Account/Pages/ResendEmailConfirmation.razor.rz.scp.css */
/* ResendEmailConfirmation page specific styles with highest priority */

/* Force full-width buttons */
button[type="submit"].btn-signin[b-zstna6jgk3] {
    background: linear-gradient(135deg, #4285f4 0%, #5a67d8 100%) !important;
    border: none !important;
    border-radius: 14px !important;
    padding: 22px 40px !important;
    font-weight: 600 !important;
    font-size: 17px !important;
    transition: all 0.3s ease !important;
    color: white !important;
    width: 100% !important;
    display: block !important;
    box-shadow: 0 4px 15px rgba(66, 133, 244, 0.3) !important;
    letter-spacing: 0.5px !important;
    min-height: 58px !important;
    text-align: center !important;
    cursor: pointer !important;
}

button[type="submit"].btn-signin:hover[b-zstna6jgk3] {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 30px rgba(66, 133, 244, 0.5) !important;
    background: linear-gradient(135deg, #3367d6 0%, #4c63d2 100%) !important;
    color: white !important;
}

button[type="submit"].btn-signin:active[b-zstna6jgk3] {
    transform: translateY(0) !important;
    box-shadow: 0 4px 15px rgba(66, 133, 244, 0.4) !important;
}

/* Form floating with icon - Improved version */
.form-floating.with-icon[b-zstna6jgk3] {
    position: relative !important;
}

.form-floating.with-icon .input-icon[b-zstna6jgk3] {
    position: absolute !important;
    left: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #4285f4 !important;
    font-size: 16px !important;
    z-index: 4 !important;
    pointer-events: none !important;
}

.form-floating.with-icon .form-control[b-zstna6jgk3] {
    padding-left: 50px !important;
    padding-right: 20px !important;
    padding-top: 1.625rem !important;
    padding-bottom: 0.625rem !important;
    height: 58px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    background-color: #f7fafc !important;
    transition: all 0.3s ease !important;
}

.form-floating.with-icon > .form-control:focus[b-zstna6jgk3],
.form-floating.with-icon > .form-control:not(:placeholder-shown)[b-zstna6jgk3] {
    padding-top: 1.625rem !important;
    padding-bottom: 0.625rem !important;
}

.form-floating.with-icon .form-control:focus[b-zstna6jgk3] {
    border-color: #5a67d8 !important;
    box-shadow: 0 0 0 3px rgba(90, 103, 216, 0.1) !important;
    background-color: white !important;
    outline: none !important;
}

.form-floating.with-icon > label[b-zstna6jgk3] {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    padding: 1rem 0.75rem !important;
    padding-left: 50px !important;
    pointer-events: none !important;
    border: 1px solid transparent !important;
    transform-origin: 0 0 !important;
    transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out !important;
    color: #718096 !important;
}

.form-floating.with-icon > .form-control:focus ~ label[b-zstna6jgk3],
.form-floating.with-icon > .form-control:not(:placeholder-shown) ~ label[b-zstna6jgk3],
.form-floating.with-icon > .form-select ~ label[b-zstna6jgk3] {
    opacity: 0.65 !important;
    transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem) !important;
}

/* Auth links styling */
.auth-links[b-zstna6jgk3] {
    text-align: center !important;
    margin-top: 20px !important;
}

.auth-links a[b-zstna6jgk3] {
    color: #667eea !important;
    text-decoration: none !important;
    font-size: 14px !important;
    display: block !important;
    margin: 8px 0 !important;
    transition: color 0.3s ease !important;
}

.auth-links a:hover[b-zstna6jgk3] {
    color: #764ba2 !important;
    text-decoration: underline !important;
}

.auth-links a i[b-zstna6jgk3] {
    width: 16px !important;
    text-align: center !important;
}

/* Validation messages */
.text-danger[b-zstna6jgk3] {
    font-size: 12px !important;
    margin-top: 5px !important;
    color: #e50000 !important;
}

/* Spacing utilities */
.mb-3[b-zstna6jgk3] {
    margin-bottom: 1rem !important;
}
/* /Components/Account/Pages/ResetPassword.razor.rz.scp.css */
/* ResetPassword page specific styles with highest priority */

/* Force full-width buttons */
button[type="submit"].btn-signin[b-matdioiimd] {
    background: linear-gradient(135deg, #4285f4 0%, #5a67d8 100%) !important;
    border: none !important;
    border-radius: 14px !important;
    padding: 22px 40px !important;
    font-weight: 600 !important;
    font-size: 17px !important;
    transition: all 0.3s ease !important;
    color: white !important;
    width: 100% !important;
    display: block !important;
    box-shadow: 0 4px 15px rgba(66, 133, 244, 0.3) !important;
    letter-spacing: 0.5px !important;
    min-height: 58px !important;
    text-align: center !important;
    cursor: pointer !important;
}

button[type="submit"].btn-signin:hover[b-matdioiimd] {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 30px rgba(66, 133, 244, 0.5) !important;
    background: linear-gradient(135deg, #3367d6 0%, #4c63d2 100%) !important;
    color: white !important;
}

button[type="submit"].btn-signin:active[b-matdioiimd] {
    transform: translateY(0) !important;
    box-shadow: 0 4px 15px rgba(66, 133, 244, 0.4) !important;
}

/* Form floating with icon - Improved version */
.form-floating.with-icon[b-matdioiimd] {
    position: relative !important;
}

.form-floating.with-icon .input-icon[b-matdioiimd] {
    position: absolute !important;
    left: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #4285f4 !important;
    font-size: 16px !important;
    z-index: 4 !important;
    pointer-events: none !important;
}

.form-floating.with-icon .form-control[b-matdioiimd] {
    padding-left: 50px !important;
    padding-right: 20px !important;
    padding-top: 1.625rem !important;
    padding-bottom: 0.625rem !important;
    height: 58px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    background-color: #f7fafc !important;
    transition: all 0.3s ease !important;
}

.form-floating.with-icon > .form-control:focus[b-matdioiimd],
.form-floating.with-icon > .form-control:not(:placeholder-shown)[b-matdioiimd] {
    padding-top: 1.625rem !important;
    padding-bottom: 0.625rem !important;
}

.form-floating.with-icon .form-control:focus[b-matdioiimd] {
    border-color: #5a67d8 !important;
    box-shadow: 0 0 0 3px rgba(90, 103, 216, 0.1) !important;
    background-color: white !important;
    outline: none !important;
}

.form-floating.with-icon > label[b-matdioiimd] {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    padding: 1rem 0.75rem !important;
    padding-left: 50px !important;
    pointer-events: none !important;
    border: 1px solid transparent !important;
    transform-origin: 0 0 !important;
    transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out !important;
    color: #718096 !important;
}

.form-floating.with-icon > .form-control:focus ~ label[b-matdioiimd],
.form-floating.with-icon > .form-control:not(:placeholder-shown) ~ label[b-matdioiimd],
.form-floating.with-icon > .form-select ~ label[b-matdioiimd] {
    opacity: 0.65 !important;
    transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem) !important;
}

/* Auth links styling */
.auth-links[b-matdioiimd] {
    text-align: center !important;
    margin-top: 20px !important;
}

.auth-links a[b-matdioiimd] {
    color: #667eea !important;
    text-decoration: none !important;
    font-size: 14px !important;
    display: block !important;
    margin: 8px 0 !important;
    transition: color 0.3s ease !important;
}

.auth-links a:hover[b-matdioiimd] {
    color: #764ba2 !important;
    text-decoration: underline !important;
}

.auth-links a i[b-matdioiimd] {
    width: 16px !important;
    text-align: center !important;
}

/* Validation messages */
.text-danger[b-matdioiimd] {
    font-size: 12px !important;
    margin-top: 5px !important;
    color: #e50000 !important;
}

/* Spacing utilities */
.mb-3[b-matdioiimd] {
    margin-bottom: 1rem !important;
}
/* /Components/Account/Pages/ResetPasswordConfirmation.razor.rz.scp.css */
/* ResetPasswordConfirmation page specific styles with highest priority */

/* Force full-width buttons and links styled as buttons */
a.btn-signin[b-hdd05kruyi] {
    background: linear-gradient(135deg, #4285f4 0%, #5a67d8 100%) !important;
    border: none !important;
    border-radius: 14px !important;
    padding: 22px 40px !important;
    font-weight: 600 !important;
    font-size: 17px !important;
    transition: all 0.3s ease !important;
    color: white !important;
    width: 100% !important;
    display: block !important;
    box-shadow: 0 4px 15px rgba(66, 133, 244, 0.3) !important;
    letter-spacing: 0.5px !important;
    min-height: 58px !important;
    text-align: center !important;
    cursor: pointer !important;
    text-decoration: none !important;
}

a.btn-signin:hover[b-hdd05kruyi] {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 30px rgba(66, 133, 244, 0.5) !important;
    background: linear-gradient(135deg, #3367d6 0%, #4c63d2 100%) !important;
    color: white !important;
    text-decoration: none !important;
}

a.btn-signin:active[b-hdd05kruyi] {
    transform: translateY(0) !important;
    box-shadow: 0 4px 15px rgba(66, 133, 244, 0.4) !important;
}

/* Alert styling */
.alert[b-hdd05kruyi] {
    border-radius: 12px !important;
    border: none !important;
    padding: 20px !important;
}

.alert-success[b-hdd05kruyi] {
    background-color: #d1ecf1 !important;
    color: #0c5460 !important;
}

.alert h5[b-hdd05kruyi] {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
    color: #0c5460 !important;
    font-weight: 600 !important;
}

.alert p[b-hdd05kruyi] {
    margin-bottom: 0 !important;
    font-size: 14px !important;
}

/* Spacing utilities */
.mb-3[b-hdd05kruyi] {
    margin-bottom: 1rem !important;
}

.mb-4[b-hdd05kruyi] {
    margin-bottom: 1.5rem !important;
}

.text-center[b-hdd05kruyi] {
    text-align: center !important;
}
/* /Components/Account/Shared/AuthLayout.razor.rz.scp.css */
.auth-container[b-ulqcds97o9] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    z-index: 1000;
}

.auth-background[b-ulqcds97o9] {
    background: linear-gradient(135deg, #5865db 0%, #8b6bb8 50%, #a878b8 100%);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.auth-card[b-ulqcds97o9] {
    background: white;
    border-radius: 24px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
    width: 100%;
    max-width: 620px;
    padding: 0;
    box-sizing: border-box;
    margin: 40px 20px;
    overflow: hidden;
}

/* Wide layout for pages with more content (like Register) */
.auth-card.wide[b-ulqcds97o9] {
    max-width: 750px;
}

.auth-header[b-ulqcds97o9] {
    background: linear-gradient(135deg, #5865db 0%, #8b6bb8 50%, #a878b8 100%);
    padding: 60px 50px 50px;
    text-align: center;
    color: white;
}

.logo-container[b-ulqcds97o9] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 32px;
}

.logo-image[b-ulqcds97o9] {
    width: 200px;
    height: 200px;
    opacity: 1;
    object-fit: contain;
    border-radius: 50%;
    padding: 5px;
    box-sizing: border-box;
}

.logo-icon[b-ulqcds97o9] {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 50px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.logo-text[b-ulqcds97o9] {
    color: white;
}

.logo-text-secondary[b-ulqcds97o9] {
    color: #ffd700;
}

.company-name[b-ulqcds97o9] {
    color: white;
    font-weight: 600;
    font-size: 2rem;
    letter-spacing: -0.5px;
    margin: 12px 0 0 0;
}

.auth-header-title[b-ulqcds97o9] {
    color: white;
    font-size: 2.25rem;
    font-weight: 700;
    margin: 24px 0 0 0;
}

.auth-header-subtitle[b-ulqcds97o9] {
    color: rgba(255, 255, 255, 0.95);
    font-size: 1.1rem;
    margin: 12px 0 0 0;
    font-weight: 400;
}

.auth-divider[b-ulqcds97o9] {
    width: 50px;
    height: 3px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
    margin: 16px auto 0;
    border-radius: 2px;
}

.auth-content[b-ulqcds97o9] {
    padding: 56px 50px;
    margin-bottom: 0;
}

.auth-footer[b-ulqcds97o9] {
    text-align: center;
    margin-top: 24px;
}

.auth-footer small[b-ulqcds97o9] {
    color: #a0aec0;
    font-size: 12px;
}

/* Form styling */
.auth-content button[type="submit"][b-ulqcds97o9] {
    width: 100% !important;
    display: block !important;
}

.auth-content .form-group[b-ulqcds97o9] {
    margin-bottom: 32px;
}

.auth-content .form-label[b-ulqcds97o9] {
    color: #2d3748;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 14px;
    display: block;
}

.auth-content .form-label i[b-ulqcds97o9] {
    color: #5865db;
    font-size: 16px;
    width: 20px;
}

.auth-content .form-control[b-ulqcds97o9] {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px 18px;
    font-size: 15px;
    transition: all 0.3s ease;
    background-color: #f8f9fc;
    width: 100%;
    box-sizing: border-box;
    color: #2d3748;
    height: auto;
}

.auth-content .form-control:focus[b-ulqcds97o9] {
    border-color: #5865db;
    box-shadow: 0 0 0 3px rgba(88, 101, 219, 0.1);
    background-color: white;
    outline: none;
}

.auth-content .form-control[b-ulqcds97o9]::placeholder {
    color: #a0aec0;
    font-size: 15px;
}

.auth-content .input-group[b-ulqcds97o9] {
    display: flex;
    flex-wrap: nowrap;
}

.auth-content .input-group .form-control[b-ulqcds97o9] {
    border-right: 1px solid #e2e8f0;
}

.auth-content .input-group-text[b-ulqcds97o9] {
    background-color: white;
    border: 1px solid #e2e8f0;
    border-right: none;
    color: #a0aec0;
    font-size: 14px;
}

.auth-content .input-group .form-control:focus[b-ulqcds97o9] {
    border-right-color: #5865db;
}

.auth-content .input-group .btn-outline-secondary[b-ulqcds97o9] {
    border: 1px solid #e2e8f0;
    border-left: none;
    color: #a0aec0;
    background-color: white;
    padding: 0 16px;
    min-width: 50px;
}

.auth-content .input-group .btn-outline-secondary:hover[b-ulqcds97o9] {
    background-color: #f8f9fc;
    border-color: #ccc;
    color: #5865db;
}

.auth-content .input-group .btn-outline-secondary:active[b-ulqcds97o9],
.auth-content .input-group .btn-outline-secondary:focus[b-ulqcds97o9] {
    color: #5865db;
    border-color: #5865db;
    box-shadow: 0 0 0 3px rgba(88, 101, 219, 0.1);
    outline: none;
}

.auth-content .btn-signin[b-ulqcds97o9] {
    background: linear-gradient(135deg, #5865db 0%, #8b6bb8 100%) !important;
    border: none !important;
    border-radius: 14px !important;
    padding: 18px 40px !important;
    font-weight: 600 !important;
    font-size: 17px !important;
    transition: all 0.3s ease !important;
    color: white !important;
    width: 100% !important;
    display: block !important;
    box-shadow: 0 4px 15px rgba(88, 101, 219, 0.3) !important;
    letter-spacing: 0.5px !important;
    min-height: 60px !important;
    text-align: center !important;
}

.auth-content .btn-signin:hover[b-ulqcds97o9] {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 30px rgba(88, 101, 219, 0.4) !important;
    background: linear-gradient(135deg, #4a52c4 0%, #7a5aa3 100%) !important;
    color: white !important;
}

.auth-content .btn-signin:active[b-ulqcds97o9] {
    transform: translateY(0) !important;
    box-shadow: 0 4px 15px rgba(88, 101, 219, 0.3) !important;
}

.auth-content .btn-primary i[b-ulqcds97o9] {
    width: 16px;
    text-align: center;
}

.auth-content .btn-link[b-ulqcds97o9] {
    color: #5865db;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s ease;
}

.auth-content .btn-link:hover[b-ulqcds97o9] {
    color: #4a52c4;
    text-decoration: underline;
}

.forgot-password-link[b-ulqcds97o9] {
    color: #5865db;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: color 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.forgot-password-link:hover[b-ulqcds97o9] {
    color: #4a52c4;
    text-decoration: none;
}

.auth-content .btn-passkey[b-ulqcds97o9] {
    border: 2px solid #5865db !important;
    border-radius: 14px !important;
    padding: 14px 32px !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    transition: all 0.3s ease !important;
    color: #5865db !important;
    background-color: transparent !important;
    width: 100% !important;
    display: block !important;
    min-height: 52px !important;
    text-align: center !important;
}

.auth-content .btn-passkey:hover[b-ulqcds97o9] {
    background-color: #5865db !important;
    color: white !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 20px rgba(88, 101, 219, 0.3) !important;
}

.auth-content .btn-passkey:active[b-ulqcds97o9] {
    transform: translateY(0) !important;
}

/* Additional spacing utilities */
.mb-6[b-ulqcds97o9] {
    margin-bottom: 2rem !important;
}

.auth-content .form-check[b-ulqcds97o9] {
    margin: 0;
    display: flex;
    align-items: center;
}

.auth-content .form-check-input[b-ulqcds97o9] {
    border-radius: 6px;
    border: 2px solid #e2e8f0;
    width: 20px;
    height: 20px;
    transition: all 0.2s ease;
    margin-top: 0;
    flex-shrink: 0;
}

.auth-content .form-check-input:checked[b-ulqcds97o9] {
    background-color: #5865db;
    border-color: #5865db;
}

.auth-content .form-check-input:focus[b-ulqcds97o9] {
    box-shadow: 0 0 0 3px rgba(88, 101, 219, 0.1);
}

.auth-content .form-check-label[b-ulqcds97o9] {
    color: #4a5568;
    font-size: 14px;
    margin-left: 10px;
    font-weight: 400;
    margin-bottom: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .auth-card[b-ulqcds97o9] {
        padding: 0;
        margin: 30px 12px;
        max-width: 100%;
    }

    .auth-header[b-ulqcds97o9] {
        padding: 48px 40px 40px;
    }

    .auth-content[b-ulqcds97o9] {
        padding: 48px 40px;
    }

    .logo-image[b-ulqcds97o9] {
        width: 100px;
        height: 100px;
    }

    .auth-header-title[b-ulqcds97o9] {
        font-size: 1.875rem;
    }
}

@media (max-width: 576px) {
    .auth-card[b-ulqcds97o9] {
        padding: 0;
        margin: 20px 12px;
    }

    .auth-header[b-ulqcds97o9] {
        padding: 40px 32px 32px;
    }

    .auth-content[b-ulqcds97o9] {
        padding: 40px 32px;
    }

    .auth-header-title[b-ulqcds97o9] {
        font-size: 1.5rem;
    }

    .logo-image[b-ulqcds97o9] {
        width: 80px;
        height: 80px;
    }
}

@media (max-width: 480px) {
    .auth-card[b-ulqcds97o9] {
        padding: 0;
        margin: 15px 10px;
    }

    .auth-header[b-ulqcds97o9] {
        padding: 32px 24px 24px;
    }

    .auth-content[b-ulqcds97o9] {
        padding: 32px 24px;
    }

    .auth-header-title[b-ulqcds97o9] {
        font-size: 1.25rem;
    }

    .auth-header-subtitle[b-ulqcds97o9] {
        font-size: 0.875rem;
    }

    .logo-image[b-ulqcds97o9] {
        width: 70px;
        height: 70px;
    }
}

/* Links styling */
.auth-links[b-ulqcds97o9] {
    text-align: center;
    margin-top: 20px;
}

.auth-links a[b-ulqcds97o9] {
    color: #5865db;
    text-decoration: none;
    font-size: 14px;
    display: block;
    margin: 8px 0;
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-links a:hover[b-ulqcds97o9] {
    color: #4a52c4;
    text-decoration: underline;
}

.auth-links a i[b-ulqcds97o9] {
    width: 16px;
    text-align: center;
}

/* Status message styling */
.auth-content .alert[b-ulqcds97o9] {
    border-radius: 8px;
    border: none;
    font-size: 14px;
    margin-bottom: 20px;
}

.auth-content .alert-danger[b-ulqcds97o9] {
    background-color: #fee;
    color: #c33;
}

.auth-content .alert-success[b-ulqcds97o9] {
    background-color: #efe;
    color: #3c3;
}

/* Validation styling */
.auth-content .text-danger[b-ulqcds97o9] {
    font-size: 12px;
    margin-top: 5px;
    color: #dc3545;
}

.auth-content .validation-summary-errors[b-ulqcds97o9] {
    background-color: #f8d7da;
    color: #721c24;
    padding: 10px 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 14px;
}

/* OR divider styling - Updated for better centering */
.auth-content .auth-divider-or[b-ulqcds97o9] {
    position: relative;
    text-align: center;
    margin: 32px 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 20px;
}

.auth-content .auth-divider-or[b-ulqcds97o9]::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #e2e8f0;
    z-index: 1;
}

.auth-content .auth-divider-or span[b-ulqcds97o9] {
    background: white;
    padding: 0 24px;
    color: #a0aec0;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
    z-index: 2;
    position: relative;
    display: inline-block;
}

/* Security message styling */
.security-message[b-ulqcds97o9] {
    color: #718096;
    font-size: 13px;
    text-align: center;
    margin: 16px 0 !important;
}

.security-message i[b-ulqcds97o9] {
    color: #5865db;
}

.login-container[b-ulqcds97o9] {
    display: flex;
    flex-direction: column;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-7rqac6ygyc] {
  position: relative;
  display: flex;
  flex-direction: column;
}

main[b-7rqac6ygyc] {
  flex: 1;
}

.sidebar[b-7rqac6ygyc] {
  background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-7rqac6ygyc] {
  background-color: #f7f7f7;
  border-bottom: 1px solid #d6d5d5;
  justify-content: flex-end;
  height: 4rem;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 100;
}

  .top-row a[b-7rqac6ygyc], .top-row .btn-link[b-7rqac6ygyc] {
    white-space: nowrap;
    margin-left: 0.5rem;
    text-decoration: none;
  }

  .top-row[b-7rqac6ygyc]  a:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
  }

/* User Profile Link Styles */
[b-7rqac6ygyc] .user-profile-link {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.375rem 0.75rem;
  border-radius: 2rem;
  text-decoration: none;
  transition: all 0.3s ease;
  background-color: transparent;
}

  [b-7rqac6ygyc] .user-profile-link:hover {
    background-color: rgba(0, 123, 255, 0.08);
    transform: translateY(-1px);
  }

[b-7rqac6ygyc] .user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.875rem;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
  transition: all 0.3s ease;
}

[b-7rqac6ygyc] .user-profile-link:hover .user-avatar {
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
  transform: scale(1.05);
}

[b-7rqac6ygyc] .user-name-link {
  font-size: 0.95rem;
  font-weight: 600;
  color: #374151;
  white-space: nowrap;
  transition: color 0.3s ease;
}

[b-7rqac6ygyc] .user-profile-link:hover .user-name-link {
  color: #007bff;
}

/* Icon Button Styles */
[b-7rqac6ygyc] .icon-button {
  position: relative;
  background: none;
  border: none;
  color: #333;
  font-size: 1.25rem;
  padding: 0.5rem;
  cursor: pointer;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  text-decoration: none;
}

  [b-7rqac6ygyc] .icon-button:hover {
    background-color: rgba(0, 123, 255, 0.1);
    color: #007bff;
  }

[b-7rqac6ygyc] .icon-container {
  position: relative;
}

/* Notification Badge */
[b-7rqac6ygyc] .notification-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  background-color: #dc3545;
  color: white;
  border-radius: 10px;
  padding: 2px 6px;
  font-size: 0.65rem;
  font-weight: bold;
  line-height: 1;
  min-width: 18px;
  text-align: center;
}

/* Notification Popup */
[b-7rqac6ygyc] .notification-popup {
  position: absolute;
  top: 50px;
  right: 0;
  width: 360px;
  max-height: 480px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  z-index: 9999;
  overflow: hidden;
  animation: slideDown-b-7rqac6ygyc 0.2s ease-out;
}

@keyframes slideDown-b-7rqac6ygyc {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

[b-7rqac6ygyc] .notification-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #e9ecef;
  background-color: #f8f9fa;
}

  [b-7rqac6ygyc] .notification-header h6 {
    font-weight: 600;
    color: #333;
    margin: 0;
  }

[b-7rqac6ygyc] .btn-close-popup {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #6c757d;
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  line-height: 1;
  transition: color 0.2s;
}

  [b-7rqac6ygyc] .btn-close-popup:hover {
    color: #333;
  }

[b-7rqac6ygyc] .notification-list {
  max-height: 360px;
  overflow-y: auto;
}

[b-7rqac6ygyc] .notification-item {
  display: flex;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #e9ecef;
  transition: background-color 0.2s;
  cursor: pointer;
}

  [b-7rqac6ygyc] .notification-item:hover {
    background-color: #f8f9fa;
  }

  [b-7rqac6ygyc] .notification-item:last-child {
    border-bottom: none;
  }

[b-7rqac6ygyc] .notification-icon {
  flex-shrink: 0;
  font-size: 1.25rem;
  padding-top: 0.25rem;
}

[b-7rqac6ygyc] .notification-content {
  flex: 1;
  min-width: 0;
}

[b-7rqac6ygyc] .notification-title {
  font-weight: 600;
  font-size: 0.9rem;
  color: #333;
  margin: 0 0 0.25rem 0;
}

[b-7rqac6ygyc] .notification-text {
  font-size: 0.85rem;
  color: #6c757d;
  margin: 0 0 0.5rem 0;
  line-height: 1.4;
}

[b-7rqac6ygyc] .notification-time {
  font-size: 0.75rem;
  color: #adb5bd;
}

[b-7rqac6ygyc] .notification-footer {
  padding: 0.75rem 1.25rem;
  border-top: 1px solid #e9ecef;
  background-color: #f8f9fa;
  text-align: center;
}

[b-7rqac6ygyc] .view-all-link {
  color: #007bff;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  transition: color 0.2s;
}

  [b-7rqac6ygyc] .view-all-link:hover {
    color: #0056b3;
    text-decoration: underline;
  }

/* Simple Notification Popup Styles */
[b-7rqac6ygyc] .simple-notification-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 70px 20px 20px 20px;
  z-index: 20000;
  animation: fadeIn-b-7rqac6ygyc 0.2s ease-out;
}

@keyframes fadeIn-b-7rqac6ygyc {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

[b-7rqac6ygyc] .simple-notification-popup {
  width: 380px;
  max-height: 500px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  animation: slideDownFade-b-7rqac6ygyc 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  border: 1px solid rgba(0, 0, 0, 0.1);
}

@keyframes slideDownFade-b-7rqac6ygyc {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

[b-7rqac6ygyc] .simple-notification-popup .notification-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid #e9ecef;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

[b-7rqac6ygyc] .simple-notification-popup .notification-header h6 {
  font-weight: 700;
  color: #2d3748;
  margin: 0;
  font-size: 1.1rem;
}

[b-7rqac6ygyc] .simple-notification-popup .btn-close-popup {
  background: #f1f5f9;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 1.25rem;
  color: #64748b;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

[b-7rqac6ygyc] .simple-notification-popup .btn-close-popup:hover {
  background: #e2e8f0;
  color: #334155;
  transform: scale(1.1);
}

[b-7rqac6ygyc] .simple-notification-popup .notification-list {
  max-height: 360px;
  overflow-y: auto;
}

[b-7rqac6ygyc] .simple-notification-popup .notification-item {
  display: flex;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid #f0f0f0;
  transition: all 0.2s ease;
  cursor: pointer;
}

[b-7rqac6ygyc] .simple-notification-popup .notification-item:hover {
  background: linear-gradient(135deg, #f8f9fa 0%, #f1f5f9 100%);
  transform: translateX(2px);
}

[b-7rqac6ygyc] .simple-notification-popup .notification-item:last-child {
  border-bottom: none;
}

[b-7rqac6ygyc] .simple-notification-popup .notification-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
  margin-top: 0.25rem;
}

[b-7rqac6ygyc] .simple-notification-popup .notification-icon .text-success {
  background: linear-gradient(135deg, rgba(67, 233, 123, 0.1) 0%, rgba(56, 249, 215, 0.1) 100%);
  color: #10b981;
  border: 2px solid rgba(16, 185, 129, 0.2);
}

[b-7rqac6ygyc] .simple-notification-popup .notification-icon .text-primary {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(99, 102, 241, 0.1) 100%);
  color: #3b82f6;
  border: 2px solid rgba(59, 130, 246, 0.2);
}

[b-7rqac6ygyc] .simple-notification-popup .notification-content {
  flex: 1;
  min-width: 0;
}

[b-7rqac6ygyc] .simple-notification-popup .notification-title {
  font-weight: 600;
  font-size: 0.95rem;
  color: #2d3748;
  margin: 0 0 0.375rem 0;
  line-height: 1.3;
}

[b-7rqac6ygyc] .simple-notification-popup .notification-text {
  font-size: 0.875rem;
  color: #64748b;
  margin: 0 0 0.5rem 0;
  line-height: 1.4;
}

[b-7rqac6ygyc] .simple-notification-popup .notification-time {
  font-size: 0.75rem;
  color: #9ca3af;
  font-weight: 500;
}

[b-7rqac6ygyc] .simple-notification-popup .notification-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid #e9ecef;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  text-align: center;
}

[b-7rqac6ygyc] .simple-notification-popup .view-all-link {
  color: #667eea;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 600;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

[b-7rqac6ygyc] .simple-notification-popup .view-all-link:hover {
  color: #764ba2;
  text-decoration: none;
  transform: translateY(-1px);
}

@media (max-width: 640.98px) {
  .top-row[b-7rqac6ygyc] {
    justify-content: space-between;
  }

  [b-7rqac6ygyc] .notification-popup {
    right: -10px;
    width: 320px;
  }

  [b-7rqac6ygyc] .user-name-link {
    display: none;
  }

  [b-7rqac6ygyc] .user-profile-link {
    padding: 0.375rem;
  }
}

@media (min-width: 641px) {
  .page[b-7rqac6ygyc] {
    flex-direction: row;
  }

  .sidebar[b-7rqac6ygyc] {
    width: 280px;
    height: 100vh;
    position: sticky;
    top: 0;
  }

  .top-row[b-7rqac6ygyc] {
    position: sticky;
    top: 0;
    z-index: 100;
    height: 4rem;
  }
}

#blazor-error-ui[b-7rqac6ygyc] {
  color-scheme: light only;
  background: lightyellow;
  bottom: 0;
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
  display: none;
  left: 0;
  padding: 0.6rem 1.25rem 0.7rem 1.25rem;
  position: fixed;
  width: 100%;
  z-index: 1000;
}

  #blazor-error-ui .dismiss[b-7rqac6ygyc] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
  }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-cwd3n5nvmu] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-cwd3n5nvmu] {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row[b-cwd3n5nvmu] {
    min-height: 4rem;
    background: linear-gradient(135deg, #1a1f35 0%, #0f1419 100%);
}

.navbar-brand[b-cwd3n5nvmu] {
    font-size: 1.3rem;
    font-weight: 600;
    padding: 0.5rem;
}

.bi[b-cwd3n5nvmu] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-cwd3n5nvmu] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-cwd3n5nvmu] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-cwd3n5nvmu] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.bi-lock-nav-menu[b-cwd3n5nvmu] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zM5 8h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
}

.bi-person-nav-menu[b-cwd3n5nvmu] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person' viewBox='0 0 16 16'%3E%3Cpath d='M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4Zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10Z'/%3E%3C/svg%3E");
}

.bi-person-badge-nav-menu[b-cwd3n5nvmu] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-badge' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0z'/%3E%3Cpath d='M4.5 0A2.5 2.5 0 0 0 2 2.5V14a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2.5A2.5 2.5 0 0 0 11.5 0h-7zM3 2.5A1.5 1.5 0 0 1 4.5 1h7A1.5 1.5 0 0 1 13 2.5v10.795a4.2 4.2 0 0 0-.776-.492C11.392 12.387 10.063 12 8 12s-3.392.387-4.224.803a4.2 4.2 0 0 0-.776.492V2.5z'/%3E%3C/svg%3E");
}

.bi-person-fill-nav-menu[b-cwd3n5nvmu] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-fill' viewBox='0 0 16 16'%3E%3Cpath d='M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3Zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z'/%3E%3C/svg%3E");
}

.bi-arrow-bar-left-nav-menu[b-cwd3n5nvmu] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-arrow-bar-left' viewBox='0 0 16 16'%3E%3Cpath d='M12.5 15a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5ZM10 8a.5.5 0 0 1-.5.5H3.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L3.707 7.5H9.5a.5.5 0 0 1 .5.5Z'/%3E%3C/svg%3E");
}

.nav-item[b-cwd3n5nvmu] {
    font-size: 0.8rem;
    padding-bottom: 0.35rem;
}

    .nav-item:first-of-type[b-cwd3n5nvmu] {
        padding-top: 0.8rem;
    }

    .nav-item:last-of-type[b-cwd3n5nvmu] {
        padding-bottom: 0.8rem;
    }

    .nav-item[b-cwd3n5nvmu]  .nav-link {
        color: #d7d7d7;
        background: none;
        border: none;
        border-radius: 6px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
        padding: 0 1rem;
    }

.nav-item[b-cwd3n5nvmu]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-cwd3n5nvmu]  .nav-link:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

.nav-scrollable[b-cwd3n5nvmu] {
    display: none;
    background: linear-gradient(180deg, #1a1f35 0%, #0f1419 100%);
}

/* Flex navigation container */
.nav.flex-column[b-cwd3n5nvmu] {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Container for main navigation groups */
.nav-groups-container[b-cwd3n5nvmu] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding-bottom: 1rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

/* Custom scrollbar for webkit browsers */
.nav-groups-container[b-cwd3n5nvmu]::-webkit-scrollbar {
    width: 6px;
}

.nav-groups-container[b-cwd3n5nvmu]::-webkit-scrollbar-track {
    background: transparent;
}

.nav-groups-container[b-cwd3n5nvmu]::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
}

.nav-groups-container[b-cwd3n5nvmu]::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

.navbar-toggler:checked ~ .nav-scrollable[b-cwd3n5nvmu] {
    display: block;
}

/* Navigation Group Styles */
.nav-group[b-cwd3n5nvmu] {
    margin-bottom: 1.5rem;
}

.nav-group-header[b-cwd3n5nvmu] {
    display: flex;
    align-items: center;
    padding: 0.75rem 1.5rem;
    margin-bottom: 0.6rem;
    background: rgba(255, 255, 255, 0.08);
    border-left: 4px solid rgba(99, 179, 237, 0.8);
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.85);
    height: 2.8rem;
}

.nav-group-title[b-cwd3n5nvmu] {
    font-weight: 700;
}

.nav-group .nav-item[b-cwd3n5nvmu] {
    padding-bottom: 0.25rem;
    margin-left: 0.5rem;
}

.nav-group .nav-item[b-cwd3n5nvmu]  .nav-link {
    padding-left: 1.5rem;
    border-radius: 0.5rem;
    margin: 0.1rem 0;
    transition: all 0.2s ease;
    color: rgba(255, 255, 255, 0.8);
    position: relative;
    font-size: 0.8rem;
    height: 2.6rem;
    line-height: 2.6rem;
}

.nav-group .nav-item[b-cwd3n5nvmu]  .nav-link:hover {
    background: linear-gradient(135deg, rgba(99, 179, 237, 0.15) 0%, rgba(99, 179, 237, 0.05) 100%);
    color: white;
    transform: translateX(4px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.nav-group .nav-item[b-cwd3n5nvmu]  .nav-link.active {
    background: linear-gradient(135deg, rgba(99, 179, 237, 0.25) 0%, rgba(99, 179, 237, 0.1) 100%);
    color: white;
    font-weight: 600;
    border-left: 3px solid rgba(99, 179, 237, 1);
    transform: translateX(2px);
}

.nav-group .nav-item[b-cwd3n5nvmu]  .nav-link span {
    opacity: 0.9;
}

.nav-group .nav-item[b-cwd3n5nvmu]  .nav-link:hover span,
.nav-group .nav-item[b-cwd3n5nvmu]  .nav-link.active span {
    opacity: 1;
}

/* Authentication Section Styles */
.auth-section[b-cwd3n5nvmu] {
    flex-shrink: 0;
    padding: 1rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(0, 0, 0, 0.15);
    margin-top: 0;
}

.auth-section .nav-item[b-cwd3n5nvmu] {
    margin-left: 0;
}

.logout-btn[b-cwd3n5nvmu] {
    background: none !important;
    border: none !important;
    text-align: left !important;
    width: 100% !important;
    color: rgba(255, 255, 255, 0.8) !important;
    padding-left: 1.5rem !important;
    border-radius: 0.5rem !important;
    transition: all 0.2s ease !important;
    font-size: 0.8rem !important;
    height: 2.6rem !important;
    line-height: 2.6rem !important;
}

.logout-btn:hover[b-cwd3n5nvmu] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(220, 38, 38, 0.1) 100%) !important;
    color: white !important;
    transform: translateX(2px) !important;
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .nav-group-header[b-cwd3n5nvmu] {
        padding: 0.6rem 1.2rem;
        font-size: 0.7rem;
        height: 2.6rem;
    }
    
    .nav-group .nav-item[b-cwd3n5nvmu]  .nav-link {
        padding-left: 1.3rem;
        height: 2.5rem;
        line-height: 2.5rem;
        font-size: 0.75rem;
    }
    
    .nav-scrollable[b-cwd3n5nvmu] {
        width: 100%;
        height: calc(100vh - 4rem);
        overflow-y: hidden;
    }
    
    .nav-groups-container[b-cwd3n5nvmu] {
        overflow-y: auto;
    }
    
    .auth-section[b-cwd3n5nvmu] {
        flex-shrink: 0;
        background: rgba(0, 0, 0, 0.25);
    }
}

/* Hover effects for icons */
.nav-group .nav-item[b-cwd3n5nvmu]  .nav-link .fa-solid {
    transition: all 0.2s ease;
    width: 22px;
    text-align: center;
    font-size: 1rem;
    margin-right: 0.75rem;
}

.nav-group .nav-item[b-cwd3n5nvmu]  .nav-link:hover .fa-solid {
    transform: scale(1.1);
}

/* Special styling for car wash icons */
.nav-group .nav-item[b-cwd3n5nvmu]  .nav-link .fa-car-wash {
    color: rgba(100, 200, 255, 0.9);
}

.nav-group .nav-item[b-cwd3n5nvmu]  .nav-link:hover .fa-car-wash {
    color: rgb(100, 200, 255);
}

/* Enhanced group header icon styling */
.nav-group-header .fa-solid[b-cwd3n5nvmu] {
    font-size: 1rem;
    margin-right: 0.75rem;
    opacity: 0.9;
}

/* Better spacing for menu items */
.nav-group .nav-item[b-cwd3n5nvmu]  .nav-link span:not(.fa-solid) {
    font-weight: 500;
    letter-spacing: 0.025em;
}

    @media (min-width: 641px) {
    .navbar-toggler[b-cwd3n5nvmu] {
        display: none;
    }

    .nav-scrollable[b-cwd3n5nvmu] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Use full height and arrange content to fill without scrolling */
        height: calc(100vh - 4rem);
        overflow-y: hidden;
        display: flex;
        flex-direction: column;
        width: 280px;
        min-width: 280px;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-xmei3qf59f],
.components-reconnect-repeated-attempt-visible[b-xmei3qf59f],
.components-reconnect-failed-visible[b-xmei3qf59f],
.components-pause-visible[b-xmei3qf59f],
.components-resume-failed-visible[b-xmei3qf59f],
.components-rejoining-animation[b-xmei3qf59f] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-xmei3qf59f],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-xmei3qf59f],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-xmei3qf59f],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-xmei3qf59f],
#components-reconnect-modal.components-reconnect-retrying[b-xmei3qf59f],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-xmei3qf59f],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-xmei3qf59f],
#components-reconnect-modal.components-reconnect-failed[b-xmei3qf59f],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-xmei3qf59f] {
    display: block;
}


#components-reconnect-modal[b-xmei3qf59f] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-xmei3qf59f 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-xmei3qf59f 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-xmei3qf59f 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-xmei3qf59f]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-xmei3qf59f 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-xmei3qf59f {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-xmei3qf59f {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-xmei3qf59f {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-xmei3qf59f] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-xmei3qf59f] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-xmei3qf59f] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-xmei3qf59f] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-xmei3qf59f] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-xmei3qf59f] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-xmei3qf59f] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-xmei3qf59f 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-xmei3qf59f] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-xmei3qf59f {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Analytics.razor.rz.scp.css */
/* Modern Header Styles */
.modern-page-header[b-hxsos5vtsk] {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 0;
}

.header-icon[b-hxsos5vtsk] {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: white;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.modern-page-header:hover .header-icon[b-hxsos5vtsk] {
    transform: scale(1.05);
}

.header-content[b-hxsos5vtsk] {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.5rem;
    padding-top: 0.25rem;
    flex: 1;
}

.header-content h1[b-hxsos5vtsk] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    line-height: 1.2;
}

.header-content p[b-hxsos5vtsk] {
    font-size: 0.95rem;
    color: #64748b;
    margin: 0;
    font-weight: 400;
    line-height: 1.4;
}

.header-filter[b-hxsos5vtsk] {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.5rem;
    min-width: 200px;
    padding-top: 0.25rem;
    flex-shrink: 0;
}

.header-filter .form-label[b-hxsos5vtsk] {
    font-size: 0.875rem;
    margin-bottom: 0.5rem !important;
}

.header-filter .form-select[b-hxsos5vtsk] {
    border: 2px solid #cbd5e1;
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    transition: all 0.3s ease;
}

.header-filter .form-select:focus[b-hxsos5vtsk] {
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.filter-section[b-hxsos5vtsk] {
    padding-bottom: 1.5rem;
}

.filter-section .form-select[b-hxsos5vtsk] {
    border: 2px solid #cbd5e1;
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    transition: all 0.3s ease;
}

.filter-section .form-select:focus[b-hxsos5vtsk] {
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* Date Range Filter Styling */
.date-range-filter[b-hxsos5vtsk] {
    min-width: 180px;
}

.date-range-filter .form-select[b-hxsos5vtsk] {
    border: 2px solid #cbd5e1;
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    transition: all 0.3s ease;
}

.date-range-filter .form-select:focus[b-hxsos5vtsk] {
    border-color: #0ea5e9;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}

/* Custom Tab Styles */
.nav-pills-custom[b-hxsos5vtsk] {
    background: white;
    padding: 0.5rem;
    border-radius: 0.5rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.nav-pills-custom .nav-link[b-hxsos5vtsk] {
    border-radius: 0.375rem;
    padding: 0.75rem 1.25rem;
    color: #6c757d;
    font-weight: 500;
    transition: all 0.3s ease;
    white-space: nowrap;
    border: 1px solid transparent;
}

.nav-pills-custom .nav-link:hover[b-hxsos5vtsk] {
    background-color: #f8f9fa;
    color: #495057;
    transform: translateY(-2px);
}

.nav-pills-custom .nav-link.active[b-hxsos5vtsk] {
    color: white;
    box-shadow: 0 4px 6px rgba(102, 126, 234, 0.3);
}

/* Individual Tab Colors */
#overview-tab[b-hxsos5vtsk] {
    color: #7c3aed;
}

#overview-tab:hover[b-hxsos5vtsk] {
    color: #6d28d9;
}

#overview-tab.active[b-hxsos5vtsk] {
    color: white;
}

#trends-tab[b-hxsos5vtsk] {
    color: #0891b2;
}

#trends-tab:hover[b-hxsos5vtsk] {
    color: #0e7490;
}

#trends-tab.active[b-hxsos5vtsk] {
    color: white;
}

#comparison-tab[b-hxsos5vtsk] {
    color: #059669;
}

#comparison-tab:hover[b-hxsos5vtsk] {
    color: #047857;
}

#comparison-tab.active[b-hxsos5vtsk] {
    color: white;
}

#overdue-tab[b-hxsos5vtsk] {
    color: #dc2626;
}

#overdue-tab:hover[b-hxsos5vtsk] {
    color: #b91c1c;
}

#overdue-tab.active[b-hxsos5vtsk] {
    color: white;
}

#occupancy-tab[b-hxsos5vtsk] {
    color: #d97706;
}

#occupancy-tab:hover[b-hxsos5vtsk] {
    color: #b45309;
}

#occupancy-tab.active[b-hxsos5vtsk] {
    color: white;
}

#performance-tab[b-hxsos5vtsk] {
    color: #db2777;
}

#performance-tab:hover[b-hxsos5vtsk] {
    color: #be123c;
}

#performance-tab.active[b-hxsos5vtsk] {
    color: white;
}

/* Tab Content Animations */
.tab-pane[b-hxsos5vtsk] {
    display: none;
    animation: fadeIn-b-hxsos5vtsk 0.3s ease-in;
}

.tab-pane.active[b-hxsos5vtsk] {
    display: block;
}

@keyframes fadeIn-b-hxsos5vtsk {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in[b-hxsos5vtsk] {
    animation: fadeIn-b-hxsos5vtsk 0.3s ease-in;
}

/* Enhanced Action Buttons */
.btn-action[b-hxsos5vtsk] {
    text-align: center;
    padding: 1.25rem 1rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    border-width: 2px;
}

.btn-action:hover[b-hxsos5vtsk] {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

/* Gradient Background */
.bg-gradient-primary[b-hxsos5vtsk] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* Skeleton Loading Styles */
.skeleton-tab[b-hxsos5vtsk] {
    width: 120px;
    height: 42px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading-b-hxsos5vtsk 1.5s infinite;
    border-radius: 0.375rem;
}

.skeleton-text[b-hxsos5vtsk] {
    height: 20px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading-b-hxsos5vtsk 1.5s infinite;
    border-radius: 4px;
    width: 100%;
}

.skeleton-text-sm[b-hxsos5vtsk] {
    height: 14px;
    width: 60%;
}

.skeleton-text-lg[b-hxsos5vtsk] {
    height: 32px;
    width: 80%;
}

.skeleton-text-xs[b-hxsos5vtsk] {
    height: 12px;
    width: 50%;
}

.skeleton-chart[b-hxsos5vtsk] {
    height: 200px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading-b-hxsos5vtsk 1.5s infinite;
    border-radius: 8px;
}

@keyframes loading-b-hxsos5vtsk {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Card Enhancements */
.card[b-hxsos5vtsk] {
    transition: all 0.3s ease;
}

.card:hover[b-hxsos5vtsk] {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

/* ============================================
   ANALYTICS TABLES & COMPONENTS - STYLES
   ============================================ */

/* Base Table Styles */
.analytics-table[b-hxsos5vtsk] {
    margin-bottom: 0;
}

.analytics-table thead th[b-hxsos5vtsk] {
    background-color: #f8f9fa;
    color: #495057;
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #dee2e6;
    padding: 1rem;
    text-align: center;
}

.analytics-table tbody td[b-hxsos5vtsk] {
    padding: 1rem;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
    text-align: center;
}

.analytics-table tbody tr[b-hxsos5vtsk] {
    transition: all 0.2s ease;
}

.analytics-table tbody tr:hover[b-hxsos5vtsk] {
    background-color: rgba(0, 123, 255, 0.05);
    box-shadow: inset 4px 0 0 #0d6efd;
}

/* First column (Month) - Left aligned */
.analytics-table tbody td:first-child[b-hxsos5vtsk],
.analytics-table thead th:first-child[b-hxsos5vtsk] {
    text-align: left;
}

/* Chart Card Enhancements */
.chart-card[b-hxsos5vtsk] {
    border-radius: 12px;
    border: none;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: all 0.3s ease;
}

.chart-card:hover[b-hxsos5vtsk] {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.chart-card .card-header[b-hxsos5vtsk] {
    background: white;
    border-bottom: 1px solid #e9ecef;
    padding: 1.25rem;
}

.chart-card .card-header h5[b-hxsos5vtsk] {
    color: #1e293b;
    font-weight: 600;
    font-size: 1.125rem;
    margin-bottom: 0;
}

.chart-card .card-body[b-hxsos5vtsk] {
    padding: 1.5rem;
}

/* Badge Soft Colors */
.bg-info-soft[b-hxsos5vtsk] {
    background-color: rgba(13, 202, 240, 0.1);
    color: #0891b2;
    border: 1px solid rgba(13, 202, 240, 0.2);
}

.bg-success-soft[b-hxsos5vtsk] {
    background-color: rgba(25, 135, 84, 0.1);
    color: #198754;
    border: 1px solid rgba(25, 135, 84, 0.2);
}

.bg-warning-soft[b-hxsos5vtsk] {
    background-color: rgba(255, 193, 7, 0.1);
    color: #996404;
    border: 1px solid rgba(255, 193, 7, 0.2);
}

.bg-danger-soft[b-hxsos5vtsk] {
    background-color: rgba(220, 53, 69, 0.1);
    color: #842029;
    border: 1px solid rgba(220, 53, 69, 0.2);
}

.bg-primary-soft[b-hxsos5vtsk] {
    background-color: rgba(13, 110, 253, 0.1);
    color: #0d6efd;
    border: 1px solid rgba(13, 110, 253, 0.2);
}

.bg-secondary-soft[b-hxsos5vtsk] {
    background-color: rgba(108, 117, 125, 0.1);
    color: #495057;
    border: 1px solid rgba(108, 117, 125, 0.2);
}

/* Progress Bars */
.progress[b-hxsos5vtsk] {
    background-color: #e9ecef;
    border-radius: 3px;
    overflow: hidden;
}

.progress-bar[b-hxsos5vtsk] {
    height: 100%;
    transition: width 0.3s ease;
}

/* Icon Wrappers */
.icon-wrapper[b-hxsos5vtsk] {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    min-width: 40px;
    height: 40px;
    font-size: 1.125rem;
}

.icon-wrapper-sm[b-hxsos5vtsk] {
    min-width: 32px;
    height: 32px;
    font-size: 0.875rem;
}

/* Visual Distribution Bars */
.distribution-bar[b-hxsos5vtsk] {
    display: flex;
    height: 40px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.distribution-segment[b-hxsos5vtsk] {
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
}

.distribution-segment:hover[b-hxsos5vtsk] {
    filter: brightness(1.15);
    z-index: 10;
}

/* Empty States */
.empty-state[b-hxsos5vtsk] {
    text-align: center;
    padding: 3rem 1.5rem;
}

.empty-icon[b-hxsos5vtsk] {
    font-size: 3rem;
    color: #cbd5e1;
    margin-bottom: 1rem;
    animation: float-b-hxsos5vtsk 3s ease-in-out infinite;
}

@keyframes float-b-hxsos5vtsk {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.empty-title[b-hxsos5vtsk] {
    color: #6c757d;
    font-weight: 600;
    font-size: 1.125rem;
    margin-bottom: 0.5rem;
}

.empty-subtitle[b-hxsos5vtsk] {
    color: #adb5bd;
    font-size: 0.9375rem;
    margin-bottom: 0;
}

/* Summary Cards */
.summary-card[b-hxsos5vtsk] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 10px;
    transition: all 0.2s ease;
    border: 1px solid #e9ecef;
}

.summary-card:hover[b-hxsos5vtsk] {
    background: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border-color: #dee2e6;
}

.summary-card-icon[b-hxsos5vtsk] {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

/* Row Highlights */
.row-highlight-danger[b-hxsos5vtsk] {
    background-color: rgba(220, 53, 69, 0.05);
    border-left: 4px solid #dc3545;
}

.row-highlight-warning[b-hxsos5vtsk] {
    background-color: rgba(255, 193, 7, 0.05);
    border-left: 4px solid #ffc107;
}

.row-highlight-success[b-hxsos5vtsk] {
    background-color: rgba(25, 135, 84, 0.05);
    border-left: 4px solid #198754;
}

.row-highlight-info[b-hxsos5vtsk] {
    background-color: rgba(13, 202, 240, 0.05);
    border-left: 4px solid #0dcaf0;
}

/* Insight Banners */
.insight-banner[b-hxsos5vtsk] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 12px;
    padding: 1rem;
    font-size: 0.9375rem;
    border: none;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
    margin-top: 1rem;
}

.insight-banner i[b-hxsos5vtsk] {
    margin-right: 0.5rem;
}

.insight-banner strong[b-hxsos5vtsk] {
    color: #ffffff;
}

/* Action Buttons */
.action-button[b-hxsos5vtsk] {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    border-radius: 6px;
    transition: all 0.2s ease;
    font-weight: 500;
}

.action-button:hover[b-hxsos5vtsk] {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.action-button-group[b-hxsos5vtsk] {
    display: flex;
    gap: 0.5rem;
}

/* Responsive Typography */
.metric-label[b-hxsos5vtsk] {
    font-size: 0.75rem;
    color: #6c757d;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}

.metric-value[b-hxsos5vtsk] {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    color: #1e293b;
}

.metric-value-sm[b-hxsos5vtsk] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1e293b;
}

/* Soft Badge Colors */
.bg-secondary-soft[b-hxsos5vtsk] {
    background-color: rgba(108, 117, 125, 0.1);
    color: #495057;
    border: 1px solid rgba(108, 117, 125, 0.2);
}

/* Animations */
@keyframes slideIn-b-hxsos5vtsk {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.slide-in[b-hxsos5vtsk] {
    animation: slideIn-b-hxsos5vtsk 0.3s ease-out;
}

.fade-in[b-hxsos5vtsk] {
    animation: fadeIn-b-hxsos5vtsk 0.3s ease-out;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .chart-card[b-hxsos5vtsk] {
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    }

    .summary-card[b-hxsos5vtsk] {
        flex-direction: column;
        text-align: center;
    }

    .metric-value[b-hxsos5vtsk] {
        font-size: 1.75rem;
    }
}

@media (max-width: 768px) {
    .modern-page-header[b-hxsos5vtsk] {
        gap: 1rem;
        padding: 1.5rem 0;
        flex-direction: column;
        align-items: flex-start;
    }

    .header-icon[b-hxsos5vtsk] {
        width: 48px;
        height: 48px;
        font-size: 1.5rem;
    }

    .header-content[b-hxsos5vtsk] {
        width: 100%;
    }

    .header-content h1[b-hxsos5vtsk] {
        font-size: 1.5rem;
    }

    .header-content p[b-hxsos5vtsk] {
        font-size: 0.9rem;
    }

    .header-filter[b-hxsos5vtsk] {
        width: 100%;
        min-width: auto;
    }

    .nav-pills-custom .nav-link[b-hxsos5vtsk] {
        padding: 0.5rem 0.75rem;
        font-size: 0.875rem;
    }

    .btn-action[b-hxsos5vtsk] {
        padding: 1rem 0.75rem;
    }

    .date-range-filter[b-hxsos5vtsk] {
        min-width: 150px;
    }

    .chart-card .card-header[b-hxsos5vtsk] {
        padding: 1rem;
    }

    .chart-card .card-body[b-hxsos5vtsk] {
        padding: 1rem;
    }

    .analytics-table thead th[b-hxsos5vtsk],
    .analytics-table tbody td[b-hxsos5vtsk] {
        padding: 0.75rem;
        font-size: 0.875rem;
    }

    .distribution-bar[b-hxsos5vtsk] {
        height: 30px;
    }

    .summary-card[b-hxsos5vtsk] {
        padding: 0.875rem;
    }

    .summary-card-icon[b-hxsos5vtsk] {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .metric-label[b-hxsos5vtsk] {
        font-size: 0.7rem;
    }

    .metric-value[b-hxsos5vtsk] {
        font-size: 1.5rem;
    }

    .action-button-group[b-hxsos5vtsk] {
        flex-direction: column;
    }

    .action-button[b-hxsos5vtsk] {
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .modern-page-header[b-hxsos5vtsk] {
        gap: 0.75rem;
        padding: 1rem 0;
    }

    .header-icon[b-hxsos5vtsk] {
        width: 44px;
        height: 44px;
        font-size: 1.25rem;
    }

    .header-content h1[b-hxsos5vtsk] {
        font-size: 1.25rem;
    }

    .header-content p[b-hxsos5vtsk] {
        font-size: 0.85rem;
    }

    .header-filter[b-hxsos5vtsk] {
        width: 100%;
        min-width: auto;
    }

    .analytics-table[b-hxsos5vtsk] {
        font-size: 0.8rem;
    }

    .analytics-table thead th[b-hxsos5vtsk],
    .analytics-table tbody td[b-hxsos5vtsk] {
        padding: 0.5rem;
    }

    .chart-card[b-hxsos5vtsk] {
        border-radius: 8px;
    }

    .metric-value[b-hxsos5vtsk] {
        font-size: 1.25rem;
    }

    .empty-icon[b-hxsos5vtsk] {
        font-size: 2.5rem;
    }

    .summary-card[b-hxsos5vtsk] {
        padding: 0.75rem;
        gap: 0.75rem;
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* Modern Header Styles */
.modern-page-header[b-4xwxjed1ji] {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 0;
}

.header-icon[b-4xwxjed1ji] {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: white;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.modern-page-header:hover .header-icon[b-4xwxjed1ji] {
    transform: scale(1.05);
}

.header-content[b-4xwxjed1ji] {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.5rem;
    padding-top: 0.25rem;
}

.header-content h1[b-4xwxjed1ji] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    line-height: 1.2;
}

.header-content p[b-4xwxjed1ji] {
    font-size: 0.95rem;
    color: #64748b;
    margin: 0;
    font-weight: 400;
    line-height: 1.4;
}

/* Dashboard Metrics */
.metrics-row[b-4xwxjed1ji] {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.metrics-row > [class*="col-"][b-4xwxjed1ji] {
    display: flex;
    flex-direction: column;
}

.metric-card[b-4xwxjed1ji] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    border-radius: 1rem;
    border: none;
    color: white;
    transition: all 0.3s ease;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    width: 100%;
    height: 100%;
}

.metric-card:hover[b-4xwxjed1ji] {
    transform: translateY(-6px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

.metric-card-primary[b-4xwxjed1ji] {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
}

.metric-card-success[b-4xwxjed1ji] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.metric-card-info[b-4xwxjed1ji] {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
}

.metric-card-warning[b-4xwxjed1ji] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.metric-card-danger[b-4xwxjed1ji] {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.metric-card-purple[b-4xwxjed1ji] {
    background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%);
}

.metric-icon[b-4xwxjed1ji] {
    width: 50px;
    height: 50px;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    background: rgba(255, 255, 255, 0.25);
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.metric-card:hover .metric-icon[b-4xwxjed1ji] {
    background: rgba(255, 255, 255, 0.35);
    transform: scale(1.1);
}

.metric-content[b-4xwxjed1ji] {
    flex: 1;
}

.metric-label[b-4xwxjed1ji] {
    font-size: 0.85rem;
    font-weight: 500;
    opacity: 1;
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.95);
}

.metric-value[b-4xwxjed1ji] {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
    color: white;
}

.metric-sub[b-4xwxjed1ji] {
    font-size: 0.8rem;
    opacity: 0.95;
    color: rgba(255, 255, 255, 0.95);
}

/* Setup Progress */
.setup-progress[b-4xwxjed1ji] {
    background: #f8f9fa;
    padding: 1rem;
    border-radius: 0.5rem;
}

.progress-header[b-4xwxjed1ji] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.progress-title[b-4xwxjed1ji] {
    font-weight: 600;
    font-size: 0.9rem;
    color: #2d3748;
}

.progress-percentage[b-4xwxjed1ji] {
    font-weight: 700;
    color: #667eea;
    font-size: 0.95rem;
}

.progress[b-4xwxjed1ji] {
    height: 8px;
    border-radius: 4px;
    background: #e2e8f0;
}

.progress-bar[b-4xwxjed1ji] {
    border-radius: 4px;
    transition: width 0.6s ease;
}

/* Setup Steps */
.setup-steps[b-4xwxjed1ji] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.setup-step[b-4xwxjed1ji] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 0.5rem;
    border-left: 4px solid #cbd5e1;
    transition: all 0.3s ease;
}

.setup-step.completed[b-4xwxjed1ji] {
    background: #f0fdf4;
    border-left-color: #10b981;
}

.setup-step:hover[b-4xwxjed1ji] {
    background: #f1f5f9;
}

.step-marker[b-4xwxjed1ji] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: white;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    flex-shrink: 0;
    font-size: 1rem;
}

.setup-step.completed .step-marker[b-4xwxjed1ji] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.step-content[b-4xwxjed1ji] {
    flex: 1;
}

.step-title[b-4xwxjed1ji] {
    font-weight: 600;
    margin: 0 0 0.25rem 0;
    color: #2d3748;
    font-size: 0.95rem;
}

.step-description[b-4xwxjed1ji] {
    margin: 0;
    font-size: 0.85rem;
    color: #64748b;
}

/* Alert Items */
.alert-item[b-4xwxjed1ji] {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    border-left: 4px solid;
    transition: all 0.3s ease;
}

.alert-item:hover[b-4xwxjed1ji] {
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.alert-item-warning[b-4xwxjed1ji] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(217, 119, 6, 0.1) 100%);
    border-left-color: #f59e0b;
}

.alert-item-danger[b-4xwxjed1ji] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(220, 38, 38, 0.1) 100%);
    border-left-color: #ef4444;
}

.alert-item-success[b-4xwxjed1ji] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(5, 150, 105, 0.1) 100%);
    border-left-color: #10b981;
}

.alert-item-info[b-4xwxjed1ji] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(37, 99, 235, 0.1) 100%);
    border-left-color: #3b82f6;
}

.alert-icon[b-4xwxjed1ji] {
    width: 45px;
    height: 45px;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.alert-item-warning .alert-icon[b-4xwxjed1ji] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
}

.alert-item-danger .alert-icon[b-4xwxjed1ji] {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
}

.alert-item-success .alert-icon[b-4xwxjed1ji] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

.alert-item-info .alert-icon[b-4xwxjed1ji] {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
}

.alert-content[b-4xwxjed1ji] {
    flex: 1;
}

.alert-title[b-4xwxjed1ji] {
    font-weight: 600;
    margin: 0 0 0.25rem 0;
    color: #2d3748;
    font-size: 0.95rem;
}

.alert-text[b-4xwxjed1ji] {
    margin: 0 0 0.5rem 0;
    font-size: 0.85rem;
    color: #64748b;
}

.alert-action[b-4xwxjed1ji] {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 600;
    color: #667eea;
    text-decoration: none;
    transition: all 0.2s ease;
}

.alert-action:hover[b-4xwxjed1ji] {
    color: #764ba2;
    text-decoration: underline;
}

/* Quick Actions */
.btn-action[b-4xwxjed1ji] {
    text-align: center;
    padding: 1.25rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    border: 2px solid #cbd5e1;
    background: white;
    color: #475569;
    border-radius: 0.75rem;
    cursor: pointer;
}

.btn-action:hover[b-4xwxjed1ji] {
    border-color: #667eea;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    color: #667eea;
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(102, 126, 234, 0.15);
}

.btn-action:active[b-4xwxjed1ji] {
    transform: translateY(-2px);
}

/* Gradient Backgrounds */
.bg-gradient-primary[b-4xwxjed1ji] {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
}

.bg-gradient-success[b-4xwxjed1ji] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.bg-gradient-warning[b-4xwxjed1ji] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

/* Skeleton Loading */
.loading-skeleton[b-4xwxjed1ji] {
    animation: fadeIn-b-4xwxjed1ji 0.3s ease-in;
}

.skeleton-card[b-4xwxjed1ji] {
    background: #f0f0f0;
    border: none;
}

.skeleton-text[b-4xwxjed1ji] {
    height: 16px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading-b-4xwxjed1ji 1.5s infinite;
    border-radius: 4px;
    width: 100%;
    margin-bottom: 0.5rem;
}

.skeleton-text-lg[b-4xwxjed1ji] {
    height: 28px;
    margin-bottom: 0.5rem;
}

.skeleton-text-sm[b-4xwxjed1ji] {
    height: 12px;
}

@keyframes loading-b-4xwxjed1ji {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

@keyframes fadeIn-b-4xwxjed1ji {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Responsive Design */
@media (max-width: 1200px) {
    .metric-card[b-4xwxjed1ji] {
        padding: 1.25rem;
    }

    .metric-icon[b-4xwxjed1ji] {
        width: 45px;
        height: 45px;
        font-size: 1.25rem;
    }

    .metric-value[b-4xwxjed1ji] {
        font-size: 1.5rem;
    }

    .metric-label[b-4xwxjed1ji] {
        font-size: 0.8rem;
    }
}

@media (max-width: 992px) {
    .metric-card[b-4xwxjed1ji] {
        flex-direction: row;
        gap: 1rem;
        padding: 1.25rem;
    }

    .metric-icon[b-4xwxjed1ji] {
        width: 45px;
        height: 45px;
        font-size: 1.25rem;
        flex-shrink: 0;
    }

    .metric-value[b-4xwxjed1ji] {
        font-size: 1.5rem;
    }

    .metric-content[b-4xwxjed1ji] {
        text-align: left;
    }
}

@media (max-width: 768px) {
    .modern-page-header[b-4xwxjed1ji] {
        gap: 1rem;
        padding: 1.5rem 0;
    }

    .header-icon[b-4xwxjed1ji] {
        width: 48px;
        height: 48px;
        font-size: 1.5rem;
    }

    .header-content h1[b-4xwxjed1ji] {
        font-size: 1.5rem;
    }

    .header-content p[b-4xwxjed1ji] {
        font-size: 0.9rem;
    }

    .metric-card[b-4xwxjed1ji] {
        padding: 1.25rem;
        flex-direction: column;
        text-align: center;
    }

    .metric-icon[b-4xwxjed1ji] {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
    }

    .metric-content[b-4xwxjed1ji] {
        text-align: center;
    }

    .setup-step[b-4xwxjed1ji] {
        flex-wrap: wrap;
        gap: 0.75rem;
    }
}

@media (max-width: 576px) {
    .modern-page-header[b-4xwxjed1ji] {
        gap: 0.75rem;
        padding: 1rem 0;
    }

    .header-icon[b-4xwxjed1ji] {
        width: 44px;
        height: 44px;
        font-size: 1.25rem;
    }

    .header-content h1[b-4xwxjed1ji] {
        font-size: 1.25rem;
    }

    .header-content p[b-4xwxjed1ji] {
        font-size: 0.85rem;
    }

    .metric-card[b-4xwxjed1ji] {
        padding: 1rem;
        flex-direction: column;
        text-align: center;
    }

    .metric-icon[b-4xwxjed1ji] {
        width: 45px;
        height: 45px;
        font-size: 1.25rem;
    }

    .metric-value[b-4xwxjed1ji] {
        font-size: 1.5rem;
    }

    .metric-label[b-4xwxjed1ji] {
        font-size: 0.75rem;
    }

    .metric-sub[b-4xwxjed1ji] {
        font-size: 0.7rem;
    }

    .step-marker[b-4xwxjed1ji] {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }

    .btn-action[b-4xwxjed1ji] {
        padding: 1rem 0.75rem;
        font-size: 0.85rem;
    }
}
/* /Components/Pages/InvoiceGenerator.razor.rz.scp.css */
/* Modern Header Styles */
.modern-page-header[b-zn7ud4xebj] {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 0;
    padding-bottom: 2rem;
}

.header-icon[b-zn7ud4xebj] {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: white;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.modern-page-header:hover .header-icon[b-zn7ud4xebj] {
    transform: scale(1.05);
}

.header-content[b-zn7ud4xebj] {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.5rem;
    padding-top: 0.25rem;
    flex: 1;
}

.header-content h1[b-zn7ud4xebj] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    line-height: 1.2;
}

.header-content p[b-zn7ud4xebj] {
    font-size: 0.95rem;
    color: #64748b;
    margin: 0;
    font-weight: 400;
    line-height: 1.4;
}

.action-section[b-zn7ud4xebj] {
    padding-bottom: 1.5rem;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.action-section .btn[b-zn7ud4xebj] {
    padding: 0.75rem 1.75rem;
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: 10px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.2);
}

.action-section .btn-outline-secondary[b-zn7ud4xebj] {
    background: white;
    border: 2px solid #cbd5e1;
    color: #64748b;
}

.action-section .btn-outline-secondary:hover[b-zn7ud4xebj] {
    background: #f1f5f9;
    border-color: #94a3b8;
    color: #475569;
    transform: translateY(-2px);
}

/* Invoice Generator Styles */
.bg-gradient-primary[b-zn7ud4xebj] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.card[b-zn7ud4xebj] {
    border-radius: 12px !important;
    overflow: hidden;
    background: #ffffff;
}

.generation-section[b-zn7ud4xebj] {
    background: #f8f9fa;
    padding: 1.5rem;
    border-radius: 0.5rem;
}

.section-title[b-zn7ud4xebj] {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #dee2e6;
}

.info-card[b-zn7ud4xebj] {
    background: white;
    padding: 1rem;
    border-radius: 0.375rem;
    border: 1px solid #e2e8f0;
}

.detail-row[b-zn7ud4xebj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid #f1f1f1;
}

.detail-row:last-child[b-zn7ud4xebj] {
    border-bottom: none;
}

.detail-row .label[b-zn7ud4xebj] {
    color: #6c757d;
    font-size: 0.9rem;
}

.detail-row .value[b-zn7ud4xebj] {
    font-weight: 500;
}

.invoice-preview[b-zn7ud4xebj] {
    background: white;
    padding: 1.5rem;
    border-radius: 0.5rem;
    border: 2px solid #e2e8f0;
}

.preview-header[b-zn7ud4xebj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #f1f1f1;
}

.invoice-ref[b-zn7ud4xebj] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #2d3748;
    margin: 0;
}

.preview-info[b-zn7ud4xebj] {
    margin-bottom: 1.5rem;
}

.info-row[b-zn7ud4xebj] {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    font-size: 0.9rem;
}

.info-row span:first-child[b-zn7ud4xebj] {
    color: #6c757d;
}

.line-items[b-zn7ud4xebj] {
    margin-bottom: 1rem;
}

.line-item[b-zn7ud4xebj] {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    background: #f8f9fa;
    border-radius: 0.375rem;
}

.item-description[b-zn7ud4xebj] {
    flex: 1;
}

.item-amount[b-zn7ud4xebj] {
    font-weight: 600;
    color: #2d3748;
}

.total-section[b-zn7ud4xebj] {
    border-top: 2px solid #e2e8f0;
    padding-top: 1rem;
    margin-top: 1rem;
}

.total-row[b-zn7ud4xebj] {
    display: flex;
    justify-content: space-between;
    font-size: 1.1rem;
}

.empty-preview[b-zn7ud4xebj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
}

.btn-primary[b-zn7ud4xebj] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
}

/* Responsive Design */
@media (max-width: 768px) {
    .modern-page-header[b-zn7ud4xebj] {
        gap: 1rem;
        padding-bottom: 1.5rem;
    }

    .header-icon[b-zn7ud4xebj] {
        width: 48px;
        height: 48px;
        font-size: 1.5rem;
    }

    .header-content h1[b-zn7ud4xebj] {
        font-size: 1.5rem;
    }

    .header-content p[b-zn7ud4xebj] {
        font-size: 0.9rem;
    }

    .action-section .btn[b-zn7ud4xebj] {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .modern-page-header[b-zn7ud4xebj] {
        gap: 0.75rem;
        padding-bottom: 1rem;
    }

    .header-icon[b-zn7ud4xebj] {
        width: 44px;
        height: 44px;
        font-size: 1.25rem;
    }

    .header-content h1[b-zn7ud4xebj] {
        font-size: 1.25rem;
    }

    .header-content p[b-zn7ud4xebj] {
        font-size: 0.85rem;
    }
}
/* /Components/Pages/PropertyManagement/B2BTransactionLogs.razor.rz.scp.css */
/* B2B Transaction Logs Styling */

.transaction-row[b-76xvl4ufpu] {
    transition: background-color 0.2s ease;
}

.transaction-row:hover[b-76xvl4ufpu] {
    background-color: #f8f9fa;
}

.transactions-table[b-76xvl4ufpu] {
    font-size: 0.95rem;
}

.transactions-table thead th[b-76xvl4ufpu] {
    font-weight: 600;
    color: #495057;
    background-color: #f8f9fa;
}

.payment-badge[b-76xvl4ufpu] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}

.action-button-group[b-76xvl4ufpu] {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

.action-button-group .btn[b-76xvl4ufpu] {
    padding: 0.375rem 0.6rem;
    font-size: 0.85rem;
}

.modern-page-header[b-76xvl4ufpu] {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    color: white;
}

.modern-page-header .header-icon[b-76xvl4ufpu] {
    font-size: 3rem;
    opacity: 0.9;
}

.modern-page-header .header-content h1[b-76xvl4ufpu] {
    margin: 0;
    font-size: 1.8rem;
    font-weight: 700;
}

.modern-page-header .header-content p[b-76xvl4ufpu] {
    margin: 5px 0 0 0;
    opacity: 0.95;
    font-size: 0.95rem;
}

.chart-card[b-76xvl4ufpu] {
    border-radius: 12px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.chart-card:hover[b-76xvl4ufpu] {
    transform: translateY(-4px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.stat-icon[b-76xvl4ufpu] {
    color: #667eea;
}

.search-box-wrapper[b-76xvl4ufpu] {
    position: relative;
}

.search-box-wrapper .input-group[b-76xvl4ufpu] {
    border-radius: 8px;
    border: 2px solid #e9ecef;
    transition: border-color 0.2s ease;
}

.search-box-wrapper .input-group:focus-within[b-76xvl4ufpu] {
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.empty-state[b-76xvl4ufpu] {
    text-align: center;
    padding: 60px 20px;
}

.empty-icon[b-76xvl4ufpu] {
    margin-bottom: 20px;
}

.bg-primary-soft[b-76xvl4ufpu] {
    background-color: rgba(102, 126, 234, 0.15);
    color: #667eea;
    font-weight: 600;
}

.action-section[b-76xvl4ufpu] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.action-section .btn[b-76xvl4ufpu] {
    border-radius: 8px;
    padding: 0.6rem 1.2rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.action-section .btn:hover[b-76xvl4ufpu] {
    transform: translateY(-2px);
}

/* Status badge colors */
.badge[b-76xvl4ufpu] {
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-weight: 500;
}

.bg-success[b-76xvl4ufpu] {
    background-color: #28a745;
}

.bg-warning[b-76xvl4ufpu] {
    background-color: #ffc107;
    color: #000;
}

.bg-danger[b-76xvl4ufpu] {
    background-color: #dc3545;
}

.bg-secondary[b-76xvl4ufpu] {
    background-color: #6c757d;
}

/* Modal styling */
.modal.show[b-76xvl4ufpu] {
    backdrop-filter: blur(4px);
    animation: slideIn-b-76xvl4ufpu 0.3s ease;
}

@keyframes slideIn-b-76xvl4ufpu {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-dialog-centered[b-76xvl4ufpu] {
    display: flex;
    align-items: center;
    min-height: calc(100% - 1rem);
}

.modal-content[b-76xvl4ufpu] {
    border-radius: 12px;
    border: none;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.modal-header[b-76xvl4ufpu] {
    background-color: #f8f9fa;
    border: none;
    border-bottom: 1px solid #dee2e6;
    padding: 1.5rem;
}

.modal-header .modal-title[b-76xvl4ufpu] {
    font-weight: 600;
    color: #495057;
}

.modal-body[b-76xvl4ufpu] {
    padding: 2rem;
}

.modal-footer[b-76xvl4ufpu] {
    background-color: #f8f9fa;
    border: none;
    border-top: 1px solid #dee2e6;
    padding: 1.5rem;
}

.alert[b-76xvl4ufpu] {
    border-radius: 8px;
    border: none;
}

.alert-info[b-76xvl4ufpu] {
    background-color: #d1ecf1;
    color: #0c5460;
}

.alert-warning[b-76xvl4ufpu] {
    background-color: #fff3cd;
    color: #856404;
}

.form-label[b-76xvl4ufpu] {
    color: #495057;
    margin-bottom: 0.5rem;
}

.form-control[b-76xvl4ufpu],
.form-select[b-76xvl4ufpu] {
    border-radius: 8px;
    border: 1px solid #dee2e6;
    padding: 0.6rem 0.875rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-control:focus[b-76xvl4ufpu],
.form-select:focus[b-76xvl4ufpu] {
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.form-control:disabled[b-76xvl4ufpu],
.form-select:disabled[b-76xvl4ufpu] {
    background-color: #e9ecef;
    color: #6c757d;
}

/* Card styling */
.card[b-76xvl4ufpu] {
    border-radius: 12px;
    border: 1px solid #e9ecef;
}

.card-header[b-76xvl4ufpu] {
    border-radius: 12px 12px 0 0;
}

.card-body[b-76xvl4ufpu] {
    padding: 1.5rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .modern-page-header[b-76xvl4ufpu] {
        flex-direction: column;
        text-align: center;
    }

    .modern-page-header .header-icon[b-76xvl4ufpu] {
        font-size: 2.5rem;
    }

    .modern-page-header .header-content h1[b-76xvl4ufpu] {
        font-size: 1.5rem;
    }

    .action-section[b-76xvl4ufpu] {
        flex-direction: column;
    }

    .action-section .btn[b-76xvl4ufpu] {
        width: 100%;
    }

    .table-responsive[b-76xvl4ufpu] {
        font-size: 0.85rem;
    }

    .action-button-group[b-76xvl4ufpu] {
        flex-direction: column;
    }

    .action-button-group .btn[b-76xvl4ufpu] {
        width: 100%;
    }

    .row.g-4[b-76xvl4ufpu] {
        --bs-gutter-y: 1.5rem;
    }
}

/* Print styles */
@media print {
    .action-section[b-76xvl4ufpu],
    .modal[b-76xvl4ufpu],
    .modal-backdrop[b-76xvl4ufpu] {
        display: none;
    }

    .card[b-76xvl4ufpu] {
        box-shadow: none;
        border: 1px solid #dee2e6;
    }
}
/* /Components/Pages/PropertyManagement/Charges.razor.rz.scp.css */
/* Modern Page Header */
.modern-page-header[b-yinl8ue367] {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 0;
    padding-bottom: 2rem;
}

.header-icon[b-yinl8ue367] {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: white;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.modern-page-header:hover .header-icon[b-yinl8ue367] {
    transform: scale(1.05);
}

.header-content[b-yinl8ue367] {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.5rem;
    padding-top: 0.25rem;
    flex: 1;
}

.header-content h1[b-yinl8ue367] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    line-height: 1.2;
}

.header-content p[b-yinl8ue367] {
    font-size: 0.95rem;
    color: #64748b;
    margin: 0;
    font-weight: 400;
    line-height: 1.4;
}

/* Action Section */
.action-section[b-yinl8ue367] {
    padding-bottom: 1.5rem;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.action-section .btn[b-yinl8ue367] {
    padding: 0.75rem 1.75rem;
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: 10px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.2);
}

.action-section .btn-primary[b-yinl8ue367] {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    border: none;
    color: white;
}

.action-section .btn-primary:hover[b-yinl8ue367] {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(14, 165, 233, 0.35);
}

.action-section .btn-outline-secondary[b-yinl8ue367] {
    background: white;
    border: 2px solid #cbd5e1;
    color: #64748b;
}

.action-section .btn-outline-secondary:hover[b-yinl8ue367] {
    background: #f1f5f9;
    border-color: #94a3b8;
    color: #475569;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Loading and Empty State */
.card.border-0[b-yinl8ue367] {
    border-radius: 12px !important;
    overflow: hidden;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

.empty-state[b-yinl8ue367] {
    padding: 3rem 2rem;
}

.empty-state .empty-icon[b-yinl8ue367] {
    animation: float-b-yinl8ue367 3s ease-in-out infinite;
}

.empty-state h5[b-yinl8ue367] {
    font-weight: 700;
    font-size: 1.25rem;
    color: #1e293b;
}

.empty-state p[b-yinl8ue367] {
    font-size: 0.95rem;
    color: #64748b;
}

.empty-state .btn-primary[b-yinl8ue367] {
    padding: 0.75rem 2rem;
    font-weight: 600;
    border-radius: 8px;
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    border: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.2);
}

.empty-state .btn-primary:hover[b-yinl8ue367] {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(14, 165, 233, 0.35);
}

@keyframes float-b-yinl8ue367 {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* Search Box */
.search-box-wrapper[b-yinl8ue367] {
    position: relative;
}

.input-group-text[b-yinl8ue367] {
    border-right: none !important;
}

.form-control:focus[b-yinl8ue367] {
    border-color: #0ea5e9;
    box-shadow: 0 0 0 0.2rem rgba(14, 165, 233, 0.15);
}

/* Statistics Cards */
.chart-card[b-yinl8ue367] {
    border-radius: 12px !important;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    background: #ffffff;
}

.chart-card[b-yinl8ue367]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #0ea5e9, #0284c7);
}

.chart-card:nth-child(2)[b-yinl8ue367]::before {
    background: linear-gradient(90deg, #10b981, #059669);
}

.chart-card:nth-child(3)[b-yinl8ue367]::before {
    background: linear-gradient(90deg, #06b6d4, #0891b2);
}

.chart-card:nth-child(4)[b-yinl8ue367]::before {
    background: linear-gradient(90deg, #f59e0b, #d97706);
}

.chart-card:hover[b-yinl8ue367] {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.chart-card .card-body[b-yinl8ue367] {
    padding: 2rem 1.5rem;
    background: linear-gradient(135deg, #f0f9ff 0%, #f8fafc 100%);
}

.row.g-4 .col-lg-3:nth-child(2) .chart-card .card-body[b-yinl8ue367] {
    background: linear-gradient(135deg, #f0fdf4 0%, #f8fafc 100%);
}

.row.g-4 .col-lg-3:nth-child(3) .chart-card .card-body[b-yinl8ue367] {
    background: linear-gradient(135deg, #f0f9ff 0%, #f8fafc 100%);
}

.row.g-4 .col-lg-3:nth-child(4) .chart-card .card-body[b-yinl8ue367] {
    background: linear-gradient(135deg, #fffbf0 0%, #f8fafc 100%);
}

/* Charges Table Card Header */
.card-header.bg-white[b-yinl8ue367] {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
    border-bottom: 2px solid #e2e8f0;
    padding: 1.5rem;
}

.card-header h5[b-yinl8ue367] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e293b;
}

.card-header .badge[b-yinl8ue367] {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
}

/* Charges Table */
.charges-table[b-yinl8ue367] {
    margin-bottom: 0;
    background: #ffffff;
}

.charges-table thead th[b-yinl8ue367] {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    font-weight: 700;
    color: #1e293b;
    border: none;
    font-size: 0.9rem;
    padding: 1rem 0.75rem;
    letter-spacing: 0.3px;
}

.charges-table tbody td[b-yinl8ue367] {
    padding: 1rem 0.75rem;
    border: none;
    border-bottom: 1px solid #f1f5f9;
}

.charges-table tbody tr:last-child td[b-yinl8ue367] {
    border-bottom: none;
}

.charge-row[b-yinl8ue367] {
    transition: all 0.2s ease;
    background-color: rgba(248, 250, 252, 0.5);
    border-left: 4px solid #cbd5e1;
}

.charge-row:hover[b-yinl8ue367] {
    background-color: rgba(30, 41, 59, 0.03);
    border-left-color: #0ea5e9;
}

.charge-badge[b-yinl8ue367] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.15) 0%, rgba(14, 165, 233, 0.08) 100%);
    color: #0d6efd;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    font-weight: 600;
}

.charges-table .fw-semibold[b-yinl8ue367] {
    color: #1e293b;
    font-size: 0.95rem;
}

.charges-table .text-success[b-yinl8ue367] {
    font-weight: 700;
    color: #059669 !important;
}

/* Table Footer */
.charges-table tfoot[b-yinl8ue367] {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

.charges-table tfoot tr[b-yinl8ue367] {
    border-top: 2px solid #e2e8f0;
}

.charges-table tfoot td[b-yinl8ue367] {
    padding: 1rem 0.75rem;
    color: #1e293b;
    font-weight: 600;
}

/* Status Badges */
.badge[b-yinl8ue367] {
    font-weight: 600;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    font-size: 0.8rem;
    letter-spacing: 0.3px;
}

.badge.bg-warning[b-yinl8ue367] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.2);
}

/* Action Buttons */
.action-button-group[b-yinl8ue367] {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

.action-button-group .btn[b-yinl8ue367] {
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    border-radius: 6px;
    transition: all 0.2s ease;
    border: none;
}

.action-button-group .btn-outline-primary[b-yinl8ue367] {
    color: #0284c7;
    background: transparent;
    border: 1px solid #0284c7;
}

.action-button-group .btn-outline-primary:hover[b-yinl8ue367] {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    color: white;
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
}

.action-button-group .btn-outline-danger[b-yinl8ue367] {
    color: #dc2626;
    background: transparent;
    border: 1px solid #dc2626;
}

.action-button-group .btn-outline-danger:hover[b-yinl8ue367] {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

/* Responsive Design */
@media (max-width: 768px) {
    .modern-page-header[b-yinl8ue367] {
        gap: 1rem;
        padding-bottom: 1.5rem;
    }

    .header-icon[b-yinl8ue367] {
        width: 48px;
        height: 48px;
        font-size: 1.5rem;
    }

    .header-content h1[b-yinl8ue367] {
        font-size: 1.5rem;
    }

    .header-content p[b-yinl8ue367] {
        font-size: 0.9rem;
    }

    .action-section[b-yinl8ue367] {
        flex-direction: column;
    }

    .action-section .btn[b-yinl8ue367] {
        width: 100%;
        text-align: center;
    }

    .chart-card .card-body[b-yinl8ue367] {
        padding: 1.5rem 1rem;
    }

    .chart-card h4[b-yinl8ue367] {
        font-size: 1.75rem;
    }

    .charges-table thead th[b-yinl8ue367],
    .charges-table tbody td[b-yinl8ue367] {
        padding: 0.75rem;
        font-size: 0.875rem;
    }

    .action-button-group[b-yinl8ue367] {
        flex-direction: column;
        gap: 0.25rem;
    }

    .card-header[b-yinl8ue367] {
        flex-direction: column;
    }

    .card-header h5[b-yinl8ue367] {
        margin-bottom: 0.75rem;
    }
}

@media (max-width: 480px) {
    .modern-page-header[b-yinl8ue367] {
        gap: 0.75rem;
        padding-bottom: 1rem;
    }

    .header-icon[b-yinl8ue367] {
        width: 44px;
        height: 44px;
        font-size: 1.25rem;
    }

    .header-content h1[b-yinl8ue367] {
        font-size: 1.25rem;
    }

    .header-content p[b-yinl8ue367] {
        font-size: 0.85rem;
    }

    .charges-table[b-yinl8ue367] {
        font-size: 0.8rem;
    }

    .charges-table thead th[b-yinl8ue367],
    .charges-table tbody td[b-yinl8ue367] {
        padding: 0.5rem;
    }

    .stat-icon[b-yinl8ue367] {
        width: 60px;
        height: 60px;
    }

    .stat-icon i[b-yinl8ue367] {
        font-size: 1.5rem;
    }

    .chart-card h4[b-yinl8ue367] {
        font-size: 1.5rem;
    }

    .empty-state[b-yinl8ue367] {
        padding: 2rem 1rem;
    }
}
/* /Components/Pages/PropertyManagement/Deposits.razor.rz.scp.css */
/** Modern Page Header */
.modern-page-header[b-2h08115n5n] {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 0;
    padding-bottom: 2rem;
}

.header-icon[b-2h08115n5n] {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: white;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.modern-page-header:hover .header-icon[b-2h08115n5n] {
    transform: scale(1.05);
}

.header-content[b-2h08115n5n] {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.5rem;
    padding-top: 0.25rem;
    flex: 1;
}

.header-content h1[b-2h08115n5n] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    line-height: 1.2;
}

.header-content p[b-2h08115n5n] {
    font-size: 0.95rem;
    color: #64748b;
    margin: 0;
    font-weight: 400;
    line-height: 1.4;
}

/* Action Section */
.action-section[b-2h08115n5n] {
    padding-bottom: 1.5rem;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.action-section .btn[b-2h08115n5n] {
    padding: 0.75rem 1.75rem;
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: 10px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.2);
}

.action-section .btn-primary[b-2h08115n5n] {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    border: none;
    color: white;
}

.action-section .btn-primary:hover[b-2h08115n5n] {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(14, 165, 233, 0.35);
}

.action-section .btn-outline-secondary[b-2h08115n5n] {
    background: white;
    border: 2px solid #cbd5e1;
    color: #64748b;
}

.action-section .btn-outline-secondary:hover[b-2h08115n5n] {
    background: #f1f5f9;
    border-color: #94a3b8;
    color: #475569;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Loading and Empty State */
.card.border-0[b-2h08115n5n] {
    border-radius: 12px !important;
    overflow: hidden;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

.empty-state[b-2h08115n5n] {
    padding: 3rem 2rem;
}

.empty-state .empty-icon[b-2h08115n5n] {
    animation: float-b-2h08115n5n 3s ease-in-out infinite;
}

.empty-state h5[b-2h08115n5n] {
    font-weight: 700;
    font-size: 1.25rem;
    color: #1e293b;
}

.empty-state p[b-2h08115n5n] {
    font-size: 0.95rem;
    color: #64748b;
}

.empty-state .btn-primary[b-2h08115n5n] {
    padding: 0.75rem 2rem;
    font-weight: 600;
    border-radius: 8px;
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    border: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.2);
}

.empty-state .btn-primary:hover[b-2h08115n5n] {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(14, 165, 233, 0.35);
}

@keyframes float-b-2h08115n5n {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* Statistics Cards */
.chart-card[b-2h08115n5n] {
    border-radius: 12px !important;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    background: #ffffff;
}

.chart-card[b-2h08115n5n]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #0ea5e9, #0284c7);
}

.chart-card:nth-child(2)[b-2h08115n5n]::before {
    background: linear-gradient(90deg, #10b981, #059669);
}

.chart-card:nth-child(3)[b-2h08115n5n]::before {
    background: linear-gradient(90deg, #06b6d4, #0891b2);
}

.chart-card:nth-child(4)[b-2h08115n5n]::before {
    background: linear-gradient(90deg, #f59e0b, #d97706);
}

.chart-card:hover[b-2h08115n5n] {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.chart-card .card-body[b-2h08115n5n] {
    padding: 2rem 1.5rem;
    background: linear-gradient(135deg, #f0f9ff 0%, #f8fafc 100%);
}

.row.g-4 .col-lg-3:nth-child(2) .chart-card .card-body[b-2h08115n5n] {
    background: linear-gradient(135deg, #f0fdf4 0%, #f8fafc 100%);
}

.row.g-4 .col-lg-3:nth-child(3) .chart-card .card-body[b-2h08115n5n] {
    background: linear-gradient(135deg, #f0f9ff 0%, #f8fafc 100%);
}

.row.g-4 .col-lg-3:nth-child(4) .chart-card .card-body[b-2h08115n5n] {
    background: linear-gradient(135deg, #fffbf0 0%, #f8fafc 100%);
}

/* Deposits Table Card Header */
.card-header.bg-white[b-2h08115n5n] {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
    border-bottom: 2px solid #e2e8f0;
    padding: 1.5rem;
}

.card-header h5[b-2h08115n5n] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e293b;
}

.card-header .badge[b-2h08115n5n] {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
}

/* Deposits Table */
.deposits-table[b-2h08115n5n] {
    margin-bottom: 0;
    background: #ffffff;
}

.deposits-table thead th[b-2h08115n5n] {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    font-weight: 700;
    color: #1e293b;
    border: none;
    font-size: 0.9rem;
    padding: 1rem 0.75rem;
    letter-spacing: 0.3px;
}

.deposits-table tbody td[b-2h08115n5n] {
    padding: 1rem 0.75rem;
    border: none;
    border-bottom: 1px solid #f1f5f9;
}

.deposits-table tbody tr:last-child td[b-2h08115n5n] {
    border-bottom: none;
}

.deposit-row[b-2h08115n5n] {
    transition: all 0.2s ease;
    background-color: rgba(248, 250, 252, 0.5);
    border-left: 4px solid #cbd5e1;
}

.deposit-row:hover[b-2h08115n5n] {
    background-color: rgba(30, 41, 59, 0.03);
    border-left-color: #0ea5e9;
}

.deposit-badge[b-2h08115n5n] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.15) 0%, rgba(14, 165, 233, 0.08) 100%);
    color: #0d6efd;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    font-weight: 600;
}

.deposits-table .fw-semibold[b-2h08115n5n] {
    color: #1e293b;
    font-size: 0.95rem;
}

.deposits-table .text-success[b-2h08115n5n] {
    font-weight: 700;
    color: #059669 !important;
}

/* Table Footer */
.deposits-table tfoot[b-2h08115n5n] {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

.deposits-table tfoot tr[b-2h08115n5n] {
    border-top: 2px solid #e2e8f0;
}

.deposits-table tfoot td[b-2h08115n5n] {
    padding: 1rem 0.75rem;
    color: #1e293b;
    font-weight: 600;
}

/* Action Buttons */
.action-button-group[b-2h08115n5n] {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

.action-button-group .btn[b-2h08115n5n] {
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    border-radius: 6px;
    transition: all 0.2s ease;
    border: none;
}

.action-button-group .btn-outline-primary[b-2h08115n5n] {
    color: #0284c7;
    background: transparent;
    border: 1px solid #0284c7;
}

.action-button-group .btn-outline-primary:hover[b-2h08115n5n] {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    color: white;
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
}

.action-button-group .btn-outline-danger[b-2h08115n5n] {
    color: #dc2626;
    background: transparent;
    border: 1px solid #dc2626;
}

.action-button-group .btn-outline-danger:hover[b-2h08115n5n] {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

/* Responsive Design */
@media (max-width: 768px) {
    .modern-page-header[b-2h08115n5n] {
        gap: 1rem;
        padding-bottom: 1.5rem;
    }

    .header-icon[b-2h08115n5n] {
        width: 48px;
        height: 48px;
        font-size: 1.5rem;
    }

    .header-content h1[b-2h08115n5n] {
        font-size: 1.5rem;
    }

    .header-content p[b-2h08115n5n] {
        font-size: 0.9rem;
    }

    .action-section[b-2h08115n5n] {
        flex-direction: column;
    }

    .action-section .btn[b-2h08115n5n] {
        width: 100%;
        text-align: center;
    }

    .chart-card .card-body[b-2h08115n5n] {
        padding: 1.5rem 1rem;
    }

    .chart-card h4[b-2h08115n5n] {
        font-size: 1.75rem;
    }

    .deposits-table thead th[b-2h08115n5n],
    .deposits-table tbody td[b-2h08115n5n] {
        padding: 0.75rem;
        font-size: 0.875rem;
    }

    .action-button-group[b-2h08115n5n] {
        flex-direction: column;
        gap: 0.25rem;
    }

    .card-header[b-2h08115n5n] {
        flex-direction: column;
    }

    .card-header h5[b-2h08115n5n] {
        margin-bottom: 0.75rem;
    }
}

@media (max-width: 480px) {
    .modern-page-header[b-2h08115n5n] {
        gap: 0.75rem;
        padding-bottom: 1rem;
    }

    .header-icon[b-2h08115n5n] {
        width: 44px;
        height: 44px;
        font-size: 1.25rem;
    }

    .header-content h1[b-2h08115n5n] {
        font-size: 1.25rem;
    }

    .header-content p[b-2h08115n5n] {
        font-size: 0.85rem;
    }

    .deposits-table[b-2h08115n5n] {
        font-size: 0.8rem;
    }

    .deposits-table thead th[b-2h08115n5n],
    .deposits-table tbody td[b-2h08115n5n] {
        padding: 0.5rem;
    }

    .stat-icon[b-2h08115n5n] {
        width: 60px;
        height: 60px;
    }

    .stat-icon i[b-2h08115n5n] {
        font-size: 1.5rem;
    }

    .chart-card h4[b-2h08115n5n] {
        font-size: 1.5rem;
    }

    .empty-state[b-2h08115n5n] {
        padding: 2rem 1rem;
    }
}
/* /Components/Pages/PropertyManagement/Expenses.razor.rz.scp.css */
.modern-page-header[b-90rnw840kk] {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 0;
    padding-bottom: 2rem;
}

.header-icon[b-90rnw840kk] {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: white;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.modern-page-header:hover .header-icon[b-90rnw840kk] {
    transform: scale(1.05);
}

.header-content[b-90rnw840kk] {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.5rem;
    padding-top: 0.25rem;
    flex: 1;
}

.header-content h1[b-90rnw840kk] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    line-height: 1.2;
}

.header-content p[b-90rnw840kk] {
    font-size: 0.95rem;
    color: #64748b;
    margin: 0;
    font-weight: 400;
    line-height: 1.4;
}

.action-section[b-90rnw840kk] {
    padding-bottom: 1.5rem;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.action-section .btn[b-90rnw840kk] {
    padding: 0.75rem 1.75rem;
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: 10px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.2);
}

.action-section .btn-primary[b-90rnw840kk] {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    border: none;
    color: white;
}

.action-section .btn-primary:hover[b-90rnw840kk] {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(14, 165, 233, 0.35);
}

.action-section .btn-outline-secondary[b-90rnw840kk] {
    color: #64748b;
    border: 1px solid #e2e8f0;
    background: white;
    transition: all 0.3s ease;
}

.action-section .btn-outline-secondary:hover[b-90rnw840kk] {
    background: #f8fafc;
    border-color: #cbd5e1;
    transform: translateY(-2px);
}

/* Loading State Card */
.card.border-0[b-90rnw840kk] {
    border-radius: 12px !important;
    overflow: hidden;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

/* Empty State */
.empty-state[b-90rnw840kk] {
    padding: 3rem 2rem;
}

.empty-state .empty-icon[b-90rnw840kk] {
    animation: float-b-90rnw840kk 3s ease-in-out infinite;
}

.empty-state h5[b-90rnw840kk] {
    font-weight: 700;
    font-size: 1.25rem;
    color: #1e293b;
}

.empty-state p[b-90rnw840kk] {
    font-size: 0.95rem;
    color: #64748b;
}

.empty-state .btn-primary[b-90rnw840kk] {
    padding: 0.75rem 2rem;
    font-weight: 600;
    border-radius: 8px;
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    border: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.2);
}

.empty-state .btn-primary:hover[b-90rnw840kk] {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(14, 165, 233, 0.35);
}

@keyframes float-b-90rnw840kk {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* Filters Section */
.search-box-wrapper[b-90rnw840kk] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.search-box-wrapper .form-label[b-90rnw840kk] {
    color: #1e293b;
}

.input-group .input-group-text[b-90rnw840kk] {
    border: 1px solid #e2e8f0;
    border-right: none;
}

.input-group .form-control[b-90rnw840kk] {
    border: 1px solid #e2e8f0;
    border-left: none;
    transition: all 0.2s ease;
}

.input-group .form-control:focus[b-90rnw840kk] {
    border-color: #0ea5e9;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}

.form-select[b-90rnw840kk] {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.form-select:focus[b-90rnw840kk] {
    border-color: #0ea5e9;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}

/* Statistics Cards */
.chart-card[b-90rnw840kk] {
    border-radius: 12px !important;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    background: #ffffff;
}

.chart-card[b-90rnw840kk]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #0ea5e9, #0284c7);
}

.row.g-4 .col-lg-3:nth-child(2) .chart-card[b-90rnw840kk]::before {
    background: linear-gradient(90deg, #ef4444, #dc2626);
}

.row.g-4 .col-lg-3:nth-child(3) .chart-card[b-90rnw840kk]::before {
    background: linear-gradient(90deg, #10b981, #059669);
}

.row.g-4 .col-lg-3:nth-child(4) .chart-card[b-90rnw840kk]::before {
    background: linear-gradient(90deg, #f59e0b, #d97706);
}

.chart-card:hover[b-90rnw840kk] {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.chart-card .card-body[b-90rnw840kk] {
    padding: 2rem 1.5rem;
    background: linear-gradient(135deg, #f0f9ff 0%, #f8fafc 100%);
}

.row.g-4 .col-lg-3:nth-child(2) .chart-card .card-body[b-90rnw840kk] {
    background: linear-gradient(135deg, #fef2f2 0%, #f8fafc 100%);
}

.row.g-4 .col-lg-3:nth-child(3) .chart-card .card-body[b-90rnw840kk] {
    background: linear-gradient(135deg, #f0fdf4 0%, #f8fafc 100%);
}

.row.g-4 .col-lg-3:nth-child(4) .chart-card .card-body[b-90rnw840kk] {
    background: linear-gradient(135deg, #fffbf0 0%, #f8fafc 100%);
}

/* Expenses Table Card */
.card-header.bg-white[b-90rnw840kk] {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
    border-bottom: 2px solid #e2e8f0;
    padding: 1.5rem;
}

.card-header h5[b-90rnw840kk] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e293b;
}

.card-header .badge[b-90rnw840kk] {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
}

/* Expenses List Container */
.expenses-list[b-90rnw840kk] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Inline Expense Card */
.expense-inline-card[b-90rnw840kk] {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 1.5rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.expense-inline-card:hover[b-90rnw840kk] {
    border-color: #cbd5e1;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* Left Section - Reference and Date */
.expense-item-left[b-90rnw840kk] {
    display: flex;
    align-items: center;
    min-width: 150px;
    flex-shrink: 0;
}

.expense-reference[b-90rnw840kk] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.expense-ref-number[b-90rnw840kk] {
    font-weight: 700;
    color: #1e293b;
    font-size: 0.95rem;
}

.expense-date[b-90rnw840kk] {
    font-size: 0.85rem;
    color: #64748b;
}

/* Middle Section - Type and Description */
.expense-item-middle[b-90rnw840kk] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex: 1;
    min-width: 0;
}

.expense-description-block[b-90rnw840kk] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.expense-description[b-90rnw840kk] {
    font-weight: 600;
    color: #1e293b;
    font-size: 0.95rem;
    word-break: break-word;
}

.expense-vendor[b-90rnw840kk] {
    font-size: 0.85rem;
    color: #64748b;
}

/* Right Section - Amount and Status */
.expense-item-right[b-90rnw840kk] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.75rem;
    flex-shrink: 0;
}

.expense-amount[b-90rnw840kk] {
    font-weight: 700;
    color: #dc2626;
    font-size: 1.1rem;
}

.expense-status[b-90rnw840kk] {
    display: flex;
    gap: 0.5rem;
}

/* Action Buttons */
.expense-actions[b-90rnw840kk] {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.expense-badge[b-90rnw840kk] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.15) 0%, rgba(14, 165, 233, 0.08) 100%);
    color: #0d6efd;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    font-weight: 600;
}

/* Status Badges */
.badge[b-90rnw840kk] {
    font-weight: 600;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    font-size: 0.8rem;
    letter-spacing: 0.3px;
}

.badge.bg-success[b-90rnw840kk] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2);
}

.badge.bg-warning[b-90rnw840kk] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.2);
}

.badge.bg-info[b-90rnw840kk] {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%) !important;
    box-shadow: 0 2px 8px rgba(6, 182, 212, 0.2);
}

/* Expenses Table */
.expenses-table[b-90rnw840kk] {
    margin-bottom: 0;
    background: #ffffff;
}

.expenses-table thead th[b-90rnw840kk] {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    font-weight: 700;
    color: #1e293b;
    border: none;
    font-size: 0.9rem;
    padding: 1rem 0.75rem;
    letter-spacing: 0.3px;
}

.expenses-table tbody td[b-90rnw840kk] {
    padding: 1rem 0.75rem;
    border: none;
    border-bottom: 1px solid #f1f5f9;
}

.expenses-table tbody tr:last-child td[b-90rnw840kk] {
    border-bottom: none;
}

.expense-row[b-90rnw840kk] {
    transition: all 0.2s ease;
}

.expense-row:hover[b-90rnw840kk] {
    background-color: rgba(14, 165, 233, 0.03);
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.03);
}

.expenses-table .fw-semibold[b-90rnw840kk] {
    color: #1e293b;
    font-size: 0.95rem;
}

.expenses-table .text-danger[b-90rnw840kk] {
    font-weight: 700;
    color: #dc2626 !important;
}

.expenses-table .text-info[b-90rnw840kk] {
    font-weight: 700;
    color: #0284c7 !important;
}

/* Table Footer */
.expenses-table tfoot[b-90rnw840kk] {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

.expenses-table tfoot tr[b-90rnw840kk] {
    border-top: 2px solid #e2e8f0;
}

.expenses-table tfoot td[b-90rnw840kk] {
    padding: 1rem 0.75rem;
    color: #1e293b;
    font-weight: 600;
}

/* Action Buttons */
.action-button-group[b-90rnw840kk] {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

.action-button-group .btn[b-90rnw840kk] {
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    border-radius: 6px;
    transition: all 0.2s ease;
    border: none;
}

.action-button-group .btn-outline-primary[b-90rnw840kk] {
    color: #0284c7;
    background: transparent;
    border: 1px solid #0284c7;
}

.action-button-group .btn-outline-primary:hover[b-90rnw840kk] {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    color: white;
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
}

.action-button-group .btn-outline-info[b-90rnw840kk] {
    color: #0891b2;
    background: transparent;
    border: 1px solid #0891b2;
}

.action-button-group .btn-outline-info:hover[b-90rnw840kk] {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
    color: white;
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3);
}

.action-button-group .btn-outline-danger[b-90rnw840kk] {
    color: #dc2626;
    background: transparent;
    border: 1px solid #dc2626;
}

.action-button-group .btn-outline-danger:hover[b-90rnw840kk] {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

/* Expense Actions */
.expense-actions .btn[b-90rnw840kk] {
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    border-radius: 6px;
    transition: all 0.2s ease;
    border: 1px solid currentColor;
}

.expense-actions .btn-outline-primary[b-90rnw840kk] {
    color: #0284c7;
    background: transparent;
    border: 1px solid #0284c7;
}

.expense-actions .btn-outline-primary:hover[b-90rnw840kk] {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    color: white;
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
}

.expense-actions .btn-outline-info[b-90rnw840kk] {
    color: #0891b2;
    background: transparent;
    border: 1px solid #0891b2;
}

.expense-actions .btn-outline-info:hover[b-90rnw840kk] {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
    color: white;
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3);
}

.expense-actions .btn-outline-danger[b-90rnw840kk] {
    color: #dc2626;
    background: transparent;
    border: 1px solid #dc2626;
}

.expense-actions .btn-outline-danger:hover[b-90rnw840kk] {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

/* Responsive Design */
@media (max-width: 1200px) {
    .expense-inline-card[b-90rnw840kk] {
        gap: 1.5rem;
    }

    .expense-item-middle[b-90rnw840kk] {
        gap: 0.75rem;
    }
}

@media (max-width: 768px) {
    .modern-page-header[b-90rnw840kk] {
        gap: 1rem;
        padding-bottom: 1.5rem;
    }

    .header-icon[b-90rnw840kk] {
        width: 48px;
        height: 48px;
        font-size: 1.5rem;
    }

    .header-content h1[b-90rnw840kk] {
        font-size: 1.5rem;
    }

    .header-content p[b-90rnw840kk] {
        font-size: 0.9rem;
    }

    .action-section[b-90rnw840kk] {
        flex-direction: column;
    }

    .action-section .btn[b-90rnw840kk] {
        width: 100%;
        text-align: center;
    }

    .chart-card .card-body[b-90rnw840kk] {
        padding: 1.5rem 1rem;
    }

    .chart-card h4[b-90rnw840kk] {
        font-size: 1.75rem;
    }

    .expense-inline-card[b-90rnw840kk] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        padding: 1rem;
    }

    .expense-item-left[b-90rnw840kk] {
        width: 100%;
        min-width: unset;
    }

    .expense-item-middle[b-90rnw840kk] {
        width: 100%;
        flex-direction: column;
        gap: 0.5rem;
    }

    .expense-item-right[b-90rnw840kk] {
        width: 100%;
        align-items: flex-start;
    }

    .expense-amount[b-90rnw840kk] {
        font-size: 1rem;
    }

    .expense-actions[b-90rnw840kk] {
        width: 100%;
        justify-content: flex-start;
    }

    .action-button-group[b-90rnw840kk] {
        flex-direction: column;
        gap: 0.25rem;
    }

    .card-header[b-90rnw840kk] {
        flex-direction: column;
    }

    .card-header h5[b-90rnw840kk] {
        margin-bottom: 0.75rem;
    }
}

@media (max-width: 480px) {
    .modern-page-header[b-90rnw840kk] {
        gap: 0.75rem;
        padding-bottom: 1rem;
    }

    .header-icon[b-90rnw840kk] {
        width: 44px;
        height: 44px;
        font-size: 1.25rem;
    }

    .header-content h1[b-90rnw840kk] {
        font-size: 1.25rem;
    }

    .header-content p[b-90rnw840kk] {
        font-size: 0.85rem;
    }

    .stat-icon[b-90rnw840kk] {
        width: 60px;
        height: 60px;
    }

    .stat-icon i[b-90rnw840kk] {
        font-size: 1.5rem;
    }

    .chart-card h4[b-90rnw840kk] {
        font-size: 1.5rem;
    }

    .empty-state[b-90rnw840kk] {
        padding: 2rem 1rem;
    }

    .expense-inline-card[b-90rnw840kk] {
        padding: 0.75rem;
    }

    .expense-badge[b-90rnw840kk] {
        width: 36px;
        height: 36px;
        font-size: 0.85rem;
    }

    .expense-ref-number[b-90rnw840kk] {
        font-size: 0.85rem;
    }

    .expense-date[b-90rnw840kk] {
        font-size: 0.75rem;
    }

    .expense-description[b-90rnw840kk] {
        font-size: 0.85rem;
    }

    .expense-vendor[b-90rnw840kk] {
        font-size: 0.75rem;
    }

    .expense-amount[b-90rnw840kk] {
        font-size: 0.95rem;
    }
}
/* /Components/Pages/PropertyManagement/ExpenseTypes.razor.rz.scp.css */
.modern-page-header[b-q15fctxn17] {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 0;
    padding-bottom: 2rem;
}

.header-icon[b-q15fctxn17] {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: white;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.modern-page-header:hover .header-icon[b-q15fctxn17] {
    transform: scale(1.05);
}

.header-content[b-q15fctxn17] {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.5rem;
    padding-top: 0.25rem;
    flex: 1;
}

.header-content h1[b-q15fctxn17] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    line-height: 1.2;
}

.header-content p[b-q15fctxn17] {
    font-size: 0.95rem;
    color: #64748b;
    margin: 0;
    font-weight: 400;
    line-height: 1.4;
}

.action-section[b-q15fctxn17] {
    padding-bottom: 1.5rem;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.action-section .btn[b-q15fctxn17] {
    padding: 0.75rem 1.75rem;
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: 10px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.2);
}

.action-section .btn-primary[b-q15fctxn17] {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    border: none;
    color: white;
}

.action-section .btn-primary:hover[b-q15fctxn17] {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(14, 165, 233, 0.35);
}

.action-section .btn-outline-secondary[b-q15fctxn17] {
    color: #64748b;
    border: 1px solid #e2e8f0;
    background: white;
    transition: all 0.3s ease;
}

.action-section .btn-outline-secondary:hover[b-q15fctxn17] {
    background: #f8fafc;
    border-color: #cbd5e1;
    transform: translateY(-2px);
}

/* Loading State Card */
.card.border-0[b-q15fctxn17] {
    border-radius: 12px !important;
    overflow: hidden;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

/* Empty State */
.empty-state[b-q15fctxn17] {
    padding: 3rem 2rem;
}

.empty-state .empty-icon[b-q15fctxn17] {
    animation: float-b-q15fctxn17 3s ease-in-out infinite;
}

.empty-state h5[b-q15fctxn17] {
    font-weight: 700;
    font-size: 1.25rem;
    color: #1e293b;
}

.empty-state p[b-q15fctxn17] {
    font-size: 0.95rem;
    color: #64748b;
}

.empty-state .btn-primary[b-q15fctxn17] {
    padding: 0.75rem 2rem;
    font-weight: 600;
    border-radius: 8px;
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    border: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.2);
}

.empty-state .btn-primary:hover[b-q15fctxn17] {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(14, 165, 233, 0.35);
}

@keyframes float-b-q15fctxn17 {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* Expense Types Card */
.card-header.bg-white[b-q15fctxn17] {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
    border-bottom: 2px solid #e2e8f0;
    padding: 1.5rem;
}

.card-header h5[b-q15fctxn17] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e293b;
}

.card-header .badge[b-q15fctxn17] {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
}

/* Expense Types Table */
.table[b-q15fctxn17] {
    margin-bottom: 0;
    background: #ffffff;
}

.table thead th[b-q15fctxn17] {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    font-weight: 700;
    color: #1e293b;
    border: none;
    font-size: 0.9rem;
    padding: 1rem 0.75rem;
    letter-spacing: 0.3px;
}

.table tbody td[b-q15fctxn17] {
    padding: 1rem 0.75rem;
    border: none;
    border-bottom: 1px solid #f1f5f9;
}

.table tbody tr:last-child td[b-q15fctxn17] {
    border-bottom: none;
}

.table tbody tr[b-q15fctxn17] {
    transition: all 0.2s ease;
}

.table tbody tr:hover[b-q15fctxn17] {
    background-color: rgba(14, 165, 233, 0.03);
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.03);
}

.type-badge[b-q15fctxn17] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.15) 0%, rgba(14, 165, 233, 0.08) 100%);
    color: #0d6efd;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    font-weight: 600;
}

.table .fw-semibold[b-q15fctxn17] {
    color: #1e293b;
    font-size: 0.95rem;
}

/* Table Footer */
.table tfoot[b-q15fctxn17] {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

.table tfoot tr[b-q15fctxn17] {
    border-top: 2px solid #e2e8f0;
}

.table tfoot td[b-q15fctxn17] {
    padding: 1rem 0.75rem;
    color: #1e293b;
    font-weight: 600;
}

/* Status Badges */
.badge[b-q15fctxn17] {
    font-weight: 600;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    font-size: 0.8rem;
    letter-spacing: 0.3px;
}

.badge.bg-success[b-q15fctxn17] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2);
}

.badge.bg-secondary[b-q15fctxn17] {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%) !important;
    box-shadow: 0 2px 8px rgba(107, 114, 128, 0.2);
}

.bg-primary-soft[b-q15fctxn17] {
    background-color: rgba(13, 110, 253, 0.1);
    color: #0d6efd;
    border: 1px solid rgba(13, 110, 253, 0.2);
}

/* Action Buttons */
.action-button-group[b-q15fctxn17] {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

.action-button-group .btn[b-q15fctxn17] {
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    border-radius: 6px;
    transition: all 0.2s ease;
    border: none;
}

.action-button-group .btn-outline-primary[b-q15fctxn17] {
    color: #0284c7;
    background: transparent;
    border: 1px solid #0284c7;
}

.action-button-group .btn-outline-primary:hover[b-q15fctxn17] {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    color: white;
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
}

.action-button-group .btn-outline-danger[b-q15fctxn17] {
    color: #dc2626;
    background: transparent;
    border: 1px solid #dc2626;
}

.action-button-group .btn-outline-danger:hover[b-q15fctxn17] {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

/* Responsive Design */
@media (max-width: 768px) {
    .modern-page-header[b-q15fctxn17] {
        gap: 1rem;
        padding-bottom: 1.5rem;
    }

    .header-icon[b-q15fctxn17] {
        width: 48px;
        height: 48px;
        font-size: 1.5rem;
    }

    .header-content h1[b-q15fctxn17] {
        font-size: 1.5rem;
    }

    .header-content p[b-q15fctxn17] {
        font-size: 0.9rem;
    }

    .action-section[b-q15fctxn17] {
        flex-direction: column;
    }

    .action-section .btn[b-q15fctxn17] {
        width: 100%;
        text-align: center;
    }

    .table thead th[b-q15fctxn17],
    .table tbody td[b-q15fctxn17] {
        padding: 0.75rem;
        font-size: 0.875rem;
    }

    .action-button-group[b-q15fctxn17] {
        flex-direction: column;
        gap: 0.25rem;
    }

    .card-header[b-q15fctxn17] {
        flex-direction: column;
    }

    .card-header h5[b-q15fctxn17] {
        margin-bottom: 0.75rem;
    }
}

@media (max-width: 480px) {
    .modern-page-header[b-q15fctxn17] {
        gap: 0.75rem;
        padding-bottom: 1rem;
    }

    .header-icon[b-q15fctxn17] {
        width: 44px;
        height: 44px;
        font-size: 1.25rem;
    }

    .header-content h1[b-q15fctxn17] {
        font-size: 1.25rem;
    }

    .header-content p[b-q15fctxn17] {
        font-size: 0.85rem;
    }

    .table[b-q15fctxn17] {
        font-size: 0.8rem;
    }

    .table thead th[b-q15fctxn17],
    .table tbody td[b-q15fctxn17] {
        padding: 0.5rem;
    }

    .empty-state[b-q15fctxn17] {
        padding: 2rem 1rem;
    }
}
/* /Components/Pages/PropertyManagement/Invoices.razor.rz.scp.css */
.modern-page-header[b-hnjhbuz5qu] {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 0;
    padding-bottom: 2rem;
}

.header-icon[b-hnjhbuz5qu] {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: white;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.modern-page-header:hover .header-icon[b-hnjhbuz5qu] {
    transform: scale(1.05);
}

.header-content[b-hnjhbuz5qu] {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.5rem;
    padding-top: 0.25rem;
    flex: 1;
}

.header-content h1[b-hnjhbuz5qu] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    line-height: 1.2;
}

.header-content p[b-hnjhbuz5qu] {
    font-size: 0.95rem;
    color: #64748b;
    margin: 0;
    font-weight: 400;
    line-height: 1.4;
}

.action-section[b-hnjhbuz5qu] {
    padding-bottom: 1.5rem;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.action-section .btn[b-hnjhbuz5qu] {
    padding: 0.75rem 1.75rem;
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: 10px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.2);
}

.action-section .btn-primary[b-hnjhbuz5qu] {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    border: none;
    color: white;
}

.action-section .btn-primary:hover[b-hnjhbuz5qu] {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(14, 165, 233, 0.35);
}

.action-section .btn-outline-secondary[b-hnjhbuz5qu] {
    background: white;
    border: 2px solid #cbd5e1;
    color: #64748b;
}

.action-section .btn-outline-secondary:hover[b-hnjhbuz5qu] {
    background: #f1f5f9;
    border-color: #94a3b8;
    color: #475569;
    transform: translateY(-2px);
}

/* Search Box Styles */
.search-box-wrapper[b-hnjhbuz5qu] {
    position: relative;
}

.search-box-wrapper .form-label[b-hnjhbuz5qu] {
    margin-bottom: 0.5rem;
    color: #495057;
}

.search-box-wrapper .input-group[b-hnjhbuz5qu] {
    border: 2px solid #cbd5e1;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.search-box-wrapper .input-group:focus-within[b-hnjhbuz5qu] {
    border-color: #0ea5e9;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}

.search-box-wrapper .form-control[b-hnjhbuz5qu] {
    border: none;
    padding: 0.75rem 1rem;
}

.search-box-wrapper .form-control[b-hnjhbuz5qu]::placeholder {
    color: #adb5bd;
}

.search-box-wrapper .form-control:focus[b-hnjhbuz5qu] {
    box-shadow: none;
    border-color: transparent;
}

/* Filter Card */
.card[b-hnjhbuz5qu] {
    border-radius: 12px !important;
    overflow: hidden;
    background: #ffffff;
}

.card-body[b-hnjhbuz5qu] {
    padding: 1.5rem;
}

.card-header.bg-white[b-hnjhbuz5qu] {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
    border-bottom: 2px solid #e2e8f0;
    padding: 1.5rem;
}

.card-header h5[b-hnjhbuz5qu] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e293b;
}

.card-header .badge[b-hnjhbuz5qu] {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: 20px;
}

/* Statistics Cards */
.chart-card[b-hnjhbuz5qu] {
    border-radius: 12px !important;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    background: #ffffff;
}

.chart-card[b-hnjhbuz5qu]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #0ea5e9, #0284c7);
}

.chart-card:nth-child(2)[b-hnjhbuz5qu]::before {
    background: linear-gradient(90deg, #10b981, #059669);
}

.chart-card:nth-child(3)[b-hnjhbuz5qu]::before {
    background: linear-gradient(90deg, #06b6d4, #0891b2);
}

.chart-card:nth-child(4)[b-hnjhbuz5qu]::before {
    background: linear-gradient(90deg, #f59e0b, #d97706);
}

.chart-card:hover[b-hnjhbuz5qu] {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.chart-card .card-body[b-hnjhbuz5qu] {
    padding: 2rem 1.5rem;
    background: linear-gradient(135deg, #f0f9ff 0%, #f8fafc 100%);
}

.chart-card:nth-child(2) .card-body[b-hnjhbuz5qu] {
    background: linear-gradient(135deg, #f0fdf4 0%, #f8fafc 100%);
}

.chart-card:nth-child(3) .card-body[b-hnjhbuz5qu] {
    background: linear-gradient(135deg, #f0f9ff 0%, #f8fafc 100%);
}

.chart-card:nth-child(4) .card-body[b-hnjhbuz5qu] {
    background: linear-gradient(135deg, #fffbf0 0%, #f8fafc 100%);
}

.stat-icon[b-hnjhbuz5qu] {
    width: 48px;
    height: 48px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Invoices Table */
.invoices-table[b-hnjhbuz5qu] {
    margin-bottom: 0;
    background: #ffffff;
}

.invoices-table thead th[b-hnjhbuz5qu] {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    font-weight: 700;
    color: #1e293b;
    border: none;
    font-size: 0.9rem;
    padding: 1rem 0.75rem;
    letter-spacing: 0.3px;
}

.invoices-table tbody td[b-hnjhbuz5qu] {
    padding: 1rem 0.75rem;
    border: none;
    border-bottom: 1px solid #f1f5f9;
}

.invoices-table tbody tr:last-child td[b-hnjhbuz5qu] {
    border-bottom: none;
}

.invoice-row[b-hnjhbuz5qu] {
    transition: all 0.2s ease;
}

.invoice-row-draft[b-hnjhbuz5qu] {
    background-color: rgba(108, 117, 125, 0.03);
    border-left: 4px solid #6c757d;
}

.invoice-row-draft:hover[b-hnjhbuz5qu] {
    background-color: rgba(108, 117, 125, 0.08);
}

.invoice-row-sent[b-hnjhbuz5qu] {
    background-color: rgba(13, 202, 240, 0.03);
    border-left: 4px solid #0dcaf0;
}

.invoice-row-sent:hover[b-hnjhbuz5qu] {
    background-color: rgba(13, 202, 240, 0.08);
}

.invoice-row-paid[b-hnjhbuz5qu] {
    background-color: rgba(25, 135, 84, 0.03);
    border-left: 4px solid #198754;
}

.invoice-row-paid:hover[b-hnjhbuz5qu] {
    background-color: rgba(25, 135, 84, 0.08);
}

.invoice-row-overdue[b-hnjhbuz5qu] {
    background-color: rgba(220, 53, 69, 0.03);
    border-left: 4px solid #dc3545;
}

.invoice-row-overdue:hover[b-hnjhbuz5qu] {
    background-color: rgba(220, 53, 69, 0.08);
}

.invoice-row:hover[b-hnjhbuz5qu] {
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.03);
}

.invoice-badge[b-hnjhbuz5qu] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.15) 0%, rgba(14, 165, 233, 0.08) 100%);
    color: #0d6efd;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    font-weight: 600;
}

.invoices-table .fw-semibold[b-hnjhbuz5qu] {
    color: #1e293b;
    font-size: 0.95rem;
}

.invoices-table .text-info[b-hnjhbuz5qu] {
    font-weight: 700;
    color: #0284c7 !important;
}

/* Action Buttons */
.action-button-group[b-hnjhbuz5qu] {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

.action-button-group .btn[b-hnjhbuz5qu] {
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    border-radius: 6px;
    transition: all 0.2s ease;
    border: none;
}

.action-button-group .btn-outline-primary[b-hnjhbuz5qu] {
    color: #0284c7;
    background: transparent;
    border: 1px solid #0284c7;
}

.action-button-group .btn-outline-primary:hover[b-hnjhbuz5qu] {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    color: white;
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
}

.action-button-group .btn-outline-danger[b-hnjhbuz5qu] {
    color: #dc2626;
    background: transparent;
    border: 1px solid #dc2626;
}

.action-button-group .btn-outline-danger:hover[b-hnjhbuz5qu] {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

/* Empty State */
.empty-state[b-hnjhbuz5qu] {
    padding: 3rem 2rem;
    text-align: center;
}

.empty-state .empty-icon[b-hnjhbuz5qu] {
    animation: float-b-hnjhbuz5qu 3s ease-in-out infinite;
    margin-bottom: 1rem;
}

.empty-state h5[b-hnjhbuz5qu] {
    font-weight: 700;
    font-size: 1.25rem;
    color: #1e293b;
}

.empty-state p[b-hnjhbuz5qu] {
    font-size: 0.95rem;
    color: #64748b;
}

@keyframes float-b-hnjhbuz5qu {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* Status Badges */
.badge[b-hnjhbuz5qu] {
    font-weight: 600;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    font-size: 0.8rem;
    letter-spacing: 0.3px;
}

.bg-primary-soft[b-hnjhbuz5qu] {
    background-color: rgba(13, 110, 253, 0.1);
    color: #0d6efd;
}

/* Modal Styles */
.modal-backdrop[b-hnjhbuz5qu] {
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1040;
}

.modal[b-hnjhbuz5qu] {
    z-index: 1050;
}

.invoice-details-preview[b-hnjhbuz5qu] {
    padding: 1rem;
}

.preview-header[b-hnjhbuz5qu] {
    padding-bottom: 1rem;
    border-bottom: 2px solid #e2e8f0;
}

.invoice-ref[b-hnjhbuz5qu] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #2d3748;
}

.invoice-info-section[b-hnjhbuz5qu] {
    margin-bottom: 1.5rem;
}

.section-title[b-hnjhbuz5qu] {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e2e8f0;
}

.info-card[b-hnjhbuz5qu] {
    background: #f8f9fa;
    padding: 1rem;
    border-radius: 0.375rem;
    border: 1px solid #e2e8f0;
}

.detail-row[b-hnjhbuz5qu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid #e9ecef;
}

.detail-row:last-child[b-hnjhbuz5qu] {
    border-bottom: none;
}

.detail-row .label[b-hnjhbuz5qu] {
    color: #6c757d;
    font-size: 0.9rem;
}

.detail-row .value[b-hnjhbuz5qu] {
    font-weight: 500;
    text-align: right;
}

.line-items[b-hnjhbuz5qu] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.line-item[b-hnjhbuz5qu] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 0.375rem;
    border: 1px solid #e2e8f0;
}

.item-description[b-hnjhbuz5qu] {
    flex: 1;
}

.item-description strong[b-hnjhbuz5qu] {
    color: #2d3748;
    font-size: 1rem;
}

.item-amount[b-hnjhbuz5qu] {
    font-weight: 600;
    font-size: 1.1rem;
    color: #2d3748;
    margin-left: 1rem;
}

.total-section[b-hnjhbuz5qu] {
    background: white;
    padding: 1rem;
    border-radius: 0.375rem;
    border: 2px solid #e2e8f0;
    margin-top: 1.5rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .modern-page-header[b-hnjhbuz5qu] {
        gap: 1rem;
        padding-bottom: 1.5rem;
    }

    .header-icon[b-hnjhbuz5qu] {
        width: 48px;
        height: 48px;
        font-size: 1.5rem;
    }

    .header-content h1[b-hnjhbuz5qu] {
        font-size: 1.5rem;
    }

    .header-content p[b-hnjhbuz5qu] {
        font-size: 0.9rem;
    }

    .action-section[b-hnjhbuz5qu] {
        flex-direction: column;
    }

    .action-section .btn[b-hnjhbuz5qu] {
        width: 100%;
        text-align: center;
    }

    .chart-card .card-body[b-hnjhbuz5qu] {
        padding: 1.5rem 1rem;
    }

    .chart-card h4[b-hnjhbuz5qu] {
        font-size: 1.75rem;
    }

    .invoices-table thead th[b-hnjhbuz5qu],
    .invoices-table tbody td[b-hnjhbuz5qu] {
        padding: 0.75rem;
        font-size: 0.875rem;
    }

    .action-button-group[b-hnjhbuz5qu] {
        flex-direction: column;
        gap: 0.25rem;
    }
}

@media (max-width: 480px) {
    .modern-page-header[b-hnjhbuz5qu] {
        gap: 0.75rem;
        padding-bottom: 1rem;
    }

    .header-icon[b-hnjhbuz5qu] {
        width: 44px;
        height: 44px;
        font-size: 1.25rem;
    }

    .header-content h1[b-hnjhbuz5qu] {
        font-size: 1.25rem;
    }

    .header-content p[b-hnjhbuz5qu] {
        font-size: 0.85rem;
    }

    .invoices-table[b-hnjhbuz5qu] {
        font-size: 0.8rem;
    }

    .invoices-table thead th[b-hnjhbuz5qu],
    .invoices-table tbody td[b-hnjhbuz5qu] {
        padding: 0.5rem;
    }

    .stat-icon[b-hnjhbuz5qu] {
        width: 40px;
        height: 40px;
    }

    .stat-icon i[b-hnjhbuz5qu] {
        font-size: 1.25rem;
    }

    .chart-card h4[b-hnjhbuz5qu] {
        font-size: 1.5rem;
    }

    .empty-state[b-hnjhbuz5qu] {
        padding: 2rem 1rem;
    }
}

/* Table Layout Fixes */
.invoices-table[b-hnjhbuz5qu] {
    table-layout: auto;
    width: 100%;
}

.invoices-table th[b-hnjhbuz5qu],
.invoices-table td[b-hnjhbuz5qu] {
    padding: 0.65rem 0.4rem !important;
    vertical-align: middle;
}

.invoices-table th[b-hnjhbuz5qu] {
    font-weight: 600;
    white-space: nowrap;
    font-size: 0.8rem;
}

/* Column width optimizations */
.invoices-table thead th:nth-child(1)[b-hnjhbuz5qu] {
    min-width: 120px;
}

.invoices-table thead th:nth-child(2)[b-hnjhbuz5qu] {
    min-width: 135px;
}

.invoices-table thead th:nth-child(3)[b-hnjhbuz5qu] {
    min-width: 75px;
}

.invoices-table thead th:nth-child(4)[b-hnjhbuz5qu] {
    min-width: 95px;
}

.invoices-table thead th:nth-child(5)[b-hnjhbuz5qu] {
    min-width: 95px;
}

.invoices-table thead th:nth-child(6)[b-hnjhbuz5qu] {
    min-width: 95px;
}

.invoices-table thead th:nth-child(7)[b-hnjhbuz5qu] {
    min-width: 75px;
}

.invoices-table thead th:nth-child(8)[b-hnjhbuz5qu] {
    min-width: 120px;
}

/* Number columns alignment */
.invoices-table td:nth-child(4)[b-hnjhbuz5qu],
.invoices-table td:nth-child(5)[b-hnjhbuz5qu],
.invoices-table td:nth-child(6)[b-hnjhbuz5qu] {
    text-align: right;
    white-space: nowrap;
    font-size: 0.85rem;
}

/* Reference column */
.invoices-table td:nth-child(1)[b-hnjhbuz5qu] {
    min-width: 120px;
    font-size: 0.85rem;
}

/* Unit/Tenant column */
.invoices-table td:nth-child(2)[b-hnjhbuz5qu] {
    min-width: 135px;
    font-size: 0.85rem;
}

.invoices-table td:nth-child(2) small[b-hnjhbuz5qu] {
    font-size: 0.75rem;
}

/* Period column */
.invoices-table td:nth-child(3)[b-hnjhbuz5qu] {
    font-size: 0.8rem;
}

/* Status column */
.invoices-table td:nth-child(7)[b-hnjhbuz5qu] {
    font-size: 0.8rem;
}

/* Balance column fix */
.invoices-table td:nth-child(6) span[b-hnjhbuz5qu] {
    display: inline-block;
    white-space: nowrap;
}

/* Invoice badge styling */
.invoice-badge[b-hnjhbuz5qu] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.375rem;
    background-color: rgba(13, 110, 253, 0.1);
    color: #0d6efd;
    flex-shrink: 0;
    font-size: 0.8rem;
}

/* Action button group */
.action-button-group[b-hnjhbuz5qu] {
    display: flex;
    gap: 0.2rem;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    min-width: 120px;
}

.action-button-group .btn[b-hnjhbuz5qu] {
    padding: 0.35rem 0.45rem;
    min-width: auto;
    flex-shrink: 0;
    font-size: 0.75rem;
}

/* Row styling */
.invoice-row[b-hnjhbuz5qu] {
    transition: background-color 0.2s ease;
}

.invoice-row:hover[b-hnjhbuz5qu] {
    background-color: rgba(0, 0, 0, 0.02);
}

.invoice-row-draft[b-hnjhbuz5qu] {
    border-left: 3px solid #6c757d;
}

.invoice-row-sent[b-hnjhbuz5qu] {
    border-left: 3px solid #0dcaf0;
}

.invoice-row-paid[b-hnjhbuz5qu] {
    border-left: 3px solid #198754;
}

.invoice-row-overdue[b-hnjhbuz5qu] {
    border-left: 3px solid #dc3545;
}

/* Table responsive wrapper */
.table-responsive[b-hnjhbuz5qu] {
    border-radius: 0.375rem;
}

/* Responsive adjustment for smaller screens */
@media (max-width: 1400px) {
    .invoices-table th[b-hnjhbuz5qu],
    .invoices-table td[b-hnjhbuz5qu] {
        padding: 0.6rem 0.35rem !important;
    }

    .invoices-table th[b-hnjhbuz5qu] {
        font-size: 0.75rem;
    }

    .invoices-table td:nth-child(1)[b-hnjhbuz5qu],
    .invoices-table td:nth-child(2)[b-hnjhbuz5qu] {
        font-size: 0.8rem;
    }

    .invoices-table td:nth-child(4)[b-hnjhbuz5qu],
    .invoices-table td:nth-child(5)[b-hnjhbuz5qu],
    .invoices-table td:nth-child(6)[b-hnjhbuz5qu] {
        font-size: 0.8rem;
    }

    .action-button-group .btn[b-hnjhbuz5qu] {
        padding: 0.3rem 0.4rem;
    }
}

@media (max-width: 1200px) {
    .action-button-group[b-hnjhbuz5qu] {
        flex-direction: column;
        gap: 0.2rem;
    }

    .action-button-group .btn[b-hnjhbuz5qu] {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .invoices-table th[b-hnjhbuz5qu],
    .invoices-table td[b-hnjhbuz5qu] {
        padding: 0.5rem 0.25rem !important;
        font-size: 0.75rem;
    }

    .invoices-table thead th[b-hnjhbuz5qu] {
        font-size: 0.7rem;
    }

    .invoices-table thead th:nth-child(1)[b-hnjhbuz5qu] {
        min-width: 100px;
    }

    .invoices-table thead th:nth-child(2)[b-hnjhbuz5qu] {
        min-width: 110px;
    }

    .invoices-table thead th:nth-child(3)[b-hnjhbuz5qu] {
        min-width: 65px;
    }

    .invoices-table thead th:nth-child(4)[b-hnjhbuz5qu],
    .invoices-table thead th:nth-child(5)[b-hnjhbuz5qu],
    .invoices-table thead th:nth-child(6)[b-hnjhbuz5qu] {
        min-width: 80px;
    }

    .invoices-table thead th:nth-child(7)[b-hnjhbuz5qu] {
        min-width: 65px;
    }

    .invoices-table thead th:nth-child(8)[b-hnjhbuz5qu] {
        min-width: 90px;
    }

    .invoice-badge[b-hnjhbuz5qu] {
        width: 1.5rem;
        height: 1.5rem;
        font-size: 0.7rem;
    }

    .action-button-group[b-hnjhbuz5qu] {
        gap: 0.15rem;
        min-width: 90px;
    }

    .action-button-group .btn[b-hnjhbuz5qu] {
        padding: 0.25rem 0.35rem;
        font-size: 0.65rem;
    }
}
/* /Components/Pages/PropertyManagement/MeterReadings.razor.rz.scp.css */
.modern-page-header[b-xqnqlun8nd] {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 0;
}

.header-icon[b-xqnqlun8nd] {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: white;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.modern-page-header:hover .header-icon[b-xqnqlun8nd] {
    transform: scale(1.05);
}

.header-content[b-xqnqlun8nd] {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.5rem;
    padding-top: 0.25rem;
}

.header-content h1[b-xqnqlun8nd] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    line-height: 1.2;
}

.header-content p[b-xqnqlun8nd] {
    font-size: 0.95rem;
    color: #64748b;
    margin: 0;
    font-weight: 400;
    line-height: 1.4;
}

.action-section[b-xqnqlun8nd] {
    padding-bottom: 1.5rem;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.action-section .btn[b-xqnqlun8nd] {
    padding: 0.75rem 1.75rem;
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: 10px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.2);
}

.action-section .btn-primary[b-xqnqlun8nd] {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    border: none;
    color: white;
}

.action-section .btn-primary:hover[b-xqnqlun8nd] {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(14, 165, 233, 0.35);
}

.action-section .btn-outline-secondary[b-xqnqlun8nd] {
    border: 2px solid #e2e8f0;
    color: #64748b;
    background: white;
}

.action-section .btn-outline-secondary:hover[b-xqnqlun8nd] {
    background: #f1f5f9;
    border-color: #cbd5e1;
    transform: translateY(-2px);
}

.search-box-wrapper[b-xqnqlun8nd] {
    width: 100%;
}

.search-box-wrapper .input-group[b-xqnqlun8nd] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    overflow: hidden;
}

.search-box-wrapper .form-control[b-xqnqlun8nd] {
    border: 1px solid #e2e8f0;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
}

.search-box-wrapper .form-control:focus[b-xqnqlun8nd] {
    border-color: #0ea5e9;
    box-shadow: none;
}

.form-select[b-xqnqlun8nd] {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.form-select:focus[b-xqnqlun8nd] {
    border-color: #0ea5e9;
    box-shadow: none;
}

.chart-card[b-xqnqlun8nd] {
    transition: all 0.3s ease;
}

.chart-card:hover[b-xqnqlun8nd] {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1) !important;
}

.stat-icon[b-xqnqlun8nd] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.meter-readings-table[b-xqnqlun8nd] {
    font-size: 0.95rem;
}

.meter-readings-table thead th[b-xqnqlun8nd] {
    font-weight: 600;
    color: #475569;
    background-color: #f8fafc;
    padding: 1rem;
}

.reading-row[b-xqnqlun8nd] {
    transition: all 0.2s ease;
}

.reading-row:hover[b-xqnqlun8nd] {
    background-color: #f8fafc;
}

.reading-badge[b-xqnqlun8nd] {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.875rem;
}

.action-button-group[b-xqnqlun8nd] {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    align-items: center;
}

.action-button-group .btn[b-xqnqlun8nd] {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
}

.empty-state[b-xqnqlun8nd] {
    padding: 2rem;
}

.empty-icon[b-xqnqlun8nd] {
    display: flex;
    justify-content: center;
}

.bg-primary-soft[b-xqnqlun8nd] {
    background-color: #e0f2fe;
    color: #0284c7;
}

.table-light[b-xqnqlun8nd] {
    background-color: #f8fafc;
}

.table-hover tbody tr:hover[b-xqnqlun8nd] {
    background-color: #f1f5f9;
}

.card-header[b-xqnqlun8nd] {
    background-color: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    padding: 1.25rem;
}

.card-header h5[b-xqnqlun8nd] {
    color: #1e293b;
    font-weight: 600;
}

/* Responsive Design */
@media (max-width: 768px) {
    .modern-page-header[b-xqnqlun8nd] {
        gap: 1rem;
        padding: 1.5rem 0;
    }

    .header-icon[b-xqnqlun8nd] {
        width: 48px;
        height: 48px;
        font-size: 1.5rem;
    }

    .header-content h1[b-xqnqlun8nd] {
        font-size: 1.5rem;
    }

    .header-content p[b-xqnqlun8nd] {
        font-size: 0.9rem;
    }

    .action-section[b-xqnqlun8nd] {
        flex-direction: column;
    }

    .action-section .btn[b-xqnqlun8nd] {
        width: 100%;
    }

    .meter-readings-table[b-xqnqlun8nd] {
        font-size: 0.85rem;
    }

    .meter-readings-table thead th[b-xqnqlun8nd] {
        padding: 0.75rem 0.5rem;
    }

    .action-button-group[b-xqnqlun8nd] {
        flex-wrap: wrap;
    }
}

@media (max-width: 480px) {
    .modern-page-header[b-xqnqlun8nd] {
        gap: 0.75rem;
        padding: 1rem 0;
    }

    .header-icon[b-xqnqlun8nd] {
        width: 44px;
        height: 44px;
        font-size: 1.25rem;
    }

    .header-content h1[b-xqnqlun8nd] {
        font-size: 1.25rem;
    }

    .header-content p[b-xqnqlun8nd] {
        font-size: 0.85rem;
    }

    .meter-readings-table[b-xqnqlun8nd] {
        font-size: 0.8rem;
    }

    .action-button-group[b-xqnqlun8nd] {
        flex-direction: column;
        gap: 0.25rem;
    }

    .action-button-group .btn[b-xqnqlun8nd] {
        width: 100%;
    }
}
/* /Components/Pages/PropertyManagement/Payments.razor.rz.scp.css */
/* Payments Page Styles */

.modern-page-header[b-0hg8rs4cds] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 2rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    color: white;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.modern-page-header .header-icon[b-0hg8rs4cds] {
    font-size: 3rem;
    opacity: 0.8;
}

.modern-page-header .header-content h1[b-0hg8rs4cds] {
    margin: 0;
    font-weight: 700;
    font-size: 2rem;
}

.modern-page-header .header-content p[b-0hg8rs4cds] {
    margin: 0.5rem 0 0;
    opacity: 0.9;
    font-size: 1rem;
}

/* Action Section */
.action-section[b-0hg8rs4cds] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.action-section .btn[b-0hg8rs4cds] {
    transition: all 0.3s ease;
    border-radius: 8px;
    font-weight: 500;
}

.action-section .btn:hover[b-0hg8rs4cds] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Search Box */
.search-box-wrapper[b-0hg8rs4cds] {
    display: flex;
    flex-direction: column;
}

.search-box-wrapper input[b-0hg8rs4cds] {
    border-radius: 8px;
    border: 1px solid #dee2e6;
    transition: all 0.3s ease;
}

.search-box-wrapper input:focus[b-0hg8rs4cds] {
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* Filter Card */
.card[b-0hg8rs4cds] {
    border-radius: 12px;
    transition: all 0.3s ease;
}

.card-header[b-0hg8rs4cds] {
    border-radius: 12px 12px 0 0;
}

/* Statistics Cards */
.chart-card[b-0hg8rs4cds] {
    transition: all 0.3s ease;
    border-radius: 12px;
}

.chart-card:hover[b-0hg8rs4cds] {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
}

.stat-icon[b-0hg8rs4cds] {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Payments Table */
.payments-table[b-0hg8rs4cds] {
    margin-bottom: 0;
    background: #ffffff;
}

.payments-table thead th[b-0hg8rs4cds] {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    font-weight: 700;
    color: #1e293b;
    border: none;
    font-size: 0.9rem;
    padding: 1rem 0.75rem;
    letter-spacing: 0.3px;
}

.payments-table td[b-0hg8rs4cds] {
    padding: 1rem;
    vertical-align: middle;
}

.payments-table tbody tr[b-0hg8rs4cds] {
    border-bottom: 1px solid #e9ecef;
}

.payments-table tbody tr:last-child[b-0hg8rs4cds] {
    border-bottom: none;
}

/* Payment Rows */
.payment-row[b-0hg8rs4cds] {
    transition: background-color 0.2s ease;
}

.payment-row:hover[b-0hg8rs4cds] {
    background-color: rgba(102, 126, 234, 0.05);
}

.payment-row-mpesa[b-0hg8rs4cds] {
    border-left: 4px solid #2ecc71;
}

.payment-row-pesalink[b-0hg8rs4cds] {
    border-left: 4px solid #3498db;
}

.payment-row-bank[b-0hg8rs4cds] {
    border-left: 4px solid #9b59b6;
}

.payment-row-cash[b-0hg8rs4cds] {
    border-left: 4px solid #f39c12;
}

.payment-row-other[b-0hg8rs4cds] {
    border-left: 4px solid #95a5a6;
}

.payment-badge[b-0hg8rs4cds] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-size: 0.9rem;
}

/* Channel Icon */
.channel-icon[b-0hg8rs4cds] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    border-radius: 8px;
}

/* Action Buttons */
.action-button-group[b-0hg8rs4cds] {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

.action-button-group .btn[b-0hg8rs4cds] {
    border-radius: 6px;
    transition: all 0.2s ease;
}

.action-button-group .btn:hover[b-0hg8rs4cds] {
    transform: scale(1.05);
}

/* Empty State */
.empty-state[b-0hg8rs4cds] {
    padding: 2rem;
}

.empty-icon[b-0hg8rs4cds] {
    margin-bottom: 1rem;
}

/* Modal Styles */
.modal-content[b-0hg8rs4cds] {
    border-radius: 12px;
    border: none;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.modal-header[b-0hg8rs4cds] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 12px 12px 0 0;
}

.modal-header .modal-title[b-0hg8rs4cds] {
    font-weight: 600;
}

.modal-header .btn-close[b-0hg8rs4cds] {
    filter: brightness(0) invert(1);
}

.form-label[b-0hg8rs4cds] {
    color: #333;
    margin-bottom: 0.5rem;
}

.form-control[b-0hg8rs4cds],
.form-select[b-0hg8rs4cds] {
    border-radius: 8px;
    border: 1px solid #dee2e6;
    transition: all 0.3s ease;
}

.form-control:focus[b-0hg8rs4cds],
.form-select:focus[b-0hg8rs4cds] {
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* Badges */
.badge[b-0hg8rs4cds] {
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    font-weight: 500;
    font-size: 0.825rem;
}

.bg-primary-soft[b-0hg8rs4cds] {
    background-color: rgba(102, 126, 234, 0.15);
    color: #667eea;
}

/* Responsive */
@media (max-width: 768px) {
    .modern-page-header[b-0hg8rs4cds] {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
        padding: 1.5rem;
    }

    .modern-page-header .header-icon[b-0hg8rs4cds] {
        font-size: 2.5rem;
    }

    .modern-page-header .header-content h1[b-0hg8rs4cds] {
        font-size: 1.5rem;
    }

    .action-section[b-0hg8rs4cds] {
        flex-direction: column;
    }

    .action-section .btn[b-0hg8rs4cds] {
        width: 100%;
    }

    .payments-table[b-0hg8rs4cds] {
        font-size: 0.875rem;
    }

    .payments-table th[b-0hg8rs4cds],
    .payments-table td[b-0hg8rs4cds] {
        padding: 0.75rem 0.5rem;
    }

    .action-button-group[b-0hg8rs4cds] {
        flex-direction: column;
        gap: 0.25rem;
    }

    .action-button-group .btn[b-0hg8rs4cds] {
        width: 100%;
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }
}

/* Color utilities */
.text-success[b-0hg8rs4cds] {
    color: #2ecc71;
}

.text-danger[b-0hg8rs4cds] {
    color: #e74c3c;
}

.text-warning[b-0hg8rs4cds] {
    color: #f39c12;
}

.text-info[b-0hg8rs4cds] {
    color: #3498db;
}

.text-muted[b-0hg8rs4cds] {
    color: #95a5a6;
}

/* Transition utilities */
.modal-backdrop[b-0hg8rs4cds] {
    background-color: rgba(0, 0, 0, 0.5);
    animation: fadeIn-b-0hg8rs4cds 0.3s ease;
}

.modal.show[b-0hg8rs4cds] {
    animation: slideUp-b-0hg8rs4cds 0.3s ease;
}

@keyframes fadeIn-b-0hg8rs4cds {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideUp-b-0hg8rs4cds {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Alert Styles */
.alert[b-0hg8rs4cds] {
    border-radius: 8px;
    border: none;
}

.alert-info[b-0hg8rs4cds] {
    background-color: rgba(52, 152, 219, 0.1);
    color: #2980b9;
}

.alert-warning[b-0hg8rs4cds] {
    background-color: rgba(243, 156, 18, 0.1);
    color: #d68910;
}
/* /Components/Pages/PropertyManagement/Tenancies.razor.rz.scp.css */
.modern-page-header[b-hg369yrhph] {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 0;
    padding-bottom: 2rem;
}

.header-icon[b-hg369yrhph] {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: white;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.modern-page-header:hover .header-icon[b-hg369yrhph] {
    transform: scale(1.05);
}

.header-content[b-hg369yrhph] {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.5rem;
    padding-top: 0.25rem;
    flex: 1;
}

.header-content h1[b-hg369yrhph] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    line-height: 1.2;
}

.header-content p[b-hg369yrhph] {
    font-size: 0.95rem;
    color: #64748b;
    margin: 0;
    font-weight: 400;
    line-height: 1.4;
}

.action-section[b-hg369yrhph] {
    padding-bottom: 1.5rem;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.action-section .btn[b-hg369yrhph] {
    padding: 0.75rem 1.75rem;
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: 10px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.2);
}

.action-section .btn-primary[b-hg369yrhph] {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    border: none;
    color: white;
}

.action-section .btn-primary:hover[b-hg369yrhph] {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(14, 165, 233, 0.35);
}

/* Loading State Card */
.card.border-0[b-hg369yrhph] {
    border-radius: 12px !important;
    overflow: hidden;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

/* Empty State */
.empty-state[b-hg369yrhph] {
    padding: 3rem 2rem;
}

.empty-state .empty-icon[b-hg369yrhph] {
    animation: float-b-hg369yrhph 3s ease-in-out infinite;
}

.empty-state h5[b-hg369yrhph] {
    font-weight: 700;
    font-size: 1.25rem;
    color: #1e293b;
}

.empty-state p[b-hg369yrhph] {
    font-size: 0.95rem;
    color: #64748b;
}

.empty-state .btn-primary[b-hg369yrhph] {
    padding: 0.75rem 2rem;
    font-weight: 600;
    border-radius: 8px;
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    border: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.2);
}

.empty-state .btn-primary:hover[b-hg369yrhph] {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(14, 165, 233, 0.35);
}

@keyframes float-b-hg369yrhph {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* Statistics Cards */
.chart-card[b-hg369yrhph] {
    border-radius: 12px !important;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    background: #ffffff;
}

.chart-card[b-hg369yrhph]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #0ea5e9, #0284c7);
}

.row.g-4 .col-lg-3:nth-child(2) .chart-card[b-hg369yrhph]::before {
    background: linear-gradient(90deg, #10b981, #059669);
}

.row.g-4 .col-lg-3:nth-child(3) .chart-card[b-hg369yrhph]::before {
    background: linear-gradient(90deg, #f59e0b, #d97706);
}

.row.g-4 .col-lg-3:nth-child(4) .chart-card[b-hg369yrhph]::before {
    background: linear-gradient(90deg, #06b6d4, #0891b2);
}

.chart-card:hover[b-hg369yrhph] {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.chart-card .card-body[b-hg369yrhph] {
    padding: 2rem 1.5rem;
    background: linear-gradient(135deg, #f0f9ff 0%, #f8fafc 100%);
}

.row.g-4 .col-lg-3:nth-child(2) .chart-card .card-body[b-hg369yrhph] {
    background: linear-gradient(135deg, #f0fdf4 0%, #f8fafc 100%);
}

.row.g-4 .col-lg-3:nth-child(3) .chart-card .card-body[b-hg369yrhph] {
    background: linear-gradient(135deg, #fffbf0 0%, #f8fafc 100%);
}

.row.g-4 .col-lg-3:nth-child(4) .chart-card .card-body[b-hg369yrhph] {
    background: linear-gradient(135deg, #f0f9ff 0%, #f8fafc 100%);
}

.stat-icon[b-hg369yrhph] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.1) 0%, rgba(14, 165, 233, 0.05) 100%);
    margin-bottom: 1rem;
    transition: all 0.3s ease;
}

.row.g-4 .col-lg-3:nth-child(2) .stat-icon[b-hg369yrhph] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
}

.row.g-4 .col-lg-3:nth-child(3) .stat-icon[b-hg369yrhph] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(245, 158, 11, 0.05) 100%);
}

.row.g-4 .col-lg-3:nth-child(4) .stat-icon[b-hg369yrhph] {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.1) 0%, rgba(6, 182, 212, 0.05) 100%);
}

.stat-icon i[b-hg369yrhph] {
    transition: all 0.3s ease;
    font-size: 1.75rem;
}

.chart-card:hover .stat-icon i[b-hg369yrhph] {
    transform: scale(1.2) rotate(5deg);
}

.chart-card h4[b-hg369yrhph] {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    letter-spacing: -0.5px;
}

.chart-card .small[b-hg369yrhph] {
    font-weight: 500;
    font-size: 0.9rem;
    letter-spacing: 0.3px;
}

/* Filter Buttons */
.filter-buttons[b-hg369yrhph] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.filter-buttons .btn[b-hg369yrhph] {
    padding: 0.5rem 1.25rem;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.filter-buttons .btn-primary[b-hg369yrhph],
.filter-buttons .btn-success[b-hg369yrhph],
.filter-buttons .btn-warning[b-hg369yrhph] {
    color: white;
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.filter-buttons .btn-outline-primary[b-hg369yrhph],
.filter-buttons .btn-outline-success[b-hg369yrhph],
.filter-buttons .btn-outline-warning[b-hg369yrhph] {
    font-weight: 600;
}

.filter-buttons .btn:hover[b-hg369yrhph] {
    transform: translateY(-2px);
}

/* Tenancies Table Card */
.card-header.bg-white[b-hg369yrhph] {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
    border-bottom: 2px solid #e2e8f0;
    padding: 1.5rem;
}

.card-header h5[b-hg369yrhph] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e293b;
}

.card-header .badge[b-hg369yrhph] {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
}

/* Tenancies Table */
.tenancies-table[b-hg369yrhph] {
    margin-bottom: 0;
    background: #ffffff;
}

.tenancies-table thead th[b-hg369yrhph] {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    font-weight: 700;
    color: #1e293b;
    border: none;
    font-size: 0.9rem;
    padding: 1rem 0.75rem;
    letter-spacing: 0.3px;
}

.tenancies-table tbody td[b-hg369yrhph] {
    padding: 1rem 0.75rem;
    border: none;
    border-bottom: 1px solid #f1f5f9;
}

.tenancies-table tbody tr:last-child td[b-hg369yrhph] {
    border-bottom: none;
}

.tenancy-row[b-hg369yrhph] {
    transition: all 0.2s ease;
}

.tenancy-row-active[b-hg369yrhph] {
    background-color: rgba(16, 185, 129, 0.03);
    border-left: 4px solid #10b981;
}

.tenancy-row-active:hover[b-hg369yrhph] {
    background-color: rgba(16, 185, 129, 0.08);
}

.tenancy-row-inactive[b-hg369yrhph] {
    background-color: rgba(107, 114, 128, 0.03);
    border-left: 4px solid #6b7280;
}

.tenancy-row-inactive:hover[b-hg369yrhph] {
    background-color: rgba(107, 114, 128, 0.08);
}

.tenancy-row:hover[b-hg369yrhph] {
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.03);
}

.tenancy-badge[b-hg369yrhph] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.15) 0%, rgba(14, 165, 233, 0.08) 100%);
    color: #0d6efd;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    font-weight: 600;
}

.tenancies-table .fw-semibold[b-hg369yrhph] {
    color: #1e293b;
    font-size: 0.95rem;
}

/* Table Footer */
.tenancies-table tfoot[b-hg369yrhph] {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

.tenancies-table tfoot tr[b-hg369yrhph] {
    border-top: 2px solid #e2e8f0;
}

.tenancies-table tfoot td[b-hg369yrhph] {
    padding: 1rem 0.75rem;
    color: #1e293b;
    font-weight: 600;
}

/* Status Badges */
.badge[b-hg369yrhph] {
    font-weight: 600;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    font-size: 0.8rem;
    letter-spacing: 0.3px;
}

.badge.bg-success[b-hg369yrhph] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2);
}

.badge.bg-secondary[b-hg369yrhph] {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%) !important;
    box-shadow: 0 2px 8px rgba(107, 114, 128, 0.2);
}

/* Action Buttons */
.action-button-group[b-hg369yrhph] {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

.action-button-group .btn[b-hg369yrhph] {
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    border-radius: 6px;
    transition: all 0.2s ease;
    border: none;
}

.action-button-group .btn-outline-primary[b-hg369yrhph] {
    color: #0284c7;
    background: transparent;
    border: 1px solid #0284c7;
}

.action-button-group .btn-outline-primary:hover[b-hg369yrhph] {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    color: white;
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
}

.action-button-group .btn-outline-warning[b-hg369yrhph] {
    color: #d97706;
    background: transparent;
    border: 1px solid #d97706;
}

.action-button-group .btn-outline-warning:hover[b-hg369yrhph] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

/* Responsive Design */
@media (max-width: 768px) {
    .modern-page-header[b-hg369yrhph] {
        gap: 1rem;
        padding-bottom: 1.5rem;
    }

    .header-icon[b-hg369yrhph] {
        width: 48px;
        height: 48px;
        font-size: 1.5rem;
    }

    .header-content h1[b-hg369yrhph] {
        font-size: 1.5rem;
    }

    .header-content p[b-hg369yrhph] {
        font-size: 0.9rem;
    }

    .action-section[b-hg369yrhph] {
        flex-direction: column;
    }

    .action-section .btn[b-hg369yrhph] {
        width: 100%;
        text-align: center;
    }

    .chart-card .card-body[b-hg369yrhph] {
        padding: 1.5rem 1rem;
    }

    .chart-card h4[b-hg369yrhph] {
        font-size: 1.75rem;
    }

    .filter-buttons[b-hg369yrhph] {
        flex-direction: column;
    }

    .filter-buttons .btn[b-hg369yrhph] {
        width: 100%;
        text-align: center;
    }

    .tenancies-table thead th[b-hg369yrhph],
    .tenancies-table tbody td[b-hg369yrhph] {
        padding: 0.75rem;
        font-size: 0.875rem;
    }

    .action-button-group[b-hg369yrhph] {
        flex-direction: column;
        gap: 0.25rem;
    }

    .card-header[b-hg369yrhph] {
        flex-direction: column;
    }

    .card-header h5[b-hg369yrhph] {
        margin-bottom: 0.75rem;
    }
}

@media (max-width: 480px) {
    .modern-page-header[b-hg369yrhph] {
        gap: 0.75rem;
        padding-bottom: 1rem;
    }

    .header-icon[b-hg369yrhph] {
        width: 44px;
        height: 44px;
        font-size: 1.25rem;
    }

    .header-content h1[b-hg369yrhph] {
        font-size: 1.25rem;
    }

    .header-content p[b-hg369yrhph] {
        font-size: 0.85rem;
    }

    .tenancies-table[b-hg369yrhph] {
        font-size: 0.8rem;
    }

    .tenancies-table thead th[b-hg369yrhph],
    .tenancies-table tbody td[b-hg369yrhph] {
        padding: 0.5rem;
    }

    .stat-icon[b-hg369yrhph] {
        width: 60px;
        height: 60px;
    }

    .stat-icon i[b-hg369yrhph] {
        font-size: 1.5rem;
    }

    .chart-card h4[b-hg369yrhph] {
        font-size: 1.5rem;
    }

    .empty-state[b-hg369yrhph] {
        padding: 2rem 1rem;
    }
}
/* /Components/Pages/PropertyManagement/Tenants.razor.rz.scp.css */
.modern-page-header[b-eonl4kbzz9] {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 0;
    padding-bottom: 2rem;
}

.header-icon[b-eonl4kbzz9] {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: white;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.modern-page-header:hover .header-icon[b-eonl4kbzz9] {
    transform: scale(1.05);
}

.header-content[b-eonl4kbzz9] {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.5rem;
    padding-top: 0.25rem;
    flex: 1;
}

.header-content h1[b-eonl4kbzz9] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    line-height: 1.2;
}

.header-content p[b-eonl4kbzz9] {
    font-size: 0.95rem;
    color: #64748b;
    margin: 0;
    font-weight: 400;
    line-height: 1.4;
}

.action-section[b-eonl4kbzz9] {
    padding-bottom: 1.5rem;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.action-section .btn[b-eonl4kbzz9] {
    padding: 0.75rem 1.75rem;
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: 10px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.2);
}

.action-section .btn-primary[b-eonl4kbzz9] {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    border: none;
    color: white;
}

.action-section .btn-primary:hover[b-eonl4kbzz9] {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(14, 165, 233, 0.35);
}

/* Loading State Card */
.card.border-0[b-eonl4kbzz9] {
    border-radius: 12px !important;
    overflow: hidden;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

/* Empty State */
.empty-state[b-eonl4kbzz9] {
    padding: 3rem 2rem;
}

.empty-state .empty-icon[b-eonl4kbzz9] {
    animation: float-b-eonl4kbzz9 3s ease-in-out infinite;
}

.empty-state h5[b-eonl4kbzz9] {
    font-weight: 700;
    font-size: 1.25rem;
    color: #1e293b;
}

.empty-state p[b-eonl4kbzz9] {
    font-size: 0.95rem;
    color: #64748b;
}

.empty-state .btn-primary[b-eonl4kbzz9] {
    padding: 0.75rem 2rem;
    font-weight: 600;
    border-radius: 8px;
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    border: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.2);
}

.empty-state .btn-primary:hover[b-eonl4kbzz9] {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(14, 165, 233, 0.35);
}

@keyframes float-b-eonl4kbzz9 {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* Statistics Cards */
.chart-card[b-eonl4kbzz9] {
    border-radius: 12px !important;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    background: #ffffff;
}

.chart-card[b-eonl4kbzz9]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #0ea5e9, #0284c7);
}

.row.g-4 .col-lg-3:nth-child(2) .chart-card[b-eonl4kbzz9]::before {
    background: linear-gradient(90deg, #10b981, #059669);
}

.row.g-4 .col-lg-3:nth-child(3) .chart-card[b-eonl4kbzz9]::before {
    background: linear-gradient(90deg, #06b6d4, #0891b2);
}

.row.g-4 .col-lg-3:nth-child(4) .chart-card[b-eonl4kbzz9]::before {
    background: linear-gradient(90deg, #f59e0b, #d97706);
}

.chart-card:hover[b-eonl4kbzz9] {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.chart-card .card-body[b-eonl4kbzz9] {
    padding: 2rem 1.5rem;
    background: linear-gradient(135deg, #f0f9ff 0%, #f8fafc 100%);
}

.row.g-4 .col-lg-3:nth-child(2) .chart-card .card-body[b-eonl4kbzz9] {
    background: linear-gradient(135deg, #f0fdf4 0%, #f8fafc 100%);
}

.row.g-4 .col-lg-3:nth-child(3) .chart-card .card-body[b-eonl4kbzz9] {
    background: linear-gradient(135deg, #f0f9ff 0%, #f8fafc 100%);
}

.row.g-4 .col-lg-3:nth-child(4) .chart-card .card-body[b-eonl4kbzz9] {
    background: linear-gradient(135deg, #fffbf0 0%, #f8fafc 100%);
}

.stat-icon[b-eonl4kbzz9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.1) 0%, rgba(14, 165, 233, 0.05) 100%);
    margin-bottom: 1rem;
    transition: all 0.3s ease;
}

.row.g-4 .col-lg-3:nth-child(2) .stat-icon[b-eonl4kbzz9] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
}

.row.g-4 .col-lg-3:nth-child(3) .stat-icon[b-eonl4kbzz9] {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.1) 0%, rgba(6, 182, 212, 0.05) 100%);
}

.row.g-4 .col-lg-3:nth-child(4) .stat-icon[b-eonl4kbzz9] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(245, 158, 11, 0.05) 100%);
}

.stat-icon i[b-eonl4kbzz9] {
    transition: all 0.3s ease;
    font-size: 1.75rem;
}

.chart-card:hover .stat-icon i[b-eonl4kbzz9] {
    transform: scale(1.2) rotate(5deg);
}

.chart-card h4[b-eonl4kbzz9] {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    letter-spacing: -0.5px;
}

.chart-card .small[b-eonl4kbzz9] {
    font-weight: 500;
    font-size: 0.9rem;
    letter-spacing: 0.3px;
}

/* Tenants Table Card */
.card-header.bg-white[b-eonl4kbzz9] {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
    border-bottom: 2px solid #e2e8f0;
    padding: 1.5rem;
}

.card-header h5[b-eonl4kbzz9] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e293b;
}

.card-header .badge[b-eonl4kbzz9] {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
}

/* Tenants Table */
.tenants-table[b-eonl4kbzz9] {
    margin-bottom: 0;
    background: #ffffff;
}

.tenants-table thead th[b-eonl4kbzz9] {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    font-weight: 700;
    color: #1e293b;
    border: none;
    font-size: 0.9rem;
    padding: 1rem 0.75rem;
    letter-spacing: 0.3px;
}

.tenants-table tbody td[b-eonl4kbzz9] {
    padding: 1rem 0.75rem;
    border: none;
    border-bottom: 1px solid #f1f5f9;
}

.tenants-table tbody tr:last-child td[b-eonl4kbzz9] {
    border-bottom: none;
}

.tenant-row[b-eonl4kbzz9] {
    transition: all 0.2s ease;
}

.tenant-row:hover[b-eonl4kbzz9] {
    background-color: rgba(14, 165, 233, 0.05);
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.03);
}

.tenant-badge[b-eonl4kbzz9] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.15) 0%, rgba(14, 165, 233, 0.08) 100%);
    color: #0d6efd;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    font-weight: 600;
}

.tenants-table .fw-semibold[b-eonl4kbzz9] {
    color: #1e293b;
    font-size: 0.95rem;
}

/* Table Footer */
.tenants-table tfoot[b-eonl4kbzz9] {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

.tenants-table tfoot tr[b-eonl4kbzz9] {
    border-top: 2px solid #e2e8f0;
}

.tenants-table tfoot td[b-eonl4kbzz9] {
    padding: 1rem 0.75rem;
    color: #1e293b;
    font-weight: 600;
}

/* Status Badges */
.badge[b-eonl4kbzz9] {
    font-weight: 600;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    font-size: 0.8rem;
    letter-spacing: 0.3px;
}

.badge.bg-info[b-eonl4kbzz9] {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%) !important;
    box-shadow: 0 2px 8px rgba(6, 182, 212, 0.2);
}

.badge.bg-success-soft[b-eonl4kbzz9] {
    background: rgba(16, 185, 129, 0.1) !important;
}

.badge.bg-success-soft.text-success[b-eonl4kbzz9] {
    color: #059669 !important;
}

.badge.bg-warning-soft[b-eonl4kbzz9] {
    background: rgba(245, 158, 11, 0.1) !important;
}

.badge.bg-warning-soft.text-warning[b-eonl4kbzz9] {
    color: #d97706 !important;
}

/* Action Buttons */
.action-button-group[b-eonl4kbzz9] {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

.action-button-group .btn[b-eonl4kbzz9] {
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    border-radius: 6px;
    transition: all 0.2s ease;
    border: none;
}

.action-button-group .btn-outline-primary[b-eonl4kbzz9] {
    color: #0284c7;
    background: transparent;
    border: 1px solid #0284c7;
}

.action-button-group .btn-outline-primary:hover[b-eonl4kbzz9] {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    color: white;
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
}

.action-button-group .btn-outline-danger[b-eonl4kbzz9] {
    color: #dc2626;
    background: transparent;
    border: 1px solid #dc2626;
}

.action-button-group .btn-outline-danger:hover[b-eonl4kbzz9] {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

/* Responsive Design */
@media (max-width: 768px) {
    .modern-page-header[b-eonl4kbzz9] {
        gap: 1rem;
        padding-bottom: 1.5rem;
    }

    .header-icon[b-eonl4kbzz9] {
        width: 48px;
        height: 48px;
        font-size: 1.5rem;
    }

    .header-content h1[b-eonl4kbzz9] {
        font-size: 1.5rem;
    }

    .header-content p[b-eonl4kbzz9] {
        font-size: 0.9rem;
    }

    .action-section[b-eonl4kbzz9] {
        flex-direction: column;
    }

    .action-section .btn[b-eonl4kbzz9] {
        width: 100%;
        text-align: center;
    }

    .chart-card .card-body[b-eonl4kbzz9] {
        padding: 1.5rem 1rem;
    }

    .chart-card h4[b-eonl4kbzz9] {
        font-size: 1.75rem;
    }

    .tenants-table thead th[b-eonl4kbzz9],
    .tenants-table tbody td[b-eonl4kbzz9] {
        padding: 0.75rem;
        font-size: 0.875rem;
    }

    .action-button-group[b-eonl4kbzz9] {
        flex-direction: column;
        gap: 0.25rem;
    }

    .card-header[b-eonl4kbzz9] {
        flex-direction: column;
    }

    .card-header h5[b-eonl4kbzz9] {
        margin-bottom: 0.75rem;
    }
}

@media (max-width: 480px) {
    .modern-page-header[b-eonl4kbzz9] {
        gap: 0.75rem;
        padding-bottom: 1rem;
    }

    .header-icon[b-eonl4kbzz9] {
        width: 44px;
        height: 44px;
        font-size: 1.25rem;
    }

    .header-content h1[b-eonl4kbzz9] {
        font-size: 1.25rem;
    }

    .header-content p[b-eonl4kbzz9] {
        font-size: 0.85rem;
    }

    .tenants-table[b-eonl4kbzz9] {
        font-size: 0.8rem;
    }

    .tenants-table thead th[b-eonl4kbzz9],
    .tenants-table tbody td[b-eonl4kbzz9] {
        padding: 0.5rem;
    }

    .stat-icon[b-eonl4kbzz9] {
        width: 60px;
        height: 60px;
    }

    .stat-icon i[b-eonl4kbzz9] {
        font-size: 1.5rem;
    }

    .chart-card h4[b-eonl4kbzz9] {
        font-size: 1.5rem;
    }

    .empty-state[b-eonl4kbzz9] {
        padding: 2rem 1rem;
    }
}
/* /Components/Pages/PropertyManagement/Units.razor.rz.scp.css */
.modern-page-header[b-exzx0d33h2] {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 0;
    padding-bottom: 2rem;
}

.header-icon[b-exzx0d33h2] {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: white;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.modern-page-header:hover .header-icon[b-exzx0d33h2] {
    transform: scale(1.05);
}

.header-content[b-exzx0d33h2] {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.5rem;
    padding-top: 0.25rem;
    flex: 1;
}

.header-content h1[b-exzx0d33h2] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    line-height: 1.2;
}

.header-content p[b-exzx0d33h2] {
    font-size: 0.95rem;
    color: #64748b;
    margin: 0;
    font-weight: 400;
    line-height: 1.4;
}

.action-section[b-exzx0d33h2] {
    padding-bottom: 1.5rem;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.action-section .btn[b-exzx0d33h2] {
    padding: 0.75rem 1.75rem;
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: 10px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.2);
}

.action-section .btn-primary[b-exzx0d33h2] {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    border: none;
    color: white;
}

.action-section .btn-primary:hover[b-exzx0d33h2] {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(14, 165, 233, 0.35);
}

/* Loading State Card */
.card.border-0[b-exzx0d33h2] {
    border-radius: 12px !important;
    overflow: hidden;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

/* Empty State */
.empty-state[b-exzx0d33h2] {
    padding: 3rem 2rem;
}

.empty-state .empty-icon[b-exzx0d33h2] {
    animation: float-b-exzx0d33h2 3s ease-in-out infinite;
}

.empty-state h5[b-exzx0d33h2] {
    font-weight: 700;
    font-size: 1.25rem;
    color: #1e293b;
}

.empty-state p[b-exzx0d33h2] {
    font-size: 0.95rem;
    color: #64748b;
}

.empty-state .btn-primary[b-exzx0d33h2] {
    padding: 0.75rem 2rem;
    font-weight: 600;
    border-radius: 8px;
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    border: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.2);
}

.empty-state .btn-primary:hover[b-exzx0d33h2] {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(14, 165, 233, 0.35);
}

@keyframes float-b-exzx0d33h2 {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* Statistics Cards */
.chart-card[b-exzx0d33h2] {
    border-radius: 12px !important;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    background: #ffffff;
}

.chart-card[b-exzx0d33h2]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #0ea5e9, #0284c7);
}

.chart-card:nth-child(2)[b-exzx0d33h2]::before {
    background: linear-gradient(90deg, #10b981, #059669);
}

.chart-card:nth-child(3)[b-exzx0d33h2]::before {
    background: linear-gradient(90deg, #f59e0b, #d97706);
}

.chart-card:nth-child(4)[b-exzx0d33h2]::before {
    background: linear-gradient(90deg, #06b6d4, #0891b2);
}

.chart-card:hover[b-exzx0d33h2] {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.chart-card .card-body[b-exzx0d33h2] {
    padding: 2rem 1.5rem;
    background: linear-gradient(135deg, #f0f9ff 0%, #f8fafc 100%);
}

.row.g-4 .col-lg-3:nth-child(2) .chart-card .card-body[b-exzx0d33h2] {
    background: linear-gradient(135deg, #f0fdf4 0%, #f8fafc 100%);
}

.row.g-4 .col-lg-3:nth-child(3) .chart-card .card-body[b-exzx0d33h2] {
    background: linear-gradient(135deg, #fffbf0 0%, #f8fafc 100%);
}

.row.g-4 .col-lg-3:nth-child(4) .chart-card .card-body[b-exzx0d33h2] {
    background: linear-gradient(135deg, #f0f9ff 0%, #f8fafc 100%);
}

/* Units Table Card */
.card-header.bg-white[b-exzx0d33h2] {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
    border-bottom: 2px solid #e2e8f0;
    padding: 1.5rem;
}

.card-header h5[b-exzx0d33h2] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e293b;
}

.card-header .badge[b-exzx0d33h2] {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
}

/* Units Table */
.units-table[b-exzx0d33h2] {
    margin-bottom: 0;
    background: #ffffff;
}

.units-table thead th[b-exzx0d33h2] {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    font-weight: 700;
    color: #1e293b;
    border: none;
    font-size: 0.9rem;
    padding: 1rem 0.75rem;
    letter-spacing: 0.3px;
}

.units-table tbody td[b-exzx0d33h2] {
    padding: 1rem 0.75rem;
    border: none;
    border-bottom: 1px solid #f1f5f9;
}

.units-table tbody tr:last-child td[b-exzx0d33h2] {
    border-bottom: none;
}

.unit-row[b-exzx0d33h2] {
    transition: all 0.2s ease;
}

.unit-row-occupied[b-exzx0d33h2] {
    background-color: rgba(16, 185, 129, 0.03);
    border-left: 4px solid #10b981;
}

.unit-row-occupied:hover[b-exzx0d33h2] {
    background-color: rgba(16, 185, 129, 0.08);
}

.unit-row-vacant[b-exzx0d33h2] {
    background-color: rgba(245, 158, 11, 0.03);
    border-left: 4px solid #f59e0b;
}

.unit-row-vacant:hover[b-exzx0d33h2] {
    background-color: rgba(245, 158, 11, 0.08);
}

.unit-row:hover[b-exzx0d33h2] {
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.03);
}

.unit-badge[b-exzx0d33h2] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.15) 0%, rgba(14, 165, 233, 0.08) 100%);
    color: #0d6efd;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    font-weight: 600;
}

.units-table .fw-semibold[b-exzx0d33h2] {
    color: #1e293b;
    font-size: 0.95rem;
}

.units-table .text-info[b-exzx0d33h2] {
    font-weight: 700;
    color: #0284c7 !important;
}

/* Table Footer */
.units-table tfoot[b-exzx0d33h2] {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

.units-table tfoot tr[b-exzx0d33h2] {
    border-top: 2px solid #e2e8f0;
}

.units-table tfoot td[b-exzx0d33h2] {
    padding: 1rem 0.75rem;
    color: #1e293b;
    font-weight: 600;
}

/* Status Badges */
.badge[b-exzx0d33h2] {
    font-weight: 600;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    font-size: 0.8rem;
    letter-spacing: 0.3px;
}

.badge.bg-success[b-exzx0d33h2] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2);
}

.badge.bg-warning[b-exzx0d33h2] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.2);
}

/* Action Buttons */
.action-button-group[b-exzx0d33h2] {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

.action-button-group .btn[b-exzx0d33h2] {
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    border-radius: 6px;
    transition: all 0.2s ease;
    border: none;
}

.action-button-group .btn-outline-primary[b-exzx0d33h2] {
    color: #0284c7;
    background: transparent;
    border: 1px solid #0284c7;
}

.action-button-group .btn-outline-primary:hover[b-exzx0d33h2] {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    color: white;
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
}

.action-button-group .btn-outline-danger[b-exzx0d33h2] {
    color: #dc2626;
    background: transparent;
    border: 1px solid #dc2626;
}

.action-button-group .btn-outline-danger:hover[b-exzx0d33h2] {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

/* Responsive Design */
@media (max-width: 768px) {
    .modern-page-header[b-exzx0d33h2] {
        gap: 1rem;
        padding-bottom: 1.5rem;
    }

    .header-icon[b-exzx0d33h2] {
        width: 48px;
        height: 48px;
        font-size: 1.5rem;
    }

    .header-content h1[b-exzx0d33h2] {
        font-size: 1.5rem;
    }

    .header-content p[b-exzx0d33h2] {
        font-size: 0.9rem;
    }

    .action-section[b-exzx0d33h2] {
        flex-direction: column;
    }

    .action-section .btn[b-exzx0d33h2] {
        width: 100%;
        text-align: center;
    }

    .chart-card .card-body[b-exzx0d33h2] {
        padding: 1.5rem 1rem;
    }

    .chart-card h4[b-exzx0d33h2] {
        font-size: 1.75rem;
    }

    .units-table thead th[b-exzx0d33h2],
    .units-table tbody td[b-exzx0d33h2] {
        padding: 0.75rem;
        font-size: 0.875rem;
    }

    .action-button-group[b-exzx0d33h2] {
        flex-direction: column;
        gap: 0.25rem;
    }

    .card-header[b-exzx0d33h2] {
        flex-direction: column;
    }

    .card-header h5[b-exzx0d33h2] {
        margin-bottom: 0.75rem;
    }
}

@media (max-width: 480px) {
    .modern-page-header[b-exzx0d33h2] {
        gap: 0.75rem;
        padding-bottom: 1rem;
    }

    .header-icon[b-exzx0d33h2] {
        width: 44px;
        height: 44px;
        font-size: 1.25rem;
    }

    .header-content h1[b-exzx0d33h2] {
        font-size: 1.25rem;
    }

    .header-content p[b-exzx0d33h2] {
        font-size: 0.85rem;
    }

    .units-table[b-exzx0d33h2] {
        font-size: 0.8rem;
    }

    .units-table thead th[b-exzx0d33h2],
    .units-table tbody td[b-exzx0d33h2] {
        padding: 0.5rem;
    }

    .stat-icon[b-exzx0d33h2] {
        width: 60px;
        height: 60px;
    }

    .stat-icon i[b-exzx0d33h2] {
        font-size: 1.5rem;
    }

    .chart-card h4[b-exzx0d33h2] {
        font-size: 1.5rem;
    }

    .empty-state[b-exzx0d33h2] {
        padding: 2rem 1rem;
    }
}
/* /Components/Shared/PageBreadcrumb.razor.rz.scp.css */
/* Breadcrumb Styles */
.page-breadcrumb[b-qq830xmi5v] {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 8px;
    padding: 1rem 1.5rem;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.breadcrumb[b-qq830xmi5v] {
    background: none;
    padding: 0;
    margin: 0;
    font-size: 0.9rem;
}

.breadcrumb-item[b-qq830xmi5v] {
    display: flex;
    align-items: center;
}

.breadcrumb-item i[b-qq830xmi5v] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.5rem;
}

.breadcrumb-item + .breadcrumb-item[b-qq830xmi5v]::before {
    content: "|";
    color: #6c757d;
    font-weight: normal;
    font-size: 1rem;
    margin: 0 0.75rem;
    display: inline-flex;
    align-items: center;
}

.breadcrumb-link[b-qq830xmi5v] {
    color: #495057;
    text-decoration: none;
    transition: all 0.2s ease;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.breadcrumb-link:hover[b-qq830xmi5v] {
    color: #007bff;
    background-color: rgba(0, 123, 255, 0.1);
    text-decoration: none;
}

.breadcrumb-section[b-qq830xmi5v] {
    color: #6c757d;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
}

.breadcrumb-section i[b-qq830xmi5v] {
    margin-right: 0;
}

.breadcrumb-item.active[b-qq830xmi5v] {
    color: #007bff;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.breadcrumb-item.active i[b-qq830xmi5v] {
    margin-right: 0;
}

.page-description[b-qq830xmi5v] {
    margin-top: 0.5rem;
    font-size: 0.85rem;
}

.page-description p[b-qq830xmi5v] {
    margin: 0;
    line-height: 1.4;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .page-breadcrumb[b-qq830xmi5v] {
        padding: 0.75rem 1rem;
        margin-bottom: 1rem;
    }
    
    .breadcrumb[b-qq830xmi5v] {
        font-size: 0.8rem;
    }
    
    .breadcrumb-item + .breadcrumb-item[b-qq830xmi5v]::before {
        margin: 0 0.25rem;
    }
}