/* =====================================================================
   Key Data Dashboard — Statuspage.io Custom CSS
   CSS-Only (Startup Plan) — No Custom HTML/JS

   Targets the default Statuspage.io DOM (no custom header/footer):

   div.layout-content
     div.masthead-container
       div.masthead (.no-logo when no logo uploaded)
         span.page-name  (or <a> wrapping page-name if logo present)
         .updates-dropdown-container
     div.container
       div.page-status.status-none|status-minor|status-major|status-critical
         span.status.font-large
       div.unresolved-incidents
       div.components-section
         div.component-container
           div.component-inner-container
             span.name.font-small
             span.component-status.font-small
       div.incidents-list
         div.incident-container
       div.text-section

   IMPORTANT:
   - StatusPage default .container max-width is 850px.
   - .masthead-container is OUTSIDE .container (full-width).
   - .page-status is INSIDE .container.
   - No custom HTML means the subscribe button lives inside .masthead.
   - Float-based two-column layout requires careful clearfix handling.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap');


/* ──────────────────────────────────────────────
   DESIGN TOKENS

   Brand palette:
   Primary:  #b6d9e3  #87bdb8  #00705d  #20759e  #005c78
   Accents:  #4fad9b  #035242  #88c9ef  #4a98ca  #e1ae6d
   Alerts:   #db4f33 (red)  #ea7757 (orange)  #f7bba8 (peach)
   Neutrals: #727272  #9e9fa1
   ────────────────────────────────────────────── */

:root {
  /* Page chrome */
  --kd-bg:             #f4f7fa;
  --kd-surface:        #ffffff;
  --kd-border:         #d4e2ec;

  /* Text */
  --kd-text:           #1a3a4f;
  --kd-text-soft:      #727272;
  --kd-heading:        #005c78;

  /* Brand primaries */
  --kd-teal-deep:      #00705d;
  --kd-teal-dark:      #005c78;
  --kd-blue:           #20759e;
  --kd-teal-accent:    #4fad9b;
  --kd-teal-light:     #87bdb8;
  --kd-ice:            #b6d9e3;

  /* Secondary accents */
  --kd-sky:            #4a98ca;
  --kd-sky-light:      #88c9ef;
  --kd-forest:         #035242;
  --kd-gold:           #e1ae6d;

  /* Hero */
  --kd-hero:           #005c78;

  /* Status colors */
  --kd-success-text:   #00705d;

  /* Alert colors */
  --kd-warn:           #e1ae6d;
  --kd-danger:         #ea7757;
  --kd-critical:       #db4f33;

  /* Elevation */
  --kd-shadow-sm:      0 1px 3px rgba(0, 92, 120, 0.06),
                       0 4px 12px rgba(0, 92, 120, 0.04);
  --kd-shadow-md:      0 4px 12px rgba(0, 92, 120, 0.08),
                       0 12px 28px rgba(0, 92, 120, 0.06);

  /* Radii */
  --kd-radius:         10px;
  --kd-radius-lg:      14px;
}


/* ──────────────────────────────────────────────
   BASE & TYPOGRAPHY
   ────────────────────────────────────────────── */

html,
body {
  background: var(--kd-bg) !important;
}

body {
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Arial, sans-serif !important;
  color: var(--kd-text) !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/*
   StatusPage's .container is the main content wrapper.
   Default is 90% / max 850px. We keep the max-width
   reasonable — going wider than ~960px on a status page
   looks sparse unless you have tons of components.
*/
.container {
  max-width: 1180px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--kd-heading) !important;
  font-family: "Poppins", "DM Sans", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Arial, sans-serif !important;
  letter-spacing: -0.02em;
}

a {
  color: var(--kd-blue) !important;
  transition: opacity 0.15s ease !important;
}

a:hover {
  opacity: 0.85;
}

/* Override StatusPage's built-in font classes */
.font-regular,
.font-small {
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Arial, sans-serif !important;
}

.font-large,
.font-largest {
  font-family: "Poppins", "DM Sans", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Arial, sans-serif !important;
}

/* Protect Font Awesome icons from font-family overrides */
.fa,
.fa::before,
[class^="fa-"],
[class*=" fa-"],
.icon-indicator,
.group-parent-indicator {
  font-family: "FontAwesome" !important;
}


/* ──────────────────────────────────────────────
   MASTHEAD (Header Bar)

   .masthead-container is full-width and sits
   OUTSIDE .container. It holds the .masthead
   which contains the page name + subscribe btn.

   Strategy: Give it the brand blue background.
   Use padding to visually center the content
   to match .container width.
   ────────────────────────────────────────────── */

