/* ==========================================================================
   EU Power Data
   Main Stylesheet v6.2.3
   ========================================================================== */

/* ---------- CSS Variables (Light Mode Default) ---------- */
:root {
    --bg-primary: #f8f9fb;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f0f2f5;
    --bg-card: #ffffff;
    --bg-hover: #eef1f6;

    --text-primary: #1a1d23;
    --text-secondary: #5a6170;
    --text-tertiary: #8c93a3;
    --text-inverse: #ffffff;

    --border-color: #e2e5eb;
    --border-light: #eef1f6;

    --accent-blue: #2563eb;
    --accent-blue-hover: #1d4ed8;
    --accent-green: #16a34a;
    --accent-red: #dc2626;
    --accent-amber: #d97706;
    --accent-purple: #7c3aed;

    --chart-renewable: #16a34a;
    --chart-fossil: #6b7280;
    --chart-nuclear: #7c3aed;
    --chart-hydro: #0891b2;
    --chart-solar: #eab308;
    --chart-wind: #06b6d4;
    --chart-gas: #f97316;
    --chart-coal: #57534e;

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
    --shadow-md: 0 2px 8px rgba(0,0,0,0.08);
    --shadow-lg: 0 4px 16px rgba(0,0,0,0.10);

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;

    --header-height: 56px;
    --max-width: 1320px;
}

/* ---------- Dark Mode ---------- */
[data-theme="dark"] {
    --bg-primary: #0f1117;
    --bg-secondary: #1a1d27;
    --bg-tertiary: #22252f;
    --bg-card: #1a1d27;
    --bg-hover: #262a36;

    --text-primary: #e8eaf0;
    --text-secondary: #9ea3b0;
    --text-tertiary: #6b7082;
    --text-inverse: #0f1117;

    --border-color: #2d3140;
    --border-light: #262a36;

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.2);
    --shadow-md: 0 2px 8px rgba(0,0,0,0.3);
    --shadow-lg: 0 4px 16px rgba(0,0,0,0.4);
}

/* ---------- Reset & Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    font-size: 15px;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
}

a { color: var(--accent-blue); text-decoration: none; }
a:hover { color: var(--accent-blue-hover); }

img { max-width: 100%; height: auto; }

/* ---------- Layout ---------- */
.eew-container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 20px;
}

.eew-main {
    padding-top: calc(var(--header-height) + 10px);
    padding-bottom: 36px;
}

/* ---------- Header ---------- */
.eew-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    z-index: 1000;
    display: flex;
    align-items: center;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.eew-header-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.eew-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    flex-shrink: 0;
    white-space: nowrap;
}

.eew-logo-icon {
    width: 28px;
    height: 28px;
    background: #003399;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.75rem;
    font-weight: 800;
}

/* Nav */
.eew-nav {
    display: flex;
    align-items: center;
    gap: 2px;
}

.eew-nav a {
    padding: 6px 11px;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 0.87rem;
    font-weight: 500;
    white-space: nowrap;
    transition: all 0.15s;
}

.eew-nav a:hover,
.eew-nav a.active {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.eew-nav a.active {
    color: var(--accent-blue);
    background: rgba(37, 99, 235, 0.08);
}

/* Controls (theme + lang toggles) */
.eew-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.eew-toggle-btn {
    width: 36px;
    height: 36px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    transition: all 0.15s;
}

.eew-toggle-btn:hover {
    border-color: var(--accent-blue);
    color: var(--accent-blue);
}

.eew-lang-selector {
    display: flex;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--bg-tertiary);
}

.eew-lang-btn {
    padding: 6px 10px;
    border: none;
    background: transparent;
    color: var(--text-tertiary);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.eew-lang-btn.active {
    background: #003399;
    color: white;
}

.eew-lang-btn:hover:not(.active) {
    color: var(--text-primary);
    background: var(--bg-hover);
}

/* Mobile menu */
.eew-menu-toggle {
    display: none;
    width: 36px;
    height: 36px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

/* ---------- Hero / Page Title ---------- */
.eew-hero {
    padding: 14px 0 10px;
}

.eew-hero h1 {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    margin-bottom: 4px;
}

.eew-hero p {
    color: var(--text-secondary);
    font-size: 0.93rem;
}

.eew-updated {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-tertiary);
    font-size: 0.78rem;
    margin-top: 8px;
}

.eew-updated .dot {
    width: 6px;
    height: 6px;
    background: var(--accent-green);
    border-radius: 50%;
    display: inline-block;
}

/* ---------- KPI Cards Row ---------- */
.eew-kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}

