/* ===========================================
   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 {
  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: #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;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
}

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

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

.app-header.compactHeader {
  padding: 10px 16px;
}

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

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

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


/* 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: 20px;
  background: var(--border-light);
  margin: 0 6px;
  flex-shrink: 0;
}

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

.menuBtn-icon {
  font-size: 16px;
  line-height: 1;
}

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

.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;
}

/* 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: 8px;
}

.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);
  outline-offset: 2px;
}

.header-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 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
=========================================== */
@media (max-width: 900px) {
  .header-nav {
    margin: 0 8px;
    gap: 4px;
  }
  
  /* 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 */
.filters-modern {
  background: linear-gradient(135deg, #ffffff 0%, #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, #f1f5f9 0%, #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, #e2e8f0 0%, #cbd5e1 100%);
}

.filter-search-input:focus {
  outline: none;
  border-color: var(--primary-500);
  background: white;
  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;
  
  /* 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: #1d4ed8 !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: hidden !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: #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: #4f46e5 !important;
  color: #ffffff !important;
}

.filter-toggle-btn.filtered {
  background-color: #dbeafe !important;
  color: #1d4ed8 !important;
  box-shadow: 0 0 0 2px #93c5fd inset !important;
}

.filter-toggle-btn.filtered .filter-badge {
  background: #1d4ed8 !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 2px #dbeafe !important;
}

/* Filter Badge */
.filter-badge {
  position: absolute;
  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: white;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.filter-clear-btn:hover {
  background: #fef2f2;
  border-color: #fecaca;
  color: #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, #3b82f6 0%, #2563eb 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;
}

/* 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 #fecaca;
  border-radius: 6px;
  background: #fef2f2;
  font-size: 12px;
  font-weight: 600;
  color: #dc2626;
  cursor: pointer;
  transition: all 0.2s ease;
}

.filter-clear-all-btn:hover {
  background: #fee2e2;
  border-color: #fca5a5;
}

/* ===========================================
   🎯 FILTER PANEL V3 - Modern Clean Design
=========================================== */
.filter-panel-v3 {
  width: min(720px, 94vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: #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: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
  transition: all 0.15s ease;
  min-width: 180px;
}

.saved-filters-trigger:hover {
  background: #f9fafb;
  border-color: #d1d5db;
}

.saved-filters-trigger.active {
  background: #3b82f6;
  border-color: #2563eb;
  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: white;
  border: 1px solid #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: #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: #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: #f3f4f6;
}

.saved-filter-item.selected {
  background: #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: #1f2937;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.saved-filter-meta {
  font-size: 11px;
  color: #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: #6b7280;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.saved-filter-action-btn:hover {
  background: #e5e7eb;
  color: #1f2937;
}

.saved-filter-action-btn.delete:hover {
  background: #fef2f2;
  color: #dc2626;
}

.saved-filters-divider {
  height: 1px;
  background: #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: #374151;
  cursor: pointer;
  transition: background 0.15s ease;
  text-align: left;
}

.saved-filters-action:hover {
  background: #f3f4f6;
}

.saved-filters-action svg {
  color: #6b7280;
}

/* Active Filter Pill */
.saved-filters-active {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 6px 12px;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 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: #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: #eff6ff; border-color: #bfdbfe; }
.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) {
  .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: 9px !important;
    font-size: 0 !important;
    gap: 0;
  }
  
  /* Shorten button text on mobile - show only "+" */
  .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;
}

.gmail-tabs {
  display: flex;
  justify-content: flex-start;
  gap: 0;
  background: 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: #5f6368;
  background: #f8f9fa;
  border: none;
  border-right: 1px solid var(--border-light);
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  flex: 0 0 auto; /* Default: stay at natural width */
}

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

/* Rounded corners for People (top-left) and Companies (top-right) */
.gmail-tab[data-tab="people"] {
  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: #e8eaed;
  color: #202124;
}

.gmail-tab.active {
  background: white;
  color: #1a73e8;
  height: 43px;
}

.gmail-tab.active::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 3px;
  height: 3px;
  background: #1a73e8;
  border-radius: 3px 3px 0 0;
  z-index: 10;
}

.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: #e8eaed;
  color: #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: #e8f0fe;
  color: #1a73e8;
}

/* 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;
}

/* 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);
}

.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;
  gap: 14px;
  overflow: hidden;
}

/* 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;
  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;
  background: white;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all 0.15s;
}

.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);
}

.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;
}

.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,
.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 */
}

/* 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 .analyticsPane,
.app-shell.full-width-view .reportsPane,
.app-shell.full-width-view .dealDoctorPane {
  max-height: calc(100vh - 60px); /* Header only, no filters */
}

