/* DCMetrik interface foundation.
 * Component classes are public hooks shared by Dashboard and Billing Master.
 * Feature-specific geometry lives in styles.css and finance.css.
 */
:root {
  color-scheme: dark;
  --font-ui: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-data: ui-monospace, "SFMono-Regular", Consolas, monospace;
  --surface-page: #101b24;
  --surface-raised: #162630;
  --surface-secondary: #1c303b;
  --surface-inset: #12212b;
  --border-subtle: #334953;
  --border-strong: #647f8e;
  --text-primary: #e8eff3;
  --text-secondary: #bbcbd4;
  --text-muted: #a0b5c2;
  --action: #7bc5eb;
  --action-hover: #a6d9f1;
  --on-action: #10212c;
  --state-hover: #263e4b;
  --state-selected: #294b61;
  --status-success: #68d5a5;
  --status-success-bg: #1c3c33;
  --status-warning: #efbd62;
  --status-warning-bg: #3d3527;
  --status-danger: #ff9b9f;
  --status-danger-bg: #402b34;
  --status-neutral: #b7c6cf;
  --status-neutral-bg: #2c3e48;
  --chart-grid: #3e525e;
  --chart-estimate: #627786;
  --chart-estimate-line: #9aafbd;
  --chart-gpu: #74b9e5;
  --chart-storage: #e4b452;
  --chart-storage-ink: #edc774;
  --chart-bandwidth: #d698ce;
  --control-bg: #203542;
  --control-border: var(--border-strong);
  --radius-panel: 14px;
  --radius-control: 8px;
  --elevation-panel: 0 2px 6px rgb(0 0 0 / 9%);
  --elevation-overlay: 0 14px 44px rgb(0 0 0 / 32%);
  --overlay-scrim: rgb(5 15 22 / 68%);
  /* Stable aliases used by existing feature components and chart renderers. */
  --bg: var(--surface-page);
  --bg-accent: var(--surface-page);
  --panel: var(--surface-raised);
  --panel-border: var(--border-subtle);
  --text: var(--text-primary);
  --muted: var(--text-muted);
  --blue: var(--action);
  --green: var(--status-success);
  --yellow: var(--status-warning);
  --red: var(--status-danger);
  --danger: var(--status-danger);
  --shadow: var(--elevation-panel);
}
html[data-theme="light"] {
  color-scheme: light;
  --surface-page: #e1e7e7;
  --surface-raised: #f0f3f1;
  --surface-secondary: #e5ebe9;
  --surface-inset: #dce4e2;
  --border-subtle: #b5c3c2;
  --border-strong: #748e93;
  --text-primary: #21343e;
  --text-secondary: #3f555e;
  --text-muted: #4d646d;
  --action: #255f86;
  --action-hover: #194a69;
  --on-action: #f5f8f7;
  --state-hover: #d3e0e4;
  --state-selected: #c8dde8;
  --status-success: #186847;
  --status-success-bg: #cee4d9;
  --status-warning: #7b540b;
  --status-warning-bg: #eee2bd;
  --status-danger: #a43140;
  --status-danger-bg: #efd5d8;
  --status-neutral: #4b626d;
  --status-neutral-bg: #d9e2e5;
  --chart-grid: #b5c3c2;
  --chart-estimate: #b1bfca;
  --chart-estimate-line: #667e90;
  --chart-gpu: #2a699b;
  --chart-storage: #cf8b17;
  --chart-storage-ink: #775010;
  --chart-bandwidth: #964d88;
  --control-bg: #dce6e7;
  --elevation-panel: 0 1px 4px rgb(26 48 55 / 6%);
  --elevation-overlay: 0 14px 44px rgb(26 48 55 / 22%);
  --overlay-scrim: rgb(30 49 60 / 38%);
}

