/* ── Variables ─────────────────────────────────────────────────── */
:root {
  --primary:        #5b4cf5;
  --primary-dark:   #4839d4;
  --primary-light:  #eeecff;
  --primary-mid:    #7c6ff7;
  --success:        #12a05c;
  --success-light:  #f0fdf6;
  --warning:        #c97a0a;
  --warning-light:  #fffbeb;
  --danger:         #d63b3b;
  --danger-light:   #fef2f2;
  --info:           #0284c7;
  --info-light:     #e0f2fe;
  --surface:        #ffffff;
  --surface-2:      #fafafa;
  --bg:             #f4f5f8;
  --border:         #e8e9ed;
  --border-strong:  #d5d7de;
  --text:           #0f1117;
  --text-2:         #3d4152;
  --muted:          #717589;
  --radius:         14px;
  --radius-sm:      9px;
  --radius-xs:      6px;
  --shadow-sm:      0 1px 2px rgba(15,17,23,.05), 0 0 0 1px rgba(15,17,23,.04);
  --shadow:         0 2px 8px rgba(15,17,23,.07), 0 0 0 1px rgba(15,17,23,.04);
  --shadow-lg:      0 8px 32px rgba(15,17,23,.13);
  --nav-h:          62px;
  --font:           'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
}

/* ── Reset & Base ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; }
body { font-family: var(--font); background: var(--bg); color: var(--text); line-height: 1.6; min-height: 100vh; overflow-x: hidden; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: none; }
button { cursor: pointer; font-family: inherit; }
img { max-width: 100%; }

/* ── Navigation ────────────────────────────────────────────────── */
.top-nav {
  position: sticky; top: 0; z-index: 200;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  height: var(--nav-h);
}
.nav-inner {
  max-width: 1280px; margin: 0 auto;
  height: 100%; display: flex; align-items: center;
  justify-content: space-between; padding: 0 24px;
}
.brand {
  font-weight: 800; font-size: 1.05rem; color: var(--text);
  display: flex; align-items: center; gap: 9px; text-decoration: none;
  letter-spacing: -.02em;
}
.brand img { width: 28px; height: 28px; border-radius: 8px; object-fit: contain; }
.brand:hover { color: var(--primary); text-decoration: none; }
.nav-actions { display: flex; align-items: center; gap: 6px; }
.btn-nav {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 13px; border-radius: var(--radius-sm);
  font-size: .82rem; font-weight: 600; color: var(--muted);
  border: 1px solid transparent; background: transparent;
  text-decoration: none; transition: all .15s; letter-spacing: -.01em;
}
.btn-nav:hover { background: var(--bg); color: var(--text); text-decoration: none; }
.btn-nav.active { color: var(--primary); background: var(--primary-light); border-color: transparent; }

/* ── Buttons ───────────────────────────────────────────────────── */
.btn-primary-sm {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 16px; border-radius: var(--radius-sm);
  background: var(--primary); color: #fff;
  font-size: .82rem; font-weight: 700; letter-spacing: -.01em;
  border: none; text-decoration: none; transition: all .15s;
  white-space: nowrap; box-shadow: 0 1px 3px rgba(91,76,245,.3);
}
.btn-primary-sm:hover { background: var(--primary-dark); color: #fff; text-decoration: none; box-shadow: 0 2px 8px rgba(91,76,245,.35); transform: translateY(-1px); }

.btn-save {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 24px; border-radius: var(--radius-sm);
  background: var(--primary); color: #fff;
  font-size: .875rem; font-weight: 700; letter-spacing: -.01em;
  border: none; transition: all .15s;
  box-shadow: 0 1px 3px rgba(91,76,245,.3);
}
.btn-save:hover { background: var(--primary-dark); box-shadow: 0 2px 8px rgba(91,76,245,.35); transform: translateY(-1px); }
.btn-save:disabled { opacity: .6; transform: none; }

.btn-cancel {
  display: inline-flex; align-items: center; padding: 10px 18px;
  border-radius: var(--radius-sm); color: var(--muted);
  font-size: .875rem; font-weight: 500; text-decoration: none; transition: color .15s;
}
.btn-cancel:hover { color: var(--text); text-decoration: none; }

.btn-outline {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text-2); font-size: .82rem; font-weight: 600;
  text-decoration: none; transition: all .15s; letter-spacing: -.01em;
}
.btn-outline:hover { background: var(--bg); border-color: var(--border-strong); text-decoration: none; }

.btn-ghost {
  padding: 8px 16px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text-2); font-size: .85rem; font-weight: 500;
  transition: all .15s; letter-spacing: -.01em;
}
.btn-ghost:hover { background: var(--bg); border-color: var(--border-strong); }

