/* REQ 512 (criterium 2): klantgegevens en contactpersonen in het klantdetail (crm.js).
   Gebruikt uitsluitend bestaande design-tokens (tokens.css, skins/*.css) en de gedeelde ui2-
   componenten (ui2-components.css), zodat licht en donker automatisch werken. Responsive vanaf
   360px: de formuliergrid stapelt op smalle schermen. */

.crm-panel { display: grid; gap: var(--spacing-4, 1rem); }
.crm-card { display: grid; gap: var(--spacing-3, .75rem); }
.crm-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.crm-card-head h4, .crm-contact-form h4 { margin: 0; }

.crm-dl { display: grid; gap: .35rem; margin: 0; }
.crm-row { display: grid; grid-template-columns: minmax(9rem, 14rem) minmax(0, 1fr); gap: .25rem .75rem; }
.crm-row dt { font-weight: 600; color: var(--color-text-muted, #b3a596); }
.crm-row dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

.crm-form { display: grid; gap: var(--spacing-3, .75rem); }
.crm-grid { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.crm-address, .crm-roles { display: grid; gap: .5rem; margin: 0; padding: .75rem; border: 1px solid var(--color-border-subtle, #444); border-radius: .5rem; }
.crm-address legend, .crm-roles legend { padding: 0 .35rem; font-weight: 600; }
.crm-check { display: inline-flex; align-items: center; gap: .5rem; }
.crm-actions { display: flex; flex-wrap: wrap; gap: .5rem; }

.crm-contacts { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.crm-contact { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .5rem; padding: .6rem .75rem; border: 1px solid var(--color-border-subtle, #444); border-radius: .5rem; }
.crm-contact-main { min-width: 0; overflow-wrap: anywhere; }

.crm-message { margin: 0; min-height: 1.2em; }
.crm-message.crm-error { color: var(--color-danger, #e2624f); }
.crm-message.crm-ok { color: var(--color-success, #7fb069); }

@media (max-width: 480px) {
  .crm-row { grid-template-columns: 1fr; }
  .crm-grid { grid-template-columns: 1fr; }
  .crm-actions { flex-direction: column; align-items: stretch; }
  .crm-contact { flex-direction: column; }
}