/* ==========================================================================
   OPPGAVER, skjermen (28. september 2026)

   Eget ark som hjerne.css og konsept.css, fordi lodd.css deles til to andre
   repoer, og ukelista er skallets egen. Bare det Lodd ikke har fra før står
   her: statusknappens tre tegninger, segmentraden, ukehodet på smal skjerm
   og fokusmerket på raden. Ingen ny farge: segmentene og tokens er de samme
   som resten av skallet bruker, definert i begge temaer i lodd.css.
   ========================================================================== */

/* Tallet ved Oppgaver i menyen er grått, ikke amber som systemenes. En åpen
   oppgave er normaltilstanden, ikke noe som venter på inngripen. --ink-2 og
   ikke --ink-3: på 12px holdt det svakeste grå ikke 4,5 i kontrast. */
.sidemeny #oppgaver-tall { color: var(--ink-2); }

/* --- ukehodet ------------------------------------------------------------ */

#skjerm-oppgaver .opg-ukehode { align-items: center; }
/* .seksjon skyver en .pille ut til høyre. Merket «Arkiv» hører til datoene. */
#skjerm-oppgaver .opg-ukehode > .opg-merke { margin-left: 0; }
#skjerm-oppgaver .opg-styring {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-left: auto;
}
#skjerm-oppgaver .opg-styring .ikonknapp[hidden] { display: none; }

/* Segmentraden. Et tredje nivå er en rad med knapper, aldri en meny
   (spes-navigasjon.md regel 2). */
#skjerm-oppgaver .opg-seg {
  display: inline-flex;
  gap: var(--s-1);
  padding: var(--s-1);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background: var(--flate-2);
}
#skjerm-oppgaver .opg-seg button {
  font: inherit;
  font-size: var(--t-3);
  font-weight: 500;
  min-height: 44px;
  min-width: 44px;
  padding: 0 var(--s-4);
  border: 1px solid transparent;
  border-radius: var(--r-1);
  background: none;
  color: var(--ink-3);
  cursor: pointer;
  touch-action: manipulation;
}
#skjerm-oppgaver .opg-seg button[aria-pressed="true"] {
  background: var(--flate);
  border-color: var(--line-2);
  color: var(--ink);
}
#skjerm-oppgaver .opg-seg button:disabled { cursor: default; opacity: .5; }
@media (hover: hover) and (pointer: fine) {
  #skjerm-oppgaver .opg-seg button:hover:not(:disabled) { color: var(--ink); }
}

/* Linjene under ukehodet: overført, tom uke, feil og kvittering. Samme
   innrykk som radene, så de ligger på linja og ikke ved siden av den. */
#skjerm-oppgaver .opg-linje {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-4);
  margin: 0 0 var(--s-4);
  padding-left: calc(var(--marg) + var(--inn));
  font-size: var(--t-3);
  line-height: var(--t-3-h);
  color: var(--ink-3);
}
#skjerm-oppgaver .opg-linje[hidden] { display: none; }
#skjerm-oppgaver .opg-linje.feilmelding { color: var(--rod); }
#skjerm-oppgaver .opg-linje.feilmelding:empty { display: none; }

/* --- innfeltet ----------------------------------------------------------- */

#skjerm-oppgaver .opg-ny { border-top: 1px solid var(--line); margin-bottom: var(--s-4); }
#skjerm-oppgaver .opg-ny .inn { padding-top: 0; padding-bottom: 0; }
#skjerm-oppgaver .opg-ny input.hopp-felt { width: 100%; min-width: 0; }
#skjerm-oppgaver .opg-ny:focus-within { background: var(--flate-2); }

/* --- gruppene ------------------------------------------------------------ */

/* Navnet på gruppa er lengre enn åtte tegn, og står derfor i spalten og ikke
   i margen. Tallet står til høyre, i mono. */
#skjerm-oppgaver .opg-gruppe { margin-bottom: var(--s-3); }
#skjerm-oppgaver .opg-gruppe > .etikett:first-child {
  width: auto;
  flex: 0 1 auto;
  margin-left: 0;
  padding-right: 0;
  text-align: left;
}
#skjerm-oppgaver .opg-antall {
  font-family: var(--font-mono);
  font-size: var(--t-2);
  font-variant-numeric: tabular-nums;
}
#skjerm-oppgaver .opg-gruppe + .seksjon-tom { padding-top: var(--s-4); padding-bottom: var(--s-4); }

