/*
 * Fahrtenbuch – Gestaltung
 * Leitfarbe: Autobahn-Schilderblau. Schrift: Overpass (nach Highway Gothic), lokal eingebunden.
 * Markantes Element: das dunkle Zählwerk für den Kilometerstand.
 */

@font-face {
  font-family: "Overpass";
  src: url("/assets/overpass-latin-wght-7b638cc6.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Overpass";
  src: url("/assets/overpass-latin-ext-wght-d4854bb6.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --blue: #1d4f91;
  --blue-dark: #153b6d;
  --asphalt: #22262b;
  --road: #eceef1;
  --white: #ffffff;
  --yellow: #f2b705;
  --red: #b3261e;
  --green: #2f7d4f;
  --muted: #5b6470;
  --line: #d3d8de;

  --font: "Overpass", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --radius-s: 6px;
  --radius-m: 10px;
  --nav-h: 64px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--asphalt);
  background: var(--road);
  font-variant-numeric: tabular-nums;
}

h1, h2 { line-height: 1.15; margin: 0 0 .5em; }
h1 { font-size: 1.75rem; font-weight: 800; letter-spacing: -.01em; }
h2 { font-size: 1.2rem; font-weight: 700; margin-top: 2rem; }
p { margin: 0 0 1rem; }
a { color: var(--blue); text-underline-offset: .15em; }

:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }
.num { text-align: right; white-space: nowrap; }

/* ---------- Kopfzeile & Navigation ---------- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 44rem;
  margin: 0 auto;
  padding: 1rem 1.25rem .5rem;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--asphalt);
  text-decoration: none;
}

.nav { display: flex; gap: .25rem; }

.nav__link {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .7rem;
  border-radius: var(--radius-s);
  color: var(--muted);
  font-weight: 600;
  text-decoration: none;
}
.nav__link:hover { color: var(--asphalt); background: rgba(29, 79, 145, .07); }
.nav__link.is-active { color: var(--blue); background: var(--white); }

/* Auf dem Handy: Navigation als Leiste am unteren Rand */
@media (max-width: 40rem) {
  .has-nav .page { padding-bottom: calc(var(--nav-h) + 2rem + env(safe-area-inset-bottom)); }

  .nav {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 10;
    justify-content: space-around;
    gap: 0;
    padding: .35rem .25rem calc(.35rem + env(safe-area-inset-bottom));
    background: var(--white);
    border-top: 1px solid var(--line);
  }
  .nav__link {
    flex-direction: column;
    gap: .1rem;
    padding: .3rem .5rem;
    font-size: .78rem;
    min-width: 4.5rem;
  }
  .nav__link.is-active { background: none; }
}

/* ---------- Seite ---------- */

.page {
  max-width: 44rem;
  margin: 0 auto;
  padding: 1rem 1.25rem 3rem;
}

.lead { color: var(--muted); max-width: 36em; }

/* ---------- Meldungen ---------- */

.flash-wrap {
  max-width: 44rem;
  margin: 0 auto;
  padding: 0 1.25rem;
  transition: opacity .4s ease;
}
.flash-wrap.is-leaving { opacity: 0; pointer-events: none; }

.flash {
  margin: .5rem 0 0;
  padding: .75rem 1rem;
  border-radius: var(--radius-s);
  border-left: 5px solid;
  background: var(--white);
  font-weight: 600;
}
.flash--notice { border-color: var(--green); }
.flash--alert  { border-color: var(--red); }

/* ---------- Formulare ---------- */

.stack { display: grid; gap: 1.1rem; max-width: 28rem; }
.field { display: grid; gap: .3rem; }

.label { font-weight: 700; font-size: .95rem; }
.hint  { margin: 0; font-size: .9rem; color: var(--muted); }
.static { margin: 0; padding: .2rem 0; }

.input {
  width: 100%;
  font: inherit;
  padding: .7rem .85rem;
  border: 2px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--white);
  color: var(--asphalt);
}
.input:focus { border-color: var(--blue); outline: none; box-shadow: 0 0 0 3px rgba(242, 183, 5, .55); }
.input--date { max-width: 14rem; }

.field-error {
  margin: .25rem 0 0;
  color: var(--red);
  font-weight: 600;
  font-size: .95rem;
}

