/* ============================================================
   BrokerEvolve — Contacts page
   Only loaded on /contacts route by loader.js.

   base.css handles all shared components (sidebar, header, text,
   backgrounds, borders, Naive UI overrides).
   This file only handles contacts-specific layout & components.
   ============================================================ */


/* ─── CONTACT DETAIL — 3-PANEL LAYOUT ────────────────────── */

.hl_contact-details-new--wrap {
  background-color: var(--be-bg) !important;
}

/* Left panel — contact form fields */
.hl_contact-details-left {
  background-color: var(--be-bg) !important;
  border-color: var(--be-border) !important;
}

/* Right panel — tabs (Activity, Tasks, Notes, etc.) */
.hl_contact-details-right {
  background-color: var(--be-bg) !important;
  border-color: var(--be-border) !important;
}

/* Center panel — conversation/messaging */
#center-panel,
#central-panel-wrapper {
  background-color: var(--be-bg) !important;
}

/* Panel dividers */
.hl_contact-details-new--wrap > div {
  border-color: var(--be-border) !important;
}


/* ─── LEFT PANEL — TOP NAV (Contact / Company tabs) ────── */

/* The Contact/Company tab strip sits in an absolute-positioned
   div with bg-white inside the left panel. */
.hl_contact-details-left .bg-white {
  background-color: var(--be-bg) !important;
}

.hl_contact-details-left .contact-detail-nav {
  background-color: var(--be-bg) !important;
  border-color: var(--be-border) !important;
}

/* Contact / Company tab links — GHL hardcodes text-[#188bf6] on active */
.hl_contact-details-left nav[aria-label="Tabs"] span {
  color: var(--be-text-sec) !important;
}

.hl_contact-details-left nav[aria-label="Tabs"] span[class*="border-"] {
  color: var(--be-accent) !important;
  border-color: var(--be-accent) !important;
}

/* Back arrow + contact phone/name in the top nav */
.hl_contact-details-left .contact-detail-nav .back,
.hl_contact-details-left .contact-detail-nav .icon {
  color: var(--be-text-sec) !important;
}


/* ─── LEFT PANEL — FORM FIELDS ──────────────────────────── */

/* GHL's own text inputs (.hl-text-input) — white bg by default */
.hl_contact-details-left .hl-text-input,
.hl_contact-details-left input[type="text"],
.hl_contact-details-left input[type="email"],
.hl_contact-details-left input[type="tel"],
.hl_contact-details-left input[type="number"],
.hl_contact-details-left input[type="date"],
.hl_contact-details-left input[type="password"],
.hl_contact-details-left select,
.hl_contact-details-left textarea {
  background-color: var(--be-surface) !important;
  color: var(--be-text) !important;
  border-color: var(--be-border) !important;
}

.hl_contact-details-left .hl-text-input:focus,
.hl_contact-details-left input:focus,
.hl_contact-details-left select:focus,
.hl_contact-details-left textarea:focus {
  border-color: var(--be-accent) !important;
  box-shadow: 0 0 0 2px var(--be-accent-glow) !important;
}

.hl_contact-details-left .hl-text-input::placeholder,
.hl_contact-details-left input::placeholder,
.hl_contact-details-left textarea::placeholder {
  color: var(--be-text-dim) !important;
}

/* Bootstrap .form-control inside contact details */
.hl_contact--details .form-control {
  background-color: var(--be-surface) !important;
  color: var(--be-text) !important;
  border-color: var(--be-border) !important;
}

.hl_contact--details .form-control:focus {
  border-color: var(--be-accent) !important;
  box-shadow: 0 0 0 2px var(--be-accent-glow) !important;
}

/* Form labels — GHL uses <div class="text-[#0c2d3f] label"> not <label>,
   so base.css's `label {}` rule only catches HTML <label> tags.
   This catches ALL label patterns in the left panel. */
.hl_contact-details-left label,
.hl_contact-details-left .label,
.hl_contact-details-left .form-label,
.hl_contact-details-left .text-sm.font-medium,
.hl_contact-details-left [class*="text-[#"] {
  color: var(--be-text-sec) !important;
}

/* "Hide empty fields" toggle — has inline style="color: black" */
#contact-details [style*="color: black"],
#contact-details [style*="color: rgb(0, 0, 0)"],
#contact-details [style*="color: rgb(0,0,0)"] {
  color: var(--be-text-sec) !important;
}

