@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');

:root {
  --bg-color: #070a13;
  --card-bg: rgba(15, 23, 42, 0.65);
  --card-border: rgba(255, 255, 255, 0.07);
  --card-border-active: rgba(59, 130, 246, 0.3);
  --primary: #3b82f6;
  --primary-glow: rgba(59, 130, 246, 0.35);
  --accent: #60a5fa;
  --success: #10b981;
  --success-glow: rgba(16, 185, 129, 0.2);
  --danger: #f43f5e;
  --warning: #f59e0b;
  --warning-glow: rgba(245, 158, 11, 0.35);
  --text-main: #f8fafc;
  --text-sub: #94a3b8;
  --text-muted: #64748b;
  --font-family: 'Outfit', sans-serif;
  --transition-smooth: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);

  /* Starting Widget styling tokens */
  --starting-input-bg: rgba(255, 255, 255, 0.05);
  --starting-input-border: rgba(255, 255, 255, 0.12);
  --starting-input-color: #ffffff;
  --starting-input-focus-bg: rgba(255, 255, 255, 0.08);
  --starting-gps-bg: rgba(59, 130, 246, 0.12);
  --starting-gps-color: var(--accent);
  --starting-gps-hover-bg: rgba(59, 130, 246, 0.25);

  /* Autocomplete suggestion dropdowns styling tokens */
  --autocomplete-bg: #0d1222;
  --autocomplete-border: rgba(255, 255, 255, 0.1);
  --autocomplete-row-border: rgba(255, 255, 255, 0.05);
  --autocomplete-row-hover: rgba(255, 255, 255, 0.04);
  --autocomplete-row-highlight: rgba(255, 255, 255, 0.08);
  --autocomplete-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  --autocomplete-icon-filter: invert(1) brightness(0.9);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
}

/* Custom Global Scrollbars to match premium dark UI */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 3px;
  transition: background-color 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}

body {
  font-family: var(--font-family);
  background-color: var(--bg-color);
  color: var(--text-main);
  min-height: 100vh;
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

/* Background Animated Blobs */
.bg-blobs {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.15;
  animation: float-blob 20s infinite alternate ease-in-out;
}

.blob-1 {
  top: -10%;
  left: -10%;
  width: 50vw;
  height: 50vw;
  background: radial-gradient(circle, var(--primary) 0%, transparent 70%);
}

.blob-2 {
  bottom: -10%;
  right: -10%;
  width: 60vw;
  height: 60vw;
  background: radial-gradient(circle, #8b5cf6 0%, transparent 70%);
  animation-duration: 25s;
  animation-delay: -5s;
}

.blob-3 {
  top: 40%;
  left: 50%;
  width: 40vw;
  height: 40vw;
  background: radial-gradient(circle, #06b6d4 0%, transparent 70%);
  animation-duration: 30s;
  animation-delay: -10s;
}

@keyframes float-blob {
  0% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(5%, 5%) scale(1.1);
  }
  100% {
    transform: translate(-5%, -5%) scale(0.95);
  }
}

/* Layout System */
.app-layout {
  display: flex;
  min-height: 100vh;
  width: 100%;
  max-width: 100%;
  position: relative;
  overflow-x: clip;
}

/* Sidebar Menu */
.side-menu {
  width: 280px;
  background: rgba(10, 15, 30, 0.85);
  border-right: 1px solid var(--card-border);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.side-menu-header {
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  min-height: 64px;
}

.side-menu-logo {
  cursor: pointer;
  transition: var(--transition-smooth);
}

.side-menu-logo-text {
  font-family: var(--font-family);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 1px;
  background: linear-gradient(
    120deg,
    #ffffff 20%,
    var(--accent) 40%,
    #ffffff 45%,
    var(--accent) 50%,
    var(--primary) 70%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 0 30px rgba(59, 130, 246, 0.3);
  user-select: none;
  white-space: nowrap;
  animation: logo-load-sweep 1.2s ease-out forwards;
}

.side-menu-logo-text:hover {
  transform: scale(1.03);
  opacity: 0.95;
  animation: logo-hover-sweep 1.2s ease-out forwards;
}

@keyframes logo-load-sweep {
  0% {
    background-position: 200% 0%;
    text-shadow: 0 0 20px rgba(59, 130, 246, 0.2);
  }
  50% {
    text-shadow: 0 0 35px rgba(59, 130, 246, 0.6), 0 0 15px var(--accent);
  }
  100% {
    background-position: 0% 0%;
    text-shadow: 0 0 20px rgba(59, 130, 246, 0.2);
  }
}

@keyframes logo-hover-sweep {
  0% {
    background-position: 200% 0%;
    text-shadow: 0 0 20px rgba(59, 130, 246, 0.2);
  }
  50% {
    text-shadow: 0 0 35px rgba(59, 130, 246, 0.6), 0 0 15px var(--accent);
  }
  100% {
    background-position: 0% 0%;
    text-shadow: 0 0 20px rgba(59, 130, 246, 0.2);
  }
}

.sidebar-collapse-btn {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--card-border);
  color: var(--text-muted);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-smooth);
}

.sidebar-collapse-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-main);
  border-color: rgba(255, 255, 255, 0.15);
}

.sidebar-collapse-btn svg {
  width: 16px;
  height: 16px;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.side-menu-nav {
  flex: 1;
  padding: 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  overflow-y: overlay;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* Firefox: show thin scrollbar only on hover */
.side-menu-nav:hover {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

/* Webkit: show custom scrollbar on hover */
.side-menu-nav::-webkit-scrollbar {
  width: 5px;
}
.side-menu-nav::-webkit-scrollbar-track {
  background: transparent;
}
.side-menu-nav::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 3px;
}
.side-menu-nav:hover::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
}
.side-menu-nav::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.35) !important;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  color: var(--text-sub);
  text-decoration: none;
  font-weight: 500;
  border-radius: 12px;
  transition: var(--transition-smooth);
  font-size: 15px;
}

.nav-item:hover {
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-main);
}

.nav-item.active {
  background: rgba(59, 130, 246, 0.1);
  color: var(--accent);
  border-left: 3px solid var(--primary);
}

.nav-sub-item {
  margin-left: 20px;
  padding: 10px 14px;
  font-size: 13.5px;
  color: var(--text-muted);
}

.nav-icon {
  width: 20px;
  height: 20px;
}

.side-menu-footer {
  padding: 20px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}

/* User Badge In Sidebar */
.user-badge {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--card-border);
  padding: 16px;
  border-radius: 14px;
}

.user-info {
  display: flex;
  flex-direction: column;
}

.user-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-main);
  word-break: break-all;
}

.user-email {
  font-size: 12px;
  color: var(--text-sub);
  word-break: break-all;
}

.logout-link {
  font-size: 12px;
  color: var(--danger);
  text-decoration: none;
  font-weight: 500;
  cursor: pointer;
  background: rgba(244, 63, 94, 0.08);
  border: 1px solid rgba(244, 63, 94, 0.15);
  padding: 8px 12px;
  text-align: center;
  border-radius: 8px;
  transition: var(--transition-smooth);
}

.logout-link:hover {
  background: rgba(244, 63, 94, 0.15);
  transform: translateY(-1px);
}

.user-loading {
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
  padding: 10px;
}

/* Sidebar GPS Privacy Toggle */
.sidebar-gps-toggle-section,
.user-badge-gps-container {
  transition: var(--transition-smooth);
  width: 100%;
}

.gps-toggle-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--card-border);
  padding: 12px 14px;
  border-radius: 12px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: var(--transition-smooth);
}

.gps-toggle-card:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
}

.gps-toggle-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.gps-toggle-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
}

.gps-toggle-desc {
  font-size: 11px;
  color: var(--text-muted);
  transition: var(--transition-smooth);
}

.gps-toggle-card.active-gps .gps-toggle-desc {
  color: var(--success);
}

/* Mobile Header */
.mobile-header {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: rgba(15, 23, 42, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--card-border);
  position: sticky;
  top: 0;
  z-index: 900;
}

.menu-toggle-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-smooth);
}

.menu-toggle-btn:hover {
  transform: scale(1.05);
}

.menu-logo-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  object-fit: contain;
}

.menu-close-btn {
  display: none;
}

/* Sticky Mobile Footer */
.mobile-sticky-footer {
  display: none;
}

.mobile-sticky-footer .map-controls {
  margin-top: 0;
}

.mobile-logo-text {
  font-weight: 600;
  font-size: 18px;
  margin-left: 12px;
  letter-spacing: -0.5px;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.mobile-logo-text:hover {
  color: var(--accent);
}

/* Menu Backdrop overlay on Mobile */
.menu-backdrop {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 950;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.menu-backdrop.visible {
  display: block;
  opacity: 1;
  pointer-events: auto;
}

/* Main Content Area Layout */
.main-content {
  flex: 1;
  margin-left: 280px; /* Offset for docked sidebar */
  padding: 0;
  min-height: 100vh;
  box-sizing: border-box;
  transition: margin-left 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.dashboard-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 0;
  max-width: none;
  margin: 0;
  width: 100%;
  min-height: 100vh;
}

.planner-panel.glass-card {
  border-radius: 0;
  border-top: none;
  border-bottom: none;
  border-left: none;
  border-right: 1px solid var(--card-border);
  overflow: visible;
}

.map-panel.glass-card {
  border-radius: 0;
  border: none;
}

/* Glass Card styling updates */
.glass-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-radius: 24px;
  padding: 30px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  position: relative;
  overflow: hidden;
}

/* Planner Panel */
.panel-header {
  margin-bottom: 28px;
}

.panel-header-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  width: 100%;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.panel-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

#clear-btn, #optimize-btn, #import-btn {
  width: auto;
  height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 16px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 18px;
  border: 1px solid var(--card-border);
  font-family: inherit;
  flex-shrink: 0;
  white-space: nowrap;
  box-shadow: none;
}

.panel-header-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--card-border);
  color: var(--text-muted);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  transition: var(--transition-smooth);
  flex-shrink: 0;
  position: relative;
}

.panel-header-btn svg {
  width: 16px;
  height: 16px;
  pointer-events: none;
}

.panel-header-btn:hover {
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}

.panel-header-btn.active {
  background: rgba(59, 130, 246, 0.15);
  color: var(--accent);
  border: 1px solid rgba(59, 130, 246, 0.25);
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.1);
}

#gps-trip-toggle-btn::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: inherit;
  border: 2px solid var(--accent);
  opacity: 0;
  pointer-events: none;
}

#gps-trip-toggle-btn.pulse-active::after {
  animation: gps-pulse-ping 1.2s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}

@keyframes gps-pulse-ping {
  0% {
    transform: scale(0.98);
    opacity: 0.8;
  }
  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}

/* HOS Summary Banner Styling */
.hos-summary-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(15, 23, 42, 0.45);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 10px 16px;
  margin-bottom: 16px;
  font-size: 13px;
  color: var(--text-sub);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: fadeIn 0.3s ease-out;
}

.hos-banner-title {
  font-weight: 500;
  color: var(--text-sub);
}

.hos-banner-stats {
  display: flex;
  gap: 16px;
  align-items: center;
}

.hos-banner-stat {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  padding: 4px 10px;
  border-radius: 8px;
  color: var(--text-main);
}

.hos-banner-stat strong {
  color: var(--accent);
  font-weight: 600;
}

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

@media (max-width: 640px) {
  .hos-summary-banner {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }
  .hos-banner-stats {
    width: 100%;
    justify-content: space-between;
  }
}

/* HOS Panel Styling */
.hos-panel {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  padding: 12px 16px;
  margin-bottom: 24px;
  transition: var(--transition-smooth);
}

.hos-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hos-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding-bottom: 6px;
}

.hos-section-title {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--accent);
}

.hos-reset-btn,
.hos-close-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.hos-reset-btn:hover {
  color: var(--danger);
}

.hos-close-btn:hover {
  color: var(--text-main);
}

.hos-inputs-row {
  display: flex;
  gap: 16px;
  justify-content: space-between;
}

.hos-input-group {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.01);
  border: 1px solid rgba(255, 255, 255, 0.03);
  padding: 8px 12px;
  border-radius: 10px;
  gap: 8px;
}

.hos-input-label {
  font-size: 12px;
  color: var(--text-sub);
  font-weight: 500;
  white-space: nowrap;
}

.hos-time-inputs {
  display: flex;
  align-items: center;
  gap: 4px;
}

.hos-number-input {
  width: 42px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: var(--text-main);
  font-family: var(--font-family);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  padding: 4px 2px;
  outline: none;
  -moz-appearance: textfield;
  appearance: textfield;
}

.hos-number-input::-webkit-outer-spin-button,
.hos-number-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

.hos-number-input:focus {
  border-color: var(--primary);
  background: rgba(59, 130, 246, 0.1);
  box-shadow: 0 0 8px var(--primary-glow);
}

.hos-time-sep {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
}

@media (max-width: 640px) {
  .hos-inputs-row {
    flex-direction: column;
    gap: 8px;
  }
  .hos-input-group {
    padding: 6px 10px;
  }
}

.view-toggle-container {
  display: flex;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--card-border);
  padding: 3px;
  border-radius: 20px;
  gap: 2px;
  position: relative;
  isolation: isolate;
  height: 36px;
  align-items: center;
  flex-shrink: 0;
}

.view-toggle-slider {
  position: absolute;
  top: 3px;
  left: 3px;
  height: calc(100% - 6px);
  width: 36px;
  background: rgba(59, 130, 246, 0.15);
  border: 1px solid rgba(59, 130, 246, 0.25);
  border-radius: 16px;
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.15);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: -1;
  pointer-events: none;
}

.view-toggle-container.compact-active .view-toggle-slider {
  transform: translateX(38px);
}

.view-toggle-container.driver-active .view-toggle-slider {
  transform: translateX(76px);
}

.view-toggle-btn {
  background: none !important;
  border: 1px solid transparent !important;
  color: var(--text-muted);
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 600;
  width: 36px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  cursor: pointer;
  transition: var(--transition-smooth);
  position: relative;
}

.view-toggle-btn:hover {
  color: var(--text-main);
}

.view-toggle-btn.active {
  color: var(--accent);
  font-weight: 700;
}

.view-toggle-btn .view-icon {
  display: block;
  width: 14px;
  height: 14px;
  stroke: currentColor;
  pointer-events: none;
}

.view-toggle-btn .view-btn-text {
  display: none;
}

/* Premium custom CSS tooltip */
.view-toggle-btn::after {
  content: attr(title);
  position: absolute;
  bottom: 125%; /* Position above the button */
  left: 50%;
  transform: translateX(-50%) translateY(5px);
  background: rgba(15, 23, 42, 0.95);
  color: var(--text-main);
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid var(--card-border);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  z-index: 100;
}

.view-toggle-btn:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.panel-title {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.5px;
  margin: 0;
  color: var(--text-main);
}

/* Stops Timeline Layout */
.trip-timeline {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 24px;
}

/* Stop Card styling */
.stop-card {
  --stop-card-bg: #0f172a;
  position: relative;
  background: var(--stop-card-bg);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  padding: 20px 24px 20px 48px;
  transition: var(--transition-smooth);
}

.stop-card:hover {
  --stop-card-bg: #152038;
  background: var(--stop-card-bg);
  border-color: rgba(255, 255, 255, 0.12);
}

.stop-card:not(.current-position-card):not(.current-position-card-compact) {
  padding: 0;
}

.stop-card-sticky-header {
  position: sticky;
  top: 0;
  z-index: 10;
  padding: 14px 24px 6px 48px;
  background: var(--stop-card-bg);
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  border-top: 1px solid transparent;
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
  border-color: inherit;
  margin-top: -1px;
  margin-left: -1px;
  margin-right: -1px;
  transition: var(--transition-smooth);
}

.stop-card-sticky-header::after {
  content: '';
  position: absolute;
  left: 0 !important;
  right: 0 !important;
  top: 100%;
  height: 20px;
  background: linear-gradient(to bottom, var(--stop-card-bg), transparent);
  pointer-events: none;
  z-index: 11;
  transition: opacity var(--transition-smooth);
}

.stop-card-body {
  padding: 0 24px 14px 48px;
  position: relative;
  z-index: 2;
}

.stop-card-body::after {
  content: none;
}

/* Ambient Background Map Styles */
.stop-card-bg-map {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: 15px; /* Cropped inside stop-card border-radius */
  pointer-events: none;
  filter: grayscale(50%) contrast(1.1) opacity(0.55); /* Moved filter here to prevent WebGL/iframe composite bugs */
  transition: var(--transition-smooth);
}

/* Hide background map on stop card when it is not expanded to keep it compact */
.stop-card:not(.expanded) .stop-card-bg-map {
  display: none;
}

.stop-card-bg-overlay {
  position: absolute;
  inset: 0;
  background: rgba(7, 10, 19, 0.55); /* Deep dark overlay for high text contrast */
  z-index: 1;
  transition: var(--transition-smooth);
}

.stop-card:hover .stop-card-bg-overlay {
  background: rgba(7, 10, 19, 0.45); /* Slightly lighter on hover */
}

.stop-card-map-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  pointer-events: none;
  transform: scale(1.3);
  transform-origin: center;
  z-index: 0;
  transition: var(--transition-smooth);
}

.stop-card:hover .stop-card-bg-map {
  filter: grayscale(40%) contrast(1.1) opacity(0.65); /* Apply filter change on hover to the parent container */
}

/* Connector dotted line (moved to timeline container level) */
.trip-timeline::before {
  content: none;
}

/* Transit Card styling */
.transit-card {
  position: relative;
  background: rgba(255, 255, 255, 0.01);
  border: 1px solid var(--card-border);
  border-radius: 0;
  padding: 16px 24px 16px 48px;
  margin: -8px 0 -8px 0; /* Tuck in slightly to create a connected feel */
  transition: var(--transition-smooth);
  min-height: 120px;
  overflow: hidden;
  display: flex;
  align-items: center;
  z-index: 2;
}

.transit-card:hover {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.transit-card-dot {
  position: absolute;
  left: 17px; /* centered on the timeline line */
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--bg-color);
  border: 2px solid var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  color: var(--text-muted);
}

.transit-card:hover .transit-card-dot {
  border-color: var(--primary);
  color: var(--accent);
  box-shadow: 0 0 8px var(--primary-glow);
}

.transit-card-bg-map {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: 0;
  pointer-events: none;
  filter: grayscale(60%) contrast(1.1) opacity(0.50); /* Moved filter here to prevent WebGL/iframe composite bugs */
  transition: var(--transition-smooth);
}

.transit-card-bg-overlay {
  position: absolute;
  inset: 0;
  background: rgba(7, 10, 19, 0.60); /* high contrast overlay */
  z-index: 1;
  transition: var(--transition-smooth);
}

.transit-card:hover .transit-card-bg-overlay {
  background: rgba(7, 10, 19, 0.50);
}

.transit-card-map-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  pointer-events: none;
  transform: scale(1.3);
  transform-origin: center;
  z-index: 0;
  transition: var(--transition-smooth);
}
.transit-card:hover .transit-card-bg-map {
  filter: grayscale(50%) contrast(1.1) opacity(0.60); /* Apply filter change on hover to the parent container */
}

.transit-card-content {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 80px;
}

/* Transit Card modifier styling overrides */
.transit-card.modifier-faster {
  border-color: rgba(16, 185, 129, 0.45);
  box-shadow: 0 0 15px rgba(16, 185, 129, 0.15);
  background: rgba(16, 185, 129, 0.02);
}
.transit-card.modifier-faster:hover {
  background: rgba(16, 185, 129, 0.04);
  border-color: rgba(16, 185, 129, 0.6);
}
.transit-card.modifier-faster .transit-duration {
  color: var(--success);
}
.transit-card.modifier-faster .transit-card-dot {
  border-color: var(--success);
  box-shadow: 0 0 8px var(--success-glow);
}

.transit-card.modifier-slower {
  border-color: rgba(244, 63, 94, 0.45);
  box-shadow: 0 0 15px rgba(244, 63, 94, 0.15);
  background: rgba(244, 63, 94, 0.02);
}
.transit-card.modifier-slower:hover {
  background: rgba(244, 63, 94, 0.04);
  border-color: rgba(244, 63, 94, 0.6);
}
.transit-card.modifier-slower .transit-duration {
  color: var(--danger);
}
.transit-card.modifier-slower .transit-card-dot {
  border-color: var(--danger);
  box-shadow: 0 0 8px rgba(244, 63, 94, 0.25);
}

.transit-original-duration {
  font-size: 13px;
  color: var(--text-muted);
}

/* Traffic Ratio Badge styling */
.transit-ratio-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 6px;
  margin-left: 8px;
  letter-spacing: 0.2px;
}
.transit-ratio-badge.better {
  background: rgba(16, 185, 129, 0.15);
  color: #a7f3d0;
  border: 1px solid rgba(16, 185, 129, 0.3);
}
.transit-ratio-badge.worse {
  background: rgba(244, 63, 94, 0.15);
  color: #fecdd3;
  border: 1px solid rgba(244, 63, 94, 0.3);
}

/* Transit manual modifier button group */
.transit-modifier-container {
  display: flex;
  gap: 8px;
  margin: 6px 0;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 0s;
}

.transit-card:hover .transit-modifier-container {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.2s;
}

.transit-card.modifier-faster .transit-modifier-container,
.transit-card.modifier-slower .transit-modifier-container {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0s;
}

.transit-modifier-btn {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--card-border);
  color: var(--text-sub);
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.transit-modifier-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-main);
  border-color: rgba(255, 255, 255, 0.15);
}

.transit-modifier-btn.active.btn-faster {
  background: rgba(16, 185, 129, 0.2);
  border-color: var(--success);
  color: #a7f3d0;
  box-shadow: 0 0 8px var(--success-glow);
}

.transit-modifier-btn.active.btn-normal {
  background: rgba(59, 130, 246, 0.2);
  border-color: var(--primary);
  color: #bfdbfe;
  box-shadow: 0 0 8px var(--primary-glow);
}

.transit-modifier-btn.active.btn-slower {
  background: rgba(244, 63, 94, 0.2);
  border-color: var(--danger);
  color: #fecdd3;
  box-shadow: 0 0 8px rgba(244, 63, 94, 0.2);
}

.transit-modifier-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.transit-time-start,
.transit-time-end {
  display: inline-block;
  width: fit-content;
  font-size: 11px;
  font-weight: 600;
  color: #f1f5f9;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: rgba(10, 15, 30, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 4px 10px;
  border-radius: 8px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: var(--transition-smooth);
}