.eew-kpi-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 18px 20px;
    box-shadow: var(--shadow-sm);
}

.eew-kpi-label {
    font-size: 0.78rem;
    color: var(--text-tertiary);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}

.eew-kpi-value {
    font-size: 1.55rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.eew-kpi-change {
    font-size: 0.82rem;
    font-weight: 600;
    margin-top: 4px;
}

.eew-kpi-change.positive { color: var(--accent-green); }
.eew-kpi-change.negative { color: var(--accent-red); }
.eew-kpi-change.neutral  { color: var(--text-tertiary); }

/* ---------- Cards / Panels ---------- */
.eew-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    margin-bottom: 20px;
    overflow: hidden;
}

.eew-card-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    /* align-items: flex-start so that PNG/SHARE action buttons sit on the
       title line, not vertically centred between title and subtitle */
    align-items: flex-start;
    justify-content: space-between;
}

.eew-card-title {
    font-size: 0.95rem;
    font-weight: 650;
    color: var(--text-primary);
}

.eew-card-subtitle {
    font-size: 0.78rem;
    color: var(--text-tertiary);
}

.eew-card-body {
    padding: 20px;
}

.eew-card-body.no-padding {
    padding: 0;
}

/* ---------- Grid Layouts ---------- */
.eew-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

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

.eew-grid-map-table {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

/* ---------- Price Table ---------- */
.eew-price-table {
    width: 100%;
    border-collapse: collapse;
}

.eew-price-table th {
    text-align: left;
    padding: 10px 16px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-tertiary);
}

.eew-price-table td {
    padding: 12px 16px;
    font-size: 0.88rem;
    border-bottom: 1px solid var(--border-light);
    vertical-align: middle;
}

.eew-price-table tr:last-child td {
    border-bottom: none;
}

.eew-price-table tr:hover td {
    background: var(--bg-hover);
}

.eew-country-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
}

/* Center country names in all data tables */
.eew-price-table .eew-country-cell {
    justify-content: center;
}

.eew-price-table th:first-child,
.eew-price-table td:first-child {
    text-align: center;
}

.eew-flag {
    width: 24px;
    height: 16px;
    border-radius: 2px;
    object-fit: cover;
    border: 1px solid var(--border-light);
}

.eew-price-val {
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

.eew-price-high { color: var(--accent-red); }
.eew-price-mid  { color: var(--accent-amber); }
.eew-price-low  { color: var(--accent-green); }

.eew-renewable-bar {
    display: flex;
    align-items: center;
    gap: 8px;
}

.eew-renewable-bar-track {
    flex: 1;
    height: 6px;
    background: var(--bg-tertiary);
    border-radius: 3px;
    overflow: hidden;
}

.eew-renewable-bar-fill {
    height: 100%;
    background: var(--chart-renewable);
    border-radius: 3px;
    transition: width 0.6s ease;
}

.eew-renewable-pct {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--chart-renewable);
    min-width: 40px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ---------- Map Container ---------- */
.eew-map-container {
    width: 100%;
    height: 480px;
    border-radius: var(--radius-md);
    position: relative;   /* ensures Leaflet controls stay inside */
    overflow: hidden;
    background: var(--bg-tertiary);
}

.eew-map-container .leaflet-container {
    background: var(--bg-tertiary) !important;
}

/* Leaflet tooltip override */
.eew-map-tooltip {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: var(--shadow-md) !important;
    padding: 8px 12px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.82rem !important;
    color: var(--text-primary) !important;
}

.eew-map-tooltip .country-name {
    font-weight: 650;
    margin-bottom: 2px;
}

.eew-map-tooltip .price-value {
    font-size: 1.05rem;
    font-weight: 700;
}

/* ---------- Chart Containers ---------- */
.eew-chart-container {
    position: relative;
    width: 100%;
    height: 300px;
}

.eew-chart-container canvas {
    width: 100% !important;
    height: 100% !important;
}

.eew-chart-container.small { height: 200px; }
.eew-chart-container.tall  { height: 400px; }

/* ---------- Generation Mix Donut ---------- */
.eew-gen-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.eew-gen-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 20px;
    box-shadow: var(--shadow-sm);
    text-align: center;
}

