/* /Layout/CloudAccountFindingsDrawer.razor.rz.scp.css */
/* ===========================
   Record Detail Drawer
   =========================== */

.record-overlay[b-gw48zr57ud] {
    position: absolute;
    inset: 0;
    z-index: 1100;
    pointer-events: auto;
}

.record-floating-actions[b-gw48zr57ud] {
    width: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
    flex-shrink: 0;
    z-index: 9999;
}

.record-drawer[b-gw48zr57ud] {
    width: clamp(700px, 60vw, 1200px);
    min-width: 700px;
    height: 100%;
    background: #FFFFFF;
    border-left: 1px solid #E5E7EB;
    box-shadow: -8px 0 24px rgba(0,0,0,.18);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: slideIn-b-gw48zr57ud .25s ease;
}

.record-drawer-wrapper[b-gw48zr57ud] {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    display: flex;
    align-items: flex-start;
    z-index: 1200;
}

.record-drawer.fullscreen[b-gw48zr57ud] {
    width: calc(100vw - 120px);
    min-width: calc(100vw - 120px);
}

.floating-button[b-gw48zr57ud] {
    width: 44px;
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    border: 1px solid #D9D9D9;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
}

    .floating-button:hover[b-gw48zr57ud] {
        background: #F3F4F6;
        border-color: #BFC5CD;
        transform: translateY(-1px);
    }

    .floating-button:active[b-gw48zr57ud] {
        background: #E5E7EB;
    }

/* ===========================
   Header
   =========================== */

.record-header[b-gw48zr57ud] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 16px 24px 14px;
    border-bottom: 1px solid #ECECEC;
    flex-shrink: 0;
}

.header-left[b-gw48zr57ud] {
    display: flex;
    flex-direction: column;
}

.header-right[b-gw48zr57ud] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.resource-id[b-gw48zr57ud] {
    font-size: 20px;
    font-weight: 600;
    color: #202124;
    line-height: 1.2;
}

.resource-type[b-gw48zr57ud] {
    margin-top: 2px;
    font-size: 13px;
    color: #6B7280;
}

/* Pill-style action buttons */
[b-gw48zr57ud] .header-chip.mud-chip {
    background: #F3F4F6 !important;
    border: 1px solid #D9D9D9;
    border-radius: 6px;
    color: #374151 !important;
    font-size: 13px;
    font-weight: 500;
    height: 34px;
    padding: 0 12px;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}

    [b-gw48zr57ud] .header-chip.mud-chip:hover {
        background: #E5E7EB !important;
        border-color: #BFC5CD;
    }

[b-gw48zr57ud] .header-chip-icon-only.mud-chip {
    padding: 0 8px;
    min-width: 34px;
    justify-content: center;
}

[b-gw48zr57ud] .header-chip .mud-chip-icon {
    color: #5A6A85 !important;
}

/* ===========================
   Body — no sidebar in this drawer, single full-width content area
   =========================== */

.record-body[b-gw48zr57ud] {
    flex: 1;
    display: flex;
    overflow: hidden;
    background: #FFFFFF;
    padding: 20px;
}

.record-content-full[b-gw48zr57ud] {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    padding: 12px 8px;
}

/* ===========================
   Section header
   =========================== */

.section-header[b-gw48zr57ud] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
}

.section-icon[b-gw48zr57ud] {
    color: #5A6A85;
    font-size: 22px;
}

.section-title[b-gw48zr57ud] {
    font-size: 20px;
    font-weight: 600;
    color: #202124;
    margin: 0;
}

/* ===========================
   Findings mini grid (wireframe filter row + data table)
   =========================== */

.vuln-filter-row[b-gw48zr57ud] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background: #1A1D2E;
    border-radius: 8px;
    margin-bottom: 16px;
}

.vuln-filter-chip[b-gw48zr57ud] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: #374151;
    color: #E5E7EB;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    user-select: none;
}

    .vuln-filter-chip:hover[b-gw48zr57ud] {
        background: #4B5563;
    }

    .vuln-filter-chip .mud-icon-root[b-gw48zr57ud] {
        color: #9CA3AF;
    }

.vuln-filter-clear[b-gw48zr57ud] {
    margin-left: auto;
    color: #93C5FD;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    padding: 6px 8px;
}

    .vuln-filter-clear:hover[b-gw48zr57ud] {
        text-decoration: underline;
    }

/* Force table-layout:fixed so the explicit column Widths above are actually
   honored. A permanent scrollbar track is shown via overflow-x:scroll below
   purely as a visual cue — it doesn't require the table to actually
   overflow, so width:100% (which keeps columns capped at their set widths)
   stays intact rather than being replaced with max-content. */
[b-gw48zr57ud] .vuln-mini-grid {
    overflow-x: scroll;
}

    [b-gw48zr57ud] .vuln-mini-grid table {
        table-layout: fixed;
        width: 100%;
    }

    [b-gw48zr57ud] .vuln-mini-grid .mud-table-cell {
        font-size: 13px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.vuln-id-link[b-gw48zr57ud] {
    color: #0072C6;
    font-weight: 500;
    cursor: pointer;
}

    .vuln-id-link:hover[b-gw48zr57ud] {
        text-decoration: underline;
    }

.vuln-truncate[b-gw48zr57ud] {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: top;
}

/* ===========================
   Animation
   =========================== */

@keyframes slideIn-b-gw48zr57ud {

    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}
/* /Layout/CloudAssetDetailDrawer.razor.rz.scp.css */
/* ===========================
   Record Detail Drawer
   =========================== */

.record-overlay[b-d6b4tm4db2] {
    position: absolute;
    inset: 0;
    z-index: 1100;
    pointer-events: auto;
}

.record-floating-actions[b-d6b4tm4db2] {
    width: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
    flex-shrink: 0;
    z-index: 9999;
}

.record-drawer[b-d6b4tm4db2] {
    width: clamp(700px, 60vw, 1200px);
    min-width: 700px;
    height: 100%;
    background: #FFFFFF;
    border-left: 1px solid #E5E7EB;
    box-shadow: -8px 0 24px rgba(0,0,0,.18);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: slideIn-b-d6b4tm4db2 .25s ease;
}

.record-drawer-wrapper[b-d6b4tm4db2] {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    display: flex;
    align-items: flex-start;
    z-index: 1200;
}

.record-drawer.fullscreen[b-d6b4tm4db2] {
    width: calc(100vw - 120px);
    min-width: calc(100vw - 120px);
}

.floating-button[b-d6b4tm4db2] {
    width: 44px;
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    border: 1px solid #D9D9D9;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
}

    .floating-button:hover[b-d6b4tm4db2] {
        background: #F3F4F6;
        border-color: #BFC5CD;
        transform: translateY(-1px);
    }

    .floating-button:active[b-d6b4tm4db2] {
        background: #E5E7EB;
    }

/* ===========================
   Header
   =========================== */

.record-header[b-d6b4tm4db2] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 16px 24px 14px;
    border-bottom: 1px solid #ECECEC;
    flex-shrink: 0;
}

