/* ─────────────────────────────────────────────────────────────────────────
   Driver Route Optimizer Window
   Extends the existing route-optimizer/css/styles.css token set (--ro-*)
   and reuses all .ro-* classes.  Only driver-specific overrides go here.
   ───────────────────────────────────────────────────────────────────────── */

/* ── Overlay ────────────────────────────────────────────────────────────── */
#dro-overlay {
  position: fixed;
  inset: 0;
  background: linear-gradient(120deg, rgba(5, 150, 105, 0.10), rgba(37, 99, 235, 0.10));
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 2100;          /* sits above the fleet optimizer (2000) */
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
  font-family: var(--ro-font, 'Inter', system-ui, sans-serif);
  overflow: hidden;
  touch-action: manipulation;
}

#dro-overlay.dro-open {
  opacity: 1;
  pointer-events: auto;
}

#dro-overlay .ro-shell {
  width: min(1380px, 98vw);
  height: min(92vh, 92dvh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
  background: var(--ro-surface, #fff);
  border: 1px solid var(--ro-border, #e2e8f0);
  border-radius: var(--ro-radius, 16px);
  box-shadow: var(--ro-shadow-lg, 0 20px 60px rgba(15,23,42,0.18));
}

/* Fullscreen */
#dro-overlay.ro-fullscreen { padding: 0; align-items: stretch; justify-content: stretch; }
#dro-overlay.ro-fullscreen .ro-shell {
  width: 100%; max-width: none; height: 100%; min-height: 0;
  max-height: none; border-radius: 0; border: none; box-shadow: none;
}

/* ── Header accent (green to distinguish from fleet optimizer) ─────────── */
#dro-overlay .ro-header {
  background: linear-gradient(120deg, #f0fdf4, #eff6ff);
}

#dro-overlay .ro-title-icon {
  background: linear-gradient(135deg, #059669, #0891b2);
}

/* ── Stats row ──────────────────────────────────────────────────────────── */
.dro-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--ro-border, #e2e8f0);
  flex-shrink: 0;
}

