/* /leverantor: det som vard.css saknar. Laddas efter vard.css och bygger på dess variabler.
   Knappar, fält, besked, chips, sektioner och heron kommer från vard.css. Här står bara det som
   är eget för sidan: felrader under fält, länens kryssrutor, det dolda filfältet, bildrutnätet,
   förloppet och statusraden för sparande. */

/* --v-fara som tre tal, för felringen som ligger med alfa runt fältet. Samma mönster som
   --v-yta-rgb i vard.css: talen speglar --v-fara i ljust och mörkt läge, och ett test i
   leverantor.test.js kräver att de stämmer. color-mix vore enklare, men Safari 15 slänger då
   hela regelblocket. Ändras --v-fara i vard.css ska talen här ändras med. */
:root {
  --v-fara-rgb: 163 52 42;
}

@media (prefers-color-scheme: dark) {
  :root {
    --v-fara-rgb: 255 133 119;
  }
}

/* ---------- Fält med fel ---------- */

.lev-falt {
  display: grid;
  gap: 6px;
}

.lev-falt-fel {
  margin: 0;
  color: var(--v-fara);
  font-size: 14px;
  font-weight: 500;
}

/* Ett fält med fel får kanten i fara, samma tjocklek som fokusringen så att inget hoppar. */
.lev-falt input[aria-invalid='true'],
.lev-falt select[aria-invalid='true'],
.lev-falt textarea[aria-invalid='true'] {
  border-color: var(--v-fara);
  box-shadow: 0 0 0 3px rgb(var(--v-fara-rgb) / 0.16);
}

.lev-falt textarea {
  min-height: 140px;
  font-size: 16px;
}

.lev-raknare-text {
  margin-top: -8px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ---------- Länen ---------- */

.lev-lan {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.lev-lan-rubrik {
  display: grid;
  gap: 6px;
  padding: 0;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--v-dampad);
}

.lev-lan[aria-invalid='true'] .lev-lan-lista {
  border-color: var(--v-fara);
}

/* Två spalter, varje rad minst 44 px hög så att den går att träffa med tummen. */
.lev-lan-lista {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 16px;
  padding: 4px 12px;
  border: 1.5px solid var(--v-linje);
  border-radius: var(--v-radie);
  background: var(--v-yta);
}

.lev-lan-val {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: 16px;
  color: var(--v-text);
  cursor: pointer;
}

.lev-lan-val input[type='checkbox'] {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--v-accent);
}

/* Hela Sverige står först och får hela raden, som en rubrik för resten. */
.lev-lan-val:first-child {
  grid-column: 1 / -1;
  border-bottom: 1px solid var(--v-linje);
  margin-bottom: 4px;
  font-weight: 500;
}

/* ---------- Bilder ---------- */

.lev-bildval {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}

/* Filfältet är dolt men når tabb och skärmläsare: etiketten intill är knappen. Väljaren är
   längre än vard.css egen input-regel (input:not([type='checkbox']):not([type='radio'])), som
   annars vinner och ger fältet full bredd och 48 px höjd. clip-path och inte clip: med clip
   räknas fältets bredd ändå in i sidans bredd på små skärmar. */
