/* ── Custom Properties ──────────────────────────────────── */

.gcm-dashboard {
    --gcm-primary: #004E42;
    --gcm-accent: #C2614B;
    --gcm-success: #4D7A4D;
    --gcm-warning: #9A7230;
    --gcm-danger: #B5453A;

    --gcm-text-primary: #2D2A26;
    --gcm-text-secondary: #5C5752;
    --gcm-text-muted: #7A756F;

    --gcm-bg-primary: #FDFCFA;
    --gcm-bg-secondary: #F5F3F0;
    --gcm-bg-hover: #EFECEA;
    --gcm-border: #E0DDD8;
    --gcm-text-color: #5C5752;

    --gcm-spacing-xs: 0.25rem;
    --gcm-spacing-sm: 0.5rem;
    --gcm-spacing-md: 1rem;
    --gcm-spacing-lg: 1.5rem;
    --gcm-spacing-xl: 2rem;

    --gcm-radius-sm: 4px;
    --gcm-radius-md: 6px;
    --gcm-radius-lg: 8px;
    --gcm-radius-xl: 10px;

    /* Alert tokens (shadcn-style: soft surface + ring border) */
    --gcm-alert-destructive-border: #FECACA;
    --gcm-alert-destructive-bg: #FEF2F2;
    --gcm-alert-destructive-fg: #B91C1C;
    --gcm-alert-destructive-icon: #DC2626;
    --gcm-alert-warning-border: #FDE68A;
    --gcm-alert-warning-bg: #FFFBEB;
    --gcm-alert-warning-fg: #A16207;
    --gcm-alert-warning-icon: #D97706;
    --gcm-alert-muted-border: #E2E8F0;
    --gcm-alert-muted-bg: #FDFCFA;
    --gcm-alert-muted-fg: #64748B;
    --gcm-alert-muted-desc: #79716B;
    --gcm-alert-muted-icon: #79716B;

    font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--gcm-text-primary);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Themes often reset <button> fonts — keep Geist for all dashboard UI. */
.gcm-dashboard button,
.gcm-dashboard input,
.gcm-dashboard table {
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ── Tabs ──────────────────────────────────────────────── */

.gcm-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gcm-spacing-xs);
    border-bottom: 1px solid var(--gcm-border);
    margin-bottom: calc(var(--gcm-spacing-xl) + var(--gcm-spacing-md));
}

.gcm-tab {
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
    padding: var(--gcm-spacing-sm) var(--gcm-spacing-md);
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    background: none;
    color: var(--gcm-text-muted);
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s, border-color 0.15s;
}

.gcm-tab:hover {
    color: var(--gcm-text-secondary);
    background: transparent;
}

.gcm-tab:focus,
.gcm-tab:active {
    background: transparent;
    outline: none;
    box-shadow: none;
}

.gcm-tab:focus-visible {
    outline: 2px solid var(--gcm-primary);
    outline-offset: -2px;
    border-radius: var(--gcm-radius-sm);
    background: transparent;
}

.gcm-tab-active,
.gcm-tab-active:hover,
.gcm-tab-active:focus,
.gcm-tab-active:active {
    color: var(--gcm-primary);
    border-bottom-color: var(--gcm-primary);
    font-weight: 600;
    background: transparent;
}

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

.gcm-source-section {
    margin-bottom: var(--gcm-spacing-xl);
}

/* Latest readings (overview) — matches chart card title style */
.gcm-latest-readings-title,
.gcm-chart-title {
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--gcm-text-primary);
}

.gcm-latest-readings-title {
    margin: 0 0 var(--gcm-spacing-md) 0;
    line-height: 1.3;
}

.gcm-overview-readings {
    margin-bottom: var(--gcm-spacing-lg);
}

.gcm-last-reading-at {
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 16px;
    color: var(--gcm-text-muted);
    margin: var(--gcm-spacing-md) 0 0;
    line-height: 1.4;
}

.gcm-source-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--gcm-spacing-sm);
    margin-bottom: var(--gcm-spacing-xl);
}

.gcm-source-title {
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--gcm-text-primary);
}

/* ── Dust Headline ─────────────────────────────────────── */

.gcm-dust-headline {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gcm-spacing-md);
    margin-bottom: var(--gcm-spacing-md);
}

.gcm-metric-dust {
    min-height: 90px;
    padding: var(--gcm-spacing-lg);
    background: var(--gcm-bg-primary);
    border: 1px solid var(--gcm-border);
    border-left: 3px solid var(--gcm-accent);
    border-radius: var(--gcm-radius-md);
}

