/* Beheer: the curatiedashboard of Civios-beheer (key figures, intakes with publishing,
   onboardingpijplijn). ---- */

/* Six key figures: two per row on phones, three from 1024px. */
.civios-beheer-kpis .civios-kaart { flex-direction: column; align-items: flex-start; gap: .75rem; padding: 1.25rem; }
.civios-beheer-kpi { display: grid; gap: .375rem; }

/* Intakes: the publish form sits in the action cell, the level explanations below the table. */
.civios-intakes { min-width: 48rem; }
.civios-intakes .civios-btn { white-space: nowrap; }
.civios-publiceer { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .5rem; }
.civios-publiceer .civios-input { width: auto; min-width: 10rem; padding-block: .5rem; }
.civios-niveaus-uitleg { padding-bottom: 1.25rem; border-top: 1px solid var(--civios-line); }
.civios-niveaus { margin-top: .75rem; display: grid; gap: .75rem; }
.civios-niveaus dt { font-weight: 700; color: var(--civios-teal); font-size: .875rem; }
.civios-niveaus dd { margin: .125rem 0 0; font-size: .8125rem; color: var(--civios-muted); }

/* Onboardingpijplijn: the stages that wait for Civios-beheer are tinted. */
.civios-pijplijn li.is-intake { border-color: var(--civios-sage); background: var(--civios-sage-soft); }

@media (min-width: 768px) {
  .civios-niveaus { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .civios-beheer-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* The tekstblok editor (Admin::TekstblokkenController): no attachments, a tekstblok holds text only. */
trix-toolbar .trix-button-group.trix-button-group--file-tools { display: none; }
/* In a narrow dialog the toolbar wraps instead of widening it. */
trix-toolbar .trix-button-row { flex-wrap: wrap; justify-content: flex-start; gap: .25rem; }

/* Voorbeeld: the tekstblokken on a page, to click and edit (tekstblokken_controller.js). */
[data-tekstblok] { outline: 1px dashed color-mix(in srgb, var(--civios-teal) 50%, transparent); outline-offset: 2px; cursor: pointer; }
[data-tekstblok]:hover, [data-tekstblok]:focus-visible { outline: 2px solid var(--civios-teal); }
text[data-tekstblok]:hover { fill: var(--civios-teal); }
span.tekstblok:has(> :is(p, div, ul, ol, h2, h3, blockquote)) { display: block; }

/* Voorbeeld of a mail (Admin::MailVoorbeeldenController): its subject line and its body, as a mail client shows it. */
.mailvoorbeeld-kop { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--civios-line); font-size: .875rem; }
.mailvoorbeeld-kop dt { color: var(--civios-muted); }
.mailvoorbeeld-kop dd { font-weight: 600; }
.mailvoorbeeld-inhoud { overflow-x: auto; background: #fff; }