/* =============================================================================
   screens.css — layout per skjerm. Komponentene gjør jobben; her plasseres de.
========================================================================== */

/* === FOKUS-SKALL (innlogging, ordrebekreftelse) ========================== */
.focus-shell {
  min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto;
}
.focus-shell__bar { padding: var(--space-6); }
.focus-shell__bar .topbar__brand { font-size: var(--text-md); }
.focus-main { display: grid; place-items: center; padding: var(--space-6); }
.focus-card {
  width: 100%; max-width: 412px;
  background: var(--surface);
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-sm);
}
/* Dokumentvariant — for løpende tekst som skal leses, ikke et skjema som skal
   fylles ut. 412px er riktig for et innloggingskort og altfor smalt for en
   personvernerklæring. Bredden er satt etter lesbar linjelengde, ikke etter
   hvor mye plass som finnes. */
.focus-card--dokument { max-width: 68ch; text-align: start; }

.focus-card__head { margin-bottom: var(--space-7); }
.focus-card__logo { display: block; height: 80px; width: auto; margin: 0 auto var(--space-5); }
.focus-card__head h1 { font-size: var(--text-2xl); margin-bottom: var(--space-3); }
.focus-card__head p { color: var(--ink-muted); font-size: var(--text-sm); }
.focus-foot { padding: var(--space-6); text-align: center; font-size: var(--text-xs); color: var(--ink-subtle); }

.resend { display: flex; justify-content: space-between; align-items: center; font-size: var(--text-sm); }
.resend__timer { color: var(--ink-subtle); font-variant-numeric: tabular-nums; }
.linkbtn {
  border: 0; background: 0; padding: 0; cursor: pointer;
  color: var(--accent); font: inherit; font-size: var(--text-sm); font-weight: var(--weight-medium);
}
.linkbtn:hover { color: var(--accent-hover); text-decoration: underline; }
.linkbtn:disabled { color: var(--ink-faint); cursor: not-allowed; text-decoration: none; }

/* === SIDEHODE (gjentas på katalog/kurv/utsjekk) ========================== */
.pagehead {
  padding-block: var(--space-7) var(--space-6);
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-5);
  flex-wrap: wrap;
}
.pagehead h1 { font-size: var(--text-2xl); }
.pagehead__meta { color: var(--ink-subtle); font-size: var(--text-sm); margin-top: var(--space-2); }

/* === KATALOG ============================================================= */
.catalog {
  display: grid; grid-template-columns: var(--sidebar-w) 1fr; gap: var(--space-7);
  align-items: start; padding-bottom: var(--space-9);
}
/* Liten katalog: sidekolonnen er borte, så rutenettet tar hele bredden. */
.catalog--bred { grid-template-columns: 1fr; }
.filters { position: sticky; top: calc(var(--topbar-h) + var(--space-6)); }
.filters__group { padding-block: var(--space-5); border-bottom: var(--hairline) solid var(--line); }
.filters__group:first-child { padding-top: 0; }
.filters__legend {
  font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--ink);
  margin-bottom: var(--space-4);
}
.check { display: flex; align-items: center; gap: var(--space-3); padding-block: var(--space-2); cursor: pointer; font-size: var(--text-sm); color: var(--ink-muted); }
.check:hover { color: var(--ink); }
.check input { accent-color: var(--accent); width: 15px; height: 15px; }
.check__count { margin-inline-start: auto; color: var(--ink-faint); font-variant-numeric: tabular-nums; font-size: var(--text-xs); }
/* Flere avkryssingsbokser som ett valg (f.eks. hvilke kategorier trykk gjelder):
   to kolonner så lista ikke blir en lang stolpe i innstillingene. */
.check-liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0 var(--space-5); margin-block: var(--space-2); }

.catalog__toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.catalog__count { font-size: var(--text-sm); color: var(--ink-subtle); white-space: nowrap; }
.catalog__count b { color: var(--ink); font-weight: var(--weight-semibold); }
.catalog__count .icon { width: 14px; height: 14px; display: inline-block; vertical-align: -2px; }

