/* ***************************************************
 * GENERAL LAYOUT
 * Structural layout rules for the analyzer sidebar,
 * map panel, and table panel.
 * *************************************************** */

.analyzer-sidebar {
  width: 460px;
  max-width: 100%;
}

.analyzer-map-panel {
  min-height: 420px;
  display: flex;
  flex-direction: column;
}

.analyzer-table-panel {
  min-width: 0;
}


/* ***************************************************
 * MAP LAYOUT
 * Layout for simulation map, including playback controls
 * and fullscreen-ready container structure.
 * *************************************************** */

/* Wrapper that contains map + controls + overlay */
#analyzer-map-simulation-shell {
  min-height: 0; /* Important for flexbox to allow shrinking */
  background-color: #fff;
}

/* Remove focus ring from the playback shell when it is used as
   a neutral keyboard target after closing the speed dropdown. */
#analyzer-map-simulation-shell:focus,
#analyzer-map-simulation-shell:focus-visible {
  outline: none;
  box-shadow: none;
}

/* Map container grows and fills available space */
#analyzer-map-simulation,
#analyzer-map-analysis {
  min-height: 0; /* Prevent overflow issues in flex layouts */
}

/* Note: .sesam-ellipsis lives in static/css/components.css.
   Nav-tabs styling (gray inactive, SESAM-blue hover/active) lives in
   static/css/base.css. */

/* ***************************************************
 * BADGES AND INTERACTIVE ELEMENTS
 * Utility styles used for output badges and clickable
 * links inside analyzer tables.
 * *************************************************** */

.text-bg-sesam {
  color: var(--sesam-blue) !important;
  background-color: rgb(226, 239, 254) !important;
}

.text-bg-light-sesam {
  color: var(--sesam-gray-400) !important;
  background-color: #f9f9f9 !important;
}

.edge-link,
.trip-link {
  cursor: pointer;
}

/* ***************************************************
 * CHART
 * Layout and styling for the trip statistics chart
 * and its metric selector buttons.
 * *************************************************** */

.chart-container {
  position: relative;
  min-height: 290px;
}

/* Ensure only the outer visible buttons have rounded corners. */
.trip-statistics-selector label.btn:first-of-type {
  border-top-left-radius: var(--bs-border-radius);
  border-bottom-left-radius: var(--bs-border-radius);
}

/* The global `.btn-check + .btn:hover` rule in base.css forces a dark-blue text color
   (meant for the light toolbar buttons), which clashes with these chart selector buttons.
   We therefore define all four states explicitly with the SESAM blue styling, distinguishing
   selected from unselected:
   - unselected: white background, blue text;
   - unselected + hover: solid blue background, white text;
   - selected (and selected + hover): solid blue background, white text.
   Direct properties are required because the base rule overrides the `--bs-btn-*` tokens. */
.trip-statistics-selector .btn-check:not(:checked) + .btn {
  color: var(--sesam-blue);
  border-color: var(--sesam-blue);
}

.trip-statistics-selector .btn-check:not(:checked) + .btn:hover {
  color: var(--sesam-blue);
  background-color: rgba(var(--sesam-blue-rgb), 0.12);
  border-color: var(--sesam-blue);
}

.trip-statistics-selector .btn-check:checked + .btn,
.trip-statistics-selector .btn-check:checked + .btn:hover {
  color: #fff;
  background-color: var(--sesam-blue);
  border-color: var(--sesam-blue);
}

.trip-statistics-selector label.btn:last-of-type {
  border-top-right-radius: var(--bs-border-radius);
  border-bottom-right-radius: var(--bs-border-radius);
}

/* Use identical sizing for chart control buttons and dropdown button. */
.trip-statistics-selector .btn,
[data-role="chart-filter-dropdown"] > .btn {
  font-size: 0.85rem;
  line-height: 1.5;
  padding: 0.375rem 0.75rem;
}

/* The chart filter dropdown's selected item uses the SESAM blue active highlight. */
[data-role="chart-filter-dropdown"] .dropdown-item.active,
[data-role="chart-filter-dropdown"] .dropdown-item:active {
  background-color: var(--sesam-blue);
  color: #fff;
}

