/* ═══════════════════════════════════════════════════════════════════════
   WGN ERP — app.css  (v3 — unified design system)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Design Tokens ────────────────────────────────────────────────────── */
:root {
  /* ---- Palette ---- */
  --blue-50:  #eff6ff; --blue-100: #dbeafe; --blue-200: #bfdbfe;
  --blue-500: #3b82f6; --blue-600: #2563eb; --blue-700: #1d4ed8;
  --blue-800: #1e40af; --blue-900: #1e3a8a;

  --slate-50:  #f8fafc; --slate-100: #f1f5f9; --slate-200: #e2e8f0;
  --slate-300: #cbd5e1; --slate-400: #94a3b8; --slate-500: #64748b;
  --slate-600: #475569; --slate-700: #334155; --slate-800: #1e293b;
  --slate-900: #0f172a;

  --red-50:  #fef2f2; --red-100: #fee2e2; --red-200: #fecaca;
  --red-600: #dc2626; --red-700: #b91c1c; --red-800: #991b1b;

  --amber-50: #fffbeb; --amber-100: #fef3c7; --amber-200: #fde68a;
  --amber-600: #d97706; --amber-700: #b45309; --amber-800: #92400e;

  --green-50:  #f0fdf4; --green-100: #dcfce7; --green-200: #bbf7d0;
  --green-600: #16a34a; --green-700: #15803d; --green-800: #166534;

  --purple-50:  #f5f3ff; --purple-100: #ede9fe; --purple-200: #ddd6fe;
  --purple-600: #7c3aed; --purple-700: #6d28d9;

  --teal-50: #f0fdfa; --teal-100: #ccfbf1; --teal-200: #99f6e4;
  --teal-600: #0d9488; --teal-700: #0f766e;

  --sky-100: #e0f2fe; --sky-700: #0369a1;

  /* ---- Semantic ---- */
  --color-bg:              #f2f4f7;
  --color-surface:         #ffffff;
  --color-surface-raised:  #f8fafc;
  --color-border:          #e2e8f0;
  --color-border-light:    #f1f5f9;
  --color-text:            #0f172a;
  --color-text-secondary:  #475569;
  --color-text-muted:      #94a3b8;
  --color-primary:         #1d4ed8;
  --color-primary-hover:   #1e40af;
  --color-primary-active:  #1e3a8a;
  --color-danger:          #dc2626;

  /* ---- Spacing ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;
  --sp-4: 16px; --sp-5: 20px; --sp-6: 24px;

  /* ---- Typography ---- */
  --text-2xs: 10px; --text-xs: 11px; --text-sm: 12px;
  --text-base: 13px; --text-md: 14px; --text-lg: 16px;
  --text-xl: 18px; --text-2xl: 20px;

  /* ---- Radius ---- */
  --r-xs: 3px; --r-sm: 4px; --r-md: 6px;
  --r-lg: 8px; --r-xl: 10px; --r-2xl: 12px; --r-full: 9999px;

  /* ---- Shadows ---- */
  --shadow-xs:    0 1px 2px rgba(15,23,42,.05);
  --shadow-sm:    0 1px 4px rgba(15,23,42,.08);
  --shadow-md:    0 2px 8px rgba(15,23,42,.10);
  --shadow-lg:    0 6px 18px rgba(15,23,42,.12);
  --shadow-xl:    0 12px 32px rgba(15,23,42,.15);
  --shadow-panel: -10px 0 40px rgba(15,23,42,.14);

  /* ---- Transitions ---- */
  --t-fast: 80ms ease;
  --t-base: 150ms ease;
  --t-slow: 250ms ease;
  --refresh-fade-start: .92;

  /* ---- Chips ---- */
  --chip-lead-bg: #eef2ff; --chip-lead-border: #c7d2fe; --chip-lead-text: #1d4ed8;
  --chip-owner-bg: #ecfdf5; --chip-owner-border: #a7f3d0; --chip-owner-text: #047857;
  --chip-task-bg: #f5f3ff; --chip-task-border: #ddd6fe; --chip-task-text: #6d28d9;
  --chip-comm-bg: #fff7ed; --chip-comm-border: #fed7aa; --chip-comm-text: #b45309;
  --chip-contact-bg: #f8fafc; --chip-contact-border: #e2e8f0; --chip-contact-text: #475569;
  --chip-homelead-bg: #fdf2f8; --chip-homelead-border: #fbcfe8; --chip-homelead-text: #be185d;
}

/* ── Reset & Base ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--color-bg);
  font-size: 18px;
  color: var(--color-text);
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
[x-cloak] { display: none !important; }

/* ── Scrollbar ────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--slate-300); border-radius: var(--r-full); }
::-webkit-scrollbar-thumb:hover { background: var(--slate-400); }

/* ── App Header ───────────────────────────────────────────────────────── */
.app-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: 0 var(--sp-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 50px;
  position: sticky;
  top: 0;
  z-index: 200;
  box-shadow: 0 1px 0 var(--color-border), var(--shadow-xs);
  flex-shrink: 0;
}
.logo { height: 34px; object-fit: contain; cursor: pointer; }
.header-left { display: flex; align-items: center; gap: var(--sp-2); }
.header-right { display: flex; align-items: center; gap: var(--sp-2); }
.user-chip { position: relative; }
.user-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--slate-800);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--r-full);
  padding: 3px 10px 3px 4px;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.user-pill:hover { background: var(--blue-50); border-color: var(--blue-200); }
.user-pill.open {
  background: var(--blue-50);
  border-color: var(--blue-500);
  color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(59,130,246,.15);
}
.user-pill-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue-700), var(--blue-500));
  color: #fff;
  font-weight: 700;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.user-pill-caret { font-size: var(--text-2xs); opacity: .55; margin-left: 1px; }
.user-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(15,23,42,.13), 0 2px 6px rgba(15,23,42,.07);
  width: 252px;
  overflow: hidden;
  z-index: 250;
  transform-origin: top right;
}
.user-menu-enter { transition: opacity 120ms ease, transform 120ms ease; }
.user-menu-enter-start { opacity: 0; transform: scale(.95) translateY(-4px); }
.user-menu-enter-end   { opacity: 1; transform: scale(1) translateY(0); }
.user-menu-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: linear-gradient(135deg, var(--blue-50) 0%, #eef2ff 100%);
  border-bottom: 1px solid var(--blue-100);
}
.user-monogram {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue-700), var(--blue-500));
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(29,78,216,.30);
}
.user-menu-info { min-width: 0; }
.user-menu-name  { font-size: var(--text-md); font-weight: 700; color: var(--color-text); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-menu-email { font-size: var(--text-sm); color: var(--slate-500); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-menu-actions { padding: 8px; }
.user-menu-actions-row { display: flex; justify-content: flex-end; gap: 2px; }
.user-menu-actions-row form { margin: 0; }
.user-menu-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--color-danger);
  text-decoration: none;
  padding: 8px 10px;
  border-radius: var(--r-lg);
  transition: background var(--t-fast), color var(--t-fast);
  background: none;
  border: none;
  cursor: pointer;
  width: 100%;
  white-space: nowrap;
}
.user-menu-item:hover { background: var(--red-50); color: var(--red-700); }
.user-menu-item--admin { color: var(--blue-600); }
.user-menu-item--admin:hover { background: var(--blue-50); color: var(--blue-700); }
/* Subscriptions link in user menu */
.user-menu-item--subs { color: var(--slate-600); }
.user-menu-item--subs:hover { background: var(--slate-50); color: var(--slate-800); }
.user-menu-actions-col { padding: 0 8px; border-bottom: 1px solid var(--color-border); padding-bottom: 4px; margin-bottom: 4px; }
/* Subscriptions panel */
.subs-section-title {
  font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  margin: 20px 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--color-border);
}
.subs-section-title--lead { color: var(--blue-600); }
.subs-section-title--owner { color: var(--emerald-700, #047857); }
.subs-section-title--task { color: var(--amber-700, #b45309); }
.subs-table { width: 100%; border-collapse: collapse; margin-bottom: 8px; }
.subs-table td { padding: 8px 10px; border-bottom: 1px solid var(--slate-100, #f1f5f9); font-size: var(--text-md); }
.subs-row { cursor: pointer; }
.subs-row:hover { background: var(--slate-50); }
.subs-table-title { font-weight: 600; color: var(--color-text); }
.subs-table-status { width: 140px; white-space: nowrap; }
.subs-table-status .status-pill { white-space: nowrap; }
.subs-table-due { width: 100px; color: var(--slate-500); font-size: var(--text-sm); white-space: nowrap; }
.subs-table-action { width: 40px; text-align: center; }
.subs-table-lead { width: 240px; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--slate-500); font-size: var(--text-sm); }
.subs-lead-chip {
  cursor: pointer; color: var(--blue-600); font-weight: 500;
  transition: color var(--t-fast);
}
.subs-lead-chip:hover { color: var(--blue-800); text-decoration: underline; }
.subs-unsub-btn {
  background: none; border: none; cursor: pointer; color: var(--slate-400);
  padding: 4px; border-radius: var(--r-sm); display: inline-flex; align-items: center;
  transition: color var(--t-fast), background var(--t-fast);
}
.subs-unsub-btn:hover { color: var(--red-600); background: var(--red-50); }
.subs-empty { text-align: center; color: var(--slate-400); padding: 40px 16px; font-size: var(--text-md); }
.btn-settings {
  font-size: var(--text-base);
  background: var(--blue-50);
  color: var(--blue-700);
  border: 1px solid var(--blue-200);
  padding: 4px 10px;
  border-radius: var(--r-md);
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  transition: background var(--t-fast);
}
.btn-settings:hover { background: var(--blue-100); }

/* ── Header Quick-Add Buttons ──────────────────────────────────────────── */
.header-quick-add {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  flex-shrink: 0;
  margin: 0 var(--sp-2);
}
.btn-quick-add {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: var(--text-sm);
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--r-full);
  border: 1px solid;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: .01em;
  transition: filter var(--t-fast), transform var(--t-fast);
  white-space: nowrap;
}
.btn-quick-add:hover  { filter: brightness(0.93); }
.btn-quick-add:active { filter: brightness(0.86); transform: scale(0.96); }
.btn-quick-add-plus   { font-size: 14px; font-weight: 700; line-height: 1; margin-right: 1px; }

.btn-quick-add--lead    { background: var(--chip-lead-bg);    color: var(--chip-lead-text);    border-color: var(--chip-lead-border); }
.btn-quick-add--owner   { background: var(--chip-owner-bg);   color: var(--chip-owner-text);   border-color: var(--chip-owner-border); }
.btn-quick-add--task    { background: var(--chip-task-bg);    color: var(--chip-task-text);    border-color: var(--chip-task-border); }
.btn-quick-add--contact { background: var(--chip-contact-bg); color: var(--chip-contact-text); border-color: var(--chip-contact-border); }

@media (max-width: 768px) {
  .header-quick-add { gap: 2px; }
  .btn-quick-add    { padding: 4px 7px; }
}
@media (max-width: 540px) {
  .header-quick-add { display: none; }
}

/* ── Global Search ────────────────────────────────────────────────────── */
.header-search {
  position: relative;
  flex: 1;
  max-width: 420px;
  margin: 0 var(--sp-4);
}
.header-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.header-search-icon {
  position: absolute;
  left: 10px;
  color: var(--slate-400);
  pointer-events: none;
  flex-shrink: 0;
}
.header-search-input {
  width: 100%;
  height: 34px;
  padding: 0 32px 0 32px;
  border: 1px solid var(--color-border);
  border-radius: var(--r-full);
  background: var(--color-surface-raised);
  font-size: var(--text-sm);
  font-family: inherit;
  color: var(--color-text);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
  outline: none;
}
.header-search-input::placeholder { color: var(--slate-400); }
.header-search-input:focus {
  border-color: var(--blue-400);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(59,130,246,.15);
}
/* Remove native clear button */
.header-search-input::-webkit-search-cancel-button { display: none; }
.header-search-clear {
  position: absolute;
  right: 8px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--slate-400);
  font-size: 12px;
  line-height: 1;
  padding: 2px 4px;
  border-radius: var(--r-full);
  transition: color var(--t-fast), background var(--t-fast);
}
.header-search-clear:hover { color: var(--slate-600); background: var(--slate-100); }
.global-search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-xl);
  box-shadow: 0 8px 24px rgba(15,23,42,.12), 0 2px 6px rgba(15,23,42,.06);
  overflow: hidden;
  z-index: 300;
  max-height: 420px;
  overflow-y: auto;
}
.search-group { padding: 6px 0; }
.search-group + .search-group { border-top: 1px solid var(--color-border); }
.search-group-label {
  padding: 6px 14px 4px;
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--slate-400);
}
.search-result-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 7px 14px;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--text-sm);
  color: var(--color-text);
  transition: background var(--t-fast);
}
.search-result-item:hover { background: var(--blue-50); }
.search-result-item:focus { background: var(--blue-50); outline: none; box-shadow: inset 0 0 0 2px var(--blue-300); }
.search-result-id {
  font-size: var(--text-xs);
  color: var(--slate-400);
  font-weight: 500;
  min-width: max-content;
}
.search-result-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}
.search-result-badges {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.search-result-lead-pill {
  font-size: var(--text-2xs);
  font-weight: 500;
  padding: 2px 7px;
  border-radius: var(--r-full);
  background: var(--slate-100);
  color: var(--slate-600);
  border: 1px solid var(--slate-200);
  white-space: nowrap;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-result-meta {
  font-size: var(--text-xs);
  color: var(--slate-500);
  white-space: nowrap;
  flex-shrink: 0;
}
.search-result-status {
  font-size: var(--text-2xs);
  font-weight: 600;
  padding: 2px 7px;
  border-radius: var(--r-full);
  white-space: nowrap;
  flex-shrink: 0;
}
.search-empty {
  padding: 20px 14px;
  text-align: center;
  color: var(--slate-400);
  font-size: var(--text-sm);
}

/* ── Tab Nav ──────────────────────────────────────────────────────────── */
.main-tabs {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: 0 var(--sp-4);
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  flex-shrink: 0;
  gap: 2px;
}
.main-tabs::-webkit-scrollbar { display: none; }
.tab {
  padding: 10px 14px;
  font-size: var(--text-sm);
  cursor: pointer;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--slate-500);
  font-weight: 500;
  white-space: nowrap;
  font-family: inherit;
  transition: color var(--t-base), border-color var(--t-base);
  margin-bottom: -1px;
  letter-spacing: .01em;
}
.tab:hover { color: var(--color-text); }
.tab-active { color: var(--blue-700) !important; border-bottom-color: var(--blue-700) !important; font-weight: 700; }
.tab-red.tab-active { color: var(--red-600) !important; border-bottom-color: var(--red-600) !important; }

/* ── Swipe Navigation ────────────────────────────────────────────────── */
.main-content.swiping { overflow-y: hidden; }
.main-content.swiping > [data-tab] { will-change: transform; }
.main-content.swipe-animating > [data-tab] { will-change: transform; }

/* ── Pull-to-Refresh ─────────────────────────────────────────────────── */
.ptr-indicator {
  position: fixed;
  top: 0; left: 0; right: 0;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 0;
  z-index: 999;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease;
}
.ptr-indicator.ptr-visible,
.ptr-indicator.ptr-refreshing { opacity: 1; }
.ptr-spinner {
  width: 28px; height: 28px;
  border: 3px solid var(--slate-200, #e2e8f0);
  border-top-color: var(--blue-700, #1d4ed8);
  border-radius: 50%;
  margin-bottom: 8px;
}
.ptr-refreshing .ptr-spinner {
  animation: ptr-spin .6s linear infinite;
}
@keyframes ptr-spin { to { transform: rotate(360deg); } }

/* ── Main Content ─────────────────────────────────────────────────────── */
.main-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--sp-3) var(--sp-4);
  min-height: 0;
  overscroll-behavior-y: contain;
}
.tab-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; flex-wrap: wrap; gap: 7px; }
.toolbar-left { display: flex; gap: 7px; align-items: center; }

