/* ============================================
   CyberQP Status Page — Custom CSS (final)
   System font stack — no external dependencies
   Selectors verified against live DOM 2026-08-27
   Applies to both Status page and History page
   ============================================ */

:root {
  --qp-green: #1E4632;        /* brand green — links, identity accents */
  --qp-green-deep: #12291D;
  --qp-btn: #3A3A3A;          /* button base — dark grey */
  --qp-btn-hover: #1F1F1F;    /* button hover — near black */
  --qp-text: #1A1A1A;
  --qp-muted: #6B7280;        /* secondary text */
  --qp-faint: #9CA3AF;        /* timestamps, tertiary text */
  --qp-radius: 8px;
  --qp-space: 32px;           /* one gap between page sections (stock was 70px) */
  --qp-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ================= Base ================= */

body, .layout-content.status {
  font-family: var(--qp-font);
  color: var(--qp-text);
}

/* ================= Type scale ================= */

.font-largest,
h2.font-largest {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

.font-large {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.font-regular {
  font-size: 14px;
  line-height: 1.55;
}

.font-small,
small {
  font-size: 12px;
  line-height: 1.4;
}

.color-secondary,
p.color-secondary {
  color: var(--qp-muted);
}

/* ================= Subscribe button (shared masthead) ================= */

.updates-dropdown-container a.show-updates-dropdown,
a#show-updates-dropdown {
  background-color: var(--qp-btn) !important;
  border-color: var(--qp-btn) !important;
  color: #FFFFFF !important;
  border-radius: var(--qp-radius);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
}

.updates-dropdown-container a.show-updates-dropdown:hover,
a#show-updates-dropdown:hover {
  background-color: var(--qp-btn-hover) !important;
  border-color: var(--qp-btn-hover) !important;
  color: #FFFFFF !important;
}

/* ================= Status page: vertical rhythm ================= */

.masthead {
  margin-bottom: var(--qp-space);   /* was 70px */
}

.page-status {
  margin-bottom: var(--qp-space);   /* was 70px */
  padding: 16px 20px;
  border-radius: var(--qp-radius);
}

.page-status .status,
.page-status h2.status.font-large {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}

.page-status .last-updated-stamp { margin: 0; }

/* Banner background stays Statuspage's stock state colors.
   To brand the all-operational state, uncomment:
.page-status.status-none { background-color: var(--qp-green) !important; }
*/

.components-section {
  margin-top: 0;
  margin-bottom: var(--qp-space);   /* was 70px */
}

.components-uptime-link { margin-bottom: 8px; }

.incidents-list { margin-top: 0; }  /* was 70px — section above owns the gap */

h2#past-incidents { margin-bottom: 20px; }

/* ================= Status page: components + incidents ================= */

.component-container .name {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
}

.component-container .component-status {
  font-size: 13px;
  font-weight: 500;
}

.incidents-list .date.border-color.font-large {
  font-size: 15px;
  font-weight: 600;
  padding-bottom: 8px;
  margin-bottom: 12px;
}

.incidents-list .status-day { margin-bottom: 28px; }

.updates-container .update { margin-bottom: 12px; }
.updates-container .update strong { font-weight: 600; }
.updates-container small {
  color: var(--qp-faint);
  display: inline-block;
  margin-top: 2px;
}

/* ================= Incident titles (both pages) ================= */

.incident-container .incident-title,
a.incident-title {
  color: var(--qp-text);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  display: inline-block;
  margin-bottom: 6px;
}

a.incident-title:hover { color: var(--qp-green); }

/* ================= History page: tabs ================= */

.history-nav { margin-bottom: var(--qp-space); }

.history-nav a.button {
  font-size: 14px;
  font-weight: 500;
  color: var(--qp-muted);
  padding: 10px 18px;
  border-radius: var(--qp-radius) var(--qp-radius) 0 0;
}

.history-nav a.button.current {
  color: var(--qp-text);
  font-weight: 600;
}

/* ================= History page: header, pagination, months ================= */

.history-header { margin-bottom: var(--qp-space); }

.pagination a.previous-page,
.pagination a.next-page {
  border-radius: var(--qp-radius);
  border-color: #E5E7EB;
  color: var(--qp-muted);
  transition: border-color 120ms ease, color 120ms ease;
}

.pagination a.previous-page:not(.disabled):hover,
.pagination a.next-page:not(.disabled):hover {
  border-color: var(--qp-btn);
  color: var(--qp-text);
}

.pagination a.disabled { opacity: 0.35; }

.pagination .current {
  font-size: 14px;
  font-weight: 500;
}

.month { margin-bottom: var(--qp-space); }

.month .month-title {
  margin-bottom: 16px;
  padding-bottom: 8px;
}

.incident-data.incident-container { margin-bottom: 20px; }

.incident-container .incident-body { margin: 4px 0 6px; }

.incident-container .secondary { color: var(--qp-faint); }

/* ================= History page: uptime tab ================= */

.uptime-header { margin-bottom: 16px; }

/* Component selector (react-select — stable "select-input__" hooks only) */
.component-selector .select-input__control {
  border-radius: var(--qp-radius);
  border-color: #E5E7EB;
  min-height: 38px;
  font-size: 14px;
  box-shadow: none;
}

.component-selector .select-input__control:hover {
  border-color: var(--qp-btn);
}

.component-selector .select-input__control--is-focused {
  border-color: var(--qp-btn) !important;
  box-shadow: 0 0 0 3px rgba(58, 58, 58, 0.15) !important;
}

.select-input__menu {
  border-radius: var(--qp-radius);
  overflow: hidden;
  font-size: 14px;
}

.select-input__option--is-focused {
  background-color: #F3F4F6 !important;
  color: var(--qp-text) !important;
}

.select-input__option--is-selected {
  background-color: var(--qp-btn) !important;
  color: #FFFFFF !important;
}

/* Calendar */
.calendar-month .month-header h6.month-name {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin: 0 0 8px;
}

.calendar-month .month-header small.month-uptime {
  color: var(--qp-faint);
}

/* Soften day squares — shape only; fills carry status meaning, untouched */
.calendar-month .days svg rect {
  rx: 3px;
}