/* =====================================================================
   formulieren.css — module Formulieren (Communicatie › Uitgaand).
   Uitsluitend tokens uit casa360-tokens.css; diepte via de vaste laag.
===================================================================== */

.frm { max-width: 1240px; margin: 0 auto; padding: 26px 32px 72px; display: flex; flex-direction: column; gap: 16px; }
.frm-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.frm-kop h1 { margin: 2px 0 6px; font-size: 1.45rem; letter-spacing: -.01em; }
.frm-kop p { margin: 0; max-width: 72ch; color: var(--c-ink-2); font-size: .82rem; line-height: 1.5; }

/* lijst */
.frm-rij { display: grid; grid-template-columns: 1.8fr .9fr .5fr .8fr .6fr; gap: 12px; align-items: center; width: 100%; text-align: left; border: 0; border-top: 1px solid var(--c-lijn); background: none; padding: 11px 4px; cursor: pointer; font: inherit; color: var(--c-ink); }
.frm-rij:hover { background: var(--c-creme); }
.frm-rij.is-actief { background: var(--c-groen-t); }
.frm-rij--kop { font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink-3); border-top: 0; cursor: default; }
.frm-rij--kop:hover { background: none; }
.frm-rij__naam { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.frm-rij__naam em { font-style: normal; font-size: .68rem; color: var(--c-ink-3); }
.frm-week { font-style: normal; font-size: .66rem; color: var(--c-groen-d); }

/* drawer-inhoud */
.frm-tabs { display: flex; gap: 5px; padding: 4px; background: var(--c-creme); border-radius: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.frm-tab { border: 1px solid transparent; background: none; border-radius: 9px; padding: 7px 12px; font: 600 .74rem var(--font-ui, Manrope); color: var(--c-ink-2); cursor: pointer; }
.frm-tab.is-actief { background: var(--c-paneel); border-color: var(--c-lijn); color: var(--c-ink); font-weight: 700; }
.frm-deel { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--c-lijn); padding: 12px 0; }
.frm-deel:first-of-type { border-top: 0; }
.frm-tekst { margin: 0; font-size: .78rem; color: var(--c-ink-2); line-height: 1.55; }
.frm-veldrij { display: flex; gap: 8px; align-items: center; font-size: .8rem; padding: 5px 0; }
.frm-leeg { font-size: .78rem; color: var(--c-ink-3); margin: 0; }
.frm-code { border: 1px dashed var(--c-lijn); border-radius: 12px; padding: 10px 12px; font-size: .72rem; white-space: pre-wrap; word-break: break-all; background: var(--c-creme); }
.frm-knopjes { display: flex; gap: 8px; flex-wrap: wrap; }
.frm-inzrij { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; border-top: 1px solid var(--c-lijn); padding: 9px 0; }
.frm-inzrij:first-child { border-top: 0; }
.frm-inzrij__tijd { font-size: .68rem; color: var(--c-ink-3); }
.frm-inzrij__wat { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: .78rem; }
.frm-inzrij__wat span { color: var(--c-ink-2); font-size: .72rem; }
.frm-inzrij__wat em { font-style: normal; font-size: .66rem; color: var(--c-ink-3); }
.frm-bronrij { display: grid; grid-template-columns: 1.6fr .8fr .8fr .6fr; gap: 10px; padding: 7px 0; border-top: 1px solid var(--c-lijn); font-size: .78rem; align-items: center; }
.frm-bronrij--kop { font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink-3); border-top: 0; }
.frm-voetnoot { font-size: .72rem; color: var(--c-ink-3); line-height: 1.5; }

@media (max-width: 900px) {
  .frm { padding: 18px 14px 60px; }
  .frm-rij { grid-template-columns: 1fr auto; }
  .frm-rij > span:nth-child(3), .frm-rij > span:nth-child(4), .frm-rij > span:nth-child(5) { display: none; }
}