/* /Pages/Authentication/Login.razor.rz.scp.css */
:root[b-24lel3bruu] {
    --login-primary: #2196F3;
    --login-primary-hover: #1976D2;
    --login-card-bg: #ffffff;
    --login-text: #212121;
    --login-text-secondary: #757575;
    --login-border: #e0e0e0;
    --login-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

[data-theme="dark"][b-24lel3bruu] {
    --login-primary: #64B5F6;
    --login-primary-hover: #42A5F5;
    --login-card-bg: #1E1E1E;
    --login-text: #ffffff;
    --login-text-secondary: #B0BEC5;
    --login-border: #424242;
    --login-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.login-container[b-24lel3bruu] {
    --login-padding: 1.5rem;
    transition: background-color 0.3s ease;
}

.login-logo[b-24lel3bruu] {
    width: 100px;
    height: 100px;
    transition: transform 0.3s ease;
}

.login-card[b-24lel3bruu] {
    width: 100%;
    max-width: 400px;
    box-shadow: none !important;
    border: none !important;
    padding: var(--login-padding);
    background: transparent !important;
    color: var(--login-text);
}

.login-title[b-24lel3bruu] {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--login-text);
}

.login-button[b-24lel3bruu] {
    width: 100%;
    background-color: var(--login-primary) !important;
    color: white !important;
    transition: all 0.2s ease;
    border: none !important;
}

.login-button:hover[b-24lel3bruu] {
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    background-color: var(--login-primary-hover) !important;
}

/* Form elements */
[b-24lel3bruu] .rz-textbox,
[b-24lel3bruu] .rz-password,
[b-24lel3bruu] .rz-checkbox .rz-chk-box {
    background-color: var(--rz-base-background-color) !important;
    border-color: var(--login-border) !important;
    color: var(--login-text) !important;
}

[b-24lel3bruu] .rz-textbox:focus,
[b-24lel3bruu] .rz-password:focus {
    border-color: var(--login-primary) !important;
    box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2) !important;
}

/* Mobile styles */
@media (max-width: 991.98px) {
    .login-container[b-24lel3bruu] {
        background-color: var(--login-primary);
        padding: 1rem;
        min-height: unset;
    }

    .login-card[b-24lel3bruu] {
        background: var(--login-card-bg) !important;
        border-radius: 8px !important;
        padding: 2rem !important;
        box-shadow: var(--login-shadow) !important;
    }
}

