/* ===== EMERGENCY: Stop infinite growing content ===== */
* {
  box-sizing: border-box !important;
}

body, html {
  height: auto !important;
  overflow-x: hidden !important;
  max-height: none !important;
}

/* Allow contacts to extend down the page */
.crm-content, .crm-container {
  max-height: none !important;
  overflow-y: visible !important;
  overflow-x: hidden !important;
}

/* Essential Tab Functionality */
.email-tab-content {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  max-height: calc(100vh - 250px) !important;
  box-sizing: border-box !important;
}

.email-tab-content.active {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* Fix email tab with sidebar specifically - ONLY when active */
.email-tab-content.with-sidebar {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  max-height: calc(100vh - 250px) !important;
  box-sizing: border-box !important;
  flex-direction: column !important;
}

.email-tab-content.with-sidebar.active {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* Prevent email content from growing infinitely */
.email-main-content,
.email-content,
.email-toolbar,
.email-actions,
.email-preview,
.email-editor {
  max-height: calc(100vh - 300px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

/* Fix email form elements */
.email-form,
.email-form-group,
.email-form-control {
  max-height: none !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

/* Dashboard Grid - Single Consolidated Definition */
.dashboard-grid {
  /* Layout */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  width: 100%;
  margin: 0;
  padding: 0 20px 40px 20px;
  box-sizing: border-box;
  align-items: start;
  justify-content: stretch;
  
  /* Constraints */
  max-width: none;
  max-height: calc(100vh - 300px);
  overflow-y: auto;
  overflow-x: hidden;
}

/* Fix dashboard widgets */
.dashboard-widget {
  max-height: 400px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

/* FORCE HIDE STUCK TAG MODALS */
.modal-content.tag-modal-content,
.modal-content.color-picker-modal-content,
#addTagModal,
#colorPickerModal {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

/* ===== Final centering overrides (highest priority) ===== */
.crm-content #emailTab.with-sidebar,
.crm-content #emailTab.with-sidebar.active {
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 1600px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 5px !important;
  padding-right: 5px !important;
  box-sizing: border-box !important;
}

#emailTab .email-sidebar {
  position: static !important;
  flex: 0 0 340px !important;
  width: 340px !important;
}

#emailTab .email-main-content {
  flex: 1 1 900px !important;
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* Modern Clean Design - Black, Gray, Dusty Pink */
/* This file loads AFTER Tailwind CSS to ensure it takes precedence */

/* ========================================
   GLOBAL HEADER BANNER STYLING
   ======================================== */

.header-banner {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  z-index: 1000 !important;
  position: relative !important;
}

/* ===============================
   Email Builder Centering Rules
   =============================== */
/* Constrain and center the entire Email Builder tab area (including sidebar) */
#emailTab.email-tab-content,
#emailTab.with-sidebar {
  max-width: 1600px !important; /* was 1440 */
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  padding-top: 0 !important; /* Remove excessive top padding */
  margin-top: 0 !important;
}

/* Use a centered grid for sidebar + main content */
#emailTab.with-sidebar {
  display: grid !important;
  grid-template-columns: 340px minmax(900px, 1fr) !important; /* sidebar + main */
  gap: 28px !important;
  justify-content: center !important;
  align-items: start !important;
  width: 100% !important;
  max-width: 1600px !important;
  padding: 0 20px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* Higher-specificity override to beat inline styles in crm.html */
.crm-content #emailTab.with-sidebar {
  /* Keep base state inheriting display:none from crm.html; only size defaults here */
  grid-template-columns: 340px minmax(900px, 1fr) !important;
  gap: 12px !important;
  justify-content: center !important;
  align-items: start !important;
  width: 100% !important;
  max-width: 1600px !important;
  padding: 0 0px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* Explicitly hide non-active email tab */
.crm-content #emailTab.with-sidebar:not(.active) {
  display: none !important;
}

/* Remove left padding on the main content container when email tab is visible */
.crm-content {
  padding-left: 0 !important;
  text-align: initial !important;
}

/* Parent container should not right-align children */
.crm-container {
  text-align: initial !important;
}

/* Ensure the email tab container itself is centered regardless of inherited widths */
#emailTab {
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  float: none !important;
  text-align: initial !important;
}

/* Remove any left padding from the tab content when sidebar is used */
.crm-content .email-tab-content.with-sidebar {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Ensure the main editor wrapper centers exactly within the centered track */
#emailTab .email-editor-wrapper {
  width: auto !important;
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Force active state to keep grid layout and centered container */
#emailTab.with-sidebar.active {
  display: grid !important;
  grid-template-columns: 340px minmax(900px, 1fr) !important;
  gap: 28px !important;
  justify-content: center !important;
  align-items: start !important;
  width: 100% !important;
  max-width: 1600px !important;
  height: auto !important;
  padding: 0 20px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* Higher-specificity override for active state */
.crm-content #emailTab.with-sidebar.active {
  display: grid !important;
  grid-template-columns: 400px minmax(900px, 1fr) !important;
  gap: 12px !important;
  justify-content: center !important;
  align-items: start !important;
  width: 100% !important;
  max-width: 1600px !important;
  height: auto !important;
  padding: 0 0px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* Explicitly place columns so main content is on the right, sidebar on the left */
#emailTab.with-sidebar .email-sidebar {
  position: static !important;
  left: auto !important;
  top: auto !important;
  width: 340px !important;
  grid-column: 1 !important; /* sidebar in first column */
}

#emailTab.with-sidebar .email-main-content {
  grid-column: 2 !important; /* main content in second column */
}

/* Ensure the main column content itself is centered and not full-bleed */
#emailTab .email-main-content {
  max-width: 1400px !important; /* was 1180 */
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Center the editor area within the main column */
#emailTab .email-editor-wrapper,
#emailTab .email-editor {
  max-width: 1360px !important; /* was 1120 */
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Removed conflicting email-toolbar rule - now handled by new alignment fix */

/* On very wide screens keep things nicely centered */
@media (min-width: 1800px) {
  #emailTab.email-tab-content,
  #emailTab.with-sidebar {
    max-width: 1800px !important; /* allow even wider on ultra-large screens */
  }
  #emailTab .email-main-content { max-width: 1600px !important; }
  #emailTab .email-editor-wrapper, #emailTab .email-editor { max-width: 1560px !important; }
}

/* Normalize editor text size (the global +2px rule was making it look too large) */
#emailTab .rich-editor,
#emailTab .rich-editor * {
  font-size: 14px !important; /* slightly smaller to avoid oversized appearance */
  line-height: 1.5 !important;
}

/* Keep toolbar control sizes reasonable */
#emailTab .format-select,
#emailTab .format-btn,
#emailTab .color-picker {
  font-size: 12px !important;
}

/* Editor readability and layout */
#emailTab .rich-editor {
  min-height: 420px !important;
  padding: 16px !important;
  background: #fff !important;
  border: 1px solid var(--subtle-border) !important;
  border-radius: 8px !important;
}

/* Preview body text should not inherit oversized fonts */
#emailTab .preview-body,
#emailTab .preview-body * {
  font-size: 15px !important;
  line-height: 1.6 !important;
}

/* Ensure the editor wrapper doesn't sit flush under toolbar */
#emailTab .email-editor-wrapper {
  margin-top: 12px !important;
}

/* Ensure the editor container spacing looks balanced */
#emailTab .rich-editor-container {
  padding-top: 6px !important;
}


.header-banner img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
  max-height: 200px !important;
  border: none !important;
  outline: none !important;
}

/* Ensure banner doesn't interfere with other elements */
.header-banner + * {
  margin-top: 0 !important;
}

/* Import Inter font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* Refined Luxury Color Palette */
:root {
  /* Primary Colors - Elegant Charcoal */
  --primary-black: #2D2D2D;
  --secondary-black: #333333;
  --button-hover: #4A4A4A;
  
  /* Agent Branding Colors - Dynamic per agent */
  --agent-primary: #e4572e; /* Default orange, can be overridden per agent */
  --agent-secondary: #2D2D2D; /* Fallback to theme colors */
  
  /* Background Colors - Warm Neutrals */
  --warm-background: #FAF9F6;
  --card-background: #ffffff;
  --header-background: #FAF9F6;
  
  /* Border Colors - Subtle Grays */
  --subtle-border: #EDEDED;
  --medium-border: #E0E0E0;
  --light-border: #EAEAEA;
  
  /* Text Colors - Soft Slate */
  --text-dark: #2D2D2D;
  --text-secondary: #6B6B6B;
  --text-light: #8E8E93;
  
  /* Accent Colors - Warm Beige */
  --accent-beige: #BFAE9B;
  --accent-beige-light: #C9B9A8;
  --accent-beige-dark: #E5DDD2;
  
  /* Legacy Dusty Pink (keeping for compatibility) */
  --dusty-pink: #f4e4e6;
  --dusty-pink-accent: #e8d5d8;
  --dusty-pink-dark: #d4b8bc;
  
  /* Utility Colors */
  --white: #ffffff;
  --medium-gray: #F3F3F3;
  --shadow-subtle: rgba(0, 0, 0, 0.04);
  --shadow-medium: rgba(0, 0, 0, 0.08);
}

/* Refined Typography System */
* {
  font-family: 'Lora', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif !important;
}

/* Dashboard and Widget Titles */
.dashboard-title, .widget-header h2, .widget-header h3 {
  font-family: 'Lora', serif !important;
  font-weight: 600 !important;
  font-size: 20px !important;
  color: var(--text-dark) !important;
  letter-spacing: 0.3px !important;
  margin: 0 !important;
}

/* Section Headers */
.section-header, .widget-title {
  font-family: 'Lora', serif !important;
  font-weight: 600 !important;
  font-size: 18px !important;
  color: var(--text-dark) !important;
  letter-spacing: 0.5px !important;
}

/* Body Text - Refined */
.widget-body p, .contact-info, .calendar-day, .task-item, .timeline-item {
  color: var(--text-secondary) !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  font-size: 16px !important;
}

/* Removed global font escalation that increased all text by 2px */

/* Dashboard Grid Layout - Consolidated into main definition above */

/* Dashboard Tab Content - Commented out problematic rules */
/* #dashboardTab {
  width: 100vw !important;
  max-width: 100vw !important;
  margin: 0 !important;
  padding: 0 !important;
} */

.dashboard-widget {
  background: var(--card-background, #ffffff);
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
  border: 1px solid var(--subtle-border, #ececec);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: all 0.3s ease;
}

.dashboard-widget:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

/* Draggable Widget Styles */
.draggable-widget {
  position: relative;
  cursor: move;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.draggable-widget:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.draggable-widget.dragging {
  z-index: 1000;
  transform: rotate(2deg);
  box-shadow: 0 15px 35px rgba(0,0,0,0.3);
}

.widget-header {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  position: relative !important;
  padding: 8px 16px !important;
  padding-right: 60px !important;
}

.widget-header h2 {
  margin: 0;
  flex: 1;
  order: 2;
}

/* Add Task button - positioned naturally in the flow */
.tasks-widget .add-task-btn {
  flex: 0 0 auto !important;
  margin: 0 !important;
  width: auto !important;
  min-width: auto !important;
  max-width: 120px !important;
  padding: 4px 8px 0px 8px !important;
  font-size: 12px !important;
  white-space: nowrap !important;
  order: 1 !important;
}

.widget-controls {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 4px !important;
  border-radius: 4px !important;
  transition: background-color 0.2s ease !important;
  position: absolute !important;
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 10 !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Ensure AI Priority Leads widget has visible controls */
#aiPriorityLeadsWidget .widget-controls {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: absolute !important;
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 10 !important;
}

#aiPriorityLeadsWidget .drag-handle {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  cursor: grab !important;
  color: #666 !important;
  font-size: 16px !important;
  padding: 4px 6px !important;
  border-radius: 3px !important;
  transition: all 0.2s ease !important;
  user-select: none !important;
  font-weight: bold !important;
}

/* AI WIDGET CONTROLS - FIXED POSITIONING */
#aiPriorityLeadsWidget {
  position: relative !important;
}

#aiPriorityLeadsWidget .widget-header {
  position: relative !important;
  padding-right: 60px !important;
}

#aiPriorityLeadsWidget .widget-controls {
  display: flex !important;
  position: absolute !important;
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 1000 !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 4px !important;
  border-radius: 4px !important;
  background: transparent !important;
}

#aiPriorityLeadsWidget .drag-handle {
  display: inline-block !important;
  color: #666 !important;
  font-size: 16px !important;
  cursor: grab !important;
  padding: 4px 6px !important;
  border-radius: 3px !important;
  transition: all 0.2s ease !important;
  user-select: none !important;
  font-weight: bold !important;
}

#aiPriorityLeadsWidget .resize-handle {
  display: inline-block !important;
  cursor: nw-resize !important;
  color: #666 !important;
  background: none !important;
  border: none !important;
  font-size: 12px !important;
  padding: 4px !important;
  border-radius: 3px !important;
}

.widget-controls:hover {
  background-color: #f0f0f0;
}

.drag-handle {
  cursor: grab !important;
  color: #666;
  font-size: 16px;
  padding: 4px 6px;
  border-radius: 3px;
  transition: all 0.2s ease;
  user-select: none;
  font-weight: bold;
}

.drag-handle:hover {
  background-color: #e0e0e0;
  color: #333;
  transform: scale(1.1);
}

.drag-handle:active {
  cursor: grabbing !important;
  background-color: #d0d0d0;
}

.resize-handle {
  cursor: nw-resize;
  background: none;
  border: none;
  color: #666;
  font-size: 12px;
  padding: 4px;
  border-radius: 3px;
  transition: background-color 0.2s ease;
}

.resize-handle:hover {
  background-color: #f0f0f0;
}

/* AI Insights Widget */
#aiPriorityLeadsWidget {
  min-height: 200px !important;
}

.calendar-widget {
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  max-height: 400px !important;
}

.calendar-widget .widget-body {
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

.calendar-widget .calendar-grid {
  grid-template-rows: auto !important;
  max-height: 300px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

.calendar-widget .widget-header {
  padding: 4px 8px !important;
  margin: -24px -24px 4px -24px !important;
}


.widget-header {
  padding: 8px 16px !important;
  border-bottom: 1px solid var(--light-border) !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  background: var(--header-background) !important;
  margin: -24px -24px 10px -24px !important;
  text-align: center !important;
  position: relative !important;
}

.widget-header h2 {
  font-size: 20px !important;
  font-weight: 600 !important;
  color: var(--text-dark) !important;
  margin: 0 !important;
  font-family: 'Lora', serif !important;
  text-align: center !important;
}

.widget-body {
  text-align: center !important;
}

/* Force center alignment for all dashboard widget content */
.dashboard-widget .widget-header,
.dashboard-widget .widget-body,
.dashboard-widget h2,
.dashboard-widget h3,
.dashboard-widget .widget-title {
  text-align: center !important;
}

.widget-body {
  padding: 16px !important;
  flex: 1 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Tasks Widget - styling only, no positioning */
.add-task-btn {
  background: transparent !important;
  color: var(--primary-black) !important;
  border: 1px solid var(--subtle-border) !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
}

.add-task-btn:hover {
  background: var(--warm-background) !important;
  border-color: var(--primary-black) !important;
  transform: translateY(-1px) !important;
}

.task-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.task-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px !important;
  background: var(--warm-background) !important;
  border-radius: 8px !important;
  border: 1px solid var(--subtle-border) !important;
}

.task-item.completed {
  opacity: 0.6 !important;
}

.task-item.completed .task-text {
  text-decoration: line-through !important;
}

.task-checkbox {
  width: 16px !important;
  height: 16px !important;
  cursor: pointer !important;
}

.task-text {
  flex: 1 !important;
  font-size: 14px !important;
  color: var(--text-dark) !important;
  font-family: 'Lora', serif !important;
}

.task-due {
  font-size: 12px !important;
  color: var(--text-secondary) !important;
  background: var(--medium-gray) !important;
  padding: 4px 8px !important;
  border-radius: 4px !important;
  font-family: 'Lora', serif !important;
}

/* Contacts Widget */
.contact-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.contact-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px !important;
  background: var(--warm-background) !important;
  border-radius: 8px !important;
  border: 1px solid var(--subtle-border) !important;
}

.contact-avatar {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: var(--primary-black) !important;
  color: var(--white) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  font-family: 'Lora', serif !important;
}

.contact-info {
  flex: 1 !important;
}

/* Contact List Styles - Override global text size increase */
.contact-card {
  font-size: 14px !important;
}

.contact-card * {
  font-size: 14px !important;
}

.contact-card .contact-email,
.contact-card .contact-phone,
.contact-card .contact-address {
  font-size: 19px !important;
}

.contact-card button {
  font-size: 12px !important;
  padding: 4px 8px !important;
}

.contact-name {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--text-dark) !important;
  margin-bottom: 4px !important;
  font-family: 'Lora', serif !important;
}

.contact-reason {
  font-size: 12px !important;
  color: var(--text-secondary) !important;
  font-family: 'Lora', serif !important;
}

.contact-action-btn {
  background: var(--primary-black) !important;
  color: var(--white) !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font-size: 12px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  font-family: 'Lora', serif !important;
  font-weight: 600 !important;
}

.contact-action-btn:hover {
  background: var(--secondary-black) !important;
}

/* Timeline Widgets */
.timeline-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

.timeline-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  position: relative !important;
}

.timeline-item:not(:last-child)::after {
  content: '' !important;
  position: absolute !important;
  left: 11px !important;
  top: 24px !important;
  width: 2px !important;
  height: calc(100% + 16px) !important;
  background: var(--subtle-border) !important;
}

.timeline-dot {
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  background: var(--medium-gray) !important;
  border: 3px solid var(--white) !important;
  box-shadow: 0 0 0 2px var(--subtle-border) !important;
  flex-shrink: 0 !important;
  z-index: 1 !important;
}

.timeline-item.active .timeline-dot {
  background: var(--primary-black) !important;
  box-shadow: 0 0 0 2px var(--primary-black) !important;
}

.timeline-item.completed .timeline-dot {
  background: var(--dusty-pink-dark) !important;
  box-shadow: 0 0 0 2px var(--dusty-pink-dark) !important;
}

.timeline-content {
  flex: 1 !important;
}

.timeline-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--text-dark) !important;
  margin-bottom: 4px !important;
  font-family: 'Lora', serif !important;
}

.timeline-date {
  font-size: 12px !important;
  color: var(--text-secondary) !important;
  margin-bottom: 4px !important;
  font-family: 'Lora', serif !important;
}

.timeline-property {
  font-size: 12px !important;
  color: var(--text-secondary) !important;
  font-family: 'Lora', serif !important;
}

/* Polished Agent Calendar Widget */
.calendar-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  margin-bottom: 2px !important;
  margin-top: 0px !important;
  padding: 0px !important;
  font-family: 'Lora', serif !important;
}

.calendar-header .calendar-title {
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
  padding: 0px !important;
  margin: 0px !important;
}

.calendar-header .calendar-title .month-name {
  color: #000000 !important;
  font-weight: bold !important;
}

.calendar-nav-btn {
  background: #f0f0f0 !important;
  border: none !important;
  border-radius: 4px !important;
  font-size: 10px !important;
  padding: 2px 6px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  font-family: 'Lora', serif !important;
  min-width: 20px !important;
  height: 20px !important;
}

.calendar-nav-btn:hover {
  background: #e0e0e0 !important;
  transform: translateY(-1px) !important;
}

.calendar-grid {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  grid-template-rows: auto !important;
  gap: 1px !important;
  flex: 1 !important;
  padding: 0px !important;
  background-color: transparent !important;
  border-radius: 0px !important;
  max-height: none !important;
  overflow: hidden !important;
  border: none !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  height: 100% !important;
}

.calendar-day {
  border: 1px solid #ccc !important;
  border-radius: 2px !important;
  text-align: center !important;
  padding: 0 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  cursor: pointer !important;
  transition: all 0.3s !important;
  background: #FFFFFF !important;
  color: #2D2D2D !important;
  font-family: 'Lora', serif !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  width: 100% !important;
  min-height: 0 !important;
}

.calendar-day:hover {
  background-color: var(--agent-primary) !important;
  color: white !important;
}

.calendar-day.today {
  border: 2px solid var(--agent-primary) !important;
  font-weight: bold !important;
  background-color: #FFFFFF !important;
  color: var(--agent-primary) !important;
}

.calendar-day.today .day-number {
  color: var(--agent-primary) !important;
  font-weight: bold !important;
}