.header-left[b-d6b4tm4db2] {
    display: flex;
    flex-direction: column;
}

.header-right[b-d6b4tm4db2] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.resource-id[b-d6b4tm4db2] {
    font-size: 20px;
    font-weight: 600;
    color: #202124;
    line-height: 1.2;
}

.resource-type[b-d6b4tm4db2] {
    margin-top: 2px;
    font-size: 13px;
    color: #6B7280;
}

/* Pill-style action buttons matching the CrowdStrike header row
   (View in Timeline Explorer / Host Management / link / more) */
[b-d6b4tm4db2] .header-chip.mud-chip {
    background: #F3F4F6 !important;
    border: 1px solid #D9D9D9;
    border-radius: 6px;
    color: #374151 !important;
    font-size: 13px;
    font-weight: 500;
    height: 34px;
    padding: 0 12px;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}

    [b-d6b4tm4db2] .header-chip.mud-chip:hover {
        background: #E5E7EB !important;
        border-color: #BFC5CD;
    }

[b-d6b4tm4db2] .header-chip-icon-only.mud-chip {
    padding: 0 8px;
    min-width: 34px;
    justify-content: center;
}

[b-d6b4tm4db2] .header-chip .mud-chip-icon {
    color: #5A6A85 !important;
}

/* ===========================
   Body
   =========================== */

/* Was a flex ROW (sidebar beside content). The tabs now sit ABOVE the
   content instead of beside it, so this is a flex COLUMN — the horizontal
   padding that used to live on .record-body moved onto .record-tabs and
   .record-content individually below, so each can control its own inset
   independently (the tab strip's bottom border needs to span full width,
   unbroken by side padding on record-body itself). */
.record-body[b-d6b4tm4db2] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #FFFFFF;
}

/* ===========================
   Tabs — horizontal strip above the content, replacing the old
   vertical sidebar list. Blue text + underline on the active tab,
   plain gray on the rest; no pill background, no border box.
   =========================== */

.record-tabs[b-d6b4tm4db2] {
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 0 24px;
    border-bottom: 1px solid #E5E7EB;
    flex-shrink: 0;
}

.tab-item[b-d6b4tm4db2] {
    position: relative;
    padding: 16px 2px 14px;
    font-size: 14px;
    font-weight: 500;
    color: #6B7280;
    cursor: pointer;
    white-space: nowrap;
    transition: color .15s ease;
}

    .tab-item:hover[b-d6b4tm4db2] {
        color: #374151;
    }

    .tab-item.active[b-d6b4tm4db2] {
        color: #0072C6;
        font-weight: 600;
    }

        /* Underline only on the active tab — grows from the tab's own text
       width via left/right:0 on this pseudo-element, not the full strip. */
        .tab-item.active[b-d6b4tm4db2]::after {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            bottom: -1px;
            height: 2px;
            background: #0072C6;
            border-radius: 1px;
        }

/* ===========================
   Content
   =========================== */

.record-content[b-d6b4tm4db2] {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
}

.section-header[b-d6b4tm4db2] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
}

.section-icon[b-d6b4tm4db2] {
    color: #5A6A85;
    font-size: 22px;
}

.section-title[b-d6b4tm4db2] {
    font-size: 20px;
    font-weight: 600;
    color: #202124;
    margin: 0;
}

.detail-grid[b-d6b4tm4db2] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 48px;
    row-gap: 28px;
}

    .detail-grid.fullscreen[b-d6b4tm4db2] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: 48px;
        row-gap: 32px;
    }

.vulnerability-block[b-d6b4tm4db2] {
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid #EDF2F7;
}

    .vulnerability-block:last-child[b-d6b4tm4db2] {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none;
    }

.vulnerability-block-title[b-d6b4tm4db2] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    font-weight: 600;
    color: #202124;
    margin-bottom: 16px;
}

/* ===========================
   Vulnerabilities mini grid (wireframe filter row + data table)
   =========================== */

.vuln-filter-row[b-d6b4tm4db2] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background: #1A1D2E;
    border-radius: 8px;
    margin-bottom: 16px;
}

.vuln-filter-chip[b-d6b4tm4db2] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: #374151;
    color: #E5E7EB;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    user-select: none;
}

    .vuln-filter-chip:hover[b-d6b4tm4db2] {
        background: #4B5563;
    }

    .vuln-filter-chip .mud-icon-root[b-d6b4tm4db2] {
        color: #9CA3AF;
    }

.vuln-filter-clear[b-d6b4tm4db2] {
    margin-left: auto;
    color: #93C5FD;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    padding: 6px 8px;
}

    .vuln-filter-clear:hover[b-d6b4tm4db2] {
        text-decoration: underline;
    }

/* Force table-layout:fixed so the explicit column Widths above are actually
   honored. A permanent scrollbar track is shown via overflow-x:scroll below
   purely as a visual cue — it doesn't require the table to actually
   overflow, so width:100% (which keeps columns capped at their set widths)
   stays intact rather than being replaced with max-content. */
