/* Open-Label Treatment (custom/meridian/olt_pages.py): Overview, Timeline, Completers.
   Same header and controls as Study Summary (study_summary.css); platform greys and
   accent (#1e40af). Dose colours come inline from olt_view.DOSE_COLORS. */

/* Laid out in section cards (components/section_card.py, cards.css) on the light grey. */
.olt-page { padding: 1rem 1.25rem 2.5rem 1.25rem; color: #212529; min-height: 100%; }

.olt-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 1rem;
    margin: 0.75rem 0;
}
.olt-title { font-size: 1.35rem; font-weight: 600; margin: 0; }
.olt-asof { font-size: 0.85rem; color: #6c757d; }

/* The summary card: the site filter, then the scorecards. */
.olt-summary .olt-control { margin-bottom: 0.75rem; }
.olt-summary .olt-kpi-bar { margin-bottom: 0; }
.olt-control { display: flex; align-items: center; gap: 0.5rem; }
.olt-control-label { font-size: 0.8rem; font-weight: 500; color: #495057; margin: 0; }
.olt-site-dropdown { min-width: 180px; font-size: 0.85rem; }

/* === KPIs ================================================================= */
.olt-kpi-bar { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1rem; }
.olt-kpi {
    flex: 1 1 0;
    min-width: 140px;
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    padding: 0.7rem 0.9rem;
    text-align: center;
    /* Cards stretch to the tallest in the row; centre what each one holds, so a card
       without a note lines up with those that have one. */
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.olt-kpi-value { font-size: 1.5rem; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.olt-kpi-label {
    font-size: 0.72rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 0.25rem;
}
.olt-kpi-note { font-size: 0.72rem; color: #868e96; margin-top: 0.15rem; }
.olt-kpi-within .olt-kpi-note { color: #2f7d50; }
.olt-kpi-over { border-color: #F3C59E; background-color: #FDF3EA; }
.olt-kpi-over .olt-kpi-note { color: #b35c16; font-weight: 600; }

/* === Sections ============================================================== */
.olt-note { font-size: 0.9rem; color: #6c757d; padding: 0.5rem 0; }
/* Inside a card the card is the frame: charts draw no border of their own. */
.olt-graph { background-color: #ffffff; }

/* Dose legend: one clickable count per dose number. */
.olt-legend { display: flex; flex-wrap: wrap; gap: 0.4rem 0.6rem; margin-top: 0.5rem; }
.olt-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.6rem;
    border: 1px solid #dee2e6;
    border-radius: 999px;
    background: #ffffff;
    font-size: 0.82rem;
    cursor: pointer;
}
.olt-legend-item:hover:not(:disabled) { border-color: #8DA2DB; background: #eef1f8; }
.olt-legend-item:focus-visible { outline: 2px solid #1e40af; outline-offset: 2px; }
.olt-legend-item:disabled { cursor: default; opacity: 0.55; }
.olt-swatch { width: 0.75rem; height: 0.75rem; border-radius: 3px; border: 1px solid rgba(0,0,0,0.08); }
.olt-legend-count { font-weight: 600; font-variant-numeric: tabular-nums; }
.olt-legend-pct { color: #868e96; font-size: 0.75rem; }

/* Interval explorer. */
.olt-presets { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.5rem; }
.olt-preset {
    font-size: 0.8rem;
    padding: 0.2rem 0.65rem;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background: #ffffff;
    color: #1e40af;
    cursor: pointer;
}
.olt-preset:hover { background: #eef1f8; border-color: #8DA2DB; }
/* Time between milestones: presets and pickers in one row, then the chart with its
   statistics beside it. */
.olt-interval-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    margin-bottom: 0.75rem;
}
.olt-interval-controls .olt-presets { margin-bottom: 0; }
.olt-pickers { display: flex; gap: 0.75rem; }
.olt-picker { width: 220px; }
.olt-picker .olt-control-label { display: block; margin-bottom: 0.2rem; }
.olt-interval-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 200px;
    gap: 1rem;
    align-items: start;
}
.olt-interval-stats { padding-top: 0.5rem; }
.olt-stat-list { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.olt-stat-list th, .olt-stat-list td { padding: 0.35rem 0.25rem; border-bottom: 1px solid #f1f3f5; }
.olt-stat-list th { color: #6c757d; font-weight: 500; text-align: left; }
.olt-stat-list td { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.olt-caveat {
    font-size: 0.78rem;
    color: #6c757d;
    border-left: 3px solid #E8924A;
    padding: 0.25rem 0 0.25rem 0.6rem;
    margin-top: 0.5rem;
}
.olt-milestone-dropdown { font-size: 0.85rem; }
.olt-stats, .olt-metrics { border-collapse: collapse; font-size: 0.85rem; margin-top: 0.5rem; }
.olt-stats th, .olt-stats td { padding: 0.3rem 0.9rem; text-align: center; border-bottom: 1px solid #e9ecef; }
.olt-stats th { color: #495057; font-weight: 600; }
.olt-stats td { font-variant-numeric: tabular-nums; }

/* Grids. */
.olt-grid .olt-site-cell { cursor: pointer; text-decoration: underline dotted #adb5bd; }
.olt-grid .ag-row { cursor: pointer; }

/* Completers: the grid with the detail beside it. */
.olt-split { display: flex; gap: 1rem; align-items: flex-start; }
.olt-split-main { flex: 3 1 0; min-width: 0; }
.olt-split-side {
    flex: 2 1 0;
    min-width: 280px;
    border-left: 1px solid #e9ecef;
    padding: 0 0 0 1rem;
}
.olt-detail-title { font-weight: 600; margin-bottom: 0.4rem; }
.olt-metrics { width: 100%; }
.olt-metrics th, .olt-metrics td { padding: 0.3rem 0.4rem; border-bottom: 1px solid #f1f3f5; text-align: left; }
.olt-metrics th { font-weight: 500; color: #495057; }
.olt-metrics td { font-variant-numeric: tabular-nums; }

@media (max-width: 1199.98px) {
    .olt-split { flex-direction: column; }
    .olt-split-side { width: 100%; border-left: none; padding: 0; }
    .olt-interval-body { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 575.98px) {
    .olt-page { padding: 0.75rem 1rem 2rem 1rem; }
    .olt-pickers { flex-direction: column; }
    .olt-picker { width: 100%; }
}