/* AdminDash css 11: Phase 1 CRM UI - accounts list, account detail, timeline,
   kanban board, call-first dialog helpers, bulk-action bar, lifecycle/SOT badges.
   Reuses the ported design tokens (--green, --gray-*, --bg-*, --overlay). */

/* ============================================
   Shared CRM page chrome
   ============================================ */
.crm-page { padding: 28px 32px; }

.crm-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-bottom: 18px;
}

.crm-search {
    flex: 1 1 280px;
    min-width: 220px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(var(--overlay), 0.05);
    border: 1px solid rgba(var(--overlay), 0.1);
    border-radius: 8px;
    padding: 0 12px;
}
.crm-search i { color: var(--gray-500); }
.crm-search input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--white);
    font-size: 0.9rem;
    padding: 11px 0;
}

.crm-filter {
    /* width:auto overrides the global `select { width: 100% }` (css 06) that
       otherwise made every filter dropdown a full-width stacked bar. */
    width: auto;
    max-width: 220px;
    background: rgba(var(--overlay), 0.05);
    border: 1px solid rgba(var(--overlay), 0.1);
    border-radius: 8px;
    padding: 10px 12px;
    color: var(--white);
    font-size: 0.85rem;
    min-width: 130px;
    cursor: pointer;
}

.crm-muted { color: var(--gray-500); font-size: 0.8rem; }

