/*
 * dialogpilot theme for the public OneUptime status page.
 * Mirrors the dialogpilot app shell (dashboard + auth): Inter/Jost, navy-violet
 * primary, warm creme/stone neutrals, 18px radii and the hard "rubberhose"
 * edges (solid, zero-blur bottom shadows). OneUptime itself stays untouched;
 * this file only re-skins its markup and the native header/footer HTML.
 * Values come from dialogpilot/static/css/_variables.scss, _dark_mode.scss and
 * components/primitives/*.
 */
@font-face{font-family:Inter;src:url('/dp-assets/inter.woff2?v=c940764593d0') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:Jost;src:url('/dp-assets/jost.woff2?v=235d8f8964bf') format('woff2');font-weight:100 900;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  --dp-font:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --dp-font-heading:Jost,Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --dp-bg:#fefefe;
  --dp-surface:#fefefe;
  --dp-creme:#f9f5f5;
  --dp-creme-hover:#fcfcfc;
  --dp-segment-bg:#f9f5f5;
  --dp-skeleton:#f0ebeb;
  --dp-creme-600:#f0ebeb;
  --dp-creme-700:#e8e2e2;
  --dp-text:#44403c;
  --dp-muted:#78716c;
  --dp-muted-strong:#57534e;
  --dp-subtle:#a8a29e;
  --dp-strong:#1c1917;
  --dp-heading:#2b2e50;
  --dp-border:#cccccc;
  --dp-divider:#e7e5e4;
  --dp-edge-dark:#000000;
  --dp-primary:#444876;
  --dp-primary-fill:#5a5e91;
  --dp-primary-active:#3d4069;
  --dp-primary-soft:#e8e9f4;
  --dp-primary-wash:#f6f6fb;
  --dp-secondary-edge:#d3b5b5;
  --dp-outline-edge:#78716c;
  --dp-radius:1.125rem;
  --dp-shadow-card:0 3px 0 var(--dp-border),0 0 9px rgba(68,64,60,.05);
  --dp-shadow-strong:0 3px 0 var(--dp-edge-dark);
  --dp-shadow-input:0 2px 0 var(--dp-border),0 5px 3px rgba(31,41,55,.04);
  --dp-focus-ring:0 0 0 .25rem rgba(68,72,118,.25);
  --dp-focus-border:#a2a4bb;
  /* Status tones (fill / pill background / pill text). */
  --dp-ok:#198754;--dp-ok-bg:#d1e7dd;--dp-ok-text:#0f5132;
  --dp-warn:#fd7e14;--dp-warn-bg:#fff3cd;--dp-warn-text:#664d03;
  --dp-bad:#dc3545;--dp-bad-bg:#f8d7da;--dp-bad-text:#842029;
  --dp-unknown:#78716c;--dp-unknown-bg:#f0ebeb;--dp-unknown-text:#57534e;
}
html.dark{
  --dp-bg:#1c1917;
  --dp-surface:#292524;
  --dp-creme:#1c1917;
  --dp-creme-hover:#221f1e;
  --dp-segment-bg:#292524;
  --dp-skeleton:#44403c;
  --dp-creme-600:#44403c;
  --dp-creme-700:#44403c;
  --dp-text:#e7e5e4;
  --dp-muted:#a8a29e;
  --dp-muted-strong:#d6d3d1;
  --dp-subtle:#78716c;
  --dp-strong:#fafaf9;
  --dp-heading:#e8e9f4;
  --dp-border:#44403c;
  --dp-divider:#44403c;
  --dp-edge-dark:#57534e;
  --dp-primary:#a0a4c5;
  --dp-primary-fill:#6b70a0;
  --dp-primary-active:#5a5e91;
  --dp-primary-soft:#2c2c3d;
  --dp-primary-wash:#222025;
  --dp-secondary-edge:#57534e;
  --dp-outline-edge:#78716c;
  --dp-shadow-card:0 3px 0 var(--dp-border);
  --dp-shadow-input:0 2px 0 var(--dp-border);
  --dp-focus-ring:0 0 0 .25rem rgba(107,112,160,.35);
  --dp-focus-border:#6b70a0;
  --dp-ok-bg:rgba(25,135,84,.2);--dp-ok-text:#75b798;
  --dp-warn-bg:rgba(253,126,20,.2);--dp-warn-text:#feb272;
  --dp-bad-bg:rgba(220,53,69,.2);--dp-bad-text:#ea868f;
  --dp-unknown-bg:#44403c;--dp-unknown-text:#d6d3d1;
  color-scheme:dark;
}
/* OneUptime's own theme tokens, so everything it paints with them stays warm.
   html:root (0,1,1) / html:root.dark (0,2,1) outrank its :root and html.dark;
   the --dp values switch with the theme, so one mapping serves both. */
