/*
  Nathanael Infra — Statuspage Custom CSS v3
  Verified against live page source for history + uptime pages
*/

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=DM+Mono:wght@400;500&display=swap');
@import url('https://lore.dpaste.org/g-fonts/gateway-primary-font.css');

/* ─── Design tokens ─── */
:root {
  --brand:      #00E5FF;
  --brand-dim:  rgba(0,229,255,0.1);
  --bg:         #090b0e;
  --bg2:        #0e1117;
  --surface:    rgba(255,255,255,0.03);
  --surface-h:  rgba(255,255,255,0.055);
  --border:     rgba(255,255,255,0.08);
  --border-h:   rgba(255,255,255,0.13);
  --text:       #dde0ea;
  --text2:      #8a90a2;
  --text3:      #505668;
  --green:      #00E07A;
  --red:        #ff4d4d;
  --yellow:     #fbbf24;
  --blue:       #60a5fa;
  --blue-dim:   rgba(96,165,250,0.1);
  --orange:     #fb923c;
  --font:       "Gotham SSm A","Gotham SSm B","DM Sans",system-ui,sans-serif;
  --mono:       "DM Mono","SF Mono",monospace;
}

/* ─── Base ─── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font) !important;
  background: var(--bg) !important;
  color: var(--text) !important;
  -webkit-font-smoothing: antialiased;
}

/* Override Statuspage's own link color rule (set to #000000 in theme) */
body.status a { color: var(--brand) !important; }
body.status a:hover { color: var(--brand) !important; text-decoration: none; }

hr {
  border: none !important;
  border-top: 1px solid var(--border) !important;
  margin: 24px 0 !important;
}

/* ═══════════════════════════════════════════
   LAYOUT — all three pages
   ═══════════════════════════════════════════ */

/* Main status page content wrapper */
.layout-content.status.status-index.starter {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 32px !important;
}

/* History + Uptime: the outer wrapper */
.layout-content.status.status-full-history.starter {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

/* History + Uptime: inner .container */
.layout-content.status.status-full-history .container,
.layout-content.status.status-full-history .history-container {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 32px !important;
}

/* ═══════════════════════════════════════════
   HISTORY NAV TABS
   Actual DOM: .history-nav > ul > li > a.button / a.button.current
   ═══════════════════════════════════════════ */

.history-nav {
  border: none !important;
  border-bottom: 1px solid var(--border) !important;
  margin: 28px 0 32px !important;
  padding: 0 !important;
  background: transparent !important;
}

.history-nav ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  gap: 0 !important;
}

.history-nav ul li { margin: 0 !important; padding: 0 !important; }

.history-nav a.button,
.layout-content.status.status-full-history .history-nav a {
  font-family: var(--mono) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--text3) !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  padding: 10px 20px !important;
  margin-bottom: -1px !important;
  display: inline-block !important;
  text-decoration: none !important;
  transition: color 0.15s !important;
  border-radius: 0 !important;
}

.history-nav a.button:hover {
  color: var(--text2) !important;
  background: transparent !important;
}

/* Active tab — overrides Statuspage's white background set in theme */
.history-nav a.button.current,
.layout-content.status.status-full-history .history-nav a.current {
  color: var(--brand) !important;
  background: transparent !important;
  border-bottom: 2px solid var(--brand) !important;
}

/* ═══════════════════════════════════════════
   PAGE STATUS BANNER (main page)
   ═══════════════════════════════════════════ */

.page-status {
  margin: 32px 0 24px !important;
  padding: 22px 24px !important;
  border-radius: 0 !important;
  border-width: 1px !important;
  border-style: solid !important;
  position: relative;
  overflow: hidden;
}
.page-status::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.page-status.status-none {
  background: rgba(0,224,122,0.04) !important;
  border-color: rgba(0,224,122,0.22) !important;
}
.page-status.status-none::before {
  background: radial-gradient(ellipse 55% 70% at 0% 50%, rgba(0,224,122,0.07), transparent);
}
.page-status.status-none h2.status { color: var(--green) !important; }
.page-status.status-maintenance {
  background: rgba(96,165,250,0.04) !important;
  border-color: rgba(96,165,250,0.22) !important;
}
.page-status.status-maintenance::before {
  background: radial-gradient(ellipse 55% 70% at 0% 50%, rgba(96,165,250,0.07), transparent);
}
.page-status.status-maintenance h2.status { color: var(--blue) !important; }
.page-status.status-critical {
  background: rgba(255,77,77,0.04) !important;
  border-color: rgba(255,77,77,0.22) !important;
}
.page-status.status-minor {
  background: rgba(251,191,36,0.04) !important;
  border-color: rgba(251,191,36,0.22) !important;
}
.page-status h2.status {
  font-family: var(--font) !important;
  font-size: 21px !important;
  font-weight: 500 !important;
  letter-spacing: -0.015em !important;
  color: var(--text) !important;
  margin: 0 !important;
}
.page-status .last-updated-stamp {
  font-family: var(--mono) !important;
  font-size: 11px !important;
  color: var(--text3) !important;
  letter-spacing: 0.04em !important;
  display: block;
  margin-top: 6px;
}