.transit-time-start {
  margin-bottom: 6px;
}

.transit-time-end {
  margin-top: 6px;
}

/* Modifiers start/end badge border overrides */
.transit-card.modifier-faster .transit-time-start,
.transit-card.modifier-faster .transit-time-end {
  border-color: rgba(16, 185, 129, 0.3);
  background: rgba(10, 15, 30, 0.9);
}

.transit-card.modifier-slower .transit-time-start,
.transit-card.modifier-slower .transit-time-end {
  border-color: rgba(244, 63, 94, 0.3);
  background: rgba(10, 15, 30, 0.9);
}

.transit-info-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0;
}

.transit-duration {
  font-size: 15px;
  font-weight: 700;
  color: var(--accent);
}

.transit-distance {
  font-size: 13px;
  color: var(--text-muted);
}

.transit-loading-text {
  position: relative;
  z-index: 2;
  font-size: 13px;
  color: var(--text-muted);
  font-style: italic;
}

/* Break Card styling */
.break-card {
  position: relative;
  background: rgba(245, 158, 11, 0.03);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 0;
  padding: 16px 24px 16px 48px;
  margin: -8px 0 -8px 0; /* Tuck in slightly to match timeline style */
  transition: var(--transition-smooth);
  overflow: hidden;
  display: flex;
  align-items: center;
  z-index: 2;
  box-shadow: 0 4px 20px rgba(245, 158, 11, 0.05);
}

.break-card:hover {
  background: rgba(245, 158, 11, 0.06);
  border-color: rgba(245, 158, 11, 0.5);
  box-shadow: 0 8px 32px rgba(245, 158, 11, 0.1);
}

.break-card-dot {
  position: absolute;
  left: 17px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #0f172a;
  border: 2px solid var(--warning);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  color: var(--warning);
}

.break-card:hover .break-card-dot {
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.5);
}

.break-card-content {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.break-card-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.break-card-title {
  font-size: 11px;
  font-weight: 700;
  color: #fbbf24;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.break-card-duration {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-main);
}

.break-card-time {
  font-size: 12px;
  color: var(--text-sub);
}

.break-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.break-delete-btn {
  background: rgba(244, 63, 94, 0.08);
  border: 1px solid rgba(244, 63, 94, 0.15);
  color: var(--danger);
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.break-delete-btn:hover {
  background: rgba(244, 63, 94, 0.18);
  border-color: rgba(244, 63, 94, 0.3);
  transform: translateY(-1px);
}

.break-extend-btn {
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.2);
  color: var(--warning);
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.break-extend-btn:hover {
  background: rgba(245, 158, 11, 0.18);
  border-color: rgba(245, 158, 11, 0.3);
  transform: translateY(-1px);
}



/* Stop Expectations & Requirements Styling */
.stop-card {
  cursor: pointer;
}

.stop-card.expanded .stop-card-bg-map {
  bottom: auto !important;
  height: 155px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.stop-card.stop-card-late {
  border-color: rgba(244, 63, 94, 0.4);
  --stop-card-bg: #190c13;
  background: var(--stop-card-bg);
}

.stop-card.stop-card-late:hover {
  border-color: rgba(244, 63, 94, 0.6);
  --stop-card-bg: #25101a;
  background: var(--stop-card-bg);
}

.stop-card.stop-card-ontime {
  border-color: rgba(16, 185, 129, 0.3);
}

.stop-card.stop-card-early {
  border-color: rgba(59, 130, 246, 0.3);
}

.stop-expand-icon {
  width: 16px;
  height: 16px;
  stroke: var(--text-muted);
  stroke-width: 2.5;
  fill: none;
  transition: var(--transition-smooth);
  margin-left: 8px;
  vertical-align: middle;
}

.stop-expand-icon.expanded {
  transform: rotate(180deg);
  stroke: var(--accent);
}

.stop-status-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 8px;
  margin-left: 8px;
  margin-top: 8px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  vertical-align: middle;
}

.stop-status-badge.status-late {
  background: rgba(244, 63, 94, 0.15);
  color: #fecdd3;
  border: 1px solid rgba(244, 63, 94, 0.3);
}

.stop-status-badge.status-early {
  background: rgba(59, 130, 246, 0.15);
  color: #bfdbfe;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.stop-status-badge.status-ontime {
  background: rgba(16, 185, 129, 0.15);
  color: #a7f3d0;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.stop-expectations-summary {
  margin-top: 10px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.stop-expectations-summary .summary-title {
  color: var(--text-muted);
  font-weight: 600;
}

.stop-expectations-summary .summary-desc {
  color: var(--text-main);
  font-weight: 500;
}

/* Expanded expectations form panel */
.stop-expectations-panel {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dashed rgba(255, 255, 255, 0.1);
  animation: slideDown 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}

.panel-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 12px;
  letter-spacing: 0.5px;
}

.expectations-form-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: rgba(0, 0, 0, 0.15);
  padding: 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.03);
}

.expectations-inputs-container {
  display: flex;
  gap: 12px;
  width: 100%;
}

.expectations-inputs-container .expectations-input-group {
  flex: 1;
}

.expectations-input-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.expectations-input-group label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-sub);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.expectations-select {
  background: #0f172a;
  border: 1px solid var(--card-border);
  color: var(--text-main);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  outline: none;
  font-family: var(--font-family);
  cursor: pointer;
  transition: var(--transition-smooth);
}

.expectations-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 8px var(--primary-glow);
}

.expectations-datetime-input {
  background: #0f172a;
  border: 1px solid var(--card-border);
  color: var(--text-main);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  outline: none;
  font-family: var(--font-family);
  width: 100%;
  transition: var(--transition-smooth);
}

.expectations-datetime-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 8px var(--primary-glow);
}

/* Appointment resets and wait leeway styling inside timeline */
.break-card.break-appointment-reset {
  background: rgba(139, 92, 246, 0.03);
  border-color: rgba(139, 92, 246, 0.4);
  box-shadow: 0 4px 20px rgba(139, 92, 246, 0.05);
}

.break-card.break-appointment-reset:hover {
  background: rgba(139, 92, 246, 0.06);
  border-color: rgba(139, 92, 246, 0.6);
  box-shadow: 0 8px 32px rgba(139, 92, 246, 0.1);
}

.break-card.break-appointment-reset .break-card-dot {
  border-color: #8b5cf6;
  color: #8b5cf6;
}

.break-card.break-appointment-reset:hover .break-card-dot {
  box-shadow: 0 0 8px rgba(139, 92, 246, 0.5);
}

.break-card.break-appointment-reset .break-card-title {
  color: #a78bfa;
}

.break-card.break-wait-leeway {
  background: rgba(59, 130, 246, 0.02);
  border-color: rgba(59, 130, 246, 0.3);
  box-shadow: 0 4px 20px rgba(59, 130, 246, 0.03);
}

.break-card.break-wait-leeway:hover {
  background: rgba(59, 130, 246, 0.04);
  border-color: rgba(59, 130, 246, 0.5);
  box-shadow: 0 8px 32px rgba(59, 130, 246, 0.08);
}

.break-card.break-wait-leeway .break-card-dot {
  border-color: var(--accent);
  color: var(--accent);
}

.break-card.break-wait-leeway:hover .break-card-dot {
  box-shadow: 0 0 8px var(--primary-glow);
}

.break-card.break-wait-leeway .break-card-title {
  color: var(--accent);
}

.hos-reset-badge {
  display: inline-block;
  background: rgba(16, 185, 129, 0.15);
  color: #a7f3d0;
  border: 1px solid rgba(16, 185, 129, 0.3);
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 4px;
  font-weight: 700;
  margin-left: 8px;
  letter-spacing: 0.3px;
  vertical-align: middle;
}

.break-card-subtitle-custom {
  font-size: 12px;
  color: var(--text-sub);
  margin-top: 4px;
  font-weight: 400;
}

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

/* Timeline dot */
.stop-card-dot {
  position: absolute;
  left: 14px;
  top: 20px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--bg-color);
  border: 4px solid var(--primary);
  box-shadow: 0 0 10px var(--primary-glow);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

/* Navigation Button directly below Stop Num Dot */
.stop-nav-btn {
  position: absolute;
  left: 11px;
  top: 52px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.7);
  border: 1.5px solid var(--card-border);
  color: var(--text-sub);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  transition: var(--transition-smooth);
  padding: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.stop-nav-btn:hover {
  background: var(--primary);
  color: #ffffff;
  border-color: var(--primary);
  box-shadow: 0 0 10px var(--primary-glow);
  transform: scale(1.15);
}

.stop-nav-btn svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5;
}

/* Card Header (Title & Actions) */
.stop-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 8px;
  position: relative;
  z-index: 1;
}

.stop-title-wrapper {
  flex: 1;
}

.stop-name {
  font-size: 18px;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 2px;
}

.stop-name-link {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px dashed rgba(96, 165, 250, 0.4);
  transition: var(--transition-smooth);
}

.stop-name-link:hover {
  color: #ffffff !important;
  border-bottom-color: var(--primary);
  text-shadow: 0 0 8px var(--primary-glow);
}


.stop-address {
  font-size: 13px;
  color: var(--text-sub);
  line-height: 1.4;
}

.stop-details-wrapper {
  width: 100%;
}

/* Stop card ETA green badge styling */
.stop-eta-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: #a7f3d0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.3);
  padding: 4px 10px;
  border-radius: 8px;
  margin-top: 8px;
  width: fit-content;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.1);
  vertical-align: middle;
}

.stop-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Small utility buttons */
.action-btn {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--card-border);
  color: var(--text-sub);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.action-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-main);
  border-color: rgba(255, 255, 255, 0.2);
}

.action-btn-danger:hover {
  background: rgba(244, 63, 94, 0.15);
  color: var(--danger);
  border-color: rgba(244, 63, 94, 0.25);
}

.action-btn.confirming {
  width: auto !important;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: rgba(244, 63, 94, 0.15) !important;
  border: 1.5px solid rgba(244, 63, 94, 0.6) !important;
  color: #fb7185 !important;
  box-shadow: 0 0 12px rgba(244, 63, 94, 0.3) !important;
}

.action-btn.confirming:hover {
  background: rgba(244, 63, 94, 0.25) !important;
  border-color: rgba(244, 63, 94, 0.8) !important;
  color: #ffffff !important;
}

.action-btn svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

/* Activity expected duration editor */
.duration-control {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  z-index: 1;
}

@media (min-width: 768px) {
  .duration-control {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px 32px;
    align-items: flex-start;
  }
  .duration-control .duration-editor-group {
    flex: 1;
    min-width: 240px;
    margin-top: 0 !important;
  }
}

.duration-editor-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stop-panel-save-btn {
  position: sticky;
  bottom: 12px;
  z-index: 15;
  margin-top: 16px;
  align-self: flex-end;
  width: auto;
  min-width: 160px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 4px 15px var(--primary-glow);
  font-family: var(--font-family);
}

@media (max-width: 768px) {
  .stop-panel-save-btn {
    bottom: 8px;
    width: 100%;
    align-self: center;
  }
}

.duration-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.duration-label.clickable {
  cursor: pointer;
  transition: var(--transition-smooth);
}

.duration-label.clickable:hover {
  color: var(--primary);
  text-shadow: 0 0 8px var(--primary-glow);
}

.duration-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.duration-preset {
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px solid var(--card-border);
  color: var(--text-sub);
  padding: 6px 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.duration-preset:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-main);
}

.duration-preset.active {
  background: rgba(59, 130, 246, 0.15);
  border-color: var(--primary);
  color: var(--accent);
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.2);
}

.custom-duration-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  background: #0f172a;
  border: 1.5px solid var(--card-border);
  border-radius: 10px;
  padding: 0 8px;
  height: 33px;
  transition: var(--transition-smooth);
}

.custom-duration-wrapper:focus-within {
  border-color: var(--primary);
  background: #111a2e;
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.2);
}

.custom-duration-input {
  width: 50px;
  background: none;
  border: none;
  color: var(--text-main);
  font-family: var(--font-family);
  font-size: 13px;
  text-align: center;
  outline: none;
}

/* Remove spin arrows from custom number input */
.custom-duration-input::-webkit-outer-spin-button,
.custom-duration-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}
.custom-duration-input[type=number] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.custom-duration-suffix {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
}

/* Search autocomplete container below list */
.search-container {
  background: rgba(255, 255, 255, 0.01);
  border: 1px dashed rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 24px;
  transition: var(--transition-smooth);
}

.search-container:focus-within {
  border-color: rgba(59, 130, 246, 0.4);
  background: rgba(59, 130, 246, 0.02);
}

.form-group {
  margin-bottom: 16px;
  position: relative;
}

.input-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-sub);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.input-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  stroke: var(--text-muted);
  fill: none;
  stroke-width: 2;
  pointer-events: none;
  transition: var(--transition-smooth);
}

.form-input {
  width: 100%;
  background: #0f172a;
  border: 1.5px solid var(--card-border);
  border-radius: 14px;
  padding: 14px 14px 14px 46px;
  color: var(--text-main);
  font-family: var(--font-family);
  font-size: 15px;
  transition: var(--transition-smooth);
}

.form-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 15px var(--primary-glow);
  background: #111a2e;
}

.form-input:focus + .input-icon {
  stroke: var(--primary);
}

.form-input.is-invalid {
  border-color: var(--danger) !important;
  box-shadow: 0 0 15px rgba(244, 63, 94, 0.35) !important;
}


.action-row {
  display: flex;
  gap: 12px;
}

.action-row .btn {
  flex: 1;
}

/* Map Panel Canvas Styles */
.map-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 500px;
}

.map-wrapper {
  flex: 1;
  position: relative;
  border-radius: 16px;
  border: 1px solid var(--card-border);
  background: #0d1222;
  overflow: hidden;
  min-height: 380px;
}

.map-canvas {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.map-controls {
  margin-top: 16px;
}

#clear-btn.confirming, #planner-clear-btn.confirming {
  background: rgba(244, 63, 94, 0.15) !important;
  border: 1.5px solid rgba(244, 63, 94, 0.6) !important;
  color: #fb7185 !important;
  box-shadow: 0 0 12px rgba(244, 63, 94, 0.3) !important;
}


/* General Buttons */
.btn {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--primary) 0%, #2563eb 100%);
  border: none;
  color: #ffffff;
  padding: 14px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 14px;
  cursor: pointer;
  box-shadow: 0 4px 15px var(--primary-glow);
  transition: var(--transition-smooth);
}

.btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px var(--primary-glow);
}

.btn:active:not(:disabled) {
  transform: translateY(0);
}

.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.05);
  border: 1.5px solid var(--card-border);
  color: var(--text-main);
  box-shadow: none;
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.btn-danger {
  background: linear-gradient(135deg, var(--danger) 0%, #be123c 100%);
  box-shadow: 0 4px 15px rgba(244, 63, 94, 0.2);
}

.btn svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

/* Modal Dialog Layouts */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 8, 18, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.modal-content {
  width: 100%;
  max-width: 440px;
  transform: scale(0.95);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  padding: 36px !important;
}

.modal-overlay.active .modal-content {
  transform: scale(1);
}

/* Centered Brand Header / Modal Header Styles */
.brand-header {
  text-align: center;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.brand-header .logo-wrapper {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px auto;
  border: 1px solid var(--card-border);
  background: rgba(255, 255, 255, 0.02);
  flex-shrink: 0;
}

.brand-header .logo-wrapper svg {
  width: 24px;
  height: 24px;
  stroke-width: 2;
  stroke: currentColor;
  fill: none;
}

.brand-header h2 {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 6px;
}

.brand-header .subtitle {
  font-size: 13px;
  color: var(--text-sub);
  line-height: 1.4;
}

/* Compact Horizontal Import Modal Header */
.import-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--card-border);
  padding-bottom: 16px;
  width: 100%;
}

.import-header .logo-wrapper {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--card-border);
  flex-shrink: 0;
}

.import-header .logo-wrapper svg {
  width: 20px;
  height: 20px;
  stroke-width: 2.2;
  stroke: currentColor;
  fill: none;
}

.import-header-content {
  flex-grow: 1;
  text-align: left;
}

.import-header h2 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 2px;
}

.import-header .subtitle {
  font-size: 12px;
  color: var(--text-sub);
  margin: 0;
}

.modal-close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  background: none;
  border: none;
  color: var(--text-sub);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.modal-close-btn:hover {
  color: var(--text-main);
}

/* Google Autocomplete Pac overrides */
.pac-container {
  background-color: var(--autocomplete-bg) !important;
  border: 1px solid var(--autocomplete-border) !important;
  border-radius: 14px !important;
  box-shadow: var(--autocomplete-shadow) !important;
  font-family: var(--font-family) !important;
  margin-top: 6px !important;
  z-index: 9999 !important;
  overflow: hidden;
}

.pac-item {
  padding: 10px 14px !important;
  border-top: 1px solid var(--autocomplete-row-border) !important;
  color: var(--text-main) !important;
  font-size: 13px !important;
  cursor: pointer;
  transition: background-color 0.2s;
}

.pac-item:hover, .pac-item-selected {
  background-color: var(--autocomplete-row-hover) !important;
}

.pac-icon {
  margin-top: 1px !important;
  filter: var(--autocomplete-icon-filter) !important;
}

.pac-item-query {
  color: var(--text-main) !important;
  font-size: 14px !important;
  font-weight: 500;
}

.pac-matched {
  color: var(--primary) !important;
  font-weight: 600;
}

/* Turnstile styling */
.turnstile-container {
  display: flex;
  justify-content: center;
  margin: 16px 0;
  min-height: 65px;
}

/* Spinner & animations */
.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  display: none;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.btn.loading .btn-text {
  display: none;
}

.btn.loading .spinner {
  display: block;
}

.pulse-icon {
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.08); opacity: 0.7; }
  100% { transform: scale(1); opacity: 1; }
}

.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: rgba(10, 15, 30, 0.9);
  border: 1px solid var(--card-border);
  padding: 14px 20px;
  border-radius: 12px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  z-index: 2100;
  transform: translateY(100px);
  opacity: 0;
  transition: var(--transition-smooth);
  font-size: 14px;
}

.toast.visible {
  transform: translateY(0);
  opacity: 1;
}

.toast-icon {
  width: 18px;
  height: 18px;
}

.toast-success .toast-icon {
  stroke: var(--success);
}

.toast-error .toast-icon {
  stroke: var(--danger);
}

/* Responsiveness Media Queries */
@media (max-width: 1023px) {
  .side-menu {
    transform: translateX(-100%);
    box-shadow: 15px 0 30px rgba(0, 0, 0, 0.5);
  }
  
  .side-menu.open {
    transform: translateX(0);
  }
  
  .side-menu-header {
    position: relative;
  }
  
  .menu-close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--card-border);
    color: var(--text-muted);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    transition: var(--transition-smooth);
    position: absolute;
    right: 16px;
    top: 16px;
    z-index: 1010;
  }
  
  .menu-close-btn svg {
    width: 16px;
    height: 16px;
  }
  
  .menu-close-btn:hover {
    color: var(--text-main);
    background: rgba(255, 255, 255, 0.1);
  }
  
  .mobile-header {
    display: flex;
  }

  .desktop-current-widget-container {
    display: none !important;
  }
  
  .mobile-logo-text {
    display: flex !important;
    align-items: center;
    font-size: 16px !important;
    margin-left: 8px !important;
    margin-right: auto !important;
  }
  
  .mobile-logo-text .mini-logo-text {
    display: none !important;
  }
  
  .main-content {
    margin-left: 0;
    padding: 0;
  }
  
  .dashboard-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .planner-panel.glass-card {
    border-radius: 0;
    border: none;
    border-bottom: 1px solid var(--card-border);
  }

  .map-panel.glass-card {
    border-radius: 0;
    border: none;
  }
  
  .map-panel {
    min-height: 400px;
  }
  
  .map-wrapper {
    min-height: 320px;
  }

  .panel-header {
    display: none;
  }

  .mobile-sticky-footer {
    display: block;
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(10, 15, 30, 0.9);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-top: 1px solid var(--card-border);
    padding: 12px 16px;
    z-index: 900;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.5);
  }
}

@media (max-width: 480px) {
  .view-toggle-btn {
    width: 36px !important;
  }
  
  .view-toggle-slider {
    width: 36px !important;
  }
  
  .view-toggle-container.compact-active .view-toggle-slider {
    transform: translateX(38px) !important;
  }
  
  .view-toggle-container.driver-active .view-toggle-slider {
    transform: translateX(76px) !important;
  }
  
  .view-toggle-btn .view-icon {
    display: block !important;
  }
  
  .view-toggle-btn .view-btn-text {
    display: none !important;
  }

  .main-content {
    padding: 0;
  }
  
  .glass-card {
    padding: 20px 16px;
  }

  .modal-content {
    padding: 24px 16px !important;
  }
  
  .planner-panel.glass-card,
  .map-panel.glass-card {
    border-radius: 0;
  }

  .mobile-logo-text .full-logo-text {
    display: none !important;
  }

  .mobile-logo-text .mini-logo-text {
    display: inline-block !important;
  }
  
  .stop-card {
    padding: 16px 16px 16px 40px;
  }
  
  .stop-card:not(.current-position-card):not(.current-position-card-compact) {
    padding: 0 !important;
  }
  
  .stop-card-sticky-header {
    top: 57px; /* Stick below the mobile header */
    padding: 12px 16px 6px 40px;
  }
  
  .stop-card-body {
    padding: 0 16px 12px 40px;
  }
  
  .stop-card-body::after {
    left: 19px;
  }
  
  .stop-card-dot {
    left: 11px;
  }
  
  .stop-nav-btn {
    left: 8px;
  }
  
  .duration-options {
    gap: 6px;
  }
  
  .duration-preset {
    padding: 4px 8px;
    font-size: 12px;
  }
  
  .custom-duration-wrapper {
    height: 29px;
  }
  
  .custom-duration-input {
    width: 40px;
    font-size: 12px;
  }
}

/* Start Location Button & Preferences Switch */
.input-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.input-label-row .input-label {
  margin-bottom: 0;
}

.btn-start-location {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.2);
  color: var(--accent);
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-family);
  cursor: pointer;
  transition: var(--transition-smooth);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.btn-start-location:hover {
  background: rgba(59, 130, 246, 0.2);
  border-color: rgba(59, 130, 246, 0.4);
  color: var(--text-main);
  transform: translateY(-1px);
}

