/* app.css — mobile-first styles complementing Tailwind.
 *
 * Layout model:
 *   #map    = full-screen fixed background (the app IS the map on a phone)
 *   #sheet  = draggable bottom sheet with 3 snap points (peek/half/full)
 *   #topbar = floating status pill, offset below the notch
 * On md+ the sheet un-sticks from the bottom and docks as a left panel.
 */

:root {
  --sheet-peek: 180px;  /* handle + header toggle row + action bar */
  --sheet-half: 50vh;
  --sheet-full: 92vh;
}

html, body { margin: 0; height: 100%; }

/* Full-screen map underlay */
#map {
  position: fixed;
  inset: 0;
  z-index: 0;
  height: 100%;
  width: 100%;
}

/* Floating top pill — clear the status bar / notch */
#topbar {
  top: calc(env(safe-area-inset-top) + 10px);
  max-width: calc(100vw - 24px);
  white-space: nowrap;
}

/* ---- Bottom sheet (mobile) ------------------------------------------------ */
#sheet {
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--sheet-half);
  max-height: var(--sheet-full);
  transition: height 0.28s cubic-bezier(0.32, 0.72, 0, 1);
  will-change: height;
}
#sheet[data-state="peek"] { height: var(--sheet-peek); }
#sheet[data-state="half"] { height: var(--sheet-half); }
#sheet[data-state="full"] { height: var(--sheet-full); }

/* At peek, the scrollable body is empty of purpose — hide it so only the
   handle + header toggle + action bar show and the map dominates. */
#sheet[data-state="peek"] #sheetBody { display: none; }

/* While the user is actively dragging, JS sets an inline height and we drop
   the transition so it tracks the finger 1:1. */
#sheet.dragging { transition: none; }

#sheetHandle { cursor: grab; }
#sheetHandle:active { cursor: grabbing; }

/* ---- Numbered marker pins ------------------------------------------------- */
.wf-pin__dot {
  width: 30px;              /* a touch larger for touch targets */
  height: 30px;
  border-radius: 50%;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.45);
  border: 2px solid #fff;
}

/* Bigger Leaflet zoom controls for fingers, nudged above the sheet peek */
.leaflet-control-zoom a {
  width: 40px !important;
  height: 40px !important;
  line-height: 40px !important;
  font-size: 20px !important;
}
.leaflet-bottom { margin-bottom: calc(var(--sheet-peek) + 8px); }

/* SortableJS drag ghost */
.sortable-ghost { opacity: 0.4; }

/* Current-location "you are here" marker */
.wf-here__dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #3b82f6;
  border: 3px solid #fff;
  box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.25);
}

/* Tab buttons (Add / Import) */
[data-tab] { background: #f1f5f9; color: #475569; border-color: #e2e8f0; }
[data-tab].tab-active { background: #22c55e; color: #fff; border-color: #22c55e; }

/* Stop rows: comfortable touch height */
#stopList li { min-height: 52px; }

/* ---- Desktop: dock the sheet as a left panel ------------------------------ */
@media (min-width: 768px) {
  #sheet {
    top: 0;
    bottom: 0;
    left: 0;
    right: auto;
    width: 24rem;
    height: 100% !important;         /* override snap-point heights */
    border-right: 1px solid #e2e8f0;
    transition: none;
  }
  #map { left: 24rem; }              /* map fills the remaining width */
  #topbar {
    left: auto;
    right: 16px;
    transform: none;
    top: 16px;
  }
  .leaflet-bottom { margin-bottom: 0; }
}