@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap');

:root {
  --ink: #17221c;
  --ink-soft: #27342d;
  --muted: #66726b;
  --canvas: #edf1eb;
  --surface: #ffffff;
  --surface-soft: #f7f9f5;
  --line: #d9e0d8;
  --line-strong: #c5cec4;
  --signal: #c9ff36;
  --signal-strong: #aee521;
  --signal-soft: #f3ffd5;
  --coral: #f1785d;
  --blue: #2f78d3;
  --shadow-sm: 0 4px 14px rgba(23, 34, 28, .08);
  --shadow: 0 16px 40px rgba(23, 34, 28, .13);
  --shadow-lg: 0 28px 80px rgba(23, 34, 28, .2);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; overflow: hidden; color: var(--ink); background: var(--canvas); font-family: "DM Sans", sans-serif; letter-spacing: 0; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; letter-spacing: 0; }
button, select { cursor: pointer; }
button { transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease; }
button:active { transform: translateY(1px); }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible { outline: 3px solid rgba(47, 120, 211, .24); outline-offset: 2px; }
[hidden] { display: none !important; }

.app-shell { display: grid; grid-template-columns: 88px minmax(0, 1fr); height: 100%; }
.sidebar { position: relative; z-index: 20; display: flex; flex-direction: column; align-items: center; padding: 20px 10px; color: #f5f7f3; background: linear-gradient(180deg, #1b2821 0%, #111914 100%); box-shadow: 8px 0 26px rgba(15, 24, 19, .1); }
.sidebar::after { content: ""; position: absolute; inset: 0 0 0 auto; width: 1px; background: rgba(255, 255, 255, .07); }
.brand { display: grid; gap: 7px; justify-items: center; color: inherit; text-decoration: none; font: 800 14px "Manrope", sans-serif; letter-spacing: -.02em; }
.brand img { width: 42px; height: 42px; filter: drop-shadow(0 5px 12px rgba(0, 0, 0, .18)); }
.sidebar nav { display: grid; gap: 9px; width: 100%; margin-top: 46px; }
.nav-item { position: relative; display: grid; gap: 5px; justify-items: center; min-height: 62px; padding: 10px 3px; border: 1px solid transparent; border-radius: 14px; color: #aeb8b1; background: transparent; font-size: 12px; font-weight: 700; }
.nav-item:hover { color: white; background: rgba(255, 255, 255, .06); }
.nav-item svg { width: 21px; }
.nav-item.active { color: var(--ink); border-color: rgba(255, 255, 255, .18); background: var(--signal); box-shadow: 0 8px 22px rgba(201, 255, 54, .2); }
.sidebar-footer { display: grid; gap: 7px; justify-items: center; margin-top: auto; color: #a7b0aa; font-size: 11px; text-align: center; }
.connection-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 4px rgba(241, 120, 93, .15); }
.connection-dot.online { background: var(--signal); box-shadow: 0 0 0 4px rgba(217, 247, 100, .14); }
.application-version { max-width: 74px; padding-top: 5px; border-top: 1px solid rgba(255, 255, 255, .12); color: #d7ddd8; font: 700 9px/1.35 "DM Sans", sans-serif; overflow-wrap: anywhere; }
.application-version.version-drift { color: #ffb39f; }

.workspace { min-width: 0; height: 100%; }
.topbar { position: relative; z-index: 10; height: 90px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 15px 26px; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .92); box-shadow: 0 4px 22px rgba(23, 34, 28, .05); backdrop-filter: blur(14px); }
.topbar h1, .panel-heading h2, .fleet-heading h2, .dialog-heading h2 { margin: 2px 0 0; font: 800 22px/1.2 "Manrope", sans-serif; letter-spacing: -.035em; }
.eyebrow { margin: 0; color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .11em; }
.topbar-actions { display: flex; align-items: center; gap: 9px; }
.profile-badge { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-soft); font-size: 11px; font-weight: 700; }
.profile-badge svg { width: 16px; color: var(--muted); }
.icon-button { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: var(--surface); box-shadow: 0 2px 7px rgba(23, 34, 28, .04); }
.icon-button:hover, .secondary-button:hover { border-color: var(--line-strong); background: var(--surface-soft); box-shadow: var(--shadow-sm); }
.icon-button svg { width: 18px; }
.icon-button.active { border-color: #91b321; background: var(--signal); }
.primary-button, .secondary-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 16px; border-radius: 12px; font-weight: 800; }
.primary-button { border: 1px solid #9fcf16; color: var(--ink); background: var(--signal); box-shadow: 0 4px 12px rgba(159, 207, 22, .16); }
.primary-button:hover { background: var(--signal-strong); box-shadow: 0 7px 18px rgba(159, 207, 22, .22); }
.primary-button svg, .secondary-button svg { width: 17px; }
.secondary-button { border: 1px solid var(--line); color: var(--ink); background: var(--surface); }

.operations-layout { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) 390px; height: calc(100% - 90px); }
.map-region { position: relative; z-index: 0; min-width: 0; overflow: hidden; isolation: isolate; contain: paint; background-color: #dfe8dc; background-image: linear-gradient(rgba(255,255,255,.42) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.42) 1px, transparent 1px), radial-gradient(circle at 68% 32%, rgba(201,255,54,.36), transparent 30%); background-size: 36px 36px, 36px 36px, auto; }
#map { position: relative; z-index: 0; width: 100%; height: 100%; overflow: hidden; background: transparent; }
.leaflet-container { background: transparent; }
.leaflet-control-zoom { overflow: hidden; border: 1px solid rgba(23, 34, 28, .1) !important; border-radius: 9px !important; box-shadow: var(--shadow) !important; }
.leaflet-control-zoom a { color: var(--ink) !important; border: 0 !important; }
.leaflet-control-zoom a + a { border-top: 1px solid var(--line) !important; }
.leaflet-tile-pane { filter: saturate(.52) contrast(.93) brightness(1.055); }
.map-status { position: absolute; z-index: 500; top: 18px; left: 18px; display: flex; align-items: center; gap: 9px; padding: 10px 13px; border: 1px solid rgba(23, 34, 28, .1); border-radius: 8px; background: rgba(255, 255, 255, .94); box-shadow: var(--shadow); backdrop-filter: blur(10px); font-size: 11px; font-weight: 700; }
.gps-status { position: absolute; z-index: 500; top: 63px; left: 18px; display: flex; align-items: center; gap: 7px; padding: 9px 12px; border-radius: 8px; color: white; background: rgba(23, 34, 28, .94); box-shadow: var(--shadow); font-size: 10px; font-weight: 700; }
.gps-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); }
.gps-status.active .gps-dot { background: var(--signal); box-shadow: 0 0 0 4px rgba(217, 247, 100, .14); }
.live-pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--signal-strong); box-shadow: 0 0 0 4px rgba(195, 232, 69, .2); }
.route-summary { position: absolute; z-index: 500; left: 18px; right: 18px; bottom: 18px; display: grid; grid-template-columns: 1fr 1fr auto auto; align-items: center; gap: 12px; max-width: 700px; padding: 15px 17px; border: 1px solid rgba(255, 255, 255, .09); border-radius: 10px; color: white; background: rgba(23, 34, 28, .96); box-shadow: var(--shadow-lg); backdrop-filter: blur(12px); }
.route-summary div { display: grid; gap: 2px; }
.route-summary span { color: #abb6af; font-size: 10px; }
.route-summary strong { font: 700 17px "Manrope", sans-serif; }
.route-summary a { display: inline-flex; align-items: center; gap: 7px; padding: 10px 12px; border-radius: 7px; color: var(--ink); background: var(--signal); font-size: 12px; font-weight: 800; text-decoration: none; }
.route-summary a svg { width: 16px; }

.dispatch-panel { position: relative; z-index: 10; min-width: 0; overflow-y: auto; isolation: isolate; border-left: 1px solid var(--line); background: #f8faf7; scrollbar-width: thin; scrollbar-color: #bdc7bd transparent; }
.panel-heading { position: sticky; z-index: 3; top: 0; display: flex; align-items: center; justify-content: space-between; padding: 21px 22px; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .94); box-shadow: 0 5px 18px rgba(23, 34, 28, .04); backdrop-filter: blur(12px); }
.panel-heading h2 { font-size: 19px; }
.count-badge { display: grid; place-items: center; min-width: 31px; height: 31px; padding: 0 8px; border: 1px solid #b5d63b; border-radius: 50%; color: var(--ink); background: var(--signal); font: 800 12px "Manrope", sans-serif; }
.operations-summary { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line); background: #f5f8f3; }
.operations-summary div { display: grid; gap: 3px; padding: 13px 7px; border-right: 1px solid var(--line); text-align: center; }
.operations-summary div:last-child { border-right: 0; }
.operations-summary strong { font: 800 17px "Manrope", sans-serif; }
.operations-summary span { color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.driver-selector { padding: 15px 22px; border-bottom: 1px solid var(--line); background: #f5f8f3; }
.driver-selector label, .form-grid label { display: grid; gap: 7px; color: var(--muted); font-size: 12px; font-weight: 700; text-transform: none; letter-spacing: .01em; }
.driver-selector select, .form-grid input, .form-grid select, .form-grid textarea { width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px; color: var(--ink); background: white; font-size: 15px; text-transform: none; transition: border-color .15s ease, box-shadow .15s ease; }
.driver-selector select:hover, .form-grid input:hover, .form-grid select:hover, .form-grid textarea:hover { border-color: var(--line-strong); }
.driver-identity { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line); background: #eef5ff; }
.driver-identity > div { min-width: 0; }
.driver-identity span, .driver-identity strong, .driver-identity small { display: block; }
.driver-identity > div > span { color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.driver-identity strong, .driver-identity small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.driver-identity strong { margin-top: 2px; font-size: 12px; }
.driver-identity small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.driver-gps-action { min-height: 38px; padding: 8px 11px; font-size: 11px; }
.driver-gps-action.active { border-color: #8dac32; background: var(--signal); }
.ride-list { display: grid; gap: 10px; padding: 10px; }
.ride-card { padding: 17px 18px; border: 1px solid var(--line); border-radius: 9px; background: white; box-shadow: 0 2px 8px rgba(23, 34, 28, .035); transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease; }
.ride-card:hover { transform: translateY(-1px); border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.ride-card.selected { border-color: #aacd31; background: #fbfff2; box-shadow: 0 0 0 2px rgba(195, 232, 69, .16); }
.ride-card:focus-visible { outline: 3px solid rgba(47, 120, 211, .28); outline-offset: 2px; }
.driver-active-ride { border-color: #8fb2df; background: linear-gradient(180deg, #f8fbff, #fff); box-shadow: 0 0 0 2px rgba(47, 120, 211, .1), var(--shadow-sm); }
.driver-active-ride::before { content: "Viaje activo"; display: inline-flex; margin: -7px 0 10px; padding: 4px 8px; border-radius: 999px; color: #215c9f; background: #e1efff; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.ride-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.ride-meta strong { font-size: 12px; }
.ride-meta time { color: var(--muted); font-size: 11px; }
.status-label { display: inline-flex; align-items: center; gap: 5px; color: #487100; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.status-label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--signal-strong); }
.status-label[data-state="solicitado"], .status-label[data-state="aceptado"] { color: #9a6a00; }
.status-label[data-state="solicitado"]::before, .status-label[data-state="aceptado"]::before { background: #e3b341; }
.status-label[data-state="rechazado"] { color: #a43f2f; }
.status-label[data-state="rechazado"]::before { background: var(--coral); }
.status-label[data-state="en_curso"], .status-label[data-state="en_viaje"], .status-label[data-state="en_camino"] { color: var(--blue); }
.status-label[data-state="en_curso"]::before, .status-label[data-state="en_viaje"]::before, .status-label[data-state="en_camino"]::before { background: var(--blue); }
.status-label[data-state="completado"] { color: #3c6a25; }
.status-label[data-state="completado"]::before { background: #6fa73c; }
.status-label[data-state="en_destino"] { color: #7654a5; }
.status-label[data-state="en_destino"]::before { background: #8c6dc1; }
.ride-route { position: relative; display: grid; gap: 13px; padding-left: 22px; }
.ride-route::before { content: ""; position: absolute; top: 9px; bottom: 9px; left: 5px; border-left: 1px dashed #aeb7b0; }
.route-point { position: relative; display: grid; gap: 2px; }
.route-point::before { content: ""; position: absolute; top: 5px; left: -21px; width: 8px; height: 8px; border: 2px solid white; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.route-point:last-child::before { border-radius: 2px; background: var(--coral); box-shadow: 0 0 0 1px var(--coral); }
.route-point span { color: var(--muted); font-size: 9px; text-transform: uppercase; }
.route-point strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.pickup-list { display: grid; gap: 6px; margin-top: 12px; padding: 9px; border-radius: 6px; background: #f4f6f2; }
.pickup-stop { display: grid; grid-template-columns: 38px minmax(0,1fr) auto; gap: 8px; align-items: start; }
.pickup-stop time { color: var(--blue); font-size: 10px; font-weight: 800; }
.pickup-stop strong, .pickup-stop span { display: block; }
.pickup-stop strong { font-size: 10px; }
.pickup-stop span { color: var(--muted); font-size: 9px; }
.pickup-links { display: flex; gap: 4px; }
.pickup-links a { display: grid; place-items: center; width: 27px; height: 27px; border: 1px solid var(--line); border-radius: 5px; color: var(--ink); background: white; }
.pickup-links svg { width: 14px; }
.ride-passenger { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 15px 0 0; padding-top: 12px; border-top: 1px solid #edf0ec; }
.ride-passenger div { min-width: 0; }
.ride-passenger strong, .ride-passenger span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ride-passenger strong { font-size: 12px; }
.ride-passenger span { color: var(--muted); font-size: 10px; }
.unit-count { flex: 0 0 auto; text-align: right; }
.unit-count strong { font: 800 14px "Manrope", sans-serif; }
.capacity-track { height: 5px; margin-top: 11px; overflow: hidden; border-radius: 3px; background: #e8ece6; }
.capacity-track span { display: block; height: 100%; border-radius: inherit; background: var(--signal-strong); transition: width .25s ease; }
.operation-progress { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 11px; }
.operation-progress div { display: grid; gap: 1px; padding: 7px 4px; border: 1px solid var(--line); border-radius: 5px; text-align: center; }
.operation-progress strong { font-size: 11px; }
.operation-progress span { color: var(--muted); font-size: 8px; text-transform: uppercase; }
.driver-stage { display: grid; gap: 3px; margin-top: 12px; padding: 12px; border: 1px solid #bdd1ea; border-radius: 9px; background: #f1f7ff; }
.driver-stage span { color: #4b6f99; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.driver-stage strong { font: 800 14px "Manrope", sans-serif; }
.driver-stage small { color: var(--muted); font-size: 10px; }
.gps-requirement { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; margin-top: 12px; padding: 10px; border: 1px solid #d8b24a; border-radius: 8px; color: #72580d; background: #fff9df; font-size: 10px; }
.gps-requirement svg { width: 17px; }
.gps-requirement button { min-height: 32px; padding: 6px 9px; border: 1px solid #d8b24a; border-radius: 7px; color: inherit; background: white; font-size: 10px; font-weight: 800; }
.ride-actions button:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.assignment-list { display: grid; gap: 6px; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line); }
.assignment-row { display: grid; grid-template-columns:minmax(0,1fr) auto; gap: 8px; align-items: center; padding: 8px; border-radius: 6px; background: #f4f6f2; }
.assignment-row.late { border: 1px solid #e3b341; background: #fff9df; }
.assignment-row strong, .assignment-row span { display: block; }
.assignment-row strong { font-size: 11px; }
.assignment-row span { color: var(--muted); font-size: 9px; }
.assignment-actions { display: flex; gap: 5px; }
.assignment-actions button { width: 30px; height: 30px; padding: 0; border: 1px solid var(--line); border-radius: 5px; background: white; }
.assignment-actions button[data-approved="true"] { color: #487100; }
.assignment-actions button[data-approved="false"] { color: #a43f2f; }
.assignment-actions button:disabled { opacity: .35; cursor: not-allowed; }
.assignment-waiting { margin-top: 12px; padding: 10px; border: 1px solid #e3b341; border-radius: 6px; color: #795b0a; background: #fff9df; font-size: 11px; font-weight: 700; text-align: center; }
.assignment-waiting.late { border-color: var(--coral); color: #8f3427; background: #fff0ec; }
.ride-actions { display: flex; gap: 7px; margin-top: 13px; }
.ride-actions button { flex: 1; }
.navigation-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 12px; }
.navigation-actions a { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); background: white; font-size: 11px; font-weight: 700; text-decoration: none; }
.navigation-actions svg { width: 16px; }
.early-request-button { width: 100%; margin-top: 10px; }
.early-completion { display: grid; gap: 5px; width: 100%; margin-top: 10px; padding: 11px; border: 1px solid #e3b341; border-radius: 7px; color: #795b0a; background: #fff9df; text-align: left; }
.early-completion strong, .early-completion span { display: block; }
.early-completion strong { font-size: 12px; }
.early-completion span { font-size: 10px; }
.early-completion > div { display: flex; gap: 7px; margin-top: 5px; }
.early-completion > div > * { flex: 1; }
.panel-message { display: grid; justify-items: center; gap: 10px; padding: 60px 24px; color: var(--muted); text-align: center; }
.panel-message p { max-width: 240px; margin: 0; font-size: 12px; }
.panel-message svg { width: 28px; }
.spinner { width: 22px; height: 22px; border: 2px solid var(--line); border-top-color: var(--ink); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.taxi-marker { display: grid; place-items: center; width: 34px !important; height: 34px !important; border: 3px solid white; border-radius: 50%; color: white; background: var(--ink); box-shadow: 0 5px 14px rgba(24, 33, 28, .28); font: 800 9px "Manrope", sans-serif; }
.taxi-marker.demo { opacity: .55; background: #657068; }
.taxi-marker.stale { opacity: .65; background: #9c533f; }
.place-marker { width: 18px !important; height: 18px !important; border: 4px solid white; border-radius: 50%; box-shadow: 0 2px 7px rgba(24, 33, 28, .3); }
.place-marker.origin { background: var(--blue); }
.place-marker.destination { border-radius: 4px; background: var(--coral); }

.fleet-view { height: calc(100% - 90px); overflow: auto; padding: 30px; background: linear-gradient(145deg, #f4f7f2, #e9eee8); }
.fleet-heading { margin-bottom: 22px; }
.fleet-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 13px; }
.driver-card { display: grid; grid-template-columns: 44px 1fr auto; gap: 13px; align-items: center; padding: 18px; border: 1px solid var(--line); border-radius: 10px; background: white; box-shadow: 0 3px 12px rgba(23, 34, 28, .05); transition: transform .16s ease, box-shadow .16s ease; }
.driver-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.driver-avatar { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: white; background: linear-gradient(145deg, var(--ink-soft), #111914); box-shadow: 0 5px 14px rgba(23, 34, 28, .18); font-weight: 800; }
.driver-card strong, .driver-card span { display: block; }
.driver-card span { color: var(--muted); font-size: 11px; }
.driver-state { color: #487100 !important; font-size: 9px !important; font-weight: 800; text-transform: uppercase; }
.driver-state.busy { color: #b84b34 !important; }

dialog { z-index: 3000; width: min(580px, calc(100% - 24px)); max-height: calc(100% - 30px); padding: 0; overflow: auto; isolation: isolate; border: 1px solid rgba(255, 255, 255, .4); border-radius: 12px; color: var(--ink); background: white; box-shadow: var(--shadow-lg); }
dialog::backdrop { background: rgba(17, 25, 20, .64); backdrop-filter: blur(5px); }
#rideForm { padding: 24px; }
#scheduleForm { display: grid; gap: 12px; padding: 24px; }
.schedule-text { display: grid; gap: 6px; color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.schedule-text textarea { width: 100%; padding: 11px; border: 1px solid var(--line); border-radius: 7px; font-size: 13px; resize: vertical; text-transform: none; }
.schedule-locations { display: grid; gap: 8px; }
.schedule-location { padding: 11px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-soft); }
.schedule-location strong, .schedule-location span { display: block; }
.schedule-location strong { font-size: 11px; }
.schedule-location span { color: var(--muted); font-size: 10px; }
.coordinate-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 8px; }
.coordinate-fields input { width: 100%; min-height: 38px; padding: 8px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; }
.dialog-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 21px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.form-grid .wide { grid-column: 1 / -1; }
.form-grid textarea { resize: vertical; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 21px; padding-top: 17px; border-top: 1px solid var(--line); }
.login-dialog { width: min(430px, calc(100% - 28px)); }
.login-dialog[open], .passenger-sheet[open] { animation: sheet-in .24s ease-out; }
.login-dialog form { display: grid; gap: 17px; padding: 30px; }
.login-dialog h2 { margin: -7px 0 0; max-width: 340px; font: 800 30px/1.08 "Manrope", sans-serif; letter-spacing: -.045em; }
.login-intro { margin: -5px 0 2px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.login-dialog label { display: grid; gap: 7px; color: var(--muted); font-size: 12px; font-weight: 700; }
.login-dialog input { width: 100%; min-height: 48px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 12px; font-size: 16px; }
.login-mark { display: flex; align-items: center; gap: 10px; font: 800 18px "Manrope", sans-serif; letter-spacing: -.025em; }
.login-mark img { width: 40px; height: 40px; }
.passenger-entry { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 13px; width: 100%; min-height: 74px; padding: 15px 17px; border: 1px solid #9fcf16; border-radius: 18px; color: var(--ink); background: var(--signal); box-shadow: 0 8px 22px rgba(159, 207, 22, .18); text-align: left; }
.passenger-entry:hover { background: var(--signal-strong); box-shadow: 0 12px 26px rgba(159, 207, 22, .24); }
.passenger-entry > svg { flex: 0 0 auto; width: 25px; }
.passenger-entry > svg:last-child { width: 19px; }
.passenger-entry span, .passenger-entry strong, .passenger-entry small { display: block; }
.passenger-entry strong { font-size: 16px; }
.passenger-entry small { margin-top: 3px; color: #43522f; font-size: 12px; }
.operator-access { border-top: 1px solid var(--line); padding-top: 5px; }
.operator-access summary { display: grid; grid-template-columns: auto 1fr auto; gap: 9px; align-items: center; min-height: 44px; color: var(--muted); cursor: pointer; font-size: 12px; font-weight: 700; list-style: none; }
.operator-access summary::-webkit-details-marker { display: none; }
.operator-access summary svg { width: 17px; }
.operator-access[open] summary svg:last-child { transform: rotate(180deg); }
.operator-fields { display: grid; gap: 12px; padding-top: 10px; }
.access-help { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
body.public-entry, body.passenger-mode { overflow: hidden; }
body.public-entry .sidebar, body.passenger-mode .sidebar,
body.public-entry .topbar, body.passenger-mode .topbar,
body.public-entry .dispatch-panel, body.passenger-mode .dispatch-panel,
body.public-entry .mobile-nav, body.passenger-mode .mobile-nav { display: none; }
body.public-entry .app-shell, body.passenger-mode .app-shell { display: block; height: 100dvh; }
body.public-entry .workspace, body.passenger-mode .workspace { height: 100dvh; min-height: 0; padding: 0; }
body.public-entry .operations-layout, body.passenger-mode .operations-layout { display: block; height: 100dvh; }
body.public-entry .map-region, body.passenger-mode .map-region { width: 100%; height: 100dvh; min-height: 0; }
body.public-entry .map-status, body.passenger-mode .map-status { top: 16px; right: 16px; left: auto; }
body[data-role] .workspace { animation: workspace-in .2s ease-out; }
body[data-role="dispatcher"] { --panel-accent: var(--signal); }
body[data-role="driver"] { --panel-accent: #d7e7ff; }
body[data-role="customer"] { --panel-accent: #eee4ff; }
body[data-role] #workspaceEyebrow { color: var(--ink); }
body[data-role] .panel-heading { border-top: 4px solid var(--panel-accent); }
body[data-role="driver"] .driver-selector { background: #eef5ff; }
body[data-role="customer"] .dispatch-panel { background: #fbf9ff; }
.public-sheet { position: fixed; z-index: 3100; inset: auto auto 22px 22px; width: min(390px, calc(100% - 44px)); max-height: min(62dvh, 570px); margin: 0; border-radius: 22px; }
#passengerDialog { position: fixed; z-index: 3100; inset: auto 22px 22px auto; width: min(430px, calc(100% - 44px)); height: min(66dvh, 650px); max-height: calc(100dvh - 44px); margin: 0; overflow: hidden; border-radius: 24px; }
@keyframes workspace-in { from { opacity: .4; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
#passengerForm { height: 100%; padding: 18px 22px 24px; overflow-y: auto; }
#passengerForm > .form-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
#passengerForm > .dialog-actions { position: sticky; bottom: -24px; z-index: 5; margin-inline: -22px; padding: 15px 22px 24px; background: rgba(255, 255, 255, .97); backdrop-filter: blur(12px); }
.sheet-handle { width: 44px; height: 5px; margin: 0 auto 14px; border-radius: 5px; background: var(--line-strong); }
.location-field { position: relative; }
.location-field::before { content: ""; position: absolute; z-index: 2; left: 13px; bottom: 18px; width: 9px; height: 9px; border: 2px solid white; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.location-field.destination-field::before { border-radius: 3px; background: var(--coral); box-shadow: 0 0 0 1px var(--coral); }
.location-field input { padding-left: 36px; }
.location-field > small, .location-field label > small { display: block; margin-top: 6px; color: var(--muted); font-size: 11px; font-weight: 600; line-height: 1.35; }
.origin-field > small { padding-left: 2px; }
.destination-composer { display: grid; gap: 9px; padding: 12px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface-soft); }
.destination-composer::before { bottom: auto; top: 39px; left: 24px; }
.destination-composer .place-search input { background: white; }
.destination-preset { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; }
.destination-preset span { color: var(--muted); font-size: 11px; font-weight: 700; white-space: nowrap; }
.destination-preset select { min-height: 40px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: white; font-size: 13px; }
.passenger-notes { border: 1px solid var(--line); border-radius: 12px; background: white; }
.passenger-notes summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 10px 12px; cursor: pointer; color: var(--ink); font-size: 13px; font-weight: 800; list-style: none; }
.passenger-notes summary::-webkit-details-marker { display: none; }
.passenger-notes summary svg { width: 17px; transition: transform .15s ease; }
.passenger-notes[open] summary svg { transform: rotate(180deg); }
.passenger-notes label { padding: 0 12px 12px; }
.passenger-location-fallback[hidden], .passenger-destination-tools[hidden] { display: none !important; }
.location-consent { display: grid; gap: 10px; padding: 12px; border: 1px solid #b9cce8; border-radius: 12px; background: #f3f7fd; }
.location-consent > div:first-child { display: flex; align-items: flex-start; gap: 9px; }
.location-consent > div:first-child > svg { flex: 0 0 auto; width: 19px; color: var(--blue); }
.location-consent p, .location-consent strong, .location-consent small { display: block; margin: 0; }
.location-consent strong { font-size: 12px; }
.location-consent small { margin-top: 3px; color: var(--muted); font-size: 10px; line-height: 1.4; }
.location-consent.granted { border-color: #a8c36d; background: #f5f9ec; }
@keyframes sheet-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
.passenger-help { max-width: 760px; margin: -8px 0 18px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.point-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.point-actions span { color: var(--muted); font-size: 11px; }
.point-actions .external-search { color: var(--ink); text-decoration: none; }
.place-search { position: relative; }
.place-search > label { display: grid; gap: 6px; color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.place-suggestions { position: absolute; z-index: 1200; top: calc(100% + 5px); right: 0; left: 0; max-height: 250px; overflow-y: auto; border: 1px solid var(--line); border-radius: 7px; background: white; box-shadow: var(--shadow); }
.place-suggestion { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; width: 100%; padding: 10px; border: 0; border-bottom: 1px solid var(--line); color: var(--ink); background: white; text-align: left; }
.place-suggestion:last-child { border-bottom: 0; }
.place-suggestion:hover, .place-suggestion.active { background: #f2f6e7; }
.place-suggestion svg { width: 17px; margin-top: 2px; }
.place-suggestion strong, .place-suggestion small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.place-suggestion strong { font-size: 12px; }
.place-suggestion small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.place-searching { display: flex; align-items: center; gap: 8px; padding: 12px; color: var(--muted); font-size: 11px; }
.place-searching .spinner { width: 16px; height: 16px; }
.passenger-route-preview { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px; border-radius: 8px; color: white; background: var(--ink); }
.passenger-route-preview div { display: grid; gap: 2px; }
.passenger-route-preview div span { color: #abb6af; font-size: 9px; text-transform: uppercase; }
.passenger-route-preview strong { font: 700 17px "Manrope", sans-serif; }
.passenger-route-preview a { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 8px 10px; border-radius: 6px; color: var(--ink); background: var(--signal); font-size: 11px; font-weight: 800; text-decoration: none; }
.passenger-route-preview a svg { width: 16px; }
.passenger-map-hint { margin: -5px 0 0; color: var(--muted); font-size: 11px; line-height: 1.4; }
.passenger-history { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.passenger-history > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.passenger-history > div:first-child button { min-height: 32px; padding: 6px 9px; font-size: 10px; }
.passenger-history-list, #passengerHistoryList { display: grid; gap: 6px; }
.passenger-history article { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--canvas); }
.passenger-history article div { min-width: 0; }
.passenger-history article strong, .passenger-history article span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.passenger-history article strong { font-size: 10px; }
.passenger-history article div span { color: var(--muted); font-size: 9px; }
.passenger-status-card { display: grid; justify-items: stretch; align-content: start; gap: 14px; height: 100%; padding: 18px 22px 24px; overflow-y: auto; text-align: left; }
.passenger-status-card .login-mark { justify-content: center; }
.passenger-status-card > .eyebrow, .passenger-status-card > h2, .passenger-status-card > .spinner, .passenger-status-card > p { justify-self: center; text-align: center; }
.passenger-status-card h2, .passenger-status-card p { margin: 0; }
.passenger-status-card p { max-width: 620px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.passenger-status-card .dialog-actions { position: sticky; bottom: -24px; z-index: 500; width: calc(100% + 44px); margin: 0 -22px -24px; padding: 15px 22px 24px; background: rgba(255, 255, 255, .97); backdrop-filter: blur(12px); }
.passenger-progress { display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; }
.passenger-progress div { position: relative; display: grid; gap: 4px; justify-items: center; color: var(--muted); }
.passenger-progress div::before { content: ""; position: absolute; z-index: 0; top: 12px; right: 50%; left: -50%; border-top: 2px solid var(--line); }
.passenger-progress div:first-child::before { display: none; }
.passenger-progress span { z-index: 1; display: grid; place-items: center; width: 25px; height: 25px; border: 2px solid var(--line); border-radius: 50%; background: white; font-size: 10px; font-weight: 800; }
.passenger-progress small { font-size: 9px; }
.passenger-progress div.active { color: #487100; }
.passenger-progress div.active span { border-color: var(--signal-strong); background: var(--signal); }
.passenger-progress div.active::before { border-color: var(--signal-strong); }
.passenger-progress div.current span { color: white; border-color: var(--blue); background: var(--blue); box-shadow: 0 0 0 5px rgba(47, 120, 211, .12); }
.passenger-progress div.current small { color: var(--blue); font-weight: 800; }
.passenger-cancellation-note { display: flex !important; align-items: center; gap: 8px; width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); background: var(--surface-soft); font-size: 10px !important; text-align: left !important; }
.passenger-cancellation-note[hidden] { display: none !important; }
.passenger-cancellation-note svg { flex: 0 0 auto; width: 17px; color: #527634; }
.passenger-route-card { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: 8px; align-items: center; width: 100%; padding: 12px; border: 1px solid var(--line); border-radius: 7px; text-align: left; }
.passenger-route-card div { min-width: 0; }
.passenger-route-card span, .passenger-route-card strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.passenger-route-card span { color: var(--muted); font-size: 9px; text-transform: uppercase; }
.passenger-route-card strong { font-size: 11px; }
.passenger-route-card svg { width: 17px; color: var(--muted); }
.passenger-driver { display: grid; gap: 3px; width: min(100%, 900px); padding: 14px; border: 1px solid var(--line); border-radius: 7px; background: var(--canvas); }
.passenger-driver span { color: var(--muted); font-size: 12px; }
.passenger-status-location { width: min(100%, 900px); overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--canvas); text-align: left; }
.passenger-location-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; }
.passenger-location-heading > div { display: flex; align-items: center; gap: 8px; }
.passenger-location-heading strong { font-size: 12px; }
.passenger-location-heading small { color: var(--muted); font-size: 10px; }
.passenger-status-map { width: 100%; height: clamp(260px, 42vh, 480px); border-top: 1px solid var(--line); background: #dce1db; }
.driver-map-marker { display: grid; place-items: center; width: 38px !important; height: 38px !important; border: 3px solid white; border-radius: 50%; color: white; background: var(--ink); box-shadow: 0 6px 16px rgba(23, 34, 28, .3); font: 800 10px "Manrope", sans-serif; }
.driver-map-marker span { display: block; }
.passenger-navigation { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: min(100%, 900px); }
.passenger-navigation a { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; border-radius: 6px; color: var(--ink); background: var(--signal); font-size: 12px; font-weight: 800; text-decoration: none; }
.passenger-navigation svg { width: 17px; }
.reason-dialog { width: min(500px, calc(100% - 24px)); }
.reason-dialog form { display: grid; gap: 14px; padding: 24px; }
.reason-dialog label { display: grid; gap: 7px; color: var(--muted); font-size: 12px; font-weight: 700; }
.reason-dialog textarea { width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; resize: vertical; font-size: 15px; }
.reason-help { margin: -8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.map-picker-dialog, .live-map-dialog { width: min(760px, calc(100% - 20px)); }
.map-picker-shell, .live-map-shell { padding: 20px; }
.map-picker { height: min(62vh, 520px); min-height: 340px; border: 1px solid var(--line); border-radius: 8px; background: #dce1db; }
.map-picker-coordinate { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; padding: 10px; border-radius: 7px; color: var(--ink); background: var(--canvas); font-size: 12px; }
.map-picker-coordinate svg { width: 17px; }
.map-picker-marker { display: grid; place-items: center; width: 40px !important; height: 40px !important; border: 4px solid white; border-radius: 50% 50% 50% 0; color: white; background: var(--blue); box-shadow: 0 7px 18px rgba(24, 33, 28, .3); transform: rotate(-45deg); }
.map-picker-marker span { transform: rotate(45deg); font-size: 15px; }
.live-map { height: min(58vh, 500px); min-height: 320px; border: 1px solid var(--line); border-radius: 8px; background: #dce1db; }
.live-location-summary { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: center; margin-top: 12px; padding: 12px; border-radius: 7px; background: var(--canvas); }
.live-location-summary > div { display: flex; align-items: center; gap: 8px; min-width: 0; }
.live-location-summary p, .live-location-summary strong, .live-location-summary small { display: block; margin: 0; }
.live-location-summary small { color: var(--muted); font-size: 10px; }
.live-person { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%; }
.live-person.passenger { background: var(--blue); }
.live-person.driver { border: 2px solid var(--ink); background: var(--signal); }
.live-privacy { margin: 10px 0 0; color: var(--muted); font-size: 10px; line-height: 1.4; }
.chat-dialog { width: min(520px, calc(100% - 20px)); }
.chat-shell { padding: 20px; }
.chat-messages { display: flex; flex-direction: column; gap: 8px; height: min(52vh, 430px); min-height: 260px; padding: 12px; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--canvas); }
.chat-empty { margin: auto; color: var(--muted); font-size: 12px; text-align: center; }
.chat-message { align-self: flex-start; max-width: 82%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 12px 12px 12px 3px; background: white; }
.chat-message.own { align-self: flex-end; border-color: #afd22e; border-radius: 12px 12px 3px 12px; background: var(--signal-soft); }
.chat-message span, .chat-message time { display: block; }
.chat-message span { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; }
.chat-message time { margin-top: 4px; color: var(--muted); font-size: 9px; text-align: right; }
.chat-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-top: 10px; }
.chat-form textarea { min-height: 48px; padding: 10px 12px; resize: none; border: 1px solid var(--line); border-radius: 10px; }
.chat-privacy { margin: 8px 0 0; color: var(--muted); font-size: 10px; text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.form-error { margin: 0; color: #a43f2f; font-size: 12px; }
.toast { position: fixed; z-index: 1000; right: 20px; bottom: 20px; max-width: 330px; padding: 12px 15px; border-radius: 7px; color: white; background: var(--ink); box-shadow: var(--shadow); font-size: 12px; }
.toast.error { background: #a43f2f; }
.mobile-nav { display: none; }

@media (max-width: 1100px) {
  .operations-layout { grid-template-columns: minmax(0, 1fr) 360px; }
  .topbar { padding-inline: 20px; }
}

@media (max-width: 900px) {
  body { overflow: auto; }
  body.public-entry, body.passenger-mode { overflow: hidden; }
  .app-shell { display: block; min-height: 100%; }
  .sidebar { display: none; }
  .workspace { height: auto; min-height: 100vh; padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
  .topbar { position: sticky; z-index: 700; top: 0; height: 76px; padding: 10px 15px; }
  .public-sheet { inset: auto 12px 12px; width: auto; max-height: 54dvh; border-radius: 22px; }
  .public-sheet form { padding: 20px; gap: 13px; }
  .public-sheet h2 { font-size: 26px; }
  .topbar h1 { font-size: 18px; }
  .topbar-actions { gap: 6px; }
  .profile-badge { max-width: 130px; }
  .profile-badge span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .primary-button#newRideButton { display: none; }
  .operations-layout { display: flex; flex-direction: column; height: auto; }
  .map-region { height: 44vh; min-height: 310px; }
  .dispatch-panel { overflow: visible; border: 0; }
  .panel-heading { position: relative; padding: 18px 16px; }
  .driver-selector { padding-inline: 16px; }
  .ride-list { gap: 9px; padding: 9px 9px 76px; }
  .ride-card { padding-left: 16px; padding-right: 16px; }
  .route-summary { left: 10px; right: 10px; bottom: 10px; gap: 8px; padding: 12px; }
  .route-summary span { font-size: 9px; }
  .route-summary strong { font-size: 14px; }
  .route-summary a span { display: none; }
  .fleet-view { height: auto; padding: 21px 14px; }
  .mobile-nav { position: fixed; z-index: 800; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); height: calc(62px + env(safe-area-inset-bottom)); padding: 5px 10px env(safe-area-inset-bottom); border-top: 1px solid var(--line); background: rgba(255, 255, 255, .95); box-shadow: 0 -8px 24px rgba(23, 34, 28, .08); backdrop-filter: blur(12px); }
  body[data-role="dispatcher"] .mobile-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mobile-nav button { display: grid; gap: 2px; place-items: center; border: 0; border-radius: 10px; color: var(--muted); background: transparent; font-size: 11px; font-weight: 700; }
  .mobile-nav button.active { color: var(--ink); background: color-mix(in srgb, var(--panel-accent, var(--signal)) 55%, white); }
  .mobile-nav svg { width: 20px; }
  .toast { right: 12px; bottom: calc(74px + env(safe-area-inset-bottom)); left: 12px; max-width: none; }
  #passengerDialog { inset: auto 0 0; width: 100%; height: 62dvh; max-height: 62dvh; border: 0; border-radius: 24px 24px 0 0; }
  body.public-entry .leaflet-bottom { bottom: 54dvh; }
  body.passenger-mode .leaflet-bottom { bottom: 62dvh; }
}

@media (max-width: 560px) {
  .topbar .eyebrow, .profile-badge { display: none; }
  .topbar { padding-inline: 12px; }
  .topbar-actions .secondary-button span { display: none; }
  .form-grid, #passengerForm > .form-grid { grid-template-columns: 1fr; }
  .form-grid .wide { grid-column: auto; }
  #passengerForm, .passenger-status-card { padding: 16px 16px 20px; }
  #passengerForm > .dialog-actions, .passenger-status-card .dialog-actions { bottom: -20px; margin-inline: -16px; margin-bottom: -20px; padding: 14px 16px calc(18px + env(safe-area-inset-bottom)); width: calc(100% + 32px); }
  .destination-preset { grid-template-columns: 1fr; gap: 5px; }
  .destination-preset span { white-space: normal; }
  .passenger-status-map { height: 28vh; min-height: 190px; }
  .passenger-location-heading { align-items: flex-start; flex-direction: column; }
  .dialog-actions > * { flex: 1; }
  .operations-summary span { font-size: 7px; }
  .route-summary { grid-template-columns: 1fr 1fr auto auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; }
}