/* App-specific styles - alignment, sizing, etc. */

:root {
    --tile-width: 318px;
    --tile-height: 143px;
    --layout-padding-left: max(calc((100vw - 1050px) / 2), 24px);
    --layout-padding-right: max(calc((100vw - 1050px) / 2), 24px);
    --layout-padding-top: 24px;
    --layout-padding-bottom: 8px;

    /* Shared app content width + minimum side margin (white space L/R).
       The header nav content and the wide-page content both align to
       --app-content-max and both keep at least --app-side-gap of margin,
       so they line up and never run edge-to-edge. */
    /*--app-content-max: 1416px;*/
    --app-content-max: 1600px;
    --app-side-gap: 64px;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
}

.invalid {
    outline: 1px solid #e50000;
    outline-offset: -2px;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.rounded-circle {
    border-radius: 50%;
}

.details-form {
}

    .details-form .rz-textbox {
        border: 0 !important;
        box-shadow: none !important;
        outline: none !important;
    }

        .details-form .rz-textbox:hover {
            border: 0 !important;
            box-shadow: none !important;
            outline: none !important;
        }

    .details-form .rz-textarea {
        border: 0 !important;
        box-shadow: none !important;
        outline: none !important;
    }

        .details-form .rz-textarea:hover {
            border: 0 !important;
            box-shadow: none !important;
            outline: none !important;
        }

.details-form-field-wrapper {
    width: 100%;
    border-bottom: 1px solid #F4F3F3;
    padding: 6px 0px;
}

.details-form-label {
    width: 300px;
}

.details-form-field {
    width: calc(100% - 300px);
    justify-content: left;
}

::selection {
    background-color: #E1E1E1 !important;
}

.chevron-down-outline {
    stroke: red;
}

.search-field {
    width: 100%;
    position: relative;
}

    .search-field > .search-field-input {
        width: 100%;
        padding-right: 36px;
    }

    .search-field > .search-field-button {
        position: absolute;
        right: 4px;
        top: 50%;
        transform: translateY(-50%);
        background: transparent !important;
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
        outline: none !important;
        width: 32px;
        min-width: unset !important;
        height: auto !important;
        padding: 0 !important;
        cursor: pointer;
        color: #9CA3AF !important;
        pointer-events: none;
    }

    .search-field > .search-field-button--clear {
        display: none;
        pointer-events: auto;
        color: #6B7280 !important;
    }

    .search-field.has-value > .search-field-button--search {
        display: none;
    }

    .search-field.has-value > .search-field-button--clear {
        display: flex;
    }

.clear-filters-button {
    color: var(--rz-primary) !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    padding: 0 !important;
    height: auto !important;
    line-height: 21px !important;
    height: 21px !important;
    cursor: pointer;
    white-space: nowrap;
    user-select: none !important;
}

#component-id {
}

.custom-dialog-close-button {
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
}

    .custom-dialog-close-button::after {
        display: inline-block;
        content: url('/images/Close-Icon.svg');
    }

.rz-data-grid {
    /*min-height: calc(100vh - 55px - 16px - 73px - 10px - 20px - 4px - 40px);
    height: calc(100vh - 55px - 16px - 73px - 10px - 20px - 4px - 40px);
    max-height: calc(100vh - 55px - 16px - 73px - 10px - 20px - 4px - 40px);*/
}

/* ---- Certificate list: row-density toggle (Comfortable / Compact) ---- */
.cp-density-toggle {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid #E5E7EB;
    border-radius: 6px;
    overflow: hidden;
}

    .cp-density-toggle button {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        border: none;
        background: #FFFFFF;
        color: #6B7280;
        font-size: 12px;
        font-weight: 500;
        line-height: 1;
        padding: 6px 10px;
        cursor: pointer;
        white-space: nowrap;
        transition: background-color 0.12s ease, color 0.12s ease;
    }

        .cp-density-toggle button + button {
            border-left: 1px solid #E5E7EB;
        }

        .cp-density-toggle button:not(.cp-density-toggle-active):hover {
            background: #F3F4F6;
            color: #374151;
        }

        .cp-density-toggle button.cp-density-toggle-active {
            background: #008D9E;
            color: #FFFFFF;
        }

/* List-page header alignment: keep the row-density toggle from being squeezed next to
   the title, keep the title on one line, and stop the search box from stretching across
   the whole header (some list pages set their search container to width:100%). */
.list-page-header .list-page-title {
    white-space: nowrap;
}

.list-page-header .cp-density-toggle {
    flex: 0 0 auto;
}

/* The density toggle is a list-page control: it only affects data grids on list pages,
   so only show it in the top bar while a list page is displayed. (:has scopes to the
   presence of a .list-page-content wrapper in the current page.) */
.cp-density-toggle {
    display: none;
}

body:has(.list-page-content) .cp-density-toggle {
    display: inline-flex;
}

.list-page-header .search-field {
    max-width: 360px;
}

/* Compact density is a LIST-PAGE control. It only tightens data grids on list pages
   (those wrap their content in .list-page-content) — it deliberately does NOT touch
   dashboards, details pages, cards, or the standard page padding. Pages that set their
   own cell padding with higher specificity (e.g. the Certificates list) carry a matching
   body.cp-density-compact override next to their base rule. */
body.cp-density-compact .list-page-content .rz-grid-table tbody td {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

body.cp-density-compact .list-page-content .rz-grid-table thead th {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

/* Tighten the list-page header spacing to match the denser grid. */
body.cp-density-compact .page-header.list-page-header {
    margin-bottom: 10px;
}

.cp-dashboard {
    --cp-dash-container: 1416px;
    --cp-dash-gap: 24px;
    --cp-dash-pad: 24px;
    background: #F4F5F7;
    padding: var(--cp-dash-pad);
    min-height: calc(100vh - 55px);
}

.cp-dashboard-inner {
    width: 100%;
    max-width: var(--cp-dash-container);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--cp-dash-gap);
}

.cp-dashboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.cp-dashboard-stat-row {
    display: flex;
    gap: var(--cp-dash-gap);
    flex-wrap: wrap;
}

.cp-dashboard-stat-box {
    min-width: 150px;
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    flex: 1 0 0;
    border-radius: 10px;
    background: #FFFFFF;
    box-shadow: 0 0 1px 0 rgba(12, 26, 75, 0.24), 0 3px 8px -1px rgba(50, 50, 71, 0.05);
    border-left: 4px solid transparent;
}

    /* KPI cards that deep-link to the All Certificates page with a matching filter. */
    .cp-dashboard-stat-box--clickable {
        cursor: pointer;
        transition: box-shadow 0.15s ease, transform 0.15s ease, border-left-color 0.15s ease;
    }

        .cp-dashboard-stat-box--clickable:hover {
            box-shadow: 0 0 1px 0 rgba(12, 26, 75, 0.24), 0 6px 16px -2px rgba(50, 50, 71, 0.14);
            transform: translateY(-2px);
            border-left-color: #088C9D;
        }

        .cp-dashboard-stat-box--clickable:focus-visible {
            outline: 2px solid #088C9D;
            outline-offset: 2px;
        }


    .cp-dashboard-stat-box .stat-content {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        width: 100%;
    }

    .cp-dashboard-stat-box .stat-text {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .cp-dashboard-stat-box .stat-title {
        font-size: 14px;
        font-weight: 500;
        line-height: normal;
        color: #6B7280;
    }

    .cp-dashboard-stat-box .stat-value {
        font-size: 28px;
        font-weight: 700;
        line-height: 1;
        color: #1F2937;
    }

    .cp-dashboard-stat-box .stat-icon {
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        border-radius: 12px;
        display: flex !important;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

        .cp-dashboard-stat-box .stat-icon svg {
            width: 22px !important;
            height: 22px !important;
            min-width: 22px;
            min-height: 22px;
            max-width: 22px;
            max-height: 22px;
            overflow: visible;
        }

        .cp-dashboard-stat-box .stat-icon.bg-blue {
            background: #DBEAFE;
        }

        .cp-dashboard-stat-box .stat-icon.bg-green {
            background: #D1FAE5;
        }

        .cp-dashboard-stat-box .stat-icon.bg-red {
            background: #FEE2E2;
        }

        .cp-dashboard-stat-box .stat-icon.bg-pink {
            background: #FCE4EC;
        }

    .cp-dashboard-stat-box .stat-subtitle {
        font-size: 12px;
        font-weight: 400;
        line-height: 16px;
        color: #9CA3AF;
        margin-top: 4px;
    }

.cp-dashboard-card {
    box-sizing: border-box;
    background: #FFFFFF;
    border-radius: 14px;
    padding: 24px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    border: 1px solid #F0F0F0;
}

    .cp-dashboard-card * {
        box-sizing: border-box;
    }

.cp-dashboard-charts-row {
    display: flex;
    gap: var(--cp-dash-gap);
    flex-wrap: wrap;
}

    .cp-dashboard-charts-row > .cp-dashboard-bar-chart-card {
        flex: 8 1 400px;
    }

    .cp-dashboard-charts-row > .cp-dashboard-donut-card {
        flex: 2 1 280px;
    }

.cp-dashboard-bottom-row {
    display: flex;
    gap: var(--cp-dash-gap);
    flex-wrap: wrap;
}

    .cp-dashboard-bottom-row > .cp-dashboard-card {
        flex: 1 1 300px;
    }

.chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #F0F0F0;
}

.chart-legend {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #8C8C8C;
    white-space: nowrap;
    gap: 4px;
}

.legend-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 5px;
    margin-right: 3px;
    flex-shrink: 0;
}

.bar-chart-container {
    display: flex;
    height: 320px;
    gap: 8px;
}

.bar-chart-y-axis {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    padding-bottom: 32px;
    min-width: 38px;
}

    .bar-chart-y-axis .y-label {
        font-size: 12px;
        color: #9CA3AF;
        line-height: 1;
        font-weight: 500;
    }

.bar-chart-area {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
}

.bar-chart-grid-lines {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 32px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: none;
}

    .bar-chart-grid-lines .grid-line {
        width: 100%;
        height: 0;
        border-bottom: 1px dashed #E5E7EB;
    }

.bar-chart-bars {
    flex: 1;
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    padding-bottom: 6px;
    gap: 2px;
}

.bar-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    position: relative;
}

    .bar-group .bars-wrapper {
        display: flex;
        align-items: flex-end;
        justify-content: center;
        gap: 4px;
        width: 100%;
        flex: 1;
        min-height: 0;
    }

    .bar-group .bar-label {
        font-size: 12px;
        color: #9CA3AF;
        text-align: center;
        margin-top: 10px;
        white-space: nowrap;
        font-weight: 500;
    }

    .bar-group:hover .bar-tooltip {
        display: block;
    }

.bar-tooltip {
    display: none;
    position: absolute;
    bottom: calc(40%);
    left: 50%;
    transform: translateX(-50%);
    background: #FFFFFF;
    color: #4F4F4F;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.8;
    white-space: nowrap;
    z-index: 10;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    border: 1px solid #E5E7EB;
    pointer-events: none;
    opacity: 85%;
}

    .bar-tooltip .tooltip-value {
        font-weight: 600;
    }

        .bar-tooltip .tooltip-value.approved {
            color: #008D9E;
        }

        .bar-tooltip .tooltip-value.in-process {
            color: #FF2D37;
        }

        .bar-tooltip .tooltip-value.total {
            color: #CBD5E0;
        }


.bar-item {
    border-radius: 4px 4px 0 0;
    min-width: 7px;
    max-width: 7px;
    flex: 1;
    transition: opacity 0.2s ease;
    cursor: pointer;
}

    .bar-item:hover {
        opacity: 0.85;
    }

    .bar-item.approved {
        background-color: #008D9E;
    }

    .bar-item.in-process {
        background-color: #FF2D37;
    }

    .bar-item.total {
        background-color: #CBD5E0;
    }

.bar-chart-container.bottom-chart {
    height: 240px;
}

    .bar-chart-container.bottom-chart .bar-item {
        min-width: 45px;
        max-width: 45px;
        border-radius: 4px 4px 0 0;
    }

.bars-wrapper.stacked-bars {
    position: relative;
    gap: 0 !important;
}

    .bars-wrapper.stacked-bars .bar-item {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
    }

    .bars-wrapper.stacked-bars .stacked-back {
        z-index: 1;
    }

    .bars-wrapper.stacked-bars .stacked-front {
        z-index: 2;
    }

.stacked-bar-column {
    display: flex;
    flex-direction: column;
    min-width: 28px;
    max-width: 28px;
    border-radius: 4px 4px 0 0;
    overflow: hidden;
    cursor: pointer;
}

    .stacked-bar-column .stacked-segment {
        width: 100%;
        min-height: 0;
        transition: opacity 0.2s ease;
    }

    .stacked-bar-column:hover .stacked-segment {
        opacity: 0.85;
    }

.bar-chart-container.scrollable-chart {
    overflow: hidden;
}

.bar-chart-scroll-area {
    flex: 1;
    overflow-x: auto;
    min-width: 0;
    height: 100%;
}

    .bar-chart-scroll-area > .bar-chart-area {
        height: 100%;
    }

    .bar-chart-scroll-area::-webkit-scrollbar {
        height: 6px;
    }

    .bar-chart-scroll-area::-webkit-scrollbar-track {
        background: #F3F4F6;
        border-radius: 3px;
    }

    .bar-chart-scroll-area::-webkit-scrollbar-thumb {
        background: #CBD5E0;
        border-radius: 3px;
    }

        .bar-chart-scroll-area::-webkit-scrollbar-thumb:hover {
            background: #A0AEC0;
        }

.scrollable-bar-label {
    font-size: 10px;
    white-space: nowrap;
    cursor: default;
}

.bottom-chart-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 16px;
    font-size: 12px;
    color: #6B7280;
}

    .bottom-chart-legend .legend-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        display: inline-block;
    }

.cp-dashboard-donut-card {
    display: flex;
    flex-direction: column;
}

    .cp-dashboard-donut-card .chart-title {
        font-weight: 600;
        color: #1F2937;
        margin: 0 0 20px 0;
        padding-bottom: 16px;
        border-bottom: 1px solid #F0F0F0;
    }

.donut-chart-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    justify-content: center;
    flex: 1;
}

.donut-svg-container {
    width: 220px;
    height: 220px;
    flex-shrink: 0;
    position: relative;
}

    .donut-svg-container .donut-chart-svg {
        width: 100%;
        height: 100%;
        overflow: visible;
        cursor: pointer;
    }

    .donut-svg-container .donut-center-text {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
    }

        .donut-svg-container .donut-center-text .center-pct {
            font-size: 32px;
            font-weight: 700;
            color: #1F2937;
            line-height: 1;
        }

        .donut-svg-container .donut-center-text .center-label {
            font-size: 12px;
            color: #9CA3AF;
            margin-top: 4px;
        }

.donut-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 28px;
    justify-content: center;
}

.donut-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #4F4F4F;
}

    .donut-legend-item .legend-dot {
        width: 10px;
        height: 10px;
        border-radius: 3px;
        flex-shrink: 0;
    }

    .donut-legend-item .legend-label {
        white-space: nowrap;
    }

    .donut-legend-item .legend-pct {
        font-weight: 700;
        color: #1F2937;
        margin-left: 2px;
    }

/* Dashboard: Internal vs External donut chart */
.ie-donut-body {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex: 1;
    min-width: 0;
}

.ie-side-legend {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 0.4 0 auto;
    min-width: 80px;
}

.ie-side-legend-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ie-side-label {
    font-size: 14px;
    font-weight: 600;
    color: #1F2937;
}

.ie-side-values {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
}

.ie-donut-container {
    width: 160px;
    height: 160px;
    flex-shrink: 0;
    position: relative;
}

    .ie-donut-container .donut-chart-svg {
        width: 100%;
        height: 100%;
        overflow: hidden;
        cursor: pointer;
    }

    .ie-donut-container .donut-center-text {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
    }

        .ie-donut-container .donut-center-text .center-pct {
            font-size: 28px;
            font-weight: 700;
            color: #1F2937;
            line-height: 1;
        }

        .ie-donut-container .donut-center-text .center-label {
            font-size: 12px;
            color: #9CA3AF;
            margin-top: 4px;
        }

.ie-bottom-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding-top: 16px;
    border-top: 1px solid #F0F0F0;
    margin-top: 16px;
    font-size: 13px;
    color: #4F4F4F;
}

.ie-bottom-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ==========================================
   Dashboard Responsive Breakpoints
   ========================================== */

@media (max-width: 1440px) {
    .cp-dashboard {
        --cp-dash-container: 1140px;
    }
}

@media (max-width: 1024px) {
    .cp-dashboard {
        --cp-dash-container: 960px;
    }

    .cp-dashboard-stat-box .stat-value {
        font-size: 24px;
    }
}

/* Tablet portrait — stat boxes 3+2, charts start stacking */
@media (max-width: 992px) {
    .cp-dashboard {
        --cp-dash-pad: 16px;
    }

    .cp-dashboard-stat-box {
        flex: 1 1 calc(33.333% - 16px);
        min-width: calc(33.333% - 16px);
        padding: 16px;
    }

        .cp-dashboard-stat-box .stat-value {
            font-size: 22px;
        }

    .cp-dashboard-charts-row > .cp-dashboard-bar-chart-card {
        flex: 1 1 100%;
    }

    .cp-dashboard-charts-row > .cp-dashboard-donut-card {
        flex: 1 1 100%;
    }

    .cp-dashboard-bottom-row > .cp-dashboard-card {
        flex: 1 1 calc(50% - 8px);
        min-width: calc(50% - 8px);
    }

    .ie-donut-body {
        flex-direction: row;
        justify-content: center;
    }

    .ie-donut-container {
        width: 180px;
        height: 180px;
    }
}

@media (max-width: 768px) {
    .cp-dashboard {
        --cp-dash-container: 704px;
        --cp-dash-gap: 24px;
    }

        .cp-dashboard-stat-box .stat-icon {
            width: 38px !important;
            min-width: 38px !important;
            height: 38px !important;
            min-height: 38px !important;
        }

            .cp-dashboard-stat-box .stat-icon svg {
                width: 18px !important;
                height: 18px !important;
                min-width: 18px;
                min-height: 18px;
                max-width: 18px;
                max-height: 18px;
            }

    .cp-dashboard-bottom-row > .cp-dashboard-card {
        flex: 1 1 100%;
        min-width: 100%;
    }

    .cp-dashboard-card {
        padding: 24px;
    }

    .bar-chart-container {
        height: 260px;
    }

        .bar-chart-container.bottom-chart {
            height: 220px;
        }

    .donut-svg-container {
        width: 180px;
        height: 180px;
    }

    .donut-chart-wrapper {
        gap: 20px;
    }

    .ie-donut-body {
        flex-direction: column;
        align-items: center;
    }

    .ie-side-legend {
        flex-direction: row;
        gap: 24px;
        justify-content: center;
    }

    .ie-donut-container {
        width: 180px;
        height: 180px;
    }

    .chart-header h3 {
        font-size: 15px !important;
    }
}

@media (max-width: 576px) {
    .cp-dashboard {
        --cp-dash-pad: 16px;
        --cp-dash-gap: 16px;
    }

    .cp-dashboard-header h2 {
        font-size: 18px;
    }

    .cp-dashboard-stat-row {
        gap: 16px;
    }

    .cp-dashboard-stat-box {
        flex: 1 1 calc(50% - 8px);
        min-width: calc(50% - 8px);
        padding: 16px;
        gap: 4px;
    }

        .cp-dashboard-stat-box .stat-title {
            font-size: 12px;
        }

        .cp-dashboard-stat-box .stat-value {
            font-size: 20px;
        }

        .cp-dashboard-stat-box .stat-icon {
            width: 32px !important;
            min-width: 32px !important;
            height: 32px !important;
            min-height: 32px !important;
            border-radius: 8px;
        }

            .cp-dashboard-stat-box .stat-icon svg {
                width: 16px !important;
                height: 16px !important;
                min-width: 16px;
                min-height: 16px;
                max-width: 16px;
                max-height: 16px;
            }

    .cp-dashboard-card {
        padding: 16px;
        border-radius: 10px;
    }

    .chart-header {
        margin-bottom: 14px;
        padding-bottom: 12px;
    }

        .chart-header h3 {
            font-size: 14px !important;
        }

    .chart-legend {
        font-size: 10px;
    }

    .bar-chart-container {
        height: 220px;
    }

        .bar-chart-container.bottom-chart {
            height: 200px;
        }

    .cp-dashboard-bar-chart-card .bar-chart-scroll-area > .bar-chart-area {
        min-width: 480px;
    }

    .bar-chart-y-axis {
        min-width: 30px;
    }

        .bar-chart-y-axis .y-label {
            font-size: 10px;
        }

    .bar-group .bar-label {
        font-size: 10px;
        margin-top: 6px;
    }

    .bar-tooltip {
        font-size: 11px;
        padding: 8px 12px;
    }

    .donut-svg-container {
        width: 150px;
        height: 150px;
    }

    .donut-chart-wrapper {
        gap: 16px;
    }

    .donut-legend {
        gap: 10px 18px;
    }

    .donut-legend-item {
        font-size: 12px;
    }

    .ie-donut-container {
        width: 150px;
        height: 150px;
    }

    .ie-side-legend {
        gap: 16px;
    }

    .ie-side-label {
        font-size: 13px;
    }

    .ie-side-values {
        font-size: 14px;
    }

    .ie-bottom-legend {
        font-size: 12px;
        gap: 14px;
    }

    .bottom-chart-legend {
        font-size: 11px;
    }

    .cp-dashboard-donut-card .chart-title {
        margin-bottom: 14px;
        padding-bottom: 12px;
    }

    .stacked-bar-column {
        min-width: 22px;
        max-width: 22px;
    }

    .scrollable-bar-label {
        font-size: 9px;
    }
}

@media (max-width: 400px) {
    .cp-dashboard-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .ie-side-legend {
        flex-direction: column;
        align-items: center;
    }
}

@media (max-width: 340px) {
    .cp-dashboard-stat-box {
        flex: 1 1 100%;
        min-width: 100%;
    }
}