/* Document, typography and predictable focus treatment. */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; min-height: 100dvh; font-family: var(--font-ui); background: var(--surface-page); color: var(--text); line-height: 1.45; }
:where(button,input,select,textarea) { font: inherit; color: inherit; }
:where(button,select,summary) { cursor: pointer; }
:where(button,input,select,textarea,a,summary,[tabindex]):focus-visible { outline: 2px solid var(--action); outline-offset: 3px; }
:where(button,input,select):disabled { cursor: not-allowed; opacity: .55; }
:where(input[type="checkbox"],input[type="radio"]) { accent-color: var(--action); }
h1,h2,h3,p { margin: 0; }
h1 { font-size: clamp(1.75rem,3vw,2.75rem); line-height: 1.15; letter-spacing: -.025em; }
h2 { font-size: 1.3rem; line-height: 1.3; letter-spacing: -.015em; }
h3 { font-size: 1rem; }
:where(.eyebrow,.hero-copy,.muted,.section-meta,.machine-submeta,.modal-stats) { color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0; }
.hidden { display: none !important; }
.app-shell { max-width: 1440px; margin-inline: auto; padding: clamp(12px,1.6vw,22px); }
.dashboard { position: relative; display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 18px; }
.dashboard-section-group { display: contents; }
.panel { min-width: 0; grid-column: span 6; padding: 20px; border: 1px solid var(--panel-border); border-radius: var(--radius-panel); background: var(--panel); box-shadow: var(--elevation-panel); }
.panel.wide { grid-column: 1 / -1; }
.hero { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 18px; padding: 22px; background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius-panel); box-shadow: var(--elevation-panel); }
.panel-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.panel-title-row > * { min-width: 0; }
.section-meta { font-size: 12px; text-align: end; line-height: 1.5; }
:is(.hero-meta,.earnings-nav,.trend-range,.settings-inline-controls,.modal-nav-group,.reports-nav-group) { display: flex; align-items: center; gap: 8px; }
.hero-meta { flex-wrap: wrap; justify-content: end; }
.machine-interaction-hint { margin-block: 7px 12px; color: var(--muted); font-size: 13px; }
.machine-filter-meta { margin-top: 4px; }

/* Reusable controls, selection groups and badges. */
:is(.settings-button,.range-button,.nav-button,.filter-reset,.settings-inline-button) {
  min-height: 34px; padding: 6px 12px; border: 1px solid var(--control-border); border-radius: var(--radius-control);
  color: var(--text); background: var(--control-bg); font: inherit; font-size: 13px; line-height: 1.35;
}
:is(.settings-button,.range-button,.nav-button,.filter-reset,.settings-inline-button):hover:not(:disabled) { border-color: var(--action); background: var(--state-hover); }
:is(.range-button,.filter-reset).active { background: var(--state-selected); color: var(--action); border-color: var(--action); }
.nav-button { width: 34px; height: 34px; padding: 0; flex: 0 0 auto; }
:is(.machine-view-tabs,.density-toggle,.modal-tabs) { display: inline-flex; gap: 3px; padding: 3px; background: var(--surface-inset); border: 1px solid var(--border-subtle); border-radius: 10px; }
:is(.machine-view-tab,.density-button,.modal-tab) { border: 1px solid transparent; border-radius: 7px; padding: 6px 11px; color: var(--muted); background: transparent; font: inherit; font-size: 13px; line-height: 1.35; }
:is(.machine-view-tab,.density-button,.modal-tab):hover { color: var(--text); background: var(--state-hover); }
:is(.machine-view-tab,.density-button,.modal-tab).active { color: var(--action); background: var(--state-selected); border-color: var(--border-subtle); }
:is(.health-badge,.util-chip,.status-pill,.dc-pill,.listed-pill,.report-badge,.summary-badge,.modal-header-verified) {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 3px 8px; border: 1px solid transparent;
  border-radius: 6px; font-size: 11px; font-weight: 600; line-height: 1.35; color: var(--status-neutral); background: var(--status-neutral-bg); white-space: nowrap;
}
.health-badge { padding: 5px 10px; font-size: 12px; }
:is(.health-badge.healthy,.util-chip.high,.status-pill.online,.listed-pill,.summary-badge.realized,.summary-badge.healthy,.modal-header-verified.verified) { color: var(--status-success); background: var(--status-success-bg); }
:is(.health-badge.stale,.health-badge.degraded,.util-chip.medium,.summary-badge.estimated,.summary-badge.degraded,.modal-header-verified.unverified) { color: var(--status-warning); background: var(--status-warning-bg); }
:is(.util-chip.low,.status-pill.offline) { color: var(--status-danger); background: var(--status-danger-bg); }
:is(.health-badge.polling,.dc-pill,.summary-badge.info) { color: var(--action); background: var(--state-selected); }
.dc-pill { border-color: var(--action); }
.summary-badge { margin-inline-start: 5px; font-size: 10px; font-style: normal; vertical-align: middle; text-transform: none; }
.compare-up,.timeline-good,.modal-delta-up { color: var(--green); }
.compare-down,.timeline-warn,.modal-delta-down { color: var(--yellow); }
.compare-flat,.timeline-neutral,.modal-delta-flat { color: var(--muted); }

