/* Remove all page scrolling */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;              /* ✅ removes both vertical & horizontal scroll */
  overscroll-behavior: none;     /* ✅ prevents rubber-band scrolling */
}

/* Dash main container */
#_dash-app-content {
  height: 100vh;
  overflow: hidden;
}

/* If you have an outer wrapper, also lock it */
.app-container,
#app-container {
  height: 100vh;
  overflow: hidden;
}

/* Phone frame should not scroll */
#phone-frame, 
#inner-screen,
.phone-frame,
.inner-screen {
  overflow: hidden !important;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  overscroll-behavior: none;
}

#_dash-app-content {
  height: 100vh;
  overflow: hidden;
}

#phone-wrapper, #phone-frame, #inner-screen {
  overflow: hidden !important;
}

/* Shift setup overlay should not scroll */
/* Outer scroll container */
#shift-setup-card {
  overflow-y: auto !important;
  overflow-x: hidden !important;

  /* Keep scroll chaining ON (default) */
  overscroll-behavior: auto;

  /* Optional: smoother on iOS */
  -webkit-overflow-scrolling: touch;

  /* Hide scrollbar */
  scrollbar-width: none; /* Firefox */
}
#shift-setup-card::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* Only the inner content scrolls */
#shift-setup-scroll {
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;              /* Firefox */
}
#shift-setup-scroll::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}

/* =========================
   DATE/TIME DROPDOWNS (single scroll)
   dd-start-date, dd-start-time, dd-end-date, dd-end-time
========================= */

/* 1) Outer dropdown menu should NOT scroll */
#dd-start-date .Select-menu-outer,
#dd-start-time .Select-menu-outer,
#dd-end-date .Select-menu-outer,
#dd-end-time .Select-menu-outer {
  max-height: 240px !important;
  overflow: hidden !important;
}

/* 2) Inner virtualized list is the ONLY scroller */
#dd-start-date .VirtualSelectGrid,
#dd-start-time .VirtualSelectGrid,
#dd-end-date .VirtualSelectGrid,
#dd-end-time .VirtualSelectGrid {
  max-height: 240px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;}

/* 3) Extra internal wrappers should not introduce scroll */
#dd-start-date .Select-menu,
#dd-start-time .Select-menu,
#dd-end-date .Select-menu,
#dd-end-time .Select-menu {
  overflow: visible !important;
}

/* 4) Optional: hide scrollbar visually */
#dd-start-date .VirtualSelectGrid::-webkit-scrollbar,
#dd-start-time .VirtualSelectGrid::-webkit-scrollbar,
#dd-end-date .VirtualSelectGrid::-webkit-scrollbar,
#dd-end-time .VirtualSelectGrid::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}

#dd-start-date .VirtualSelectGrid,
#dd-start-time .VirtualSelectGrid,
#dd-end-date .VirtualSelectGrid,
#dd-end-time .VirtualSelectGrid {
  scrollbar-width: none; /* Firefox */
}

/* =====================================================
   START LOCATION DROPDOWN
===================================================== */

/* Container / control */
#start-location-dropdown .Select-control {
  background-color: #050608;
  border-color: #27272f;
  color: #f9fafb;
}

/* Selected value text */
#start-location-dropdown .Select-value-label {
  color: #f9fafb;
}

/* Dropdown menu panel */
#start-location-dropdown .Select-menu-outer {
  background-color: #050608;
  border-color: #27272f;
  max-height: 180px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Individual options */
#start-location-dropdown .VirtualizedSelectOption {
  color: #e5e7eb;
}

/* Focused option */
#start-location-dropdown .VirtualizedSelectFocusedOption {
  background-color: #111827;
}


/* =====================================================
   SHIFT DROPDOWN
===================================================== */

/* Container / control */
#shift-dropdown .Select-control {
  background-color: #050608;
  border-color: #27272f;
  color: #f9fafb;
}

/* Selected value text */
#shift-dropdown .Select-value-label {
  color: #f9fafb;
}

/* Dropdown menu panel */
#shift-dropdown .Select-menu-outer {
  background-color: #050608;
  border-color: #27272f;
  max-height: 180px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Individual options */
#shift-dropdown .VirtualizedSelectOption {
  color: #e5e7eb;
}

/* Focused option */
#shift-dropdown .VirtualizedSelectFocusedOption {
  background-color: #111827;
}


/* =====================================================
   RELOCATION DROPDOWN
===================================================== */

/* Dropdown menu panel */
#relocation-dropdown .Select-menu-outer {
  max-height: 180px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Focused option */
#relocation-dropdown .VirtualizedSelectFocusedOption {
  background-color: #111827;
}

/* ===============================
   BURGER MENU STYLING
================================= */

/* Smooth fade-in animation */
#burger-menu {
  animation: fadeSlideIn 0.18s ease-out;
}

/* Menu item base */
#burger-menu button {
  transition: background 0.15s ease, transform 0.05s ease;
}

/* Hover effect */
#burger-menu button:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}

/* Active click effect */
#burger-menu button:active {
  transform: scale(0.97);
}

/* Divider styling */
#burger-menu hr,
#burger-menu .divider {
  border: none;
  height: 1px;
  background: rgba(255,255,255,0.08);
  margin: 8px 0;
}

/* Optional subtle glow */
#burger-menu {
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.55);
}

/* ===============================
   ANIMATION
================================= */

@keyframes fadeSlideIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* =========================
   START LOCATION DROPDOWN (single scroll + stronger z-index)
   start-location-dropdown
========================= */

/* Outer shell: visible height, no scroll bar */
/* Start-location dropdown: outer menu doesn't scroll */
#start-location-dropdown .Select-menu-outer {
  max-height: 240px !important;
  overflow: hidden !important; /* prevent outer scrollbar */
}

