/* ==========================================================================
   Lager versjon 3 (1. oktober 2026, docs/helhet/spes-hjem-lager-v3.md 4).

   Kortene, korthodet, rutenettet og periodevalget deles med Hjem og står i
   lodd.css under :is(#skjerm-hjem, #skjerm-lager). Diagrammene er Lodds.
   Her står bare det som hører til Lager: filterlinja, tabellene i kort,
   pillene i statusens farge, lokasjonskartet og ruta.

   Loddlinja og margen på 72 px er borte fra Lager: radene i kortene har et
   segment på venstre kant i stedet, som Det som venter på Hjem.
   ========================================================================== */

#skjerm-lager .lager-ingress { position: relative; }
#skjerm-lager .lager-rod { color: var(--rod); }
#skjerm-lager .lager-amber { color: var(--amber); }
#skjerm-lager .lager-svak { color: var(--ink-3); font-size: var(--t-2); }

/* Kortene. Samme luft som på Hjem, og luft under hvert kort som ikke står
   i et rutenett. */
#skjerm-lager .kort { margin: 0 0 var(--s-5); padding: var(--s-5); }
#skjerm-lager .kort.tett { padding: 0; }
#skjerm-lager .rutenett.lager-to-en { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
#skjerm-lager .rutenett.lager-en-to { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
#skjerm-lager .faner { margin: 0 0 var(--s-5); }

/* Radene i et kort: segmentet sitter på venstre kant, tallet er stort og
   i statusens farge når det er over null. */
#skjerm-lager .kort .rad { position: relative; }
#skjerm-lager .kort .rad:first-of-type { border-top: 0; }
#skjerm-lager .kort .rad:last-child { border-bottom: 0; }
#skjerm-lager .kort .rad > .marg { width: var(--s-5); flex: 0 0 var(--s-5); padding-right: 0; }
#skjerm-lager .kort .rad > .marg .segment { left: 0; right: auto; top: var(--s-4); height: var(--s-5); border-radius: var(--r-1); }
#skjerm-lager .kort .rad > .marg .margtekst { display: none; }
#skjerm-lager .kort .rad .inn { padding-left: 0; padding-right: var(--s-5); }
#skjerm-lager .lager-radliste .rad > .marg,
#skjerm-lager .kort:not(.lager-trenger) > .rad > .marg:has(.margtekst) { width: calc(var(--s-8) + var(--s-7)); flex-basis: calc(var(--s-8) + var(--s-7)); padding-left: var(--s-4); text-align: left; }
#skjerm-lager .lager-radliste .rad > .marg .margtekst,
#skjerm-lager .kort > .rad > .marg .margtekst { display: block; }
#skjerm-lager .lager-trenger .rad .hoyre { font-size: var(--t-5); line-height: var(--t-5-h); color: var(--ink); }
#skjerm-lager .lager-trenger .rad .hoyre.lager-rod { color: var(--rod); }
#skjerm-lager .lager-trenger .rad .hoyre.lager-amber { color: var(--amber); }
#skjerm-lager .kort .rad .hoyre .pille { font-family: var(--font-ui); }

/* Legenden på én linje under et diagram. */
#skjerm-lager .legende.lager-rekke { flex-direction: row; flex-wrap: wrap; gap: 0 var(--s-5); margin-top: var(--s-3); }
#skjerm-lager .legende.lager-rekke .mono { margin-left: var(--s-2); }
#skjerm-lager #lager-ring .ring { margin: 0 auto; }
#skjerm-lager #lager-innkjop-andeler { margin: var(--s-2) 0 var(--s-3); }
#skjerm-lager #lager-status-andeler { margin: var(--s-2) 0 0; }
#skjerm-lager .lager-statuskort { padding-bottom: var(--s-4); }

