.os-card, .os-panel { min-width: 0; background: var(--os-color-surface); border: 1px solid var(--os-color-border); border-radius: var(--os-radius-md); box-shadow: var(--os-shadow-low); }
/* `flex-wrap` omdat een kop met een lang woord (BRANCHEACTUALITEITEN) niet onder
   zijn min-content krimpt en de badge er anders uitduwt: gemeten 57px overloop op
   768px, tabletbreedte. De badge zakt nu een regel, in plaats van buiten beeld. */
.os-card__header, .os-panel__header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--os-space-4); min-height: 38px; padding: var(--os-space-4) var(--os-space-5); background: #f5f9fb; border-radius: var(--os-radius-md) var(--os-radius-md) 0 0; }
.os-card__body, .os-panel__body { padding: var(--os-space-5); }
.os-widget-title { margin: 0; min-inline-size: 0; overflow-wrap: anywhere; font-size: var(--os-type-widget-title); font-weight: 700; line-height: 1.2; letter-spacing: .055em; text-transform: uppercase; }
.os-meta { color: var(--os-color-text-muted); font-size: var(--os-type-meta); line-height: 1.35; }
.os-button { display: inline-flex; min-height: 36px; align-items: center; justify-content: center; gap: var(--os-space-3); padding: var(--os-space-3) var(--os-space-5); color: #fff; background: var(--os-color-action); border: 1px solid var(--os-color-action); border-radius: var(--os-radius-sm); font-size: var(--os-type-nav); font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; }
.os-button:hover { color: #fff; background: var(--os-color-action-strong); }
/* Twee knoppen naast elkaar hielden 4px over -- alleen de spatie tussen twee
   inline-elementen, te krap voor twee raakdoelen van 44px op een telefoon. */
.os-button-row { display: flex; flex-wrap: wrap; gap: var(--os-space-4); }
.os-button--secondary { color: var(--os-color-text); background: #fff; border-color: #aebec8; }
.os-button--secondary:hover { color: var(--os-color-text); background: #f4f7f8; }
.os-button--quiet { color: var(--os-color-action); background: transparent; border-color: transparent; }
.os-button--quiet:hover { color: var(--os-color-action-strong); background: var(--os-state-info-bg); }
.os-button:disabled, .os-button[aria-disabled="true"] { color: #6b7d88; background: #e5ebee; border-color: #d2dce1; cursor: not-allowed; }
.os-icon-button { display: inline-grid; width: 36px; min-width: 36px; height: 36px; place-items: center; padding: 0; color: inherit; background: transparent; border: 1px solid transparent; border-radius: var(--os-radius-sm); cursor: pointer; }
.os-icon { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.os-badge { display: inline-flex; align-items: center; gap: var(--os-space-2); min-height: 22px; padding: 2px 7px; color: var(--os-state-neutral); background: var(--os-state-neutral-bg); border-radius: var(--os-radius-pill); font-size: 10.5px; font-weight: 700; line-height: 1.2; }
.os-badge--info { color: var(--os-state-info); background: var(--os-state-info-bg); }
.os-badge--success { color: var(--os-state-success); background: var(--os-state-success-bg); }
.os-badge--warning { color: var(--os-state-warning); background: var(--os-state-warning-bg); }
.os-badge--danger { color: var(--os-state-danger); background: var(--os-state-danger-bg); }
.os-badge--prototype { color: var(--os-state-prototype); background: var(--os-state-prototype-bg); border-radius: var(--os-radius-xs); }
.os-alert, .os-state { position: relative; padding: var(--os-space-5) var(--os-space-6); color: var(--os-color-text-secondary); background: var(--os-state-neutral-bg); border: 1px solid var(--os-color-border); border-left: 3px solid var(--os-state-neutral); border-radius: var(--os-radius-sm); }
.os-alert h1, .os-alert h2, .os-state h1, .os-state h2 { margin-bottom: var(--os-space-3); color: var(--os-color-text); font-size: var(--os-type-alert-title); }
.os-alert p:last-child, .os-state p:last-child { margin-bottom: 0; }
.os-alert--info, .os-state--info { background: var(--os-state-info-bg); border-left-color: var(--os-state-info); }
.os-alert--success, .os-state--success { background: var(--os-state-success-bg); border-left-color: var(--os-state-success); }
.os-alert--warning, .os-state--warning { background: var(--os-state-warning-bg); border-left-color: var(--os-state-warning); }
.os-alert--danger, .os-state--danger { background: var(--os-state-danger-bg); border-left-color: var(--os-state-danger); }
.os-field { margin-bottom: var(--os-space-5); }
.os-field label, .os-label { display: block; margin-bottom: var(--os-space-2); color: var(--os-color-text); font-size: var(--os-type-label); font-weight: 650; }
.os-input, .os-select, .os-textarea, .form-control, .form-select { width: 100%; min-height: 44px; padding: 9px 11px; color: var(--os-color-text); background: #fff; border: 1px solid #aebec8; border-radius: var(--os-radius-sm); }
.os-input[aria-invalid="true"], .form-control[aria-invalid="true"] { border-color: var(--os-state-danger); box-shadow: 0 0 0 1px var(--os-state-danger); }
.os-help, .os-field-error { margin-top: var(--os-space-2); font-size: var(--os-type-meta); line-height: 1.35; }
.os-help { color: var(--os-color-text-muted); }
.os-field-error { color: var(--os-state-danger); font-weight: 600; }
.os-data-table { width: 100%; border-collapse: collapse; }
.os-data-table th { padding: var(--os-space-4); color: var(--os-color-text-secondary); background: #f5f9fb; font-size: var(--os-type-table-head); font-weight: 650; letter-spacing: .045em; text-align: left; text-transform: uppercase; }
.os-data-table td { padding: var(--os-space-4); font-size: var(--os-type-table-row); line-height: 1.35; border-top: 1px solid var(--os-color-border); }
@media (max-width: 720px) {
  .os-button, .os-icon-button { min-height: 44px; }
  .os-icon-button { width: 44px; height: 44px; }
}
/* Offerteoverzicht: de filterbalk op één regel waar het past, en op een telefoon
   alleen klant, fase en de actieknop (owner, 2026-09-28). */
.os-filterbalk { align-items: flex-end; }
.os-filterbalk .os-field { flex: 1 1 11rem; margin-bottom: 0; }
.os-alleen-smal { display: none; }
a.os-task-row { text-decoration: none; }
@media (max-width: 48rem) {
  .os-kolom-breed { display: none; }
  .os-alleen-smal { display: inline; }
}

/* Relaties (eigenaar, 2026-10-03): een verplicht veld krijgt een sterretje, en een veld dat bij één
   rol hoort, verdwijnt zodra er een andere rol gekozen is. Zonder :has() blijft alles zichtbaar. */
.os-verplicht { color: var(--os-state-danger); font-weight: 600; }
form:has(input[name="rol"]:checked):not(:has(input[name="rol"][value="LEVERANCIER"]:checked)) .os-bij-leverancier,
form:has(input[name="rol"]:checked):not(:has(input[name="rol"][value="OVERIG"]:checked)) .os-bij-overig,
form:has(input[name="rol"]:checked):not(:has(input[name="rol"][value="KLANT"]:checked)) .os-bij-klant,
form:has(input[name="rol"]:checked):not(:has(input[name="rol"][value="PROSPECT"]:checked, input[name="rol"][value="KLANT"]:checked)) .os-bij-klant-of-prospect { display: none; }

/* Een foto of bestand kiezen (eigenaar, 12 oktober 2026, punt 7; relaties/_bestandkeuze.html). Op de
   computer de bestandskiezer, op een aanraakscherm eerst de keuze als pillen. De kiezer zelf staat
   onzichtbaar in de pil: een tik op de pil opent hem. De kleuren van de nieuwe stijl, met dezelfde
   waarden als terugval op een pagina in de oude stijl. */
.os-bk__telefoon { display: none; }
.os-bk__gekozen { margin: var(--os-space-2) 0 0; font-size: var(--os-type-meta); color: var(--os-color-text); overflow-wrap: anywhere; }
:is(.os-field, .os-op-veld) .os-bk__optie { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; padding: 0 16px; border: 1px solid var(--ns-rand, #8C939D); border-radius: 999px; background: #fff; color: var(--ns-link, #1F5FA8); font-size: 15px; font-weight: 600; cursor: pointer; }
.os-bk__optie input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; }
.os-bk__optie:has(input:focus-visible) { outline: 3px solid var(--os-focus); outline-offset: 2px; }
:is(.os-field, .os-op-veld) .os-bk__optie.is-gekozen { border-color: var(--ns-zacht, #D6E4F7); background: var(--ns-zacht, #D6E4F7); color: var(--ns-zacht-tekst, #0F2B4A); }
@media (pointer: coarse) {
  .os-bk__computer { display: none; }
  .os-bk__telefoon { display: flex; flex-wrap: wrap; gap: var(--os-space-2); }
}