/* ===========================================
   Dealmelio - Gmail-Style Stylesheet
   FIXED VERSION - Proper layout without breaking .hidden
=========================================== */

/* ===========================================
   🎨 CSS VARIABLES
   (source of truth lives in styles.css)
=========================================== */

/* ===========================================
   🚨 CRITICAL: .hidden MUST ALWAYS WIN
=========================================== */
.hidden,
*.hidden,
div.hidden,
aside.hidden,
section.hidden,
header.hidden,
.calendarPane.hidden,
.pipelinePane.hidden,
.leadsPane.hidden,
.analyticsPane.hidden,
.reportsPane.hidden,
.templatesPane.hidden,
.formsPane.hidden,
.dealDoctorPane.hidden,
#calendarWrap.hidden,
#pipelineWrap.hidden,
#reportsWrap.hidden,
#analyticsWrap.hidden,
#templatesView.hidden,
#dealDoctorWrap.hidden,
#detailPanel.hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ===========================================
   🏗️ BASE LAYOUT
=========================================== */
html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  color-scheme: light;
}

/* App shell: folder pane LEFT, main column RIGHT */
.app-shell {
  display: flex;
  flex-direction: row;
  height: 100vh;
  overflow: hidden;
  background: var(--bg, #f6f8fc);
  padding: 0 0 14px 0;
  gap: 14px;
  box-sizing: border-box;
}

/* ✅ Allow list/detail panes to reach the very bottom of the viewport */
.app-shell{
  padding-bottom: 0 !important;
}

/* Tighten vertical spacing so panes sit closer to the filters row */
.mainColumn{
  gap: 6px !important;
}

/* ===========================================
   📁 FOLDER PANE (Left sidebar)
=========================================== */
/* ═══════════════════════════════════════════════════════════════════
   FOLDER PANE - TEMPORARILY HIDDEN (remove display:none to restore)
   ═══════════════════════════════════════════════════════════════════ */
.folderPane {
  display: none !important;  /* TEMPORARILY HIDDEN - remove this line to show folders again */
  width: 220px;      /* was 240px */
  min-width: 220px;
  max-width: 220px;
  flex-shrink: 0;
  /* display: flex; */  /* Original display value - uncomment when removing hide */
  flex-direction: column;
  background: white;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.folderPaneHead {
  padding: 12px;
  border-bottom: 1px solid var(--border-light);
  background: var(--gray-50);
  flex-shrink: 0;
}

.folderListContent,
#folderList {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

.folderRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: var(--radius-lg);
  cursor: pointer;
  margin-bottom: 2px;
  transition: background 0.15s;
}

.folderRow:hover {
  background: var(--gray-100);
}

.folderRow.active {
  background: var(--primary-50);
  color: var(--primary-700);
}

.folderRow > div:first-child {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.folderCountPill {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: var(--gray-100);
  color: var(--text-secondary);
}

/* ===========================================
   📱 MAIN COLUMN (Right side)
=========================================== */
.mainColumn {
  flex: 1;
  min-width: 0;
  min-height: 0; /* allow flex chain so Deal/pipeline + detail fill viewport */
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
}
/* When AI interpreted row shows, filters grow; list must get remaining height and scroll */
.mainColumn #filtersSection {
  flex-shrink: 0;
}
.mainColumn .mainSplit {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Allow header to break out to edges */
.mainColumn > .app-header {
  overflow: visible;
}

/* ===========================================
   🎯 HEADER
=========================================== */
.app-header {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) auto minmax(140px, 1fr);
  gap: 12px;
  align-items: center;
  background: white;
  border: none;
  border-bottom: 1px solid var(--border-light);
  border-radius: 0;
  box-shadow: var(--shadow-sm);
  padding: 10px 16px;
  margin: 0;
  margin-left: -14px;
  margin-right: -14px;
  width: calc(100% + 28px);
  position: relative;
  z-index: 1;
}

.app-header.compactHeader {
  padding: 9px 14px;
  gap: 10px;
}

.header-left {
  width: auto;
  min-width: 140px;
  flex-shrink: 0;
}

.app-brand {
  display: flex;
  align-items: center;
  min-height: 40px;
}

.app-brand-logo {
  display: block;
  max-width: 220px;
  max-height: 44px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.app-brand-logo.hidden {
  display: none;
}

.header-left h1 {
  font-size: 17px;
  font-weight: 700;
  margin: 0;
  margin-left: 10px !important;
  white-space: nowrap;
}

/* ===========================================
   📌 NAVIGATION BAR - Two Groups Layout
=========================================== */
.header-nav {
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  gap: 2px;
  padding: 3px;
  background: var(--gray-100);
  border-radius: var(--radius-lg);
  margin: 0;
  flex-wrap: nowrap;
  overflow: hidden; /* No scroll - must fit */
  justify-self: center;
}


/* Nav Groups */
.nav-group {
  display: flex;
  align-items: center;
  gap: 1px;
}

.nav-group-primary {
  /* Primary tabs stay left - flex-shrink prevents collapsing */
  flex-shrink: 0;
}

.nav-group-utility {
  /* Utility tabs - hidden on mobile */
  margin-left: auto;
}

/* Divider between groups */
.nav-divider {
  width: 1px;
  height: 18px;
  background: var(--border-light);
  margin: 0 4px;
  flex-shrink: 0;
}

/* Menu Button Base Styles */
.menuBtn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 10px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

/* Override border from styles-master.css for header nav buttons */
.header-nav .menuBtn:not(.active) {
  border: none !important;
  box-shadow: none !important;
}

.menuBtn-icon {
  font-size: 15px;
  line-height: 1;
  flex-shrink: 0;
}

/* Ensure Invoices button is always visible */
#menuInvoicesBtn {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.menuBtn-label {
  line-height: 1;
  font-size: 13px;
}

.menuBtn:hover {
  background: var(--gray-200);
  color: var(--gray-900);
}

.menuBtn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.menuBtn.active {
  background: white;
  color: var(--primary-600);
  box-shadow: var(--shadow-sm);
  font-weight: 700;
}

/* Remove border from dropdown buttons unless they have an active child view */
.menuBtn.menuBtn-dropdown:not(.active) {
  box-shadow: none !important;
  border: none !important;
  background: transparent !important;
}

/* Menu Badge */
.menu-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 10px;
  font-weight: 700;
  color: white;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(239, 68, 68, 0.4);
  animation: badgePulse 2s ease-in-out infinite;
}

.menu-badge.hidden {
  display: none;
}

.menu-badge-inline {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: white;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 8px;
  margin-left: auto;
}

.menu-badge-inline.hidden {
  display: none;
}

@keyframes badgePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* Dropdown chevron */
.dropdown-chevron {
  margin-left: 2px;
  transition: transform 0.2s ease;
}

.menuBtn-dropdown[aria-expanded="true"] .dropdown-chevron {
  transform: rotate(180deg);
}

/* ===========================================
   📌 MOBILE "MORE" DROPDOWN
=========================================== */
.nav-more-dropdown {
  display: none; /* Hidden on desktop */
  position: relative;
  margin-left: auto;
}

.menuBtn-more {
  padding: 8px 10px;
}

.nav-more-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 180px;
  background: white;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all 0.2s ease;
}

.nav-more-menu.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-more-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease;
}

.nav-more-item:hover {
  background: var(--gray-100);
}

.nav-more-item:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

.nav-more-item.active {
  background: var(--primary-50);
  color: var(--primary-600);
  font-weight: 600;
}

.nav-more-icon {
  font-size: 16px;
  width: 20px;
  text-align: center;
}

.nav-more-divider {
  height: 1px;
  background: var(--border-light);
  margin: 6px 0;
}

/* ===========================================
   📌 HEADER USER AREA
=========================================== */
.header-user-area {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 0;
  justify-content: flex-end;
  min-width: 140px;
}

.theme-select-label {
  font-size: 12px;
  color: var(--text-secondary);
  margin-right: 2px;
}

.theme-select {
  height: 30px;
  border: 1px solid var(--border-light);
  background: var(--surface);
  color: var(--text-primary);
  border-radius: var(--radius-md);
  padding: 0 8px;
  font-size: 12px;
  font-weight: 600;
}

.theme-select:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.header-icon-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.15s ease;
}

.header-icon-btn:hover:not(:disabled) {
  background: var(--gray-200);
  color: var(--gray-900);
}

.header-icon-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.header-icon-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.header-notification-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: 10px;
  font-weight: 700;
  color: white;
  background: #ef4444;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-notification-badge.hidden {
  display: none;
}

/* User Avatar */
.header-user-menu {
  position: relative;
}

.header-avatar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 50%;
  transition: all 0.15s ease;
}

.header-avatar-btn:hover {
  background: var(--gray-200);
}

.header-avatar-btn:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
}

.header-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-600) 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

/* User Dropdown Menu */
.header-user-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  background: white;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all 0.2s ease;
}

.header-user-dropdown.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.user-menu-header {
  padding: 12px;
}

.user-menu-email {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  word-break: break-all;
}

.user-menu-divider {
  height: 1px;
  background: var(--border-light);
  margin: 4px 0;
}

.user-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease;
}

.user-menu-item:hover {
  background: var(--gray-100);
}

.user-menu-item:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

.user-menu-icon {
  font-size: 16px;
}

/* ===========================================
   📌 RESPONSIVE - Mobile Navigation
=========================================== */
/* Improved responsive behavior for crowded headers */
@media (max-width: 1600px) {
  .header-nav {
    gap: 2px;
    padding: 3px;
    margin: 0 6px;
  }
  
  .menuBtn {
    padding: 6px 8px;
    gap: 4px;
  }
  
  .menuBtn-label {
    font-size: 12px;
  }
  
  .menuBtn-icon {
    font-size: 14px;
  }
  
  .nav-divider {
    margin: 0 3px;
  }
}

@media (max-width: 1400px) {
  .header-left {
    min-width: 120px;
  }
  
  .header-left h1 {
    font-size: 16px;
  }
  
  .menuBtn {
    padding: 6px 7px;
    gap: 3px;
  }
  
  .menuBtn-label {
    font-size: 11.5px;
  }
}

@media (max-width: 1200px) {
  .header-left {
    min-width: 110px;
  }
  
  .header-left h1 {
    font-size: 15px;
    margin-left: 8px !important;
  }
  
  .menuBtn {
    padding: 6px 6px;
  }
  
  .menuBtn-label {
    font-size: 11px;
  }
  
  .menuBtn-icon {
    font-size: 13px;
  }
}

@media (max-width: 900px) {
  .header-nav {
    margin: 0 8px;
    gap: 2px;
  }
  
  /* Hide utility group and divider on mobile */
  .nav-group-utility,
  .nav-divider {
    display: none;
  }
  
  /* Show "More" dropdown on mobile */
  .nav-more-dropdown {
    display: block;
  }
  
  /* Hide labels on smaller screens, show only icons */
  .menuBtn-label {
    display: none;
  }
  
  .menuBtn {
    padding: 8px 10px;
  }
  
  .menuBtn-icon {
    font-size: 18px;
  }
}

@media (max-width: 600px) {
  .header-nav {
    padding: 2px;
    margin: 0 4px;
  }
  
  .menuBtn {
    padding: 6px 8px;
  }
  
  .menuBtn-icon {
    font-size: 16px;
  }
  
  .header-icon-btn {
    width: 32px;
    height: 32px;
  }
  
  .header-avatar {
    width: 28px;
    height: 28px;
    font-size: 11px;
  }
  
  /* ====== MOBILE CONTACT ROW FIXES ====== */
  .row {
    flex-wrap: wrap;
    padding: 12px;
    gap: 8px;
  }
  
  .row-check {
    order: 1;
  }
  
  .row .avatar {
    order: 2;
    width: 42px;
    height: 42px;
    font-size: 16px;
  }
  
  .rowMain {
    order: 3;
    flex: 1 1 calc(100% - 70px);
    min-width: 200px;
  }
  
  .rowName {
    font-size: 16px;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.3;
  }
  
  .rowSub {
    font-size: 14px;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    margin-top: 4px;
    line-height: 1.4;
  }
  
  /* Deal badges/pills on mobile */
  .row > div:last-child {
    order: 4;
    flex: 1 1 100%;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border-light);
  }
  
  .row .pill {
    font-size: 11px;
    padding: 4px 8px;
    white-space: nowrap;
  }
  
  /* Company badge on mobile */
  .row .company-badge {
    font-size: 12px;
    padding: 4px 10px;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Legacy support - hide old nav center if still present */
.header-nav-center {
  display: none;
}

.menuToggle.headerToggle {
  display: none;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}

.header-auth-right {
  position: absolute;
  top: -31%;
  right: 0;
  margin-top: 0;
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* ===========================================
   🔍 FILTERS - Beautiful Modern Design
=========================================== */

/* Main Filter Container — shrink 0 so list gets remaining space when AI row shows */
#filtersSection.filters-modern {
  flex-shrink: 0;
}
.filters-modern {
  background: linear-gradient(135deg, var(--surface-1, #ffffff) 0%, var(--surface-2, #f8fafc) 100%);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  box-shadow: 
    0 1px 3px rgba(0, 0, 0, 0.04),
    0 4px 12px rgba(0, 0, 0, 0.02),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  padding: 16px 20px;
  margin-bottom: 20px;
  transition: all 0.3s ease;
}

.filters-modern:hover {
  box-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.06),
    0 8px 24px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* Main Filter Bar */
.filter-bar-main {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* Search Input Wrapper */
.filter-search-wrap {
  position: relative;
  flex: 1;
  min-width: 280px;
  max-width: 400px;
}

.filter-search-input {
  width: 100%;
  height: 36px;
  padding: 0 88px 0 12px;
  border: 2px solid transparent;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--surface-hover, #f1f5f9) 0%, var(--border-subtle, #e2e8f0) 100%);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  transition: all 0.25s ease;
}

.filter-search-input::placeholder {
  color: var(--text-tertiary);
  font-weight: 400;
}

.filter-search-input:hover {
  background: linear-gradient(135deg, var(--border-subtle, #e2e8f0) 0%, var(--border-strong, #cbd5e1) 100%);
}

.filter-search-input:focus {
  outline: none;
  border-color: var(--primary-500);
  background: var(--surface-1, #ffffff);
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
}

/* ═══════════════════════════════════════════════════════════════════
   FILTER TOGGLE BUTTON - BULLETPROOF FIX (DO NOT MODIFY)
   ═══════════════════════════════════════════════════════════════════ */
.filter-toggle-btn {
  /* Positioning */
  position: absolute !important;
  right: 6px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 10 !important;
  
  /* Fixed dimensions - never changes */
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  max-width: 34px !important;
  max-height: 34px !important;
  
  /* Reset everything */
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  outline: none !important;
  box-sizing: border-box !important;
  
  /* Appearance */
  background-color: transparent !important;
  color: var(--primary-700) !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  
  /* CRITICAL: Flexbox centering with fixed dimensions */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  
  /* Prevent any text/font influence */
  font-size: 0 !important;
  line-height: 0 !important;
  text-align: center !important;
  vertical-align: middle !important;
  
  /* Prevent layout shifts */
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  overflow: visible !important;
  
  /* CRITICAL: Ensure button is always clickable */
  pointer-events: auto !important;
  
  /* Smooth hover - only bg and color, nothing that affects size */
  transition: background-color 0.15s ease, color 0.15s ease !important;
}

.filter-toggle-btn svg {
  /* Fixed SVG size */
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  
  /* Prevent any layout influence */
  display: block !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  pointer-events: none !important;
  
  /* Reset margins */
  margin: 0 !important;
  padding: 0 !important;
  
  /* Ensure visibility */
  opacity: 1 !important;
  visibility: visible !important;
}

.filter-toggle-btn:hover:not(:disabled) {
  background-color: var(--accent-soft, #e0e7ff) !important;
  color: #4338ca !important;
  /* NO transform, NO box-shadow, NO size changes */
}

.filter-toggle-btn:disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
}

.filter-toggle-btn.active {
  background-color: var(--accent, #4f46e5) !important;
  color: #ffffff !important;
}

.filter-toggle-btn.filtered {
  background-color: var(--accent-soft, #dbeafe) !important;
  color: var(--primary-700) !important;
  box-shadow: 0 0 0 2px #93c5fd inset !important;
}

.filter-toggle-btn.filtered .filter-badge {
  background: var(--primary-700) !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 2px var(--accent-soft, #dbeafe) !important;
}

/* Filter Badge */
.filter-badge {
  position: absolute;
  z-index: 20;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: white;
  font-size: 10px;
  font-weight: 700;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(239, 68, 68, 0.4);
}

/* Quick Filter Pills */
.filter-quick-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.filter-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--border-light);
  border-radius: 20px;
  background: white;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.filter-pill:hover {
  background: var(--gray-50);
  border-color: var(--border);
  color: var(--text-primary);
  transform: translateY(-1px);
}

.filter-pill.active {
  background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-600) 100%);
  border-color: var(--primary-600);
  color: white;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.35);
}

.filter-pill-icon {
  font-size: 14px;
}

/* Quick Filter Dropdown (Deals) */
.filter-quick-select {
  display: none;
}

/* Deals dropdown should match Actions dropdown */
#dealsFilterDropdown .actions-dropdown-btn {
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--radius-md);
}

#hasDealFilterMenu.actions-menu {
  min-width: 160px;
  width: max-content;
}

/* Sort Dropdown */
.filter-sort-wrap {
  position: relative;
}

.filter-sort-select {
  appearance: none;
  padding: 6px 32px 6px 10px;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 160px;
}

.filter-sort-select:hover {
  border-color: var(--border);
  background-color: var(--gray-50);
}

.filter-sort-select:focus {
  outline: none;
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* Clear Filter Button */
.filter-clear-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-1, #ffffff);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.filter-clear-btn:hover {
  background: var(--danger-50, #fef2f2);
  border-color: var(--danger-200, #fecaca);
  color: var(--danger-600, #dc2626);
}

/* AI Search interpreted chips – own row so list isn't covered */
.ai-search-chips-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 4px 0;
  width: 100%; /* full width so it takes a full row below search/owner */
  margin-top: 4px;
  flex-basis: 100%; /* force new row in flex-wrap parent */
}
.ai-search-chips-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted, #6b7280);
}
.ai-search-thinking {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  background: var(--primary-50);
  border: 1px solid var(--primary-300);
  color: var(--primary-600);
  min-height: 24px;
}
.ai-search-thinking::after {
  content: " ...";
  display: inline-block;
  width: 1em;
  text-align: left;
  animation: ai-search-dots 1.2s ease-in-out infinite;
}
@keyframes ai-search-dots {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 1; }
}
.ai-search-chips {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.ai-search-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 12px;
  background: var(--primary-50);
  border: 1px solid var(--primary-300);
  color: var(--primary-700);
}
.ai-search-chip button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}
.ai-search-chip button:hover {
  background: var(--primary-100);
}
.ai-search-clear-all {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted, #6b7280);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 6px;
}
.ai-search-clear-all:hover {
  color: var(--danger-600, #dc2626);
}

/* Add New Record Button */
.filter-add-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-600) 100%);
  font-size: 14px;
  font-weight: 600;
  color: white;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.filter-add-btn {
  margin-left: auto;
}

.filter-add-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.filter-add-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

.invoice-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.invoice-header-actions .filter-add-btn {
  margin-left: 0;
}

/* Create Invoice / Create Project buttons — match Add Relationship (soft blue) */
.invoice-board-list #btnNewInvoice,
#btnCreateInvoice,
#btnNewInvoiceEmpty,
#contactScopedCreateInvoice,
#contactScopedCreateProject {
  background: #dbeafe !important;
  border: 1px solid #93c5fd !important;
  color: #1e40af !important;
  box-shadow: 0 1px 3px rgba(59, 130, 246, 0.15) !important;
}
.invoice-board-list #btnNewInvoice:hover,
#btnCreateInvoice:hover,
#btnNewInvoiceEmpty:hover,
#contactScopedCreateInvoice:hover,
#contactScopedCreateProject:hover {
  background: #bfdbfe !important;
  border-color: #60a5fa !important;
  box-shadow: 0 2px 6px rgba(59, 130, 246, 0.25) !important;
}

/* Advanced Filters Panel */
.filter-advanced-panel {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border-light);
  animation: slideDown 0.3s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.filter-advanced-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}

.filter-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.filter-field-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-tertiary);
}

.filter-field-label svg {
  color: var(--text-quaternary);
}

.filter-select {
  appearance: none;
  padding: 10px 32px 10px 12px;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.filter-select:hover {
  border-color: var(--border);
  background-color: var(--gray-50);
}

.filter-select:focus {
  outline: none;
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Applied Filters Row */
.filter-applied-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px dashed var(--border-light);
  flex-wrap: wrap;
}

.filter-applied-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.filter-applied-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  flex: 1;
}

.filter-applied-tag {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: linear-gradient(135deg, var(--primary-50) 0%, var(--primary-100) 100%);
  border: 1px solid var(--primary-200);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--primary-700);
}

.filter-applied-tag-remove {
  width: 14px;
  height: 14px;
  border: none;
  border-radius: 50%;
  background: var(--primary-200);
  color: var(--primary-700);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  line-height: 1;
  transition: all 0.15s ease;
}

.filter-applied-tag-remove:hover {
  background: var(--primary-600);
  color: white;
}

.filter-clear-all-btn {
  padding: 6px 12px;
  border: 1px solid var(--danger-200, #fecaca);
  border-radius: 6px;
  background: var(--danger-50, #fef2f2);
  font-size: 12px;
  font-weight: 600;
  color: var(--danger-600, #dc2626);
  cursor: pointer;
  transition: all 0.2s ease;
}

.filter-clear-all-btn:hover {
  background: var(--danger-100, #fee2e2);
  border-color: var(--danger-300, #fca5a5);
}

/* ===========================================
   🎯 FILTER PANEL V3 - Modern Clean Design
=========================================== */
.filter-panel-v3 {
  width: min(720px, 94vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: var(--surface-1, #ffffff);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 
    0 25px 60px -15px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(0, 0, 0, 0.05);
}

/* Header */
.filter-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  color: white;
}

.filter-panel-title-area {
  display: flex;
  align-items: center;
  gap: 12px;
}

.filter-panel-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
}

.filter-panel-title {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.3px;
}

.filter-panel-subtitle {
  font-size: 12px;
  opacity: 0.6;
  margin: 2px 0 0 0;
}

.filter-panel-close {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.filter-panel-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* ★ SAVED FILTERS SECTION */
.saved-filters-section {
  padding: 12px 20px;
  background: linear-gradient(135deg, #fefce8 0%, #fef9c3 100%);
  border-bottom: 1px solid #fde047;
}

.saved-filters-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.saved-filters-dropdown-wrap {
  position: relative;
}

.saved-filters-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--surface-1, #ffffff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary, #374151);
  cursor: pointer;
  transition: all 0.15s ease;
  min-width: 180px;
}

.saved-filters-trigger:hover {
  background: var(--gray-50, #f9fafb);
  border-color: var(--gray-300, #d1d5db);
}

.saved-filters-trigger.active {
  background: var(--primary-500);
  border-color: var(--primary-600);
  color: white;
}

.saved-filters-chevron {
  margin-left: auto;
  transition: transform 0.2s ease;
}

.saved-filters-trigger.open .saved-filters-chevron {
  transform: rotate(180deg);
}

.saved-filters-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 280px;
  background: var(--surface-1, #ffffff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  z-index: 100;
  display: none;
  overflow: hidden;
}

.saved-filters-dropdown.open {
  display: block;
  animation: dropdownSlide 0.2s ease;
}

@keyframes dropdownSlide {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.saved-filters-list {
  max-height: 280px;
  overflow-y: auto;
  padding: 8px;
}

.saved-filters-empty {
  padding: 20px;
  text-align: center;
  color: var(--text-tertiary, #9ca3af);
  font-size: 13px;
}

.saved-filters-group-label {
  padding: 8px 12px 6px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-tertiary, #9ca3af);
}

.saved-filter-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.saved-filter-item:hover {
  background: var(--gray-100, #f3f4f6);
}

.saved-filter-item.selected {
  background: var(--accent-soft, #eff6ff);
}

.saved-filter-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.saved-filter-icon.private {
  background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%);
}

.saved-filter-icon.public {
  background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
}

.saved-filter-info {
  flex: 1;
  min-width: 0;
}

.saved-filter-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary, #1f2937);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.saved-filter-meta {
  font-size: 11px;
  color: var(--text-tertiary, #9ca3af);
  display: flex;
  align-items: center;
  gap: 6px;
}

.saved-filter-badge {
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
}

.saved-filter-badge.private {
  background: #f3e8ff;
  color: #7c3aed;
}

.saved-filter-badge.public {
  background: #dcfce7;
  color: #16a34a;
}

.saved-filter-actions {
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.saved-filter-item:hover .saved-filter-actions {
  opacity: 1;
}

.saved-filter-action-btn {
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--gray-500, #6b7280);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.saved-filter-action-btn:hover {
  background: var(--border, #e5e7eb);
  color: var(--text-primary, #1f2937);
}

.saved-filter-action-btn.delete:hover {
  background: var(--danger-50, #fef2f2);
  color: var(--danger-600, #dc2626);
}

.saved-filters-divider {
  height: 1px;
  background: var(--border, #e5e7eb);
  margin: 4px 0;
}

.saved-filters-action {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 12px 16px;
  border: none;
  background: transparent;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary, #374151);
  cursor: pointer;
  transition: background 0.15s ease;
  text-align: left;
}

.saved-filters-action:hover {
  background: var(--gray-100, #f3f4f6);
}

.saved-filters-action svg {
  color: var(--gray-500, #6b7280);
}

/* Active Filter Pill */
.saved-filters-active {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 6px 12px;
  background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-600) 100%);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  color: white;
  animation: pillPop 0.2s ease;
}

@keyframes pillPop {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.saved-filter-clear {
  width: 18px;
  height: 18px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}

.saved-filter-clear:hover {
  background: rgba(255, 255, 255, 0.4);
}

/* Owner Toggle - Prominent section */
.filter-owner-toggle {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-bottom: 1px solid var(--border-light);
}

.filter-owner-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}

.filter-owner-buttons {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.filter-owner-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: white;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.filter-owner-btn:hover {
  border-color: var(--primary-300);
  background: var(--primary-50);
  color: var(--primary-700);
}

.filter-owner-btn.active {
  background: var(--primary-600);
  border-color: var(--primary-600);
  color: white;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.filter-owner-btn.active svg {
  stroke: white;
}

/* Quick Filter Chips */
.filter-quick-chips {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 24px;
  background: var(--surface-2, #fafbfc);
  border-bottom: 1px solid var(--border-light);
  overflow-x: auto;
}

.filter-quick-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.filter-quick-list {
  display: flex;
  gap: 8px;
}

.filter-quick-chip {
  padding: 6px 12px;
  border: 1px solid var(--border-light);
  border-radius: 16px;
  background: white;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.filter-quick-chip:hover {
  background: var(--gray-50);
  border-color: var(--border);
}

.filter-quick-chip.active {
  background: var(--primary-100);
  border-color: var(--primary-300);
  color: var(--primary-700);
}

/* Main Body */
.filter-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
}

/* Compact Text Filters */
.filter-section-compact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
}

.filter-row-compact {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.filter-row-compact label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.filter-row-compact input {
  padding: 10px 12px;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  font-size: 13px;
  transition: all 0.15s;
}

.filter-row-compact input:focus {
  outline: none;
  border-color: var(--primary-400);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Section Groups */
.filter-section-group {
  margin-bottom: 20px;
  padding: 16px;
  background: var(--gray-50);
  border-radius: 12px;
  border: 1px solid var(--border-light);
}

.filter-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

.filter-section-icon {
  font-size: 16px;
}

/* Grid Layout */
.filter-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.filter-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.filter-field label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.filter-field select,
.filter-field input {
  padding: 9px 12px;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  font-size: 13px;
  background: white;
  transition: all 0.15s;
}

.filter-field select:focus,
.filter-field input:focus {
  outline: none;
  border-color: var(--primary-400);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Range Inputs */
.filter-range-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.filter-range-to {
  color: var(--text-tertiary);
  font-size: 14px;
}

.filter-money-input,
.filter-percent-input {
  flex: 1;
  display: flex;
  align-items: center;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background: white;
  overflow: hidden;
  transition: all 0.15s;
}

.filter-money-input:focus-within,
.filter-percent-input:focus-within {
  border-color: var(--primary-400);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.filter-money-input span,
.filter-percent-input span {
  padding: 0 10px;
  color: var(--text-tertiary);
  font-size: 13px;
  font-weight: 500;
  background: var(--gray-50);
  border-right: 1px solid var(--border-light);
  height: 100%;
  display: flex;
  align-items: center;
}

.filter-percent-input span {
  border-right: none;
  border-left: 1px solid var(--border-light);
  order: 1;
}

.filter-money-input input,
.filter-percent-input input {
  flex: 1;
  padding: 9px 10px;
  border: none;
  font-size: 13px;
  min-width: 0;
}

.filter-money-input input:focus,
.filter-percent-input input:focus {
  outline: none;
  box-shadow: none;
}

/* Footer */
.filter-panel-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 24px;
  background: white;
  border-top: 1px solid var(--border-light);
}

.filter-footer-actions {
  display: flex;
  gap: 8px;
}

.filter-preview-count {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--gray-100);
  border: 1px solid var(--border-light);
  white-space: nowrap;
}

.filter-btn-reset {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: white;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
}

.filter-btn-reset:hover {
  background: #fef2f2;
  border-color: #fecaca;
  color: #dc2626;
}

.filter-btn-cancel {
  padding: 9px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: white;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
}

.filter-btn-cancel:hover {
  background: var(--gray-50);
}

.filter-btn-apply {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 20px;
  border: none;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-600) 100%);
  font-size: 13px;
  font-weight: 600;
  color: white;
  cursor: pointer;
  transition: all 0.15s;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25);
}

.filter-btn-apply:hover {
  background: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-700) 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.35);
}

/* Responsive */
@media (max-width: 600px) {
  .filter-section-compact,
  .filter-grid-2 {
    grid-template-columns: 1fr;
  }
  
  .filter-owner-toggle {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .filter-owner-buttons {
    width: 100%;
  }
  
  .filter-owner-btn {
    flex: 1;
    justify-content: center;
  }
}

/* ===========================================
   🏷️ FILTER CHIPS SELECTOR - Multi-select with drag reorder
=========================================== */
.filter-chips-section {
  padding: 16px 24px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-bottom: 1px solid var(--border-light);
  position: relative;
}

.filter-chips-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.filter-chips-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.filter-chips-add-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: white;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary-600);
  cursor: pointer;
  transition: all 0.2s ease;
}

.filter-chips-add-btn:hover {
  background: var(--primary-50);
  border-color: var(--primary-300);
  border-style: solid;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
}

/* Selected Chips Container */
.filter-chips-selected {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 44px;
  padding: 8px;
  background: white;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  transition: all 0.2s ease;
}

.filter-chips-selected:empty::after {
  content: '';
}

.filter-chips-selected.drag-over {
  background: var(--primary-50);
  border-color: var(--primary-300);
  border-style: dashed;
}

/* Empty State */
.filter-chips-empty {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  color: var(--text-tertiary);
  font-size: 13px;
}

.filter-chips-empty-icon {
  font-size: 18px;
  opacity: 0.6;
}

/* Individual Chip */
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 6px 8px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  cursor: grab;
  user-select: none;
  transition: all 0.2s ease;
  animation: chipAppear 0.3s ease;
}

@keyframes chipAppear {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.filter-chip:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

.filter-chip:active {
  cursor: grabbing;
}

.filter-chip.dragging {
  opacity: 0.5;
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  z-index: 100;
}

.filter-chip-drag-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--text-tertiary);
  cursor: grab;
  transition: color 0.2s;
}

.filter-chip:hover .filter-chip-drag-handle {
  color: var(--text-secondary);
}

.filter-chip-icon {
  font-size: 14px;
  line-height: 1;
}

.filter-chip-label {
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
}

.filter-chip-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 2px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.filter-chip-remove:hover {
  background: #fee2e2;
  color: #dc2626;
  transform: scale(1.1);
}

/* Chip Color Variants */
.filter-chip[data-color="#ef4444"] { background: #fef2f2; border-color: #fecaca; }
.filter-chip[data-color="#f59e0b"] { background: #fffbeb; border-color: #fed7aa; }
.filter-chip[data-color="#10b981"] { background: #ecfdf5; border-color: #a7f3d0; }
.filter-chip[data-color="#8b5cf6"] { background: #f5f3ff; border-color: #ddd6fe; }
.filter-chip[data-color="#6b7280"] { background: #f9fafb; border-color: #e5e7eb; }
.filter-chip[data-color="#3b82f6"] { background: var(--primary-50); border-color: var(--primary-200); }
.filter-chip[data-color="#ec4899"] { background: #fdf2f8; border-color: #fbcfe8; }
.filter-chip[data-color="#f97316"] { background: #fff7ed; border-color: #fed7aa; }
.filter-chip[data-color="#22c55e"] { background: #f0fdf4; border-color: #bbf7d0; }
.filter-chip[data-color="#eab308"] { background: #fefce8; border-color: #fef08a; }
.filter-chip[data-color="#dc2626"] { background: #fef2f2; border-color: #fecaca; }
.filter-chip[data-color="#9ca3af"] { background: #f9fafb; border-color: #e5e7eb; }

/* Dropdown */
.filter-chips-dropdown {
  position: absolute;
  top: 100%;
  left: 24px;
  right: 24px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  max-height: 400px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: dropdownSlide 0.2s ease;
}

@keyframes dropdownSlide {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.filter-chips-dropdown.hidden {
  display: none;
}

.filter-chips-dropdown-header {
  padding: 12px;
  border-bottom: 1px solid var(--border-light);
  background: #fafafa;
}

.filter-chips-search {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  font-size: 14px;
  background: white;
  transition: all 0.2s;
}

.filter-chips-search:focus {
  outline: none;
  border-color: var(--primary-400);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.filter-chips-dropdown-list {
  overflow-y: auto;
  flex: 1;
  padding: 8px;
}

/* Dropdown Groups */
.filter-chips-group {
  margin-bottom: 8px;
}

.filter-chips-group:last-child {
  margin-bottom: 0;
}

.filter-chips-group-label {
  padding: 8px 12px 6px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-tertiary);
}

/* Dropdown Options */
.filter-chips-option {
  display: grid;
  grid-template-columns: 28px 1fr;
  grid-template-rows: auto auto;
  gap: 0 10px;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.filter-chips-option:hover {
  background: var(--gray-50);
}

.filter-chips-option.selected {
  background: var(--primary-50);
  opacity: 0.6;
  pointer-events: none;
}

.filter-chips-option.selected::after {
  content: '✓';
  position: absolute;
  right: 12px;
  color: var(--primary-600);
  font-weight: 700;
}

.filter-chips-option-icon {
  grid-row: span 2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.filter-chips-option-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.filter-chips-option-desc {
  font-size: 12px;
  color: var(--text-tertiary);
}

/* Drop indicator between chips */
.filter-chip-drop-indicator {
  width: 3px;
  height: 32px;
  background: var(--primary-500);
  border-radius: 2px;
  animation: dropIndicatorPulse 0.5s ease infinite alternate;
}

@keyframes dropIndicatorPulse {
  from { opacity: 0.5; }
  to { opacity: 1; }
}

/* Responsive */
@media (max-width: 600px) {
  .filter-chips-dropdown {
    left: 12px;
    right: 12px;
  }
}

/* Main Content */
.filter-modal-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 24px;
  overflow-y: auto;
  flex: 1;
}

.filter-column {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Filter Cards */
.filter-card {
  background: white;
  border: 1px solid var(--border-light);
  border-radius: 14px;
  overflow: hidden;
  transition: all 0.2s ease;
}

.filter-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.filter-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-bottom: 1px solid var(--border-light);
}

.filter-card-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.filter-card-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.filter-card-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Filter Rows */
.filter-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.filter-row-inline {
  display: flex;
  align-items: flex-end;
  gap: 12px;
}

.filter-inline-field {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.filter-range-separator {
  font-size: 13px;
  color: var(--text-tertiary);
  padding-bottom: 10px;
}

/* Labels */
.filter-label-v2 {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Inputs */
.filter-input-v2 {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  background: white;
  transition: all 0.2s ease;
}

.filter-input-v2:hover {
  border-color: var(--border);
}

.filter-input-v2:focus {
  outline: none;
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.filter-input-v2::placeholder {
  color: var(--text-tertiary);
  font-weight: 400;
}

/* Money Input */
.filter-input-money-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.filter-money-symbol {
  position: absolute;
  left: 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-tertiary);
  pointer-events: none;
}

.filter-input-money {
  padding-left: 28px !important;
}

/* Percent Input */
.filter-input-percent-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.filter-percent-symbol {
  position: absolute;
  right: 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-tertiary);
  pointer-events: none;
}

.filter-input-percent-wrap .filter-input-v2 {
  padding-right: 32px;
}

/* Footer */
.filter-modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  background: white;
  border-top: 1px solid var(--border-light);
}

.filter-footer-left,
.filter-footer-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.filter-reset-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: white;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.filter-reset-btn:hover {
  background: #fef2f2;
  border-color: #fecaca;
  color: #dc2626;
}

.filter-cancel-btn {
  padding: 10px 20px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: white;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.filter-cancel-btn:hover {
  background: var(--gray-50);
}

.filter-apply-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-600) 100%);
  font-size: 14px;
  font-weight: 600;
  color: white;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.filter-apply-btn:hover {
  background: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-700) 100%);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
  transform: translateY(-1px);
}

/* Responsive */
@media (max-width: 768px) {
  .filter-modal-content {
    grid-template-columns: 1fr;
  }
  
  .filter-row-inline {
    flex-direction: column;
    align-items: stretch;
  }
  
  .filter-range-separator {
    display: none;
  }
  
  .filter-presets-bar {
    flex-wrap: wrap;
  }
}

/* Responsive Adjustments */
@media (max-width: 1100px) {
  .filter-quick-pills {
    display: none;
  }
  
  .filter-search-wrap {
    max-width: none;
  }
}

@media (max-width: 768px) {
  .filter-bar-main {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 12px;
  }
  
  .filter-search-wrap {
    flex: 1 1 100%;
    min-width: 100%;
    margin-bottom: 4px;
  }
  
  /* Second row: All, Last Updated, and Create New on one line */
  #ownerFilterDropdown,
  .filter-sort-wrap {
    flex: 0 1 auto;
    min-width: auto;
    width: auto;
  }
  
  .filter-add-btn {
    width: auto;
    white-space: nowrap;
    margin-left: auto;
  }
  
  /* Hide less critical elements to save space */
  #clearFilterBtn,
  .filter-quick-pills {
    display: none !important;
  }
  
  .filter-sort-select {
    width: 100%;
  }
  
  .filter-advanced-grid {
    grid-template-columns: 1fr 1fr;
  }
  
  /* Add spacing below filters so list doesn't overlap */
  .filters-modern {
    margin-bottom: 16px !important;
    position: relative;
    z-index: 5;
  }
  
  /* Ensure mainSplit starts below filters */
  .mainSplit {
    position: relative;
    z-index: 1;
  }
  
  /* List container padding on mobile */
  .list {
    padding: 8px;
    gap: 10px;
  }
  
  /* Make dropdowns and action menus more mobile-friendly */
  .actions-dropdown-btn {
    padding: 10px 14px;
    font-size: 15px;
  }
}

@media (max-width: 480px) {
  /* On small screens the inline panel is bypassed — full modal is used instead */
  #advancedFiltersPanel {
    display: none !important;
  }

  .filter-advanced-grid {
    grid-template-columns: 1fr;
  }
  
  /* Extra small screens */
  .filter-bar-main {
    padding: 10px;
    gap: 6px !important;
  }
  
  /* Add spacing below filters so list doesn't overlap */
  .filters-modern {
    margin-bottom: 16px !important;
    position: relative;
    z-index: 5;
  }
  
  /* Ensure mainSplit starts below filters */
  .mainSplit {
    position: relative;
    z-index: 1;
  }
  
  /* More compact buttons on small screens */
  .actions-dropdown-btn {
    padding: 7px 8px !important;
    font-size: 13px !important;
  }
  
  .filter-add-btn {
    padding: 10px 14px !important;
    font-size: 14px !important;
    gap: 8px;
  }
  
  .filter-add-btn svg {
    width: 18px;
    height: 18px;
  }
  
  /* Shorten dropdown text on very small screens */
  .dropdown-icon {
    margin-right: 4px;
  }
  
  .list {
    padding: 6px;
  }
  
  .row {
    padding: 10px;
  }
}

/* Legacy filter classes (keep for compatibility) */
.filters {
  background: white;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: 12px 16px;
}

.filter-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.filter-row-grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 14px;
  align-items: center;
}

.filter-center {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.filter-group.grow {
  flex: 1;
  min-width: 200px;
}

.filter-group label {
  display: none;
}

.searchWrap {
  position: relative;
  width: 100%;
}

#searchInput {
  width: 100%;
  height: 42px;
  padding: 0 44px 0 16px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-full);
  font-size: 14px;
  background: var(--gray-50);
}

#searchInput:focus {
  outline: none;
  background: white;
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.filterIconBtn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.tuneIcon {
  width: 18px;
  height: 18px;
}

/* ===========================================
   📑 GMAIL-STYLE TABS
=========================================== */
.gmail-tabs-container {
  display: none; /* Hidden when not on contacts view */
  padding: 0 0 0 0;
  margin-bottom: 0;
}

.app-shell[data-view="contacts"] .gmail-tabs-container {
  display: block;
}

/* ✅ Hide tabs when viewing contact detail */
.app-shell[data-view="contacts"] .gmail-tabs-container[data-detail-view="true"] {
  display: none !important;
}

.gmail-tabs {
  display: flex;
  justify-content: flex-start;
  gap: 0;
  background: var(--surface-1, white);
  border: 1px solid var(--border-light);
  border-bottom: none;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.gmail-tab {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary, #5f6368);
  background: var(--surface-2, #f8f9fa);
  border: none;
  border-right: 1px solid var(--border-light);
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  flex: 0 0 auto;
}

/* All, People, and Companies tabs span full width 33% each */
.gmail-tab[data-tab="all"],
.gmail-tab[data-tab="people"],
.gmail-tab[data-tab="companies"] {
  flex: 1 1 33.33%; /* Each takes one-third of available space */
  justify-content: flex-start; /* Left-align content */
}

/* Rounded corners: All (top-left), Companies (top-right) */
.gmail-tab[data-tab="all"] {
  border-top-left-radius: var(--radius-xl);
}

.gmail-tab[data-tab="companies"] {
  border-top-right-radius: var(--radius-xl);
}

.gmail-tab:last-child {
  border-right: none;
}

.gmail-tab:hover {
  background: var(--surface-hover, #e8eaed);
  color: var(--text-primary, #202124);
}

.gmail-tab.active {
  background: var(--surface-1, white);
  color: var(--primary-600);
  height: 43px;
}

.gmail-tab.active::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 3px;
  height: 3px;
  background: var(--primary-500);
  border-radius: 3px 3px 0 0;
  z-index: 10;
}

/* Hide active tab when on phone or when tabs are invisible */
.is-mobile .gmail-tab.active,
.app-shell:not([data-view="contacts"]) .gmail-tab.active,
.gmail-tabs-container[data-detail-view="true"] .gmail-tab.active {
  display: none !important;
}

.gmail-tab-icon {
  font-size: 18px;
  opacity: 0.85;
}

.gmail-tab.active .gmail-tab-icon {
  opacity: 1;
}

.gmail-tab-label {
  font-weight: 600;
  letter-spacing: -0.01em;
}

.gmail-tab-count {
  background: var(--gray-200, #e8eaed);
  color: var(--gray-500, #5f6368);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  min-width: 20px;
  text-align: center;
}

.gmail-tab.active .gmail-tab-count {
  background: var(--primary-50);
  color: var(--primary-600);
}

/* Invoice/Quote tabs – use primary brand color (overrides inline #4f46e5) */
.invoice-quote-tab.active {
  border-bottom-color: var(--primary-500) !important;
  color: var(--primary-700) !important;
}

/* TEMPORARILY HIDDEN: Deals, Tasks, and Calendar tabs */
.gmail-tab[data-tab="deals"],
.gmail-tab[data-tab="tasks"],
.gmail-tab[data-tab="calendar"] {
  display: none !important;
}

/* When tabs are visible, adjust the list pane border radius */
.app-shell[data-view="contacts"] .listPane {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-top: none;
}

.app-shell[data-view="contacts"] .detailPane {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-top: none;
}
body[data-theme="momentum"] .app-shell[data-view="contacts"] .detailPane {
  border-radius: 14px !important;
  border: 1px solid #dbe5f0 !important;
}

/* Task list styling in tab view */
.task-list-view {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

.task-list-view .task-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: white;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.task-list-view .task-item:hover {
  border-color: var(--primary);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* ===========================================
   🚀 MOMENTUM VISUAL OVERRIDES (contact/deals UI)
=========================================== */
body[data-theme="momentum"] .listPane,
body[data-theme="momentum"] .detailPane,
body[data-theme="momentum"] .gmail-tabs {
  background: var(--surface-1);
  border-color: var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

body[data-theme="momentum"] .paneHead {
  background: var(--surface-2);
  border-bottom-color: var(--border-subtle);
}

body[data-theme="momentum"] .row {
  background: var(--surface-1);
  border-color: var(--border-subtle);
  border-radius: var(--radius-md);
}

body[data-theme="momentum"] .row:hover {
  background: var(--surface-hover);
  border-color: var(--border-strong);
}

body[data-theme="momentum"] .row.selected {
  background: var(--accent-soft, var(--surface-hover));
  border-color: var(--accent, var(--primary));
  box-shadow: 0 0 0 2px rgba(37,99,235,0.12);
}

body[data-theme="momentum"] .gmail-tab {
  background: var(--surface-2);
  color: var(--text-secondary);
  border-right-color: var(--border-subtle);
}

body[data-theme="momentum"] .gmail-tab:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}

body[data-theme="momentum"] .gmail-tab.active {
  background: var(--surface-1);
  color: var(--primary);
}

body[data-theme="momentum"] .gmail-tab.active::after {
  background: var(--accent, var(--primary));
}

body[data-theme="momentum"] .detailHeader {
  border-bottom-color: var(--border-subtle);
}

body[data-theme="momentum"] .detailSection {
  background: var(--surface-1);
  border-color: var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

body[data-theme="momentum"] .detailSection h3 {
  color: var(--text-secondary);
  border-bottom-color: var(--border-subtle);
}

body[data-theme="momentum"] .detailRow {
  border-bottom-color: var(--border-subtle);
}

.task-list-view .task-checkbox {
  width: 20px;
  height: 20px;
  border: 2px solid #d1d5db;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
  margin-top: 2px;
}

.task-list-view .task-checkbox:hover {
  border-color: var(--primary);
}

.task-list-view .task-checkbox.completed {
  background: var(--success);
  border-color: var(--success);
}

.task-list-view .task-checkbox.completed::after {
  content: "✓";
  color: white;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.task-list-view .task-content {
  flex: 1;
  min-width: 0;
}

.task-list-view .task-title {
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 4px;
}

.task-list-view .task-item.completed .task-title {
  text-decoration: line-through;
  color: #9ca3af;
}

.task-list-view .task-meta {
  font-size: 12px;
  color: #6b7280;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.task-list-view .task-due {
  color: #ef4444;
}

.task-list-view .task-due.upcoming {
  color: #f59e0b;
}

.task-list-view .task-due.future {
  color: #6b7280;
}

/* ===========================================
   📊 MAIN SPLIT (contact list + detail)
=========================================== */
.mainSplit {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: var(--list-pane-width, 40%) 1fr;
  grid-template-rows: 1fr; /* single row takes full height so calendar/detail fill viewport */
  gap: 14px;
  overflow: hidden;
}

/* Panes in mainSplit fill full vertical space and scroll internally */
.mainSplit > .listPane,
.mainSplit > .detailPane,
.mainSplit > .calendarPane,
.mainSplit > .pipelinePane,
.mainSplit > #detailPanel,
.mainSplit > #pipelineWrap,
.mainSplit > #calendarWrap {
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.mainSplit > .detailPane #detailContent,
.mainSplit > .detailPane > .empty,
.mainSplit > .detailPane > .detailContent {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* Ensure contact detail content (class .detailContent) fills and scrolls in detail pane */
.detailPane > .detailContent {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* Contacts view: 40% list, 60% detail */
.app-shell[data-view="contacts"] .mainSplit {
  grid-template-columns: var(--list-pane-width, 40%) 1fr;
}

/* ===========================================
   📋 LIST PANE (Contact list)
=========================================== */
.listPane {
  display: flex;
  flex-direction: column;
  background: white;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.paneHead {
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--border-light);
  background: var(--gray-50);
  flex-shrink: 0;
}

.paneHead.compact {
  padding: 10px 12px;
}

.paneHead-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.paneTitle {
  font-size: 16px;
  font-weight: 700;
}

.paneSub {
  font-size: 12px;
  color: var(--text-secondary);
}

.paneHead-right {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

#contactList,
.list {
  flex: 1;
  min-height: 0; /* allow flex child to shrink so overflow-y creates scroll */
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Contact rows */
.row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 8px 16px;
  background: white;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all 0.15s;
  position: relative;
  overflow: visible;
}

.row:hover {
  background: var(--gray-50);
  border-color: var(--border-medium);
}

.row.selected {
  background: var(--primary-50);
  border-color: var(--primary-500);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

/* Task Status Color Indicators for Contact List */
.row::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 5px;
  background: transparent;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  transition: all 0.15s;
}

/* Red: Overdue tasks */
.row.task-status-overdue::before {
  background: #ef4444;
}

/* Orange: Due today */
.row.task-status-today::before {
  background: #f59e0b;
}

/* Green: Upcoming tasks */
.row.task-status-upcoming::before {
  background: #10b981;
}

/* Darker Grey: No tasks */
.row.task-status-none::before {
  background: #9ca3af;
}

/* Optional: Enhance on hover */
.row:hover::before {
  width: 6px;
}

.row-check {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.row .avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--primary-500), var(--primary-700));
  color: white;
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.rowMain {
  flex: 1;
  min-width: 0;
}

.rowName {
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rowSub {
  font-size: 13px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.row > div:last-child {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  border-radius: var(--radius-full);
  background: var(--gray-100);
  color: var(--text-secondary);
  border: 1px solid var(--border-light);
  white-space: nowrap;
}

.pill.ownerPill {
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.pill.ownerPill.me {
  background: var(--success-50);
  color: var(--success-700);
  border-color: var(--success-200);
}

.pill.ownerPill.empty {
  background: var(--danger-50);
  color: var(--danger-600);
  border-color: var(--danger-200);
}

/* ===========================================
   📄 DETAIL PANE
=========================================== */
.detailPane {
  display: flex;
  flex-direction: column;
  background: white;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  overflow-y: auto;
  padding: 20px;
}

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  height: 100%;
}

.emptyTitle {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
}

.emptySub {
  font-size: 14px;
  color: var(--text-secondary);
}

.detailTopStrip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  margin: -20px -20px 0 -20px;
  background: transparent;
  border-bottom: none;
  flex-wrap: wrap;
  box-shadow: none;
}

.detailHeader {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-light);
}

.detailHeader .avatar {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, var(--primary-500), var(--primary-700));
  color: white;
  font-weight: 700;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.detailHeader .contactName {
  font-size: 22px;
  font-weight: 700;
}

.detailHeader .detailHeaderMain {
  width: 100%;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Stacked header: identity (Open Deals, deal, primary contact) at 40% width; menu row full width at bottom. */
.detailHeader .detailHeaderMain.detail-header-stacked {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 12px !important;
  width: 100% !important;
  min-width: 0 !important;
}
.detailHeader .detailHeaderMain.detail-header-stacked .detailHeaderIdentity {
  max-width: 40% !important;
  min-width: 0 !important;
}
.detailHeader .detailHeaderMain.detail-header-stacked .detailHeaderActionsRow {
  flex-shrink: 0 !important;
  width: 100% !important;
  padding-top: 4px !important;
  border-top: 1px solid var(--border-light, #e5e7eb) !important;
}

.detailHeader .detailHeaderIdentity {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
}

.detailHeader #detailHeaderActions {
  flex: 0 1 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: visible;
  padding-left: 2px;
}

/* Keep Back fully visible inside the actions strip */
.detailHeader #detailHeaderActions .detail-back-btn {
  margin-left: 0;
}

.star-icon-btn {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  padding: 4px;
  opacity: 0.6;
}

.star-icon-btn:hover {
  opacity: 1;
  transform: scale(1.1);
}

.detailSection {
  background: var(--gray-50);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 16px;
  margin-bottom: 16px;
}

.detailSection h3 {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 12px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-light);
}

.detailRow {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}

.detailRow:last-child {
  border-bottom: none;
}

.detailRow .label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
}

.detailRow .value {
  font-size: 14px;
  font-weight: 500;
}

.detailRow .value a {
  color: var(--primary-600);
  text-decoration: none;
}

.detailRow .value a:hover {
  text-decoration: underline;
}

/* ===========================================
   🎭 ALTERNATE VIEW PANES
   These only show when NOT .hidden
=========================================== */
.calendarPane,
.pipelinePane,
.leadsPane,
.analyticsPane,
.reportsPane,
.templatesPane,
.documentsPane,
.formsPane,
.dealDoctorPane {
  display: flex;
  flex-direction: column;
  background: white;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

/* Allow scrolling on full-page views */
.analyticsPane,
.reportsPane,
.templatesPane,
.formsPane,
.leadsPane,
.dealDoctorPane {
  overflow-y: auto;
  overflow-x: hidden;
  max-height: calc(100vh - 60px); /* More room when filters hidden */
}

/* Documents pane: fixed height so inner list/sidebar scroll, not the whole pane */
.documentsPane {
  max-height: calc(100vh - 60px);
  overflow: hidden;
}

/* Full-width view mode - hide sidebars, expand content */
.app-shell.full-width-view .folderPane,
.app-shell.full-width-view .filters {
  display: none !important;
}

.app-shell.full-width-view .mainColumn {
  flex: 1;
  min-width: 0;
}

.app-shell.full-width-view .formsPane,
.app-shell.full-width-view .templatesPane,
.app-shell.full-width-view .documentsPane,
.app-shell.full-width-view .analyticsPane,
.app-shell.full-width-view .reportsPane,
.app-shell.full-width-view .dealDoctorPane {
  max-height: calc(100vh - 60px); /* Header only, no filters */
}

/* ===========================================
   🏥 DEAL DOCTOR VIEW (AI Intelligence)
   Matches Deal Intelligence / AI panel design system
=========================================== */
.deal-doctor-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

.deal-doctor-hero {
  flex-shrink: 0;
  padding: 24px 20px 20px;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
  color: white;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.25);
}

.deal-doctor-hero .hero-icon {
  font-size: 32px;
  margin-bottom: 8px;
  display: block;
  line-height: 1;
}

.deal-doctor-hero .hero-title {
  margin: 0 0 4px 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: white;
}

.deal-doctor-hero .hero-subtitle {
  margin: 0;
  font-size: 13px;
  color: rgba(255,255,255,0.85);
  font-weight: 500;
}

.deal-doctor-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px 20px 24px;
  min-height: 0;
}

.deal-doctor-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 48px 24px;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
}

.deal-doctor-loading .loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--gray-200);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: deal-doctor-spin 0.8s linear infinite;
}

@keyframes deal-doctor-spin {
  to { transform: rotate(360deg); }
}

.deal-doctor-empty {
  text-align: center;
  padding: 48px 24px;
  background: rgba(15,23,42,0.02);
  border: 1px dashed var(--border-light);
  border-radius: var(--radius-xl);
}

.deal-doctor-empty .empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.7;
}

.deal-doctor-empty h2 {
  margin: 0 0 8px 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
}

.deal-doctor-empty p {
  margin: 0;
  font-size: 14px;
  color: var(--text-secondary);
}

/* Stats grid - matches Deal Intelligence card style */
.doctor-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

@media (max-width: 900px) {
  .doctor-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.stat-card {
  display: flex;
  flex-direction: column;
  background: rgba(15,23,42,0.04);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  transition: all var(--tr-fast);
}

.stat-card .stat-content {
  flex: 1;
  min-width: 0;
}

.stat-card:hover,
.stat-card.clickable:hover {
  background: rgba(15,23,42,0.06);
  border-color: rgba(15,23,42,0.12);
}

.stat-card.clickable {
  cursor: pointer;
}

.stat-card .stat-icon {
  font-size: 20px;
  margin-bottom: 6px;
  display: block;
}

.stat-card .stat-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

.stat-card .stat-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  margin-top: 2px;
}

.stat-card .stat-sublabel {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 2px;
}

/* Small stat cards row */
.doctor-stats-grid .stat-card-small {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(15,23,42,0.04);
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: var(--radius-md);
  transition: all var(--tr-fast);
}

.doctor-stats-grid .stat-card-small.clickable:hover {
  background: rgba(15,23,42,0.08);
  cursor: pointer;
}

.stat-card-small .stat-icon-small {
  font-size: 16px;
  flex-shrink: 0;
}

.stat-card-small .stat-value-small {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}

.stat-card-small .stat-label-small {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}

.stat-card-small.hot .stat-value-small { color: #059669; }
.stat-card-small.warning .stat-value-small,
.stat-card-small.at-risk .stat-value-small { color: #d97706; }
.stat-card-small.critical .stat-value-small { color: #dc2626; }

/* Today's Priorities */
.todays-priorities {
  margin-bottom: 20px;
  padding: 16px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.06) 0%, rgba(139, 92, 246, 0.04) 100%);
  border: 1px solid rgba(99, 102, 241, 0.12);
  border-radius: var(--radius-xl);
}

.todays-priorities .priorities-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.todays-priorities .priorities-icon {
  font-size: 20px;
}

.todays-priorities .priorities-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

.todays-priorities .priorities-subtitle {
  font-size: 12px;
  color: var(--text-secondary);
  margin-left: auto;
}

.priorities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

.priority-card {
  background: white;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 14px;
  cursor: pointer;
  transition: all var(--tr-fast);
  box-shadow: var(--sh-xs);
}

.priority-card:hover {
  border-color: var(--blue);
  box-shadow: var(--sh-sm);
  background: rgba(37, 99, 235, 0.02);
}

.priority-card .priority-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--r-full);
  font-size: 11px;
  font-weight: 600;
  color: white;
  margin-bottom: 10px;
}

.priority-card .priority-deal-name {
  margin: 0 0 6px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}

.priority-card .priority-value {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.priority-card .priority-contact-info {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.priority-card .priority-contact-name,
.priority-card .priority-contact-detail {
  margin-bottom: 2px;
}

.priority-card .priority-contact-link {
  color: var(--blue);
  text-decoration: none;
}

.priority-card .priority-contact-link:hover {
  text-decoration: underline;
}

.priority-card .priority-reason {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 10px;
  padding: 6px 8px;
  background: var(--gray-50);
  border-radius: var(--radius-md);
}

.priority-card .priority-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.priority-action-btn {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: white;
  color: var(--text-primary);
  cursor: pointer;
  transition: all var(--tr-fast);
}

.priority-action-btn:hover {
  background: var(--gray-50);
  border-color: var(--blue);
  color: var(--blue);
}

/* Filter tabs */
.doctor-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.doctor-filter {
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: white;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--tr-fast);
}

.doctor-filter:hover {
  background: var(--gray-50);
  color: var(--text-primary);
}

.doctor-filter.active {
  background: var(--blue);
  border-color: var(--blue);
  color: white;
}

/* Deal cards list */
.doctor-deals {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.deal-doctor-content .deal-card {
  background: white;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: all var(--tr-fast);
  box-shadow: var(--sh-xs);
}

.deal-doctor-content .deal-card:hover {
  border-color: var(--gray-300);
  box-shadow: var(--sh-sm);
}

.deal-doctor-content .deal-card[data-status="critical"] {
  border-left: 3px solid #dc2626;
}

.deal-doctor-content .deal-card[data-status="at-risk"] {
  border-left: 3px solid #d97706;
}

.deal-doctor-content .deal-card[data-status="hot"] {
  border-left: 3px solid #059669;
}

.deal-doctor-content .deal-card-quick-actions {
  display: flex;
  gap: 4px;
  padding: 8px 12px;
  background: var(--gray-50);
  border-bottom: 1px solid var(--border-light);
  flex-wrap: wrap;
}

.deal-doctor-content .quick-action-icon {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 14px;
  transition: all var(--tr-fast);
}

.deal-doctor-content .quick-action-icon:hover {
  background: var(--gray-200);
}

.deal-doctor-content .deal-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  cursor: pointer;
  min-height: 0;
}

.deal-doctor-content .deal-card-title {
  flex: 1;
  min-width: 0;
}

.deal-doctor-content .deal-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.deal-doctor-content .deal-card-title h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}

.deal-doctor-content .trend-badge,
.deal-doctor-content .urgency-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--r-full);
}

.deal-doctor-content .urgency-badge {
  color: white !important;
}

.deal-doctor-content .deal-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  font-size: 12px;
  color: var(--text-secondary);
}

.deal-doctor-content .deal-contact {
  cursor: pointer;
}

.deal-doctor-content .deal-contact:hover {
  color: var(--blue);
}

.deal-doctor-content .deal-contact .contact-email {
  display: block;
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 2px;
}

.deal-doctor-content .deal-card-score {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.deal-doctor-content .health-score {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.deal-doctor-content .health-score .score-value {
  font-size: 18px;
  line-height: 1;
  color: white;
}

.deal-doctor-content .health-score .score-label {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.9);
}

.deal-doctor-content .status-badge {
  padding: 4px 10px;
  border-radius: var(--r-full);
  font-size: 11px;
  font-weight: 600;
  color: white;
}

.deal-doctor-content .deal-card-value {
  padding: 10px 16px;
  background: var(--gray-50);
  border-top: 1px solid var(--border-light);
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.deal-doctor-content .value-amount {
  font-weight: 700;
  color: var(--text-primary);
}

.deal-doctor-content .value-probability {
  color: var(--text-secondary);
  font-size: 12px;
}

/* Recommendations block */
.deal-doctor-content .deal-card-recommendations {
  padding: 12px 16px;
  border-top: 1px solid var(--border-light);
  background: linear-gradient(135deg, #f0f9ff 0%, #f8fafc 100%);
}

.deal-doctor-content .recommendations-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}

.deal-doctor-content .recommendations-icon {
  font-size: 14px;
}

.deal-doctor-content .recommendation {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  margin-bottom: 6px;
  background: white;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  font-size: 13px;
}

.deal-doctor-content .recommendation .rec-icon {
  flex-shrink: 0;
  font-size: 14px;
}

.deal-doctor-content .recommendation .rec-title {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.deal-doctor-content .recommendation .rec-action {
  font-size: 12px;
  color: var(--text-secondary);
}

.deal-doctor-content .recommendations-more {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 6px;
}

/* Risks */
.deal-doctor-content .deal-card-risks {
  padding: 10px 16px;
  border-top: 1px solid var(--border-light);
  background: #fef2f2;
}

.deal-doctor-content .risks-header {
  font-size: 12px;
  font-weight: 600;
  color: #991b1b;
  margin-bottom: 8px;
}

.deal-doctor-content .risks-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.deal-doctor-content .risk-tag {
  padding: 4px 10px;
  border-radius: var(--radius-md);
  font-size: 11px;
  font-weight: 600;
  background: #fee2e2;
  color: #991b1b;
}

/* Action buttons */
.deal-doctor-content .deal-card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border-top: 1px solid var(--border-light);
  background: var(--gray-50);
}

.deal-doctor-content .deal-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: white;
  color: var(--text-primary);
  cursor: pointer;
  transition: all var(--tr-fast);
}

.deal-doctor-content .deal-action-btn:hover {
  background: var(--gray-100);
  border-color: var(--gray-300);
}

.deal-doctor-content .deal-action-btn.primary {
  background: var(--blue);
  border-color: var(--blue);
  color: white;
}

.deal-doctor-content .deal-action-btn.primary:hover {
  background: var(--blue2);
  border-color: var(--blue2);
}

.deal-doctor-content .deal-action-btn.urgent {
  background: #dc2626;
  border-color: #dc2626;
  color: white;
}

.deal-doctor-content .deal-action-btn.urgent:hover {
  background: #b91c1c;
  border-color: #b91c1c;
}

.deal-doctor-content .deal-action-btn.warning {
  background: #d97706;
  border-color: #d97706;
  color: white;
}

.deal-doctor-content .deal-action-btn.warning:hover {
  background: #b45309;
  border-color: #b45309;
}

.deal-doctor-content .deal-action-btn.success {
  background: #059669;
  border-color: #059669;
  color: white;
}

.deal-doctor-content .deal-action-btn.success:hover {
  background: #047857;
  border-color: #047857;
}

/* Contact quick links */
.deal-doctor-content .deal-contact-quick {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 16px;
  border-top: 1px solid var(--border-light);
  background: white;
}

.deal-doctor-content .contact-quick-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
  background: var(--gray-50);
  color: var(--text-primary);
  text-decoration: none;
  transition: all var(--tr-fast);
}

.deal-doctor-content .contact-quick-btn:hover {
  background: var(--gray-100);
  border-color: var(--blue);
  color: var(--blue);
}

.deal-doctor-content .contact-quick-btn.phone:hover {
  border-color: #059669;
  color: #047857;
}

.deal-doctor-content .contact-quick-btn.email:hover {
  border-color: var(--blue);
  color: var(--blue);
}

.no-deals-message {
  text-align: center;
  padding: 32px 20px;
  font-size: 14px;
  color: var(--text-secondary);
}

/* ===========================================
   🔘 BUTTONS
=========================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 5px 12px;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: white;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.btn:hover:not(:disabled) {
  background: var(--gray-50);
  border-color: var(--border-medium);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn.primary {
  background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
  border-color: var(--primary-600);
  color: white;
}

.btn.primary:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--primary-600), var(--primary-700));
}

.btn.ghost {
  background: transparent;
  border-color: transparent;
}

.btn.ghost:hover:not(:disabled) {
  background: var(--gray-100);
}

.btn.small {
  padding: 6px 10px;
  font-size: 13px;
}

/* Keep document composer toolbar buttons readable on hover/open: light highlight + dark text. */
.composer-modal .composer-toolbar .btn:not(.primary):hover:not(:disabled),
.composer-modal .composer-toolbar .btn:not(.primary):focus-visible:not(:disabled),
.composer-modal .composer-toolbar-dropdown.open .composer-toolbar-trigger {
  background: #e5e7eb !important;
  border-color: #cbd5e1 !important;
  color: #1e293b !important;
}
.composer-modal .composer-toolbar .btn:not(.primary):hover:not(:disabled) svg,
.composer-modal .composer-toolbar .btn:not(.primary):focus-visible:not(:disabled) svg,
.composer-modal .composer-toolbar-dropdown.open .composer-toolbar-trigger svg {
  color: inherit !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

.composer-modal .composer-toolbar .btn.primary:hover:not(:disabled),
.composer-modal .composer-toolbar .btn.primary:focus-visible:not(:disabled) {
  color: #ffffff !important;
}

/* Save As button: match Save button (white background) */
.composer-modal #saveAsMenuBtn {
  background: #ffffff !important;
  border-color: #e5e7eb !important;
  color: #374151 !important;
}
.composer-modal #saveAsMenuBtn:hover:not(:disabled),
.composer-modal #saveAsMenuBtn:focus-visible:not(:disabled) {
  background: #e5e7eb !important;
  border-color: #cbd5e1 !important;
  color: #1e293b !important;
}

/* ===========================================
   📝 FORM ELEMENTS
=========================================== */
.input,
.select,
.textarea {
  width: 100%;
  padding: 6px 10px;
  font-size: 14px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: white;
}

.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* ═══════════════════════════════════════════════════════════════════
   SEARCHABLE DROPDOWN (Deal With, Contact Person)
═══════════════════════════════════════════════════════════════════ */
.searchable-dropdown {
  position: relative;
}

.searchable-dropdown-input {
  width: 100%;
  cursor: text;
}

.searchable-dropdown-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.15);
  z-index: 1000;
  max-height: 320px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.searchable-dropdown-items {
  overflow-y: auto;
  max-height: 240px;
  padding: 6px;
}

.searchable-dropdown-group-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-tertiary);
  padding: 10px 12px 6px;
  background: var(--gray-50);
  margin: 0 -6px;
}

.searchable-dropdown-group-label:first-child {
  margin-top: -6px;
  border-radius: 6px 6px 0 0;
}

.searchable-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.15s ease;
}

.searchable-dropdown-item:hover {
  background: var(--primary-50);
}

.searchable-dropdown-icon {
  font-size: 16px;
  flex-shrink: 0;
}

.searchable-dropdown-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.searchable-dropdown-meta {
  font-size: 12px;
  color: var(--text-tertiary);
  flex-shrink: 0;
}

.searchable-dropdown-empty {
  padding: 20px;
  text-align: center;
  color: var(--text-tertiary);
  font-size: 13px;
}

.searchable-dropdown-actions {
  border-top: 1px solid var(--border-light);
  padding: 8px;
  background: var(--gray-50);
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.searchable-dropdown-add {
  flex: 1;
  min-width: 120px;
  padding: 10px 14px;
  border: 1px dashed var(--border-medium);
  border-radius: 8px;
  background: white;
  color: var(--primary-600);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: center;
}

.searchable-dropdown-add:hover {
  background: var(--primary-50);
  border-color: var(--primary-300);
  border-style: solid;
}

.textarea {
  min-height: 100px;
  resize: vertical;
}

.label-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}

.label-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}

/* ===========================================
   📋 MULTI-VALUE FIELDS (Phones, Emails, Addresses)
=========================================== */
.multi-field-group {
  margin-bottom: 14px;
  padding: 10px 12px;
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border: 2px solid #93c5fd;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.08);
}

.multi-field-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.multi-field-header .label-text {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}

.btn-add-field {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-600) 100%);
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 150ms ease;
  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
}

.btn-add-field:hover {
  background: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-700) 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.35);
}

.multi-field-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.multi-field-entry {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 6px 10px;
  background: white;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  transition: all 150ms ease;
  animation: slideIn 200ms ease-out;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.multi-field-entry:hover {
  border-color: var(--primary-300);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.multi-field-entry .type-select {
  padding: 6px 8px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--border-light);
  border-radius: 6px;
  background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
  color: var(--text-secondary);
  cursor: pointer;
}

.multi-field-entry .type-select:focus {
  outline: none;
  border-color: var(--primary-400);
}

.multi-field-entry .field-input {
  padding: 5px 8px;
  font-size: 14px;
  border: 1px solid var(--border-light);
  border-radius: 6px;
  background: white;
  transition: all 150ms ease;
}

.multi-field-entry .field-input:focus {
  outline: none;
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.multi-field-entry .field-input::placeholder {
  color: var(--text-tertiary);
}

/* Address entry with separate fields */
.multi-field-entry.address-entry {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
}

.multi-field-entry.address-entry .address-entry-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.multi-field-entry.address-entry .address-fields-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.multi-field-entry.address-entry .address-field {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  border: 1px solid var(--border-light);
  border-radius: 6px;
  background: white;
  transition: all 150ms ease;
}

.multi-field-entry.address-entry .address-field:focus {
  outline: none;
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.multi-field-entry.address-entry .address-field::placeholder {
  color: var(--text-tertiary);
}

.multi-field-entry.address-entry .address-city-state-zip-row {
  display: grid;
  grid-template-columns: 1fr 100px 100px;
  gap: 8px;
}

.multi-field-entry.address-entry .address-city {
  flex: 1;
}

.multi-field-entry.address-entry .address-state {
  width: 100px;
}

.multi-field-entry.address-entry .address-zip {
  width: 100px;
}

.btn-remove-field {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  font-size: 14px;
  font-weight: 600;
  background: transparent;
  color: var(--text-tertiary);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 150ms ease;
}

.btn-remove-field:hover {
  background: #fee2e2;
  color: #dc2626;
  transform: scale(1.1);
}

/* Empty state */
.multi-field-empty {
  padding: 12px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--text-tertiary);
  background: white;
  border: 1px dashed var(--border-light);
  border-radius: 8px;
}

/* ===========================================
   📋 DETAIL PANE MULTI-VALUE FIELDS
=========================================== */
.multi-field-detail-row .value {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.detail-multi-field-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Flat stack: type + value inputs keep their own borders — no outer card ring (avoids triple-border clutter) */
.detail-multi-field-entry {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  position: relative;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  box-shadow: none;
}

.detail-multi-field-entry-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}

.detail-multi-field-entry-header .detail-multi-type-select {
  flex: 1;
  min-width: 0;
}

.detail-multi-type-select {
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
  color: var(--text-secondary);
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  box-shadow: none;
  outline: none;
}

.detail-multi-type-select:not(:disabled) {
  cursor: pointer;
}

.detail-multi-type-select:focus,
.detail-multi-type-select:focus-visible {
  border-color: #93c5fd;
  background: #fff;
  box-shadow: none;
}

.detail-multi-value-input {
  width: 100% !important;
  min-width: 0 !important;
  padding: 10px 12px !important;
  font-size: 14px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
  outline: none !important;
}

.detail-multi-value-input:focus,
.detail-multi-value-input:focus-visible {
  border-color: var(--primary-400) !important;
  box-shadow: none !important;
  outline: 2px solid rgba(59, 130, 246, 0.22) !important;
  outline-offset: 1px !important;
}

.detail-multi-remove-btn {
  width: 24px;
  height: 24px;
  padding: 0;
  font-size: 14px;
  line-height: 1;
  border: 1px solid #fca5a5;
  border-radius: 4px;
  background: #fef2f2;
  color: #b91c1c;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.detail-multi-remove-btn:hover {
  background: #fee2e2;
  color: #dc2626;
}

.btn-add-detail-field {
  display: none;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  background: var(--primary-50);
  color: var(--primary-600);
  border: 1px dashed var(--primary-300);
  border-radius: 4px;
  cursor: pointer;
  margin-top: 4px;
}

.btn-add-detail-field:hover {
  background: var(--primary-100);
  border-style: solid;
}

.detailSection.editing .detail-multi-remove-btn,
.detailSection.editing .btn-add-detail-field {
  display: inline-flex;
}

/* Address-specific styling */
.detail-address-entry {
  padding-bottom: 12px;
}

.detail-address-fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.detail-address-input {
  width: 100% !important;
  min-width: 0 !important;
  padding: 10px 12px !important;
  font-size: 14px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
  outline: none !important;
}

.detail-address-input:focus,
.detail-address-input:focus-visible {
  border-color: var(--primary-400) !important;
  box-shadow: none !important;
  outline: 2px solid rgba(59, 130, 246, 0.22) !important;
  outline-offset: 1px !important;
}

.detail-address-row {
  display: grid;
  grid-template-columns: 1fr 80px 100px;
  gap: 8px;
  max-width: 100%;
}

/* City, State, ZIP in address row - remove min-width to fit container */
.detail-address-row .detail-address-input {
  min-width: 0 !important;
  width: 100% !important;
}

/* ===========================================
   🎯 MODALS
=========================================== */
.backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
}

.backdrop.show {
  display: flex;
}

.modal {
  background: white;
  border-radius: 16px;
  box-shadow: var(--shadow-xl);
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: all 0.3s ease;
}

/* Fullscreen Modal Mode - entire vertical page */
.modal.modal-fullscreen {
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  border-radius: 0;
  margin: 0;
  display: flex !important;
  flex-direction: column !important;
}

.modal.modal-fullscreen .modalBody {
  flex: 1 !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto;
}

/* Mobile optimizations for modal scrolling */
@media (max-width: 768px) {
  .modal {
    max-height: 85vh !important; /* Smaller on mobile to account for browser UI */
  }
  
  .modalBody {
    padding-bottom: 100px !important; /* Even more padding on mobile */
  }
  
  /* Viewer modals - full screen with no backdrop padding */
  .backdrop:has(.proof-viewer-modal),
  .backdrop:has(.video-proof-viewer-modal),
  .backdrop:has(.viewer-modal-overlay) {
    padding: 0 !important;
  }
  
  .proof-viewer-modal,
  .video-proof-viewer-modal {
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    margin: 0 !important;
    border: none !important;
  }
}

/* Modal Header Actions (fullscreen + close buttons) */
.modalHead-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Fullscreen Toggle Button */
.modal-fullscreen-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: white;
  cursor: pointer;
  color: var(--text-secondary);
  transition: all 0.15s ease;
}

.modal-fullscreen-btn:hover {
  background: var(--gray-100);
  color: var(--text-primary);
}

.modal-fullscreen-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.modal-fullscreen-btn svg {
  width: 16px;
  height: 16px;
}

/* Hide/show appropriate icon based on state */
.modal-fullscreen-btn .icon-expand {
  display: block;
}

.modal-fullscreen-btn .icon-collapse {
  display: none;
}

.modal.modal-fullscreen .modal-fullscreen-btn .icon-expand {
  display: none;
}

.modal.modal-fullscreen .modal-fullscreen-btn .icon-collapse {
  display: block;
}

/* =============================
   Settings Modal v2 - Modern Sidebar Layout
============================= */

.settings-modal-v2 {
  width: min(1100px, 95vw) !important;
  height: min(700px, 90vh) !important;
  max-height: 90vh;
  padding: 0 !important;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.settings-layout {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Sidebar - Light theme with dark text */
.settings-modal-v2 .settings-sidebar {
  width: 260px;
  min-width: 260px;
  background: #f8fafc !important;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #e2e8f0;
}

.settings-modal-v2 .settings-sidebar-header {
  padding: 24px 20px 16px;
  border-bottom: 1px solid #e2e8f0;
  background: #f1f5f9 !important;
}

.settings-modal-v2 .settings-sidebar-header h2 {
  color: #0f172a !important;
  font-size: 20px;
  font-weight: 700;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.settings-modal-v2 .settings-sidebar-header h2::before {
  content: "⚙️";
  font-size: 24px;
}

/* Navigation */
.settings-modal-v2 .settings-nav {
  flex: 1;
  overflow-y: auto;
  padding: 12px 0;
  background: #f8fafc !important;
}

.settings-modal-v2 .settings-nav-group {
  margin-bottom: 8px;
}

.settings-modal-v2 .settings-nav-group-label {
  padding: 8px 20px 6px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #64748b !important;
}

.settings-modal-v2 .settings-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 20px;
  background: transparent;
  border: none;
  color: #1e293b !important;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}

.settings-modal-v2 .settings-nav-item:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}

.settings-modal-v2 .settings-nav-item.active {
  background: var(--primary-500) !important;
  color: #ffffff !important;
  border-left: 3px solid var(--primary-600);
  padding-left: 17px;
}

.settings-modal-v2 .settings-nav-item:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--surface) , 0 0 0 4px var(--primary-400);
}

.settings-modal-v2 .settings-close-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--primary-400);
}

.settings-nav-item-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.settings-nav-item-label {
  flex: 1;
}

/* Sidebar Footer */
.settings-modal-v2 .settings-sidebar-footer {
  padding: 16px;
  border-top: 1px solid #e2e8f0;
  background: #f1f5f9 !important;
}

.settings-modal-v2 .settings-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px;
  background: #1e293b !important;
  border: none;
  border-radius: 10px;
  color: #ffffff !important;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}

.settings-modal-v2 .settings-close-btn:hover {
  background: #334155 !important;
  color: #ffffff !important;
}

/* Main Content */
.settings-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  overflow: hidden;
}

.settings-content {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}

/* Settings Page Header */
.settings-page-header {
  padding: 28px 32px 20px;
  background: white;
  border-bottom: 1px solid var(--border-light);
}

.settings-page-title {
  font-size: 24px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 6px;
  letter-spacing: -0.3px;
}

.settings-page-desc {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
}

/* Payment setup callout (Invoices & Payments when Stripe not configured) */
.settings-payment-setup-callout {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 24px;
  margin: 0 32px 24px;
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border: 1px solid #93c5fd;
  border-radius: 12px;
  color: #1e40af;
}
.settings-payment-setup-callout-icon {
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
}
.settings-payment-setup-callout-content {
  flex: 1;
  min-width: 0;
}
.settings-payment-setup-callout-content strong {
  display: block;
  font-size: 15px;
  margin-bottom: 6px;
  color: #1e3a8a;
}
.settings-payment-setup-callout-content p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #1e40af;
}

/* Invoice payment setup banner (when Stripe not configured) */
.invoice-payment-setup-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 16px;
  margin-bottom: 20px;
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border: 1px solid #93c5fd;
  border-radius: 10px;
  color: #1e40af;
}
.invoice-payment-setup-banner-text {
  font-size: 14px;
  font-weight: 500;
  flex: 1;
  min-width: 0;
}
.invoice-payment-setup-banner-btn {
  flex-shrink: 0;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
}

/* Settings Page Body */
.settings-page-body {
  padding: 24px 32px;
}

/* Settings Card */
.settings-card {
  background: white;
  border-radius: 14px;
  border: 1px solid var(--border-light);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  margin-bottom: 20px;
  overflow: hidden;
}

.settings-card-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--gray-50);
}

.settings-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.settings-card-title-icon {
  font-size: 18px;
}

.settings-card-body {
  padding: 20px;
}

.settings-card-body.settings-card-body--no-padding {
  padding: 0;
}

.settings-card-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--border-light);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  background: var(--gray-50);
}

/* Settings Form Elements */
.settings-field {
  margin-bottom: 16px;
}

.settings-field:last-child {
  margin-bottom: 0;
}

.settings-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.settings-input {
  width: 100%;
  padding: 10px 14px;
  font-size: 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: white;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.settings-input:focus {
  outline: none;
  border-color: var(--primary-400);
  box-shadow: 0 0 0 3px var(--primary-100);
}

.settings-input::placeholder {
  color: var(--text-tertiary);
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.settings-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* Settings Helper Text */
.settings-helper {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 6px;
  line-height: 1.4;
}

/* Settings Tags/Chips */
.settings-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px;
  background: var(--gray-50);
  border-radius: 10px;
  min-height: 48px;
}

.settings-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.settings-tag:hover {
  background: var(--red-50);
  border-color: var(--red-200);
  color: var(--red-600);
}

.settings-tag-remove {
  font-size: 14px;
  opacity: 0.5;
}

.settings-tag:hover .settings-tag-remove {
  opacity: 1;
}

/* Settings Add Input Row */
.settings-add-row {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.settings-add-row .settings-input {
  flex: 1;
}

/* Settings stage header (Deal Stages column labels) */
.settings-stage-header {
  display: grid;
  grid-template-columns: 1fr 120px 100px 140px 40px;
  gap: var(--sp-3, 12px);
  padding: var(--sp-2, 8px) var(--sp-3, 12px);
  background: var(--gray-50);
  border-radius: var(--radius-md, 6px);
  margin-bottom: var(--sp-3, 12px);
  font-size: var(--text-xs, 12px);
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.settings-stage-header div {
  padding: 0;
}

/* Helper block with top margin */
.settings-helper-block {
  margin-top: var(--sp-4, 16px);
}

/* Import tips list */
.settings-tips-list {
  margin: 0;
  padding-left: 20px;
  color: var(--text-secondary);
  font-size: var(--text-base, 13px);
  line-height: 1.8;
}

.settings-tips-list code {
  font-size: 0.95em;
}

/* Export & Backup */
.settings-export-description {
  margin: 0 0 var(--sp-4, 16px);
  color: var(--text-secondary);
  font-size: var(--text-md, 14px);
  line-height: 1.6;
}

.settings-export-included {
  background: var(--gray-50);
  padding: var(--sp-4, 14px);
  border-radius: var(--radius-md, 10px);
  border: 1px solid var(--border-light);
}

.settings-export-included strong {
  color: var(--text-primary);
}

/* Tables page */
.settings-tables-header-actions {
  display: flex;
  gap: var(--sp-2, 8px);
  flex-wrap: wrap;
}

.settings-tables-grid-wrap {
  overflow: auto;
  max-height: 400px;
}

.settings-tables-sortable-th {
  cursor: pointer;
  user-select: none;
}

/* Stripe Connect (Invoices & Payments) */
.stripe-connect-status {
  margin-bottom: var(--sp-3, 12px);
  padding: var(--sp-3, 12px) var(--sp-4, 14px);
  border-radius: var(--radius-md, 8px);
  border: 1px solid var(--border-light);
  background: var(--gray-50);
}

.stripe-connect-status-actions {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2, 8px);
  align-items: center;
}

.stripe-connect-actions {
  margin-top: var(--sp-3, 12px);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2, 8px);
  align-items: center;
}

.stripe-connect-disconnect-btn {
  color: var(--red-600, #dc2626);
  border-color: var(--red-200, #fecaca);
}

.stripe-connect-disconnect-btn:hover {
  background: var(--red-50);
  color: var(--red-700);
}

.settings-helper-success {
  color: var(--green-600, #16a34a);
  margin: 0;
}

.settings-checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--sp-2, 8px);
  cursor: pointer;
}

/* File input in settings */
.settings-input-file {
  padding: var(--sp-2, 8px);
}

/* Branding color row */
.settings-color-row {
  display: flex;
  gap: var(--sp-2, 8px);
  align-items: center;
}

.settings-color-picker {
  width: 56px;
  min-width: 56px;
  height: 40px;
  padding: 4px;
  cursor: pointer;
}

.settings-color-row .settings-input:not(.settings-color-picker) {
  flex: 1;
}

.settings-textarea {
  min-height: 100px;
  resize: vertical;
}

/* Integrations page status badge */
.settings-integration-status {
  font-size: var(--text-xs, 12px);
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--gray-100);
  color: var(--text-secondary);
}

.settings-integration-status--connected {
  background: var(--green-100, #dcfce7);
  color: var(--green-700, #15803d);
}

/* Settings Tools Grid */
.settings-tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.settings-tool-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 14px;
  transition: all 0.15s ease;
}

.settings-tool-card:hover {
  border-color: var(--primary-200);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.08);
}

.settings-tool-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.settings-tool-icon {
  font-size: 28px;
}

.settings-tool-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}

.settings-tool-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  flex: 1;
}

/* Settings Users Table */
.settings-users-table {
  width: 100%;
  border-collapse: collapse;
}

.settings-users-table th {
  text-align: left;
  padding: 12px 16px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-tertiary);
  border-bottom: 1px solid var(--border);
}

.settings-users-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-light);
  font-size: 14px;
}

.settings-users-table tbody tr:hover {
  background: var(--gray-50);
}

/* Settings Probability Row */
.settings-prob-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--gray-50);
  border-radius: 10px;
  margin-bottom: 10px;
}

.settings-prob-row:last-child {
  margin-bottom: 0;
}

.settings-prob-pct {
  width: 80px;
}

.settings-prob-label {
  flex: 1;
}

.settings-prob-remove {
  padding: 6px;
  background: transparent;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.15s ease;
}

/* Settings Pipeline Stages Row */
.settings-stage-row {
  display: grid;
  grid-template-columns: 28px 1fr 120px 100px 140px 40px;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--gray-50);
  border-radius: 10px;
  margin-bottom: 10px;
}

.settings-stage-row:last-child {
  margin-bottom: 0;
}

.settings-stage-drag-handle {
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  cursor: grab;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  user-select: none;
}

.settings-stage-drag-handle:active {
  cursor: grabbing;
}

.settings-stage-row.is-dragging {
  opacity: 0.45;
}

.settings-stage-row.is-drop-target {
  outline: 2px dashed var(--accent);
  outline-offset: 2px;
}

.settings-stage-prob {
  width: 120px;
}

.settings-stage-color {
  width: 100px;
  height: 40px;
  padding: 6px;
}

.settings-stage-archived {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
}

.settings-prob-remove:hover {
  background: var(--red-100);
  color: var(--red-600);
}

/* Settings Empty State */
.settings-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-tertiary);
}

.settings-empty-icon {
  font-size: 48px;
  margin-bottom: 12px;
  opacity: 0.5;
}

.settings-empty-text {
  font-size: 14px;
}

/* Responsive */
@media (max-width: 800px) {
  .settings-modal-v2 {
    width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh;
    border-radius: 0;
  }
  
  .settings-layout {
    flex-direction: column;
  }
  
  .settings-sidebar {
    width: 100%;
    min-width: auto;
    max-height: 200px;
  }
  
  .settings-nav {
    display: flex;
    flex-wrap: wrap;
    padding: 8px;
    gap: 4px;
  }
  
  .settings-nav-group {
    display: contents;
  }
  
  .settings-nav-group-label {
    display: none;
  }
  
  .settings-nav-item {
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12px;
  }
  
  .settings-nav-item.active {
    border-left: none;
    padding-left: 12px;
    border-radius: 8px;
  }
  
  .settings-sidebar-footer {
    display: none;
  }
  
  .settings-page-body {
    padding: 16px;
  }
  
  .settings-grid {
    grid-template-columns: 1fr;
  }
}

.modalHead {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--gray-50);
  flex-shrink: 0;
}

.modalTitle {
  font-size: 18px;
  font-weight: 700;
}

.modalBody {
  padding: 16px;
  padding-bottom: 80px; /* Extra breathing room to ensure save button is visible */
  overflow-y: auto;
  flex: 1;
  min-height: 0; /* CRITICAL: allows flexbox scrolling to work properly */
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

.modalFoot {
  padding: 10px 16px;
  border-top: 1px solid var(--border-light);
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  background: rgba(255, 255, 255, 0.98);
  flex-shrink: 0;
  position: sticky;
  bottom: 0;
  z-index: 10;
  backdrop-filter: blur(10px);
  box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
}

.iconBtn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: white;
  cursor: pointer;
  font-size: 16px;
}

.iconBtn:hover {
  background: var(--gray-100);
}

/* ===========================================
   🎴 TAGS
=========================================== */
.tagPicker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  min-height: 42px;
}

.tagChip {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 500;
  border-radius: var(--radius-full);
  background: var(--gray-100);
  color: var(--text-secondary);
  border: 1px solid var(--border-light);
  cursor: pointer;
}

.tagChip:hover {
  background: var(--gray-200);
}

.tagChip.active {
  background: var(--primary-100);
  color: var(--primary-700);
  border-color: var(--primary-500);
}

/* ===========================================
   📊 DEAL INTELLIGENCE
=========================================== */
.deal-intelligence-section {
  background: linear-gradient(135deg, #1e3a5f, #2d5a8a);
  border-radius: var(--radius-xl);
  padding: 20px;
  margin-bottom: 16px;
  color: white;
}

.metric-help-btn {
  width: 18px;
  height: 18px;
  font-size: 10px;
  padding: 0;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.2);
  border: none;
  color: white;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  margin-left: 4px;
}

/* ===========================================
   🎨 ACTIONS DROPDOWN
=========================================== */
.actions-dropdown {
  position: relative;
}

.actions-dropdown-btn {
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  color: #374151; /* Match command-center text color */
  border: 1px solid #e5e7eb; /* Match command-center border */
  background: white;
  border-radius: 8px; /* Match command-center radius */
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
  white-space: nowrap;
}

.dropdown-icon {
  font-size: 14px;
  /* margin-right: 4px; handled by gap */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.actions-menu {
  position: fixed;
  background: white;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: 6px;
  min-width: 180px;
  z-index: 99999;
}

.actions-menu-divider {
  height: 1px;
  margin: 6px 8px;
  background: var(--border);
}

.actions-menu-item {
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 500;
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.actions-menu-item:hover {
  background: var(--gray-50);
  color: var(--primary-600);
}

/* Saved views menu polish */
#savedViewsDropdown {
  min-width: 300px;
  max-width: min(360px, 92vw);
}

#savedViewsDropdown .saved-filters-list {
  max-height: 280px;
  overflow-y: auto;
  padding: 2px;
}

#savedViewsDropdown .saved-filter-item {
  border-radius: 10px;
  padding: 8px 10px;
}

#savedViewsDropdown .saved-filter-item:hover {
  background: #f8fafc;
}

#savedViewsDropdown .saved-filter-name {
  font-size: 13px;
}

#savedViewsDropdown .saved-filter-meta {
  font-size: 11px;
}

#projectSavedViewsDropdown {
  min-width: 300px;
  max-width: min(360px, 92vw);
}

/* ===========================================
   ✨ QUILL EDITOR FIX
=========================================== */
.ql-snow .ql-picker select {
  display: none !important;
}

/* Fix picker alignment */
.ql-snow .ql-picker {
  display: inline-block !important;
  vertical-align: middle !important;
  height: 28px !important;
  position: relative !important;
}

.ql-snow .ql-picker-label {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-width: 100px !important;
  height: 28px !important;
  padding: 0 8px !important;
  padding-right: 24px !important;
  border: 1px solid var(--border-light) !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  position: relative !important;
  background: white !important;
  font-size: 13px !important;
  line-height: 26px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.ql-snow .ql-picker-label::before {
  display: inline-block !important;
  line-height: 26px !important;
}

.ql-snow .ql-picker-label:hover {
  background: var(--gray-100) !important;
}

.ql-snow .ql-picker.ql-expanded .ql-picker-label {
  border-color: var(--primary-500) !important;
}

/* Ensure picker label SVG arrow is visible and positioned correctly */
.ql-snow .ql-picker-label svg.ql-fill,
.ql-snow .ql-picker-label svg.ql-stroke {
  position: absolute !important;
  right: 4px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 12px !important;
  height: 12px !important;
}

/* Specific widths for different picker types */
.ql-snow .ql-picker.ql-font {
  width: 140px !important;
}

.ql-snow .ql-picker.ql-font .ql-picker-label {
  min-width: 140px !important;
  width: 140px !important;
}

.ql-snow .ql-picker.ql-size {
  width: 100px !important;
}

.ql-snow .ql-picker.ql-size .ql-picker-label {
  min-width: 100px !important;
  width: 100px !important;
}

.ql-snow .ql-picker.ql-header {
  width: 110px !important;
}

.ql-snow .ql-picker.ql-header .ql-picker-label {
  min-width: 110px !important;
  width: 110px !important;
}

/* Fix the actual text content display */
.ql-snow .ql-picker-label[data-label]:not([data-label=''])::before {
  content: attr(data-label) !important;
}

/* Font picker specific labels */
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='arial']::before {
  content: 'Arial' !important;
  font-family: Arial, sans-serif !important;
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='times-new-roman']::before {
  content: 'Times New Roman' !important;
  font-family: 'Times New Roman', serif !important;
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='courier']::before {
  content: 'Courier' !important;
  font-family: 'Courier New', monospace !important;
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='georgia']::before {
  content: 'Georgia' !important;
  font-family: Georgia, serif !important;
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='verdana']::before {
  content: 'Verdana' !important;
  font-family: Verdana, sans-serif !important;
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='comic-sans']::before {
  content: 'Comic Sans' !important;
  font-family: 'Comic Sans MS', cursive !important;
}

.ql-snow .ql-picker.ql-font .ql-picker-label:not([data-value])::before {
  content: 'Sans Serif' !important;
}

/* Size picker specific labels */
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='10px']::before {
  content: '10px' !important;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='12px']::before {
  content: '12px' !important;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='14px']::before {
  content: '14px' !important;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='16px']::before {
  content: '16px' !important;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='18px']::before {
  content: '18px' !important;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='20px']::before {
  content: '20px' !important;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='24px']::before {
  content: '24px' !important;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='32px']::before {
  content: '32px' !important;
}

.ql-snow .ql-picker.ql-size .ql-picker-label:not([data-value])::before {
  content: 'Normal' !important;
}

/* Header picker specific labels */
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='1']::before {
  content: 'Heading 1' !important;
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='2']::before {
  content: 'Heading 2' !important;
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='3']::before {
  content: 'Heading 3' !important;
}

.ql-snow .ql-picker.ql-header .ql-picker-label:not([data-value])::before {
  content: 'Normal' !important;
}

.ql-snow .ql-picker-options {
  background: white !important;
  border: 1px solid var(--border-light) !important;
  border-radius: 6px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
  top: 100% !important;
  margin-top: 4px !important;
  z-index: 1000 !important;
  padding: 4px 0 !important;
  max-height: 250px !important;
  overflow-y: auto !important;
}

.ql-snow .ql-picker-item {
  color: var(--text-primary) !important;
  background: transparent !important;
  padding: 8px 12px !important;
  cursor: pointer !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
}

.ql-snow .ql-picker-item:hover {
  background: var(--gray-100) !important;
}

.ql-snow .ql-picker-item.ql-selected {
  background: var(--primary-100) !important;
  color: var(--primary-600) !important;
}

/* Font picker dropdown items */
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='arial']::before {
  content: 'Arial' !important;
  font-family: Arial, sans-serif !important;
}

.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='times-new-roman']::before {
  content: 'Times New Roman' !important;
  font-family: 'Times New Roman', serif !important;
}

.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='courier']::before {
  content: 'Courier' !important;
  font-family: 'Courier New', monospace !important;
}

.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='georgia']::before {
  content: 'Georgia' !important;
  font-family: Georgia, serif !important;
}

.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='verdana']::before {
  content: 'Verdana' !important;
  font-family: Verdana, sans-serif !important;
}

.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='comic-sans']::before {
  content: 'Comic Sans' !important;
  font-family: 'Comic Sans MS', cursive !important;
}

.ql-snow .ql-picker.ql-font .ql-picker-item:not([data-value])::before {
  content: 'Sans Serif' !important;
}

/* Size picker dropdown items */
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='10px']::before {
  content: '10px' !important;
  font-size: 10px !important;
}

.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='12px']::before {
  content: '12px' !important;
  font-size: 12px !important;
}

.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='14px']::before {
  content: '14px' !important;
  font-size: 14px !important;
}

.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='16px']::before {
  content: '16px' !important;
  font-size: 16px !important;
}

.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='18px']::before {
  content: '18px' !important;
  font-size: 18px !important;
}

.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='20px']::before {
  content: '20px' !important;
  font-size: 20px !important;
}

.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='24px']::before {
  content: '24px' !important;
  font-size: 24px !important;
}

.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='32px']::before {
  content: '32px' !important;
  font-size: 32px !important;
}

.ql-snow .ql-picker.ql-size .ql-picker-item:not([data-value])::before {
  content: 'Normal' !important;
}

/* Header picker dropdown items */
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='1']::before {
  content: 'Heading 1' !important;
  font-size: 24px !important;
  font-weight: bold !important;
}

.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='2']::before {
  content: 'Heading 2' !important;
  font-size: 20px !important;
  font-weight: bold !important;
}

.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='3']::before {
  content: 'Heading 3' !important;
  font-size: 16px !important;
  font-weight: bold !important;
}

.ql-snow .ql-picker.ql-header .ql-picker-item:not([data-value])::before {
  content: 'Normal' !important;
}

/* Fix toolbar alignment */
.ql-toolbar.ql-snow {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  padding: 8px !important;
  border: 1px solid var(--border-light) !important;
  border-bottom: none !important;
  border-radius: 8px 8px 0 0 !important;
  background: var(--gray-50) !important;
}

.ql-toolbar.ql-snow .ql-formats {
  display: inline-flex !important;
  align-items: center !important;
  margin-right: 12px !important;
}

.ql-toolbar.ql-snow button:not(.ql-picker-label) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  margin: 0 2px !important;
  border-radius: 4px !important;
}

/* Keep picker labels roomy (color/background pickers) */
.ql-toolbar.ql-snow .ql-picker {
  height: 32px !important;
}
.ql-toolbar.ql-snow .ql-picker-label {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 32px !important;
  height: 32px !important;
  padding: 2px 8px !important;
  border-radius: 6px !important;
}

.ql-toolbar.ql-snow button:hover {
  background: var(--gray-200) !important;
}

.ql-toolbar.ql-snow button.ql-active {
  background: var(--primary-100) !important;
  color: var(--primary-600) !important;
}

/* Fix editor container */
.ql-container.ql-snow {
  border: 1px solid var(--border-light) !important;
  border-top: none !important;
  border-radius: 0 0 8px 8px !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

.ql-editor {
  min-height: 200px !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  padding: 16px !important;
}

.ql-editor.ql-blank::before {
  color: var(--text-muted) !important;
  font-style: normal !important;
  left: 16px !important;
}

/* ===========================================
   📊 Document Tables
   Styling for user-inserted HTML tables
=========================================== */
.ql-editor table.doc-table,
.ql-editor table,
table.doc-table {
  border-collapse: collapse;
  width: 100%;
  margin: 16px 0;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  border-radius: 6px;
  overflow: hidden;
}

.ql-editor table.doc-table th,
.ql-editor table.doc-table td,
.ql-editor table th,
.ql-editor table td,
table.doc-table th,
table.doc-table td {
  border: 1px solid #e5e7eb;
  padding: 10px 12px;
  text-align: left;
  min-width: 80px;
  vertical-align: top;
  font-size: 14px;
  line-height: 1.5;
}

.ql-editor table.doc-table th,
.ql-editor table th,
table.doc-table th {
  background: #f9fafb;
  font-weight: 600;
  color: #111827;
  border-bottom: 2px solid #e5e7eb;
}

.ql-editor table.doc-table tbody tr:hover,
.ql-editor table tbody tr:hover,
table.doc-table tbody tr:hover {
  background: #f9fafb;
}

/* Make table cells editable and visually clear when focused */
.ql-editor table.doc-table td:focus,
.ql-editor table td:focus,
table.doc-table td:focus {
  outline: 2px solid var(--primary-500);
  outline-offset: -2px;
  background: #eff6ff;
}

/* Toolbar button icon for table */
.ql-toolbar button.ql-table::before {
  content: "⊞";
  font-size: 18px;
  font-weight: 600;
}

.ql-toolbar button.ql-table {
  width: 28px !important;
}

/* ===========================================
   🧠 Smart Fields (fillable placeholders)
   Minimal styling for editor + preview chips
=========================================== */
.sf-mgr-list {
  display: grid;
  gap: 10px;
}

.sf-mgr-empty {
  padding: 12px;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
  background: #ffffff;
  color: #64748b;
  font-size: 12px;
  font-weight: 600;
}

.sf-mgr-item {
  width: 100%;
  text-align: left;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  transition: all 120ms ease;
}

.sf-mgr-item:hover {
  border-color: #c7d2fe;
  background: #f8fafc;
}

.sf-mgr-item.is-active {
  border-color: #93c5fd;
  background: #eff6ff;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

.sf-mgr-item-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sf-mgr-item-title {
  font-weight: 700;
  color: #111827;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sf-mgr-item-key {
  font-size: 11px;
  color: #64748b;
  font-weight: 600;
}

.sf-mgr-item-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.sf-mgr-item-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.sf-mgr-tag {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #475569;
}

.sf-mgr-tag.required {
  background: #fef2f2;
  border-color: #fecaca;
  color: #b91c1c;
}

.sf-mgr-count {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  color: #6b7280;
  background: #f3f4f6;
}

.sf-mgr-count.has-usage {
  background: #ecfdf5;
  border-color: #bbf7d0;
  color: #059669;
}

.sf-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid #bfdbfe;
  background: #eff6ff;
  color: var(--primary-700);
  font-weight: 600;
  font-size: 12px;
  line-height: 1.4;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: all 0.15s ease;
  position: relative;
}

.sf-chip:hover {
  border-color: #93c5fd;
  background: #dbeafe;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
}

.sf-chip-token {
  display: none;
}

.sf-chip[data-required="true"]::after {
  content: " *";
  color: #dc2626;
  margin-left: 2px;
  font-weight: 700;
}

/* Fill Mode controls (document instances) */
.sf-input-host {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border-radius: 12px;
  border: 1px dashed #93c5fd;
  background: #f8fafc;
  margin: 0 2px;
  vertical-align: baseline;
}

.sf-input-host.sf-missing {
  border-color: #ef4444;
  background: #fef2f2;
}

.sf-input-host.sf-invalid {
  border-color: #f59e0b;
  background: #fffbeb;
}

.sf-input-host.sf-highlight {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25), 0 10px 30px rgba(37, 99, 235, 0.12);
  border-color: var(--primary-600) !important;
  background: #eff6ff !important;
}

.sf-chip.sf-highlight {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25), 0 10px 30px rgba(37, 99, 235, 0.12);
  border-color: var(--primary-600) !important;
  background: #eff6ff !important;
}

/* Smart Fields right-side pane (Fill Mode) */
.sf-fields-pane {
  width: 360px;
  max-width: 360px;
  border-left: 1px solid #e5e7eb;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.sf-fields-pane.hidden {
  display: none;
}

.sf-fields-pane-header {
  padding: 14px 14px 10px;
  border-bottom: 1px solid #e5e7eb;
  background: #f8fafc;
}

.sf-fields-pane-title {
  font-size: 12px;
  font-weight: 700;
  color: #111827;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.sf-fields-pane-progress {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.sf-fields-pane-body {
  flex: 1;
  overflow-y: auto;
  padding: 10px 14px 14px;
  min-height: 0;
}

.sf-pane-row {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 10px;
  margin-bottom: 10px;
  background: #ffffff;
  cursor: pointer;
}

.sf-pane-row:hover {
  border-color: #bfdbfe;
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.08);
}

.sf-pane-row.sf-missing {
  border-color: #fecaca;
  background: #fef2f2;
}

.sf-pane-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.sf-pane-label {
  font-size: 13px;
  font-weight: 700;
  color: #111827;
}

.sf-pane-meta {
  font-size: 11px;
  font-weight: 700;
  color: #6b7280;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.sf-pane-error {
  font-size: 11px;
  font-weight: 700;
  color: #b91c1c;
}

.sf-pane-control {
  display: grid;
  gap: 8px;
}

.sf-pane-section {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #ffffff;
  margin-bottom: 10px;
  overflow: hidden;
}

.sf-pane-section[open] {
  box-shadow: 0 6px 18px rgba(17, 24, 39, 0.06);
}

.sf-pane-section-summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: #f8fafc;
  border-bottom: 1px solid #e5e7eb;
}

.sf-pane-section-summary::-webkit-details-marker {
  display: none;
}

.sf-pane-section-title {
  font-size: 12px;
  font-weight: 700;
  color: #111827;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.sf-pane-section-badge {
  font-size: 11px;
  font-weight: 700;
  color: var(--primary-600);
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.sf-pane-section-body {
  padding: 10px;
}

.sf-pane-section-body .sf-pane-row {
  margin-bottom: 10px;
}

.sf-pane-section-body .sf-pane-row:last-child {
  margin-bottom: 0;
}

.sf-fields-pane-footer {
  padding: 12px 14px;
  border-top: 1px solid #e5e7eb;
  background: #ffffff;
}

@media (max-width: 900px) {
  .sf-fields-pane {
    display: none;
  }
}

.sf-inline-control {
  font-size: 13px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 4px 8px;
  background: white;
  color: #111827;
  outline: none;
}

.sf-inline-control:disabled {
  background: #f3f4f6;
  color: #6b7280;
  border-color: #e5e7eb;
}

.sf-inline-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: #1f2937;
}

.sf-inline-checkbox input {
  width: 16px;
  height: 16px;
}

.sf-required-star {
  color: #dc2626;
  font-weight: 700;
}

/* Signature field */
.sf-signature-host {
  align-items: stretch;
  padding: 10px;
}

.sf-signature-pad {
  width: min(420px, 100%);
  height: 140px;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.06);
  overflow: hidden;
}

.sf-signature-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
  flex-wrap: wrap;
}

.sf-signature-name {
  flex: 1;
  min-width: 180px;
  font-size: 13px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 6px 10px;
}

.sf-signature-preview {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sf-signature-img {
  width: min(420px, 100%);
  height: 140px;
  object-fit: contain;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  background: #ffffff;
}

.sf-signature-meta {
  font-size: 12px;
  color: #6b7280;
  font-weight: 600;
}

.sf-signature-clear-btn {
  align-self: flex-start;
}

/* ===========================================
   📐 Field Row (structured label + field embed)
   Rock-solid alignment using CSS layout
=========================================== */

/* Editor mode field-row (inside Quill) */
.field-row {
  position: relative;
  display: inline-block; /* allow side-by-side placement */
  vertical-align: top;
  margin: 0 8px 8px 0; /* Right and bottom margin for spacing */
  padding: 8px 12px 8px 28px; /* Consistent compact padding */
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: all 0.15s ease;
  cursor: default;
  user-select: none;
  min-height: auto; /* Ensure no forced min-height */
  line-height: 1; /* Consistent line height */
}

/* Add visual feedback for dragging */
.field-row-dragging {
  opacity: 0.4 !important;
  background: #eff6ff !important;
  border: 1px dashed var(--primary-500) !important;
}

.field-row-target-top {
  border-top: 3px solid var(--primary-500) !important;
  background: linear-gradient(to bottom, rgba(59, 130, 246, 0.05) 0%, transparent 100%) !important;
}

.field-row-target-bottom {
  border-bottom: 3px solid var(--primary-500) !important;
  background: linear-gradient(to top, rgba(59, 130, 246, 0.05) 0%, transparent 100%) !important;
}

/* Compact density: smaller, single-line focused (now default for all) */
.field-row--compact {
  /* Padding already set in base .field-row */
  min-height: auto !important;
}

.field-row--compact .field-row__label {
  font-size: 13px !important; /* Keep consistent with default */
}

.field-row--compact .field-row__chip {
  padding: 6px 12px !important; /* Keep consistent with default */
  font-size: 13px !important;
}

/* Comfortable density: spacious (legacy - rarely used now) */
.field-row--comfortable {
  padding: 10px 14px 10px 32px; /* Slightly more spacious */
  min-height: auto;
}

/* Row spacing toggle */
.field-row--tight {
  margin-bottom: 0;
}
.field-row--loose {
  margin-bottom: 8px;
}

/* Drag handle */
.field-row__drag {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 24px;
  background: transparent;
  cursor: grab;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.field-row:hover .field-row__drag {
  opacity: 1;
}

.field-row__drag::before {
  content: "⋮⋮";
  color: #94a3b8;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
}

.field-row__drag:hover::before {
  color: var(--primary-500);
}

.field-row__drag:active {
  cursor: grabbing;
}

/* Arrow navigation buttons - absolutely positioned on right */
.field-row__arrows {
  display: flex;
  align-items: center;
  gap: 4px;
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}

.field-row__arrow {
  width: 24px;
  height: 24px;
  display: none; /* Hidden by default, shown by JS when adjacent field exists */
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  transition: all 0.15s ease;
  padding: 0;
  line-height: 1;
  opacity: 0.6;
}

.field-row__arrow--visible {
  display: flex !important;
}

.field-row:hover .field-row__arrow--visible {
  opacity: 1;
}

.field-row__arrow:hover {
  background: #eff6ff;
  border-color: var(--primary-500);
  color: var(--primary-600);
  opacity: 1 !important;
}

.field-row__arrow:active {
  background: #dbeafe;
  transform: scale(0.95);
}

/* Remove spacing from paragraphs containing field-row embeds */
.ql-editor p:has(.field-row) {
  margin: 0;
  padding: 0;
  line-height: 0;
}

/* Remove spacing between paragraphs with field-rows */
.ql-editor p:has(.field-row) + p:has(.field-row),
.ql-editor p:has(.field-row) + p,
.ql-editor p + p:has(.field-row) {
  margin-top: 0;
  margin-bottom: 0;
}

/* Ensure field-row embeds don't create extra line breaks */
.ql-editor .field-row {
  display: inline-block;
  vertical-align: top;
  margin: 0;
  line-height: 1;
}

.field-row:hover {
  border-color: #93c5fd;
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
}

.field-row:focus {
  outline: none;
  border-color: var(--primary-600);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

/* Safety-net: hide any empty <p> that still sits between two block embeds.
   The JS removeInterBlockEmptyParagraphs() handles this at insert time;
   this CSS catches any that slip through on load/refresh. */
/* In merged view, use the class to suppress ALL inter-block paragraphs
   regardless of what Quill's scroll normalizer does asynchronously */
.ql-editor.is-merged-view > p,
.ql-editor.is-merged-view > .line-items-embed + p {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  font-size: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  border: none !important;
}

.ql-editor > .line-items-embed + p:not(:last-child) {
  display: none !important;
}

/* Line Items Embed (editor blocks - Invoice Header, Invoice Items, etc.) */
.ql-editor .line-items-embed {
  border: 1px solid #e5eaf2;
  border-radius: 0;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  overflow: visible;
  margin: 0;
  display: block;
  position: relative;
  /* No z-index here — keeping z-index: auto means this element does NOT create
     a stacking context, which allows the insert circles (with positive z-index)
     to compare directly against siblings and always paint on top. */
}

/* No rounded corners anywhere — blocks flow as a continuous document */
.ql-editor .line-items-embed,
.ql-editor .line-items-embed *,
.ql-editor .text-block-shell,
.ql-editor .text-block-shell *,
.line-items-embed,
.line-items-embed *,
.text-block-shell,
.text-block-shell * {
  border-radius: 0 !important;
}

/* Elevate the whole block when selected so toolbar and outline sit above siblings */
.ql-editor .line-items-embed.block-selected {
  z-index: 10;
}

.line-items-embed.block-selected,
.ql-editor .line-items-embed.block-selected {
  border-color: #1d4ed8;
  box-shadow: 0 0 0 1px rgba(29, 78, 216, 0.16);
}

.line-items-block-toolbar {
  display: none;
  position: absolute;
  top: -22px;
  right: 10px;
  z-index: 24;
  gap: 4px;
  align-items: center;
  justify-content: flex-end;
  padding: 0;
  pointer-events: none;
}

.line-items-embed:hover .line-items-block-toolbar,
.line-items-embed.block-selected .line-items-block-toolbar {
  display: flex;
}
/* In print layout, keep selection chrome inside the block so selecting
   never appears to pull content up into the page navigation strip. */
.print-layout-mode .line-items-block-toolbar {
  top: 8px;
}

.line-items-block-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  color: #64748b;
  transition: all 0.15s ease;
  padding: 0;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(15,23,42,0.10);
  pointer-events: auto;
}

.line-items-block-btn:hover {
  background: #eff6ff;
  border-color: #3b82f6;
  color: #2563eb;
}

.line-items-block-btn[data-action="properties"] {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid #93c5fd;
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  color: #1d4ed8;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.10);
}

.line-items-block-btn[data-action="properties"]:hover {
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  border-color: #2563eb;
  color: #1e40af;
  transform: translateY(-1px);
}

.line-items-label {
  position: absolute;
  top: -22px;
  left: 10px;
  z-index: 23;
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid #dbe5f2;
  box-shadow: 0 2px 6px rgba(15,23,42,0.08);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  color: #475569;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
}
.line-items-embed:hover > .line-items-label,
.line-items-embed.block-selected > .line-items-label {
  opacity: 1;
  pointer-events: auto;
}
.print-layout-mode .line-items-label {
  top: 8px;
}

.line-items-insert-circle {
  position: absolute;
  left: 50%;
  z-index: 30;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid rgba(147, 197, 253, 0.45);
  background: rgba(238, 245, 255, 0.55);
  color: rgba(37, 99, 235, 0.38);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  box-shadow: none;
  opacity: 0;
  pointer-events: none;
  transition: width 0.15s ease, height 0.15s ease, transform 0.15s ease,
              background 0.15s ease, border-color 0.15s ease,
              color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.line-items-insert-circle--top {
  top: 0;
  transform: translate(-50%, -50%);
}

.line-items-insert-circle--bottom {
  bottom: 0;
  transform: translate(-50%, 50%);
}

/* When two blocks are adjacent (touching), collapse double borders into one */
.ql-editor .line-items-embed + .line-items-embed {
  margin-top: -1px;
}

/* Hide the redundant top (+) circle on any block that directly follows another block */
.line-items-embed + .line-items-embed .line-items-insert-circle--top {
  display: none !important;
}

/* Show insert circles prominently when block is hovered or has focus */
.line-items-embed:hover > .line-items-insert-circle,
.line-items-embed:focus-within > .line-items-insert-circle,
.line-items-embed.block-selected > .line-items-insert-circle {
  width: 26px;
  height: 26px;
  background: linear-gradient(180deg, #f0f7ff 0%, #e0edff 100%);
  border-color: rgba(147, 197, 253, 0.8);
  color: rgba(37, 99, 235, 0.7);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.1);
  opacity: 1;
  pointer-events: auto;
}

.line-items-insert-circle:hover {
  width: 28px;
  height: 28px;
  background: linear-gradient(180deg, #eef5ff 0%, #dceafe 100%);
  border-color: #93c5fd;
  color: #2563eb;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.18);
  opacity: 1;
  pointer-events: auto;
}

.line-items-embed:hover > .line-items-insert-circle--top,
.line-items-embed:focus-within > .line-items-insert-circle--top,
.line-items-embed.block-selected > .line-items-insert-circle--top,
.line-items-insert-circle--top:hover {
  transform: translate(-50%, -50%);
}

.line-items-embed:hover > .line-items-insert-circle--bottom,
.line-items-embed:focus-within > .line-items-insert-circle--bottom,
.line-items-embed.block-selected > .line-items-insert-circle--bottom,
.line-items-insert-circle--bottom:hover {
  transform: translate(-50%, 50%);
}

.insert-block-drawer-group {
  display: grid;
  gap: 12px;
}

.insert-block-rail-layout {
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr);
  gap: 12px;
  min-height: 100%;
}

.insert-block-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding-right: 0;
  border-right: 1px solid #e2e8f0;
  position: relative;
  z-index: 1;
}

.insert-block-rail__separator {
  width: 28px;
  height: 1px;
  background: #dbe5f2;
  margin: 2px 0 2px;
}

.insert-block-rail-btn {
  width: 54px;
  min-height: 48px;
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 5px 2px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: #475569;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

.insert-block-rail-btn:hover {
  background: #f8fbff;
  border-color: #dbe5f2;
  color: #1d4ed8;
}

.insert-block-rail-btn--active {
  background: linear-gradient(180deg, #eef5ff 0%, #dceafe 100%);
  border-color: #bfdbfe;
  color: #1d4ed8;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.14);
}

.insert-block-rail-btn__icon {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.insert-block-rail-btn__icon svg {
  width: 28px;
  height: 28px;
  display: block;
}

.insert-block-rail-btn__label {
  font-size: 9px;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  max-width: 50px;
}

.insert-block-panel {
  min-width: 0;
  display: grid;
  gap: 14px;
  align-content: start;
}

.insert-block-drawer-group__label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
}

/* Non-text block tiles: 2-column vertical card grid */
.insert-block-drawer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-content: start;
}

/* Single tile in a category spans both columns */
.insert-block-drawer-grid .insert-block-tile:only-child {
  grid-column: 1 / -1;
}

/* Text-layout tiles use 2-col grid to keep the drawer narrow */
.insert-block-drawer-grid--content {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Default tile: vertical card with icon-area header */
.insert-block-tile {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto;
  justify-items: center;
  gap: 0;
  padding: 0 0 16px;
  border: 1px solid #dbe5f2;
  border-radius: 16px;
  background: #fff;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
}

.insert-block-tile:hover {
  transform: translateY(-2px);
  border-color: #93c5fd;
  box-shadow: 0 8px 22px rgba(37, 99, 235, 0.13);
}

/* Icon — full-width coloured header band */
.insert-block-tile__icon {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 20px 0 18px;
  margin-bottom: 12px;
  background: linear-gradient(180deg, #eef5ff 0%, #ddeaff 100%);
}

.insert-block-tile__icon svg {
  display: block;
  width: 72px;
  height: 72px;
}

.insert-block-tile__preview {
  display: block;
  width: 100%;
}

.insert-block-tile__preview svg {
  display: block;
  width: 100%;
  height: auto;
}

.insert-block-tile--text-layout {
  /* Reset the horizontal-list layout from the base tile */
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  column-gap: 0;
  row-gap: 8px;
  align-items: start;
  align-content: start;
  justify-items: center;
  /* Compact card */
  padding: 12px 10px 12px;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: unset;
}

.insert-block-tile--text-layout:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.10);
}

.insert-block-tile--text-layout .insert-block-tile__preview {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  margin: 0;
  display: flex;
  justify-content: center;
}

.insert-block-tile--text-layout .insert-block-tile__preview svg {
  width: 80%;
  height: auto;
  max-height: 80px;
  display: block;
}

.insert-block-tile--text-layout .insert-block-tile__title {
  grid-column: 1;
  grid-row: 2;
  font-size: 12px;
  text-align: center;
  font-weight: 700;
  line-height: 1.2;
  margin-top: 0;
  color: #334155;
  /* Override the horizontal-tile column assignment from base title */
  align-self: auto;
}

.insert-block-tile__title {
  grid-column: 1;
  grid-row: 2;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  color: #0f172a;
  text-align: center;
  margin-bottom: 5px;
}

.insert-block-tile__desc {
  grid-column: 1;
  grid-row: 3;
  padding: 0 10px;
  font-size: 11px;
  line-height: 1.4;
  color: #64748b;
  text-align: center;
}

.insert-block-empty-state {
  min-height: 240px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 12px;
  padding: 28px 20px;
  border: 1px dashed #cbd5e1;
  border-radius: 18px;
  background: linear-gradient(180deg, #fbfdff 0%, #f8fafc 100%);
  text-align: center;
}

.insert-block-empty-state__icon {
  color: #94a3b8;
}

.insert-block-empty-state__icon .insert-block-rail-btn__icon {
  width: 40px;
  height: 40px;
}

.insert-block-empty-state__icon svg {
  width: 40px;
  height: 40px;
}

.insert-block-empty-state__title {
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
}

.insert-block-empty-state__desc {
  max-width: 360px;
  font-size: 13px;
  line-height: 1.55;
  color: #64748b;
}

.insert-block-page-panel {
  display: grid;
  gap: 14px;
}

.insert-block-page-panel__heading {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #94a3b8;
}

.insert-block-page-panel__sub {
  font-size: 12px;
  line-height: 1.5;
  color: #64748b;
  margin-top: -6px;
}

.portal-settings-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #dbe5f2;
  border-radius: 12px;
  background: #ffffff;
}

.portal-settings-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
  cursor: pointer;
}

.portal-settings-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #2563eb;
  flex-shrink: 0;
  cursor: pointer;
}

.portal-settings-toggle__title {
  font-size: 12px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 2px;
}

.portal-settings-toggle__desc {
  font-size: 11px;
  line-height: 1.45;
  color: #64748b;
}

.portal-settings-note {
  font-size: 11px;
  line-height: 1.45;
  color: #64748b;
  padding: 2px 2px 0;
}

/* Nav preview strip */
.page-nav-preview-strip {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid #dbe5f2;
  border-radius: 10px;
  background: #f8fafc;
}

.page-nav-preview-strip__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #94a3b8;
}

.page-nav-preview-strip__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.page-nav-preview-btn {
  padding: 5px 10px;
  border: 1.5px solid #bfdbfe;
  border-radius: 8px;
  background: #fff;
  font-size: 11px;
  font-weight: 700;
  color: #0f172a;
  white-space: nowrap;
}

/* Nav sections editor */
.page-nav-sections-panel {
  display: grid;
  gap: 0;
  border: 1px solid #dbe5f2;
  border-radius: 10px;
  overflow: hidden;
}

.page-nav-sections-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: #f8fafc;
  border-bottom: 1px solid #e8edf3;
  font-size: 11px;
  font-weight: 700;
  color: #475569;
}

.page-nav-sections-panel__count {
  font-size: 10px;
  font-weight: 600;
  color: #94a3b8;
}

.page-nav-sections-list {
  display: grid;
  gap: 0;
}

.page-nav-section-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid #f0f4f8;
}

.page-nav-section-row:last-child {
  border-bottom: none;
}

.page-nav-section-row__color {
  display: flex;
  align-items: center;
}

.page-nav-section-row__info {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.page-nav-section-row__type {
  font-size: 10px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.page-nav-label-input {
  width: 100%;
  box-sizing: border-box;
  padding: 5px 8px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #0f172a;
  background: #fff;
  font-family: inherit;
  outline: none;
  transition: border-color 0.12s;
}

.page-nav-label-input:focus {
  border-color: #4F73FF;
}

.page-nav-section-row__toggles {
  display: grid;
  gap: 4px;
  flex-shrink: 0;
}

.page-nav-toggle-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 600;
  color: #475569;
  white-space: nowrap;
  cursor: pointer;
}

.page-nav-toggle-label input[type="checkbox"] {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: #4F73FF;
}

.page-nav-empty {
  padding: 16px;
  text-align: center;
  font-size: 12px;
  color: #94a3b8;
  border: 1px dashed #e2e8f0;
  border-radius: 10px;
}

/* Page tools grid */
.insert-block-page-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.insert-block-page-card {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 10px;
  row-gap: 2px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid #dbe5f2;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  text-align: left;
  cursor: pointer;
  transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
}

.insert-block-page-card:hover {
  transform: translateY(-1px);
  border-color: #93c5fd;
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.10);
}

.insert-block-page-card__icon {
  grid-column: 1;
  grid-row: 1 / 3;
  color: #2563eb;
  align-self: center;
}

.insert-block-page-card__title {
  grid-column: 2;
  grid-row: 1;
  font-size: 13px;
  font-weight: 800;
  color: #0f172a;
  align-self: end;
}

.insert-block-page-card__desc {
  grid-column: 2;
  grid-row: 2;
  font-size: 11px;
  line-height: 1.4;
  color: #64748b;
  align-self: start;
}

/* Content width affects only width; keep block height from growing due to grid stretch */
.ql-editor .text-block-shell,
.text-block-shell {
  align-items: start;
}

/* Padding (top & bottom) from block setting — enforced so it always applies */
.ql-editor .text-block-shell[data-padding="s"],
.text-block-shell[data-padding="s"] {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}
.ql-editor .text-block-shell[data-padding="m"],
.text-block-shell[data-padding="m"] {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}
.ql-editor .text-block-shell[data-padding="l"],
.text-block-shell[data-padding="l"] {
  padding-top: 28px !important;
  padding-bottom: 28px !important;
}
/* custom padding uses inline style from settings.customPaddingPx (no fixed rule) */

.text-block-editable {
  outline: none;
  cursor: text;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  position: relative;
}

.text-block-editable--empty:not(:focus)::before {
  content: attr(data-placeholder);
  color: #94a3b8;
}

/* Smart Approval Block — card, action buttons, add-card hover */
.approval-item-card {
  transition: box-shadow 0.15s;
}
.approval-item-add {
  transition: background 0.15s, border-color 0.15s;
}
.approval-item-add:hover {
  background: #f0f9ff !important;
  border-color: #93c5fd !important;
}
.approval-preview-card {
  transition: box-shadow 0.15s, border-color 0.15s;
}
.approval-card--approved {
  box-shadow: 0 0 0 2px #22c55e !important;
  border-color: #22c55e !important;
}
.approval-card--approved .approval-btn-approve {
  background: #22c55e !important;
  color: #fff !important;
  border-color: #22c55e !important;
}
.approval-card--changes {
  box-shadow: 0 0 0 2px #f59e0b !important;
  border-color: #f59e0b !important;
}
.approval-card--changes .approval-btn-changes {
  background: #f59e0b !important;
  color: #fff !important;
  border-color: #f59e0b !important;
}
.approval-comment-box {
  display: none;
}
.approval-btn-approve,
.approval-btn-changes {
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.approval-btn-approve:hover {
  background: #dcfce7 !important;
  border-color: #16a34a !important;
}
.approval-btn-changes:hover {
  background: #fef3c7 !important;
  border-color: #d97706 !important;
}

/* Image adjust overlay — reveal on parent hover */
div:hover > .img-adj-overlay,
div:focus-within > .img-adj-overlay {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Mini rich-text toolbar */
#text-block-mini-toolbar button[data-tbcmd]:hover {
  background: rgba(255,255,255,0.12);
}
#text-block-mini-toolbar button[data-tbcmd]:active {
  background: rgba(255,255,255,0.2);
}
#text-block-mini-toolbar select:hover {
  background: #374f6b;
}
#text-block-mini-toolbar select option {
  background: #1e293b;
  color: #e2e8f0;
}

/* Momentum style normalization for composer Data Entry drawer */
.momentum-data-entry-pane input:not([type="checkbox"]):not([type="radio"]),
.momentum-data-entry-pane select,
.momentum-data-entry-pane textarea,
.momentum-data-entry-pane button,
.momentum-data-entry-pane .btn {
  border-radius: 8px !important;
}

.momentum-data-entry-pane .btn,
.momentum-data-entry-pane button {
  font-weight: 700;
}

/* Invoice Header block: real invoice header layout (INVOICE title, Bill To, Ship To sections) */
.line-items-preview-invoice-header {
  font-size: 13px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 14px 18px 18px 14px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
}

.line-items-preview-inv-accent {
  height: 4px;
  margin: -14px -18px 14px -14px;
  border-radius: 12px 12px 0 0;
  background: linear-gradient(90deg, #0f766e 0%, #14b8a6 100%);
}

.line-items-preview-inv-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: start;
}

.line-items-preview-inv-heading {
  min-width: 0;
  padding-top: 2px;
}

.line-items-preview-inv-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 90px;
  height: 64px;
  padding: 0 16px;
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
  background: #f8fafc;
  color: #0f172a;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}

.line-items-preview-inv-logo-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 64px;
  margin-bottom: 10px;
}

.line-items-preview-inv-logo-img {
  display: block;
  max-width: 260px;
  max-height: 86px;
  object-fit: contain;
  object-position: left top;
}

.line-items-preview-inv-title-wrap {
  text-align: right;
}

.line-items-preview-inv-kicker {
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.line-items-preview-inv-title {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #111827;
  margin-bottom: 0;
}

.line-items-preview-inv-company {
  color: #374151;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}

.line-items-preview-inv-company--subtle {
  color: #6b7280;
  font-size: 13px;
  font-weight: 500;
  margin-top: 2px;
}

.line-items-preview-invoice-header--simple {
  padding: 0 18px 18px 14px;
}

.line-items-preview-inv-top--simple {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  min-height: 200px;
  margin: 0 -18px 0 -14px;
  padding: 18px 22px 26px 16px;
  background: linear-gradient(135deg, #0f766e 0%, #14b8a6 100%);
}

.line-items-preview-inv-left {
  min-width: 0;
  justify-self: start;
  align-self: start;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.line-items-preview-inv-company-block {
  min-width: 180px;
  text-align: right;
}

.line-items-preview-inv-company--strong {
  font-size: 14px;
  font-weight: 700;
}

.line-items-preview-inv-top--simple .line-items-preview-inv-company--strong {
  color: #ffffff;
}

.line-items-preview-inv-top--simple .line-items-preview-inv-company--subtle {
  color: rgba(255, 255, 255, 0.88);
}

.line-items-preview-inv-logo--simple {
  min-width: 104px;
  height: 70px;
  margin-bottom: 6px;
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.line-items-preview-inv-logo-wrap--simple {
  min-height: 70px;
  margin-bottom: 6px;
}

.line-items-preview-inv-logo-img--simple {
  max-width: 168px;
  max-height: 96px;
  object-fit: contain;
  object-position: left top;
}

.line-items-preview-inv-title--simple {
  font-size: 42px;
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 0.95;
  color: #ffffff;
}

.line-items-preview-inv-divider {
  height: 1px;
  background: #d1d5db;
  margin: 18px 0 14px;
}

.line-items-preview-inv-panels {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.line-items-preview-inv-panels--simple {
  margin-top: 0;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: start;
}

.line-items-preview-inv-meta {
  font-size: 13px;
  color: #111827;
  line-height: 1.35;
  margin-bottom: 6px;
}

.line-items-preview-billto,
.line-items-preview-shipto,
.line-items-preview-inv-details {
  background: #f8fafc;
  padding: 14px 16px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  min-height: 120px;
}

.line-items-preview-billto-label,
.line-items-preview-shipto-label {
  font-size: 12px;
  font-weight: 800;
  color: #374151;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.line-items-preview-billto-value,
.line-items-preview-shipto-value {
  font-size: 13px;
  color: #6b7280;
  line-height: 1.45;
  white-space: normal;
}

.line-items-preview-billto--simple,
.line-items-preview-inv-details--simple {
  background: transparent;
  padding: 0;
  border-radius: 0;
  border: none;
  min-height: 0;
}

.line-items-preview-billto--simple .line-items-preview-billto-label {
  margin-bottom: 6px;
}

.line-items-preview-billto--simple .line-items-preview-billto-value {
  color: #111827;
  line-height: 1.5;
}

.line-items-preview-inv-details--simple {
  min-width: 170px;
}

.line-items-preview-inv-detail-row {
  display: grid;
  gap: 2px;
  justify-items: end;
  margin-bottom: 8px;
  text-align: right;
}

.line-items-preview-inv-detail-row span {
  font-size: 10px;
  font-weight: 800;
  color: #374151;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.line-items-preview-inv-detail-row strong {
  font-size: 13px;
  font-weight: 600;
  color: #111827;
}

@media (max-width: 760px) {
  .line-items-preview-inv-top {
    grid-template-columns: 1fr;
  }

  .line-items-preview-inv-title-wrap {
    text-align: left;
  }

  .line-items-preview-inv-panels {
    grid-template-columns: 1fr;
  }

  .line-items-preview-inv-panels--simple {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .line-items-preview-inv-company-block,
  .line-items-preview-inv-details--simple,
  .line-items-preview-inv-detail-row {
    text-align: left;
    justify-items: start;
  }
}

/* Content wrapper contains label + field in one span */
.field-row__content {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding-right: 100px; /* Space for arrows on right */
  min-height: auto; /* No forced height */
  line-height: 1; /* Consistent line height */
}

/* Left placement - label and field side by side */
.field-row--left .field-row__content {
  flex-direction: row;
  align-items: center;
}

.field-row--left .field-row__label {
  width: 140px;
  min-width: 140px;
  flex-shrink: 0;
  text-align: right;
  padding-right: 12px;
  white-space: normal;
  overflow: visible;
}

.field-row--left .field-row__field {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
}

/* Compact mode: smaller labels in editor */
.field-row--compact.field-row--left .field-row__label {
  width: 110px;
  min-width: 110px;
}

.field-row--compact.field-row--left .field-row__content {
  gap: 8px;
}

/* Above placement - label and field stacked */
.field-row--above .field-row__content {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding-right: 100px; /* Space for arrows */
}

.field-row--above .field-row__label {
  width: 100%;
  text-align: left;
}

.field-row--above .field-row__field {
  width: 100%;
}

/* Label */
.field-row__label {
  font-size: 13px;
  font-weight: 700;
  color: #374151;
  line-height: 1.2; /* Consistent line height */
  padding: 0;
  margin: 0;
}

.field-row__required-star {
  color: #dc2626;
  font-weight: 700;
}

/* Field area (contains chip) */
.field-row__field {
  display: flex;
  align-items: center;
  min-width: 0;
  line-height: 1; /* Consistent line height */
  padding: 0;
  margin: 0;
}

/* Chip inside field-row */
.field-row__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  line-height: 1; /* Consistent line height */
  margin: 0; /* No extra margin */
}

/* When inside a left-aligned grid field-row, chip should occupy grid column 2 */
.field-row--left .field-row__chip {
  grid-column: 2 !important;
  justify-self: start !important;
}

.field-row__type-icon {
  font-size: 14px;
  opacity: 0.7;
}

.field-row__chip-text {
  color: #64748b;
  font-style: italic;
}

/* Required indicator on row */
.field-row--required {
  border-left: 3px solid #dc2626;
}

/* ===========================================
   📐 Field Row INPUT mode (Fill Mode)
   Renders actual inputs for client fill
=========================================== */

.field-row-input {
  display: inline-block; /* allow side-by-side placement */
  vertical-align: top;
  margin: 0 8px 8px 0; /* Right and bottom margin for spacing */
  padding: 8px 12px; /* Consistent compact padding */
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  transition: all 0.15s ease;
  min-height: auto; /* No forced height */
  line-height: 1; /* Consistent line height */
}

.field-row-input:hover {
  border-color: #93c5fd;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.08);
}

.field-row-input:focus-within {
  border-color: var(--primary-600);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* Left placement - label and field side by side */
.field-row-input--left {
  display: inline-block;
}

.field-row-input--left .field-row-input__label {
  display: inline-block;
  width: 130px;
  min-width: 130px;
  text-align: right;
  padding-right: 12px;
  vertical-align: middle;
}

.field-row-input--left .field-row-input__field {
  display: inline-block;
  vertical-align: middle;
  width: calc(100% - 145px); /* Account for label width + gap */
  min-width: 0;
}

/* Compact mode: even smaller labels for more input space */
/* Compact left placement already defined above */

/* Above placement - label stacked on top of field */
.field-row-input--above {
  display: inline-block;
}

.field-row-input--above .field-row-input__label {
  display: block;
  width: 100%;
  text-align: left;
  margin-bottom: 8px;
}

.field-row-input--above .field-row-input__field {
  display: block;
  width: 100%;
}

/* Label */
.field-row-input__label {
  font-size: 14px;
  font-weight: 700;
  color: #374151;
  line-height: 1.2; /* Consistent line height */
  padding: 0;
  margin: 0;
}

.field-row-input__required-star {
  color: #dc2626;
  font-weight: 700;
}

/* Field area */
.field-row-input__field {
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 8px;
  width: 100%;
  line-height: 1; /* Consistent line height */
  padding: 0;
  margin: 0;
}

.field-row-input--stack .field-row-input__field {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

/* Input controls */
.field-row-input__control {
  width: 100%;
  min-width: 0;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 11px 16px;
  background: #ffffff;
  color: #111827;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field-row-input__control:focus {
  border-color: var(--primary-600);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.field-row-input__control:disabled {
  background: #f9fafb;
  color: #6b7280;
  border-color: #e5e7eb;
  cursor: not-allowed;
}

.field-row-input__control::placeholder {
  color: #9ca3af;
  font-weight: 500;
}

/* Select */
.field-row-input__select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B7280' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

/* Textarea */
.field-row-input__textarea {
  min-height: 100px;
  resize: vertical;
  font-family: inherit;
  line-height: 1.5;
}

/* Radio group */
.field-row-input__radio-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.field-row-input__radio-option {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
}

.field-row-input__radio-option input {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

/* Signature in field-row */
.field-row-input__signature-preview {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.field-row-input__signature-img {
  max-width: 400px;
  height: 120px;
  object-fit: contain;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #ffffff;
}

.field-row-input__signature-captured {
  padding: 30px;
  background: #f0fdf4;
  border: 1px solid #86efac;
  border-radius: 10px;
  color: #166534;
  font-weight: 700;
  text-align: center;
}

.field-row-input__signature-placeholder {
  padding: 30px;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
  color: #64748b;
  text-align: center;
}

.field-row-input__signature-capture {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.field-row-input__signature-pad {
  width: min(400px, 100%);
  height: 120px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #ffffff;
  overflow: hidden;
}

.field-row-input__signature-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

/* Required state */
.field-row-input--required {
  border-left: 3px solid #dc2626;
}

/* Missing (validation error) */
.field-row-input--missing {
  border-color: #ef4444;
  background: #fef2f2;
}

.field-row-input--missing .field-row-input__control {
  border-color: #ef4444;
}

/* Readonly */
.field-row-input--readonly {
  background: #f9fafb;
}

/* ===========================================
   📐 FIELD ROW WIDTH PRESETS & GROUPING
   Deterministic row layout system
=========================================== */

/* Width presets for editor mode */
.field-row--full {
  width: 100%;
  display: inline-block;
  vertical-align: top;
}

.field-row--half {
  width: calc(50% - 4px);
  display: inline-block;
  vertical-align: top;
  min-width: 280px;
}

.field-row--third {
  width: calc(33.333% - 6px);
  display: inline-block;
  vertical-align: top;
  min-width: 200px;
}

.field-row--quarter {
  width: calc(25% - 6px);
  display: inline-block;
  vertical-align: top;
  min-width: 180px;
}

/* Width presets for fill mode */
.field-row-input--full {
  width: 100%;
  display: inline-block;
  vertical-align: top;
  grid-column: span 12;
}

.field-row-input--half {
  width: calc(50% - 4px);
  display: inline-block;
  vertical-align: top;
  min-width: 200px;
  grid-column: span 6;
}

.field-row-input--third {
  width: calc(33.333% - 6px);
  display: inline-block;
  vertical-align: top;
  min-width: 180px;
  grid-column: span 4;
}

.field-row-input--quarter {
  width: calc(25% - 6px);
  display: inline-block;
  vertical-align: top;
  min-width: 150px;
  grid-column: span 3;
}

/* Compact density for fill mode inputs (now default for all) */
.field-row-input--compact {
  /* Base padding already set */
}

.field-row-input--compact .field-row-input__label {
  font-size: 14px; /* Keep consistent */
}

.field-row-input--compact .field-row-input__control {
  /* Default control styles apply */
}

/* Comfortable density for fill mode (legacy - rarely used) */
.field-row-input--comfortable {
  padding: 12px 14px;
  min-height: auto; /* No forced height */
}

/* Row grouping containers */
.field-row-group {
  display: flex;
  gap: 16px;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
  flex-wrap: wrap;
}

/* Row group spacing */
.field-row-group--tight {
  margin: 0;
}
.field-row-group--loose {
  margin: 12px 0;
}

/* Ensure groups don't exceed container width */
.field-row-group--third,
.field-row-group--quarter {
  max-width: 100%;
}

.field-row-group--full {
  flex-direction: column;
}

.field-row-group--paired {
  flex-direction: row;
  flex-wrap: wrap;
}

.field-row-group--paired > .field-row-input {
  flex: 1 1 calc(50% - 8px);
  min-width: 280px;
  margin: 0; /* Remove individual margins, use group gap */
}

.field-row-group--half-alone {
  flex-direction: row;
}

.field-row-group--half-alone > .field-row-input {
  flex: 0 1 calc(50% - 8px);
  min-width: 280px;
  max-width: 50%;
  margin: 0;
}

/* Third-width groups (3 fields per row) */
.field-row-group--third {
  flex-direction: row;
  flex-wrap: wrap;
}

.field-row-group--third > .field-row-input {
  width: calc(33.333% - 11px) !important;
  max-width: calc(33.333% - 11px) !important;
  min-width: 200px;
  flex: 0 0 calc(33.333% - 11px);
  margin: 0;
}

.field-row-group--third-alone {
  flex-direction: row;
}

.field-row-group--third-alone > .field-row-input {
  width: calc(33.333% - 11px) !important;
  max-width: calc(33.333% - 11px) !important;
  min-width: 200px;
  flex: 0 0 calc(33.333% - 11px);
  margin: 0;
}

/* Quarter-width groups (4 fields per row) */
.field-row-group--quarter {
  flex-direction: row;
  flex-wrap: wrap;
}

.field-row-group--quarter > .field-row-input {
  width: calc(25% - 12px) !important;
  max-width: calc(25% - 12px) !important;
  min-width: 180px;
  flex: 0 0 calc(25% - 12px);
  margin: 0;
}

.field-row-group--quarter-alone {
  flex-direction: row;
}

.field-row-group--quarter-alone > .field-row-input {
  width: calc(25% - 12px) !important;
  max-width: calc(25% - 12px) !important;
  min-width: 180px;
  flex: 0 0 calc(25% - 12px);
  margin: 0;
}

/* Mobile responsiveness for fill mode field widths */
/* DISABLED - Keep multi-column layout on all screens except phones */
@media (max-width: 0px) {
  /* Disabled */
}

/* Error message styling */
.field-row-input__error {
  color: #dc2626;
  font-size: 12px;
  font-weight: 600;
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.field-row-input__error::before {
  content: "⚠";
  font-size: 11px;
}

/* Focus/highlight state for row clicking */
.field-row-input:focus {
  outline: none;
  border-color: var(--primary-600);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.field-row-input--highlight {
  animation: fieldRowHighlight 1.5s ease-out;
}

@keyframes fieldRowHighlight {
  0% { background: #fef3c7; border-color: #f59e0b; }
  100% { background: #f8fafc; border-color: #e5e7eb; }
}

/* Editor: half-width fields inside Quill */
.ql-editor .field-row--half {
  display: inline-flex;
  vertical-align: top;
  margin-right: 8px;
}

/* ===========================================
   📱 MOBILE RESPONSIVE FIELD ROWS
   Keep labels left; stack only when absolutely necessary
=========================================== */
@media (max-width: 400px) {
  .field-row-group--paired {
    flex-direction: column;
    gap: 12px;
  }
  
  .field-row-group--paired > .field-row-input,
  .field-row-group--half-alone > .field-row-input {
    flex: 1 1 100%;
    max-width: 100%;
    min-width: unset;
  }
  
  /* Keep fill-mode rows horizontal; stack handled by --stack class */
  .field-row-input {
    flex-direction: row;
    align-items: center;
    gap: 10px;
  }
  
  .field-row-input__field {
    width: 100%;
  }
  
  .field-row-input--left {
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
  }
  
  .field-row-input--left .field-row-input__label {
    width: 110px !important;
    min-width: 110px !important;
    max-width: 110px !important;
    text-align: right !important;
    padding-top: 0 !important;
  }
  
  .field-row-input--left .field-row-input__field {
    width: 100% !important;
  }
  
  /* REMOVED forced column layout to respect Label Left setting */
  /*
  .field-row--left {
    flex-direction: column !important;
    gap: 6px !important;
  }
  
  .field-row--left .field-row__label {
    width: 100% !important;
    min-width: unset !important;
    max-width: unset !important;
    text-align: left !important;
  }
  */
  
  /* Editor half-width also full on mobile */
  .field-row--half {
    width: 100%;
    min-width: unset;
    display: flex;
  }
}

/* ===========================================
   🍔 HAMBURGER MENU
=========================================== */
.hamburger-menu {
  width: 32px;
  height: 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: var(--radius-md);
}

.hamburger-menu:hover {
  background: var(--gray-100);
}

.hamburger-menu span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--text-secondary);
  border-radius: 1px;
}

/* ===========================================
   🎯 UTILITY CLASSES
=========================================== */
.muted {
  color: var(--text-secondary);
}

/* ===========================================
   📱 SCROLLBARS
=========================================== */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--gray-300) transparent;
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: var(--gray-300);
  border-radius: 4px;
}

/* ===========================================
   📱 RESPONSIVE
=========================================== */
@media (max-width: 1200px) {
  .mainSplit {
    grid-template-columns: 320px 1fr;
  }
  
  .folderPane {
    width: 180px;      /* was 200px */
    min-width: 180px;
    max-width: 180px;
  }
}

@media (max-width: 900px) {
  .app-shell {
    flex-direction: column;
    padding: 10px;
  }
  
  .folderPane {
    display: none;
  }
  
  .mainSplit {
    grid-template-columns: 1fr;
  }
}

/* ===========================================
   🔧 COMPACT FILTER ROW (reduce height)
   - Keep search + New Record on one line
   - Remove empty left spacer so search shifts left
=========================================== */
.filters.compactFilters {
  padding: 10px 14px;
}

.filters.compactFilters .filter-row-grid {
  grid-template-columns: 1fr;
}

.filters.compactFilters .filter-left {
  display: none;
}

.filters.compactFilters .filter-center {
  flex-wrap: nowrap;
}

.filters.compactFilters .filter-group.grow {
  min-width: 0;
}

/* ===========================================
   🎯 PREMIUM POLISH (Linear/Stripe vibe)
   - Calmer, cohesive, fast to scan
=========================================== */

/* --- A. UNIFIED DESIGN TOKENS --- */
:root {
  --ui-radius: 10px;
  --ui-radius-sm: 6px;
  --ui-radius-lg: 14px;
  --ui-shadow-card: 0 1px 3px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.04);
  --ui-shadow-hover: 0 4px 12px rgba(15,23,42,0.08);
  --ui-transition: 150ms ease;
}

/* --- B. BUTTON HIERARCHY --- */

/* Secondary button (default for actions) */
.btn.detail-action-btn,
.detail-action-btn {
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: var(--ui-radius-sm);
  box-shadow: none;
  transition: all var(--ui-transition);
}

.btn.detail-action-btn:hover,
.detail-action-btn:hover {
  background: var(--gray-100);
  border: none;
  box-shadow: none;
}

/* Primary variant (only Edit by default) */
.btn.detail-action-btn.edit-btn,
.detail-action-btn.edit-btn {
  background: var(--primary-600);
  border: none;
  color: white;
}

.btn.detail-action-btn.edit-btn:hover,
.detail-action-btn.edit-btn:hover {
  background: var(--primary-700);
  border: none;
}

/* Delete stays subtle danger */
.btn.detail-action-btn.delete-btn,
.detail-action-btn.delete-btn {
  background: transparent;
  border: none;
  color: var(--danger-600);
}

.btn.detail-action-btn.delete-btn:hover,
.detail-action-btn.delete-btn:hover {
  background: var(--danger-50);
  border: none;
}

/* --- C. DETAIL TOP STRIP (compact) --- */
.detailTopStrip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px; /* Add side padding to match negative margin */
  margin: -20px -20px 12px -20px; /* Pull to top/sides */
  background: transparent;
  border-bottom: none;
  box-shadow: none;
}

.detailTopActions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

/* In fullscreen mode, center the buttons and prevent wrapping */
.app-shell.detail-full .detailTopStrip {
  justify-content: center;
  max-width: 100%;
  padding: 12px 20px;
  overflow-x: auto;
  overflow-y: hidden;
  flex-wrap: nowrap;
}

.app-shell.detail-full .detailTopActions {
  flex-wrap: nowrap;
  justify-content: center;
  min-width: 0;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Remove margin-left: auto from right strip in fullscreen */
.app-shell.detail-full .detailTopStrip > div[style*="margin-left: auto"],
.app-shell.detail-full .detailTopStrip > div {
  margin-left: 0 !important;
}

.app-shell.detail-full .detail-quick-add-btns {
  flex-wrap: nowrap;
  min-width: 0;
  margin-left: 0 !important;
  background: #dce8f8 !important;
  border-radius: 10px !important;
  padding: 6px 8px !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* Slightly smaller buttons in fullscreen to fit more */
.app-shell.detail-full .detail-action-btn {
  font-size: 12px;
  padding: 5px 8px;
  white-space: nowrap;
}

/* Match project style — grouped transparent icons, no individual borders */
.app-shell.detail-full .detail-quick-add-btn,
.app-shell.detail-full .detailTopStrip .detail-action-btn.detail-quick-add-btn,
.app-shell.detail-full .detail-quick-add-btns > .btn.detail-quick-add-btn {
  all: unset !important;
  box-sizing: border-box !important;
  height: 32px !important;
  width: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  font-size: 0 !important;
  line-height: 0 !important;
  transition: all 0.15s ease !important;
}

.app-shell.detail-full .detail-quick-add-btn svg,
.app-shell.detail-full .detailTopStrip .detail-action-btn.detail-quick-add-btn svg,
.app-shell.detail-full .detail-quick-add-btns > .btn.detail-quick-add-btn svg {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  vertical-align: middle !important;
  align-self: center !important;
  color: #374151 !important;
  stroke: currentColor !important;
}

.app-shell.detail-full .detail-quick-add-btn:hover,
.app-shell.detail-full .detailTopStrip .detail-action-btn.detail-quick-add-btn:hover,
.app-shell.detail-full .detail-quick-add-btns > .btn.detail-quick-add-btn:hover {
  background: rgba(0, 0, 0, 0.06) !important;
  border: none !important;
  transform: none !important;
}

.app-shell.detail-full .detail-quick-add-btn:hover svg,
.app-shell.detail-full .detail-quick-add-btns > .btn.detail-quick-add-btn:hover svg {
  color: var(--primary-600) !important;
}

/* On narrower fullscreen views, make buttons even more compact */
@media (max-width: 1200px) {
  .app-shell.detail-full .detail-action-btn {
    font-size: 11px;
    padding: 4px 6px;
  }
  
  .app-shell.detail-full .detail-action-btn svg {
    width: 14px;
    height: 14px;
  }
}

/* --- D. DEAL INTELLIGENCE (calm card) --- */
.detailSection.dealIntelligence {
  background: var(--gray-50);
  border: 1px solid var(--border-light);
  border-radius: var(--ui-radius-lg);
  padding: 14px;
  margin-bottom: 14px;
}

.detailSection.dealIntelligence h3 {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  margin: 0 0 10px 0;
  padding: 0;
  border: none;
}

/* Metric cards inside Deal Intelligence */
.detailSection.dealIntelligence [style*="grid-template-columns"] > div {
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--ui-radius-sm);
  padding: 10px;
}

/* --- E. CONTACT LIST ROWS (tighter, faster to scan) --- */
.row {
  padding: 10px 12px 10px 16px;
  border-radius: var(--ui-radius);
  transition: all var(--ui-transition);
}

.row:hover {
  background: var(--gray-50);
  border-color: var(--border-medium);
  box-shadow: var(--ui-shadow-card);
}

.row.selected {
  background: var(--primary-50);
  border-color: rgba(37,99,235,0.4);
  box-shadow: 0 0 0 2px rgba(37,99,235,0.08);
}

/* Tighter avatar */
.row .avatar {
  width: 38px;
  height: 38px;
  border-radius: var(--ui-radius-sm);
  font-size: 14px;
}

/* Row text hierarchy */
.rowName {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.rowSub {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* --- F. BADGE/PILL HIERARCHY (reduce noise) --- */
.row .pill {
  font-size: 10px;
  padding: 3px 7px;
  height: auto;
  line-height: 1.3;
  opacity: 0.85;
}

/* Only show 2-3 most important badges, mute the rest */
.row > div:last-child .pill:nth-child(n+4) {
  display: none;
}

/* Owner pill is most important - keep visible */
.row .pill.ownerPill {
  opacity: 1;
  font-weight: 600;
}

/* --- G. FOCUS STATES (accessibility) --- */
.btn:focus-visible,
.detail-action-btn:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
}

.row:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
}

/* --- H. SIDEBAR DENSITY --- */
.folderRow {
  padding: 8px 10px;
  font-size: 13px;
}

.folderCountPill {
  font-size: 10px;
  padding: 2px 6px;
}

/* Cancel button variant */
.btn.detail-action-btn.cancel-btn,
.detail-action-btn.cancel-btn {
  background: var(--danger-50);
  border: none;
  color: var(--danger-600);
}

.btn.detail-action-btn.cancel-btn:hover,
.detail-action-btn.cancel-btn:hover {
  background: var(--danger-100, #fee2e2);
  border: none;
}

/* Hide drawer close button when not in drawer mode */
.app-shell:not(.drawer-mode) #drawerCloseBtn {
  display: none;
}

/* ===========================================
   🔧 UNIFIED PANE HEADERS (perfect alignment)
=========================================== */

/* List pane header - consistent height */
.listPane .paneHead {
  min-height: 56px;
  padding: 10px 14px;
  align-items: center;
}

.listPane .paneHead-left {
  flex-direction: row;
  align-items: baseline;
  gap: 10px;
}

.listPane .paneHead-right {
  gap: 10px;
  align-items: center;
}

/* Make all header buttons same height */
.paneHead .btn,
.paneHead-right .btn,
.detailTopStrip .btn,
.detailTopActions .btn,
#sortSelect,
.export-btn {
  height: 36px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* Sort dropdown specific styling */
#sortSelect {
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background: var(--surface);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  min-width: 140px;
}

#sortSelect:hover {
  border-color: var(--border-medium);
  background: var(--gray-50);
}

/* Detail pane top strip - match list header height */
.detailTopStrip {
  min-height: 56px;
  padding: 10px 0;
  margin: 0 0 14px 0;
  border-bottom: 1px solid var(--border-light);
  background: transparent;
}

.detailTopActions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Detail action buttons - unified sizing */
.detail-action-btn {
  height: 36px;
  padding: 0 14px;
  font-size: 13px;
}

/* Quick Add container — blue pill wrapping label + icons */
.detail-quick-add-btns {
  background: #dce8f8 !important;
  border-radius: 10px !important;
  padding: 6px 8px !important;
  border-left: none !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* "+ Add" label on the far left of the quick-add strip */
.detail-quick-add-label {
  font-size: 11px;
  font-weight: 700;
  color: #2563eb;
  white-space: nowrap;
  padding-right: 5px;
  padding-left: 2px;
  user-select: none;
  pointer-events: none;
  letter-spacing: -0.01em;
}

/* Quick Add buttons in detail header (Normal View) */
.detail-quick-add-btn,
.detailTopStrip .detail-action-btn.detail-quick-add-btn,
.detail-quick-add-btns > .btn.detail-quick-add-btn {
  /* Box model */
  box-sizing: border-box !important;
  height: 32px !important;
  width: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  padding: 0 !important;
  
  /* Flexbox centering */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  
  /* Visual */
  background: transparent !important;
  border: none !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  
  /* Reset text/line-height */
  font-size: 0 !important;
  line-height: 0 !important;
  
  /* Animation */
  transition: all 0.15s ease !important;
}

.detail-quick-add-btn svg,
.detail-quick-add-btns > .btn.detail-quick-add-btn svg {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  vertical-align: middle !important;
  align-self: center !important;
  transform: translateY(0) !important;
}

.detail-quick-add-btn:hover {
  background: var(--gray-100) !important;
  border: none !important;
  transform: none !important;
}

/* Export button alignment */
.export-btn {
  background: transparent;
  border: 1px solid var(--border-light);
  color: var(--text-secondary);
}

.export-btn:hover {
  background: var(--gray-50);
  border-color: var(--border-medium);
  color: var(--text-primary);
}

/* Actions dropdown button */
.actions-dropdown-btn {
  height: 36px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
}

/* ===========================================
   🎯 PERFECT HEADER ALIGNMENT (override previous)
=========================================== */

/* Both pane headers use exact same styling */
.paneHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  min-height: 60px;
  border-bottom: 1px solid var(--border-light);
  background: var(--gray-50);
  box-sizing: border-box;
}

/* Detail pane header - align buttons to the left */
.paneHead.detailTopStrip {
  justify-content: flex-start;
  margin: 0;
  border-radius: 0;
}

/* Button container in both headers */
.paneHead-right,
.paneHead.detailTopStrip .detailTopActions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

/* ALL buttons in headers - exact same size */
.paneHead .btn,
.paneHead select,
.paneHead-right .btn,
.paneHead-right select,
.detail-action-btn,
.actions-dropdown-btn,
#sortSelect,
#exportCSVBtn {
  height: 34px;
  min-height: 34px;
  max-height: 34px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid var(--border-light);
  background: var(--surface);
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-sizing: border-box;
  line-height: 1;
}

/* Sort select specific */
#sortSelect {
  padding: 0 10px;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 28px;
}

/* Export button - ghost style */
#exportCSVBtn {
  background: transparent;
  border-color: transparent;
  color: var(--text-secondary);
}

#exportCSVBtn:hover {
  background: var(--surface);
  border-color: var(--border-light);
}

/* Edit button - primary */
.detail-action-btn.edit-btn {
  background: var(--primary-600);
  border-color: var(--primary-600);
  color: white;
}

/* Actions dropdown */
.actions-dropdown-btn {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  border-color: #7c3aed;
  color: white;
}

/* Hover states */
.paneHead .btn:hover,
.paneHead select:hover,
#sortSelect:hover {
  background: var(--gray-100);
  border-color: var(--border-medium);
}

.detail-action-btn.edit-btn:hover {
  background: var(--primary-700);
}

/* ===========================================
   🎯 FINAL FIX: PERFECT HEADER ALIGNMENT
   This overrides all previous rules
=========================================== */

/* BOTH headers: exact same box */
.listPane .paneHead,
.paneHead.detailTopStrip {
  display: flex;
  align-items: center;
  height: 58px;
  min-height: 58px;
  max-height: 58px;
  padding: 0 14px;
  margin: 0;
  border-bottom: 1px solid var(--border-light);
  background: var(--gray-50);
  box-sizing: border-box;
}

/* List pane: space-between (title left, buttons right) */
.listPane .paneHead {
  justify-content: space-between;
}

/* Detail pane: flex-start (buttons aligned left) */
.paneHead.detailTopStrip {
  justify-content: flex-start;
  border-radius: 16px 16px 0 0;
}

/* Button containers: same alignment */
.listPane .paneHead-right,
.paneHead.detailTopStrip .paneHead-right {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
}

/* ALL buttons/selects: exact same size */
.listPane .paneHead .btn,
.listPane .paneHead select,
.paneHead.detailTopStrip .btn,
.paneHead.detailTopStrip .detail-action-btn,
.paneHead.detailTopStrip .actions-dropdown-btn,
#sortSelect,
#exportCSVBtn {
  height: 34px;
  min-height: 34px;
  max-height: 34px;
  padding: 0 12px;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 34px;
  border-radius: 8px;
  border: 1px solid var(--border-light);
  background: var(--surface);
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-sizing: border-box;
  vertical-align: middle;
}

/* Title area in list pane */
.listPane .paneHead-left {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.listPane .paneHead-left .paneTitle {
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}

.listPane .paneHead-left .paneSub {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1;
}

/* Remove white space at top of detail pane */
.paneHead.detailTopStrip {
  padding-top: 12px;
  margin-top: -20px;
  margin-left: -20px;
  margin-right: -20px;
}

/* Actions dropdown - match other buttons exactly */
.actions-dropdown-btn,
.actions-dropdown-btn:hover,
.actions-dropdown-btn:focus {
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  padding: 0 12px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  background: var(--surface) !important;
  border: 1px solid var(--border-light) !important;
  color: var(--text-primary) !important;
  box-shadow: none !important;
}

.actions-dropdown-btn:hover {
  background: var(--gray-100) !important;
  border-color: var(--border-medium) !important;
}

/* Filter button - prevent bounce and style properly */
.filterIconBtn,
.filterIconBtn:hover,
.filterIconBtn:focus,
.filterIconBtn:active {
  position: absolute !important;
  right: 6px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 32px !important;
  height: 32px !important;
  border: none !important;
  background: transparent !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  color: var(--text-secondary) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.filterIconBtn:hover:not(:disabled) {
  background: var(--gray-100) !important;
  color: var(--text-primary) !important;
  transform: translateY(-50%) !important; /* Prevent bounce */
}

.filterIconBtn .tuneIcon {
  width: 18px;
  height: 18px;
}

/* ===== Modal detail sections: neater + consistent primary action buttons ===== */

.modalSectionTitle {
  margin: 0 0 12px 0;
  padding: 0;
  border: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.detailSection .btn.action-btn {
  flex: 1 1 auto;
  min-width: 100px;
  height: 44px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  box-shadow: 0 10px 20px rgba(37, 99, 235, 0.14);
}

.detailSection .btn.action-btn.primary {
  background: var(--primary-600);
  border-color: var(--primary-600);
  color: #fff;
}

.detailSection .btn.action-btn.primary:hover:not(:disabled) {
  background: var(--primary-700);
  border-color: var(--primary-700);
}

/* Tidy the docs/deals row action buttons inside the modal sections */
.detailSection .btn.small {
  height: 34px;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 9999px;
}

/* Export CSV button - match ALL other header buttons (same as Edit, etc.) */
#exportCSVBtn,
#exportCSVBtn:hover,
#exportCSVBtn:focus,
#exportCSVBtn:active {
  background: var(--surface) !important;
  border: 1px solid var(--border-light) !important;
  color: var(--text-primary) !important;
  box-shadow: none !important;
}

#exportCSVBtn:hover:not(:disabled) {
  background: var(--gray-100) !important;
  border-color: var(--border-medium) !important;
}

/* ===== TOP NAV CONSISTENCY =====
   Keep all main menu items (primary + utility) on one typography/color system. */
.header-nav .menuBtn,
.header-nav .menuBtn * {
  font-size: 13px !important;
  font-weight: 500 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

.header-nav .menuBtn {
  color: var(--text-secondary) !important;
  letter-spacing: 0 !important;
  padding: 7px 10px !important;
  border-radius: 8px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

.header-nav .menuBtn > span.menuBtn-label {
  font-size: 13px !important;
  font-weight: 500 !important;
}

.header-nav .menuBtn:hover {
  background: var(--gray-200) !important;
  border-color: transparent !important;
}

.header-nav .menuBtn.active,
.header-nav .menuBtn.active * {
  font-size: 13px !important;
  font-weight: 500 !important;
}

.header-nav .menuBtn.active {
  color: var(--primary-600) !important;
  background: white !important;
  border-color: var(--border-light) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
}

/* ===== FORCE TOP NAV TO STAY HORIZONTAL ALWAYS ===== */
.menuToggle.headerToggle,
.app-shell.drawer-mode .menuToggle.headerToggle,
.header-nav-center .menuToggle {
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  display: inline-flex !important;
}

/* =============================
   📅 CALENDAR VIEW FIX + CLEAN UI
   - In drawer-mode, detail pane becomes a fixed drawer.
     Ensure the calendar/pipeline pane takes FULL width.
============================= */

/* In Calendar/Pipeline (drawer-mode), don't reserve a 2nd grid column */
.app-shell.drawer-mode .mainSplit {
  grid-template-columns: 1fr !important;
}

/* Make the active alternate pane fill the grid */
.app-shell.drawer-mode #calendarWrap,
.app-shell.drawer-mode #pipelineWrap,
.app-shell.drawer-mode #analyticsWrap,
.app-shell.drawer-mode #templatesView,
.app-shell.drawer-mode #dealDoctorWrap,
.app-shell.drawer-mode #projectsWrap {
  grid-column: 1 / -1;
  min-width: 0;
}

/* Ensure calendar pane fills mainSplit and scrolls internally */
#calendarWrap {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

#calendarWrap #calendarPanel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

#calendarWrap #calendarPanel .cal-body {
  display: flex;
  gap: 16px;
  height: 100%;
  min-height: 0;
}

#calendarWrap #calendarPanel .cal-sidebar {
  width: 240px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#calendarWrap #calendarPanel .cal-main {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

#calendarWrap #calendarPanel .cal-header-left,
#calendarWrap #calendarPanel .cal-header-center,
#calendarWrap #calendarPanel .cal-view-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
}

#calendarWrap #calendarPanel .cal-header-left {
  min-width: 260px;
  flex: 1 1 280px;
}

#calendarWrap #calendarPanel .cal-header-center {
  flex: 1 1 280px;
  justify-content: center;
}

#calendarWrap #calendarPanel .cal-header-title {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
  margin-left: 8px;
  white-space: nowrap;
}

/* Calendar header buttons: match contact detail strip exactly (same as .paneHead .btn / .detail-action-btn) */
#calendarWrap #calendarPanel .cal-header .btn,
#calendarWrap #calendarPanel .cal-header .cal-view-btn {
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  padding: 0 12px !important;
  margin: 0 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  border-radius: 8px !important;
  border: 1px solid var(--border-light) !important;
  background: var(--surface) !important;
  color: var(--text-primary) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  box-sizing: border-box !important;
}

#calendarWrap #calendarPanel .cal-header .btn.ghost {
  background: transparent !important;
  border-color: transparent !important;
}

#calendarWrap #calendarPanel .cal-header .btn.ghost:hover,
#calendarWrap #calendarPanel .cal-header .cal-view-btn:hover {
  background: var(--gray-100) !important;
  border-color: var(--border-medium) !important;
}

#calendarWrap #calendarPanel .cal-header .cal-view-btn {
  width: 34px !important;
  min-width: 34px !important;
  padding: 0 !important;
}

#calendarWrap #calendarPanel .cal-header .cal-view-btn.active {
  background: white !important;
  color: var(--primary-600) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

#calendarWrap #calendarPanel .cal-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  margin-right: 12px;
}

#calendarWrap #calendarPanel .cal-header .cal-avail-btn.cal-avail-active {
  background: #dbeafe !important;
  color: #1e40af !important;
  border-color: #bfdbfe !important;
}

#calendarWrap #calendarPanel .cal-create-btn {
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 12px !important;
  border-radius: 8px !important;
}

#calendarWrap #calendarPanel .cal-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  min-width: 200px;
}

#calendarWrap #calendarPanel .cal-search input {
  border: 0;
  padding: 0;
  height: 18px;
  font-size: 12px;
}

#calendarWrap #calendarPanel .cal-search input:focus {
  outline: none;
  box-shadow: none;
}

#calendarWrap .cal-mini {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 12px;
  box-shadow: var(--shadow);
}

#calendarWrap .cal-mini-title {
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 8px;
}

#calendarWrap .cal-mini-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

#calendarWrap .cal-mini-head {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-align: center;
}

#calendarWrap .cal-mini-day {
  border: 0;
  background: transparent;
  border-radius: 8px;
  padding: 6px 0;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

#calendarWrap .cal-mini-day.today {
  background: var(--primary-100);
  color: var(--primary-700);
}

#calendarWrap .cal-mini-day.other {
  opacity: 0.4;
}

#calendarWrap .cal-list {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 12px;
  box-shadow: var(--shadow);
}

#calendarWrap .cal-list-title {
  font-weight: 700;
  font-size: 12px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}

#calendarWrap .cal-list-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 0;
}

#calendarWrap .cal-list-item input {
  margin: 0;
}

#calendarWrap .cal-color {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

#calendarWrap .cal-quick-popover {
  position: absolute;
  top: 56px;
  right: 16px;
  width: min(360px, 90%);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 18px 45px rgba(0,0,0,0.12);
  z-index: 50;
}

#calendarWrap .cal-quick-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  font-weight: 700;
}

#calendarWrap .cal-quick-body {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#calendarWrap .cal-quick-foot {
  padding: 12px 14px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  border-top: 1px solid var(--border);
}

/* Month view grid: fill available height so all 6 weeks get equal space (no cut-off) */
#calendarWrap .calMonthGrid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-template-rows: auto repeat(6, 1fr); /* header row + 6 week rows share space */
  gap: 6px;
  padding: 8px;
  margin: 0 !important; /* calendar-ui sets margin inline; keep crisp */
  flex: 1;
  min-height: calc(100% + 30px); /* 30px taller so day squares are taller (split across 6 rows) */
}

#calendarWrap .calDayHeader {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 6px;
}

#calendarWrap .calDay {
  background: var(--surface);
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 14px;
  padding: 6px;
  min-height: 0; /* let 1fr rows control height so all weeks get equal space */
  min-width: 0; /* allow grid cell to shrink so content truncates */
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#calendarWrap .calDay.today {
  border-color: var(--primary-100);
  background: var(--primary-50);
}

#calendarWrap .calDay.otherMonth {
  opacity: 0.55;
}

#calendarWrap .calDayNum {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 4px;
  flex-shrink: 0;
}

/* Wrapper for day cell entries: even gap, no overlap when 3 items */
#calendarWrap .calDayItems {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  overflow: hidden;
}

#calendarWrap .calDayMore {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-tertiary);
  flex-shrink: 0;
  padding: 0 2px;
}

#calendarWrap .calMiniItem {
  flex-shrink: 0;
  padding: 4px 6px 4px 10px;
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.06);
  border: 1px solid rgba(15, 23, 42, 0.08);
  color: var(--text-primary);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.35;
  cursor: pointer;
  min-width: 0;
  min-height: 20px;
  display: flex;
  align-items: center;
}

#calendarWrap .calMiniItem-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#calendarWrap .calMiniItem[data-cal="tasks"] {
  border-left: 4px solid #16a34a;
}

#calendarWrap .calMiniItem[data-cal="events"] {
  border-left: 4px solid var(--primary-600);
}

#calendarWrap .calMiniItem[data-cal="deals"] {
  border-left: 4px solid #f59e0b;
}

#calendarWrap .calMiniItem:hover {
  background: rgba(37, 99, 235, 0.10);
  border-color: rgba(37, 99, 235, 0.22);
}

#calendarWrap .calMiniItem.overdue {
  background: var(--danger-50);
  border-color: var(--danger-200);
  color: var(--danger-700);
}

#calendarWrap .calMiniItem.completed .calMiniItem-label {
  text-decoration: line-through;
  color: var(--text-tertiary);
}

#calendarWrap .calMiniItem.completed {
  opacity: 0.85;
  border-left-color: var(--border);
}

#calendarWrap .calWeekItem {
  overflow: hidden;
}

#calendarWrap .cal-week-title {
  font-weight: 600;
  font-size: 12px;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

#calendarWrap .cal-week-sub {
  font-size: 11px;
  color: var(--muted);
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Empty state used by day/agenda views */
#calendarWrap .emptyState {
  margin: 18px;
  padding: 22px;
  border-radius: 16px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

#calendarWrap .emptyState h3 {
  margin: 10px 0 6px;
  font-size: 14px;
  font-weight: 600;
}

#calendarWrap .emptyState p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 13px;
}

/* ═══════════════════════════════════════════════════════════════════
   ENHANCED EMPTY STATE - Welcome Experience
   ═══════════════════════════════════════════════════════════════════ */
.emptyState {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 24px;
  min-height: 300px;
}

.emptyState--welcome {
  background: linear-gradient(180deg, #ffffff 0%, #f0f9ff 50%, #e0f2fe 100%);
  border-radius: 20px;
  margin: 24px;
  padding: 32px 24px;
  border: 2px dashed #93c5fd;
  box-shadow: 0 4px 24px rgba(59, 130, 246, 0.1);
  animation: welcomePulse 3s ease-in-out infinite;
  max-width: 500px;
  box-sizing: border-box;
}

@keyframes welcomePulse {
  0%, 100% { border-color: #93c5fd; box-shadow: 0 4px 24px rgba(59, 130, 246, 0.1); }
  50% { border-color: var(--primary-500); box-shadow: 0 8px 32px rgba(59, 130, 246, 0.2); }
}

.emptyState-icon {
  font-size: 56px;
  margin-bottom: 12px;
  animation: bounce 2s ease-in-out infinite;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.emptyState-title {
  font-size: 24px;
  font-weight: 600;
  color: #1e293b;
  margin: 0 0 6px 0;
  letter-spacing: -0.5px;
}

.emptyState-subtitle {
  font-size: 15px;
  color: #64748b;
  margin: 0 0 24px 0;
  max-width: 380px;
  line-height: 1.4;
}

.emptyState-actions {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 100%;
}

.emptyState-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 2px solid transparent;
  font-family: inherit;
  white-space: nowrap;
}

.emptyState-btn--primary {
  background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-600) 100%);
  color: white;
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.4);
}

.emptyState-btn--primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(59, 130, 246, 0.5);
}

.emptyState-btn--secondary {
  background: white;
  color: #1e293b;
  border-color: #e2e8f0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.emptyState-btn--secondary:hover {
  border-color: var(--primary-500);
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.emptyState-btn--deal {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4);
}

.emptyState-btn--deal:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.5);
}

.emptyState-btn-icon {
  font-size: 18px;
}

.emptyState-divider {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 280px;
  margin-bottom: 16px;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.emptyState-divider::before,
.emptyState-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #cbd5e1;
}

.emptyState-divider span {
  padding: 0 16px;
}

.emptyState-tips {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 360px;
}

.emptyState-tip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: white;
  border-radius: 10px;
  font-size: 13px;
  color: #475569;
  text-align: left;
  border: 1px solid #e2e8f0;
}

.emptyState-tip-icon {
  font-size: 16px;
  flex-shrink: 0;
}

.emptyState-tip strong {
  color: #1e293b;
}

.emptyState-tip--clickable {
  cursor: pointer;
  transition: all 200ms ease;
  border-color: #10b981;
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
}

.emptyState-tip--clickable:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.25);
  border-color: #059669;
}

.emptyState-tip--clickable:active {
  transform: translateY(0);
}

.emptyState-tip--clickable strong {
  color: #059669;
}

/* Drawer detail pane: 67% of screen width */
.app-shell.drawer-mode .detailPane {
  width: 67vw !important;
  max-width: 67vw !important;
}

/* =============================
   📝 Templates page (match app)
============================= */

.templatesRoot {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--gray-50);
}

.templatesHeader {
  background: white;
  border-bottom: 1px solid var(--border-light);
  padding: 22px 24px;
}

.templatesHeaderTop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
}

.templatesTitle {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 6px 0;
}

.templatesSubtitle {
  color: var(--text-secondary);
  font-size: 13px;
  margin: 0;
}

.templatesControls {
  display: flex;
  gap: 12px;
  align-items: center;
}

.templatesSearch {
  flex: 1;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  font-size: 14px;
  background: white;
}

.templatesSearch:focus {
  outline: none;
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}

.templatesFilters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.category-filter {
  height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--border-light);
  background: white;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.category-filter:hover {
  background: var(--gray-100);
  border-color: var(--border-medium);
  color: var(--text-primary);
}

.category-filter.active {
  background: var(--primary-600);
  border-color: var(--primary-600);
  color: white;
  font-weight: 600;
}

.templatesBody {
  flex: 1;
  overflow: auto;
  padding: 20px;
}

.templatesGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 16px;
}

.templatesPane .template-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(15,23,42,0.10);
  border-color: rgba(37,99,235,0.22);
}

/* =============================
   📊 Analytics/Templates: full-width layout
   (mainSplit otherwise reserves the list column)
============================= */

.app-shell[data-view="analytics"] .mainSplit,
.app-shell[data-view="templates"] .mainSplit,
.app-shell[data-view="reports"] .mainSplit,
.app-shell[data-view="dealDoctor"] .mainSplit,
.app-shell[data-view="deals"] .mainSplit,
.app-shell[data-view="projects"] .mainSplit,
.app-shell[data-view="invoices"] .mainSplit,
.app-shell[data-view="calendar"] .mainSplit {
  grid-template-columns: 1fr !important;
}

.app-shell[data-view="analytics"] #analyticsWrap,
.app-shell[data-view="templates"] #templatesView,
.app-shell[data-view="reports"] #reportsWrap,
.app-shell[data-view="dealDoctor"] #dealDoctorWrap,
.app-shell[data-view="deals"] #pipelineWrap,
.app-shell[data-view="projects"] #projectsWrap,
.app-shell[data-view="invoices"] #invoicesWrap,
.app-shell[data-view="calendar"] #calendarWrap {
  grid-column: 1 / -1;
  min-width: 0;
}

/* When on full-width workspaces, hide contact detail pane so content fills area */
.app-shell[data-view="deals"] #detailPanel,
.app-shell[data-view="invoices"] #detailPanel,
.app-shell[data-view="projects"] #detailPanel,
.app-shell[data-view="calendar"] #detailPanel {
  display: none !important;
}

/* Full-width panes: span full grid and fill height so content is visible */
.app-shell[data-view="analytics"] #analyticsWrap,
.app-shell[data-view="deals"] #pipelineWrap,
.app-shell[data-view="invoices"] #invoicesWrap,
.app-shell[data-view="projects"] #projectsWrap,
.app-shell[data-view="calendar"] #calendarWrap {
  grid-row: 1 / -1;
  min-height: 0;
  height: 100%;
  align-self: stretch;
}

/* Deals workspace should fully occupy remaining viewport height */
.app-shell[data-view="deals"] #pipelineWrap,
.app-shell[data-view="deals"] #pipelinePanel {
  min-height: 0;
  height: 100%;
}

/* Hide contacts/deals search and filter bar on invoice page; invoices have their own filters */
.app-shell[data-view="invoices"] #filtersSection {
  display: none;
}

/* When not on Contacts, filters section must reserve zero space (no whitespace gap) */
.app-shell:not(.filters-visible) #filtersSection,
.app-shell:not(.filters-visible) #filtersSection.filters-modern {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: none !important;
}

/* Projects and Invoices panes full width */
#projectsWrap,
#invoicesWrap {
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0;
  min-height: 0; /* critical so inner scroll containers can work inside the mainSplit grid */
}

/* Project view: inset content with grey margin (match contact overview header spacing) */
.app-shell[data-view="projects"] #projectsWrap {
  padding: 44px 24px 24px 24px; /* 44px top = 24px + 20px to lower header from main menu */
  background: var(--gray-100, #f1f5f9);
  box-sizing: border-box;
}
.app-shell[data-view="projects"] #projectsWrap .deal-workspace,
.app-shell[data-view="projects"] #projectsWrap > .pipe-board-list {
  border-radius: var(--radius-xl, 12px);
  overflow: hidden;
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.08));
  background: var(--surface-1, white);
}
/* Project detail header: 23px margin; override any margin-top/margin-left: 0 rules */
#projectsWrap > div > header,
#projectsWrap > div > header.detailHeader.project-detail-header-new {
  margin: 23px !important;
}
/* +5px vertical space between each header line (name, status/stage, meta, KPI row) */
#projectsWrap .project-detail-header-new .detailHeaderIdentity {
  gap: 13px !important;
}
#projectsWrap .project-detail-header-new .mm-stat-chips {
  margin-top: 11px !important;
}
body[data-theme="momentum"] #projectsWrap .project-detail-header-new {
  margin: 23px !important;
}
/* Match project header width: tab content same horizontal inset as header (34px) */
.app-shell[data-view="projects"] #projectsWrap .project-detail-tabs-card .contact-detail-tabs-body {
  padding-left: 34px;
  padding-right: 34px;
}
.app-shell[data-view="projects"] #projectsWrap .project-detail-tabs-header {
  padding-left: 34px;
  padding-right: 34px;
}

#projectsWrap > div > div > div.deal-main-content > div > div.contact-detail-tabs-header.project-detail-tabs-header {
  margin: 0 7px 17px 5px !important;
}

/* Sticky header for invoice tab content (Line Items, Payments, Settings) */
.invoice-tab-sticky-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: white;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border-light);
}

/* Print preview fullscreen: fill viewport and grow iframe */
.invoice-print-preview-fullscreen-wrap:fullscreen,
.invoice-print-preview-fullscreen-wrap:-webkit-full-screen {
  max-width: none;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #e5e7eb;
  padding: 16px;
  box-sizing: border-box;
}
.invoice-print-preview-fullscreen-wrap:fullscreen .invoice-tab-sticky-header,
.invoice-print-preview-fullscreen-wrap:-webkit-full-screen .invoice-tab-sticky-header {
  background: #e5e7eb;
  border-bottom-color: rgba(0,0,0,0.1);
}
.invoice-print-preview-fullscreen-wrap:fullscreen .invoice-print-preview-content,
.invoice-print-preview-fullscreen-wrap:-webkit-full-screen .invoice-print-preview-content {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.invoice-print-preview-fullscreen-wrap:fullscreen .invoice-print-preview-content iframe,
.invoice-print-preview-fullscreen-wrap:-webkit-full-screen .invoice-print-preview-content iframe {
  flex: 1;
  min-height: 0;
  height: auto;
}

/* Invoice/Quote Overview – Project row (optional link to project) */
.overview-project-row {
  margin-top: 2px;
}
.overview-project-row .label {
  display: flex;
  align-items: center;
  gap: 6px;
}
.overview-project-row .label svg {
  opacity: 0.85;
  color: var(--text-secondary);
}
.overview-project-select {
  max-width: 100%;
  background: linear-gradient(180deg, #fefefe 0%, #f8fafc 100%);
  border-radius: 8px;
  border: 1px solid var(--border-light);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.overview-project-select:focus {
  outline: none;
  border-color: var(--primary-300, #93c5fd);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}
.overview-project-hint {
  display: block;
  font-size: 11px;
  color: var(--text-muted, #64748b);
  margin-top: 6px;
  letter-spacing: 0.2px;
}
.overview-project-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--primary-600, var(--primary-600));
  font-weight: 500;
  text-decoration: none;
  padding: 4px 0;
  border-radius: 6px;
  transition: color 0.15s ease, background 0.15s ease;
}
.overview-project-link:hover {
  color: var(--primary-700, var(--primary-700));
  background: rgba(59, 130, 246, 0.08);
}
.overview-project-link svg {
  flex-shrink: 0;
  opacity: 0.9;
}

/* Shared Project-style List (Contacts + Projects) */
.pipe-board-list {
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0;
}

/* Ensure table wrap is visible and styled correctly */
.pipe-list-table-wrap {
  width: 100%;
  max-width: 100%;
  margin: 0;
  border-radius: 0;
  border-left: none;
  border-right: none;
  overflow-x: auto; /* Handle narrow screens */
}

/* Ensure table takes full width */
.pipe-list-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: fixed; /* Enforce column widths if needed, or remove for auto */
}

/* Fix row selection styling */
.pipe-list-row.selected {
  background-color: var(--primary-50) !important;
}

/* Contact List Specific Overrides to match Project List exactly */
#contactList .pipe-board-list {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

#contactList .project-list-content {
  min-height: 0;
}

#contactList .pipe-list-table-wrap {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
/* List pane table wrap: fill remaining height and scroll (so AI interpreted row doesn't cover list) */
.listPane .pipe-list-table-wrap,
.listPane .contact-list-table-wrap,
#contactListWrap .pipe-list-table-wrap,
#contactListWrap .contact-list-table-wrap {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
}

/* Project detail page - ONE long scroll (tabs + all cards scroll together) */
#projectsWrap .deal-workspace {
  min-height: 0; /* allow flex children to shrink and scroll instead of being clipped */
}

#projectsWrap .deal-workspace-body {
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0; /* required in flex layouts or overflow can get "stuck" */
  padding-bottom: 24px; /* prevent bottom (Client/Source Deal/Stats) from being cut off */
}

/* Remove inner scroll so the whole page (including sidebar cards) scrolls as one */
#projectsWrap .deal-main-content {
  overflow: visible;
  flex: 0 0 auto;
}

#projectsWrap .deal-sidebar {
  max-height: none;
  overflow: visible;
}

/* Let tab content grow naturally so one scroll shows everything */
#projectsWrap .project-tab-content {
  overflow: visible;
  min-height: 0;
}

/* =============================
   📊 Analytics page (match app)
============================= */

.analyticsRoot {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--gray-50);
}

.analyticsHeader {
  background: white;
  border-bottom: 1px solid var(--border-light);
  padding: 18px 20px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.analyticsHeader h1 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
}

.analyticsHeader p {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--text-secondary);
}

.analyticsBody {
  flex: 1;
  overflow: auto;
  padding: 16px;
}

.analyticsGrid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 14px;
  align-items: start;
}

@media (max-width: 1100px) {
  .analyticsGrid {
    grid-template-columns: 1fr;
  }
}

.analyticsCard {
  background: white;
  border: 1px solid var(--border-light);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
}

.analyticsCardHead {
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.analyticsCardTitle {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.analyticsCardBody {
  padding: 14px 16px;
}

.analyticsMetrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 1100px) {
  .analyticsMetrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.analyticsMetric {
  border: 1px solid var(--border-light);
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  padding: 12px;
}

.analyticsMetric .k {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.analyticsMetric .v {
  margin-top: 8px;
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
}

.analyticsMetric .s {
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-secondary);
}

.analyticsBars {
  display: grid;
  gap: 10px;
}

.analyticsBarRow {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}

.analyticsBarLabel {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.analyticsDot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  flex: 0 0 auto;
}

.analyticsBarName {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.analyticsBar {
  height: 10px;
  border-radius: 999px;
  background: rgba(15,23,42,0.08);
  overflow: hidden;
  border: 1px solid rgba(15,23,42,0.08);
}

.analyticsBarFill {
  height: 100%;
  border-radius: 999px;
  background: var(--primary-600);
}

.analyticsList {
  display: grid;
  gap: 10px;
}

.analyticsDealRow {
  border: 1px solid var(--border-light);
  border-radius: 14px;
  padding: 12px;
  background: white;
  display: grid;
  gap: 6px;
}

.analyticsDealRow .t {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.analyticsDealRow .name {
  font-weight: 700;
  font-size: 13px;
  color: var(--text-primary);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.analyticsDealRow .meta {
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.analyticsDealRow .badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* =============================
   📈 Reports Dashboard - Split Layout
============================= */

.reportsPane {
  padding: 0;
  background: #f8fafc;
}

/* Split Layout Container */
.reports-split-layout {
  display: flex;
  height: 100%;
  min-height: calc(100vh - 60px);
}

/* LEFT: Report List Panel */
.reports-list-panel {
  width: 300px;
  min-width: 300px;
  background: white;
  border-right: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.reports-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-light);
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.reports-list-header h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.reports-refresh-btn-sm {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: white;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.reports-refresh-btn-sm:hover {
  background: var(--gray-50);
  color: var(--text-primary);
}

.reports-list-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 12px 0;
}

/* Report List Group */
.reports-list-group {
  margin-bottom: 8px;
}

.reports-list-group-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 20px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-tertiary);
}

.reports-list-group-icon {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.reports-list-items {
  display: flex;
  flex-direction: column;
}

/* Report List Item */
.report-list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px 10px 44px;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  transition: all 0.12s ease;
  font-family: inherit;
  width: 100%;
}

.report-list-item:hover {
  background: var(--gray-50);
}

.report-list-item.active {
  background: var(--primary-50);
  border-right: 3px solid var(--primary-500);
}

.report-list-item.active .report-list-name {
  color: var(--primary-700);
  font-weight: 600;
}

.report-list-icon {
  font-size: 16px;
  flex-shrink: 0;
}

.report-list-name {
  font-size: 13px;
  color: var(--text-primary);
  font-weight: 500;
}

/* RIGHT: Preview Panel */
.reports-preview-panel {
  flex: 1;
  overflow-y: auto;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
}

/* Empty State */
.reports-preview-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 400px;
  padding: 40px;
  text-align: center;
}

.reports-preview-empty-icon {
  font-size: 64px;
  margin-bottom: 20px;
  opacity: 0.5;
}

.reports-preview-empty h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 8px;
}

.reports-preview-empty p {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
  max-width: 300px;
}

/* Report preview content styling */
.reports-preview-panel .report-view {
  padding: 24px;
  max-width: none;
}

.reports-preview-panel .report-header {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-light);
}

.reports-preview-panel .report-title {
  font-size: 22px;
}

/* Responsive */
@media (max-width: 900px) {
  .reports-split-layout {
    flex-direction: column;
  }
  
  .reports-list-panel {
    width: 100%;
    min-width: auto;
    border-right: none;
    border-bottom: 1px solid var(--border-light);
    max-height: 300px;
  }
  
  .reports-preview-panel {
    min-height: 400px;
  }
}

/* =============================
   📊 Report Detail Views
============================= */
.report-detail-view {
  min-height: 100%;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.report-detail-header {
  padding: 16px 24px;
  background: white;
  border-bottom: 1px solid var(--border-light);
}

.report-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: white;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
}

.report-back-btn:hover {
  background: var(--gray-50);
  color: var(--text-primary);
}

.report-detail-content {
  padding: 24px;
}

/* Report View Container */
.report-view {
  max-width: 1200px;
  margin: 0 auto;
}

.report-header {
  margin-bottom: 24px;
}

.report-title {
  font-size: 24px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 8px;
}

.report-desc {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
}

/* KPIs */
.report-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

.report-kpi {
  background: white;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
}

.report-kpi.highlight {
  background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-700) 100%);
  border: none;
  color: white;
}

.report-kpi.highlight .report-kpi-value,
.report-kpi.highlight .report-kpi-label {
  color: white;
}

.report-kpi.success { border-color: #10b981; background: #f0fdf4; }
.report-kpi.warning { border-color: #f59e0b; background: #fffbeb; }
.report-kpi.danger { border-color: #ef4444; background: #fef2f2; }

.report-kpi-value {
  font-size: 28px;
  font-weight: 600;
  color: var(--text-primary);
  display: block;
  margin-bottom: 4px;
}

.report-kpi-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Chart Sections */
.report-chart-section {
  background: white;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
}

.report-chart-section h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 20px;
}

/* Bar Chart */
.report-bar-chart {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.report-bar-row {
  display: grid;
  grid-template-columns: 140px 1fr 160px;
  align-items: center;
  gap: 16px;
}

.report-bar-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.report-bar-track {
  height: 24px;
  background: var(--gray-100);
  border-radius: 6px;
  overflow: hidden;
}

.report-bar-fill {
  height: 100%;
  border-radius: 6px;
  transition: width 0.5s ease;
}

.report-bar-value {
  font-size: 12px;
  color: var(--text-secondary);
  text-align: right;
}

/* Table Section */
.report-table-section {
  background: white;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
}

.report-table-section h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 16px;
}

.report-table {
  width: 100%;
  border-collapse: collapse;
}

.report-table th,
.report-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border-light);
}

.report-table th {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: var(--gray-50);
}

.report-table td {
  font-size: 13px;
  color: var(--text-secondary);
}

.report-table tbody tr:hover {
  background: var(--gray-50);
}

.text-success { color: #10b981 !important; }
.text-warning { color: #f59e0b !important; }
.text-danger { color: #ef4444 !important; }

/* Forecast Cards */
.report-forecast-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.report-forecast-card {
  background: var(--gray-50);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 16px;
  text-align: center;
}

.report-forecast-card.overdue {
  background: #fef2f2;
  border-color: #fecaca;
}

.report-forecast-period {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-tertiary);
  text-transform: uppercase;
  margin-bottom: 8px;
}

.report-forecast-value {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
}

.report-forecast-meta {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 4px;
}

/* Velocity Chart */
.report-velocity-chart {
  display: flex;
  align-items: center;
  gap: 0;
  overflow-x: auto;
  padding: 10px 0;
}

.report-velocity-stage {
  display: flex;
  align-items: center;
}

.report-velocity-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 80px;
  padding: 16px 12px;
  border-radius: 8px;
  color: white;
}

.report-velocity-label {
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.report-velocity-days {
  font-size: 16px;
  font-weight: 600;
}

.report-velocity-arrow {
  font-size: 20px;
  color: var(--text-tertiary);
  padding: 0 8px;
}

/* Funnel */
.report-funnel {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.report-funnel-stage {
  display: flex;
  justify-content: center;
}

.report-funnel-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  border-radius: 8px;
  color: white;
  min-width: 200px;
  transition: width 0.5s ease;
}

.report-funnel-bar.won {
  background: #10b981 !important;
}

.report-funnel-name {
  font-size: 13px;
  font-weight: 600;
}

.report-funnel-count {
  font-size: 12px;
  opacity: 0.9;
}

/* Insight Box */
.report-insight-box {
  display: flex;
  gap: 16px;
  padding: 20px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 12px;
  margin-bottom: 24px;
}

.report-insight-box.success {
  background: #f0fdf4;
  border-color: #bbf7d0;
}

.report-insight-icon {
  font-size: 24px;
  flex-shrink: 0;
}

.report-insight-content {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* Trend Chart */
.report-trend-chart {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  height: 200px;
  padding: 20px 0;
}

.report-trend-bar-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}

.report-trend-bar {
  width: 100%;
  background: linear-gradient(180deg, var(--primary-500) 0%, var(--primary-700) 100%);
  border-radius: 6px 6px 0 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 8px;
  min-height: 20px;
}

.report-trend-value {
  font-size: 11px;
  font-weight: 700;
  color: white;
}

.report-trend-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  margin-top: 8px;
}

/* Stats Row */
.report-stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.report-stat-card {
  background: white;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
}

.report-stat-card.success { border-color: #10b981; }
.report-stat-card.danger { border-color: #ef4444; }

.report-stat-icon {
  font-size: 28px;
  margin-bottom: 8px;
}

.report-stat-value {
  font-size: 24px;
  font-weight: 600;
  color: var(--text-primary);
}

.report-stat-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
}

/* Pie Simple */
.report-pie-simple {
  display: flex;
  height: 60px;
  border-radius: 8px;
  overflow: hidden;
  margin: 20px 0;
}

.report-pie-segment {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  transition: flex 0.5s ease;
}

.report-pie-segment.won { background: #10b981; }
.report-pie-segment.lost { background: #ef4444; }

.report-pie-label {
  font-size: 11px;
  font-weight: 600;
  opacity: 0.9;
}

.report-pie-value {
  font-size: 16px;
  font-weight: 600;
}

/* Two Column */
.report-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
}

.report-col {
  background: white;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 24px;
  text-align: center;
}

.report-col h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-secondary);
  margin: 0 0 12px;
}

.report-big-number {
  font-size: 32px;
  font-weight: 600;
  color: var(--text-primary);
}

.report-big-number.success { color: #10b981; }
.report-big-number.danger { color: #ef4444; }

.report-note {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 8px;
}

/* Histogram */
.report-histogram {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 200px;
  padding: 20px 0;
}

.report-histogram-bar-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}

.report-histogram-bar {
  width: 100%;
  border-radius: 6px 6px 0 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 8px;
  min-height: 20px;
}

.report-histogram-count {
  font-size: 11px;
  font-weight: 700;
  color: white;
}

.report-histogram-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-tertiary);
  margin-top: 8px;
  text-align: center;
}

.report-color-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 8px;
}

/* Activity Grid */
.report-activity-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.report-activity-card {
  background: var(--gray-50);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
}

.report-activity-icon {
  font-size: 32px;
  margin-bottom: 8px;
}

.report-activity-count {
  font-size: 28px;
  font-weight: 600;
  color: var(--text-primary);
  display: block;
}

.report-activity-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-tertiary);
}

/* Tips Section */
.report-tip-section {
  background: white;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 24px;
}

.report-tip-section h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 16px;
}

.report-tips {
  list-style: none;
  padding: 0;
  margin: 0;
}

.report-tips li {
  padding: 12px 0;
  border-bottom: 1px solid var(--border-light);
  font-size: 14px;
  color: var(--text-secondary);
}

.report-tips li:last-child {
  border-bottom: none;
}

/* Simple Funnel */
.report-simple-funnel {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.report-funnel-step {
  display: flex;
  justify-content: flex-start;
}

.report-funnel-step-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-radius: 8px;
  color: white;
  min-width: 200px;
}

.report-funnel-step-bar span {
  font-size: 13px;
  font-weight: 600;
}

.report-funnel-step-bar strong {
  font-size: 18px;
}

/* Empty State */
.report-empty {
  text-align: center;
  padding: 40px;
  color: var(--text-tertiary);
  font-size: 14px;
}

.report-more {
  text-align: center;
  padding: 12px;
  color: var(--text-tertiary);
  font-size: 13px;
}

/* Responsive */
@media (max-width: 768px) {
  .report-bar-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  
  .report-bar-value {
    text-align: left;
  }
  
  .report-two-col {
    grid-template-columns: 1fr;
  }
  
  .report-activity-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Template editor modal maximize */
.modal.template-editor-modal.is-maximized {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

.modal.template-editor-modal.is-maximized .modalBody {
  max-height: none !important;
}

.modal.template-editor-modal.is-maximized #templateEditorQuill {
  min-height: calc(100vh - 290px);
}

/* =============================
   ⛶ Detail pane Full View
============================= */

.fullview-close-btn {
  display: none;
  width: 34px;
  padding: 0;
}

.app-shell.detail-full .fullview-close-btn {
  display: inline-flex;
}

/* Hide drawer close button in full view (use left X instead) */
.app-shell.detail-full #drawerCloseBtn {
  display: none !important;
}

/* ===========================================
   📺 DETAIL PANE TWO-COLUMN LAYOUT
=========================================== */

/* Default: Single column layout (stacked) */
.detail-main-col,
.detail-sidebar-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.detail-sidebar-col {
  /* In normal view, sidebar content just stacks below */
  min-width: 0;
  margin-top: 24px; /* Space between main info and sidebar sections */
}

/* First section in sidebar gets extra top margin for separation */
.detail-sidebar-col > .detailSection:first-child {
  margin-top: 8px;
}

/* ===========================================
   📺 FULL SCREEN DETAIL VIEW
=========================================== */

/* Hide other panes when detail is fullscreen */
/* In fullscreen mode, hide everything except the detail pane */
.app-shell.detail-full .folderPane,
.app-shell.detail-full .filters,
.app-shell.detail-full .gmail-tabs-container {
  display: none !important;
}

/* Hide the list pane (sibling of detailPane inside mainSplit) */
.app-shell.detail-full .mainSplit .listPane {
  display: none !important;
}

/* mainSplit stays visible so detailPane can show */
.app-shell.detail-full .mainSplit {
  position: static;
}

/* Make the detail pane cover the ENTIRE screen */
.app-shell.detail-full .detailPane {
  position: fixed !important;
  top: 60px !important; /* Below header */
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: calc(100vh - 60px) !important;
  z-index: 100 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  background: var(--gray-50) !important;
  border: none !important;
  transform: translateX(0%) !important;
}

/* Full view: 2-column layout - Main info LEFT (50%), Relationships/Tasks/Deals RIGHT (50%) */
.app-shell.detail-full .detailPane > div:not(.detail-top-strip):not(.detailHeader) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  flex: 1;
  overflow: hidden;
}

/* Left column: Main contact info */
.app-shell.detail-full .detail-main-col {
  overflow-y: auto;
  padding: 24px 32px;
  background: white;
  gap: 20px;
  grid-column: 1;
}

/* Right column: Relationships, Tasks, Deals, etc. */
.app-shell.detail-full .detail-sidebar-col {
  overflow-y: auto;
  padding: 24px;
  padding-top: 12px;
  background: var(--gray-50);
  border-left: 1px solid var(--border-light);
  gap: 16px; /* Tighter gap between sections */
  min-width: 0; /* Prevent overflow */
  margin-top: 0; /* Reset margin in fullscreen since it's side by side */
  grid-column: 2;
}

/* Fullscreen: remove extra top spacing before sidebar sections */
.app-shell.detail-full .detail-sidebar-col > .detailSection:first-child {
  margin-top: 0;
}

/* Sections in sidebar should have consistent styling */
.app-shell.detail-full .detail-sidebar-col .detailSection {
  background: white;
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-light);
}

/* Section headers in sidebar */
.app-shell.detail-full .detail-sidebar-col .detailSection h3 {
  font-size: 12px;
  margin-bottom: 12px;
}

/* Header in fullscreen mode */
.app-shell.detail-full .detailHeader {
  padding: 12px 32px;
  background: white;
  border-bottom: 1px solid var(--border-light);
  width: 100%;
  box-sizing: border-box;
  position: relative;
}

/* Top-right corner buttons */
.detailHeader #detailTopRightButtons {
  position: absolute;
  top: 2px;
  right: 14px;
  display: flex;
  gap: 6px;
  align-items: center;
  z-index: 10;
}

/* In fullscreen mode, position like window controls at top-right of page */
.app-shell.detail-full .detailHeader #detailTopRightButtons {
  position: fixed !important;
  top: 12px !important;
  right: 12px !important;
  display: flex;
  flex-direction: row;
  gap: 4px;
  align-items: center;
  z-index: 1000;
}

/* Ensure header content spans full width and aligns name/actions on one row */
.app-shell.detail-full .detailHeader > .metaWrap {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  min-width: 0;
}

.app-shell.detail-full .detailHeader .detailHeaderMain {
  width: 100%;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 2px 0;
}

/* Fullscreen: keep menu row on its own line at bottom when using stacked header */
.app-shell.detail-full .detailHeader .detailHeaderMain.detail-header-stacked {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 12px !important;
}
.app-shell.detail-full .detailHeader .detailHeaderMain.detail-header-stacked .detailHeaderActionsRow {
  width: 100% !important;
  border-top: 1px solid var(--border-light, #e5e7eb) !important;
  padding-top: 6px !important;
}

.app-shell.detail-full .detailHeader .detailHeaderIdentity {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
}

/* Top-right buttons should NOT be forced to full width / centered */
.app-shell.detail-full .detailHeader #detailTopRightButtons {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 6px !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.10) !important;
  backdrop-filter: blur(10px);
}

/* Make the two controls look like proper window buttons */
.app-shell.detail-full #detailTopRightButtons .detail-action-btn {
  width: 40px;
  height: 40px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.10);
  background: #ffffff;
}

.app-shell.detail-full #detailTopRightButtons .detail-action-btn:hover {
  background: #f3f4f6;
  border-color: rgba(37, 99, 235, 0.35);
}

.app-shell.detail-full .detailHeader .contactName {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Fullscreen: pull related sections closer to header */
.app-shell.detail-full .detail-sidebar-col {
  margin-top: -6px;
}

.app-shell.detail-full .detailHeader .contactName {
  font-size: 24px !important;
  line-height: 1.2 !important;
}

/* Header actions row in fullscreen - when stacked, full width on its own line; otherwise right aligned */
.app-shell.detail-full .detailHeader .detailHeaderMain.detail-header-stacked #detailHeaderActions {
  width: 100% !important;
  justify-content: flex-start !important;
}
.app-shell.detail-full .detailHeader #detailHeaderActions {
  flex: 0 1 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: thin;
}

/* Ensure buttons in header actions are properly styled */
.app-shell.detail-full .detailHeader #detailHeaderActions .btn {
  margin: 0;
}

/* Hide topStrip in fullscreen mode since buttons are in header */
.app-shell.detail-full .detail-top-strip {
  display: none !important;
}

/* Top strip in fullscreen */
.app-shell.detail-full .detail-top-strip {
  background: white;
  border-bottom: 1px solid var(--border-light);
  padding: 12px 24px;
  display: flex;
  justify-content: center;
  overflow-x: auto;
}

.app-shell.detail-full .detail-top-strip::-webkit-scrollbar {
  height: 4px;
}

.app-shell.detail-full .detail-top-strip::-webkit-scrollbar-thumb {
  background: var(--gray-300);
  border-radius: 2px;
}

/* Legacy grid support */
.app-shell.detail-full #detailContent .detailFullGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}

.app-shell.detail-full #detailContent .detailFullCol {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.app-shell.detail-full #detailContent .detailFullCol > .detailSection {
  margin-bottom: 0;
}

/* Responsive: Stack on smaller screens */
@media (max-width: 1100px) {
  .app-shell.detail-full #detailContent {
    grid-template-columns: 1fr !important;
  }
  
  .app-shell.detail-full #detailContent .detail-sidebar-col {
    border-left: none;
    border-top: 1px solid var(--border-light);
  }
  
  .app-shell.detail-full #detailContent .detailFullGrid {
    grid-template-columns: 1fr;
  }
}

/* Overlay should be active for full view */
.app-shell.detail-full .detailOverlay {
  display: block !important;
  opacity: 0.5 !important;
  pointer-events: auto !important;
  background: rgba(0, 0, 0, 0.3);
}

/* Full view X should ONLY appear in full view */
.fullview-close-btn { display: none !important; }
.app-shell.detail-full .fullview-close-btn { display: inline-flex !important; }

/* Maximize button styling */
.detail-max-btn,
.detail-new-tab-btn {
  width: 34px;
  height: 34px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
  background: white;
  cursor: pointer;
  transition: all 0.15s ease;
}

/* In fullscreen mode, style like window controls */
.app-shell.detail-full .detail-max-btn,
.app-shell.detail-full .detail-new-tab-btn {
  width: 32px;
  height: 32px;
  border-radius: 6px;
}

.detail-max-btn:hover,
.detail-new-tab-btn:hover {
  background: var(--gray-100);
}

.app-shell.detail-full .detail-max-btn {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.app-shell.detail-full .detail-max-btn:hover {
  background: var(--primary-600);
}

/* Open in new tab button */
.detail-new-tab-btn {
  color: var(--text-secondary);
}

.detail-new-tab-btn:hover {
  color: var(--primary);
  border-color: var(--primary);
}

.detail-new-tab-btn svg {
  width: 16px;
  height: 16px;
}

/* Deal Intelligence accordion */
.dealIntelligence .dealIntelHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  cursor: pointer;
  user-select: none;
}

.dealIntelligence .dealIntelHeadLeft {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.dealIntelligence .dealIntelHeadRight {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dealIntelligence .dealIntelChevron {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(15,23,42,0.04);
  font-weight: 700;
  line-height: 1;
}

.dealIntelligence .dealIntelPill {
  font-size: 11px;
  font-weight: 600;
}

/* ===========================================
   🎯 LEADS VIEW (Form Responses)
=========================================== */
.leads-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

.leads-header {
  display: flex;
  flex-direction: column;
  padding: 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.leads-header-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 24px 32px 16px;
}

.leads-header-left h2 {
  font-size: 24px;
  font-weight: 600;
  margin: 0;
  color: white;
}

.leads-subtitle {
  font-size: 14px;
  color: rgba(255,255,255,0.8);
  margin: 6px 0 0 0;
}

.leads-header-right {
  display: flex;
  gap: 10px;
}

.leads-header-right .btn {
  background: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.3);
  color: white;
  backdrop-filter: blur(10px);
}

.leads-header-right .btn:hover {
  background: rgba(255,255,255,0.3);
}

/* KPI Bar */
.leads-kpi-bar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  padding: 16px 32px 20px;
  background: rgba(0,0,0,0.15);
}

.leads-kpi {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 24px;
}

.leads-kpi:first-child {
  padding-left: 0;
}

.leads-kpi-value {
  font-size: 28px;
  font-weight: 600;
  color: white;
  line-height: 1;
}

.leads-kpi-label {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 6px;
}

.leads-kpi-divider {
  width: 1px;
  height: 40px;
  background: rgba(255,255,255,0.2);
}

.leads-kpi.good .leads-kpi-value {
  color: #86efac;
}

.leads-kpi.ok .leads-kpi-value {
  color: #fde047;
}

.leads-filter-checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  padding: 10px 20px;
  background: rgba(255,255,255,0.1);
  border-radius: 8px;
  transition: all 0.15s ease;
  white-space: nowrap;
  margin-left: auto;
}

.leads-filter-checkbox:hover {
  background: rgba(255,255,255,0.2);
}

.leads-filter-checkbox input[type="checkbox"] {
  width: 20px;
  height: 20px;
  cursor: pointer;
  accent-color: #22c55e;
}

.leads-filter-checkbox span {
  font-size: 15px;
  font-weight: 600;
  color: white;
}

.leads-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 24px 32px;
  overflow: auto;
  gap: 20px;
}

/* Form Selector Card */
.leads-form-selector {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.04);
}

.leads-selector-main {
  display: flex;
  align-items: center;
  gap: 12px;
}

.leads-form-selector label {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-secondary);
  white-space: nowrap;
}

.leads-form-selector .select {
  flex: 1;
  max-width: 400px;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 600;
}

.leads-no-forms {
  font-size: 13px;
  color: var(--text-muted);
  padding: 12px 16px;
  background: var(--gray-50);
  border-radius: 8px;
}

.leads-no-forms a {
  color: var(--primary);
  font-weight: 600;
}

/* Stats Cards */
.leads-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.leads-stat-card {
  padding: 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  cursor: pointer;
  transition: all 0.2s ease;
  border: 2px solid transparent;
}

.leads-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.leads-stat-card.active {
  border-color: var(--primary);
  background: var(--primary-50);
}

.leads-stat-card.new {
  border-left: 4px solid #8b5cf6;
}

.leads-stat-card.converted {
  border-left: 4px solid #22c55e;
}

.leads-stat-number {
  font-size: 32px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1;
}

.leads-stat-card.new .leads-stat-number {
  color: #8b5cf6;
}

.leads-stat-card.converted .leads-stat-number {
  color: #22c55e;
}

.leads-stat-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 8px;
}

.leads-responses {
  flex: 1;
  min-height: 0;
}

.leads-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  text-align: center;
  color: var(--text-muted);
  background: white;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.leads-empty-icon {
  font-size: 64px;
  margin-bottom: 20px;
  opacity: 0.6;
}

.leads-empty-state h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 10px 0;
}

.leads-empty-state p {
  font-size: 14px;
  margin: 0;
  max-width: 320px;
  line-height: 1.5;
}

.leads-loading,
.leads-error {
  padding: 60px;
  text-align: center;
  color: var(--text-muted);
  background: white;
  border-radius: 12px;
}

.leads-error {
  color: var(--red-600);
}

/* Leads Table */
.leads-table-wrap {
  background: white;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.04);
  overflow: hidden;
}

.leads-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.leads-table th {
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  padding: 14px 20px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 2px solid #e2e8f0;
}

.leads-table td {
  padding: 20px;
  vertical-align: top;
  background: white;
  border-bottom: 1px solid #f1f5f9;
}

.leads-table tbody tr:last-child td {
  border-bottom: none;
}

.leads-table tbody tr:hover td {
  background: #fafbfc;
}

.lead-response-row.converted td {
  background: rgba(34, 197, 94, 0.03);
}

.lead-response-row.converted:hover td {
  background: rgba(34, 197, 94, 0.06);
}

.lead-response-time {
  white-space: nowrap;
}

.lead-time-main {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

.lead-time-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 3px;
}

/* Lead Data Row with Avatar */
.lead-data-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.lead-avatar {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}

.lead-avatar.converted {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
}

.lead-data-info {
  flex: 1;
  min-width: 0;
}

.lead-data-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.lead-data-email,
.lead-data-phone,
.lead-data-company {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lead-data-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

.lead-view-all {
  font-size: 12px;
  margin-top: 8px;
  color: var(--primary);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font-weight: 600;
}

.lead-view-all:hover {
  text-decoration: underline;
}

.lead-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.lead-status-badge.new {
  background: linear-gradient(135deg, #8b5cf620 0%, #6d28d920 100%);
  color: #7c3aed;
}

.lead-status-badge.converted {
  background: linear-gradient(135deg, #22c55e20 0%, #16a34a20 100%);
  color: #16a34a;
}

.leads-table td.lead-actions-cell,
.leads-table td.lead-response-status {
  vertical-align: middle;
}

.lead-response-actions {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  align-items: center;
}

.lead-response-actions .btn {
  white-space: nowrap;
  font-size: 12px;
  padding: 8px 14px;
}

.lead-response-actions .btn.ghost {
  background: transparent;
  border: 1px solid var(--border);
}

.lead-response-actions .btn.ghost:hover {
  background: var(--red-50);
  border-color: var(--red-200);
  color: var(--red-600);
}

/* Response Details Modal */
.response-field {
  padding: 14px 16px;
  background: var(--gray-50);
  border-radius: 10px;
  border-left: 3px solid var(--primary);
}

.response-field-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}

.response-field-value {
  font-size: 14px;
  color: var(--text-primary);
  word-break: break-word;
  line-height: 1.5;
}

/* Lifecycle Stage Selector in Detail Panel */
.lifecycle-stage-selector {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.lifecycle-stage-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.lifecycle-change-btn {
  width: 24px;
  height: 24px;
  border: 1px solid var(--border-light);
  background: var(--gray-50);
  border-radius: 6px;
  cursor: pointer;
  font-size: 10px;
  color: var(--text-muted);
  transition: all 0.15s ease;
}

.lifecycle-change-btn:hover {
  background: var(--gray-100);
  border-color: var(--border);
  color: var(--text-primary);
}
image.pngi
/* Lifecycle Dropdown Menu */
.lifecycle-dropdown-menu {
  animation: fadeIn 0.15s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* ============================================
   Convert Lead Wizard Styles
   ============================================ */

.wizard-modal {
  max-width: 560px;
  width: 95vw;
}

.wizard-modal .modalBody {
  padding: 0;
}

/* Step Indicator */
.wizard-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 24px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-bottom: 1px solid #e2e8f0;
  gap: 0;
}

.wizard-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.wizard-step-number {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #e2e8f0;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  transition: all 0.2s ease;
}

.wizard-step.active .wizard-step-number {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  color: white;
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.wizard-step.done .wizard-step-number {
  background: #22c55e;
  color: white;
}

.wizard-step-label {
  
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.wizard-step.active .wizard-step-label {
  color: #6366f1;
}

.wizard-step.done .wizard-step-label {
  color: #22c55e;
}

.wizard-step-line {
  width: 40px;
  height: 2px;
  background: #e2e8f0;
  margin: 0 8px;
  margin-bottom: 20px;
}

/* Wizard Body */
.wizard-body {
  padding: 24px !important;
}

.wizard-content {
  text-align: center;
}

.wizard-icon {
  font-size: 36px;
  margin-bottom: 8px;
}

.wizard-content h2 {
  font-size: 20px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 4px 0;
}

.wizard-subtitle {
  font-size: 13px;
  color: #6b7280;
  margin: 0 0 12px 0;
}

.wizard-subtitle strong {
  color: #111827;
}

.wizard-hint {
  font-size: 12px;
  color: #9ca3af;
  margin-top: 10px;
  margin-bottom: 0;
}

/* Lead Card */
.wizard-lead-card {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 16px;
  text-align: left;
}

.wizard-lead-field {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px solid #e2e8f0;
  gap: 12px;
}

.wizard-lead-field:last-child {
  border-bottom: none;
}

.wizard-field-content {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.wizard-field-label {
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  white-space: nowrap;
  flex-shrink: 0;
}

.wizard-field-value {
  font-size: 14px;
  font-weight: 500;
  color: #1e293b;
  word-break: break-word;
  flex: 1;
  line-height: 1.5;
}

.wizard-lead-field.additional {
  background: rgba(99, 102, 241, 0.05);
  margin: 2px -12px;
  padding: 10px 12px;
  border-radius: 6px;
  border-bottom: none;
}

.wizard-lead-field.additional + .wizard-lead-field:not(.additional) {
  border-top: 1px solid #e2e8f0;
  padding-top: 12px;
}

.wizard-mapping-badge {
  font-size: 10px;
  font-weight: 600;
  color: #6366f1;
  background: #eef2ff;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 2px;
}

.wizard-mapping-info {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border: 1px solid #f59e0b;
  border-radius: 8px;
  margin: 12px 0;
  font-size: 12px;
  color: #92400e;
  text-align: left;
}

.wizard-mapping-icon {
  font-size: 18px;
  flex-shrink: 0;
}

/* Matches */
.wizard-matches {
  margin: 20px 0;
  text-align: left;
}

.wizard-matches-title {
  font-size: 13px;
  font-weight: 600;
  color: #6b7280;
  margin-bottom: 12px;
}

.wizard-match-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: white;
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.wizard-match-card:hover {
  border-color: #6366f1;
  background: #f8f7ff;
}

.wizard-match-info {
  flex: 1;
  min-width: 0;
}

.wizard-match-name {
  font-size: 15px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 2px;
}

.wizard-match-meta {
  font-size: 12px;
  color: #22c55e;
  font-weight: 500;
}

.wizard-match-details {
  font-size: 12px;
  color: #6b7280;
  margin-top: 4px;
  display: flex;
  gap: 12px;
}

.wizard-match-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* No Matches */
.wizard-no-matches {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border: 1px solid #bbf7d0;
  border-radius: 12px;
  padding: 24px;
  margin: 20px 0;
}

.wizard-no-matches-icon {
  font-size: 32px;
  margin-bottom: 8px;
}

.wizard-no-matches div {
  font-size: 14px;
  color: #166534;
}

/* Create New */
.wizard-create-new {
  margin: 20px 0 12px 0;
}

.wizard-create-new .btn {
  width: 100%;
}

/* Skip Link */
.wizard-skip {
  margin-top: 8px;
}

.wizard-skip a {
  font-size: 13px;
  color: #9ca3af;
  text-decoration: none;
}

.wizard-skip a:hover {
  color: #6b7280;
  text-decoration: underline;
}

/* Company Link Info */
.wizard-company-link {
  background: #eff6ff;
  color: var(--primary-700);
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 16px;
}

/* Summary */
.wizard-summary {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
  margin: 20px 0;
  text-align: left;
}

.wizard-summary-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #e2e8f0;
  font-size: 14px;
  color: #374151;
}

.wizard-summary-item:last-child {
  border-bottom: none;
}

.wizard-summary-item.create {
  color: #059669;
}

.wizard-summary-item.update {
  color: #d97706;
}

.wizard-summary-item.link {
  color: var(--primary-600);
}

.wizard-summary-item.skip {
  color: #9ca3af;
}

.wizard-summary-item.relationship {
  color: #7c3aed;
}

/* Owner Selection */
.wizard-owner {
  margin: 20px 0;
  text-align: left;
}

.wizard-owner label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 8px;
}

.wizard-owner .select {
  width: 100%;
}

/* Actions */
.wizard-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #e2e8f0;
}

.wizard-actions .btn.large {
  padding: 12px 24px;
  font-size: 15px;
}

/* Success State */
.wizard-success {
  padding: 40px 20px;
}

.wizard-success-icon {
  font-size: 64px;
  margin-bottom: 20px;
  animation: successPop 0.5s ease;
}

.wizard-success h2 {
  color: #059669;
}

.wizard-success p {
  color: #6b7280;
  margin-bottom: 24px;
}

/* Success Action Buttons */
.wizard-success-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 24px 0;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}

.wizard-action-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  border-radius: 12px;
  text-align: left;
  transition: all 0.2s ease;
  border: 2px solid var(--border-light);
  background: white;
  cursor: pointer;
}

.wizard-action-btn:hover {
  border-color: var(--primary-300);
  background: var(--primary-50);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
}

.wizard-action-btn.primary {
  border-color: var(--primary);
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-600) 100%);
  color: white;
}

.wizard-action-btn.primary:hover {
  background: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-700) 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(99, 102, 241, 0.3);
}

.wizard-action-btn.primary .wizard-action-text strong,
.wizard-action-btn.primary .wizard-action-text small {
  color: white;
}

.wizard-action-icon {
  font-size: 28px;
  flex-shrink: 0;
}

.wizard-action-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.wizard-action-text strong {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.wizard-action-text small {
  font-size: 12px;
  color: var(--text-secondary);
}

@keyframes successPop {
  0% { transform: scale(0.5); opacity: 0; }
  70% { transform: scale(1.2); }
  100% { transform: scale(1); opacity: 1; }
}

/* ===========================================
   📊 PIPELINE MULTI-VIEW STYLES
   =========================================== */

/* Header */
.pipe-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  position: sticky;
  top: 0;
  z-index: 10;
}

.pipe-header-left {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 240px;
  flex: 1 1 240px;
}

.pipe-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pipe-title {
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.pipe-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.pipe-stale-pill {
  border-color: var(--warning-200) !important;
  background: var(--warning-50) !important;
  color: var(--warning-700) !important;
}

.pipe-header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex-wrap: nowrap;
}

/* View Toggle Buttons (Pipeline & Calendar) */
.pipe-view-toggle,
.cal-view-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--gray-100);
  border-radius: 10px;
  padding: 4px;
}

.pipe-view-btn,
.cal-view-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.pipe-view-btn:hover,
.cal-view-btn:hover {
  background: white;
  color: var(--text-primary);
}

.pipe-view-btn.active,
.cal-view-btn.active {
  background: white;
  color: var(--primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.pipe-view-btn svg,
.cal-view-btn svg {
  width: 18px;
  height: 18px;
}

/* Board Container */
.pipe-board {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 16px;
}

/* ===========================================
   🏁 KANBAN VIEW
   =========================================== */

.pipe-board-kanban {
  overflow-x: auto;
}

.pipe-kanban-wrap {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, 340px);
  gap: 12px;
  align-items: start;
  padding-bottom: 18px;
  min-width: min-content;
}

.pipe-kanban-col {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  min-height: 220px;
  border-top: 4px solid #e2e8f0;
  transition: outline 0.15s ease;
}

.pipe-kanban-col.drag-over {
  outline: 2px dashed var(--primary);
  outline-offset: -4px;
  background: rgba(99, 102, 241, 0.02);
}

.pipe-kanban-head {
  padding: 12px;
  border-bottom: 1px solid var(--border-light);
}

.pipe-kanban-head-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.pipe-kanban-stage {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.pipe-stage-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  flex-shrink: 0;
}

.pipe-stage-name {
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pipe-kanban-head-total {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-top: 6px;
}

.pipe-kanban-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  flex: 1;
}

.pipe-kanban-empty {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  padding: 12px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  text-align: center;
}

/* Deal Cards (Kanban) */
.pipe-deal-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: all 0.15s ease;
}

.pipe-deal-card:hover {
  border-color: var(--primary-200);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

.pipe-deal-card.dragging {
  opacity: 0.5;
  transform: rotate(2deg);
}

.pipe-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.pipe-card-info {
  min-width: 0;
  flex: 1;
}

.pipe-card-name {
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-primary);
}

.pipe-card-sub {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.pipe-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.pipe-card-stage {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
}

.pipe-card-value {
  font-size: 12px;
  font-weight: 700;
  color: var(--primary-700);
}

/* ===========================================
   📋 LIST VIEW
   =========================================== */

.pipe-board-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pipe-list-filters {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
  padding: 12px 16px;
  background: var(--gray-50);
  border-radius: 12px;
  border: 1px solid var(--border-light);
}

.pipe-list-search {
  flex: 1 1 200px;
  min-width: 120px;
  max-width: 280px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  background: white;
}

.pipe-list-search:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-100);
}

.pipe-list-stage-filter {
  flex: 0 0 auto;
  max-width: 150px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  background: white;
  cursor: pointer;
}

.pipe-list-stale-toggle {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
}

.pipe-list-stale-toggle input {
  cursor: pointer;
}

.pipe-list-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: white;
}

.pipe-list-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.pipe-list-table thead {
  background: var(--gray-50);
  position: sticky;
  top: 0;
  z-index: 1;
  box-shadow: inset 0 -1px 0 var(--border-light);
}

.pipe-list-table th {
  padding: 12px 16px;
  text-align: left;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

/* Hide tab-style underline (orange bar) in list/table headers – only for actual tabs */
.pipe-list-table thead th::after,
.pipe-list-table thead th.active::after {
  display: none !important;
  content: none !important;
}

.pipe-list-table th[data-sort] {
  cursor: pointer;
  user-select: none;
}

.pipe-list-table th[data-sort]:hover {
  color: var(--primary);
  background: var(--gray-100);
}

.pipe-list-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-light);
  vertical-align: middle;
}

.pipe-list-row {
  cursor: pointer;
  transition: background 0.1s ease;
}

.pipe-list-row:hover {
  background: #f8fafc;
}

/* Invoice list: fit table to viewport, keep Actions column visible */
.invoice-list-table-wrap {
  min-width: 0;
  max-width: 100%;
}
.invoice-list-table {
  table-layout: fixed;
  max-width: 100%;
}
.invoice-list-table .pipe-list-name,
.invoice-list-table td:nth-child(2),
.invoice-list-table td:nth-child(3) {
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Sticky Actions column so it stays visible without horizontal scroll */
.invoice-list-table .invoice-list-actions-col {
  position: sticky;
  right: 0;
  z-index: 2;
  background: #fff;
  box-shadow: -6px 0 12px rgba(0, 0, 0, 0.06);
}
.invoice-list-table thead .invoice-list-actions-col {
  background: #f9fafb;
}
.invoice-list-table .pipe-list-row:hover .invoice-list-actions-col {
  background: #f8fafc;
}
/* Constrain invoice list so table doesn't overflow viewport */
.invoice-board-list {
  min-width: 0;
  max-width: 100%;
}
.invoice-board-list .invoice-list-table-wrap {
  overflow-x: auto;
  overflow-y: auto;
  padding-right: 12px;
  box-sizing: border-box;
}
/* Ensure Actions column and button are never clipped */
.invoice-list-table .invoice-list-actions-col {
  min-width: 118px;
  width: 118px !important;
  box-sizing: border-box;
}
.invoice-list-table .invoice-row-actions-cell {
  padding-right: 16px !important;
}

.pipe-list-row.stale {
  background: rgba(245, 158, 11, 0.04);
}

.pipe-list-name {
  font-weight: 600;
  color: var(--text-primary);
}

.pipe-list-value {
  font-weight: 600;
  color: var(--primary-700);
}

.pipe-list-empty {
  text-align: center;
  padding: 40px 20px !important;
  color: var(--text-muted);
}

.pipe-stage-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.pipe-stale-badge {
  font-size: 14px;
}

/* ===========================================
   📁 GROUPED VIEW
   =========================================== */

.pipe-board-grouped {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pipe-grouped-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 16px;
  background: var(--gray-50);
  border-radius: 12px;
  border: 1px solid var(--border-light);
}

.pipe-grouped-controls label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}

.pipe-grouped-select {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  background: white;
  cursor: pointer;
}

.pipe-grouped-sections {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pipe-grouped-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
  background: var(--gray-50);
  border-radius: 12px;
}

.pipe-group-section {
  background: white;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.pipe-group-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--gray-50);
  cursor: pointer;
  border-left: 4px solid var(--primary);
  transition: background 0.1s ease;
}

.pipe-group-header:hover {
  background: var(--gray-100);
}

.pipe-group-toggle {
  font-size: 10px;
  color: var(--text-muted);
  transition: transform 0.2s ease;
}

.pipe-group-section.collapsed .pipe-group-toggle {
  transform: rotate(-90deg);
}

.pipe-group-title {
  font-weight: 700;
  font-size: 14px;
  color: var(--text-primary);
  flex: 1;
}

.pipe-group-stats {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pipe-group-content {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border-light);
  max-height: 500px;
  overflow-y: auto;
}

.pipe-group-section.collapsed .pipe-group-content {
  display: none;
}

.pipe-group-deal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-light);
  cursor: pointer;
  transition: background 0.1s ease;
}

.pipe-group-deal:last-child {
  border-bottom: none;
}

.pipe-group-deal:hover {
  background: var(--gray-50);
}

.pipe-group-deal-main {
  min-width: 0;
  flex: 1;
}

.pipe-group-deal-name {
  font-weight: 600;
  font-size: 13px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pipe-group-deal-company {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.pipe-group-deal-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.pipe-group-deal-value {
  font-weight: 700;
  font-size: 13px;
  color: var(--primary-700);
}

/* ===========================================
   📊 GRAPH VIEW
   =========================================== */

.pipe-board-graph {
  padding: 20px;
}

.pipe-graph-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

@media (max-width: 1000px) {
  .pipe-graph-grid {
    grid-template-columns: 1fr;
  }
}

.pipe-graph-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.pipe-graph-card h3 {
  margin: 0 0 16px 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}

/* Summary Card */
.pipe-graph-summary {
  grid-column: 1 / -1;
}

.pipe-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

@media (max-width: 700px) {
  .pipe-summary-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.pipe-summary-stat {
  text-align: center;
  padding: 16px;
  background: linear-gradient(135deg, var(--gray-50) 0%, white 100%);
  border-radius: 12px;
  border: 1px solid var(--border-light);
}

.pipe-summary-value {
  font-size: 28px;
  font-weight: 600;
  color: var(--primary);
  letter-spacing: -0.02em;
}

.pipe-summary-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Funnel Chart */
.pipe-funnel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pipe-funnel-row {
  display: grid;
  grid-template-columns: 140px 1fr 140px;
  gap: 12px;
  align-items: center;
}

.pipe-funnel-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}

.pipe-funnel-bar-wrap {
  height: 28px;
  background: var(--gray-100);
  border-radius: 6px;
  overflow: hidden;
}

.pipe-funnel-bar {
  height: 100%;
  border-radius: 6px;
  transition: width 0.5s ease;
  min-width: 4px;
}

.pipe-funnel-stats {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: 11px;
  color: var(--text-secondary);
}

.pipe-funnel-stats span:first-child {
  font-weight: 600;
  color: var(--text-primary);
}

/* Win/Loss Chart */
.pipe-winloss {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.pipe-winloss-chart {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pipe-winloss-bar {
  display: flex;
  height: 32px;
  border-radius: 8px;
  overflow: hidden;
}

.pipe-winloss-won {
  background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
  transition: width 0.5s ease;
}

.pipe-winloss-lost {
  background: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
  transition: width 0.5s ease;
}

.pipe-winloss-labels {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 600;
}

.pipe-winloss-labels .won {
  color: #10b981;
}

.pipe-winloss-labels .lost {
  color: #ef4444;
}

.pipe-winloss-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.pipe-winloss-stat {
  text-align: center;
  padding: 12px;
  background: var(--gray-50);
  border-radius: 8px;
}

.pipe-winloss-stat .value {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
}

.pipe-winloss-stat .label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-top: 4px;
}

/* Timeline Chart */
.pipe-timeline {
  min-height: 180px;
}

.pipe-timeline-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 160px;
  color: var(--text-muted);
  font-size: 13px;
}

.pipe-timeline-chart {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 140px;
  padding-bottom: 24px;
}

.pipe-timeline-bar-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: flex-end;
}

.pipe-timeline-bar {
  width: 100%;
  max-width: 40px;
  background: linear-gradient(180deg, var(--primary) 0%, var(--primary-400) 100%);
  border-radius: 4px 4px 0 0;
  transition: height 0.3s ease;
  min-height: 4px;
}

.pipe-timeline-label {
  font-size: 9px;
  color: var(--text-muted);
  margin-top: 6px;
  white-space: nowrap;
}

.pipe-timeline-legend {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 8px;
  padding: 0 4px;
}

/* =============================
   Onboarding Wizard
============================= */

.onboarding-wizard-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.8);
  backdrop-filter: blur(4px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.onboarding-wizard-modal {
  width: 100%;
  max-width: 680px;
  background: white;
  border-radius: 20px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  animation: slideUp 0.4s ease;
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

.onboarding-wizard-content {
  padding: 32px;
}

/* Progress Bar */
.onboarding-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 32px;
}

.onboarding-progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.onboarding-progress-dot {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--gray-100);
  border: 2px solid var(--gray-200);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-tertiary);
  transition: all 0.3s ease;
}

.onboarding-progress-step.active .onboarding-progress-dot {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
  box-shadow: 0 0 0 4px var(--primary-100);
}

.onboarding-progress-step.completed .onboarding-progress-dot {
  background: var(--green-500);
  border-color: var(--green-500);
  color: white;
}

.onboarding-progress-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  white-space: nowrap;
}

.onboarding-progress-step.active .onboarding-progress-label {
  color: var(--primary);
}

.onboarding-progress-step.completed .onboarding-progress-label {
  color: var(--green-600);
}

.onboarding-progress-line {
  width: 40px;
  height: 2px;
  background: var(--gray-200);
  margin: 0 8px;
  margin-bottom: 24px;
}

/* Welcome Screen */
.onboarding-welcome {
  text-align: center;
  padding: 20px 0;
}

.onboarding-welcome-icon {
  font-size: 64px;
  margin-bottom: 16px;
  animation: bounce 1s ease infinite;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.onboarding-welcome-title {
  font-size: 32px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 12px;
  letter-spacing: -0.5px;
}

.onboarding-welcome-subtitle {
  font-size: 16px;
  color: var(--text-secondary);
  margin: 0 0 28px;
  line-height: 1.5;
}

.onboarding-welcome-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  max-width: 400px;
  margin: 0 auto 24px;
}

.onboarding-feature {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--gray-50);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}

.onboarding-feature-icon {
  font-size: 20px;
}

.onboarding-time-estimate {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: var(--primary-50);
  border-radius: 100px;
  font-size: 14px;
  color: var(--primary-700);
}

.onboarding-time-icon {
  font-size: 18px;
}

/* Step Content */
.onboarding-step {
  padding: 10px 0;
}

.onboarding-step-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 24px;
}

.onboarding-step-icon {
  font-size: 40px;
  flex-shrink: 0;
}

.onboarding-step-title {
  font-size: 24px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 6px;
}

.onboarding-step-desc {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}

/* Form Elements */
.onboarding-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.onboarding-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.onboarding-field-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.onboarding-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.onboarding-input,
.onboarding-textarea {
  padding: 12px 16px;
  font-size: 15px;
  border: 2px solid var(--border);
  border-radius: 12px;
  background: white;
  transition: all 0.2s ease;
  font-family: inherit;
}

.onboarding-input:focus,
.onboarding-textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-100);
}

.onboarding-input::placeholder,
.onboarding-textarea::placeholder {
  color: var(--text-tertiary);
}

.onboarding-helper {
  font-size: 12px;
  color: var(--text-tertiary);
  margin: 4px 0 0;
}

/* Tips */
.onboarding-tip {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  background: var(--amber-50);
  border-radius: 12px;
  border: 1px solid var(--amber-200);
  margin-top: 20px;
}

.onboarding-tip-icon {
  font-size: 18px;
  flex-shrink: 0;
}

.onboarding-tip span:last-child {
  font-size: 13px;
  color: var(--amber-800);
  line-height: 1.5;
}

/* Sample Data Options */
.onboarding-sample-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.onboarding-sample-option {
  display: flex;
  align-items: flex-start;
  padding: 16px 20px;
  background: var(--gray-50);
  border: 2px solid var(--border);
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.onboarding-sample-option:hover {
  border-color: var(--primary-200);
  background: white;
}

.onboarding-sample-option.selected {
  border-color: var(--primary);
  background: var(--primary-50);
}

.onboarding-sample-option input[type="radio"] {
  display: none;
}

.onboarding-sample-option-content {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.onboarding-sample-option-icon {
  font-size: 24px;
  flex-shrink: 0;
}

.onboarding-sample-option-content strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.onboarding-sample-option-content p {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.4;
}

/* Tour Grid */
.onboarding-tour-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}

.onboarding-tour-item {
  padding: 18px;
  background: var(--gray-50);
  border-radius: 14px;
  text-align: center;
}

.onboarding-tour-icon {
  font-size: 32px;
  margin-bottom: 10px;
}

.onboarding-tour-item h4 {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 6px;
}

.onboarding-tour-item p {
  font-size: 12px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.4;
}

/* Summary */
.onboarding-summary {
  padding: 16px 20px;
  background: var(--green-50);
  border: 1px solid var(--green-200);
  border-radius: 12px;
}

.onboarding-summary h4 {
  font-size: 14px;
  font-weight: 700;
  color: var(--green-800);
  margin: 0 0 10px;
}

.onboarding-summary ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.onboarding-summary li {
  font-size: 13px;
  color: var(--green-700);
  padding: 4px 0;
}

/* Actions */
.onboarding-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--border-light);
}

.onboarding-btn-primary {
  padding: 14px 28px;
  font-size: 15px;
  font-weight: 700;
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-600) 100%) !important;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25);
}

.onboarding-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
  background: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-700) 100%) !important;
}

.onboarding-btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.onboarding-btn-finish {
  padding: 16px 32px;
  font-size: 16px;
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
}

.onboarding-btn-finish:hover {
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4);
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
}

.onboarding-btn-back {
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
  color: #64748b;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color 0.2s ease;
  font-family: inherit;
}

.onboarding-btn-back:hover {
  color: #1e293b;
}

.onboarding-btn-skip {
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
  color: #94a3b8;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color 0.2s ease;
  font-family: inherit;
}

.onboarding-btn-skip:hover {
  color: #64748b;
}

/* =============================
   Onboarding Checklist Widget (Command Center)
============================= */

.cc-onboarding-checklist {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cc-onboarding-progress-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cc-onboarding-progress {
  height: 8px;
  background: var(--gray-200);
  border-radius: 100px;
  overflow: hidden;
}

.cc-onboarding-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--green-400), var(--green-500));
  border-radius: 100px;
  transition: width 0.5s ease;
}

.cc-onboarding-progress-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
}

.cc-onboarding-progress-text {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-tertiary);
}

.cc-onboarding-progress-msg {
  font-size: 12px;
  font-weight: 500;
  color: var(--green-700, #15803d);
}

.cc-onboarding-next-up {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  background: var(--primary-50, #eff6ff);
  border-radius: 10px;
  border-left: 3px solid var(--primary, #2563eb);
}

.cc-onboarding-next-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--primary-600, #2563eb);
}

.cc-onboarding-next-action {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.cc-onboarding-phase-block {
  padding: 10px 12px;
  background: var(--gray-50);
  border-radius: 10px;
}

.cc-onboarding-phase-block:first-of-type {
  margin-top: 0;
}

.cc-onboarding-phase-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.cc-onboarding-phase {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
  padding-left: 0;
  margin: 0;
}

.cc-onboarding-phase-done {
  font-size: 10px;
  font-weight: 600;
  color: var(--green-600, #16a34a);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.cc-onboarding-items {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cc-onboarding-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin: 0 -4px;
  background: #fff;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 13px;
  border: 1px solid transparent;
}

.cc-onboarding-item:hover:not(.completed) {
  background: var(--primary-50);
  transform: translateX(4px);
}

.cc-onboarding-item-next {
  border-color: var(--primary-200, #bfdbfe);
  background: #fff;
  box-shadow: 0 0 0 1px var(--primary-100, #dbeafe);
}

.cc-onboarding-item-next:hover {
  background: var(--primary-50);
}

.cc-onboarding-item.completed {
  background: var(--green-50);
  opacity: 0.9;
}

.cc-onboarding-item.completed .cc-onboarding-label {
  text-decoration: line-through;
  color: var(--text-tertiary);
}

.cc-onboarding-check {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
}

.cc-onboarding-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-tertiary);
  background: var(--gray-200);
  border-radius: 50%;
}

.cc-check-svg {
  width: 18px;
  height: 18px;
  color: var(--green-600, #16a34a);
  animation: cc-check-pop 0.3s ease;
}

@keyframes cc-check-pop {
  0% { transform: scale(0.8); opacity: 0; }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}

.cc-onboarding-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary, #475569);
}

.cc-onboarding-item.completed .cc-onboarding-icon {
  color: var(--text-tertiary, #64748b);
}

.cc-onboarding-label-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cc-onboarding-label {
  font-weight: 500;
  color: var(--text-primary);
}

.cc-onboarding-hint {
  font-size: 11px;
  font-weight: 400;
  color: var(--text-tertiary);
}

.cc-onboarding-arrow {
  font-size: 14px;
  color: var(--primary);
  opacity: 0;
  transition: opacity 0.15s ease;
}

.cc-onboarding-item:hover .cc-onboarding-arrow {
  opacity: 1;
}

.cc-onboarding-complete {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 14px 16px;
  background: linear-gradient(135deg, var(--green-50), var(--green-100));
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--green-700);
}

.cc-onboarding-complete-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: var(--green-500);
  color: #fff;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 700;
}

.cc-onboarding-tip {
  margin: 0;
  font-size: 11px;
  color: var(--text-tertiary);
  line-height: 1.4;
  padding: 0 4px;
}

.cc-onboarding-dismiss {
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-tertiary);
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: center;
  transition: color 0.15s ease;
  font-family: inherit;
  width: 100%;
}

.cc-onboarding-dismiss:hover {
  color: var(--text-secondary);
}

.cc-onboarding-show-again {
  margin-top: 10px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--primary, #2563eb);
  background: transparent;
  border: 1px solid var(--primary, #2563eb);
  border-radius: 8px;
  cursor: pointer;
}
.cc-onboarding-show-again:hover {
  background: var(--primary-50, #eff6ff);
}

/* Responsive */
@media (max-width: 600px) {
  .onboarding-wizard-modal {
    max-width: 100%;
    border-radius: 16px 16px 0 0;
    position: fixed;
    bottom: 0;
    max-height: 90vh;
    overflow-y: auto;
  }
  
  .onboarding-wizard-content {
    padding: 24px 20px;
  }
  
  .onboarding-progress {
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .onboarding-progress-line {
    display: none;
  }
  
  .onboarding-progress-label {
    display: none;
  }
  
  .onboarding-welcome-features {
    grid-template-columns: 1fr;
  }
  
  .onboarding-field-row {
    grid-template-columns: 1fr;
  }
  
  .onboarding-tour-grid {
    grid-template-columns: 1fr;
  }
}

/* ===========================================
   📊 CUSTOM REPORT BUILDER
=========================================== */

/* New Custom Report Button */
.btn-new-custom-report {
  padding: 4px 8px;
  background: var(--primary-500);
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-new-custom-report:hover {
  background: var(--primary-600);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

/* Custom Report List Item */
.custom-report-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: white;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  margin-bottom: 8px;
}

.custom-report-item:hover {
  background: var(--primary-50);
  border-color: var(--primary-200);
  transform: translateX(2px);
}

.custom-report-item:hover .custom-report-actions {
  opacity: 1;
}

.custom-report-actions {
  margin-left: auto;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.report-action-btn {
  padding: 4px 6px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  color: var(--text-secondary);
}

.report-action-btn:hover {
  background: var(--primary-50);
  border-color: var(--primary-500);
  color: var(--primary-600);
}

.report-action-delete:hover {
  background: #fef2f2;
  border-color: #fca5a5;
  color: #dc2626;
}

.report-duplicate-btn {
  padding: 4px 6px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  color: var(--text-tertiary);
  margin-left: auto;
  opacity: 0;
}

.report-list-item:hover .report-duplicate-btn {
  opacity: 1;
}

.report-duplicate-btn:hover {
  background: var(--primary-50);
  border-color: var(--primary-500);
  color: var(--primary-600);
}

/* Custom Reports Empty State */
.custom-reports-empty {
  padding: 20px;
  text-align: center;
  color: var(--text-tertiary);
  font-size: 13px;
}

/* Report Builder Container */
.report-builder-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: white;
}

.report-builder-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(to bottom, #fafafa, white);
}

.report-builder-title-area {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex: 1;
}

.report-builder-icon {
  font-size: 32px;
  line-height: 1;
}

.report-builder-name-input {
  font-size: 20px;
  font-weight: 700;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 4px 0;
  width: 100%;
  max-width: 400px;
  transition: border-color 0.15s ease;
}

.report-builder-name-input:focus {
  outline: none;
  border-bottom-color: var(--primary-500);
}

.report-builder-desc-input {
  font-size: 13px;
  color: var(--text-secondary);
  border: none;
  border-bottom: 1px solid transparent;
  padding: 2px 0;
  width: 100%;
  max-width: 400px;
  transition: border-color 0.15s ease;
}

.report-builder-desc-input:focus {
  outline: none;
  border-bottom-color: var(--border);
}

.report-builder-header-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* Report Builder Body */
/* ✅ WIZARD LAYOUT */
.report-builder-body {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 32px 32px 32px;
  flex: 1;
  min-height: 0;
}

.wizard-step-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px 0;
}

/* Keep for backward compat but hide */
.report-builder-left {
  background: white;
  padding: 0;
}

.report-builder-right {
  display: none; /* Hidden in wizard mode */
}

/* ✅ WIZARD PROGRESS INDICATOR */
.wizard-progress {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px 32px;
  background: var(--gray-50);
  border-bottom: 1px solid var(--border);
}

.wizard-step-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.wizard-progress-dots {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
}

.progress-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--border);
  transition: all 0.3s ease;
  cursor: default;
}

.progress-dot.active {
  background: var(--primary);
  transform: scale(1.4);
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

.progress-dot.completed {
  background: var(--success);
}

/* ✅ WIZARD NAVIGATION */
.wizard-navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 32px;
  border-top: 1px solid var(--border);
  background: white;
  margin-top: auto;
}

.wizard-nav-spacer {
  flex: 1;
}

.wizard-navigation .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 120px;
  justify-content: center;
}

.wizard-navigation .btn.hidden {
  visibility: hidden;
}

/* ✅ WIZARD PREVIEW STEP */
.wizard-step-preview {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.wizard-preview-body {
  flex: 1;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px;
  background: white;
}

/* Report Builder Sections */
.report-builder-section {
  background: white;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
}

.report-section-header h3 {
  margin: 0 0 4px 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

.report-section-help {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 16px;
}

.report-section-body {
  margin-top: 16px;
}

.report-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}

.report-label-help {
  font-size: 11px;
  font-weight: 400;
  color: var(--text-tertiary);
  text-transform: none;
  letter-spacing: 0;
  margin-left: 6px;
}

/* Table Selector */
.table-selector {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.table-selector-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 18px;
  border: 2px solid var(--border);
  border-radius: 10px;
  background: white;
  cursor: pointer;
  transition: all 0.15s ease;
  flex: 1;
  min-width: 90px;
}

.table-selector-btn:hover {
  border-color: var(--primary-300);
  background: var(--primary-50);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
}

.table-selector-btn.active {
  border-color: var(--primary-500);
  background: var(--primary-50);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.table-icon {
  font-size: 24px;
  line-height: 1;
}

.table-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.table-icon-small {
  font-size: 14px;
  margin-right: 4px;
}

/* Linked Tables */
.linked-tables-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.linked-table-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.linked-table-checkbox:hover {
  border-color: var(--primary-300);
  background: var(--primary-50);
}

.linked-table-checkbox input[type="checkbox"] {
  cursor: pointer;
}

.checkbox-label {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
}

.linked-info {
  margin-top: 12px;
  padding: 10px 14px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  font-size: 12px;
  color: #1e40af;
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

/* Report Type Selector */
.report-type-selector {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.report-type-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 16px;
  border: 2px solid var(--border);
  border-radius: 12px;
  background: white;
  cursor: pointer;
  transition: all 0.15s ease;
}

.report-type-btn:hover {
  border-color: var(--primary-300);
  background: var(--primary-50);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
}

.report-type-btn.active {
  border-color: var(--primary-500);
  background: var(--primary-50);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.report-type-icon {
  font-size: 32px;
}

.report-type-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}

.report-type-desc {
  font-size: 11px;
  color: var(--text-tertiary);
  text-align: center;
}

/* Fields Layout */
.fields-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.available-fields-panel,
.selected-fields-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Field Groups */
.field-group {
  margin-bottom: 16px;
}

/* ✅ COMPACT FIELD STYLING (50% height reduction) */
.field-group-header {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
  padding: 4px 8px;
  background: var(--gray-100);
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.field-group-list {
  display: flex;
  flex-direction: column;
  gap: 2px; /* Was 4px */
}

/* Available Field */
.available-field {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px; /* Was 8px 10px */
  border: 1px solid var(--border-light);
  border-radius: 4px;
  background: white;
  cursor: grab;
  transition: all 0.15s ease;
  min-height: 28px; /* Explicit min height */
}

.available-field:hover {
  border-color: var(--primary-300);
  background: var(--primary-50);
  transform: translateX(4px);
}

.available-field.dragging {
  opacity: 0.5;
  cursor: grabbing;
}

.field-drag-handle {
  color: var(--text-tertiary);
  font-size: 12px; /* Was 14px */
  cursor: grab;
}

.field-label {
  flex: 1;
  font-size: 12px; /* Was 13px */
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.2;
}

.field-type-badge {
  font-size: 9px; /* Was 10px */
  padding: 2px 5px; /* Was 2px 6px */
  background: var(--gray-100);
  color: var(--text-tertiary);
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Selected Fields Dropzone */
.selected-fields-dropzone {
  min-height: 200px;
  padding: 12px;
  border: 2px dashed var(--border);
  border-radius: 10px;
  background: white;
  transition: all 0.15s ease;
}

.selected-fields-dropzone.drag-over {
  border-color: var(--primary-500);
  background: var(--primary-50);
}

.dropzone-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 180px;
  color: var(--text-tertiary);
  font-size: 13px;
}

/* Selected Field */
.selected-field {
  display: flex;
  align-items: center;
  gap: 8px; /* Was 10px */
  padding: 6px 8px; /* Was 10px 12px - 50% reduction */
  border: 1px solid var(--border-light);
  border-radius: 6px; /* Was 8px */
  background: white;
  margin-bottom: 4px; /* Was 8px */
  cursor: grab;
  transition: all 0.15s ease;
  min-height: 32px; /* Explicit min height */
}

.selected-field:hover {
  border-color: var(--primary-300);
  background: var(--primary-50);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.selected-field.dragging {
  opacity: 0.5;
  cursor: grabbing;
}

.selected-field-info {
  flex: 1;
  min-width: 0;
}

.selected-field-label {
  font-size: 13px; /* Was 14px */
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.selected-field-id {
  font-size: 10px; /* Was 11px */
  color: var(--text-tertiary);
  font-family: monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.selected-field-actions {
  display: flex;
  gap: 4px;
}

.btn-icon-small {
  padding: 4px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  color: var(--text-secondary);
}

.btn-icon-small:hover {
  background: var(--gray-100);
  border-color: var(--border);
  color: var(--text-primary);
}

/* Grouping Levels */
.grouping-levels {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.grouping-level {
  padding: 14px;
  border: 2px dashed var(--border);
  border-radius: 10px;
  background: white;
  transition: all 0.15s ease;
  min-height: 80px;
}

.grouping-level.drag-over {
  border-color: var(--primary-500);
  background: var(--primary-50);
}

.grouping-level.has-field {
  border-style: solid;
  border-color: var(--primary-300);
  background: var(--primary-50);
}

.grouping-level-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.grouping-level-number {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.grouping-level-field {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background: white;
  cursor: grab;
}

.grouping-level-field:hover {
  border-color: var(--primary-300);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.grouping-field-info {
  flex: 1;
}

.grouping-field-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.grouping-field-id {
  font-size: 10px;
  color: var(--text-tertiary);
  font-family: monospace;
}

.grouping-level-placeholder {
  text-align: center;
  padding: 20px;
  color: var(--text-tertiary);
  font-size: 12px;
}

/* Sort and Summary Rules */
.sort-rule,
.summary-rule {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

/* Report Preview Panel */
.report-preview-panel {
  background: white;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.report-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(to bottom, #fafafa, white);
}

.report-preview-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}

.report-preview-body {
  flex: 1;
  overflow: auto;
  padding: 20px;
}

/* Preview States */
.preview-empty,
.preview-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 300px;
  color: var(--text-tertiary);
}

.preview-error {
  color: #dc2626;
}

.preview-error-msg {
  font-size: 12px;
  font-family: monospace;
  background: #fef2f2;
  padding: 8px 12px;
  border-radius: 6px;
  max-width: 400px;
  text-align: center;
}

.preview-note {
  margin-top: 12px;
  padding: 10px 14px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 6px;
  font-size: 12px;
  color: #1e40af;
  text-align: center;
}

/* Report Preview Content */
.report-preview-content {
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.report-preview-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.report-preview-subtitle {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 20px;
}

/* Report Table */
.report-table-wrap {
  overflow-x: auto;
  border-radius: 8px;
  border: 1px solid var(--border-light);
}

.report-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  background: white;
}

.report-table thead {
  background: linear-gradient(to bottom, #fafafa, #f5f5f5);
  position: sticky;
  top: 0;
  z-index: 10;
}

.report-table th {
  padding: 12px 16px;
  text-align: left;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.5px;
  border-bottom: 2px solid var(--border);
}

.report-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-light);
  color: var(--text-primary);
}

.report-table tbody tr:hover {
  background: var(--primary-50);
}

.report-table tfoot {
  background: #fafafa;
  border-top: 2px solid var(--border);
}

.report-table tfoot td {
  padding: 14px 16px;
  font-weight: 700;
  font-size: 13px;
}

.report-summary-row {
  font-weight: 700;
}

/* Grouped Report */
.grouped-report-wrap {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.custom-group-section {
  border: 1px solid var(--border-light);
  border-radius: 10px;
  overflow: hidden;
  background: white;
}

.custom-group-section.level-1 {
  border-color: var(--primary-300);
  border-width: 2px;
}

.custom-group-section.level-2 {
  margin-left: 20px;
  margin-top: 12px;
}

.custom-group-section.level-3 {
  margin-left: 40px;
  margin-top: 12px;
}

.custom-group-header {
  padding: 14px 18px;
  background: linear-gradient(to right, var(--primary-50), white);
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.custom-group-label {
  font-size: 12px;
  text-transform: uppercase;
  color: var(--text-secondary);
  letter-spacing: 0.5px;
}

.custom-group-value {
  font-size: 15px;
  color: var(--text-primary);
  font-weight: 700;
}

.custom-group-count {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-left: 4px;
}

.custom-group-content {
  padding: 16px;
}

.report-table-grouped {
  margin-top: 0;
}

/* Graph and Kanban Placeholders */
.report-graph-placeholder,
.report-kanban-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 300px;
  padding: 40px;
  color: var(--text-tertiary);
  background: var(--gray-50);
  border-radius: 10px;
  margin-top: 20px;
}

/* Calculated Field Help */
.calc-field-help {
  margin-top: 16px;
  padding: 14px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  font-size: 12px;
  color: #1e40af;
  line-height: 1.6;
}

/* Responsive */
@media (max-width: 1200px) {
  .report-builder-body {
    grid-template-columns: 400px 1fr;
  }
  
  .fields-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .report-builder-body {
    grid-template-columns: 1fr;
  }
  
  .report-builder-left {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  
  .report-type-selector {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 600px) {
  .table-selector {
    flex-direction: column;
  }
  
  .table-selector-btn {
    flex: none;
    width: 100%;
  }
  
  .report-type-selector {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .report-builder-header {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }
  
  .report-builder-header-actions {
    justify-content: flex-end;
  }
}

/* Report Advanced Tabs */
.report-advanced-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
  background: var(--gray-100);
  padding: 4px;
  border-radius: 8px;
}

.report-tab-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 14px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.report-tab-btn:hover {
  background: white;
  color: var(--text-primary);
}

.report-tab-btn.active {
  background: white;
  color: var(--primary-600);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.report-tab-content {
  animation: fadeIn 0.2s ease;
}

.report-tab-inner {
  /* Container for tab content */
}

.tab-disabled-msg {
  padding: 20px;
  text-align: center;
  color: var(--text-tertiary);
  font-size: 13px;
  background: var(--gray-50);
  border-radius: 8px;
}

/* Field Picker Modal List */
.field-picker-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.field-picker-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: white;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
}

.field-picker-item:hover {
  border-color: var(--primary-500);
  background: var(--primary-50);
  transform: translateX(4px);
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.15);
}

.grouping-level-actions {
  display: flex;
  gap: 4px;
  align-items: center;
}

/* Auto-scroll edge indicator */
.report-builder-left.auto-scrolling-up::before,
.report-builder-left.auto-scrolling-down::after {
  content: '';
  position: sticky;
  display: block;
  height: 3px;
  background: linear-gradient(to right, var(--primary-500), var(--primary-300));
  animation: pulse 0.8s ease-in-out infinite;
}

.report-builder-left.auto-scrolling-up::before {
  top: 0;
}

.report-builder-left.auto-scrolling-down::after {
  bottom: 0;
}

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

/* ═══════════════════════════════════════════════════════════════════
   SVG Icon Styling for Modern Icons
   ═══════════════════════════════════════════════════════════════════ */

/* Ensure SVG icons in menuBtn display properly */
.menuBtn-icon svg,
.gmail-tab-icon svg,
.nav-more-icon svg,
.emptyState-btn-icon svg {
  display: block;
}

/* Gmail tab icons with SVG */
.gmail-tab-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Empty state button icons */
.emptyState-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Modal icon with SVG */
.modal-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.modal-icon svg {
  display: block;
}

/* Settings Stage Header (column labels) */
.settings-stage-header {
  font-size: 11px !important;
}

.settings-stage-header div {
  padding: 0 4px;
}

/* Owner Filter Dropdown in main bar */
#ownerFilterDropdown {
  position: relative;
}

#ownerFilterDropdown .actions-dropdown-btn {
  min-width: 100px;
  cursor: pointer;
}

#ownerFilterDropdown .actions-dropdown-btn:hover {
  background: var(--gray-100);
  border-color: var(--border-medium);
}

#ownerFilterMenu.actions-menu {
  min-width: 180px;
}

#ownerFilterMenu .actions-menu-item {
  cursor: pointer;
}

/* ===========================================
   💼 DEAL CONTACT INFO BAR
   Shows phone/email when a contact is selected
=========================================== */
.deal-contact-info-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  margin: -4px 0 12px 0;
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border: 1px solid #bae6fd;
  border-radius: 10px;
  font-size: 13px;
}

.deal-contact-info-items {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.deal-contact-info-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: white;
  border-radius: 20px;
  color: var(--text-primary);
  text-decoration: none;
  font-weight: 500;
  border: 1px solid #e0f2fe;
  transition: all 0.15s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.deal-contact-info-item:hover {
  background: var(--primary-50);
  border-color: var(--primary-200);
  color: var(--primary-700);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(59, 130, 246, 0.15);
}

.deal-contact-info-item svg {
  color: var(--primary-500);
  flex-shrink: 0;
}

.deal-contact-info-value {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Phone link - green accent */
.deal-contact-info-item[href^="tel:"] svg {
  color: #059669;
}

.deal-contact-info-item[href^="tel:"]:hover {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #047857;
}

/* Email link - blue accent */
.deal-contact-info-item[href^="mailto:"] svg {
  color: var(--primary-500);
}

.deal-contact-info-item[href^="mailto:"]:hover {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: var(--primary-700);
}

/* ===========================================
   💼 DEAL MODAL - PERFECTED UI
=========================================== */

/* Deal modal structure */
.deal-modal {
  display: flex;
  flex-direction: column;
}

.deal-modal .modalBody {
  flex: 1;
  overflow-y: auto;
}

/* Field groupings */
.deal-field-group {
  /* Implicit grouping, no visible border */
}

/* Collapsible sections */
.deal-collapsible {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
}

.deal-collapsible-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  user-select: none;
}

.deal-collapsible-header:hover {
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
}

.deal-collapsible-header svg {
  transition: transform 0.2s ease;
  color: #64748b;
}

.deal-collapsible[open] .deal-collapsible-header svg {
  transform: rotate(180deg);
}

.deal-collapsible-content {
  padding: 14px;
  background: white;
}

/* Contact info bar - compact chips */
.deal-contact-info-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  margin: 4px 0 12px 0;
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border: 1px solid #bae6fd;
  border-radius: 8px;
  font-size: 12px;
  flex-wrap: wrap;
}

.deal-contact-info-items {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}

.deal-contact-info-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: white;
  border-radius: 16px;
  color: var(--text-primary);
  text-decoration: none;
  font-weight: 500;
  font-size: 11px;
  border: 1px solid #e0f2fe;
  transition: all 0.15s ease;
  white-space: nowrap;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.deal-contact-info-item:hover {
  background: var(--primary-50);
  border-color: var(--primary-200);
  transform: translateY(-1px);
}

.deal-contact-overflow {
  padding: 4px 8px;
  background: #dbeafe;
  border: 1px solid #93c5fd;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  color: var(--primary-700);
  cursor: pointer;
}

.deal-contact-overflow:hover {
  background: #bfdbfe;
}

/* Delete confirmation popover */
.deal-delete-confirm {
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: 8px;
  padding: 14px 16px;
  background: white;
  border: 1px solid #fecaca;
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  z-index: 100;
  min-width: 220px;
}

.deal-delete-confirm::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 20px;
  border: 8px solid transparent;
  border-top-color: white;
}

/* Probability override badge */
#probOverrideBadge {
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* Pipeline grid responsive */
.deal-pipeline-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}

@media (max-width: 600px) {
  .deal-pipeline-grid {
    grid-template-columns: 1fr 1fr;
  }
  
  .deal-pipeline-grid > label:nth-child(3) {
    grid-column: span 2;
  }
  
  .deal-modal-foot {
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .deal-modal-foot > div {
    flex: 1 1 auto;
  }
  
  .deal-modal-foot .btn {
    flex: 1;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .deal-pipeline-grid {
    grid-template-columns: 1fr;
  }
  
  .deal-pipeline-grid > label:nth-child(3) {
    grid-column: span 1;
  }
}

/* Sticky footer */
.deal-modal-foot {
  padding: 14px 20px;
  background: white;
  border-top: 1px solid #e5e7eb;
}

/* Smaller stage steps */
.deal-modal .stageStep {
  flex: 1;
  min-width: 0;
}

.deal-modal .stageStepCircle {
  width: 24px !important;
  height: 24px !important;
  font-size: 10px !important;
}

.deal-modal .stageStepLabel {
  font-size: 9px !important;
  max-width: 55px !important;
}

/* Modal summary line */
.deal-modal-summary {
  font-size: 12px;
  color: #64748b;
  font-weight: 500;
  margin-top: 2px;
  max-width: 400px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ===========================================
   👤 CONTACT DETAIL PAGE - REFINED UI
=========================================== */

/* Contact Summary Pills Row */
.contact-summary-pills {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.contact-summary-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  background: var(--gray-100);
  border: 1px solid var(--border-light);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.contact-summary-pill:hover {
  background: var(--gray-200);
  border-color: var(--gray-300);
}

.contact-summary-pill.company-pill {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border-color: #f59e0b;
  color: #92400e;
}

.contact-summary-pill.deals-pill {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  border-color: #10b981;
  color: #065f46;
}

.contact-summary-pill.tasks-pill {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border-color: var(--primary-500);
  color: #1e40af;
}

.contact-summary-pill.tasks-pill.overdue {
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
  border-color: #ef4444;
  color: #991b1b;
}

/* Task source chips */
.task-source-pill {
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  border: 1px solid var(--border-light);
  background: #f8fafc;
  color: #475569;
}
.task-source-pill--contact {
  background: #f1f5f9;
  color: #334155;
}
.task-source-pill--deal {
  background: #ecfdf5;
  border-color: #10b981;
  color: #065f46;
}
.task-source-pill--project {
  background: #eff6ff;
  border-color: var(--primary-500);
  color: #1e40af;
}
.task-source-pill--link {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #0f172a;
}
.task-source-pill--link:hover {
  border-color: var(--primary-500);
  color: var(--primary-700);
}

/* Quick Action Buttons in Header */
.contact-quick-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding-left: 12px;
  border-left: 1px solid var(--border-light);
}

.contact-quick-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 10px;
  background: white;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.contact-quick-action-btn:hover {
  background: var(--gray-50);
  border-color: var(--primary-300);
  color: var(--primary-700);
}

.contact-quick-action-btn.call-btn:hover {
  background: #ecfdf5;
  border-color: #10b981;
  color: #059669;
}

.contact-quick-action-btn.email-btn:hover {
  background: #eff6ff;
  border-color: var(--primary-500);
  color: var(--primary-600);
}

/* Contact Detail Field Groups */
.contact-field-group {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px dashed var(--border-light);
}

.contact-field-group:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.contact-field-group-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Actionable Contact Chips (Phone/Email) */
.contact-method-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.contact-method-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: white;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  font-size: 13px;
  transition: all 0.15s ease;
}

.contact-method-chip:hover {
  border-color: var(--primary-300);
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
}

.contact-method-chip .chip-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  padding: 2px 6px;
  background: var(--gray-100);
  border-radius: 4px;
}

.contact-method-chip .chip-value {
  font-weight: 500;
  color: var(--text-primary);
}

.contact-method-chip .chip-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 4px;
  padding-left: 8px;
  border-left: 1px solid var(--border-light);
}

.chip-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  transition: all 0.15s ease;
}

.chip-action-btn:hover {
  background: var(--gray-100);
  color: var(--primary-600);
}

.chip-action-btn.call-action:hover {
  background: #ecfdf5;
  color: #059669;
}

.chip-action-btn.copy-action:hover {
  background: #fef3c7;
  color: #b45309;
}

.chip-action-btn.email-action:hover {
  background: #eff6ff;
  color: var(--primary-600);
}

/* Related Section Card Headers - Consistent Style */
.related-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-light);
}

.related-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.related-section-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: var(--gray-200);
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
}

.related-section-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.related-section-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  min-height: 36px;
  background: #dbeafe;
  border: 1px solid #93c5fd;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #1e40af;
  cursor: pointer;
  transition: all 0.15s ease;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.related-section-btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.related-section-btn:hover {
  background: #bfdbfe;
  border-color: #60a5fa;
}

/* Task Type Chips */
.task-type-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 5px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  line-height: 1;
}

.task-type-chip--deal {
  background: #eff6ff;
  color: #1e40af;
  border: 1px solid #93c5fd;
}

.task-type-chip--project {
  background: #fdf4ff;
  color: #a21caf;
  border: 1px solid #e9d5ff;
}

/* Task Link Chip (clickable deal/project name) - removed, styles inline */

/* Field Row Alignment Classes (Editor Mode) */
.field-row--align-left {
  margin-left: 0 !important;
  margin-right: auto !important;
}

.field-row--align-center {
  margin-left: auto !important;
  margin-right: auto !important;
}

.field-row--align-right {
  margin-left: auto !important;
  margin-right: 0 !important;
}

/* Full-width fields: align content internally */
.field-row--full.field-row--align-left .field-row__label,
.field-row--full.field-row--align-left .field-row__field {
  text-align: left;
}

.field-row--full.field-row--align-center {
  justify-content: center;
}

.field-row--full.field-row--align-center .field-row__label,
.field-row--full.field-row--align-center .field-row__field {
  text-align: center;
}

.field-row--full.field-row--align-right {
  justify-content: flex-end;
}

.field-row--full.field-row--align-right .field-row__label,
.field-row--full.field-row--align-right .field-row__field {
  text-align: right;
}

/* Fill Mode Alignment */
.field-row-input--align-left {
  margin-left: 0 !important;
  margin-right: auto !important;
}

.field-row-input--align-center {
  margin-left: auto !important;
  margin-right: auto !important;
}

.field-row-input--align-right {
  margin-left: auto !important;
  margin-right: 0 !important;
}

/* Full-width fill mode inputs: align content */
.field-row-input--full.field-row-input--align-center .field-row-input__label,
.field-row-input--full.field-row-input--align-center .field-row-input__field {
  text-align: center;
}

.field-row-input--full.field-row-input--align-right .field-row-input__label,
.field-row-input--full.field-row-input--align-right .field-row-input__field {
  text-align: right;
}

/* Row group alignment */
.field-row-group--align-left {
  justify-content: flex-start;
}

.field-row-group--align-center {
  justify-content: center;
}

.field-row-group--align-right {
  justify-content: flex-end;
}

/* Consistent Empty States */
.related-section-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  text-align: center;
  background: linear-gradient(135deg, var(--gray-50) 0%, white 100%);
  border: 1px dashed var(--border-light);
  border-radius: 10px;
}

.related-section-empty-icon {
  font-size: 28px;
  margin-bottom: 8px;
  opacity: 0.5;
}

.related-section-empty-text {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.related-section-empty-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background: var(--primary-600);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.related-section-empty-btn:hover {
  background: var(--primary-700);
  transform: translateY(-1px);
}

/* Primary Badge for Relationships */
.primary-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border: 1px solid #f59e0b;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 700;
  color: #92400e;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Compact Related Item Row */
.related-item-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: white;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  margin-bottom: 8px;
  transition: all 0.15s ease;
  cursor: pointer;
}

.related-item-row:last-child {
  margin-bottom: 0;
}

.related-item-row:hover {
  border-color: var(--primary-300);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.related-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--gray-100);
  border-radius: 8px;
  flex-shrink: 0;
}

.related-item-info {
  flex: 1;
  min-width: 0;
}

.related-item-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.related-item-meta {
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.related-item-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* View All Link */
.view-all-link {
  display: block;
  text-align: center;
  padding: 8px;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--primary-600);
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.15s ease;
}

.view-all-link:hover {
  background: var(--primary-50);
  color: var(--primary-700);
}

/* Contact Detail Section Refinements */
.detailSection.contact-details-card {
  background: white;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}

.detailSection.contact-details-card h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-light);
}

/* Spacing Between Related Cards */
.detail-sidebar-col .detailSection {
  margin-bottom: 20px;
}

.detail-sidebar-col .detailSection:last-child {
  margin-bottom: 0;
}

/* Responsive: Stack columns on narrow screens */
@media (max-width: 900px) {
  .contact-quick-actions {
    display: none;
  }
  
  .contact-summary-pills {
    margin-top: 12px;
  }
}

@media (max-width: 600px) {
  .contact-method-chip .chip-actions {
    display: none;
  }
  
  .related-section-header {
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .related-section-actions {
    width: 100%;
    justify-content: flex-end;
  }
}

/* Override .btn gap for quick-add buttons */
.detail-quick-add-btn.btn,
.app-shell.detail-full .detail-quick-add-btn.btn {
  gap: 0 !important;
}

/* Task highlight flicker when jumping from summary pill */
.task-flicker {
  animation: taskFlicker 1.2s ease 0s 2;
  border-color: var(--primary-500) !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25) !important;
}

@keyframes taskFlicker {
  0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.0); }
  50% { box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.35); }
  100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.0); }
}

/* Filter button active state */
#filterBtn.filter-btn-active {
  background: #e0f2fe !important;
  border-color: #38bdf8 !important;
  color: #0c4a6e !important;
}

#filterBtn.filter-btn-active:hover {
  background: #bae6fd !important;
  border-color: #0ea5e9 !important;
}

/* ===========================================
   📄 Static Text View (Completed Documents)
   Professional display for finalized documents
=========================================== */

.field-static-text {
  display: inline;
  font-size: 14px;
  color: #111827;
  line-height: 1.6;
}

.field-static-signature {
  display: inline-block;
  padding: 8px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #ffffff;
  margin: 0 4px;
  vertical-align: middle;
}

.field-static-signature img {
  max-width: 200px;
  max-height: 80px;
  display: block;
}

/* Field Row Static (completed document view) */
.field-row-static {
  display: inline-block;
  vertical-align: top;
  margin: 0 8px 8px 0;
  padding: 8px 12px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.4;
}

.field-row-static--full {
  width: 100%;
}

.field-row-static--half {
  width: calc(50% - 4px);
}

.field-row-static--third {
  width: calc(33.333% - 6px);
}

.field-row-static--quarter {
  width: calc(25% - 6px);
}

/* Label placement in static view */
.field-row-static--left > div {
  display: flex;
  align-items: center;
  gap: 12px;
}

.field-row-static--left > div > div:first-child {
  width: 130px;
  text-align: right;
  flex-shrink: 0;
  font-weight: 600;
  color: #6b7280;
}

.field-row-static--left > div > div:last-child {
  flex: 1;
  font-weight: 600;
  color: #111827;
}

.field-row-static--above > div {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field-row-static--above > div > div:first-child {
  width: 100%;
  font-weight: 600;
  color: #6b7280;
  margin-bottom: 4px;
}

.field-row-static--above > div > div:last-child {
  width: 100%;
  font-weight: 600;
  color: #111827;
}

/* Line Items Static (completed document view) */
.line-items-static {
  margin: 16px 0;
  padding: 16px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}

.line-items-static table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  overflow: hidden;
}

.line-items-static thead {
  background: #f9fafb;
}

.line-items-static th {
  padding: 10px 12px;
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  color: #374151;
  border-bottom: 2px solid #e5e7eb;
}

.line-items-static td {
  padding: 10px 12px;
  border-bottom: 1px solid #f3f4f6;
  color: #111827;
  font-weight: 500;
}

.line-items-static tbody tr:last-child td {
  border-bottom: none;
}

/* Print optimization for static views */
@media print {
  .field-row-static,
  .field-row-input,
  .field-static-text {
    break-inside: avoid;
  }
  
  .line-items-static {
    break-inside: avoid;
  }
  
  .field-row-static,
  .field-row-static--half,
  .field-row-static--third,
  .field-row-static--quarter {
    width: 100% !important;
    margin-right: 0 !important;
  }
}

  opacity: 0;
}

.report-list-item:hover .report-duplicate-btn {
  opacity: 1;
}

.report-duplicate-btn:hover {
  background: var(--primary-50);
  border-color: var(--primary-500);
  color: var(--primary-600);
}

/* Custom Reports Empty State */
.custom-reports-empty {
  padding: 20px;
  text-align: center;
  color: var(--text-tertiary);
  font-size: 13px;
}

/* Report Builder Container */
.report-builder-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: white;
}

.report-builder-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(to bottom, #fafafa, white);
}

.report-builder-title-area {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex: 1;
}

.report-builder-icon {
  font-size: 32px;
  line-height: 1;
}

.report-builder-name-input {
  font-size: 20px;
  font-weight: 700;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 4px 0;
  width: 100%;
  max-width: 400px;
  transition: border-color 0.15s ease;
}

.report-builder-name-input:focus {
  outline: none;
  border-bottom-color: var(--primary-500);
}

.report-builder-desc-input {
  font-size: 13px;
  color: var(--text-secondary);
  border: none;
  border-bottom: 1px solid transparent;
  padding: 2px 0;
  width: 100%;
  max-width: 400px;
  transition: border-color 0.15s ease;
}

.report-builder-desc-input:focus {
  outline: none;
  border-bottom-color: var(--border);
}

.report-builder-header-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* Report Builder Body */
/* ✅ WIZARD LAYOUT */
.report-builder-body {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 32px 32px 32px;
  flex: 1;
  min-height: 0;
}

.wizard-step-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px 0;
}

/* Keep for backward compat but hide */
.report-builder-left {
  background: white;
  padding: 0;
}

.report-builder-right {
  display: none; /* Hidden in wizard mode */
}

/* ✅ WIZARD PROGRESS INDICATOR */
.wizard-progress {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px 32px;
  background: var(--gray-50);
  border-bottom: 1px solid var(--border);
}

.wizard-step-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.wizard-progress-dots {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
}

.progress-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--border);
  transition: all 0.3s ease;
  cursor: default;
}

.progress-dot.active {
  background: var(--primary);
  transform: scale(1.4);
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

.progress-dot.completed {
  background: var(--success);
}

/* ✅ WIZARD NAVIGATION */
.wizard-navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 32px;
  border-top: 1px solid var(--border);
  background: white;
  margin-top: auto;
}

.wizard-nav-spacer {
  flex: 1;
}

.wizard-navigation .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 120px;
  justify-content: center;
}

.wizard-navigation .btn.hidden {
  visibility: hidden;
}

/* ✅ WIZARD PREVIEW STEP */
.wizard-step-preview {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.wizard-preview-body {
  flex: 1;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px;
  background: white;
}

/* Report Builder Sections */
.report-builder-section {
  background: white;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
}

.report-section-header h3 {
  margin: 0 0 4px 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

.report-section-help {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 16px;
}

.report-section-body {
  margin-top: 16px;
}

.report-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}

.report-label-help {
  font-size: 11px;
  font-weight: 400;
  color: var(--text-tertiary);
  text-transform: none;
  letter-spacing: 0;
  margin-left: 6px;
}

/* Table Selector */
.table-selector {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.table-selector-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 18px;
  border: 2px solid var(--border);
  border-radius: 10px;
  background: white;
  cursor: pointer;
  transition: all 0.15s ease;
  flex: 1;
  min-width: 90px;
}

.table-selector-btn:hover {
  border-color: var(--primary-300);
  background: var(--primary-50);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
}

.table-selector-btn.active {
  border-color: var(--primary-500);
  background: var(--primary-50);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.table-icon {
  font-size: 24px;
  line-height: 1;
}

.table-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.table-icon-small {
  font-size: 14px;
  margin-right: 4px;
}

/* Linked Tables */
.linked-tables-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.linked-table-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.linked-table-checkbox:hover {
  border-color: var(--primary-300);
  background: var(--primary-50);
}

.linked-table-checkbox input[type="checkbox"] {
  cursor: pointer;
}

.checkbox-label {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
}

.linked-info {
  margin-top: 12px;
  padding: 10px 14px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  font-size: 12px;
  color: #1e40af;
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

/* Report Type Selector */
.report-type-selector {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.report-type-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 16px;
  border: 2px solid var(--border);
  border-radius: 12px;
  background: white;
  cursor: pointer;
  transition: all 0.15s ease;
}

.report-type-btn:hover {
  border-color: var(--primary-300);
  background: var(--primary-50);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
}

.report-type-btn.active {
  border-color: var(--primary-500);
  background: var(--primary-50);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.report-type-icon {
  font-size: 32px;
}

.report-type-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}

.report-type-desc {
  font-size: 11px;
  color: var(--text-tertiary);
  text-align: center;
}

/* Fields Layout */
.fields-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.available-fields-panel,
.selected-fields-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Field Groups */
.field-group {
  margin-bottom: 16px;
}

/* ✅ COMPACT FIELD STYLING (50% height reduction) */
.field-group-header {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
  padding: 4px 8px;
  background: var(--gray-100);
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.field-group-list {
  display: flex;
  flex-direction: column;
  gap: 2px; /* Was 4px */
}

/* Available Field */
.available-field {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px; /* Was 8px 10px */
  border: 1px solid var(--border-light);
  border-radius: 4px;
  background: white;
  cursor: grab;
  transition: all 0.15s ease;
  min-height: 28px; /* Explicit min height */
}

.available-field:hover {
  border-color: var(--primary-300);
  background: var(--primary-50);
  transform: translateX(4px);
}

.available-field.dragging {
  opacity: 0.5;
  cursor: grabbing;
}

.field-drag-handle {
  color: var(--text-tertiary);
  font-size: 12px; /* Was 14px */
  cursor: grab;
}

.field-label {
  flex: 1;
  font-size: 12px; /* Was 13px */
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.2;
}

.field-type-badge {
  font-size: 9px; /* Was 10px */
  padding: 2px 5px; /* Was 2px 6px */
  background: var(--gray-100);
  color: var(--text-tertiary);
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Selected Fields Dropzone */
.selected-fields-dropzone {
  min-height: 200px;
  padding: 12px;
  border: 2px dashed var(--border);
  border-radius: 10px;
  background: white;
  transition: all 0.15s ease;
}

.selected-fields-dropzone.drag-over {
  border-color: var(--primary-500);
  background: var(--primary-50);
}

.dropzone-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 180px;
  color: var(--text-tertiary);
  font-size: 13px;
}

/* Selected Field */
.selected-field {
  display: flex;
  align-items: center;
  gap: 8px; /* Was 10px */
  padding: 6px 8px; /* Was 10px 12px - 50% reduction */
  border: 1px solid var(--border-light);
  border-radius: 6px; /* Was 8px */
  background: white;
  margin-bottom: 4px; /* Was 8px */
  cursor: grab;
  transition: all 0.15s ease;
  min-height: 32px; /* Explicit min height */
}

.selected-field:hover {
  border-color: var(--primary-300);
  background: var(--primary-50);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.selected-field.dragging {
  opacity: 0.5;
  cursor: grabbing;
}

.selected-field-info {
  flex: 1;
  min-width: 0;
}

.selected-field-label {
  font-size: 13px; /* Was 14px */
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.selected-field-id {
  font-size: 10px; /* Was 11px */
  color: var(--text-tertiary);
  font-family: monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.selected-field-actions {
  display: flex;
  gap: 4px;
}

.btn-icon-small {
  padding: 4px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  color: var(--text-secondary);
}

.btn-icon-small:hover {
  background: var(--gray-100);
  border-color: var(--border);
  color: var(--text-primary);
}

/* Grouping Levels */
.grouping-levels {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.grouping-level {
  padding: 14px;
  border: 2px dashed var(--border);
  border-radius: 10px;
  background: white;
  transition: all 0.15s ease;
  min-height: 80px;
}

.grouping-level.drag-over {
  border-color: var(--primary-500);
  background: var(--primary-50);
}

.grouping-level.has-field {
  border-style: solid;
  border-color: var(--primary-300);
  background: var(--primary-50);
}

.grouping-level-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.grouping-level-number {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.grouping-level-field {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background: white;
  cursor: grab;
}

.grouping-level-field:hover {
  border-color: var(--primary-300);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.grouping-field-info {
  flex: 1;
}

.grouping-field-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.grouping-field-id {
  font-size: 10px;
  color: var(--text-tertiary);
  font-family: monospace;
}

.grouping-level-placeholder {
  text-align: center;
  padding: 20px;
  color: var(--text-tertiary);
  font-size: 12px;
}

/* Sort and Summary Rules */
.sort-rule,
.summary-rule {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

/* Report Preview Panel */
.report-preview-panel {
  background: white;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.report-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(to bottom, #fafafa, white);
}

.report-preview-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}

.report-preview-body {
  flex: 1;
  overflow: auto;
  padding: 20px;
}

/* Preview States */
.preview-empty,
.preview-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 300px;
  color: var(--text-tertiary);
}

.preview-error {
  color: #dc2626;
}

.preview-error-msg {
  font-size: 12px;
  font-family: monospace;
  background: #fef2f2;
  padding: 8px 12px;
  border-radius: 6px;
  max-width: 400px;
  text-align: center;
}

.preview-note {
  margin-top: 12px;
  padding: 10px 14px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 6px;
  font-size: 12px;
  color: #1e40af;
  text-align: center;
}

/* Report Preview Content */
.report-preview-content {
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.report-preview-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.report-preview-subtitle {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 20px;
}

/* Report Table */
.report-table-wrap {
  overflow-x: auto;
  border-radius: 8px;
  border: 1px solid var(--border-light);
}

.report-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  background: white;
}

.report-table thead {
  background: linear-gradient(to bottom, #fafafa, #f5f5f5);
  position: sticky;
  top: 0;
  z-index: 10;
}

.report-table th {
  padding: 12px 16px;
  text-align: left;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.5px;
  border-bottom: 2px solid var(--border);
}

.report-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-light);
  color: var(--text-primary);
}

.report-table tbody tr:hover {
  background: var(--primary-50);
}

.report-table tfoot {
  background: #fafafa;
  border-top: 2px solid var(--border);
}

.report-table tfoot td {
  padding: 14px 16px;
  font-weight: 700;
  font-size: 13px;
}

.report-summary-row {
  font-weight: 700;
}

/* Grouped Report */
.grouped-report-wrap {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.custom-group-section {
  border: 1px solid var(--border-light);
  border-radius: 10px;
  overflow: hidden;
  background: white;
}

.custom-group-section.level-1 {
  border-color: var(--primary-300);
  border-width: 2px;
}

.custom-group-section.level-2 {
  margin-left: 20px;
  margin-top: 12px;
}

.custom-group-section.level-3 {
  margin-left: 40px;
  margin-top: 12px;
}

.custom-group-header {
  padding: 14px 18px;
  background: linear-gradient(to right, var(--primary-50), white);
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.custom-group-label {
  font-size: 12px;
  text-transform: uppercase;
  color: var(--text-secondary);
  letter-spacing: 0.5px;
}

.custom-group-value {
  font-size: 15px;
  color: var(--text-primary);
  font-weight: 700;
}

.custom-group-count {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-left: 4px;
}

.custom-group-content {
  padding: 16px;
}

.report-table-grouped {
  margin-top: 0;
}

/* Graph and Kanban Placeholders */
.report-graph-placeholder,
.report-kanban-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 300px;
  padding: 40px;
  color: var(--text-tertiary);
  background: var(--gray-50);
  border-radius: 10px;
  margin-top: 20px;
}

/* Calculated Field Help */
.calc-field-help {
  margin-top: 16px;
  padding: 14px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  font-size: 12px;
  color: #1e40af;
  line-height: 1.6;
}

/* Responsive */
@media (max-width: 1200px) {
  .report-builder-body {
    grid-template-columns: 400px 1fr;
  }
  
  .fields-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .report-builder-body {
    grid-template-columns: 1fr;
  }
  
  .report-builder-left {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  
  .report-type-selector {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 600px) {
  .table-selector {
    flex-direction: column;
  }
  
  .table-selector-btn {
    flex: none;
    width: 100%;
  }
  
  .report-type-selector {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .report-builder-header {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }
  
  .report-builder-header-actions {
    justify-content: flex-end;
  }
}

/* Report Advanced Tabs */
.report-advanced-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
  background: var(--gray-100);
  padding: 4px;
  border-radius: 8px;
}

.report-tab-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 14px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.report-tab-btn:hover {
  background: white;
  color: var(--text-primary);
}

.report-tab-btn.active {
  background: white;
  color: var(--primary-600);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.report-tab-content {
  animation: fadeIn 0.2s ease;
}

.report-tab-inner {
  /* Container for tab content */
}

.tab-disabled-msg {
  padding: 20px;
  text-align: center;
  color: var(--text-tertiary);
  font-size: 13px;
  background: var(--gray-50);
  border-radius: 8px;
}

/* Field Picker Modal List */
.field-picker-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.field-picker-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: white;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
}

.field-picker-item:hover {
  border-color: var(--primary-500);
  background: var(--primary-50);
  transform: translateX(4px);
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.15);
}

.grouping-level-actions {
  display: flex;
  gap: 4px;
  align-items: center;
}

/* Auto-scroll edge indicator */
.report-builder-left.auto-scrolling-up::before,
.report-builder-left.auto-scrolling-down::after {
  content: '';
  position: sticky;
  display: block;
  height: 3px;
  background: linear-gradient(to right, var(--primary-500), var(--primary-300));
  animation: pulse 0.8s ease-in-out infinite;
}

.report-builder-left.auto-scrolling-up::before {
  top: 0;
}

.report-builder-left.auto-scrolling-down::after {
  bottom: 0;
}

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

/* ═══════════════════════════════════════════════════════════════════
   SVG Icon Styling for Modern Icons
   ═══════════════════════════════════════════════════════════════════ */

/* Ensure SVG icons in menuBtn display properly */
.menuBtn-icon svg,
.gmail-tab-icon svg,
.nav-more-icon svg,
.emptyState-btn-icon svg {
  display: block;
}

/* Gmail tab icons with SVG */
.gmail-tab-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Empty state button icons */
.emptyState-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Modal icon with SVG */
.modal-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.modal-icon svg {
  display: block;
}

/* Settings Stage Header (column labels) */
.settings-stage-header {
  font-size: 11px !important;
}

.settings-stage-header div {
  padding: 0 4px;
}

/* Owner Filter Dropdown in main bar */
#ownerFilterDropdown {
  position: relative;
}

#ownerFilterDropdown .actions-dropdown-btn {
  min-width: 100px;
  cursor: pointer;
}

#ownerFilterDropdown .actions-dropdown-btn:hover {
  background: var(--gray-100);
  border-color: var(--border-medium);
}

#ownerFilterMenu.actions-menu {
  min-width: 180px;
}

#ownerFilterMenu .actions-menu-item {
  cursor: pointer;
}

/* ===========================================
   💼 DEAL CONTACT INFO BAR
   Shows phone/email when a contact is selected
=========================================== */
.deal-contact-info-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  margin: -4px 0 12px 0;
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border: 1px solid #bae6fd;
  border-radius: 10px;
  font-size: 13px;
}

.deal-contact-info-items {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.deal-contact-info-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: white;
  border-radius: 20px;
  color: var(--text-primary);
  text-decoration: none;
  font-weight: 500;
  border: 1px solid #e0f2fe;
  transition: all 0.15s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.deal-contact-info-item:hover {
  background: var(--primary-50);
  border-color: var(--primary-200);
  color: var(--primary-700);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(59, 130, 246, 0.15);
}

.deal-contact-info-item svg {
  color: var(--primary-500);
  flex-shrink: 0;
}

.deal-contact-info-value {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Phone link - green accent */
.deal-contact-info-item[href^="tel:"] svg {
  color: #059669;
}

.deal-contact-info-item[href^="tel:"]:hover {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #047857;
}

/* Email link - blue accent */
.deal-contact-info-item[href^="mailto:"] svg {
  color: var(--primary-500);
}

.deal-contact-info-item[href^="mailto:"]:hover {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: var(--primary-700);
}

/* ===========================================
   💼 DEAL MODAL - PERFECTED UI
=========================================== */

/* Deal modal structure */
.deal-modal {
  display: flex;
  flex-direction: column;
}

.deal-modal .modalBody {
  flex: 1;
  overflow-y: auto;
}

/* Field groupings */
.deal-field-group {
  /* Implicit grouping, no visible border */
}

/* Collapsible sections */
.deal-collapsible {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
}

.deal-collapsible-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  user-select: none;
}

.deal-collapsible-header:hover {
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
}

.deal-collapsible-header svg {
  transition: transform 0.2s ease;
  color: #64748b;
}

.deal-collapsible[open] .deal-collapsible-header svg {
  transform: rotate(180deg);
}

.deal-collapsible-content {
  padding: 14px;
  background: white;
}

/* Contact info bar - compact chips */
.deal-contact-info-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  margin: 4px 0 12px 0;
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border: 1px solid #bae6fd;
  border-radius: 8px;
  font-size: 12px;
  flex-wrap: wrap;
}

.deal-contact-info-items {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}

.deal-contact-info-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: white;
  border-radius: 16px;
  color: var(--text-primary);
  text-decoration: none;
  font-weight: 500;
  font-size: 11px;
  border: 1px solid #e0f2fe;
  transition: all 0.15s ease;
  white-space: nowrap;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.deal-contact-info-item:hover {
  background: var(--primary-50);
  border-color: var(--primary-200);
  transform: translateY(-1px);
}

.deal-contact-overflow {
  padding: 4px 8px;
  background: #dbeafe;
  border: 1px solid #93c5fd;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  color: var(--primary-700);
  cursor: pointer;
}

.deal-contact-overflow:hover {
  background: #bfdbfe;
}

/* Delete confirmation popover */
.deal-delete-confirm {
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: 8px;
  padding: 14px 16px;
  background: white;
  border: 1px solid #fecaca;
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  z-index: 100;
  min-width: 220px;
}

.deal-delete-confirm::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 20px;
  border: 8px solid transparent;
  border-top-color: white;
}

/* Probability override badge */
#probOverrideBadge {
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* Pipeline grid responsive */
.deal-pipeline-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}

@media (max-width: 600px) {
  .deal-pipeline-grid {
    grid-template-columns: 1fr 1fr;
  }
  
  .deal-pipeline-grid > label:nth-child(3) {
    grid-column: span 2;
  }
  
  .deal-modal-foot {
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .deal-modal-foot > div {
    flex: 1 1 auto;
  }
  
  .deal-modal-foot .btn {
    flex: 1;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .deal-pipeline-grid {
    grid-template-columns: 1fr;
  }
  
  .deal-pipeline-grid > label:nth-child(3) {
    grid-column: span 1;
  }
}

/* Sticky footer */
.deal-modal-foot {
  padding: 14px 20px;
  background: white;
  border-top: 1px solid #e5e7eb;
}

/* Smaller stage steps */
.deal-modal .stageStep {
  flex: 1;
  min-width: 0;
}

.deal-modal .stageStepCircle {
  width: 24px !important;
  height: 24px !important;
  font-size: 10px !important;
}

.deal-modal .stageStepLabel {
  font-size: 9px !important;
  max-width: 55px !important;
}

/* Modal summary line */
.deal-modal-summary {
  font-size: 12px;
  color: #64748b;
  font-weight: 500;
  margin-top: 2px;
  max-width: 400px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ===========================================
   👤 CONTACT DETAIL PAGE - REFINED UI
=========================================== */

/* Contact Summary Pills Row */
.contact-summary-pills {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.contact-summary-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  background: var(--gray-100);
  border: 1px solid var(--border-light);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.contact-summary-pill:hover {
  background: var(--gray-200);
  border-color: var(--gray-300);
}

.contact-summary-pill.company-pill {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border-color: #f59e0b;
  color: #92400e;
}

.contact-summary-pill.deals-pill {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  border-color: #10b981;
  color: #065f46;
}

.contact-summary-pill.tasks-pill {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border-color: var(--primary-500);
  color: #1e40af;
}

.contact-summary-pill.tasks-pill.overdue {
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
  border-color: #ef4444;
  color: #991b1b;
}

/* Task source chips */
.task-source-pill {
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  border: 1px solid var(--border-light);
  background: #f8fafc;
  color: #475569;
}
.task-source-pill--contact {
  background: #f1f5f9;
  color: #334155;
}
.task-source-pill--deal {
  background: #ecfdf5;
  border-color: #10b981;
  color: #065f46;
}
.task-source-pill--project {
  background: #eff6ff;
  border-color: var(--primary-500);
  color: #1e40af;
}
.task-source-pill--link {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #0f172a;
}
.task-source-pill--link:hover {
  border-color: var(--primary-500);
  color: var(--primary-700);
}

/* Quick Action Buttons in Header */
.contact-quick-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding-left: 12px;
  border-left: 1px solid var(--border-light);
}

.contact-quick-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 10px;
  background: white;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.contact-quick-action-btn:hover {
  background: var(--gray-50);
  border-color: var(--primary-300);
  color: var(--primary-700);
}

.contact-quick-action-btn.call-btn:hover {
  background: #ecfdf5;
  border-color: #10b981;
  color: #059669;
}

.contact-quick-action-btn.email-btn:hover {
  background: #eff6ff;
  border-color: var(--primary-500);
  color: var(--primary-600);
}

/* Contact Detail Field Groups */
.contact-field-group {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px dashed var(--border-light);
}

.contact-field-group:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.contact-field-group-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Actionable Contact Chips (Phone/Email) */
.contact-method-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.contact-method-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: white;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  font-size: 13px;
  transition: all 0.15s ease;
}

.contact-method-chip:hover {
  border-color: var(--primary-300);
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
}

.contact-method-chip .chip-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  padding: 2px 6px;
  background: var(--gray-100);
  border-radius: 4px;
}

.contact-method-chip .chip-value {
  font-weight: 500;
  color: var(--text-primary);
}

.contact-method-chip .chip-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 4px;
  padding-left: 8px;
  border-left: 1px solid var(--border-light);
}

.chip-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  transition: all 0.15s ease;
}

.chip-action-btn:hover {
  background: var(--gray-100);
  color: var(--primary-600);
}

.chip-action-btn.call-action:hover {
  background: #ecfdf5;
  color: #059669;
}

.chip-action-btn.copy-action:hover {
  background: #fef3c7;
  color: #b45309;
}

.chip-action-btn.email-action:hover {
  background: #eff6ff;
  color: var(--primary-600);
}

/* Related Section Card Headers - Consistent Style */
.related-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-light);
}

.related-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.related-section-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: var(--gray-200);
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
}

.related-section-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.related-section-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  min-height: 36px;
  background: #dbeafe;
  border: 1px solid #93c5fd;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #1e40af;
  cursor: pointer;
  transition: all 0.15s ease;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.related-section-btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.related-section-btn:hover {
  background: #bfdbfe;
  border-color: #60a5fa;
}

/* Task Type Chips */
.task-type-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 5px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  line-height: 1;
}

.task-type-chip--deal {
  background: #eff6ff;
  color: #1e40af;
  border: 1px solid #93c5fd;
}

.task-type-chip--project {
  background: #fdf4ff;
  color: #a21caf;
  border: 1px solid #e9d5ff;
}

/* Task Link Chip (clickable deal/project name) - removed, styles inline */

/* Field Row Alignment Classes (Editor Mode) */
.field-row--align-left {
  margin-left: 0 !important;
  margin-right: auto !important;
}

.field-row--align-center {
  margin-left: auto !important;
  margin-right: auto !important;
}

.field-row--align-right {
  margin-left: auto !important;
  margin-right: 0 !important;
}

/* Full-width fields: align content internally */
.field-row--full.field-row--align-left .field-row__label,
.field-row--full.field-row--align-left .field-row__field {
  text-align: left;
}

.field-row--full.field-row--align-center {
  justify-content: center;
}

.field-row--full.field-row--align-center .field-row__label,
.field-row--full.field-row--align-center .field-row__field {
  text-align: center;
}

.field-row--full.field-row--align-right {
  justify-content: flex-end;
}

.field-row--full.field-row--align-right .field-row__label,
.field-row--full.field-row--align-right .field-row__field {
  text-align: right;
}

/* Fill Mode Alignment */
.field-row-input--align-left {
  margin-left: 0 !important;
  margin-right: auto !important;
}

.field-row-input--align-center {
  margin-left: auto !important;
  margin-right: auto !important;
}

.field-row-input--align-right {
  margin-left: auto !important;
  margin-right: 0 !important;
}

/* Full-width fill mode inputs: align content */
.field-row-input--full.field-row-input--align-center .field-row-input__label,
.field-row-input--full.field-row-input--align-center .field-row-input__field {
  text-align: center;
}

.field-row-input--full.field-row-input--align-right .field-row-input__label,
.field-row-input--full.field-row-input--align-right .field-row-input__field {
  text-align: right;
}

/* Row group alignment */
.field-row-group--align-left {
  justify-content: flex-start;
}

.field-row-group--align-center {
  justify-content: center;
}

.field-row-group--align-right {
  justify-content: flex-end;
}

/* Consistent Empty States */
.related-section-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  text-align: center;
  background: linear-gradient(135deg, var(--gray-50) 0%, white 100%);
  border: 1px dashed var(--border-light);
  border-radius: 10px;
}

.related-section-empty-icon {
  font-size: 28px;
  margin-bottom: 8px;
  opacity: 0.5;
}

.related-section-empty-text {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.related-section-empty-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background: var(--primary-600);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.related-section-empty-btn:hover {
  background: var(--primary-700);
  transform: translateY(-1px);
}

/* Primary Badge for Relationships */
.primary-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border: 1px solid #f59e0b;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 700;
  color: #92400e;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Compact Related Item Row */
.related-item-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: white;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  margin-bottom: 8px;
  transition: all 0.15s ease;
  cursor: pointer;
}

.related-item-row:last-child {
  margin-bottom: 0;
}

.related-item-row:hover {
  border-color: var(--primary-300);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.related-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--gray-100);
  border-radius: 8px;
  flex-shrink: 0;
}

.related-item-info {
  flex: 1;
  min-width: 0;
}

.related-item-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.related-item-meta {
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.related-item-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* View All Link */
.view-all-link {
  display: block;
  text-align: center;
  padding: 8px;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--primary-600);
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.15s ease;
}

.view-all-link:hover {
  background: var(--primary-50);
  color: var(--primary-700);
}

/* Contact Detail Section Refinements */
.detailSection.contact-details-card {
  background: white;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}

.detailSection.contact-details-card h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-light);
}

/* Spacing Between Related Cards */
.detail-sidebar-col .detailSection {
  margin-bottom: 20px;
}

.detail-sidebar-col .detailSection:last-child {
  margin-bottom: 0;
}

/* Responsive: Stack columns on narrow screens */
@media (max-width: 900px) {
  .contact-quick-actions {
    display: none;
  }
  
  .contact-summary-pills {
    margin-top: 12px;
  }
}

@media (max-width: 600px) {
  .contact-method-chip .chip-actions {
    display: none;
  }
  
  .related-section-header {
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .related-section-actions {
    width: 100%;
    justify-content: flex-end;
  }
}

/* Override .btn gap for quick-add buttons */
.detail-quick-add-btn.btn,
.app-shell.detail-full .detail-quick-add-btn.btn {
  gap: 0 !important;
}

/* Task highlight flicker when jumping from summary pill */
.task-flicker {
  animation: taskFlicker 1.2s ease 0s 2;
  border-color: var(--primary-500) !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25) !important;
}

@keyframes taskFlicker {
  0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.0); }
  50% { box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.35); }
  100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.0); }
}

/* Filter button active state */
#filterBtn.filter-btn-active {
  background: #e0f2fe !important;
  border-color: #38bdf8 !important;
  color: #0c4a6e !important;
}

#filterBtn.filter-btn-active:hover {
  background: #bae6fd !important;
  border-color: #0ea5e9 !important;
}

/* ===========================================
   📄 Static Text View (Completed Documents)
   Professional display for finalized documents
=========================================== */

.field-static-text {
  display: inline;
  font-size: 14px;
  color: #111827;
  line-height: 1.6;
}

.field-static-signature {
  display: inline-block;
  padding: 8px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #ffffff;
  margin: 0 4px;
  vertical-align: middle;
}

.field-static-signature img {
  max-width: 200px;
  max-height: 80px;
  display: block;
}

/* Field Row Static (completed document view) */
.field-row-static {
  display: inline-block;
  vertical-align: top;
  margin: 0 8px 8px 0;
  padding: 8px 12px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.4;
}

.field-row-static--full {
  width: 100%;
}

.field-row-static--half {
  width: calc(50% - 4px);
}

.field-row-static--third {
  width: calc(33.333% - 6px);
}

.field-row-static--quarter {
  width: calc(25% - 6px);
}

/* Label placement in static view */
.field-row-static--left > div {
  display: flex;
  align-items: center;
  gap: 12px;
}

.field-row-static--left > div > div:first-child {
  width: 130px;
  text-align: right;
  flex-shrink: 0;
  font-weight: 600;
  color: #6b7280;
}

.field-row-static--left > div > div:last-child {
  flex: 1;
  font-weight: 600;
  color: #111827;
}

.field-row-static--above > div {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field-row-static--above > div > div:first-child {
  width: 100%;
  font-weight: 600;
  color: #6b7280;
  margin-bottom: 4px;
}

.field-row-static--above > div > div:last-child {
  width: 100%;
  font-weight: 600;
  color: #111827;
}

/* Line Items Static (completed document view) */
.line-items-static {
  margin: 16px 0;
  padding: 16px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}

.line-items-static table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  overflow: hidden;
}

.line-items-static thead {
  background: #f9fafb;
}

.line-items-static th {
  padding: 10px 12px;
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  color: #374151;
  border-bottom: 2px solid #e5e7eb;
}

.line-items-static td {
  padding: 10px 12px;
  border-bottom: 1px solid #f3f4f6;
  color: #111827;
  font-weight: 500;
}

.line-items-static tbody tr:last-child td {
  border-bottom: none;
}

/* Print optimization for static views */
@media print {
  .field-row-static,
  .field-row-input,
  .field-static-text {
    break-inside: avoid;
  }
  
  .line-items-static {
    break-inside: avoid;
  }
  
  .field-row-static,
  .field-row-static--half,
  .field-row-static--third,
  .field-row-static--quarter {
    width: 100% !important;
    margin-right: 0 !important;
  }
}

/* ===========================================
   📱 MOBILE STACK VIEW SYSTEM
   Single-screen navigation for mobile devices
=========================================== */
@media (max-width: 767px) {
  /* Hide all views by default on mobile */
  .is-mobile .folderPane,
  .is-mobile .listPane,
  .is-mobile .contactListWrap,
  .is-mobile .pipelinePane,
  .is-mobile #pipelineWrap,
  .is-mobile .projectsPane,
  .is-mobile #projectsWrap,
  .is-mobile .analyticsPane,
  .is-mobile #analyticsWrap,
  .is-mobile .detailPane,
  .is-mobile #detailPanel {
    position: fixed;
    top: 190px;
    left: 0;
    width: 100vw;
    height: calc(100dvh - 190px);
    height: calc(100vh - 190px); /* fallback */
    z-index: 10;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: white;
    /* Enable scrolling */
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* When filters are hidden (Deals, Projects, Invoices, Home), fill viewport from top – no whitespace above filter/list */
  .is-mobile .app-shell:not(.filters-visible) .folderPane,
  .is-mobile .app-shell:not(.filters-visible) .listPane,
  .is-mobile .app-shell:not(.filters-visible) .contactListWrap,
  .is-mobile .app-shell:not(.filters-visible) .pipelinePane,
  .is-mobile .app-shell:not(.filters-visible) #pipelineWrap,
  .is-mobile .app-shell:not(.filters-visible) .projectsPane,
  .is-mobile .app-shell:not(.filters-visible) #projectsWrap,
  .is-mobile .app-shell:not(.filters-visible) #invoicesWrap,
  .is-mobile .app-shell:not(.filters-visible) .analyticsPane,
  .is-mobile .app-shell:not(.filters-visible) #analyticsWrap,
  .is-mobile .app-shell:not(.filters-visible) .detailPane,
  .is-mobile .app-shell:not(.filters-visible) #detailPanel {
    top: 0;
    height: 100dvh;
    height: 100vh; /* fallback */
  }

  /* Show active view */
  .is-mobile .folderPane.active {
    transform: translateX(0);
    z-index: 11;
  }
  
  .is-mobile .listPane.active,
  .is-mobile .contactListWrap.active {
    transform: translateX(0);
    z-index: 12;
  }
  
  .is-mobile .pipelinePane.active,
  .is-mobile #pipelineWrap.active {
    transform: translateX(0);
    z-index: 12;
  }
  
  .is-mobile .projectsPane.active,
  .is-mobile #projectsWrap.active {
    transform: translateX(0);
    z-index: 12;
  }

  .is-mobile .analyticsPane.active,
  .is-mobile #analyticsWrap.active {
    transform: translateX(0);
    z-index: 12;
  }
  
  .is-mobile .detailPane.active,
  .is-mobile #detailPanel.active {
    transform: translateX(0);
    z-index: 13;
  }

  /* Remove desktop grid - stack everything */
  .is-mobile .mainSplit {
    grid-template-columns: 1fr !important;
    overflow: hidden;
    position: relative;
  }
  
  .is-mobile .app-shell {
    overflow: hidden;
  }

  /* Folder pane adjustments */
  .is-mobile .folderPane {
    width: 100vw !important;
    position: fixed;
    left: 0;
  }

  /* Hide folder toggle on mobile - use bottom nav instead */
  .is-mobile #folderMenuToggle,
  .is-mobile .folder-toggle {
    display: none;
  }

  /* List pane full width on mobile */
  .is-mobile .listPane,
  .is-mobile #contactListWrap {
    width: 100vw !important;
    max-width: 100vw;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Contact list table should scroll */
  .is-mobile #contactListWrap .pipe-list-table-wrap,
  .is-mobile .contactListWrap .pipe-list-table-wrap {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 80px !important;
  }

  /* Pipeline/Deals pane full width on mobile with scroll */
  .is-mobile .pipelinePane,
  .is-mobile #pipelineWrap {
    width: 100vw !important;
    max-width: 100vw;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Deals list/table content should scroll */
  .is-mobile #pipelineWrap .pipe-list-table-wrap,
  .is-mobile .pipelinePane .pipe-list-table-wrap {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 80px !important; /* Extra scroll room */
  }

  /* Kanban board scrolls horizontally, columns scroll vertically */
  .is-mobile #pipelineWrap .pipe-board-kanban,
  .is-mobile .pipelinePane .pipe-board-kanban {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 20px !important;
  }

  .is-mobile .pipe-kanban-col {
    max-height: calc(100dvh - 200px) !important;
    max-height: calc(100vh - 200px) !important;
    overflow-y: auto !important;
  }

  /* Projects pane full width on mobile with scroll */
  .is-mobile .projectsPane,
  .is-mobile #projectsWrap {
    width: 100vw !important;
    max-width: 100vw;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Projects content should scroll */
  .is-mobile #projectsWrap > div,
  .is-mobile .projectsPane > div {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    padding-bottom: 80px !important;
  }

  .is-mobile .analyticsPane,
  .is-mobile #analyticsWrap {
    width: 100vw !important;
    max-width: 100vw;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Detail pane full width on mobile */
  .is-mobile .detailPane,
  .is-mobile #detailPanel {
    width: 100vw !important;
    max-width: 100vw;
    left: 0 !important;
    right: 0 !important;
  }

  /* Invoices pane: scrollable on mobile */
  .is-mobile #invoicesWrap {
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .is-mobile #invoicesWrap > div {
    padding-top: 10px !important;
    padding-bottom: 80px !important; /* Extra scroll room */
    flex: 1 1 auto !important;
    min-height: 0 !important;
  }

  /* Hide Gmail tabs on mobile - use simplified navigation */
  .is-mobile .gmail-tabs-container {
    display: none;
  }

  /* Header adjustments for mobile */
  .is-mobile .app-header {
    padding: 8px 12px;
  }

  .is-mobile .app-header h1 {
    font-size: 18px;
  }

  /* Simplify header navigation on mobile */
  .is-mobile .header-nav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 4px;
    padding: 4px 8px;
  }

  .is-mobile .menuBtn {
    min-width: auto;
    padding: 8px 12px;
  }

  .is-mobile .menuBtn-label {
    display: none; /* Hide labels, show icons only */
  }

  /* Back button for mobile */
  .mobile-back-btn {
    position: absolute;
    left: 12px;
    top: 12px;
    z-index: 10;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-500);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .mobile-back-btn:hover {
    background: #f8fafc;
  }

  /* Ensure detail content scrolls properly on mobile (id or class) */
  .is-mobile #detailContent,
  .is-mobile .detailPane > .detailContent {
    flex: 1;
    min-height: 0;
    height: auto;
    max-height: 100%;
    overflow-y: auto;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .is-mobile #detailPanel.active,
  .is-mobile .detailPane.active {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    overflow-x: hidden !important;
    top: 0 !important;
    /* Use dvh (dynamic viewport height) to account for browser chrome on real phones */
    height: 100dvh !important;
    height: 100vh !important; /* fallback for older browsers */
    min-width: 0 !important;
    max-width: 100vw !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Hide filter/header bar when detail pane is active on mobile */
  .is-mobile #detailPanel.active ~ #filtersSection,
  .is-mobile .app-shell:has(#detailPanel.active) #filtersSection,
  .is-mobile .app-shell:has(#detailPanel.active) .filters-modern,
  .is-mobile .app-shell:has(#detailPanel.active) .gmail-tabs-container {
    display: none !important;
  }

  /* Force detail content to fill and show tabbed content when detail pane is active */
  .is-mobile #detailPanel.active #detailContent,
  .is-mobile .detailPane.active #detailContent {
    flex: 1 1 0%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-bottom: 60px !important; /* Extra scroll room past browser chrome */
  }

  /* =============================================
     📱 CONTACT DETAIL — iPhone-optimized polish
     Targets: .is-mobile #detailPanel.active
     390px reference (iPhone 14). Desktop untouched.
  ============================================= */

  /* ---- Detail content wrapper ---- */
  .is-mobile #detailPanel.active #detailContent {
    padding: 4px 0 0 !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  /* ---- Contact header card (name / star / action buttons) ---- */
  /* Scoped to #detailPanel so project header (#projectsWrap) keeps its 23px margin */
  .is-mobile #detailPanel .detailHeader {
    padding: 8px 10px 6px !important;
    gap: 2px !important;
    margin: 0 !important;
  }

  /* Stack name row and actions row vertically */
  .is-mobile .detailHeaderMain {
    gap: 4px !important;
    flex-wrap: wrap !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .is-mobile .detailHeaderIdentity {
    gap: 2px !important;
    width: 100% !important;
    padding-right: 36px !important;
  }

  .is-mobile .detailHeader .contactName {
    font-size: 19px !important;
    line-height: 1.15 !important;
  }

  .is-mobile .detailHeader .star-icon-btn {
    font-size: 15px !important;
    padding: 2px !important;
  }

  /* Primary contact row under company header */
  .is-mobile .detailPrimaryContactRow {
    font-size: 12px !important;
    gap: 3px !important;
    flex-wrap: wrap !important;
    line-height: 1.35 !important;
  }

  /* Action buttons row: full width, scroll horizontally, icons only */
  .is-mobile #detailHeaderActions {
    gap: 3px !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    width: 100% !important;
    justify-content: flex-start !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 2px !important;
  }

  /* Hide text labels inside action buttons on mobile — icons only */
  .is-mobile #detailHeaderActions .detail-action-btn {
    min-height: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    padding: 0 6px !important;
    border-radius: 6px !important;
    font-size: 0 !important;
    gap: 0 !important;
    flex-shrink: 0 !important;
  }

  .is-mobile #detailHeaderActions .detail-action-btn svg {
    width: 15px !important;
    height: 15px !important;
  }

  /* Restore font-size for icon-only buttons that use text glyphs (⛶, ✕) */
  .is-mobile #detailHeaderActions .detail-max-btn {
    font-size: 14px !important;
    width: 30px !important;
  }

  /* Actions dropdown button — keep a short label */
  .is-mobile #detailHeaderActions .actions-dropdown-btn,
  .is-mobile #detailHeaderActions [data-actions-dropdown] {
    font-size: 11px !important;
    padding: 0 8px !important;
    white-space: nowrap !important;
  }

  /* Quick-add icon strip (the $, checkbox, calendar, link, attachment icons) */
  .is-mobile #detailHeaderActions .detail-quick-add-btns {
    gap: 2px !important;
  }

  .is-mobile #detailHeaderActions .detail-quick-add-label {
    display: none !important;
  }

  .is-mobile #detailHeaderActions .detail-quick-add-btns button {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    padding: 0 !important;
    font-size: 0 !important;
  }

  .is-mobile #detailHeaderActions .detail-quick-add-btns button svg {
    width: 14px !important;
    height: 14px !important;
  }

  /* Hide the top-right buttons container on mobile (fullscreen toggle etc.) */
  .is-mobile #detailTopRightButtons {
    display: none !important;
  }

  /* ---- Tabs card ---- */
  .is-mobile .contact-detail-tabs-card,
  .is-mobile .contact-detail-tabs-card--premium {
    border-radius: 10px !important;
    margin: 0 4px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
    min-width: 0 !important;
    max-width: calc(100% - 8px) !important;
    width: calc(100% - 8px) !important;
    overflow: visible !important; /* Don't clip - let body handle scroll */
    box-sizing: border-box !important;
    /* Ensure card can flex and allow body to scroll */
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    /* Set max height so card doesn't extend past viewport */
    max-height: calc(100dvh - 180px) !important;
    max-height: calc(100vh - 180px) !important;
  }

  /* Tab strip */
  .is-mobile .contact-detail-tabs-header {
    padding: 0 8px !important;
    min-height: 0 !important;
  }

  .is-mobile .contact-detail-tabs-nav {
    gap: 0 !important;
  }

  .is-mobile .contact-detail-tab-btn {
    padding: 9px 8px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
  }

  .is-mobile .contact-detail-tab-count {
    font-size: 9px !important;
    min-width: 15px !important;
    height: 15px !important;
    padding: 0 3px !important;
    margin-left: 2px !important;
    border-radius: 8px !important;
  }

  /* Tab body (the scrollable content area inside the card) */
  .is-mobile .contact-detail-tabs-body {
    padding: 10px !important;
    padding-bottom: 100px !important; /* Extra padding for safe scrolling past last item */
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: scroll !important; /* Force scrollbar */
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
    /* Allow tabs body to scroll independently - flex to fill available space */
    flex: 1 1 auto !important;
    min-height: 0 !important;
    /* Critical: Set max-height so overflow can work */
    max-height: calc(100dvh - 220px) !important;
    max-height: calc(100vh - 220px) !important;
    /* Prevent touch events from bubbling to parent */
    touch-action: pan-y !important;
    overscroll-behavior: contain !important;
  }

  /* ---- Detail sections inside tabs ---- */
  .is-mobile .contact-detail-tabs-body .detailSection {
    padding: 8px 8px !important;
    margin-bottom: 8px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: 8px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    overflow: visible !important; /* Don't clip content, let parent scroll */
    box-sizing: border-box !important;
  }

  /* Tasks section - ensure it doesn't block scrolling */
  .is-mobile .contact-tasks-section {
    overflow: visible !important;
    max-height: none !important;
  }

  /* Task rows container - ensure it doesn't block scrolling */
  .is-mobile .contact-tasks-section > div {
    overflow: visible !important;
  }

  .is-mobile .contact-detail-tabs-body .detailSection h3 {
    font-size: 13px !important;
    margin-bottom: 6px !important;
    padding-left: 0 !important;
  }

  /* ---- Field groups (Identity, Contact Methods, Address & Web, Tags) ---- */
  .is-mobile .contact-field-group {
    margin-bottom: 12px !important;
    padding-bottom: 10px !important;
  }

  .is-mobile .contact-field-group:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  .is-mobile .contact-field-group-title {
    font-size: 10px !important;
    margin-top: 8px !important;
    margin-bottom: 5px !important;
    padding-bottom: 3px !important;
    gap: 4px !important;
  }

  .is-mobile .contact-field-group-title svg {
    width: 12px !important;
    height: 12px !important;
  }

  /* ---- Detail rows (label + value) ---- */
  .is-mobile .contact-detail-tabs-body .detailRow,
  .is-mobile .detailSection .detailRow {
    padding: 5px 0 !important;
    gap: 2px !important;
    grid-template-columns: 1fr !important;
  }

  .is-mobile .detailRow .label {
    font-size: 10px !important;
    margin-bottom: 1px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
  }

  .is-mobile .detailRow .value {
    font-size: 14px !important;
  }

  .is-mobile .detailRow .value input.inline-input,
  .is-mobile .detailRow .value select.inline-input,
  .is-mobile .detailRow .value select.inline-select {
    width: 100% !important;
    max-width: 100% !important;
    padding: 7px 8px !important;
    font-size: 14px !important;
    border-radius: 6px !important;
    margin-left: 0 !important;
  }

  /* Push all detail content flush-left */
  .is-mobile .contact-field-group {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .is-mobile .detailRow .label {
    padding-left: 0 !important;
  }

  .is-mobile .detailRow .value {
    padding-left: 0 !important;
  }

  .is-mobile .multi-field-detail-row .label {
    padding-left: 0 !important;
  }

  .is-mobile .detail-multi-field-list {
    padding-left: 0 !important;
    margin-left: 0 !important;
  }

  /* ---- Multi-field entries (phones, emails, social) ---- */
  .is-mobile .detail-multi-field-entry {
    padding: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  .is-mobile .detail-multi-field-list {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  .is-mobile .detail-multi-type-select {
    padding: 3px 8px !important;
    font-size: 11px !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .is-mobile .detail-multi-value-input {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 7px 10px !important;
    font-size: 14px !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
  }

  /* ---- Address fields ---- */
  .is-mobile .detail-address-input {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 7px 8px !important;
    font-size: 14px !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
  }

  .is-mobile .detail-address-entry {
    padding: 4px 6px !important;
    margin-bottom: 4px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: 6px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .is-mobile .detail-address-fields {
    gap: 3px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  .is-mobile .detail-address-row {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* ---- Contact method chips (phone/email compact view) ---- */
  .is-mobile .contact-method-chip {
    padding: 5px 8px !important;
    gap: 4px !important;
    border-radius: 6px !important;
    max-width: 100% !important;
  }

  .is-mobile .contact-method-chip .chip-label {
    font-size: 9px !important;
    padding: 1px 5px !important;
  }

  .is-mobile .contact-method-chip .chip-value {
    font-size: 13px !important;
  }

  .is-mobile .contact-method-chip .chip-actions {
    display: none !important;
  }

  .is-mobile .contact-method-chips {
    gap: 4px !important;
  }

  /* ---- Add buttons (+Add Phones, +Add Social, etc.) ---- */
  .is-mobile .btn-add-detail-field {
    font-size: 11px !important;
    padding: 3px 8px !important;
    margin-top: 2px !important;
    border-radius: 5px !important;
  }

  /* ---- Primary contact highlight card (on companies) ---- */
  .is-mobile .primary-contact-row {
    padding: 6px 8px !important;
    border-radius: 6px !important;
    margin-top: 3px !important;
    margin-left: 0 !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
  }

  .is-mobile .primary-contact-row .contact-field-label {
    font-size: 9px !important;
    margin-bottom: 1px !important;
  }

  .is-mobile .primary-contact-row .btn-link-primary-contact-detail {
    font-size: 13px !important;
  }

  /* ---- Tags section ---- */
  .is-mobile .detail-tags-edit-wrapper {
    margin-top: 4px !important;
  }

  .is-mobile .tagChip {
    padding: 3px 8px !important;
    font-size: 11px !important;
    border-radius: 5px !important;
  }

  /* ---- Next Action pill ---- */
  .is-mobile .task-badge {
    font-size: 11px !important;
    padding: 3px 8px !important;
  }

  /* ---- Notes & Activity section ---- */
  .is-mobile .note-composer {
    padding: 0 !important;
  }

  .is-mobile .note-composer textarea {
    min-height: 50px !important;
    font-size: 13px !important;
    padding: 8px !important;
    border-radius: 6px !important;
  }

  .is-mobile .contact-activity-item {
    padding: 6px 8px !important;
    margin-bottom: 4px !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
  }

  /* Section headers inside tabs (Notes & Activity, etc.) */
  .is-mobile .related-section-header {
    padding: 0 !important;
    margin-bottom: 6px !important;
  }

  .is-mobile .related-section-title {
    font-size: 12px !important;
    gap: 4px !important;
  }

  .is-mobile .related-section-title svg {
    width: 14px !important;
    height: 14px !important;
  }

  .is-mobile .related-section-count {
    font-size: 10px !important;
    min-width: 16px !important;
    height: 16px !important;
    padding: 0 4px !important;
  }

  .is-mobile .related-section-empty {
    padding: 12px !important;
    font-size: 12px !important;
  }

  /* Tip text below note textarea */
  .is-mobile .note-tracker [style*="Tip:"],
  .is-mobile .overview-note-composer [style*="Tip:"] {
    font-size: 10px !important;
  }

  /* Voice recording banner — compact */
  .is-mobile [data-ov-voice-banner],
  .is-mobile [data-modal-voice-banner] {
    padding: 8px 10px !important;
    margin-bottom: 6px !important;
  }

  /* ---- Deals, Tasks, Relationships tab content ---- */
  
  /* Summary stats: 2x2 grid on mobile */
  .is-mobile .contact-deals-summary {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
    margin: 8px 0 10px !important;
  }

  .is-mobile .contact-deals-summary-card {
    padding: 6px 8px !important;
    border-radius: 8px !important;
  }

  .is-mobile .contact-deals-summary-k {
    font-size: 9px !important;
    letter-spacing: 0.03em !important;
  }

  .is-mobile .contact-deals-summary-v {
    font-size: 15px !important;
    margin-top: 2px !important;
  }

  /* Deal list - contain all overflow */
  .is-mobile .contact-deals-list {
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  /* Deal card - single column, strict containment */
  .is-mobile .contact-deal-card {
    padding: 12px !important;
    gap: 0 !important;
    border-radius: 10px !important;
    grid-template-columns: 1fr !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* Deal icon - hide on mobile */
  .is-mobile .contact-deal-icon {
    display: none !important;
  }

  /* Deal main content - strict width containment */
  .is-mobile .contact-deal-main {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  /* Title row: name, health badge, edit button */
  .is-mobile .contact-deal-main-top {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    width: 100% !important;
    margin-bottom: 8px !important;
  }

  .is-mobile .contact-deal-title-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0 !important;
    flex: 1 !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
  }

  .is-mobile .contact-deal-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: none !important;
    flex: 1 !important;
    min-width: 0 !important;
  }

  .is-mobile .contact-deal-health-badge {
    padding: 2px 6px !important;
    font-size: 9px !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }

  /* Edit button */
  .is-mobile .contact-deal-edit-btn {
    padding: 5px 12px !important;
    font-size: 11px !important;
    border-radius: 6px !important;
    flex-shrink: 0 !important;
  }

  /* Subtext section - each pill on its own line */
  .is-mobile .contact-deal-subtext {
    margin-top: 0 !important;
    margin-bottom: 10px !important;
    gap: 6px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100% !important;
  }

  /* Stage and company pills - inline row */
  .is-mobile .contact-deal-stage-pill,
  .is-mobile .contact-deal-company-pill {
    padding: 3px 8px !important;
    font-size: 10px !important;
    gap: 3px !important;
    white-space: nowrap !important;
    display: inline-flex !important;
  }

  /* Contact person pill - full width, truncate */
  .is-mobile .contact-deal-person-pill,
  .is-mobile .contact-deal-subtext .contact-pill,
  .is-mobile .contact-deal-subtext [data-id] {
    padding: 4px 8px !important;
    font-size: 11px !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    display: block !important;
  }

  /* Owner and Type pills - each on own line, truncate */
  .is-mobile .contact-deal-meta-pill {
    padding: 4px 10px !important;
    font-size: 11px !important;
    gap: 4px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    display: block !important;
  }

  /* Metrics: 2x2 grid */
  .is-mobile .contact-deal-metrics {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
    margin-top: 0 !important;
    margin-bottom: 10px !important;
    width: 100% !important;
  }

  .is-mobile .contact-deal-metric {
    padding: 8px 10px !important;
    border-radius: 6px !important;
    gap: 2px !important;
    text-align: left !important;
    min-width: 0 !important;
  }

  .is-mobile .contact-deal-metric .k {
    font-size: 9px !important;
    text-align: left !important;
  }

  .is-mobile .contact-deal-metric .v {
    font-size: 14px !important;
    font-weight: 700 !important;
    text-align: left !important;
  }

  /* Footer row - 2-column grid for dates, full width for others */
  .is-mobile .contact-deal-footer {
    margin-top: 0 !important;
    gap: 4px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    padding-top: 10px !important;
    border-top: 1px solid #f1f5f9 !important;
    width: 100% !important;
  }

  .is-mobile .contact-deal-footer-pill {
    padding: 3px 0 !important;
    font-size: 10px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    background: transparent !important;
    border: none !important;
    color: #64748b !important;
  }

  /* Task count and Next action - full width */
  .is-mobile .contact-deal-task-count-pill,
  .is-mobile .contact-deal-next-action-pill {
    grid-column: 1 / -1 !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    line-height: 1.4 !important;
    padding: 4px 0 !important;
  }

  /* + Deal button at top */
  .is-mobile .contact-deals-section .btn-add-deal,
  .is-mobile .contact-deals-section [class*="add-deal"],
  .is-mobile .related-section-btn {
    padding: 6px 10px !important;
    font-size: 11px !important;
    border-radius: 6px !important;
  }

  /* Section header */
  .is-mobile .contact-deals-section .related-section-header {
    padding: 6px 0 !important;
    margin-bottom: 4px !important;
  }
  
  /* Deals section container - strict containment */
  .is-mobile .contact-deals-section {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  /* ---- Tasks & Events tab mobile polish ---- */
  
  /* Tasks section uses same summary classes as deals */
  .is-mobile .contact-tasks-section .contact-deals-summary {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
    margin: 8px 0 10px !important;
  }

  .is-mobile .contact-tasks-section .contact-deals-summary-card {
    padding: 6px 8px !important;
    border-radius: 8px !important;
  }

  .is-mobile .contact-tasks-section .contact-deals-summary-k {
    font-size: 9px !important;
  }

  .is-mobile .contact-tasks-section .contact-deals-summary-v {
    font-size: 15px !important;
    margin-top: 2px !important;
  }

  /* Task row cards - these have inline styles so we need !important */
  .is-mobile .contact-tasks-section .task-row {
    padding: 10px 12px !important;
    gap: 8px !important;
    border-radius: 10px !important;
    grid-template-columns: auto 1fr auto !important;
  }

  /* Task icon */
  .is-mobile .contact-tasks-section .task-row > div:first-child {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
  }

  /* Task content area */
  .is-mobile .contact-tasks-section .task-row > div:nth-child(2) {
    min-width: 0 !important;
    gap: 4px !important;
  }

  /* Task title */
  .is-mobile .contact-tasks-section .task-row [style*="font-weight:700"],
  .is-mobile .contact-tasks-section .task-row [style*="font-weight: 700"] {
    font-size: 13px !important;
    line-height: 1.3 !important;
  }

  /* Task pills/badges row */
  .is-mobile .contact-tasks-section .task-row [style*="flex-wrap:wrap"],
  .is-mobile .contact-tasks-section .task-row [style*="flex-wrap: wrap"] {
    gap: 4px !important;
    margin-top: 4px !important;
  }

  /* Individual pills in task rows */
  .is-mobile .contact-tasks-section .task-row [style*="border-radius:999px"],
  .is-mobile .contact-tasks-section .task-row [style*="border-radius: 999px"] {
    padding: 2px 6px !important;
    font-size: 10px !important;
  }

  /* Task action buttons (Edit, checkmark, +) */
  .is-mobile .contact-tasks-section .task-row > div:last-child {
    gap: 4px !important;
  }

  .is-mobile .contact-tasks-section .task-row button {
    padding: 4px 8px !important;
    font-size: 11px !important;
    min-height: 28px !important;
    border-radius: 6px !important;
  }

  /* Task action icon buttons */
  .is-mobile .contact-tasks-section .task-row button[style*="width:28px"],
  .is-mobile .contact-tasks-section .task-row button[style*="width: 28px"],
  .is-mobile .contact-tasks-section .task-row [style*="width:28px"],
  .is-mobile .contact-tasks-section .task-row [style*="width: 28px"] {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    padding: 0 !important;
  }

  /* Section header in tasks */
  .is-mobile .contact-tasks-section .related-section-header {
    padding: 6px 0 !important;
    margin-bottom: 4px !important;
  }

  .is-mobile .contact-tasks-section .related-section-title {
    font-size: 12px !important;
    gap: 6px !important;
  }

  .is-mobile .contact-tasks-section .related-section-count {
    font-size: 10px !important;
    padding: 2px 6px !important;
  }

  /* Add buttons */
  .is-mobile .contact-tasks-section .related-section-btn {
    padding: 5px 8px !important;
    font-size: 11px !important;
    border-radius: 6px !important;
  }

  .is-mobile .contact-tasks-section .related-section-actions {
    gap: 4px !important;
  }

  /* Empty state for tasks */
  .is-mobile .contact-tasks-section .related-section-empty {
    padding: 24px 16px !important;
  }

  .is-mobile .contact-tasks-section .related-section-empty [style*="width:80px"] {
    width: 60px !important;
    height: 60px !important;
    margin-bottom: 12px !important;
  }

  .is-mobile .contact-tasks-section .related-section-empty h3 {
    font-size: 15px !important;
    margin-bottom: 6px !important;
  }

  .is-mobile .contact-tasks-section .related-section-empty p {
    font-size: 12px !important;
    margin-bottom: 16px !important;
  }

  .is-mobile .contact-tasks-section .related-section-empty button {
    padding: 8px 14px !important;
    font-size: 12px !important;
  }

  /* ---- Relationships tab mobile polish ---- */
  
  /* Relationships section container */
  .is-mobile .relationshipsSection {
    padding: 8px !important;
  }

  /* Section header */
  .is-mobile .relationshipsSection .related-section-header {
    padding: 6px 4px !important;
    margin-bottom: 8px !important;
    gap: 6px !important;
  }

  .is-mobile .relationshipsSection .related-section-title {
    font-size: 12px !important;
    gap: 6px !important;
  }

  .is-mobile .relationshipsSection .related-section-title svg {
    width: 14px !important;
    height: 14px !important;
  }

  .is-mobile .relationshipsSection .related-section-count {
    font-size: 10px !important;
    padding: 2px 6px !important;
    min-width: 18px !important;
    height: 18px !important;
  }

  /* + Relationship button */
  .is-mobile .relationshipsSection .related-section-btn,
  .is-mobile .relationshipsSection #addRelationshipBtn {
    padding: 5px 10px !important;
    font-size: 11px !important;
    border-radius: 6px !important;
    gap: 4px !important;
  }

  .is-mobile .relationshipsSection .related-section-btn svg {
    width: 12px !important;
    height: 12px !important;
  }

  /* Relationship card - uses contact-related-card class */
  .is-mobile .contact-related-card {
    padding: 10px !important;
    gap: 10px !important;
    border-radius: 10px !important;
    grid-template-columns: auto 1fr auto !important;
  }

  /* Relationship icon */
  .is-mobile .contact-related-card > div:first-child {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 8px !important;
    font-size: 16px !important;
  }

  /* Relationship info area */
  .is-mobile .contact-related-card > div:nth-child(2) {
    gap: 3px !important;
    min-width: 0 !important;
  }

  /* Name and primary badge */
  .is-mobile .contact-related-card > div:nth-child(2) > div:first-child {
    font-size: 13px !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
  }

  /* Primary badge */
  .is-mobile .contact-related-card .primary-badge {
    padding: 2px 6px !important;
    font-size: 9px !important;
  }

  /* Relationship type pill */
  .is-mobile .contact-related-card > div:nth-child(2) > div:nth-child(2) span {
    padding: 2px 6px !important;
    font-size: 10px !important;
  }

  /* Action buttons container */
  .is-mobile .contact-related-card > div:last-child {
    flex-direction: row !important;
    gap: 4px !important;
    min-width: auto !important;
  }

  /* View and Remove buttons */
  .is-mobile .contact-related-card > div:last-child button {
    padding: 6px 10px !important;
    font-size: 11px !important;
    border-radius: 6px !important;
  }

  /* Empty state for relationships */
  .is-mobile .relationshipsSection .related-section-empty {
    padding: 20px 12px !important;
  }

  .is-mobile .relationshipsSection .related-section-empty-icon {
    font-size: 24px !important;
    margin-bottom: 6px !important;
  }

  .is-mobile .relationshipsSection .related-section-empty-text {
    font-size: 12px !important;
    margin-bottom: 10px !important;
  }

  /* ---- Documents tab mobile polish ---- */
  
  /* Documents section container */
  .is-mobile .attachmentsSection {
    padding: 6px !important;
  }

  /* Help hint text - compact */
  .is-mobile .attachmentsSection #docSelectionHint {
    font-size: 10px !important;
    margin-bottom: 6px !important;
    line-height: 1.3 !important;
    padding: 6px 8px !important;
  }

  .is-mobile .attachmentsSection #docSelectionHint span:first-child {
    font-size: 11px !important;
  }

  /* Selection actions bar - compact grid */
  .is-mobile .attachmentsSection #docSelectionActions {
    padding: 6px !important;
    gap: 4px !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .is-mobile .attachmentsSection #docSelectionCount {
    font-size: 10px !important;
    min-width: auto !important;
    grid-column: 1 / -1 !important;
    text-align: center !important;
    margin-bottom: 4px !important;
  }

  /* All deal-btn buttons in documents section - compact */
  .is-mobile .attachmentsSection .deal-btn {
    padding: 5px 8px !important;
    font-size: 10px !important;
    border-radius: 6px !important;
    gap: 3px !important;
    white-space: nowrap !important;
    justify-content: center !important;
  }

  .is-mobile .attachmentsSection .deal-btn.small {
    padding: 4px 6px !important;
    font-size: 9px !important;
  }

  /* Toolbar buttons container - 2-column grid layout */
  .is-mobile .attachmentsSection > div > div[style*="display:flex"][style*="gap"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    margin-bottom: 8px !important;
  }

  /* View Portal button - full width */
  .is-mobile .attachmentsSection > div > div[style*="display:flex"][style*="gap"] > button:last-child,
  .is-mobile .attachmentsSection > div > div[style*="display:flex"][style*="gap"] > .deal-btn:last-child {
    grid-column: 1 / -1 !important;
  }

  /* Create Document button - accent styling */
  .is-mobile .attachmentsSection .deal-btn[style*="background: linear-gradient"] {
    padding: 6px 10px !important;
  }

  /* Empty state */
  .is-mobile .attachmentsSection > div[style*="padding: 48px"] {
    padding: 24px 16px !important;
  }

  .is-mobile .attachmentsSection > div[style*="padding: 48px"] > div[style*="width:80px"] {
    width: 60px !important;
    height: 60px !important;
    margin-bottom: 12px !important;
    font-size: 28px !important;
  }

  .is-mobile .attachmentsSection > div[style*="padding: 48px"] h3 {
    font-size: 15px !important;
    margin-bottom: 6px !important;
  }

  .is-mobile .attachmentsSection > div[style*="padding: 48px"] p {
    font-size: 12px !important;
    margin-bottom: 16px !important;
  }

  .is-mobile .attachmentsSection > div[style*="padding: 48px"] button {
    padding: 8px 12px !important;
    font-size: 11px !important;
    border-radius: 8px !important;
  }

  /* Table - force card layout on mobile */
  .is-mobile .attachmentsSection table.pipe-list-table {
    display: block !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  .is-mobile .attachmentsSection table.pipe-list-table thead {
    display: none !important;
  }

  .is-mobile .attachmentsSection table.pipe-list-table tbody {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  /* Document card row */
  .is-mobile .attachmentsSection table.pipe-list-table tr {
    display: grid !important;
    grid-template-columns: auto auto 1fr !important;
    grid-template-rows: auto auto auto !important;
    padding: 10px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 10px !important;
    background: white !important;
    gap: 6px 8px !important;
    align-items: center !important;
  }

  .is-mobile .attachmentsSection table.pipe-list-table td {
    padding: 0 !important;
    border: none !important;
  }

  /* Checkbox cell - row 1, col 1 */
  .is-mobile .attachmentsSection table.pipe-list-table td:first-child {
    grid-row: 1 !important;
    grid-column: 1 !important;
    width: auto !important;
  }

  .is-mobile .attachmentsSection table.pipe-list-table td:first-child input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
  }

  /* Thumbnail cell - row 1, col 2 */
  .is-mobile .attachmentsSection table.pipe-list-table td:nth-child(2) {
    grid-row: 1 !important;
    grid-column: 2 !important;
    width: auto !important;
  }

  .is-mobile .attachmentsSection table.pipe-list-table td:nth-child(2) > div {
    width: 40px !important;
    height: 40px !important;
    border-radius: 6px !important;
  }

  /* Document name cell - row 1, col 3 - truncate filename */
  .is-mobile .attachmentsSection table.pipe-list-table td:nth-child(3) {
    grid-row: 1 !important;
    grid-column: 3 !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .is-mobile .attachmentsSection table.pipe-list-table td:nth-child(3) > div,
  .is-mobile .attachmentsSection table.pipe-list-table td:nth-child(3) span,
  .is-mobile .attachmentsSection table.pipe-list-table td:nth-child(3) a {
    font-size: 12px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
    max-width: 100% !important;
  }

  /* Hide less important columns on mobile */
  .is-mobile .attachmentsSection table.pipe-list-table td:nth-child(4),
  .is-mobile .attachmentsSection table.pipe-list-table td:nth-child(5),
  .is-mobile .attachmentsSection table.pipe-list-table td:nth-child(7),
  .is-mobile .attachmentsSection table.pipe-list-table td:nth-child(8) {
    display: none !important;
  }

  /* Status cell - row 2, full width */
  .is-mobile .attachmentsSection table.pipe-list-table td:nth-child(6) {
    grid-row: 2 !important;
    grid-column: 1 / -1 !important;
  }

  .is-mobile .attachmentsSection table.pipe-list-table td:nth-child(6) .badge {
    font-size: 10px !important;
    padding: 2px 8px !important;
  }

  /* Actions cell - row 3, full width */
  .is-mobile .attachmentsSection table.pipe-list-table td:last-child {
    grid-row: 3 !important;
    grid-column: 1 / -1 !important;
  }

  .is-mobile .attachmentsSection table.pipe-list-table td:last-child > div {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    justify-content: flex-start !important;
  }

  .is-mobile .attachmentsSection table.pipe-list-table td:last-child button {
    padding: 6px 12px !important;
    font-size: 11px !important;
    border-radius: 6px !important;
    flex: 1 !important;
    justify-content: center !important;
  }

  /* Actions dropdown */
  .is-mobile .attachmentsSection table.pipe-list-table td:last-child select,
  .is-mobile .attachmentsSection table.pipe-list-table td:last-child .actions-dropdown {
    padding: 6px 8px !important;
    font-size: 11px !important;
    flex: 0 0 auto !important;
  }

  /* Scrollable table container */
  .is-mobile .attachmentsSection > div[style*="overflow-x:auto"] {
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: visible !important;
  }

  /* ---- Invoicing tab mobile polish ---- */
  
  /* Container padding */
  .is-mobile .contact-detail-tabs-body .detailSection:has(#contactScopedCreateInvoice),
  .is-mobile .contact-detail-tabs-body .detailSection:has(.pipe-list-table-wrap) {
    padding: 8px !important;
    margin-bottom: 10px !important;
  }

  /* Header row with Invoicing title and buttons */
  .is-mobile .contact-detail-tabs-body .detailSection > div[style*="display: flex"][style*="justify-content: space-between"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
  }

  /* Section titles */
  .is-mobile .contact-detail-tabs-body .detailSection > h3 {
    font-size: 12px !important;
    margin-bottom: 8px !important;
  }

  /* Create Invoice / Create Quote buttons container */
  .is-mobile #contactScopedCreateInvoice,
  .is-mobile #contactScopedCreateQuote {
    padding: 6px 10px !important;
    font-size: 11px !important;
    border-radius: 6px !important;
  }

  /* Table wrapper - allow horizontal scroll */
  .is-mobile .pipe-list-table-wrap {
    border-radius: 8px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Invoice/Quote tables */
  .is-mobile .pipe-list-table-wrap table {
    min-width: 400px !important;
    font-size: 12px !important;
  }

  .is-mobile .pipe-list-table-wrap table th {
    padding: 8px 10px !important;
    font-size: 10px !important;
    white-space: nowrap !important;
  }

  .is-mobile .pipe-list-table-wrap table td {
    padding: 10px !important;
    font-size: 12px !important;
  }

  /* Invoice/Quote row items */
  .is-mobile .pipe-list-table-wrap .invoice-row td,
  .is-mobile .pipe-list-table-wrap .quote-row td {
    padding: 8px 10px !important;
  }

  /* Status badges in tables */
  .is-mobile .pipe-list-table-wrap .badge,
  .is-mobile .pipe-list-table-wrap [style*="border-radius"][style*="padding"] {
    font-size: 10px !important;
    padding: 2px 6px !important;
  }

  /* Empty state in tables */
  .is-mobile .pipe-list-table-wrap td[colspan] {
    padding: 20px 12px !important;
  }

  .is-mobile .pipe-list-table-wrap td[colspan] > div {
    font-size: 14px !important;
  }

  .is-mobile .pipe-list-table-wrap td[colspan] > div > div[style*="font-size: 48px"] {
    font-size: 32px !important;
    margin-bottom: 10px !important;
  }

  .is-mobile .pipe-list-table-wrap td[colspan] > div > div[style*="font-size: 18px"] {
    font-size: 14px !important;
    margin-bottom: 6px !important;
  }

  /* ---- Projects tab mobile polish ---- */
  
  /* Container padding */
  .is-mobile .contact-detail-tabs-body .detailSection:has(#contactScopedCreateProject) {
    padding: 8px !important;
    margin-bottom: 10px !important;
  }

  /* Header row with Projects title and Create button */
  .is-mobile .contact-detail-tabs-body .detailSection:has(#contactScopedCreateProject) > div[style*="display: flex"][style*="justify-content: space-between"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
  }

  /* Create Project button */
  .is-mobile #contactScopedCreateProject {
    padding: 6px 10px !important;
    font-size: 11px !important;
    border-radius: 6px !important;
  }

  /* Project table rows */
  .is-mobile .pipe-list-table-wrap .project-row td {
    padding: 10px 12px !important;
  }

  .is-mobile .pipe-list-table-wrap .project-row .pipe-list-name {
    font-size: 13px !important;
    padding-left: 10px !important;
  }

  /* Status badges in project rows */
  .is-mobile .pipe-list-table-wrap .project-row span[style*="border-radius:12px"] {
    font-size: 10px !important;
    padding: 3px 8px !important;
  }

  /* ---- Overview grid: single column, details first, notes below ---- */
  .is-mobile .contact-overview-layout {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }

  /* On mobile, show company details first, notes below (undo the desktop order:-1) */
  .is-mobile .contact-overview-right {
    order: 1 !important;
  }

  .is-mobile .contact-overview-left {
    order: 0 !important;
  }

  /* IMPORTANT: Hide the duplicate Notes & Activity section inside the left column on mobile.
     The right column's notes panel is the canonical one shown on mobile. */
  .is-mobile .contact-overview-left .detailSection.activityLog {
    display: none !important;
  }

  /* ---- Notes & Activity composer (the Call/Email/Note/SMS/Voice buttons) ---- */
  .is-mobile .overview-note-composer [style*="grid-template-columns: repeat(5"] {
    grid-template-columns: repeat(5, 1fr) !important;
  }

  .is-mobile .overview-note-composer [data-ov-type],
  .is-mobile .overview-note-composer [data-ov-voice] {
    padding: 7px 4px !important;
    font-size: 0 !important;
    gap: 0 !important;
  }

  .is-mobile .overview-note-composer [data-ov-type] svg,
  .is-mobile .overview-note-composer [data-ov-voice] svg {
    width: 16px !important;
    height: 16px !important;
  }

  /* Quick Note badge */
  .is-mobile .overview-note-composer .note-quick-btn,
  .is-mobile .note-tracker .note-quick-btn {
    font-size: 12px !important;
    padding: 4px 10px !important;
  }

  /* Note textarea */
  .is-mobile .overview-note-composer textarea {
    min-height: 44px !important;
    font-size: 13px !important;
    padding: 6px 8px !important;
  }

  /* Note save/clear row */
  .is-mobile .overview-note-composer .note-actions-row,
  .is-mobile .note-tracker .note-actions-row {
    gap: 6px !important;
    margin-top: 4px !important;
  }

  .is-mobile .overview-note-composer .note-actions-row .btn {
    padding: 5px 12px !important;
    font-size: 12px !important;
    min-height: 28px !important;
  }

  /* ---- Drawer close button position tweak ---- */
  .is-mobile #drawerCloseBtn {
    position: absolute !important;
    top: 6px !important;
    right: 6px !important;
    margin: 0 !important;
    width: 32px !important;
    height: 32px !important;
    font-size: 16px !important;
    z-index: 20 !important;
    float: none !important;
  }

  /* Make search bar full width on mobile */
  .is-mobile #globalSearch,
  .is-mobile .searchInput {
    width: 100%;
  }
}

/* ===========================================
   📱 MOBILE - LIST VIEW OPTIMIZATIONS
=========================================== */
@media (max-width: 767px) {
  /* Make list items easier to tap */
  .is-mobile .contactRow,
  .is-mobile .list-row {
    padding: 16px 12px;
    border-bottom: 1px solid #f1f5f9;
  }

  /* Hide less important columns on mobile */
  .is-mobile .contactRow .contact-meta-secondary,
  .is-mobile .contactRow .contact-tags {
    display: none;
  }

  /* Simplify contact row layout */
  .is-mobile .contactRow {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }

  .is-mobile .list-row-avatar {
    flex-shrink: 0;
  }

  .is-mobile .contact-info {
    flex: 1;
    min-width: 0;
  }

  .is-mobile .contact-name {
    font-size: 16px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .is-mobile .contact-company {
    font-size: 14px;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ===========================================
   📱 MOBILE - DETAIL VIEW OPTIMIZATIONS
=========================================== */
@media (max-width: 767px) {
  /* Stack detail columns on mobile */
  .is-mobile #detailContent {
    grid-template-columns: 1fr !important;
    gap: 0;
  }

  /* Full width sections on mobile */
  .is-mobile .detail-main-col,
  .is-mobile .detail-sidebar-col {
    width: 100%;
  }

  /* Collapse sections by default on mobile to save space */
  .is-mobile .detailSection {
    margin-bottom: 12px;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  /* Make action buttons full width on mobile */
  .is-mobile .detail-actions,
  .is-mobile .paneHead-right {
    width: 100%;
    justify-content: stretch;
  }

  .is-mobile .detail-actions .btn,
  .is-mobile .paneHead-right .btn {
    flex: 1;
  }
  
  /* ===========================================
     📱 MOBILE CONTACT DETAIL RESPONSIVE FIXES
     Ensure all fields and labels fit properly
  =========================================== */
  
  /* Contact Detail Fields - Stack vertically on mobile */
  .detailRow {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    padding: 12px 0 !important;
  }
  
  .detailRow .label {
    font-size: 11px !important;
    margin-bottom: 2px !important;
  }
  
  .detailRow .value {
    font-size: 14px !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  
  .detailRow .value input,
  .detailRow .value select,
  .detailRow .value textarea {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
  
  /* Contact Field Group Title - ensure it wraps properly */
  .contact-field-group-title {
    font-size: 10px !important;
    white-space: normal !important;
    max-width: 100% !important;
    word-wrap: break-word !important;
  }
  
  /* Detail Section - reduce padding on mobile */
  .detailSection {
    padding: 12px !important;
  }
  
  /* Multi-field entries (addresses, phones, emails) */
  .detail-multi-entry {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  
  .detail-multi-entry input,
  .detail-multi-entry select,
  .detail-multi-entry textarea {
    min-width: 0 !important;
    flex: 1 1 100% !important;
    max-width: 100% !important;
  }
  
  /* Contact method chips */
  .contact-method-chip {
    max-width: 100% !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
  
  .contact-method-chip .chip-label {
    max-width: calc(100vw - 120px) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  
  /* Ensure textarea fields fit properly */
  .detailRow textarea {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Address fields - responsive sizing */
  .detail-address-input {
    min-width: 0 !important;
    width: 100% !important;
  }
  
  .detail-address-row {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  
  .detail-address-fields {
    gap: 8px !important;
  }
  
  /* Multi-field entries */
  .detail-multi-field-entry {
    margin-bottom: 12px !important;
  }
  
  .detail-multi-field-entry-header {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  
  .detail-multi-type-select {
    max-width: 100% !important;
  }

  /* ---- Global mobile input containment ---- */
  .is-mobile input,
  .is-mobile select,
  .is-mobile textarea {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ---- Address section specific fixes ---- */
  .is-mobile .detail-address-fields,
  .is-mobile .detail-address-entry,
  .is-mobile .detail-address-row {
    padding-right: 0 !important;
    margin-right: 0 !important;
  }

  .is-mobile .detail-address-input {
    max-width: calc(100% - 4px) !important;
  }

  /* ---- Force relative positioning context to clip children ---- */
  .is-mobile .detailSection,
  .is-mobile .contact-detail-tabs-body,
  .is-mobile .detail-multi-field-list,
  .is-mobile .detail-address-fields {
    position: relative !important;
  }

  /* ---- Phone/Email multi-field fixes ---- */
  .is-mobile .detail-multi-value-input,
  .is-mobile .detail-multi-type-select {
    max-width: calc(100% - 4px) !important;
  }
}

/* ===========================================
   📱 EXTRA SMALL MOBILE DEVICES (< 480px)
   Additional refinements for very small screens
=========================================== */
@media (max-width: 480px) {
  .detailRow {
    padding: 10px 0 !important;
  }
  
  .detailRow .label {
    font-size: 10px !important;
  }
  
  .detailRow .value {
    font-size: 13px !important;
  }
  
  .contact-field-group-title {
    font-size: 9px !important;
    gap: 4px !important;
  }
  
  .contact-field-group-title svg {
    width: 12px !important;
    height: 12px !important;
  }
  
  .detailSection {
    padding: 10px !important;
  }
  
  /* Reduce chip padding on very small screens */
  .contact-method-chip {
    padding: 6px 10px !important;
    font-size: 12px !important;
  }
  
  .contact-method-chip .chip-label {
    max-width: calc(100vw - 100px) !important;
  }
  
  /* Adjust multi-field entry spacing */
  .detail-multi-entry {
    gap: 6px !important;
  }
  
  /* Address fields - remove min-width constraint */
  .detail-address-input {
    min-width: 0 !important;
  }
  
  /* Address row - stack on very small screens */
  .detail-address-row {
    grid-template-columns: 1fr !important;
  }
  
  .detail-address-row .detail-address-input {
    width: 100% !important;
  }
  
  /* Make buttons stack better */
  .detail-actions {
    flex-direction: column !important;
    gap: 8px !important;
  }
  
  .detail-actions .btn {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* ===========================================
   🎨 USER PREFERENCES MODAL
=========================================== */
.preferences-modal {
  max-width: 800px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.preferences-body {
  overflow-y: auto;
  flex: 1;
  padding: 24px !important;
}

.preferences-section {
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
}

.preferences-section:last-child {
  margin-bottom: 0;
}

.preferences-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 20px 0;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--border-light);
}

.preferences-section-icon {
  font-size: 20px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(147, 51, 234, 0.1) 100%);
  border-radius: 8px;
}

.preferences-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.preferences-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.preferences-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  display: block;
}

.preferences-hint {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
  margin-top: 4px;
}

.preferences-toggles {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.preferences-toggle {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  padding: 12px;
  border-radius: 8px;
  background: var(--gray-50);
  border: 1px solid var(--border-light);
  transition: all 0.15s;
}

.preferences-toggle:hover {
  background: white;
  border-color: var(--primary-300);
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
}

.preferences-toggle input[type="checkbox"] {
  margin-top: 2px;
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--primary-500);
  flex-shrink: 0;
}

.preferences-toggle-label {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.preferences-toggle-label strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.preferences-toggle-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
}

.preferences-modal .textarea {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  resize: vertical;
  min-height: 100px;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .preferences-modal {
    max-width: 100%;
    max-height: 100vh;
    margin: 0;
    border-radius: 0;
  }

  .preferences-body {
    padding: 16px !important;
  }

  .preferences-section {
    padding: 16px;
    margin-bottom: 16px;
  }

  .preferences-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* ===========================================
   ✨ App-Wide Consistency Foundation
   - smoother popups
   - consistent detail action buttons
   - responsive tablet/mobile polish
=========================================== */
@keyframes ui-popover-in {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.ui-popover-smooth,
#__contactListEntityPopup,
.deal-microhelp {
  animation: ui-popover-in 180ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}

:is(.btn.detail-action-btn, .detail-action-btn) {
  min-height: 36px !important;
  height: 36px !important;
  padding: 0 12px !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center;
  gap: 6px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}

:is(.btn.detail-action-btn, .detail-action-btn) svg {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0;
}

/* Keep contacts table and detail usable on tablets/phones */
@media (max-width: 1024px) {
  .app-shell.contacts-v2-view .pipe-list-table-wrap {
    overflow-x: auto;
  }

  .app-shell.contacts-v2-view .pipe-list-table {
    min-width: 860px;
  }

  .app-shell.contacts-v2-view #detailContent {
    padding: 10px;
  }

  .app-shell.contacts-v2-view .contact-detail-tabs-card .detailSection {
    padding: 16px !important;
  }
}

@media (max-width: 768px) {
  .app-shell.contacts-v2-view #detailContent {
    padding: 8px;
  }

  .app-shell.contacts-v2-view .contact-detail-tabs-card {
    border-radius: 12px !important;
  }

  .app-shell.contacts-v2-view .contact-detail-tabs-card > div:nth-child(1) {
    padding: 0 10px !important;
  }

  .app-shell.contacts-v2-view .contact-detail-tabs-card > div:nth-child(2) {
    padding: 14px !important;
  }

  :is(.btn.detail-action-btn, .detail-action-btn) {
    min-height: 34px !important;
    height: 34px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
  }

  .contact-overview-layout {
    grid-template-columns: 1fr;
  }

  .contact-overview-right {
    order: -1;
  }
}

/* ===========================================
   Premium Contact Deals + Detail Tabs
=========================================== */
.contact-detail-tabs-card--premium {
  padding: 0;
  margin-bottom: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.contact-detail-tabs-header {
  display: flex;
  align-items: center;
  gap: 0;
  border-bottom: 1px solid #e5e7eb;
  padding: 0 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.contact-detail-tabs-nav {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  min-width: 0;
  width: 100%;
}

.contact-detail-tabs-body {
  padding: 24px;
  background: #fff;
}

.contact-overview-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
  gap: 16px;
  align-items: start;
}

.contact-overview-left,
.contact-overview-right {
  min-width: 0;
}

.contact-overview-right .detailSection {
  margin-bottom: 0;
}

.overview-note-composer {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #f8fafc;
}

.overview-note-mode-indicator {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  padding: 6px 10px;
  border-radius: 999px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1e40af;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
}

.overview-note-composer-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.overview-note-composer-actions {
  justify-content: space-between;
}

.overview-note-hint {
  font-size: 11px;
  color: #64748b;
}

.contact-detail-tab-btn {
  padding: 15px 14px;
  font-weight: 600;
  font-size: 14px;
  color: #64748b;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.contact-detail-tab-btn:hover {
  color: #334155;
  background: rgba(15, 23, 42, 0.02);
}

.contact-detail-tab-btn.is-active {
  color: var(--primary-700);
  border-bottom-color: var(--primary-700);
}

.contact-detail-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  margin-left: 6px;
  border-radius: 999px;
  background: var(--primary-100);
  color: var(--primary-700);
  font-size: 11px;
  font-weight: 700;
}

.contact-deals-section {
  background: linear-gradient(180deg, #ffffff 0%, #fafcff 100%);
}

.contact-deals-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0 14px;
}

.contact-deals-summary-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 8px 12px 10px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

.contact-deals-summary-card.metric-pipeline { border-top: 4px solid #10b981; }
.contact-deals-summary-card.metric-weighted { border-top: 4px solid #3b82f6; }
.contact-deals-summary-card.metric-open { border-top: 4px solid #6366f1; }
.contact-deals-summary-card.metric-risk { border-top: 4px solid #ef4444; }

.contact-deals-summary-card.is-risk {
  border-color: #fecaca;
  background: linear-gradient(180deg, #fff7f7 0%, #fff 100%);
}

.contact-deals-summary-k {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
  font-weight: 700;
}

.contact-deals-summary-v {
  margin-top: 4px;
  font-size: 18px;
  line-height: 1.1;
  color: #0f172a;
  font-weight: 800;
}

.contact-deals-list {
  display: grid;
  gap: 10px;
}

.contact-deal-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.contact-deal-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.1);
  border-color: rgba(37, 99, 235, 0.25);
}

.contact-deal-card.risk-high {
  border-color: rgba(220, 38, 38, 0.32);
}

.contact-deal-card.risk-medium {
  border-color: rgba(217, 119, 6, 0.28);
}

body[data-theme="momentum"] .contact-deals-section {
  background: linear-gradient(180deg, var(--surface-1) 0%, var(--surface-2) 100%);
}

body[data-theme="momentum"] .contact-deals-summary-card {
  background: var(--surface-1);
  border-color: var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

body[data-theme="momentum"] .contact-deals-summary-card.metric-pipeline { border-top-color: #0ea5a3; }
body[data-theme="momentum"] .contact-deals-summary-card.metric-weighted { border-top-color: var(--accent, #2563eb); }
body[data-theme="momentum"] .contact-deals-summary-card.metric-open { border-top-color: #7c3aed; }
body[data-theme="momentum"] .contact-deals-summary-card.metric-risk { border-top-color: #ef4444; }

body[data-theme="momentum"] .contact-deals-summary-k {
  color: var(--text-secondary);
}

body[data-theme="momentum"] .contact-deals-summary-v {
  color: var(--text-primary);
  font-size: 20px;
}

body[data-theme="momentum"] .contact-deal-card {
  background: var(--surface-1);
  border-color: var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

body[data-theme="momentum"] .contact-deal-card:hover {
  background: var(--surface-hover);
  border-color: var(--accent, var(--primary));
  box-shadow: var(--shadow-md);
}

body[data-theme="momentum"] .contact-deal-icon {
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--accent-soft, #dbeafe) 0%, #eff6ff 100%);
  color: var(--accent, #2563eb);
}

body[data-theme="momentum"] .contact-deal-stage-pill,
body[data-theme="momentum"] .contact-deal-company-pill,
body[data-theme="momentum"] .contact-deal-meta-pill,
body[data-theme="momentum"] .contact-deal-person-pill {
  background: var(--surface-2);
  color: var(--text-secondary);
  border-color: var(--border-subtle);
}

.contact-deal-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: linear-gradient(135deg, #dbeafe 0%, #ecfeff 100%);
  color: #1e3a8a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact-deal-main {
  min-width: 0;
}

.contact-deal-main-top {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  align-items: center;
}

.contact-deal-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.contact-deal-title {
  font-weight: 800;
  color: #0f172a;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.contact-deal-health-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid transparent;
}

.contact-deal-health-badge.level-low {
  background: #ecfdf5;
  color: #166534;
  border-color: #86efac;
}

.contact-deal-health-badge.level-medium {
  background: #fff7ed;
  color: #9a3412;
  border-color: #fed7aa;
}

.contact-deal-health-badge.level-high {
  background: #fef2f2;
  color: #991b1b;
  border-color: #fecaca;
}

.contact-deal-subtext {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.contact-deal-stage-pill,
.contact-deal-company-pill,
.contact-deal-meta-pill,
.contact-deal-person-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #475569;
}

.contact-deal-stage-pill {
  background: #eef2ff;
  border-color: #c7d2fe;
  color: #4338ca;
}

.contact-deal-person-pill {
  background: #e0e7ff;
  border-color: rgba(55, 48, 163, 0.2);
  color: #3730a3;
}

.contact-deal-metrics {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.contact-deal-metric {
  border: 1px solid #e2e8f0;
  background: #fff;
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.contact-deal-metric .k {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
  font-weight: 700;
}

.contact-deal-metric .v {
  font-size: 13px;
  color: #0f172a;
  font-weight: 700;
}

.contact-deal-footer {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.contact-deal-footer-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.04);
  color: #475569;
  font-size: 11px;
  font-weight: 600;
}

.contact-deal-edit-btn {
  background: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-700) 100%);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  font-weight: 700;
  font-size: 12px;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.35);
}

.contact-deal-edit-btn:hover {
  transform: translateY(-1px);
}

.contact-deals-empty {
  margin-top: 4px;
}

.contact-related-list,
.contact-doc-record-list {
  display: grid;
  gap: 10px;
}

.contact-related-card:hover,
.contact-doc-record-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.1);
  border-color: rgba(37, 99, 235, 0.25);
}

.contact-activity-item {
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.contact-activity-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.1);
  border-color: rgba(37, 99, 235, 0.22);
}

@media (max-width: 1024px) {
  .contact-deals-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .contact-deal-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .contact-detail-tabs-body {
    padding: 14px;
  }

  .contact-deal-main-top {
    align-items: flex-start;
    flex-direction: column;
  }

  .contact-deal-edit-btn {
    width: 100%;
    justify-content: center;
  }

  .contact-deals-summary {
    grid-template-columns: 1fr;
  }

  .contact-deal-metrics {
    grid-template-columns: 1fr;
  }
}

/* ===========================================
   🚀 MOMENTUM - FULL CONTACT DETAIL TABS
   Covers: Overview, Tasks, Deals, Relationships,
   Documents, Invoicing, Projects, Activity
=========================================== */
body[data-theme="momentum"] .contact-detail-tabs-card--premium {
  background: var(--surface-1) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-md) !important;
}

body[data-theme="momentum"] .contact-detail-tabs-header {
  background: linear-gradient(180deg, var(--surface-1) 0%, var(--surface-2) 100%) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
}

body[data-theme="momentum"] .contact-detail-tabs-body {
  background: var(--surface-1) !important;
  color: var(--text-primary) !important;
}

body[data-theme="momentum"] .contact-detail-tab-btn {
  color: var(--text-secondary) !important;
  border-radius: var(--radius-sm) !important;
}

body[data-theme="momentum"] .contact-detail-tab-btn:hover {
  color: var(--text-primary) !important;
  background: var(--surface-hover) !important;
}

body[data-theme="momentum"] .contact-detail-tab-btn.is-active {
  color: var(--primary) !important;
  border-bottom-color: var(--primary) !important;
  background: color-mix(in srgb, var(--accent, #2563eb) 10%, var(--surface-1)) !important;
}

body[data-theme="momentum"] .contact-detail-tab-count {
  background: color-mix(in srgb, var(--accent, #2563eb) 16%, var(--surface-1)) !important;
  color: var(--accent, #2563eb) !important;
}

body[data-theme="momentum"] .detailSection,
body[data-theme="momentum"] .contact-overview-right .detailSection,
body[data-theme="momentum"] .contact-overview-left .detailSection {
  background: var(--surface-1) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-sm) !important;
}

body[data-theme="momentum"] .detailSection h3,
body[data-theme="momentum"] .related-section-title {
  color: var(--text-primary) !important;
  border-bottom-color: var(--border-subtle) !important;
}

body[data-theme="momentum"] .detailRow,
body[data-theme="momentum"] .related-section-header {
  border-color: var(--border-subtle) !important;
}

body[data-theme="momentum"] .related-section-count {
  background: var(--surface-2) !important;
  color: var(--text-secondary) !important;
}

body[data-theme="momentum"] .related-section-btn,
body[data-theme="momentum"] .related-section-empty-btn {
  min-height: 44px !important;
  border-radius: var(--radius-sm) !important;
}

/* Contact tab Add buttons — consistent soft blue (not white) */
body[data-theme="momentum"] .related-section-btn {
  background: #dbeafe !important;
  border-color: #93c5fd !important;
  color: #1e40af !important;
}

body[data-theme="momentum"] .related-section-btn:hover {
  background: #bfdbfe !important;
  border-color: #60a5fa !important;
}

/* Empty-state Add Event button — same soft blue as related-section-btn */
.empty-add-event-btn:hover {
  background: #bfdbfe !important;
  border-color: #60a5fa !important;
}

/* Tasks tab (many rows are inline-styled in JS) */
body[data-theme="momentum"] .contact-tasks-section .task-row {
  background: var(--surface-1) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-sm) !important;
}

body[data-theme="momentum"] .contact-tasks-section .task-row:hover {
  background: var(--surface-hover) !important;
  border-color: var(--accent, #2563eb) !important;
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-1px) !important;
}

body[data-theme="momentum"] .contact-tasks-section .task-row > div:first-child {
  border-radius: var(--radius-sm) !important;
}

/* Deals tab (ensure strong visual separation) */
body[data-theme="momentum"] .contact-deals-summary-card,
body[data-theme="momentum"] .contact-deal-card {
  border-radius: var(--radius-md) !important;
}

/* Documents tab rows are inline-styled in JS */
body[data-theme="momentum"] .contact-doc-record-card {
  background: var(--surface-1) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-sm) !important;
}

body[data-theme="momentum"] .contact-doc-record-card:hover {
  background: var(--surface-hover) !important;
  border-color: var(--accent, #2563eb) !important;
  box-shadow: var(--shadow-md) !important;
}

/* Relationships + Activity */
body[data-theme="momentum"] .related-item-row,
body[data-theme="momentum"] .activityItem.contact-activity-item,
body[data-theme="momentum"] .contact-activity-item {
  background: var(--surface-1) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-sm) !important;
}

body[data-theme="momentum"] .activityItem.contact-activity-item:hover,
body[data-theme="momentum"] .contact-activity-item:hover,
body[data-theme="momentum"] .related-item-row:hover {
  background: var(--surface-hover) !important;
  border-color: var(--accent, #2563eb) !important;
  box-shadow: var(--shadow-md) !important;
}

/* Invoicing / Projects tab fallback table styling */
body[data-theme="momentum"] .contact-detail-tabs-body table,
body[data-theme="momentum"] .contact-detail-tabs-body .pipe-list-table-wrap,
body[data-theme="momentum"] .contact-detail-tabs-body .pipe-list-table {
  background: var(--surface-1) !important;
  border-color: var(--border-subtle) !important;
}

body[data-theme="momentum"] .contact-detail-tabs-body th,
body[data-theme="momentum"] .contact-detail-tabs-body td {
  border-color: var(--border-subtle) !important;
  color: var(--text-primary) !important;
}

/* ===========================================
   📝 Enhanced Note Tracker Styles
=========================================== */

.note-tracker {
  position: relative;
}

.note-composer {
  animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.note-composer-textarea {
  font-family: inherit;
  line-height: 1.5;
}

.note-composer-textarea:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.note-type-btn:active {
  transform: translateY(0) !important;
}

.note-filter-row {
  animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.filter-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.filter-btn:active {
  transform: translateY(0);
}

.enhanced-note-item {
  position: relative;
  overflow: hidden;
}

.enhanced-note-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: currentColor;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.enhanced-note-item:hover::before {
  opacity: 0.3;
}

.note-call .enhanced-note-item::before {
  background: #10b981;
}

.note-email .enhanced-note-item::before {
  background: var(--primary-500);
}

.note-meeting .enhanced-note-item::before {
  background: #8b5cf6;
}

.note-sms .enhanced-note-item::before {
  background: #f59e0b;
}

.note-completed .enhanced-note-item::before {
  background: #059669;
}

.note-note .enhanced-note-item::before {
  background: #6366f1;
}

.activity-list-container {
  max-height: 600px;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Custom scrollbar for activity list */
.activity-list-container::-webkit-scrollbar {
  width: 6px;
}

.activity-list-container::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 3px;
}

.activity-list-container::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

.activity-list-container::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Smooth transitions for note items */
.activityItem.enhanced-note-item {
  animation: slideInUp 0.3s ease-out backwards;
}

.activityItem.enhanced-note-item:nth-child(1) { animation-delay: 0.05s; }
.activityItem.enhanced-note-item:nth-child(2) { animation-delay: 0.1s; }
.activityItem.enhanced-note-item:nth-child(3) { animation-delay: 0.15s; }
.activityItem.enhanced-note-item:nth-child(4) { animation-delay: 0.2s; }
.activityItem.enhanced-note-item:nth-child(5) { animation-delay: 0.25s; }

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Mobile responsive adjustments */
@media (max-width: 600px) {
  .note-type-btn {
    font-size: 10px;
    padding: 3px 8px;
  }
  
  .note-composer {
    padding: 10px;
  }
  
  .activity-list-container {
    max-height: 400px;
  }
}


/* ===========================================
   🎙️ Voice Note Recording Animations
=========================================== */
@keyframes voicePulse {
  0%   { box-shadow: 0 0 0 0 rgba(239,68,68,.6); }
  50%  { box-shadow: 0 0 0 8px rgba(239,68,68,0); }
  100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
}

@keyframes voiceSlide {
  0%   { transform: translateX(-20px); }
  100% { transform: translateX(20px); }
}

@keyframes voiceBar1 {
  0%, 100% { height: 4px; }
  50%      { height: 14px; }
}

@keyframes voiceBar2 {
  0%, 100% { height: 8px; }
  50%      { height: 16px; }
}

@keyframes voiceBar3 {
  0%, 100% { height: 6px; }
  50%      { height: 12px; }
}

/* Email chip: clickable to open composer */
.contact-method-chip[data-email-value] {
  cursor: pointer;
}

/* Saved view editor: custom sort rows */
.saved-view-sort-section {
  display: grid;
  gap: 8px;
}

.saved-view-sort-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.saved-view-sort-list {
  display: grid;
  gap: 8px;
}

.saved-view-sort-empty {
  border: 1px dashed var(--border-light, #d6d9e0);
  border-radius: 8px;
  padding: 10px;
  color: var(--text-tertiary, #64748b);
  font-size: 12px;
  background: var(--surface-1, #fff);
}

.saved-view-sort-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 150px auto;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--border-light, #d6d9e0);
  border-radius: 8px;
  background: var(--surface-1, #fff);
}

.saved-view-sort-row.drag-over {
  border-color: var(--accent, #3b82f6);
  background: var(--accent-soft, #eff6ff);
}

.saved-view-sort-row.dragging {
  opacity: 0.6;
}

.saved-view-sort-grabber {
  cursor: grab;
  user-select: none;
  color: var(--text-tertiary, #64748b);
  font-size: 16px;
  line-height: 1;
  padding: 0 2px;
}

.saved-view-sort-row.dragging .saved-view-sort-grabber {
  cursor: grabbing;
}

/* Inline Primary Contact / Primary Company form — shared polished layout */
.inline-primary-contact-form {
  overflow: visible !important;
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
  padding: 20px !important;
  border-radius: 12px !important;
  border: 1px solid #93c5fd !important;
  margin-top: 8px;
  position: relative;
}
.inline-primary-contact-form .inline-rel-section-label {
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: #475569 !important;
  margin-bottom: 10px !important;
  font-weight: 600 !important;
  margin-top: 0 !important;
}
/* Label + input rows: label left, input right, consistent with rest of form */
.inline-primary-contact-form .label-row {
  display: grid !important;
  grid-template-columns: 140px 1fr !important;
  gap: 12px !important;
  align-items: center !important;
  margin-bottom: 12px !important;
}
.inline-primary-contact-form .label-row:last-of-type {
  margin-bottom: 0 !important;
}
.inline-primary-contact-form .label-text {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #334155 !important;
}
.inline-primary-contact-form .input,
.inline-primary-contact-form input.input {
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
  font-size: 14px !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}
.inline-primary-contact-form .input:focus,
.inline-primary-contact-form input.input:focus {
  border-color: #93c5fd !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15) !important;
}
/* "Or create a new person/company" inner box */
.inline-primary-contact-form #inlineRelNewPersonSection,
.inline-primary-contact-form #inlineRelNewCompanySection {
  background: #fff !important;
  padding: 16px !important;
  border-radius: 10px !important;
  border: 1px dashed #cbd5e1 !important;
  margin-top: 16px !important;
}
.inline-primary-contact-form #inlineRelNewPersonSection > div:first-child,
.inline-primary-contact-form #inlineRelNewCompanySection > div:first-child {
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: #475569 !important;
  margin-bottom: 12px !important;
  font-weight: 600 !important;
}
.inline-primary-contact-form #inlineRelNewPersonSection .label-row,
.inline-primary-contact-form #inlineRelNewCompanySection .label-row {
  margin-bottom: 12px !important;
}
.inline-primary-contact-form #inlineRelNewPersonSection .label-row:last-of-type,
.inline-primary-contact-form #inlineRelNewCompanySection .label-row:last-of-type {
  margin-bottom: 0 !important;
}
/* Hint under "create new company" — must win over generic form `p` / parent styles */
.inline-primary-contact-form p.inline-new-company-note {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  box-sizing: border-box !important;
  margin: 12px 0 0 !important;
  padding: 8px 14px !important;
  max-width: 100% !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  font-style: normal !important;
  color: #0369a1 !important;
  background: #e0f2fe !important;
  background-color: #e0f2fe !important;
  border: 1px solid #7dd3fc !important;
  border-radius: 999px !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06) !important;
}
.inline-primary-contact-form p.inline-new-company-note svg {
  flex-shrink: 0 !important;
  color: #0369a1 !important;
}
/* Saved when you save... note */
.inline-primary-contact-form > div:last-of-type {
  margin-top: 14px !important;
  font-size: 12px !important;
  color: #64748b !important;
  font-style: italic !important;
}

/* Primary contact / primary company card (existing record) — lighter blue, less prominence, match icon menu */
.primary-contact-card.primary-contact-row,
.primary-contact-card.primary-company-card {
  margin-top: 6px;
  padding: 14px 16px;
  background: #f5f9ff;
  border: 1px solid #e0e7ff;
  border-radius: 10px;
}
/* Primary Contact section header — bold and prominent */
.primary-contact-row .contact-field-label.primary-contact-section-label,
.primary-contact-card .contact-field-label {
  font-size: 15px;
  font-weight: 700;
  color: #0369a1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 10px;
}
.primary-contact-card .primary-contact-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  font-size: 14px;
}
.primary-contact-card .primary-contact-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.primary-contact-card .primary-contact-name-pill {
  flex-shrink: 0;
  padding: 8px 16px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid #e0e7ff;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  color: #2563eb;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  transition: background 0.15s, border-color 0.15s;
}
.primary-contact-card .primary-contact-name-pill:hover {
  background: #eef2ff;
  border-color: #c7d2fe;
}
.primary-contact-card .btn-change-primary-contact {
  flex-shrink: 0;
  padding: 4px 0;
  font-size: 12px;
  color: #2563eb;
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.primary-contact-card .btn-change-primary-contact:hover,
.primary-contact-card .btn-change-primary-company:hover {
  color: #1d4ed8;
}
.primary-contact-card .btn-change-primary-company {
  flex-shrink: 0;
  padding: 4px 0;
  font-size: 12px;
  color: #2563eb;
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.primary-contact-card .primary-contact-details {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 20px;
  min-width: 0;
  padding-top: 4px;
  border-top: 1px solid rgba(224, 231, 255, 0.8);
}
.primary-contact-card .primary-contact-detail-item {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.primary-contact-card .primary-contact-detail-label {
  font-size: 12px;
  color: #64748b;
  font-weight: 500;
}
.primary-contact-card .primary-contact-detail-value {
  font-size: 13px;
  color: #0f172a;
}
.primary-contact-card .primary-contact-detail-sep {
  color: #cbd5e1;
  font-weight: 600;
  user-select: none;
}

.inline-rel-search-wrapper {
  overflow: visible !important;
  min-width: 0 !important;
}
.inline-rel-input-shell {
  position: relative;
  width: 100%;
}
.inline-rel-input-shell .input {
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
}
.inline-rel-contact-results {
  position: absolute;
  z-index: 9999;
  background: #fff;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.06);
}
.inline-rel-contact-results .inline-rel-result-item {
  display: block !important;
  padding: 10px 12px !important;
  cursor: pointer;
  border-bottom: 1px solid var(--border-light, #f1f5f9);
  transition: background 0.1s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.inline-rel-contact-results .inline-rel-result-item:hover {
  background: var(--primary-50, #eff6ff) !important;
}
.inline-rel-contact-results .inline-rel-result-item:last-child {
  border-bottom: none;
}
.inline-rel-contact-results .inline-rel-result-name {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary, #0f172a);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.inline-rel-contact-results .inline-rel-result-meta {
  display: block;
  font-size: 12px;
  color: var(--text-secondary, #64748b);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Portal version: lives on body, never affects Primary Contact section layout */
.inline-rel-contact-results-portal {
  position: fixed !important;
  background: #fff !important;
}

/* Inline Primary Contact form: spacing and button polish */
.inline-primary-contact-form .inline-rel-primary-desc {
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-secondary, #64748b);
  max-width: 100%;
}
.inline-primary-contact-form .inline-rel-actions .inline-rel-cancel,
.inline-primary-contact-form .inline-rel-actions .btn-inline-primary-cancel,
.inline-primary-contact-form .inline-rel-actions .btn-inline-primary-company-cancel {
  padding: 8px 16px;
  border-radius: 6px;
  border: 1px solid var(--border, #e2e8f0);
  background: #fff;
  color: var(--text-secondary, #64748b);
  font-weight: 500;
  cursor: pointer;
  font-size: 13px;
}
.inline-primary-contact-form .inline-rel-actions .inline-rel-cancel:hover,
.inline-primary-contact-form .inline-rel-actions .btn-inline-primary-cancel:hover,
.inline-primary-contact-form .inline-rel-actions .btn-inline-primary-company-cancel:hover {
  background: var(--gray-50, #f8fafc);
  border-color: var(--border, #cbd5e1);
}
.inline-primary-contact-form .inline-rel-actions .inline-rel-save,
.inline-primary-contact-form .inline-rel-actions .btn-inline-primary-save,
.inline-primary-contact-form .inline-rel-actions .btn-inline-primary-company-save {
  padding: 8px 16px;
  border-radius: 6px;
  background: #059669;
  color: #fff;
  border: none;
  font-weight: 600;
  cursor: pointer;
  font-size: 13px;
}
.inline-primary-contact-form .inline-rel-actions .inline-rel-save:hover,
.inline-primary-contact-form .inline-rel-actions .btn-inline-primary-save:hover,
.inline-primary-contact-form .inline-rel-actions .btn-inline-primary-company-save:hover {
  background: #047857;
}

/* ── Editor Document Navigation Bars (HoneyBook-style) ─────────────────────── */
#editorDocNavBar,
#editorDocNavBarBottom {
  flex-shrink: 0;
}
.editor-doc-nav-host--in-page {
  display: block;
  position: sticky;
  bottom: 0;
  z-index: 8;
  margin: 18px 0 0 0;
}
.print-layout-mode .editor-doc-nav-host--in-page {
  margin-top: 24px;
}
.print-layout-mode #printLayoutBreakMarkers {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 11;
}
.print-layout-mode #printLayoutPageChrome {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}
.print-layout-mode .print-page-chrome-card {
  position: absolute;
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #cfd8e3;
  box-shadow: 0 10px 28px rgba(15,23,42,0.18), 0 1px 3px rgba(15,23,42,0.1);
  border-radius: 2px;
  box-sizing: border-box;
}
.print-layout-mode .print-page-break-marker {
  position: absolute;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  pointer-events: none;
}
.print-layout-mode .print-page-break-line {
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg, #2563eb 0%, #3b82f6 45%, #60a5fa 100%);
  box-shadow: 0 0 0 1px rgba(59,130,246,0.24);
}
.print-layout-mode #printLayoutPageNavOverlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 12;
}
.print-layout-mode .print-page-nav-slot {
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
}
.print-layout-mode .print-page-nav-slot--top {
  transform: translateY(0);
}
.print-layout-mode .print-page-nav-slot .editor-doc-nav-bar {
  background: rgba(255,255,255,0.98);
  border-color: #bfdbfe;
  box-shadow: 0 2px 8px rgba(37,99,235,0.12);
}

/* Web / Portal: named section title above the first block of each section (editor canvas) */
.print-layout-mode.doc-mode-web-longform .ql-editor .line-items-embed.web-portal-section-header {
  margin-top: 28px !important;
}
.print-layout-mode.doc-mode-web-longform .ql-editor .line-items-embed.web-portal-section-header.web-portal-section-header--first {
  margin-top: 4px !important;
}
.print-layout-mode.doc-mode-web-longform .ql-editor .line-items-embed.web-portal-section-header::before {
  content: attr(data-web-portal-section);
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #475569;
  margin: 0 0 10px 0;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--wps-accent, #e2e8f0);
  pointer-events: none;
}

.print-layout-mode .ql-editor .line-items-embed.block-selected {
  z-index: 30;
}
.print-layout-mode .line-items-block-toolbar,
.print-layout-mode .line-items-label,
.print-layout-mode .line-items-insert-circle {
  z-index: 40;
}

.editor-doc-nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 16px;
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
  min-height: 46px;
  box-sizing: border-box;
  user-select: none;
}

.editor-doc-nav-bar--bottom {
  border-top: 1px solid #e2e8f0;
  border-bottom: none;
}

/* Web/Portal (HoneyBook-style): primary Next button */
.editor-doc-nav-bar--honeybook-web .editor-doc-nav-btn--primary:not(:disabled) {
  background: #2563eb !important;
  color: #fff !important;
  border-color: #1d4ed8 !important;
  font-weight: 700 !important;
  min-width: 96px;
  justify-content: center !important;
}
.editor-doc-nav-bar--honeybook-web .editor-doc-nav-btn--primary:not(:disabled):hover {
  background: #1d4ed8 !important;
  border-color: #1e40af !important;
  color: #fff !important;
}
.editor-doc-nav-bar--honeybook-web .editor-doc-nav-btn--prev:not(:disabled) {
  min-width: 104px;
}

.editor-doc-nav-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  background: transparent;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  min-width: 90px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.editor-doc-nav-btn:hover:not(:disabled) {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #1e293b;
}
.editor-doc-nav-btn:disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}
.editor-doc-nav-btn--prev { justify-content: flex-start; }
.editor-doc-nav-btn--next { justify-content: flex-end; }

.editor-doc-nav-arrow {
  font-size: 14px;
  flex-shrink: 0;
}
.editor-doc-nav-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 120px;
}

.editor-doc-nav-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.editor-doc-nav-section-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  white-space: nowrap;
  transition: background 0.12s;
}
.editor-doc-nav-section-btn:hover {
  background: #f1f5f9;
}
.editor-doc-nav-section-name {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  white-space: nowrap;
}
.editor-doc-nav-chevron {
  font-size: 10px;
  color: #94a3b8;
}

.editor-doc-nav-page-counter {
  font-size: 10px;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: 0.07em;
}

.editor-doc-nav-dropdown-wrap {
  position: relative;
}

.editor-doc-nav-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(15,23,42,0.14);
  z-index: 200;
  min-width: 170px;
  overflow: hidden;
}

.editor-doc-nav-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 14px;
  background: transparent;
  border: none;
  border-left: 3px solid transparent;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: #374151;
  text-align: left;
  box-sizing: border-box;
  transition: background 0.1s;
}
.editor-doc-nav-dropdown-item:hover,
.editor-doc-nav-dropdown-item.active {
  background: #f8fafc;
  color: #1e293b;
}

.editor-doc-nav-dropdown-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #cbd5e1;
  flex-shrink: 0;
}

/* Section start indicator line in editor for navigation-enabled blocks */
.ql-editor .line-items-embed[data-show-in-nav="1"]::before {
  content: attr(data-navigation-label);
  display: block;
  font-size: 10px;
  font-weight: 800;
  color: #3b82f6;
  padding: 5px 12px;
  background: #eff6ff;
  border-top: 2px solid #3b82f6;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  pointer-events: none;
}

/* Section dot in editor nav bar */
.editor-doc-nav-section-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}

/* ── Nav Page Picker Modal ─────────────────────────────────────────────────── */
#navPagePickerOverlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
}
#navPagePickerOverlay.npp--visible {
  opacity: 1;
}

.npp-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 15, 30, 0.62);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.npp-modal {
  position: relative;
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 32px 100px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255,255,255,0.08);
  padding: 0;
  max-width: 680px;
  width: 92vw;
  max-height: 80vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform: scale(0.9) translateY(12px);
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#navPagePickerOverlay.npp--visible .npp-modal {
  transform: scale(1) translateY(0);
}

.npp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 24px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%);
  flex-shrink: 0;
}

.npp-header__left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.npp-header__icon {
  font-size: 18px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.1);
  border-radius: 10px;
  flex-shrink: 0;
}

.npp-header__title {
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
}

.npp-header__sub {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255,255,255,0.5);
  margin-top: 2px;
}

.npp-close {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.75);
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.npp-close:hover {
  background: rgba(255,255,255,0.2);
  color: #fff;
}

.npp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 14px;
  padding: 24px;
  overflow-y: auto;
}

.npp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 22px 14px 16px;
  border: 2px solid #e2e8f0;
  border-radius: 16px;
  background: #f8fafc;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.15s, box-shadow 0.15s;
  text-align: center;
  font-family: inherit;
  overflow: hidden;
}
.npp-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--npp-color, #3b82f6);
  opacity: 0.45;
  transition: opacity 0.15s, height 0.15s;
}
.npp-card:hover {
  border-color: var(--npp-color, #3b82f6);
  background: #fff;
  transform: translateY(-3px);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0,0,0,0.06);
}
.npp-card:hover::before {
  height: 5px;
  opacity: 1;
}
.npp-card--active {
  border-color: var(--npp-color, #3b82f6);
  background: #fff;
}
.npp-card--active::before {
  height: 5px;
  opacity: 1;
}

.npp-card__badge {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--npp-color, #3b82f6);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.18s, transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.npp-card--active .npp-card__badge {
  opacity: 1;
  transform: scale(1);
}

.npp-card__check {
  width: 14px;
  height: 14px;
}

.npp-card__num {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--npp-color, #3b82f6);
  color: #fff;
  font-size: 21px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: -0.02em;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 4px 14px rgba(0,0,0,0.15);
}
.npp-card:hover .npp-card__num {
  transform: scale(1.1);
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}

.npp-card__label {
  font-size: 12px;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.35;
  word-break: break-word;
}

.npp-card__current {
  font-size: 10px;
  font-weight: 700;
  color: var(--npp-color, #3b82f6);
  border: 1px solid currentColor;
  border-radius: 20px;
  padding: 2px 8px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.75;
}

/* ── Print Layout (Editable Paper View) ────────────────────────────────────── */

/* Grey desk/paper-surrounding background */
.print-layout-mode #documentCanvasViewport {
  background: #dde1e7 !important;
}

/* Pull the editor toolbar up closer to the composer header.
   Keep side/bottom spacing intact for page chrome and scroll comfort. */
#composerModal.print-layout-mode #documentCanvasViewport {
  padding: 0 24px 48px !important;
  box-sizing: border-box !important;
}

/* Let the Quill container + editor expand to full content height so the
   outer #documentCanvasViewport handles all scrolling (no inner-page scroll). */
.print-layout-mode .ql-container.ql-snow {
  height: auto !important;
  overflow: visible !important;
}
.print-layout-mode .ql-editor {
  height: auto !important;
  min-height: 11in !important;
  overflow: visible !important;
  /* First block: reserve nav height only when 2+ pages (--doc-nav-height set to 46px); single page uses 0. */
  padding-top: calc(var(--doc-nav-height, 0px) + var(--doc-margin-top, 48px)) !important;
}

/* Web/Portal: continuous doc — do not force 11in min-height (overrides rule above). */
.print-layout-mode.doc-mode-web-longform .ql-editor {
  min-height: auto !important;
  padding-left: var(--doc-margin-left, 48px) !important;
  padding-right: var(--doc-margin-right, 48px) !important;
}

/* Web/Portal: HoneyBook bar must sit above content and stay visible while scrolling the canvas */
.print-layout-mode.doc-mode-web-longform #editorDocNavBar {
  position: sticky;
  top: 0;
  z-index: 12;
  background: #ffffff;
  box-shadow: 0 1px 0 #e2e8f0;
}

/* Web/Portal true-WYSIWYG: remove gray desk + outer block chrome in editor canvas. */
.print-layout-mode.doc-mode-web-longform #documentCanvasViewport {
  background: #ffffff !important;
}
.print-layout-mode.doc-mode-web-longform .ql-editor .line-items-embed {
  border-color: #bfdbfe !important;
  box-shadow: none !important;
  background: transparent !important;
  outline: none !important;
  padding: 0 !important;
}
.print-layout-mode.doc-mode-web-longform .ql-editor .line-items-embed.block-selected {
  border-color: #93c5fd !important;
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.28) !important;
  outline: none !important;
}
.print-layout-mode.doc-mode-web-longform .ql-editor .line-items-embed .text-block-static,
.print-layout-mode.doc-mode-web-longform .ql-editor .line-items-embed .line-items-static,
.print-layout-mode.doc-mode-web-longform .ql-editor .line-items-embed .invoice-header-static,
.print-layout-mode.doc-mode-web-longform .ql-editor .line-items-embed .signature-block-static,
.print-layout-mode.doc-mode-web-longform .ql-editor .line-items-embed .payment-block-static {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

/* Web/Portal true-WYSIWYG: stack blocks flush with no vertical gaps. */
.print-layout-mode.doc-mode-web-longform .ql-editor .line-items-embed {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.print-layout-mode.doc-mode-web-longform .ql-editor .line-items-embed + .line-items-embed {
  margin-top: 0 !important;
}
.print-layout-mode.doc-mode-web-longform .ql-editor .line-items-embed .line-items-preview {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}
.print-layout-mode.doc-mode-web-longform .ql-editor .line-items-embed[data-field-type="text_block"][data-text-border-style="none"] {
  border-width: 0 !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.print-layout-mode.doc-mode-web-longform .ql-editor .line-items-embed[data-field-type="text_block"][data-text-border-style="none"].block-selected {
  border-width: 1px !important;
  border-color: #93c5fd !important;
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.28) !important;
}
.print-layout-mode.doc-mode-web-longform .ql-editor > .line-items-embed + p,
.print-layout-mode.doc-mode-web-longform .ql-editor > p:has(+ .line-items-embed),
.print-layout-mode.doc-mode-web-longform .ql-editor > p:has(+ p + .line-items-embed) {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  line-height: 0 !important;
  font-size: 0 !important;
  border: 0 !important;
}

/* Standard print layout: keep parity with web/portal block rendering without
   changing any web/portal selectors. */
.print-layout-mode:not(.doc-mode-web-longform) .ql-editor {
  padding-left: var(--doc-margin-left, 48px) !important;
  padding-right: var(--doc-margin-right, 48px) !important;
}
.print-layout-mode:not(.doc-mode-web-longform) .ql-editor .line-items-embed {
  border-width: 0 !important;
  border-color: transparent !important;
  box-shadow: none !important;
  background: transparent !important;
  outline: none !important;
  padding: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.print-layout-mode:not(.doc-mode-web-longform) .ql-editor .line-items-embed + .line-items-embed {
  margin-top: 0 !important;
}
.print-layout-mode:not(.doc-mode-web-longform) .ql-editor .line-items-embed .line-items-preview,
.print-layout-mode:not(.doc-mode-web-longform) .ql-editor .line-items-embed .text-block-static,
.print-layout-mode:not(.doc-mode-web-longform) .ql-editor .line-items-embed .line-items-static,
.print-layout-mode:not(.doc-mode-web-longform) .ql-editor .line-items-embed .invoice-header-static,
.print-layout-mode:not(.doc-mode-web-longform) .ql-editor .line-items-embed .signature-block-static,
.print-layout-mode:not(.doc-mode-web-longform) .ql-editor .line-items-embed .payment-block-static {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}
.print-layout-mode:not(.doc-mode-web-longform) .ql-editor > .line-items-embed + p,
.print-layout-mode:not(.doc-mode-web-longform) .ql-editor > p:has(+ .line-items-embed),
.print-layout-mode:not(.doc-mode-web-longform) .ql-editor > p:has(+ p + .line-items-embed) {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  line-height: 0 !important;
  font-size: 0 !important;
  border: 0 !important;
}
/* Keep selected-state blue edge visible in standard mode too. */
.print-layout-mode:not(.doc-mode-web-longform) .ql-editor .line-items-embed.block-selected {
  border-width: 1px !important;
  border-color: #93c5fd !important;
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.28) !important;
}

/* Dim block chrome (type badge, drag handle, action buttons) in print layout
   so the view looks clean — they reappear on hover so you can still interact. */
.print-layout-mode .line-items-embed .block-type-label,
.print-layout-mode .line-items-embed .block-drag-handle,
.print-layout-mode .line-items-embed .block-hover-toolbar,
.print-layout-mode .line-items-embed .block-corner-actions {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
}
.print-layout-mode .line-items-embed:hover .block-type-label,
.print-layout-mode .line-items-embed:hover .block-drag-handle,
.print-layout-mode .line-items-embed:hover .block-hover-toolbar,
.print-layout-mode .line-items-embed:hover .block-corner-actions {
  opacity: 1;
  pointer-events: auto;
}

/* Keep the insert (+) circle visible on hover even in print layout */
.print-layout-mode .line-items-insert-circle {
  opacity: 0;
  transition: opacity 0.15s;
}
.print-layout-mode .line-items-embed:hover + .line-items-insert-circle,
.print-layout-mode .line-items-insert-circle:hover {
  opacity: 1;
}

/* Hide media overlays in print layout, but keep empty placeholders clickable.
   These rules target elements in the print preview viewport.
   The overrides below re-enable them inside the Quill editor (.ql-editor)
   since the editor is always in print-layout-mode but should still allow
   image/video editing via hover overlays and change buttons. */
.print-layout-mode .img-adj-overlay,
.print-layout-mode button[data-action="pick-media"],
.print-layout-mode button[data-action="pick-video"],
.print-layout-mode [data-action="edit-image-adj"],
.print-layout-mode [data-action="edit-video-adj"],
.print-layout-mode button[data-action="pick-icon"],
.print-layout-mode [data-action="pick-approval-item"] button,
.print-layout-mode [data-action="remove-approval-item"] {
  display: none !important;
}
/* Re-enable image/video controls inside the Quill editor blot previews.
   These elements are only rendered in editable mode (not in the print-preview
   viewport), so the rule above was incorrectly hiding them from the editor UI. */
.print-layout-mode .ql-editor .img-adj-overlay {
  display: flex !important;
}
/* ── Web Section Groups (HoneyBook-style Pages panel) ───────────────────── */
.web-section-group {
  border: 1px solid #dbe5f2;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}
.web-section-group--unassigned {
  border-style: dashed;
  background: #fafafa;
}
.web-section-group__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: #f8fafc;
  border-bottom: 1px solid #e8eef6;
}
.web-section-group--unassigned .web-section-group__header {
  background: #f5f5f5;
  border-bottom-color: #ececec;
}
.web-section-group__blocks {
  display: grid;
  gap: 0;
  min-height: 36px;
  transition: background-color 120ms ease, outline-color 120ms ease;
}
.web-section-group__blocks--drop-target {
  outline: 2px dashed #60a5fa;
  outline-offset: -2px;
  background: #eff6ff;
}
.web-section-block-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px 7px 14px;
  border-bottom: 1px solid #f1f5f9;
  background: #fff;
}
.web-section-block-row:last-child {
  border-bottom: none;
}
.web-sec-swatch {
  transition: background 0.15s, border-color 0.15s;
}

/* ── End Web Section Groups ─────────────────────────────────────────────── */
.print-layout-mode .ql-editor [data-action="edit-image-adj"],
.print-layout-mode .ql-editor [data-action="edit-video-adj"] {
  display: flex !important;
}
.print-layout-mode .ql-editor button[data-action="pick-media"],
.print-layout-mode .ql-editor button[data-action="pick-video"],
.print-layout-mode .ql-editor button[data-action="pick-icon"] {
  display: block !important;
}
.print-layout-mode .ql-editor [data-action="pick-approval-item"] button,
.print-layout-mode .ql-editor [data-action="remove-approval-item"] {
  display: block !important;
}

/* Keep toolbar space fully available for formatting controls.
   This blocks any decorative pseudo-labels from consuming horizontal room. */
.print-layout-mode .ql-toolbar.ql-snow::before,
.print-layout-mode .ql-toolbar.ql-snow::after {
  content: none !important;
  display: none !important;
}