[b-d6b4tm4db2] .vuln-mini-grid {
    overflow-x: scroll;
}

    [b-d6b4tm4db2] .vuln-mini-grid table {
        table-layout: fixed;
        width: 100%;
    }

    [b-d6b4tm4db2] .vuln-mini-grid .mud-table-cell {
        font-size: 13px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.vuln-id-link[b-d6b4tm4db2] {
    color: #0072C6;
    font-weight: 500;
    cursor: pointer;
}

    .vuln-id-link:hover[b-d6b4tm4db2] {
        text-decoration: underline;
    }

.vuln-truncate[b-d6b4tm4db2] {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: top;
}

.detail-item[b-d6b4tm4db2] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

    /* Reveals the copy button (rendered inside the CopyableValue child
   component) only while hovering the containing field. ::deep is required
   here because .copy-btn belongs to a different component's scoped CSS —
   without it, this selector would never match anything. */
    .detail-item:hover[b-d6b4tm4db2]  .copy-btn {
        opacity: 1;
    }

.label[b-d6b4tm4db2] {
    margin-bottom: 8px;
    font-size: 13px;
    color: #6B7280;
}

.value[b-d6b4tm4db2] {
    display: inline-block;
    max-width: 100%;
    vertical-align: top;
    font-size: 15px;
    font-weight: 500;
    color: #202124;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* MudTooltip wraps its content in its own element. The wrapper needs to be
   capped at the parent's width (so long text still triggers ellipsis on the
   nested .value once it hits that ceiling) WITHOUT being forced to that full
   width unconditionally — forcing width:100% made every tooltip's hover
   trigger span the entire column regardless of how short the actual text
   was, so MudTooltip positioned itself relative to that oversized invisible
   box instead of the small visible text, making it appear to float in empty
   space. max-width + inline-block lets it shrink-wrap to short content
   (correct tooltip alignment) while still capping/clipping long content. */
.value-wrapper[b-d6b4tm4db2] {
    display: block;
    width: 100%;
    min-width: 0;
}

[b-d6b4tm4db2] .value-wrapper > * {
    display: inline-block;
    max-width: 100%;
    min-width: 0;
    vertical-align: top;
}

/* ===========================
   Animation
   =========================== */

@keyframes slideIn-b-d6b4tm4db2 {

    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}
/* /Layout/CopyableValue.razor.rz.scp.css */
/* CSS for CopyableValue component */
.copyable-value-wrapper[b-bvl6sh5ef0] {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-width: 0;
}

.value-tooltip-wrapper[b-bvl6sh5ef0] {
    display: block;
    flex: 1;
    min-width: 0;
}

[b-bvl6sh5ef0] .value-tooltip-wrapper > * {
    display: inline-block;
    max-width: 100%;
    min-width: 0;
    vertical-align: top;
}

.value[b-bvl6sh5ef0] {
    display: inline-block;
    max-width: 100%;
    vertical-align: top;
    font-size: 15px;
    font-weight: 500;
    color: #202124;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.copy-btn[b-bvl6sh5ef0] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    opacity: 0;
    transition: opacity .15s ease, background .15s ease;
    cursor: pointer;
    flex-shrink: 0;
    color: #5A6A85;
}

    .copy-btn:hover[b-bvl6sh5ef0] {
        background: #F1F5F9;
    }
/* /Layout/EmReportDetailPage.razor.rz.scp.css */
.detail-item:hover[b-tqiuiwex59]  .copy-btn {
    opacity: 1;
}

.detail-page[b-tqiuiwex59] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: #FFFFFF;
}

.detail-page-header[b-tqiuiwex59] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20px 32px;
    border-bottom: 1px solid #ECECEC;
    flex-shrink: 0;
}

.header-left[b-tqiuiwex59] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.resource-id[b-tqiuiwex59] {
    font-size: 20px;
    font-weight: 600;
    color: #202124;
    line-height: 1.2;
}

.resource-type[b-tqiuiwex59] {
    margin-top: 2px;
    font-size: 13px;
    color: #6B7280;
}

/* Was a flex ROW (sidebar beside content). The tabs now sit ABOVE the
   content instead of beside it, so this is a flex COLUMN — the side
   padding that used to live here moved onto .detail-page-tabs and
   .detail-page-content individually below, so the tab strip's bottom
   border can span full width, unbroken by side padding on the row itself. */
.detail-page-body[b-tqiuiwex59] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* ===========================
   Tabs — horizontal strip above the content, replacing the old
   vertical sidebar list. Blue text + underline on the active tab,
   plain gray on the rest; no pill background, no border box.
   =========================== */

.detail-page-tabs[b-tqiuiwex59] {
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 0 20px;
    border-bottom: 1px solid #E5E7EB;
    flex-shrink: 0;
}

.tab-item[b-tqiuiwex59] {
    position: relative;
    padding: 16px 2px 14px;
    font-size: 14px;
    font-weight: 500;
    color: #6B7280;
    cursor: pointer;
    white-space: nowrap;
    transition: color .15s ease;
}

    .tab-item:hover[b-tqiuiwex59] {
        color: #374151;
    }

    .tab-item.active[b-tqiuiwex59] {
        color: #0072C6;
        font-weight: 600;
    }

        /* Underline only on the active tab — grows from the tab's own text
       width via left/right:0 on this pseudo-element, not the full strip. */
        .tab-item.active[b-tqiuiwex59]::after {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            bottom: -1px;
            height: 2px;
            background: #0072C6;
            border-radius: 1px;
        }

.detail-page-content[b-tqiuiwex59] {
    flex: 1;
    min-width: 0;
    padding: 20px;
}

.section-header[b-tqiuiwex59] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
}

.section-icon[b-tqiuiwex59] {
    color: #5A6A85;
    font-size: 22px;
}

.section-title[b-tqiuiwex59] {
    font-size: 20px;
    font-weight: 600;
    color: #202124;
    margin: 0;
}

.detail-grid[b-tqiuiwex59] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 32px;
    row-gap: 24px;
}