/* Form group text */
.hl_contact-details-left .form-group {
  color: var(--be-text) !important;
}

/* Section headers in the left panel (General Info, Additional Info, etc.) */
.hl_contact-details-left .font-semibold,
.hl_contact-details-left h3,
.hl_contact-details-left h4,
.hl_contact-details-left h5 {
  color: var(--be-text) !important;
}

/* Accordion / collapsible sections */
.hl_contact-details-left .border-b {
  border-color: var(--be-border) !important;
}

/* Select dropdown arrow area */
.hl_contact-details-left .hl-select-input {
  background-color: var(--be-surface) !important;
  color: var(--be-text) !important;
  border-color: var(--be-border) !important;
}

/* Bootstrap-select plugin (Contact Type dropdown) */
.hl_contact-details-left .bootstrap-select .btn {
  background-color: var(--be-surface) !important;
  color: var(--be-text) !important;
  border-color: var(--be-border) !important;
}

.hl_contact-details-left .bootstrap-select .filter-option,
.hl_contact-details-left .bootstrap-select .filter-option-inner-inner {
  color: var(--be-text) !important;
}

/* Checkbox styling */
.hl_contact-details-left input[type="checkbox"] {
  background-color: var(--be-surface) !important;
  border-color: var(--be-border-hover) !important;
}

/* "Created by" / "Created on" metadata */
#contact-details .created-text {
  color: var(--be-text-sec) !important;
}

#contact-details .internal-source-link {
  color: var(--be-accent) !important;
}


/* ─── CENTER PANEL — MESSAGING ──────────────────────────── */

.hl_contact-details-center {
  background-color: var(--be-bg) !important;
  border-color: var(--be-border) !important;
  color: var(--be-text) !important;
}

/* Message header — Owner/Followers bar at the top of center panel */
.hl_conversations--message-header-new {
  background-color: var(--be-bg) !important;
  color: var(--be-text) !important;
}

.hl_conversations--message-header-new .border-r {
  border-color: var(--be-border) !important;
}

/* Owner/Followers labels and text */
.hl_conversations--message-header-new .mb-1,
.hl_conversations--message-header-new .ui-text-sm-normal,
.hl_conversations--message-header-new .ui-text-xs-normal {
  color: var(--be-text-sec) !important;
}

/* Conversation body — has bg-white wrapper */
.hl_conversations--message .bg-white,
.hl_contact-details-center .bg-white {
  background-color: var(--be-bg) !important;
}

.message-body--conversation {
  background-color: var(--be-bg) !important;
  color: var(--be-text) !important;
}

/* Message input area */
.hl_contact-details-center textarea,
.hl_contact-details-center .form-control {
  background-color: var(--be-surface) !important;
  color: var(--be-text) !important;
  border-color: var(--be-border) !important;
}

/* Send button area */
.hl_contact-details-center .border-t {
  border-color: var(--be-border) !important;
}

/* Channel selector (SMS, WhatsApp, etc.) */
.hl_contact-details-center .nav-tabs {
  border-color: var(--be-border) !important;
}

.hl_contact-details-center .nav-link {
  color: var(--be-text-sec) !important;
}

.hl_contact-details-center .nav-link.active {
  color: var(--be-accent) !important;
  border-color: var(--be-accent) !important;
}

/* From/To selectors */
.hl_contact-details-center .hl-text-input {
  background-color: var(--be-surface) !important;
  color: var(--be-text) !important;
  border-color: var(--be-border) !important;
}

/* Clear button — Naive UI sets --n-color: #0000 inline.
   background-color !important needed to beat the inline style
   that resolves var(--n-color) → white at computed time. */
#contact-details #clear {
  --n-color: var(--be-surface) !important;
  --n-color-hover: var(--be-surface-2) !important;
  --n-color-pressed: var(--be-surface-3) !important;
  --n-text-color: var(--be-text-sec) !important;
  --n-text-color-hover: var(--be-text) !important;
  --n-border: 1px solid var(--be-border-hover) !important;
  --n-border-hover: 1px solid var(--be-text-dim) !important;
  background-color: var(--be-surface) !important;
}

