/*
 * Editor-local styles.
 *
 * Generic helpers (.sesam-selectable-card,
 * .sesam-content-height, focus reset,
 * .btn-outline-light, .list-group-item, .accordion-button, container
 * padding zero, inline-rename input for #id_simulation_name /
 * #scenario_name_input) live in static/css/base.css and
 * components.css.
 *
 * Only true editor-specific rules remain here.
 */

label {
  margin-bottom: 0 !important;
}

ul.simulation-options li {
  padding: 1.5rem 0;
}

/* "View log" accordion body in the save-progress modal. */
.accordion-body {
  overflow-y: scroll;
  max-height: 450px;
  padding: 1rem;
}

/* Editor pages render edge-to-edge: drop default container padding. */
.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl {
  padding-left: 0;
  padding-right: 0;
}

/* ***************************************************
 * MAP LOADING OVERLAY
 * *************************************************** */

#map-spinner-overlay {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* ***************************************************
 * ALLOWED VEHICLE CLASSES MODAL
 * *************************************************** */

#allowed-vclasses-box {
  background-color: #fafafa;
}

/* ***************************************************
 * SCENARIO NAME INLINE RENAME
 * #scenario_name_input picks up bold/dark-blue styling centrally.
 * Editor adds a font-size bump and placeholder tweak on top.
 * *************************************************** */

input#scenario_name_input {
  font-size: 1rem;
}

#scenario_name_input::placeholder {
  font-weight: normal;
  font-style: normal;
  opacity: 0.6;
}

#scenario_name_inline_rename .sesam-input-hover-bordered {
  width: auto;
  flex: 0 1 auto;
  min-width: 0;
}

#scenario_name_inline_rename {
  min-width: 0;
}

/* ***************************************************
 * SAVE PROGRESS MODAL
 * *************************************************** */

/* Indent all save-progress stages */
.save-stage-row {
  padding-left: 0.75rem;
}

/* ***************************************************
 * SMALL TEXT UTILITIES
 * *************************************************** */

/* Technical, secondary-looking element ID (e.g. "edge:1234567#0_2"). */
.sidebar-id-text {
  min-width: 0;
  flex: 1 1 auto;
  font-size: var(--sesam-text-meta);
  line-height: 1.2;
  opacity: 0.8;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* ***************************************************
 * FLOATING SELECTION PANEL (MAP OVERLAY)
 * Sliding selection panel overlay inside the editor map.
 * *************************************************** */

.editor-info-panel {
  position: absolute;
  top: 12px;
  left: 12px;
  width: min(420px, calc(100% - 24px));
  max-height: calc(100% - 24px);
  z-index: 8;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(6px);
  border: 1px solid var(--bs-gray-200);
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.25s ease;
}

.editor-info-panel--closed {
  transform: translateX(calc(-100% - 14px));
}

.editor-info-panel__header {
  font-size: var(--sesam-text-item);
  font-weight: 700;
  justify-content: space-between;
}

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

.editor-info-panel__body {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
}

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

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

@media (max-width: 768px) {
  .editor-info-panel {
    width: min(640px, calc(100% - 24px));
  }
}

/* ***************************************************
 * UNSAVED CHANGES PANEL (MAP OVERLAY)
 * Reuses the floating .editor-info-panel card, but is docked to the right so
 * it can be shown at the same time as the left-hand selection panel.
 * *************************************************** */

.editor-changes-panel {
  left: auto;
  right: 12px;
}

/* Slide the changes panel out to the right when closed (mirrors the
   selection panel, which slides out to the left). */
.editor-changes-panel--closed {
  transform: translateX(calc(100% + 14px));
}

/* Inline count pill inside the toolbar "Changes" button. The button is an
   inline flex container (align-items-center), so the pill is vertically
   centered next to the icon and label. */
.sesam-changes-badge {
  background: var(--sesam-blue);
  color: #fff;
  font-size: 0.75rem;
}

/* The "Changes" toolbar button only needs a subtle light-gray hover. It is not
   a persistent toggle: it is hidden entirely while the changes panel is open,
   so it never shows a pressed/active state. */
.sesam-changes-btn:hover,
.sesam-changes-btn:focus-visible {
  background-color: var(--bs-gray-200);
  border-color: var(--bs-gray-400);
  color: var(--bs-secondary);
}

.sesam-changes-btn:not(.disabled):active {
  background-color: var(--bs-gray-300);
  border-color: var(--bs-gray-400);
  color: var(--bs-secondary);
}

/* Change-list rows expose clickable lane-id links (they zoom to / highlight
   the affected lane on the map). */
.sesam-change-icon {
  width: 16px;
  text-align: center;
  color: var(--sesam-blue);
}

.sesam-change-detail {
  font-size: 0.8125rem;
  min-width: 0;
}

/* Blue, link-styled lane id. A connection change shows two of these (from / to),
   each independently clickable. */
.sesam-change-link {
  color: var(--sesam-blue);
  cursor: pointer;
  text-decoration: none;
}

.sesam-change-link:hover,
.sesam-change-link:focus-visible {
  text-decoration: underline;
}

/* Muted arrow separating the from- and to-lane of a connection change. */
.sesam-change-sep {
  color: var(--bs-secondary-color, #6c757d);
}

/* ***************************************************
 * LANE PERMISSIONS ROW
 * *************************************************** */

#lane_allow_icons_popover_anchor {
  min-width: 0;
}

#lane_allow_icons {
  min-width: 0;
  row-gap: 0.125rem;
}