.btn-start-location .gps-icon {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5;
}

.btn-start-location .btn-text-desktop {
  display: inline;
}

.btn-start-location .btn-text-mobile {
  display: none;
}

@media (max-width: 768px) {
  .btn-start-location .btn-text-desktop {
    display: none;
  }
  .btn-start-location .btn-text-mobile {
    display: inline;
  }
}

.switch-toggle {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}

.switch-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.switch-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.08);
  transition: var(--transition-smooth);
  border-radius: 24px;
  border: 1px solid var(--card-border);
}

.switch-slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background-color: var(--text-main);
  transition: var(--transition-smooth);
  border-radius: 50%;
}

.switch-toggle input:checked + .switch-slider {
  background-color: var(--primary);
  border-color: var(--accent);
}

.switch-toggle input:checked + .switch-slider:before {
  transform: translateX(20px);
}

/* Shared Trip Banner styling */
.shared-view-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 16px;
  padding: 16px 24px;
  margin-bottom: 24px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: slide-down 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes slide-down {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.banner-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.banner-pulse {
  width: 10px;
  height: 10px;
  background-color: var(--primary);
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
  animation: pulse-glow 2s infinite;
}

@keyframes pulse-glow {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 8px rgba(59, 130, 246, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
  }
}

.banner-text {
  font-size: 15px;
  font-weight: 600;
  color: var(--accent);
}

.banner-btn {
  width: auto !important;
  padding: 8px 16px !important;
  font-size: 13px !important;
  border-radius: 10px !important;
  height: 36px;
}

/* Sidebar Saved Trips container styles */
.sidebar-trips-container {
  margin-top: 15px;
  display: flex;
  flex-direction: column;
}

.side-menu-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.05);
  margin: 15px 0;
}

.side-menu-section-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 10px;
  padding-left: 18px;
}

.sidebar-trips-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 250px;
  overflow-y: auto;
  overflow-y: overlay;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-right: 6px;
}

/* Firefox: show thin scrollbar only on hover */
.sidebar-trips-list:hover {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

/* Custom scrollbar for saved trips list */
.sidebar-trips-list::-webkit-scrollbar {
  width: 5px;
}
.sidebar-trips-list::-webkit-scrollbar-track {
  background: transparent;
}
.sidebar-trips-list::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 3px;
}
.sidebar-trips-list:hover::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
}
.sidebar-trips-list::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.35) !important;
}

.sidebar-trip-item {
  display: flex;
  flex-direction: column;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.01);
  border: 1px solid rgba(255, 255, 255, 0.02);
  cursor: pointer;
  transition: var(--transition-smooth);
}

.sidebar-trip-item:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(59, 130, 246, 0.2);
  transform: translateX(2px);
}

.sidebar-trip-item.active {
  background: rgba(59, 130, 246, 0.06);
  border-color: var(--primary);
}

.sidebar-trip-item-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-trip-item-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* Read-Only State UI adjustments */
body.shared-view-readonly .stop-actions,
body.shared-view-readonly .search-container,
body.shared-view-readonly .map-controls {
  display: none !important;
}

body.shared-view-readonly .stop-card {
  padding-right: 24px !important; /* No extra padding for buttons */
}

/* Points of Interest (POI) custom style system */
.poi-info-window {
  font-family: var(--font-family);
  color: #0f172a; /* Google Maps InfoWindow has a white background by default, so we want dark text for contrast */
  max-width: 280px;
  padding: 4px;
}

.poi-info-header {
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.poi-badge {
  display: inline-block;
  align-self: flex-start;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 9999px;
  letter-spacing: 0.5px;
}

.poi-badge-travel_center {
  background-color: rgba(245, 158, 11, 0.15);
  color: #b45309;
}

.poi-badge-distribution_center {
  background-color: rgba(99, 102, 241, 0.15);
  color: #4338ca;
}

.poi-badge-rail_yard {
  background-color: rgba(217, 70, 239, 0.15);
  color: #a21caf;
}

.poi-badge-client_facility {
  background-color: rgba(16, 185, 129, 0.15);
  color: #047857;
}

.poi-info-title {
  font-size: 16px;
  font-weight: 600;
  color: #1e293b;
  margin: 0;
  line-height: 1.3;
}

.poi-info-body {
  margin-bottom: 12px;
}

.poi-amenities {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}

.poi-amenity-tag {
  font-size: 10px;
  background-color: #f1f5f9;
  color: #475569;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 500;
}

.poi-insights {
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.poi-insight-item {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
}

.insight-label {
  color: #64748b;
  font-weight: 500;
}

.insight-value {
  color: #1e293b;
  font-weight: 600;
}

.status-normal, .insight-value.status-normal {
  color: #16a34a !important;
}

.status-busy, .insight-value.status-busy {
  color: #ca8a04 !important;
}

.status-delayed, .insight-value.status-delayed {
  color: #dc2626 !important;
}

.poi-info-footer {
  margin-top: 8px;
}

.add-poi-to-trip-btn {
  width: 100%;
  background: #2563eb !important;
  color: white !important;
  border: none;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 8px !important;
  border-radius: 8px !important;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s ease;
}

.add-poi-to-trip-btn:hover {
  background: #1d4ed8 !important;
}

/* Google Sign-In & Mock account selector styles */
.btn-google {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1.5px solid var(--card-border) !important;
  color: var(--text-main) !important;
  box-shadow: none !important;
  transition: var(--transition-smooth) !important;
}

.btn-google:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 4px 15px rgba(255, 255, 255, 0.05) !important;
  transform: translateY(-2px);
}

.mock-account-row {
  transition: var(--transition-smooth) !important;
}

.mock-account-row:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: var(--primary) !important;
  transform: translateY(-1px);
}

.avatar-circle {
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Compact View Styles */
.transit-card-compact {
  background: #cbd5e1 !important; /* solid light grey */
  color: #0f172a !important; /* dark slate text */
  min-height: 54px !important;
  padding: 8px 16px !important;
  border-radius: 0 !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}

.transit-card-compact:hover {
  background: #cbd5e1 !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08) !important;
}

.transit-card-compact .transit-card-dot {
  display: none !important;
}

.transit-card-compact:hover .transit-card-dot {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
  box-shadow: 0 0 6px rgba(59, 130, 246, 0.25) !important;
}

.transit-card-compact .transit-card-content {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: unset !important;
  gap: 12px !important;
}

.transit-card-compact .transit-time-start,
.transit-card-compact .transit-time-end {
  margin: 0 !important;
  background: #0f172a !important;
  color: #f1f5f9 !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.transit-card-compact .transit-center-col {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 !important;
  gap: 4px !important;
}

.transit-card-compact .transit-info-row {
  margin: 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 6px !important;
}

.transit-card-compact .transit-duration {
  color: #1e3a8a !important; /* dark blue for high contrast */
  font-size: 14px !important;
}

.transit-card-compact.modifier-faster .transit-duration {
  color: #065f46 !important; /* dark green */
}

.transit-card-compact.modifier-slower .transit-duration {
  color: #991b1b !important; /* dark red */
}

.transit-card-compact .transit-distance {
  color: #475569 !important;
  font-size: 12px !important;
}

.transit-card-compact .transit-original-duration {
  color: #64748b !important;
}

.transit-card-compact .transit-ratio-badge.better {
  background: rgba(16, 185, 129, 0.1) !important;
  color: #065f46 !important;
  border-color: rgba(16, 185, 129, 0.2) !important;
}

.transit-card-compact .transit-ratio-badge.worse {
  background: rgba(244, 63, 94, 0.1) !important;
  color: #991b1b !important;
  border-color: rgba(244, 63, 94, 0.2) !important;
}

.transit-card-compact .transit-modifier-container {
  display: flex !important;
  gap: 4px !important;
  margin: 0 !important;
  opacity: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  transform: translateY(2px) !important;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              max-height 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              margin-top 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  transition-delay: 0s !important;
}

.transit-card-compact:hover .transit-modifier-container {
  opacity: 1 !important;
  max-height: 36px !important;
  overflow: visible !important;
  transform: translateY(0) !important;
  margin-top: 4px !important;
  transition-delay: 0.2s !important;
}

.transit-card-compact.modifier-faster .transit-modifier-container,
.transit-card-compact.modifier-slower .transit-modifier-container {
  opacity: 1 !important;
  max-height: 36px !important;
  overflow: visible !important;
  transform: translateY(0) !important;
  margin-top: 4px !important;
  transition-delay: 0s !important;
}

.transit-card-compact .transit-modifier-btn {
  background: rgba(15, 23, 42, 0.06) !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  color: #475569 !important;
  padding: 3px 8px !important;
  font-size: 10px !important;
  border-radius: 6px !important;
}

.transit-card-compact .transit-modifier-btn:hover:not(:disabled) {
  background: rgba(15, 23, 42, 0.12) !important;
  color: #0f172a !important;
  border-color: rgba(15, 23, 42, 0.2) !important;
}

.transit-card-compact .transit-modifier-btn.active.btn-faster {
  background: rgba(16, 185, 129, 0.15) !important;
  border-color: #059669 !important;
  color: #065f46 !important;
  box-shadow: none !important;
}

.transit-card-compact .transit-modifier-btn.active.btn-normal {
  background: rgba(59, 130, 246, 0.15) !important;
  border-color: #2563eb !important;
  color: #1e40af !important;
  box-shadow: none !important;
}

.transit-card-compact .transit-modifier-btn.active.btn-slower {
  background: rgba(244, 63, 94, 0.15) !important;
  border-color: #dc2626 !important;
  color: #991b1b !important;
  box-shadow: none !important;
}

.transit-card-compact .transit-loading-text {
  color: #475569 !important;
}

/* Compact Break Card Styles */
.break-card-compact {
  min-height: 54px !important;
  max-height: 54px !important;
  padding: 8px 16px !important;
  border-radius: 0 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
  margin: -8px 0 -8px 0 !important;
  color: #0f172a !important; /* dark slate text for contrast */
  overflow: hidden !important;
  transition-property: max-height, background, border-color, box-shadow !important;
  transition-duration: 0.3s, 0.2s, 0.2s, 0.2s !important;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1), ease, ease, ease !important;
  transition-delay: 0s !important;
}

.break-card-compact:hover,
.break-card-compact:focus-within,
.break-card-compact:active {
  max-height: 200px !important;
  z-index: 10 !important;
  transition-delay: 0.5s, 0s, 0s, 0s !important; /* Only delay max-height expansion */
}

.break-card-compact .break-card-dot {
  display: none !important;
}

.break-card-compact .break-card-content {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: unset !important;
  gap: 12px !important;
}

.break-card-compact .break-time-start,
.break-card-compact .break-time-end {
  display: inline-block;
  width: fit-content;
  font-size: 11px;
  font-weight: 600;
  color: #f1f5f9 !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: #0f172a !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  padding: 4px 10px;
  border-radius: 8px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  margin: 0 !important;
}

.break-card-compact .break-time-start.interactive-start,
.break-card-compact .break-time-end.interactive-end {
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.break-card-compact .break-time-start.interactive-start:hover,
.break-card-compact .break-time-end.interactive-end:hover {
  background: #f59e0b !important; /* amber warning color */
  color: #0f172a !important;
  border-color: #f59e0b !important;
  transform: scale(1.05);
}

.break-card-time .interactive-time {
  cursor: pointer;
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--text-main);
  transition: all 0.2s ease;
}

.break-card-time .interactive-time:hover {
  background: #f59e0b !important;
  color: #0f172a !important;
  border-color: #f59e0b !important;
  transform: scale(1.05);
}

.break-card-compact .break-center-col {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 !important;
  gap: 2px !important;
}

.break-card-compact .break-card-title {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.break-card-compact .break-duration-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

.break-card-compact .break-card-duration {
  font-size: 14px !important;
  font-weight: 700 !important;
}

.break-card-compact .break-card-subtitle-custom {
  color: #475569 !important; /* muted slate */
  font-size: 11px !important;
  font-weight: 500 !important;
  max-height: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  margin-top: 0 !important;
  transition-property: max-height, opacity, margin-top !important;
  transition-duration: 0.25s, 0.25s, 0.25s !important;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1), ease, ease !important;
  transition-delay: 0s !important;
}

.break-card-compact:hover .break-card-subtitle-custom,
.break-card-compact:focus-within .break-card-subtitle-custom,
.break-card-compact:active .break-card-subtitle-custom {
  max-height: 80px !important;
  opacity: 1 !important;
  margin-top: 4px !important;
  transition-delay: 0.5s !important; /* Delay showing details */
}

.break-card-compact .break-card-actions {
  opacity: 0 !important;
  max-width: 0 !important;
  overflow: hidden !important;
  transform: translateX(4px) !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  transition-property: opacity, max-width, transform !important;
  transition-duration: 0.3s, 0.3s, 0.3s !important;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1), ease, ease !important;
  transition-delay: 0s !important;
}

.break-card-compact:hover .break-card-actions,
.break-card-compact:focus-within .break-card-actions,
.break-card-compact:active .break-card-actions {
  opacity: 1 !important;
  max-width: 150px !important;
  overflow: visible !important;
  transform: translateX(0) !important;
  transition-delay: 0.5s !important; /* Delay showing actions */
}

.break-card-compact .break-card-reason {
  opacity: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  margin-top: 0 !important;
  transform: translateY(2px) !important;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              max-height 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              margin-top 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  transition-delay: 0s !important;
}

.break-card-compact:hover .break-card-reason {
  opacity: 1 !important;
  max-height: 36px !important;
  overflow: visible !important;
  transform: translateY(0) !important;
  margin-top: 4px !important;
  transition-delay: 0.1s !important;
}

.break-card-compact .break-card-reason {
  font-size: 11px !important;
  color: #78350f !important;
  font-weight: 500 !important;
  text-align: center;
}

.break-card-compact .break-delete-btn {
  padding: 2px 8px !important;
  font-size: 10px !important;
  border-radius: 6px !important;
}

.break-card-compact .break-extend-btn {
  padding: 2px 8px !important;
  font-size: 10px !important;
  border-radius: 6px !important;
  background: rgba(217, 119, 6, 0.1) !important;
  border: 1px solid rgba(217, 119, 6, 0.2) !important;
  color: #b45309 !important;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.break-card-compact .break-extend-btn:hover {
  background: rgba(217, 119, 6, 0.2) !important;
  border-color: rgba(217, 119, 6, 0.3) !important;
  transform: translateY(-1px);
}

/* 1. Wait Before Stop (Blue theme) */
.break-card-compact.break-wait-leeway {
  background: #dbeafe !important; /* solid light blue background */
  border-color: rgba(30, 58, 138, 0.08) !important;
  box-shadow: 0 4px 12px rgba(30, 58, 138, 0.05) !important;
}

.break-card-compact.break-wait-leeway:hover {
  background: #dbeafe !important;
  border-color: rgba(30, 58, 138, 0.15) !important;
  box-shadow: 0 6px 16px rgba(30, 58, 138, 0.08) !important;
}

.break-card-compact.break-wait-leeway .break-card-title {
  color: #1e40af !important; /* dark blue title */
}

.break-card-compact.break-wait-leeway .break-card-duration {
  color: #1e3a8a !important; /* strong blue contrast for duration */
}

/* 2. Break Before Appointment (Purple theme) */
.break-card-compact.break-appointment-reset {
  background: #f3e8ff !important; /* solid light purple background */
  border-color: rgba(109, 40, 217, 0.08) !important;
  box-shadow: 0 4px 12px rgba(109, 40, 217, 0.05) !important;
}

.break-card-compact.break-appointment-reset:hover {
  background: #f3e8ff !important;
  border-color: rgba(109, 40, 217, 0.15) !important;
  box-shadow: 0 6px 16px rgba(109, 40, 217, 0.08) !important;
}

.break-card-compact.break-appointment-reset .break-card-title {
  color: #6d28d9 !important; /* dark purple title */
}

.break-card-compact.break-appointment-reset .break-card-duration {
  color: #4c1d95 !important; /* strong purple contrast for duration */
}

.break-card-compact.break-appointment-reset .hos-reset-badge {
  background: rgba(109, 40, 217, 0.1) !important;
  color: #6d28d9 !important;
  border-color: rgba(109, 40, 217, 0.2) !important;
}

/* 3. Rest Breaks / HOS Rest Breaks (Amber theme) */
.break-card-compact.break-rest-card {
  background: #fef3c7 !important; /* solid light amber background */
  border-color: rgba(217, 119, 6, 0.08) !important;
  box-shadow: 0 4px 12px rgba(217, 119, 6, 0.05) !important;
}

.break-card-compact.break-rest-card:hover {
  background: #fef3c7 !important;
  border-color: rgba(217, 119, 6, 0.15) !important;
  box-shadow: 0 6px 16px rgba(217, 119, 6, 0.08) !important;
}

.break-card-compact.break-rest-card .break-card-title {
  color: #b45309 !important; /* dark amber title */
}

.break-card-compact.break-rest-card .break-card-duration {
  color: #78350f !important; /* strong amber contrast for duration */
}

/* Active Stop Departure Sticky Banner */
.active-stop-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: 16px;
  padding: 16px 24px;
  margin-bottom: 24px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: slide-down 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.active-stop-banner-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.active-stop-pulse {
  width: 10px;
  height: 10px;
  background-color: var(--success);
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  animation: active-stop-pulse-glow 2s infinite;
}

@keyframes active-stop-pulse-glow {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}

.active-stop-banner-text {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-main);
}

/* Stop Card Arrival Actualization styles */
.stop-card.detected-arrived {
  border: 2px solid rgba(16, 185, 129, 0.5) !important;
  box-shadow: 0 0 15px rgba(16, 185, 129, 0.15) !important;
  animation: pulse-arrived-border 2.5s infinite;
}

@keyframes pulse-arrived-border {
  0% { border-color: rgba(16, 185, 129, 0.4); }
  50% { border-color: rgba(16, 185, 129, 0.85); }
  100% { border-color: rgba(16, 185, 129, 0.4); }
}

.stop-card.arrived {
  border-left: 4px solid var(--success) !important;
}

.btn-confirm-arrival {
  background: linear-gradient(135deg, var(--success) 0%, #059669 100%) !important;
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.2) !important;
}

.btn-confirm-arrival:hover {
  box-shadow: 0 8px 25px rgba(16, 185, 129, 0.3) !important;
}

.stop-card-actuals-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.actual-time-display {
  font-size: 12px;
  color: var(--success);
  font-weight: 500;
}

.btn-adjust-actual {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid var(--card-border);
  transition: var(--transition-smooth);
}

.btn-adjust-actual:hover {
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.2);
}

.btn-adjust-actual svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

.btn-undo-departure {
  background: none;
  border: none;
  color: var(--error);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid rgba(239, 68, 68, 0.25);
  transition: var(--transition-smooth);
}

.btn-undo-departure:hover {
  color: #fca5a5;
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.5);
}

.btn-undo-departure svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

.btn-undo-departure.confirming {
  background: rgba(239, 68, 68, 0.15) !important;
  border: 1px solid rgba(239, 68, 68, 0.6) !important;
  color: #fb7185 !important;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.3) !important;
}

.btn-undo-departure.confirming:hover {
  background: rgba(239, 68, 68, 0.25) !important;
  border-color: rgba(239, 68, 68, 0.8) !important;
  color: #ffffff !important;
}

/* Current Position Timeline Card (Standard Mode) */
.stop-card.current-position-card {
  border-color: rgba(59, 130, 246, 0.45);
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.15);
  background: #0f172a;
  border-radius: 16px; /* Mimic other modes */
  padding: 12px 24px 16px 48px !important;
}

.stop-card.current-position-card:hover {
  background: #152038;
  border-color: rgba(59, 130, 246, 0.6);
}

.current-position-card .stop-card-sticky-header,
.current-position-card-compact .stop-card-sticky-header {
  position: static !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  margin: 0 !important;
  box-shadow: none !important;
}

.current-position-card .stop-card-sticky-header::after,
.current-position-card-compact .stop-card-sticky-header::after {
  content: none !important;
}

/* Style HOS container inside the standard/compact Current Position Card to ensure it does not get lost */
.current-position-card .hos-container,
.current-position-card-compact .hos-container {
  background: rgba(241, 245, 249, 0.9) !important; /* Nice light slate/grey background with high opacity */
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(203, 213, 225, 0.8) !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  margin-top: 14px !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
}

.current-position-card .hos-container .hos-section-title,
.current-position-card-compact .hos-container .hos-section-title {
  color: #1e3a8a !important; /* Rich dark blue for strong contrast */
  font-weight: 700 !important;
  text-shadow: none !important;
}

.current-position-card .hos-container .current-hos-reset-btn,
.current-position-card-compact .hos-container .current-hos-reset-btn {
  color: #475569 !important; /* Medium slate grey */
  font-weight: 600 !important;
}

.current-position-card .hos-container .current-hos-reset-btn:hover,
.current-position-card-compact .hos-container .current-hos-reset-btn:hover {
  color: #e11d48 !important; /* Elegant red accent on hover */
}

.current-position-card .hos-container .hos-input-group,
.current-position-card-compact .hos-container .hos-input-group {
  background: #ffffff !important; /* Solid clean white background for input items */
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  padding: 6px 10px !important;
  border-radius: 8px !important;
}

.current-position-card .hos-container .hos-input-label,
.current-position-card-compact .hos-container .hos-input-label {
  color: #334155 !important; /* Dark slate grey text for labels */
  font-weight: 600 !important;
}

.current-position-card .hos-container .hos-number-input,
.current-position-card-compact .hos-container .hos-number-input {
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important; /* High contrast dark grey/black input values */
}

.current-position-card .hos-container .hos-number-input:focus,
.current-position-card-compact .hos-container .hos-number-input:focus {
  border-color: #3b82f6 !important;
  background: #eff6ff !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
}

.current-position-card .hos-container .hos-time-sep,
.current-position-card-compact .hos-container .hos-time-sep {
  color: #64748b !important; /* Slate grey for separators */
  font-weight: 600 !important;
}

.current-position-dot {
  border: 4px solid var(--accent) !important;
  box-shadow: 0 0 10px var(--accent-glow) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.ping-pulse {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
  pointer-events: none;
}

.ping-pulse.pulse-active {
  animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) 1;
}

@keyframes ping {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  75%, 100% {
    transform: scale(2.2);
    opacity: 0;
  }
}

