:root { 
   /* Color Palette - Inter/Slate based professional look */ 
   --ggcrm-white: #ffffff; 
   --ggcrm-black: #0f172a; 
   
   --ggcrm-slate-50: #f8fafc; 
   --ggcrm-slate-100: #f1f5f9; 
   --ggcrm-slate-200: #e2e8f0; 
   --ggcrm-slate-300: #cbd5e1; 
   --ggcrm-slate-400: #94a3b8; 
   --ggcrm-slate-500: #64748b; 
   --ggcrm-slate-600: #475569; 
   --ggcrm-slate-700: #334155; 
   --ggcrm-slate-800: #1e293b; 
   --ggcrm-slate-900: #0f172a; 
     
   /* Gold Theme */ 
   --ggcrm-primary: #f59e0b; /* Amber 500 */ 
   --ggcrm-primary-hover: #d97706; /* Amber 600 */ 
   --ggcrm-primary-light: #fef3c7; /* Amber 100 */ 
     
   --ggcrm-success: #10b981; 
   --ggcrm-success-light: #ecfdf5; 
   --ggcrm-warning: #f59e0b; 
   --ggcrm-warning-light: #fffbeb; 
   --ggcrm-danger: #ef4444; 
  --ggcrm-danger-light: #fef2f2; 
  --ggcrm-info: #3b82f6; 
  --ggcrm-info-light: #eff6ff; 
  
  --ggcrm-purple: #8b5cf6;
  --ggcrm-orange: #f59e0b;

  --ggcrm-bg: var(--ggcrm-slate-50); 
   --ggcrm-card-bg: var(--ggcrm-white); 
   --ggcrm-text-main: var(--ggcrm-slate-800); 
   --ggcrm-text-muted: var(--ggcrm-slate-500); 
   --ggcrm-border-color: var(--ggcrm-slate-200); 
 
   --ggcrm-radius-sm: 0.375rem; 
   --ggcrm-radius: 0.5rem; 
   --ggcrm-radius-lg: 0.75rem; 
   --ggcrm-radius-full: 9999px; 
 
   --ggcrm-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); 
   --ggcrm-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); 
   --ggcrm-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); 
   --ggcrm-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); 
 
   --ggcrm-font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; 
 } 
 
 /* Reset & Base */ 
 .ggcrm-dashboard, .ggcrm-modal {
     box-sizing: border-box; 
     font-family: var(--ggcrm-font-sans); 
     color: var(--ggcrm-text-main); 
     line-height: 1.5;
 }

 .ggcrm-dashboard *, .ggcrm-dashboard *::before, .ggcrm-dashboard *::after,
 .ggcrm-modal *, .ggcrm-modal *::before, .ggcrm-modal *::after { 
     box-sizing: border-box; 
 } 
 
 .ggcrm-dashboard { 
     background-color: var(--ggcrm-bg); 
     display: flex; 
     min-height: 800px; /* Taller default height */ 
     width: 100%; /* Ensure full width */ 
     border-radius: var(--ggcrm-radius-lg); 
     overflow: hidden; 
     border: 1px solid var(--ggcrm-border-color); 
     position: relative; 
 } 
 
 /* Sidebar */ 
 .ggcrm-sidebar { 
     width: 260px; 
     background: var(--ggcrm-white); 
     border-right: 1px solid var(--ggcrm-border-color); 
     display: flex; 
     flex-direction: column; 
     flex-shrink: 0; 
     transition: transform 0.3s ease; 
     z-index: 50; 
 } 
 
 .ggcrm-sidebar-header { 
     height: 64px; 
     display: flex; 
     align-items: center; 
     padding: 0 1.5rem; 
     border-bottom: 1px solid var(--ggcrm-border-color); 
 } 
 
 .ggcrm-logo { 
     display: flex; 
     align-items: center; 
     gap: 0.5rem; 
     font-weight: 800; 
     font-size: 1.25rem; 
     color: var(--ggcrm-slate-900); 
 } 
 
 .ggcrm-logo-icon { 
     color: var(--ggcrm-primary); 
     background: transparent; 
     padding: 0;
 } 
 
 .ggcrm-nav { 
     padding: 1.5rem 1rem; 
     flex-grow: 1; 
 } 
 
 .ggcrm-nav ul { 
     list-style: none; 
     padding: 0; 
     margin: 0; 
     display: flex; 
     flex-direction: column; 
     gap: 0.5rem; 
 } 
 
 .ggcrm-nav li { 
     padding: 0.75rem 1rem; 
     border-radius: var(--ggcrm-radius); 
     cursor: pointer; 
     color: var(--ggcrm-slate-600); 
     font-weight: 500; 
     font-size: 0.875rem; 
     display: flex; 
     align-items: center; 
     gap: 0.75rem; 
     transition: all 0.2s; 
 } 
 
 .ggcrm-nav li:hover { 
     background-color: var(--ggcrm-slate-5); 
     color: var(--ggcrm-slate-900); 
 } 
 
 .ggcrm-nav li.active { 
     background-color: var(--ggcrm-primary-light); 
     color: var(--ggcrm-primary); 
 } 
 
 .ggcrm-sidebar-footer { 
     padding: 1rem; 
     border-top: 1px solid var(--ggcrm-border-color); 
 } 
 
 .ggcrm-user-mini { 
     display: flex; 
     align-items: center; 
     gap: 0.75rem; 
 } 
 
 .ggcrm-avatar-sm { 
     width: 2.5rem; 
     height: 2.5rem; 
     border-radius: var(--ggcrm-radius-full); 
     background-color: var(--ggcrm-slate-200); 
     display: flex; 
     align-items: center; 
     justify-content: center; 
     overflow: hidden; 
     font-weight: 600; 
     color: var(--ggcrm-slate-600); 
     font-size: 0.875rem; 
 } 
 
 .ggcrm-avatar-sm img { 
     width: 100%; 
     height: 100%; 
     object-fit: cover; 
 } 
 
 .ggcrm-user-details { 
     display: flex; 
     flex-direction: column; 
 } 
 
 .ggcrm-user-name { 
     font-size: 0.875rem; 
     font-weight: 600; 
     color: var(--ggcrm-slate-900); 
 } 
 
 .ggcrm-user-role { 
     font-size: 0.75rem; 
     color: var(--ggcrm-slate-500); 
 } 
 
 /* Main Content */ 
 .ggcrm-main { 
     flex-grow: 1; 
     display: flex; 
     flex-direction: column; 
     overflow: hidden; /* Prevent double scrollbars */ 
     height: 100%; 
     background-color: var(--ggcrm-bg); 
 } 
 
 .ggcrm-header { 
     height: 64px; 
     display: flex; 
     align-items: center; 
     justify-content: space-between; 
     padding: 0 2rem; 
     background: var(--ggcrm-white); 
     border-bottom: 1px solid var(--ggcrm-border-color); 
     flex-shrink: 0; 
 } 
 
 .ggcrm-mobile-toggle { 
     display: none; 
     background: transparent; 
     border: none; 
     color: var(--ggcrm-slate-600); 
     cursor: pointer; 
 } 
 
 .ggcrm-header-title h2 { 
     font-size: 1.25rem; 
     font-weight: 600; 
     color: var(--ggcrm-slate-900); 
     margin: 0; 
 } 
 
 .ggcrm-header-actions { 
     display: flex; 
     gap: 1rem; 
 } 
 
 .ggcrm-btn-icon { 
     background: transparent; 
     border: none; 
     color: var(--ggcrm-slate-500); 
     cursor: pointer; 
     padding: 0.5rem; 
     border-radius: var(--ggcrm-radius-full); 
     transition: all 0.2s; 
 } 
 .ggcrm-btn-icon:hover { background-color: var(--ggcrm-slate-100); color: var(--ggcrm-slate-900); } 
 
 .ggcrm-content-body { 
     padding: 2rem; 
     overflow-y: auto; 
     flex-grow: 1; 
 } 
 
 .ggcrm-tab-content { display: none; } 
 .ggcrm-tab-content.active { display: block; animation: fadeIn 0.3s ease; } 
 
 @keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } } 
 
 /* Button Styles */ 
 .ggcrm-btn-primary { 
     background-color: var(--ggcrm-primary); 
     color: white; 
     border: none; 
     padding: 0.5rem 1rem; 
     border-radius: var(--ggcrm-radius); 
     font-weight: 500; 
     cursor: pointer; 
     transition: all 0.2s; 
 } 
 .ggcrm-btn-primary:hover { background-color: var(--ggcrm-primary-hover); } 
 
 .ggcrm-btn-secondary { 
     background-color: var(--ggcrm-white); 
     color: var(--ggcrm-slate-700); 
     border: 1px solid var(--ggcrm-border-color); 
     padding: 0.5rem 1rem; 
     border-radius: var(--ggcrm-radius); 
     font-weight: 500; 
     cursor: pointer; 
     transition: all 0.2s; 
 } 
 .ggcrm-btn-secondary:hover { background-color: var(--ggcrm-slate-50); border-color: var(--ggcrm-slate-300); } 
 
 .ggcrm-btn-sm { padding: 0.25rem 0.75rem; font-size: 0.75rem; } 
 
 /* Capture Form Styles */ 
 .ggcrm-capture-card { 
     background: var(--ggcrm-white); 
     padding: 2rem; 
     border-radius: var(--ggcrm-radius-lg); 
     box-shadow: var(--ggcrm-shadow); 
     max-width: 600px; 
     margin: 0 auto; 
     border: 1px solid var(--ggcrm-border-color); 
 } 
 
 .ggcrm-input-group { 
    display: flex; 
    gap: 0.5rem; 
}