.day-number {
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #2D2D2D !important;
  font-family: 'Lora', serif !important;
  line-height: 1.0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.day-posts {
  display: none !important;
}

/* Luxury Calendar Enhancements */
.calendar-day.scheduled {
  background: linear-gradient(135deg, #F8F8F8, #FFFFFF) !important;
  position: relative !important;
  border-color: #C0C0C0 !important;
}

.calendar-day.scheduled::after {
  content: '•' !important;
  color: #333333 !important;
  font-size: 10px !important;
  position: absolute !important;
  bottom: 4px !important;
  right: 6px !important;
  font-weight: bold !important;
}

/* Calendar Header Styling */
.calendar-month {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: #000000 !important;
  text-align: center !important;
  margin: 0 0 12px 0 !important;
  font-family: 'Lora', serif !important;
}

/* Weekday Labels */
.calendar-weekdays {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  text-align: center !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  color: #000000 !important;
  margin-top: 8px !important;
  font-family: 'Lora', serif !important;
}

.calendar-weekdays div {
  padding: 8px 0 !important;
}

.post-item {
  display: none !important;
}

.post-item.facebook {
  background: var(--accent-beige-dark) !important;
  color: var(--text-dark) !important;
  font-size: 8px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: 'Lora', serif !important;
  border: 1px solid var(--accent-beige) !important;
}

.post-item.facebook::before {
  content: "📘" !important;
  margin-right: 2px !important;
  opacity: 0.8 !important;
}

.post-item.instagram {
  background: var(--medium-gray) !important;
  color: var(--text-dark) !important;
  font-size: 8px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: 'Lora', serif !important;
  border: 1px solid var(--subtle-border) !important;
}

.post-item.instagram::before {
  content: "📷" !important;
  margin-right: 2px !important;
  opacity: 0.8 !important;
}

.post-item.scheduled {
  background: var(--dusty-pink-accent) !important;
  color: var(--text-dark) !important;
  font-size: 8px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: 'Lora', serif !important;
  border: 1px solid var(--dusty-pink-dark) !important;
}

.post-item.scheduled::before {
  content: "⏰" !important;
  margin-right: 2px !important;
  opacity: 0.8 !important;
}

.calendar-legend {
  display: none !important;
}

.legend-item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13px !important;
  color: var(--text-secondary) !important;
  font-family: 'Lora', serif !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
}

.legend-icon {
  font-size: 16px !important;
}

.legend-color {
  width: 12px !important;
  height: 12px !important;
  border-radius: 2px !important;
}

.legend-color.facebook {
  background: var(--accent-beige-dark) !important;
  border: 1px solid var(--accent-beige) !important;
}

.legend-color.instagram {
  background: var(--medium-gray) !important;
  border: 1px solid var(--subtle-border) !important;
}

.legend-color.scheduled {
  background: var(--dusty-pink-accent) !important;
  border: 1px solid var(--dusty-pink-dark) !important;
}

/* Quick Actions Widget */
.quick-actions-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.quick-action-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px !important;
  background: var(--warm-background) !important;
  border-radius: 8px !important;
  border: 1px solid var(--subtle-border) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.quick-action-item:hover {
  background: var(--dusty-pink) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.action-icon {
  font-size: 20px !important;
  width: 40px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--primary-black) !important;
  color: var(--white) !important;
  border-radius: 8px !important;
  flex-shrink: 0 !important;
}

.action-content {
  flex: 1 !important;
}

.action-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--text-dark) !important;
  margin-bottom: 4px !important;
  font-family: 'Lora', serif !important;
}

.action-description {
  font-size: 12px !important;
  color: var(--text-secondary) !important;
  font-family: 'Lora', serif !important;
}

/* Desktop-only email builder - no responsive CSS needed */

/* ============================================================================
   MAIN SCHEDULER PAGE LAYOUT FIXES
   ============================================================================ */

/* Main scheduler container - full width layout */
#mainContainer {
  display: grid !important;
  grid-template-columns: 300px 1fr 300px !important;
  gap: 20px !important;
  height: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 20px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  background: var(--warm-background) !important;
}

/* Sidebar styling - Facebook and Instagram */
.sidebar {
  background: var(--card-background) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 12px var(--shadow-subtle) !important;
  border: 1px solid var(--subtle-border) !important;
  overflow: hidden !important;
}

.sidebar .rounded-xl {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 20px !important;
}

.sidebar-header {
  margin-bottom: 20px !important;
}

.sidebar-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--primary-black) !important;
  margin: 0 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
}

/* Sidebar search inputs */
#fbSearch, #igSearch {
  width: 100% !important;
  padding: 10px 12px !important;
  border: 1px solid var(--subtle-border) !important;
  border-radius: 6px !important;
  background: var(--white) !important;
  font-size: 14px !important;
  color: var(--text-dark) !important;
  margin-bottom: 15px !important;
  box-sizing: border-box !important;
}

/* Sidebar pages container */
#facebookPages, #instagramPages {
  max-height: 400px !important;
  overflow-y: auto !important;
  margin-bottom: 20px !important;
}

/* Page items in sidebar */
.page-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px !important;
  margin-bottom: 8px !important;
  background: var(--warm-background) !important;
  border-radius: 8px !important;
  border: 1px solid var(--subtle-border) !important;
  transition: all 0.2s ease !important;
}

.page-item:hover {
  background: var(--dusty-pink) !important;
  border-color: var(--dusty-pink-accent) !important;
}

.page-item input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
}

.page-avatar {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  color: var(--white) !important;
}

.page-info {
  flex: 1 !important;
}

.page-name {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--text-dark) !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}

.page-actions {
  display: flex !important;
  gap: 5px !important;
}

.page-actions button {
  padding: 4px 8px !important;
  font-size: 11px !important;
  border-radius: 4px !important;
  border: 1px solid var(--subtle-border) !important;
  background: var(--white) !important;
  color: var(--text-secondary) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.page-actions button:hover {
  background: var(--dusty-pink-accent) !important;
  color: var(--text-dark) !important;
}

/* Sidebar toggle button */
.sidebar-toggle-btn {
  width: 100% !important;
  padding: 10px 15px !important;
  background-color: #F5F5F7 !important;
  color: #2D2D2D !important;
  border: 1px solid #DADADA !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  font-family: 'Lora', serif !important;
  cursor: pointer !important;
  transition: all 0.2s ease-in-out !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02) !important;
}

.sidebar-toggle-btn:hover {
  background-color: #EAEAEA !important;
  color: #1a1a1a !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important;
  border-color: #C0C0C0 !important;
}

/* Main content area */
.main-content-area {
  background: var(--card-background) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 12px var(--shadow-subtle) !important;
  border: 1px solid var(--subtle-border) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Toolbar wrapper */
.toolbar-wrapper {
  background: var(--warm-background) !important;
  border-bottom: 1px solid var(--subtle-border) !important;
  padding: 15px 20px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.toolbar-left, .toolbar-right {
  display: flex !important;
  gap: 12px !important;
  align-items: center !important;
}

/* Toolbar buttons */
.toolbar-wrapper .btn {
  padding: 10px 16px !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.toolbar-wrapper .btn-primary {
  background-color: #F5F5F7 !important;
  color: #2D2D2D !important;
  border: 1px solid #DADADA !important;
  border-radius: 10px !important;
  font-family: 'Lora', serif !important;
  transition: all 0.2s ease-in-out !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02) !important;
}

.toolbar-wrapper .btn-primary:hover {
  background-color: #EAEAEA !important;
  color: #1a1a1a !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important;
  border-color: #C0C0C0 !important;
}

.toolbar-wrapper .btn-secondary {
  background: var(--medium-gray) !important;
  color: var(--text-dark) !important;
  border: 1px solid var(--subtle-border) !important;
}

.toolbar-wrapper .btn-secondary:hover {
  background: var(--dusty-pink-accent) !important;
  border-color: var(--dusty-pink-dark) !important;
}

/* CSV upload area */
.csv-upload-area {
  background: var(--warm-background) !important;
  border: 2px dashed var(--dusty-pink-accent) !important;
  border-radius: 8px !important;
  padding: 40px 20px !important;
  text-align: center !important;
  margin: 20px !important;
  transition: all 0.2s ease !important;
}

.csv-upload-area:hover {
  border-color: var(--dusty-pink-dark) !important;
  background: var(--dusty-pink) !important;
}

.csv-upload-area h3 {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--text-dark) !important;
  margin: 0 0 10px 0 !important;
}

.csv-upload-area p {
  font-size: 14px !important;
  color: var(--text-secondary) !important;
  margin: 0 0 15px 0 !important;
}

.csv-upload-area .btn {
  padding: 10px 20px !important;
  background: var(--primary-black) !important;
  color: var(--white) !important;
  border: none !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
}

/* Scheduling controls */
.scheduling-controls {
  padding: 20px !important;
  border-bottom: 1px solid var(--subtle-border) !important;
  background: var(--white) !important;
}

.control-group {
  display: flex !important;
  gap: 15px !important;
  align-items: center !important;
  margin-bottom: 15px !important;
}

.control-group label {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--text-dark) !important;
  margin: 0 !important;
}

.control-group select {
  padding: 8px 12px !important;
  border: 1px solid var(--subtle-border) !important;
  border-radius: 6px !important;
  background: var(--white) !important;
  font-size: 14px !important;
  color: var(--text-dark) !important;
}

.control-group input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
}

/* Status buttons */
.status-buttons {
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
}

.status-badge {
  padding: 6px 12px !important;
  border-radius: 20px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.status-badge.active {
  background: var(--dusty-pink-dark) !important;
  color: var(--white) !important;
}

.status-badge.inactive {
  background: var(--medium-gray) !important;
  color: var(--text-secondary) !important;
}

/* Main content area */
.content-area {
  flex: 1 !important;
  padding: 20px !important;
  background: var(--white) !important;
  overflow-y: auto !important;
}

/* Remove video background */
.header-video {
  display: none !important;
}

/* Logout button styling */
#logout-btn button {
  background-color: #F5F5F7 !important;
  color: #2D2D2D !important;
  border: 1px solid #DADADA !important;
  padding: 8px 16px !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  font-family: 'Lora', serif !important;
  cursor: pointer !important;
  transition: all 0.2s ease-in-out !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02) !important;
}

#logout-btn button:hover {
  background-color: #EAEAEA !important;
  color: #1a1a1a !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important;
  border-color: #C0C0C0 !important;
}

/* ============================================================================
   LUXURIOUS ELEGANT BUTTON STYLING - "Chanel meets tech"
   ============================================================================ */

/* Elegant Button Base Style */
.elegant-btn, .dashboard-button, .contact-action-btn,
button.btn-primary, button[class*="btn-primary"],
.crm-toolbar button, .nav-btn, .action-btn,
button:not(.btn-secondary):not(.filter-pill) {
  background-color: #F5F5F7 !important;
  color: #2D2D2D !important;
  border: 1px solid #DADADA !important;
  border-radius: 10px !important;
  padding: 10px 16px !important;
  font-size: 14px !important;
  font-family: 'Lora', serif !important;
  font-weight: 500 !important;
  transition: all 0.2s ease-in-out !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02) !important;
  text-transform: none !important;
  letter-spacing: 0.2px !important;
}

/* Elegant Button Hover State */
.elegant-btn:hover, .dashboard-button:hover, .contact-action-btn:hover,
button.btn-primary:hover, button[class*="btn-primary"]:hover,
.crm-toolbar button:hover, .nav-btn:hover, .action-btn:hover,
button:not(.btn-secondary):not(.filter-pill):hover {
  background-color: #EAEAEA !important;
  color: #1a1a1a !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important;
  border-color: #C0C0C0 !important;
}

/* Luxury Accent Buttons for Primary Actions */
.button-accent, .primary-action-btn {
  background-color: #EDE4DB !important;
  color: #4A3F35 !important;
  border: 1px solid #D8CFC5 !important;
  border-radius: 10px !important;
  padding: 10px 16px !important;
  font-size: 14px !important;
  font-family: 'Lora', serif !important;
  font-weight: 500 !important;
  transition: all 0.2s ease-in-out !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02) !important;
  text-transform: none !important;
  letter-spacing: 0.2px !important;
}

.button-accent:hover, .primary-action-btn:hover {
  background-color: #DFD5CB !important;
  border-color: #C9BBAE !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important;
}

/* Force dashboard font sizes to be larger */
.dashboard-widget * {
  font-size: 16px !important;
}

.dashboard-widget h2,
.dashboard-widget h3,
.dashboard-widget .widget-header * {
  font-size: 20px !important;
}

.dashboard-widget .widget-body * {
  font-size: 16px !important;
}

/* ============================================================================
   LUXURY UI POLISH
   ============================================================================ */

/* Glass UI Effect for Dashboard Header */
.dashboard-header-content {
  backdrop-filter: blur(6px) !important;
  background: rgba(250, 249, 246, 0.85) !important;
}

/* Refined Avatar Styling */
.contact-avatar, .page-avatar {
  border-radius: 50% !important;
  border: 2px solid var(--accent-beige-light) !important;
}

/* Elegant Task Checkboxes */
.task-item input[type="checkbox"]:checked {
  background-color: var(--accent-beige) !important;
  border-color: var(--accent-beige) !important;
}

/* Subtle Hover Elevation */
.dashboard-widget:hover, .sidebar:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px var(--shadow-medium) !important;
  transition: all 0.3s ease !important;
}

/* Responsive adjustments for dashboard */
@media (max-width: 1200px) {
  .dashboard-grid {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto auto auto auto !important;
  }

  .calendar-widget {
    grid-column: 1 / 3 !important;
    grid-row: 3 !important;
  }

  .quick-actions-widget {
    grid-column: 1 / 3 !important;
    grid-row: 4 !important;
  }
}

@media (max-width: 768px) {
  .dashboard-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto auto auto auto auto !important;
    height: auto !important;
  }

  .tasks-widget, .contacts-widget, .listing-timeline-widget, .buyer-timeline-widget, .calendar-widget, .quick-actions-widget {
    grid-column: 1 !important;
  }

  .widget-header, .widget-body {
    padding: 16px !important;
  }
}

body {
  background-color: var(--warm-background) !important;
  color: var(--text-dark) !important;
  font-family: 'Inter', sans-serif !important;
  margin: 0 !important;
  padding: 0 !important;
  /* width: 100vw !important; - Commented out to prevent layout conflicts */
  overflow-x: hidden !important;
}

/* CRM Container Styling */
.crm-container,
.crm-content {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 5px 20px 10px 0; /* left 0 to remove gap between sidebar and main */
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: stretch;
  justify-content: flex-start;
  /* Allow contacts to extend down the page */
  min-height: auto;
  max-height: none;
  overflow-y: visible;
  overflow-x: hidden;
  box-sizing: border-box;
}

.nav-bar {
  /* width: 100vw !important; - Commented out to prevent layout conflicts */
  margin: 0 !important;
  padding: 0 20px !important;
}

.crm-toolbar {
  width: 100% !important;
  margin: 0 !important;
  padding: 16px 20px !important;
}

.toolbar-left, .toolbar-right {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

/* Mobile App Style Button System */
.elegant-btn, button {
  background: #F3F4F6 !important;
  color: var(--text-dark) !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 8px !important;
  padding: 10px 16px !important;
  font-family: 'Lora', serif !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03) !important;
  transition: all 0.2s ease-in-out !important;
  cursor: pointer !important;
  position: relative !important;
}

.elegant-btn:hover, button:hover {
  background: #E5E7EB !important;
  border-color: #D1D5DB !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06) !important;
  transform: translateY(-1px) !important;
}

/* Navigation Bar Buttons - Mobile App Style */
.nav-btn {
  background: #F3F4F6 !important;
  color: var(--text-dark) !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 8px !important;
  padding: 10px 16px !important;
  font-family: 'Lora', serif !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03) !important;
  transition: all 0.2s ease-in-out !important;
  cursor: pointer !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.nav-btn:hover {
  background: #E5E7EB !important;
  border-color: #D1D5DB !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06) !important;
  transform: translateY(-1px) !important;
}

.nav-btn.active {
  background: var(--primary-black) !important;
  color: var(--white) !important;
  border-color: var(--primary-black) !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06) !important;
}

/* Toolbar Buttons - Mobile App Style */
.action-btn {
  background: #F3F4F6 !important;
  color: var(--text-dark) !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 8px !important;
  padding: 8px 14px !important;
  font-family: 'Lora', serif !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03) !important;
  transition: all 0.2s ease-in-out !important;
  cursor: pointer !important;
  position: relative !important;
}

.action-btn:hover {
  background: #E5E7EB !important;
  border-color: #D1D5DB !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06) !important;
  transform: translateY(-1px) !important;
}

.action-btn.active {
  background: var(--primary-black) !important;
  color: var(--white) !important;
  border-color: var(--primary-black) !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06) !important;
}

.filter-btn {
  background: #F3F4F6 !important;
  color: var(--text-dark) !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 8px !important;
  padding: 8px 14px !important;
  font-family: 'Lora', serif !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03) !important;
  transition: all 0.2s ease-in-out !important;
  cursor: pointer !important;
  position: relative !important;
}

.filter-btn:hover {
  background: #E5E7EB !important;
  border-color: #D1D5DB !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06) !important;
  transform: translateY(-1px) !important;
}

.add-contact-btn {
  background: #F3F4F6 !important;
  color: var(--text-dark) !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 8px !important;
  padding: 8px 14px !important;
  font-family: 'Lora', serif !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03) !important;
  transition: all 0.2s ease-in-out !important;
  cursor: pointer !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.add-contact-btn:hover {
  background: #E5E7EB !important;
  border-color: #D1D5DB !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06) !important;
  transform: translateY(-1px) !important;
}

.search-box {
  background: #FFFFFF !important;
  color: var(--text-dark) !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  font-family: 'Lora', serif !important;
  font-weight: 500 !important;
  font-size: 16px !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03) !important;
  transition: all 0.2s ease-in-out !important;
}

.search-box:focus {
  outline: none !important;
  border-color: #D1D5DB !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06) !important;
}

/* Dusty Pink Accent Buttons */
.btn-accent, button.accent {
  background: var(--dusty-pink-dark) !important;
  color: var(--text-dark) !important;
  border: 1px solid var(--dusty-pink-dark) !important;
}

.btn-accent:hover, button.accent:hover {
  background: var(--dusty-pink-accent) !important;
  border-color: var(--dusty-pink-accent) !important;
}

/* Dashboard Clean Modern Override */
.dashboard-container {
  background-color: var(--light-gray) !important;
  font-family: 'Inter', sans-serif !important;
  min-height: 100vh !important;
}

.dashboard-header {
  background: linear-gradient(135deg, var(--primary-black) 0%, var(--secondary-black) 100%) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  position: relative !important;
  width: 100% !important;
  height: 80px !important;
  overflow: hidden !important;
  z-index: 0 !important;
}

.dashboard-header video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  opacity: 0.2 !important;
}

.dashboard-header-content {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 0 32px !important;
  background: rgba(26, 26, 26, 0.85) !important;
  color: var(--white) !important;
}

.dashboard-title {
  color: var(--white) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  font-size: 24px !important;
  letter-spacing: -0.025em !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}

.dashboard-subtitle {
  color: rgba(255, 255, 255, 0.8) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  margin-top: 4px !important;
}

.dashboard-nav {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
}

/* Clean Modern Metrics Cards */
.metric-card {
  background: var(--white) !important;
  border: 1px solid var(--medium-gray) !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  padding: 24px !important;
  transition: all 0.3s ease-in-out !important;
}

.metric-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1) !important;
  border-color: var(--dusty-pink-accent) !important;
}

.metric-title {
  color: var(--text-light) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  margin-bottom: 8px !important;
}

.metric-value {
  color: var(--text-dark) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 32px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

/* Clean Modern Dashboard Sections */
.dashboard-section {
  background: var(--white) !important;
  border: 1px solid var(--medium-gray) !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  padding: 24px !important;
  margin-bottom: 24px !important;
}

.dashboard-section h2 {
  color: var(--text-dark) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  border-bottom: 1px solid var(--dusty-pink) !important;
  padding-bottom: 12px !important;
  margin-bottom: 20px !important;
  letter-spacing: -0.025em !important;
}

/* Professional Content Area */
.dashboard-content {
  padding: 32px !important;
  max-width: 1400px !important;
  margin: 0 auto !important;
}

/* Clean Modern Quick Actions */
.quick-action-card {
  background: var(--dusty-pink) !important;
  border: 1px solid var(--dusty-pink-accent) !important;
  border-radius: 8px !important;
  padding: 20px !important;
  transition: all 0.2s ease-in-out !important;
  cursor: pointer !important;
}

.quick-action-card:hover {
  background: var(--dusty-pink-accent) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  border-color: var(--dusty-pink-dark) !important;
}

.quick-action-title {
  font-family: 'Inter', sans-serif !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  color: #0F172A !important;
  margin-bottom: 8px !important;
}

.quick-action-description {
  font-family: 'Inter', sans-serif !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  color: #64748B !important;
  line-height: 1.5 !important;
}

/* Professional Activity Items */
.activity-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 12px 0 !important;
  border-bottom: 1px solid #F1F5F9 !important;
}

.activity-indicator {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  margin-top: 6px !important;
  flex-shrink: 0 !important;
}

.activity-text {
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  color: #0F172A !important;
  margin-bottom: 4px !important;
}

.activity-time {
  font-family: 'Inter', sans-serif !important;
  font-weight: 400 !important;
  font-size: 12px !important;
  color: #64748B !important;
}