/* ═══════════════════════════════════════════
   COMPONENT GROUPS
   ═══════════════════════════════════════════ */

.components-section { margin-top: 0 !important; }
.components-container.one-column { gap: 0 !important; }

.component-container.is-group {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 0 !important;
  margin-bottom: 8px !important;
  padding: 0 !important;
  overflow: hidden;
  transition: border-color 0.2s;
}
.component-container.is-group:hover { border-color: var(--border-h) !important; }

.component-inner-container[data-js-hook="component-group-opener"] {
  background: rgba(255,255,255,0.025) !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 0 !important;
  padding: 14px 20px !important;
  cursor: pointer;
}
.component-inner-container[data-js-hook="component-group-opener"]:hover {
  background: rgba(255,255,255,0.04) !important;
}

.component-inner-container.showcased {
  padding: 12px 20px !important;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  border-radius: 0 !important;
}
.child-components-container .component-inner-container {
  padding: 11px 20px 11px 36px !important;
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
  border-radius: 0 !important;
}
.component-inner-container:last-child,
.child-components-container .component-inner-container:last-child { border-bottom: none !important; }
.component-inner-container.showcased:hover,
.child-components-container .component-inner-container:hover { background: var(--surface-h) !important; }

.component-inner-container .name {
  font-size: 13.5px !important;
  font-weight: 400 !important;
  color: var(--text) !important;
}
.component-status {
  font-family: var(--mono) !important;
  font-size: 11px !important;
  color: var(--text3) !important;
  letter-spacing: 0.03em;
}
.component-inner-container.status-blue .component-status {
  color: var(--blue) !important;
  background: var(--blue-dim) !important;
  padding: 2px 8px !important;
  border-radius: 0 !important;
}
.icon-indicator { font-size: 13px !important; }
.components-container .component-inner-container.status-green .icon-indicator { color: var(--green) !important; }
.components-container .component-inner-container.status-blue .icon-indicator  { color: var(--blue) !important; }
.components-container .component-inner-container.status-red .icon-indicator   { color: var(--red) !important; }
.components-container .component-inner-container.status-yellow .icon-indicator { color: var(--yellow) !important; }
.components-container .component-inner-container.status-orange .icon-indicator { color: var(--orange) !important; }

.group-parent-indicator { color: var(--text3) !important; font-size: 10px !important; }

button.tooltip-base.tool {
  width: 16px !important; height: 16px !important; min-width: 16px !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: 1px solid var(--border-h) !important;
  color: var(--text3) !important;
  font-size: 9px !important;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 !important; line-height: 14px !important;
  transition: all 0.15s;
}
button.tooltip-base.tool:hover {
  background: var(--brand-dim) !important;
  border-color: rgba(0,229,255,0.3) !important;
  color: var(--brand) !important;
}
button.status-icon-button { background: transparent !important; border: none !important; min-width: auto !important; }

/* ═══════════════════════════════════════════
   UPTIME BARS
   ═══════════════════════════════════════════ */

.shared-partial.uptime-90-days-wrapper { margin-top: 8px !important; }
.availability-time-line-graphic { border-radius: 0 !important; opacity: 0.85; }

.legend { margin-top: 5px !important; display: flex; align-items: center; }
.legend .legend-item { font-size: 11px !important; color: var(--text3) !important; font-family: var(--mono) !important; }
.legend .legend-item.legend-item-uptime-value { color: var(--text2) !important; font-weight: 500 !important; }
.layout-content.status .shared-partial.uptime-90-days-wrapper .legend .spacer {
  background: var(--border) !important; opacity: 0.7 !important; height: 1px; flex: 1; margin: 0 8px;
}
.layout-content.status .shared-partial.uptime-90-days-wrapper .legend .legend-item {
  color: var(--text3) !important; opacity: 1 !important;
}