.ggcrm-form-group .ggcrm-input-group select {
    width: auto;
    flex-shrink: 0;
} 
 
 .ggcrm-alert-success { 
     background-color: var(--ggcrm-success-light); 
     color: var(--ggcrm-success); 
     padding: 0.75rem; 
     border-radius: var(--ggcrm-radius); 
     margin-bottom: 1rem; 
     font-size: 0.875rem; 
 } 
 .ggcrm-alert-danger { 
     background-color: var(--ggcrm-danger-light); 
     color: var(--ggcrm-danger); 
     padding: 0.75rem; 
     border-radius: var(--ggcrm-radius); 
     margin-bottom: 1rem; 
     font-size: 0.875rem; 
 } 
 
 .ggcrm-col-span-2 { grid-column: span 2; } 
 
 /* Stats Grid */ 
 .ggcrm-stats-grid { 
     display: grid; 
     grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); 
     gap: 1.5rem; 
     margin-bottom: 2rem; 
 } 
 
 .ggcrm-stat-card { 
     background: var(--ggcrm-white); 
     border-radius: var(--ggcrm-radius); 
     padding: 1.5rem; 
     box-shadow: var(--ggcrm-shadow-sm); 
     border: 1px solid var(--ggcrm-border-color); 
     display: flex; 
     flex-direction: column; 
 } 
 
 .ggcrm-stat-header { 
     display: flex; 
     justify-content: space-between; 
     align-items: flex-start; 
     margin-bottom: 1rem; 
 } 
 
 .ggcrm-stat-label { font-size: 0.875rem; color: var(--ggcrm-slate-500); font-weight: 600; } 
 
 .ggcrm-stat-icon-bg { 
     width: 2.5rem; height: 2.5rem; 
     border-radius: var(--ggcrm-radius-sm); 
     display: flex; align-items: center; justify-content: center; 
     color: var(--ggcrm-white); 
 } 
 
 .ggcrm-bg-info { background-color: var(--ggcrm-info); } 
 .ggcrm-bg-green { background-color: var(--ggcrm-success); } 
 .ggcrm-bg-orange { background-color: var(--ggcrm-warning); } 
 .ggcrm-bg-purple { background-color: #8b5cf6; } 
 
 .ggcrm-stat-value { font-size: 1.75rem; font-weight: 700; color: var(--ggcrm-slate-900); margin-bottom: 0.5rem; } 
 
 .ggcrm-stat-footer { font-size: 0.75rem; color: var(--ggcrm-slate-400); display: flex; align-items: center; gap: 0.5rem; margin-top: auto; } 
 .ggcrm-trend.up { color: var(--ggcrm-success); display: flex; align-items: center; gap: 0.25rem; font-weight: 600; } 
 
 .ggcrm-welcome-banner { margin-bottom: 2rem; } 
 .ggcrm-welcome-banner h1 { margin: 0 0 0.5rem 0; font-size: 1.5rem; font-weight: 700; color: var(--ggcrm-slate-800); } 
 .ggcrm-welcome-banner p { margin: 0; color: var(--ggcrm-slate-500); } 
 
 /* Responsive Sidebar */ 
 .ggcrm-sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 90; } 
 
 @media (max-width: 768px) { 
     .ggcrm-dashboard { flex-direction: column; height: auto; min-height: 100vh; border-radius: 0; border: none; } 
     .ggcrm-sidebar { position: fixed; top: 0; left: 0; bottom: 0; z-index: 100; transform: translateX(-100%); width: 260px; box-shadow: 2px 0 10px rgba(0,0,0,0.1); } 
     .ggcrm-sidebar.open { transform: translateX(0); } 
     .ggcrm-sidebar.open + .ggcrm-sidebar-overlay { display: block; } 
     .ggcrm-mobile-toggle { display: block; } 
     .ggcrm-header { padding: 0.75rem 1rem; } 
     .ggcrm-content-body { padding: 1rem; height: auto; overflow-y: visible; } 
     
     /* Leads Controls Stack */ 
     .ggcrm-controls-bar { flex-direction: column; align-items: stretch; gap: 1rem; } 
     .ggcrm-filters-left { flex-direction: column; width: 100%; } 
     .ggcrm-search-wrapper { max-width: none; width: 100%; } 
     #ggcrm-leads-filter-stage { width: 100%; } 
     .ggcrm-controls-right { display: flex; justify-content: flex-end; } 
     
     /* Card View Adjustments */ 
     .ggcrm-cards-grid { grid-template-columns: 1fr; } 
     
     /* Modal Responsive */ 
     .ggcrm-modal { padding: 0; align-items: flex-end; } /* Bottom sheet style or full screen */ 
     .ggcrm-modal-content { 
         width: 100%; 
         height: 100%; 
         max-height: 100%; 
         border-radius: 0; 
         max-width: none; 
     } 
     .ggcrm-modal-layout { flex-direction: column; overflow-y: auto; } 
     .ggcrm-pane-main { 
         flex: none; 
         border-right: none; 
         border-bottom: 1px solid var(--ggcrm-border-color);
         padding: 1rem;
     } 
     .ggcrm-pane-sidebar { 
         flex: none; 
         min-width: 0; 
         padding: 1rem;
         background-color: var(--ggcrm-slate-50);
     } 
     .ggcrm-form-grid { grid-template-columns: 1fr; } 
     .ggcrm-modal-footer { position: sticky; bottom: 0; z-index: 10; border-radius: 0; } 
 } 
 
 /* Modal */ 
 .ggcrm-modal { 
     position: fixed; 
     z-index: 1000; 
     left: 0; top: 0; 
     width: 100%; height: 100%; 
     background-color: rgba(15, 23, 42, 0.6); 
     backdrop-filter: blur(4px); 
     display: flex; 
     align-items: center; 
     justify-content: center; 
 } 
 
 .ggcrm-modal-content { 
     background-color: var(--ggcrm-white); 
     border-radius: var(--ggcrm-radius-lg); 
     width: 90%; 
     max-width: 900px; 
     height: 85vh; 
     display: flex; 
     flex-direction: column; 
     box-shadow: var(--ggcrm-shadow-lg); 
     position: relative; 
     overflow: hidden; 
 } 
 
 .ggcrm-modal-header { 
     padding: 1rem 1.5rem; 
     border-bottom: 1px solid var(--ggcrm-border-color); 
     display: flex; 
     justify-content: space-between; 
     align-items: center; 
 } 
 .ggcrm-modal-header h3 { margin: 0; font-size: 1.125rem; font-weight: 600; } 
 
 .ggcrm-close-modal { 
     font-size: 1.5rem; 
     cursor: pointer; 
     color: var(--ggcrm-slate-400); 
     line-height: 1; 
 } 
 .ggcrm-close-modal:hover { color: var(--ggcrm-slate-700); } 
 
 .ggcrm-modal-body { 
     flex-grow: 1; 
     overflow: hidden; 
     display: flex; 
     flex-direction: column; 
 } 
 
 .ggcrm-modal-layout { 
    display: flex; 
    flex-direction: row; 
    flex-grow: 1;
    overflow: hidden;
    min-height: 0;
} 

