/* =========================================================
   Arkansas State University ITS Statuspage
   Light A-State Theme - Production CSS
   ========================================================= */


/* =========================================================
   0. Theme Tokens
   ========================================================= */

:root {
  /* A-State inspired accents. These reds pass WCAG 2.1 AA on white. */
  --asu-red: #c8102e;
  --asu-red-true: #c8102e;
  --asu-red-dark: #760018;
  --asu-red-soft: #fdf1f4;

  /* Light neutrals */
  --wolf-bg: #f6f7f9;
  --wolf-bg-2: #ffffff;
  --wolf-panel: #ffffff;
  --wolf-panel-2: #f9fafc;
  --wolf-panel-3: #eef1f5;
  --wolf-row: #ffffff;
  --wolf-row-alt: #f7f8fb;

  --wolf-text: #17181d;
  --wolf-muted: #555c68;
  --wolf-dim: #737b87;

  --wolf-border: rgba(23, 24, 29, 0.12);
  --wolf-border-strong: rgba(23, 24, 29, 0.20);

  /* Status semantics tuned for white backgrounds */
  --status-good: #0b6b35;
  --status-good-bright: #0b6b35;
  --status-good-soft: #edf7f1;
  --status-degraded: #755000;
  --status-degraded-soft: #fff7df;
  --status-partial: #874000;
  --status-partial-soft: #fff0e4;
  --status-bad: #870018;
  --status-bad-bright: #870018;
  --status-bad-soft: #fdf1f4;

  /* Shape / elevation */
  --radius-lg: 18px;
  --radius-md: 12px;
  --shadow-soft: 0 14px 34px rgba(23, 24, 29, 0.08);
  --shadow-heavy: 0 24px 70px rgba(23, 24, 29, 0.12);

  /* Accessible action colors */
  --action-bg: var(--asu-red);
  --action-bg-hover: var(--asu-red-dark);
  --action-text: #ffffff;
  --action-border: rgba(118, 0, 24, 0.42);

  /* Links on light backgrounds */
  --link-accent: #9f001f;
  --link-accent-hover: #760018;

  /* Header logo sizing */
  --astate-logo-frame-width: 180px;
  --astate-logo-frame-height: 104px;
  --astate-logo-height: 104px;
  --astate-logo-scale: 1.5;
}


/* =========================================================
   1. Global Page Shell
   ========================================================= */

html,
body,
.layout-content {
  background: #ffffff !important;
  color: var(--wolf-text) !important;
  border-left: 0 !important;
}

body {
  font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Remove accidental page-edge rails */
html::before,
body::before,
.layout-content::before,
.container::before,
.status-page::before {
  content: none !important;
  display: none !important;
  background: transparent !important;
  border-left: 0 !important;
}

.container {
  width: 92%;
  max-width: 1080px;
  color: var(--wolf-text) !important;
  border-left: 0 !important;
}

.layout-content .container {
  color: var(--wolf-text) !important;
}

a {
  color: var(--link-accent) !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

a:hover,
a:focus {
  color: var(--link-accent-hover) !important;
  text-decoration-thickness: 2px;
}

a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid #17181d !important;
  outline-offset: 3px !important;
}


/* =========================================================
   2. Native Statuspage Header Cleanup
   ========================================================= */

.header-container,
.page-header,
.header,
.masthead-container {
  background: transparent !important;
  border: 0 !important;
  color: var(--wolf-text) !important;
}

.header-container::after,
.page-header::after {
  content: none !important;
  display: none !important;
}


/* =========================================================
   3. Typography
   ========================================================= */

h1,
h2,
h3,
h4,
.font-largest,
.font-large,
.section-title,
.name,
.component-name,
.incident-title,
.maintenance-title {
  color: var(--wolf-text) !important;
}

p,
.font-regular,
small,
.uptime-footer,
.incident-body,
.maintenance-body {
  color: var(--wolf-muted) !important;
}


/* =========================================================
   4. Overall Page Status Banner
   ========================================================= */

.page-status,
.page-status.status-none,
.page-status.status-minor,
.page-status.status-major,
.page-status.status-critical {
  text-align: center !important;
}

.page-status {
  margin-top: 34px;
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--wolf-border-strong) !important;
  border-left: 0 !important;
  box-shadow: var(--shadow-heavy);
  overflow: hidden;
}

.page-status .status,
.page-status .status.font-large,
.status.font-large {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  color: var(--wolf-text) !important;
  font-weight: 900;
  letter-spacing: 0;
}