.btn-danger-sm {
  padding: 8px 16px; border-radius: var(--radius-sm);
  background: var(--danger); color: #fff;
  font-size: .85rem; font-weight: 700;
  border: none; transition: background .15s;
}
.btn-danger-sm:hover { background: #b83030; }

.btn-danger-outline {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: var(--radius-sm);
  border: 1px solid #f5b8b8; background: transparent;
  color: var(--danger); font-size: .82rem; font-weight: 600;
  transition: all .15s;
}
.btn-danger-outline:hover { background: var(--danger-light); }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: var(--radius-xs);
  border: 1px solid var(--border); background: var(--surface);
  color: var(--muted); font-size: .85rem; transition: all .15s; flex-shrink: 0;
}
.icon-btn:hover { background: var(--bg); color: var(--text); border-color: var(--border-strong); }
.icon-btn.text-danger { color: var(--danger); border-color: #f5b8b8; }
.icon-btn.text-danger:hover { background: var(--danger-light); }
.icon-btn-sm { width: 26px; height: 26px; font-size: .78rem; }

/* ── Page Wrap ─────────────────────────────────────────────────── */
.page-wrap { max-width: 1280px; margin: 0 auto; padding: 24px 24px 100px; }
.page-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; }
.page-title { font-size: 1.4rem; font-weight: 800; line-height: 1.2; letter-spacing: -.03em; }
.page-sub { color: var(--muted); font-size: .84rem; margin-top: 3px; }

/* ── Dashboard Stat Grid ───────────────────────────────────────── */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  display: flex; align-items: center; gap: 14px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .15s, transform .15s;
}
.stat-card:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.stat-icon {
  width: 42px; height: 42px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; flex-shrink: 0;
}
.stat-icon-blue    { background: #dbeafe; color: #1d4ed8; }
.stat-icon-purple  { background: var(--primary-light); color: var(--primary); }
.stat-icon-green   { background: #dcfce7; color: #15803d; }
.stat-icon-red     { background: #fee2e2; color: #b91c1c; }
.stat-icon-orange  { background: #fef3c7; color: #d97706; }
.stat-icon-teal    { background: #ccfbf1; color: #0f766e; }
.stat-body { min-width: 0; }
.stat-value { font-size: 1.4rem; font-weight: 800; line-height: 1.1; letter-spacing: -.03em; color: var(--text); }
.stat-label { font-size: .72rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; line-height: 1.25; }

/* ── Revenue Grid ──────────────────────────────────────────────── */
.revenue-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
.rev-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  display: flex; align-items: center; gap: 14px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .15s;
}
.rev-card:hover { box-shadow: var(--shadow); }
.rev-card-icon {
  width: 44px; height: 44px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; flex-shrink: 0;
}
.rev-card-value  .rev-card-icon  { background: var(--primary-light); color: var(--primary); }
.rev-card-received .rev-card-icon { background: #dcfce7; color: #15803d; }
.rev-card-balance  .rev-card-icon { background: #fef3c7; color: #d97706; }
.rev-card-body { min-width: 0; }
.rev-card-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 3px; }
.rev-card-value { font-size: 1.25rem; font-weight: 800; letter-spacing: -.03em; color: var(--text); line-height: 1.2; }
.rev-card-received .rev-card-value { color: var(--success); }
.rev-card-balance  .rev-card-value { color: var(--danger); }

/* ── Search & Filters ──────────────────────────────────────────── */
.filter-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.search-wrap { position: relative; flex: 1 1 300px; }
.search-icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--muted); font-size: .85rem; pointer-events: none; z-index: 1;
}
.search-input {
  width: 100%; padding: 10px 36px 10px 36px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); font-size: .875rem; color: var(--text);
  font-family: var(--font); outline: none; transition: all .15s;
  box-shadow: var(--shadow-sm);
}
.search-input::placeholder { color: var(--muted); }
.search-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(91,76,245,.1); }
.clear-search {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--muted); font-size: 1rem;
  display: flex; align-items: center; padding: 4px;
}
.clear-search:hover { color: var(--text); }
.filter-dropdowns { display: flex; gap: 6px; flex-wrap: wrap; }
/* .filter-select — Tom Select hides the original <select> itself; keep unstyled */

/* ── Status Tabs ───────────────────────────────────────────────── */
.status-tabs {
  display: flex; gap: 2px; flex-wrap: nowrap; overflow-x: auto;
  margin-bottom: 20px; border-bottom: 1px solid var(--border);
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.status-tabs::-webkit-scrollbar { display: none; }
.status-tab {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 14px 10px; border: none; background: none;
  font-size: .82rem; font-weight: 700; color: var(--muted);
  letter-spacing: -.01em; white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: all .15s; border-radius: var(--radius-xs) var(--radius-xs) 0 0;
  font-family: var(--font); flex-shrink: 0;
}
.status-tab:hover { color: var(--text-2); }
.status-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.tab-count {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--border); color: var(--muted); font-size: .68rem;
  border-radius: 999px; min-width: 18px; padding: 1px 5px; font-weight: 800;
}
.status-tab.active .tab-count { background: var(--primary-light); color: var(--primary); }

/* ── Lead List ─────────────────────────────────────────────────── */
.lead-list { display: flex; flex-direction: column; gap: 8px; }
.lead-list-loading { text-align: center; padding: 40px; color: var(--muted); }

