:root {
    --brand-color: rgb(255, 84, 0);
    --brand-color-with-opacity-1: rgba(255, 84, 0, 0.1);
    --brand-color-with-opacity-2: rgba(255, 84, 0, 0.25);
    --brand-border-color: #CD6500;
    --mde-max-height: 400px;
}

body{
    background-color: rgb(245, 247, 250);
    font-family: "Lato", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 16px;
}

#header
{
    background-color: #FFF;
    border-bottom-color: rgb(203, 208, 221);
}

#sidebarMenu {
    font-size: 16px;
    font-family: "Nunito Sans", sans-serif;
    background-color: #FFF;
    border-right-color: rgb(203, 208, 221);
    margin-right: 0;
    
}

#sidebarMenu .sidebarMenuBox {
    padding-top: 68px;
    padding-right: 15px;
    padding-bottom: 0;
    padding-left: 15px;
    overflow-y: auto;
}

#sidebarMenu .ec-box {
    background-color: rgba(245, 247, 250, 0.1);
    flex-shrink: 0;
}

#sidebarMenu .headerText {
    color: #6E788F;
    font-weight: 500;
}

#sidebarMenu a,
#sidebarMenu button {
    color: rgb(82, 91, 117);
    font-weight: 400;
}

#sidebarMenu .nav-link-button:hover {
    background-color: transparent !important;
    color: var(--brand-border-color) !important;
}

#sidebarMenu .nav-link-button {
    color: var(--brand-color) !important;
}

#sidebarMenu a.nav-link:hover {
    background-color: var(--brand-color) !important;
    color: #FFF;
    border-radius: 0.25rem !important;
    background-image: var(--bs-gradient) !important;
}

#sidebarMenu .nav-link {
    border-radius: 0.25rem !important;
}

@media (min-width: 768px) {
    #sidebarMenu {
        min-height: 100vh;
    }
}

.text-orange {
    color: var(--brand-color);
}

.text-red {
    color: #B22222;
}

#sidebarMenu .bg-primary {
    background-color: var(--brand-color) !important;
}

#sidebarMenu a.active{
    color: var(--brand-color);
}

.header-dropdown-menu a {
    color: rgb(82, 91, 117);
}

.header-dropdown-menu ul.nav li.nav-item a {
    font-family: "Nunito Sans", sans-serif;
    font-size: .875em;
}

.header-dropdown-menu .dropdown-item:hover, .header-dropdown-menu .dropdown-item a:hover {
    background-color: var(--brand-color) !important;
    color: #FFF;
}

.header-dropdown-menu .text-terms, .header-dropdown-menu .text-terms a {
    font-size: 10.24px;
    font-weight: 700;
    color: rgb(123, 148, 173);
    -webkit-font-smoothing: antialiased;
}

.header-dropdown-menu .text-terms a {
    text-decoration: none;
}

.header-dropdown-menu .text-terms a:hover{
    text-decoration: underline;
    color: var(--brand-color) !important;
}

.box{
    margin: 2rem auto 0;
    background: #fff;
    max-width: 33rem;

    &:before{
        border-radius: 6px 0 0 0;
        content: '';
        width: 2rem;
        height: 2rem;
        display: block;
        background: #fff;
        transform: rotate(45deg) translateY(-1.1rem);
        position: absolute;
        top: 0;
        right: 2.25rem;
        border-left: 1px solid #dee2e6;
        border-top: 1px solid #dee2e6;
    }
}

.btn-primary,
.btn-primary:hover,
.btn-primary:active,
.btn-primary:visited,
.btn-primary:focus,
.btn-primary:disabled,
.btn-outline-dark:hover {
    background-color: var(--brand-color) !important;
    border-color: var(--brand-color);
}

.btn-secondary,
.btn-secondary:hover,
.btn-secondary:active,
.btn-secondary:visited,
.btn-secondary:focus {
    background-color: #666 !important;
    border-color: #666;
}

.btn-outline-primary {
    border-color: var(--brand-color) !important;
    color: var(--brand-color);
}

.btn-outline-primary:hover {
    background-color: var(--brand-color) !important;
}

.btn-link {
    color: var(--brand-color) !important;
    text-decoration: none;
    font-weight: 300;
    font-size: 14px;
}

ul.dropdown-menu  li a.dropdown-item:hover, ul.dropdown-menu  li button:hover,
ul.dropdown-menu  li a.dropdown-item:focus
{
    background: var(--brand-color) !important;
    color: #FFF;
}

[data-bs-toggle="collapse"].collapsed .if-not-collapsed {
    display: none;
}
[data-bs-toggle="collapse"]:not(.collapsed) .if-collapsed {
    display: none;
}

/* Begin: Accordion */

.accordion-button
{
    padding-top: 11px;
    padding-bottom: 11px;
}

.dark.accordion-button:after,
.primary.accordion-button:after {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !important;
}

/* End */

    /*
    #reportAttachment .e-upload-files {
        display: none;
    }
    */

/* Begin: Ribbon */
/*.parent {*/
/*    overflow: hidden; !* required *!*/
/*    height: 250px !* some non-zero number *!;*/
/*}*/

/*.ribbon {*/
/*    margin: 0;*/
/*    padding: 0;*/
/*    background: rgb(248,161,69);*/
/*    color:#FFF;*/
/*    padding:0.5em 0;*/
/*    position: absolute;*/
/*    top:0;*/
/*    right:0;*/
/*    transform: translateX(30%) translateY(0%) rotate(45deg);*/
/*    transform-origin: top left;*/
/*    text-transform: uppercase;*/
/*}*/
/*.ribbon:before,*/
/*.ribbon:after {*/
/*    content: '';*/
/*    position: absolute;*/
/*    top:0;*/
/*    margin: 0 -1px; !* tweak *!*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    background: rgb(248,161,69);*/
/*}*/
/*.ribbon:before {*/
/*    right:100%;*/
/*}*/

/*.ribbon:after {*/
/*    left:100%;*/
/*}*/
/* End: Ribbon */

.loading-orange {
    background-color: var(--brand-color);
    border-color: var(--brand-border-color);
    position: relative;
    overflow: hidden;
}

.loading-orange::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
            90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.35) 50%,
            transparent 100%
    );
    background-size: 200% 100%;
    animation: shimmer-brand 1.8s ease-in-out infinite;
}

@keyframes shimmer-brand {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.orange-without-hover {
    background-color: var(--brand-color);
    border-color: var(--brand-border-color);
}

.orange-without-hover:hover {
    background-color: var(--brand-color);
    border-color: var(--brand-border-color);
}

.orange-without-hover-subtle {
    background-color: var(--brand-color-with-opacity-1);
    border-color: var(--brand-border-color);
}

.orange-without-hover-subtle:hover {
    background-color: var(--brand-color-with-opacity-1);
    border-color: var(--brand-border-color);
}

.orange {
    background-color: var(--brand-color);
    border-color: var(--brand-border-color);
}

.orange:hover {
    background-color: var(--brand-border-color);
    border-color: var(--brand-border-color);
}

.chart-wrapper {
    margin-top: 10px;
    display: flex;
    flex-grow: 1;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
}

.echarts-container {
    height: 350px;
    width: 100%;
    flex-grow: 1;
}

.spinner-border {
    color: var(--brand-color);
}

.dashboard-item {
    background-color: #FFFFFF;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: "Lato", sans-serif;
    height: 100%;
}

.limit-text {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* number of lines to show */
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Markdown Editor styles */

.EasyMDEContainer .CodeMirror {
    font-weight: normal !important;
    font-size: 14px !important;
    height: auto !important;
    overflow: hidden !important;
}

.mde-instance-wrapper .EasyMDEContainer .CodeMirror-scroll {
    max-height: var(--mde-max-height);
    overflow-y: auto !important;
    padding-right: 8px;
}

.EasyMDEContainer {
    .editor-toolbar {
        background-color: #F8F9FA;
    }
}

.EasyMDEContainer .editor-toolbar button.table {
    width: auto;
}

.cm-header, .cm-strong {
    font-weight: normal;
}

.cm-em {
    font-style: normal;
}

.cm-s-easymde .cm-header-1, .cm-s-easymde .cm-header-2, .cm-s-easymde .cm-header-3, .cm-s-easymde .cm-header-4, .cm-s-easymde .cm-header-5  {
    font-size: inherit;
}

.cm-s-easymde .cm-link, .cm-s-easymde .cm-url {
    text-decoration: none;
    color: inherit;
}

.cm-s-easymde .cm-comment {
    background: none;
}

.cm-quote {
    color: inherit !important;
    font-style: normal;
}

.cm-tag {
    color: inherit !important;
}

.community-fund {
    background-color: rgba(var(--bs-success-rgb), 0.15) !important;
}

.community-fund-pill {
    background-color: rgba(var(--bs-success-rgb), 0.25) !important;
}

.mde-wrap { position: relative; }
.mde-disabled {
    opacity: .6;
    pointer-events: none;
    filter: grayscale(100%);
}

.mde-disabled :is(textarea, button, a, [tabindex]) {
    pointer-events: none;
}

.button {
    font-size: 12px;
    background-color: #FFFFFF;
    white-space: nowrap;
}

.button.active {
    background-color: var(--brand-color);
    color: #FFFFFF;
    border-color: var(--brand-color);
}

.bg-warning-overlay {
    background-color: #FFE797;
}

.bg-success-overlay {
    background-color: #90C67C;
}

.copy-button {
    position: absolute;
    right: 0.8rem;
    top: 55%;
    background-color: transparent;
    border: none;
}

.di-terms-policies {
    h1 {
        font-size: clamp(2rem, 5vw, 3.4rem);
        color: #fff;
        margin-bottom: clamp(1.6rem, 2.5vw, 3.2rem);
        font-weight: 900;
    }
    .text {
        h2 {
            margin-bottom: clamp(0.8rem, 2.5vw, 1.4rem);
            font-weight: 900;
            color: #fff;
        }
        ul {
            display: flex;
            flex-direction: column;
            gap: 0.4rem;
            list-style: none;
            padding: 0;
            margin-bottom: clamp(1.8rem, 3vw, 2rem);
            padding-bottom: clamp(1.8rem, 3vw, 2rem);
            border-bottom: 0.1rem solid #444;
            &:last-child {
                border-bottom: none;
            }
        }
        a {
            text-transform: uppercase;
        }
    }
}

.underline-link {
    text-decoration: none;
    position: relative;
    display: inline-flex;
    align-items: center;
    font-size: clamp(1.4rem, 3vw, 1.6rem);
    padding-bottom: 0.3rem;
    color: #fff;
    align-self: flex-start;

    &:after {
        display: block;
        content: '';
        width: 0;
        height: 0.1rem;
        background-color: #ff5400;
        position: absolute;
        bottom: 0;
        left: 0;
        transition: width 250ms ease-out;
    }

    &:hover {
        &:after {
            width: 100%;
        }
    }
}

/* BEGIN: ReconnectModel */
.components-reconnect-first-attempt-visible,
.components-reconnect-repeated-attempt-visible,
.components-reconnect-failed-visible,
.components-pause-visible,
.components-resume-failed-visible,
.components-rejoining-animation {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible,
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation,
#components-reconnect-modal.components-reconnect-paused .components-pause-visible,
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible,
#components-reconnect-modal.components-reconnect-retrying,
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible,
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible {
    display: block;
}

#components-reconnect-modal {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity 0.5s both;
    &[open]

    {
        animation: components-reconnect-modal-slideUp 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity 0.5s ease-in-out 0.3s;
        animation-fill-mode: both;
    }

}

#components-reconnect-modal:focus {
    outline: none !important;
}

#components-reconnect-modal::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button {
    border: 0;
    background-color: #ff5400;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

#components-reconnect-modal button:hover {
    background-color: #ff5400;
}

#components-reconnect-modal button:active {
    background-color: #ff5400;
}

.components-rejoining-animation {
    position: relative;
    width: 80px;
    height: 80px;
}

