/* Værkstedsregister – designsystem v2 (kort 15).
   Mørkeblå + rav-identitet, automatisk mørk tilstand (natarbejde),
   store berøringsflader og høj kontrast til udendørs brug. */

:root {
  --blaa: #0d2740;
  --blaa-dyb: #081a2e;
  --blaa-lys: #2563eb;
  --gul: #ffb300;
  --gul-moerk: #b97e00;

  --baggrund: #f2f5f8;
  --kort: #ffffff;
  --kort-kant: #e3e9ef;
  --tekst: #14202e;
  --dmp: #5f6f80;
  --felt-bg: #ffffff;

  --god: #15803d;
  --god-bg: #e9f5ec;
  --daarlig: #b3261e;
  --advarsel-bg: #fff6dd;
  --advarsel-tekst: #7a5b00;
  --advarsel-kant: #f0dca8;

  --radius: 16px;
  --radius-lille: 12px;
  --skygge: 0 1px 2px rgba(13, 39, 64, .06), 0 4px 16px rgba(13, 39, 64, .07);
  --topbar: linear-gradient(135deg, #0d2740 0%, #123354 70%, #16406b 100%);
}

/* Moerk tilstand foelger telefonens indstilling - natarbejde i marken */
@media (prefers-color-scheme: dark) {
  :root {
    --baggrund: #0b1724;
    --kort: #13263a;
    --kort-kant: #1e3a54;
    --tekst: #e8eef5;
    --dmp: #93a6b8;
    --felt-bg: #0f1f30;
    --god-bg: #11301d;
    --advarsel-bg: #332a0e;
    --advarsel-tekst: #ffd36b;
    --advarsel-kant: #5a4a14;
    --skygge: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 20px rgba(0, 0, 0, .35);
    --topbar: linear-gradient(135deg, #081a2e 0%, #0d2740 70%, #123354 100%);
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--baggrund); color: var(--tekst);
  padding-bottom: env(safe-area-inset-bottom);
  transition: background .25s;
}

#topbar {
  background: var(--topbar); color: #fff;
  padding: calc(12px + env(safe-area-inset-top)) 18px 12px;
  display: flex; justify-content: space-between; align-items: center;
  position: sticky; top: 0; z-index: 10;
  box-shadow: 0 2px 12px rgba(5, 15, 26, .35);
}
.brand { font-weight: 800; font-size: 17px; letter-spacing: .3px; }
.logo { color: var(--gul); margin-right: 6px; }
main { max-width: 560px; margin: 0 auto; padding: 18px 16px 40px; }
h1 { font-size: 24px; margin: 8px 0 4px; letter-spacing: -.3px; }
.dmp { color: var(--dmp); font-size: 14px; margin: 4px 0 12px; line-height: 1.45; }
.skjult { display: none !important; }
.fejl { color: var(--daarlig); font-weight: 600; }

label { display: block; font-size: 14px; font-weight: 600; margin: 14px 0 4px; }
input, select, textarea {
  width: 100%; padding: 14px; font-size: 16px;
  border: 1.5px solid var(--kort-kant); border-radius: var(--radius-lille);
  background: var(--felt-bg); color: var(--tekst);
  margin-top: 4px; font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--gul);
  box-shadow: 0 0 0 3px rgba(255, 179, 0, .25);
}

button {
  font-size: 16px; font-weight: 700; border: 0; border-radius: var(--radius-lille);
  padding: 15px 18px; background: var(--blaa); color: #fff;
  width: 100%; margin-top: 16px; cursor: pointer;
  transition: transform .08s, filter .15s;
}
@media (prefers-color-scheme: dark) { button { background: var(--blaa-lys); } }
button:active { transform: scale(.985); filter: brightness(1.1); }
button.ghost {
  background: transparent; color: var(--blaa-lys);
  width: auto; padding: 8px 12px; margin: 0; font-weight: 600;
}
#topbar button.ghost { color: #cfe0f0; }

.statuslinje {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 14px; color: var(--dmp); margin-bottom: 10px;
}
#listen { list-style: none; padding: 0; margin: 0; }
#listen li {
  background: var(--kort); border: 1px solid var(--kort-kant); border-radius: var(--radius);
  padding: 16px 18px; margin-bottom: 10px; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  box-shadow: var(--skygge);
  transition: transform .1s;
}
#listen li:active { transform: scale(.985); }
#listen .navn { font-weight: 700; font-size: 16px; }
#listen .adr { color: var(--dmp); font-size: 13px; margin-top: 2px; }
#listen .afstand {
  background: var(--gul); color: #081a2e; border-radius: 999px;
  font-size: 13px; font-weight: 800; padding: 6px 12px; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.infoboks {
  background: var(--kort); border: 1.5px dashed var(--kort-kant); border-radius: var(--radius);
  padding: 22px; text-align: center; color: var(--dmp);
}

