.dock-view {
    position: fixed;
    bottom: 5px;
    right: 50px;
    left: 100px;
    border-radius: 15px 15px 0 0;
}

.ai-border {
    border-radius: 5px;
    border: 2px solid var(--ai-gradient-color-1);
    box-shadow: 0 0px 15px var(--ai-gradient-color-1), inset 0 0px 15px var(--ai-gradient-color-1);
    animation: colorTransition 2s ease-in-out infinite;
}

/* V2 AI-pill glow — applied to a CFChip while an agent investigation is in
   flight. The earlier pass reused .cf-ai-thinking's keyframe and was barely
   visible against the dark navy canvas. This is a dedicated pulse with
   three layered box-shadows that breathe in unison:

     1. crisp ring (1.5–2px spread) sits on the chip outline at 75–95% opacity
     2. mid halo (4–10px blur) anchors the chip's "lit" footprint at 50–80%
     3. far aura (14–28px blur, 1–4px spread) gives the room a soft bloom

   Hue is locked to two brand AI tokens — color-1 (pink) at rest, color-3
   (purple) at peak. Dropping color-2 (orange) avoids the rainbow rotation
   the previous keyframe produced, which read as "loading bar," not as
   "thinking." Sine-like easing (0.45/0/0.55/1) gives organic respiration
   instead of mechanical ticking. 2.0s cycle = calm breath cadence.

   Border-radius is intentionally not set — the host CFChip already has
   border-radius: var(--cf-radius-full), so the shadow halo naturally
   follows the pill outline instead of being clamped to a rectangle. */