/* ===========================================
   🔘 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;
}

/* ===========================================
   📝 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, #3b82f6 0%, #2563eb 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, #2563eb 0%, #1d4ed8 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: 6px;
}

.detail-multi-field-entry {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  background: var(--bg-light);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  position: relative;
  min-width: 320px;
}

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

.detail-multi-type-select {
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--border-light);
  border-radius: 4px;
  background: white;
  color: var(--text-secondary);
  min-width: 90px;
}

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

.detail-multi-value-input {
  width: 100% !important;
  min-width: 280px;
  padding: 10px 12px !important;
  font-size: 14px !important;
  border: 1px solid var(--border-light) !important;
  border-radius: 6px !important;
  background: white !important;
}

.detail-multi-value-input:focus {
  border-color: var(--primary-400) !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1) !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: 280px;
  padding: 10px 12px !important;
  font-size: 14px !important;
  border: 1px solid var(--border-light) !important;
  border-radius: 6px !important;
  background: white !important;
}

.detail-address-input:focus {
  border-color: var(--primary-400) !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1) !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 */
.modal.modal-fullscreen {
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  border-radius: 0;
  margin: 0;
}

.modal.modal-fullscreen .modalBody {
  max-height: calc(100vh - 130px) !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: #3b82f6 !important;
  color: #ffffff !important;
  border-left: 3px solid #2563eb;
  padding-left: 17px;
}

.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;
}

/* 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-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 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: 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-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;
  overflow-y: auto;
  flex: 1;
  min-height: 0; /* CRITICAL: allows flexbox scrolling to work properly */
}

.modalFoot {
  padding: 10px 16px;
  border-top: 1px solid var(--border-light);
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  background: var(--gray-50);
  flex-shrink: 0;
}

.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);
}

/* ===========================================
   ✨ 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;
}

/* ===========================================
   🧠 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: #1d4ed8;
  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: #2563eb !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: #2563eb !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: #2563eb;
  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 #3b82f6 !important;
}

.field-row-target-top {
  border-top: 3px solid #3b82f6 !important;
  background: linear-gradient(to bottom, rgba(59, 130, 246, 0.05) 0%, transparent 100%) !important;
}

.field-row-target-bottom {
  border-bottom: 3px solid #3b82f6 !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: #3b82f6;
}

.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: #3b82f6;
  color: #2563eb;
  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: #2563eb;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

/* 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: #2563eb;
  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: #2563eb;
  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: #2563eb;
  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;
  border-left: none !important;
  padding-left: 0 !important;
  margin-left: 0 !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;
}

/* ===========================================
   🔘 FULLSCREEN QUICK ADD BUTTONS - PERFECT CIRCLES
   Fix icon centering once and for all
=========================================== */
.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 {
  /* Reset everything */
  all: unset !important;
  
  /* Box model */
  box-sizing: border-box !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  padding: 0 !important;
  margin: 0 3px !important;
  
  /* Flexbox centering */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  
  /* Visual */
  background: white !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  
  /* Reset text/line-height */
  font-size: 0 !important;
  line-height: 0 !important;
  text-align: center !important;
  vertical-align: middle !important;
  
  /* Animation */
  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 {
  /* Reset SVG */
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  
  /* Remove any margin/padding */
  margin: 0 !important;
  padding: 0 !important;
  
  /* Ensure proper display */
  display: block !important;
  vertical-align: middle !important;
  
  /* Icon color */
  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: #f3f4f6 !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15) !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: #2563eb !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;
  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 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;
}

/* ===== FORCE PRIMARY NAV TABS TO 17px ===== */
#menuAnalyticsBtn,
#menuAnalyticsBtn *,
#menuContactsBtn,
#menuContactsBtn *,
#menuPipelineBtn,
#menuPipelineBtn *,
#menuProjectsBtn,
#menuProjectsBtn *,
#menuCalendarBtn,
#menuCalendarBtn *,
#menuReportsBtn,
#menuReportsBtn * {
  font-size: 17px !important;
  font-weight: 500 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

#menuAnalyticsBtn,
#menuContactsBtn,
#menuPipelineBtn,
#menuProjectsBtn,
#menuCalendarBtn,
#menuReportsBtn {
  color: var(--text-secondary) !important;
  letter-spacing: 0 !important;
  padding: 6px 10px !important;
  border-radius: 8px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Match font size across all main menu button labels */
#menuAnalyticsBtn > span.menuBtn-label,
#menuContactsBtn > span.menuBtn-label,
#menuPipelineBtn > span.menuBtn-label,
#menuProjectsBtn > span.menuBtn-label,
#menuCalendarBtn > span.menuBtn-label,
#menuReportsBtn > span.menuBtn-label {
  font-size: 17px !important;
}

