/* A járműlap stílusa.

   Két szabály tartja össze:

   **Csak tokenekből színezünk** (`theme.css`). A lapnak van sötét változata, és
   egy bedrótozott `#fff` ott világító folt lenne egy sötét háttéren. Ezért nincs
   egyetlen nyers hexa érték sem ebben a fájlban.

   **A méret nem az adattól függ.** Az autót esetenként kérdezzük le, tehát egy
   kártya lehet üres és lehet tele - de ugyanakkorának kell lennie mindkét
   esetben, különben a lista ugrik egyet minden frissítésnél. Innen a
   `min-height` a töltöttség-blokkon és a csempéken. */

.vehicle-setup { display: grid; gap: 12px; margin-bottom: 20px; }
.vehicle-todo {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px;
  border: 1px solid var(--hairline); border-left: 4px solid var(--warn);
  border-radius: 10px; padding: 14px 16px; background: var(--warn-tint);
}
.vehicle-todo.is-ok { border-left-color: var(--ok); background: var(--ok-tint); }
/* Mind a három elem HELYE ki van jelölve. Elég volt a gombra `grid-row`-t adni,
   és az automatikus elhelyezés a címet és a gombot felcserélte: a gomb ült a
   cím helyén, végigfeszítve a sor bal oldalát. Élesben mérve, a Pi felületén.
   Egy részlegesen kijelölt rácsnál a maradékot a böngésző rakja le - és nem
   feltétlenül oda, ahova gondoltuk. */
.vehicle-todo b { grid-column: 1; grid-row: 1; font-size: 14px; margin-bottom: 3px; color: var(--ink); }
.vehicle-todo span { grid-column: 1; grid-row: 2; font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
.vehicle-todo button { grid-column: 2; grid-row: 1 / span 2; }

.section-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 22px 0 10px; }
.section-head .section-title { margin: 0; }
.section-head .section-hint { color: var(--ink-3); font-size: 12px; }

.vehicle-account-list { display: grid; gap: 10px; }
.vehicle-account {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  border: 1px solid var(--hairline); border-radius: 10px; padding: 14px 16px; background: var(--surface);
}
.vehicle-account.is-expired { border-color: var(--bad); background: var(--bad-tint); }
.vehicle-account b { display: block; font-size: 14px; color: var(--ink); }
.vehicle-account small { display: block; margin-top: 3px; color: var(--ink-3); font-size: 12px; }
.vehicle-account-error { display: block; margin-top: 6px; color: var(--bad); font-size: 12px; }
.vehicle-account-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.vehicle-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 18px; }
.vehicle-card {
  border: 1px solid var(--hairline); border-radius: 12px; padding: 18px; background: var(--surface);
  box-shadow: var(--card-shadow); display: flex; flex-direction: column; gap: 13px;
}
.vehicle-card > header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.vehicle-card > header b { display: block; font-size: 16px; color: var(--ink); }
.vehicle-card > header small { display: block; margin-top: 2px; color: var(--ink-3); font-size: 11.5px;
  font-variant-numeric: tabular-nums; }

.vehicle-state { font-size: 11.5px; font-weight: 700; padding: 4px 9px; border-radius: 999px; white-space: nowrap; }
.vehicle-state.is-charging { background: var(--ok-tint); color: var(--ok); }
.vehicle-state.is-done { background: var(--accent-tint); color: var(--accent-ink); }
.vehicle-state.is-warn { background: var(--warn-tint); color: var(--warn); }
.vehicle-state.is-idle { background: var(--surface-3); color: var(--ink-3); }

