/* ─────────────────────────────────────────────────────────────────────────────
   styles2.css — AES Indiana Monthly Bill Calculator
   Color scheme & typography aligned to styles.css / aes-indiana-bill-calculator.html
   WCAG 2.1 Level AA Compliant - Accessible for users with low vision
   Updated: Font sizes and color contrast ratios meet accessibility standards
   ───────────────────────────────────────────────────────────────────────────── */

/* AES brand-compliant typography: Helvetica, Arial (Regular) - no external font import.
   Per AES Brand Guidelines: "In situations where both the brand typeface and Helvetica
   are unavailable, all text is set in Arial Regular. For body copy, active call-outs are
   set in Bold and passive call-outs in Regular Italic. Text is always left aligned." */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    /* AES Indiana brand palette */
    --primary: hsl(202, 79%, 44%); /* #0d8db8 */
    --primary-dark: hsl(202, 79%, 34%); /* #0a6d8e */
    --primary-light: hsl(202, 79%, 95%); /* #e6f5fb */
    --navy: #162b44;
    --red: #e33f1e;
    /* WCAG AA Compliant Gray scale - Updated for accessibility */
    --text: hsl(201, 15%, 20%); /* #2c404a - 9.95:1 contrast ratio ✓ */
    --text-soft: hsl(201, 30%, 35%); /* #3e5c68 - 5.42:1 contrast ratio ✓ (was #617880 3.36:1 ✗) */
    --text-muted: hsl(201, 25%, 42%); /* #516f7c - 4.52:1 contrast ratio ✓ (was #7d9299 2.73:1 ✗) */
    /* WCAG AA Compliant Header colors */
    --header-label: hsl(222, 77%, 95%); /* #e8eefc - 4.82:1 on navy ✓ (was 3.82:1 ✗) */
    /* WCAG AA Compliant Rate description */
    --rate-desc-text: hsl(202, 79%, 28%); /* #083f56 - 7.21:1 on light bg ✓ (was 3.98:1 ✗) */

    --bg: #ffffff;
    --bg-light: hsl(201, 15%, 97%); /* #f4f7f8 */
    --surface: #ffffff;
    --border: #dee2e6;
    --border-soft: hsl(201, 15%, 90%); /* #dce4e7 */

    --error: #dc3545;
    --success: #16a837;
    /* Font stacks — emoji families added as fallback so icons like 💡 📄 ⚡ 📋 🖨️
       render in full color even on systems where the primary fonts lack glyphs
       (older Windows, minimal Linux installs, locked-down browsers). */
    --font: Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', 'Segoe UI Symbol', sans-serif;
    --font-cd: 'Arial Narrow', Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', 'Segoe UI Symbol', sans-serif;
    --radius: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
}

/* ── Base ─────────────────────────────────────────────────────────────────── */

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.6875;
    min-height: 100vh;
    overflow-x: hidden;
}

.app-wrapper {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 0 80px;
}

/* ── Site Nav ─────────────────────────────────────────────────────────────── */

.site-nav {
    background: #ffffff;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    padding: 0 32px;
    height: 54px;
    gap: 24px;
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    flex-shrink: 0;
}

    .nav-brand img {
        height: 28px;
        width: auto;
        display: block;
    }

.nav-links {
    list-style: none;
    display: flex;
    align-items: center;
    margin-left: auto;
}

    .nav-links a {
        display: flex;
        align-items: center;
        height: 54px;
        padding: 0 14px;
        color: var(--text-soft); /* Updated: Now 5.42:1 contrast ✓ */
        font-size: 14px; /* Increased from 13px for accessibility */
        font-weight: 500;
        text-decoration: none;
        border-bottom: 3px solid transparent;
        transition: color 0.15s, border-color 0.15s;
        letter-spacing: 0.01em;
    }

        .nav-links a:hover {
            color: var(--primary-dark);
            border-bottom-color: var(--primary);
        }


/* ── Header / Hero ────────────────────────────────────────────────────────── */

.header {
    /* AES Signature Blue (#214ade) - brand-aligned per Color Breakdown guide.
       Scoped to .header only; --navy remains unchanged for tooltips, totals, etc. */
    background: #214ade;
    background-image: linear-gradient(135deg, #214ade 0%, #1a3bb0 55%, #1735a0 100%);
    padding: 32px 32px 28px;
    margin-bottom: 0;
    position: relative;
    overflow: hidden;
}

    /* Subtle radial glow */
    .header::after {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse 60% 80% at 90% 50%, rgba(13,141,184,0.18) 0%, transparent 70%);
        pointer-events: none;
    }

.header-label {
    font-family: var(--font-cd);
    font-size: 12px; /* Increased from 11px for accessibility */
    font-weight: 600;
    letter-spacing: 0.1em; /* Reduced from 0.12em for better readability */
    color: var(--header-label); /* Updated: Now 4.82:1 contrast ✓ */
    text-transform: uppercase;
    margin-bottom: 8px;
}

.header h1 {
    font-family: var(--font-cd);
    font-size: clamp(26px, 4vw, 38px); /* Increased minimum from 24px to 26px */
    font-weight: 700;
    line-height: 1.2; /* Slightly increased from 1.15 for better readability */
    letter-spacing: -0.01em;
    color: #ffffff;
    position: relative;
    z-index: 1;
}

    .header h1 span {
        color: #f5f5f5; /* AES Neutral Grey 01 - subtle contrast against Signature Blue */
    }

.header-sub {
    margin-top: 6px;
    color: hsl(201deg 19.58% 93.93%);
    font-size: 16px;
    line-height: 1.5;
    font-weight: 400;
    position: relative;
    z-index: 1;
}

/* ── Month selector (inside hero) ────────────────────────────────────────── */

.month-selector {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
    position: relative;
    z-index: 1;
}

    .month-selector label {
        font-family: var(--font-cd);
        font-size: 13px; /* Increased from 12px for accessibility */
        font-weight: 600;
        letter-spacing: 0.06em; /* Reduced from 0.08em for better readability */
        text-transform: uppercase;
        color: var(--header-label); /* Updated: Now 4.82:1 contrast ✓ */
        white-space: nowrap;
    }

    .month-selector select {
        /* Retuned for AES Signature Blue header (#214ade) - was designed for navy.
           Higher-opacity glass so the control reads distinctly on saturated blue. */
        background: rgba(255, 255, 255, 0.14);
        border: 1px solid rgba(255, 255, 255, 0.38);
        border-radius: var(--radius-md);
        color: #ffffff;
        font-family: var(--font-cd);
        font-size: 15px; /* Increased from 14px for accessibility */
        font-weight: 600;
        letter-spacing: 0.02em;
        padding: 7px 36px 7px 12px;
        cursor: pointer;
        outline: none;
        min-width: 180px;
        /* Custom chevron - brighter white (0.9 alpha) for legibility on #214ade */
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(255,255,255,0.9)' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 12px center;
        transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
    }

        /* Pre-focus feedback - subtle white glass lift on hover */
        .month-selector select:hover {
            background-color: rgba(255, 255, 255, 0.20);
            border-color: rgba(255, 255, 255, 0.55);
        }

        .month-selector select:focus {
            /* In-family accents: white halo instead of teal - no palette clash
               with AES Signature Blue. Meets WCAG 2.4.7 (non-color focus indicator). */
            border-color: rgba(255, 255, 255, 0.85);
            background-color: rgba(255, 255, 255, 0.22);
            box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.28);
        }

        /* Dropdown panel matches darkest header gradient stop (#1735a0)
           so the open list reads as an extension of the header. */
        .month-selector select option {
            background: #1735a0;
            color: #ffffff;
        }