#lane_allow_icons > i {
  flex: 0 0 auto;
}

#allow_edit_btn {
  white-space: nowrap;
}

/* Give the lane-row action buttons (Copy / Edit / status toggle) a shared
 * minimum width so they line up to the same size in the right-hand column. */
#lane_selection_id_copy_btn,
#allow_edit_btn,
#lane_status_toggle_btn {
  min-width: 4rem;
}

/* ***************************************************
 * CONNECTIONS SECTION (LANE DETAILS)
 * *************************************************** */

.editor-connections-section {
  margin-top: 0.5rem;
}

.editor-connections-divider {
  display: flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0.25rem 0.875rem;
  background: var(--bs-gray-100);
  color: #858796;
  border-top: 1px solid var(--bs-gray-200);
  border-bottom: 1px solid var(--bs-gray-200);
}

.editor-connections-title-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.editor-connections-title-icon {
  color: inherit;
  font-size: 0.8125rem;
}

.editor-connections-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: inherit;
}

/* Connection-list row alignment helpers. */
.sesam-conn-text {
  align-self: baseline;
}

/* Keep the road icon on the same line as the "Lane:" text. */
.sesam-conn-icon {
  align-self: baseline;
}

.sesam-conn-caret,
.sesam-conn-actions {
  align-self: center;
}

.sesam-conn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Connection "hand" (select) button with three explicit visual states:
 * - Off: default outlined button.
 * - Hover: light gray fill, clearly lighter than the clicked state.
 * - Clicked/active: solid secondary fill, shown while this connection is the
 *   active map selection. The lighter hover must never look stronger than the
 *   darker clicked state, so the hover rule is scoped to non-active buttons. */
.sesam-conn-hand-btn:not(.active):hover,
.sesam-conn-hand-btn:not(.active):focus-visible {
  background-color: var(--bs-gray-400);
  border-color: var(--bs-gray-600);
  color: var(--bs-secondary);
}

.sesam-conn-hand-btn.active,
.sesam-conn-hand-btn.active:hover,
.sesam-conn-hand-btn.active:focus-visible {
  background-color: var(--bs-secondary);
  border-color: var(--bs-secondary);
  color: #fff;
}

.sesam-conn-icon,
.sesam-conn-actions i {
  line-height: 1;
}

/* Clickable connection rows: select on click with a light-blue hover hint,
   mirroring the phase-plan rows. */
.editor-conn-row {
  cursor: pointer;
}

.editor-conn-row:hover,
.editor-conn-row:focus-visible {
  background-color: var(--sesam-blue-soft, rgba(13, 110, 253, 0.06));
}

/* ***************************************************
 * SIGNAL PLAN (JUNCTION DETAILS)
 * *************************************************** */

/* On unsignalized junctions the cycle-time row is hidden, which leaves it as the
   list' :last-child (so Bootstrap drops its border) while "Junction Control" keeps
   a dangling bottom border. Remove that border when the next row is hidden. */
#junction_control_row:has(+ #junction_cycle_time_row.d-none) {
  border-bottom-width: 0;
}

/* The Phase Plan divider already separates the section from the cycle-time row,
   so it does not need the connections-section top margin. */
#junction_signal_plan_body {
  margin-top: 0;
}

