/* GO Tracker — soft-UI (neumorphic). Light + Dark themes, neon-orange accent.
   Hover = lit orange rim. Press = sinks in. Shadows are bold for clear depth. */
:root{
  /* ---- LIGHT (default) ---- */
  --bg:#E6E9EF; --well:#DBE0E8; --line:#C7D0DB;
  --sd:rgba(146,160,180,.72); --sl:rgba(255,255,255,.96);
  --ink:#1A222D; --ink-2:#38434F; --ink-3:#5B6775;
  --accent:#FF6A1A; --accent-ink:#2A1204; --accent-soft:#FFE1CE;
  --ok:#17663A; --ok-bg:#D3E8D9; --warn:#8A5A00; --warn-bg:#F0E1C0;
  --crit:#A3211A; --crit-bg:#F6D7D3; --crit-ink:#FFFFFF;
  --scrim:rgba(23,32,43,.30);
  color-scheme:light;

  --font-display:'Sora','Segoe UI',system-ui,sans-serif;
  --font-body:'IBM Plex Sans','Segoe UI',system-ui,-apple-system,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  --r-lg:20px; --r-md:14px; --r-sm:10px;
  --raise:8px 8px 16px var(--sd),-8px -8px 16px var(--sl);
  --raise-sm:4px 4px 9px var(--sd),-4px -4px 9px var(--sl);
  --raise-xs:2px 2px 5px var(--sd),-2px -2px 5px var(--sl);
  --inset:inset 5px 5px 10px var(--sd),inset -5px -5px 10px var(--sl);
  --inset-sm:inset 3px 3px 6px var(--sd),inset -3px -3px 6px var(--sl);
  --rim:inset 0 0 0 1.6px var(--accent);
  --ease:150ms cubic-bezier(.3,.7,.4,1);
  --safe-b:env(safe-area-inset-bottom,0px);
}
/* ---- DARK ---- */
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#1B1E23; --well:#15171B; --line:#2C323A;
  --sd:rgba(0,0,0,.72); --sl:rgba(96,108,124,.18);
  --ink:#F3F6FA; --ink-2:#C4CBD5; --ink-3:#8A929E;
  --accent:#FF6A1A; --accent-ink:#1A0D02; --accent-soft:#3A2412;
  --ok:#35D08A; --ok-bg:#122A1E; --warn:#FFB020; --warn-bg:#2E2512;
  --crit:#FF5B52; --crit-bg:#331614; --crit-ink:#FFFFFF;
  --scrim:rgba(0,0,0,.62); color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#1B1E23; --well:#15171B; --line:#2C323A;
  --sd:rgba(0,0,0,.72); --sl:rgba(96,108,124,.18);
  --ink:#F3F6FA; --ink-2:#C4CBD5; --ink-3:#8A929E;
  --accent:#FF6A1A; --accent-ink:#1A0D02; --accent-soft:#3A2412;
  --ok:#35D08A; --ok-bg:#122A1E; --warn:#FFB020; --warn-bg:#2E2512;
  --crit:#FF5B52; --crit-bg:#331614; --crit-ink:#FFFFFF;
  --scrim:rgba(0,0,0,.62); color-scheme:dark;
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%}
body{font-family:var(--font-body);background:var(--bg);color:var(--ink);overflow:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3{font-family:var(--font-display);margin:0;letter-spacing:-.01em;text-wrap:balance}
h2{font-size:20px;font-weight:700}
h3{font-size:12px;font-weight:800;color:var(--ink-3);text-transform:uppercase;letter-spacing:.08em}
p{margin:0}
a{color:var(--accent)}
.muted{color:var(--ink-3)}
.small{font-size:13px}
.tiny{font-size:12px}
.mono{font-family:var(--font-mono)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}

/* ---------- Controls ---------- */
button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 18px;border:0;border-radius:12px;background:var(--bg);box-shadow:var(--raise-sm);font-family:var(--font-body);font-weight:700;font-size:14.5px;color:var(--ink);cursor:pointer;transition:box-shadow var(--ease),color var(--ease),filter var(--ease);white-space:nowrap}
button:hover{box-shadow:var(--raise-sm),var(--rim)}
button:active{box-shadow:var(--inset)}
button:disabled{opacity:.5;cursor:not-allowed;box-shadow:var(--raise-sm)}
button.small{min-height:36px;padding:0 14px;font-size:13px;border-radius:10px}
button.wide{width:100%;margin-top:12px}
button.ghost{background:transparent;box-shadow:none;color:var(--ink-3)}
button.ghost:hover{box-shadow:var(--rim);color:var(--ink-2)}
button.ghost:active{box-shadow:var(--inset-sm)}

