/* nwilhelm status (light and dark, follows device setting): custom CSS for Atlassian Statuspage
   Paste into: Your Page > Customize page and emails > Customize HTML & CSS > CSS
   Selectors target Statuspage's standard markup. Verify in devtools after pasting. */

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

:root {
  color-scheme: light dark;
  --radius: 14px;
  /* Light (default) */
  --bg: #f5f6f8; --surface: #ffffff; --line: #e4e7ec; --line-soft: #eef0f3;
  --ink: #12161d; --ink-2: #4a5362; --ink-3: #6b7585;
  --ok: #0f8f6a;      --ok-bg: #e5f5ef;
  --warn: #9a6212;    --warn-bg: #fdf3dc;
  --partial: #b54a12; --partial-bg: #fde9dd;
  --down: #c62f3a;    --down-bg: #fbe5e7;
  --maint: #2f5fd0;   --maint-bg: #e5ecfc;
  --accent: #2f5fd0;
  --btn-bg: #12161d;  --btn-fg: #f5f6f8;
  --tip-bg: #12161d;  --tip-fg: #f5f6f8;
  --shadow: 0 1px 2px rgba(18,22,29,.04), 0 4px 16px rgba(18,22,29,.05);
  --pop-shadow: 0 16px 40px rgba(18,22,29,.16);
}
/* Dark: follows the visitor's device setting */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0e13; --surface: #131820; --line: #242c38; --line-soft: #1b222d;
    --ink: #eef1f6; --ink-2: #b0b9c7; --ink-3: #8a95a6;
    --ok: #3ecf9e;      --ok-bg: rgba(62,207,158,.12);
    --warn: #e9b44c;    --warn-bg: rgba(233,180,76,.13);
    --partial: #f08a4b; --partial-bg: rgba(240,138,75,.13);
    --down: #f2737d;    --down-bg: rgba(242,115,125,.13);
    --maint: #7ea2ff;   --maint-bg: rgba(126,162,255,.14);
    --accent: #7ea2ff;
    --btn-bg: #eef1f6;  --btn-fg: #0b0e13;
    --tip-bg: #2a3342;  --tip-fg: #eef1f6;
    --shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 8px 24px rgba(0,0,0,.35);
    --pop-shadow: 0 16px 40px rgba(0,0,0,.5);
  }
}

html, body { background: var(--bg) !important; }
/* Font: apply to text only. Icon fonts (the group expand/collapse plus) must keep their own font. */
body { font-family: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; }
body *:not(i):not(svg):not(svg *):not(.fa):not([class^="fa-"]):not([class*=" fa-"]):not([class*="icon"]):not([class*="indicator"]):not([class*="glyph"]) {
  font-family: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}
input, button, select, textarea { font-family: inherit; }
body { color: var(--ink); line-height: 1.5; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px;
}
.container { max-width: 760px !important; width: 100%; margin: 0 auto !important; padding: 0 20px; box-sizing: border-box; }

/* Header */
.page-header, .layout-content.status .page-header { background: transparent !important; border: 0 !important; }
.masthead-container, .masthead { padding: 36px 0 8px !important; background: transparent !important; }
.masthead .logo-container img, .logo-container img { max-height: 36px; width: auto; }
.masthead .subscribe-button, .subscribe-button, .updates-dropdown-container .btn {
  background: var(--btn-bg) !important; color: var(--btn-fg) !important; border: 0 !important;
  border-radius: 10px !important; padding: 9px 16px !important; font-weight: 600; font-size: 14px;
  box-shadow: none !important; transition: transform .12s ease, opacity .12s ease;
}
.subscribe-button:hover { opacity: .88; transform: translateY(-1px); }

/* Overall health banner */
.page-status {
  background: var(--surface) !important; color: var(--ink) !important;
  border: 1px solid var(--line) !important; border-radius: 18px !important;
  box-shadow: var(--shadow); padding: 28px 28px 28px 76px !important; margin: 20px 0 28px !important;
  position: relative; text-align: left !important;
}
.page-status .status { font-size: 28px !important; font-weight: 650; letter-spacing: -.02em; display: block; color: var(--ink) !important; }
.page-status::before {
  content: ""; position: absolute; left: 28px; top: 50%; width: 28px; height: 28px; margin-top: -14px;
  border-radius: 50%; background: var(--ok);
  box-shadow: 0 0 0 7px var(--ok-bg);
}
.page-status.status-minor::before { background: var(--warn); box-shadow: 0 0 0 7px var(--warn-bg); }
.page-status.status-major::before { background: var(--partial); box-shadow: 0 0 0 7px var(--partial-bg); }
.page-status.status-critical::before { background: var(--down); box-shadow: 0 0 0 7px var(--down-bg); }
.page-status.status-maintenance::before { background: var(--maint); box-shadow: 0 0 0 7px var(--maint-bg); }
.page-status .last-updated-stamp { color: var(--ink-3) !important; font-size: 13px; }

