/* ==============================================
   Average Bills Page Styles
   Extracted from inline <style> in index.php
   ============================================== */

.ec-rate-change { font-weight: 600; font-size: 13px; }
    .ec-rate-change--up { color: var(--ec-red); }
    .ec-rate-change--down { color: #16a34a; }
    .ec-table-highlight { background: #f0fdf4 !important; font-weight: 700; }
    .ec-table-highlight td { font-weight: 700; color: #1f1f1f; }
    .ec-table-search { display: flex; align-items: center; gap: 6px; background: var(--ec-surface-alt); border: 1px solid var(--ec-border); border-radius: 8px; padding: 6px 12px; }
    .ec-table-search i { color: #9ca3af; font-size: 16px; }
    .ec-table-search input { border: none; background: transparent; outline: none; font-size: 14px; color: var(--ec-text-body); font-family: var(--body-font); width: 160px; }

    .ec-chart-figure { margin: 32px 0; }
    .ec-chart-figure figcaption { font-size: 13px; color: #6b7280; margin-top: 12px; text-align: center; }
    .ec-chart-container { background: var(--ec-surface-alt); border: 1px solid var(--ec-border); border-radius: 12px; padding: 24px 24px 16px; overflow-x: auto; }
    .ec-chart-container svg { width: 100%; height: auto; display: block; }

    .ec-breakdown-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin: 32px 0; }
    .ec-breakdown-item { background: var(--ec-surface-alt); border: 1px solid var(--ec-border); border-radius: 12px; padding: 20px 24px; }
    .ec-breakdown-item h4 { font-size: 15px; font-weight: 700; margin: 0 0 4px; padding: 0; color: #1f1f1f; }
    .ec-breakdown-item p { margin: 0; font-size: 14px; color: #6b7280; line-height: 1.6; }
    .ec-breakdown-value { font-size: 24px; font-weight: 800; color: #1f1f1f; margin-bottom: 8px; }

    /* Sortable table headers */
    .ec-table thead th.ec-sortable { cursor: pointer; user-select: none; transition: color 0.15s ease; white-space: nowrap; }
    .ec-table thead th.ec-sortable:hover { color: #047857; }
    .ec-table thead th.ec-sortable::after { content: '\2195'; margin-left: 4px; font-size: 11px; color: #c4c4c4; }
    .ec-table thead th.ec-sortable.ec-sort-asc::after { content: '\25B2'; color: #047857; }
    .ec-table thead th.ec-sortable.ec-sort-desc::after { content: '\25BC'; color: #047857; }

    /* US Map */
    .ecus-map-container { margin: 40px 0; position: relative; }
    .ecus-map-header { margin-bottom: 24px; }
    .ecus-map-title { font-size: 24px; font-weight: 700; margin: 0 0 4px; padding: 0; display: block; }
    .ecus-map-subtitle { font-size: 15px; color: #6b7280; margin: 0; }
    .ecus-map-wrapper { display: grid; grid-template-columns: 1fr 280px; gap: 32px; align-items: start; }
    .ecus-map-svg { width: 100%; }
    .ecus-map-svg svg { width: 100%; height: auto; }
    .ecus-state { stroke: #fff; stroke-width: 1; transition: opacity 0.2s ease; }
    .ecus-state:hover { opacity: 0.85; stroke-width: 2; }

    .ecus-map-legend { background: var(--ec-surface-alt); border: 1px solid var(--ec-border); border-radius: 12px; padding: 20px; }
    .ecus-legend-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #6b7280; margin: 0 0 12px; padding: 0; }
    .ecus-legend-items { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; }
    .ecus-legend-item { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 6px; cursor: pointer; transition: background 0.15s ease; }
    .ecus-legend-item:hover { background: #f3f4f6; }
    .ecus-legend-color { width: 14px; height: 14px; border-radius: 3px; flex-shrink: 0; }
    .ecus-legend-color.cat-verylow { background: #10b981; }
    .ecus-legend-color.cat-low { background: #34d399; }
    .ecus-legend-color.cat-average { background: #fbbf24; }
    .ecus-legend-color.cat-aboveavg { background: #f97316; }
    .ecus-legend-color.cat-high { background: #ef4444; }
    .ecus-legend-color.cat-veryhigh { background: #991b1b; }
    .ecus-legend-label { font-size: 13px; font-weight: 600; color: var(--ec-text-body); }
    .ecus-legend-range { font-size: 12px; color: #9ca3af; margin-left: auto; }

    .ecus-stats-box { border-top: 1px solid var(--ec-border); padding-top: 16px; }
    .ecus-stats-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #9ca3af; margin: 0 0 10px; padding: 0; }
    .ecus-stat-row { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 0; font-size: 13px; }
    .ecus-stat-row .ecus-stat-label { color: #6b7280; }
    .ecus-stat-row .ecus-stat-value { font-weight: 700; color: var(--ec-text-body); }
    .ecus-stat-row .ecus-stat-value.low { color: #16a34a; }
    .ecus-stat-row .ecus-stat-value.high { color: var(--ec-red); }

    .ecus-map-tooltip {
        position: absolute; z-index: 100; pointer-events: none;
        background: #fff; border: 1px solid var(--ec-border); border-radius: 10px;
        padding: 12px 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.12);
        opacity: 0; transition: opacity 0.15s ease;
        min-width: 200px;
    }
    .ecus-map-tooltip.ecus-visible { opacity: 1; }
    .ecus-tooltip-state { font-size: 15px; font-weight: 700; color: #1f1f1f; display: block; margin-bottom: 4px; }
    .ecus-tooltip-bill-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #9ca3af; }
    .ecus-tooltip-bill-value { font-size: 22px; font-weight: 800; color: #1f1f1f; margin: 2px 0 6px; }
    .ecus-tooltip-detail { font-size: 12px; color: #6b7280; line-height: 1.6; }
    .ecus-tooltip-comparison { font-size: 12px; color: #6b7280; }
    .ecus-tooltip-comparison .higher { color: var(--ec-red); font-weight: 600; }
    .ecus-tooltip-comparison .lower { color: #16a34a; font-weight: 600; }

    @media (max-width: 768px) {
        .ec-breakdown-grid { grid-template-columns: 1fr; }
        .ecus-map-wrapper { grid-template-columns: 1fr; }
        .ecus-map-title { font-size: 20px; }
    }
    @media (max-width: 480px) {
        .ecus-map-legend { padding: 16px; }
    }