/* ============================================================
fastlystatus.com — Sandbox CSS Reskin Master v6 (Final)
Aligns with Fastly refreshed brand & TT Hoves Pro (July 2026)
============================================================ */

/* ── Base Typography (Fastly Global Brand Font) ───────────── */

body, p, span, div, h1, h2, h3, h4, h5, h6, a, button, input, select, td, th, li, label, strong, b {
font-family: "TT Hoves Pro Variable", sans-serif !important;
}

body { color: #000000; 
    
}

/* Links globally (DemiBold per specs) */
a {
    color: #0067D1; 
    font-weight: 500 !important;
}

/* ── Page Background ──────────────────────────────────────── */
#page-wrapper { 
    background-color: #f4eeecff; 
    
}

.page-body { 
    background-color: #F4EEEC; 
    margin-bottom: 0 !important; 
    padding-bottom: 80px; 
    
}

/* ── Navbar ───────────────────────────────────────────────── */

.navbar { 
    background-color: #000000 !important; 
    
}

nav.navbar a { 
    background-color: transparent !important; 
    color: #ffffff !important; 
    font-size: 14px; 
    font-weight: 500 !important; 
    line-height: 140%; 
    
}

nav.navbar a:hover, nav.navbar a:focus { 
    text-decoration: none !important; 
    font-weight: 800 !important;
    
}

nav.navbar span { 
    background-color: transparent !important; 
    color: #ffffff !important; 
    font-size: 14px; 
    font-weight: 500 !important; 
    line-height: 20px; 
    text-decoration: none !important; 
    
}

nav.navbar .dropdown-menu { 
    padding: 8px 0; 
    background-color: #000000 !important; 
    
}

/* Default State: White text, transparent background */
nav.navbar .dropdown-menu > li > a {
    color: #ffffff !important; 
    background-color: transparent !important; 
    font-weight: 500 !important;

}

/* Hover State: Black text, light gray background */

nav.navbar .dropdown-menu > li > a:hover,
nav.navbar .dropdown-menu > li > a:focus {
    background-color: #F3F4F6 !important; 
    color: #000000 !important; 
    font-weight: 800 !important;
    text-decoration: underline !important;
}

/* ── Incident Containers (Figma Match) ────────────────────── */
.ibox, .panel {
    background-color: #ffffff !important; 
    border: 1px solid #DCE0E4 !important; 
    border-radius: 8px !important; 
    box-shadow: none !important; 
    margin-bottom: 24px !important;
}

.incident-title-outsidebox {
    display:none !important;
}

/* ============================================================
RESTORED: BULLETPROOF INLINE HEADER LAYOUT (Float Method)
============================================================ */

.ibox-title,
.panel-heading,
.panel-default .panel-heading {
    display: block !important; 
    position: relative !important; 
    padding: 14px !important; 
    background-color: #000000 !important; 
    border-bottom: 1px solid #DCE0E4 !important; 
    border-radius: 8px 8px 0 0 !important; 
    text-align: left !important;
}

.incident-icon,
.ibox-title .incident-icon,
.panel-heading .incident-icon {
    display: block !important; 
    float: left !important; 
    width: 20px !important; 
    height: 20px !important; 
    margin: 4px 12px 0 0 !important; 
    padding: 0 !important; 
    position: static !important; 
    z-index: 5 !important;
}

.incident-icon img {
    display: block !important; 
    width: 20px !important; 
    height: 20px !important; 
    margin: 0 !important;
}

.incident-title,
h1.incident-title,
h2.incident-title,
.panel-heading .incident-title,
.ibox-title h1, .ibox-title h2, .ibox-title h3 {
    display: inline-block !important; 
    width: auto !important; 
    vertical-align: top !important; 
    font-family: "TT Hoves Pro Variable", sans-serif !important; 
    font-size: 18px !important; 
    font-weight: 800 !important; 
    line-height: 24px !important; 
    letter-spacing: 0.03rem !important; 
    color: #b2b2b2 !important; 
    margin: 0 !important; 
    padding: 0 !important; 
    border: none !important;
}

.incident-header-date,
.panel-heading-date,
.incident-date {
    display: block !important; 
    clear: both !important; 
    margin: 8px 0 0 32px !important; 
    font-size: 0.875rem !important; 
    font-weight: 400 !important; 
    line-height: 140% !important; 
    color: #677483 !important; 
    padding: 0 !important; 
    text-align: left !important;
}

.ibox-content, .panel-body {
    padding: 24px !important; 
    background-color: #ffffff !important; 
    border-radius: 0 0 8px 8px !important;
}

