/* hjaelp, integrationer og alt det der aendrer sig med skaermens stoerrelse.
   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. */

/* ---------------------------------------------------------------- hjælp */
/* Fremskridt øverst: hvor langt er I? */
.hj-fremskridt { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; }
.hj-bar { flex: 1; height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; border: 1px solid var(--line); }
.hj-bar span { display: block; height: 100%; background: var(--ok); border-radius: 999px; }
.hj-fremskridt strong { font-size: 14px; white-space: nowrap; }

/* Punkterne. --border og --card fandtes ikke i appens farver, så kanterne og
   cirklen om de manglende punkter blev tegnet med ingenting. Nu: --line og
   --surface-2 som resten af appen. */
.hj-trin { display: flex; flex-direction: column; gap: 8px; }
.hj-punkt { border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.hj-punkt.naeste { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.hj-punkt summary { display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; list-style: none; }
.hj-punkt summary::-webkit-details-marker { display: none; }
.hj-mark {
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
  border: 2px solid var(--accent); color: var(--accent-text); background: var(--surface);
}
.hj-punkt.klar .hj-mark { background: var(--ok); border-color: var(--ok); color: #fff; }
.hj-titel { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hj-navn { font-weight: 600; }
.hj-punkt.klar .hj-navn { font-weight: 500; color: var(--muted); }
.hj-status { display: block; font-size: 13px; color: var(--warn-text); }
.hj-status::first-letter { text-transform: uppercase; }
.hj-punkt.klar .hj-status { color: var(--ok-text); }
.hj-naeste {
  display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; vertical-align: 1px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase;
  background: var(--accent); color: var(--on-accent);
}
.hj-pil { color: var(--muted); font-size: 20px; line-height: 1; transition: transform 0.15s; }
.hj-punkt[open] .hj-pil { transform: rotate(90deg); }
.hj-krop { padding: 0 14px 14px 54px; }
.hj-krop ol { margin: 8px 0 10px 18px; padding: 0; }
.hj-krop li { margin: 4px 0; }

/* Det færdige: samlet og foldet sammen, så listen er kort for et firma i drift. */
.hj-klare { margin-top: 12px; }
.hj-klare > summary { cursor: pointer; font-size: 14px; color: var(--muted); padding: 6px 0; }
.hj-klare > .hj-trin { margin-top: 8px; }
.hj-guide { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.hj-guide details { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--surface-2); }
.hj-guide summary { cursor: pointer; font-weight: 600; }
.hj-guide ol { margin: 8px 0 0 20px; padding: 0; }
.hj-guide li { margin: 4px 0; }
.hj-krav { display: grid; grid-template-columns: minmax(120px, 1fr) 2fr; gap: 6px 12px; align-items: center; }
.hj-krav .chips { gap: 4px; }
@media (max-width: 560px) { .hj-krav { grid-template-columns: 1fr; } .hj-krop { padding-left: 14px; } }

/* ------------------------------------------- telefon lagt ned (liggende) */
/* En telefon paa siden er 800 px bred og under 400 px hoej. Med den hoejde
   aad tallene, vaerktoejslinjen og menuen hele skaermen, og selve ugen laa
   under kanten. Her faar ugen pladsen: syv kolonner der passer i bredden,
   nøgletallene vaek, og alt andet lavere. */
@media (max-height: 480px) and (orientation: landscape) {
  .view { padding: 8px 10px 50px; }
  .tiles { display: none; }
  .weekbar { margin-bottom: 6px; }
  .weekbar .range { display: none; }
  .uv-hoved { padding-bottom: 4px; }
  .uv-wrap { overflow-x: visible; }
  .uv-uge { grid-auto-flow: row; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-columns: auto; }
  .uv-kol { border-right: 1px solid var(--line); border-bottom: 0; }
  .uv-kol:last-child { border-right: 0; }
  .uv-dato { flex-direction: column; padding: 5px 6px; font-size: 12.5px; }
  .uv-dag span { display: none; }
  .uv-baand { padding: 3px 6px; font-size: 11px; }
  .uv-vagt { padding: 5px 6px; }
  .uv-navn { font-size: 12px; }
  .uv-rolle, .uv-hvor, .uv-mangler { font-size: 11px; }
  .uv-tom { min-height: 30px; }
}

/* ================================================================ skal v2 */
/* Sidebjælke på computer, bundbjælke + ark på telefon. Reglerne herunder
   afløser den gamle vandrette menu; de står sidst i filen og vinder derfor. */
:root[data-theme='light'] {
  --bg: #f5f7fb;
  --line: #e2e7ef;
  --shadow: 0 6px 18px rgba(16, 24, 40, 0.08);
  --shadow-kort: 0 1px 2px rgba(16, 24, 40, 0.06);
}
:root, :root[data-theme='dark'] { --shadow-kort: 0 1px 2px rgba(0, 0, 0, 0.3); }

.topbar { padding: 8px 16px; min-height: 52px; }
.brand .word { font-size: 15px; letter-spacing: 0.6px; }
.shell { display: flex; flex: 1; min-height: 0; }

/* Menuen som sidebjælke. */
.nav {
  display: flex; flex-direction: column; gap: 14px;
  width: 224px; flex: none;
  padding: 16px 12px 24px;
  background: var(--surface);
  border-right: 1px solid var(--line); border-bottom: 0;
  overflow-x: visible; overflow-y: auto;
  position: sticky; top: 52px; height: calc(100dvh - 52px);
}
.nav-gruppe { display: flex; flex-direction: column; gap: 2px; }
.nav-overskrift {
  font-size: 11px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--muted); padding: 0 10px 6px;
}
.nav a {
  display: flex; align-items: center; gap: 10px;
  color: var(--text); text-decoration: none;
  padding: 8px 10px; border-radius: 9px; font-size: 14px; white-space: nowrap;
}
.nav a:hover { background: var(--surface-2); }
.nav a.active { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
.nav a .ikon {
  width: 22px; text-align: center; font-size: 15px; line-height: 1; opacity: 0.75; flex: none;
}
.nav a.active .ikon { opacity: 1; }
.nav a .tekst { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.nav a .pill { margin-left: auto; }
.nav-scrim { position: fixed; inset: 0; z-index: 29; background: var(--scrim); }

.view { padding: 22px 24px 60px; max-width: 1100px; width: 100%; margin: 0 auto; min-width: 0; }
.view.wide { max-width: none; }
h2 { font-size: 22px; font-weight: 700; margin: 0 0 16px; letter-spacing: -0.2px; }
.card { box-shadow: var(--shadow-kort); }
.tile { box-shadow: var(--shadow-kort); }
.tile .n { font-size: 28px; letter-spacing: -0.5px; }

/* Bundbjælken findes kun på telefon. */
.tabbar { display: none; }

@media (max-width: 900px) {
  .shell { display: block; }
  /* Menuen bliver et ark, der glider op over bundbjælken. */
  .nav {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto;
    width: auto; height: auto; max-height: 78dvh;
    z-index: 30; border-right: 0; border-top: 1px solid var(--line);
    border-radius: 18px 18px 0 0; box-shadow: var(--shadow);
    padding: 14px 14px calc(16px + env(safe-area-inset-bottom));
    transform: translateY(105%); transition: transform 0.22s ease;
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px 14px; align-content: start;
  }
  body.nav-open .nav { transform: translateY(0); }
  .nav a { padding: 10px 10px; }
  .nav-scrim { z-index: 28; }

  .tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 27;
    display: flex; justify-content: space-around; align-items: stretch;
    background: var(--surface); border-top: 1px solid var(--line);
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
  }
  .tabbar a, .tabbar button {
    flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 6px 2px 4px; border: 0; background: none; border-radius: 10px;
    color: var(--muted); text-decoration: none; font-size: 11px; line-height: 1.2;
    position: relative; cursor: pointer;
  }
  .tabbar .ikon { font-size: 19px; line-height: 1; }
  .tabbar .tekst { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tabbar .active { color: var(--accent-text); font-weight: 600; }
  .tabbar .pill {
    position: absolute; top: 2px; left: calc(50% + 6px);
    min-width: 17px; padding: 0 5px; border-radius: 9px;
    background: var(--accent); color: var(--on-accent); font-size: 10.5px; text-align: center;
  }
  .view { padding: 14px 12px calc(76px + env(safe-area-inset-bottom)); }
}

/* Filter over ugen: alle, dem der mangler folk, og én knap pr. vagttype med
   typens farve. Man leder efter "hvor mangler jeg en hundefører" -- ikke
   efter alt paa én gang. */
.uv-filter { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 8px; }
.uv-filter .chip { display: inline-flex; align-items: center; gap: 6px; }
.uv-filter .prik { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.uv-filter .chip.on .prik { outline: 2px solid var(--on-accent); outline-offset: -1px; }
.uv-rolle .prik { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: 0; }
/* Nøgletallene paa en telefon: tre smaa felter paa én linje, ikke tre kort
   der skubber ugen ud af skærmen. */
@media (max-width: 640px) {
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
  .tile { padding: 10px 10px 8px; }
  .tile .n { font-size: 20px; }
  .tile .l { font-size: 11.5px; line-height: 1.25; }
}

/* ================================================================ fase 2 */
/* Sidehoved: overskrift og dagens dato paa samme linje. */
.side-hoved { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.side-hoved h2 { margin: 0; }

/* Noegletal som knapper: samme udseende, men de kan trykkes paa. */
button.tile { text-align: left; cursor: pointer; font: inherit; color: inherit; width: 100%; transition: border-color 0.15s, transform 0.15s; }
button.tile:hover { border-color: var(--accent); transform: translateY(-1px); }
.tile.alert .l { color: var(--warn-text); }

/* Formularer i afsnit. En vagt er fire spoergsmaal -- hvor, hvornaar, hvem,
   noter -- og de skal staa som fire afsnit, ikke som femten felter i én soejle. */
.fs { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px 14px; margin: 0; display: flex; flex-direction: column; gap: 10px; background: var(--surface); }
.fs legend { padding: 0 6px; font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.fs-mere { border-top: 1px dashed var(--line); padding-top: 8px; display: flex; flex-direction: column; gap: 10px; }
.fs-mere summary { cursor: pointer; font-size: 13px; color: var(--accent-text); font-weight: 600; list-style: none; }
.fs-mere summary::-webkit-details-marker { display: none; }
.fs-mere summary::before { content: '›'; display: inline-block; margin-right: 6px; transition: transform 0.15s; }
.fs-mere[open] summary::before { transform: rotate(90deg); }
.vagtform .btn-row { position: sticky; bottom: -22px; background: var(--surface); padding: 12px 0 0; margin: 0; border-top: 1px solid var(--line); }
.modal-card h2 { margin-bottom: 14px; }
.modal-card { padding: 20px 22px 22px; }
@media (max-width: 640px) {
  .modal { padding: 0; align-items: end; }
  .modal-card { width: 100%; max-height: 94dvh; border-radius: 18px 18px 0 0; padding: 18px 16px calc(16px + env(safe-area-inset-bottom)); }
  .vagtform .btn-row { bottom: calc(-16px - env(safe-area-inset-bottom)); }
  .row-3 { grid-template-columns: 1fr 1fr; }
  .row-3 label:first-child { grid-column: 1 / -1; }
}

/* Medarbejderkort: to kolonner naar der er plads, handlingerne nederst til hoejre. */
.person-kort { display: flex; flex-direction: column; gap: 8px; }
.person-kort .person { align-items: flex-start; }
.person-kort .person strong { font-size: 15.5px; }
.person-kort .papers { margin-top: 2px; }
.person-handlinger { margin-top: auto; justify-content: flex-end; border-top: 1px solid var(--line); padding-top: 10px; }
.person-handlinger button { flex: 0 0 auto; }
@media (min-width: 1000px) {
  .staff-liste { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: stretch; }
  .staff-liste .card { margin-bottom: 0; }
}
/* Fire noegletal paa en telefon: to og to, ikke tre og én. */
@media (max-width: 640px) { .tiles:has(> :nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ================================================================ fase 3 */
/* Firmakort (kunder og partnere): hoved med ikon, navn og knap; afsnit med
   egen overskrift og handling i hoejre side; satser som chips med typens farve. */
.firma-kort { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; }
.firma-hoved { display: flex; align-items: flex-start; gap: 12px; }
.firma-hoved > button { flex: none; margin-left: auto; }
.firma-ikon { width: 40px; height: 40px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-text); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.firma-ikon svg { width: 22px; height: 22px; }
.firma-logo { width: 40px; height: 40px; object-fit: contain; border-radius: 10px; background: var(--surface-2); flex: none; }
.firma-navn { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 15.5px; }
.firma-afsnit { border-top: 1px solid var(--line); padding-top: 10px; }
.firma-afsnit-hoved { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.firma-afsnit-hoved .linklike { text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 13px; color: var(--accent-text); background: none; border: 0; padding: 0; cursor: pointer; }
.sats-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sats-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); font-size: 13px; }
.sats-chip .prik { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.sats-chip strong { font-variant-numeric: tabular-nums; }
.sats-chip.stk { border-style: dashed; }
.lok-raekke { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); }
.lok-raekke:first-of-type { border-top: 0; padding-top: 0; }
.lok-ikon { width: 28px; height: 28px; border-radius: 8px; background: var(--surface-2); color: var(--muted); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.lok-ikon.geo { color: var(--ok-text); background: color-mix(in srgb, var(--ok) 14%, transparent); }
.lok-ikon svg { width: 16px; height: 16px; }
.folk-liste { display: flex; flex-direction: column; }
.folk-raekke { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); }
.folk-raekke:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 1000px) {
  .firma-liste { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
  .firma-liste .card { margin-bottom: 0; }
}
/* Periodevaelgeren paa Timegodkendelse og Eksport: samme hoejde og afstand
   som ugevaelgeren i vagtplanen, saa de tre sider foeles som én app. */
.weekbar { margin-bottom: 14px; }
.weekbar .label { font-weight: 700; font-size: 16px; }

/* ================================================================ fase 4 */
/* Alle dialoger: titlen bliver staaende oeverst, knapperne nederst, saa man
   altid kan se hvad man er i gang med og altid kan gemme eller fortryde. */
.modal-card > h2:first-child, .modal-card #modalBody > h2:first-child {
  position: sticky; top: -20px; z-index: 2; margin: -20px -22px 14px; padding: 18px 22px 10px;
  background: var(--surface); border-bottom: 1px solid var(--line); font-size: 19px;
}
.modal-card form.stack > .btn-row:last-child, .modal-card #modalBody > .btn-row:last-child {
  position: sticky; bottom: -22px; z-index: 2; margin: 4px 0 0; padding: 12px 0 0;
  background: var(--surface); border-top: 1px solid var(--line);
}
.modal-card label { font-weight: 500; color: var(--text); }
.modal-card label input, .modal-card label select, .modal-card label textarea { font-weight: 400; }
.modal-card label > .muted, .modal-card label > div.muted { font-weight: 400; }
.modal-card .stack { gap: 12px; }
@media (max-width: 640px) {
  .modal-card > h2:first-child, .modal-card #modalBody > h2:first-child { top: -18px; margin: -18px -16px 12px; padding: 16px 16px 10px; }
  .modal-card form.stack > .btn-row:last-child, .modal-card #modalBody > .btn-row:last-child { bottom: calc(-16px - env(safe-area-inset-bottom)); }
}

/* Chips med et lille ansigt i (grupper). */
.sats-chip .avatar { width: 20px; height: 20px; font-size: 9px; margin-left: -3px; }

/* Profilkortet: navnet staar stort, knapperne nederst. */
.profil-kort .person { align-items: center; gap: 16px; }
.profil-kort .btn-row { margin-top: 12px; }
.modal-close { z-index: 3; }

/* ================================================================ integrationer */
/* Ét kort pr. system, side om side på en bred skærm og under hinanden på en
   telefon. Status står som en farvet pille øverst, så man kan se det uden at
   læse: grøn = forbundet, grå = ikke endnu, orange = stoppet. */
.integ-gitter { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.integ-kort {
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface-2);
}
.integ-kort.er-til { border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); }
.integ-top { display: flex; align-items: center; gap: 12px; }
.integ-navn { font-size: 16px; flex: 1; min-width: 0; }
.integ-logo {
  width: 42px; height: 42px; border-radius: 11px; flex: 0 0 auto; padding: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  /* Hvid flise i begge temaer: logoerne er lavet til lys baggrund. */
  background: #fff; box-shadow: 0 0 0 1px var(--line);
}
.integ-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.integ-status {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line); color: var(--muted);
}
.integ-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.integ-status.til { color: var(--ok-text); border-color: color-mix(in srgb, var(--ok) 40%, var(--line)); }
.integ-status.pause { color: var(--warn-text); border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); background: var(--warn-bg); }
.integ-status.venter::before { background: transparent; border: 1.5px solid currentColor; }
.integ-krop { flex: 1; }
.integ-hvad { margin: 0 0 8px; font-size: 14px; }
.integ-punkter { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13px; color: var(--muted); }
.integ-punkter li { display: flex; gap: 8px; align-items: baseline; }
.integ-punkter li::before { content: '✓'; color: var(--ok-text); font-weight: 700; }
.integ-advarsel { margin: 0; font-size: 13px; color: var(--warn-text); }
.integ-fakta { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; font-size: 14px; align-items: center; }
.integ-fakta dt { color: var(--muted); font-size: 13px; }
.integ-fakta dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.integ-konto { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Feltet står uden for en <label>, så appens almindelige feltudseende rammer
   det ikke -- derfor stod det som en hvid kasse med gråt tal. */
.integ-konto input {
  width: 90px; padding: 7px 10px; margin: 0; font: inherit;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px;
}
.integ-konto input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.integ-fod { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--line); }
.integ-fod .integ-afbryd { margin-left: auto; color: var(--danger-text); }
.integ-fod .integ-afbryd:hover { border-color: var(--danger-text); }
.integ-knap {
  display: inline-flex; align-items: center; justify-content: center; width: 100%;
  padding: 10px 14px; border-radius: 10px; font-weight: 600; text-decoration: none;
  background: var(--accent); color: var(--on-accent);
}
.integ-knap:hover { filter: brightness(1.08); }
.integ-knap:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }

/* ================================================================ vagtdetalje + ugevaelger */
/* Kommentarer skrives med linjeskift, og de skal staa som linjeskift. */
.note-tekst { white-space: pre-line; overflow-wrap: anywhere; }
.vagt-hoved { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.vagt-dato { font-weight: 600; font-size: 15px; }
.vagt-tid { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 15px; color: inherit; background: none; border: 0; padding: 0; cursor: default; }
.vagt-tid.kan-rettes { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.vagt-tid.kan-rettes:hover { color: var(--accent-text); }
.kommentar { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--warn-bg); }
.kommentar-hoved { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase; color: var(--warn-text); margin-bottom: 4px; }
.kommentar-hoved .linklike { text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 13px; }
/* Ugevaelgeren: klik paa "Uge 41" og faa en kalender med genveje. */
.ugev { position: fixed; z-index: 45; margin-top: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 12px; display: grid; grid-template-columns: auto auto; gap: 12px; }
.ugev-genveje { display: flex; flex-direction: column; gap: 2px; min-width: 140px; border-right: 1px solid var(--line); padding-right: 12px; }
.ugev-genveje button { text-align: left; background: none; border: 0; padding: 7px 8px; border-radius: 8px; font: inherit; font-size: 13.5px; color: inherit; cursor: pointer; }
.ugev-genveje button:hover { background: var(--surface-2); }
.ugev-kal { display: flex; flex-direction: column; gap: 6px; }
.ugev-mdr { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-weight: 600; }
.ugev-mdr button { background: none; border: 1px solid var(--line); border-radius: 7px; padding: 2px 8px; font: inherit; color: inherit; cursor: pointer; }
.ugev-gitter { display: grid; grid-template-columns: 28px repeat(7, 32px); gap: 2px; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.ugev-gitter .h { color: var(--muted); text-align: center; font-size: 11px; }
.ugev-gitter .u { color: var(--muted); font-size: 11px; display: flex; align-items: center; justify-content: center; }
.ugev-gitter button { width: 32px; height: 30px; border: 0; border-radius: 7px; background: none; font: inherit; font-size: 12.5px; color: inherit; cursor: pointer; }
.ugev-gitter button:hover { background: var(--surface-2); }
.ugev-gitter button.anden { color: var(--muted); opacity: 0.55; }
.ugev-gitter button.idag { outline: 1px solid var(--accent); }
.ugev-gitter button.valgt { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
.weekbar .label.klik { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 4px; }
@media (max-width: 640px) { .ugev { grid-template-columns: 1fr; left: 12px; right: 12px; } .ugev-genveje { border-right: 0; border-bottom: 1px solid var(--line); padding: 0 0 8px; flex-direction: row; flex-wrap: wrap; } .ugev-gitter { grid-template-columns: 24px repeat(7, 1fr); } .ugev-gitter button { width: 100%; } }

/* Guidevideoer på Hjælp-siden. */
.hj-video { display: block; width: 100%; max-width: 640px; aspect-ratio: 16 / 9; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); margin: 8px 0 10px; }
.hj-video-maerke { font-size: 11.5px; font-weight: 600; color: var(--accent-text); background: var(--accent-soft); border-radius: 999px; padding: 2px 8px; margin-left: 6px; }

/* Stillingen på medarbejderkortet: hvad personen er, ved siden af hvad de må. */
.badge.stilling { background: var(--accent-soft); color: var(--accent-text); border-color: transparent; }