/*
 * CRM Leads package styles. Filament ships precompiled CSS, so package views
 * cannot rely on arbitrary Tailwind utilities; these classes use Filament's
 * colour variables and follow light/dark mode automatically.
 */
.cl-muted { color: var(--gray-500); }
.dark .cl-muted { color: var(--gray-400); }
.cl-strong { color: var(--gray-950); font-weight: 600; }
.dark .cl-strong { color: #fff; }
.cl-text { color: var(--gray-700); font-size: .875rem; line-height: 1.45rem; white-space: pre-line; }
.dark .cl-text { color: var(--gray-300); }
.cl-xs { font-size: .75rem; line-height: 1rem; }
.cl-sm { font-size: .875rem; line-height: 1.25rem; }
.cl-stack > * + * { margin-top: 1rem; }
.cl-row { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; }

/* Timeline */
.cl-filters { margin-bottom: 1.5rem; }
.cl-timeline { list-style: none; margin: 0; padding: 0; }
.cl-timeline-item { position: relative; padding: 0 0 1.5rem 1.75rem; border-inline-start: 2px solid var(--gray-200); margin-inline-start: .375rem; }
.dark .cl-timeline-item { border-color: rgb(255 255 255 / .1); }
.cl-timeline-item:last-child { padding-bottom: .25rem; }
.cl-timeline-dot { position: absolute; inset-inline-start: -.47rem; top: .3rem; width: .75rem; height: .75rem; border-radius: 9999px; box-shadow: 0 0 0 4px #fff; background: var(--gray-400); }
.dark .cl-timeline-dot { box-shadow: 0 0 0 4px var(--gray-900); }
.cl-dot-primary { background: var(--primary-500); }
.cl-dot-success { background: var(--success-500); }
.cl-dot-warning { background: var(--warning-500); }
.cl-dot-danger { background: var(--danger-500); }
.cl-dot-info { background: var(--info-500); }
.cl-timeline-meta { margin-top: .125rem; }
.cl-timeline-subject { margin-top: .25rem; font-size: .875rem; font-weight: 500; color: var(--gray-800); }
.dark .cl-timeline-subject { color: var(--gray-200); }
.cl-timeline-body { margin-top: .25rem; }
.cl-timeline-body summary { cursor: pointer; list-style: none; }
.cl-timeline-body summary::-webkit-details-marker { display: none; }
.cl-link { color: var(--primary-600); font-weight: 500; }
.dark .cl-link { color: var(--primary-400); }
.cl-timeline-mail { margin-top: .5rem; padding: .75rem 1rem; border-radius: .5rem; background: var(--gray-50); }
.dark .cl-timeline-mail { background: rgb(255 255 255 / .04); }
.cl-timeline-action { margin-top: .5rem; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.cl-more { margin-top: .5rem; }

/* Message preview */
.cl-preview-meta { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; font-size: .875rem; margin: 0; }
.cl-preview-meta dt { color: var(--gray-500); }
.cl-preview-meta dd { margin: 0; color: var(--gray-950); }
.dark .cl-preview-meta dd { color: #fff; }
.cl-preview-body { padding: 1rem; border: 1px solid var(--gray-200); border-radius: .5rem; background: #fff; color: var(--gray-900); font-size: .875rem; line-height: 1.5rem; overflow-wrap: anywhere; }
.cl-preview-body p { margin: 0 0 .75rem; }
.cl-preview-body hr { margin: 1rem 0; border: 0; border-top: 1px solid var(--gray-200); }
.cl-preview-body a { color: var(--primary-600); text-decoration: underline; }

/* KPI tiles */
.cl-kpis { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.cl-kpi-value { margin-top: .5rem; font-size: 1.875rem; font-weight: 600; color: var(--gray-950); }
.dark .cl-kpi-value { color: #fff; }

/* Conversation thread */
.cl-thread-layout { display: grid; gap: 1.5rem; }
@media (min-width: 1024px) { .cl-thread-layout { grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; } }
.cl-thread > * + * { margin-top: 1rem; }
.cl-message { padding: 1rem 1.25rem; border-radius: .75rem; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .05); border: 1px solid var(--gray-200); border-inline-start-width: 4px; }
.dark .cl-message { background: var(--gray-900); border-color: rgb(255 255 255 / .1); }
.cl-message-inbound { border-inline-start-color: var(--success-500); margin-inline-end: 2rem; }
.cl-message-outbound { border-inline-start-color: var(--primary-500); margin-inline-start: 2rem; }
.cl-message-pending { border-style: dashed; border-inline-start-style: solid; border-inline-start-color: var(--warning-500); }
.cl-message-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; margin-bottom: .75rem; }
.cl-message-when { display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; }
.cl-message-attachments { margin-top: .5rem; }
.cl-facts { display: grid; gap: .125rem; margin: 0; font-size: .875rem; }
.cl-facts dt { margin-top: .5rem; font-size: .75rem; color: var(--gray-500); }
.cl-facts dt:first-child { margin-top: 0; }
.cl-facts dd { margin: 0; color: var(--gray-950); }
.dark .cl-facts dd { color: #fff; }
.cl-inline-edit { display: grid; gap: .75rem; margin-top: .5rem; padding: .75rem; border-radius: .75rem; background: rgba(0,0,0,.025); color: var(--gray-950, #030712); }
.dark .cl-inline-edit { background: rgba(255,255,255,.04); color: var(--gray-100, #f3f4f6); }
.cl-inline-field { display: grid; gap: .25rem; }
.cl-inline-row { display: flex; flex-wrap: wrap; align-items: end; gap: 1rem; }
.cl-inline-row .cl-inline-field { min-width: 14rem; }
.cl-inline-check { display: flex; align-items: center; gap: .5rem; padding-bottom: 1.35rem; }
.cl-inline-textarea { display: block; width: 100%; min-height: 12rem; resize: vertical; padding: .5rem .75rem; font: inherit; line-height: 1.55; color: inherit; background: transparent; }
.cl-error { color: rgb(220 38 38); }