/* auto-flow — same look as auto-control-bridge: dark grey (Mercedes Sprinter
   Amazon Dark Grey, MB 7769) with a blue accent. */

:root {
  --bg: #232629;
  --panel: #2b2f32;
  --border: #43474b;
  --text: #eceef0;
  --muted: #9ba2a8;
  --accent: #4f8cc4;
  --ok: #34d399;
  --warn: #e8c568;
  --err: #f87171;
}

/* Swiping left/right must scroll the page/tables, never navigate history. */
html, body { overscroll-behavior-x: none; }

body {
  margin: 0;
  padding: 24px;
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
}

h1 { font-size: 22px; margin: 0 0 4px; }
h2 { font-size: 15px; margin: 28px 0 6px; }
.muted { color: var(--muted); margin: 0; }

header { margin-bottom: 12px; }
nav { display: flex; gap: 8px; align-items: center; margin-top: 10px; }

/* Buttons and button-styled links */
button, a.button {
  font: inherit;
  padding: 4px 12px;
  cursor: pointer;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
}
button:disabled { opacity: 0.5; cursor: default; }
button.lock, a.button.secondary {
  background: var(--panel);
  border-color: var(--border);
  color: var(--text);
}
button.inspect, a.button.inspect {
  background: transparent;
  border-color: var(--accent);
  color: var(--accent);
}
button.inspect:not(:disabled):hover, a.button.inspect:hover { background: var(--accent); color: #fff; }

/* Hover/tap feedback on every enabled button. */
button:not(:disabled):hover, a.button:hover { filter: brightness(1.12); }
button:not(:disabled):active, a.button:active { filter: brightness(0.9); }

/* Table */
@media (max-width: 600px) {
  /* Narrow screens: hide the header labels and drop the Action and AIP columns
     (their actions live in the overlay opened by tapping the plate). */
  tr.head { display: none; }
  .col-action, .col-aip { display: none; }
  /* Full-width blue heading bars with sharp corners (mobile only). */
  h2 { padding: 6px 10px; background: var(--accent); color: #fff; border-radius: 0; }
  /* Table fills the width; the Status cell absorbs the freed space so the
     dot + plate stay together on the left, with no dead gap. */
  table { width: 100%; }
  td.status-cell { max-width: none; width: 100%; }
}
.table-wrap {
  display: flex;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  /* Full-bleed scroller: cancel the page padding so the table can use the
     whole screen width while scrolling; the resting position stays aligned
     with the rest of the page. */
  margin: 0 -24px;
  padding-left: 24px;
}
/* Right-edge spacer: padding-right is unreliable in horizontal scrollers,
   a flex item is not. */
.table-wrap::after { content: ""; flex: 0 0 24px; }
table { border-collapse: collapse; margin-top: 6px; }
th, td {
  padding: 5px 10px;
  text-align: left;
  white-space: nowrap;
}
th { background: var(--accent); color: #fff; font-weight: 600; }
tr:nth-child(even) td { background: var(--panel); }
/* Row hover (pointer devices only, so touch scrolling doesn't flash rows). */
@media (hover: hover) {
  tr:not(.head):hover td { background: #31363a; }
}
td.plate {
  font-family: ui-monospace, Menlo, monospace;
  color: var(--accent);
  font-weight: 700;
  cursor: pointer;
}
td.plate:hover { text-decoration: underline; }

/* The "progress" column sits first and holds only the in-progress dot;
   its header is intentionally empty. */
.col-dot { text-align: center; }

/* Status column is capped so a long badge can't stretch the table. */
th.col-status, td.status-cell { max-width: 150px; }

/* Tablet and up (wider than a phone): each table fills its wrapper instead of
   scrolling at its natural width, with the Status column absorbing the extra
   space (every other column stays at its natural size). */
@media (min-width: 601px) {
  .table-wrap {
    width: 100%;
    margin: 0;
    padding-left: 0;
  }
  .table-wrap::after { content: none; }
  table { width: 100%; }
  th.col-status, td.status-cell { max-width: none; width: 100%; }
}

/* Desktop (wider than a portrait tablet): the fleet tables shrink to the left
   half of the screen, leaving the right half for the upcoming "Tasks" tables. */
@media (min-width: 1024px) {
  .table-wrap { width: 50%; }
}

.missing, td.empty { color: var(--muted); font-style: italic; }
.empty-section { color: var(--muted); margin: 6px 0 0; }

/* Status badges (vehicle status: Available / Booked / Booked Parked) */
.badge-status {
  display: inline-block;
  padding: 1px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--muted);
}
.badge-status.available     { border-color: var(--ok);     color: var(--ok); }
.badge-status.booked        { border-color: var(--accent); color: var(--accent); }
.badge-status.booked-parked { border-color: var(--warn);   color: var(--warn); }

/* In-progress dot (steady white while running, ok colour once done). */
.status-dot {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #fff;
  vertical-align: middle;
}
.status-dot.done { background: var(--ok); }

/* Action feedback text (used by the overlay; later also by table actions). */
.status { margin-left: 6px; font-size: 13px; }
.status.ok { color: var(--ok); }
.status.err { color: var(--err); }
.status.pending { color: var(--muted); }

/* Action overlay (Information / Unlock / Lock / AIP), opened by clicking or
   tapping a plate. */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.6);
}
.modal-overlay[hidden] { display: none; }
.modal {
  width: min(320px, 100%);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.modal-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.modal-title {
  margin: 0;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 16px;
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
}
.modal-type { color: var(--muted); font-size: 13px; text-align: right; }
.modal-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  font-size: 13px;
}
.modal-info[hidden] { display: none; }
.info-row { display: flex; justify-content: space-between; gap: 12px; }
.info-row span:first-child { color: var(--muted); }
.info-row span:last-child { text-align: right; overflow-wrap: anywhere; }
.modal-actions { display: flex; flex-direction: column; gap: 10px; }
.modal-actions button,
.modal-actions a.button {
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  font-size: 15px;
  text-align: center;
}
.modal-actions .missing { margin: 0; text-align: center; }
.modal-status { margin: 0 0 4px; min-height: 1.2em; font-size: 13px; }
.modal-close {
  background: var(--panel);
  border-color: var(--border);
  color: var(--text);
}

/* Progress dot tooltip (hover on desktop, tap on mobile). */
.dot-tip {
  position: fixed;
  z-index: 200;
  padding: 5px 9px;
  border-radius: 6px;
  background: #14171a;
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 12px;
  line-height: 1.35;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
}
.dot-tip[hidden] { display: none; }