/* The chart filter dropdown toggle ("All Trips") uses the same SESAM blue styling as the selector
   buttons. */
[data-role="chart-filter-dropdown"] > .btn {
  color: var(--sesam-blue);
  border-color: var(--sesam-blue);
}

[data-role="chart-filter-dropdown"] > .btn:hover,
[data-role="chart-filter-dropdown"] > .btn:focus-visible,
[data-role="chart-filter-dropdown"] > .btn.show {
  color: var(--sesam-blue);
  background-color: color-mix(in srgb, var(--sesam-blue) 12%, transparent);
  border-color: var(--sesam-blue);
}

/* ***************************************************
 * ANALYZER NAVIGATION TOOLBAR
 * Overview / run mode switch and run picker.
 * *************************************************** */

/* The run picker dropdown menu should feel like the secondary navigation buttons
   rather than the default blue (--bs-primary) active / grey hover. Re-bind the
   dropdown's own --bs-* tokens so the hovered and the current run use the same
   muted secondary tones as the surrounding btn-secondary buttons. */
.sesam-analyzer-nav .dropdown-menu {
  --bs-dropdown-link-hover-bg: var(--sesam-surface-muted);
  --bs-dropdown-link-active-bg: var(--sesam-gray-600);
  --bs-dropdown-link-active-color: #fff;
}

/* Separate the Overview (mode 1) button from the run controls (mode 2) with a small gap,
   and restore the rounded corners the btn-group would otherwise strip from the now
   free-standing Overview button and the adjacent control. The small radius matches the
   btn-group-sm size used by the toolbar. */
.sesam-analyzer-nav > .btn:first-child {
  margin-right: 0.5rem;
  border-radius: var(--bs-border-radius-sm) !important;
}

.sesam-analyzer-nav > .btn:first-child + .btn {
  border-top-left-radius: var(--bs-border-radius-sm) !important;
  border-bottom-left-radius: var(--bs-border-radius-sm) !important;
}

/* Make the previous / next arrow buttons a bit wider so they are easier to hit. */
.sesam-analyzer-nav #prevButton,
.sesam-analyzer-nav #nextButton {
  padding-left: 0.85rem;
  padding-right: 0.85rem;
}

/* When a run is selected the run controls form one continuous group (prev | run | next).
   The dropdown's own <ul> menu follows the toggle in the DOM, so Bootstrap treats the
   toggle as the last group item and rounds its right edge. Square it off (and the left
   edge of the next-run button) so the group reads as one connected pill. */
.sesam-analyzer-nav #prevButton ~ .dropdown-toggle {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.sesam-analyzer-nav #nextButton {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* At the first / last run the corresponding arrow is disabled. Bootstrap's default
   opacity:0.65 washes the whole button out, which contrasts too strongly with the solid
   group. Keep the secondary background at full opacity and only dim the arrow glyph so it
   still reads as disabled but stays visually part of the group. */
.sesam-analyzer-nav #prevButton.disabled,
.sesam-analyzer-nav #nextButton.disabled {
  opacity: 1;
  color: rgba(255, 255, 255, 0.45);
}

/* Add breathing room between the run label and the dropdown caret. */
.sesam-analyzer-nav .dropdown-toggle::after {
  margin-left: 0.6em;
}

/* ***************************************************
 * TABLES
 * Table-specific layout constraints for analyzer
 * DataTables instances.
 * *************************************************** */

/* Analyzer landing (simulation selection). The baseline and comparison tables
   are stacked in a flex column (`#analyzerSelect`) whose height is set by
   JavaScript to the remaining viewport space. Each pane takes an equal share
   (`flex: 1 1 0`), so before a baseline is picked the baseline table fills the
   whole area and after a pick the two tables split it roughly in half. The pane
   clips its overflow so a transient (pre-fit) page length can never push the
   document into a scroll; DataTables paging keeps every row reachable instead. */
