/* ============================================================
   Results & Treatment – asset cards
   ============================================================ */

/* Component-level color tokens (custom blues not present in global design system) */
:root {
    --rat-blue-bg:        #f0f4ff;  /* medallion / add-wrap background */
    --rat-blue-border:    #b6c9f7;  /* medallion / add-wrap border */
    --rat-blue-border-md: #8eadf4;  /* medallion hover border */
    --rat-blue-border-sm: #93b4f5;  /* dashed link border */
    --rat-blue-hover-bg:  #dce8ff;  /* link hover background */
    --rat-blue-sep:       #dce5fc;  /* medallion meta separator */
    --rat-blue-badge-bg:  #e8edf8;  /* type badge background */
    --rat-blue-badge-txt: #3d5a99;  /* type badge text */
    --rat-blue-dark:      #1a2a6c;  /* medallion name / input color */

    /* Toggle button gradients – calmer, more professional blue scale */
    --rat-btn-grad-start:       #4c8fdb;
    --rat-btn-grad-end:         #2f6fbe;
    --rat-btn-grad-start-hover: #5a9ae3;
    --rat-btn-grad-end-hover:   #3f7fcb;
    --rat-btn-text:             #ffffff;
    --rat-btn-shadow:           0 1px 2px rgba(18, 52, 102, 0.16);
    --rat-btn-shadow-hover:     0 4px 12px rgba(34, 84, 150, 0.18);
}

/* Search input wrapper width */
.rat-search-wrapper {
    flex: 1 1 300px;
    max-width: 420px;
}

/* ---- Asset card shell ---- */
.rat-asset-card {
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #bfbfbf;
}

/* ---- Card header ---- */
.rat-card-header {
    background-color: var(--rat-blue-bg);
    cursor: pointer;
    user-select: none;
    border-bottom: 1px solid var(--rat-blue-border);
    transition: background-color 0.15s ease;
}

.rat-card-header:hover {
    background-color: var(--rat-blue-hover-bg);
}

.rat-card-header .item-name {
    color: var(--blue-800);
}

/* ---- Chevron toggle ---- */
.rat-card-chevron {
    transition: transform 0.2s ease;
    flex-shrink: 0;
    color: var(--blue-700);
}

.rat-card-chevron--collapsed {
    transform: rotate(-90deg);
}

/* ---- Card body ---- */
.rat-card-body {
    background-color: #ffffff;
    overflow: hidden;
    transition: max-height 0.25s ease, opacity 0.2s ease;
}

.rat-card-body--collapsed {
    display: none;
}

/* ---- Value blocks / stat tiles (top-right of card body) ---- */
.rat-value-block {
    background: #f8f9fa;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    padding: 0.4rem 0.65rem;
    text-align: center;
    min-width: 80px;
}

.rat-value-label {
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    line-height: 1.3;
}

.rat-value-content {
    font-weight: 700;
    font-size: 1.2rem;
    color: #212529;
    line-height: 1.2;
    margin-top: 0.1rem;
}

/* Risk tile – visually prominent, color reflects appetite */
.rat-value-block--risk {
    border-width: 1.5px;
}

.rat-value-block--risk.rat-value-block--danger {
    background: #fff5f5;
    border-color: var(--red-500);
}

.rat-value-block--risk.rat-value-block--danger .rat-value-content {
    color: var(--red-500);
}

.rat-value-block--risk.rat-value-block--safe {
    background: #f0faf4;
    border-color: var(--success);
}

.rat-value-block--risk.rat-value-block--safe .rat-value-content {
    color: var(--success);
}

/* ---- Relation rows ---- */
.rat-relation-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    line-height: 1.8;
}

.rat-relation-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #495057;
    white-space: nowrap;
    margin-right: 4px;
    flex-shrink: 0;
}

/* ---- Status dot (risk appetite indicator in card header) ---- */
.rat-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
    margin-right: 4px;
    vertical-align: middle;
}