/* Vertical phase list of a traffic-light program. No inner scroll: the whole
   selection panel grows (and scrolls as one unit) instead. Extra bottom space so
   the last phase does not look cut off. */
.editor-phase-list {
  padding-bottom: 0.5rem;
}

/* One clickable phase row. Selection is shown via a caret (not a background);
   hovering gives a light-blue hint and a clickable cursor. */
.editor-phase-row {
  cursor: pointer;
}

.editor-phase-row:hover,
.editor-phase-row:focus-visible {
  background-color: var(--sesam-blue-soft, rgba(13, 110, 253, 0.06));
}

/* Caret column marking the selected phase (aligned with the connections caret). */
.editor-phase-caret {
  width: 16px;
  align-self: center;
}

/* Small, grey phase label (matching the "Lane:" label in the connection rows). */
.editor-phase-label {
  font-size: 0.8125rem;
  color: var(--bs-secondary-color, #6c757d);
}

/* Extra spacing between the phase duration and its (min/max) range. */
.editor-phase-range {
  margin-left: 0.6rem;
}

/* Phase timing on the nominal cycle timeline (offset and width set from JS). */
.editor-phase-share {
  margin-top: 0.25rem;
  height: 4px;
  border-radius: 999px;
  background: var(--bs-gray-200);
  overflow: hidden;
}

.editor-phase-share__fill {
  height: 100%;
  border-radius: inherit;
  background: var(--sesam-blue, #0d6efd);
}

.sesam-tls-summary {
  background: var(--bs-gray-100);
  border: 1px solid var(--bs-gray-200);
}

.sesam-tls-modal-heading {
  min-width: 0;
  flex: 1 1 auto;
}

.sesam-tls-modal-context {
  min-width: 0;
}

.sesam-tls-modal-identifier {
  min-width: 0;
  flex: 1 1 12rem;
  color: var(--bs-secondary-color);
}

.sesam-tls-modal-identifier > i {
  width: 1rem;
  text-align: center;
}

.sesam-tls-phase-card {
  background: var(--sesam-card-bg, var(--bs-body-bg));
}

.sesam-tls-phase-card__layout {
  display: grid;
  grid-template-columns: minmax(9rem, 11rem) minmax(0, 1fr);
  gap: 1rem;
  align-items: stretch;
}

.sesam-tls-phase-card__content {
  min-width: 0;
}

.sesam-tls-phase-preview {
  min-width: 0;
  min-height: 7.5rem;
  padding: 0.25rem;
  overflow: hidden;
  border: 1px solid var(--bs-gray-300);
  border-radius: var(--bs-border-radius);
  background: var(--bs-gray-100);
}

.sesam-tls-junction-svg {
  display: block;
  width: 100%;
  height: 100%;
}

.sesam-tls-junction-svg__lane {
  fill: var(--bs-gray-300);
  stroke: var(--bs-gray-500);
  stroke-width: 0.75;
  fill-rule: evenodd;
}

.sesam-tls-junction-svg__junction {
  fill: var(--bs-gray-200);
  stroke: var(--bs-gray-500);
  stroke-width: 1;
  fill-rule: evenodd;
}

.sesam-tls-junction-svg__connection-casing,
.sesam-tls-junction-svg__connection {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sesam-tls-junction-svg__connection-casing {
  stroke: var(--sesam-card-bg, var(--bs-body-bg));
  stroke-width: 7;
}

.sesam-tls-junction-svg__connection {
  stroke-width: 4;
}

/* Unsaved signalized connections have geometry but no authoritative SUMO link
   index/state until netconvert processes the staged topology. */
.sesam-tls-junction-svg__connection--pending {
  stroke: var(--bs-secondary-color);
  stroke-dasharray: 7 5;
}

.sesam-tls-junction-svg__arrow {
  stroke: var(--sesam-card-bg, var(--bs-body-bg));
  stroke-width: 0.75;
  stroke-linejoin: round;
}

.sesam-tls-junction-svg__arrow--pending {
  fill: var(--bs-secondary-color);
}

/* Variable phases use nested extents with one nominal start: maximum behind
   duration behind minimum. The darker color represents the firmer timing bound. */
.sesam-tls-phase-share {
  position: relative;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--bs-gray-200);
}

.sesam-tls-phase-share__maximum,
.sesam-tls-phase-share__fill,
.sesam-tls-phase-share__minimum {
  position: absolute;
  top: 0;
  height: 100%;
  border-radius: inherit;
  transition:
    left 120ms ease,
    width 120ms ease;
}

.sesam-tls-phase-share__maximum {
  background: rgba(var(--sesam-blue-rgb), 0.22);
}

.sesam-tls-phase-share__fill {
  background: var(--sesam-blue);
}

.sesam-tls-phase-share--variable .sesam-tls-phase-share__fill {
  background: rgba(var(--sesam-blue-rgb), 0.55);
}

.sesam-tls-phase-share__minimum {
  background: var(--sesam-blue);
}

.sesam-tls-timing-input {
  min-width: 5.5rem;
}

@media (max-width: 767.98px) {
  .sesam-tls-phase-card__layout {
    grid-template-columns: 1fr;
  }

  .sesam-tls-phase-preview {
    height: 10rem;
  }
}

/* Allow the tab body to shrink within the application viewport without rebuilding the map. */
.sesam-editor-views { min-height: 0; }

/* Bootstrap table cells use their own color variable instead of inheriting text-muted. */
.sesam-demand-table { --bs-table-color: var(--bs-secondary-color); }

.sesam-demand-unavailable { color: var(--sesam-gray-500); }
/* vTypeDistributions: a stacked bar shows the share of every member type, the legend below names them. Segment
   widths and colors are set per member in demand.js (data from the scenario, one hue per member). */
.sesam-demand-distribution-id { width: 14rem; }
.sesam-demand-share-bar { height: 0.75rem; max-width: 40rem; border-radius: 0.375rem; overflow: hidden; }
.sesam-demand-share-bar .progress { height: 100%; border-radius: 0; }
.sesam-demand-share-legend { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; margin-top: 0.5rem; max-width: 40rem; }
.sesam-demand-share-legend li { display: inline-flex; align-items: center; gap: 0.35rem; }
.sesam-demand-share-dot { display: inline-block; width: 0.65rem; height: 0.65rem; border-radius: 50%; }

/* Reserve the input group's width in both states to prevent table layout shifts. */
.sesam-demand-scale-control { width: 12rem; }

/* Keep the per-vType demand scaling control compact. */
.sesam-demand-scale-group { max-width: 12rem; }

/* "Not set" button swaps its label to "Click to set" on hover/focus. */
.sesam-demand-unset { min-width: 7.5rem; white-space: nowrap; }
.sesam-demand-unset::before { content: "Not set"; }
.sesam-demand-unset:hover::before,
.sesam-demand-unset:focus-visible::before { content: "Click to set"; }

/* Center compact disabled buttons in a slot matching the normal form-control height. */
.sesam-rerouting-disabled-slot {
  display: flex;
  align-items: center;
  height: calc(2.25rem + 2px);
}

.sesam-rerouting-probability-unset,
.sesam-rerouting-period-unset,
.sesam-rerouting-pre-period-unset,
.sesam-rerouting-adaptation-interval-unset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  white-space: nowrap;
}
.sesam-rerouting-probability-unset::before { content: "Disabled (0%)"; }
.sesam-rerouting-probability-unset:hover::before,
.sesam-rerouting-probability-unset:focus-visible::before { content: "Click to adjust"; }

.sesam-rerouting-period-unset::before { content: "Disabled (no updates)"; }
.sesam-rerouting-period-unset:hover::before,
.sesam-rerouting-period-unset:focus-visible::before { content: "Click to adjust"; }

.sesam-rerouting-pre-period-unset::before { content: "Disabled (no pre-departure updates)"; }
.sesam-rerouting-pre-period-unset:hover::before,
.sesam-rerouting-pre-period-unset:focus-visible::before { content: "Click to adjust"; }

.sesam-rerouting-adaptation-interval-unset::before { content: "Disabled (No updates)"; }
.sesam-rerouting-adaptation-interval-unset:hover::before,
.sesam-rerouting-adaptation-interval-unset:focus-visible::before { content: "Click to adjust"; }

/* Brief flash when a demand row is opened from the unsaved-changes panel. */
@keyframes sesam-demand-row-flash {
  from { background-color: var(--bs-warning-bg-subtle, #fff3cd); }
  to { background-color: transparent; }
}
.sesam-demand-row-highlight > td { animation: sesam-demand-row-flash 1.6s ease-out; }