/* ==========================================================================
   Gateway Technical College — Tech Central Status Page
   Replaces the previous custom CSS. Every text/background pair below meets
   WCAG 2.1 AA (4.5:1) or better; status is never conveyed by color alone.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  --gtc-bg:         #F4F6F8;
  --gtc-surface:    #FFFFFF;
  --gtc-border:     #E3E8EE;
  --gtc-hairline:   #EFF2F6;

  --gtc-ink:        #16202C;  /* 15.2:1 on white */
  --gtc-ink-soft:   #4A5768;  /*  7.4:1 on white */
  --gtc-link:       #0B5CAD;  /*  6.4:1 on white */

  --gtc-ok:         #0A7040;  /*  5.4:1 on white */
  --gtc-ok-bg:      #ECFDF3;

  --gtc-warn:       #A4500A;  /*  5.1:1 on white */
  --gtc-warn-ink:   #713206;  /*  8.6:1 on #FFFAEB */
  --gtc-warn-bg:    #FFFAEB;
  --gtc-warn-edge:  #F6DFAE;

  --gtc-bad:        #B42318;  /*  5.9:1 on white */
  --gtc-bad-ink:    #7A1610;
  --gtc-bad-bg:     #FEF3F2;
  --gtc-bad-edge:   #FBD5D0;

  --gtc-info:       #05658F;  /*  5.3:1 on white */
  --gtc-info-ink:   #0B4A6F;
  --gtc-info-bg:    #F0F9FF;
  --gtc-info-edge:  #B9E2F7;

  --gtc-focus:      #1D6FD6;
  --gtc-radius:     10px;
}

/* --------------------------------------------------------------------------
   2. Canvas and type scale
   The old rule set every p/span to 12px, which flattened the whole page.
   Size floors belong only on the genuinely small elements.
   -------------------------------------------------------------------------- */
html, body,
.layout-content, .page-container, .main-content, .status {
  background-color: var(--gtc-bg) !important;
  color: var(--gtc-ink) !important;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
  -webkit-font-smoothing: antialiased;
}

.layout-content .container,
.main-content .container,
.page-container .container {
  max-width: 880px !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}

/* Minimum size floor for secondary text — 13px clears scanner thresholds
   without collapsing the hierarchy. */
small, .small, time, .timestamp, .datetime, .updated, .update-timestamp,
.text-muted, .color-secondary, .font-small, font[size="1"] {
  font-size: 13px !important;
  color: var(--gtc-ink-soft) !important;
  opacity: 1 !important;
}

