/* Samkørsel. Alt er afgrænset til .samk, så temaet ikke ændrer udseendet. Ingen eksterne skrifttyper. */
.samk {
  --bg: #F2F5F5;
  --surface: #FFFFFF;
  --ink: #14232A;
  --muted: #566870;
  --line: #D3DDDF;
  --accent: #0F5C66;
  --accent-ink: #FFFFFF;
  --driver-bg: #D9EEF0;
  --warn-bg: #FBEBD0;
  --danger: #A3262A;
  --av-l: 84%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  color: var(--ink);
  color-scheme: light;
}
.samk *, .samk *::before, .samk *::after { box-sizing: border-box; }
.samk[hidden], .samk [hidden] { display: none !important; }
.samk-root { background: var(--bg); border-radius: 12px; padding: 24px 16px 40px; }
.samk .wrap { max-width: 960px; margin: 0 auto; display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.samk header { display: flex; flex-direction: column; gap: 8px; }
.samk .eyebrow { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.samk .samk-title { font-size: clamp(2rem, 6vw, 3rem); line-height: 1.05; font-weight: 800; margin: 0; padding: 0; color: var(--ink); text-wrap: balance; }
.samk .samk-h { font-size: 1.25rem; line-height: 1.25; font-weight: 700; margin: 0; padding: 0; color: var(--ink); text-wrap: balance; letter-spacing: normal; text-transform: none; }
.samk .intro { margin: 0; color: var(--muted); max-width: 62ch; }

.samk .card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 20px; }
.samk form { display: flex; flex-direction: column; gap: 18px; margin: 0; }
.samk fieldset { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.samk legend { padding: 0; font-weight: 700; margin-bottom: 8px; }
.samk .choices { display: flex; flex-wrap: wrap; gap: 8px; }
.samk .choice { position: relative; display: block; margin: 0; }
.samk .choice input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.samk .choice span {
  display: block; padding: 10px 16px; border: 1.5px solid var(--line); border-radius: 8px;
  background: var(--bg); font-weight: 600; user-select: none;
}
.samk .choice input:checked + span { border-color: var(--accent); background: var(--driver-bg); color: var(--ink); }
.samk .choice input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }

.samk .fields, .samk .sheet-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 14px; }
.samk .field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.samk .field.wide { grid-column: 1 / -1; }
.samk label { font-weight: 700; font-size: 15px; margin: 0; display: block; }
.samk .opt { font-weight: 400; color: var(--muted); }
.samk .lbl { font-weight: 700; font-size: 15px; }
.samk input[type="text"], .samk input[type="time"], .samk input[type="number"], .samk input[type="email"], .samk textarea {
  font: inherit; font-size: 16px; color: var(--ink); background: var(--bg); box-shadow: none; height: auto; line-height: 1.3;
  border: 1.5px solid var(--line); border-radius: 8px; padding: 10px 12px; width: 100%; min-width: 0; margin: 0;
}
.samk input[type="file"] { font: inherit; color: var(--ink); max-width: 100%; }
.samk textarea { resize: vertical; min-height: 64px; }
.samk input:focus-visible, .samk textarea:focus-visible, .samk button:focus-visible, .samk a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.samk .hint { font-size: 14px; color: var(--muted); margin: 0; }
.samk .times { display: flex; flex-direction: column; gap: 10px; }
.samk .time-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.samk .time-row label { min-width: 170px; font-weight: 400; }
.samk .time-row input[type="time"] { width: auto; }
.samk .photo-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.samk .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.samk button { font-family: inherit; text-transform: none; letter-spacing: normal; }
.samk button.primary {
  font-size: 16px; font-weight: 700; background: var(--accent); color: var(--accent-ink);
  border: 0; border-radius: 8px; padding: 12px 24px; cursor: pointer; line-height: 1.2; box-shadow: none;
}
.samk button.primary:disabled { opacity: .5; cursor: default; }
.samk button.secondary {
  font-size: 16px; font-weight: 700; background: transparent; color: var(--ink);
  border: 1.5px solid var(--line); border-radius: 8px; padding: 10px 18px; cursor: pointer; line-height: 1.2; box-shadow: none;
}
.samk .status { margin: 0; font-weight: 700; min-height: 1.4em; }
.samk .status.ok { color: var(--accent); }
.samk .status.err { color: var(--danger); }
.samk .notice { margin: 0; padding: 12px 14px; border-radius: 8px; background: var(--warn-bg); color: var(--ink); border: 1px solid var(--line); }