html:root,html:root.dark{
  --ou-background-primary:var(--dp-bg);
  --ou-surface-primary:var(--dp-surface);
  --ou-surface-secondary:var(--dp-creme);
  --ou-surface-tertiary:var(--dp-creme-600);
  --ou-surface-quaternary:var(--dp-creme-700);
  --ou-border-subtle:var(--dp-divider);
  --ou-border-default:var(--dp-border);
  --ou-border-strong:var(--dp-subtle);
  --ou-text-primary:var(--dp-strong);
  --ou-text-secondary:var(--dp-text);
  --ou-text-muted:var(--dp-muted);
  --ou-text-subtle:var(--dp-subtle);
  --ou-chart-grid:var(--dp-divider);
  --ou-chart-tick:var(--dp-muted);
  --ou-chart-series-neutral:var(--dp-muted);
  --ou-chart-cursor:var(--dp-border);
  --ou-chart-track:var(--dp-creme-600);
  --ou-chart-marker-ring:var(--dp-surface);
  --ou-chart-focus-ring:var(--dp-primary);
  --ou-accent-soft:var(--dp-primary-wash);
  --ou-accent-muted:var(--dp-primary-soft);
  --ou-accent-text:var(--dp-heading);
  --ou-link:var(--dp-primary);
  --ou-danger-text:var(--dp-bad-text);
  --ou-success-text:var(--dp-ok-text);
  --ou-warning-text:var(--dp-warn-text);
  --ou-card-shadow:var(--dp-shadow-card);
  --ou-card-shadow-hover:var(--dp-shadow-card);
  --ou-shadow-sm:0 2px 0 var(--dp-border);
}

/* ---------- Base ---------- */
html,html:root body.bg-gray-50,html:root.dark body.h-full.bg-gray-50,html #root{background-color:var(--dp-bg)!important}
html.dark option,html.dark optgroup{background-color:var(--dp-surface)!important;color:var(--dp-text)!important}
html body{font-family:var(--dp-font);font-size:14px;line-height:1.25rem;color:var(--dp-text);-webkit-font-smoothing:antialiased}
#root,#root input,#root textarea,#root select,#root button{font-family:var(--dp-font)!important}
#root h1,#root h2,#root h3,#root h4{font-family:var(--dp-font-heading)!important;font-weight:500;color:var(--dp-heading)}
#root a{text-underline-offset:2px}
#root .text-gray-900,#root .text-gray-800{color:var(--dp-strong)!important}
#root .text-gray-700,#root .text-gray-600{color:var(--dp-text)!important}
#root .text-gray-500{color:var(--dp-muted)!important}
#root .text-gray-400{color:var(--dp-muted)!important}
#root .bg-white{background-color:var(--dp-surface)!important}
#root .border-gray-200,#root .border-gray-300{border-color:var(--dp-divider)!important}
#root :is(a,button,select,input,[tabindex]):focus-visible{outline:2px solid var(--dp-primary)!important;outline-offset:2px}
::selection{background:var(--dp-primary-soft);color:var(--dp-strong)}

/* Winged-icon pattern at the top right, as in the app's page header. */
#root > .min-h-screen{position:relative;isolation:isolate;overflow-x:clip}
#root > .min-h-screen::before{
  content:"";position:absolute;top:0;right:0;z-index:-1;width:37vw;height:34vh;min-height:240px;
  background:url('/dp-assets/header-pattern.webp?v=1') bottom left/cover no-repeat;opacity:.5;pointer-events:none;
  -webkit-mask:linear-gradient(18deg,transparent 0%,transparent 27%,rgba(0,0,0,.3) 70%,rgba(0,0,0,.6) 100%);
  mask:linear-gradient(18deg,transparent 0%,transparent 27%,rgba(0,0,0,.3) 70%,rgba(0,0,0,.6) 100%);
}
html.dark #root > .min-h-screen::before{filter:brightness(.45)}

/* ---------- Shell: header row with logo, nav and app link ---------- */
#root .max-w-5xl{max-width:64rem}
#root .max-w-5xl > .flex.grow.flex-col{position:relative}

/* ---------- Buttons ---------- */
.dp-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.4625rem 1rem;border:1px solid transparent;border-radius:1000px;font-size:.875rem;font-weight:450;line-height:1.25rem;text-decoration:none!important;white-space:nowrap;transition:background-color .15s,color .15s}
.dp-btn svg{flex:none}
.dp-btn--outline{color:var(--dp-strong);background:var(--dp-surface);border-color:var(--dp-outline-edge);box-shadow:0 2px 0 var(--dp-outline-edge)}
.dp-btn--outline:hover{background:var(--dp-creme)}
.dp-btn--outline:active{background:var(--dp-creme-600);transform:translateY(1px);box-shadow:0 1px 0 var(--dp-outline-edge)}

/* ---------- Hero (native headerHTML) ---------- */
.dp-hero{position:relative;padding-top:1.5rem}
.dp-hero__bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:2.75rem}
.dp-hero__logo{display:inline-flex;border-radius:.5rem}
.dp-hero__logo img{display:block;height:34px;width:auto}
.dp-hero__body{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:1.5rem 3rem;margin-top:3.25rem}
.dp-hero__title{margin:0 0 .75rem;font-family:var(--dp-font-heading)!important;font-size:2.2rem!important;font-weight:550!important;line-height:1.1!important;letter-spacing:0;color:var(--dp-heading)!important}
.dp-hero__subtitle{margin:0;color:var(--dp-muted);font-size:.9375rem;line-height:1.5rem}
.dp-hero__stats{display:flex;flex-direction:column;gap:.75rem;margin:0}
.dp-hero__stats[hidden]{display:none}
.dp-stat{display:flex;align-items:baseline;gap:.5rem}
.dp-stat dt{order:2;margin:0;color:var(--dp-muted);font-size:.9375rem;font-weight:400}
.dp-stat dd{order:1;margin:0;min-width:1.4ch;font-family:var(--dp-font-heading);font-size:2.2rem;font-weight:550;line-height:1.2;color:var(--dp-text);font-variant-numeric:tabular-nums}
.dp-hero__mascots{display:none;position:absolute;right:15rem;bottom:calc(-1.25rem - 1px);width:300px;height:auto;pointer-events:none;user-select:none}
html.dark .dp-hero__mascots{filter:brightness(0) invert(1) opacity(.25)}

