body {
    background-color: #e9ecef;
    /* Always show scrollbar gutter so Bootstrap .container width is identical
       on every page regardless of whether the content overflows.
       Without this, short pages (admin) have no scrollbar and their container
       is ~15px wider than long pages (home), making the nav appear to shift. */
    overflow-y: scroll;
}

/* Centre all chart card headings */
#run-charts-panel h2 {
    text-align: center;
}

/* Centre chart images within their cards */
#run-charts-panel .card a.pop,
#run-charts-panel .card a.popJS {
    display: block;
    text-align: center;
}

.table-condensed {
    font-size: 14px;
}

.popover {
    max-width: 500px;
    max-height: 350px;
}

.popoverContents {
    width: 500px;
    display: flex;
    justify-content: center;
}

.popoverImage {
    max-width: 300px;
    max-height: 300px;
}

.popoverText {
    align-items: center;
    min-width: 200px;
    padding-top: 30px;
}

/* ══════════════════════════════════════════════
   Session grouping — 10-colour palette
   ══════════════════════════════════════════════ */

:root {
    --sc0: #2563eb;  --sc0-bg: #dbeafe;
    --sc1: #16a34a;  --sc1-bg: #dcfce7;
    --sc2: #ea580c;  --sc2-bg: #ffedd5;
    --sc3: #7c3aed;  --sc3-bg: #ede9fe;
    --sc4: #0d9488;  --sc4-bg: #ccfbf1;
    --sc5: #dc2626;  --sc5-bg: #fee2e2;
    --sc6: #4338ca;  --sc6-bg: #e0e7ff;
    --sc7: #b45309;  --sc7-bg: #fef3c7;
    --sc8: #db2777;  --sc8-bg: #fce7f3;
    --sc9: #0891b2;  --sc9-bg: #cffafe;
}

/* ── GROUP HEADER ROW ── */
.session-group-header {
    background-color: #f1f3f5 !important;
    border-top: 2px solid #ced4da !important;
    cursor: pointer;
    user-select: none;
}
.session-group-header:hover {
    background-color: #e2e6ea !important;
}
/* The single spanning cell — left-align everything so it sits under the Run column */
.session-header-run-cell {
    text-align: left !important;
    padding: 5px 8px !important;
    vertical-align: middle !important;
    font-size: 13px;
}
.session-toggle {
    display: inline-block;
    font-size: 10px;
    color: #6c757d;
    min-width: 12px;
}

/* ══════════════════════════════════════════════
   Child row colour — applied to BOTH <tr> and
   every <td> inside it so Bootstrap hover can't
   override the background.
   ══════════════════════════════════════════════ */

/* index 0 — Blue */
tr.session-row-color-0,
tr.session-row-color-0 > td {
    background-color: var(--sc0-bg) !important;
}
tr.session-row-color-0 {
    border-left: 4px solid var(--sc0) !important;
}

/* index 1 — Green */
tr.session-row-color-1,
tr.session-row-color-1 > td {
    background-color: var(--sc1-bg) !important;
}
tr.session-row-color-1 {
    border-left: 4px solid var(--sc1) !important;
}

/* index 2 — Orange */
tr.session-row-color-2,
tr.session-row-color-2 > td {
    background-color: var(--sc2-bg) !important;
}
tr.session-row-color-2 {
    border-left: 4px solid var(--sc2) !important;
}

/* index 3 — Purple */
tr.session-row-color-3,
tr.session-row-color-3 > td {
    background-color: var(--sc3-bg) !important;
}
tr.session-row-color-3 {
    border-left: 4px solid var(--sc3) !important;
}

/* index 4 — Teal */
tr.session-row-color-4,
tr.session-row-color-4 > td {
    background-color: var(--sc4-bg) !important;
}
tr.session-row-color-4 {
    border-left: 4px solid var(--sc4) !important;
}

/* index 5 — Red */
tr.session-row-color-5,
tr.session-row-color-5 > td {
    background-color: var(--sc5-bg) !important;
}
tr.session-row-color-5 {
    border-left: 4px solid var(--sc5) !important;
}

/* index 6 — Indigo */
tr.session-row-color-6,
tr.session-row-color-6 > td {
    background-color: var(--sc6-bg) !important;
}
tr.session-row-color-6 {
    border-left: 4px solid var(--sc6) !important;
}