.masthead-container {
  background: var(--kd-hero) !important;
  border: 0 !important;
  box-shadow: none !important;
  text-align: left !important;
  /* Force full-width — StatusPage defaults to max-width:850px */
  max-width: none !important;
  width: 100% !important;
}

/* Override the .basic variant */
.masthead-container.basic {
  text-align: left !important;
  max-width: none !important;
  width: 100% !important;
}

.masthead-container.basic .masthead {
  text-align: left !important;
}

.masthead {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: 28px 32px 12px !important;
  min-height: 0 !important;
  text-align: left !important;
  position: relative !important;
}

.masthead.no-logo {
  margin-bottom: 0 !important;
  text-align: left !important;
}

/*
   Page title — the actual DOM uses a bare <h3>
   inside .masthead.no-logo (no .page-name class).
   
   The <h3> shrink-wraps to its text (538px) and
   gets centered by the parent's text-align:center.
   
   FIX: Force width:100% so the <h3> fills the
   full parent width. Then text-align:left on
   the <h3> itself controls where text sits,
   regardless of what the parent does.
*/
.masthead h3,
.masthead.no-logo h3,
.masthead-container.basic .masthead h3,
.masthead-container.basic .masthead.no-logo h3,
.layout-content .masthead-container .masthead h3,
body.status .masthead-container .masthead h3 {
  color: #ffffff !important;
  font-family: "Poppins", "DM Sans", -apple-system, sans-serif !important;
  font-size: 1.75rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
  text-align: left !important;
  text-decoration: none !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Also handle pages WITH a logo (span.page-name) */
.page-name,
span.page-name,
.masthead .page-name,
.masthead a {
  color: #ffffff !important;
  font-family: "Poppins", "DM Sans", -apple-system, sans-serif !important;
  font-size: 1.75rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
  text-align: left !important;
  text-decoration: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* All headings inside masthead — white, left-aligned */
.masthead h1,
.masthead h2,
.masthead-container h1,
.masthead-container h2,
.masthead-container h3 {
  color: #ffffff !important;
  text-align: left !important;
  margin: 0 !important;
}


/* ──────────────────────────────────────────────
   SUBSCRIBE BUTTON

   In CSS-only mode (no custom header), the
   subscribe button lives inside .masthead as
   .updates-dropdown-container. We DON'T use
   position: absolute — that causes overlap
   issues at different widths. Instead, we let
   flexbox (justify-content: space-between on
   .masthead) handle the positioning.
   ────────────────────────────────────────────── */

.updates-dropdown-container {
  /* Absolutely position within .masthead (which is position:relative) */
  position: absolute !important;
  top: 50% !important;
  right: 32px !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  z-index: 5 !important;
}

.updates-dropdown-container .show-updates-dropdown,
.updates-dropdown-container #show-updates-dropdown {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 36px !important;
  padding: 0 20px !important;
  border: 1.5px solid rgba(255, 255, 255, 0.35) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  font-family: "DM Sans", -apple-system, sans-serif !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  transition: background 0.2s ease, border-color 0.2s ease !important;
  white-space: nowrap !important;
}

.updates-dropdown-container .show-updates-dropdown:hover,
.updates-dropdown-container #show-updates-dropdown:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  color: #ffffff !important;
}

/* Subscribe dropdown panel */
.updates-dropdown {
  border-radius: var(--kd-radius-lg) !important;
  border: 1px solid var(--kd-border) !important;
  box-shadow: var(--kd-shadow-md) !important;
  font-family: "DM Sans", -apple-system, sans-serif !important;
}


/* ──────────────────────────────────────────────
   STATUS BANNER (.page-status)

   This is INSIDE .container. It can't bleed
   full-width without negative margins — which
   are fragile. Instead, we use a different
   approach:

   OPERATIONAL STATE: We make .page-status
   visually blend with the masthead by using
   the same blue background and pulling it
   up with a negative top margin so it looks
   like a seamless extension of the header.
   We use a pseudo-element on .container to
   create the blue backdrop.

   NON-OPERATIONAL: Alert card style with
   colored left border.
   ────────────────────────────────────────────── */

/*
   Blue backdrop that extends behind .page-status.
   We use .layout-content::before to create a
   full-width blue band that sits behind
   the status banner area.
*/
.layout-content {
  position: relative !important;
}

.layout-content.status-index::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  /* Height covers masthead + status banner area */
  height: 140px !important;
  background: var(--kd-hero) !important;
  z-index: 0 !important;
}