/* Søkefelt (i tillegg til kategorifilteret) */
.searchbar { position: relative; flex: 1 1 auto; max-width: 460px; }
.searchbar__icon {
  position: absolute; inset-inline-start: 12px; top: 50%; transform: translateY(-50%);
  color: var(--ink-subtle); pointer-events: none; display: flex;
}
.searchbar__icon .icon { width: 17px; height: 17px; }
.searchbar__input {
  width: 100%; height: var(--control-h);
  padding-inline: 38px 36px;
  border: var(--hairline) solid var(--field-line); border-radius: var(--field-radius);
  background: var(--field-bg); color: var(--ink); font-size: var(--text-sm);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.searchbar__input::placeholder { color: var(--ink-subtle); }
.searchbar__input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.searchbar__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.searchbar__clear {
  position: absolute; inset-inline-end: 8px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 26px; height: 26px;
  color: var(--ink-subtle); border-radius: var(--radius-sm);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.searchbar__clear .icon { width: 15px; height: 15px; }
.searchbar__clear:hover { background: var(--surface-hover); color: var(--ink); }
/* I et panelhode deler søkefeltet plass med tittelen og skal ikke sluke bredden. */
.searchbar--sm { flex: 0 1 280px; }

.grid {
  display: grid; gap: var(--space-5);
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.product-card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--surface); border: var(--hairline) solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
/* Hele kortet er klikkbart: navnelenka strekkes over flaten. */
.product-card__name a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.product-card__foot .btn { position: relative; z-index: 2; }
.product-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); transform: translateY(-2px); }
/* Kvadratisk, som produktsiden og som de aller fleste leverandørbildene selv.
   Bildene kommer i alt fra brede bannere til stående portretter, og `cover`
   fylte boksen ved å beskjære — da sto plagget i vidt ulik størrelse fra kort
   til kort. `contain` viser hele bildet, så plaggene blir like store uansett
   hvilket format fotografen leverte. */
.product-card__media {
  aspect-ratio: 1; background: var(--surface);
  border-bottom: var(--hairline) solid var(--line);
  display: grid; place-items: center; position: relative;
  padding: var(--space-4);
}
.product-card__media img { width: 100%; height: 100%; object-fit: contain; }
.product-card__ph { color: var(--ink-faint); opacity: 0.6; }
.product-card__ph .icon { width: 36px; height: 36px; }
.product-card__flag {
  position: absolute; top: var(--space-3); left: var(--space-3);
}
.product-card__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.product-card__sku { font-size: var(--text-2xs); color: var(--ink-subtle); }
.product-card__name { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--ink); line-height: var(--leading-snug); }
.product-card__name a { color: inherit; }
.product-card__name a:hover { color: var(--accent); text-decoration: none; }
.product-card__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-3); }

/* listevisning */
.grid[data-view="list"] { grid-template-columns: 1fr; }
.grid[data-view="list"] .product-card { flex-direction: row; align-items: stretch; }
.grid[data-view="list"] .product-card__media { width: 132px; aspect-ratio: auto; border-bottom: 0; border-right: var(--hairline) solid var(--line); }
.grid[data-view="list"] .product-card__body { flex-direction: row; align-items: center; gap: var(--space-6); }
.grid[data-view="list"] .product-card__foot { margin: 0; padding: 0; }
@media (max-width: 560px) { .grid[data-view="list"] .product-card { flex-direction: column; } .grid[data-view="list"] .product-card__media { width: 100%; aspect-ratio: 4/3; } }

