.crm3-panel { padding: 12px 0; }

.crm3-classification {
  display: flex; gap: 8px; margin-bottom: 16px;
}
.crm3-class-btn {
  flex: 1; padding: 10px 12px;
  background: #fff; color: #555;
  border: 1px solid #e0e0e0; border-radius: 8px;
  font-size: 13px; font-weight: 500; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: all 0.15s ease;
}
.crm3-class-btn:hover {
  border-color: #00A5ED; color: #00A5ED; background: #f5fbff;
}
.crm3-class-btn.active {
  background: #00A5ED; color: #fff; border-color: #00A5ED;
}
.crm3-class-btn i { font-size: 16px; }

.crm3-editor-wrapper {
  background: #fff; border: 1px solid #e0e0e0;
  border-radius: 12px; margin-bottom: 16px;
  transition: all 0.15s ease;
}
.crm3-editor-wrapper:focus-within {
  border-color: #00A5ED;
  box-shadow: 0 0 0 3px rgba(0,165,237,0.1);
}
.crm3-editor {
  padding: 14px 16px; min-height: 100px;
  font-size: 14px; line-height: 1.6; color: #1a1a1a;
}
.crm3-editor .ProseMirror {
  outline: none; min-height: 80px;
}
.crm3-editor .ProseMirror p {
  margin: 0 0 6px;
}
.crm3-editor .ProseMirror p.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  color: #aaa; pointer-events: none;
  float: left; height: 0;
}
.crm3-editor .ProseMirror a {
  color: #0065f1; text-decoration: underline;
}
.crm3-editor-footer {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 14px; border-top: 1px solid #f0f0f0;
}
.crm3-hint { font-size: 12px; color: #888; }
.crm3-save {
  background: #00A5ED; color: #fff; border: none;
  padding: 7px 14px; border-radius: 6px;
  font-size: 13px; font-weight: 500; cursor: pointer;
  display: flex; align-items: center; gap: 6px;
}
.crm3-save:hover { background: #0090d1; }
.crm3-save:disabled {
  background: #e8e8e8; color: #bbb; cursor: not-allowed;
}

.crm3-bubble-menu {
  background: #2a2a2a; border: 1px solid #3a3a3a;
  padding: 4px; border-radius: 8px;
  display: flex; gap: 2px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  z-index: 1000;
}
.crm3-bubble-menu button {
  background: transparent; color: #ddd;
  border: none; padding: 6px 10px; border-radius: 4px;
  cursor: pointer; font-size: 13px;
}
.crm3-bubble-menu button:hover {
  background: rgba(255,255,255,0.1); color: #fff;
}
.crm3-bubble-menu button.active {
  background: rgba(0,165,237,0.3); color: #4DB8F0;
}

.crm3-notes-list {
  display: flex; flex-direction: column; gap: 8px;
}
.crm3-note-card {
  padding: 12px 14px;
  background: #fff; border: 1px solid #e8e8e8;
  border-radius: 8px;
  position: relative;
}
.crm3-note-card.is-legacy {
  border-style: dashed; border-color: #d0c0a0; background: #fdfaf3;
}
.crm3-note-header {
  display: flex; align-items: center; gap: 10px; margin-bottom: 6px;
}
.crm3-note-avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: #e6f1fb; color: #0065f1;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 500;
}
.crm3-note-author {
  font-size: 13px; font-weight: 500; color: #1a1a1a;
}
.crm3-note-time {
  font-size: 12px; color: #888;
}
.crm3-note-type-badge {
  font-size: 11px; padding: 2px 8px; border-radius: 4px;
  background: #f0f0f0; color: #666; font-weight: 500;
}
.crm3-note-type-badge.is-legacy {
  background: #faecd5; color: #854f0b;
}
.crm3-note-actions {
  margin-left: auto;
  display: none; gap: 2px;
}
.crm3-note-card:hover .crm3-note-actions {
  display: flex;
}
.crm3-note-actions button {
  background: none; border: none; color: #999;
  cursor: pointer; padding: 4px 6px; border-radius: 4px;
  font-size: 14px;
}
.crm3-note-actions button:hover {
  color: #1a1a1a; background: rgba(0,0,0,0.05);
}
.crm3-note-content {
  font-size: 14px; line-height: 1.6; color: #333;
}
.crm3-note-content p { margin: 0 0 4px; }
.crm3-note-content p:last-child { margin: 0; }
.crm3-note-content a { color: #0065f1; }

/* Style C: deep ZOOM blue hero zone wrapping back btn + hero + stat row */
.c360-hero-zone {
  background: linear-gradient(135deg, #001f5b 0%, #0040A8 50%, #0065f1 100%);
  border-radius: 20px;
  padding: 24px 28px 28px 28px;
  margin-bottom: 14px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(0, 64, 168, 0.3);
}
.c360-hero-zone::before {
  content: '';
  position: absolute;
  top: -80px;
  right: -40px;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(0, 165, 237, 0.4), transparent 60%);
  pointer-events: none;
  border-radius: 50%;
}
.c360-hero-zone::after {
  content: '';
  position: absolute;
  bottom: -100px;
  left: 100px;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.25), transparent 60%);
  pointer-events: none;
  border-radius: 50%;
}

/* Back button */
.c360-back-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 8px;
  padding: 7px 13px; font-size: 12px; font-weight: 500;
  cursor: pointer; font-family: 'Plus Jakarta Sans', sans-serif;
  transition: all 0.15s ease;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15);
}
.c360-back-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}
.c360-back-btn i { font-size: 13px; }