/* ---------- Navigation as the app's segmented control ---------- */
#root .max-w-5xl > .flex.grow.flex-col > nav > div,
#root .max-w-5xl > .flex.grow.flex-col > .md\:hidden > nav > div{
  display:flex;gap:.25rem;margin-top:1.75rem;padding:.3rem;width:max-content;max-width:100%;
  background:var(--dp-segment-bg)!important;border:0;border-radius:1000px;box-shadow:none!important;text-align:left;
}
@media (max-width:767px){#root .max-w-5xl > .flex.grow.flex-col > nav > div{display:none!important}}
#root [id$="-nav-bar-item"]{
  gap:.375rem;padding:.375rem .9rem;border:1px solid transparent;border-radius:1000px;
  color:var(--dp-muted-strong)!important;font-size:.875rem;font-weight:450;line-height:1.25rem;background:transparent!important;
  transition:color .15s,background-color .15s;
}
#root [id$="-nav-bar-item"] svg{margin-right:0;width:1rem;height:1rem;stroke-width:1.75}
#root [id$="-nav-bar-item"]:hover{color:var(--dp-primary)!important}
#root [id$="-nav-bar-item"].bg-gray-100,
#root #mobile-active-nav-bar-item{
  color:var(--dp-heading)!important;background:var(--dp-surface)!important;
  border-color:var(--dp-creme-700);box-shadow:0 2px 0 var(--dp-creme-700);
}
#root .max-w-5xl > .flex.grow.flex-col > .md\:hidden > nav > div{width:100%;justify-content:space-between;align-items:center}
#root .max-w-5xl > .flex.grow.flex-col > .md\:hidden > nav > div > div{gap:.5rem}
#root .max-w-5xl > .flex.grow.flex-col > .md\:hidden > nav button{border:0;border-radius:1000px;color:var(--dp-text)}
/* Wide screens: the nav moves into the header row, between logo and app link. */
@media (min-width:1080px){
  #root .max-w-5xl > .flex.grow.flex-col > nav{position:absolute;top:1.5rem;left:50%;transform:translateX(-50%);z-index:2}
  #root .max-w-5xl > .flex.grow.flex-col > nav > div{margin-top:0}
  #root:has(#overview-nav-bar-item.bg-gray-100) .dp-hero__body{min-height:9.5rem;padding-bottom:1.5rem}
  #root:has(#overview-nav-bar-item.bg-gray-100):has(main :is(#overview-alert,.animate-pulse.h-20)) .dp-hero__mascots{display:block}
}

/* ---------- Overall status: a light card in the "Schnellaktionen" style ---------- */
#root #overview-alert{
  --dp-tone:var(--dp-primary);--dp-tone-bg:var(--dp-primary-soft);
  padding:1rem 1.25rem;background:var(--dp-surface)!important;color:var(--dp-text)!important;
  border:1px solid var(--dp-border)!important;border-radius:var(--dp-radius);box-shadow:var(--dp-shadow-card);
}
#root #overview-alert .alert-content{align-items:center;gap:.875rem}
#root #overview-alert .alert-content::before{
  content:"";flex:none;width:2.25rem;height:2.25rem;border-radius:1000px;
  background:radial-gradient(circle,var(--dp-tone) 0 .3125rem,transparent .34rem),var(--dp-tone-bg);
}
#root #overview-alert :is(.alert-text,.alert-message){
  color:var(--dp-heading)!important;font-family:var(--dp-font-heading);font-size:1.1rem;font-weight:500;line-height:1.5rem;letter-spacing:-.2px;
}
#root #overview-alert:is([style*="25, 135, 84"],[style*="42, 181, 125"]){--dp-tone:var(--dp-ok);--dp-tone-bg:var(--dp-ok-bg)}
#root #overview-alert:is([style*="253, 126, 20"],[style*="255, 191, 83"]){--dp-tone:var(--dp-warn);--dp-tone-bg:var(--dp-warn-bg)}
#root #overview-alert:is([style*="220, 53, 69"],[style*="253, 98, 94"]){--dp-tone:var(--dp-bad);--dp-tone-bg:var(--dp-bad-bg)}
#root #overview-alert[style*="120, 113, 108"]{--dp-tone:var(--dp-unknown);--dp-tone-bg:var(--dp-unknown-bg)}

/* Refresh row and search */
#root main .bg-emerald-500{background-color:var(--dp-ok)!important}
#root main .flex-wrap.justify-between > button{
  gap:.375rem;padding:.25rem .75rem;border:1px solid var(--dp-secondary-edge);border-radius:1000px;
  background:var(--dp-creme)!important;color:var(--dp-text)!important;box-shadow:0 2px 0 var(--dp-secondary-edge);font-weight:450;
}
#root main .flex-wrap.justify-between > button:hover{background:var(--dp-creme-hover)!important}
#root [role=search]{margin-top:1rem}
#root [role=search] input{
  min-height:2.375rem;padding-top:.4625rem;padding-bottom:.4625rem;background:var(--dp-surface)!important;color:var(--dp-text)!important;
  border:1px solid var(--dp-border)!important;border-radius:var(--dp-radius);box-shadow:var(--dp-shadow-input)!important;font-size:.875rem;
}
#root [role=search] input::placeholder{color:var(--dp-muted)}
#root [role=search] input:focus{border-color:var(--dp-focus-border)!important;box-shadow:var(--dp-focus-ring),0 2px 0 var(--dp-border)!important;outline:none!important}

