/* ── v7.1 polish layer: loaded last. Accessibility, touch comfort, calmer motion, mobile header, tidier surfaces. ── */

/* Use the real cursor: a hidden system cursor hurts usability (and breaks if scripts fail). */
body { cursor: auto !important; }
#cursor-dot, #cursor-ring { display: none !important; }

/* Focus is always visible for keyboard users */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--tl); outline-offset: 2px; border-radius: var(--rS); }
:where(button, a, select, input) { -webkit-tap-highlight-color: transparent; }

/* Touch comfort: 44px targets, and 16px inputs so iOS does not zoom */
.btn { min-height: 44px; }
.btn-sm { min-height: 36px; }
@media (pointer: coarse) { .btn-sm { min-height: 40px; } .filter-btn, .sidebar-link { min-height: 44px; } }
@media (max-width: 768px) { .form-input, .form-select, .form-textarea { font-size: 16px; } }

/* Surfaces: soft depth, gentle lift on interactive cards */
.card, .table-card, .kpi-card { border: 1px solid var(--bd); border-radius: var(--rL); box-shadow: var(--sS); }
.card, .kpi-card { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
@media (hover: hover) { .kpi-card:hover, .svc-card:hover { transform: translateY(-2px); box-shadow: var(--sM); border-color: var(--bd2); } }

/* Buttons: consistent press feedback */
.btn { transition: transform .12s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease; }
.btn:active:not(:disabled) { transform: translateY(1px) scale(.99); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-primary { box-shadow: 0 6px 18px rgba(226,164,0,.22); }

/* Tables: sticky header, tidy rows, never break the page width */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.data-table thead th { position: sticky; top: 0; background: var(--bg2); z-index: 1; }
.data-table tbody tr { transition: background .15s ease; }
.data-table tbody tr:hover { background: var(--gl2); }
.data-table td, .data-table th { padding-block: 12px; }

/* Toasts and modals sit above the Emergency button and respect the notch */
.modal-box { max-height: min(88vh, 900px); overflow-y: auto; border-radius: var(--rL); }
@media (max-width: 640px) { .modal-box { width: calc(100vw - 24px); } }

/* Mobile header: nothing is cut off */
@media (max-width: 640px) {
  .nav-right { gap: 5px; }
  .nav-select { max-width: 76px; width: auto; padding: 6px 4px; font-size: .72rem; min-height: 36px; }
  .theme-btn { width: 36px; height: 36px; }
  .socket-status { display: none; }
}
@media (max-width: 380px) { .nav-select { max-width: 66px; } .nav-right .btn-sm { padding-inline: 8px; } }

/* Emergency button: compact circle on phones so it never hides content */
.sos-btn { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 640px) {
  .sos-btn { width: 52px; height: 52px; min-width: 52px; padding: 0; justify-content: center; font-size: 1.25rem; inset-block-end: calc(14px + env(safe-area-inset-bottom)); inset-inline-end: 12px; }
  .sos-btn .sos-txt { display: none; }
}
footer { padding-bottom: 72px; }
.page { padding-bottom: env(safe-area-inset-bottom); }

/* Page-level breathing room on small screens */
@media (max-width: 480px) { .container { padding-inline: 16px; } .section { padding-block: 64px; } }

/* Home: hero stats wrap cleanly instead of overflowing */
.hero-stats { flex-wrap: wrap; justify-content: center; row-gap: 18px; }
@media (max-width: 480px) { .hero-stats { gap: 20px 28px; } .stat-num { font-size: 1.7rem; } }

/* Status badges read at a glance */
.badge { border-radius: 999px; font-weight: 700; letter-spacing: .02em; }

/* Calmer motion for people who ask for it */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }

/* Light theme: keep borders and shadows visible on white */
body.light-mode .card, body.light-mode .table-card, body.light-mode .kpi-card { box-shadow: 0 1px 3px rgba(12, 21, 38, .08), 0 8px 24px rgba(12, 21, 38, .05); }
body.light-mode .data-table thead th { background: var(--bg3); }

/* Print: receipts and reports print cleanly */
@media print { nav, .sos-btn, .sidebar, #toast-container, .hamburger { display: none !important; } body { background: #fff; color: #000; } }

/* ── Map booking (v8) ───────────────────────────────── */
.book-map{height:340px;border-radius:var(--r,14px);border:1px solid var(--bd,rgba(127,127,127,.25));overflow:hidden;z-index:0;background:#e8eef0}
.map-wrap{display:flex;flex-direction:column;gap:8px}
.map-tools{gap:8px;flex-wrap:wrap}
.map-dot,.map-pin{display:inline-flex;align-items:center;justify-content:center;font-weight:800;color:#fff;font-size:.8rem}
.map-dot{width:20px;height:20px;border-radius:50%}
.map-pin{width:30px;height:30px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);box-shadow:0 2px 6px rgba(0,0,0,.35);border:2px solid #fff}
.map-pin>*{transform:rotate(45deg)}
.map-pin-a{background:#0E7A45}.map-pin-b{background:#d9480f}
.map-pin-car{width:34px;height:34px;border-radius:50%;transform:none;background:#fff;color:#000;font-size:1.2rem;border:2px solid #0E7A45}
.geo-field{position:relative}
.geo-input{display:flex;gap:8px;align-items:stretch;flex-wrap:wrap}
.geo-input .form-input{flex:1 1 220px;min-width:0}
.geo-sg{position:absolute;z-index:1000;inset-inline:0;top:100%;margin:2px 0 0;padding:4px;list-style:none;background:var(--bg-card,#fff);color:var(--tx,#111);border:1px solid var(--bd,rgba(127,127,127,.3));border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.18);max-height:260px;overflow:auto}
.geo-sg[hidden]{display:none}
.geo-opt{display:flex;width:100%;justify-content:space-between;gap:10px;text-align:start;background:none;border:0;color:inherit;padding:10px 12px;border-radius:8px;cursor:pointer;font:inherit}
.geo-opt:hover,.geo-opt:focus{background:rgba(10,143,127,.12);outline:none}
.geo-opt small{opacity:.65;white-space:nowrap}
.geo-none{padding:10px 12px;opacity:.7;font-size:.9rem}
.geo-chips{display:flex;gap:6px;flex-wrap:wrap}
.geo-chips:empty{display:none}
.geo-chip{border:1px solid var(--bd,rgba(127,127,127,.3));background:transparent;color:inherit;border-radius:999px;padding:4px 12px;font-size:.85rem;cursor:pointer}
.geo-chip:hover{background:rgba(10,143,127,.12)}
.route-summary{display:flex;gap:6px 16px;flex-wrap:wrap;align-items:center}
.track-map{height:260px;border-radius:12px;border:1px solid var(--bd,rgba(127,127,127,.25));overflow:hidden;margin:10px 0}
.accept-bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
@media(max-width:600px){.book-map{height:300px}.geo-input .btn{width:100%}}

/* profile pictures */
.avatar-img,.avatar-fb{border-radius:50%;object-fit:cover;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}
.avatar-fb{background:linear-gradient(135deg,var(--tl),var(--bl));color:var(--bg0);font-weight:800}
.avatar-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.who{display:flex;align-items:center;gap:10px}
.steps-list{list-style:none;padding:0;margin:0}.steps-list li{display:flex;gap:8px;align-items:center;padding:6px 0}
.app-banner{border-radius:12px;padding:14px 16px;margin-bottom:16px;display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}