input,textarea,select{width:100%;min-height:46px;border:0;border-radius:12px;background:var(--well);box-shadow:var(--inset-sm);padding:11px 14px;color:var(--ink);font-family:var(--font-body);font:inherit;outline:none}
textarea{min-height:92px;resize:vertical}
input::placeholder,textarea::placeholder{color:var(--ink-3)}
select option{background:var(--bg);color:var(--ink)}
input[type=checkbox]{width:auto;min-height:auto;box-shadow:none;background:transparent;accent-color:var(--accent);transform:scale(1.2)}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;min-height:auto;height:28px;background:transparent;box-shadow:none;padding:0}
input[type=range]::-webkit-slider-runnable-track{height:10px;border-radius:999px;background:var(--well);box-shadow:var(--inset-sm)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;margin-top:-7px;border-radius:50%;background:var(--accent);box-shadow:var(--raise-xs);border:0;cursor:pointer}
input[type=range]::-moz-range-track{height:10px;border-radius:999px;background:var(--well)}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--accent);box-shadow:var(--raise-xs);border:0;cursor:pointer}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);background-position:calc(100% - 18px) 20px,calc(100% - 13px) 20px;background-size:5px 5px;background-repeat:no-repeat;padding-right:34px}

/* ---------- Login ---------- */
.overlay{position:fixed;inset:0;display:grid;place-items:center;background:var(--bg);z-index:50;padding:20px}
.card{background:var(--bg);border-radius:var(--r-lg);box-shadow:var(--raise);padding:28px;width:min(360px,92vw)}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--font-display);font-size:23px;font-weight:700;letter-spacing:-.01em;margin-bottom:4px}
.logo{width:32px;height:32px;border-radius:50%;background:var(--bg);box-shadow:var(--raise-xs);display:inline-grid;place-items:center;flex:none}
.logo::after{content:"";width:13px;height:13px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px -1px var(--accent)}
.card input{margin:14px 0}
#loginForm button{width:100%;background:var(--accent);color:var(--accent-ink);box-shadow:var(--raise-sm)}
#loginForm button:hover{filter:brightness(1.05);box-shadow:var(--raise-sm)}
#loginForm button:active{filter:none;box-shadow:inset 3px 3px 7px rgba(120,50,8,.40),inset -2px -2px 6px rgba(255,255,255,.26)}
.err{color:var(--crit);min-height:18px;font-size:13px;margin-top:8px;font-weight:600}

/* ---------- App shell ---------- */
#app{position:fixed;inset:0;display:flex;flex-direction:column;background:var(--bg)}
#topbar{position:relative;z-index:20;background:var(--bg);box-shadow:var(--raise-sm);padding:12px 16px;padding-top:calc(12px + env(safe-area-inset-top,0px));display:flex;flex-direction:column;gap:9px}
.veh{display:flex;align-items:center;gap:9px;min-width:0;flex-wrap:wrap}
.veh strong{font-family:var(--font-display);font-size:16px;font-weight:700}
.dot{width:10px;height:10px;border-radius:50%;background:var(--ink-3);flex:none;box-shadow:var(--inset-sm)}
.dot.on{background:var(--ok);box-shadow:0 0 0 3px var(--ok-bg)}
.addr{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;flex-basis:100%}
.devsel{width:auto;min-height:34px;padding:5px 30px 5px 11px;font-size:13px;font-weight:700;border-radius:10px;max-width:160px}
.stats{display:flex;align-items:center;gap:8px}
.stat{background:var(--well);box-shadow:var(--inset-sm);border-radius:10px;padding:7px 11px;font-family:var(--font-mono);font-weight:600;font-size:13px;color:var(--ink-2)}
.stat small{color:var(--ink-3);font-weight:400;margin-left:2px;font-family:var(--font-body)}
.arm{margin-left:auto;min-height:40px;padding:0 17px;font-size:13.5px;font-weight:800;background:var(--bg);color:var(--ink-2);box-shadow:var(--raise-sm)}
.arm:hover{box-shadow:var(--raise-sm),var(--rim)}
.arm:active{box-shadow:var(--inset)}
.arm.armed{background:var(--accent);color:var(--accent-ink);box-shadow:var(--raise-sm),0 0 15px -3px var(--accent)}
.arm.armed:hover{filter:brightness(1.05)}