/* Dekningen: navnet til venstre, skalaen til høyre. */
#skjerm-lager .lager-dekrad { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--s-5); padding: var(--s-3) var(--s-5); border-top: 1px solid var(--line); border-bottom: 0; min-height: var(--s-8); }
#skjerm-lager .lager-dekrad:first-child { border-top: 0; }
#skjerm-lager .lager-dekrad .tekst { min-width: 0; }
#skjerm-lager .lager-dekrad .tittel { display: block; overflow: hidden; font-size: var(--t-4); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
#skjerm-lager .lager-dekrad .under { display: block; overflow: hidden; font-size: var(--t-2); color: var(--ink-3); text-overflow: ellipsis; white-space: nowrap; }
#skjerm-lager .lager-dek { display: flex; min-width: 0; }
#skjerm-lager .lager-dekcelle { min-width: calc(var(--s-8) * 3); }
#skjerm-lager .lager-gnistcelle { width: calc(var(--s-8) * 3); }
#skjerm-lager .lager-gnist { width: calc(var(--s-8) * 3); }

/* Nøkkeltallene over Linjer. */
#skjerm-lager .lager-nokkelkort .nokkel .verdi { font-size: var(--t-5); line-height: var(--t-5-h); }

/* Filterlinja: søk, velgerne og antallet til høyre. */
#skjerm-lager .lager-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  margin: var(--s-2) 0 var(--s-4);
}
#skjerm-lager .lager-filter input[type=search] { width: calc(var(--s-8) * 6); max-width: 100%; }
#skjerm-lager .lager-filter select { width: auto; }
/* Velgerne og søket i samme størrelse som ordet foran dem, så linja leses
   som én linje og ikke som store bokser. */
#skjerm-lager .lager-filter :is(select, input[type=search]) { font-size: var(--t-3); }
#skjerm-lager .lager-lapp { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--t-2); color: var(--ink-3); }
#skjerm-lager .lager-antall { margin-left: auto; font-size: var(--t-3); color: var(--ink-2); }
#skjerm-lager .lager-velgere { display: contents; }

/* Tabellen i et kort over 900 px, radene i et kort under. Begge tegnes, og
   bredden velger. */
#skjerm-lager .lager-tabellboks { overflow-x: auto; }
#skjerm-lager .tabell { width: 100%; border-collapse: collapse; font-size: var(--t-3); }
#skjerm-lager .tabell th {
  text-align: left;
  font-weight: 500;
  color: var(--ink-3);
  background: var(--flate-2);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  padding: 0 var(--s-3);
}
#skjerm-lager .tabell th:first-child, #skjerm-lager .tabell td:first-child { padding-left: var(--s-5); }
#skjerm-lager .tabell th button {
  font: inherit;
  min-height: var(--finger);
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}
#skjerm-lager .tabell th[aria-sort="ascending"] button,
#skjerm-lager .tabell th[aria-sort="descending"] button { color: var(--ink); }
#skjerm-lager .tabell td {
  padding: 0 var(--s-3);
  height: var(--s-8);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  max-width: calc(var(--s-8) * 5);
  overflow: hidden;
  text-overflow: ellipsis;
}
#skjerm-lager .tabell tbody tr:last-child td { border-bottom: 0; }
#skjerm-lager .tabell tbody tr { cursor: pointer; transition: background var(--tid-2) var(--kurve); }
@media (hover: hover) and (pointer: fine) {
  #skjerm-lager .tabell tbody tr:hover { background: var(--flate-2); }
}
#skjerm-lager .tabell a {
  display: inline-flex;
  align-items: center;
  min-height: var(--finger);
  color: var(--brand-tekst);
  font-weight: 500;
}
#skjerm-lager .tabell tfoot td { font-weight: 500; border-top: 1px solid var(--line-2); border-bottom: 0; background: var(--flate-2); }
#skjerm-lager .tabell td .pille { vertical-align: middle; }
#skjerm-lager .lager-seg {
  display: inline-block;
  width: var(--strek-tynn);
  height: var(--s-5);
  margin-right: var(--s-3);
  border-radius: var(--r-1);
  vertical-align: middle;
  background: var(--ink-3);
}
#skjerm-lager .lager-prikk {
  display: inline-block;
  width: var(--s-3);
  height: var(--s-3);
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--ink-3);
}
#skjerm-lager .lager-radliste { display: none; }