/* Professional Grid Layout */
.grid {
  display: grid !important;
}

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}

.sm\\:grid-cols-2 {
  grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}

@media (min-width: 640px) {
  .sm\\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

.lg\\:grid-cols-3 {
  grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}

@media (min-width: 1024px) {
  .lg\\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

.xl\\:grid-cols-4 {
  grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}

@media (min-width: 1280px) {
  .xl\\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

.gap-6 {
  gap: 24px !important;
}

.gap-8 {
  gap: 32px !important;
}

/* CRM Page Specific Styling */
.crm-container, #app {
  background-color: var(--light-gray) !important;
  font-family: 'Inter', sans-serif !important;
  color: var(--text-dark) !important;
}

/* Remove all container styling - let contacts flow naturally */
.luxury-contacts-container {
  display: block !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: inherit !important;
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  overflow: visible !important;
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
}

.luxury-contacts-container .top-buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-bottom: 32px !important;
}

.luxury-contacts-container .primary-btn {
  font-family: 'Lora', serif !important;
  font-size: 14px !important;
  padding: 10px 16px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  background-color: #F3F4F6 !important;
  color: var(--text-dark) !important;
  border: 1px solid #E5E7EB !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03) !important;
  position: relative !important;
}

.luxury-contacts-container .primary-btn:hover {
  background-color: #E5E7EB !important;
  border-color: #D1D5DB !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06) !important;
}

.luxury-contacts-container .secondary-btn {
  font-family: 'Lora', serif !important;
  font-size: 14px !important;
  padding: 10px 16px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  background-color: #F3F4F6 !important;
  border: 1px solid #E5E7EB !important;
  color: var(--text-dark) !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03) !important;
}

.luxury-contacts-container .secondary-btn:hover {
  background-color: #E5E7EB !important;
  border-color: #D1D5DB !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06) !important;
}

.luxury-contacts-container .filters {
  display: flex !important;
  gap: 10px !important;
  margin-bottom: 24px !important;
}

.luxury-contacts-container .filter-pill {
  padding: 8px 16px !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 20px !important;
  background: #F3F4F6 !important;
  font-size: 14px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  font-family: 'Lora', serif !important;
  color: var(--text-dark) !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03) !important;
}

.luxury-contacts-container .filter-pill:hover {
  background-color: #E5E7EB !important;
  border-color: #D1D5DB !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06) !important;
}

.luxury-contacts-container .filter-pill.active {
  background-color: var(--primary-black) !important;
  color: var(--white) !important;
  border-color: var(--primary-black) !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06) !important;
}

.luxury-contacts-container .search-bar {
  margin-top: 8px !important;
  position: relative !important;
  margin-bottom: 24px !important;
}

.luxury-contacts-container .search-bar input {
  width: 100% !important;
  padding: 10px 16px 10px 40px !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 12px !important;
  background-color: #FFFFFF !important;
  font-size: 14px !important;
  font-family: 'Lora', serif !important;
  color: var(--text-dark) !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03) !important;
}

.luxury-contacts-container .search-bar input:focus {
  outline: none !important;
  border-color: #D1D5DB !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06) !important;
}

.luxury-contacts-container .search-bar .search-icon {
  position: absolute !important;
  top: 50% !important;
  left: 12px !important;
  transform: translateY(-50%) !important;
  font-size: 16px !important;
  color: var(--dark-gray) !important;
}

.luxury-contacts-container .main-panel {
  display: block !important;
  gap: 0 !important;
  margin-top: 0 !important;
}

.luxury-contacts-container .contacts-table {
  background-color: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: none !important;
  min-height: auto !important;
  animation: none !important;
  max-height: none !important;
  overflow: visible !important;
}

.luxury-contacts-container .quick-stats {
  background-color: var(--card-background) !important;
  padding: 32px !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 12px var(--shadow-subtle) !important;
  border: 1px solid var(--subtle-border) !important;
  height: fit-content !important;
  animation: fadeInUp 0.6s ease !important;
  position: sticky !important;
  top: 40px !important;
}

.luxury-contacts-container .stat {
  margin-bottom: 24px !important;
}

.luxury-contacts-container .stat:last-child {
  margin-bottom: 0 !important;
}

.luxury-contacts-container .stat-title {
  font-size: 13px !important;
  color: var(--dark-gray) !important;
  margin-bottom: 4px !important;
  font-family: 'Lora', serif !important;
  font-weight: 500 !important;
}

.luxury-contacts-container .stat-value {
  font-size: 24px !important;
  font-weight: 600 !important;
  color: var(--text-dark) !important;
  font-family: 'Lora', serif !important;
}

.luxury-contacts-container .stat-activity {
  color: var(--dark-gray) !important;
  font-size: 14px !important;
  font-family: 'Lora', serif !important;
}

.luxury-contacts-container .empty-state {
  text-align: center !important;
  padding: 48px 0 !important;
  color: var(--dark-gray) !important;
}

.luxury-contacts-container .empty-state h2 {
  font-size: 20px !important;
  font-weight: 500 !important;
  margin-bottom: 12px !important;
  color: var(--text-dark) !important;
  font-family: 'Lora', serif !important;
}

.luxury-contacts-container .empty-state p {
  font-size: 14px !important;
  margin-bottom: 16px !important;
  color: var(--text-light) !important;
  font-family: 'Lora', serif !important;
}

.luxury-contacts-container .empty-state button {
  margin-top: 16px !important;
}

/* Sophisticated Animations */
@keyframes fadeInUp {
  0% { 
    opacity: 0; 
    transform: translateY(20px); 
  }
  100% { 
    opacity: 1; 
    transform: translateY(0); 
  }
}

@keyframes slideInRight {
  0% { 
    opacity: 0; 
    transform: translateX(20px); 
  }
  100% { 
    opacity: 1; 
    transform: translateX(0); 
  }
}

/* Remove hover effects that create container behavior */
.luxury-contacts-container .contacts-table:hover {
  box-shadow: none !important;
  transform: none !important;
  transition: none !important;
}

.luxury-contacts-container .quick-stats:hover {
  box-shadow: 0 8px 25px var(--shadow-medium) !important;
  transform: translateY(-2px) !important;
  transition: all 0.3s ease !important;
}

.luxury-contacts-container .filter-pill {
  transition: all 0.2s ease !important;
  position: relative !important;
  overflow: hidden !important;
}

.luxury-contacts-container .filter-pill::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent) !important;
  transition: left 0.5s !important;
}

.luxury-contacts-container .filter-pill:hover::before {
  left: 100% !important;
}

/* Email Builder Layout - ONLY for email tab when active */
#emailTab.email-tab-content.with-sidebar.active {
  position: relative !important;
  padding: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  width: 100% !important;
  min-height: 600px !important;
  left: 0 !important;
}

/* Ensure no left spacing on email tab content */
#emailTab.email-tab-content {
  padding-left: 0 !important;
  margin-left: 0 !important;
  left: 0 !important;
}

/* User Mappings Widget Styling */
.user-mappings-widget {
  background: var(--card-background) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 12px var(--shadow-subtle) !important;
  border: 1px solid var(--subtle-border) !important;
  padding: 20px !important;
  margin: 20px 0 !important;
  font-family: 'Lora', 'Inter', sans-serif !important;
}

.mappings-widget h3 {
  color: var(--primary-black) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  margin: 0 0 16px 0 !important;
  padding-bottom: 8px !important;
  border-bottom: 2px solid var(--accent-beige) !important;
}

.mapping-section {
  margin-bottom: 16px !important;
}

.mapping-section h4 {
  color: var(--text-dark) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  margin: 0 0 8px 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.mapping-section ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.mapping-section li {
  background: var(--warm-background) !important;
  padding: 8px 12px !important;
  margin: 4px 0 !important;
  border-radius: 6px !important;
  border-left: 3px solid var(--accent-beige) !important;
  font-size: 13px !important;
  color: var(--text-secondary) !important;
}

.mapping-section li strong {
  color: var(--primary-black) !important;
  font-weight: 500 !important;
}

/* Removed conflicting absolute positioning rule - now using grid layout */

#emailTab.active .email-sidebar,
#emailTab.email-tab-content.with-sidebar.active .email-sidebar {
  position: absolute !important;
  top: 0px !important;
  left: 0px !important;
  width: 320px !important;
  bottom: 0px !important;
  background: var(--card-background) !important;
  border-radius: 0px !important;
  box-shadow: none !important;
  border: none !important;
  overflow: hidden !important;
  padding: 20px !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Ensure sidebar content is visible and contained */
#emailTab .email-sidebar *,
.email-tab-content.with-sidebar .email-sidebar * {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Sidebar styling - debug colors removed */

#emailTab .sidebar-tab-content {
  display: none !important;
}

#emailTab .sidebar-tab-content.active {
  display: block !important;
}


.sidebar-tab-content {
  display: none !important;
  padding: 20px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  position: relative !important;
}

.sidebar-tab-content.active {
  display: block !important;
}

.sidebar-section {
  margin-bottom: 24px !important;
}

.sidebar-section:last-child {
  margin-bottom: 0 !important;
}


/* Compact Contact List */
.contact-list-compact {
  max-height: 400px !important;
  overflow-y: auto !important;
}

.contact-item-compact {
  display: flex !important;
  align-items: center !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  margin-bottom: 4px !important;
}

.contact-item-compact:hover {
  background: var(--warm-background) !important;
}

.contact-avatar {
  width: 60px !important;
  height: 60px !important;
  border-radius: 50% !important;
  background: var(--dusty-pink) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--text-dark) !important;
  margin-right: 12px !important;
  font-family: 'Inter', sans-serif !important;
}

/* Dashboard Contact Avatars - More Specific */
.contacts-widget .contact-avatar,
.contact-item-compact .contact-avatar {
  width: 60px !important;
  height: 60px !important;
  font-size: 18px !important;
  margin-right: 12px !important;
}

.contact-info-compact {
  flex: 1 !important;
}

.contact-name-compact {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--text-dark) !important;
  margin-bottom: 2px !important;
  font-family: 'Inter', sans-serif !important;
}

.contact-email-compact {
  font-size: 12px !important;
  color: var(--text-secondary) !important;
  font-family: 'Inter', sans-serif !important;
}

/* Group List */
.group-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.group-item {
  display: flex !important;
  align-items: center !important;
  padding: 12px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  border: 1px solid var(--subtle-border) !important;
}

.group-item:hover {
  background: var(--warm-background) !important;
  border-color: var(--dusty-pink-accent) !important;
}

.group-icon {
  font-size: 20px !important;
  margin-right: 12px !important;
}

.group-info {
  flex: 1 !important;
}

.group-name {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--text-dark) !important;
  margin-bottom: 2px !important;
  font-family: 'Inter', sans-serif !important;
}

.group-count {
  font-size: 12px !important;
  color: var(--text-secondary) !important;
  font-family: 'Inter', sans-serif !important;
}

/* Email List */
.email-list {
  max-height: 300px !important;
  overflow-y: auto !important;
}

.email-item {
  padding: 12px !important;
  border-radius: 8px !important;
  margin-bottom: 8px !important;
  border: 1px solid var(--subtle-border) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.email-item:hover {
  background: var(--warm-background) !important;
  border-color: var(--dusty-pink-accent) !important;
}

.email-sender {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--text-dark) !important;
  margin-bottom: 4px !important;
  font-family: 'Inter', sans-serif !important;
}

.email-subject {
  font-size: 13px !important;
  color: var(--text-secondary) !important;
  margin-bottom: 4px !important;
  font-family: 'Inter', sans-serif !important;
}

.email-time {
  font-size: 11px !important;
  color: var(--text-light) !important;
  font-family: 'Inter', sans-serif !important;
}

/* Email Stats */
.email-stats {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.stat-item {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 8px 12px !important;
  background: var(--warm-background) !important;
  border-radius: 8px !important;
}

.stat-label {
  font-size: 13px !important;
  color: var(--text-secondary) !important;
  font-family: 'Inter', sans-serif !important;
}

.stat-value {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--text-dark) !important;
  font-family: 'Inter', sans-serif !important;
}

/* Account Settings Page Styling */
.settings-header {
  background: linear-gradient(135deg, var(--primary-black) 0%, var(--secondary-black) 100%) !important;
  color: var(--white) !important;
  padding: 32px 0 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.settings-header .header-content {
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: 0 48px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.settings-header .header-left h1 {
  color: var(--white) !important;
  font-family: 'Lora', serif !important;
  font-weight: 700 !important;
  font-size: 28px !important;
  letter-spacing: -0.025em !important;
  margin: 0 0 8px 0 !important;
}

.settings-header .header-left p {
  color: rgba(255, 255, 255, 0.8) !important;
  font-family: 'Lora', serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  margin: 0 !important;
}

.settings-header .header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
}

.settings-container {
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: 40px 48px !important;
  min-height: auto !important;
  font-family: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  background-color: var(--light-gray) !important;
}

.settings-section {
  background: var(--white) !important;
  border-radius: 12px !important;
  padding: 32px !important;
  margin-bottom: 32px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  border: 1px solid var(--medium-gray) !important;
}

.settings-section h2 {
  margin-top: 0 !important;
  color: var(--text-dark) !important;
  border-bottom: 2px solid var(--dusty-pink) !important;
  padding-bottom: 16px !important;
  margin-bottom: 24px !important;
  font-family: 'Lora', serif !important;
  font-weight: 600 !important;
  font-size: 20px !important;
}

.form-group {
  margin-bottom: 24px !important;
}

.form-group label {
  display: block !important;
  margin-bottom: 8px !important;
  font-weight: 500 !important;
  color: var(--text-dark) !important;
  font-family: 'Lora', serif !important;
  font-size: 14px !important;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100% !important;
  padding: 12px 16px !important;
  border: 1px solid var(--medium-gray) !important;
  border-radius: 8px !important;
  background-color: var(--white) !important;
  font-size: 14px !important;
  font-family: 'Lora', serif !important;
  color: var(--text-dark) !important;
  transition: border-color 0.2s ease !important;
  box-sizing: border-box !important;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none !important;
  border-color: var(--dusty-pink-dark) !important;
  box-shadow: 0 0 0 3px rgba(212, 184, 188, 0.1) !important;
}

.btn, button {
  font-family: 'Lora', serif !important;
  font-size: 14px !important;
  padding: 10px 18px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  font-weight: 500 !important;
  border: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  box-shadow: 0 2px 4px var(--shadow-subtle) !important;
}

.btn-primary, .btn-save, .btn-generate, .btn-build, .btn-connect, .btn-test, .btn-sync, .btn-send {
  background-color: #F5F5F7 !important;
  color: #2D2D2D !important;
  border: 1px solid #DADADA !important;
  border-radius: 10px !important;
  font-weight: 500 !important;
  font-family: 'Lora', serif !important;
  transition: all 0.2s ease-in-out !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02) !important;
}

.btn-primary:hover, .btn-save:hover, .btn-generate:hover, .btn-build:hover, .btn-connect:hover, .btn-test:hover, .btn-sync:hover, .btn-send:hover {
  background-color: #EAEAEA !important;
  color: #1a1a1a !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important;
  border-color: #C0C0C0 !important;
}

.btn-secondary, .btn-refresh, .btn-preview, .btn-copy, .btn-disconnect, .btn-reset, .btn-clear {
  background-color: #F3F4F6 !important;
  border: 1px solid #E5E7EB !important;
  color: var(--text-dark) !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03) !important;
}

.btn-secondary:hover, .btn-refresh:hover, .btn-preview:hover, .btn-copy:hover, .btn-disconnect:hover, .btn-reset:hover, .btn-clear:hover {
  background-color: #E5E7EB !important;
  border-color: #D1D5DB !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06) !important;
}

.btn-danger {
  background-color: #dc3545 !important;
  color: var(--white) !important;
}

.btn-danger:hover {
  background-color: #c82333 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 8px rgba(220, 53, 69, 0.3) !important;
}

.btn-accent {
  background-color: var(--dusty-pink-dark) !important;
  color: var(--text-dark) !important;
  border: 1px solid var(--dusty-pink-dark) !important;
}

.btn-accent:hover {
  background-color: var(--dusty-pink-accent) !important;
  border-color: var(--dusty-pink-accent) !important;
}

.button-group {
  display: flex !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  margin-top: 16px !important;
}

.status-indicator {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 12px !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  font-family: 'Lora', serif !important;
}

.status-success {
  background-color: rgba(40, 167, 69, 0.1) !important;
  color: #28a745 !important;
  border: 1px solid rgba(40, 167, 69, 0.2) !important;
}

.status-warning {
  background-color: rgba(255, 193, 7, 0.1) !important;
  color: #ffc107 !important;
  border: 1px solid rgba(255, 193, 7, 0.2) !important;
}

.status-error {
  background-color: rgba(220, 53, 69, 0.1) !important;
  color: #dc3545 !important;
  border: 1px solid rgba(220, 53, 69, 0.2) !important;
}

.status-info {
  background-color: rgba(23, 162, 184, 0.1) !important;
  color: #17a2b8 !important;
  border: 1px solid rgba(23, 162, 184, 0.2) !important;
}

.config-preview {
  background-color: var(--dusty-pink) !important;
  border: 1px solid var(--dusty-pink-accent) !important;
  border-radius: 8px !important;
  padding: 20px !important;
  margin-top: 16px !important;
}

.config-preview h4 {
  color: var(--text-dark) !important;
  font-family: 'Lora', serif !important;
  font-weight: 600 !important;
  margin-bottom: 12px !important;
}

.config-preview .preview-item {
  margin-bottom: 8px !important;
  font-size: 13px !important;
  color: var(--text-light) !important;
  font-family: 'Lora', serif !important;
}

.qr-code-container {
  text-align: center !important;
  padding: 20px !important;
  background-color: var(--white) !important;
  border: 1px solid var(--medium-gray) !important;
  border-radius: 8px !important;
  margin-top: 16px !important;
}

.danger-zone {
  border: 2px solid #dc3545 !important;
  border-radius: 12px !important;
  padding: 24px !important;
  background-color: rgba(220, 53, 69, 0.02) !important;
}

.danger-zone h3 {
  color: #dc3545 !important;
  font-family: 'Lora', serif !important;
  font-weight: 600 !important;
  margin-bottom: 16px !important;
}

.upload-area {
  border: 2px dashed var(--dusty-pink-accent) !important;
  border-radius: 8px !important;
  padding: 24px !important;
  text-align: center !important;
  background-color: var(--dusty-pink) !important;
  transition: all 0.2s ease !important;
}

.upload-area:hover {
  border-color: var(--dusty-pink-dark) !important;
  background-color: var(--dusty-pink-accent) !important;
}

.upload-area.dragover {
  border-color: var(--dusty-pink-dark) !important;
  background-color: var(--dusty-pink-accent) !important;
}

.upload-area p {
  color: var(--text-light) !important;
  font-family: 'Lora', serif !important;
  font-size: 14px !important;
  margin: 0 !important;
}

.file-preview {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-top: 12px !important;
  padding: 12px !important;
  background-color: var(--white) !important;
  border: 1px solid var(--medium-gray) !important;
  border-radius: 6px !important;
}

.file-preview img {
  width: 40px !important;
  height: 40px !important;
  object-fit: cover !important;
  border-radius: 4px !important;
}

.file-info {
  flex: 1 !important;
}

.file-name {
  font-family: 'Lora', serif !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  color: var(--text-dark) !important;
}

.file-size {
  font-family: 'Lora', serif !important;
  font-size: 12px !important;
  color: var(--text-light) !important;
}

.crm-header, .header {
  background: linear-gradient(135deg, var(--primary-black) 0%, var(--secondary-black) 100%) !important;
  color: var(--white) !important;
  padding: 20px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.crm-nav, .nav-tabs {
  background-color: var(--white) !important;
  border-bottom: 1px solid var(--medium-gray) !important;
  padding: 0 !important;
}

.crm-nav-item, .nav-tab {
  color: var(--text-light) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  padding: 16px 20px !important;
  border-bottom: 2px solid transparent !important;
  transition: all 0.2s ease-in-out !important;
}

.crm-nav-item:hover, .nav-tab:hover,
.crm-nav-item.active, .nav-tab.active {
  color: var(--text-dark) !important;
  border-bottom-color: var(--dusty-pink-dark) !important;
  background-color: var(--dusty-pink) !important;
}

.crm-section, .section {
  background: var(--white) !important;
  border: 1px solid var(--medium-gray) !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  padding: 24px !important;
  margin-bottom: 24px !important;
}

.crm-card, .card {
  background: var(--white) !important;
  border: 1px solid var(--medium-gray) !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04) !important;
  padding: 16px !important;
  transition: all 0.2s ease-in-out !important;
}

.crm-card:hover, .card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  border-color: var(--dusty-pink-accent) !important;
}

.crm-button, .btn {
  background: #F3F4F6 !important;
  color: var(--text-dark) !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 8px !important;
  padding: 10px 16px !important;
  font-family: 'Lora', serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03) !important;
  transition: all 0.2s ease-in-out !important;
  cursor: pointer !important;
}