.ggcrm-pane-main { 
    flex: 2; 
    padding: 1.5rem; 
    overflow-y: auto; 
    border-right: 1px solid var(--ggcrm-border-color); 
} 
 
 .ggcrm-pane-sidebar { 
     flex: 1; 
     padding: 1.5rem; 
     background-color: var(--ggcrm-slate-50); 
     overflow-y: auto; 
     display: flex; 
     flex-direction: column; 
 } 
 
 .ggcrm-modal-footer { 
     padding: 1rem 1.5rem; 
     border-top: 1px solid var(--ggcrm-border-color); 
     background-color: var(--ggcrm-slate-50); 
     border-bottom-left-radius: var(--ggcrm-radius-lg); 
     border-bottom-right-radius: var(--ggcrm-radius-lg); 
     display: flex; 
     justify-content: flex-end; 
 } 
 
 .ggcrm-divider { height: 1px; background-color: var(--ggcrm-border-color); margin: 1.5rem 0; } 
 .ggcrm-section-title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; color: var(--ggcrm-slate-500); margin-bottom: 0.75rem; letter-spacing: 0.05em; } 
 
 .ggcrm-form-grid { 
     display: grid; 
     grid-template-columns: repeat(2, 1fr); 
     gap: 1rem; 
 } 
 
 .ggcrm-form-group { 
     margin-bottom: 0.5rem; 
 } 
 
 .ggcrm-form-group label { 
     display: block; 
     margin-bottom: 0.25rem; 
     font-size: 0.875rem; 
     font-weight: 500; 
     color: var(--ggcrm-slate-700); 
 } 
 
 .ggcrm-form-group input, 
 .ggcrm-form-group select, 
 .ggcrm-form-group textarea { 
     width: 100%; 
     padding: 0.5rem 0.75rem; 
     border: 1px solid var(--ggcrm-border-color); 
     border-radius: var(--ggcrm-radius-sm); 
     font-size: 0.875rem; 
     transition: all 0.2s; 
 } 
 
 .ggcrm-form-group input:focus, 
 .ggcrm-form-group select:focus, 
 .ggcrm-form-group textarea:focus { 
     border-color: var(--ggcrm-primary); 
     box-shadow: 0 0 0 2px var(--ggcrm-primary-light); 
     outline: none; 
 } 
 
 input.ggcrm-input-disabled, 
 select.ggcrm-input-disabled, 
 textarea.ggcrm-input-disabled { 
     background-color: var(--ggcrm-slate-100); 
     color: var(--ggcrm-slate-500); 
     cursor: not-allowed; 
     border-color: var(--ggcrm-slate-200); 
 } 
 
 .ggcrm-notes-section { 
     margin-top: 1rem; 
 } 
 
 .ggcrm-notes-list { 
     max-height: 200px; 
     overflow-y: auto; 
     margin-bottom: 1rem; 
     border: 1px solid var(--ggcrm-border-color); 
     border-radius: var(--ggcrm-radius-sm); 
     padding: 0.5rem; 
     background-color: var(--ggcrm-slate-50); 
 } 
 
 .ggcrm-note-item { 
     background: var(--ggcrm-white); 
     padding: 0.75rem; 
     border-radius: var(--ggcrm-radius-sm); 
     border: 1px solid var(--ggcrm-border-color); 
     margin-bottom: 0.5rem; 
     font-size: 0.875rem; 
 } 
 
 .ggcrm-note-meta { 
     font-size: 0.75rem; 
     color: var(--ggcrm-slate-400); 
     margin-bottom: 0.25rem; 
 } 
 
 .ggcrm-add-note textarea { 
     width: 100%; 
     height: 60px; 
     margin-bottom: 0.5rem; 
     resize: vertical; 
 } 

