/* ===== Color Palette ===== */
:root,
[data-theme="light"] {
  --color-up: #2da44e;
  --color-degraded: #d4a017;
  --color-down: #cf222e;
  --color-nodata: #d0d7de;

  --color-bg: #f5f5f5;
  --color-bg-elevated: #ffffff;
  --color-surface: #f0f2f5;
  --color-text: #1f2328;
  --color-text-secondary: #656d76;
  --color-border: #d0d7de;
  --color-accent: #0033ff;
  --color-shadow: rgba(0, 0, 0, 0.12);

  /* Status banners */
  --banner-up-bg: #dafbe1;
  --banner-up-text: #116329;
  --banner-degraded-bg: #fff8c5;
  --banner-degraded-text: #6a5300;
  --banner-down-bg: #ffebe9;
  --banner-down-text: #82071e;

  /* Badges (same as banners in light) */
  --badge-up-bg: #dafbe1;
  --badge-up-text: #116329;
  --badge-degraded-bg: #fff8c5;
  --badge-degraded-text: #6a5300;
  --badge-down-bg: #ffebe9;
  --badge-down-text: #82071e;

  /* Tooltip */
  --tooltip-bg: #1f2328;
  --tooltip-text: #ffffff;
  --tooltip-secondary: #adb5bd;

  /* Tooltip status text (bright for dark tooltip bg) */
  --tooltip-text-up: #4ade80;
  --tooltip-text-degraded: #fbbf24;
  --tooltip-text-down: #f87171;
  --tooltip-text-nodata: #9ca3af;

  /* Sponsor button */
  --sponsor-btn-bg: #2a313c;
  --sponsor-btn-text: #ffffff;

  /* Theme switcher */
  --theme-switcher-bg: #e5e7eb;
  --theme-switcher-active-bg: #ffffff;
  --theme-switcher-icon: #656d76;
  --theme-switcher-active-icon: #0033ff;
}

[data-theme="dark"] {
  --color-up: #2ea043;
  --color-degraded: #b08800;
  --color-down: #da3633;
  --color-nodata: #374151;

  --color-bg: #1d1d20;
  --color-bg-elevated: #222225;
  --color-surface: #ffffff14;
  --color-text: #e4e4e7;
  --color-text-secondary: #9ca3af;
  --color-border: #374151;
  --color-accent: #4d6fff;
  --color-shadow: rgba(0, 0, 0, 0.3);

  /* Status banners */
  --banner-up-bg: #1a3a2a;
  --banner-up-text: #3fb950;
  --banner-degraded-bg: #3a3020;
  --banner-degraded-text: #e3b341;
  --banner-down-bg: #3a1a1a;
  --banner-down-text: #f85149;

  /* Badges */
  --badge-up-bg: #1a3a2a;
  --badge-up-text: #3fb950;
  --badge-degraded-bg: #3a3020;
  --badge-degraded-text: #e3b341;
  --badge-down-bg: #3a1a1a;
  --badge-down-text: #f85149;

  /* Tooltip (inverted in dark mode) */
  --tooltip-bg: #e4e4e7;
  --tooltip-text: #1d1d20;
  --tooltip-secondary: #4b5563;

  /* Tooltip status text (darker for light tooltip bg) */
  --tooltip-text-up: #16a34a;
  --tooltip-text-degraded: #ca8a04;
  --tooltip-text-down: #dc2626;
  --tooltip-text-nodata: #6b7280;

  /* Sponsor button */
  --sponsor-btn-bg: #374151;
  --sponsor-btn-text: #e4e4e7;

  /* Theme switcher */
  --theme-switcher-bg: #222225;
  --theme-switcher-active-bg: #374151;
  --theme-switcher-icon: #9ca3af;
  --theme-switcher-active-icon: #3B82F6;
}

/* System preference fallback (when no data-theme is set) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-up: #3fb950;
    --color-degraded: #d4a017;
    --color-down: #f85149;
    --color-nodata: #374151;

    --color-bg: #1d1d20;
    --color-bg-elevated: #222225;
    --color-surface: #ffffff14;
    --color-text: #e4e4e7;
    --color-text-secondary: #9ca3af;
    --color-border: #374151;
    --color-accent: #4d6fff;
    --color-shadow: rgba(0, 0, 0, 0.3);

    --banner-up-bg: #1a3a2a;
    --banner-up-text: #3fb950;
    --banner-degraded-bg: #3a3020;
    --banner-degraded-text: #e3b341;
    --banner-down-bg: #3a1a1a;
    --banner-down-text: #f85149;

    --badge-up-bg: #1a3a2a;
    --badge-up-text: #3fb950;
    --badge-degraded-bg: #3a3020;
    --badge-degraded-text: #e3b341;
    --badge-down-bg: #3a1a1a;
    --badge-down-text: #f85149;

    --tooltip-bg: #e4e4e7;
    --tooltip-text: #1d1d20;
    --tooltip-secondary: #4b5563;

    --tooltip-text-up: #16a34a;
    --tooltip-text-degraded: #ca8a04;
    --tooltip-text-down: #dc2626;
    --tooltip-text-nodata: #6b7280;

    --sponsor-btn-bg: #374151;
    --sponsor-btn-text: #e4e4e7;

    --theme-switcher-bg: #222225;
    --theme-switcher-active-bg: #374151;
    --theme-switcher-icon: #9ca3af;
    --theme-switcher-active-icon: #4d6fff;
  }
}

/* ===== Reset ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.5;
}

.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

/* ===== Header ===== */
header {
  margin-bottom: 2rem;
}