.crm-button:hover, .btn:hover {
  background: #E5E7EB !important;
  border-color: #D1D5DB !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06) !important;
  transform: translateY(-1px) !important;
}

.crm-button.accent, .btn.accent {
  background: var(--dusty-pink-dark) !important;
  color: var(--text-dark) !important;
  border: 1px solid var(--dusty-pink-dark) !important;
}

.crm-button.accent:hover, .btn.accent:hover {
  background: var(--dusty-pink-accent) !important;
  border-color: var(--dusty-pink-accent) !important;
}

.crm-input, .form-input, input {
  background: var(--white) !important;
  border: 1px solid var(--medium-gray) !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  color: var(--text-dark) !important;
  transition: border-color 0.2s ease-in-out !important;
}

.crm-input:focus, .form-input:focus, input:focus {
  outline: none !important;
  border-color: var(--dusty-pink-dark) !important;
  box-shadow: 0 0 0 3px rgba(212, 184, 188, 0.1) !important;
}

/* Web-only modal styles - prevent conflicts with React Native modals */
/* These styles only apply to web elements, not React Native components */
body .crm-modal, body .modal {
  background: rgba(0, 0, 0, 0.6) !important;
}

body .crm-modal-content, body .modal-content {
  background: var(--white) !important;
  border: 1px solid var(--medium-gray) !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2) !important;
}

body .crm-modal-header, body .modal-header {
  background: var(--dusty-pink) !important;
  border-bottom: 1px solid var(--dusty-pink-accent) !important;
  padding: 20px !important;
  border-radius: 12px 12px 0 0 !important;
}

body .crm-modal-body, body .modal-body {
  padding: 24px !important;
}

body .crm-modal-footer, body .modal-footer {
  background: var(--light-gray) !important;
  border-top: 1px solid var(--medium-gray) !important;
  padding: 16px 24px !important;
  border-radius: 0 0 12px 12px !important;
}

.crm-table, table {
  background: var(--white) !important;
  border: 1px solid var(--medium-gray) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}

.crm-table th, table th {
  background: var(--dusty-pink) !important;
  color: var(--text-dark) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  padding: 16px !important;
  border-bottom: 1px solid var(--dusty-pink-accent) !important;
}

.crm-table td, table td {
  padding: 16px !important;
  border-bottom: 1px solid var(--light-gray) !important;
  color: var(--text-dark) !important;
  font-family: 'Inter', sans-serif !important;
}

.crm-table tr:hover, table tr:hover {
  background: var(--dusty-pink) !important;
}

