@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

:root {
  --ax-content-default: #252423;
  --ax-content-secondary: #5f5e5c;
  --ax-content-tertiary: #706f6e;
  --ax-content-accent: #644b9e;
  --ax-surface-page: #f7f5f3;
  --ax-surface-card: #ffffff;
  --ax-surface-secondary: #e8e5e2;
  --ax-surface-inverted: #252423;
  --ax-hover: #322b2308;
  --ax-border: #1f170c1f;
  --ax-focus: #7959cd;

  --ax-success: #0eaa77;
  --ax-success-content: #147656;
  --ax-success-surface: #e9fbf5;
  --ax-success-border: #59d5ae;
  --ax-minor: #f7d15f;
  --ax-minor-content: #887334;
  --ax-minor-surface: #fdf1cd;
  --ax-major: #ff9a57;
  --ax-major-content: #a94f13;
  --ax-major-surface: #fff5ee;
  --ax-critical: #ff425d;
  --ax-critical-content: #d90b28;
  --ax-critical-surface: #ffecef;
  --ax-maintenance: #3889fa;
  --ax-maintenance-content: #073c85;
  --ax-maintenance-surface: #d8e9fd;

  --ax-radius-card: 12px;
  --ax-radius-button: 8px;
  --ax-radius-sm: 6px;
  --ax-shadow-container: 0 2px 8px #0000000a;
  --ax-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-stack-a: var(--ax-font);
}

/* Base */
body,
body.status,
.layout-content.status {
  background-color: var(--ax-surface-page) !important;
  color: var(--ax-content-default) !important;
  font-family: var(--ax-font) !important;
  -webkit-font-smoothing: antialiased;
}

body.status *:not(.fa):not([class*='icon']) {
  font-family: var(--ax-font) !important;
}

.color-primary,
.color-primary:hover {
  color: var(--ax-content-default) !important;
}

small,
.color-secondary,
.layout-content.status .table-row .date {
  color: var(--ax-content-secondary) !important;
}

body.status .layout-content.status .border-color,
hr,
.tooltip-base {
  border-color: var(--ax-border) !important;
}

a,
a:hover {
  color: var(--ax-content-accent);
}

a:focus-visible,
button:focus-visible,
.custom-focus:focus-visible {
  outline: 2px solid var(--ax-focus) !important;
  outline-offset: 2px;
}