/* Send button — GHL default blue → BrokerEvolve accent */
#contact-details #send-sms {
  --n-color: var(--be-accent) !important;
  --n-color-hover: #0891b2 !important;
  --n-color-pressed: #0e7490 !important;
  --n-text-color: #fff !important;
  --n-text-color-hover: #fff !important;
  --n-border: 1px solid var(--be-accent) !important;
  --n-border-hover: 1px solid #0891b2 !important;
  background-color: var(--be-accent) !important;
}

/* Date indicator pill between messages */
.message-group-date-indicator {
  background-color: var(--be-surface) !important;
  color: var(--be-text-sec) !important;
  border-color: var(--be-border) !important;
}

/* Message metadata — timestamps, channel labels */
.hl_contact-details-center .time-date,
.hl_contact-details-center .time-date span {
  color: var(--be-text-dim) !important;
}

/* "Message Details" action button on chat bubbles */
.hl_contact-details-center [id="menu-button"],
.hl_contact-details-center [id="menu-button"] * {
  color: var(--be-text-sec) !important;
}

.hl_contact-details-center [id="menu-button"]:hover,
.hl_contact-details-center [id="menu-button"]:hover * {
  color: var(--be-text) !important;
}

/* Page info bar (e.g. "Page: YIS Benefits") */
.hl_contact-details-center .bg-slate-50 {
  background-color: var(--be-surface) !important;
  color: var(--be-text) !important;
}

/* Segment counter (Segs: 0) */
.hl_contact-details-center .text-gray-400 {
  color: var(--be-text-dim) !important;
}

/* Light button variants in center panel */
.hl_contact-details-center .btn-light,
.hl_contact-details-center .btn-light2 {
  background-color: var(--be-surface) !important;
  color: var(--be-text-sec) !important;
  border-color: var(--be-border) !important;
}

/* Message compose toolbar icons */
.hl_contact-details-center .toolbar-icon,
.hl_contact-details-center [class*="toolbar"] svg {
  color: var(--be-text-sec) !important;
}


/* ─── OWNER / ASSIGNMENT DROPDOWN ────────────────────────
   "Unassigned" / assigned user dropdown at the top.
   ──────────────────────────────────────────────────────── */

#contact-details .ui-text-sm-normal {
  color: var(--be-text) !important;
}

#contact-details .ui-text-xs-normal {
  color: var(--be-text-sec) !important;
}


/* ─── CONTACT TOP BAR ─────────────────────────────────────
   The "Contact / Company" tab strip + action icons row
   above the 3-panel layout.
   ──────────────────────────────────────────────────────── */

.hl_contact--details {
  background-color: var(--be-bg) !important;
  color: var(--be-text) !important;
}

.hl_contact-details-new .contact-tab-item {
  color: var(--be-text-sec) !important;
  border-color: transparent !important;
}

.hl_contact-details-new .contact-tab-item:hover {
  color: var(--be-text) !important;
}

.hl_contact-details-new .contact-tab-item.active {
  color: var(--be-accent) !important;
  border-bottom-color: var(--be-accent) !important;
}

/* Contact name / phone at the top */
.hl_contact-details-new .text-lg,
.hl_contact-details-new .text-xl {
  color: var(--be-text) !important;
}

/* Action icon buttons row (call, email, task, etc.) */
.hl_contact-details-new .hl_contact-details-left .flex.items-center svg,
#contact-details .hl-icon,
#contact-details svg.cursor-pointer {
  color: var(--be-text-sec) !important;
}

#contact-details svg.cursor-pointer:hover {
  color: var(--be-accent) !important;
}


/* ─── RIGHT PANEL — TAB BAR ─────────────────────────────── */

#contacts-right-tabs-bar-wrapper {
  background-color: var(--be-bg) !important;
  border-color: var(--be-border) !important;
}

.hl_contact-details-right-tabs .nav-tabs {
  background-color: var(--be-bg) !important;
  border-color: var(--be-border) !important;
}

.hl_contact-details-right-tabs .nav-tabs .nav-link.contact-tab-item {
  color: var(--be-text-sec) !important;
  background-color: transparent !important;
  border-color: transparent !important;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.hl_contact-details-right-tabs .nav-tabs .nav-link.contact-tab-item:hover {
  color: var(--be-text) !important;
}

.hl_contact-details-right-tabs .nav-tabs .nav-link.contact-tab-item.active {
  color: var(--be-accent) !important;
  border-bottom: 2px solid var(--be-accent) !important;
  background-color: transparent !important;
}

/* Tab pane container */
.hl_contact-details-right .tab-content {
  background-color: var(--be-bg) !important;
}

.hl_contact-details-right .tab-pane {
  background-color: var(--be-bg) !important;
}


/* ─── ACTIVITY TAB ───────────────────────────────────────── */

#contact-activity-pane {
  background-color: var(--be-bg) !important;
}

