/* Det, der er særligt for kundeservice. Resten kommer fra stil.css (fælles kopi).
   Det lyse tema er det samme som pristjekkerens. */
:root[data-theme="light"] {
  --bg: #f3f5f9; --side: #ffffff; --flade: #ffffff; --raekke: #eaeff7; --raekke-hover: #dfe6f2;
  --tekst: #1b1e2b; --daemp: #5d6679; --linje: #dde2eb;
  --blaa: #2563eb; --accent-svag: #e7efff; --ok: #1f8a4c; --advar: #a16207; --fejl: #c8102e; --gruppe: #eef1f6;
}
[data-theme="light"] #side { border-right: 1px solid var(--linje); }
[data-theme="light"] .logo img { filter: brightness(0); }
[data-theme="light"] #side nav a:hover { background: var(--raekke); }
[data-theme="light"] #side nav a.aktiv { background: var(--raekke); color: var(--tekst); }
[data-theme="light"] #top { background: #ffffff; }
[data-theme="light"] th { background: #f0f3f8; }
[data-theme="light"] button.graa { color: var(--tekst); }
[data-theme="light"] .advarselslinje { background: #fff4db; color: var(--tekst); }

#loginform a.knap, a.knap { display: inline-block; text-align: center; background: var(--groen); color: #fff; border-radius: 4px; padding: 9px 14px; font-weight: 600; text-decoration: none; }
#loginform a.knap { display: block; }
a.knap:hover { background: var(--groen-moerk); }

/* Nøgletal øverst */
.noegletal { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 12px; margin: 14px 0 6px; }
.noegletal .kort { padding: 12px 14px; }
.noegletal b { display: block; font-size: 22px; font-variant-numeric: tabular-nums; }
.noegletal span { color: var(--daemp); font-size: 12.5px; }
.noegletal .vigtig { border-color: var(--groen); }

/* Hvem skal gøre noget */
.hvem { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 99px; white-space: nowrap; }
.hvem.lager { background: #1f3a5c; color: #9cc9ff; }
.hvem.ks { background: #5a4a1f; color: #f3d38a; }
.hvem.vent { background: var(--gruppe); color: var(--daemp); }
[data-theme="light"] .hvem.lager { background: #e5eef7; color: #2b5f8f; }
[data-theme="light"] .hvem.ks { background: #fdf3d8; color: #8a5a00; }

.rulletabel { overflow-x: auto; }
.rulletabel table { min-width: 860px; }
td.tal, th.tal { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.oversigt tr { cursor: pointer; }
table.oversigt tbody tr:hover td { background: var(--raekke-hover); }
th { cursor: default; }

.vaerktoejslinje { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 22px 0 10px; }
.vaerktoejslinje h2 { margin: 0 auto 0 0; }
.vaerktoejslinje label { display: flex; gap: 6px; align-items: center; }
.vaerktoejslinje input[type=search] { border: 1px solid var(--linje); border-radius: 4px; padding: 6px 8px; background: var(--flade); color: var(--tekst); width: 18rem; max-width: 100%; }

details.bunke { background: var(--flade); border: 1px solid var(--linje); border-radius: 6px; margin-bottom: 10px; }
details.bunke > summary { list-style: none; cursor: pointer; padding: 12px 14px; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; }
details.bunke > summary::-webkit-details-marker { display: none; }
details.bunke > summary::before { content: "▸"; color: var(--daemp); }
details.bunke[open] > summary::before { content: "▾"; }
details.bunke > summary h3 { margin: 0; font-size: 14px; }
details.bunke > summary .meta { margin-left: auto; color: var(--daemp); font-variant-numeric: tabular-nums; }
details.bunke .forklaring { margin: 0; padding: 0 14px 12px 32px; color: var(--daemp); max-width: 90ch; }
details.bunke table { border: 0; border-radius: 0; border-top: 1px solid var(--linje); }
details.bunke td { vertical-align: top; }

.kop { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; cursor: copy; border-bottom: 1px dashed var(--daemp); user-select: all; }
.kop:focus-visible { outline: 2px solid var(--blaa); outline-offset: 2px; }
.smaa { font-size: 11.5px; color: var(--daemp); }
.varer { font-size: 12px; color: var(--daemp); max-width: 46ch; }
.varer .udsolgt { color: var(--fejl); font-weight: 600; }
.gammel { color: var(--fejl); font-weight: 600; }

.om ul li { margin: 4px 0; }
.om p, .om li { max-width: 90ch; }

/* Hvem sidder med ordren, noter og Tjek igen */
.filtre { display: flex; gap: 6px; }
tr.klik { cursor: pointer; }
tr.klik:hover td, tr.klik.aaben td { background: var(--raekke-hover); }
tr.detaljer td { background: var(--gruppe); cursor: default; }
.detaljegitter { display: grid; grid-template-columns: minmax(min(200px, 100%), 1fr) minmax(0, 2fr); gap: 18px; }
@media (max-width: 900px) { .detaljegitter { grid-template-columns: 1fr; } }
.detaljegitter > div:first-child { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-content: start; }
.noter ul { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 4px; }
.noter li.system { color: var(--daemp); font-style: italic; }
.noter textarea { width: 100%; resize: vertical; }
.knaprk { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }
.taget { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 3px; background: var(--raekke); white-space: nowrap; }
.taget.mig { background: var(--groen); color: #fff; }
.noteantal { font-size: 12px; color: var(--daemp); white-space: nowrap; }
.skylder { display: inline-block; margin-top: 3px; font-size: 11.5px; font-weight: 600; padding: 1px 7px; border-radius: 3px; background: #5a1f2a; color: #ffb3bf; }
[data-theme="light"] .skylder { background: #fde2e6; color: #a1122b; }