#menuAnalyticsBtn:hover,
#menuContactsBtn:hover,
#menuPipelineBtn:hover,
#menuProjectsBtn:hover,
#menuCalendarBtn:hover,
#menuReportsBtn:hover {
  background: var(--gray-200) !important;
  border-color: transparent !important;
}

#menuAnalyticsBtn.active,
#menuAnalyticsBtn.active *,
#menuContactsBtn.active,
#menuContactsBtn.active *,
#menuPipelineBtn.active,
#menuPipelineBtn.active *,
#menuProjectsBtn.active,
#menuProjectsBtn.active *,
#menuCalendarBtn.active,
#menuCalendarBtn.active *,
#menuReportsBtn.active,
#menuReportsBtn.active * {
  font-size: 17px !important;
  font-weight: 700 !important;
}

#menuAnalyticsBtn.active,
#menuContactsBtn.active,
#menuPipelineBtn.active,
#menuProjectsBtn.active,
#menuCalendarBtn.active,
#menuReportsBtn.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;
}

/* ===== UTILITY NAV TABS ===== */
#menuLeadsBtn,
#menuFormsBtn,
#menuTemplatesBtn,
#menuToolsBtn {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--text-secondary) !important;
  letter-spacing: 0 !important;
  padding: 6px 10px !important;
  border-radius: 8px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

#menuLeadsBtn:hover,
#menuFormsBtn:hover,
#menuTemplatesBtn:hover,
#menuToolsBtn:hover {
  background: var(--gray-200) !important;
  border-color: transparent !important;
}

#menuLeadsBtn.active,
#menuFormsBtn.active,
#menuTemplatesBtn.active,
#menuToolsBtn.active {
  font-weight: 700 !important;
  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 can scroll internally and fill height */
#calendarWrap {
  min-height: 0;
}

#calendarWrap #calendarPanel {
  height: 100%;
  min-height: 0;
}

#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;
}

#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;
}

#calendarWrap #calendarPanel .cal-create-btn {
  height: 30px;
  padding: 0 12px;
  border-radius: 10px;
}

#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 (the only view with stable class names) */
#calendarWrap .calMonthGrid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  padding: 8px;
  margin: 0 !important; /* calendar-ui sets margin inline; keep crisp */
}

#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: 96px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  overflow: hidden;
}

#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;
}

#calendarWrap .calMiniItem {
  margin-top: 4px;
  padding: 4px 6px;
  border-radius: 10px;
  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: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

#calendarWrap .calMiniItem[data-cal="tasks"] {
  border-left: 4px solid #16a34a;
}