.eew-gen-card h3 {
    font-size: 0.9rem;
    font-weight: 650;
    margin-bottom: 4px;
}

.eew-gen-card .ren-pct {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--chart-renewable);
    margin-bottom: 12px;
}

.eew-gen-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 16px;
    margin-top: 12px;
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.eew-gen-legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.eew-gen-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ---------- Loading / Empty States ---------- */
.eew-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: var(--text-tertiary);
    font-size: 0.88rem;
}

.eew-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-color);
    border-top-color: var(--accent-blue);
    border-radius: 50%;
    animation: eew-spin 0.7s linear infinite;
    margin-right: 10px;
}

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

.eew-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-tertiary);
}

.eew-empty p { font-size: 0.88rem; }

.eew-setup-notice {
    background: rgba(37, 99, 235, 0.06);
    border: 1px solid rgba(37, 99, 235, 0.2);
    border-radius: var(--radius-md);
    padding: 20px 24px;
    margin-bottom: 24px;
    font-size: 0.88rem;
    color: var(--text-secondary);
}

.eew-setup-notice strong {
    color: var(--accent-blue);
}

.eew-setup-notice code {
    background: var(--bg-tertiary);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.82rem;
}

/* ---------- Footer ---------- */
.eew-footer {
    border-top: 1px solid var(--border-color);
    padding: 24px 0;
    margin-top: 24px;
    color: var(--text-tertiary);
    font-size: 0.78rem;
}

.eew-footer-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.eew-footer-links {
    display: flex;
    gap: 16px;
}

.eew-footer-links a {
    color: var(--text-tertiary);
    font-size: 0.78rem;
}

.eew-footer-links a:hover {
    color: var(--text-primary);
}

.eew-footer-sources {
    font-size: 0.72rem;
    color: var(--text-tertiary);
    max-width: 600px;
    text-align: right;
}

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
    .eew-grid-map-table {
        grid-template-columns: 1fr;
    }
    .eew-map-container {
        height: 380px;
    }
}

@media (max-width: 768px) {
    html { font-size: 14px; }

    .eew-logo span { font-size: 0.75rem; }

    .eew-nav { display: none; }
    .eew-nav.open {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: var(--header-height);
        left: 0;
        right: 0;
        background: var(--bg-secondary);
        border-bottom: 1px solid var(--border-color);
        padding: 12px 16px;
        box-shadow: var(--shadow-lg);
        z-index: 999;
    }

    .eew-menu-toggle { display: flex; }

    .eew-grid-2,
    .eew-grid-3 {
        grid-template-columns: 1fr;
    }

    .eew-kpi-row {
        grid-template-columns: 1fr 1fr;
    }

    .eew-hero h1 {
        font-size: 1.3rem;
    }

    /* Reduce space between menu and page title by ~1/3 on mobile */
    .eew-main {
        padding-top: calc(var(--header-height) + 6px);
    }
    .eew-hero {
        padding: 10px 0 8px;
    }

    .eew-map-container {
        height: 520px;
    }

    /* Mobile nav: tools are block items in the open vertical menu */
    .eew-nav.open .eew-mobile-tool {
        display: block;
        padding: 10px 0;
        font-size: 0.9rem;
    }

    .eew-footer-inner {
        flex-direction: column;
        text-align: center;
    }

    .eew-footer-sources {
        text-align: center;
    }

    .eew-controls {
        gap: 4px;
    }

    .eew-lang-btn {
        padding: 5px 7px;
        font-size: 0.72rem;
    }
}