/* Compact Current Position Card */
.current-position-card-compact {
  min-height: 54px !important;
  padding: 8px 16px 8px 48px !important;
  border-radius: 16px !important; /* Mimic other modes (rounded corners) */
  background: rgba(15, 23, 42, 0.65) !important; /* Premium dark mode glassmorphism background */
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border-color: rgba(59, 130, 246, 0.35) !important;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.08) !important;
  margin: 0 !important; /* Mimic other modes (no negative overlap) */
  color: var(--text-main) !important; /* Premium light text color */
}

/* Starting search mode styling to look like driving mode (transit) card */
.stop-card.starting-search-mode {
  background: var(--card-bg) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border: 1px solid var(--card-border-active) !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
}

.view-driver .stop-card.starting-search-mode {
  background: var(--card-bg) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border: 1px solid var(--card-border-active) !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
}

/* Ensure starting search mode uses block layout and matches Drive mode view style */
.current-position-card-compact.starting-search-mode {
  display: block !important;
  width: 100% !important;
  background: var(--card-bg) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border: 1px solid var(--card-border-active) !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
}

.view-driver .stop-card.starting-search-mode .stop-card-dot,
.view-compact .stop-card.starting-search-mode .stop-card-dot,
.stop-card.starting-search-mode .stop-card-dot {
  position: absolute !important;
  left: 14px !important;
  top: 20px !important;
  transform: none !important;
}

.view-driver .stop-card.starting-search-mode .stop-card-sticky-header,
.view-compact .stop-card.starting-search-mode .stop-card-sticky-header,
.stop-card.starting-search-mode .stop-card-sticky-header {
  display: block !important;
  width: 100% !important;
}

.view-driver .stop-card.starting-search-mode .stop-card-header,
.view-compact .stop-card.starting-search-mode .stop-card-header,
.stop-card.starting-search-mode .stop-card-header {
  display: flex !important;
  width: 100% !important;
}

.view-driver .stop-card.starting-search-mode .stop-title-wrapper,
.view-compact .stop-card.starting-search-mode .stop-title-wrapper,
.stop-card.starting-search-mode .stop-title-wrapper {
  display: block !important;
  width: 100% !important;
  flex: 1 !important;
  grid-column: auto !important;
}

.current-position-card-compact.starting-search-mode:hover {
  background: linear-gradient(135deg, rgba(38, 51, 73, 0.95) 0%, rgba(20, 30, 52, 0.98) 100%) !important;
  border-color: rgba(59, 130, 246, 0.45) !important;
}

.current-position-card-compact:hover {
  background: rgba(21, 32, 56, 0.75) !important;
  border-color: rgba(59, 130, 246, 0.5) !important;
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.12) !important;
}

.current-position-card-compact .current-position-title {
  color: var(--text-main) !important;
}

.current-position-card-compact .current-position-status {
  color: var(--text-sub) !important;
}

.current-position-card-compact.expanded {
  min-height: 155px !important;
  color: #ffffff !important;
  background: rgba(15, 23, 42, 0.8) !important; /* Premium glassmorphism bg when expanded */
  border-color: rgba(59, 130, 246, 0.45) !important;
}

.current-position-card-compact.expanded .current-position-title,
.current-position-card-compact.expanded .current-position-status {
  color: #ffffff !important;
}

/* Fallback styles inside current widget */
.gps-fallback-container {
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 12px;
}

.current-position-card-compact .gps-fallback-container {
  background: rgba(255, 255, 255, 0.02) !important;
  border-color: rgba(59, 130, 246, 0.25) !important;
}

.current-location-poi-select {
  flex: 1;
  min-width: 140px;
}

.current-location-search-input:focus,
.current-location-poi-select:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 8px var(--primary-glow) !important;
}

/* Persistent containers layout */
.desktop-current-widget-container {
  margin-bottom: 20px;
  width: 100%;
}

.mobile-current-widget-container {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 12px;
  position: relative;
}

/* Mobile widget trigger button */
.mobile-current-widget-trigger {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--text-main);
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  border-radius: 20px;
  padding: 6px 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: var(--transition-smooth);
  white-space: nowrap;
}

.mobile-current-widget-trigger:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

.mobile-current-widget-trigger.on-break {
  border-color: rgba(245, 158, 11, 0.45);
  background: rgba(245, 158, 11, 0.1);
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.15);
  color: #fbbf24;
}

.mobile-current-widget-trigger.at-stop,
.mobile-current-widget-trigger.in-transit {
  border-color: rgba(59, 130, 246, 0.45);
  background: rgba(59, 130, 246, 0.1);
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.15);
  color: #60a5fa;
}

/* Dropdown Menu overlay on mobile header */
.mobile-current-widget-wrapper {
  position: relative;
  display: inline-block;
}

.mobile-current-widget-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  width: 320px;
  max-width: calc(100vw - 32px);
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 15px rgba(59, 130, 246, 0.1);
  z-index: 1000;
}

.mobile-current-widget-wrapper.active .mobile-current-widget-dropdown {
  display: block;
  animation: dropdown-fade-in 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes dropdown-fade-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* On Break state style for cards */
.stop-card.on-break-state {
  border-color: rgba(245, 158, 11, 0.35) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 25px rgba(245, 158, 11, 0.15), inset 0 0 15px rgba(245, 158, 11, 0.05) !important;
  --stop-card-bg: #151412;
  background: linear-gradient(135deg, rgba(24, 18, 10, 0.9) 0%, rgba(15, 23, 42, 0.95) 100%) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.stop-card.on-break-state:hover {
  border-color: rgba(245, 158, 11, 0.5) !important;
  --stop-card-bg: #1d1a16;
  background: linear-gradient(135deg, rgba(32, 24, 12, 0.9) 0%, rgba(20, 30, 50, 0.95) 100%) !important;
}

/* Compact overrides when on break state is active */
.current-position-card-compact.on-break-state {
  background: linear-gradient(135deg, rgba(24, 18, 10, 0.95) 0%, rgba(15, 23, 42, 0.98) 100%) !important;
  border-color: rgba(245, 158, 11, 0.35) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 15px rgba(245, 158, 11, 0.1) !important;
  color: #ffffff !important;
}

.current-position-card-compact.on-break-state .current-position-title {
  color: #ffffff !important;
  text-shadow: 0 0 8px rgba(245, 158, 11, 0.3) !important;
}

.current-position-card-compact.on-break-state .current-position-status {
  color: #fbbf24 !important;
}

/* Break Dot style */
.current-position-dot.break-dot {
  border-color: var(--warning) !important;
  box-shadow: 0 0 10px var(--warning-glow) !important;
}

/* Break specific adjustments block */
.break-adjustment-options .duration-preset {
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.25);
  color: #fbbf24;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.break-adjustment-options .duration-preset:hover {
  background: rgba(245, 158, 11, 0.2);
  border-color: rgba(245, 158, 11, 0.45);
}

.break-adjustment-options .custom-duration-wrapper {
  background: rgba(245, 158, 11, 0.05);
  border: 1px solid rgba(245, 158, 11, 0.15);
}

.merged-break-subpanel {
  margin: 12px 0 12px 0 !important;
}

/* Responsive layout for current location actions, Hours of Service inputs, and map controls (prevents horizontal overflow) */
.current-position-actions {
  display: flex !important;
  gap: 10px !important;
  width: 100% !important;
  flex-flow: row wrap !important;
}

.current-position-actions .btn {
  flex: 1 1 120px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 0 !important;
  margin-left: 0 !important;
  padding: 10px 16px !important;
  min-width: 0 !important;
}

.hos-inputs-row {
  display: flex !important;
  gap: 10px !important;
  width: 100% !important;
  flex-flow: row wrap !important;
}

.hos-inputs-row .hos-input-group {
  flex: 1 1 140px !important;
  padding: 6px 10px !important;
}

.map-controls {
  display: flex !important;
  gap: 10px !important;
  width: 100% !important;
  flex-flow: row wrap !important;
}

.map-controls .btn {
  flex: 1 1 120px !important;
  min-width: 0 !important;
  margin: 0 !important;
}

/* Rest Breaks Actualization and Deviation Badges */
.break-card.actualized {
  border-left: 4px solid var(--success) !important;
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.08) !important;
}

.break-card-compact.actualized {
  border-left: 3px solid #10b981 !important;
}

.break-card .time-row {
  font-size: 13px;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.break-card .time-row .label {
  color: var(--text-muted);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.break-card .time-row.planned-time {
  color: var(--text-muted);
  text-decoration: line-through;
  opacity: 0.6;
}

.break-card .time-row.actual-time {
  color: var(--success);
  font-weight: 600;
}

.break-deviation-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.deviation-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.deviation-badge.success {
  background: rgba(16, 185, 129, 0.12);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.deviation-badge.warning {
  background: rgba(245, 158, 11, 0.12);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.25);
}

.deviation-badge.info {
  background: rgba(59, 130, 246, 0.12);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.25);
}

.break-time-start.actualized-time,
.break-time-end.actualized-time {
  color: #34d399 !important;
  font-weight: 700 !important;
}

.break-compact-deviation {
  margin-top: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}

.break-card-compact.actualized .break-compact-deviation .dev-start {
  color: #059669;
}

.break-card-compact.actualized .break-compact-deviation .dev-dur {
  color: #047857;
}

/* Custom Saved Locations & Quick-Matching Styles */

.poi-badge-saved_location {
  background-color: rgba(236, 72, 153, 0.15);
  color: #ec4899;
}

.quick-matches-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--autocomplete-bg) !important;
  border: 1px solid var(--autocomplete-border) !important;
  border-radius: 14px;
  box-shadow: var(--autocomplete-shadow) !important;
  z-index: 1000;
  max-height: 280px;
  overflow-y: auto;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  margin-top: 6px;
  display: flex;
  flex-direction: column;
}

.quick-matches-dropdown.open-upward {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 6px;
  box-shadow: var(--autocomplete-shadow) !important;
}

.quick-match-header {
  padding: 12px 16px 8px 16px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--autocomplete-row-border) !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.quick-match-row {
  display: flex;
  padding: 12px 16px;
  border-bottom: 1px solid var(--autocomplete-row-border) !important;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.quick-match-row:last-child {
  border-bottom: none !important;
}

.quick-match-row:hover {
  background-color: var(--autocomplete-row-hover) !important;
}

.quick-match-row.highlighted {
  background-color: var(--autocomplete-row-highlight) !important;
}

.quick-match-text-col {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.quick-match-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 8px;
}

.quick-match-address {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 280px;
}

.quick-match-meta-info {
  font-size: 11px;
  color: #ec4899;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}

.quick-match-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

.quick-match-action-btn {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  padding: 6px;
  cursor: pointer;
  color: var(--text-muted);
  border-radius: 8px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.quick-match-action-btn:hover {
  color: var(--text-main);
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.1);
  transform: translateY(-1px);
}

.quick-match-action-btn svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

/* Saved Locations Management List inside Modal */
.manage-locations-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Premium Tabular and Responsive Styles for Saved Locations */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  border-radius: 16px;
  border: 1px solid var(--card-border);
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  margin-top: 10px;
}

.premium-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 14px;
}

.premium-table th {
  padding: 14px 18px;
  color: var(--text-sub);
  font-weight: 600;
  border-bottom: 1.5px solid var(--card-border);
  background: rgba(255, 255, 255, 0.02);
}

.premium-table td {
  padding: 14px 18px;
  color: var(--text-sub);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.premium-table-row {
  transition: background-color 0.2s ease;
}

.premium-table-row:hover {
  background-color: rgba(255, 255, 255, 0.03);
}

.premium-table th div:hover {
  color: var(--text-main);
}

.manage-location-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 1.5px solid var(--card-border);
  border-radius: 12px;
  gap: 12px;
  transition: all 0.2s ease;
}

.manage-location-row:hover {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
}

.manage-location-text-col {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.manage-location-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 8px;
}

.manage-location-address {
  font-size: 12px;
  color: var(--text-muted);
  max-width: 380px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.manage-location-meta {
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
  background: rgba(255, 255, 255, 0.02);
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.manage-location-meta-item {
  color: var(--text-muted);
}

.manage-location-meta-item strong {
  color: var(--text-sub);
}

.manage-location-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  width: 100%;
}

.manage-location-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
}

.add-itinerary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  flex-shrink: 0;
  height: 34px;
  margin: 0;
  padding: 0 12px;
  box-sizing: border-box;
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.25);
  color: #3b82f6;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1;
  cursor: pointer;
  transition: all 0.2s ease;
}

.add-itinerary-btn:hover {
  background: rgba(59, 130, 246, 0.18);
  border-color: rgba(59, 130, 246, 0.4);
  color: #ffffff;
}

.add-itinerary-btn svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 2.5;
  fill: none;
  flex-shrink: 0;
}

.manage-location-action-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--card-border);
  margin: 0;
  padding: 0;
  width: 34px;
  height: 34px;
  box-sizing: border-box;
  cursor: pointer;
  color: var(--text-muted);
  border-radius: 8px;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.manage-location-action-btn:hover {
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateY(-1px);
}

.manage-location-action-btn.delete-btn:hover {
  color: #f87171;
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.2);
}

.manage-location-action-btn.delete-btn[data-confirm="true"] {
  color: #f87171 !important;
  background: rgba(239, 68, 68, 0.15) !important;
  border-color: rgba(239, 68, 68, 0.4) !important;
}

.manage-location-action-btn.add-btn {
  color: #3b82f6 !important;
  background: rgba(59, 130, 246, 0.08) !important;
  border-color: rgba(59, 130, 246, 0.2) !important;
}

.manage-location-action-btn.add-btn:hover {
  color: #ffffff !important;
  background: rgba(59, 130, 246, 0.2) !important;
  border-color: rgba(59, 130, 246, 0.4) !important;
}

.manage-location-action-btn svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

.manage-location-action-btn * {
  pointer-events: none;
}

.no-locations-msg {
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
  padding: 30px 20px;
  background: rgba(255, 255, 255, 0.01);
  border: 1px dashed rgba(255, 255, 255, 0.05);
  border-radius: 12px;
}

/* Autosave Status Indicator Styles */
.autosave-status {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
  margin-left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: opacity 0.3s ease;
  opacity: 0.8;
}

/* When the panel-title is hidden, position it absolutely above the driver selector */
.panel-title[style*="display: none"] ~ .autosave-status,
.panel-title[style*="display:none"] ~ .autosave-status {
  position: absolute;
  top: -18px;
  left: 0;
  margin-left: 0;
  z-index: 10;
}

@media (max-width: 1023px) {
  .panel-title[style*="display: none"] ~ .autosave-status,
  .panel-title[style*="display:none"] ~ .autosave-status {
    top: -12px;
  }
}

.autosave-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--success);
  box-shadow: 0 0 8px var(--success);
}

.autosave-status.saving .autosave-status-dot {
  background-color: var(--warning);
  box-shadow: 0 0 8px var(--warning);
  animation: pulse 1s infinite;
}

.autosave-status.error .autosave-status-dot {
  background-color: var(--error);
  box-shadow: 0 0 8px var(--error);
}

/* Start Mode Toggle Styles */
.start-mode-toggle-container {
  display: flex;
  background: #0d1222; /* Solid dark background to prevent map/image bleed-through */
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  padding: 3px;
  border-radius: 12px;
  gap: 2px;
  position: relative;
  isolation: isolate;
  margin-bottom: 16px;
  width: 100%;
}

.start-mode-toggle-slider {
  position: absolute;
  top: 3px;
  left: 3px;
  height: calc(100% - 6px);
  width: calc(50% - 4px);
  background: #2563eb; /* Solid royal blue for excellent visibility */
  border: 1px solid #3b82f6;
  border-radius: 9px;
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.4);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: -1;
  pointer-events: none;
}

.start-mode-toggle-container.stop1-active .start-mode-toggle-slider {
  transform: translateX(calc(100% + 2px));
}

.start-mode-btn {
  flex: 1;
  background: none !important;
  border: none !important;
  color: var(--text-sub); /* Improved contrast for inactive state */
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 600;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.start-mode-btn:hover {
  color: var(--text-main);
}

.start-mode-btn.active {
  color: #ffffff;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Light compact mode styling overrides to ensure high readability */
.current-position-card-compact .start-mode-toggle-container {
  background: #eff6ff; /* Solid very light blue background */
  border: 1px solid rgba(59, 130, 246, 0.25);
  box-shadow: 0 2px 6px rgba(59, 130, 246, 0.08);
}

.current-position-card-compact .start-mode-toggle-slider {
  background: #2563eb; /* Solid royal blue for high contrast */
  border: 1px solid #1d4ed8;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
}

.current-position-card-compact .start-mode-btn {
  color: #1e3a8a; /* Dark blue for inactive text on light blue background */
}

.current-position-card-compact .start-mode-btn:hover {
  color: #1d4ed8;
}

.current-position-card-compact .start-mode-btn.active {
  color: #ffffff; /* White text on active blue slider */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.start-mode-toggle-link {
  background: rgba(59, 130, 246, 0.12) !important;
  border: 1px solid rgba(59, 130, 246, 0.4) !important;
  color: #60a5fa !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 6px 12px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  text-transform: none !important;
  letter-spacing: 0.3px !important;
  margin-top: 2px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.start-mode-toggle-link:hover {
  background: rgba(59, 130, 246, 0.22) !important;
  color: #ffffff !important;
  border-color: rgba(59, 130, 246, 0.6) !important;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25) !important;
}

.start-mode-toggle-link:active {
  transform: scale(0.97) !important;
}

/* Compact view style overrides for the toggle link to match light blue background are removed to use standard dark theme link styles */

/* Premium body start mode toggle button styles */
.start-mode-body-btn {
  background: rgba(59, 130, 246, 0.1);
  border: 1.5px solid rgba(59, 130, 246, 0.3);
  color: #60a5fa;
  font-size: 11px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.start-mode-body-btn:hover {
  background: rgba(59, 130, 246, 0.2);
  color: #ffffff;
  border-color: rgba(59, 130, 246, 0.5);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

.current-position-card-compact .start-mode-body-btn {
  background: rgba(37, 99, 235, 0.1);
  border: 1px solid rgba(37, 99, 235, 0.2);
  color: #1d4ed8;
}

.current-position-card-compact .start-mode-body-btn:hover {
  background: #2563eb;
  color: #ffffff;
  border-color: #1d4ed8;
}

/* Fleet Switcher Styling */
.fleet-switcher-container {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
  margin-bottom: 4px;
  width: 100%;
}

.fleet-switcher-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-sub);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.fleet-select-dropdown {
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid var(--card-border);
  color: var(--text-main);
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  outline: none;
  font-family: var(--font-family);
  cursor: pointer;
  width: 100%;
  transition: var(--transition-smooth);
}

.fleet-select-dropdown:focus {
  border-color: var(--primary);
  box-shadow: 0 0 10px var(--primary-glow);
}

.fleet-select-dropdown option {
  background-color: #0f172a;
  color: var(--text-main);
}

.driver-selector-container {
  display: none;
  max-width: 240px;
  width: 100%;
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
}

#driver-select {
  height: 36px;
  padding: 0 12px;
  font-size: 13px;
  border-radius: 10px;
  width: 100%;
  flex-shrink: 1;
}

.sidebar-driver-selector-container {
  margin-left: 20px;
  margin-right: 16px;
  margin-top: 8px;
  margin-bottom: 12px;
}

.sidebar-driver-selector-container label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-sub);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: block;
  margin-bottom: 6px;
}

/* Responsive Driver Selector rules */
@media (min-width: 1024px) {
  .sidebar-driver-selector-container {
    display: none !important;
  }
}

@media (max-width: 1023px) {
  .driver-selector-container {
    display: none !important;
  }
}

/* Drivers Directory UI Styles */

.drivers-list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 12px;
}

.driver-card {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}

.driver-card:hover {
  transform: translateY(-4px);
  border-color: rgba(59, 130, 246, 0.3) !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4), 0 0 15px rgba(59, 130, 246, 0.1) !important;
}

.driver-card .avatar-circle {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.driver-card .deviation-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 4px 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Add custom animations for list load */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.driver-card {
  animation: fadeInUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Fleet Switcher Row styling to align dropdown and gear button */
.fleet-switcher-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.fleet-settings-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--card-border);
  color: var(--text-muted);
  padding: 10px;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-smooth);
}

.fleet-settings-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--text-main);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.05);
}

.fleet-settings-btn svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  transition: transform 0.4s ease;
}

.fleet-settings-btn:hover svg {
  transform: rotate(45deg);
}

/* Tenant Mastery Page Styling */
.tenant-mastery-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
  margin-top: 12px;
}

@media (max-width: 1023px) {
  .tenant-mastery-grid {
    grid-template-columns: 1fr;
  }
}

.member-row {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: background-color 0.2s ease;
}

.member-row:hover {
  background-color: rgba(255, 255, 255, 0.02);
}

.member-row td {
  padding: 12px 16px;
  color: var(--text-sub);
}

.member-role-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.member-role-badge.role-owner {
  background: rgba(239, 68, 68, 0.12);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.25);
}

.member-role-badge.role-admin {
  background: rgba(59, 130, 246, 0.12);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.25);
}

.member-role-badge.role-operations {
  background: rgba(16, 185, 129, 0.12);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.member-role-badge.role-pilot {
  background: rgba(245, 158, 11, 0.12);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.25);
}

/* Premium Break End Indication Box Styling */
.break-end-indication-box {
  margin-top: 16px;
  padding: 12px 18px;
  background: rgba(245, 158, 11, 0.04) !important;
  border: 1px solid rgba(245, 158, 11, 0.25) !important;
  border-radius: 14px;
  text-align: center;
  position: relative;
  z-index: 2;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25), inset 0 0 10px rgba(245, 158, 11, 0.03) !important;
  animation: glow-pulse 3s infinite ease-in-out;
}

@keyframes glow-pulse {
  0% { box-shadow: 0 0 5px rgba(245, 158, 11, 0.05); }
  50% { box-shadow: 0 0 15px rgba(245, 158, 11, 0.2); }
  100% { box-shadow: 0 0 5px rgba(245, 158, 11, 0.05); }
}

.break-end-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.break-end-time-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 4px;
}

.break-end-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.break-end-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: #fbbf24;
  text-transform: uppercase;
}

.break-end-val {
  font-size: 24px;
  font-weight: 700;
  color: #ffffff;
  font-family: 'Outfit', sans-serif;
  text-shadow: 0 0 10px rgba(245, 158, 11, 0.3);
}