/* ---------- Service groups as the dashboard's strong tiles ---------- */
#root main .bg-white.rounded-xl.shadow{
  padding:1.125rem 1.5rem 1.25rem;background:var(--dp-surface)!important;
  border:1px solid var(--dp-edge-dark)!important;border-radius:var(--dp-radius);box-shadow:var(--dp-shadow-strong)!important;
}
#root main [class~="sm:space-y-5"]{margin-top:1.5rem}
#root main [class~="sm:space-y-5"] > :not([hidden]) ~ :not([hidden]){margin-top:1.25rem}
#root [data-testid=status-page-group-header]{border-radius:.75rem}
#root [data-testid=status-page-group-header]:hover{background:var(--dp-creme)!important}
#root [data-testid=status-page-group-chevron]{width:2rem;height:2rem;border-radius:1000px;background:var(--dp-primary-soft)!important;color:var(--dp-primary)!important}
#root [data-testid=status-page-group-header] .font-semibold.truncate{
  font-family:var(--dp-font-heading);font-size:1.1rem!important;font-weight:500;letter-spacing:-.2px;line-height:1.5rem;color:var(--dp-heading)!important;
}
#root [data-testid=status-page-group-rollup-dot]{display:none}

/* Status labels become the app's light status badges. */
#root [data-ou-status-text]:not([data-tippy-root] *){
  display:inline-block;padding:.125rem .6rem;border-radius:1000px;font-size:.75rem!important;font-weight:500!important;line-height:1.25rem;
  background:var(--dp-unknown-bg);color:var(--dp-unknown-text)!important;
}
#root [data-ou-status-text]:not([data-tippy-root] *):is([style*="25, 135, 84"],[style*="42, 181, 125"]){background:var(--dp-ok-bg);color:var(--dp-ok-text)!important}
#root [data-ou-status-text]:not([data-tippy-root] *):is([style*="253, 126, 20"],[style*="255, 191, 83"]){background:var(--dp-warn-bg);color:var(--dp-warn-text)!important}
#root [data-ou-status-text]:not([data-tippy-root] *):is([style*="220, 53, 69"],[style*="253, 98, 94"],[style*="183, 4, 0"]){background:var(--dp-bad-bg);color:var(--dp-bad-text)!important}

/* Resource rows and the 30-day history */
#root [id^="status-page-group-body"] .text-base.font-medium{font-size:.9375rem;font-weight:500;color:var(--dp-strong)}
#root [data-testid=day-uptime-graph]{gap:3px}
#root [data-testid=day-uptime-graph] > :not([hidden]) ~ :not([hidden]){margin-left:0!important}
#root [data-testid=uptime-bar]{height:2rem;border-radius:4px;box-shadow:inset 0 -2px 0 rgba(0,0,0,.14)}
#root [id^="status-page-group-body"] .text-\[11px\]{margin-top:1rem;padding-top:.75rem;border-top:1px solid var(--dp-divider);font-size:.75rem;color:var(--dp-muted)!important}

/* ---------- Sub pages (incidents, announcements, scheduled events) ---------- */
/* The hero greeting belongs to the overview; sub pages lead with their own title. */
#root:not(:has(#overview-nav-bar-item.bg-gray-100)) .dp-hero__body{display:none}
#root:not(:has(#overview-nav-bar-item.bg-gray-100)) .dp-hero{margin-bottom:1.75rem}
#root main h1.text-xl{
  font-family:var(--dp-font-heading)!important;font-size:2.2rem!important;font-weight:550!important;line-height:1.15!important;
  letter-spacing:0!important;color:var(--dp-heading)!important;
}
#root main nav[aria-label=Breadcrumb] ~ *,#root main nav[aria-label=Breadcrumb]{font-size:.8125rem}
#root main .breadcrumb-item span{font-size:.8125rem;font-weight:450}
/* Empty states: the app's illustration, muted Jost title, in its own card. */
#root [id$="-empty-state"]{
  margin-top:.5rem;padding:2.5rem 1rem 3rem!important;background:var(--dp-surface);
  border:1px solid var(--dp-border);border-radius:var(--dp-radius);box-shadow:var(--dp-shadow-card);
}
#root [id$="-empty-state"] > div > div:first-child{
  width:11.25rem;max-width:60%;aspect-ratio:419/277;margin:0 auto 1.25rem;
  background:url('/dp-assets/empty-state.svg?v=1') center/contain no-repeat;
}
#root [id$="-empty-state"] > div > div:first-child svg{display:none}
#root [id$="-empty-state"] h3{margin:0;font-family:var(--dp-font-heading)!important;font-size:1.25rem!important;font-weight:500!important;color:var(--dp-muted)!important}
#root [id$="-empty-state"] p{max-width:28rem;margin-top:.375rem;font-size:.875rem;color:var(--dp-muted)!important}
html.dark #root [id$="-empty-state"] > div > div:first-child{filter:brightness(0) invert(1) opacity(.25)}
#root main nav[aria-label] a,#root main nav[aria-label] span{color:var(--dp-muted)}
#root main nav[aria-label] a:hover{color:var(--dp-primary)}
#root main :is(.shadow,.rounded-lg.border,.rounded-xl.border):not(.bg-white.rounded-xl.shadow,input){
  border-color:var(--dp-border)!important;border-radius:var(--dp-radius);box-shadow:var(--dp-shadow-card)!important;
}