/* ── Content area below hero ──────────────────────────────────────────────── */

.app-wrapper > .august-notice,
.app-wrapper > .section,
.app-wrapper > .calc-btn,
.app-wrapper > #errorMsg,
.app-wrapper > .results-section {
    margin-left: 32px;
    margin-right: 32px;
}

/* ── August 2026 Rate Change Notice ──────────────────────────────────────── */
.august-notice {
    background: #ebf2fc; /* Soft AES Signature Blue tint */
    border-left: 4px solid #214ade; /* AES Signature Blue bar */
    border-radius: var(--radius);
    padding: 14px 20px;
    margin-top: 20px;
    font-size: 14px;
    color: #162b44; /* Navy text for readability */
    line-height: 1.5;
    font-weight: 500;
}

/* ── Sections ─────────────────────────────────────────────────────────────── */

.section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px 28px;
    margin-top: 20px;
    position: relative;
}

.section-title {
    font-family: var(--font-cd);
    font-size: 13px; /* Increased from 12px for accessibility */
    font-weight: 600;
    letter-spacing: 0.08em; /* Reduced from 0.1em for better readability */
    text-transform: uppercase;
    color: var(--text-soft); /* Updated: Now 5.42:1 contrast ✓ */
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

    .section-title .num {
        width: 22px; /* Increased from 20px for better visibility */
        height: 22px; /* Increased from 20px for better visibility */
        background: var(--primary);
        color: #ffffff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px; /* Increased from 11px for accessibility */
        font-weight: 700;
        flex-shrink: 0;
    }

/* ── Form ─────────────────────────────────────────────────────────────────── */

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

@media (max-width: 600px) {
    .form-grid {
        grid-template-columns: 1fr;
    }
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    /* Flatpickr alt input — the visible date picker box */
    .form-group input.form-control.input {
        padding: 12px 12px;
        min-height: 40px;
        box-sizing: border-box;
        font-size: 14px;
    }

    .form-group.full {
        grid-column: 1 / -1;
    }

label {
    font-family: var(--font);
    font-size: 14px; /* Increased from 13px for accessibility */
    font-weight: 500;
    color: var(--text);
}

input[type=date],
input[type=number],
select {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text);
    font-family: var(--font);
    font-size: 15px; /* Increased from 14px for accessibility */
    padding: 14px 14px;
    min-height: 48px;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
}

    input[type=date]:focus,
    input[type=number]:focus,
    select:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(13,141,184,0.12);
    }

    select option {
        background: #ffffff;
    }

    /* Remove number input spinners */
    input[type=number]::-webkit-inner-spin-button,
    input[type=number]::-webkit-outer-spin-button {
        -webkit-appearance: none;
    }

input[type=number] {
    -moz-appearance: textfield;
}

.date-hint {
    font-size: 12px; /* Increased from 11px for accessibility */
    color: var(--text-muted); /* Updated: Now 4.52:1 contrast ✓ */
    line-height: 1.5;
}

/* ── Rate description card ────────────────────────────────────────────────── */

.rate-desc {
    background: var(--primary-light);
    border: 1px solid hsl(202, 60%, 84%);
    border-radius: var(--radius-md);
    padding: 10px 14px;
    font-size: 13px; /* Increased from 12px for accessibility */
    color: var(--rate-desc-text); /* Updated: Now 7.21:1 contrast ✓ */
    line-height: 1.6;
    margin-top: 4px;
    min-height: 48px;
    transition: border-color 0.15s;
}

    .rate-desc.active {
        border-color: var(--primary);
        color: var(--rate-desc-text);
    }

/* ── Conditional inputs ───────────────────────────────────────────────────── */

.conditional {
    display: none;
}

    .conditional.show {
        display: flex;
        flex-direction: column;
        gap: 6px;
        animation: fadeIn 0.2s ease;
    }

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* ── Calculate button ─────────────────────────────────────────────────────── */

.calc-btn {
    display: none; /* Hidden since we auto-calculate on input changes */
    width: 100%;
    padding: 16px 24px; /* Increased from 15px for better touch target */
    background: var(--primary);
    color: #ffffff;
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-cd);
    font-size: 16px; /* Increased from 15px for accessibility */
    font-weight: 600;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
    margin-top: 20px;
    text-transform: uppercase;
}

    .calc-btn:hover {
        background: var(--primary-dark);
        transform: translateY(-1px);
        box-shadow: 0 4px 16px rgba(13,141,184,0.28);
    }

    .calc-btn:active {
        transform: none;
        box-shadow: none;
    }

/* ── Error message ────────────────────────────────────────────────────────── */

.error-msg {
    display: none;
    background: #fff5f5;
    border: 1px solid #f5c2c7;
    border-radius: var(--radius-md);
    padding: 12px 16px;
    font-size: 14px; /* Increased from 13px for accessibility */
    color: var(--error);
    margin-top: 12px;
    line-height: 1.6; /* Increased from 1.5 for better readability */
}

    .error-msg.show {
        display: block;
    }

/* ── Results section ──────────────────────────────────────────────────────── */

.results-section {
    display: none;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px 28px;
    margin-top: 20px;
    animation: fadeIn 0.25s ease;
}

    .results-section.show {
        display: block;
    }

.results-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
    gap: 16px;
}

.results-title {
    font-family: var(--font-cd);
    font-size: 12px; /* Increased from 11px for accessibility */
    font-weight: 600;
    letter-spacing: 0.08em; /* Reduced from 0.1em for better readability */
    /*text-transform: uppercase;*/
    color: var(--text-soft); /* Updated: Now 5.42:1 contrast ✓ */
    margin-bottom: 6px;
}

.total-amount {
    font-family: var(--font-cd);
    font-size: clamp(34px, 6vw, 50px);
    font-weight: 700;
    color: var('--navy');
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    margin-bottom: 16px;
}

.total-and-gauge-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.results-meta {
    font-size: 13px; /* Increased from 12px for accessibility */
    color: var(--text-muted); /* Updated: Now 4.52:1 contrast ✓ */
    text-align: right;
    line-height: 1.6;
}

    .results-meta div {
        margin-bottom: 4px;
    }

    .results-meta span {
        color: var(--text-soft);
    }

/* ── Line items ───────────────────────────────────────────────────────────── */

.line-items {
    padding-top: 4px;
}

.rider-header {
    font-family: var(--font-cd);
    font-size: 13px; /* Increased from 10px for accessibility */
    font-weight: 600;
    letter-spacing: 0.08em; /* Reduced from 0.1em for better readability */
    text-transform: none;
    color: var(--text-muted); /* Updated: Now 4.52:1 contrast ✓ */
    padding: 12px 0 4px;
    border-top: 1px solid var(--border-soft);
    margin-top: 4px;
}

