/* =====================================================================
   Filterflade: telefonbogens og Opgavebordets filtre som fælles komponent (Daniel 2026-11-10: "Brug samme måde at lave
   filtrene på, som telefonbogen gør"). Opbygningen er telefonbogens (Søgning og Visning på én linje, Filtre under);
   udtrykket er Primers som resten af Bestillinger og Udlæg (Daniel 2026-11-10: "nu passer det ikke stilistisk ind i det
   Primer-baserede design resten har"). Kun var(--ds-*); komponenterne følger faelles.css.

     .filterflade                 roden: grupperne står på siden med luft imellem, ingen kasser
     .filterflade-linje           Søgning + Visning på én linje (bryder under 768 px)
     .filterflade-boks            en gruppe = FormControl: etiket over kontrollerne. .er-soeg vokser, .er-visning har
                                  fast bredde, .er-filtre fylder bredden
     .filterflade-etiket          FormControl-label (14px semibold; kun visuel, aria-hidden)
     .filterflade-soeg            TextInput med leading ikon (.filterflade-soeg-ikon + input.filterflade-soegefelt)
     .filterflade-visning         SegmentedControl (som .udlaeg-segment); valgt = .is-active, ellers aria-checked
     .filterflade-vaelger         Select-udseende (.filterflade-felt + trailing chevron .filterflade-pil): ligner et
                                  inputfelt med værdien, men åbner en ActionMenu (.filterflade-menu) med ActionList-punkter
                                  (.filterflade-valg, valgt = .is-active eller aria-checked: flueben) og
                                  gruppeoverskrifter (.filterflade-gruppe). Aldrig native select.
     .filterflade-afkryds         Checkbox med label (hurtigfiltre): <label> med checkbox eller <button aria-pressed>;
                                  tal efter teksten som CounterLabel. Ingen knapkant (Daniel 2026-11-10: "Nu ligner
                                  filtrene knapper igen")
     .filterflade-felt            alene: Button invisible (fx "Flere filtre", der åbner et panel)
     .filterflade-ryd             "Ryd alle filtre" = Button invisible
   Filtrenes layout (grid eller række) og JS er modulernes egne.
   ===================================================================== */

/* Roden laver ingen stablingskontekst, så et fast sidepanel inde i fladen (Opgavebordets Flere filtre) kan ligge over siden */
.filterflade {
  position: relative;
  --filterflade-kontrol: var(--ds-kontrol-m);
  --filterflade-tjek: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.75.75 0 0 1 1.06-1.06L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z'/></svg>") center / contain no-repeat;
}
@media (max-width: 768px) { .filterflade { --filterflade-kontrol: var(--ds-kontrol-l); } } /* Primer size="large" som tryk-mål */

/* Søgning + Visning */
.filterflade-linje { display: flex; align-items: flex-end; gap: var(--ds-4); width: 100%; margin: 0; }
@media (max-width: 768px) {
  .filterflade-linje { flex-wrap: wrap; row-gap: var(--ds-3); }
  .filterflade .filterflade-linje > .filterflade-boks.er-soeg { flex: 1 1 100%; }
}

/* Grupperne: FormControl (etiket over kontrollerne), ingen ramme */
.filterflade .filterflade-boks {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--ds-2);
  box-sizing: border-box;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}
.filterflade .filterflade-boks.er-soeg { flex: 1 1 auto; }
.filterflade .filterflade-boks.er-visning { flex-shrink: 0; }
.filterflade .filterflade-boks.er-filtre { width: 100%; margin-top: var(--ds-4); overflow: visible; }
.filterflade .filterflade-etiket {
  display: block;
  color: var(--ds-tekst);
  font-size: var(--ds-fs-sm);
  font-weight: var(--ds-vaegt-fed);
  line-height: var(--ds-lh-tet);
  user-select: none;
}

