/* /Layout/AuthLayout.razor.rz.scp.css */
.auth-page[b-gvkdvi26zq] {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #10161d;
}

.auth-bg[b-gvkdvi26zq] {
    position: absolute;
    inset: 0;
    background-image: url('/images/login-bg.png');
    background-size: cover;
    /* "left top" (not "center"): the source photo's Horizon56 logo sits right in the
       top-left corner. "cover" crops whichever axis overflows to fill the viewport — on a
       wide viewport that's top/bottom, on a narrow/tall one it's left/right — and centered
       cropping was cutting the logo off either way. Anchoring to the corner it actually
       lives in means only the far (bottom-right) side ever gets cropped, never the logo. */
    background-position: left top;
    background-repeat: no-repeat;
    /* Scale from that same corner, not the center (the default) — a center-origin scale
       pushes the corner-anchored logo out of the viewport as it grows, undoing the
       background-position fix above. */
    transform-origin: left top;
    /* Slow, barely-there drift so the photo doesn't feel like a static screenshot. */
    animation: bg-drift-b-gvkdvi26zq 24s ease-in-out infinite alternate;
}

@keyframes bg-drift-b-gvkdvi26zq {
    /* transform-origin: left top means scale() alone never moves the pinned top-left
       corner (where the logo sits) — only translate() does, so the translate component
       needs real amplitude on both axes or the logo area reads as frozen while the rest
       of the photo drifts around it. */
    from { transform: scale(1)    translate(0%, 0%); }
    to   { transform: scale(1.05) translate(1.8%, 1%); }
}

.auth-scrim[b-gvkdvi26zq] {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(9, 13, 18, 0.45) 0%, rgba(9, 13, 18, 0.78) 45%);
}

/* The source photo has static concentric rings baked in, centered on the rig
   (~67%/45% of this photo's frame). These overlay live, pulsing rings in the same spot —
   an animated "signal ping" that ties the login screen to the dashboard's own
   uptime-monitoring theme instead of just reusing the photo as flat decoration. */
.auth-radar[b-gvkdvi26zq] {
    position: absolute;
    left: 67%;
    top: 45%;
    width: 1px;
    height: 1px;
}

.ring[b-gvkdvi26zq] {
    position: absolute;
    left: 0;
    top: 0;
    width: 3vmin;
    height: 3vmin;
    margin: -1.5vmin 0 0 -1.5vmin;
    border-radius: 50%;
    border: 1px solid rgba(217, 121, 63, 0.65);
    box-shadow: 0 0 12px rgba(217, 121, 63, 0.25);
    transform: scale(1);
    opacity: 0;
    animation: radar-ping-b-gvkdvi26zq 4.5s cubic-bezier(0.2, 0.6, 0.4, 1) infinite;
}

.ring-2[b-gvkdvi26zq] { animation-delay: 1.1s; }
.ring-3[b-gvkdvi26zq] { animation-delay: 2.2s; }
.ring-4[b-gvkdvi26zq] { animation-delay: 3.3s; }

@keyframes radar-ping-b-gvkdvi26zq {
    0%   { transform: scale(1); opacity: 0; }
    12%  { opacity: 0.9; }
    100% { transform: scale(14); opacity: 0; }
}

.auth-content[b-gvkdvi26zq] {
    position: relative;
    z-index: 1;
    padding: 1.5rem;
    width: 100%;
    display: flex;
    justify-content: center;
}

@media (prefers-reduced-motion: reduce) {
    .auth-bg[b-gvkdvi26zq], .ring[b-gvkdvi26zq] {
        animation: none;
    }
}
/* /Layout/MainLayout.razor.rz.scp.css */
.page[b-ut1r1pamzb] {
    position: relative;
    display: flex;
    min-height: 100vh;
}

.sidebar[b-ut1r1pamzb] {
    width: 264px;
    flex-shrink: 0;
    background: var(--h56-navy);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
}

main[b-ut1r1pamzb] {
    flex: 1;
    min-width: 0;
    background: var(--h56-bg);
}

.top-bar[b-ut1r1pamzb] {
    display: flex;
    justify-content: flex-end;
    padding: 0.85rem 2.5rem 0;
}

.content[b-ut1r1pamzb] {
    padding: 1rem 2.5rem 2rem;
}
/* /Layout/NavMenu.razor.rz.scp.css */
.brand[b-c63ip71jic] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.5rem 1.25rem 1.75rem;
}

