/* ============================================================
   Primordial Design – Statuspage.io Custom CSS
   Brand: Deep navy bg + white text + light blue (#5AB4E5) accent
   ============================================================ */

/* ── Color palette ────────────────────────────────────────── */
:root {
  --pdi-navy:       #0d1b2e;
  --pdi-navy-mid:   #132035;
  --pdi-navy-light: #1c2e45;
  --pdi-blue:       #5ab4e5;
  --pdi-blue-dark:  #3a90c4;
  --pdi-white:      #ffffff;
  --pdi-white-muted:#c8d6e3;
  --pdi-green:      #2eb88a;
  --pdi-yellow:     #f5a623;
  --pdi-red:        #e05a4e;
  --pdi-border:     rgba(90, 180, 229, 0.15);
}

/* ── Page & body ──────────────────────────────────────────── */
body {
  background-color: var(--pdi-navy) !important;
  color: var(--pdi-white-muted) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif !important;
}

/* ── Top nav / header ─────────────────────────────────────── */
.page-header,
header,
nav.navbar,
.navbar,
.header-bar {
  background-color: var(--pdi-navy) !important;
  border-bottom: 1px solid var(--pdi-border) !important;
}

/* ── Page title / hero section ────────────────────────────── */
.page-title,
h1,
h2,
h3,
h4,
h5 {
  color: var(--pdi-white) !important;
}

/* ── "All Systems Operational" banner ────────────────────── */
.page-status .status .status-description {
  color: var(--pdi-white) !important;
}

/* ── Component rows ───────────────────────────────────────── */
.component-container,
.components-section .component-inner-container {
  background-color: var(--pdi-navy-mid) !important;
  border-color: var(--pdi-border) !important;
}

.component-container .name,
.component-status,
.component-status .component-status-label {
  color: var(--pdi-white-muted) !important;
}

/* ── Uptime graph bars ────────────────────────────────────── */
.uptime-bars .day.uptime-100 rect,
.uptime-bars rect.fill-color-operational {
  fill: var(--pdi-green) !important;
}

.uptime-bars rect.fill-color-degraded-performance {
  fill: var(--pdi-yellow) !important;
}

.uptime-bars rect.fill-color-partial-outage,
.uptime-bars rect.fill-color-major-outage {
  fill: var(--pdi-red) !important;
}

/* ── Status badges ────────────────────────────────────────── */
.component-status .operational,
span.operational {
  color: var(--pdi-green) !important;
}

.component-status .degraded-performance,
span.degraded-performance {
  color: var(--pdi-yellow) !important;
}

.component-status .partial-outage,
.component-status .major-outage,
span.partial-outage,
span.major-outage {
  color: var(--pdi-red) !important;
}

/* ── Incident history section ─────────────────────────────── */
.incidents-section,
.incidents-list {
  background-color: transparent !important;
}

.incident-title a,
.incident-title {
  color: var(--pdi-blue) !important;
}

.incident-title a:hover {
  color: var(--pdi-white) !important;
}

.incident-body,
.incident-body p,
.incident-update,
.incident-timestamp {
  color: var(--pdi-white-muted) !important;
}

/* Date headings in incident history */
.incident-date-separator,
.past-incidents h2,
.past-incidents h3 {
  color: var(--pdi-white-muted) !important;
  border-bottom: 1px solid var(--pdi-border) !important;
}

/* ── Subscribe / CTA button ───────────────────────────────── */
.btn-subscribe,
.subscription-management a.btn,
a.btn-primary,
button.btn-primary {
  background-color: var(--pdi-blue) !important;
  border-color: var(--pdi-blue-dark) !important;
  color: var(--pdi-navy) !important;
  font-weight: 600 !important;
  border-radius: 4px !important;
}

.btn-subscribe:hover,
a.btn-primary:hover,
button.btn-primary:hover {
  background-color: var(--pdi-blue-dark) !important;
  color: var(--pdi-white) !important;
}

/* ── Links ────────────────────────────────────────────────── */
a {
  color: var(--pdi-blue) !important;
}

a:hover {
  color: var(--pdi-white) !important;
}

/* ── Footer ───────────────────────────────────────────────── */
footer,
.footer {
  background-color: var(--pdi-navy) !important;
  border-top: 1px solid var(--pdi-border) !important;
  color: var(--pdi-white-muted) !important;
}

footer a,
.footer a {
  color: var(--pdi-white-muted) !important;
}

/* ── Subscription modal / dropdowns ──────────────────────── */
.modal-content,
.dropdown-menu,
#updates-dropdown {
  background-color: var(--pdi-navy-mid) !important;
  border: 1px solid var(--pdi-border) !important;
  color: var(--pdi-white-muted) !important;
}

.modal-header {
  border-bottom: 1px solid var(--pdi-border) !important;
}

.modal-footer {
  border-top: 1px solid var(--pdi-border) !important;
}

input[type="email"],
input[type="text"],
input[type="tel"],
select {
  background-color: var(--pdi-navy-light) !important;
  border: 1px solid var(--pdi-border) !important;
  color: var(--pdi-white) !important;
  border-radius: 4px !important;
}

input::placeholder {
  color: var(--pdi-white-muted) !important;
  opacity: 0.6 !important;
}

/* ── Legend (status key) ──────────────────────────────────── */
.legend .operational .legend-item-color { background-color: var(--pdi-green) !important; }
.legend .degraded  .legend-item-color   { background-color: var(--pdi-yellow) !important; }
.legend .outage    .legend-item-color,
.legend .major-outage .legend-item-color { background-color: var(--pdi-red) !important; }

.legend span {
  color: var(--pdi-white-muted) !important;
}

/* ── "Powered by Atlassian Statuspage" ────────────────────── */
.powered-by,
.powered-by a {
  color: rgba(200, 214, 227, 0.4) !important;
}

div.page-status.status-none {
  background-color: inherit;
  margin-bottom: none;
}

.components-section .component-container .group-parent-indicator:focus {
  box-shadow: none !important;
}

button.tooltip-base {
  color: var(--pdi-white-muted) !important;
}

.updates-dropdown-section {
  color: var(--pdi-white-muted) !important;
  background-color: var(--pdi-navy) !important;
}

.subscribe-text-full {
	  color: var(--pdi-white) !important;
}

.subscribe-text-short {
	  color: var(--pdi-white) !important;
}