/* Søgefeltet: TextInput med leading ikon (Primers search) */
.filterflade .filterflade-soeg { position: relative; flex: 1; max-width: none; }
.filterflade .filterflade-soeg-ikon {
  position: absolute;
  top: 50%;
  left: var(--ds-3);
  width: var(--ds-4);
  height: var(--ds-4);
  transform: translateY(-50%);
  background-color: var(--ds-tekst-daempet);
  font-size: 0;
  pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M10.68 11.74a6 6 0 0 1-7.92-8.98 6 6 0 0 1 8.98 7.92l3.04 3.04a.75.75 0 1 1-1.06 1.06ZM11.5 7a4.5 4.5 0 1 0-9 0 4.5 4.5 0 0 0 9 0Z'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M10.68 11.74a6 6 0 0 1-7.92-8.98 6 6 0 0 1 8.98 7.92l3.04 3.04a.75.75 0 1 1-1.06 1.06ZM11.5 7a4.5 4.5 0 1 0-9 0 4.5 4.5 0 0 0 9 0Z'/></svg>") center / contain no-repeat;
}
.filterflade .filterflade-soeg .filterflade-soegefelt {
  box-sizing: border-box;
  width: 100%;
  height: var(--filterflade-kontrol);
  min-height: 0;
  margin: 0;
  padding: 0 var(--ds-3) 0 calc(var(--ds-3) + var(--ds-4) + var(--ds-2));
  border: var(--ds-streg) solid var(--ds-kant-felt);
  border-radius: var(--ds-r);
  background: var(--ds-flade);
  color: var(--ds-tekst);
  font-size: var(--ds-fs-sm);
  line-height: var(--ds-lh);
  box-shadow: var(--ds-skygge-felt);
}
.filterflade .filterflade-soeg .filterflade-soegefelt::placeholder { color: var(--ds-tekst-daempet); opacity: 1; }
.filterflade .filterflade-soeg .filterflade-soegefelt:focus {
  border-color: var(--ds-fokus);
  outline: var(--ds-streg-tyk) solid var(--ds-fokus);
  outline-offset: calc(var(--ds-streg) * -1);
  box-shadow: none;
}

/* Visning: SegmentedControl (kontrolspor; valgt segment = flade med kant-felt og skygge, som .udlaeg-segment) */
.filterflade .filterflade-visning {
  display: inline-flex;
  gap: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: var(--ds-streg) solid var(--ds-kant);
  border-radius: var(--ds-r);
  background: var(--ds-kontrol-hover);
}
.filterflade .filterflade-visning-valg {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-2);
  box-sizing: border-box;
  min-height: var(--filterflade-kontrol);
  margin: 0;
  padding: 0 var(--ds-3);
  border: var(--ds-streg) solid transparent;
  border-radius: var(--ds-r);
  background: transparent;
  color: var(--ds-tekst);
  font-size: var(--ds-fs-sm);
  font-weight: var(--ds-vaegt-medium);
  cursor: pointer;
  transition: background-color var(--ds-overgang);
}
.filterflade .filterflade-visning-valg svg { flex-shrink: 0; color: var(--ds-tekst-daempet); }
.filterflade .filterflade-visning-valg:hover { background: var(--ds-kontrol-aktiv); color: var(--ds-tekst); }
/* Valgt: .is-active, hvis knapperne bruger den (telefonbogens JS skifter kun klassen), ellers aria-checked (Opgavebordet) */
.filterflade .filterflade-visning-valg.is-active,
.filterflade .filterflade-visning:not(:has(.is-active)) > .filterflade-visning-valg[aria-checked="true"] {
  margin: calc(var(--ds-streg) * -1);
  min-height: calc(var(--filterflade-kontrol) + var(--ds-streg) * 2);
  border-color: var(--ds-kant-felt);
  background: var(--ds-flade);
  color: var(--ds-tekst);
  font-weight: var(--ds-vaegt-fed);
  box-shadow: var(--ds-skygge-1);
}
.filterflade .filterflade-visning-valg.is-active svg,
.filterflade .filterflade-visning:not(:has(.is-active)) > .filterflade-visning-valg[aria-checked="true"] svg { color: var(--ds-primaer-tekst); }

/* Feltknappen: Button invisible (Opgavebordets "Flere filtre", der åbner et panel): diskret, ingen flade eller kant i hvile,
   så den ikke ligner en handling i sidehovedet */
.filterflade .filterflade-vaelger { position: relative; z-index: 20; min-width: 0; }
/* Den åbne vælger over søskendene, så menuen ikke ligger bag vælgerne under den, når de står i en stak (telefon) */
.filterflade .filterflade-vaelger:has(> .filterflade-felt[aria-expanded="true"]) { z-index: 21; }
.filterflade .filterflade-felt {
  box-sizing: border-box;
  min-height: var(--filterflade-kontrol);
  margin: 0;
  padding: 0 var(--ds-3);
  border: var(--ds-streg) solid transparent;
  border-radius: var(--ds-r);
  background: transparent;
  color: var(--ds-tekst-daempet);
  font-size: var(--ds-fs-sm);
  font-weight: var(--ds-vaegt-medium);
  line-height: var(--ds-lh);
  text-align: left;
  box-shadow: none;
  cursor: pointer;
  transition: background-color var(--ds-overgang), color var(--ds-overgang);
}
.filterflade .filterflade-felt:hover { background: var(--ds-neutral-svag); color: var(--ds-tekst); }
.filterflade .filterflade-felt[aria-expanded="true"] { background: var(--ds-kontrol-aktiv); color: var(--ds-tekst); }
.filterflade .filterflade-felt svg { color: var(--ds-tekst-daempet); }