/* Naive UI card that wraps the activity pane */
.activity-pane .n-card.activity-pane-content,
.activity-pane .n-card {
  --n-color: var(--be-bg) !important;
  --n-color-modal: var(--be-bg) !important;
  --n-color-popover: var(--be-bg) !important;
  --n-color-embedded: var(--be-bg) !important;
  --n-color-embedded-modal: var(--be-bg) !important;
  --n-color-embedded-popover: var(--be-bg) !important;
  --n-text-color: var(--be-text) !important;
  --n-title-text-color: var(--be-text) !important;
  --n-border-color: var(--be-border) !important;
  --n-box-shadow: none !important;
  --n-close-icon-color: var(--be-text-sec) !important;
  --n-action-color: var(--be-surface) !important;
  background-color: var(--be-bg) !important;
  border: none !important;
}

.activity-pane {
  background-color: var(--be-bg) !important;
}

/* Activity header area */
.activity-header {
  background-color: var(--be-bg) !important;
  color: var(--be-text) !important;
}

.header-title-container {
  color: var(--be-text) !important;
}

.header-title-container .n-text {
  color: var(--be-text) !important;
}

/* Activity filter/type selector */
.activity-header .n-select {
  --n-color: var(--be-surface) !important;
  --n-text-color: var(--be-text) !important;
  --n-border: 1px solid var(--be-border) !important;
  --n-border-hover: 1px solid var(--be-border-hover) !important;
  --n-border-active: 1px solid var(--be-accent) !important;
  --n-border-focus: 1px solid var(--be-accent) !important;
  --n-placeholder-color: var(--be-text-dim) !important;
  --n-arrow-color: var(--be-text-sec) !important;
}

/* Activity timeline items */
.activity-pane .timeline-container-inner {
  background-color: var(--be-bg) !important;
}

.activity-pane .activity-title,
.activity-pane .activity-title-contact {
  color: var(--be-text) !important;
}

.activity-pane .activity-body,
.activity-pane .activity-body-contact {
  color: var(--be-text-sec) !important;
}

.activity-pane .activity-icons {
  color: var(--be-text-sec) !important;
}

/* Empty state */
.empty-activities-container {
  background-color: var(--be-bg) !important;
}

.empty-activities-title {
  color: var(--be-text) !important;
}

.empty-activities-text,
.empty-activities-content p {
  color: var(--be-text-sec) !important;
}

.empty-activities-image {
  opacity: 0.6;
  filter: brightness(0.8);
}

/* Timezone label */
.timezone-label {
  color: var(--be-text-dim) !important;
}

/* Attribution block at bottom */
.attribution-block {
  background-color: var(--be-bg) !important;
  border-color: var(--be-border) !important;
}

.attribution-block .label {
  color: var(--be-text-sec) !important;
}

.attribution-block .value {
  color: var(--be-text) !important;
}


/* ─── NOTES TAB — FULL PANEL (right-side tab pane) ──────── */

/* Notes panel wrapper */
.notes-list-with-states {
  background-color: var(--be-bg) !important;
  color: var(--be-text) !important;
}

.notes-list-with-states .hr-wrapper-container {
  background-color: var(--be-bg) !important;
}

/* Notes title */
.notes-list-with-states .text-lg.text-gray-700 {
  color: var(--be-text) !important;
}

/* Empty state */
.notes-list-with-states .ui-empty-title {
  color: var(--be-text) !important;
}

.notes-list-with-states .ui-empty-description {
  color: var(--be-text-sec) !important;
}

.notes-list-with-states .ui-empty-icon-container svg {
  color: var(--be-text-dim) !important;
  opacity: 0.6;
}

/* Primary button inside notes empty state — GHL default is blue */
.notes-list-with-states .hr-button--primary-type,
#notes-empty-zero-state-btn-positive-action {
  --n-color: var(--be-accent) !important;
  --n-color-hover: #0891b2 !important;
  --n-color-pressed: #0e7490 !important;
  --n-text-color: #fff !important;
  --n-text-color-hover: #fff !important;
  --n-border: 1px solid var(--be-accent) !important;
  --n-border-hover: 1px solid #0891b2 !important;
  background-color: var(--be-accent) !important;
  border-color: var(--be-accent) !important;
  color: #fff !important;
}