.detail-item[b-tqiuiwex59] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.label[b-tqiuiwex59] {
    margin-bottom: 8px;
    font-size: 13px;
    color: #6B7280;
}
/* /Layout/Findingdetaildrawer.razor.rz.scp.css */
/* ===========================
   Record Detail Drawer
   =========================== */

.record-overlay[b-2nmcatsbc7] {
    position: absolute;
    inset: 0;
    z-index: 1100;
    pointer-events: auto;
}

.record-floating-actions[b-2nmcatsbc7] {
    width: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
    flex-shrink: 0;
    z-index: 9999;
}

.record-drawer[b-2nmcatsbc7] {
    width: clamp(700px, 60vw, 1200px);
    min-width: 700px;
    height: 100%;
    background: #FFFFFF;
    border-left: 1px solid #E5E7EB;
    box-shadow: -8px 0 24px rgba(0,0,0,.18);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: slideIn-b-2nmcatsbc7 .25s ease;
}

.record-drawer-wrapper[b-2nmcatsbc7] {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    display: flex;
    align-items: flex-start;
    z-index: 1200;
}

.record-drawer.fullscreen[b-2nmcatsbc7] {
    width: calc(100vw - 120px);
    min-width: calc(100vw - 120px);
}

.floating-button[b-2nmcatsbc7] {
    width: 44px;
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    border: 1px solid #D9D9D9;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
}

    .floating-button:hover[b-2nmcatsbc7] {
        background: #F3F4F6;
        border-color: #BFC5CD;
        transform: translateY(-1px);
    }

    .floating-button:active[b-2nmcatsbc7] {
        background: #E5E7EB;
    }

/* ===========================
   Header
   =========================== */

.record-header[b-2nmcatsbc7] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 16px 24px 14px;
    border-bottom: 1px solid #ECECEC;
    flex-shrink: 0;
}

.header-left[b-2nmcatsbc7] {
    display: flex;
    flex-direction: column;
}

.header-right[b-2nmcatsbc7] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.resource-id[b-2nmcatsbc7] {
    font-size: 20px;
    font-weight: 600;
    color: #202124;
    line-height: 1.2;
}

.resource-type[b-2nmcatsbc7] {
    margin-top: 2px;
    font-size: 13px;
    color: #6B7280;
}

[b-2nmcatsbc7] .header-chip.mud-chip {
    background: #F3F4F6 !important;
    border: 1px solid #D9D9D9;
    border-radius: 6px;
    color: #374151 !important;
    font-size: 13px;
    font-weight: 500;
    height: 34px;
    padding: 0 12px;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}

    [b-2nmcatsbc7] .header-chip.mud-chip:hover {
        background: #E5E7EB !important;
        border-color: #BFC5CD;
    }

[b-2nmcatsbc7] .header-chip-icon-only.mud-chip {
    padding: 0 8px;
    min-width: 34px;
    justify-content: center;
}

[b-2nmcatsbc7] .header-chip .mud-chip-icon {
    color: #5A6A85 !important;
}

/* ===========================
   Body
   =========================== */

/* Was a flex ROW (sidebar beside content). The tabs now sit ABOVE the
   content instead of beside it, so this is a flex COLUMN — the horizontal
   padding that used to live on .record-body moved onto .record-tabs and
   .record-content individually below, so each can control its own inset
   independently (the tab strip's bottom border needs to span full width,
   unbroken by side padding on record-body itself). */
.record-body[b-2nmcatsbc7] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #FFFFFF;
}

/* ===========================
   Tabs — horizontal strip above the content, replacing the old
   vertical sidebar list. Blue text + underline on the active tab,
   plain gray on the rest; no pill background, no border box.
   =========================== */

.record-tabs[b-2nmcatsbc7] {
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 0 24px;
    border-bottom: 1px solid #E5E7EB;
    flex-shrink: 0;
}

.tab-item[b-2nmcatsbc7] {
    position: relative;
    padding: 16px 2px 14px;
    font-size: 14px;
    font-weight: 500;
    color: #6B7280;
    cursor: pointer;
    white-space: nowrap;
    transition: color .15s ease;
}

    .tab-item:hover[b-2nmcatsbc7] {
        color: #374151;
    }

    .tab-item.active[b-2nmcatsbc7] {
        color: #0072C6;
        font-weight: 600;
    }

        /* Underline only on the active tab — grows from the tab's own text
       width via left/right:0 on this pseudo-element, not the full strip. */
        .tab-item.active[b-2nmcatsbc7]::after {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            bottom: -1px;
            height: 2px;
            background: #0072C6;
            border-radius: 1px;
        }

/* ===========================
   Content
   =========================== */

.record-content[b-2nmcatsbc7] {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
}

.section-header[b-2nmcatsbc7] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
}

.section-icon[b-2nmcatsbc7] {
    color: #5A6A85;
    font-size: 22px;
}

.section-title[b-2nmcatsbc7] {
    font-size: 20px;
    font-weight: 600;
    color: #202124;
    margin: 0;
}

.detail-grid[b-2nmcatsbc7] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 20px;
}

    .detail-grid.fullscreen[b-2nmcatsbc7] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        column-gap: 24px;
        row-gap: 24px;
    }

.detail-item[b-2nmcatsbc7] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

    /* Reveals the copy button (rendered inside the CopyableValue child
   component) only while hovering the containing field. ::deep is required
   here because .copy-btn belongs to a different component's scoped CSS —
   without it, this selector would never match anything. */
    .detail-item:hover[b-2nmcatsbc7]  .copy-btn {
        opacity: 1;
    }

.label[b-2nmcatsbc7] {
    margin-bottom: 8px;
    font-size: 13px;
    color: #6B7280;
}

/* ===========================
   Animation
   =========================== */

@keyframes slideIn-b-2nmcatsbc7 {

    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}
/* /Layout/MainLayout.razor.rz.scp.css */
.page[b-hdhquawy8s] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-hdhquawy8s] {
    flex: 1;
}