.badge {
  display: inline-block; background: var(--god-bg); color: var(--god);
  border-radius: 999px; padding: 5px 14px; font-size: 13px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
@media (prefers-color-scheme: dark) { .badge { color: #6fd392; } }

.badgerael { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.badgerael span {
  background: var(--kort); border: 1px solid var(--kort-kant);
  color: var(--tekst); border-radius: 999px;
  padding: 6px 13px; font-size: 13px; font-weight: 700;
  box-shadow: var(--skygge);
}
#p-kortlagt { font-style: italic; }

.kodeadvarsel {
  background: var(--advarsel-bg); color: var(--advarsel-tekst);
  border: 1px solid var(--advarsel-kant);
  border-radius: var(--radius-lille); padding: 12px 14px; font-size: 14px; font-weight: 600;
}

dl {
  background: var(--kort); border: 1px solid var(--kort-kant);
  border-radius: var(--radius); padding: 8px 18px; margin: 14px 0;
  box-shadow: var(--skygge);
}
dt { font-size: 11px; text-transform: uppercase; letter-spacing: .8px; color: var(--dmp); margin-top: 12px; font-weight: 700; }
dd { margin: 3px 0 12px; font-size: 15px; line-height: 1.4; }

.fotorael { display: flex; gap: 10px; overflow-x: auto; margin: 12px 0; padding-bottom: 4px; }
.fotorael figure { margin: 0; flex: 0 0 auto; text-align: center; }
.fotorael img { height: 140px; border-radius: var(--radius-lille); display: block; box-shadow: var(--skygge); }
.fotorael figcaption { font-size: 12px; color: var(--dmp); margin-top: 4px; }
#p-kort { height: 260px; border-radius: var(--radius); margin: 12px 0; border: 1px solid var(--kort-kant); box-shadow: var(--skygge); }

.kodekort {
  background: var(--topbar); color: #fff; border-radius: var(--radius);
  padding: 20px; margin: 12px 0; text-align: center;
  box-shadow: 0 6px 24px rgba(8, 26, 46, .45);
}
.kodekort .felttitel { font-size: 13px; color: #a9c2da; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; }
.kodekort .selvekoden {
  font-size: 46px; font-weight: 800; letter-spacing: 6px; margin: 8px 0 4px;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 12px rgba(255, 179, 0, .25);
}
.kodekort .taeller { color: var(--gul); font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; }
.kodeknap { background: var(--gul); color: #081a2e; }
button.kodeknap:active { filter: brightness(.95); }

.bekraeft {
  background: var(--kort); border: 1px solid var(--kort-kant);
  border-radius: var(--radius); padding: 16px 18px; margin: 16px 0;
  box-shadow: var(--skygge);
}
.bekraeft p { margin: 2px 0 10px; font-weight: 600; }
.raekke { display: flex; gap: 10px; }
.raekke button { margin-top: 0; }
button.god { background: var(--god); }
button.daarlig { background: var(--daarlig); }

.trin {
  background: var(--kort); border: 1px solid var(--kort-kant);
  border-radius: var(--radius); padding: 8px 18px 18px;
  box-shadow: var(--skygge);
}
.trin h2 { font-size: 17px; }
.fotofelt {
  background: var(--baggrund); border: 1.5px dashed var(--blaa-lys);
  border-radius: var(--radius-lille); padding: 14px;
}
.fotofelt input { border: 0; background: transparent; padding: 6px 0 0; box-shadow: none; }
.fotofelt.valgt { border-style: solid; border-color: var(--god); background: var(--god-bg); }
.wizardnav { margin-top: 16px; }
.wizardnav .ghost { flex: 0 0 auto; }

#toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  background: #14202e; color: #fff; border-radius: var(--radius-lille);
  padding: 12px 20px; font-size: 14px; z-index: 50; max-width: 90%;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
  animation: toast-ind .2s ease-out;
}
@keyframes toast-ind { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-color-scheme: dark) { #toast { background: var(--gul); color: #081a2e; font-weight: 700; } }

/* Profilstatus (kort 20): tydeligt om vaerkstedet har faaet indlagt oplysninger */
#listen li { justify-content: flex-start; }
#listen .lok-tekst { flex: 1; min-width: 0; }
#listen .smiley { font-size: 26px; line-height: 1; flex: 0 0 auto; }
#listen .status { font-size: 13px; font-weight: 700; margin-top: 4px; }
#listen li.st-komplet { border-left: 6px solid var(--god); }
#listen li.st-komplet .navn, #listen li.st-komplet .status { color: var(--god); }
#listen li.st-delvis { border-left: 6px solid var(--gul); }
#listen li.st-delvis .status { color: var(--advarsel-tekst); }
#listen li.st-tjek { border-left: 6px solid var(--daarlig); }
#listen li.st-tjek .status { color: var(--daarlig); }
/* Ingen oplysninger (kort 23): gult udraabstegn + roed tekst, saa redderen opfordres til at kortlaegge */
#listen li.st-tom { border-left: 6px solid var(--daarlig); }
#listen li.st-tom .status { color: var(--daarlig); }
#listen li.st-tom .smiley {
  width: 30px; height: 30px; border-radius: 50%; background: var(--gul); color: #081a2e;
  display: grid; place-items: center; font-size: 20px; font-weight: 900; line-height: 1;
}
.statuspille { display: inline-block; font-size: 14px; font-weight: 700; padding: 6px 12px; border-radius: 999px; margin: 4px 0 10px; }
.statuspille.st-komplet { background: var(--god-bg); color: var(--god); }
.statuspille.st-delvis { background: var(--advarsel-bg); color: var(--advarsel-tekst); }
.statuspille.st-tjek { background: #fde8e7; color: var(--daarlig); }
.statuspille.st-tom { background: #fde8e7; color: var(--daarlig); }
.statuspille.st-tom .ikon { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  background: var(--gul); color: #081a2e; font-weight: 900; font-size: 14px; vertical-align: -3px; }
@media (prefers-color-scheme: dark) {
  #listen li.st-komplet .navn, #listen li.st-komplet .status { color: #6fd392; }
  #listen li.st-delvis .status { color: #ffcf5c; }
  #listen li.st-tjek .status { color: #ff8a80; }
  .statuspille.st-komplet { background: rgba(21,128,61,.18); color: #6fd392; }
  .statuspille.st-delvis { background: rgba(255,179,0,.15); color: #ffcf5c; }
  .statuspille.st-tjek { background: rgba(179,38,30,.2); color: #ff8a80; }
  #listen li.st-tom .status { color: #ff8a80; }
  .statuspille.st-tom { background: rgba(179,38,30,.2); color: #ff8a80; }
}