.ggcrm-add-note textarea:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

#ggcrm-add-note-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.ggcrm-notes-preloader {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    min-height: 60px;
}

.ggcrm-spinner {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 3px solid var(--ggcrm-slate-200);
    border-top-color: var(--ggcrm-primary);
    animation: ggcrmSpin 0.8s linear infinite;
}

@keyframes ggcrmSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
 
 /* Kanban Board */ 
 .ggcrm-kanban-board { 
    display: flex; 
    overflow-x: auto; 
    height: calc(100vh - 200px); 
    min-height: 500px; 
    padding-bottom: 1rem; 
    gap: 1rem; 
}

/* Toast Notifications */
.ggcrm-toast-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ggcrm-toast {
    min-width: 250px;
    max-width: 350px;
    padding: 12px 16px;
    border-radius: var(--ggcrm-radius);
    background-color: var(--ggcrm-white);
    box-shadow: var(--ggcrm-shadow-lg);
    border-left: 4px solid var(--ggcrm-primary);
    display: flex;
    align-items: center;
    justify-content: space-between;
    animation: ggcrmSlideIn 0.3s ease-out forwards;
    font-size: 0.875rem;
    color: var(--ggcrm-slate-800);
    opacity: 0;
    transform: translateX(100%);
}

.ggcrm-toast.ggcrm-toast-success {
    border-left-color: var(--ggcrm-success);
}

