/* ugeskemaet, gitteret og brikkerne i det.
   Flyttet ORDRET ud af styles.css 22-09-2026 (husreglen: 800 linjer).
   Raekkefoelgen i index.html er den samme som foer, saa kaskaden er uaendret. */

/* ---------------------------------------------------------------- week grid */

/* The sideways week. It scrolls inside its own box — the page itself must never
   scroll sideways, or the menu goes with it. */
.grid-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.weekgrid {
  display: grid;
  grid-template-columns: 170px repeat(7, minmax(130px, 1fr)) 70px;
  min-width: 1000px;
  font-size: 13px;
}
.wg-corner, .wg-day {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  padding: 8px 10px;
  font-weight: 600;
}
.wg-corner { left: 0; z-index: 3; }
.wg-corner.right { left: auto; text-align: right; font-weight: 500; color: var(--muted); }
.wg-day { display: flex; gap: 6px; align-items: baseline; }
.wg-day .dm { color: var(--muted); font-weight: 500; }
.wg-day.today { color: var(--accent-text); }

.wg-name {
  position: sticky;
  left: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  min-width: 0;
}
.wg-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wg-name.open { color: var(--warn-text); font-weight: 600; }

.wg-cell { border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); padding: 5px; min-height: 44px; }
.wg-cell.today { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.wg-total { border-bottom: 1px solid var(--line); padding: 8px 10px; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }

.wg-shift {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 7px;
  padding: 5px 7px;
  margin-bottom: 4px;
  cursor: pointer;
  line-height: 1.3;
}
.wg-shift:last-child { margin-bottom: 0; }
.wg-shift:hover { border-color: var(--accent); }
.wg-shift .t { display: block; font-weight: 600; font-variant-numeric: tabular-nums; font-size: 12px; }
.wg-shift .c { display: block; color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wg-shift.open .c { color: var(--warn-text); }

/* The empty square that starts a new shift on that day. Quiet until you are
   near it — it is an offer, not a thing to read. */
.wg-add {
  display: block;
  width: 100%;
  padding: 5px 7px;
  border: 1px dashed var(--line);
  border-radius: 7px;
  background: none;
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
  opacity: 0.55;
}
.wg-cell:hover .wg-add { opacity: 1; border-color: var(--accent); color: var(--accent-text); }
.wg-add:focus-visible { opacity: 1; }

.viewpick { flex: 0 0 auto; }

/* The papers on file, as small chips under the person. */
.papers { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }

.via-field { display: flex; align-items: flex-end; gap: 8px; margin-top: 10px; }
.via-field button { white-space: nowrap; }

/* A paper on the company's list: name, whether it runs out, and how early to
   say so. Wraps to two lines on a phone rather than shrinking to nothing. */
.cert-line { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.cert-line .rate-name { flex: 1 1 180px; min-width: 0; }
.cert-line select, .cert-line input {
  padding: 9px 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.cert-line .cert-annual { width: 80px; text-align: center; }
.cert-line .cert-warn { display: flex; align-items: center; gap: 6px; }
.cert-line .cert-warn .rate-value { width: 64px; text-align: right; }

.rate-line { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.rate-line .rate-name { flex: 1; min-width: 0; }
.rate-line .rate-value { width: 96px; text-align: right; }
.rate-line input {
  padding: 9px 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.badge.role { border-color: var(--accent); color: var(--accent-text); }

@media (max-width: 640px) {
  .row, .row-3 { grid-template-columns: 1fr; }
  .view { padding: 14px 10px 70px; }

  /* On a phone the status and the person get their own line under the shift,
     so neither the customer name nor the name of the guard gets squeezed. */
  .shift { flex-wrap: wrap; gap: 8px 12px; }
  .shift .time { min-width: 88px; }
  .shift .main { flex: 1 1 60%; }
  .shift .right {
    flex: 1 1 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: left;
  }
  .shift .right .who { color: var(--muted); }

  .weekbar .range { display: none; }
  .weekbar #newShift { flex: 1 1 100%; }
}

/* Faner på Medarbejdere. Tallet står med i knappen, så man kan se om der er
   noget at komme efter uden at klikke sig igennem dem alle. */
.staff-faner { flex-wrap: wrap; margin-bottom: 12px; }
.staff-faner .tal {
  display: inline-block;
  min-width: 1.4em;
  margin-left: 4px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.staff-faner .active .tal { background: rgba(255, 255, 255, 0.22); color: inherit; }

/* Sted og kolleger på brikken i ugeskemaet: man skal kunne læse hvem og hvor
   uden at klikke ind. Begge klippes med ellipse frem for at sprænge cellen. */
.wg-shift .hvor,
.wg-shift .med {
  display: block;
  font-size: 10.5px;
  line-height: 1.35;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wg-shift .med { font-style: italic; }

/* Kom i gang. Kortet står øverst på oversigten for et firma der ikke er
   færdigt med at sætte sig op, og forsvinder af sig selv når det er. */
.kom-i-gang { border-color: var(--accent); }
.kig-liste { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.kig-liste li { display: flex; align-items: center; gap: 10px; }
.kig-liste li.gjort { color: var(--muted); text-decoration: line-through; }
.kig-mark {
  flex: 0 0 auto;
  width: 20px; height: 20px; border-radius: 50%;
  border: 1px solid var(--line);
  display: grid; place-items: center;
  font-size: 12px; line-height: 1;
}
.kig-liste li.gjort .kig-mark { border-color: var(--ok); color: var(--ok-text); }

/* Ugeskemaet på Min profil: mal grønt dér hvor du kan.
   24 timer × 7 dage er 168 felter, og den første udgave blev en mur af mættet
   grønt med en kant om hvert eneste felt — 168 kanter og 168 råbende flader.
   Det almindelige svar er "jeg kan", så den tilstand skal netop IKKE råbe:
   fyldet er derfor dæmpet, og kanten forsvinder, når feltet er malet.
   Til gengæld står der en skillelinje ved 06, 12 og 18, så øjet kan finde
   rundt i døgnet uden at tælle rækker. */
.uge-gitter { user-select: none; touch-action: none; max-width: 340px; }
.uge-hoved, .uge-raekke { display: grid; grid-template-columns: 30px repeat(7, 1fr); gap: 2px; }
.uge-raekke { margin-bottom: 1px; }
.uge-hoved { margin-bottom: 6px; }
/* Døgnets fjerdedele. En hårfin linje er nok — en kraftig ville dele gitteret
   op i fire kasser i stedet for at hjælpe med at læse det. */
.uge-raekke.kvart { margin-top: 5px; padding-top: 4px; border-top: 1px solid var(--line); }
.uge-dag, .uge-time {
  background: none; border: 0; color: var(--muted); font-size: 11px;
  padding: 2px 0; cursor: pointer; font-family: inherit;
}
.uge-dag { font-weight: 600; }
.uge-time { font-variant-numeric: tabular-nums; opacity: 0.55; }
/* Kun hver tredje time skrives fuldt ud. Resten står svagt, så rækken kan
   rammes, uden at 24 tal konkurrerer om opmærksomheden. */
.uge-time.hel { opacity: 1; }
.uge-dag:hover, .uge-time:hover { color: var(--text); opacity: 1; }
.uge-celle {
  height: 24px; border: 1px solid var(--line); border-radius: 4px;
  background: transparent; cursor: pointer; padding: 0;
  transition: background-color 90ms linear;
}
.uge-celle.kan { background: rgba(34, 160, 107, 0.5); border-color: transparent; }
.uge-celle:hover { border-color: var(--muted); }
:root[data-theme='light'] .uge-celle.kan { background: rgba(22, 124, 78, 0.38); }

/* "Ret timer": planlagt, stemplet og foreslået står som et lille regnskab.
   Tallene i egen kolonne med tabular-nums, så de kan sammenlignes lodret —
   det er hele grunden til at de er her, i stedet for på skærmen bagved. */
.ret-tal {
  background: var(--surface-2);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ret-linje {
  display: grid;
  grid-template-columns: 5.5rem 1fr auto;
  align-items: baseline;
  gap: 8px;
  font-size: 14px;
}
.ret-linje > strong { text-align: right; font-variant-numeric: tabular-nums; }
.ret-linje > span:last-child:not(:nth-child(3)) { grid-column: 2 / -1; }

/* En knap der skal læses som en henvisning midt i en sætning, ikke som en
   handling man kan komme til at trykke på. */
.linkish {
  background: none;
  border: 0;
  padding: 0;
  color: var(--accent-text);
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
}

/* ---------------------------------------------------- ugen som kolonner */
/* Dage vandret, vagterne stablet i hver dag. Det er den retning, en vagtplan
   laeses i: man leder efter et tidspunkt paa en dag, ikke efter et navn. */
.uv-hoved { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 2px 8px; }
/* Ugen ligger samlet i ét afrundet kort, i samme sprog som forsiderne. */
.uv-wrap {
  overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 8px 24px rgba(0, 0, 0, 0.06);
}
@media (min-width: 901px) { .uv-wrap { overflow-x: visible; } }
/* Ugen skal FYLDE skaermen, ikke rulle. Syv lige brede kolonner, og teksten
   klippes i stedet for at skubbe bredden ud. Mellem telefon og skaerm rulles der. */
.uv-uge { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .uv-uge { grid-auto-flow: column; grid-auto-columns: minmax(170px, 1fr); grid-template-columns: none; }
}
/* Dagsstrimlen findes kun paa telefonen (se nedenfor). */
.uv-strimmel { display: none; }
/* Paa en telefon: én dag ad gangen. Strimlen med ugens syv dage oeverst, og den
   valgte dags vagter som kort under. Syv kolonner er for smalle at laese, og syv
   dage stablet blev en lang rulning efter den dag, man ledte efter. */
@media (max-width: 700px) {
  .uv-strimmel {
    display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin: 0 0 12px;
  }
  .uv-wrap { overflow-x: visible; background: none; border: 0; box-shadow: none; border-radius: 0; }
  .uv-uge { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: 1fr; }
  .uv-kol { border-right: 0; display: none; }
  .uv-kol.valgt { display: block; }
  .uv-dato { position: static; flex-direction: row; align-items: baseline; justify-content: space-between; gap: 8px; background: none; padding: 0 2px 6px; }
  .uv-kol.idag .uv-dato { background: none; }
  .uv-vagt { margin: 0 0 8px; padding: 12px 14px; }
  .uv-baand { padding: 8px 2px 6px; }
  .uv-nyt { margin: 4px 0 0; }
}
.uv-chip {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0 7px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: inherit; font: inherit; cursor: pointer;
}
.uv-c-dag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.uv-c-nr { font-size: 18px; font-weight: 750; line-height: 1.1; font-variant-numeric: tabular-nums; }
.uv-c-prik { width: 6px; height: 6px; border-radius: 50%; background: transparent; }
.uv-c-prik.har { background: var(--accent); }
.uv-c-prik.hul { background: var(--warn); }
.uv-chip.idag .uv-c-nr { color: var(--accent-text); }
.uv-chip.valgt { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.uv-chip.valgt .uv-c-dag, .uv-chip.valgt .uv-c-nr { color: var(--on-accent); }
.uv-chip.valgt .uv-c-prik.har { background: var(--on-accent); }

.uv-kol { border-right: 1px solid var(--line); min-width: 0; padding-bottom: 10px; }
.uv-kol:last-child { border-right: 0; }
.uv-kol.idag { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.uv-dato {
  position: sticky; top: 0; z-index: 2;
  padding: 10px 12px 8px; font-size: 14px;
  background: var(--surface); border-bottom: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 2px;
}
.uv-kol.idag .uv-dato { background: color-mix(in srgb, var(--accent) 5%, var(--surface)); }
/* Dagen som en lille kalenderblok: ugedag, stort tal, maaned. */
.uv-dag { display: flex; gap: 6px; align-items: baseline; }
.uv-ugedag { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.uv-nr {
  font-size: 20px; font-weight: 750; line-height: 1; font-variant-numeric: tabular-nums;
  min-width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
}
.uv-kol.idag .uv-nr { background: var(--accent); color: var(--on-accent); }
.uv-mdr { font-size: 12px; color: var(--muted); }
/* Dagens total: sekundaer, men laesbar uden at klikke. */
.uv-sum { font-size: 11.5px; font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; }
.uv-hul { color: var(--warn-text); font-weight: 600; }
/* Tidsrummet som en lille overskrift: alt der begynder 06:00 staar samlet. */
.uv-baand {
  padding: 10px 12px 4px; font-size: 12px; font-weight: 600; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.uv-vagt {
  display: flex; flex-direction: column; gap: 2px; width: calc(100% - 16px); margin: 0 8px 6px;
  text-align: left; padding: 8px 10px; border: 0; border-left: 4px solid var(--accent); border-radius: 10px;
  background: color-mix(in srgb, var(--type, var(--accent)) 9%, var(--surface));
  cursor: pointer; font: inherit; color: inherit; min-width: 0;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.uv-vagt:hover { background: color-mix(in srgb, var(--type, var(--accent)) 15%, var(--surface)); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); }
.uv-vagt.mangler { box-shadow: inset 0 0 0 1.5px var(--warn); }
.uv-navn { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uv-navn strong { font-variant-numeric: tabular-nums; }
.uv-mangler { font-size: 12.5px; color: var(--warn-text); font-weight: 700; }
.uv-rolle, .uv-hvor {
  font-size: 12px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.uv-tom { min-height: 60px; }

/* Hoejrekliksmenu paa ugeskemaet. Kun handlinger der findes -- en menu med
   graa punkter, der aldrig kan bruges, laerer folk at lade vaere. */
.ktx {
  position: fixed; z-index: 60; min-width: 190px; padding: 5px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: var(--shadow);
}
.ktx button {
  display: block; width: 100%; text-align: left; padding: 8px 12px;
  border: 0; background: none; border-radius: 6px; cursor: pointer;
  font: inherit; color: inherit;
}
.ktx button:hover:not(:disabled) { background: var(--surface-2); }
.ktx button:disabled { color: var(--muted); cursor: default; }
.ktx button.fare { color: var(--danger-text); }
.ktx-linje { height: 1px; background: var(--line); margin: 4px 6px; }

/* "+ Ny vagt" nederst i en dagkolonne. Diskret indtil man peger paa dagen. */
.uv-nyt {
  display: block; width: calc(100% - 16px); margin: 4px 8px 0; padding: 8px 10px;
  border: 1.5px dashed var(--line); border-radius: 10px; background: none;
  color: var(--muted); font: inherit; font-size: 13px; text-align: center;
  cursor: pointer; opacity: 0; transition: opacity 90ms linear;
}
.uv-kol:hover .uv-nyt, .uv-nyt:focus-visible { opacity: 1; }
/* Uden mus findes :hover ikke, og saa var knappen usynlig OG uopnaaelig paa
   en telefon -- lige dér hvor "tryk paa dagen for at oprette" skulle virke. */
@media (hover: none) {
  .uv-nyt { opacity: 1; }
}
.uv-nyt:hover { background: var(--surface-2); color: var(--accent-text); }

/* "Der er kommet en ny udgave." En bjaelke i bunden, ikke en modal: man skal
   kunne skrive sin vagt faerdig foerst. */
.ny-version {
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%);
  z-index: 70; display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: 999px;
  background: var(--accent); color: var(--on-accent);
  box-shadow: var(--shadow); font-size: 14px;
}
.ny-version button {
  border: 0; border-radius: 999px; padding: 5px 12px; cursor: pointer;
  background: var(--on-accent); color: var(--accent); font: inherit; font-weight: 600;
}

/* Adresseforslag. Ligger tæt under feltet, så det ikke ligner en ny sektion. */
.adr-liste {
  margin: -8px 0 4px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); overflow: hidden;
}
.adr-liste button {
  display: block; width: 100%; text-align: left; padding: 9px 12px;
  border: 0; background: none; cursor: pointer; font: inherit; color: inherit;
  border-bottom: 1px solid var(--line);
}
.adr-liste button:last-child { border-bottom: 0; }
.adr-liste button:hover { background: var(--surface-2); }

/* "Hent fra CVR" over navnefeltet: en genvej, ikke et krav. */
.cvr-hent {
  display: flex; align-items: flex-end; gap: 8px;
  padding: 10px 12px; margin-bottom: 4px;
  background: var(--surface-2); border-radius: 10px;
}

/* En fraværsperiode der løber lige nu skal springe i øjnene i listen. */
tr.nu > td { background: var(--warn-bg); }

/* Minikortet på lokationer. Felterne er absolut placerede, så hele kortet kan
   tegnes om ved at skrive én streng — det er billigere end at flytte rundt på
   elementer, og det er kun to gange i sekundet under et træk. */
.minikort {
  margin-bottom: 4px;
}
.mk-flade {
  position: relative;
  height: 220px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
  cursor: grab;
  touch-action: none;
}
.mk-flade:active {
  cursor: grabbing;
}
.mk-felter img {
  position: absolute;
  width: 256px;
  height: 256px;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}
.mk-prik {
  position: absolute;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  cursor: grab;
}
.mk-ring {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  border: 2px solid var(--accent);
  background: var(--accent-soft);
  opacity: 0.45;
}
.mk-zoom {
  position: absolute;
  right: 8px;
  top: 8px;
  display: grid;
  gap: 4px;
}
.mk-zoom button {
  width: 28px;
  height: 28px;
  padding: 0;
  font-size: 16px;
  line-height: 1;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
}
.mk-kilde {
  position: absolute;
  right: 4px;
  bottom: 2px;
  font-size: 10px;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  padding: 1px 4px;
  border-radius: 4px;
}
.mk-tom {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}
.mk-hjaelp {
  margin: 6px 0 0;
}

/* Træk og slip i ugeskemaet. Kolonnen skal lyse op FØR man slipper — ellers
   ved man ikke hvilken dag vagten lander på. */
.uv-vagt.traekkes {
  opacity: 0.4;
}
.uv-kol.over {
  background: var(--accent-soft);
  outline: 2px dashed var(--accent);
  outline-offset: -2px;
}
.uv-knapper { display: flex; gap: 8px; align-items: center; }
/* "Indsæt her" står kun i kolonnen mens noget er kopieret, så den skal ses
   uden at man peger på dagen — også på en mus. */
.uv-indsaet { opacity: 1; color: var(--accent-text); }

/* Trykflader på en telefon. Tallene her er ikke smag: en finger rammer ikke
   sikkert under ca. 36 px, og genetillæggene er 48 små chips ved siden af
   hinanden. Kun på berøringsskærme — på en mus er den tætte opstilling bedre,
   fordi man kan se hele opsætningen på én gang. */
@media (hover: none) {
  .chip {
    min-height: 36px;
    padding-top: 6px;
    padding-bottom: 6px;
  }
  .gene-navn,
  .gene-sats {
    min-height: 36px;
  }
  input[type='checkbox'] {
    min-width: 20px;
    min-height: 20px;
  }
}

/* "Kopieret: X ✕" i ugehovedet. Kopi-tilstanden skal kunne SES ét sted, og
   den skal kunne slippes igen — ellers står "Indsæt" i hver dag for evigt.
   Navnet hører til her, ikke gentaget syv gange nedad skærmen. */
.uv-hoved { flex-wrap: wrap; }
.uv-kopi {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 4px 3px 10px;
  font-size: 12.5px;
  color: var(--accent-text);
  background: var(--accent-soft);
  border-radius: 999px;
  max-width: min(100%, 320px);
}
.uv-kopi > button {
  flex: none;
  width: 22px;
  height: 22px;
  padding: 0;
  font-size: 12px;
  line-height: 1;
  color: inherit;
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.uv-kopi > button:hover { background: var(--surface); }
@media (hover: none) {
  .uv-kopi > button { width: 32px; height: 32px; }
}

/* Én linje pr. kontaktperson. Fire felter og et kryds — på en telefon stables
   de, for fire felter side om side på 375 px er ingen af dem læselige. */
.kontakt-linje {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1.4fr auto;
  gap: 6px;
  align-items: center;
  margin-bottom: 6px;
}
/* Felterne ligger IKKE inde i et <label> som resten af appens felter, og
   arvede derfor ikke deres udseende: 29 px hoeje mod 40 alle andre steder.
   Samme padding og ramme her, saa en kontaktlinje foeles som resten. */
.kontakt-linje input {
  min-width: 0;
  width: 100%;
  padding: 9px 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
}
@media (max-width: 700px) {
  .kontakt-linje {
    grid-template-columns: 1fr auto;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 10px;
  }
  .kontakt-linje .kt-navn { grid-column: 1; }
  .kontakt-linje .kt-fjern { grid-row: 1; grid-column: 2; }
  .kontakt-linje .kt-rolle,
  .kontakt-linje .kt-tlf,
  .kontakt-linje .kt-mail { grid-column: 1 / -1; }
}

/* En sletteknap må ikke stå klods op ad Gem. Der var otte pixels imellem på en
   telefon — det er inden for én fingerbredde. Den skubbes ud til kanten, så de
   to handlinger ikke kan forveksles i en fart. Står en fare-knap alene i
   rækken, bliver den hvor den er. */
.btn-row button + button.danger { margin-left: auto; }

/* Ydelser pr. stk på en opgave: "2 × Storebælt enkel tur". */
.ydelse-raekke {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
}
.ydelse-raekke > span:first-child { flex: 1; min-width: 0; }
.ydelse-tilfoej {
  display: grid;
  grid-template-columns: 1fr 64px auto;
  gap: 6px;
  margin: 8px 0 12px;
}
.ydelse-tilfoej select,
.ydelse-tilfoej input {
  min-width: 0;
  padding: 9px 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
}

/* Kolonnevalget i historik-importen: to i bredden, én på en telefon. */
.hist-felter { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.hist-felter select {
  display: block; width: 100%; margin-top: 4px; padding: 9px 10px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px;
}
@media (max-width: 700px) { .hist-felter { grid-template-columns: 1fr; } }

/* Ugeskemaet på en berøringsskærm: 24 px høje celler er for små at male med en
   finger. Lidt højere, så ruller man bare lidt mere. */
@media (pointer: coarse) {
  .uge-celle { height: 30px; }
}