/* Professional Responsive Design */
@media (max-width: 768px) {
  .dashboard-content {
    padding: 16px !important;
  }
  
  .dashboard-header-content {
    padding: 0 16px !important;
    flex-direction: column !important;
    gap: 8px !important;
    text-align: center !important;
  }
  
  .dashboard-nav {
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
  
  .metric-card {
    padding: 16px !important;
  }
  
  .metric-value {
    font-size: 24px !important;
  }
  
  .crm-modal-content, .modal-content {
    margin: 16px !important;
    max-width: calc(100% - 32px) !important;
  }
  
  .crm-nav-item, .nav-tab {
    padding: 12px 16px !important;
    font-size: 14px !important;
  }
  
  .settings-container {
    padding: 20px 24px !important;
    max-width: 100% !important;
  }
  
  .settings-header .header-content {
    padding: 0 24px !important;
    max-width: 100% !important;
  }
}

/* ========================================
   LUXURY CRM CONTACT DETAILS MODAL STYLES
   ======================================== */

/* Modal Container - Match Dashboard Style */
.luxury-crm-modal {
  max-width: 98vw !important;
  width: 98vw !important;
  max-height: 90vh !important;
  margin: 5vh auto !important;
  background: var(--card-background, #ffffff) !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 12px var(--shadow-subtle, rgba(0, 0, 0, 0.08)) !important;
  border: 1px solid var(--subtle-border, #e5e7eb) !important;
  overflow: hidden !important;
}

.luxury-crm-body {
  padding: 24px 32px !important;
  max-height: none !important;
  overflow-y: visible !important;
  overflow-x: hidden !important;
  background: #ffffff !important;
  box-sizing: border-box !important;
}

/* Modal Header - Match Dashboard Widget Headers */
.modal-header {
  background: #ffffff !important;
  border-bottom: 1px solid var(--subtle-border, #e5e7eb) !important;
  padding: 24px 32px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.modal-header h3 {
  font-family: 'Lora', serif !important;
  font-weight: 600 !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  margin: 0 !important;
}

.header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.edit-mode-btn {
  background: #ffffff !important;
  border: 2px solid #e2e8f0 !important;
  color: #64748b !important;
  padding: 8px 16px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.edit-mode-btn:hover {
  border-color: #3b82f6 !important;
  color: #3b82f6 !important;
  background: #f0f9ff !important;
}

.edit-mode-btn.active {
  background: #3b82f6 !important;
  border-color: #3b82f6 !important;
  color: #ffffff !important;
}

.save-btn {
  background: #10b981 !important;
  color: #ffffff !important;
  border: none !important;
  padding: 10px 20px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.save-btn:hover {
  background: #059669 !important;
  transform: translateY(-1px) !important;
}

/* Contact Card Header */
.contact-card-header {
  background: #ffffff !important;
  padding: 32px !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 24px !important;
  border-bottom: 1px solid #f0f0f0 !important;
}

.contact-avatar {
  width: 88px !important;
  height: 88px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  border: 3px solid #ffffff !important;
  position: relative !important;
}

.edit-info-btn {
  position: absolute !important;
  bottom: -5px !important;
  right: -5px !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: 2px solid #f4e4e6 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.edit-info-btn:hover {
  background: #f4e4e6 !important;
  border-color: #d4b8bc !important;
  transform: scale(1.1) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.edit-icon {
  width: 12px !important;
  height: 12px !important;
  color: #8b5a5f !important;
  transition: all 0.3s ease !important;
}

.edit-info-btn:hover .edit-icon {
  color: #6b4c52 !important;
  transform: scale(1.1) !important;
}

.avatar-text {
  color: #6b7280 !important;
  font-size: 32px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  font-family: 'Lora', serif !important;
}

.contact-summary {
  flex: 1 !important;
  min-width: 0 !important;
}

.contact-info-editable {
  flex: 1 !important;
  padding: 12px !important;
  background: #f8f9fa !important;
  border-radius: 8px !important;
  border: 1px solid #e9ecef !important;
  max-width: 50% !important;
}

.info-row {
  display: flex !important;
  gap: 8px !important;
  margin-bottom: 8px !important;
}

.info-row:last-child {
  margin-bottom: 0 !important;
}

.info-field {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 1 !important;
}

.info-field .field-icon {
  width: 14px !important;
  height: 14px !important;
  color: #6b7280 !important;
  flex-shrink: 0 !important;
}

.info-input {
  flex: 1 !important;
  padding: 6px 8px !important;
  border: 1px solid #d1d5db !important;
  border-radius: 4px !important;
  font-size: 13px !important;
  background: #ffffff !important;
  transition: all 0.2s ease !important;
  min-width: 0 !important;
}

.info-input:focus {
  outline: none !important;
  border-color: #f4e4e6 !important;
  box-shadow: 0 0 0 2px rgba(244, 228, 230, 0.1) !important;
}

.info-input:disabled {
  background: #f8f9fa !important;
  cursor: not-allowed !important;
  color: #6b7280 !important;
}

.birthday-field {
  flex: 0 0 auto !important;
  max-width: 200px !important;
}

.birthday-input {
  max-width: 150px !important;
}

.birthday-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 1 !important;
}

.add-tag-btn {
  width: 24px !important;
  height: 24px !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  flex-shrink: 0 !important;
}

.add-tag-btn:hover {
  background: transparent !important;
  transform: scale(1.1) !important;
}

.action-icon {
  width: 12px !important;
  height: 12px !important;
  color: #374151 !important;
}

.contact-tags-inline {
  display: flex !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}

.contact-tags-inline .tag {
  font-size: 11px !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
}

.action-icon-large {
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 64px !important;
  height: 64px !important;
  background: none !important;
  border: none !important;
  position: relative !important;
}

.action-icon-large:hover {
  transform: scale(1.1) !important;
}

.action-icon-large:active {
  transform: scale(0.95) !important;
}

.action-icon-large .action-icon {
  width: 64px !important;
  height: 64px !important;
  color: #1f2937 !important;
  transition: all 0.3s ease !important;
  stroke-width: 2 !important;
}

.action-icon-large:hover .action-icon {
  color: #000000 !important;
}

.modal-footer {
  margin-top: 24px !important;
  padding: 16px 0 !important;
  border-top: 1px solid #e5e7eb !important;
  text-align: center !important;
}

.created-date-info {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  color: #6b7280 !important;
  font-size: 14px !important;
}

.created-icon {
  width: 16px !important;
  height: 16px !important;
  color: #9ca3af !important;
}

.contact-name {
  font-size: 32px !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  margin: 0 0 16px 0 !important;
  line-height: 1.2 !important;
}

.contact-meta {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-bottom: 16px !important;
}

.meta-item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: #64748b !important;
  font-size: 14px !important;
}

.meta-icon {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
}

.contact-tags {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.tag {
  padding: 4px 12px !important;
  border-radius: 20px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.tag-type {
  background: #dbeafe !important;
  color: #1e40af !important;
}

.tag-urgency {
  background: #dcfce7 !important;
  color: #166534 !important;
}

.tag-source {
  background: #fef3c7 !important;
  color: #92400e !important;
}

.contact-actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  flex-shrink: 0 !important;
}

.action-btn {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 12px 20px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  border: none !important;
  min-width: 120px !important;
  justify-content: center !important;
}

.action-btn.primary {
  background: #3b82f6 !important;
  color: #ffffff !important;
}

.action-btn.primary:hover {
  background: #2563eb !important;
  transform: translateY(-1px) !important;
}

.action-btn.secondary {
  background: #ffffff !important;
  color: #64748b !important;
  border: 2px solid #e2e8f0 !important;
}

.action-btn.secondary:hover {
  border-color: #3b82f6 !important;
  color: #3b82f6 !important;
  background: #f0f9ff !important;
}

.btn-icon {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
}

/* Main Content Grid */
.crm-content-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 24px !important;
  padding: 12px !important;
}

.left-column,
.right-column {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
}

/* CRM Cards */
.crm-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
  transition: all 0.2s ease !important;
  position: relative !important;
  overflow: hidden !important;
}

.crm-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  transform: translateY(-1px) !important;
}

.crm-card.sortable-card {
  cursor: move !important;
}

.crm-card.dragging {
  opacity: 0.5 !important;
  transform: rotate(5deg) !important;
}

.card-header {
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
  padding: 16px 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.drag-handle {
  cursor: grab !important;
  color: #94a3b8 !important;
  transition: color 0.2s ease !important;
}

.drag-handle:hover {
  color: #64748b !important;
}

.drag-handle svg {
  width: 16px !important;
  height: 16px !important;
}

.card-header h4 {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.section-icon {
  width: 18px !important;
  height: 18px !important;
  color: #3b82f6 !important;
}

.card-body {
  padding: 20px !important;
}

/* Form Elements */
.form-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
}

.form-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.form-label {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #374151 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.field-icon {
  width: 14px !important;
  height: 14px !important;
  color: #6b7280 !important;
}

.form-input {
  padding: 10px 12px !important;
  border: 2px solid #e5e7eb !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  color: #1f2937 !important;
  background: #ffffff !important;
  transition: all 0.2s ease !important;
}

.form-input:focus {
  outline: none !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

.form-input::placeholder {
  color: #9ca3af !important;
}

/* Notes Section */
.notes-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
}

.note-item {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  padding: 12px !important;
  transition: all 0.2s ease !important;
}

.note-item:hover {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
}

.note-content {
  color: #374151 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  margin-bottom: 8px !important;
}

.note-meta {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-size: 12px !important;
  color: #6b7280 !important;
}

.add-note-btn {
  background: #f8fafc !important;
  border: 2px dashed #cbd5e1 !important;
  color: #64748b !important;
  padding: 12px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

.add-note-btn:hover {
  border-color: #3b82f6 !important;
  color: #3b82f6 !important;
  background: #f0f9ff !important;
}

/* Media Tabs */
.media-tabs {
  display: flex !important;
  border-bottom: 1px solid #e2e8f0 !important;
  margin-bottom: 16px !important;
}

.media-tab {
  background: none !important;
  border: none !important;
  padding: 12px 16px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #64748b !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  border-bottom: 2px solid transparent !important;
}

.media-tab.active {
  color: #3b82f6 !important;
  border-bottom-color: #3b82f6 !important;
  background: #f0f9ff !important;
}

.tab-icon {
  width: 16px !important;
  height: 16px !important;
}

.media-pane {
  display: none !important;
}

.media-pane.active {
  display: block !important;
}

/* File Upload */
.file-upload-area {
  border: 2px dashed #cbd5e1 !important;
  border-radius: 8px !important;
  padding: 24px !important;
  text-align: center !important;
  background: #f8fafc !important;
  transition: all 0.2s ease !important;
}

.file-upload-area:hover {
  border-color: #3b82f6 !important;
  background: #f0f9ff !important;
}

.upload-btn {
  background: #3b82f6 !important;
  color: #ffffff !important;
  border: none !important;
  padding: 10px 20px !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 8px !important;
}

.upload-btn:hover {
  background: #2563eb !important;
  transform: translateY(-1px) !important;
}

.upload-info {
  font-size: 12px !important;
  color: #6b7280 !important;
}

/* Files Grid */
.files-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
}

.file-item {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  padding: 12px !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.file-item:hover {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  transform: translateY(-1px) !important;
}

.file-item img {
  width: 100% !important;
  height: 80px !important;
  object-fit: cover !important;
  border-radius: 4px !important;
  margin-bottom: 8px !important;
}

.file-name {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #374151 !important;
  margin-bottom: 4px !important;
  word-break: break-word !important;
}

.file-size {
  font-size: 10px !important;
  color: #6b7280 !important;
}

/* Voice Memos */
.voice-memos-list {
  margin-bottom: 16px !important;
}

.voice-memo-info p {
  font-size: 12px !important;
  color: #6b7280 !important;
  text-align: center !important;
  margin: 0 !important;
  font-style: italic !important;
}

/* Invite Controls */
.invite-controls {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

.invite-buttons {
  display: flex !important;
  gap: 12px !important;
}

.invite-link-container {
  margin: 16px 0 !important;
}

.invite-link-input {
  width: 100% !important;
  padding: 10px 12px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  color: #6b7280 !important;
  background: #f9fafb !important;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace !important;
}

.invite-help p {
  font-size: 12px !important;
  color: #6b7280 !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}

/* Activity Section */
.activity-section {
  grid-column: 1 / -1 !important;
  margin-top: 24px !important;
}

.activity-header {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px 12px 0 0 !important;
  padding: 16px 20px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  transition: all 0.2s ease !important;
}

.activity-header:hover {
  background: #f1f5f9 !important;
}

.activity-header h4 {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 1 !important;
}

.activity-toggle {
  width: 20px !important;
  height: 20px !important;
  color: #64748b !important;
  transition: transform 0.2s ease !important;
}

.activity-content {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-top: none !important;
  border-radius: 0 0 12px 12px !important;
  padding: 20px !important;
}

.activity-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.activity-item {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  padding: 12px !important;
  transition: all 0.2s ease !important;
}

.activity-item:hover {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
}

.activity-content-text {
  color: #374151 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

/* Resize Handle */
.resize-handle {
  position: absolute !important;
  bottom: 0 !important;
  right: 0 !important;
  width: 20px !important;
  height: 20px !important;
  background: #e2e8f0 !important;
  cursor: se-resize !important;
  border-radius: 4px 0 0 0 !important;
  opacity: 0 !important;
  transition: opacity 0.2s ease !important;
}

.crm-card:hover .resize-handle {
  opacity: 1 !important;
}

.resize-handle:hover {
  background: #cbd5e1 !important;
}

/* Responsive Design */
@media (max-width: 1200px) {
  .crm-content-grid {
    grid-template-columns: 1fr !important;
  }
  
  .form-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 768px) {
  .luxury-crm-modal {
    width: 100% !important;
    height: 100vh !important;
    max-height: 100vh !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }
  
  .contact-card-header {
    flex-direction: column !important;
    text-align: center !important;
    gap: 16px !important;
  }
  
  .contact-actions {
    flex-direction: row !important;
    justify-content: center !important;
  }
  
  .crm-content-grid {
    padding: 8px !important;
    gap: 16px !important;
  }
}

/* Empty States */
.no-notes,
.empty-files-state {
  text-align: center !important;
  color: #6b7280 !important;
  font-size: 14px !important;
  font-style: italic !important;
  padding: 24px !important;
  background: #f8fafc !important;
  border: 1px dashed #cbd5e1 !important;
  border-radius: 8px !important;
}

/* Loading States */
.activity-item .activity-content-text {
  color: #6b7280 !important;
  font-style: italic !important;
}

/* Animation for smooth transitions */
.crm-card,
.activity-item,
.note-item,
.file-item {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Focus states for accessibility */
.action-btn:focus,
.form-input:focus,
.upload-btn:focus,
.add-note-btn:focus {
  outline: 2px solid #3b82f6 !important;
  outline-offset: 2px !important;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .crm-card {
    border-width: 2px !important;
  }
  
  .form-input {
    border-width: 2px !important;
  }
}

/* ========================================
   MEDIA SIDEBAR STYLES
   ======================================== */

/* Contact Name Row with Media Icons */
.contact-name-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 16px !important;
}

.contact-info-container {
  display: flex !important;
  align-items: flex-start !important;
  gap: 16px !important;
  margin-bottom: 16px !important;
}

.contact-info-container {
  display: flex !important;
  align-items: flex-start !important;
  gap: 20px !important;
  margin-bottom: 15px !important;
}

.contact-info-left {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 15px !important;
}

.contact-icons-right {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding-top: 8px !important;
  width: 100% !important;
}

.media-icon-large,
.action-icon-large {
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 96px !important;
  height: 96px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  position: relative !important;
}

.media-icon-large:hover,
.action-icon-large:hover {
  background: transparent !important;
  border: none !important;
  transform: scale(1.1) !important;
  box-shadow: none !important;
}

.media-icon-large:active,
.action-icon-large:active {
  transform: scale(0.95) !important;
}

.media-icon,
.action-icon {
  width: 64px !important;
  height: 64px !important;
  color: #1f2937 !important;
  transition: color 0.2s ease !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

.media-icon-large:hover .media-icon,
.action-icon-large:hover .action-icon {
  color: #000000 !important;
}

/* Force action icons to be visible */
.action-icon-large .action-icon {
  color: #1f2937 !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

.action-icon-large:hover .action-icon {
  color: #000000 !important;
}

@keyframes pulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.6; }
}

/* Removed sidebar-specific override that forced .modal.active to position: relative */

/* Media Sidebar */
.media-sidebar {
  position: absolute !important;
  top: 0 !important;
  right: -500px !important;
  width: 500px !important;
  height: 100% !important;
  background: #ffffff !important;
  border-left: 1px solid #e2e8f0 !important;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1) !important;
  z-index: 1000 !important;
  transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  display: flex !important;
  flex-direction: column !important;
}

.media-sidebar.active {
  right: 0 !important;
}

.sidebar-header {
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
  padding: 20px 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-shrink: 0 !important;
}

/* Media sidebar title - high specificity to override inline styles */
.media-sidebar .sidebar-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  margin: 0 !important;
}

/* Contact Details Modal - Consistent Text Sizes */
.luxury-crm-modal * {
  font-size: 14px !important;
}

.luxury-crm-modal h3,
.luxury-crm-modal h4,
.luxury-crm-modal .card-header,
.luxury-crm-modal .section-title {
  font-size: 16px !important;
  font-weight: 600 !important;
}

.luxury-crm-modal .contact-name {
  font-size: 42px !important;
  font-weight: 700 !important;
}

.luxury-crm-modal .contact-summary,
.luxury-crm-modal .contact-meta {
  font-size: 14px !important;
}

.luxury-crm-modal .info-input,
.luxury-crm-modal .form-input,
.luxury-crm-modal input,
.luxury-crm-modal textarea,
.luxury-crm-modal select {
  font-size: 14px !important;
}

.luxury-crm-modal .tag,
.luxury-crm-modal .contact-tags .tag {
  font-size: 12px !important;
}

.luxury-crm-modal .note-content,
.luxury-crm-modal .activity-content,
.luxury-crm-modal .file-name {
  font-size: 14px !important;
}

.luxury-crm-modal .note-meta,
.luxury-crm-modal .activity-meta,
.luxury-crm-modal .file-date {
  font-size: 12px !important;
}

.sidebar-close {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer !important;
  color: #374151 !important;
  transition: color 0.2s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
}

.sidebar-close:hover {
  background: none !important;
  color: #1f2937 !important;
}

.sidebar-close svg {
  width: 20px !important;
  height: 20px !important;
  stroke: #374151 !important;
  color: #374151 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.sidebar-close:hover svg {
  stroke: #1f2937 !important;
  color: #1f2937 !important;
}

/* Media sidebar content - high specificity to override inline styles */
.media-sidebar .sidebar-content {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

/* Media sidebar tabs - high specificity to override inline styles */
.media-sidebar .sidebar-tabs {
  display: flex !important;
  gap: 32px !important;
  padding: 20px 24px 16px 24px !important;
  border-bottom: 1px solid #e2e8f0 !important;
  background: #ffffff !important;
}

/* Media sidebar tab - high specificity to override inline styles */
.media-sidebar .sidebar-tab {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #64748b !important;
  cursor: pointer !important;
  transition: color 0.2s ease !important;
  position: relative !important;
  display: block !important;
  text-decoration: none !important;
}

.media-sidebar .sidebar-tab:hover {
  color: #1f2937 !important;
}

.media-sidebar .sidebar-tab.active {
  color: #1f2937 !important;
  font-weight: 500 !important;
}

.media-sidebar .sidebar-tab.active::after {
  content: '' !important;
  position: absolute !important;
  bottom: -16px !important;
  left: 0 !important;
  right: 0 !important;
  height: 2px !important;
  background: #1f2937 !important;
  border-radius: 1px !important;
}

/* Sidebar file items - clean layout */
.media-sidebar .sidebar-files-grid {
  padding: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.media-sidebar .sidebar-file-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px !important;
  background: #f8f9fa !important;
  border-radius: 8px !important;
  border: 1px solid #e2e8f0 !important;
  transition: all 0.2s ease !important;
}

.media-sidebar .sidebar-file-item:hover {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
}

.media-sidebar .file-icon {
  width: 40px !important;
  height: 40px !important;
  background: #e2e8f0 !important;
  border-radius: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  flex-shrink: 0 !important;
}

.media-sidebar .file-info {
  flex: 1 !important;
  min-width: 0 !important;
}

.media-sidebar .file-name {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #1f2937 !important;
  margin-bottom: 4px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.media-sidebar .file-date {
  font-size: 12px !important;
  color: #64748b !important;
}

.media-sidebar .file-actions {
  display: flex !important;
  gap: 12px !important;
  align-items: center !important;
}

/* Smaller action buttons for sidebar */
.media-sidebar .media-icon-small {
  width: 24px !important;
  height: 24px !important;
  border: 1px solid #e6e8eb !important;
  border-radius: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  background: #fff !important;
  transition: all 0.2s ease !important;
}

.media-sidebar .media-icon-small:hover {
  background: #f8f9fa !important;
  border-color: #1a1a1a !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.media-sidebar .media-icon-small .media-icon {
  width: 12px !important;
  height: 12px !important;
  color: #1f2937 !important;
}

.media-sidebar .media-icon-small:hover .media-icon {
  color: #000000 !important;
}

/* COMPLETELY CLEAN ICONS - NO BACKGROUNDS OR BOXES */
.clean-icon-container {
  width: 60px !important;
  height: 60px !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: transform 0.2s ease !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}

.clean-icon-container:hover {
  background: none !important;
  border: none !important;
  transform: scale(1.1) !important;
  box-shadow: none !important;
}

.clean-icon {
  width: 40px !important;
  height: 40px !important;
  color: #1f2937 !important;
  stroke: currentColor !important;
  fill: none !important;
}

.clean-icon-container:hover .clean-icon {
  color: #000000 !important;
}

/* CLEAN TAG BUTTON - NO BACKGROUND */
.clean-tag-btn {
  width: 20px !important;
  height: 20px !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: transform 0.2s ease !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}

.clean-tag-btn:hover {
  background: none !important;
  border: none !important;
  transform: scale(1.1) !important;
  box-shadow: none !important;
}

.clean-tag-icon {
  width: 16px !important;
  height: 16px !important;
  color: #1f2937 !important;
  stroke: currentColor !important;
  fill: none !important;
}

.clean-tag-btn:hover .clean-tag-icon {
  color: #000000 !important;
}

/* CLEAN AVATAR EDIT BUTTON - VISIBLE */
.clean-avatar-edit-btn {
  position: absolute !important;
  bottom: -5px !important;
  right: -5px !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: 3px solid #dc2626 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 3px 12px rgba(220, 38, 38, 0.4) !important;
  z-index: 10 !important;
}

.clean-avatar-edit-btn:hover {
  background: #fef2f2 !important;
  border-color: #b91c1c !important;
  transform: scale(1.1) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.clean-avatar-edit-icon {
  width: 16px !important;
  height: 16px !important;
  color: #dc2626 !important;
  stroke: currentColor !important;
  stroke-width: 2.5 !important;
  fill: none !important;
}

.clean-avatar-edit-btn:hover .clean-avatar-edit-icon {
  color: #b91c1c !important;
}

/* TAG SYSTEM STYLES (matching mobile app) */
.contact-tags-display {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 8px !important;
}

.contact-tag-chip {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 12px !important;
  border-radius: 16px !important;
  transition: all 0.2s ease !important;
}

.contact-tag-text {
  color: #6B7280 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
}

.contact-tag-remove,
.contact-info .contact-tag-remove,
.contact-detail-modal .contact-tag-remove,
.luxury-crm-modal .contact-tag-remove {
  width: 12px !important;
  height: 12px !important;
  border-radius: 6px !important;
  background: rgba(0, 0, 0, 0.4) !important;
  border: 1px solid rgba(0, 0, 0, 0.6) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  margin-left: 4px !important;
  flex-shrink: 0 !important;
}

.contact-tag-remove:hover {
  background: rgba(220, 38, 38, 0.8) !important;
  border-color: rgba(220, 38, 38, 1) !important;
  transform: scale(1.1) !important;
}

.contact-tag-remove svg,
.contact-info .contact-tag-remove svg,
.contact-detail-modal .contact-tag-remove svg,
.luxury-crm-modal .contact-tag-remove svg {
  width: 8px !important;
  height: 8px !important;
  color: #FFFFFF !important;
  stroke: #FFFFFF !important;
  stroke-width: 2 !important;
}

/* ADD TAG MODAL STYLES */
.tag-modal-content {
  max-width: 500px !important;
  width: 90% !important;
  z-index: 10000 !important;
}

#addTagModal {
  z-index: 9999999 !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(0, 0, 0, 0.5) !important;
}

#colorPickerModal {
  z-index: 10000001 !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(0, 0, 0, 0.5) !important;
}

.tag-form {
  padding: 20px !important;
}

.tag-form .form-group {
  margin-bottom: 20px !important;
}

.tag-form label {
  display: block !important;
  margin-bottom: 8px !important;
  font-weight: 600 !important;
  color: #374151 !important;
}

.color-preview-container {
  margin-top: 8px !important;
}

.color-preview-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px !important;
  border-radius: 8px !important;
  border: 1px solid #e5e7eb !important;
  background: #f9fafb !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  width: 100% !important;
}

.color-preview-btn:hover {
  background: #f3f4f6 !important;
  border-color: #d1d5db !important;
}

.color-preview-btn svg {
  width: 16px !important;
  height: 16px !important;
  color: #6b7280 !important;
}

.tag-form-actions {
  display: flex !important;
  gap: 12px !important;
  justify-content: flex-end !important;
  margin-top: 24px !important;
}

/* COLOR PICKER MODAL STYLES */
.color-picker-modal-content {
  max-width: 600px !important;
  width: 90% !important;
  max-height: 80vh !important;
}

.color-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)) !important;
  gap: 12px !important;
  padding: 20px !important;
  max-height: 400px !important;
  overflow-y: auto !important;
}

.color-option {
  width: 50px !important;
  height: 50px !important;
  border-radius: 25px !important;
  border: 2px solid transparent !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  position: relative !important;
}

.color-option:hover {
  transform: scale(1.1) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

.color-option.selected {
  border-color: #3b82f6 !important;
  border-width: 3px !important;
}

.color-option.selected::after {
  content: '✓' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  color: #FFFFFF !important;
  font-size: 20px !important;
  font-weight: bold !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

.color-picker-actions {
  display: flex !important;
  gap: 12px !important;
  justify-content: flex-end !important;
  padding: 20px !important;
  border-top: 1px solid #e5e7eb !important;
}

/* MAKE MODAL WIDER */
.luxury-crm-modal {
  max-width: 98vw !important;
  width: 98vw !important;
}

.luxury-crm-modal .modal-content {
  max-width: none !important;
}

/* IMPROVED ACTIVITY SECTION STYLES */
.activity-toggle {
  transition: transform 0.3s ease !important;
}

.activity-empty {
  text-align: center !important;
  color: #6b7280 !important;
  font-style: italic !important;
  padding: 20px !important;
}

.activity-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
  border: 1px solid transparent !important;
}

.activity-item:hover {
  background: #f8f9fa !important;
  border-color: #e2e8f0 !important;
}

.activity-clickable {
  cursor: pointer !important;
}

.activity-clickable:hover {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.activity-icon {
  font-size: 20px !important;
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #f8f9fa !important;
  border-radius: 8px !important;
  flex-shrink: 0 !important;
}

.activity-details {
  flex: 1 !important;
  min-width: 0 !important;
}

.activity-description {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #1f2937 !important;
  margin-bottom: 4px !important;
  line-height: 1.4 !important;
}

.activity-meta {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  font-size: 12px !important;
  color: #6b7280 !important;
}

.activity-date {
  font-weight: 500 !important;
}

.activity-file-link {
  color: #3b82f6 !important;
  cursor: pointer !important;
}

.activity-file-link:hover {
  text-decoration: underline !important;
}

.activity-arrow {
  color: #9ca3af !important;
  font-size: 16px !important;
  font-weight: bold !important;
  transition: transform 0.2s ease !important;
}

.activity-clickable:hover .activity-arrow {
  transform: translateX(4px) !important;
  color: #6b7280 !important;
}

/* EMAIL BUILDER SIDEBAR STYLES */
.email-builder-content {
  padding: 20px !important;
}

.email-form {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
}

.email-form .form-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.email-form label {
  font-weight: 600 !important;
  color: #374151 !important;
  font-size: 14px !important;
}

.email-form .form-input,
.email-form .form-textarea {
  padding: 12px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  transition: all 0.2s ease !important;
  background: #ffffff !important;
}

.email-form .form-input:focus,
.email-form .form-textarea:focus {
  outline: none !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

.email-form .form-textarea {
  resize: vertical !important;
  min-height: 120px !important;
  font-family: inherit !important;
  line-height: 1.5 !important;
}

/* Removed conflicting email-actions rules - now using new email-toolbar structure */

/* VOICE MEMO SIDEBAR STYLES */
.sidebar-voice-list {
  padding: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.sidebar-voice-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px !important;
  background: #f8f9fa !important;
  border-radius: 8px !important;
  border: 1px solid #e2e8f0 !important;
  transition: all 0.2s ease !important;
}

.sidebar-voice-item:hover {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
}

.voice-icon {
  font-size: 24px !important;
  width: 40px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #e2e8f0 !important;
  border-radius: 6px !important;
  flex-shrink: 0 !important;
}

.voice-info {
  flex: 1 !important;
  min-width: 0 !important;
}

.voice-name {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #1f2937 !important;
  margin-bottom: 4px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.voice-date {
  font-size: 12px !important;
  color: #64748b !important;
}

.voice-actions {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
}

/* EMAIL VIEWER SIDEBAR STYLES */
.email-viewer-content {
  padding: 20px !important;
}

.email-viewer-header {
  border-bottom: 1px solid #e5e7eb !important;
  padding-bottom: 16px !important;
  margin-bottom: 20px !important;
}

.email-meta {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.email-subject {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #1f2937 !important;
}

.email-date {
  font-size: 12px !important;
  color: #6b7280 !important;
}

.email-viewer-body {
  margin-bottom: 20px !important;
}

.email-content {
  background: #f8f9fa !important;
  padding: 16px !important;
  border-radius: 8px !important;
  border: 1px solid #e2e8f0 !important;
}

.email-content p {
  margin-bottom: 12px !important;
  line-height: 1.5 !important;
  color: #374151 !important;
}

.email-content p:last-child {
  margin-bottom: 0 !important;
}

.email-viewer-actions {
  display: flex !important;
  gap: 12px !important;
  justify-content: flex-end !important;
  padding-top: 20px !important;
  border-top: 1px solid #e5e7eb !important;
}

/* FILE VIEWER SIDEBAR STYLES */
.file-viewer-content {
  padding: 20px !important;
}

.file-viewer-header {
  border-bottom: 1px solid #e5e7eb !important;
  padding-bottom: 16px !important;
  margin-bottom: 20px !important;
}

.file-meta {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.file-name {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #1f2937 !important;
}

.file-date {
  font-size: 12px !important;
  color: #6b7280 !important;
}

.file-viewer-body {
  margin-bottom: 20px !important;
}

.file-content {
  background: #f8f9fa !important;
  padding: 16px !important;
  border-radius: 8px !important;
  border: 1px solid #e2e8f0 !important;
}

.file-content p {
  margin-bottom: 12px !important;
  line-height: 1.5 !important;
  color: #374151 !important;
}

.file-content p:last-child {
  margin-bottom: 0 !important;
}

.file-viewer-actions {
  display: flex !important;
  gap: 12px !important;
  justify-content: flex-end !important;
  padding-top: 20px !important;
  border-top: 1px solid #e5e7eb !important;
}





.sidebar-panes {
  flex: 1 !important;
  overflow: hidden !important;
  position: relative !important;
}

.sidebar-pane {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  padding: 20px !important;
  overflow-y: auto !important;
  display: none !important;
  flex-direction: column !important;
}

.sidebar-pane.active {
  display: flex !important;
}

.sidebar-files-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) !important;
  gap: 12px !important;
  margin-bottom: 20px !important;
  flex: 1 !important;
}

.sidebar-files-grid .file-item {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  padding: 12px !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
}

.sidebar-files-grid .file-item:hover {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  transform: translateY(-1px) !important;
}

.sidebar-files-grid .file-item img {
  width: 60px !important;
  height: 60px !important;
  object-fit: cover !important;
  border-radius: 4px !important;
}

.sidebar-files-grid .file-name {
  font-size: 11px !important;
  font-weight: 500 !important;
  color: #374151 !important;
  word-break: break-word !important;
  line-height: 1.3 !important;
}

.sidebar-files-grid .file-size {
  font-size: 9px !important;
  color: #6b7280 !important;
}

.sidebar-upload-area {
  border: 2px dashed #cbd5e1 !important;
  border-radius: 8px !important;
  padding: 16px !important;
  text-align: center !important;
  background: #f8fafc !important;
  transition: all 0.2s ease !important;
  flex-shrink: 0 !important;
}

.sidebar-upload-area:hover {
  border-color: #3b82f6 !important;
  background: #f0f9ff !important;
}

.sidebar-upload-btn {
  background: #3b82f6 !important;
  color: #ffffff !important;
  border: none !important;
  padding: 8px 16px !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: 8px !important;
}

.sidebar-upload-btn:hover {
  background: #2563eb !important;
  transform: translateY(-1px) !important;
}

.sidebar-upload-btn .btn-icon {
  width: 14px !important;
  height: 14px !important;
}

.sidebar-voice-list {
  flex: 1 !important;
  margin-bottom: 16px !important;
}

.sidebar-voice-info {
  flex-shrink: 0 !important;
}

.sidebar-voice-info p {
  font-size: 12px !important;
  color: #6b7280 !important;
  text-align: center !important;
  margin: 0 !important;
  font-style: italic !important;
  line-height: 1.4 !important;
}


/* Responsive Design for Sidebar */
@media (max-width: 768px) {
  .media-sidebar {
    width: 100% !important;
    right: -100% !important;
  }
  
  .sidebar-files-grid {
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)) !important;
    gap: 8px !important;
  }
  
  .sidebar-files-grid .file-item img {
    width: 50px !important;
    height: 50px !important;
  }
}

/* Animation for smooth sidebar transitions */
.media-sidebar {
  will-change: right !important;
}

.sidebar-pane {
  will-change: opacity, transform !important;
}

/* Focus states for accessibility */
.media-icon-large:focus,
.sidebar-close:focus,
.sidebar-tab:focus,
.sidebar-upload-btn:focus {
  outline: 2px solid #3b82f6 !important;
  outline-offset: 2px !important;
}

/* ========================================
   CONTACT INFO FIELDS - WIDER LAYOUT
   ======================================== */

.contact-card-header {
  background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%) !important;
  padding: 32px !important;
  padding-bottom: 40px !important;
  border-bottom: 1px solid #f0f0f0 !important;
}

.contact-summary {
  width: 100% !important;
  max-width: 1200px !important;
}

.contact-info-with-icons-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 16px !important;
  margin-top: 20px !important;
}

.contact-info-container {
  flex: 1 !important;
  width: 100% !important;
}

.info-field {
  flex: 1 1 240px !important;
  min-width: 220px !important;
}

.info-input {
  width: 100% !important;
}

.contact-icons-and-timeline {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  width: 100% !important;
}

.contact-icons-right {
  display: flex !important;
  flex-direction: row !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
}

.timeline-row-below {
  margin-top: 8px !important;
  padding-top: 0 !important;
  border-top: none !important;
}

.timeline-dropdown {
  width: 100% !important;
  max-width: none !important;
  padding: 10px 14px !important;
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  font-family: 'Lora', serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #2D2D2D !important;
  cursor: pointer !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
}

/* ========================================
   FOLLOW-UP TIMELINE STYLES
   ======================================== */

.timeline-section-top {
  margin: 0 -32px 24px -32px !important;
  padding: 24px 32px !important;
  border-bottom: 2px solid #e5e7eb !important;
  background: #f9fafb !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

.timeline-section-top .crm-card {
  margin: 0 !important;
  box-shadow: none !important;
  border: none !important;
  background: transparent !important;
}

.timeline-section-top .card-header {
  background: transparent !important;
  border-bottom: 1px solid #e5e7eb !important;
  padding: 0 0 16px 0 !important;
}

.timeline-section-top .card-header h4 {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: #1e293b !important;
}

.timeline-section-top .card-body {
  padding: 20px 0 0 0 !important;
}

.timeline-selector {
  margin-bottom: 20px !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid #e5e7eb !important;
}

.timeline-selector label {
  display: block !important;
  font-weight: 600 !important;
  color: #1a1a1a !important;
  margin-bottom: 8px !important;
  font-size: 14px !important;
  font-family: 'Lora', serif !important;
}

.timeline-select {
  width: 100% !important;
  padding: 10px 12px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #1a1a1a !important;
  font-size: 14px !important;
  font-family: 'Lora', serif !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.timeline-select:hover {
  border-color: #d1d5db !important;
}

.timeline-select:focus {
  outline: none !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

.timeline-empty {
  text-align: center !important;
  padding: 40px 20px !important;
  color: #9ca3af !important;
  font-style: italic !important;
}

.timeline-progress {
  margin-bottom: 24px !important;
  padding: 16px !important;
  background: #f9fafb !important;
  border-radius: 8px !important;
}

.progress-bar {
  height: 8px !important;
  background: #e5e7eb !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  margin-bottom: 8px !important;
}

.progress-fill {
  height: 100% !important;
  background: linear-gradient(90deg, #10b981 0%, #059669 100%) !important;
  transition: width 0.3s ease !important;
  border-radius: 4px !important;
}

.progress-text {
  display: block !important;
  text-align: center !important;
  font-size: 13px !important;
  color: #6b7280 !important;
  font-weight: 500 !important;
}

.timeline-steps {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

.timeline-step {
  display: flex !important;
  gap: 16px !important;
  padding: 16px !important;
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
}

.timeline-step:hover {
  border-color: #d1d5db !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
}

.timeline-step.completed {
  background: #f0fdf4 !important;
  border-color: #86efac !important;
}

.step-checkbox {
  flex-shrink: 0 !important;
}

.step-checkbox input[type="checkbox"] {
  width: 20px !important;
  height: 20px !important;
  border: 2px solid #d1d5db !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  margin: 0 !important;
}

.step-checkbox input[type="checkbox"]:checked {
  background: #10b981 !important;
  border-color: #10b981 !important;
}

.step-content {
  flex: 1 !important;
}

.step-header {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 8px !important;
}

.step-day {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #6b7280 !important;
  background: #f3f4f6 !important;
  padding: 4px 8px !important;
  border-radius: 4px !important;
}

.step-action {
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 4px 8px !important;
  border-radius: 4px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.step-action.call-badge {
  background: #dbeafe !important;
  color: #1e40af !important;
}

.step-action.email-badge {
  background: #fef3c7 !important;
  color: #92400e !important;
}

.step-action.text-badge {
  background: #e0e7ff !important;
  color: #3730a3 !important;
}

.step-title {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #1a1a1a !important;
  margin: 0 0 8px 0 !important;
  font-family: 'Lora', serif !important;
}

.step-script {
  font-size: 14px !important;
  color: #4b5563 !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  font-style: italic !important;
  padding-left: 12px !important;
  border-left: 3px solid #e5e7eb !important;
}

/* ========================================
   SIDEBAR NOTES STYLES
   ======================================== */

.sidebar-notes-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  padding: 16px !important;
  overflow-y: auto !important;
  max-height: calc(100vh - 300px) !important;
}

.sidebar-notes-list .note-item {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  padding: 12px !important;
  transition: all 0.2s ease !important;
}

.sidebar-notes-list .note-item:hover {
  border-color: #d1d5db !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
}

.sidebar-notes-list .note-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #1a1a1a !important;
  margin-bottom: 6px !important;
  font-family: 'Lora', serif !important;
}

.sidebar-notes-list .note-content {
  font-size: 13px !important;
  color: #4b5563 !important;
  line-height: 1.5 !important;
  margin-bottom: 8px !important;
}

.sidebar-notes-list .note-meta {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-size: 11px !important;
  color: #9ca3af !important;
}

.sidebar-notes-list .note-date {
  font-size: 11px !important;
  color: #9ca3af !important;
}

.sidebar-notes-list .note-category {
  display: inline-block !important;
  padding: 2px 8px !important;
  background: #f3f4f6 !important;
  border-radius: 4px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  color: #6b7280 !important;
}

.sidebar-notes-list .note-actions {
  display: flex !important;
  gap: 8px !important;
  margin-top: 8px !important;
  padding-top: 8px !important;
  border-top: 1px solid #f3f4f6 !important;
}

.sidebar-notes-list .note-action-btn {
  padding: 4px 8px !important;
  font-size: 11px !important;
  border: 1px solid #e5e7eb !important;
  background: #ffffff !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  color: #6b7280 !important;
}

.sidebar-notes-list .note-action-btn:hover {
  background: #f9fafb !important;
  border-color: #d1d5db !important;
  color: #1a1a1a !important;
}

.sidebar-notes-list .empty-state {
  text-align: center !important;
  padding: 40px 20px !important;
  color: #9ca3af !important;
  font-style: italic !important;
}

/* Activity Fields in Contact Cards */
.editable-activity {
  flex: 1 !important;
  min-width: 180px !important;
}

.activity-field {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  width: 100% !important;
}

.activity-label {
  font-size: 9px !important;
  font-weight: 600 !important;
  color: #6b7280 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

.activity-input {
  padding: 6px 8px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 4px !important;
  font-size: 11px !important;
  color: #1a1a1a !important;
  background: #ffffff !important;
  transition: all 0.2s ease !important;
  width: 100% !important;
}

.activity-input:focus {
  outline: none !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

.activity-input::placeholder {
  color: #9ca3af !important;
  font-style: italic !important;
}

/* Activity Display (Clickable) */
.activity-display {
  padding: 8px 10px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 4px !important;
  background: #f9fafb !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  min-height: 50px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.activity-display:hover {
  background: #ffffff !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

.activity-text {
  font-size: 11px !important;
  color: #1a1a1a !important;
  line-height: 1.4 !important;
  margin-bottom: 4px !important;
}

.activity-date {
  font-size: 9px !important;
  color: #6b7280 !important;
  font-weight: 600 !important;
}

.activity-placeholder {
  font-size: 11px !important;
  color: #9ca3af !important;
  font-style: italic !important;
}

/* Activity Modal Styles */
.activity-modal-content {
  max-width: 500px !important;
  width: 90% !important;
}

.activity-modal-content .form-group {
  margin-bottom: 20px !important;
}

.activity-modal-content label {
  display: block !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #1a1a1a !important;
  margin-bottom: 8px !important;
}

.activity-modal-content .form-control {
  width: 100% !important;
  padding: 10px 12px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  color: #1a1a1a !important;
  font-family: 'Lora', serif !important;
  transition: all 0.2s ease !important;
}

.activity-modal-content .form-control:focus {
  outline: none !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

.activity-modal-content textarea.form-control {
  resize: vertical !important;
  min-height: 100px !important;
}

.activity-modal-content .help-text {
  font-size: 11px !important;
  color: #6b7280 !important;
  font-style: italic !important;
  margin-top: 4px !important;
}

.activity-modal-content .modal-actions {
  display: flex !important;
  gap: 10px !important;
  justify-content: flex-end !important;
  margin-top: 24px !important;
  padding-top: 20px !important;
  border-top: 1px solid #e5e7eb !important;
}

.activity-modal-content .btn {
  padding: 10px 20px !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  border: none !important;
}

.activity-modal-content .btn-secondary {
  background: #f3f4f6 !important;
  color: #6b7280 !important;
}

.activity-modal-content .btn-secondary:hover {
  background: #e5e7eb !important;
  color: #1a1a1a !important;
}

.activity-modal-content .btn-primary {
  background: #3b82f6 !important;
  color: #ffffff !important;
}

.activity-modal-content .btn-primary:hover {
  background: #2563eb !important;
}

/* Task List Enhancements */
.task-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px !important;
  border-bottom: 1px solid #f3f4f6 !important;
  transition: all 0.2s ease !important;
}

.task-item:hover {
  background: #f9fafb !important;
}

.task-item.completed {
  opacity: 0.6 !important;
}

.task-item.completed .task-text {
  text-decoration: line-through !important;
  color: #9ca3af !important;
}

.task-content {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.task-contact {
  font-size: 10px !important;
  color: #6b7280 !important;
  font-style: italic !important;
}

.task-due {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #6b7280 !important;
  white-space: nowrap !important;
}

.loading-state {
  padding: 20px !important;
  text-align: center !important;
  color: #9ca3af !important;
  font-size: 13px !important;
  font-style: italic !important;
}

/* Contact Card Layout */
.contact-card {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  background: #ffffff;
  border: 1px solid #eaeaea;
  border-radius: 0 0 14px 14px;
  padding: 20px 24px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
  transition: all 0.2s ease;
}

/* First contact card - no top radius to blend with filter bar */
.contact-card:first-child {
  border-radius: 0 0 14px 14px;
}

.contact-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}

/* Left side - Contact Info */
.contact-info {
  /* Grid will handle the sizing */
}

.contact-info h3 {
  margin: 0 0 6px 0 !important;
  font-family: 'Playfair Display', serif !important;
  font-size: 32px !important;
  color: #1d1d1d !important;
  font-weight: 700 !important;
}

.contact-info .details {
  font-size: 19px !important;
  color: #444 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

/* Fix one-line issue for tags without changing colors */
.contact-tag-chip,
.luxury-crm-modal .contact-tag-chip {
  white-space: nowrap !important;
  flex-wrap: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  min-width: fit-content !important;
  max-width: none !important;
  width: auto !important;
}

/* Right side - Activity Group */
.activity-group {
  display: flex;
  gap: 12px;
}

.activity-card {
  background: #fafafa;
  border: 1px solid #ededed;
  border-radius: 10px;
  padding: 12px 16px;
  min-width: 160px;
}

.contact-header {
  border-bottom: 1px solid #f3f3f3 !important;
  padding-bottom: 8px !important;
  margin-bottom: 12px !important;
}

.contact-main-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.contact-name {
  font-family: 'Playfair Display', serif !important;
  font-size: 32px !important;
  font-weight: 700 !important;
  color: #000000 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
}

/* Force contact name to be large - override any other selectors */
.contact-card .contact-name,
.luxury-contacts-container .contact-name {
  font-size: 32px !important;
  font-weight: 700 !important;
  color: #000000 !important;
  font-family: 'Playfair Display', serif !important;
}

.contact-contact-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  font-size: 17px !important;
  color: #000000 !important;
  font-weight: 500 !important;
}

.contact-email,
.contact-phone {
  font-size: 19px !important;
  color: #000000 !important;
  font-weight: 500 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* Contact Type Tags - Simplified */
.contact-type-badge {
  display: inline-block !important;
  padding: 4px 10px !important;
  border-radius: 14px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  white-space: nowrap !important;
  font-family: 'Lora', serif !important;
  border: 1px solid transparent !important;
  background: #f8f7f4 !important;
  color: #3b3b3b !important;
}

.contact-type-badge.buyer {
  background: #eae3db !important;
  color: #4a3f35 !important;
}

.contact-type-badge.seller {
  background: #f4e4e6 !important;
  color: #4a3f35 !important;
}

.contact-type-badge.lead {
  background: #e8f0ff !important;
  color: #1a3d7c !important;
}

.contact-type-badge.client {
  background: #e8f5e9 !important;
  color: #2e5c3a !important;
}

.contact-type-badge.prospect {
  background: #f3e8ff !important;
  color: #5b2a7c !important;
}

.contact-type-badge.undefined,
.contact-type-badge:not([class*="buyer"]):not([class*="seller"]):not([class*="lead"]):not([class*="client"]):not([class*="prospect"]) {
  background: #f4f4f4 !important;
  color: #777777 !important;
}

/* Activity Section - Square Cards */
.contact-details {
  display: flex !important;
  justify-content: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  border-top: 1px solid #f2f2f2 !important;
  padding-top: 16px !important;
  margin-top: 12px !important;
}

/* Improved activity boxes - better proportions */
.contact-card .detail-item,
.contact-card .detail-item.editable-activity {
  width: 160px !important;
  max-width: 160px !important;
  min-width: 160px !important;
  flex: none !important;
}

.detail-item {
  background: #f8f8f8 !important;
  border: 1px solid #ebebeb !important;
  border-radius: 10px !important;
  width: 160px !important;
  height: 80px !important;
  padding: 12px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  text-align: left !important;
  max-width: 160px !important;
  min-width: 160px !important;
  transition: all 0.2s ease !important;
  flex-shrink: 0 !important;
}

.detail-item:hover {
  background: #f0f0f0 !important;
  border-color: #d0d0d0 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
}

.detail-item.editable-activity {
  cursor: pointer !important;
}

.detail-item.editable-activity:hover {
  background: #fafafa !important;
  border-color: #e0e0e0 !important;
}

.activity-field {
  flex: 1 !important;
  min-width: 0 !important;
}

.activity-label {
  font-size: 11px !important;
  color: #6b6b6b !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin: 0 !important;
  font-family: 'Lora', serif !important;
  line-height: 1.2 !important;
}

.activity-text {
  font-size: 11px !important;
  font-weight: 400 !important;
  color: #444 !important;
  line-height: 1.2 !important;
  font-family: 'Lora', serif !important;
}

.activity-date {
  font-size: 10px !important;
  font-weight: 400 !important;
  color: #666 !important;
  font-family: 'Lora', serif !important;
}

.activity-placeholder {
  font-size: 13px !important;
  font-weight: 400 !important;
  color: #444 !important;
  font-style: italic !important;
  font-family: 'Lora', serif !important;
  text-align: left !important;
  transition: all 0.2s ease !important;
  margin: 0 !important;
  line-height: 1.3 !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
}

.activity-placeholder:hover {
  color: #045d3c !important;
}

.activity-placeholder:hover {
  background: #F9F9F9 !important;
  border-color: #D0D0D0 !important;
  color: #666666 !important;
}

/* Hide old elements */
.contact-actions {
  display: none !important;
}

.detail-icon {
  display: none !important;
}

/* Hide activity card SVG icons - they're too large */
.detail-item .icon-svg {
  display: none !important;
}

/* SVG icon styling for email/phone */
.contact-email .icon-svg,
.contact-phone .icon-svg {
  width: 16px !important;
  height: 16px !important;
  stroke: #000000 !important;
  fill: none !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  flex-shrink: 0 !important;
}

/* Filter section - make sticky at top */
.contacts-filters {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  background: #ffffff !important;
  padding: 4px 8px !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  width: 100% !important;
}

/* Filter grid layout - single line, minimal gaps */
.contacts-filters .filters-grid {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  align-items: center !important;
  justify-content: flex-start !important;
  overflow-x: auto !important;
  padding-bottom: 2px !important;
}

/* Filter group styling - horizontal */
.contacts-filters .filter-group {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: fit-content !important;
  flex-shrink: 0 !important;
}

/* Inline gear icon for customize */
.contacts-filters .filter-customize-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer !important;
  padding: 0 !important;
  color: #7a7a7a !important;
  margin-right: 6px !important;
}
.contacts-filters .filter-customize-icon svg {
  width: 18px !important;
  height: 18px !important;
  stroke: #7a7a7a !important;
}
.contacts-filters .filter-customize-icon:hover {
  background: transparent !important;
}
.contacts-filters .filter-customize-icon:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Normalize filter control heights/alignment */
.contacts-filters .filter-group select,
.contacts-filters .filter-group input {
  height: 36px !important;
  margin: 0 !important;
  line-height: 18px !important;
  padding: 8px 10px !important;
  vertical-align: middle !important;
}

/* Filter labels */
.contacts-filters .filter-group label {
  white-space: nowrap !important;
  margin: 0 !important;
  font-size: 13px !important;
}

/* Filter header styling */
.contacts-filters .filters-header {
  display: none !important;
}

/* Filter text - make larger */
.contacts-filters h3,
.contacts-filters .filters-header h3 {
  display: none !important;
}

.contacts-filters label,
.contacts-filters .filter-group label {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #000000 !important;
}

.contacts-filters input,
.contacts-filters select,
.contacts-filters .form-control {
  font-size: 12px !important;
  color: #000000 !important;
  border: 1px solid #ddd !important;
  border-radius: 4px !important;
  padding: 4px 8px !important;
  background: #ffffff !important;
  width: auto !important;
  min-width: 80px !important;
  max-width: 120px !important;
  margin: 0 !important;
  height: 28px !important;
}

.contacts-filters input:focus,
.contacts-filters select:focus,
.contacts-filters .form-control:focus {
  border-color: #3b82f6 !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1) !important;
}

.contacts-filters .clear-filters-btn {
  display: none !important;
}

.contacts-filters .clear-filters-btn:hover {
  background: #e9ecef !important;
  border-color: #adb5bd !important;
}

/* Hide the Close Modals button */
.emergency-close-btn {
  display: none !important;
}

/* Property Cards in Contact Detail Modal */
.property-card-mini {
  position: relative !important;
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  padding: 12px !important;
  margin-right: 12px !important;
  margin-bottom: 0 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
  width: 240px !important;
  min-width: 240px !important;
  max-width: 240px !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
}

.property-card-mini:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
  transform: translateY(-1px) !important;
}

.property-card-mini-image {
  width: 100% !important;
  height: 120px !important;
  object-fit: cover !important;
  border-radius: 6px !important;
  margin-bottom: 8px !important;
}

.property-card-mini-content {
  padding: 0 !important;
}

.property-card-mini-price {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #1f2937 !important;
  margin-bottom: 4px !important;
  font-family: 'Lora', serif !important;
}

.property-card-mini-address {
  font-size: 13px !important;
  color: #6b7280 !important;
  margin-bottom: 6px !important;
  line-height: 1.3 !important;
  font-family: 'Inter', sans-serif !important;
}

.property-card-mini-details {
  font-size: 12px !important;
  color: #9ca3af !important;
  margin-bottom: 6px !important;
  display: flex !important;
  gap: 4px !important;
  align-items: center !important;
}

.property-card-mini-details span {
  font-family: 'Inter', sans-serif !important;
}

.property-card-mini-status {
  font-size: 11px !important;
  padding: 4px 12px !important;
  border-radius: 4px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  font-family: 'Inter', sans-serif !important;
  white-space: nowrap !important;
  min-width: fit-content !important;
  display: inline-block !important;
}

.property-card-mini-status.active {
  background: #dcfce7 !important;
  color: #166534 !important;
}

.property-card-mini-status.pending {
  background: #fef3c7 !important;
  color: #92400e !important;
}

.property-card-mini-status.sold {
  background: #fee2e2 !important;
  color: #991b1b !important;
}

/* Property Remove Button - Override All Other Styles */
.property-card-mini .property-card-remove-btn,
.property-card-mini button.property-card-remove-btn,
.property-card-mini .property-remove-button,
.property-card-mini button.property-remove-button,
div.property-card-mini button.property-card-remove-btn,
div.property-card-mini .property-card-remove-btn {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  background: #f0f0f0 !important;
  background-color: #f0f0f0 !important;
  border: 2px solid #d0d0d0 !important;
  border-radius: 6px !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  max-width: 28px !important;
  max-height: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 10 !important;
  transition: all 0.2s ease !important;
  color: #333333 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-align: center !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

.property-card-mini .property-card-remove-btn:hover,
.property-card-mini button.property-card-remove-btn:hover,
.property-card-mini .property-remove-button:hover,
.property-card-mini button.property-remove-button:hover,
div.property-card-mini button.property-card-remove-btn:hover,
div.property-card-mini .property-card-remove-btn:hover {
  background: #e0e0e0 !important;
  background-color: #e0e0e0 !important;
  border-color: #b0b0b0 !important;
  color: #222222 !important;
  transform: scale(1.15) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

.property-card-mini .property-card-remove-btn svg,
.property-card-mini button.property-card-remove-btn svg,
.property-card-mini .property-remove-button svg,
.property-card-mini button.property-remove-button svg,
div.property-card-mini button.property-card-remove-btn svg,
div.property-card-mini .property-card-remove-btn svg {
  width: 14px !important;
  height: 14px !important;
  stroke: #333333 !important;
  stroke-width: 2.5 !important;
  color: #333333 !important;
  fill: none !important;
}

/* Ensure SVG is visible in remove button */
.property-card-mini .property-card-remove-btn,
.property-card-mini button.property-card-remove-btn {
  color: #333333 !important;
}

.property-card-mini .property-card-remove-btn svg,
.property-card-mini button.property-card-remove-btn svg {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Properties list container - horizontal layout */
.properties-list {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  gap: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  align-items: flex-start !important;
}

/* Ensure property cards don't wrap */
.properties-list .property-card-mini {
  flex-shrink: 0 !important;
  margin-bottom: 0 !important;
}

/* ACTUAL TABLE LAYOUT FOR CONTACTS */
/* Main table container */
.contacts-data-table {
  width: 100% !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Table header - OVERRIDE any pink colors */
.contacts-data-table thead,
table.contacts-data-table thead,
#contactsTable thead {
  background: #f8f9fa !important;
  background-color: #f8f9fa !important;
  border-bottom: 2px solid #e9ecef !important;
}

/* Override the general table th rule that sets pink */
.contacts-data-table th,
table.contacts-data-table th,
#contactsTable th,
.contacts-data-table thead th,
table.contacts-data-table thead th,
#contactsTable thead th {
  background: #f8f9fa !important;
  background-color: #f8f9fa !important;
  padding: 16px 20px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: #495057 !important;
  text-align: left !important;
  border-right: 1px solid #e9ecef !important;
  vertical-align: middle !important;
}

.contacts-data-table th:first-child {
  width: 40% !important;
  min-width: 300px !important;
}

/* Override first-child rule for checkbox column */
.contacts-data-table th:first-child.col-select,
.contacts-data-table th.col-select:first-child {
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  padding: 8px !important;
}

.contacts-data-table td:first-child.col-select,
.contacts-data-table td.col-select:first-child {
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  padding: 8px !important;
}

.contacts-data-table th:nth-child(2),
.contacts-data-table th:nth-child(3) {
  width: 30% !important;
}

.contacts-data-table th:last-child {
  border-right: none !important;
}

/* Table body */
.contacts-data-table tbody {
  background: transparent !important;
}

/* Contact rows */
.contacts-data-table tr.contact-row {
  background: #ffffff !important;
  border-bottom: 1px solid #e9ecef !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}

.contacts-data-table tr.contact-row:hover {
  background: #f8f9fa !important;
}

/* Table cells */
.contacts-data-table td {
  padding: 16px 20px !important;
  vertical-align: middle !important;
  border-right: 1px solid #e9ecef !important;
}

.contacts-data-table td:last-child {
  border-right: none !important;
}

/* Contact info cell */
.contacts-data-table td.contact-info {
  width: 40% !important;
  min-width: 300px !important;
}

/* Activity cells */
.contacts-data-table td.last-activity-cell,
.contacts-data-table td.next-activity-cell {
  width: 30% !important;
}

/* Activity content styling */
.contacts-data-table .detail-item,
.contacts-data-table .editable-activity {
  display: block !important;
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  text-align: left !important;
}

/* Activity labels */
.luxury-contacts-container .activity-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  color: #6c757d !important;
  margin-bottom: 4px !important;
  letter-spacing: 0.5px !important;
}

/* Activity content */
.luxury-contacts-container .activity-content {
  font-size: 13px !important;
  color: #495057 !important;
  min-height: 20px !important;
}

/* Add activity buttons */
.luxury-contacts-container .add-activity {
  background: #f8f9fa !important;
  border: 1px solid #dee2e6 !important;
  border-radius: 6px !important;
  padding: 6px 12px !important;
  font-size: 12px !important;
  color: #6c757d !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  width: 100% !important;
  text-align: left !important;
}

.luxury-contacts-container .add-activity:hover {
  background: #e9ecef !important;
  border-color: #adb5bd !important;
  color: #495057 !important;
}

/* Fix modal positioning - ensure modals are properly centered and hidden */
/* Web-only styles to prevent conflicts with React Native modals */
body .modal {
  display: none !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(0, 0, 0, 0.5) !important;
  z-index: 1000 !important;
  justify-content: center !important;
  align-items: center !important;
}

body .modal.active {
  display: flex !important;
}

body .modal-content {
  position: relative !important;
  background: white !important;
  border-radius: 8px !important;
  padding: 20px !important;
  max-width: 500px !important;
  width: 90% !important;
  max-height: 80vh !important;
  overflow-y: auto !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

/* Hide all modals by default */
#addContactModal,
#editContactModal,
#addTagModal,
#colorPickerModal,
#addActivityModal,
#scheduleActivityModal {
  display: none !important;
}

/* Show modals only when they have the active class */
#addContactModal.active,
#editContactModal.active,
#addTagModal.active,
#colorPickerModal.active,
#addActivityModal.active,
#scheduleActivityModal.active {
  display: flex !important;
}

/* Contact row height to accommodate larger avatars */
.contact-row {
  height: 64px !important;
}

.contact-row td {
  padding: 8px 12px !important;
  vertical-align: middle !important;
}

/* Contact avatar styling in contacts table */
.contact-avatar-small {
  width: 48px !important;
  height: 48px !important;
  font-size: 16px !important;
}

/* Email Builder Toolbar Alignment Fix - High Specificity */
#emailTab .email-toolbar {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 12px 20px !important;
  border-bottom: 1px solid #e5e7eb !important;
  margin-bottom: 16px !important;
  width: 100% !important;
  max-width: 1400px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  background: #fff !important;
}

#emailTab .email-toolbar-left,
#emailTab .email-toolbar-right {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
}

#emailTab .email-btn {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 12px !important;
  border: 1px solid #d1d5db !important;
  border-radius: 6px !important;
  background: #f9fafb !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #374151 !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  white-space: nowrap !important;
}

#emailTab .email-btn:hover {
  background: #f3f4f6 !important;
  border-color: #9ca3af !important;
}

#emailTab .email-btn.primary {
  background: #000 !important;
  color: #fff !important;
  border-color: #000 !important;
}

#emailTab .email-btn.primary:hover {
  background: #1f2937 !important;
  border-color: #1f2937 !important;
}

#emailTab .email-btn svg {
  flex-shrink: 0 !important;
}

#emailTab .email-btn {
  color: #374151 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
}

#emailTab .email-btn:hover {
  background: #f9fafb !important;
  border-color: #9ca3af !important;
}

#emailTab .email-btn.primary {
  background: #3b82f6 !important;
  color: white !important;
  border-color: #3b82f6 !important;
}

#emailTab .email-btn.primary:hover {
  background: #2563eb !important;
  border-color: #2563eb !important;
}

/* Override any existing email-actions styles */
#emailTab .email-actions {
  display: none !important;
}