.components-rejoining-animation div {
    position: absolute;
    border: 3px solid #ff5400;
    opacity: 1;
    border-radius: 50%;
    animation: components-rejoining-animation 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

.components-rejoining-animation div:nth-child(2) {
    animation-delay: -0.5s;
}

@keyframes components-rejoining-animation {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* END: ReconnectModel */

.program-grid-view > div {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
    margin-block: 0.75rem !important;
}

.program-grid-view .card {
    min-width: 0; /* Prevents grid blowout */
    min-height: 335px;
}

.program-list-view > ul {
    padding: 0;
}

.program-list-view > ul > li {
    padding: 0;
    margin-inline: 0;
    margin-block: 0.75rem !important;
}

.program-grid.program-hidden {
    opacity: 0.5;
}

.program-list.program-hidden {
    opacity: 0.5;
}

@media (max-width: 1063px) {
    .program-list-left-body,
    .program-list-card-body-flex,
    .program-list-container-flex {
        display: block !important;
    }
    
    .program-list-icons,
    .program-list-pills {
        margin-top: 0.5rem !important;
    }
    
    .program-list-buttons {
        padding: 0.75rem !important;
        justify-content: end !important;
    }
}

.ribbon-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    overflow: hidden;
    width: 128px;
    height: 128px;
    pointer-events: none;
}

.ribbon-large {
    position: absolute;
    top: 24px;
    left: -42px;
    width: 160px;
    text-align: center;
    color: white;
    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.5rem 0;
    transform: rotate(-45deg);
    box-shadow: 0 4px 6px rgba(0,0,0,0.3), inset 0 -2px 4px rgba(0,0,0,0.2);
}

.ribbon-small {
    position: absolute;
    top: 15px;
    left: -40px;
    width: 130px;
    text-align: center;
    color: white;
    font-size: 0.6rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.3rem 0;
    transform: rotate(-45deg);
    box-shadow: 0 4px 6px rgba(0,0,0,0.3), inset 0 -2px 4px rgba(0,0,0,0.2);
}

.new-program-bg {
    background-color: rgb(59, 130, 246); /* Blue */
}

.updated-program-bg {
    background-color: rgb(167,139,250); /* Purple */
}

.boosted-program-bg {
    background-color: rgb(16, 185, 129); /* Green */
}

.public-program-bg {
    background-color: #f5f5f5;
}

.private-program-bg {
    background-color: #e6f0fa;
}

.search-bar-icon:hover {
    color: black !important;
}

.icon-grid-parent {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
    gap: 4px;
    margin-inline: -6px;
}

.icon-bg {
    background-color: #fafafa;
    padding: 8px;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    word-wrap: break-word;
}

.icon-content {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 4px;
    width: 100%;
    text-align: center;
    min-height: 24px;
}

/* Prevent the icon from shrinking */
.icon-content i {
    flex-shrink: 0;
}

.icon-content span {
    font-size: 15px;
}

.icon-label {
    font-size: 0.75rem;
    color: #6c757d;
    margin-top: 2px;
    text-align: center;
}

.text-truncate-dynamic {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    
    flex: 0 1 auto; /* Allow shrinking (1) */
    min-width: 0;   /* Allow shrinking past content size */
    max-width: 100%;
}

.icon-bg.has-tooltip {
    cursor: pointer;
    transition: opacity 0.2s ease-in-out;
}

.program-list-icon.has-tooltip {
    cursor: pointer;
    transition: opacity 0.2s ease-in-out;
}

.icon-bg.has-tooltip:hover {
    opacity: 0.8;
}

.program-list-icon.has-tooltip:hover {
    opacity: 0.8;
}

.custom-tooltip-container {
    position: relative;
    display: inline-block;
    min-width: 0;
}

.custom-tooltip {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
    transform: translateX(-50%) translateY(10px);
    position: absolute;
    bottom: 110%;
    left: 50%;
    width: 150px;
    background-color: white;
    color: black;
    text-align: center;
    border-radius: 8px;
    padding: 10px;
    z-index: 999;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
    border: 1px solid #f5f5f5;
    margin-top: 4px;
}

.custom-tooltip-right {
    left: auto;
    right: -10px;
    transform: translateY(10px);
}

.program-list-icons > .custom-tooltip-container > .custom-tooltip {
    bottom: 150%;
}

.custom-tooltip-container:hover .custom-tooltip {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.custom-tooltip-container:hover .custom-tooltip-right {
    transform: translateY(0);
}

.tooltip-header {
    font-weight: 500;
    font-size: 0.85rem;
    letter-spacing: 0.05rem;
    color: black;
    padding-bottom: 4px;
}

.tooltip-body {
    font-size: 0.8rem;
}

.tooltip-arrow {
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: rgb(245, 247, 250) transparent transparent transparent;
}

.custom-tooltip-right .tooltip-arrow {
    left: auto;
    right: 12px;
    margin-left: 0;
}

.clear-all-filters-button:hover {
    text-decoration: underline;
}

.program-grid-view.has-changed, .program-list-view.has-changed {
    animation: simpleFadeIn 0.67s ease-in-out;
}

@keyframes simpleFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.program-card-link {
    text-decoration: none;
    color: inherit;
}

.program-card-link:hover .underline-on-hover {
    text-decoration: underline;
}

@media (min-width: 1464px) {
    .triage-report-control-panel-col-custom-6 {
        flex: 0 0 auto;
        width: 50%;
    }

    .triage-report-control-panel-flex-custom-row {
        flex-direction: row !important;
    }

    .triage-report-control-panel-align-items-custom-end {
        align-items: flex-end !important;
    }

    .triage-report-control-panel-justify-content-custom-end {
        justify-content: flex-end !important;
    }
}

/* ASM page BEGIN */

.min-width-0 {
    min-width: 0;
}

@media (min-width: 1200px) {
    .col-xl-2half {
        width: 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }
}

.subdomain-item {
    cursor: pointer;
}

.port-pill {
    font-size: 0.75rem;
    font-weight: 500;
    background-color: #e9ecef;
    color: #495057;
    padding: 2px 8px;
    border-radius: 12px;
    white-space: nowrap;
}

.hover-danger {
    transition: color 0.2s ease-in-out;
}

.hover-danger:hover {
    color: #dc3545 !important;
    cursor: pointer;
}

.centered-pager-with-summary {
    position: relative;
    display: flex;
    justify-content: center;
    min-height: 45px;
}

/* Pin the summary to the right */
.centered-pager-with-summary .rz-pager-summary {
    position: absolute;
    right: 1rem;
    margin: 0 !important;
    height: 100%;
    display: flex;
    align-items: center;
    white-space: nowrap;
    color: #6c757d; /* text-muted color */
}

/* Ensure Radzen's internal pager items don't try to pull left */
.centered-pager-with-summary .rz-pager-items {
    margin: 0 auto !important;
}

.port-card {
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
    z-index: 1;
    overflow: hidden;
}

.port-card:hover {
    background-color: rgba(0, 0, 0, 0.03);
    z-index: 2;
}

.accordion-header {
    border-radius: 8px !important;
    transition: background-color 0.2s ease-in-out;
}

.accordion-header:hover {
    background-color: rgba(0, 0, 0, 0.03);
    cursor: pointer;
}

.screenshot-wrapper {
    width: 80px;
    align-self: stretch;
    overflow: hidden;
    cursor: zoom-in;
    transition: filter 0.2s;
}

.screenshot-wrapper-lg {
    width: 170px;
    height: 100%;
    overflow: hidden;
    cursor: zoom-in;
    transition: filter 0.2s;
}

.screenshot-wrapper:hover, .screenshot-wrapper-lg:hover {
    filter: brightness(0.9);
}

.port-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.port-thumbnail-placeholder {
    width: 100%;
    height: 100%;
    background: #f1f3f5;
}

.port-view-btn {
    transition: opacity 0.2s ease-in-out;
}

.port-view-btn:hover {
    opacity: 0.7;
}

.port-details-dialog-content {
    display: flex !important;
    flex-direction: column !important;
    height: 100vh !important;
    padding: 1rem !important;
}

/* Compliance tab: decoded HTTP request/response evidence.
   The panes are built in PortDetailsComponent.razor; only the traffic itself
   (mark, .snip) is markup from the AI Defender API. */

/* Header of a collapsed URL. Should read as a control, not a caption. */
.compliance-evidence-toggle {
    cursor: pointer;
    background-color: var(--bs-secondary-bg);
}

.compliance-evidence-exchange {
    margin-bottom: 1rem;
}

.compliance-evidence-exchange:last-child {
    margin-bottom: 0;
}

.compliance-evidence-caption {
    font-size: 0.78rem;
    font-style: italic;
    color: #555;
    margin-bottom: 0.4rem;
}

.compliance-evidence-url {
    font-family: var(--bs-font-monospace);
    font-size: 0.72rem;
    color: #2980b9;
    word-break: break-all;
    margin-bottom: 0.4rem;
}

.compliance-evidence-label {
    font-family: var(--bs-font-monospace);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #888;
    margin: 6px 0 3px;
}

/* Anchors the copy button inside the traffic box. */
.compliance-evidence-block {
    position: relative;
}

.compliance-evidence-copy {
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    z-index: 2;
    padding: 0.35rem 0.5rem;
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
    color: var(--bs-secondary-color);
    background-color: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--bs-border-color);
    border-radius: 4px;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.compliance-evidence-copy:hover:not(:disabled) {
    color: var(--brand-color);
    border-color: var(--brand-border-color);
}

.compliance-evidence-copy:disabled {
    opacity: 0.35;
    cursor: default;
}

.compliance-evidence pre.http {
    font-family: var(--bs-font-monospace);
    font-size: 0.72rem;
    color: #222;
    background: #fafafa;
    border: 1px solid var(--bs-border-color);
    border-radius: 4px;
    padding: 10px;
    /* Room for the copy button so long header lines do not run underneath it. */
    padding-right: 3rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 260px;
    overflow: auto;
    margin-bottom: 0;
}

.compliance-evidence pre.http mark {
    background: #fff3b0;
    color: #000;
    padding: 0 1px;
}

.compliance-evidence pre.http .snip {
    color: #999;
    font-style: italic;
}

/* Compliance tab: indicators that no longer appear in the latest scan. */
.compliance-past-section {
    border-top: 1px solid var(--bs-border-color);
    padding-top: 0.5rem;
}

.compliance-past-section > [data-bs-toggle="collapse"] {
    border-radius: 4px;
}

.compliance-past-section > [data-bs-toggle="collapse"]:hover {
    background-color: var(--bs-secondary-bg);
}

.compliance-past-section .accordion {
    opacity: 0.85;
}

/* ASM page END */

/* AI Defender page BEGIN */

/* A partial task: part-way to confirmed, so a soft blue rather than confirmed's green. */
.task-status-partial {
    color: #fff;
    background-color: #5a8dc8;
}

/* A partial task's status icon, in its pill's blue. */
.text-task-partial {
    color: #5a8dc8;
}

/* Chevron rotation driven by aria-expanded set by Bootstrap */
[data-bs-toggle="collapse"][aria-expanded="true"] .collapsible-chevron {
    transform: rotate(90deg);
    transition: transform 0.2s ease;
}

[data-bs-toggle="collapse"][aria-expanded="false"] .collapsible-chevron {
    transform: rotate(0deg);
    transition: transform 0.2s ease;
}

/* Remove old details/summary rules if present */
.collapsible-block summary::-webkit-details-marker { display: none; }
.collapsible-block summary::marker { display: none; }

/* Brief text in the execution logs. It comes through the markdown sanitizer, so paragraphs and
   lists need reining in to sit inside the compact task detail. */
/* A severity the AI Defender rated but could not confirm: outlined in the severity colour instead
   of filled, with the word "unconfirmed", so it never reads as a confirmed finding.
   --severity-pill-color is set inline from the severity. */
.severity-pill-unconfirmed {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: #212529;
    background-color: #fff;
    border: 1px dashed var(--severity-pill-color);
}

.severity-pill-unconfirmed-icon {
    color: var(--severity-pill-color);
}

.severity-pill-unconfirmed-label {
    font-weight: 400;
    color: #6c757d;
}

/* The same explanation spelled out inside the task, under its severities. */
.severity-unconfirmed-note {
    padding: 0.35rem 0.6rem;
    color: #495057;
    background-color: #fff;
    border-left: 3px solid var(--severity-pill-color);
    border-radius: 0 4px 4px 0;
}

.severity-unconfirmed-note > i {
    color: var(--severity-pill-color);
}

/* A dark command block with its copy button tucked into the top-right corner. */
.code-copy-block {
    position: relative;
}

/* Beats Bootstrap's .p-2 so long commands do not run underneath the button. */
.code-copy-block > pre {
    padding-right: 2.6rem !important;
}

.code-copy-button {
    position: absolute;
    top: 0.35rem;
    right: 0.35rem;
    z-index: 2;
    padding: 0.3rem 0.4rem;
    font-size: 0.8rem;
    line-height: 1;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.7);
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.code-copy-button:hover:not(:disabled) {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.18);
}

.code-copy-button:disabled {
    opacity: 0.35;
    cursor: default;
}

/* "Expand all" / "Collapse all" on the right of a section header. */
.collapse-group-toggle {
    font-size: 0.72rem;
    font-weight: 500;
    text-transform: none;
    text-decoration: none;
    color: var(--bs-secondary-color);
    white-space: nowrap;
}

.collapse-group-toggle:hover,
.collapse-group-toggle:focus-visible {
    color: var(--brand-color);
}

.ai-task-brief > :last-child {
    margin-bottom: 0;
}

.ai-task-brief p {
    margin-bottom: 0.5rem;
}

.ai-task-brief ul,
.ai-task-brief ol {
    padding-left: 1.1rem;
    margin-bottom: 0.5rem;
}

.ai-task-brief code {
    font-size: 0.9em;
    padding: 0.05rem 0.25rem;
    border-radius: 3px;
    background-color: var(--bs-secondary-bg);
    word-break: break-word;
}

/* AI Defender results summary --------------------------------------------- */

.ai-summary-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.25rem 0.7rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 999px;
    background-color: var(--bs-body-bg);
    font-size: 0.78rem;
    white-space: nowrap;
}