.components-uptime-link, .shared-partial.uptime-90-days-wrapper .components-uptime-link {
  font-size: 12px !important; color: var(--text3) !important;
  margin-bottom: 16px !important; display: block; font-family: var(--mono) !important;
}
.components-uptime-link a {
  color: var(--text2) !important;
  border-bottom: 1px solid var(--border); padding-bottom: 1px;
}
.components-uptime-link a:hover { color: var(--brand) !important; border-color: var(--brand) !important; }

/* ═══════════════════════════════════════════
   COMPONENT STATUS LEGEND
   ═══════════════════════════════════════════ */

.component-statuses-legend {
  margin: 16px 0 32px !important;
  padding: 13px 18px !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 0 !important;
  font-size: 12px !important;
  font-family: var(--mono) !important;
  display: flex; flex-wrap: wrap; gap: 10px 20px;
}
.component-statuses-legend .legend-item.status-green  { color: var(--green) !important; }
.component-statuses-legend .legend-item.status-red    { color: var(--red) !important; }
.component-statuses-legend .legend-item.status-yellow { color: var(--yellow) !important; }
.component-statuses-legend .legend-item.status-blue   { color: var(--blue) !important; }
.component-statuses-legend .legend-item.status-orange { color: var(--orange) !important; }

/* ═══════════════════════════════════════════
   PAST INCIDENTS (main page)
   ═══════════════════════════════════════════ */

.incidents-list.format-expanded h2.no-link,
.incidents-list h2 {
  font-family: var(--mono) !important; font-size: 11px !important; font-weight: 500 !important;
  letter-spacing: 0.08em !important; text-transform: uppercase !important;
  color: var(--text3) !important; margin: 32px 0 16px !important;
  padding-bottom: 10px !important; border-bottom: 1px solid var(--border) !important;
}
.status-day {
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  padding: 14px 0 !important; margin: 0 !important;
}
.status-day.no-incidents { opacity: 0.55; }
.status-day .date {
  font-family: var(--mono) !important; font-size: 11px !important; font-weight: 500 !important;
  color: var(--text3) !important; text-transform: uppercase !important;
  letter-spacing: 0.08em !important; border: none !important; padding: 0 0 6px !important; margin: 0 !important;
}
.status-day p.color-secondary { font-size: 13px !important; color: var(--text3) !important; margin: 0 !important; font-style: italic; }
.status-day .update-title a { font-size: 14px !important; font-weight: 500 !important; color: var(--text) !important; }
.status-day .update-title.impact-critical a   { color: var(--red) !important; }
.status-day .update-title.impact-major a      { color: var(--orange) !important; }
.status-day .update-title.impact-minor a      { color: var(--yellow) !important; }
.status-day .update-title.impact-maintenance a { color: var(--blue) !important; }

/* ═══════════════════════════════════════════
   HISTORY PAGE — MONTH/INCIDENT LISTING
   body.status.history → .layout-content.status.status-full-history
   ═══════════════════════════════════════════ */

/* Month headings rendered by React HistoryIndex */
.layout-content.status.status-full-history .month h2,
body.status.history .month h2 {
  font-family: var(--mono) !important;
  font-size: 11px !important; font-weight: 500 !important;
  color: var(--text3) !important; letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid var(--border) !important;
  padding-bottom: 10px !important; margin: 28px 0 12px !important;
}

/* Incident rows */
.layout-content.status.status-full-history .month .incident-container,
body.status.history .month .incident-container {
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  padding: 10px 0 !important;
}
.layout-content.status.status-full-history .month .incident-container a,
body.status.history .month .incident-container a {
  font-size: 13.5px !important; font-weight: 400 !important;
}
.layout-content.status.status-full-history .month .incident-container .date,
body.status.history .month .incident-container .date {
  font-family: var(--mono) !important; font-size: 11px !important;
  color: var(--text3) !important; letter-spacing: 0.05em !important;
}