/* Dense data views keep all columns available in a local scroll container. */
.table-wrap { min-width: 0; margin-top: 16px; overflow: auto; }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th,td { padding: 11px 12px; text-align: start; vertical-align: middle; border-bottom: 1px solid var(--panel-border); }
th { position: sticky; top: 0; z-index: 2; font-size: 12px; font-weight: 600; color: var(--muted); background: var(--surface-secondary); }
th[data-sort] { cursor: pointer; user-select: none; }
th[data-sort]:hover { color: var(--action); }
th.sort-asc::after { content: " ↑"; }
th.sort-desc::after { content: " ↓"; }
.machines-scroll { max-height: 80dvh; border: 1px solid var(--panel-border); border-radius: 10px; scrollbar-width: thin; }
.machine-hostname-cell,.machine-gpu-cell { display: grid; gap: 2px; }
.machine-submeta { font-size: 11px; line-height: 1.4; }
.machine-row { cursor: pointer; }
@media(hover:hover) and (pointer:fine){.machine-row:hover { background: var(--state-hover); }}
:is(.breakdown-gpus-col,.breakdown-num-col) { text-align: end; white-space: nowrap; }
:is(.dc-col,.dc-cell,.listed-col,.listed-cell,.maint-col,.maint-cell) { text-align: center; width: 48px; white-space: nowrap; padding-inline: 6px; }
.machine-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-block: 14px 10px; }
.machine-filters > * { flex-shrink: 0; }
:is(.filter-input,.filter-select,.settings-input) { min-width: 0; min-height: 34px; padding: 7px 10px; border: 1px solid var(--control-border); border-radius: var(--radius-control); background: var(--control-bg); color: var(--text); font: inherit; font-size: 13px; }
.filter-input { flex: 1 1 180px; }
.filter-input-narrow { flex: 0 1 130px; width: 130px; }
.filter-select { min-width: 108px; }
.filter-toggle { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 5px 9px; border: 1px solid var(--control-border); border-radius: var(--radius-control); background: var(--control-bg); font-size: 12px; white-space: nowrap; }
.filter-toggle input { margin: 0; }
.filter-toggle-icon { justify-content: center; }
#machine-filters .filter-toggle-warning {color:var(--yellow);border-color:color-mix(in srgb,var(--yellow) 45%,var(--control-border));}
#machine-filters .filter-toggle-warning input {accent-color:var(--yellow);}
#machine-filters .filter-toggle-warning:has(input:checked) {background:var(--status-warning-bg);border-color:var(--yellow);}
.machine-filter-icon {width:16px;height:16px;flex-shrink:0;}

.machine-filter-chip-row,.machine-filter-chip-list { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.machine-filter-chip-row { margin-block: 8px; }
.machine-filter-summary,.machines-empty-state { color: var(--muted); font-size: 12px; }
.machines-empty-state { margin-block: 14px; }
.machine-filter-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border: 1px solid var(--action); border-radius: 6px; background: var(--state-selected); color: var(--action); font: inherit; font-size: 12px; }
.machine-filter-chip-close { font-size: 16px; line-height: 1; }
.gpu-slot { display: inline-flex; align-items: center; justify-content: center; width: 21px; height: 21px; margin-inline-end: 3px; border: 1px solid var(--border-strong); border-radius: 5px; font-size: 11px; }
.gpu-slot.occupied { color: var(--green); background: var(--status-success-bg); border-color: var(--green); }
.gpu-slot.free { color: var(--muted); background: var(--surface-inset); }
.price-cell,.delta-cell { display: inline-flex; align-items: center; gap: 6px; }
.price-chip { display: inline-grid; place-items: center; min-width: 17px; height: 17px; border-radius: 5px; font-size: 11px; line-height: 1; background: var(--status-neutral-bg); color: var(--muted); }
:is(.price-up,.delta-up) { color: var(--green); background: var(--status-success-bg); }
:is(.price-down,.delta-down) { color: var(--red); background: var(--status-danger-bg); }
.maint-checkbox { width: 15px; height: 15px; }
.report-badge { cursor: pointer; }
.report-badge.changed { color: var(--yellow); border-color: var(--yellow); background: var(--status-warning-bg); }
tr.low-reliability,tr.machine-unverified { background: color-mix(in srgb,var(--status-warning-bg) 65%,var(--panel)); }
tr.machine-error,tr.high-temperature { background: color-mix(in srgb,var(--status-danger-bg) 65%,var(--panel)); }