.sidebar[b-hdhquawy8s] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-hdhquawy8s] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-hdhquawy8s]  a, .top-row[b-hdhquawy8s]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

        .top-row[b-hdhquawy8s]  a:hover, .top-row[b-hdhquawy8s]  .btn-link:hover {
            text-decoration: underline;
        }

        .top-row[b-hdhquawy8s]  a:first-child {
            overflow: hidden;
            text-overflow: ellipsis;
        }

@media (max-width: 640.98px) {
    .top-row[b-hdhquawy8s] {
        justify-content: space-between;
    }

        .top-row[b-hdhquawy8s]  a, .top-row[b-hdhquawy8s]  .btn-link {
            margin-left: 0;
        }
}

@media (min-width: 641px) {
    .page[b-hdhquawy8s] {
        flex-direction: row;
    }

    .sidebar[b-hdhquawy8s] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-hdhquawy8s] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

        .top-row.auth[b-hdhquawy8s]  a:first-child {
            flex: 1;
            text-align: right;
            width: 0;
        }

    .top-row[b-hdhquawy8s], article[b-hdhquawy8s] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}
/* /Layout/MisconfigurationDetailPage.razor.rz.scp.css */
.detail-item:hover[b-2gp9vtct5m]  .copy-btn {
    opacity: 1;
}

.detail-page[b-2gp9vtct5m] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 70px);
    background: #FFFFFF;
}

.detail-page-header[b-2gp9vtct5m] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20px 32px;
    border-bottom: 1px solid #ECECEC;
    flex-shrink: 0;
}

.header-left[b-2gp9vtct5m] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.header-right[b-2gp9vtct5m] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.resource-id[b-2gp9vtct5m] {
    font-size: 20px;
    font-weight: 600;
    color: #202124;
    line-height: 1.2;
}

.resource-type[b-2gp9vtct5m] {
    margin-top: 2px;
    font-size: 13px;
    color: #6B7280;
}

[b-2gp9vtct5m] .header-chip.mud-chip {
    background: #F3F4F6 !important;
    border: 1px solid #D9D9D9;
    border-radius: 6px;
    color: #374151 !important;
    font-size: 13px;
    font-weight: 500;
    height: 34px;
    padding: 0 12px;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}

    [b-2gp9vtct5m] .header-chip.mud-chip:hover {
        background: #E5E7EB !important;
        border-color: #BFC5CD;
    }

[b-2gp9vtct5m] .header-chip-icon-only.mud-chip {
    padding: 0 8px;
    min-width: 34px;
    justify-content: center;
}

/* Was a flex ROW (sidebar beside content). The tabs now sit ABOVE the
   content instead of beside it, so this is a flex COLUMN — the side
   padding that used to live here moved onto .detail-page-tabs and
   .detail-page-content individually below, so the tab strip's bottom
   border can span full width, unbroken by side padding on the row itself. */
.detail-page-body[b-2gp9vtct5m] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* ===========================
   Tabs — horizontal strip above the content, replacing the old
   vertical sidebar list. Blue text + underline on the active tab,
   plain gray on the rest; no pill background, no border box.
   =========================== */

.detail-page-tabs[b-2gp9vtct5m] {
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 0 20px;
    border-bottom: 1px solid #E5E7EB;
    flex-shrink: 0;
}

.tab-item[b-2gp9vtct5m] {
    position: relative;
    padding: 16px 2px 14px;
    font-size: 14px;
    font-weight: 500;
    color: #6B7280;
    cursor: pointer;
    white-space: nowrap;
    transition: color .15s ease;
}

    .tab-item:hover[b-2gp9vtct5m] {
        color: #374151;
    }

    .tab-item.active[b-2gp9vtct5m] {
        color: #0072C6;
        font-weight: 600;
    }

        /* Underline only on the active tab — grows from the tab's own text
       width via left/right:0 on this pseudo-element, not the full strip. */
        .tab-item.active[b-2gp9vtct5m]::after {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            bottom: -1px;
            height: 2px;
            background: #0072C6;
            border-radius: 1px;
        }

.detail-page-content[b-2gp9vtct5m] {
    flex: 1;
    min-width: 0;
    padding: 20px;
}

.section-header[b-2gp9vtct5m] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
}

.section-icon[b-2gp9vtct5m] {
    color: #5A6A85;
    font-size: 22px;
}

.section-title[b-2gp9vtct5m] {
    font-size: 20px;
    font-weight: 600;
    color: #202124;
    margin: 0;
}

.detail-grid[b-2gp9vtct5m] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 32px;
    row-gap: 24px;
}

.detail-item[b-2gp9vtct5m] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.label[b-2gp9vtct5m] {
    margin-bottom: 8px;
    font-size: 13px;
    color: #6B7280;
}
/* /Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-iiygt3u8kf] {
    background-color: rgba(255, 255, 255, 0.1);
}

.top-row[b-iiygt3u8kf] {
    height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-iiygt3u8kf] {
    font-size: 1.1rem;
}

.bi[b-iiygt3u8kf] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-iiygt3u8kf] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-iiygt3u8kf] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-iiygt3u8kf] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.nav-item[b-iiygt3u8kf] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-iiygt3u8kf] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-iiygt3u8kf] {
        padding-bottom: 1rem;
    }

    .nav-item[b-iiygt3u8kf]  a {
        color: #d7d7d7;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
    }

.nav-item[b-iiygt3u8kf]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-iiygt3u8kf]  a:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

@media (min-width: 641px) {
    .navbar-toggler[b-iiygt3u8kf] {
        display: none;
    }

    .collapse[b-iiygt3u8kf] {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }
    
    .nav-scrollable[b-iiygt3u8kf] {
        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Layout/ResourceDetailPage.razor.rz.scp.css */
/* Standalone page layout — normal document flow throughout, no
           position:absolute/fixed anywhere. This is intentionally NOT the
           drawer's CSS (that assumes it's an overlay sliding in on top of a
           grid page, which doesn't apply here). */

.detail-page[b-ayinwhhcuo] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 70px);
    background: #FFFFFF;
}

.detail-page-header[b-ayinwhhcuo] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20px 32px;
    border-bottom: 1px solid #ECECEC;
    flex-shrink: 0;
}