.brand-logo[b-c63ip71jic] {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    background: var(--h56-accent);
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.brand-name[b-c63ip71jic] {
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.2;
}

.brand-sub[b-c63ip71jic] {
    color: var(--h56-nav-label);
    font-size: 0.65rem;
    letter-spacing: 0.06em;
    font-weight: 600;
}

.module-switcher[b-c63ip71jic] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0 0.75rem 1rem;
}

.module-tab[b-c63ip71jic] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    border: none;
    border-radius: 0.5rem;
    padding: 0.6rem 0.75rem;
    background: transparent;
    color: var(--h56-nav-label);
    font-size: 0.82rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.module-tab:hover[b-c63ip71jic] {
    background: rgba(255, 255, 255, 0.06);
}

.module-tab.active[b-c63ip71jic] {
    background: var(--h56-accent);
    color: #fff;
}

.module-icon[b-c63ip71jic] {
    width: 1rem;
    text-align: center;
    flex-shrink: 0;
}

.nav-section-label[b-c63ip71jic] {
    color: var(--h56-nav-label);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 0 1.25rem;
    margin: 0.75rem 0 0.5rem;
}

.nav[b-c63ip71jic] {
    padding: 0 0.75rem;
}

.nav-icon[b-c63ip71jic] {
    width: 1rem;
    text-align: center;
    opacity: 0.8;
}

.nav-badge[b-c63ip71jic] {
    margin-left: auto;
    background: var(--h56-accent);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.05rem 0.45rem;
    border-radius: 1rem;
}

.customers-nav[b-c63ip71jic] {
    /* Real customer list can be 30+ long — without this, content taller than the sidebar's
       fixed 100vh overflows past its painted dark background, exposing the page's light
       background behind it (looked like the sidebar going half-black-half-white). */
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    margin-bottom: 1rem;
    /* This <nav> also carries Bootstrap's own .nav (flex-wrap:wrap) and .flex-column
       (flex-direction:column !important) utility classes — combined with the constrained
       height above, that wraps items into side-by-side columns instead of scrolling one
       column. Force single-column scrolling instead. */
    flex-wrap: nowrap;
}