@media (max-width: 880px) {
  .catalog { grid-template-columns: 1fr; }
  .filters { position: static; }
  /* Kategoriene ligger på rad over rutenettet på mobil i stedet for i en kolonne */
  .filters__group { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
  .filters__legend { width: 100%; }
}

@media (max-width: 560px) {
  .catalog__toolbar { flex-wrap: wrap; }
  .searchbar { max-width: none; flex-basis: 100%; }
}

/* === PRODUKTSIDE ========================================================= */
.product {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-8);
  align-items: start; padding-block: var(--space-6) var(--space-9);
}
.product__gallery { position: sticky; top: calc(var(--topbar-h) + var(--space-6)); display: flex; flex-direction: column; gap: var(--space-4); }
.product__media { position: relative; overflow: hidden; aspect-ratio: 1; background: var(--surface); border: var(--hairline) solid var(--line); border-radius: var(--radius-lg); display: grid; place-items: center; padding: var(--space-5); }
.product__media img { width: 100%; height: 100%; object-fit: contain; }
.product__thumbs { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.product__thumb { width: 64px; aspect-ratio: 1; border-radius: var(--radius-sm); background-color: var(--surface); background-size: contain; background-repeat: no-repeat; background-position: center; border: 2px solid var(--line); cursor: pointer; padding: 0; }
.product__thumb[aria-current="true"] { border-color: var(--ink); }
.gallery__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 50%; border: var(--hairline) solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; display: grid; place-items: center; font-size: 22px; line-height: 1; padding: 0; box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.12)); }
.gallery__nav:hover { background: var(--surface-hover); }
.gallery__nav--prev { left: var(--space-3); }
.gallery__nav--next { right: var(--space-3); }
.admin-gallery { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.admin-gallery__item { position: relative; width: 120px; }
.admin-gallery__item img { width: 120px; height: 120px; object-fit: cover; border-radius: var(--radius-md); border: var(--hairline) solid var(--line); display: block; }
.admin-gallery__main { position: absolute; top: 6px; left: 6px; background: var(--ink); color: var(--surface); font-size: 11px; font-weight: var(--weight-medium); padding: 1px 7px; border-radius: 999px; }
.admin-gallery__actions { display: flex; gap: 4px; margin-top: 6px; }
.admin-gallery__actions form { margin: 0; }
.symbolrad { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.symbol { width: 56px; text-align: center; }
.symbol img { width: 36px; height: 36px; object-fit: contain; display: block; margin: 0 auto; }
.symbol span { display: block; font-size: 10px; color: var(--ink-subtle); margin-top: 3px; line-height: 1.2; }
.ikonvelger { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.ikonvelger__btn { display: block; background: none; border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer; text-align: center; width: 60px; padding: 6px 4px; opacity: 0.35; font-family: inherit; transition: opacity var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.ikonvelger__btn img { width: 36px; height: 36px; object-fit: contain; display: block; margin: 0 auto; }
.ikonvelger__btn span { display: block; font-size: 10px; color: var(--ink-subtle); margin-top: 3px; line-height: 1.2; }
.ikonvelger__btn:hover { opacity: 0.7; }
.ikonvelger__btn.is-valgt { opacity: 1; border-color: var(--line); background: var(--surface-sunk); }
.ikonvelger__btn.is-valgt:hover { opacity: 1; }
.ikonvelger__inp { position: absolute; opacity: 0; width: 0; height: 0; }
.ikonvelger__btn:has(.ikonvelger__inp:checked) { opacity: 1; border-color: var(--line); background: var(--surface-sunk); }
.ikonvelger__btn:has(.ikonvelger__inp:focus-visible) { outline: 2px solid var(--line); outline-offset: 2px; }

.product__info { display: flex; flex-direction: column; gap: var(--space-5); }
.product__title { font-size: var(--text-2xl); }
.product__sku { font-size: var(--text-sm); color: var(--ink-subtle); }
.product__price-row { display: flex; align-items: baseline; gap: var(--space-4); }
.product__buy { display: flex; gap: var(--space-4); align-items: flex-end; flex-wrap: wrap; padding-block: var(--space-5); border-block: var(--hairline) solid var(--line); }
.product__buy .stepper { height: var(--control-h); }
.product__buy .stepper__btn { width: 40px; }
.product__buy .btn { flex: 1; }
.product__section { display: flex; flex-direction: column; gap: var(--space-2); }
/* Leverandørtekstene kommer med linjeskift som bærer mening — avsnitt, og
   lister over sertifiseringer og egenskaper. Uten dette kollapser de til én
   vegg av tekst. pre-line framfor pre-wrap: linjeskiftene skal beholdes, men
   ikke leverandørens tilfeldige doble mellomrom. */
.product__intro { white-space: pre-line; }
.product__text { white-space: pre-wrap; color: var(--ink-muted); font-size: var(--text-sm); line-height: 1.55; }
.malskjema { margin-top: var(--space-7); margin-bottom: var(--space-9); }
.malskjema__tabell { overflow-x: auto; margin-top: var(--space-3); }
.malskjema__tabell table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.malskjema__tabell th, .malskjema__tabell td { border: var(--hairline) solid var(--line); padding: var(--space-2) var(--space-3); text-align: left; vertical-align: top; }
.malskjema__tabell th { background: transparent; font-weight: var(--weight-medium); white-space: nowrap; }

.specs { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.specs th { text-align: left; font-weight: var(--weight-regular); color: var(--ink-subtle); padding: var(--space-3) 0; width: 40%; vertical-align: top; }
.specs td { padding: var(--space-3) 0; border-bottom: var(--hairline) solid var(--line); font-variant-numeric: tabular-nums; }
.specs tr:last-child td, .specs tr:last-child th { border-bottom: 0; }

@media (max-width: 820px) {
  .product { grid-template-columns: 1fr; }
  .product__gallery { position: static; }
}

/* === KURV + UTSJEKK (delt to-kolonne med sammendrag) ===================== */
.checkout-grid {
  display: grid; grid-template-columns: 1fr 360px; gap: var(--space-7);
  align-items: start; padding-bottom: var(--space-9);
}
.summary { position: sticky; top: calc(var(--topbar-h) + var(--space-6)); }
.summary__row { display: flex; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-3); font-size: var(--text-sm); }
.summary__row .price { font-size: var(--text-sm); }
.summary__total { border-top: var(--hairline) solid var(--line-strong); margin-top: var(--space-3); padding-top: var(--space-4); }
.summary__total .summary__row { font-weight: var(--weight-semibold); }
.summary__total .price { font-size: var(--text-lg); }

/* ---- Trykk-panel i utsjekk (pris + plassering) ---- */
.trykk__pris {
  background: var(--surface-sunk);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}
.trykk__pris .summary__row { padding-block: var(--space-2); }
.trykk__pris-sum {
  border-top: var(--hairline) solid var(--line);
  margin-top: var(--space-2); padding-top: var(--space-3);
  font-weight: var(--weight-semibold);
}
.trykk__info, .trykk__pakrevd { font-size: var(--text-sm); }
.trykk__hake { font-size: var(--text-sm); color: var(--ink); }
/* Trykk per plagg: én rad per linje i kurven, med sine egne plasseringer.
   Raden er hele klikkflata — haken, navnet og linjesummen hører sammen. */
.trykk__topp { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.trykk__linjer { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.trykk__linje {
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
}
.trykk__linje--av { background: var(--surface-sunk); }
.trykk__linjehode {
  display: flex; align-items: center; gap: var(--space-3);
  cursor: pointer; font-size: var(--text-sm);
}
.trykk__navn { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.trykk__navn .u-subtle { font-size: var(--text-xs); }
.trykk__linjesum { white-space: nowrap; }
.trykk__linjehode + .trykk__valg { margin-top: var(--space-3); }
.trykk__utenfor { font-size: var(--text-sm); }
.trykk__valg { display: flex; flex-wrap: wrap; gap: var(--space-3); }
/* Radioknappen skjules visuelt, men beholdes for tastatur/skjermleser —
   samme grep som størrelsesvalget på produktsiden. */
.trykk__chip { position: relative; cursor: pointer; }
.trykk__chip input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.trykk__chip span {
  display: inline-flex; align-items: center;
  min-height: var(--control-h-sm); padding: 0 var(--space-4);
  background: var(--surface);
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius-md);
  font-size: var(--text-sm); color: var(--ink); user-select: none;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.trykk__chip:hover span { border-color: var(--line-strong); }
.trykk__chip input:checked + span {
  border-color: var(--accent); background: var(--accent-weak); color: var(--accent-hover);
}
.trykk__chip input:focus-visible + span {
  border-color: var(--focus); box-shadow: var(--focus-ring);
}

/* Ordre-dokument (Mine ordrer → detalj, print-vennlig PDF) */
.ordok__top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); }
.ordok__brand { font-weight: var(--weight-semibold); font-size: var(--text-lg); }
.ordok__meta { display: flex; flex-wrap: wrap; gap: var(--space-8); margin: var(--space-5) 0 var(--space-6); font-size: var(--text-sm); }
.ordok__sum { margin: var(--space-6) 0 0 auto; max-width: 320px; }
.ordok__total { border-top: var(--hairline) solid var(--line-strong); margin-top: var(--space-2); padding-top: var(--space-3); font-weight: var(--weight-semibold); }
/* Trykk-blokk i ordredokumentet — skal være det første den som pakker ser
   etter varelinjene, både på skjerm og i utskrift. */
.ordok__trykk {
  margin-top: var(--space-5);
  padding: var(--space-4);
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-sunk);
  font-size: var(--text-sm);
}
@media print {
  .topbar, .no-print, .toast-region { display: none !important; }
  .pagehead { padding-top: 0; }
  .container { max-width: none; }
  body { background: #fff; }
  .ordok.panel { border: none; box-shadow: none; }
}

.cart-line { display: grid; grid-template-columns: 64px 1fr auto; gap: var(--space-5); align-items: center; padding: var(--space-5) 0; border-bottom: var(--hairline) solid var(--line); }
.cart-line:last-child { border-bottom: 0; }
.cart-line__media { width: 64px; aspect-ratio: 1; background: var(--surface); border: var(--hairline) solid var(--line); border-radius: var(--radius-sm); }
.cart-line__name { font-size: var(--text-sm); font-weight: var(--weight-medium); }
.cart-line__sku { font-size: var(--text-2xs); color: var(--ink-subtle); margin-top: 2px; }
.cart-line__controls { display: flex; align-items: center; gap: var(--space-5); }
.cart-line__line-total { min-width: 96px; text-align: right; }
.cart-line__remove { color: var(--ink-faint); border: 0; background: 0; cursor: pointer; padding: var(--space-2); border-radius: var(--radius-sm); transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.cart-line__remove:hover { color: var(--critical); background: var(--critical-weak); }
@media (max-width: 720px) {
  .checkout-grid { grid-template-columns: 1fr; }
  .summary { position: static; order: 2; }
  .cart-line { grid-template-columns: 56px 1fr; }
  .cart-line__controls { grid-column: 2; justify-content: space-between; }
}

.fieldset-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.fieldset-grid .field--full { grid-column: 1 / -1; }
@media (max-width: 520px) { .fieldset-grid { grid-template-columns: 1fr; } }

/* === ORDREBEKREFTELSE ==================================================== */
.confirm__mark {
  width: 56px; height: 56px; border-radius: var(--radius-pill);
  background: var(--positive-weak); color: var(--positive);
  display: grid; place-items: center; margin-bottom: var(--space-5);
}
.confirm__mark .icon { width: 28px; height: 28px; }
.confirm__order { font-family: var(--font-mono); font-size: var(--text-lg); color: var(--ink); }

/* === ADMIN =============================================================== */
.admin { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100dvh; }
.admin__nav { border-right: var(--hairline) solid var(--line); padding: var(--space-6); background: var(--surface); }
.admin__brand { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-7); font-weight: var(--weight-semibold); }
.admin__navlist { display: flex; flex-direction: column; gap: var(--space-1); }
.admin__navlink {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm);
  color: var(--ink-muted); font-size: var(--text-sm); font-weight: var(--weight-medium);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.admin__navlink:hover { background: var(--surface-hover); color: var(--ink); text-decoration: none; }
.admin__navlink[aria-current="page"] { background: var(--accent-weak); color: var(--accent-hover); }
.admin__navlink .icon { width: 17px; height: 17px; }
.admin__main { padding: var(--space-7); max-width: 1400px; }
.admin__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); margin-bottom: var(--space-7); }
.stat { background: var(--surface); border: var(--hairline) solid var(--line); border-radius: var(--radius-lg); padding: var(--space-5); }
.stat__label { font-size: var(--text-xs); color: var(--ink-subtle); }
.stat__value { font-size: var(--text-2xl); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-tight); margin-top: var(--space-2); }
.stat__delta { font-size: var(--text-xs); margin-top: var(--space-2); color: var(--positive); }
.stat__delta--down { color: var(--critical); }
@media (max-width: 980px) { .admin__stats { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 720px) {
  .admin { grid-template-columns: 1fr; }
  .admin__nav { display: none; }
}

.toolbar { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-5); flex-wrap: wrap; }
.toolbar .input-group { width: 280px; max-width: 100%; }
.toolbar__spacer { flex: 1; }

/* --- Enhetsleder: hva de ansatte har fått ---------------------------------- */
.enhetstall { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--space-5); }
.enhetstall__celle { display: grid; gap: var(--space-1); }
.enhetstall__tall { font-size: var(--text-xl); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.enhetstall__merkelapp { font-size: var(--text-xs); color: var(--ink-subtle); }

.ansattrad { padding-block: var(--space-4); border-block-start: 1px solid var(--line); }
.ansattrad:first-child { border-block-start: 0; }
.ansattrad__topp { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.ansattrad__navn { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: var(--weight-semibold); }
.ansattrad__navn svg { inline-size: 15px; block-size: 15px; color: var(--ink-subtle); }
.ansattrad__tall { font-size: var(--text-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ansattrad__kupong { display: flex; align-items: center; gap: var(--space-3); margin-block-start: var(--space-2); font-size: var(--text-xs); }
.ansattrad__varer { margin: var(--space-3) 0 0; padding-inline-start: var(--space-5); display: grid; gap: var(--space-1); font-size: var(--text-sm); }
.ansattrad__antall { font-variant-numeric: tabular-nums; font-weight: var(--weight-semibold); }

.kupongstolpe { flex: 1; max-width: 220px; block-size: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.kupongstolpe__fyll { display: block; block-size: 100%; background: var(--accent); }

/* Søknader til egen enhet — lederen bekrefter at personen jobber der. */
.soknad { padding-block: var(--space-4); border-block-start: 1px solid var(--line); display: grid; gap: var(--space-3); }
.soknad:first-child { border-block-start: 0; }
.soknad__hode { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  font-size: var(--text-sm); padding-block: var(--space-2); }
.soknad__navn { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: var(--weight-semibold); }
.soknad__navn svg { inline-size: 15px; block-size: 15px; color: var(--ink-subtle); }
.soknad__felt { display: grid; grid-template-columns: auto 1fr; gap: var(--space-1) var(--space-4);
  margin: 0; font-size: var(--text-sm); }
.soknad__felt dt { color: var(--ink-subtle); }
.soknad__felt dd { margin: 0; }
.soknad__erklaering { font-size: var(--text-xs); font-style: italic; margin: 0; }
.soknad__valg { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.soknad__valg .input { flex: 1; min-inline-size: 180px; }

/* Lagrelinje for lange admin-skjemaer.

   Innstillingene er ett skjema fordelt på sju paneler. Ligger lagreknappen
   inne i ett av dem, ser den ut til å høre til det panelet — og den som huker
   av noe i et annet panel finner ingen måte å lagre på. Linja festes derfor
   nederst i vinduet: én knapp, alltid synlig, som åpenbart gjelder hele siden. */
.formbar {
  position: sticky; bottom: 0; z-index: var(--z-sticky);
  display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
  margin-top: var(--space-6);
  padding: var(--space-4) 0;
  background: linear-gradient(to top, var(--bg) 70%, transparent);
}
.formbar__hint { font-size: var(--text-xs); color: var(--ink-subtle); }

/* Paginering under katalogrutenettet. Tegnes bare når det finnes flere sider —
   se catalog.html. Knappene i endene beholder plassen sin som deaktiverte,
   så «Neste» ikke flytter seg når man kommer til siste side. */
.paginering {
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-5); margin-top: var(--space-7);
  padding-top: var(--space-6); border-top: var(--hairline) solid var(--line);
}
.paginering__teller { font-size: var(--text-xs); color: var(--ink-subtle); }
.btn--av { opacity: .38; pointer-events: none; }
/* «side 2 av 3» ved siden av varetellingen. Dempet — tallet foran er poenget. */
.catalog__side { color: var(--ink-subtle); }


/* ---------------------------------------------------------------------------
   ROLLER (/admin/roller)
   Lukket er en rolle én linje å skanne: navn, brukere, hva den kan, sortiment.
   Åpnet er skjemaet — samme for ny og eksisterende rolle.
--------------------------------------------------------------------------- */
.roller { display: grid; gap: var(--space-3); max-width: 980px; }
.rolle {
  background: var(--surface); border: var(--hairline) solid var(--line);
  border-radius: var(--radius-lg);
}
.rolle[open] { border-color: var(--line-strong); box-shadow: var(--shadow-xs); }
.rolle__topp {
  display: grid; grid-template-columns: minmax(140px, 1.2fr) auto minmax(0, 2fr) auto 20px;
  align-items: center; gap: var(--space-4);
  padding: var(--space-4) var(--space-5); cursor: pointer; list-style: none;
  font-size: var(--text-sm);
}
.rolle__topp::-webkit-details-marker { display: none; }
.rolle__topp:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--radius-lg); }
.rolle__navn { font-weight: var(--weight-semibold); color: var(--ink); display: inline-flex; align-items: center; gap: var(--space-2); }
.rolle__brukere, .rolle__sortiment { color: var(--ink-subtle); white-space: nowrap; font-size: var(--text-xs); }
.rolle__merker { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; font-size: var(--text-xs); }
.rolle__pil { color: var(--ink-faint); display: inline-flex; transform: rotate(90deg); transition: transform var(--dur-fast) var(--ease); }
.rolle[open] .rolle__pil { transform: rotate(-90deg); }
.rolle--inaktiv .rolle__navn { color: var(--ink-muted); }
.rolle--ny { border-style: dashed; background: transparent; }
.rolle--ny .rolle__topp { grid-template-columns: 1fr; color: var(--accent); }
.rolle--ny .rolle__navn { color: var(--accent); }
.rolle__innhold { padding: 0 var(--space-5) var(--space-5); border-top: var(--hairline) solid var(--line); }
.rolle__slett { margin-top: var(--space-4); padding-top: var(--space-4); border-top: var(--hairline) solid var(--line); }

.rolleskjema { display: grid; gap: var(--space-6); padding-top: var(--space-5); }
.rolleskjema__navn { margin: 0; max-width: 420px; }
.rolleskjema__gruppe { border: 0; padding: 0; margin: 0; min-width: 0; }
.rolleskjema__gruppe > legend { margin-bottom: var(--space-3); }
.rolleskjema__valg { display: flex; flex-wrap: wrap; gap: 0 var(--space-6); }
.rolleskjema__kategorier { margin-top: var(--space-2); padding: var(--space-3) var(--space-4); background: var(--surface-sunk); border-radius: var(--radius-md); }
.rolleskjema__bunn {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-4) var(--space-6);
  padding-top: var(--space-5); border-top: var(--hairline) solid var(--line);
}
.rolleskjema__sortering { margin: 0; width: 170px; }
.rolleskjema__aktiv { padding-bottom: var(--space-3); }
.rolleskjema__aktiv small { font-size: var(--text-xs); }
.rolleskjema__knapper { margin-left: auto; }

/* Kapabilitetene er valg med konsekvenser, så hver har en setning om hva den gjør. */
.kapabiliteter { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-3); }
.kapabilitet {
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: start;
  padding: var(--space-3) var(--space-4); border: var(--hairline) solid var(--line);
  border-radius: var(--radius-md); cursor: pointer; font-size: var(--text-sm);
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.kapabilitet:hover { border-color: var(--line-strong); }
.kapabilitet input { accent-color: var(--accent); width: 15px; height: 15px; margin-top: 3px; }
.kapabilitet strong { display: block; font-weight: var(--weight-semibold); color: var(--ink); }
.kapabilitet small { display: block; margin-top: 2px; color: var(--ink-subtle); font-size: var(--text-xs); line-height: 1.45; }
.kapabilitet:has(input:checked) { border-color: var(--accent); background: var(--surface-sunk); }
.kapabilitet--advarsel:has(input:checked) { border-color: var(--warning); background: var(--warning-weak); }

@media (max-width: 720px) {
  .rolle__topp { grid-template-columns: 1fr auto 20px; row-gap: var(--space-2); padding: var(--space-4); }
  .rolle__merker { grid-column: 1 / -1; grid-row: 2; }
  .rolle__sortiment { display: none; }
  .rolle__innhold { padding: 0 var(--space-4) var(--space-4); }
  .rolleskjema__knapper { margin-left: 0; width: 100%; }
  .rolleskjema__knapper .btn { width: 100%; justify-content: center; }
}


/* ---------------------------------------------------------------------------
   BESTILL FOR EN ENHET (api/bestilling.py)
--------------------------------------------------------------------------- */
.bestill-for__brikke {
  display: inline-flex; align-items: center; gap: var(--space-2); max-width: 280px;
  height: 32px; padding-inline: var(--space-3); border-radius: var(--radius-pill);
  border: var(--hairline) solid var(--line-strong); background: var(--surface);
  color: var(--ink); font-size: var(--text-xs); text-decoration: none; white-space: nowrap;
}
.bestill-for__brikke:hover { border-color: var(--accent); }
.bestill-for__etikett { color: var(--ink-subtle); }
.bestill-for__verdi { overflow: hidden; text-overflow: ellipsis; font-weight: var(--weight-medium); }
.bestill-for__brikke--mangler { border-color: var(--warning); background: var(--warning-weak); color: var(--warning-ink); }
.bestill-for__brikke--mangler .icon { width: 14px; height: 14px; }
.bestill-for__valgt {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-4);
  padding: var(--space-4) var(--space-5); margin-bottom: var(--space-5);
  border: var(--hairline) solid var(--accent); border-radius: var(--radius-lg); background: var(--surface-sunk);
}
.bestill-for__navn { font-size: var(--text-lg, 1.125rem); font-weight: var(--weight-semibold); color: var(--ink); }
.bestill-for__utsjekk { border-color: var(--accent); }
#enhet-velger tr[aria-current="true"] td { background: var(--surface-sunk); }
@media (max-width: 720px) {
  .bestill-for__brikke { max-width: 160px; }
  .bestill-for__etikett { display: none; }
}

/* --- Rapporter: dashboard ------------------------------------------------ */
.rapportfilter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-4); }
.rapportfilter .field { margin: 0; }
.rapportfilter .input, .rapportfilter .select { min-width: 150px; }
.snarveier { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.stat__sub { font-size: var(--text-xs); color: var(--ink-subtle); margin-top: var(--space-2); font-variant-numeric: tabular-nums; }
.rapportrutenett { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); margin-top: var(--space-6); }
@media (max-width: 1100px) { .rapportrutenett { grid-template-columns: 1fr; } }
.rapportrutenett .panel { min-width: 0; }