.sesam-select-pane {
  display: flex;
  flex-direction: column;
  min-height: 0; /* allow the pane to shrink below its content in the flex column */
  flex: 1 1 0;
  overflow: hidden;
}

/* The card sizes to its content (header + fitted rows + footer) instead of
   stretching to fill the pane, so it never shows an empty framed strip below
   the footer. The leftover space of the pane stays outside the card border.
   `overflow: hidden` clips the square table/header corners to the rounded card
   edge. */
.sesam-select-card {
  overflow: hidden;
}

/* Keep all header and body cells on a single line. Without this, the mean ± stddev
   value cells would wrap to two lines on narrow viewports; forcing nowrap makes the
   DataTables responsive plugin collapse columns instead, which reads much better. */
#edgesTable td,
#edgesTable th,
#tripsTable td,
#tripsTable th {
  white-space: nowrap;
}

/* Keep paged table bodies visually aligned across the edges and trips tabs. The
   map action buttons would otherwise make button-bearing rows taller than
   plain text rows, so ten rows do not occupy the same height in both tables. */
#edgesTable tbody td,
#tripsTable tbody td {
  height: 2.35rem;
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
  vertical-align: middle;
}

#edgesTable button[data-edge-locate-edge-id],
#tripsTable button[data-trip-route-trip-id] {
  width: 1.5rem;
  height: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
}

/* Force the identifier column (first column) and the edge streetname column to be left-aligned for both
   header and body cells. DataTables 2 merges class names from overlapping
   columnDefs, so the body cells end up with both `dt-left dt-center` and
   `dt-center` wins by source order; the header inherits its alignment from
   the `<thead class="text-center">` wrapper. Override both explicitly. */
#edgesTable th:first-child,
#edgesTable td:first-child,
#edgesTable th:nth-child(3),
#edgesTable td:nth-child(3),
#tripsTable th:first-child,
#tripsTable td:first-child {
  text-align: left;
}

/* Keep DataTables wrappers within the available width. */
#edgesTable_wrapper,
#tripsTable_wrapper {
  max-width: 100%;
  overflow-x: hidden;
}

/* ***************************************************
   DATATABLES FOOTER
   *************************************************** */

/* Horizontal padding for all footer elements */
.analyzer-table-panel .dt-info,
.analyzer-table-panel .dt-search,
.analyzer-table-panel .dt-paging {
  padding-left: 0.8rem;
  padding-right: 0.8rem;
}

/* Info text styling */
.analyzer-table-panel .dt-info {
  font-size: 0.8rem;
  color: var(--bs-gray-400);
}

/* Hide "Search:" label */
.analyzer-table-panel .dt-search label {
  display: none;
}

/* Keep search field usable */
.analyzer-table-panel .dt-search input {
  min-width: 220px;
  height: 2rem;
  min-height: 2rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 0.9rem;
  line-height: 1.25;
}

.analyzer-table-panel .dt-paging .page-link {
  min-width: 2rem;
  padding: 0.3rem 0.55rem;
  font-size: 0.85rem;
  line-height: 1.2;
}

/* Bottom spacing to card border */
.analyzer-table-panel .dt-container > .row:last-child > div {
  padding-bottom: 0.55rem;
}

/* When layout wraps (narrow tables),
   add vertical spacing between footer elements */
.analyzer-table-panel .dt-container > .row:last-child > div > * {
  margin-top: 0.3rem;
  margin-bottom: 0.3rem;
}

/* ***************************************************
   PLAYBACK CONTROLS
   *************************************************** */

/* Ensure all transport buttons have equal width */
.analyzer-playback-controls__transport .btn {
  width: 32px;           /* fixed width - otherwise play/pause have different widths */
  height: 32px;
  display: inline-flex;    /* center icon properly */
  align-items: center;
  justify-content: center;
}