/* ── Badges & Chips ───────────────────────────────────────────────────── */
.badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: var(--r-full);
  font-size: var(--text-xs);
  font-weight: 700;
  margin-left: 4px;
  border: 1px solid transparent;
  background: var(--color-surface-raised);
  color: var(--slate-700);
  line-height: 1.4;
}
.badge-xs { font-size: var(--text-2xs); padding: 0 5px; }
.count-square { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 4px; border-radius: var(--r-md); font-size: var(--text-xs); font-weight: 700; border: 1px solid transparent; }
.badge-red    { background: var(--red-50);    color: var(--red-600);    border-color: var(--red-200); }
.badge-amber  { background: var(--amber-50);  color: var(--amber-700);  border-color: var(--amber-200); }
.badge-slate  { background: var(--slate-50);  color: var(--slate-600);  border-color: var(--slate-200); }
.badge-success { background: var(--green-50); color: var(--green-700);  border-color: var(--green-200); }

/* Call outcome pill — shown next to the Call channel label in the comms feed
   and the comm panel. Colour-coded so no-answer/busy/failed read at a glance. */
.call-outcome-pill { display:inline-flex; align-items:center; margin-left:6px; padding:0 6px;
  border-radius:9px; font-size:10px; font-weight:700; border:1px solid transparent; white-space:nowrap; }
.call-outcome--answered  { background: var(--green-50); color: var(--green-700);  border-color: var(--green-200); }
.call-outcome--voicemail { background: var(--amber-50); color: var(--amber-700);  border-color: var(--amber-200); }
.call-outcome--no_answer { background: var(--slate-50); color: var(--slate-600);  border-color: var(--slate-200); }
.call-outcome--busy      { background: var(--amber-50); color: var(--amber-700);  border-color: var(--amber-200); }
.call-outcome--failed    { background: var(--red-50);   color: var(--red-600);    border-color: var(--red-200); }

.chip-lead    { background: var(--chip-lead-bg);    border-color: var(--chip-lead-border);    color: var(--chip-lead-text); }
.chip-owner   { background: var(--chip-owner-bg);   border-color: var(--chip-owner-border);   color: var(--chip-owner-text); }
.chip-task    { background: var(--chip-task-bg);    border-color: var(--chip-task-border);    color: var(--chip-task-text); }
.chip-comm    { background: var(--chip-comm-bg);    border-color: var(--chip-comm-border);    color: var(--chip-comm-text); }
.chip-homelead { background: var(--chip-homelead-bg); border-color: var(--chip-homelead-border); color: var(--chip-homelead-text); }
.chip-contact { background: var(--chip-contact-bg); border-color: var(--chip-contact-border); color: var(--chip-contact-text); }

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn-primary {
  background: var(--color-primary);
  color: #fff;
  border: none;
  padding: 6px 13px;
  border-radius: var(--r-md);
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: .01em;
}
.btn-primary:hover { background: var(--color-primary-hover); }

.btn-secondary {
  background: var(--color-surface);
  color: var(--slate-600);
  border: 1px solid var(--color-border);
  padding: 5px 11px;
  border-radius: var(--r-md);
  font-size: var(--text-sm);
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
}
.btn-secondary:hover { background: var(--color-surface-raised); color: var(--color-text); }

.btn-danger {
  background: var(--red-50);
  color: var(--red-600);
  border: 1px solid var(--red-200);
  padding: 4px 9px;
  border-radius: var(--r-md);
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}
.btn-open {
  background: var(--blue-50);
  color: var(--blue-700);
  border: none;
  padding: 4px 10px;
  border-radius: var(--r-md);
  font-size: var(--text-base);
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}
.btn-open .btn-open-text { display: inline; }
.btn-open .btn-open-arrow { display: none; }

/* ── User avatar circle ────────────────────────────────────────────── */
.user-avatar {
  display: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--blue-100);
  color: var(--blue-700);
  font-size: 12px;
  font-weight: 700;
  line-height: 26px;
  text-align: center;
  flex-shrink: 0;
}

/* ── Mobile sub-row (second line of info) ──────────────────────────── */
.mobile-sub { display: none; }
.msub-pills-row { display: none; }
.comms-table td { border-bottom-color: var(--color-border); }

/* Cap the comms subject at 2 visual lines on tablet/desktop so a long
   subject (or one with the "unlinked" amber badge tagging on after the
   text) can't stretch its row 3-5× taller than its neighbors — the
   runaway-tall row in the middle of an otherwise uniform scroll reads
   as a broken layout. Hover the cell for the full text via the title
   attribute. Mobile has its own single-line nowrap+ellipsis rule below
   so this clamp is intentionally scoped out of that breakpoint. */
@media (min-width: 769px) {
  .comms-table .comms-subject-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}
.mobile-sub .mobile-field-row { display: none; }
/* !important so this wins against later sibling rules that pin
   ``display`` on a base class (e.g. ``.th-search { display: block }``)
   when an element carries BOTH classes. The mobile media query
   below uses ``!important`` for the same reason — they stay in
   lockstep so the cascade flips correctly at the breakpoint. */
.mobile-only { display: none !important; }
/* Keep the cell in layout but with zero width — `display: none` here
   would leave a phantom column that table-layout: fixed still allots
   space to (Chrome behavior), pulling the header short of the right edge. */