.font-largest {
  font-size: 20px !important;
  line-height: 28px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

.font-large {
  font-size: 16px !important;
  line-height: 24px !important;
  font-weight: 600 !important;
}

.font-regular {
  font-size: 14px !important;
  line-height: 20px !important;
}

.font-small {
  font-size: 12px !important;
  line-height: 16px !important;
  letter-spacing: 0.01em;
}

/* Masthead */
.masthead-container.basic {
  background: transparent !important;
}

.masthead .updates-dropdown-container .show-updates-dropdown,
.flat-button {
  background-color: var(--ax-surface-inverted) !important;
  color: #fcfcfb !important;
  border: none !important;
  border-radius: var(--ax-radius-button) !important;
  box-shadow: none !important;
  font-family: var(--ax-font) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  height: 32px;
  line-height: 32px !important;
  padding: 0 12px !important;
  transition: opacity 0.15s ease;
}

.masthead .updates-dropdown-container .show-updates-dropdown:hover,
.flat-button:hover {
  opacity: 0.88;
}

.updates-dropdown {
  border: 1px solid var(--ax-border) !important;
  border-radius: var(--ax-radius-card) !important;
  box-shadow: var(--ax-shadow-container) !important;
  overflow: hidden;
}

div[id^='updates-dropdown'] .updates-dropdown-section,
div[id^='subscribe-modal'],
div[id^='subscribe-modal'] .modal-footer {
  background-color: var(--ax-surface-card) !important;
}

.updates-dropdown input.full-width,
.updates-dropdown input.prepend {
  border: 1px solid var(--ax-border) !important;
  border-radius: var(--ax-radius-button) !important;
  box-shadow: none !important;
  height: 32px;
  font-size: 14px !important;
}

.updates-dropdown input.full-width:focus {
  border-color: var(--ax-focus) !important;
  outline: none;
}

/* Global status banner (Axiom Banner look) */
.layout-content.status.status-index .page-status {
  border-radius: var(--ax-radius-card) !important;
  border: 1px solid transparent;
  box-shadow: none !important;
  padding: 16px 24px !important;
}

.layout-content.status.status-index .page-status {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.layout-content.status.status-index .page-status .status {
  margin: 0 !important;
  top: 0 !important;
  font-size: 16px !important;
  line-height: 24px !important;
  font-weight: 600 !important;
}

.layout-content.status.status-index .page-status .last-updated-stamp {
  float: none !important;
  margin: 0 !important;
}

.layout-content.status.status-index .page-status .last-updated-stamp:empty {
  display: none !important;
}

.layout-content.status.status-index .page-status.status-none {
  background-color: var(--ax-success-surface) !important;
  border-color: var(--ax-success-border);
}
.layout-content.status.status-index .page-status.status-none .status,
.layout-content.status.status-index .page-status.status-none .last-updated-stamp {
  color: var(--ax-success-content) !important;
}

.layout-content.status.status-index .page-status.status-minor {
  background-color: var(--ax-minor-surface) !important;
  border-color: var(--ax-minor);
}
.layout-content.status.status-index .page-status.status-minor .status,
.layout-content.status.status-index .page-status.status-minor .last-updated-stamp {
  color: var(--ax-minor-content) !important;
}

.layout-content.status.status-index .page-status.status-major {
  background-color: var(--ax-major-surface) !important;
  border-color: var(--ax-major);
}
.layout-content.status.status-index .page-status.status-major .status,
.layout-content.status.status-index .page-status.status-major .last-updated-stamp {
  color: var(--ax-major-content) !important;
}

.layout-content.status.status-index .page-status.status-critical {
  background-color: var(--ax-critical-surface) !important;
  border-color: var(--ax-critical);
}
.layout-content.status.status-index .page-status.status-critical .status,
.layout-content.status.status-index .page-status.status-critical .last-updated-stamp {
  color: var(--ax-critical-content) !important;
}

.layout-content.status.status-index .page-status.status-maintenance {
  background-color: var(--ax-maintenance-surface) !important;
  border-color: var(--ax-maintenance);
}
.layout-content.status.status-index .page-status.status-maintenance .status,
.layout-content.status.status-index .page-status.status-maintenance .last-updated-stamp {
  color: var(--ax-maintenance-content) !important;
}

/* Unresolved incidents on the status page */
.layout-content.status.status-index .unresolved-incident {
  border-radius: var(--ax-radius-card) !important;
  overflow: hidden;
  border: 1px solid var(--ax-border);
  background: var(--ax-surface-card);
  box-shadow: none !important;
}

.layout-content.status.status-index .unresolved-incident .incident-title {
  color: var(--ax-content-default) !important;
}

.layout-content.status.status-index .unresolved-incident.impact-minor .incident-title {
  background-color: var(--ax-minor-surface) !important;
}
.layout-content.status.status-index .unresolved-incident.impact-major .incident-title {
  background-color: var(--ax-major-surface) !important;
}
.layout-content.status.status-index .unresolved-incident.impact-critical .incident-title {
  background-color: var(--ax-critical-surface) !important;
}
.layout-content.status.status-index .unresolved-incident.impact-maintenance .incident-title {
  background-color: var(--ax-maintenance-surface) !important;
}
.layout-content.status.status-index .unresolved-incident .updates {
  border: none !important;
}

.layout-content.status.status-index .scheduled-incidents-container {
  border-radius: var(--ax-radius-card) !important;
  border-color: var(--ax-border) !important;
  background: var(--ax-surface-card);
  overflow: hidden;
}
.layout-content.status.status-index .scheduled-incidents-container .tab {
  background-color: var(--ax-maintenance-surface) !important;
  color: var(--ax-maintenance-content) !important;
}

/* Components list */
.components-section .components-container {
  border: 1px solid var(--ax-border) !important;
  border-radius: var(--ax-radius-card) !important;
  background: var(--ax-surface-card);
  box-shadow: var(--ax-shadow-container);
  overflow: hidden;
}

.components-section .components-container .component-container {
  border-color: var(--ax-border) !important;
  border-left: none !important;
  border-right: none !important;
  background: transparent !important;
}

.components-section .components-container .component-container:first-child {
  border-top: none !important;
}

.components-section .components-container .component-container:last-child {
  border-bottom: none !important;
}

.components-section .component-inner-container .name {
  color: var(--ax-content-default) !important;
  font-weight: 500 !important;
}

.components-section .component-inner-container .component-status {
  font-size: 12px !important;
  font-weight: 500 !important;
}

.components-container .component-inner-container.status-green .component-status,
.components-container .component-inner-container.status-green .icon-indicator,
.status-green .icon-indicator {
  color: var(--ax-success-content) !important;
}
.components-container .component-inner-container.status-yellow .component-status,
.components-container .component-inner-container.status-yellow .icon-indicator,
.status-yellow .icon-indicator {
  color: var(--ax-minor-content) !important;
}
.components-container .component-inner-container.status-orange .component-status,
.components-container .component-inner-container.status-orange .icon-indicator,
.status-orange .icon-indicator {
  color: var(--ax-major-content) !important;
}
.components-container .component-inner-container.status-red .component-status,
.components-container .component-inner-container.status-red .icon-indicator,
.status-red .icon-indicator {
  color: var(--ax-critical-content) !important;
}
.components-container .component-inner-container.status-blue .component-status,
.components-container .component-inner-container.status-blue .icon-indicator,
.status-blue .icon-indicator {
  color: var(--ax-maintenance-content) !important;
}

.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(--ax-content-tertiary) !important;
}

.layout-content.status .shared-partial.uptime-90-days-wrapper .legend .spacer {
  background: var(--ax-border) !important;
}

.uptime-90-days-wrapper svg rect {
  rx: 2px;
  ry: 2px;
}

.layout-content svg rect[fill='#24d69e' i] {
  fill: var(--ax-success);
}
.layout-content svg rect[fill='#95c94f' i],
.layout-content svg rect[fill='#fbbd08' i] {
  fill: var(--ax-minor);
}
.layout-content svg rect[fill='#fd9b5a' i] {
  fill: var(--ax-major);
}
.layout-content svg rect[fill='#f77360' i],
.layout-content svg rect[fill='#f24f66' i] {
  fill: var(--ax-critical);
}
.layout-content svg rect[fill='#4a8df9' i] {
  fill: var(--ax-maintenance);
}
.layout-content svg rect[fill='#b3bac5' i] {
  fill: #dfdbd6;
}
.layout-content svg rect[fill='#eaeaea' i] {
  fill: var(--ax-surface-secondary);
}

#uptime-tooltip .tooltip-box {
  border: 1px solid var(--ax-border) !important;
  border-radius: var(--ax-radius-button) !important;
  box-shadow: var(--ax-shadow-container) !important;
}