/* Numerical summaries and charts. */
.summary-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(130px,1fr)); gap: 12px; margin-top: 16px; }
.summary-compare-grid { display: none; }
.stat-card,.modal-summary-card { min-width: 0; position: relative; padding: 13px 14px; border: 1px solid var(--panel-border); border-radius: 10px; background: var(--surface-secondary); }
.stat-card { min-height: 92px; overflow: hidden; }
.stat-card > span,.modal-summary-card > span { display: block; color: var(--muted); margin-bottom: 6px; font-size: 12px; }
.stat-card > strong { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.stat-compare { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 14px; background: var(--surface-secondary); opacity: 0; pointer-events: none; }
:is(.stat-card-compare,.modal-summary-card-compare):is(:hover,:focus-within) .stat-compare { opacity: 1; }
.stat-compare-label { color: var(--muted); font-size: 11px; }
.stat-compare-value { font-size: 1.3rem; }
.stat-compare-pct { font-size: 11px; }
.trend-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin-top: 16px; }
.trend-card { min-width: 0; padding: 14px; border: 1px solid var(--panel-border); border-radius: 11px; background: var(--surface-inset); }
.trend-card-header { display: flex; align-items: start; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.trend-card-header > div { display: grid; gap: 4px; min-width: 0; }
.trend-select { min-width: 130px; max-width: 100%; }
.trend-chart { display: block; width: 100%; height: 180px; cursor: crosshair; }
.trend-line,.chart-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chart-line { stroke: var(--action); }
.chart-area { fill: var(--action); fill-opacity: .13; }
.trend-axis line,.chart-axis line,.chart-axis path { stroke: var(--chart-grid); }
.trend-axis line { stroke-dasharray: 2 4; }
:is(.trend-axis,.trend-legend,.chart-axis) text,.chart-empty { fill: var(--muted); font: 11px var(--font-ui); }
.chart-annotation text,.chart-tooltip-time,.chart-tooltip-value { fill: var(--text); font: 11px var(--font-ui); }
.chart-tooltip-time { fill: var(--muted); }
.chart-tooltip-box { fill: var(--surface-raised); stroke: var(--border-strong); }
.chart-crosshair { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 4; }
.chart-hover-dot,.chart-annotation-dot { stroke: var(--surface-inset); stroke-width: 2; }
.chart-annotation-dot { fill: var(--yellow); }
.reliability-line { stroke: var(--green); }
.reliability-point { fill: var(--green); stroke: var(--surface-inset); stroke-width: 2; }
.earnings-header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-top: 14px; }
.earnings-total { font-size: 1.75rem; color: var(--green); font-weight: 700; }
.earnings-avg { font-size: 13px; }
.hourly-chart { display: flex; align-items: end; gap: 4px; height: 200px; margin-top: 16px; padding-top: 22px; }
.hour-bar-wrap { display: flex; flex: 1 1 0; min-width: 0; height: 100%; flex-direction: column; align-items: center; }
.hour-bar-track { position: relative; display: flex; flex: 1; align-items: end; width: 100%; }
.hour-bar { position: relative; width: 100%; min-height: 2px; max-height: 100%; align-self: end; border-radius: 3px 3px 0 0; background: var(--chart-gpu); }
.hour-bar.future { background: var(--chart-estimate); }
.hour-label { margin-top: 6px; font-size: 10px; color: var(--muted); }
.hour-amount { margin-bottom: 4px; font-size: 10px; color: var(--text); opacity: 0; }
.hour-bar-wrap:is(:hover,:focus-within) .hour-amount { opacity: 1; }