.page-status.status-none {
  background:
    linear-gradient(135deg, #f4fbf6 0%, #e5f5eb 48%, #ffffff 100%) !important;
  box-shadow:
    inset 7px 0 0 var(--status-good),
    var(--shadow-heavy) !important;
}

.page-status.status-minor {
  background:
    linear-gradient(135deg, #fffaf0 0%, #fff1c8 48%, #ffffff 100%) !important;
  box-shadow:
    inset 7px 0 0 var(--status-degraded),
    var(--shadow-heavy) !important;
}

.page-status.status-major {
  background:
    linear-gradient(135deg, #fff5ec 0%, #ffe2c9 48%, #ffffff 100%) !important;
  box-shadow:
    inset 7px 0 0 var(--status-partial),
    var(--shadow-heavy) !important;
}

.page-status.status-critical {
  background: #ffffff !important;
  box-shadow:
    inset 7px 0 0 var(--status-bad),
    var(--shadow-heavy) !important;
}


/* =========================================================
   5. About / Page Description Block
   ========================================================= */

.about-this-page,
.about-section,
.page-description {
  background: var(--wolf-panel) !important;
  border: 1px solid var(--wolf-border) !important;
  border-radius: var(--radius-lg) !important;
  padding: 26px !important;
  margin: 32px 0 !important;
  box-shadow: var(--shadow-soft);
}

div.text-section {
  text-align: center !important;
}

div.text-section h2.font-largest {
  text-align: center !important;
  margin-top: 0 !important;
  margin-bottom: 12px !important;
  padding: 0 !important;
  line-height: 1.15 !important;
}

#about-this-site {
  display: inline-block !important;
  color: var(--wolf-text) !important;
  text-decoration: none !important;
}

div.text-section p:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.astate-about-centered {
  max-width: 820px;
  margin: 0 auto !important;
  padding: 0 !important;
  text-align: center !important;
}

.astate-about-description {
  margin: 0 0 12px 0 !important;
  padding: 0 !important;
  line-height: 1.35 !important;
  color: var(--wolf-muted) !important;
}

.astate-about-helpdesk {
  display: inline-flex !important;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 11px;
  margin: 0 !important;
  padding: 6px 13px !important;
  border-radius: 999px;
  background: var(--asu-red-soft);
  border: 1px solid rgba(23, 24, 29, 0.18);
  color: var(--wolf-muted) !important;
  line-height: 1.25 !important;
  font-weight: 500 !important;
  letter-spacing: 0;
}

.astate-about-helpdesk strong {
  color: var(--wolf-text) !important;
  font-weight: 700 !important;
  letter-spacing: 0;
}

.astate-about-helpdesk a {
  color: var(--link-accent) !important;
  font-weight: 800 !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  letter-spacing: 0;
  border-radius: 6px;
  padding: 1px 3px;
}

.astate-about-helpdesk a:hover,
.astate-about-helpdesk a:focus {
  color: var(--link-accent-hover) !important;
  background: var(--wolf-panel-2);
  text-decoration-thickness: 2px;
  outline: 2px solid rgba(23, 24, 29, 0.28);
  outline-offset: 2px;
}


/* =========================================================
   6. Main Section / Card Containers
   ========================================================= */

.components-section,
.components-container,
.incidents-section,
.scheduled-maintenances-section,
.history-section,
.system-metrics-container {
  background: rgba(255, 255, 255, 0.88) !important;
  border: 1px solid var(--wolf-border) !important;
  border-left-color: var(--wolf-border) !important;
  border-radius: var(--radius-lg) !important;
  color: var(--wolf-text) !important;
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(8px);
}


/* =========================================================
   7. Component / Incident / Maintenance Cards
   ========================================================= */

.component-container,
.incident-container,
.maintenance-container {
  position: relative;
  isolation: isolate;
  overflow: visible !important;
  margin-bottom: 12px !important;
  border: 1px solid var(--wolf-border) !important;
  border-radius: var(--radius-md) !important;
  background: var(--wolf-panel) !important;
  color: var(--wolf-text) !important;
  box-shadow: 0 10px 24px rgba(23, 24, 29, 0.06);
}

.component-container + .component-container {
  margin-top: 12px !important;
}

.component-container::before,
.incident-container::before,
.maintenance-container::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  background: linear-gradient(180deg, var(--asu-red), var(--asu-red-dark)) !important;
  z-index: 1;
}

.component-container::after,
.incident-container::after,
.maintenance-container::after,
.component-inner-container::before,
.component-inner-container::after,
.component-status::before {
  content: none !important;
  display: none !important;
}


/* =========================================================
   8. Component Rows
   ========================================================= */

.component-inner-container {
  position: relative;
  z-index: 2;
  padding: 18px 22px 18px 26px !important;
  min-height: 58px;
  box-sizing: border-box;
  overflow: visible !important;
  background: transparent !important;
}

.component-inner-container:hover {
  background: var(--wolf-panel-2) !important;
}

.component-name,
.name {
  color: var(--wolf-text) !important;
  font-weight: 800 !important;
  letter-spacing: 0;
  position: relative;
  z-index: 3;
}

.component-container > .component-inner-container > .name,
.component-container > .component-inner-container > .component-name {
  font-weight: 850 !important;
}

.component-inner-container:not(:has(.uptime-bar)):not(:has(.uptime-day)):not(:has(.uptime-container)) {
  background-image:
    linear-gradient(
      90deg,
      transparent 0%,
      transparent 42%,
      rgba(23, 24, 29, 0.15) 42%,
      rgba(23, 24, 29, 0.15) 78%,
      transparent 78%,
      transparent 100%
    ) !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: 100% 1px !important;
}


/* =========================================================
   9. Component Status Text
   ========================================================= */

.component-status,
.component-status span,
.component-container .component-status,
.component-container .component-status span,
.component-container .component-status a {
  position: relative;
  z-index: 3;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  text-align: right !important;
  white-space: nowrap !important;
  background: var(--wolf-panel-2) !important;
  border: 1px solid var(--wolf-border-strong) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  padding: 4px 10px !important;
  margin: 0 !important;
  color: var(--wolf-text) !important;
}

.component-status-operational,
.status-green,
.status-operational,
.operational,
.component-status.status-green,
.component-status[title="Operational"] {
  color: var(--wolf-text) !important;
  border-color: rgba(11, 107, 53, 0.46) !important;
}

.component-status-degraded_performance,
.status-yellow,
.degraded-performance,
.component-status.status-yellow {
  color: var(--wolf-text) !important;
  border-color: rgba(117, 80, 0, 0.46) !important;
}

.component-status-partial_outage,
.status-orange,
.partial-outage,
.component-status.status-orange {
  color: var(--wolf-text) !important;
  border-color: rgba(135, 64, 0, 0.46) !important;
}

.component-status-major_outage,
.status-red,
.major-outage,
.component-status.status-red {
  color: var(--wolf-text) !important;
  border-color: rgba(135, 0, 24, 0.46) !important;
}


/* =========================================================
   10. Child Services
   ========================================================= */

.components-section,
.components-container,
.component-container,
.component-inner-container,
.child-components-container,
.component-container .children,
.uptime-container {
  overflow: visible !important;
}

.component-container:hover,
.component-container:focus-within {
  z-index: 50;
}

.child-components-container,
.component-container .children {
  margin-top: 0 !important;
  padding: 0 20px 20px 20px !important;
  background: var(--wolf-row-alt) !important;
  border-top: 1px solid var(--wolf-border) !important;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.child-components-container .component-inner-container,
.component-container .children .component-inner-container {
  padding: 16px 20px 16px 42px !important;
  min-height: 60px;
  border-top: 1px solid rgba(23, 24, 29, 0.08) !important;
  background-color: transparent !important;
}

.child-components-container .component-name,
.child-components-container .name,
.component-container .children .component-name,
.component-container .children .name {
  font-weight: 750 !important;
}


/* =========================================================
   11. Question Mark / Description Icons
   ========================================================= */

.tooltip-base,
.tooltipstered,
.help-icon,
.question-mark,
.icon-question-sign,
.icon-question,
.fa-question,
.fa-question-circle,
span[title],
span[data-toggle="tooltip"] {
  color: var(--wolf-dim) !important;
  border-color: rgba(23, 24, 29, 0.38) !important;
  opacity: 0.95 !important;
}


/* =========================================================
   12. Uptime Tracker
   ========================================================= */

.uptime-container {
  background: transparent !important;
  border: 0 !important;
  border-left: 0 !important;
  box-shadow: none !important;
  color: var(--wolf-muted) !important;
}

.uptime-bar,
.uptime-day,
svg rect.uptime-day,
rect.uptime-day {
  border-radius: 4px !important;
  position: relative;
  z-index: 2;
  stroke: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.uptime-day.component-status-operational,
.uptime-day.status-none,
svg rect.uptime-day.component-status-operational,
rect.uptime-day.component-status-operational,
svg rect.uptime-day.status-none,
rect.uptime-day.status-none {
  fill: var(--status-good) !important;
  background-color: var(--status-good) !important;
}

.uptime-day.component-status-degraded_performance,
.uptime-day.status-minor,
svg rect.uptime-day.component-status-degraded_performance,
rect.uptime-day.component-status-degraded_performance,
svg rect.uptime-day.status-minor,
rect.uptime-day.status-minor {
  fill: var(--status-degraded) !important;
  background-color: var(--status-degraded) !important;
}

.uptime-day.component-status-partial_outage,
.uptime-day.status-major,
svg rect.uptime-day.component-status-partial_outage,
rect.uptime-day.component-status-partial_outage,
svg rect.uptime-day.status-major,
rect.uptime-day.status-major {
  fill: var(--status-partial) !important;
  background-color: var(--status-partial) !important;
}

.uptime-day.component-status-major_outage,
.uptime-day.status-critical,
svg rect.uptime-day.component-status-major_outage,
rect.uptime-day.component-status-major_outage,
svg rect.uptime-day.status-critical,
rect.uptime-day.status-critical {
  fill: var(--status-bad) !important;
  background-color: var(--status-bad) !important;
}

.uptime-day:hover,
.uptime-day:focus,
.uptime-bar:hover,
.uptime-bar:focus,
svg rect.uptime-day:hover,
svg rect.uptime-day:focus,
svg rect.uptime-day:active,
rect.uptime-day:hover,
rect.uptime-day:focus,
rect.uptime-day:active {
  outline: none !important;
  box-shadow: none !important;
  stroke: rgba(23, 24, 29, 0.38) !important;
  stroke-width: 1px !important;
  filter: brightness(1.05) saturate(1.06);
}

svg rect.uptime-day:focus-visible,
rect.uptime-day:focus-visible,
.uptime-day:focus-visible {
  outline: none !important;
  stroke: rgba(23, 24, 29, 0.46) !important;
  stroke-width: 1px !important;
}

.uptime-legend,
.uptime-footer {
  color: var(--wolf-muted) !important;
}

.components-uptime-link,
.components-uptime-link *,
.history-footer-link,
.history-footer-link * {
  color: var(--wolf-muted) !important;
}

.components-uptime-link a,
.history-footer-link a {
  color: var(--link-accent) !important;
  font-weight: 800 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
}

.components-uptime-link a:hover,
.history-footer-link a:hover {
  color: var(--link-accent-hover) !important;
}

.components-uptime-link.history-footer-link {
  padding-right: 18px !important;
  box-sizing: border-box;
}


/* =========================================================
   13. Tooltips
   ========================================================= */

.tooltip {
  opacity: 1 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  z-index: 999999 !important;
}

.tooltip .tooltip-inner,
.tooltip-inner,
.tooltipster-box,
.tooltipster-content,
.popover,
.popover-content,
.tippy-box,
.tippy-content,
[role="tooltip"] {
  background: #ffffff !important;
  color: var(--wolf-text) !important;
  border: 1px solid var(--wolf-border-strong) !important;
  border-radius: 10px !important;
  box-shadow: 0 18px 44px rgba(23, 24, 29, 0.18) !important;
  text-shadow: none !important;
}

.tooltip .tooltip-inner *,
.tooltip-inner *,
.tooltipster-content *,
.popover-content *,
.tippy-content *,
[role="tooltip"] * {
  color: var(--wolf-text) !important;
  background: transparent !important;
  text-shadow: none !important;
}

.tooltip.top .tooltip-arrow,
.tooltip.bs-tooltip-top .tooltip-arrow::before {
  border-top-color: #ffffff !important;
}

.tooltip.bottom .tooltip-arrow,
.tooltip.bs-tooltip-bottom .tooltip-arrow::before {
  border-bottom-color: #ffffff !important;
}

.tooltip.left .tooltip-arrow,
.tooltip.bs-tooltip-left .tooltip-arrow::before {
  border-left-color: #ffffff !important;
}

.tooltip.right .tooltip-arrow,
.tooltip.bs-tooltip-right .tooltip-arrow::before {
  border-right-color: #ffffff !important;
}

.tooltip-box,
body .tooltip-box {
  position: absolute !important;
  z-index: 1000000 !important;
  overflow: visible !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: var(--wolf-text) !important;
  border: 1px solid var(--wolf-border-strong) !important;
  border-radius: 10px !important;
  box-shadow: 0 18px 44px rgba(23, 24, 29, 0.18) !important;
  text-shadow: none !important;
}

.tooltip-box *,
body .tooltip-box * {
  color: var(--wolf-text) !important;
  background: transparent !important;
  background-color: transparent !important;
  text-shadow: none !important;
}

.tooltip-box::before,
.tooltip-box::after {
  border-color: #ffffff !important;
}


/* =========================================================
   14. Incidents / Maintenance / History Cards
   ========================================================= */

.incident-container,
.maintenance-container {
  padding: 22px 28px 22px 34px !important;
  box-sizing: border-box;
}

.incident-container > *,
.maintenance-container > * {
  position: relative;
  z-index: 2;
}

.incident-title,
.maintenance-title,
.incident-name,
.maintenance-name {
  display: block;
  padding-left: 0 !important;
  margin-left: 0 !important;
  color: var(--wolf-text) !important;
  font-weight: 850 !important;
}

.incident-updates,
.maintenance-updates {
  border-left-color: rgba(23, 24, 29, 0.42) !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
}

.incident-body,
.maintenance-body {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

.incident-container::before,
.maintenance-container::before {
  z-index: 1 !important;
}

.incident-container a.whitespace-pre-wrap,
.maintenance-container a.whitespace-pre-wrap {
  color: var(--link-accent) !important;
  font-weight: 850 !important;
}

.incident-container a.whitespace-pre-wrap:hover,
.maintenance-container a.whitespace-pre-wrap:hover {
  color: var(--link-accent-hover) !important;
  text-decoration: underline !important;
}


/* =========================================================
   15. History Page Tabs: Incidents / Uptime
   ========================================================= */

a.button,
.button {
  background: #ffffff !important;
  color: var(--wolf-muted) !important;
  border-color: var(--wolf-border) !important;
  border-radius: 6px 6px 0 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
  transition:
    background-color 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease,
    color 140ms ease,
    transform 140ms ease;
}

a.button:not(.current):hover,
a.button:not(.current):focus,
.button:not(.current):hover,
.button:not(.current):focus {
  color: var(--link-accent-hover) !important;
  background: #ffffff !important;
  border-color: rgba(23, 24, 29, 0.50) !important;
  box-shadow: 0 8px 18px rgba(23, 24, 29, 0.10) !important;
  transform: translateY(-1px);
}

a.button[href*="uptime"]:not(.current),
a.button[href*="uptime"]:not(.current)[style],
.button[href*="uptime"]:not(.current),
.button[href*="uptime"]:not(.current)[style] {
  color: var(--wolf-text) !important;
  border-color: rgba(23, 24, 29, 0.32) !important;
  font-weight: 850 !important;
}

a.button[href*="uptime"]:not(.current):hover,
a.button[href*="uptime"]:not(.current):focus,
a.button[href*="uptime"]:not(.current)[style]:hover,
a.button[href*="uptime"]:not(.current)[style]:focus,
.button[href*="uptime"]:not(.current):hover,
.button[href*="uptime"]:not(.current):focus,
.button[href*="uptime"]:not(.current)[style]:hover,
.button[href*="uptime"]:not(.current)[style]:focus {
  color: var(--link-accent-hover) !important;
  background: #ffffff !important;
  border-color: var(--asu-red) !important;
  box-shadow:
    inset 0 -3px 0 var(--asu-red),
    0 10px 22px rgba(23, 24, 29, 0.12) !important;
}

a.button.current,
a.button.current.border-color,
.button.current,
.button.current.border-color,
a.current.border-color,
a.button.current.border-color[style],
a.button.current[style],
.button.current.border-color[style],
.button.current[style] {
  background: var(--asu-red) !important;
  color: #ffffff !important;
  border-color: var(--asu-red) !important;
  border-bottom-color: var(--asu-red) !important;
  box-shadow: 0 10px 24px rgba(23, 24, 29, 0.18) !important;
}

.tabs,
.nav-tabs,
.history-tabs,
.tab-container,
.tab-nav {
  background: transparent !important;
  border-color: var(--wolf-border-strong) !important;
}

.tab-content,
.history-tab-content,
.history-content,
.uptime-content {
  background: transparent !important;
  color: var(--wolf-text) !important;
  border-color: var(--wolf-border) !important;
}


/* =========================================================
   15a. History Uptime Light-Mode Overrides
   ========================================================= */

#uptime,
#uptime-history,
.uptime-page,
.history-uptime,
.uptime-history,
.uptime-history-container,
.uptime-content,
.uptime-section,
.uptime-section-container,
.uptime-90-days,
.uptime-calendar,
.uptime-calendar-container,
.uptime-chart,
.uptime-chart-container,
.uptime-list,
.uptime-table,
.component-uptime,
.component-uptime-container,
.component-uptime-wrapper,
.components-uptime,
.metrics-display,
.metrics-container,
.metric-container,
.system-metrics-container,
.history-section .uptime-container,
.history-section .components-container,
.history-section .component-container {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: var(--wolf-text) !important;
  border-color: var(--wolf-border) !important;
  text-shadow: none !important;
}

.history-section,
.history-content,
.history-tab-content,
.tab-content,
.uptime-content {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

.history-section table,
.history-section .table,
.uptime-content table,
.uptime-content .table,
.uptime-history table,
.uptime-history .table,
.component-uptime table,
.component-uptime .table {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: var(--wolf-text) !important;
  border-color: var(--wolf-border) !important;
}

.history-section tr,
.history-section td,
.history-section th,
.uptime-content tr,
.uptime-content td,
.uptime-content th,
.uptime-history tr,
.uptime-history td,
.uptime-history th,
.component-uptime tr,
.component-uptime td,
.component-uptime th {
  background-color: #ffffff !important;
  color: var(--wolf-text) !important;
  border-color: var(--wolf-border) !important;
}

.history-section tr:nth-child(even),
.uptime-content tr:nth-child(even),
.uptime-history tr:nth-child(even),
.component-uptime tr:nth-child(even) {
  background-color: var(--wolf-panel-2) !important;
}

.history-section p,
.history-section small,
.history-section span,
.history-section label,
.uptime-content p,
.uptime-content small,
.uptime-content span,
.uptime-content label,
.uptime-history p,
.uptime-history small,
.uptime-history span,
.uptime-history label,
.component-uptime p,
.component-uptime small,
.component-uptime span,
.component-uptime label {
  color: var(--wolf-muted) !important;
  text-shadow: none !important;
}

.history-section h1,
.history-section h2,
.history-section h3,
.history-section h4,
.history-section .font-largest,
.history-section .font-large,
.history-section .component-name,
.history-section .name,
.uptime-content h1,
.uptime-content h2,
.uptime-content h3,
.uptime-content h4,
.uptime-content .font-largest,
.uptime-content .font-large,
.uptime-content .component-name,
.uptime-content .name,
.uptime-history h1,
.uptime-history h2,
.uptime-history h3,
.uptime-history h4,
.uptime-history .font-largest,
.uptime-history .font-large,
.uptime-history .component-name,
.uptime-history .name {
  color: var(--wolf-text) !important;
  text-shadow: none !important;
}

.history-section a,
.uptime-content a,
.uptime-history a,
.component-uptime a {
  color: var(--link-accent) !important;
}

.history-section a:hover,
.history-section a:focus,
.uptime-content a:hover,
.uptime-content a:focus,
.uptime-history a:hover,
.uptime-history a:focus,
.component-uptime a:hover,
.component-uptime a:focus {
  color: var(--link-accent-hover) !important;
}

.history-section a.button.current,
.history-section a.button.current[style],
.history-section .button.current,
.history-section .button.current[style],
.uptime-content a.button.current,
.uptime-content a.button.current[style],
.uptime-content .button.current,
.uptime-content .button.current[style],
.uptime-history a.button.current,
.uptime-history a.button.current[style],
.uptime-history .button.current,
.uptime-history .button.current[style] {
  color: #ffffff !important;
  background: var(--asu-red) !important;
  background-color: var(--asu-red) !important;
  border-color: var(--asu-red) !important;
}

.history-section .component-status,
.history-section .component-status span,
.history-section .component-status a,
.uptime-content .component-status,
.uptime-content .component-status span,
.uptime-content .component-status a,
.uptime-history .component-status,
.uptime-history .component-status span,
.uptime-history .component-status a {
  font-weight: 900 !important;
  color: var(--status-good-bright) !important;
}

.history-section .component-status-degraded_performance,
.history-section .status-yellow,
.history-section .degraded-performance,
.uptime-content .component-status-degraded_performance,
.uptime-content .status-yellow,
.uptime-content .degraded-performance,
.uptime-history .component-status-degraded_performance,
.uptime-history .status-yellow,
.uptime-history .degraded-performance {
  color: var(--status-degraded) !important;
}

.history-section .component-status-partial_outage,
.history-section .status-orange,
.history-section .partial-outage,
.uptime-content .component-status-partial_outage,
.uptime-content .status-orange,
.uptime-content .partial-outage,
.uptime-history .component-status-partial_outage,
.uptime-history .status-orange,
.uptime-history .partial-outage {
  color: var(--status-partial) !important;
}

.history-section .component-status-major_outage,
.history-section .status-red,
.history-section .major-outage,
.uptime-content .component-status-major_outage,
.uptime-content .status-red,
.uptime-content .major-outage,
.uptime-history .component-status-major_outage,
.uptime-history .status-red,
.uptime-history .major-outage {
  color: var(--status-bad-bright) !important;
}


/* =========================================================
   16. Forms / Inputs / Modals
   ========================================================= */

.modal,
.modal-content,
.form-container,
.subscriber-form {
  background: var(--wolf-panel) !important;
  color: var(--wolf-text) !important;
  border-color: var(--wolf-border) !important;
}

input,
select,
textarea {
  background: #ffffff !important;
  color: var(--wolf-text) !important;
  border: 1px solid var(--wolf-border-strong) !important;
  border-radius: 10px !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--wolf-dim) !important;
}

input:focus,
select:focus,
textarea:focus {
  outline: 2px solid rgba(23, 24, 29, 0.32) !important;
  border-color: var(--asu-red) !important;
}


/* =========================================================
   17. Tables / Miscellaneous
   ========================================================= */

table,
.table {
  background: var(--wolf-panel) !important;
  color: var(--wolf-text) !important;
  border-color: var(--wolf-border) !important;
}

td,
th {
  border-color: var(--wolf-border) !important;
}

hr {
  border-color: var(--wolf-border) !important;
}

.powered-by,
.powered-by a,
.atlassian-statuspage,
a[href*="statuspage"] {
  color: var(--link-accent) !important;
}


/* =========================================================
   18. Custom Header
   ========================================================= */

.custom-header-container {
  background: transparent !important;
  color: var(--wolf-text) !important;
  overflow: visible !important;
}

.astate-status-header {
  position: relative;
  z-index: 1000 !important;
  overflow: visible !important;
  width: 92%;
  max-width: 1080px;
  box-sizing: border-box;
  margin: 28px auto 28px auto !important;
  padding: 34px 34px 30px 34px;
  border: 1px solid var(--wolf-border);
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 20px 54px rgba(23, 24, 29, 0.10);
}

.astate-status-header::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: linear-gradient(180deg, var(--asu-red), var(--asu-red-dark));
}

.astate-status-header-inner {
  position: relative;
  z-index: 1001 !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  overflow: visible !important;
}

.astate-status-brand {
  display: flex;
  align-items: center;
  gap: 22px;
  min-width: 0;
}

.astate-status-brand-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 var(--astate-logo-frame-width);
  width: var(--astate-logo-frame-width);
  min-height: var(--astate-logo-frame-height);
  text-decoration: none;
  overflow: hidden;
}

.astate-status-logo {
  display: block;
  width: auto;
  max-width: var(--astate-logo-frame-width);
  height: var(--astate-logo-height);
  max-height: var(--astate-logo-frame-height);
  object-fit: contain;
  transform: scale(var(--astate-logo-scale));
  transform-origin: center center;
  filter: drop-shadow(0 8px 18px rgba(23, 24, 29, 0.12));
}

.astate-status-brand-text {
  min-width: 0;
}

.astate-status-kicker {
  color: var(--wolf-muted);
  font-size: 0.82rem;
  font-weight: 750;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.astate-status-title {
  margin: 0 0 8px 0 !important;
  color: var(--wolf-text) !important;
  font-size: 2rem !important;
  line-height: 1.05 !important;
  font-weight: 900 !important;
  letter-spacing: 0;
}

.astate-status-subtitle {
  margin: 0 !important;
  color: var(--wolf-muted) !important;
  font-size: 0.98rem;
  max-width: 720px;
  line-height: 1.55;
}

.astate-status-header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  position: relative !important;
  z-index: 1001 !important;
  overflow: visible !important;
}

.astate-status-secondary-link {
  color: var(--link-accent) !important;
  text-decoration: none;
  font-weight: 800;
  font-size: 0.92rem;
  padding: 10px 14px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid rgba(23, 24, 29, 0.22);
}

.astate-status-secondary-link:hover,
.astate-status-secondary-link:focus {
  background: var(--asu-red-soft);
  color: var(--link-accent-hover) !important;
  outline: 2px solid rgba(23, 24, 29, 0.28);
  outline-offset: 2px;
}

.astate-status-header-cta-stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  position: relative;
  z-index: 1001;
}

.astate-status-helpdesk-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(23, 24, 29, 0.20);
  background: #ffffff;
  color: var(--link-accent) !important;
  box-shadow: 0 10px 22px rgba(23, 24, 29, 0.08);
  font-weight: 850;
  font-size: 0.78rem;
  letter-spacing: 0.07em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none !important;
}

