/* Site Review — page + adherence matrix styles. Auto-served from /assets/. */

.sr-page {
    padding: 16px 18px 60px;
    max-width: 1400px;
    margin: 0 auto;
}

/* --- Header: in-page site picker --------------------------------------- */
.sr-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.sr-site-picker {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sr-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6c757d;
    margin: 0;
}

.sr-site-dropdown {
    min-width: 240px;
}

.sr-site-summary {
    font-size: 0.82rem;
    color: #495057;
}

/* --- Scorecard header -------------------------------------------------- */
.sr-scorecard-card {
    padding: 14px 16px;
}

.sr-scorecard {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px;
}

.sr-tile {
    flex: 1 1 0;
    min-width: 92px;
    padding: 8px 14px;
    border-radius: 8px;
    background: #f8f9fa;
    border: 1px solid #eceef0;
}

.sr-tile-head {
    background: #1e40af;
    border-color: #1e40af;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 150px;
    align-self: stretch;
}

/* Labeled clusters: a small heading over a row of related tiles. */
.sr-scorecard-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1 1 auto;
    min-width: 0;
}

.sr-group-label {
    font-size: 0.64rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #adb5bd;
    padding-left: 2px;
}

.sr-group-tiles {
    display: flex;
    gap: 8px;
}

/* Clickable metric tiles (anchor to the matching section). */
.sr-tile-link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: box-shadow 0.12s ease, transform 0.12s ease;
}

.sr-tile-link:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.sr-tile-site-name {
    font-size: 1.05rem;
    font-weight: 700;
}

.sr-tile-site-sub {
    font-size: 0.72rem;
    opacity: 0.85;
    margin-top: 2px;
}

.sr-tile-value {
    font-size: 1.3rem;
    font-weight: 700;
    color: #212529;
    line-height: 1.1;
}

.sr-tile-sub {
    font-size: 0.7rem;
    color: #6c757d;
    margin-top: 1px;
}

.sr-tile-label {
    font-size: 0.72rem;
    color: #6c757d;
    margin-top: 3px;
}