main{position:relative;flex:1;overflow:hidden}
#map{position:absolute;inset:0;z-index:0;background:var(--well)}
.leaflet-container{background:var(--well);font-family:var(--font-body)}
:root[data-theme="dark"] .leaflet-tile{filter:invert(1) hue-rotate(185deg) brightness(.9) contrast(.92) saturate(.85)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .leaflet-tile{filter:invert(1) hue-rotate(185deg) brightness(.9) contrast(.92) saturate(.85)}}
.leaflet-control-zoom{border:0!important;box-shadow:var(--raise-sm);border-radius:12px;overflow:hidden}
.leaflet-control-zoom a{background:var(--bg)!important;color:var(--ink)!important;border:0!important;width:34px;height:34px;line-height:34px}
.leaflet-bar a:hover{background:var(--well)!important}
.leaflet-control-attribution{background:rgba(230,233,239,.85)!important;color:var(--ink-3)!important;border-radius:8px 0 0 0}
.leaflet-control-attribution a{color:var(--ink-2)!important}
:root[data-theme="dark"] .leaflet-control-attribution{background:rgba(21,23,27,.85)!important}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .leaflet-control-attribution{background:rgba(21,23,27,.85)!important}}
.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:var(--bg);color:var(--ink);box-shadow:var(--raise-sm)}

/* ---------- Panels ---------- */
.panel{position:absolute;inset:0;z-index:500;background:var(--bg);overflow:auto;padding:18px 16px;padding-bottom:100px}
.panel h2{margin:4px 0 16px}
.panel h3{margin:22px 0 10px}
.panel label{display:block;margin:12px 0;color:var(--ink-2);font-size:13px;font-weight:800}
.panel label input,.panel label select{margin-top:7px;font-weight:400}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.row.between{justify-content:space-between}
.chk{display:flex;align-items:center;gap:9px;color:var(--ink-2)!important;font-weight:700}
.chk input{width:auto}
.btnlink{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:0 15px;border-radius:10px;background:var(--bg);box-shadow:var(--raise-sm);color:var(--ink);text-decoration:none;font-size:13px;font-weight:800;transition:box-shadow var(--ease)}
.btnlink:hover{box-shadow:var(--raise-sm),var(--rim)}
.btnlink:active{box-shadow:var(--inset)}

/* Lists + empty states */
.list{display:flex;flex-direction:column;gap:11px;margin:14px 0 0;padding:0;list-style:none}
.list li{background:var(--bg);border-radius:var(--r-md);box-shadow:var(--raise-sm);padding:13px 15px}
.list li:not(.sms):not(.empty){transition:box-shadow var(--ease)}
.list li:not(.sms):not(.empty):hover{box-shadow:var(--raise-sm),var(--rim)}
.list li:not(.sms):not(.empty):active{box-shadow:var(--inset)}
.empty{background:transparent!important;box-shadow:none!important;text-align:center;padding:52px 20px!important;display:flex;flex-direction:column;align-items:center;gap:7px}
.empty:hover{box-shadow:none!important}
.empty-ic{font-size:42px;line-height:1}
.empty-t{font-family:var(--font-display);font-weight:700;font-size:17px;color:var(--ink-2)}
.empty-s{color:var(--ink-3);font-size:13px;max-width:250px;line-height:1.4}
.ev{display:flex;gap:13px;align-items:flex-start}
.ev .ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none;font-size:18px;background:var(--well);box-shadow:var(--inset-sm)}
.ev.critical .ic{background:var(--crit-bg);box-shadow:none}
.ev.warning .ic{background:var(--warn-bg);box-shadow:none}
.ev .t{font-weight:700;font-size:14.5px}
.ev .m{color:var(--ink-3);font-size:13px;margin-top:2px}
.ev time{color:var(--ink-3);font-size:11.5px;margin-left:auto;white-space:nowrap;font-family:var(--font-mono)}