/* Inner list is the scroller */
#start-location-dropdown .VirtualSelectGrid {
  max-height: 240px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;

  /* Allow chaining to parent when it hits ends */
  overscroll-behavior: auto;

  -webkit-overflow-scrolling: touch;

  /* Hide scrollbar */
  scrollbar-width: none;
}
#start-location-dropdown .VirtualSelectGrid::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* =====================================================
   RELOCATION CARD + DROPDOWN
   Goal:
   - Outer card can scroll if content grows
   - Dropdown list scrolls internally
   - When dropdown hits top/bottom, scroll continues on outer card (chaining)
   - Hide scrollbars visually
===================================================== */

/* -----------------------------
   1) Outer relocation card scroll (if needed)
------------------------------ */
#relocation-card {
  overflow-y: auto !important;
  overflow-x: hidden !important;

  /* allow scroll chaining */
  overscroll-behavior: auto;

  -webkit-overflow-scrolling: touch;

  /* hide scrollbar */
  scrollbar-width: none; /* Firefox */
}
#relocation-card::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* If you want ONLY the inner box to scroll (recommended),
   apply scroll to the inner container instead of the overlay */
#relocation-card > div {
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 60vh; /* adjust to taste; prevents covering whole phone */

  overscroll-behavior: auto;
  -webkit-overflow-scrolling: touch;

  scrollbar-width: none;
}
#relocation-card > div::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* -----------------------------
   2) Dropdown: single inner scrollbar only
   (react-select virtualized list)
------------------------------ */

/* outer menu should NOT scroll (kills scrollbar #1) */
#relocation-dropdown .Select-menu-outer {
  max-height: 240px !important;  /* visible dropdown height */
  overflow: hidden !important;   /* prevent outer scrollbar */
  background-color: #050608;
  border-color: #27272f;
}

/* inner list is the ONLY scroller */
#relocation-dropdown .VirtualSelectGrid {
  max-height: 240px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;

  /* allow chaining to parent when at edges */
  overscroll-behavior: auto;

  -webkit-overflow-scrolling: touch;

  /* hide scrollbar */
  scrollbar-width: none;
}
#relocation-dropdown .VirtualSelectGrid::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* prevent wrappers from adding another scroll */
#relocation-dropdown .Select-menu {
  overflow: visible !important;
}

/* optional: focused option */
#relocation-dropdown .VirtualizedSelectFocusedOption {
  background-color: #111827;
}

/* optional: selected value label */
#relocation-dropdown .Select-value-label {
  color: #f9fafb;
}

/* optional: control styling */
#relocation-dropdown .Select-control {
  background-color: #050608;
  border-color: #27272f;
  color: #f9fafb;
}


/* assets/map_fade.css */
.leaflet-tile {
  transition: filter 200ms ease, opacity 200ms ease;
}

/* Uber-like iPhone night treatment for a standard (light) OSM basemap */

/* =========================
   Google-Maps-like DARK look
   (works on raster tiles like OSM Standard)
========================= */

/* =========================
   Smooth transition when switching day/night
========================= */
.leaflet-tile {
  transition: filter 220ms ease, opacity 220ms ease;
}

/* =====================================================
   Google / Uber-style DARK look on OSM Standard tiles
   Applies ONLY when #inner-screen has class "gmap-night"
===================================================== */
/* -----------------------------------------------------
   Uber-like DARK tuning (raster OSM standard tiles)
----------------------------------------------------- */

#inner-screen.gmap-night .leaflet-tile {
  filter:
    invert(1)
    hue-rotate(180deg)
    saturate(0.22)      /* reduce color noise */
    contrast(1.18)      /* sharper roads */
    brightness(0.74);   /* deeper blacks */
}

/* Slight soften so it doesn’t look harsh */
#inner-screen.gmap-night .leaflet-pane.leaflet-tile-pane {
  opacity: 0.97;
}

/* -----------------------------------------------------
   Subtle Uber-style vignette overlay
----------------------------------------------------- */

#inner-screen.gmap-night::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;   /* above tiles, below UI cards */
  background:
    radial-gradient(
      120% 90% at 50% 40%,
      rgba(0,0,0,0.10) 0%,
      rgba(0,0,0,0.28) 60%,
      rgba(0,0,0,0.38) 100%
    );
  mix-blend-mode: multiply;
}

/* -----------------------------------------------------
   OPTIONAL: marker readability in dark mode
   (Apply ONLY if you assign className to markers)
----------------------------------------------------- */

/* Pickup marker halo */
/* Base marker */
.mk {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.35);
  transform: translate(-50%, -50%); /* center on point */
}

/* Driver (Uber-ish blue dot) */
.mk-driver {
  width: 18px;
  height: 18px;
  background: #2563eb;
  border: 3px solid rgba(255,255,255,0.95);
  box-shadow: 0 0 0 6px rgba(37,99,235,0.22), 0 10px 22px rgba(0,0,0,0.35);
}

/* Pickup (blue ring) */
.mk-pickup {
  background: #22d3ee;
  border: 3px solid rgba(255,255,255,0.95);
  box-shadow: 0 0 0 5px rgba(34,211,238,0.18), 0 10px 22px rgba(0,0,0,0.35);
}

/* Dropoff (black dot with white ring) */
.mk-dropoff {
  background: #0b0b0c;
  border: 3px solid rgba(255,255,255,0.95);
  box-shadow: 0 0 0 5px rgba(255,255,255,0.12), 0 10px 22px rgba(0,0,0,0.35);
}

/* Relocation (XX dot with white ring) */
.mk-relocation {
  background: #0b0b0c;
  border: 3px solid rgba(200,100,100,0.95);
  box-shadow: 0 0 0 5px rgba(255,255,255,0.12), 0 10px 22px rgba(0,0,0,0.35);
}