.sr-tile-good { background: #eafaf0; border-color: #cdeed8; }
.sr-tile-good .sr-tile-value { color: #1c7c4a; }
.sr-tile-warn { background: #fff7e0; border-color: #f3e3b0; }
.sr-tile-warn .sr-tile-value { color: #8a6d1a; }
.sr-tile-bad { background: #fdecea; border-color: #f6cfcb; }
.sr-tile-bad .sr-tile-value { color: #b42318; }

/* --- Cards ------------------------------------------------------------- */
.sr-card {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 10px;
    padding: 16px 18px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    margin-bottom: 18px;
}

.sr-card-head {
    margin-bottom: 12px;
}

.sr-card-title {
    font-size: 1rem;
    font-weight: 600;
    color: #212529;
}

.sr-card-subtitle {
    font-size: 0.78rem;
    color: #6c757d;
    margin-top: 2px;
}

/* --- Adherence comparison table (plain HTML) --------------------------- */
.sr-adh-table-wrap {
    max-width: 760px;
}

.sr-adh-table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    font-size: 0.82rem;
}

.sr-adh-table th,
.sr-adh-table td {
    padding: 6px 10px;
    text-align: right;
    border-bottom: 1px solid #eef0f2;
    white-space: nowrap;
}

.sr-adh-th {
    color: #6c757d;
    font-weight: 600;
    font-size: 0.74rem;
}

.sr-adh-rowlabel,
.sr-adh-rowlabel-th {
    text-align: left;
    font-weight: 600;
    color: #343a40;
}

.sr-adh-overall {
    font-weight: 700;
    border-right: 2px solid #e3e6e9;
}

.sr-adh-cell {
    font-variant-numeric: tabular-nums;
}

/* --- Controls row: legend + scales + y-mode, one compact line --------- */
.sr-controls-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 10px;
}

.sr-scales-dropdown {
    flex: 1;
    min-width: 200px;
    max-width: 420px;
}

/* react-select v1 multi-select — restyle the control + selected chips so they
   match the app's muted palette instead of the default light-blue tokens. */
.sr-scales-dropdown .Select-control {
    border-color: #ced4da;
    border-radius: 8px;
    min-height: 36px;
    font-size: 0.82rem;
    cursor: pointer;
}

/* Center the chip + input row vertically so the control doesn't leave a gap
   below the chip (react-select v1 top-aligns multi values by default). */
.sr-scales-dropdown .Select-multi-value-wrapper {
    display: flex !important;
    align-items: center;
    flex-wrap: wrap;
    min-height: 34px;
}

.sr-scales-dropdown.is-focused:not(.is-open) > .Select-control,
.sr-scales-dropdown.is-open > .Select-control {
    border-color: #1e40af;
    box-shadow: 0 0 0 0.18rem rgba(30, 64, 175, 0.12);
}

.sr-scales-dropdown .Select-placeholder {
    color: #98a2b3;
    font-size: 0.82rem;
    line-height: 34px;
}

/* Selected chips — neutral grey (no blue tint). NB: in react-select v1
   `Select--multi` is on the SAME root node as `sr-scales-dropdown`, so the
   chip parts are addressed as plain descendants (no `.Select--multi` step). */
.sr-scales-dropdown .Select-value {
    display: inline-flex !important;
    align-items: stretch;
    min-height: 22px;
    background-color: #f1f3f5 !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 6px;
    color: #343a40 !important;
    margin: 3px 4px 3px 2px !important;
    padding: 0 !important;
    overflow: hidden;
}

.sr-scales-dropdown .Select-value-label {
    order: 1;                       /* label first … */
    display: inline-flex;
    align-items: center;
    color: #343a40 !important;
    font-size: 0.78rem;
    font-weight: 500;
    padding: 0 8px !important;
    line-height: 1;
}

.sr-scales-dropdown .Select-value-icon {
    order: 2;                       /* … remove "×" on the right */
    display: inline-flex;
    align-items: center;
    border: none !important;
    border-left: 1px solid #dee2e6 !important;
    color: #98a2b3;
    padding: 0 6px !important;
    font-size: 0.95rem;
    line-height: 1;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.sr-scales-dropdown .Select-value-icon:hover {
    background-color: #fce3e5;
    color: #b42318 !important;
}

/* Menu */
.sr-scales-dropdown .Select-menu-outer {
    border-color: #ced4da;
    border-radius: 8px;
    font-size: 0.82rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.sr-scales-dropdown .VirtualizedSelectOption {
    color: #344054;
    font-size: 0.82rem;
}

.sr-scales-dropdown .VirtualizedSelectFocusedOption {
    background-color: #f1f5f9;
}

.sr-ymode {
    font-size: 0.8rem;
    color: #495057;
    white-space: nowrap;
    margin-left: auto;
}

/* Model lens toggle — amber accent so the control names the overlay colour. */
.sr-model-toggle {
    font-size: 0.8rem;
    white-space: nowrap;
}

.sr-model-toggle .sr-radio-label {
    color: #b45309;
    font-weight: 600;
    margin-right: 0;
}

.sr-model-toggle .sr-radio-input {
    accent-color: #b45309;
}

.sr-radio-label {
    /* !important beats the inline `display:inline-block` dcc injects when
       inline=True, so align-items can actually centre input + text. */
    display: inline-flex !important;
    align-items: center;
    margin-right: 14px;
    cursor: pointer;
}

.sr-radio-input {
    margin: 0 5px 0 0;
    flex-shrink: 0;
}

/* --- Trajectory panels (stacked vertically) --------------------------- */
.sr-traj-plots {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sr-traj-panel {
    min-width: 0;
    padding-bottom: 6px;
    border-bottom: 1px solid #f1f3f5;
}

.sr-traj-panel:last-child {
    border-bottom: none;
}

/* --- Legend ------------------------------------------------------------ */
.sr-legend {
    display: flex;
    gap: 14px;
    margin: 0;
    flex-shrink: 0;
}

.sr-legend-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: #495057;
}

.sr-legend-swatch {
    display: inline-block;
    width: 18px;
    height: 0;
    border-top-width: 2px;
    border-top-style: solid;
}

.sr-swatch-site { border-top-color: #1e40af; border-top-width: 3px; }
.sr-swatch-study { border-top-color: #6c757d; border-top-style: dashed; }
.sr-swatch-site-fill,
.sr-swatch-study-fill {
    border-top: none;
    width: 12px;
    height: 12px;
    border-radius: 3px;
}
.sr-swatch-site-fill { background: #1e40af; }
.sr-swatch-study-fill { background: #6c757d; opacity: 0.55; }

.sr-swatch-disc {
    border-top: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #1e40af;
    box-shadow: 0 0 0 2px #b42318;
}

/* --- Risk cards (canonical RAG; colours set inline from _RAG) ---------- */
.sr-risk-card {
    padding: 12px 16px;
    border-radius: 8px;
    text-align: center;
}

.sr-risk-label {
    font-size: 1rem;
    font-weight: 600;
}

.sr-risk-detail {
    font-size: 0.72rem;
    margin-top: 4px;
    opacity: 0.85;
}

/* --- Model–rater discordance ------------------------------------------ */
.sr-mr-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.sr-mr-col .sr-subhead {
    display: block;
    margin-bottom: 6px;
}

.sr-mr-charts {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 16px;
}

.sr-mr-chart {
    min-width: 0;
}

.sr-mr-chart .sr-subhead {
    display: block;
    margin-bottom: 4px;
}

@media (max-width: 900px) {
    .sr-mr-cards { grid-template-columns: 1fr; }
    .sr-mr-charts { grid-template-columns: 1fr; }
}

/* --- Concordance ------------------------------------------------------- */
.sr-subhead {
    font-size: 0.82rem;
    font-weight: 600;
    color: #343a40;
}

.sr-conc-endpoint {
    max-width: 220px;
    margin-left: auto;
}

.sr-divider {
    margin: 18px 0 14px;
    border: 0;
    border-top: 1px solid #eceef0;
}

.sr-conc-rank {
    font-size: 0.82rem;
    color: #495057;
    margin: 4px 0 6px;
    min-height: 1rem;
}

/* --- Card footer / link ------------------------------------------------ */
.sr-card-foot {
    margin-top: 12px;
}

.sr-link {
    font-size: 0.82rem;
    font-weight: 500;
    color: #1e40af;
    text-decoration: none;
}

.sr-link:hover {
    text-decoration: underline;
}

/* --- Messages / empty states ------------------------------------------ */
.sr-message {
    font-size: 0.82rem;
    color: #842029;
    margin-bottom: 8px;
}

.sr-empty {
    padding: 40px 16px;
    text-align: center;
    color: #6c757d;
    font-size: 0.9rem;
}