a {
  color: var(--gtc-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}
a:hover { color: #084A8C; }

/* Visible keyboard focus (WCAG 2.4.7) — Statuspage ships almost none. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid var(--gtc-focus) !important;
  outline-offset: 2px !important;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   3. Header logo and the "Subscribe to Updates" control
   -------------------------------------------------------------------------- */
header img {
  border-radius: 6px !important;
  display: inline-block !important;
}

.gtc-page-title {
  font-size: 26px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  color: var(--gtc-ink) !important;
  margin: 16px 0 0 !important;
  padding: 0 !important;
}

#replace-with-subscribe,
.subscribe-container {
  text-align: center !important;
  margin: 14px 0 28px !important;
}

#replace-with-subscribe a,
.subscribe-container a,
a.subscribe-link,
a[href*="/subscribe"] {
  display: inline-block !important;
  background-color: #16202C !important;
  color: #FFFFFF !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 9px 22px !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  border: 1px solid #16202C !important;
}

#replace-with-subscribe a:hover,
.subscribe-container a:hover,
a[href*="/subscribe"]:hover {
  background-color: #2B3B4E !important;
  color: #FFFFFF !important;
}

/* --------------------------------------------------------------------------
   4. Overall page status banner ("All Systems Operational" etc.)
   -------------------------------------------------------------------------- */
.page-status {
  border-radius: var(--gtc-radius) !important;
  border: 1px solid var(--gtc-border) !important;
  padding: 18px 20px !important;
  margin-bottom: 24px !important;
  box-shadow: none !important;
}
.page-status .status {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: inherit !important;
}
.page-status.status-none   { background: var(--gtc-ok-bg)   !important; color: #05603A !important; border-color: #A9E5C3 !important; }
.page-status.status-minor  { background: var(--gtc-warn-bg) !important; color: var(--gtc-warn-ink) !important; border-color: var(--gtc-warn-edge) !important; }
.page-status.status-major,
.page-status.status-critical { background: var(--gtc-bad-bg) !important; color: var(--gtc-bad-ink) !important; border-color: var(--gtc-bad-edge) !important; }
.page-status.status-maintenance { background: var(--gtc-info-bg) !important; color: var(--gtc-info-ink) !important; border-color: var(--gtc-info-edge) !important; }

/* --------------------------------------------------------------------------
   5. Active incident
   White card, thin colored edge, readable dark-on-light title. The old
   solid #78350F bar was legible but visually heavy for the whole page.
   -------------------------------------------------------------------------- */
.unresolved-incident {
  background: var(--gtc-surface) !important;
  border: 1px solid var(--gtc-warn-edge) !important;
  border-top: 4px solid var(--gtc-warn) !important;
  border-radius: var(--gtc-radius) !important;
  box-shadow: 0 1px 2px rgba(22, 32, 44, 0.06) !important;
  overflow: hidden !important;
  margin: 0 0 28px !important;
  padding: 0 !important;
}

.unresolved-incident .incident-title,
.unresolved-incident .page-status {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  background: var(--gtc-warn-bg) !important;
  color: var(--gtc-warn-ink) !important;
  border-bottom: 1px solid var(--gtc-warn-edge) !important;
  padding: 15px 20px !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  margin: 0 !important;
}

.unresolved-incident .incident-title a,
.unresolved-incident .incident-title a:visited {
  color: var(--gtc-warn-ink) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  font-weight: 700 !important;
}

/* Impact variants */
.unresolved-incident:has(.impact-major),
.unresolved-incident:has(.impact-critical) {
  border-color: var(--gtc-bad-edge) !important;
  border-top-color: var(--gtc-bad) !important;
}
.unresolved-incident .incident-title.impact-major,
.unresolved-incident .incident-title.impact-critical {
  background: var(--gtc-bad-bg) !important;
  color: var(--gtc-bad-ink) !important;
  border-bottom-color: var(--gtc-bad-edge) !important;
}
.unresolved-incident .incident-title.impact-major a,
.unresolved-incident .incident-title.impact-critical a { color: var(--gtc-bad-ink) !important; }

.unresolved-incident:has(.impact-maintenance) {
  border-color: var(--gtc-info-edge) !important;
  border-top-color: var(--gtc-info) !important;
}
.unresolved-incident .incident-title.impact-maintenance {
  background: var(--gtc-info-bg) !important;
  color: var(--gtc-info-ink) !important;
  border-bottom-color: var(--gtc-info-edge) !important;
}
.unresolved-incident .incident-title.impact-maintenance a { color: var(--gtc-info-ink) !important; }

/* Update body */
.unresolved-incident .updates-container {
  background: var(--gtc-surface) !important;
  padding: 4px 20px 16px !important;
}
.unresolved-incident .update {
  background: transparent !important;
  border: 0 !important;
  padding: 14px 0 !important;
}
.unresolved-incident .update + .update {
  border-top: 1px solid var(--gtc-hairline) !important;
}
.unresolved-incident .update .update-title,
.unresolved-incident .incident-update-status {
  display: block !important;
  color: var(--gtc-ink) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  margin-bottom: 4px !important;
}
.unresolved-incident .update .update-body,
.unresolved-incident .update .whitespace-pre-wrap,
.unresolved-incident .update p {
  background: transparent !important;
  color: var(--gtc-ink) !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
}

/* Subscribe control inside the incident */
.unresolved-incident .subscribe,
.unresolved-incident a.subscribe,
.unresolved-incident .subscribe-btn,
.unresolved-incident .btn {
  flex: none !important;
  background-color: var(--gtc-surface) !important;
  color: var(--gtc-warn-ink) !important;
  border: 1px solid var(--gtc-warn-edge) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 7px 16px !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   6. Component list
   One panel with hairline dividers instead of 15 free-floating cards. Most
   rows say "Operational" — the disrupted one should be the thing that pops.
   -------------------------------------------------------------------------- */
.components-section {
  background: var(--gtc-surface) !important;
  border: 1px solid var(--gtc-border) !important;
  border-radius: var(--gtc-radius) !important;
  box-shadow: 0 1px 2px rgba(22, 32, 44, 0.05) !important;
  padding: 4px 18px !important;
  margin-bottom: 28px !important;
}

.components-section .components-container,
.components-section .component-container,
.components-statuses {
  background: transparent !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  box-shadow: none !important;
}

.components-container > .component-container + .component-container {
  border-top: 1px solid var(--gtc-hairline) !important;
}

.component-inner-container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 15px 2px !important;
  min-height: 0 !important;
  box-shadow: none !important;
}

.component-inner-container .name {
  color: var(--gtc-ink) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

.component-inner-container .component-status {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: none !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  float: none !important;
  padding: 0 !important;
}

/* Dot inherits the status text color; the word is always present too, so
   color is never the only cue. */
.component-inner-container .component-status::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.component-inner-container.status-green  .component-status { color: var(--gtc-ok)   !important; }
.component-inner-container.status-yellow .component-status,
.component-inner-container.status-orange .component-status { color: var(--gtc-warn) !important; }
.component-inner-container.status-red    .component-status { color: var(--gtc-bad)  !important; }
.component-inner-container.status-blue   .component-status { color: var(--gtc-info) !important; }

/* Disrupted rows get a tint, a left edge, and heavier weight — three cues. */
.component-inner-container.status-yellow,
.component-inner-container.status-orange,
.component-inner-container.status-red,
.component-inner-container.status-blue {
  border-radius: 8px !important;
  padding: 15px 12px !important;
  margin: 6px 0 !important;
}
.component-inner-container.status-yellow,
.component-inner-container.status-orange {
  background: var(--gtc-warn-bg) !important;
  box-shadow: inset 4px 0 0 var(--gtc-warn) !important;
}
.component-inner-container.status-yellow .name,
.component-inner-container.status-orange .name { color: var(--gtc-warn-ink) !important; font-weight: 700 !important; }
.component-inner-container.status-yellow .component-status,
.component-inner-container.status-orange .component-status { color: var(--gtc-warn-ink) !important; font-weight: 700 !important; }

.component-inner-container.status-red {
  background: var(--gtc-bad-bg) !important;
  box-shadow: inset 4px 0 0 var(--gtc-bad) !important;
}
.component-inner-container.status-red .name,
.component-inner-container.status-red .component-status { color: var(--gtc-bad-ink) !important; font-weight: 700 !important; }

.component-inner-container.status-blue {
  background: var(--gtc-info-bg) !important;
  box-shadow: inset 4px 0 0 var(--gtc-info) !important;
}
.component-inner-container.status-blue .name,
.component-inner-container.status-blue .component-status { color: var(--gtc-info-ink) !important; font-weight: 700 !important; }

/* Grouped components (Onelogin, Google Apps, Ticketing System) */
.child-components-container {
  border-left: 2px solid var(--gtc-hairline) !important;
  margin: 0 0 8px 10px !important;
  padding-left: 12px !important;
  background: transparent !important;
}
.child-components-container .component-inner-container { padding-top: 12px !important; padding-bottom: 12px !important; }
.child-components-container .component-inner-container .name { font-weight: 500 !important; }
.component-container.status-yellow > .component-inner-container .name,
.group .name { letter-spacing: 0 !important; }

/* Tooltip "?" markers */
.component-inner-container .tooltip-base,
.component-inner-container .icon-question-sign { color: var(--gtc-ink-soft) !important; }

/* --------------------------------------------------------------------------
   7. Footer
   -------------------------------------------------------------------------- */
footer p { font-size: 14px !important; color: var(--gtc-ink-soft) !important; }
.powered-by, .powered-by a { color: var(--gtc-ink-soft) !important; font-size: 13px !important; }

/* --------------------------------------------------------------------------
   8. Small screens
   -------------------------------------------------------------------------- */
@media (max-width: 620px) {
  .gtc-page-title { font-size: 22px !important; }
  .components-section { padding: 2px 14px !important; }
  .component-inner-container {
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 4px !important;
  }
  .component-inner-container .component-status { width: 100% !important; }
  .unresolved-incident .incident-title,
  .unresolved-incident .page-status {
    flex-direction: column !important;
    align-items: flex-start !important;
    font-size: 17px !important;
  }
}