/* =========================================================
   GLOBAL HOLDINGS — Status Page Custom CSS
   Paste this into: Statuspage Admin → Settings → Custom CSS
   ========================================================= */

:root {
  --gh-navy:        #07223D;
  --gh-navy-light:  #0F3A63;
  --gh-steel:       #163E60;
  --gh-blue:        #1374E7;
  --gh-blue-soft:   #5FA3F5;
  --gh-bg:          #F5F7FA;
  --gh-card:        #FFFFFF;
  --gh-text:        #0B2138;
  --gh-text-mute:   #5B6B7A;
  --gh-line:        #E2E8F0;

  --gh-ok:          #2E8B57;
  --gh-degraded:    #D98E04;
  --gh-partial:     #E0642F;
  --gh-major:       #C1432A;

  --gh-radius:      14px;
  --gh-shadow:      0 4px 20px rgba(13, 27, 42, 0.06);
  --gh-shadow-hov:  0 10px 30px rgba(13, 27, 42, 0.10);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ---------- Base ---------- */
body {
  background: var(--gh-bg) !important;
  color: var(--gh-text) !important;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--gh-steel); }
a:hover { color: var(--gh-blue); }

/* ---------- Default Atlassian header (hide chrome, keep function) ---------- */
#header, .page-title-wrapper, .statuspage-notice {
  background: transparent !important;
  border: none !important;
}

.logo-container img { display: none; } /* we render our own wordmark in the injected header */

/* ---------- Overall status bar → hero banner ---------- */
.page-status,
#status-overview,
.status-index-page .page-status {
  background: linear-gradient(135deg, var(--gh-navy) 0%, var(--gh-steel) 100%) !important;
  border-radius: var(--gh-radius);
  padding: 40px 32px !important;
  margin: 0 0 32px 0 !important;
  box-shadow: var(--gh-shadow);
  color: #F7F5F1 !important;
  position: relative;
  overflow: hidden;
}

.page-status .status,
.page-status .status-title,
#status-overview .status {
  font-family: "Space Grotesk", "Inter", sans-serif !important;
  font-weight: 600 !important;
  font-size: 1.65rem !important;
  color: #FFFFFF !important;
  letter-spacing: -0.01em;
}

/* status-colored dot the default theme renders */
.page-status .status.up::before,
.status.up::before { background: var(--gh-ok) !important; }
.status.degraded_performance::before { background: var(--gh-degraded) !important; }
.status.partial_outage::before { background: var(--gh-partial) !important; }
.status.major_outage::before { background: var(--gh-major) !important; }

/* ---------- Component list → cards ---------- */
.component-container,
.components-section .component-container {
  background: var(--gh-card) !important;
  border: 1px solid var(--gh-line) !important;
  border-radius: var(--gh-radius) !important;
  padding: 18px 22px !important;
  margin-bottom: 10px !important;
  box-shadow: var(--gh-shadow);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.component-container:hover {
  box-shadow: var(--gh-shadow-hov);
  transform: translateY(-1px);
}

.component-inner-container .name,
.component-container .name {
  font-family: "Space Grotesk", sans-serif !important;
  font-weight: 500 !important;
  color: var(--gh-text) !important;
}

.component-status {
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.component-status.text-color-none,
.component-status.operational { color: var(--gh-ok) !important; }
.component-status.degraded_performance { color: var(--gh-degraded) !important; }
.component-status.partial_outage { color: var(--gh-partial) !important; }
.component-status.major_outage { color: var(--gh-major) !important; }

/* ---------- Section headers (e.g. "Past Incidents") ---------- */
.status-day-header, h2, .month-title {
  font-family: "Space Grotesk", sans-serif !important;
  color: var(--gh-navy) !important;
  font-weight: 600 !important;
  border-bottom: 1px solid var(--gh-line);
  padding-bottom: 10px;
}

/* ---------- Incident cards ---------- */
.incident-container, .unresolved-incident {
  background: var(--gh-card) !important;
  border: 1px solid var(--gh-line) !important;
  border-left: 4px solid var(--gh-blue) !important;
  border-radius: 10px !important;
  padding: 16px 20px !important;
  margin-bottom: 14px !important;
  box-shadow: var(--gh-shadow);
}

.incident-title a { color: var(--gh-navy) !important; font-weight: 600; }
.incident-updates .update-body { color: var(--gh-text-mute); }

/* ---------- Uptime / metrics ---------- */
.metrics-timeline, .graphs-container {
  background: var(--gh-card) !important;
  border-radius: var(--gh-radius) !important;
  border: 1px solid var(--gh-line) !important;
  padding: 16px !important;
}

/* ---------- Subscribe button ---------- */
.subscribe-button, .input-group-btn .btn, .btn-quick-subscribe {
  background: var(--gh-blue) !important;
  border-color: var(--gh-blue) !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
}
.subscribe-button:hover { background: var(--gh-navy) !important; }

/* ---------- Footer ---------- */
#footer, .powered-by {
  background: transparent !important;
  border-top: 1px solid var(--gh-line) !important;
  color: var(--gh-text-mute) !important;
  font-size: 0.8rem !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 600px) {
  .page-status { padding: 28px 20px !important; }
  .page-status .status, .page-status .status-title { font-size: 1.25rem !important; }
}