@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,700;1,9..40,400&display=swap');

:root {
  /* Breakout palette (src/styles/theme.ts) */
  --breakout-primary: #008DF2;
  --breakout-secondary: #BA2031;
  --breakout-bg-top: #06192F;
  --breakout-bg-bottom: #0A2443;
  --breakout-navy: #1F3654;
  --breakout-navy-light: #2C4566;
  --breakout-navy-lighter: #3D587D;
  --breakout-navy-even-lighter: #5C7AA0;
  --breakout-navy-dark: #122339;
  --breakout-border: #2E4767;
  --breakout-text: #FFFFFF;
  --breakout-text-muted: #9EB1C9;
  --breakout-text-sub: #7E95B0;
  --breakout-title: #9CADC1;
  --breakout-success: #61D384;
  --breakout-pending: #FFBF43;
  --breakout-error: #ff7272;
  --breakout-radius-sm: 4px;
  --breakout-radius-md: 15px;
}

/* Base page */
body.status {
  font-family: 'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--breakout-text);
  background: linear-gradient(180deg, var(--breakout-bg-top) 0%, var(--breakout-bg-bottom) 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Typography */
.font-largest,
.layout-content.status h2,
.layout-content.status h3,
.layout-content.status h4 {
  font-weight: 700;
  color: var(--breakout-text);
}

.font-large {
  font-weight: 700;
  color: var(--breakout-text);
}

.font-regular,
.color-primary {
  color: var(--breakout-text);
}

small,
.color-secondary,
.layout-content.status .table-row .date,
.components-section .components-uptime-link,
.layout-content.status .shared-partial.uptime-90-days-wrapper .legend .legend-item,
.layout-content.status .shared-partial.uptime-90-days-wrapper .legend .legend-item.light {
  color: var(--breakout-text-muted);
}

.layout-content.status-index .components-statuses .component-container .name {
  color: rgba(255, 255, 255, 0.85);
}

/* Links & buttons */
a,
a:hover,
.layout-content.status-index .page-footer span a:hover,
.layout-content.status-index .timeframes-container .timeframe:not(.active):hover {
  color: var(--breakout-primary);
}

.flat-button,
.masthead .updates-dropdown-container .show-updates-dropdown,
.layout-content.status-full-history .show-filter.open {
  background-color: var(--breakout-primary);
  border-radius: var(--breakout-radius-sm);
  font-weight: 700;
  text-transform: capitalize;
}

.flat-button:hover,
.masthead .updates-dropdown-container .show-updates-dropdown:hover {
  background-color: #0078cc;
}

/* Masthead */
.masthead-container.basic,
.masthead {
  background: transparent;
  border: 0;
}

.masthead .logo-container img {
  max-height: 70px;
}

/* Overall status banner */
.layout-content.status.status-index .page-status {
  border-radius: var(--breakout-radius-md);
  font-weight: 700;
  letter-spacing: 0.01em;
}

.layout-content.status.status-index .page-status.status-none {
  background-color: var(--breakout-success);
  color: var(--breakout-bg-top);
}

.layout-content.status.status-index .page-status.status-minor {
  background-color: var(--breakout-pending);
  color: var(--breakout-bg-top);
}

.layout-content.status.status-index .page-status.status-major {
  background-color: var(--breakout-secondary);
}

.layout-content.status.status-index .page-status.status-critical {
  background-color: var(--breakout-error);
}

.layout-content.status.status-index .page-status.status-maintenance {
  background-color: var(--breakout-primary);
}

/* Cards / sections (StyledBox-inspired) */
.components-section,
.unresolved-incidents,
.scheduled-incidents-container,
.text-section,
.layout-content.status-index .status-day,
.layout-content.status .section,
.layout-content.status-full-history .month {
  background-color: var(--breakout-navy);
  border: 1px solid var(--breakout-border);
  border-radius: var(--breakout-radius-md);
  box-shadow: 20px 20px 40px rgba(0, 0, 0, 0.2);
}

.components-section,
.unresolved-incidents,
.text-section,
.layout-content.status-index .status-day {
  padding: 16px;
  margin-bottom: 16px;
}

/* Dividers */
body.status .layout-content.status .border-color,
hr,
.tooltip-base,
.markdown-display table,
div[id^="subscribe-modal"],
#uptime-tooltip .tooltip-box {
  border-color: var(--breakout-navy-lighter);
}

/* Component status colors */
.status-green .icon-indicator,
.components-container .component-inner-container.status-green .component-status,
.components-container .component-inner-container.status-green .icon-indicator,
.layout-content.status-index .components-statuses .component-container.status-green:after {
  color: var(--breakout-success);
}

.status-yellow .icon-indicator,
.components-container .component-inner-container.status-yellow .component-status,
.components-container .component-inner-container.status-yellow .icon-indicator,
.layout-content.status-index .components-statuses .component-container.status-yellow:after {
  color: var(--breakout-pending);
}

.status-orange .icon-indicator,
.components-container .component-inner-container.status-orange .component-status,
.components-container .component-inner-container.status-orange .icon-indicator,
.layout-content.status-index .components-statuses .component-container.status-orange:after {
  color: var(--breakout-secondary);
}

.status-red .icon-indicator,
.components-container .component-inner-container.status-red .component-status,
.components-container .component-inner-container.status-red .icon-indicator,
.layout-content.status-index .components-statuses .component-container.status-red:after {
  color: var(--breakout-error);
}

.status-blue .icon-indicator,
.components-container .component-inner-container.status-blue .component-status,
.components-container .component-inner-container.status-blue .icon-indicator,
.layout-content.status-index .components-statuses .component-container.status-blue:after {
  color: var(--breakout-primary);
}

/* Incident impact colors */
.layout-content.status.status-index .status-day .update-title.impact-none a,
.layout-content.status.status-index .incidents-list .incident-title.impact-none a,
.incident-history .impact-none {
  color: var(--breakout-success);
}

.layout-content.status.status-index .status-day .update-title.impact-minor a,
.layout-content.status.status-index .incidents-list .incident-title.impact-minor a,
.incident-history .impact-minor {
  color: var(--breakout-pending);
}

.layout-content.status.status-index .status-day .update-title.impact-major a,
.layout-content.status.status-index .incidents-list .incident-title.impact-major a,
.incident-history .impact-major {
  color: var(--breakout-secondary);
}

.layout-content.status.status-index .status-day .update-title.impact-critical a,
.layout-content.status.status-index .incidents-list .incident-title.impact-critical a,
.incident-history .impact-critical {
  color: var(--breakout-error);
}

.layout-content.status.status-index .status-day .update-title.impact-maintenance a,
.layout-content.status.status-index .incidents-list .incident-title.impact-maintenance a,
.incident-history .impact-maintenance {
  color: var(--breakout-primary);
}

/* Uptime graph */
.layout-content.status .shared-partial.uptime-90-days-wrapper .legend .spacer {
  background: var(--breakout-navy-even-lighter);
}

.layout-content.status-index .timeframes-container .timeframe.active {
  color: var(--breakout-primary);
}

/* Subscribe modal / dropdown */
div[id^="subscribe-modal"],
div[id^="updates-dropdown"] .updates-dropdown-section,
.grouped-items-selector,
#uptime-tooltip .tooltip-box {
  background-color: var(--breakout-navy-light);
  color: var(--breakout-text);
}