/* --- raden --------------------------------------------------------------- */

/* Radene i en gruppe står samlet, med hårstreken over den første. */
#skjerm-oppgaver .opg-rader { margin-bottom: var(--s-2); }

#skjerm-oppgaver .rad.oppgave { cursor: pointer; }
#skjerm-oppgaver .rad.oppgave:focus-visible {
  background: var(--flate-3);
}
#skjerm-oppgaver .rad.oppgave[aria-current="true"] { background: var(--flate-3); }
@media (hover: hover) and (pointer: fine) {
  #skjerm-oppgaver .rad.oppgave:hover { background: var(--flate-2); }
}
#skjerm-oppgaver .rad.oppgave .inn { gap: var(--s-4); }
#skjerm-oppgaver .rad.oppgave .tittel { overflow-wrap: anywhere; }
#skjerm-oppgaver .rad.oppgave .under { overflow-wrap: anywhere; white-space: pre-line; }
#skjerm-oppgaver .rad.oppgave.ferdig .tittel { color: var(--ink-3); font-weight: 400; }

/* Statusknappen. Ringen er 16px, trykkflata 44. Den negative margen gir
   tilbake luft til raden, så en rad med én linje ikke blir høyere enn de
   andre radene i skallet. */
#skjerm-oppgaver .opg-status {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  margin: calc(var(--s-2) * -1) 0;
  border-color: transparent;
  background: none;
  box-shadow: none;
  color: var(--ink-3);
}
#skjerm-oppgaver .opg-status.jobbes-med { color: var(--amber); }
#skjerm-oppgaver .opg-status.ferdig { color: var(--gronn); }
@media (hover: hover) and (pointer: fine) {
  #skjerm-oppgaver .opg-status:hover { border-color: var(--line-2); background: var(--flate); }
}

/* --- ruta ---------------------------------------------------------------- */

#skjerm-oppgaver .opg-felt { margin: 0 0 var(--s-5); }
#skjerm-oppgaver .opg-felt > .etikett { display: block; margin-bottom: var(--s-2); }
#skjerm-oppgaver .opg-felt input,
#skjerm-oppgaver .opg-felt textarea { width: 100%; }
#skjerm-oppgaver .opg-felt textarea { resize: vertical; min-height: 64px; }
#skjerm-oppgaver .opg-personer { display: flex; flex-direction: column; gap: var(--s-1); }
#skjerm-oppgaver .opg-personer .person-rad[aria-pressed="true"] { background: var(--flate-3); }
#skjerm-oppgaver .opg-arkivlinje { margin: 0 0 var(--s-5); color: var(--ink-2); font-size: var(--t-3); line-height: var(--t-3-h); }
#skjerm-oppgaver .opg-historikk { margin: 0 0 var(--s-6); }
#skjerm-oppgaver .opg-historikk .rad { min-height: 36px; }
#skjerm-oppgaver .opg-historikk .rad .marg { padding-top: var(--s-3); }
#skjerm-oppgaver .opg-historikk .rad .inn { padding: var(--s-2) 0 var(--s-2) var(--inn); }
#skjerm-oppgaver .opg-historikk .tittel { font-size: var(--t-3); font-weight: 400; }
#skjerm-oppgaver .rute > .rute-kropp .seksjon-tom { padding: 0 0 var(--s-5); }

/* --- smal skjerm --------------------------------------------------------- */

/* Ukehodet bryter til to linjer: uka og datoene først, pilene og Mine eller
   Alle under. Ingen vannrett rulling på 375. */
/* Eieren står i margen på bred skjerm. Under 600px er margen for smal til
   «Theodor», og da står navnet over tittelen i stedet, i mono som i margen.
   Segmentet blir stående på linja. */
#skjerm-oppgaver .opg-eier { display: none; }
@media (max-width: 599px) {
  #skjerm-oppgaver .opg-styring { flex: 1 0 100%; justify-content: space-between; margin-left: 0; }
  #skjerm-oppgaver .rad.oppgave .marg .margtekst { display: none; }
  #skjerm-oppgaver .rad.oppgave .opg-eier {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--t-2);
    line-height: var(--t-2-h);
    color: var(--ink-3);
  }
}