h1 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.back-link {
  display: inline-block;
  margin-bottom: 1rem;
  color: var(--color-text-secondary);
  text-decoration: none;
}

.back-link:hover {
  color: var(--color-accent);
}

.check-description {
  color: var(--color-text-secondary);
  margin-bottom: 0.5rem;
}

.overall-status {
  display: block;
  padding: 0.6rem 1rem;
  border-radius: 6px;
  font-weight: 600;
  margin-bottom: 0.5rem;
  text-align: center;
}

.status-banner-up { background: var(--banner-up-bg); color: var(--banner-up-text); }
.status-banner-degraded { background: var(--banner-degraded-bg); color: var(--banner-degraded-text); }
.status-banner-down { background: var(--banner-down-bg); color: var(--banner-down-text); }
.status-banner-nodata { background: var(--color-surface); color: var(--color-text-secondary); }

.last-checked {
  color: var(--color-text-secondary);
  font-size: 0.875rem;
  margin-bottom: 0.25rem;
}

.last-checked + .overall-status {
  margin-top: 0.5rem;
}

/* ===== Check rows ===== */
.check-row {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 0.75rem;
  background: var(--color-bg-elevated);
}

.check-row-link {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.15s;
}

.check-row-link:hover {
  box-shadow: 0 1px 3px var(--color-shadow);
}

.check-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.check-name {
  font-weight: 600;
  font-size: 0.95rem;
}

.check-note {
  color: var(--color-text-secondary);
  font-size: 0.8rem;
  margin-bottom: 0.4rem;
}

.check-status-badge {
  font-size: 0.75rem;
  padding: 0.15rem 0.5rem;
  border-radius: 12px;
  font-weight: 500;
  text-transform: uppercase;
}

.badge-up { background: var(--badge-up-bg); color: var(--badge-up-text); }
.badge-degraded { background: var(--badge-degraded-bg); color: var(--badge-degraded-text); }
.badge-down { background: var(--badge-down-bg); color: var(--badge-down-text); }
.badge-nodata { background: var(--color-surface); color: var(--color-text-secondary); }

/* ===== 90-day grid ===== */
.grid-90 {
  display: flex;
  gap: 2px;
  align-items: flex-end;
}

.grid-cell {
  flex: 1;
  height: 32px;
  border-radius: 2px;
  cursor: pointer;
  transition: opacity 0.1s;
  min-width: 0;
}

.grid-cell:hover {
  opacity: 0.7;
}

/* 90-day grid labels */
.grid-90-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  color: var(--color-text-secondary);
  margin-top: 0.25rem;
  padding: 0 calc(100% / 46 + 2px) 0 2px;
}

.grid-90-label-item {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.2;
  width: 0;
  overflow: visible;
  white-space: nowrap;
}

.cell-up { background: var(--color-up); }
.cell-degraded { background: var(--color-degraded); }
.cell-down { background: var(--color-down); }
.cell-nodata { background: var(--color-nodata); }
.cell-selected { outline: 2px solid var(--color-text); outline-offset: 1px; }

/* ===== Tooltip ===== */
.tooltip {
  position: fixed;
  background: var(--tooltip-bg);
  color: var(--tooltip-text);
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  font-size: 0.8rem;
  pointer-events: none;
  z-index: 100;
  white-space: nowrap;
}

.tooltip-date {
  font-weight: 600;
  margin-bottom: 0.15rem;
}

.tooltip-name {
  color: var(--tooltip-secondary);
  margin-bottom: 0.15rem;
}

.tooltip-detail {
  color: var(--tooltip-secondary);
}

.tooltip-checks-list {
  margin-top: 0.35rem;
  padding-top: 0.3rem;
  border-top: 1px solid color-mix(in srgb, var(--tooltip-secondary) 40%, transparent);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  white-space: normal;
}

.tooltip-check-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.75rem;
}

.tooltip-check-name {
  color: var(--tooltip-secondary);
}