/* Use tabular numerals so equal-length time labels stay visually stable. */
.analyzer-playback-controls__time-label {
  appearance: none;
  border: 0;
  background: transparent;
  display: inline-block;
  padding: 0;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.analyzer-playback-controls__time-label:hover,
.analyzer-playback-controls__time-label:focus-visible {
  color: var(--bs-body-color) !important;
}

/* Let clicks on the speed label pass through to the dropdown button */
.analyzer-playback-controls [data-role="speed-dropdown-label"] {
  pointer-events: none;
}

/* Playback speed dropdown: enforce SESAM blue for btn-primary */
.analyzer-playback-controls [data-role="speed-dropdown-toggle"].btn-primary {
  --bs-btn-bg: var(--sesam-blue);
  --bs-btn-border-color: var(--sesam-blue);
  --bs-btn-hover-bg: var(--sesam-blue);
  --bs-btn-hover-border-color: var(--sesam-blue);
  --bs-btn-active-bg: var(--sesam-blue);
  --bs-btn-active-border-color: var(--sesam-blue);
}

.analyzer-playback-controls [data-role="speed-dropdown-toggle"].btn-primary:focus,
.analyzer-playback-controls [data-role="speed-dropdown-toggle"].btn-primary.focus {
  background-color: var(--sesam-blue);
  border-color: var(--sesam-blue);
  box-shadow: none;
}

/* Playback speed dropdown: fixed width */
.analyzer-playback-controls [data-role="speed-dropdown-toggle"] {
  width: 65px;              /* adjust as needed (e.g. 80–100px) */
  text-align: center;       /* keeps label centered */
  box-shadow: none;
}

/* Ensure text + caret are spaced nicely */
.analyzer-playback-controls [data-role="speed-dropdown-toggle"]::after {
  margin-left: 0.4rem;      /* default is ~0.255em → this increases spacing */
}

/* ***************************************************
   PLAYBACK LOOP SWITCH
   Compact vertical switch with icon (top) and toggle (bottom)
   *************************************************** */

/* Container: stack icon and switch vertically and align the block
   slightly lower so it matches the slider axis more closely. */
.analyzer-playback-controls__loop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 4px;
}

/* Remove Bootstrap default offset from form-switch */
.analyzer-playback-controls__loop.form-switch {
  padding-left: 0;
}

/* Icon label above the switch */
.analyzer-playback-controls__loop-label {
  margin-bottom: 0.2rem;
  font-size: 1rem;
  line-height: 1;
  color: var(--bs-gray-400);
  cursor: pointer;
  transition: color 0.1s ease;
}

/* Switch input: remove Bootstrap margins and render slightly smaller.
   transform-origin keeps visual alignment predictable. */
.analyzer-playback-controls__loop .form-check-input {
  margin: 0;
  margin-left: 0;
  transform: scale(0.85);
  transform-origin: top center;
  background-color: var(--bs-gray-100);
  border-color: var(--bs-gray-300);
  cursor: pointer;
  transition:
    background-color 0.1s ease,
    border-color 0.1s ease;
}

/* Off-state hover: make the loop control read as clickable without using the active color.
   Keep this darker than the default off state but clearly lighter than the SESAM-blue
   active state. The :has(:checked) guard prevents hover styles from muting the active state. */
.analyzer-playback-controls__loop:not(:has(.form-check-input:checked)):hover .analyzer-playback-controls__loop-label,
.analyzer-playback-controls__loop:not(:has(.form-check-input:checked)):focus-within .analyzer-playback-controls__loop-label {
  color: var(--bs-gray-500);
}

/* Apply the same off-state hover/focus contrast to the switch itself. */
.analyzer-playback-controls__loop:not(:has(.form-check-input:checked)):hover .form-check-input,
.analyzer-playback-controls__loop:not(:has(.form-check-input:checked)) .form-check-input:focus-visible {
  background-color: var(--bs-gray-200);
  border-color: var(--bs-gray-400);
}

/* Active state: use SESAM brand color for the switch */
.analyzer-playback-controls__loop .form-check-input:checked {
  background-color: var(--sesam-blue);
  border-color: var(--sesam-blue);
}

/* Active state: also highlight the loop icon */
.analyzer-playback-controls__loop:has(.form-check-input:checked) .analyzer-playback-controls__loop-label {
  color: var(--sesam-blue);
}