/* Compact view responsive styling adjustments */
.current-position-card-compact .break-end-indication-box {
  margin-top: 10px;
  padding: 10px 16px !important;
  background: rgba(245, 158, 11, 0.05) !important;
  border: 1px solid rgba(245, 158, 11, 0.25) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
  border-radius: 12px !important;
  animation: glow-pulse 3s infinite ease-in-out;
}

.current-position-card-compact .break-end-val {
  font-size: 22px !important;
  color: #ffffff !important;
  text-shadow: 0 0 10px rgba(245, 158, 11, 0.3) !important;
}

.current-position-card-compact .break-end-title {
  color: #fbbf24 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
}

/* Green success button class */
.btn-success {
  background: linear-gradient(135deg, var(--success) 0%, #059669 100%) !important;
  box-shadow: 0 4px 15px var(--success-glow) !important;
  color: #ffffff !important;
  border: none !important;
}

.btn-success:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  box-shadow: 0 4px 20px rgba(16, 185, 129, 0.4) !important;
}

/* Break Row container side-by-side layout */
.break-row-container {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 12px;
  margin-top: 16px;
  width: 100%;
}

.break-row-container .btn-resume-work,
.break-row-container .btn-depart-now {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-radius: 12px;
  padding: 10px 18px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.break-row-container .btn-resume-work:hover,
.break-row-container .btn-depart-now:hover {
  transform: translateY(-1px) !important;
}

.break-row-container .break-end-indication-box {
  flex: 1.5;
  margin-top: 0 !important;
}

/* Compact view inside break row adjustments */
.current-position-card-compact .break-row-container {
  margin-top: 10px;
  gap: 8px;
  flex-wrap: wrap;
}

.current-position-card-compact .break-row-container .btn-resume-work,
.current-position-card-compact .break-row-container .btn-depart-now,
.current-position-card-compact .break-row-container .btn-adjust-break {
  flex: 1;
  font-size: 11px;
  padding: 8px 14px !important;
  border-radius: 10px;
}

/* Adjust break button modern styling */
.btn-adjust-break {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #fde047 !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  padding: 6px 12px !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn-adjust-break:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  color: #ffffff !important;
  box-shadow: 0 0 10px rgba(254, 224, 71, 0.15) !important;
}

@media (max-width: 768px) {
  .break-row-container {
    flex-direction: column-reverse; /* Put the button below the box on mobile */
  }
  .break-row-container .break-end-indication-box {
    width: 100%;
  }
}

/* Shift Initialization Card Styles */
.init-setup-card {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.75) 0%, rgba(30, 41, 59, 0.45) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  animation: initCardEntrance 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes initCardEntrance {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.init-card-title {
  font-family: var(--font-family);
  font-size: 18px;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.init-card-subtitle {
  font-family: var(--font-family);
  font-size: 13px;
  color: var(--text-sub);
  line-height: 1.4;
}

#init-save-btn {
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
  color: #ffffff;
  border: none;
  font-weight: 600;
  transition: var(--transition-smooth);
}

#init-save-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--primary-glow);
}

/* Shift Preferences Dynamic Feedback Styles */
.shift-feedback {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(37, 99, 235, 0.08);
  border: 1px solid rgba(37, 99, 235, 0.25);
  margin-top: 12px;
  animation: fadeIn 0.3s ease-in-out;
}

.shift-feedback.hidden {
  display: none !important;
}

.shift-feedback .feedback-icon {
  font-size: 18px;
  line-height: 1;
}

.shift-feedback .feedback-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-main);
  font-weight: 500;
}

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

/* Stop Activity Badges styling */
.stop-activity-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: 0.3px;
  display: inline-block;
  vertical-align: middle;
}
.stop-activity-badge.badge-pickup {
  background: #059669;
  color: #ffffff;
  border: 1px solid #047857;
}
.stop-activity-badge.badge-dropoff {
  background: #2563eb;
  color: #ffffff;
  border: 1px solid #1d4ed8;
}
.stop-activity-badge.badge-break {
  background: #d97706;
  color: #ffffff;
  border: 1px solid #b45309;
}
.stop-activity-badge.badge-overnight {
  background: #7c3aed;
  color: #ffffff;
  border: 1px solid #6d28d9;
}

/* Custom Desktop Trip Planner Scroll & Sticky Controls Layout */
@media (min-width: 1024px) {
  body.trip-planner-active {
    overflow: hidden;
  }

  body.trip-planner-active .main-content {
    height: 100vh;
    overflow: hidden;
  }

  body.trip-planner-active .dashboard-grid {
    height: 100vh;
    min-height: 0;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    transition: grid-template-columns 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }

  body.trip-planner-active .dashboard-grid.map-collapsed {
    grid-template-columns: 1fr 60px;
  }

  body.trip-planner-active .planner-panel.glass-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 16px 20px;
    border-radius: 0;
  }

  body.trip-planner-active .panel-header {
    flex-shrink: 0;
    margin-bottom: 12px;
  }

  body.trip-planner-active .hos-panel,
  body.trip-planner-active .init-setup-card,
  body.trip-planner-active .completed-stops-toggle-container {
    flex-shrink: 0;
  }

  body.trip-planner-active .desktop-current-widget-container {
    flex-shrink: 0;
    margin-bottom: 14px;
  }

  body.trip-planner-active .trip-timeline {
    flex: 1;
    overflow-y: auto;
    overflow-y: overlay; /* Visually hover over the container content */
    padding-right: 0;
    margin-bottom: 14px;
    gap: 16px;
    /* Custom premium scrollbar to match dark UI */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
  }

  body.trip-planner-active .trip-timeline::-webkit-scrollbar {
    width: 6px;
  }

  body.trip-planner-active .trip-timeline::-webkit-scrollbar-track {
    background: transparent;
  }

  body.trip-planner-active .trip-timeline::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 3px;
    transition: background-color 0.2s ease;
  }

  body.trip-planner-active .trip-timeline::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.25);
  }

  body.trip-planner-active .hos-summary-banner {
    flex-shrink: 0;
    margin-bottom: 16px;
  }

  body.trip-planner-active .bottom-planner-widget {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-shrink: 0;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }

  body.trip-planner-active .bottom-planner-widget:not(.engaged) .search-container {
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.02);
    border-style: solid;
  }

  body.trip-planner-active .bottom-planner-widget:not(.engaged) .hos-summary-banner {
    display: none !important;
  }

  body.trip-planner-active .bottom-planner-widget:not(.engaged) #search-label,
  body.trip-planner-active .bottom-planner-widget:not(.engaged) .action-row {
    display: none !important;
  }

  body.trip-planner-active .bottom-planner-widget:not(.engaged) .form-group {
    margin-bottom: 0 !important;
  }

  body.trip-planner-active .map-panel.glass-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: visible;
    padding: 0;
    border: none;
    border-radius: 0;
    position: relative;
    background: transparent;
  }

  body.trip-planner-active .map-wrapper {
    flex: 1;
    min-height: 0;
    border: none;
    border-radius: 0;
  }

  body.trip-planner-active .map-controls {
    flex-shrink: 0;
  }

  body.trip-planner-active .map-controls:empty {
    display: none !important;
  }

  /* Collapse trigger button */
  body.trip-planner-active .map-collapse-btn {
    position: absolute;
    left: -16px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid var(--card-border);
    color: var(--text-main);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: var(--transition-smooth);
  }

  body.trip-planner-active .map-collapse-btn:hover {
    background: var(--primary);
    border-color: var(--primary-border);
    color: #ffffff;
    box-shadow: 0 0 12px var(--primary-glow);
  }

  body.trip-planner-active .dashboard-grid.map-collapsed .map-collapse-btn {
    left: 14px;
  }

  body.trip-planner-active .dashboard-grid.map-collapsed .map-collapse-btn svg {
    transform: rotate(180deg);
  }

  /* Collapsed vertical tab */
  body.trip-planner-active .map-collapsed-tab {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background: rgba(10, 15, 30, 0.7);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    cursor: pointer;
    z-index: 5;
  }

  body.trip-planner-active .dashboard-grid.map-collapsed .map-collapsed-tab {
    opacity: 1;
    pointer-events: auto;
  }

  body.trip-planner-active .collapsed-tab-text {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    transform: rotate(180deg);
    transition: var(--transition-smooth);
  }

  body.trip-planner-active .map-collapsed-tab:hover .collapsed-tab-text {
    color: var(--accent);
  }
}

/* Hide drawer collapse components on mobile/tablet by default */
.map-collapse-btn,
.map-collapsed-tab {
  display: none;
}

/* Stop Card Click Highlight Glow Animation */
.stop-card.highlight-glow {
  animation: highlight-glow-pulse 1.5s ease-out;
}

@keyframes highlight-glow-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
    border-color: var(--card-border);
  }
  20% {
    box-shadow: 0 0 20px 5px rgba(59, 130, 246, 0.4);
    border-color: var(--primary);
    background: rgba(59, 130, 246, 0.08);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
    border-color: var(--card-border);
  }
}

/* === Route Optimization Triage Wizard Styles === */

/* Responsive Modal Container Size overrides */
#triage-wizard-modal .modal-content {
  max-width: 950px;
  width: 95%;
}

@media (max-width: 768px) {
  #triage-wizard-modal .modal-content {
    width: 98%;
    max-height: 90vh;
  }
}

/* Vertical Timeline */
.triage-timeline {
  position: relative;
  padding-left: 36px;
}

.triage-timeline::before {
  content: '';
  position: absolute;
  left: 11px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: rgba(255, 255, 255, 0.06);
  z-index: 1;
}

/* Timeline Stop Card */
.triage-stop-card {
  position: relative;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  cursor: grab;
  user-select: none;
  z-index: 2;
  transition: all 0.2s ease;
}

.triage-stop-card:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
  transform: translateX(4px);
}

.triage-stop-card:active {
  cursor: grabbing;
}

/* Draggable states */
.triage-stop-card.dragging {
  opacity: 0.4;
  border: 1.5px dashed var(--primary, #3b82f6) !important;
  background: rgba(59, 130, 246, 0.05) !important;
}

/* Timeline Node Circles */
.triage-node-circle {
  position: absolute;
  left: -32px;
  top: 18px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #1e293b;
  border: 2px solid #475569;
  z-index: 3;
  transition: all 0.2s ease;
}

.triage-stop-card:hover .triage-node-circle {
  transform: scale(1.2);
  border-color: #94a3b8;
}

/* ETA & Stop Info */
.triage-stop-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
}

.triage-stop-name {
  font-weight: 600;
  color: #fff;
  font-size: 0.95rem;
}

.triage-stop-eta {
  font-size: 0.85rem;
  color: var(--accent, #3b82f6);
  font-weight: 700;
}

.triage-stop-address {
  font-size: 0.8rem;
  color: var(--text-sub, #a0a0a0);
}

/* Risk Highlighting Styles */
.triage-stop-card.has-risk {
  border: 1.5px solid rgba(239, 68, 68, 0.4);
  background: rgba(239, 68, 68, 0.04);
}

.triage-stop-card.has-risk:hover {
  border-color: rgba(239, 68, 68, 0.8);
  box-shadow: 0 4px 15px rgba(239, 68, 68, 0.15);
}

.triage-stop-card.has-risk .triage-node-circle {
  border-color: var(--danger, #ef4444);
  background: var(--danger, #ef4444);
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
}

/* Muted / Acknowledged state */
.triage-stop-card.risk-muted {
  border-color: rgba(255, 255, 255, 0.04) !important;
  background: rgba(255, 255, 255, 0.01) !important;
  box-shadow: none !important;
}

.triage-stop-card.risk-muted .triage-node-circle {
  border-color: #475569 !important;
  background: #1e293b !important;
  box-shadow: none !important;
}

.triage-stop-card.risk-muted .triage-risk-alert {
  display: none !important;
}

/* Risk Alert Box */
.triage-info-alert {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 12px;
  background: rgba(59, 130, 246, 0.08);
  border-radius: 8px;
  border-left: 3px solid #3b82f6;
}

.triage-info-icon {
  font-size: 14px;
}

.triage-info-text {
  font-size: 0.8rem;
  color: #60a5fa;
  font-weight: 600;
}

.triage-risk-alert {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 12px;
  background: rgba(239, 68, 68, 0.08);
  border-radius: 8px;
  border-left: 3px solid var(--danger, #ef4444);
}

.triage-risk-icon {
  width: 14px;
  height: 14px;
  fill: var(--danger, #ef4444);
}

.triage-risk-text {
  font-size: 0.8rem;
  color: var(--danger, #ef4444);
  font-weight: 600;
}

.triage-override-btn {
  margin-left: auto;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: var(--danger, #ef4444);
  font-size: 0.75rem;
  padding: 3px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.2s ease;
}

.triage-override-btn:hover {
  background: var(--danger, #ef4444);
  color: #fff;
}

/* Warning Stop Card Highlights & Amber Alert Boxes for Early Arrival */
.triage-stop-card.has-warning {
  border: 1px solid var(--warning, #f59e0b) !important;
  background: rgba(245, 158, 11, 0.03) !important;
}

.triage-stop-card.warning-muted {
  border-color: #475569 !important;
  background: #1e293b !important;
  box-shadow: none !important;
}

.triage-stop-card.warning-muted .triage-warning-alert {
  display: none !important;
}

.triage-warning-alert {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 12px;
  background: rgba(245, 158, 11, 0.08);
  border-radius: 8px;
  border-left: 3px solid var(--warning, #f59e0b);
}

.triage-warning-icon {
  font-size: 14px;
}

.triage-warning-text {
  font-size: 0.8rem;
  color: var(--warning, #f59e0b);
  font-weight: 600;
  flex-grow: 1;
}

/* Specific button style overrides for warning acknowledgement */
.triage-stop-card.has-warning .triage-override-btn {
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: var(--warning, #f59e0b);
}

.triage-stop-card.has-warning .triage-override-btn:hover {
  background: var(--warning, #f59e0b);
  color: #fff;
}

/* AI Import Modal styles */
#voice-input-btn.listening-active {
  background: rgba(239, 68, 68, 0.15) !important;
  border-color: #ef4444 !important;
  color: #f87171 !important;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.3) !important;
  animation: pulse 1.5s infinite;
}

#voice-input-btn.working-active {
  background: rgba(16, 185, 129, 0.15) !important;
  border-color: var(--success) !important;
  color: #a7f3d0 !important;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.4) !important;
  animation: pulse 0.8s infinite !important;
}

.import-stop-row {
  transition: var(--transition-smooth);
}

.import-stop-row:hover {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

.matched-poi-badge {
  display: inline-block;
  align-self: flex-start;
  margin-top: 4px;
}

/* Starting arrived badge style next to header in compact mode */
.starting-arrived-badge {
  background: rgba(16, 185, 129, 0.12) !important;
  color: #047857 !important;
  border: 1px solid rgba(16, 185, 129, 0.25) !important;
  padding: 2px 8px !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  transition: all 0.2s ease !important;
  text-transform: none !important;
}

.starting-arrived-badge:hover {
  background: rgba(16, 185, 129, 0.22) !important;
  transform: scale(1.03) !important;
  color: #065f46 !important;
}

/* Leave by departure badge for Current Location card */
.leave-by-badge {
  background: rgba(245, 158, 11, 0.15) !important;
  color: #ff9f43 !important;
  border: 1px solid rgba(245, 158, 11, 0.35) !important;
  padding: 3px 10px !important;
  border-radius: 20px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.2) !important;
  animation: leave-by-badge-pulse 2s infinite ease-in-out;
  text-transform: uppercase;
  margin-left: 4px;
}

.leave-by-badge svg {
  stroke: currentColor !important;
}

@keyframes leave-by-badge-pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.2);
  }
  50% {
    transform: scale(1.03);
    box-shadow: 0 0 16px rgba(245, 158, 11, 0.35);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.2);
  }
}


/* Compact view Starting Location card adjustments */
.current-position-card-compact .current-position-actions {
  margin-top: 8px !important;
  padding-top: 8px !important;
  gap: 6px !important;
}

.current-position-card-compact .current-position-actions .btn {
  padding: 6px 12px !important;
  font-size: 11px !important;
  border-radius: 8px !important;
}

/* Responsive desktop styling for Starting Location card in compact mode */
@media (min-width: 1024px) {
  .current-position-card-compact {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
    gap: 16px !important;
  }

  .current-position-card-compact .stop-card-header {
    display: contents !important;
  }

  .current-position-card-compact .stop-title-wrapper {
    grid-column: 1 !important;
  }

  .current-position-card-compact .current-position-actions {
    grid-column: 2 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: none !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: flex-start !important;
  }

  .current-position-card-compact .current-position-actions .btn {
    flex: none !important;
    width: auto !important;
  }

  .current-position-card-compact .break-row-container {
    grid-column: 1 / 4 !important;
    margin-top: 12px !important;
    padding-top: 0 !important;
    border-top: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  .current-position-card-compact .stop-card-header-actions {
    grid-column: 3 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    justify-content: flex-end !important;
  }

  /* Force full-width elements to span across the grid columns */
  .current-position-card-compact .gps-fallback-container,
  .current-position-card-compact .hos-container,
  .current-position-card-compact .stop1-merged-panel,
  .current-position-card-compact .merged-break-subpanel {
    grid-column: 1 / 4 !important;
  }

  /* Preset options wrappers should fit cleanly */
  .current-position-card-compact .delay-departure-options,
  .current-position-card-compact .break-adjustment-options {
    margin-top: 0 !important;
  }
}

/* Grouped Search Input and Start Trip Button */
.search-input-group {
  display: flex;
  align-items: stretch;
  width: 100%;
}
.search-input-group .search-input-relative {
  position: relative;
  flex: 1;
}
.search-input-group .form-input {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-right: none !important;
}
.search-input-group .start-trip-btn {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  width: auto !important;
  white-space: nowrap;
  padding: 0 20px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  margin: 0 !important;
  flex-shrink: 0;
  box-shadow: none !important;
  background: linear-gradient(135deg, var(--primary) 0%, #2563eb 100%) !important;
  border: 1.5px solid var(--card-border) !important;
  border-left: none !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: var(--transition-smooth) !important;
}
.search-input-group .start-trip-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
  transform: none !important;
  box-shadow: none !important;
}
.search-input-group .start-trip-btn.confirming {
  background: rgba(244, 63, 94, 0.15) !important;
  border: 1.5px solid rgba(244, 63, 94, 0.6) !important;
  color: #fb7185 !important;
  box-shadow: 0 0 12px rgba(244, 63, 94, 0.3) !important;
}
.search-input-group .start-trip-btn:disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: var(--card-border) !important;
  color: var(--text-muted) !important;
}

.search-input-group .add-shipment-btn {
  border-radius: 0 !important;
  width: auto !important;
  white-space: nowrap;
  padding: 0 20px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  margin: 0 !important;
  flex-shrink: 0;
  box-shadow: none !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1.5px solid var(--card-border) !important;
  border-left: 1.5px solid var(--card-border) !important;
  border-right: 1.5px solid var(--card-border) !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-main) !important;
  transition: var(--transition-smooth) !important;
}
.search-input-group .add-shipment-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.12) !important;
  transform: none !important;
  box-shadow: none !important;
}
.search-input-group .add-shipment-btn:disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border-color: var(--card-border) !important;
  color: var(--text-muted) !important;
}

/* --- Starting Location Card Header Actions & Delay Departure Button --- */
.stop-card-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
  position: relative;
  z-index: 5;
}

.stop-card-header-actions .btn-delay-departure {
  padding: 6px 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  display: inline-flex !important;
  align-items: center !important;
  margin-top: 2px !important;
}

.stop-card-header-actions .btn-delay-departure svg {
  width: 14px !important;
  height: 14px !important;
  margin-right: 6px !important;
}

/* Compact specific styling overrides for header actions */
.current-position-card-compact .stop-card-header-actions .btn-delay-departure {
  padding: 4px 10px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  border-radius: 20px !important; /* To match toggle link shape */
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  display: inline-flex !important;
  align-items: center !important;
  margin-top: 0 !important;
}

.current-position-card-compact .stop-card-header-actions .btn-delay-departure svg {
  width: 12px !important;
  height: 12px !important;
  margin-right: 4px !important;
}

/* --- Departing at and Delay Departure button overrides inside break-row-container --- */
.break-row-container .btn-departing-at,
.break-row-container .btn-delay-departure {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  padding: 8px 14px !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  width: 100% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.break-row-container .btn-departing-at {
  color: #34d399 !important;
  border-color: rgba(52, 211, 153, 0.3) !important;
  background: rgba(52, 211, 153, 0.05) !important;
}

.break-row-container .btn-delay-departure {
  color: var(--text-main) !important;
}

.break-row-container .btn-departing-at:hover {
  background: rgba(52, 211, 153, 0.15) !important;
  border-color: #34d399 !important;
  color: #ffffff !important;
  box-shadow: 0 0 12px rgba(52, 211, 153, 0.25) !important;
}

.break-row-container .btn-delay-departure:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

.current-position-card-compact .break-row-container .btn-departing-at,
.current-position-card-compact .break-row-container .btn-delay-departure {
  padding: 6px 12px !important;
  font-size: 11px !important;
}

/* === Starting Location Card Inline Actions (Always row layout) === */
.starting-action-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 16px;
  width: 100% !important;
}

.starting-action-row .btn-departing-at,
.starting-action-row .btn-delay-departure {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  padding: 10px 18px !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  flex: 1 !important;
  width: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 42px !important;
}

.starting-action-row .btn-departing-at {
  color: #34d399 !important;
  border-color: rgba(52, 211, 153, 0.3) !important;
  background: rgba(52, 211, 153, 0.05) !important;
}

.starting-action-row .btn-delay-departure {
  color: var(--text-main) !important;
}

.starting-action-row .btn-departing-at:hover {
  background: rgba(52, 211, 153, 0.15) !important;
  border-color: #34d399 !important;
  color: #ffffff !important;
  box-shadow: 0 0 12px rgba(52, 211, 153, 0.25) !important;
}

.starting-action-row .btn-delay-departure:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

.starting-action-row .btn-recommend-departure {
  background: linear-gradient(135deg, var(--success) 0%, #059669 100%) !important;
  box-shadow: 0 4px 15px var(--success-glow) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  padding: 10px 18px !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  flex: 1.3 !important;
  width: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 42px !important;
}

.starting-action-row .btn-recommend-departure:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  box-shadow: 0 4px 20px rgba(16, 185, 129, 0.4) !important;
}

.starting-action-row .btn-more-info {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: var(--text-muted) !important;
  border-radius: 10px !important;
  width: 42px !important;
  height: 42px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
}

.starting-action-row .btn-more-info:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: var(--text-main) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

.starting-action-row .btn-more-info .stop-expand-icon {
  margin: 0 !important;
}

.current-position-card-compact .starting-action-row {
  margin-top: 10px;
}

.current-position-card-compact .starting-action-row .btn-departing-at,
.current-position-card-compact .starting-action-row .btn-delay-departure {
  padding: 6px 12px !important;
  font-size: 11px !important;
  height: 32px !important;
}

.current-position-card-compact .starting-action-row .btn-recommend-departure {
  padding: 6px 12px !important;
  font-size: 11px !important;
  height: 32px !important;
}

.current-position-card-compact .starting-action-row .btn-more-info {
  width: 32px !important;
  height: 32px !important;
}

.btn-edit-customer-icon {
  background: none;
  border: none;
  padding: 0;
  margin-left: 8px;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  transition: color 0.2s ease;
}

.btn-edit-customer-icon:hover {
  color: var(--accent) !important;
}

/* === Route Optimization Triage Wizard Comparison Dashboard === */
.triage-comparison-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
  animation: fadeIn 0.4s ease-in-out;
}

.triage-metric-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.01) 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.triage-metric-card:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
}