/* ---------- Error notices ----------
 * dp-status.js swaps OneUptime's raw API errors for a short notice and marks
 * it [data-dp-message]; it gets the empty-state look. Without the master page
 * (html.dp-degraded) only the logo and the notice remain.
 */
#root main [data-dp-message]{
  margin:.5rem 0 0!important;padding:2.5rem 1.5rem 3rem;background:var(--dp-surface);border:1px solid var(--dp-border);
  border-radius:var(--dp-radius);box-shadow:var(--dp-shadow-card);font-size:.9375rem!important;line-height:1.5rem;color:var(--dp-muted)!important;
}
#root main [data-dp-message]::before,html.dp-degraded #root main::after{
  content:"";display:block;width:11.25rem;max-width:60%;aspect-ratio:419/277;margin:0 auto 1.25rem;
  background:url('/dp-assets/empty-state.svg?v=1') center/contain no-repeat;
}
html.dark #root main [data-dp-message]::before,html.dark.dp-degraded #root main::after{filter:brightness(0) invert(1) opacity(.25)}
#root #logout-nav-bar-item{display:none!important}
html.dp-degraded #root nav,html.dp-degraded #root main > *,
html.dp-degraded #root [data-testid=status-page-footer-visitor-controls]{display:none!important}
html.dp-degraded #root .max-w-5xl::before{
  content:"";display:block;flex:none;width:148px;height:34px;margin-top:1.5rem;
  background:url('/dp-assets/logo.svg?v=5764a8d94d71') left center/contain no-repeat;
}
html.dark.dp-degraded #root .max-w-5xl::before{filter:brightness(0) invert(1)}
html.dp-degraded #root main{
  display:flex;flex-direction:column-reverse;margin-top:3rem;align-self:stretch;padding:2.5rem 1.5rem 3rem;text-align:center;
  background:var(--dp-surface);border:1px solid var(--dp-border);border-radius:var(--dp-radius);box-shadow:var(--dp-shadow-card);
  flex-grow:0;color:var(--dp-muted);font-size:.9375rem;line-height:1.5rem;
}
html.dp-degraded #root main::before{content:"Der Status konnte gerade nicht geladen werden. Bitte versuchen Sie es in einem Moment erneut."}
html.dp-degraded[data-dp-lang=en] #root main::before{content:"The status could not be loaded just now. Please try again in a moment."}

/* ---------- Events: incidents, announcements, scheduled maintenance ---------- */
/* The standard light card; the strong black edge stays with the service groups. */
#root main .bg-white.rounded-xl.shadow:has([class*="active-event-box"]){
  border-color:var(--dp-border)!important;box-shadow:var(--dp-shadow-card)!important;
}
/* Neutral fills and lines OneUptime keeps in Tailwind grey (timeline icons, code, connectors). */
#root .bg-gray-100{background-color:var(--dp-creme-600)!important}
#root .bg-gray-200{background-color:var(--dp-divider)!important}
#root .ring-8.ring-white{--tw-ring-color:var(--dp-surface)!important;box-shadow:0 0 0 8px var(--dp-surface)!important}
#root a.text-blue-600{color:var(--dp-primary)!important;text-decoration-color:currentColor}
#root a.text-blue-600:hover{color:var(--dp-heading)!important}
#root main code{color:var(--dp-strong)!important;border-radius:.375rem}
#root main blockquote{color:var(--dp-text)!important;border-color:var(--dp-border)!important}
/* Pills: event type dots on the dp palette, rings on the dp border. */
#root [data-testid=pill]{--tw-ring-color:var(--dp-border)!important;--tw-ring-offset-color:var(--dp-surface)!important}
#root [data-testid=pill-dot][style*="59, 130, 246"]{background-color:var(--dp-primary-fill)!important}
#root [data-testid=pill-dot][style*="253, 98, 94"]{background-color:var(--dp-bad)!important}
#root [data-testid=pill-dot][style*="255, 191, 83"]{background-color:var(--dp-warn)!important}
/* Affected resources: the neutral status badge. */
#root [class*="reesources"] [data-testid=pill]{
  background-color:var(--dp-unknown-bg)!important;color:var(--dp-unknown-text)!important;--tw-ring-color:transparent!important;
}
#root [class*="reesources"] [data-testid=pill-dot]{background-color:var(--dp-unknown)!important}
/* Days without data: warm stone with the same stripes instead of slate. */
#root [data-testid=uptime-bar]:is(.uptime-bar-no-data,[style*="156, 163, 175"]){
  background-color:#d6d3d1!important;
  background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.55) 0,rgba(255,255,255,.55) 2px,transparent 2px,transparent 5px)!important;
}
html.dark #root [data-testid=uptime-bar]:is(.uptime-bar-no-data,[style*="156, 163, 175"]){
  background-color:#57534e!important;
  background-image:repeating-linear-gradient(135deg,rgba(28,25,23,.45) 0,rgba(28,25,23,.45) 2px,transparent 2px,transparent 5px)!important;
}

/* ---------- Loading states ----------
 * This file is also linked in the page <head> (config/dp-inject.conf), so it
 * styles OneUptime's loading skeletons before customCSS arrives with the
 * master-page response. The selectors follow OneUptime's skeleton markup.
 */