.ggcrm-toast.ggcrm-toast-error {
    border-left-color: var(--ggcrm-danger);
}

.ggcrm-toast.ggcrm-toast-info {
    border-left-color: var(--ggcrm-info);
}

.ggcrm-toast-message {
    flex-grow: 1;
    margin-right: 12px;
}

.ggcrm-toast-close {
    cursor: pointer;
    color: var(--ggcrm-slate-400);
    background: none;
    border: none;
    padding: 0;
    font-size: 1.25rem;
    line-height: 1;
}

.ggcrm-toast-close:hover {
    color: var(--ggcrm-slate-600);
}

@keyframes ggcrmSlideIn {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes ggcrmFadeOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(100%);
    }
} 
 
 .ggcrm-kanban-column { 
     min-width: 280px; 
     width: 280px; 
     background-color: var(--ggcrm-slate-100); 
     border-radius: var(--ggcrm-radius); 
     display: flex; 
     flex-direction: column; 
     max-height: 100%; 
     border-top: 3px solid transparent; 
 } 
 
 .ggcrm-kanban-header { 
     padding: 0.75rem 1rem; 
     display: flex; 
     justify-content: space-between; 
     align-items: center; 
     border-bottom: 1px solid rgba(0,0,0,0.05); 
 } 
 
 .ggcrm-kanban-body { 
     padding: 0.75rem; 
     overflow-y: auto; 
     flex-grow: 1; 
     display: flex; 
     flex-direction: column; 
     gap: 0.75rem; 
 } 
 
 .ggcrm-kanban-card { 
     background: var(--ggcrm-white); 
     border: 1px solid var(--ggcrm-border-color); 
     border-radius: var(--ggcrm-radius-sm); 
     padding: 0.75rem; 
     box-shadow: var(--ggcrm-shadow-sm); 
     cursor: grab; 
     transition: transform 0.2s, box-shadow 0.2s; 
 } 
 .ggcrm-kanban-card:hover { transform: translateY(-2px); box-shadow: var(--ggcrm-shadow); } 
 .ggcrm-kanban-card:active { cursor: grabbing; } 
 
 .ggcrm-empty-msg { 
     text-align: center; 
     color: var(--ggcrm-slate-400); 
     font-size: 0.75rem; 
     padding: 1rem; 
     font-style: italic; 
 } 
 
 /* Drag & Drop Visuals */ 
 .ggcrm-kanban-card.dragging { opacity: 0.5; border: 2px dashed var(--ggcrm-slate-400); } 
 .ggcrm-kanban-column.drag-over { background-color: var(--ggcrm-slate-200); } 
 
 /* Controls Bar */ 
 .ggcrm-controls-bar { 
     display: flex; 
     justify-content: space-between; 
     align-items: center; 
     margin-bottom: 1.5rem; 
     gap: 1rem; 
 } 
 
 .ggcrm-filters-left { 
     display: flex; 
     gap: 1rem; 
     flex-grow: 1; 
 } 
 
 .ggcrm-search-wrapper { 
     position: relative; 
     width: 300px; 
 } 
 
 .ggcrm-search-wrapper input { 
     padding-left: 2.5rem; 
     height: 40px; 
     border-radius: 9999px; 
     border: 1px solid var(--ggcrm-border-color); 
 } 
 
 .ggcrm-search-icon { 
     position: absolute; 
     left: 0.75rem; 
     top: 50%; 
     transform: translateY(-50%); 
     color: var(--ggcrm-slate-400); 
     display: flex; 
 } 
 
 #ggcrm-leads-filter-stage { 
     width: 180px; 
     height: 40px; 
     border: 1px solid var(--ggcrm-border-color); 
     border-radius: var(--ggcrm-radius); 
     padding: 0 0.5rem; 
     background-color: var(--ggcrm-white); 
 } 
 
 .ggcrm-view-toggle { 
     display: flex; 
     background: var(--ggcrm-slate-100); 
     padding: 0.25rem; 
     border-radius: var(--ggcrm-radius); 
     gap: 0.25rem; 
 } 
 
 .ggcrm-view-btn { 
     background: transparent; 
     border: none; 
     padding: 0.5rem; 
     border-radius: var(--ggcrm-radius-sm); 
     color: var(--ggcrm-slate-500); 
     cursor: pointer; 
     display: flex; 
     align-items: center; 
     justify-content: center; 
     transition: all 0.2s; 
 } 
 
 .ggcrm-view-btn.active { 
     background: var(--ggcrm-white); 
     color: var(--ggcrm-primary); 
     box-shadow: var(--ggcrm-shadow-sm); 
 } 
 
 /* Utilities */ 
 .text-muted { color: var(--ggcrm-text-muted); } 
 .ggcrm-text-sm { font-size: 0.875rem; } 
 .ggcrm-text-xs { font-size: 0.75rem; } 
 
 /* Recent Activity Removed */ 
 
 /* Leads Page Styles */ 
 .ggcrm-page-header { 
     margin-bottom: 1.5rem; 
     display: flex; 
     justify-content: space-between; 
     align-items: flex-end; 
 } 
 .ggcrm-page-header h2 { font-size: 1.5rem; font-weight: 700; color: var(--ggcrm-slate-900); margin: 0 0 0.25rem 0; } 
 .ggcrm-page-header p { margin: 0; font-size: 0.875rem; color: var(--ggcrm-slate-500); } 
 
 .ggcrm-card { 
     background: var(--ggcrm-white); 
     border-radius: var(--ggcrm-radius); 
     border: 1px solid var(--ggcrm-border-color); 
     box-shadow: var(--ggcrm-shadow-sm); 
     padding: 1.5rem; 
     margin-bottom: 1.5rem; 
 } 
 .ggcrm-card.no-padding { padding: 0; overflow: hidden; } 
 
 /* Table Styles */ 
 .ggcrm-table-responsive { 
     overflow-x: auto; 
     width: 100%; 
 } 
 
 .ggcrm-table { 
     width: 100%; 
     border-collapse: collapse; 
     font-size: 0.875rem; 
     text-align: left; 
 } 
 
 .ggcrm-table th { 
     background-color: var(--ggcrm-slate-5); 
     color: var(--ggcrm-slate-500); 
     font-weight: 600; 
     padding: 0.75rem 1rem; 
     border-bottom: 1px solid var(--ggcrm-border-color); 
     text-transform: uppercase; 
     font-size: 0.75rem; 
     letter-spacing: 0.05em; 
     white-space: nowrap; 
 } 
 
 .ggcrm-table td { 
     padding: 1rem; 
     border-bottom: 1px solid var(--ggcrm-slate-100); 
     color: var(--ggcrm-slate-700); 
     vertical-align: middle; 
 } 
 .ggcrm-table tr:last-child td { border-bottom: none; } 
 
 /* Graph Styles */ 
 .ggcrm-chart-section { 
     background: var(--ggcrm-white); 
     padding: 1.5rem; 
     border-radius: var(--ggcrm-radius); 
     border: 1px solid var(--ggcrm-border-color); 
     box-shadow: var(--ggcrm-shadow-sm); 
     margin-bottom: 2rem; 
 } 
 
 .ggcrm-chart-container { 
     height: 300px; 
     width: 100%; 
     position: relative; 
     padding-top: 2rem; 
 } 
 
 .ggcrm-chart-bars { 
     display: flex; 
     justify-content: space-around; 
     align-items: flex-end; 
     height: 100%; 
     width: 100%; 
     gap: 1rem; 
 } 
 
 .ggcrm-chart-bar-item { 
     display: flex; 
     flex-direction: column; 
     align-items: center; 
     flex: 1; 
     height: 100%; 
     justify-content: flex-end; 
     position: relative; 
 } 
 
 .ggcrm-chart-bar-track { 
     width: 100%; 
     max-width: 60px; 
     height: 80%; 
     display: flex; 
     align-items: flex-end; 
     position: relative; 
     border-radius: var(--ggcrm-radius-sm) var(--ggcrm-radius-sm) 0 0; 
 } 
 
 .ggcrm-chart-bar { 
     width: 100%; 
     border-top-left-radius: var(--ggcrm-radius-sm); 
     border-top-right-radius: var(--ggcrm-radius-sm); 
     transition: height 0.5s ease; 
     min-height: 4px; 
 } 
 
 .ggcrm-chart-label { 
     margin-top: 0.75rem; 
     font-size: 0.75rem; 
     color: var(--ggcrm-slate-500); 
     text-align: center; 
     white-space: nowrap; 
     overflow: hidden; 
     text-overflow: ellipsis; 
     max-width: 100%; 
     font-weight: 500; 
 } 
 
 .ggcrm-chart-value-top {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--ggcrm-slate-700);
    margin-bottom: 0.5rem;
}