/* Hero card */
.c360-hero {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin-bottom: 24px;
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 18px; flex-wrap: wrap;
  position: relative;
  z-index: 1;
  box-shadow: none;
}
.c360-hero-left {
  display: flex; align-items: center; gap: 16px; min-width: 0; flex: 1;
}
.c360-avatar {
  width: 76px; height: 76px; border-radius: 50%;
  background: linear-gradient(135deg, #00A5ED, #4DB8F0);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; font-weight: 700; flex-shrink: 0;
  letter-spacing: -0.02em;
  font-family: 'Plus Jakarta Sans', sans-serif;
  box-shadow: 0 0 40px rgba(0, 165, 237, 0.6), inset 0 2px 0 rgba(255,255,255,0.3);
  position: relative;
}
.c360-avatar::before {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 165, 237, 0.7), transparent 70%);
  filter: blur(8px);
  z-index: -1;
}
.c360-hero-meta { min-width: 0; flex: 1; }
.c360-hero-caption {
  font-size: 10px; color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.18em; font-weight: 700;
  margin-bottom: 6px;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.c360-name {
  font-size: 32px; font-weight: 700; color: #fff;
  letter-spacing: -0.03em; line-height: 1.1;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.c360-meta-line {
  font-size: 13px; color: rgba(255, 255, 255, 0.7);
  margin-top: 8px;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.c360-pills {
  margin-top: 10px; display: flex; gap: 6px; flex-wrap: wrap;
}
.c360-pill {
  display: inline-block; padding: 4px 11px; border-radius: 999px;
  font-size: 11px; font-weight: 600;
  font-family: 'Plus Jakarta Sans', sans-serif;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.c360-pill-met {
  background: rgba(16, 185, 129, 0.2);
  color: #6ee7b7;
  border: 1px solid rgba(16, 185, 129, 0.4);
}
.c360-pill-type {
  background: rgba(0, 165, 237, 0.25);
  color: #b5e3ff;
  border: 1px solid rgba(0, 165, 237, 0.4);
}
.c360-pill-allied {
  background: rgba(180, 83, 9, 0.25);
  color: #fbbf77;
  border: 1px solid rgba(180, 83, 9, 0.4);
}
.c360-pill-haventmet {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.c360-hero-actions {
  display: flex; gap: 6px; flex-wrap: wrap;
  position: relative;
  z-index: 1;
}
.c360-action-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff;
  color: #0040A8;
  border: none; border-radius: 10px;
  padding: 10px 16px; font-size: 12px; font-weight: 700;
  cursor: pointer; font-family: 'Plus Jakarta Sans', sans-serif;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  transition: all 0.15s ease;
}
.c360-action-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
  background: #fff;
  color: #0040A8;
}
.c360-action-btn i { font-size: 14px; color: #0040A8; }
.c360-action-btn:nth-child(n+2) {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-weight: 500;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: none;
}
.c360-action-btn:nth-child(n+2):hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
  transform: none;
  box-shadow: none;
}
.c360-action-btn:nth-child(n+2) i { color: #fff; }

/* Hero stat row */
.c360-stat-row {
  display: flex; gap: 10px; margin-bottom: 0; flex-wrap: wrap;
  position: relative;
  z-index: 1;
}
.c360-stat-card {
  flex: 1; min-width: 120px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 16px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: #fff;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.c360-stat-card-primary {
  background: linear-gradient(135deg, #00A5ED 0%, #8b5cf6 100%);
  color: #fff;
  border: none;
  box-shadow: 0 10px 30px rgba(0, 165, 237, 0.5), inset 0 1px 0 rgba(255,255,255,0.25);
}
.c360-stat-label {
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.14em;
  font-weight: 700; color: rgba(255, 255, 255, 0.7);
}
.c360-stat-card-primary .c360-stat-label {
  color: rgba(255, 255, 255, 0.9);
}
.c360-stat-value {
  font-size: 28px; font-weight: 700; color: #fff;
  letter-spacing: -0.03em; margin-top: 6px;
  line-height: 1;
}
.c360-stat-card-primary .c360-stat-value { color: #fff; }
.c360-stat-sublabel {
  font-size: 11px; color: rgba(255, 255, 255, 0.65); margin-top: 4px;
}
.c360-stat-card-primary .c360-stat-sublabel {
  color: rgba(255, 255, 255, 0.9);
}

/* Tab nav (pill-segmented) */
.c360-tabs {
  display: inline-flex; gap: 4px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  border: 1px solid rgba(0, 101, 241, 0.08);
  border-radius: 14px;
  padding: 6px;
  margin-bottom: 14px;
  box-shadow:
    0 4px 16px rgba(0, 101, 241, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 1);
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.c360-tab {
  background: transparent;
  border: none;
  padding: 9px 16px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 500;
  color: #6a6e7a;
  cursor: pointer;
  font-family: 'Plus Jakarta Sans', sans-serif;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  letter-spacing: -0.01em;
  position: relative;
}
.c360-tab:hover {
  color: #0065f1;
  background: rgba(0, 165, 237, 0.08);
}
.c360-tab-active {
  background: linear-gradient(135deg, #00A5ED, #0065f1);
  color: #fff;
  font-weight: 600;
  border: none;
  box-shadow:
    0 4px 14px rgba(0, 165, 237, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.c360-tab-active:hover {
  color: #fff;
  background: linear-gradient(135deg, #00A5ED, #0065f1);
}

/* Mobile: app sidebar hides at <=1024px, so c360 should span full width */
@media (max-width: 1024px) {
  #crm-c360-container { left: 0 !important; }
}

/* Two-column body */
.c360-body {
  display: flex; gap: 12px; align-items: flex-start;
}
.c360-main { flex: 1; min-width: 0; }
.c360-sidebar {
  width: 240px; flex-shrink: 0;
  display: flex; flex-direction: column; gap: 12px;
}

/* Tab panels */
.c360-panel {
  background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 16px;
  padding: 28px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.05),
    0 6px 20px rgba(15, 23, 42, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}
.c360-placeholder {
  text-align: center; padding: 40px 20px;
  color: #888;
}
.c360-placeholder i {
  font-size: 36px; color: #bbb; margin-bottom: 12px; display: block;
}
.c360-placeholder h3 {
  font-size: 16px; font-weight: 600; color: #1a1a1a;
  margin: 0 0 6px 0;
}
.c360-placeholder p {
  font-size: 13px; color: #888; margin: 0 auto;
  line-height: 1.5; max-width: 420px;
}

/* AI Insight card (dark with glow) */
.c360-ai-card {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #001f5b, #0040A8);
  border-radius: 14px; padding: 14px;
  color: #fff; font-family: 'Plus Jakarta Sans', sans-serif;
  box-shadow: 0 8px 24px rgba(0, 64, 168, 0.3);
}
.c360-ai-glow {
  position: absolute; top: -30px; right: -30px;
  width: 120px; height: 120px;
  background: radial-gradient(circle, rgba(0, 165, 237, 0.45), transparent 70%);
  pointer-events: none;
}
.c360-ai-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em;
  color: #4DB8F0; font-weight: 700;
  position: relative; z-index: 1;
}
.c360-ai-text {
  font-size: 12px; line-height: 1.5; color: rgba(255, 255, 255, 0.9);
  margin-top: 8px; position: relative; z-index: 1;
}

/* Sidebar regular cards */
.c360-side-card {
  background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 14px;
  padding: 16px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.05),
    0 4px 12px rgba(15, 23, 42, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}
.c360-side-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
  color: #888; font-weight: 600;
}
.c360-side-content { margin-top: 10px; }
.c360-side-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 0; font-size: 12px;
}
.c360-side-key { color: #888; }
.c360-side-val { color: #1a1a1a; font-weight: 500; }
.c360-side-empty {
  font-size: 12px; color: #aaa; font-style: italic;
}

/* Responsive: stack sidebar below main on narrow widths */
@media (max-width: 900px) {
  .c360-body { flex-direction: column; }
  .c360-sidebar { width: 100%; }
  .c360-stat-card { min-width: 100px; }
}

/* ══════════════════════════════════════════════
   Phase 1.5 Commit C.1: dynamic-content overrides for the Overview tab.
   Three render functions (crmRenderTimeline, dbRenderTimeline,
   crmRenderHIPanel) emit inline styles designed for the legacy dark
   modal. We cannot modify the render functions (legacy modal shares
   them) so we re-color their output inside the c360 surface via
   attribute-substring selectors scoped to .c360-main #<container>-c360.
   ══════════════════════════════════════════════ */

/* Client Timeline: re-color text that targeted dark bg */
.c360-main #crm-modal-timeline-c360 [style*="color:#ddd"],
.c360-main #crm-modal-timeline-c360 [style*="color: #ddd"] {
  color: #0a0a0a !important;
}
.c360-main #crm-modal-timeline-c360 [style*="color:#555"],
.c360-main #crm-modal-timeline-c360 [style*="color: #555"],
.c360-main #crm-modal-timeline-c360 [style*="color:#666"],
.c360-main #crm-modal-timeline-c360 [style*="color: #666"],
.c360-main #crm-modal-timeline-c360 [style*="color:#777"],
.c360-main #crm-modal-timeline-c360 [style*="color: #777"],
.c360-main #crm-modal-timeline-c360 [style*="color:#888"],
.c360-main #crm-modal-timeline-c360 [style*="color: #888"] {
  color: #6a6e7a !important;
}
/* Skip button's dark border on transparent bg */
.c360-main #crm-modal-timeline-c360 button[style*="border:1px solid #2a2d38"],
.c360-main #crm-modal-timeline-c360 button[style*="border: 1px solid #2a2d38"] {
  border-color: rgba(0, 101, 241, 0.18) !important;
}

/* Home Intelligence: convert dark stat tiles to light Style C tiles */
.c360-main #crm-hi-panel-content-c360 [style*="background:#0d0f14"],
.c360-main #crm-hi-panel-content-c360 [style*="background: #0d0f14"] {
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
  border-color: rgba(0, 101, 241, 0.15) !important;
}
/* HI: the engagement-score tile uses color:#fff which is invisible on light bg */
.c360-main #crm-hi-panel-content-c360 [style*="color:#fff"],
.c360-main #crm-hi-panel-content-c360 [style*="color: #fff"] {
  color: #0a0a0a !important;
}

/* ══════════════════════════════════════════════
   Phase 1.5 Commit C.2: shift timeline "due" indicator from coral/pink
   (#ff6b6b emitted by crmRenderTimeline for due-state dots, glow, and
   row tint) to saturated red (#ef4444). c360 scope only; legacy modal
   keeps the original coral treatment. Also catches future-item dots
   for the 'expired' lead type whose color is #ff6b6b too - acceptable
   since due-style red reads cleanly there as well.
   ══════════════════════════════════════════════ */

/* Dot (10px circle): background:#ff6b6b + box-shadow:0 0 6px #ff6b6b */
.c360-main #crm-modal-timeline-c360 [style*="#ff6b6b"] {
  background-color: #ef4444 !important;
  box-shadow: 0 0 6px #ef4444 !important;
}

/* Row wrapper: background:rgba(255,107,107,0.06) + border:1px solid
   rgba(255,107,107,0.2). One selector catches both substrings on the
   same element. */
.c360-main #crm-modal-timeline-c360 [style*="rgba(255,107,107"] {
  background: rgba(239, 68, 68, 0.07) !important;
  border-color: rgba(239, 68, 68, 0.22) !important;
}

/* ══════════════════════════════════════════════
   Phase 2A polish: force dark-text-on-white for ALL c360 panel
   inputs/textareas/selects. The legacy global rule at index.html
   L1727-1745 sets color:#e8eaf0 + background:rgba(255,255,255,0.04)
   with !important on every bare input/textarea/select element. That
   makes typed text invisible against Style C white card backgrounds.
   Higher-specificity descendant selectors here win the !important
   battle (0,1,2 specificity beats 0,0,1).
   ══════════════════════════════════════════════ */

.c360-panel input[type="text"],
.c360-panel input[type="date"],
.c360-panel input[type="email"],
.c360-panel input[type="tel"],
.c360-panel input[type="number"],
.c360-panel input:not([type]),
.c360-panel textarea,
.c360-panel select {
  color: #0a0a0a !important;
  background-color: #ffffff !important;
  caret-color: #0065f1 !important;
}

.c360-panel input::placeholder,
.c360-panel textarea::placeholder {
  color: rgba(106, 110, 122, 0.6) !important;
  opacity: 1 !important;
}

.c360-panel input:focus,
.c360-panel textarea:focus,
.c360-panel select:focus {
  outline: none !important;
  border-color: rgba(0, 101, 241, 0.4) !important;
  box-shadow: 0 0 0 3px rgba(0, 101, 241, 0.1) !important;
}

.c360-panel select option {
  color: #0a0a0a !important;
  background-color: #ffffff !important;
}

/* ══════════════════════════════════════════════
   Phase 1.5 Commit C P0 follow-up: Gmail compose + Debrief modal
   light-theme treatment. Both modals were authored before c360
   launched (Gmail = partial gradient panel that fades to 4% blue;
   Debrief = solid dark panel). When hoisted to body above the
   c360 light view, neither reads correctly - Gmail looks
   see-through, Debrief looks like a dark hole. Force canonical
   Style C modal aesthetic: dim backdrop + solid white panel +
   dark-on-white inputs + recolored dark-bg-assuming inner text.
   ══════════════════════════════════════════════ */

/* Backdrop dim (both modals) */
#crm-gmail-compose-modal,
#db-debrief-modal {
  background: rgba(15, 23, 42, 0.55) !important;
}

/* Inner panel: solid white + light blue hairline + heavy floating shadow.
   Selector `> div` targets the first child wrapper (the panel) without
   depending on a class name we don't control. */
#crm-gmail-compose-modal > div,
#db-debrief-modal > div {
  background: #ffffff !important;
  border: 1px solid rgba(0, 101, 241, 0.08) !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.25) !important;
  color: #0a0a0a !important;
}