#calendarWrap .calMiniItem[data-cal="events"] {
  border-left: 4px solid #2563eb;
}

#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 .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: #3b82f6; 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, #3b82f6 0%, #2563eb 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: #3b82f6;
  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="projects"] .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="projects"] #projectsWrap {
  grid-column: 1 / -1;
  min-width: 0;
}

/* Projects pane full width */
#projectsWrap {
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0;
  min-height: 0; /* critical so inner scroll containers can work inside the mainSplit grid */
}

#projectsWrap .pipe-board-list {
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0;
}

#projectsWrap .filters-modern {
  width: 100%;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
  margin-top: 13px;
}

#projectsWrap .pipe-list-table-wrap {
  width: 100%;
  max-width: 100%;
  margin: 0;
  border-radius: 0;
  border-left: none;
  border-right: none;
}

/* 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" */
}

/* 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;
}

/* =============================
   📊 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, #3b82f6 0%, #1d4ed8 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, #3b82f6 0%, #1d4ed8 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 (matches Document Composer behavior) */
.modal.is-maximized {
  width: min(1200px, 98vw) !important;
  height: 94vh !important;
  max-height: 94vh !important;
}

.modal.is-maximized .modalBody {
  max-height: none !important;
}

.modal.is-maximized #templateEditorQuill {
  min-height: 52vh;
}

/* =============================
   ⛶ 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 centers content */
.app-shell.detail-full .detailHeader > .metaWrap {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* 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);
}

/* Prevent overlap with very long names */
.app-shell.detail-full .detailHeader .contactName {
  padding-right: 120px;
}

/* Top row: Name + Star + Pills - centered */
.app-shell.detail-full .detailHeader > div > div:first-child {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  max-width: 100%;
}

/* Contact name and star container - centered */
.app-shell.detail-full .detailHeader > div > div:first-child > div:first-child {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* Pills container - centered */
.app-shell.detail-full .detailHeader .contact-summary-pills {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

/* 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 - centered */
.app-shell.detail-full .detailHeader #detailHeaderActions {
  padding-top: 6px;
  border-top: 1px solid var(--border-light);
  margin-top: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  max-width: 100%;
}

/* 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: 48px;
  margin-bottom: 16px;
}

.wizard-content h2 {
  font-size: 22px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 8px 0;
}

.wizard-subtitle {
  font-size: 14px;
  color: #6b7280;
  margin: 0 0 20px 0;
}

.wizard-subtitle strong {
  color: #111827;
}

.wizard-hint {
  font-size: 13px;
  color: #9ca3af;
  margin-top: 16px;
}

/* Lead Card */
.wizard-lead-card {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
  text-align: left;
}

.wizard-lead-field {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #e2e8f0;
}

.wizard-lead-field:last-child {
  border-bottom: none;
}

.wizard-lead-field .label {
  font-size: 13px;
  color: #6b7280;
}

.wizard-lead-field .value {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  max-width: 60%;
  text-align: right;
  word-break: break-word;
}

.wizard-lead-field.additional {
  background: rgba(99, 102, 241, 0.05);
  margin: 4px -8px;
  padding: 10px 8px;
  border-radius: 6px;
}

.wizard-mapping-badge {
  font-size: 10px;
  font-weight: 600;
  color: #6366f1;
  background: #eef2ff;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 8px;
  white-space: nowrap;
}

.wizard-mapping-info {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border: 1px solid #f59e0b;
  border-radius: 10px;
  margin: 16px 0;
  font-size: 13px;
  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: #1d4ed8;
  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: #2563eb;
}

.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: 24px;
  padding-top: 20px;
  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: wrap;
  padding: 12px 16px;
  background: var(--gray-50);
  border-radius: 12px;
  border: 1px solid var(--border-light);
}

.pipe-list-search {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  min-width: 200px;
  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 {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  background: white;
  cursor: pointer;
}

.pipe-list-stale-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
}

.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;
}

.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;
}

