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

/* 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-border-color: var(--sesam-blue);
  --bs-btn-active-bg: var(--sesam-blue);
  --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);
}

.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;
}

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

/* Prevent wrapping in table headers and the first column. */
#edgesTable td:first-child,
#edgesTable th:first-child,
#tripsTable td:first-child,
#tripsTable th:first-child,
#edgesTable thead th,
#tripsTable thead th {
  white-space: nowrap;
}

/* Force the identifier column (first 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,
#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;
}

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

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

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