/* ── Lead Card ─────────────────────────────────────────────────── */
.lead-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .15s, border-color .15s;
}
.lead-card:hover { box-shadow: var(--shadow); border-color: var(--border-strong); }
.lc-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px; margin-bottom: 12px; flex-wrap: wrap;
}
.lc-title-group { flex: 1; min-width: 0; }
.lc-name {
  display: block; font-size: .975rem; font-weight: 800; color: var(--text);
  text-decoration: none; line-height: 1.3; letter-spacing: -.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lc-name:hover { color: var(--primary); }
.lc-project-type {
  display: inline-block; margin-top: 2px;
  font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted);
}
.lc-badges { display: flex; gap: 4px; flex-shrink: 0; flex-wrap: wrap; align-items: flex-start; }

/* ── Lead card info grid ───────────────────────────────────────── */
.lc-info-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px 16px; margin-bottom: 12px;
}
.lc-info-item {
  display: flex; flex-direction: column; gap: 2px;
}
.lc-info-label {
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted); display: flex; align-items: center; gap: 4px;
}
.lc-text { font-size: .84rem; color: var(--text-2); font-weight: 500; }

.lc-actions {
  display: flex; gap: 5px; padding-top: 12px;
  border-top: 1px solid var(--border); flex-wrap: wrap;
}
.lca-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 11px; border-radius: var(--radius-xs);
  border: 1px solid var(--border); background: transparent;
  color: var(--muted); font-size: .78rem; font-weight: 700;
  text-decoration: none; transition: all .15s; letter-spacing: -.01em;
  font-family: var(--font);
}
.lca-btn:hover { background: var(--bg); color: var(--text); border-color: var(--border-strong); text-decoration: none; }
.lca-btn.danger { color: var(--danger); border-color: #f5b8b8; }
.lca-btn.danger:hover { background: var(--danger-light); }

/* ── Phone group ───────────────────────────────────────────────── */
.phone-group { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.phone-num { font-size: .875rem; color: var(--primary); font-weight: 700; }
.phone-num:hover { text-decoration: underline; }

/* ── Follow-up dates ───────────────────────────────────────────── */
.followup-date { font-size: .835rem; font-weight: 600; color: var(--text-2); }
.followup-date.overdue { color: var(--danger); font-weight: 800; }
.followup-date.today { color: var(--warning); font-weight: 800; }

/* ── Badges ────────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center;
  padding: 3px 9px; border-radius: 999px;
  font-size: .7rem; font-weight: 800;
  line-height: 1.4; letter-spacing: .01em;
}
.badge-new        { background: #dbeafe; color: #1d4ed8; }
.badge-contacted  { background: #fef3c7; color: #92400e; }
.badge-interested { background: #ccfbf1; color: #0f766e; }
.badge-followup   { background: #ede9fe; color: #5b21b6; }
.badge-won        { background: #dcfce7; color: #15803d; }
.badge-lost       { background: #fee2e2; color: #b91c1c; }
.badge-high       { background: #fee2e2; color: #b91c1c; }
.badge-medium     { background: #fef3c7; color: #92400e; }
.badge-low        { background: #f1f5f9; color: #475569; }
.badge-source     { background: var(--bg); color: var(--muted); border: 1px solid var(--border); font-weight: 600; }

/* ── Empty State ───────────────────────────────────────────────── */
.empty-state { text-align: center; padding: 70px 20px; color: var(--muted); }
.empty-icon { font-size: 2.4rem; margin-bottom: 14px; color: #c8ccd8; }
.empty-state h5 { font-size: 1rem; font-weight: 800; color: var(--text-2); margin-bottom: 6px; letter-spacing: -.02em; }
.empty-state p { margin-bottom: 22px; font-size: .875rem; }

/* ── Form Page ─────────────────────────────────────────────────── */
.form-page { max-width: 820px; }
.form-page-header { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-bottom: 22px; }
.back-link { color: var(--muted); font-size: .82rem; display: flex; align-items: center; gap: 4px; font-weight: 600; transition: color .15s; }
.back-link:hover { color: var(--text-2); text-decoration: none; }
.form-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 22px 20px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
}
.section-title {
  font-size: .7rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .08em; color: var(--muted); margin-bottom: 18px;
  display: flex; align-items: center; gap: 8px;
}
.section-title i { color: var(--primary); font-size: .85rem; }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.field-group { display: flex; flex-direction: column; gap: 5px; }
.field-group.full { grid-column: 1 / -1; }
.field-label { font-size: .79rem; font-weight: 700; color: var(--text-2); letter-spacing: -.01em; }
.req { color: var(--danger); }
.field-input, .field-select, .field-textarea {
  width: 100%; padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: .875rem; color: var(--text);
  background: var(--surface); outline: none; transition: all .15s;
  font-family: var(--font); box-shadow: var(--shadow-sm);
  -webkit-appearance: none;
}
.field-input:focus, .field-select:focus, .field-textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(91,76,245,.1);
}
.field-input.is-invalid { border-color: var(--danger); }
.field-textarea { resize: vertical; min-height: 90px; line-height: 1.6; }
.field-select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23717589'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; padding-right: 28px;
}