.ai-summary-chip-label {
    color: var(--bs-secondary-color);
}

.ai-summary-chip-value {
    font-weight: 600;
    color: var(--bs-body-color);
}


.ai-summary-section {
    margin-bottom: 1.5rem;
}

.ai-summary-section:last-child {
    margin-bottom: 0;
}

.ai-summary-heading {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--bs-body-color);
    margin-bottom: 0.6rem;
}

/* Shared body type for every rendered markdown block in the summary. */
.ai-summary-body {
    font-size: 0.92rem;
    line-height: 1.7;
    color: #4a4f55;
}

.ai-summary-body-sm {
    font-size: 0.85rem;
    line-height: 1.6;
}

.ai-summary-body > :last-child {
    margin-bottom: 0;
}

.ai-summary-body strong {
    color: var(--bs-body-color);
    font-weight: 600;
}

/* The summaries are model-written markdown, so any heading level can turn up -- a "### Phase 0"
   would otherwise land on Bootstrap's h3 and tower over the text around it. Sized in em so they
   stay in proportion in the smaller detailed-summary variant too. */
.ai-summary-body h1,
.ai-summary-body h2,
.ai-summary-body h3,
.ai-summary-body h4,
.ai-summary-body h5,
.ai-summary-body h6 {
    font-size: 1em;
    font-weight: 600;
    color: var(--bs-body-color);
    margin: 1rem 0 0.35rem;
}

.ai-summary-body > :first-child {
    margin-top: 0;
}

.ai-summary-body ul,
.ai-summary-body ol {
    padding-left: 1.3rem;
    margin-bottom: 0.75rem;
}

.ai-summary-body li {
    margin-bottom: 0.5rem;
}

.ai-summary-body li:last-child {
    margin-bottom: 0;
}

.ai-summary-body code {
    font-size: 0.85em;
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
    background-color: var(--bs-secondary-bg);
    color: var(--bs-body-color);
    word-break: break-word;
}

.ai-summary-body pre {
    background-color: var(--bs-secondary-bg);
    border-radius: 4px;
    padding: 0.75rem;
    overflow-x: auto;
}

.ai-summary-body pre code {
    padding: 0;
    background: none;
}

.ai-summary-body table {
    width: 100%;
    margin-bottom: 0.75rem;
    font-size: 0.85em;
    border-collapse: collapse;
}

.ai-summary-body th,
.ai-summary-body td {
    border: 1px solid var(--bs-border-color);
    padding: 0.35rem 0.6rem;
    text-align: left;
}

.ai-summary-body th {
    background-color: var(--bs-secondary-bg);
    font-weight: 600;
}

/* A card header that is also its card's toggle: the engagement plan once the AI Defender has run,
   and the execution logs once the run is finished. */
.card-header-toggle {
    cursor: pointer;
    color: var(--bs-body-color);
    transition: background-color 0.15s ease;
}

.card-header-toggle:hover,
.card-header-toggle:focus-visible {
    background-color: rgba(var(--bs-secondary-rgb), 0.16) !important;
}

/* "What was tested": each outcome is a box of its own, so it is plain which checks belong to a group
   once it is open. */
.ai-tested-group {
    border: 1px solid var(--bs-border-color);
    border-radius: 10px;
    background-color: var(--bs-body-bg);
    overflow: hidden;
}

.ai-tested-group-heading {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    padding: 0.8rem 1rem;
    text-align: left;
    color: var(--bs-body-color);
    background: none;
    border: 0;
}

.ai-tested-group-heading:hover,
.ai-tested-group-heading:focus-visible {
    background-color: rgba(var(--bs-secondary-rgb), 0.06);
}

/* Open: the heading is ruled off, so the checks under it read as its contents. */
.ai-tested-group-heading:not(.collapsed) {
    border-bottom: 1px solid var(--bs-border-color);
}

.ai-tested-group-heading .collapsible-chevron {
    width: 0.6rem;
    font-size: 0.6rem;
    color: var(--bs-secondary-color);
}

.ai-tested-group-icon {
    color: var(--ai-outcome-color, var(--bs-secondary-color));
}

.ai-tested-group-title {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-width: 0;
}

.ai-tested-group-label {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ai-tested-group-meaning {
    font-size: 0.8rem;
    color: var(--bs-secondary-color);
}

.ai-tested-group-count {
    min-width: 1.8rem;
    padding: 0.1rem 0.55rem;
    font-size: 0.8rem;
    font-weight: 700;
    text-align: center;
    color: var(--bs-body-color);
    background-color: var(--bs-secondary-bg);
    border-radius: 999px;
}

/* The checks inside an open group, set in under its heading. */
.ai-tested-group-collapse > .ai-tested-tasks {
    padding: 0.25rem 0.75rem 0.5rem 1.5rem;
}

/* The phase a check belongs to, under its name. */
.ai-tested-phase {
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
}

/* An opened check's details sit in a tinted panel of their own, below their row. */
.ai-tested-tasks .accordion-collapse > .accordion-body {
    margin: 0 0 0.75rem;
    border-radius: 8px;
    background-color: var(--bs-tertiary-bg);
}

/* The tested tasks' accordion, under its group heading. */
.ai-tested-tasks {
    margin-bottom: 0;
}

/* A task's details start under its title, not under the chevron ahead of it. */
.ai-tested-tasks .accordion-body {
    padding-left: calc(var(--bs-accordion-btn-padding-x) + 1.45rem);
}

@media (max-width: 576px) {
    .ai-tested-location {
        display: none;
    }
}

/* Each method step is its own sanitized markdown, which wraps it in a paragraph; without this every
   step carries a paragraph's spacing and the list reads as double-spaced. */
.ai-task-brief-steps li > p {
    margin-bottom: 0;
}

.ai-task-brief-steps li + li {
    margin-top: 0.2rem;
}

/* A section label inside a task -- "Weakness name", "Evidence" and the rest -- in the execution logs
   and "What was tested". Sized to sit with the labels inside the evidence ("COMMAND", "OUTPUT"). */
.ai-detail-label {
    font-size: 0.7rem;
    letter-spacing: 0.04em;
}

/* Bootstrap accordions on the engagement plan, the execution logs and "What was tested": neutral
   rather than Bootstrap's blue, with the brand colour for keyboard focus only. */
.ai-accordion {
    --bs-accordion-color: var(--bs-body-color);
    --bs-accordion-btn-color: var(--bs-body-color);
    --bs-accordion-active-color: var(--bs-body-color);
    --bs-accordion-active-bg: transparent;
    --bs-accordion-border-color: var(--bs-border-color);
    --bs-accordion-btn-padding-x: 1rem;
    --bs-accordion-btn-padding-y: 0.7rem;
    --bs-accordion-body-padding-x: 1rem;
    --bs-accordion-body-padding-y: 0.9rem;
    --bs-accordion-btn-icon-width: 0.85rem;
    --bs-accordion-btn-focus-box-shadow: none;
}

/* Bootstrap's own chevron is swapped for the Font Awesome one the summary findings use, which
   points right and turns to point down as its item opens (see .collapsible-chevron). */
.ai-accordion .accordion-button::after {
    display: none;
}

.ai-accordion-chevron {
    flex-shrink: 0;
    width: 0.7rem;
    margin-right: 0.75rem;
    font-size: 0.7rem;
    text-align: center;
    color: var(--bs-secondary-color);
}

/* The same chevron on the right-hand side of the header instead. */
.ai-accordion-chevron.ai-accordion-chevron-end {
    margin-right: 0;
    margin-left: 0.75rem;
}

.ai-accordion .accordion-button {
    font-size: 0.92rem;
}

/* Lets long titles wrap instead of pushing the chevron out of the header. */
.ai-accordion .accordion-button > .w-100 {
    min-width: 0;
}

/* The line under an open header sits on the body instead, so a header with a checkbox beside its
   button (the plan) is divided along its full width, not just under the button. */
.ai-accordion .accordion-button:not(.collapsed) {
    box-shadow: none;
}

.ai-accordion .accordion-collapse {
    border-top: 1px solid var(--bs-accordion-border-color);
}

.ai-accordion .accordion-button:focus-visible {
    box-shadow: 0 0 0 0.2rem var(--brand-color-with-opacity-2);
}

/* The global .accordion-header rounds every header; inside an item that would round an open
   header's bottom corners into the body below it. */
.ai-accordion .accordion-header {
    border-radius: 0 !important;
}

/* A task inside a phase: a step smaller, so the two levels read apart. */
.ai-accordion-nested {
    --bs-accordion-btn-padding-x: 0.9rem;
    --bs-accordion-btn-padding-y: 0.55rem;
    --bs-accordion-body-padding-x: 0.9rem;
    --bs-accordion-body-padding-y: 0.8rem;
}

.ai-accordion-nested .accordion-button {
    font-size: 0.875rem;
}

/* A header with a control of its own ahead of the toggle -- the plan's phase checkbox. */
.ai-accordion-header-with-lead {
    display: flex;
    align-items: center;
}

.ai-accordion-lead {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding-left: var(--bs-accordion-btn-padding-x);
}

.ai-accordion-header-with-lead .accordion-button {
    flex: 1 1 auto;
    min-width: 0;
    padding-left: 0.75rem;
}

/* A header with nothing to open: no pointer, and the chevron's space kept so it lines up. */
.ai-accordion-static {
    cursor: default;
}

.ai-accordion-static .ai-accordion-chevron {
    visibility: hidden;
}

/* A plain list rather than boxes: only dividers between items, and no line under an open header.
   Used where items sit inside something that is already framed -- the tasks within a phase, and
   the phases within the execution logs card. */
.ai-accordion-quiet .accordion-collapse {
    border-top: 0;
}

.ai-accordion-quiet {
    --bs-accordion-btn-bg: transparent;
}

.ai-accordion-quiet > .accordion-item {
    background-color: transparent;
}

/* Where a running run has got to, under its progress bar. */
.ai-run-now {
    color: var(--bs-body-color);
}

.ai-run-now-label {
    font-weight: 600;
    color: var(--brand-color);
}

/* A note under a running run's progress: what the logs are, or that the results are being finalized. */
.ai-run-note {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--bs-body-color);
    background-color: var(--bs-secondary-bg);
    border-radius: 8px;
}

.ai-run-note > i {
    margin-top: 0.2rem;
    color: var(--bs-secondary-color);
}

/* While the results are being finalized the note is the main news, so it carries the brand tint. */
.ai-run-note-active {
    background-color: var(--brand-color-with-opacity-1);
}

.ai-run-note-active > i {
    color: var(--brand-color);
}

/* Beside the execution logs' title while the run is in progress: nothing in them is final yet. */
.ai-preliminary-badge {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--brand-color);
    background-color: var(--brand-color-with-opacity-1);
    border: 1px solid var(--brand-color-with-opacity-2);
}

/* Technical summary, split into collapsible panels. */
.ai-detail-section + .ai-detail-section {
    border-top: 1px solid var(--bs-border-color);
}

.ai-detail-section-toggle {
    font-size: 0.9rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.65rem 0;
    background: none;
    border: none;
    text-align: left;
    color: var(--bs-body-color);
}

.ai-detail-section-toggle:hover {
    color: var(--brand-color);
}

/* AI Defender page END */

.thinking-word {
    display: inline-block;
    color: var(--bs-secondary-color);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.thinking-word.visible {
    opacity: 1;
    transform: translateY(0);
}

.thinking-word.hidden {
    opacity: 0;
    transform: translateY(-4px);
}
/* Security Report Generator START */

.workspace {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-top: 1rem;
    align-items: stretch;
}

.workspace-panel {
    display: flex;
    flex-direction: column;
    min-height: 1200px;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}

.panel-label {
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    padding: 0.6rem 1rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #495057;
}

.panel-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.empty-panel {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #adb5bd;
    text-align: center;
}

.private-report-row td {
    background-color: rgba(220, 53, 69, 0.15) !important;
}

.private-draft-row td {
    background-color: rgb(59 220 53 / 0.15) !important;
}

/* Security Report Generator END */

.securitytxt-box {
    background: rgb(246, 246, 246);
    color: black;
    padding: 1rem;
    border-radius: 6px;
    font-size: 0.85rem;
    overflow-x: auto;
    border: 1px solid #1e293b;
}

.securitytxt-box pre {
    margin: 0;
    white-space: pre-wrap;
}

.text-orange-emphasis {
    color: var(--brand-color) !important;
}

.border-orange {
    border-color: var(--brand-border-color) !important;
}

.hover-info-box {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 999;
    width: 30rem;
}

.hover-info-icon:hover + .hover-info-box,
.hover-info-box:hover {
    display: block;
}

/* AI Defender pages: security posture, run list, run report --------------------------------------
   Severity colours arrive inline as custom properties (--ai-tile-color / --ai-tile-bg and the like),
   from IUtilitiesService, so they always match the severity pills. */

/* Outcome colours, shared by the outcome bar and the "What was tested" groups. */
.ai-outcome-confirmed { --ai-outcome-color: #e86664; }
.ai-outcome-not-confirmed { --ai-outcome-color: #e0a63a; }
.ai-outcome-ruled-out { --ai-outcome-color: #4c8f6f; }
.ai-outcome-not-run { --ai-outcome-color: #adb5bd; }

.ai-page {
    max-width: 1280px;
}

.ai-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    color: var(--bs-secondary-color);
}

.ai-breadcrumb .fa-chevron-right {
    font-size: 0.6rem;
}

.ai-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.ai-page-title {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
    color: var(--bs-body-color);
}

.ai-page-lead {
    max-width: 52rem;
    font-size: 0.92rem;
    color: var(--bs-secondary-color);
}

.ai-section-eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}

.ai-line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* A white card with a header row: the building block of the posture page. */
.ai-panel {
    border-radius: 12px;
    border-color: var(--bs-border-color);
    overflow: hidden;
}

.ai-panel-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.ai-panel-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--bs-body-color);
}

.ai-panel-hint {
    font-size: 0.78rem;
    color: var(--bs-secondary-color);
}

.ai-panel-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 1.25rem;
    text-align: center;
}