/* Ensure .container sits above the pseudo-element */
.layout-content .container {
  position: relative !important;
  z-index: 1 !important;
}

/* Ensure masthead sits above too */
.masthead-container {
  position: relative !important;
  z-index: 2 !important;
}

/* Operational status — transparent bg, blends with blue */
.page-status {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 0 12px 0 !important;
  padding: 4px 0 28px 0 !important;
  text-align: left !important;
}

.page-status.status-none {
  background: transparent !important;
  border: none !important;
  text-align: left !important;
}

.page-status .status,
.page-status h2.status,
.page-status h2.status.font-large {
  font-weight: 600 !important;
  font-family: "DM Sans", -apple-system, sans-serif !important;
  font-size: 1.15rem !important;
  color: rgba(255, 255, 255, 0.9) !important;
  letter-spacing: 0.01em !important;
  position: relative !important;
  padding-left: 24px !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}

/* Green dot before status text — slightly larger to match */
.page-status .status::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  background: var(--kd-teal-accent) !important;
  box-shadow: 0 0 0 3px rgba(79, 173, 155, 0.2),
              0 0 8px rgba(79, 173, 155, 0.4) !important;
}

/*
   NON-OPERATIONAL states — alert card.
   These need a visible background since
   the blue backdrop behind them looks wrong.
*/
.page-status.status-minor,
.page-status.status-major,
.page-status.status-critical {
  background: var(--kd-surface) !important;
  border: 1px solid var(--kd-border) !important;
  border-radius: var(--kd-radius) !important;
  padding: 14px 20px !important;
  margin-top: 18px !important;
  margin-bottom: 8px !important;
  box-shadow: var(--kd-shadow-sm) !important;
}

.page-status.status-minor  { border-left: 4px solid var(--kd-gold)     !important; }
.page-status.status-major  { border-left: 4px solid var(--kd-danger)   !important; }
.page-status.status-critical { border-left: 4px solid var(--kd-critical) !important; }

.page-status.status-minor .status,
.page-status.status-major .status,
.page-status.status-critical .status {
  color: var(--kd-text) !important;
  padding-left: 0 !important;
  font-size: 0.92rem !important;
  font-weight: 600 !important;
}

/* Hide the green dot for non-operational states */
.page-status.status-minor .status::before,
.page-status.status-major .status::before,
.page-status.status-critical .status::before {
  display: none !important;
}


/* ──────────────────────────────────────────────
   COMPONENT CARDS
   ────────────────────────────────────────────── */

.components-section {
  margin-top: 28px !important;
  margin-bottom: 32px !important;
}

/* "System Status" heading via CSS pseudo-element */
.components-section::before {
  content: "System Status" !important;
  display: block !important;
  background: linear-gradient(
    135deg,
    var(--kd-teal-dark),
    var(--kd-blue),
    var(--kd-teal-accent)
  ) !important;
  color: #ffffff !important;
  font-family: "Poppins", "DM Sans", -apple-system, sans-serif !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.5 !important;
  border-radius: var(--kd-radius-lg) !important;
  padding: 14px 18px !important;
  margin-bottom: 14px !important;
  box-sizing: border-box !important;
}

.component-container {
  background: var(--kd-surface) !important;
  border: 1px solid var(--kd-border) !important;
  border-radius: var(--kd-radius) !important;
  box-shadow: var(--kd-shadow-sm) !important;
  margin-bottom: 8px !important;
  transition: box-shadow 0.2s ease, border-color 0.2s ease !important;
  /* No transform on hover — it creates stacking issues */
}

.component-container:hover {
  box-shadow: var(--kd-shadow-md) !important;
  border-color: var(--kd-ice) !important;
}

.component-inner-container {
  border-left: none !important;
  border-bottom: none !important;
  border-radius: var(--kd-radius) !important;
  padding: 14px 18px !important;
}

.component-inner-container .name {
  color: var(--kd-heading) !important;
  font-weight: 700 !important;
}

/* Status text colors — operational gets brand green */
.component-inner-container .component-status {
  font-weight: 600 !important;
  font-size: 0.85rem !important;
}

.component-inner-container.status-green .component-status {
  color: var(--kd-teal-deep) !important;
}

.component-inner-container.status-yellow .component-status {
  color: var(--kd-gold) !important;
}

.component-inner-container.status-orange .component-status {
  color: var(--kd-danger) !important;
}

.component-inner-container.status-red .component-status {
  color: var(--kd-critical) !important;
}

.component-inner-container.status-blue .component-status {
  color: var(--kd-blue) !important;
}