.gcm-metric-dust .gcm-metric-value {
    font-size: 26px;
    font-weight: 700;
    color: var(--gcm-text-primary);
}

.gcm-metric-dust .gcm-metric-label {
    font-size: 14px;
    color: var(--gcm-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── Weather Context Cards ─────────────────────────────── */

.gcm-weather-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gcm-spacing-md);
}

.gcm-metric-card {
    display: flex;
    flex-direction: column;
    padding: var(--gcm-spacing-md) var(--gcm-spacing-lg);
    background: var(--gcm-bg-primary);
    border: 1px solid var(--gcm-border);
    border-radius: var(--gcm-radius-md);
    min-height: 76px;
}

.gcm-metric-label {
    display: block;
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 14px;
    color: var(--gcm-text-muted);
    margin-bottom: var(--gcm-spacing-xs);
}

.gcm-metric-value {
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--gcm-text-primary);
}

/* ── Staleness Indicators ──────────────────────────────── */

.gcm-metric-status {
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: var(--gcm-spacing-xs);
    padding: 2px 8px;
    border-radius: var(--gcm-radius-sm);
    font-weight: 500;
}

.gcm-status-indicator {
    font-size: 14px;
}

.gcm-status-ok {
    color: #3D6B3D;
    background: #E8F2E8;
}

.gcm-status-warning {
    color: #7A6320;
    background: #FBF3E0;
}

.gcm-status-offline {
    color: #8B3A30;
    background: #F8E8E5;
}

/* ── Alerts (Shadcn / Tailwind-inspired) ─────────────── */

.gcm-alert {
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 1rem 1.125rem;
    border-radius: var(--gcm-radius-xl);
    border: 1px solid var(--gcm-alert-line, var(--gcm-border));
    background: var(--gcm-alert-surface, var(--gcm-bg-secondary));
    color: var(--gcm-alert-ink, var(--gcm-text-secondary));
    text-align: left;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.gcm-alert__icon {
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.1rem;
    flex-shrink: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.gcm-alert__body {
    flex: 1;
    min-width: 0;
}

.gcm-alert__title {
    margin: 0 0 0.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.01em;
    color: var(--gcm-alert-title, inherit);
}

.gcm-alert__description,
.gcm-alert__message {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--gcm-alert-desc, inherit);
    opacity: 0.95;
}

.gcm-alert__message:only-child {
    font-size: 0.875rem;
    font-weight: 500;
    padding-top: 0.1rem;
}

/* Destructive — full offline, chart error */
.gcm-alert--destructive {
    --gcm-alert-line: var(--gcm-alert-destructive-border);
    --gcm-alert-surface: var(--gcm-alert-destructive-bg);
    --gcm-alert-ink: var(--gcm-alert-destructive-fg);
    --gcm-alert-title: var(--gcm-alert-destructive-fg);
    --gcm-alert-desc: var(--gcm-alert-destructive-fg);
}

.gcm-alert--destructive .gcm-alert__icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23DC2626' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E");
}

/* Warning — partial / degraded */
.gcm-alert--warning {
    --gcm-alert-line: var(--gcm-alert-warning-border);
    --gcm-alert-surface: var(--gcm-alert-warning-bg);
    --gcm-alert-ink: var(--gcm-alert-warning-fg);
    --gcm-alert-title: var(--gcm-alert-warning-fg);
    --gcm-alert-desc: var(--gcm-alert-warning-fg);
}

.gcm-alert--warning .gcm-alert__icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23D97706' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
}

/* Muted / info — non-critical notice */
.gcm-alert--muted {
    --gcm-alert-line: var(--gcm-alert-muted-border);
    --gcm-alert-surface: var(--gcm-alert-muted-bg);
    --gcm-alert-ink: var(--gcm-alert-muted-fg);
    --gcm-alert-title: #475569;
    --gcm-alert-desc: var(--gcm-alert-muted-desc);
}

.gcm-alert--muted .gcm-alert__icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2379716B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E");
}

/* Compact — inline under chart */
.gcm-alert--compact {
    padding: 0.75rem 0.9rem;
    gap: 0.625rem;
    border-radius: var(--gcm-radius-md);
    margin-bottom: var(--gcm-spacing-sm);
}

.gcm-alert--compact .gcm-alert__icon {
    width: 1.125rem;
    height: 1.125rem;
    margin-top: 0.05rem;
}

