/* ══════════════════════════════════════════════════════════════════════
   CRM (/admin/crm/*) -- CRM/crm_views.py. Loaded after the shared
   /static/css/app.css and reuses its admin tables, detail sections,
   badges, filter tabs, and progress-track-h stepper; only the pipeline
   board, Activity timeline, and small form layout are new.
   ══════════════════════════════════════════════════════════════════════ */
.muted { color: var(--c-text-muted); }
.crm-small { font-size: var(--text-xs); }
.crm-subnav { margin-bottom: var(--s-6); }
.crm-spaced { margin-top: var(--s-6); }
.crm-stack { display: flex; flex-direction: column; gap: var(--s-6); }
.crm-section .table-card { box-shadow: none; }
/* Tables inside half-width CRM sections must fit their card rather than clip columns behind a scrollbar. */
.crm-section .data-table { min-width: 0; }
.crm-stats .stat-value { font-size: var(--text-xl); overflow-wrap: anywhere; }
/* URLs have no spaces to wrap at: wide enough that typical sites fit on one line, and only the
   longest break, so one URL can't stretch the table. Dates beside it stay on one line. */
.data-table td.crm-url-cell { overflow-wrap: anywhere; min-width: 15rem; }
.data-table td.crm-nowrap { white-space: nowrap; }
.crm-unit { font-size: var(--text-sm); font-weight: 600; color: var(--c-text-muted); margin-left: 2px; }
.crm-filters { justify-content: flex-start; }
.crm-filters select, .crm-filters .search-input { width: auto; min-width: 160px; }
.crm-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 var(--s-4); }
.crm-form .field { margin-bottom: var(--s-4); }
.crm-form .field label { display: flex; flex-direction: column; gap: var(--s-1); }
.crm-form .btn-row-inline { margin-top: var(--s-2); }
/* Date pickers aren't covered by the shared input rule above; match it so CRM forms look uniform. */
.crm-form input[type=date], .crm-form input[type=datetime-local], .crm-form input[type=tel], .crm-form input[type=number] {
  width: 100%; font-family: inherit; font-size: var(--text-sm); padding: 0.62rem 0.9rem;
  border: 1px solid var(--c-border-mid); border-radius: var(--r-md); background: #fff; color: var(--c-text);
}
.crm-inline-form { display: inline-flex; }
.crm-inline-form .crm-form-error { position: absolute; max-width: 320px; margin-top: 2.6rem; z-index: 2; }
.crm-btn-small { min-height: auto; padding: var(--s-1) var(--s-3); font-size: var(--text-xs); }
/* Inline cell editing on the Accounts/Contacts/Deals lists (crm_views._inline_cell). The value is a
   button that opens an editor in the cell; a pencil marks it (always shown where there's no hover). */