/* Data Centers filter card: on narrow screens, stack filters below title */
@media (max-width: 540px) {
    .eew-card-header[style*="position:relative"] {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding-bottom: 12px !important;
        min-height: unset !important;
    }
    .eew-card-header[style*="position:relative"] > div[id$="-filter"],
    .eew-card-header[style*="position:relative"] > div[id$="-filters"] {
        position: static !important;
        transform: none !important;
        width: 100% !important;
        justify-content: flex-start !important;
        padding-top: 8px !important;
        flex-wrap: wrap !important;
    }
}

@media (max-width: 480px) {
    .eew-kpi-row {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .eew-kpi-card {
        padding: 12px 14px;
    }
    .eew-kpi-value {
        font-size: 1.1rem;
    }

    .eew-gen-grid {
        grid-template-columns: 1fr;
    }

    .eew-price-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .eew-price-table {
        min-width: 560px;
    }
    #dc-energy-table .eew-price-table {
        min-width: 780px;
    }
}

/* ---------- Utility classes ---------- */
.text-center { text-align: center; }
.text-right { text-align: right; }
.font-mono { font-variant-numeric: tabular-nums; }

/* Mobile-only / desktop-only visibility helpers */
.eew-show-mobile { display: none; }
@media (max-width: 768px) {
    .eew-hide-mobile { display: none !important; }
    .eew-show-mobile { display: block; }
}

/* Show more / Show less buttons inside horizontally scrollable tables.
   The JS helper `centerShowMoreButtons` (eew-tools.js) physically relocates
   these buttons out of the .eew-price-table-wrap scroll container into a
   sibling div placed right after it, so they stay centred on the viewport
   regardless of table width or scroll position. CSS below is just the
   fallback style in case JS hasn't run yet. */
.eew-show-more-sticky {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 10px 0;
    flex-wrap: wrap;
}
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mb-8 { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.hidden { display: none !important; }

/* ---------- Live Badge ---------- */
.eew-updated .dot.live {
    background: var(--accent-green);
    animation: eew-pulse-dot 1.5s ease-in-out infinite;
}

.eew-live-label {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--accent-green);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-right: 4px;
}

@keyframes eew-pulse-dot {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.5); }
    50%      { opacity: 0.7; box-shadow: 0 0 0 5px rgba(22, 163, 74, 0); }
}

/* ---------- Negative Price Alert Banner ---------- */
.eew-alert-negative {
    background: rgba(30, 58, 95, 0.08);
    border: 1px solid rgba(30, 58, 95, 0.25);
    border-left: 4px solid #1e3a5f;
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    margin-bottom: 16px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 10px;
}

[data-theme="dark"] .eew-alert-negative {
    background: rgba(30, 58, 95, 0.2);
    border-color: rgba(59, 130, 246, 0.3);
}

.eew-alert-icon {
    font-size: 1.1rem;
}

.eew-neg-badge {
    display: inline-block;
    background: #1e3a5f;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 3px;
    margin-left: 6px;
    vertical-align: middle;
    letter-spacing: 0.04em;
}

/* ---------- Clickable Price Rows ---------- */
.eew-price-row.clickable {
    cursor: pointer;
    transition: background 0.15s;
}

.eew-price-row.clickable:hover td {
    background: var(--bg-hover);
}

.eew-price-row.has-negative td:first-child {
    border-left: 3px solid #1e3a5f;
}

.eew-expand-hint {
    display: inline-block;
    color: var(--text-tertiary);
    font-size: 0.72rem;
    margin-left: 4px;
    transition: transform 0.2s;
}

/* ---------- Hourly Chart Row ---------- */
.eew-hourly-row td {
    padding: 0 !important;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-tertiary);
}

.eew-hourly-chart-container {
    height: 220px;
    padding: 16px 20px;
}

.eew-hourly-chart-container canvas {
    width: 100% !important;
    height: 100% !important;
}

/* ---------- Map price label pulse (negative prices) ---------- */
@keyframes eew-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.15); }
}