/* Vælgeren: Select (samme flade, kant, skygge og højde som søgefeltet; værdien venstrestillet, chevron til højre).
   Menuen er stadig modulets egen (aldrig native select). */
.filterflade .filterflade-vaelger > .filterflade-felt {
  display: block;
  width: 100%;
  height: var(--filterflade-kontrol);
  padding: 0 var(--ds-7) 0 var(--ds-3);
  overflow: hidden;
  border-color: var(--ds-kant-felt);
  background: var(--ds-flade);
  color: var(--ds-tekst);
  font-weight: var(--ds-vaegt-normal);
  white-space: nowrap;
  text-overflow: ellipsis;
  box-shadow: var(--ds-skygge-felt);
}
.filterflade .filterflade-vaelger > .filterflade-felt > * { overflow: hidden; text-overflow: ellipsis; }
.filterflade .filterflade-vaelger > .filterflade-felt:hover { background: var(--ds-flade); border-color: var(--ds-tekst-daempet); }
.filterflade .filterflade-vaelger > .filterflade-felt[aria-expanded="true"] {
  background: var(--ds-flade);
  border-color: var(--ds-fokus);
  outline: var(--ds-streg-tyk) solid var(--ds-fokus);
  outline-offset: calc(var(--ds-streg) * -1);
  box-shadow: none;
}

/* Afkrydsning: Checkbox med label (hurtigfiltrene). Ingen knapkant eller flade; boksen er Primers checkbox, afkrydset = fyldt
   i primærfarven med hvidt flueben. Virker på <label> med checkbox (Kun mig) og på <button aria-pressed> (de andre). */