/* Focus state: remove default Bootstrap glow */
.analyzer-playback-controls__loop .form-check-input:focus {
  box-shadow: none;
}

/* ***************************************************
 * MAP INFO PANEL
 * Collapsible overlay panel on the left side of the map.
 * *************************************************** */

/* Main panel container */
.info-panel {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 20%;
  max-width: 320px;
  min-width: 240px;
  height: auto;
  max-height: calc(100% - 62px);

  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(6px);
  border: 1px solid var(--bs-gray-200);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  z-index: 5;

  display: flex;
  flex-direction: column;

  transition: transform 0.25s ease;

  overflow: hidden;

  /* Reset inherited MapLibre base font (12px/20px) to match Analyzer cards. */
  font-family: "Inter", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #858796;
}

/* Closed state (slide out to the left) */
.info-panel--closed {
  transform: translateX(calc(-100% - 10px));
}

/* Header with title + close button */
.info-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.95rem;
  font-weight: 700;
}

/* Body scroll area */
.info-panel__body {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
}

.info-panel__title {
  min-width: 0;
}

.info-panel__close-btn {
  flex: 0 0 auto;
  border: none;
  background: transparent;
  color: var(--sesam-blue);
  box-shadow: none;
}

.info-panel__close-btn:hover,
.info-panel__close-btn:focus,
.info-panel__close-btn:focus-visible,
.info-panel__close-btn:active {
  background: transparent;
  color: var(--sesam-blue);
  box-shadow: none;
}

.info-panel__metric {
  min-width: 0;
  flex: 1 1 auto;
}

.info-panel__metric b {
  font-weight: 700;
}

.info-panel .list-group-item:last-child {
  padding-bottom: 1.25rem !important;
}

.info-panel__edge-link {
  color: var(--sesam-blue);
  text-decoration: none;
  cursor: pointer;
}

.info-panel__edge-link:hover,
.info-panel__edge-link:focus,
.info-panel__edge-link:focus-visible {
  color: var(--sesam-blue);
  text-decoration: none;
}

/* Handle container when panel is closed */
.info-panel__handle {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 6;

  background: #fff;
  border-radius: 6px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

/* MapLibre-like handle button */
.info-panel__handle button {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

/* Hover / active like map controls */
.info-panel__handle button:hover {
  background: #f2f2f2;
}

.info-panel__handle button:active {
  background: #e6e6e6;
}

.info-panel__handle button:focus,
.info-panel__handle button:focus-visible {
  outline: none;
  box-shadow: none;
}

/* Icon styling */
.info-panel__handle button i {
  font-size: 14px;
  color: #333;
  line-height: 1;
}

/* RESPONSIVE BEHAVIOR */

@media (max-width: 1200px) {
  .info-panel {
    width: 28%;
  }
}

@media (max-width: 768px) {
  .info-panel {
    width: 75%;
    max-width: none;
  }
}

/* ***************************************************
 * ANALYSIS METRIC LEGEND
 * Map overlay for edge-coloring simulation metrics.
 * *************************************************** */

.analysis-metric-legend {
  min-width: 180px;
  max-width: min(260px, calc(100vw - 32px));
  padding: 0.65rem 0.75rem;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--bs-gray-200);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  font-family: "Inter", sans-serif;
  font-size: 0.8rem;
  color: var(--bs-gray-700);
}

.analysis-metric-legend__item {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.25rem;
  margin-left: 0.25rem;
  color: gray;
}

.analysis-metric-legend__swatch {
  width: 14px;
  height: 14px;
  border: 1px solid rgba(0, 0, 0, 0.16);
  border-radius: 3px;
}

/*
 * Ensure layer switcher dropdowns appear above legends. MapLibre control
 * corners are sibling containers, so the top-right corner itself needs a
 * higher z-index than the bottom corners.
 */

/* Keep the top-right controls, including the layer switcher dropdown, above bottom controls. */
#analyzer-map-analysis .maplibregl-ctrl-top-right {
  z-index: 20;
}

