/* Tilføjelser til det fælles stilark (stil.css er en kopi fra sorteringen, så
   værktøjerne ligner hinanden). Kun det, prognosen har brug for ud over det. */

/* Statusfarver: rød = handling nu, gul = snart, blå = mangler til måldato,
   lilla = for meget, grå = udsolgt eller intet salg. */
.st { display: inline-block; border-radius: 3px; padding: 2px 8px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.st-kritisk { background: var(--roed); color: #fff; }
.st-lav { background: var(--gul); color: #1b1e2b; }
.st-mangler { background: #2f5fa8; color: #fff; }
.st-overlager { background: #6b4fb8; color: #fff; }
.st-ok { background: var(--groen); color: #fff; }
.st-udsolgt, .st-intet-salg { background: #3b4766; color: var(--daemp); }
.st-udgaaet { background: transparent; border: 1px solid var(--linje); color: var(--daemp); }

.chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0; }
.chips button { background: var(--flade); border: 1px solid var(--linje); color: var(--tekst); font-weight: 500; padding: 5px 11px; }
.chips button.aktiv { background: var(--raekke); border-color: var(--blaa); color: #fff; }
.chips button b { margin-left: 5px; color: var(--daemp); font-weight: 600; }

.filtre { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.filtre input[type=text] { width: 260px; }

td.billede { width: 44px; padding: 4px 6px; }
td.billede img { width: 36px; height: 48px; object-fit: cover; border-radius: 3px; background: #fff; display: block; }
td .under { display: block; font-size: 11.5px; color: var(--daemp); }
td.neg { color: var(--fejl); font-weight: 600; }
td.pos { color: #b9a4ff; }

/* Størrelsesstriben i listen: én blok pr. størrelse, farvet efter hvor længe den rækker. */
/* Jeans har op til 25 størrelser, så striben brydes over flere linjer i stedet for at skubbe tabellen ud af skærmen. */
.strstribe { display: flex; flex-wrap: wrap; gap: 2px; min-width: 160px; max-width: 200px; }
.strstribe span { min-width: 26px; padding: 1px 3px; border-radius: 2px; font-size: 10.5px; text-align: center; background: #2c3a2f; color: #9fd8b0; }
.strstribe span.u0 { background: #3b4766; color: var(--daemp); text-decoration: line-through; }
.strstribe span.u4 { background: #5a1d2a; color: #ffb3c0; }
.strstribe span.u8 { background: #5a4a1f; color: #f3d38a; }
.strstribe span.lille { opacity: .45; }

.statlinje { display: flex; gap: 26px; flex-wrap: wrap; margin: 10px 0 16px; }
.statlinje div { font-size: 12px; color: var(--daemp); }
.statlinje b { display: block; font-size: 19px; color: var(--tekst); font-variant-numeric: tabular-nums; }
.produkthoved { display: flex; gap: 16px; align-items: flex-start; }
.produkthoved img { width: 90px; height: 120px; object-fit: cover; border-radius: 4px; background: #fff; }

table.smal th, table.smal td { padding: 6px 9px; white-space: nowrap; }
td.celle-nul { color: var(--fejl); }
.levform { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; margin: 10px 0; }
.levform label { display: flex; flex-direction: column; font-size: 11.5px; color: var(--daemp); gap: 3px; }
.levform input { width: 100%; }
tr.forfalden { background: #4a3a1a; }
.dato-gruppe td { background: #1f2333; font-weight: 600; color: var(--daemp); }
.flere { margin: 10px auto; display: block; }
.to-kol { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 1100px) { .to-kol { grid-template-columns: 1fr; } }
.forklaring p, .forklaring li { max-width: 820px; }
.forklaring h2 { margin-top: 22px; }

/* Produktnavnet må ikke klemmes til fire linjer af de mange talkolonner. */
table.oversigt td:nth-child(2) { min-width: 210px; }
/* På en smal skærm ruller tabellen vandret i stedet for at skære kolonner af. */
.rulbar { overflow-x: auto; }

/* Boksen "Udgår": midt i sin kolonne, og en klik-flade der ikke åbner produktsiden. */
td.udgaarcelle { text-align: center; cursor: default; }
.udgaarlabel { margin-left: 10px; color: var(--tekst); cursor: pointer; white-space: nowrap; }

/* Datofelterne er ikke med i stil.css' mørke felter og står med browserens hvide
   baggrund, men arvede den lyse tekstfarve — næsten usynligt. Mørk tekst på hvidt. */
input[type=date] { color: #1b1e2b; background: #fff; border: 1px solid var(--linje); border-radius: 4px; padding: 4px 8px; color-scheme: light; font-weight: 500; }

/* ---- Lyst tema ---------------------------------------------------------------
   stil.css er mørk (kopi fra sorteringen). Det lyse tema bytter farvevariablerne
   og de få steder, hvor stil.css har en fast mørk farve i stedet for en variabel.
   Mørkt er udgangspunktet, så der skal kun regler for lyst. */
: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"] .chips button.aktiv { color: var(--tekst); }
[data-theme="light"] .infolinje { background: #e8f0ff; color: var(--tekst); }
[data-theme="light"] .advarselslinje { background: #fff4db; color: var(--tekst); }
[data-theme="light"] .dialograekke.alle, [data-theme="light"] .rulle { background: #ffffff; }
[data-theme="light"] .dato-gruppe td { background: #f0f3f8; }
[data-theme="light"] tr.forfalden { background: #fff4db; }
[data-theme="light"] td.pos { color: #6b4fb8; }
[data-theme="light"] .st-udsolgt, [data-theme="light"] .st-intet-salg { background: #e6e9f0; color: var(--daemp); }
[data-theme="light"] .strstribe span { background: #e3f3e8; color: #1f6b3a; }
[data-theme="light"] .strstribe span.u0 { background: #e6e9f0; color: var(--daemp); }
[data-theme="light"] .strstribe span.u4 { background: #fde2e6; color: #a1122b; }
[data-theme="light"] .strstribe span.u8 { background: #fdf0d2; color: #8a5a00; }
[data-theme="light"] td.billede img, [data-theme="light"] .produkthoved img { border: 1px solid var(--linje); }
/* Datofeltet er hvidt i begge temaer; i det lyse får det en synlig kant. */
[data-theme="light"] input[type=date] { border-color: #c9d1de; }