.check { display: flex; gap: .6rem; align-items: flex-start; }
.check input { width: 1.2rem; height: 1.2rem; margin-top: .15rem; accent-color: var(--red); }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-weight: 700;
  padding: .75rem 1.3rem;
  border: 2px solid var(--blue);
  border-radius: var(--radius-s);
  background: var(--blue);
  color: var(--white);
  text-decoration: none;
  cursor: pointer;
}
.button:hover { background: var(--blue-dark); border-color: var(--blue-dark); }
.button--quiet { background: var(--white); color: var(--blue); }
.button--quiet:hover { background: #f4f6f9; color: var(--blue-dark); }
.button--danger { background: var(--red); border-color: var(--red); }
.button--danger:hover { background: #8f1e18; border-color: #8f1e18; }
.button--small { padding: .5rem .9rem; font-size: .95rem; }

.link-like {
  font: inherit;
  font-weight: 600;
  color: var(--blue);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: .15em;
}
.link-like--danger { color: var(--red); }

.icon-button {
  font: inherit;
  font-weight: 700;
  width: 2.25rem; height: 2.25rem;
  border: 2px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--white);
  color: var(--asphalt);
  cursor: pointer;
}
.icon-button:hover { border-color: var(--blue); color: var(--blue); }

/* button_to erzeugt Formulare: sie sollen im Fluss bleiben */
form.button_to { display: inline; }

/* ---------- Zählwerk (Kilometerstand) ---------- */

.odometer {
  position: relative;
  display: flex;
  align-items: baseline;
  max-width: 28rem;
  padding: .35rem 1.1rem .2rem;
  border-radius: var(--radius-m);
  background:
    linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 78%, rgba(0,0,0,.55) 100%),
    #1a1d21;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.6), 0 0 0 4px #3a4048;
  transition: box-shadow .15s ease;
}
.odometer:focus-within { box-shadow: inset 0 2px 6px rgba(0,0,0,.6), 0 0 0 4px var(--yellow); }
.odometer.has-error,
.is-invalid .odometer { box-shadow: inset 0 2px 6px rgba(0,0,0,.6), 0 0 0 4px var(--red); }