/* ── Rupee input wrapper ───────────────────────────────────────── */
.rupee-input-wrap { position: relative; }
.rupee-prefix {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  color: var(--muted); font-weight: 700; font-size: .875rem; pointer-events: none; z-index: 1;
}
.rupee-input { padding-left: 24px; }

/* ── Sticky Save ───────────────────────────────────────────────── */
.sticky-save {
  position: sticky; bottom: 0;
  background: rgba(255,255,255,.97); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid var(--border);
  padding: 12px 0; display: flex; align-items: center; gap: 10px;
  z-index: 10; margin: 0 -24px; padding-left: 24px; padding-right: 24px;
}

/* ── View Page ─────────────────────────────────────────────────── */
.view-page { max-width: 980px; }
.view-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; margin-bottom: 22px; flex-wrap: wrap;
}
.view-actions { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; }
.view-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.view-bottom-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border);
}
.detail-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
  box-shadow: var(--shadow-sm);
}
.detail-row {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 9px 0; border-bottom: 1px solid var(--border); font-size: .86rem;
}
.detail-row:last-child { border-bottom: none; }
.detail-label { color: var(--muted); min-width: 110px; flex-shrink: 0; font-size: .78rem; font-weight: 700; padding-top: 1px; letter-spacing: -.01em; }
.detail-value { color: var(--text); flex: 1; word-break: break-word; font-weight: 500; }
.detail-notes-row { align-items: flex-start; }
.notes-text { white-space: pre-line; }
.detail-meta { grid-column: 1 / -1; padding: 14px 22px; }
.meta-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 5px 0; font-size: .79rem; color: var(--muted); font-weight: 500;
}
.meta-row:not(:last-child) { border-bottom: 1px solid var(--border); }

/* ── Money values ──────────────────────────────────────────────── */
.money-val { font-size: .875rem; font-weight: 800; color: var(--text); letter-spacing: -.01em; }
.money-val.received { color: var(--success); }
.money-val.balance  { color: var(--warning); }