/* Fix Email Editor Alignment and Spacing */
#emailTab .email-main-content {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: none !important;
}

#emailTab .email-editor-wrapper {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: none !important;
}

#emailTab .email-editor {
  padding: 0 20px !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

#emailTab .editor-section {
  margin-bottom: 20px !important;
  width: 100% !important;
}

#emailTab .editor-label {
  display: block !important;
  margin-bottom: 8px !important;
  font-weight: 600 !important;
  color: #374151 !important;
  font-size: 14px !important;
}

#emailTab .editor-input {
  width: 100% !important;
  padding: 12px !important;
  border: 1px solid #d1d5db !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  box-sizing: border-box !important;
}

/* DELETED - duplicate rule moved to end of file */

#emailTab .rich-editor-container {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

#emailTab .formatting-toolbar {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  padding: 12px !important;
  border: 1px solid #d1d5db !important;
  border-bottom: none !important;
  border-radius: 6px 6px 0 0 !important;
  background: #f9fafb !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

#emailTab .toolbar-group {
  display: flex !important;
  gap: 4px !important;
  align-items: center !important;
}

#emailTab .format-select,
#emailTab .format-btn {
  padding: 6px 8px !important;
  border: 1px solid #d1d5db !important;
  border-radius: 4px !important;
  background: white !important;
  font-size: 12px !important;
  cursor: pointer !important;
  min-width: auto !important;
}