.keys-inventory-column {
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    padding-right: 10px;
}

    .keys-inventory-column .rz-label {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.safes-tabs {
    margin-top: 24px;
}

    .safes-tabs [role=tablist] {
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 0;
        margin-bottom: 12px;
    }

    .safes-tabs a[role=tab] {
        background: transparent;
        font-weight: 600 !important;
        border-radius: 8px;
        padding: 4px 8px !important;
        margin-right: 4px !important;
        overflow: hidden;
    }

    /*.safes-tabs > .rz-tabview-nav li.rz-state-disabled {
        opacity: 1;
    }*/

    .safes-tabs > .rz-tabview-nav .rz-tabview-selected a[role=tab] {
        font-weight: 800 !important;
    }

    .safes-tabs > .rz-tabview-nav li[role=presentation]:not(.rz-state-disabled) a[role=tab] {
        border: 1px solid #08A8BC38;
    }

    .safes-tabs > .rz-tabview-nav li[role=presentation].rz-tabview-selected:not(.rz-state-disabled) a[role=tab] {
        background: #08A8BC38;
    }

    .safes-tabs > .rz-tabview-nav li[role=presentation].pci-compliant:not(.rz-state-disabled) a[role=tab] {
        border: 1px solid #FFDE90;
    }

    .safes-tabs > .rz-tabview-nav li[role=presentation].rz-tabview-selected.pci-compliant:not(.rz-state-disabled) a[role=tab] {
        background: #FFDE90;
    }

    .safes-tabs > .rz-tabview-nav .rz-tabview-selected:after {
        display: none;
    }

.quorum-comment-tooltip {
    background: #FFFFFF;
    color: var(--rz-text-color);
}

    .quorum-comment-tooltip > p {
        margin: 0;
    }

.quorum-tooltip-close {
    margin-top: -12px !important;
}

.stakeholder-tooltip {
    color: var(--rz-text-color);
    overflow: hidden;
    text-overflow: ellipsis;
}

    .stakeholder-tooltip > label {
        margin: 0;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

.checkmark-only {
    pointer-events: none !important;
}

    .checkmark-only .rz-chkbox-box {
        border: none !important;
        box-shadow: none !important;
    }

.alerts-tooltip {
    background: #FFFFFF;
    color: var(--rz-text-color);
    width: 300px;
    overflow: hidden;
    padding: 0;
    max-height: 50vh;
    overflow-y: auto;
}

    .alerts-tooltip .rz-stack {
        width: 100%;
        overflow: hidden;
    }

    .alerts-tooltip div {
        margin: 0;
        width: 300px;
        word-wrap: break-word !important;
        white-space: normal !important;
        overflow: hidden;
    }

    .alerts-tooltip .alert-card {
        padding: 8px;
    }

    .alerts-tooltip .rz-stack.alert-card:not(:last-child) {
        border-bottom: 1px solid var(--rz-text-color);
    }

.alert-close-button {
    display: flex;
    padding: 0px 6px 0px 6px;
    cursor: pointer;
    height: 1.5em;
    align-items: center;
}

    .alert-close-button:hover {
        background-color: #EFEFEF;
    }

    .alert-close-button:before {
        content: "";
        background-image: url("/images/Tag-Delete-Icon.svg");
        background-repeat: no-repeat;
        background-size: 0.7em;
        width: 0.7em;
        height: 0.8em;
        display: inline-block;
    }

::-webkit-scrollbar {
    background-color: var(--rz-scrollbar-background-color);
    width: var(--rz-scrollbar-size);
    height: var(--rz-scrollbar-size);
}

::-webkit-scrollbar-corner {
    background-color: var(--rz-scrollbar-background-color);
}

::-webkit-scrollbar-thumb {
    background: var(--rz-scrollbar-color);
    border: 4px solid rgba(0, 0, 0, 0);
    background-clip: padding-box;
    border-radius: var(--rz-scrollbar-border-radius);
    min-width: var(--rz-scrollbar-size);
    min-height: var(--rz-scrollbar-size);
}

.rz-tooltip-content.rz-bottom-tooltip-content {
    padding: 1px;
    overflow: hidden;
}

.script-fields-box {
    width: 100%;
    border: 1px solid var(--rz-input-border);
    border-radius: var(--rz-border-radius);
    overflow: hidden;
}

.script-fields-header,
.script-field-row {
    display: grid;
    grid-template-columns: 48px 1fr 60px 60px;
    align-items: center;
    padding: 10px 16px;
}

.script-fields-header {
    font-weight: 600;
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #888;
    background: var(--rz-base-200);
    border-bottom: 1px solid var(--rz-input-border);
}

.script-field-row {
    border-bottom: 1px solid var(--rz-base-200);
}

    .script-field-row:last-child {
        border-bottom: none;
    }

.script-field-row--disabled {
    opacity: 0.5;
}

.script-field-cn,
.script-field-san {
    text-align: center;
    display: flex;
    justify-content: center;
}

.script-field-enable {
    display: flex;
    align-items: center;
}

.script-field-label {
    font-size: 0.9em;
}

.script-field-label--custom {
    padding-right: 12px;
}

    .script-field-label--custom .rz-textbox {
        width: 100%;
    }

.script-fields-note {
    width: 100%;
    font-size: 0.85em;
    color: #666;
    margin-top: 6px;
    line-height: 1.4;
}

    .script-fields-note strong {
        color: #333;
    }

    .script-fields-note em {
        font-style: italic;
        color: #555;
    }

.ca-chart-bar-wrapper {
    position: relative;
    height: 29px;
    width: 100%;
}

.ca-chart-bar {
    min-width: 2%;
    height: 100%;
    background-color: var(--rz-primary);
    position: absolute;
}

    .ca-chart-bar.adcs-bar {
        opacity: 1;
    }

    .ca-chart-bar.digicert-bar {
        opacity: 0.4;
    }

    .ca-chart-bar.sectigo-bar {
        opacity: 0.6;
    }

    .ca-chart-bar.other-bar {
        opacity: 1;
    }

.ca-chart-bar-wrapper > .rz-stack {
    position: absolute;
    min-width: 60px;
    height: 100%;
    color: var(--rz-text-color);
    opacity: 1;
    white-space: nowrap;
}

.windows-dialog {
    border: 1px solid #A3A3A3;
    background: #F0F0F0;
    border-radius: 10px;
    /*width: 80%;*/
    /*max-width: 500px;*/
    /*aspect-ratio: 810/1030;*/
    width: 405px;
    height: 100%;
    min-height: 300px;
    padding: 8px;
    padding-top: 4px;
    display: flex;
    flex-direction: column;
    align-content: stretch;
    justify-content: stretch;
    overflow: hidden;
}

.windows-dialog-title-bar {
    background: #F2F3F4;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    height: 28px;
    margin-bottom: 6px;
}

.windows-dialog-title-bar-image {
    width: 15px;
    height: 15px;
}

.windows-dialog-title-bar-text {
    color: #000000;
    margin-left: 6px;
}

.windows-dialog-title-bar-close-button {
    width: 12px;
    height: 100%;
    /*display: flex;*/
    display: none;
    align-content: center;
    justify-content: center;
}

    .windows-dialog-title-bar-close-button:before {
        content: "";
        background-image: url("/images/Windows-Close-Button.svg");
        background-repeat: no-repeat;
        background-size: 12px;
        width: 12px;
        height: 12px;
        display: inline-block;
    }

.windows-tabs {
}

.windows-tab {
    background: #F3F3F3;
    padding: 0px 8px;
    border: 1px solid #E5E5E5;
    height: 20px;
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .windows-tab.selected {
        background: #F9F9F9;
        height: 21px;
        padding-top: 1px;
        margin-top: -1px;
        border-bottom: 0px;
        z-index: 2;
    }

    .windows-tab:not(:first-child) {
        margin-left: -1px;
    }

.windows-tab-content {
    background: #F9F9F9;
    border: 1px solid #E5E5E5;
    z-index: 1;
    margin-top: -1px;
    padding: 6px 10px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: stretch;
    height: 100%;
}

.windows-tab-context > fieldset {
    border: 1px solid #DCDCDC;
}

.windows-tab-content-panel {
    background: #FFFFFF;
    border: 1px solid #828790;
    margin-bottom: 8px;
    padding: 4px;
    overflow-y: auto;
    width: 100%;
    height: 100%;
}

.certificate-details-row {
    padding: 2px 6px;
    cursor: pointer;
}

    .certificate-details-row.selected {
        background: lightblue;
    }

    .certificate-details-row .windows-dialog-image {
        width: 15px;
        height: 15px;
        pointer-events: none;
    }

.certificate-details-header-column-1 {
    width: calc((100% - 15px - 2 * 10px) / 2 + 15px + 10px);
    border-right: 1px solid #E5E5E5;
}

.certificate-details-header-column-2 {
    width: calc((100% - 15px - 2 * 10px) / 2);
}

.certificate-details-column-1 {
    width: calc((100% - 15px - 2 * 10px) / 2);
}

.certificate-details-column-2 {
    width: calc((100% - 15px - 2 * 10px) / 2);
}

.windows-dialog-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.certificate-details-row .windows-dialog-label {
    pointer-events: none;
}

.windows-button {
    padding: 0 14px;
    border: 1px solid #000000;
}

    .windows-button.disabled {
        border: 1px solid #E9E9E9;
        color: #838383;
    }

.loader {
    margin: 0px 10px;
    width: 20px;
    height: 20px;
    border: 2px solid #FFF;
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

    .loader.page-loader {
        border: 4px solid var(--cp-off-black);
        border-bottom-color: transparent;
        width: 40px;
        height: 40px;
    }

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.menu-container {
    /*flex: 1 1 auto;*/
    min-width: 0;
    overflow: visible; /* allow dropdowns */
}

    .menu-container .rz-menu {
        /*display: flex;*/
        /*white-space: nowrap;*/
    }

.profile {
    /*flex: 0 0 auto;*/
    margin-left: auto;
}

.profile-menu-name {
    pointer-events: none;
    font-size: 16px;
    padding: 0;
    display: flex;
    justify-content: left;
    align-items: center;
    width: 100%;
}

    .profile-menu-name .rz-navigation-item-link {
        padding: 4px 8px !important;
        padding-bottom: 0 !important;
    }

    .profile-menu-name .rz-navigation-item-text {
        font-weight: 700 !important;
        color: #4F4F4F !important;
    }

.profile-menu-roles {
    pointer-events: none;
    font-size: 11px;
    font-weight: 600;
    padding: 0;
    display: flex;
    justify-content: left;
    align-items: center;
    white-space: wrap;
}

    .profile-menu-roles .rz-navigation-item-link {
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }

    .profile-menu-roles .rz-navigation-item-text {
        color: var(--cp-gray) !important;
    }

.profile-menu-separator {
    pointer-events: none !important;
    padding: 0 !important;
    border-bottom: 1px solid #E6E6E6;
    background: red !important;
    height: 1px;
    margin-block: var(--rz-menu-item-padding-block);
    margin-inline: var(--rz-menu-item-padding-inline);
    margin-top: 4px;
    margin-bottom: 4px;
    padding-top: 0px;
    padding-bottom: 8px;
}

    .profile-menu-separator .rz-navigation-item-wrapper:hover {
        pointer-events: none !important;
        background-color: inherit !important;
        color: inherit !important;
    }

.rz-menu {
    opacity: 0;
    animation: fadeIn 0.6s ease forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}



.rz-lookup-panel > .rz-data-grid.rz-has-pager.rz-datatable.rz-datatable-scrollable.rz-selectable {
    height: auto !important;
    min-height: auto !important;
    max-height: auto !important;
}








/* Certificate Authority List: Header */
.ca-header-top {
    padding-bottom: 0;
}

.ca-header-title {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: #1F2937;
    line-height: 1.3;
}

.ca-header-subtitle {
    margin: 4px 0 0 0;
    font-size: 14px;
    color: #9CA3AF;
    line-height: 1.4;
}

/* HSM Stats Cards */
.hsm-stats-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin-top: 20px;
    width: 100%;
}

.hsm-stat-card {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hsm-stat-label {
    font-size: 13px;
    font-weight: 500;
    color: #6B7280;
    line-height: 1.4;
}

.hsm-stat-value {
    font-size: 32px;
    font-weight: 700;
    color: #1F2937;
    line-height: 1.2;
}

.hsm-stat-subtitle {
    font-size: 12px;
    font-weight: 400;
    color: #9CA3AF;
    line-height: 1.4;
}

@media (max-width: 1024px) {
    .hsm-stats-container {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 640px) {
    .hsm-stats-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Container (your RadzenStack wrapper can be full width) */
.cert-type-picker {
    width: 100%;
}

/* 3-up grid like the design */
.cert-type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, var(--tile-width));
    max-width: calc(var(--tile-width) * 3 + 24px * 2);
    gap: 24px;
    width: 100%;
    align-items: stretch;
}

/* Bottom grid with 2 tiles */
.cert-type-grid--two {
    grid-template-columns: repeat(auto-fill, var(--tile-width));
    max-width: calc(var(--tile-width) * 2 + 24px * 1);
}

/* 3-up grid like the design */
.csr-type-grid {
    display: flex;
    gap: 16px;
    width: 100%;
    align-items: stretch;
    justify-content: center;
    flex-wrap: wrap;
}

/* Subtle note row */
.cert-type-subtle-note {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 18px 0 18px;
    color: #6b7a90; /* muted */
    font-size: 14px;
    line-height: 1.35;
}

    /* little info icon circle (optional) */
    .cert-type-subtle-note::before {
        content: "i";
        display: inline-grid;
        place-items: center;
        width: 18px;
        height: 18px;
        border-radius: 999px;
        border: 1px solid #d9e2ef;
        color: #6b7a90;
        font-size: 12px;
        font-weight: 700;
    }

/* If you want buttons aligned like the screenshot */
.cert-type-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: 26px;
}

.cert-tile {
    position: relative;
    display: block;
    cursor: pointer;
}

.csr-tile {
    width: 100%;
}

/* hide the native radio but keep it accessible */
.cert-tile-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* Card body */
.cert-tile-body {
    position: relative;
    background: #ffffff;
    border: 2px solid #e5edf6; /* soft border */
    border-radius: 12px;
    height: var(--tile-height);
    min-height: var(--tile-height);
    width: var(--tile-width);
    min-width: var(--tile-width);
    padding: 16px;
    transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.csr-tile .cert-tile-body {
    height: max-content;
    min-height: 79px;
    width: 100%;
    min-width: 100%;
    display: grid;
    grid-template-rows: auto minmax(10px, 1fr);
    grid-template-columns: auto minmax(10px, 1fr);
    column-gap: 16px;
}

/* Hover */
.cert-tile:hover .cert-tile-body {
    border-color: #cfe0f2;
    box-shadow: 0 6px 18px rgba(15, 40, 80, 0.08);
}

/* Focus ring from keyboard */
.cert-tile:focus-within .cert-tile-body {
    box-shadow: 0 0 0 4px rgba(0, 140, 153, 0.12);
}

/* Selected */
.cert-tile-input:checked + .cert-tile-body {
    border-color: #0aa2ad; /* teal */
    box-shadow: 0 0 0 4px rgba(10, 162, 173, 0.12);
}

/* Disabled */
.cert-tile.is-disabled {
    cursor: not-allowed;
}

    .cert-tile.is-disabled .cert-tile-body {
        background: #fbfcfe;
        border-color: #edf2f8;
        box-shadow: none;
    }

    .cert-tile.is-disabled .cert-tile-title,
    .cert-tile.is-disabled .cert-tile-subtitle {
        color: #9aa8bb;
    }

/* Icon chip (top-left) */
.cert-tile-icon-wrapper {
    width: 40px;
    height: 40px;
    background-size: 24px !important;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: #eef7fb; /* light teal tint */
    color: #0aa2ad;
    margin-bottom: 16px;
}

.csr-tile .cert-tile-icon-wrapper {
    grid-row-start: 1;
    grid-row-end: 3;
    grid-column: 1;
    margin-bottom: 0;
}

.cert-tile-input:checked + .cert-tile-body .cert-tile-icon-wrapper {
    background-color: var(--cp-primary-400);
}

.cert-tile-icon-wrapper > .cert-tile-icon {
    width: 24px;
    height: 24px;
}

.cert-tile-input:not(:checked) + .cert-tile-body .cert-tile-icon {
    background-color: #0EB2BE;
}

.cert-tile-input:checked + .cert-tile-body .cert-tile-icon {
    background-color: #FFFFFF;
}

/* Title / subtitle */
.cert-tile-title {
    color: var(--cp-text-700);
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: -0.312px;
    margin-bottom: 8px;
}

.csr-tile .cert-tile-title {
    margin: 0;
}

.csr-tile .cert-tile-title {
    grid-row-start: 1;
    grid-column: 2;
}

.cert-tile-subtitle {
    color: var(--cp-text-300);
    font-size: 14px;
    font-weight: 400;
    line-height: 22.75px;
    letter-spacing: -0.15px;
}

.csr-tile .cert-tile-subtitle {
    grid-column: 2;
    grid-row-start: 2;
}

/* Extra content zone (e.g. badge) */
.cert-tile-extra {
    position: absolute;
    top: 18px;
    right: 18px;
}


.cert-pill {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: #e6fbfd;
    color: #067b84;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
}


.cp-icon-cert-from-scratch > .cert-tile-icon {
    -webkit-mask: url("/images/request/from-scratch.svg") center / contain no-repeat;
    mask: url("/images/request/from-scratch.svg") center / contain no-repeat;
}

.cp-icon-cert-draft > .cert-tile-icon {
    -webkit-mask: url("/images/request/draft.svg") center / contain no-repeat;
    mask: url("/images/request/draft.svg") center / contain no-repeat;
}

.cp-icon-cert-preset > .cert-tile-icon {
    background-image: url("/images/request/.svg");
    -webkit-mask: url("/images/request/preset.svg") center / contain no-repeat;
    mask: url("/images/request/preset.svg") center / contain no-repeat;
}

.cp-icon-cert-renew-new > .cert-tile-icon {
    -webkit-mask: url("/images/request/renew-new.svg") center / contain no-repeat;
    mask: url("/images/request/renew-new.svg") center / contain no-repeat;
}

.cp-icon-cert-request-new > .cert-tile-icon {
    -webkit-mask: url("/images/request/request-new.svg") center / contain no-repeat;
    mask: url("/images/request/request-new.svg") center / contain no-repeat;
}

.cp-icon-cert-renew-same {
    background-color: var(--cp-red-2) !important;
}

.cert-tile-input:not(:checked) + .cert-tile-body .cp-icon-cert-renew-same {
    background-color: #FEF2F2 !important;
}

.cp-icon-cert-renew-same > .cert-tile-icon {
    -webkit-mask: url("/images/request/renew-same.svg") center / contain no-repeat;
    mask: url("/images/request/renew-same.svg") center / contain no-repeat;
}

.cert-tile-input:not(:checked) + .cert-tile-body .cp-icon-cert-renew-same > .cert-tile-icon {
    background-color: var(--cp-red-2);
}

.cp-icon-cert-request-same {
    background-color: var(--cp-red-2) !important;
}

.cert-tile-input:not(:checked) + .cert-tile-body .cp-icon-cert-request-same {
    background-color: #FEF2F2 !important;
}

.cp-icon-cert-request-same > .cert-tile-icon {
    -webkit-mask: url("/images/request/request-same.svg") center / contain no-repeat;
    mask: url("/images/request/request-same.svg") center / contain no-repeat;
}

.cert-tile-input:not(:checked) + .cert-tile-body .cp-icon-cert-request-same > .cert-tile-icon {
    background-color: var(--cp-red-2);
}

.cp-icon-csr-available > .cert-tile-icon {
    -webkit-mask: url("/images/request/csr-available.svg") center / contain no-repeat;
    mask: url("/images/request/csr-available.svg") center / contain no-repeat;
}

.cp-icon-csr-on-hsm > .cert-tile-icon {
    -webkit-mask: url("/images/request/csr-on-hsm.svg") center / contain no-repeat;
    mask: url("/images/request/csr-on-hsm.svg") center / contain no-repeat;
}

.cp-icon-csr-in-database > .cert-tile-icon {
    -webkit-mask: url("/images/request/csr-in-database.svg") center / contain no-repeat;
    mask: url("/images/request/csr-in-database.svg") center / contain no-repeat;
}

/* app shell */
.app-layout {
    height: 100vh;
    display: grid;
    grid-template-rows: auto minmax(250px, 1fr) auto;
}

.app-header {
    display: flex;
    justify-content: center;
    background: #1E1E1E;
}

/* RadzenBody must take remaining height between header/footer */
.app-body {
    min-height: 0; /* critical for nested scrolling */
    overflow-x: hidden;
}

/* ensure the body content can shrink so inner scroll works */
.app-body-inner {
    min-height: 0; /* critical */
    height: 100%; /* critical: give descendants a bounded height */
    overflow-x: hidden; /* prevent the shell from scrolling */
}

.app-footer {
    position: sticky;
    bottom: 0;
    z-index: 20;
    padding: 4px 6px;
    border-top: 1px solid #e9edf0;
    background: white;
}

/* page layout inside the body */
.page {
    height: calc(100% - (var(--layout-padding-top) + var(--layout-padding-bottom)));
    min-height: 0; /* critical */
    overflow-x: hidden;
    display: grid;
    grid-template-rows: auto minmax(150px, 1fr) auto;
}

    .page:not(.page-wide) {
        padding: var(--layout-padding-top) var(--layout-padding-right) var(--layout-padding-bottom) var(--layout-padding-left);
        width: calc(100vw - (var(--layout-padding-left) + var(--layout-padding-right)));
        max-width: calc(100vw - (var(--layout-padding-left) + var(--layout-padding-right)));
    }

    /* Wide pages (all list + detail screens) sit in a fixed, centered container
       at XL; extra viewport width is absorbed as equal side margins — the same
       system as the Dashboard. Per-breakpoint tuning only overrides the two vars
       below (see responsive.css). box-sizing:border-box so the container width
       includes the side gutter; width:100% (not 100vw) avoids scrollbar drift. */
    .page.page-wide {
        --cp-page-container: var(--app-content-max); /* max content width */
        --cp-page-gutter: 36px;                      /* inner side padding */
        --cp-page-sidegap: var(--app-side-gap);      /* min white margin each side */
        box-sizing: border-box;
        /* border-box: height must be 100% (not the base .page content-box calc,
           which would leave a ~32px gap below revealing the white outer). */
        height: 100%;
        /* Always leave --cp-page-sidegap of margin, but never exceed the max. So
           on wide screens the margins grow; on mid screens they stay ~sidegap
           instead of collapsing to nothing near a fixed breakpoint width. */
        width: calc(100% - 2 * var(--cp-page-sidegap));
        max-width: var(--cp-page-container);
        margin-inline: auto;
        padding: var(--layout-padding-top) var(--cp-page-gutter) var(--layout-padding-bottom) var(--cp-page-gutter);
    }

.page-header:not(:empty) {
    max-width: inherit;
    z-index: 10;
    /*overflow-x: hidden;*/
}

.page-content {
    min-height: 0; /* critical */
    overflow-x: hidden;
    overflow-y: auto;
    height: 100%;
    max-width: inherit;
    display: grid;
    grid-template-columns: minmax(100px, 1fr);
}

    .page-content > * {
        overflow-x: hidden;
        overflow-y: auto;
    }

.page:not(.page-wide) .page-content > * {
    padding-bottom: 16px;
}

.page.page-wide .page-content > * {
    padding-bottom: 0;
}

.page-footer:not(:empty) {
    padding: var(--layout-padding-bottom) 0 !important;
    border-top: 1px solid #e5e7eb;
    background: white;
    z-index: 11;
    overflow-x: hidden;
}

/****** 2 columns ******/

/* Two-column layout */
.page-content.page-content-two-column {
    grid-template-columns: minmax(100px, 1fr) auto;
    gap: 56px;
    overflow: hidden;
}

    /* reversed columns */
    .page-content.page-content-two-column.page-content-two-column-reverse {
        grid-template-columns: auto minmax(100px, 1fr);
    }

    /* equal columns */
    .page-content.page-content-two-column.page-content-two-column-even {
        grid-template-columns: calc((100% - 56px) / 2) calc((100% - 56px) / 2);
    }

    /* disable the default scrolling rule from base layout */
    .page-content.page-content-two-column > * {
        overflow: hidden;
    }

    /* main column scrolls */
    .page-content.page-content-two-column .page-content-main {
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        box-sizing: border-box;
    }

        .page-content.page-content-two-column .page-content-main > * {
            box-sizing: border-box;
        }

    /* side column fixed */
    .page-content.page-content-two-column .page-content-side {
        min-height: 0;
        overflow: hidden;
        box-sizing: border-box;
    }

        .page-content.page-content-two-column .page-content-side > * {
            box-sizing: border-box;
        }

/* -------- responsive collapse -------- */

@media (max-width: 900px) {

    /* collapse to single column */
    .page-content.page-content-two-column {
        grid-template-columns: minmax(100px, 1fr) !important;
    }

        /* hide side column */
        .page-content.page-content-two-column .page-content-side {
            display: none;
        }

        /* restore scroll behavior */
        .page-content.page-content-two-column .page-content-main {
            overflow-y: auto;
        }
}

.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 16px;
    /* Constrain the nav content to the same max width as the page content and
       center it, so the logo/actions line up with the content below and gain
       side space on wide screens. Below this width it stays full-width so the
       full menu keeps fitting (it collapses to the hamburger at <=1200px). */
    width: 100%;
    max-width: var(--app-content-max);
    margin-inline: auto;
}

.logo {
    flex: 0 0 auto;
}

.menu-container {
    flex: 1 1 auto;
    min-width: 0;
}

.profile {
    flex: 0 0 auto;
}


/* Page becomes a vertical flex layout occupying the available layout body height */
.page-root {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Top content takes natural height */
.page-top {
    flex: 0 0 auto;
}

/*
  The fill area:
  - grows to take remaining height
  - but never smaller than 400px
  - when forced to 400px and there's not enough space, the PAGE scrolls
*/
.page-fill {
    flex: 1 1 auto;
    min-height: 400px;
}

/* Make the grid actually stretch */
.grid-fill {
    height: 100%;
}

.request-header {
    margin-bottom: 24px;
}

.request-title {
    color: var(--cp-text-700);
    font-size: 20px;
    font-weight: 700;
    line-height: normal;
    margin: 0;
}

.request-subtitle {
    color: var(--cp-text-400);
    font-size: 12px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: -0.312px;
    margin: 0;
}

.request-step-header {
    margin-bottom: 32px;
}

.request-step-title {
    color: var(--cp-text-700);
    font-size: 14px;
    font-weight: 700;
    line-height: normal;
    margin: 0;
}

.request-step-subtitle {
    color: var(--cp-text-400);
    font-size: 12px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: -0.312px;
    margin: 0;
}

.request-step-image-wrapper {
    width: 100%;
    min-width: 100%;
    height: 100%;
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #65B0BA;
    padding: 32px;
    overflow: auto;
}

.product-support-btn {
    display: flex !important;
    height: 32px !important;
    padding: 8px 16px !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    border-radius: 4px !important;
    /*border: 1px solid var(--Foundation-Primary-primary-400, #33A4B1) !important;*/
    /*background: var(--Foundation-Primary-primary-100, #B0DCE1) !important;*/
    /* button shadow */
    /*box-shadow: 0 1px 6px 0 rgba(93, 95, 99, 0.00) !important;*/
    /* Text */
    /*color: var(--Foundation-Text-text-500, #0F172A) !important;*/
    text-align: center !important;
    /* Text xs-12/Bold-12 */
    font-family: "Open Sans" !important;
    font-size: 12px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: 18px !important; /* 150% */
}

/* "Request Certificate" launcher — a vertical tab pinned to the LEFT edge.
   Rotates -90deg about its top-left corner, so it extends upward from `top`
   and hugs x:0. Opens the request options drawer (RequestCertificateButton). */
.side-button {
    position: fixed;
    right: 0;
    top: calc(240px + 10vh);
    transform: rotate(90deg);
    transform-origin: right top;
    display: flex;
    padding: 8px 16px;
    z-index: 10000;
    border-radius: 0 0 8px 8px;
}

/* ---- Request Certificate options drawer (slides in from the left) ---- */
.request-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 10050;
}

.request-drawer {
    position: fixed;
    top: 0;
    /* Right-hand edge. The shadow and the slide-in direction have to move with it - a panel
       anchored right that still slides in from the left reads as the page jumping. */
    right: 0;
    height: 100vh;
    width: 380px;
    max-width: 90vw;
    background: #FFFFFF;
    box-shadow: -2px 0 16px rgba(0, 0, 0, 0.2);
    z-index: 10051;
    display: flex;
    flex-direction: column;
    animation: request-drawer-slide 0.18s ease-out;
}

@keyframes request-drawer-slide {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

.request-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: var(--rz-primary, #08A8BC);
    color: #FFFFFF;
}

.request-drawer-title { font-size: 16px; font-weight: 600; }

.request-drawer-close {
    background: transparent;
    border: none;
    color: #FFFFFF;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}

.request-drawer-body {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
}

.request-drawer-subtitle {
    color: #6B7280;
    font-size: 13px;
    margin: 0 0 4px;
}

.request-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    text-align: left;
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    background: #FFFFFF;
    cursor: pointer;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.request-option:hover {
    border-color: var(--rz-primary, #08A8BC);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.request-option-icon {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: var(--cp-primary-50, #E6F4F5);
    color: var(--rz-primary, #08A8BC);
    font-size: 18px;
    font-weight: 700;
}

.request-option-text { display: flex; flex-direction: column; gap: 2px; }
.request-option-title { font-weight: 600; color: #111827; font-size: 14px; display: flex; align-items: center; gap: 6px; }
.request-option-desc { color: #6B7280; font-size: 12px; }

.request-option-pill {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #FFFFFF;
    background: var(--rz-primary, #08A8BC);
    border-radius: 8px;
    padding: 1px 6px;
}

.request-option-note {
    color: #9CA3AF;
    font-size: 11px;
    margin: 6px 2px 0;
}

.page-header.list-page-header {
    margin-bottom: 16px;
}

.page-header.details-page-header {
    margin-bottom: 20px;
}

.page-content.list-page-content {
}

/* ============================================================
   Certificate list — 3-section panel design.
   WHITE cards floating on a light-grey page (per design).
   The .cp-list-* classes exist only on Certificate/List.razor,
   so these rules are naturally scoped to that page.
     • Page OUTER (area around the cards) → light grey.
     • Section 1 (title + search), Section 2 (stats + actions),
       and Section 3 ("Certificate Reports" bar + grid) each read
       as a distinct WHITE card on the grey.
   Tints are variables — change them in one place. */
:root {
    --cp-list-page-bg: #F4F5F7;         /* grey content canvas (behind the cards) */
    --cp-list-section-bg: #FFFFFF;      /* white section cards                    */
    --cp-list-section-border: #E9EBEF;  /* card border                            */
}

/* ==========================================================================
   Discover roster (Reports/Discover/List) — mirrors the Certificate List
   grey-canvas + white-card treatment, plus its own KPI stat cards and panel.
   ========================================================================== */
body:has(.cp-discover-panel) .app-body-inner {
    background: #FFFFFF;
}

.page.page-wide:has(.cp-discover-panel) {
    /* Override the base .page 3-row grid (auto / 1fr / auto) — with multiple stacked
       cards the middle 1fr row would stretch the stat cards. Flow them normally and
       let the whole page scroll instead. */
    display: block;
    overflow-y: auto;
    background: var(--cp-list-page-bg);
    --cp-page-gutter: 16px;
}

/* Grey gaps between the stacked cards so the canvas shows (like the mockup). */
.page.page-wide:has(.cp-discover-panel) .cp-list-headrow {
    margin-bottom: 14px;
}

/* KPI summary — inline labels + values inside the header card (no cards). */
.cp-discover-header-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.cp-discover-statsrow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #ECEEF1;
    font-size: 13px;
    color: #374151;
}

.cp-stat-item {
    white-space: nowrap;
}

.cp-stat-name {
    color: #374151;
}

    .cp-stat-item strong {
        color: #111827;
        font-weight: 700;
    }

    .cp-stat-item strong.cp-stat-risk {
        color: #DC2626;
    }

.cp-stat-note {
    color: #9CA3AF;
}

.cp-stat-sep {
    color: #D1D5DB;
    user-select: none;
}

/* ── Discover detail page ─────────────────────────────────────────────── */
.cp-detail-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #6B7280;
    flex-wrap: wrap;
}

    .cp-detail-breadcrumb a {
        color: #6B7280;
        text-decoration: none;
    }

        .cp-detail-breadcrumb a:hover {
            color: var(--rz-primary, #08A8BC);
        }

    .cp-detail-breadcrumb-current {
        color: #111827;
    }

/* Subtitle line: [Enabled] pill + "Type Endpoint" */
.cp-detail-subtitle {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.cp-detail-enabled-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 11px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    background: #EEF1F8;
    color: #3F4B66;
}

    .cp-detail-enabled-pill.is-disabled {
        background: #F3F4F6;
        color: #6B7280;
    }

.cp-detail-subtitle-text {
    font-size: 13px;
    color: #6B7280;
}

.cp-detail-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 6px;
    border: 1px solid #B5B7BD;
    background: #FFFFFF;
    color: #4B5563;
    cursor: pointer;
    flex: 0 0 auto;
}

    .cp-detail-menu-btn:hover {
        background: #F9FAFB;
    }

/* Light actions dropdown (three-dot menu). Deliberately NOT the shared dark
   .rz-context-menu used by the roster row actions. */
.cp-actions-wrap {
    position: relative;
    display: inline-flex;
}

.cp-actions-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1099;
    background: transparent;
}

.cp-actions-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 1100;
    min-width: 172px;
    padding: 6px;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    box-shadow: 0 10px 24px rgba(16, 24, 40, 0.12);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cp-actions-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 9px 12px;
    border: none;
    background: transparent;
    border-radius: 6px;
    font-size: 14px;
    color: #1E293B;
    cursor: pointer;
    white-space: nowrap;
}

    .cp-actions-item:hover {
        background: #F1F5F9;
    }

    .cp-actions-item.is-danger {
        color: #DC2626;
    }

        .cp-actions-item.is-danger:hover {
            background: #FEF2F2;
        }

.cp-detail-tabpad {
    padding: 20px 16px 8px;
}

/* Key Material tab: title + "Import to Inventory" toolbar above the grid */
.cp-km-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin: 2px 0 16px;
}

.cp-km-title {
    font-size: 15px;
    font-weight: 700;
    color: #111827;
}

/* Compact teal Import button inside grid rows */
.cp-km-import-btn.cp-button {
    padding: 5px 18px;
    font-size: 13px;
    min-height: 0;
    line-height: 1.4;
}

/* Configuration tab: two titled cards, each a label-left / value-right list */
.cp-config-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: start;
}

.cp-config-title {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 700;
    color: #111827;
}

.cp-config-card {
    background: #FFFFFF;
    border: 1px solid var(--cp-list-section-border);
    border-radius: 10px;
    padding: 2px 18px;
}

.cp-config-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 0;
    border-bottom: 1px solid #EEF0F3;
}

    .cp-config-row:last-child {
        border-bottom: none;
    }

.cp-config-label {
    font-size: 14px;
    color: #6B7280;
    flex: 0 0 auto;
}

.cp-config-value {
    font-size: 14px;
    color: #334155;
    font-weight: 500;
    text-align: right;
    word-break: break-word;
}

@media (max-width: 768px) {
    .cp-config-grid {
        grid-template-columns: 1fr;
    }
}

/* Active Sessions stats row: uniform gray, medium weight (Figma) */
.cp-discover-statsrow.cp-sessions-stats {
    gap: 24px;
}

    .cp-sessions-stats .cp-stat-item,
    .cp-sessions-stats .cp-stat-name,
    .cp-sessions-stats .cp-stat-item strong,
    .cp-sessions-stats .cp-stat-sep {
        color: #4A5568;
        font-weight: 500;
        font-size: 14px;
        line-height: 17px;
    }

    .cp-sessions-stats .cp-stat-sep {
        margin: 0;
    }

    /* Numbers stay bold; only the labels/separators are the medium gray weight. */
    .cp-sessions-stats .cp-stat-item strong {
        font-weight: 700;
    }

/* ── Session Details drawer (opened from View Session) ────────────────────── */
.cp-sessiondrawer {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
    background: #FFFFFF;
}

.cp-sessiondrawer-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 1px solid #EEF0F3;
    flex: 0 0 auto;
}

.cp-sessiondrawer-head-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: #E6F7F9;
    color: var(--rz-primary, #08A8BC);
    flex: 0 0 auto;
}

.cp-sessiondrawer-head-title {
    font-size: 17px;
    font-weight: 700;
    color: #0F172A;
}

.cp-sessiondrawer-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 18px 20px;
}

.cp-sessiondrawer-iprow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.cp-sessiondrawer-ip {
    font-size: 16px;
    color: #0F172A;
}

    .cp-sessiondrawer-ip strong {
        font-weight: 700;
    }

.cp-sessiondrawer-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #6B7280;
}

    .cp-sessiondrawer-status.is-active {
        color: #16A34A;
    }

