/* Lead and deal cards (docs/superpowers/mockups/lead-card.html). Colors come from the Filament theme variables. */

.crm-card { display: flex; flex-direction: column; gap: .75rem; font-size: .875rem; line-height: 1.45; }

.crm-head { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.crm-head-phone { font-weight: 600; font-size: 1rem; }

.crm-badge { display: inline-block; font-size: .75rem; padding: .1rem .5rem; border-radius: .375rem; font-weight: 600; background: var(--gray-100); color: var(--gray-700); }
.crm-brand-union { background: #e3efff; color: #0b4fa8; }
.crm-brand-em { background: #e5f6ea; color: #17643a; }
.crm-brand-rd { background: #fdeee3; color: #9a3d0c; }
.crm-repeat { background: #f3e8ff; color: #6b21a8; }
.dark .crm-badge { background: var(--gray-800); color: var(--gray-200); }
.dark .crm-brand-union { background: #12305a; color: #bcd6ff; }
.dark .crm-brand-em { background: #123d24; color: #b5e8c6; }
.dark .crm-brand-rd { background: #4a2310; color: #fbcfae; }
.dark .crm-repeat { background: #3b1a5c; color: #e3cbff; }

.crm-stages { display: flex; gap: 2px; overflow-x: auto; }
.crm-stages div { flex: 1 1 0; min-width: 6rem; font-size: .75rem; text-align: center; padding: .4rem .3rem; background: var(--gray-100); color: var(--gray-600); }
.crm-stages div:first-child { border-radius: .5rem 0 0 .5rem; }
.crm-stages div:last-child { border-radius: 0 .5rem .5rem 0; }
.crm-stages .done { background: var(--primary-600); color: #fff; }
.crm-stages .current { font-weight: 700; }
.crm-stages .won { background: #16a34a; color: #fff; }
.crm-stages .lost { background: #dc2626; color: #fff; }
.dark .crm-stages div:not(.done, .won, .lost) { background: var(--gray-800); color: var(--gray-300); }

.crm-lc { display: grid; grid-template-columns: minmax(220px, 1fr) 2fr; gap: .75rem; align-items: start; }
@media (max-width: 700px) { .crm-lc { grid-template-columns: 1fr; } }
.crm-col { display: flex; flex-direction: column; gap: .75rem; min-width: 0; }

.crm-panel { background: #fff; border-radius: .75rem; padding: .75rem .9rem; box-shadow: 0 1px 2px rgb(0 0 0 / .05); outline: 1px solid rgb(3 7 18 / .05); min-width: 0; }
.dark .crm-panel { background: var(--gray-900); outline-color: rgb(255 255 255 / .1); }
.crm-panel h4 { margin: 0 0 .4rem; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--gray-500); }

.crm-f { display: flex; justify-content: space-between; gap: .75rem; padding: .3rem 0; border-bottom: 1px solid var(--gray-100); }
.crm-f:last-child { border-bottom: 0; }
.crm-f > span:first-child { color: var(--gray-500); flex: none; max-width: 45%; }
.crm-f > span:last-child { text-align: right; min-width: 0; overflow-wrap: anywhere; }
.dark .crm-f { border-bottom-color: var(--gray-800); }

.crm-hint { font-size: .75rem; color: var(--gray-500); }
.crm-link { color: var(--primary-600); text-decoration: underline; text-underline-offset: 2px; }
.dark .crm-link { color: var(--primary-400); }
.crm-text { overflow-wrap: anywhere; }

.crm-tabs { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .4rem; }
.crm-tabs button { font-size: .75rem; padding: .2rem .6rem; border-radius: .375rem; background: var(--gray-100); color: var(--gray-700); }
.crm-tabs button.on { background: var(--primary-600); color: #fff; }
.dark .crm-tabs button:not(.on) { background: var(--gray-800); color: var(--gray-200); }

.crm-ev { display: flex; gap: .6rem; padding: .5rem 0; border-bottom: 1px solid var(--gray-100); }
.crm-ev:last-child { border-bottom: 0; }
.dark .crm-ev { border-bottom-color: var(--gray-800); }
.crm-ev-ic { width: 1.75rem; height: 1.75rem; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; background: var(--gray-100); color: var(--gray-600); }
.crm-ev-ic svg { width: 1rem; height: 1rem; }
.dark .crm-ev-ic { background: var(--gray-800); color: var(--gray-300); }
.crm-ev-body { flex: 1; min-width: 0; overflow-wrap: anywhere; }

/* Kanban (docs/superpowers/mockups/leads-kanban.html): the board scrolls sideways inside itself, never the page. */
.crm-kb { min-width: 0; }
.crm-kb-top { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .75rem; }
.crm-seg { display: inline-flex; border: 1px solid var(--gray-200); border-radius: .5rem; overflow: hidden; background: #fff; }
.crm-seg a { padding: .4rem .85rem; font-size: .875rem; }
.crm-seg a.on { background: var(--primary-600); color: #fff; }
.dark .crm-seg { border-color: var(--gray-700); background: var(--gray-900); }
.crm-kb-filter { flex: 0 1 13rem; min-width: 0; }
.crm-kb-date { flex: 0 1 10.5rem; min-width: 0; }
.crm-kb-search { flex: 1 1 14rem; min-width: 0; }

.crm-board { display: flex; gap: .6rem; overflow-x: auto; padding-bottom: .5rem; align-items: flex-start; max-width: 100%; }
.crm-kb-col { flex: 1 0 260px; min-width: 260px; background: var(--gray-100); border-radius: .75rem; padding: .5rem; }
.dark .crm-kb-col { background: var(--gray-800); }
.crm-kb-col h4 { display: flex; justify-content: space-between; gap: .5rem; margin: .1rem .2rem .5rem; font-size: .875rem; font-weight: 600; }
.crm-kb-col h4 small { color: var(--gray-500); font-weight: 400; white-space: nowrap; }

.crm-kb-card { display: block; background: #fff; border-radius: .5rem; padding: .5rem .6rem; margin-bottom: .45rem; font-size: .8rem; line-height: 1.4; box-shadow: 0 1px 2px rgb(0 0 0 / .06); overflow-wrap: anywhere; }
.crm-kb-card:hover { outline: 1px solid var(--primary-500); }
.dark .crm-kb-card { background: var(--gray-900); }
.crm-kb-t { font-weight: 600; font-size: .875rem; }
.crm-kb-m { color: var(--gray-500); }
.crm-kb-amount { font-weight: 600; }