/*
 * 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-timeline-body summary:focus { outline: none; }
.cl-timeline-body summary:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: .25rem; }
/* Collapsed: a preview and "Toon alles". Open: "Toon minder" and the full text, without the preview. */
.cl-expandable-less, .cl-expandable[open] .cl-expandable-preview, .cl-expandable[open] .cl-expandable-more { display: none; }
.cl-expandable[open] .cl-expandable-less { display: inline; }
.cl-expandable[open] > summary { margin-bottom: .5rem; }
.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); }
.cl-team { display: grid; gap: 1rem; }
.cl-team-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .75rem; }
.cl-team-stat { display: grid; gap: .15rem; padding: .85rem 1rem; border-radius: .75rem; background: #fff; color: var(--gray-950, #030712); box-shadow: 0 0 0 1px rgba(0,0,0,.06); }
.dark .cl-team-stat { background: rgba(255,255,255,.05); color: var(--gray-100, #f3f4f6); box-shadow: 0 0 0 1px rgba(255,255,255,.08); }
.cl-team-number { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.cl-team-table-wrap { overflow-x: auto; }
.cl-team-table { width: 100%; border-collapse: collapse; font-size: .875rem; color: var(--gray-950, #030712); }
.dark .cl-team-table { color: var(--gray-100, #f3f4f6); }
.cl-team-table th { text-align: right; font-weight: 600; font-size: .75rem; padding: .5rem .6rem; white-space: nowrap; cursor: help; border-bottom: 1px solid rgba(0,0,0,.08); }
.cl-team-table td { text-align: right; padding: .5rem .6rem; border-bottom: 1px solid rgba(0,0,0,.05); font-variant-numeric: tabular-nums; }
.cl-team-table th:first-child, .cl-team-table td:first-child { text-align: left; }
.cl-team-table tfoot td { border-top: 1px solid rgba(0,0,0,.12); border-bottom: 0; }
.dark .cl-team-table th, .dark .cl-team-table td { border-color: rgba(255,255,255,.08); }
.cl-team-warn { color: rgb(220 38 38); font-weight: 600; }

/* Video links */
.cl-share { padding: .875rem 1rem; border: 1px solid var(--gray-200); border-radius: .75rem; }
.dark .cl-share { border-color: rgb(255 255 255 / .1); }
.cl-share > * + * { margin-top: .5rem; }
.cl-share-link { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.cl-share-url { flex: 1 1 16rem; min-width: 0; padding: .375rem .625rem; border-radius: .5rem; background: var(--gray-50); color: var(--gray-950); font-size: .8125rem; overflow-wrap: anywhere; cursor: text; user-select: all; }
.dark .cl-share-url { background: rgb(255 255 255 / .05); color: #fff; }
.cl-share-error { color: var(--danger-600); }
.dark .cl-share-error { color: var(--danger-400); }