/* ---------- Select Dropdowns ---------- */
.eew-select {
    padding: 6px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-size: 0.82rem;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%236b7280' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 28px;
    text-align: center;
    text-align-last: center;
    min-width: max-content;
}

.eew-select:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

/* ---------- Text Input ---------- */
.eew-input {
    padding: 6px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-size: 0.82rem;
    font-family: 'Inter', sans-serif;
}

.eew-input:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

/* ---------- Primary Button ---------- */
.eew-btn-primary {
    padding: 6px 16px;
    border: none;
    border-radius: var(--radius-sm);
    background: #003399;
    color: white;
    font-size: 0.82rem;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: background 0.15s;
}

.eew-btn-primary:hover {
    background: var(--accent-blue-hover);
}

/* ---------- Export Buttons ---------- */
.eew-export-btn {
    padding: 4px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transition: all 0.15s;
}

.eew-export-btn:hover {
    border-color: var(--accent-blue);
    color: var(--accent-blue);
    background: rgba(37, 99, 235, 0.05);
}

.eew-export-btn:disabled {
    opacity: 0.55;
    cursor: wait;
    pointer-events: none;
}

/* ---------- Triggered Alert Notification ---------- */
.eew-alert-triggered {
    background: rgba(37, 99, 235, 0.08);
    border: 1px solid rgba(37, 99, 235, 0.25);
    border-left: 4px solid var(--accent-blue);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    margin-bottom: 16px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

[data-theme="dark"] .eew-alert-triggered {
    background: rgba(37, 99, 235, 0.12);
}

/* ---------- Code Block ---------- */
.eew-code-block {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    overflow-x: auto;
}

.eew-code-block code {
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 0.78rem;
    color: var(--text-primary);
    word-break: break-all;
}

/* ---------- Flow map lines ---------- */
.eew-flow-line {
    animation: eew-dash 1.5s linear infinite;
}

@keyframes eew-dash {
    to { stroke-dashoffset: -24; }
}

.eew-flow-label {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* ---------- Currency Buttons ---------- */
.eew-currency-btn {
    padding: 4px 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-tertiary);
    color: var(--text-tertiary);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.eew-currency-btn:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.eew-currency-btn:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.eew-currency-btn + .eew-currency-btn { border-left: none; }

.eew-currency-btn.active {
    background: #003399;
    color: white;
    border-color: var(--accent-blue);
}

/* ---------- Tool Link Cards ---------- */
.eew-tool-link {
    display: inline-flex;
    align-items: center;
    padding: 10px 18px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.15s;
}

.eew-tool-link:hover {
    border-color: var(--accent-blue);
    background: rgba(37, 99, 235, 0.05);
    color: var(--accent-blue);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

/* ---------- Leaflet overrides for clean look ---------- */
.eew-price-label {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

.leaflet-tooltip.eew-map-tooltip {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    padding: 8px 12px;
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    color: var(--text-primary);
}

.leaflet-tooltip.eew-map-tooltip::before {
    border-top-color: var(--border-color);
}

/* Hide Leaflet zoom control on mobile — users pinch to zoom */
@media (max-width: 768px) {
    .leaflet-control-zoom { display: none !important; }
}

/* Map attribution: move to subtle position */
.leaflet-control-attribution {
    font-size: 9px !important;
    opacity: 0.5;
    background: transparent !important;
}

/* Tools dropdown menu */
/* Mobile tools: hide on desktop, show on mobile */
.eew-mobile-tool { display: none; }

@media (max-width: 768px) {
    /* On mobile the Tools dropdown is replaced by individual .eew-mobile-tool links */
    .eew-nav-dropdown { display: none !important; }
    /* Default hidden — only shown inside the open mobile menu */
    .eew-mobile-tool { display: none; }
}

/* Inside open mobile menu, show tool links as block items */
.eew-nav.open .eew-mobile-tool {
    display: block !important;
}

.eew-nav-dropdown {
    position: relative;
    display: inline-block;
}

.eew-nav-dropdown > a {
    cursor: pointer;
}

.eew-nav-dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: var(--shadow-md);
    min-width: auto;
    z-index: 1000;
    padding: 4px 0;
    padding-top: 4px;
}

.eew-nav-dropdown:hover .eew-nav-dropdown-content,
.eew-nav-dropdown-content:hover {
    display: block;
}

.eew-nav-dropdown-content a {
    display: block;
    padding: 7px 14px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-decoration: none;
    white-space: nowrap;
}

.eew-nav-dropdown-content a:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

@media (max-width: 768px) {
    .eew-nav-dropdown-content {
        position: static;
        box-shadow: none;
        border: none;
        padding: 0 0 0 16px;
        display: block;
    }
}

/* Table alignment: first column centered (country), others keep their class */
.eew-price-table th:first-child,
.eew-price-table td:first-child {
    text-align: center;
}
.eew-price-table .text-right { text-align: right !important; }
.eew-price-table .eew-country-cell { justify-content: center; }

/* Ensure anchor links scroll to below the fixed header */
section[id], .eew-card[id] {
    scroll-margin-top: calc(var(--header-height) + 12px);
}

/* Suppress SVG path focus outline — Leaflet SVG renderer causes a browser
   focus ring (visible as black rectangle) on clicked/interactive path elements.
   Also suppresses iOS tap highlight color. */
.eew-map-container path:focus,
.eew-map-container circle:focus,
.eew-map-container .leaflet-interactive:focus {
    outline: none !important;
    box-shadow: none !important;
}
.eew-map-container,
.eew-map-container .leaflet-interactive,
.eew-map-container path,
.eew-map-container circle {
    -webkit-tap-highlight-color: transparent;
}

/* Country Panel Scrollbar (Overview map drill-down) */
#eew-country-panel {
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}
#eew-country-panel::-webkit-scrollbar {
    width: 4px;
}
#eew-country-panel::-webkit-scrollbar-track {
    background: transparent;
}
#eew-country-panel::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 2px;
}