.gcm-alert--compact .gcm-alert__message {
    font-size: 0.8125rem;
    line-height: 1.45;
    font-weight: 500;
    padding-top: 0;
}

/* Section-level banners (below tabs) */
.gcm-alert--section {
    margin-top: 0.5rem;
    margin-bottom: var(--gcm-spacing-md);
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 480px) {
    .gcm-alert--section {
        margin-bottom: var(--gcm-spacing-lg);
    }

    .gcm-alert {
        padding: 1.125rem 1.25rem;
    }
}

.gcm-chart-content > .gcm-chart-error.gcm-alert--compact {
    margin: 0 0 var(--gcm-spacing-sm) 0;
}

/* ── Charts Area ──────────────────────────────────────── */

.gcm-charts-area {
    margin-top: var(--gcm-spacing-lg);
}

/* ── Time Range Selector ─────────────────────────────── */

.gcm-time-range-selector {
    display: flex;
    gap: var(--gcm-spacing-xs);
    margin-bottom: var(--gcm-spacing-xl);
    flex-wrap: wrap;
}

.gcm-range-btn {
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
    padding: 5px 14px;
    border: 1px solid var(--gcm-border);
    border-radius: var(--gcm-radius-sm);
    background: var(--gcm-bg-primary);
    color: var(--gcm-text-secondary);
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.gcm-range-btn:hover {
    border-color: var(--gcm-primary);
    color: var(--gcm-primary);
    background: var(--gcm-bg-secondary);
}

.gcm-range-btn:focus-visible {
    outline: 2px solid var(--gcm-primary);
    outline-offset: 1px;
}

.gcm-range-active {
    background: var(--gcm-bg-secondary);
    color: var(--gcm-primary);
    border-color: var(--gcm-primary);
    font-weight: 600;
}

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

.gcm-chart-section {
    background: var(--gcm-bg-primary);
    border: 1px solid var(--gcm-border);
    border-radius: var(--gcm-radius-md);
    margin-bottom: var(--gcm-spacing-xl);
    overflow: hidden;
}

.gcm-chart-expand {
    display: flex;
    align-items: center;
    width: 100%;
    padding: var(--gcm-spacing-md) var(--gcm-spacing-lg);
    border: none;
    background: none;
    cursor: pointer;
    text-align: left;
    gap: var(--gcm-spacing-sm);
    transition: background 0.1s;
}

.gcm-chart-expand:hover {
    background: var(--gcm-bg-hover);
}

.gcm-chart-expand:focus {
    background: transparent;
    outline: none;
    box-shadow: none;
}

.gcm-chart-expand:focus-visible {
    outline: 2px solid var(--gcm-primary);
    outline-offset: -2px;
    background: transparent;
}

.gcm-chart-expand .gcm-chart-title {
    flex: 1;
}

.gcm-chart-preview {
    font-size: 16px;
    color: var(--gcm-text-muted);
}

.gcm-expand-icon {
    font-size: 16px;
    color: var(--gcm-text-muted);
    transition: transform 0.2s;
}

.gcm-chart-section:not(.gcm-chart-collapsed) .gcm-expand-icon {
    transform: rotate(180deg);
}

.gcm-chart-content {
    padding: 0 var(--gcm-spacing-lg) var(--gcm-spacing-lg);
}

.gcm-chart-content canvas {
    width: 100% !important;
    max-height: 300px;
}

/* ── Chart Microcopy ─────────────────────────────────── */

.gcm-chart-microcopy {
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 16px;
    font-style: normal;
    color: var(--gcm-text-muted);
    margin: var(--gcm-spacing-sm) 0 0;
    text-decoration: none;
}

/* ── Chart Loading & Error ───────────────────────────── */

.gcm-chart-loading .gcm-chart-content::before {
    content: 'Loading chart data…';
    display: block;
    text-align: center;
    padding: var(--gcm-spacing-lg);
    color: var(--gcm-text-muted);
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 16px;
}

/* ── Accessible Data Tables ──────────────────────────── */

.gcm-chart-data-table {
    margin-top: var(--gcm-spacing-md);
}

.gcm-chart-data-table summary {
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 16px;
    color: var(--gcm-primary);
    cursor: pointer;
    font-weight: 500;
}

.gcm-chart-data-table summary:hover {
    text-decoration: underline;
}

.gcm-chart-data-table summary:focus-visible {
    outline: 2px solid var(--gcm-primary);
    outline-offset: 2px;
    border-radius: var(--gcm-radius-sm);
}

.gcm-chart-data-table-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-top: var(--gcm-spacing-sm);
    margin-bottom: var(--gcm-spacing-xs);
}