.astate-status-helpdesk-link:hover,
.astate-status-helpdesk-link:focus {
  background: var(--asu-red-soft);
  border-color: rgba(23, 24, 29, 0.32);
  color: var(--link-accent-hover) !important;
  outline: 2px solid rgba(23, 24, 29, 0.28);
  outline-offset: 2px;
}


/* =========================================================
   19. Native Statuspage Subscribe Control
   ========================================================= */

#replace-with-subscribe {
  position: relative !important;
  z-index: 1002 !important;
  overflow: visible !important;
}

#replace-with-subscribe #show-updates-dropdown,
#replace-with-subscribe a.show-updates-dropdown,
#show-updates-dropdown.show-updates-dropdown,
a[data-js-hook="show-updates-dropdown"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 42px !important;
  padding: 10px 16px !important;
  background: var(--action-bg) !important;
  background-color: var(--action-bg) !important;
  color: var(--action-text) !important;
  border: 1px solid var(--action-border) !important;
  border-radius: 999px !important;
  box-shadow: 0 12px 26px rgba(23, 24, 29, 0.22) !important;
  font-weight: 850 !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  line-height: 1 !important;
}

#replace-with-subscribe #show-updates-dropdown span,
#replace-with-subscribe a.show-updates-dropdown span,
#show-updates-dropdown.show-updates-dropdown span,
a[data-js-hook="show-updates-dropdown"] span {
  color: var(--action-text) !important;
  font-weight: 850 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
}

#show-updates-dropdown .subscribe-text-short,
a[data-js-hook="show-updates-dropdown"] .subscribe-text-short {
  display: none !important;
}