.lev-bildval input[type='file'].lev-filval {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  padding: 0;
  margin: -1px;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.lev-valj {
  cursor: pointer;
}

/* Fältet står före etiketten i DOM:en, så att fokusringen kan läggas på etiketten med +. */
.lev-bildval input[type='file'].lev-filval:focus-visible + .lev-valj {
  outline: 2px solid var(--v-accent);
  outline-offset: 3px;
}

.lev-valj.is-av {
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
}

.lev-raknare {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.lev-forlopp {
  width: 100%;
  height: 4px;
  border: 0;
  border-radius: 2px;
  background: var(--v-accent-mjuk);
  -webkit-appearance: none;
  appearance: none;
  overflow: hidden;
}

.lev-forlopp[hidden] {
  display: none;
}

.lev-forlopp::-webkit-progress-bar {
  background: var(--v-accent-mjuk);
}

.lev-forlopp::-webkit-progress-value {
  background: var(--v-accent);
}

.lev-forlopp::-moz-progress-bar {
  background: var(--v-accent);
}

.lev-bilder {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 12px;
}

@media (min-width: 560px) {
  .lev-bilder {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.lev-bilder .v-tomt {
  grid-column: 1 / -1;
}

.lev-bild {
  display: grid;
  gap: 8px;
  margin: 0;
  min-width: 0;
}

.lev-bild-ram {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--v-radie);
  background: var(--v-yta-2);
  overflow: hidden;
}

.lev-bild-ram img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lev-huvudbild {
  position: absolute;
  top: 8px;
  left: 8px;
}

/* Knapparna under bilden: små och tysta, men aldrig lägre än 44 px så att de går att träffa. */
.lev-bild-knappar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.lev-bild-knappar .v-knapp {
  min-height: 44px;
  padding-left: 8px;
  padding-right: 8px;
  font-size: 13px;
}

/* ---------- Status och sparande ---------- */

.lev-status {
  display: grid;
  gap: 10px;
  justify-items: start;
}

.lev-status-rad {
  color: var(--v-dampad);
  font-size: 15px;
}

/* Live-regionen för sparande behåller sin plats också när den är tom: en region som dyker upp i
   samma ögonblick som texten byts hoppas ofta över av skärmläsare. */
.lev-sparstatus {
  min-height: 20px;
  margin: 0;
  font-size: 14px;
  color: var(--v-dampad);
}

.lev-formular input,
.lev-formular select {
  font-size: 16px;
}

.lev-sidfot {
  margin-top: 40px;
}

/* ---------- Inkorgen ---------- */

/* Text som bara skärmläsare får: samma klippning som det dolda filfältet. */
.lev-dold {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.lev-inkorg {
  display: grid;
  gap: 12px;
}

.lev-inkorg-lista > li {
  padding: 0;
  min-width: 0;
}

.lev-forfragan {
  position: relative;
}

/* Raden: namnet överst, den korta raden under, status och tid sist. Hela raden öppnar
   utfällningen, så summary bär allt som syns i listan. Pilen till höger som i svarslistan. */
.lev-forfragan-huvud {
  display: grid;
  gap: 4px;
  padding: 16px 28px 16px 0;
  min-width: 0;
}

.lev-forfragan-namn {
  font: 600 16px/1.25 var(--v-font-rubrik);
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

.lev-forfragan-rad {
  color: var(--v-dampad);
  font-size: 14px;
  overflow-wrap: anywhere;
}

.lev-forfragan-status {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lev-forfragan-tid {
  font-variant-numeric: tabular-nums;
}

.lev-forfragan-huvud::after {
  content: '›';
  position: absolute;
  right: 0;
  top: 18px;
  font-family: var(--v-font-rubrik);
  font-size: 22px;
  line-height: 1;
  color: var(--v-dampad);
  transform: rotate(90deg);
}

.lev-forfragan[open] .lev-forfragan-huvud::after {
  transform: rotate(-90deg);
}

@media (prefers-reduced-motion: no-preference) {
  .lev-forfragan-huvud::after {
    transition: transform var(--v-tid-tryck) var(--v-kurva-ut);
  }
}

/* Från 560 px står status och tid till höger om namnet. */
@media (min-width: 560px) {
  .lev-forfragan-huvud {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
  }

  .lev-forfragan-namn,
  .lev-forfragan-rad {
    grid-column: 1;
  }

  .lev-forfragan-status {
    grid-column: 2;
    grid-row: 1;
    justify-content: flex-end;
  }

  .lev-forfragan-tid {
    grid-column: 2;
    grid-row: 2;
    text-align: right;
  }
}

/* Tråden: en bubbla per meddelande, festägarens till vänster och egna till höger. */
.lev-trad {
  display: grid;
  gap: 10px;
  min-width: 0;
}

/* justify-self: start krymper bubblan till texten, som en egen bubbla gör med end. Utan den
   sträcks motpartens bubbla alltid till 85 % av bredden, också för ett kort meddelande. */
.lev-bubbla {
  display: grid;
  gap: 4px;
  justify-self: start;
  max-width: 85%;
  min-width: 0;
  padding: 10px 14px;
  border: 1px solid var(--v-linje);
  border-radius: 16px;
  background: var(--v-yta);
  color: var(--v-text);
  overflow-wrap: anywhere;
}

.lev-bubbla.is-egen {
  justify-self: end;
  border-color: var(--v-accent-mjuk);
  background: var(--v-accent-mjuk);
  color: var(--v-accent-text);
}

.lev-bubbla-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.lev-bubbla-tid {
  font-variant-numeric: tabular-nums;
}

/* Ingen opacity på tidsraden: --v-accent-text mot --v-accent-mjuk klarar AA (5,0:1 i ljust läge),
   men sänkt till 0.85 hamnar den under 4,5:1. */
.lev-bubbla.is-egen .lev-bubbla-tid {
  color: var(--v-accent-text);
}

.lev-trad-status {
  min-height: 20px;
  margin: 0;
}

.lev-trad-svar {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.lev-trad-form textarea {
  min-height: 110px;
  font-size: 16px;
}

.lev-trad-avslutad {
  margin: 0;
}