.header-left[b-ayinwhhcuo] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.header-right[b-ayinwhhcuo] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.resource-id[b-ayinwhhcuo] {
    font-size: 20px;
    font-weight: 600;
    color: #202124;
    line-height: 1.2;
}

.resource-type[b-ayinwhhcuo] {
    margin-top: 2px;
    font-size: 13px;
    color: #6B7280;
}

[b-ayinwhhcuo] .header-chip.mud-chip {
    background: #F3F4F6 !important;
    border: 1px solid #D9D9D9;
    border-radius: 6px;
    color: #374151 !important;
    font-size: 13px;
    font-weight: 500;
    height: 34px;
    padding: 0 12px;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}

    [b-ayinwhhcuo] .header-chip.mud-chip:hover {
        background: #E5E7EB !important;
        border-color: #BFC5CD;
    }

[b-ayinwhhcuo] .header-chip-icon-only.mud-chip {
    padding: 0 8px;
    min-width: 34px;
    justify-content: center;
}

/* Was a flex ROW (sidebar beside content). The tabs now sit ABOVE the
   content instead of beside it, so this is a flex COLUMN — the side
   padding that used to live here moved onto .detail-page-tabs and
   .detail-page-content individually below, so the tab strip's bottom
   border can span full width, unbroken by side padding on the row itself. */
.detail-page-body[b-ayinwhhcuo] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* ===========================
   Tabs — horizontal strip above the content, replacing the old
   vertical sidebar list. Blue text + underline on the active tab,
   plain gray on the rest; no pill background, no border box.
   =========================== */

.detail-page-tabs[b-ayinwhhcuo] {
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 0 20px;
    border-bottom: 1px solid #E5E7EB;
    flex-shrink: 0;
}

.tab-item[b-ayinwhhcuo] {
    position: relative;
    padding: 16px 2px 14px;
    font-size: 14px;
    font-weight: 500;
    color: #6B7280;
    cursor: pointer;
    white-space: nowrap;
    transition: color .15s ease;
}

    .tab-item:hover[b-ayinwhhcuo] {
        color: #374151;
    }

    .tab-item.active[b-ayinwhhcuo] {
        color: #0072C6;
        font-weight: 600;
    }

        /* Underline only on the active tab — grows from the tab's own text
       width via left/right:0 on this pseudo-element, not the full strip. */
        .tab-item.active[b-ayinwhhcuo]::after {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            bottom: -1px;
            height: 2px;
            background: #0072C6;
            border-radius: 1px;
        }

.detail-page-content[b-ayinwhhcuo] {
    flex: 1;
    min-width: 0;
    padding: 20px;
}

.section-header[b-ayinwhhcuo] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
}

.section-icon[b-ayinwhhcuo] {
    color: #5A6A85;
    font-size: 22px;
}

.section-title[b-ayinwhhcuo] {
    font-size: 20px;
    font-weight: 600;
    color: #202124;
    margin: 0;
}

.detail-grid[b-ayinwhhcuo] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 32px;
    row-gap: 24px;
}

.detail-item[b-ayinwhhcuo] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.label[b-ayinwhhcuo] {
    margin-bottom: 8px;
    font-size: 13px;
    color: #6B7280;
}

.value[b-ayinwhhcuo] {
    display: inline-block;
    max-width: 100%;
    vertical-align: top;
    font-size: 15px;
    font-weight: 500;
    color: #202124;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.value-wrapper[b-ayinwhhcuo] {
    display: block;
    width: 100%;
    min-width: 0;
}

[b-ayinwhhcuo] .value-wrapper > * {
    display: inline-block;
    max-width: 100%;
    min-width: 0;
    vertical-align: top;
}

[b-ayinwhhcuo] .vuln-mini-grid table {
    table-layout: fixed;
    width: 100%;
}

[b-ayinwhhcuo] .vuln-mini-grid .mud-table-cell {
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vuln-id-link[b-ayinwhhcuo] {
    color: #0072C6;
    font-weight: 500;
}

.vuln-truncate[b-ayinwhhcuo] {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: top;
}

.detail-item:hover[b-ayinwhhcuo]  .copy-btn {
    opacity: 1;
}
/* /Layout/Vulnerabilitydetaildrawer.razor.rz.scp.css */
/* ===========================
   Record Detail Drawer
   =========================== */

.record-overlay[b-qhisg5nb6h] {
    position: absolute;
    inset: 0;
    z-index: 1100;
    pointer-events: auto;
}

.record-floating-actions[b-qhisg5nb6h] {
    width: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
    flex-shrink: 0;
    z-index: 9999;
}

.record-drawer[b-qhisg5nb6h] {
    width: clamp(700px, 60vw, 1200px);
    min-width: 700px;
    height: 100%;
    background: #FFFFFF;
    border-left: 1px solid #E5E7EB;
    box-shadow: -8px 0 24px rgba(0,0,0,.18);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: slideIn-b-qhisg5nb6h .25s ease;
}

.record-drawer-wrapper[b-qhisg5nb6h] {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    display: flex;
    align-items: flex-start;
    z-index: 1200;
}

.record-drawer.fullscreen[b-qhisg5nb6h] {
    width: calc(100vw - 120px);
    min-width: calc(100vw - 120px);
}

.floating-button[b-qhisg5nb6h] {
    width: 44px;
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    border: 1px solid #D9D9D9;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
}

    .floating-button:hover[b-qhisg5nb6h] {
        background: #F3F4F6;
        border-color: #BFC5CD;
        transform: translateY(-1px);
    }

    .floating-button:active[b-qhisg5nb6h] {
        background: #E5E7EB;
    }

/* ===========================
   Header
   =========================== */

.record-header[b-qhisg5nb6h] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 16px 24px 14px;
    border-bottom: 1px solid #ECECEC;
    flex-shrink: 0;
}

.header-left[b-qhisg5nb6h] {
    display: flex;
    flex-direction: column;
}

.header-right[b-qhisg5nb6h] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.resource-id[b-qhisg5nb6h] {
    font-size: 20px;
    font-weight: 600;
    color: #202124;
    line-height: 1.2;
}

