.backgroundImage {
    background-image: url('/loginpagebackground.jpg'); /* Bhai, yahan apni image ka link daalna */
    background-size: cover; /* Puri screen ko cover karega, tension nahi */
    background-position: center; /* Image ko beech me set karega */
    background-repeat: no-repeat; /* Ek hi image dikhni chahiye, repeat nahi hogi */
    height: 100vh; /* Puri screen ki height le lega */
    margin: 0; /* Extra gap hata dega */
    padding:0;
}

.bottom-right {
    position: fixed;
    bottom: 0;
    right: 0;
    max-width: 300px;
    width: 90%;
}

.loginform {
    max-width: 450px;
    width: 90%;
    position: fixed; /* Fixes the item at the specified location */
    bottom: 57px; /* Aligns the item to the bottom of the screen */
    right: 100px; /* Aligns the item to the left side */
    background-color: #f8f9fa; /* Background color */
    text-align: center; /* Center-aligns text */
    padding: 10px; /* Padding for internal space */
}
/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .loginform {
        padding: 5px; /* Adjust padding on smaller screens */
        /*max-width: 450px;*/
        width: 100%;
        right:0;
    }
}

.gap-grid {
    margin-top: 20px; /* Gap between grids */
}

@media (max-width: 768px) {
    .gap-grid {
        margin-top: 10px; /* Adjust gap for small screens */
    }
}

.bottom-fixed {
    position: fixed; /* Fixes the item at the specified location */
    bottom: 0; /* Aligns the item to the bottom of the screen */
    left: 40%; /* Aligns the item to the left side */
    width: 100%; /* Make it full width */
    background-color: #f8f9fa; /* Background color */
    text-align: center; /* Center-aligns text */
    padding: 10px; /* Padding for internal space */
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .bottom-fixed {
        padding: 5px; /* Adjust padding on smaller screens */
        left:0;
    }
}

.bottom-fixedDusibLogo {
    position: fixed; /* Fixes the item at the specified location */
    bottom: 0; /* Aligns the item to the bottom of the screen */
    left: 0; /* Aligns the item to the left side */
    width: 100%; /* Make it full width */
   
    text-align: center; /* Center-aligns text */
    padding: 10px; /* Padding for internal space */
}
/* MudDialog always above draggable dialog */
/* ========================================================================== */
/* MUDBLAZOR DIALOG Z-INDEX FIX                                               */
/* ========================================================================== */

/* 1. The dark transparent background sits in the back */
.mud-overlay {
    z-index: 9990 !important;
}

/* 2. The container holding the white dialog box sits ABOVE the dark background */
.mud-dialog-container {
    z-index: 9995 !important;
}

/* 3. Dropdowns (like MudSelect and DatePickers) sit ABOVE the white dialog box */
.mud-popover, .mud-picker-popover, .mud-popover-provider {
    z-index: 10000 !important;
}
    /*.text_field_Style input::placeholder {
    font-size: 0.55rem!important;*/ /* chhota size (12px ke approx) */
    /*color: #9e9e9e!important;*/ /* optional: halka grey color */
    /*}*/
    /* Responsive adjustments for smaller screens */
    @media (max-width: 768px) {
        .bottom-fixedDusibLogo {
            padding: 5px; /* Adjust padding on smaller screens */
        }
    }
/* Role- and scope-aware dashboard */
.dashboard-page{background:#f6f8fb;min-height:calc(100vh - 72px);padding-left:32px!important;padding-right:32px!important}.dashboard-header{border-radius:20px!important;background:linear-gradient(135deg,#073b4c,#00695c)!important;color:#fff!important}.dashboard-heading{font-weight:750!important}.dashboard-muted{color:rgba(255,255,255,.78)!important}.period-select{width:150px;background:#fff;border-radius:8px}.kpi-card,.dashboard-card{height:100%;border-radius:16px!important;background:#fff}.kpi-card{position:relative;overflow:hidden;border:1px solid #edf1f5}.kpi-card:after{content:"";position:absolute;width:90px;height:90px;border-radius:50%;right:-35px;top:-35px;background:currentColor;opacity:.07}.kpi-icon{margin-bottom:14px}.kpi-value{font-weight:750!important;margin:6px 0!important}.wallet-card{color:#00695c!important}.business-card{color:#1565c0!important}.success-card{color:#2e7d32!important}.action-card{color:#ed6c02!important}.trend-chart{height:230px;display:flex;align-items:flex-end;gap:10px;border-bottom:1px solid #e6ebef;padding-top:16px}.trend-column{height:100%;flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;min-width:24px}.trend-bar{width:min(34px,70%);min-height:4px;border-radius:8px 8px 2px 2px;background:linear-gradient(180deg,#26a69a,#00695c)}.trend-column span{font-size:.68rem;color:#667085;margin-top:8px;white-space:nowrap}@media(max-width:700px){.dashboard-page{padding-left:12px!important;padding-right:12px!important}.dashboard-header-stack{align-items:flex-start!important;flex-direction:column!important}.dashboard-header,.kpi-card,.dashboard-card{border-radius:14px!important}.trend-chart{overflow-x:auto}.trend-column{min-width:42px}}

/* Dashboard header: light hero with a separate filter toolbar */
.dashboard-header{background:linear-gradient(135deg,#ffffff 0%,#f4fbff 55%,#eefaf6 100%)!important;color:#263746!important;border:1px solid #e2ebf0;box-shadow:0 8px 24px rgba(30,64,88,.06);position:relative;overflow:hidden}.dashboard-header:after{content:"";position:absolute;width:220px;height:220px;border-radius:50%;right:-70px;top:-125px;background:linear-gradient(135deg,rgba(38,166,154,.14),rgba(66,165,245,.10))}.dashboard-heading{color:#223647!important}.dashboard-muted{color:#617282!important}.dashboard-eyebrow{color:#168c80!important;font-weight:700!important;letter-spacing:.12em!important}.dashboard-toolbar{min-height:64px;padding:8px 2px}.period-select{width:170px;background:#fff;border-radius:10px}.dashboard-refresh{width:44px;height:44px;border:1px solid #d8e5e8!important;background:#fff!important}@media(max-width:700px){.dashboard-toolbar{justify-content:flex-start!important}.period-select{flex:1;max-width:220px}}