.rat-status-dot--danger  { background-color: var(--red-500); }
.rat-status-dot--warning { background-color: #fd7e14; }
.rat-status-dot--success { background-color: var(--success); }

/* ---- Entity chips (blue outlined pill) ---- */
.rat-entity-chip {
    display: inline-block;
    padding: 1px 10px;
    border: 1.5px solid #0d6efd;
    border-radius: 10px;
    color: #0d6efd;
    font-size: 0.78rem;
    line-height: 1.6;
    white-space: nowrap;
}

.rat-entity-chip--danger {
    border-color: var(--red-500);
    color: var(--red-500);
}

.rat-entity-chip--warning {
    border-color: #fd7e14;
    color: #fd7e14;
}

.rat-entity-chip--success {
    border-color: var(--success);
    color: var(--success);
}

/* ---- Treatment accordion: shared wrapper for button + panel ---- */
.rat-treatment-accordion {
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    transition: box-shadow 0.2s ease;
}

.rat-treatment-accordion:has(.rat-treatment-panel--open) {
    box-shadow: 0 4px 14px rgba(34, 84, 150, 0.10);
}

/* ---- Risk treatment panel ---- */
.rat-treatment-panel {
    display: none;
    margin-top: 0.75rem;
}

.rat-treatment-panel--open {
    display: block;
    background-color: #fbfcff;
    margin-top: 0;
    border: 1px solid #d9e4f5;
    border-top: 0;
    border-left: 2px solid #bfd2ef;
    border-radius: 0 0 8px 8px;
    padding: 0.875rem 1rem;
}

/* divider no longer needed – panel has its own border */
.rat-treatment-divider {
    display: none;
}

.rat-treatment-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #495057;
}

.rat-treatment-field {
    width: 180px;
    flex-shrink: 0;
}

.rat-treatment-field .form-select-sm,
.rat-treatment-field .form-control-sm {
    height: 40px;
}

.rat-treatment-field--wide {
    flex: 1 1 220px;
}

.rat-treatment-delete {
    flex-shrink: 0;
    align-self: flex-end;
}

/* ---- Apply countermeasure section ---- */
.rat-apply-sc {
    display: flex;
    flex-direction: column;
    padding-top: 0.75rem;
}

.rat-apply-sc-toggle {
    background: linear-gradient(135deg, var(--rat-btn-grad-start) 0%, var(--rat-btn-grad-end) 100%);
    border: 1.5px solid var(--rat-btn-grad-end);
    border-radius: 8px;
    padding: 0.7rem 0.9rem;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--rat-btn-text);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    align-self: flex-start;
    box-shadow: var(--rat-btn-shadow);
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.rat-apply-sc-toggle:hover {
    background: linear-gradient(135deg, var(--rat-btn-grad-start-hover) 0%, var(--rat-btn-grad-end-hover) 100%);
    border-color: var(--rat-btn-grad-end-hover);
    color: var(--rat-btn-text);
    box-shadow: var(--rat-btn-shadow-hover);
    transform: translateY(-1px);
}

.rat-apply-sc-toggle--open {
    background: linear-gradient(135deg, var(--rat-btn-grad-start-hover) 0%, var(--rat-btn-grad-end-hover) 100%);
    border-color: var(--rat-btn-grad-end-hover);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: var(--rat-btn-shadow-hover);
}

.rat-apply-sc-panel {
    display: none;
}

.rat-apply-sc-panel--open {
    display: block;
    background-color: #fff;
    padding: 0.9rem;
}

/* ---- Bottom row: add-wrap (left) + footer (right), 50/50 ---- */
.rat-treatment-sc-footer-row {
    display: flex;
    gap: .5rem;
    align-items: stretch;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid #000000;
}

/* Add SC card – hidden until apply-sc panel opens */
.rat-sc-add-wrap {
    display: none;
    flex: 1 1 0;
    flex-direction: column;
    gap: 0.5rem;
    background: var(--rat-blue-bg);
    border: 1.5px solid var(--rat-blue-border);
    border-radius: 8px;
    padding: 0.75rem 0.875rem;
}