.cp-sessiondrawer-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.cp-sessiondrawer-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 20px;
}

.cp-sessiondrawer-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.cp-sessiondrawer-label {
    font-size: 12px;
    color: #8A94A6;
}

.cp-sessiondrawer-value {
    font-size: 14px;
    color: #111827;
    word-break: break-word;
}

    .cp-sessiondrawer-value.is-alert {
        color: #DC2626;
    }

.cp-sessiondrawer-footer {
    flex: 0 0 auto;
    display: flex;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid #EEF0F3;
}

.cp-sessiondrawer-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 1 1 0;
    height: 40px;
    padding: 0 14px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

.cp-sessiondrawer-btn--outline {
    background: #FFFFFF;
    border: 1px solid #D1D5DB;
    color: #111827;
}

    .cp-sessiondrawer-btn--outline:hover {
        background: #F9FAFB;
    }

.cp-sessiondrawer-btn--danger {
    background: #EF4444;
    border: 1px solid #EF4444;
    color: #FFFFFF;
}

    .cp-sessiondrawer-btn--danger:hover {
        background: #DC2626;
        border-color: #DC2626;
    }

    .cp-sessiondrawer-btn--danger:disabled {
        opacity: 0.5;
        cursor: default;
    }

/* ── Active Sessions: "Sessions List" toolbar (title left, filters right) ─── */
.cp-sessions-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 14px 16px;
    border-bottom: 1px solid var(--cp-list-section-border, #E5E7EB);
}

.cp-sessions-title {
    font-size: 15px;
    font-weight: 700;
    color: #111827;
}

.cp-sessions-filters {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.cp-sessions-clear {
    font-size: 13px;
    color: #6B7280;
    text-decoration: underline;
    cursor: pointer;
    white-space: nowrap;
}

    .cp-sessions-clear:hover {
        color: var(--rz-primary, #08A8BC);
    }

.cp-sessions-gridwrap {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 8px 12px 12px;
}

.cp-loc-accordion {
    display: flex;
    flex-direction: column;
}

.cp-loc-group {
    border-bottom: 1px solid #EEF0F3;
}

    .cp-loc-group.is-review {
        background: #FFF7ED;
        border: 1px solid #FCD9A8;
        border-radius: 8px;
        margin: 6px 4px;
    }

.cp-loc-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 12px;
    cursor: pointer;
    user-select: none;
}

    .cp-loc-header:hover {
        background: rgba(15, 23, 42, 0.02);
    }

    .cp-loc-group.is-review .cp-loc-header:hover {
        background: #FDEBCF;
    }

.cp-loc-chevron {
    display: inline-flex;
    align-items: center;
    color: #6B7280;
    transition: transform 0.15s ease;
    flex: 0 0 auto;
}

    .cp-loc-chevron.is-open {
        transform: rotate(180deg);
    }

.cp-loc-pin {
    display: inline-flex;
    align-items: center;
    color: #6B7280;
    flex: 0 0 auto;
}

.cp-loc-name {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    min-width: 0;
}

.cp-loc-pill {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 6px;
    white-space: nowrap;
}

    .cp-loc-pill.is-review {
        color: #B45309;
        background: #FEF3C7;
    }

    .cp-loc-pill.is-known {
        color: #008D9E;
        background: #E6F7F9;
    }

.cp-loc-count {
    margin-left: auto;
    font-size: 12px;
    color: #6B7280;
    white-space: nowrap;
    flex: 0 0 auto;
}

.cp-loc-body {
    padding: 0 14px 12px 38px;
}

.cp-loc-table {
    display: flex;
    flex-direction: column;
}

.cp-loc-row {
    display: grid;
    grid-template-columns: 1.5fr 1.2fr 1fr 1.3fr;
    gap: 16px;
    padding: 10px 0;
    border-top: 1px solid #F1F2F5;
    font-size: 13px;
    color: #374151;
    word-break: break-word;
}

    .cp-loc-row--head {
        border-top: none;
        color: #6B7280;
        font-weight: 500;
    }

.cp-loc-group.is-review .cp-loc-row {
    border-top-color: #FCD9A8;
}

/* ── Agents (Reports/Agents) list ─────────────────────────────────────────── */
.cp-agents-stats {
    gap: 24px;
}

.cp-agents-archived {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #6B7280;
    white-space: nowrap;
    cursor: pointer;
    margin-right: 2px;
}

.cp-agent-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.cp-agent-info {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    color: #6B7280;
    cursor: pointer;
}

    .cp-agent-info:hover .cp-agent-info-text {
        color: #6B7280;
    }

    .cp-agent-info:hover svg circle,
    .cp-agent-info:hover svg path {
        stroke: #008D9E;
    }

    .cp-agent-info:hover svg circle[fill] {
        fill: #008D9E;
    }

.cp-agent-info-overlay {
    position: fixed;
    inset: 0;
    z-index: 4000;
    background: transparent;
}

.cp-agent-info-pop {
    position: fixed;
    z-index: 4001;
    max-width: 320px;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14);
    padding: 14px 16px;
    font-size: 13px;
    line-height: 1.5;
    color: #6B7280;
}

.cp-agent-info-text {
    font-size: 12px;
    color: #9CA3AF;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cp-agent-info > svg {
    flex: 0 0 auto;
}

.cp-agent-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 6px;
    background: #EEF2F6;
    color: #475569;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.cp-agent-iconbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #6B7280;
    cursor: pointer;
    border-radius: 4px;
    line-height: 0;
}

    .cp-agent-iconbtn:hover {
        color: #111827;
        background: #F3F4F6;
    }

.cp-agent-iconbtn--teal {
    color: #008D9E;
}

    .cp-agent-iconbtn--teal:hover {
        color: #00707E;
        background: #E6F7F9;
    }

.cp-agent-iconbtn.is-disabled {
    color: #D1D5DB;
    pointer-events: none;
    cursor: default;
}

.cp-agents-page .cp-discover-panel:has(.cp-dropdown-wrapper:focus-within) {
    overflow: visible;
}

.cp-agents-page .cp-sessions-toolbar {
    position: relative;
    z-index: 5;
}

.cp-agents-page .cp-dropdown {
    z-index: 2000;
}

/* Data Import Tool: keep the filter popovers above the grid (they were clipped/covered
   by the empty grid area). Same treatment as the Agents list. */
.cp-di-page .cp-discover-panel:has(.cp-dropdown-wrapper:focus-within) {
    overflow: visible;
}

.cp-di-page .cp-sessions-toolbar {
    position: relative;
    z-index: 5;
}

.cp-di-page .cp-dropdown {
    z-index: 2000;
}

/* ===== Domain Discovery page ===== */
.cp-dd-page .cp-discover-panel:has(.cp-dropdown-wrapper:focus-within) {
    overflow: visible;
}

.cp-dd-page .cp-sessions-toolbar {
    position: relative;
    z-index: 5;
}

.cp-dd-page .cp-dropdown {
    z-index: 2000;
}

.cp-dd-page .rz-grid-table tbody td.rz-frozen-cell,
.cp-dd-page .rz-datatable-data td.rz-frozen-cell {
    background: #FFFFFF;
}

.cp-dd-headactions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Custom SVG button icons (RadzenButton Image=) — size to 16px and space before the label. */
.cp-dd-page .cp-dd-headactions .rz-button img,
.cp-dd-page .cp-sessions-filters .rz-button img {
    width: 16px;
    height: 16px;
    margin-right: 6px;
    vertical-align: middle;
    object-fit: contain;
}

.cp-ep-page .cp-discover-panel:has(.cp-dropdown-wrapper:focus-within) {
    overflow: visible;
}

.cp-ep-page .cp-sessions-toolbar {
    position: relative;
    z-index: 5;
}

.cp-ep-page .cp-dropdown {
    z-index: 2000;
}

.cp-ep-page .rz-grid-table tbody td.rz-frozen-cell,
.cp-ep-page .rz-datatable-data td.rz-frozen-cell {
    background: #FFFFFF;
}

.cp-ep-headactions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.cp-ep-page .cp-sessions-filters .rz-button img,
.cp-ep-page .cp-ep-headactions .rz-button img {
    width: 16px;
    height: 16px;
    margin-right: 6px;
    vertical-align: middle;
    object-fit: contain;
}

.cp-ep-stat-hint {
    color: #98A2B3;
    font-size: 12px;
    /*margin-left: 4px;*/
}

.ep-name {
    font-weight: 600;
    color: #101828;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ep-url {
    font-size: 12px;
    color: #667085;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ep-grade {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    padding: 2px 8px 2px 6px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    border: 1px solid transparent;
    background: #ECF8FE;
    color: #006470;
}