/* ---------- Leaflet tile seam fix ---------- */
/* Sub-pixel rendering at fractional zoom levels (zoomSnap:0) creates 1px gaps
   between tiles. The outline trick forces a separate GPU compositing layer per
   tile which closes the gap without changing tile dimensions visually. */
.eew-map-container .leaflet-tile {
    outline: 1px solid transparent;
}
/* Also eliminates the tile seam for retina/scaled tiles on high-DPI screens */
.eew-map-container .leaflet-tile-container {
    will-change: transform;
}

/* ── MapLibre GL JS overrides (Data Centers map) ────────────────────────── */
#dc-map .maplibregl-canvas { outline: none !important; -webkit-tap-highlight-color: transparent; }
#dc-map .maplibregl-ctrl-attrib,
#dc-map .maplibregl-ctrl-attrib a {
    font-size: 9px !important;
    opacity: 0.5;
    background: transparent !important;
    color: inherit;
}
#dc-map .maplibregl-ctrl-attrib-button { display: none !important; }
#dc-map .maplibregl-ctrl-bottom-right { font-size: 9px; opacity: 0.5; }
/* Mobile: show compact "i" button, hide the attribution text by default.
   Tapping the button expands the text. Keeps the map clean on narrow widths. */
@media (max-width: 768px) {
    #dc-map .maplibregl-ctrl-attrib-button {
        display: block !important;
        opacity: 0.7;
    }
    #dc-map .maplibregl-ctrl-attrib.maplibregl-compact {
        min-height: 24px !important;
    }
    #dc-map .maplibregl-ctrl-attrib.maplibregl-compact:not(.maplibregl-compact-show) .maplibregl-ctrl-attrib-inner {
        display: none !important;
    }
}
#dc-map .maplibregl-popup-content {
    border-radius: 8px;
    padding: 12px 14px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    font-family: Inter, system-ui, sans-serif;
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}
#dc-map .maplibregl-popup-close-button {
    font-size: 16px;
    color: #6b7280;
    padding: 4px 8px;
}
#dc-map .maplibregl-ctrl-zoom-in,
#dc-map .maplibregl-ctrl-zoom-out {
    border-radius: 4px !important;
}
@media (max-width: 768px) {
    #dc-map .maplibregl-ctrl-top-left { display: none !important; }
    /* Desktop uses absolute positioning to centre the filter; on mobile
       move it back to normal flow so it wraps below the title. */
    #dc-country-filter {
        position: static !important;
        transform: none !important;
        width: 100%;
        margin-top: 12px;
        justify-content: flex-start !important;
    }
    #dc-list .eew-card-header {
        flex-wrap: wrap;
    }
    /* Phase 2 (worldwide): country dropdown can have ~250 entries with
       long names ("République démocratique du Congo", etc.). Constrain
       the select width on mobile so a long entry doesn't push it past
       the viewport and trigger horizontal scroll. The native picker UI
       on iOS/Android shows the full text in its own list. */
    #dc-country-filter .eew-select {
        max-width: 100%;
        min-width: 0;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }
}