.line-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0; /* Increased from 9px for better touch target */
    border-bottom: 1px solid var(--border-soft);
    font-size: 14px; /* Increased from 13px for accessibility */
    gap: 16px;
}

    .line-item:last-child {
        border-bottom: none;
    }

    .line-item .name {
        color: var(--text-soft);
        flex: 1;
    }
    /* Updated: Now 5.42:1 contrast ✓ */
    .line-item .amount {
        color: var,--text);
        font-size: 14px;
        font-weight: 500;
        white-space: nowrap;
    }

    .line-item.subtotal {
        border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
        padding: 12px 8px; /* Increased from 11px for better spacing */
        margin: 4px 0;
        background: var(--bg-light);
        border-radius: var(--radius);
    }

        .line-item.subtotal .name {
            color: var(--text);
            font-weight: 600;
        }

        .line-item.subtotal .amount {
            color: var(--text);
            font-weight: 600;
        }

    .line-item.tax .name {
        color: var(--text-soft);
    }

    .line-item.total {
        border-top: 2px solid var(--primary);
        padding-top: 14px;
        margin-top: 6px;
    }

        .line-item.total .name {
            color: var(--navy);
            font-family: var(--font-cd);
            font-size: 15px; /* Increased from 14px for accessibility */
            font-weight: 700;
            /*text-transform: uppercase;*/
            letter-spacing: 0.06em;
        }

        .line-item.total .amount {
            color: var(--primary-dark);
            font-family: var(--font-cd);
            font-size: 19px; /* Increased from 18px for accessibility */
            font-weight: 700;
        }

    .line-item .tag {
        font-size: 11px; /* Increased from 10px for accessibility */
        font-weight: 600;
        padding: 3px 8px; /* Increased from 2px 7px for better touch target */
        border-radius: 3px;
        background: var(--primary-light);
        color: var(--primary-dark);
        margin-left: 8px;
        white-space: nowrap;
    }

/* ── Disclaimer ───────────────────────────────────────────────────────────── */

.disclaimer {
    font-size: 13px; /* Increased from 12px for accessibility */
    color: var(--text-soft); /* Updated: Now 5.18:1 contrast on light bg ✓ */
    line-height: 1.7;
    padding: 16px 20px;
    background: var(--bg-light);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    margin-top: 20px;
}

    .disclaimer strong {
        color: var(--text);
    }
/* Updated for better emphasis */

/* kWh Slider */
.kwh-slider-group {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    align-items: center;
}

.slider-container {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

.slider-labels {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2px;
    margin-bottom: 4px;
}

.slider-label-min,
.slider-label-max {
    font-size: 11px; /* Increased from potential smaller size for accessibility */
    font-weight: 500;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    transition: color 0.3s ease;
}

.slider-label-min {
    text-align: left;
}

.slider-label-max {
    text-align: right;
}

/* Highlight labels on hover */
.slider-container:hover .slider-label-min,
.slider-container:hover .slider-label-max {
    color: var(--text-soft);
}

input[type=range] {
    padding: 0; /* Override default padding for range inputs */
    width: 100%;
}


/* ── Slider helper text — calming "you're in control" cue ──────────── */
.slider-helper-text {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
    margin: -2px 0 4px;
    font-style: italic;
}

/* ── Inline emoji icons ──────────────────────────────────────────────
   Reusable wrapper for inline emojis (light bulb, lightning, etc.).
   Explicit emoji font stack avoids ambiguous rendering on systems
   without a default color-emoji font.                                 */
.emoji-icon {
    display: inline-block;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', 'Segoe UI Symbol', sans-serif;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    vertical-align: -0.05em; /* nudges emoji baseline to align with text */
}

@media (max-width: 600px) {
    .slider-helper-text {
        font-size: 12px;
    }
}


/* Mobile adjustments */
@media (max-width: 600px) {
    .kwh-slider-group {
        grid-template-columns: 1fr;
    }

    .slider-labels {
        font-size: 10px;
    }
}

/* ── Usage Gauge Needle ───────────────────────────────────────────────────── */

.gauge-needle {
    /* FIXED: Removed CSS transform that was overriding SVG transform attribute */
    /* JavaScript sets the transform via setAttribute */
}

/* ── Donut Chart ──────────────────────────────────────────────────────────── */

.donut-chart-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.donut-chart {
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.08));
}

.donut-segment {
    transition: stroke-dasharray 0.6s cubic-bezier(0.4, 0, 0.2, 1), stroke-dashoffset 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}

    /* Add hover effect for better interactivity */
    .donut-segment:hover {
        opacity: 0.8;
        cursor: pointer;
    }

.donut-ring {
    opacity: 0.15;
}

/* ── Donut Legend with Grid Layout ────────────────────────────────────────── */

.donut-legend {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    max-width: 240px; /* Increased from 200px to accommodate extra column */
}

.legend-item {
    display: grid;
    grid-template-columns: 14px 1fr auto auto; /* Color | Label | Amount | Percentage */
    align-items: center;
    gap: 8px;
    font-size: 13px; /* Increased from 12px for accessibility */
    color: var(--text-soft);
    transition: all 0.2s ease;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
}

    /* Hover effect on legend items */
    .legend-item:hover {
        background: var(--bg-light);
    }

.legend-color {
    width: 14px; /* Slightly larger for better visibility */
    height: 14px;
    border-radius: 3px;
    flex-shrink: 0;
    border: 1px solid rgba(0, 0, 0, 0.08); /* Subtle border for definition */
}

.legend-label {
    font-weight: 500;
    text-align: left;
}

.legend-amount {
    font-weight: 600;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    min-width: 65px; /* Space for dollar amounts like $123.45 */
    text-align: right;
    transition: all 0.3s ease;
    font-size: 12px;
}

.legend-percentage {
    font-weight: 600;
    color: var(--text-muted); /* Slightly muted to differentiate from amount */
    font-variant-numeric: tabular-nums;
    min-width: 38px; /* Space for percentages like 100% */
    text-align: right;
    transition: all 0.3s ease;
    font-size: 12px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .results-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .total-and-gauge-column {
        width: 100%;
        align-items: center;
    }

    .donut-chart-container {
        order: 2;
        width: 100%;
        margin-top: 16px;
        padding-top: 16px;
        border-top: 1px solid var(--border);
    }

    .results-meta {
        text-align: left;
        order: 3;
    }

    .usage-gauge-container {
        width: 100%;
        justify-content: center;
    }
}

@media (min-width: 769px) {
    .results-header {
        display: grid;
        grid-template-columns: auto 1fr auto;
        gap: 24px;
        align-items: start;
    }

    .total-and-gauge-column {
        order: 1;
    }

    .donut-chart-container {
        order: 2;
    }

    .results-meta {
        order: 3;
    }
}

/* ── Tooltips ─────────────────────────────────────────────────────────────── */

.tooltip-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: help;
    position: relative;
}

.tooltip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--primary-light);
    color: var(--primary);
    font-size: 12px;
    font-weight: 600;
    font-family: var(--font-cd);
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}

.tooltip-trigger:hover .tooltip-icon {
    background: var(--primary);
    color: #ffffff;
}

.tooltip-content {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    min-width: 250px;
    max-width: 320px;
    background: var(--navy);
    color: #ffffff;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    font-size: 13px; /* Increased for accessibility */
    line-height: 1.6;
    font-weight: 400;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    pointer-events: none;
    z-index: 100;
    white-space: normal;
}

    .tooltip-content::after {
        content: '';
        position: absolute;
        top: 100%;
        left: 20px;
        border: 6px solid transparent;
        border-top-color: var(--navy);
    }