/* A panel that fills the height of its row, its body growing and its footer kept at the bottom. */
.ai-panel-fill {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.ai-panel-fill > .ai-latest-runs,
.ai-panel-fill > .ai-chart-body {
    flex-grow: 1;
}

.ai-panel-fill > .ai-panel-footer {
    margin-top: auto;
}

.ai-panel-footer {
    padding: 0.85rem 1.25rem;
    text-align: center;
    font-size: 0.88rem;
    border-top: 1px solid var(--bs-border-color);
}

/* Severity tiles: a count per severity, empty ones faded. */
.ai-severity-tiles {
    display: grid;
    grid-template-columns: repeat(5, minmax(4.25rem, 1fr));
    gap: 0.6rem;
}

.ai-severity-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.7rem 0.5rem;
    border: 1px solid var(--ai-tile-color);
    border-radius: 10px;
    background-color: color-mix(in srgb, var(--ai-tile-bg) 45%, #fff);
}

.ai-severity-tile-empty {
    opacity: 0.45;
}

.ai-severity-tile-count {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
    color: color-mix(in srgb, var(--ai-tile-color) 70%, #000);
}

.ai-severity-tile-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--ai-tile-color) 70%, #000);
}

/* Posture hero: ring, sentence, tiles. */
.ai-posture-hero {
    border-radius: 14px;
    border-color: var(--bs-border-color);
}

.ai-posture-hero > .card-body {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 2rem;
    padding: 1.75rem 2rem;
}

.ai-posture-donut {
    position: relative;
    width: 9rem;
    height: 9rem;
}

.ai-posture-donut-svg {
    width: 100%;
    height: 100%;
}

.ai-posture-donut-track {
    stroke: var(--bs-secondary-bg);
}

.ai-posture-donut-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.ai-posture-donut-count {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    color: var(--bs-body-color);
}

.ai-posture-donut-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}

.ai-posture-heading {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--bs-body-color);
    margin-bottom: 0.4rem;
}

