/* ==========================================================
   Lead CRM — v4 design
   ========================================================== */

:root {
  --bg:           #f6f7fb;
  --bg-alt:       #eef0f7;
  --sidebar-bg:   #0f172a;
  --sidebar-fg:   #cbd5e1;
  --sidebar-hi:   #1e293b;
  --card:         #ffffff;
  --card-hover:   #fafbff;
  --border:       #e5e7eb;
  --border-light: #f1f5f9;
  --text:         #0f172a;
  --text-soft:    #475569;
  --muted:        #94a3b8;
  --brand:        #6366f1;
  --brand-dark:   #4f46e5;
  --brand-soft:   #eef2ff;
  --ok:           #10b981;
  --ok-soft:      #d1fae5;
  --warn:         #f59e0b;
  --warn-soft:    #fef3c7;
  --err:          #ef4444;
  --err-soft:     #fee2e2;
  --accent:       #06b6d4;
  --radius-sm:    6px;
  --radius:       10px;
  --radius-lg:    14px;
  --shadow-sm:    0 1px 2px rgba(15,23,42,.04);
  --shadow:       0 2px 8px rgba(15,23,42,.06);
  --shadow-lg:    0 20px 40px rgba(15,23,42,.12);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", system-ui, sans-serif; font-size: 14px; line-height: 1.5; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; }

/* Forms */
input, select, textarea {
  width: 100%; padding: .5rem .7rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font: inherit; color: var(--text); background: #fff;
  transition: border-color .1s, box-shadow .1s;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(99,102,241,.15);
}
input[type=checkbox], input[type=color] { width: auto; padding: 0; }
input[type=color] { width: 44px; height: 34px; padding: 2px; }
label { display: block; margin: .75rem 0 .25rem; font-size: .82rem; color: var(--text-soft); font-weight: 500; }
label.cb { display: inline-flex; align-items: center; gap: .4rem; margin: 0; font-weight: 400; }
textarea { resize: vertical; min-height: 60px; }
small.muted { color: var(--muted); font-size: .78rem; margin-top: .25rem; display: block; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .45rem .85rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: #fff; color: var(--text);
  font-size: .88rem; font-weight: 500; cursor: pointer;
  transition: background .1s, border-color .1s, color .1s, transform .05s;
  white-space: nowrap;
}
.btn:hover  { background: var(--bg-alt); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--brand); color: #fff; border-color: var(--brand); }
.btn.primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--text-soft); }
.btn.ghost:hover { background: var(--bg-alt); color: var(--text); }
.btn.danger { color: var(--err); border-color: var(--err-soft); }
.btn.danger:hover { background: var(--err-soft); }
.btn.block { width: 100%; }
.btn.sm { padding: .25rem .55rem; font-size: .78rem; }
.btn.icon { padding: .2rem .4rem; background: transparent; border: none; font-size: .9rem; color: var(--text-soft); }
.btn.icon:hover { color: var(--brand); background: var(--bg-alt); }

/* Badges / chips / tags */
.badge {
  display: inline-block; background: var(--err); color: #fff;
  font-size: .68rem; padding: 1px 6px; border-radius: 999px;
  margin-left: 2px; font-weight: 600;
}
.status-pill {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border: none; border-radius: 999px;
  color: #fff; font-size: .75rem; font-weight: 500; cursor: pointer;
  max-width: 140px;
  -webkit-appearance: none; appearance: none;
}
.status-pill option { color: var(--text); }
.status-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: 2px 8px; background: #fff;
  border: 1px solid var(--border); border-radius: 999px;
  font-size: .72rem; color: var(--text-soft);
}
.chip-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.chip-count { background: var(--bg-alt); padding: 0 6px; border-radius: 10px; font-weight: 600; font-size: .7rem; color: var(--text); }
.chip-count.warn { background: var(--warn-soft); color: var(--warn); }
.chip-count.err  { background: var(--err-soft); color: var(--err); }
.tag {
  display: inline-block; background: var(--brand-soft); color: var(--brand-dark);
  padding: 1px 6px; border-radius: 4px;
  font-size: .72rem; margin-right: 3px; margin-bottom: 2px;
}
.dup-pill {
  display: inline-block; background: var(--warn-soft); color: #b45309;
  padding: 0 6px; border-radius: 4px;
  font-size: .68rem; font-weight: 700; cursor: pointer; margin-left: 6px;
}

