/* Batch analysis styling.
 *
 * Lifted out of Base.html's inline <style> so the Analysis page can wear the same
 * skin: Batch is a panel there now, not a page of its own, and an inline block in
 * one template cannot be shared with another.
 */
body { background-color: var(--bs-tertiary-bg); }
        .summary-badge-custom {
            display: inline-block;
            border: 1px solid rgba(0, 0, 0, 0.12);
            box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
        }
        [data-bs-theme="dark"] .summary-badge-custom {
            border-color: rgba(255, 255, 255, 0.18);
        }
        .summary-badge-section { box-shadow: 0 0.06rem 0.35rem rgba(0,0,0,.04); }
        [data-bs-theme="dark"] .summary-badge-section { box-shadow: 0 0.12rem 0.5rem rgba(0,0,0,.2); }
        .batch-badge-col {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            padding: 0.25rem 0.55rem;
            border-radius: 2rem;
            border: 1px solid var(--bs-border-color);
            font-size: 0.78rem;
            font-weight: 500;
            cursor: pointer;
            user-select: none;
            transition: background 0.12s ease, border-color 0.12s ease;
        }
        .batch-badge-col:hover { filter: brightness(0.97); }
        .batch-badge-cancer { background: rgba(190, 18, 60, 0.12); border-color: rgba(190, 18, 60, 0.35); color: var(--bs-body-color); }
        .batch-badge-disease { background: rgba(3, 105, 161, 0.12); border-color: rgba(3, 105, 161, 0.35); }
        .batch-badge-elm { background: rgba(199, 126, 17, 0.18); border-color: rgba(199, 126, 17, 0.4); }
        .batch-badge-pem { background: rgba(202, 138, 4, 0.2); border-color: rgba(202, 138, 4, 0.45); }
        .batch-badge-pfam { background: rgba(50, 192, 35, 0.15); border-color: rgba(50, 192, 35, 0.4); }
        .batch-badge-scansite { background: rgba(30, 200, 200, 0.15); border-color: rgba(30, 200, 200, 0.4); }
        .batch-badge-ptm { background: rgba(209, 66, 250, 0.12); border-color: rgba(209, 66, 250, 0.35); }
        .batch-badge-patho { background: rgba(220, 38, 38, 0.1); border-color: rgba(220, 38, 38, 0.3); }
        .batch-badge-disorder { background: rgba(248, 113, 113, 0.15); border-color: rgba(220, 38, 38, 0.25); }
        .batch-badge-neutral { background: var(--bs-tertiary-bg); color: var(--bs-body-color); }
        .batch-feature-table-card table.summary-feature-dt td { vertical-align: middle; }
        .batch-feature-table-card .dt-buttons .dt-button,
        .batch-dt-buttons .dt-button {
            color: var(--bs-body-color) !important;
            font-size: 0.8125rem !important;
            font-weight: 500;
            opacity: 1 !important;
        }
        .batch-form-sections { min-width: 0; }
        .input-card, .result-card {
            background: var(--bs-body-bg);
            border: 1px solid var(--bs-border-color);
            border-radius: 12px;
            padding: 25px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.05);
        }
        .section-title {
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
            color: var(--bs-secondary-color);
            letter-spacing: 0.5px;
            margin: 10px 0 12px 0;
            border-bottom: 1px solid var(--bs-border-color);
            padding-bottom: 5px;
        }
        .form-label { font-size: 0.85rem; font-weight: 600; color: var(--bs-body-color); margin-bottom: 0.4rem; }
        .form-control-sm, .form-select-sm { border-radius: 6px; }
        .batch-result-root .stat-section-heading { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.02em; color: var(--bs-body-color); }
        .batch-result-root .stat-muted { font-size: 0.875rem; line-height: 1.45; color: var(--bs-secondary-color); }
        .batch-result-root .stat-panel { border: 1px solid var(--bs-border-color); border-radius: 0.65rem; background: var(--bs-tertiary-bg); padding: 1rem 1rem 0.75rem; margin-bottom: 1rem; }
        .batch-dash-grid > [class*="col"] { display: flex; }
        .batch-dash-deck {
            display: flex;
            flex-wrap: wrap;
            align-items: stretch;
            justify-content: flex-start;
            gap: 0.75rem;
        }
        .batch-dash-section-card {
            flex: 1 1 280px;
            max-width: 100%;
            min-height: 320px;
            display: flex;
            flex-direction: column;
            border: 1px solid var(--bs-border-color);
            border-radius: 0.5rem;
            background: var(--bs-body-bg);
            padding: 0.65rem 0.75rem 0.55rem;
            box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.04);
        }
        [data-bs-theme="dark"] .batch-dash-section-card {
            box-shadow: 0 0.125rem 0.35rem rgba(0, 0, 0, 0.35);
        }
        .batch-dash-section-card > .batch-dash-annotation-deck,
        .batch-dash-section-card > [id$="_matrix"] {
            flex: 1 1 auto;
        }
        #batch_panel_binding.batch-dash-section-card {
            flex: 1 1 100%;
        }
        .batch-dash-section-card__title {
            font-size: 0.8125rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            color: var(--bs-secondary-color);
            margin-bottom: 0.5rem;
        }
        .batch-dash-grid--center,
        .batch-dash-grid--cancer-row {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            gap: 0.5rem;
        }
        .batch-dash-grid--center > .batch-dash-plot-col,
        .batch-dash-grid--cancer-row > .batch-dash-plot-col {
            flex: 0 0 auto;
            max-width: 100%;
        }
        #batch_panel_cancer.batch-dash-section-card {
            flex: 0 0 auto;
            width: fit-content;
            max-width: 100%;
            min-height: 0;
            align-self: flex-start;
        }
        #batch_panel_cancer #batch_cancer_grid.batch-dash-grid--cancer-row {
            flex: 0 0 auto;
            width: fit-content;
            max-width: 100%;
            flex-wrap: nowrap;
            overflow-x: auto;
            align-items: flex-start;
            padding-bottom: 0.25rem;
        }
        .batch-dash-matrix-outer {
            display: flex;
            justify-content: flex-start;
            overflow-x: auto;
            max-width: 100%;
        }
        .batch-dash-matrix-outer .js-plotly-plot {
            max-width: 100%;
        }
        .batch-dash-plot-centered {
            margin-left: auto;
            margin-right: auto;
            max-width: 100%;
        }
        .batch-dash-annotation-bar-body {
            display: flex;
            justify-content: center;
            overflow-x: auto;
        }
        .batch-dash-annotation-deck {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            align-items: stretch;
            gap: 0.65rem;
        }
        .batch-dash-annotation-deck > .batch-dash-annotation-item {
            flex: 1 1 260px;
            max-width: 100%;
            min-height: 0;
            display: flex;
            flex-direction: column;
            border: none;
            border-radius: 0;
            padding: 0;
            background: transparent;
        }
        #batch_panel_annotations.batch-dash-section-card,
        #batch_panel_clinvar_matrix.batch-dash-section-card,
        #batch_panel_cancer_matrix.batch-dash-section-card {
            flex: 0 0 auto;
            width: fit-content;
            max-width: 100%;
            min-height: 0;
            align-self: flex-start;
        }
        #batch_panel_annotations .batch-dash-annotation-deck {
            width: fit-content;
            max-width: 100%;
        }
        .batch-dash-plot-host {
            flex: 1 1 auto;
            min-height: 260px;
            width: 100%;
        }
        .batch-api-echo-block {
            background: var(--bs-body-bg);
        }
        .batch-api-pre {
            max-height: 14rem;
            overflow: auto;
            margin: 0;
            padding: 0.65rem 0.75rem;
            border: 1px solid var(--bs-border-color);
            border-radius: 0.4rem;
            background: var(--bs-tertiary-bg);
            color: var(--bs-body-color);
            white-space: pre-wrap;
            word-break: break-word;
        }
        [data-bs-theme="dark"] .batch-result-root .alert-light {
            background: var(--bs-tertiary-bg);
            color: var(--bs-body-color);
            border-color: var(--bs-border-color);
        }
        [data-bs-theme="dark"] .batch-run-overlay {
            background: rgba(0, 0, 0, 0.55);
        }
        [data-bs-theme="dark"] .batch-dash-plot-card {
            background: var(--bs-body-bg);
        }
        [data-bs-theme="dark"] .batch-result-root .plotly .xtick text,
        [data-bs-theme="dark"] .batch-result-root .plotly .ytick text,
        [data-bs-theme="dark"] .batch-result-root .plotly .xaxislayer-above text,
        [data-bs-theme="dark"] .batch-result-root .plotly .yaxislayer-above text,
        [data-bs-theme="dark"] .batch-result-root .plotly .infolayer text,
        [data-bs-theme="dark"] .batch-result-root .plotly .legendtext {
            fill: #e9ecef !important;
        }
        .batch-dash-annotation-item__title {
            font-size: 0.75rem;
            font-weight: 600;
            color: var(--bs-secondary-color);
            margin-bottom: 0.35rem;
            line-height: 1.25;
        }
        .batch-run-overlay {
            position: fixed;
            inset: 0;
            z-index: 2000;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1rem;
            background: rgba(15, 23, 42, 0.45);
            backdrop-filter: blur(2px);
        }
        .batch-run-overlay__panel {
            width: min(32rem, 100%);
            border-radius: 0.75rem;
            border: 1px solid var(--bs-border-color);
            background: var(--bs-body-bg);
            box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.18);
            padding: 1.25rem 1.35rem 1.1rem;
        }
        .batch-run-steps {
            display: flex;
            flex-direction: column;
            gap: 0.65rem;
        }
        .batch-run-step {
            border: 1px solid var(--bs-border-color);
            border-radius: 0.5rem;
            padding: 0.55rem 0.65rem;
            background: var(--bs-body-bg);
        }
        .batch-run-step--done {
            background: var(--bs-success-bg-subtle, rgba(25, 135, 84, 0.08));
            border-color: var(--bs-success-border-subtle, rgba(25, 135, 84, 0.35));
        }
        .batch-run-step--active {
            border-color: var(--bs-primary);
            box-shadow: 0 0 0 1px rgba(var(--bs-primary-rgb), 0.15);
        }
        .batch-run-step--pending {
            opacity: 0.72;
        }
        .batch-run-step__head {
            display: flex;
            align-items: flex-start;
            gap: 0.5rem;
        }
        .batch-run-step__icon {
            flex-shrink: 0;
            width: 1.25rem;
            height: 1.25rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 1.1rem;
            line-height: 1;
            margin-top: 0.05rem;
        }
        .batch-run-step__label {
            font-size: 0.8125rem;
            font-weight: 600;
            line-height: 1.3;
            flex: 1;
        }
        .batch-run-step__meta {
            font-size: 0.75rem;
            color: var(--bs-secondary-color);
            margin-top: 0.35rem;
            padding-left: 1.75rem;
        }
        .batch-run-step__progress {
            height: 0.45rem;
            margin-top: 0.45rem;
            margin-left: 1.75rem;
        }
        .batch-run-overlay__panel {
            width: min(36rem, 100%);
        }
        .batch-run-overlay__panel .progress {
            height: 0.65rem;
        }
        body.batch-run-active {
            overflow: hidden;
        }
        body.batch-run-active #form,
        body.batch-run-active #result,
        body.batch-run-active .batch-sidebar-col {
            pointer-events: none;
            user-select: none;
        }
        .batch-dash-plot-card {
            border: 1px solid var(--bs-border-color);
            border-radius: 0.5rem;
            background: var(--bs-body-bg);
            padding: 0.65rem 0.65rem 0.35rem;
            width: auto;
            max-width: 100%;
            min-height: 300px;
            display: flex;
            flex-direction: column;
            box-sizing: border-box;
        }
        /* Score grids (pathogenicity, conservation, binding): full column width, fixed card size */
        .batch-dash-grid > [class*="col"] .batch-dash-plot-card {
            width: 100%;
        }
        .batch-dash-plot-title {
            font-size: 0.8125rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            color: var(--bs-secondary-color);
            margin-bottom: 0.35rem;
            line-height: 1.25;
        }
        .batch-dash-plot-slot {
            position: relative;
            flex-shrink: 0;
            min-height: 260px;
            height: 260px;
            width: 100%;
            max-width: 100%;
            flex: 1 1 auto;
            overflow: hidden;
            box-sizing: border-box;
        }
        .batch-dash-plot-slot .js-plotly-plot,
        .batch-dash-plot-slot .plotly {
            max-width: 100% !important;
        }
        .batch-track-section-title { color: var(--bs-body-color); }
        .batch-page-main { min-height: 0; }
        .batch-workspace-row { min-height: 0; }
        .batch-sidebar-col { min-height: 0; align-self: stretch; }
        .batch-sidebar-nav-sticky {
            position: sticky;
            top: 72px;
            max-height: calc(100vh - 5.5rem);
            overflow: hidden;
            display: flex;
            flex-direction: column;
            border: 1px solid var(--bs-border-color);
            border-radius: 0.75rem;
            padding: 0.85rem 0.65rem 0.75rem;
            background: var(--bs-body-bg);
            box-shadow: 0 0.125rem 0.5rem rgba(0,0,0,.05);
        }
        .batch-sidebar-brand {
            border: 1px solid var(--bs-border-color);
            border-radius: 0.65rem;
            padding: 0.65rem 0.75rem;
            background: linear-gradient(135deg, rgba(var(--bs-primary-rgb), 0.1) 0%, var(--bs-body-bg) 100%);
        }
        .batch-section-nav .list-group-item {
            font-size: 0.875rem;
            border-radius: 0.35rem;
            margin-bottom: 0.15rem;
        }
        .batch-section-nav .list-group-item.active {
            background-color: var(--bs-primary);
            color: #fff;
            border-color: var(--bs-primary);
        }
        .batch-report-section { scroll-margin-top: 5.5rem; }
        .batch-cohort-badge-dashboard {
            border: 1px solid var(--bs-border-color);
            border-radius: 0.65rem;
            padding: 0.85rem 1rem;
            background: var(--bs-body-bg);
        }
        .batch-cohort-section {
            padding-top: 0.65rem;
            margin-top: 0.65rem;
            border-top: 1px dashed var(--bs-border-color);
        }
        .batch-cohort-section:first-child {
            margin-top: 0;
            padding-top: 0;
            border-top: 0;
        }
        .batch-cohort-section-row {
            display: flex;
            flex-wrap: wrap;
            align-items: flex-start;
            gap: 0.65rem 1rem;
            padding-top: 0.65rem;
            margin-top: 0.65rem;
            border-top: 1px dashed var(--bs-border-color);
        }
        .batch-cohort-section-row .batch-cohort-section {
            flex: 1 1 280px;
            min-width: min(100%, 260px);
            max-width: 100%;
            margin-top: 0;
            padding-top: 0;
            border-top: 0;
        }
        .batch-dash-score-stack {
            flex: 1 1 100%;
            width: 100%;
            max-width: 100%;
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
            min-height: 0;
        }
        .batch-dash-score-stack > .batch-dash-section-card {
            flex: 0 0 auto;
            width: 100%;
            max-width: 100%;
            min-height: 0;
        }
        .batch-cohort-section__head {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 0.5rem 0.75rem;
            margin-bottom: 0.5rem;
        }
        .batch-cohort-section__title {
            font-size: 0.8125rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            color: var(--bs-secondary-color);
            margin: 0;
        }
        .batch-cohort-section__badges {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 0.25rem;
        }
        .batch-cohort-metrics {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem 0.65rem;
        }
        .batch-cohort-metric {
            min-width: 5.5rem;
            padding: 0.4rem 0.55rem;
            border: 1px solid var(--bs-border-color);
            border-radius: 0.45rem;
            background: var(--bs-tertiary-bg);
        }
        .batch-cohort-metric__label {
            font-size: 0.72rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.03em;
            color: var(--bs-secondary-color);
            line-height: 1.2;
            margin-bottom: 0.15rem;
        }
        .batch-cohort-metric__value {
            font-size: 1.15rem;
            font-weight: 700;
            font-variant-numeric: tabular-nums;
            color: var(--bs-body-color);
            line-height: 1.15;
        }
        .batch-cohort-clinvar-tiers {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
        }
        .batch-cohort-clinvar-tier {
            flex: 0 1 auto;
            min-width: 7rem;
            padding: 0.4rem 0.5rem;
            border: 1px solid var(--bs-border-color);
            border-radius: 0.45rem;
            background: var(--bs-tertiary-bg);
        }
        .batch-cohort-clinvar-tier__badge {
            display: flex;
            justify-content: center;
            margin-bottom: 0.2rem;
        }
        .batch-cohort-genome-regions {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-top: 0.35rem;
            padding-top: 0.5rem;
            border-top: 1px solid var(--bs-border-color-translucent);
        }
        .batch-cohort-genome-regions .batch-cohort-metric {
            flex: 0 1 auto;
            min-width: 6.5rem;
        }
        .batch-cohort-patho-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
        }
        .batch-cohort-patho-card {
            flex: 0 1 auto;
            min-width: 6.5rem;
            max-width: 10rem;
            padding: 0.45rem 0.5rem;
            border: 1px solid var(--bs-border-color);
            border-radius: 0.45rem;
            background: var(--bs-tertiary-bg);
            text-align: center;
        }
        .batch-cohort-patho-card__badges {
            display: flex;
            justify-content: center;
            margin-bottom: 0.25rem;
        }
        .batch-cohort-patho-card__value {
            font-size: 1.1rem;
            font-weight: 700;
            font-variant-numeric: tabular-nums;
            color: var(--bs-body-color);
            line-height: 1.2;
        }
        .batch-cohort-patho-card__label {
            font-size: 0.7rem;
            font-weight: 600;
            color: var(--bs-secondary-color);
            margin-top: 0.2rem;
            line-height: 1.2;
        }
        .batch-consensus-logo svg { display: block; margin: 0 auto; }
        .doc-hero {
            background: linear-gradient(135deg, rgba(var(--bs-primary-rgb), 0.12) 0%, rgba(var(--bs-primary-rgb), 0.03) 100%);
            border: 1px solid var(--bs-border-color);
            border-radius: 0.85rem;
            padding: 1.25rem 1.5rem;
        }
        .batch-page-intro {
            flex-shrink: 0;
        }
        @media (max-width: 991.98px) {
            .batch-sidebar-nav-sticky {
                position: relative;
                top: 0;
                max-height: none;
            }
        }