/* ============================================
   Badges: lifecycle, SOT, status
   ============================================ */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 100px;
    letter-spacing: 0.02em;
    white-space: nowrap;
    border: 1px solid transparent;
}
.badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.lc-untouched   { background: rgba(148,163,184,0.12); color: #94a3b8; }
.lc-lead        { background: rgba(20,154,251,0.14);  color: var(--cyan); }
.lc-engaged     { background: rgba(250,204,21,0.14);  color: #eab308; }
.lc-customer    { background: rgba(19,239,149,0.14);  color: var(--green); }
.lc-lost        { background: rgba(148,163,184,0.10); color: #94a3b8; }
.lc-outofbusiness { background: rgba(239,68,68,0.14); color: #ef4444; }

.sot-yes     { background: rgba(168,85,247,0.16); color: #c084fc; }
.sot-no      { background: rgba(var(--overlay),0.06); color: var(--gray-500); }
.sot-unknown { background: rgba(var(--overlay),0.05); color: var(--gray-500); }

.badge-flag {
    background: rgba(239,68,68,0.14);
    color: #f87171;
    border-color: rgba(239,68,68,0.25);
}
.badge-nostep {
    background: rgba(245,158,11,0.14);
    color: #f59e0b;
    border-color: rgba(245,158,11,0.28);
}
.badge-rot {
    background: rgba(239,68,68,0.14);
    color: #ef4444;
    border-color: rgba(239,68,68,0.28);
}
.badge-dnc {
    background: rgba(239,68,68,0.16);
    color: #f87171;
    border-color: rgba(239,68,68,0.30);
}
.badge-reply {
    background: rgba(19,239,149,0.16);
    color: #13ef95;
    border-color: rgba(19,239,149,0.32);
}
.stage-badge {
    background: rgba(20,154,251,0.14);
    color: #149afb;
    border-color: rgba(20,154,251,0.30);
}
.text-reply { color: #13ef95; }

/* Sales guide */
.sg-searchbar { position: relative; margin-bottom: 20px; }
.sg-searchbar i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--gray-500); }
.sg-searchbar .form-input { padding-left: 38px; }
.sg-entry { padding: 12px 0; border-bottom: 1px solid rgba(var(--overlay), 0.07); }
.sg-entry:last-child { border-bottom: none; }
.sg-entry-q { font-weight: 700; color: var(--white); font-size: 0.92rem; margin-bottom: 5px; }
.sg-entry-a { color: var(--gray-300); font-size: 0.9rem; line-height: 1.6; }
.sg-entry-a strong { color: var(--green); }

/* Account tags */
.acct-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.acct-tag {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 0.75rem; font-weight: 600; line-height: 1;
    padding: 4px 9px; border-radius: 999px;
    background: rgba(var(--overlay), 0.08);
    color: var(--gray-300);
    border: 1px solid rgba(var(--overlay), 0.14);
}
.acct-tag-x {
    display: inline-flex; align-items: center; justify-content: center;
    border: none; background: transparent; color: inherit; cursor: pointer;
    padding: 0; margin-left: 1px; opacity: 0.7; font-size: 0.8rem;
}
.acct-tag-x:hover { opacity: 1; }
.acct-tag-add {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 0.75rem; font-weight: 600;
    padding: 4px 9px; border-radius: 999px;
    background: transparent; color: var(--gray-400); cursor: pointer;
    border: 1px dashed rgba(var(--overlay), 0.22);
}
.acct-tag-add:hover { color: var(--white); border-color: var(--cyan); }
.acct-tag-picker {
    display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px;
    padding: 12px; border-radius: 10px;
    background: rgba(var(--overlay), 0.05);
    border: 1px solid rgba(var(--overlay), 0.1);
}
.acct-tag.pick { cursor: default; }
.acct-tag.pick:hover { filter: brightness(1.2); border-style: solid; }
.acct-tag-new { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-basis: 100%; flex-wrap: wrap; }
.tag-swatches { display: flex; gap: 4px; }
.tag-swatch {
    width: 20px; height: 20px; border-radius: 50%; cursor: pointer;
    border: 2px solid transparent; padding: 0;
}
.tag-swatch.sel { border-color: var(--white); box-shadow: 0 0 0 1px rgba(var(--overlay), 0.4); }

/* Tag chips on list rows */
.row-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.row-tag {
    font-size: 0.68rem; font-weight: 600; line-height: 1;
    padding: 3px 8px; border-radius: 999px;
    background: rgba(var(--overlay), 0.08);
    color: var(--gray-400);
    border: 1px solid rgba(var(--overlay), 0.14);
    white-space: nowrap;
}

/* Roomier account/directory rows so the name, tags, phone, and actions breathe. */
.grid-accounts .rz-data-grid td,
.grid-directory .rz-data-grid td {
    padding: 14px 14px !important;
    vertical-align: middle !important;
    height: auto !important;
}

.phone-link {
    color: var(--cyan); text-decoration: none; font-size: 0.85rem; white-space: nowrap;
    display: inline-flex; align-items: center; gap: 5px;
}
.phone-link:hover { text-decoration: underline; }

/* Bad-lead (bin) button - clearly visible, red */
.bad-lead-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 8px; padding: 0; cursor: pointer;
    background: rgba(239,68,68,0.12);
    color: #ef4444;
    border: 1px solid rgba(239,68,68,0.30);
    font-size: 0.95rem;
    transition: background 0.12s, color 0.12s;
}
.bad-lead-btn:hover { background: #ef4444; color: #fff; border-color: #ef4444; }

/* ============================================
   Customer-overlay site badges
   ============================================ */
.site-badges { display: inline-flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.site-chip { border-color: rgba(var(--overlay), 0.10); }
.site-chip-name { font-weight: 700; }
.site-chip-sep { opacity: 0.5; }
.site-never { font-style: italic; opacity: 0.7; }

/* Subscription-status colors (mirror lifecycle/SOT palette) */
.ss-active    { background: rgba(19,239,149,0.14);  color: var(--green); }
.ss-trial     { background: rgba(20,154,251,0.14);  color: var(--cyan); }
.ss-comped    { background: rgba(168,85,247,0.16);  color: #c084fc; }
.ss-pastdue   { background: rgba(245,158,11,0.14);  color: #f59e0b; border-color: rgba(245,158,11,0.28); }
.ss-suspended { background: rgba(239,68,68,0.14);   color: #ef4444; border-color: rgba(239,68,68,0.28); }
.ss-canceled  { background: rgba(148,163,184,0.12); color: #94a3b8; }
.ss-inactive  { background: rgba(148,163,184,0.10); color: #94a3b8; }
.ss-unknown   { background: rgba(var(--overlay),0.05); color: var(--gray-500); }

/* ============================================
   Cross-sell segment filter row
   ============================================ */
.xsell-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    padding: 12px 16px;
    margin-bottom: 14px;
    background: rgba(20,154,251,0.05);
    border: 1px solid rgba(20,154,251,0.18);
    border-radius: 10px;
}
.xsell-title { font-weight: 700; color: var(--cyan); display: flex; align-items: center; gap: 6px; font-size: 0.85rem; }
.xsell-site { display: flex; align-items: center; gap: 6px; }
.xsell-site .mini-label { margin-bottom: 0; }
.xsell-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 100px;
    border: 1px solid rgba(var(--overlay),0.12);
    background: rgba(var(--overlay),0.04);
    color: var(--gray-300);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}
.chip-btn:hover { border-color: var(--cyan); color: var(--white); }

/* ============================================
   Dashboard v2 helpers
   ============================================ */
.dash-section-title {
    font-size: 1.05rem; font-weight: 700; color: var(--white);
    margin: 26px 0 14px; display: flex; align-items: center; gap: 8px;
}
.stat-sub { font-size: 0.72rem; color: var(--gray-500); margin-top: 2px; }
.bar-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.bar-label { flex: 0 0 190px; color: var(--gray-300); font-size: 0.85rem; min-width: 0; }
.bar-track { flex: 1; height: 10px; border-radius: 6px; background: rgba(var(--overlay),0.06); overflow: hidden; }
.bar-fill { height: 100%; border-radius: 6px; background: var(--gradient-primary, linear-gradient(to right,#008fc1,#00f099)); }
.bar-value { flex: 0 0 auto; color: var(--white); font-weight: 700; font-size: 0.85rem; min-width: 92px; text-align: right; }

/* ============================================
   Bulk action bar
   ============================================ */
.bulk-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    margin-bottom: 14px;
    background: rgba(19,239,149,0.06);
    border: 1px solid rgba(19,239,149,0.25);
    border-radius: 10px;
}
.bulk-count { font-weight: 700; color: var(--green); display: flex; align-items: center; gap: 6px; }
.bulk-sep { width: 1px; height: 20px; background: rgba(var(--overlay),0.15); }

/* ============================================
   Account detail
   ============================================ */
.detail-header {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 24px;
    align-items: flex-start;
    justify-content: space-between;
    padding: 22px 24px;
    background: var(--bg-elevated);
    border: 1px solid rgba(var(--overlay), 0.06);
    border-radius: 14px;
    margin-bottom: 20px;
}
.detail-title { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.detail-title h1 { font-size: 1.5rem; font-weight: 700; color: var(--white); margin: 0; }
.detail-lic { font-family: monospace; color: var(--gray-400); font-size: 0.9rem; }
.detail-meta { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; color: var(--gray-400); font-size: 0.85rem; }
.detail-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.shop-clock {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border-radius: 8px;
    background: rgba(20,154,251,0.1);
    color: var(--cyan);
    font-weight: 600;
    font-size: 0.85rem;
}

.pill-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid rgba(var(--overlay),0.12);
    background: rgba(var(--overlay),0.04);
    color: var(--gray-300);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}
.pill-toggle.on { background: rgba(239,68,68,0.14); border-color: rgba(239,68,68,0.3); color: #f87171; }

/* Tabs */
.crm-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid rgba(var(--overlay),0.08);
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.crm-tab {
    padding: 10px 16px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--gray-400);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}
.crm-tab:hover { color: var(--white); }
.crm-tab.active { color: var(--green); border-bottom-color: var(--green); }
.crm-tab .count { color: var(--gray-500); font-weight: 500; }

/* ============================================
   Timeline
   ============================================ */
.timeline { display: flex; flex-direction: column; gap: 2px; }
.tl-item { display: flex; gap: 14px; padding: 12px 0; }
.tl-rail { display: flex; flex-direction: column; align-items: center; }
.tl-icon {
    width: 34px; height: 34px; flex-shrink: 0;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.9rem;
    background: rgba(var(--overlay),0.06);
    color: var(--gray-300);
}
.tl-icon.call { background: rgba(19,239,149,0.12); color: var(--green); }
.tl-icon.email { background: rgba(20,154,251,0.12); color: var(--cyan); }
.tl-icon.received { background: rgba(19,239,149,0.12); color: var(--green); }
.tl-icon.system { background: rgba(168,85,247,0.12); color: #c084fc; }
.tl-line { flex: 1; width: 2px; background: rgba(var(--overlay),0.08); margin-top: 4px; }
.tl-body { flex: 1; min-width: 0; padding-bottom: 6px; }
.tl-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.tl-subject { color: var(--white); font-weight: 600; font-size: 0.9rem; }
.tl-time { color: var(--gray-500); font-size: 0.78rem; }
.tl-note { color: var(--gray-300); font-size: 0.87rem; margin-top: 4px; white-space: pre-wrap; }
.tl-outcome { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }

/* ============================================
   Emails tab - threaded conversations
   ============================================ */
.email-thread {
    border: 1px solid rgba(var(--overlay),0.07);
    border-radius: 12px;
    background: rgba(var(--overlay),0.02);
    margin-bottom: 12px;
    overflow: hidden;
}
.email-thread-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 13px 16px;
    cursor: pointer;
    transition: background 0.15s;
}
.email-thread-head:hover { background: rgba(var(--overlay),0.03); }
.email-thread-subject {
    color: var(--white);
    font-weight: 600;
    font-size: 0.92rem;
    flex: 1 1 200px;
    min-width: 0;
    word-break: break-word;
}
.email-thread-meta { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; }
.email-thread-body {
    padding: 4px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-top: 1px solid rgba(var(--overlay),0.06);
}

.email-bubble { display: flex; gap: 12px; }
.email-bubble .eb-rail { flex: 0 0 auto; }
.email-bubble .eb-main { flex: 1; min-width: 0; }
.eb-card {
    border: 1px solid rgba(var(--overlay),0.08);
    border-radius: 10px;
    padding: 11px 13px;
    background: rgba(var(--overlay),0.02);
}
.email-bubble.inbound .eb-card { border-left: 3px solid var(--green); background: rgba(19,239,149,0.04); }
.email-bubble.outbound .eb-card { border-left: 3px solid var(--cyan); background: rgba(20,154,251,0.04); }
.eb-head { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin-bottom: 7px; }
.eb-addr { color: var(--gray-400); font-size: 0.82rem; min-width: 0; word-break: break-word; }
.eb-addr strong { color: var(--white); }
.eb-addr i { font-size: 0.7rem; opacity: 0.6; }
.eb-time { color: var(--gray-500); font-size: 0.76rem; margin-left: auto; white-space: nowrap; }
.eb-body {
    color: var(--gray-300);
    font-size: 0.87rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 260px;
    overflow-y: auto;
}
.eb-foot { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 9px; }
.eb-provider { color: var(--gray-500); font-size: 0.72rem; display: inline-flex; align-items: center; gap: 4px; }

/* Outbound delivery status + inbound "received" badge colors */
.es-sent      { background: rgba(20,154,251,0.14);  color: var(--cyan); }
.es-delivered { background: rgba(19,239,149,0.14);  color: var(--green); }
.es-opened    { background: rgba(168,85,247,0.16);  color: #c084fc; }
.es-clicked   { background: rgba(168,85,247,0.20);  color: #c084fc; }
.es-bounced   { background: rgba(239,68,68,0.14);   color: #ef4444; border-color: rgba(239,68,68,0.28); }
.es-spam      { background: rgba(239,68,68,0.14);   color: #ef4444; border-color: rgba(239,68,68,0.28); }
.es-failed    { background: rgba(239,68,68,0.14);   color: #ef4444; border-color: rgba(239,68,68,0.28); }
.es-queued    { background: rgba(148,163,184,0.12); color: #94a3b8; }
.es-received  { background: rgba(19,239,149,0.14);  color: var(--green); }

@media (max-width: 768px) {
    .email-bubble { gap: 8px; }
    .eb-time { margin-left: 0; }
}

/* ============================================
   Contacts / channels
   ============================================ */
.contact-card {
    border: 1px solid rgba(var(--overlay),0.07);
    border-radius: 12px;
    padding: 16px;
    background: rgba(var(--overlay),0.02);
}
.channel-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 0.88rem; }
.channel-row a { color: var(--cyan); text-decoration: none; }
.channel-row a:hover { text-decoration: underline; }
.channel-kind { color: var(--gray-500); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; min-width: 74px; }
.call-link { color: var(--green) !important; font-weight: 600; }

/* ============================================
   Kanban board
   ============================================ */
.kanban {
    display: flex;
    gap: 12px;
    align-items: stretch;
    padding-bottom: 4px;
}
.kanban-col {
    /* Flex-fill the available width so every stage fits - no horizontal scroll. */
    flex: 1 1 0;
    min-width: 0;
    background: rgba(var(--overlay),0.025);
    border: 1px solid rgba(var(--overlay),0.06);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 220px);
}
/* Narrow screens: stack stages vertically instead of scrolling sideways. */
@media (max-width: 900px) {
    .kanban { flex-direction: column; }
    .kanban-col { flex: none; width: 100%; max-height: none; }
    .kanban-body { max-height: none; }
}
.kanban-col.dragover { border-color: var(--green); background: rgba(19,239,149,0.05); }
.kanban-col-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 4px 8px; flex-wrap: wrap; min-width: 0;
    padding: 11px 12px;
    border-bottom: 1px solid rgba(var(--overlay),0.06);
    position: sticky; top: 0;
}
.kanban-col-head h4 { font-size: 0.82rem; font-weight: 700; color: var(--white); margin: 0; min-width: 0; word-break: break-word; }
.kanban-col-meta { display: flex; gap: 8px; align-items: center; color: var(--gray-500); font-size: 0.75rem; }
.kanban-body { padding: 10px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; min-height: 96px; }
.kanban-body:empty::after {
    content: "No deals";
    display: flex; align-items: center; justify-content: center;
    height: 76px;
    color: var(--gray-600, #52525b);
    font-size: 0.8rem;
    border: 1px dashed rgba(var(--overlay), 0.08);
    border-radius: 8px;
}

.deal-card {
    background: var(--bg-elevated);
    border: 1px solid rgba(var(--overlay),0.08);
    border-radius: 10px;
    padding: 12px;
    cursor: grab;
    transition: border-color 0.15s, transform 0.1s;
}
.deal-card:hover { border-color: rgba(var(--overlay),0.18); }
.deal-card:active { cursor: grabbing; }
.deal-card.dragging { opacity: 0.45; }

/* Segmented toggle (Won / Lost on the closed-deals page) */
.seg { display: inline-flex; background: rgba(var(--overlay),0.06); border-radius: 8px; padding: 3px; gap: 2px; }
.seg-btn {
    display: inline-flex; align-items: center; gap: 6px; border: none; background: transparent;
    color: var(--gray-400); font-size: 0.82rem; font-weight: 600; padding: 6px 12px; border-radius: 6px; cursor: pointer;
}
.seg-btn:hover { color: var(--white); }
.seg-btn.active { background: rgba(var(--overlay),0.12); color: var(--white); }
.deal-card.rotting { border-left: 3px solid #ef4444; }
.deal-card-top { display: flex; align-items: flex-start; gap: 8px; }
.deal-card-top .deal-card-title { flex: 1 1 auto; margin-bottom: 4px; }
.deal-card-tools { display: flex; gap: 2px; flex: 0 0 auto; opacity: 0; transition: opacity 0.12s; }
.deal-card:hover .deal-card-tools { opacity: 1; }
.dc-tool {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 6px;
    color: var(--gray-400); background: transparent; border: none; cursor: pointer;
    text-decoration: none; font-size: 0.82rem; padding: 0;
}
.dc-tool:hover { background: rgba(var(--overlay),0.12); color: var(--white); }
.dc-tool.danger:hover { background: rgba(239,68,68,0.18); color: #f87171; }
@media (hover: none) { .deal-card-tools { opacity: 1; } }
.deal-card-title { color: var(--white); font-weight: 600; font-size: 0.9rem; margin-bottom: 4px; word-break: break-word; }
.deal-card-acct { color: var(--gray-400); font-size: 0.78rem; margin-bottom: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deal-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 4px 8px; flex-wrap: wrap; }
.deal-value { color: var(--green); font-weight: 700; font-size: 0.9rem; }
.deal-card-flags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.deal-days { color: var(--gray-500); font-size: 0.72rem; }

/* ============================================
   My Day
   ============================================ */
.myday-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(380px,100%),1fr));
    gap: 20px;
}
.myday-item {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid rgba(var(--overlay),0.06);
    background: rgba(var(--overlay),0.02);
    text-decoration: none;
    transition: border-color 0.15s;
}
.myday-item:hover { border-color: rgba(var(--overlay),0.16); }
.myday-item + .myday-item { margin-top: 8px; }
.myday-item .mi-main { min-width: 0; }
.myday-item .mi-title { color: var(--white); font-weight: 600; font-size: 0.9rem; }
.myday-item .mi-sub { color: var(--gray-500); font-size: 0.78rem; margin-top: 2px; }
.mi-overdue { color: #f87171; font-weight: 600; }
.mi-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* ============================================
   Dialogs (Radzen dialog content reuses .form-* + these)
   ============================================ */
.dlg { display: flex; flex-direction: column; gap: 16px; min-width: 320px; }
.dlg-row { display: flex; gap: 12px; flex-wrap: wrap; }
.dlg-row > * { flex: 1; min-width: 140px; }
.dlg-footer { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }
.dlg-section {
    border: 1px solid rgba(var(--overlay),0.08);
    border-radius: 10px;
    padding: 14px;
}
.dlg-section-head { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--white); margin-bottom: 10px; font-size: 0.9rem; }

.outcome-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px,1fr)); gap: 8px; }
.outcome-btn {
    padding: 10px 8px;
    border-radius: 8px;
    border: 1px solid rgba(var(--overlay),0.12);
    background: rgba(var(--overlay),0.03);
    color: var(--gray-300);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
}
.outcome-btn:hover { border-color: rgba(var(--overlay),0.25); color: var(--white); }
.outcome-btn.sel { background: rgba(19,239,149,0.14); border-color: var(--green); color: var(--green); }

.mini-label { font-size: 0.75rem; font-weight: 600; color: var(--gray-400); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; display: block; }

/* Data grid row affordance */
.rz-data-grid .rz-data-row { cursor: pointer; }

@media (max-width: 768px) {
    .crm-page { padding: 16px; }
    .detail-header { flex-direction: column; }
}

/* ============================================================
   Phase 3 - Outreach UI (templates, sequences, settings)
   ============================================================ */
.outreach-editor-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    align-items: start;
}
@media (max-width: 1100px) {
    .outreach-editor-grid { grid-template-columns: 1fr; }
}

.outreach-preview-frame {
    width: 100%;
    height: 260px;
    border: 1px solid rgba(var(--overlay), 0.12);
    border-radius: 8px;
    background: #fff;
}
.outreach-preview-frame.tall { height: 460px; }
.outreach-preview { border-top: 1px solid rgba(var(--overlay), 0.08); padding-top: 10px; }

/* Sequence builder step rows */
.step-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    border: 1px solid rgba(var(--overlay), 0.10);
    border-radius: 10px;
    margin-bottom: 10px;
    background: rgba(var(--overlay), 0.02);
}
.step-num {
    flex: 0 0 auto;
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--gradient-primary, linear-gradient(to right,#008fc1,#00f099));
    color: #04140c; font-weight: 800; font-size: 0.85rem;
}
.step-fields {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    min-width: 0;
}
.step-fields > div { flex: 1; min-width: 120px; }
.step-actions { flex: 0 0 auto; display: flex; gap: 4px; }

.webhook-url code {
    display: block;
    margin-top: 4px;
    padding: 8px 10px;
    border-radius: 6px;
    background: rgba(var(--overlay), 0.06);
    color: var(--white);
    font-family: monospace;
    font-size: 0.82rem;
    word-break: break-all;
}

/* ============================================================
   Directory + unmatched queue polish
   ============================================================ */
.crm-page-head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.crm-page-icon {
    flex: 0 0 auto;
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 12px;
    font-size: 1.25rem;
    color: var(--green);
    background: rgba(19,239,149,0.10);
    border: 1px solid rgba(19,239,149,0.22);
}
.crm-page-head h1 { font-size: 1.55rem; font-weight: 700; color: var(--white); margin: 0; line-height: 1.2; }
.crm-page-head .crm-muted { margin: 2px 0 0; }

.crm-tab { display: inline-flex; align-items: center; gap: 7px; }
.tab-pill {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; padding: 0 6px;
    border-radius: 100px;
    background: rgba(245,158,11,0.16); color: #f59e0b;
    font-size: 0.72rem; font-weight: 700;
}

.umq-list { display: flex; flex-direction: column; gap: 10px; }
.umq-item {
    display: flex; align-items: center; gap: 16px;
    padding: 14px 18px;
    border-radius: 12px;
    border: 1px solid rgba(var(--overlay), 0.07);
    background: var(--bg-elevated);
    transition: border-color 0.15s, background 0.15s;
}
.umq-item:hover { border-color: rgba(var(--overlay), 0.16); background: rgba(var(--overlay), 0.03); }
.umq-avatar {
    flex: 0 0 auto;
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    font-weight: 700; font-size: 1rem;
    color: var(--cyan);
    background: rgba(20,154,251,0.12);
}
.umq-main { flex: 1 1 auto; min-width: 0; }
.umq-name { color: var(--white); font-weight: 600; font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.umq-sub { display: flex; flex-wrap: wrap; gap: 4px; color: var(--gray-500); font-size: 0.8rem; margin-top: 3px; }
.umq-sub .umq-dot { opacity: 0.5; }
.umq-meta { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; text-align: right; }
.umq-actions { flex: 0 0 auto; display: flex; gap: 8px; }

.btn-ghost {
    background: transparent;
    border: 1px solid rgba(var(--overlay), 0.14);
    color: var(--gray-400);
}
.btn-ghost:hover { border-color: rgba(var(--overlay), 0.28); color: var(--white); }

.umq-empty {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: 56px 24px;
    border: 1px dashed rgba(var(--overlay), 0.12);
    border-radius: 14px;
    background: rgba(var(--overlay), 0.02);
}
.umq-empty-icon {
    width: 56px; height: 56px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    font-size: 1.6rem;
    color: var(--green);
    background: rgba(19,239,149,0.10);
    margin-bottom: 14px;
}
.umq-empty h3 { color: var(--white); font-size: 1.05rem; font-weight: 700; margin: 0 0 6px; }
.umq-empty p { color: var(--gray-500); font-size: 0.85rem; max-width: 420px; margin: 0; }
.spinner {
    width: 28px; height: 28px; margin-bottom: 12px;
    border: 3px solid rgba(var(--overlay), 0.15);
    border-top-color: var(--green);
    border-radius: 50%;
    animation: umq-spin 0.7s linear infinite;
}
@keyframes umq-spin { to { transform: rotate(360deg); } }

/* Inline spinning icon (e.g. the "Checking…" reply-refresh button). */
.spin { display: inline-block; animation: umq-spin 0.7s linear infinite; }

@media (max-width: 720px) {
    .umq-item { flex-wrap: wrap; gap: 10px 14px; }
    .umq-meta { align-items: flex-start; text-align: left; flex-direction: row; align-items: center; }
    .umq-actions { width: 100%; }
}

/* On mobile the dense grids drop their lower-priority columns via Radzen's
   Visible (see the pages) - no CSS column-hiding needed. This just makes the
   remaining columns fill the width and the name truncate rather than overflow. */
@media (max-width: 768px) {
    .grid-accounts .rz-grid-table,
    .grid-directory .rz-grid-table { width: 100% !important; min-width: 0 !important; }
    /* Truncate a long name within its column (no max-width:0 - that collapses
       the cell under table-layout:fixed). */
    .grid-accounts .rz-data-row td:first-child,
    .grid-directory .rz-data-row td:first-child {
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
}