#emailTab .format-btn:hover {
  background: #f3f4f6 !important;
}

#emailTab .rich-editor {
  min-height: 300px !important;
  padding: 16px !important;
  border: 1px solid #d1d5db !important;
  border-radius: 0 0 6px 6px !important;
  background: white !important;
  width: 100% !important;
  box-sizing: border-box !important;
  font-family: inherit !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

/* Professional Email Builder Layout */
#emailTab .email-builder-layout {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
  width: 100% !important;
}

#emailTab .email-setup-panel,
#emailTab .email-content-panel,
#emailTab .email-preview-panel {
  background: white !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  padding: 24px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

#emailTab .email-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 20px !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid #e5e7eb !important;
}

#emailTab .email-header h3 {
  margin: 0 !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: #1f2937 !important;
}

#emailTab .content-actions,
#emailTab .preview-actions {
  display: flex !important;
  gap: 8px !important;
}

#emailTab .content-btn,
#emailTab .preview-btn {
  padding: 6px 12px !important;
  border: 1px solid #d1d5db !important;
  border-radius: 4px !important;
  background: white !important;
  color: #374151 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

#emailTab .content-btn:hover,
#emailTab .preview-btn:hover {
  background: #f9fafb !important;
  border-color: #9ca3af !important;
}

#emailTab .preview-btn.active {
  background: #3b82f6 !important;
  color: white !important;
  border-color: #3b82f6 !important;
}

/* DELETED - duplicate rule moved to end of file */

#emailTab .field-row {
  display: flex !important;
  gap: 16px !important;
  align-items: flex-start !important;
}

#emailTab .field-group {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  margin: 0 !important;
  padding: 0 !important;
}

#emailTab .field-group.full-width {
  width: 100% !important;
}

#emailTab .field-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #374151 !important;
  margin-bottom: 2px !important;
}

/* DELETED - duplicate rule, keeping later occurrence */

#emailTab .field-input:focus {
  outline: none !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

#emailTab .field-input[readonly] {
  background: #f9fafb !important;
  color: #6b7280 !important;
}

/* DELETED - duplicate rule, keeping final occurrence at line 9026 with font-size: 10px and padding: 4px */

/* Email Preview Styling */
#emailTab .email-preview-container {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  padding: 20px !important;
  min-height: 400px !important;
}

#emailTab .preview-email {
  background: white !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 6px !important;
  max-width: 600px !important;
  margin: 0 auto !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05) !important;
}

#emailTab .preview-header {
  padding: 20px !important;
  border-bottom: 1px solid #e5e7eb !important;
}

#emailTab .preview-meta {
  margin-bottom: 12px !important;
}

#emailTab .preview-from,
#emailTab .preview-to {
  font-size: 12px !important;
  color: #6b7280 !important;
  margin-bottom: 4px !important;
}

#emailTab .preview-subject {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: #1f2937 !important;
  margin: 0 !important;
}

#emailTab .preview-content {
  padding: 20px !important;
}

#emailTab .preview-body {
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: #374151 !important;
}

#emailTab .preview-footer {
  border-top: 1px solid #e5e7eb !important;
  background: #f9fafb !important;
}

/* Collapsible Email Sidebar */
#emailTab .email-sidebar {
  transition: width 0.3s ease !important;
  overflow: hidden !important;
}

#emailTab .email-sidebar.collapsed {
  width: 60px !important;
}

#emailTab .email-sidebar.collapsed .sidebar-tabs,
#emailTab .email-sidebar.collapsed .sidebar-tab-content,
#emailTab .email-sidebar.collapsed .sidebar-section {
  display: none !important;
}

#emailTab .sidebar-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 16px !important;
  border-bottom: 1px solid #e5e7eb !important;
}

#emailTab .sidebar-toggle {
  background: none !important;
  border: none !important;
  padding: 8px !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  color: #6b7280 !important;
  transition: all 0.2s ease !important;
}

#emailTab .sidebar-toggle:hover {
  background: #f3f4f6 !important;
  color: #374151 !important;
}

#emailTab .sidebar-toggle svg {
  transition: transform 0.3s ease !important;
}

#emailTab .email-sidebar.collapsed .sidebar-header {
  justify-content: center !important;
  padding: 16px 8px !important;
}

#emailTab .email-sidebar.collapsed .sidebar-toggle {
  margin: 0 !important;
}

/* Email Sidebar Contact Avatars */
#emailTab .contact-item-compact {
  display: flex !important;
  align-items: center !important;
  padding: 12px 16px !important;
  border-bottom: 1px solid #f3f4f6 !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease !important;
}

#emailTab .contact-item-compact:hover {
  background: #f9fafb !important;
}

#emailTab .contact-item-compact .contact-avatar {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  color: white !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-right: 12px !important;
  flex-shrink: 0 !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

#emailTab .contact-info-compact {
  flex: 1 !important;
  min-width: 0 !important;
}

#emailTab .contact-name-compact {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #1f2937 !important;
  margin-bottom: 2px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#emailTab .contact-email-compact {
  font-size: 12px !important;
  color: #6b7280 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#emailTab .empty-state {
  text-align: center !important;
  color: #6b7280 !important;
  font-style: italic !important;
  padding: 20px !important;
}

/* ===== EMAIL BUILDER FONT SYSTEM ===== */
/* Isolated font system for email builder to prevent conflicts */

.email-builder-font {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  color: #374151 !important;
  font-weight: 400 !important;
}

.email-builder-font-small {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
  color: #6b7280 !important;
  font-weight: 400 !important;
}

.email-builder-font-medium {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
  color: #111827 !important;
  font-weight: 500 !important;
}

.email-builder-font-large {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 18px !important;
  line-height: 1.3 !important;
  color: #111827 !important;
  font-weight: 600 !important;
}

.email-builder-font-heading {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 20px !important;
  line-height: 1.2 !important;
  color: #000 !important;
  font-weight: 700 !important;
}

/* Override all email builder content with isolated font system */
.dnd-modal *,
.dnd-modal .email-block,
.dnd-modal .email-block *,
.dnd-modal .property-input,
.dnd-modal .property-label,
.dnd-modal .component-name,
.dnd-modal .component-desc,
.dnd-modal .panel-header,
.dnd-modal .panel-subtitle,
.dnd-modal .canvas-title,
.dnd-modal .placeholder-text,
.dnd-modal .placeholder-hint,
.dnd-modal .no-selection,
.dnd-modal .no-selection p,
.dnd-modal .section-title,
.dnd-modal .category-title {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Force email builder content to use standard sizes */
.dnd-modal .email-block {
  font-size: 14px !important;
  line-height: 1.4 !important;
}

.dnd-modal .email-block h1,
.dnd-modal .email-block h2,
.dnd-modal .email-block h3 {
  font-size: 18px !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;
}

.dnd-modal .email-block p {
  font-size: 14px !important;
  line-height: 1.4 !important;
}

.dnd-modal .email-block .property-price {
  font-size: 20px !important;
  font-weight: 700 !important;
}

.dnd-modal .email-block .property-address {
  font-size: 16px !important;
  font-weight: 600 !important;
}

.dnd-modal .email-block .property-details {
  font-size: 14px !important;
  font-weight: 400 !important;
}

.dnd-modal .email-block button,
.dnd-modal .email-block .btn {
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 10px 20px !important;
}

/* ===== CUSTOM MODAL DIALOGS ===== */

.custom-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 20000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.2s ease;
}

.custom-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
}

.custom-modal-content {
  position: relative;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  max-width: 400px;
  width: 90%;
  animation: scaleIn 0.3s ease;
  border: 1px solid #e5e7eb;
}

.custom-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px 16px 24px;
  border-bottom: 1px solid #e5e7eb;
}

.custom-modal-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #111827;
  font-family: 'Lora', serif;
}

.custom-modal-close {
  width: 32px;
  height: 32px;
  border: none;
  background: #f3f4f6;
  border-radius: 6px;
  font-size: 20px;
  color: #6b7280;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  padding: 0;
  line-height: 1;
}

.custom-modal-close:hover {
  background: #e5e7eb;
  color: #000;
}

.custom-modal-body {
  padding: 20px 24px;
}

.custom-modal-body p {
  margin: 0;
  font-size: 15px;
  color: #374151;
  line-height: 1.5;
}

.custom-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px 20px 24px;
  border-top: 1px solid #e5e7eb;
}

.custom-modal-btn {
  padding: 10px 20px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  min-width: 80px;
}

.custom-modal-btn-secondary {
  background: #fff;
  color: #374151;
  border-color: #d1d5db;
}

.custom-modal-btn-secondary:hover {
  background: #f9fafb;
  border-color: #9ca3af;
}

.custom-modal-btn-primary {
  background: #000;
  color: #fff;
  border-color: #000;
}

.custom-modal-btn-primary:hover {
  background: #1f2937;
  border-color: #1f2937;
}

.custom-modal-btn-primary:focus,
.custom-modal-btn-secondary:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
}

/* ===== DRAG & DROP EMAIL BUILDER STYLES ===== */

/* Modal Styles */
.dnd-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.2s ease;
}

.dnd-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
}

.dnd-modal-content {
  position: relative;
  width: 95vw;
  height: 90vh;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  z-index: 10001;
  animation: scaleIn 0.3s ease;
}

@keyframes scaleIn {
  from {
    transform: scale(0.95);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.dnd-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 30px;
  background: #fff;
  border-bottom: 2px solid #e5e7eb;
}

.dnd-modal-header h2 {
  margin: 0 !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  color: #111827 !important;
}

.dnd-modal-close {
  width: 40px;
  height: 40px;
  border: none;
  background: #f3f4f6;
  border-radius: 8px;
  font-size: 28px;
  color: #6b7280;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  padding: 0;
  line-height: 1;
}

.dnd-modal-close:hover {
  background: #e5e7eb;
  color: #000;
}

/* Mode Selector */
.email-mode-selector {
  background: #fff;
  border-bottom: 2px solid #e5e7eb;
  padding: 15px 20px;
  margin-bottom: 0;
}

.mode-toggle-container {
  display: flex;
  align-items: center;
  gap: 15px;
}

.mode-label {
  font-size: 14px;
  font-weight: 600;
  color: #374151;
}

.mode-toggle {
  display: flex;
  gap: 0;
  background: #f3f4f6;
  border-radius: 8px;
  padding: 4px;
}

.mode-btn {
  padding: 8px 20px;
  border: none;
  background: transparent;
  color: #6b7280;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.mode-btn:hover {
  color: #374151;
}

.mode-btn.active {
  background: #fff;
  color: #000;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Drag & Drop Builder Container */
.dnd-builder-container {
  display: grid;
  grid-template-columns: 280px 1fr 320px;
  gap: 0;
  flex: 1;
  background: #fff;
  overflow: hidden;
}

/* Left Panel - Components Palette */
.dnd-components-panel {
  background: #fff;
  border-right: 1px solid #e5e7eb;
  overflow-y: auto;
  height: 100%;
}

.panel-header {
  padding: 15px 20px !important;
  border-bottom: 1px solid #e5e7eb !important;
  background: #fff !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
}

.panel-header h3 {
  margin: 0 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #111827 !important;
}

.panel-subtitle {
  margin: 5px 0 0 0 !important;
  font-size: 12px !important;
  color: #6b7280 !important;
}

.components-search {
  padding: 12px 20px !important;
  background: #f9fafb !important;
  border-bottom: 1px solid #e5e7eb !important;
}

.components-search input {
  width: 100% !important;
  padding: 8px 12px !important;
  border: 1px solid #d1d5db !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  outline: none !important;
  transition: border-color 0.2s !important;
}

.components-search input:focus {
  border-color: #000;
}

.components-tabs {
  display: flex;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}

.comp-tab {
  flex: 1;
  padding: 12px;
  border: none;
  background: transparent;
  color: #6b7280;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
}

.comp-tab:hover {
  color: #374151;
}

.comp-tab.active {
  color: #000;
  border-bottom-color: #000;
  background: #fff;
}

.components-list {
  padding: 12px !important;
}

.component-category {
  margin-bottom: 20px !important;
}

.category-title {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #6b7280 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 8px !important;
  padding-left: 5px !important;
}

.component-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px !important;
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 6px !important;
  margin-bottom: 6px !important;
  cursor: grab !important;
  transition: all 0.2s !important;
}

.component-item:hover {
  border-color: #000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

.component-item:active {
  cursor: grabbing;
}

.component-icon {
  width: 28px !important;
  height: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #f3f4f6 !important;
  border-radius: 4px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #374151 !important;
  flex-shrink: 0 !important;
}

.component-info {
  flex: 1;
}

.component-name {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #111827 !important;
  margin-bottom: 2px !important;
}

.component-desc {
  font-size: 11px !important;
  color: #6b7280 !important;
}

/* Template Items */
.template-item {
  margin-bottom: 15px;
  cursor: pointer;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  transition: all 0.2s;
}

.template-item:hover {
  border-color: #000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.template-preview {
  width: 100%;
  height: 140px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  position: relative;
}

.template-preview::after {
  content: '◫';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 48px;
  color: rgba(255, 255, 255, 0.5);
}

.template-name {
  padding: 10px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #111827 !important;
  background: #fff !important;
}

/* Center Panel - Canvas */
.dnd-canvas-container {
  background: #f3f4f6;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.canvas-header {
  background: #fff;
  padding: 15px 20px;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.canvas-title {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #111827 !important;
}

.canvas-actions {
  display: flex;
  gap: 8px;
}

.canvas-btn {
  padding: 8px 16px;
  border: 1px solid #d1d5db;
  background: #fff;
  color: #374151;
  font-size: 13px;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.canvas-btn:hover {
  background: #f9fafb;
  border-color: #9ca3af;
}

.canvas-btn.primary {
  background: #000;
  color: #fff;
  border-color: #000;
}

.canvas-btn.primary:hover {
  background: #1f2937;
}

.canvas-viewport {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.canvas-device-selector {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
}

.device-btn {
  padding: 8px 16px;
  border: 1px solid #d1d5db;
  background: #fff;
  color: #6b7280;
  font-size: 13px;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
}

.device-btn:hover {
  border-color: #9ca3af;
}

.device-btn.active {
  background: #000;
  color: #fff;
  border-color: #000;
}

.email-canvas-wrapper {
  display: flex;
  justify-content: center;
  min-height: 500px;
  transition: all 0.3s;
}

.email-canvas-wrapper.mobile-view {
  max-width: 400px;
  margin: 0 auto;
}

.email-canvas {
  width: 100%;
  max-width: 600px;
  min-height: 400px;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  position: relative;
  overflow: hidden;
}

.canvas-placeholder {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 80%;
  color: #9ca3af;
}

.placeholder-icon {
  font-size: 32px !important;
  margin-bottom: 10px !important;
  opacity: 0.5 !important;
}

.placeholder-text {
  font-size: 14px !important;
  font-weight: 500 !important;
  margin-bottom: 6px !important;
}

.placeholder-hint {
  font-size: 12px !important;
  color: #d1d5db !important;
}

/* Email Block Styles */
.email-block {
  position: relative;
  padding: 15px;
  border: 2px solid transparent;
  transition: all 0.2s;
  cursor: pointer;
  min-height: 60px;
}

.email-block:hover {
  border-color: #d1d5db;
  background: #f9fafb;
}

.email-block.selected {
  border-color: #000;
  background: #fff;
}

.email-block.drag-over {
  border-color: #3b82f6;
  border-style: dashed;
  background: #eff6ff;
}

.block-controls {
  position: absolute;
  top: 5px;
  right: 5px;
  display: none;
  gap: 5px;
  z-index: 10;
}

.email-block:hover .block-controls,
.email-block.selected .block-controls {
  display: flex;
}

.block-control-btn {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  color: #6b7280;
  transition: all 0.2s;
}

.block-control-btn:hover {
  background: #f3f4f6;
  color: #000;
}

.block-control-btn.delete:hover {
  background: #fef2f2;
  color: #dc2626;
  border-color: #dc2626;
}

/* Right Panel - Properties */
.dnd-properties-panel {
  background: #fff;
  border-left: 1px solid #e5e7eb;
  overflow-y: auto;
  height: 100%;
}

.properties-content {
  padding: 15px !important;
  border-bottom: 1px solid #e5e7eb !important;
}

.no-selection {
  text-align: center !important;
  color: #9ca3af !important;
  padding: 20px !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
}

.no-selection p {
  font-size: 13px !important;
  margin: 0 !important;
  color: #9ca3af !important;
}

.no-selection-icon {
  font-size: 32px !important;
  margin-bottom: 10px !important;
  opacity: 0.3 !important;
}

.properties-section {
  padding: 15px !important;
  border-bottom: 1px solid #e5e7eb !important;
}

.section-title {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #111827 !important;
  margin-bottom: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.property-group {
  margin-bottom: 15px;
}

.property-label {
  display: block !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #374151 !important;
  margin-bottom: 5px !important;
}

.property-input {
  width: 100% !important;
  padding: 8px 12px !important;
  border: 1px solid #d1d5db !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  outline: none !important;
  transition: border-color 0.2s !important;
  box-sizing: border-box !important;
}

.property-input:focus {
  border-color: #000 !important;
}

.property-input[type="color"] {
  height: 40px !important;
  cursor: pointer !important;
}

/* Specific styling for select elements */
.property-input select,
select.property-input {
  font-size: 14px !important;
  font-family: inherit !important;
  background: #fff !important;
  color: #374151 !important;
}

/* Override any inherited font sizes for select options */
.property-input option {
  font-size: 14px !important;
  font-family: inherit !important;
}

.property-textarea {
  width: 100%;
  min-height: 100px;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  resize: vertical;
  transition: border-color 0.2s;
}

.property-textarea:focus {
  border-color: #000;
}

.property-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.property-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.property-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

/* Responsive Design */
@media (max-width: 1400px) {
  .dnd-builder-container {
    grid-template-columns: 250px 1fr 280px;
  }
}

@media (max-width: 1200px) {
  .dnd-builder-container {
    grid-template-columns: 220px 1fr 260px;
  }
  
  .component-item {
    padding: 10px;
  }
  
  .component-icon {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }
}

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.email-block {
  animation: fadeIn 0.2s ease;
}

/* Drag and Drop States */
.dragging {
  opacity: 0.5;
  transform: scale(0.98);
}

.drop-zone {
  border: 2px dashed #3b82f6;
  background: #eff6ff;
  min-height: 60px;
  margin: 5px 0;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #3b82f6;
  font-size: 13px;
  font-weight: 500;
}

/* Force override any conflicting CSS for drag-drop builder */
.dnd-modal * {
  box-sizing: border-box !important;
}

.dnd-modal .panel-header,
.dnd-modal .panel-subtitle,
.dnd-modal .component-name,
.dnd-modal .component-desc,
.dnd-modal .category-title,
.dnd-modal .canvas-title,
.dnd-modal .placeholder-text,
.dnd-modal .placeholder-hint,
.dnd-modal .section-title,
.dnd-modal .property-label,
.dnd-modal .no-selection,
.dnd-modal .no-selection p {
  font-family: inherit !important;
}
.dnd-components-panel::-webkit-scrollbar,
.dnd-properties-panel::-webkit-scrollbar,
.canvas-viewport::-webkit-scrollbar {
  width: 8px;
}

.dnd-components-panel::-webkit-scrollbar-track,
.dnd-properties-panel::-webkit-scrollbar-track,
.canvas-viewport::-webkit-scrollbar-track {
  background: #f3f4f6;
}

.dnd-components-panel::-webkit-scrollbar-thumb,
.dnd-properties-panel::-webkit-scrollbar-thumb,
.canvas-viewport::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 4px;
}

.dnd-components-panel::-webkit-scrollbar-thumb:hover,
.dnd-properties-panel::-webkit-scrollbar-thumb:hover,
.canvas-viewport::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}


/* ULTRA ZERO PADDING EMAIL BUILDER */
.field-group {
  flex: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.field-row {
  display: flex !important;
  gap: 0 !important;
  align-items: flex-start !important;
  margin: 0 !important;
  padding: 0 !important;
  border-bottom: none !important;
}

.field-input {
  width: 100% !important;
  padding: 2px 4px !important;
  border: 1px solid #d1d5db !important;
  border-radius: 2px !important;
  font-size: 11px !important;
  background: #fff !important;
  transition: border-color 0.2s !important;
}

.field-label {
  font-size: 10px !important;
  font-weight: 600 !important;
  color: #374151 !important;
  margin-bottom: 0 !important;
  display: block !important;
}

.email-fields {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.email-setup-panel {
  background: #fff !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border-bottom: none !important;
}

.email-content-panel {
  padding: 0 !important;
  margin: 0 !important;
  background: #fff !important;
  border-top: none !important;
}

.email-content-panel .email-header {
  padding: 0 !important;
  margin: 0 !important;
  border-bottom: none !important;
}

#emailTab .email-toolbar {
  padding: 0 !important;
  margin: 0 !important;
  background: #fff !important;
  border-bottom: none !important;
}

/* OVERRIDE ALL EMAIL BUILDER PADDING WITH HIGHER SPECIFICITY */
#emailTab .field-group {
  flex: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
}

#emailTab .field-row {
  display: flex !important;
  gap: 0 !important;
  align-items: flex-start !important;
  margin: 0 !important;
  padding: 0 !important;
  border-bottom: none !important;
}

#emailTab .field-input {
  width: 100% !important;
  padding: 2px 4px !important;
  border: 1px solid #d1d5db !important;
  border-radius: 2px !important;
  font-size: 11px !important;
  background: #fff !important;
  transition: border-color 0.2s !important;
}

#emailTab .field-label {
  font-size: 10px !important;
  font-weight: 600 !important;
  color: #374151 !important;
  margin-bottom: 0 !important;
  display: block !important;
}

#emailTab .email-fields {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

#emailTab .email-setup-panel {
  background: #fff !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border-bottom: none !important;
}