.crm-cell-view { display: flex; align-items: center; gap: var(--s-1); }
.crm-cell-view[hidden] { display: none; }
.crm-cell-value, .crm-cell-edit {
  font: inherit; color: inherit; text-align: left; background: none; border: 1px solid transparent; border-radius: var(--r-sm);
  cursor: pointer; display: inline-flex; align-items: center; gap: var(--s-1); transition: background var(--tx), border-color var(--tx);
}
/* Wrap only between words, as the plain cell text did (URL cells keep their own break-anywhere rule). */
.crm-cell-value { padding: 2px var(--s-1); margin: -3px calc(-1 * var(--s-1)); min-height: 2rem; max-width: 100%; overflow-wrap: normal; }
.crm-url-cell .crm-cell-value { overflow-wrap: anywhere; }
.crm-cell-edit { padding: 0; width: 2rem; height: 2rem; justify-content: center; flex: 0 0 auto; }
.crm-cell-value:hover, .crm-cell-edit:hover { background: var(--c-surface-2); border-color: var(--c-border-mid); }
.crm-cell-value:focus-visible, .crm-cell-edit:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 1px; }
.crm-cell-pencil { font-size: var(--text-xs); color: var(--c-text-faint); opacity: 0; transition: opacity var(--tx); }
.crm-cell-value:hover .crm-cell-pencil, .crm-cell-value:focus-visible .crm-cell-pencil,
.crm-cell-edit .crm-cell-pencil, tr:hover .crm-cell-pencil { opacity: 1; }
@media (hover: none) { .crm-cell-pencil { opacity: 1; } }
.crm-cell-editing { min-width: 13rem; vertical-align: top; }
.crm-cell-editor { display: flex; flex-direction: column; gap: var(--s-1); }
.crm-cell-editor input, .crm-cell-editor select {
  width: 100%; min-width: 9rem; font-family: inherit; font-size: var(--text-sm); padding: var(--s-1) var(--s-2); min-height: 2.25rem;
  border: 1px solid var(--c-border-mid); border-radius: var(--r-md); background: #fff; color: var(--c-text);
}
.crm-cell-label { font-size: var(--text-xs); font-weight: 700; color: var(--c-text-muted); }
.crm-cell-actions { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.crm-cell-error { font-size: var(--text-xs); color: var(--c-red); background: var(--c-red-subtle); border-radius: var(--r-sm); padding: var(--s-1) var(--s-2); }
.crm-cell-error[hidden] { display: none; }
.crm-cell-saving .crm-cell-editor { opacity: 0.7; }
.crm-cell-saving .crm-cell-editor .btn-primary { cursor: progress; }
.data-table tr.crm-row-saved td { background: var(--c-accent-subtle); transition: background 1.2s ease; }

/* Deals list: the stage-change dialog (reason / lost reason / Closed Won confirmation). */
/* margin: auto restores the browser's centring, which the shared reset removes. */
.crm-dialog { margin: auto; border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: var(--s-6); width: min(32rem, calc(100vw - 2rem)); box-shadow: var(--shadow-md); color: var(--c-text); }
.crm-dialog::backdrop { background: rgba(15, 23, 42, 0.45); }
.crm-dialog-title { font-size: var(--text-lg); margin: 0 0 var(--s-4); color: var(--c-navy); }
.crm-dialog [hidden] { display: none; }
.crm-dialog-actions { display: flex; gap: var(--s-2); }
.crm-details { margin-top: var(--s-4); }
.crm-details > summary { cursor: pointer; font-weight: 700; font-size: var(--text-sm); color: var(--c-navy); margin-bottom: var(--s-3); }
.crm-banner-info { background: var(--c-amber-subtle); border: 1px solid var(--c-amber); color: var(--c-text); margin-bottom: var(--s-4); }
.crm-list { margin: var(--s-3) 0 var(--s-4) var(--s-5); font-size: var(--text-sm); }
.crm-outcome { margin-top: calc(-1 * var(--s-3)); font-size: var(--text-sm); }
.crm-form-heading { font-size: var(--text-sm); font-weight: 800; color: var(--c-navy); margin: var(--s-2) 0 var(--s-3); }
.crm-callout { border: 1px solid var(--c-border-mid); border-radius: var(--r-md); padding: var(--s-4); margin-bottom: var(--s-4); background: var(--c-surface-2); }
[data-show-for][hidden] { display: none; }

/* Activity timeline */
.crm-timeline { list-style: none; margin: var(--s-4) 0 0; padding: 0; }
.crm-timeline-item { position: relative; padding: var(--s-3) 0 var(--s-3) var(--s-5); border-left: 2px solid var(--c-border-mid); }
.crm-timeline-item::before { content: ''; position: absolute; left: -6px; top: var(--s-4); width: 10px; height: 10px; border-radius: 50%; background: var(--c-accent-mid); }
.crm-timeline-stage::before { background: var(--c-amber); }
.crm-timeline-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font-size: var(--text-xs); color: var(--c-text-muted); }
.crm-timeline-subject { font-weight: 700; margin-top: var(--s-1); }
.crm-timeline-notes { white-space: pre-wrap; font-size: var(--text-sm); color: var(--c-text); margin-top: var(--s-1); overflow-wrap: anywhere; }
.crm-timeline-links { margin-top: var(--s-1); }
.crm-timeline-item .crm-inline-form { margin-top: var(--s-2); }

/* Pipeline board: one column per stage, scrolls sideways on narrow screens */
.crm-board { display: flex; gap: var(--s-3); overflow-x: auto; padding-bottom: var(--s-3); align-items: flex-start; }
.crm-board-col { flex: 0 0 220px; background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: var(--s-3); }
.crm-board-col--outcome { background: var(--c-surface); border-style: dashed; }
.crm-board-col header { margin-bottom: var(--s-3); }
.crm-board-col h3 { font-size: var(--text-xs); font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--c-text-muted); }
.crm-board-col ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.crm-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md); padding: var(--s-3); box-shadow: var(--shadow-xs); font-size: var(--text-sm); }
.crm-card-title { font-weight: 700; color: var(--c-navy); }
.crm-card-meta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-2); margin: var(--s-2) 0 var(--s-1); }
.crm-board-empty { font-size: var(--text-xs); padding: var(--s-2); }

@media (max-width: 640px) {
  .crm-filters select, .crm-filters .search-input { min-width: 0; width: 100%; max-width: none; }
  .crm-board-col { flex-basis: 78vw; }
  /* Touch: bigger targets, and 16px inputs so phones don't zoom in while editing a cell. */
  .crm-cell-value { min-height: 2.75rem; }
  .crm-cell-edit { width: 2.75rem; height: 2.75rem; }
  .crm-cell-editor input, .crm-cell-editor select { font-size: 16px; min-height: 2.75rem; }
  .crm-cell-actions .crm-btn-small { min-height: 2.75rem; padding: var(--s-2) var(--s-4); font-size: var(--text-sm); flex: 1; }
  .crm-cell-editing { min-width: 15rem; }
  .crm-dialog { width: 100vw; max-width: none; margin: auto 0 0; border-radius: var(--r-lg) var(--r-lg) 0 0; padding: var(--s-5); }
  .crm-dialog input, .crm-dialog textarea { font-size: 16px; }
  .crm-dialog-actions .btn-primary, .crm-dialog-actions .btn-ghost { flex: 1; min-height: 2.75rem; }
}