/* index 7 — Amber */
tr.session-row-color-7,
tr.session-row-color-7 > td {
    background-color: var(--sc7-bg) !important;
}
tr.session-row-color-7 {
    border-left: 4px solid var(--sc7) !important;
}

/* index 8 — Pink */
tr.session-row-color-8,
tr.session-row-color-8 > td {
    background-color: var(--sc8-bg) !important;
}
tr.session-row-color-8 {
    border-left: 4px solid var(--sc8) !important;
}

/* index 9 — Cyan */
tr.session-row-color-9,
tr.session-row-color-9 > td {
    background-color: var(--sc9-bg) !important;
}
tr.session-row-color-9 {
    border-left: 4px solid var(--sc9) !important;
}

/* ── Badge colours in the group header ── */
.session-badge-color-0 { background-color: var(--sc0) !important; color: #fff; }
.session-badge-color-1 { background-color: var(--sc1) !important; color: #fff; }
.session-badge-color-2 { background-color: var(--sc2) !important; color: #fff; }
.session-badge-color-3 { background-color: var(--sc3) !important; color: #fff; }
.session-badge-color-4 { background-color: var(--sc4) !important; color: #fff; }
.session-badge-color-5 { background-color: var(--sc5) !important; color: #fff; }
.session-badge-color-6 { background-color: var(--sc6) !important; color: #fff; }
.session-badge-color-7 { background-color: var(--sc7) !important; color: #fff; }
.session-badge-color-8 { background-color: var(--sc8) !important; color: #fff; }
.session-badge-color-9 { background-color: var(--sc9) !important; color: #fff; }

/* ══════════════════════════════════════════════
   Run Information — session box & vehicle switcher
   (matches safety_benchmarking_dashboard-new-current)
   ══════════════════════════════════════════════ */

.run-info-session-box {
    background-color: #f0f4ff;
    border: 1px solid #d0d8f0;
}

.run-info-session-title {
    color: #344a7a;
}

/* Vehicle switcher buttons — 10 colour slots, one per vehicle index */
.veh-switcher-active-0  { background-color: #2563eb; color: #fff; border: none; }
.veh-switcher-active-1  { background-color: #16a34a; color: #fff; border: none; }
.veh-switcher-active-2  { background-color: #ea580c; color: #fff; border: none; }
.veh-switcher-active-3  { background-color: #7c3aed; color: #fff; border: none; }
.veh-switcher-active-4  { background-color: #0d9488; color: #fff; border: none; }
.veh-switcher-active-5  { background-color: #dc2626; color: #fff; border: none; }
.veh-switcher-active-6  { background-color: #4338ca; color: #fff; border: none; }
.veh-switcher-active-7  { background-color: #b45309; color: #fff; border: none; }
.veh-switcher-active-8  { background-color: #db2777; color: #fff; border: none; }
.veh-switcher-active-9  { background-color: #0891b2; color: #fff; border: none; }

.veh-switcher-inactive  {
    background-color: #e9ecef;
    color: #495057;
    border: 1px solid #ced4da;
}
.veh-switcher-inactive:hover {
    background-color: #dee2e6;
}

/* Status dot on vehicle switcher buttons */
.veh-status-dot {
    display: inline-block;
    width:  8px;
    height: 8px;
    border-radius: 50%;
    margin-left: 4px;
    vertical-align: middle;
}
.veh-status-complete   { background-color: #16a34a; }
.veh-status-error      { background-color: #dc2626; }
.veh-status-processing { background-color: #0891b2; }
.veh-status-new        { background-color: #9ca3af; }

/* ── Combolist field — predefined options list + free-text input ── */
.combolist-options {
    max-height: 140px;
    overflow-y: auto;
    background: #fff;
}
.combolist-opt {
    padding: 4px 10px;
    font-size: 13px;
    cursor: pointer;
    user-select: none;
    border-left: 3px solid transparent;
}
.combolist-opt:hover {
    background-color: #f0f4ff;
    border-left-color: #2563eb;
}
.combolist-opt-selected {
    background-color: #dbeafe !important;
    border-left-color: #2563eb !important;
    font-weight: 600;
    color: #1e3a8a;
}