/* Bestuurscommunity (/community): tabs, the Behoeften list and its side column ---- */
.civios-communitytabs {
  margin-top: 1.5rem;
  display: flex;
  gap: .25rem;
  border-bottom: 1px solid var(--civios-line);
  overflow-x: auto;
  overflow-y: hidden;
}
.civios-communitytabs a {
  position: relative;
  padding: .75rem 1rem;
  font-family: var(--civios-font-display);
  font-weight: 600;
  color: var(--civios-muted);
  text-decoration: none;
  white-space: nowrap;
}
.civios-communitytabs a:hover { color: var(--civios-teal); }
.civios-communitytabs a.is-actief { color: var(--civios-teal); }
.civios-communitytabs a.is-actief::after {
  content: "";
  position: absolute;
  inset: auto .75rem 0;
  height: 4px;
  border-radius: var(--civios-r-full) var(--civios-r-full) 0 0;
  background: var(--civios-gold);
}

.civios-community { margin-top: 1.5rem; display: grid; gap: 1.5rem; align-items: start; }
.civios-community-hoofd { display: grid; gap: 1.25rem; min-width: 0; }
.civios-community-filters { margin-top: 0; }
.civios-community-filters a { text-decoration: none; }
.civios-filter-aantal { font-weight: 400; opacity: .8; }
.civios-community-leeg { align-items: center; gap: .75rem; text-align: center; }
.civios-community-leeg p { max-width: 36rem; }

/* One request ("behoefte"): title and lead, badges, the need, then who supports it. */
.civios-behoeften { display: grid; gap: 1rem; }
.civios-behoefte { gap: .875rem; padding: 1.25rem; }
.civios-behoefte-kop { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .5rem 1rem; }
.civios-behoefte-titel { flex: 1 1 16rem; min-width: 0; }
.civios-behoefte-titel .civios-h4 { overflow-wrap: anywhere; }
.civios-behoefte-titel a { color: var(--civios-teal); text-decoration: none; }
.civios-behoefte-titel a:hover { text-decoration: underline; }
.civios-behoefte-titel .civios-noot { margin-top: .25rem; font-size: .8125rem; }
.civios-behoefte-badges { display: flex; flex-wrap: wrap; gap: .375rem; }
.civios-behoefte-tekst { font-size: .9375rem; color: var(--civios-muted); }
.civios-behoefte-steun {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .375rem 1rem;
  padding: .75rem;
  border-radius: var(--civios-r-lg);
  background: var(--civios-sage-soft);
}
.civios-behoefte-steun .civios-noot { font-size: .8125rem; }
.civios-behoefte-aantal { display: inline-flex; align-items: center; gap: .375rem; font-weight: 700; color: var(--civios-teal); }
.civios-behoefte-eigen { margin-left: auto; display: inline-flex; align-items: center; gap: .375rem; font-size: .8125rem; font-weight: 600; color: var(--civios-teal); }
.civios-behoefte-steun form { margin-left: auto; }

/* "Hoe werkt dit?": numbered steps. */
.civios-stappenlijst { margin-top: 1rem; display: grid; gap: .75rem; counter-reset: stap; font-size: .875rem; color: var(--civios-tekst); }
.civios-stappenlijst li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: .75rem; counter-increment: stap; }
.civios-stappenlijst li::before {
  content: counter(stap);
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--civios-r-full);
  background: var(--civios-teal);
  color: var(--civios-wit);
  font-size: .75rem;
  font-weight: 700;
}

@media (min-width: 1024px) {
  .civios-community { grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr); }
}

/* A request's page (/aanvragen/:id): header, side panels and the decision. */
.civios-behoeftekop { padding-top: 1.25rem; }
.civios-behoeftekop .civios-paginatitel { margin-top: .5rem; overflow-wrap: anywhere; }
.civios-behoefte-acties .civios-knoppen form { display: flex; flex: 1 1 auto; }
.civios-behoefte-acties .civios-knoppen form .civios-btn { flex: 1 1 auto; }
.civios-behoefte-besluit {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  padding: .75rem;
  border-radius: var(--civios-r-lg);
  background: var(--civios-sage-soft);
  font-size: .875rem;
  color: var(--civios-teal);
}
.civios-behoefte-gegevens { margin-top: 1rem; display: grid; gap: .75rem; font-size: .875rem; }
.civios-behoefte-gegevens dt { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--civios-muted); }
.civios-behoefte-gegevens dd { margin: .125rem 0 0; color: var(--civios-tekst); overflow-wrap: anywhere; }
.civios-behoefte-gegevens dd.is-stil { color: var(--civios-muted); font-style: italic; }

/* Steunen: a button, or the support with a way to withdraw it. */
.civios-steun { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.civios-behoefte-steun .civios-steun { margin-left: auto; }
.civios-steun-status { display: inline-flex; align-items: center; gap: .375rem; font-size: .8125rem; font-weight: 600; color: var(--civios-teal); }

/* Suppliers' responses on a need: the list (lead, supporters, Civios-beheer) and a supplier's form. */
.civios-reacties { margin-top: 1rem; display: grid; gap: .75rem; }
.civios-reactie {
  display: grid;
  gap: .5rem;
  padding: 1rem;
  border: 1px solid var(--civios-line);
  border-radius: var(--civios-r-lg);
  background: var(--civios-paper);
}
.civios-reactie.is-gegund { border-color: var(--civios-sage); background: var(--civios-sage-soft); }
.civios-reactie-kop { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .5rem 1rem; }
.civios-reactie-kop .civios-h4 { overflow-wrap: anywhere; }
.civios-reactie-kop .civios-noot { font-size: .8125rem; }
.civios-reactie-product { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .375rem; font-size: .875rem; color: var(--civios-tekst); }
.civios-reactie .civios-fichetekst { margin-top: 0; overflow-wrap: anywhere; }
.civios-reactiekeuzes { margin-top: .5rem; gap: .75rem; }
.civios-reactiekeuzes .civios-keuze { padding: 1rem 3rem 1rem 1rem; }
.civios-reactiekeuzes .civios-keuze input { top: 1rem; right: 1rem; }
.civios-reactiekeuzes .civios-keuze-titel { margin-top: 0; font-size: 1rem; }

/* "Mijn behoeften" on the government dashboard (/mijn-bestuur). */
.civios-mijnbehoeften { margin-top: 1.5rem; display: flex; flex-direction: column; }
.civios-mijnbehoeften .civios-kop-met-actie { align-items: center; }
.civios-mijnbehoefte { display: grid; gap: .125rem; min-width: 0; overflow-wrap: anywhere; }
.civios-mijnbehoefte .civios-noot { font-size: .8125rem; }