/*
 * In-car styling.
 *
 * Tuned for a Tesla centre screen: bright cabin, glare, gloved hands, and a
 * driver or passenger glancing rather than reading. Hence the large hit targets
 * (44px floor, 56px for anything consequential), heavy weights, and a dark
 * palette that matches Tesla's own UI so the app does not flash white.
 */

:root {
  --bg: #16181c;
  --surface: #22262d;
  --surface-2: #2c313a;
  --line: #3a4049;
  --text: #f2f4f7;
  --muted: #9aa4b2;

  --todo: #f5a524;       /* amber  - to collect */
  --done: #2fbf71;       /* green  - collected */
  --absent: #98a2ae;     /* grey   - not in field, marked with an X */
  --danger: #ef4444;
  --accent: #4c8dff;

  --radius: 12px;
  --tap: 56px;
}

* { box-sizing: border-box; }

/* The hidden attribute must win over the display rules below. Without this,
   `display: flex/grid` on a specific id beats the user-agent [hidden] rule and
   hidden panels stay on screen. */
[hidden] { display: none !important; }


html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font: 500 17px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
  /* The car screen is a touch surface; text selection only gets in the way. */
  -webkit-user-select: none;
  user-select: none;
}

.screen { position: fixed; inset: 0; }
.muted { color: var(--muted); }
.pad { padding: 1rem; }
.error { color: var(--danger); min-height: 1.4em; margin: .5rem 0 0; }

/* -------------------------------------------------------------- buttons -- */
.btn {
  min-height: var(--tap);
  padding: 0 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
}
.btn:active { filter: brightness(1.25); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-collected { background: var(--done); border-color: var(--done); color: #06281a; }
.btn-notinfield { background: var(--absent); border-color: var(--absent); color: #2b1405; }
.btn-ghost { background: transparent; }

/* -------------------------------------------------------------- pairing -- */
#pair { display: grid; place-items: center; background: var(--bg); padding: 1rem; }
.pair-box { width: min(30rem, 100%); text-align: center; }
.pair-box h1 { font-size: 1.75rem; margin: 0 0 .5rem; letter-spacing: .01em; }
#pair-code {
  width: 100%;
  margin: 1.5rem 0 1rem;
  padding: 1rem;
  font: 700 2.5rem/1 ui-monospace, Menlo, monospace;
  letter-spacing: .35em;
  text-align: center;
  text-transform: uppercase;
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
}
#pair-code:focus { outline: none; border-color: var(--accent); }
#pair-submit { width: 100%; }

/* ------------------------------------------------------------ statusbar -- */
#statusbar {
  position: absolute; inset: 0 0 auto 0; z-index: 3;
  display: flex; align-items: center; gap: .75rem;
  padding: .5rem .75rem;
  background: linear-gradient(var(--bg) 65%, transparent);
}
.veh-name { font-weight: 700; margin-right: auto; }
.stat { font-variant-numeric: tabular-nums; font-size: .95rem; }
.pill {
  padding: .2rem .6rem; border-radius: 999px; font-weight: 700;
  background: var(--surface-2); font-size: .95rem;
}
.pill.underway { background: var(--surface-2); color: var(--text); }
.pill.parked { background: var(--done); color: #06281a; }
#statusbar .btn { min-height: 40px; padding: 0 .9rem; font-size: .9rem; }

/* ------------------------------------------------------------------ map -- */
#map { position: absolute; inset: 0; }
.maplibregl-ctrl-attrib { font-size: 10px; }

/* Vehicle and structure markers are DOM elements so they scale crisply and
   take touch events without a canvas hit-test. */
.marker {
  width: 22px; height: 22px; border-radius: 50%;
  border: 3px solid #0e1013; cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,.6);
}
.marker.TO_COLLECT { background: var(--todo); }
.marker.COLLECTED { background: var(--done); }
.marker-vehicle {
  width: 0; height: 0;
  border-left: 11px solid transparent;
  border-right: 11px solid transparent;
  border-bottom: 26px solid var(--accent);
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.8));
}