/* Informational overlays keep an opaque surface and one text hierarchy. */
.breakdown-metric-button,.breakdown-gpu-filter { padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: inherit; }
.breakdown-gpu-filter:is(:hover,[aria-pressed="true"]) { color: var(--action); text-decoration: underline; text-underline-offset: 3px; }
.breakdown-price-cell { display: flex; justify-content: end; }
.market-util-cell,.market-price-cell { cursor: help; }
.market-tooltip { position: fixed; z-index: 120; min-width: 240px; max-width: 320px; padding: 13px 15px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface-raised); color: var(--text); box-shadow: var(--elevation-overlay); pointer-events: none; }
.market-tooltip-card { display: grid; gap: 8px; }
.market-tooltip-title { font-size: 14px; font-weight: 700; }
.market-tooltip-subtitle,.market-tooltip-note,.market-tooltip-label { color: var(--muted); font-size: 12px; }
.market-tooltip-grid { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: baseline; gap: 4px 12px; }
.market-tooltip-value { text-align: end; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.market-tooltip-segment-section { padding-top: 8px; border-top: 1px solid var(--panel-border); }
.market-tooltip-table-wrap { overflow-x: auto; }
.market-tooltip-table :is(th,td) { padding: 5px; font-size: 11px; text-align: end; white-space: nowrap; }
.market-tooltip-table :is(th,td):first-child { text-align: start; }
.warning-banner,.modal-error,.modal-maintenance,.modal-live-note { grid-column: 1 / -1; padding: 12px 14px; border: 1px solid var(--status-warning); border-radius: 9px; color: var(--yellow); background: var(--status-warning-bg); font-size: 13px; overflow-wrap: anywhere; }
.info-banner,.modal-live-note { color: var(--action); background: var(--state-selected); border-color: var(--action); }
.modal-error { color: var(--red); background: var(--status-danger-bg); border-color: var(--red); }
:is(.modal-error,.modal-maintenance,.modal-live-note) { margin-bottom: 12px; }
.modal-maintenance { white-space: pre-wrap; }
.loading-state { color: var(--muted); }
.loading-state:is(.modal-live-note,.report-message) { border-style: dashed; }
.dashboard-toast { position: fixed; right: 18px; bottom: 18px; z-index: 140; max-width: calc(100vw - 36px); padding: 10px 14px; border: 1px solid var(--green); border-radius: 8px; background: var(--surface-raised); color: var(--green); box-shadow: var(--elevation-overlay); opacity: 0; pointer-events: none; transition: opacity 120ms ease; }
.dashboard-toast.visible { opacity: 1; }
.alerts-list { display: grid; gap: 10px; margin-top: 14px; }
.alert-item { display: flex; justify-content: space-between; align-items: start; gap: 12px; padding: 12px 14px; background: var(--surface-secondary); border: 1px solid var(--panel-border); border-inline-start: 3px solid var(--action); border-radius: 8px; font-size: 13px; }
.alert-item.warning { border-inline-start-color: var(--yellow); }
.alert-item:is(.error,.critical) { border-inline-start-color: var(--red); }
.alert-item p { margin-top: 4px; color: var(--muted); overflow-wrap: anywhere; }
.alert-item time { color: var(--muted); font-size: 11px; white-space: nowrap; }
.section-placeholder { display: grid; place-items: center; min-height: 110px; padding: 18px; background: var(--surface-inset); border: 1px dashed var(--border-strong); border-radius: 9px; text-align: center; }

/* Dialog shell: the heading stays put; only the body scrolls. */
.modal-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; background: var(--overlay-scrim); }
.modal-content { display: flex; flex-direction: column; width: min(100%,780px); max-height: min(94dvh,960px); min-height: 0; overflow: hidden; background: var(--surface-raised); border: 1px solid var(--border-strong); border-radius: var(--radius-panel); box-shadow: var(--elevation-overlay); }
.modal-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 18px; border-bottom: 1px solid var(--panel-border); background: var(--surface-secondary); }
.modal-header h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; min-width: 0; font-size: 17px; }
.modal-title-row,.reports-modal-title-row { display: flex; align-items: center; justify-content: space-between; flex: 1; gap: 12px; min-width: 0; }
.modal-nav-group,.reports-nav-group { flex-shrink: 0; }
.modal-header-ip,.modal-header-id { border: 0; padding: 0; background: transparent; color: var(--muted); font: inherit; font-size: 13px; }
.modal-header-ip:hover,.modal-header-id:hover { color: var(--action); text-decoration: underline; }
.modal-header-ip.copied,.modal-header-id.copied { color: var(--green); }
.modal-header-gpu { font-size: 13px; font-weight: 500; }
.modal-close { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 6px; color: var(--muted); background: transparent; font-size: 24px; line-height: 1; }
.modal-close:hover { color: var(--text); background: var(--state-hover); }
.modal-body { min-height: 0; flex: 1; overflow: auto; overscroll-behavior: contain; padding: 18px; }
.modal-summary-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(125px,1fr)); gap: 10px; margin-bottom: 14px; }
.modal-summary-section-title { grid-column: 1 / -1; color: var(--muted); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; }
.modal-summary-card strong { font-size: 16px; font-variant-numeric: tabular-nums; }
.modal-summary-card > span:only-child { color: var(--text); margin: 0; }
.modal-summary-card-compare { overflow: hidden; min-height: 82px; }
.modal-inline-value { display: inline-flex; flex-direction: column; align-items: start; gap: 3px; }
.modal-delta-text { font-size: 11px; }
.modal-earnings-status,.modal-timeline { padding: 12px; margin-bottom: 14px; border: 1px solid var(--panel-border); border-radius: 9px; background: var(--surface-inset); }
.earnings-status-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 4px; font-size: 13px; }
.earnings-status-line,.timeline-item p { color: var(--muted); font-size: 12px; }
.modal-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.modal-stats { font-size: 12px; }
.modal-tabs { margin-bottom: 16px; }
.modal-tab-panel { display: none; }
.modal-tab-panel.active { display: block; }
.modal-chart-title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.modal-chart-title { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; margin-block: 16px 8px; }
.modal-chart-note { color: var(--muted); font-size: 11px; text-align: end; }
.modal-chart-wrap { position: relative; width: 100%; height: 200px; border: 1px solid var(--panel-border); border-radius: 9px; background: var(--surface-inset); }
.modal-chart-wrap svg { cursor: crosshair; }
.modal-timeline-title { margin-bottom: 8px; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.modal-timeline-list { display: grid; gap: 10px; }
.timeline-item { display: grid; gap: 3px; }
.timeline-item time { color: var(--muted); font-size: 11px; }
.timeline-item strong { font-size: 13px; }
.reports-modal-content { max-height: 90dvh; }
.reports-modal-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--panel-border); }
.report-problem { min-width: 0; font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
.report-message-wrap { height: min(50dvh,480px); overflow: auto; }
.report-message { margin: 0 0 10px; padding: 12px; border: 1px solid var(--panel-border); border-radius: 9px; background: var(--surface-inset); color: var(--text); font: 12px/1.6 var(--font-data); white-space: pre-wrap; overflow-wrap: anywhere; }
.settings-inline-button-warn { color: var(--yellow); border-color: var(--yellow); }
.settings-inline-button-danger { color: var(--red); background: var(--status-danger-bg); border-color: var(--red); }

@media (max-width: 980px) {
  .dashboard > .panel,.dashboard-section-group > .panel { grid-column: 1 / -1; }
  .trend-grid { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 640px) {
  .panel,.hero { padding: 14px; }
  .panel-title-row { flex-wrap: wrap; align-items: start; }
  .panel-title-row .section-meta { text-align: start; }
  .modal-backdrop { padding: 8px; }
  .modal-content { max-height: calc(100dvh - 16px); }
  .modal-header,.modal-body { padding: 14px; }
  .modal-title-row { flex-wrap: wrap; }
  .alert-item { flex-direction: column; gap: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .dashboard-toast { transition: none; }
  .hour-bar,.month-forecast-bar { transition: none; }
}

/* Shared, opt-in section controls. Navigation, notices and forms keep their own behavior. */
[data-section-collapse] > .section-collapse-heading {
  display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;cursor:pointer;
}
.section-collapse-heading > :first-child {min-width:0;}
button.section-collapse-toggle {
  margin-inline-start:auto;flex:0 0 auto;align-self:flex-start;min-height:34px;
  padding:7px 11px;font-size:12px;line-height:1.4;white-space:nowrap;
  color:var(--action);background:var(--surface-inset);border:1px solid var(--border-subtle);border-radius:8px;
}
button.section-collapse-toggle:hover {background:var(--state-hover);border-color:var(--action);}
button.section-collapse-toggle:focus-visible {outline:2px solid var(--action);outline-offset:3px;}
[data-section-collapse].section-is-collapsed {align-self:start;min-height:0;}
.section-is-collapsed > :not(.section-collapse-heading):not([data-section-collapse-keep]) {display:none!important;}
.section-is-collapsed > .section-collapse-heading {margin-bottom:0;}
@media(max-width:620px){button.section-collapse-toggle{min-height:40px;}}