.filterflade .filterflade-afkryds {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-2);
  box-sizing: border-box;
  min-height: var(--filterflade-kontrol);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ds-tekst);
  font-size: var(--ds-fs-sm);
  font-weight: var(--ds-vaegt-normal);
  line-height: var(--ds-lh);
  text-align: left;
  box-shadow: none;
  cursor: pointer;
}
.filterflade .filterflade-afkryds input[type="checkbox"],
.filterflade button.filterflade-afkryds::before {
  -webkit-appearance: none;
          appearance: none;
  position: relative;
  flex: none;
  box-sizing: border-box;
  width: var(--ds-4);
  height: var(--ds-4);
  margin: 0;
  border: var(--ds-streg) solid var(--ds-kant-felt);
  border-radius: var(--ds-r-sm);
  background: var(--ds-flade);
  cursor: pointer;
  transition: background-color var(--ds-overgang), border-color var(--ds-overgang);
}
.filterflade button.filterflade-afkryds::before { content: ""; }
.filterflade .filterflade-afkryds:hover input[type="checkbox"]:not(:checked),
.filterflade button.filterflade-afkryds:not([aria-pressed="true"]):hover::before { border-color: var(--ds-tekst-daempet); }
.filterflade .filterflade-afkryds input[type="checkbox"]:checked,
.filterflade button.filterflade-afkryds[aria-pressed="true"]::before { border-color: var(--ds-primaer); background: var(--ds-primaer); }
/* Fluebenet: input::before i boksen, knappens ::after lagt oven på dens ::before */
.filterflade .filterflade-afkryds input[type="checkbox"]:checked::before,
.filterflade button.filterflade-afkryds[aria-pressed="true"]::after {
  content: "";
  width: calc(var(--ds-4) - var(--ds-1));
  height: calc(var(--ds-4) - var(--ds-1));
  background-color: var(--ds-tekst-paa-primaer);
  -webkit-mask: var(--filterflade-tjek);
          mask: var(--filterflade-tjek);
}
.filterflade .filterflade-afkryds input[type="checkbox"]:checked::before { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.filterflade button.filterflade-afkryds { position: relative; }
.filterflade button.filterflade-afkryds[aria-pressed="true"]::after { position: absolute; top: 50%; left: calc(var(--ds-1) / 2); transform: translateY(-50%); }
.filterflade .filterflade-afkryds .tivoli-fane-antal { font-variant-numeric: tabular-nums; }

/* Trailing chevron (Primers triangle-down); tegnet i markup'en skjules */
.filterflade .filterflade-pil {
  position: absolute;
  top: 50%;
  right: var(--ds-3);
  width: var(--ds-4);
  height: var(--ds-4);
  transform: translateY(-50%);
  background-color: var(--ds-tekst-daempet);
  font-size: 0;
  pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='m4.427 7.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 7H4.604a.25.25 0 0 0-.177.427Z'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='m4.427 7.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 7H4.604a.25.25 0 0 0-.177.427Z'/></svg>") center / contain no-repeat;
}

/* Rullemenuen: ActionMenu-overlag med ActionList (valgt = flueben foran, som Primers enkeltvalg) */
.filterflade .filterflade-menu {
  position: absolute;
  top: calc(100% + var(--ds-1));
  right: 0;
  left: 0;
  z-index: 40;
  max-height: calc(var(--ds-8) * 7);
  overflow: auto;
  margin: 0;
  padding: var(--ds-2);
  border: 0;
  border-radius: var(--ds-r-lg);
  background: var(--ds-overlag);
  box-shadow: var(--ds-skygge-3);
}
.filterflade .filterflade-menu[hidden] { display: none; }
/* Skrivebord: menuen må være bredere end knappen (lange teamnavne på én linje); telefon: knappens bredde, så intet løber ud */
@media (min-width: 769px) {
  .filterflade .filterflade-menu { right: auto; min-width: 100%; width: max-content; max-width: calc(var(--ds-8) * 8); }
}
.filterflade .filterflade-gruppe {
  padding: var(--ds-2) var(--ds-2) var(--ds-1);
  color: var(--ds-tekst-daempet);
  font-size: var(--ds-fs-xs);
  font-weight: var(--ds-vaegt-fed);
  line-height: var(--ds-lh-tet);
}
.filterflade .filterflade-valg {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-height: var(--ds-kontrol-m);
  margin: 0;
  padding: var(--ds-1) var(--ds-2) var(--ds-1) calc(var(--ds-2) * 2 + var(--ds-4));
  border: 0;
  border-radius: var(--ds-r);
  background: transparent;
  color: var(--ds-tekst);
  font-size: var(--ds-fs-sm);
  font-weight: var(--ds-vaegt-normal);
  line-height: var(--ds-lh);
  text-align: left;
  cursor: pointer;
}
.filterflade .filterflade-valg:hover { background: var(--ds-neutral-svag); }
.filterflade .filterflade-valg:is(.is-active, [aria-checked="true"])::before {
  content: "";
  position: absolute;
  top: 50%;
  left: var(--ds-2);
  width: var(--ds-4);
  height: var(--ds-4);
  transform: translateY(-50%);
  background-color: var(--ds-primaer-tekst);
  -webkit-mask: var(--filterflade-tjek);
          mask: var(--filterflade-tjek);
}
.filterflade .filterflade-valg:is(.is-active, [aria-checked="true"]) { font-weight: var(--ds-vaegt-fed); }
.filterflade .filterflade-valg.er-under { padding-left: calc(var(--ds-2) * 3 + var(--ds-4)); color: var(--ds-tekst-daempet); }
.filterflade .filterflade-valg.er-under:is(:hover, .is-active) { color: var(--ds-tekst); }

/* Ryd alle filtre: Button invisible */
.filterflade .filterflade-ryd {
  min-height: var(--filterflade-kontrol);
  margin: 0;
  padding: 0 var(--ds-3);
  border: var(--ds-streg) solid transparent;
  border-radius: var(--ds-r);
  background: transparent;
  color: var(--ds-primaer-tekst);
  font-size: var(--ds-fs-sm);
  font-weight: var(--ds-vaegt-medium);
  white-space: nowrap;
  justify-self: end;
  box-shadow: none;
  cursor: pointer;
}
.filterflade .filterflade-ryd:hover { background: var(--ds-neutral-svag); }
.filterflade .filterflade-ryd[hidden] { display: none; }

/* Tastaturfokus (Primer: 2px ring i fokusfarve) */
.filterflade :is(.filterflade-visning-valg, .filterflade-valg, .filterflade-ryd, button.filterflade-felt):focus-visible {
  outline: var(--ds-streg-tyk) solid var(--ds-fokus);
  outline-offset: calc(var(--ds-streg-tyk) * -1);
}
/* Afkrydsningen: ringen om boksen, som Primers checkbox */
.filterflade button.filterflade-afkryds:focus-visible { outline: none; }
.filterflade button.filterflade-afkryds:focus-visible::before,
.filterflade .filterflade-afkryds input[type="checkbox"]:focus-visible {
  outline: var(--ds-streg-tyk) solid var(--ds-fokus);
  outline-offset: var(--ds-streg);
}