.rat-sc-add-wrap--open {
    display: flex;
}


.rat-apply-sc-new-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    color: #0d6efd;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    border: 1.5px dashed var(--rat-blue-border-sm);
    border-radius: 6px;
    padding: 0.35rem 0.5rem;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.rat-apply-sc-new-link:hover {
    background-color: var(--rat-blue-hover-bg);
    border-color: #0d6efd;
    color: var(--blue-600);
    text-decoration: none;
}

.rat-sc-search-wrap {
    width: 100%;
}

.rat-sc-add-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: auto;
    padding-top: 0.5rem;
}

/* ---- Apply SC section – hidden when strategy is not mitigation ---- */
.rat-apply-sc--hidden {
    display: none !important;
}

/* ---- Risk exception section – hidden when strategy is not acceptance above appetite ---- */
.rat-apply-re--hidden {
    display: none !important;
}

/* ---- Transfer inputs section – hidden when strategy is not transfer ---- */
.rat-transfer-inputs--hidden {
    display: none !important;
}

/* ---- Risk exception section ---- */
.rat-apply-re {
    display: flex;
    flex-direction: column;
    padding-top: 0.75rem;
}

.rat-apply-re-panel {
    display: none;
}

.rat-apply-re-panel--open {
    display: block;
    background-color: #fff;
    padding: 0.9rem;
}

/* Add RE card – hidden when RE already linked */
.rat-re-add-section {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background: var(--rat-blue-bg);
    border: 1.5px solid var(--rat-blue-border);
    border-radius: 8px;
    padding: 0.75rem 0.875rem;
    margin-top: 0.75rem;
}

.rat-re-add-section--hidden {
    display: none !important;
}

.rat-re-add-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 0.5rem;
}

.rat-re-search-wrap {
    width: 100%;
}

