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

/* ── Hide native Service Under Maintenance / major outage banner ── */
.page-status.status-maintenance { display: none !important; }
.page-status.status-major { display: none !important; }

/* ── Hide uptime bars ── */
.component-uptime-container, .uptime-container,
[class*="uptime"], .status-bar-tooltip-hover-area,
.graph-section, [class*="graph-wrap"] { display: none !important; }

/* ══════════════════════════════════════════════
   DO NOT hide .incidents-list or .scheduled-maintenances-container
   via CSS — the cloned elements inherit those rules and can't be
   overridden. JS hides the originals AFTER cloning them instead.
   ══════════════════════════════════════════════ */

/* Hide native unresolved incident card — CSS !important beats React inline resets */
.unresolved-incidents { display: none !important; }
/* Hide only past maintenance container */
.past-maintenances-container { display: none !important; }

/* ── Hide Uptime tab on history page ── */
.layout-content.status-full-history .tabset li:last-child { display: none !important; }
.layout-content.status-full-history .tabset li:nth-child(2) { display: none !important; }
a.button.border-color[href*="uptime"] { display: none !important; }
a.button.border-color[href*="uptime"] + li,
li:has(a[href*="uptime"]) { display: none !important; }

/* ── Page background — light theme (header stays dark) ── */
body, html { background-color: #F2F2F0 !important; background: #F2F2F0 !important; }
.layout-content, .layout-content-wrapper,
.components-container, .incidents-container {
    background-color: #F2F2F0 !important;
}

/* ── Global text — dark on light ── */
body, html, .container, .page, main, section,
p, span, div, li, td, th, label,
h1, h2, h3, h4, h5, h6 {
    color: #1A1A2E !important;
    font-family: 'Inter', sans-serif !important;
}

/* ── Keep header bar text white ── */
.header-links a, .header-links span, .header-links div,
#replace-with-subscribe, #replace-with-subscribe *,
.show-updates-dropdown,
.logo, .logo * { color: #FEFEFE !important; }

/* ── Incident title text ── */
.incident-title,
.incident-title a,
.incident-title span,
.incident-container .incident-title a,
.incident-container .incident-title.impact-none a,
.incident-container .incident-title.impact-maintenance a,
.incident-container .incident-title.impact-minor a,
.incident-container .incident-title.impact-major a,
.font-largest,
.font-largest a {
    color: #1A1A2E !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
}

/* ── Header nav links ── */
.header-links .separator {
    height: 18px; width: 1px;
    background-color: rgba(255,255,255,0.2);
    display: inline-block;
}
div.header-links a,
div.header-links a:link,
div.header-links a:visited,
div.header-links a:hover,
div.header-links a:active,
div.header-links a:focus {
    color: #FEFEFE !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    text-decoration: none !important;
}

/* ── Subscribe button ── */
#replace-with-subscribe { display: block !important; background: transparent !important; }
#replace-with-subscribe .show-updates-dropdown,
.layout-content.status .show-updates-dropdown,
.btn-secondary, .btn-default {
    background: transparent !important;
    background-color: transparent !important;
    color: #FEFEFE !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
}
#replace-with-subscribe .show-updates-dropdown:hover { color: rgba(254,254,254,0.75) !important; }
#replace-with-subscribe .show-updates-dropdown::after { display: none !important; }

/* ── Subscribe dropdown ── */
.updates-dropdown {
    min-width: 320px !important; width: 320px !important;
    background-color: #00094B !important; border: 1px solid #267D97 !important;
    border-radius: 8px !important; overflow: hidden !important;
    box-shadow: 0px 16px 48px rgba(0,0,0,0.8) !important;
    font-family: 'Inter', sans-serif !important; color: #FEFEFE !important;
    z-index: 9999999 !important;
}
.updates-dropdown * { font-family: 'Inter', sans-serif !important; color: #FEFEFE !important; box-sizing: border-box !important; }
.updates-dropdown-nav, .updates-dropdown .nav {
    display: flex !important; align-items: center !important;
    background-color: #000940 !important; padding: 8px 12px !important;
    gap: 8px !important; width: 100% !important;
    border-bottom: 1px solid #267D97 !important; margin: 0 !important; list-style: none !important;
}
.updates-dropdown-nav a, .updates-dropdown-nav li, .updates-dropdown-nav li a {
    display: inline-flex !important; align-items: center !important;
    padding: 6px 10px !important; background-color: transparent !important;
    border-radius: 4px !important; color: #FEFEFE !important;
    font-size: 13px !important; border: none !important; text-decoration: none !important;
}
.updates-dropdown-nav a:hover, .updates-dropdown-nav li a:hover { background-color: rgba(255,255,255,0.15) !important; }
.updates-dropdown .close, .updates-dropdown button.close {
    background-color: #FEFEFE !important; color: #00094B !important;
    border: none !important; border-radius: 4px !important;
    font-weight: 700 !important; padding: 2px 8px !important;
    cursor: pointer !important; opacity: 1 !important; margin-left: auto !important;
}
.updates-dropdown-section { background-color: #00094B !important; padding: 20px !important; }
.updates-dropdown-section p, .updates-dropdown-section span,
.updates-dropdown-section label, .updates-dropdown-section div {
    color: #FEFEFE !important; background-color: transparent !important;
    font-size: 14px !important; line-height: 1.6 !important;
}
.updates-dropdown-section input[type="text"],
.updates-dropdown-section input[type="email"],
.updates-dropdown-section input[type="tel"],
.updates-dropdown-section select {
    background-color: #000940 !important; border: 1px solid #267D97 !important;
    color: #FEFEFE !important; font-size: 13px !important;
    border-radius: 4px !important; padding: 10px 12px !important;
    width: 100% !important; margin-top: 6px !important;
}
.updates-dropdown-section input[type="submit"],
.updates-dropdown-section button[type="submit"] {
    background-color: #267D97 !important; border: 1px solid #267D97 !important;
    color: #FFFFFF !important; font-weight: 700 !important;
    border-radius: 4px !important; padding: 12px 16px !important;
    cursor: pointer !important; margin-top: 12px !important;
    width: 100% !important; text-transform: uppercase !important; letter-spacing: 1px !important;
}
.updates-dropdown-section .terms_and_privacy_information,
.updates-dropdown-section .terms_and_privacy_information * {
    color: rgba(254,254,254,0.45) !important; font-size: 11px !important;
    background-color: transparent !important;
}
div[id^="subscribe-modal"], div[id^="subscribe-modal"] .modal-content,
div[id^="subscribe-modal"] .modal-header, div[id^="subscribe-modal"] .modal-body,
div[id^="subscribe-modal"] .modal-footer {
    background-color: #00094B !important; border-color: #267D97 !important;
    color: #FEFEFE !important; font-family: 'Inter', sans-serif !important;
}
div[id^="subscribe-modal"] * { font-family: 'Inter', sans-serif !important; color: #FEFEFE !important; }
div[id^="subscribe-modal"] .modal-header { border-bottom: 1px solid #267D97 !important; padding: 16px 20px !important; }
div[id^="subscribe-modal"] .controls input[type="text"],
div[id^="subscribe-modal"] .controls input[type="email"],
div[id^="subscribe-modal"] .controls select {
    background-color: #000940 !important; border: 1px solid #267D97 !important;
    color: #FEFEFE !important; border-radius: 4px !important;
    padding: 8px 12px !important; width: 100% !important;
}
div[id^="subscribe-modal"] .controls input[type="submit"],
div[id^="subscribe-modal"] .btn-primary {
    background-color: #267D97 !important; border: 1px solid #267D97 !important;
    color: #FFFFFF !important; font-weight: 700 !important;
    border-radius: 4px !important; padding: 10px 16px !important;
    cursor: pointer !important; width: 100% !important;
    text-transform: uppercase !important; letter-spacing: 1px !important;
}
div[id^="subscribe-modal"] .terms_and_privacy_information,
div[id^="subscribe-modal"] .terms_and_privacy_information a {
    color: rgba(254,254,254,0.5) !important; font-size: 11px !important;
}

/* ── Animations ── */
@keyframes imp-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.imp-pulse-yellow { animation: imp-pulse 1.4s ease-in-out infinite; }
.imp-pulse-blue   { animation: imp-pulse 1.4s ease-in-out infinite; }

/* ── Tab panels ── */
.imp-tab-panel { display: none; }
.imp-tab-panel.imp-active { display: block; }

/* ── Tab buttons ── */
.imp-tab-btn {
    display: inline-block;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: rgba(26,26,46,0.45) !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    padding: 11px 22px !important;
    cursor: pointer !important;
    margin-bottom: -1px !important;
    box-shadow: none !important;
    outline: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}
.imp-tab-btn.imp-active {
    color: #1A1A2E !important;
    border-bottom: 2px solid #267D97 !important;
    background: transparent !important;
    background-color: transparent !important;
}

/* ── Override global link color inside our custom active incident cards ── */
#imp-active-incidents-list a span,
#imp-active-maintenance-list a span {
    color: inherit !important;
}

/* ── Force dark text in footer tabs ── */
#imp-tab-past-incidents *, #imp-tab-past-maintenance *,
#imp-tab-scheduled-maintenance * {
    color: #1A1A2E !important;
}
/* Incident titles black */
#imp-tab-past-incidents .incident-title a,
#imp-tab-past-incidents .incident-title,
#imp-tab-past-maintenance .incident-title a,
#imp-tab-past-maintenance .incident-title,
#imp-tab-scheduled-maintenance .incident-title,
#imp-tab-scheduled-maintenance .incident-title a {
    color: #1A1A2E !important;
    font-weight: 700 !important;
}
/* Status label colors in native cloned feed */
#imp-tab-past-incidents .update strong[data-component-status],
#imp-tab-past-incidents .update strong,
#imp-tab-past-maintenance .update strong,
#imp-tab-scheduled-maintenance .update strong { color: inherit !important; }

/* Target specific status words */
#imp-incidents-container strong, #imp-maintenance-container strong,
#imp-scheduled-container strong { color: #1A1A2E !important; }

#imp-tab-past-incidents a, #imp-tab-past-maintenance a,
#imp-tab-scheduled-maintenance a {
    color: #267D97 !important;
}

/* ── Links ── */
a, a:visited { color: #267D97 !important; }
a:hover { color: #1A5E72 !important; }
[class*="timestamp"], [class*="date"], time, small { color: rgba(26,26,46,0.5) !important; }

/* ── Component status colors ── */
.component-status.operational { color: #2DB07F !important; }
.component-status.under_maintenance { color: #D97706 !important; }
.component-status.degraded_performance,
.component-status.partial_outage { color: #D97706 !important; }
.component-status.major_outage { color: #DF2427 !important; }

/* ── Native update text ── */
.layout-content.status .incident-container .updates-container .update {
    color: #1A1A2E !important;
    border-bottom-color: #E2E8F0 !important;
}
.layout-content.status small { color: rgba(26,26,46,0.5) !important; }

/* ── Component rows ── */
.component-container, .child-components-container {
    background-color: #FFFFFF !important;
    border-color: #E2E8F0 !important;
}
.component-inner-container { background-color: #FFFFFF !important; }

/* ── Hide tooltip question mark buttons ── */
.tooltip-base, button.tooltip-base,
[class*="tooltip-base"] { display: none !important; }
/* Hide hollow square icon and replace with solid bars icon */
.fa-minus-square-o::before { content: '\f0c9' !important; } /* fa-bars ≡ */
.fa-minus-square-o {
    font-family: 'FontAwesome', 'Font Awesome 5 Free' !important;
    font-weight: 900 !important;
    color: #1A1A2E !important;
}
.fa-plus-square-o::before { content: '\f0c9' !important; }
.fa-plus-square-o {
    font-family: 'FontAwesome', 'Font Awesome 5 Free' !important;
    font-weight: 900 !important;
    color: #1A1A2E !important;
}

/* ── Subscribe/notify button on incident page ── */
.incident-subscribe .btn,
.incident-subscribe button,
a[href*="subscribe"], button[class*="subscribe"],
.btn-subscribe, .subscribe-btn,
.updates-subscribe .btn,
[class*="subscribe"] .btn,
.font-regular .btn, .btn.subscribe {
    background-color: #267D97 !important;
    background: #267D97 !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 8px 20px !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    box-shadow: none !important;
}
a[href*="status"], .back-link { color: #267D97 !important; }
footer, .footer { background-color: #F2F2F0 !important; border-top: 1px solid #E2E8F0 !important; color: rgba(26,26,46,0.5) !important; }

/* ── Fix blue native buttons → teal ── */
.btn-primary, .btn-info, .btn-success {
    background-color: #267D97 !important;
    background: #267D97 !important;
    border-color: #267D97 !important;
    color: #FFFFFF !important;
    border-radius: 6px !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
}

/* ── Logo replacement ── */
.logo img { opacity: 0 !important; position: relative !important; }
.logo a { display: inline-flex !important; align-items: center !important; position: relative !important; min-width: 100px !important; min-height: 32px !important; }
.logo a::before {
    content: '' !important; position: absolute !important;
    left: 0 !important; top: 50% !important; transform: translateY(-50%) !important;
    width: 90px !important; height: 24px !important;
    background-image: url("data:image/svg+xml,%3Csvg width='90' height='24' viewBox='0 0 106 29' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M87.9437 6.71031C87.7082 6.71031 87.6493 6.79863 87.561 7.17893L84.6023 18.8428C84.3373 19.8684 84.2195 20.0156 83.6038 20.0156C83.1057 20.0156 83.0174 19.8709 82.7255 18.8428L79.676 7.17893C79.5583 6.79863 79.5288 6.71031 79.2958 6.71031H76.3935C76.0721 6.71031 75.9544 6.79863 76.0132 7.17893L79.443 19.6034C80.2918 22.7095 80.5568 23.0629 83.6038 23.0629C86.8863 23.0629 87.1218 22.6826 87.9118 19.6034L91.2237 7.17893C91.2826 6.79863 91.1943 6.71031 90.8705 6.71031H87.9412H87.9437ZM0.792418 6.6686C0.498021 6.6686 0.350823 6.81581 0.350823 7.11023V22.474C0.350823 22.7684 0.498021 22.9156 0.792418 22.9156H3.46407C3.75847 22.9156 3.90566 22.7684 3.90566 22.474V7.11023C3.90566 6.81581 3.75847 6.6686 3.46407 6.6686H0.792418Z' fill='white'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important; background-size: contain !important;
}