.resource-type[b-qhisg5nb6h] {
    margin-top: 2px;
    font-size: 13px;
    color: #6B7280;
}

[b-qhisg5nb6h] .header-chip.mud-chip {
    background: #F3F4F6 !important;
    border: 1px solid #D9D9D9;
    border-radius: 6px;
    color: #374151 !important;
    font-size: 13px;
    font-weight: 500;
    height: 34px;
    padding: 0 12px;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}

    [b-qhisg5nb6h] .header-chip.mud-chip:hover {
        background: #E5E7EB !important;
        border-color: #BFC5CD;
    }

[b-qhisg5nb6h] .header-chip-icon-only.mud-chip {
    padding: 0 8px;
    min-width: 34px;
    justify-content: center;
}

[b-qhisg5nb6h] .header-chip .mud-chip-icon {
    color: #5A6A85 !important;
}

/* ===========================
   Body
   =========================== */

/* Was a flex ROW (sidebar beside content). The tabs now sit ABOVE the
   content instead of beside it, so this is a flex COLUMN — the horizontal
   padding that used to live on .record-body moved onto .record-tabs and
   .record-content individually below, so each can control its own inset
   independently (the tab strip's bottom border needs to span full width,
   unbroken by side padding on record-body itself). */
.record-body[b-qhisg5nb6h] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #FFFFFF;
}

/* ===========================
   Tabs — horizontal strip above the content, replacing the old
   vertical sidebar list. Blue text + underline on the active tab,
   plain gray on the rest; no pill background, no border box.
   =========================== */

.record-tabs[b-qhisg5nb6h] {
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 0 24px;
    border-bottom: 1px solid #E5E7EB;
    flex-shrink: 0;
}

.tab-item[b-qhisg5nb6h] {
    position: relative;
    padding: 16px 2px 14px;
    font-size: 14px;
    font-weight: 500;
    color: #6B7280;
    cursor: pointer;
    white-space: nowrap;
    transition: color .15s ease;
}

    .tab-item:hover[b-qhisg5nb6h] {
        color: #374151;
    }

    .tab-item.active[b-qhisg5nb6h] {
        color: #0072C6;
        font-weight: 600;
    }

        /* Underline only on the active tab — grows from the tab's own text
       width via left/right:0 on this pseudo-element, not the full strip. */
        .tab-item.active[b-qhisg5nb6h]::after {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            bottom: -1px;
            height: 2px;
            background: #0072C6;
            border-radius: 1px;
        }

/* ===========================
   Content
   =========================== */

.record-content[b-qhisg5nb6h] {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
}

.section-header[b-qhisg5nb6h] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
}

.section-icon[b-qhisg5nb6h] {
    color: #5A6A85;
    font-size: 22px;
}

.section-title[b-qhisg5nb6h] {
    font-size: 20px;
    font-weight: 600;
    color: #202124;
    margin: 0;
}

.detail-grid[b-qhisg5nb6h] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 20px;
}

    .detail-grid.fullscreen[b-qhisg5nb6h] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        column-gap: 24px;
        row-gap: 24px;
    }

.detail-item[b-qhisg5nb6h] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

    /* Reveals the copy button (rendered inside the CopyableValue child
   component) only while hovering the containing field. ::deep is required
   here because .copy-btn belongs to a different component's scoped CSS —
   without it, this selector would never match anything. */
    .detail-item:hover[b-qhisg5nb6h]  .copy-btn {
        opacity: 1;
    }

.label[b-qhisg5nb6h] {
    margin-bottom: 8px;
    font-size: 13px;
    color: #6B7280;
}

/* ===========================
   Animation
   =========================== */

@keyframes slideIn-b-qhisg5nb6h {

    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}
/* /Layout/VulnerabilityDetailPage.razor.rz.scp.css */
.detail-page[b-3fol0i23w7] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 70px);
    background: #FFFFFF;
}

.detail-page-header[b-3fol0i23w7] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20px 32px;
    border-bottom: 1px solid #ECECEC;
    flex-shrink: 0;
}

.header-left[b-3fol0i23w7] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.header-right[b-3fol0i23w7] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.resource-id[b-3fol0i23w7] {
    font-size: 20px;
    font-weight: 600;
    color: #202124;
    line-height: 1.2;
}

.resource-type[b-3fol0i23w7] {
    margin-top: 2px;
    font-size: 13px;
    color: #6B7280;
}

[b-3fol0i23w7] .header-chip.mud-chip {
    background: #F3F4F6 !important;
    border: 1px solid #D9D9D9;
    border-radius: 6px;
    color: #374151 !important;
    font-size: 13px;
    font-weight: 500;
    height: 34px;
    padding: 0 12px;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}

    [b-3fol0i23w7] .header-chip.mud-chip:hover {
        background: #E5E7EB !important;
        border-color: #BFC5CD;
    }

[b-3fol0i23w7] .header-chip-icon-only.mud-chip {
    padding: 0 8px;
    min-width: 34px;
    justify-content: center;
}

/* Was a flex ROW (sidebar beside content). The tabs now sit ABOVE the
   content instead of beside it, so this is a flex COLUMN — the side
   padding that used to live here moved onto .detail-page-tabs and
   .detail-page-content individually below, so the tab strip's bottom
   border can span full width, unbroken by side padding on the row itself. */
.detail-page-body[b-3fol0i23w7] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* ===========================
   Tabs — horizontal strip above the content, replacing the old
   vertical sidebar list. Blue text + underline on the active tab,
   plain gray on the rest; no pill background, no border box.
   =========================== */

.detail-page-tabs[b-3fol0i23w7] {
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 0 20px;
    border-bottom: 1px solid #E5E7EB;
    flex-shrink: 0;
}