/* Login */
.login-screen {
  min-height: 100vh; display: grid; place-items: center;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
  padding: 2rem;
}
.login-card {
  width: min(92vw, 420px); background: #fff;
  padding: 2.2rem; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.login-brand { text-align: center; margin-bottom: 1.25rem; }
.login-brand h1 { margin: .5rem 0 .25rem; font-size: 1.5rem; color: var(--text); }
.login-logo { max-height: 48px; }
.login-logo-dot { font-size: 2.5rem; }

/* Shell */
.shell { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.sidebar { background: var(--sidebar-bg); color: var(--sidebar-fg); padding: 1rem; display: flex; flex-direction: column; overflow-y: auto; }
.brand {
  display: flex; align-items: center; gap: .6rem;
  font-weight: 700; font-size: 1.05rem; color: #fff;
  padding: .4rem .5rem 1rem; border-bottom: 1px solid var(--sidebar-hi);
}
.brand-dot { font-size: 1.3rem; }
.brand-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-logo { max-height: 28px; }
.sidebar nav { flex: 1; margin-top: 1rem; display: flex; flex-direction: column; gap: 2px; }
.sidebar nav a {
  color: var(--sidebar-fg); padding: .55rem .7rem;
  border-radius: var(--radius-sm);
  font-size: .92rem; display: flex; align-items: center; gap: .55rem;
  text-decoration: none;
}
.sidebar nav a:hover  { background: var(--sidebar-hi); color: #fff; text-decoration: none; }
.sidebar nav a.active { background: var(--brand); color: #fff; }
.nav-icon { font-size: 1.05rem; width: 1.5rem; text-align: center; }
.sidebar-footer { border-top: 1px solid var(--sidebar-hi); padding-top: .75rem; margin-top: .75rem; }
.me { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; }
.avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, var(--brand), #ec4899);
  color: #fff; font-weight: 700; font-size: .85rem;
  display: grid; place-items: center;
}
.me-meta .name { font-size: .88rem; color: #e5e7eb; font-weight: 500; }
.me-meta .role { font-size: .72rem; color: var(--muted); text-transform: capitalize; }

.main { display: flex; flex-direction: column; min-width: 0; }
.topbar {
  background: #fff; padding: .85rem 1.5rem;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 10;
}
.topbar h2 { margin: 0; font-size: 1.15rem; font-weight: 600; color: var(--text); }
.topbar-right { display: flex; gap: .5rem; align-items: center; }
#view { padding: 1.25rem 1.5rem; }
.loading { padding: 2rem; text-align: center; color: var(--muted); }
.error-box { padding: 1rem; background: var(--err-soft); color: var(--err); border-radius: var(--radius-sm); }

/* Cards */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.card { background: var(--card); border-radius: var(--radius); padding: 1rem 1.15rem; box-shadow: var(--shadow-sm); border: 1px solid var(--border-light); }
.card h3 { margin: 0 0 .6rem; font-size: 1rem; font-weight: 600; }
.card h4 { margin: 0 0 .5rem; font-size: .92rem; font-weight: 600; }
.card-wide { grid-column: 1 / -1; }

.card.stat { display: flex; align-items: center; gap: .85rem; }
.stat-icon { font-size: 1.75rem; }
.stat-body { flex: 1; }
.stat-label { font-size: .75rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.stat-value { font-size: 1.65rem; font-weight: 700; margin-top: .1rem; color: var(--text); }
.stat.ok     .stat-value { color: var(--ok); }
.stat.warn   .stat-value { color: var(--warn); }
.stat.err    .stat-value { color: var(--err); }
.stat.accent .stat-value { color: var(--brand); }

/* Toolbar */
.toolbar {
  display: flex; gap: .5rem; flex-wrap: wrap; align-items: center;
  background: #fff; padding: .6rem .75rem; border-radius: var(--radius);
  margin-bottom: 1rem;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-light);
}
.toolbar input:not(.flex), .toolbar select { width: auto; min-width: 130px; }
.toolbar .flex { flex: 1; min-width: 200px; }

/* Leads header */
.leads-header { display: flex; align-items: center; gap: .5rem; padding: .4rem .5rem; margin-bottom: .75rem; flex-wrap: wrap; }
.leads-status-chips { display: flex; gap: .35rem; flex-wrap: wrap; flex: 1; }
.header-actions { display: flex; gap: .35rem; }
.header-hidden-toggle { margin-bottom: .5rem; }

/* Bulk bar */
.bulk-bar {
  background: var(--brand-soft); border: 1px solid var(--brand);
  border-radius: var(--radius-sm); padding: .5rem .8rem;
  margin-bottom: .75rem;
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
}
.bulk-count { font-weight: 600; color: var(--brand-dark); margin-right: .5rem; }

/* Tables */
.table-wrap { background: #fff; border-radius: var(--radius); overflow: auto; box-shadow: var(--shadow-sm); border: 1px solid var(--border-light); max-width: 100%; }
table { width: 100%; border-collapse: collapse; font-size: .88rem; }
thead th {
  background: #fafbff; padding: .65rem .75rem; text-align: left;
  font-weight: 600; color: var(--text-soft);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0;
  font-size: .78rem; text-transform: uppercase; letter-spacing: .02em;
  white-space: nowrap;
}
tbody td { padding: .55rem .75rem; border-bottom: 1px solid var(--border-light); vertical-align: middle; }
tbody tr:hover { background: var(--card-hover); }
tbody tr.row-duplicate { background: #fffbeb; }
tbody tr.row-duplicate:hover { background: #fef3c7; }
.empty { text-align: center; color: var(--muted); padding: 2rem; }
.th-check, .td-check { width: 38px; }
.td-actions { text-align: right; width: 40px; }
.muted { color: var(--muted); font-size: .82rem; }
.overdue { color: var(--err); font-weight: 500; }
.cell-ok { color: var(--ok); font-weight: 500; }
.cell-err { color: var(--err); font-weight: 500; }
.cell-name a { font-weight: 500; color: var(--text); }
.cell-name a:hover { color: var(--brand); }
.cell-phone { display: flex; align-items: center; gap: .25rem; white-space: nowrap; }
.cell-phone .btn.icon { padding: .15rem .3rem; }
.cell-remark { max-width: 220px; }
.remark-text { display: inline-block; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; color: var(--text-soft); }
.leads-table { min-width: 900px; }

.mini-table { width: 100%; border-collapse: collapse; font-size: .88rem; margin-bottom: 1rem; }
.mini-table th, .mini-table td { padding: .5rem .65rem; border-bottom: 1px solid var(--border-light); }
.mini-table thead th { background: var(--bg-alt); font-size: .76rem; text-transform: uppercase; letter-spacing: .02em; color: var(--text-soft); font-weight: 600; }
.inline-form { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-top: .75rem; }
.inline-form input, .inline-form select { width: auto; }

/* Pipeline + Funnel */
.pipeline { display: flex; gap: .5rem; flex-wrap: wrap; }
.pipeline .stage {
  flex: 1 1 110px; background: #fff; padding: .75rem .65rem;
  border-radius: var(--radius-sm); text-align: center;
  border: 1px solid var(--border-light); border-top: 3px solid var(--brand);
}
.pipeline .stage-count { font-size: 1.55rem; font-weight: 700; }
.pipeline .stage-name { font-size: .78rem; color: var(--muted); margin-top: .1rem; }

.funnel { display: flex; flex-direction: column; gap: .5rem; margin-top: .5rem; }
.funnel-row { display: grid; grid-template-columns: 120px 1fr 90px; gap: 1rem; align-items: center; }
.funnel-label { font-size: .85rem; color: var(--text-soft); font-weight: 500; }
.funnel-bar-wrap { background: var(--bg-alt); border-radius: var(--radius-sm); overflow: hidden; height: 34px; display: flex; align-items: center; }
.funnel-bar { height: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0 .6rem; color: #fff; font-size: .8rem; font-weight: 500; min-width: 40px; }
.funnel-count { font-weight: 700; }
.funnel-pct { font-size: .72rem; opacity: .9; }
.funnel-conv { font-size: .75rem; color: var(--muted); text-align: right; }

/* Kanban */
.kanban { display: grid; grid-auto-columns: 250px; grid-auto-flow: column; gap: .75rem; overflow-x: auto; padding: 4px 2px; align-items: start; }
.kanban-col { background: #fff; border-radius: var(--radius); padding: .6rem; min-height: 300px; border: 1px solid var(--border-light); transition: background .1s, border-color .1s; }
.kanban-col.drop-hover { background: var(--brand-soft); border-color: var(--brand); }
.kanban-head { margin: 0 0 .6rem; font-size: .85rem; display: flex; justify-content: space-between; align-items: center; padding: .3rem .2rem; border-top: 3px solid var(--brand); padding-top: .5rem; }
.kanban-count { background: var(--bg-alt); color: var(--text-soft); padding: 0 6px; border-radius: 10px; font-size: .72rem; font-weight: 600; }
.kanban-card { background: #fff; padding: .55rem .65rem; border-radius: var(--radius-sm); margin-bottom: .4rem; box-shadow: var(--shadow-sm); border: 1px solid var(--border-light); font-size: .82rem; cursor: grab; transition: transform .05s, box-shadow .1s; }
.kanban-card:hover { box-shadow: var(--shadow); }
.kanban-card:active { cursor: grabbing; transform: scale(.98); }
.kc-name { font-weight: 600; }
.kc-meta { color: var(--muted); font-size: .72rem; margin-top: 2px; }
.kc-fu { color: var(--warn); font-size: .72rem; margin-top: 3px; font-weight: 500; }

/* Charts */
.chart-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 1rem; }
.chart-grid .card-wide { grid-column: 1 / -1; }
.chart-wrap { position: relative; height: 240px; }

/* Modals */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(15,23,42,.55);
  display: grid; place-items: center; z-index: 1000; padding: 1rem;
}
.modal { background: #fff; border-radius: var(--radius-lg); padding: 1.25rem;
  width: min(92vw, 540px); max-height: 90vh; overflow: auto;
  box-shadow: var(--shadow-lg);
}
.modal.modal-sm { width: min(92vw, 380px); }
.modal.modal-lg { width: min(95vw, 820px); }
.modal h3 { margin-top: 0; font-size: 1.1rem; }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: 1rem; padding-bottom: .75rem; border-bottom: 1px solid var(--border-light); }
.modal-head h3 { margin: 0; }
.actions { display: flex; gap: .5rem; justify-content: flex-end; margin-top: 1.25rem; padding-top: .75rem; border-top: 1px solid var(--border-light); }

.popup-followup { z-index: 2000; }
.popup-followup .modal { border: 2px solid var(--warn); }
.followup-list { list-style: none; padding: 0; margin: 0; }
.followup-list li { padding: .75rem; border-bottom: 1px solid var(--border-light); }
.followup-list li:last-child { border-bottom: none; }
.followup-list .actions { margin-top: .5rem; padding-top: 0; border-top: none; justify-content: flex-start; }

.notif-list { list-style: none; padding: 0; margin: 0; }
.notif-list li { padding: .6rem 0; border-bottom: 1px solid var(--border-light); font-size: .88rem; }

/* Form grids */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem .85rem; margin-top: .5rem; }
.f-row { display: flex; flex-direction: column; }
.f-row.full { grid-column: 1 / -1; }
.f-row label { margin: 0 0 .2rem; }

/* Remarks */
.remarks-block { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border-light); }
.remarks-block h4 { margin: 0 0 .5rem; }
.remarks-list { list-style: none; padding: 0; margin: 0 0 .5rem; max-height: 180px; overflow-y: auto; }
.remarks-list li { padding: .5rem .65rem; background: var(--bg-alt); border-radius: var(--radius-sm); margin-bottom: .35rem; font-size: .85rem; }
.remarks-list li b { font-size: .8rem; color: var(--brand-dark); }

/* Column picker */
.col-picker { display: grid; grid-template-columns: repeat(2, 1fr); gap: .4rem; max-height: 400px; overflow-y: auto; margin: .5rem 0; }
.col-opt { display: flex; align-items: center; gap: .5rem; padding: .35rem .5rem; border-radius: var(--radius-sm); cursor: pointer; font-size: .9rem; margin: 0; font-weight: 400; }
.col-opt:hover { background: var(--bg-alt); }

/* Subtabs */
.subtabs { display: flex; gap: .25rem; margin-bottom: 1rem; border-bottom: 1px solid var(--border); overflow-x: auto; }
.subtab { background: transparent; border: none; padding: .55rem 1rem; cursor: pointer; color: var(--text-soft); font-weight: 500; font-size: .88rem; border-bottom: 2px solid transparent; transition: color .1s, border-color .1s; white-space: nowrap; }
.subtab:hover { color: var(--text); }
.subtab.active { color: var(--brand); border-bottom-color: var(--brand); }

/* Switch */
.switch { position: relative; display: inline-block; width: 38px; height: 20px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; inset: 0; background: #cbd5e1; border-radius: 20px; transition: .2s; }
.slider:before { content: ""; position: absolute; height: 14px; width: 14px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .2s; }
.switch input:checked + .slider { background: var(--ok); }
.switch input:checked + .slider:before { transform: translateX(18px); }

/* Duplicate history */
.dup-item { padding: .65rem .75rem; background: var(--warn-soft); border-radius: var(--radius-sm); margin-bottom: .5rem; border-left: 3px solid var(--warn); }
.dup-remark { margin-top: .3rem; font-size: .82rem; padding-left: .5rem; color: var(--text-soft); }

/* Toasts */
.toast { position: fixed; bottom: 1.5rem; right: 1.5rem; padding: .6rem 1rem; background: var(--text); color: #fff; border-radius: var(--radius); box-shadow: var(--shadow-lg); z-index: 3000; animation: toast-in .2s; font-size: .9rem; max-width: 320px; }
.toast-ok { background: var(--ok); }
.toast-err { background: var(--err); }
.toast-warn { background: var(--warn); color: #451a03; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Responsive */
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: sticky; top: 0; flex-direction: row; overflow-x: auto; padding: .5rem; }
  .sidebar nav { flex-direction: row; margin-top: 0; gap: .35rem; }
  .sidebar .brand, .sidebar-footer { display: none; }
  .form-grid { grid-template-columns: 1fr; }
  .chart-grid { grid-template-columns: 1fr; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  #view { padding: 1rem .75rem; }
  .funnel-row { grid-template-columns: 80px 1fr 70px; gap: .5rem; }
}
code { background: var(--bg-alt); padding: 1px 6px; border-radius: 3px; font-size: .85em; font-family: "SF Mono", Consolas, Monaco, monospace; }

/* Dashboard v2 */
.dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: .5rem; }
.dash-grid .card-wide { grid-column: 1 / -1; }
.fu-dash-list { list-style: none; padding: 0; margin: 0; max-height: 240px; overflow-y: auto; }
.fu-dash-list li { display: grid; grid-template-columns: 1fr 120px 80px; gap: .5rem; padding: .45rem .2rem; border-bottom: 1px solid var(--border-light); align-items: center; }
.fu-name { font-weight: 500; color: var(--brand); cursor: pointer; }
.fu-name:hover { text-decoration: underline; }
.fu-phone { font-size: .82rem; }
.fu-due { font-size: .78rem; text-align: right; color: var(--muted); }
.fu-due.overdue { color: var(--err); font-weight: 500; }

/* API docs block */
.api-endpoint { display: flex; align-items: center; gap: .5rem; margin: .5rem 0; flex-wrap: wrap; }
.api-endpoint code { flex: 1; padding: .45rem .75rem; font-size: .85rem; word-break: break-all; background: var(--bg-alt); border-radius: var(--radius-sm); }
.code-block { background: #1e293b; color: #e2e8f0; padding: 1rem; border-radius: var(--radius-sm); font-size: .8rem; overflow-x: auto; white-space: pre; font-family: "SF Mono", Consolas, Monaco, monospace; }

@media (max-width: 900px) {
  .dash-grid { grid-template-columns: 1fr; }
  .fu-dash-list li { grid-template-columns: 1fr 90px; }
  .fu-phone { display: none; }
}

/* Done-today list */
.done-list { list-style: none; padding: 0; margin: 0; }
.done-list li { display: grid; grid-template-columns: 20px 1fr auto; gap: .6rem; padding: .5rem .2rem; border-bottom: 1px solid var(--border-light); align-items: start; }
.done-list .check { color: var(--ok); font-weight: 700; font-size: 1rem; }
.done-list .done-title { font-weight: 500; }
.done-list .done-time { font-size: .75rem; white-space: nowrap; }
.team-group { margin-top: 1rem; padding-top: .75rem; border-top: 1px dashed var(--border); }
.team-group h4 small { font-weight: 400; margin-left: .4rem; }

/* Pipeline stages with lead cards */
.pipeline-stages { display: flex; flex-direction: column; gap: .5rem; }
.pipeline-stage-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-sm); border-top: 3px solid var(--brand); border-left: 1px solid var(--border-light); border-right: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); overflow: hidden; }
.pipeline-stage-card summary { padding: .75rem 1rem; cursor: pointer; display: flex; align-items: center; gap: .6rem; font-weight: 500; }
.pipeline-stage-card summary::-webkit-details-marker { display: none; }
.pipeline-stage-card .ps-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.pipeline-stage-card .ps-name { flex: 1; }
.pipeline-stage-card .ps-count { background: var(--bg-alt); padding: 2px 10px; border-radius: 10px; font-weight: 700; }
.pipeline-stage-card .ps-hint { font-size: .75rem; }
.pipeline-stage-card .ps-body { padding: 0 .5rem .5rem; }

/* Permission matrix */
.perm-matrix { width: 100%; font-size: .88rem; border-collapse: collapse; }
.perm-matrix th, .perm-matrix td { padding: .45rem .6rem; border-bottom: 1px solid var(--border-light); vertical-align: middle; }
.perm-matrix th { background: var(--bg-alt); text-transform: capitalize; }
.perm-matrix td:first-child { font-weight: 500; }
.perm-matrix select { min-width: 110px; }
.scroll-x { overflow-x: auto; }

/* Attendance matrix */
.att-matrix { font-size: .78rem; min-width: 800px; }
.att-matrix th.day-col, .att-matrix td.day-cell { width: 22px; padding: .3rem; text-align: center; }
.att-matrix .day-cell.present { background: var(--ok-soft); color: var(--ok); font-weight: 700; }
.att-matrix .day-cell.absent { background: #fff; color: var(--muted); }
.att-meta { margin-top: .75rem; padding: .6rem .75rem; background: var(--bg-alt); border-radius: var(--radius-sm); font-size: .85rem; line-height: 1.8; }
.att-meta code { font-size: .85em; }

/* ==========================================================
   Mobile-first overhaul (≤ 780px): bottom nav, cards, FAB
   ========================================================== */
@media (max-width: 780px) {
  /* Hide sidebar, replace with bottom nav */
  .shell { grid-template-columns: 1fr; padding-bottom: 60px; }
  .sidebar { display: none; }
  .topbar { padding: .75rem 1rem; }
  .topbar h2 { font-size: 1.05rem; }
  #view { padding: .85rem; }

  /* Bottom nav */
  .bottom-nav {
    position: fixed; left: 0; right: 0; bottom: 0;
    display: flex; justify-content: space-around; align-items: center;
    background: #fff; border-top: 1px solid var(--border);
    padding: .3rem 0 env(safe-area-inset-bottom, 0);
    z-index: 100;
    box-shadow: 0 -2px 12px rgba(15, 23, 42, .08);
  }
  .bottom-nav a {
    flex: 1; text-align: center; padding: .5rem .2rem;
    color: var(--text-soft); font-size: .68rem; font-weight: 500;
    text-decoration: none;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
  }
  .bottom-nav a.active { color: var(--brand); }
  .bottom-nav a .bn-ico { font-size: 1.25rem; line-height: 1; }
  .bottom-nav-more-modal { --bottom-sheet: 1; }

  /* Hamburger menu in top bar for "More" */
  .topbar-mobile-menu { display: inline-flex; }

  /* Lead listing — card view on mobile */
  .leads-table { display: none; }
  .leads-mobile { display: flex; flex-direction: column; gap: .5rem; }
  .lead-card {
    background: #fff; border-radius: var(--radius);
    padding: .75rem .9rem; box-shadow: var(--shadow-sm);
    border-left: 3px solid var(--brand);
    position: relative;
  }
  .lead-card.row-duplicate { background: #fffbeb; border-left-color: var(--warn); }
  .lc-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
  .lc-name { font-weight: 600; font-size: .98rem; flex: 1; }
  .lc-status { font-size: .68rem; padding: 2px 8px; border-radius: 999px; color: #fff; }
  .lc-meta { color: var(--muted); font-size: .78rem; margin-top: .1rem; display: flex; gap: .5rem; flex-wrap: wrap; }
  .lc-actions { display: flex; gap: .3rem; margin-top: .6rem; flex-wrap: wrap; }
  .lc-actions .btn { flex: 1; min-width: 0; padding: .4rem; font-size: .8rem; }
  .lc-fu { color: var(--warn); font-size: .75rem; font-weight: 500; }
  .lc-fu.overdue { color: var(--err); }

  /* FAB — floating action button */
  .fab {
    position: fixed; right: 1rem; bottom: 72px;
    width: 56px; height: 56px; border-radius: 50%;
    background: linear-gradient(135deg, var(--brand), #ec4899);
    color: #fff; border: none; font-size: 1.6rem;
    box-shadow: 0 8px 20px rgba(99, 102, 241, .4);
    cursor: pointer; z-index: 99;
    display: grid; place-items: center;
  }

  /* Simpler toolbars on mobile */
  .toolbar { padding: .5rem; gap: .3rem; }
  .toolbar input, .toolbar select { font-size: 16px; } /* prevents iOS zoom */
  .toolbar .flex { min-width: 150px; }

  /* Modals are sheets from bottom on mobile */
  .modal-backdrop { align-items: flex-end; padding: 0; }
  .modal { border-radius: 16px 16px 0 0; width: 100% !important; max-height: 92vh; padding: 1rem; }
  .modal.modal-lg { width: 100% !important; }
  .form-grid { grid-template-columns: 1fr; }

  /* Tables in general are ugly on mobile — make them horizontal scroll containers */
  .table-wrap { border-radius: var(--radius); }
  thead th { font-size: .68rem; padding: .5rem .5rem; }
  tbody td { padding: .45rem .5rem; font-size: .85rem; }
  .cards { grid-template-columns: repeat(2, 1fr); gap: .6rem; }
  .stat-value { font-size: 1.3rem; }
  .subtabs { font-size: .82rem; }
  .subtab { padding: .55rem .75rem; }

  /* Topbar right: keep bell, add menu */
  .topbar-right { gap: .25rem; }
  .btn { min-height: 36px; }
  .btn.sm { min-height: 30px; }

  /* Dashboard grid stacks */
  .dash-grid { grid-template-columns: 1fr !important; }
  .pipeline { overflow-x: auto; flex-wrap: nowrap; padding-bottom: .5rem; }
  .pipeline .stage { min-width: 110px; flex: 0 0 110px; }
  .kanban { grid-auto-columns: 85vw; }
}

@media (min-width: 781px) {
  .bottom-nav { display: none; }
  .fab { display: none; }
  .leads-mobile { display: none; }
  .topbar-mobile-menu { display: none; }
}

/* Call button styled for mobile */
.btn-call {
  background: var(--ok) !important; color: #fff !important;
  border-color: var(--ok) !important; font-weight: 600;
}
.btn-call:hover { background: #059669 !important; }

/* After-call modal — distinctive */
.after-call-modal .modal { border-top: 4px solid var(--ok); }
.after-call-modal .modal-head h3 { color: var(--ok); }

/* Mobile menu sheet */
.mobile-menu-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-top: .75rem; }
.menu-tile {
  background: var(--bg-alt); border-radius: var(--radius); padding: .85rem .5rem;
  display: flex; flex-direction: column; align-items: center; gap: .4rem;
  text-align: center; font-size: .82rem; color: var(--text); text-decoration: none;
}
.menu-tile:hover { background: var(--brand-soft); color: var(--brand); text-decoration: none; }
.menu-tile-icon { font-size: 1.6rem; }

/* Bottom-nav highlight when nav item is active */
#bottom-nav a.active { color: var(--brand); }

/* Topbar — hide menu button on desktop */
@media (min-width: 781px) { .topbar-mobile-menu { display: none !important; } }

/* ============================================================
   Dialer view (TeleCRM-style)
   ============================================================ */
.dialer-shell {
  max-width: 480px;
  margin: 0 auto;
  background: var(--bg-card, #fff);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.08));
}
.dialer-tabs {
  display: flex;
  border-bottom: 1px solid var(--border, #e5e7eb);
  background: var(--bg-alt, #f8fafc);
}
.dialer-tab {
  flex: 1; padding: .85rem .25rem; border: none; background: transparent;
  color: var(--text-muted, #64748b); font-weight: 600; cursor: pointer;
  border-bottom: 3px solid transparent; font-size: .9rem;
}
.dialer-tab.active { color: var(--brand, #6366f1); border-bottom-color: var(--brand, #6366f1); }

.dialer-body { padding: 1rem; min-height: 60vh; }

/* Dialpad */
.dialpad-wrap { display: flex; flex-direction: column; gap: .75rem; }
.dialpad-display {
  width: 100%; padding: 1rem; font-size: 1.6rem; text-align: center;
  border: 2px solid var(--border, #e5e7eb); border-radius: var(--radius);
  background: var(--bg-alt, #f8fafc); letter-spacing: .12em;
  font-family: -apple-system, "SF Mono", Menlo, monospace;
}
.dialpad-display:focus { border-color: var(--brand, #6366f1); outline: none; }

.dialpad-matches { display: flex; flex-direction: column; gap: .35rem; max-height: 180px; overflow-y: auto; }
.dialpad-match {
  text-align: left; padding: .5rem .75rem; border: 1px solid var(--border, #e5e7eb);
  border-radius: var(--radius); background: var(--bg-card, #fff); cursor: pointer;
  font-size: .9rem; line-height: 1.3;
}
.dialpad-match:hover { background: var(--brand-soft, #eef2ff); border-color: var(--brand, #6366f1); }
.dialpad-match.new { color: var(--brand, #6366f1); font-weight: 600; }

.dialpad-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem;
  max-width: 320px; margin: 0 auto;
}
.dialpad-key {
  aspect-ratio: 1.4; border: none; border-radius: 50%;
  background: var(--bg-alt, #f1f5f9); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: -apple-system, "SF Mono", Menlo, monospace;
  transition: background .15s;
}
.dialpad-key:hover { background: var(--brand-soft, #eef2ff); }
.dialpad-key:active { background: var(--brand, #6366f1); color: #fff; }
.dialpad-d { font-size: 1.7rem; font-weight: 500; line-height: 1; }
.dialpad-sub { font-size: .55rem; color: var(--text-muted, #94a3b8); letter-spacing: .15em; margin-top: .15rem; }

.dialpad-actions {
  display: flex; align-items: center; justify-content: center; gap: 1.5rem;
  margin-top: .5rem;
}
.dialpad-call {
  width: 64px; height: 64px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--ok, #10b981); color: #fff; font-size: 1.8rem;
  box-shadow: 0 4px 14px rgba(16, 185, 129, .35);
  transition: transform .15s, box-shadow .15s;
}
.dialpad-call:hover { transform: scale(1.05); box-shadow: 0 6px 20px rgba(16, 185, 129, .45); }
.dialpad-call:active { transform: scale(0.95); }
.dialpad-back {
  width: 48px; height: 48px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--bg-alt, #f1f5f9); color: var(--text-muted, #64748b); font-size: 1.2rem;
}
.dialpad-back:hover { background: var(--bg-card, #e2e8f0); }

/* Call history list */
.dialer-history { display: flex; flex-direction: column; gap: .35rem; }
.hist-item {
  background: var(--bg-card, #fff); border: 1px solid var(--border, #e5e7eb);
  border-radius: var(--radius); padding: .65rem .85rem;
}
.hist-row { display: flex; align-items: center; gap: .75rem; }
.hist-icon { font-size: 1.4rem; flex-shrink: 0; }
.hist-meta { flex: 1; min-width: 0; line-height: 1.3; }
.hist-meta .muted { font-size: .8rem; }
.hist-redial { background: var(--ok, #10b981); color: #fff !important; }
.hist-redial:hover { background: #059669; }
.hist-audio { width: 100%; margin-top: .5rem; height: 32px; }

/* Recordings block inside lead modal */
.recordings-block { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border, #e5e7eb); }
.recordings-block h4 { margin: 0 0 .5rem; font-size: 1rem; }
.rec-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .5rem; }
.rec-item {
  background: var(--bg-alt, #f8fafc); border-radius: var(--radius);
  padding: .55rem .75rem;
}
.rec-meta { font-size: .9rem; margin-bottom: .35rem; }
.rec-dir { margin-right: .35rem; }
.rec-item audio { width: 100%; height: 32px; }

@media (max-width: 780px) {
  .dialer-shell { box-shadow: none; border-radius: 0; }
  .dialpad-display { font-size: 1.4rem; padding: .85rem; }
  .dialpad-grid { max-width: 100%; }
  .dialpad-call { width: 72px; height: 72px; font-size: 2rem; }
}

/* Dialer settings tab */
.dialer-settings { display: flex; flex-direction: column; gap: .85rem; }
.settings-card {
  background: var(--bg-card, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
}
.settings-card h4 { margin: 0 0 .5rem; font-size: 1rem; }
.settings-card p { margin: .35rem 0; font-size: .9rem; }
.settings-card .actions { flex-wrap: wrap; gap: .4rem; margin-top: .75rem; }
.rec-folder-current {
  background: var(--bg-alt, #f1f5f9);
  border-radius: 8px; padding: .55rem .75rem;
  font-family: -apple-system, "SF Mono", Menlo, monospace;
  font-size: .82rem; word-break: break-all; margin: .5rem 0;
}
.rec-folder-tips {
  font-size: .85rem; line-height: 1.6; margin: .5rem 0; padding-left: 1.2rem;
  background: var(--bg-alt, #f8fafc); padding: .65rem 1.4rem .65rem 1.6rem;
  border-radius: 8px; border-left: 3px solid var(--brand, #6366f1);
}
.rec-folder-tips li { margin-bottom: .15rem; }
.how-it-works { font-size: .9rem; line-height: 1.6; padding-left: 1.2rem; }
.how-it-works li { margin-bottom: .35rem; }
.how-it-works code {
  background: var(--bg-alt, #f1f5f9); padding: .1rem .35rem; border-radius: 4px;
  font-size: .82rem;
}

/* ============================================================
   Native-feeling mobile app overhaul
   Activates on phones (< 780px) and inside the Capacitor webview.
   Goal: dashboard, leads, pipeline, etc should look like a native
   Android app, not a desktop site shrunk down.
   ============================================================ */
@media (max-width: 780px) {
  :root {
    --app-grad: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
    --app-radius: 16px;
    --app-card-radius: 14px;
  }

  body { background: #f3f4f6; }

  /* Shell — kill desktop chrome, give edge-to-edge feel */
  .shell {
    grid-template-columns: 1fr;
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0));
    min-height: 100vh;
  }
  .main { background: transparent; }

  /* Topbar becomes a brand-colored gradient hero */
  .topbar {
    background: var(--app-grad);
    color: #fff;
    padding: calc(env(safe-area-inset-top, 0) + .65rem) 1rem .75rem;
    border-radius: 0;
    border: none;
    box-shadow: 0 4px 12px rgba(99, 102, 241, .25);
    position: sticky; top: 0; z-index: 10;
  }
  .topbar h2 { color: #fff; font-weight: 600; font-size: 1.05rem; margin: 0; }
  .topbar-mobile-menu, .topbar-right .btn {
    background: rgba(255, 255, 255, .15) !important;
    color: #fff !important;
    border: none !important;
  }
  .topbar-mobile-menu:hover, .topbar-right .btn:hover {
    background: rgba(255, 255, 255, .25) !important;
  }
  .topbar-right .badge { background: #fff; color: #6366f1; }

  /* Content area gets vertical breathing room */
  #view { padding: 1rem .85rem 1.5rem; }

  /* ---------------- Dashboard cards ---------------- */
  .dash-grid { grid-template-columns: 1fr 1fr !important; gap: .65rem !important; }
  .stat-card,
  .dashboard-card,
  .card {
    background: #fff !important;
    border-radius: var(--app-card-radius) !important;
    padding: 1rem .9rem !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .06) !important;
    border: none !important;
  }
  .stat-card { display: flex; flex-direction: column; gap: .15rem; }
  .stat-value { font-size: 1.45rem !important; font-weight: 700; }
  .stat-label { font-size: .72rem !important; color: var(--muted); }
  .stat-card::before {
    content: ""; position: absolute; left: 0; top: 14%; bottom: 14%;
    width: 4px; border-radius: 0 4px 4px 0; background: var(--brand);
  }
  .stat-card { position: relative; overflow: hidden; }

  /* Subtabs / segment controls */
  .subtabs {
    background: #fff;
    border-radius: 999px;
    padding: 4px;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .05);
    overflow: hidden;
    display: inline-flex !important;
    width: 100%;
  }
  .subtab {
    flex: 1; padding: .55rem .5rem !important;
    border-radius: 999px !important;
    text-align: center; font-weight: 500;
  }
  .subtab.active { background: var(--app-grad); color: #fff !important; }

  /* Section headers */
  h3, .section-title {
    font-size: 1rem; font-weight: 600; margin: 1.1rem 0 .55rem;
    padding-left: .25rem;
  }

  /* ---------------- Leads (mobile cards) ---------------- */
  .lead-card {
    border-left-width: 0 !important;
    border-radius: var(--app-card-radius) !important;
    padding: .9rem 1rem !important;
    background: #fff !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .05) !important;
    position: relative;
  }
  .lead-card::after {
    content: ""; position: absolute; left: 0; top: 18%; bottom: 18%;
    width: 4px; border-radius: 0 4px 4px 0; background: var(--brand-color, var(--brand));
  }
  .lc-name { font-size: 1rem !important; }
  .lc-meta { font-size: .8rem !important; }
  .lc-actions {
    border-top: 1px solid #f1f5f9;
    padding-top: .6rem !important;
    margin-top: .65rem !important;
    gap: .4rem !important;
  }
  .lc-actions .btn {
    border-radius: 10px !important;
    padding: .55rem !important;
    font-size: .82rem !important;
    background: #f8fafc !important;
    border: none !important;
  }
  .lc-actions .btn.btn-call {
    background: var(--ok) !important;
    color: #fff !important;
  }

  /* ---------------- Bottom nav — pill-shaped floating ---------------- */
  .bottom-nav {
    bottom: calc(env(safe-area-inset-bottom, 0) + .6rem) !important;
    left: .6rem !important; right: .6rem !important;
    border-radius: 999px !important;
    background: #fff !important;
    border: none !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .15), 0 2px 4px rgba(15, 23, 42, .05) !important;
    padding: .35rem .5rem !important;
  }
  .bottom-nav a {
    border-radius: 999px;
    padding: .45rem .25rem !important;
    margin: 0 .12rem;
    transition: background .18s, color .18s;
  }
  .bottom-nav a.active {
    background: var(--app-grad);
    color: #fff !important;
  }
  .bottom-nav a.active .bn-ico { transform: scale(1.05); }
  .bottom-nav a .bn-ico { transition: transform .18s; }

  /* ---------------- Modals as proper bottom-sheets ---------------- */
  .modal-backdrop { background: rgba(15, 23, 42, .55); }
  .modal {
    border-radius: 22px 22px 0 0 !important;
    padding: .65rem 1.1rem 1.4rem !important;
    max-height: 92vh !important;
    box-shadow: 0 -8px 32px rgba(15, 23, 42, .25) !important;
  }
  .modal::before {
    content: "";
    display: block;
    width: 38px; height: 4px;
    margin: .4rem auto .85rem;
    background: #cbd5e1;
    border-radius: 999px;
  }
  .modal-head { padding-top: 0; padding-bottom: .5rem; border-bottom: 1px solid #f1f5f9; margin-bottom: .85rem; }
  .modal-head h3 { font-size: 1.1rem; font-weight: 600; }

  /* Forms — bigger touch targets (text inputs only — leave radio/checkbox/file alone) */
  input:not([type=radio]):not([type=checkbox]):not([type=file]):not([type=range]):not([type=color]),
  select, textarea {
    font-size: 16px !important;
    padding: .75rem .85rem !important;
    border-radius: 12px !important;
    border: 1.5px solid #e5e7eb !important;
    background: #f9fafb !important;
  }
  input:not([type=radio]):not([type=checkbox]):not([type=file]):not([type=range]):not([type=color]):focus,
  select:focus, textarea:focus {
    border-color: var(--brand) !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, .15) !important;
  }
  /* Radios/checkboxes — keep them small native widgets */
  input[type=radio], input[type=checkbox] {
    width: auto !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
  }
  label { font-size: .82rem; font-weight: 500; color: #475569; margin-bottom: .3rem; }

  /* Buttons */
  .btn {
    border-radius: 12px !important;
    padding: .65rem 1rem !important;
    font-weight: 500;
    min-height: 44px;
  }
  .btn.primary {
    background: var(--app-grad) !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(99, 102, 241, .35);
  }
  .btn.primary:hover { box-shadow: 0 6px 16px rgba(99, 102, 241, .45); }
  .btn.icon { padding: .5rem !important; min-height: 40px; min-width: 40px; }

  /* FAB sits above the floating nav bar */
  .fab {
    bottom: calc(env(safe-area-inset-bottom, 0) + 90px) !important;
    width: 60px; height: 60px;
    box-shadow: 0 10px 28px rgba(236, 72, 153, .45) !important;
  }

  /* Pipeline horizontal-scroll cards */
  .pipeline { gap: .6rem; padding: .25rem 0 .75rem; scroll-snap-type: x mandatory; }
  .pipeline .stage {
    background: #fff !important; border-radius: var(--app-card-radius);
    padding: .85rem .8rem !important; box-shadow: 0 2px 6px rgba(15,23,42,.05);
    scroll-snap-align: start;
  }

  /* Kanban — full-width snap columns */
  .kanban {
    gap: .7rem; padding: .25rem 0 .85rem;
    scroll-snap-type: x mandatory;
  }
  .kanban .col {
    background: #fff; border-radius: var(--app-card-radius);
    box-shadow: 0 2px 6px rgba(15,23,42,.05);
    padding: .65rem; scroll-snap-align: start;
  }

  /* Toasts — float above bottom nav */
  .toast, .toast-stack { bottom: 110px !important; }

  /* Section card grouping for dashboards */
  .panel, .section, .grid-block {
    background: #fff;
    border-radius: var(--app-card-radius);
    padding: 1rem;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .05);
    margin-bottom: .85rem;
  }

  /* Loading + empty states */
  .loading, .empty-state {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--muted);
    font-size: .9rem;
  }

  /* Lists — convert tables to card-like rows where possible */
  table.cards-on-mobile { display: block; }
  table.cards-on-mobile thead { display: none; }
  table.cards-on-mobile tr {
    display: block; background: #fff; border-radius: var(--app-card-radius);
    margin-bottom: .55rem; padding: .85rem 1rem;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .05);
  }
  table.cards-on-mobile td {
    display: block; padding: .15rem 0; border: none !important;
  }

  /* Status-bar background — paint behind the gradient */
  body::before {
    content: "";
    position: fixed; top: 0; left: 0; right: 0;
    height: env(safe-area-inset-top, 0);
    background: #6366f1;
    z-index: 11;
  }

  /* Dialer specifically — make full-bleed and card-free on mobile */
  .dialer-shell { background: transparent; box-shadow: none; }
  .dialer-tabs {
    background: #fff; border-radius: var(--app-card-radius);
    margin-bottom: .85rem;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .05);
    border: none;
  }
  .dialer-tab { font-size: .85rem; padding: .9rem .25rem; border-bottom: none; }
  .dialer-tab.active {
    background: var(--brand-soft, #eef2ff); border-radius: var(--app-card-radius);
    border-bottom-color: transparent;
  }
  .dialer-body { padding: 0; }
  .hist-item {
    border: none !important; box-shadow: 0 2px 6px rgba(15, 23, 42, .04);
  }

  /* Reports — mobile-friendly chart wrappers */
  .chart-wrap {
    background: #fff; border-radius: var(--app-card-radius);
    padding: .85rem; box-shadow: 0 2px 6px rgba(15, 23, 42, .05);
    margin-bottom: .65rem;
  }
}

/* Status-bar overlay for the Capacitor webview specifically */
@supports (padding: max(0px)) {
  @media (max-width: 780px) {
    .topbar { padding-top: max(env(safe-area-inset-top, 0), .85rem); }
  }
}

/* ---------------- After-call recording status ---------------- */
.modal-rec-status {
  background: var(--bg-alt, #f8fafc);
  border-radius: 12px;
  padding: .65rem .85rem;
  margin: .85rem 0;
  font-size: .9rem;
}
.modal-rec-status .rec-spinner {
  display: inline-block;
  margin-right: .4rem;
  animation: spin 1.4s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.rec-status-row { display: flex; align-items: center; gap: .35rem; }
.rec-status-row.ok { color: #059669; font-weight: 500; }
.rec-status-row.warn { color: #b45309; font-size: .82rem; line-height: 1.4; }

/* Settings toggle */
.toggle-row {
  display: flex; align-items: center; gap: .65rem;
  padding: .6rem .15rem; cursor: pointer; font-size: .9rem;
}
.toggle-row input[type=checkbox] {
  width: 18px; height: 18px; accent-color: var(--brand, #6366f1);
}

/* ---------------- Refresh button ---------------- */
#btn-refresh-leads.spinning {
  animation: spin-360 .8s linear infinite;
  pointer-events: none;
  opacity: .7;
}
@keyframes spin-360 { to { transform: rotate(360deg); } }

/* ---------------- New-lead popup ---------------- */
.popup-new-lead .modal {
  border-top: 4px solid #10b981;
  max-width: 480px;
}
.popup-new-lead .modal-head h3 {
  color: #10b981;
}
.new-lead-list {
  list-style: none; padding: 0; margin: .5rem 0 1rem;
  max-height: 380px; overflow-y: auto;
}
.new-lead-list li {
  padding: .65rem 0; border-bottom: 1px solid #f1f5f9;
}
.new-lead-list li:last-child { border-bottom: none; }
.new-lead-row {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
}
.nl-meta { flex: 1; min-width: 0; line-height: 1.4; }
.nl-meta .muted { font-size: .82rem; }

@media (max-width: 780px) {
  .popup-new-lead .modal {
    border-top-left-radius: 22px;
    border-top-right-radius: 22px;
  }
}

/* ---------------- Bulk upload modal — assignment mode picker ---------------- */
.assign-mode-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: .5rem !important;
  margin: .5rem 0 .85rem !important;
}
.assign-mode-card {
  display: grid !important;
  grid-template-columns: 32px 1fr !important;
  gap: .55rem !important;
  align-items: center !important;
  text-align: left !important;
  width: 100% !important;
  min-height: auto !important;
  padding: .7rem .85rem !important;
  border: 2px solid #e5e7eb !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: #0f172a !important;
  cursor: pointer !important;
  font: inherit !important;
  transition: border-color .15s, background .15s;
  box-shadow: none !important;
}
.assign-mode-card:hover {
  border-color: #6366f1 !important;
  background: #eef2ff !important;
}
.assign-mode-card.active {
  border-color: #6366f1 !important;
  background: #eef2ff !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .12) !important;
}
.amc-icon {
  font-size: 1.5rem !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
.amc-content {
  display: block !important;
  min-width: 0 !important;
}
.amc-title {
  display: block !important;
  font-weight: 600 !important;
  font-size: .9rem !important;
  line-height: 1.2 !important;
  color: #0f172a !important;
}
.amc-desc {
  display: block !important;
  font-size: .78rem !important;
  color: #64748b !important;
  margin-top: .2rem !important;
  line-height: 1.35 !important;
  font-weight: 400 !important;
}

.assign-mode-body {
  background: var(--bg-alt, #f8fafc);
  border-radius: 12px;
  padding: .85rem 1rem;
  margin-bottom: .85rem;
}
.assign-mode-body label { display: block; font-size: .85rem; font-weight: 500; margin-bottom: .35rem; color: #475569; }
.assign-single-input { width: 100%; }

.assign-rr-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .35rem .65rem;
  max-height: 220px; overflow-y: auto;
  padding: .25rem 0;
}
.assign-rr-check {
  display: flex; align-items: center; gap: .35rem;
  font-weight: 400; font-size: .9rem; cursor: pointer; padding: .2rem 0;
}
.assign-rr-check input[type=checkbox] { accent-color: var(--brand, #6366f1); }

.assign-pct-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .35rem;
  max-height: 220px; overflow-y: auto;
  padding: .25rem 0;
}
.assign-pct-row { display: flex; align-items: center; gap: .5rem; }
.assign-pct-name { flex: 1; font-weight: 400; font-size: .9rem; margin: 0; }
.assign-pct-input { width: 80px; text-align: right; }
.assign-pct-total { font-weight: 600; padding-top: .35rem; border-top: 1px dashed var(--border, #e5e7eb); margin-top: .4rem; }
.assign-pct-total.ok { color: #059669; }
.assign-pct-total.warn { color: #b45309; }

.assign-preview-wrap { background: var(--bg-card, #fff); border-radius: 12px; padding: .25rem 0; }
.assign-preview { font-size: .9rem; }
.assign-preview .muted.warn { color: #b45309; font-weight: 500; }
.preview-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .25rem .85rem; }

@media (max-width: 780px) {
  .assign-mode-grid { grid-template-columns: 1fr; }
  .assign-rr-grid { grid-template-columns: 1fr; }
  .preview-grid { grid-template-columns: 1fr; }
}

/* ---------------- Bulk upload modal — fixes for mobile + scrolling ---------------- */
/* Make the bulk upload modal scrollable so the Import button is always reachable */
.modal.modal-lg {
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  overflow-y: auto;             /* was: overflow: hidden — that clipped scrollable content */
  scrollbar-gutter: stable;
}
.modal.modal-lg > .modal-head {
  flex-shrink: 0;
  position: sticky; top: 0;
  background: #fff; z-index: 3;
  margin: -1.25rem -1.25rem 1rem;
  padding: 1rem 1.25rem .75rem;
  border-bottom: 1px solid var(--border-light);
}
.modal.modal-lg > .actions {
  flex-shrink: 0;
  position: sticky; bottom: 0;
  background: #fff; z-index: 3;
  margin: 1rem -1.25rem -1.25rem;
  padding: .85rem 1.25rem;
  border-top: 1px solid #f1f5f9;
  box-shadow: 0 -4px 8px rgba(15,23,42,.04);
}
.modal.modal-lg > *:not(.modal-head):not(.actions) { flex: 0 0 auto; }

/* Conditional Options field for custom-column form — chip preview */
.cf-opts-help { font-size: .75rem; color: var(--muted); margin: .25rem 0 0; }
.cf-opts-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin: .35rem 0 0; min-height: 1.4rem; }
.cf-opts-chip {
  background: var(--brand-soft); color: var(--brand);
  font-size: .72rem; padding: .2rem .55rem; border-radius: 999px;
  border: 1px solid #d0d3f9;
}

/* Facebook integration admin page */
.fb-admin .card { margin-bottom: 1rem; }
.fb-trio {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .5rem;
  margin-top: .25rem;
}
@media (max-width: 700px) { .fb-trio { grid-template-columns: 1fr; } }
.fb-pages td { vertical-align: middle; }
.fb-pages .btn.danger {
  background: #ef4444; color: #fff; border-color: #ef4444;
}
.fb-pages .btn.danger:hover { filter: brightness(0.95); }

/* Password reset block inside the user-edit modal */
.pwd-reset-block {
  margin-top: 1.25rem; padding: 1rem 1.1rem;
  background: var(--bg-alt); border: 1px solid var(--border-light);
  border-radius: var(--radius); border-left: 4px solid var(--warn, #f59e0b);
}
.pwd-reset-block h4 {
  margin: 0 0 .35rem; font-size: 1rem; color: var(--brand-dark, #1B233A);
}
.pwd-reset-row {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  margin-top: .65rem;
}
.pwd-reset-row input {
  flex: 1 1 220px; min-width: 180px;
  padding: .55rem .75rem;
  border: 1.5px solid var(--border-light); border-radius: 8px;
  font-size: .9rem;
}
.pwd-reset-row .btn { flex: 0 0 auto; }
.pwd-reset-row .btn.warn {
  background: var(--warn, #f59e0b); color: #fff; border-color: var(--warn, #f59e0b);
}
.pwd-reset-row .btn.warn:hover { filter: brightness(0.95); }

.pwd-reset-result {
  margin-top: .85rem; padding: .85rem 1rem;
  background: #ecfdf5; border: 1px solid #a7f3d0;
  border-radius: 8px;
}
.pwd-reveal-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
}
.pwd-reveal {
  font-family: "SF Mono", Consolas, Monaco, monospace;
  font-size: 1rem; font-weight: 700; color: #065f46;
  background: #fff; padding: .35rem .65rem;
  border: 1px dashed #10b981; border-radius: 6px;
  user-select: all;
  letter-spacing: 0.5px;
}

/* Multiselect rendered as a checkbox grid (replaces native <select multiple>) */
.cf-multi-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: .35rem; padding: .5rem .65rem;
  border: 1px solid var(--border-light); border-radius: var(--radius-sm);
  background: var(--bg-alt); max-height: 180px; overflow-y: auto;
}
.cf-multi-grid label {
  display: flex; align-items: center; gap: .4rem;
  padding: .25rem .35rem; border-radius: 6px;
  font-size: .85rem; cursor: pointer;
}
.cf-multi-grid label:hover { background: #fff; }
.cf-multi-grid input[type=checkbox] { margin: 0; }

/* Inactive mode body — bulletproof hide */
.assign-mode-body[hidden] { display: none !important; }

/* Tighten on mobile so all 4 cards + a body fit comfortably */
@media (max-width: 780px) {
  .modal.modal-lg {
    max-height: 92vh !important;
    overflow-y: auto !important;
  }
  .modal.modal-lg .actions {
    position: sticky; bottom: 0; background: #fff;
    box-shadow: 0 -4px 8px rgba(0,0,0,.04);
    margin-left: -1.1rem; margin-right: -1.1rem;
    padding-left: 1.1rem; padding-right: 1.1rem;
  }
  .assign-mode-grid { grid-template-columns: 1fr 1fr; gap: .35rem; }
  .assign-mode-card { padding: .55rem .6rem; }
  .assign-mode-title { font-size: .82rem; }
  .assign-mode-desc { font-size: .72rem; }
  .assign-mode-body { padding: .65rem .75rem; }
  .assign-rr-grid { grid-template-columns: 1fr; max-height: 180px; }
  .assign-pct-grid { max-height: 200px; }
  .preview-grid { grid-template-columns: 1fr; }
}

/* ---------------- Leads pagination bar ---------------- */
.pagination-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .65rem .25rem;
  margin-top: .25rem;
  flex-wrap: wrap;
}
.pagination-bar:empty { display: none; }
.pagination-left { display: flex; align-items: center; gap: .5rem; }
.page-size-sel { min-width: 130px; }
.pagination-info { font-size: .85rem; }
.pagination-nav { display: flex; gap: .25rem; flex-wrap: wrap; }
.pagination-nav .btn.sm { min-width: 38px; padding: .35rem .55rem !important; }
.pagination-nav .btn.sm[disabled] { opacity: .35; cursor: not-allowed; }
.pagination-nav .btn.sm.primary {
  background: var(--brand, #6366f1) !important;
  color: #fff !important;
  border-color: var(--brand, #6366f1) !important;
}

@media (max-width: 780px) {
  .pagination-bar {
    flex-direction: column;
    align-items: stretch;
    background: #fff;
    border-radius: var(--app-card-radius, 14px);
    padding: .75rem .85rem;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .05);
    margin-top: .5rem;
  }
  .pagination-left { justify-content: center; }
  .pagination-info { text-align: center; }
  .pagination-nav { justify-content: center; }
  .pagination-nav .btn.sm:nth-child(1),
  .pagination-nav .btn.sm:nth-last-child(1) { display: none; } /* hide First/Last on phones */
}

/* ============================================================
   Global API loader — top progress bar
   ============================================================ */
#global-loader {
  position: fixed; top: 0; left: 0; right: 0;
  height: 3px;
  background: transparent;
  z-index: 100000;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s;
}
#global-loader.active { opacity: 1; }
#global-loader .gl-fill {
  height: 100%;
  width: 30%;
  background: linear-gradient(90deg, transparent, var(--brand, #6366f1), var(--accent, #ec4899), transparent);
  animation: gl-slide 1.1s ease-in-out infinite;
}
@keyframes gl-slide {
  0%   { margin-left: -30%; width: 30%; }
  50%  { margin-left: 35%;  width: 40%; }
  100% { margin-left: 110%; width: 30%; }
}

/* Sit just below the gradient topbar on mobile so it's visible */
@media (max-width: 780px) {
  #global-loader {
    top: env(safe-area-inset-top, 0);
  }
}

/* ============================================================
   Brand identity card (Settings → Company)
   ============================================================ */
.brand-card { padding: 1.25rem 1.5rem; }
.brand-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 1.25rem;
  margin-top: .85rem;
  align-items: flex-start;
}
.brand-logo-col, .brand-name-col { min-width: 0; }
.brand-logo-preview {
  width: 200px; height: 200px;
  background: var(--bg-alt, #f8fafc);
  border: 2px dashed var(--border, #e5e7eb);
  border-radius: var(--radius-lg, 14px);
  display: grid; place-items: center;
  margin-bottom: .65rem;
  overflow: hidden;
}
.brand-logo-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.brand-fallback { font-size: 4rem; opacity: .35; }
.brand-upload-btn { display: inline-flex; align-items: center; cursor: pointer; }

.brand-advanced {
  margin-top: 1rem; padding: 1rem 1.25rem; background: var(--bg-alt, #f8fafc);
  border: 1px solid var(--border, #e5e7eb); border-radius: var(--radius, 10px);
}
.brand-advanced summary { font-weight: 500; cursor: pointer; user-select: none; }
.brand-advanced summary:hover { color: var(--brand, #6366f1); }

@media (max-width: 780px) {
  .brand-row { grid-template-columns: 1fr; }
  .brand-logo-preview { width: 160px; height: 160px; margin: 0 auto .65rem; }
  .brand-logo-col { text-align: center; }
}

/* ============================================================
   Defensive: prevent any rogue horizontal scroll on phones
   ============================================================ */
@media (max-width: 780px) {
  html, body { overflow-x: hidden !important; max-width: 100vw; }
  .shell, .main, #view { max-width: 100vw; }
  /* Tables/scrollers must contain their own horizontal scrollbar */
  .table-wrap, .pipeline, .kanban {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Forms must not overflow */
  input, select, textarea, .btn { max-width: 100%; }
  pre, code { max-width: 100%; overflow-x: auto; word-break: break-word; }
  /* Modal can never exceed viewport */
  .modal-backdrop { padding: 0 !important; }
  .modal { max-width: 100vw; box-sizing: border-box; }
}

/* ============================================================
   Login screen — proper field spacing
   ============================================================ */
#login-form { display: flex; flex-direction: column; gap: 0; }
#login-form label {
  display: block;
  margin: .85rem 0 .35rem;
  font-size: .85rem; font-weight: 500;
  color: #475569;
}
#login-form label:first-child { margin-top: 0; }
#login-form input[type=email],
#login-form input[type=password] {
  width: 100%;
  margin-bottom: 0;
}
#login-form button[type=submit] {
  margin-top: 1.5rem;
  padding: .9rem 1rem !important;
  font-size: 1rem !important;
  font-weight: 600;
  height: auto;
}
#login-form .error {
  margin: .75rem 0 0;
  color: var(--err, #ef4444);
  font-size: .85rem;
  text-align: center;
  min-height: 1.2em;
}
.login-card { padding: 2rem 1.75rem !important; }
.login-brand { margin-bottom: 1.5rem !important; }

@media (max-width: 780px) {
  .login-card { padding: 1.75rem 1.4rem !important; }
  #login-form button[type=submit] { margin-top: 1.4rem; padding: 1rem !important; }
  #login-form label { margin-top: 1rem; }
}

/* ============================================================
   Dashboard — single-column on phones so all reports are visible
   ============================================================ */
@media (max-width: 780px) {
  /* KPI cards: 2 per row */
  .cards { grid-template-columns: 1fr 1fr !important; gap: .65rem !important; }
  .card.stat { padding: .85rem !important; }
  .card.stat .stat-icon { font-size: 1.3rem; opacity: .7; }
  .card.stat .stat-value { font-size: 1.5rem !important; font-weight: 700; }
  .card.stat .stat-label { font-size: .72rem !important; }

  /* Dashboard charts/lists: stack one-per-row so each one is fully visible */
  .dash-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: .75rem !important;
    margin-top: .85rem;
  }
  .dash-grid > .card,
  .dash-grid > .card.card-wide {
    width: 100% !important;
    grid-column: auto !important;
    margin: 0 !important;
  }

  /* Chart canvases — fixed-height container so charts don't collapse */
  .chart-wrap {
    width: 100% !important;
    min-height: 220px;
    max-height: 280px;
    position: relative;
  }
  .chart-wrap canvas {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
  }

  /* Upcoming follow-ups list cards — readable on phones */
  .fu-dash-list { padding: 0; margin: 0; list-style: none; }
  .fu-dash-list li {
    padding: .65rem .75rem;
    background: var(--bg-alt, #f8fafc);
    border-radius: 10px;
    margin-bottom: .4rem;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .25rem .75rem;
    align-items: center;
  }
  .fu-dash-list .fu-name { font-weight: 600; cursor: pointer; }
  .fu-dash-list .fu-phone { font-size: .8rem; grid-column: 1; }
  .fu-dash-list .fu-due {
    grid-column: 2; grid-row: 1 / 3;
    font-size: .78rem; align-self: center; text-align: right;
  }
  .fu-dash-list .fu-due.overdue { color: var(--err, #ef4444); font-weight: 600; }
}

/* ============================================================
   Reports view — make charts stack on phones too
   ============================================================ */
@media (max-width: 780px) {
  .reports-grid {
    grid-template-columns: 1fr !important;
    gap: .75rem;
  }
  .reports-grid > .card,
  .reports-grid > .card.card-wide {
    grid-column: auto !important;
  }
}

/* ---------------- CSV/XLSX upload — preview table ---------------- */
.csv-preview {
  margin-top: .65rem;
  background: var(--bg-alt, #f8fafc);
  border-radius: 10px;
  padding: .65rem .75rem;
  max-height: 240px;
  overflow: auto;
}
.csv-preview-table {
  width: max-content;
  min-width: 100%;
  font-size: .78rem;
}
.csv-preview-table th {
  background: var(--brand, #6366f1);
  color: #fff;
  padding: .35rem .55rem;
  font-weight: 500;
  text-transform: lowercase;
  white-space: nowrap;
}
.csv-preview-table td {
  padding: .3rem .55rem;
  border-bottom: 1px solid var(--border, #e5e7eb);
  white-space: nowrap;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 780px) {
  .csv-preview { max-height: 180px; }
  .csv-preview-table { font-size: .72rem; }
}

/* ============================================================
   Fix #1: Mobile-menu sheet — admin name + email need to be readable
   (was greyed out)
   ============================================================ */
@media (max-width: 780px) {
  .bottom-nav-more-modal .me {
    background: var(--bg-alt, #f8fafc);
    border-radius: 12px;
    padding: .75rem .85rem !important;
    margin-bottom: .85rem;
  }
  .bottom-nav-more-modal .me .name {
    color: var(--text, #0f172a) !important;
    font-weight: 700;
    font-size: 1rem;
  }
  .bottom-nav-more-modal .me .role {
    color: var(--text-soft, #475569) !important;
    font-size: .82rem;
    text-transform: capitalize;
  }
  .bottom-nav-more-modal .me .role.muted {
    color: var(--text-soft, #475569) !important;
  }
  .bottom-nav-more-modal .me .avatar {
    width: 42px; height: 42px;
    font-size: 1rem;
    flex-shrink: 0;
  }
}

/* ============================================================
   Fix #2: Toolbar dropdowns (Any status / source / assignee / followups)
   were ugly bare boxes — give them proper theming
   ============================================================ */
.toolbar select,
.toolbar input {
  background: #fff !important;
  border: 1.5px solid var(--border, #e5e7eb) !important;
  border-radius: 10px !important;
  padding: .55rem .75rem !important;
  font-size: .9rem !important;
  color: var(--text, #0f172a) !important;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
  /* Custom chevron — replaces the boring native arrow */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%236366f1' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right .75rem center !important;
  padding-right: 2rem !important;
}
.toolbar input { background-image: none !important; padding-right: .75rem !important; }
.toolbar select:focus,
.toolbar input:focus {
  outline: none;
  border-color: var(--brand, #6366f1) !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .12) !important;
}
.toolbar select:hover {
  border-color: var(--brand, #6366f1) !important;
}

@media (max-width: 780px) {
  .toolbar {
    background: #fff;
    border-radius: 14px;
    padding: .75rem !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .05);
    margin-bottom: .65rem;
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
  }
  .toolbar input.flex {
    grid-column: 1 / -1;
  }
  .toolbar select {
    width: 100% !important;
    min-width: 0 !important;
  }
  /* Action buttons in the toolbar — make them a proper row */
  .toolbar > .btn {
    grid-column: span 1;
    padding: .5rem !important;
    min-height: 40px;
  }
  .toolbar > .btn.primary {
    grid-column: 1 / -1;
    margin-top: .25rem;
  }
}

/* ============================================================
   Fix #3: Follow-ups upcoming table — was cramped, missing padding
   On mobile we re-render rows as cards (not a table)
   ============================================================ */
@media (max-width: 780px) {
  /* Make follow-ups cards properly padded */
  #view > .card {
    padding: 1rem 1.1rem !important;
    margin-bottom: .85rem;
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .05);
    background: #fff;
  }
  #view > .card h3 {
    margin: 0 0 .65rem;
    font-size: 1rem;
    display: flex; align-items: center; gap: .4rem;
  }
  #view > .card h3 .chip-count {
    margin-left: auto;
    background: var(--bg-alt, #f1f5f9);
  }

  /* Convert the follow-ups <table> into card-style rows */
  #view > .card .table-wrap { overflow-x: visible; border-radius: 0; }
  #view > .card table { display: block; }
  #view > .card table thead { display: none; }
  #view > .card table tbody { display: block; }
  #view > .card table tr {
    display: grid !important;
    grid-template-columns: 1fr auto;
    gap: .25rem .65rem;
    padding: .75rem .85rem !important;
    background: var(--bg-alt, #f8fafc);
    border-radius: 10px;
    margin-bottom: .5rem;
    border-bottom: none !important;
  }
  #view > .card table tr:last-child { margin-bottom: 0; }
  #view > .card table td {
    display: block !important;
    padding: 0 !important;
    border: none !important;
    font-size: .9rem;
  }
  /* td order: Lead, Phone, Due, Note, action */
  #view > .card table td:nth-child(1) {
    font-weight: 600;
    color: var(--text, #0f172a);
    grid-column: 1;
  }
  #view > .card table td:nth-child(2) {
    color: var(--text-soft, #475569);
    font-size: .82rem;
    grid-column: 1;
    grid-row: 2;
  }
  #view > .card table td:nth-child(3) {
    color: var(--brand, #6366f1);
    font-size: .8rem;
    grid-column: 1;
    grid-row: 3;
  }
  #view > .card table td:nth-child(3).overdue {
    color: var(--err, #ef4444);
    font-weight: 600;
  }
  #view > .card table td:nth-child(4) {
    color: var(--muted, #94a3b8);
    font-size: .82rem;
    grid-column: 1;
    grid-row: 4;
  }
  #view > .card table td:nth-child(4):empty { display: none !important; }
  #view > .card table td:nth-child(5) {
    grid-column: 2;
    grid-row: 1 / 5;
    align-self: center;
  }
  #view > .card table td:nth-child(5) .btn.sm {
    background: var(--ok, #10b981) !important;
    color: #fff !important;
    border: none !important;
    padding: .45rem .75rem !important;
    font-size: .8rem !important;
    border-radius: 8px;
  }
}

/* Danger-ghost variant — used by the "Dedupe" button */
.btn.ghost.danger {
  color: var(--err, #ef4444) !important;
  border-color: transparent !important;
  background: transparent !important;
}
.btn.ghost.danger:hover {
  background: var(--err-soft, #fee2e2) !important;
  color: var(--err, #ef4444) !important;
}

/* CSV upload warning panel */
.csv-warn-list { display: flex; flex-direction: column; gap: .35rem; margin-bottom: .5rem; }
.csv-warn {
  display: flex; gap: .55rem; align-items: flex-start;
  padding: .6rem .8rem; border-radius: 8px;
  font-size: .82rem; line-height: 1.4;
}
.csv-warn.warn { background: #fef3c7; color: #92400e; border-left: 3px solid #f59e0b; }
.csv-warn.ok   { background: #d1fae5; color: #065f46; border-left: 3px solid #10b981; }
.csv-warn-ico { flex-shrink: 0; font-size: 1rem; line-height: 1.4; }