.triage-metric-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: transparent;
  transition: all 0.3s ease;
}

.triage-metric-card.status-success::before {
  background: linear-gradient(90deg, #10b981, #059669);
  box-shadow: 0 1px 10px rgba(16, 185, 129, 0.4);
}

.triage-metric-card.status-warning::before {
  background: linear-gradient(90deg, #f59e0b, #d97706);
  box-shadow: 0 1px 10px rgba(245, 158, 11, 0.4);
}

.triage-metric-card.status-danger::before {
  background: linear-gradient(90deg, #ef4444, #dc2626);
  box-shadow: 0 1px 10px rgba(239, 68, 68, 0.4);
}

.triage-metric-card.status-info::before {
  background: linear-gradient(90deg, #3b82f6, #6366f1);
  box-shadow: 0 1px 10px rgba(59, 130, 246, 0.4);
}

.triage-metric-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted, #94a3b8);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}

.triage-metric-value {
  font-size: 1.2rem;
  font-weight: 700;
  color: #ffffff;
  font-family: 'Outfit', sans-serif;
  line-height: 1.2;
}

.triage-metric-subtext {
  font-size: 11px;
  color: var(--text-sub, #cbd5e1);
  margin: 0;
}

/* Move badges for stops */
.triage-change-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  margin-top: 8px;
  align-self: flex-start;
}

.triage-change-badge.moved-up {
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.25);
  color: #34d399;
}

.triage-change-badge.moved-down {
  background: rgba(99, 102, 241, 0.08);
  border: 1px solid rgba(99, 102, 241, 0.25);
  color: #818cf8;
}

.triage-change-badge.no-change {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #94a3b8;
}

/* ==========================================================================
   Sidebar Drawer Collapse Styles (Desktop view scoped to min-width: 1024px)
   ========================================================================== */
@media (min-width: 1024px) {
  /* Sidebar contract */
  body.menu-collapsed .side-menu {
    width: 72px;
  }
  
  /* Main content expand */
  body.menu-collapsed .main-content {
    margin-left: 72px;
  }

  /* Header adjustments */
  body.menu-collapsed .side-menu-header {
    padding: 16px 0;
    flex-direction: column;
    gap: 16px;
    justify-content: center;
  }

  body.menu-collapsed .side-menu-logo-text .full-logo-text {
    display: none;
  }

  body.menu-collapsed .side-menu-logo-text .mini-logo-text {
    display: inline-block !important;
  }
  
  /* Rotate collapse button chevron */
  body.menu-collapsed .sidebar-collapse-btn svg {
    transform: rotate(180deg);
  }
  
  /* Hide navigation labels */
  body.menu-collapsed .nav-text {
    display: none;
  }
  
  /* Center menu items and remove horizontal padding/gap */
  body.menu-collapsed .nav-item {
    justify-content: center;
    padding: 14px 0;
    gap: 0;
  }
  
  body.menu-collapsed .nav-sub-item {
    margin-left: 0 !important;
  }

  /* Dividers and sub-containers spacing */
  body.menu-collapsed .side-menu-divider {
    margin: 8px 12px;
  }

  body.menu-collapsed .sidebar-locations-container,
  body.menu-collapsed .sidebar-drivers-container {
    margin-top: 6px !important;
  }
  
  /* Footer elements simplification */
  body.menu-collapsed .user-badge {
    padding: 8px;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
  }

  body.menu-collapsed .user-badge .user-info,
  body.menu-collapsed .user-badge .user-badge-gps-container,
  body.menu-collapsed .user-badge .fleet-switcher-container {
    display: none !important;
  }

  /* Logout button transformed to icon */
  body.menu-collapsed .user-badge .logout-link.btn {
    font-size: 0;
    padding: 10px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin: 0 auto;
  }

  body.menu-collapsed .user-badge .logout-link.btn::after {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f43f5e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'%3E%3C/path%3E%3Cpolyline points='16 17 21 12 16 7'%3E%3C/polyline%3E%3Cline x1='21' y1='12' x2='9' y2='12'%3E%3C/line%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
  }

  /* Unauthenticated Sign In button transformed to icon */
  body.menu-collapsed .side-menu-footer button.btn-secondary {
    font-size: 0;
    padding: 10px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin: 0 auto;
  }

  body.menu-collapsed .side-menu-footer button.btn-secondary svg {
    margin-right: 0 !important;
    width: 16px;
    height: 16px;
  }
}

/* ==========================================================================
   Mobile Responsiveness and Layout Fixes
   ========================================================================== */

/* 1. Stop Expectations Summary wrapping */
.stop-expectations-summary {
  flex-wrap: wrap !important;
}

/* 2. Compact View Cards wrapping on Mobile */
@media (max-width: 640px) {
  .transit-card-compact .transit-card-content {
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    gap: 8px 12px !important;
  }
  
  .transit-card-compact .transit-center-col {
    width: 100% !important;
    flex: none !important;
    order: -1 !important; /* Move Drive duration info to top */
  }
  
  .transit-card-compact .transit-time-start {
    order: 1 !important;
  }
  
  .transit-card-compact .transit-time-end {
    order: 2 !important;
  }

  .break-card-compact .break-card-content {
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    gap: 8px 12px !important;
  }
  
  .break-card-compact .break-center-col {
    width: 100% !important;
    flex: none !important;
    order: -1 !important; /* Move Rest Break duration info to top */
  }
  
  .break-card-compact .break-time-start {
    order: 1 !important;
  }
  
  .break-card-compact .break-time-end {
    order: 2 !important;
  }
  
  /* 3. Stop Card Header wrapping on narrow screens */
  .stop-card-header {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  
  .stop-card-header-actions {
    width: 100% !important;
    justify-content: flex-start !important;
    margin-top: 4px !important;
  }
}

/* 4. Action buttons layout on mobile (hide text, show circular icons when on navbar) */
.mobile-header .panel-header-actions #import-btn-text,
.mobile-header .panel-header-actions #clear-btn-text,
.mobile-header .panel-header-actions #optimize-btn-text {
  display: none !important;
}

.mobile-header .panel-header-actions #import-btn,
.mobile-header .panel-header-actions #clear-btn,
.mobile-header .panel-header-actions #optimize-btn {
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  justify-content: center !important;
  border-radius: 50% !important; /* Circle style matching navigation buttons */
  gap: 0 !important;
}

.mobile-header .panel-header-actions #import-btn svg,
.mobile-header .panel-header-actions #clear-btn svg,
.mobile-header .panel-header-actions #optimize-btn svg {
  margin: 0 !important; /* Center the SVG within the circle button */
}

@media (max-width: 768px) {
  .mobile-current-widget-trigger .trigger-btn-label {
    display: none !important;
  }

  .mobile-current-widget-trigger {
    padding: 0 !important;
    gap: 0 !important;
    width: 36px !important;
    height: 36px !important;
    justify-content: center !important;
    border-radius: 50% !important;
  }
}

/* View toggle container compact styles on navbar */
.mobile-header .panel-header-actions .view-toggle-container {
  border-radius: 18px !important;
}
.mobile-header .panel-header-actions .view-toggle-slider {
  width: 32px !important;
}
.mobile-header .panel-header-actions .view-toggle-container.compact-active .view-toggle-slider {
  transform: translateX(34px) !important;
}
.mobile-header .panel-header-actions .view-toggle-container.driver-active .view-toggle-slider {
  transform: translateX(68px) !important;
}
.mobile-header .panel-header-actions .view-toggle-btn {
  width: 32px !important;
  height: 28px !important;
}
.mobile-header .panel-header-actions .view-toggle-btn .view-icon {
  display: inline-block !important;
}
.mobile-header .panel-header-actions .view-toggle-btn .view-btn-text {
  display: none !important;
}

/* 5. Mobile Navbar Actions Drawer / Dropdown */
.panel-header-btn .btn-label-text {
  display: none;
}

.mobile-actions-wrapper {
  position: relative;
  display: inline-block;
  margin-left: 8px;
}

.mobile-actions-toggle-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-main);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-smooth);
}

.mobile-actions-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

.mobile-actions-toggle-btn svg {
  width: 18px;
  height: 18px;
}

.mobile-actions-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  background: rgba(10, 15, 30, 0.95);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  padding: 16px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1000;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  min-width: 210px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mobile-actions-wrapper.active .mobile-actions-dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* Stylings when actions are rendered inside the mobile actions dropdown */
.mobile-actions-dropdown #import-btn-text,
.mobile-actions-dropdown #clear-btn-text,
.mobile-actions-dropdown #optimize-btn-text,
.mobile-actions-dropdown .panel-header-btn .btn-label-text {
  display: inline !important;
}

.mobile-actions-dropdown #import-btn,
.mobile-actions-dropdown #clear-btn,
.mobile-actions-dropdown #optimize-btn,
.mobile-actions-dropdown .panel-header-btn {
  width: 100% !important;
  height: 42px !important;
  border-radius: 12px !important;
  padding: 10px 16px !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid var(--card-border) !important;
  box-shadow: none !important;
}

.mobile-actions-dropdown #import-btn svg,
.mobile-actions-dropdown #clear-btn svg,
.mobile-actions-dropdown #optimize-btn svg,
.mobile-actions-dropdown .panel-header-btn svg {
  margin: 0 !important;
}

/* View toggle container overrides inside dropdown */
.mobile-actions-dropdown .view-toggle-container {
  width: auto !important;
  border-radius: 20px !important;
  padding: 3px !important;
  height: 36px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid var(--card-border) !important;
  display: flex !important;
  justify-content: center !important;
}
.mobile-actions-dropdown .view-toggle-slider {
  width: 36px !important;
}
.mobile-actions-dropdown .view-toggle-container.compact-active .view-toggle-slider {
  transform: translateX(38px) !important;
}
.mobile-actions-dropdown .view-toggle-container.driver-active .view-toggle-slider {
  transform: translateX(76px) !important;
}
.mobile-actions-dropdown .view-toggle-btn {
  width: 36px !important;
  height: 28px !important;
}
.mobile-actions-dropdown .view-toggle-btn .view-icon {
  display: block !important;
}
.mobile-actions-dropdown .view-toggle-btn .view-btn-text {
  display: none !important;
}

/* Optimize Loading Video Modal styling */
#optimize-loading-modal {
  background: #000000;
  padding: 0;
  z-index: 10000;
}
#optimize-loading-modal .optimize-video-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
#optimize-loading-modal video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Schedule Planner Custom Styles */
#view-planner .premium-table .form-input {
  padding: 6px 10px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  height: 32px !important;
  width: auto;
  min-width: 80px;
}

#view-planner .premium-table select.fleet-select-dropdown {
  padding: 6px 10px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  height: 32px !important;
  width: auto;
  min-width: 100px;
}

#view-planner .premium-table td {
  padding: 8px 12px !important;
  vertical-align: middle !important;
}

@media (max-width: 767px) {
  #view-planner .premium-table,
  #view-planner .premium-table thead,
  #view-planner .premium-table tbody,
  #view-planner .premium-table th,
  #view-planner .premium-table td,
  #view-planner .premium-table tr,
  #view-saved-locations .premium-table,
  #view-saved-locations .premium-table thead,
  #view-saved-locations .premium-table tbody,
  #view-saved-locations .premium-table th,
  #view-saved-locations .premium-table td,
  #view-saved-locations .premium-table tr,
  #mastering-staging-area .premium-table,
  #mastering-staging-area .premium-table thead,
  #mastering-staging-area .premium-table tbody,
  #mastering-staging-area .premium-table th,
  #mastering-staging-area .premium-table td,
  #mastering-staging-area .premium-table tr {
    display: block !important;
  }
  
  #view-planner .premium-table thead,
  #view-saved-locations .premium-table thead,
  #mastering-staging-area .premium-table thead {
    display: none !important;
  }
  
  #view-planner .premium-table tr,
  #view-saved-locations .premium-table tr,
  #mastering-staging-area .premium-table tr {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1.5px solid var(--card-border) !important;
    border-radius: 12px !important;
    margin-bottom: 16px !important;
    padding: 16px !important;
  }
  
  #view-planner .premium-table td,
  #view-saved-locations .premium-table td,
  #mastering-staging-area .premium-table td {
    border-bottom: none !important;
    padding: 8px 0 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  
  #view-planner .premium-table td::before,
  #view-saved-locations .premium-table td::before,
  #mastering-staging-area .premium-table td::before {
    content: attr(data-label) !important;
    font-weight: 600 !important;
    color: var(--text-muted) !important;
    font-size: 13px !important;
    margin-right: 16px !important;
  }
  
  #view-planner .premium-table .form-input,
  #view-planner .premium-table select.fleet-select-dropdown,
  #view-saved-locations .premium-table .form-input,
  #view-saved-locations .premium-table select.fleet-select-dropdown,
  #mastering-staging-area .premium-table .form-input,
  #mastering-staging-area .premium-table select.fleet-select-dropdown,
  #mastering-staging-area .premium-table .staging-table-input {
    width: 100% !important;
    max-width: 200px !important;
    text-align: right !important;
  }
}

/* Customer Mastering Importer CSS Styles */
.mastering-paste-zone:hover,
.mastering-paste-zone:focus {
  border-color: var(--primary) !important;
  background: rgba(59, 130, 246, 0.03) !important;
  box-shadow: 0 0 15px rgba(59, 130, 246, 0.15) !important;
}

.staging-table-input {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-main);
  width: 100%;
  padding: 6px 8px;
  font-family: inherit;
  font-size: 13px;
  border-radius: 6px;
  transition: all 0.2s;
}

.staging-table-input:hover {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.1);
}

.staging-table-input:focus {
  background: #0f172a;
  border-color: var(--primary);
  outline: none;
  box-shadow: 0 0 8px var(--primary-glow);
}

.status-badge {
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  display: inline-block;
}

.status-badge.ready {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #34d399;
}

.status-badge.loading {
  background: rgba(59, 130, 246, 0.15);
  border: 1px solid rgba(59, 130, 246, 0.3);
  color: #60a5fa;
}

.status-badge.failed {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #f87171;
}

#mastering-staging-area table tbody tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  transition: background-color 0.2s;
}

#mastering-staging-area table tbody tr:hover {
  background: rgba(255, 255, 255, 0.01);
}

/* Tighter spacing in compact view mode */
.view-compact .stop-card-sticky-header {
  padding: 10px 24px 4px 48px;
}

.view-compact .stop-card-body {
  padding: 0 24px 10px 48px;
}

/* Tighten pulled-up Activity & Requirement sections in compact mode */
.view-compact .stop-card:not(.expanded) .stop-details-wrapper .duration-control {
  margin-top: 6px !important;
  padding-top: 0 !important;
  border-top: none !important;
  gap: 0 !important;
}

.view-compact .stop-card:not(.expanded) .stop-details-wrapper .stop-expectations-summary {
  margin-top: 6px !important;
  padding: 4px 8px !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 6px !important;
  font-size: 11px !important;
}

/* Compact view mode mobile responsiveness */
@media (max-width: 768px) {
  .view-compact .stop-card-sticky-header {
    padding: 8px 16px 4px 40px;
  }
  .view-compact .stop-card-body {
    padding: 0 16px 8px 40px;
  }
}

/* Edit Location Modal Map Layout */
#edit-location-modal .modal-content {
  max-width: 960px !important;
}

@media (max-width: 768px) {
  #edit-location-modal .modal-content {
    flex-direction: column !important;
    max-height: 95vh;
    overflow-y: auto;
    width: calc(100% - 40px) !important;
  }
  #edit-location-map-container {
    min-height: 250px !important;
    height: 250px;
    margin-top: 12px;
  }
}

/* Stop actions vertical layout wrapper & Save button */
.stop-actions-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.stop-card-save-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(5, 150, 105, 0.25) 100%);
  border: 1.5px solid rgba(16, 185, 129, 0.4);
  color: var(--success);
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25), 0 0 8px rgba(16, 185, 129, 0.15);
  transition: var(--transition-smooth);
  width: fit-content;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 4px;
}

.stop-card-save-btn:hover {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.25) 0%, rgba(5, 150, 105, 0.35) 100%);
  border-color: rgba(16, 185, 129, 0.7);
  color: #ffffff;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35), 0 0 12px rgba(16, 185, 129, 0.35);
  transform: translateY(-1px);
}

.stop-card-save-btn:active {
  transform: translateY(0);
}

.stop-card-save-btn svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.2;
}

/* Schedule Planner Custom UI Upgrades */
.planner-remove-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.planner-remove-btn:hover {
  color: #f87171 !important;
  background: rgba(239, 68, 68, 0.12);
}

.planner-remove-btn.confirming {
  color: #ef4444 !important;
  background: rgba(239, 68, 68, 0.18) !important;
  box-shadow: 0 0 6px rgba(239, 68, 68, 0.3);
}

.planner-remove-btn.confirming:hover {
  background: rgba(239, 68, 68, 0.28) !important;
}

.drag-handle {
  cursor: grab;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;
  padding: 4px;
}

.drag-handle:hover {
  color: var(--primary) !important;
}

.drag-handle:active {
  cursor: grabbing;
}

.premium-table-row.dragging {
  opacity: 0.45;
  background: rgba(59, 130, 246, 0.08) !important;
  border: 1.5px dashed rgba(59, 130, 246, 0.4) !important;
}

.planner-duplicate-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.planner-duplicate-btn:hover {
  color: var(--primary) !important;
  background: rgba(59, 130, 246, 0.12);
}

/* Progressive Responsiveness for Desktop Trip Planner Header Actions */
@media (min-width: 1024px) and (max-width: 1620px) {
  /* Make view toggle compact (icons only) when map is NOT collapsed */
  .dashboard-grid:not(.map-collapsed) .panel-header-actions .view-toggle-container {
    border-radius: 18px !important;
  }
  .dashboard-grid:not(.map-collapsed) .panel-header-actions .view-toggle-slider {
    width: 32px !important;
  }
  .dashboard-grid:not(.map-collapsed) .panel-header-actions .view-toggle-container.compact-active .view-toggle-slider {
    transform: translateX(34px) !important;
  }
  .dashboard-grid:not(.map-collapsed) .panel-header-actions .view-toggle-container.driver-active .view-toggle-slider {
    transform: translateX(68px) !important;
  }
  .dashboard-grid:not(.map-collapsed) .panel-header-actions .view-toggle-btn {
    width: 32px !important;
    height: 28px !important;
  }
  .dashboard-grid:not(.map-collapsed) .panel-header-actions .view-toggle-btn .view-icon {
    display: inline-block !important;
  }
  .dashboard-grid:not(.map-collapsed) .panel-header-actions .view-toggle-btn .view-btn-text {
    display: none !important;
  }

  /* Hide text labels on import, clear, optimize buttons to make them compact circles when map is NOT collapsed */
  .dashboard-grid:not(.map-collapsed) .panel-header-actions #import-btn-text,
  .dashboard-grid:not(.map-collapsed) .panel-header-actions #clear-btn-text,
  .dashboard-grid:not(.map-collapsed) .panel-header-actions #optimize-btn-text {
    display: none !important;
  }

  .dashboard-grid:not(.map-collapsed) .panel-header-actions #import-btn,
  .dashboard-grid:not(.map-collapsed) .panel-header-actions #clear-btn,
  .dashboard-grid:not(.map-collapsed) .panel-header-actions #optimize-btn {
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    justify-content: center !important;
    border-radius: 50% !important;
    gap: 0 !important;
  }

  .dashboard-grid:not(.map-collapsed) .panel-header-actions #import-btn svg,
  .dashboard-grid:not(.map-collapsed) .panel-header-actions #clear-btn svg,
  .dashboard-grid:not(.map-collapsed) .panel-header-actions #optimize-btn svg {
    margin: 0 !important;
  }
}

@media (max-width: 1366px) {
  .planner-panel.glass-card {
    padding: 20px !important;
  }
  .panel-header {
    margin-bottom: 20px !important;
  }
}

/* Column Mapping Section */
.mapping-area {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.mapping-controls-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  gap: 12px;
  flex-wrap: wrap;
}

.mapping-cols-scroll {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 8px 8px 16px 8px;
  margin-bottom: 16px;
  scrollbar-width: thin;
}

.mapping-col-card {
  flex: 0 0 240px;
  background: rgba(15, 23, 42, 0.45);
  border: 1.5px solid var(--card-border);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: var(--transition-smooth);
}

.mapping-col-card.selected-for-merge {
  border-color: var(--primary);
  background: rgba(59, 130, 246, 0.08);
  box-shadow: 0 0 15px rgba(59, 130, 246, 0.15);
}

.mapping-col-card.mapped {
  border-color: var(--success);
  background: rgba(16, 185, 129, 0.04);
}

.mapping-col-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mapping-checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
}

.mapping-checkbox-label input {
  cursor: pointer;
  accent-color: var(--primary);
}

.mapping-col-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
  word-break: break-word;
  line-height: 1.3;
}

