/* Det ekstra oven på stil.css (kopi fra sorteringen): lyst tema og kampagnernes
   egne elementer. Det mørke tema er standarden i stil.css. */
: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, [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"] .rulle { background: #ffffff; }
#loginform a.knap { display: block; text-align: center; background: var(--groen); color: #fff; border-radius: 4px; padding: 9px 14px; font-weight: 600; text-decoration: none; }

/* Tavlen: én kolonne pr. trin, ruller vandret på en smal skærm */
.tavle { display: grid; grid-template-columns: repeat(5, minmax(220px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 6px; }
.tavle .kolonne { background: var(--gruppe); border-radius: 6px; padding: 10px; min-height: 120px; }
.tavle .kolonne h3 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--daemp); }
.kampkort { display: block; background: var(--flade); border: 1px solid var(--linje); border-radius: 5px; padding: 9px 10px; margin-bottom: 8px; color: var(--tekst); text-decoration: none; }
.kampkort:hover { border-color: var(--blaa); }
.kampkort .navn { font-weight: 600; }
.kampkort .linje { font-size: 12px; color: var(--daemp); margin-top: 3px; }
.kampkort img { width: 34px; height: 45px; object-fit: cover; border-radius: 3px; float: right; margin-left: 8px; background: #fff; }

/* Kampagnesiden: trin som sektioner */
.trinlinje { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 16px; }
.trinlinje button { background: var(--raekke); color: var(--tekst); }
.trinlinje button.aktiv { background: var(--groen); color: #fff; }
section.kort { margin-bottom: 16px; }
section.kort > h2 { margin-top: 0; display: flex; gap: 10px; align-items: baseline; }
section.kort > h2 .nr { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--raekke); font-size: 12px; }
.formgitter { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px 18px; }
.felt { display: flex; flex-direction: column; gap: 4px; }
.felt > span:first-child { font-size: 11.5px; color: var(--daemp); text-transform: uppercase; letter-spacing: .05em; }
.felt input[type=text], .felt input[type=date], .felt textarea, .felt select { width: 100%; }
.felt.bred { grid-column: 1 / -1; }
input[type=date] { border: 1px solid var(--linje); border-radius: 4px; padding: 5px 8px; background: var(--flade); color: var(--tekst); }
.landeknapper { display: flex; gap: 6px; flex-wrap: wrap; }
.landeknapper button { background: var(--raekke); color: var(--tekst); padding: 5px 12px; }
.landeknapper button.aktiv { background: var(--groen); color: #fff; }
.soegefelt { position: relative; }
.soegefelt .rulle { position: absolute; left: 0; right: 0; z-index: 5; max-height: 320px; }
.valgtvare { display: flex; gap: 8px; align-items: center; padding: 3px 0; }
.valgtvare img { width: 28px; height: 37px; object-fit: cover; border-radius: 2px; background: #fff; }
.valgtvare .titel { flex: 1; }

/* Tekster pr. land */
.tekstland { border-top: 1px solid var(--linje); padding: 12px 0; display: grid; grid-template-columns: 90px 1fr; gap: 12px; }
.tekstland:first-of-type { border-top: 0; }
.tekstland .landkode { font-weight: 700; font-size: 15px; }
.tekstland textarea { width: 100%; min-height: 58px; }
.tekstland input[type=text] { width: 100%; }
.taeller { font-size: 11px; color: var(--daemp); text-align: right; }
.taeller.over { color: var(--advar); }
.fund { margin: 4px 0 0; padding: 0; list-style: none; font-size: 12.5px; }
.fund li::before { margin-right: 6px; }
.fund li.fejl::before { content: "✖"; }
.fund li.advarsel { color: var(--advar); }
.fund li.advarsel::before { content: "⚠"; }
.ainote { font-size: 12px; color: var(--blaa); }
.prisinfo { font-size: 12px; color: var(--daemp); }
.prisinfo .mangler { color: var(--fejl); }

.tjekliste label { display: flex; gap: 8px; align-items: flex-start; padding: 4px 0; }
.tjekliste .hvem { font-size: 11.5px; color: var(--daemp); }
.opskrift { width: 100%; min-height: 260px; font-family: ui-monospace, Menlo, monospace; font-size: 12px; }
.idfelt { width: 100%; min-height: 90px; font-family: ui-monospace, Menlo, monospace; font-size: 12px; }

table.resultat td, table.resultat th { white-space: nowrap; }
.op { color: var(--ok); } .ned { color: var(--fejl); }
.logliste { font-size: 12px; color: var(--daemp); max-height: 220px; overflow: auto; }
.regelliste li { margin: 6px 0; }
.status-chip { font-size: 11.5px; padding: 1px 8px; border-radius: 10px; background: var(--gruppe); }
.om p, .om li { max-width: 760px; }
@media (max-width: 700px) { .tekstland { grid-template-columns: 1fr; } }