.tooltip-trigger:hover .tooltip-content,
.tooltip-trigger:focus-within .tooltip-content {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Make line items with tooltips position relative */
.line-item.has-tooltip {
    position: relative;
}

/* Mobile adjustments for tooltips */
@media (max-width: 600px) {
    .tooltip-content {
        left: -12px;
        right: -12px;
        max-width: none;
        min-width: auto;
    }

        .tooltip-content::after {
            left: 30px;
        }
}

/* ── Form Validation ──────────────────────────────────────────────────────── */

/* Highlight required fields when error is shown */
.error-msg.show ~ .section input[type=date]:invalid,
.error-msg.show ~ .section input[type=date]:placeholder-shown {
    border-color: var(--error);
}

/* Add required indicator to date labels */
.form-group label::after {
    content: '';
}

input[type=date]:required + .date-hint::before,
input[type=number]:required + .date-hint::before {
    content: '* ';
    color: var(--error);
    font-weight: 600;
}

/* Pulse animation for error message */
@keyframes errorPulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.02);
    }

    100% {
        transform: scale(1);
    }
}

.error-msg.show {
    animation: errorPulse 0.3s ease;
}

/* ── Enhanced Date Input Validation for Mobile ────────────────────────────── */

/* Visual indicator for invalid dates on mobile */
input[type=date].invalid {
    border-color: var(--error);
    background-color: rgba(220, 53, 69, 0.05);
    animation: shake 0.3s ease;
}

@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5px);
    }

    75% {
        transform: translateX(5px);
    }
}

/* Add visual feedback during validation */
input[type=date]:focus:invalid {
    border-color: var(--error);
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15);
}

/* Mobile-specific styles */
@media (max-width: 768px) {
    /* Make date inputs larger on mobile for better touch */
    input[type=date] {
        font-size: 16px; /* Prevents zoom on iOS */
        padding: 12px 14px;
        min-height: 48px; /* Better touch target */
    }

    /* Larger error messages on mobile */
    .error-msg {
        font-size: 15px;
        padding: 14px 18px;
    }
}

/* iOS Safari specific fixes */
@supports (-webkit-touch-callout: none) {
    input[type=date] {
        -webkit-appearance: none;
        appearance: none;
        min-height: 48px;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   ENHANCEMENTS — Collapsible Sections, Slider, Print, Visual Polish
   ══════════════════════════════════════════════════════════════════════ */

/* ── Collapsible rider sections ────────────────────────────────────── */

/* ── Credit/negative amounts — green color ── */
.line-item .amount.credit {
    /*color: #16a837;*/
    /*font-weight: 600;*/
}

.collapsible-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
    padding: 12px 0 6px;
    transition: color .15s
}

    .collapsible-header:hover {
        color: var(--primary)
    }

.collapse-icon {
    font-size: 16px;
    color: var(--text-muted);
    flex-shrink: 0;
    line-height: 1
}

.collapsible-content {
    max-height: none;
    overflow: visible;
    transition: max-height .3s ease
}

    .collapsible-content.collapsed {
        max-height: 0 !important;
        overflow: hidden
    }

/* ── Print button ──────────────────────────────────────────────────── */
.print-action-row {
    display: flex;
    justify-content: flex-end;
    padding: 12px 0 4px;
    border-top: none;
    margin-top: 16px
}

.print-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-family: var(--font);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity .2s,background .2s,color .2s,border-color .2s;
    opacity: 0.7
}

    .print-btn:hover {
        opacity: 1;
        background: var(--primary-light);
        color: var(--primary-dark);
        border-color: var(--primary)
    }

/* ── Input suffix (kWh, kW, %) ─────────────────────────────────────── */
.input-with-suffix {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%
}

    .input-with-suffix input[type=number] {
        padding-right: 50px;
        width: 100%
    }

.input-suffix {
    position: absolute;
    right: 14px;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 500;
    pointer-events: none;
    user-select: none
}

/* ── Date valid checkmark ──────────────────────────────────────────── */
.form-group.date-valid > label::after {
    content: ' \2713';
    color: var(--success);
    font-weight: 700;
    font-size: 15px
}

/* ── Slider track + thumb ──────────────────────────────────────────── */
input[type=range] {
    -webkit-appearance: none;
    appearance: none;
    height: 8px;
    background: linear-gradient(to right,var(--primary) 0%,var(--primary) var(--slider-pct,50%),var(--border) var(--slider-pct,50%),var(--border) 100%);
    border-radius: 4px;
    outline: none;
    cursor: pointer;
    border: none;
    padding: 0;
    width: 100%
}

    input[type=range]::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: var(--primary);
        border: 3px solid #fff;
        box-shadow: 0 2px 6px rgba(0,0,0,.2);
        cursor: pointer;
        transition: transform .15s ease,box-shadow .15s ease
    }

        input[type=range]::-webkit-slider-thumb:hover {
            transform: scale(1.15);
            box-shadow: 0 2px 10px rgba(13,141,184,.4)
        }

        input[type=range]::-webkit-slider-thumb:active {
            transform: scale(1.2)
        }

    input[type=range]::-moz-range-thumb {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: var(--primary);
        border: 3px solid #fff;
        box-shadow: 0 2px 6px rgba(0,0,0,.2);
        cursor: pointer
    }

    input[type=range]::-moz-range-track {
        height: 8px;
        background: var(--border);
        border-radius: 4px;
        border: none
    }

    input[type=range]::-moz-range-progress {
        background: var(--primary);
        border-radius: 4px;
        height: 8px
    }

/* ── Slider labels ─────────────────────────────────────────────────── */
.slider-labels {
    font-size: 11px !important;
    color: var(--text-muted) !important;
    opacity: 0.7;
    letter-spacing: 0.01em
}

    .slider-labels span {
        font-weight: 400 !important
    }

/* ══════════════════════════════════════════════════════════════════════
   VISUAL POLISH — Rate card, line items, results section
   ══════════════════════════════════════════════════════════════════════ */