.odometer__input {
  flex: 1;
  min-width: 0;
  width: 100%;
  border: 0;
  background: transparent;
  color: #f5f6f7;
  font: inherit;
  font-size: clamp(2.4rem, 11vw, 3.4rem);
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  caret-color: var(--yellow);
}
.odometer__input::placeholder { color: #5f6770; }
.odometer__input:focus { outline: none; }

.odometer__unit {
  color: #9aa3ad;
  font-size: 1.2rem;
  font-weight: 700;
  padding-left: .5rem;
}

/* ---------- Erfassen ---------- */

.entry { display: grid; gap: .75rem; }
.entry__title { margin-bottom: .25rem; }

.entry__hint { margin: 0; min-height: 1.5em; }
.delta { font-weight: 600; color: var(--muted); }
.is-valid .delta   { color: var(--green); }
.is-invalid .delta { color: var(--red); }

.entry__date summary {
  cursor: pointer;
  list-style: none;
  color: var(--muted);
}
.entry__date summary::-webkit-details-marker { display: none; }
.entry__date[open] summary { margin-bottom: .6rem; }
.entry__date .label { display: block; margin-bottom: .3rem; }

.signs { border: 0; padding: 0; margin: 1rem 0 0; min-width: 0; }
.signs__legend { font-weight: 700; padding: 0; margin-bottom: .75rem; }
.signs__list { display: grid; gap: .75rem; max-width: 28rem; }

/* Kategorien als Wegweiser: blaues Schild mit weißer Innenkante */
.sign {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 3.75rem;
  padding: .8rem 1.25rem;
  border: 0;
  border-radius: var(--radius-m);
  background: var(--blue);
  color: var(--white);
  font: inherit;
  font-size: 1.2rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  box-shadow: inset 0 0 0 4px var(--blue), inset 0 0 0 6px rgba(255,255,255,.9);
  transition: transform .08s ease, background-color .15s ease;
}
.sign::after {
  content: "";
  width: .7rem; height: .7rem;
  border-top: 3px solid currentColor;
  border-right: 3px solid currentColor;
  transform: rotate(45deg);
  flex-shrink: 0;
  margin-left: 1rem;
}
.sign:hover { background: var(--blue-dark); box-shadow: inset 0 0 0 4px var(--blue-dark), inset 0 0 0 6px #fff; }
.sign:active { transform: scale(.985); }
.sign:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.sign__name { overflow-wrap: anywhere; }

/* ---------- Auswertung ---------- */

.month-nav {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1.25rem;
}
.month-nav__title { margin: 0; flex: 1; }
.month-nav__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem; height: 2.75rem;
  border-radius: var(--radius-s);
  background: var(--white);
  color: var(--blue);
  font-size: 1.6rem;
  font-weight: 700;
  text-decoration: none;
  line-height: 1;
}
.month-nav__step:hover { background: #dfe6f0; }
.month-nav__step.is-disabled { color: var(--line); background: transparent; }
.month-nav__title { order: -1; }

.totals {
  background: var(--white);
  border-radius: var(--radius-m);
  padding: 1rem 1.25rem;
}
.totals__table { width: 100%; border-collapse: collapse; }
.totals__table th { text-align: left; font-weight: 600; padding: .45rem 0; }
.totals__table td { padding: .45rem 0 .45rem 1rem; }
.totals__table .num { font-weight: 700; font-size: 1.1rem; }
.totals__table tfoot th,
.totals__table tfoot td { border-top: 2px solid var(--asphalt); font-weight: 800; padding-top: .6rem; }
.totals__bar-cell { width: 35%; }
.totals__bar {
  display: block;
  height: .6rem;
  width: var(--share);
  min-width: 2px;
  border-radius: 3px;
  background: var(--blue);
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem 1rem;
  margin-top: 2rem;
}
.section-head h2 { margin: 0; }

.table-scroll { position: relative; overflow-x: auto; margin-top: .75rem; }
.trips__table { width: 100%; border-collapse: collapse; background: var(--white); border-radius: var(--radius-m); }
.trips__table th, .trips__table td { padding: .65rem .75rem; text-align: left; border-bottom: 1px solid var(--line); }
.trips__table th { font-size: .9rem; color: var(--muted); font-weight: 600; }
.trips__table .num { text-align: right; }
.trips__table tbody tr:last-child td { border-bottom: 0; }
.row-actions { white-space: nowrap; text-align: right !important; }
.row-actions > * + * { margin-left: .75rem; }
.row-actions .link-like { text-decoration: none; font-size: .95rem; }
.row-actions .link-like:hover { text-decoration: underline; }

/* Handy: jede Fahrt als kompakter Block statt Tabellenzeile */
@media (max-width: 40rem) {
  .trips__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .trips__table, .trips__table tbody { display: block; }
  .trips__table tr {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "date dist" "cat odo" "act act";
    gap: .1rem 1rem;
    padding: .7rem 1rem;
    border-bottom: 1px solid var(--line);
  }
  .trips__table tbody tr:last-child { border-bottom: 0; }
  .trips__table td { padding: 0; border: 0; }
  .trips__table td:nth-child(1) { grid-area: date; font-weight: 700; }
  .trips__table td:nth-child(2) { grid-area: cat; }
  .trips__table td:nth-child(3) { grid-area: dist; font-weight: 700; }
  .trips__table td:nth-child(4) { grid-area: odo; font-size: .9rem; }
  .trips__table td:nth-child(4)::before { content: "Stand "; }
  .trips__table td.row-actions { grid-area: act; text-align: left !important; margin-top: .3rem; font-size: .95rem; }
  .row-actions:empty { display: none; }
  .totals__bar-cell { width: 25%; }
}

.footnote { margin-top: .75rem; font-size: .9rem; color: var(--muted); }

.empty {
  background: var(--white);
  border-radius: var(--radius-m);
  padding: 1.5rem 1.25rem;
}

/* ---------- Kategorien ---------- */

.cat-list { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: .75rem; max-width: 32rem; }
.cat { background: var(--white); border-radius: var(--radius-m); padding: .9rem 1rem; }
.cat__form { display: flex; gap: .5rem; align-items: center; }
.cat__form .input { flex: 1; min-width: 0; }
.cat__form--new { max-width: 32rem; }
.cat__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  margin-top: .6rem;
  font-size: .92rem;
}
.cat__tools { display: flex; align-items: center; gap: .4rem; }
.cat__tools .link-like { margin-left: .4rem; }

.choices { border: 0; padding: 0; margin: 0; display: grid; gap: .5rem; }
.choice {
  display: flex; align-items: center; gap: .7rem;
  padding: .75rem 1rem;
  background: var(--white);
  border: 2px solid var(--line);
  border-radius: var(--radius-s);
  cursor: pointer;
  font-weight: 600;
}
.choice:has(input:checked) { border-color: var(--blue); }
.choice input { width: 1.2rem; height: 1.2rem; accent-color: var(--blue); }

/* ---------- Konto ---------- */

.panel { margin-top: 1.5rem; padding: 1.25rem; background: var(--white); border-radius: var(--radius-m); }
.panel h2 { margin-top: 0; }
.panel--danger { border: 2px solid rgba(179, 38, 30, .35); }

/* ---------- Öffentliche Seiten ---------- */

.auth { max-width: 28rem; padding-top: 1rem; }
.auth__switch { margin-top: 2rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}