/* Søylene er én serie — omsetning — og bærer derfor blekkfargen, ikke
   merkerødt: rødt i et diagram leses som et varsel. Tallene står i tabellen
   under; tooltipen er en snarvei, ikke eneste vei til tallet. */
.soyler { display: flex; align-items: flex-end; gap: 2px; block-size: 200px;
  border-block-end: var(--hairline) solid var(--line-strong); }
.soyle { flex: 1; min-width: 0; block-size: 100%; display: flex; align-items: flex-end;
  position: relative; outline: none; }
.soyle__fyll { display: block; inline-size: 100%; max-inline-size: 48px; margin-inline: auto;
  background: var(--ink); border-radius: 4px 4px 0 0; min-block-size: 0; }
.soyle:hover .soyle__fyll, .soyle:focus-visible .soyle__fyll { background: var(--ink-muted); }
.soyle__tips { display: none; position: absolute; inset-block-end: calc(100% + 6px); inset-inline-start: 50%;
  transform: translateX(-50%); z-index: 2; white-space: nowrap; pointer-events: none;
  background: var(--surface); color: var(--ink); border: var(--hairline) solid var(--line-strong);
  border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); font-size: var(--text-xs);
  box-shadow: 0 4px 16px rgb(0 0 0 / 0.08); font-variant-numeric: tabular-nums; }
.soyle:hover .soyle__tips, .soyle:focus-visible .soyle__tips { display: block; }
.soyle__tips strong { display: block; margin-block-end: var(--space-1); }
.soyleakse { display: flex; gap: 2px; margin-top: var(--space-2); }
.soyleakse span { flex: 1; min-width: 0; text-align: center; font-size: var(--text-2xs); color: var(--ink-subtle); overflow: hidden; }
.soyle--start .soyle__tips { inset-inline-start: 0; transform: none; }
.soyle--slutt .soyle__tips { inset-inline-start: auto; inset-inline-end: 0; transform: none; }
@media (max-width: 720px) { .rapporttall .stat__value { font-size: var(--text-xl); white-space: nowrap; } }