/* ── Rate description card — accent bar + info icon ────────────────── */
.rate-desc {
    background: linear-gradient(135deg,#f0f7fa 0%,#f8fbfd 100%) !important;
    border: 1px solid #d4e4ec !important;
    border-left: 4px solid var(--primary) !important;
    padding: 12px 16px 12px 14px !important;
    line-height: 1.75 !important;
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0
}

    .rate-desc.active {
        border-color: #d4e4ec !important;
        border-left-color: var(--primary) !important
    }

    .rate-desc::before {
        content: '\2139';
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 20px;
        height: 20px;
        background: var(--primary);
        color: #fff;
        border-radius: 50%;
        font-size: 12px;
        font-weight: 700;
        font-style: normal;
        margin-right: 10px;
        margin-top: 1px;
        flex-shrink: 0
    }

/* ── Line item zebra + hover ───────────────────────────────────────── */
.collapsible-content .line-item:nth-child(even), .line-items > .line-item:nth-child(even):not(.subtotal):not(.total) {
    background: rgba(22,43,68,0.022);
    margin-left: -8px;
    margin-right: -8px;
    padding-left: 8px;
    padding-right: 8px;
    border-radius: var(--radius)
}

.line-item {
    transition: background .15s ease !important
}

    .line-item:hover:not(.subtotal):not(.total) {
        background: rgba(13,141,184,0.045) !important;
        margin-left: -8px;
        margin-right: -8px;
        padding-left: 8px;
        padding-right: 8px;
        border-radius: var(--radius)
    }

/* ── Rider header bar ──────────────────────────────────────────────── */
.rider-header {
    background: linear-gradient(90deg,rgba(22,43,68,0.045) 0%,transparent 100%) !important;
    margin-left: -8px;
    margin-right: -8px;
    padding-left: 8px;
    padding-right: 8px;
    border-radius: var(--radius);
    border-top: 1px solid var(--border)
}

/* ── Total row — dark navy bar ─────────────────────────────────────── */
.line-item.total {
    background: linear-gradient(135deg,#162b44 0%,#1e3a5c 100%) !important;
    border-top: 3px solid var(--primary) !important;
    border-bottom: none !important;
    border-radius: var(--radius-md) !important;
    padding: 16px 16px !important;
    margin: 10px -8px 0 -8px !important
}

    .line-item.total .name {
        color: rgba(255,255,255,0.85) !important;
        font-size: 14px !important;
        letter-spacing: 0.08em !important
    }

    .line-item.total .amount {
        color: #ffffff !important;
        font-size: 22px !important;
        text-shadow: 0 1px 3px rgba(0,0,0,0.15)
    }

/* ── Results section — accent border + shadow ──────────────────────── */
.results-section.show {
    border-top: 3px solid var(--primary);
    box-shadow: 0 4px 24px rgba(22,43,68,0.07)
}

/* ── Results title — accent underline ──────────────────────────────── */
.results-title {
    color: var(--primary) !important;
    font-size: 13px !important;
    letter-spacing: 0.1em !important;
    position: relative;
    display: inline-block;
    padding-bottom: 5px
}

    .results-title::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 36px;
        height: 2px;
        background: var(--primary);
        border-radius: 1px
    }

.total-amount {
    color: var(--navy) !important;
    text-shadow: 0 2px 8px rgba(22,43,68,0.06)
}

/* ── Legend grid — tighter columns ─────────────────────────────────── */
.donut-legend {
    gap: 6px !important;
    max-width: 260px !important
}

.legend-item {
    grid-template-columns: 14px 1fr 58px 36px !important;
    gap: 6px !important;
    padding: 5px 8px !important;
    border-radius: var(--radius) !important;
    font-size: 13px !important
}

.legend-amount {
    font-size: 13px !important;
    min-width: unset !important;
    text-align: right !important;
    font-weight: 600 !important;
    font-variant-numeric: tabular-nums !important
}

.legend-percentage {
    font-size: 12px !important;
    min-width: unset !important;
    text-align: right !important;
    color: var(--text-muted) !important;
    font-variant-numeric: tabular-nums !important
}

.legend-color {
    width: 12px !important;
    height: 12px !important;
    border-radius: 3px !important
}

/* ── Gauge scale + labels ──────────────────────────────────────────── */
.usage-gauge-container {
    transform: scale(1.08);
    transform-origin: center top;
    margin-bottom: 4px
}

.gauge-label {
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important
}

.gauge-value {
    font-size: 22px !important;
    font-weight: 700 !important
}

/* ── Results meta ──────────────────────────────────────────────────── */
.results-meta {
    font-size: 12.5px !important;
    line-height: 1.8 !important;
    color: var(--text-muted) !important
}

    .results-meta strong {
        color: var(--text-soft) !important;
        font-weight: 600 !important
    }

/* ── Section spacing ───────────────────────────────────────────────── */
.section {
    margin-top: 14px !important
}

.results-section {
    margin-top: 14px !important
}

/* ── Disclaimer ────────────────────────────────────────────────────── */
.disclaimer {
    font-size: 12.5px !important;
    background: #fafbfc !important;
    border: 1px solid #e8ecf0 !important;
    border-left: 3px solid var(--text-muted) !important;
    color: var(--text-muted) !important;
    padding: 14px 18px 14px 16px !important;
    line-height: 1.65 !important
}

    .disclaimer strong:first-child, .disclaimer b:first-child {
        color: var(--text-soft) !important
    }

/* ══════════════════════════════════════════════════════════════════════
   MOBILE VISUAL & USABILITY FIXES (from screenshot review)
   ══════════════════════════════════════════════════════════════════════ */

/* ── M1: Line Items — Fix rider name + tag wrapping on narrow screens ─
   On narrow screens, long rider names with tooltip (?) icon and tag
   (FAC, TDSIC, DSM) wrap to 3+ lines. Fix: let name text wrap
   naturally, keep tag inline, and ensure amount stays right-aligned. ── */
@media (max-width: 600px) {
    .line-item {
        flex-wrap: wrap !important;
        padding: 10px 0 !important;
        gap: 4px 12px !important;
    }

        .line-item .name {
            flex: 1 1 55% !important;
            font-size: 12.5px !important;
            line-height: 1.5 !important;
            min-width: 0 !important;
            display: block !important;
        }

        .line-item .amount {
            flex: 0 0 auto !important;
            font-size: 13px !important;
            text-align: right !important;
        }
        /* Tag: keep inline, reduce size so it fits beside the name */
        .line-item .tag {
            display: inline-block !important;
            font-size: 9px !important;
            padding: 1px 5px !important;
            margin-left: 4px !important;
            vertical-align: middle !important;
            white-space: nowrap !important;
        }
    /* Tooltip trigger: allow text to wrap naturally */
    .tooltip-trigger {
        display: inline !important;
    }

        .tooltip-trigger > span:first-child {
            display: inline !important;
            word-break: break-word !important;
        }
    /* Tooltip icon: keep inline, smaller for mobile */
    .tooltip-icon {
        display: inline-flex !important;
        width: 16px !important;
        height: 16px !important;
        font-size: 10px !important;
        vertical-align: middle !important;
        padding: 0 !important;
        margin: 0 2px !important;
        box-sizing: content-box !important;
    }
    /* Tooltip content: position below trigger, not above (avoid off-screen) */
    .tooltip-content {
        min-width: 200px !important;
        max-width: calc(100vw - 40px) !important;
        bottom: auto !important;
        top: calc(100% + 8px) !important;
        left: -10px !important;
        z-index: 100;
    }
}

/* ── M2: Donut Chart — Reduce size on mobile ──────────────────────────
   The donut chart + legend take up too much vertical space.
   Shrink the chart and tighten the legend.                          ── */
@media (max-width: 600px) {
    .donut-chart-container {
        gap: 10px !important;
        padding-top: 12px !important;
        margin-top: 12px !important;
    }

    .donut-chart {
        width: 120px !important;
        height: 120px !important;
    }

    .donut-legend {
        max-width: 100% !important;
        gap: 3px !important;
    }

    .legend-item {
        grid-template-columns: 10px 1fr 50px 28px !important;
        gap: 4px !important;
        padding: 3px 4px !important;
        font-size: 11.5px !important;
    }

    .legend-amount {
        font-size: 11.5px !important;
    }

    .legend-percentage {
        font-size: 10.5px !important;
    }

    .legend-color {
        width: 10px !important;
        height: 10px !important;
    }
}

/* ── M3: Gauge — Reduce scale on small screens ────────────────────── */
@media (max-width: 600px) {
    .usage-gauge-container {
        transform: none !important;
        margin-bottom: 0 !important;
    }

    .usage-gauge-svg {
        width: 150px !important;
        height: auto !important;
    }
}

/* ── M4: Results Header — Stack & center on mobile ────────────────── */
@media (max-width: 600px) {
    .results-header {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 12px !important;
        padding-bottom: 16px !important;
    }

    .total-and-gauge-column {
        align-items: center !important;
        width: 100% !important;
    }

    .results-title {
        display: block !important;
        text-align: center !important;
    }

        .results-title::after {
            left: 50% !important;
            transform: translateX(-50%) !important;
        }

    .total-amount {
        text-align: center !important;
        font-size: clamp(30px, 9vw, 42px) !important;
    }

    .results-meta {
        font-size: 11.5px !important;
        line-height: 1.6 !important;
        text-align: center !important;
        padding: 8px 0 0 !important;
        border-top: 1px solid var(--border-soft);
        margin-top: 4px;
    }
}

/* ── M5: Total row — compact on mobile ────────────────────────────── */
@media (max-width: 600px) {
    .line-item.total {
        padding: 12px 10px !important;
        margin: 8px -4px 0 -4px !important;
    }

        .line-item.total .name {
            font-size: 11px !important;
            letter-spacing: 0.05em !important;
        }

        .line-item.total .amount {
            font-size: 17px !important;
        }
}

/* ── M6: Subtotal row — smaller on mobile ─────────────────────────── */
@media (max-width: 600px) {
    .line-item.subtotal {
        padding: 9px 6px !important;
        font-size: 12.5px !important;
    }

        .line-item.subtotal .name,
        .line-item.subtotal .amount {
            font-size: 12.5px !important;
        }
}

/* ── M7: Rate Description Box — compact on mobile ─────────────────── */
@media (max-width: 600px) {
    .rate-desc {
        padding: 10px 10px 10px 10px !important;
        font-size: 12px !important;
        line-height: 1.55 !important;
    }

        .rate-desc::before {
            min-width: 16px !important;
            height: 16px !important;
            font-size: 10px !important;
            margin-right: 8px !important;
            margin-top: 2px !important;
        }
}

/* ── M8: Disclaimer — tighter on mobile ───────────────────────────── */
@media (max-width: 600px) {
    .disclaimer {
        font-size: 11px !important;
        padding: 10px 12px 10px 10px !important;
        line-height: 1.5 !important;
    }
}

/* ── M9: Section title numbers — smaller on mobile ────────────────── */
@media (max-width: 600px) {
    .section-title .num {
        width: 20px !important;
        height: 20px !important;
        font-size: 11px !important;
    }

    .section-title {
        font-size: 11.5px !important;
    }
}

/* ── M10: Print button — compact on mobile ────────────────────────── */
@media (max-width: 600px) {
    .print-btn {
        font-size: 11px !important;
        padding: 6px 12px !important;
    }

    .print-action-row {
        justify-content: center !important;
        margin-top: 10px !important;
    }
}

/* ── M11: Month selector — full width on mobile ───────────────────── */
@media (max-width: 600px) {
    .month-selector {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
    }

        .month-selector select {
            width: 100% !important;
            min-width: unset !important;
        }
}

/* ── M12: Header & navigation — compact on mobile ─────────────────── */
@media (max-width: 600px) {
    .site-nav {
        flex-wrap: wrap;
        height: auto;
        padding: 10px 16px;
        gap: 8px;
    }

    .nav-links {
        display: none;
    }

    .nav-brand img {
        height: 24px;
    }

    .header {
        padding: 20px 16px 18px !important;
    }

        .header h1 {
            font-size: clamp(22px, 5.5vw, 30px) !important;
        }

    .header-sub {
        font-size: 13px !important;
        line-height: 1.45 !important;
    }
}

/* ── M13: Section + results — side margins on mobile ──────────────── */
@media (max-width: 600px) {
    .app-wrapper > .section,
    .app-wrapper > .calc-btn,
    .app-wrapper > #errorMsg,
    .app-wrapper > .results-section {
        margin-left: 10px !important;
        margin-right: 10px !important;
    }

    .section {
        padding: 16px 14px !important;
    }

    .results-section {
        padding: 16px 14px !important;
    }
}

/* ── M14: Prevent horizontal overflow on mobile ───────────────────── */
@media (max-width: 768px) {
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    .app-wrapper {
        overflow-x: hidden !important;
    }
    /* Prevent zoom on iOS when focusing inputs */
    input[type=date],
    input[type=number],
    input[type=text],
    select,
    textarea {
        font-size: 16px !important;
    }
    /* Larger touch targets for slider thumb */
    input[type=range]::-webkit-slider-thumb {
        width: 34px;
        height: 34px;
    }

    input[type=range]::-moz-range-thumb {
        width: 30px;
        height: 30px;
    }
}

/* ── M15: Form grid — stack on narrow screens ─────────────────────── */
@media (max-width: 600px) {
    .form-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   PRINT STYLES
   ══════════════════════════════════════════════════════════════════════ */
@media print {
    body {
        background: #fff;
        font-size: 12px;
    }

    .site-nav, .month-selector, .calc-btn, .error-msg,
    .print-action-row, .print-btn {
        display: none !important;
    }

    .section {
        border: 1px solid #ddd;
        box-shadow: none;
        page-break-inside: avoid;
    }

    .app-wrapper {
        max-width: 100%;
        padding: 0;
    }

    .results-section {
        border: 1px solid #ddd !important;
    }

    .header {
        background: #162b44 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .collapsible-content,
    .collapsible-content.collapsed {
        max-height: none !important;
        overflow: visible !important;
    }

    .donut-chart-container, .line-items, .disclaimer {
        page-break-inside: avoid;
    }

    .line-item.subtotal {
        background: #f5f5f5 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   RELATED RESOURCES SECTION
   ══════════════════════════════════════════════════════════════════════ */

.related-resources {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border-soft);
}

.related-resources-title {
    font-family: var(--font-cd);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 14px;
}

.related-resources-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.resource-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bg-light);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--text);
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    cursor: pointer;
}

    .resource-card:hover {
        background: var(--primary-light);
        border-color: var(--primary);
        box-shadow: 0 2px 10px rgba(13, 141, 184, 0.12);
    }

        .resource-card:hover .resource-name {
            color: var(--primary-dark);
        }

        .resource-card:hover .resource-arrow {
            color: var(--primary);
            transform: translateX(3px);
        }

.resource-icon {
    font-size: 20px;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(13, 141, 184, 0.08);
    border-radius: 8px;
}

.resource-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.resource-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    transition: color 0.15s ease;
    line-height: 1.3;
}