.cf-v2-ai-pill-glow {
    animation: cf-v2-ai-pill-pulse 2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

@keyframes cf-v2-ai-pill-pulse {
    0%, 100% {
        box-shadow:
            0 0 0 1.5px color-mix(in oklab, var(--ai-gradient-color-1, #f32170) 75%, transparent),
            0 0 6px 0 color-mix(in oklab, var(--ai-gradient-color-1, #f32170) 55%, transparent),
            0 0 16px 1px color-mix(in oklab, var(--ai-gradient-color-3, #cf23cf) 35%, transparent);
    }
    50% {
        box-shadow:
            0 0 0 2px color-mix(in oklab, var(--ai-gradient-color-3, #cf23cf) 95%, transparent),
            0 0 12px 1px color-mix(in oklab, var(--ai-gradient-color-3, #cf23cf) 80%, transparent),
            0 0 28px 4px color-mix(in oklab, var(--ai-gradient-color-1, #f32170) 55%, transparent);
    }
}

/* Static fallback retains the dual-layer + dual-hue treatment so the chip
   still reads as "AI surface" without animation. Honors users who set
   prefers-reduced-motion or platform-level motion reduction. */
@media (prefers-reduced-motion: reduce) {
    .cf-v2-ai-pill-glow {
        animation: none;
        box-shadow:
            0 0 0 1.5px color-mix(in oklab, var(--ai-gradient-color-1, #f32170) 80%, transparent),
            0 0 8px 1px color-mix(in oklab, var(--ai-gradient-color-1, #f32170) 55%, transparent),
            0 0 18px 2px color-mix(in oklab, var(--ai-gradient-color-3, #cf23cf) 40%, transparent);
    }
}

@keyframes colorTransition {
    0% {
        border-color: var(--ai-gradient-color-1);
        box-shadow: 0 0px 10px var(--ai-gradient-color-1), inset 0 0px 10px var(--ai-gradient-color-1);
    }

    25% {
        border-color: var(--ai-gradient-color-2);
        box-shadow: 0 0px 15px var(--ai-gradient-color-2), inset 0 0px 15px var(--ai-gradient-color-2);
    }

    50% {
        border-color: var(--ai-gradient-color-3);
        box-shadow: 0 0px 20px var(--ai-gradient-color-3), inset 0 0px 20px var(--ai-gradient-color-3);
    }

    75% {
        border-color: var(--ai-gradient-color-4);
        box-shadow: 0 0px 15px var(--ai-gradient-color-4), inset 0 0px 15px var(--ai-gradient-color-4);
    }

    100% {
        border-color: var(--ai-gradient-color-1);
        box-shadow: 0 0px 10px var(--ai-gradient-color-1), inset 0 0px 10px var(--ai-gradient-color-1);
    }
}

.insight-error-boundary {
    --_color: var(--color, var(--cf-input-color-ErrorBorder));
    margin: var(--cf-spacing-md);
    padding: var(--cf-spacing-md);
    border: 1px solid var(--_color);
    border-radius: 4px;
    background-color: color-mix(in srgb, var(--_color) 15%, transparent);
    color: var(--cf-typography-color-Primary);
}

/* ==========================================================================
   Onboarding card — shared vocabulary for the centered single-card pages
   used by the customer-flow under BlankLayoutV2 (Register, Invite,
   GrantAccess, ConsentConfirmed). The layout owns the chrome; each page
   drops a CFCard inside this wrapper so the card is centered, has a
   sensible max-width, and renders identically across all pages.
   Lives globally because the same wrapper class appears in 4+ Razor files
   and Blazor scoped CSS would not match across components.
   ========================================================================== */

.cf-v2-onboarding-card {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    align-self: center;
}

.cf-v2-onboarding-card__brand {
    display: flex;
    justify-content: center;
}

.cf-v2-onboarding-card__brand img {
    width: 200px;
    max-width: 100%;
    height: auto;
    display: block;
}

.cf-v2-onboarding-card__success-icon {
    color: var(--cf-status-success-fg, #22c55e);
    font-size: 48px;
    line-height: 1;
}

.cf-v2-onboarding-card__error-icon {
    color: var(--cf-status-error-fg, #ef4444);
    font-size: 48px;
    line-height: 1;
}

/* ==========================================================================
   AgentUpdateBannerV2 — sits at the top of the CFAppShell main column.
   Rendered as the first child of <ChildContent> so it occupies real space in
   normal flow: when shown it pushes @Body content down by its own height,
   when hidden it disappears completely without leaving any reserved space.
   Block-level + full-width within the main grid area. Sticky so it stays
   pinned to the top of the main column when the user scrolls the page body.
   ========================================================================== */

.cf-v2-agent-update-banner {
    position: sticky;
    top: 0;
    /* Must sit above the CFAppShell topbar's stacking context (z-index 10) so
       the info tooltip — rendered inside this banner's stacking context — can
       pop above the topbar instead of being clipped under it. CFTooltip's own
       z-index (10000) is local to whichever ancestor creates the stacking
       context, so the banner is what actually controls tooltip layering here. */
    z-index: 12;
    display: block;
    width: 100%;
}

/* Square the corners (banner is flush against viewport edges) and sharpen the
   variant accent so the bar actually catches attention against the dark page
   surface. The default CFBanner gradient fades the variant tint to
   --cf-bg-elevated-1 at 30%, which reads as nearly transparent on dark themes
   — we widen the accent stop and tint the trailing color too. */
.cf-v2-agent-update-banner .cf-banner {
    border-radius: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    border-left-width: 5px;
}

.cf-v2-agent-update-banner .cf-banner[data-variant="info"] {
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--cf-status-info) 32%, var(--cf-bg-elevated-2)) 0%,
        color-mix(in srgb, var(--cf-status-info) 14%, var(--cf-bg-elevated-2)) 100%);
}

.cf-v2-agent-update-banner .cf-banner[data-variant="success"] {
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--cf-status-success) 32%, var(--cf-bg-elevated-2)) 0%,
        color-mix(in srgb, var(--cf-status-success) 14%, var(--cf-bg-elevated-2)) 100%);
}

.cf-v2-agent-update-banner .cf-banner[data-variant="warning"] {
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--cf-status-warning) 36%, var(--cf-bg-elevated-2)) 0%,
        color-mix(in srgb, var(--cf-status-warning) 16%, var(--cf-bg-elevated-2)) 100%);
}

.cf-v2-agent-update-banner .cf-banner[data-variant="error"] {
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--cf-status-error) 36%, var(--cf-bg-elevated-2)) 0%,
        color-mix(in srgb, var(--cf-status-error) 16%, var(--cf-bg-elevated-2)) 100%);
}

/* ==========================================================================
   V2 page shell — shared page padding for every top-level V2 page so padding
   is identical across the portal. Per-page classes (cf-v2-settings-page,
   cf-v2-incidents-page, …) opt into the shared rule by also carrying
   cf-v2-page. Keep this unscoped; per-page scoped CSS can only target its
   own elements.
   ========================================================================== */

.cf-v2-page,
.cf-v2-settings-page,
.cf-v2-incidents-page,
.cf-v2-gamebooks-page,
.cf-v2-agent-center-page,
.cf-v2-agent-configuration-page {
    padding: var(--cf-space-lg, 24px);
    min-height: 100%;
    box-sizing: border-box;
}

/* ==========================================================================
   V2 incident-detail two-card layout vocabulary
   Mobile (<720px): cards flow. Tablet+ (>=720px): viewport-anchored
   height, scroll lives INSIDE the tab panel/side-panel body, not on
   the card itself. Desktop (>=1180px): two columns. Lives globally —
   the gamebooks workbench page reuses these classes alongside the
   incident detail page itself, and Blazor scoped CSS does not pierce
   across components.
   ========================================================================== */

.cf-v2-incident-detail-page {
    min-width: 0;
    /* Top bar + page padding + breadcrumbs + header card + stack gaps. */
    --cf-detail-offset: 17rem;
    --cf-detail-card-height: clamp(32rem, calc(100dvh - var(--cf-detail-offset)), 42rem);
}

.cf-v2-incident-detail__loading {
    display: flex;
    flex-direction: column;
    gap: var(--cf-space-4, 1rem);
}

.cf-v2-incident-detail__content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--cf-space-4, 1rem);
    min-width: 0;
}

.cf-v2-incident-detail__card-shell {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.cf-v2-incident-detail__card-header {
    display: flex;
    flex-direction: column;
    gap: var(--cf-space-2, 0.5rem);
    min-width: 0;
}

.cf-v2-incident-detail__header-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cf-space-2, 0.5rem);
    color: var(--cf-text-secondary, inherit);
    font-size: var(--cf-text-body-sm, 0.875rem);
}

.cf-v2-incident-detail__header-metrics span {
    padding: var(--cf-space-1, 0.25rem) var(--cf-space-2, 0.5rem);
    border: 1px solid var(--cf-color-border);
    border-radius: var(--cf-radius-sm, 4px);
    background: var(--cf-color-surface-secondary, transparent);
    white-space: nowrap;
}

.cf-v2-incident-detail__side-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: var(--cf-space-3, 0.75rem);
}

.cf-v2-incident-detail__panel-loader {
    min-height: 16rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (min-width: 720px) {
    .cf-v2-incident-detail__card-header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .cf-v2-incident-detail__content-grid {
        align-items: stretch;
        grid-auto-rows: var(--cf-detail-card-height);
    }

    /* Hard-pin card shells so tab content changes never push layout. */
    .cf-v2-incident-detail__card-shell {
        min-width: 0;
        height: var(--cf-detail-card-height);
        min-height: 0;
        max-height: var(--cf-detail-card-height);
    }

    /* Side panel body: its scroll surface is here, not on the card. */
    .cf-v2-incident-detail__side-panel {
        flex: 1 1 auto;
        height: 100%;
        min-height: 0;
        min-width: 0;
        overflow-y: auto;
    }
}

@media (min-width: 1180px) {
    .cf-v2-incident-detail__content-grid {
        grid-template-columns: minmax(0, 1fr) minmax(22rem, 30rem);
    }
}

/* ==========================================================================
   V2 Gamebooks Activity — shared grid vocabulary
   The column-header row in the listing and every history row use the SAME
   grid-template-columns so cells line up like a table. Lives globally
   because the header row is declared in the listing component but the row
   bodies are declared in a sibling component — Blazor scoped CSS doesn't
   pierce that boundary.

   Action column is a FIXED reserve so a row without a button still aligns
   with rows that have one. Workspace is the only flex track.
   ========================================================================== */
.cf-v2-gamebooks-grid {
    display: grid;
    align-items: center;
    column-gap: var(--cf-space-3, 0.75rem);
    width: 100%;
    min-width: 0;

    /* xs (<560px): mobile-first card-row. Two priority cells visible —
       status + id share the top track, workspace folds into a second wrap
       row, action and chevron stay on the right. We use grid-template-areas
       to wrap intelligently rather than 0px-collapsing columns, which
       guarantees workspace stays readable on phones. */
    grid-template-columns:
        minmax(0, auto)         /* status */
        minmax(0, 1fr)          /* id */
        auto                    /* action */
        1.25rem;                /* chevron */
    grid-template-areas:
        "status id        action chevron"
        "ws     ws        ws     ws"
        "meta   meta      meta   meta";
    row-gap: var(--cf-space-1, 0.25rem);
}

@media (min-width: 560px) {
    /* sm: surface the incident # + time on a second wrap row so workspace
       stays prominent. Action and chevron pinned right across both rows. */
    .cf-v2-gamebooks-grid {
        grid-template-columns:
            minmax(0, auto)     /* status */
            minmax(0, 1fr)      /* id */
            minmax(0, auto)     /* incident */
            minmax(0, auto)     /* time */
            7rem                /* action */
            1.25rem;            /* chevron */
        grid-template-areas:
            "status id        incident time   action chevron"
            "ws     ws        ws       ws     ws     ws";
    }
}

@media (min-width: 720px) {
    /* md: must fit at 720px - 16px padding = 44rem usable. Time is sized so
       the "LAST ACTIVITY" header reads fully — body values ("5d ago") fit in
       less room but the header label drives the minimum. */
    .cf-v2-gamebooks-grid {
        grid-template-columns:
            6rem                    /* status */
            5.5rem                  /* id */
            minmax(7rem, 9rem)      /* workspace */
            minmax(6rem, 1fr)       /* incident — flex */
            6.5rem                  /* time */
            7rem                    /* action */
            1.25rem;                /* chevron */
        grid-template-areas: "status id workspace incident time action chevron";
        row-gap: 0;
    }
}

@media (min-width: 960px) {
    /* lg: 960px - 24px padding = 58.5rem usable. Actor is capped at 12rem so
       it doesn't keep flexing past the longest expected name + avatar — slack
       on wide viewports flows to incident (the only 1fr track), since the
       incident "#number — title" composition is the longest variable text. */
    .cf-v2-gamebooks-grid {
        grid-template-columns:
            6rem                    /* status */
            5.5rem                  /* id */
            minmax(8rem, 12rem)     /* workspace */
            minmax(8rem, 1fr)       /* incident — flex */
            6.5rem                  /* time */
            minmax(10rem, 12rem)    /* actor — capped */
            7rem                    /* action */
            1.25rem;                /* chevron */
        grid-template-areas: "status id workspace incident time actor action chevron";
    }
}

/* Column header row — sits above the list, uses the same grid as rows BUT
   collapses to a single row layout: rows can wrap, headers cannot. */
.cf-v2-gamebooks-grid--header {
    padding: var(--cf-space-2, 0.5rem) var(--cf-space-3, 0.75rem);
    background-color: var(--cf-bg-elevated-1);
    border-bottom: 1px solid var(--cf-color-border);
    font-size: var(--cf-text-body-sm, 0.8125rem);
    font-weight: var(--cf-font-semibold, 600);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cf-text-secondary);
    user-select: none;

    /* Override the row's multi-row template at xs/sm — header is always
       a single row. Areas not in the row layout (ws, meta) just don't
       resolve, which is fine since those cells are display:none here. */
    grid-template-areas: "status id action chevron";
    row-gap: 0;
}

@media (min-width: 560px) {
    .cf-v2-gamebooks-grid--header {
        grid-template-areas: "status id incident time action chevron";
    }
}

@media (min-width: 720px) {
    .cf-v2-gamebooks-grid--header {
        grid-template-areas: "status id workspace incident time action chevron";
    }
}

@media (min-width: 960px) {
    .cf-v2-gamebooks-grid--header {
        grid-template-areas: "status id workspace incident time actor action chevron";
    }
}

.cf-v2-gamebooks-grid__col {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cf-v2-gamebooks-grid__col--status   { grid-area: status; }
.cf-v2-gamebooks-grid__col--id       { grid-area: id; }
/* Workspace lands in the wrap row on phones — no label needed there. md+
   re-targets it to the workspace area inline with other column heads. */
.cf-v2-gamebooks-grid__col--workspace { grid-area: ws; }
.cf-v2-gamebooks-grid__col--incident { grid-area: incident; }
.cf-v2-gamebooks-grid__col--time     { grid-area: time; }
.cf-v2-gamebooks-grid__col--actor    { grid-area: actor; }
.cf-v2-gamebooks-grid__col--action   { grid-area: action; justify-self: end; }
.cf-v2-gamebooks-grid__col--chevron  { grid-area: chevron; }

/* xs: only Status + Gamebook labels are meaningful — every other column
   is hidden in the row layout. We use display:none on the header labels
   so the header stays a single tight row even though row cells wrap below. */
.cf-v2-gamebooks-grid--header .cf-v2-gamebooks-grid__col--workspace,
.cf-v2-gamebooks-grid--header .cf-v2-gamebooks-grid__col--incident,
.cf-v2-gamebooks-grid--header .cf-v2-gamebooks-grid__col--time,
.cf-v2-gamebooks-grid--header .cf-v2-gamebooks-grid__col--actor {
    display: none;
}

@media (min-width: 560px) {
    .cf-v2-gamebooks-grid--header .cf-v2-gamebooks-grid__col--incident,
    .cf-v2-gamebooks-grid--header .cf-v2-gamebooks-grid__col--time {
        display: block;
    }
}

@media (min-width: 720px) {
    .cf-v2-gamebooks-grid--header .cf-v2-gamebooks-grid__col--workspace {
        display: block;
        grid-area: workspace;
    }
}

@media (min-width: 960px) {
    .cf-v2-gamebooks-grid--header .cf-v2-gamebooks-grid__col--actor {
        display: block;
    }
}

@media (max-width: 960px) {
    .cf-v2-page,
    .cf-v2-settings-page,
    .cf-v2-incidents-page,
    .cf-v2-gamebooks-page,
    .cf-v2-agent-center-page {
        padding: var(--cf-space-md, 16px);
    }
}

@media (max-width: 640px) {
    .cf-v2-page,
    .cf-v2-settings-page,
    .cf-v2-incidents-page,
    .cf-v2-gamebooks-page,
    .cf-v2-agent-center-page {
        padding: var(--cf-space-sm, 12px);
    }
}

/* ==========================================================================
   V2 Incidents page — mobile-first toolbar + grid helpers. Shared across
   SIEMIncidentsV2 and MultiTenantIncidentsTableV2 so both can consume the
   same vocabulary. Breakpoints: sm=560px, md=720px.
   ========================================================================== */

/* Page header row: title on the left, refresh + time filter on the right.
   Stacks on mobile, goes horizontal at sm. */
.cf-v2-incidents-page__header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--cf-space-2, 0.5rem);
    min-width: 0;
}

@media (min-width: 560px) {
    .cf-v2-incidents-page__header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: var(--cf-space-3, 0.75rem);
    }
}

.cf-v2-incidents-page__toolbar {
    display: flex;
    gap: var(--cf-space-2, 0.5rem);
    align-items: center;
    flex-wrap: wrap;
}

.cf-v2-incidents-page__toolbar-divider {
    display: none;
    width: 1px;
    align-self: stretch;
    background-color: var(--cf-color-border);
    margin-inline: var(--cf-space-1, 0.25rem);
}

@media (min-width: 560px) {
    .cf-v2-incidents-page__toolbar-divider {
        display: block;
    }
}

.cf-v2-incidents-page__update-strip {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: var(--cf-space-2, 0.5rem);
    padding: var(--cf-space-2, 0.5rem) var(--cf-space-3, 0.75rem);
    background-color: color-mix(in srgb, var(--cf-color-primary, #2557f9) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--cf-color-primary, #2557f9) 28%, transparent);
    border-radius: var(--cf-radius-md, 8px);
    color: var(--cf-color-primary, #2557f9);
    font: inherit;
    font-weight: 500;
    cursor: pointer;
    transition:
        background-color 0.15s ease-out,
        border-color 0.15s ease-out,
        transform 0.15s ease-out;
}

.cf-v2-incidents-page__update-strip:hover {
    background-color: color-mix(in srgb, var(--cf-color-primary, #2557f9) 16%, transparent);
    border-color: color-mix(in srgb, var(--cf-color-primary, #2557f9) 44%, transparent);
}

.cf-v2-incidents-page__update-strip:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--cf-color-primary, #2557f9) 40%, transparent);
    outline-offset: 2px;
}

.cf-v2-incidents-page__update-strip .cf-icon {
    flex-shrink: 0;
}

/* Auto-refresh control — grouped icon button + menu chevron + timestamp. */
.cf-v2-auto-refresh {
    display: inline-flex;
    align-items: center;
    gap: var(--cf-space-2, 0.5rem);
}

.cf-v2-auto-refresh__group {
    display: inline-flex;
    align-items: stretch;
    gap: 0;
}

.cf-v2-auto-refresh__group .cf-v2-auto-refresh__button.cf-btn {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right-width: 0;
    padding-inline: var(--cf-space-2, 0.5rem);
    transition:
        background-color 0.15s ease-out,
        border-color 0.15s ease-out,
        color 0.15s ease-out;
}

.cf-v2-auto-refresh__group .cf-v2-auto-refresh__button--active.cf-btn {
    background-color: color-mix(in srgb, var(--cf-color-primary, #2557f9) 10%, transparent);
    border-color: var(--cf-color-primary, #2557f9);
    color: var(--cf-color-primary, #2557f9);
}

.cf-v2-auto-refresh__group .cf-v2-auto-refresh__menu-trigger.cf-icon-btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.cf-v2-auto-refresh__button--spinning.cf-btn .cf-btn__icon {
    animation: cf-v2-auto-refresh-spin 1s linear infinite;
}

@keyframes cf-v2-auto-refresh-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .cf-v2-auto-refresh__button--spinning.cf-btn .cf-btn__icon {
        animation: none;
    }
}

.cf-v2-auto-refresh__timestamp {
    color: var(--cf-text-secondary, #6b7280);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Time filter wrapper — preset trigger + optional inline date range picker. */
.cf-v2-time-filter {
    display: inline-flex;
    align-items: center;
    gap: var(--cf-space-2, 0.5rem);
    flex-wrap: wrap;
}

/* Panel wraps toolbar + grid so they read as a single card surface. */
.cf-v2-incidents-panel {
    display: flex;
    flex-direction: column;
    gap: var(--cf-space-3, 0.75rem);
    padding: var(--cf-space-4, 1rem);
    background-color: var(--cf-color-card);
    color: var(--cf-color-card-foreground, inherit);
    border: 1px solid var(--cf-color-border);
    border-radius: var(--cf-radius-lg, 12px);
    min-width: 0;
}

.cf-v2-incidents-toolbar {
    display: flex;
    flex-direction: column;
    gap: var(--cf-space-3, 0.75rem);
    width: 100%;
    min-width: 0;
    padding-bottom: var(--cf-space-3, 0.75rem);
    border-bottom: 1px solid var(--cf-color-border);
}

.cf-v2-incidents-toolbar__primary {
    display: flex;
    flex-direction: column;
    gap: var(--cf-space-2, 0.5rem);
    width: 100%;
    min-width: 0;
}

.cf-v2-incidents-toolbar__search {
    width: 100%;
    min-width: 0;
}

.cf-v2-incidents-toolbar__filters {
    display: flex;
    flex-direction: column;
    gap: var(--cf-space-2, 0.5rem);
    min-width: 0;
}

.cf-v2-incidents-toolbar__desktop-filters {
    display: none;
    width: 100%;
}

@media (min-width: 560px) {
    .cf-v2-incidents-toolbar__primary {
        flex-direction: row;
        align-items: center;
        gap: var(--cf-space-3, 0.75rem);
    }

    .cf-v2-incidents-toolbar__primary .cf-v2-incidents-toolbar__search {
        flex: 1 1 auto;
        min-width: 0;
    }
}

@media (min-width: 720px) {
    .cf-v2-incidents-toolbar__desktop-filters {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--cf-space-2, 0.5rem);
        min-width: 0;
    }

    .cf-v2-incidents-toolbar__mobile-filter-button {
        display: none;
    }

    .cf-v2-incidents-toolbar__clear-button {
        margin-inline-start: auto;
    }
}

@media (min-width: 1180px) {
    .cf-v2-incidents-toolbar {
        display: grid;
        grid-template-columns: minmax(280px, 1fr) auto;
        align-items: center;
        column-gap: var(--cf-space-3, 0.75rem);
    }

    .cf-v2-incidents-toolbar__primary {
        grid-column: 1;
    }

    .cf-v2-incidents-toolbar__desktop-filters {
        grid-column: 2;
        flex-wrap: nowrap;
        width: auto;
    }

    .cf-v2-incidents-toolbar__clear-button {
        margin-inline-start: var(--cf-space-1, 0.25rem);
    }

    .cf-v2-incidents-toolbar__active {
        grid-column: 1 / -1;
    }
}

.cf-v2-incidents-filter-trigger.cf-btn {
    transition:
        background-color 0.15s ease-out,
        border-color 0.15s ease-out,
        color 0.15s ease-out,
        box-shadow 0.15s ease-out;
}

.cf-v2-incidents-filter-trigger--active.cf-btn {
    background-color: color-mix(in srgb, var(--cf-color-primary, #2557f9) 10%, transparent);
    border-color: var(--cf-color-primary, #2557f9);
    color: var(--cf-color-primary, #2557f9);
}

.cf-v2-incidents-filter-trigger--active.cf-btn:hover {
    background-color: color-mix(in srgb, var(--cf-color-primary, #2557f9) 16%, transparent);
}

.cf-v2-incidents-filter-trigger--active.cf-btn:focus-visible {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--cf-color-primary, #2557f9) 28%, transparent);
}

/* Slightly larger icons on toolbar filter triggers, the auto-refresh button,
   and the time filter trigger — improves scan-ability without changing the
   overall button height. */
.cf-v2-incidents-filter-trigger.cf-btn .cf-btn__icon,
.cf-v2-auto-refresh__button.cf-btn .cf-btn__icon,
.cf-v2-time-filter__trigger.cf-btn .cf-btn__icon {
    width: 1.25em;
    height: 1.25em;
}

.cf-v2-incidents-filter-menu__item[data-selected="true"] {
    color: var(--cf-color-primary, var(--cf-color-action));
    font-weight: 600;
}

.cf-v2-incidents-filter-menu__item[data-selected="true"]:hover,
.cf-v2-incidents-filter-menu__item[data-selected="true"]:focus {
    color: var(--cf-color-primary, var(--cf-color-action));
}

.cf-v2-incidents-toolbar__active {
    display: flex;
    flex-direction: column;
    gap: var(--cf-space-2, 0.5rem);
    min-width: 0;
    padding: var(--cf-space-2, 0.5rem) var(--cf-space-3, 0.75rem);
    background-color: color-mix(in srgb, var(--cf-color-primary, #2557f9) 4%, transparent);
    border: 1px solid color-mix(in srgb, var(--cf-color-primary, #2557f9) 14%, transparent);
    border-radius: var(--cf-radius-md, 8px);
}

.cf-v2-incidents-toolbar__active-label {
    color: var(--cf-text-secondary, #6b7280);
    margin: 0;
    font-weight: 500;
    letter-spacing: 0.01em;
}

.cf-v2-incidents-toolbar__active-list {
    display: flex;
    gap: var(--cf-space-1, 0.25rem);
    align-items: center;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: var(--cf-space-1, 0.25rem);
    scrollbar-width: thin;
}

.cf-v2-incidents-toolbar__active-list > [role="listitem"] {
    display: inline-flex;
    min-width: 0;
    flex: 0 0 auto;
}

.cf-v2-incidents-toolbar__active-chip {
    max-width: min(280px, 70vw);
}

.cf-v2-incidents-toolbar__active-chip span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (min-width: 720px) {
    .cf-v2-incidents-toolbar__active {
        flex-direction: row;
        align-items: center;
    }

    .cf-v2-incidents-toolbar__active-list {
        flex-wrap: wrap;
        overflow: visible;
        padding-bottom: 0;
    }
}

.cf-v2-incidents-toolbar__trailing {
    display: flex;
    gap: var(--cf-space-2, 0.5rem);
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
    width: 100%;
}

.cf-v2-incidents-toolbar__mobile-filter-button {
    flex: 1 1 auto;
}

@media (min-width: 560px) {
    .cf-v2-incidents-toolbar__trailing {
        width: auto;
    }

    .cf-v2-incidents-toolbar__mobile-filter-button {
        flex: 0 0 auto;
    }
}

.cf-v2-incidents-filter-drawer__description {
    color: var(--cf-text-secondary, #6b7280);
    margin-top: 0;
}

.cf-v2-incidents-filter-drawer__groups {
    display: grid;
    gap: var(--cf-space-4, 1rem);
}

.cf-v2-incidents-filter-drawer__group {
    display: grid;
    gap: var(--cf-space-2, 0.5rem);
    min-width: 0;
    padding: 0;
    margin: 0;
    border: 0;
}

.cf-v2-incidents-filter-drawer__group legend {
    padding: 0;
    margin-bottom: var(--cf-space-2, 0.5rem);
    color: var(--cf-text-primary, inherit);
    font-weight: 600;
}

.cf-v2-incidents-filter-drawer__footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--cf-space-2, 0.5rem);
    width: 100%;
}

/* Grid cell helpers — ensure chips never overflow their column. */
.cf-v2-incidents-grid .cf-chip {
    max-width: 100%;
    min-width: 0;
}

.cf-v2-incidents-grid__title {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.cf-v2-incidents-grid__title-cell {
    display: flex;
    align-items: center;
    gap: var(--cf-space-2, 0.5rem);
    min-width: 0;
}

.cf-cs-alert-types-card__list {
    margin: 0;
    padding-left: var(--cf-space-5, 1.25rem);
}

.cf-cs-alert-types-card__list li {
    margin-bottom: var(--cf-space-1, 0.25rem);
}

.cf-cs-alert-types-card__value {
    font-family: var(--cf-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    color: var(--cf-text-muted, #5b6779);
}

.cf-v2-incidents-grid__title-cell .cf-v2-incidents-grid__title {
    flex: 1 1 auto;
    min-width: 0;
}

.cf-v2-incidents-grid__id {
    color: var(--cf-color-primary, #2557f9);
    text-decoration: underline;
    cursor: pointer;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
}

.cf-v2-incidents-grid__id:hover,
.cf-v2-incidents-grid__id:focus-visible {
    opacity: 0.85;
}

.cf-v2-incidents-grid__status,
.cf-v2-incidents-grid__owner {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.cf-v2-incidents-grid__chip-trigger {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--cf-space-1, 0.25rem);
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.cf-v2-incidents-grid__chip-trigger:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.cf-v2-incidents-grid__chip-trigger > .cf-chip {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.cf-v2-incidents-grid__chip-label {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cf-v2-incidents-grid__cell-spinner {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.cf-v2-incidents-grid__actions {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--cf-space-1, 0.25rem);
}

.cf-v2-incidents-grid__action-button {
    width: 2rem;
    padding: 0;
}

.cf-v2-incidents-grid__action-button .cf-btn__icon {
    width: 1rem;
    height: 1rem;
}

.cf-data-grid[data-clickable="true"] .cf-data-grid__row:hover .cf-v2-incidents-grid__title {
    color: var(--cf-color-primary, #2557f9);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.cf-v2-incidents-grid__loader {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 240px;
}

.cf-v2-incidents-grid__footer-loader {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--cf-space-3, 0.75rem);
}

.cf-v2-incidents-grid__footer-actions {
    display: flex;
    justify-content: center;
    padding-top: var(--cf-space-3, 0.75rem);
}

/* Filter chip group label + horizontal wrapping chip list */
.cf-v2-incidents-toolbar__chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cf-space-1, 0.25rem);
    align-items: center;
    min-width: 0;
}

.cf-v2-incidents-toolbar__chip-group-label {
    color: var(--cf-text-secondary, #6b7280);
    margin-right: var(--cf-space-1, 0.25rem);
    white-space: nowrap;
}

/* ==========================================================================
   V1 MudDrawer bridge — V2 shell hosts pages that still use MudDrawer for
   inline panels (e.g. Add Approvers in Gamebook configuration, Add Module in
   Security Modules). MudBlazor positions and sizes its drawer via:
       width: var(--mud-drawer-width, var(--mud-drawer-width-right));
       right: calc(-1 * var(--mud-drawer-width, var(--mud-drawer-width-right)));
   The fallback --mud-drawer-width-right is only initialized when a MudLayout
   is present in the tree. The V2 shell (CFAppShell) replaces MudLayout, so
   that variable is undefined, both `width` and `right` resolve to invalid,
   and the closed drawer renders inline at its natural content width —
   consuming horizontal layout space next to the page content. Hide closed
   temporary drawers until the host page is migrated to CFDrawer.
   ========================================================================== */

.cf-v2-app .mud-drawer.mud-drawer-temporary.mud-drawer--closed {
    display: none;
}

/* Legacy tab wrapper — hosts V1 / MudBlazor content inside a V2 page during
   tab-by-tab migrations. Acts as a passthrough container so the V1 component
   keeps its own styling without inheriting V2 layout primitives. Remove the
   wrapper site once each V1 component is migrated to V2. */
.cf-v2-legacy-tab {
    display: block;
    width: 100%;
    min-width: 0;
}

/* V2 owns scrolling inside CFAppShell: the app frame is fixed to the viewport
   and .cf-app-shell__main is the vertical scroll container. Lock the document
   while the V2 shell is mounted so content growth, fixed overlays, or legacy
   Mud surfaces cannot wake up the browser-level scroller. */
html:has(.cf-v2-app),
body:has(.cf-v2-app) {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* ==========================================================================
   IAM cards — shared vocabulary across WorkspaceUsersCardV2 +
   WorkspaceGroupsCardV2. Unscoped because Blazor scoped CSS cannot pierce
   sibling component boundaries even when both components render the same
   class names.
   ========================================================================== */

.cf-v2-iam-card__title {
    display: flex;
    align-items: center;
    gap: var(--cf-space-2, 0.5rem);
    min-width: 0;
}

.cf-v2-iam-card__row {
    align-items: stretch;
    gap: var(--cf-space-3, 0.75rem);
}

.cf-v2-iam-card__identity {
    display: flex;
    align-items: center;
    gap: var(--cf-space-3, 0.75rem);
    min-width: 0;
    flex: 1 1 auto;
}

.cf-v2-iam-card__identity-text {
    display: flex;
    flex-direction: column;
    gap: var(--cf-space-0-5, 0.125rem);
    min-width: 0;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.cf-v2-iam-card__role {
    flex-shrink: 0;
    min-width: 0;
}

.cf-v2-iam-card__role .cf-select {
    min-width: 180px;
}

@media (max-width: 559px) {
    .cf-v2-iam-card__role .cf-select {
        min-width: 0;
        width: 100%;
    }
}

.cf-v2-iam-card__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--cf-space-2, 0.5rem);
    padding: var(--cf-space-6, 1.5rem) var(--cf-space-3, 0.75rem);
    border-radius: var(--cf-radius-lg, 0.75rem);
    border: 1px dashed var(--cf-color-border, rgba(148, 163, 184, 0.3));
    background: var(--cf-color-surface-secondary, rgba(148, 163, 184, 0.04));
    color: var(--cf-text-secondary, inherit);
}

.cf-v2-iam-card__empty .cf-icon {
    width: 28px;
    height: 28px;
    opacity: 0.65;
}

.cf-v2-iam-card__empty-text {
    display: flex;
    flex-direction: column;
    gap: var(--cf-space-0-5, 0.125rem);
    max-width: 60ch;
}

/* ==========================================================================
   Add Users / Add Groups drawer body — shared vocabulary used across
   AddWorkspaceUsersDrawerV2 + AddWorkspaceGroupsDrawerV2. Mobile-first.
   ========================================================================== */

.cf-v2-add-iam {
    display: flex;
    flex-direction: column;
    gap: var(--cf-space-4, 1rem);
    min-width: 0;
}

.cf-v2-add-iam__list {
    display: flex;
    flex-direction: column;
    background: var(--cf-bg-elevated-2, var(--cf-color-surface-secondary));
    border: 1px solid var(--cf-color-border, rgba(148, 163, 184, 0.2));
    border-radius: var(--cf-radius-md, 0.5rem);
    overflow: hidden;
}

/* CFDrawer Medium caps body width at ~480px, narrower than the 560px viewport
   breakpoint. Stacking identity above controls inside the drawer keeps the
   email from wrapping mid-word and guarantees the X icon button has space
   to render — putting everything on one row at 480px wide squashes the
   identity to ~120px and pushes the X off the visible edge. */

.cf-v2-add-iam__row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--cf-space-3, 0.75rem);
    padding: var(--cf-space-3, 0.75rem);
    border-bottom: 1px solid var(--cf-color-border, rgba(148, 163, 184, 0.2));
}

.cf-v2-add-iam__row:last-child {
    border-bottom: none;
}

.cf-v2-add-iam__identity {
    display: flex;
    align-items: center;
    gap: var(--cf-space-3, 0.75rem);
    min-width: 0;
    width: 100%;
}

.cf-v2-add-iam__identity-text {
    display: flex;
    flex-direction: column;
    gap: var(--cf-space-0-5, 0.125rem);
    min-width: 0;
    flex: 1 1 auto;
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* Role select fills the row; the X icon button anchors to the right at its
   natural size so there's always a clear hit target. */
.cf-v2-add-iam__controls {
    display: flex;
    align-items: center;
    gap: var(--cf-space-2, 0.5rem);
    width: 100%;
    min-width: 0;
}

.cf-v2-add-iam__controls .cf-select {
    flex: 1 1 auto;
    min-width: 0;
}

.cf-v2-add-iam__controls .cf-icon-btn,
.cf-v2-add-iam__controls .cf-button--icon {
    flex: 0 0 auto;
}

.cf-v2-add-iam__conflict-list {
    margin: var(--cf-space-2, 0.5rem) 0 0 0;
    padding-left: var(--cf-space-5, 1.25rem);
    font-size: var(--cf-text-sm, 0.875rem);
}

.cf-v2-add-iam__footer {
    display: flex;
    flex-direction: column-reverse;
    gap: var(--cf-space-2, 0.5rem);
    width: 100%;
}

.cf-v2-add-iam__footer > .cf-btn {
    width: 100%;
    justify-content: center;
}

@media (min-width: 560px) {
    .cf-v2-add-iam__footer {
        flex-direction: row;
        justify-content: flex-end;
        width: 100%;
    }

    .cf-v2-add-iam__footer > .cf-btn {
        width: auto;
    }
}

/* ==========================================================================
   Group details drawer body
   ========================================================================== */

.cf-v2-group-details {
    display: flex;
    flex-direction: column;
    gap: var(--cf-space-4, 1rem);
    min-width: 0;
}

.cf-v2-group-details__hero {
    display: flex;
    align-items: center;
    gap: var(--cf-space-3, 0.75rem);
    min-width: 0;
}

.cf-v2-group-details__hero-text {
    display: flex;
    flex-direction: column;
    gap: var(--cf-space-0-5, 0.125rem);
    min-width: 0;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.cf-v2-group-details__stats {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--cf-space-3, 0.75rem);
}

.cf-v2-group-details__stat {
    display: flex;
    flex-direction: column;
    gap: var(--cf-space-0-5, 0.125rem);
    padding: var(--cf-space-3, 0.75rem);
    border-radius: var(--cf-radius-lg, 0.75rem);
    border: 1px solid var(--cf-color-border, rgba(148, 163, 184, 0.2));
    background: var(--cf-color-surface-secondary, rgba(148, 163, 184, 0.05));
    word-break: break-word;
}

.cf-v2-group-details__members-head {
    display: flex;
    align-items: center;
    gap: var(--cf-space-2, 0.5rem);
    min-width: 0;
}

.cf-v2-group-details__empty {
    padding: var(--cf-space-4, 1rem);
}

@media (min-width: 560px) {
    .cf-v2-group-details__stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--cf-space-3, 0.75rem);
    }
}

/* ==========================================================================
   Notifications tab — severity preferences + recipients
   ========================================================================== */

.cf-v2-notifications__prereq-list {
    margin: var(--cf-space-1, 0.25rem) 0 0 0;
    padding-left: var(--cf-space-5, 1.25rem);
    display: flex;
    flex-direction: column;
    gap: var(--cf-space-1, 0.25rem);
}

/* Severity preference rows: optional chip column at left for color identity,
   copy column flex:1 for label + description, switch column right-anchored.
   The chip column is hidden on narrow screens since the label in the copy
   column already names the severity. */
.cf-v2-notifications-prefs__list {
    display: flex;
    flex-direction: column;
    gap: var(--cf-space-2, 0.5rem);
}

.cf-v2-notifications-prefs__row {
    display: flex;
    align-items: center;
    gap: var(--cf-space-3, 0.75rem);
    padding: var(--cf-space-3, 0.75rem);
    border-radius: var(--cf-radius-lg, 0.75rem);
    border: 1px solid var(--cf-color-border, rgba(148, 163, 184, 0.2));
    background: var(--cf-color-surface-secondary, rgba(148, 163, 184, 0.04));
    min-width: 0;
}

.cf-v2-notifications-prefs__chip-col {
    flex: 0 0 auto;
    display: none;
}

.cf-v2-notifications-prefs__copy {
    display: flex;
    flex-direction: column;
    gap: var(--cf-space-0-5, 0.125rem);
    min-width: 0;
    flex: 1 1 auto;
    word-break: break-word;
}

.cf-v2-notifications-prefs__switch {
    flex: 0 0 auto;
}

@media (min-width: 560px) {
    .cf-v2-notifications-prefs__chip-col {
        display: inline-flex;
        min-width: 5.5rem;
    }
}

/* Recipients row — type chip column natural width, anchored between
   identity and actions in the shared list-item. */
.cf-v2-notifications-recipients__type {
    flex: 0 0 auto;
}

@media (max-width: 559px) {
    .cf-v2-notifications-recipients__type {
        align-self: flex-start;
    }
}

/* Drawer "selected recipient" row uses a spacer so the type chip anchors
   left and the X button anchors right inside the controls strip. */
.cf-v2-add-iam__spacer {
    flex: 1 1 auto;
    min-width: 0;
}

/* V2 owns scrolling inside CFAppShell: the app frame is fixed to the viewport
   and .cf-app-shell__main is the vertical scroll container. Lock the document
   while the V2 shell is mounted so content growth, fixed overlays, or legacy
   Mud surfaces cannot wake up the browser-level scroller. */
html:has(.cf-v2-app),
body:has(.cf-v2-app) {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* ==========================================================================
   Developers / Integration details (mobile-first)
   Shared across WebhookDetailsGeneralV2 + ServiceAccountDetailsGeneralV2.
   Unscoped so both Blazor components can share the same vocabulary.
   Breakpoints: sm=560px, md=720px, lg=960px.
   ========================================================================== */

.cf-v2-developers-detail {
    display: flex;
    flex-direction: column;
    gap: var(--cf-space-4, 1rem);
    width: 100%;
    min-width: 0;
}

/* Consistent vertical rhythm inside card bodies (grid, meta rows, lists). */
.cf-v2-developers-detail__card-body {
    display: flex;
    flex-direction: column;
    gap: var(--cf-space-4, 1rem);
    min-width: 0;
}

.cf-v2-developers-detail__loader {
    min-height: 16rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- Hero --- */
.cf-v2-developers-detail__hero {
    display: flex;
    flex-direction: column;
    gap: var(--cf-space-3, 0.75rem);
    width: 100%;
    min-width: 0;
}

.cf-v2-developers-detail__hero-copy {
    display: flex;
    align-items: center;
    gap: var(--cf-space-3, 0.75rem);
    min-width: 0;
    flex: 1 1 auto;
}

.cf-v2-developers-detail__hero-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--cf-color-surface-secondary, rgba(148, 163, 184, 0.12));
    color: var(--cf-color-icon-brand, inherit);
    flex-shrink: 0;
}

.cf-v2-developers-detail__hero-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--cf-space-1, 0.25rem);
    min-width: 0;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.cf-v2-developers-detail__hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cf-space-2, 0.5rem);
    width: 100%;
}

.cf-v2-developers-detail__hero-actions .cf-btn {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
}

@media (min-width: 720px) {
    .cf-v2-developers-detail__hero {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .cf-v2-developers-detail__hero-actions {
        width: auto;
        flex-wrap: nowrap;
    }

    .cf-v2-developers-detail__hero-actions .cf-btn {
        flex: 0 0 auto;
    }
}

/* --- Section heads (used inside card header slots with trailing action) --- */
.cf-v2-developers-detail__section-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--cf-space-2, 0.5rem);
    width: 100%;
}

.cf-v2-developers-detail__section-head .cf-btn {
    width: 100%;
    justify-content: center;
}

@media (min-width: 560px) {
    .cf-v2-developers-detail__section-head {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .cf-v2-developers-detail__section-head .cf-btn {
        width: auto;
    }
}

/* --- Two-column form grid (stacks on mobile) --- */
.cf-v2-developers-detail__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--cf-space-3, 0.75rem);
}

@media (min-width: 720px) {
    .cf-v2-developers-detail__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--cf-space-4, 1rem);
    }
}

.cf-v2-developers-detail__grid--single {
    grid-template-columns: 1fr !important;
}

/* --- URL + copy compound field --- */
.cf-v2-developers-detail__copy-field {
    display: flex;
    align-items: stretch;
    gap: var(--cf-space-2, 0.5rem);
    min-width: 0;
}

.cf-v2-developers-detail__copy-field .cf-textfield {
    flex: 1 1 auto;
    min-width: 0;
}

/* --- Meta row (inline label/value with trailing action) --- */
.cf-v2-developers-detail__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--cf-space-2, 0.5rem);
    width: 100%;
    min-width: 0;
}

.cf-v2-developers-detail__meta-copy {
    display: flex;
    flex-direction: column;
    gap: var(--cf-space-0-5, 0.125rem);
    min-width: 0;
    word-break: break-all;
    overflow-wrap: anywhere;
}

/* Inline value + trailing icon action (e.g. monospace ID + copy icon). */
.cf-v2-developers-detail__value-inline {
    display: flex;
    align-items: center;
    gap: var(--cf-space-2, 0.5rem);
    min-width: 0;
    flex-wrap: wrap;
}

.cf-v2-developers-detail__value-inline > .cf-v2-developers-detail__mono {
    min-width: 0;
}

.cf-v2-developers-detail__meta .cf-btn {
    width: 100%;
    justify-content: center;
}

@media (min-width: 560px) {
    .cf-v2-developers-detail__meta {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: var(--cf-space-3, 0.75rem);
    }

    .cf-v2-developers-detail__meta .cf-btn {
        width: auto;
    }
}

/* --- Label with inline help icon (used for "Permissions", "Client ID", etc.) --- */
.cf-v2-developers-detail__label-with-help {
    display: inline-flex;
    align-items: center;
    gap: var(--cf-space-1, 0.25rem);
}

/* --- List (event subscriptions, workspaces, credentials) --- */
.cf-v2-developers-detail__list {
    display: flex;
    flex-direction: column;
    gap: var(--cf-space-3, 0.75rem);
}

.cf-v2-developers-detail__list-item {
    display: flex;
    flex-direction: column;
    gap: var(--cf-space-3, 0.75rem);
    padding: var(--cf-space-3, 0.75rem);
    border-radius: var(--cf-radius-lg, 0.75rem);
    border: 1px solid var(--cf-color-border, rgba(148, 163, 184, 0.2));
    background: var(--cf-color-surface-secondary, rgba(148, 163, 184, 0.05));
    min-width: 0;
}

.cf-v2-developers-detail__list-copy {
    display: flex;
    flex-direction: column;
    gap: var(--cf-space-1, 0.25rem);
    min-width: 0;
    flex: 1 1 auto;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.cf-v2-developers-detail__list-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cf-space-2, 0.5rem);
    min-width: 0;
}

.cf-v2-developers-detail__list-actions {
    display: flex;
    gap: var(--cf-space-2, 0.5rem);
    align-items: center;
    flex-wrap: wrap;
}

.cf-v2-developers-detail__list-actions .cf-btn {
    flex: 1 1 auto;
    justify-content: center;
}

@media (min-width: 560px) {
    .cf-v2-developers-detail__list-item {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: var(--cf-space-4, 1rem);
    }

    .cf-v2-developers-detail__list-item--stacked {
        flex-direction: column;
        align-items: stretch;
    }

    .cf-v2-developers-detail__list-actions {
        flex-wrap: nowrap;
    }

    .cf-v2-developers-detail__list-actions .cf-btn {
        flex: 0 0 auto;
    }
}

/* --- Event subscription row (text + toggle, with optional extras) --- */
.cf-v2-developers-detail__event-toggle {
    display: flex;
    align-items: center;
    gap: var(--cf-space-2, 0.5rem);
    justify-content: flex-start;
    flex-wrap: wrap;
}

@media (min-width: 560px) {
    .cf-v2-developers-detail__event-toggle {
        justify-content: flex-end;
        flex-wrap: nowrap;
    }
}

/* --- Chip wrap (scopes, labels) --- */
.cf-v2-developers-detail__chip-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cf-space-1, 0.25rem);
    margin-top: var(--cf-space-1, 0.25rem);
}

/* --- Activity stats --- */
.cf-v2-developers-detail__stats {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--cf-space-3, 0.75rem);
}

.cf-v2-developers-detail__stat {
    display: flex;
    flex-direction: column;
    gap: var(--cf-space-1, 0.25rem);
    padding: var(--cf-space-3, 0.75rem);
    border-radius: var(--cf-radius-lg, 0.75rem);
    border: 1px solid var(--cf-color-border, rgba(148, 163, 184, 0.2));
    background: var(--cf-color-surface-secondary, rgba(148, 163, 184, 0.05));
    word-break: break-word;
}

@media (min-width: 560px) {
    .cf-v2-developers-detail__stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--cf-space-4, 1rem);
    }
}

/* --- Footer / inline form actions --- */
.cf-v2-developers-detail__footer-actions {
    display: flex;
    flex-direction: column-reverse;
    gap: var(--cf-space-2, 0.5rem);
    width: 100%;
}

.cf-v2-developers-detail__footer-actions .cf-btn {
    width: 100%;
    justify-content: center;
}

@media (min-width: 560px) {
    .cf-v2-developers-detail__footer-actions {
        flex-direction: row;
        justify-content: flex-end;
        width: auto;
    }

    .cf-v2-developers-detail__footer-actions .cf-btn {
        width: auto;
    }
}

/* --- Sticky save bar --- */
.cf-v2-developers-detail__save-bar {
    position: sticky;
    bottom: 0;
    z-index: 4;
    padding: var(--cf-space-3, 0.75rem);
    margin-top: var(--cf-space-2, 0.5rem);
    background: var(--cf-color-card, var(--cf-bg-elevated-1, #1a1d23));
    border-top: 1px solid var(--cf-color-border, rgba(148, 163, 184, 0.2));
    border-radius: var(--cf-radius-lg, 0.75rem) var(--cf-radius-lg, 0.75rem) 0 0;
    box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.18);
}

.cf-v2-developers-detail__save-bar-inner {
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

.cf-v2-developers-detail__save-bar-inner .cf-btn {
    width: 100%;
    justify-content: center;
}

@media (min-width: 560px) {
    .cf-v2-developers-detail__save-bar-inner .cf-btn {
        width: auto;
    }
}

/* --- Monospace field for IDs --- */
.cf-v2-developers-detail__mono {
    font-family: var(--cf-font-mono, ui-monospace, SFMono-Regular, monospace);
    font-size: var(--cf-text-sm, 0.875rem);
    word-break: break-all;
}

/* ==========================================================================
   Developers / Log tabs (Request logs, Audit, Delivery events) — mobile-first
   Unscoped so all four tabs share the same header/body layout.
   ========================================================================== */

.cf-v2-developers-log-tab {
    display: block;
    width: 100%;
    min-width: 0;
}

.cf-v2-developers-log-tab__header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--cf-space-3, 0.75rem);
    width: 100%;
    min-width: 0;
}

.cf-v2-developers-log-tab__title {
    display: flex;
    flex-direction: column;
    gap: var(--cf-space-1, 0.25rem);
    min-width: 0;
    word-break: break-word;
    flex: 1 1 auto;
}

.cf-v2-developers-log-tab__controls {
    display: flex;
    align-items: center;
    gap: var(--cf-space-2, 0.5rem);
    flex-wrap: nowrap;
    min-width: 0;
    width: 100%;
}

/* Keep the filter and refresh on a single row. Filter takes all available
   space and shrinks; refresh holds its natural size. When the whole controls
   block can't fit next to the title, it wraps below via the header's wrap. */
.cf-v2-developers-log-tab__controls > .cf-v2-time-filter {
    flex: 1 1 auto;
    min-width: 0;
}

.cf-v2-developers-log-tab__refresh {
    flex: 0 0 auto;
}

.cf-v2-developers-log-tab__loader {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 16rem;
}

.cf-v2-developers-log-tab__more {
    display: flex;
    justify-content: center;
    margin-top: var(--cf-space-4, 1rem);
}

/* Chips inside log-tab CFTable cells must respect cell bounds, otherwise
   their white-space:nowrap pushes the chip past the column width into the
   neighbour. max-width:100% + min-width:0 lets the chip shrink; the cell's
   own Overflow="Clip" (set per-column) then visually clips the overflow. */
.cf-v2-developers-log-tab .cf-table__cell .cf-chip {
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The AuditMessageRenderer wraps its output in a span; when the enclosing
   cell uses line-clamp (Overflow="Ellipsis" + MaxLines>1), its span must
   propagate as inline text, not a block, so -webkit-line-clamp applies. */
.cf-v2-developers-log-tab .cf-table__cell-inner[data-overflow="ellipsis"]:not([data-max-lines="1"]) > span {
    display: inline;
}

@media (min-width: 720px) {
    .cf-v2-developers-log-tab__header {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
    }

    /* On desktop, controls take their natural width and sit to the right of
       the title. If they don't fit, the header's flex-wrap pushes the whole
       controls block to a second line full-width. */
    .cf-v2-developers-log-tab__controls {
        width: auto;
        justify-content: flex-end;
    }
}

/* ==========================================================================
   Log Search V2 — shared class vocabulary used across LogSearchWorkspaceV2,
   SchemaExplorerPanelV2, and LogSearchResultsGridV2. Lives here because these
   classes cross Razor files (scoped CSS can't pierce component boundaries).
   Mobile-first: base rules target phones; >= 560px / >= 960px enhance upward.
   ========================================================================== */

.cf-v2-log-search {
    display: flex;
    flex-direction: column;
    gap: var(--cf-space-4, 1rem);
    width: 100%;
    min-width: 0;
    min-height: 24rem;
    /* Mobile: the page flows naturally and the browser handles overflow.
       The viewport-lock pattern only applies on desktop (see media query
       below) — phones have too little vertical real estate for a pinned
       layout, and cumulative card heights would clip the results grid. */
}

@media (min-width: 960px) {
    .cf-v2-log-search {
        /* Desktop: cap the region to the viewport so tall schemas and
           tall result sets scroll inside their own containers instead
           of forcing a page-level scrollbar. dvh keeps the bottom of
           the results card from being clipped by mobile browser chrome
           on large-format tablets. */
        height: calc(100dvh - 10rem);
        overflow: hidden;
    }
}

/* Suppress text selection during an editor drag so the resize gesture
   doesn't paint the whole page blue. */
.cf-v2-log-search[data-dragging="true"] {
    cursor: ns-resize;
    user-select: none;
}

/* Toolbar card */
.cf-v2-log-search__toolbar-row {
    display: flex;
    flex-direction: column;
    gap: var(--cf-space-3, 0.75rem);
    align-items: stretch;
    width: 100%;
    min-width: 0;
}

.cf-v2-log-search__toolbar-lead {
    display: flex;
    align-items: center;
    gap: var(--cf-space-2, 0.5rem);
    min-width: 0;
    flex: 1 1 auto;
}

.cf-v2-log-search__toolbar-context {
    display: flex;
    align-items: center;
    gap: var(--cf-space-2, 0.5rem);
    min-width: 0;
    flex: 1 1 auto;
}

.cf-v2-log-search__toolbar-context > p {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cf-v2-log-search__toolbar-actions {
    display: flex;
    flex-direction: column-reverse;
    gap: var(--cf-space-2, 0.5rem);
    width: 100%;
}

/* Mobile: every child — including tooltip-wrapped CFButton/CFAiButton —
   stretches to fill the column so the stack reads as a uniform list of
   actions. Plain `> *` wouldn't reach the inner button when CFTooltip
   is in between, which is why Export went full-width in the earlier
   iteration but Run and AI Assist stayed auto-sized. */
.cf-v2-log-search__toolbar-actions > *,
.cf-v2-log-search__toolbar-actions .cf-btn,
.cf-v2-log-search__toolbar-actions .cf-ai-btn {
    width: 100%;
    justify-content: center;
}

@media (min-width: 560px) {
    .cf-v2-log-search__toolbar-row {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .cf-v2-log-search__toolbar-actions {
        flex-direction: row;
        width: auto;
        align-items: center;
    }

    /* Desktop: release the full-width stretch applied on mobile so each
       button hugs its label content again. */
    .cf-v2-log-search__toolbar-actions > *,
    .cf-v2-log-search__toolbar-actions .cf-btn,
    .cf-v2-log-search__toolbar-actions .cf-ai-btn {
        width: auto;
    }
}

@media (min-width: 960px) {
    .cf-v2-log-search__schema-toggle {
        display: none;
    }
}

/* AI assistant command bar - mounted inside the editor card so query
   generation feels attached to authoring instead of like a separate form. */
.cf-v2-log-search__ai-command {
    border-bottom: 1px solid color-mix(in oklab, var(--ai-gradient-color-2, #ff6b08) 28%, var(--cf-color-border, currentColor));
}

.cf-v2-log-search__ai-trigger[data-active="true"] {
    box-shadow:
        0 0 0 1px color-mix(in oklab, var(--ai-gradient-color-2, #ff6b08) 55%, transparent),
        0 12px 28px -16px color-mix(in oklab, var(--ai-gradient-color-4, #b844ee) 80%, transparent);
}

/* Run button keyboard hint — hidden below 720px to keep mobile tight. */
.cf-v2-log-search__kbd {
    display: none;
    align-items: center;
    gap: var(--cf-space-1, 0.25rem);
    padding: 0 var(--cf-space-1-5, 0.375rem);
    margin-left: var(--cf-space-2, 0.5rem);
    border-radius: var(--cf-radius-sm, 4px);
    background: color-mix(in oklab, currentColor 12%, transparent);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.5;
    opacity: 0.85;
}

@media (min-width: 720px) {
    .cf-v2-log-search__kbd {
        display: inline-flex;
    }
}

/* Content layout — schema + workspace */
.cf-v2-log-search__content {
    display: flex;
    flex-direction: column;
    gap: var(--cf-space-3, 0.75rem);
    width: 100%;
    min-width: 0;
    /* Absorb remaining height in the root flex column so the workspace
       grows to fill it instead of shrinking to content. min-height:0 lets
       the inner grid-height math work even when the content is tall.
       overflow:hidden is belt-and-suspenders — on short desktop viewports
       the root's overflow:hidden already clips, but clipping here too
       prevents any inner scroll region from racing the root for the
       scroll bar. */
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.cf-v2-log-search__schema-aside {
    display: none;
    min-width: 0;
}

.cf-v2-log-search__workspace {
    display: flex;
    flex-direction: column;
    gap: var(--cf-space-3, 0.75rem);
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
}

@media (min-width: 960px) {
    .cf-v2-log-search__content {
        flex-direction: row;
        align-items: stretch;
    }

    .cf-v2-log-search__schema-aside {
        display: flex;
        flex-direction: column;
        width: 320px;
        flex: 0 0 320px;
        min-height: 0;
    }

    .cf-v2-log-search__schema-card {
        height: 100%;
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
    }

    .cf-v2-log-search__schema-card .cf-card__content {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
    }
}

/* Schema panel (shared by inline + drawer usage). The panel itself fills
   its container (the schema card on desktop, the drawer body on mobile).
   Inside, the header stays fixed-height and the schema-body scrolls within
   the remaining space. */
.cf-v2-log-search__schema {
    display: flex;
    flex-direction: column;
    gap: var(--cf-space-2, 0.5rem);
    min-width: 0;
    flex: 1 1 auto;
    min-height: 0;
}

.cf-v2-log-search__schema-header {
    display: flex;
    align-items: center;
    gap: var(--cf-space-1-5, 0.375rem);
    margin-top: var(--cf-space-2, 0.5rem);
    flex: 0 0 auto;
}

.cf-v2-log-search__schema-body {
    display: flex;
    flex-direction: column;
    gap: var(--cf-space-1, 0.25rem);
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
    /* Mobile (drawer): cap so the schema list never outgrows the drawer
       body when mounted there. Desktop overrides this to fill the aside. */
    max-height: 50vh;
}

@media (min-width: 960px) {
    .cf-v2-log-search__schema-body {
        max-height: none;
    }
}

.cf-v2-log-search__schema-loading {
    display: flex;
    justify-content: center;
    padding: var(--cf-space-4, 1rem) 0;
}

.cf-v2-log-search__schema-solution {
    display: flex;
    flex-direction: column;
    gap: var(--cf-space-0-5, 2px);
}

/* A node row (solution button or leaf table cell). Everything inside the
   schema aligns against the same left edge — no shifting around based on
   whether an item has a chevron. */
.cf-v2-log-search__schema-node {
    display: flex;
    align-items: center;
    gap: var(--cf-space-1-5, 0.375rem);
    padding: var(--cf-space-1, 0.25rem) var(--cf-space-2, 0.5rem);
    border: none;
    background: transparent;
    text-align: left;
    cursor: pointer;
    border-radius: var(--cf-radius-sm, 4px);
    color: var(--cf-text-default, inherit);
    font-size: 0.8125rem;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}

.cf-v2-log-search__schema-node:hover {
    background: color-mix(in oklab, currentColor 8%, transparent);
}

/* Leaf table cells: not interactive, muted text. No extra left padding —
   the wrapping role="group" already indents the whole list so the table
   icon lines up under its parent solution's database icon. */
.cf-v2-log-search__schema-node--table {
    cursor: default;
    color: var(--cf-text-muted, inherit);
}

.cf-v2-log-search__schema-node--table:hover {
    background: transparent;
}

/* Indent the whole expanded tables list once, instead of padding every
   leaf individually. The offset matches the chevron slot (14px) + the
   row flex-gap (0.375rem) so the table icon sits directly below the
   solution's database icon. */
.cf-v2-log-search__schema-tables {
    display: flex;
    flex-direction: column;
    padding-inline-start: calc(14px + var(--cf-space-1-5, 0.375rem));
}

.cf-v2-log-search__schema-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1 1 auto;
}

/* Fixed-width chevron slot so collapsed and expanded rows stay aligned
   and the chevron never shifts the rest of the row. */
.cf-v2-log-search__schema-chevron {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
}

/* Editor card — height is driven by the KqlEditor Height param, which the
   component binds at runtime to a draggable pixel value. The wrapper itself
   is just a style hook + test target. */
.cf-v2-log-search__editor-card {
    overflow: hidden;
    flex: 0 0 auto;
}

.cf-v2-log-search__editor {
    width: 100%;
    min-height: 120px;
}

/* Recolor the V1 HorizontalResizeBar when it's used inside a V2 log-search
   workspace so it picks up V2 token colors instead of the component's
   original white / charcoal default. Targets the plain class name because
   the component's scoped CSS doesn't isolate the class selector itself. */
.cf-v2-log-search .horizontal-resize-bar {
    flex: 0 0 auto;
    background: var(--cf-color-border-subtle, color-mix(in oklab, currentColor 18%, transparent));
}

.cf-v2-log-search .horizontal-resize-bar .ellipse {
    background: var(--cf-text-muted, color-mix(in oklab, currentColor 55%, transparent));
}

/* Results card — grows to fill remaining column height after the toolbar
   and editor have taken their share. Low `min-height` so a tall editor
   drag shrinks the grid instead of pushing overflow off the page. */
/* Mobile: generous floor so the virtualized grid shows a useful number
   of rows without the user having to drag the editor smaller first. */
.cf-v2-log-search__results-card {
    min-height: 28rem;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

/* Desktop: flex-shrinks freely down to a small header-plus-row minimum
   so a tall editor drag never clips the grid off the page. The user-
   controlled splitter between editor and results arbitrates the actual
   split, like the Azure Logs blade. */
@media (min-width: 960px) {
    .cf-v2-log-search__results-card {
        min-height: 6rem;
    }
}

/* Defense-in-depth: cap the editor card at roughly half the viewport so
   even if the drag clamp in code is raised later, the editor can't grow
   past a point where the results card would disappear. Desktop-only —
   on mobile the page flows and the editor's intrinsic height is fine. */
@media (min-width: 960px) {
    .cf-v2-log-search__editor-card {
        max-height: 55dvh;
    }
}

.cf-v2-log-search__results-card .cf-card__content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.cf-v2-log-search__results-header {
    display: flex;
    align-items: center;
    gap: var(--cf-space-2, 0.5rem);
}

.cf-v2-log-search__results-body {
    flex: 1 1 auto;
    min-height: 320px;
    display: flex;
    flex-direction: column;
}

.cf-v2-log-search__results-loading {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--cf-space-2, 0.5rem);
    padding: var(--cf-space-6, 1.5rem);
}

/* Grid cell text — single-line ellipsis for dense rows, monospace for KQL */
.cf-v2-log-search__cell-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    display: inline-block;
    max-width: 100%;
    font-family: var(--cf-font-mono, ui-monospace, Menlo, Consolas, monospace);
    font-size: 0.875rem;
}

/* ==========================================================================
   Command Center V2 — Shared widget vocabulary
   Unscoped because multiple widget components consume the same classes and
   Blazor scoped CSS cannot pierce component boundaries.
   ========================================================================== */

/* Command-dashboard cards fill their grid cell — 100% wide, 100% tall.
   The card itself becomes the scroll-containing parent: header stays pinned,
   body fills remaining height and clips overflow so the inner table/list
   scrolls rather than pushing the whole grid row taller. */
.cf-v2-command-grid__cell .cf-card {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.cf-v2-command-grid__cell .cf-card__header {
    flex-shrink: 0;
}

.cf-v2-command-grid__cell .cf-card__content {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.cf-v2-command-widget {
    display: flex;
    flex-direction: column;
    gap: var(--cf-space-4, 1rem);
    width: 100%;
    min-width: 0;
}

.cf-v2-command-widget__body {
    display: flex;
    flex-direction: column;
    gap: var(--cf-space-4, 1rem);
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

/* Inside a bounded dashboard cell, the table becomes the scrollable region.
   CFTable.cf-table__scroll ships with overflow-y: hidden so it relies on an
   outer scroll container — here we flip it to auto so long datasets scroll
   inside the card instead of inflating the row. Sibling stats strips stay
   at intrinsic height above the scrolling table. */
.cf-v2-command-grid__cell .cf-v2-command-widget__body > .cf-table {
    flex: 1 1 auto;
    min-height: 0;
}

.cf-v2-command-grid__cell .cf-v2-command-widget__body .cf-table__scroll {
    overflow-y: auto;
}

.cf-v2-command-grid__cell .cf-v2-command-widget__stats {
    flex-shrink: 0;
}

/* Section header for widget cards — title on the left, optional trailing metric
   chip/badge on the right. Wraps on mobile via the parent's flex rules. */
.cf-v2-command-widget__header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--cf-space-1, 0.25rem);
    min-width: 0;
}

@media (min-width: 560px) {
    .cf-v2-command-widget__header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: var(--cf-space-3, 0.75rem);
    }
}

/* Stats strip — two-up on mobile, four-up on tablet. */
.cf-v2-command-widget__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--cf-space-3, 0.75rem);
    min-width: 0;
}

@media (min-width: 560px) {
    .cf-v2-command-widget__stats {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.cf-v2-command-widget__stat {
    display: flex;
    flex-direction: column;
    gap: var(--cf-space-0-5, 2px);
    padding: var(--cf-space-3, 0.75rem);
    border-radius: var(--cf-radius-md, 8px);
    background: var(--cf-color-surface-secondary, rgba(148, 163, 184, 0.08));
    min-width: 0;
}

.cf-v2-command-widget__stat-value {
    font-variant-numeric: tabular-nums;
}

/* Skeleton cluster used inside widget bodies while data is loading.
   Keep heights close to the rendered content so the layout doesn't jump.
   flex: 1 so the cluster grows with the stretched card. */
.cf-v2-command-widget__skeletons {
    display: flex;
    flex-direction: column;
    gap: var(--cf-space-3, 0.75rem);
    min-height: 12rem;
    flex: 1;
}

/* Empty-state wrapper — the CFEmptyState component owns its own layout, but
   widgets wrap it in this container to give a consistent min-height and
   centre the message vertically when the card is stretched taller by an
   adjacent content-heavy sibling. */
.cf-v2-command-widget__empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 12rem;
    flex: 1;
}

/* Chart wrapper for donut-only widgets — centres the chart vertically
   inside whatever height the card has been stretched to. */
.cf-v2-command-widget__chart {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 12rem;
    flex: 1;
}

/* Scale the donut up inside the command dashboard cells — CFDonut's Lg preset
   is 160px which reads as small in a 26–28rem card. Override scoped to the
   dashboard so other consumers of CFDonut are unaffected. */
.cf-v2-command-grid__cell .cf-v2-command-widget__chart .cf-donut__chart {
    width: 200px;
    height: 200px;
}

@media (min-width: 1200px) {
    .cf-v2-command-grid__cell .cf-v2-command-widget__chart .cf-donut__chart {
        width: 220px;
        height: 220px;
    }
}

/* ──────────────────────────────────────────────────────────────────────────
   Tabbed incidents dialog (V2) — shell sizing override.

   The shell pins a fixed viewport-relative height so the dialog never grows
   or shrinks as panes load — content scroll lives inside the modal, not the
   dialog body. Padding is zeroed so the modal owns its own chrome rhythm
   (sticky header + sticky tab strip + scrollable pane region).

   Below 720px (tablets/phones) we go full-bleed and full-height so the
   modal acts as a page rather than a card.

   `!important` is required because the provider's `[data-size]` rules live
   in scoped CSS and match with attribute-bumped specificity.
   ────────────────────────────────────────────────────────────────────── */
.cf-dialog.cf-v2-incident-modal-shell {
    width: min(1100px, 96vw) !important;
    height: min(860px, 92vh) !important;
    max-width: min(1100px, 96vw) !important;
    max-height: 92vh !important;
    border-radius: var(--cf-radius-lg, 12px) !important;
    background: var(--cf-bg-elevated-1) !important;
    /*
       Override the provider's open animation to opacity-only. The default
       cf-dialog-in keyframes leave transform: scale(1) on the dialog after
       the animation finishes (the `to` state is retained via fill-mode: both),
       which creates a containing block for position:fixed descendants. That
       breaks portalled overlays inside the modal — CFMenu / CFAutocomplete
       popups compute coordinates from getBoundingClientRect() expecting the
       viewport as reference, but with the dialog as the containing block
       they jump to wildly wrong positions (assignee dropdown lands far from
       its trigger).
    */
    animation: cf-incident-modal-in var(--cf-duration-slow, 0.32s) var(--cf-ease-out, ease-out) both !important;
}

@keyframes cf-incident-modal-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.cf-dialog.cf-v2-incident-modal-shell .cf-dialog__body {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0 !important;
    background: transparent;
    overflow: hidden;
}

@media (max-width: 720px) {
    .cf-dialog.cf-v2-incident-modal-shell {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        border-radius: 0 !important;
    }
}

/* ========================================================================
   Module configuration page (V2) — shared layout vocabulary used by
   ModuleHeroPrereqsCardV2, ModuleConfigurationViewV2, the per-module
   form components (Sentinel / CrowdStrike / SentinelOne), ModuleScopesV2,
   and CrowdStrikeAlertTypesCardV2. Lives globally because these classes
   appear in multiple .razor files; Blazor scoped CSS would not reach
   across them.
   ======================================================================== */

/* --- Hero (module summary + status chips + enable/disable button) ----- */
.cf-v2-module-config__hero {
    display: flex;
    flex-direction: column;
    gap: var(--cf-space-4, 1rem);
    align-items: stretch;
}

.cf-v2-module-config__hero-copy {
    display: flex;
    align-items: flex-start;
    gap: var(--cf-space-3, 0.75rem);
    flex: 1 1 auto;
    min-width: 0;
}

.cf-v2-module-config__hero-icon {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--cf-radius-md, 8px);
    background: var(--cf-bg-elevated-2, rgba(255, 255, 255, 0.04));
    color: var(--cf-text-muted, #98a2b3);
    overflow: hidden;
}

.cf-v2-module-config__hero-icon .cf-icon {
    width: 24px;
    height: 24px;
}

.cf-v2-module-config__hero-logo {
    width: 36px;
    height: 36px;
    object-fit: contain;
    display: block;
}

.cf-v2-module-config__hero-text {
    display: flex;
    flex-direction: column;
    gap: var(--cf-space-1, 0.25rem);
    align-items: flex-start;
    flex: 1 1 auto;
    min-width: 0;
}

.cf-v2-module-config__hero-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cf-space-2, 0.5rem);
    margin-top: var(--cf-space-1, 0.25rem);
}

.cf-v2-module-config__hero-actions {
    display: flex;
    flex-direction: column;
    gap: var(--cf-space-2, 0.5rem);
}

.cf-v2-module-config__hero-actions .cf-btn {
    width: 100%;
}

@media (min-width: 720px) {
    .cf-v2-module-config__hero {
        flex-direction: row;
        align-items: flex-start;
    }

    .cf-v2-module-config__hero-actions {
        flex-direction: row;
        align-items: center;
        flex: 0 0 auto;
    }

    .cf-v2-module-config__hero-actions .cf-btn {
        width: auto;
    }
}

/* --- Prerequisites checklist (lives inside hero card) ----------------- */
.cf-v2-module-config__prereqs {
    display: flex;
    flex-direction: column;
    gap: var(--cf-space-2, 0.5rem);
    padding-top: var(--cf-space-4, 1rem);
    margin-top: var(--cf-space-4, 1rem);
    border-top: 1px solid var(--cf-color-border-subtle, rgba(255, 255, 255, 0.08));
}

.cf-v2-module-config__prereq-list {
    display: flex;
    flex-direction: column;
    gap: var(--cf-space-2, 0.5rem);
}

.cf-v2-module-config__prereq-row {
    display: flex;
    align-items: flex-start;
    gap: var(--cf-space-3, 0.75rem);
}

.cf-v2-module-config__prereq-icon {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--cf-text-muted, #98a2b3);
}

.cf-v2-module-config__prereq-icon--ok {
    color: var(--cf-status-success-fg, #34d399);
}

.cf-v2-module-config__prereq-icon--failed {
    color: var(--cf-status-error-fg, #f87171);
}

.cf-v2-module-config__prereq-icon .cf-icon {
    width: 18px;
    height: 18px;
}

.cf-v2-module-config__prereq-text {
    display: flex;
    flex-direction: column;
    gap: var(--cf-space-0-5, 2px);
    flex: 1 1 auto;
    min-width: 0;
}

/* --- Configuration form layout (used by every module form variant) ---- */
.cf-v2-module-config__form {
    display: flex;
    flex-direction: column;
    gap: var(--cf-space-4, 1rem);
}

.cf-v2-module-config__form-actions {
    display: flex;
    flex-direction: column-reverse;
    gap: var(--cf-space-2, 0.5rem);
    align-items: stretch;
    margin-top: var(--cf-space-2, 0.5rem);
}

.cf-v2-module-config__form-actions .cf-btn {
    width: 100%;
}

@media (min-width: 560px) {
    .cf-v2-module-config__form-actions {
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
    }

    .cf-v2-module-config__form-actions .cf-btn {
        width: auto;
    }
}

/* Subscription autocomplete two-line item template */
.cf-v2-module-config__autocomplete-item {
    display: flex;
    flex-direction: column;
    gap: var(--cf-space-0-5, 2px);
}

/* --- Required-scopes informational banner (CrowdStrike / SentinelOne) - */
.cf-v2-module-config__scopes-banner {
    display: flex;
    flex-direction: column;
    gap: var(--cf-space-1, 0.25rem);
    padding: var(--cf-space-3, 0.75rem) var(--cf-space-4, 1rem);
    border-radius: var(--cf-radius-md, 8px);
    background: var(--cf-bg-elevated-1, rgba(255, 255, 255, 0.03));
    border: 1px solid var(--cf-color-border-subtle, rgba(255, 255, 255, 0.06));
}

.cf-v2-module-config__scopes-list {
    margin: var(--cf-space-1, 0.25rem) 0 0 0;
    padding-left: var(--cf-space-5, 1.25rem);
    color: var(--cf-text-muted, #98a2b3);
    font-size: 0.875rem;
    line-height: 1.5;
}

.cf-v2-module-config__scopes-list li + li {
    margin-top: var(--cf-space-1, 0.25rem);
}

/* --- Module scopes (consent + permission groups + forwarding switch) -- */
.cf-v2-module-config__scopes {
    display: flex;
    flex-direction: column;
    gap: var(--cf-space-4, 1rem);
}

.cf-v2-module-config__scopes-header {
    display: flex;
    flex-direction: column;
    gap: var(--cf-space-3, 0.75rem);
    align-items: stretch;
}

.cf-v2-module-config__scopes-identity {
    display: flex;
    flex-direction: column;
    gap: var(--cf-space-0-5, 2px);
    flex: 1 1 auto;
    min-width: 0;
}

.cf-v2-module-config__scopes-header .cf-btn {
    width: 100%;
}

@media (min-width: 560px) {
    .cf-v2-module-config__scopes-header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .cf-v2-module-config__scopes-header .cf-btn {
        width: auto;
        flex: 0 0 auto;
    }
}

.cf-v2-module-config__permissions {
    display: flex;
    flex-direction: column;
    gap: var(--cf-space-2, 0.5rem);
}

.cf-v2-module-config__permissions-list {
    display: flex;
    flex-direction: column;
    gap: var(--cf-space-3, 0.75rem);
}

.cf-v2-module-config__permissions-row {
    display: flex;
    flex-direction: column;
    gap: var(--cf-space-0-5, 2px);
    padding: var(--cf-space-2, 0.5rem) 0;
    border-bottom: 1px solid var(--cf-color-border-subtle, rgba(255, 255, 255, 0.06));
}

.cf-v2-module-config__permissions-row:last-child {
    border-bottom: none;
}

.cf-v2-module-config__forwarding {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--cf-space-4, 1rem);
    padding: var(--cf-space-3, 0.75rem) var(--cf-space-4, 1rem);
    border-radius: var(--cf-radius-md, 8px);
    background: var(--cf-bg-elevated-1, rgba(255, 255, 255, 0.03));
    border: 1px solid var(--cf-color-border-subtle, rgba(255, 255, 255, 0.06));
}

.cf-v2-module-config__forwarding-copy {
    display: flex;
    flex-direction: column;
    gap: var(--cf-space-0-5, 2px);
    flex: 1 1 auto;
    min-width: 0;
}

/* --- CrowdStrike alert types (read-only summary lists) --------------- */
.cf-v2-module-config__alert-types-list {
    margin: var(--cf-space-1, 0.25rem) 0 0 0;
    padding-left: var(--cf-space-5, 1.25rem);
    color: var(--cf-text-muted, #98a2b3);
    font-size: 0.875rem;
    line-height: 1.5;
}

.cf-v2-module-config__alert-types-list li + li {
    margin-top: var(--cf-space-1, 0.25rem);
}

.cf-v2-module-config__alert-types-list strong {
    color: var(--cf-text-primary, #f9fafb);
}

.cf-v2-module-config__alert-types-value {
    color: var(--cf-text-secondary, #cbd5e1);
}

/* --- Test Connection verification (CrowdStrike) ---------------------- */
.cf-v2-module-config__verification {
    display: flex;
    flex-direction: column;
    gap: var(--cf-space-3, 0.75rem);
    padding: var(--cf-space-3, 0.75rem) var(--cf-space-4, 1rem);
    border-radius: var(--cf-radius-md, 8px);
    background: var(--cf-bg-elevated-1, rgba(255, 255, 255, 0.03));
    border: 1px solid var(--cf-color-border-subtle, rgba(255, 255, 255, 0.06));
}

.cf-v2-module-config__verification-row {
    display: flex;
    align-items: flex-start;
    gap: var(--cf-space-3, 0.75rem);
}

.cf-v2-module-config__verification-icon {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--cf-text-muted, #98a2b3);
}

.cf-v2-module-config__verification-icon--ok   { color: var(--cf-status-success, #34d399); }
.cf-v2-module-config__verification-icon--fail { color: var(--cf-status-error-light, #f87171); }
.cf-v2-module-config__verification-icon--info { color: var(--cf-status-info-light, #5597ff); }

.cf-v2-module-config__verification-icon .cf-icon {
    width: 18px;
    height: 18px;
}

.cf-v2-module-config__verification-text {
    display: flex;
    flex-direction: column;
    gap: var(--cf-space-0-5, 2px);
    flex: 1 1 auto;
    min-width: 0;
}

/* ========================================================================
   CMS / Security Analytics page (V2) — Sentinel Marketplace tab
   shared layout vocabulary used across the marketplace cards (sources,
   summary, rules), the source-card primitive, and the rule deployments
   grid. Lives globally because these classes are referenced from multiple
   .razor files; Blazor scoped CSS would not reach across them.
   ======================================================================== */

/* --- Scanned-sources card header (title/last-scanned + search/scan) ---
   The CFCard's .cf-card__header is itself a flex row with
   justify-content: space-between. Our single child needs flex:1 + width:100%
   so it spans the header — otherwise it shrinks to its content and the
   internal margin-left:auto on the actions has nothing to push against,
   leaving the actions stuck on the left edge. */
.cf-v2-cms__sources-head {
    display: flex;
    flex-direction: column;
    gap: var(--cf-space-3, 0.75rem);
    align-items: stretch;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
}

.cf-v2-cms__sources-head-copy {
    display: flex;
    flex-direction: column;
    gap: var(--cf-space-0-5, 2px);
    flex: 0 1 auto;
    min-width: 0;
}

.cf-v2-cms__sources-head-actions {
    display: flex;
    flex-direction: column;
    gap: var(--cf-space-2, 0.5rem);
    align-items: stretch;
}

.cf-v2-cms__sources-head-actions .cf-textfield,
.cf-v2-cms__sources-head-actions .cf-btn {
    width: 100%;
}

@media (min-width: 560px) {
    .cf-v2-cms__sources-head {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
    }

    /* Push actions to the far right regardless of how wide the title block is. */
    .cf-v2-cms__sources-head-actions {
        flex-direction: row;
        align-items: center;
        flex: 0 0 auto;
        margin-left: auto;
    }

    .cf-v2-cms__sources-head-actions .cf-textfield {
        width: 240px;
    }

    .cf-v2-cms__sources-head-actions .cf-btn {
        width: auto;
    }
}

/* --- Source-card grid -------------------------------------------------- */
.cf-v2-cms__source-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--cf-space-3, 0.75rem);
}

@media (min-width: 560px) {
    .cf-v2-cms__source-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 960px) {
    .cf-v2-cms__source-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .cf-v2-cms__source-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* --- Source card primitive (selectable button) ------------------------ */
.cf-v2-cms__source-card {
    display: flex;
    align-items: stretch;
    gap: var(--cf-space-3, 0.75rem);
    padding: var(--cf-space-4, 1rem);
    border-radius: var(--cf-radius-md, 8px);
    background: var(--cf-bg-elevated-1, rgba(255, 255, 255, 0.03));
    border: 1px solid var(--cf-color-border-subtle, rgba(255, 255, 255, 0.08));
    cursor: pointer;
    text-align: left;
    width: 100%;
    color: inherit;
    font: inherit;
    transition: background-color 120ms ease, border-color 120ms ease;
}

.cf-v2-cms__source-card:hover {
    background: var(--cf-bg-elevated-2, rgba(255, 255, 255, 0.06));
    border-color: var(--cf-color-border, rgba(255, 255, 255, 0.16));
}

.cf-v2-cms__source-card:focus-visible {
    outline: 2px solid var(--cf-color-accent, #6366f1);
    outline-offset: 2px;
}

.cf-v2-cms__source-card[data-selected="true"] {
    background: var(--cf-bg-elevated-3, rgba(255, 255, 255, 0.08));
    border-color: var(--cf-color-accent, #6366f1);
    cursor: default;
}

.cf-v2-cms__source-card-icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: var(--cf-radius-md, 8px);
    background: var(--cf-bg-elevated-2, rgba(255, 255, 255, 0.04));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.cf-v2-cms__source-card-icon img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.cf-v2-cms__source-card-icon .cf-icon {
    width: 22px;
    height: 22px;
    color: var(--cf-text-muted, #98a2b3);
}

.cf-v2-cms__source-card-body {
    display: flex;
    flex-direction: column;
    gap: var(--cf-space-0-5, 2px);
    flex: 1 1 auto;
    min-width: 0;
}

.cf-v2-cms__source-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cf-space-2, 0.5rem);
}

.cf-v2-cms__source-card-pip {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--cf-text-muted, #98a2b3);
    flex: 0 0 auto;
}

.cf-v2-cms__source-card-pip--ok      { background: var(--cf-status-success-fg, #34d399); }
.cf-v2-cms__source-card-pip--info    { background: var(--cf-color-accent, #6366f1); }
.cf-v2-cms__source-card-pip--warning { background: var(--cf-status-warning-fg, #f59e0b); }
.cf-v2-cms__source-card-pip--error   { background: var(--cf-status-error-fg, #f87171); }

/* --- Summary card (activity + donut) ---------------------------------- */
.cf-v2-cms__summary-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--cf-space-4, 1rem);
}

@media (min-width: 960px) {
    .cf-v2-cms__summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.cf-v2-cms__summary-panel {
    display: flex;
    flex-direction: column;
    gap: var(--cf-space-2, 0.5rem);
    padding: var(--cf-space-4, 1rem);
    border-radius: var(--cf-radius-md, 8px);
    background: var(--cf-bg-elevated-1, rgba(255, 255, 255, 0.03));
    border: 1px solid var(--cf-color-border-subtle, rgba(255, 255, 255, 0.08));
    min-height: 280px;
}

.cf-v2-cms__summary-empty {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}

.cf-v2-cms__summary-chart {
    flex: 1 1 auto;
    min-height: 220px;
    display: flex;
    flex-direction: column;
}

.cf-v2-cms__chart {
    width: 100%;
    height: 100%;
    min-height: 200px;
    display: block;
    font-family: inherit;
}

.cf-v2-cms__chart-fill {
    fill: var(--cf-status-info, #2557F9);
    fill-opacity: 0.18;
    stroke: none;
}

.cf-v2-cms__chart-stroke {
    fill: none;
    stroke: var(--cf-status-info, #2557F9);
    stroke-width: 1.6;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.cf-v2-cms__chart-gridline {
    stroke: var(--cf-color-border, rgba(255, 255, 255, 0.12));
    stroke-width: 1;
    stroke-dasharray: 2 4;
}

.cf-v2-cms__chart-axis {
    stroke: var(--cf-color-border, rgba(255, 255, 255, 0.18));
    stroke-width: 1;
}

.cf-v2-cms__chart-tick {
    stroke: var(--cf-color-border, rgba(255, 255, 255, 0.18));
    stroke-width: 1;
}

.cf-v2-cms__chart-y-label,
.cf-v2-cms__chart-x-label {
    font-size: 11px;
    fill: var(--cf-text-secondary, #A1A1AA);
}

/* --- Coverage progress + stat row (analytic-rules summary panel) ------ */
.cf-v2-cms__coverage {
    display: flex;
    flex-direction: column;
    gap: var(--cf-space-1, 0.25rem);
    margin-top: var(--cf-space-2, 0.5rem);
}

.cf-v2-cms__coverage-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--cf-space-2, 0.5rem);
}

.cf-v2-cms__coverage-bar {
    display: flex;
    width: 100%;
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--cf-color-border, rgba(255, 255, 255, 0.1));
}

.cf-v2-cms__coverage-segment {
    display: block;
    height: 100%;
    transition: width 240ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .cf-v2-cms__coverage-segment { transition: none; }
}

.cf-v2-cms__coverage-segment--info    { background: var(--cf-status-info, #2557F9); }
.cf-v2-cms__coverage-segment--success { background: var(--cf-status-success, #34D399); }
.cf-v2-cms__coverage-segment--muted   { background: var(--cf-text-secondary, #A1A1AA); }

.cf-v2-cms__stats-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--cf-space-3, 0.75rem);
    margin-top: var(--cf-space-2, 0.5rem);
    padding-top: var(--cf-space-3, 0.75rem);
    border-top: 1px solid var(--cf-color-border-subtle, rgba(255, 255, 255, 0.08));
}

.cf-v2-cms__stat {
    display: flex;
    flex-direction: column;
    gap: var(--cf-space-0-5, 2px);
    align-items: flex-start;
}

/* --- Analytical rules tab header (title + counter + search + refresh) -- */
.cf-v2-cms__rules-head {
    display: flex;
    flex-direction: column;
    gap: var(--cf-space-3, 0.75rem);
    align-items: stretch;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
}

.cf-v2-cms__rules-head-copy {
    display: flex;
    flex-direction: column;
    gap: var(--cf-space-0-5, 2px);
    flex: 0 1 auto;
    min-width: 0;
}

.cf-v2-cms__rules-head-actions {
    display: flex;
    flex-direction: column;
    gap: var(--cf-space-2, 0.5rem);
    align-items: stretch;
}

.cf-v2-cms__rules-head-actions .cf-textfield {
    width: 100%;
}

@media (min-width: 560px) {
    .cf-v2-cms__rules-head {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
    }

    .cf-v2-cms__rules-head-actions {
        flex-direction: row;
        align-items: center;
        flex: 0 0 auto;
        margin-left: auto;
    }

    .cf-v2-cms__rules-head-actions .cf-textfield {
        width: 240px;
    }
}

/* --- Analytical rules filter chip rows (severity + status) ----------- */
.cf-v2-cms__rules-filter-row {
    display: flex;
    flex-direction: column;
    gap: var(--cf-space-3, 0.75rem);
    padding-bottom: var(--cf-space-3, 0.75rem);
    border-bottom: 1px solid var(--cf-color-border-subtle, rgba(255, 255, 255, 0.08));
}

.cf-v2-cms__rules-filter-group {
    display: flex;
    flex-direction: column;
    gap: var(--cf-space-1, 0.25rem);
}

.cf-v2-cms__rules-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cf-space-2, 0.5rem);
}

@media (min-width: 720px) {
    .cf-v2-cms__rules-filter-row {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: var(--cf-space-5, 1.25rem);
    }

    .cf-v2-cms__rules-filter-row > .cf-btn {
        margin-left: auto;
        align-self: flex-end;
    }
}

/* Filter-chip primitive — toggles between active and inactive state via the
   data-active attribute. */
.cf-v2-cms__filter-chip {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 var(--cf-space-3, 0.75rem);
    border-radius: 999px;
    background: var(--cf-bg-elevated-1, rgba(255, 255, 255, 0.04));
    border: 1px solid var(--cf-color-border-subtle, rgba(255, 255, 255, 0.12));
    color: var(--cf-text-secondary, #A1A1AA);
    font: inherit;
    font-size: 0.8125rem;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.cf-v2-cms__filter-chip:hover {
    background: var(--cf-bg-elevated-2, rgba(255, 255, 255, 0.08));
    border-color: var(--cf-color-border, rgba(255, 255, 255, 0.2));
    color: var(--cf-text-primary, #ffffff);
}

.cf-v2-cms__filter-chip:focus-visible {
    outline: 2px solid var(--cf-color-accent, #6366f1);
    outline-offset: 2px;
}

.cf-v2-cms__filter-chip[data-active="true"] {
    background: color-mix(in srgb, var(--cf-status-info, #2557F9) 20%, transparent);
    border-color: var(--cf-status-info, #2557F9);
    color: var(--cf-status-info-light, #5597FF);
}

@media (prefers-reduced-motion: reduce) {
    .cf-v2-cms__filter-chip { transition: none; }
}

/* --- Rule details (general / logic / configuration) ------------------- */
.cf-v2-rule-details__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--cf-space-3, 0.75rem);
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
}

.cf-v2-rule-details__head-text {
    display: flex;
    flex-direction: column;
    gap: var(--cf-space-0-5, 2px);
    flex: 1 1 auto;
    min-width: 0;
}

.cf-v2-rule-details__field {
    display: flex;
    flex-direction: column;
    gap: var(--cf-space-1, 0.25rem);
}

.cf-v2-rule-details__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--cf-space-4, 1rem);
}

@media (min-width: 720px) {
    .cf-v2-rule-details__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.cf-v2-rule-details__tactic-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cf-space-2, 0.5rem);
}

/* Rule description — Markdown rendered via Markdig (DisableHtml). Style the full
   set of structural elements rule authors use: headings, paragraphs, lists, code,
   blockquotes, and inline links. */
.cf-v2-rule-details__description {
    color: var(--cf-text-primary, #f4f4f5);
    font-size: 0.875rem;
    line-height: 1.55;
}

.cf-v2-rule-details__description > *:first-child {
    margin-top: 0;
}

.cf-v2-rule-details__description > *:last-child {
    margin-bottom: 0;
}

.cf-v2-rule-details__description h1,
.cf-v2-rule-details__description h2,
.cf-v2-rule-details__description h3,
.cf-v2-rule-details__description h4,
.cf-v2-rule-details__description h5,
.cf-v2-rule-details__description h6 {
    margin: var(--cf-space-4, 1rem) 0 var(--cf-space-1, 0.25rem) 0;
    font-weight: 600;
    color: var(--cf-text-primary, #f4f4f5);
    line-height: 1.3;
}

.cf-v2-rule-details__description h1 { font-size: 1.05rem; }
.cf-v2-rule-details__description h2 { font-size: 1rem; }
.cf-v2-rule-details__description h3 { font-size: 0.9375rem; }
.cf-v2-rule-details__description h4,
.cf-v2-rule-details__description h5,
.cf-v2-rule-details__description h6 { font-size: 0.875rem; }

.cf-v2-rule-details__description p {
    margin: 0 0 var(--cf-space-2, 0.5rem) 0;
}

.cf-v2-rule-details__description ul,
.cf-v2-rule-details__description ol {
    margin: 0 0 var(--cf-space-2, 0.5rem) 0;
    padding-left: var(--cf-space-5, 1.25rem);
}

.cf-v2-rule-details__description li + li {
    margin-top: var(--cf-space-0-5, 2px);
}

.cf-v2-rule-details__description a {
    color: var(--cf-status-info-light, #5597FF);
    text-decoration: underline;
    text-underline-offset: 2px;
    word-break: break-word;
}

.cf-v2-rule-details__description a:hover {
    color: var(--cf-status-info, #2557F9);
}

.cf-v2-rule-details__description code {
    padding: 0.1em 0.35em;
    border-radius: var(--cf-radius-sm, 4px);
    background: var(--cf-bg-elevated-2, rgba(255, 255, 255, 0.06));
    border: 1px solid var(--cf-color-border-subtle, rgba(255, 255, 255, 0.08));
    font-family: var(--cf-font-mono, ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace);
    font-size: 0.8125rem;
}

.cf-v2-rule-details__description pre {
    margin: 0 0 var(--cf-space-2, 0.5rem) 0;
    padding: var(--cf-space-3, 0.75rem) var(--cf-space-4, 1rem);
    border-radius: var(--cf-radius-md, 8px);
    background: var(--cf-bg-elevated-2, rgba(255, 255, 255, 0.06));
    border: 1px solid var(--cf-color-border-subtle, rgba(255, 255, 255, 0.08));
    overflow: auto;
}

.cf-v2-rule-details__description pre code {
    padding: 0;
    border: none;
    background: transparent;
}

.cf-v2-rule-details__description blockquote {
    margin: 0 0 var(--cf-space-2, 0.5rem) 0;
    padding: var(--cf-space-1, 0.25rem) var(--cf-space-3, 0.75rem);
    border-left: 3px solid var(--cf-color-border, rgba(255, 255, 255, 0.16));
    color: var(--cf-text-secondary, #A1A1AA);
}

.cf-v2-rule-details__description hr {
    margin: var(--cf-space-3, 0.75rem) 0;
    border: none;
    border-top: 1px solid var(--cf-color-border-subtle, rgba(255, 255, 255, 0.08));
}

/* Code block — inline V2 styling for the rule query, no JS dependency. */
.cf-v2-rule-details__code {
    position: relative;
    border-radius: var(--cf-radius-md, 8px);
    background: var(--cf-bg-elevated-2, rgba(255, 255, 255, 0.05));
    border: 1px solid var(--cf-color-border-subtle, rgba(255, 255, 255, 0.08));
    overflow: hidden;
}

.cf-v2-rule-details__code pre {
    margin: 0;
    padding: var(--cf-space-3, 0.75rem) var(--cf-space-4, 1rem);
    max-height: 320px;
    min-height: 120px;
    overflow: auto;
    font-family: var(--cf-font-mono, ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace);
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--cf-text-primary, #f4f4f5);
    white-space: pre-wrap;
    word-break: break-word;
}

.cf-v2-rule-details__code-actions {
    position: absolute;
    top: var(--cf-space-2, 0.5rem);
    right: var(--cf-space-2, 0.5rem);
}

/* Entity mappings — list of identifier → column-name pills. */
.cf-v2-rule-details__entities {
    display: flex;
    flex-direction: column;
    gap: var(--cf-space-2, 0.5rem);
}

.cf-v2-rule-details__entity-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--cf-space-3, 0.75rem);
}

@media (min-width: 720px) {
    .cf-v2-rule-details__entity-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1100px) {
    .cf-v2-rule-details__entity-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.cf-v2-rule-details__entity {
    display: flex;
    flex-direction: column;
    gap: var(--cf-space-2, 0.5rem);
    padding: var(--cf-space-3, 0.75rem) var(--cf-space-4, 1rem);
    border-radius: var(--cf-radius-md, 8px);
    background: var(--cf-bg-elevated-1, rgba(255, 255, 255, 0.03));
    border: 1px solid var(--cf-color-border-subtle, rgba(255, 255, 255, 0.06));
}

.cf-v2-rule-details__entity-row {
    display: flex;
    align-items: center;
    gap: var(--cf-space-2, 0.5rem);
    min-width: 0;
}

.cf-v2-rule-details__entity-pill {
    flex: 1 1 0;
    min-width: 0;
    padding: var(--cf-space-1, 0.25rem) var(--cf-space-2, 0.5rem);
    border-radius: var(--cf-radius-sm, 4px);
    background: var(--cf-bg-elevated-2, rgba(255, 255, 255, 0.06));
    border: 1px solid var(--cf-color-border-subtle, rgba(255, 255, 255, 0.08));
    font-size: 0.8125rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cf-v2-rule-details__entity-arrow {
    flex: 0 0 auto;
    color: var(--cf-text-secondary, #A1A1AA);
}

/* --- Rule configuration (deploy / auto-update / enable switches) ------ */
.cf-v2-rule-config {
    display: flex;
    flex-direction: column;
    gap: var(--cf-space-4, 1rem);
}

.cf-v2-rule-config__head {
    display: flex;
    align-items: center;
    gap: var(--cf-space-2, 0.5rem);
}

.cf-v2-rule-config__head .cf-icon {
    width: 16px;
    height: 16px;
    color: var(--cf-text-secondary, #A1A1AA);
}

.cf-v2-rule-config__row {
    display: flex;
    align-items: flex-start;
    gap: var(--cf-space-3, 0.75rem);
    padding: var(--cf-space-3, 0.75rem) 0;
    border-top: 1px solid var(--cf-color-border-subtle, rgba(255, 255, 255, 0.06));
}

.cf-v2-rule-config__row:first-of-type {
    border-top: none;
    padding-top: 0;
}

.cf-v2-rule-config__row-copy {
    display: flex;
    flex-direction: column;
    gap: var(--cf-space-0-5, 2px);
    flex: 1 1 auto;
    min-width: 0;
}

/* --- Rules grid cell helpers ------------------------------------------ */
.cf-v2-cms__rule-name,
.cf-v2-cms__rule-tactics {
    display: inline-block;
    max-width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.cf-v2-cms__rule-version {
    display: inline-flex;
    align-items: center;
    gap: var(--cf-space-1, 0.25rem);
}

.cf-v2-cms__rule-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--cf-space-1, 0.25rem);
}

/* --- Empty / no-results state ----------------------------------------- */
.cf-v2-cms__empty {
    display: flex;
    align-items: flex-start;
    gap: var(--cf-space-3, 0.75rem);
    padding: var(--cf-space-6, 1.5rem) var(--cf-space-4, 1rem);
    border-radius: var(--cf-radius-md, 8px);
    background: var(--cf-bg-elevated-1, rgba(255, 255, 255, 0.03));
    border: 1px dashed var(--cf-color-border-subtle, rgba(255, 255, 255, 0.12));
}

.cf-v2-cms__empty .cf-icon {
    width: 28px;
    height: 28px;
    color: var(--cf-text-muted, #98a2b3);
    flex: 0 0 auto;
}

/* === FR-210 / PLAT-3068 SLA configuration form ============================ */

/* Details page layout: column stack of cards + sticky save bar. */
.cf-v2-sla-details {
    display: flex;
    flex-direction: column;
    gap: var(--cf-space-4, 1rem);
    min-width: 0;
}

.cf-v2-sla-details__list {
    display: flex;
    flex-direction: column;
    gap: var(--cf-space-2, 0.5rem);
}

.cf-v2-sla-details__list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cf-space-3, 0.75rem);
    padding: var(--cf-space-2, 0.5rem) var(--cf-space-3, 0.75rem);
    border-radius: var(--cf-radius-md, 8px);
    background: var(--cf-bg-elevated-1, rgba(255, 255, 255, 0.03));
    border: 1px solid var(--cf-color-border-subtle, rgba(255, 255, 255, 0.08));
    min-width: 0;
}

.cf-v2-sla-details__list-copy {
    flex: 1 1 auto;
    min-width: 0;
}

.cf-v2-sla-details__list-actions {
    flex: 0 0 auto;
}

.cf-v2-sla-details__save-bar {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: flex;
    justify-content: flex-end;
    gap: var(--cf-space-2, 0.5rem);
    padding: var(--cf-space-3, 0.75rem) 0;
    background: var(--cf-color-card, var(--cf-bg-elevated-1, #1a1d23));
    box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.18);
}

/* Form-level "Advanced options" toggle row: label + helper text on the left,
   CFSwitch on the right; column-stacks on small screens. */
.cf-v2-sla-form__advanced-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cf-space-3, 0.75rem);
    padding: var(--cf-space-3, 0.75rem) 0;
    border-top: 1px solid var(--cf-color-border-subtle, rgba(255, 255, 255, 0.08));
    border-bottom: 1px solid var(--cf-color-border-subtle, rgba(255, 255, 255, 0.08));
    min-width: 0;
}

.cf-v2-sla-form__advanced-row-text {
    display: flex;
    flex-direction: column;
    gap: var(--cf-space-0-5, 2px);
    min-width: 0;
}

/* 4-up severity card grid: 1 column on mobile, 2 columns mid, 4 columns wide. */
.cf-v2-sla-form__severity-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--cf-space-3, 0.75rem);
    min-width: 0;
}

@media (min-width: 720px) {
    .cf-v2-sla-form__severity-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .cf-v2-sla-form__severity-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Per-severity card: bordered tile with chip header + stacked fields. */
.cf-v2-sla-severity-card {
    display: flex;
    flex-direction: column;
    gap: var(--cf-space-3, 0.75rem);
    padding: var(--cf-space-4, 1rem);
    border-radius: var(--cf-radius-md, 8px);
    border: 1px solid var(--cf-color-border-subtle, rgba(255, 255, 255, 0.12));
    background: var(--cf-bg-elevated-1, rgba(255, 255, 255, 0.03));
    min-width: 0;
}

.cf-v2-sla-severity-card__header {
    display: flex;
    align-items: flex-start;
    gap: var(--cf-space-2, 0.5rem);
}

/* Numeric inputs stack vertically inside the card so narrow card widths (half-screen 4-up grid)
   don't squeeze the labels into multi-line wraps. Matches the agent severity card rhythm where
   each field is a full-width row. */
.cf-v2-sla-severity-card__grid {
    display: flex;
    flex-direction: column;
    gap: var(--cf-space-2, 0.5rem);
    min-width: 0;
}