.vehicle-soc { display: flex; align-items: baseline; gap: 10px; min-height: 42px; flex-wrap: wrap; }
.vehicle-soc strong { font-size: 34px; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.vehicle-soc small { color: var(--ink-3); font-size: 12px; }

.vehicle-bar { position: relative; height: 10px; border-radius: 999px; background: var(--surface-3); }
.vehicle-bar-fill { display: block; height: 100%; border-radius: 999px; background: var(--ink-3);
  transition: width .4s; }
.vehicle-bar-fill.is-charging { background: var(--ok); }
.vehicle-bar-fill.is-done { background: var(--accent); }
.vehicle-bar-fill.is-warn { background: var(--warn); }
/* A limit nem a sávban ül, hanem RÁ van rajzolva: nem egy második mennyiség,
   hanem az a pont, ahol az autó magától megáll. Egy második kitöltött sávtól
   úgy tűnne, mintha a limit is töltöttség lenne. */
.vehicle-bar-limit { position: absolute; top: -3px; width: 2px; height: 16px; background: var(--ink);
  border-radius: 1px; transform: translateX(-1px); }

.vehicle-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.vehicle-tile { border: 1px solid var(--hairline-2); border-radius: 8px; padding: 8px 9px; min-height: 52px; }
.vehicle-tile small { display: block; font-size: 10.5px; color: var(--ink-3); text-transform: uppercase;
  letter-spacing: .03em; }
.vehicle-tile b { display: block; margin-top: 3px; font-size: 14px; color: var(--ink);
  font-variant-numeric: tabular-nums; }

.vehicle-links { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--ink-2); }
.vehicle-links .is-missing { color: var(--ink-3); }
.vehicle-error { margin: 0; font-size: 12px; color: var(--bad); }
.vehicle-quiet { margin: 0; font-size: 12px; color: var(--ink-3); }

.vehicle-card > footer { display: flex; justify-content: space-between; align-items: center; gap: 12px;
  flex-wrap: wrap; border-top: 1px solid var(--hairline-2); padding-top: 12px; }
.vehicle-card > footer small { color: var(--ink-3); font-size: 11.5px; }
.vehicle-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.vehicle-actions button, .vehicle-account-actions button, .vehicle-control button {
  border: 1px solid var(--hairline); border-radius: 6px; background: var(--surface); color: var(--ink-2);
  font: 600 11.5px Inter, system-ui, sans-serif; padding: 6px 10px; cursor: pointer;
}
.vehicle-actions button:hover, .vehicle-account-actions button:hover, .vehicle-control button:hover {
  background: var(--accent-tint); color: var(--accent-ink);
}
.vehicle-actions button:disabled, .vehicle-control button:disabled { opacity: .5; cursor: default; }

.vehicle-control { border-top: 1px solid var(--hairline-2); padding-top: 12px; display: grid; gap: 8px; }
.vehicle-control-row { display: flex; align-items: end; gap: 8px; }
.vehicle-control-row.is-wide { justify-content: space-between; align-items: center; }
.vehicle-control-row label { display: grid; gap: 4px; font-size: 11.5px; font-weight: 700; color: var(--ink-2); }
.vehicle-control-row input { width: 90px; padding: 6px 8px; border: 1px solid var(--hairline);
  border-radius: 6px; background: var(--surface-2); color: var(--ink); }
.vehicle-command-note { font-size: 11.5px; color: var(--ink-2); text-align: right; flex: 1; }
.vehicle-command-note.is-error { color: var(--bad); }

.vehicle-note { margin-top: 24px; max-width: 74ch; color: var(--ink-3); font-size: 12.5px; line-height: 1.6; }

/* A beállítás-ablak tényei másolható szövegként állnak: ezeket a Tesla
   fejlesztői portáljába kell átvinni, betűre pontosan - egy záró perjel
   eltérés `invalid_redirect_uri`-t ad. */
.vehicle-settings-facts { display: grid; gap: 9px; margin: 14px 0; }
.vehicle-settings-facts small { display: block; font-size: 11px; color: var(--ink-3); text-transform: uppercase;
  letter-spacing: .03em; }
.vehicle-settings-facts code { display: block; margin-top: 3px; padding: 7px 9px; border-radius: 6px;
  background: var(--surface-3); color: var(--ink); font-size: 12px; word-break: break-all; user-select: all; }

@media (max-width: 720px) {
  .vehicle-grid { grid-template-columns: 1fr; }
  .vehicle-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vehicle-todo { grid-template-columns: 1fr; }
  .vehicle-todo button { grid-row: auto; justify-self: start; }
}

/* A két ablak saját stílust kap. A `dialog` alapból `padding:0` az app.css-ben,
   és a régi űrlapok a `.form-grid` / `.modal-header` osztályokra épülnek - azok
   viszont kétoszlopos térképes helyszín-űrlapra készültek. Itt kevés mező van,
   egymás alatt, mert a sorrendjük is mond valamit: előbb a kártya (ez a
   legfontosabb), aztán a többi. */