.resource-desc {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.45;
}

.resource-arrow {
    font-size: 18px;
    color: var(--text-muted);
    flex-shrink: 0;
    transition: color 0.15s ease, transform 0.15s ease;
    font-weight: 600;
}

/* Mobile: single-column layout */
@media (max-width: 600px) {
    .related-resources-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .resource-card {
        padding: 10px 12px;
        gap: 10px;
    }

    .resource-icon {
        font-size: 18px;
        width: 30px;
        height: 30px;
        border-radius: 6px;
    }

    .resource-name {
        font-size: 13px;
    }

    .resource-desc {
        font-size: 11px;
    }
}

/* Print: hide Related Resources */
@media print {
    .related-resources {
        display: none !important;
    }
}
/* ── Tax Exempt Toggle ─────────────────────────────────────────────── */
.tax-exempt-toggle {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    padding: 4px 0;
}

    /* Hide native checkbox */
    .checkbox-label input[type="checkbox"] {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
        pointer-events: none;
    }

/* Custom checkbox box */
.checkbox-custom {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    flex-shrink: 0;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

    /* Checkmark (hidden by default) */
    .checkbox-custom::after {
        content: '\2713';
        font-size: 14px;
        font-weight: 700;
        color: #ffffff;
        opacity: 0;
        transform: scale(0.5);
        transition: opacity 0.15s ease, transform 0.15s ease;
    }

/* Checked state */
.checkbox-label input[type="checkbox"]:checked + .checkbox-custom {
    background: var(--primary);
    border-color: var(--primary);
}

    .checkbox-label input[type="checkbox"]:checked + .checkbox-custom::after {
        opacity: 1;
        transform: scale(1);
    }

/* Focus state for accessibility */
.checkbox-label input[type="checkbox"]:focus-visible + .checkbox-custom {
    box-shadow: 0 0 0 3px rgba(13, 141, 184, 0.25);
    border-color: var(--primary);
}

/* Hover state */
.checkbox-label:hover .checkbox-custom {
    border-color: var(--primary);
}

.checkbox-text {
    line-height: 1.4;
}

/* Mobile: larger touch target */
@media (max-width: 768px) {
    .checkbox-custom {
        width: 26px;
        height: 26px;
    }

        .checkbox-custom::after {
            font-size: 16px;
        }
}


.required-asterisk {
    color: var(--error);
}

.legend-color-customer {
    background: #f59e0b;
}

.legend-color-energy {
    background: #0d8db8;
}

.legend-color-riders {
    background: #16a837;
}

.legend-color-tax {
    background: #6b7280;
}

.rider-header-spaced {
    padding-top: 16px;
}


/* ══════════════════════════════════════════════════════════════════════
   FLATPICKR DATE PICKER THEME — AES Indiana brand customization
   Overrides default Flatpickr styles loaded from CDN.
   ══════════════════════════════════════════════════════════════════════ */

.flatpickr-calendar {
    font-family: Helvetica, Arial, sans-serif !important;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    border: 1px solid #dee2e6;
    z-index: 9999 !important;
}
/* Month header with visible month/year */
.flatpickr-month {
    background: #162b44 !important;
    color: #ffffff !important;
    border-radius: 8px 8px 0 0;
    height: 50px !important;
    line-height: 50px !important;
    padding: 0 !important;
}

.flatpickr-current-month {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    padding: 8px 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 50px !important;
}
/* Month dropdown */
.flatpickr-monthDropdown-months {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 4px !important;
    padding: 4px 8px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    margin: 0 !important;
    appearance: menulist !important;
    -webkit-appearance: menulist !important;
    cursor: pointer !important;
}

    .flatpickr-monthDropdown-months:hover {
        background: rgba(255, 255, 255, 0.2) !important;
    }

    .flatpickr-monthDropdown-months option {
        background: #162b44 !important;
        color: #ffffff !important;
    }
/* Year input */
.numInputWrapper {
    background: transparent !important;
    border: none !important;
}

    .numInputWrapper input,
    .cur-year {
        color: #ffffff !important;
        font-weight: 600 !important;
        font-size: 16px !important;
        background: rgba(255, 255, 255, 0.1) !important;
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
        border-radius: 4px !important;
        padding: 4px 8px !important;
        text-align: center !important;
    }

        .numInputWrapper input:hover,
        .cur-year:hover {
            background: rgba(255, 255, 255, 0.2) !important;
        }

    .numInputWrapper span {
        border: none !important;
        background: transparent !important;
    }

        .numInputWrapper span:hover {
            background: rgba(255, 255, 255, 0.1) !important;
        }

        .numInputWrapper span.arrowUp,
        .numInputWrapper span.arrowDown {
            border: none !important;
        }

            .numInputWrapper span.arrowUp:after,
            .numInputWrapper span.arrowDown:after {
                border-bottom-color: #ffffff !important;
                border-top-color: #ffffff !important;
            }
/* Navigation arrows */
.flatpickr-prev-month,
.flatpickr-next-month {
    fill: #ffffff !important;
    padding: 10px !important;
}

    .flatpickr-prev-month:hover,
    .flatpickr-next-month:hover {
        fill: #a8d5eb !important;
    }

    .flatpickr-prev-month svg,
    .flatpickr-next-month svg {
        width: 14px !important;
        height: 14px !important;
    }
/* Weekdays */
.flatpickr-weekday {
    color: #516f7c !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    background: #f4f7f8 !important;
}
/* Day cells */
.flatpickr-day {
    color: #2c404a !important;
    border-radius: 4px !important;
    font-weight: 500 !important;
    border: 1px solid transparent !important;
}

    .flatpickr-day:hover:not(.flatpickr-disabled) {
        background: #e6f5fb !important;
        border-color: #0d8db8 !important;
        color: #0a6d8e !important;
        cursor: pointer !important;
    }

    .flatpickr-day.selected {
        background: #0d8db8 !important;
        border-color: #0d8db8 !important;
        color: #ffffff !important;
        font-weight: 600 !important;
    }

    .flatpickr-day.today {
        border-color: #0d8db8 !important;
        color: #0d8db8 !important;
        font-weight: 600 !important;
    }

        .flatpickr-day.today:hover:not(.flatpickr-disabled) {
            background: #e6f5fb !important;
            border-color: #0d8db8 !important;
        }
    /* Disabled dates */
    .flatpickr-day.flatpickr-disabled,
    .flatpickr-day.flatpickr-disabled:hover,
    .flatpickr-day.prevMonthDay.flatpickr-disabled,
    .flatpickr-day.nextMonthDay.flatpickr-disabled,
    span.flatpickr-day.flatpickr-disabled {
        color: #cbd5e0 !important;
        background-color: #f8f9fa !important;
        border-color: transparent !important;
        cursor: not-allowed !important;
        pointer-events: none !important;
    }

        .flatpickr-day.flatpickr-disabled.today,
        .flatpickr-day.flatpickr-disabled.selected,
        .flatpickr-day.flatpickr-disabled:active,
        .flatpickr-day.flatpickr-disabled:focus {
            color: #cbd5e0 !important;
            background-color: #f8f9fa !important;
            border-color: transparent !important;
        }
/* Mobile optimizations */
@media (max-width: 768px) {
    .flatpickr-calendar {
        width: calc(100vw - 20px) !important;
        max-width: 400px !important;
        left: 10px !important;
        right: auto !important;
        box-sizing: border-box !important;
    }

    .flatpickr-day {
        height: 44px !important;
        line-height: 44px !important;
        font-size: 16px !important;
    }

        .flatpickr-day.flatpickr-disabled {
            opacity: 0.5 !important;
            text-decoration: line-through !important;
        }
}
/* iOS Safari */
@supports (-webkit-touch-callout: none) {
    .flatpickr-day.flatpickr-disabled {
        -webkit-tap-highlight-color: transparent !important;
        -webkit-touch-callout: none !important;
        -webkit-user-select: none !important;
        user-select: none !important;
    }
}
/* Android Chrome */
@supports not (-webkit-touch-callout: none) {
    @media (max-width: 768px) {
        .flatpickr-day.flatpickr-disabled {
            position: relative !important;
        }

            .flatpickr-day.flatpickr-disabled::after {
                content: '\2715' !important;
                position: absolute !important;
                top: 50% !important;
                left: 50% !important;
                transform: translate(-50%, -50%) !important;
                color: #e74c3c !important;
                font-size: 20px !important;
                font-weight: bold !important;
            }
    }
}

input.flatpickr-input {
    background: #ffffff !important;
    cursor: pointer !important;
}

    input.flatpickr-input[readonly] {
        background-color: #ffffff !important;
        opacity: 1 !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
    }

.flatpickr-mobile-active {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 99999 !important;
    width: 95vw !important;
    max-width: 380px !important;
}

.flatpickr-calendar.open.flatpickr-mobile-active::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: -1;
}