/* Search input inside notes */
.notes-list-with-states #search-input,
.notes-list-with-states .hr-input {
  --n-color: var(--be-surface) !important;
  --n-border: 1px solid var(--be-border) !important;
  --n-border-hover: 1px solid var(--be-border-hover) !important;
  --n-border-focus: 1px solid var(--be-accent) !important;
  --n-text-color: var(--be-text) !important;
  --n-placeholder-color: var(--be-text-dim) !important;
}

/* Filter/sort icon buttons */
.notes-list-with-states #contact-filter-trigger,
.notes-list-with-states #true-filter-trigger {
  color: var(--be-text-sec) !important;
}

.notes-list-with-states #contact-filter-trigger:hover,
.notes-list-with-states #true-filter-trigger:hover {
  color: var(--be-text) !important;
}


/* ─── NOTES PANEL (floating panel from dialer/recents) ──── */

.contact-notes {
  background-color: var(--be-surface) !important;
  box-shadow: var(--be-shadow-lg) !important;
  border: 1px solid var(--be-border) !important;
  border-radius: 12px;
}

/* Notes panel header */
.contact-notes .rounded-t-lg.border-b.border-gray-200.bg-gray-50 {
  background-color: var(--be-shell) !important;
  border-color: var(--be-border) !important;
}

.contact-notes .font-inter.text-md.font-semibold {
  color: var(--be-text) !important;
}

/* Close icon */
.contact-notes svg.cursor-pointer.text-gray-600 {
  color: var(--be-text-sec) !important;
}

.contact-notes svg.cursor-pointer.text-gray-600:hover {
  color: var(--be-text) !important;
}

/* Add Note button */
#add-note-button {
  background-color: var(--be-accent-surface) !important;
  border-color: var(--be-accent) !important;
  color: var(--be-accent) !important;
}

#add-note-button:hover {
  background-color: rgba(6, 182, 212, 0.2) !important;
}

#add-note-button .text-primary-600,
#add-note-button svg {
  color: var(--be-accent) !important;
}

/* Note list box */
.contact-notes .rounded-lg.border.border-gray-200 {
  background-color: var(--be-surface) !important;
  border-color: var(--be-border) !important;
}

/* Individual note items */
.contact-notes .Note-item {
  background-color: var(--be-surface) !important;
}

.contact-notes .Note-item .border.border-gray-200.bg-gray-50 {
  background-color: var(--be-surface-inset) !important;
  border-color: var(--be-border) !important;
}

.contact-notes .Note-item .text-sm.text-gray-500 {
  color: var(--be-text-sec) !important;
}

.contact-notes .Note-item .text-xs.text-gray-400 {
  color: var(--be-text-dim) !important;
}

/* Edit icon */
.contact-notes .Note-item svg.text-primary-600 {
  color: var(--be-accent) !important;
}

.contact-notes .Note-item svg.text-primary-600:hover {
  color: var(--be-accent-glow) !important;
}

/* Note textarea */
#note-description {
  background-color: var(--be-surface-inset) !important;
  border-color: var(--be-border) !important;
  color: var(--be-text) !important;
  font-family: var(--be-font);
}

#note-description::placeholder {
  color: var(--be-text-dim) !important;
}

#note-description:focus {
  border-color: var(--be-accent) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px var(--be-accent-glow) !important;
}

/* Note editor wrapper */
.contact-notes .rounded-lg.border.border-gray-200.overflow-y-scroll,
.contact-notes .flex-wrap.gap-4.overflow-y-scroll.rounded-lg.border {
  background-color: var(--be-surface) !important;
  border-color: var(--be-border) !important;
}

/* Save / Cancel buttons */
#save-note-btn {
  background-color: var(--be-accent) !important;
  border-color: var(--be-accent) !important;
  color: #fff !important;
}

#save-note-btn:hover {
  background-color: #0891b2 !important;
}

#cancel-note-btn {
  background-color: var(--be-surface) !important;
  border-color: var(--be-border) !important;
  color: var(--be-text-sec) !important;
}

#cancel-note-btn:hover {
  background-color: var(--be-surface-2) !important;
  color: var(--be-text) !important;
}

/* Loading spinner in notes */
.contact-notes .text-primary-600 {
  color: var(--be-accent) !important;
}


