/* DCG CRM Service Console — matches the operator dashboard design system
   (cream surface, DCG green accent, ink text tokens). No emoji, no gradients-as-decoration. */
#crm { overflow: visible; backdrop-filter: none; }
.crm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 12px; margin-bottom: 18px; }
.crm-stat { border: 1px solid var(--surface-border, rgba(23,32,42,.1)); border-radius: 14px; padding: 14px 16px; background: var(--surface, #fffdfa); }
.crm-stat-n { display: block; font-size: 1.7rem; font-weight: 700; line-height: 1; color: var(--ink, #17202a); }
.crm-stat-l { display: block; margin-top: 6px; font-size: .82rem; color: var(--ink-soft, #64748b); }
.crm-stat-bad .crm-stat-n { color: #dc2626; }
.crm-stat-warn .crm-stat-n { color: #b45309; }
.crm-stat-good .crm-stat-n { color: #16a34a; }

.crm-toolbar { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin-bottom: 14px; }
#crmFilters { display: inline-flex; gap: 6px; flex-wrap: wrap; }
#crmFilters button { padding: .5rem .9rem; border-radius: 10px; border: 1px solid var(--surface-border, rgba(23,32,42,.12)); background: var(--surface, #fffdfa); color: var(--ink-soft, #64748b); font: inherit; font-size: .86rem; cursor: pointer; }
#crmFilters button.active { background: rgba(22,163,74,.14); border-color: rgba(22,163,74,.4); color: #15803d; font-weight: 600; }
.crm-toolbar select, .crm-toolbar label { font-size: .86rem; color: var(--ink-soft, #64748b); }
.crm-search { min-width: 240px; flex: 1 1 240px; }
.crm-mine { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; }
.crm-mine input[type="checkbox"] { width: 1.05rem; height: 1.05rem; min-height: 0; margin: 0; accent-color: #16a34a; }
.crm-input { border: 1px solid var(--surface-border, rgba(23,32,42,.12)); border-radius: 10px; padding: .5rem .7rem; background: #fffdfa; color: var(--ink, #17202a); font: inherit; }

.crm-queue { display: flex; flex-direction: column; gap: 8px; }
.crm-row { display: grid; grid-template-columns: 6px 1fr auto; gap: 12px; align-items: center; width: 100%; text-align: left;
  padding: 12px 14px; border: 1px solid var(--surface-border, rgba(23,32,42,.1)); border-radius: 14px; background: var(--surface, #fffdfa);
  color: inherit; font: inherit; cursor: pointer; transition: border-color 120ms ease, transform 120ms ease; }
.crm-row:hover { border-color: rgba(22,163,74,.4); transform: translateY(-1px); }
.crm-row-pri { width: 6px; align-self: stretch; border-radius: 6px; background: #94a3b8; }
.crm-pri-urgent { background: #dc2626; } .crm-pri-high { background: #ea580c; } .crm-pri-normal { background: #16a34a; } .crm-pri-low { background: #94a3b8; }
.crm-row-title { display: block; font-weight: 600; color: var(--ink, #17202a); }
.crm-row-main { min-width: 0; }
.crm-row-customer { display: block; margin-top: 4px; color: #166534; font-size: .84rem; font-weight: 600; overflow-wrap: anywhere; }
.crm-row-meta { display: block; margin-top: 3px; font-size: .8rem; color: var(--ink-soft, #64748b); }
.crm-row-meta svg { vertical-align: -2px; opacity: .7; }
.crm-row-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; white-space: nowrap; }

.crm-status { font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: .22rem .5rem; border-radius: 999px; }
.crm-status-open { background: rgba(22,163,74,.12); color: #15803d; }
.crm-status-in_progress { background: rgba(37,99,235,.12); color: #1d4ed8; }
.crm-status-waiting_customer { background: rgba(180,83,9,.12); color: #b45309; }
.crm-status-resolved, .crm-status-closed { background: rgba(100,116,139,.14); color: #475569; }
.crm-link { background: none; border: none; padding: 0; font: inherit; color: #15803d; font-weight: 600; text-decoration: underline; cursor: pointer; text-align: left; overflow-wrap: anywhere; }
.crm-link:hover { color: #166534; }
.crm-new { margin-left: auto; padding: .5rem 1rem; }
.crm-sla { display: inline-flex; align-items: center; gap: .3rem; font-size: .76rem; font-weight: 600; }
.crm-sla svg { vertical-align: middle; }
.crm-sla-good { color: #16a34a; } .crm-sla-warn { color: #b45309; } .crm-sla-bad { color: #dc2626; } .crm-sla-neutral { color: #64748b; }

/* Detail drawer */
.crm-drawer { position: fixed; top: 0; right: 0; width: min(520px, 94vw); height: 100vh; overflow-y: auto; z-index: 60;
  background: #fffdfa; border-left: 1px solid var(--surface-border, rgba(23,32,42,.12)); box-shadow: -18px 0 48px rgba(15,23,42,.18); overscroll-behavior: contain;
  padding: 22px 24px; transform: translateX(100%); transition: transform 220ms ease; }
.crm-drawer.open { transform: translateX(0); }
.crm-drawer-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
.crm-drawer-head > div { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.crm-drawer-title { margin: .2rem 0 1rem; font-size: 1.15rem; color: var(--ink, #17202a); }
.crm-drawer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.crm-field { display: flex; flex-direction: column; gap: 5px; }
.crm-field-l { font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft, #64748b); }
.crm-ro { font-size: .9rem; color: var(--ink, #17202a); word-break: break-word; }
.crm-nextaction { margin-bottom: 14px; }
.crm-nextaction span { font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft, #64748b); }
.crm-nextaction input { width: 100%; margin-top: 5px; }
.crm-macros-head { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft, #64748b); margin-bottom: 8px; }
.crm-macros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.crm-macro { padding: .45rem .8rem; border-radius: 999px; border: 1px solid rgba(22,163,74,.3); background: rgba(22,163,74,.07); color: #15803d; font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; transition: background 120ms ease, transform 120ms ease; }
.crm-macro:hover { background: rgba(22,163,74,.14); transform: translateY(-1px); }
.crm-field-touched { border-color: rgba(22,163,74,.55) !important; box-shadow: 0 0 0 3px rgba(22,163,74,.1); }
.crm-drawer-actions { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.crm-save-status { font-size: .82rem; color: var(--ink-soft, #64748b); }

.crm-timeline-head { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft, #64748b); margin-bottom: 10px; }
.crm-timeline { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.crm-event { display: grid; grid-template-columns: 12px 1fr; gap: 10px; }
.crm-event-dot { width: 9px; height: 9px; border-radius: 50%; background: #16a34a; margin-top: 5px; }
.crm-event-top { font-size: .82rem; font-weight: 600; color: var(--ink, #17202a); }
.crm-event-who { color: var(--ink-soft, #64748b); font-weight: 500; }
.crm-event-note { font-size: .85rem; color: var(--ink, #17202a); margin-top: 2px; }
.crm-event-time { font-size: .74rem; color: var(--ink-soft, #64748b); margin-top: 2px; }
.crm-note textarea { width: 100%; margin-bottom: 8px; }

/* Relationship-first customer search. The family account is always the parent;
   the inmate is its linked child, never a second unrelated customer. */
.crm-customer-search { margin: 0 0 18px; padding: 16px; border: 1px solid rgba(22,163,74,.22); border-radius: 14px; background: rgba(22,163,74,.045); min-width: 0; }
.crm-search-row { display: grid; grid-template-columns: minmax(145px,.42fr) minmax(0,1fr) auto; gap: 8px; margin-top: 6px; }
.crm-search-row .crm-input { width: 100%; min-width: 0; }
.crm-search-help { margin: 8px 0 10px; color: var(--ink-soft, #64748b); font-size: .8rem; line-height: 1.45; }
.crm-pair-selected { padding: 10px 12px; border-radius: 10px; background: #fffdfa; border: 1px solid rgba(22,163,74,.2); color: var(--ink, #17202a); font-size: .86rem; line-height: 1.45; overflow-wrap: anywhere; }
.crm-pair-results { display: grid; gap: 8px; margin-top: 10px; min-width: 0; }
.crm-pair-result { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; width: 100%; min-width: 0; padding: 12px 14px; border: 1px solid var(--surface-border, rgba(23,32,42,.12)); border-radius: 12px; background: #fffdfa; color: var(--ink, #17202a); font: inherit; text-align: left; cursor: pointer; overflow: hidden; }
.crm-pair-result:hover, .crm-pair-result:focus-visible { border-color: rgba(22,163,74,.55); box-shadow: 0 0 0 3px rgba(22,163,74,.1); outline: none; }
.crm-pair-result.selected { border-color: #16a34a; background: rgba(22,163,74,.08); }
.crm-pair-result.static { cursor: default; }
.crm-pair-result.static:hover { box-shadow: none; border-color: var(--surface-border, rgba(23,32,42,.12)); }
.crm-pair-parent, .crm-pair-child, .crm-pair-detail { max-width: 100%; overflow-wrap: anywhere; }
.crm-pair-arrow { color: #15803d; font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.crm-pair-detail { color: var(--ink-soft, #64748b); font-size: .78rem; line-height: 1.4; }
.crm-pair-state { display: inline-flex; margin-top: 4px; padding: 3px 7px; border-radius: 999px; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; background: rgba(100,116,139,.12); color: #475569; }
.crm-pair-state-active, .crm-pair-state-trialing, .crm-pair-state-trial_only { background: rgba(22,163,74,.12); color: #15803d; }
.crm-pair-state-blocked_no_relationship, .crm-pair-state-inactive { background: rgba(180,83,9,.12); color: #92400e; }
.crm-pair-link { line-height: 1.45; }

@media (max-width: 720px) { .crm-drawer { width: 100vw; padding: 18px 16px; } .crm-drawer-grid { grid-template-columns: 1fr; } .crm-search-row { grid-template-columns: 1fr; } .crm-row { grid-template-columns: 5px minmax(0,1fr); } .crm-row-side { grid-column: 2; align-items: flex-start; white-space: normal; } }
/* The operator dashboard is always light (it does not follow prefers-color-scheme);
   the CRM console uses the same --surface/--ink tokens so the drawer matches the page. */