/* Pagination Styles */
.ggcrm-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    margin-top: 1rem;
    border-top: 1px solid var(--ggcrm-border-color);
}

.ggcrm-pagination-info {
    font-size: 0.875rem;
    color: var(--ggcrm-slate-500);
}

.ggcrm-pagination-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ggcrm-page-numbers {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

.ggcrm-page-btn {
    background: var(--ggcrm-white);
    border: 1px solid var(--ggcrm-border-color);
    padding: 0.5rem 0.75rem;
    border-radius: var(--ggcrm-radius);
    color: var(--ggcrm-slate-700);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s;
    min-width: 2rem;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ggcrm-page-btn:hover {
    background-color: var(--ggcrm-slate-50);
    border-color: var(--ggcrm-slate-300);
    color: var(--ggcrm-slate-900);
}

.ggcrm-page-btn.active {
    background-color: var(--ggcrm-primary);
    color: var(--ggcrm-white);
    border-color: var(--ggcrm-primary);
}

.ggcrm-page-dots {
    color: var(--ggcrm-slate-400);
    padding: 0 0.25rem;
}

.ggcrm-pagination-controls button {
    background: var(--ggcrm-white);
    border: 1px solid var(--ggcrm-border-color);
    padding: 0.5rem 1rem;
    border-radius: var(--ggcrm-radius);
    color: var(--ggcrm-slate-700);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s;
}

.ggcrm-pagination-controls button:hover:not(:disabled) {
    border-color: var(--ggcrm-primary);
    color: var(--ggcrm-primary);
    background: var(--ggcrm-primary-light);
}

.ggcrm-pagination-controls button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--ggcrm-slate-50);
}