/* Impact colors in history listing */
.layout-content.status-full-history .month .incident-container .impact-none      { color: var(--text2) !important; }
.layout-content.status-full-history .month .incident-container .impact-minor     { color: var(--yellow) !important; }
.layout-content.status-full-history .month .incident-container .impact-major     { color: var(--orange) !important; }
.layout-content.status-full-history .month .incident-container .impact-critical  { color: var(--red) !important; }
.layout-content.status-full-history .month .incident-container .impact-maintenance { color: var(--blue) !important; }

/* Filter / show filter button */
.show-filter {
  font-family: var(--mono) !important; font-size: 10px !important;
  letter-spacing: 0.07em !important; text-transform: uppercase !important;
  color: var(--text2) !important; background: transparent !important;
  border: 1px solid var(--border-h) !important; border-radius: 0 !important;
  padding: 6px 14px !important; transition: all 0.15s !important;
}
.show-filter:hover { color: var(--text) !important; border-color: var(--border-h) !important; }
.show-filter.open  {
  color: var(--brand) !important; background: var(--brand-dim) !important;
  border-color: rgba(0,229,255,0.25) !important;
}

/* Pagination */
.layout-content.status.status-full-history .history-footer {
  margin-top: 32px !important;
  padding: 16px 0 40px !important;
  border-top: 1px solid var(--border) !important;
  display: flex; align-items: center; justify-content: space-between;
}
.layout-content.status.status-full-history .history-footer .pagination { display: flex; gap: 4px; }
.layout-content.status.status-full-history .history-footer .pagination a,
.layout-content.status.status-full-history .history-footer .pagination span {
  font-family: var(--mono) !important; font-size: 11px !important;
  color: var(--text3) !important; border: 1px solid var(--border) !important;
  border-radius: 0 !important; padding: 5px 12px !important;
  text-decoration: none !important; transition: all 0.15s !important;
}
.layout-content.status.status-full-history .history-footer .pagination a:hover {
  color: var(--text) !important; border-color: var(--border-h) !important;
}
.layout-content.status.status-full-history .history-footer .pagination a.current,
.layout-content.status.status-full-history .history-footer .pagination span.current {
  color: var(--brand) !important;
  border-color: rgba(0,229,255,0.3) !important;
  background: rgba(0,229,255,0.06) !important;
}
.layout-content.status.status-full-history .history-footer .pagination a.disabled {
  opacity: 0.3 !important; pointer-events: none !important;
}

/* ═══════════════════════════════════════════
   UPTIME CALENDAR PAGE
   body.status.uptime — same .status-full-history wrapper
   ═══════════════════════════════════════════ */

/* Component selector dropdown */
body.status.uptime select,
.layout-content.status.status-full-history select {
  font-family: var(--mono) !important; font-size: 12px !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--border-h) !important; border-radius: 0 !important;
  color: var(--text) !important; padding: 8px 12px !important;
}

/* Calendar table */
body.status.uptime table,
.layout-content.status.status-full-history table {
  border-collapse: collapse !important;
}
body.status.uptime table th,
.layout-content.status.status-full-history table th {
  font-family: var(--mono) !important; font-size: 10px !important;
  color: var(--text3) !important; letter-spacing: 0.07em !important;
  text-transform: uppercase !important; border: none !important;
  padding: 4px 4px !important; font-weight: 400 !important;
  background: transparent !important;
}
body.status.uptime table td,
.layout-content.status.status-full-history table td {
  border-radius: 0 !important;
  border: 1px solid rgba(0,0,0,0.25) !important;
}

/* Month label above calendar */
body.status.uptime .header-month,
.layout-content.status.status-full-history .header-month {
  font-family: var(--mono) !important; font-size: 11px !important;
  color: var(--text2) !important; letter-spacing: 0.07em !important;
  text-transform: uppercase !important; font-weight: 500 !important;
}

/* Uptime % label */
body.status.uptime .uptime-percentage,
.layout-content.status.status-full-history .uptime-percentage {
  font-family: var(--mono) !important; font-size: 12px !important;
  color: var(--text2) !important;
}

/* ═══════════════════════════════════════════
   FOOTER — all pages
   ═══════════════════════════════════════════ */

