/* The SDR shell, toolbar, board, cards, table and form use the shared CRM CSS.
   Only features unique to SDR and native dialog compatibility are defined here. */
.crm-sdr-modal {
  --crm-line: color-mix(in srgb, var(--text) 12%, transparent);
  --crm-line-strong: color-mix(in srgb, var(--text) 20%, transparent);
  --crm-muted: var(--text2, color-mix(in srgb, var(--text) 58%, transparent));
  --crm-surface-raised: color-mix(in srgb, var(--surface) 90%, var(--text) 10%);
  margin: auto;
  padding: 0;
}
.crm-sdr-modal::backdrop { background: color-mix(in srgb, #000 72%, transparent); backdrop-filter: blur(8px); }
.crm-sdr-modal.crm-sdr-whatsapp-open { animation: none; transform: none; }
.crm-sdr-modal [hidden], [data-sdr-workspace] [hidden] { display: none !important; }
.crm-sdr-modal .crm-mirror-field small, .crm-sdr-field-help, .crm-sdr-muted,
.crm-sdr-modal [data-sdr-save-status] { color: var(--text2, var(--crm-muted)); font: 600 10px/1.5 var(--sans, sans-serif); }
.crm-sdr-field-help { margin: 0; }
.crm-sdr-modal [data-sdr-save-status] { margin-right: auto; }
.crm-sdr-commercial-link { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 18px 22px 0; padding: 13px 15px; border: 1px solid var(--crm-line-strong); border-radius: 12px; background: color-mix(in srgb, var(--crm-accent) 8%, var(--crm-modal-surface)); color: var(--text); }
.crm-sdr-commercial-link strong { font: 800 11px var(--sans, sans-serif); }
.crm-sdr-commercial-link p { margin: 5px 0 0; color: var(--text2); font: 600 10px/1.5 var(--sans, sans-serif); }
.crm-sdr-commercial-link > button { flex-shrink: 0; background: var(--crm-modal-field); border-color: var(--crm-line-strong); color: var(--text); }
.crm-sdr-campaign-control { display: flex; align-items: stretch; gap: 7px; min-width: 0; }
.crm-sdr-campaign-control > select { flex: 1; min-width: 0; }
.crm-sdr-modal [data-sdr-add-campaign], .crm-sdr-modal [data-sdr-cancel-campaign] { background: var(--crm-modal-field); border-color: var(--crm-line-strong); color: var(--text); }
.crm-sdr-modal [data-sdr-add-campaign]:hover, .crm-sdr-modal [data-sdr-cancel-campaign]:hover { background: color-mix(in srgb, var(--crm-modal-field) 84%, var(--text) 16%); }
.crm-sdr-modal [data-sdr-save-campaign], .crm-sdr-modal [data-sdr-open-whatsapp] { background: var(--crm-accent); border-color: var(--crm-accent); color: #111; box-shadow: 0 8px 22px color-mix(in srgb, var(--crm-accent) 20%, transparent); }
.crm-sdr-campaign-create { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--crm-line); border-radius: 10px; background: var(--crm-modal-field); }
.crm-sdr-campaign-create > div { display: flex; justify-content: flex-end; gap: 7px; }
.crm-sdr-campaign-create > p { margin: 0; color: #df766b; font: 600 10px/1.5 var(--sans, sans-serif); }
.crm-sdr-exit { grid-column: 1 / -1; margin: 0; padding: 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; border: 1px solid var(--crm-line); border-radius: 14px; background: var(--crm-modal-field); }
.crm-sdr-exit legend { padding: 0 6px; color: var(--text); font: 800 11px var(--sans, sans-serif); }
.crm-sdr-error, .crm-sdr-form-error { margin: 12px 22px; padding: 12px 14px; border: 1px solid color-mix(in srgb, #df766b 40%, var(--crm-line)); border-radius: 10px; background: color-mix(in srgb, #df766b 8%, var(--surface)); color: var(--text); font: 600 11px/1.5 var(--sans, sans-serif); }
.crm-sdr-history { margin: 0; padding: 0; color: var(--text); }
.crm-sdr-history > header { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 17px; }
.crm-sdr-history h3 { margin: 0; font: 800 12px var(--sans, sans-serif); }
.crm-sdr-history > header > span { color: var(--text2); font: 600 9px var(--sans, sans-serif); }
.crm-sdr-history ol { list-style: none; padding: 0; margin: 0; }
.crm-sdr-history li { position: relative; display: grid; grid-template-columns: 11px minmax(0, 1fr); gap: 13px; padding-bottom: 22px; }
.crm-sdr-history li:last-child { padding-bottom: 0; }
.crm-sdr-history li:not(:last-child)::before { position: absolute; top: 9px; left: 4px; bottom: 0; width: 1px; background: var(--crm-line); content: ''; }
.crm-sdr-history-dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 3px; background: var(--crm-accent); }
.crm-sdr-history li strong { font: 800 11px var(--sans, sans-serif); }
.crm-sdr-history dl { margin: 7px 0 0; display: grid; gap: 5px; }
.crm-sdr-history dl > div { display: grid; grid-template-columns: 42px 1fr; gap: 8px; font: 600 10px/1.5 var(--sans, sans-serif); }
.crm-sdr-history dt { color: var(--text2); }
.crm-sdr-history dd { margin: 0; overflow-wrap: anywhere; }
.crm-sdr-current-stage { color: var(--crm-accent); font-weight: 800; }
.crm-sdr-history-reason { margin: 9px 0 0; padding: 8px 10px; border-radius: 7px; background: var(--crm-modal-field); font: 600 10px/1.5 var(--sans, sans-serif); overflow-wrap: anywhere; }
.crm-sdr-modal-loading { padding: 55px; color: var(--text2); text-align: center; font: 600 11px var(--sans, sans-serif); }
@media (max-width: 760px) {
  .crm-sdr-commercial-link { align-items: stretch; flex-direction: column; }
  .crm-sdr-exit { grid-template-columns: 1fr; }
  .crm-sdr-modal [data-sdr-save-status] { max-width: 45%; }
}