#ggcrm-current-page {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ggcrm-slate-900);
    min-width: 1.5rem;
    text-align: center;
}

/* Badge Styles */
.ggcrm-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.ggcrm-badge-default {
    background-color: var(--ggcrm-slate-100);
    color: var(--ggcrm-slate-600);
}

.ggcrm-badge-new {
    background-color: #eff6ff; /* blue-50 */
    color: #2563eb; /* blue-600 */
    border: 1px solid #dbeafe;
}

.ggcrm-badge-contacted {
    background-color: #fefce8; /* yellow-50 */
    color: #ca8a04; /* yellow-600 */
    border: 1px solid #fef9c3;
}

.ggcrm-badge-appointment {
    background-color: #fffbeb; /* amber-50 */
    color: #d97706; /* amber-600 */
    border: 1px solid #fde68a;
}

.ggcrm-badge-showing {
    background-color: #fff7ed; /* orange-50 */
    color: #ea580c; /* orange-600 */
    border: 1px solid #ffedd5;
}

.ggcrm-badge-offer {
    background-color: #faf5ff; /* purple-50 */
    color: #9333ea; /* purple-600 */
    border: 1px solid #f3e8ff;
}

.ggcrm-badge-under-contract {
    background-color: #eef2ff; /* indigo-50 */
    color: #4f46e5; /* indigo-600 */
    border: 1px solid #e0e7ff;
}

