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

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