/* ── Balance Display (form) ────────────────────────────────────── */
.balance-display {
  padding: 10px 14px; border-radius: var(--radius-sm);
  background: var(--bg); border: 1px solid var(--border);
  font-size: 1rem; font-weight: 800; color: var(--muted);
  letter-spacing: -.02em; min-height: 40px; display: flex; align-items: center;
}
.balance-display.pos  { color: var(--success); background: var(--success-light); border-color: #86efac; }
.balance-display.zero { color: var(--muted); }
.balance-display.neg  { color: var(--danger); background: var(--danger-light); border-color: #fca5a5; }

/* ── Custom Fields page ────────────────────────────────────────── */
.add-field-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.add-field-row .field-input { flex: 1; min-width: 180px; }
.add-field-type { width: auto; min-width: 120px; }

.field-list { list-style: none; padding: 0; margin: 0; }
.field-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px; border-bottom: 1px solid var(--border);
  transition: background .1s;
}
.field-item:last-child { border-bottom: none; }
.field-item:hover { background: var(--surface-2); }
.field-item.dragging { opacity: .5; background: var(--primary-light); }
.field-item-drag { color: #c8ccd8; cursor: grab; font-size: 1rem; flex-shrink: 0; }
.field-item-info { flex: 1; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.field-item-name { font-weight: 800; font-size: .85rem; letter-spacing: -.01em; }
.field-type-badge {
  display: inline-flex; padding: 2px 8px; border-radius: 999px;
  background: var(--bg); color: var(--muted);
  font-size: .68rem; font-weight: 800; letter-spacing: .02em;
  border: 1px solid var(--border);
}
.field-opts-preview { font-size: .75rem; color: var(--muted); }
.field-item-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.field-list-footer { padding: 10px 18px; background: var(--surface-2); border-radius: 0 0 var(--radius) var(--radius); }

/* ── Toggle Switch ─────────────────────────────────────────────── */
.toggle-switch { display: inline-flex; position: relative; cursor: pointer; }
.toggle-input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-slider {
  width: 36px; height: 20px; background: #d0d3de; border-radius: 999px;
  transition: background .2s; display: flex; align-items: center; padding: 2px;
}
.toggle-slider::after {
  content: ''; width: 16px; height: 16px; background: #fff;
  border-radius: 50%; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.toggle-input:checked + .toggle-slider { background: var(--primary); }
.toggle-input:checked + .toggle-slider::after { transform: translateX(16px); }

/* ── Dropdown options ──────────────────────────────────────────── */
.options-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.option-item { display: flex; align-items: center; gap: 8px; }
.option-item .field-input { flex: 1; }
.add-opt-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: var(--radius-sm);
  border: 1px dashed var(--border-strong); background: transparent;
  color: var(--primary); font-size: .825rem; font-weight: 700;
  transition: all .15s; font-family: var(--font);
}
.add-opt-btn:hover { background: var(--primary-light); border-color: var(--primary); border-style: solid; }

/* ── Modals ────────────────────────────────────────────────────── */
.modal-card { border: none; border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.del-icon { font-size: 2rem; color: var(--danger); }

/* ── Alerts & Flash ────────────────────────────────────────────── */
.alert-error {
  background: var(--danger-light); border: 1px solid #f5b8b8; color: var(--danger);
  border-radius: var(--radius-sm); padding: 12px 16px; margin-bottom: 16px;
  font-size: .85rem; font-weight: 600;
}
.alert-error p { margin: 0; }
.flash-success {
  display: flex; align-items: center; gap: 8px;
  background: var(--success-light); border: 1px solid #86efac; color: var(--success);
  border-radius: var(--radius-sm); padding: 10px 14px; margin-bottom: 16px;
  font-size: .85rem; font-weight: 700;
}

/* ── Toast ─────────────────────────────────────────────────────── */
.toast-wrap {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%);
  z-index: 9999; pointer-events: none;
  display: flex; flex-direction: column; gap: 8px; align-items: center;
}
.toast-msg {
  background: #151820; color: #f4f5f8;
  padding: 10px 20px; border-radius: 999px;
  font-size: .82rem; font-weight: 700; letter-spacing: -.01em;
  box-shadow: 0 4px 20px rgba(0,0,0,.25); pointer-events: auto;
  animation: toastIn .2s ease; opacity: 1; transition: opacity .3s;
  white-space: nowrap;
}
.toast-msg.hide { opacity: 0; }
@keyframes toastIn { from { transform: translateY(10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ── Follow-up Alerts Section ──────────────────────────────────── */
.alerts-section {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); margin-bottom: 20px;
  box-shadow: var(--shadow-sm); overflow: hidden;
}
.alerts-heading {
  padding: 12px 18px; font-size: .7rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .07em; color: var(--muted);
  border-bottom: 1px solid var(--border); background: var(--surface-2);
  display: flex; align-items: center; gap: 7px;
}
.alerts-heading i { color: var(--warning); }
.followup-alert {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px; border-bottom: 1px solid var(--border);
  flex-wrap: wrap; transition: background .1s;
}
.followup-alert:last-child { border-bottom: none; }
.followup-alert:hover { background: var(--surface-2); }
.alert-overdue  { border-left: 3px solid var(--danger); }
.alert-today    { border-left: 3px solid var(--warning); }
.alert-tomorrow { border-left: 3px solid var(--info); }
.alert-urgency-pill {
  font-size: .68rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em; padding: 3px 9px; border-radius: 999px;
  white-space: nowrap; flex-shrink: 0;
}
.alert-overdue  .alert-urgency-pill { background: #fee2e2; color: #b91c1c; }
.alert-today    .alert-urgency-pill { background: #fef3c7; color: #92400e; }
.alert-tomorrow .alert-urgency-pill { background: var(--info-light); color: #0369a1; }
.alert-body {
  flex: 1; display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; min-width: 0; font-size: .85rem;
}
.alert-name { font-weight: 800; color: var(--text); text-decoration: none; letter-spacing: -.01em; }
.alert-name:hover { color: var(--primary); }
.alert-type {
  background: var(--bg); border: 1px solid var(--border);
  padding: 2px 8px; border-radius: 999px; font-size: .7rem;
  font-weight: 700; color: var(--muted); white-space: nowrap;
}
.alert-date { color: var(--muted); font-size: .8rem; display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.alert-phone {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--primary); font-size: .8rem; font-weight: 700;
  text-decoration: none;
}
.alert-phone:hover { text-decoration: underline; color: var(--primary-dark); }
.alert-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; flex-wrap: wrap; }
.alert-btn-call {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; border-radius: 999px;
  background: var(--success); color: #fff;
  font-size: .75rem; font-weight: 800; text-decoration: none;
  transition: background .15s; white-space: nowrap; border: none; font-family: var(--font);
}
.alert-btn-call:hover { background: #0e8f52; color: #fff; text-decoration: none; }
.alert-btn-complete {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; border-radius: 999px;
  background: var(--primary-light); color: var(--primary);
  font-size: .75rem; font-weight: 800;
  transition: all .15s; white-space: nowrap; border: 1px solid transparent; font-family: var(--font);
}
.alert-btn-complete:hover { background: var(--primary); color: #fff; }
.alert-btn-ignore {
  padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--muted); font-size: .75rem; font-weight: 700;
  cursor: pointer; transition: all .15s; font-family: var(--font);
}
.alert-btn-ignore:hover { background: var(--bg); color: var(--text); }
.alert-btn-dismiss {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 999px;
  border: 1px solid var(--border); background: transparent;
  color: var(--muted); font-size: .85rem; cursor: pointer;
  transition: all .15s;
}
.alert-btn-dismiss:hover { background: var(--bg); color: var(--text); }

/* ── Flatpickr overrides ───────────────────────────────────────── */
.flatpickr-calendar {
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-lg) !important;
  border: 1px solid var(--border) !important;
  font-family: var(--font) !important;
  padding: 0 !important;
  width: 280px !important;
}
.flatpickr-months {
  padding: 10px 8px 0 !important;
  background: var(--surface) !important;
  border-radius: var(--radius) var(--radius) 0 0 !important;
}
.flatpickr-month { height: 38px !important; }
.flatpickr-current-month {
  font-family: var(--font) !important;
  font-weight: 700 !important;
  font-size: .92rem !important;
  padding-top: 5px !important;
}
.flatpickr-monthDropdown-months {
  font-family: var(--font) !important;
  font-weight: 700 !important;
  background: transparent !important;
  border: none !important;
}
.flatpickr-weekdays { background: var(--surface) !important; }
.flatpickr-weekday {
  font-family: var(--font) !important;
  font-size: .7rem !important;
  font-weight: 800 !important;
  color: var(--muted) !important;
  text-transform: uppercase !important;
}
.flatpickr-days { border: none !important; }
.dayContainer { padding: 4px !important; }
.flatpickr-day {
  border-radius: var(--radius-xs) !important;
  font-family: var(--font) !important;
  font-size: .82rem !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  border: none !important;
  height: 34px !important;
  line-height: 34px !important;
  max-width: 34px !important;
}
.flatpickr-day:hover { background: var(--primary-light) !important; color: var(--primary) !important; }
.flatpickr-day.today { border: 2px solid var(--primary) !important; color: var(--primary) !important; }
.flatpickr-day.today:hover { background: var(--primary-light) !important; }
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}
.flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: var(--muted) !important; opacity: .5; }
.numInput { font-family: var(--font) !important; }

/* ── Flatpickr "Today" button ──────────────────────────────────── */
.fp-today-btn {
  display: block;
  width: calc(100% - 16px);
  margin: 6px 8px 8px;
  padding: 7px 0;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .01em;
  cursor: pointer;
  transition: background .15s;
}
.fp-today-btn:hover { background: var(--primary-dark); }

/* ── Flatpickr time picker ─────────────────────────────────────── */
.flatpickr-time {
  border-top: 1px solid var(--border) !important;
  background: var(--surface) !important;
  height: 52px !important;
  border-radius: 0 0 var(--radius) var(--radius) !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 12px !important;
  gap: 4px !important;
}
.flatpickr-time .numInputWrapper {
  height: 36px !important;
  width: 52px !important;
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-xs) !important;
  flex: 0 0 52px !important;
}
.flatpickr-time .numInputWrapper:hover { background: var(--primary-light) !important; border-color: var(--primary) !important; }
.flatpickr-time input.numInput {
  font-family: var(--font) !important;
  font-size: .95rem !important;
  font-weight: 800 !important;
  color: var(--text) !important;
  background: transparent !important;
  border: none !important;
  text-align: center !important;
  padding: 0 !important;
}
.flatpickr-time .flatpickr-time-separator {
  color: var(--muted) !important;
  font-weight: 800 !important;
  font-size: 1rem !important;
  flex: 0 0 10px !important;
  text-align: center !important;
}
.flatpickr-time .flatpickr-am-pm {
  height: 36px !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-xs) !important;
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: var(--font) !important;
  font-weight: 800 !important;
  font-size: .78rem !important;
  padding: 0 10px !important;
  margin-left: 4px !important;
  cursor: pointer !important;
  transition: all .15s !important;
}
.flatpickr-time .flatpickr-am-pm:hover {
  background: var(--primary-light) !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}
.numInputWrapper span.arrowUp,
.numInputWrapper span.arrowDown {
  width: 16px !important; border: none !important;
  opacity: 0 !important; transition: opacity .15s !important;
}
.numInputWrapper:hover span.arrowUp,
.numInputWrapper:hover span.arrowDown { opacity: .65 !important; }
.numInputWrapper span.arrowUp:after  { border-bottom-color: var(--primary) !important; }
.numInputWrapper span.arrowDown:after { border-top-color: var(--primary) !important; }

/* ── Tom Select overrides ──────────────────────────────────────── */
.ts-wrapper {
  width: 100%;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Filter-bar dropdowns — single clean bordered pill */
.filter-dropdowns .ts-wrapper {
  width: auto !important;
  min-width: 130px;
  max-width: 200px;
  flex: 1 1 130px;
  position: relative;
}
/* Hide built-in Tom Select arrow — we draw our own with ::after */
.filter-dropdowns .ts-wrapper .ts-control::after { display: none !important; }

/* Draw a clean chevron on the right side of each filter dropdown */
.filter-dropdowns .ts-wrapper::after {
  content: '';
  position: absolute;
  right: 11px;
  top: 50%;
  transform: translateY(-50%);
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid var(--muted);
  pointer-events: none;
  z-index: 2;
}
.filter-dropdowns .ts-wrapper.open::after {
  border-top: none;
  border-bottom: 5px solid var(--primary);
}

.filter-dropdowns .ts-control {
  padding: 8px 30px 8px 12px !important;
  font-size: .82rem !important;
  font-weight: 600 !important;
  color: var(--text-2) !important;
  min-height: 38px !important;
  white-space: nowrap;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-sm) !important;
  background: var(--surface) !important;
  cursor: pointer;
}
.filter-dropdowns .ts-wrapper.open .ts-control,
.filter-dropdowns .ts-wrapper.focus .ts-control {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(91,76,245,.1) !important;
}
.filter-dropdowns .ts-dropdown {
  min-width: 180px;
  font-size: .82rem !important;
  margin-top: 2px !important;
  border-radius: var(--radius-sm) !important;
}

/* Form / add-edit dropdowns */
.ts-control {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 7px 12px !important;
  font-family: var(--font) !important;
  font-size: .875rem !important;
  color: var(--text) !important;
  background: var(--surface) !important;
  min-height: 38px !important;
}
.ts-control:focus, .focus .ts-control {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(91,76,245,.1) !important;
  outline: none !important;
}
.ts-dropdown {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-lg) !important;
  font-family: var(--font) !important;
  font-size: .875rem !important;
}
.ts-dropdown .option:hover, .ts-dropdown .option.active {
  background: var(--primary-light) !important;
  color: var(--primary) !important;
}
.ts-dropdown .option.selected {
  background: var(--primary) !important;
  color: #fff !important;
}
.ts-wrapper.single .ts-control::after { display: none !important; }
.ts-wrapper .ts-control input { font-family: var(--font) !important; }

/* ── Date range filter ─────────────────────────────────────────── */
.date-filter-wrap {
  position: relative; flex: 1 1 200px; max-width: 260px;
}
.date-filter-icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--muted); font-size: .85rem; pointer-events: none; z-index: 2;
}
.date-filter-input {
  width: 100%; padding: 10px 34px 10px 34px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); font-size: .84rem; color: var(--text);
  font-family: var(--font); outline: none; transition: all .15s;
  box-shadow: var(--shadow-sm); cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.date-filter-input::placeholder { color: var(--muted); }