#show-updates-dropdown .subscribe-text-full,
a[data-js-hook="show-updates-dropdown"] .subscribe-text-full {
  display: inline !important;
}

#replace-with-subscribe #show-updates-dropdown:hover,
#replace-with-subscribe a.show-updates-dropdown:hover,
#show-updates-dropdown.show-updates-dropdown:hover,
a[data-js-hook="show-updates-dropdown"]:hover,
#replace-with-subscribe #show-updates-dropdown:focus,
#replace-with-subscribe a.show-updates-dropdown:focus,
#show-updates-dropdown.show-updates-dropdown:focus,
a[data-js-hook="show-updates-dropdown"]:focus {
  background: var(--action-bg-hover) !important;
  background-color: var(--action-bg-hover) !important;
  color: var(--action-text) !important;
  filter: none !important;
  outline: 2px solid rgba(23, 24, 29, 0.32) !important;
  outline-offset: 2px !important;
}


/* =========================================================
   20. Subscribe Dropdown
   ========================================================= */

.updates-dropdown,
.updates-dropdown-container,
.updates-dropdown-section,
.updates-dropdown-section-wrapper,
.updates-dropdown-sections-container,
.updates-dropdown-sections-container > * {
  overflow: visible !important;
  z-index: 999999 !important;
}

.updates-dropdown-sections-container {
  position: absolute !important;
  z-index: 999999 !important;
  overflow: visible !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: var(--wolf-text) !important;
  border: 1px solid var(--wolf-border-strong) !important;
  border-radius: 12px !important;
  box-shadow: 0 22px 54px rgba(23, 24, 29, 0.18) !important;
}

.updates-dropdown-sections-container,
.updates-dropdown-sections-container *,
.updates-dropdown-sections-container p,
.updates-dropdown-sections-container span,
.updates-dropdown-sections-container label,
.updates-dropdown-sections-container div {
  color: var(--wolf-text) !important;
  text-shadow: none !important;
}

.updates-dropdown-sections-container a {
  color: var(--link-accent) !important;
}

.updates-dropdown-sections-container input,
.updates-dropdown-sections-container select,
.updates-dropdown-sections-container textarea {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: var(--wolf-text) !important;
  border: 1px solid var(--wolf-border-strong) !important;
  border-radius: 8px !important;
}

.updates-dropdown-sections-container input::placeholder,
.updates-dropdown-sections-container textarea::placeholder {
  color: var(--wolf-dim) !important;
}

.updates-dropdown-sections-container .updates-dropdown-nav,
.updates-dropdown-sections-container .updates-dropdown-section,
.updates-dropdown-sections-container .updates-dropdown-section-wrapper {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-color: var(--wolf-border) !important;
}

.updates-dropdown-sections-container .updates-dropdown-nav a,
.updates-dropdown-sections-container .updates-dropdown-nav button,
.updates-dropdown-sections-container [role="tab"],
.updates-dropdown-sections-container .tab {
  background: var(--wolf-panel-2) !important;
  color: var(--wolf-text) !important;
  border-color: var(--wolf-border) !important;
}

.updates-dropdown-sections-container .active,
.updates-dropdown-sections-container .selected,
.updates-dropdown-sections-container [aria-selected="true"] {
  background: var(--asu-red) !important;
  color: #ffffff !important;
}

.updates-dropdown-sections-container button,
.updates-dropdown-sections-container input[type="submit"],
.updates-dropdown-sections-container .button {
  background: var(--asu-red) !important;
  color: #ffffff !important;
  border: 1px solid rgba(23, 24, 29, 0.42) !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
}

.updates-dropdown-sections-container button:hover,
.updates-dropdown-sections-container input[type="submit"]:hover,
.updates-dropdown-sections-container .button:hover {
  background: var(--asu-red-dark) !important;
  color: #ffffff !important;
}

.updates-dropdown-sections-container .disabled,
.updates-dropdown-sections-container [disabled],
.updates-dropdown-sections-container .muted {
  color: var(--wolf-dim) !important;
  opacity: 0.75 !important;
}


/* =========================================================
   21. Custom Footer
   ========================================================= */

.custom-footer-container {
  background: transparent !important;
  color: var(--wolf-text) !important;
}

.astate-status-footer {
  width: 92%;
  max-width: 1080px;
  box-sizing: border-box;
  margin: 34px auto 28px auto !important;
  padding: 26px 30px;
  border: 1px solid var(--wolf-border);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 16px 36px rgba(23, 24, 29, 0.08);
}

.astate-status-footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 28px;
}

.astate-status-footer-left {
  max-width: 760px;
}

.astate-status-footer-title {
  color: var(--wolf-text);
  font-weight: 850;
  margin-bottom: 8px;
  font-size: 1rem;
}

.astate-status-footer-text {
  margin: 0 !important;
  color: var(--wolf-muted) !important;
  line-height: 1.6;
}

.astate-status-footer-contact {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  color: var(--wolf-muted);
  font-weight: 700;
}

.astate-status-footer-contact span {
  color: var(--wolf-muted);
}

.astate-status-footer-contact a {
  color: var(--link-accent) !important;
  text-decoration: underline !important;
  font-weight: 850;
}

.astate-status-footer-contact a:hover,
.astate-status-footer-contact a:focus {
  color: var(--link-accent-hover) !important;
  text-decoration: underline !important;
}

.astate-status-footer-separator {
  color: rgba(23, 24, 29, 0.32) !important;
}

.astate-status-footer-right {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.astate-status-footer-link {
  color: var(--link-accent) !important;
  text-decoration: none !important;
  font-weight: 750;
  padding: 8px 12px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid rgba(23, 24, 29, 0.18);
}

.astate-status-footer-link:hover,
.astate-status-footer-link:focus {
  color: var(--link-accent-hover) !important;
  background: var(--asu-red-soft);
  border-color: rgba(23, 24, 29, 0.32);
}


/* =========================================================
   22. Responsive
   ========================================================= */

@media screen and (max-width: 900px) {
  .astate-status-header-inner,
  .astate-status-footer-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .astate-status-header-actions,
  .astate-status-footer-right {
    justify-content: flex-start;
  }

  .astate-status-logo {
    height: 92px;
  }

  .astate-status-header-cta-stack {
    align-items: flex-start;
  }

  .astate-status-helpdesk-link {
    width: auto;
  }
}

@media screen and (max-width: 780px) {
  .container {
    width: 94%;
  }

  .component-inner-container {
    padding: 16px 18px 16px 22px !important;
  }

  .child-components-container,
  .component-container .children {
    padding: 0 12px 14px 12px !important;
  }

  .child-components-container .component-inner-container,
  .component-container .children .component-inner-container {
    padding-left: 24px !important;
  }

  .component-inner-container {
    background-image: none !important;
  }
}

@media screen and (max-width: 640px) {
  .astate-status-header {
    padding: 24px 20px 22px 20px;
  }

  .astate-status-brand {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .astate-status-title {
    font-size: 1.6rem !important;
  }

  .astate-status-subtitle {
    font-size: 0.93rem;
  }

  .astate-about-helpdesk {
    border-radius: 14px;
    line-height: 1.35 !important;
  }
}


/* =========================================================
   23. Final History / Uptime Light-Mode Lock
   ========================================================= */

body,
body .layout-content,
body .layout-content > .container,
body .layout-content .container,
body .layout-content .history-section,
body .layout-content .history-content,
body .layout-content .history-tab-content,
body .layout-content .history-tabs,
body .layout-content .tab-content,
body .layout-content .tab-container,
body .layout-content .uptime-content,
body .layout-content .uptime-history,
body .layout-content .uptime-history-container,
body .layout-content .uptime-section,
body .layout-content .uptime-section-container,
body .layout-content .uptime-calendar,
body .layout-content .uptime-calendar-container,
body .layout-content .uptime-chart,
body .layout-content .uptime-chart-container,
body .layout-content .component-uptime,
body .layout-content .component-uptime-container,
body .layout-content .component-uptime-wrapper,
body .layout-content .system-metrics-container,
body .layout-content .metrics-container,
body .layout-content .metrics-display,
body .layout-content .metric-container,
body .layout-content #uptime,
body .layout-content #uptime-history {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: var(--wolf-text) !important;
  border-color: var(--wolf-border) !important;
  text-shadow: none !important;
}

body .layout-content .history-section [style*="background"]:not(.uptime-day):not(.uptime-bar),
body .layout-content .history-section [style*="background-color"]:not(.uptime-day):not(.uptime-bar),
body .layout-content .history-content [style*="background"]:not(.uptime-day):not(.uptime-bar),
body .layout-content .history-content [style*="background-color"]:not(.uptime-day):not(.uptime-bar),
body .layout-content .uptime-content [style*="background"]:not(.uptime-day):not(.uptime-bar),
body .layout-content .uptime-content [style*="background-color"]:not(.uptime-day):not(.uptime-bar),
body .layout-content .uptime-history [style*="background"]:not(.uptime-day):not(.uptime-bar),
body .layout-content .uptime-history [style*="background-color"]:not(.uptime-day):not(.uptime-bar),
body .layout-content #uptime [style*="background"]:not(.uptime-day):not(.uptime-bar),
body .layout-content #uptime [style*="background-color"]:not(.uptime-day):not(.uptime-bar),
body .layout-content #uptime-history [style*="background"]:not(.uptime-day):not(.uptime-bar),
body .layout-content #uptime-history [style*="background-color"]:not(.uptime-day):not(.uptime-bar) {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: var(--wolf-text) !important;
  text-shadow: none !important;
}

body .layout-content [style*="#050507"]:not(.uptime-day):not(.uptime-bar),
body .layout-content [style*="#090a0e"]:not(.uptime-day):not(.uptime-bar),
body .layout-content [style*="#12141a"]:not(.uptime-day):not(.uptime-bar),
body .layout-content [style*="#171a21"]:not(.uptime-day):not(.uptime-bar),
body .layout-content [style*="#20242d"]:not(.uptime-day):not(.uptime-bar),
body .layout-content [style*="#030304"]:not(.uptime-day):not(.uptime-bar),
body .layout-content [style*="#0d0f14"]:not(.uptime-day):not(.uptime-bar),
body .layout-content [style*="#181b22"]:not(.uptime-day):not(.uptime-bar),
body .layout-content [style*="rgb(5, 5, 7)"]:not(.uptime-day):not(.uptime-bar),
body .layout-content [style*="rgb(9, 10, 14)"]:not(.uptime-day):not(.uptime-bar),
body .layout-content [style*="rgb(18, 20, 26)"]:not(.uptime-day):not(.uptime-bar),
body .layout-content [style*="rgb(23, 26, 33)"]:not(.uptime-day):not(.uptime-bar),
body .layout-content [style*="rgb(32, 36, 45)"]:not(.uptime-day):not(.uptime-bar) {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: var(--wolf-text) !important;
}