/* Small devices */
@media (max-width: 575.98px) {
    .login-title[b-24lel3bruu] {
        font-size: 20px;
    }

    .login-card[b-24lel3bruu] {
        padding: 1.5rem !important;
    }
    .login-container[b-24lel3bruu] {
        min-height: unset;
    }
}
/* /Pages/HomePage/Index.razor.rz.scp.css */
/* /Pages/Reservoir/Index.razor.rz.scp.css */
/* Reservoir Page Variables */
:root[b-7y94xa02qc] {
    --primary-color: #2c3e50;
    --secondary-color: #3498db;
    --background-color: #f8f9fa;
    --border-color: #dee2e6;
    --text-color: #343a40;
    --shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Base Layout */
.main-container[b-7y94xa02qc] {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 1rem;
    padding: 1rem;
}

/* Top Section */
.top-section[b-7y94xa02qc] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Bottom Section */
.bottom-section[b-7y94xa02qc] {
    min-height: 500px;
    display: flex;
    flex-direction: column;
}

/* Chart Components */
.chart-wrapper[b-7y94xa02qc] {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: white;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: var(--shadow);
}

.chart-header[b-7y94xa02qc] {
    font-weight: 500;
    padding: 0.75rem 1rem;
    background-color: var(--background-color);
    border-bottom: 1px solid var(--border-color);
}

.chart-container[b-7y94xa02qc] {
    flex: 1;
    padding: 1rem;
}

/* Grid Layout */
.reservoir-grid[b-7y94xa02qc] {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1rem;
    width: 100%;
    height: 100%;
}

/* Map Container */
.map-container[b-7y94xa02qc] {
    grid-column: span 8;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    min-height: 300px;
}

.map-content[b-7y94xa02qc] {
    flex: 1;
    padding: 0;
    min-height: 300px;
}

/* SVG Container */
.svg-container[b-7y94xa02qc] {
    background-color: #F0F0F0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

/* Column Layout */
.column-container[b-7y94xa02qc] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.column-header[b-7y94xa02qc] {
    font-weight: 500;
    padding: 0.75rem 1rem;
    background-color: var(--background-color);
    border: 1px solid var(--border-color);
    border-bottom: none;
    border-radius: 4px 4px 0 0;
}

.column-content[b-7y94xa02qc] {
    flex: 1;
    border: 1px solid var(--border-color);
    border-radius: 0 0 4px 4px;
    overflow: hidden;
}

/* Data Grid */
.data-grid-container[b-7y94xa02qc] {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.data-table[b-7y94xa02qc] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.data-table th[b-7y94xa02qc],
.data-table td[b-7y94xa02qc] {
    padding: 0.5rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.data-table th[b-7y94xa02qc] {
    background-color: #f1f5f9;
    font-weight: 600;
    color: var(--primary-color);
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

/* Utility Classes */
.equal-height-column[b-7y94xa02qc] {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.rz-legend-item[b-7y94xa02qc] {
    text-wrap: nowrap !important;
}
/* Responsive Adjustments */
@media (max-width: 1200px) {
    .map-container[b-7y94xa02qc] {
        grid-column: span 12;
        min-height: 300px;
    }
    
    .chart-container[b-7y94xa02qc] {
        min-height: 250px;
    }
}

@media (max-width: 992px) {
    .main-container[b-7y94xa02qc] {
        padding: 0.75rem;
    }
    
    .bottom-section[b-7y94xa02qc] {
        height: 50vh;
        min-height: 250px;
    }
}

@media (max-width: 768px) {
    .reservoir-grid[b-7y94xa02qc] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .map-container[b-7y94xa02qc] {
        min-height: 250px;
    }
    
    .chart-container[b-7y94xa02qc] {
        min-height: 200px;
        padding: 0.75rem;
    }
    
    .data-table th[b-7y94xa02qc],
    .data-table td[b-7y94xa02qc] {
        padding: 0.5rem;
        font-size: 0.8rem;
    }
}

@media (max-width: 576px) {
    .bottom-section[b-7y94xa02qc] {
        height: 60vh;
        min-height: 200px;
    }
    
    .chart-container[b-7y94xa02qc] {
        min-height: 150px;
        padding: 0.5rem;
    }
    
    .chart-header[b-7y94xa02qc] {
        padding: 0.5rem 0.75rem;
        font-size: 0.9rem;
    }
    
    .data-table th[b-7y94xa02qc],
    .data-table td[b-7y94xa02qc] {
        padding: 0.4rem 0.5rem;
        font-size: 0.75rem;
    }
}

/* Animations */
@keyframes fadeIn-b-7y94xa02qc {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

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

/* Empty States */
.empty-table-message[b-7y94xa02qc],
.loading[b-7y94xa02qc] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    color: #6c757d;
    font-style: italic;
    padding: 2rem;
    text-align: center;
}
body[b-7y94xa02qc] {
    font-family: Arial, sans-serif;
    text-align: center;
    margin: 20px;
}

#chartContainer[b-7y94xa02qc] {
    position: relative;
    width: 100%;
}

.chart-label[b-7y94xa02qc] {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 14px;
    font-weight: bold;
    color: black;
    background: rgba(255, 255, 255, 0.9);
    padding: 5px 10px;
    border-radius: 4px;
    white-space: nowrap;
    z-index: 100; /* Ensure it's above the chart */
    pointer-events: none; /* Allow interaction with chart below */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Add shadow for better visibility */
}

#infoLine1[b-7y94xa02qc] {
    top: 10px;
}

#infoLine2[b-7y94xa02qc] {
    top: 40px;
}

#reservoirChart[b-7y94xa02qc] {
    width: 100% !important;
    height: 800px !important;
}
/* /Pages/Users/UserManager.razor.rz.scp.css */
/* Change the background color of the entire grid */
/*.custom-grid .rz-datatable {
    background-color: lightgray;
}*/

/* Change the background color of the header */
/*::deep .custom-grid .rz-datatable-header {
    background-color: #CC686F !important;*/
    /*color: white;*/
/*}

.rz-grid-table.rz-grid-gridlines-both > thead > tr > th {
    background-color: #CC686F !important;
}*/

/* Change the background color of the rows */
/*.custom-grid .rz-datatable-data .rz-datatable-row {
    background-color: lightyellow;
}*/

    /* Optional: Different background color for alternating rows */
    /*.custom-grid .rz-datatable-data .rz-datatable-row:nth-child(even) {
        background-color: lightblue;
    }*/