#emailTab .email-content-panel {
  padding: 0 !important;
  margin: 0 !important;
  background: #fff !important;
  border-top: none !important;
}

#emailTab .email-content-panel .email-header {
  padding: 0 !important;
  margin: 0 !important;
  border-bottom: none !important;
}

#emailTab .email-toolbar {
  padding: 0 !important;
  margin: 0 !important;
  background: #fff !important;
  border-bottom: none !important;
}

/* NUCLEAR OPTION: FORCE ZERO PADDING WITH MAXIMUM SPECIFICITY */
#emailTab .email-main-content * {
  padding: 0 !important;
  margin: 0 !important;
}

#emailTab .email-setup-panel * {
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}

#emailTab .email-fields * {
  padding: 0 !important;
  margin: 0 !important;
  gap: 0 !important;
}

#emailTab .field-row * {
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}

#emailTab .field-group * {
  padding: 0 !important;
  margin: 0 !important;
}

#emailTab .field-input {
  padding: 1px 2px !important;
  margin: 0 !important;
  border: 1px solid #d1d5db !important;
  border-radius: 1px !important;
  font-size: 10px !important;
}

#emailTab .field-label {
  padding: 0 !important;
  margin: 0 !important;
  font-size: 9px !important;
}

#emailTab .email-content-panel * {
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}

#emailTab .email-toolbar * {
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}

/* Hide sidebar toggle completely */
.sidebar-toggle {
  display: none !important;
}

/* Fix drag-drop highlighting with maximum specificity */
#dragDropEmailBuilderModal .dynamic-drop-zone {
  background: rgba(0, 0, 0, 0.2) !important;
  border: 3px dashed #000 !important;
  border-radius: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
  color: #000 !important;
  font-weight: bold !important;
  transition: all 0.2s !important;
  opacity: 1 !important;
  pointer-events: none !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
  z-index: 9999 !important;
}

#dragDropEmailBuilderModal .dynamic-drop-zone .drop-zone-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  padding: 1px 0 !important;
  height: 100% !important;
  width: 100% !important;
}

#dragDropEmailBuilderModal .dynamic-drop-zone .drop-zone-icon {
  font-size: 4px !important;
  color: #000 !important;
  font-weight: bold !important;
}

#dragDropEmailBuilderModal .dynamic-drop-zone .drop-zone-text {
  font-size: 4px !important;
  color: #000 !important;
  font-weight: bold !important;
  margin: 0 !important;
  text-align: center !important;
  line-height: 1 !important;
}

/* BALANCED PROPORTIONAL LAYOUT - Fix nuclear CSS */
#emailTab .email-main-content * {
  padding: 0 !important;
  margin: 0 !important;
}

#emailTab .email-setup-panel {
  padding: 8px 0 !important;
  margin: 0 !important;
  border-bottom: 1px solid #e5e7eb !important;
}

#emailTab .email-fields {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
}

#emailTab .field-row {
  display: flex !important;
  gap: 8px !important;
  align-items: flex-start !important;
  margin: 0 !important;
  padding: 0 !important;
  border-bottom: none !important;
}

#emailTab .field-group {
  flex: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* DELETED - duplicate rule, using final value */

#emailTab .field-label {
  padding: 0 !important;
  margin: 0 0 4px 0 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #374151 !important;
}

#emailTab .email-content-panel {
  padding: 8px 0 !important;
  margin: 0 !important;
  background: #fff !important;
  border-top: 1px solid #e5e7eb !important;
}

#emailTab .email-content-panel .email-header {
  padding: 0 0 8px 0 !important;
  margin: 0 !important;
  border-bottom: 1px solid #e5e7eb !important;
}

#emailTab .email-content-panel .email-header h3 {
  font-size: 14px !important;
  margin: 0 !important;
  padding: 0 !important;
}

#emailTab .email-toolbar {
  padding: 8px 0 !important;
  margin: 0 !important;
  background: #fff !important;
  border-bottom: 1px solid #e5e7eb !important;
}

#emailTab .email-btn {
  padding: 6px 12px !important;
  margin: 0 4px !important;
  font-size: 12px !important;
}

/* Fix sidebar buttons - make them proportional */
.email-sidebar .sidebar-tabs {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  margin-bottom: 12px !important;
}

.email-sidebar .sidebar-tab {
  padding: 8px 12px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border-radius: 6px !important;
  border: 1px solid #e5e7eb !important;
  background: #fff !important;
  color: #374151 !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
}

.email-sidebar .sidebar-tab.active {
  background: #000 !important;
  color: #fff !important;
  border-color: #000 !important;
}

.email-sidebar .sidebar-tab:hover:not(.active) {
  background: #f9fafb !important;
  border-color: #d1d5db !important;
}

/* Fix contact list proportions */
.email-sidebar .contact-item {
  padding: 8px 12px !important;
  margin-bottom: 4px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
}

.email-sidebar .contact-item:hover {
  background: #f9fafb !important;
}

.email-sidebar .contact-name {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #111827 !important;
  margin-bottom: 2px !important;
}

.email-sidebar .contact-email {
  font-size: 11px !important;
  color: #6b7280 !important;
}

/* Fix recipient list proportions */
/* DELETED - duplicate rule, keeping final occurrence at line 9074 */

/* DELETED - duplicate rule, keeping final occurrence with font-size: 10px */

/* DELETED - duplicate rule, keeping final occurrence at line 9046 */

/* DELETED - duplicate rule, keeping final occurrence */

/* DELETED - duplicate rule, keeping final occurrence */

#emailTab .recipient-item .remove-recipient {
  font-size: 12px !important;
  color: #ef4444 !important;
  cursor: pointer !important;
  margin-left: auto !important;
}

/* Fix drag-drop text size */
#dragDropEmailBuilderModal .dynamic-drop-zone .drop-zone-text {
  font-size: 10px !important;
  color: #000 !important;
  font-weight: 600 !important;
  margin: 0 !important;
  text-align: center !important;
  line-height: 1.2 !important;
}

#dragDropEmailBuilderModal .dynamic-drop-zone .drop-zone-icon {
  font-size: 12px !important;
  color: #000 !important;
  font-weight: bold !important;
}

/* Fix sidebar buttons - make them smaller and horizontal */
.email-sidebar .sidebar-tabs {
  display: flex !important;
  flex-direction: row !important;
  gap: 4px !important;
  margin-bottom: 12px !important;
  flex-wrap: wrap !important;
}

.email-sidebar .sidebar-tab {
  padding: 6px 10px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  border-radius: 4px !important;
  border: 1px solid #e5e7eb !important;
  background: #fff !important;
  color: #374151 !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  flex: 1 !important;
  text-align: center !important;
  min-width: 0 !important;
}

.email-sidebar .sidebar-tab.active {
  background: #000 !important;
  color: #fff !important;
  border-color: #000 !important;
}

.email-sidebar .sidebar-tab:hover:not(.active) {
  background: #f9fafb !important;
  border-color: #d1d5db !important;
}

/* Fix email builder buttons - make them look like proper buttons */
#emailTab .email-toolbar-left {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

#emailTab .email-toolbar-right {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

#emailTab .email-btn {
  padding: 8px 16px !important;
  margin: 0 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  border: 1px solid #d1d5db !important;
  border-radius: 6px !important;
  background: #fff !important;
  color: #374151 !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 80px !important;
  justify-content: center !important;
}

#emailTab .email-btn:hover {
  background: #f9fafb !important;
  border-color: #9ca3af !important;
}

#emailTab .email-btn.primary {
  background: #000 !important;
  color: #fff !important;
  border-color: #000 !important;
}

#emailTab .email-btn.primary:hover {
  background: #374151 !important;
  border-color: #374151 !important;
}

/* Fix mode selector buttons */
#emailTab .email-mode-selector {
  margin-right: 16px !important;
}

#emailTab .mode-toggle {
  display: flex !important;
  gap: 2px !important;
  background: #f3f4f6 !important;
  border-radius: 6px !important;
  padding: 2px !important;
}

#emailTab .mode-btn {
  padding: 6px 12px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  border: none !important;
  border-radius: 4px !important;
  background: transparent !important;
  color: #6b7280 !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  min-width: 80px !important;
  text-align: center !important;
}

#emailTab .mode-btn.active {
  background: #fff !important;
  color: #111827 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

#emailTab .mode-btn:hover:not(.active) {
  background: rgba(255, 255, 255, 0.5) !important;
  color: #374151 !important;
}

/* NUCLEAR FIX: Remove ALL padding and fix recipient fonts */
#emailTab .email-main-content {
  padding: 0 !important;
  margin: 0 !important;
}

#emailTab .email-setup-panel {
  padding: 0 !important;
  margin: 0 !important;
  border-bottom: none !important;
}

#emailTab .email-fields {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

#emailTab .field-row {
  display: flex !important;
  gap: 0 !important;
  align-items: flex-start !important;
  margin: 0 !important;
  padding: 0 !important;
  border-bottom: none !important;
}

#emailTab .field-group {
  flex: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Use this rule - final occurrence */
#emailTab .field-input {
  padding: 4px 6px !important;
  margin: 0 !important;
  border: 1px solid #d1d5db !important;
  border-radius: 3px !important;
  font-size: 12px !important;
  background: #fff !important;
}

#emailTab .field-label {
  padding: 0 !important;
  margin: 0 0 2px 0 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #374151 !important;
}

#emailTab .email-content-panel {
  padding: 0 !important;
  margin: 0 !important;
  background: #fff !important;
  border-top: none !important;
}

#emailTab .email-content-panel .email-header {
  padding: 0 !important;
  margin: 0 !important;
  border-bottom: none !important;
}

#emailTab .email-toolbar {
  padding: 0 !important;
  margin: 0 !important;
  background: #fff !important;
  border-bottom: none !important;
}

/* Fix recipient fonts - make them normal size */
#emailTab .recipient-item {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 2px 4px !important;
  background: #f3f4f6 !important;
  border-radius: 3px !important;
  margin-bottom: 2px !important;
}

#emailTab .recipient-item .contact-name {
  font-size: 11px !important;
  font-weight: 500 !important;
  color: #111827 !important;
}

#emailTab .recipient-item .contact-email {
  font-size: 10px !important;
  color: #6b7280 !important;
}

#emailTab .recipient-item .remove-recipient {
  font-size: 10px !important;
  color: #ef4444 !important;
  cursor: pointer !important;
  margin-left: auto !important;
}

#emailTab .recipient-list {
  min-height: 30px !important;
  padding: 2px !important;
  border: 1px solid #d1d5db !important;
  border-radius: 3px !important;
  background: #f9fafb !important;
  max-height: 80px !important;
  overflow-y: auto !important;
}

#emailTab .no-recipients {
  text-align: center !important;
  color: #6b7280 !important;
  font-style: italic !important;
  padding: 4px !important;
  font-size: 10px !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}

/* Fix dropdown icon - move to top-right and make it a chevron */
#emailTab .field-group {
  position: relative !important;
}

#emailTab .field-group::after {
  content: "⌄" !important;
  position: absolute !important;
  top: 2px !important;
  right: 6px !important;
  font-size: 8px !important;
  color: #6b7280 !important;
  pointer-events: none !important;
  z-index: 10 !important;
}

#emailTab .field-input {
  padding-right: 20px !important;
}

/* Hide any existing dropdown icons */
#emailTab .field-group select,
#emailTab .field-group .dropdown-icon,
#emailTab .field-group .select-arrow {
  display: none !important;
}

/* NUCLEAR OPTION - OVERRIDE ALL GENERIC CONTACT RULES FOR EMAIL TAB */
#emailTab .recipient-item .contact-name,
#emailTab .recipient-item .contact-name *,
#emailTab .recipient-item .contact-name::before,
#emailTab .recipient-item .contact-name::after {
  font-size: 11px !important;
  font-weight: 500 !important;
  color: #111827 !important;
}

#emailTab .recipient-item .contact-email,
#emailTab .recipient-item .contact-email *,
#emailTab .recipient-item .contact-email::before,
#emailTab .recipient-item .contact-email::after {
  font-size: 10px !important;
  color: #6b7280 !important;
}

#emailTab .no-recipients,
#emailTab .no-recipients *,
#emailTab .no-recipients::before,
#emailTab .no-recipients::after {
  text-align: center !important;
  color: #6b7280 !important;
  font-style: italic !important;
  padding: 4px !important;
  font-size: 10px !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}

/* ULTRA SPECIFIC EMAIL RECIPIENT CLASSES - OVERRIDE EVERYTHING */
.email-recipient-item {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 2px 4px !important;
  background: #f3f4f6 !important;
  border-radius: 3px !important;
  margin-bottom: 2px !important;
}

.email-recipient-name {
  font-size: 10px !important;
  font-weight: 500 !important;
  color: #111827 !important;
  line-height: 1.2 !important;
}

.email-recipient-email {
  font-size: 9px !important;
  color: #6b7280 !important;
  line-height: 1.2 !important;
}

.email-recipient-remove {
  font-size: 10px !important;
  color: #ef4444 !important;
  cursor: pointer !important;
  margin-left: auto !important;
  background: none !important;
  border: none !important;
  padding: 2px !important;
}

/* OVERRIDE ANY GENERIC CLASSES THAT MIGHT AFFECT THESE */
.email-recipient-name *,
.email-recipient-name::before,
.email-recipient-name::after,
.email-recipient-email *,
.email-recipient-email::before,
.email-recipient-email::after {
  font-size: inherit !important;
  color: inherit !important;
}

/* STANDARDIZE ALL BUTTONS TO MATCH MAIN NAV BAR */
.email-sidebar .sidebar-tab,
.email-toolbar .email-btn,
.email-toolbar .mode-btn {
  padding: 8px 16px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  border-radius: 6px !important;
  border: 1px solid #e5e7eb !important;
  background: #ffffff !important;
  color: #374151 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  text-align: center !important;
  min-height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 4px !important;
}

.email-sidebar .sidebar-tab.active,
.email-toolbar .email-btn.active {
  background: #000000 !important;
  color: #ffffff !important;
  border-color: #000000 !important;
}

.email-sidebar .sidebar-tab:hover:not(.active),
.email-toolbar .email-btn:hover:not(.active),
.email-toolbar .mode-btn:hover:not(.active) {
  background: #f9fafb !important;
  border-color: #d1d5db !important;
}

/* HIGHLIGHT ENTIRE CONTACT CARD WHEN SELECTED */
.email-sidebar .contact-item.selected {
  background: #fef2f2 !important;
  border: 2px solid #f87171 !important;
  border-radius: 8px !important;
  padding: 8px !important;
  margin: 2px 0 !important;
}

/* COMPLETELY REMOVE DROPDOWN ICON */
#emailTab .field-group::after,
#emailTab .field-group .dropdown-arrow,
#emailTab .field-group select,
#emailTab .field-group .dropdown-icon,
#emailTab .field-group .select-arrow {
  display: none !important;
}

#emailTab .field-input {
  padding-right: 8px !important;
}

/* COMPLETELY REMOVE ALL DROPDOWN ICONS AND ARROWS */
#emailTab .field-group::after,
#emailTab .field-group::before,
#emailTab .field-group .dropdown-arrow,
#emailTab .field-group .dropdown-icon,
#emailTab .field-group .select-arrow,
#emailTab .field-group .chevron,
#emailTab .field-group .arrow,
#emailTab .field-group select,
#emailTab .field-group option,
#emailTab .field-group .field-input::after,
#emailTab .field-group .field-input::before {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  content: none !important;
}

#emailTab .field-input {
  padding-right: 8px !important;
  background-image: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
}

/* Force no gap between CRM sidebar and main content */
.crm-app-wrap .crm-main,
.crm-app-wrap .crm-main .crm-content {
  margin-left: 0 !important;
  padding-left: 0 !important;
}