#uptime-tooltip .tooltip-box .outage-field {
  border-radius: var(--ax-radius-sm) !important;
  background-color: var(--ax-surface-page) !important;
}

/* Past incidents (status page) */
.layout-content.status-index .status-day {
  background: var(--ax-surface-card);
  border: 1px solid var(--ax-border) !important;
  border-radius: var(--ax-radius-card);
  padding: 16px 24px !important;
  margin-bottom: 12px !important;
}

.layout-content.status-index .status-day .date {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--ax-content-default) !important;
  border-bottom: 1px solid var(--ax-border) !important;
  padding-bottom: 12px !important;
  margin-bottom: 12px !important;
}

.layout-content.status-index .status-day.no-incidents .date {
  border-bottom: none !important;
  padding-bottom: 0 !important;
  margin-bottom: 4px !important;
}

.layout-content.status-index .status-day .incident-container {
  margin-bottom: 16px;
}

.layout-content.status-index .status-day .incident-container:last-child {
  margin-bottom: 0;
}

.layout-content.status-index .status-day .incident-title,
.layout-content.status-index .status-day .update-title {
  font-weight: 600 !important;
}

.layout-content.status.status-index .incidents-list .incident-title a,
.layout-content.status-index .status-day .update-title.impact-none a {
  color: var(--ax-content-default) !important;
}





