/* Fangstrapport — udseende.
   Ét ark, ingen ramme udefra. Appen har to brugere og skal kunne
   vedligeholdes om to år uden at nogen skal installere et byggeværktøj
   først. */

:root {
  --vand: #0d3b4f;
  --vand-lys: #135a76;
  --sand: #f5f1e8;
  --papir: #ffffff;
  --blaek: #16202a;
  --daempet: #5c6b78;
  --kant: #dfd9cc;
  --groen: #2e7d54;
  --roed: #b3261e;
  --skygge: 0 1px 2px rgba(0,0,0,.06), 0 4px 14px rgba(0,0,0,.06);
  --radius: 14px;

  /* Grafernes farver står for sig selv og ikke sammen med sidens øvrige.
     De to serier er de to fiskere, og farven hører til PERSONEN — ikke
     til hvem der fører i år. Værdierne er valideret for lysstyrke,
     farvestyrke, kontrast mod fladen og for at kunne skelnes ved
     rød-grøn farveblindhed; de er ikke valgt efter øjemål. */
  --serie-1: #2a78d6;
  --serie-2: #eb6834;
  --serie-3: #1baf7a;
  --serie-4: #eda100;
  --serie-5: #e87ba4;
  --serie-6: #008300;
  --serie-7: #4a3aa7;
  --serie-8: #e34948;
  --graf-akse: #cfc8b9;
}

/* Telefonen står ofte i mørk tilstand, og appen bruges udendørs i
   skiftende lys. Farverne byttes om, resten af arket rører sig ikke. */
@media (prefers-color-scheme: dark) {
  :root {
    --sand: #10161c;
    --papir: #182028;
    --blaek: #e8eef3;
    --daempet: #93a3b1;
    --kant: #2a3540;
    --skygge: 0 1px 2px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.35);

    /* Egne trin til den mørke flade — ikke de samme farver vendt om.
       De er valideret mod #182028, som er kortenes baggrund her. */
    --serie-1: #3987e5;
    --serie-2: #d95926;
    --serie-3: #199e70;
    --serie-4: #c98500;
    --serie-5: #d55181;
    --serie-6: #008300;
    --serie-7: #9085e9;
    --serie-8: #e66767;
    --graf-akse: #33404c;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--sand);
  color: var(--blaek);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* iOS zoomer ind på et inputfelt med mindre end 16px skrift. Derfor
     ligger grundstørrelsen fast på 16. */
  -webkit-text-size-adjust: 100%;
}

.hidden, .skjul { display: none !important; }

/* ---- login ---- */
.login {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: linear-gradient(160deg, var(--vand), var(--vand-lys));
}
.login-kort { width: min(380px, 100%); }
.login-kort h1 { margin: 0 0 4px; }
.under { margin: 0 0 20px; color: var(--daempet); }

