/* ==========================================================================
   Lager: Oversikt, Ordre og ruta (docs/helhet/spes-lager.md 4)

   Søylene og andelsstreken er felles og bor i lodd.css. Her står bare det
   som hører til Lager: fanene, filterlinja, tabellen og ruta.
   ========================================================================== */

#skjerm-lager .lager-ingress { position: relative; }
/* Klokkeslettet, som en maskinell verdi. Det sto i margen på loddlinja
   (2.6) til 30. september 2026; uten loddlinje i skallet står det først i
   ingressen i stedet, i mono, og ikke oppå teksten. */
#skjerm-lager .lager-margtid {
  display: inline;
  padding-right: var(--s-3);
}
#skjerm-lager .lager-rod { color: var(--rod); }

/* Fanene. Samme form som i Nye konsepter: tekst med en strek under den
   valgte, ikke knapper med ramme. */
#skjerm-lager .lager-faner {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--s-5);
  padding-left: calc(var(--marg) + var(--inn));
  margin: 0 0 var(--s-4);
  border-bottom: 1px solid var(--line);
}
#skjerm-lager .lager-fane {
  font: inherit;
  font-size: var(--t-3);
  min-height: 44px;
  padding: 0;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: none;
  color: var(--ink-3);
  cursor: pointer;
}
#skjerm-lager .lager-fane[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  #skjerm-lager .lager-fane:hover { color: var(--ink); }
}

#skjerm-lager .lager-graf {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: var(--s-6);
  align-items: end;
  padding-left: calc(var(--marg) + var(--inn));
  margin-bottom: var(--s-7);
}
#skjerm-lager .soyler { overflow: hidden; }
#skjerm-lager .lager-legende { list-style: none; margin: 0; padding: 0; }
#skjerm-lager .lager-legende li,
#skjerm-lager .lager-andelrad {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 32px;
  border-bottom: 1px solid var(--line);
  font-size: var(--t-3);
}
#skjerm-lager .lager-legende .navn,
#skjerm-lager .lager-andelrad .navn { flex: 1 1 auto; min-width: 0; }
#skjerm-lager .lager-andelboks {
  padding-left: calc(var(--marg) + var(--inn));
  max-width: 560px;
}
#skjerm-lager .lager-andelrader { margin-bottom: var(--s-7); }

/* Filterlinja: søk, tre velgere og antallet til høyre. */
#skjerm-lager .lager-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  padding-left: calc(var(--marg) + var(--inn));
  margin-bottom: var(--s-5);
}
#skjerm-lager .lager-filter input[type=search] { width: 300px; max-width: 100%; }
#skjerm-lager .lager-filter select { width: auto; }
#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); }

/* Tabellen over 900 px, radene under. Begge tegnes, og bredden velger. */
#skjerm-lager .lager-tabellboks {
  padding-left: calc(var(--marg) + var(--inn));
  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);
  border-bottom: 1px solid var(--line-2);
  white-space: nowrap;
}
#skjerm-lager .tabell th button {
  font: inherit;
  min-height: 44px;
  padding: 0 var(--s-3) 0 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) 0 0;
  height: 48px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}
#skjerm-lager .tabell tbody tr { cursor: pointer; }
@media (hover: hover) and (pointer: fine) {
  #skjerm-lager .tabell tbody tr:hover { background: var(--flate-3); }
}
#skjerm-lager .tabell a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--brand-tekst);
}
#skjerm-lager .lager-seg {
  display: inline-block;
  width: 2px;
  height: 16px;
  margin-right: var(--s-3);
  vertical-align: middle;
  background: var(--ink-3);
}
#skjerm-lager .lager-prikk {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: var(--r-3);
  background: var(--ink-3);
}
#skjerm-lager .lager-radliste { display: none; }
@media (max-width: 899px) {
  #skjerm-lager .lager-tabellboks { display: none; }
  #skjerm-lager .lager-radliste { display: block; }
  #skjerm-lager .lager-graf { grid-template-columns: minmax(0, 1fr); }
  #skjerm-lager .lager-antall { margin-left: 0; }
}

/* 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: 44px; 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: 40px; flex: 0 0 40px; }
#skjerm-lager .varsel {
  margin: 0 0 var(--s-4);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line-2);
  border-left: 2px 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); }
#skjerm-lager .varsel.feil { border-left-color: var(--rod); }
@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; }
}

/* Steg 3: de fem andre delene. Velgerne ligger i filterlinja som om de
   sto rett i den, og sumraden i Artikler står under en strek. */
#skjerm-lager .lager-velgere { display: contents; }
#skjerm-lager .tabell tfoot td {
  font-weight: 500;
  border-top: 1px solid var(--line-2);
  border-bottom: 0;
}
#skjerm-lager .tabell td .pille { vertical-align: middle; }