.mapping-sample-container {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mapping-sample-title {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.mapping-sample-val {
  font-size: 11px;
  color: var(--text-sub);
  background: rgba(0, 0, 0, 0.2);
  padding: 6px 8px;
  border-radius: 6px;
  word-break: break-word;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid rgba(255, 255, 255, 0.02);
}

/* Shipment visual connector line and locked badges */
.shipment-lock-badge {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #34d399 !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
}
.shipment-connector-cell {
  position: relative;
  width: 20px;
}
.shipment-connector-line {
  position: absolute;
  left: calc(50% - 1px);
  width: 2px;
  background: linear-gradient(to bottom, #10b981, #059669);
  z-index: 5;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.4);
}
.shipment-connector-line.start {
  top: 50%;
  bottom: -8px;
}
.shipment-connector-line.middle {
  top: -8px;
  bottom: -8px;
}
.shipment-connector-line.end {
  top: -8px;
  bottom: 50%;
}
/* Live trip stop card connectors */
.stop-card-shipment-wrapper {
  position: relative;
}
.stop-card-shipment-connector {
  position: absolute;
  left: 27px; /* Matches stop-card-dot placement center */
  width: 3px;
  background: linear-gradient(to bottom, #10b981, #059669);
  z-index: 10;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.4);
}
.stop-card-shipment-connector.start {
  top: 52px;
  bottom: -32px;
}
.stop-card-shipment-connector.middle {
  top: -32px;
  bottom: -32px;
}
.stop-card-shipment-connector.end {
  top: -32px;
  bottom: calc(100% - 28px);
}

/* ==========================================================================
   Driver Mode (view-driver) Styles
   ========================================================================== */

/* Prevent full-width stretch and center the button in collapsed standard Current Location card on desktop */
@media (min-width: 1024px) {
  .view-driver .current-position-card:not(.expanded) .stop-card-arrival-action-row {
    justify-content: center !important;
    margin-top: 12px !important;
  }

  .view-driver .current-position-card:not(.expanded) .stop-card-arrival-action-row .btn {
    flex: none !important;
    width: auto !important;
    min-width: 160px !important;
  }
}

/* Main layout view-driver timeline spacing */
.trip-timeline.view-driver {
  gap: 8px !important;
  margin-bottom: 8px !important;
}

.view-driver .stop-card {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Driver transit/drive card */
.transit-card-driver {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.9) 0%, rgba(15, 23, 42, 0.95) 100%) !important;
  border: 1px solid rgba(59, 130, 246, 0.25) !important;
  color: var(--text-main) !important;
  min-height: 52px !important;
  padding: 6px 16px !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
}

.transit-card-driver .transit-card-dot {
  display: flex !important;
  background: var(--primary-glow) !important;
  border-color: var(--primary) !important;
  color: var(--accent) !important;
  width: 14px !important;
  height: 14px !important;
  left: 16px !important;
  box-shadow: 0 0 10px var(--primary-glow) !important;
}

.transit-card-driver .transit-card-content {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  gap: 16px !important;
  padding-left: 48px !important;
  padding-right: 48px !important;
  box-sizing: border-box !important;
}

/* DRIVE: TIME section - larger for visibility */
.transit-card-driver .driver-drive-time-container {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
}

.transit-card-driver .driver-drive-time-label {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: var(--accent) !important;
  letter-spacing: 0.5px;
  text-shadow: 0 0 12px rgba(59, 130, 246, 0.4);
  font-family: 'Outfit', sans-serif;
  text-transform: uppercase;
  text-align: center !important;
}

.transit-card-driver .driver-drive-time-label.split {
  font-size: 16px !important;
}

.transit-card-driver .driver-drive-details {
  font-size: 11px !important;
  color: var(--text-muted) !important;
  margin-top: 2px;
  text-align: center !important;
}

/* Flex row layout when progress bar is present */
.transit-card-driver .driver-drive-time-container.has-progress {
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  gap: 8px 24px !important;
  flex-wrap: wrap !important;
}

.transit-card-driver .driver-drive-text-group {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
  flex-shrink: 0 !important;
}

.transit-card-driver .driver-drive-text-group .driver-drive-time-label,
.transit-card-driver .driver-drive-text-group .driver-drive-details {
  text-align: left !important;
}

.transit-card-driver .driver-drive-time-container.has-progress .drive-progress-container {
  flex: 1 1 300px !important;
  max-width: 600px !important;
  margin-top: 0 !important;
  margin-left: auto !important;
}

/* Driver wait leeway card styling matching drive card */
.break-card-driver {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.9) 0%, rgba(15, 23, 42, 0.95) 100%) !important;
  border: 1px solid rgba(245, 158, 11, 0.25) !important;
  color: var(--text-main) !important;
  min-height: 52px !important;
  padding: 6px 16px !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  position: relative !important;
}

.break-card-driver .break-card-dot {
  display: flex !important;
  background: var(--warning-glow) !important;
  border-color: var(--warning) !important;
  color: var(--warning) !important;
  width: 14px !important;
  height: 14px !important;
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  left: 16px !important;
  box-shadow: 0 0 10px var(--warning-glow) !important;
  z-index: 3 !important;
}

.break-card-driver .break-card-content {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  gap: 16px !important;
  padding-left: 48px !important;
  padding-right: 48px !important;
  box-sizing: border-box !important;
}

.break-card-driver .driver-wait-container {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  width: 100% !important;
}

.break-card-driver .driver-wait-title {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: var(--warning) !important;
  letter-spacing: 0.5px !important;
  text-shadow: 0 0 12px rgba(245, 158, 11, 0.4) !important;
  font-family: 'Outfit', sans-serif !important;
  text-transform: uppercase !important;
  text-align: center !important;
}

.break-card-driver .driver-wait-details {
  font-size: 11px !important;
  color: var(--text-muted) !important;
  margin-top: 2px !important;
  text-align: center !important;
}

/* Modifier buttons container */
.transit-card-driver .transit-modifier-container {
  position: absolute !important;
  right: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  gap: 6px !important;
  align-items: center !important;
  margin: 0 !important;
  z-index: 5 !important;
  opacity: 0 !important;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  pointer-events: none !important;
}

.transit-card-driver:hover .transit-modifier-container {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.transit-card-driver.modifier-faster .transit-modifier-container,
.transit-card-driver.modifier-slower .transit-modifier-container {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.transit-card-driver .transit-modifier-btn {
  padding: 6px 12px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  height: 32px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: var(--text-muted) !important;
  transition: all 0.2s ease !important;
}

.transit-card-driver .transit-modifier-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--text-main) !important;
}

.transit-card-driver .transit-modifier-btn.active.btn-faster {
  background: rgba(16, 185, 129, 0.15) !important;
  border-color: rgba(16, 185, 129, 0.4) !important;
  color: #34d399 !important;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.2) !important;
}

.transit-card-driver .transit-modifier-btn.active.btn-normal {
  background: rgba(59, 130, 246, 0.15) !important;
  border-color: rgba(59, 130, 246, 0.4) !important;
  color: #60a5fa !important;
  box-shadow: 0 0 8px rgba(59, 130, 246, 0.2) !important;
}

.transit-card-driver .transit-modifier-btn.active.btn-slower {
  background: rgba(239, 68, 68, 0.15) !important;
  border-color: rgba(239, 68, 68, 0.4) !important;
  color: #f87171 !important;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.2) !important;
}

/* Collapsed Driver Stop Card styling */
.view-driver .stop-card:not(.expanded) {
  background: linear-gradient(135deg, rgba(20, 28, 48, 0.8) 0%, rgba(10, 16, 32, 0.9) 100%) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 16px !important;
  padding: 8px 16px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
  cursor: pointer;
}

.view-driver .stop-card:not(.expanded):hover {
  border-color: rgba(59, 130, 246, 0.25) !important;
  background: linear-gradient(135deg, rgba(25, 35, 60, 0.85) 0%, rgba(15, 22, 42, 0.95) 100%) !important;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3) !important;
}

.view-driver .stop-card:not(.expanded) .stop-card-sticky-header {
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  border: none !important;
  margin: 0 !important;
}

.view-driver .stop-card:not(.expanded) .stop-card-dot {
  position: static !important;
  transform: none !important;
  flex-shrink: 0;
  margin-right: 12px;
}

.view-driver .stop-card:not(.expanded) .stop-nav-btn {
  display: none !important;
}

.view-driver .stop-card:not(.expanded) .stop-card-header {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex: 1 !important;
  width: 100% !important;
}

.view-driver .stop-card:not(.expanded) .stop-title-wrapper {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px 16px !important;
  flex: 1 !important;
}

.view-driver .stop-card:not(.expanded) .stop-name {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--text-main) !important;
}

.view-driver .stop-card:not(.expanded) .stop-name-link {
  color: var(--text-main) !important;
  pointer-events: none; /* In driver mode collapsed, click expands card instead of trigger details modal */
  text-decoration: none !important;
}

.view-driver .stop-card:not(.expanded) .stop-address,
.view-driver .stop-card:not(.expanded) .stop-activity-badge,
.view-driver .stop-card:not(.expanded) .stop-status-badge,
.view-driver .stop-card:not(.expanded) .stop-expand-icon,
.view-driver .stop-card:not(.expanded) .stop-expectations-summary,
.view-driver .stop-card:not(.expanded) .stop-card-actuals-row,
.view-driver .stop-card:not(.expanded) .stop-card-body {
  display: none !important;
}

/* Highly visible stop ETA badge */
.view-driver .stop-card:not(.expanded) .stop-eta-badge {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--accent) !important;
  background: rgba(59, 130, 246, 0.12) !important;
  border: 1px solid rgba(59, 130, 246, 0.25) !important;
  padding: 4px 8px !important;
  border-radius: 8px !important;
  margin: 0 !important;
}

/* Prominent Arrived / Arrive Now button inside collapsed card */
.view-driver .stop-card:not(.expanded) .stop-card-arrival-action-row {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
}

.view-driver .stop-card:not(.expanded) .stop-card-arrival-action-row .btn {
  height: 34px !important;
  padding: 6px 14px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2) !important;
}

.view-driver .stop-card:not(.expanded) .stop-actions-wrapper {
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
}

.view-driver .stop-card:not(.expanded) .stop-actions {
  display: none !important; /* Hide up/down/delete when collapsed */
}

/* Touch friendly collapsed arrived indicators */
.view-driver .stop-card:not(.expanded).arrived {
  border-color: rgba(16, 185, 129, 0.3) !important;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(10, 16, 32, 0.95) 100%) !important;
}

.view-driver .stop-card:not(.expanded).arrived::after {
  content: '✓ ARRIVED';
  font-size: 11px;
  font-weight: 800;
  color: #34d399;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.3);
  padding: 3px 8px;
  border-radius: 6px;
  margin-left: auto;
}

/* Expanded state in driver mode retains normal style but gets larger text and target paddings */
.view-driver .stop-card.expanded {
  border-color: var(--primary) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4) !important;
}

/* Starting Location Widget Styling */
.starting-widget-container {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  width: 100%;
}

.starting-poi-input {
  flex: 1;
  background: var(--starting-input-bg) !important;
  border: 1px solid var(--starting-input-border) !important;
  border-radius: 10px !important;
  padding: 8px 14px !important;
  font-size: 13px !important;
  font-family: var(--font-family) !important;
  color: var(--starting-input-color) !important;
  outline: none !important;
  transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s !important;
}

.starting-poi-input:focus {
  border-color: var(--primary) !important;
  background: var(--starting-input-focus-bg) !important;
  box-shadow: 0 0 10px var(--primary-glow) !important;
}

.btn-starting-gps {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: none;
  background: var(--starting-gps-bg) !important;
  color: var(--starting-gps-color) !important;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.2s;
  flex-shrink: 0;
}

.btn-starting-gps:hover {
  background: var(--starting-gps-hover-bg) !important;
  transform: scale(1.05);
}

.btn-starting-gps svg {
  width: 18px;
  height: 18px;
  display: block;
}

/* ==========================================================================
   Light Mode Themes and Component Overrides
   ========================================================================== */
:root.light-mode {
  --bg-color: #f1f5f9; /* Slate 100 */
  --card-bg: rgba(255, 255, 255, 0.72);
  --card-border: rgba(15, 23, 42, 0.08);
  --card-border-active: rgba(59, 130, 246, 0.4);
  --primary: #2563eb;
  --primary-glow: rgba(37, 99, 235, 0.12);
  --accent: #1d4ed8;
  --success: #059669;
  --success-glow: rgba(5, 150, 105, 0.12);
  --danger: #dc2626;
  --warning: #d97706;
  --warning-glow: rgba(217, 119, 6, 0.12);
  --text-main: #0f172a; /* Slate 900 */
  --text-sub: #334155; /* Slate 700 */
  --text-muted: #64748b; /* Slate 500 */

  /* Starting Widget styling tokens - Light mode overrides */
  --starting-input-bg: #ffffff;
  --starting-input-border: rgba(15, 23, 42, 0.25);
  --starting-input-color: var(--text-main);
  --starting-input-focus-bg: #ffffff;
  --starting-gps-bg: rgba(15, 23, 42, 0.05);
  --starting-gps-color: var(--primary);
  --starting-gps-hover-bg: rgba(15, 23, 42, 0.1);

  /* Autocomplete suggestion dropdowns styling tokens - Light mode overrides */
  --autocomplete-bg: #ffffff;
  --autocomplete-border: rgba(0, 0, 0, 0.15);
  --autocomplete-row-border: rgba(0, 0, 0, 0.06);
  --autocomplete-row-hover: rgba(0, 0, 0, 0.04);
  --autocomplete-row-highlight: rgba(0, 0, 0, 0.08);
  --autocomplete-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  --autocomplete-icon-filter: none;
}

/* Light mode specific component overrides */
.light-mode ::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.15);
}
.light-mode ::-webkit-scrollbar-thumb:hover {
  background: rgba(15, 23, 42, 0.28);
}
.light-mode {
  scrollbar-color: rgba(15, 23, 42, 0.15) transparent;
}

.light-mode .bg-blobs .blob {
  opacity: 0.06;
}

.light-mode .side-menu {
  background: rgba(255, 255, 255, 0.88);
  border-right: 1px solid rgba(15, 23, 42, 0.08);
}
.light-mode .side-menu-header {
  border-bottom: 1px solid rgba(15, 23, 42, 0.05);
}
.light-mode .side-menu-logo-text {
  background: linear-gradient(
    120deg,
    #0f172a 20%,
    var(--primary) 40%,
    #0f172a 45%,
    var(--primary) 50%,
    var(--accent) 70%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 0 30px rgba(37, 99, 235, 0.1);
}
.light-mode .sidebar-collapse-btn {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.08);
  color: var(--text-muted);
}
.light-mode .sidebar-collapse-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--text-main);
  border-color: rgba(0, 0, 0, 0.15);
}
.light-mode .nav-item:hover {
  background: rgba(0, 0, 0, 0.02);
  color: var(--text-main);
}
.light-mode .nav-item.active {
  background: rgba(37, 99, 235, 0.08);
  color: var(--primary);
  border-left-color: var(--primary);
}
.light-mode .side-menu-footer {
  background: rgba(0, 0, 0, 0.02);
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.light-mode .user-badge {
  background: rgba(0, 0, 0, 0.01);
  border-color: rgba(0, 0, 0, 0.06);
}
.light-mode .logout-link {
  background: rgba(225, 29, 72, 0.06);
  border: 1px solid rgba(225, 29, 72, 0.12);
  color: #be123c;
}
.light-mode .logout-link:hover {
  background: rgba(225, 29, 72, 0.12);
}
.light-mode .gps-toggle-card {
  background: rgba(255, 255, 255, 0.5);
  border-color: rgba(0, 0, 0, 0.06);
}
.light-mode .gps-toggle-card:hover {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(0, 0, 0, 0.12);
}

.light-mode .mobile-header {
  background: rgba(255, 255, 255, 0.82);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.light-mode .btn-secondary,
.light-mode #clear-btn,
.light-mode #optimize-btn,
.light-mode #import-btn {
  background: rgba(255, 255, 255, 0.6) !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
  color: var(--text-main) !important;
}
.light-mode .btn-secondary:hover,
.light-mode #clear-btn:hover,
.light-mode #optimize-btn:hover,
.light-mode #import-btn:hover {
  background: rgba(0, 0, 0, 0.03) !important;
  border-color: rgba(0, 0, 0, 0.22) !important;
}

.light-mode .form-input {
  background: #ffffff !important;
  color: var(--text-main) !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
}
.light-mode .form-input:focus {
  background: #ffffff !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 10px rgba(37, 99, 235, 0.15) !important;
}
.light-mode .input-icon {
  stroke: var(--text-muted) !important;
}
.light-mode .form-input:focus + .input-icon {
  stroke: var(--primary) !important;
}

.light-mode .fleet-select-dropdown {
  background: rgba(255, 255, 255, 0.9) !important;
  color: var(--text-main) !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
}
.light-mode .fleet-select-dropdownoption,
.light-mode .fleet-select-dropdown option {
  background-color: #ffffff !important;
  color: var(--text-main) !important;
}

.light-mode .panel-header-btn {
  background: rgba(0, 0, 0, 0.03) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  color: var(--text-muted) !important;
}
.light-mode .panel-header-btn:hover {
  color: var(--text-main) !important;
  background: rgba(0, 0, 0, 0.08) !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
}
.light-mode .panel-header-btn.active {
  background: rgba(37, 99, 235, 0.08) !important;
  color: var(--primary) !important;
  border-color: rgba(37, 99, 235, 0.2) !important;
}

.light-mode .stop-card {
  --stop-card-bg: #ffffff;
  border-color: rgba(15, 23, 42, 0.08) !important;
}
.light-mode .stop-card:hover {
  --stop-card-bg: #f8fafc;
  border-color: rgba(15, 23, 42, 0.12) !important;
}
.light-mode .stop-card-action-btn {
  color: var(--text-muted);
}
.light-mode .stop-card-action-btn:hover {
  color: var(--text-main);
  background: rgba(0, 0, 0, 0.04);
}
.light-mode .stop-card-badge {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.06);
}

/* Light mode badge color accessibility overrides */
.light-mode .stop-eta-badge,
.light-mode .stop-status-badge.status-ontime,
.light-mode .deviation-badge.success {
  background: rgba(4, 120, 87, 0.08) !important;
  color: #065f46 !important;
  border-color: rgba(4, 120, 87, 0.25) !important;
}

.light-mode .stop-status-badge.status-late {
  background: rgba(190, 24, 74, 0.08) !important;
  color: #9f1239 !important;
  border-color: rgba(190, 24, 74, 0.25) !important;
}

.light-mode .stop-status-badge.status-early,
.light-mode .deviation-badge.info {
  background: rgba(29, 78, 216, 0.08) !important;
  color: #1e40af !important;
  border-color: rgba(29, 78, 216, 0.25) !important;
}

.light-mode .deviation-badge.warning {
  background: rgba(180, 83, 9, 0.08) !important;
  color: #92400e !important;
  border-color: rgba(180, 83, 9, 0.25) !important;
}

.light-mode .break-time-start.actualized-time,
.light-mode .break-time-end.actualized-time {
  color: #065f46 !important;
}

/* Light mode custom duration editor spacing and color overrides */
.light-mode .custom-duration-wrapper {
  background: #ffffff !important;
  border-color: rgba(15, 23, 42, 0.08) !important;
}
.light-mode .custom-duration-wrapper:focus-within {
  background: #f8fafc !important;
  border-color: var(--primary) !important;
}
.light-mode .custom-duration-input {
  color: var(--text-main) !important;
}
.light-mode .custom-duration-input::placeholder {
  color: var(--text-muted) !important;
  opacity: 0.6 !important;
}
.light-mode .custom-duration-suffix {
  color: var(--text-sub) !important;
}

.light-mode .transit-card {
  border-color: rgba(0, 0, 0, 0.06);
}
.light-mode .transit-line {
  background: linear-gradient(to bottom, var(--card-border) 50%, transparent 50%);
  background-size: 1px 12px;
}
.light-mode .transit-pill {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.08);
  color: var(--text-sub);
}
.light-mode .transit-pill:hover {
  background: #f8fafc;
  color: var(--text-main);
}
.light-mode .transit-multiplier-container select {
  background: #ffffff;
  color: var(--text-main);
  border-color: rgba(0, 0, 0, 0.1);
}

.light-mode .modal-content {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  color: var(--text-main) !important;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
}
.light-mode .modal-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  background: rgba(0, 0, 0, 0.02) !important;
}

.light-mode .quick-matches-dropdown {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
}
.light-mode .quick-match-item:hover {
  background: rgba(0, 0, 0, 0.03);
}

.light-mode .hos-panel {
  background: rgba(0, 0, 0, 0.01) !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
}
.light-mode .hos-header-row {
  border-bottom-color: rgba(0, 0, 0, 0.05);
}
.light-mode .hos-input-group {
  background: rgba(255, 255, 255, 0.6);
  border-color: rgba(0, 0, 0, 0.04);
}
.light-mode .hos-number-input {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
  color: var(--text-main);
}
.light-mode .hos-summary-banner {
  background: rgba(255, 255, 255, 0.75) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  color: var(--text-sub) !important;
}
.light-mode .hos-banner-stat {
  background: rgba(0, 0, 0, 0.02) !important;
  border-color: rgba(0, 0, 0, 0.04) !important;
  color: var(--text-main) !important;
}

.light-mode .view-toggle-container {
  background: rgba(0, 0, 0, 0.03) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}
.light-mode .view-toggle-btn {
  color: var(--text-muted) !important;
}
.light-mode .view-toggle-btn:hover {
  color: var(--text-main) !important;
}
.light-mode .view-toggle-btn.active {
  color: var(--primary) !important;
}
.light-mode .view-toggle-slider {
  background: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06) !important;
}

.light-mode .switch-slider {
  background-color: #cbd5e1 !important;
}
.light-mode input:checked + .switch-slider {
  background-color: var(--primary) !important;
}
.light-mode .switch-slider:before {
  background-color: #ffffff !important;
}

.light-mode .time-window-badge {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.05);
}

.light-mode .toast {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: var(--text-main);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* Light mode overrides for current location, drive, and stop cards in standard, compact, and driver mode */
.light-mode .stop-card.current-position-card {
  background: #f1f5f9 !important;
  border-color: rgba(59, 130, 246, 0.3) !important;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.08) !important;
}
.light-mode .stop-card.current-position-card:hover {
  background: #e2e8f0 !important;
  border-color: rgba(59, 130, 246, 0.5) !important;
}