/* Components */
.components-section { margin: 0 !important; }
.components-uptime-link { color: var(--ink-3) !important; font-size: 13px; padding: 0 4px 10px !important; text-align: left !important; }
.components-container { border: 0 !important; display: grid; gap: 16px; }
.component-container.is-group, .components-container > .component-container {
  background: var(--surface) !important; border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important; box-shadow: var(--shadow); overflow: hidden; margin: 0 !important;
}
.component-inner-container { padding: 16px 20px !important; background: transparent !important; border: 0 !important; }
.component-container.is-group > .component-inner-container { border-bottom: 1px solid var(--line-soft) !important; }
.component-container.is-group > .component-inner-container .name { font-weight: 650; font-size: 15px; color: var(--ink) !important; }
.child-components-container .component-container { border: 0 !important; border-top: 1px solid var(--line-soft) !important; border-radius: 0 !important; box-shadow: none !important; }
.child-components-container .component-container:first-child { border-top: 0 !important; }
.child-components-container .name { font-weight: 500; font-size: 15px; }
/* Every component name, grouped or standalone, uses the theme text colour (Statuspage's own default can be white) */
.component-container .name, .component-container .name *, .component-inner-container .name, .component-inner-container .name a { color: var(--ink) !important; }
.component-inner-container .tooltip-base, .component-inner-container .icon-indicator { color: var(--ink-3) !important; }
@media (hover: hover) { .component-inner-container:hover { background: color-mix(in srgb, var(--ink) 2.5%, transparent) !important; } }

/* Row layout (grid): name left, status chip right, everything else (uptime bars) full width below */
.component-inner-container { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 12px; }
.component-inner-container > .name, .component-inner-container > .component-name { grid-column: 1; min-width: 0; float: none !important; display: block; }
.component-inner-container > .component-status { grid-column: 2; grid-row: 1; float: none !important; margin: 0 !important; justify-self: end; }
.component-inner-container > :not(.name):not(.component-name):not(.component-status) { grid-column: 1 / -1; min-width: 0; }
.component-inner-container > .uptime-90-days-wrapper { width: 100%; box-sizing: border-box; }
.availability-time-line-graphic { display: block; width: 100%; max-width: 100%; }
.legend { display: flex; align-items: center; gap: 12px; }
.legend-item { white-space: nowrap; }
.legend .spacer, .legend-item .spacer { flex: 1; height: 1px; }

/* Group expand/collapse toggle: keep it visible and tappable */
.group-parent-indicator, .component-inner-container .fa, .component-inner-container [class*="fa-"], .component-inner-container [class*="icon-indicator"] {
  color: var(--ink-2) !important; opacity: 1 !important; visibility: visible !important;
}
.is-group > .component-inner-container { cursor: pointer; }

/* Status chips (data attribute drives the colour, label text is untouched) */
.component-status {
  display: inline-flex; align-items: center; gap: 7px; font-size: 13px !important; font-weight: 550;
  padding: 3px 11px; border-radius: 999px; color: var(--ok) !important; background: var(--ok-bg);
}
.component-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
[data-component-status="degraded_performance"] .component-status { color: var(--warn) !important; background: var(--warn-bg); }
[data-component-status="partial_outage"] .component-status { color: var(--partial) !important; background: var(--partial-bg); }
[data-component-status="major_outage"] .component-status { color: var(--down) !important; background: var(--down-bg); }
[data-component-status="under_maintenance"] .component-status { color: var(--maint) !important; background: var(--maint-bg); }

/* 90 day uptime bars: keep Statuspage's own per-day fill, restyle shape only */
.uptime-90-days-wrapper, .shared-partial.uptime-90-days-wrapper { padding: 0 0 4px !important; }
.availability-time-line-graphic { width: 100%; height: 34px; }
.availability-time-line-graphic rect { rx: 2px; ry: 2px; transition: opacity .12s ease; }
.availability-time-line-graphic rect:hover { opacity: .65; }
.legend { color: var(--ink-3) !important; font-size: 12px !important; padding-top: 6px; }
.legend .uptime-percent, .legend-item.uptime-percent { color: var(--ink-2) !important; font-weight: 550; }
.legend .spacer, .legend-item .spacer { background: var(--line) !important; }
.legend-item.light { color: var(--ink-3) !important; }