/* ── Status colors & Icons ────────────────────────────────── */
.component-available {
    color: #25741E; }

.component-informational{
    color: #0067D1; }

.component-degraded {
    color: #996500; }

.component-unavailable {
    color: #BD140A;
    }

.component-maintenance {
    color: #472D7B;
    }

.status-available {
    background-color: #25741E;
    }

.status-informational{
    background-color: #0067D1;
    }

.status-degraded {
    background-color:
    #996500; }

.status-unavailable {
    background-color: #BD140A;
    }

.status-maintenance {
    background-color: #472D7B;
    }

i.component-available::before {
    background-image: url('https://statuscastsaprdeast.blob.core.windows.net/pages/21403/a8dea9fd2d3045a29c856ece32270a19');
    background-size: 24px 24px;
    display: inline-block;
    width: 24px;
    height: 24px;
    content: "";
    }

i.component-monitoring::before {
    background-image: url('https://statuscastsaprdeast.blob.core.windows.net/pages/21403/90a4a5e94c5046158cb8aa26eb79e613');
    background-size: 24px 24px;
    display: inline-block;
    width: 24px;
    height: 24px;
    content: "";
    }

i.component-informational::before {
    background-image: url('https://statuscastsaprdeast.blob.core.windows.net/pages/21403/5608f727d95d4c00a34d98e2d54d95bb');
    background-size: 24px 24px;
    display: inline-block;
    width: 24px;
    height: 24px;
    content: ""; }

i.component-degraded::before {
    background-image: url('https://statuscastsaprdeast.blob.core.windows.net/pages/21403/0591e68fcc1047369e030efccf00f95b');
    background-size: 24px 24px;
    display: inline-block;
    width: 24px;
    height: 24px;
    content: ""; }

i.component-unavailable::before {
    background-image: url('https://statuscastsaprdeast.blob.core.windows.net/pages/21403/6b7419da703c498abf700bb531df9c87');
    background-size: 24px 24px;
    display: inline-block;
    width: 24px;
    height: 24px;
    content: ""; }

i.component-maintenance::before {
    background-image: url('https://statuscastsaprdeast.blob.core.windows.net/pages/21403/d9b69582c3914a6c8dd3bb8988ad66e8');
    background-size: 24px 24px;
    display: inline-block;
    width: 24px;
    height: 24px;
    content: ""; }

i.component-investigating::before {
    background-image: url('https://statuscastsaprdeast.blob.core.windows.net/pages/21403/c1b4a4cb44d741a88cec4e1c5ddc23d8');
    background-size: 24px 24px;
    display: inline-block;
    width: 24px;
    height: 24px;
    content: ""; }

i.component-identified::before {
    background-image: url('https://statuscastsaprdeast.blob.core.windows.net/pages/21403/1d4db84885b9419390e2c408c34ebe47');
    background-size: 24px 24px;
    display: inline-block;
    width: 24px;
    height: 24px;
    content: ""; }

/* ── Restore Groups & State text ── */

.incident-groups {
    display: block !important;
    font-family: "TT Hoves Pro Variable", sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #677483 !important;
    margin: 8px 0 0 0 !important;
    text-transform: none !important;
    width: 100% !important;
}



/* ── Tables ───────────────────────────────────────────────── */

table, td, th, .border {
    border-color: #DCE0E4 !important;
}
table > thead > tr > th {
    background-color: #ffffff !important;
    color: #000000;
    font-weight: 500 !important;
}

table > tbody > tr > td {
    color: #49433f;
    font-size: 1rem !important;
}

.historygrid tbody tr:hover {
    background-color: #DCE0E4;
    font-weight: 800 !important;
    }



/* ── Forms / Search / Modal ───────────────────────────────── */

.search, .btn-arrow, .form-control {
    background-color: #ffffff !important;
    color: #000000 !important;
    font-family: "TT Hoves Pro Variable", sans-serif !important;
}

.card, .search-result-item, .select-dropdown, .groups-dropdown {
    background-color: #ffffff !important;
    color: #000000 !important;
}

.dropdown-menu > li > a:hover, .search-result-item:hover {
    background-color: #ffffff !important;
    font-weight: 800 !important;
}

.top-navigation .nav > li a:hover, .top-navigation .nav > li a:focus, .tooltipster-sidetip.tooltipster-shadow .tooltipster-box, .dropdown-menu {
    background-color: #DCE0E4;
    font-weight: 800 !important;
}

#filter-result label {
    color: #000000 !important;
}

.modal-content {
    background-color: #ffffff !important;
    border-color: #DCE0E4 !important;
    box-shadow: 0 0 5px 1px #DCE0E4 !important;
}

#subscribeModalForm .form-group:nth-of-type(5), #subscription-summary .card:nth-of-type(4) {
    display: none !important;
}

/* ── Uptime component text / Calendar ─────────────────────── */
.component-uptime-from, .component-uptime-percentage {
    color: #000000;
    font-weight: 500 !important;
}

.text-secondary.component-uptime-to {
    color: #000000 !important;
}

.calendar-event {
    background-color: #9df !important;
    border-color: #33b1ff !important;
}

.statuspage-groupname { display: none; }

/* ── Footer ───────────────────────────────────────────────── */

.footer {
    position: relative !important;
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

.footer .row {
    background: #ffffff !important;
    padding: 0 32px !important;
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

.footer .col-sm-12 {
    padding: 0 !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    flex-grow: 1 !important;
    flex-shrink: 1 !important;
}

.footer .row .col-md-6 {
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

.footer .row .col-md-6:nth-child(2) {
    display: none !important;
}

.footer-brand a {
    color: #000000;
}

.footer .footbar_1 {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    background-color: #000000 !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 1000 !important;
    padding: 0 24px !important;
    box-sizing: border-box !important;
}

.footer .footbar_1 span {
    display: flex !important;
    align-items: center;
    padding: 14px 10px;
    font-weight: 400 !important;
}

.footer .footbar_1 span::before {
    margin-right: 4px;
}

.footbar_1__links {
    display: flex !important;
    align-items: center;
    flex-wrap: wrap;
}

.footer .footbar_1__links a {
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    padding: 14px 10px !important;
    margin-left: 12px;
}

.footer .footbar_1__links a:hover {
    text-decoration: underline !important;
}

/* ============================================================
NEW HERO SECTION (Figma Match)
============================================================ */

.sc-hero {
    padding: 85px 20px 20px 20px;
    background-color: #000000;
    border-bottom: none;
}

.sc-hero__container {
    max-width: 100%;
    margin: 0 auto;
}

.sc-hero__top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.sc-hero__status-label {
    display: flex;
    align-items: center;
    margin-bottom: 0 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
}

.sc-state-normal
.sc-hero__status-label {
    color: #25741E !important;
}

.sc-state-degraded
.sc-hero__status-label {
    color: #996500 !important;
}

.sc-state-unavailable
.sc-hero__status-label {
    color: #BD140A !important;
}

.sc-state-maintenance
.sc-hero__status-label {
    color: #472D7B !important;
}

.sc-state-investigating
.sc-hero__status-label {
    color: #996500 !important;
}

.sc-state-identified
.sc-hero__status-label {
    color: #0067D1 !important;
}

.sc-state-monitoring
.sc-hero__status-label {
    color: #004099 !important;
}

.sc-hero__title {
    color: #ffffff !important;
    font-family: "TT Hoves Pro Variable", sans-serif !important;
    font-size: 42px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    margin: 0 0 12px !important;
    letter-spacing: -0.02em !important;
}

@media {
    max-width: 768px;
}

.sc-hero__title {
    font-size: 28px !important;
}

.sc-hero__actions {
    display: flex;
    flex-wrap: wrap;
    margin-top: 24px;
}

.sc-btn {
    border-radius: 4px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none !important;
    cursor: pointer;
    display: inline-block;
    margin-right: 12px;
    margin-bottom: 12px;
}

.sc-btn--primary {
    background-color: #ffffff;
    color: #000000 !important;
    border: none;
}

.sc-btn--primary:hover {
    background-color: #F3F4F6;
    font-weight: 800 !important;
}

.sc-btn--secondary {
    background-color: transparent;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.3);
}

.sc-btn--secondary:hover {
    background-color: rgba(255,255,255,0.1);
    font-weight: 800 !important;
}

/* ============================================================
STATUS DOT STYLING (Hero Section)
============================================================ */

.sc-status-dot {
    display: inline-block !important;
    width: 14px !important;
    height: 14px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    margin-right: 12px !important;
}

.sc-state-normal .sc-status-dot {
    background-color: #25741E !important;
}

.sc-state-degraded .sc-status-dot {
    background-color: #996500 !important;
}

.sc-state-unavailable .sc-status-dot {
    background-color: #BD140A !important;
}

.sc-state-maintenance .sc-status-dot {
    background-color: #472D7B !important;
}

.sc-state-investigating .sc-status-dot {
    background-color: #996500 !important;
}

.sc-state-identified .sc-status-dot {
    background-color: #0067D1 !important;
}

.sc-state-monitoring .sc-status-dot {
    background-color: #004099 !important;
}

/* ============================================================
TRANSFORM SC-GLOBAL-NAV INTO ICON DROPDOWN
============================================================ */

.sc-global-nav {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
}

.sc-global-nav a {
    display: none !important;
}

.sc-global-nav::before {
    content: "ℹ" !important;
    font-family: Arial, sans-serif !important;
    font-size: 20px !important;
    font-weight: bold !important;
    color: #ffffff !important;
    width: 32px !important;
    height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #ffffff !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}

/* HIDE ICON ON HOVER */
.sc-global-nav:hover::before {
    display: none !important;
}

.sc-global-nav::after {
    content: "" !important;
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    margin-top: 8px !important;
    min-width: 220px !important;
    background-color: #000000 !important;
    border: 1px solid #3A424A !important;
    border-radius: 4px !important;
    box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.6) !important;
    padding: 8px 0 !important;
    z-index: 1005 !important;
    display: none !important;
}

.sc-global-nav:hover a {
    display: flex !important;
    align-items: center !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    padding: 10px 16px !important;
    text-decoration: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.sc-global-nav:hover a:hover {
    background-color: #1a1a1a !important;
    text-decoration: underline !important;
    font-weight: 800 !important;
}

/* ============================================================
NEW SUB-NAVBAR & DROPDOWN TOOLTIPS (Fixed Layout)
============================================================ */

.sc-subnav {
    background-color: #000000;
    border-top: 1px solid #3A424A;
}

.sc-subnav__container {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    overflow: visible;
}

.sc-subnav__container > a,
.dropdown5 .dropbtn5 {
    color: #829096;
    font-size: 14px;
    font-weight: 800;
    line-height: 100%;
    padding: 12px 16px;
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    background: transparent;
    border-top: none;
    border-left: none;
    border-right: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    outline: none;
    margin: 0;
}

.dropdown5 .dropbtn5 img {
    margin-right: 6px;
}

.sc-subnav__container > a.active {
    color: #ffffff;
    border-bottom: 2px solid #ffffff;
}

.sc-subnav__container > a:hover,
.dropdown5:hover .dropbtn5 {
    color: #ffffff;
    font-weight: 800 !important;
}

.dropdown5 {
    position: relative;
    display: inline-block;
}

.dropdown-content5 {
    display: none !important;
    position: absolute;
    background-color: #000000;
    min-width: 260px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.5);
    z-index: 999;
    top: 100%;
    left: 0;
    border: 1px solid #3A424A;
    border-radius: 4px;
    padding: 8px 0;
}

.dropdown5:hover .dropdown-content5 {
    display: block !important;
    font-weight: 800 !important;
}

.dropdown-content5 a {
    color: #ffffff !important;
    padding: 10px 16px;
    text-decoration: none !important;
    display: flex;
    align-items: center;
    font-size: 14px !important;
    font-weight: 800 !important;
    border: none;
    position: relative;
    background-color: transparent !important;
}

.dropdown-content5 a b {
    margin-left: 8px;
    font-weight: 600;
}

.dropdown-content5 a:hover {
    background-color: #1a1a1a !important;
    text-decoration: underline !important;
    text-decoration-style: underline !important;
    font-weight: 800 !important;
}

.dropdown-content5 a span[class^="ttipcontent"] {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    width: 220px;
    background-color: #ffffff;
    color: #3A4245;
    font-size: 0.875rem;
    font-weight: 400;
    padding: 10px;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    margin-left: 5px;
    z-index: 1000;
    border: 1px solid #DCE0E4;
    white-space: normal;
    line-height: 140%;
}

.dropdown-content5 a:hover span[class^="ttipcontent"] {
    display: block;
    font-weight: 800 !important;
}

.ttipcontent-normal b, .ttipcontent-info b, .ttipcontent-main b,
.ttipcontent-degrade b, .ttipcontent-unavail b, .ttipcontent-invest b,
.ttipcontent-identified b, .ttipcontent-monitoring b {
    margin-left: 0 !important;
    font-weight: 500 !important;
    }

/* ============================================================
WIDGET-CONTAINER FULL WIDTH STRETCH FIX
============================================================ */
.widget-gutters {
    margin-top: 0px !important;
}
.widget, .ibox, .ibox-content, .panel, .panel-default {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.ibox, .widget-container {
    border-radius: 8px;
    box-shadow: none;
}

/* ============================================================
RESTORE CALENDAR ARROW ICONS (Fix for missing squares)
============================================================ */
.fa, .fas, .fa-chevron-left, .fa-chevron-right {
    font-family: 'FontAwesome' !important;
}

.fc-icon {

font-family: 'fcicons' !important;
}

.fc .fc-prev-button, .fc .fc-next-button,
button.fc-prev-button, button.fc-next-button {
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    color: #677483 !important;
    padding: 8px !important;
}

.fc .fc-prev-button:hover, .fc .fc-next-button:hover,
button.fc-prev-button:hover, button.fc-next-button:hover {
    background-color: transparent !important;
    color: #0067D1 !important;
    font-weight: 800 !important;
}

/* ============================================================
INCIDENT TITLE LINK (Override inner H1 black lock on hover)
============================================================ */
.incident-partial-title-url,
.incident-partial-title-url h1,
.incident-partial-title-url h2 {
    color: #000000 !important;
    text-decoration: none !important;
    transition: color 0.15s ease;
}

.incident-partial-title-url:hover,
.incident-partial-title-url:hover *,
.incident-partial-title-url:hover h1,
.incident-partial-title-url:hover h2,
a.incident-partial-title-url:hover h1 {
    color: #0067D1 !important;
    font-weight: 800 !important;
}

/* ============================================================
INCIDENT HISTORY LIST OVERRIDE (Date stacked above incident)
============================================================ */
li.incident-list-group-row,
.incident-list-group-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 4px !important;
    background-color: #ffffff !important;
    border-bottom: 1px solid #DCE0E4 !important;
}

.incident-list-group-date {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    border-right: none !important;
    padding: 0 !important;
    margin: 0 0 6px 0 !important;
    text-align: left !important;
    font-family: "TT Hoves Pro Variable", sans-serif !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #677483 !important;
}

.incident-list-group-row .incident-row,
.incident-list-group-row .row.incident-row {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ============================================================
INCIDENT HISTORY LIST: FORCE 100% FULL-WIDTH TEXT
============================================================ */
.incident-list-group-row .row,
.incident-list-group-row .row.no-gutters,
.incident-list-group-row .incident-row {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}

.incident-list-group-row div[class*="col-md-"],
.incident-list-group-row .col-md-9,
.incident-list-group-row .col-md-3 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    float: none !important;
}

.incident-list-group-row .col-md-3:empty {
    display: none !important;
}

/* ============================================================
INCIDENT HISTORY LIST: SPACING & LEFT ALIGNMENT
============================================================ */
li.incident-list-group-row,
.incident-list-group-row {
    padding: 4px 0 !important;
    margin: 0 !important; 
    border-bottom: 1px solid #DCE0E4 !important;
    background-color: transparent !important;
}

li.incident-list-group-row:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

.incident-list-group-row * {
    text-align: left !important;
}

.incident-list-group-date {
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
}

.incident-list-group-row .incident-partial-title-url,
.incident-list-group-row h1,
.incident-list-group-row h2 {
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
    display: block !important;
}

.incident-list-group-row .component-container,
.incident-list-group-row .component-overflow {
    margin: 0 0 24px 0 !important;
    padding: 0 !important;
}

.incident-list-group-row .incident-row,
.incident-list-group-row .incident-row > div {
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* ── Generic Incident Update Reset
(Forces padding-left to be overridden cleanly by timeline) ── */
.incident-update {
    padding-left: 0;
    margin-left: 0;
    border-left: none !important;
    border-bottom: none !important;
}

/* ============================================================
INCIDENT HISTORY LIST: FLUSH LEFT & TITLE SPACING
============================================================ */
.incident-list-group-row .col-md-1,
.incident-list-group-row .col-sm-1,
.incident-list-group-row [class*="col-"]:has(.incident-icon),
.incident-list-group-row .col-md-11 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

.incident-list-group-row .row,
.incident-list-group-row .incident-update .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
}

.incident-list-group-row .incident-partial-title-url,
.incident-list-group-row h1,
.incident-list-group-row h2 {
    margin-top: 16px !important;
    margin-bottom: 16px !important;
    padding-left: 0 !important;
    display: block !important;
}

.incident-list-group-row .incident-update-when,
.incident-list-group-row .incident-update-text {
    padding-left: 0 !important;
    margin-left: 0 !important;
    margin-top: 16px !important;
}

/* ============================================================
PERFECT FLUSH-LEFT ALIGNMENT FIX (Removes Stair-Stepping)
============================================================ */
.incident-header-date,
.panel-heading-date,
.incident-date {
    margin-left: 0 !important;
    padding-left: 0 !important;
    margin-bottom: 10px !important;
}

.ibox-content .row,
.panel-body .row,
.ibox-content div[class*="col-"],
.panel-body div[class*="col-"],
.component-container {
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* Outer wrapper padding matching */
.ibox-title,
.panel-heading,
.panel-default .panel-heading,
.ibox-content,
.panel-body {
    padding-left: 24px !important;
    padding-right: 24px !important;
}

/* ============================================================
UNBREAKABLE TIMELINE (No Pseudo-Elements)
============================================================ */


/* 2. Hide the border on the very last update in each card */
div.incident-update:last-child {
    border-left: 2px solid transparent !important;
        /* Hides the line */
}

/* 3. Format the Date Text (Gray, clean) */
div.incident-update-when {
    font-family: "TT Hoves Pro Variable", sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #677483 !important;
    text-transform: none !important;
    margin-bottom: 8px !important;
    display: block !important;
    padding-left: 0 !important;
}

/* 4. Inject the bold, blue "UPDATE - " label before the timestamp */
div.incident-update-when::before {
    content: "UPDATE - " !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: #0067D1 !important;
    margin-right: 4px !important;
    display: inline !important;
}

/* ============================================================
INCIDENT UPDATE TEXT (Rich Text Override & Purple Links)
============================================================ */
/* Crush any inline styles from the StatusCast rich text editor */
.incident-update-text,
.incident-update-text p,
.incident-update-text span,
.incident-update-text font,
.incident-update-text div {
    font-family: "TT Hoves Pro Variable", sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #4a4a49 !important;
    line-height: 140% !important;
    margin: 0 !important;
    background-color: transparent !important;
    text-align: left !important;
}

/* Kinetic Purple Links (Only inside updates) */
.incident-update-text a,
.incident-update-text a * {
    color: #0067D1 !important; /* Kinetic Purple */
    font-weight: 800 !important; /* Bold per Fastly links*/
    text-decoration: underline !important;
}

/* Slightly darker purple on hover */
.incident-update-text a:hover {
    color: #7A28E2 !important;
    font-weight: 800 !important;
}

/* ============================================================
INCIDENT HISTORY SEARCH LIST (Standardize with Main Page)
============================================================ */
/* 1. Force the list items to stack vertically */
.incident-list-results {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Ensure the results card headers share the exact same spacing */
.incident-list-results .ibox-title,
.incident-list-results .panel-heading {
    display: block !important;
    position: relative !important;
    padding: 24px !important;
    background-color: #F3F4F6 !important;
    border-bottom: 1px solid #DCE0E4 !important;
    border-radius: 8px 8px 0 0 !important;
    text-align: left !important;
}

/* 2. Position the Search Icon on the left */
.incident-list-results .incident-icon {
    display: block !important;
    float: left !important;
    width: 20px !important;
    height: 20px !important;
    margin: 4px 12px 0 0 !important;
    padding: 0 !important;
    position: static !important;
    z-index: 5 !important;
}

.incident-list-results .incident-icon img {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
}

/* 3. Keep the Search Title inline with the floated icon */
.incident-list-results .incident-title,
.incident-list-results h1,
.incident-list-results h2 {
    display: inline-block !important;
    width: auto !important;
    vertical-align: top !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 4. Fix the Date Alignment */
.incident-list-results .incident-header-date,
.incident-list-results .panel-heading-date,
.incident-list-results .incident-date {
    display: block !important;
    clear: both !important;
    position: static !important;
    float: none !important;
    text-align: left !important;
    margin: 8px 0 0 32px !important;
    padding-left: 0 !important;
}

/* 5. Clean up any grid paddings causing misalignments in search results */
.incident-list-results .row,
.incident-list-results [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* ============================================================
SPACING ADJUSTMENT: Breathing Room Above Component Container
============================================================ */
.component-container,
.component-container.component-overflow,
#filter-result .component-container {
    margin-top: 16px !important;
    display: block !important;
}

/* ============================================================
HISTORY PAGE -- CALENDAR RESKIN (Fastly Figma Match)
============================================================ */
/* Date Range Popups */
.daterangepicker {
    font-family: "TT Hoves Pro Variable", sans-serif !important;
    border: 1px solid #DFDCDC !important;
    border-radius: 8px !important;
    box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.15) !important;
}

.daterangepicker .calendar-table th,
.daterangepicker .calendar-table td {
    font-family: "TT Hoves Pro Variable", sans-serif !important;
    font-size: 13px !important;
    border-radius: 4px !important;
    color: #3A424A !important;
}

.daterangepicker td.active,
.daterangepicker td.active:hover {
    background-color: #000000 !important;
    color: #ffffff !important;
    font-weight: 800 !important;
}

.daterangepicker td.in-range {
    background-color: #F3F4F6 !important;
    color: #000000 !important;
}

.daterangepicker .drp-buttons .btn {
    font-weight: 500 !important;
    border-radius: 4px !important;
    font-family: "TT Hoves Pro Variable", sans-serif !important;
}

.daterangepicker .drp-buttons .btn-primary {
    background-color: #000000 !important;
    color: #ffffff !important;
    border: none !important;
}

.daterangepicker .drp-buttons .btn-primary:hover {
    background-color: #333333 !important;
    font-weight: 800 !important;
}

/* ============================================================
INCIDENTS PAGE FILTERS (3x2 Flex Wrap Grid)
============================================================ */
/* 1. Force the parent flex container to wrap natively */
.incidents-page-filters,
.page-body form.incidents-page-filters,
div.incidents-page-filters {
    -ms-flex-wrap: wrap !important;
    flex-wrap: wrap !important; /* Overrides nowrap */
    display: flex !important;
    margin-left: -8px !important;
    margin-right: -8px !important;
    width: auto !important; /* Keeps it strictly inside card gutters */
}

/* 2. Force the child filter divs to take up exactly 33.333% width */
.incidents-page-filters > div,
.incidents-type-filters > div {
    flex: 0 0 33.3333% !important; /* Locks each filter to 1/3 of the row width */
    max-width: 33.3333% !important;
    width: 33.3333% !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    margin-bottom: 16px !important; /* Spacing between top & bottom rows */
    box-sizing: border-box !important;
    display: block !important;
}

/* Ensure the inputs inside them expand to 100% of their 33.3% column */
.incidents-page-filters select,
.incidents-page-filters input,
.incidents-page-filters .form-control {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* ============================================================
SEARCH ICON INLINE ALIGNMENT (Fix for dropping magnifying glass)
============================================================ */
/* 1. Ensure the search container acts as a single-row row flexbox */
.incident-list-search-filter .input-group,
.search .input-group,
.incident-search .input-group {
    display: flex !important;
    flex-direction: row !important; /* Force side-by-side alignment */
    align-items: left !important;
    flex-wrap: nowrap !important; /* Block items from wrapping to a new line */
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 2. Force the text input field to share the space and grow inline */
.incident-list-search-filter .input-group .form-control,
.incident-list-search-filter .input-group input,
.search .input-group .form-control {
    flex-grow: 1 !important; /* Stretch to fill available width */
    width: 1% !important; /* Standard flex-override for inputs */
    max-width: 100% !important;
    border: none !important;
    background: #ffffff !important;
    box-shadow: none !important;
    height: 38px !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 3. Keep the button wrapper holding the magnifying glass locked inline */
.incident-list-search-filter .input-group-btn,
.search .input-group-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important; /* Never let it get squeezed or pushed down */
    width: auto !important;
    background: #ffffff !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Ensure the button element inside is completely transparent */
.incident-list-search-filter .input-group-btn .btn,
.search .input-group-btn .btn {
    border: none !important;
    background: #ffffff !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    color: #677483 !important; /* Slate gray icon */
}

/* ============================================================
TILE-CARD FIGMA MATCH (Branding Team Specs)
============================================================ */
/* Apply Card Specs to main panels and search results rows */
.row.incident-list-row {
    box-sizing: border-box !important;
    background: #FFFFFF !important;
    border: 1px solid #DFDCDC !important; /* Figma Spec */ 
    border-radius: 4px !important; /* Figma Spec */
    box-shadow: none !important;
    margin-bottom: 10px !important;
    padding-top: 14px !important;
    padding-left: 10px !important;
    position: relative !important;
    overflow: hidden !important;
}

/* ============================================================
LOAD MORE BUTTON (Focus Frame Figma Match)
============================================================ */
/* 1. Neutralize the native StatusCast H2 wrapper */
#load-more-pager h2,
#load-more-pager .text-center {
    display: flex !important;
    justify-content: center !important; /* Centers the button horizontally */
    align-items: center !important;
    margin: 32px 0 !important; /* Generous spacing below your card list */
}

/* 2. Format the link as your custom Focus Frame button */
#load-more-pager a#load-more-link,
#load-more-link {
    box-sizing: border-box !important;
    display: inline-flex !important; /* Enables inline flex layout */
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important; /* Auto layout padding from spec */
    padding: 8px 24px !important; 
        /* Slightly widened horizontal padding so the text doesn't overflow the 81px Figma clamp on mobile */ 
    min-width: 81px !important; 
    height: auto !important; /* Let padding define natural height matching your line height */ 
    min-height: 28px !important; /* Border and brand color matching */ 
    border: 2px solid #0067D1 !important; /* Strict Fastly Blue */ 
    border-radius: 5px !important; /* Figma Spec */ 
    background-color: #ffffff !important; /* Button text styling */ 
    font-family: 'TT Hoves Pro Variable', sans-serif !important; 
    font-size: 16px !important; /* Figma Spec */ 
    font-weight: 600 !important; /* SemiBold */ 
    line-height: 140% !important; /* Figma Spec */ 
    color: #000000 !important; /* Black text */ 
    text-decoration: none !important; 
    text-transform: lowercase !important; /* Keep the lowercase "load more" branding */ 
    transition: all 0.15s ease !important; 
    cursor: pointer !important;
}

/* 3. Hover state for the Focus Frame button */
#load-more-pager a #load-more-link:hover,
#load-more-link:hover {
    background-color: #0067D1 !important; /* Fill with Fastly Blue on hover */
    color: #ffffff !important; /* Text shifts to white for contrast */
    text-decoration: none !important;
    border-color: #0067D1 !important;
        font-weight: 800 !important;
}

/* Focus state: matches your design specifications */
#load-more-pager a #load-more-link:focus,
#load-more-link:focus {
    outline: none !important; 
    box-shadow: 0 0 0 3px rgba(0, 103, 209, 0.3) !important; /* Soft blue halo */
}

/* ============================================================
FOOTER DROP-UP MENU (Resources)
============================================================ */
/* 1. Anchor the drop-up container */
.footer-dropup {
    position: relative !important;
    display: inline-block !important;
    margin-left: 12px !important;
}

/* 2. Format the trigger button to look identical to your other footer links */
.footer-dropbtn {
    background-color: transparent !important;
    color: #ffffff !important;
    font-family: "TT Hoves Pro Variable", sans-serif !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    border: none !important;
    padding: 14px 10px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    outline: none !important;
}

.footer-dropbtn:hover {
    text-decoration: underline !important;
}

.dropup-arrow {
    font-size: 12px !important;
    margin-left: 6px !important;
    padding: 0 !important;
}

/* 3. The Drop-Up Box (Forces it to render ABOVE the button) */
.footer-dropup-content {
    display: none !important;
    position: absolute !important;
    bottom: 100% !important; 
        /* MAGIC: Pushes the bottom of the menu to the top of the button */
    right: 0 !important; 
        /* Aligns the box flush with the right edge so it doesn't spill off-screen */
    margin-bottom: 8px !important; /* Breathing room between menu and button */
    background-color: #000000 !important; /* Matches footer */
    min-width: 200px !important;
    box-shadow: 0px -8px 24px rgba(0, 0, 0, 0.6) !important; /* Reverse shadow pointing UP */
    border: 1px solid #3A424A !important;
    border-radius: 4px !important;
    padding: 8px 0 !important;
    z-index: 1005 !important;
}

/* 4. Show the drop-up on hover */
.footer-dropup:hover .footer-dropup-content,
.footer-dropup:focus-within .footer-dropup-content {
    display: flex !important;
    flex-direction: column !important;
        font-weight: 800 !important;
}

/* 5. Format the links inside the drop-up box */
.footer-dropup-content a {
    color: #ffffff !important;
    font-size: 13px !important; /* Slightly smaller for dropdown items */
    font-weight: 500 !important;
    padding: 10px 16px !important;
    margin: 0 !important; /* Overrides the default 12px margin on footer links */
    text-decoration: none !important;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: left !important;
}

/* Hover state for internal links */
.footer-dropup-content a:hover {
    background-color: #1a1a1a !important; /* Subtle dark gray highlight */
    text-decoration: underline !important;
        font-weight: 800 !important;
}

/* ============================================================
FULLCALENDAR WIDGET OVERHAUL (Fastly Figma Match)
============================================================ */
/* 1. Global Calendar Typography Reset */
.fc, .fc *, .fullcalendar * {
    font-family: "TT Hoves Pro Variable", sans-serif;
}

/* 2. Calendar Header (Month Title) */
.fc .fc-toolbar-title {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #000000 !important;
    letter-spacing: 0.03rem !important;
    margin: 0 !important;
}

/* 3. Calendar Toolbar Buttons (Prev, Next, Today, Month, Week) */
.fc .fc-button {
    font-family: "TT Hoves Pro Variable", sans-serif;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #000000 !important;
    background-color: #ffffff !important;
    background-image: none !important;
    border: 1px solid #DCE0E4 !important;
    border-radius: 4px !important;
    padding: 6px 16px !important;
    box-shadow: none !important;
    text-shadow: none !important;
    text-transform: capitalize !important;
    height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.15s ease !important;
}

/* Hover state for buttons */
.fc .fc-button:hover,
.fc .fc-button:focus {
    background-color: #F3F4F6 !important;
    color: #000000 !important;
    border-color: #B2B2B2 !important;
    outline: none !important;
    box-shadow: none !important;
        font-weight: 800 !important;
}

/* Active/Selected button state (e.g., currently on "Month" view) */
.fc .fc-button-active,
.fc .fc-button-primary:not(:disabled):active,
.fc .fc-button-primary:not(:disabled).fc-button-active {
    background-color: #000000 !important;
    color: #ffffff !important;
    border-color: #000000 !important;
    font-weight: 600 !important;
}

/* 4. Calendar Grid & Borders */
.fc-theme-bootstrap .fc-scrollgrid,
.fc-theme-bootstrap td,
.fc-theme-bootstrap th,
.fc td, .fc th {
    border-color: #DCE0E4 !important; /* Soft Figma gray borders */
}

/* 5. Day of Week Headers (Sun, Mon, Tue) */
.fc-col-header-cell {
    background-color: #F3F4F6 !important; /* Light gray header background */
    padding: 8px 0 !important;
    border-bottom: 1px solid #DCE0E4 !important;
}

.fc-col-header-cell-cushion {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #677483 !important; /* Slate Gray */
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    text-decoration: none !important;
}

/* 6. Date Numbers inside the Grid */
.fc-daygrid-day-number {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #3A424A !important;
    text-decoration: none !important;
    padding: 8px !important;
}

/* Today button - Match Fastly Blue Button Style */
.fc .fc-today-button {
    border: 2px solid #0067D1 !important;
    border-radius: 5px !important;
    background-color: #ffffff !important;
    color: #000000 !important;
    font-weight: 600 !important;
    padding: 6px 16px !important;
    transition: all 0.15s ease !important;
    height: 36px !important;
}

.fc .fc-today-button:hover:not(:disabled) {
    background-color: #0067D1 !important;
    color: #ffffff !important;
    font-weight: 800 !important;
}

.fc .fc-today-button:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

/* 7. Actual Calendar Events / Pills */
.fc-event,
.fc-daygrid-event,
.fc-timegrid-event {
    background-color: #0067D1 !important; /* Solid Fastly Blue */ 
    border: none !important; 
    border-radius: 4px !important; /* Crisp 4px corners */ 
    padding: 2px 6px !important; 
    margin: 2px 4px !important; 
    box-shadow: none !important; 
    transition: background-color 0.15s ease !important;
}

/* Event Text Formatting */
.fc-event-main,
.fc-event-title,
.fc-event-time {
    font-family: "TT Hoves Pro Variable", sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #ffffff !important; /* White text on blue background */
    border: none !important;
}

/* Hover effect for Calendar Events */
.fc-event:hover {
    background-color: #004099 !important; /* Darker blue on hover */
    cursor: pointer !important;
        font-weight: 800 !important;
}

/* Override StatusCast's default blue background on events */
.calendar-event {
    background-color: #0067D1 !important;
    border-color: #0067D1 !important;
}

/* ============================================================
   HISTORY GRID WIDGET, TABS & TOOLTIPS (Safe Overhauls)
   ============================================================ */

/* 1. COMPONENT ROW HEADER LINKS (Hyphen Selector Corrected) */
a[data-requestcomponentid],
[data-requestcomponentid],
.historygrid tbody tr td:first-child a {
    font-family: "TT Hoves Pro Variable", sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important; /* Bold */
    color: #0067D1 !important; /* Fastly Blue */
    transition: color 0.15s ease !important;
    width: auto !important;
}

.historygrid tbody tr td:not(:first-child) {
    width: auto !important;
}


/* Hover state: Kinetic Purple & Underline */
a[data-requestcomponentid]:hover,
[data-requestcomponentid]:hover,
.historygrid tbody tr td:first-child a:hover {
    color: #0067D1 !important; /* Kinetic Purple */
    font-weight: 800 !important;
}

/* TAB OVERHAULS (Strictly Scoped - Removes Ghost Tabs) */

/* Hover State */
.tabs-container .nav-tabs .nav-link:hover,
.tabs-container .nav-tabs li a:hover {
    background-color: #F3F4F6 !important; /* Light gray box hover */
    color: #0067D1 !important; /* Kinetic Purple */
    border-bottom: 2px solid #DCE0E4 !important;
        font-weight: 800 !important;
}

/* Active State (Selected Tab) */
.tabs-container .nav-tabs .nav-link.active,
.tabs-container .nav-tabs li.active a {
    color: #0067D1 !important;
    background-color: transparent !important;
    border-bottom: 2px solid #000000 !important; /* Solid black accent track */
}

/* TOOLTIPSTER POPUPS (Compiler-Safe Styling) */
.tooltipster-box,
.tooltipster-base,
.tooltip-inner {
    background-color: #ffffff !important;
    border: 1px solid #DFDCDC !important; /* Fastly Card Border */
    border-radius: 8px !important;
    box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.15) !important; /* Figma Drop Shadow */
}

.tooltipster-content {
    font-family: "TT Hoves Pro Variable", sans-serif !important;
    padding: 16px !important;
    text-align: left !important;
}

/* INCIDENT TOOLTIP: POSITION ICON LEFT OF TITLE */
.incident-tooltip-header {
    display: flex !important;
    flex-direction: row !important; /* Side-by-side */
    align-items: center !important; /* Vertically center icon and text */
    margin-bottom: 8px !important;
    width: 100% !important;
}

/* Tooltip Title & Icon Inline Layout */
.incident-tooltip-icon {
    display: block !important;
    flex-shrink: 0 !important;
    width: 100 !important;
    height: 18px !important;
    margin: 0 8px 0 0 !important; /* Space between icon and text */
}

.incident-tooltip-title {
    font-family: "TT Hoves Pro Variable", sans-serif !important;
    font-size: 16px !important;
    line-height; 24px !important;
    font-weight: 800 !important;
    color: #b2b2b2 !important;
    margin: 0 !important;
    display: inline-block !important;
}

.incident-tooltip-title::after {
    content: " →" !important;
    margin-left: 4px !important;
}

.incident-tooltip-title:hover {
    color: #0067D1 !important;
    text-decoration: underline !important;
        font-weight: 800 !important;
}

/* Date and Text layouts */
.incident-tooltip-date {
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #677483 !important;
    margin-bottom: 8px !important;
    display: block !important;
}

.incident-tooltip-text {
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #4A4A49 !important; /* Charcoal */
    line-height: 140% !important;
    display: block !important;
}

/* IBOX TOOLS UNIFICATION (Synchronize Chevrons, Expand, Plus) */
.ibox-tools a,
.ibox-tools button {
    color: #677483 !important; /* Slate Gray */
    transition: color 0.15s ease !important;
    padding: 4px !important;
}

.ibox-tools a:hover,
.ibox-tools button:hover {
    color: #0067D1 !important; /* Fastly Blue */
    text-decoration: none !important;
        font-weight: 800 !important;
}

/* HISTORY GRID FA-PLUS ONLY */
.historygrid i.fa.fa-plus {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  margin-right: 8px !important;
  border: 1px solid #DFDCDC !important;
  border-radius: 4px !important;
  background-color: #ffffff !important;
  color: #3A4245 !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  transition: transform 0.2s ease !important;
}

/* ============================================================
HISTORYGRID TABLE FIX (Force 100% Width & Fixed Layout)
============================================================ */

.historygrid,
.historygrid table {
    width: 100% !important;
    max-width: 100% !important;
    display: table !important;
    box-sizing: border-box !important;
}

.historygrid tbody,
.historygrid thead {
    display: table-row-group !important;
    width: 100% !important;
}

.historygrid tbody tr:hover { background-color: #DCE0E4; }
.historygrid tbody tr td:first-child a { margin-left: 12px !important; }


.historygrid td,
.historygrid th {
    display: table-cell !important;
    width: auto !important;
}
/* ══════════════════════════════════════════════════════════
   TOOLTIPS & POPUPS (REINFORCED - Override StatusCast Defaults)
   ══════════════════════════════════════════════════════════ */

/* PRIMARY TOOLTIP BOX - White background */
.tooltipster-box,
.tooltipster-base,
.tooltip-inner {
    background-color: #ffffff !important;
    color: #3A4245 !important;
    border: 1px solid #DFDCDC !important;
    border-radius: 8px !important;
    box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.15) !important;
    padding: 0 !important;
}

.tooltipster-sidetip.tooltipster-shadow .tooltipster-box {
    background-color: #ffffff !important;
    border: 1px solid #DFDCDC !important;
    box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.15) !important;
}

.tooltipster-content {
    font-family: "TT Hoves Pro Variable", sans-serif !important;
    padding: 16px !important;
    text-align: left !important;
    color: #3A4245 !important;
    background-color: transparent !important;
}

/* INCIDENT TOOLTIP - Match update styling */
.incident-tooltip-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    margin-bottom: 12px !important;
    width: 100% !important;
    gap: 8px !important;
}

.incident-tooltip-icon {
    display: block !important;
    flex-shrink: 0 !important;
    width: 20px !important;
    height: 20px !important;
    margin-top: 2px !important;
}

.incident-tooltip-icon img {
    width: 20px !important;
    height: 20px !important;
}

.incident-tooltip-title {
    font-family: "TT Hoves Pro Variable", sans-serif !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #b2b2b2 !important;
    margin: 0 !important;
    display: block !important;
    line-height: 1.2 !important;
}

.incident-tooltip-date {
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #677483 !important;
    margin: 8px 0 0 28px !important;
    display: block !important;
    padding-left: 0 !important;
}

/* UPDATE LABEL (Styled like incident timeline) */
.incident-tooltip-date::before {
    content: "UPDATE - " !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: #0067D1 !important;
    margin-right: 4px !important;
}

.incident-tooltip-text {
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #3A4245 !important;
    line-height: 140% !important;
    display: block !important;
    margin-top: 8px !important;
    margin-left: 28px !important;
}

.incident-tooltip-description {
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #3A4245 !important;
    line-height: 140% !important;
    display: block !important;
    margin-top: 8px !important;
    margin-left: 28px !important;
}

/* Links inside tooltips - Kinetic Purple */
.incident-tooltip-text a {
    color: #0067D1 !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
}

.incident-tooltip-text a:hover {
    color: #3A4245 !important;
}

/* Prevent background inheritance */
.tooltipster-box *,
.tooltipster-content *,
.incident-tooltip-header *,
.incident-tooltip-title,
.incident-tooltip-date,
.incident-tooltip-text {
    background-color: transparent !important;
}
/* ============================================================
CONSOLIDATE INCIDENT TITLES (Show Inside, Hide Outside)
============================================================ */

/* Hide the title outside the ibox-content */
.incident-title.outsidebox {
    display: none !important;
}

/* Show and style the title inside the ibox-content */
.incident-title.insidebox {
    display: block !important;
}

.incident-title.insidebox h1 {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #4A4A49 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Incident header type styling */
.incident-header-type {
    color: #ffffff !important;
}

.incident-header-type span {
    color: #ffffff !important;
}

/* Add margin-top to incident updates row */
.row.incident-updates {
    margin-top: 15px !important;
}

.ibox-title {
    position: relative !important;
}

/* Incident header date in ibox-title only (scoped) */
.ibox-title .incident-header-date {
    color: #ffffff !important;
}

/* Align Start, End, Duration to the right */
.row.incident-updates .col-sm-6:last-child {
    text-align: right !important;
}

/* ============================================================
INCIDENT UPDATE PANELS - Icon & Styling Overhaul
============================================================ */

/* APPLY TT HOVES PRO TO ALL UPDATE ELEMENTS */
.incident-update,
.incident-update .panel-heading,
.incident-update .panel-heading-text,
.incident-update .panel-heading-date,
.incident-update .panel-body,
.incident-update .panel-body-date,
.incident-update .panel-body-text,
.incident-update .panel-body-text p,
.incident-update .panel-body-text font,
.incident-update .panel-body-text span {
    font-family: "TT Hoves Pro Variable", sans-serif !important;
}

/* 1. HIDE NATIVE ICONS & USE CSS-DEFINED STATUS ICONS */
.incident-update .panel-heading i.fa {
    display: none !important;
}

/* Investigating icon */
.incident-update-investigating .panel-heading::before {
    content: "" !important;
    background-image: url('https://statuscastsaprdeast.blob.core.windows.net/pages/21403/c1b4a4cb44d741a88cec4e1c5ddc23d8');
    background-size: 20px 20px;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 8px;
    vertical-align: middle;
}

/* Identified icon */
.incident-update-identified .panel-heading::before {
    content: "" !important;
    background-image: url('https://statuscastsaprdeast.blob.core.windows.net/pages/21403/1d4db84885b9419390e2c408c34ebe47');
    background-size: 20px 20px;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 8px;
    vertical-align: middle;
}

/* Monitoring icon */
.incident-update-monitoring .panel-heading::before {
    content: "" !important;
    background-image: url('https://statuscastsaprdeast.blob.core.windows.net/pages/21403/90a4a5e94c5046158cb8aa26eb79e613');
    background-size: 20px 20px;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 8px;
    vertical-align: middle;
}

/* Closed/Resolved icon */
.incident-update-closed .panel-heading::before {
    content: "" !important;
    background-image: url('https://statuscastsaprdeast.blob.core.windows.net/pages/21403/a8dea9fd2d3045a29c856ece32270a19');
    background-size: 20px 20px;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 8px;
    vertical-align: middle;
}

/* 2. PANEL HEADING STYLING */
.incident-update .panel-heading {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    padding: 12px 16px !important;
    background-color: #F4EEEC !important;
}

.incident-update .panel-heading-text {
    color: #1C1816 !important;
    font-weight: 600 !important;
}

/* 3. DATES IN HEADING - Positioned Right */
.incident-update .panel-heading-date {
    color: ##1C1816 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    position: absolute !important;
    right: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 4. PANEL BODY TEXT STYLING */
.incident-update .panel-body {
    background-color: #ffffff !important;
    padding: 16px !important;
}

.incident-update .panel-body-date {
    display: none !important;
}

/* FORCE ALL TEXT TO OUR STYLE */
.incident-update .panel-body-text,
.incident-update .panel-body-text p,
.incident-update .panel-body-text font,
.incident-update .panel-body-text span {
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #4A4A49 !important;
    line-height: 140% !important;
}

/* STRIP INLINE STYLES FROM FONT TAGS */
.incident-update .panel-body font[color] {
    color: #4A4A49 !important;
}

/* LINKS - FORCE KINETIC PURPLE AND OVERRIDE EVERYTHING */
.incident-update .panel-body-text a,
.incident-update .panel-body a,
.incident-update a {
    color: #0067D1 !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
    background-color: transparent !important;
}

.incident-update .panel-body-text a:hover,
.incident-update .panel-body a:hover,
.incident-update a:hover {
    color: #7A28E2 !important;
    font-weight: 600 !important;
}

/* Override any inline font tags */
.incident-update .panel-body font {
    color: #4A4A49 !important;
}

/* ============================================================
SUBSCRIBE TO INCIDENT BUTTON (Match Load More Button Style)
============================================================ */

#subscribe-incident-modal,
.btn-subscribe-to-incident {
    box-sizing: border-box !important;
    display: inline-flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 8px 24px !important;
    min-width: auto !important;
    height: auto !important;
    min-height: 36px !important;
    border: 2px solid #0067D1 !important;
    border-radius: 5px !important;
    background-color: #ffffff !important;
    font-family: 'TT Hoves Pro Variable', sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 140% !important;
    color: #000000 !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
    cursor: pointer !important;
}

#subscribe-incident-modal:hover,
.btn-subscribe-to-incident:hover {
    background-color: #0067D1 !important;
    color: #ffffff !important;
    text-decoration: none !important;
    border-color: #0067D1 !important;
    font-weight: 800 !important;
}

/* Unsubscribe button - Match button style with red (#ff282d) */
.btn-white.unsubscribe {
    border: 2px solid #ff282d !important;
    border-radius: 5px !important;
    background-color: #ffffff !important;
    color: #000000 !important;
    font-weight: 600 !important;
    padding: 8px 24px !important;
    min-height: 36px !important;
    transition: all 0.15s ease !important;
    font-family: "TT Hoves Pro Variable", sans-serif !important;
}

.btn-white.unsubscribe:hover {
    background-color: #ff282d !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    border-color: #ff282d !important;
}

/* Update button - Match Fastly Blue Button Style */
button[type="submit"].btn-primary.ladda-button {
    border: 2px solid #0067D1 !important;
    border-radius: 5px !important;
    background-color: #ffffff !important;
    color: #000000 !important;
    font-weight: 600 !important;
    padding: 8px 24px !important;
    min-height: 36px !important;
    transition: all 0.15s ease !important;
    font-family: "TT Hoves Pro Variable", sans-serif !important;
}

button[type="submit"].btn-primary.ladda-button:hover {
    background-color: #0067D1 !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    border-color: #0067D1 !important;
}

/* ============================================================
SUBSCRIPTION FORM STYLING (TT Hoves Pro & Body Text Color)
============================================================ */

/* Form labels (h4 tags) */
.statuspage-subscription-fullname h4,
.statuspage-subscription-email h4,
.form-group h4 {
    font-family: "TT Hoves Pro Variable", sans-serif !important;
    color: #3A4245 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
}

/* Form inputs */
.statuspage-subscription-fullname .form-control,
.statuspage-subscription-email .form-control,
.form-group .form-control {
    font-family: "TT Hoves Pro Variable", sans-serif !important;
    color: #3A4245 !important;
    font-size: 14px !important;
    border: 1px solid #DFDCDC !important;
    border-radius: 4px !important;
}

/* Input placeholder text */
.form-control::placeholder {
    color: #B2B2B2 !important;
}

/* Readonly input styling */
.form-control[readonly] {
    background-color: #F5F5F5 !important;
    color: #3A4245 !important;
}

/* ============================================================
OVERRIDE INLINE STYLES ON COMPONENT SELECTS
============================================================ */

#input-componentId,
#input-components {
    min-height: 38px !important;
    max-height: 1000px !important;
    height: auto !important;
    overflow: visible !important;
    white-space: wrap !important;
    display: flex !important;
    flex-wrap: wrap !important;
}

.input-componentId .pill,
.input-components .pill {
    display: inline-flex !important;
    align-items: center !important;
    background-color: #f5f5f5 !important;
    border: 1px solid #DFDCDC !important;
    border-radius: 4px !important;
    padding: 6px 12px !important;
    margin-right: 8px !important;
    margin-bottom: 8px !important;
    font-family: "TT Hoves Pro Variable", sans-serif !important;
    font-size: 14px !important;
    color: #3A4245 !important;
}

.input-componentId .pill img,
.input-components .pill img {
    width: 16px !important;
    height: 16px !important;
    margin-right: 6px !important;
}

/* ============================================================
REMOVE ALL INDENTATION FROM DROPDOWNS
============================================================ */

/* Kill margin-left on all dropdown items */
.select-dropdown *,
.components-dropdown *,
#input-componentId *,
#input-components * {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* Ensure parent containers don't indent */
.select-dropdown,
.components-dropdown,
#input-componentId,
#input-components {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* Reset all list levels */
.select-dropdown li,
.components-dropdown li,
#input-componentId li,
#input-components li {
    margin-left: 0 !important;
    padding-left: 0 !important;
    list-style: none !important;
}

/* Remove transform/translate if present */
[style*="transform: translateX"],
[style*="margin-left"] {
    margin-left: 0 !important;
    transform: none !important;
}
/* ============================================================
COMPONENT DROPDOWN - REMOVE CHECKBOX INDENTATION
============================================================ */

/* Remove margin from checkbox */
.check-sm.mr-2 {
    margin-right: 0 !important;
}

/* Tight spacing between checkbox and label */
#input-componentId .btn-link,
#input-components .btn-link,
.select-dropdown .btn-link,
.components-dropdown .btn-link {
    padding: 4px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

/* Kill indentation on child items */
.collapse,
[id^="collapse-"] {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

[id^="collapse-"] > li,
[id^="collapse-"] > div {
    margin-left: 0 !important;
    padding-left: 0 !important;
}