.update.font-regular strong {
  font-weight: 600;
  color: var(--ax-content-default);
}

/* Metrics */
.metric.border-color {
  border-radius: var(--ax-radius-card) !important;
  background: var(--ax-surface-card);
}

.layout-content.status-index .timeframes-container .timeframe {
  border-radius: var(--ax-radius-sm) !important;
}

.layout-content.status-index .timeframes-container .timeframe.active {
  background: var(--ax-surface-secondary) !important;
  color: var(--ax-content-default) !important;
}

/* Metrics charts (Highcharts) */
.metrics-display-graph .highcharts-graph,
.graph-container .highcharts-graph {
  stroke: var(--ax-focus) !important;
}

.metrics-display-graph .highcharts-point,
.metrics-display-graph .highcharts-markers path,
.graph-container .highcharts-point,
.graph-container .highcharts-markers path {
  fill: var(--ax-focus) !important;
}

.metrics-display-graph .highcharts-halo,
.graph-container .highcharts-halo {
  fill: var(--ax-focus) !important;
}

.metrics-display-graph .highcharts-tooltip tspan[style*='74, 141, 249'],
.metrics-display-graph .highcharts-tooltip tspan[style*='4A8DF9' i],
.graph-container .highcharts-tooltip tspan[style*='4A8DF9' i],
.metrics-display-graph .highcharts-tooltip span[style*='4A8DF9' i],
.graph-container .highcharts-tooltip span[style*='4A8DF9' i] {
  fill: var(--ax-focus) !important;
  color: var(--ax-focus) !important;
}

.metrics-display-graph .highcharts-tooltip-box,
.graph-container .highcharts-tooltip-box,
.metrics-display-graph .highcharts-label-box,
.graph-container .highcharts-label-box {
  stroke: var(--ax-border) !important;
}

/* History page */
.layout-content.status.status-full-history .history-nav {
  display: block !important;
  padding: 0 !important;
  border: none !important;
  border-bottom: 1px solid var(--ax-border) !important;
  margin-bottom: 24px !important;
}

