/* Disposition · Screen failures (pages/screen_failures.py). Auto-served by Dash.
   Same sidebar layout and KPI bar as the Disposition overview (participant_disposition.css);
   visit colours come inline from callbacks/screen_failures.py. */

@media (min-width: 992px) {
    #page-content-wrapper:has(.sf-page) { display: flex; flex-direction: column; }
    #page-content-wrapper:has(.sf-page) > div {
        flex: 1; min-height: 0; display: flex; flex-direction: column;
    }
    #_pages_content:has(.sf-page) { flex: 1; min-height: 0; display: flex; flex-direction: column; }
    .sf-page, .sf-layout { flex: 1; min-height: 0; }
}

.sf-page { width: 100%; background-color: #ffffff; display: flex; flex-direction: column; }
.sf-layout { display: flex; flex-direction: row; align-items: stretch; }

/* === Sidebar =========================================================== */
.sf-sidebar {
    flex: 0 0 240px;
    width: 240px;
    background-color: #f8f9fa;
    border-right: 1px solid #dee2e6;
    padding: 1rem 1rem 1.5rem 1rem;
    overflow-y: auto;
}
.sf-sidebar-header {
    font-weight: 600;
    font-size: 0.85rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.75rem;
}
.sf-label {
    display: block;
    font-weight: 500;
    font-size: 0.8rem;
    color: #495057;
    margin: 0.5rem 0 0.25rem 0;
}
.sf-dropdown { font-size: 0.85rem; margin-bottom: 0.5rem; }
.sf-radio { display: flex; flex-direction: column; gap: 0.15rem; }
.sf-radio-input { margin-right: 0.4rem; }
.sf-radio-label { font-size: 0.85rem; color: #212529; cursor: pointer; }
.sf-sep { border-top: 1px solid #dee2e6; margin: 1rem 0 0.5rem 0; }

/* === Content =========================================================== */
.sf-content {
    flex: 1 1 auto;
    min-width: 0;
    padding: 1rem 1.25rem 2rem 1.25rem;
    overflow-y: auto;
}
.sf-message { font-size: 0.85rem; color: #6c757d; margin-bottom: 0.5rem; min-height: 1rem; }

.sf-kpi-bar { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1rem; }
.sf-kpi {
    flex: 1 1 0;
    min-width: 120px;
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    padding: 0.7rem 0.9rem;
    text-align: center;
}
.sf-kpi-value { font-size: 1.5rem; font-weight: 600; color: #212529; line-height: 1.1; }
.sf-kpi-label {
    font-size: 0.72rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 0.25rem;
}

.sf-section-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 1rem 0 0.2rem 0;
}
.sf-subnote { font-size: 0.78rem; color: #868e96; margin: 0 0 0.5rem 0; }

/* Inclusion and Exclusion side by side; stacked on narrow screens. */
.sf-charts { display: flex; gap: 1rem; align-items: flex-start; }
.sf-chart { flex: 1 1 0; min-width: 0; }
.sf-chart-title { font-size: 0.85rem; font-weight: 600; color: #343a40; margin-bottom: 0.2rem; }
.sf-graph {
    border: 1px solid #e9ecef;
    border-radius: 4px;
    background-color: #ffffff;
}
.sf-graph .bars path { cursor: pointer; }

.sf-sites-grid .sf-site-cell { cursor: pointer; text-decoration: underline dotted #adb5bd; }
/* Count cells open the participants behind them: they read as links. */
.sf-sites-grid .sf-count-cell { cursor: pointer; color: #1e40af; font-weight: 500; }
.sf-sites-grid .sf-count-cell:hover { text-decoration: underline; background-color: #eef1f8; }

@media (max-width: 1199.98px) {
    .sf-charts { flex-direction: column; }
    .sf-chart { width: 100%; }
}
@media (max-width: 991.98px) {
    .sf-layout { flex-direction: column; }
    .sf-sidebar {
        flex: 0 0 auto;
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #dee2e6;
        padding: 0.75rem 1rem;
        overflow-y: visible;
    }
    .sf-content { padding: 0.75rem 1rem 2rem 1rem; overflow-y: visible; }
    .sf-kpi { flex: 1 1 40%; }
}