.dro-stat-card {
  background: var(--ro-surface-alt, #f8fafc);
  border: 1px solid var(--ro-border, #e2e8f0);
  border-radius: 10px;
  padding: 8px 10px;
  text-align: center;
}

.dro-stat-card .dro-stat-val {
  font-size: 15px;
  font-weight: 700;
  color: var(--ro-text, #0f172a);
  white-space: nowrap;
}

.dro-stat-card .dro-stat-label {
  font-size: 10px;
  color: var(--ro-text-muted, #64748b);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-top: 2px;
}

/* ── Stop list ──────────────────────────────────────────────────────────── */
.dro-stop-list {
  flex: 1;
  overflow-y: auto;
  padding: 10px 16px 16px;
}

.dro-stop-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--ro-border, #e2e8f0);
  cursor: pointer;
  transition: background .1s;
  border-radius: 8px;
  margin: 0 -6px;
  padding-left: 6px;
  padding-right: 6px;
}

.dro-stop-card:last-child { border-bottom: none; }
.dro-stop-card:hover { background: var(--ro-surface-alt, #f8fafc); }
.dro-stop-card.dro-active { background: #eff6ff; border-color: var(--ro-primary, #2563eb); }

/* Sequence badge */
.dro-seq-badge {
  min-width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  border: 2px solid currentColor;
}
.dro-seq-badge.pickup  { background: #dbeafe; color: #1d4ed8; border-color: #1d4ed8; }
.dro-seq-badge.dropoff { background: #d1fae5; color: #065f46; border-color: #065f46; }

.dro-stop-info { flex: 1; min-width: 0; }

.dro-stop-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ro-text, #0f172a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dro-stop-addr {
  font-size: 11px;
  color: var(--ro-text-muted, #64748b);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

.dro-stop-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.dro-stop-time {
  font-size: 13px;
  font-weight: 700;
  color: var(--ro-primary, #2563eb);
}

.dro-type-chip {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.dro-type-chip.pickup  { background: #dbeafe; color: #1d4ed8; }
.dro-type-chip.dropoff { background: #d1fae5; color: #065f46; }

.dro-pax-chip {
  font-size: 10px;
  color: var(--ro-text-muted, #64748b);
  display: flex;
  align-items: center;
  gap: 2px;
}

.dro-late-chip {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 10px;
  background: #fee2e2;
  color: #b91c1c;
}

.dro-delta {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 6px;
}
.dro-delta-ahead { background: #d1fae5; color: #065f46; }
.dro-delta-behind { background: #fee2e2; color: #b91c1c; }

/* ── Unassigned warning banner ──────────────────────────────────────────── */
.dro-unassigned-banner {
  margin: 8px 16px 0;
  padding: 8px 12px;
  background: #fefce8;
  border: 1px solid #fde68a;
  border-radius: 8px;
  font-size: 12px;
  color: #92400e;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* ── Navigate action bar ────────────────────────────────────────────────── */
.dro-action-bar {
  padding: 12px 16px;
  border-top: 1px solid var(--ro-border, #e2e8f0);
  background: var(--ro-surface, #fff);
  flex-shrink: 0;
}

.dro-navigate-btn {
  width: 100%;
  padding: 10px 16px;
  background: var(--ro-success, #10b981);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-family: var(--ro-font);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background .15s, transform .1s;
}
.dro-navigate-btn:hover   { background: #059669; transform: translateY(-1px); }
.dro-navigate-btn:active  { transform: translateY(0); }
.dro-navigate-btn:disabled {
  background: #d1d5db;
  color: #9ca3af;
  cursor: not-allowed;
  transform: none;
}

/* ── Navigation nudge banner ───────────────────────────────────────────── */
.dro-nav-nudge {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 16px 0;
  padding: 12px 14px;
  background: linear-gradient(135deg, #ecfdf5, #eff6ff);
  border: 1px solid #86efac;
  border-radius: 10px;
  flex-shrink: 0;
  animation: dro-nudge-in 0.4s ease;
}

@keyframes dro-nudge-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.dro-nav-nudge-icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #10b981;
  color: #fff;
  display: grid; place-items: center;
  font-size: 15px;
  flex-shrink: 0;
  animation: dro-icon-pulse 2s ease-in-out infinite;
}

@keyframes dro-icon-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
  50%      { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
}

.dro-nav-nudge-text {
  flex: 1;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ro-text, #0f172a);
}

.dro-nav-nudge-text strong {
  display: block;
  font-size: 13px;
  color: #065f46;
  margin-bottom: 1px;
}

.dro-start-route-btn {
  padding: 10px 18px;
  background: #10b981;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-family: var(--ro-font);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .15s, transform .1s;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}
.dro-start-route-btn:hover  { background: #059669; transform: translateY(-1px); }
.dro-start-route-btn:active { transform: translateY(0); }

/* Pulse animation on the bottom navigate button */
.dro-navigate-btn.dro-pulse {
  animation: dro-btn-pulse 2s ease-in-out 3;
}

@keyframes dro-btn-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
  50%      { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
}

/* ── Empty / loading states ─────────────────────────────────────────────── */
.dro-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 32px 16px;
  text-align: center;
  color: var(--ro-text-muted, #64748b);
}
.dro-empty i { font-size: 36px; opacity: .35; }
.dro-empty p { font-size: 13px; line-height: 1.5; max-width: 200px; }

/* ── Settings panel — driver-specific ──────────────────────────────────── */
#dro-overlay .ro-settings-panel .ro-settings-grid {
  grid-template-columns: repeat(2, 1fr); /* 2 columns for 4 settings */
}

/* ── Map container ──────────────────────────────────────────────────────── */
/* map.css targets #route-optimizer-map (fleet); driver optimizer uses #dro-map */
#dro-overlay .ro-map-container {
  position: absolute;
  inset: 0;
  min-height: 0;
}

#dro-map {
  width: 100%;
  height: 100%;
  min-height: 0;
}

/* ── Map legend override ────────────────────────────────────────────────── */
#dro-overlay .ro-map-legend {
  font-size: 11px;
}

/* ── Tablet (≤1024px): sidebar stacks above map ───────────────────────── */
@media (max-width: 1024px) {
  #dro-overlay { padding: 8px; align-items: stretch; }

  #dro-overlay .ro-shell {
    width: 100%; max-width: 100%;
    height: min(96vh, 96dvh); min-height: 0;
  }

  #dro-overlay .ro-content {
    flex: 1; display: flex; flex-direction: column;
    min-height: 0; overflow: hidden;
  }

  #dro-overlay .ro-resize-handle { display: none; }

  #dro-overlay .ro-sidebar {
    flex: 0 0 auto;
    max-height: 38vh;
    min-height: 0;
    overflow: auto;
    border-right: none;
    border-bottom: 1px solid var(--ro-border, #e2e8f0);
    -webkit-overflow-scrolling: touch;
  }

  #dro-overlay .ro-main {
    flex: 1; min-height: 220px; overflow: hidden;
  }
}

/* ── Mobile (≤640px): scrollable full-page layout ─────────────────────── */
@media (max-width: 640px) {
  #dro-overlay {
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
    overflow-y: auto;                /* overlay scrolls internally on mobile */
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }

  #dro-overlay .ro-shell {
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    height: auto;                    /* grow with content */
    max-height: none;
    border-radius: 0;
    border: none;
    overflow: visible;               /* let content flow */
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  }

  /* Sticky header */
  #dro-overlay .ro-header {
    position: sticky;
    top: 0;
    z-index: 20;
  }

  /* Toolbar: flows naturally so page scrolls past it to map */
  #dro-overlay .ro-toolbar {
    position: relative;
    z-index: 19;
  }

  /* Stats: 2-column grid */
  .dro-stats { grid-template-columns: repeat(2, 1fr); gap: 6px; padding: 10px 12px 8px; }
  .dro-stat-card { padding: 6px 8px; }
  .dro-stat-card .dro-stat-val { font-size: 14px; }

  /* Content flows naturally */
  #dro-overlay .ro-content {
    flex: none;
    overflow: visible;
  }

  /* Sidebar: no height cap — content flows in page scroll */
  #dro-overlay .ro-sidebar {
    flex: 0 0 auto;
    max-height: none;
    min-height: 80px;
    overflow-y: visible;
    overflow-x: hidden;
  }

  /* Sidebar inner: override any inline overflow:hidden */
  #dro-overlay .ro-sidebar-inner {
    height: auto !important;
    overflow: visible !important;
  }

  .dro-stop-list {
    padding: 8px 12px 12px;
    flex: none;
    overflow-y: visible;
  }
  .dro-stop-card { padding: 8px 0; gap: 8px; }
  .dro-stop-name { font-size: 12px; }
  .dro-stop-addr { font-size: 10px; }
  .dro-stop-time { font-size: 12px; }

  /* Nudge banner: stack vertically on mobile */
  .dro-nav-nudge {
    flex-direction: column;
    text-align: center;
    margin: 8px 12px 0;
    padding: 10px 12px;
    gap: 8px;
  }
  .dro-nav-nudge-icon { width: 32px; height: 32px; font-size: 13px; }
  .dro-start-route-btn { width: 100%; justify-content: center; padding: 12px 16px; }

  /* Navigate bar */
  .dro-action-bar { padding: 8px 12px; }
  .dro-navigate-btn { padding: 10px 14px; font-size: 13px; }

  /* Map: fixed height so it doesn't collapse */
  #dro-overlay .ro-main {
    flex: none;
    height: 55vh;
    min-height: 280px;
  }

  /* Map container absolute fill */
  #dro-overlay .ro-map-container {
    position: absolute; inset: 0; min-height: 0;
  }

  /* Hide legend on small screens */
  #dro-overlay .ro-map-legend { display: none; }

  /* Settings: single column, scrollable when open */
  #dro-overlay .ro-settings-panel {
    max-height: 50vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  #dro-overlay .ro-settings-panel .ro-settings-grid {
    grid-template-columns: 1fr;
  }

  /* Empty state compact */
  .dro-empty { padding: 20px 12px; }
  .dro-empty i { font-size: 28px; }
  .dro-empty p { font-size: 12px; }
}

/* ── Very small phones (≤380px) ───────────────────────────────────────── */
@media (max-width: 380px) {
  .dro-stats { grid-template-columns: repeat(2, 1fr); gap: 4px; padding: 8px; }
  .dro-stat-card .dro-stat-val { font-size: 13px; }
  .dro-stat-card .dro-stat-label { font-size: 9px; }

  .dro-stop-list { padding: 6px 8px 8px; }
}