.tooltip-check-status {
  font-weight: 600;
}

.text-up { color: var(--tooltip-text-up); }
.text-degraded { color: var(--tooltip-text-degraded); }
.text-down { color: var(--tooltip-text-down); }
.text-nodata { color: var(--tooltip-text-nodata); }

/* ===== Hourly grid (24 cells) ===== */
.grid-24 {
  display: flex;
  gap: 2px;
  align-items: flex-end;
}

.grid-24 .grid-cell {
  flex: 1;
  height: 24px;
}

.grid-24 .cell-latest {
  flex: 2;
}

.hour-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  color: var(--color-text-secondary);
  margin-top: 0.25rem;
  padding: 0 calc(100% / 13 + 2px) 0 2px;
}

.hour-label-item {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.2;
  width: 0;
  overflow: visible;
  white-space: nowrap;
}

.hour-label-shift {
  font-size: 0.6rem;
  opacity: 0.75;
}

/* ===== Multi-day grid (3D/7D/14D) ===== */
.multiday-grid {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.multiday-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.multiday-date {
  flex-shrink: 0;
  width: 66px;
  font-size: 0.7rem;
  color: var(--color-text-secondary);
  text-decoration: none;
  display: inline-flex;
  justify-content: flex-end;
  gap: 2px;
}

.multiday-dow {
  width: 1.3em;
  text-align: right;
  opacity: 0.7;
}

a.multiday-date:hover {
  color: var(--color-accent);
  text-decoration: underline;
}

.multiday-row .grid-24 {
  flex: 1;
  min-width: 0;
}

.multiday-hour-labels {
  margin-left: 72px;
  padding-right: calc((100% - 72px) / 13 + 2px);
}

/* ===== Chart ===== */
.chart-container {
  margin-top: 1rem;
  margin-bottom: 2rem;
}

.chart-canvas-area {
  position: relative;
  height: 160px;
}

.chart-canvas-area canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.15s;
}

.chart-inactive {
  opacity: 0;
  pointer-events: none;
}
.daily-content {
  transition: opacity 0.15s ease;
}
.daily-content-loading {
  opacity: 0.4;
  pointer-events: none;
}

.section-subheading {
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  margin-top: 1rem;
  color: var(--color-text-secondary);
}

/* ===== Detail page ===== */
.daily-detail {
  margin-top: 1.5rem;
}

.daily-detail-header {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.daily-detail-header .tz-switcher {
  align-self: flex-end;
}

.day-nav-group {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
}

.day-nav-group h2 {
  font-size: 1.1rem;
  margin-bottom: 0;
  flex: 1;
  text-align: center;
}

.tz-switcher {
  display: inline-flex;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
}

.tz-switcher button {
  padding: 0.2rem 0.65rem;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}

.tz-switcher button.tz-active {
  background: var(--color-text);
  color: var(--color-bg-elevated);
}

.tz-switcher button:hover:not(.tz-active) {
  background: var(--color-surface);
  color: var(--color-text);
}

.results-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.results-table th,
.results-table td {
  text-align: left;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--color-border);
}

.results-table th {
  background: var(--color-surface);
  font-weight: 600;
}

.loading {
  color: var(--color-text-secondary);
  padding: 1rem 0;
}

.no-data {
  color: var(--color-text-secondary);
  padding: 1rem 0;
}

/* ===== Collapsible info sections (About / Disclaimer) ===== */
.info-section {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  margin-bottom: 0.5rem;
  background: var(--color-surface);
  font-size: 0.8rem;
}

.info-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.6rem 1rem;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-align: left;
  gap: 0.5rem;
}

.info-section-header:hover {
  color: var(--color-text);
}

.info-section-body {
  padding: 0 1rem 0.75rem 1.5rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
}

.info-section-body ul {
  margin: 0;
  padding: 0;
  list-style: disc;
  padding-left: 1rem;
}

.info-section-body li {
  margin-bottom: 0.15rem;
}

.info-section-body li:last-child {
  margin-bottom: 0;
}

.info-section-body p {
  margin-top: 0.5rem;
}

.info-section-body a {
  color: var(--color-text-secondary);
}

.info-section-body a:hover {
  color: var(--color-accent);
}

.chevron {
  flex-shrink: 0;
  transition: transform 0.2s;
}

.chevron-up {
  transform: rotate(180deg);
}

/* ===== Info toggle button ===== */
.info-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--color-text-secondary);
  cursor: pointer;
  padding: 0.15rem;
  border-radius: 4px;
  transition: color 0.15s;
}

.info-toggle:hover {
  color: var(--color-text);
}