.page-footer {
  border-top: 1px solid var(--border) !important;
  margin-top: 32px !important; padding: 20px 0 48px !important;
  display: flex !important; justify-content: space-between !important; align-items: center !important;
}
.page-footer a,
.history-footer-link {
  font-family: var(--mono) !important; font-size: 12px !important;
  color: var(--text2) !important; text-decoration: none !important;
  letter-spacing: 0.02em; transition: color 0.15s;
}
.page-footer a:hover,
.history-footer-link:hover { color: var(--brand) !important; }
.powered-by,
.powered-by a {
  font-family: var(--mono) !important; font-size: 11px !important;
  color: var(--text3) !important; text-decoration: none !important;
}

/* ═══════════════════════════════════════════
   SUBSCRIBE DROPDOWN
   ═══════════════════════════════════════════ */

/* SP trigger button — visually hidden but must remain in DOM for dropdown JS */
/* (handled in header HTML inline style) */

.updates-dropdown {
  background: var(--bg2) !important;
  border: 1px solid var(--border-h) !important;
  border-radius: 0 !important;
  box-shadow: 0 20px 70px rgba(0,0,0,0.75) !important;
}
.updates-dropdown-nav {
  border-bottom: 1px solid var(--border) !important;
  background: rgba(255,255,255,0.02) !important;
  padding: 10px 12px !important;
}
.updates-dropdown-nav a {
  color: var(--text3) !important; padding: 6px 10px !important;
  border-radius: 0 !important; transition: background 0.15s, color 0.15s !important;
}
.updates-dropdown-nav a[aria-selected="true"],
.updates-dropdown-nav a:hover { background: var(--surface-h) !important; color: var(--text) !important; }
#updates-dropdown-close-btn {
  color: var(--text3) !important; background: transparent !important;
  border: none !important; font-size: 14px !important; cursor: pointer;
  padding: 4px 8px !important; border-radius: 0 !important;
}
#updates-dropdown-close-btn:hover { color: var(--text) !important; }
.updates-dropdown-section { padding: 20px !important; background: transparent !important; }
.updates-dropdown-section .directions {
  font-size: 13px !important; color: var(--text2) !important;
  line-height: 1.65 !important; margin-bottom: 14px !important;
}
.updates-dropdown-section.atom { color: var(--text2) !important; font-size: 13px !important; }
.updates-dropdown-section.atom a { color: var(--brand) !important; }

/* ═══════════════════════════════════════════
   FORM CONTROLS
   ═══════════════════════════════════════════ */

label {
  font-family: var(--font) !important; font-size: 12px !important;
  font-weight: 500 !important; color: var(--text2) !important;
  letter-spacing: 0.04em !important; display: block !important;
  margin-bottom: 6px !important; text-transform: uppercase;
}
input[type="text"], input[type="email"], input[type="tel"] {
  font-family: var(--font) !important; font-size: 13px !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--border-h) !important; border-radius: 0 !important;
  color: var(--text) !important; padding: 9px 13px !important;
  width: 100% !important; transition: border-color 0.15s, box-shadow 0.15s !important;
}
input[type="text"]:focus, input[type="email"]:focus {
  border-color: rgba(0,229,255,0.35) !important; outline: none !important;
  box-shadow: 0 0 0 3px rgba(0,229,255,0.05) !important;
}
input::placeholder { color: var(--text3) !important; }
select {
  font-family: var(--font) !important; font-size: 13px !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--border-h) !important; border-radius: 0 !important;
  color: var(--text) !important; padding: 8px 12px !important;
}
.flat-button, input[type="submit"].flat-button {
  font-family: var(--font) !important; font-size: 13px !important;
  font-weight: 500 !important; background: var(--brand-dim) !important;
  color: var(--brand) !important; border: 1px solid rgba(0,229,255,0.22) !important;
  border-radius: 0 !important; padding: 10px 20px !important;
  cursor: pointer !important; transition: all 0.2s ease !important;
  display: inline-block; text-align: center;
}
.flat-button:hover, input[type="submit"].flat-button:hover {
  background: rgba(0,229,255,0.16) !important;
  border-color: rgba(0,229,255,0.35) !important;
}

/* ═══════════════════════════════════════════
   UPTIME TOOLTIP
   ═══════════════════════════════════════════ */