.date-filter-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(91,76,245,.1); }
.date-filter-input.flatpickr-input.active { border-color: var(--primary); background: var(--primary-light); }
.clear-date-filter {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--muted); font-size: .82rem;
  display: flex; align-items: center; padding: 2px; z-index: 2; cursor: pointer;
}
.clear-date-filter:hover { color: var(--danger); }

/* ── Tom Select — custom "Add Custom Type" option ──────────────── */
.ts-dropdown .ts-custom-opt {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: var(--primary) !important;
  font-weight: 700 !important;
  font-size: .82rem !important;
  border-top: 1px solid var(--border) !important;
  background: var(--primary-light) !important;
  padding: 9px 12px !important;
  margin-top: 2px !important;
}
.ts-dropdown .ts-custom-opt:hover,
.ts-dropdown .ts-custom-opt.active {
  background: var(--primary) !important;
  color: #fff !important;
}
.ts-dropdown .ts-custom-opt i { font-size: .88rem !important; }

/* ── Lead View Modal ───────────────────────────────────────────── */
.lvm-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 20px 22px 16px; border-bottom: 1px solid var(--border); gap: 12px;
}
.lvm-title-wrap { flex: 1; min-width: 0; }
.lvm-name {
  font-size: 1.15rem; font-weight: 800; color: var(--text);
  letter-spacing: -.02em; margin: 0 0 8px; word-break: break-word;
}
.lvm-badges { display: flex; flex-wrap: wrap; gap: 5px; }
.lvm-close {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--border); background: transparent;
  color: var(--muted); font-size: .9rem; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.lvm-close:hover { background: var(--bg); color: var(--text); border-color: var(--border-strong); }