/* Inputs/textareas/selects: dark-on-white. Overrides the legacy global
   rule at L1727-1745 the same way the .c360-panel scope does. */
#crm-gmail-compose-modal input[type="text"],
#crm-gmail-compose-modal input[type="email"],
#crm-gmail-compose-modal input[type="tel"],
#crm-gmail-compose-modal input[type="number"],
#crm-gmail-compose-modal input[type="date"],
#crm-gmail-compose-modal input:not([type]),
#crm-gmail-compose-modal textarea,
#crm-gmail-compose-modal select,
#db-debrief-modal input[type="text"],
#db-debrief-modal input[type="email"],
#db-debrief-modal input[type="tel"],
#db-debrief-modal input[type="number"],
#db-debrief-modal input[type="date"],
#db-debrief-modal input:not([type]),
#db-debrief-modal textarea,
#db-debrief-modal select {
  color: #0a0a0a !important;
  background-color: #ffffff !important;
  border: 1px solid rgba(0, 101, 241, 0.15) !important;
  caret-color: #0065f1 !important;
}

#crm-gmail-compose-modal input::placeholder,
#crm-gmail-compose-modal textarea::placeholder,
#db-debrief-modal input::placeholder,
#db-debrief-modal textarea::placeholder {
  color: rgba(106, 110, 122, 0.6) !important;
  opacity: 1 !important;
}

#crm-gmail-compose-modal input:focus,
#crm-gmail-compose-modal textarea:focus,
#crm-gmail-compose-modal select:focus,
#db-debrief-modal input:focus,
#db-debrief-modal textarea:focus,
#db-debrief-modal select:focus {
  outline: none !important;
  border-color: rgba(0, 101, 241, 0.4) !important;
  box-shadow: 0 0 0 3px rgba(0, 101, 241, 0.1) !important;
}

#crm-gmail-compose-modal select option,
#db-debrief-modal select option {
  color: #0a0a0a !important;
  background-color: #ffffff !important;
}

