/* ============================================================
   Operata Status — Statuspage custom CSS (direction 1a v3 — corrected + incident states)
   Paste into: Statuspage admin → Customise page → Custom CSS.

   Selectors verified against the live DOM of status.operata.com
   and Atlassian's status_manifest.css. Every change from the
   original draft is marked with a FIX comment.

   Set these in the admin COLOURS tab first (CSS can't reach all of them):
     Page background      #ffffff
     Header background    #ffffff
     Body text            #3f4261
     Link                 #3800b0
     Status – operational #3800b0
     Status – degraded    #ff9183
     Status – partial     #f8639f
     Status – major       #050824
     Status – maintenance #765aff
   Upload the Operata logotype as the page logo (admin → Logo & favicon).
   ============================================================ */

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

:root {
  --op-navy: #3800b0;
  --op-purple: #713ee0;
  --op-charcoal: #050824;
  --op-soot: #3f4261;
  --op-cement: #5e617d;
  --op-lavender: #f4f0ff;
  --op-lilac: #e7dbff;
  --op-spring: #ffdbea;
  --op-summer: #ffefed;
  --op-hairline: #ececf3;
  --op-border: #dcdde8;
  --op-ok: #cfc7ee;
  --op-deg: #ff9183;
  --op-out: #f8639f;
}

/* ---- Type ------------------------------------------------- */
body,
.layout-content,
.font-largest, .font-large, .font-regular, .font-small {
  font-family: 'Karla', -apple-system, sans-serif !important;
  color: var(--op-soot) !important;
  -webkit-font-smoothing: antialiased;
}

/* FIX: .status-largest does not exist. The status headline is
   h2.status.font-large inside .page-status. Removed the blanket
   ".page-status span" — it matches .last-updated-stamp, not the headline. */
.layout-content .page-status .status,
.layout-content h1, .layout-content h2,
.incident-name {
  font-family: 'Kadwa', Georgia, serif !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em;
  color: var(--op-charcoal) !important;
}

a, a:visited { color: var(--op-navy) !important; }
a:hover { color: var(--op-purple) !important; }

/* ---- Header: brand rule under the masthead ---------------- */
.layout-content.status .masthead,
.masthead {
  background: #ffffff !important;
  border-bottom: 0 !important;
}

/* FIX: .logo-container and .updates-dropdown-container are floated,
   so the :after must clear them or the gradient overlaps the logo. */
