/* Oppgave-innboks — komponenter/oppgave-panel.js.
   Badge i navbaren + lista i side-panelet. */

/* ------------------------------- Badge -------------------------------- */

.oppgave-knapp { position: relative; }

.oppgave-badge {
  position: absolute;
  top: 1px;
  right: 0;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--farge-tekst-dempet);
  color: var(--farge-bakgrunn);
  font-size: 10px;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
  /* Egen kant i app-bakgrunnsfarge, så tallet leses selv når det ligger
     oppå ikonets streker. */
  box-shadow: 0 0 0 2px var(--farge-overflate, #fff);
}

/* Rød først når noe faktisk har passert fristen. Ellers ville badgen skreket
   hver gang det var én oppgave, og folk slutter å se den. */
.oppgave-badge--forfalt { background: var(--farge-feil, #dc2626); color: #fff; }

/* -------------------------------- Lista ------------------------------- */

.oppgave-liste { list-style: none; margin: 0; padding: 0; }

.oppgave {
  display: flex;
  align-items: stretch;
  gap: var(--avstand-1);
  border: var(--kant);
  border-radius: var(--radius);
  margin-bottom: var(--avstand-2);
  background: var(--farge-bakgrunn);
}
.oppgave:hover { border-color: var(--farge-kant-sterk); }
.oppgave--forfalt { border-left: 3px solid var(--farge-feil, #dc2626); }

.oppgave__hoved {
  display: flex;
  align-items: center;
  gap: var(--avstand-2);
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--avstand-2);
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.oppgave__hoved:focus-visible { outline: 2px solid var(--farge-primary); outline-offset: -2px; }

.oppgave__ikon {
  flex: 0 0 auto;
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--farge-overflate);
  color: var(--farge-tekst-dempet);
  font-size: 11px;
}

.oppgave__tekst { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.oppgave__tittel {
  font-size: var(--font-base);
  line-height: var(--linje-hoyde-tett);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.oppgave__meta {
  font-size: var(--font-liten);
  color: var(--farge-tekst-dempet);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.oppgave__frist {
  flex: 0 0 auto;
  font-size: var(--font-liten);
  color: var(--farge-tekst-dempet);
  white-space: nowrap;
}
.oppgave--forfalt .oppgave__frist { color: var(--farge-feil, #dc2626); font-weight: 600; }

.oppgave__lukk { flex: 0 0 auto; align-self: center; margin-right: var(--avstand-1); }