/* Debrief modal was originally dark-themed throughout - many inner
   text elements use light/white colors that read as invisible on the
   new white panel. Attribute-substring selectors re-color the common
   dark-bg-assuming hex values to readable light-bg equivalents. */
#db-debrief-modal [style*="color:#E8EDFB"],
#db-debrief-modal [style*="color: #E8EDFB"] {
  color: #0a0a0a !important;
}
#db-debrief-modal [style*="color:#8A96B8"],
#db-debrief-modal [style*="color: #8A96B8"],
#db-debrief-modal [style*="color:#546080"],
#db-debrief-modal [style*="color: #546080"] {
  color: #6a6e7a !important;
}
#db-debrief-modal [style*="color:#c8c8d0"],
#db-debrief-modal [style*="color: #c8c8d0"] {
  color: #0a0a0a !important;
}

/* Debrief close X button: dark pill -> subtle light pill with dark glyph */
#db-debrief-modal [style*="background:#1e2028"],
#db-debrief-modal [style*="background: #1e2028"] {
  background: rgba(15, 23, 42, 0.06) !important;
  color: #0a0a0a !important;
}

/* Debrief AI result inset container: dark inset -> pale blue inset */
#db-debrief-modal [style*="background:#080a0e"],
#db-debrief-modal [style*="background: #080a0e"] {
  background: rgba(248, 251, 255, 0.6) !important;
  border-color: rgba(0, 101, 241, 0.12) !important;
}

/* ══════════════════════════════════════════════
   Phase 4.5 polish: ZOOM Brief hero text visibility fix.
   Legacy broad-sweep rule at L3813-3822 forces every .section
   element with inline color:#fff (and the font-weight:800/900
   variant) to var(--z-text) dark text. That rule is correct for
   surfaces that were authored for dark theme but the ZOOM Brief
   hero card uses a deep ZOOM blue gradient where white text is
   the only readable choice.

   Higher-specificity scope wins: #today + .crm3-zoombrief-hero
   gives (0,1,1,0) which beats the legacy (0,0,2,0). Also override
   -webkit-text-fill-color per the legacy rule's pattern (Safari
   uses this to fully recolor inline-styled text; without it the
   override partially loses to the legacy rule on Safari).

   Our hero HTML drops the inline color attribute entirely and
   relies on these class-scoped rules - cleanest path so the
   legacy substring-match rule never even matches on our elements.
   ══════════════════════════════════════════════ */
#today .crm3-zoombrief-hero,
#today .crm3-zoombrief-hero * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
#today .crm3-zoombrief-hero .crm3-zb-eyebrow {
  color: rgba(255, 255, 255, 0.6) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.6) !important;
}
#today .crm3-zoombrief-hero .crm3-zb-subtitle {
  color: rgba(255, 255, 255, 0.75) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.75) !important;
}

/* ══════════════════════════════════════════════
   Phase 1.5 hero polish: apply the Sphere Intent halo TECHNIQUE to
   the other (non-primary) stat cards so the row reads as one unified
   set. The 3 glass cards (Touchpoints, Last touch, Pipeline) keep
   their rgba(255,255,255,0.08) glass-on-dark fill; we only add the
   outer cyan glow that's the signature of the row, plus preserve
   the inner top highlight they already had. The primary Sphere
   Intent card's stronger halo (0.5 alpha, 30px blur, 10px offset)
   stays louder by intent so Sphere Intent retains visual primacy
   as the most important score.

   Selector specificity 0,2,0 via :not() beats the bare .c360-stat-card
   at 0,1,0, so this rule wins on non-primary cards. Primary card is
   excluded by :not() and keeps its own L10135-10140 box-shadow.
   ══════════════════════════════════════════════ */
.c360-stat-card:not(.c360-stat-card-primary) {
  box-shadow:
    0 6px 20px rgba(0, 165, 237, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* ═══ $100B LIGHT THEME — CRM only (scoped to #crm) ═══
   Pairs with the global "$7B LIGHT THEME" rules at line ~3535 which
   already force #crm to background:#f0f2f7 + text #111827.
   This block handles what those rules can't: inline dark gradients,
   alt-blue (#1A7FE8) accents, gold accents, inputs, modals. */

/* Dark navy hero + dark gradient cards → white glass */
#crm:not(.aurora) [style*="linear-gradient(135deg,#0a1428"],
#crm:not(.aurora) [style*="linear-gradient(135deg, #0a1428"],
#crm:not(.aurora) [style*="linear-gradient(135deg,#0f1e3d"],
#crm:not(.aurora) [style*="linear-gradient(135deg, #0f1e3d"],
#crm:not(.aurora) [style*="linear-gradient(135deg,#080a0e"],
#crm:not(.aurora) [style*="linear-gradient(135deg, #080a0e"] {
  background: linear-gradient(145deg, rgba(255,255,255,0.94), rgba(0,101,241,0.04)) !important;
  border: 0.5px solid rgba(0,101,241,0.14) !important;
  box-shadow: 0 1px 3px rgba(0,101,241,0.05), 0 10px 28px rgba(0,101,241,0.07) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

/* Dark solid backgrounds on inputs/cards → white glass */
#crm:not(.aurora) [style*="background:#0d0f14"], #crm:not(.aurora) [style*="background: #0d0f14"],
#crm:not(.aurora) [style*="background:#151820"], #crm:not(.aurora) [style*="background: #151820"],
#crm:not(.aurora) [style*="background:#1e2028"], #crm:not(.aurora) [style*="background: #1e2028"],
#crm:not(.aurora) [style*="background:#0a0e18"], #crm:not(.aurora) [style*="background: #0a0e18"],
#crm:not(.aurora) [style*="background:#080a0e"], #crm:not(.aurora) [style*="background: #080a0e"],
#crm:not(.aurora) [style*="background:#12131a"], #crm:not(.aurora) [style*="background: #12131a"] {
  background: rgba(255,255,255,0.94) !important;
}

/* Dark hairline borders → blue-tint */
#crm:not(.aurora) [style*="border:1px solid #1e2028"], #crm:not(.aurora) [style*="border: 1px solid #1e2028"],
#crm:not(.aurora) [style*="border:1px solid #2a2d38"], #crm:not(.aurora) [style*="border: 1px solid #2a2d38"],
#crm:not(.aurora) [style*="border:1px solid #151820"], #crm:not(.aurora) [style*="border: 1px solid #151820"],
#crm:not(.aurora) [style*="border:1px solid #0d0f14"], #crm:not(.aurora) [style*="border: 1px solid #0d0f14"] {
  border-color: rgba(0,101,241,0.18) !important;
}

/* Alt-blue #1A7FE8 / #4FA8FF → ZOOM blue #0065f1 */
#crm:not(.aurora) [style*="color:#1A7FE8"], #crm:not(.aurora) [style*="color: #1A7FE8"],
#crm:not(.aurora) [style*="color:#4FA8FF"], #crm:not(.aurora) [style*="color: #4FA8FF"],
#crm:not(.aurora) [style*="color:#0F5BAD"], #crm:not(.aurora) [style*="color: #0F5BAD"] {
  color: #0065f1 !important;
  -webkit-text-fill-color: #0065f1 !important;
}

/* Alt-blue tinted backgrounds/borders */
#crm:not(.aurora) [style*="background:rgba(26,127,232"], #crm:not(.aurora) [style*="background: rgba(26,127,232"] {
  background: rgba(0,101,241,0.06) !important;
}
#crm:not(.aurora) [style*="border:1px solid rgba(26,127,232"],
#crm:not(.aurora) [style*="border: 1px solid rgba(26,127,232"],
#crm:not(.aurora) [style*="border:0.5px solid rgba(26,127,232"],
#crm:not(.aurora) [style*="border: 0.5px solid rgba(26,127,232"] {
  border-color: rgba(0,101,241,0.2) !important;
}