/* ─── NOTES TAB (right-side panel tab pane) ─────────────── */

#notes {
  background-color: var(--be-bg) !important;
}


/* ─── CONTACT TAGS PANEL (same floating style) ──────────── */

.contact-tags {
  background-color: var(--be-surface) !important;
  box-shadow: var(--be-shadow-lg) !important;
  border: 1px solid var(--be-border) !important;
}


/* ─── RECENTS DETAIL CARD (inside notes/tags panel) ──────── */

.contact-notes .rounded-b-lg.border-b.border-gray-200.bg-gray-25,
.contact-tags .rounded-b-lg.border-b.border-gray-200.bg-gray-25 {
  background-color: var(--be-surface-inset) !important;
  border-color: var(--be-border) !important;
}

.contact-notes .rounded-lg.border.border-gray-200 > div,
.contact-tags .rounded-lg.border.border-gray-200 > div {
  border-color: var(--be-border) !important;
}


/* ─── COMPLAINT / FOLLOW-UP INDICATORS ───────────────────
   Prep classes for JS-injected note type system.
   Applied by contacts-notes.js to note items.
   ──────────────────────────────────────────────────────── */

/* Complaint note — subtle red left accent */
.be-note--complaint {
  border-left: 3px solid var(--be-complaint, #ef4444) !important;
  background-color: rgba(239, 68, 68, 0.06) !important;
}

.be-note--complaint .be-note-type-badge {
  color: #ef4444 !important;
  background-color: rgba(239, 68, 68, 0.12) !important;
}

/* Follow-up note — cyan badge indicator */
.be-note--followup {
  border-left: 3px solid var(--be-accent) !important;
  background-color: var(--be-accent-surface) !important;
}

.be-note--followup .be-note-type-badge {
  color: var(--be-accent) !important;
  background-color: var(--be-accent-surface) !important;
}

/* Note type badge — inline label */
.be-note-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.4;
  background-color: var(--be-surface-2);
  color: var(--be-text-sec);
}

/* Note type specific badges */
.be-note-type-badge--general {
  background-color: var(--be-surface-2);
  color: var(--be-text-sec);
}

.be-note-type-badge--call-summary {
  background-color: rgba(59, 130, 246, 0.12);
  color: #60a5fa;
}

.be-note-type-badge--follow-up {
  background-color: var(--be-accent-surface);
  color: var(--be-accent);
}

.be-note-type-badge--complaint {
  background-color: rgba(239, 68, 68, 0.12);
  color: #ef4444;
}

.be-note-type-badge--policy-update {
  background-color: rgba(139, 92, 246, 0.12);
  color: #a78bfa;
}


/* ─── NOTE ENTRY ENHANCEMENT (injected by contacts-notes.js) ── */

/* Note type dropdown */
.be-note-type-select {
  width: 100%;
  padding: 6px 10px;
  background-color: var(--be-surface-inset) !important;
  border: 1px solid var(--be-border) !important;
  border-radius: 6px;
  color: var(--be-text) !important;
  font-family: var(--be-font);
  font-size: 0.875rem;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 8.825a.5.5 0 0 1-.354-.146l-4-4a.5.5 0 0 1 .708-.708L6 7.617l3.646-3.646a.5.5 0 0 1 .708.708l-4 4A.5.5 0 0 1 6 8.825z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  cursor: pointer;
}

.be-note-type-select:focus {
  border-color: var(--be-accent) !important;
  outline: none;
  box-shadow: 0 0 0 2px var(--be-accent-glow);
}

.be-note-type-select option {
  background-color: var(--be-surface);
  color: var(--be-text);
}

/* Toggle switches row */
.be-note-toggles {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 0;
}

.be-note-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 0.8125rem;
  color: var(--be-text-sec);
  user-select: none;
}

.be-note-toggle:hover {
  color: var(--be-text);
}

/* Toggle switch track */
.be-note-toggle__track {
  position: relative;
  width: 32px;
  height: 18px;
  background-color: var(--be-surface-2);
  border-radius: 9px;
  transition: background-color 0.15s ease;
  flex-shrink: 0;
}

.be-note-toggle--active .be-note-toggle__track {
  background-color: var(--be-accent);
}

.be-note-toggle--complaint.be-note-toggle--active .be-note-toggle__track {
  background-color: #ef4444;
}