.samk #days { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 20px; align-items: start; }
.samk .day { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.samk .day-head { border-bottom: 2px solid var(--ink); padding-bottom: 10px; }
.samk .trip { display: flex; flex-direction: column; gap: 14px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 14px; min-width: 0; }
.samk .trip-head { display: flex; flex-direction: column; gap: 2px; }
.samk .trip-title { font-weight: 700; font-size: 1.15rem; }
.samk .trip-note { font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.samk .trip-sum { color: var(--muted); font-size: 15px; font-variant-numeric: tabular-nums; }
.samk .cars { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 12px; }
.samk .car { background: var(--surface); border: 1.5px solid var(--line); border-radius: 10px; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.samk .car.selected { border-color: var(--accent); box-shadow: 0 0 0 1.5px var(--accent); }
.samk .car.full { opacity: .75; }
.samk button.pick {
  font-size: 16px; color: inherit; text-align: left; background: none; border: 0; padding: 14px 14px 10px; box-shadow: none;
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px; cursor: pointer; width: 100%; font-weight: 400;
}
.samk button.pick:disabled { cursor: default; }
.samk .pick-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; width: 100%; }
.samk .car-name { font-size: 17px; overflow-wrap: anywhere; }
.samk .car-sub { color: var(--muted); font-size: 15px; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.samk .cta { color: var(--accent); font-weight: 700; font-size: 15px; }
.samk .car-body { padding: 0 14px 12px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.samk .avatar {
  width: 64px; height: 64px; border-radius: 50%; overflow: hidden; flex: none;
  display: grid; place-items: center; font-weight: 700; font-size: 20px; color: var(--ink);
  background: hsl(var(--h, 190) 38% var(--av-l));
}
.samk .avatar img { width: 100%; height: 100%; object-fit: cover; display: block; max-width: none; }
.samk .pills { display: flex; flex-wrap: wrap; gap: 6px; }
.samk .pill { font-size: 13px; font-weight: 700; padding: 3px 10px; border-radius: 99px; background: var(--driver-bg); color: var(--ink); }
.samk .pill.full { background: var(--warn-bg); color: #8A5200; }
.samk .contact { font-size: 15px; user-select: all; overflow-wrap: anywhere; }
.samk .note { margin: 0; font-size: 15px; overflow-wrap: anywhere; }
.samk ul.pass { list-style: none; margin: 0; padding: 8px 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.samk ul.pass li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px; font-size: 14px; margin: 0; }
.samk ul.pass .who { overflow-wrap: anywhere; min-width: 0; }
.samk .car-actions { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.samk button.link {
  font-size: 14px; background: none; border: 0; padding: 4px 0; color: var(--muted); font-weight: 400;
  text-decoration: underline; cursor: pointer; box-shadow: none;
}
.samk button.link.confirm { color: var(--danger); font-weight: 700; }
.samk a.route { font-size: 14px; color: var(--accent); width: fit-content; }
.samk .empty { margin: 0; color: var(--muted); font-size: 15px; padding: 12px 14px; border: 1px dashed var(--line); border-radius: 8px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }

.samk .nav { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0; font-weight: 700; }
.samk .nav a { color: var(--accent); text-decoration: underline; }
.samk #overview { display: flex; flex-direction: column; gap: 12px; }
.samk #overview .hint { margin: 0; }
.samk .ov-list { display: flex; flex-direction: column; gap: 16px; }
.samk .ov-trip { display: flex; flex-direction: column; gap: 10px; }
.samk .ov-title { margin: 0; padding: 0 0 6px; font-size: 1.05rem; font-weight: 700; border-bottom: 2px solid var(--ink); color: var(--ink); text-transform: none; letter-spacing: normal; }
.samk .ov-car { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.samk .ov-head { display: flex; align-items: center; gap: 12px; }
.samk .ov-head .avatar { width: 44px; height: 44px; font-size: 15px; }
.samk .ov-text { display: flex; flex-direction: column; min-width: 0; }
.samk .ov-sub { font-size: 14px; font-weight: 700; color: var(--accent); }
.samk ul.ov-pass { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 15px; }
.samk ul.ov-pass li { margin: 0; overflow-wrap: anywhere; }
.samk .done { display: flex; flex-direction: column; gap: 10px; background: var(--driver-bg); border: 2px solid var(--accent); border-radius: 10px; padding: 16px; }
.samk .done p, .samk .done ul { margin: 0; overflow-wrap: anywhere; }
.samk .done ul { padding-left: 18px; }
.samk .done-head { display: flex; align-items: center; gap: 10px; }
.samk .done-badge { width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; flex: none; }
.samk .done-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.samk .banner { display: flex; align-items: center; gap: 8px; background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: 14px; padding: 7px 14px; }

.samk-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 99999; max-height: 85%; overflow: auto;
  background: var(--surface); border-top: 2px solid var(--accent); box-shadow: 0 -8px 24px rgba(0, 0, 0, .18);
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
}
.samk-sheet .sheet-in { max-width: 960px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.samk-sheet .sheet-head { display: flex; align-items: center; gap: 14px; }
.samk-sheet .sheet-head .avatar { width: 52px; height: 52px; font-size: 17px; }
.samk-sheet .sheet-titles { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.samk-sheet .sheet-titles .samk-h { font-size: 1.15rem; }
.samk-sheet .sheet-sub { color: var(--muted); font-size: 15px; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: no-preference) {
  .samk .car { transition: border-color .15s; }
}

.samk .trip-box { border: 1px solid rgba(128,128,128,.35); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.samk .trip-box textarea { width: 100%; box-sizing: border-box; }