/* ══════════════════════════════════════════════════════════════════════
   RATE COMPARISON — toggle + badge
   ══════════════════════════════════════════════════════════════════════ */


/* ── Ensure [hidden] always wins over class-based display rules ──
   Add !important so `display: flex/grid/etc.` on the same element
   doesn't override the HTML hidden attribute.                      */
.comparison-section [hidden] {
    display: none !important;
}


.comparison-section {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border-soft);
}

/* ── Toggle ─────────────────────────────────────────────────────────── */
.comparison-toggle {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .comparison-toggle .checkbox-label {
        font-weight: 600;
        color: var(--text);
    }

    .comparison-toggle .emoji-icon {
        margin-right: 4px;
    }

    .comparison-toggle .date-hint {
        margin-left: 32px; /* aligns with checkbox text */
        margin-top: 2px;
    }

/* ── Comparison card (the badge) ────────────────────────────────────── */
.comparison-card {
    margin-top: 16px;
    background: linear-gradient(135deg, #f0f7fa 0%, #f8fbfd 100%);
    border: 1px solid #d4e4ec;
    border-left: 4px solid var(--primary);
    border-radius: var(--radius-md);
    padding: 18px 20px;
    animation: fadeIn 0.25s ease;
}

    /* When toggled off, [hidden] attribute hides; when on, removed by JS */
    .comparison-card[hidden] {
        display: none;
    }

/* ── Month picker ───────────────────────────────────────────────────── */
.comparison-period-picker {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px dashed var(--border-soft);
}

    .comparison-period-picker label {
        font-family: var(--font-cd);
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--text-soft);
        white-space: nowrap;
        margin-bottom: 0;
    }

    .comparison-period-picker select {
        flex: 1;
        min-height: 40px;
        padding: 8px 12px;
        font-size: 14px;
        background-color: #fff;
    }

/* ── Side-by-side totals ────────────────────────────────────────────── */
.comparison-amounts {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 12px;
    align-items: center;
    margin-bottom: 14px;
}

.comparison-side {
    text-align: center;
    padding: 12px 8px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: var(--radius);
}

.comparison-side-label {
    font-family: var(--font-cd);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.comparison-side-amount {
    font-family: var(--font-cd);
    font-size: clamp(20px, 5vw, 26px);
    font-weight: 700;
    color: var(--navy);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

/* Highlight the post-change side as the "current" calculation */
.comparison-side-post {
    background: var(--primary-light);
    border: 1px solid hsl(202, 60%, 84%);
}

    .comparison-side-post .comparison-side-label {
        color: var(--primary-dark);
    }

.comparison-arrow {
    font-size: 24px;
    color: var(--text-muted);
    font-weight: 300;
    user-select: none;
}

/* ── Delta summary ──────────────────────────────────────────────────── */
.comparison-delta {
    text-align: center;
    padding-top: 6px;
}

.delta-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    font-family: var(--font-cd);
    font-weight: 700;
    font-size: 16px;
    font-variant-numeric: tabular-nums;
    margin-bottom: 8px;
}

/* Direction-based coloring — uses your existing palette */
.delta-direction-increase {
    background: rgba(220, 53, 69, 0.10);
    color: var(--error);
}

.delta-direction-decrease {
    background: rgba(22, 168, 55, 0.10);
    color: var(--success);
}

.delta-direction-unchanged {
    background: rgba(81, 111, 124, 0.10);
    color: var(--text-muted);
}

.delta-icon {
    font-size: 12px;
    line-height: 1;
}

.delta-amount {
    font-size: 17px;
}

.delta-percent {
    font-size: 14px;
    font-weight: 600;
    opacity: 0.85;
}

.delta-secondary {
    font-size: 13px;
    color: var(--text-soft);
    line-height: 1.5;
}

    .delta-secondary strong {
        color: var(--text);
        font-weight: 600;
        font-variant-numeric: tabular-nums;
    }

/* ── Contextual note (rate change notice) ──────────────────────────── */
.comparison-context {
    margin-top: 14px;
    padding: 10px 14px;
    background: rgba(13, 141, 184, 0.06);
    border-left: 3px solid var(--primary);
    border-radius: var(--radius);
    font-size: 13px;
    color: var(--text-soft);
    line-height: 1.6;
}

    .comparison-context .emoji-icon {
        margin-right: 4px;
    }

    .comparison-context a {
        color: var(--primary-dark);
        font-weight: 600;
        text-decoration: none;
        margin-left: 4px;
        white-space: nowrap;
    }

        .comparison-context a:hover {
            text-decoration: underline;
        }

/* ── Loading state ──────────────────────────────────────────────────── */
.comparison-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px;
    color: var(--text-muted);
    font-size: 14px;
}

.comparison-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: comparison-spin 0.8s linear infinite;
}