/* Phase A, before the master page: only our logo, where the header puts it. */
#root .min-h-screen:has(> .max-w-5xl > .mt-8.grow.space-y-5) *{visibility:hidden}
#root .max-w-5xl:has(> .mt-8.grow.space-y-5) > .mt-5.flex.h-12{margin-top:1.5rem;height:2.75rem}
#root .max-w-5xl:has(> .mt-8.grow.space-y-5) > .mt-5.flex.h-12 > .animate-pulse:first-child{
  visibility:visible;width:148px;height:34px;border-radius:0;animation:none;
  background:url('/dp-assets/logo.svg?v=5764a8d94d71') left center/contain no-repeat!important;
}
html.dark #root .max-w-5xl:has(> .mt-8.grow.space-y-5) > .mt-5.flex.h-12 > .animate-pulse:first-child{filter:brightness(0) invert(1)}
@media (max-width:639px){
  #root .max-w-5xl:has(> .mt-8.grow.space-y-5) > .mt-5.flex.h-12{margin-top:1rem}
  #root .max-w-5xl:has(> .mt-8.grow.space-y-5) > .mt-5.flex.h-12 > .animate-pulse:first-child{width:122px;height:28px}
}
/* Phase B, header shown, data pending: the skeleton in dp tones and shapes. */
html #root main .animate-pulse{background-color:var(--dp-skeleton)!important}
html #root main .animate-pulse.h-20.rounded-xl{
  height:4.375rem;animation:none;border:1px solid var(--dp-border);border-radius:var(--dp-radius);box-shadow:var(--dp-shadow-card);
  background:radial-gradient(circle at 2.4375rem 50%,var(--dp-skeleton) 1.125rem,transparent 1.15rem),
    linear-gradient(var(--dp-skeleton),var(--dp-skeleton)) 4.4375rem 50%/14rem .875rem no-repeat,var(--dp-surface)!important;
}
#root main .rounded-xl.border.bg-white.shadow-sm:has(.animate-pulse){
  padding:.375rem 1.5rem;border-color:var(--dp-edge-dark)!important;border-radius:var(--dp-radius);box-shadow:var(--dp-shadow-strong)!important;
}
#root main .rounded-xl.border.bg-white.shadow-sm:has(.animate-pulse) *{border-color:var(--dp-divider)!important}
#root main .animate-pulse.h-8.flex-1{height:2rem;border-radius:4px}
#root main .items-end:has(> .animate-pulse.h-8){gap:3px}

/* ---------- Hover cards (tippy, e.g. a day of the uptime history) ----------
 * OneUptime writes the card with inline styles and var(--ou-*) fallbacks, so
 * the tokens are re-pointed locally and the rest needs !important.
 */
html body [data-tippy-root] .tippy-box{
  --ou-text-primary:var(--dp-heading);--ou-text-secondary:var(--dp-text);--ou-text-muted:var(--dp-muted);
  --ou-border-subtle:var(--dp-divider);--ou-border-default:var(--dp-creme-600);--ou-surface-tertiary:var(--dp-creme-600);
  background:var(--dp-surface)!important;color:var(--dp-text)!important;
  border:1px solid var(--dp-border)!important;border-radius:var(--dp-radius)!important;
  box-shadow:0 .5rem 1rem rgba(28,25,23,.08),0 3px 0 var(--dp-border)!important;
}
html.dark body [data-tippy-root] .tippy-box{box-shadow:0 .5rem 1rem rgba(0,0,0,.35),0 3px 0 var(--dp-border)!important}
html body [data-tippy-root] .tippy-content{padding:.875rem 1rem!important}
html body [data-tippy-root] .tippy-content *{font-family:var(--dp-font)!important}
/* Arrow: border colour outside, surface inside (tippy's light-border theme). */
html body [data-tippy-root] .tippy-box > .tippy-arrow{color:var(--dp-surface)!important}
html body [data-tippy-root] .tippy-box[data-placement^=top] > .tippy-arrow::before{border-top-color:var(--dp-surface)!important}
html body [data-tippy-root] .tippy-box[data-placement^=top] > .tippy-arrow::after{border-top-color:var(--dp-border)!important}
html body [data-tippy-root] .tippy-box[data-placement^=bottom] > .tippy-arrow::before{border-bottom-color:var(--dp-surface)!important}
html body [data-tippy-root] .tippy-box[data-placement^=bottom] > .tippy-arrow::after{border-bottom-color:var(--dp-border)!important}
/* Date heading */
html body [data-tippy-root] .tippy-content > div > div > div:first-child{gap:.5rem!important;padding-bottom:.625rem!important;margin-bottom:.75rem!important}
html body [data-tippy-root] .tippy-content > div > div > div:first-child > svg{color:var(--dp-muted)!important;stroke:currentColor}
html body [data-tippy-root] .tippy-content > div > div > div:first-child > span{
  font-family:var(--dp-font-heading)!important;font-size:1rem!important;font-weight:500!important;letter-spacing:0!important;color:var(--dp-heading)!important;
}
/* "Verfügbarkeit" eyebrow, value and duration labels */
html body [data-tippy-root] span[style*="font-size: 11px"][style*="font-weight: 500"]{
  font-size:.75rem!important;font-weight:450!important;text-transform:uppercase;letter-spacing:.04em;color:var(--dp-muted)!important;
}
html body [data-tippy-root] [data-ou-status-text]{color:var(--dp-strong)!important;background:none!important}
html body [data-tippy-root] [data-ou-status-text][style*="font-size: 14px"]{font-family:var(--dp-font-heading)!important;font-size:1.25rem!important;font-weight:550!important;letter-spacing:0!important}
html body [data-tippy-root] [data-ou-status-text][style*="font-size: 11px"]{font-size:.8125rem!important;font-weight:450!important;opacity:1!important;color:var(--dp-muted)!important;margin-left:2px!important}
html body [data-tippy-root] span[style*="font-size: 12px"]{font-size:.8125rem!important;font-weight:450!important;color:var(--dp-text)!important}
html body [data-tippy-root] span[style*="font-size: 11px"][style*="font-weight: 400"]{font-size:.75rem!important;color:var(--dp-muted)!important}
/* Bars: OneUptime's fixed uptime colours (>=99.9 / >=99 / below) to dp tones. */
html body [data-tippy-root] div[style*="height: 4px"]{height:6px!important}
html body [data-tippy-root] [style*="background-color: rgb(5, 150, 105)"]{background-color:var(--dp-ok)!important}
html body [data-tippy-root] [style*="background-color: rgb(217, 119, 6)"]{background-color:var(--dp-warn)!important}
html body [data-tippy-root] [style*="background-color: rgb(220, 38, 38)"]{background-color:var(--dp-bad)!important}
html body [data-tippy-root] div[style*="opacity: 0.7"]{opacity:1!important}