/* Component group headers */
.component-group-name {
  color: var(--kd-heading) !important;
  font-weight: 700 !important;
}

/* Remove the line/border under the group header */
.component-container.is-group > .component-inner-container {
  border-bottom: none !important;
}

/* Remove border between group header and child components */
.child-components-container {
  border-top: none !important;
}

.child-components-container .component-inner-container {
  border-left: none !important;
  padding-left: 28px !important;
  border-bottom: none !important;
}

/* Add subtle separator between child components instead */
.child-components-container .component-inner-container + .component-inner-container {
  border-top: 1px solid var(--kd-border) !important;
}


/* ──────────────────────────────────────────────
   PAST INCIDENTS
   ────────────────────────────────────────────── */

.incidents-list {
  margin-top: 28px !important;
}

/* "Recently Resolved" heading — gradient banner
   Replaces "Past Incidents" text using CSS:
   - Set font-size:0 to hide original text
   - Use ::after to inject new text at normal size
*/
.incidents-list > .font-largest,
.incidents-list > h2 {
  background: linear-gradient(
    135deg,
    var(--kd-teal-dark),
    var(--kd-blue),
    var(--kd-teal-accent)
  ) !important;
  color: #ffffff !important;
  font-family: "Poppins", "DM Sans", -apple-system, sans-serif !important;
  font-size: 0 !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.5 !important;
  border-radius: var(--kd-radius-lg) !important;
  padding: 14px 18px !important;
  margin-top: 0 !important;
  margin-bottom: 14px !important;
  border-bottom: none !important;
  box-sizing: border-box !important;
}

.incidents-list > .font-largest::after,
.incidents-list > h2::after {
  content: "Recently Resolved" !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  font-family: "Poppins", "DM Sans", -apple-system, sans-serif !important;
  letter-spacing: -0.02em !important;
  color: #ffffff !important;
}

/* Each day block */
.status-day {
  background: var(--kd-surface) !important;
  border: 1px solid var(--kd-border) !important;
  border-radius: var(--kd-radius-lg) !important;
  box-shadow: var(--kd-shadow-sm) !important;
  padding: 16px 18px !important;
  margin-top: 0 !important;
  margin-bottom: 10px !important;
}