.mobile-only-th, .mobile-only-td {
  width: 0 !important; min-width: 0 !important; max-width: 0 !important;
  padding: 0 !important; border: 0 !important; overflow: hidden !important;
}
.mobile-only-th > *, .mobile-only-td > * { display: none !important; }
.btn-icon {
  background: var(--slate-100);
  color: var(--slate-600);
  border: 1px solid var(--color-border);
  padding: 4px var(--sp-2);
  border-radius: var(--r-sm);
  font-size: var(--text-base);
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.btn-icon-danger {
  background: transparent;
  color: #9ca3af;
  border: none;
  cursor: pointer;
  font-family: inherit;
  border-radius: var(--r-sm);
  transition: color var(--t-fast), background var(--t-fast);
}
.btn-icon-danger:hover { color: #ef4444; background: #fef2f2; }

/* Thud click effect on all buttons */
.btn-primary, .btn-secondary, .btn-danger,
button.btn-primary, button.btn-secondary, button.btn-danger {
  transition: transform 60ms cubic-bezier(.3,0,.5,1), background var(--t-fast);
}
.btn-primary:active, button.btn-primary:active {
  transform: scale(0.94); background: var(--color-primary-active) !important;
}
.btn-secondary:active, button.btn-secondary:active {
  transform: scale(0.94); background: var(--slate-200) !important;
}
.btn-danger:active, button.btn-danger:active {
  transform: scale(0.94); background: var(--red-100) !important;
}

/* ── Tables ───────────────────────────────────────────────────────────── */
.tbl-wrap { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--r-lg); overflow: auto; max-height: calc(100vh - 155px); box-shadow: var(--shadow-xs); }
table { width: 100%; border-collapse: collapse; min-width: 600px; }
thead tr { background: var(--color-surface-raised); }
th {
  padding: 8px 10px;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--slate-500);
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
  position: sticky; top: 0; z-index: 5; background: var(--color-surface-raised);
}
th:hover { background: var(--slate-100); }
/* Sort button inside th */
.sort-btn {
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: inherit; font-size: var(--text-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: .6px; color: var(--slate-500);
  display: flex; align-items: center; gap: 3px; white-space: nowrap;
}
.sort-btn:hover { color: var(--slate-700); }
.sort-icon { font-size: 9px; opacity: .55; }
td {
  padding: 8px 10px;
  font-size: var(--text-md);
  border-bottom: 1px solid var(--color-border-light);
  vertical-align: middle;
  overflow: visible;
}
tr { overflow: visible; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--slate-50); }
tr.overdue td { background: var(--red-50); }
tr.overdue:hover td { background: var(--red-100); }
tr.row-clickable { cursor: pointer; }
tr.overdue .field-select { background: #fff !important; }
table td select { height: 28px !important; overflow: hidden !important; }
.th-search {
  font-size: var(--text-sm);
  padding: 3px 6px;
  border: 1px solid var(--slate-300);
  border-radius: var(--r-sm);
  outline: none;
  font-family: inherit;
  color: var(--color-text);
  background: var(--color-surface);
  width: 100%;
  min-width: 120px;
  margin-top: 4px;
  display: block;
  box-sizing: border-box;
  height: 26px;
  transition: border-color var(--t-base);
}
.th-search:focus { border-color: var(--color-primary); }
.th-search::placeholder { color: var(--slate-400); }
select.th-search {
  padding-right: 28px;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--slate-500) 50%),
    linear-gradient(135deg, var(--slate-500) 50%, transparent 50%);
  background-position: calc(100% - 14px) 50%, calc(100% - 8px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

table.data-table { table-layout: fixed; }
table.data-table th, table.data-table td { min-width: 120px; }
table.data-table th { cursor: default; }
table.data-table td { word-break: break-word; }

/* Manual drag-to-reorder ("Manual" sort mode). The grip lives on the left edge
   of the Title cell (no extra column, so nth-child column rules are unaffected
   and out-of-band single-row swaps stay aligned). The cell gets left padding in
   manual mode to make room; the grip is absolutely positioned in that gutter. */
table.data-table.manual-order th:first-child,
table.data-table.manual-order td:first-child { padding-left: 22px; }
table.data-table.manual-order td:first-child { position: relative; }
table.data-table.manual-order .drag-handle {
  position: absolute;
  left: 2px;
  top: 50%;
  transform: translateY(-50%);
  cursor: grab;
  color: #9ca3af;
  font-size: 15px;
  line-height: 1;
  user-select: none;
  padding: 0 2px;
  z-index: 1;
}
table.data-table.manual-order .drag-handle:hover { color: #4b5563; }
table.data-table.manual-order tr.dragging {
  opacity: 0.5;
  background: #eff6ff;
}
table.data-table.manual-order tr.drop-before td { box-shadow: inset 0 2px 0 0 #2563eb; }
table.data-table.manual-order tr.drop-after td { box-shadow: inset 0 -2px 0 0 #2563eb; }
/* Boundary between the pinned tasks and the due-date pile. */
table.data-table.manual-order tr.manual-divider { cursor: default; }
table.data-table.manual-order tr.manual-divider td {
  background: #f1f5f9;
  color: #64748b;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 5px 12px;
  text-align: center;
  border-top: 2px dashed #cbd5e1;
  border-bottom: 1px solid var(--color-border);
}

.table-field {
  width: 140px;
  font-size: var(--text-sm);
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  padding: 2px 0;
  font-family: inherit;
  color: var(--color-text);
  background: transparent;
  transition: border-color var(--t-base), box-shadow var(--t-base), background var(--t-base);
  min-height: 24px;
}
.table-field:focus {
  outline: none;
  border-bottom-color: var(--color-primary);
  background: #fff;
  box-shadow: inset 0 -1px 0 var(--color-primary);
}
.table-field--date { width: 140px; }
.table-field--date::-webkit-calendar-picker-indicator {
  opacity: 0; transition: opacity var(--t-base);
}
.table-field--date:focus::-webkit-calendar-picker-indicator { opacity: 1; }
.table-field--select {
  width: 150px; min-height: 26px; cursor: pointer;
  padding-right: 0; appearance: none; background-image: none;
}
.table-field--select:focus {
  padding-right: 22px;
  background-image: linear-gradient(45deg, transparent 50%, var(--color-primary) 50%),
    linear-gradient(135deg, var(--color-primary) 50%, transparent 50%);
  background-position: calc(100% - 12px) 55%, calc(100% - 6px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.table-field--wide   { width: 180px; }
.table-field--narrow { width: 120px; }
.table-field--linker { width: 100%; min-width: 0; padding: 2px 0; font-size: var(--text-sm); border-bottom: none; }
.table-field--linker:focus { border-bottom: none; box-shadow: none; }
/* Desktop comms inline-linker: collapsed pill that widens on focus. Width per
   entity type; `.is-open` is toggled by Alpine (:class="focused?'is-open':''").
   Replaces per-row inline style/:style soup in comms_row.html. */
.comms-linker { display: inline-flex; flex-shrink: 0; }
.comms-linker--lead  { width: 46px; }
.comms-linker--owner { width: 54px; }
.comms-linker--task  { width: 44px; }
.comms-linker.is-open { width: 90px; }
.comms-linker--task.is-open { width: 120px; }
.comms-linker .table-field--linker { text-align: center; color: #9ca3af; cursor: pointer; font-size: 11px; }
.comms-linker.is-open .table-field--linker { text-align: left; color: inherit; cursor: text; }
.table-field--overdue { color: var(--red-700); border-bottom-color: #f87171; background: transparent; }
select.table-field { padding: 0; }
.lead-title-wrap {
  display: inline-flex; align-items: center; gap: 6px; max-width: 220px;
}
.lead-title-text {
  font-weight: 600; font-size: var(--text-base);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.owner-link-btn {
  width: 26px; height: 26px;
  border-radius: var(--r-md);
  border: 1px solid var(--chip-owner-border);
  background: var(--chip-owner-bg);
  color: var(--chip-owner-text);
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; cursor: pointer; line-height: 1; font-family: inherit;
  transition: background var(--t-base), border-color var(--t-base), transform var(--t-base);
}
.owner-link-btn svg { width: 14px; height: 14px; }
.owner-link-btn:hover { background: #d1fae5; border-color: #34d399; }
.owner-link-btn:active { transform: scale(0.9); }
.owner-link-btn:focus-visible { outline: 2px solid #10b981; outline-offset: 2px; }
.owner-link-btn--sm { width: 22px; height: 22px; }
.col-count { font-size: var(--text-base); color: var(--slate-500); }
.td-muted  { font-size: var(--text-sm); color: var(--slate-500); }
.contacts-inline-hint { font-size: var(--text-sm); color: var(--slate-500); margin-bottom: 6px; }
.contacts-table td { font-size: var(--text-sm); color: var(--slate-800); }
.contacts-inline-input,
.contacts-inline-select,
.contacts-inline-notes {
  width: 100%; font-size: var(--text-sm); border: none;
  border-bottom: 1px solid transparent; padding: 2px 0;
  font-family: inherit; background: transparent; color: var(--color-text);
  transition: background var(--t-base), border-color var(--t-base);
}
.contacts-inline-input::placeholder, .contacts-inline-notes::placeholder { color: var(--slate-400); }
.contacts-inline-input:focus, .contacts-inline-select:focus, .contacts-inline-notes:focus {
  outline: none;
  border-bottom-color: var(--color-primary);
  background: #fff;
  box-shadow: inset 0 -1px 0 var(--color-primary);
}
.contacts-inline-select {
  min-height: 26px; padding-right: 14px; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--slate-500) 50%),
    linear-gradient(135deg, var(--slate-500) 50%, transparent 50%);
  background-position: calc(100% - 10px) 45%, calc(100% - 6px) 45%;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}
.contacts-inline-notes { min-height: 36px; resize: vertical; }
.contact-inline-row td:first-child input { font-weight: 600; }
.contact-inline-row td:nth-child(7) textarea { max-height: 80px; }
.contact-row-actions-cell { text-align: right; width: 170px; }
.contact-row-actions { display: inline-flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.btn-xs { font-size: var(--text-xs); padding: 4px var(--sp-2); line-height: 1.2; }
/* Per-table toolbar (Reset / sticky filter / Active only / + New …) — pin
   every direct button + select child to one height so the row reads as a
   single, evenly-spaced strip regardless of which button class each child
   uses (.btn-primary, .btn-xs, .btn-filter-on all have different default
   padding). */
.table-toolbar > button,
.table-toolbar > select {
  height: 28px;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 26px;
  box-sizing: border-box;
}
.btn-spinner {
  display: inline-block; width: 10px; height: 10px;
  border: 2px solid currentColor; border-top-color: transparent;
  border-radius: 50%; animation: btn-spin 0.6s linear infinite;
  vertical-align: middle;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }
.btn-filter-on {
  background: var(--blue-50, #eff6ff);
  color: var(--blue-700, #1d4ed8);
  border: 1px solid var(--blue-200, #bfdbfe);
  font-size: var(--text-xs); padding: 4px var(--sp-2); line-height: 1.2;
  border-radius: var(--radius-sm); font-weight: 500; cursor: pointer;
  font-family: inherit;
}
.btn-filter-on:hover { background: var(--blue-100, #dbeafe); }
.contact-row-indicator {
  display: none; margin-top: 6px; font-size: var(--text-xs);
  color: var(--teal-700); gap: 6px; align-items: center; justify-content: flex-end;
}
.contact-row-indicator .spinner { width: 14px; height: 14px; border-width: 2px; }
.contact-row-indicator.htmx-request { display: inline-flex; }
.contact-inline-row.htmx-request td { background: var(--blue-50) !important; }

/* ── Status Pill ──────────────────────────────────────────────────────── */
.status-pill {
  display: inline-block; padding: 2px 9px; border-radius: var(--r-full);
  font-size: var(--text-sm); font-weight: 700; white-space: nowrap; border: 1px solid;
}
.leads-table td:nth-child(2) .status-pill,
.owners-table td:nth-child(2) .status-pill,
.tasks-table td:nth-child(2) .status-pill {
  max-width: 150px; overflow: hidden; text-overflow: ellipsis; display: inline-block; vertical-align: middle;
}
.leads-table td:first-child,
.owners-table td:first-child,
.tasks-table td:first-child { padding-right: 32px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Give title column 30% more width, funded by city (col 5) and acres (col 6) */
.leads-table th:nth-child(1), .leads-table td:nth-child(1) { width: 19.2%; }
.leads-table th:nth-child(5), .leads-table td:nth-child(5) { width: 10.5%; }
.leads-table th:nth-child(6), .leads-table td:nth-child(6) { width: 7.3%; }
.status-select-inline {
  font-size: var(--text-sm); border: none; background: transparent;
  cursor: pointer; font-weight: 700; font-family: inherit; padding: 0;
}

/* ── Panel Stack ──────────────────────────────────────────────────────── */
.panel-stack { position: fixed; inset: 0; pointer-events: none; z-index: 300; }
.panel-backdrop {
  position: absolute; inset: 0; background: rgba(15,23,42,.4);
  display: flex; justify-content: flex-end; pointer-events: all;
  backdrop-filter: blur(1px);
}
.panel-inner {
  background: var(--color-surface); height: 100vh; overflow: hidden;
  box-shadow: var(--shadow-panel); position: relative;
  display: flex; flex-direction: row; max-width: 98vw;
}
@supports (height: 100dvh) { .panel-inner { height: 100dvh; } }
/* On 13"/13.5" laptops (≤1536px): cap the panel so the form column is 20%
   narrower than its old natural width and the sidebar is 20% wider than its
   shrunk value (510px, see rule below). Leaves a comfortable gutter on the
   left for the vtab rail and the table behind.
   Formula: 510 + 0.8 * (100vw - 100 - 425) → 80vw + 90px. */
@media (max-width: 1536px) {
  .panel-inner:not(.panel-mobile) { max-width: calc(80vw + 90px); }
}
.panel-inner.panel-mobile {
  width: 100vw !important; max-width: 100vw !important;
  height: 100% !important; max-height: 100% !important;
  border-radius: 0; box-shadow: none;
}
.panel-inner.panel-mobile .panel-drag-handle { display: none !important; }
.panel-inner.panel-mobile .panel-header {
  position: sticky; top: 0;
  /* Above the map's absolute controls (Fullscreen / Google Maps, z-index:1000)
     so they tuck behind the sticky header when the map scrolls up, but below
     the fullscreen modal (z-index:9999) so that still covers the header. */
  z-index: 1100;
  padding-top: calc(10px + env(safe-area-inset-top));
  flex-wrap: wrap;
}
.panel-inner.panel-mobile .panel-header > div:first-child {
  padding-right: 40px;
}
.panel-inner.panel-mobile .panel-header-actions {
  width: 100%; margin-top: 8px;
  /* 3-up grid of icon+label buttons. minmax(0,1fr) keeps a long label
     (e.g. "Unsubscribed") from blowing out its track. */
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px;
}
.panel-inner.panel-mobile .panel-header-actions > * { margin: 0; }
.panel-inner.panel-mobile .panel-header-actions .btn-secondary,
.panel-inner.panel-mobile .panel-header-actions .btn-panel-delete,
.panel-inner.panel-mobile .panel-header-actions .btn-panel-save,
.panel-inner.panel-mobile .panel-header-actions > div > button {
  width: 100%; box-sizing: border-box; height: 100%;
  /* icon + label on one centered line — stops the ragged two-line wrap */
  display: inline-flex; align-items: center; justify-content: center;
  gap: 5px; min-width: 0;
  font-size: 11px !important; padding: 6px 4px !important;
  white-space: nowrap; line-height: 1.15; text-align: center;
}
.panel-inner.panel-mobile .btn-panel-close {
  position: absolute; top: calc(8px + env(safe-area-inset-top)); right: 10px;
}
.panel-inner.panel-mobile .panel-content {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding-bottom: env(safe-area-inset-bottom, 16px);
  scroll-padding-bottom: 60px;
}
.panel-content {
  flex: 1; overflow-y: auto; display: block; min-width: 0; min-height: 0;
}
.panel-content > form {
  display: flex; flex-direction: column; min-height: 100%; height: auto; padding-bottom: 48px;
}
.panel-form { display: flex; flex-direction: column; height: 100%; }

/* ── Panel Vertical Tab Rail ──────────────────────────────────────────── */
.panel-vtab-bar {
  flex-shrink: 0; align-self: stretch;
  display: flex; flex-direction: row; gap: 5px;
  padding: 14px 5px 14px 10px; align-items: flex-start;
}
.pvtab {
  display: flex; flex-direction: column; align-items: center;
  padding: 9px 7px 13px; flex: 0 0 auto; gap: 8px;
  cursor: pointer; font-family: inherit;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.09);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-radius: var(--r-xl);
  box-shadow: 0 2px 8px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.12);
  transition: background var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
}
.pvtab:hover {
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.26);
  box-shadow: 0 4px 16px rgba(0,0,0,0.24), inset 0 1px 0 rgba(255,255,255,0.18);
}
.pvtab.active {
  background: rgba(255,255,255,0.95);
  border-color: rgba(255,255,255,0.98);
  box-shadow: 0 4px 20px rgba(0,0,0,0.22), inset 0 1px 0 #fff;
}
.pvtab-label {
  writing-mode: vertical-lr;
  font-size: var(--text-sm); font-weight: 500;
  color: rgba(255,255,255,0.65);
  white-space: nowrap; letter-spacing: 0.01em;
  transition: color var(--t-base);
}
.pvtab:hover:not(.active) .pvtab-label { color: rgba(255,255,255,0.92); }
.pvtab.active .pvtab-label { color: var(--slate-700); font-weight: 600; }
.pvtab-close {
  font-size: 15px; line-height: 1; color: rgba(255,255,255,0.38);
  width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-md); flex-shrink: 0;
  transition: background var(--t-fast), color var(--t-fast);
}
.pvtab.active .pvtab-close { color: var(--slate-400); }
.pvtab-close:hover { background: rgba(255,255,255,0.18); color: rgba(255,255,255,0.95) !important; }
.pvtab.active .pvtab-close:hover { background: var(--slate-200); color: var(--slate-700) !important; }

/* ── Panel Drag Handle ────────────────────────────────────────────────── */
.panel-drag-handle {
  position: absolute; left: 0; top: 0; bottom: 0; width: 8px;
  cursor: col-resize; z-index: 20; background: transparent;
}
.panel-drag-handle:hover { background: rgba(29,78,216,.2); }

/* ── Panel Header — Dark Navy ─────────────────────────────────────────── */
.panel-header {
  background: var(--slate-800);
  border-bottom: 1px solid var(--slate-700);
  padding: 13px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.panel-title    { font-size: var(--text-lg); font-weight: 700; color: var(--slate-50); }
.panel-subtitle { font-size: var(--text-sm); color: var(--slate-400); margin-top: 2px; }
.panel-subtitle a { color: var(--blue-400, #60a5fa); text-decoration: none; }
.panel-subtitle a:hover { text-decoration: underline; }
/* #id chip that copies a deep link to the panel (see window.copyDeepLink) */
.panel-id-link { cursor: pointer; white-space: nowrap; }
.panel-id-link .erp-icon { width: 11px; height: 11px; vertical-align: -1px; margin-left: 3px; opacity: .65; }
.panel-id-link:hover .erp-icon { opacity: 1; }
.panel-subtitle-hint { font-size: var(--text-xs); color: #34d399; margin-top: 2px; }
.panel-entity-type { color: var(--slate-300); }
.panel-id { color: var(--slate-500); }
.panel-header-actions { display: flex; gap: 6px; align-items: center; }

.btn-panel-close {
  background: rgba(255,255,255,.1); color: var(--slate-300); border: none;
  padding: 5px 10px; border-radius: var(--r-md); cursor: pointer;
  font-family: inherit; font-size: var(--text-lg);
  transition: background var(--t-fast);
}
.btn-panel-close:hover { background: rgba(255,255,255,.18); color: var(--slate-100); }
.btn-panel-close:active { transform: scale(0.94); }

.btn-panel-save {
  background: var(--blue-500); color: #fff; border: none;
  padding: 5px 15px; border-radius: var(--r-md); font-size: var(--text-sm);
  font-weight: 700; cursor: pointer; font-family: inherit;
  transition: transform 60ms cubic-bezier(.3,0,.5,1), background var(--t-fast);
}
.btn-panel-save:hover { background: var(--blue-600); }
.btn-panel-save:active { transform: scale(0.94); background: var(--blue-700) !important; }

.btn-panel-delete {
  background: rgba(220,38,38,.12); color: #fca5a5;
  border: 1px solid rgba(220,38,38,.3); padding: 4px var(--sp-2);
  border-radius: var(--r-sm); font-size: var(--text-base); font-weight: 700;
  cursor: pointer; font-family: inherit;
  transition: transform 60ms cubic-bezier(.3,0,.5,1), background var(--t-fast);
}
.btn-panel-delete:hover { background: rgba(220,38,38,.22); }
.btn-panel-delete:active { transform: scale(0.94); background: rgba(220,38,38,.35) !important; }

/* Secondary actions in panel header (e.g. Email link) */
.panel-header .btn-secondary {
  background: rgba(255,255,255,.1);
  color: var(--slate-300);
  border-color: rgba(255,255,255,.15);
  font-size: var(--text-xs);
}
.panel-header .btn-secondary:hover {
  background: rgba(255,255,255,.18);
  color: var(--slate-100);
}

.panel-header button:active { transform: scale(0.94); }

/* Unified action-button icons (see erp_tags.icon). Outline SVGs that
   inherit the button's text color, so they render light + consistent on
   the dark header instead of the old multicolor emoji. */
.erp-icon { display: inline-block; vertical-align: -2px; flex: none; }
.erp-icon--spin { animation: erp-icon-spin 0.8s linear infinite; }
@keyframes erp-icon-spin { to { transform: rotate(360deg); } }

/* ── Panel Two-Col Layout ─────────────────────────────────────────────── */
.panel-two-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 575px;
  min-height: 100%;
  overflow: visible;
}
.panel-main {
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  overflow-y: visible;
}
.panel-sidebar {
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  background: var(--color-surface-raised);
  border-left: 1px solid var(--color-border);
  overflow-y: visible;
}

@media (max-width: 820px) {
  .panel-two-col { grid-template-columns: 1fr !important; }
  .panel-sidebar {
    display: flex; flex-direction: column; width: 100%;
    border-left: none; border-top: 1px solid var(--color-border);
    margin-top: 10px; padding-top: var(--sp-3); padding-bottom: 6px;
  }
  .panel-main { padding-bottom: 0; }

  /* Lead panel on mobile: hoist the mini-map + its quick-look chips out of the
     stacked sidebar so they sit right after the Details editor instead of at
     the very bottom. display:contents flattens the two columns into a single
     flex column on .panel-two-col--lead, then `order` interleaves the sidebar
     map/chips between Details and the rest of the form. Pure CSS — the map's
     Leaflet instance never moves in the DOM, so it survives HTMX morphs and
     needs no re-init. The gutter that .panel-main/.panel-sidebar normally
     provide is moved onto the flattened container. */
  .panel-two-col.panel-two-col--lead {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    padding: var(--sp-3);
  }
  .panel-two-col--lead > .panel-main,
  .panel-two-col--lead > .panel-sidebar {
    display: contents;
  }
  .panel-two-col--lead .panel-main > *,
  .panel-two-col--lead .panel-sidebar > * { order: 3; }
  .panel-two-col--lead .panel-main > .top-bar { order: 1; }
  .panel-two-col--lead .panel-main > .lead-details-group { order: 2; }
  .panel-two-col--lead .panel-sidebar > .panel-lead-map,
  .panel-two-col--lead .panel-sidebar > .lead-map-chips { order: 2; }
}

/* Narrow laptops (821-1536px): shrink the sidebar (map/files) so the form
   column stays the wider of the two. Pairs with the .panel-inner cap above. */
@media (min-width: 821px) and (max-width: 1536px) {
  .panel-two-col { grid-template-columns: minmax(0, 1fr) 510px; }
}

/* Tablet (769-1600px): tighten wide data tables so headers and search boxes
   don't get clipped. Base th/th-search min-width of 120px times 11 comms
   columns overflows the viewport. */
@media (min-width: 769px) and (max-width: 1600px) {
  .comms-table .th-search,
  .leads-table .th-search,
  .owners-table .th-search,
  .tasks-table .th-search { min-width: 0; }
  .comms-table.data-table th,
  .comms-table.data-table td { min-width: 0; }
  .comms-table th { white-space: normal; }
  .comms-table .sort-btn { white-space: normal; }

  /* Show a dedicated pills row under each comm (like mobile) so linked
     pills aren't clipped by the narrow linked-* columns. */
  .comms-table .msub-pills-row { display: table-row; }
  .comms-table .msub-pills-row td {
    border: none !important;
    border-bottom: 2px solid var(--slate-300, #cbd5e1) !important;
    padding: 6px 10px 8px !important;
  }
  /* Drop the divider between the main comm row and its pills row — they
     belong to the same record. The bolder border-bottom on the pills row
     separates one comm from the next. */
  .comms-table tbody tr[id^="comm-row-"] > td { border-bottom: none !important; }
  .comms-table .msub-pills-wrap { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
  .comms-table .msub-pills-wrap .msub-pill {
    max-width: 100%; flex-shrink: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis;
    display: inline-flex; align-items: center; gap: 4px; border: none;
    padding-right: 4px;
  }
  .comms-table .msub-pills-wrap .msub-pill-x {
    flex-shrink: 0;
    font-size: 13px; line-height: 1;
    background: none; border: none; cursor: pointer;
    padding: 2px 5px; margin-left: 2px;
    border-radius: 10px;
    color: inherit; opacity: 0.45;
    min-width: 18px; min-height: 18px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: opacity var(--t-fast), background var(--t-fast);
  }
  .comms-table .msub-pills-wrap .msub-pill-x:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.08);
  }

  /* Hide inline pills in linked-* cells — pills now live in the pills row
     below. Keep the +Lead/+Owner/+Task add-linker chips (.ac-wrap) visible
     in their original column so the user can add links from the first row. */
  .comms-table td.hide-mobile .pill-link.pill-xs { display: none !important; }

  /* Tasks: 9 columns at the 120px floor plus the 180px Next Step input
     overflow a 13" viewport and force a horizontal scrollbar. Let the columns
     shrink to fit and let Next Step fill its cell (text clips instead). */
  .tasks-table.data-table { width: 100%; }
  .tasks-table.data-table th,
  .tasks-table.data-table td { min-width: 0; }
  .tasks-table .table-field--wide { width: 100%; min-width: 0; }

  /* Hand the Parent Task column's width to Next Step — Parent Task is usually
     empty ("—"), so Next Step gets the room it needs on narrow screens. */
  .tasks-table th:nth-child(6), .tasks-table td:nth-child(6) { width: 90px; }
  .tasks-table th:nth-child(9), .tasks-table td:nth-child(9) { width: 230px; }

}

/* Shorten "Linked " prefix at narrow widths so Leads/Owners/Tasks fit. */
@media (max-width: 1600px) {
  .hide-narrow { display: none; }
}


/* ── Mini Map ─────────────────────────────────────────────────────────── */
.panel-mini-map {
  isolation: isolate; position: relative; contain: layout paint;
  border: 1px solid var(--color-border); border-radius: var(--r-lg);
  overflow: hidden; height: 180px; flex-shrink: 0;
}
.panel-mini-map .leaflet-pane { z-index: 1 !important; }
.panel-mini-map .leaflet-top, .panel-mini-map .leaflet-bottom { z-index: 2 !important; }

/* ── Main map ─────────────────────────────────────────────────────────── */
#map-container { position: relative; z-index: 0; }

/* ── Custom map popup ─────────────────────────────────────────────────── */
.erp-popup .leaflet-popup-content-wrapper {
  padding: 0; border-radius: var(--r-xl); overflow: hidden;
  box-shadow: var(--shadow-xl);
}
.erp-popup .leaflet-popup-content { margin: 0; width: auto !important; }
.erp-popup .leaflet-popup-tip-container { margin-top: -1px; }

/* ── Map filters overlay ──────────────────────────────────────────────── */
.map-filter-bar {
  position: absolute; top: 10px; left: 50px; right: 10px; z-index: 800;
  display: flex; gap: 6px; align-items: center;
}
.map-filter-select {
  flex: 1; min-width: 0;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--r-md); padding: 5px 10px;
  font-size: var(--text-sm); font-weight: 500; color: var(--slate-800);
  box-shadow: var(--shadow-sm); cursor: pointer; outline: none;
}
.map-filter-select:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(29,78,216,.12); }
.map-filter-badge {
  background: var(--color-primary); color: #fff; border-radius: var(--r-full);
  padding: 3px 10px; font-size: var(--text-xs); font-weight: 600; white-space: nowrap;
}
.map-filter-clear {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--r-md); padding: 5px 8px;
  font-size: var(--text-xs); color: var(--slate-500); cursor: pointer;
  box-shadow: var(--shadow-sm);
}
.map-filter-clear:hover { background: var(--color-surface-raised); color: var(--slate-800); }
.map-filter-address { min-width: 220px; }

/* Address input lives in a relative wrapper so the autocomplete dropdown
   can position itself directly below the input without escaping the bar. */
.map-filter-address-wrap {
  position: relative;
  flex: 1 1 220px;
  min-width: 220px;
  display: flex;
}
.map-filter-address-wrap > .map-filter-address {
  flex: 1; min-width: 0; width: 100%;
}
.map-address-dropdown {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--r-md); box-shadow: var(--shadow-md);
  max-height: 280px; overflow-y: auto; z-index: 900;
  padding: 4px;
}
.map-address-pred {
  display: block; width: 100%; text-align: left;
  background: transparent; border: none; cursor: pointer;
  padding: 7px 10px; border-radius: var(--r-sm);
  font-family: inherit; color: var(--slate-800); line-height: 1.3;
}
.map-address-pred.is-highlight,
.map-address-pred:hover { background: var(--color-surface-raised); }
.map-address-pred .pred-main {
  display: block; font-size: var(--text-sm); font-weight: 600;
}
.map-address-pred .pred-secondary {
  display: block; font-size: var(--text-xs); color: var(--slate-500); margin-top: 1px;
}

@media (max-width: 768px) {
  /* On mobile the bar would otherwise overflow off-screen — wrap into rows
     so every control stays reachable. Status/Users sit two-up; the long
     "Zoom to leads" gets its own row; address input grows with Go button
     hugging beside it; Clear stays right-aligned. */
  .map-filter-bar { flex-wrap: wrap; gap: 4px; }
  .map-filter-bar select.map-filter-select {
    flex: 1 1 calc(50% - 2px);
    min-width: 0;
    font-size: var(--text-xs);
  }
  .map-filter-zoom {
    flex: 1 1 100% !important;
    font-size: var(--text-xs);
  }
  .map-filter-address-wrap {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }
  .map-filter-address {
    font-size: var(--text-xs);
  }
  .map-filter-go {
    flex: 0 0 auto !important;
    font-size: var(--text-xs);
  }
  .map-filter-clear { flex: 0 0 auto; margin-left: auto; }
}

/* ── Scheduling calendar (FullCalendar) ───────────────────────────────── */
/* Fill the screen below the header/tabs (same offset the Map tab uses) and lay
   out as a column so the filter bar takes its natural height and the calendar
   flexes to fill the rest — the grid fits the viewport with no page scroll. */
#schedule-container { padding: 12px; height: calc(100vh - 110px); display: flex; flex-direction: column; }
/* Toolbar above the calendar — reuses .map-filter-select for the controls but,
   unlike the map's absolutely-positioned bar, sits in normal flow. */
.cal-filter-bar {
  display: flex; gap: 6px; align-items: center;
  margin-bottom: 12px; flex-wrap: wrap;
}
.cal-filter-bar > .map-filter-select { flex: 1 1 160px; }
#erp-calendar { font-size: var(--text-sm); flex: 1; min-height: 0; }
/* Two-line event chip: bold title + muted next-step, each clipped to one line
   so a long next-step can't blow out the day cell. */
.fc-ev { overflow: hidden; line-height: 1.25; }
.fc-ev-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-ev-next {
  font-size: var(--text-xs); opacity: .85;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fc .fc-event { cursor: pointer; }
/* FullCalendar builds its grid out of <table>/<th>/<td>, so the app's global
   table rules above (`table { min-width: 600px }`, `th`/`td { padding; sticky }`,
   `border-collapse: collapse`) leak into the calendar and collapse the day
   columns — a long event title balloons its own column and squashes the rest.
   Re-pin the calendar's grid tables to an equal-width fixed layout (!important
   because FullCalendar injects its own stylesheet after app.css) and strip the
   leaked cell styling. */
#erp-calendar .fc-scrollgrid-sync-table,
#erp-calendar .fc-col-header {
  table-layout: fixed !important; width: 100% !important; min-width: 0 !important;
  border-collapse: separate !important;
}
#erp-calendar th, #erp-calendar td { padding: 0; }
#erp-calendar th { position: static; background: none; text-transform: none; letter-spacing: normal; }
#erp-calendar .fc-daygrid-event { min-width: 0; overflow: hidden; }
/* The same global rules also strip the grid cells' bottom border, so the last
   week row loses its bottom edge (middle rows borrow the next row's top border).
   Draw the grid's bottom frame line back. */
#erp-calendar .fc-scrollgrid { border-bottom: 1px solid var(--color-border); }

@media (max-width: 768px) {
  #schedule-container { padding: 6px; }
  .cal-filter-bar > .map-filter-select { flex: 1 1 calc(50% - 3px); font-size: var(--text-xs); }
}

/* ── Field Groups ─────────────────────────────────────────────────────── */
.field-group { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--r-lg); overflow: visible; }

.collapsible-hdr {
  display: flex !important; align-items: center; justify-content: space-between;
  padding: 8px 14px; border-bottom: 1px solid var(--color-border);
  font-size: var(--text-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: .8px;
  color: var(--slate-500); background: var(--color-surface-raised);
  cursor: pointer; user-select: none;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  transition: background var(--t-base);
}
.collapsible-hdr:hover { background: var(--slate-100); }
.collapsible-hdr.closed { border-bottom: none; border-radius: var(--r-lg); }
.collapsible-body { padding: 10px 12px; }

.field-grid   { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--sp-2); }
.field-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.field-grid-4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: var(--sp-2); }
.field-full   { grid-column: 1 / -1; }

/* ── Form Fields ──────────────────────────────────────────────────────── */
.field-label {
  font-size: var(--text-xs); font-weight: 700; color: var(--slate-500);
  display: flex; align-items: center; gap: 3px;
  margin-bottom: 2px; text-transform: uppercase; letter-spacing: .5px;
}
.field-label .req { color: var(--color-danger); }
.field-input {
  background: transparent; border: none; border-bottom: 1px solid var(--slate-300);
  color: var(--color-text); padding: 5px 2px; border-radius: 0;
  font-size: var(--text-md); width: 100%; outline: none; font-family: inherit;
  transition: border-color var(--t-base), box-shadow var(--t-base);
}
.field-input[type="date"],
.field-input[type="datetime-local"],
.field-input[type="time"] { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; }
.field-input:focus { border-bottom-color: var(--color-primary); box-shadow: inset 0 -1px 0 var(--color-primary); }
.field-input:disabled { background: transparent; color: var(--slate-400); }
/* Quick-fill controls sit in a grid matching the Channel/From/To/User row
   above (same column template + gap + side padding) so they line up directly
   beneath the From/To fields they act on, with no dividing border. */
.qf-fill { display: grid; gap: var(--sp-2); padding: 0 12px 8px; }
.qf-actions { grid-column: 2 / 4; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.qf-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--slate-100); border: 1px solid var(--slate-300); color: var(--slate-600);
  border-radius: var(--r-md); padding: 3px 10px; font-size: var(--text-xs);
  font-weight: 600; cursor: pointer; line-height: 1.4;
  transition: background var(--t-base), border-color var(--t-base), color var(--t-base);
}
.qf-chip svg { width: 13px; height: 13px; }
.qf-chip:hover { background: var(--slate-200); border-color: var(--color-primary); color: var(--color-primary); }
.qf-chip--primary {
  background: var(--color-primary-soft, #eff6ff); border-color: var(--color-primary);
  color: var(--color-primary);
}
.qf-chip--primary:hover { background: var(--color-primary); color: #fff; }
.field-textarea {
  background: var(--slate-50); border: 1px solid var(--slate-200);
  color: var(--color-text); padding: 6px var(--sp-2); border-radius: var(--r-sm);
  font-size: var(--text-base); width: 100%; outline: none; resize: vertical;
  font-family: inherit; min-height: 80px;
  transition: border-color var(--t-base);
}
.field-textarea:focus { border-color: var(--color-primary); }
.field-select {
  background: transparent; border: none; border-bottom: 1px solid var(--slate-300);
  color: var(--color-text); padding: 5px 2px; border-radius: 0;
  font-size: var(--text-md); width: 100%; outline: none; cursor: pointer;
  font-family: inherit; height: auto;
  transition: border-color var(--t-base);
}
.field-select:focus { border-bottom-color: var(--color-primary); outline: none; }
.date-input-wrap { display: flex; align-items: center; gap: 6px; width: 100%; }
.date-input-wrap .field-input { flex: 1; }
.date-clear-btn {
  background: var(--slate-100); border: 1px solid var(--slate-300); color: var(--slate-600);
  border-radius: var(--r-md); padding: 5px var(--sp-2); font-size: var(--text-base);
  font-weight: 600; cursor: pointer; flex-shrink: 0;
  transition: background var(--t-base);
}
.date-clear-btn:hover { background: var(--slate-200); }
.date-clear-btn:active { transform: scale(0.94); }
.sched-wrap { background: var(--sky-100); border: 1px solid #7dd3fc; border-radius: var(--r-md); padding: 7px var(--sp-2); }
.sched-wrap .field-label { color: var(--sky-700) !important; }

/* ── Top Bar (pinned fields) ──────────────────────────────────────────── */
.top-bar { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--r-lg); overflow: visible; }
.top-bar-row { padding: 8px 12px; display: grid; gap: var(--sp-2); align-items: end; }
.top-bar-row + .top-bar-row { border-top: 1px solid var(--color-border); }
/* The .top-bar-fields wrapper breaks the Title-row → Status-row sibling
   adjacency, so re-draw that divider on the wrapper. On desktop the wrapper
   is transparent (its two rows lay out exactly as before); mobile turns it
   into the 6-col grid (see the max-width:768px block). */
.top-bar-fields { border-top: 1px solid var(--color-border); }
.top-bar-fields > .top-bar-row:first-child { border-top: none; }

/* ── Comm Card ────────────────────────────────────────────────────────── */
.comm-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--r-lg); overflow: hidden; }
.comm-card-hdr { display: flex; align-items: center; gap: var(--sp-2); padding: 8px 12px; cursor: pointer; transition: background var(--t-base); }
.comm-card-hdr:hover { background: var(--color-surface-raised); }
/* The collapsed comm preview is a bare <div>; if an expanded email ever leaks a
   `div{text-align:center}` rule into the page it would match this div directly
   and beat inherited alignment. Pin the header's text left so the preview can't
   be centred regardless. */
.comm-card-hdr, .comm-card-hdr div { text-align: left; }
.comm-channel-icon {
  width: 26px; height: 26px; border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-md); flex-shrink: 0;
}
.comm-card-body {
  padding: 10px 12px; border-top: 1px solid var(--color-border);
  background: var(--color-surface-raised); font-size: var(--text-md); line-height: 1.6;
}
.comm-card, .comm-card-hdr, .comm-card-body { width: 100%; max-width: 100%; }
.comm-card-hdr > * { min-width: 0; }
.comm-card-body { overflow-x: auto; }
.comm-body-html { max-width: 100%; overflow-wrap: anywhere; word-break: break-word; }
.comm-body-html img,
.comm-body-html table,
.comm-body-html iframe,
.comm-body-html pre { max-width: 100%; width: 100%; }
.comm-body-html pre { white-space: pre-wrap; }
.comm-ai { background: #fdf4ff; border: 1px solid var(--purple-200); border-radius: var(--r-md); padding: 8px 10px; margin-top: 8px; font-size: var(--text-base); }
.comm-ai-label { font-size: var(--text-sm); font-weight: 700; color: var(--purple-600); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 5px; }

/* ── File Manager ─────────────────────────────────────────────────────── */
.attachments-block {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-xl);
  padding: var(--sp-3);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.att-block-hdr { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-3); }
.att-block-title { font-size: 15px; font-weight: 700; color: var(--slate-900); }
.att-block-subtitle { font-size: var(--text-base); color: var(--slate-500); }
.att-hdr-actions { display: flex; gap: 6px; }
.att-list { display: flex; flex-direction: column; gap: 6px; }
.att-row {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 9px 12px; border: 1px solid var(--color-border);
  border-radius: var(--r-lg); background: var(--color-surface-raised);
  transition: border-color var(--t-base);
}
.att-row:hover { border-color: var(--slate-300); }
.att-icon-chip {
  width: 36px; height: 36px; border-radius: var(--r-lg);
  background: #e0e7ff; color: #312e81;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-xl); flex-shrink: 0;
}
.att-info { flex: 1; min-width: 0; }
.att-name {
  font-size: 15px; font-weight: 700; color: var(--color-text);
  background: none; border: none; padding: 0; cursor: pointer;
  text-align: left; font-family: inherit; width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: color var(--t-base);
}
.att-name:hover { color: var(--color-primary); }
.att-name-unavailable { opacity: .5; cursor: default; }
.att-name-unavailable:hover { color: inherit; }
.att-meta { font-size: var(--text-sm); color: var(--slate-500); margin-top: 2px; }
.att-actions { display: flex; gap: 6px; align-items: center; }
.att-btn {
  border: 1px solid var(--blue-100); background: var(--blue-50); color: var(--blue-700);
  padding: 4px 9px; border-radius: var(--r-md); font-size: var(--text-sm); font-weight: 700;
  cursor: pointer; font-family: inherit;
  display: inline-flex; align-items: center; gap: 4px; text-decoration: none;
  transition: background var(--t-fast);
}
.att-btn:hover { background: #e0e7ff; }
.att-btn.ghost { background: var(--color-surface); border-color: var(--color-border); color: var(--slate-600); }
.att-btn.ghost:hover { background: var(--color-surface-raised); }
.att-btn.danger { background: var(--red-50); border-color: var(--red-200); color: var(--red-600); }
.att-btn.danger:hover { background: var(--red-100); }
.att-btn-cover-on { background: var(--amber-50); border-color: var(--amber-200); color: var(--amber-800); }
.att-btn-cover-on:hover { background: var(--amber-100); }
.att-row-cover { background: var(--amber-50); border-radius: var(--r-md); }
.att-cover-preview { margin-bottom: 8px; }
.att-empty {
  border: 1px dashed var(--slate-300); border-radius: var(--r-lg);
  padding: 16px; font-size: var(--text-md); color: var(--slate-400); text-align: center;
}
.att-drop-wrap { border: 1px dashed var(--color-border); border-radius: var(--r-xl); padding: 6px; background: var(--color-surface-raised); }
.drop-zone {
  border: 2px dashed var(--slate-300); border-radius: var(--r-lg);
  padding: 14px; text-align: center; cursor: pointer;
  transition: all var(--t-base); font-size: var(--text-md); color: var(--slate-600); background: var(--color-surface);
}
.drop-zone:hover, .drop-zone.dragover { border-color: var(--color-primary); background: var(--blue-50); color: var(--color-primary); }
.att-uploading { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); font-weight: 600; color: var(--color-primary); }
.spinner {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--slate-300); border-top-color: var(--color-primary);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.att-table { width: 100%; border-collapse: collapse; font-size: var(--text-md); }
.att-table th { padding: 5px var(--sp-2); font-size: var(--text-sm); font-weight: 700; text-transform: uppercase; color: var(--slate-500); background: var(--color-surface-raised); border-bottom: 1px solid var(--color-border); text-align: left; }
.att-table td { padding: 6px var(--sp-2); border-bottom: 1px solid var(--color-border-light); vertical-align: middle; }
.att-table tr:last-child td { border-bottom: none; }

/* ── File Viewer ──────────────────────────────────────────────────────── */
.file-viewer {
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(15,23,42,.88);
  display: flex; align-items: center; justify-content: center; padding: 30px;
}
.file-viewer-panel {
  width: min(960px, 96vw); height: min(85vh, 900px);
  background: var(--color-surface); border-radius: var(--r-2xl);
  box-shadow: 0 28px 64px rgba(15,23,42,.45);
  display: flex; flex-direction: column; overflow: hidden;
}
.file-viewer-bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: 12px 18px; background: var(--slate-900); color: var(--slate-100);
}
.file-viewer-title { font-size: 15px; font-weight: 700; }
.file-viewer-actions { display: flex; gap: var(--sp-2); }
.file-viewer-frame { flex: 1; border: none; background: var(--color-surface); }

/* ── Autocomplete ─────────────────────────────────────────────────────── */
.ac-wrap { position: relative; }
.ac-dropdown {
  position: absolute; top: 100%; left: 0; right: 0; min-width: 220px;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg); z-index: 100;
  max-height: 300px; overflow-y: auto;
}
.ac-item { padding: 7px 10px; font-size: 15px; cursor: pointer; transition: background var(--t-fast); }
.ac-item:hover { background: var(--blue-50); }

/* pill badges inside ac-item */
.pill-lead  { background: #dbeafe; color: #1e40af; }
.pill-owner { background: #fef3c7; color: #92400e; }
.pill-task  { background: #d1fae5; color: #065f46; }

/* ── WYSIWYG ──────────────────────────────────────────────────────────── */
.wysiwyg-wrap { border: 1px solid var(--color-border); border-radius: var(--r-md); overflow: hidden; }
.wysiwyg-toolbar { display: flex; gap: 2px; padding: 4px 6px; border-bottom: 1px solid var(--color-border); background: var(--color-surface-raised); flex-wrap: wrap; }
.wysiwyg-toolbar button { background: none; border: 1px solid transparent; border-radius: var(--r-xs); padding: 2px 5px; cursor: pointer; font-size: var(--text-base); color: var(--slate-600); font-family: inherit; transition: background var(--t-fast); }
.wysiwyg-toolbar button:hover { background: var(--slate-200); border-color: var(--slate-300); }
.wysiwyg-toolbar button.active { background: var(--blue-100); color: var(--blue-700); border-color: var(--blue-200); }
.wysiwyg-editor { min-height: 100px; padding: 8px 10px; font-size: var(--text-lg); line-height: 1.6; color: var(--color-text); outline: none; overflow-y: auto; }
.wysiwyg-editor:empty::before { content: attr(data-placeholder); color: var(--slate-400); }
.wysiwyg-editor p { margin: 0 0 0.6em 0; }
.wysiwyg-editor p:last-child { margin-bottom: 0; }
.wysiwyg-editor ul, .wysiwyg-editor ol { margin: 0 0 0.6em 0; padding-left: 1.6em; }
.wysiwyg-editor ul { list-style: disc; }
.wysiwyg-editor ol { list-style: decimal; }

/* ── Trix editor (lead/owner/task notes) ──────────────────────────────────
   Real editor that owns its own hidden <input>; replaces the hand-rolled
   contenteditable above for these three fields (comm still uses .wysiwyg-*). */
.trix-wrap trix-toolbar { margin-bottom: 4px; }
/* Single-row toolbar; comfortable on desktop, compact on mobile (below). */
.trix-wrap trix-toolbar .trix-button-row { flex-wrap: nowrap; overflow-x: auto; }
.trix-wrap trix-toolbar .trix-button-group { margin: 0 6px 0 0; }
.trix-wrap trix-toolbar .trix-button { height: 1.8rem; padding: 0 0.5em; font-size: 0.8em; }
.trix-wrap trix-toolbar .trix-button--icon { width: 2.3em; }
/* No upload handler is wired — hide attach/file tools so users can't insert
   un-uploadable attachments. */
.trix-wrap trix-toolbar .trix-button-group--file-tools { display: none; }
/* Drop the nesting (decrease/increase level) buttons — not needed for notes. */
.trix-wrap trix-toolbar [data-trix-action="decreaseNestingLevel"],
.trix-wrap trix-toolbar [data-trix-action="increaseNestingLevel"] { display: none; }
/* Mobile: shrink the toolbar so all buttons still fit on one row. */
@media (max-width: 768px) {
  .trix-wrap trix-toolbar .trix-button { height: 1.4rem; padding: 0 0.3em; font-size: 0.65em; }
  .trix-wrap trix-toolbar .trix-button--icon { width: 1.8em; }
}
.trix-wrap trix-editor {
  min-height: 200px; padding: 8px 10px; background: #fff;
  border: 1px solid var(--color-border); border-radius: var(--r-md);
  font-size: var(--text-lg); line-height: 1.6; color: var(--color-text);
  overflow-y: auto;
}

/* ── Related Items ────────────────────────────────────────────────────── */
.related-table { width: 100%; border-collapse: collapse; font-size: var(--text-md); margin-top: 6px; min-width: auto; }
.related-table th { padding: 4px 6px; font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; color: var(--slate-500); background: var(--color-bg); border-bottom: 1px solid var(--color-border); text-align: left; overflow: hidden; text-overflow: ellipsis; }
.related-table td { padding: 5px 6px; border-bottom: 1px solid var(--color-border-light); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.related-table th:last-child, .related-table td:last-child { width: 50px; min-width: 50px; max-width: 50px; overflow: visible; white-space: normal; text-align: center; padding: 5px 2px; }
.related-table tr:last-child td { border-bottom: none; }
.related-table tr:hover td { background: var(--color-surface-raised); }

/* × button in related tables */
.related-table td:last-child button, .btn-unlink {
  background: none; border: none; color: var(--slate-400);
  cursor: pointer; font-size: 20px; font-weight: 700;
  line-height: 1; padding: 4px 6px; transition: color var(--t-base);
  display: inline-block !important; min-width: 24px; text-align: center;
}
.related-table td:last-child button:hover, .related-table tr:hover td:last-child button,
.btn-unlink:hover, .related-table tr:hover .btn-unlink { color: #ef4444; }
.related-link { color: var(--color-primary); font-weight: 600; cursor: pointer; text-decoration: none; }
.related-link:hover { text-decoration: underline; }

/* ── Toast ────────────────────────────────────────────────────────────── */
.toast { position: fixed; bottom: 24px; right: 24px; background: var(--slate-900); color: var(--slate-100); padding: 10px 18px; border-radius: var(--r-lg); font-size: 15px; font-weight: 600; z-index: 9999; box-shadow: var(--shadow-xl); }
.save-toast { background: var(--green-50); color: var(--green-700); border: 1px solid var(--green-200); border-radius: var(--r-sm); padding: 5px 10px; font-size: var(--text-base); font-weight: 600; display: inline-block; }
.error-msg { color: var(--color-danger); font-size: var(--text-base); font-weight: 600; margin-top: 4px; }
/* Phones: center the toast. With only `right:24px`, a long message (e.g. the
   contact-gate warning) stretches from the right edge and sits off-center on
   narrow screens like 375px. Symmetric left/right + centered text fills the
   width with equal margins (no transform, so Alpine's x-transition is safe). */
@media (max-width: 768px) {
  .toast { left: 12px; right: 12px; bottom: 16px; text-align: center; }
}

/* ── Type Badges ──────────────────────────────────────────────────────── */
.type-badge { display: inline-block; padding: 2px 7px; border-radius: var(--r-full); font-size: var(--text-xs); font-weight: 700; border: 1px solid; }
.type-task  { background: var(--purple-50);  color: var(--purple-700); border-color: var(--purple-200); }
.type-lead  { background: var(--green-50);   color: var(--green-700);  border-color: var(--green-200); }
.type-owner { background: var(--teal-50);    color: var(--teal-700);   border-color: var(--teal-200); }
.type-homelead { background: var(--chip-homelead-bg); color: var(--chip-homelead-text); border-color: var(--chip-homelead-border); }

/* ── Settings Panel ───────────────────────────────────────────────────── */
.settings-panel { width: min(900px, calc(100vw - 10px)); overflow-y: auto; }
.settings-section { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--r-lg); margin-bottom: var(--sp-3); overflow: hidden; }
.settings-hdr { padding: 10px 14px; border-bottom: 1px solid var(--color-border); font-size: var(--text-base); font-weight: 700; color: var(--color-text); background: var(--color-surface-raised); }
.settings-body { padding: 14px; }

/* ── Overdue Dashboard ────────────────────────────────────────────────── */
.od-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: var(--sp-3); }
.od-card {
  background: var(--color-surface); border-radius: var(--r-lg); padding: 12px 14px;
  cursor: pointer; border: 2px solid; transition: border-color var(--t-base), box-shadow var(--t-base);
  box-shadow: var(--shadow-xs);
}
.od-card:hover { box-shadow: var(--shadow-md); }
/* Selected state when a card is acting as the active type filter. */
.od-card--active { background: var(--blue-50); box-shadow: 0 0 0 2px var(--blue-500), var(--shadow-md); }
.od-card-num { font-size: 28px; font-weight: 900; line-height: 1; }
.od-card-label { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .5px; margin-top: 3px; }
.od-card-clear { font-size: var(--text-2xs); color: var(--green-700); margin-top: 2px; }
.od-card--task  .od-card-num, .od-card--task  .od-card-label { color: var(--red-600); }
.od-card--lead  .od-card-num, .od-card--lead  .od-card-label { color: #c2410c; }
.od-card--owner .od-card-num, .od-card--owner .od-card-label { color: var(--amber-700); }
.od-card--homelead .od-card-num, .od-card--homelead .od-card-label { color: #be185d; }
.od-load-more td { padding: var(--sp-2); text-align: center; color: var(--slate-400); font-size: var(--text-xs); }
.od-empty-state {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--r-lg); padding: 40px; text-align: center;
}
.od-empty-state-icon { font-size: 32px; margin-bottom: 8px; }
.od-empty-state-text { font-size: var(--text-lg); font-weight: 700; color: var(--color-text); }
.od-filters { display: flex; gap: 7px; margin-bottom: 10px; flex-wrap: wrap; }
.od-search { width: 200px; }
.od-subject  { font-weight: 600; font-size: var(--text-sm); }
.od-due-date { color: var(--red-600); font-weight: 700; font-size: var(--text-xs); }
.od-status-item {
  padding: 7px 14px; cursor: pointer; font-size: var(--text-sm); color: var(--slate-700);
  transition: background var(--t-fast);
}
.od-status-item:hover { background: var(--slate-100); }

/* ── Login ────────────────────────────────────────────────────────────── */
.login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--slate-100) 0%, #eef2ff 100%);
}
.login-box {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--r-2xl); padding: 36px 32px;
  width: 380px; box-shadow: var(--shadow-xl);
}
.login-logo { text-align: center; margin-bottom: 22px; }
.login-logo img { height: 48px; }
.login-title { font-size: var(--text-2xl); font-weight: 700; color: var(--color-text); text-align: center; margin-bottom: 22px; }
.login-error {
  background: var(--red-50); border: 1px solid var(--red-200);
  border-radius: var(--r-md); padding: 10px 12px; margin-bottom: 14px;
  color: var(--red-600); font-size: var(--text-sm); font-weight: 600;
}
.login-form-field { margin-bottom: 14px; }
.login-form-field-last { margin-bottom: 22px; }
.login-submit { width: 100%; padding: 11px; font-size: var(--text-md); }

/* ── Leaflet Overrides ────────────────────────────────────────────────── */
.leaflet-container { border-radius: 0 !important; }
.leaflet-popup-content-wrapper { border-radius: var(--r-xl) !important; padding: 0 !important; overflow: hidden; box-shadow: 0 8px 30px rgba(0,0,0,.18) !important; }
.leaflet-popup-content { margin: 0 !important; min-width: 200px; }
.leaflet-popup-tip { display: none; }
/* Outlook-generated email bodies ship a <style>a:link{color:blue;
   text-decoration:underline}</style> that leaks to the whole page
   (rendered inline without shadow/iframe isolation). Leaflet's zoom
   +/- are <a> tags, so they get browser-blue + underlined unless we
   force them back to Leaflet's default look. Scoped to .leaflet-bar
   descendants so it only touches map chrome, not app links. */
.leaflet-bar a, .leaflet-bar a:link, .leaflet-bar a:visited,
.leaflet-bar a:hover, .leaflet-bar a:active {
  color: #333 !important;
  text-decoration: none !important;
}

/* ── Inline field row grids (used inside panels) ─────────────────────── */
.field-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.field-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.field-row-4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 8px; }
.field-row-1-1-2 { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 8px; }

/* ── Mobile ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Chrome's table-layout: fixed algorithm still factors in inline `width`
     hints on display:none cells (legacy quirk), so we explicitly zero them
     to keep fixed-width layouts from stealing space from the title column. */
  .hide-mobile { display: none !important; width: 0 !important; min-width: 0 !important; max-width: 0 !important; }
  .app-header { height: 44px; padding: 0 10px; }
  .logo { height: 28px; }
  .header-right { gap: 5px; }
  .header-search { max-width: 160px; margin: 0 var(--sp-2); }
  .header-search-input { font-size: var(--text-xs); }
  .global-search-results {
    position: fixed;
    top: 44px;
    left: 8px;
    right: 8px;
    max-height: 60vh;
    border-radius: var(--r-lg);
  }
  .search-result-item {
    min-height: 44px;
    padding: 10px 14px;
    flex-wrap: wrap;
    gap: 4px;
  }
  .search-result-badges { flex-wrap: wrap; }
  .search-result-name { min-width: 0; }
  .search-result-lead-pill { max-width: 100px; }
  .main-tabs { padding: 0 var(--sp-2); }
  .tab { padding: 8px 9px; font-size: var(--text-base); }
  .main-content { padding: var(--sp-2); max-width: 100vw; }
  .tab-toolbar { margin-bottom: 6px; }
  .btn-primary, .btn-secondary { font-size: var(--text-base); padding: 4px var(--sp-2); }
  .btn-open { background: none; color: var(--blue-700); padding: 4px 6px; font-size: 18px; line-height: 1; }
  .btn-open .btn-open-text { display: none; }
  .btn-open .btn-open-arrow { display: inline; }
  .mobile-sub { display: flex; gap: 4px; align-items: center; margin-top: 1px; padding-bottom: 0; flex-wrap: wrap; font-size: 11px; color: #6b7280; }
  .mobile-sub .msub-item { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
  .mobile-sub .msub-item--overdue { color: #dc2626; font-weight: 700; }
  .mobile-sub .msub-pill { font-size: 10px; padding: 1px 5px; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.3; }
  .comms-subject-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; max-width: 60vw; }
  .comms-subject-cell { max-width: none !important; position: relative; }
  .comms-table { border-collapse: separate; border-spacing: 0; }
  .comms-table td { border: none; }
  /* One thin divider between comm rows (on the pills-row's bottom) — the
     main row keeps 4px of breathing room above its content. The previous
     2px top + 1px bottom stack added ~13px between rows on mobile. */
  .comms-table .row-clickable td { padding-top: 4px; padding-bottom: 0; }
  .comms-table tbody tr:first-child td { border-top: none; }
  .comms-table .msub-pills-row { display: table-row; }
  .comms-table .msub-pills-row td {
    border: none !important;
    border-bottom: 1px solid var(--color-border) !important;
    /* Match the 10px left padding of the base td rule so chips align
       under the subject text instead of running flush to the cell edge.
       Some rows otherwise render the pills row visibly indented further
       left than the row above, reading as a broken layout. */
    padding: 0 10px 4px 10px !important;
    box-sizing: border-box;
  }
  .msub-pills-wrap { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 0; padding: 0; min-width: 0; max-width: 100%; }
  .msub-pills-wrap .msub-pill { max-width: 100%; flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; display: inline-flex; align-items: center; gap: 2px; border: none; }
  .msub-pill-x { flex-shrink: 0; font-size: 14px; line-height: 1; opacity: 0.5; background: none; border: none; padding: 2px 4px; cursor: pointer; min-width: 24px; min-height: 24px; display: inline-flex; align-items: center; justify-content: center; }
  /* On mobile the add-linker chips live inside .mobile-sub (subject cell).
     Hide the new pills-row linkers so they don't duplicate. */
  .comms-table .msub-pills-row .msub-linker-wrap { display: none; }
  .msub-pill-x:hover { opacity: 1; }
  .msub-linker-wrap { position: relative; display: inline-flex; flex-shrink: 0; }
  .msub-linker-wrap--open { flex-grow: 1; min-width: 100px; }
  .msub-linker-input {
    font-size: 10px; padding: 4px 8px; border-radius: 10px;
    border: none;
    background: transparent; cursor: pointer; width: 52px; text-align: center;
    line-height: 1.3; font-weight: 500; outline: none;
    -webkit-appearance: none; appearance: none;
    min-height: 24px;
  }
  .msub-linker-wrap--open .msub-linker-input { width: 100%; text-align: left; border: 1px solid; border-bottom: none; }
  .msub-linker-input.chip-lead { border-color: var(--chip-lead-border); color: var(--chip-lead-text); }
  .msub-linker-input.chip-lead:focus { background: var(--chip-lead-bg); }
  .msub-linker-input.chip-owner { border-color: var(--chip-owner-border); color: var(--chip-owner-text); }
  .msub-linker-input.chip-owner:focus { background: var(--chip-owner-bg); }
  .msub-linker-input.chip-task { border-color: var(--chip-task-border); color: var(--chip-task-text); }
  .msub-linker-input.chip-task:focus { background: var(--chip-task-bg); }
  .msub-linker-input.chip-homelead { border-color: var(--chip-homelead-border); color: var(--chip-homelead-text); }
  .msub-linker-input.chip-homelead:focus { background: var(--chip-homelead-bg); }
  /* max-height: none — on mobile the wrapper is overflow:visible and the whole
     page scrolls, so the desktop `max-height: calc(100vh - 155px)` (line ~715)
     would cap the bordered frame mid-list while rows spill out below it. Same
     fix the overdue tab already carries (#overdue-content .tbl-wrap). */
  .tbl-wrap--comms { overflow: visible; max-height: none; }
  .comms-subject-cell { overflow: visible !important; }
  .comms-subject-cell .msub-linker-wrap { display: inline-flex !important; }
  .comms-table { overflow: visible; table-layout: auto !important; width: 100% !important; }
  .msub-linker-wrap .ac-dropdown { z-index: 200; }
  .mobile-sub .mobile-field-row { display: flex; gap: 4px; width: 100%; margin-top: 4px; flex-wrap: wrap; }
  .mobile-field { font-size: 11px; padding: 3px 5px; border: 1px solid #d1d5db; border-radius: 4px; background: #fff; color: #111827; }
  .mobile-field:focus { border-color: #93c5fd; outline: none; }
  .mobile-field--date { width: 110px; }
  .mobile-field--select { max-width: 100px; }
  .mobile-field--text { flex: 1; min-width: 80px; }
  .mobile-only { display: inline-flex !important; }
  .mobile-only-th { display: table-cell !important; }
  .mobile-only-td { display: table-cell !important; }
  .mobile-only-th > *, .mobile-only-td > * { display: inline-block !important; }
  .user-avatar { display: inline-flex; align-items: center; justify-content: center; }
  table.data-table th:first-child, table.data-table td:first-child { width: auto; }
  th { padding: 6px; font-size: var(--text-xs); }
  td { padding: 6px; font-size: var(--text-base); }
  .th-search { width: 64px; min-width: 0; font-size: var(--text-xs); padding: 2px 4px; }
  /* Primary column (title/name/subject) gets a wider search box — twice the
     default. Long-tail tables (Leads/Owners/Tasks/Contacts have it in col 1;
     Comms has subject in col 2). */
  .leads-table th:first-child .th-search,
  .owners-table th:first-child .th-search,
  .tasks-table th:first-child .th-search,
  .contacts-table th:first-child .th-search,
  .comms-table th:nth-child(2) .th-search { width: 128px !important; }
  /* Secondary filter (status/user/company on the right) — right-aligned within
     its cell so the field hugs the column edge, plus `direction: rtl` so the
     native <select>'s options popup opens leftward (away from the viewport
     edge) instead of getting clipped on the right. We restore LTR on the
     option text so labels still read normally. */
  .leads-table th:nth-child(2) .th-search,
  .owners-table th:nth-child(2) .th-search,
  .tasks-table th:nth-child(2) .th-search,
  .comms-table .mobile-only-th .th-search,
  .contacts-table th:nth-child(2) .th-search {
    margin-left: auto !important; display: block !important;
    text-align: right;
  }
  /* Right-aligned select. `direction: rtl` flips the writing mode so the
     native dropdown options popup opens leftward (away from the viewport
     edge) instead of right (which clips on a 375px screen). To keep the
     chevron visually on the right, we use the `right 8px center` keyword
     form for `background-position` — that's anchored to the physical right
     edge regardless of `direction`. (`calc(100% - X)` would flip with rtl
     and put the chevron on the visual left, which is what we don't want.) */
  .leads-table th:nth-child(2) select.th-search,
  .owners-table th:nth-child(2) select.th-search,
  .tasks-table th:nth-child(2) select.th-search,
  .comms-table .mobile-only-th select.th-search {
    direction: rtl; text-align-last: right;
    padding-right: 18px !important; padding-left: 4px !important;
    background-position: right 14px center, right 8px center !important;
  }
  /* Restore LTR for option labels so they read normally in the popup. */
  .leads-table th:nth-child(2) select.th-search option,
  .owners-table th:nth-child(2) select.th-search option,
  .tasks-table th:nth-child(2) select.th-search option,
  .comms-table .mobile-only-th select.th-search option { direction: ltr; text-align: left; }
  .col-count { font-size: var(--text-sm); }

  /* ── Prevent all tables from causing horizontal scroll ── */
  .main-content { padding-left: var(--sp-2); padding-right: var(--sp-2); overflow-x: hidden; }
  .tbl-wrap { overflow-x: hidden; -webkit-overflow-scrolling: touch; max-width: 100%; box-sizing: border-box; }
  .tbl-wrap--comms { overflow-x: visible !important; }
  table { min-width: 0 !important; width: 100% !important; max-width: 100% !important; table-layout: auto !important; box-sizing: border-box; }
  table.data-table { table-layout: auto !important; width: 100% !important; max-width: 100% !important; }
  table.data-table th, table.data-table td { min-width: 0; overflow: hidden; text-overflow: ellipsis; word-break: break-word; box-sizing: border-box; }

  /* ── Status column across all tables — keep visible on mobile ──
     Force table-layout: fixed (outranks the `table.data-table { table-layout:
     auto !important }` mobile rule by adding a second class to the selector).
     With fixed layout: col1 (title) takes remaining space automatically, col2
     (status) is pinned to 96px, and `overflow:hidden`/`text-overflow:ellipsis`
     work on cells. The first-child rule below intentionally sets NO width so
     the browser distributes remaining space to it. */
  table.leads-table.data-table,
  table.owners-table.data-table,
  table.tasks-table.data-table { table-layout: fixed !important; }
  .leads-table td:nth-child(2),
  .owners-table td:nth-child(2),
  .tasks-table td:nth-child(2) {
    width: 96px !important; text-align: right; white-space: nowrap; vertical-align: middle; padding: 4px !important; box-sizing: border-box; overflow: hidden !important;
  }
  .leads-table th:nth-child(2),
  .owners-table th:nth-child(2),
  .tasks-table th:nth-child(2) { width: 96px !important; text-align: right; padding: 4px !important; box-sizing: border-box; overflow: hidden !important; }
  .leads-table td:nth-child(2) .status-pill,
  .owners-table td:nth-child(2) .status-pill,
  .tasks-table td:nth-child(2) .status-pill { max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: inline-block; vertical-align: middle; font-size: 10px; }
  .leads-table td:nth-child(2) .field-select,
  .owners-table td:nth-child(2) .field-select,
  .tasks-table td:nth-child(2) .field-select { font-size: 10px; padding: 2px 4px; max-width: 100%; }

  /* ── Comms table mobile columns ── */
  .comms-table th:first-child,
  .comms-table td:first-child { width: 32px !important; padding: 2px 4px !important; max-width: 48px !important; }
  .comms-table th:first-child .sort-btn { display: none; }
  .comms-table th:first-child { vertical-align: bottom !important; }
  .comms-table th:first-child .th-search { width: 40px !important; min-width: 0 !important; font-size: 9px; padding: 2px; }
  /* Mobile first column = channel icon only. Hide every span after the icon
     (the channel word, and the call-outcome pill) — keyed off :not(:first-child)
     rather than :last-child so a trailing call-outcome pill can't make the word
     leak through on call rows. */
  .comms-table td:first-child > span:not(:first-child) { display: none; }
  /* Open-col (delete X) is moved INTO the mobile-sub flex line on small screens so
     the X sits next to the linker chips instead of leaving an empty right-edge
     column. Hide the original cell entirely so the table doesn't reserve space. */
  .comms-table .open-col,
  .comms-table th.open-col { display: none !important; }
  .comms-table .btn-danger { font-size: 14px; padding: 2px 5px; min-width: 0; }
  .comms-table .msub-delete-btn { font-size: 13px; padding: 1px 6px; line-height: 1; }

  /* ── Overdue table — keep Status column visible ── */
  #overdue-content table { table-layout: fixed !important; }
  /* The overdue tab has stat cards + a search row above the table, so the
     table's own `max-height: calc(100vh - 155px)` (tuned for the card-less
     leads/owners/tasks tabs) overflows .main-content and produces a second
     scrollbar. Scope-fix: let the overdue table flow inside the single
     .main-content scroller. Other tabs keep their own table scroll. */
  #overdue-content .tbl-wrap { max-height: none; overflow-y: visible; }

  /* ── Leads / Owners / Tasks — title cell takes remaining space ──
     With table-layout: fixed, Chrome won't distribute remaining width to
     "auto" cells when other cells have explicit pixel widths — col1 collapses
     to min-content (~32px). And `calc(100% - X)` doesn't resolve correctly
     for table cell widths in fixed layout (parent reference is fuzzy), but
     `calc(100vw - X)` does. We size col1 against viewport minus:
       16px (main padding) + 96px (status col) + 8px (table border + safety). */
  .leads-table th:first-child,
  .owners-table th:first-child,
  .tasks-table th:first-child { width: calc(100vw - 120px) !important; overflow: hidden; text-overflow: ellipsis; word-break: break-word; }
  .leads-table td:first-child,
  .owners-table td:first-child,
  .tasks-table td:first-child { overflow: hidden; text-overflow: ellipsis; word-break: break-word; }
  .tasks-table th:nth-child(2) { text-align: right; }
  .tasks-table th:nth-child(2) .sort-btn { justify-content: flex-end; }
  .tasks-table th:nth-child(2) .th-search { width: 100%; max-width: 100%; float: right; overflow: hidden; text-overflow: ellipsis; }
  .tasks-table td:first-child .table-field { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* ── Contacts table mobile columns ──
     At 375px there is no room for 3 inline-edit inputs side by side without
     squeezing each to ~10 chars. Hide Trade on mobile (still in mobile-sub of
     the Name cell) so Name and Company get usable widths. */
  .contacts-table th:nth-child(3),
  .contacts-table td:nth-child(3) { display: none !important; }
  .contacts-table th:first-child,
  .contacts-table td:first-child { width: 58%; }
  .contacts-table th:nth-child(2),
  .contacts-table td:nth-child(2) { width: 42%; }
  .contacts-table th, .contacts-table td { overflow: hidden; text-overflow: ellipsis; }
  .contacts-table .contacts-inline-input { font-size: 12px; padding: 4px 6px; width: 100%; min-width: 0; }
  .contacts-table .contact-row-actions .btn-secondary { padding: 3px 6px; font-size: 10px; }

  /* ── Overdue table mobile columns ── */
  /* Wide enough for the two-word "Home Lead" badge: at 52px it overflowed the
     fixed-layout cell (nowrap) and overlapped the Subject column. */
  #overdue-content table th:first-child,
  #overdue-content table td:first-child { width: 68px; min-width: 68px; padding-right: 6px !important; }
  /* Belt-and-suspenders: keep the badge inside its cell whatever the label. */
  #overdue-content .type-badge { font-size: 9px; padding: 1px 6px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  #overdue-content table th:nth-child(2),
  #overdue-content table td:nth-child(2) { overflow: hidden; text-overflow: ellipsis; word-break: break-word; padding-left: 4px !important; }
  #overdue-content table th:last-child,
  #overdue-content table td:last-child { width: 110px; text-align: right; white-space: nowrap; overflow: hidden !important; }
  #overdue-content table td:last-child .status-pill { max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: inline-block; }
  /* SUBJECT (col 2) absorbs the leftover width so table-layout:fixed doesn't
     leave an empty strip on the right — Chrome won't auto-distribute it to two
     "auto" columns. NEXT STEP gets a fixed width so SUBJECT is the only
     flexible one. Mirrors the leads/owners/tasks calc(100vw - …) fix above.
     286px = 68 (type) + 84 (next step) + 110 (status) + ~24 (padding/border). */
  #overdue-content table th:nth-child(2),
  #overdue-content table td:nth-child(2) { width: calc(100vw - 286px) !important; }
  #overdue-content table th:nth-child(4),
  #overdue-content table td:nth-child(4) { width: 84px; overflow: hidden; text-overflow: ellipsis; }

  .table-field { width: 100%; }
  .table-field--date { width: 110px; }
  .table-field--select { width: 100%; }
  .table-field--wide { width: 100%; }
  .th-search { min-width: 0; }
  .lead-title-wrap { max-width: 100%; min-width: 0; display: flex; align-items: center; gap: 6px; }
  .lead-title-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; min-width: 0; flex: 1; }
  /* Status pill must respect its column width on mobile so long statuses
     ellipsize cleanly instead of being hard-clipped by the cell. */
  .status-pill { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; font-size: 10px; padding: 2px 5px; }
  #overdue-content .status-pill { max-width: 100%; font-size: 10px; padding: 2px 5px; }
  td.open-col, th.open-col { width: 28px !important; min-width: 28px !important; white-space: nowrap; padding: 2px 4px !important; }

  .panel-backdrop { justify-content: stretch; align-items: stretch; padding: 0; }
  .panel-inner { width: 100vw !important; max-width: 100vw !important; height: 100% !important; border-radius: 0; }
  .panel-vtab-bar { display: none !important; }
  .panel-header { padding: 8px 10px; flex-wrap: wrap; gap: 6px; }
  .panel-title { font-size: 15px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .panel-subtitle { font-size: var(--text-xs); }
  .panel-header-actions { gap: 4px; flex-shrink: 0; }
  .btn-panel-save { padding: 4px 9px; font-size: var(--text-base); }
  .btn-panel-close { padding: 3px 7px; font-size: var(--text-md); }
  .btn-panel-delete { padding: 3px 6px; font-size: var(--text-sm); }
  .panel-main { padding: var(--sp-2); gap: var(--sp-2); }
  .panel-sidebar { padding: var(--sp-2); gap: var(--sp-2); }
  .panel-content > form { min-width: 0; overflow-x: clip; }
  .panel-two-col { min-width: 0; overflow-x: clip; }
  .panel-main { min-width: 0; overflow-x: clip; }
  .panel-sidebar { min-width: 0; overflow-x: clip; }
  .related-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -2px; padding: 0 2px; }
  .related-table { min-width: 420px; }
  .od-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .od-card { padding: 5px 6px; min-height: 56px; }
  .od-card-num { font-size: 18px; }
  .od-card-label { font-size: 9px; margin-top: 1px; letter-spacing: 0; }
  .od-card-clear { display: none; }
  .od-filters { gap: 6px; flex-wrap: wrap !important; }
  .od-search { width: 145px !important; min-width: 145px; }
  .od-filters .btn-secondary { padding: 4px var(--sp-2); font-size: var(--text-base); white-space: nowrap; }

  .top-bar-row { padding: 6px var(--sp-2); gap: 6px; }
  .collapsible-hdr { padding: 6px var(--sp-2); font-size: var(--text-xs); }
  .collapsible-body { padding: var(--sp-2); }
  .field-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .field-grid-2, .field-grid-4 { grid-template-columns: 1fr 1fr !important; }
  .field-row-2 { grid-template-columns: 1fr 1fr !important; }
  .field-row-3 { grid-template-columns: 1fr 1fr 1fr !important; }
  .field-row-4 { grid-template-columns: 1fr 1fr !important; }
  .field-row-1-1-2 { grid-template-columns: 1fr 1fr 1fr !important; }
  .field-label { font-size: var(--text-sm); margin-bottom: 3px; }
  .field-input, .field-select, .field-textarea { font-size: var(--text-md); padding: 6px var(--sp-2); }
  .field-select { height: 30px; }
  .comm-card-hdr { padding: 6px var(--sp-2); gap: 6px; }
  .comm-card-body { padding: var(--sp-2); font-size: var(--text-base); }
  .top-bar-row { grid-template-columns: 1fr !important; }
  /* Fields stack to one column on mobile — collapse the quick-fill grid too so
     the buttons sit full-width under the From/To fields instead of in a stray
     middle column. */
  .qf-fill { grid-template-columns: 1fr !important; }
  .qf-actions { grid-column: 1 !important; }
  /* Owner / Task panels: keep Status and User side-by-side on mobile, with the
     Due Date field dropping to its own full-width row below (so the date +
     inline Clear button have room, same as the lead panel). */
  .top-bar-row.top-bar-row--meta-sud { grid-template-columns: 1fr 1fr !important; }
  .top-bar-row--meta-sud > .meta-due-cell { grid-column: 1 / 3; }
  /* Task panel: keep Scheduled and Scheduled End side-by-side on mobile. The
     cells are half-width, where a native date input won't shrink enough for an
     inline Clear button, so let each wrap drop its Clear button to a line below
     the field (right-aligned) where it stays visible. */
  .top-bar-row.top-bar-row--sched { grid-template-columns: 1fr 1fr !important; }
  .top-bar-row--sched .date-input-wrap { flex-wrap: wrap; }
  .top-bar-row--sched .date-input-wrap .field-input { flex-basis: 100%; }
  .top-bar-row--sched .date-input-wrap .date-clear-btn { margin-left: auto; }
  /* Mobile re-layout of the 8 price/meta fields into 3 even rows:
       Status | User
       Asking | Offered | Due Date
       Acres  | MH Zoning | Listed
     The two source rows go display:contents so their children become items
     of the .top-bar-fields grid; explicit row/column keeps it deterministic.
     (The grid-template-columns rules below are the no-display:contents
     fallback for the two rows and are otherwise inert here.) */
  .top-bar-row.top-bar-row--status { grid-template-columns: 1fr 1fr 1fr !important; }
  .top-bar-row.top-bar-row--prices { grid-template-columns: 1fr 1fr !important; }
  .top-bar-fields {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 6px; padding: 6px var(--sp-2); align-items: end;
  }
  .top-bar-fields .top-bar-row--status,
  .top-bar-fields .top-bar-row--prices { display: contents; }
  .top-bar-fields .tbf { min-width: 0; }
  .tbf-status  { grid-row: 1; grid-column: 1 / 7; }
  .tbf-user    { grid-row: 1; grid-column: 7 / 13; }
  /* Asking/Offered split a row; Due Date gets its OWN full-width row below.
     A native date input refuses to shrink below its intrinsic width on
     mobile, so in a half-width cell the inline Clear button overflowed and
     was clipped by the panel's overflow-x: clip — invisible. A full-width
     row leaves room for the date AND the Clear button on one line. */
  .tbf-asking  { grid-row: 2; grid-column: 1 / 7; }
  .tbf-offered { grid-row: 2; grid-column: 7 / 13; }
  .tbf-due     { grid-row: 3; grid-column: 1 / 13; }
  /* MH Zoning takes the wide middle; Listed (a checkbox) needs little, Acres unchanged. */
  .tbf-acres   { grid-row: 4; grid-column: 1 / 5; }
  .tbf-mhz     { grid-row: 4; grid-column: 5 / 11; }
  .tbf-listed  { grid-row: 4; grid-column: 11 / 13; }
  .date-clear-btn { padding: 4px 6px; font-size: var(--text-sm); }
  .panel-content > form { padding-bottom: calc(80px + env(safe-area-inset-bottom, 16px)); }

  .login-box { width: calc(100vw - 32px); padding: 28px 20px; }
}

/* ── Silent HTMX refresh transitions (avoid white flash while swapping) ─── */
.htmx-added {
  animation: htmxFadeIn 120ms ease-in;
}
@keyframes htmxFadeIn {
  from { opacity: var(--refresh-fade-start); }
  to   { opacity: 1; }
}

/* ── Pill-link styles for comm panel related items ────────────────────── */
.pill-link {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--color-surface-raised); color: var(--slate-800);
  border: 1px solid transparent; padding: 3px var(--sp-2);
  border-radius: var(--r-full); font-size: var(--text-base); font-weight: 600;
}
.pill-link button, button.pill-link { cursor: pointer; }
.pill-link.pill-xs { font-size: var(--text-xs); padding: 2px 6px; }
.pill-link .related-link { cursor: pointer; }
.pill-link .related-link:hover { text-decoration: underline; }
.btn-unlink-pill {
  background: none; border: none; color: var(--slate-400);
  cursor: pointer; font-weight: 800; font-size: 15px;
  line-height: 1; padding: 0 2px; transition: color var(--t-base);
}
.btn-unlink-pill:hover { color: #ef4444; }

/* ── Touch-tap tooltip (first-tap-shows-title pattern on touch) ────────── */
.touch-tooltip {
  position: fixed;
  background: rgba(17, 24, 39, 0.95);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  padding: 6px 10px;
  border-radius: 6px;
  max-width: 260px;
  word-wrap: break-word;
  white-space: normal;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  pointer-events: none;
  z-index: 99999;
  animation: touchTipFadeIn 120ms ease-out;
}
.related-link[data-tip-primed] {
  outline: 2px solid var(--blue-500, #3b82f6);
  outline-offset: 1px;
  border-radius: 3px;
}
@keyframes touchTipFadeIn {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Skeleton Loading ────────────────────────────────────────────────── */
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.skeleton-loader { padding: 16px; }
.skeleton-bar {
  height: 12px; border-radius: var(--r-sm);
  background: linear-gradient(90deg, var(--slate-100) 25%, var(--slate-200) 50%, var(--slate-100) 75%);
  background-size: 800px 100%;
  animation: shimmer 1.6s ease-in-out infinite;
}
.skeleton-bar-lg  { height: 18px; }
.skeleton-bar-sm  { height: 10px; }
.skeleton-circle {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(90deg, var(--slate-100) 25%, var(--slate-200) 50%, var(--slate-100) 75%);
  background-size: 800px 100%;
  animation: shimmer 1.6s ease-in-out infinite;
  flex-shrink: 0;
}

/* Table skeleton */
.skeleton-table { width: 100%; border-collapse: collapse; }
.skeleton-table th {
  padding: 10px 12px; background: var(--color-surface-raised);
  border-bottom: 1px solid var(--color-border);
}
.skeleton-table td { padding: 12px; border-bottom: 1px solid var(--color-border-light); }
.skeleton-table tr:last-child td { border-bottom: none; }

/* Panel skeleton */
.skeleton-panel { padding: 20px; }
.skeleton-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 18px; border-bottom: 1px solid var(--slate-700);
  background: var(--slate-800);
}
.skeleton-panel-header .skeleton-bar {
  background: linear-gradient(90deg, rgba(255,255,255,.08) 25%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.08) 75%);
  background-size: 800px 100%;
}
.skeleton-panel-body {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 20px;
}
.skeleton-field { display: flex; flex-direction: column; gap: 6px; }
@media (max-width: 768px) {
  .skeleton-panel-body { grid-template-columns: 1fr; }
}

/* ── Delete-confirm modal (relink-before-delete) ─────────────────────────── */
.delete-modal-backdrop {
  position: fixed; inset: 0; z-index: 1300;
  background: rgba(15,23,42,.55);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.delete-modal-panel {
  width: min(520px, 96vw); max-height: min(85vh, 720px);
  background: var(--color-surface); border-radius: var(--r-2xl);
  box-shadow: 0 28px 64px rgba(15,23,42,.45);
  display: flex; flex-direction: column; overflow: hidden;
}
.delete-modal-header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: 14px 18px; background: #fef2f2; border-bottom: 1px solid #fecaca;
}
.delete-modal-title { font-size: 15px; font-weight: 700; color: #991b1b; line-height: 1.3; }
.delete-modal-close {
  background: transparent; border: 0; font-size: 22px; line-height: 1;
  color: #991b1b; cursor: pointer; padding: 2px 6px; border-radius: 4px;
}
.delete-modal-close:hover { background: rgba(220,38,38,.12); }
.delete-modal-body { padding: 16px 18px; overflow-y: auto; }
.delete-modal-summary { font-size: 13px; color: var(--slate-700); line-height: 1.5; }
.delete-modal-summary-plain { padding: 4px 0; }
.delete-modal-summary-label { font-weight: 600; margin-bottom: 6px; color: var(--slate-800); }
.delete-modal-counts { margin: 0 0 10px 18px; padding: 0; }
.delete-modal-counts li { margin: 2px 0; }
.delete-modal-summary-hint { font-size: 12px; color: var(--slate-600); margin-top: 8px; }

.delete-modal-picker { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--slate-200); }
.delete-modal-picker-label {
  display: block; font-size: 12px; font-weight: 600; color: var(--slate-700);
  margin-bottom: 6px; text-transform: uppercase; letter-spacing: .03em;
}
.delete-modal-search {
  width: 100%; box-sizing: border-box; padding: 8px 10px;
  border: 1px solid var(--slate-300); border-radius: 6px; font-size: 13px;
  background: var(--color-surface);
}
.delete-modal-search:focus { outline: 2px solid var(--slate-400); outline-offset: 1px; }
.delete-modal-results {
  margin-top: 6px; max-height: 200px; overflow-y: auto;
  border: 1px solid var(--slate-200); border-radius: 6px; background: var(--slate-50);
}
.delete-modal-results:empty { display: none; }
.delete-modal-result {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 6px 10px; background: transparent; border: 0;
  border-bottom: 1px solid var(--slate-200); cursor: pointer; text-align: left;
  font-size: 13px; color: var(--slate-800);
}
.delete-modal-result:last-child { border-bottom: 0; }
.delete-modal-result:hover { background: var(--slate-100); }
.delete-modal-result-id { font-size: 11px; color: var(--slate-500); font-family: ui-monospace,Menlo,Consolas,monospace; }
.delete-modal-result-empty { padding: 8px 10px; font-size: 12px; color: var(--slate-500); font-style: italic; }
.delete-modal-section + .delete-modal-section { border-top: 1px solid var(--slate-200); }
.delete-modal-section-label {
  padding: 4px 10px; font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--slate-500); background: var(--slate-100);
}

.delete-modal-selected { margin-bottom: 6px; }
.delete-modal-selected-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px 4px 4px; background: #dcfce7; color: #14532d;
  border: 1px solid #86efac; border-radius: 999px; font-size: 12px; font-weight: 600;
}
.delete-modal-selected-type {
  text-transform: uppercase; font-size: 10px; letter-spacing: .04em;
  background: #14532d; color: #dcfce7; padding: 2px 6px; border-radius: 999px;
}
.delete-modal-selected-pill button {
  background: transparent; border: 0; color: #14532d; cursor: pointer;
  font-size: 16px; line-height: 1; padding: 0 2px;
}
.delete-modal-selected-pill button:hover { color: #991b1b; }

.delete-modal-footer {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  padding: 12px 18px; border-top: 1px solid var(--slate-200); background: var(--slate-50);
}
.delete-modal-btn-cancel {
  padding: 7px 14px; background: #fff; border: 1px solid var(--slate-300); border-radius: 6px;
  font-size: 13px; font-weight: 600; color: var(--slate-700); cursor: pointer;
}
.delete-modal-btn-cancel:hover { background: var(--slate-100); }
.delete-modal-btn-delete {
  padding: 7px 14px; background: #dc2626; border: 1px solid #b91c1c; border-radius: 6px;
  font-size: 13px; font-weight: 600; color: #fff; cursor: pointer;
}
.delete-modal-btn-delete:hover { background: #b91c1c; }
.delete-modal-btn-delete.is-armed {
  background: #991b1b; border-color: #7f1d1d;
  animation: delete-armed-pulse 1.1s ease-in-out infinite;
}
@keyframes delete-armed-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(220,38,38,.5); }
  50%     { box-shadow: 0 0 0 6px rgba(220,38,38,0); }
}
/* Non-destructive confirm (move comms) — green, not the delete red. */
.delete-modal-btn-move {
  padding: 7px 14px; background: #16a34a; border: 1px solid #15803d; border-radius: 6px;
  font-size: 13px; font-weight: 600; color: #fff; cursor: pointer;
}
.delete-modal-btn-move:hover { background: #15803d; }
.delete-modal-btn-move:disabled { opacity: .5; cursor: not-allowed; }
/* Move-comms modal reuses the delete shell but isn't destructive — swap the
   red header for a neutral green that matches the confirm button. */
.move-modal .delete-modal-header { background: #f0fdf4; border-bottom-color: #bbf7d0; }
.move-modal .delete-modal-title,
.move-modal .delete-modal-close { color: #166534; }