body, .row, .col-5, .col-7, .btn, .table, .table th, .table td {
    color: var(--theme-text-color, #212529) !important;
}

/* Form labels should be styled inline for proper theming */
.form-label:not([style*="color"]) {
    color: var(--theme-text-color, #212529);
}

/* Page background only - not component backgrounds */
body {
    background: var(--theme-background-color, #fff);
}

/* Override Bootstrap card-body background to be transparent when using themed cards */
.themed-card .card-body {
    background: transparent !important;
}

/* CRITICAL: Force ThemedCard to use proper styling and prevent Bootstrap override */
div.card.themed-card[style*="background-color"] {
    /* This targets ThemedCard components that have inline background-color styles */
    /* Ensures they take precedence over Bootstrap defaults */
}

/* Force Bootstrap card defaults to not interfere with ThemedCard inline styles */
.card.themed-card {
    /* Remove any default Bootstrap card background */
    background-color: transparent !important;
    background-image: none !important;
    /* The inline style from ThemedCard component will set the actual background */
}

/* High specificity rule to ensure themed cards show their primary color background */
div.themed-card.card[style*="background-color"] {
    /* This ensures any ThemedCard with an inline background-color style gets maximum priority */
    background-image: none !important;
}

/* ThemedLink styling - ensure proper link color and no unwanted backgrounds */
.themed-link {
    color: var(--theme-link-color, #0d6efd) !important;
    text-decoration: none;
    background: transparent !important;
}

.themed-link:hover {
    color: var(--theme-link-color, #0d6efd) !important;
    text-decoration: underline;
    background: transparent !important;
}

/* Override Bootstrap btn-link styles when applied to ThemedLink */
.themed-link.btn.btn-link {
    color: var(--theme-link-color, #0d6efd) !important;
    background-color: transparent !important;
    border: none !important;
}

.themed-link.btn.btn-link:hover {
    color: var(--theme-link-color, #0d6efd) !important;
    background-color: transparent !important;
    text-decoration: underline;
}

/* Comprehensive transparent backgrounds for all common Bootstrap elements within themed cards */
.themed-card .row,
.themed-card .col,
.themed-card .col-1,
.themed-card .col-2,
.themed-card .col-3,
.themed-card .col-4,
.themed-card .col-5,
.themed-card .col-6,
.themed-card .col-7,
.themed-card .col-8,
.themed-card .col-9,
.themed-card .col-10,
.themed-card .col-11,
.themed-card .col-12,
.themed-card .col-sm,
.themed-card .col-md,
.themed-card .col-lg,
.themed-card .col-xl,
.themed-card .col-xxl,
.themed-card .col-sm-1,
.themed-card .col-sm-2,
.themed-card .col-sm-3,
.themed-card .col-sm-4,
.themed-card .col-sm-5,
.themed-card .col-sm-6,
.themed-card .col-sm-7,
.themed-card .col-sm-8,
.themed-card .col-sm-9,
.themed-card .col-sm-10,
.themed-card .col-sm-11,
.themed-card .col-sm-12,
.themed-card .col-md-1,
.themed-card .col-md-2,
.themed-card .col-md-3,
.themed-card .col-md-4,
.themed-card .col-md-5,
.themed-card .col-md-6,
.themed-card .col-md-7,
.themed-card .col-md-8,
.themed-card .col-md-9,
.themed-card .col-md-10,
.themed-card .col-md-11,
.themed-card .col-md-12,
.themed-card .col-lg-1,
.themed-card .col-lg-2,
.themed-card .col-lg-3,
.themed-card .col-lg-4,
.themed-card .col-lg-5,
.themed-card .col-lg-6,
.themed-card .col-lg-7,
.themed-card .col-lg-8,
.themed-card .col-lg-9,
.themed-card .col-lg-10,
.themed-card .col-lg-11,
.themed-card .col-lg-12,
.themed-card .col-xl-1,
.themed-card .col-xl-2,
.themed-card .col-xl-3,
.themed-card .col-xl-4,
.themed-card .col-xl-5,
.themed-card .col-xl-6,
.themed-card .col-xl-7,
.themed-card .col-xl-8,
.themed-card .col-xl-9,
.themed-card .col-xl-10,
.themed-card .col-xl-11,
.themed-card .col-xl-12 {
    background: transparent !important;
}

/* Component spacing system - automatic margins between components */
.component-container {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    background: transparent;
}

.component-container:last-child {
    margin-bottom: 0 !important;
}

/* Responsive component spacing - smaller on mobile */
@media (max-width: 768px) {
    .component-container {
        margin-bottom: 0 !important;
    }
}

/* Section spacing - larger gaps between major sections */
.section-container {
    margin-top: 2rem !important;
    margin-bottom: 2rem !important;
    background: transparent;
}

.section-container:last-child {
    margin-bottom: 0 !important;
}

/* Responsive section spacing */
@media (max-width: 768px) {
    .section-container {
        margin-top: 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }
}

/* Enhanced Customer Page Layout Styles */
.payment-section,
.account-details-section,
.contact-section,
.billing-section,
.usage-section,
.statements-section {
    position: relative;
}

/* Section headers with consistent styling and improved cohesiveness */
.section-heading {
    font-weight: 600;
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--theme-secondary-color, #6c757d);
    position: relative;
}

.section-heading::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 3rem;
    height: 2px;
    background: var(--theme-primary-color, #007bff);
}

/* Icon styling in section headers */
.section-heading i {
    font-size: 1.1em;
    opacity: 0.9;
    margin-right: 0.5rem;
}

/* Compact Payment Card Styling */
.compact-payment-wrapper {
    position: relative;
}

.compact-payment-wrapper .quick-pay-card {
    transform: scale(0.95);
    transform-origin: top center;
    margin-bottom: -1rem;
}

.compact-payment-wrapper .quick-pay-card .card-body {
    padding: 1rem !important;
}

.compact-payment-wrapper .quick-pay-card .balance-display {
    padding: 0.75rem !important;
    margin-bottom: 1rem !important;
}

.compact-payment-wrapper .quick-pay-card .balance-display .fs-4 {
    font-size: 1.1rem !important;
}

.compact-payment-wrapper .quick-pay-card .pay-full-btn {
    padding: 0.5rem 1rem !important;
    font-size: 0.95rem !important;
}

.compact-payment-wrapper .quick-pay-card .row.g-2 {
    gap: 0.25rem !important;
}

.compact-payment-wrapper .quick-pay-card .form-floating label {
    font-size: 0.8rem;
}

/* Enhanced component cohesiveness */
.payment-section,
.contact-section,
.billing-section,
.account-details-section,
.usage-section,
.statements-section {
    /* background: rgba(var(--theme-background-color-rgb, 255, 255, 255), 0.5);*/
    border-radius: 0.5rem;
    padding: 1.25rem;
    /* border: 1px solid rgba(var(--theme-secondary-color-rgb, 108, 117, 125), 0.2);*/
    /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.2s ease-in-out;*/
}

/*.payment-section:hover,
.contact-section:hover,
.billing-section:hover,
.account-details-section:hover,
.usage-section:hover,
.statements-section:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}*/

/* Mobile responsive adjustments for the new layout */
    @media (max-width: 991px) {
        /* Stack sidebar sections on smaller screens */
        .payment-section,
        .account-details-section {
            margin-bottom: 1rem;
        }

        .contact-section,
        .billing-section {
            margin-bottom: 1.0rem;
        }

        /* Adjust compact payment card for mobile */
        .compact-payment-wrapper .quick-pay-card {
            transform: none;
            margin-bottom: 0;
        }

            .compact-payment-wrapper .quick-pay-card .card-body {
                padding: 1.0rem !important;
            }
    }

    @media (max-width: 768px) {
        /* Remove subtle background on mobile for better performance */
        .payment-section,
        .contact-section,
        .billing-section,
        .account-details-section,
        .usage-section,
        .statements-section {
            background: transparent;
            padding: 1rem;
            border: none;
            box-shadow: none;
        }

        .section-heading {
            font-size: 1.1rem;
            margin-bottom: 0.75rem;
        }

            .section-heading::after {
                width: 2rem;
            }
    }
    /* Usage Graphs Section: limit height and enable scroll for overflow */
    .usage-section {
    max-height: 700px;
    overflow-y: auto;
    padding-right: 8px;
    /* Prevent horizontal scroll, allow vertical only */
    overscroll-behavior-y: contain;
}

@media (max-width: 991px) {
    .usage-section {
        max-height: 400px;
        padding-right: 0;
    }
}

@media (max-width: 768px) {
    .usage-section {
        max-height: 300px;
        padding-right: 0;
    }
}

/* Enhanced tab navigation */
.nav-tabs {
    border-bottom: 2px solid var(--theme-primary-color, #007bff);
    margin-bottom: 0;
}

.nav-tabs .nav-link {
    font-weight: 500;
    padding: 0.75rem 1.25rem;
    border: none;
    border-radius: 0;
    margin-right: 0.25rem;
    transition: all 0.2s ease-in-out;
}

.nav-tabs .nav-link:hover {
    border-color: transparent;
    background-color: rgba(var(--theme-primary-color-rgb, 0, 123, 255), 0.1);
}

.nav-tabs .nav-link.active {
    background-color: var(--theme-primary-color, #007bff);
    color: white;
    border-color: var(--theme-primary-color, #007bff);
    font-weight: 600;
}

/* Badge styling improvements */
.badge {
    font-size: 0.75em;
    padding: 0.4em 0.8em;
}

/* Loading state improvements */
.spinner-border-sm {
    width: 1rem;
    height: 1rem;
}

/* Enhanced account selection styling */
.account-selection-header {
    background: linear-gradient(135deg, var(--theme-background-color, #f8f9fa) 0%, rgba(var(--theme-primary-color-rgb, 0, 123, 255), 0.05) 100%);
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1rem;
}

/* Component card harmonization */
.themed-card {
    border: 1px solid rgba(var(--theme-secondary-color-rgb, 108, 117, 125), 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.2s ease-in-out;
}

.themed-card:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Only regular cards (not themed) should use background color for page-level styling */
.card:not(.themed-card) {
    background-color: var(--theme-background-color, #fff) !important;
}

.form-control, .form-control:focus, .themed-input, .themed-input:focus {
    color: var(--theme-placeholder-text-color, #212529) !important;
}

.form-control::placeholder, .themed-input::placeholder {
    color: var(--theme-placeholder-text-color, #6c757d) !important;
    opacity: 1;
}

.btn-primary {
    background-color: var(--theme-action-button-color, #007bff);
    color: var(--theme-text-color, #fff);
}

a, .editable-phone-link {
    color: var(--theme-link-color, #0d6efd);
}

.card-title {
    color: var(--theme-text-color, #212529) !important;
}

.table th {
    background: var(--theme-table-header-background-color, #e9ecef);
    color: var(--theme-table-header-text-color, #212529);
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: var(--theme-table-striped-color, #f8f9fa);
}

.table-hover > tbody > tr:hover {
    background-color: var(--theme-table-hover-color, #e2e6ea);
}

/* Standard theme color usage patterns */
.themed-heading {
    color: var(--theme-primary-color, #007bff) !important;
}

.themed-text {
    color: var(--theme-text-color, #212529) !important;
}

.themed-secondary-text {
    color: var(--theme-secondary-color, #6c757d) !important;
}

.themed-link {
    color: var(--theme-link-color, #0d6efd) !important;
}

.themed-background {
    background-color: var(--theme-background-color, #fff) !important;
}

.themed-primary-background {
    background-color: var(--theme-primary-color, #007bff) !important;
}

.themed-secondary-background {
    background-color: var(--theme-secondary-color, #6c757d) !important;
}

/* DevExpress Blazor Chart Axis Label (dates) Theming */
.dx-chart-axis text,
.dx-axis-label text,
.dx-chart-axis-label text,
.dx-chart-argument-axis .dx-axis-label text,
.dx-chart-argument-axis text,
.dx-chart-value-axis text,
.dxc-val-title,
.dxc-arg-elements text,
.dxc-val-elements text
{
    fill: var(--theme-text-color, #212529) !important;
}

/* Authentication pages standardization */
.auth-page-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.auth-logo-container {
    text-center: true;
    margin-bottom: 1.5rem;
}

.auth-card {
    width: 40%;
    max-width: 350px;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

/* Responsive adjustments for auth cards */
@media (max-width: 576px) {
    .auth-card {
        width: 60%;
        max-width: 100%;
        margin: 0 0.5rem;
    }
    
    .auth-page-container {
        padding: 0.5rem;
    }
    
    .auth-logo-container {
        margin-bottom: 1rem;
    }
}

@media (min-width: 577px) {
    .auth-page-container {
        padding: 2rem;
    }
}

/* Ensure alert backgrounds are always solid and readable */
.alert {
    background-color: #f8d7da !important; /* Default for danger, override in markup for success/info/warning */
    color: #721c24 !important;
    border-color: #f5c6cb !important;
}
.alert-success {
    background-color: #d1e7dd !important;
    color: #0f5132 !important;
    border-color: #badbcc !important;
}
.alert-info {
    background-color: #b3d4fc !important;
    color: #055160 !important;
    border-color: #9ec5fe !important;
}
.alert-warning {
    background-color: #fff3cd !important;
    color: #856404 !important;
    border-color: #ffeeba !important;
}

/* Ensure alert backgrounds are always solid and readable, even inside themed cards */
.themed-card .alert {
    background-color: #f8d7da !important;
    color: #721c24 !important;
    border-color: #f5c6cb !important;
}
.themed-card .alert-success {
    background-color: #d1e7dd !important;
    color: #0f5132 !important;
    border-color: #badbcc !important;
}
.themed-card .alert-info {
    background-color: #b3d4fc !important;
    color: #055160 !important;
    border-color: #9ec5fe !important;
}
.themed-card .alert-warning {
    background-color: #fff3cd !important;
    color: #856404 !important;
    border-color: #ffeeba !important;
}

.themed-card .card-header {
    border-top-left-radius: var(--theme-card-border-radius, 0.375rem);
    border-top-right-radius: var(--theme-card-border-radius, 0.375rem);
}

/* Normalized header/body spacing for all themed cards */
.themed-card .card-header {
  padding: .75rem 1rem;
  min-height: 48px;
}

.themed-card .card-body {
  padding: 1rem;
}

/* Responsive compaction on small screens */
@media (max-width: 768px) {
  .themed-card .card-header {
    padding: .5rem .75rem;
    min-height: 44px;
  }
  .themed-card .card-body {
    padding: .75rem;
  }
}

/* Chart wrapper fills parent height for perfect alignment */
.ws-chart-wrap {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}




@media (max-width: 576px) {
    .meter-graph-mobile-limit {
        max-height: 400px;
        overflow-y: auto;
    }
}

.themed-picklist {
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%23007bff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1.25em 1.25em;
    padding-right: 2.5em;
}

    .themed-picklist::-ms-expand {
        display: none;
    }

.account-info-header {
    margin: 1.5rem 0;
}