/* Toggle switch thumb */
.be-note-toggle__track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  background-color: #fff;
  border-radius: 50%;
  transition: transform 0.15s ease;
}

.be-note-toggle--active .be-note-toggle__track::after {
  transform: translateX(14px);
}

/* Note entry wrapper (injected container) */
.be-note-entry {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 0;
}

/* Note metadata line shown on saved notes */
.be-note-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}


/* ─── USER INFO / DETAIL TABLES ─────────────────────────
   These bg-white tables appear in modals and detail panels
   within the contact page.
   ──────────────────────────────────────────────────────── */

#contact-details .user-info-body {
  background-color: var(--be-surface) !important;
  color: var(--be-text) !important;
}

#contact-details .user-info-table {
  color: var(--be-text) !important;
}

#contact-details .user-info-table td,
#contact-details .user-info-table th {
  border-color: var(--be-border) !important;
  color: var(--be-text) !important;
}

#contact-details .user-detail-area {
  color: var(--be-text) !important;
}


/* ─── CONTACT-SCOPED UTILITY OVERRIDES ───────────────────
   Tailwind/GHL classes that only appear on contact pages.
   base.css handles the common ones — these are contact-specific.
   ──────────────────────────────────────────────────────── */

/* Slate bg utilities (used for badges/pills) */
#contact-details .bg-slate-50 {
  background-color: var(--be-surface) !important;
}

#contact-details .bg-slate-100 {
  background-color: var(--be-surface-2) !important;
}

/* Text colors that GHL hardcodes */
#contact-details .text-gray-1000,
#contact-details .text-slate-900,
#contact-details .text-slate-800,
#contact-details .text-slate-700 {
  color: var(--be-text) !important;
}

#contact-details .text-slate-500,
#contact-details .text-slate-600 {
  color: var(--be-text-sec) !important;
}

/* Highrise collapse sections (Courses offers, Community groups) */
#contact-details .hr-collapse {
  --n-text-color: var(--be-text) !important;
  --n-divider-color: var(--be-border) !important;
  --n-title-text-color: var(--be-text) !important;
}

/* Conversation wrapper text — catches dark text in message thread */
#contact-details .internal-comment-wrapper {
  color: var(--be-text) !important;
}

/* Border overrides within contact detail */
#contact-details .border-gray-200,
#contact-details .border-gray-300,
#contact-details .border-e,
#contact-details .border-s {
  border-color: var(--be-border) !important;
}

/* Modal content within contact detail (hidden modals still in DOM) */
#contact-details .modal-content {
  background-color: var(--be-surface) !important;
  color: var(--be-text) !important;
  border-color: var(--be-border) !important;
}


/* ─── VUE-SELECT DROPDOWNS (contact form) ────────────────
   vue-select (.vs__*) is used for tag/owner pickers.
   ──────────────────────────────────────────────────────── */

#contact-details .vs__dropdown-toggle {
  background-color: var(--be-surface) !important;
  border-color: var(--be-border) !important;
}

#contact-details .vs__selected {
  color: var(--be-text) !important;
}

#contact-details .vs__search,
#contact-details .vs__search::placeholder {
  color: var(--be-text-dim) !important;
}

#contact-details .vs__open-indicator {
  fill: var(--be-text-sec) !important;
}

#contact-details .vs__dropdown-menu {
  background-color: var(--be-surface) !important;
  border-color: var(--be-border) !important;
}

#contact-details .vs__dropdown-option {
  color: var(--be-text) !important;
}

#contact-details .vs__dropdown-option--highlight {
  background-color: var(--be-surface-2) !important;
  color: var(--be-text) !important;
}


/* ─── SCROLLBAR (contacts-specific panels) ───────────────── */

.contact-notes ::-webkit-scrollbar,
.hl_contact-details-right ::-webkit-scrollbar {
  width: 6px;
}

.contact-notes ::-webkit-scrollbar-track,
.hl_contact-details-right ::-webkit-scrollbar-track {
  background: transparent;
}

.contact-notes ::-webkit-scrollbar-thumb,
.hl_contact-details-right ::-webkit-scrollbar-thumb {
  background-color: var(--be-surface-2);
  border-radius: 3px;
}

.contact-notes ::-webkit-scrollbar-thumb:hover,
.hl_contact-details-right ::-webkit-scrollbar-thumb:hover {
  background-color: var(--be-text-dim);
}