div[id^="subscribe-modal"] .modal-header .close,
.grouped-item-label {
  color: var(--breakout-text);
}

.layout-content.status .grouped-items-selector.inline .grouped-item.active {
  color: var(--breakout-primary);
}

#uptime-tooltip .tooltip-box .outage-field {
  background-color: rgba(61, 88, 125, 0.35);
  border-color: rgba(61, 88, 125, 0.5);
}

#uptime-tooltip .pointer-container .pointer-smaller {
  border-bottom-color: var(--breakout-navy-light);
}

/* Form fields inside subscribe UI */
.updates-dropdown input[type="text"],
.updates-dropdown input[type="email"],
.updates-dropdown select,
div[id^="subscribe-modal"] input[type="text"],
div[id^="subscribe-modal"] input[type="email"],
div[id^="subscribe-modal"] select {
  background-color: var(--breakout-navy-dark);
  border: 1px solid var(--breakout-navy-lighter);
  color: var(--breakout-text);
  border-radius: var(--breakout-radius-sm);
}

/* Footer */
.layout-content.status-index .page-footer {
  color: var(--breakout-text-sub);
}

.layout-content.status-index .page-footer a {
  color: var(--breakout-primary);
}

/* Container width — matches Statuspage defaults, slightly wider for cards */
.container {
  width: 90%;
  max-width: 900px;
}

/* End Custom CSS */