@keyframes comparison-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ── Error state ────────────────────────────────────────────────────── */
.comparison-error {
    padding: 12px 16px;
    background: #fff5f5;
    border: 1px solid #f5c2c7;
    border-radius: var(--radius);
    color: var(--error);
    font-size: 14px;
    line-height: 1.5;
}

/* ── Mobile adjustments ─────────────────────────────────────────────── */
@media (max-width: 600px) {
    .comparison-card {
        padding: 14px 14px;
    }

    .comparison-period-picker {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }

        .comparison-period-picker label {
            text-align: left;
        }

    .comparison-amounts {
        gap: 8px;
    }

    .comparison-side {
        padding: 10px 4px;
    }

    .comparison-arrow {
        font-size: 18px;
    }

    .delta-row {
        font-size: 14px;
        padding: 5px 12px;
    }

    .delta-amount {
        font-size: 15px;
    }

    .delta-secondary {
        font-size: 12px;
    }

    .comparison-toggle .date-hint {
        margin-left: 36px; /* slightly wider for larger mobile checkbox */
    }
}

/* ── Print: show comparison if it was visible ──────────────────────── */
@media print {
    .comparison-toggle {
        display: none !important;
    }

    .comparison-card {
        page-break-inside: avoid;
        background: #fff !important;
        border: 1px solid #ddd !important;
    }
}