/* ---------- Native buttons, dialogs and inputs ---------- */
html body :is(button,a).rounded-md.border.border-gray-300.bg-white{
  gap:.375rem;padding:.4625rem 1rem;border-radius:1000px;border-color:var(--dp-outline-edge)!important;
  background:var(--dp-surface)!important;color:var(--dp-strong)!important;box-shadow:0 2px 0 var(--dp-outline-edge)!important;
  font-size:.875rem;font-weight:450;line-height:1.25rem;
}
html body :is(button,a).rounded-md.border.border-gray-300.bg-white:hover{background:var(--dp-creme)!important}
html body :is(button,a).rounded-md.border.border-gray-300.bg-white svg{margin-right:.25rem}
html body :is(button,a):is(.bg-indigo-600,.bg-indigo-500){
  border:1px solid var(--dp-primary)!important;border-radius:1000px;background:var(--dp-primary-fill)!important;
  color:#fefefe!important;box-shadow:0 3px 0 var(--dp-primary)!important;font-weight:450;
}
html body :is(button,a):is(.bg-indigo-600,.bg-indigo-500):hover{background:var(--dp-primary)!important}
html body [data-testid=modal]{
  border:1px solid var(--dp-edge-dark)!important;border-radius:1.5rem;background:var(--dp-surface)!important;
  box-shadow:0 3px 0 var(--dp-edge-dark)!important;overflow:hidden;
}
html body [data-testid=modal] > *{background:transparent!important;border-color:transparent!important}
html body :is([class~="bg-gray-500/75"],[class~="bg-gray-500/50"],[class~="bg-black/50"],[class~="bg-gray-900/50"]){background-color:rgba(28,25,23,.45)!important}
html body [data-testid=modal-title]{font-family:var(--dp-font-heading)!important;font-size:1.1rem!important;font-weight:500!important;color:var(--dp-heading)!important}
html body [data-testid=modal] h3:not([data-testid]){font-family:var(--dp-font-heading)!important;font-weight:500!important;font-size:1rem!important;color:var(--dp-heading)!important}
html body [data-testid=modal] a.rounded-lg.border{
  border-radius:var(--dp-radius);border-color:var(--dp-border)!important;background:var(--dp-surface)!important;box-shadow:var(--dp-shadow-input)!important;
}
html body [data-testid=modal] a.rounded-lg.border:hover{border-color:#6b70a0!important;background:var(--dp-primary-wash)!important}
html body :is(.bg-indigo-50){background-color:var(--dp-primary-soft)!important;border-radius:1000px}
html body :is(.text-indigo-600,.text-indigo-500){color:var(--dp-primary)!important}
html body [data-testid=modal] input[type=text],html body [data-testid=modal] input:not([type]){
  border:1px solid var(--dp-border)!important;border-radius:var(--dp-radius)!important;background:var(--dp-surface)!important;
  color:var(--dp-text)!important;box-shadow:var(--dp-shadow-input)!important;
}

/* ---------- Footer (native footer + footerHTML) ---------- */
#root footer{margin-top:3.5rem;border-top:1px solid var(--dp-divider)!important}
#root footer > div{gap:1rem;padding:1.25rem 0 1.75rem}
#root footer a{color:var(--dp-muted)!important}
#root footer a:hover{color:var(--dp-primary)!important}
#root [data-testid=status-page-footer-visitor-controls]{gap:.5rem}
/* appearance:none so Safari draws the same pill, with our own chevron. */
#root #status-page-language-switcher{
  -webkit-appearance:none;appearance:none;height:2rem;padding:0 2rem 0 .875rem;line-height:1.875rem;
  border:1px solid var(--dp-border);border-radius:1000px;box-shadow:0 2px 0 var(--dp-border);color:var(--dp-text)!important;font-weight:450;
  background:var(--dp-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2378716c' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E") right .625rem center/.875rem no-repeat;
}
html.dark #root #status-page-language-switcher{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23a8a29e' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
}
#root [data-testid=status-page-theme-switch]{
  width:2rem;height:2rem;margin:0;border:1px solid var(--dp-border);border-radius:1000px;background:var(--dp-surface);
  box-shadow:0 2px 0 var(--dp-border);color:var(--dp-text)!important;
}
#root [data-testid=status-page-theme-switch]:hover{background:var(--dp-creme)!important}
/* Logo at the start of the native footer, like the foot of the app sidebar. */
#root footer > div::before{
  content:"";display:block;flex:none;width:118px;height:28px;margin:0 auto 1rem;
  background:url('/dp-assets/logo.svg?v=5764a8d94d71') left center/contain no-repeat;
}
@media (min-width:768px){#root footer > div::before{margin:0}}
#root footer a{font-size:.8125rem;font-weight:400;border-radius:.5rem}
/* The API forces hidePoweredByOneUptimeBranding to false in this edition;
   the Apache-2.0 licence (LICENSE.oneuptime, NOTICE.oneuptime) needs no UI credit. */
#root footer a[href^="https://oneuptime.com"]{display:none!important}
#root footer > div > div:first-child{gap:.75rem 1.5rem}
html.dark .dp-hero__logo img,html.dark #root footer > div::before{filter:brightness(0) invert(1)}

/* ---------- Mobile menu dropdown (below md) ---------- */
#root .md\:hidden > .absolute nav > div{
  display:block;margin-top:.375rem;padding:.375rem!important;background:var(--dp-surface)!important;
  border:1px solid var(--dp-edge-dark)!important;border-radius:var(--dp-radius);box-shadow:var(--dp-shadow-strong)!important;
}
#root .md\:hidden > .absolute nav > div > .block + .block{margin-top:.125rem}
#root .md\:hidden > .absolute [id$="-nav-bar-item"]{
  display:flex;width:100%;padding:.625rem .875rem;border:0;border-radius:.75rem;box-shadow:none;font-size:.9375rem;
}
#root .md\:hidden > .absolute [id$="-nav-bar-item"]:hover{background:var(--dp-creme)!important}
#root .md\:hidden > .absolute [id$="-nav-bar-item"].bg-gray-100{background:var(--dp-primary-wash)!important;color:var(--dp-primary)!important;box-shadow:none}