.light-mode .current-position-card-compact {
  background: #f1f5f9 !important;
  border-color: rgba(59, 130, 246, 0.3) !important;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.06) !important;
  color: var(--text-main) !important;
}
.light-mode .current-position-card-compact:hover {
  background: #e2e8f0 !important;
  border-color: rgba(59, 130, 246, 0.5) !important;
}
.light-mode .current-position-card-compact.expanded {
  background: #f1f5f9 !important;
}

.light-mode .transit-card-driver {
  background: #f1f5f9 !important;
  border-color: rgba(59, 130, 246, 0.2) !important;
  color: var(--text-main) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}
.light-mode .transit-card-driver:hover {
  background: #e2e8f0 !important;
  border-color: rgba(59, 130, 246, 0.4) !important;
}

.light-mode .view-driver .stop-card:not(.expanded) {
  background: #f8fafc !important;
  border: 1.5px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
  color: var(--text-main) !important;
}
.light-mode .view-driver .stop-card:not(.expanded):hover {
  background: #f1f5f9 !important;
  border-color: rgba(59, 130, 246, 0.25) !important;
}

.light-mode .view-driver .stop-card.expanded {
  background: #ffffff !important;
  border-color: var(--primary) !important;
}

/* HOS container inside current location card in light mode */
.light-mode .current-position-card .hos-container,
.light-mode .current-position-card-compact .hos-container {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}
.light-mode .current-position-card .hos-container .hos-section-title,
.light-mode .current-position-card-compact .hos-container .hos-section-title {
  color: var(--primary) !important;
}
.light-mode .current-position-card .hos-container .hos-number-input,
.light-mode .current-position-card-compact .hos-container .hos-number-input {
  background: #f1f5f9 !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  color: var(--text-main) !important;
}
.light-mode .current-position-card .hos-container .hos-input-label,
.light-mode .current-position-card-compact .hos-container .hos-input-label {
  color: var(--text-sub) !important;
}
.light-mode .current-position-card .hos-container .hos-time-sep,
.light-mode .current-position-card-compact .hos-container .hos-time-sep {
  color: var(--text-sub) !important;
}

/* Transit modifier buttons in driver mode transit card */
.light-mode .transit-card-driver .transit-modifier-btn {
  background: rgba(0, 0, 0, 0.03) !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  color: var(--text-muted) !important;
}
.light-mode .transit-card-driver .transit-modifier-btn:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.08) !important;
  color: var(--text-main) !important;
}
.light-mode .transit-card-driver .transit-modifier-btn.active.btn-faster {
  background: rgba(5, 150, 105, 0.12) !important;
  border-color: rgba(5, 150, 105, 0.3) !important;
  color: #047857 !important;
  box-shadow: none !important;
}
.light-mode .transit-card-driver .transit-modifier-btn.active.btn-normal {
  background: rgba(37, 99, 235, 0.12) !important;
  border-color: rgba(37, 99, 235, 0.3) !important;
  color: #1d4ed8 !important;
  box-shadow: none !important;
}
.light-mode .transit-card-driver .transit-modifier-btn.active.btn-slower {
  background: rgba(220, 38, 38, 0.12) !important;
  border-color: rgba(220, 38, 38, 0.3) !important;
  color: #b91c1c !important;
  box-shadow: none !important;
}

/* Make CURRENT LOCATION card sticky on screen in driver and compact modes */
.view-driver #desktop-current-widget-container,
.view-compact #desktop-current-widget-container {
  display: block !important;
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg-color);
  padding: 8px 0;
  margin-top: -10px;
  margin-bottom: 12px;
  box-shadow: 0 10px 15px -10px rgba(0,0,0,0.3);
  border-bottom: 1px solid var(--card-border);
}

@media (max-width: 1023px) {
  .view-driver #desktop-current-widget-container,
  .view-compact #desktop-current-widget-container {
    top: 56px; /* Sticky height below mobile header */
    padding: 8px 16px;
    margin-left: -16px;
    margin-right: -16px;
  }
}

/* Fix mobile actions dropdown layout & view-toggle alignment */
.mobile-actions-dropdown .view-toggle-container {
  width: 118px !important;
  margin: 8px auto !important;
  flex-shrink: 0 !important;
}
.mobile-actions-dropdown .view-toggle-btn::after {
  display: none !important;
}

/* Light mode overrides for planner, customers tables, and expanded expected time card elements */
.light-mode .planner-table-container {
  background: var(--card-bg) !important;
  border-color: var(--card-border) !important;
}

.light-mode .table-responsive {
  background: var(--card-bg) !important;
  border-color: var(--card-border) !important;
}

.light-mode .premium-table th {
  background: rgba(0, 0, 0, 0.02) !important;
  border-bottom-color: rgba(0, 0, 0, 0.08) !important;
}

.light-mode .premium-table td {
  border-bottom-color: rgba(0, 0, 0, 0.06) !important;
}

.light-mode .premium-table-row:hover {
  background-color: rgba(0, 0, 0, 0.02) !important;
}

.light-mode .manage-location-row {
  background: #ffffff !important;
}

.light-mode .manage-location-row:hover {
  background: #f8fafc !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
}

.light-mode .manage-location-footer {
  border-top-color: rgba(0, 0, 0, 0.08) !important;
}

.light-mode .add-itinerary-btn {
  background: rgba(59, 130, 246, 0.08) !important;
  border-color: rgba(59, 130, 246, 0.25) !important;
  color: #2563eb !important;
}

.light-mode .add-itinerary-btn:hover {
  background: #2563eb !important;
  border-color: #2563eb !important;
  color: #ffffff !important;
}

.light-mode .manage-location-action-btn {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  color: #64748b !important;
}

.light-mode .manage-location-action-btn:hover {
  background: #f1f5f9 !important;
  border-color: rgba(0, 0, 0, 0.2) !important;
  color: #0f172a !important;
}

.light-mode .manage-location-action-btn.delete-btn:hover {
  background: #fef2f2 !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
  color: #ef4444 !important;
}

.light-mode .expectations-form-row {
  background: rgba(0, 0, 0, 0.03) !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

.light-mode .expectations-select,
.light-mode .expectations-datetime-input {
  background: #ffffff !important;
  color: var(--text-main) !important;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
}

.light-mode .current-position-card-compact.expanded {
  background: #f1f5f9 !important;
  color: var(--text-main) !important;
}
.light-mode .current-position-card-compact.expanded .current-position-title,
.light-mode .current-position-card-compact.expanded .current-position-status {
  color: var(--text-main) !important;
}

/* Shipment Modal Dynamic Stop Rows */
.shipment-stop-row {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 8px;
}
.stop-index-bubble {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1.5px solid var(--card-border);
  color: var(--text-sub);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  transition: all 0.2s ease;
}
.shipment-stop-row:hover .stop-index-bubble {
  border-color: rgba(59, 130, 246, 0.4);
  color: var(--primary);
  background: rgba(59, 130, 246, 0.05);
}
.light-mode .stop-index-bubble {
  background: rgba(0, 0, 0, 0.03);
}

/* Hide mobile and desktop Current Position widget slots globally */
.mobile-current-widget-container,
.desktop-current-widget-container {
  display: none !important;
}

/* Timeline compact Starting Location card integrations */
.trip-timeline #current-position-card.current-position-card-compact {
  margin: 0 !important;
  border-radius: 16px !important;
}

/* Responsively stack search input and Start Trip button in footer on mobile/tablet viewports */
@media (max-width: 1023px) {
  body.trip-planner-active .planner-panel.glass-card {
    padding-top: 4px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .search-input-group {
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  .search-input-group .search-input-relative {
    flex: 1 1 100% !important;
  }
  .search-input-group .form-input {
    border-radius: 14px !important;
    border-right: 1.5px solid var(--card-border) !important;
  }
  .search-input-group .add-shipment-btn {
    flex: 1 1 calc(50% - 4px) !important;
    border-radius: 14px !important;
    border: 1.5px solid var(--card-border) !important;
    justify-content: center !important;
    padding: 12px 16px !important;
    height: 44px !important;
    display: inline-flex !important;
  }
  .search-input-group .start-trip-btn {
    flex: 1 1 calc(50% - 4px) !important;
    border-radius: 14px !important;
    border: 1.5px solid var(--card-border) !important;
    justify-content: center !important;
    padding: 12px 16px !important;
    height: 44px !important;
    width: auto !important;
  }
}

/* Responsive adjustments for Customer location modals and header actions */
@media (max-width: 768px) {
  /* Make all modals responsive on mobile screen widths */
  .modal-content {
    width: calc(100% - 40px) !important;
    margin: 20px auto !important;
    max-height: 95vh !important;
  }

  /* Hide text of secondary utility buttons in Customers view header, making them icon-only */
  #bulk-import-locations-btn .btn-text,
  #mastering-import-btn .btn-text,
  #google-sheet-sync-btn .btn-text {
    display: none !important;
  }
  #bulk-import-locations-btn,
  #mastering-import-btn,
  #google-sheet-sync-btn {
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    justify-content: center !important;
    border-radius: 50% !important;
    min-width: 38px !important;
  }
}

@media (max-width: 480px) {
  /* On small mobile screens, also make primary action buttons in Customers view header icon-only */
  #saved-locations-back-btn .btn-text,
  #add-location-btn .btn-text {
    display: none !important;
  }
  #saved-locations-back-btn,
  #add-location-btn {
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    justify-content: center !important;
    border-radius: 50% !important;
    min-width: 38px !important;
  }
}

/* Stops ETA and expectations status badge display optimizations (both desktop and mobile) */
/* Aligned to the right, made larger and highly visible for standard/expanded/compact stop card viewports */
.stop-card-badges-wrapper {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 6px !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  align-self: flex-start !important;
  margin-top: 4px !important;
  flex-shrink: 0 !important;
}

.stop-card-badges-wrapper .stop-eta-badge {
  display: block !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  text-align: right !important;
  width: fit-content !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  padding: 8px 16px !important;
  border-radius: 12px !important;
  margin-top: 0 !important;
  letter-spacing: 0.5px !important;
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.2) !important;
}

.view-compact .stop-card-badges-wrapper .stop-eta-badge {
  font-size: 11px !important;
  padding: 4px 10px !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}

.stop-card-badges-wrapper .stop-status-badge {
  display: block !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  margin-top: 0 !important;
  text-align: right !important;
  width: fit-content !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
  border-radius: 8px !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2) !important;
}

/* Driver mode when collapsed: align to the right inside the name wrapper and make larger/highly visible */
.view-driver .stop-card:not(.expanded) .stop-name-wrapper {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  width: 100% !important;
  gap: 12px !important;
}

.view-driver .stop-card:not(.expanded) .stop-name-wrapper .stop-activity-badge {
  display: inline-block !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 4px 8px !important;
  border-radius: 8px !important;
  margin: 0 !important;
}

.view-driver .stop-card:not(.expanded) .stop-name-wrapper .stop-eta-badge {
  margin-left: auto !important;
  margin-right: 0 !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  padding: 8px 16px !important;
  border-radius: 12px !important;
  margin-top: 0 !important; /* Reset margin since it aligns horizontally */
  margin-bottom: 0 !important;
  letter-spacing: 0.5px !important;
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.25) !important;
}

/* Right-aligned badges container and children for collapsed Driver Mode */
.view-driver .stop-card:not(.expanded) .stop-card-right-badges {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  flex-wrap: wrap !important;
}

.view-driver .stop-card:not(.expanded) .stop-card-right-badges .stop-status-badge {
  display: inline-block !important;
  margin: 0 !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  padding: 8px 16px !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.15) !important;
  line-height: 1.2 !important;
}

.view-driver .stop-card:not(.expanded) .stop-card-right-badges .stop-status-badge.status-late {
  box-shadow: 0 4px 15px rgba(244, 63, 94, 0.25) !important;
}

.view-driver .stop-card:not(.expanded) .stop-card-right-badges .stop-requirement-icon-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--warning) !important;
  background: rgba(245, 158, 11, 0.12) !important;
  border: 1px solid rgba(245, 158, 11, 0.25) !important;
  padding: 8px 12px !important;
  border-radius: 12px !important;
  margin: 0 !important;
  box-shadow: 0 4px 15px rgba(245, 158, 11, 0.15) !important;
}

.view-driver .stop-card:not(.expanded) .stop-card-right-badges .stop-duration-badge {
  display: inline-block !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--text-sub) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  padding: 8px 12px !important;
  border-radius: 12px !important;
  margin: 0 !important;
  text-transform: lowercase !important;
  letter-spacing: 0.5px !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
}

.transit-retry-btn {
  margin-left: 8px;
  background: none;
  border: none;
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
  font-size: 12px;
  padding: 0;
  font-family: var(--font-family);
  font-weight: 500;
  transition: color 0.2s;
}

.transit-retry-btn:hover {
  color: var(--primary);
}

.transit-error-text {
  color: var(--warning) !important;
}

/* --- GPS Telemetry Debug & Passive POI Styles --- */

.gps-debug-card {
  background: var(--card-bg) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border: 1px solid var(--card-border-active) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
  border-radius: 16px !important;
  padding: 14px 16px !important;
  margin-bottom: 12px !important;
  min-height: auto !important;
}

.light-mode .gps-debug-card {
  background: rgba(240, 246, 255, 0.85) !important;
  border: 1.5px solid rgba(59, 130, 246, 0.25) !important;
  box-shadow: 0 4px 20px rgba(59, 130, 246, 0.08) !important;
}

.gps-debug-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 16px;
  font-family: 'Outfit', sans-serif;
}

.lock-dot-pulse {
  animation: lock-pulse 1.8s infinite ease-in-out;
}

@keyframes lock-pulse {
  0% {
    transform: scale(0.9);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  }
  70% {
    transform: scale(1.1);
    box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
  }
  100% {
    transform: scale(0.9);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}

.checked-in-pulse {
  display: inline-block;
  animation: checkin-pulse 2s infinite ease-in-out;
}

@keyframes checkin-pulse {
  0% {
    transform: scale(0.85);
    opacity: 0.6;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5);
  }
  50% {
    transform: scale(1.15);
    opacity: 1;
    box-shadow: 0 0 0 5px rgba(16, 185, 129, 0);
  }
  100% {
    transform: scale(0.85);
    opacity: 0.6;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}

.stop-card.at-deduced-poi {
  border-color: rgba(16, 185, 129, 0.45) !important;
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.12) !important;
}

.stop-card.at-deduced-poi:hover {
  border-color: rgba(16, 185, 129, 0.6) !important;
  box-shadow: 0 0 24px rgba(16, 185, 129, 0.18) !important;
}/* Premium Drive Mode Progress Bar */
.drive-progress-container {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  width: 100%;
  padding: 0 4px;
}

.progress-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-muted);
  flex-shrink: 0;
  transition: var(--transition-smooth);
}

.progress-origin {
  background: var(--primary);
  box-shadow: 0 0 8px var(--primary-glow);
}

.progress-destination {
  background: var(--success);
  box-shadow: 0 0 8px var(--success-glow);
}

.progress-bar-track {
  position: relative;
  height: 4px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 2px;
  flex-grow: 1;
}

.progress-bar-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%);
  border-radius: 2px;
  transition: width 0.3s ease;
}

.progress-bar-marker {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-main);
  background: var(--primary);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--primary-glow), 0 2px 4px rgba(0, 0, 0, 0.5);
  transition: left 0.3s ease;
}

.progress-marker-icon {
  width: 10px;
  height: 10px;
}

/* Responsiveness for Create Shipment Modal and Stop Rows on Mobile */
@media (max-width: 768px) {
  #planner-shipment-modal .modal-content {
    max-height: 92vh !important;
    overflow-y: auto !important;
    padding: 16px !important;
    margin: 10px !important;
    width: calc(100% - 20px) !important;
  }
}

@media (max-width: 600px) {
  .shipment-stop-row {
    flex-wrap: wrap !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid var(--card-border) !important;
    padding: 12px !important;
    border-radius: 12px !important;
    gap: 8px !important;
    position: relative !important;
  }
  .shipment-stop-row .stop-index-bubble {
    order: 1 !important;
  }
  .shipment-stop-row .stop-activity-select {
    order: 2 !important;
    flex: 1 !important;
    height: 34px !important;
    width: auto !important;
  }
  .shipment-stop-row .delete-stop-row-btn {
    order: 3 !important;
    height: 34px !important;
    width: 34px !important;
  }
  .shipment-stop-row .stop-address-wrapper {
    order: 4 !important;
    flex: 1 1 100% !important;
    margin-top: 4px !important;
    width: 100% !important;
    z-index: 5 !important;
  }
  .shipment-stop-row .stop-dwell-container {
    order: 5 !important;
    flex: 1 1 100% !important;
    margin-top: 4px !important;
    width: 100% !important;
    display: flex !important;
    justify-content: flex-start !important;
  }
}

/* Passively identified POI details panel */
.place-details-panel {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed rgba(255, 255, 255, 0.1);
  position: relative;
  z-index: 2;
}

.place-details-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  font-size: 12px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.place-details-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.place-details-row strong {
  color: var(--text-sub, #94a3b8);
  font-weight: 600;
  flex-shrink: 0;
}

.place-details-row span {
  color: var(--text-main, #f1f5f9);
  font-weight: 500;
  text-align: right;
}

.current-position-card-compact .place-details-container {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(59, 130, 246, 0.15);
}

/* Start Here Option */
.start-here-option-container {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.start-here-label {
  font-size: 11px;
  color: var(--text-muted, #64748b);
  font-weight: 500;
}

.btn-start-here {
  padding: 6px 12px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  background: rgba(16, 185, 129, 0.12) !important;
  color: #34d399 !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
  cursor: pointer;
  transition: all 0.2s ease-in-out !important;
}

.btn-start-here:hover {
  background: rgba(16, 185, 129, 0.22) !important;
  border-color: rgba(16, 185, 129, 0.5) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
}

/* Downstream Stop Departure Recommendations */
.stop-recommendation-row {
  display: flex;
  margin-top: 8px;
  gap: 8px;
  align-items: center;
}

.btn-recommend-departure-downstream {
  background: rgba(59, 130, 246, 0.1) !important;
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
  color: #60a5fa !important;
  font-weight: 600 !important;
  padding: 8px 16px !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 10px rgba(59, 130, 246, 0.1) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 38px !important;
}

.btn-recommend-departure-downstream:hover {
  background: rgba(59, 130, 246, 0.2) !important;
  border-color: #60a5fa !important;
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.25) !important;
}

.btn-depart-by-success {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  padding: 8px 16px !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  height: 38px !important;
}

.btn-depart-by-success:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  box-shadow: 0 4px 20px rgba(16, 185, 129, 0.4) !important;
}

/* Mobile Voice Import Quick Button */
.mobile-voice-import-btn {
  display: none;
}

@media (max-width: 1023px) {
  .mobile-voice-import-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(59, 130, 246, 0.12);
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: var(--primary, #3b82f6);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    padding: 0;
    margin: 0;
    flex-shrink: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    z-index: 910;
  }

  .mobile-voice-import-btn:hover,
  .mobile-voice-import-btn:active {
    background: var(--primary, #3b82f6);
    color: #ffffff;
    border-color: var(--primary, #3b82f6);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
  }
}

@media (max-width: 480px) {
  .mobile-logo-text .full-logo-text {
    display: none !important;
  }
  .mobile-logo-text .mini-logo-text {
    display: block !important;
  }
}

/* Past Activity View Styles */
.past-activity-list {
  max-height: calc(100vh - 200px);
  overflow-y: auto;
  padding-right: 8px;
}

.past-activity-list::-webkit-scrollbar {
  width: 6px;
}

.past-activity-list::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 4px;
}

.past-activity-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 4px;
}

.past-activity-card {
  background: rgba(30, 41, 59, 0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 18px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.past-activity-card:hover {
  transform: translateY(-2px);
  border-color: rgba(37, 99, 235, 0.4);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3), 0 0 15px rgba(37, 99, 235, 0.1);
}

.past-activity-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding-bottom: 10px;
}

.past-activity-stop-title {
  font-family: 'Outfit', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-main, #f8fafc);
}

.past-activity-sequence {
  background: rgba(37, 99, 235, 0.15);
  border: 1px solid rgba(37, 99, 235, 0.3);
  color: var(--primary, #3b82f6);
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.past-activity-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.past-activity-metric {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.past-activity-metric-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted, #94a3b8);
}

.past-activity-metric-value {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-main, #f8fafc);
  display: flex;
  align-items: center;
  gap: 6px;
}

.punctuality-pill {
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
}

.punctuality-pill.early {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.punctuality-pill.late {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.25);
}

.punctuality-pill.ontime {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
  border: 1px solid rgba(59, 130, 246, 0.25);
}

.variation-indicator {
  font-size: 12px;
  font-weight: 600;
}

.variation-indicator.neutral {
  color: var(--text-muted, #94a3b8);
}

.variation-indicator.delay {
  color: #ef4444;
}

.variation-indicator.ahead {
  color: #10b981;
}

.past-activity-empty-state {
  padding: 48px;
  text-align: center;
  background: rgba(30, 41, 59, 0.25);
  border: 1px dashed rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: var(--text-muted, #94a3b8);
}

.light-mode .past-activity-card {
  background: rgba(255, 255, 255, 0.65);
  border-color: rgba(0, 0, 0, 0.08);
}
.light-mode .past-activity-card:hover {
  border-color: rgba(37, 99, 235, 0.4);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06), 0 0 15px rgba(37, 99, 235, 0.05);
}
.light-mode .past-activity-stop-title {
  color: #0f172a;
}
.light-mode .past-activity-metric-value {
  color: #334155;
}
.light-mode .past-activity-empty-state {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.12);
}

/* Segmented Tabs for Departure Type Selector */
.departure-type-tabs {
  display: flex;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--card-border);
  padding: 4px;
  border-radius: 12px;
  margin-bottom: 20px;
  position: relative;
}

.dep-tab-btn {
  flex: 1;
  background: none;
  border: 1px solid transparent;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--text-muted);
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: center;
}

.dep-tab-btn:hover {
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.02);
}

.dep-tab-btn.active {
  background: rgba(59, 130, 246, 0.15) !important;
  border: 1px solid rgba(59, 130, 246, 0.25) !important;
  color: var(--text-main) !important;
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.15);
}

.light-mode .departure-type-tabs {
  background: rgba(0, 0, 0, 0.03);
}

.light-mode .dep-tab-btn.active {
  background: rgba(37, 99, 235, 0.1) !important;
  border: 1px solid rgba(37, 99, 235, 0.2) !important;
  color: #1e3a8a !important;
  box-shadow: 0 0 12px rgba(37, 99, 235, 0.08);
}