/* Alt-blue gradient buttons → ZOOM blue gradient */
#crm:not(.aurora) [style*="linear-gradient(135deg,#1A7FE8"],
#crm:not(.aurora) [style*="linear-gradient(135deg, #1A7FE8"] {
  background: linear-gradient(135deg, #0055d4, #0065f1) !important;
  border: none !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  box-shadow: 0 4px 14px rgba(0,101,241,0.22) !important;
}
#crm:not(.aurora) [style*="linear-gradient(135deg,#1A7FE8"] *,
#crm:not(.aurora) [style*="linear-gradient(135deg, #1A7FE8"] * {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* Gold accents → ZOOM blue */
#crm:not(.aurora) [style*="color:var(--gold)"], #crm:not(.aurora) [style*="color: var(--gold)"],
#crm:not(.aurora) [style*="color:var(--z-gold)"], #crm:not(.aurora) [style*="color: var(--z-gold)"],
#crm:not(.aurora) [style*="color:#c9a84c"], #crm:not(.aurora) [style*="color: #c9a84c"] {
  color: #0065f1 !important;
  -webkit-text-fill-color: #0065f1 !important;
}
#crm:not(.aurora) [style*="background:rgba(201,168,76"], #crm:not(.aurora) [style*="background: rgba(201,168,76"] {
  background: rgba(0,101,241,0.06) !important;
}
#crm:not(.aurora) [style*="border:1px solid rgba(201,168,76"],
#crm:not(.aurora) [style*="border: 1px solid rgba(201,168,76"],
#crm:not(.aurora) [style*="border:0.5px solid rgba(201,168,76"],
#crm:not(.aurora) [style*="border: 0.5px solid rgba(201,168,76"] {
  border-color: rgba(0,101,241,0.2) !important;
}

/* Stat number colors — slightly darker for light-bg legibility */
#crm:not(.aurora) [style*="color:#50C878"], #crm:not(.aurora) [style*="color: #50C878"] { color: #059669 !important; -webkit-text-fill-color: #059669 !important; }
#crm:not(.aurora) [style*="color:#ff6b6b"], #crm:not(.aurora) [style*="color: #ff6b6b"] { color: #dc2626 !important; -webkit-text-fill-color: #dc2626 !important; }
#crm:not(.aurora) [style*="background:rgba(80,200,120,0.08)"] { background: rgba(5,150,105,0.07) !important; }
#crm:not(.aurora) [style*="border:1px solid rgba(80,200,120"], #crm:not(.aurora) [style*="border: 1px solid rgba(80,200,120"] { border-color: rgba(5,150,105,0.25) !important; }
#crm:not(.aurora) [style*="background:rgba(255,107,107,0.08)"],
#crm:not(.aurora) [style*="background:rgba(255,107,107,0.12)"] { background: rgba(220,38,38,0.07) !important; }
#crm:not(.aurora) [style*="border:1px solid rgba(255,107,107"], #crm:not(.aurora) [style*="border: 1px solid rgba(255,107,107"] { border-color: rgba(220,38,38,0.25) !important; }

/* Muted text tokens (#aaa/#888/#999/#ccc/#ddd + rgba whites) */
#crm:not(.aurora) [style*="color:#aaa"], #crm:not(.aurora) [style*="color: #aaa"],
#crm:not(.aurora) [style*="color:#888"], #crm:not(.aurora) [style*="color: #888"],
#crm:not(.aurora) [style*="color:#999"], #crm:not(.aurora) [style*="color: #999"],
#crm:not(.aurora) [style*="color:#ccc"], #crm:not(.aurora) [style*="color: #ccc"],
#crm:not(.aurora) [style*="color:#ddd"], #crm:not(.aurora) [style*="color: #ddd"],
#crm:not(.aurora) [style*="color:rgba(255,255,255,0.4"],
#crm:not(.aurora) [style*="color:rgba(255,255,255,0.5"],
#crm:not(.aurora) [style*="color:rgba(255,255,255,0.6"],
#crm:not(.aurora) [style*="color:rgba(255,255,255,0.7"] {
  color: #6b7280 !important;
  -webkit-text-fill-color: #6b7280 !important;
}

/* Inputs / selects / textareas — light fields */
#crm input[type="text"], #crm input[type="email"], #crm input[type="tel"],
#crm input[type="search"], #crm input[type="number"], #crm input[type="date"],
#crm select, #crm textarea {
  background: rgba(255,255,255,0.94) !important;
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
  border: 1px solid rgba(0,101,241,0.18) !important;
}
#crm input::placeholder, #crm textarea::placeholder {
  color: #9ca3af !important;
  -webkit-text-fill-color: #9ca3af !important;
}
#crm input:focus, #crm select:focus, #crm textarea:focus {
  outline: none !important;
  border-color: #0065f1 !important;
  box-shadow: 0 0 0 3px rgba(0,101,241,0.08) !important;
}

/* Ghost buttons (transparent + dim text) → soft-blue glass */
#crm:not(.aurora) button[style*="background:transparent"],
#crm:not(.aurora) button[style*="background: transparent"] {
  background: rgba(0,101,241,0.05) !important;
  color: #0065f1 !important;
  -webkit-text-fill-color: #0065f1 !important;
  border-color: rgba(0,101,241,0.18) !important;
}

/* Modal scrim: from rgba(0,0,0,0.85) → softer slate + blur */
#crm-detail-modal[style*="rgba(0,0,0,0.85)"] {
  background: rgba(17,24,39,0.48) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

/* Tier filter pills */
#crm:not(.aurora) .crm-tier-btn {
  background: rgba(255,255,255,0.88) !important;
  color: #6b7280 !important;
  -webkit-text-fill-color: #6b7280 !important;
  border: 0.5px solid rgba(0,101,241,0.14) !important;
}
#crm:not(.aurora) .crm-tier-btn.active {
  background: linear-gradient(135deg, rgba(0,101,241,0.14), rgba(0,101,241,0.08)) !important;
  color: #0065f1 !important;
  -webkit-text-fill-color: #0065f1 !important;
  border-color: rgba(0,101,241,0.35) !important;
}

/* ═══════════════════════════════════════════════════════════════
   ROUND 2 — $100B PREMIUM TREATMENT (matches Social Calendar)
   @keyframes z100bCardGlow is defined in z100b-social; keyframes
   are globally scoped in CSS regardless of which <style> defines them.
   ═══════════════════════════════════════════════════════════════ */