body .layout-content .history-section table,
body .layout-content .history-section thead,
body .layout-content .history-section tbody,
body .layout-content .history-section tr,
body .layout-content .history-section th,
body .layout-content .history-section td,
body .layout-content .history-content table,
body .layout-content .history-content thead,
body .layout-content .history-content tbody,
body .layout-content .history-content tr,
body .layout-content .history-content th,
body .layout-content .history-content td,
body .layout-content .uptime-content table,
body .layout-content .uptime-content thead,
body .layout-content .uptime-content tbody,
body .layout-content .uptime-content tr,
body .layout-content .uptime-content th,
body .layout-content .uptime-content td,
body .layout-content .uptime-history table,
body .layout-content .uptime-history thead,
body .layout-content .uptime-history tbody,
body .layout-content .uptime-history tr,
body .layout-content .uptime-history th,
body .layout-content .uptime-history td {
  background-color: #ffffff !important;
  color: var(--wolf-text) !important;
  border-color: var(--wolf-border) !important;
}

body .layout-content .history-section tr:nth-child(even),
body .layout-content .history-content tr:nth-child(even),
body .layout-content .uptime-content tr:nth-child(even),
body .layout-content .uptime-history tr:nth-child(even) {
  background-color: var(--wolf-panel-2) !important;
}

body .layout-content .history-section h1,
body .layout-content .history-section h2,
body .layout-content .history-section h3,
body .layout-content .history-section h4,
body .layout-content .history-content h1,
body .layout-content .history-content h2,
body .layout-content .history-content h3,
body .layout-content .history-content h4,
body .layout-content .uptime-content h1,
body .layout-content .uptime-content h2,
body .layout-content .uptime-content h3,
body .layout-content .uptime-content h4,
body .layout-content .uptime-history h1,
body .layout-content .uptime-history h2,
body .layout-content .uptime-history h3,
body .layout-content .uptime-history h4,
body .layout-content .component-uptime h1,
body .layout-content .component-uptime h2,
body .layout-content .component-uptime h3,
body .layout-content .component-uptime h4 {
  color: var(--wolf-text) !important;
  text-shadow: none !important;
}

body .layout-content .history-section p,
body .layout-content .history-section small,
body .layout-content .history-section span:not(.component-status):not(.uptime-day),
body .layout-content .history-section label,
body .layout-content .history-content p,
body .layout-content .history-content small,
body .layout-content .history-content span:not(.component-status):not(.uptime-day),
body .layout-content .history-content label,
body .layout-content .uptime-content p,
body .layout-content .uptime-content small,
body .layout-content .uptime-content span:not(.component-status):not(.uptime-day),
body .layout-content .uptime-content label,
body .layout-content .uptime-history p,
body .layout-content .uptime-history small,
body .layout-content .uptime-history span:not(.component-status):not(.uptime-day),
body .layout-content .uptime-history label {
  color: var(--wolf-muted) !important;
  text-shadow: none !important;
}

body .layout-content a.button:not(.current),
body .layout-content .button:not(.current) {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: var(--wolf-text) !important;
  border-color: var(--wolf-border-strong) !important;
}

body .layout-content a.button:not(.current):hover,
body .layout-content a.button:not(.current):focus,
body .layout-content .button:not(.current):hover,
body .layout-content .button:not(.current):focus {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: var(--link-accent-hover) !important;
  border-color: var(--asu-red) !important;
  box-shadow:
    inset 0 -3px 0 var(--asu-red),
    0 10px 22px rgba(23, 24, 29, 0.12) !important;
  transform: translateY(-1px);
}

body .layout-content a.button.current,
body .layout-content a.button.current[style],
body .layout-content .button.current,
body .layout-content .button.current[style],
body .layout-content a[aria-selected="true"],
body .layout-content a[aria-current="page"] {
  background: var(--asu-red) !important;
  background-color: var(--asu-red) !important;
  color: #ffffff !important;
  border-color: var(--asu-red) !important;
}

body .layout-content .component-status,
body .layout-content .component-status span,
body .layout-content .component-status a,
body .layout-content .status-green,
body .layout-content .status-operational,
body .layout-content .operational {
  color: var(--status-good-bright) !important;
}

body .layout-content .component-status-degraded_performance,
body .layout-content .status-yellow,
body .layout-content .degraded-performance {
  color: var(--status-degraded) !important;
}

body .layout-content .component-status-partial_outage,
body .layout-content .status-orange,
body .layout-content .partial-outage {
  color: var(--status-partial) !important;
}

body .layout-content .component-status-major_outage,
body .layout-content .status-red,
body .layout-content .major-outage {
  color: var(--status-bad-bright) !important;
}


/* =========================================================
   24. WCAG 2.1 AA Red Accent Hardening
   ========================================================= */

body a:not(.button):not(.astate-status-secondary-link):not(.astate-status-helpdesk-link):not(.astate-status-footer-link):not([data-js-hook="show-updates-dropdown"]),
body a:not(.button):not(.astate-status-secondary-link):not(.astate-status-helpdesk-link):not(.astate-status-footer-link):not([data-js-hook="show-updates-dropdown"]):visited {
  color: var(--link-accent) !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1.5px !important;
  text-underline-offset: 3px !important;
}

body a:not(.button):not(.astate-status-secondary-link):not(.astate-status-helpdesk-link):not(.astate-status-footer-link):not([data-js-hook="show-updates-dropdown"]):hover,
body a:not(.button):not(.astate-status-secondary-link):not(.astate-status-helpdesk-link):not(.astate-status-footer-link):not([data-js-hook="show-updates-dropdown"]):focus {
  color: var(--link-accent-hover) !important;
  text-decoration-thickness: 2px !important;
}

body a:focus-visible,
body button:focus-visible,
body [role="button"]:focus-visible,
body input:focus-visible,
body select:focus-visible,
body textarea:focus-visible {
  outline: 3px solid #17181d !important;
  outline-offset: 3px !important;
}

.astate-status-secondary-link,
.astate-status-helpdesk-link,
.astate-status-footer-link,
#replace-with-subscribe #show-updates-dropdown,
#replace-with-subscribe a.show-updates-dropdown,
#show-updates-dropdown.show-updates-dropdown,
a[data-js-hook="show-updates-dropdown"],
body .layout-content a.button.current,
body .layout-content a.button.current[style],
body .layout-content .button.current,
body .layout-content .button.current[style],
.updates-dropdown-sections-container .active,
.updates-dropdown-sections-container .selected,
.updates-dropdown-sections-container [aria-selected="true"],
.updates-dropdown-sections-container button,
.updates-dropdown-sections-container input[type="submit"],
.updates-dropdown-sections-container .button {
  background: var(--action-bg) !important;
  background-color: var(--action-bg) !important;
  color: #ffffff !important;
  border-color: var(--action-bg) !important;
  text-decoration: none !important;
}

.astate-status-secondary-link:hover,
.astate-status-secondary-link:focus,
.astate-status-helpdesk-link:hover,
.astate-status-helpdesk-link:focus,
.astate-status-footer-link:hover,
.astate-status-footer-link:focus,
#replace-with-subscribe #show-updates-dropdown:hover,
#replace-with-subscribe a.show-updates-dropdown:hover,
#show-updates-dropdown.show-updates-dropdown:hover,
a[data-js-hook="show-updates-dropdown"]:hover,
#replace-with-subscribe #show-updates-dropdown:focus,
#replace-with-subscribe a.show-updates-dropdown:focus,
#show-updates-dropdown.show-updates-dropdown:focus,
a[data-js-hook="show-updates-dropdown"]:focus,
.updates-dropdown-sections-container button:hover,
.updates-dropdown-sections-container input[type="submit"]:hover,
.updates-dropdown-sections-container .button:hover {
  background: var(--action-bg-hover) !important;
  background-color: var(--action-bg-hover) !important;
  color: #ffffff !important;
  border-color: var(--action-bg-hover) !important;
}

.component-status,
.component-container .component-status,
.history-section .component-status,
.uptime-content .component-status,
.uptime-history .component-status,
body .layout-content .component-status {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 28px !important;
  padding: 5px 10px !important;
  border: 1px solid var(--wolf-border-strong) !important;
  border-radius: 999px !important;
  background: #f9fafc !important;
  background-color: #f9fafc !important;
  color: var(--status-good-bright) !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  text-align: right !important;
  text-shadow: none !important;
}

.component-status span,
.component-status a,
.component-container .component-status span,
.component-container .component-status a,
.history-section .component-status span,
.history-section .component-status a,
.uptime-content .component-status span,
.uptime-content .component-status a,
.uptime-history .component-status span,
.uptime-history .component-status a,
body .layout-content .component-status span,
body .layout-content .component-status a {
  display: inline !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  color: inherit !important;
  text-decoration: none !important;
}

.component-status-operational,
.status-green,
.status-operational,
.operational,
.component-status.status-green,
.component-status[title="Operational"] {
  color: var(--status-good-bright) !important;
  border-color: rgba(11, 107, 53, 0.58) !important;
}

.component-status-degraded_performance,
.status-yellow,
.degraded-performance,
.component-status.status-yellow {
  color: var(--status-degraded) !important;
  border-color: rgba(117, 80, 0, 0.58) !important;
}

.component-status-partial_outage,
.status-orange,
.partial-outage,
.component-status.status-orange {
  color: var(--status-partial) !important;
  border-color: rgba(135, 64, 0, 0.58) !important;
}

.component-status-major_outage,
.status-red,
.major-outage,
.component-status.status-red {
  color: var(--status-bad-bright) !important;
  border-color: rgba(135, 0, 24, 0.58) !important;
}

.page-status .status,
.page-status .status.font-large,
.status.font-large {
  color: #17181d !important;
}

a.button:not(.current),
.button:not(.current),
body .layout-content a.button:not(.current),
body .layout-content .button:not(.current) {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: var(--link-accent) !important;
  border-color: rgba(23, 24, 29, 0.42) !important;
  text-decoration: none !important;
}

a.button:not(.current):hover,
a.button:not(.current):focus,
.button:not(.current):hover,
.button:not(.current):focus,
body .layout-content a.button:not(.current):hover,
body .layout-content a.button:not(.current):focus,
body .layout-content .button:not(.current):hover,
body .layout-content .button:not(.current):focus {
  background: var(--asu-red-soft) !important;
  background-color: var(--asu-red-soft) !important;
  color: var(--link-accent-hover) !important;
  border-color: var(--asu-red) !important;
  box-shadow:
    inset 0 -3px 0 var(--asu-red),
    0 10px 22px rgba(23, 24, 29, 0.12) !important;
}


/* =========================================================
   25. Compact Embedded Iframe Layout
   ========================================================= */

