/* AB#7419: .btn excluded — a button's label must contrast the button's OWN fill (set per-button by
   ThemedButton / .btn-primary). .table* excluded — table body rows sit on Background-derived
   surfaces (striped/alternate/hover), not the primary/card surface, so they get their own color below. */
.row, .col-5, .col-7 {
    color: var(--theme-text-color, #212529) !important;
}

/* Themed table body text sits on the Background-derived row surfaces, so contrast the background
   rather than the primary/card color (headers set their own color via ThemedTable). */
.themed-table > tbody > tr > td,
.themed-table > tbody > tr > th {
    color: var(--theme-body-text-color, #212529);
}

/* AB#7419: page-level text sits on the page BACKGROUND, so it must contrast the background
   rather than the primary/card surface that --theme-text-color is derived for. Headings and
   paragraphs inherit this from body. */
body {
    color: var(--theme-body-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;
}

/* AB#7419 review fix: a ThemedLink inside a ThemedCard sits on the Primary-colored card surface,
   not the page background. --theme-link-color is only guaranteed readable on the background, so on
   cards it can render (near-)invisible. Use a Primary-contrast link color and keep it underlined so
   the link affordance survives even when the color lands close to the card's text color. The extra
   descendant selector outranks the plain .themed-link rules above (same !important, higher specificity). */
.themed-card .themed-link,
.themed-card a.themed-link,
.themed-card .themed-link.btn.btn-link {
    color: var(--theme-link-on-card-color, #ffffff) !important;
    text-decoration: underline;
}

.themed-card .themed-link:hover,
.themed-card a.themed-link:hover,
.themed-card .themed-link.btn.btn-link:hover {
    color: var(--theme-link-on-card-color, #ffffff) !important;
    text-decoration: underline;
}

/* AB#7419 review fix: semantic status rendered as a fixed fill badge (green/red) under white text.
   A fixed fill is WCAG AA beneath white text on ANY tenant background AND stays unmistakably
   green/red — unlike adaptive semantic *text*, which on mid-tone backgrounds (e.g. the Ocean preset)
   must wash toward white to stay readable and would render "success" and "error" indistinguishably. */
.themed-status-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 0.25rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--theme-on-fill-text, #ffffff) !important;
}

.themed-status-badge--success {
    background-color: var(--theme-success-fill, #157347) !important;
}

.themed-status-badge--error {
    background-color: var(--theme-error-fill, #b02a37) !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);
    /* AB#7419: label sits on the Primary fill — contrast it instead of hardcoding white. */
    color: var(--theme-text-color, #fff);
    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;
}

/* AB#7419: typed text must be readable on the input's (light) field surface — use the input text
   color, NOT the muted placeholder color (which is only for the ::placeholder pseudo-element). */
.form-control, .form-control:focus, .themed-input, .themed-input:focus {
    color: var(--theme-input-text-color, #212529) !important;
}

.form-control::placeholder, .themed-input::placeholder {
    color: var(--theme-placeholder-text-color, #6c757d) !important;
    /* AB#7419 review fix: keep opacity at 1 so the rendered placeholder equals the contrast-validated
       color; a stale 0.7 opacity elsewhere had pushed it below AA. */
    opacity: 1 !important;
}

.btn-primary {
    background-color: var(--theme-action-button-color, #007bff);
    /* AB#7419: label contrasts the action fill, not the card/primary text color. */
    color: var(--theme-on-action-text, #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;
  /* AB#7419: themed card headers render on the Secondary surface, so their text must contrast
     Secondary (--theme-table-header-text = ContrastText(Secondary)), NOT the Primary-contrast
     TextColor that many headers set inline. This corrects e.g. the corporate preset where a light
     Primary yields dark TextColor that fails on the dark Secondary header. */
  color: var(--theme-table-header-text, #212529) !important;
}

.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;
}