/* ===== Legend ===== */
.legend {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  align-items: center;
  margin-top: 0.75rem;
  margin-bottom: 0.25rem;
  font-size: 0.8rem;
  color: var(--color-text-secondary);
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.legend-color {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 2px;
}

.legend-criteria {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  text-align: right;
  padding-bottom: 0.5rem;
  line-height: 1.5;
}

.legend-criteria p + p {
  margin-top: 0.15rem;
}

.legend-info-toggle {
  margin-left: -4px;
}

/* ===== Compact current status grid ===== */
.current-status-section {
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
}

.current-status-section .overall-status {
  margin-top: 0;
  margin-bottom: 0.6rem;
}

.section-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.4rem;
}

.current-status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
  gap: 0.35rem;
}

.current-status-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.35rem 0.65rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-bg-elevated);
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.15s;
}

.current-status-item:hover {
  box-shadow: 0 1px 3px var(--color-shadow);
}

.current-status-item-name {
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.3;
}

/* ===== Latest cell in 90-day grid ===== */
.cell-latest {
  flex: 2;
  margin-left: 4px;
  border-radius: 2px;
}

/* ===== Section heading row with toggle ===== */
.section-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.section-heading-row .section-heading {
  margin-top: 0;
  margin-bottom: 0;
}

.tz-switcher-row {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.5rem;
}

/* ===== Section heading ===== */
.section-heading {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

/* ===== Day navigation buttons ===== */
.day-nav-btn {
  flex-shrink: 0;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 0.2rem 0.65rem;
  font-size: 0.9rem;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.day-nav-btn:hover:not(:disabled) {
  background: var(--color-surface);
  color: var(--color-text);
}

.day-nav-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

/* ===== Footer ===== */
footer {
  margin-top: 5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  font-size: 0.8rem;
  text-align: center;
}

footer a {
  color: var(--color-text-secondary);
}

footer a:hover {
  color: var(--color-accent);
}

.footer-support {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}

.sponsor-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 45px;
  width: 175px;
  border-radius: 9px;
  background: var(--sponsor-btn-bg);
  color: var(--sponsor-btn-text);
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
  transition: opacity 0.15s;
  flex-shrink: 0;
}

.sponsor-btn:hover {
  opacity: 0.88;
}

.bmc-btn {
  display: inline-block;
  height: 45px;
  flex-shrink: 0;
}

/* ===== Theme Switcher ===== */
.theme-switcher {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--theme-switcher-bg);
  border-radius: 9999px;
  padding: 3px;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

.theme-switcher button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 9999px;
  background: transparent;
  color: var(--theme-switcher-icon);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.theme-switcher button:hover {
  color: var(--color-text);
}

.theme-switcher button.theme-active {
  background: var(--theme-switcher-active-bg);
  color: var(--theme-switcher-active-icon);
  box-shadow: 0 1px 2px var(--color-shadow);
}

/* ===== Version History Popup ===== */
.version-history-wrapper {
  position: relative;
  display: inline-block;
}

.version-history-trigger {
  cursor: pointer;
  border-bottom: 1px dashed var(--color-text-secondary);
  transition: color 0.15s;
}

.version-history-trigger:hover {
  color: var(--color-text);
}

.version-history-popup {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: var(--tooltip-bg);
  color: var(--tooltip-text);
  border-radius: 6px;
  padding: 0.5rem 0;
  font-size: 0.8rem;
  z-index: 100;
  white-space: nowrap;
  max-height: 200px;
  overflow-y: auto;
  box-shadow: 0 2px 8px var(--color-shadow);
  display: flex;
  flex-direction: column;
}

.version-history-row {
  display: flex;
  gap: 1rem;
  padding: 0.25rem 0.75rem;
  align-items: baseline;
}

.version-history-ver {
  font-weight: 600;
  min-width: 4em;
}

.version-history-since {
  color: var(--tooltip-secondary);
  font-size: 0.75rem;
}

/* ===== Freshness Indicator (Last Checked) ===== */
.freshness-wrapper {
  position: relative;
  display: inline-block;
}

.freshness-trigger {
  cursor: pointer;
  border-bottom: 1px dashed currentColor;
  transition: color 0.15s;
}

.freshness-trigger:hover {
  filter: brightness(1.2);
}

.freshness-trigger.freshness-ok {
  color: var(--color-up);
}

.freshness-trigger.freshness-warn {
  color: var(--color-degraded);
}

.freshness-trigger.freshness-stale {
  color: var(--color-down);
}

.freshness-popup {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: var(--tooltip-bg);
  color: var(--tooltip-text);
  border-radius: 6px;
  padding: 0.35rem 0.75rem;
  font-size: 0.8rem;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  white-space: nowrap;
  box-shadow: 0 2px 8px var(--color-shadow);
}

.freshness-note {
  color: var(--color-text-secondary);
  font-size: 0.8rem;
}