@media screen and (max-width: 460px) and (max-height: 560px) {
  html,
  body,
  .layout-content {
    overflow-x: hidden !important;
  }

  .container {
    width: 100% !important;
    max-width: none !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    box-sizing: border-box !important;
  }

  .astate-status-header {
    width: calc(100% - 18px) !important;
    max-width: none !important;
    margin: 8px auto 10px auto !important;
    padding: 14px 14px 12px 18px !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 18px rgba(23, 24, 29, 0.08) !important;
  }

  .astate-status-header::before {
    width: 5px;
  }

  .astate-status-header-inner {
    display: block !important;
  }

  .astate-status-brand {
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
  }

  .astate-status-brand-link {
    flex: 0 0 96px !important;
    width: 96px !important;
    min-height: 72px !important;
  }

  .astate-status-logo {
    height: 72px !important;
    max-height: 72px !important;
    max-width: 96px !important;
    transform: scale(2.15) !important;
  }

  .astate-status-kicker {
    margin-bottom: 5px !important;
    font-size: 0.68rem !important;
    line-height: 1.25 !important;
    letter-spacing: 0.10em !important;
  }

  .astate-status-title {
    margin-bottom: 0 !important;
    font-size: 1.18rem !important;
    line-height: 1.1 !important;
  }

  .astate-status-subtitle,
  .astate-status-header-actions {
    display: none !important;
  }

  .page-status {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
    border-radius: 12px !important;
  }

  .page-status .status,
  .page-status .status.font-large,
  .status.font-large {
    font-size: 1rem !important;
    line-height: 1.25 !important;
    padding: 12px 10px !important;
  }

  .components-section,
  .components-container,
  .incidents-section,
  .scheduled-maintenances-section,
  .history-section,
  .system-metrics-container {
    border-radius: 12px !important;
    box-shadow: none !important;
  }

  .component-inner-container {
    min-height: 48px !important;
    padding: 12px 12px 12px 18px !important;
  }

  .component-name,
  .name {
    font-size: 0.92rem !important;
    line-height: 1.25 !important;
  }

  .component-status,
  .component-container .component-status {
    min-height: 24px !important;
    padding: 4px 8px !important;
    font-size: 0.78rem !important;
  }
}


/* =========================================================
   26. Event Notice Color Normalization
   ========================================================= */

.incident-container,
.maintenance-container,
.unresolved-incident,
.scheduled-maintenance,
.past-incident {
  border-color: var(--asu-red) !important;
}

.incidents-section .incident-container,
.incidents-section .incident-container[class],
.scheduled-maintenances-section .maintenance-container,
.scheduled-maintenances-section .maintenance-container[class],
.unresolved-incident.impact-minor,
.unresolved-incident.impact-major,
.unresolved-incident.impact-critical,
.unresolved-incident.impact-maintenance,
.incident-container.impact-minor,
.incident-container.impact-major,
.incident-container.impact-critical,
.incident-container.impact-maintenance,
.maintenance-container.impact-minor,
.maintenance-container.impact-major,
.maintenance-container.impact-critical,
.maintenance-container.impact-maintenance {
  border-color: var(--asu-red) !important;
  border-top-color: var(--asu-red) !important;
  border-right-color: var(--asu-red) !important;
  border-bottom-color: var(--asu-red) !important;
  border-left-color: var(--asu-red) !important;
}

.incident-container .updates,
.incident-container .incident-updates,
.maintenance-container .updates,
.maintenance-container .maintenance-updates {
  border-color: var(--asu-red) !important;
  border-top-color: var(--asu-red) !important;
  border-right-color: var(--asu-red) !important;
  border-bottom-color: var(--asu-red) !important;
  border-left-color: var(--asu-red) !important;
}

.incident-title.font-large,
.maintenance-title.font-large,
.impact-minor.incident-title,
.impact-major.incident-title,
.impact-critical.incident-title,
.impact-maintenance.incident-title,
.impact-maintenance.maintenance-title,
a.impact-minor.incident-title.font-large,
a.impact-major.incident-title.font-large,
a.impact-critical.incident-title.font-large,
a.impact-maintenance.incident-title.font-large,
a.impact-maintenance.maintenance-title.font-large {
  background: var(--asu-red) !important;
  background-color: var(--asu-red) !important;
  border-color: var(--asu-red) !important;
  color: #ffffff !important;
  padding-left: 20px !important;
}

.incident-title.font-large *,
.maintenance-title.font-large *,
.impact-minor.incident-title *,
.impact-major.incident-title *,
.impact-critical.incident-title *,
.impact-maintenance.incident-title *,
.impact-maintenance.maintenance-title * {
  color: #ffffff !important;
}

body .incident-title.font-large a:not(.button):not(.astate-status-secondary-link):not(.astate-status-helpdesk-link):not(.astate-status-footer-link):not([data-js-hook="show-updates-dropdown"]),
body .incident-title.font-large a:not(.button):not(.astate-status-secondary-link):not(.astate-status-helpdesk-link):not(.astate-status-footer-link):not([data-js-hook="show-updates-dropdown"]):visited,
body .maintenance-title.font-large a:not(.button):not(.astate-status-secondary-link):not(.astate-status-helpdesk-link):not(.astate-status-footer-link):not([data-js-hook="show-updates-dropdown"]),
body .maintenance-title.font-large a:not(.button):not(.astate-status-secondary-link):not(.astate-status-helpdesk-link):not(.astate-status-footer-link):not([data-js-hook="show-updates-dropdown"]):visited,
body a.whitespace-pre-wrap.actual-title.with-ellipsis:not(.button):not(.astate-status-secondary-link):not(.astate-status-helpdesk-link):not(.astate-status-footer-link):not([data-js-hook="show-updates-dropdown"]),
body a.whitespace-pre-wrap.actual-title.with-ellipsis:not(.button):not(.astate-status-secondary-link):not(.astate-status-helpdesk-link):not(.astate-status-footer-link):not([data-js-hook="show-updates-dropdown"]):visited,
body a.impact-minor.incident-title.font-large:not(.button):not(.astate-status-secondary-link):not(.astate-status-helpdesk-link):not(.astate-status-footer-link):not([data-js-hook="show-updates-dropdown"]),
body a.impact-minor.incident-title.font-large:not(.button):not(.astate-status-secondary-link):not(.astate-status-helpdesk-link):not(.astate-status-footer-link):not([data-js-hook="show-updates-dropdown"]):visited,
body a.impact-major.incident-title.font-large:not(.button):not(.astate-status-secondary-link):not(.astate-status-helpdesk-link):not(.astate-status-footer-link):not([data-js-hook="show-updates-dropdown"]),
body a.impact-major.incident-title.font-large:not(.button):not(.astate-status-secondary-link):not(.astate-status-helpdesk-link):not(.astate-status-footer-link):not([data-js-hook="show-updates-dropdown"]):visited,
body a.impact-critical.incident-title.font-large:not(.button):not(.astate-status-secondary-link):not(.astate-status-helpdesk-link):not(.astate-status-footer-link):not([data-js-hook="show-updates-dropdown"]),
body a.impact-critical.incident-title.font-large:not(.button):not(.astate-status-secondary-link):not(.astate-status-helpdesk-link):not(.astate-status-footer-link):not([data-js-hook="show-updates-dropdown"]):visited,
body a.impact-maintenance.incident-title.font-large:not(.button):not(.astate-status-secondary-link):not(.astate-status-helpdesk-link):not(.astate-status-footer-link):not([data-js-hook="show-updates-dropdown"]),
body a.impact-maintenance.incident-title.font-large:not(.button):not(.astate-status-secondary-link):not(.astate-status-helpdesk-link):not(.astate-status-footer-link):not([data-js-hook="show-updates-dropdown"]):visited,
body a.impact-maintenance.maintenance-title.font-large:not(.button):not(.astate-status-secondary-link):not(.astate-status-helpdesk-link):not(.astate-status-footer-link):not([data-js-hook="show-updates-dropdown"]),
body a.impact-maintenance.maintenance-title.font-large:not(.button):not(.astate-status-secondary-link):not(.astate-status-helpdesk-link):not(.astate-status-footer-link):not([data-js-hook="show-updates-dropdown"]):visited,
body .incident-title.font-large a[href*="subscribe"]:not(.button),
body .maintenance-title.font-large a[href*="subscribe"]:not(.button) {
  color: #ffffff !important;
  text-decoration-color: #ffffff !important;
}

body .incident-title.font-large a:not(.button):not(.astate-status-secondary-link):not(.astate-status-helpdesk-link):not(.astate-status-footer-link):not([data-js-hook="show-updates-dropdown"]):hover,
body .incident-title.font-large a:not(.button):not(.astate-status-secondary-link):not(.astate-status-helpdesk-link):not(.astate-status-footer-link):not([data-js-hook="show-updates-dropdown"]):focus,
body .maintenance-title.font-large a:not(.button):not(.astate-status-secondary-link):not(.astate-status-helpdesk-link):not(.astate-status-footer-link):not([data-js-hook="show-updates-dropdown"]):hover,
body .maintenance-title.font-large a:not(.button):not(.astate-status-secondary-link):not(.astate-status-helpdesk-link):not(.astate-status-footer-link):not([data-js-hook="show-updates-dropdown"]):focus,
body a.whitespace-pre-wrap.actual-title.with-ellipsis:not(.button):not(.astate-status-secondary-link):not(.astate-status-helpdesk-link):not(.astate-status-footer-link):not([data-js-hook="show-updates-dropdown"]):hover,
body a.whitespace-pre-wrap.actual-title.with-ellipsis:not(.button):not(.astate-status-secondary-link):not(.astate-status-helpdesk-link):not(.astate-status-footer-link):not([data-js-hook="show-updates-dropdown"]):focus,
body a.impact-minor.incident-title.font-large:not(.button):not(.astate-status-secondary-link):not(.astate-status-helpdesk-link):not(.astate-status-footer-link):not([data-js-hook="show-updates-dropdown"]):hover,
body a.impact-minor.incident-title.font-large:not(.button):not(.astate-status-secondary-link):not(.astate-status-helpdesk-link):not(.astate-status-footer-link):not([data-js-hook="show-updates-dropdown"]):focus,
body a.impact-major.incident-title.font-large:not(.button):not(.astate-status-secondary-link):not(.astate-status-helpdesk-link):not(.astate-status-footer-link):not([data-js-hook="show-updates-dropdown"]):hover,
body a.impact-major.incident-title.font-large:not(.button):not(.astate-status-secondary-link):not(.astate-status-helpdesk-link):not(.astate-status-footer-link):not([data-js-hook="show-updates-dropdown"]):focus,
body a.impact-critical.incident-title.font-large:not(.button):not(.astate-status-secondary-link):not(.astate-status-helpdesk-link):not(.astate-status-footer-link):not([data-js-hook="show-updates-dropdown"]):hover,
body a.impact-critical.incident-title.font-large:not(.button):not(.astate-status-secondary-link):not(.astate-status-helpdesk-link):not(.astate-status-footer-link):not([data-js-hook="show-updates-dropdown"]):focus,
body a.impact-maintenance.incident-title.font-large:not(.button):not(.astate-status-secondary-link):not(.astate-status-helpdesk-link):not(.astate-status-footer-link):not([data-js-hook="show-updates-dropdown"]):hover,
body a.impact-maintenance.incident-title.font-large:not(.button):not(.astate-status-secondary-link):not(.astate-status-helpdesk-link):not(.astate-status-footer-link):not([data-js-hook="show-updates-dropdown"]):focus,
body a.impact-maintenance.maintenance-title.font-large:not(.button):not(.astate-status-secondary-link):not(.astate-status-helpdesk-link):not(.astate-status-footer-link):not([data-js-hook="show-updates-dropdown"]):hover,
body a.impact-maintenance.maintenance-title.font-large:not(.button):not(.astate-status-secondary-link):not(.astate-status-helpdesk-link):not(.astate-status-footer-link):not([data-js-hook="show-updates-dropdown"]):focus {
  color: #ffffff !important;
  text-decoration-color: #ffffff !important;
}