/* ---- RE medallion ---- */
.rat-re-medallion {
    background-color: var(--rat-blue-bg);
    border: 1.5px solid var(--rat-blue-border);
    border-radius: 8px;
    padding: 0.6rem 0.9rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.rat-re-medallion:hover {
    border-color: var(--rat-blue-border-md);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.rat-re-medallion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.rat-re-medallion-name {
    font-size: 0.875rem;
    color: var(--rat-blue-dark);
}

.rat-re-medallion-meta {
    border-top: 1px solid var(--rat-blue-sep);
    padding-top: 0.4rem;
    margin-top: 0.45rem;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* ---- Applied SC list – 2 columns, wrapping grid ---- */
.rat-sc-applied-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}

@media (max-width: 600px) {
    .rat-sc-applied-list {
        grid-template-columns: 1fr;
    }
}

/* ---- SC medallion – displayed when SC already linked ---- */
.rat-sc-medallion {
    background-color: var(--rat-blue-bg);
    border: 1.5px solid var(--rat-blue-border);
    border-radius: 8px;
    padding: 0.6rem 0.9rem;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.rat-sc-medallion:hover {
    border-color: var(--rat-blue-border-md);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.rat-sc-medallion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.rat-sc-medallion-name {
    font-size: 0.875rem;
    color: var(--rat-blue-dark);
}

.rat-sc-medallion-meta {
    border-top: 1px solid var(--rat-blue-sep);
    padding-top: 0.4rem;
    margin-top: 0.45rem;
    font-size: 0.75rem;
}

.rat-sc-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background-color: #0d6efd;
    border-radius: 4px;
    padding: 0.1rem 0.45rem;
    color: #fff;
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.rat-sc-eff-label {
    margin-left: auto;
    flex-shrink: 0;
}

.rat-sc-eff-text {
    color: var(--gray-600);
    font-size: 0.82rem;
    white-space: nowrap;
}

.rat-sc-effectiveness-input {
    text-align: center;
    font-weight: 600;
    color: var(--rat-blue-dark);
    border-color: var(--rat-blue-border);
    background-color: #fff;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

.rat-sc-effectiveness-group {
    width: 100px;
}

/* ---- After-treatment footer ---- */
.rat-treatment-footer {
    flex: 0 0 50%;
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    border: 1px solid #000000;
    border-radius: 6px;
    padding: 0.75rem 1rem;
}

.rat-treatment-footer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.rat-treatment-footer-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.rat-treatment-footer-values {
    flex: 1;
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.rat-treatment-footer-actions {
    display: flex;
    justify-content: flex-end;
}

.rat-treatment-footer-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #495057;
}

.rat-treatment-risk-badge {
    flex-shrink: 0;
}

.rat-treatment-visual {
    border-top: 1px solid #dee2e6;
    padding-top: 0.75rem;
}

.rat-treatment-progress {
    height: 0.65rem;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(18, 48, 74, 0.08);
}


.rat-treatment-progress-fill {
    width: 0;
    height: 100%;
    border-radius: inherit;
    transition: width 220ms ease;
    background: linear-gradient(90deg, #198754 0%, #ffc107 55%, #dc3545 100%);
}

/* ---- Threat chips – selectable ---- */
.rat-threat-chip {
    cursor: pointer;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.rat-threat-chip:not(.rat-threat-chip--selected):hover {
    background-color: rgba(13, 110, 253, 0.07);
}

.rat-threat-chip--selected:hover {
    background-color: #1a7fe8;
    border-color: #1a7fe8 !important;
}

.rat-threat-chip--selected {
    background-color: #0d6efd;
    color: #fff !important;
    border-color: #0d6efd !important;
}

.rat-threat-chip--selected .rat-chip-value {
    color: rgba(255, 255, 255, 0.85);
}

/* ---- Risk treatment button ---- */
.rat-treatment-btn {
    display: flex;
    width: auto;
    justify-content: space-between;
    align-items: center;
    padding: 0.7rem 0.9rem !important;
    color: var(--rat-btn-text);
    font-size: 0.9rem;
    text-decoration: none;
    background: linear-gradient(135deg, var(--rat-btn-grad-start) 0%, var(--rat-btn-grad-end) 100%);
    border: 1.5px solid var(--rat-btn-grad-end);
    border-radius: 8px;
    box-shadow: var(--rat-btn-shadow);
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.rat-treatment-btn:not(:disabled):hover {
    text-decoration: none;
    color: var(--rat-btn-text);
    background: linear-gradient(135deg, var(--rat-btn-grad-start-hover) 0%, var(--rat-btn-grad-end-hover) 100%);
    border-color: var(--rat-btn-grad-end-hover);
    box-shadow: var(--rat-btn-shadow-hover);
    transform: translateY(-1px);
}

.rat-treatment-btn--open {
    background: linear-gradient(135deg, var(--rat-btn-grad-start-hover) 0%, var(--rat-btn-grad-end-hover) 100%);
    border-color: var(--rat-btn-grad-end-hover);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: var(--rat-btn-shadow-hover);
}

.rat-treatment-btn-wrap {
    display: flex;
    flex-direction: column;
}

.rat-treatment-btn-wrap[data-tooltip] {
    cursor: not-allowed;
}

.rat-treatment-btn-wrap[data-tooltip].tooltip-topLeft::before,
.rat-treatment-btn-wrap[data-tooltip].tooltip-topLeft::after {
    left: 0;
    transform: translateX(0) translateY(-95%);
}

.rat-treatment-btn-wrap:has(.rat-treatment-btn:disabled) {
    cursor: not-allowed;
}

.rat-treatment-btn:disabled {
    opacity: 0.55;
    pointer-events: none;
    color: #fff !important;
}

/* ---- Risk labels & values in card header ---- */
.rat-risk-label {
    font-size: 0.8rem;
    color: var(--gray-600);
    white-space: nowrap;
}

.rat-risk-value {
    color: var(--blue-800);
    font-size: 0.9rem;
}

/* Residual risk value – visually distinct (shows improvement) */
.rat-risk-value--residual {
    color: var(--success);
}

/* ============================================================
   Two-column layout: cards (left) + sidebar (right)
   ============================================================ */

.rat-two-col-layout {
    display: flex;
    align-items: flex-start;
    gap: 0;
}

/* Asset cards column – takes remaining width */
.rat-cards-col {
    flex: 1 1 0;
    min-width: 0;
}

/* Thin vertical separator */
.rat-sidebar-separator {
    width: 1px;
    background-color: #dee2e6;
    align-self: stretch;
    flex-shrink: 0;
    margin: 0 15px;
}

/* ============================================================
   Treatment progress sidebar
   ============================================================ */

.rat-sidebar {
    width: 260px;
    flex-shrink: 0;
    align-self: flex-start;        /* must not stretch – required for sticky in flex */
    position: sticky;
    top: 65px;                     /* below the 65px top menu */
    max-height: calc(100dvh - 85px);
    overflow-y: auto;
    scrollbar-gutter: stable;
}

/* Section title inside sidebar */
.rat-sidebar-section-title {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #495057;
}

/* Progress bar container */
.rat-progress-bar-wrap {
    height: 10px;
    border-radius: 10px;
    background-color: var(--gray-200);
    overflow: hidden;
}

.rat-progress-bar-fill {
    background-color: #0d6efd;
    border-radius: 10px;
    transition: width 0.4s ease;
}

/* Small counter text "X / Y" */
.rat-progress-counter {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: 0.85rem;
}

/* Sub-label under progress bar */
.rat-progress-label {
    font-size: 0.75rem;
}

/* Appetite hint next to "Assets to treat" heading */
.rat-sidebar-appetite {
    font-size: 0.75rem;
    letter-spacing: 0;
    text-transform: none;
}

/* Toggle button for "Assets to treat" list */
.rat-treatment-list-toggle {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    gap: 6px;
}

.rat-treatment-list-toggle:focus-visible {
    outline: 2px solid #0d6efd;
    border-radius: 3px;
}

/* Collapsed state of the treatment list – !important to override Bootstrap's d-flex */
.rat-treatment-list--collapsed {
    display: none !important;
}

/* Asset chips in sidebar – same blue pill style */
.rat-sidebar-asset-chip {
    display: inline-block;
    padding: 2px 10px;
    border: 1.5px solid #0d6efd;
    border-radius: 10px;
    color: #0d6efd;
    font-size: 0.78rem;
    line-height: 1.6;
    white-space: normal;
    word-break: break-word;
    cursor: pointer;
}

.rat-sidebar-asset-chip:hover {
    background-color: #e7f1ff;
}

/* Treated state – chip turns gray once treated (for future use) */
.rat-sidebar-asset-chip.rat-treated {
    border-color: var(--gray-500);
    color: var(--gray-600);
    text-decoration: line-through;
}

.rat-sidebar-asset-chip--danger {
    border-color: var(--red-500);
    color: var(--red-500);
}

.rat-sidebar-asset-chip--danger:hover {
    background-color: #fdf0f1;
}

.rat-sidebar-asset-chip--warning {
    border-color: #fd7e14;
    color: #fd7e14;
}

.rat-sidebar-asset-chip--warning:hover {
    background-color: #fff4ec;
}

.rat-sidebar-asset-chip--success {
    border-color: var(--success);
    color: var(--success);
}

.rat-sidebar-asset-chip--success:hover {
    background-color: #edf7f1;
}

/* ---- Responsive: collapse sidebar on small screens ---- */
@media (max-width: 992px) {
    .rat-two-col-layout {
        flex-direction: column;
    }

    .rat-sidebar-separator {
        width: 100%;
        height: 1px;
        margin: 16px 0;
    }

    .rat-sidebar {
        width: 100%;
        position: static;
        max-height: none;
    }
}