.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: var(--gray-50);
}

.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, #3b82f6 0%, #2563eb 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, #2563eb 0%, #1d4ed8 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: 12px;
}

.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-text {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-align: center;
}

.cc-onboarding-items {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cc-onboarding-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--gray-50);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-size: 13px;
}

.cc-onboarding-item:hover:not(.completed) {
  background: var(--primary-50);
  transform: translateX(4px);
}

.cc-onboarding-item.completed {
  background: var(--green-50);
  opacity: 0.7;
}

.cc-onboarding-item.completed .cc-onboarding-label {
  text-decoration: line-through;
  color: var(--text-tertiary);
}

.cc-onboarding-check {
  font-size: 14px;
  flex-shrink: 0;
}

.cc-onboarding-icon {
  font-size: 16px;
  flex-shrink: 0;
}

.cc-onboarding-label {
  flex: 1;
  font-weight: 500;
  color: var(--text-primary);
}

.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 {
  text-align: center;
  padding: 12px;
  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-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;
}

.cc-onboarding-dismiss:hover {
  color: var(--text-secondary);
}

/* 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: #3b82f6;
}

.deal-contact-info-item[href^="mailto:"]:hover {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
}

/* ===========================================
   💼 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: #1d4ed8;
  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: #3b82f6;
  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: #3b82f6;
  color: #1e40af;
}
.task-source-pill--link {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #0f172a;
}
.task-source-pill--link:hover {
  border-color: #3b82f6;
  color: #1d4ed8;
}

/* 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: #3b82f6;
  color: #2563eb;
}

/* 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: #2563eb;
}

/* 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: 6px;
}

.related-section-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  background: var(--primary-50);
  border: 1px solid var(--primary-200);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--primary-700);
  cursor: pointer;
  transition: all 0.15s ease;
}

.related-section-btn:hover {
  background: var(--primary-100);
  border-color: var(--primary-300);
}

/* 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: #3b82f6 !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: #3b82f6;
}

.deal-contact-info-item[href^="mailto:"]:hover {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
}

/* ===========================================
   💼 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: #1d4ed8;
  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: #3b82f6;
  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: #3b82f6;
  color: #1e40af;
}
.task-source-pill--link {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #0f172a;
}
.task-source-pill--link:hover {
  border-color: #3b82f6;
  color: #1d4ed8;
}

/* 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: #3b82f6;
  color: #2563eb;
}

/* 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: #2563eb;
}

/* 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: 6px;
}

.related-section-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  background: var(--primary-50);
  border: 1px solid var(--primary-200);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--primary-700);
  cursor: pointer;
  transition: all 0.15s ease;
}

.related-section-btn:hover {
  background: var(--primary-100);
  border-color: var(--primary-300);
}

/* 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: #3b82f6 !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 .detailPane,
  .is-mobile #detailPanel {
    position: fixed;
    top: 190px;
    left: 0;
    width: 100vw;
    height: calc(100vh - 190px);
    z-index: 10;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: white;
  }

  /* 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 .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;
  }

  /* Pipeline pane full width on mobile */
  .is-mobile .pipelinePane,
  .is-mobile #pipelineWrap {
    width: 100vw !important;
    max-width: 100vw;
  }

  /* Projects pane full width on mobile */
  .is-mobile .projectsPane,
  .is-mobile #projectsWrap {
    width: 100vw !important;
    max-width: 100vw;
  }

  /* Detail pane full width on mobile */
  .is-mobile .detailPane,
  .is-mobile #detailPanel {
    width: 100vw !important;
    max-width: 100vw;
    left: 0 !important;
    right: 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: #3b82f6;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .mobile-back-btn:hover {
    background: #f8fafc;
  }

  /* Ensure detail content scrolls properly on mobile */
  .is-mobile #detailContent {
    height: calc(100vh - 120px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* 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;
  }

  /* 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;
  }
  
  .detailRow .value input {
    width: 100% !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;
  }
}

/* ===========================================
   📱 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;
  }
}