.ai-posture-dot {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    background-color: var(--ai-posture-color, #adb5bd);
    flex-shrink: 0;
}

.ai-posture-detail {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #4a4f55;
    margin-bottom: 0;
}

.ai-posture-critical { --ai-posture-color: #FF4D4D; }
.ai-posture-high { --ai-posture-color: #FF9F5D; }
.ai-posture-elevated { --ai-posture-color: #FFD37D; }
.ai-posture-low { --ai-posture-color: #A9D6A9; }
.ai-posture-clear { --ai-posture-color: #1A9F47; }
.ai-posture-unknown { --ai-posture-color: #adb5bd; }

@media (max-width: 991px) {
    .ai-posture-hero > .card-body {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 1.25rem;
        padding: 1.25rem;
    }

    .ai-posture-hero .ai-posture-tiles {
        grid-column: 1 / -1;
    }
}

@media (max-width: 575px) {
    .ai-posture-hero > .card-body {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        text-align: center;
    }

    .ai-posture-heading {
        justify-content: center;
    }

    .ai-severity-tiles {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
    }
}

/* KPI tiles under the hero. */
.ai-kpi-tiles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.ai-kpi-tile {
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
    background-color: var(--bs-body-bg);
}

.ai-kpi-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    margin-bottom: 0.4rem;
}

.ai-kpi-value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--bs-body-color);
}

.ai-kpi-unit {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--bs-secondary-color);
}

.ai-kpi-bar {
    height: 6px;
    margin: 0.5rem 0;
    border-radius: 3px;
    background-color: var(--bs-secondary-bg);
    overflow: hidden;
}

.ai-kpi-bar > span {
    display: block;
    height: 100%;
    background-color: #4c8f6f;
}

.ai-kpi-note {
    font-size: 0.78rem;
    color: var(--bs-secondary-color);
}

@media (max-width: 991px) {
    .ai-kpi-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* "What needs attention now". */
.ai-attention-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: 0.85rem 1.25rem;
    text-align: left;
    color: inherit;
    text-decoration: none;
    background: none;
    border: 0;
}

/* A line between rows, also between the last row shown and the first behind "See all". */
.ai-attention-row + .ai-attention-row,
.ai-attention-more > .ai-attention-row:first-child {
    border-top: 1px solid var(--bs-border-color);
}

.ai-attention-row:hover {
    background-color: rgba(var(--bs-secondary-rgb), 0.05);
}

.ai-attention-tag {
    flex-shrink: 0;
    width: 5rem;
    padding: 0.2rem 0;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-align: center;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--ai-tile-color) 65%, #000);
    background-color: color-mix(in srgb, var(--ai-tile-bg) 50%, #fff);
    border: 1px solid var(--ai-tile-color);
    border-radius: 6px;
}

/* The old severity pill, in a column of its own so the rows' titles line up. */
.ai-attention-severity {
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    width: 5rem;
}

.ai-attention-tag-action,
.ai-attention-tag-busy {
    color: var(--brand-color);
    background-color: var(--brand-color-with-opacity-1);
    border-color: var(--brand-color-with-opacity-2);
}

/* A run in progress, in the "In progress" list: its progress bar beside it. */
.ai-in-progress-bar {
    display: flex;
    flex: 0 1 14rem;
    align-items: center;
    gap: 0.6rem;
}

.ai-in-progress-bar .progress {
    flex-grow: 1;
}

@media (max-width: 575px) {
    .ai-in-progress-bar {
        display: none;
    }
}

.ai-attention-main {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-width: 0;
}

.ai-attention-title {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--bs-body-color);
}

.ai-attention-meta {
    font-size: 0.78rem;
    color: var(--bs-secondary-color);
}

/* Rows that lead somewhere end in a chevron. */
.ai-attention-chevron {
    flex-shrink: 0;
    font-size: 0.7rem;
    color: var(--bs-secondary-color);
}

/* "Latest runs" and the monthly chart. */
.ai-latest-run {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.7rem 1.25rem;
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid var(--bs-border-color);
}

.ai-latest-run:last-child {
    border-bottom: 0;
}

.ai-latest-run:hover {
    background-color: rgba(var(--bs-secondary-rgb), 0.05);
}

.ai-latest-run-headline {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--bs-body-color);
}

/* Meta on the left, outcome bar on the right, always on one line under the headline: a long host is
   cut short (the whole of it is in the tooltip) rather than pushing the bar onto a line of its own. */
.ai-latest-run-line {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.ai-latest-run-meta {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
}

.ai-latest-run-result {
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
}

@media (max-width: 575px) {
    .ai-latest-run-line {
        flex-wrap: wrap;
    }
}

.ai-chart-body {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0.75rem 0.75rem;
}

/* Sized by the card it fills, never smaller than a readable chart. */
.ai-chart-container {
    flex: 1 1 auto;
    width: 100%;
    min-height: 260px;
}

/* The outcome bar: a run's checks split by how they ended. */
.ai-outcome {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 1rem;
}

.ai-outcome-bar {
    display: flex;
    flex: 0 1 16rem;
    align-items: center;
    min-width: 8rem;
    height: 8px;
    gap: 2px;
}

.ai-outcome-compact .ai-outcome-bar {
    height: 6px;
    flex-basis: 14rem;
}

/* A stretch of the bar: rounded at the bar's ends, a little taller on hover, with its breakdown above. */
.ai-outcome-segment {
    position: relative;
    min-width: 4px;
    height: 100%;
    background-color: var(--ai-outcome-color);
    transition: height 0.15s ease;
    cursor: default;
    outline: none;
}

.ai-outcome-segment:first-child {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.ai-outcome-segment:last-child {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.ai-outcome-segment:hover,
.ai-outcome-segment:focus-visible {
    height: 180%;
}

.ai-outcome-tip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 7.5rem;
    padding: 0.45rem 0.65rem;
    font-size: 0.76rem;
    line-height: 1.35;
    white-space: nowrap;
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, 4px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.ai-outcome-segment:hover .ai-outcome-tip,
.ai-outcome-segment:focus-visible .ai-outcome-tip {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.ai-outcome-tip-title {
    margin-bottom: 0.1rem;
}

.ai-outcome-tip-line {
    color: var(--bs-secondary-color);
}

.ai-outcome-caption {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: var(--bs-body-color);
}

.ai-outcome-caption strong {
    font-weight: 700;
}

.ai-outcome-caption-separator {
    color: var(--bs-border-color);
}

/* A run's verdict badge: "1 high found", "Clean", "Limited". */
.ai-run-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.55rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    white-space: nowrap;
    text-transform: uppercase;
    border: 1px solid transparent;
    border-radius: 6px;
}

.ai-run-badge-found {
    color: color-mix(in srgb, var(--ai-run-badge-color) 65%, #000);
    background-color: color-mix(in srgb, var(--ai-run-badge-bg) 50%, #fff);
    border-color: var(--ai-run-badge-color);
}

/* In What was tested and the execution logs, a severity sits beside Bootstrap badges -- the task's
   status, a partial or inconclusive severity -- so it takes their size. */
.ai-tested-card .ai-run-badge,
.ai-log-card .ai-run-badge {
    padding: 0.35em 0.65em;
    font-size: 0.75em;
    line-height: 1;
    letter-spacing: 0.03em;
    border-radius: var(--bs-badge-border-radius, 0.375rem);
}

/* Every severity a run confirmed, one badge each: side by side in lists, stacked in the sidebar. */
.ai-run-badges {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.ai-run-badges-stacked {
    flex-direction: column;
    align-items: flex-start;
}

/* A severity that was not confirmed: the same chip, white and outlined in dashes, like the partial
   and inconclusive pills. */
.ai-run-badge-unconfirmed {
    color: #212529;
    background-color: #fff;
    border: 1px dashed var(--ai-run-badge-color);
}

/* Nothing found is not the same as safe, so it is neutral rather than green. */
.ai-run-badge-clean { color: #495057; background-color: var(--bs-tertiary-bg); border-color: var(--bs-border-color); }
.ai-run-badge-limited { color: #5c636a; background-color: var(--bs-secondary-bg); border-color: var(--bs-border-color); }
.ai-run-badge-running { color: var(--brand-color); background-color: var(--brand-color-with-opacity-1); border-color: var(--brand-color-with-opacity-2); }
.ai-run-badge-failed { color: #9b2c2c; background-color: #fbe9e9; border-color: #f0c4c4; }
.ai-run-badge-cancelled { color: #5c636a; background-color: var(--bs-secondary-bg); border-color: var(--bs-border-color); }

/* Plans waiting on someone, one compact line each, in a single card. */
/* Each plan its own card, like the runs below it, so the two lists look and respond alike. */
.ai-plan-rows,
.ai-plan-rows-more {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ai-plan-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.6rem 1.1rem;
    color: inherit;
    text-decoration: none;
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
    transition: box-shadow 0.15s ease;
}

.ai-plan-row:hover {
    color: inherit;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.ai-plan-row-state {
    flex-shrink: 0;
    width: 5.2rem;
    padding: 0.1rem 0;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-align: center;
    text-transform: uppercase;
    border: 1px solid transparent;
    border-radius: 6px;
}

.ai-plan-row-ready .ai-plan-row-state { color: #2f6e50; background-color: #e3f1ea; border-color: #b9dccb; }
.ai-plan-row-writing .ai-plan-row-state { color: var(--brand-color); background-color: var(--brand-color-with-opacity-1); border-color: var(--brand-color-with-opacity-2); }
.ai-plan-row-failed .ai-plan-row-state { color: #9b2c2c; background-color: #fbe9e9; border-color: #f0c4c4; }

.ai-plan-row-main {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 0.6rem;
    flex-grow: 1;
    min-width: 0;
}

.ai-plan-row-target {
    font-size: 0.88rem;
    color: var(--bs-body-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-plan-row-meta {
    font-size: 0.78rem;
    color: var(--bs-secondary-color);
}

.ai-review-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.55rem;
    font-size: 0.72rem;
    font-weight: 600;
    border-radius: 999px;
}

.ai-review-pill-ack { color: #2f6e50; background-color: #e3f1ea; }
.ai-review-pill-triage { color: #5c636a; background-color: var(--bs-secondary-bg); }

/* A run both acknowledged and sent to triage shows both pills, side by side. */
.ai-review-pills {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
}

/* The run list. */
.ai-runs-filters {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.ai-runs-filters-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
}

/* The search has its row to itself. */
.ai-runs-filters-row > .search-bar.ai-runs-search-bar {
    flex: 1 1 100%;
}

/* The Plans & runs search bar, sharing the filter row. */
.search-bar.ai-runs-search-bar {
    flex: 1 1 18rem;
    width: auto;
}

.ai-runs-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.ai-chip {
    padding: 0.4rem 0.85rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 10px;
}

.ai-chip:hover {
    border-color: var(--bs-secondary-color);
}

.ai-chip.active {
    color: #fff;
    background-color: #212529;
    border-color: #212529;
}

/* "Runs", under the plans waiting for you, so the two lists read apart. */
.ai-runs-section-label {
    margin: 1.5rem 0 0.75rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--bs-body-color);
}

/* The first section on the page sits right under the tabs. */
.ai-runs-section-label-first {
    margin-top: 0;
}

/* Which plan a run carried out, in its meta line. */
.ai-run-plan-tag {
    padding: 0.05rem 0.4rem;
    font-size: 0.72rem;
    color: var(--bs-body-color);
    background-color: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 4px;
}

.ai-runs-group-label {
    margin-bottom: 0.6rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}

.ai-run-progress-bar {
    height: 12px;
    border-radius: 6px;
}

.ai-run-progress-bar-sm {
    height: 6px;
    max-width: 16rem;
}

/* Run report: run switcher and hero. */
.ai-run-switcher {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.55rem 1rem;
    font-size: 0.85rem;
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 10px;
}

.ai-run-switcher-position {
    color: var(--bs-secondary-color);
}

.ai-hero {
    border-radius: 14px;
    border-color: var(--bs-border-color);
}

.ai-hero-critical { --ai-hero-color: #FF4D4D; }
.ai-hero-high { --ai-hero-color: #FF9F5D; }
.ai-hero-medium { --ai-hero-color: #FFD37D; }
.ai-hero-low { --ai-hero-color: #A9D6A9; }
.ai-hero-info { --ai-hero-color: #A3C1D1; }
.ai-hero-clean { --ai-hero-color: #6c757d; }
.ai-hero-limited,
.ai-hero-neutral { --ai-hero-color: #adb5bd; }
.ai-hero-failed { --ai-hero-color: #dc3545; }

.ai-hero-eyebrow {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    margin-bottom: 0.4rem;
}

/* The review pills (acknowledged, sent to triage), at the far end of the header's top line, in the pills' own lettering. */
.ai-hero-eyebrow > .ai-hero-review {
    margin-left: auto;
    text-transform: none;
    letter-spacing: normal;
}

.ai-hero-dot {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background-color: var(--ai-hero-color, #adb5bd);
}

.ai-hero-title {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--bs-body-color);
    margin-bottom: 0;
    max-width: 48rem;
}

.ai-hero-meta {
    margin-bottom: 0.6rem;
    font-size: 0.82rem;
    color: var(--bs-secondary-color);
}

/* Under the headline: what the run found, by severity (run report), or how its tasks ended (technical view). */
.ai-hero-findings,
.ai-hero-tasks {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--bs-border-color);
}

.ai-hero-stat-label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.6rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}

.ai-hero-all-checks {
    font-size: 0.8rem;
    letter-spacing: normal;
    text-transform: none;
}

/* Assessment coverage as the card's quiet footer, set apart from the results above it. */
.ai-hero-coverage {
    margin: 1.5rem -1.4rem -1.25rem;
    padding: 0.9rem 1.4rem 1rem;
    background-color: var(--bs-tertiary-bg);
    border-top: 1px solid var(--bs-border-color);
    border-radius: 0 0 11px 11px;
}

.ai-hero-coverage .ai-summary-chip {
    background-color: var(--bs-body-bg);
}

.ai-summary-coverage-label {
    font-size: 0.8rem;
}

/* Run report: the plan a run executed, and its other runs. */
.ai-run-switcher-plan {
    margin: 0 0.35rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--bs-secondary-color);
}

.ai-plan-card {
    scroll-margin-top: 1rem;
}

.ai-plan-runs {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--bs-border-color);
    border-radius: 10px;
    overflow: hidden;
}

.ai-plan-run {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.9rem;
    font-size: 0.85rem;
    color: inherit;
    text-decoration: none;
}

.ai-plan-run + .ai-plan-run {
    border-top: 1px solid var(--bs-border-color);
}

.ai-plan-run:hover:not(.current) {
    color: inherit;
    background-color: rgba(var(--bs-secondary-rgb), 0.05);
}

.ai-plan-run.current {
    background-color: var(--brand-color-with-opacity-1);
    cursor: default;
}

.ai-plan-run-label {
    flex-grow: 1;
    color: var(--bs-body-color);
}

.ai-plan-run-current {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--brand-color);
}

.ai-plan-task {
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
}

.ai-plan-task-skipped {
    opacity: 0.55;
    border-style: dashed;
}

/* Run pages: top bar with the Plain / Technical switch, main column and sidebar. */
.ai-run-topbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 2.5rem;
    margin-bottom: 1rem;
}

.ai-view-switch {
    display: inline-flex;
    padding: 3px;
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 10px;
}

.ai-view-switch > a {
    padding: 0.35rem 0.9rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--bs-body-color);
    text-decoration: none;
    border-radius: 7px;
}

.ai-view-switch > a.active {
    color: #fff;
    background-color: var(--brand-color);
}

.ai-run-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 19rem;
    align-items: start;
    gap: 1.25rem;
}

.ai-run-main {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

/* Sticks below the app's fixed header (about 3.6rem tall), and scrolls itself if it is taller than
   the window, so its last card is never out of reach. */
.ai-run-sidebar {
    position: sticky;
    top: 4.75rem;
    max-height: calc(100vh - 5.75rem);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ai-side-switch {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
    height: 2.5rem;
}

/* On wide screens the sidebar is pulled up into the breadcrumb row by exactly that row's height and
   gap, so its switch sits beside the breadcrumb and "About this run" lines up with the first card of
   the report -- and, the sidebar being sticky, the switch stays in view while the report scrolls. */
@media (min-width: 992px) {
    .ai-run-topbar {
        height: 2.5rem;
    }

    .ai-run-sidebar {
        margin-top: -3.5rem;
    }
}

@media (max-width: 991px) {
    .ai-run-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .ai-run-sidebar {
        position: static;
        max-height: none;
        overflow: visible;
    }

    .ai-side-switch {
        display: none;
    }
}

.ai-side-card {
    padding: 1rem 1.1rem;
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
}

.ai-side-title {
    margin-bottom: 0.6rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--bs-body-color);
}

.ai-side-text {
    font-size: 0.82rem;
    line-height: 1.5;
    color: #4a4f55;
}

.ai-about {
    display: grid;
    grid-template-columns: 4.75rem minmax(0, 1fr);
    gap: 0.45rem 0.75rem;
    margin: 0;
    font-size: 0.82rem;
}

.ai-about dt {
    font-weight: 400;
    color: var(--bs-secondary-color);
}

.ai-about dd {
    margin: 0;
    color: var(--bs-body-color);
}

/* A host can be long; it wraps anywhere rather than pushing the card wider. */
.ai-about-target {
    display: block;
    font-family: var(--bs-font-monospace);
    font-size: 0.76rem;
    line-height: 1.4;
    word-break: break-all;
}

.ai-about-port {
    color: #5c636a;
}

.ai-about-sub {
    display: block;
    font-size: 0.76rem;
    color: var(--bs-secondary-color);
}

.ai-side-code {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.6rem;
    padding: 0.55rem 0.7rem;
    font-family: var(--bs-font-monospace);
    font-size: 0.75rem;
    color: var(--bs-body-color);
    background-color: var(--bs-tertiary-bg);
    border-radius: 8px;
}

.ai-side-actions {
    display: grid;
    gap: 0.5rem;
}

/* Run AI Defender again: why it is disabled, under the button. */
.ai-run-again {
    display: grid;
    gap: 0.25rem;
}

.ai-run-again-reason {
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--bs-secondary-color);
}

.ai-side-links {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-size: 0.85rem;
}

.ai-side-links a,
.ai-side-links .btn-link {
    font-size: inherit;
    color: var(--bs-body-color);
    text-decoration: underline;
    text-decoration-color: var(--bs-border-color);
    text-underline-offset: 2px;
}

.ai-side-links a:hover,
.ai-side-links .btn-link:hover {
    color: var(--bs-body-color);
    text-decoration-color: currentColor;
}

/* A section of a run report: white card, title led by a small coloured square. */
.ai-section-card {
    padding: 1.25rem 1.4rem;
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
}

.ai-section-title {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.85rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--bs-body-color);
}

/* A section card's head on the technical view: a grey band across the top with the title, and a
   count or controls beside it. The same on What was tested, the execution logs and the plan. */
.ai-tech-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin: -1.25rem -1.4rem 1.1rem;
    padding: 0.9rem 1.4rem;
    background-color: rgba(var(--bs-secondary-rgb), 0.1);
    border-bottom: 1px solid var(--bs-border-color);
    border-radius: 11px 11px 0 0;
}

/* The same head as a button, for a section that folds open (the engagement plan). */
.ai-tech-card-toggle {
    width: calc(100% + 2.8rem);
    text-align: left;
    color: inherit;
    border-top: 0;
    border-right: 0;
    border-left: 0;
}

.ai-tech-card-toggle:hover,
.ai-tech-card-toggle:focus-visible {
    background-color: rgba(var(--bs-secondary-rgb), 0.16);
}

/* Folded: the head is the whole card. */
.ai-tech-card-toggle.collapsed {
    margin-bottom: -1.25rem;
    border-bottom: 0;
    border-radius: 11px;
}

.ai-section-intro {
    margin-bottom: 0.85rem;
}

/* A one-line note under a section title, saying what the section is. */
.ai-section-note {
    margin: -0.35rem 0 0.9rem;
    font-size: 0.82rem;
}

.ai-anchor {
    scroll-margin-top: 1rem;
}

/* "What didn't hold": each finding a box, its severity tag leading. */
.ai-finding-boxes {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.ai-finding-box {
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    background-color: var(--bs-body-bg);
}

.ai-finding-box-head {
    padding: 0.75rem 0.9rem;
    cursor: pointer;
}

.ai-finding-box-head.static {
    cursor: default;
}

.ai-finding-box-head:not(.static):hover {
    background-color: rgba(var(--bs-secondary-rgb), 0.04);
}

.ai-finding-box-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
}

.ai-finding-box-where {
    font-family: var(--bs-font-monospace);
    word-break: break-word;
}

.ai-finding-box-toggle {
    margin-left: auto;
    font-weight: 600;
    color: var(--brand-color);
}

.ai-finding-box-toggle .collapsible-chevron {
    font-size: 0.6rem;
}

.ai-finding-box-title {
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--bs-body-color);
}

.ai-finding-box-detail {
    padding: 0.25rem 0.9rem 0.9rem;
    border-top: 1px solid var(--bs-border-color);
}

.ai-finding-box-block {
    margin-top: 0.7rem;
}

.ai-finding-box-label {
    display: block;
    margin-bottom: 0.15rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}

.ai-finding-box-affects {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
    font-family: var(--bs-font-monospace);
    font-size: 0.75rem;
    word-break: break-word;
}

/* Severity tiles, smaller, beside a report's outcome bar. */
/* Only the severities with a count are shown, so the row is as wide as its tiles. */
.ai-severity-tiles-compact {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 4.25rem;
    justify-content: start;
    gap: 0.5rem;
}

@media (max-width: 575px) {
    .ai-severity-tiles-compact {
        grid-auto-columns: minmax(0, 4.25rem);
        gap: 0.35rem;
    }
}

.ai-severity-tiles-compact .ai-severity-tile {
    padding: 0.45rem 0.4rem;
}

.ai-severity-tiles-compact .ai-severity-tile-count {
    font-size: 1.15rem;
}

/* The outcome bar at full width with its counts underneath. */
.ai-outcome-large {
    flex-direction: column;
    align-items: stretch;
    gap: 0.45rem;
}

.ai-outcome-large .ai-outcome-bar {
    flex: none;
    width: 100%;
    height: 10px;
}

.ai-runs-group + .ai-runs-group {
    margin-top: 1.5rem;
}

/* A run that found something, or is running: a full card, edged in its worst severity. */
.ai-run-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.25rem;
    color: inherit;
    text-decoration: none;
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.ai-run-card:hover {
    color: inherit;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

.ai-run-card-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.4rem;
}

.ai-run-card-meta {
    font-size: 0.8rem;
    color: var(--bs-secondary-color);
}

.ai-run-card-chevron {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
}

.ai-run-card-headline {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--bs-body-color);
}

.ai-run-card-subtitle {
    margin-top: 0.3rem;
    font-size: 0.86rem;
    line-height: 1.5;
    color: #4a4f55;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ai-run-card-outcome {
    margin-top: 0.75rem;
}

/* A run that came back clean, limited or unfinished: one quiet row. */
.ai-run-card-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-width: 0;
}

/* The run's date, leading every card and row so the list reads by when. */
.ai-run-date {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    align-items: flex-start;
    width: 3.75rem;
    padding-right: 0.9rem;
    border-right: 1px solid var(--bs-border-color);
    font-family: var(--bs-font-monospace);
    line-height: 1.3;
}

.ai-run-date-day {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--bs-body-color);
    white-space: nowrap;
}

.ai-run-date-time {
    font-size: 0.72rem;
    color: var(--bs-secondary-color);
}

.ai-run-card > .ai-run-date {
    align-self: stretch;
    padding-top: 0.1rem;
}

@media (max-width: 575px) {
    .ai-run-date {
        width: 3.1rem;
        padding-right: 0.6rem;
    }
}

/* Links on the AI Defender pages: the brand orange, normal weight, no underline. */
.ai-link,
.ai-breadcrumb a,
.ai-side-links a,
.ai-side-links .btn-link,
.ai-page .collapse-group-toggle,
.ai-run-sidebar .collapse-group-toggle {
    font-size: inherit;
    font-weight: 400 !important;
    color: var(--brand-color) !important;
    text-decoration: none;
}

.ai-link:hover,
.ai-link:focus-visible,
.ai-breadcrumb a:hover,
.ai-side-links a:hover,
.ai-side-links .btn-link:hover {
    color: var(--brand-border-color) !important;
    text-decoration: none;
}

.ai-link:disabled,
.ai-run-switcher-link.disabled {
    color: var(--bs-secondary-color) !important;
    opacity: 0.45;
}

/* A port's AI Defender page: a header, then its plans and runs on the left and the one selected on the right. */
.ai-port-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin-bottom: 1.25rem;
}

.ai-port-header-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0;
    font-size: 0.88rem;
    color: var(--bs-secondary-color);
}

.ai-port-header-meta > span + span::before {
    content: "·";
    margin: 0 0.45rem;
}

.ai-port-layout {
    display: grid;
    grid-template-columns: 20rem minmax(0, 1fr);
    align-items: start;
    gap: 1.25rem;
}

.ai-port-detail {
    min-width: 0;
}

/* Full width, lined up with the port's name above it; the text stays a readable width inside. */
.ai-port-empty {
    padding: 2rem;
    text-align: center;
}

.ai-port-empty .ai-summary-body {
    max-width: 34rem;
    margin-left: auto;
    margin-right: auto;
}

.ai-port-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: 0.75rem;
    font-size: 1.2rem;
    color: var(--brand-color);
    background-color: var(--brand-color-with-opacity-1);
    border-radius: 50%;
}

/* The list of plans, each with its runs hanging under it. */
.ai-rail {
    position: sticky;
    top: 4.75rem;
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
}

.ai-rail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.9rem 1.1rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.ai-rail-title {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}

/* Scrolls on its own once there are more plans and runs than fit, so a long history never
   stretches the page; about eight plans with a run each show before it does. */
.ai-rail-body {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    max-height: min(38rem, calc(100vh - 13rem));
    padding: 0.6rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.ai-rail-plan,
.ai-rail-run {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.55rem 0.65rem;
    color: inherit;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 9px;
}

a.ai-rail-plan:hover,
a.ai-rail-run:hover {
    color: inherit;
    background-color: var(--bs-tertiary-bg);
}

.ai-rail-plan.selected,
.ai-rail-run.selected {
    background-color: var(--brand-color-with-opacity-1);
    border-color: var(--brand-color-with-opacity-2);
}

.ai-rail-plan.selected .ai-rail-name,
.ai-rail-run.selected .ai-rail-name {
    color: var(--brand-border-color);
}

.ai-rail-marker {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 1rem;
    color: var(--brand-color);
}

.ai-rail-dot {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 2px;
    background-color: #4c8f6f;
}

.ai-rail-plan-failed .ai-rail-dot { background-color: #e86664; }
.ai-rail-plan-stopped .ai-rail-dot,
.ai-rail-plan-earlier .ai-rail-dot { background-color: #adb5bd; }

.ai-rail-main {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-width: 0;
}

.ai-rail-name {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--bs-body-color);
}

.ai-rail-sub {
    font-size: 0.78rem;
    color: var(--bs-secondary-color);
}

.ai-rail-plan-failed .ai-rail-state { color: #c94c4a; }

.ai-rail-pill {
    padding: 0.05rem 0.4rem;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--brand-border-color);
    background-color: var(--brand-color-with-opacity-1);
    border-radius: 4px;
}

.ai-rail-count {
    flex-shrink: 0;
    padding: 0.1rem 0.5rem;
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
    background-color: var(--bs-tertiary-bg);
    border-radius: 999px;
}

/* Every severity a run confirmed, small, under its name in the list. */
.ai-rail-badges {
    margin-top: 0.3rem;
}

.ai-rail-badges .ai-run-badge {
    padding: 0.05rem 0.4rem;
    font-size: 0.62rem;
}

/* A plan's runs, indented under it on a thin line. */
.ai-rail-runs {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin: 0.15rem 0 0.35rem 1.15rem;
    padding-left: 0.6rem;
    border-left: 2px solid var(--bs-border-color);
}

.ai-rail-run .ai-rail-name {
    font-size: 0.85rem;
    font-weight: 500;
}

.ai-rail-run-icon {
    flex-shrink: 0;
    font-size: 1rem;
    color: var(--ai-rail-run-color, var(--bs-secondary-color));
}

.ai-rail-run-clean { --ai-rail-run-color: #6c757d; }
.ai-rail-run-running { --ai-rail-run-color: var(--brand-color); }
.ai-rail-run-failed { --ai-rail-run-color: #e86664; }
.ai-rail-run-cancelled { --ai-rail-run-color: #6c757d; }

.ai-rail-outcome {
    flex-shrink: 0;
    font-size: 0.78rem;
    color: var(--ai-rail-run-color, var(--bs-secondary-color));
}

/* A finding's colour is its severity's, and the light ones (medium, low) are hard to read as text on
   white; darkened the same way the severity badges are. */
.ai-rail-run-found .ai-rail-outcome,
.ai-rail-run-found .ai-rail-run-icon {
    color: color-mix(in srgb, var(--ai-rail-run-color) 65%, #000);
}

/* The selected plan or run. */
.ai-plan-detail {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    padding: 1.5rem 1.6rem;
}

.ai-plan-detail-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    padding-bottom: 1.1rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.ai-plan-detail-title {
    margin-bottom: 0.15rem;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--bs-body-color);
}

.ai-plan-detail-meta {
    font-size: 0.88rem;
    color: var(--bs-secondary-color);
}

.ai-plan-detail-start {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.3rem;
}

.ai-plan-detail-hint {
    font-size: 0.78rem;
    color: var(--bs-secondary-color);
}

.ai-plan-detail-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}

.ai-plan-detail-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.7rem 0.9rem;
    font-size: 0.88rem;
    background-color: var(--bs-tertiary-bg);
    border-radius: 8px;
}

.ai-plan-detail-notice > i {
    margin-top: 0.2rem;
    color: var(--bs-secondary-color);
}

.ai-plan-detail-notice-failed > i { color: #c94c4a; }

.ai-plan-detail-section {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* What the planning found: the first section open, the rest folded behind "Read the full planning notes". */
.ai-plan-findings {
    padding: 1rem 1.15rem;
    background-color: var(--bs-tertiary-bg);
    border-radius: 10px;
}

.ai-plan-findings-title {
    margin-bottom: 0.25rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--bs-body-color);
}

.ai-plan-tasks-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.75rem;
}

.ai-plan-tasks-summary {
    font-size: 0.9rem;
    color: var(--bs-body-color);
}

.ai-plan-tasks-tools {
    display: flex;
    gap: 1rem;
}

.ai-plan-run-headline {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--bs-body-color);
}

@media (max-width: 991.98px) {
    .ai-port-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .ai-rail {
        position: static;
    }

    .ai-rail-body {
        max-height: 24rem;
    }

    .ai-plan-detail-start {
        align-items: flex-start;
    }
}

/* One task in a plan, ticked or not, in the task selector. */
.ai-plan-select-task {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 0.6rem 0.75rem;
    border-radius: 8px;
    cursor: pointer;
}

.ai-plan-select-task.selected {
    background-color: rgba(var(--bs-success-rgb), 0.08);
}

.ai-plan-select-task.disabled {
    cursor: default;
    opacity: 0.55;
}

.ai-plan-select-label {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}

/* "Test a port": search over the customer's ports. */
.ai-port-picker-results {
    display: flex;
    flex-direction: column;
    height: 26rem;
}

.ai-port-picker-message {
    display: flex;
    flex-grow: 1;
    align-items: center;
    justify-content: center;
}

.ai-port-picker-list {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
    border: 1px solid var(--bs-border-color);
    border-radius: 10px;
}

.ai-port-picker-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.65rem 0.9rem;
    text-align: left;
    background: none;
    border: 0;
}

.ai-port-picker-item + .ai-port-picker-item {
    border-top: 1px solid var(--bs-border-color);
}

.ai-port-picker-item:hover:not(:disabled) {
    background-color: rgba(var(--bs-secondary-rgb), 0.06);
}

.ai-port-picker-main {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-width: 0;
}

.ai-port-picker-host {
    font-family: var(--bs-font-monospace);
    font-size: 0.85rem;
    font-weight: 600;
    word-break: break-all;
}

.ai-port-picker-service {
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
}

.ai-port-picker-status {
    flex-shrink: 0;
    padding: 0.1rem 0.55rem;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid var(--bs-border-color);
    border-radius: 999px;
    color: var(--bs-secondary-color);
    background-color: var(--bs-body-bg);
}

.ai-port-picker-status.found {
    color: color-mix(in srgb, var(--ai-tile-color) 65%, #000);
    background-color: color-mix(in srgb, var(--ai-tile-bg) 50%, #fff);
    border-color: var(--ai-tile-color);
}

.ai-port-picker-status.clean { color: #495057; background-color: var(--bs-tertiary-bg); border-color: var(--bs-border-color); }
.ai-port-picker-status.failed { color: #9b2c2c; background-color: #fbe9e9; border-color: #f0c4c4; }
.ai-port-picker-status.cancelled { color: #5c636a; background-color: var(--bs-secondary-bg); border-color: var(--bs-border-color); }
.ai-port-picker-status.ready,
.ai-port-picker-status.running { color: var(--brand-color); background-color: var(--brand-color-with-opacity-1); border-color: var(--brand-color-with-opacity-2); }

/* The ASM port dialog's line about the AI Defender, with the way to its page. */
.ai-port-dialog-defender {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    margin-top: 0.25rem;
}

/* No bold text inside buttons on the AI Defender and Attack Surface Map pages -- buttons, button-like
   toggles and the text inside them. !important because Bootstrap's fw-* utilities use it. Icons are
   left out: Font Awesome picks its solid/regular glyphs by font-weight, so forcing 400 blanks them. */
.ai-page button,
.ai-page button :not(i):not([class*="fa-"]):not(.rzi),
.ai-page .btn,
.ai-page .btn :not(i):not([class*="fa-"]):not(.rzi),
.ai-page summary,
.ai-page [data-bs-toggle="collapse"],
.ai-page [data-bs-toggle="collapse"] :not(i):not([class*="fa-"]):not(.rzi),
.ai-view-switch > a,
.ai-port-picker button,
.ai-port-picker button :not(i):not([class*="fa-"]):not(.rzi) {
    font-weight: 400 !important;
}

/* Except a section title in a folding section head (the engagement plan): bold like every other
   section title. As specific as the rule above and after it, so it wins. */
.ai-page [data-bs-toggle="collapse"].ai-tech-card-toggle .ai-section-title:not(i),
.ai-page [data-bs-toggle="collapse"].ai-tech-card-toggle .ai-section-title :not(i) {
    font-weight: 700 !important;
}

/* Same rule for button-style toggles outside those pages, e.g. the port dialog's compliance list. */
.ai-plain-button,
.ai-plain-button :not(i):not([class*="fa-"]):not(.rzi) {
    font-weight: 400 !important;
}

/* The AI Defender's two top-level pages: Overview and Plans & runs. */
/* The AI Defender's tabs (Overview · Ports · Activity), exactly as the Radzen tabs look across the
   platform (the dashboard's community tabs): the Radzen material tab sizes, and radzen-styles.css's
   grey and white boxes. The page's actions sit on the same line, to the right. */
.ai-tabs-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin-bottom: 1.25rem;
}

.ai-tabs {
    display: flex;
    flex-wrap: wrap;
}

.ai-tab {
    display: flex;
    align-items: center;
    /* radzen-styles.css sets the platform's tabs to 6px by 12px. */
    padding: 6px 12px;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.5rem;
    letter-spacing: 1.25px;
    color: #495057;
    text-decoration: none;
    background-color: #E9EDF0;
    border: 1px solid #E9EDF0;
    border-radius: 4px 4px 0 0;
}

.ai-tab:hover {
    color: var(--brand-color);
    background-color: white;
}

.ai-tab.active {
    color: var(--brand-color);
    background-color: white;
    border-bottom: none;
}

.ai-tabs-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.5rem;
    margin-left: auto;
}

/* The technical view's lead: how many findings, how many tasks behind them, how many ran. */
.ai-tech-lead {
    margin: 0.35rem 0 0;
    font-size: 0.95rem;
    color: var(--bs-body-color);
}

/* A finding in What was tested: its box heads the tasks behind it, with the finding's title in place
   of an outcome. */
.ai-tested-group-finding-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--bs-body-color);
}

/* The finding's severity pill keeps its weight, though it sits in a button that otherwise has none. */
.ai-page .ai-tested-group-heading span.ai-run-badge.ai-run-badge-found {
    font-weight: 700 !important;
}

/* A task's own severity, said quietly: a dot and the word, so many tasks do not read as many findings. */
.ai-severity-text {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    white-space: nowrap;
    color: var(--bs-secondary-color);
}

.ai-severity-dot {
    width: 0.5rem;
    height: 0.5rem;
    background-color: var(--ai-severity-color);
    border: 1px solid var(--ai-severity-color);
    border-radius: 50%;
}

.ai-severity-text.unconfirmed .ai-severity-dot {
    background-color: transparent;
}

.ai-severity-text-note {
    font-style: italic;
}

/* On a task's row in What was tested and the execution logs: the finding it is behind. */
.ai-finding-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    max-width: 22rem;
    margin-top: 0.2rem;
    padding: 0.05rem 0.45rem;
    font-size: 0.72rem;
    color: var(--bs-secondary-color);
    background-color: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 6px;
}

.ai-finding-tag i {
    flex-shrink: 0;
    font-size: 0.65rem;
}

.ai-finding-tag-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The Attack Surface Map's asset list while it loads: a row per apex domain, as the list draws them. */
.ai-asset-skeleton-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.95rem 1.25rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.ai-asset-skeleton-row:last-child {
    border-bottom: 0;
}

/* The Attack Surface Map's way into the AI Defender. */
.ai-bridge {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    padding: 0.85rem 1.1rem;
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
}

.ai-bridge-icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    color: var(--brand-color);
    background-color: var(--brand-color-with-opacity-1);
    border-radius: 50%;
}

.ai-bridge-main {
    display: flex;
    flex: 1 1 18rem;
    flex-direction: column;
    min-width: 0;
}

.ai-bridge-title {
    font-weight: 600;
    color: var(--bs-body-color);
}

.ai-bridge-facts {
    display: flex;
    flex-wrap: wrap;
    font-size: 0.85rem;
    color: var(--bs-secondary-color);
}

.ai-bridge-facts > span + span::before {
    content: "·";
    margin: 0 0.45rem;
}

.ai-bridge-fact-strong {
    color: var(--bs-body-color);
}

/* Runs being filtered: the current list stays in place, faded, until the new one arrives. */
.ai-runs-refreshing {
    opacity: 0.55;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

/* One row of a list card in a loading skeleton, spaced like the rows it stands in for. */
.ai-skeleton-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1.25rem;
    border-top: 1px solid var(--bs-border-color);
}

/* Toggles whose label changes with what they show ("Show 7 more" / "Show fewer"): both labels are
   written, and Bootstrap's aria-expanded picks one, so the label can never disagree with the content. */
[data-bs-toggle="collapse"][aria-expanded="true"] .ai-when-collapsed,
[data-bs-toggle="collapse"][aria-expanded="false"] .ai-when-expanded {
    display: none;
}

[data-bs-toggle="collapse"] .ai-chevron-flip {
    transition: transform 0.2s ease;
}

[data-bs-toggle="collapse"][aria-expanded="true"] .ai-chevron-flip {
    transform: rotate(180deg);
}

/* The run page skeleton's severity tiles and checks bar, side by side under a line like the real hero. */
.ai-skeleton-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--bs-border-color);
}

@media (max-width: 767.98px) {
    .ai-skeleton-split {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* The app's search bar (SearchBarComponent), as on the programs pages: a full-width field with
   clear and search icons inside its right edge. */
.search-bar {
    position: relative;
    flex-grow: 1;
    width: 100%;
}

.search-bar .search-bar-input {
    width: 100% !important;
    height: 40px !important;
    padding-right: 90px !important;
}

.search-bar-actions {
    position: absolute;
    top: 50%;
    right: 12px;
    display: flex;
    align-items: center;
    height: 24px;
    transform: translateY(-50%);
}

.search-bar-actions .search-bar-icon {
    cursor: pointer;
}

.search-bar-divider {
    height: 100%;
}

/* What a "What needs attention" row covers, beside it: the findings on the port's latest run. */
.ai-attention-counts {
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.35rem;
}

.ai-attention-count {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0.55rem;
    font-size: 0.74rem;
    white-space: nowrap;
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 999px;
}

.ai-attention-count > i {
    font-size: 0.68rem;
    color: var(--bs-secondary-color);
}

.ai-attention-count-finding {
    background-color: var(--bs-tertiary-bg);
}

@media (max-width: 575px) {
    .ai-attention-counts {
        display: none;
    }
}

/* Links inside what the AI Defender wrote -- task briefs, summaries, the execution log -- come from
   markdown and carry no class. They read as text, in black with a quiet underline, never as the
   browser's blue. The app's own links all have a class and keep their orange. */
.ai-page a:not([class]),
.ai-page a:not([class]):visited {
    color: var(--bs-body-color);
    text-decoration: underline;
    text-decoration-color: rgba(33, 37, 41, 0.35);
    text-underline-offset: 2px;
}

.ai-page a:not([class]):hover,
.ai-page a:not([class]):focus-visible {
    color: var(--bs-body-color);
    text-decoration-color: currentColor;
}

/* The Ports tab: one row per port the AI Defender has worked on, in a single card. */
.ai-port-rows {
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
    overflow: hidden;
}

.ai-port-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.8rem 1.1rem;
    color: inherit;
    text-decoration: none;
}

.ai-port-row + .ai-port-row {
    border-top: 1px solid var(--bs-border-color);
}

.ai-port-row:hover {
    color: inherit;
    background-color: var(--bs-tertiary-bg);
}

.ai-port-row-main {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-width: 0;
}

.ai-port-row-target {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--bs-body-color);
    word-break: break-all;
}

.ai-port-row-meta {
    font-size: 0.78rem;
    color: var(--bs-secondary-color);
}

.ai-port-row-result {
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 0.35rem;
    max-width: 50%;
}

.ai-port-row-state {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.55rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1px solid transparent;
    border-radius: 6px;
}

.ai-port-row-state-busy {
    color: var(--brand-color);
    background-color: var(--brand-color-with-opacity-1);
    border-color: var(--brand-color-with-opacity-2);
}

.ai-port-row-state-ready {
    color: #2f6e50;
    background-color: #e3f1ea;
    border-color: #b9dccb;
}

.ai-port-row-none {
    font-size: 0.78rem;
    color: var(--bs-secondary-color);
}

@media (max-width: 575px) {
    .ai-port-row {
        flex-wrap: wrap;
    }

    .ai-port-row-result {
        justify-content: flex-start;
        max-width: none;
    }
}

/* === BEGIN report-style findings (test) ===
   Each finding on the run report laid out like a disclosure report. Remove this block together with
   AiDefenderFindingReportsComponent to go back to the "What needs attention" boxes. */
.ai-rl-findings {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ai-rl-finding {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1.1rem 1.25rem;
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
}

.ai-rl-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.ai-rl-title {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.35;
}

/* The weakness a finding was classified as, under its title. */
.ai-rl-weakness {
    margin-top: -0.45rem;
    font-size: 0.8rem;
    color: var(--bs-secondary-color);
}

.ai-rl-weakness i {
    font-size: 0.7rem;
}

/* The assets a finding applies to, always shown: one per line, small, the host before its quieter path. */
.ai-rl-assets {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ai-rl-assets li {
    font-family: var(--bs-font-monospace);
    font-size: 0.75rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.ai-rl-asset-host {
    font-weight: 600;
    color: var(--bs-body-color);
}

.ai-rl-asset-path {
    color: var(--bs-secondary-color);
}

.ai-rl-block {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.ai-rl-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}

/* What the customer acts on, set apart from the explanation above it. */
.ai-rl-fix {
    padding: 0.75rem 0.95rem;
    background-color: var(--bs-tertiary-bg);
    border-radius: 10px;
}

.ai-rl-toggle {
    align-self: flex-start;
}

.ai-rl-technical {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--bs-border-color);
}

/* === END report-style findings (test) === */


/* Dashboard statistics box: the title, the value (and unit) below it and the percentage below the value, all centred
   horizontally and vertically. The box's scoped StatisticsBoxComponent.razor.css (hover boxes) is left as it is; these
   rules build on it. Boxes in a grid row share the height of the tallest one instead of the fixed 120px. */
.dashboard-item.statistics-box.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.6rem;
    height: auto;
    min-height: 110px;
    padding: 12px 14px 10px;
    text-align: center;
}

/* Wraps between words only. */
.dashboard-item .statistics-box-title {
    font-size: 12px;
    line-height: 1.25;
    overflow-wrap: normal;
    word-break: normal;
}

/* The value with the percentage below it, both centred. */
.dashboard-item .statistics-box-value-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 0.15rem;
    max-width: 100%;
}

/* The value and the unit stay on one line, e.g. "50k points" or "3k ISK". nowrap is set on the unit only, not the h1,
   so the hover box (.full-value, inside the h1) still wraps its text. */
.dashboard-item.statistics-box h1.statistics-box-value {
    display: inline-flex;
    align-items: baseline;
    column-gap: 0.35rem;
    max-width: 100%;
    position: relative;
}

.dashboard-item .statistics-box-unit {
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1;
    color: #212529;
    white-space: nowrap;
}

.dashboard-item.statistics-box .percentage {
    white-space: nowrap;
    position: relative;
}

/* A box without a percentage keeps its line (it's invisible, not d-none) so all boxes are the same height - unless no
   box in the grid has one (e.g. the Total tab), then the line isn't needed at all. */
.statistics-box-grid:not(:has(.statistics-box .percentage:not(.invisible))) .statistics-box .percentage {
    display: none;
}

/* Hover boxes are centred on the value / percentage they belong to - which are centred in the box, so the hover boxes
   are too. The value's hover box opens above the value; the percentage's opens below the percentage (it's the bottom
   line of the box), so it doesn't cover the value. They're wider than the 175px in StatisticsBoxComponent.razor.css as
   some explanations are a few lines long. Offsets are whole pixels so the box and its arrow always meet exactly. */
.dashboard-item.statistics-box .full-value,
.dashboard-item.statistics-box .percentage .tooltip {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: 260px;
    max-width: calc(100vw - 2rem);
}

.dashboard-item.statistics-box .full-value {
    bottom: calc(100% + 10px);
}

.dashboard-item.statistics-box .percentage .tooltip {
    top: calc(100% + 10px);
    bottom: auto;
}

/* The hover box's own (rotated square) arrow is replaced by one drawn by the value number / percentage, so it points at
   the number rather than the middle of "50k points". The number's top is the value's top (it's the tallest part), so
   the hover box (positioned against the value) and the arrow (against the number) line up exactly. The arrow is two 8px
   triangles, as in Bootstrap's popovers: a border-coloured one touching the hover box's outer edge, and a white one
   further in that covers the hover box's border where they meet, leaving a thin outline. The white one reaches 1.5px in
   rather than 1px: the value is centred, so it can land on a half pixel, and the hover box (positioned from the value)
   and the arrow (from the number) can then round to different device pixels - the extra half pixel still covers the
   border, instead of leaving a line above the arrow. */
.dashboard-item.statistics-box .full-value:before,
.dashboard-item.statistics-box .percentage .tooltip:before {
    display: none;
}

.dashboard-item.statistics-box .statistics-box-number {
    position: relative;
}

.dashboard-item.statistics-box h1.statistics-box-value:has(.full-value) .statistics-box-number:before,
.dashboard-item.statistics-box h1.statistics-box-value:has(.full-value) .statistics-box-number:after,
.dashboard-item.statistics-box .percentage:before,
.dashboard-item.statistics-box .percentage:after {
    content: '';
    position: absolute;
    left: 50%;
    z-index: 2;
    width: 0;
    height: 0;
    margin-left: -8px;
    border: 8px solid transparent;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

/* Pointing down at the value: the hover box's bottom edge is 10px above the value. */
.dashboard-item.statistics-box h1.statistics-box-value:has(.full-value) .statistics-box-number:before {
    bottom: calc(100% + 10px - 16px);
    border-top-color: #dee2e6;
}

.dashboard-item.statistics-box h1.statistics-box-value:has(.full-value) .statistics-box-number:after {
    bottom: calc(100% + 11.5px - 16px);
    border-top-color: #fff;
}

/* Pointing up at the percentage: the hover box's top edge is 10px below the percentage. */
.dashboard-item.statistics-box .percentage:before {
    top: calc(100% + 10px - 16px);
    border-bottom-color: #dee2e6;
}

.dashboard-item.statistics-box .percentage:after {
    top: calc(100% + 11.5px - 16px);
    border-bottom-color: #fff;
}

.dashboard-item.statistics-box h1.statistics-box-value:has(.full-value):hover .statistics-box-number:before,
.dashboard-item.statistics-box h1.statistics-box-value:has(.full-value):hover .statistics-box-number:after,
.dashboard-item.statistics-box .percentage:hover:before,
.dashboard-item.statistics-box .percentage:hover:after {
    visibility: visible;
    opacity: 1;
}

/* The hovered box is drawn above its neighbours, so its (wider) hover box isn't hidden under the next box. */
.dashboard-item.statistics-box:hover {
    z-index: 10;
}

/* Dashboard statistics box grids: as many columns as fit at a minimum box width, instead of a fixed number of columns per
   breakpoint, so a box drops to the next row before it gets too narrow for its value and unit on one line.
   Overrides the column counts in DashboardPage.razor.css. */
.statistics-box-grid.total-statistics-box-grid,
.statistics-box-grid.customer-statistics-box-grid,
.statistics-box-grid.vdp-statistics-box-grid,
.statistics-box-grid.community-fund-program-type-statistics-box-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
}

/* Dashboard Reports Overview START */
.reports-overview .report-status-pill {
    display: inline-block;
    padding: 0.35em 0.65em;
    border-radius: 0.375rem;
    font-size: 0.75em;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    color: var(--report-status-text-color, #212529);
    background-color: var(--report-status-color, #e9ecef);
}
/* Dashboard Reports Overview END */

/* ---------------------------------------------------------------------------
   AI Defender Scheduler (DEV-586)
   --------------------------------------------------------------------------- */

/* The target picker mirrors the Attack Surface Map accordion, minus screenshots, so only the bits
   that differ live here. */

/* A port row that is part of the schedule, using the same card as the ASM port list. */
/* The domain filter shares its row with Select all, so it grows instead of taking the width. */
.search-bar.sched-picker-search {
    flex: 1 1 18rem;
    width: auto;
}

/* Picking ports: one hairline row per port, host:port, selected in the brand colour. Its own
   classes rather than .port-card, which the Attack Surface Map's port list also uses. */

.sched-port-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 1rem;
    cursor: pointer;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    transition: background-color 0.15s ease-in-out;
}

.sched-port-row:hover {
    background-color: rgba(0, 0, 0, 0.03);
}

.sched-port-row.is-selected {
    background-color: var(--brand-color-with-opacity-1);
}

.sched-port-row.is-selected:hover {
    background-color: rgb(from var(--brand-color) r g b / 0.18);
}

.sched-port-target {
    font-size: 0.9rem;
    word-break: break-all;
}

.sched-port-host {
    color: #6E788F;
}

.sched-port-number {
    color: #212529;
    font-weight: 600;
}

.sched-port-response {
    font-size: 0.8rem;
    flex-shrink: 0;
}

/* The running selection can get long; keep the panel a sensible height. */
.scheduler-selection-list {
    max-height: 16rem;
    overflow-y: auto;
}

.scheduler-selection-list .port-pill button {
    font-size: 0.7rem;
    opacity: 0.6;
}

.scheduler-selection-list .port-pill button:hover {
    opacity: 1;
}

/* ---------------------------------------------------------------------------
   Scheduler tab
   --------------------------------------------------------------------------- */

/* ---- the editor, as numbered steps ---- */

.sched-step {
    padding: 0;
}

.sched-step-head {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1.1rem 1.25rem 0.9rem;
}

.sched-step-body {
    padding: 0 1.25rem 1.25rem;
}

/* Only the Step 1/2/3 label is branded; the heading beside it stays plain. */
.sched-step-eyebrow {
    color: var(--brand-color);
}

/* How many ports are picked, against the allowance. */
.sched-step-count {
    flex-shrink: 0;
    padding: 0.25rem 0.7rem;
    font-size: 0.8rem;
    color: var(--bs-secondary-color);
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 999px;
}

.sched-step-count.is-full {
    color: #9b2c2c;
    background-color: #fbe9e9;
    border-color: #f0c4c4;
}

/* The running selection, under the domain list. */
.sched-selected {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--bs-border-color);
}

.sched-selected-head {
    display: flex;
    gap: 0.75rem;
    align-items: baseline;
}

/* ---- frequency, as three priced cards ---- */

.sched-freq {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 0.75rem;
}

.sched-freq-option {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.85rem 1rem;
    text-align: left;
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 10px;
}

.sched-freq-option:hover:not(:disabled) {
    border-color: var(--bs-secondary-color);
}

.sched-freq-option.selected {
    background-color: var(--brand-color-with-opacity-1);
    border-color: var(--brand-color);
}

/* Still readable: the price is the reason it cannot be chosen. */
.sched-freq-option:disabled {
    background-color: var(--bs-tertiary-bg);
    opacity: 1;
}

.sched-freq-option:disabled .sched-freq-radio {
    opacity: 0.4;
}

.sched-freq-top {
    display: flex;
    gap: 0.55rem;
    align-items: center;
}

.sched-freq-radio {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    border: 1.5px solid var(--bs-secondary-color);
    border-radius: 50%;
}

.sched-freq-option.selected .sched-freq-radio {
    border-color: var(--brand-color);
    border-width: 4px;
}

/* ---- the summary bar ---- */

/* White like the step cards above it: it is the last card in the sequence, not a different kind
   of thing.
   Grid, not flex: .card already sets flex-direction: column, so a flex row here stacks the summary
   above the buttons and align-items centres the lot - the same trap .sched-quota hit. */
.sched-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem 1.5rem;
    align-items: center;
    padding: 1.1rem 1.25rem;
}

@media (max-width: 767px) {
    .sched-summary {
        grid-template-columns: minmax(0, 1fr);
    }
}

.sched-summary-main {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

/* Short on purpose: it is a glance at how much of the month this one schedule takes, not a
   measure to read values off, and a full-width rule just drew a line across the card. */
.sched-summary .sched-quota-bar {
    max-width: 17rem;
}

/* Bottom right: level with the last line of the summary rather than floating against its middle,
   and still the last thing on the row. */
.sched-summary-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    align-self: end;
    justify-self: end;
}

/* No border or fill: the switch and its words are the control, not a boxed field. */
.sched-status {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

/* ---- runs left this month ---- */

.sched-quota {
    /* Grid, not flex: .card already sets flex-direction: column, which stacked these two halves
       and let align-items centre them. */
    display: grid;
    grid-template-columns: auto minmax(14rem, 1fr);
    gap: 0.75rem 3rem;
    align-items: center;
    padding: 1.1rem 1.25rem;
}

@media (max-width: 767px) {
    .sched-quota {
        grid-template-columns: minmax(0, 1fr);
    }
}

.sched-quota-figure {
    min-width: 0;
}

.sched-quota-number {
    display: flex;
    margin-block: 0.1rem 0.15rem;
    align-items: baseline;
    gap: 0.4rem;
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.sched-quota-of {
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--bs-secondary-color);
}

.sched-quota-meter {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    min-width: 0;
}

/* Segments are stacked left to right; whatever is left over is the free remainder.
   Same height, radius and track as the posture tiles' .ai-kpi-bar, so the two read as one family. */
.sched-quota-bar {
    display: flex;
    height: 6px;
    overflow: hidden;
    background-color: var(--bs-secondary-bg);
    border-radius: 3px;
}

.sched-quota-seg {
    display: block;
    height: 100%;
    flex-shrink: 0;
}

.sched-quota-seg-used {
    background-color: var(--bs-secondary-color);
}

.sched-quota-seg-planned {
    background-color: var(--brand-color);
    opacity: 0.55;
}

/* Only ever a legend swatch - the bar's free part is the track showing through, so it carries the
   track's own colour and no outline. */
.sched-quota-seg-free {
    background-color: var(--bs-secondary-bg);
}

/* The overflow. It cannot be drawn to scale - it is by definition past the end of the bar - so it
   takes a fixed slice of the right-hand end and says "and more beyond here" with stripes. The
   legend carries the actual number. */
.sched-quota-seg-over {
    flex: 1 0 auto;
    background-image: repeating-linear-gradient(
        135deg,
        #9b2c2c 0,
        #9b2c2c 3px,
        #c25b5b 3px,
        #c25b5b 6px
    );
}

.sched-quota-key.sched-quota-seg-over {
    flex: none;
}

.sched-quota-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.25rem;
    font-size: 0.78rem;
    color: var(--bs-secondary-color);
}

.sched-quota-legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.sched-quota-key {
    box-sizing: border-box;
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 2px;
}

/* ---- master / detail ---- */

.sched-split {
    display: grid;
    grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

@media (max-width: 991px) {
    .sched-split {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* The plans-and-runs rail, used as the master list: it keeps its own chrome, but stays where it
   is rather than following the scroll, because the detail beside it is the taller column. */
.sched-list {
    position: static;
}

.sched-list-count {
    font-size: 0.78rem;
    color: var(--bs-secondary-color);
}

/* A rail row as a button: the chrome a button brings and a link does not. Three lines deep, so
   Active/Paused sits beside the name rather than floating to the middle of the row. */
.sched-list-item {
    width: 100%;
    text-align: left;
    background: none;
    font: inherit;
    align-items: flex-start;
}

.sched-list-item .sched-state {
    margin-top: 0.2rem;
}

.sched-list-item:hover {
    background-color: var(--bs-tertiary-bg);
}

.sched-list-item.selected:hover {
    background-color: var(--brand-color-with-opacity-1);
}

/* Two lines of detail under the name, so the row needs its items at the top rather than centred. */
.sched-list-item .ai-rail-main {
    gap: 0.1rem;
}

.sched-state {
    display: inline-flex;
    flex-shrink: 0;
    gap: 0.35rem;
    align-items: center;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.sched-state.is-active {
    color: var(--brand-color);
}

.sched-state.is-paused {
    color: var(--bs-secondary-color);
}

/* A one-time run that has happened: done rather than running or stopped. */
.sched-state.is-done {
    color: #2f6e50;
}

/* A one-time run's date field with the button that sends it back to now. Bottoms flush rather
   than centred: the button is a hair shorter than the field, and a shared baseline reads as
   aligned where a half-pixel either side does not. */
.sched-when {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
}

/* ---- detail ---- */

.sched-detail {
    padding: 0;
}

.sched-detail-head {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1.1rem 1.25rem;
}

.sched-detail-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* Deliberately no border or fill: the switch and its word are the control, not a boxed field. */
.sched-switch {
    display: inline-flex;
    gap: 0.5rem;
    align-items: center;
    margin-right: 0.25rem;
}

/* Fixed width so flipping between "Active" and "Paused" cannot nudge the switch sideways. */
.sched-switch > .small {
    min-width: 3.2rem;
    text-align: right;
    color: var(--bs-secondary-color);
}

.sched-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    border-top: 1px solid var(--bs-border-color);
    border-bottom: 1px solid var(--bs-border-color);
}

.sched-fact {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
    padding: 0.85rem 1.25rem;
}

.sched-fact + .sched-fact {
    border-left: 1px solid var(--bs-border-color);
}

@media (max-width: 575px) {
    .sched-fact + .sched-fact {
        border-left: 0;
        border-top: 1px solid var(--bs-border-color);
    }
}

.sched-fact-value {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--bs-body-color);
}

.sched-fact-note {
    font-size: 0.78rem;
    color: var(--bs-secondary-color);
}



.sched-target-host + .sched-target-host {
    border-top: 1px solid var(--bs-border-color);
}

/* ---- runs ---- */

.sched-runs {
    padding: 1rem 1.25rem 1.25rem;
}

.sched-runs-head {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    justify-content: space-between;
}

/* Run history is its own section rather than a sub-heading under the next run, so it is given
   the same separation the panel uses between any two sections. The negative margins cancel
   .sched-runs' side padding so the rule reaches both edges, as the facts row above it does,
   and the matching padding puts the heading back in line with the rest. */
.sched-runs-divider {
    margin-top: 1.5rem;
    margin-right: -1.25rem;
    margin-left: -1.25rem;
    padding-top: 1.1rem;
    padding-right: 1.25rem;
    padding-left: 1.25rem;
    border-top: 1px solid var(--bs-border-color);
}

.sched-run {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.85rem;
    align-items: baseline;
    padding: 0.55rem 0;
}

.sched-run + .sched-run {
    border-top: 1px solid var(--bs-border-color);
}

.sched-run-when {
    flex-shrink: 0;
    width: 7.5rem;
    font-size: 0.82rem;
}

/* A column of one width for every state, so the target always starts in the same place. The
   pill inside keeps its natural size. */
.sched-run-state {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    width: 7.5rem;
}

/* Takes the slack, which is what keeps View run against the right edge. */
.sched-run-target {
    flex: 1 1 8rem;
    min-width: 0;
}

.sched-run-body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex-grow: 1;
    min-width: 0;
}

.sched-run-line {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.sched-run-upcoming .sched-run-body {
    flex-direction: row;
    align-items: baseline;
}

.sched-run-link {
    flex-shrink: 0;
    white-space: nowrap;
}