/* ── MapLibre GL JS overrides (Overview & Grid Monitor maps) ────────────── */
#europe-map .maplibregl-canvas,
#grid-flow-map .maplibregl-canvas {
    outline: none !important;
    -webkit-tap-highlight-color: transparent;
}
#europe-map .maplibregl-ctrl-attrib,
#europe-map .maplibregl-ctrl-attrib a,
#grid-flow-map .maplibregl-ctrl-attrib,
#grid-flow-map .maplibregl-ctrl-attrib a {
    font-size: 9px !important;
    opacity: 0.5;
    background: transparent !important;
    color: inherit;
}
#europe-map .maplibregl-ctrl-attrib-button,
#grid-flow-map .maplibregl-ctrl-attrib-button { display: none !important; }
#europe-map .maplibregl-ctrl-bottom-right,
#grid-flow-map .maplibregl-ctrl-bottom-right {
    font-size: 9px;
    opacity: 0.5;
}
/* Mobile: show compact "i" button, hide attribution text by default */
@media (max-width: 768px) {
    #europe-map .maplibregl-ctrl-attrib-button,
    #grid-flow-map .maplibregl-ctrl-attrib-button {
        display: block !important;
        opacity: 0.7;
    }
    #europe-map .maplibregl-ctrl-attrib.maplibregl-compact,
    #grid-flow-map .maplibregl-ctrl-attrib.maplibregl-compact {
        min-height: 24px !important;
    }
    #europe-map .maplibregl-ctrl-attrib.maplibregl-compact:not(.maplibregl-compact-show) .maplibregl-ctrl-attrib-inner,
    #grid-flow-map .maplibregl-ctrl-attrib.maplibregl-compact:not(.maplibregl-compact-show) .maplibregl-ctrl-attrib-inner {
        display: none !important;
    }
}
#europe-map .maplibregl-popup-content,
#grid-flow-map .maplibregl-popup-content {
    border-radius: 8px;
    padding: 10px 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    font-family: Inter, system-ui, sans-serif;
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}
/* Hover popup: no tip, minimal chrome (reused by Overview + Grid) */
.maplibregl-popup.eew-hover-popup .maplibregl-popup-tip { display: none; }
.maplibregl-popup.eew-hover-popup .maplibregl-popup-content {
    padding: 8px 12px;
    font-size: 0.82rem;
}
#europe-map .maplibregl-ctrl-zoom-in,
#europe-map .maplibregl-ctrl-zoom-out,
#grid-flow-map .maplibregl-ctrl-zoom-in,
#grid-flow-map .maplibregl-ctrl-zoom-out {
    border-radius: 4px !important;
}
@media (max-width: 768px) {
    #europe-map .maplibregl-ctrl-top-left,
    #grid-flow-map .maplibregl-ctrl-top-left { display: none !important; }
}