/* Hero header card — animated blue glow line on top */
#crm .ai-section > div[style*="linear-gradient(135deg,#0a1428"],
#crm .ai-section > div[style*="linear-gradient(135deg, #0a1428"] {
  position: relative !important;
  overflow: hidden !important;
}
#crm .ai-section > div[style*="linear-gradient(135deg,#0a1428"]::before,
#crm .ai-section > div[style*="linear-gradient(135deg, #0a1428"]::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, #0055d4, #0065f1, #2d7af8, #0065f1, #0055d4) !important;
  background-size: 200% 100% !important;
  animation: z100bCardGlow 4s ease-in-out infinite !important;
  z-index: 1 !important;
}

/* 4 hero stat chips — premium treatment (Total / Active / Today / Closed) */
#crm:not(.aurora) div[style*="text-align:center"][style*="rgba(26,127,232,0.08)"][style*="border-radius:12px"],
#crm:not(.aurora) div[style*="text-align:center"][style*="rgba(80,200,120,0.08)"][style*="border-radius:12px"],
#crm:not(.aurora) div[style*="text-align:center"][style*="rgba(255,107,107,0.08)"][style*="border-radius:12px"],
#crm:not(.aurora) div[style*="text-align:center"][style*="rgba(201,168,76,0.08)"][style*="border-radius:12px"] {
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(0,101,241,0.035)) !important;
  border: 0.5px solid rgba(0,101,241,0.14) !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 1px 3px rgba(0,101,241,0.05), 0 6px 16px rgba(0,101,241,0.05) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
#crm:not(.aurora) div[style*="text-align:center"][style*="rgba(26,127,232,0.08)"][style*="border-radius:12px"]::before,
#crm:not(.aurora) div[style*="text-align:center"][style*="rgba(80,200,120,0.08)"][style*="border-radius:12px"]::before,
#crm:not(.aurora) div[style*="text-align:center"][style*="rgba(255,107,107,0.08)"][style*="border-radius:12px"]::before,
#crm:not(.aurora) div[style*="text-align:center"][style*="rgba(201,168,76,0.08)"][style*="border-radius:12px"]::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, #0055d4, #0065f1, #2d7af8, #0065f1, #0055d4) !important;
  background-size: 200% 100% !important;
  animation: z100bCardGlow 4s ease-in-out infinite !important;
  z-index: 1 !important;
}
#crm:not(.aurora) div[style*="text-align:center"][style*="rgba(26,127,232,0.08)"][style*="border-radius:12px"]:hover,
#crm:not(.aurora) div[style*="text-align:center"][style*="rgba(80,200,120,0.08)"][style*="border-radius:12px"]:hover,
#crm:not(.aurora) div[style*="text-align:center"][style*="rgba(255,107,107,0.08)"][style*="border-radius:12px"]:hover,
#crm:not(.aurora) div[style*="text-align:center"][style*="rgba(201,168,76,0.08)"][style*="border-radius:12px"]:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0,101,241,0.10), 0 10px 24px rgba(0,101,241,0.08) !important;
}

/* Tabs (inner-tab): premium active + inactive. Gated :not(.aurora): in aurora the dark-glass
   tab treatment from L9569+ controls; this light fill must not leak onto the dark CRM. */
#crm:not(.aurora) .inner-tab {
  background: rgba(255,255,255,0.72) !important;
  color: #6b7280 !important;
  -webkit-text-fill-color: #6b7280 !important;
  border: 0.5px solid rgba(0,101,241,0.10) !important;
  border-radius: 10px !important;
  transition: all 0.2s ease !important;
}
#crm:not(.aurora) .inner-tab:hover {
  background: rgba(0,101,241,0.06) !important;
  color: #0065f1 !important;
  -webkit-text-fill-color: #0065f1 !important;
  border-color: rgba(0,101,241,0.22) !important;
}
#crm:not(.aurora) .inner-tab.active {
  background: linear-gradient(135deg, #0055d4, #0065f1, #2d7af8) !important;
  background-size: 200% 100% !important;
  animation: z100bCardGlow 6s ease-in-out infinite !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(0,101,241,0.30) !important;
}
#crm:not(.aurora) .inner-tab.active * { color: #fff !important; -webkit-text-fill-color: #fff !important; }

/* GUARANTEED-WIN legibility override for the Aurora CRM header. Placed after the aurora tab
   override (L9569+) and the .crm-aur-btn override (L9837), using html body section#crm.aurora
   specificity, so it ties-or-beats every fader on specificity and wins on source order. Scoped
   strictly to #crm.aurora: non-aurora CRM and all other sections are untouched. */
html body section#crm.aurora .crm-aur-hero div[style*="color:rgba(255,255,255,0.66)"],
html body section#crm.aurora .inner-tab:not(.active),
html body section#crm.aurora .inner-tab:not(.active) *,
html body section#crm.aurora .crm-aur-btn {
  color: rgba(255,255,255,0.82) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.82) !important;
  opacity: 1 !important;
}

/* Aurora-dark ZOOM Brief panel (re-enabled on CRM). The cards carry .crm-brief-card / .crm-brief-row.
   The rows use onclick="crmOpenContact(...)", which the un-guarded #crm [onclick*="crmOpenContact"]
   rule (L9455) forces to a near-white background; this block out-specifies it (html body section
   #crm.aurora ...) and sits after it, so the Brief cards stay dark glass. Scoped to #crm.aurora, so
   non-aurora CRM and every other section are untouched. */
html body section#crm.aurora .crm-brief-card {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.35) !important;
}
html body section#crm.aurora .crm-brief-row,
html body section#crm.aurora .crm-brief-row[onclick] {
  background: rgba(255,255,255,0.035) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.25) !important;
}
html body section#crm.aurora .crm-brief-row:hover {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(43,165,255,0.30) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.35) !important;
}

/* Smart filters panel — premium glow (LIGHT MODE ONLY; gated :not(.aurora) like the banner below.
   In aurora the bar keeps the dark-glass treatment from L9690 + the inline gradient, no white fill/glow). */
#crm:not(.aurora) #crm-smart-filters {
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(0,101,241,0.035)) !important;
  border: 0.5px solid rgba(0,101,241,0.18) !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 1px 3px rgba(0,101,241,0.04), 0 6px 18px rgba(0,101,241,0.05) !important;
}
#crm:not(.aurora) #crm-smart-filters::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, #0055d4, #0065f1, #2d7af8, #0065f1, #0055d4) !important;
  background-size: 200% 100% !important;
  animation: z100bCardGlow 4s ease-in-out infinite !important;
  z-index: 1 !important;
}
/* Aurora: SOLID dark panel fill so the section's blurred bright-blue ::before atmosphere does not
   bleed through the bar (L9690's glass is ~96% transparent, which is what read as a white glow).
   Same selector as L9690 + later source order => this background wins; the border stays from L9690. */
html body section#crm.aurora #crm-smart-filters {
  background: rgba(10,16,34,0.96) !important;
}
/* Aurora: the four Seller Signal Filter dropdowns. WebKit (Safari/iOS) renders native <select> faces
   white and IGNORES a CSS background unless appearance is reset - which is why every container-level
   fix failed to darken the bar on Apple browsers. appearance:none forces WebKit to paint OUR field.
   We use background-COLOR (not the `background` shorthand) for the dark fill so it coexists with a
   background-IMAGE custom chevron (the native caret is gone once appearance:none is set); padding-right
   clears the arrow. White text + border kept. Result reads dark on Safari/iOS and Chrome alike. */