/* ---------- Skip link ---------- */
#root a[href="#main-content"]:focus{
  z-index:50;padding:.4625rem 1rem;border:1px solid var(--dp-primary-active);border-radius:1000px;
  background:var(--dp-primary-fill)!important;color:#fefefe!important;box-shadow:0 3px 0 var(--dp-primary-active);
  font-size:.875rem;font-weight:450;
}

/* ---------- Print: light tokens, history bars kept, decoration dropped ---------- */
@media print{
  html.dark{
    --dp-bg:#fefefe;--dp-surface:#fefefe;--dp-creme:#f9f5f5;--dp-creme-600:#f0ebeb;--dp-creme-700:#e8e2e2;
    --dp-text:#44403c;--dp-muted:#78716c;--dp-muted-strong:#57534e;--dp-strong:#1c1917;--dp-heading:#2b2e50;
    --dp-border:#cccccc;--dp-divider:#e7e5e4;--dp-edge-dark:#000000;--dp-primary:#444876;--dp-primary-soft:#e8e9f4;
    --dp-skeleton:#f0ebeb;--dp-unknown-bg:#f0ebeb;--dp-unknown-text:#57534e;
    --dp-ok-bg:#d1e7dd;--dp-ok-text:#0f5132;--dp-warn-bg:#fff3cd;--dp-warn-text:#664d03;--dp-bad-bg:#f8d7da;--dp-bad-text:#842029;
    color-scheme:light;
  }
  html.dark #root{color:var(--dp-text)!important}
  html.dark .dp-hero__logo img,html.dark #root footer > div::before{filter:none}
  #root *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  #root > .min-h-screen::before,.dp-hero__mascots,.dp-hero__bar .dp-btn,
  #root .max-w-5xl > .flex.grow.flex-col > nav,#root .md\:hidden,
  #root [role=search],#root main .flex-wrap.justify-between > button,
  #root [data-testid=status-page-footer-visitor-controls]{display:none!important}
  #root main .bg-white.rounded-xl.shadow,#root #overview-alert{break-inside:avoid}
}

/* ---------- Small screens ---------- */
@media (max-width:639px){
  .dp-hero{padding-top:1rem}
  .dp-hero__logo img{height:28px}
  .dp-hero__bar .dp-btn{padding:.375rem .8rem}
  .dp-hero__body{grid-template-columns:1fr;margin-top:2rem;gap:1.25rem}
  .dp-hero__title{font-size:1.75rem!important}
  .dp-hero__stats{flex-direction:row;flex-wrap:wrap;gap:.5rem 1.25rem}
  .dp-stat dd{font-size:1.5rem}
  .dp-stat dt{font-size:.8125rem}
  #root > .min-h-screen::before{width:70vw;height:22vh;min-height:0}
  #root main .bg-white.rounded-xl.shadow{padding:1rem}
  #root [id^="status-page-group-body"] .flex.flex-col[class~="sm:flex-row"]{flex-direction:row;justify-content:space-between;align-items:center;gap:.75rem}
  #root [id^="status-page-group-body"] .flex.flex-col[class~="sm:flex-row"] > .mb-2{margin-bottom:0}
  #root [data-testid=uptime-bar]{height:1.75rem;border-radius:3px}
  #root [data-testid=day-uptime-graph]{gap:2px}
}
/* Below the wide header the nav follows the hero; on sub pages no extra gap. */
@media (max-width:1079px){#root:not(:has(#overview-nav-bar-item.bg-gray-100)) .dp-hero{margin-bottom:0}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}