/* Pillene i statusens farge: svakt fyll og ingen kant, som i Shopify. */
#skjerm-lager .pille { min-height: var(--t-4-h); padding: 0 var(--s-3); border: 0; border-radius: var(--r-4); background: var(--flate-3); color: var(--ink-2); font-size: var(--t-2); font-weight: 500; white-space: nowrap; }
#skjerm-lager .pille.lager-pille-amber { background: var(--amber-svak); color: var(--amber); }
#skjerm-lager .pille.lager-pille-gronn { background: var(--gronn-svak); color: var(--gronn); }
#skjerm-lager .pille.lager-pille-rod { background: var(--rod-svak); color: var(--rod); }
/* Blekk på merkets svake fyll, som .dagbrikke: --brand-tekst holdt 3,8 i
   mørkt tema der (nettleserprøven 1. oktober 2026). */
#skjerm-lager .pille.lager-pille-brand { background: var(--brand-svak); color: var(--ink); }
#skjerm-lager .pille .lager-prikk { width: var(--s-2); height: var(--s-2); }

/* Plukkbarhet som prikk og ord, uten pille, så de to kolonnene skilles. */
#skjerm-lager .lager-plukk { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--t-2); }

/* «1 av 2» med en strek som fylles. */
#skjerm-lager .lager-framdrift { display: inline-flex; align-items: center; gap: var(--s-3); font-family: var(--font-mono); font-size: var(--t-2); }
#skjerm-lager .lager-framdrift i { position: relative; display: block; width: var(--s-8); height: var(--s-2); overflow: hidden; border-radius: var(--r-1); background: var(--flate-3); }
#skjerm-lager .lager-framdrift i::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: var(--pst, 0%); background: var(--gronn); }

/* Lokasjonene: et kart over hyllene, ikke en liste. Streken i bunnen er
   andel av den fulleste. */
#skjerm-lager .lager-lok { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--lok-celle), 1fr)); gap: var(--s-3); }
#skjerm-lager .lager-celle { position: relative; display: flex; flex-direction: column; gap: var(--s-1); min-height: calc(var(--s-8) + var(--s-7)); padding: var(--s-4); overflow: hidden; border-radius: var(--r-2); background: var(--flate-2); color: inherit; text-decoration: none; transition: background var(--tid-2) var(--kurve); }
@media (hover: hover) and (pointer: fine) {
  #skjerm-lager .lager-celle:hover { background: var(--flate-3); }
}
#skjerm-lager .lager-celle:focus-visible { outline: var(--strek-tynn) solid var(--brand-tekst); outline-offset: var(--s-1); }
#skjerm-lager .lager-celle::after { content: ""; position: absolute; left: 0; bottom: 0; height: var(--s-1); width: var(--fyll, 0%); background: var(--brand-tekst); }
#skjerm-lager .lager-celle.laast::after { background: var(--amber); }
#skjerm-lager .lager-celle .kode { font-family: var(--font-mono); font-size: var(--t-1); color: var(--ink-3); }
#skjerm-lager .lager-celle .navn { overflow: hidden; font-size: var(--t-3); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
#skjerm-lager .lager-celle .ant { margin-top: auto; font-family: var(--font-mono); font-size: var(--t-6); line-height: var(--t-6-h); font-variant-numeric: tabular-nums; }
#skjerm-lager .lager-mangler { margin: 0; padding: var(--s-4); border-radius: var(--r-2); background: var(--flate-2); font-size: var(--t-3); line-height: var(--t-3-h); color: var(--ink-3); }
#skjerm-lager .lager-lok .lager-mangler { grid-column: 1 / -1; }
#skjerm-lager .lager-snart { display: inline-flex; align-items: center; min-height: var(--t-4-h); padding: 0 var(--s-3); border: 1px dashed var(--line-3); border-radius: var(--r-2); color: var(--ink-3); font-size: var(--t-2); }