html body section#crm.aurora #crm-smart-filters select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-color: rgba(255,255,255,0.06) !important;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M2 2l4 4 4-4' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  padding-right: 30px !important;
}

/* CRM toolbar (#crm-controls-row): ONE uniform two-tier button scheme. PRIMARY (.crm-tb-1st = + Add
   Client) blue gradient CTA; SECONDARY (.crm-tb-2nd = Bulk Import / Import Contacts / Auto-Categorize /
   AI Health Check) IDENTICAL dark glass. Both share size/padding/radius/font + white text forced via
   -webkit-text-fill-color (no-dark-on-blue). The buttons carry classes (no inline style) so the broad
   .section button[style*=...] repaint killers no longer match; this rule's 2,2,3 specificity + !important
   wins regardless. Fixes Auto-Categorize, whose color:var(--z-gold) resolved to ZOOM blue #0065f1 -> blue
   label on a bluish/low-contrast bg = unreadable; now a legible dark-glass secondary with white text. */
html body section#crm.aurora #crm-controls-row .crm-tb-1st,
html body section#crm.aurora #crm-controls-row .crm-tb-2nd {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  line-height: 1 !important;
  padding: 10px 18px !important;
  border-radius: 10px !important;
  width: auto !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease !important;
}
html body section#crm.aurora #crm-controls-row .crm-tb-1st {
  background: linear-gradient(135deg, #1A7FE8, #0F5BAD) !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(26,127,232,0.35) !important;
}
html body section#crm.aurora #crm-controls-row .crm-tb-1st:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(26,127,232,0.45) !important;
}
html body section#crm.aurora #crm-controls-row .crm-tb-2nd {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
}
html body section#crm.aurora #crm-controls-row .crm-tb-2nd:hover {
  background: rgba(255,255,255,0.10) !important;
  transform: translateY(-1px) !important;
}

/* Contact Health banner — premium (gated :not(.aurora); Aurora paints it dark via .crm-aur-banner) */
#crm:not(.aurora) #crm-contact-health-banner {
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(0,101,241,0.035)) !important;
  border: 0.5px solid rgba(0,101,241,0.15) !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 1px 3px rgba(0,101,241,0.04), 0 4px 14px rgba(0,101,241,0.05) !important;
}
#crm:not(.aurora) #crm-contact-health-banner::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, #0055d4, #0065f1, #2d7af8, #0065f1, #0055d4) !important;
  background-size: 200% 100% !important;
  animation: z100bCardGlow 5s ease-in-out infinite !important;
  z-index: 1 !important;
}

/* ALL CRM modal scrims — softer slate + blur */
#crm-detail-modal[style*="rgba(0,0,0,0.85)"],
#crm-add-modal[style*="rgba(0,0,0,0.85)"],
#vcf-import-modal[style*="rgba(0,0,0,0.85)"],
#crm-missing-info-modal[style*="rgba(0,0,0,0.85)"],
#crm-thankyou-modal[style*="rgba(0,0,0,0.85)"],
#b6-search-alert-modal[style*="rgba(0,0,0,0.85)"],
#b4-followup-modal[style*="rgba(0,0,0,0.85)"] {
  background: rgba(17,24,39,0.48) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

/* Follow-Up modal: light-theme form fields on the white card.
   Overrides the global dark select/textarea rules (L1743 select{} + L13803
   input[type=password],select,textarea{} = transparent/near-black bg + light
   text) which otherwise render the fields as invisible voids with faded text.
   id-scoped + !important to beat those element-selector !important globals. */
#b4-followup-modal #b4-fu-type,
#b4-followup-modal #b4-fu-message,
#b4-followup-modal #b4-fu-reminder-days {
  background: #ffffff !important;
  border: 1px solid rgba(0,101,241,0.15) !important;
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
}
#b4-followup-modal #b4-fu-type { border-radius: 10px !important; padding: 10px 12px !important; }
#b4-followup-modal #b4-fu-message { border-radius: 10px !important; padding: 12px 14px !important; min-height: 140px !important; }
#b4-followup-modal #b4-fu-reminder-days { border-radius: 8px !important; padding: 6px 10px !important; }
#b4-followup-modal #b4-fu-message::placeholder { color: #9ca3af !important; -webkit-text-fill-color: #9ca3af !important; }
#b4-followup-modal select option { background: #ffffff !important; color: #111827 !important; -webkit-text-fill-color: #111827 !important; }
/* Blue action buttons: force white text. Beats the body-scope darkener
   #crm div[style*="position:fixed"] * (L9401, spec 1,1,1 !important) which
   matches the fixed-modal subtree and turns the bare-text-node buttons dark;
   the sibling re-whitener (L9406) only catches button>child, not a text node.
   Two ids (spec 2,0,0) + !important wins outright. */
#b4-followup-modal #b4-fu-gen-btn,
#b4-followup-modal #b4-fu-sendtext-btn {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* Add Client modal: $100B light-theme fields on the white card. Unlike the
   Follow-Up modal this one is NOT reparented, so it stays inside #crm.aurora and
   its fields are darkened by the aurora rule html body section#crm.aurora
   input/textarea/select (L9632, spec 1,1,4 = near-transparent bg + WHITE text =
   invisible on the white card), with the notes textarea's inline color:#fff also
   re-whitened by L9704 (1,2,3). A bare #crm-add-modal id (a=1) would lose to both,
   so we match the SAME aurora chain + the modal id (a=2) to outrank them. DNC
   checkboxes/radios excluded so they keep their native rendering. */
html body section#crm.aurora #crm-add-modal input:not([type="checkbox"]):not([type="radio"]),
html body section#crm.aurora #crm-add-modal select,
html body section#crm.aurora #crm-add-modal textarea {
  background: #ffffff !important;
  border: 1px solid rgba(0,101,241,0.15) !important;
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
  border-radius: 10px !important;
  padding: 10px 12px !important;
}
html body section#crm.aurora #crm-add-modal input:not([type="checkbox"]):not([type="radio"])::placeholder,
html body section#crm.aurora #crm-add-modal textarea::placeholder {
  color: #9ca3af !important;
  -webkit-text-fill-color: #9ca3af !important;
}
html body section#crm.aurora #crm-add-modal select option {
  background: #ffffff !important;
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
}
html body section#crm.aurora #crm-add-modal input:not([type="checkbox"]):not([type="radio"]):focus,
html body section#crm.aurora #crm-add-modal select:focus,
html body section#crm.aurora #crm-add-modal textarea:focus {
  border-color: rgba(0,101,241,0.5) !important;
  box-shadow: 0 0 0 3px rgba(0,101,241,0.12) !important;
  outline: none !important;
}