.tab-item[b-3fol0i23w7] {
    position: relative;
    padding: 16px 2px 14px;
    font-size: 14px;
    font-weight: 500;
    color: #6B7280;
    cursor: pointer;
    white-space: nowrap;
    transition: color .15s ease;
}

    .tab-item:hover[b-3fol0i23w7] {
        color: #374151;
    }

    .tab-item.active[b-3fol0i23w7] {
        color: #0072C6;
        font-weight: 600;
    }

        /* Underline only on the active tab — grows from the tab's own text
       width via left/right:0 on this pseudo-element, not the full strip. */
        .tab-item.active[b-3fol0i23w7]::after {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            bottom: -1px;
            height: 2px;
            background: #0072C6;
            border-radius: 1px;
        }

.detail-page-content[b-3fol0i23w7] {
    flex: 1;
    min-width: 0;
    padding: 20px;
}

.section-header[b-3fol0i23w7] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
}

.section-icon[b-3fol0i23w7] {
    color: #5A6A85;
    font-size: 22px;
}

.section-title[b-3fol0i23w7] {
    font-size: 20px;
    font-weight: 600;
    color: #202124;
    margin: 0;
}

.detail-grid[b-3fol0i23w7] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 32px;
    row-gap: 24px;
}

.detail-item[b-3fol0i23w7] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.label[b-3fol0i23w7] {
    margin-bottom: 8px;
    font-size: 13px;
    color: #6B7280;
}

.detail-item:hover[b-3fol0i23w7]  .copy-btn {
    opacity: 1;
}
/* /Layout/Vulnerabilityfilterbar.razor.rz.scp.css */
.filter-bar[b-agb53cvc6i] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif;
}

.filter-bar-left[b-agb53cvc6i] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-bar-right[b-agb53cvc6i] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.icon-btn[b-agb53cvc6i] {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: #F1F5F9;
    color: #5A6A85;
    cursor: pointer;
    transition: background .15s ease;
}

    .icon-btn:hover[b-agb53cvc6i] {
        background: #E2E8F0;
    }

    .icon-btn.active[b-agb53cvc6i] {
        background: #0072C6;
        color: #FFFFFF;
    }

.add-filters-btn[b-agb53cvc6i] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    height: 34px;
    border-radius: 6px;
    background: #F1F5F9;
    color: #202124;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    transition: background .15s ease;
}

    .add-filters-btn:hover[b-agb53cvc6i] {
        background: #E2E8F0;
    }

.text-btn[b-agb53cvc6i] {
    padding: 0 10px;
    height: 34px;
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #5A6A85;
    cursor: pointer;
}

    .text-btn:hover[b-agb53cvc6i] {
        color: #202124;
    }

.apply-btn[b-agb53cvc6i] {
    padding: 0 18px;
    height: 34px;
    display: flex;
    align-items: center;
    border-radius: 6px;
    background: #E2E8F0;
    color: #94A3B8;
    font-size: 14px;
    font-weight: 600;
    cursor: default;
}

    .apply-btn.enabled[b-agb53cvc6i] {
        background: #0072C6;
        color: #FFFFFF;
        cursor: pointer;
    }

/* ===========================
   Overlay
   =========================== */

.filter-overlay[b-agb53cvc6i] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 9999;
    display: flex;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(0,0,0,.16);
    max-height: 480px;
    overflow: hidden;
}

.filter-column[b-agb53cvc6i] {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    border-right: 1px solid #EDF2F7;
}

    .filter-column:last-child[b-agb53cvc6i] {
        border-right: none;
    }

.filter-column-fields[b-agb53cvc6i] {
    width: 260px;
    flex-shrink: 0;
}

.filter-column-values[b-agb53cvc6i] {
    width: 260px;
    flex-shrink: 0;
}

.filter-column-third[b-agb53cvc6i] {
    width: 480px;
    flex-shrink: 0;
}

.filter-search[b-agb53cvc6i] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    border-bottom: 1px solid #EDF2F7;
    flex-shrink: 0;
}

.search-icon[b-agb53cvc6i] {
    color: #94A3B8;
}

.search-input[b-agb53cvc6i] {
    border: none;
    outline: none;
    font-size: 14px;
    color: #202124;
    width: 100%;
    background: transparent;
}

    .search-input[b-agb53cvc6i]::placeholder {
        color: #94A3B8;
    }

.filter-group-label[b-agb53cvc6i] {
    padding: 12px 12px 4px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #94A3B8;
    flex-shrink: 0;
}

.filter-list[b-agb53cvc6i] {
    flex: 1;
    overflow-y: auto;
}

.filter-list-item[b-agb53cvc6i] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    font-size: 14px;
    color: #374151;
    cursor: pointer;
    transition: background .15s ease;
}

    .filter-list-item:hover[b-agb53cvc6i] {
        background: #F8FAFC;
    }

    .filter-list-item.active[b-agb53cvc6i] {
        background: #EFF6FC;
        color: #0072C6;
        font-weight: 600;
    }

    .filter-list-item.has-chevron[b-agb53cvc6i] {
        justify-content: space-between;
    }

.sub-item-right[b-agb53cvc6i] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.selection-badge[b-agb53cvc6i] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: #0072C6;
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 700;
    margin-left: auto;
}

.filter-list-item.has-chevron .selection-badge[b-agb53cvc6i] {
    margin-left: 0;
}

.filter-item-icon[b-agb53cvc6i] {
    color: #5A6A85;
    flex-shrink: 0;
}

.filter-list-item.active .filter-item-icon[b-agb53cvc6i] {
    color: #0072C6;
}

.filter-checklist[b-agb53cvc6i] {
    padding: 8px 4px;
    overflow-y: auto;
}

.checklist-item[b-agb53cvc6i] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    font-size: 14px;
    color: #374151;
    cursor: pointer;
}

    .checklist-item:hover[b-agb53cvc6i] {
        background: #F8FAFC;
    }

    .checklist-item input[b-agb53cvc6i] {
        cursor: pointer;
    }

    .checklist-item.select-all[b-agb53cvc6i] {
        border-bottom: 1px solid #EDF2F7;
        margin-bottom: 4px;
        padding-bottom: 12px;
        font-weight: 600;
        color: #202124;
    }

.empty-column-hint[b-agb53cvc6i] {
    padding: 24px 16px;
    font-size: 13px;
    color: #94A3B8;
    text-align: center;
}