.layout-content.status.status-full-history .history-nav ul {
  display: flex !important;
  gap: 32px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.layout-content.status.status-full-history .history-nav li {
  display: flex !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.layout-content.status.status-full-history .history-nav a,
.layout-content.status.status-full-history .history-nav a.button {
  float: none !important;
  position: relative;
  display: inline-flex !important;
  align-items: center;
  height: auto !important;
  padding: 0 0 12px !important;
  margin: 0 0 -1px !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--ax-content-tertiary) !important;
  font-size: 14px !important;
  line-height: 20px !important;
  font-weight: 500 !important;
  transition: color 0.25s cubic-bezier(0.9, 0, 0, 1), box-shadow 0.25s cubic-bezier(0.9, 0, 0, 1);
}

.layout-content.status.status-full-history .history-nav a:not(.current):hover {
  color: var(--ax-content-default) !important;
  background: transparent !important;
  box-shadow: inset 0 -1px 0 #4d433699 !important;
}

.layout-content.status.status-full-history .history-nav a.current {
  color: var(--ax-content-default) !important;
  background: transparent !important;
  box-shadow: inset 0 -2px 0 var(--ax-content-default) !important;
}

.layout-content.status-full-history .show-filter,
.layout-content.status-full-history .show-filter.open {
  display: inline-flex !important;
  align-items: center;
  box-sizing: border-box;
  height: 32px !important;
  padding: 0 12px !important;
  border: 1px solid var(--ax-border) !important;
  border-radius: var(--ax-radius-button) !important;
  background: var(--ax-surface-card) !important;
  color: var(--ax-content-default) !important;
  font-size: 14px !important;
  line-height: 20px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
}

.layout-content.status-full-history .show-filter:hover {
  background: #fbfaf9 !important;
}

.layout-content.status-full-history .show-filter.open {
  background: var(--ax-surface-secondary) !important;
}

.layout-content.status-full-history .component-selector .grouped-items-selector {
  border: 1px solid var(--ax-border) !important;
  border-radius: var(--ax-radius-card) !important;
  box-shadow: var(--ax-shadow-container) !important;
  background: var(--ax-surface-card) !important;
}

.layout-content.status.status-full-history .pagination a {
  box-sizing: border-box;
  height: 32px !important;
  width: 32px !important;
  border-radius: var(--ax-radius-button) !important;
  border-color: var(--ax-border) !important;
  background: var(--ax-surface-card);
}

.layout-content.status.status-full-history .pagination .current {
  font-size: 14px !important;
  font-weight: 600;
  color: var(--ax-content-default);
}

.layout-content.status-full-history .month {
  background: var(--ax-surface-card);
  border: 1px solid var(--ax-border);
  border-radius: var(--ax-radius-card);
  box-shadow: var(--ax-shadow-container);
  padding: 16px 24px 20px;
  margin-bottom: 16px !important;
}

.layout-content.status-full-history .month .month-title {
  font-size: 16px !important;
  line-height: 24px !important;
  font-weight: 600 !important;
  border-bottom: 1px solid var(--ax-border) !important;
  padding: 0 0 12px !important;
  margin: 0 0 4px !important;
}

.layout-content.status-full-history .month .incident-container {
  border-color: var(--ax-border) !important;
  padding: 12px 0 0 !important;
  margin: 0 !important;
}

.layout-content.status-full-history .month .incident-title {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  font-size: 14px !important;
  line-height: 20px !important;
  font-weight: 600 !important;
  color: var(--ax-content-default) !important;
}

.layout-content.status-full-history .month .incident-body {
  font-size: 14px !important;
  line-height: 20px !important;
  color: var(--ax-content-secondary) !important;
  margin: 2px 0 0 16px !important;
}

.layout-content.status-full-history .month .incident-container .secondary {
  font-size: 12px !important;
  line-height: 16px !important;
  color: var(--ax-content-tertiary) !important;
  margin: 2px 0 0 16px !important;
}

.layout-content.status-full-history .expand-incidents {
  box-sizing: border-box;
  height: 32px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  margin-top: 16px !important;
  border-radius: var(--ax-radius-button) !important;
  border: 1px solid var(--ax-border) !important;
  color: var(--ax-content-default) !important;
  font-size: 14px !important;
  font-weight: 500;
}

.layout-content.status-full-history .expand-incidents:hover {
  background: var(--ax-hover);
}

/* Impact dots (Axiom Dot) instead of colored titles */
.layout-content.status-full-history .month .incident-title::before,
.layout-content.status.status-index .incidents-list .incident-title::before {
  content: '';
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #a3a19e;
}

.layout-content.status.status-index .incidents-list .incident-title {
  display: flex !important;
  align-items: center;
  gap: 8px;
}

.layout-content.status-full-history .month .incident-title.impact-minor::before,
.layout-content.status.status-index .incidents-list .incident-title.impact-minor::before {
  background: var(--ax-minor);
}
.layout-content.status-full-history .month .incident-title.impact-major::before,
.layout-content.status.status-index .incidents-list .incident-title.impact-major::before {
  background: var(--ax-major);
}
.layout-content.status-full-history .month .incident-title.impact-critical::before,
.layout-content.status.status-index .incidents-list .incident-title.impact-critical::before {
  background: var(--ax-critical);
}
.layout-content.status-full-history .month .incident-title.impact-maintenance::before,
.layout-content.status.status-index .incidents-list .incident-title.impact-maintenance::before {
  background: var(--ax-maintenance);
}

/* Uptime page (calendar) */
.layout-content .uptime-calendar-display {
  background: var(--ax-surface-card);
  border: 1px solid var(--ax-border);
  border-radius: var(--ax-radius-card);
  box-shadow: var(--ax-shadow-container);
  padding: 20px 16px 16px;
}

.layout-content .uptime-calendar-display .calendar-month {
  margin-bottom: 0 !important;
}

.layout-content .calendar-month .month-name {
  font-size: 14px !important;
  line-height: 20px !important;
  font-weight: 600 !important;
  color: var(--ax-content-default) !important;
}

.layout-content .calendar-month .month-uptime {
  font-size: 12px !important;
  font-weight: 500;
  color: var(--ax-content-tertiary) !important;
}

.layout-content .uptime-calendar-display svg.day rect {
  rx: 4px;
  ry: 4px;
}

.layout-content .uptime-calendar-display svg.day.active:hover rect,
.layout-content .uptime-calendar-display svg.day.active:focus rect {
  opacity: 0.8;
}

.layout-content .select-input__control {
  box-sizing: border-box;
  min-height: 32px !important;
  height: 32px;
  background: var(--ax-surface-card) !important;
  border: 1px solid var(--ax-border) !important;
  border-radius: var(--ax-radius-button) !important;
  box-shadow: none !important;
  font-size: 14px !important;
}

.layout-content .select-input__control--is-focused {
  border-color: var(--ax-focus) !important;
}

.layout-content .select-input__value-container {
  padding: 0 12px !important;
}

.layout-content .select-input__single-value {
  color: var(--ax-content-default) !important;
  font-weight: 500;
}

.layout-content .select-input__indicator {
  padding: 0 8px !important;
  color: var(--ax-content-secondary) !important;
}

.layout-content .select-input__indicator-separator {
  display: none;
}

.select-input__menu {
  border: 1px solid var(--ax-border) !important;
  border-radius: var(--ax-radius-button) !important;
  box-shadow: var(--ax-shadow-container) !important;
  overflow: hidden;
  font-size: 14px !important;
}

.select-input__option--is-focused {
  background: var(--ax-hover) !important;
  color: var(--ax-content-default) !important;
}

.select-input__option--is-selected {
  background: var(--ax-surface-secondary) !important;
  color: var(--ax-content-default) !important;
  font-weight: 500;
}

/* Incident detail page */
.layout-content.status-incident .incident-name {
  font-size: 24px !important;
  line-height: 32px !important;
  font-weight: 600 !important;
}
.layout-content.status-incident .incident-name.impact-none {
  color: var(--ax-content-default) !important;
}
.layout-content.status-incident .incident-name.impact-minor {
  color: var(--ax-minor-content) !important;
}
.layout-content.status-incident .incident-name.impact-major {
  color: var(--ax-major-content) !important;
}
.layout-content.status-incident .incident-name.impact-critical {
  color: var(--ax-critical-content) !important;
}
.layout-content.status-incident .incident-name.impact-maintenance {
  color: var(--ax-maintenance-content) !important;
}

.layout-content.status-incident .incident-updates-container {
  background: var(--ax-surface-card);
  border: 1px solid var(--ax-border);
  border-radius: var(--ax-radius-card);
  padding: 8px 24px;
}

/* Footer */
.page-footer {
  border-color: var(--ax-border) !important;
  color: var(--ax-content-tertiary) !important;
}

.page-footer a,
.powered-by,
.powered-by a {
  color: var(--ax-content-tertiary) !important;
}