/* Remove any top margin on the date heading inside day blocks */
.status-day .date {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Hide days with no incidents */
.status-day.no-incidents {
  display: none !important;
}

/*
   Hide days that have no actual incident content
   (e.g. identified-only dates where the incident
   card renders under the resolution date).
*/
.status-day:not(:has(.incident-container)) {
  display: none !important;
}

/*
   Hide scheduled maintenance from the incidents list.
   StatusPage uses .impact-maintenance on maintenance
   incident titles.
*/
.incidents-list .incident-title.impact-maintenance {
  display: none !important;
}

/* Hide the entire incident-container if it's maintenance */
.incidents-list .incident-container:has(.incident-title.impact-maintenance) {
  display: none !important;
}

/*
   If hiding maintenance leaves a day with no visible
   incidents, hide that day too.
*/
.status-day:not(:has(.incident-container:not(:has(.incident-title.impact-maintenance)))) {
  display: none !important;
}

/*
   Fallback message when no resolved incidents exist
   in the past 14 days. Uses nested :has() to check
   if any visible incident cards remain.
*/
.incidents-list:not(:has(.status-day:has(.incident-container:not(:has(.incident-title.impact-maintenance)))))::after {
  content: "No incidents resolved in the past 14 days." !important;
  display: block !important;
  background: var(--kd-surface) !important;
  border: 1px solid var(--kd-border) !important;
  border-radius: var(--kd-radius-lg) !important;
  box-shadow: var(--kd-shadow-sm) !important;
  padding: 20px 18px !important;
  color: var(--kd-text-soft) !important;
  font-family: "DM Sans", -apple-system, sans-serif !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  text-align: center !important;
  line-height: 1.5 !important;
}

/* Date labels */
.status-day .date {
  color: var(--kd-heading) !important;
  font-weight: 700 !important;
  margin-top: 0 !important;
  margin-bottom: 8px !important;
  padding-top: 0 !important;
  padding-bottom: 8px !important;
  font-size: 0.95rem !important;
  line-height: 1.3 !important;
}

.status-day .date.border-color {
  border-bottom: 1px solid var(--kd-border) !important;
}

.status-day .date.font-large {
  font-size: 0.95rem !important;
  line-height: 1.3 !important;
  margin: 0 0 8px 0 !important;
  padding-bottom: 8px !important;
}

/* "No incidents reported" */
.status-day .color-secondary {
  color: var(--kd-text-soft) !important;
}

/* Incident entries */
.incident-container {
  margin-top: 10px !important;
}

.incident-title {
  color: var(--kd-heading) !important;
  font-weight: 700 !important;
}

.incident-title a {
  color: var(--kd-blue) !important;
  text-decoration: none !important;
}

.incident-title a:hover {
  text-decoration: underline !important;
}

/* Impact labels */
.impact-none     { color: var(--kd-text-soft) !important; }
.impact-minor    { color: var(--kd-gold)         !important; }
.impact-major    { color: var(--kd-danger)        !important; }
.impact-critical { color: var(--kd-critical)      !important; }

/* Incident updates */
.incident-updates .update {
  border-left: 3px solid var(--kd-border) !important;
  padding-left: 14px !important;
  margin-left: 4px !important;
}

/* Incident timestamps — no italics anywhere */
.incident-container small,
.incident-updates small,
.incidents-list small,
.status-day small,
.update small {
  font-style: normal !important;
}

/* StatusPage uses <var> tags in dates which are
   italic by default in all browsers. Override. */
var,
.status-day var,
.incident-container var,
.incidents-list var,
.layout-content var {
  font-style: normal !important;
}

/* History page date timestamps use .secondary.color-secondary
   which StatusPage makes italic by default */
.secondary,
.color-secondary,
.font-small.color-secondary,
.secondary.font-small.color-secondary,
.incident-container .secondary,
.incident-data .secondary {
  font-style: normal !important;
}


/* ──────────────────────────────────────────────
   UNRESOLVED INCIDENTS (Active)
   ────────────────────────────────────────────── */

.unresolved-incidents {
  margin-top: 16px !important;
  margin-bottom: 20px !important;
}

/*
   When there's an active incident, StatusPage removes
   .page-status entirely. Reduce the blue backdrop to
   just cover the masthead, and add modest top padding.
*/
.layout-content.status-index .container:not(:has(.page-status)) {
  padding-top: 20px !important;
}

/* Shrink the blue band when there's no page-status */
.layout-content.status-index:not(:has(.page-status))::before {
  height: 75px !important;
}

/* Unresolved incident cards */
.unresolved-incidents .unresolved-incident {
  background: var(--kd-surface) !important;
  border: 1px solid var(--kd-border) !important;
  border-radius: var(--kd-radius-lg) !important;
  box-shadow: var(--kd-shadow-sm) !important;
  padding: 18px !important;
  margin-bottom: 10px !important;
}

/* Incident title bar — white text */
.unresolved-incidents .unresolved-incident .incident-title,
.unresolved-incidents .unresolved-incident .incident-title a {
  color: #ffffff !important;
}

/* Subscribe link inside incident banner — white */
.unresolved-incidents .unresolved-incident a {
  color: #ffffff !important;
}

/* Incident update text inside the banner — readable */
.unresolved-incidents .unresolved-incident .updates {
  color: var(--kd-text) !important;
}


/* ──────────────────────────────────────────────
   SCHEDULED MAINTENANCE
   Floated into the right sidebar column below
   the Recently Resolved section.
   ────────────────────────────────────────────── */

.scheduled-maintenances-container {
  margin-bottom: 20px !important;
}

/* "Planned Maintenance" heading via ::before */
.scheduled-maintenances-container::before {
  content: "Planned Maintenance" !important;
  display: block !important;
  background: linear-gradient(
    135deg,
    var(--kd-teal-dark),
    var(--kd-blue),
    var(--kd-teal-accent)
  ) !important;
  color: #ffffff !important;
  font-family: "Poppins", "DM Sans", -apple-system, sans-serif !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.5 !important;
  border-radius: var(--kd-radius-lg) !important;
  padding: 14px 18px !important;
  margin-bottom: 14px !important;
  box-sizing: border-box !important;
}

/*
   Hide ALL default headings StatusPage renders
   inside the scheduled maintenance section
*/
.scheduled-maintenances-container > h2,
.scheduled-maintenances-container > .font-largest {
  display: none !important;
}

/* Use font-size:0 as fallback to hide any text
   nodes that aren't in a specific element */
.scheduled-maintenances-container {
  font-size: 0 !important;
}

/* Restore font-size on actual content children */
.scheduled-maintenances-container::before {
  font-size: 1.05rem !important;
}

.scheduled-maintenances-container * {
  font-size: 0.9rem !important;
}

/* Maintenance cards — .scheduled-maintenance is the wrapper */
.scheduled-maintenances-container .scheduled-maintenance {
  background: var(--kd-surface) !important;
  border: 1px solid var(--kd-border) !important;
  border-radius: var(--kd-radius-lg) !important;
  box-shadow: var(--kd-shadow-sm) !important;
  padding: 16px 18px !important;
  margin-bottom: 10px !important;
  font-size: 0.9rem !important;
}

/* Maintenance title — h3.incident-title */
.scheduled-maintenances-container .incident-title {
  font-size: 1rem !important;
  font-weight: 700 !important;
  margin-bottom: 6px !important;
  padding-bottom: 8px !important;
  display: block !important;
  border-bottom: 1px solid var(--kd-border) !important;
}

.scheduled-maintenances-container .incident-title a {
  color: var(--kd-blue) !important;
  text-decoration: none !important;
  font-size: 1rem !important;
}

.scheduled-maintenances-container .incident-title a:hover {
  text-decoration: underline !important;
}

/* Scheduled time (small inside h3) — match surrounding text size */
.scheduled-maintenances-container .incident-title small {
  font-size: 0.8rem !important;
  color: var(--kd-text-soft) !important;
  font-style: normal !important;
  font-weight: 500 !important;
  display: block !important;
  float: none !important;
  margin-top: 4px !important;
}

/* Fix var tags inside schedule times to match parent font size */
.scheduled-maintenances-container .incident-title small var {
  font-size: inherit !important;
  font-style: normal !important;
}

/* Update text */
.scheduled-maintenances-container .updates-container {
  font-size: 0.88rem !important;
  color: var(--kd-text) !important;
  line-height: 1.5 !important;
}

.scheduled-maintenances-container .update {
  margin-top: 8px !important;
}

.scheduled-maintenances-container .update small {
  font-size: 0.8rem !important;
  color: var(--kd-text-soft) !important;
  font-style: normal !important;
  display: block !important;
  margin-top: 4px !important;
}

/* Fix var tags inside update timestamps */
.scheduled-maintenances-container .update small var {
  font-size: inherit !important;
  font-style: normal !important;
}

/* Var tags — no italics */
.scheduled-maintenances-container var {
  font-style: normal !important;
  font-size: inherit !important;
}


/* ──────────────────────────────────────────────
   "ABOUT THIS PAGE" / TEXT SECTION
   ────────────────────────────────────────────── */

.text-section {
  background: var(--kd-surface) !important;
  border: 1px solid var(--kd-border) !important;
  border-radius: var(--kd-radius-lg) !important;
  box-shadow: var(--kd-shadow-sm) !important;
  padding: 18px 20px !important;
  margin-top: 24px !important;
}


/* ──────────────────────────────────────────────
   INCIDENT HISTORY LINK
   ────────────────────────────────────────────── */

.incidents-list .font-small a,
a[href*="/history"] {
  color: var(--kd-blue) !important;
  font-weight: 600 !important;
}


/* ──────────────────────────────────────────────
   FOOTER ("Powered by Statuspage")
   ────────────────────────────────────────────── */

.page-footer {
  color: var(--kd-text-soft) !important;
  font-size: 0.8rem !important;
  margin-top: 40px !important;
  clear: both !important;
  float: none !important;
  width: auto !important;
  position: relative !important;
  display: block !important;
}

.page-footer a {
  color: var(--kd-text-soft) !important;
}


/* ──────────────────────────────────────────────
   FORMS / INPUTS
   ────────────────────────────────────────────── */

input,
select,
textarea {
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Arial, sans-serif !important;
  border: 1px solid var(--kd-border) !important;
  border-radius: var(--kd-radius) !important;
  box-shadow: none !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--kd-blue) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(32, 117, 158, 0.15) !important;
}