/* Keep lower control corners below dropdowns from top controls. */
#analyzer-map-analysis .maplibregl-ctrl-bottom-right,
#analyzer-map-analysis .maplibregl-ctrl-bottom-left {
  z-index: 10;
}

/* ***************************************************
 * COMPARE VIEW
 * Two simulations of the same scenario, color-coded:
 * the baseline ("before") and the variant ("after").
 * The comparison colors are app-local to the analyzer.
 * *************************************************** */

:root {
  --sesam-compare-baseline: var(--sesam-blue);
  --sesam-compare-baseline-rgb: var(--sesam-blue-rgb);
  --sesam-compare-variant: #c0631a; /* orange counterpart to the blue baseline */
  --sesam-compare-variant-rgb: 192, 99, 26;
}

/* Color-coded simulation sub-headers inside the unified Comparison card: a faint tinted background
 * sets each simulation apart; the separators are the normal list-group borders. */
.sesam-compare-header-baseline {
  background-color: rgba(var(--sesam-compare-baseline-rgb), 0.07);
}

.sesam-compare-header-variant {
  background-color: rgba(var(--sesam-compare-variant-rgb), 0.07);
}

/* Neutral sub-header introducing the aggregated averages block inside the Comparison card. */
.sesam-compare-header-stats {
  background-color: var(--bs-tertiary-bg);
}

/* As the last item in its flush list, Bootstrap drops this header's bottom border; restore the
 * normal list-group separator so the header is visually closed off from the metrics below. */
.list-group-flush > .sesam-compare-header-stats.list-group-item {
  border-bottom: var(--bs-border-width) solid var(--bs-border-color);
}

.sesam-compare-badge-baseline {
  background-color: var(--sesam-compare-baseline);
  color: #fff;
}

.sesam-compare-badge-variant {
  background-color: var(--sesam-compare-variant);
  color: #fff;
}

/* Baseline/variant value coloring in the summary panel. Bootstrap appends the metric popover to
 * <body>, so these utilities must be global rather than scoped to the summary card. */
.sesam-compare-text-baseline {
  color: var(--sesam-compare-baseline);
}

.sesam-compare-text-variant {
  color: var(--sesam-compare-variant);
}

/* Content-sized, left-packed metric rows for the analyzer sidebar cards. Each item keeps its
 * natural (content) width; when the card gets too narrow the items wrap one by one onto the next
 * line (e.g. 4 items become 3 + 1), so no horizontal space is wasted and nothing overflows. The
 * per-row `--cols-*` modifier classes are intentionally inert: the number of items per line is
 * decided by the available width, not a fixed column count. */
.sesam-metric-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  column-gap: 1.25rem;
  row-gap: 0.35rem;
}

/* The two-column groups (Statistics, Safety) use a real two-column grid instead of free wrapping, so
 * the entries in the right column line up flush across all rows. Columns are content-sized and
 * left-packed; `justify-items: start` keeps each entry left-aligned (neutralizing the items'
 * Bootstrap `.text-center`). */
.sesam-metric-grid--cols-2 {
  display: grid;
  grid-template-columns: max-content max-content;
  justify-content: start;
  justify-items: start;
}

/* The comparison mode/difference toolbar buttons use the same calm light-grey hover as the chart
 * selector buttons instead of Bootstrap's solid dark-grey outline-secondary hover. The active
 * (selected) button keeps its filled style, and disabled difference-unit buttons are excluded. */
.sesam-compare-mode-group .btn:not(.active):not(:disabled):hover,
.sesam-compare-delta-group .btn:not(.active):not(:disabled):hover {
  color: var(--bs-secondary);
  background-color: var(--bs-secondary-bg);
  border-color: var(--bs-secondary);
}

/* Rows of a non-matching scenario become unselectable after the first pick. */
.sesam-row-disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* ***************************************************
 * INDEX ACTION BUTTON
 * The toolbar action button on the analyzer index swaps between the
 * "Analyze" and "Compare" labels. A fixed min-width keeps it from
 * shifting in size when the label changes.
 * *************************************************** */

.sesam-analyzer-action-btn {
  min-width: 7.5rem;
  text-align: center;
}