@media (max-width: 899px) {
  #skjerm-lager .lager-tabellboks { display: none; }
  #skjerm-lager .lager-radliste { display: block; }
  #skjerm-lager .lager-antall { margin-left: 0; }
  #skjerm-lager .rutenett.lager-to-en, #skjerm-lager .rutenett.lager-en-to { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 599px) {
  #skjerm-lager .kort { padding: var(--s-4); margin-bottom: var(--s-4); }
  #skjerm-lager .kort.tett { padding: 0; }
  #skjerm-lager .lager-dekrad { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); padding: var(--s-3) var(--s-4); }
  #skjerm-lager .kort .rad .inn { padding-right: var(--s-4); }
  #skjerm-lager .kort .rad .hoyre .pille { display: none; }
  #skjerm-lager .lager-filter input[type=search] { width: 100%; }
}

/* Ruta. Formen er .rute i lodd.css; her er at den kan skjules, og at den
   glir inn fra høyre, eller opp fra bunnen på telefon. */
#skjerm-lager .rute[hidden], #skjerm-lager .rute-teppe[hidden] { display: none; }
#skjerm-lager .rute { animation: lager-inn var(--tid-4) var(--kurve-mot); }
#skjerm-lager .rute-bunn {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5) calc(var(--s-4) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
}
#skjerm-lager .rute-bunn:empty { display: none; }
#skjerm-lager .rute-hode h2:focus { outline: none; }
#skjerm-lager .lager-del { margin: var(--s-6) 0 0; }
#skjerm-lager .lager-del > h3 { margin: 0 0 var(--s-3); }
#skjerm-lager .lager-del p { margin: 0 0 var(--s-2); font-size: var(--t-4); line-height: var(--t-4-h); }
#skjerm-lager .lager-del a:not(.knapp):not(.rad) { display: inline-flex; align-items: center; min-height: var(--finger); color: var(--brand-tekst); }
#skjerm-lager .lager-pillerad { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0 0 var(--s-2); }
#skjerm-lager .lager-tom { padding: var(--s-3) 0; margin: 0; }
#skjerm-lager .lager-del .rad .marg { width: var(--s-7); flex: 0 0 var(--s-7); }
#skjerm-lager .varsel {
  margin: 0 0 var(--s-4);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line-2);
  border-left: var(--strek-tynn) solid var(--ink-3);
  border-radius: var(--r-1);
  font-size: var(--t-3);
  line-height: var(--t-3-h);
}
#skjerm-lager .varsel p { margin: 0; }
#skjerm-lager .varsel p + p { margin-top: var(--s-2); }
#skjerm-lager .varsel.venter { border-left-color: var(--amber); background: var(--amber-svak); }
#skjerm-lager .varsel.feil { border-left-color: var(--rod); background: var(--rod-svak); }
@keyframes lager-inn { from { transform: translateX(100%); } to { transform: none; } }
@keyframes lager-opp { from { transform: translateY(100%); } to { transform: none; } }
@media (max-width: 899px) {
  #skjerm-lager .rute { animation-name: lager-opp; }
}
@media (prefers-reduced-motion: reduce) {
  #skjerm-lager .rute { animation: none; }
  #skjerm-lager .tabell tbody tr, #skjerm-lager .lager-celle { transition: none; }
}

/* Filterlinja på telefon: søket over hele bredden, velgerne to og to med
   ordet over, og antallet under (nettleserprøven 1. oktober 2026). */
@media (max-width: 599px) {
  #skjerm-lager .lager-filter { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #skjerm-lager .lager-filter input[type=search], #skjerm-lager .lager-antall { grid-column: 1 / -1; }
  #skjerm-lager .lager-lapp { flex-direction: column; align-items: stretch; gap: var(--s-1); }
  #skjerm-lager .lager-lapp select { width: 100%; }
}