.ggcrm-badge-closed {
    background-color: #f0fdf4; /* green-50 */
    color: #16a34a; /* green-600 */
    border: 1px solid #dcfce7;
}

/* Card View Styles */
.ggcrm-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
    padding: 1rem 0;
}

.ggcrm-lead-card {
    background-color: var(--ggcrm-white);
    border: 1px solid var(--ggcrm-border-color);
    border-radius: var(--ggcrm-radius-lg);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: all 0.2s ease-in-out;
    position: relative;
    box-shadow: var(--ggcrm-shadow-sm);
}

.ggcrm-lead-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--ggcrm-shadow-md);
    border-color: var(--ggcrm-slate-300);
}

.ggcrm-lead-card-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.ggcrm-card-initials {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    background-color: var(--ggcrm-primary);
    color: var(--ggcrm-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.ggcrm-card-title {
    flex: 1;
    min-width: 0;
}

.ggcrm-lead-name {
    font-weight: 600;
    color: var(--ggcrm-slate-900);
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0.125rem;
}

.ggcrm-lead-date {
    display: block;
    font-size: 0.75rem;
    color: var(--ggcrm-slate-500);
}

.ggcrm-card-actions {
    display: flex;
    gap: 0.5rem;
    opacity: 0;
    transition: opacity 0.2s;
}

.ggcrm-lead-card:hover .ggcrm-card-actions {
    opacity: 1;
}

@media (max-width: 768px) {
    .ggcrm-card-actions {
        opacity: 1;
    }
}

.ggcrm-lead-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    font-size: 0.875rem;
    color: var(--ggcrm-slate-600);
}

.ggcrm-lead-contact-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.ggcrm-lead-contact-item svg {
    color: var(--ggcrm-slate-400);
    flex-shrink: 0;
}

.ggcrm-lead-contact-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ggcrm-lead-card-footer {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--ggcrm-slate-100);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Fix 2026-04-19: Add Lead / Import modals had 14 form fields that overflowed
   the fixed-height modal body (overflow:hidden), clipping the submit/cancel
   footer out of the viewport. Pin footer at bottom and let form-grid scroll. */
#ggcrm-add-lead-modal .ggcrm-modal-body,
#ggcrm-import-modal .ggcrm-modal-body {
    padding: 0;
    overflow: hidden;
}
#ggcrm-add-lead-modal #ggcrm-add-lead-form,
#ggcrm-import-modal #ggcrm-import-form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}
#ggcrm-add-lead-modal .ggcrm-form-grid,
#ggcrm-import-modal .ggcrm-form-group {
    overflow-y: auto;
    min-height: 0;
}
#ggcrm-add-lead-modal .ggcrm-form-grid {
    flex: 1 1 auto;
    padding: 1.5rem;
}
#ggcrm-import-modal .ggcrm-modal-body > form > *:not(.ggcrm-modal-footer) {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
#ggcrm-import-modal .ggcrm-modal-body > form > .ggcrm-form-group {
    flex: 1 1 auto;
}
#ggcrm-add-lead-modal .ggcrm-modal-footer,
#ggcrm-import-modal .ggcrm-modal-footer {
    flex-shrink: 0;
    margin: 0;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--ggcrm-border-color);
    background: var(--ggcrm-slate-50);
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}