.customer-dot[b-c63ip71jic] {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.night-mode-toggle[b-c63ip71jic] {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem 1.5rem;
    color: #c3ccd6;
    font-size: 0.85rem;
}

.switch[b-c63ip71jic] {
    position: relative;
    display: inline-block;
    width: 2.25rem;
    height: 1.25rem;
}

.switch input[b-c63ip71jic] {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider[b-c63ip71jic] {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: #4b5563;
    border-radius: 1rem;
    transition: 0.15s;
}

.slider[b-c63ip71jic]::before {
    position: absolute;
    content: "";
    height: 0.95rem;
    width: 0.95rem;
    left: 0.15rem;
    bottom: 0.15rem;
    background-color: white;
    border-radius: 50%;
    transition: 0.15s;
}

input:checked + .slider[b-c63ip71jic] {
    background-color: var(--h56-accent);
}

input:checked + .slider[b-c63ip71jic]::before {
    transform: translateX(1rem);
}
/* /Layout/UserMenu.razor.rz.scp.css */
.user-menu[b-nnhbzfm7mm] {
    position: relative;
    display: flex;
    align-items: center;
}

.user-avatar-btn[b-nnhbzfm7mm] {
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    border-radius: 50%;
    line-height: 0;
}

.user-avatar-btn:hover .user-avatar[b-nnhbzfm7mm] {
    box-shadow: 0 0 0 2px var(--h56-accent);
}

.user-avatar[b-nnhbzfm7mm] {
    width: 2.1rem;
    height: 2.1rem;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--h56-accent);
    color: #fff;
    font-weight: 700;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-dropdown-backdrop[b-nnhbzfm7mm] {
    position: fixed;
    inset: 0;
    z-index: 19;
    background: transparent;
}

/* Collapsed by default — only the avatar shows in the top bar; clicking it opens this
   panel with the full name/email and sign-out, rather than always showing everything inline. */
.user-dropdown[b-nnhbzfm7mm] {
    position: absolute;
    top: calc(100% + 0.6rem);
    right: 0;
    z-index: 20;
    width: 15rem;
    background: var(--h56-surface);
    border: 1px solid var(--h56-card-border);
    border-radius: 0.6rem;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
    padding: 0.9rem;
}

.user-dropdown-header[b-nnhbzfm7mm] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.user-info[b-nnhbzfm7mm] {
    line-height: 1.25;
    min-width: 0;
}

.user-name[b-nnhbzfm7mm] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--h56-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-email[b-nnhbzfm7mm] {
    font-size: 0.72rem;
    color: var(--h56-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-dropdown-divider[b-nnhbzfm7mm] {
    height: 1px;
    background: var(--h56-card-border);
    margin: 0.75rem 0;
}

.user-signout[b-nnhbzfm7mm] {
    display: block;
    width: 100%;
    text-align: left;
    border: none;
    background: none;
    padding: 0.3rem 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: #c0392b;
    cursor: pointer;
}

.user-signout:hover[b-nnhbzfm7mm] {
    text-decoration: underline;
}
/* /Pages/AvailabilityHistory.razor.rz.scp.css */
.pagination-row[b-99b745u6xd] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1rem;
    font-size: 0.85rem;
}
/* /Pages/AvailabilityOverview.razor.rz.scp.css */
.header-actions[b-obwacg2hbk] {
    display: flex;
    gap: 0.75rem;
}

.urls-toggle[b-obwacg2hbk] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border: none;
    background: none;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.urls-toggle:hover[b-obwacg2hbk] {
    color: var(--h56-accent);
}

.urls-toggle-caret[b-obwacg2hbk] {
    font-size: 0.7rem;
}

.customer-row[b-obwacg2hbk] {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    padding: 1.1rem 1.25rem;
}

.customer-row-main[b-obwacg2hbk] {
    display: flex;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
    border-radius: 0.6rem;
    margin: -0.4rem;
    padding: 0.4rem;
}

.customer-row-main:hover[b-obwacg2hbk] {
    background: var(--h56-bg);
}

.customer-urls[b-obwacg2hbk] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding-left: calc(2.75rem + 1rem);
}

.env-url-row[b-obwacg2hbk] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: fit-content;
}

.env-url-chip[b-obwacg2hbk] {
    display: block;
    width: fit-content;
    font-size: 0.75rem;
    color: var(--h56-text-muted);
    background: var(--h56-bg);
    border: 1px solid var(--h56-card-border);
    padding: 0.2rem 0.6rem;
    border-radius: 0.4rem;
    text-decoration: none;
}

.env-url-chip:hover[b-obwacg2hbk] {
    color: var(--h56-text);
    border-color: var(--h56-accent);
}

/* Per-URL SLA status — green at 100%, yellow 80-99.99%, red below 80% */
.env-url-chip.sla-full[b-obwacg2hbk] {
    border-color: var(--h56-green);
    background: var(--h56-green-bg);
    color: var(--h56-green);
}

.env-url-chip.sla-warning[b-obwacg2hbk] {
    border-color: var(--h56-amber-text);
    background: var(--h56-amber-bg);
    color: var(--h56-amber-text);
}

.env-url-chip.sla-critical[b-obwacg2hbk] {
    border-color: var(--h56-red-text);
    background: var(--h56-red-bg);
    color: var(--h56-red-text);
}

.env-url-pct[b-obwacg2hbk] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--h56-text-muted);
    white-space: nowrap;
}

/* /Pages/IntegrationMap.razor.rz.scp.css */
.history-table td:nth-child(4)[b-st8ygkzs0j] {
    text-align: center;
    color: var(--h56-text-muted);
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}
/* /Pages/Login.razor.rz.scp.css */
.auth-card[b-kcsjjobivj] {
    /* Frosted glass over the photo background rather than a solid card — the theme's light
       surface color would look flat/disconnected against a full-bleed photo. */
    background: rgba(18, 24, 31, 0.55);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #fff;
    border-radius: 0.9rem;
    padding: 2.5rem 3rem;
    text-align: center;
    width: 100%;
    max-width: 380px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}

.auth-logo-wrap[b-kcsjjobivj] {
    position: relative;
    width: 3rem;
    height: 3rem;
    margin: 0 auto 1.25rem;
}

/* A live pulsing glow behind the badge — the "moving logo" ask, and it echoes the
   radar pings in the background photo instead of being an unrelated flourish. */
.auth-logo-wrap[b-kcsjjobivj]::before {
    content: "";
    position: absolute;
    inset: -0.4rem;
    border-radius: 0.9rem;
    background: var(--h56-accent);
    opacity: 0.55;
    filter: blur(10px);
    animation: logo-pulse-b-kcsjjobivj 2.6s ease-in-out infinite;
}

.auth-logo[b-kcsjjobivj] {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 0.6rem;
    background: var(--h56-accent);
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25) inset;
}