/* Hover tooltip on a bar */
.tooltip, .tooltip-box, .uptime-tooltip {
  background: var(--tip-bg) !important; color: var(--tip-fg) !important; border: 0 !important;
  border-radius: 10px !important; box-shadow: var(--pop-shadow) !important; font-size: 13px;
}

/* Incidents and maintenance */
.incidents-list, .unresolved-incidents, .scheduled-maintenances-container { margin-top: 28px !important; }
.incidents-list > .font-large, .incidents-list h2, .page-title, .font-largest { font-size: 18px !important; font-weight: 650; letter-spacing: -.01em; color: var(--ink) !important; border: 0 !important; margin: 0 0 12px 4px !important; }
.status-day { background: var(--surface) !important; border: 1px solid var(--line) !important; border-radius: var(--radius) !important; padding: 16px 20px !important; margin: 0 0 10px !important; box-shadow: var(--shadow); }
.status-day .date { font-size: 14px !important; font-weight: 600; color: var(--ink) !important; border: 0 !important; margin: 0 0 6px !important; }
.status-day .no-incidents { color: var(--ink-3) !important; font-size: 14px; }
.incident-container { border: 0 !important; border-left: 3px solid var(--line) !important; padding: 2px 0 2px 14px !important; margin: 10px 0 !important; background: transparent !important; }
.incident-container.impact-none, .incident-container.impact-maintenance { border-left-color: var(--maint) !important; }
.incident-container.impact-minor { border-left-color: var(--warn) !important; }
.incident-container.impact-major { border-left-color: var(--partial) !important; }
.incident-container.impact-critical { border-left-color: var(--down) !important; }
.incident-title, .incident-title a { font-size: 15px !important; font-weight: 600; color: var(--ink) !important; }
.updates-container, .update, .incident-update { color: var(--ink-2) !important; font-size: 14px !important; }
.update strong, .update-title { color: var(--ink) !important; }
.update .whitespace-pre-wrap, .update-timestamp, .update small { color: var(--ink-3) !important; font-size: 12.5px !important; }
.unresolved-incidents .unresolved-incident { background: var(--surface) !important; border: 1px solid var(--line) !important; border-radius: var(--radius) !important; box-shadow: var(--shadow); margin-bottom: 12px !important; }
.unresolved-incidents .unresolved-incident .actual-title { color: var(--ink) !important; font-weight: 650; }

/* Subscribe dropdown and forms */
.updates-dropdown-container, .subscribe-popover, .updates-dropdown {
  background: var(--surface) !important; color: var(--ink) !important; border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important; box-shadow: var(--pop-shadow) !important;
}
input[type="text"], input[type="email"], input[type="tel"], select, .form-control {
  background: var(--bg) !important; color: var(--ink) !important; border: 1px solid var(--line) !important;
  border-radius: 9px !important; padding: 9px 12px !important; box-shadow: none !important;
}
input:focus, select:focus { border-color: var(--accent) !important; }
.btn, .updates-dropdown-container button[type="submit"] { border-radius: 9px !important; }

/* Footer */
.page-footer, .layout-content .page-footer { background: transparent !important; border: 0 !important; margin-top: 40px !important; padding: 24px 0 48px !important; color: var(--ink-3) !important; font-size: 13px; }
.page-footer a, .powered-by a { color: var(--ink-3) !important; }
.page-footer a:hover { color: var(--ink) !important; }
.powered-by { opacity: .75; }

/* Responsive */
@media (max-width: 640px) {
  .legend { justify-content: space-between; gap: 8px; }
  .legend .spacer, .legend-item .spacer { display: none; }
  .container { padding: 0 14px; }
  .page-status { padding: 22px 18px 22px 64px !important; border-radius: 16px !important; }
  .page-status::before { left: 18px; width: 24px; height: 24px; margin-top: -12px; }
  .page-status .status { font-size: 22px !important; }
  .component-inner-container { padding: 14px 16px !important; }
  .availability-time-line-graphic { height: 28px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Dark mode refinements */
@media (prefers-color-scheme: dark) {
  .page-status, .component-container.is-group, .status-day, .unresolved-incidents .unresolved-incident { box-shadow: none; }
  input::placeholder { color: var(--ink-3); }
  .availability-time-line-graphic rect { opacity: .92; }
  /* Logo: uncomment if your logo is dark and disappears on the dark background.
     Safe for a single-colour logo; avoid for multi-colour artwork. */
  /* .logo-container img { filter: brightness(0) invert(1); } */
}