.masthead:after {
  content: '';
  display: block;
  clear: both;
  height: 2px;
  margin-top: 18px;
  background: linear-gradient(90deg, #5824ff 0%, #ff80df 55%, #f9ae84 100%);
}

/* FIX: no .logo-image class exists. Real markup is
   .logo-container > a > img */
.masthead .logo-container img {
  max-height: 28px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
}

/* ---- Status banner: lavender wash, not a green bar -------- */
/* FIX: manifest sets a border, radius and text-shadow on .page-status —
   text-shadow was not being reset. */
.page-status,
.page-status.status-none,
.page-status.status-minor,
.page-status.status-major,
.page-status.status-critical,
.page-status.status-maintenance {
  background: linear-gradient(180deg, var(--op-lavender) 0%, #ffffff 100%) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  padding: 44px 24px 38px !important;
  margin: 0 0 8px !important;
  text-align: left !important;
}

.page-status .status {
  font-size: 40px !important;
  line-height: 1.12 !important;
  color: var(--op-charcoal) !important;
  margin: 0 !important;
}

.page-status .last-updated-stamp {
  font-size: 13px !important;
  color: var(--op-cement) !important;
}

/* status dot in place of the coloured bar */
/* FIX: attached to .status (the real headline element). The original
   ":first-child" span selector never matched — h2 is the first child. */
.page-status .status:before {
  content: '';
  display: inline-block;
  width: 11px; height: 11px;
  margin-right: 16px;
  vertical-align: 0.22em;
  border-radius: 50%;
  background: var(--op-navy);
  box-shadow: 0 0 0 5px rgba(118, 90, 255, 0.18);
}
.page-status.status-minor .status:before { background: var(--op-deg); box-shadow: 0 0 0 5px rgba(255,145,131,0.2); }
.page-status.status-major .status:before,
.page-status.status-critical .status:before { background: var(--op-out); box-shadow: 0 0 0 5px rgba(248,99,159,0.2); }
.page-status.status-maintenance .status:before { background: var(--op-purple); box-shadow: 0 0 0 5px rgba(113,62,224,0.2); }

/* ---- Components list -------------------------------------- */
.components-section .components-uptime-link,
.components-section .color-secondary { color: var(--op-cement) !important; }

.component-container {
  border: 0 !important;
  border-bottom: 1px solid var(--op-hairline) !important;
  border-radius: 0 !important;
  padding: 15px 0 !important;
  box-shadow: none !important;
}
.component-container .name,
.component-inner-container .name span {
  font-family: 'Karla', sans-serif !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  color: var(--op-charcoal) !important;
}
.component-container .component-status {
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--op-cement) !important;
}
.child-components-container .component-inner-container { border: 0 !important; }

/* ---- Uptime bars ------------------------------------------- */
/* FIX: the rects carry no state classes — markup is
   <rect fill="#52c176" class="uptime-day component-XXX day-0">.
   The original "rect[fill] { fill: ... }" would have painted EVERY
   bar the operational colour, hiding outage days completely.
   Fills come from the admin Colours tab. The hexes below are the
   values currently saved on this page — update them here if you
   change them in admin. The "i" flag guards against case changes. */
.availability-time-line-graphic rect { rx: 1.5; }
.availability-time-line-graphic rect[fill="#52c176" i],  /* operational */
.availability-time-line-graphic rect[fill="#3800b0" i] {
  fill: var(--op-ok) !important;
}
.availability-time-line-graphic rect[fill="#faa61a" i] { fill: var(--op-deg) !important; }  /* degraded */
.availability-time-line-graphic rect[fill="#f46e23" i] { fill: var(--op-out) !important; }  /* partial  */
.availability-time-line-graphic rect[fill="#c83745" i] { fill: var(--op-charcoal) !important; }  /* major */
.availability-time-line-graphic rect[fill="#3477dd" i] { fill: var(--op-purple) !important; }  /* maintenance */
.availability-time-line-graphic rect[fill="#5824ff" i] { fill: var(--op-hairline) !important; }  /* no data */

.legend, .legend span { color: var(--op-cement) !important; font-size: 12px !important; }

/* ============================================================
   INCIDENTS — active (index page) + resolved (/history)

   Markup re-verified against Atlassian's rendered output, Aug 2026.
   Two things differ from the v2 assumptions, and both matter:

   INDEX (server-rendered ERB). The impact class sits on the
   OUTER card, and the title is an anchor — there is no
   .incident-name here (that class only exists on the incident
   detail page, as .status-incident .page-title .incident-name):
     div.unresolved-incident.impact-*
       > div.incident-title.font-large   > a
       > div.updates > div.update
            > div.update-title.font-large
            > div.update-container > .update-body + small.update-timestamp

   /history (rendered by the HistoryIndex React component, from
   status-*.chunk.js). The impact class sits on the ANCHOR, which
   is itself the .incident-title — there is no .incident-title-link,
   no .updates and no .update-title on this page:
     div.months-container > div.month
       > h4.month-title.font-largest.border-color
       > div.month-content
            > div.incident-data.incident-container
                 > a.impact-*.incident-title.font-large
                 > div.message.incident-body.color-primary
                 > div.secondary.font-small.color-secondary   (timestamp)

   Impact ramp:
     minor       #ff9183  (peach)
     major       #f8639f  (pink)
     critical    #050824  (charcoal)
     maintenance #765aff  (violet)
     none        #3800b0  (navy)
   ============================================================ */

/* ---- Active incident card (index) -------------------------- */
.unresolved-incident {
  border: 1px solid var(--op-border) !important;
  border-radius: 16px !important;
  overflow: hidden;
  padding: 0 !important;
  margin: 0 0 20px !important;
  box-shadow: none !important;
  background: #ffffff !important;
}
.unresolved-incident.impact-minor { border-color: var(--op-deg) !important; }
.unresolved-incident.impact-major { border-color: var(--op-out) !important; }
.unresolved-incident.impact-critical { border-color: var(--op-charcoal) !important; }
.unresolved-incident.impact-maintenance { border-color: var(--op-purple) !important; }

/* header band — tinted by impact, replaces the flat coloured rule */
/* FIX(v3): impact-* is on .unresolved-incident, not on .incident-title.
   The v2 selectors (.incident-title.impact-*) matched nothing, so every
   card fell back to the plain lavender band. */
.unresolved-incident .incident-title {
  background: var(--op-lavender) !important;
  padding: 20px 24px !important;
  margin: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(5, 8, 36, 0.06) !important;
  text-shadow: none !important;
}
.unresolved-incident.impact-minor .incident-title { background: var(--op-summer) !important; }
.unresolved-incident.impact-major .incident-title { background: var(--op-spring) !important; }
.unresolved-incident.impact-critical .incident-title { background: var(--op-charcoal) !important; }
.unresolved-incident.impact-maintenance .incident-title { background: var(--op-lilac) !important; }

/* FIX(v3): the title is an <a> inside .incident-title. Statuspage
   hard-sets that anchor to #fff for the dark default band — on the
   light tints above it would have been white text on peach. */
.unresolved-incident .incident-title a,
.unresolved-incident .incident-title a:hover,
.unresolved-incident .incident-title .actual-title {
  font-family: 'Kadwa', Georgia, serif !important;
  font-weight: 400 !important;
  font-size: 21px !important;
  line-height: 1.3 !important;
  color: var(--op-charcoal) !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  text-decoration: none !important;
}
.unresolved-incident.impact-critical .incident-title a,
.unresolved-incident.impact-critical .incident-title a:hover { color: #ffffff !important; }

/* uppercase impact eyebrow above the incident name */
.unresolved-incident .incident-title:before {
  content: 'ACTIVE INCIDENT';
  display: block;
  margin-bottom: 7px;
  font-family: 'Karla', sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--op-cement);
}
.unresolved-incident.impact-minor .incident-title:before { content: 'ACTIVE INCIDENT · DEGRADED PERFORMANCE'; color: #a8442f; }
.unresolved-incident.impact-major .incident-title:before { content: 'ACTIVE INCIDENT · PARTIAL OUTAGE'; color: #a01f56; }
.unresolved-incident.impact-critical .incident-title:before { content: 'ACTIVE INCIDENT · MAJOR OUTAGE'; color: #ff80df; }
.unresolved-incident.impact-maintenance .incident-title:before { content: 'SCHEDULED MAINTENANCE'; color: var(--op-navy); }

/* update stream — index card and incident detail page */
.unresolved-incident .updates { padding: 4px 24px 18px !important; }
.unresolved-incident .update,
.incident-updates-container .update {
  padding: 15px 0 !important;
  border-bottom: 1px solid var(--op-hairline) !important;
}
.unresolved-incident .update:last-child,
.incident-updates-container .update:last-child { border-bottom: 0 !important; }

.update-title {
  font-family: 'Karla', sans-serif !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--op-navy) !important;
}
/* state dot before each update label */
.update-title:before {
  content: '';
  display: inline-block;
  width: 7px; height: 7px;
  margin-right: 9px;
  vertical-align: 0.08em;
  border-radius: 50%;
  background: currentColor;
}
.update-timestamp {
  color: var(--op-cement) !important;
  font-size: 12px !important;
  font-family: 'Karla', sans-serif !important;
}
.update-body {
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: var(--op-soot) !important;
  text-wrap: pretty;
}
.update-body a { color: var(--op-navy) !important; text-decoration: underline; }

/* ---- Resolved incidents (/history) -------------------------- */
.months-container .month { margin-bottom: 34px !important; }

.month .month-title {
  font-family: 'Kadwa', Georgia, serif !important;
  font-weight: 400 !important;
  font-size: 26px !important;
  text-transform: none !important;
  letter-spacing: -0.01em !important;
  color: var(--op-charcoal) !important;
  border-bottom: 1px solid var(--op-border) !important;
  border-color: var(--op-border) !important;
  padding-bottom: 12px !important;
  margin: 0 0 8px !important;
}

.incident-data {
  border: 0 !important;
  border-bottom: 1px solid var(--op-hairline) !important;
  border-radius: 0 !important;
  padding: 22px 0 22px 20px !important;
  margin: 0 !important;
  box-shadow: none !important;
  position: relative;
}
.month-content .incident-data:last-child { border-bottom: 0 !important; }

/* impact rail. FIX(v3): impact-* is on the child anchor, not on
   .incident-data — v2's .incident-data.impact-* matched nothing and
   every entry got the same pale rail regardless of severity. :has()
   reads the child's class; browsers without it fall back to --op-ok. */
.incident-data:before {
  content: '';
  position: absolute;
  left: 0; top: 26px; bottom: 26px;
  width: 3px;
  border-radius: 2px;
  background: var(--op-ok);
}
.incident-data:has(> .impact-minor):before { background: var(--op-deg); }
.incident-data:has(> .impact-major):before { background: var(--op-out); }
.incident-data:has(> .impact-critical):before { background: var(--op-charcoal); }
.incident-data:has(> .impact-maintenance):before { background: var(--op-purple); }

/* FIX(v3): the anchor IS .incident-title. There is no descendant <a>
   and no .incident-title-link, so v2's heading rules never applied. */
.incident-data a.incident-title,
.incident-data a.incident-title:visited {
  display: inline-block;
  font-family: 'Kadwa', Georgia, serif !important;
  font-weight: 400 !important;
  font-size: 20px !important;
  line-height: 1.3 !important;
  color: var(--op-charcoal) !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 0 6px !important;
  text-shadow: none !important;
  text-decoration: none !important;
}
.incident-data a.incident-title:hover { color: var(--op-navy) !important; }

/* FIX(v3): /history renders the body as .message.incident-body and the
   timestamp as .secondary.font-small.color-secondary — not .update-body
   and .update-timestamp, so those v2 rules were inert on this page. */
.incident-data .incident-body,
.incident-data .message {
  font-family: 'Karla', sans-serif !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: var(--op-soot) !important;
  text-align: left !important;
  text-wrap: pretty;
}
.incident-data .incident-body a { color: var(--op-navy) !important; text-decoration: underline; }
.incident-data .secondary,
.incident-data .color-secondary {
  font-family: 'Karla', sans-serif !important;
  font-size: 12px !important;
  color: var(--op-cement) !important;
  margin-top: 8px !important;
}

/* "No incidents reported." months stay quiet */
.incidents-list .no-incidents,
.month .no-incidents,
.month-content .no-incidents {
  font-size: 15px !important;
  color: var(--op-cement) !important;
  padding: 16px 0 !important;
}

/* incident detail page (/incidents/xxxx) */
.layout-content.status-incident .page-title .incident-name {
  font-family: 'Kadwa', Georgia, serif !important;
  font-weight: 400 !important;
  color: var(--op-charcoal) !important;
}
.components-affected {
  font-family: 'Karla', sans-serif !important;
  font-size: 13px !important;
  color: var(--op-cement) !important;
  background: var(--op-lavender) !important;
  border-radius: 999px !important;
  padding: 7px 14px !important;
  display: inline-block;
}

/* ---- Subscribe --------------------------------------------- */
/* FIX: .btn-default and .subscribe-btn do not exist on Statuspage.
   The real classes are .flat-button and .show-updates-dropdown. */
.flat-button,
.layout-content.status .masthead-container .updates-dropdown-container .show-updates-dropdown {
  background: var(--op-navy) !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: #ffffff !important;
  font-family: 'Karla', sans-serif !important;
  font-weight: 600 !important;
  padding: 11px 19px !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
.flat-button:hover,
.layout-content.status .masthead-container .updates-dropdown-container .show-updates-dropdown:hover {
  background: var(--op-purple) !important;
}

input[type="text"], input[type="email"], input[type="tel"], select {
  font-family: 'Karla', sans-serif !important;
  border: 1px solid #cfc7ee !important;
  border-radius: 999px !important;
  padding: 12px 18px !important;
  box-shadow: none !important;
}

/* FIX: .subscribe-dropdown does not exist; the real class is
   .updates-dropdown (inside .updates-dropdown-container). */
.updates-dropdown-container .updates-dropdown {
  border: 1px solid var(--op-border) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 30px rgba(5, 8, 36, 0.1) !important;
}

/* ---- Footer ------------------------------------------------ */
/* FIX: there is no .footer element, and .powered-by is an inline
   <span> around the Atlassian link only — styling it as a band
   produced a lavender box around six words. The real footer
   wrapper is .page-footer. */
.layout-content.status .page-footer {
  background: var(--op-lavender) !important;
  border-top: 1px solid var(--op-hairline) !important;
  border-color: var(--op-hairline) !important;
  color: var(--op-cement) !important;
  font-size: 13px !important;
  padding: 30px 24px !important;
  margin-top: 40px !important;
}
.layout-content.status .page-footer a,
.layout-content.status .page-footer .powered-by a { color: var(--op-cement) !important; }
.layout-content.status .page-footer a.history-footer-link { color: var(--op-navy) !important; }

/* ---- Layout width ----------------------------------------- */
.layout-content .container { max-width: 1080px !important; }

/* ============================================================
   /uptime and /history sub-pages
   Both render as body.status.uptime / body.status.history inside
   .layout-content.status.status-full-history — so the type, link,
   masthead, subscribe and footer rules above already carry over.
   What follows covers the chrome unique to these two pages.
   ============================================================ */

/* tab nav: Incidents | Uptime */
.layout-content.status-full-history .history-nav {
  border: 0 !important;
  border-bottom: 1px solid var(--op-hairline) !important;
  margin-bottom: 28px !important;
}
.layout-content.status-full-history .history-nav a.button {
  font-family: 'Karla', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: 0.04em;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--op-cement) !important;
  padding: 12px 4px !important;
  margin-right: 26px !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
.layout-content.status-full-history .history-nav a.button.current {
  background: transparent !important;
  color: var(--op-navy) !important;
  box-shadow: inset 0 -2px 0 var(--op-navy) !important;
}
.layout-content.status-full-history .history-nav a.button:hover {
  color: var(--op-navy) !important;
}

.layout-content.status-full-history .history-container { padding-top: 4px !important; }

/* month headings and "no incidents" copy on /history */
.layout-content.status-full-history h1,
.layout-content.status-full-history h2,
.layout-content.status-full-history h3,
.layout-content.status-full-history h4 {
  font-family: 'Kadwa', Georgia, serif !important;
  font-weight: 400 !important;
  color: var(--op-charcoal) !important;
}
.layout-content.status-full-history .color-secondary { color: var(--op-cement) !important; }
.layout-content.status-full-history .border-color { border-color: var(--op-hairline) !important; }

/* component filter dropdown on /uptime (react-select, stable prefix) */
.status-dropdown__control,
.select-input__control {
  font-family: 'Karla', sans-serif !important;
  border: 1px solid var(--op-border) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  min-height: 42px !important;
}
.status-dropdown__control--is-focused,
.select-input__control--is-focused { border-color: var(--op-navy) !important; }
.status-dropdown__menu,
.select-input__menu {
  font-family: 'Karla', sans-serif !important;
  border: 1px solid var(--op-border) !important;
  border-radius: 12px !important;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(5, 8, 36, 0.1) !important;
}
.status-dropdown__option--is-focused,
.select-input__option--is-focused { background: var(--op-lavender) !important; }
.status-dropdown__option--is-selected,
.select-input__option--is-selected { background: var(--op-navy) !important; color: #ffffff !important; }
.status-dropdown__single-value,
.select-input__single-value { color: var(--op-charcoal) !important; }

/* uptime calendar body — targeted structurally, since the calendar's
   own classes are build-hashed and change on every Atlassian deploy */
.layout-content.status-full-history table { font-family: 'Karla', sans-serif !important; }
.layout-content.status-full-history table th {
  font-weight: 600 !important;
  font-size: 12px !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--op-cement) !important;
}
.layout-content.status-full-history table td { color: var(--op-soot) !important; }

@media (max-width: 700px) {
  .page-status .status { font-size: 28px !important; }
  .component-container .name { font-size: 15px !important; }
  .unresolved-incident .incident-title a { font-size: 18px !important; }
  .incident-data a.incident-title { font-size: 18px !important; }
  .month .month-title { font-size: 22px !important; }
  .incident-data { padding-left: 16px !important; }
  .layout-content.status-full-history .history-nav a.button { margin-right: 16px !important; }
}

/* ---- Optional: restore the existing brand illustration ------
   The current live page carries this behind the masthead. The new
   design drops it. Uncomment to keep it — note it uses .masthead::after,
   which the brand rule above now occupies, so it is moved to
   .masthead-container.
@media screen and (min-width: 678px) {
  body.status.index .layout-content.status .masthead-container.basic { position: relative; }
  body.status.index .layout-content.status .masthead-container.basic::after {
    content: '';
    position: absolute;
    right: 5%;
    top: calc(100% + 20px);
    width: calc(100% - 335px);
    height: 260px;
    z-index: -1;
    background-image: url("https://operata.com/site/themes/operata/img/operata-status-illo.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }
}
------------------------------------------------------------- */