@keyframes logo-pulse-b-kcsjjobivj {
    0%, 100% { transform: scale(0.92); opacity: 0.45; }
    50%      { transform: scale(1.18); opacity: 0.8; }
}

.auth-card h1[b-kcsjjobivj] {
    font-size: 1.35rem;
    margin: 0 0 0.5rem;
    color: #fff;
}

.auth-subtitle[b-kcsjjobivj] {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    margin: 0 0 1.75rem;
}

.auth-signin-btn[b-kcsjjobivj] {
    display: block;
    width: 100%;
    text-align: center;
    text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
    .auth-logo-wrap[b-kcsjjobivj]::before {
        animation: none;
        opacity: 0.55;
    }
}
/* /Pages/MonthlyTrend.razor.rz.scp.css */
.trend-table[b-etnjxn7vdw] {
    width: 100%;
    min-width: max-content;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.trend-table th[b-etnjxn7vdw] {
    text-align: left;
    color: var(--h56-text-muted);
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.65rem 0.85rem;
    border-bottom: 1px solid var(--h56-card-border);
    white-space: nowrap;
}

.trend-table td[b-etnjxn7vdw] {
    padding: 0.5rem 0.85rem;
    border-bottom: 1px solid var(--h56-card-border);
}

.trend-cell[b-etnjxn7vdw] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.trend-customer-col[b-etnjxn7vdw] {
    position: sticky;
    left: 0;
    background: var(--h56-surface);
    text-align: left;
    white-space: nowrap;
}

.trend-customer[b-etnjxn7vdw] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.85rem;
    font-weight: 600;
}

.trend-avatar[b-etnjxn7vdw] {
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 0.35rem;
    font-size: 0.6rem;
    flex-shrink: 0;
}

.trend-full[b-etnjxn7vdw] {
    color: var(--h56-green);
}

.trend-critical[b-etnjxn7vdw] {
    color: var(--h56-red-text);
}

.trend-empty[b-etnjxn7vdw] {
    color: var(--h56-text-muted);
}

.trend-overall-row[b-etnjxn7vdw] {
    font-weight: 700;
}

.trend-overall-row .trend-customer-col[b-etnjxn7vdw] {
    background: var(--h56-bg);
}

/* Scoped to this page only (Blazor CSS isolation) — centers the "VIEW: Overall + calendar"
   group as a unit, instead of the default period-row layout other pages use (label left,
   an action pushed to the far right via margin-left:auto). */
.period-row[b-etnjxn7vdw] {
    justify-content: center;
}

.trend-reason-cell[b-etnjxn7vdw] {
    padding: 0.5rem 0.85rem;
    min-width: 16rem;
}

.trend-reason-row[b-etnjxn7vdw] {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0.15rem 0;
    font-size: 0.78rem;
    white-space: nowrap;
}

.trend-reason-url[b-etnjxn7vdw] {
    font-weight: 600;
    color: var(--h56-text);
}

.trend-reason-pct[b-etnjxn7vdw] {
    color: var(--h56-red-text);
    font-variant-numeric: tabular-nums;
}

.trend-reason-text[b-etnjxn7vdw] {
    color: var(--h56-text-muted);
    font-size: 0.78rem;
    min-width: 12rem;
    white-space: normal;
}

.mini-calendar[b-etnjxn7vdw] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background: var(--h56-bg);
    border: 1px solid var(--h56-card-border);
    border-radius: 0.75rem;
    padding: 0.6rem 0.7rem;
    min-width: 200px;
}

.mini-calendar-header[b-etnjxn7vdw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.15rem;
}

.mini-calendar-year[b-etnjxn7vdw] {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--h56-text);
}

.mini-calendar-nav[b-etnjxn7vdw] {
    border: none;
    background: none;
    color: var(--h56-text-muted);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.15rem 0.45rem;
    border-radius: 0.35rem;
}

.mini-calendar-nav:hover:not(:disabled)[b-etnjxn7vdw] {
    background: var(--h56-surface-hover);
    color: var(--h56-text);
}

.mini-calendar-nav:disabled[b-etnjxn7vdw] {
    opacity: 0.3;
    cursor: not-allowed;
}

.mini-calendar-grid[b-etnjxn7vdw] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.3rem;
}

.mini-calendar-month[b-etnjxn7vdw] {
    border: 1px solid transparent;
    background: var(--h56-surface);
    color: var(--h56-text);
    border-radius: 0.4rem;
    padding: 0.3rem 0;
    font-size: 0.7rem;
    cursor: pointer;
}