.ep-grade--a,
.ep-grade--b,
.ep-grade--c,
.ep-grade--d,
.ep-grade--f { background: #ECF8FE; color: #006470; border-color: transparent; }
.ep-grade--na { background: #F2F4F7; color: #98A2B3; border-color: #E4E7EC; }

.ep-pq {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
}

.ep-pq svg { flex-shrink: 0; }
.ep-pq--ready { background: #DCFCE7; color: #097732; }
.ep-pq--hybrid { background: #E0F2FE; color: #026AA2; }
.ep-pq--notready { background: #FCDDD6; color: #B82F2F; }
.ep-pq--unknown { background: #F2F4F7; color: #667085; }

.ep-findings { font-size: 13px; font-weight: 500; color: #1F2937; }
.ep-findings--ok { color: #097732; }
.ep-findings--na { color: #98A2B3; }

.ep-scope {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.ep-scope--asserted { background: #F2F4F7; color: #667085; }
.ep-scope--unverified { background: #FEF3C7; color: #B45309; }

.ep-muted { color: #98A2B3; }

.ep-detail-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.cp-ep-adhoc {
    position: relative;
    background: #FFFFFF;
    border: 1px solid #ECECEC;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 14px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.cp-ep-adhoc-close {
    position: absolute;
    top: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 4px;
}

    .cp-ep-adhoc-close:hover { background: #F2F4F7; }

.cp-ep-scopebox {
    box-sizing: border-box;
    padding: 12px;
    background: #FFFBEB;
    border: 1px solid #FDE68A;
    border-radius: 6px;
}

.cp-ep-scopebox-hint {
    margin-top: 6px;
    padding-left: 24px;
    font-size: 12px;
    line-height: 18px;
    color: #92400E;
}

.ep-drawer-desc {
    margin-top: -2px;
    margin-bottom: 4px;
    font-size: 13px;
    line-height: 20px;
    color: #5E6470;
}

.ep-drawer-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.ep-auth-box {
    box-sizing: border-box;
    padding: 12px;
    background: #F4FAFB;
    border: 1px solid #B0DCE1;
    border-radius: 4px;
}

.ep-auth-label {
    margin-top: 12px;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #242A41;
}

    .ep-auth-box .dd-textarea {
        background: #FFFFFF;
        min-height: 56px;
        border-color: #D5D5E2;
        box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    }

.ep-check-modal {
    position: relative;
    box-sizing: border-box;
    width: 634px;
    max-width: calc(100% - 32px);
    background: #FFFFFF;
    border-radius: 12px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    box-shadow: 0 20px 24px -4px rgba(16, 24, 40, 0.08), 0 8px 8px -4px rgba(16, 24, 40, 0.03);
}

.ep-check-close {
    position: absolute;
    top: 16px;
    right: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
}

    .ep-check-close:hover { background: #F3F4F6; }

.ep-check-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    width: 100%;
}

.ep-check-icon {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: #DEF3FD;
    border: 8px solid #ECF8FE;
    border-radius: 28px;
    flex-shrink: 0;
}

.ep-check-texts {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.ep-check-title {
    font-size: 18px;
    font-weight: 500;
    line-height: 26px;
    color: #242A41;
}

.ep-check-sub {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #91949D;
}

.ep-check-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.ep-check-label {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #4D506B;
}

.ep-check-input {
    box-sizing: border-box;
    width: 100%;
    height: 44px;
    padding: 10px 14px;
    border: 1px solid #D5D5E2;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    font-size: 16px;
    color: #242A41;
    outline: none;
    background: #FFFFFF;
}

    .ep-check-input::placeholder { color: #8E90AA; }

    .ep-check-input:focus {
        border-color: #008D9E;
        box-shadow: 0 0 0 3px rgba(0, 141, 158, 0.12);
    }

.ep-check-hint {
    font-size: 14px;
    line-height: 20px;
    color: #8E90AA;
}

.ep-check-checkline {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    font-size: 14px;
    line-height: 20px;
    color: #4D506B;
    cursor: pointer;
}

    .ep-check-checkline input[type="checkbox"] {
        width: 16px;
        height: 16px;
        margin-top: 2px;
        accent-color: #008D9E;
        cursor: pointer;
        flex-shrink: 0;
    }

.ep-check-note {
    font-size: 14px;
    line-height: 20px;
    color: #91949D;
}

.ep-check-actions {
    display: flex;
    gap: 12px;
    width: 100%;
}

.ep-check-btn {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 10px 18px;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}

    .ep-check-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.ep-check-cancel {
    background: #FFFFFF;
    border-color: #B5B7BD;
    color: #3F4555;
}

    .ep-check-cancel:hover:not(:disabled) { background: #F9FAFB; }

.ep-check-primary {
    background: #008D9E;
    border-color: #008D9E;
    color: #FFFFFF;
}

    .ep-check-primary:hover:not(:disabled) { background: #007B8A; }

.epcp-card {
    box-sizing: border-box;
    background: #FFFFFF;
    border: 1px solid #ECECEC;
    border-radius: 8px;
    padding: 20px 24px;
    margin-bottom: 14px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.epcp-title { font-size: 16px; font-weight: 700; color: #101828; margin-bottom: 14px; }

.epcp-inputrow { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.epcp-field { display: flex; flex-direction: column; gap: 6px; flex: 1 1 320px; min-width: 240px; }
.epcp-label { font-size: 13px; color: #4D506B; }

.epcp-input {
    box-sizing: border-box; width: 100%; height: 40px; padding: 0 12px;
    border: 1px solid #D5D5E2; border-radius: 4px; font-size: 14px; color: #242A41; outline: none; background: #FFFFFF;
}

    .epcp-input::placeholder { color: #8E90AA; }
    .epcp-input:focus { border-color: #008D9E; box-shadow: 0 0 0 3px rgba(0, 141, 158, 0.12); }

.epcp-check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: #4D506B; cursor: pointer; padding-bottom: 10px; }
    .epcp-check input[type="checkbox"] { width: 16px; height: 16px; accent-color: #008D9E; cursor: pointer; }

.epcp-assess {
    display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 20px;
    border-radius: 4px; font-size: 14px; font-weight: 600; color: #FFFFFF; background: #008D9E; border: 1px solid #008D9E;
    cursor: pointer; white-space: nowrap;
}

    .epcp-assess:hover:not(:disabled) { background: #007B8A; }
    .epcp-assess:disabled { opacity: 0.6; cursor: not-allowed; }

.epcp-unreachable { margin-top: 12px; font-size: 13px; font-weight: 600; color: #DC2626; }

.epcp-host { margin-top: 16px; font-size: 15px; font-weight: 600; color: #242A41; }
.epcp-host-url { color: #008D9E; }
.epcp-hostmeta { margin-top: 4px; font-size: 12px; color: #6B7280; }

.epcp-divider { height: 1px; background: #EFF0F5; margin: 16px 0; }

.epcp-grades { display: flex; flex-wrap: wrap; gap: 16px 0; }
.epcp-grade { display: inline-flex; align-items: baseline; gap: 6px; padding: 0 16px; }
    .epcp-grade:first-child { padding-left: 0; }
    .epcp-grade:not(:last-child) { border-right: 1px solid #E5E7EB; }
.epcp-grade-name { font-size: 13px; color: #4A5568; }
.epcp-grade-letter { font-size: 14px; font-weight: 700; }
.epcp-grade-meta { font-size: 12px; color: #6B7280; }
.epcp-grade-na { font-size: 13px; color: #9CA3AF; }

.epcp-transport {
    margin-top: 16px; box-sizing: border-box; padding: 14px 16px;
    background: #F4FAFB; border: 1px solid #B0DCE1; border-radius: 8px;
}

.epcp-transport-title { font-size: 14px; font-weight: 700; color: #101828; margin-bottom: 10px; }
.epcp-transport-line { font-size: 13px; color: #242A41; margin: 8px 0; }
.epcp-transport-sub { font-size: 12px; font-weight: 600; color: #242A41; margin: 10px 0 6px; }
.epcp-transport-foot { font-size: 12px; color: #5E6470; margin-top: 10px; }
.epcp-muted { font-size: 12px; color: #6B7280; }

.epcp-chiprow { display: flex; flex-wrap: wrap; gap: 8px; }
.epcp-chip { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.epcp-chip--ok { background: #DCFCE7; color: #166534; }
.epcp-chip--bad { background: #FEE2E2; color: #991B1B; }
.epcp-chip--high { background: #FFEDD5; color: #9A3412; }
.epcp-chip--warn { background: #FEF3C7; color: #92400E; }
.epcp-chip--info { background: #E0F2FE; color: #075985; }
.epcp-chip--muted { background: #F3F4F6; color: #6B7280; }

.epcp-sectionhead {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 2px; margin: 4px 0 10px;
    background: transparent; border: none; cursor: pointer;
    font-size: 16px; font-weight: 700; color: #101828;
}
.epcp-chevron { transition: transform .15s ease; flex-shrink: 0; }
    .epcp-chevron.is-open { transform: rotate(180deg); }

.epcp-detailcard {
    box-sizing: border-box; background: #FFFFFF; border: 1px solid #ECECEC;
    border-radius: 8px; padding: 16px; margin-bottom: 14px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.epcp-certgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.epcp-cell-title { font-size: 13px; font-weight: 700; color: #101828; margin-bottom: 6px; }
.epcp-cell-line { font-size: 13px; color: #242A41; margin-bottom: 2px; }
.epcp-cell-muted { font-size: 12px; color: #6B7280; margin-bottom: 2px; }

.epcp-finding { padding: 10px 0; border-top: 1px solid #F3F4F6; }
    .epcp-finding:first-child { border-top: none; }
.epcp-finding-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 13px; color: #101828; }
.epcp-finding-code { font-size: 11px; color: #6B7280; }
.epcp-finding-ev { font-size: 12px; color: #6B7280; margin-top: 4px; white-space: pre-wrap; word-break: break-word; }
.epcp-finding-fix { font-size: 12px; color: #065F46; margin-top: 4px; }

.epcp-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
    box-sizing: border-box; background: #FFFFFF; border: 1px solid #ECECEC; border-radius: 8px;
    padding: 48px 24px; margin-bottom: 14px; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.epcp-empty-text { font-size: 14px; color: #667085; }

@media (max-width: 700px) {
    .epcp-certgrid { grid-template-columns: 1fr; }
}

body:has(.cp-ep-details) .app-body-inner { background: #FFFFFF; }

.page.page-wide.cp-ep-details {
    display: block;
    overflow-y: auto;
    background: var(--cp-list-page-bg, #F3F4F6);
    --cp-page-gutter: 16px;
}

.epd-headcard {
    box-sizing: border-box;
    display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    background: #FFFFFF; border: 1px solid #ECECEC; border-radius: 8px;
    padding: 20px 24px; margin-bottom: 14px; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.epd-title { margin: 0 0 4px; font-size: 20px; font-weight: 700; color: #111827; word-break: break-word; }
.epd-sub { margin: 0; font-size: 13px; color: #6B7280; word-break: break-word; }
.epd-headactions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
    .epd-headactions .dd-btn { min-width: 110px; height: 40px; }

.epd-scopewarn {
    box-sizing: border-box; padding: 12px 14px; margin-bottom: 14px;
    background: #FEF2F2; border: 1px solid #FCA5A5; border-radius: 8px; font-size: 13px; color: #991B1B;
}

.epd-loading { padding: 24px; }

.epd-runtabs { margin-bottom: 14px; }
    .epd-runtabs .di-pilltabs { flex-wrap: wrap; }

.epd-empty-note {
    box-sizing: border-box; background: #FFFFFF; border: 1px dashed #E5E7EB; border-radius: 8px;
    padding: 28px; text-align: center; color: #6B7280;
}

/* ===================== Readiness page ===================== */
body:has(.cp-rd-page) .app-body-inner { background: #FFFFFF; }

.page.page-wide.cp-rd-page {
    display: block;
    overflow-y: auto;
    background: var(--cp-list-page-bg, #F3F4F6);
    --cp-page-gutter: 16px;
}

.rd-loading { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 60px 0; }
.rd-loading-text { font-size: 13px; color: #667085; }

/* Cards */
.rd-topcard, .rd-card {
    box-sizing: border-box;
    background: #FFFFFF; border: 1px solid #ECECEC; border-radius: 8px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    padding: 20px 24px; margin-bottom: 14px;
}

.rd-top-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    padding-bottom: 16px; border-bottom: 1px solid #EBEDF0;
}
.rd-title { margin: 0 0 4px; font-size: 20px; font-weight: 700; color: #060A12; }
.rd-sub { margin: 0; font-size: 12px; color: #5E6470; }

/* Donut + right column (badge/title/desc + stats) */
.rd-summary { display: flex; align-items: flex-start; gap: 16px; margin-top: 16px; flex-wrap: wrap; }
.rd-donut { position: relative; width: 140px; height: 140px; flex: 0 0 auto; }
.rd-donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.rd-donut-num { font-size: 24px; font-weight: 700; color: #000000; line-height: 1.1; }
.rd-donut-label { margin-top: 2px; font-size: 12px; font-weight: 600; color: #008D9E; }

.rd-body-right { flex: 1 1 0; min-width: 260px; display: flex; flex-direction: column; gap: 16px; }
.rd-summary-text { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.rd-statuspill {
    display: inline-flex; align-items: center; align-self: flex-start; height: 26px; padding: 0 12px; border-radius: 4px;
    font-size: 12px; font-weight: 400; border: 1px solid transparent;
}
    .rd-statuspill.is-action { background: #ECF8FE; border-color: #B0DCE1; color: #006470; }
    .rd-statuspill.is-ready { background: #ECFDF3; border-color: #A6F4C5; color: #067647; }
.rd-summary-title { margin: 4px 0 0; font-size: 16px; font-weight: 500; color: #060A12; }
.rd-summary-desc { font-size: 12px; color: #5E6470; }

/* Stats row (inside the right column, divider above) */
.rd-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; padding-top: 16px; border-top: 1px solid #EBEDF0; }
.rd-stat { font-size: 14px; font-weight: 500; color: #4A5568; }
.rd-stat-name { color: #4A5568; }
.rd-stat-hint { color: #98A2B3; font-size: 12px; font-weight: 400; }
.rd-stat-sep { color: #B5B7BD; }

/* Card head (Priority checks / All checks) */
.rd-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.rd-card-title { font-size: 16px; font-weight: 700; color: #101828; }
.rd-card-sub { margin-top: 2px; font-size: 13px; color: #6B7280; }
.rd-filters { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }

/* Priority checks — same card as Readiness, separated by a top divider */
.rd-priority-section { margin-top: 20px; padding-top: 20px; border-top: 1px solid #EFF0F5; }

/* Priority checks grid */
.rd-priority-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.rd-pcard { box-sizing: border-box; background: #FBFBFC; border: 1px solid #ECECEC; border-radius: 8px; padding: 12px 14px; }
.rd-pcard-head { display: flex; align-items: center; gap: 8px; }
.rd-pcard-title { font-size: 14px; font-weight: 600; color: #101828; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-pcard-view { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font-size: 12px; color: #667085; text-decoration: none; white-space: nowrap; flex: 0 0 auto; }
    .rd-pcard-view:hover { color: #101828; }
.rd-pcard-desc { margin-top: 8px; font-size: 12px; color: #667085; }
.rd-priority-empty { padding: 20px; text-align: center; color: #667085; font-size: 13px; background: #FBFBFC; border: 1px dashed #E5E7EB; border-radius: 8px; }

/* Status badge (shared) */
.rd-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.rd-badge svg { flex-shrink: 0; }
.rd-badge--green { background: #ECFDF3; color: #067647; }
.rd-badge--yellow { background: #FFFAEB; color: #B54708; }
.rd-badge--red { background: #FEF3F2; color: #B42318; }
.rd-badge--info { background: #EFF8FF; color: #026AA2; }

/* Each accordion group is its own separated white card */
.rd-groupcard {
    box-sizing: border-box;
    background: #FFFFFF; border: 1px solid #ECECEC; border-radius: 8px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    margin-bottom: 14px;
    overflow: hidden;
}
.rd-group-head {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 14px 20px; background: transparent; border: none; cursor: pointer; text-align: left;
}
.rd-group-chevron { flex-shrink: 0; transition: transform .15s ease; }
    .rd-group-chevron.is-open { transform: rotate(180deg); }
.rd-group-name { font-size: 14px; font-weight: 700; color: #101828; }
.rd-group-count { font-size: 12px; font-weight: 600; color: #98A2B3; }
.rd-group-review { margin-left: auto; font-size: 12px; color: #98A2B3; }

/* Check rows */
.rd-row { display: grid; grid-template-columns: 210px 150px minmax(0, 1fr) 110px 190px; gap: 16px; align-items: center; padding: 14px 20px; border-top: 1px solid #F2F4F7; }
.rd-row-main { min-width: 0; }
.rd-row-title { font-size: 14px; font-weight: 600; color: #101828; }
.rd-row-subtitle { margin-top: 2px; font-size: 12px; color: #667085; }
.rd-row-status { }
.rd-row-desc { font-size: 13px; color: #475467; }
.rd-row-time { font-size: 12px; color: #98A2B3; white-space: nowrap; }
.rd-row-link { text-align: right; }
.rd-row-fix { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #475467; text-decoration: none; }
    .rd-row-fix:hover { color: #0E7C8B; }
.rd-row-fixmuted { font-size: 13px; color: #98A2B3; }

@media (max-width: 1100px) {
    .rd-priority-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rd-row { grid-template-columns: 1fr 1fr; }
    .rd-row-desc, .rd-row-time { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
    .rd-priority-grid { grid-template-columns: 1fr; }
    .rd-row { grid-template-columns: 1fr; }
    .rd-row-link { text-align: left; }
}

body:has(.cp-crl-page) .app-body-inner { background: #FFFFFF; }

.page.page-wide.cp-crl-page {
    display: block;
    overflow-y: auto;
    background: #F5F6F7;
    --cp-page-gutter: 24px;
}

.cp-crl-page .crl-topcard,
.cp-crl-page .crl-card {
    box-sizing: border-box;
    background: #FFFFFF;
    box-shadow: 0 0 1px rgba(12, 26, 75, 0.24), 0 3px 8px -1px rgba(50, 50, 71, 0.05);
    border-radius: 8px;
}
.cp-crl-page .crl-topcard { display: flex; flex-direction: column; gap: 16px; padding: 16px; margin-bottom: 24px; }
.cp-crl-page .crl-card > .crl-grid,
.cp-crl-page .crl-card > .crl-empty { border-radius: 0 0 8px 8px; overflow: hidden; }
.cp-crl-page .crl-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cp-crl-page .crl-head-text { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cp-crl-page .crl-title {
    margin: 0; font-family: 'Open Sans', sans-serif; font-weight: 700;
    font-size: 20px; line-height: 28px; color: #060A12;
}
.cp-crl-page .crl-sub {
    margin: 0; font-family: 'Open Sans', sans-serif; font-weight: 400;
    font-size: 12px; line-height: 18px; color: #5E6470;
}

.cp-crl-page .crl-refresh {
    box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-width: 148px; height: 40px; padding: 8px 32px;
    background: #008D9E; border: none; border-radius: 4px; cursor: pointer;
    font-family: 'Open Sans', sans-serif; font-weight: 600; font-size: 14px; line-height: 20px; color: #FFFFFF;
    flex: 0 0 auto;
}
    .cp-crl-page .crl-refresh:hover:not(:disabled) { background: #007A89; }
    .cp-crl-page .crl-refresh:disabled { opacity: .55; cursor: not-allowed; }
    .cp-crl-page .crl-refresh svg { flex: 0 0 auto; }

.cp-crl-page .crl-stats {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px;
    padding-top: 16px; border-top: 1px solid #EBEDF0;
}
.cp-crl-page .crl-stat,
.cp-crl-page .crl-stat-sep {
    font-family: 'Inter', var(--cp-font-family), sans-serif; font-weight: 500; font-size: 14px; line-height: 17px; color: #4A5568;
}
.cp-crl-page .crl-stat-hint { font-weight: 400; color: #8492A6; }
.cp-crl-page .crl-stat-green { color: #099E32; }
.cp-crl-page .crl-stat-amber { color: #B25C00; }
.cp-crl-page .crl-stat-red { color: #FF5252; }

.cp-crl-page .crl-loading { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 60px 0; }
.cp-crl-page .crl-loading-text { font-size: 13px; color: #667085; }
.cp-crl-page .crl-empty { padding: 48px 16px; text-align: center; color: #5E6470; font-size: 13px; border-top: 1px solid #E7E8EA; }

.cp-crl-page .crl-toolbar {
    position: relative; z-index: 20;
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 16px;
}
.cp-crl-page .crl-search { flex: 0 1 340px; min-width: 220px; }
.cp-crl-page .crl-statusfilter { flex: 0 0 auto; min-width: 150px; margin-left: auto; }
.cp-crl-page .crl-toolbar-progress { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: #475467; }
.cp-crl-page .crl-toolbar-note { font-size: 12px; color: #8492A6; flex: 1 1 240px; min-width: 0; }
.cp-crl-page .crl-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.cp-crl-page .crl-act {
    box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 36px; padding: 0 14px;
    background: #F7F8F9; border: 1px solid #E7E8EA; border-radius: 4px;
    font-family: 'Open Sans', sans-serif; font-size: 13px; font-weight: 400; color: #5E6470;
    white-space: nowrap; cursor: pointer;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}
    .cp-crl-page .crl-act svg { flex: 0 0 auto; }
    .cp-crl-page .crl-act:hover:not(:disabled) { background: #FFFFFF; border-color: #008D9E; color: #008D9E; }
    .cp-crl-page .crl-act:disabled { color: #A5ADBA; cursor: not-allowed; }

.cp-crl-page .crl-grid .rz-grid-table { table-layout: fixed; width: 100%; border-top: none; }

.cp-crl-page .crl-grid thead th {
    background: #FAFAFB !important;
    border-top: 1px solid #E7E8EA !important;
    border-bottom: none !important;
    box-shadow: inset 0 -1px 0 #EDF2F7;
    padding: 10px 16px !important;
    vertical-align: middle;
}
.cp-crl-page .crl-grid thead th,
.cp-crl-page .crl-grid thead th .rz-column-title,
.cp-crl-page .crl-grid thead th .rz-column-title-content {
    font-family: 'Inter', var(--cp-font-family), sans-serif !important;
    font-weight: 500 !important;
    font-size: 12px !important;
    line-height: 18px !important;
    color: #8492A6 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.cp-crl-page .crl-grid tbody td {
    background: #FFFFFF;
    border-bottom: none !important;
    box-shadow: inset 0 -1px 0 #EDF2F7;
    padding: 10px 16px !important;
    vertical-align: middle;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;
    color: #5E6470;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.cp-crl-page .crl-grid tbody tr.rz-datatable-emptymessage > td,
.cp-crl-page .crl-grid tbody tr.rz-datatable-emptymessage-row > td,
.cp-crl-page .crl-grid tbody td.rz-datatable-emptymessage-cell {
    text-align: center;
    padding: 48px 16px !important;
    height: auto;
    white-space: normal;
    overflow: visible;
    color: #8492A6;
    font-size: 13px;
}

.cp-crl-page .crl-grid tbody tr > td,
.cp-crl-page .crl-grid tbody tr.rz-datatable-even > td,
.cp-crl-page .crl-grid tbody tr.rz-datatable-odd > td,
.cp-crl-page .crl-grid tbody tr.rz-data-row.rz-state-highlight > td,
.cp-crl-page .crl-grid tbody tr.rz-selected > td,
.cp-crl-page .crl-grid tbody tr.rz-expanded-row > td { background: #FFFFFF !important; }

.cp-crl-page .crl-subgrid tbody tr > td,
.cp-crl-page .crl-subgrid tbody tr.rz-datatable-even > td,
.cp-crl-page .crl-subgrid tbody tr.rz-datatable-odd > td { background: #FFFFFF !important; }

.cp-crl-page .crl-status { font-family: 'Inter', var(--cp-font-family), sans-serif; font-weight: 500; font-size: 12px; line-height: 18px; }

.cp-crl-page .crl-rowtoggle { display: flex; align-items: center; gap: 12px; }
.cp-crl-page .crl-chev {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; padding: 0; background: none; border: none; cursor: pointer;
    transition: transform .15s ease;
}
    .cp-crl-page .crl-chev.is-open { transform: rotate(180deg); }

.cp-crl-page .crl-grid tbody tr.rz-expanded-row-content > td {
    padding: 0 !important;
    box-shadow: inset 0 -1px 0 #EDF2F7;
    background: #FFFFFF !important;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    height: auto;
}

.cp-crl-page .crl-detail { display: grid; grid-template-columns: minmax(0, 827fr) minmax(0, 405fr); align-items: stretch; }
.cp-crl-page .crl-detail-main,
.cp-crl-page .crl-detail-side { box-sizing: border-box; background: #F4FAFB; padding: 24px 16px; min-width: 0; }
.cp-crl-page .crl-detail-side {
    border-left: 2px solid #008D9E;
    display: flex; flex-direction: column; justify-content: center; gap: 4px;
}

.cp-crl-page .crl-detail-label {
    font-family: 'Open Sans', sans-serif; font-weight: 400; font-size: 12px; line-height: 18px;
    color: #0F172A; margin-bottom: 8px;
}
.cp-crl-page .crl-detail-label--spaced { margin-top: 16px; }

.cp-crl-page .crl-detail-warn {
    box-sizing: border-box; display: flex; align-items: center;
    padding: 8px 10px; min-height: 32px;
    background: #FFF3E6; border: 1px dashed #FEB76B; border-radius: 4px;
    font-family: 'Open Sans', sans-serif; font-weight: 400; font-size: 12px; line-height: 18px; color: #B25C00;
}

.cp-crl-page .crl-detail-h {
    font-family: 'Inter', var(--cp-font-family), sans-serif; font-weight: 500; font-size: 12px; line-height: 18px; color: #060A12;
}
.cp-crl-page .crl-detail-text {
    font-family: 'Open Sans', sans-serif; font-weight: 400; font-size: 12px; line-height: 18px; color: #5E6470;
}

.cp-crl-page .crl-detail-meta {
    display: inline-flex; align-items: center; gap: 4px; align-self: flex-start;
    margin-top: 4px; padding: 4px 8px; max-width: 100%;
    background: #E9F8F8; border: 1px solid #B0DCE1; border-radius: 4px;
    font-family: 'Inter', var(--cp-font-family), sans-serif; font-size: 12px; line-height: 18px;
}
.cp-crl-page .crl-detail-meta-label { font-weight: 500; color: #006470; }
.cp-crl-page .crl-detail-meta-value { font-weight: 700; color: #00434D; }

.cp-crl-page .crl-detail-gridwrap { overflow-x: auto; }

/* Theme paints scrollbar thumbs in brand teal, which reads as a progress bar under the grid */
.cp-crl-page ::-webkit-scrollbar { height: 8px; width: 8px; }
.cp-crl-page ::-webkit-scrollbar-thumb { background: #D1D5DB !important; border-radius: 4px; }
.cp-crl-page ::-webkit-scrollbar-track { background: transparent !important; }
.cp-crl-page .crl-subgrid { background: #FFFFFF; border: 1px solid #E7E8EA; border-radius: 4px; overflow: hidden; }
.cp-crl-page .crl-subgrid thead th { background: #FAFAFB !important; padding: 10px 12px !important; height: auto; }
.cp-crl-page .crl-subgrid tbody td { padding: 10px 12px !important; height: auto; white-space: nowrap; }

@media (max-width: 1100px) {
    .cp-crl-page .crl-detail { grid-template-columns: 1fr; }
    .cp-crl-page .crl-detail-side { border-left: none; border-top: 2px solid #008D9E; }
}

/* ===================== System Health page ===================== */
/* Geometry and colour taken from the Figma frame "System Health". */
body:has(.cp-sh-page) .app-body-inner { background: #FFFFFF; }

.page.page-wide.cp-sh-page {
    display: block;
    overflow-y: auto;
    background: #F5F6F7;
    --cp-page-gutter: 24px;
}

/* Header card: title block on top, tab strip along the bottom edge of the same card */
.cp-sh-page .sh-headcard,
.cp-sh-page .sh-card {
    box-sizing: border-box;
    background: #FFFFFF;
    box-shadow: 0 0 1px rgba(12, 26, 75, 0.24), 0 3px 8px -1px rgba(50, 50, 71, 0.05);
    border-radius: 8px;
}
.cp-sh-page .sh-headcard { margin-bottom: 24px; }

.cp-sh-page .sh-head {
    display: flex; flex-direction: column; gap: 4px;
    padding: 16px;
    border-bottom: 1px solid #ECECEC;
}
.cp-sh-page .sh-back {
    display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
    font-family: 'Open Sans', sans-serif; font-weight: 400; font-size: 12px; line-height: 18px;
    color: #5E6470; text-decoration: none;
}
    .cp-sh-page .sh-back:hover { color: #008D9E; }
    .cp-sh-page .sh-back svg { flex: 0 0 auto; }
.cp-sh-page .sh-crumb {
    display: flex; align-items: center; gap: 8px;
    font-family: 'Open Sans', sans-serif; font-weight: 400; font-size: 12px; line-height: 18px;
    color: #5E6470;
}
.cp-sh-page .sh-crumb-sep { color: #91949D; }
.cp-sh-page .sh-crumb-current { color: #5E6470; }

.cp-sh-page .sh-title {
    margin: 0; font-family: 'Open Sans', sans-serif; font-weight: 700;
    font-size: 20px; line-height: 28px; color: #060A12;
}

/* Tabs: equal share of the card width, active one teal with a 2px underline */
.cp-sh-page .sh-tabs { display: flex; align-items: stretch; }
.cp-sh-page .sh-tab {
    flex: 1 1 0; min-width: 0;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    height: 52px; padding: 16px 4px;
    background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer;
    font-family: 'Open Sans', sans-serif; font-weight: 600; font-size: 14px; line-height: 20px;
    color: #8E90AA; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: color .12s ease, border-color .12s ease;
}
    .cp-sh-page .sh-tab:hover { color: #5E6470; }
    .cp-sh-page .sh-tab.is-active { color: #008D9E; border-bottom-color: #54B3BE; }
.cp-sh-page .sh-tab-count { font-weight: 400; }

/* Toolbar above the grid */
.cp-sh-page .sh-toolbar {
    position: relative; z-index: 20;
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 16px;
}
.cp-sh-page .sh-toolbar-title {
    font-family: 'Open Sans', sans-serif; font-weight: 700; font-size: 14px; color: #060A12;
    margin-right: auto;
}
.cp-sh-page .sh-search { flex: 0 1 320px; min-width: 200px; }
.cp-sh-page .sh-status { flex: 0 0 auto; min-width: 150px; }
.cp-sh-page .sh-clear {
    background: none; border: none; cursor: pointer; padding: 0 4px;
    font-family: 'Open Sans', sans-serif; font-size: 12px; color: #5E6470; white-space: nowrap;
}
    .cp-sh-page .sh-clear:hover { color: #008D9E; text-decoration: underline; }

.cp-sh-page .sh-delete {
    box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 36px; padding: 0 14px;
    background: #FFFFFF; border: 1px solid #E7E8EA; border-radius: 4px;
    font-family: 'Open Sans', sans-serif; font-size: 13px; font-weight: 400; color: #5E6470;
    white-space: nowrap; cursor: pointer;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}
    .cp-sh-page .sh-delete svg { flex: 0 0 auto; }
    .cp-sh-page .sh-delete:hover:not(:disabled) { background: #FEF3F2; border-color: #B82F2F; color: #B82F2F; }
    .cp-sh-page .sh-delete:disabled { color: #A5ADBA; cursor: not-allowed; }

/* Row actions */
.cp-sh-page .sh-actions { display: flex; align-items: center; gap: 4px; justify-content: center; }
.cp-sh-page .sh-trash:hover { color: #B82F2F; }

/* The app-wide Comfortable/Compact control keys off body.cp-density-compact but is scoped to
   .list-page-content — a wrapper this grey-canvas layout doesn't use, so the setting had no
   effect here. Same tightening values as the shared rule. */
body.cp-density-compact .cp-sh-page .sh-grid .rz-grid-table tbody td,
body.cp-density-compact .cp-crl-page .crl-grid .rz-grid-table tbody td {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

body.cp-density-compact .cp-sh-page .sh-grid .rz-grid-table thead th,
body.cp-density-compact .cp-crl-page .crl-grid .rz-grid-table thead th {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

/* Long single-line values (CDP URL, issuer DN). Applied per column, NOT to every cell —
   the status column carries full-sentence messages that must not be clipped. */
.cp-sh-page .sh-truncate {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- Grid chrome ---- */
/* Without a min-width the table (width:100%, table-layout:auto) compresses columns on a narrow
   window and truncates their content rather than overflowing. Kept just under the card's own
   width so it doesn't force a scrollbar at full size. */
.cp-sh-page .sh-grid .rz-grid-table { border-top: none; min-width: 1200px; }

.cp-sh-page .sh-grid thead th {
    background: #FAFAFB !important;
    border-top: 1px solid #E7E8EA !important;
    border-bottom: none !important;
    box-shadow: inset 0 -1px 0 #EDF2F7;
    padding: 10px 16px !important;
    vertical-align: middle;
}
.cp-sh-page .sh-grid thead th,
.cp-sh-page .sh-grid thead th .rz-column-title,
.cp-sh-page .sh-grid thead th .rz-column-title-content {
    font-family: 'Inter', var(--cp-font-family), sans-serif !important;
    font-weight: 500 !important;
    font-size: 12px !important;
    line-height: 18px !important;
    color: #8492A6 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.cp-sh-page .sh-grid tbody td {
    background: #FFFFFF;
    border-bottom: none !important;
    box-shadow: inset 0 -1px 0 #EDF2F7;
    padding: 10px 16px !important;
    vertical-align: middle;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;
    color: #5E6470;
}

/* No zebra striping — every row is white */
.cp-sh-page .sh-grid tbody tr > td,
.cp-sh-page .sh-grid tbody tr.rz-datatable-even > td,
.cp-sh-page .sh-grid tbody tr.rz-datatable-odd > td { background: #FFFFFF !important; }

/* ── Frozen Actions column: keep the sticky behaviour AND the row border ──
   Two separate things hide the row line on a frozen cell:
   1. Radzen declares its own box-shadow for the sticky edge, and box-shadow is a single
      property — it replaces the `inset 0 -1px 0` the other cells draw their line with.
   2. The theme paints the frozen cell's background on a ::before overlay (inset:0,
      z-index:-2). Negative-z children paint ABOVE the element's own background and inset
      shadow, so that overlay covers the line even when rule 1 is fixed.
   Matched on [class*=] because the cell carries rz-frozen-cell-right / -right-end / -inner
   rather than the bare class. */
.cp-sh-page .sh-grid tbody td[class*="rz-frozen-cell"]::before,
.cp-sh-page .sh-grid tbody td[class*="rz-frozen-cell"]::after,
.cp-sh-page .sh-grid thead th[class*="rz-frozen-cell"]::before,
.cp-sh-page .sh-grid thead th[class*="rz-frozen-cell"]::after,
.cp-ep2-page .ep2-grid tbody td[class*="rz-frozen-cell"]::before,
.cp-ep2-page .ep2-grid tbody td[class*="rz-frozen-cell"]::after,
.cp-ep2-page .ep2-grid thead th[class*="rz-frozen-cell"]::before,
.cp-ep2-page .ep2-grid thead th[class*="rz-frozen-cell"]::after {
    background-color: transparent !important;
}

/* The cell itself is opaque, so the overlay isn't needed to hide rows scrolling under it. */
.cp-sh-page .sh-grid tbody td[class*="rz-frozen-cell"],
.cp-ep2-page .ep2-grid tbody td[class*="rz-frozen-cell"] {
    background: #FFFFFF !important;
    box-shadow: inset 0 -1px 0 #EDF2F7, -5px 0 5px -5px rgba(0, 0, 0, 0.12) !important;
}
.cp-sh-page .sh-grid thead th[class*="rz-frozen-cell"],
.cp-ep2-page .ep2-grid thead th[class*="rz-frozen-cell"] {
    background: #FAFAFB !important;
    box-shadow: inset 0 -1px 0 #EDF2F7, -5px 0 5px -5px rgba(0, 0, 0, 0.12) !important;
}

/* Status pills */
.cp-sh-page .sh-badge {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 4px 8px; border-radius: 4px; max-width: 100%;
    font-family: 'Open Sans', sans-serif; font-weight: 400; font-size: 10px; line-height: 14px;
    text-align: center;
}
.cp-sh-page .sh-badge--bad { background: #FCDDD6; color: #B82F2F; }
.cp-sh-page .sh-badge--ok { background: #D6F5E0; color: #09753A; }

/* theme-overrides.css sets .rz-data-grid-data to overflow: SCROLL on both axes, which renders
   a permanent bar under every grid whether or not the columns actually overflow. "auto" shows
   one only when it's needed. */
.cp-sh-page .sh-grid .rz-data-grid-data,
.cp-crl-page .crl-grid .rz-data-grid-data {
    overflow-x: auto;
    overflow-y: auto;
}

/* The app theme paints scrollbar thumbs in brand teal, which reads as a progress bar
   sitting under the grid. Same local override the Data Import preview grid uses. */
.cp-sh-page .sh-grid ::-webkit-scrollbar { height: 8px; width: 8px; }
.cp-sh-page .sh-grid ::-webkit-scrollbar-thumb { background: #D1D5DB !important; border-radius: 4px; }
.cp-sh-page .sh-grid ::-webkit-scrollbar-track { background: transparent !important; }
.cp-sh-page .sh-grid { scrollbar-color: #D1D5DB transparent; }

/* Pager — identical to every other list page. The shared rules live in certificate-list.css
   scoped to `.page-content.list-page-content`, a wrapper these grey-canvas pages don't use,
   so the SAME declarations are repeated here rather than inventing a second pager style.
   Button size/shape and the numeric fill still come from theme-overrides.css, untouched. */
.cp-sh-page .sh-grid .rz-pager,
.cp-crl-page .crl-grid .rz-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #FFFFFF;
    border-top: 1px solid #E5E7EB;
    border-radius: 0 0 8px 8px;
}

.cp-sh-page .sh-grid .rz-pager .rz-pager-summary,
.cp-crl-page .crl-grid .rz-pager .rz-pager-summary {
    order: -1;
    margin-right: auto;
    font-size: 13px;
    color: #6B7280;
}

/* ===================== Application Settings page ===================== */
body:has(.cp-as-page) .app-body-inner { background: #FFFFFF; }

.page.page-wide.cp-as-page {
    display: block;
    overflow-y: auto;
    background: #F5F6F7;
    --cp-page-gutter: 24px;
}

.cp-as-page .as-headcard,
.cp-as-page .as-card,
.cp-as-page .as-actions {
    box-sizing: border-box;
    background: #FFFFFF;
    box-shadow: 0 0 1px rgba(12, 26, 75, 0.24), 0 3px 8px -1px rgba(50, 50, 71, 0.05);
    border-radius: 8px;
    margin-bottom: 24px;
}

.cp-as-page .as-headcard { padding: 16px; display: flex; flex-direction: column; gap: 4px; }

.cp-as-page .as-crumb {
    display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
    font-family: 'Open Sans', sans-serif; font-weight: 400; font-size: 12px; line-height: 18px;
    color: #5E6470; text-decoration: none;
}
    .cp-as-page .as-crumb:hover { color: #008D9E; }
    .cp-as-page .as-crumb svg { flex: 0 0 auto; }
.cp-as-page .as-crumb-current { color: #060A12; }

.cp-as-page .as-title {
    margin: 0; font-family: 'Open Sans', sans-serif; font-weight: 700;
    font-size: 20px; line-height: 28px; color: #060A12;
}

/* Card heading sits above a full-bleed divider, so the rule runs the card's whole width */
.cp-as-page .as-card-head { padding: 16px 24px; border-bottom: 1px solid #ECECEC; }
.cp-as-page .as-card-title {
    font-family: 'Open Sans', sans-serif; font-weight: 700; font-size: 16px; line-height: 24px; color: #060A12;
}
.cp-as-page .as-card-sub {
    margin-top: 2px;
    font-family: 'Open Sans', sans-serif; font-weight: 400; font-size: 13px; line-height: 20px; color: #5E6470;
    max-width: 90ch;
}

/* Field grid */
.cp-as-page .as-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px 24px;
    padding: 24px;
}
.cp-as-page .as-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.cp-as-page .as-field { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.cp-as-page .as-spacer { visibility: hidden; }

.cp-as-page .as-label {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: 'Open Sans', sans-serif; font-weight: 400; font-size: 13px; line-height: 20px; color: #344054;
}
.cp-as-page .as-info { cursor: help; font-size: 16px; color: #91949D; }

/* Inputs share one height and border so numerics and text boxes line up across columns */
.cp-as-page .as-input,
.cp-as-page .as-input input {
    box-sizing: border-box;
    width: 100%;
    height: 40px;
}
.cp-as-page .as-input {
    border: 1px solid #D0D5DD;
    border-radius: 4px;
    background: #FFFFFF;
}
    .cp-as-page .as-input input { border: none; background: transparent; padding: 0 12px; font-size: 13px; color: #101828; }
    .cp-as-page .as-input.rz-state-disabled,
    .cp-as-page .as-input[disabled] { background: #F2F4F7; border-color: #E4E7EC; }

/* Radzen's checked track is --rz-switch-checked-background-color, which resolves through
   --rz-secondary to #08A8BC66 — teal at 40% ALPHA, so the page shows through and the toggle
   reads as washed out/disabled. Solid primary teal here instead. (--rz-secondary is left
   alone: its translucency is deliberate for grid selection and pager highlights.) */
.cp-as-page .rz-switch {
    --rz-switch-checked-background-color: #008D9E;
    --rz-switch-checked-circle-background-color: #FFFFFF;
    --rz-switch-circle-background-color: #FFFFFF;
    --rz-switch-background-color: #D0D5DD;
}

/* Toggle + its state word, aligned to the same 40px row as the inputs */
.cp-as-page .as-toggle { display: inline-flex; align-items: center; gap: 12px; min-height: 40px; }
.cp-as-page .as-toggle > span {
    font-family: 'Open Sans', sans-serif; font-size: 14px; color: #101828;
}

/* Action bar */
.cp-as-page .as-actions { display: flex; align-items: center; gap: 12px; padding: 16px 24px; }

@media (max-width: 1100px) {
    .cp-as-page .as-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cp-as-page .as-spacer { display: none; }
}

@media (max-width: 700px) {
    .cp-as-page .as-grid,
    .cp-as-page .as-grid-2 { grid-template-columns: 1fr; }
}

body:has(.cp-cdp-page) .app-body-inner { background: #FFFFFF; }

.page.page-wide.cp-cdp-page {
    display: block;
    overflow-y: auto;
    background: #F5F6F7;
    --cp-page-gutter: 24px;
}

.cp-cdp-page .cdp-headcard {
    box-sizing: border-box;
    background: #FFFFFF;
    box-shadow: 0 0 1px rgba(12, 26, 75, 0.24), 0 3px 8px -1px rgba(50, 50, 71, 0.05);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 24px;
    display: flex; flex-direction: column; gap: 4px;
}

.cp-cdp-page .cdp-crumb {
    display: flex; align-items: center; gap: 8px;
    font-family: 'Open Sans', sans-serif; font-weight: 400; font-size: 12px; line-height: 18px; color: #5E6470;
}
    .cp-cdp-page .cdp-crumb a { color: #5E6470; text-decoration: none; }
    .cp-cdp-page .cdp-crumb a:hover { color: #008D9E; }
.cp-cdp-page .cdp-back { display: inline-flex; align-items: center; flex: 0 0 auto; }
.cp-cdp-page .cdp-crumb-sep { color: #91949D; }
.cp-cdp-page .cdp-crumb-current { color: #060A12; }

.cp-cdp-page .cdp-head-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cp-cdp-page .cdp-title {
    margin: 0; font-family: 'Open Sans', sans-serif; font-weight: 700;
    font-size: 20px; line-height: 28px; color: #060A12;
}

.cp-cdp-page .cdp-refresh {
    box-sizing: border-box; display: inline-flex; align-items: center; gap: 8px;
    height: 36px; padding: 0 14px;
    background: #FFFFFF; border: 1px solid #E7E8EA; border-radius: 4px;
    font-family: 'Open Sans', sans-serif; font-size: 13px; color: #5E6470; cursor: pointer;
}
    .cp-cdp-page .cdp-refresh:hover:not(:disabled) { border-color: #008D9E; color: #008D9E; }
    .cp-cdp-page .cdp-refresh:disabled { color: #A5ADBA; cursor: not-allowed; }

.cp-cdp-page .cdp-sub {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    font-family: 'Open Sans', sans-serif; font-size: 12px; line-height: 18px; color: #5E6470;
}
.cp-cdp-page .cdp-sub-path { font-family: 'Roboto Mono', monospace; }
.cp-cdp-page .cdp-sub-sep { color: #91949D; }

.cp-cdp-page .cdp-table { display: flex; flex-direction: column; gap: 8px; }

.cp-cdp-page .cdp-row {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: center;
    min-height: 50px;
    background: #FFFFFF;
    box-shadow: inset 0 -1px 0 #EDF2F7;
}

.cp-cdp-page .cdp-c {
    box-sizing: border-box;
    padding: 16px;
    min-width: 0;
    font-family: 'Open Sans', sans-serif; font-weight: 400; font-size: 12px; line-height: 18px; color: #5E6470;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.cp-cdp-page .cdp-c-name {
    display: flex; align-items: center; gap: 4px;
    padding-left: calc(16px + (var(--d, 0) * 16px));
}

.cp-cdp-page .cdp-head {
    background: #EBEDF0;
    border-top: 1px solid #E7E8EA;
    border-radius: 8px 8px 0 0;
}
    .cp-cdp-page .cdp-head .cdp-c-name { font-weight: 700; color: #060A12; }

.cp-cdp-page .cdp-group { border-radius: 8px; overflow: hidden; }
.cp-cdp-page .cdp-row--top { background: #FAFAFB; border-top: 1px solid #E7E8EA; }
    .cp-cdp-page .cdp-row--top.is-open { background: #F4FAFB; }
    .cp-cdp-page .cdp-row--top .cdp-name { font-weight: 700; color: #060A12; }

.cp-cdp-page .cdp-name {
    font-family: 'Open Sans', sans-serif; font-size: 12px; line-height: 18px; color: #060A12;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cp-cdp-page .cdp-name--child {
    font-family: 'Inter', var(--cp-font-family), sans-serif; font-weight: 500;
}

.cp-cdp-page .cdp-count {
    flex: 0 0 auto; margin-left: 4px;
    font-family: 'Open Sans', sans-serif; font-weight: 700; font-size: 12px; line-height: 18px; color: #060A12;
}

.cp-cdp-page .cdp-chev {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 16px; height: 16px; padding: 0; background: none; border: none; cursor: pointer;
    transition: transform .15s ease;
}
    .cp-cdp-page .cdp-chev.is-open { transform: rotate(180deg); }
.cp-cdp-page .cdp-chev-gap { display: inline-block; width: 16px; flex: 0 0 auto; }

.cp-cdp-page .cdp-icon { flex: 0 0 auto; color: #91949D; }
.cp-cdp-page .cdp-row--top .cdp-icon { color: #060A12; }

.cp-cdp-page .cdp-served {
    color: #008D9E; text-decoration: none;
    font-family: 'Roboto Mono', monospace; font-size: 11px;
}
    .cp-cdp-page .cdp-served:hover { text-decoration: underline; }
.cp-cdp-page .cdp-unpublished { color: #91949D; }

.cp-cdp-page .cdp-state {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    background: #FFFFFF; border-radius: 0 0 8px 8px;
    padding: 48px 16px; font-size: 13px; color: #5E6470;
}
.cp-cdp-page .cdp-state--error { color: #B82F2F; }

.cp-cdp-page .cdp-note {
    background: #FFF3E6; border: 1px dashed #FEB76B; border-radius: 4px;
    padding: 10px 12px; font-size: 12px; line-height: 18px; color: #B25C00;
}

@media (max-width: 900px) {
    .cp-cdp-page .cdp-row { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); }
}

/* ===================== Endpoint page ===================== */
body:has(.cp-ep2-page) .app-body-inner { background: #FFFFFF; }

.page.page-wide.cp-ep2-page {
    display: block;
    overflow-y: auto;
    background: #F5F6F7;
    --cp-page-gutter: 24px;
}

.cp-ep2-page .ep2-headcard,
.cp-ep2-page .ep2-card {
    box-sizing: border-box;
    background: #FFFFFF;
    box-shadow: 0 0 1px rgba(12, 26, 75, 0.24), 0 3px 8px -1px rgba(50, 50, 71, 0.05);
    border-radius: 8px;
}
.cp-ep2-page .ep2-headcard { padding: 16px; margin-bottom: 24px; display: flex; flex-direction: column; gap: 16px; }

.cp-ep2-page .ep2-crumb {
    display: flex; align-items: center; gap: 8px;
    font-family: 'Open Sans', sans-serif; font-weight: 400; font-size: 12px; line-height: 18px; color: #5E6470;
}
    .cp-ep2-page .ep2-crumb a { color: #5E6470; text-decoration: none; }
    .cp-ep2-page .ep2-crumb a:hover { color: #008D9E; }
.cp-ep2-page .ep2-back { display: inline-flex; align-items: center; flex: 0 0 auto; }
.cp-ep2-page .ep2-crumb-sep { color: #91949D; }
.cp-ep2-page .ep2-crumb-current { color: #060A12; }

.cp-ep2-page .ep2-head-row {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    margin-top: -12px;
}
.cp-ep2-page .ep2-title {
    margin: 0; font-family: 'Open Sans', sans-serif; font-weight: 700;
    font-size: 20px; line-height: 28px; color: #060A12;
}

.cp-ep2-page .ep2-export {
    box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-width: 148px; height: 40px; padding: 8px 24px;
    background: #008D9E; border: none; border-radius: 4px; cursor: pointer;
    font-family: 'Open Sans', sans-serif; font-weight: 600; font-size: 14px; line-height: 20px; color: #FFFFFF;
    flex: 0 0 auto;
}
    .cp-ep2-page .ep2-export:hover:not(:disabled) { background: #007A89; }
    .cp-ep2-page .ep2-export:disabled { opacity: .55; cursor: not-allowed; }

.cp-ep2-page .ep2-stats {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px;
    padding-top: 16px; border-top: 1px solid #EBEDF0;
}
.cp-ep2-page .ep2-stat,
.cp-ep2-page .ep2-stat-sep {
    font-family: 'Inter', var(--cp-font-family), sans-serif; font-weight: 500; font-size: 14px; line-height: 17px; color: #4A5568;
}
.cp-ep2-page .ep2-stat-green { color: #099E32; }
.cp-ep2-page .ep2-stat-amber { color: #B25C00; }
.cp-ep2-page .ep2-stat-red { color: #FF5252; }

/* Toolbar: search left, date range and status right */
.cp-ep2-page .ep2-toolbar {
    position: relative; z-index: 20;
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 16px;
}
.cp-ep2-page .ep2-search { flex: 0 1 330px; min-width: 220px; margin-right: auto; }
.cp-ep2-page .ep2-date { flex: 0 0 auto; min-width: 140px; }
.cp-ep2-page .ep2-status { flex: 0 0 auto; min-width: 140px; }
.cp-ep2-page .ep2-clear {
    background: none; border: none; cursor: pointer; padding: 0 4px;
    font-family: 'Open Sans', sans-serif; font-size: 12px; color: #5E6470; white-space: nowrap;
}
    .cp-ep2-page .ep2-clear:hover { color: #008D9E; text-decoration: underline; }

/* ---- Grid chrome ---- */
/* Radzen's table is width:100% with table-layout:auto, so a narrow container SQUEEZES columns
   below their stated widths — content truncates away instead of the grid scrolling. A min-width
   equal to the columns' intended total forces the overflow, and .rz-data-grid-data (set to
   overflow-x:auto below) then scrolls it. 90+280+280+110+140 fixed, plus ~280 for Details. */
.cp-ep2-page .ep2-grid .rz-grid-table { border-top: none; min-width: 1180px; }

.cp-ep2-page .ep2-grid thead th {
    background: #FAFAFB !important;
    border-top: 1px solid #E7E8EA !important;
    border-bottom: none !important;
    box-shadow: inset 0 -1px 0 #EDF2F7;
    padding: 10px 16px !important;
    vertical-align: middle;
}
.cp-ep2-page .ep2-grid thead th,
.cp-ep2-page .ep2-grid thead th .rz-column-title,
.cp-ep2-page .ep2-grid thead th .rz-column-title-content {
    font-family: 'Inter', var(--cp-font-family), sans-serif !important;
    font-weight: 500 !important;
    font-size: 12px !important;
    line-height: 18px !important;
    color: #8492A6 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.cp-ep2-page .ep2-grid tbody td {
    background: #FFFFFF;
    border-bottom: none !important;
    box-shadow: inset 0 -1px 0 #EDF2F7;
    padding: 10px 16px !important;
    vertical-align: middle;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;
    color: #5E6470;
}

.cp-ep2-page .ep2-grid tbody tr > td,
.cp-ep2-page .ep2-grid tbody tr.rz-datatable-even > td,
.cp-ep2-page .ep2-grid tbody tr.rz-datatable-odd > td { background: #FFFFFF !important; }

/* Permanent scrollbar comes from theme-overrides' overflow:scroll — only show one when needed */
.cp-ep2-page .ep2-grid .rz-data-grid-data { overflow-x: auto; overflow-y: auto; }
.cp-ep2-page .ep2-grid ::-webkit-scrollbar { height: 8px; width: 8px; }
.cp-ep2-page .ep2-grid ::-webkit-scrollbar-thumb { background: #D1D5DB !important; border-radius: 4px; }
.cp-ep2-page .ep2-grid ::-webkit-scrollbar-track { background: transparent !important; }

/* Same pager as every other list page */
.cp-ep2-page .ep2-grid .rz-pager {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; background: #FFFFFF;
    border-top: 1px solid #E5E7EB; border-radius: 0 0 8px 8px;
}
.cp-ep2-page .ep2-grid .rz-pager .rz-pager-summary {
    order: -1; margin-right: auto; font-size: 13px; color: #6B7280;
}

.cp-ep2-page .ep2-truncate {
    display: block; max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* The action cell keeps the grid's 10px vertical rhythm but drops the 16px side padding, which
   was eating most of the column and clipping the button's right edge. */
.cp-ep2-page .ep2-grid tbody td:last-child,
.cp-ep2-page .ep2-grid thead th:last-child {
    padding-left: 8px !important;
    padding-right: 8px !important;
}

.cp-ep2-page .ep2-browse {
    box-sizing: border-box;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    max-width: 100%;
    height: 28px; padding: 0 10px;
    background: #FFFFFF; border: 1px solid #E7E8EA; border-radius: 4px;
    font-family: 'Open Sans', sans-serif; font-size: 12px; color: #5E6470;
    white-space: nowrap; cursor: pointer;
}
    .cp-ep2-page .ep2-browse svg { flex: 0 0 auto; }
    .cp-ep2-page .ep2-browse:hover:not(:disabled) { border-color: #008D9E; color: #008D9E; }
    .cp-ep2-page .ep2-browse:disabled { color: #A5ADBA; cursor: not-allowed; }

/* States */
.cp-ep2-page .ep2-state {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 60px 24px; font-size: 13px; color: #5E6470; text-align: center;
}
.cp-ep2-page .ep2-state--empty { max-width: 70ch; margin: 0 auto; line-height: 1.6; }

@media (max-width: 1100px) {
    .cp-ep2-page .ep2-search { margin-right: 0; flex: 1 1 100%; }
}

/* ===================== Database Settings page ===================== */
body:has(.cp-dbs-page) .app-body-inner { background: #FFFFFF; }

.page.page-wide.cp-dbs-page {
    display: block;
    overflow-y: auto;
    background: var(--cp-list-page-bg, #F3F4F6);
    --cp-page-gutter: 16px;
}

.dbs-headcard, .dbs-card {
    box-sizing: border-box;
    background: #FFFFFF; border: 1px solid #E4E7EC; border-radius: 8px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.1), 0 1px 2px rgba(16, 24, 40, 0.06);
    padding: 20px 24px; margin-bottom: 16px;
}

.dbs-back {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; color: #667085; text-decoration: none; margin-bottom: 8px;
}
    .dbs-back:hover { color: #101828; }

.dbs-title { margin: 0 0 4px; font-size: 20px; font-weight: 700; color: #060A12; }
.dbs-sub { margin: 0; font-size: 13px; color: #5E6470; }

.dbs-detailcard { display: flex; flex-direction: column; min-height: 460px; }
.dbs-card-title { font-size: 16px; font-weight: 700; color: #101828; }
.dbs-card-sub { margin-top: 2px; font-size: 13px; color: #5E6470; }
.dbs-divider { height: 1px; background: #EBEDF0; margin: 16px 0; }

.dbs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
.dbs-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dbs-label { font-size: 13px; color: #344054; }
.dbs-input {
    box-sizing: border-box; width: 100%; height: 40px; padding: 0 12px;
    border: 1px solid #D0D5DD; border-radius: 6px; font-size: 14px; color: #1F2937; background: #FFFFFF; outline: none;
}
    .dbs-input:read-only { cursor: default; }

.dbs-actions { margin-top: auto; padding-top: 16px; border-top: 1px solid #EBEDF0; }

@media (max-width: 640px) {
    .dbs-grid { grid-template-columns: 1fr; }
}

/* ===================== Stakeholders page ===================== */
.cp-stk-page .cp-discover-panel:has(.cp-dropdown-wrapper:focus-within) { overflow: visible; }
.cp-stk-page .cp-sessions-toolbar { position: relative; z-index: 5; }

.cp-stk-page .rz-grid-table tbody td.rz-frozen-cell,
.cp-stk-page .rz-datatable-data td.rz-frozen-cell { background: #FFFFFF; }

.cp-stk-headactions {
    display: flex; align-items: center; gap: 12px; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end;
}
.cp-stk-search { width: 280px; max-width: 100%; }

.cp-stk-page .cp-sessions-filters .rz-button img {
    width: 16px; height: 16px; margin-right: 6px; vertical-align: middle; object-fit: contain;
}

/* Name cell: avatar + name */
.stk-name { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.stk-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: #F2F4F7; }
.stk-name-text { font-weight: 600; color: #101828; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stk-muted { color: #667085; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.stk-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 10px; }

/* ===================== Stakeholder form (Add / Edit) ===================== */
body:has(.cp-stkf-page) .app-body-inner { background: #FFFFFF; }

.page.page-wide.cp-stkf-page {
    display: block;
    overflow-y: auto;
    background: var(--cp-list-page-bg, #F3F4F6);
    --cp-page-gutter: 16px;
}

.stkf-card {
    box-sizing: border-box;
    background: #FFFFFF; border: 1px solid #E4E7EC; border-radius: 8px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.1), 0 1px 2px rgba(16, 24, 40, 0.06);
    padding: 24px; margin-bottom: 16px;
}

.stkf-title { margin: 0 0 4px; font-size: 20px; font-weight: 700; color: #060A12; }
.stkf-sub { margin: 0; font-size: 13px; color: #5E6470; }
.stkf-divider { height: 1px; background: #EBEDF0; margin: 16px 0; }

.stkf-avatar-row { display: flex; align-items: center; gap: 14px; margin: 4px 0 20px; }
.stkf-avatar-wrap { cursor: pointer; flex-shrink: 0; line-height: 0; }
.stkf-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: #F2F4F7; }
.stkf-avatar-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.stkf-avatar-name { font-size: 16px; font-weight: 700; color: #101828; }
.stkf-avatar-email { font-size: 13px; color: #667085; }
.stkf-change { margin-top: 2px; font-size: 12px; font-weight: 600; color: #008D9E; cursor: pointer; }
    .stkf-change:hover { text-decoration: underline; }

.stkf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; }
.stkf-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.stkf-span2 { grid-column: 1 / -1; }
.stkf-section { grid-column: 1 / -1; margin-top: 8px; font-size: 16px; font-weight: 700; color: #101828; }
.stkf-label { font-size: 13px; color: #344054; }
.stkf-req { color: #EE4723; }
.stkf-hint { font-size: 11px; color: #9CA3AF; }

.cp-stkf-page .stkf-field .rz-textbox,
.cp-stkf-page .stkf-field .rz-dropdown { width: 100%; }

.stkf-footer { display: flex; align-items: center; gap: 16px; }

@media (max-width: 700px) {
    .stkf-grid { grid-template-columns: 1fr; }
}

/* Stakeholder Detail / Edit drawer */
.stk-drawer-avatar { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.stk-drawer-avatar-wrap { cursor: pointer; flex-shrink: 0; line-height: 0; }
.stk-drawer-img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: #F2F4F7; }
.stk-drawer-avatar-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.stk-drawer-name { font-size: 15px; font-weight: 700; color: #101828; }
.stk-drawer-email { font-size: 13px; color: #667085; }

.cp-stk-page .di-drawer-footer.stk-drawer-footer { display: flex; gap: 8px; justify-content: center; }
    .stk-drawer-footer .dd-btn { min-width: 0; flex: 1 1 0; padding: 0 12px; }

/* ===================== Certificate Authority page ===================== */
.cp-ca-page .cp-discover-panel:has(.cp-dropdown-wrapper:focus-within) { overflow: visible; }
.cp-ca-page .cp-sessions-toolbar { position: relative; z-index: 5; }
.cp-ca-page .cp-dropdown { z-index: 2000; }
.cp-ca-page .rz-grid-table tbody td.rz-frozen-cell,
.cp-ca-page .rz-datatable-data td.rz-frozen-cell { background: #FFFFFF; }

.cp-ca-headactions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }

/* Pill tabs + search row */
.cp-ca-tabsrow {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    padding: 14px 16px; border-bottom: 1px solid #EDEFF2;
}
.cp-ca-search { width: 300px; max-width: 100%; }

/* Clear Filter link */
.cp-ca-clearfilter {
    background: transparent; border: none; cursor: pointer;
    font-size: 13px; color: #475467; text-decoration: underline; padding: 0 4px;
}
    .cp-ca-clearfilter:hover { color: #101828; }

.ca-actions { display: inline-flex; align-items: center; justify-content: flex-end; }

/* CA health cell: badge + latency bar + ms */
.cahp { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.cahp-badge {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; line-height: 14px; white-space: nowrap;
}
.cahp-badge--reachable { background: #DCFCE7; color: #097732; }
.cahp-badge--unreachable { background: #FCDDD6; color: #B82F2F; }
.cahp-badge--degraded { background: #FEF3C7; color: #B45309; }
.cahp-badge--certonly { background: #E0F2FE; color: #026AA2; }
.cahp-badge--unknown { background: #EDF0F5; color: #344054; }

.cahp-bar { position: relative; width: 138px; max-width: 100%; height: 6px; }
.cahp-bar-track { position: absolute; inset: 0; background: #EFF0F5; border-radius: 4px; }
.cahp-bar-fill { position: absolute; left: 0; top: 0; height: 6px; border-radius: 4px; min-width: 6px; }
.cahp-fill--reachable { background: #12B76A; }
.cahp-fill--unreachable { background: #FF5252; }
.cahp-fill--degraded { background: #F79009; }
.cahp-fill--certonly { background: #2E90FA; }
.cahp-fill--unknown { background: #B0B0B0; }

.cahp-ms { font-size: 12px; color: #6B788E; }

.dd-domain {
    font-weight: 600;
    color: #1F2937;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Status badge: icon + label, colour per status */
.dd-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    line-height: 14px;
    white-space: nowrap;
}

    .dd-status svg {
        flex: none;
        width: 12px;
        height: 12px;
    }

.dd-status--healthy {
    background: #DCFCE7;
    color: #097732;
}

.dd-status--pending {
    background: #E0F2FE;
    color: #026AA2;
}

.dd-status--conn-error {
    background: #FCDDD6;
    color: #B82F2F;
}

.dd-status--cert-invalid {
    background: #FDEAD7;
    color: #B25C00;
}

/* Certificate column: Valid/Invalid label + issuer beneath it */
.dd-cert {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.dd-cert-status {
    font-size: 13px;
    font-weight: 600;
}

    .dd-cert-status.is-valid {
        color: #16A34A;
    }

    .dd-cert-status.is-invalid {
        color: #DC2626;
    }

.dd-cert-issuer {
    font-size: 12px;
    color: #6B7280;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Row detail actions: Re-test / eye / trash */
.dd-detail-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.dd-retest-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    padding: 0 14px;
    border: 1px solid #D0D5DD;
    background: #FFFFFF;
    color: #344054;
    font-size: 12px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
}

    .dd-retest-btn:hover {
        background: #F9FAFB;
    }

.dd-trash-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background: transparent;
    color: #8A94A6;
    border-radius: 6px;
    cursor: pointer;
}

    .dd-trash-btn:hover {
        color: #F04438;
        background: #FEF3F2;
    }

/* Toolbar Delete turns red once a row is selected */
.dd-delete-active.rz-button {
    background: #FF5252 !important;
    border-color: #FF5252 !important;
    color: #FFFFFF !important;
}

    .dd-delete-active.rz-button:hover {
        background: #F53E3E !important;
    }

    .dd-delete-active.rz-button .rz-button-text,
    .dd-delete-active.rz-button .rzi {
        color: #FFFFFF !important;
    }

    /* The delete icon is a baked-grey <img>, so `color` can't recolor it. On the red
       active button, force it white with a filter (otherwise it reads as dark/black). */
    .dd-delete-active.rz-button img {
        filter: brightness(0) invert(1);
    }

/* ----- Drawer form (Bulk Scan / Add Domain / Schedule) ----- */
.dd-add-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: #E9F8F8;
    border-radius: 4px;
}

.dd-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dd-field--bulk {
    margin-top: 24px;
}

.dd-field-label {
    font-size: 13px;
    font-weight: 600;
    color: #242A41;
}

.dd-req {
    color: #EE4723;
}

.dd-field-hint {
    font-size: 12px;
    line-height: 18px;
    color: #6B7280;
    margin-top: -2px;
}

.dd-section-title {
    font-size: 14px;
    font-weight: 700;
    color: #242A41;
    margin-bottom: 6px;
}

.dd-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #242A41;
    cursor: pointer;
}

    .dd-check input[type="checkbox"] {
        width: 16px;
        height: 16px;
        accent-color: #008D9E;
        cursor: pointer;
    }

.dd-check-hint {
    padding-left: 24px;
    margin-top: -2px;
    font-size: 12px;
    line-height: 18px;
    color: #91949D;
}

.dd-input {
    box-sizing: border-box;
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 1px solid #D0D5DD;
    border-radius: 6px;
    font-size: 14px;
    color: #1F2937;
    outline: none;
    background: #FFFFFF;
}

    .dd-input:focus {
        border-color: #008D9E;
        box-shadow: 0 0 0 3px rgba(0, 141, 158, 0.12);
    }

    .dd-input::placeholder {
        color: #9AA3AF;
    }

.dd-textarea {
    box-sizing: border-box;
    width: 100%;
    min-height: 80px;
    padding: 10px 12px;
    border: 1px solid #D0D5DD;
    border-radius: 6px;
    font-size: 13px;
    color: #1F2937;
    resize: vertical;
    outline: none;
    font-family: inherit;
    background: #FAFAFC;
}

    .dd-textarea:focus {
        border-color: #008D9E;
        box-shadow: 0 0 0 3px rgba(0, 141, 158, 0.12);
    }

    .dd-textarea::placeholder {
        color: #91949D;
    }

.dd-progress {
    font-size: 12px;
    color: #008D9E;
}

.dd-file {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid #D0D5DD;
    border-radius: 6px;
    background: #FFFFFF;
    cursor: pointer;
}

    .dd-file:hover {
        border-color: #98A2B3;
    }

.dd-file-name {
    font-size: 14px;
    color: #1F2937;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .dd-file-name.is-placeholder {
        color: #91949D;
    }

.dd-file-icon {
    display: inline-flex;
    flex-shrink: 0;
    color: #91949D;
}

.dd-file-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.dd-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 34px;
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A94A6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

/* Type dropdown (RadzenDropDown) — closed field like dd-input, open menu per Figma */
.dd-typedropdown.rz-dropdown {
    width: 100%;
    display: inline-flex;
    /*align-items: center;*/
    min-height: 40px !important;
    height: 40px;
    border: 1px solid #D0D5DD !important;
    border-radius: 6px !important;
    background: #FFFFFF !important;
    box-shadow: none !important;
}

.dd-typedropdown .rz-dropdown-label {
    display: flex;
    align-items: center;
    font-size: 14px !important;
    color: #1F2937 !important;
    padding: 0 12px !important;
}

.dd-typedropdown .rz-dropdown-trigger {
    width: 34px;
    background: transparent !important;
    color: #8A94A6 !important;
}

/* Open menu panel */
.dd-typedropdown .rz-dropdown-panel {
    background: #FFFFFF !important;
    border: 1px solid #DFE2E6 !important;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.25) !important;
    border-radius: 0 0 4px 4px !important;
    padding: 0 !important;
    overflow: hidden;
}

.dd-typedropdown .rz-dropdown-items {
    padding: 0 !important;
}

.dd-typedropdown .rz-dropdown-item {
    padding: 10px !important;
    font-size: 12px !important;
    line-height: 18px !important;
    color: #060A12 !important;
    border-bottom: 1px solid #EBEDF0 !important;
    border-radius: 0 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

    .dd-typedropdown .rz-dropdown-item:last-child {
        border-bottom: none !important;
    }

    .dd-typedropdown .rz-dropdown-item:hover,
    .dd-typedropdown .rz-dropdown-item.rz-state-hover {
        background: #F4FAFB !important;
        color: #060A12 !important;
    }

    .dd-typedropdown .rz-dropdown-item.rz-state-highlight {
        background: #F4FAFB !important;
        color: #060A12 !important;
    }

.dd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding: 0 24px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    border: 1px solid transparent;
    min-width: 150px;
}

    .dd-btn:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }

.dd-btn-primary {
    background: #008D9E;
    color: #FFFFFF;
    border-color: #008D9E;
}

    .dd-btn-primary:hover:not(:disabled) {
        background: #007B8A;
    }

.dd-btn-cancel {
    background: #FFFFFF;
    color: #0F172A;
    border-color: #B5B7BD;
}

    .dd-btn-cancel:hover:not(:disabled) {
        background: #F9FAFB;
    }

.dd-add-footer {
    gap: 12px;
}

.cp-dd-page .di-drawer-footer.dd-footer-center {
    justify-content: center;
}

/* Add Domain drawer — Bulk Add section: divider above, right-aligned action */
.dd-add-bulk {
    padding-top: 24px;
    border-top: 1px solid #E7E8EA;
}

.dd-add-bulk-action {
    display: flex;
    justify-content: flex-start;
    margin-top: 4px;
}

/* ----- Retest All confirmation modal (teal, self-contained) ----- */
.dd-confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(52, 64, 84, 0.7);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.dd-confirm-modal {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    box-sizing: border-box;
    width: 464px;
    max-width: calc(100vw - 32px);
    height: 343px;
    max-height: calc(100vh - 32px);
    padding: 24px;
    background: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03);
}

.dd-confirm-close {
    position: absolute;
    top: 16px;
    right: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
}

    .dd-confirm-close:hover {
        background: #F3F4F6;
    }

.dd-confirm-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    width: 100%;
    flex: 1 1 auto;
}

.dd-confirm-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 48px;
    height: 48px;
    background: #DEF3FD;
    border: 8px solid #ECF8FE;
    border-radius: 28px;
}

.dd-confirm-texts {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
}

.dd-confirm-title {
    font-size: 18px;
    font-weight: 600;
    line-height: 26px;
    color: #242A41;
}

.dd-confirm-sub {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #0F172A;
}

.dd-confirm-actions {
    display: flex;
    flex-direction: row;
    gap: 12px;
    width: 100%;
    margin-top: auto;
}

.dd-confirm-btn {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 10px 18px;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}

.dd-confirm-cancel {
    background: #FFFFFF;
    border: 1px solid #B5B7BD;
    color: #3F4555;
}

    .dd-confirm-cancel:hover {
        background: #F9FAFB;
    }

.dd-confirm-ok {
    background: #008D9E;
    border: 1px solid #008D9E;
    color: #FFFFFF;
}

    .dd-confirm-ok:hover {
        background: #007B8A;
    }

.cp-al-page .cp-discover-panel:has(.cp-dropdown-wrapper:focus-within) {
    overflow: visible;
}

.cp-al-page .cp-sessions-toolbar {
    position: relative;
    z-index: 5;
}

.cp-al-page .cp-dropdown {
    z-index: 2000;
}

.cp-al-headactions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
}

.cp-al-search {
    width: 320px;
    max-width: 100%;
}

.cp-al-datepicker.rz-datepicker {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 38px;
    /*border: 1px solid #D0D5DD;*/
    border-radius: 8px;
    background: #FFFFFF;
    overflow: hidden;
}

    .cp-al-datepicker.rz-datepicker::before {
        content: "";
        flex: none;
        width: 18px;
        height: 18px;
        margin-left: 12px;
        background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'><path d='M14.25 3H12.75V2.25C12.75 2.05109 12.671 1.86032 12.5303 1.71967C12.3897 1.57902 12.1989 1.5 12 1.5C11.8011 1.5 11.6103 1.57902 11.4697 1.71967C11.329 1.86032 11.25 2.05109 11.25 2.25V3H6.75V2.25C6.75 2.05109 6.67098 1.86032 6.53033 1.71967C6.38968 1.57902 6.19891 1.5 6 1.5C5.80109 1.5 5.61032 1.57902 5.46967 1.71967C5.32902 1.86032 5.25 2.05109 5.25 2.25V3H3.75C3.15326 3 2.58097 3.23705 2.15901 3.65901C1.73705 4.08097 1.5 4.65326 1.5 5.25V14.25C1.5 14.8467 1.73705 15.419 2.15901 15.841C2.58097 16.2629 3.15326 16.5 3.75 16.5H14.25C14.8467 16.5 15.419 16.2629 15.841 15.841C16.2629 15.419 16.5 14.8467 16.5 14.25V5.25C16.5 4.65326 16.2629 4.08097 15.841 3.65901C15.419 3.23705 14.8467 3 14.25 3ZM15 14.25C15 14.4489 14.921 14.6397 14.7803 14.7803C14.6397 14.921 14.4489 15 14.25 15H3.75C3.55109 15 3.36032 14.921 3.21967 14.7803C3.07902 14.6397 3 14.4489 3 14.25V9H15V14.25ZM15 7.5H3V5.25C3 5.05109 3.07902 4.86032 3.21967 4.71967C3.36032 4.57902 3.55109 4.5 3.75 4.5H5.25V5.25C5.25 5.44891 5.32902 5.63968 5.46967 5.78033C5.61032 5.92098 5.80109 6 6 6C6.19891 6 6.38968 5.92098 6.53033 5.78033C6.67098 5.63968 6.75 5.44891 6.75 5.25V4.5H11.25V5.25C11.25 5.44891 11.329 5.63968 11.4697 5.78033C11.6103 5.92098 11.8011 6 12 6C12.1989 6 12.3897 5.92098 12.5303 5.78033C12.671 5.63968 12.75 5.44891 12.75 5.25V4.5H14.25C14.4489 4.5 14.6397 4.57902 14.7803 4.71967C14.921 4.86032 15 5.05109 15 5.25V7.5Z' fill='%23A3AED0'/></svg>") no-repeat center / contain;
    }

    .cp-al-datepicker .rz-inputtext {
        flex: 1 1 auto;
        min-width: 0;
        height: 100% !important;
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        padding: 0 6px 0 8px !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        color: #111827 !important;
    }

        .cp-al-datepicker .rz-inputtext::placeholder {
            color: #111827 !important;
            opacity: 1 !important;
            font-weight: 500 !important;
        }

    .cp-al-datepicker .rz-datepicker-trigger {
        position: relative;
        flex: none;
        width: 34px;
        height: 100%;
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
    }

        .cp-al-datepicker .rz-datepicker-trigger .rzi,
        .cp-al-datepicker .rz-datepicker-trigger i,
        .cp-al-datepicker .rz-datepicker-trigger .notranslate {
            visibility: hidden;
        }

        .cp-al-datepicker .rz-datepicker-trigger::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 16px;
            height: 16px;
            background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>") no-repeat center / contain;
        }

.cp-al-page .rz-grid-table tbody td.rz-frozen-cell,
.cp-al-page .rz-datatable-data td.rz-frozen-cell {
    background: #FFFFFF;
}

.al-mono {
    font-size: 12px;
    color: #475467;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    white-space: nowrap;
}

.al-action {
    font-size: 12.5px;
    font-weight: 500;
    color: #111827;
}

.al-cat {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    background: #EFF6FF;
    color: #1D4ED8;
    white-space: nowrap;
}

.al-user {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.35;
}

.al-user-name {
    align-self: flex-start;
    padding: 1px 8px;
    border-radius: 6px;
    background: #EEF2FF;
    color: #3730A3;
    font-size: 12px;
    font-weight: 600;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.al-user-email {
    font-size: 11px;
    color: #6B7280;
    overflow: hidden;
    text-overflow: ellipsis;
}

.al-drawer-actionrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
}

.al-drawer-action {
    font-size: 15px;
    font-weight: 700;
    color: #111827;
    word-break: break-word;
}

.al-field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 12px;
}

.al-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 14px;
    min-width: 0;
}

.al-field-grid .al-field {
    margin-top: 0;
}

.al-field-label {
    font-size: 13px;
    font-weight: 600;
    color: #344054;
}

.al-field-box {
    box-sizing: border-box;
    min-height: 40px;
    padding: 9px 12px;
    border: 1px solid #D0D5DD;
    border-radius: 6px;
    background: #FFFFFF;
    font-size: 14px;
    color: #1F2937;
    word-break: break-word;
}

.al-field-note {
    font-size: 12px;
    color: #91949D;
}

.al-field-notes {
    min-height: 72px;
    white-space: pre-wrap;
}

.cp-al-page .di-drawer-footer.al-drawer-footer {
    justify-content: center;
}

.al-drawer-cancel {
    min-width: 120px;
    height: 38px;
    padding: 0 24px;
    border: 1px solid #D0D5DD;
    background: #FFFFFF;
    color: #344054;
    font-size: 13px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
}

    .al-drawer-cancel:hover {
        background: #F9FAFB;
    }

/* Status/severity badges carry an inline icon here — align it with the text */
.al-grid .di-status {
    display: inline-flex;
    align-items: center;
}

/* Frozen right columns (Sync, Actions) need an opaque background so rows scrolling
   underneath them don't show through. Header/hover/selected backgrounds are already
   painted by the grey-canvas rules. */
.cp-agents-page .rz-grid-table tbody td.rz-frozen-cell {
    background: #FFFFFF;
}

/* ── Background Jobs (Reports/ScanJobs) ───────────────────────────────────── */
.cp-jobs-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 16px;
    border-bottom: 1px solid #ECEEF1;
    overflow-x: auto;
}

.cp-jobs-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 12px;
    border: none;
    background: transparent;
    border-bottom: 2px solid transparent;
    color: #6B7280;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

    .cp-jobs-tab:hover {
        color: #111827;
    }

    .cp-jobs-tab.is-active {
        color: #008D9E;
        border-bottom-color: #008D9E;
        font-weight: 600;
    }

.cp-jobs-tabcount {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    border-radius: 9px;
    background: #F1F5F9;
    color: #64748B;
    font-size: 11px;
    font-weight: 600;
}

.cp-jobs-tab.is-active .cp-jobs-tabcount {
    background: #E6F7F9;
    color: #008D9E;
}

.cp-jobs-search {
    width: 220px;
    max-width: 100%;
}

.cp-jobs-type {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    color: #374151;
}

.cp-jobs-type-icon {
    display: inline-flex;
    align-items: center;
    color: #6B7280;
    flex: 0 0 auto;
}

.cp-jobs-jobtitle {
    font-weight: 600;
    color: #111827;
}

.cp-jobs-jobsub {
    font-size: 12px;
    color: #6B7280;
    margin-top: 2px;
    white-space: normal;
}

.cp-jobs-joberror {
    font-size: 12px;
    color: #DC2626;
    margin-top: 2px;
    white-space: normal;
}

.cp-jobs-progress-top {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
    color: #374151;
    margin-bottom: 5px;
}

.cp-jobs-bar {
    height: 8px;
    background: #EDF0F3;
    border-radius: 4px;
    overflow: hidden;
}

.cp-jobs-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s;
}

.cp-jobs-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.cp-jobs-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #374151;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
}

    .cp-jobs-action:hover {
        color: #008D9E;
    }

.cp-jobs-page .rz-grid-table tbody td.rz-frozen-cell {
    background: #FFFFFF;
}

/* Job Details drawer — reuses the agent-drawer chrome but with no gradient and its own body. */
.cp-jobdrawer.cp-agentdrawer::before {
    content: none;
}

.cp-jobdrawer-headtext {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

.cp-jobdrawer-headtitle {
    font-family: 'Open Sans', system-ui, sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #242A41;
    line-height: 24px;
}

.cp-jobdrawer-headsub {
    font-size: 12px;
    color: #8E90AA;
    margin-top: 2px;
}

.cp-jobdrawer-secrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.cp-jobdrawer-sectitle {
    font-size: 15px;
    font-weight: 700;
    color: #242A41;
}

.cp-jobdrawer-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.cp-jobdrawer-card {
    background: #FFFFFF;
    border: 1px solid #EEF0F5;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 24px;
}

.cp-jobdrawer-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 16px;
    border-bottom: 1px solid #F1F2F5;
}

    .cp-jobdrawer-row:last-child {
        border-bottom: none;
    }

.cp-jobdrawer-rowlabel {
    font-size: 13px;
    color: #5E6470;
    flex: 0 0 auto;
}

.cp-jobdrawer-rowval {
    font-size: 13px;
    font-weight: 500;
    color: #111827;
    text-align: right;
    word-break: break-word;
}

.cp-jobdrawer-errbox {
    border-radius: 8px;
    padding: 14px 16px;
    max-height: 300px;
    overflow-y: auto;
    font-size: 13px;
    line-height: 1.6;
}

    .cp-jobdrawer-errbox.is-error {
        background: #FEF2F2;
        border: 1px solid #FECACA;
    }

    .cp-jobdrawer-errbox.is-neutral {
        background: #F8FAFC;
        border: 1px solid #EEF0F5;
    }

.cp-jobdrawer-errtitle {
    font-weight: 600;
    color: #DC2626;
    margin-bottom: 8px;
}

    .cp-jobdrawer-errtitle.is-neutral {
        color: #242A41;
    }

.cp-jobdrawer-errbody {
    color: #6B7280;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Two equal-width footer buttons filling the drawer. */
.cp-jobdrawer .cp-agentdrawer-footer {
    gap: 12px;
}

    .cp-jobdrawer .cp-agentdrawer-btn {
        flex: 1 1 0;
    }

.cp-agentdrawer-btn--primary {
    background: #008D9E;
    border: 1px solid #008D9E;
    color: #FFFFFF;
}

    .cp-agentdrawer-btn--primary:hover {
        background: #00707E;
        border-color: #00707E;
    }

/* ── Certificate Reports — report-type selector dropdown ───────────────────── */
.cp-repdd {
    position: relative;
}

.cp-repdd-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 340px;
    max-width: 100%;
    height: 40px;
    padding: 8px 12px;
    background: #FFFFFF;
    border: 1px solid #D5D5E2;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    color: #111827;
}

    .cp-repdd-trigger:hover {
        border-color: #B5B7BD;
    }

.cp-repdd-trigger-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cp-repdd-trigger-chevron {
    flex: 0 0 auto;
    transition: transform 0.15s ease;
}

    .cp-repdd-trigger-chevron.is-open {
        transform: rotate(180deg);
    }

.cp-repdd-overlay {
    position: fixed;
    inset: 0;
    z-index: 3000;
    background: transparent;
}

.cp-repdd-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    width: 500px;
    max-width: 92vw;
    max-height: min(70vh, 620px);
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    border: 1px solid #DFE2E6;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    border-radius: 0 0 4px 4px;
    z-index: 3001;
    overflow: hidden;
}

.cp-repdd-search {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-bottom: 1px solid #EBEDF0;
    flex: 0 0 auto;
}

.cp-repdd-search-input {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-family: 'Open Sans', system-ui, sans-serif;
    font-size: 12px;
    line-height: 18px;
    color: #5E6470;
}

    .cp-repdd-search-input::placeholder {
        color: #5E6470;
    }

.cp-repdd-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.cp-repdd-cat {
    padding: 7px 10px;
    background: #E7E8EA;
    border-bottom: 1px solid #EBEDF0;
    font-family: 'Open Sans', system-ui, sans-serif;
    font-size: 10px;
    line-height: 14px;
    color: #5E6470;
}

.cp-repdd-item {
    padding: 8px 10px;
    border-bottom: 1px solid #EBEDF0;
    cursor: pointer;
}

    .cp-repdd-item:hover {
        background: #F8FAFB;
    }

    .cp-repdd-item.is-selected {
        background: #F4FAFB;
    }

.cp-repdd-item-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    color: #060A12;
    margin-bottom: 2px;
}

.cp-repdd-item-count {
    color: #008D9E;
    font-weight: 700;
}

.cp-repdd-item-desc {
    font-family: 'Open Sans', system-ui, sans-serif;
    font-size: 11px;
    line-height: 15px;
    color: #5E6470;
}

.cp-repdd-empty {
    padding: 24px 12px;
    text-align: center;
    color: #6B7280;
    font-size: 13px;
}

/* Labeled variant of the selector trigger (Reports page: search icon + "Select Report" + value). */
.cp-repdd-trigger--labeled {
    height: 48px;
    width: 500px;
    max-width: 100%;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    border-color: #E7E8EA;
    border-radius: 4px;
}

.cp-repdd-trigger-search {
    display: inline-flex;
    align-items: center;
    color: #91949D;
    flex: 0 0 auto;
}

.cp-repdd-trigger-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    flex: 1 1 auto;
}

.cp-repdd-trigger-hint {
    font-family: 'Open Sans', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    color: #5E6470;
}

.cp-repdd-trigger--labeled .cp-repdd-trigger-label {
    font-family: 'Open Sans', system-ui, sans-serif;
    font-size: 12px;
    line-height: 18px;
    font-weight: 400;
    color: #5E6470;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cp-repdd-trigger-arrows {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

/* ── Certificate Reports page ─────────────────────────────────────────────── */
.cp-reports-stats {
    align-items: stretch;
    gap: 20px;
}

.cp-reports-stat {
    display: flex;
    flex-direction: column;
    gap: 3px;
    white-space: nowrap;
}

.cp-reports-stat-main {
    font-size: 14px;
    color: #374151;
}

.cp-reports-stat-sub {
    font-size: 11px;
    color: #9CA3AF;
}

.cp-reports-stat-sep {
    width: 1px;
    align-self: stretch;
    background: #E5E7EB;
    flex: 0 0 auto;
}

.cp-reports-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 16px;
    border-bottom: 1px solid var(--cp-list-section-border, #E5E7EB);
}

.cp-reports-repinfo {
    min-width: 0;
    flex: 1 1 auto;
}

.cp-reports-reptitle {
    font-size: 16px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 3px;
}

.cp-reports-repdesc {
    font-size: 12.5px;
    line-height: 1.45;
    color: #6B7280;
    max-width: 640px;
}

.cp-reports-statuspill {
    display: inline-flex;
    align-items: center;
    padding: 3px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.cp-reports-export {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 18px;
    background: #008D9E;
    border: 1px solid #008D9E;
    border-radius: 4px;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

/* ── Report row drill-down (ReportRowDetailView) ──────────────────────────── */
.cp-repdetail {
    padding: 14px 16px 16px;
    background: #FBFCFD;
}

.cp-repdetail-empty {
    padding: 12px 16px;
    color: #6B7280;
    font-size: 13px;
}

.cp-repdetail-title {
    font-size: 13px;
    font-weight: 700;
    color: #111827;
    word-break: break-word;
    margin-bottom: 8px;
}

.cp-repdetail-pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-bottom: 10px;
}

.cp-repdetail-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

    .cp-repdetail-pill.is-expires {
        background: #FDECEC;
        color: #C0392B;
    }

    .cp-repdetail-pill.is-hosts {
        background: #EEF3FB;
        color: #3B5BA5;
    }

.cp-repdetail-facts {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 12px;
    font-size: 12px;
    line-height: 1.6;
}

.cp-repdetail-fact-key {
    color: #6B7280;
}

.cp-repdetail-fact-val {
    color: #374151;
    word-break: break-all;
}

/* First-column identifier badges (parent report grid + drill-down table). */
.cp-reports-cellbadge,
.cp-repdetail-cell-primary {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 3px 10px;
    border-radius: 6px;
    background: #EEF1F6;
    color: #475569;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Certificate request: Catalog Details step ────────────────────────────── */
.cp-catalog-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 8px;
}

.cp-catalog-nomatch {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    font-size: 13px;
    color: #374151;
}

.cp-catalog-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #B91C1C;
    cursor: pointer;
    border-radius: 4px;
    padding: 2px;
    line-height: 0;
}

    .cp-catalog-remove:hover {
        background: #FEE2E2;
    }

/* The right column is clipped by the two-column layout's overflow:hidden and (unlike the left
   .page-content-main) has no scroll of its own. Give it independent scroll on this step so tall
   accordion stacks don't get cut off. */
.page-content.page-content-two-column .page-content-side:has(.cp-catalog-assets) {
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.cp-catalog-assets {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.cp-catalog-assets-title {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
}

.cp-catalog-assets-empty {
    padding: 16px;
    border: 1px dashed #E5E7EB;
    border-radius: 8px;
    color: #6B7280;
    font-size: 13px;
    background: #FBFCFD;
}

.cp-catalog-acc {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cp-catalog-acc-item {
    border: 1px solid #EEF0F5;
    border-radius: 8px;
    overflow: hidden;
    background: #FFFFFF;
}

.cp-catalog-acc-head {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 12px;
    background: #F9FAFB;
    border: none;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: #111827;
    text-align: left;
}

    .cp-catalog-acc-head:hover {
        background: #F3F4F6;
    }

.cp-catalog-acc-chevron {
    display: inline-flex;
    align-items: center;
    color: #6B7280;
    flex: 0 0 auto;
    transition: transform 0.15s ease;
}

    .cp-catalog-acc-chevron.is-open {
        transform: rotate(90deg);
    }

.cp-catalog-acc-title {
    flex: 1 1 auto;
    min-width: 0;
    word-break: break-word;
}

.cp-catalog-acc-count {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 500;
    color: #6B7280;
    white-space: nowrap;
}

.cp-catalog-acc-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border-top: 1px solid #EEF0F5;
}

.cp-catalog-acc-desc {
    font-size: 13px;
    color: #374151;
    line-height: 1.4;
}

.cp-catalog-acc-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    font-size: 12px;
    color: #6B7280;
}

.cp-catalog-acc-key {
    color: #9CA3AF;
}

.cp-catalog-asset-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cp-catalog-asset {
    border: 1px solid #EEF0F5;
    border-radius: 8px;
    padding: 10px 12px;
    background: #FFFFFF;
}

.cp-catalog-asset-name {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
    word-break: break-word;
}

.cp-catalog-asset-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin-top: 4px;
    font-size: 12px;
    color: #6B7280;
}

    .cp-reports-export:hover {
        background: #00707E;
        border-color: #00707E;
    }

    .cp-reports-export:disabled {
        opacity: 0.6;
        cursor: default;
    }

/* ── Agent Details drawer (opened from the eye action) ────────────────────── */
.cp-agentdrawer {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    background: #FAFBFB;
    overflow: hidden;
}

    /* Soft blue accent behind the content, echoing the Figma gradient. */
    .cp-agentdrawer::before {
        content: "";
        position: absolute;
        top: -50px;
        left: -90px;
        width: 340px;
        height: 340px;
        background: radial-gradient(circle, rgba(160, 218, 248, 0.45), rgba(160, 218, 248, 0) 70%);
        filter: blur(30px);
        pointer-events: none;
        z-index: 0;
    }

.cp-agentdrawer-head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 24px;
    background: #FFFFFF;
    border-bottom: 1px solid #EFF0F5;
    flex: 0 0 auto;
}

.cp-agentdrawer-head-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    line-height: 0;
}

.cp-agentdrawer-head-title {
    font-family: 'Open Sans', system-ui, sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #242A41;
    flex: 1 1 auto;
    min-width: 0;
}

.cp-agentdrawer-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    flex: 0 0 auto;
}

    .cp-agentdrawer-close:hover {
        background: #F3F4F6;
    }

.cp-agentdrawer-body {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 24px;
    background: white;
}

.cp-agentdrawer-titlerow {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 24px;
}

.cp-agentdrawer-ip {
    font-family: 'Open Sans', system-ui, sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #242A41;
    line-height: 26px;
    word-break: break-all;
}

.cp-agentdrawer-sub {
    font-size: 12px;
    color: #8E90AA;
    margin-top: 2px;
}

.cp-agentdrawer-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px 4px 10px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    flex: 0 0 auto;
}

.cp-agentdrawer-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.cp-agentdrawer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 16px;
}

.cp-agentdrawer-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.cp-agentdrawer-label {
    font-family: 'Open Sans', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    color: #5E6470;
}

.cp-agentdrawer-value {
    display: block;
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
    color: #060A12;
    word-break: break-word;
}

.cp-agentdrawer-muted {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: #5E6470;
    margin-top: 1px;
}

.cp-agentdrawer-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 4px;
    background: #F8F9FC;
    color: #363F72;
    font-size: 10px;
    line-height: 14px;
    white-space: nowrap;
}

.cp-agentdrawer-footer {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid #DADAEC;
    background: #FFFFFF;
    flex: 0 0 auto;
}

.cp-agentdrawer-btn {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 8px 20px;
    border-radius: 4px;
    font-family: 'Open Sans', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.cp-agentdrawer-btn--outline {
    background: #FFFFFF;
    border: 1px solid #B5B7BD;
    color: #0F172A;
}

    .cp-agentdrawer-btn--outline:hover {
        background: #F9FAFB;
    }

.cp-agentdrawer-btn--danger {
    background: #FF5252;
    border: 1px solid #FF5252;
    color: #FFFFFF;
}

    .cp-agentdrawer-btn--danger:hover {
        background: #F03E3E;
        border-color: #F03E3E;
    }

/* ── Renew / Request certificate prompt (redesigned) ──────────────────────── */
.cp-prompt-dialog .rz-dialog-content {
    padding: 0 !important;
}

.cp-renew {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 22px;
    background: #FFFFFF;
    border-radius: 12px;
}

.cp-renew-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.cp-renew-title {
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 700;
    color: #111827;
}

.cp-renew-subtitle {
    margin: 0;
    font-size: 13px;
    color: #8E90AA;
    line-height: 1.45;
}

.cp-renew-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    flex: 0 0 auto;
}

    .cp-renew-close:hover {
        background: #F3F4F6;
    }

.cp-renew-card {
    display: flex;
    flex-direction: column;
    border: 1px solid #EFF0F5;
    border-radius: 8px;
    padding: 2px 16px;
}

.cp-renew-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 0;
    border-bottom: 1px solid #F4F3F3;
}

    .cp-renew-row:last-child {
        border-bottom: none;
    }

.cp-renew-label {
    font-size: 13px;
    color: #6B7280;
    flex: 0 0 auto;
}

.cp-renew-value {
    font-size: 13px;
    font-weight: 500;
    color: #111827;
    text-align: right;
    word-break: break-word;
}

.cp-renew-banner {
    padding: 10px 14px;
    border-radius: 8px;
    background: #FFF3E6;
    color: #B25C00;
    font-size: 12px;
}

.cp-renew-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cp-renew-opt {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    text-align: left;
    padding: 14px;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    background: #FFFFFF;
    cursor: pointer;
}

    .cp-renew-opt:hover {
        border-color: #CBD5E1;
    }

    .cp-renew-opt.is-selected {
        border-color: var(--rz-primary, #08A8BC);
        background: #F1FBFC;
    }

    .cp-renew-opt.is-disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

.cp-renew-opt-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--rz-primary, #08A8BC);
    flex: 0 0 auto;
    margin-top: 1px;
}

.cp-renew-opt-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1 1 auto;
    min-width: 0;
}

.cp-renew-opt-title {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
}

.cp-renew-opt-desc {
    font-size: 12px;
    color: #6B7280;
    line-height: 1.4;
}

.cp-renew-opt-radio {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #CBD5E1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
    box-sizing: border-box;
}

    .cp-renew-opt-radio.is-on {
        border-color: var(--rz-primary, #08A8BC);
        background: var(--rz-primary, #08A8BC);
    }

.cp-renew-actions {
    display: flex;
    gap: 12px;
    margin-top: 4px;
}

.cp-renew-btn {
    flex: 1 1 0;
    height: 42px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cp-renew-btn--outline {
    background: #FFFFFF;
    border: 1px solid #D1D5DB;
    color: #111827;
}

    .cp-renew-btn--outline:hover {
        background: #F9FAFB;
    }

.cp-renew-btn--primary {
    background: var(--rz-primary, #08A8BC);
    border: 1px solid var(--rz-primary, #08A8BC);
    color: #FFFFFF;
}

    .cp-renew-btn--primary:hover {
        filter: brightness(0.96);
    }

/* ── Step-up password confirmation dialog (redesigned) ────────────────────── */
.cp-stepup-dialog .rz-dialog-content {
    padding: 0 !important;
}

.cp-stepup {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 24px;
    background: #FFFFFF;
    border-radius: 12px;
}

.cp-stepup-close {
    position: absolute;
    top: 16px;
    right: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
}

    .cp-stepup-close:hover {
        background: #F3F4F6;
    }

/* Plain wrapper — the featured-icon SVG carries its own background ring. */
.cp-stepup-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    line-height: 0;
}

.cp-stepup-text {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cp-stepup-title {
    font-size: 18px;
    font-weight: 500;
    line-height: 26px;
    color: #242A41;
}

.cp-stepup-supporting {
    font-family: 'Open Sans', system-ui, sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #91949D;
}

.cp-stepup-para {
    display: block;
    height: 12px;
}

.cp-stepup-form {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.cp-stepup-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.cp-stepup-label {
    font-size: 14px;
    line-height: 20px;
    color: #4D506B;
}

.cp-stepup-form .rz-textbox {
    width: 100% !important;
    box-sizing: border-box;
    border: 1px solid #D5D5E2 !important;
    border-radius: 4px !important;
    padding: 10px 14px !important;
    font-size: 16px !important;
    line-height: 24px !important;
    height: auto !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05) !important;
}

/* Owner dropdown, styled to match the step-up text field. Keep Radzen's own internal
   layout (label left, chevron trigger right) — only restyle the frame + label. */
.cp-stepup-form .rz-dropdown {
    width: 100% !important;
    box-sizing: border-box;
    border: 1px solid #D5D5E2 !important;
    border-radius: 4px !important;
    background: #FFFFFF !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05) !important;
    min-height: 44px;
    text-align: left !important;
}

    .cp-stepup-form .rz-dropdown .rz-dropdown-label,
    .cp-stepup-form .rz-dropdown .rz-inputtext {
        display: block !important;
        width: 100% !important;
        text-align: left !important;
        margin: 0 !important;
        padding: 0px 40px 10px 14px !important;
        min-height: 44px;
        box-sizing: border-box;
        font-size: 15px !important;
        line-height: 24px !important;
        color: #111827 !important;
        background: transparent !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

        .cp-stepup-form .rz-dropdown .rz-dropdown-label.rz-placeholder,
        .cp-stepup-form .rz-dropdown .rz-placeholder {
            color: #9CA3AF !important;
        }

.cp-stepup-or {
    font-size: 13px;
    color: #6B7280;
}

.cp-stepup-hint {
    font-size: 12px;
    color: #91949D;
}

.cp-stepup-passkey {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cp-stepup-banner {
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13px;
}

    .cp-stepup-banner.is-error {
        background: #FEF2F2;
        border: 1px solid #FECACA;
        color: #B91C1C;
    }

.cp-stepup-actions {
    display: flex;
    gap: 12px;
    width: 100%;
    margin-top: 4px;
}

.cp-stepup-btn {
    box-sizing: border-box;
    flex: 1 1 0;
    height: 44px;
    padding: 10px 18px;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}

.cp-stepup-btn--outline {
    background: #FFFFFF;
    border: 1px solid #B5B7BD;
    color: #3F4555;
}

    .cp-stepup-btn--outline:hover {
        background: #F9FAFB;
    }

.cp-stepup-btn--primary {
    background: #008D9E;
    border: 1px solid #008D9E;
    color: #FFFFFF;
}

    .cp-stepup-btn--primary:hover {
        background: #007A89;
    }

    .cp-stepup-btn--primary:disabled {
        opacity: 0.6;
        cursor: default;
    }

/* ── Custom alerts / toasts (CpAlertHost) ─────────────────────────────────── */
.cp-alert-stack {
    position: fixed;
    z-index: 21000;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
    max-width: calc(100vw - 16px);
}

    .cp-alert-stack > .cp-alert {
        pointer-events: auto;
    }

/* Positions — vertical (top/middle/bottom) × horizontal (left/center/right) */
.cp-alert-stack--top-right { top: 16px; right: 0; align-items: flex-end; }
.cp-alert-stack--middle-right { top: 50%; right: 0; transform: translateY(-50%); align-items: flex-end; }
.cp-alert-stack--bottom-right { bottom: 16px; right: 0; align-items: flex-end; }
.cp-alert-stack--top-left { top: 16px; left: 0; align-items: flex-start; }
.cp-alert-stack--middle-left { top: 50%; left: 0; transform: translateY(-50%); align-items: flex-start; }
.cp-alert-stack--bottom-left { bottom: 16px; left: 0; align-items: flex-start; }
.cp-alert-stack--top-center { top: 16px; left: 50%; transform: translateX(-50%); align-items: center; }
.cp-alert-stack--middle-center { top: 50%; left: 50%; transform: translate(-50%, -50%); align-items: center; }
.cp-alert-stack--bottom-center { bottom: 16px; left: 50%; transform: translateX(-50%); align-items: center; }

/* Right-docked → flush to the edge, rounded on the left only (Figma default) */
.cp-alert-stack--top-right .cp-alert,
.cp-alert-stack--middle-right .cp-alert,
.cp-alert-stack--bottom-right .cp-alert {
    border-radius: 12px 0 0 12px;
}

/* Left-docked → flush to the edge, rounded on the right only */
.cp-alert-stack--top-left .cp-alert,
.cp-alert-stack--middle-left .cp-alert,
.cp-alert-stack--bottom-left .cp-alert {
    border-radius: 0 12px 12px 0;
}

/* Radzen's own top-of-screen notification stack is suppressed: CpAlertHost re-surfaces every
   NotificationService message as a bottom-right alert instead. Only the notification container
   is hidden — RadzenComponents still renders dialogs, tooltips and context menus. */
.rz-notification { display: none !important; }

.cp-alert {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    /* Sized to its message — a short confirmation reads as a compact pill, while a long
       error still caps at the old fixed width rather than spanning the viewport. */
    width: auto;
    min-width: 320px;
    max-width: min(555px, calc(100vw - 16px));
    padding: 12px 16px;
    border: 1px solid transparent;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(16, 24, 40, 0.12);
    animation: cp-alert-in 0.18s ease-out;
}

@keyframes cp-alert-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.cp-alert-main {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.cp-alert-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
}

.cp-alert-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    color: inherit;
    word-break: break-word;
}

.cp-alert-title {
    font-weight: 700;
}

.cp-alert-body {
    font-weight: 400;
}

.cp-alert-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    flex: 0 0 auto;
    opacity: 0.85;
}

    .cp-alert-close:hover {
        opacity: 1;
    }

/* Variants */
.cp-alert--success {
    background: #DAFFE2;
    border-color: #A6F8B8;
    color: #25A80D;
}

    .cp-alert--success .cp-alert-close {
        color: #4DA866;
    }

.cp-alert--error {
    background: #FFD1D1;
    border-color: #FF7373;
    color: #C9372C;
}

    .cp-alert--error .cp-alert-close {
        color: #EE4723;
    }

.cp-alert--warning {
    background: #FFF3E6;
    border-color: #B25C00;
    color: #B25C00;
}

    .cp-alert--warning .cp-alert-close {
        color: #B25C00;
    }

.cp-alert--info {
    background: #F4FAFB;
    border-color: #54B3BE;
    color: #008090;
}

    .cp-alert--info .cp-alert-close {
        color: #008090;
    }

@media (max-width: 600px) {
    .cp-alert {
        width: calc(100vw - 16px);
    }
}

/* ── Scan-now confirmation modal (Figma spec) ─────────────────────────────── */
/* Let the inner .cp-scan-modal define the card look; strip Radzen's chrome. */
.rz-dialog.cp-scan-dialog-host {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.cp-scan-dialog-host .rz-dialog-content {
    padding: 0 !important;
    overflow: visible;
}

.cp-scan-modal {
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    width: 100%;
    padding: 24px;
    background: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03);
}

.cp-scan-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    width: 100%;
}

.cp-scan-featured-icon {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: #DEF3FD;
    border: 8px solid #ECF8FE;
    border-radius: 50%;
    flex: 0 0 auto;
}

.cp-scan-textblock {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
}

.cp-scan-title {
    font-size: 18px;
    font-weight: 500;
    line-height: 26px;
    color: #242A41;
}

.cp-scan-sub {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #8E90AA;
}

.cp-scan-card {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    padding: 16px;
    background: #FFFFFF;
    border: 1px solid #EFF0F5;
    border-radius: 4px;
}

.cp-scan-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #F4F3F3;
}

    .cp-scan-row:last-child {
        padding-bottom: 0;
        border-bottom: none;
    }

.cp-scan-row-label {
    flex: 0 0 auto;
    font-size: 14px;
    font-weight: 300;
    line-height: 20px;
    color: #4D506B;
}

.cp-scan-row-value {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: #70728F;
    text-align: right;
    word-break: break-word;
}

.cp-scan-actions {
    display: flex;
    flex-direction: row;
    gap: 12px;
    width: 100%;
}

.cp-scan-btn {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    height: 44px;
    padding: 10px 18px;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    border-radius: 4px;
    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
    cursor: pointer;
}

.cp-scan-btn--cancel {
    background: #FFFFFF;
    border: 1px solid #B5B7BD;
    color: #3F4555;
}

    .cp-scan-btn--cancel:hover {
        background: #F9FAFB;
    }

.cp-scan-btn--primary {
    background: #008D9E;
    border: 1px solid #008D9E;
    color: #FFFFFF;
}

    .cp-scan-btn--primary:hover {
        background: #007A89;
        border-color: #007A89;
    }

.cp-scan-close {
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 12px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
}

    .cp-scan-close:hover {
        background: #F3F4F6;
    }

/* Clone-job modal: adds a "New job name" field + info message under the scan-modal shell */
.cp-clone-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.cp-clone-label {
    font-family: 'Open Sans', system-ui, sans-serif;
    font-size: 12px;
    line-height: 18px;
    color: #0F172A;
}

.cp-clone-req {
    color: #DC2626;
}

.cp-clone-input {
    box-sizing: border-box;
    width: 100%;
    height: 32px;
    padding: 8px 10px;
    border: 1px solid #B5B7BD;
    border-radius: 4px;
    font-family: 'Open Sans', system-ui, sans-serif;
    font-size: 12px;
    line-height: 18px;
    color: #0F172A;
    background: #FFFFFF;
}

    .cp-clone-input::placeholder {
        color: #91949D;
    }

    .cp-clone-input:focus {
        outline: none;
        border-color: #008D9E;
    }

    .cp-clone-input.cp-clone-input--error {
        border-color: #DC2626;
    }

.cp-clone-error {
    font-size: 12px;
    color: #DC2626;
}

.cp-clone-info {
    font-family: 'Open Sans', system-ui, sans-serif;
    font-size: 12px;
    line-height: 18px;
    color: #91949D;
}

.cp-clone-banner {
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
    background: #FEF2F2;
    border: 1px solid #FECACA;
    color: #B91C1C;
    font-size: 13px;
}

/* ── Edit System drawer (right-side dialog) ───────────────────────────────── */
.rz-dialog-side.cp-editsys-dialog-host {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    border-radius: 0;
    /* Start below the top nav bar instead of overlapping it. --cp-idoc-top is
       set to the measured header height by applyDrawerTopOffset() before open. */
    top: var(--cp-idoc-top, 56px) !important;
    height: calc(100% - var(--cp-idoc-top, 56px)) !important;
    max-height: calc(100% - var(--cp-idoc-top, 56px)) !important;
}

.cp-editsys-dialog-host .rz-dialog-content,
.cp-editsys-dialog-host .rz-dialog-side-content {
    padding: 0 !important;
    height: 100%;
    max-height: 100%;
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.cp-editsys {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
    background: #FFFFFF;
}

.cp-editsys-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 1px solid #EEF0F3;
    flex: 0 0 auto;
}

.cp-editsys-head-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: #E6F7F9;
    color: var(--rz-primary, #08A8BC);
    flex: 0 0 auto;
}

.cp-editsys-head-title {
    font-size: 17px;
    font-weight: 700;
    color: #0F172A;
    flex: 1 1 auto;
    min-width: 0;
}

.cp-editsys-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: #6B7280;
    cursor: pointer;
    border-radius: 6px;
    flex: 0 0 auto;
}

    .cp-editsys-close:hover {
        background: #F3F4F6;
        color: #111827;
    }

.cp-editsys-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 18px 20px 8px;
}

.cp-editsys-section {
    font-size: 15px;
    font-weight: 700;
    color: #0F172A;
    margin: 0 0 14px;
}

.cp-editsys-field {
    margin-bottom: 14px;
}

.cp-editsys-label {
    display: block;
    font-size: 13px;
    color: #374151;
    margin-bottom: 6px;
}

.cp-editsys-req {
    color: #DC2626;
}

.cp-editsys-input {
    width: 100% !important;
}

    .cp-editsys-input.cp-editsys-input--error {
        border-color: #DC2626 !important;
        box-shadow: 0 0 0 1px #DC2626 !important;
    }

.cp-editsys-error {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    color: #DC2626;
}

.cp-editsys-banner {
    margin: 0 20px 12px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #FEF2F2;
    border: 1px solid #FECACA;
    color: #B91C1C;
    font-size: 13px;
}

.cp-editsys-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 8px 0;
}

.cp-editsys-check-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cp-editsys-check-label {
    font-size: 14px;
    color: #111827;
}

.cp-editsys-check-hint {
    font-size: 12px;
    color: #9CA3AF;
}

.cp-editsys-footer {
    flex: 0 0 auto;
    display: flex;
    gap: 12px;
    padding: 14px 20px;
    border-top: 1px solid #EEF0F3;
}

    .cp-editsys-footer .cp-button,
    .cp-editsys-footer .rz-button {
        flex: 1 1 0;
        justify-content: center;
    }

    /* Outlined white Cancel button */
    .cp-editsys-footer .rz-button.cp-editsys-cancel {
        background: #FFFFFF !important;
        border: 1px solid #D1D5DB !important;
        color: #111827 !important;
    }

        .cp-editsys-footer .rz-button.cp-editsys-cancel:hover {
            background: #F9FAFB !important;
        }

.cp-detail-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.cp-detail-section-title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: #111827;
}

.cp-detail-info {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px 24px;
}

.cp-detail-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.cp-detail-field-label {
    font-size: 12px;
    color: #8A94A6;
}

.cp-detail-field-value {
    font-size: 14px;
    color: #111827;
    word-break: break-word;
}

.cp-detail-footer {
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid #ECEEF1;
}

@media (max-width: 992px) {
    .cp-detail-info {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 576px) {
    .cp-detail-info {
        grid-template-columns: 1fr;
    }
}

/* Detail tabs: a clean tab bar flush at the top of the card with a full-width
   divider underneath. The active tab is teal with a short underline directly
   under its label, sitting on the divider. Content sits on the card's white. */
.cp-detail-panel {
    display: block;
    overflow: visible !important;
    padding: 0;
}

    .cp-detail-panel .rz-tabview {
        display: block;
    }

    .cp-detail-panel .rz-tabview-nav,
    .cp-detail-panel .rz-tabview-top > .rz-tabview-nav {
        display: flex;
        align-items: stretch;
        gap: 40px;
        background: transparent;
        border: none !important;
        border-bottom: 1px solid var(--cp-list-section-border) !important;
        border-radius: 0;
        box-shadow: none !important;
        padding: 0 16px !important;
        margin: 0;
    }

        .cp-detail-panel .rz-tabview-nav li {
            display: flex;
            align-items: stretch;
        }

            .cp-detail-panel .rz-tabview-nav li a,
            .cp-detail-panel .rz-tabview-nav li a:not([href]):not([class]) {
                display: flex;
                align-items: center;
                margin: 0 !important;
                padding: 16px 0 !important;
                font-size: 15px;
                font-weight: 500;
                color: #6B7280;
            }

        .cp-detail-panel .rz-tabview-nav li.rz-tabview-selected a,
        .cp-detail-panel .rz-tabview-nav li.rz-state-active a {
            color: var(--rz-primary);
            font-weight: 600;
        }

        /* Short teal underline under the active label, sitting on the divider */
        .cp-detail-panel .rz-tabview-top > .rz-tabview-nav .rz-tabview-selected:after {
            width: 100%;
            left: 0;
            bottom: -1px;
            height: 2px;
            border-radius: 2px 2px 0 0;
            background: var(--rz-primary);
        }

    /* Content panels → directly on the card's white, padded by .cp-detail-tabpad */
    .cp-detail-panel .rz-tabview-panels {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        overflow: visible;
    }

/* Content panel — one white card holding toolbar + tabs/filters + grid + pager */
.cp-discover-panel {
    background: var(--cp-list-section-bg);
    border: 1px solid var(--cp-list-section-border);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

.cp-discover-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    flex-wrap: wrap;
}

.cp-discover-search {
    flex: 1 1 auto;
    max-width: none;
    min-width: 200px;
}

.cp-discover-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    flex: 0 0 auto;
}

/* Toolbar action buttons: white with a light border (match the Refresh CPButton).
   The RadzenButton Light variant defaults to grey — override it here. */
.cp-discover-actions .rz-button {
    background-color: #FFFFFF !important;
    border: 1px solid #B5B7BD !important;
    color: #0F172A !important;
    box-shadow: none !important;
}

    .cp-discover-actions .rz-button:hover {
        background-color: #F9FAFB !important;
        border-color: #9CA3AF !important;
    }

    .cp-discover-actions .rz-button:disabled,
    .cp-discover-actions .rz-button.rz-state-disabled {
        background-color: #FFFFFF !important;
        color: #9CA3AF !important;
        opacity: 0.6;
    }

.cp-discover-tabsrow {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px 12px;
    border-top: 1px solid var(--cp-list-section-border);
    flex-wrap: wrap;
}

.cp-discover-tabs {
    display: inline-flex;
    background: #F3F4F6;
    border-radius: 8px;
    padding: 3px;
    flex: 0 0 auto;
}

.cp-discover-tab {
    border: none;
    background: transparent;
    color: #4B5563;
    font-size: 13px;
    font-weight: 500;
    padding: 6px 16px;
    border-radius: 6px;
    cursor: pointer;
}

    .cp-discover-tab.is-active {
        background: var(--rz-primary, #08A8BC);
        color: #FFFFFF;
    }

.cp-discover-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-left: auto;
    justify-content: flex-end;
}

.cp-discover-gridwrap {
    min-width: 0;
    padding: 0 4px 6px;
    overflow-x: auto;
}

@media (max-width: 900px) {
    .cp-discover-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 576px) {
    .cp-discover-stats {
        grid-template-columns: 1fr;
    }

    .cp-discover-filters {
        margin-left: 0;
    }
}

/* OUTER — the area to the LEFT/RIGHT of the centered container → WHITE. */
body:has(.cp-list-filterbar) .app-body-inner {
    background: #FFFFFF;
}

/* The centered container is the grey canvas (like the Dashboard): white cards
   sit on it with grey showing around and between them. It is capped + centered
   per breakpoint, so the white outer shows as equal left/right margins. */
.page.page-wide:has(.cp-list-filterbar) {
    background: var(--cp-list-page-bg);
    --cp-page-gutter: 16px;
}

/* Section 1 (title + search) and Section 2 (stats + actions) → white cards.
   Certificate Reports + grid already render as the third white card. */
.cp-list-headrow,
.cp-list-statsrow {
    background: var(--cp-list-section-bg);
    border: 1px solid var(--cp-list-section-border);
    border-radius: 8px;
    padding: 14px 16px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

/* ============================================================
   Certificate Details — 2-section card design (top header card +
   below content/tabs card) on the same grey canvas as the list.
   Scoped via .cp-details-header (only Certificate/Details.razor uses it). */

/* Outer area (left/right/around the container) → white. */
body:has(.cp-details-header) .app-body-inner {
    background: #FFFFFF;
}

/* The page is the grey canvas; the two grid rows become white cards with a
   grey gap between them. */
.page.page-wide:has(.cp-details-header) {
    background: var(--cp-list-page-bg);
    --cp-page-gutter: 16px;
    row-gap: 16px;
}

    .page.page-wide:has(.cp-details-header) > .page-header,
    .page.page-wide:has(.cp-details-header) > .page-content {
        background: var(--cp-list-section-bg);
        border: 1px solid var(--cp-list-section-border);
        border-radius: 8px;
        box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
        padding: 20px;
        box-sizing: border-box;
    }

    /* The header's inline bottom divider is redundant inside its own card. */
    .page.page-wide:has(.cp-details-header) .cp-details-header {
        border-bottom: none !important;
        padding-bottom: 0 !important;
    }

    /* Cards hug their content vertically (top-aligned, content height) so a short
       tab doesn't leave a big empty white area with a scrollbar below the fields.
       They only scroll internally if their content exceeds the viewport. */
    .page.page-wide:has(.cp-details-header) {
        align-items: start;
    }

        .page.page-wide:has(.cp-details-header) > .page-content {
            height: auto !important;
            max-height: 100%;
        }

/* Certificate Details — per-tab layout: a top row (heading left, action buttons
   right) and a bottom footer separated by a divider. */
.cp-tab-toprow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.cp-tab-title {
    margin: 0;
    font-weight: 700;
    font-size: 14px;
    color: #060A12;
}

.cp-tab-actions {
    flex: 0 0 auto;
    /* Pin the action buttons to the right edge. The parent .cp-tab-toprow wraps,
       and under `justify-content: space-between` a lone item on a wrapped line
       falls back to the LEFT - which is why these buttons appeared left-aligned
       once they no longer fit beside the tab title. An auto left margin absorbs
       the free space on whatever line the group lands on, so it stays right
       whether it shares the title's line or wraps below it. */
    margin-left: auto;
    /* If the group itself wraps onto more than one row, keep those rows right
       aligned too. !important is required because RadzenStack emits its own
       justify-content inline, which would otherwise win over this class. */
    justify-content: flex-end !important;
}

.cp-tab-footer {
    border-top: 1px solid #ECECEC;
    padding-top: 20px;
    margin-top: 24px;
}

/* Install Notes tab — the intro/summary row: description/detail on the left, the
   "Create/Edit install notes" primary button on the right of the same row.
   Grid (1fr auto) so the text column is always "remaining width minus the button"
   — prose can never wrap under the button, and the button pins to the top-right. */
.cp-installnotes-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 16px;
}

.cp-installnotes-summary-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cp-installnotes-summary-action {
    justify-self: end;
}

/* On narrow widths, stack the button under the text. */
@media (max-width: 640px) {
    .cp-installnotes-summary {
        grid-template-columns: 1fr;
    }

    .cp-installnotes-summary-action {
        justify-self: start;
    }
}

/* Certificate Details — User Information tab.
   Section labels ("REQUESTED BY", "OWNER", "OWNER'S MANAGER", "SUBSCRIBERS")
   and the per-person rows (avatar + name/role, then Team Name / Email /
   Cost Center ID columns, with Phone on its own line + a divider below). */
.cp-user-section-title {
    margin: 20px 0 10px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #8A8F98;
}

    .cp-user-info > .cp-user-section-title:first-child {
        margin-top: 0;
    }

.cp-user-row {
    padding: 4px 0 16px;
    border-bottom: 1px solid #ECEEF1;
}

    .cp-user-row:last-child {
        border-bottom: none;
    }

.cp-user-row-main {
    display: grid;
    grid-template-columns: minmax(200px, 1.4fr) 1fr 1.4fr 1fr;
    gap: 16px 24px;
    align-items: start;
}

.cp-user-identity {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

    .cp-user-identity.cp-user-clickable {
        cursor: pointer;
    }

.cp-user-identity-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.cp-user-name {
    font-weight: 600;
    font-size: 14px;
    color: #111827;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.cp-user-role {
    font-size: 13px;
    color: #8A8F98;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.cp-user-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.cp-user-field-label {
    font-size: 12px;
    color: #8A8F98;
}

.cp-user-field-value {
    font-size: 14px;
    color: #111827;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

a.cp-user-email {
    color: #111827;
    text-decoration: none;
}

    a.cp-user-email:hover {
        color: var(--rz-primary);
        text-decoration: underline;
    }

.cp-user-row-phone {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 12px;
}

@media (max-width: 992px) {
    .cp-user-row-main {
        grid-template-columns: minmax(180px, 1.4fr) 1fr;
    }
}

@media (max-width: 576px) {
    .cp-user-row-main {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Install Notes editor hosted in a drawer / popup
   (Certificate Details → Install Notes → "Create/Edit install notes").
   The same component renders as a right-side drawer on wide screens and a
   centred popup on narrower ones (the C# picks OpenSideAsync vs OpenAsync).
   ShowTitle is off, so the component supplies its own white header.
   ========================================================================== */
/* Radzen content wrapper — the regular dialog (popup) uses .rz-dialog-content,
   the side dialog (drawer) uses .rz-dialog-side-content. Both become a
   non-scrolling flex column so the component's own content area does the
   scrolling and the header stays pinned at the top. */
.cp-idoc-dialog-host .rz-dialog-content,
.cp-idoc-dialog-host .rz-dialog-side-content {
    padding: 0 !important;
    height: 100%;
    max-height: 100%;
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Side-drawer panel: Radzen defaults it to overflow-y:auto (whole panel scrolls,
   so a header inside slides away), plus its own padding and rounded corners.
   Make it a full-height flex column with square edges and no self-scroll. */
.rz-dialog-side.cp-idoc-dialog-host {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    border-radius: 0;
    /* Start below the top nav bar instead of overlapping it. --cp-idoc-top is
       set to the measured header height by applyDrawerTopOffset() before open. */
    top: var(--cp-idoc-top, 56px) !important;
    height: calc(100% - var(--cp-idoc-top, 56px)) !important;
    max-height: calc(100% - var(--cp-idoc-top, 56px)) !important;
}

.cp-idoc-dialog {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
}

.cp-idoc-dialog-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid #ECEEF1;
    flex: 0 0 auto;
    background: #FFFFFF;
}

.cp-idoc-dialog-header-main {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.cp-idoc-dialog-icon {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    opacity: 0.7;
}

.cp-idoc-dialog-title {
    font-size: 15px;
    font-weight: 700;
    color: #111827;
    line-height: 1.3;
}

.cp-idoc-dialog-subtitle {
    font-size: 12px;
    color: #6B7280;
    line-height: 1.3;
}

.cp-idoc-dialog-close {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    background: transparent;
    color: #6B7280;
    border-radius: 6px;
    cursor: pointer;
}

    .cp-idoc-dialog-close:hover {
        background: #F3F4F6;
        color: #111827;
    }

.cp-idoc-dialog-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px 20px 20px;
}

/* Certificate Details — read-only tabs (Properties / Request): render the fields
   as a multi-column grid with the label ABOVE the value (per the detail-view
   snapshots) instead of the label-left / value-right form. Scoped to this page so
   the shared form pages (Profile, User Details, Onboarding) keep their layout. */
.page.page-wide:has(.cp-details-header) .details-form {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px 24px !important;
    width: 100%;
    align-items: start;
}

    .page.page-wide:has(.cp-details-header) .details-form-field-wrapper {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 4px !important;
        border-bottom: none !important;
        padding: 0 !important;
        width: auto !important;
        min-width: 0;
    }

        .page.page-wide:has(.cp-details-header) .details-form-label {
            width: 100% !important;
            height: auto !important;
            line-height: 1.4 !important;
            font-size: 12px !important;
            font-weight: 500 !important;
            color: #6B7280 !important;
        }

        .page.page-wide:has(.cp-details-header) .details-form-field {
            width: 100% !important;
            height: auto !important;
            line-height: 1.4 !important;
            font-size: 14px !important;
            color: #111827 !important;
            justify-content: flex-start !important;
        }

/* Section title spanning the whole grid row (e.g. "Validity & Cryptography"). */
.page.page-wide:has(.cp-details-header) .cp-detail-section {
    grid-column: 1 / -1;
    /*margin: 14px 0 2px;*/
    padding-top: 14px;
    border-top: 1px solid #F1F3F5;
    font-size: 13px;
    font-weight: 700;
    color: #374151;
}

    /* The first section title needs no top divider/space. */
    .page.page-wide:has(.cp-details-header) .cp-detail-section.cp-detail-section--first {
        margin-top: 0;
        padding-top: 0;
        border-top: none;
    }

/* A field that should take two columns (long labels / SAN lists). */
.page.page-wide:has(.cp-details-header) .details-form-field-wrapper.cp-detail-span2 {
    grid-column: span 2;
}

@media (max-width: 992px) {
    .page.page-wide:has(.cp-details-header) .details-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 576px) {
    .page.page-wide:has(.cp-details-header) .details-form {
        grid-template-columns: 1fr;
    }
}

.page-content.details-page-content {
}

.page-title {
    color: var(--Foundation-Text-text-900, #060A12);
    /* Text xl-20/Bold-20 */
    font-family: "Open Sans";
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px; /* 140% */
}

    .page-title.list-page-title {
    }

    .page-title.details-page-title {
    }

.search-field {
}

    .search-field.list-page-search-field {
    }

.actions-button {
}

    .actions-button.list-page-actions-button {
    }

    .actions-button.details-page-actions-button {
    }


.data-import-logs .rz-badge {
    padding-top: 3px;
}

/* ------------------------------------------------------------------ */
/* Modern data-grid loading indicator                                   */
/* Replaces Radzen's centered spinning circle with a slim indeterminate */
/* progress bar over a soft frosted overlay. Applies to all CipherPanel */
/* data grids (IsLoading). Radzen 6 overlay = .rz-datatable-loading,    */
/* spinner content = .rz-datatable-loading-content.                     */
/* ------------------------------------------------------------------ */
.rz-datatable-loading {
    background-color: rgba(255, 255, 255, 0.62) !important;
    -webkit-backdrop-filter: blur(1.5px);
    backdrop-filter: blur(1.5px);
    overflow: hidden;
}

/* hide the default spinning circle */
.rz-datatable-loading-content {
    display: none !important;
}

/* slim indeterminate bar sliding across the top of the grid */
.rz-datatable-loading::before {
    content: "";
    position: absolute;
    top: 0;
    left: -35%;
    height: 3px;
    width: 35%;
    border-radius: 0 3px 3px 0;
    background: var(--rz-primary, #0e7d8c);
    will-change: left, width;
    animation: cp-grid-loading 1.15s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes cp-grid-loading {
    0%   { left: -35%; width: 35%; }
    50%  { width: 48%; }
    100% { left: 100%; width: 30%; }
}

@media (prefers-reduced-motion: reduce) {
    .rz-datatable-loading::before { animation-duration: 2.4s; }
}
/* ---- CA health "pulse" indicator (CaHealthPulse.razor) ---- */
.ca-pulse {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}
.ca-pulse-dots {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.ca-pulse-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
    flex: 0 0 auto;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
}
/* Emphasize the most recent check (last dot) with a subtle live pulse. */
.ca-pulse-dot:last-child {
    animation: caPulseBeat 2.2s ease-in-out infinite;
}
@keyframes caPulseBeat {
    0%, 100% { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 0 0 0 rgba(9, 158, 50, 0); }
    50%      { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 0 0 3px rgba(9, 158, 50, 0.12); }
}
.ca-pulse-latency {
    font-size: 0.72rem;
    color: #8a8a8a;
    font-variant-numeric: tabular-nums;
}
@media (prefers-reduced-motion: reduce) {
    .ca-pulse-dot:last-child { animation: none; }
}

/* ---- Add Certificate Authority: type picker ---- */
.ca-kind-picker { padding: 12px 0 8px; }
.ca-kind-picker-title { font-size: 1.05rem; font-weight: 600; margin: 8px 0 18px; }
.ca-kind-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
}
.ca-kind-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    text-align: left;
    padding: 18px;
    border: 1px solid var(--rz-border, #E5E7EB);
    border-radius: 10px;
    background: var(--rz-base-background-color, #fff);
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, transform .05s ease;
}
.ca-kind-card:hover {
    border-color: var(--rz-primary, #2F6FB8);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
}
.ca-kind-card:active { transform: translateY(1px); }
.ca-kind-card .rzi, .ca-kind-card .rz-icon { font-size: 26px; color: var(--rz-primary, #2F6FB8); }
.ca-kind-card-label { font-weight: 600; font-size: 0.98rem; }
.ca-kind-card-desc { font-size: 0.8rem; color: var(--rz-text-secondary-color, #6b7280); line-height: 1.35; }

/* ===================== Certificate Authority Details (Figma redesign) ===================== */
/* Cards sit DIRECTLY inside .page — the same pattern as the Readiness and Stakeholder
   form pages. The .page-header/.page-content/.page-footer wrappers are deliberately NOT
   used here: their base CSS paints the footer white, nests a second scroll region
   (height:100%; overflow-y:auto) and forces a grid, which hid the grey canvas. */
body:has(.cp-cad-page) .app-body-inner { background: #FFFFFF; }

.page.page-wide.cp-cad-page {
    display: block;
    overflow-y: auto;
    /* Figma's #F5F6F7 is ~5 RGB units off white — invisible in a 24px gap. */
    background: #EAECF0;
    --cp-page-gutter: 24px;
}

/* Nothing between the canvas and the cards may paint white. */
.cp-cad-page .cad-sections,
.cp-cad-page #caForm { background: transparent; }

/* ---- Header + tabs: one connected white card ---- */
.cad-header {
    box-sizing: border-box;
    background: #FFFFFF;
    border-radius: 8px;
    box-shadow: 0 0 1px rgba(12, 26, 75, 0.24), 0 3px 8px -1px rgba(50, 50, 71, 0.05);
    overflow: hidden;
    margin-bottom: 24px;
}
.cad-header-main { padding: 16px 24px; }
.cad-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12px; line-height: 18px; margin-bottom: 8px; color: #5E6470; }
.cad-breadcrumb a { color: #5E6470; text-decoration: none; }
.cad-breadcrumb a:hover { color: #060A12; text-decoration: underline; }
.cad-crumb-back { display: inline-flex; align-items: center; color: #5E6470; margin-right: 2px; }
.cad-crumb-back:hover { color: #060A12; }
.cad-crumb-sep { color: #C4C9D2; }
.cad-crumb-current { color: #060A12; font-weight: 600; }
.cad-header-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cad-title-line { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cad-title { margin: 0; font-size: 20px; font-weight: 700; line-height: 28px; color: #060A12; }
.cad-status { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 16px; }
.cad-status--active { background: #DCFCE7; color: #097732; }
.cad-status--archived { background: #EDF0F5; color: #475467; }
.cad-header-actions { flex: 0 0 auto; }

/* ---- Cards (action + numbered accordion sections) ---- */
.cad-sections { display: block; }
.cad-section,
.cad-action-card {
    box-sizing: border-box;
    background: #FFFFFF;
    border-radius: 8px;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.05);
    margin-bottom: 24px;
    overflow: hidden;
}
.cad-section-head {
    width: 100%; display: flex; align-items: center; gap: 16px;
    padding: 16px 24px; background: transparent; border: none; cursor: pointer; text-align: left;
}
.cad-section-num {
    flex: 0 0 auto; box-sizing: border-box;
    min-width: 24px; height: 24px; padding: 2px 8px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #F4FAFB; border: 1px solid #B0DCE1; border-radius: 4px;
    color: #33A4B1; font-size: 14px; font-weight: 500; line-height: 20px;
}
.cad-section-heading { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cad-section-title { font-size: 16px; font-weight: 600; line-height: 24px; color: #242A41; }
.cad-section-sub { font-size: 12px; font-weight: 400; line-height: 18px; color: #8E90AA; }
.cad-section-head .rz-icon, .cad-section-head .rzi { color: #5E6470; font-size: 24px; }
.cad-section-body { padding: 24px; }

/* ---- Field grids: 3 columns for General Configuration, 2 for the rest ---- */
.cad-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; align-items: start; }
.cad-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 24px; align-items: start; }
.cad-span2 { grid-column: 1 / -1; }
/* Identity + the per-type connection fields are two grids in one section. */
.cad-grid + .cad-grid { margin-top: 20px; }
.cad-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cad-field-label { display: flex; align-items: center; gap: 4px; }
.cad-hint { font-size: 12px; line-height: 18px; color: #8E90AA; }

/* Controls fill their grid cell so labels and inputs line up column to column. */
.cp-cad-page .cad-field .rz-textbox,
.cp-cad-page .cad-field .rz-dropdown,
.cp-cad-page .cad-field .rz-numeric,
.cp-cad-page .cad-field .rz-textarea,
.cp-cad-page .cad-field .rz-password,
.cp-cad-page .cad-field .rz-textbox.rz-password { width: 100%; }

/* Radio rows read as one line of options, as in the design. */
.cp-cad-page .cad-field .rz-radio-button-list { display: flex; flex-wrap: wrap; gap: 8px 28px; align-items: center; }
.cp-cad-page .cad-field .rz-radio-button-list .rz-radiobutton-box { margin-right: 2px; }

@media (max-width: 1100px) {
    .cad-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .cad-grid, .cad-grid-3 { grid-template-columns: 1fr; }
}

/* Action card keeps a plain title header (no number) */
.cad-action-card { padding: 24px; }
.cad-action-title { margin: 0 0 6px; font-size: 12px; font-weight: 400; line-height: 18px; color: #0F172A; }

/* Adding: the action row sits inside section 3 rather than in its own card, with a rule under
   it separating it from the settings that follow. */
.cad-action-inline { padding-bottom: 20px; border-bottom: 1px solid #ECECEC; }

/* Add flow: General Configuration and CA Identity are two cards joined so they read as the single
   "Add Certificate Authority." section. Only the lower half carries the shadow, which is where a
   4px-down shadow shows anyway. */
.cad-section.cad-section--top {
    margin-bottom: 0;
    border-radius: 8px 8px 0 0;
    box-shadow: none;
}

.cad-section.cad-section--cont {
    margin-top: 0;
    border-radius: 0 0 8px 8px;
    border-top: 1px solid #ECECEC;
}

/* ---- Add flow: issuer / type picker cards ---- */
.cad-pick-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
}

.cad-pick {
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    padding: 16px;
    text-align: left;
    background: #FFFFFF;
    border: 1px solid #E4E7EC;
    border-radius: 8px;
    cursor: pointer;
    font: inherit;
    transition: border-color .12s ease, background-color .12s ease;
}

    .cad-pick:hover { border-color: #B0DCE1; }

.cad-pick-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 auto; }
.cad-pick-title { font-size: 14px; font-weight: 600; line-height: 20px; color: #101828; }
.cad-pick-desc { font-size: 12.5px; line-height: 18px; color: #667085; }

/* Radio affordance — the card itself is the control, so this is drawn rather than an <input>. */
.cad-pick-radio {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    border: 1px solid #C4C9D2;
    border-radius: 50%;
    background: #FFFFFF;
}

.cad-pick.is-selected {
    background: #F0FAFB;
    border-color: #54B3BE;
}

    .cad-pick.is-selected .cad-pick-title { color: #008D9E; }
    .cad-pick.is-selected .cad-pick-desc { color: #33808C; }

    .cad-pick.is-selected .cad-pick-radio {
        border-color: #008D9E;
        box-shadow: inset 0 0 0 3px #FFFFFF;
        background: #008D9E;
    }

/* A locked step fades and stops responding, but its hint stays legible and the header still
   toggles — so the operator can see what is coming and why it is not available yet. */
.cad-section--locked .cad-section-body > *:not(.cad-lock-hint) {
    opacity: 0.5;
    pointer-events: none;
}

.cad-lock-hint {
    margin-bottom: 16px;
    padding: 10px 14px;
    background: #F8F9FB;
    border: 1px solid #ECECEC;
    border-radius: 6px;
    font-size: 12.5px;
    line-height: 18px;
    color: #667085;
}

.cad-pick:disabled { cursor: not-allowed; }

.cad-pick-note {
    margin-top: 16px;
    padding: 14px 16px;
    border: 1px dashed #E5E7EB;
    border-radius: 8px;
    color: #667085;
    font-size: 13px;
}

.cad-pick-hatch {
    margin-top: 16px;
    padding: 13px 16px;
    border: 1px solid #FDE68A;
    background: #FFFBEB;
    border-radius: 8px;
    font-size: 13px;
    color: #92400E;
}

@media (max-width: 1100px) {
    .cad-pick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .cad-pick-grid { grid-template-columns: 1fr; }
}

/* ---- Compact fields to match the spec (scoped to this page) ---- */
.cp-cad-page .cad-section-body .rz-textbox,
.cp-cad-page .cad-section-body .rz-dropdown,
.cp-cad-page .cad-section-body .rz-numeric,
.cp-cad-page .cad-section-body .rz-textarea,
.cp-cad-page .cad-action-card .rz-dropdown {
    border: 1px solid #B5B7BD;
    border-radius: 4px;
}
.cp-cad-page .cad-section-body .rz-label,
.cp-cad-page .cad-section-body label.rz-label {
    font-size: 12px; line-height: 18px; color: #0F172A; font-weight: 400;
}

/* Footer as a card */
.cad-footer {
    box-sizing: border-box;
    padding: 16px 24px;
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.05);
    margin-bottom: 24px;
}

/* Empty state (CRLs) — matches the Data Import / Endpoint Check empty panels. */
.cad-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 24px; min-height: 300px; padding: 48px 16px; text-align: center;
    background: #FAFAFB; border-radius: 8px;
}
.cad-empty-text { font-size: 16px; font-weight: 500; line-height: 24px; color: #7A8699; }
.cad-section-note { font-size: 13px; color: #667085; margin: 4px 0; }

@media (max-width: 720px) {
    .cad-header-row { flex-direction: column; align-items: stretch; }
}

/* ===================== SMTP Settings list ===================== */
body:has(.cp-smtp-page) .app-body-inner { background: #FFFFFF; }

.page.page-wide.cp-smtp-page {
    display: block;
    overflow-y: auto;
    background: var(--cp-list-page-bg, #F4F5F7);
    --cp-page-gutter: 16px;
}

.cp-smtp-page .page-content { display: block; height: auto; overflow: visible; }
.cp-smtp-page .page-content > * { overflow: visible; }

/* Header card: breadcrumb + title + stats strip */
.smtp-headcard {
    box-sizing: border-box;
    background: #FFFFFF;
    border: 1px solid #E4E7EC;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    padding: 16px 20px;
    margin-bottom: 16px;
}

.smtp-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12px; line-height: 18px; color: #5E6470; margin-bottom: 6px; }
.smtp-breadcrumb a { color: #5E6470; text-decoration: none; }
.smtp-breadcrumb a:hover { color: #060A12; text-decoration: underline; }
.smtp-crumb-back { display: inline-flex; align-items: center; color: #5E6470; margin-right: 2px; }
.smtp-crumb-back:hover { color: #060A12; }
.smtp-crumb-sep { color: #C4C9D2; }
.smtp-crumb-current { color: #060A12; font-weight: 600; }

.smtp-head-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.smtp-title { margin: 0; font-size: 20px; font-weight: 700; line-height: 28px; color: #060A12; }

.smtp-divider { height: 1px; background: #EBEDF0; margin: 14px 0; }

.smtp-stats { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; font-size: 13px; color: #5E6470; }
.smtp-stat b { color: #101828; font-weight: 700; }
.smtp-stat-sep { color: #D0D5DD; }
.smtp-stat b.smtp-stat-ok { color: #097732; }
.smtp-stat b.smtp-stat-bad { color: #B82F2F; }

/* Toolbar + grid */
.smtp-search { width: 320px; max-width: 100%; }

/* Port shown as a pill, per the design */
.smtp-port {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 48px; padding: 2px 10px;
    background: #F2F4F7; border-radius: 4px;
    font-size: 12px; font-variant-numeric: tabular-nums; color: #344054;
}

.smtp-actions { display: inline-flex; align-items: center; justify-content: flex-end; }

/* Frozen action cells need an opaque background or rows show through when scrolled. */
.cp-smtp-page .rz-grid-table tbody td.rz-frozen-cell,
.cp-smtp-page .rz-datatable-data td.rz-frozen-cell { background: #FFFFFF; }

@media (max-width: 720px) {
    .smtp-head-row { flex-direction: column; align-items: stretch; }
    .smtp-search { width: 100%; }
}

.di-drawer.cdp-drawer { width: min(440px, 100vw); background: #FCFCFD; }

.cdp-drawer-header {
    box-sizing: border-box;
    min-height: 72px;
    padding: 16px 24px;
    background: #FFFFFF;
    border-bottom: 1px solid #EFF0F5;
}
.cdp-drawer-title { font-size: 16px; font-weight: 500; line-height: 24px; color: #242A41; }
.cdp-drawer-icon { flex-shrink: 0; }

.cdp-drawer-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
    overflow-y: auto;
}

.cdp-drawer-subject { font-size: 13px; font-weight: 700; line-height: 20px; color: #0F172A; word-break: break-word; }
.cdp-drawer-note { font-size: 13px; color: #667085; }

.cdp-label { font-size: 12px; font-weight: 400; line-height: 18px; color: #0F172A; }

.cdp-input {
    height: 36px;
    padding: 4px 10px;
    border: 1px solid #D0D5DD;
    border-radius: 4px;
    font-size: 14px;
    line-height: 20px;
    color: #0F172A;
}

.cdp-input[readonly] { background: #FFFFFF; cursor: default; }
.cdp-input[readonly]:focus { border-color: #D0D5DD; box-shadow: none; }

.cdp-drawer-footer {
    display: flex;
    justify-content: center;
    padding: 16px 24px;
    background: #FFFFFF;
    border-top: 1px solid #ECECEC;
}

.cdp-drawer-footer .dd-btn.cdp-btn {
    box-sizing: border-box;
    flex: none;
    width: 150px;
    min-width: 0;
    height: 32px;
    padding: 8px 24px;
    gap: 8px;
    background: #FFFFFF;
    border: 1px solid #B5B7BD;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
    color: #0F172A;
}

/* ---- Add / edit SMTP drawer ---- */
.di-drawer.smtp-drawer { width: min(482px, 100vw); background: #FCFCFD; }

.smtp-drawer-header {
    box-sizing: border-box;
    min-height: 72px;
    padding: 16px 24px;
    background: #FFFFFF;
    border-bottom: 1px solid #EFF0F5;
}
.smtp-drawer-title { font-size: 16px; font-weight: 500; line-height: 24px; color: #242A41; }

.smtp-drawer-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
    overflow-y: auto;
}

.smtp-drawer-section { font-size: 14px; font-weight: 700; line-height: 20px; color: #0F172A; }

.smtp-label { font-size: 12px; font-weight: 400; line-height: 18px; color: #0F172A; }

.smtp-input {
    height: 32px;
    padding: 4px 10px;
    border: 1px solid #B5B7BD;
    border-radius: 4px;
    font-size: 14px;
    line-height: 20px;
    color: #0F172A;
}

/* Radzen dropdowns sit alongside the plain inputs, so match their height and border. */
.smtp-drawer .rz-dropdown {
    width: 100%;
    min-height: 32px;
    border: 1px solid #B5B7BD;
    border-radius: 4px;
    background: #FFFFFF;
}

.smtp-drawer-icon { flex-shrink: 0; }

.smtp-field-error { font-size: 12px; line-height: 18px; color: #B82F2F; }

.smtp-drawer-footer {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 24px;
    background: #FFFFFF;
    border-top: 1px solid #ECECEC;
}

.smtp-drawer-footer .dd-btn.smtp-btn {
    min-width: 0;
    flex: 1 1 0;
    height: 32px;
    padding: 0 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
}

/* "Send Test Email" carries the longest label, so it keeps its natural width. */
.smtp-drawer-footer .dd-btn.smtp-btn-wide { flex: 0 0 auto; padding: 0 16px; }

/* ---- "Confirm SMTP Change" prompt ---- */
/* Must clear the drawer, which sits at z-index 20001. */
.di-modal-overlay.smtp-confirm-overlay { z-index: 20002; }

.di-modal-icon.smtp-confirm-icon {
    background: #D7EFF5;
    border: 8px solid #ECF8FB;
}

.di-modal-btn.smtp-modal-proceed {
    background: #008D9E;
    border: none;
    color: #FFFFFF;
    font-size: 14px;
    padding: 8px 32px;
}

    .di-modal-btn.smtp-modal-proceed:hover:not(:disabled) { background: #007B8A; }
    .di-modal-btn.smtp-modal-proceed:disabled { opacity: 0.6; cursor: not-allowed; }

/* ===================== Shared designed dialog shell =====================
   Used by prompts that draw their own chrome and are opened with Radzen's
   ShowTitle/ShowClose turned off (Send Test Email, Delete SMTP Configuration). */
.cp-dlg-host .rz-dialog-content { padding: 0; }
.cp-dlg-host { border-radius: 12px; overflow: hidden; }

/* Centre in the viewport, the same as the di-modal popups used in the other modules.
   Radzen's .rz-dialog-wrapper already flex-centres, but .rz-dialog is position:absolute,
   so it drops out of the flex flow and lands on a static position that any inline offset
   can shift. Making it a normal flex item centres it on both axes, predictably. */
.rz-dialog.cp-dlg-host {
    position: relative;
    top: auto !important;
    left: auto !important;
    margin: auto;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 32px);
    overflow: auto;
}

.cp-dlg {
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    width: 100%;
    padding: 24px;
    background: #FFFFFF;
    border-radius: 12px;
}

.cp-dlg-close {
    position: absolute;
    top: 16px;
    right: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 12px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
}

    .cp-dlg-close:hover { background: #F3F4F6; }

.cp-dlg-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    width: 100%;
}

.cp-dlg-icon { flex: none; }

.cp-dlg-texts {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
}

.cp-dlg-title { font-size: 18px; font-weight: 500; line-height: 26px; color: #242A41; }

/* pre-line so a message can break its own lines with \n, without the caller having to pass
   HTML (which would mean rendering server-supplied error text as markup). */
.cp-dlg-sub { font-size: 14px; font-weight: 400; line-height: 20px; color: #91949D; white-space: pre-line; }

.cp-dlg-field { display: flex; flex-direction: column; gap: 8px; width: 100%; }

.cp-dlg-label { font-size: 12px; font-weight: 400; line-height: 18px; color: #0F172A; }

.cp-dlg-hint { font-size: 12px; font-weight: 400; line-height: 18px; color: #91949D; }

.cp-dlg-error { font-size: 12px; line-height: 18px; color: #B82F2F; }

.cp-dlg-input {
    box-sizing: border-box;
    width: 100%;
    height: 32px;
    padding: 4px 10px;
    border: 1px solid #B5B7BD;
    border-radius: 4px;
    font-size: 14px;
    line-height: 20px;
    color: #0F172A;
    background: #FFFFFF;
    outline: none;
}

    .cp-dlg-input:focus { border-color: #008D9E; box-shadow: 0 0 0 3px rgba(0, 141, 158, 0.12); }
    .cp-dlg-input::placeholder { color: #9AA3AF; }

.cp-dlg-textarea { height: 49px; min-height: 49px; padding: 8px 10px; resize: vertical; }

/* Radzen dropdowns used inside a dialog field match the plain inputs beside them. */
.cp-dlg-field .rz-dropdown {
    width: 100%;
    min-height: 32px;
    border: 1px solid #B5B7BD;
    border-radius: 4px;
    background: #FFFFFF;
}

.cp-dlg-actions { display: flex; flex-direction: row; gap: 12px; width: 100%; }

.cp-dlg-btn {
    box-sizing: border-box;
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 8px 24px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}

/* Taller variant (Send Test Email uses 44px / 16px type). */
.cp-dlg-btn--lg { height: 44px; padding: 10px 18px; font-size: 16px; font-weight: 500; line-height: 24px; }

.cp-dlg-btn--secondary { background: #FFFFFF; border: 1px solid #B5B7BD; color: #0F172A; }
    .cp-dlg-btn--secondary:hover:not(:disabled) { background: #F9FAFB; }

.cp-dlg-btn--lg.cp-dlg-btn--secondary { color: #3F4555; }

.cp-dlg-btn--primary { background: #008D9E; border: 1px solid #008D9E; color: #FFFFFF; }
    .cp-dlg-btn--primary:hover:not(:disabled) { background: #007B8A; border-color: #007B8A; }

.cp-dlg-btn--danger { background: #EE4723; border: 1px solid #EE4723; color: #FFFFFF; font-size: 14px; font-weight: 600; line-height: 20px; }
    .cp-dlg-btn--danger:hover:not(:disabled) { background: #D63C1C; border-color: #D63C1C; }

.cp-dlg-btn:disabled { opacity: 0.6; cursor: not-allowed; }