.gcm-chart-data-table-title {
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 16px;
    color: var(--gcm-text-muted);
}

.gcm-chart-data-table-count {
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 16px;
    color: var(--gcm-text-muted);
}

.gcm-chart-data-table-scroll {
    max-height: 85vh;
    overflow-y: auto;
    border: 1px solid var(--gcm-border);
    border-radius: var(--gcm-radius-sm);
}

.gcm-chart-data-table table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 16px;
}

.gcm-chart-data-table th,
.gcm-chart-data-table td {
    padding: 4px 8px;
    text-align: left;
    border-bottom: 1px solid var(--gcm-border);
}

.gcm-chart-data-table th {
    font-weight: 600;
    color: var(--gcm-text-secondary);
    background: var(--gcm-bg-secondary);
    position: sticky;
    top: 0;
    z-index: 1;
}

/* ── Historical Notice (muted alert) ─────────────────── */

.gcm-chart-historical-notice.gcm-alert {
    margin-top: var(--gcm-spacing-xl);
    margin-bottom: var(--gcm-spacing-xl);
}

.gcm-chart-historical-notice .gcm-alert__description {
    font-size: 0.875rem;
}

.gcm-chart-historical-notice .gcm-chart-contact-link {
    margin-left: 0.125rem;
}

.gcm-chart-contact-link {
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--gcm-primary);
    text-decoration: none;
    font-weight: 500;
}

.gcm-chart-contact-link:hover {
    text-decoration: underline;
}

/* ── Loading State ──────────────────────────────────── */

.gcm-loading {
    opacity: 0.6;
    pointer-events: none;
}

/* ── Reduced Motion ──────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .gcm-chart-content canvas {
        animation: none !important;
    }
    .gcm-expand-icon {
        transition: none;
    }
    .gcm-range-btn,
    .gcm-tab,
    .gcm-chart-expand {
        transition: none;
    }
}

/* ── Responsive ────────────────────────────────────────── */

@media (max-width: 768px) {
    .gcm-dust-headline {
        grid-template-columns: 1fr;
    }

    .gcm-weather-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--gcm-spacing-sm);
    }

    .gcm-source-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .gcm-tabs {
        gap: 0;
    }

    .gcm-tab {
        font-size: 16px;
        padding: var(--gcm-spacing-sm);
    }

    .gcm-chart-section {
        border-radius: var(--gcm-radius-sm);
    }

    .gcm-chart-expand {
        padding: var(--gcm-spacing-sm) var(--gcm-spacing-md);
    }

    .gcm-chart-content {
        padding: 0 var(--gcm-spacing-sm) var(--gcm-spacing-md);
    }

    .gcm-time-range-selector {
        gap: 2px;
    }

    .gcm-range-btn {
        font-size: 16px;
        padding: 4px 8px;
    }
}

@media (max-width: 480px) {
    .gcm-weather-cards {
        grid-template-columns: 1fr;
    }
}

/* Shortcode condensed=true: apply mobile-style density at any viewport (widgets/sidebars) */
.gcm-dashboard.gcm-dashboard--condensed .gcm-dust-headline {
    grid-template-columns: 1fr;
}

.gcm-dashboard.gcm-dashboard--condensed .gcm-weather-cards {
    grid-template-columns: 1fr;
    gap: var(--gcm-spacing-sm);
}

.gcm-dashboard.gcm-dashboard--condensed .gcm-source-header {
    flex-direction: column;
    align-items: flex-start;
}

.gcm-dashboard.gcm-dashboard--condensed .gcm-tabs {
    gap: 0;
}

.gcm-dashboard.gcm-dashboard--condensed .gcm-tab {
    font-size: 16px;
    padding: var(--gcm-spacing-sm);
}

.gcm-dashboard.gcm-dashboard--condensed .gcm-chart-section {
    border-radius: var(--gcm-radius-sm);
}

.gcm-dashboard.gcm-dashboard--condensed .gcm-chart-expand {
    padding: var(--gcm-spacing-sm) var(--gcm-spacing-md);
}

.gcm-dashboard.gcm-dashboard--condensed .gcm-chart-content {
    padding: 0 var(--gcm-spacing-sm) var(--gcm-spacing-md);
}

.gcm-dashboard.gcm-dashboard--condensed .gcm-time-range-selector {
    gap: 2px;
}

.gcm-dashboard.gcm-dashboard--condensed .gcm-range-btn {
    font-size: 16px;
    padding: 4px 8px;
}