/* Raised surfaces for the existing purple/pink theme. Screen only. */
@media screen {
  :root {
    --shadow-sm: 0 3px 7px rgba(66, 38, 104, .09);
    --shadow-md: 0 8px 20px rgba(66, 38, 104, .10), 0 2px 3px rgba(66, 38, 104, .06);
    --shadow-lg: 0 18px 44px rgba(66, 38, 104, .16), 0 4px 8px rgba(66, 38, 104, .08);
  }
  body {
    background: radial-gradient(ellipse at 5% 0%, #e9defa 0, transparent 48%),
      radial-gradient(ellipse at 95% 15%, #fce1ed 0, transparent 46%), #f1edf7;
    background-attachment: fixed;
  }
  .header-bar {
    border-bottom: 1px solid #fff;
    box-shadow: 0 5px 18px rgba(66, 38, 104, .10), inset 0 -1px 0 #e2d7ef;
  }
  .glass-card {
    background: linear-gradient(145deg, #fff 0%, #fdfbff 65%, #f5effb 100%);
    border: 1px solid #e2d7ef;
    box-shadow: inset 0 2px 0 #fff, inset 0 -2px 0 rgba(198, 179, 220, .22), var(--shadow-md);
  }
  .login-card, .modal {
    box-shadow: inset 0 2px 0 #fff, 0 24px 60px rgba(53, 28, 86, .22), 0 4px 8px rgba(53, 28, 86, .10);
  }
  .stat-card, .driver-pie-card {
    background: linear-gradient(145deg, #fff 30%, #faf6ff 100%);
    border: 1px solid #ddd0ee;
    box-shadow: inset 0 2px 0 #fff, 0 4px 0 #e5dbee, 0 9px 18px rgba(66, 38, 104, .10);
  }
  .driver-pies-grid { gap: 1.4rem; }
  .driver-pie-card { border-radius: 18px; }
  .driver-pie {
    overflow: visible;
    filter: drop-shadow(0 4px 0 rgba(43, 28, 71, .20)) drop-shadow(0 8px 5px rgba(43, 28, 71, .16));
    margin-top: 1rem;
    margin-bottom: 1.2rem;
  }
  .driver-pie-avatar {
    border: 2px solid #fff;
    box-shadow: 0 3px 0 #d5c5e8, 0 6px 12px rgba(66, 38, 104, .18);
  }
  .btn {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 3px 0 rgba(61, 29, 97, .18), 0 5px 10px rgba(61, 29, 97, .10);
    transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
  }
  .btn-outline {
    background-image: linear-gradient(180deg, rgba(255,255,255,.85), rgba(245,238,253,.50));
  }
  .btn-primary {
    background-image: linear-gradient(155deg, #a56af3 0%, #9136d8 48%, #d73692 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 4px 0 #7526a8, 0 8px 16px rgba(128,44,172,.24);
  }
  .btn:active:not(:disabled) {
    transform: translateY(2px);
    box-shadow: inset 0 2px 4px rgba(61,29,97,.15), 0 1px 0 rgba(61,29,97,.2);
  }
  .btn:disabled { box-shadow: none; transform: none; }
  .view-switcher, .login-mode-tabs, .dashboard-filter-bar {
    box-shadow: inset 0 2px 5px rgba(66,38,104,.10), 0 1px 0 #fff;
  }
  .filter-pill.active {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 3px 0 rgba(87,39,134,.2), 0 5px 10px rgba(87,39,134,.12);
  }
  .form-control, .form-select {
    box-shadow: inset 0 2px 4px rgba(66,38,104,.07), 0 1px 0 #fff;
  }
  .form-control:focus, .form-select:focus {
    box-shadow: inset 0 1px 3px rgba(66,38,104,.05), 0 0 0 3px rgba(147,51,234,.13);
  }
  .data-table th {
    background-image: linear-gradient(180deg, #fdfbff, #f0e8f8);
    box-shadow: inset 0 1px 0 #fff;
  }
  :is(.btn, .filter-pill, .view-btn):focus-visible {
    outline: 3px solid #7e22ce;
    outline-offset: 4px;
  }
}
@media screen and (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn:hover:not(:disabled) { transform: translateY(-1px); }
}
@media screen and (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn:active:not(:disabled) { transform: none; }
}

/* Strong, raised status rails remain visible over the general card theme. */
@media screen {
  .glass-card.vehicle-card {
    --vehicle-status-edge: #64748b;
    border: 2px solid var(--vehicle-status-edge);
    border-left-width: 8px;
    box-shadow: inset 0 2px 0 rgba(255,255,255,.95),
      inset 0 -3px 0 rgba(46,25,72,.10),
      0 4px 0 var(--vehicle-status-edge),
      0 9px 18px rgba(46,25,72,.16);
  }
  .glass-card.vehicle-card.ready { --vehicle-status-edge: #059669; }
  .glass-card.vehicle-card.on_duty { --vehicle-status-edge: #eab308; }
  .glass-card.vehicle-card.en_route,
  .glass-card.vehicle-card.fleet-operating { --vehicle-status-edge: #dc2626; }
  .glass-card.vehicle-card.maintenance { --vehicle-status-edge: #dc2626; }
  .glass-card.vehicle-card.fleet-operating::before { padding: 5px; }
}

/* Duty: yellow. Active mission: red. Text remains dark for readability. */
@keyframes mission-status-red-pulse {
  0%, 100% { background-color: #fef2f2; box-shadow: 0 0 0 0 rgba(220,38,38,0); }
  50% { background-color: #fee2e2; box-shadow: 0 0 0 3px rgba(220,38,38,.22); }
}
@media screen {
  .badge-on_duty, .status-badge-onduty, .status-on-duty {
    color: #713f12;
    background: #fef9c3;
    border: 1px solid #eab308;
  }
  .badge-en_route, .badge-on_mission, .status-badge-onmission,
  .fleet-operation-badge, .status-badge-mission, .mission-status-active {
    color: #991b1b !important;
    background: #fef2f2;
    border: 1px solid #ef4444;
  }
  .fleet-operation-badge, .status-badge-mission, .mission-status-active {
    animation-name: mission-status-red-pulse;
  }
  .glass-card.vehicle-card.fleet-operating::before {
    background: conic-gradient(from var(--fleet-light-angle), #dc2626 0deg, #dc2626 235deg, #fca5a5 275deg, #b91c1c 315deg, #dc2626 360deg);
  }
  .fleet-operation-dot { background: #dc2626; }
  .dispatch-driver-card.on-duty .dispatch-driver-photo { border-color: #eab308; }
  .dispatch-driver-card.on-mission .dispatch-driver-photo { border-color: #dc2626; }
}

/* A small ambulance follows the border; the red status frame stays still. */
.fleet-ambulance-runner { display: none; }
@keyframes fleet-ambulance-lap { to { offset-distance: 100%; } }
@media screen {
  .glass-card.vehicle-card.fleet-operating { overflow: visible; }
  .glass-card.vehicle-card.fleet-operating::before { content: none; animation: none; }
  .fleet-ambulance-runner {
    display: block;
    position: absolute;
    width: 32px;
    height: 22px;
    left: 12px;
    top: -12px;
    z-index: 2;
    pointer-events: none;
    user-select: none;
    filter: drop-shadow(0 2px 2px rgba(15,23,42,.3));
  }
  @supports (offset-path: inset(0 round 20px)) {
    .fleet-ambulance-runner {
      left: 0;
      top: 0;
      offset-path: inset(0 round 20px) border-box;
      offset-distance: 0%;
      offset-rotate: 0deg;
      offset-anchor: center;
      animation: fleet-ambulance-lap 10s linear infinite;
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  .fleet-ambulance-runner { animation: none; }
}