/* ---- ramme ---- */
.top {
  background: var(--vand);
  color: #fff;
  padding: env(safe-area-inset-top) 0 0;
  position: sticky;
  top: 0;
  z-index: 5;
}
.top-inder {
  max-width: 720px;
  margin: 0 auto;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.top h1 { font-size: 19px; margin: 0; }
.top-hoejre { display: flex; align-items: center; gap: 10px; }
.hilsen { font-size: 14px; opacity: .85; }

.indhold {
  max-width: 720px;
  margin: 0 auto;
  padding: 16px 16px calc(40px + env(safe-area-inset-bottom));
  display: grid;
  gap: 20px;
}

.kort {
  background: var(--papir);
  border: 1px solid var(--kant);
  border-radius: var(--radius);
  box-shadow: var(--skygge);
  padding: 18px;
}
h2 { font-size: 17px; margin: 0 0 14px; }

/* ---- nøgletal ---- */
.stat-raekke { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.stat {
  background: var(--papir);
  border: 1px solid var(--kant);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.stat b { display: block; font-size: 22px; line-height: 1.2; }
.stat span { color: var(--daempet); font-size: 13px; }

/* ---- formular ---- */
form { display: grid; gap: 14px; }
label { display: grid; gap: 6px; font-size: 14px; font-weight: 600; }
.valgfri { font-weight: 400; color: var(--daempet); }
input, textarea, select {
  font: inherit;
  color: inherit;
  background: var(--sand);
  border: 1px solid var(--kant);
  border-radius: 10px;
  padding: 11px 12px;
  width: 100%;
}
input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--vand-lys);
  outline-offset: 1px;
}
textarea { resize: vertical; }
.felter { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.felter .bred { grid-column: 1 / -1; }
.hjaelp { font-weight: 400; font-size: 12.5px; color: var(--daempet); }

/* Filfeltet er en <label> om et skjult input: browserens egen knap kan
   ikke sættes op, og på en telefon skal målet være stort. */
.fil-felt {
  border: 2px dashed var(--kant);
  border-radius: var(--radius);
  padding: 22px 16px;
  text-align: center;
  cursor: pointer;
  color: var(--daempet);
  font-weight: 600;
}
.fil-felt:hover, .fil-felt:focus-within { border-color: var(--vand-lys); color: var(--vand-lys); }
.fil-felt input { position: absolute; width: 1px; height: 1px; opacity: 0; }

.forhaand {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: 12px;
  align-items: start;
}
.forhaand img { width: 96px; height: 96px; object-fit: cover; border-radius: 10px; }
.meta-boks { font-size: 13.5px; display: grid; gap: 4px; align-content: start; }
.meta-boks .linje { display: flex; gap: 7px; align-items: baseline; }
.meta-boks .navn { color: var(--daempet); min-width: 62px; }
.meta-status { margin: 0; color: var(--daempet); }
.meta-mangler { color: var(--daempet); font-style: italic; }

/* ---- knapper ---- */
.knap {
  font: inherit;
  font-weight: 600;
  border: 1px solid var(--kant);
  background: var(--papir);
  color: var(--blaek);
  border-radius: 10px;
  padding: 11px 16px;
  cursor: pointer;
  /* 44px er den mindste flade, en finger rammer sikkert. */
  min-height: 44px;
  /* Knapper er både <button> og <a>. Reglerne står her frem for i en
     style-attribut: siden kører med default-src 'self', og en inline
     stil bliver blokeret af browseren uden at efterlade andet end en
     linje i konsollen. */
  text-decoration: none;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.knap-blok { display: flex; width: 100%; }
.knap:hover { border-color: var(--vand-lys); }
.knap.primaer { background: var(--vand); border-color: var(--vand); color: #fff; }
.knap.primaer:hover { background: var(--vand-lys); }
.knap.primaer:disabled { opacity: .6; cursor: progress; }
.knap.lille { padding: 6px 12px; min-height: 34px; font-size: 14px; }
.top .knap.lille { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.knap.valgt { background: var(--vand); border-color: var(--vand); color: #fff; }
.knap.fare { color: var(--roed); border-color: transparent; background: transparent; padding: 4px 8px; min-height: 32px; }

.fejl { color: var(--roed); font-size: 14px; margin: 0; }

/* ---- logbog ---- */
.liste-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.liste-top h2 { margin: 0; }
.filtre { display: flex; gap: 6px; }
.liste { display: grid; gap: 12px; }

.fangst {
  background: var(--papir);
  border: 1px solid var(--kant);
  border-radius: var(--radius);
  box-shadow: var(--skygge);
  overflow: hidden;
  display: grid;
  grid-template-columns: 130px 1fr;
}
.fangst img {
  width: 130px;
  height: 100%;
  min-height: 130px;
  object-fit: cover;
  cursor: zoom-in;
  display: block;
  background: var(--sand);
}
.fangst-krop { padding: 12px 14px; display: grid; gap: 6px; align-content: start; }
.fangst-top { display: flex; justify-content: space-between; align-items: start; gap: 8px; }
.fangst h3 { margin: 0; font-size: 17px; }
.maal { font-variant-numeric: tabular-nums; font-weight: 600; }
.maal span { color: var(--daempet); font-weight: 400; }
.detaljer { display: grid; gap: 3px; font-size: 13px; color: var(--daempet); }
.detaljer a { color: var(--vand-lys); }
.noter { font-size: 13.5px; margin: 2px 0 0; }

/* Mærkat, der siger, hvor datoen kommer fra. Uden den kan man ikke se
   forskel på kameraets tidspunkt og et, nogen har tastet bagefter. */
.maerkat {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid currentColor;
  vertical-align: 1px;
}
.maerkat.exif { color: var(--groen); }
.maerkat.manuel { color: var(--daempet); }

.tom { color: var(--daempet); text-align: center; padding: 28px 12px; }

/* ---- billede i fuld størrelse ---- */
.lup {
  border: none;
  border-radius: var(--radius);
  padding: 0;
  background: var(--papir);
  max-width: 96vw;
  max-height: 92dvh;
}
.lup::backdrop { background: rgba(0,0,0,.75); }
.lup img { display: block; max-width: 96vw; max-height: 78dvh; }
.lup .luk { margin: 10px; }

@media (max-width: 430px) {
  .fangst { grid-template-columns: 104px 1fr; }
  .fangst img { width: 104px; min-height: 104px; }
  .felter { grid-template-columns: 1fr; }

  /* På en telefon er der ikke plads til billede, tekst OG knap på
     samme linje: "Apple iPhone 14 Pro" brækker midt over. Billedet og
     fortryd-knappen bliver stående øverst, og oplysningerne får hele
     bredden nedenunder. */
  /* Pladserne sættes udtrykkeligt. Uden det lander fortryd-knappen på
     en tredje række under teksten, fordi metadata-boksen har taget
     hele række to. */
  .forhaand > img { grid-row: 1; grid-column: 1; }
  .forhaand > .knap.fjern { grid-row: 1; grid-column: 3; }
  .meta-boks { grid-row: 2; grid-column: 1 / -1; }
  .meta-boks .navn { min-width: 74px; }
}

/* ---- kort ---- */
.vaerktoej { display: flex; gap: 8px; flex-wrap: wrap; }
#kort {
  /* Leaflet kan ikke regne uden en højde. 60dvh på en telefon er stort
     nok til at man kan se pladserne uden at skulle scrolle i kortet. */
  height: 60dvh;
  min-height: 320px;
  border-radius: var(--radius);
  border: 1px solid var(--kant);
  /* Kortet skal ikke ligge oven på den faste top, når siden scroller. */
  z-index: 0;
}
.uden-position { color: var(--daempet); font-size: 13px; margin: 8px 2px 0; }

/* Leaflets bobler er hvide som standard. Her følger de resten af siden,
   så kortet ikke lyser i mørk tilstand. */
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
  background: var(--papir);
  color: var(--blaek);
}
.leaflet-popup-content { margin: 10px 12px; }
.leaflet-container {
  background: var(--sand);
  /* Kun skrifttypen arves. Sætter man hele font-kortslutningen, arver
     Leaflets zoomknapper og kildeangivelse også sidens 16px og bliver
     dobbelt så store, som de skal være. */
  font-family: inherit;
}
.leaflet-container a { color: var(--vand-lys); }
.boble { display: flex; gap: 10px; align-items: start; font-size: 13.5px; }
.boble img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; cursor: zoom-in; }
.boble strong { font-size: 15px; }
.boble .daempet { color: var(--daempet); }

/* ---- dialog ---- */
.dialog {
  border: 1px solid var(--kant);
  border-radius: var(--radius);
  background: var(--papir);
  color: var(--blaek);
  padding: 20px;
  width: min(420px, 92vw);
  box-shadow: var(--skygge);
}
.dialog::backdrop { background: rgba(0,0,0,.55); }
.dialog h2 { margin-top: 0; }
.dialog-knapper { display: flex; gap: 10px; justify-content: flex-end; }
.dialog-knapper .knap { flex: 1; }

/* Kameraets dato vises som tekst og ikke som et felt: et låst felt
   ligner noget, der kan ændres, og det kan den ikke. */
.laast {
  margin: 0;
  padding: 10px 12px;
  background: var(--sand);
  border: 1px solid var(--kant);
  border-radius: 10px;
  font-size: 13.5px;
  color: var(--daempet);
}

.kort-knapper { display: flex; gap: 2px; flex-shrink: 0; }
.knap.tekst {
  color: var(--vand-lys);
  border-color: transparent;
  background: transparent;
  padding: 4px 8px;
  min-height: 32px;
}

/* ---- sæson ---- */
.saeson { display: grid; gap: 16px; }
.saeson-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.saeson-top select { width: auto; font-weight: 600; }
.saeson h3 { font-size: 15px; margin: 0 0 14px; }

.graf-boks { position: relative; }
.graf-boks svg { display: block; width: 100%; height: auto; overflow: visible; }

/* Teksten i en graf bærer ALDRIG seriens farve. En lys søjlefarve er
   ulæselig som skrift, og identiteten kommer fra den farvede klat ved
   siden af — ikke fra at farve bogstaverne. */
.graf-tekst { fill: var(--daempet); font-size: 11px; }
.graf-vaerdi { fill: var(--blaek); font-size: 11px; font-weight: 700; }

.signatur { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; font-size: 13px; }
.signatur span { display: inline-flex; align-items: center; gap: 6px; }
.signatur i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }

/* Boblen følger fingeren eller musen. Den er placeret af JavaScript og
   må ikke selv kunne fange klikket — ellers blinker den, når man
   bevæger sig hen over den. */
.graf-boble {
  position: absolute;
  pointer-events: none;
  background: var(--blaek);
  color: var(--papir);
  font-size: 12px;
  line-height: 1.35;
  padding: 6px 9px;
  border-radius: 8px;
  transform: translate(-50%, -100%);
  white-space: nowrap;
  z-index: 3;
}

.rekord-liste { display: grid; gap: 12px; }
.rekord {
  border: 1px solid var(--kant);
  border-radius: var(--radius);
  padding: 12px 14px;
  display: grid;
  gap: 8px;
}
.rekord-navn { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.rekord-navn i { width: 11px; height: 11px; border-radius: 3px; }
.rekord-tal { color: var(--daempet); font-size: 13px; }
.rekord-raekke { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.rekord-raekke img { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; cursor: zoom-in; }
.rekord-raekke b { font-variant-numeric: tabular-nums; }
.rekord-maerkat { color: var(--daempet); min-width: 62px; font-size: 12px; }

/* Artssøjlerne: navn, søjle og tal på én linje, så navnet kan læses
   uanset hvor kort søjlen er. */
.art-raekke {
  display: grid;
  grid-template-columns: minmax(72px, 34%) 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
}
.art-navn { font-size: 13.5px; overflow-wrap: anywhere; }
.art-spor { background: var(--sand); border-radius: 4px; height: 14px; }
.art-soejle {
  height: 14px;
  background: var(--serie-1);
  /* Skarp ved nullinjen til venstre, rundet i dataenden til højre. */
  border-radius: 0 4px 4px 0;
}
.art-antal { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 18px; text-align: right; }

/* ---- administration ---- */
.afkryds { display: flex; align-items: center; gap: 9px; font-weight: 400; }
.afkryds input { width: auto; margin: 0; }
.kvittering {
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--sand);
  border: 1px solid var(--groen);
  color: var(--blaek);
  font-size: 14px;
}
.kvittering code {
  display: inline-block;
  margin-top: 4px;
  font-size: 15px;
  letter-spacing: .5px;
  user-select: all;
}
.brugerliste { display: grid; gap: 8px; }
.bruger-raekke {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding: 9px 0;
  border-bottom: 1px solid var(--kant);
}
.bruger-raekke:last-child { border-bottom: none; }
.bruger-navn { font-weight: 700; }
.bruger-mail { color: var(--daempet); font-size: 13.5px; overflow-wrap: anywhere; }
.bruger-tal { margin-left: auto; color: var(--daempet); font-size: 13px; }
.lille-maerkat {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid currentColor;
  color: var(--vand-lys);
}
.lille-maerkat.advarsel { color: var(--roed); }

.paamindelse {
  margin: 0;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: var(--papir);
  border: 1px solid var(--groen);
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.paamindelse .knap { margin-left: auto; }
.login .knap.tekst { width: 100%; color: var(--vand-lys); }

/* Fortryd-knappen på det valgte billede. Et kryds og ikke et ord: den
   sidder i hjørnet af en forhåndsvisning, hvor der ikke er plads til
   mere, og aria-label bærer betydningen for den, der ikke ser det. */
.knap.fjern {
  min-height: 32px;
  width: 32px;
  padding: 0;
  border-radius: 999px;
  font-size: 15px;
  line-height: 1;
  color: var(--daempet);
  flex-shrink: 0;
}
.knap.fjern:hover { color: var(--roed); border-color: var(--roed); }

#forhaand-kort {
  height: 200px;
  margin-top: 12px;
  border-radius: var(--radius);
  border: 1px solid var(--kant);
  z-index: 0;
}
.meta-sted { font-weight: 600; }

/* Farvevælgeren på administrationssiden. */
.farvevalg { display: flex; gap: 5px; flex-basis: 100%; margin-top: 2px; }
.farveprik {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 2px solid transparent;
  padding: 0;
  cursor: pointer;
  /* Ringen om den valgte tegnes uden for prikken, så farven selv ikke
     bliver mindre og dermed sværere at sammenligne med de andre. */
  box-shadow: 0 0 0 1px var(--kant);
}
.farveprik.valgt { border-color: var(--blaek); box-shadow: 0 0 0 1px var(--papir); }
.farveprik:disabled {
  cursor: not-allowed;
  opacity: .45;
  /* En streg over. Farven alene kan ikke bære "kan ikke vælges" — det
     ville netop være at bruge farve som eneste signal, i en vælger der
     handler om at farver kan forveksles. */
  background-image: linear-gradient(45deg, transparent 42%, var(--blaek) 42%,
                    var(--blaek) 58%, transparent 58%);
}