.lvm-body { padding: 20px 22px; }
.lvm-loading { text-align: center; padding: 32px; color: var(--muted); font-size: .875rem; }
.lvm-section { margin-bottom: 20px; }
.lvm-section:last-child { margin-bottom: 0; }
.lvm-section-title {
  font-size: .68rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .07em; color: var(--muted); margin-bottom: 10px;
  display: flex; align-items: center; gap: 6px;
}
.lvm-section-title i { color: var(--primary); }
.lvm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lvm-row {
  display: flex; flex-direction: column; gap: 3px;
  padding: 10px 12px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.lvm-row.full { grid-column: 1 / -1; }
.lvm-label {
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted);
}
.lvm-val { font-size: .875rem; color: var(--text); font-weight: 500; word-break: break-word; }
.lvm-val a { color: var(--primary); font-weight: 700; }
.lvm-val a:hover { text-decoration: underline; }
.lvm-notes { white-space: pre-line; line-height: 1.6; }
.lvm-footer {
  padding: 14px 22px; border-top: 1px solid var(--border);
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center; justify-content: flex-end;
}
.lvm-footer .btn-danger-outline { margin-right: auto; }
@media (max-width: 576px) {
  .lvm-grid { grid-template-columns: 1fr; }
  .lvm-row.full { grid-column: 1; }
  .lvm-header { padding: 16px 16px 12px; }
  .lvm-body { padding: 16px; }
  .lvm-footer { padding: 12px 16px; }
}