.mini-calendar-month:hover[b-etnjxn7vdw] {
    border-color: var(--h56-accent);
}

.mini-calendar-month.active[b-etnjxn7vdw] {
    background: var(--h56-accent);
    border-color: var(--h56-accent);
    color: #fff;
    font-weight: 700;
}
/* /Pages/OnboardEnvironment.razor.rz.scp.css */
.onboard-form[b-4emlrlkmlk] {
    padding: 1.5rem 1.75rem;
}

.onboard-grid[b-4emlrlkmlk] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.1rem 1.5rem;
}

.onboard-field[b-4emlrlkmlk] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.onboard-field-wide[b-4emlrlkmlk] {
    grid-column: span 1;
}

.onboard-field label[b-4emlrlkmlk] {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--h56-text);
}

.onboard-field select:disabled[b-4emlrlkmlk],
.onboard-field input:disabled[b-4emlrlkmlk] {
    opacity: 0.5;
    cursor: not-allowed;
}

.onboard-hints[b-4emlrlkmlk] {
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    color: var(--h56-text-muted);
    font-size: 0.78rem;
}

.onboard-actions[b-4emlrlkmlk] {
    margin-top: 1.25rem;
    display: flex;
    gap: 0.6rem;
}

@media (max-width: 900px) {
    .onboard-grid[b-4emlrlkmlk] {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* /Pages/PendingApproval.razor.rz.scp.css */
.approval-card[b-axn9zzfr54] {
    padding: 1.25rem;
}

.approval-header[b-axn9zzfr54] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.env-edit-list[b-axn9zzfr54] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.env-edit-row[b-axn9zzfr54] {
    border: 1px solid var(--h56-card-border);
    border-radius: 0.6rem;
    padding: 0.65rem 0.85rem;
}

.env-edit-top[b-axn9zzfr54] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.env-url[b-axn9zzfr54] {
    flex: 1;
    min-width: 0;
    font-size: 0.85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pct-preview[b-axn9zzfr54] {
    font-size: 0.85rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    padding: 0.15rem 0.55rem;
    border-radius: 0.4rem;
}

.pct-preview.sla-full[b-axn9zzfr54] {
    color: var(--h56-green);
    background: var(--h56-green-bg);
}

.pct-preview.sla-warning[b-axn9zzfr54] {
    color: var(--h56-amber-text);
    background: var(--h56-amber-bg);
}

.pct-preview.sla-critical[b-axn9zzfr54] {
    color: var(--h56-red-text);
    background: var(--h56-red-bg);
}

.recorded-date[b-axn9zzfr54] {
    font-size: 0.7rem;
    color: var(--h56-text-muted);
    white-space: nowrap;
}

.impact-fields[b-axn9zzfr54] {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin-top: 0.65rem;
    padding-top: 0.65rem;
    border-top: 1px dashed var(--h56-card-border);
}

.impact-window-row[b-axn9zzfr54] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.impact-window-row + .impact-window-row[b-axn9zzfr54] {
    padding-top: 0.65rem;
    border-top: 1px dotted var(--h56-card-border);
}

.impact-fields-actions[b-axn9zzfr54] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.impact-fields label[b-axn9zzfr54] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.7rem;
    color: var(--h56-text-muted);
}

.impact-fields input[type="datetime-local"][b-axn9zzfr54] {
    border: 1px solid var(--h56-card-border);
    border-radius: 0.4rem;
    padding: 0.3rem 0.5rem;
    font-size: 0.8rem;
    background: var(--h56-surface);
    color: var(--h56-text);
}

.reason-input[b-axn9zzfr54] {
    flex: 1;
    min-width: 12rem;
    border: 1px solid var(--h56-card-border);
    border-radius: 0.4rem;
    padding: 0.4rem 0.6rem;
    font-size: 0.8rem;
    background: var(--h56-surface);
    color: var(--h56-text);
    align-self: flex-end;
}

.impact-saved-note[b-axn9zzfr54] {
    margin-top: 0.5rem;
    font-size: 0.78rem;
    color: var(--h56-green);
}

.impact-log-list[b-axn9zzfr54] {
    margin: 0.35rem 0;
    padding-left: 1.1rem;
    font-size: 0.78rem;
    color: var(--h56-text-muted);
}

.impact-log-list li[b-axn9zzfr54] {
    margin-bottom: 0.15rem;
}

.approval-actions[b-axn9zzfr54] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
}