/* Leads board (crm.js). Theme colors only, so it fits the dark portal and the Swoop Team look. */
.crm{display:grid;gap:14px}
.crm-top{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.crm-top #crmQ{flex:1;min-width:160px;max-width:320px}
.crm-board{display:flex;gap:12px;overflow-x:auto;padding-bottom:10px;align-items:flex-start;scroll-snap-type:x proximity}
.crm-col{flex:0 0 260px;scroll-snap-align:start;background:var(--raise);border:1px solid var(--line);border-radius:16px;padding:10px;display:grid;gap:10px;transition:border-color .15s}
.crm-col.over{border-color:var(--brand)}
.crm-col header{display:flex;align-items:center;gap:8px;padding:2px 4px;font-weight:700;font-size:14px}
.crm-col header i{width:9px;height:9px;border-radius:50%;flex:none}
.crm-col header span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crm-col header b{font-size:12px;color:var(--muted);font-weight:700}
.crm-list{display:grid;gap:8px;min-height:40px}
.crm-card{all:unset;box-sizing:border-box;display:grid;gap:6px;padding:12px;border-radius:12px;background:var(--surface);border:1px solid var(--line);cursor:pointer;color:var(--ink);font:inherit}
.crm-card:hover{border-color:var(--muted)}
.crm-card:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.crm-card.drag{opacity:.4}
.crm-card strong{font-size:14px;overflow-wrap:anywhere}
.crm-tags{display:flex;flex-wrap:wrap;gap:4px}
.crm-tags i{font-style:normal;font-size:11px;font-weight:600;padding:2px 7px;border-radius:99px;background:var(--raise);color:var(--muted)}
.crm-date{font-size:12px;color:var(--muted);font-weight:600}
.crm-date.due{color:var(--stop)}
.crm-date.due::before{content:"Follow up ";}
.crm-connect{padding:22px;display:grid;gap:12px;max-width:560px}
.crm-connect h3,.crm-connect p{margin:0}
.crm-connect .btn{justify-self:start}
.crm-pick{display:flex;flex-wrap:wrap;gap:8px}
.crm-sheet{max-height:calc(100vh - 32px);overflow-y:auto}
.crm-chips{display:flex;flex-wrap:wrap;gap:6px}
.crm-chips .chip{cursor:pointer}
.crm-in{display:flex;gap:6px;align-items:center}.crm-in .input{flex:1}
@media (max-width:600px){.crm-col{flex-basis:78vw}}

/* Calendar view: leads on their follow-up day. Month grid on wide screens, a day list on phones. */
.crm-view{flex:none}
.crm-cal{display:grid;gap:10px}
.crm-cal-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.crm-cal-head b{font-size:18px}
.crm-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--line);gap:1px}
.crm-grid .wd{background:var(--raise);font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;padding:8px}
.crm-day{background:var(--surface);min-height:112px;padding:6px;display:flex;flex-direction:column;gap:4px;min-width:0}
.crm-day.out{background:var(--raise)}
.crm-day.out .n{opacity:.45}
.crm-day.over{outline:2px solid var(--brand);outline-offset:-2px}
.crm-day .n{font-size:12px;font-weight:700;color:var(--muted);align-self:flex-end;width:24px;height:24px;display:grid;place-items:center;border-radius:50%}
.crm-day.is-today .n{background:var(--brand);color:#fff}
.crm-ev{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:4px 6px;border-radius:7px;background:var(--raise);color:var(--ink);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.crm-ev i{flex:none;width:7px;height:7px;border-radius:50%}
.crm-ev:hover{background:var(--line)}
.crm-ev:focus-visible{outline:2px solid var(--brand)}
.crm-ev.drag{opacity:.4}
.crm-more{all:unset;font-size:11px;font-weight:700;color:var(--muted);cursor:pointer;padding:2px 6px}
.crm-more:hover{color:var(--ink)}
.crm-daylist{display:grid;gap:6px}
.crm-agenda{display:none}
@media (max-width:700px){
  .crm-grid{display:none}
  .crm-agenda{display:grid;gap:8px}
  .crm-aday{display:grid;gap:6px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
  .crm-aday>span{font-size:12px;font-weight:700;color:var(--muted)}
  .crm-aday.is-today>span{color:var(--brand-ink)}
  .crm-aday>div{display:grid;gap:4px}
}

/* Dragging: cards are divs (Safari won't drag a button); on touch a held card lifts into a ghost that follows the finger. */
.crm-card,.crm-ev{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.crm-card[draggable],.crm-ev[draggable]{cursor:grab}
.crm-col.over .crm-list{background:color-mix(in srgb,var(--brand) 10%,transparent);border-radius:10px}
.crm-ghost{position:fixed;left:0;top:0;z-index:60;pointer-events:none;opacity:.95;box-shadow:0 18px 40px -10px rgba(0,0,0,.5);rotate:2deg}