/* SMS bubbles */
.list li.sms{background:transparent;box-shadow:none;padding:3px 0;flex-direction:column;display:flex}
.sms.out{align-items:flex-end}
.sms .bubble{max-width:82%;padding:10px 14px;border-radius:15px;background:var(--well);box-shadow:var(--inset-sm);color:var(--ink);font-size:14px;line-height:1.35;word-break:break-word}
.sms.out .bubble{background:var(--accent);color:var(--accent-ink);box-shadow:var(--raise-xs)}
.sms .meta{font-size:11px;color:var(--ink-3);margin-top:5px;font-family:var(--font-mono)}

/* Composer + command tiles */
.composer{display:flex;flex-direction:column;gap:10px}
.chips{display:flex;flex-wrap:wrap;gap:11px;margin-bottom:6px}
.chip{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;min-height:auto;padding:12px 15px;border-radius:var(--r-md);background:var(--bg);box-shadow:var(--raise-sm);text-align:left;white-space:normal;transition:box-shadow var(--ease)}
.chip:hover{box-shadow:var(--raise-sm),var(--rim)}
.chip:active{box-shadow:var(--inset)}
.chip b{font-size:13.5px;font-weight:800;color:var(--ink)}
.chip span{color:var(--ink-3);font-size:11.5px;font-weight:500}

/* Trip stats */
.tripstats{display:flex;gap:12px;flex-wrap:wrap;margin:8px 0 14px}
.tripstats div{background:var(--bg);border-radius:var(--r-md);box-shadow:var(--raise-sm);padding:11px 15px;min-width:86px}
.tripstats b{display:block;font-family:var(--font-display);font-size:22px;font-weight:700;color:var(--accent)}
.tripstats span{color:var(--ink-3);font-size:12px}
#playback{margin-top:10px}
#playInfo{margin-top:7px;font-family:var(--font-mono);font-size:12.5px}

/* Settings info card */
.info{background:var(--well);border-radius:var(--r-md);box-shadow:var(--inset-sm);padding:15px;margin-top:16px}
.info div{margin:4px 0;word-break:break-word}
.info b{font-family:var(--font-display);color:var(--ink)}

/* ---------- Bottom tabs ---------- */
#tabs{display:flex;gap:4px;padding:7px 6px;padding-bottom:calc(7px + var(--safe-b));background:var(--bg);box-shadow:0 -10px 20px -14px var(--sd);position:relative;z-index:20}
#tabs button{flex:1;min-height:56px;flex-direction:column;gap:4px;padding:7px 2px;background:transparent;box-shadow:none;border-radius:var(--r-md);color:var(--ink-3);font-size:10.5px;font-weight:700;position:relative}
#tabs button svg{width:22px;height:22px}
#tabs button span{line-height:1}
#tabs button:hover{box-shadow:var(--rim);color:var(--ink-2)}
#tabs button:active{box-shadow:var(--inset-sm)}
#tabs button.active{box-shadow:var(--inset-sm);color:var(--accent)}
.badge{position:absolute;top:6px;right:calc(50% - 26px);min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--crit);color:#fff;font-size:10px;font-weight:800;display:inline-grid;place-items:center}