/* Transition map: identical MapLibre control styling to Overview / Grid Monitor */
#transition-map .maplibregl-canvas { outline: none !important; -webkit-tap-highlight-color: transparent; }
#transition-map .maplibregl-ctrl-attrib,
#transition-map .maplibregl-ctrl-attrib a {
    font-size: 9px !important; opacity: 0.5; background: transparent !important; color: inherit;
}
#transition-map .maplibregl-ctrl-attrib-button { display: none !important; }
#transition-map .maplibregl-ctrl-bottom-right { font-size: 9px; opacity: 0.5; }
#transition-map .maplibregl-popup-content {
    border-radius: 8px; padding: 10px 12px; box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    font-family: Inter, system-ui, sans-serif; background: var(--bg-card);
    color: var(--text-primary); border: 1px solid var(--border-color);
}
#transition-map .maplibregl-ctrl-zoom-in,
#transition-map .maplibregl-ctrl-zoom-out { border-radius: 4px !important; }
@media (max-width: 768px) {
    #transition-map .maplibregl-ctrl-attrib-button { display: block !important; opacity: 0.7; }
    #transition-map .maplibregl-ctrl-attrib.maplibregl-compact { min-height: 24px !important; }
    #transition-map .maplibregl-ctrl-attrib.maplibregl-compact:not(.maplibregl-compact-show) .maplibregl-ctrl-attrib-inner { display: none !important; }
    #transition-map .maplibregl-ctrl-top-left { display: none !important; }
}


/* v5.6 — Hide inline "Back to today" button on Overview map toolbar in mobile.
   Keeps only the amber historical banner's Back to today, freeing space so
   the "Viewing date:" label + input fit on a single row on narrow screens. */
@media (max-width: 768px) {
    #map-date-today-btn { display: none !important; }
}



/* v5.7 — Fully-centered tables.
   Per João's explicit list: force text-align:center on every th/td
   (headers + body cells) inside these specific tables, overriding any
   .text-right / .text-left / inline text-align used elsewhere. */
#best-time .eew-price-table th,
#best-time .eew-price-table td,
#weather-table .eew-price-table th,
#weather-table .eew-price-table td,
#spot-prices .eew-price-table th,
#spot-prices .eew-price-table td,
#grid-utilization .eew-price-table th,
#grid-utilization .eew-price-table td,
#grid-splitting .eew-price-table th,
#grid-splitting .eew-price-table td,
#forward-spreads .eew-price-table th,
#forward-spreads .eew-price-table td,
#forward-ppa .eew-price-table th,
#forward-ppa .eew-price-table td,
#forward-spark .eew-price-table th,
#forward-spark .eew-price-table td,
#storage-table .eew-price-table th,
#storage-table .eew-price-table td,
#interconn-table .eew-price-table th,
#interconn-table .eew-price-table td,
#hydrogen-table .eew-price-table th,
#hydrogen-table .eew-price-table td,
#dc-table .eew-price-table th,
#dc-table .eew-price-table td,
#dc-energy-table .eew-price-table th,
#dc-energy-table .eew-price-table td,
#auction-database .eew-price-table th,
#auction-database .eew-price-table td,
#upcoming-auctions .eew-price-table th,
#upcoming-auctions .eew-price-table td,
#calc-results .eew-price-table th,
#calc-results .eew-price-table td,
#carbon-table .eew-price-table th,
#carbon-table .eew-price-table td,
#comp-summary .eew-price-table th,
#comp-summary .eew-price-table td,
#alert-ref-prices .eew-price-table th,
#alert-ref-prices .eew-price-table td {
    text-align: center !important;
}

#best-time .eew-country-cell,
#weather-table .eew-country-cell,
#spot-prices .eew-country-cell,
#grid-utilization .eew-country-cell,
#grid-splitting .eew-country-cell,
#forward-spreads .eew-country-cell,
#forward-ppa .eew-country-cell,
#forward-spark .eew-country-cell,
#storage-table .eew-country-cell,
#interconn-table .eew-country-cell,
#hydrogen-table .eew-country-cell,
#dc-table .eew-country-cell,
#dc-energy-table .eew-country-cell,
#auction-database .eew-country-cell,
#upcoming-auctions .eew-country-cell,
#calc-results .eew-country-cell,
#carbon-table .eew-country-cell,
#comp-summary .eew-country-cell,
#alert-ref-prices .eew-country-cell {
    justify-content: center;
}