/* ── Custom Time Picker ────────────────────────────────────────── */
.tp-input-wrap { position: relative; }
.tp-val-display {
  cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 8px;
}
.tp-val-display:hover { border-color: var(--primary) !important; }
.tp-val-display .tp-clock-icon { color: var(--muted); font-size: .85rem; }

.tp-display {
  text-align: center;
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: -.03em;
  margin-bottom: 14px;
  font-variant-numeric: tabular-nums;
}

.tp-drums-wrap {
  position: relative;
  height: 240px;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
}

/* The center selection band */
.tp-highlight-band {
  position: absolute;
  top: 50%; left: 8px; right: 8px;
  height: 48px;
  transform: translateY(-50%);
  background: var(--primary);
  opacity: .1;
  border-radius: 10px;
  pointer-events: none;
  z-index: 3;
}

/* Gradient fade top & bottom */
.tp-fade {
  position: absolute;
  left: 0; right: 0;
  height: 88px;
  pointer-events: none;
  z-index: 4;
}
.tp-fade-top {
  top: 0;
  background: linear-gradient(to bottom, var(--surface) 0%, transparent 100%);
}
.tp-fade-bot {
  bottom: 0;
  background: linear-gradient(to top, var(--surface) 0%, transparent 100%);
}

.tp-drums {
  display: flex;
  align-items: stretch;
  height: 100%;
  padding: 0 8px;
  gap: 0;
  position: relative;
  z-index: 2;
}

.tp-col {
  flex: 1;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 96px 0; /* (240 - 48) / 2 */
}
.tp-col::-webkit-scrollbar { display: none; }

.tp-col-sm { flex: 0 0 60px; }

.tp-item {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: center;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  transition: color .15s, font-size .15s, font-weight .15s;
  border-radius: 8px;
  user-select: none;
  font-variant-numeric: tabular-nums;
}
.tp-item.tp-active {
  color: var(--primary);
  font-size: 1.2rem;
  font-weight: 800;
}

.tp-sep {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text-2);
  flex-shrink: 0;
  width: 18px;
  padding-bottom: 4px;
}

/* ── Refresh spin ──────────────────────────────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }
.spin { display: inline-block; animation: spin .6s linear infinite; }

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .stat-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .stat-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .stat-card { padding: 12px 10px; gap: 10px; }
  .stat-icon { width: 36px; height: 36px; font-size: .95rem; }
  .stat-value { font-size: 1.1rem; }
  .stat-label { font-size: .65rem; }
  .revenue-grid { grid-template-columns: 1fr; gap: 8px; }
  .form-grid { grid-template-columns: 1fr; }
  .field-group.full { grid-column: 1; }
  .view-grid { grid-template-columns: 1fr; }
  .detail-meta { grid-column: 1; }
  .view-header { flex-direction: column; }
  .view-actions { width: 100%; justify-content: flex-start; }
  .page-title { font-size: 1.2rem; }
  .page-wrap { padding: 18px 16px 80px; }
  .nav-inner { padding: 0 16px; }
  .rev-card-value { font-size: 1rem; }
  .lc-info-grid { grid-template-columns: repeat(2, 1fr); }
  .sticky-save { margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
  .filter-bar { gap: 6px; }
  .date-filter-wrap { max-width: 100%; flex: 1 1 100%; }
  .status-tabs { padding-bottom: 2px; }
  .status-tab { font-size: .75rem; padding: 6px 10px 8px; }
}
@media (max-width: 480px) {
  .stat-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .stat-card { padding: 10px 8px; gap: 7px; }
  .stat-icon { width: 30px; height: 30px; font-size: .82rem; border-radius: 8px; }
  .stat-value { font-size: 1rem; }
  .stat-label { font-size: .6rem; letter-spacing: .02em; }
  .lc-info-grid { grid-template-columns: 1fr; }
  .add-field-row { flex-direction: column; }
  .add-field-type { width: 100%; }
  .status-tab { font-size: .7rem; padding: 5px 8px 7px; gap: 4px; }
  .tab-count { font-size: .62rem; min-width: 16px; padding: 1px 4px; }
}
@media (min-width: 769px) {
  .lead-card { padding: 18px 20px; }
  .page-wrap { padding: 28px 24px 80px; }
}

/* ── iOS / Safari zoom fix ─────────────────────────────────────────
   iOS Safari auto-zooms on any input with font-size < 16px.
   Force 16px on all interactive elements to prevent it.
   The viewport maximum-scale=1 tag is the belt; this is the suspenders.
──────────────────────────────────────────────────────────────────── */
@supports (-webkit-touch-callout: none) {
  input, textarea, select,
  .search-input,
  .field-input, .field-select, .field-textarea,
  .ts-control, .ts-control input,
  .filter-dropdowns .ts-control,
  .date-filter-input {
    font-size: 16px !important;
  }
}