/* ---------------------------------------------------------------- sheet -- */
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-radius: var(--radius) var(--radius) 0 0;
  max-height: 58%;
  display: flex; flex-direction: column;
  transition: transform .18s ease-out;
}
.sheet.collapsed { transform: translateY(calc(100% - var(--tap))); }
.sheet-handle {
  min-height: var(--tap);
  display: flex; align-items: center; gap: .6rem;
  width: 100%; padding: 0 1rem;
  background: none; border: 0; border-bottom: 1px solid var(--line);
  color: var(--text); font: inherit; font-weight: 700; cursor: pointer;
}
.badge {
  margin-left: auto; padding: .15rem .6rem; border-radius: 999px;
  background: var(--accent); color: #fff; font-size: .9rem;
}
.sheet-body { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.filter-row {
  display: flex; align-items: center; gap: 1rem;
  padding: .6rem 1rem; border-bottom: 1px solid var(--line);
}
.chk { display: flex; align-items: center; gap: .5rem; }
.chk input { width: 22px; height: 22px; }
.select {
  margin-left: auto; min-height: 40px; padding: 0 .5rem;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px; font: inherit;
}

.list { list-style: none; margin: 0; padding: 0; }
.list li {
  display: flex; align-items: center; gap: .85rem;
  min-height: var(--tap); padding: .5rem 1rem;
  border-bottom: 1px solid var(--line); cursor: pointer;
}
.list li:active { background: var(--surface-2); }
.dot { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.dot.TO_COLLECT { background: var(--todo); }
.dot.COLLECTED { background: var(--done); }
.li-main { flex: 1; min-width: 0; }
.li-id { font-weight: 700; }
.li-sub { font-size: .88rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.li-dist { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--muted); }

/* ----------------------------------------------------------- inspection -- */
/* The card runs at a smaller scale than the rest of the app. The map and the
   list are glanced at from the driver's seat, so they get the 56px targets;
   the card is used parked, close up, and at full scale it overflowed the
   Tesla's viewport, the four outcome buttons wrapped onto three rows and the
   notes field scrolled off the bottom. 15px with 44px targets keeps the whole
   card on screen with nothing to scroll. */
.detail {
  position: absolute; inset: 0; z-index: 6;
  background: rgba(0,0,0,.6);
  display: grid; place-items: end center;
  padding: .75rem;
}
.detail-card {
  position: relative;
  width: min(40rem, 100%); max-height: 94%;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .9rem 1rem 1rem;
  font-size: 15px;
  --tap: 44px;
}
.detail-close {
  position: absolute; top: .3rem; right: .3rem;
  width: 40px; height: 40px;
  background: none; border: 0; color: var(--muted);
  font-size: 1.6rem; line-height: 1; cursor: pointer;
}
.detail-card h2 { margin: 0 2rem .35rem 0; font-size: 1.15rem; }
.kb-toggle { min-height: 34px; padding: 0 .6rem; font-size: .8rem; font-weight: 600; white-space: nowrap; }
.kb-toggle[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
#detail .kb-toggle { position: absolute; top: .55rem; right: 2.9rem; }
#detail .detail-card h2 { margin-right: 12rem; }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .5rem 0; }
.setting-row .kb-toggle { flex: none; min-height: 44px; font-size: .9rem; }
/* Facts read as one wrapped line of "label value" pairs rather than a column
   of five rows; that alone saves the height of two buttons. */
.meta {
  display: flex; flex-wrap: wrap; gap: .15rem 1.1rem;
  margin: 0 0 .7rem; font-size: .87rem;
}
.meta div { display: flex; gap: .35rem; white-space: nowrap; }
.meta dt { color: var(--muted); }
.meta dd { margin: 0; font-variant-numeric: tabular-nums; }

#d-form { border: 0; padding: 0; margin: 0; }
#d-form:disabled { opacity: .45; }
.fields { display: grid; gap: .6rem; margin-bottom: .7rem; }
.field { display: block; }
.field span { display: block; margin-bottom: .2rem; color: var(--muted); font-size: .82rem; }
.field input, .field textarea {
  width: 100%; padding: .5rem .65rem;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px;
  font: inherit; -webkit-user-select: text; user-select: text;
}
.field input { min-height: var(--tap); }
.field textarea { min-height: calc(var(--tap) + 8px); resize: vertical; }
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.actions .btn, .reason-options .btn { padding: 0 .6rem; font-size: .95rem; }
/* Room for it: inspector beside notes, four outcomes on one row. */
@media (min-width: 720px) {
  .fields { grid-template-columns: minmax(10rem, 1fr) 2fr; }
  .actions { grid-template-columns: repeat(4, 1fr); }
}

/* ---------------------------------------------------------------- toast -- */
.toast {
  position: absolute; left: 50%; bottom: 5rem; z-index: 8;
  transform: translateX(-50%);
  background: var(--surface-2); border: 1px solid var(--line);
  padding: .85rem 1.25rem; border-radius: var(--radius);
  font-weight: 600; box-shadow: 0 4px 16px rgba(0,0,0,.5);
}

/* ------------------------------------------------------------- offline -- */
.pill.queued { background: var(--todo); color: #2b1405; }

.offline-banner {
  position: absolute; top: 3.25rem; left: .75rem; right: .75rem; z-index: 5;
  background: var(--absent); color: #2b1405;
  padding: .7rem 1rem; border-radius: var(--radius);
  font-weight: 600; box-shadow: 0 3px 12px rgba(0,0,0,.5);
}
.offline-banner span { font-weight: 500; display: block; font-size: .92rem; }

.pending-notice {
  background: var(--todo); color: #2b1405;
  padding: .7rem 1rem; border-radius: var(--radius); margin-bottom: 1rem;
  font-weight: 600;
}

/* A queued outcome is shown as a ring rather than a fill, so the crew can tell
   at a glance what has actually reached the office from what has not. */
.dot.pending, .marker.pending {
  background: transparent;
  border: 3px solid var(--todo);
  box-sizing: border-box;
}
.li-queued { font-size: .8rem; color: var(--todo); font-weight: 700; }

/* GPS source indicator. Present only when the browser is actually supplying a
   fix, so its absence is itself information. */
.pill.gps { background: var(--done); color: #06281a; }
.pill.gps.denied { background: var(--absent); color: #2b1405; }

/* ------------------------------------------------------- offline maps -- */
.region-list { list-style: none; margin: 0 0 1rem; padding: 0; }
.region-list li {
  display: flex; align-items: center; gap: 1rem;
  padding: .85rem 0; border-bottom: 1px solid var(--line);
}
.region-main { flex: 1; min-width: 0; }
.region-name { font-weight: 700; }
.region-sub { font-size: .88rem; color: var(--muted); }
.region-list .btn { min-height: 44px; padding: 0 .9rem; flex: none; }
.region-here {
  display: inline-block; margin-left: .5rem; padding: .1rem .5rem;
  border-radius: 999px; background: var(--accent); color: #fff;
  font-size: .75rem; font-weight: 700; vertical-align: middle;
}
.progress {
  height: 6px; border-radius: 3px; background: var(--surface-2);
  overflow: hidden; margin-top: .4rem;
}
.progress > span { display: block; height: 100%; background: var(--accent); width: 0; }
.pill.mapsrc { background: var(--surface-2); color: var(--muted); }
.pill.mapsrc.offline { background: var(--done); color: #06281a; }

/* -------------------------------------------------- unable to collect -- */
/* Red, and loud. "Not in field" is grey and absent; this is a structure that is
   there and could not be worked, which is the one outcome needing someone to act.
   Two different jobs for whoever reads the list afterwards. */
:root { --blocked: #e5484d; }

.btn-unable { background: var(--blocked); border-color: var(--blocked); color: #2a0708; }

.marker.UNABLE_TO_COLLECT { background: var(--blocked); }
.dot.UNABLE_TO_COLLECT { background: var(--blocked); }

/* The forced choice. Shown in place of the actions, not alongside them, so there
   is no way to file the outcome without answering the question. */
.reason {
  margin-top: .6rem; padding: .6rem .75rem;
  border: 1px solid var(--blocked); border-radius: var(--radius);
  background: rgba(229, 72, 77, .08);
  display: grid; gap: .7rem;
}
.reason-q { font-weight: 650; }
.reason-options { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin: .5rem 0; }
.btn-reason { background: var(--surface-2); border-color: var(--blocked); color: var(--text); }
.btn-sm { padding: .4rem .7rem; font-size: .9rem; }

/* Not in field: the structure was not there. Grey rather than orange, because
   orange reads as a warning and this is simply an absence - and marked with an
   X so it is distinguishable from the other outcomes without relying on colour.

   Drawn as a background image, not a positioned pseudo-element: MapLibre owns
   position on a marker element, and anything that disturbs it drops the marker
   out of the map coordinate space. */
.marker.NOT_IN_FIELD {
  background-color: var(--absent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 10 10%27%3E%3Cpath d=%27M2.6 2.6 L7.4 7.4 M7.4 2.6 L2.6 7.4%27 stroke=%27%23fff%27 stroke-width=%271.8%27 stroke-linecap=%27round%27/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 74% 74%;
}

/* Not in field: the structure was not there. Grey rather than orange, because
   orange reads as a warning and this is simply an absence - and marked with an
   X so it is distinguishable from the other outcomes without relying on colour.

   Drawn as a background image, not a positioned pseudo-element: MapLibre owns
   position on a marker element, and anything that disturbs it drops the marker
   out of the map coordinate space. */
.dot.NOT_IN_FIELD {
  background-color: var(--absent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 10 10%27%3E%3Cpath d=%27M2.6 2.6 L7.4 7.4 M7.4 2.6 L2.6 7.4%27 stroke=%27%23fff%27 stroke-width=%271.8%27 stroke-linecap=%27round%27/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 74% 74%;
}