.incident-history .incident-title.font-large,
.incident-history .maintenance-title.font-large,
.incident-list .incident-title.font-large,
.incident-list .maintenance-title.font-large,
.month-content .incident-title.font-large,
.month-content .maintenance-title.font-large,
.scheduled-maintenances-container .incident-title.font-large,
.scheduled-maintenances-container .maintenance-title.font-large,
.scheduled-maintenance .incident-title.font-large,
.scheduled-maintenance .maintenance-title.font-large,
.incidents-list .incident-title.font-large,
.incidents-list .maintenance-title.font-large,
.status-day .incident-title.font-large,
.status-day .maintenance-title.font-large,
.incident-history a.impact-minor.incident-title.font-large,
.incident-history a.impact-major.incident-title.font-large,
.incident-history a.impact-critical.incident-title.font-large,
.incident-history a.impact-maintenance.incident-title.font-large,
.incident-history a.impact-maintenance.maintenance-title.font-large,
.incident-list a.impact-minor.incident-title.font-large,
.incident-list a.impact-major.incident-title.font-large,
.incident-list a.impact-critical.incident-title.font-large,
.incident-list a.impact-maintenance.incident-title.font-large,
.incident-list a.impact-maintenance.maintenance-title.font-large,
.month-content a.impact-minor.incident-title.font-large,
.month-content a.impact-major.incident-title.font-large,
.month-content a.impact-critical.incident-title.font-large,
.month-content a.impact-maintenance.incident-title.font-large,
.month-content a.impact-maintenance.maintenance-title.font-large,
.scheduled-maintenances-container a.impact-minor.incident-title.font-large,
.scheduled-maintenances-container a.impact-major.incident-title.font-large,
.scheduled-maintenances-container a.impact-critical.incident-title.font-large,
.scheduled-maintenances-container a.impact-maintenance.incident-title.font-large,
.scheduled-maintenances-container a.impact-maintenance.maintenance-title.font-large,
.scheduled-maintenance a.impact-minor.incident-title.font-large,
.scheduled-maintenance a.impact-major.incident-title.font-large,
.scheduled-maintenance a.impact-critical.incident-title.font-large,
.scheduled-maintenance a.impact-maintenance.incident-title.font-large,
.scheduled-maintenance a.impact-maintenance.maintenance-title.font-large,
.incidents-list a.impact-minor.incident-title.font-large,
.incidents-list a.impact-major.incident-title.font-large,
.incidents-list a.impact-critical.incident-title.font-large,
.incidents-list a.impact-maintenance.incident-title.font-large,
.incidents-list a.impact-maintenance.maintenance-title.font-large,
.status-day a.impact-minor.incident-title.font-large,
.status-day a.impact-major.incident-title.font-large,
.status-day a.impact-critical.incident-title.font-large,
.status-day a.impact-maintenance.incident-title.font-large,
.status-day a.impact-maintenance.maintenance-title.font-large {
  background: transparent !important;
  background-color: transparent !important;
  border-color: transparent !important;
  color: var(--link-accent) !important;
  padding-left: 0 !important;
}

.incident-history .incident-title.font-large a *,
.incident-history .maintenance-title.font-large a *,
.incident-list .incident-title.font-large a *,
.incident-list .maintenance-title.font-large a *,
.month-content .incident-title.font-large a *,
.month-content .maintenance-title.font-large a *,
.scheduled-maintenances-container .incident-title.font-large a *,
.scheduled-maintenances-container .maintenance-title.font-large a *,
.scheduled-maintenance .incident-title.font-large a *,
.scheduled-maintenance .maintenance-title.font-large a *,
.incidents-list .incident-title.font-large a *,
.incidents-list .maintenance-title.font-large a *,
.status-day .incident-title.font-large a *,
.status-day .maintenance-title.font-large a * {
  color: var(--link-accent) !important;
  text-decoration-color: var(--link-accent) !important;
}

.scheduled-maintenances-container .incident-title.font-large small,
.scheduled-maintenances-container .maintenance-title.font-large small,
.scheduled-maintenance .incident-title.font-large small,
.scheduled-maintenance .maintenance-title.font-large small,
.scheduled-maintenances-container .incident-title.font-large small *,
.scheduled-maintenances-container .maintenance-title.font-large small *,
.scheduled-maintenance .incident-title.font-large small *,
.scheduled-maintenance .maintenance-title.font-large small *,
.scheduled-maintenances-container .incident-title.font-large .pull-right,
.scheduled-maintenances-container .maintenance-title.font-large .pull-right,
.scheduled-maintenance .incident-title.font-large .pull-right,
.scheduled-maintenance .maintenance-title.font-large .pull-right,
.scheduled-maintenances-container .incident-title.font-large .pull-right *,
.scheduled-maintenances-container .maintenance-title.font-large .pull-right *,
.scheduled-maintenance .incident-title.font-large .pull-right *,
.scheduled-maintenance .maintenance-title.font-large .pull-right * {
  color: var(--wolf-muted) !important;
}

body .incident-history a.incident-title.font-large:not(.button):not(.astate-status-secondary-link):not(.astate-status-helpdesk-link):not(.astate-status-footer-link):not([data-js-hook="show-updates-dropdown"]),
body .incident-history a.incident-title.font-large:not(.button):not(.astate-status-secondary-link):not(.astate-status-helpdesk-link):not(.astate-status-footer-link):not([data-js-hook="show-updates-dropdown"]):visited,
body .incident-history a.maintenance-title.font-large:not(.button):not(.astate-status-secondary-link):not(.astate-status-helpdesk-link):not(.astate-status-footer-link):not([data-js-hook="show-updates-dropdown"]),
body .incident-history a.maintenance-title.font-large:not(.button):not(.astate-status-secondary-link):not(.astate-status-helpdesk-link):not(.astate-status-footer-link):not([data-js-hook="show-updates-dropdown"]):visited,
body .incident-list a.incident-title.font-large:not(.button):not(.astate-status-secondary-link):not(.astate-status-helpdesk-link):not(.astate-status-footer-link):not([data-js-hook="show-updates-dropdown"]),
body .incident-list a.incident-title.font-large:not(.button):not(.astate-status-secondary-link):not(.astate-status-helpdesk-link):not(.astate-status-footer-link):not([data-js-hook="show-updates-dropdown"]):visited,
body .incident-list a.maintenance-title.font-large:not(.button):not(.astate-status-secondary-link):not(.astate-status-helpdesk-link):not(.astate-status-footer-link):not([data-js-hook="show-updates-dropdown"]),
body .incident-list a.maintenance-title.font-large:not(.button):not(.astate-status-secondary-link):not(.astate-status-helpdesk-link):not(.astate-status-footer-link):not([data-js-hook="show-updates-dropdown"]):visited,
body .month-content a.incident-title.font-large:not(.button):not(.astate-status-secondary-link):not(.astate-status-helpdesk-link):not(.astate-status-footer-link):not([data-js-hook="show-updates-dropdown"]),
body .month-content a.incident-title.font-large:not(.button):not(.astate-status-secondary-link):not(.astate-status-helpdesk-link):not(.astate-status-footer-link):not([data-js-hook="show-updates-dropdown"]):visited,
body .month-content a.maintenance-title.font-large:not(.button):not(.astate-status-secondary-link):not(.astate-status-helpdesk-link):not(.astate-status-footer-link):not([data-js-hook="show-updates-dropdown"]),
body .month-content a.maintenance-title.font-large:not(.button):not(.astate-status-secondary-link):not(.astate-status-helpdesk-link):not(.astate-status-footer-link):not([data-js-hook="show-updates-dropdown"]):visited,
body .scheduled-maintenances-container .incident-title.font-large a:not(.button):not(.astate-status-secondary-link):not(.astate-status-helpdesk-link):not(.astate-status-footer-link):not([data-js-hook="show-updates-dropdown"]),
body .scheduled-maintenances-container .incident-title.font-large a:not(.button):not(.astate-status-secondary-link):not(.astate-status-helpdesk-link):not(.astate-status-footer-link):not([data-js-hook="show-updates-dropdown"]):visited,
body .scheduled-maintenances-container .maintenance-title.font-large a:not(.button):not(.astate-status-secondary-link):not(.astate-status-helpdesk-link):not(.astate-status-footer-link):not([data-js-hook="show-updates-dropdown"]),
body .scheduled-maintenances-container .maintenance-title.font-large a:not(.button):not(.astate-status-secondary-link):not(.astate-status-helpdesk-link):not(.astate-status-footer-link):not([data-js-hook="show-updates-dropdown"]):visited,
body .scheduled-maintenance .incident-title.font-large a:not(.button):not(.astate-status-secondary-link):not(.astate-status-helpdesk-link):not(.astate-status-footer-link):not([data-js-hook="show-updates-dropdown"]),
body .scheduled-maintenance .incident-title.font-large a:not(.button):not(.astate-status-secondary-link):not(.astate-status-helpdesk-link):not(.astate-status-footer-link):not([data-js-hook="show-updates-dropdown"]):visited,
body .scheduled-maintenance .maintenance-title.font-large a:not(.button):not(.astate-status-secondary-link):not(.astate-status-helpdesk-link):not(.astate-status-footer-link):not([data-js-hook="show-updates-dropdown"]),
body .scheduled-maintenance .maintenance-title.font-large a:not(.button):not(.astate-status-secondary-link):not(.astate-status-helpdesk-link):not(.astate-status-footer-link):not([data-js-hook="show-updates-dropdown"]):visited,
body .incidents-list .incident-title.font-large a:not(.button):not(.astate-status-secondary-link):not(.astate-status-helpdesk-link):not(.astate-status-footer-link):not([data-js-hook="show-updates-dropdown"]),
body .incidents-list .incident-title.font-large a:not(.button):not(.astate-status-secondary-link):not(.astate-status-helpdesk-link):not(.astate-status-footer-link):not([data-js-hook="show-updates-dropdown"]):visited,
body .incidents-list .maintenance-title.font-large a:not(.button):not(.astate-status-secondary-link):not(.astate-status-helpdesk-link):not(.astate-status-footer-link):not([data-js-hook="show-updates-dropdown"]),
body .incidents-list .maintenance-title.font-large a:not(.button):not(.astate-status-secondary-link):not(.astate-status-helpdesk-link):not(.astate-status-footer-link):not([data-js-hook="show-updates-dropdown"]):visited,
body .status-day .incident-title.font-large a:not(.button):not(.astate-status-secondary-link):not(.astate-status-helpdesk-link):not(.astate-status-footer-link):not([data-js-hook="show-updates-dropdown"]),
body .status-day .incident-title.font-large a:not(.button):not(.astate-status-secondary-link):not(.astate-status-helpdesk-link):not(.astate-status-footer-link):not([data-js-hook="show-updates-dropdown"]):visited,
body .status-day .maintenance-title.font-large a:not(.button):not(.astate-status-secondary-link):not(.astate-status-helpdesk-link):not(.astate-status-footer-link):not([data-js-hook="show-updates-dropdown"]),
body .status-day .maintenance-title.font-large a:not(.button):not(.astate-status-secondary-link):not(.astate-status-helpdesk-link):not(.astate-status-footer-link):not([data-js-hook="show-updates-dropdown"]):visited {
  background: transparent !important;
  background-color: transparent !important;
  border-color: transparent !important;
  color: var(--link-accent) !important;
  text-decoration-color: var(--link-accent) !important;
}