#uptime-tooltip .tooltip-box {
  background: var(--bg2) !important; border: 1px solid var(--border-h) !important;
  border-radius: 0 !important; box-shadow: 0 12px 50px rgba(0,0,0,0.65) !important;
  font-family: var(--font) !important; min-width: 200px;
}
#uptime-tooltip .tooltip-box .date {
  font-family: var(--mono) !important; font-size: 10px !important;
  color: var(--text3) !important; letter-spacing: 0.07em !important;
  text-transform: uppercase !important; padding: 10px 14px 8px !important;
  border-bottom: 1px solid var(--border) !important; margin: 0 !important;
}
#uptime-tooltip .tooltip-content { padding: 0 !important; }
#uptime-tooltip .no-outages-msg  { font-size: 12px !important; color: var(--green) !important; padding: 10px 14px !important; }
#uptime-tooltip .no-data-msg     { font-size: 12px !important; color: var(--text3) !important; padding: 10px 14px !important; }
#uptime-tooltip .outage-field    {
  font-size: 12px !important; color: var(--text2) !important;
  padding: 8px 14px !important; background-color: rgba(255,255,255,0.025) !important;
  border-color: rgba(255,255,255,0.08) !important;
}
#uptime-tooltip .outage-field.major   { color: var(--red) !important; }
#uptime-tooltip .outage-field.partial { color: var(--orange) !important; }
#uptime-tooltip .pointer-container .pointer-larger  { border-bottom-color: var(--border-h) !important; }
#uptime-tooltip .pointer-container .pointer-smaller { border-bottom-color: var(--bg2) !important; }

/* ═══════════════════════════════════════════
   MODALS
   ═══════════════════════════════════════════ */

div[id^="subscribe-modal"] {
  background: var(--bg2) !important; border: 1px solid var(--border-h) !important;
  border-radius: 0 !important;
}
div[id^="subscribe-modal"] .modal-header {
  border-bottom: 1px solid var(--border) !important; padding: 16px 20px !important;
}
div[id^="subscribe-modal"] .modal-footer {
  background: rgba(255,255,255,0.02) !important; border-top: 1px solid var(--border) !important;
}

/* ═══════════════════════════════════════════
   SCHEDULED / UNRESOLVED INCIDENTS
   ═══════════════════════════════════════════ */

.layout-content.status.status-index .scheduled-incidents-container {
  border-color: var(--blue) !important; background: rgba(96,165,250,0.04) !important;
  border-radius: 0 !important; padding: 16px 20px !important; margin-bottom: 16px !important;
}
.layout-content.status.status-index .scheduled-incidents-container .tab {
  background: var(--blue-dim) !important; color: var(--blue) !important;
  border-radius: 0 !important; font-size: 11px !important;
  font-family: var(--mono) !important; letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}
.layout-content.status.status-index .unresolved-incident {
  border-radius: 0 !important; border-width: 1px !important;
  padding: 16px 20px !important; margin-bottom: 10px !important;
  background: rgba(255,255,255,0.02) !important;
}
.layout-content.status.status-index .unresolved-incident.impact-critical {
  background: rgba(255,77,77,0.04) !important; border-color: rgba(255,77,77,0.2) !important;
}
.layout-content.status.status-index .incidents-list .incident-title a {
  font-weight: 500 !important; font-size: 15px !important;
}

/* ═══════════════════════════════════════════
   INCIDENT DETAIL PAGE
   ═══════════════════════════════════════════ */

.layout-content.status-incident .incident-name {
  font-family: var(--font) !important; font-weight: 500 !important; letter-spacing: -0.01em !important;
}
.layout-content.status-incident .subheader a { color: var(--text2) !important; }
.layout-content.status-incident .subheader a:hover { color: var(--brand) !important; }

/* ═══════════════════════════════════════════
   GROUPED ITEMS SELECTOR
   ═══════════════════════════════════════════ */

.grouped-items-selector {
  background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: 0 !important;
}
.layout-content.status .grouped-items-selector.inline .grouped-item { color: var(--text2) !important; font-size: 13px !important; }
.layout-content.status .grouped-items-selector.inline .grouped-item.active { color: var(--brand) !important; }

/* ═══════════════════════════════════════════
   MISC
   ═══════════════════════════════════════════ */

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-h); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--text3); }

::selection { background: rgba(0,229,255,0.15); color: var(--text); }

.table-row .date { color: var(--text3) !important; font-family: var(--mono) !important; font-size: 12px !important; }
small { color: var(--text3) !important; font-size: 12px !important; font-family: var(--mono) !important; }