button,
.btn,
input[type="submit"] {
  font-family: "DM Sans", -apple-system, sans-serif !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
}

/* Subscribe / action buttons — white text on colored bg */
.flat-button,
a.flat-button {
  color: #ffffff !important;
}


/* ──────────────────────────────────────────────
   SEPARATORS & MODALS
   ────────────────────────────────────────────── */

hr,
.separator,
.border {
  border-color: var(--kd-border) !important;
}

.modal-content,
.modal-body {
  border-radius: var(--kd-radius-lg) !important;
  font-family: "DM Sans", -apple-system, sans-serif !important;
}


/* ──────────────────────────────────────────────
   TWO-COLUMN LAYOUT (Desktop ≥ 1060px)

   Float-based two-column layout.
   Components left, incidents right.
   ────────────────────────────────────────────── */

@media (min-width: 768px) {
  .container {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
}

@media (min-width: 1060px) {
  .layout-content .container {
    overflow: visible !important;
    display: flow-root !important;
    min-height: auto !important;
    height: auto !important;
  }

  .layout-content .container::after {
    content: "" !important;
    display: table !important;
    clear: both !important;
  }

  /* Full-width elements stay above the columns */
  .page-status,
  .unresolved-incidents {
    clear: both !important;
    float: none !important;
    width: auto !important;
    overflow: visible !important;
  }

  /* Components = main column (left) */
  .components-section {
    float: left !important;
    width: calc(100% - 400px) !important;
    margin-right: 0 !important;
    padding-right: 28px !important;
    box-sizing: border-box !important;
  }

  /* Past Incidents = sidebar (right, 380px) */
  .incidents-list {
    float: right !important;
    width: 380px !important;
    margin-top: 28px !important;
    box-sizing: border-box !important;
  }

  /* Scheduled Maintenance = right column */
  .scheduled-maintenances-container {
    float: right !important;
    width: 380px !important;
    box-sizing: border-box !important;
    margin-top: 28px !important;
    margin-bottom: 14px !important;
  }

  .incidents-list > .font-largest,
  .incidents-list > h2 {
    margin-top: 0 !important;
  }

  /* "About This Page" below both columns */
  .text-section {
    clear: both !important;
    float: none !important;
    width: auto !important;
  }

  /* Footer below both columns */
  .page-footer {
    clear: both !important;
  }

  /* Catch-all for stray elements */
  .container > a,
  .container > p,
  .container > div:not(.page-status):not(.unresolved-incidents):not(.scheduled-maintenances-container):not(.components-section):not(.incidents-list):not(.text-section) {
    clear: both !important;
    display: block !important;
    float: none !important;
    width: auto !important;
  }

  .incidents-list .font-small,
  .incidents-list > a {
    display: block !important;
    margin-top: 8px !important;
  }

  /* Tighter sidebar day blocks on desktop */
  .incidents-list .status-day {
    padding: 12px 14px !important;
    margin-bottom: 8px !important;
    font-size: 0.9rem !important;
  }
}


/* ──────────────────────────────────────────────
   MOBILE RESPONSIVE
   ────────────────────────────────────────────── */

@media (max-width: 767px) {
  .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .page-name,
  .masthead .page-name,
  .masthead a {
    font-size: 1.4rem !important;
  }

  .masthead {
    padding: 20px 16px 10px !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  .page-status .status,
  .page-status h2.status {
    font-size: 0.82rem !important;
  }

  .status-day {
    padding: 14px !important;
  }

  .component-inner-container {
    padding: 12px 14px !important;
  }

  /* Kill the blue backdrop pseudo-element height */
  .layout-content.status-index::before {
    height: 120px !important;
  }
}

/* Small phones */
@media (max-width: 450px) {
  .page-name,
  .masthead .page-name,
  .masthead a {
    font-size: 1.2rem !important;
  }

  .layout-content.status-index::before {
    height: 110px !important;
  }
}


/* ──────────────────────────────────────────────
   HISTORY PAGE (.status-full-history)

   The history page has a different layout:
   .container contains:
     1. <h4> — "Incident History" heading
     2. <div> — months, incidents, pagination
     3. .page-footer

   We match the main page header by:
   - Extending the blue band to match
   - Adding a fake status line via ::after on
     .masthead (CSS-only, hardcoded text)
   - Styling "Incident History" as a page heading
     below the blue band
   ────────────────────────────────────────────── */

/*
   History page header: clean blue band with just
   the title and subscribe button. No fake status
   line — we can't know the real status with CSS-only,
   and showing wrong info during incidents is worse
   than showing nothing.
   
   The masthead gets extra bottom padding to fill
   the header area cleanly.
*/
.layout-content.status-full-history .masthead::after {
  display: none !important;
}

.layout-content.status-full-history .masthead-container::after {
  display: none !important;
}

/* Give the masthead more bottom padding on history page
   so the blue band doesn't end abruptly after the title */
.layout-content.status-full-history .masthead {
  padding-bottom: 28px !important;
}

/* "Incident History" heading — clean section title */
.layout-content.status-full-history .container > h4 {
  color: var(--kd-heading) !important;
  font-family: "Poppins", "DM Sans", -apple-system, sans-serif !important;
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  margin: 28px 0 20px 0 !important;
  padding: 0 0 14px 0 !important;
  border-bottom: 2px solid var(--kd-border) !important;
}

/* History navigation (date range + arrows) */
.layout-content.status-full-history .history-nav {
  margin-bottom: 28px !important;
}

.layout-content.status-full-history .history-nav a {
  color: var(--kd-text-soft) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

.layout-content.status-full-history .history-nav a.current {
  color: var(--kd-heading) !important;
  background: var(--kd-surface) !important;
  border-radius: var(--kd-radius) !important;
  padding: 6px 12px !important;
}

/* Show/hide filter */
.layout-content.status-full-history .show-filter {
  background: var(--kd-blue) !important;
  color: #ffffff !important;
  border-radius: var(--kd-radius) !important;
  font-family: "DM Sans", -apple-system, sans-serif !important;
  font-weight: 600 !important;
}

/* Month headings */
.layout-content.status-full-history .month h4,
.layout-content.status-full-history h4.month-title {
  color: var(--kd-heading) !important;
  font-family: "Poppins", "DM Sans", -apple-system, sans-serif !important;
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  padding-bottom: 10px !important;
  margin-bottom: 16px !important;
  border-bottom: 3px solid var(--kd-teal-accent) !important;
}

/* Incident cards on history page */
.layout-content.status-full-history .incident-container {
  background: var(--kd-surface) !important;
  border: 1px solid var(--kd-border) !important;
  border-radius: var(--kd-radius-lg) !important;
  box-shadow: var(--kd-shadow-sm) !important;
  padding: 18px 20px !important;
  margin-bottom: 12px !important;
  transition: box-shadow 0.2s ease !important;
}

.layout-content.status-full-history .incident-container:hover {
  box-shadow: var(--kd-shadow-md) !important;
}

/* Incident titles */
.layout-content.status-full-history .incident-title {
  font-weight: 700 !important;
  font-size: 1.05rem !important;
  margin-bottom: 4px !important;
}

.layout-content.status-full-history .incident-title a {
  color: var(--kd-heading) !important;
  text-decoration: none !important;
}

.layout-content.status-full-history .incident-title a:hover {
  color: var(--kd-blue) !important;
  text-decoration: underline !important;
}

/* Maintenance incidents — styled distinctly */
.layout-content.status-full-history .incident-title.impact-maintenance a {
  color: var(--kd-blue) !important;
}

/* Incident description text */
.layout-content.status-full-history .incident-container p {
  color: var(--kd-text) !important;
  line-height: 1.6 !important;
  margin: 6px 0 !important;
}

/* Incident timestamps */
.layout-content.status-full-history .incident-container small {
  color: var(--kd-text-soft) !important;
  font-size: 0.8rem !important;
  font-style: normal !important;
}

/* "No incidents" text for empty months */
.layout-content.status-full-history .month .color-secondary {
  color: var(--kd-text-soft) !important;
}

/* Pagination */
.layout-content.status-full-history .history-footer {
  margin-top: 32px !important;
  padding-top: 16px !important;
  border-top: 1px solid var(--kd-border) !important;
}

.layout-content.status-full-history .history-footer .pagination a {
  color: var(--kd-blue) !important;
  font-weight: 600 !important;
  padding: 6px 12px !important;
  border-radius: var(--kd-radius) !important;
  text-decoration: none !important;
}

.layout-content.status-full-history .history-footer .pagination a:hover {
  background: var(--kd-surface) !important;
}

.layout-content.status-full-history .history-footer .pagination a.disabled {
  color: var(--kd-text-soft) !important;
  opacity: 0.5 !important;
}

/* History page footer */
.layout-content.status-full-history .page-footer {
  margin-top: 40px !important;
}



/* ──────────────────────────────────────────────
   PRINT STYLES
   ────────────────────────────────────────────── */

@media print {
  .layout-content.status-index::before,
  .layout-content.status-full-history::before {
    display: none !important;
  }

  .masthead-container {
    background: none !important;
  }

  .page-name,
  .masthead .page-name {
    color: var(--kd-heading) !important;
  }

  .page-status .status {
    color: var(--kd-text) !important;
  }

  .component-container,
  .status-day {
    box-shadow: none !important;
    border: 1px solid #ccc !important;
  }

  .updates-dropdown-container {
    display: none !important;
  }
}
                                                                                                                                                                                                                                                                                                                                                                                              @media (min-width: 1060px) {
  .scheduled-maintenances-container {
    float: right !important;
    clear: right !important;   /* anchor to top of right column */
  }

  .incidents-list {
    float: right !important;
    clear: right !important;   /* ALWAYS sit below maintenance */
  }
}