body .incident-history a.incident-title.font-large:not(.button):not(.astate-status-secondary-link):not(.astate-status-helpdesk-link):not(.astate-status-footer-link):not([data-js-hook="show-updates-dropdown"]):hover,
body .incident-history a.incident-title.font-large:not(.button):not(.astate-status-secondary-link):not(.astate-status-helpdesk-link):not(.astate-status-footer-link):not([data-js-hook="show-updates-dropdown"]):focus,
body .incident-history a.maintenance-title.font-large:not(.button):not(.astate-status-secondary-link):not(.astate-status-helpdesk-link):not(.astate-status-footer-link):not([data-js-hook="show-updates-dropdown"]):hover,
body .incident-history a.maintenance-title.font-large:not(.button):not(.astate-status-secondary-link):not(.astate-status-helpdesk-link):not(.astate-status-footer-link):not([data-js-hook="show-updates-dropdown"]):focus,
body .incident-list a.incident-title.font-large:not(.button):not(.astate-status-secondary-link):not(.astate-status-helpdesk-link):not(.astate-status-footer-link):not([data-js-hook="show-updates-dropdown"]):hover,
body .incident-list a.incident-title.font-large:not(.button):not(.astate-status-secondary-link):not(.astate-status-helpdesk-link):not(.astate-status-footer-link):not([data-js-hook="show-updates-dropdown"]):focus,
body .incident-list a.maintenance-title.font-large:not(.button):not(.astate-status-secondary-link):not(.astate-status-helpdesk-link):not(.astate-status-footer-link):not([data-js-hook="show-updates-dropdown"]):hover,
body .incident-list a.maintenance-title.font-large:not(.button):not(.astate-status-secondary-link):not(.astate-status-helpdesk-link):not(.astate-status-footer-link):not([data-js-hook="show-updates-dropdown"]):focus,
body .month-content a.incident-title.font-large:not(.button):not(.astate-status-secondary-link):not(.astate-status-helpdesk-link):not(.astate-status-footer-link):not([data-js-hook="show-updates-dropdown"]):hover,
body .month-content a.incident-title.font-large:not(.button):not(.astate-status-secondary-link):not(.astate-status-helpdesk-link):not(.astate-status-footer-link):not([data-js-hook="show-updates-dropdown"]):focus,
body .month-content a.maintenance-title.font-large:not(.button):not(.astate-status-secondary-link):not(.astate-status-helpdesk-link):not(.astate-status-footer-link):not([data-js-hook="show-updates-dropdown"]):hover,
body .month-content a.maintenance-title.font-large:not(.button):not(.astate-status-secondary-link):not(.astate-status-helpdesk-link):not(.astate-status-footer-link):not([data-js-hook="show-updates-dropdown"]):focus,
body .scheduled-maintenances-container .incident-title.font-large a:not(.button):not(.astate-status-secondary-link):not(.astate-status-helpdesk-link):not(.astate-status-footer-link):not([data-js-hook="show-updates-dropdown"]):hover,
body .scheduled-maintenances-container .incident-title.font-large a:not(.button):not(.astate-status-secondary-link):not(.astate-status-helpdesk-link):not(.astate-status-footer-link):not([data-js-hook="show-updates-dropdown"]):focus,
body .scheduled-maintenances-container .maintenance-title.font-large a:not(.button):not(.astate-status-secondary-link):not(.astate-status-helpdesk-link):not(.astate-status-footer-link):not([data-js-hook="show-updates-dropdown"]):hover,
body .scheduled-maintenances-container .maintenance-title.font-large a:not(.button):not(.astate-status-secondary-link):not(.astate-status-helpdesk-link):not(.astate-status-footer-link):not([data-js-hook="show-updates-dropdown"]):focus,
body .scheduled-maintenance .incident-title.font-large a:not(.button):not(.astate-status-secondary-link):not(.astate-status-helpdesk-link):not(.astate-status-footer-link):not([data-js-hook="show-updates-dropdown"]):hover,
body .scheduled-maintenance .incident-title.font-large a:not(.button):not(.astate-status-secondary-link):not(.astate-status-helpdesk-link):not(.astate-status-footer-link):not([data-js-hook="show-updates-dropdown"]):focus,
body .scheduled-maintenance .maintenance-title.font-large a:not(.button):not(.astate-status-secondary-link):not(.astate-status-helpdesk-link):not(.astate-status-footer-link):not([data-js-hook="show-updates-dropdown"]):hover,
body .scheduled-maintenance .maintenance-title.font-large a:not(.button):not(.astate-status-secondary-link):not(.astate-status-helpdesk-link):not(.astate-status-footer-link):not([data-js-hook="show-updates-dropdown"]):focus,
body .incidents-list .incident-title.font-large a:not(.button):not(.astate-status-secondary-link):not(.astate-status-helpdesk-link):not(.astate-status-footer-link):not([data-js-hook="show-updates-dropdown"]):hover,
body .incidents-list .incident-title.font-large a:not(.button):not(.astate-status-secondary-link):not(.astate-status-helpdesk-link):not(.astate-status-footer-link):not([data-js-hook="show-updates-dropdown"]):focus,
body .incidents-list .maintenance-title.font-large a:not(.button):not(.astate-status-secondary-link):not(.astate-status-helpdesk-link):not(.astate-status-footer-link):not([data-js-hook="show-updates-dropdown"]):hover,
body .incidents-list .maintenance-title.font-large a:not(.button):not(.astate-status-secondary-link):not(.astate-status-helpdesk-link):not(.astate-status-footer-link):not([data-js-hook="show-updates-dropdown"]):focus,
body .status-day .incident-title.font-large a:not(.button):not(.astate-status-secondary-link):not(.astate-status-helpdesk-link):not(.astate-status-footer-link):not([data-js-hook="show-updates-dropdown"]):hover,
body .status-day .incident-title.font-large a:not(.button):not(.astate-status-secondary-link):not(.astate-status-helpdesk-link):not(.astate-status-footer-link):not([data-js-hook="show-updates-dropdown"]):focus,
body .status-day .maintenance-title.font-large a:not(.button):not(.astate-status-secondary-link):not(.astate-status-helpdesk-link):not(.astate-status-footer-link):not([data-js-hook="show-updates-dropdown"]):hover,
body .status-day .maintenance-title.font-large a:not(.button):not(.astate-status-secondary-link):not(.astate-status-helpdesk-link):not(.astate-status-footer-link):not([data-js-hook="show-updates-dropdown"]):focus {
  color: var(--link-accent-hover) !important;
  text-decoration-color: var(--link-accent-hover) !important;
}


/* =========================================================
   27. Component Status Pill Color Mapping
   ========================================================= */

.component-status-operational,
.component-status.status-green,
.component-status.status-operational,
.component-status[title="Operational"],
.component-status[aria-label="Operational"],
.component-inner-container.status-green .component-status,
.component-inner-container.status-operational .component-status,
.component-container .component-status-operational,
.component-container .component-status.status-green,
.component-container .component-status.status-operational,
.component-container .component-status[title="Operational"],
.component-container .component-status[aria-label="Operational"] {
  background: var(--status-good-soft) !important;
  background-color: var(--status-good-soft) !important;
  border-color: rgba(11, 107, 53, 0.58) !important;
  color: var(--status-good) !important;
}

.component-status-degraded_performance,
.component-status.status-yellow,
.component-status.degraded-performance,
.component-status[title="Degraded Performance"],
.component-status[aria-label="Degraded Performance"],
.component-inner-container.status-yellow .component-status,
.component-inner-container.degraded-performance .component-status,
.component-container .component-status-degraded_performance,
.component-container .component-status.status-yellow,
.component-container .component-status.degraded-performance,
.component-container .component-status[title="Degraded Performance"],
.component-container .component-status[aria-label="Degraded Performance"] {
  background: var(--status-degraded-soft) !important;
  background-color: var(--status-degraded-soft) !important;
  border-color: rgba(117, 80, 0, 0.62) !important;
  color: var(--status-degraded) !important;
}

.component-status-under_maintenance,
.component-status.status-orange,
.component-status.status-maintenance,
.component-status.under-maintenance,
.component-status.under_maintenance,
.component-status[title="Under Maintenance"],
.component-status[aria-label="Under Maintenance"],
.component-inner-container.status-orange .component-status,
.component-inner-container.status-maintenance .component-status,
.component-inner-container.under-maintenance .component-status,
.component-inner-container.under_maintenance .component-status,
.component-container .component-status-under_maintenance,
.component-container .component-status.status-orange,
.component-container .component-status.status-maintenance,
.component-container .component-status.under-maintenance,
.component-container .component-status.under_maintenance,
.component-container .component-status[title="Under Maintenance"],
.component-container .component-status[aria-label="Under Maintenance"] {
  background: var(--status-partial-soft) !important;
  background-color: var(--status-partial-soft) !important;
  border-color: rgba(135, 64, 0, 0.62) !important;
  color: var(--status-partial) !important;
}

.component-status-partial_outage,
.component-status-major_outage,
.component-status.status-red,
.component-status.partial-outage,
.component-status.major-outage,
.component-status[title="Partial Outage"],
.component-status[title="Major Outage"],
.component-status[aria-label="Partial Outage"],
.component-status[aria-label="Major Outage"],
.component-inner-container.status-red .component-status,
.component-inner-container.partial-outage .component-status,
.component-inner-container.major-outage .component-status,
.component-container .component-status-partial_outage,
.component-container .component-status-major_outage,
.component-container .component-status.status-red,
.component-container .component-status.partial-outage,
.component-container .component-status.major-outage,
.component-container .component-status[title="Partial Outage"],
.component-container .component-status[title="Major Outage"],
.component-container .component-status[aria-label="Partial Outage"],
.component-container .component-status[aria-label="Major Outage"] {
  background: var(--status-bad-soft) !important;
  background-color: var(--status-bad-soft) !important;
  border-color: rgba(135, 0, 24, 0.62) !important;
  color: var(--status-bad) !important;
}