/* ***************************************************
 * 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;
}

.analyzer-overview-metric-grid {
  row-gap: 0.35rem !important;
}

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

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

/* Apply SESAM blue styling to the chart selector buttons. */
.trip-statistics-selector .btn-outline-primary,
[data-role="chart-filter-dropdown"] .btn-outline-primary {
  --bs-btn-color: var(--sesam-blue);
  --bs-btn-border-color: var(--sesam-blue);
  --bs-btn-hover-bg: var(--sesam-blue);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-border-color: var(--sesam-blue);
  --bs-btn-active-bg: var(--sesam-blue);
  --bs-btn-active-color: #fff;
  --bs-btn-active-border-color: var(--sesam-blue);
  --bs-btn-disabled-color: var(--sesam-blue);
  --bs-btn-disabled-border-color: var(--sesam-blue);
}

/* 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 and distinguish selected from unselected:
   - unselected: white background, blue text;
   - unselected + hover: muted-grey background (matching the dropdown hover), blue text;
   - selected (and selected + hover): solid SESAM 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:hover {
  color: var(--sesam-blue);
  background-color: var(--sesam-surface-muted);
  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);
}

[data-role="chart-filter-dropdown"] .btn-outline-primary:hover,
[data-role="chart-filter-dropdown"] .btn-outline-primary.show {
  color: #fff;
  background-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;
}

/* ***************************************************
 * 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.
 * *************************************************** */

/* 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;
}