/* Modal inner panels — premium white glass with top glow */
#crm-detail-modal > div[style*="margin:0 auto"],
#crm-add-modal > div[style*="margin:40px auto"],
#vcf-import-modal > div[style*="margin:40px auto"],
#crm-missing-info-modal > div[style*="margin:40px auto"],
#crm-thankyou-modal > div[style*="margin:40px auto"],
#b6-search-alert-modal > div[style*="margin:40px auto"] {
  background: rgba(255,255,255,0.98) !important;
  border: 0.5px solid rgba(0,101,241,0.14) !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 1px 3px rgba(0,101,241,0.05), 0 20px 60px rgba(0,101,241,0.12) !important;
  color: #111827 !important;
}
#crm-detail-modal > div[style*="margin:0 auto"]::before,
#crm-add-modal > div[style*="margin:40px auto"]::before,
#vcf-import-modal > div[style*="margin:40px auto"]::before,
#crm-missing-info-modal > div[style*="margin:40px auto"]::before,
#crm-thankyou-modal > div[style*="margin:40px auto"]::before,
#b6-search-alert-modal > div[style*="margin:40px auto"]::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, #0055d4, #0065f1, #2d7af8, #0065f1, #0055d4) !important;
  background-size: 200% 100% !important;
  animation: z100bCardGlow 4s ease-in-out infinite !important;
  z-index: 1 !important;
}

/* Edit Contact modal: reparented to <body> on open (via _hoistModalToBody in crmShowEditModal),
   so the section#crm.aurora white-card rules above no longer reach it. Self-contained body-level
   block that reproduces the white card + dark-text fields and beats the global dark input rules
   (L13898 input[...date...]/select/textarea + L13916 labels, both !important) via id specificity +
   !important. Covers BOTH date and datetime-local (the global rule omits datetime-local), which are
   the black boxes #crm-edit-closedate / #crm-edit-apptdate. */
#crm-edit-modal {
  background: rgba(17,24,39,0.48) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  backdrop-filter: blur(6px) !important;
}
#crm-edit-modal > div {
  background: rgba(255,255,255,0.98) !important;
  border: 0.5px solid rgba(0,101,241,0.14) !important;
  max-width: min(1000px, 94vw) !important;
  margin: 40px auto !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 1px 3px rgba(0,101,241,0.05), 0 20px 60px rgba(0,101,241,0.12) !important;
  color: #111827 !important;
}
#crm-edit-modal > div::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, #0055d4, #0065f1, #2d7af8, #0065f1, #0055d4) !important;
  background-size: 200% 100% !important;
  animation: z100bCardGlow 4s ease-in-out infinite !important;
  z-index: 1 !important;
}
#crm-edit-modal label {
  color: #374151 !important;
  -webkit-text-fill-color: #374151 !important;
}
#crm-edit-modal input:not([type="checkbox"]):not([type="radio"]),
#crm-edit-modal input[type="date"],
#crm-edit-modal input[type="datetime-local"],
#crm-edit-modal select,
#crm-edit-modal textarea {
  background: #ffffff !important;
  border: 1px solid rgba(0,101,241,0.15) !important;
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
  border-radius: 10px !important;
  padding: 10px 12px !important;
  color-scheme: light !important;
}
#crm-edit-modal input:not([type="checkbox"]):not([type="radio"])::placeholder,
#crm-edit-modal textarea::placeholder {
  color: #9ca3af !important;
  -webkit-text-fill-color: #9ca3af !important;
}
#crm-edit-modal select option {
  background: #ffffff !important;
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
}
#crm-edit-modal input:not([type="checkbox"]):not([type="radio"]):focus,
#crm-edit-modal select:focus,
#crm-edit-modal textarea:focus {
  border-color: rgba(0,101,241,0.5) !important;
  box-shadow: 0 0 0 3px rgba(0,101,241,0.12) !important;
  outline: none !important;
}
#crm-edit-modal button[style*="1A7FE8"] {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
/* Secondary (Cancel) button: subtle slate hover. !important beats the inline transparent base
   once the modal is reparented to body. Matches the bulk-import modal's $100B Cancel button. */
#crm-edit-modal .crm-edit-cancel:hover {
  background: rgba(15,23,42,0.04) !important;
  border-color: rgba(15,23,42,0.20) !important;
}

/* Modal header strip (background:#080a0e) → soft blue tint */
#crm:not(.aurora) [style*="background:#080a0e"][style*="padding:20px 24px"],
#crm:not(.aurora) [style*="background: #080a0e"][style*="padding:20px 24px"] {
  background: rgba(0,101,241,0.05) !important;
  border-bottom: 0.5px solid rgba(0,101,241,0.12) !important;
}

/* Primary gradient buttons in CRM */
#crm button[style*="linear-gradient(135deg,#0065f1"],
#crm button[style*="linear-gradient(135deg, #0065f1"],
#crm button[style*="linear-gradient(145deg,#0065f1"],
#crm button[style*="linear-gradient(145deg, #0065f1"],
#crm button[style*="linear-gradient(135deg,#0055d4"],
#crm button[style*="linear-gradient(135deg, #0055d4"],
#crm button[style*="linear-gradient(145deg,#0055d4"],
#crm button[style*="linear-gradient(145deg, #0055d4"] {
  background: linear-gradient(135deg, #0055d4, #0065f1) !important;
  color: #fff !important; -webkit-text-fill-color: #fff !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(0,101,241,0.24) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}
#crm button[style*="linear-gradient(135deg,#0065f1"]:hover,
#crm button[style*="linear-gradient(145deg,#0065f1"]:hover,
#crm button[style*="linear-gradient(135deg,#0055d4"]:hover,
#crm button[style*="linear-gradient(145deg,#0055d4"]:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(0,101,241,0.32) !important;
}

/* Focus ring on all inputs/selects/textareas */
#crm input:focus, #crm select:focus, #crm textarea:focus {
  outline: none !important;
  border-color: #0065f1 !important;
  box-shadow: 0 0 0 3px rgba(0,101,241,0.10) !important;
}

/* Contact list items — hover lift (cards are JS-rendered; most use border-radius) */
#crm #crm-contact-list > div[style*="border-radius"] {
  position: relative !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}
#crm #crm-contact-list > div[style*="border-radius"]:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0,101,241,0.10), 0 12px 32px rgba(0,101,241,0.08) !important;
  border-color: rgba(0,101,241,0.28) !important;
}

/* Kanban columns & cards */
#crm-kanban-board > div { transition: transform 0.2s ease !important; }
#crm-kanban-board div[style*="border-radius"][style*="padding"]:hover {
  border-color: rgba(0,101,241,0.28) !important;
  box-shadow: 0 2px 8px rgba(0,101,241,0.08), 0 6px 18px rgba(0,101,241,0.06) !important;
}

/* Missing info list items (inside crm-missing-info-modal) — consistent rows */
#crm-missing-info-list > div[style*="border-radius"] {
  background: rgba(0,101,241,0.04) !important;
  border: 0.5px solid rgba(0,101,241,0.12) !important;
  transition: background 0.15s ease, border-color 0.15s ease !important;
}
#crm-missing-info-list > div[style*="border-radius"]:hover {
  background: rgba(0,101,241,0.08) !important;
  border-color: rgba(0,101,241,0.24) !important;
}

/* Timeline entries inside detail modal */
#crm-modal-timeline > div[style*="border-radius"] {
  background: rgba(0,101,241,0.04) !important;
  border: 0.5px solid rgba(0,101,241,0.12) !important;
}