#vehicle-assign-dialog, #vehicle-settings-dialog { width: min(640px, 94vw); }
#vehicle-assign-dialog form, #vehicle-settings-dialog form {
  display: grid; gap: 14px; padding: 26px 28px;
}
#vehicle-assign-dialog h3, #vehicle-settings-dialog h3 { margin: 0; font-size: 19px; color: var(--ink); }
.dialog-help { margin: -6px 0 0; color: var(--ink-2); font-size: 12.5px; line-height: 1.55; }
.dialog-help a { color: var(--accent-ink); }
#vehicle-assign-dialog label, #vehicle-settings-dialog label {
  display: grid; gap: 6px; font-size: 12px; font-weight: 700; color: var(--ink-2);
}
#vehicle-assign-dialog label small, #vehicle-settings-dialog label small {
  font-weight: 500; color: var(--ink-3); line-height: 1.5;
}
#vehicle-settings-dialog textarea { min-height: 82px; font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 12px; }
/* A vezérlés-kapcsoló nem egy mező a többi között: ez az a döntés, amitől a
   platform írhat is, nemcsak olvas. Ezért kap keretet. */
#vehicle-assign-dialog .feature {
  display: flex; align-items: start; gap: 10px; border: 1px solid var(--hairline);
  border-radius: 9px; padding: 12px 14px; background: var(--surface-2);
}
#vehicle-assign-dialog .feature input { margin-top: 2px; }
#vehicle-assign-dialog .feature b { display: block; font-size: 13px; color: var(--ink); }
#vehicle-assign-dialog .feature small { display: block; margin-top: 3px; font-weight: 500;
  color: var(--ink-3); line-height: 1.5; }
.dialog-error { margin: 0; min-height: 16px; font-size: 12px; color: var(--bad); }
#vehicle-assign-dialog menu, #vehicle-settings-dialog menu {
  display: flex; justify-content: flex-end; gap: 10px; margin: 4px 0 0; padding: 0;
}

/* --- márkaválasztó ---------------------------------------------------------
   A lista nem termékkatalógus, hanem munkasor: a fel nem térképezett márka is
   rajta van. A halványítás ezért nem "nem elérhető", hanem "még nem tudjuk" -
   és a nyitott kérdések egy kattintásra ott vannak alatta. */
#vehicle-brand-dialog { width: min(680px, 94vw); }
.vehicle-brand-body { display: grid; gap: 14px; padding: 26px 28px; max-height: 82vh; overflow: auto; }
.vehicle-brand-body h3 { margin: 0; font-size: 19px; color: var(--ink); }
.vehicle-brand-body menu { display: flex; justify-content: flex-end; margin: 4px 0 0; padding: 0; }
.vehicle-brand-list { display: grid; gap: 10px; }
.vehicle-brand {
  border: 1px solid var(--hairline); border-radius: 10px; padding: 13px 15px;
  background: var(--surface); display: grid; gap: 8px;
}
.vehicle-brand.is-unmapped { background: var(--surface-2); }
.vehicle-brand-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.vehicle-brand-head b { font-size: 14px; color: var(--ink); }
.vehicle-brand-state { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px;
  white-space: nowrap; background: var(--surface-3); color: var(--ink-3); }
.vehicle-brand.is-live .vehicle-brand-state { background: var(--ok-tint); color: var(--ok); }
.vehicle-brand.is-mapped .vehicle-brand-state { background: var(--warn-tint); color: var(--warn); }
.vehicle-brand p { margin: 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.55; }
.vehicle-brand-warn { color: var(--warn) !important; font-weight: 600; }
.vehicle-brand details summary { cursor: pointer; font-size: 12px; color: var(--ink-3); }
.vehicle-brand details ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 6px; }
.vehicle-brand details li { font-size: 12px; color: var(--ink-2); }
.vehicle-brand details li b { display: block; color: var(--ink); }
.vehicle-brand details li span { color: var(--ink-3); }
.vehicle-brand-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.vehicle-brand-actions button { border: 1px solid var(--hairline); border-radius: 6px;
  background: var(--surface); color: var(--ink-2);
  font: 600 12px Inter, system-ui, sans-serif; padding: 7px 12px; cursor: pointer; }
.vehicle-brand-actions .primary { background: var(--accent); border-color: var(--accent);
  color: var(--accent-contrast); }
.vehicle-brand-actions button:disabled { opacity: .45; cursor: default; }

.vehicle-settings-fields { display: grid; gap: 14px; }