/* Vehicle marker + FAB + toast */
.carmark{transition:transform .5s linear}
.carmark svg{display:block;filter:drop-shadow(0 2px 4px rgba(23,32,43,.35))}
.fab{position:absolute;right:14px;z-index:5;width:48px;height:48px;min-height:48px;padding:0;border-radius:50%;background:var(--bg);box-shadow:var(--raise-sm);color:var(--accent);display:grid;place-items:center;font-size:21px}
.fab:hover{box-shadow:var(--raise-sm),var(--rim)}
.fab:active{box-shadow:var(--inset)}
#centerBtn{bottom:16px}
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);color:#fff;padding:13px 19px;border-radius:14px;z-index:60;box-shadow:var(--raise);max-width:90vw;font-weight:700;font-size:14px;text-align:center}

/* No mobile blue tap-flash; no text selection on controls */
html{-webkit-tap-highlight-color:transparent}
button,.btnlink,.chip,.fab,.arm,#tabs button,.cs-btn,.cs-opt,.cal-day,.cal-nav,.leaflet-bar a,.list li:not(.sms){-webkit-tap-highlight-color:transparent}
button,.btnlink,.chip,.fab,.arm,#tabs button,.cs-btn,.cs-opt,.cal-day,.cal-nav,.list li:not(.sms){-webkit-user-select:none;user-select:none}

/* Custom themed dropdown */
.cs{position:relative;display:block}
.cs.cs-inline{display:inline-block}
.panel label .cs{margin-top:7px}
.cs-native{position:absolute!important;width:1px;height:1px;opacity:0;pointer-events:none;overflow:hidden;margin:0}
.cs-btn{width:100%;min-height:46px;justify-content:flex-start;text-align:left;background:var(--well);box-shadow:var(--inset-sm);border-radius:12px;padding:11px 36px 11px 14px;color:var(--ink);font-weight:600;position:relative}
.cs-inline .cs-btn{min-height:34px;padding:5px 30px 5px 11px;font-size:13px;font-weight:700;border-radius:10px;max-width:170px}
.cs-btn::after{content:"";position:absolute;right:15px;top:calc(50% - 2px);border:5px solid transparent;border-top-color:var(--ink-3)}
.cs.open .cs-btn::after{top:calc(50% - 7px);transform:rotate(180deg);border-top-color:var(--accent)}
.cs-btn:hover{box-shadow:var(--inset-sm),var(--rim)}
.cs-btn:active{box-shadow:var(--inset-sm)}
.cs-list{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:600;background:var(--bg);border-radius:var(--r-md);box-shadow:var(--raise);padding:6px;max-height:260px;overflow:auto}
.cs-inline .cs-list{right:auto;min-width:180px}
.cs-opt{display:block;width:100%;justify-content:flex-start;text-align:left;background:transparent;box-shadow:none;min-height:42px;border-radius:10px;padding:11px 12px;color:var(--ink);font-weight:600}
.cs-opt:hover{box-shadow:var(--rim)}
.cs-opt.sel{color:var(--accent);box-shadow:var(--inset-sm)}

/* Custom themed calendar */
.cal-wrap{position:relative;flex:0 0 auto}
.cal-input{width:160px;cursor:pointer}
.cal-pop{position:absolute;top:calc(100% + 6px);left:0;z-index:600;background:var(--bg);border-radius:var(--r-md);box-shadow:var(--raise);padding:12px;width:300px;max-width:calc(100vw - 32px)}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.cal-head b{font-family:var(--font-display);font-size:14px;font-weight:700}
.cal-nav{min-height:34px;width:38px;padding:0;background:var(--bg);box-shadow:var(--raise-xs);border-radius:10px;font-size:18px;color:var(--ink-2)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-dow{text-align:center;font-size:11px;color:var(--ink-3);font-weight:800;padding:4px 0}
.cal-day{min-height:36px;padding:0;background:transparent;box-shadow:none;border-radius:9px;font-size:13px;color:var(--ink);font-weight:600}
.cal-day:hover{box-shadow:var(--rim)}
.cal-day.sel{background:var(--accent);color:var(--accent-ink);box-shadow:none}

/* Alert icons: crisp SVG, colored by severity */
.ev .ic{color:var(--accent)}
.ev .ic svg{width:22px;height:22px}
.ev.critical .ic{color:var(--crit)}
.ev.warning .ic{color:var(--warn)}