/* UNIQUE_LOG: styles.css LOADED - MAIN_CSS_006 */
/* Lead Simpler - Modern Application Styles */
/* Consistent with marketing page design - Professional, Fast, Modern */

/* ========================================
   CSS VARIABLES - THEME SYSTEM
   ======================================== */

:root {
    /* Brand Colors - Consistent with marketing */
    --primary: #667eea;
    --primary-dark: #5568d3;
    --primary-light: #7c8ff0;
    --secondary: #10b981;
    --secondary-dark: #059669;
    
    /* Gradient - Signature brand gradient */
    --gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --gradient-hover: linear-gradient(135deg, #5568d3 0%, #6a3f8f 100%);
    
    /* Light Theme Colors */
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --bg-tertiary: #f1f5f9;
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --text-tertiary: #94a3b8;
    
    /* UI Elements */
    --border-color: #e2e8f0;
    --border-color-hover: #cbd5e1;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    
    /* Status Colors */
    --success: #10b981;
    --success-bg: #d1fae5;
    --success-text: #065f46;
    --error: #ef4444;
    --error-bg: #fee2e2;
    --error-text: #991b1b;
    --warning: #f59e0b;
    --warning-bg: #fef3c7;
    --warning-text: #92400e;
    --info: #3b82f6;
    --info-bg: #dbeafe;
    --info-text: #1e40af;
    
    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    
    /* Border Radius */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-full: 9999px;
    
    /* Transitions */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Layout */
    --sidebar-width: 280px;
    --header-height: 70px;
}

/* Dark Theme */
body.dark-theme {
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-tertiary: #334155;
    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-tertiary: #94a3b8;
    --border-color: #334155;
    --border-color-hover: #475569;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
    --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

/* ========================================
   GLOBAL RESET & BASE STYLES
   ======================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-primary);
    background-color: var(--bg-secondary);
    overflow-x: hidden;
    transition: background-color var(--transition-base), color var(--transition-base);
}

/* ========================================
   TYPOGRAPHY
   ======================================== */

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-primary);
    margin-bottom: var(--spacing-md);
}

h1 { font-size: 2.25rem; }
h2 { font-size: 1.875rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }

p {
    margin-bottom: var(--spacing-md);
}

a {
    color: var(--primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--primary-dark);
}

/* ========================================
   LAYOUT - MAIN STRUCTURE
   ======================================== */

.dashboard-wrapper {
    display: flex;
    min-height: 100vh;
    position: relative;
}

.dashboard-main {
    flex: 1;
    margin-left: 0;
    min-height: 100vh;
    background-color: var(--bg-secondary);
    transition: margin-left var(--transition-base);
}

body.authenticated .dashboard-main {
    margin-left: var(--sidebar-width);
}

/* ========================================
   SIDEBAR
   ======================================== */

.sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: var(--sidebar-width);
    height: 100vh;
    background: var(--bg-primary);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    z-index: 1000;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    overflow-y: auto;
    box-shadow: var(--shadow-md);
}

.sidebar-header {
    padding: var(--spacing-xl);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    min-height: 100.4px;
}

.sidebar-header img {
    max-width: 150px;
    height: auto;
}

.sidebar-nav {
    flex: 1;
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

/* Search Bar in Sidebar */
.navbar-search {
    margin-bottom: var(--spacing-lg);
    position: relative;
}

.navbar-search input[type="search"] {
    width: 100%;
    padding: var(--spacing-md);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.875rem;
    transition: all var(--transition-fast);
}

.navbar-search input[type="search"]:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.navbar-search .sidebar-button {
    width: 100%;
    margin-top: var(--spacing-sm);
}

/* Sidebar Links */
.sidebar-link {
    display: flex;
    align-items: center;
    padding: var(--spacing-md);
    color: var(--text-primary);
    text-decoration: none;
    border-radius: var(--radius-md);
    font-weight: 500;
    transition: all var(--transition-fast);
    position: relative;
}

.sidebar-link:hover {
    background: var(--bg-tertiary);
    color: var(--primary);
    transform: translateX(4px);
}

.sidebar-link.active {
    background: var(--gradient);
    color: white;
    box-shadow: var(--shadow);
}

/* Sidebar Buttons */
.sidebar-button {
    width: 100%;
    padding: var(--spacing-md);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    font-size: 0.875rem;
}

.sidebar-button:hover {
    background: var(--bg-tertiary);
    border-color: var(--primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

/* Mobile Hamburger */
.hamburger {
    display: none;
    position: fixed;
    top: var(--spacing-md);
    left: var(--spacing-md);
    z-index: 1100;
    width: 40px;
    height: 40px;
    background: var(--gradient);
    border-radius: var(--radius-md);
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    box-shadow: var(--shadow-md);
    transition: all var(--transition-fast);
}

.hamburger:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-lg);
}

.hamburger span {
    width: 20px;
    height: 2px;
    background: white;
    border-radius: 2px;
    transition: all var(--transition-fast);
}

/* ========================================
   HEADER
   ======================================== */

.dashboard-header {
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
    padding: var(--spacing-lg) var(--spacing-xl);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-md);
    min-height: var(--header-height);
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 0;
    z-index: 100;
}

.dashboard-title {
    font-size: 1.5rem;
    font-weight: 700;
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
}

.dashboard-title * {
    background: none;
    -webkit-background-clip: initial;
    -webkit-text-fill-color: currentColor;
    color: inherit;
}

.dashboard-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.welcome-text {
    font-weight: 500;
    color: var(--text-secondary);
}

.notification-section {
    position: relative;
    display: flex;
    align-items: center;
}

.notification-icon {
    cursor: pointer;
    transition: transform var(--transition-fast);
}

.notification-icon:hover {
    transform: scale(1.1);
}

.notification-count {
    position: absolute;
    top: -5px;
    right: -5px;
    background: var(--error);
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: var(--radius-full);
    min-width: 18px;
    text-align: center;
}

/* ========================================
   BUTTONS
   ======================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    border: none;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
    text-decoration: none;
}

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

.btn-primary {
    background: var(--gradient);
    color: white;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.btn-primary:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.btn-primary:active:not(:disabled) {
    transform: translateY(0);
}

.btn-secondary {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 2px solid var(--border-color);
}

.btn-secondary:hover:not(:disabled) {
    background: var(--bg-secondary);
    border-color: var(--primary);
    color: var(--primary);
}

button.btn.btn-secondary.testing-messages,
.btn.btn-secondary.testing-messages {
    background-color: #007bff !important;
    color: white !important;
    border-color: #007bff !important;
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.5) !important;
    opacity: unset !important;
}

button.btn.btn-secondary.testing-newlead,
.btn.btn-secondary.testing-newlead {
    background-color: #28a745 !important;
    color: white !important;
    border-color: #28a745 !important;
    box-shadow: 0 0 10px rgba(40, 167, 69, 0.5) !important;
    opacity: unset !important;
}

button.btn.btn-secondary.testing-notifications,
.btn.btn-secondary.testing-notifications {
    background-color: #ffc107 !important;
    color: #000 !important;
    border-color: #ffc107 !important;
    box-shadow: 0 0 10px rgba(255, 193, 7, 0.5) !important;
    opacity: unset !important;
}

.btn-success {
    background: var(--success);
    color: white;
}

.btn-success:hover:not(:disabled) {
    background: var(--secondary-dark);
    transform: translateY(-1px);
}

.btn-danger {
    background: var(--error);
    color: white;
}

.btn-danger:hover:not(:disabled) {
    background: #dc2626;
    transform: translateY(-1px);
}

.btn-sm {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 0.8125rem;
}

.btn-lg {
    padding: var(--spacing-lg) var(--spacing-xl);
    font-size: 1rem;
}

/* ========================================
   FORMS
   ======================================== */

.form-group {
    margin-bottom: var(--spacing-lg);
}

.form-label {
    display: block;
    margin-bottom: var(--spacing-sm);
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.875rem;
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: var(--spacing-md);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.875rem;
    font-family: inherit;
    transition: all var(--transition-fast);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

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

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

.form-select {
    cursor: pointer;
}

.form-errors {
    display: block;
    margin-top: var(--spacing-sm);
    color: var(--error);
    font-size: 0.8125rem;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-lg);
}

/* ========================================
   MODALS
   ======================================== */

.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 2000;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xl);
    overflow-y: auto;
}

.modal.active {
    display: flex;
}

body.modal-open {
    overflow: hidden;
}

.modal-content {
    background: var(--bg-primary);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    position: relative;
    animation: modalSlideIn var(--transition-base);
}

.create-lead-modal-content {
    max-width: 900px;
}

.wide-report-modal {
    max-width: 1200px;
}

.modal-title {
    padding: var(--spacing-xl);
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    background: var(--gradient);
    color: white;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.modal-close {
    position: absolute;
    top: var(--spacing-lg);
    right: var(--spacing-lg);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.2);
    color: white;
    font-size: 1.5rem;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--transition-fast);
    border: none;
    z-index: 1;
}

.modal-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg) scale(1.1);
}

.modal-body {
    padding: var(--spacing-xl);
    overflow-y: auto;
    flex: 1;
}

.modal-body .content-table {
    margin: auto;
    font-size: 0.875rem;
}

.modal-body .content-table thead {
    position: sticky;
    top: 0;
    z-index: 10;
}

.modal-body .content-table th {
    padding: var(--spacing-md);
    font-size: 0.8125rem;
}

.modal-body .content-table td {
    padding: var(--spacing-sm) var(--spacing-md);
}

/* Make clickable rows in modals more obvious */
.modal-body .content-table tr.clickable:hover {
    background: var(--primary);
    color: white;
    cursor: pointer;
}

.modal-body .content-table tr.clickable:hover td {
    color: white;
}

/* Color Codes Modal Styling */
.color-codes-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.color-code-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    padding: var(--spacing-lg);
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    border: 2px solid var(--border-color);
    transition: all var(--transition-fast);
}

.color-code-item:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.color-code-item:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.color-preview-dot {
    width: 50px;
    height: 50px;
    border-radius: var(--radius-full);
    border: 3px solid rgba(128, 128, 128, 0.5);
    flex-shrink: 0;
    box-shadow: var(--shadow);
    transition: all var(--transition-fast);
}

.color-code-item:hover .color-preview-dot {
    transform: scale(1.15);
    box-shadow: var(--shadow-lg);
    border-color: rgba(128, 128, 128, 0.8);
}

.color-label-input {
    flex: 1;
    font-size: 1rem;
    font-weight: 500;
    padding: var(--spacing-sm) var(--spacing-md);
    cursor: text;
    pointer-events: auto;
}

.modal-footer {
    padding: var(--spacing-lg) var(--spacing-xl);
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-md);
    background: var(--bg-secondary);
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Duplicate modal styles removed - all modal styling consolidated at lines ~560-710 */

/* ========================================
   FLATPICKR CUSTOM STYLING
   ======================================== */

.flatpickr-calendar {
    background: var(--bg-primary) !important;
    border: 2px solid var(--border-color) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-lg) !important;
}

.flatpickr-months {
    background: var(--gradient) !important;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
}

.flatpickr-current-month {
    color: white !important;
}

.flatpickr-monthDropdown-months,
.numInputWrapper input {
    color: white !important;
    background: rgba(255, 255, 255, 0.2) !important;
    border: none !important;
}

.flatpickr-weekday {
    color: white !important;
    font-weight: 600;
}

.flatpickr-day {
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

.flatpickr-day:hover {
    background: var(--bg-tertiary) !important;
    border-color: var(--primary) !important;
}

.flatpickr-day.selected {
    background: var(--gradient) !important;
    border-color: var(--primary) !important;
    color: white !important;
}

.flatpickr-day.today {
    border-color: var(--primary) !important;
    font-weight: 700;
}

.flatpickr-time input {
    color: var(--text-primary) !important;
    background: var(--bg-secondary) !important;
}

.flatpickr-am-pm {
    color: var(--text-primary) !important;
    background: var(--bg-secondary) !important;
}

.flatpickr-time .numInputWrapper:hover,
.flatpickr-time input:hover {
    background: var(--bg-tertiary) !important;
}

/* ========================================
   ALERTS & MESSAGES
   ======================================== */

.messages-container {
    padding: var(--spacing-md);
}

.alert {
    padding: var(--spacing-md) var(--spacing-lg);
    margin-bottom: var(--spacing-md);
    border-radius: var(--radius-md);
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: var(--shadow-sm);
    animation: slideInDown var(--transition-base);
}

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

.alert-success {
    background: var(--success-bg);
    color: var(--success-text);
    border-left: 4px solid var(--success);
}

.alert-error {
    background: var(--error-bg);
    color: var(--error-text);
    border-left: 4px solid var(--error);
}

.alert-warning {
    background: var(--warning-bg);
    color: var(--warning-text);
    border-left: 4px solid var(--warning);
}

.alert-info {
    background: var(--info-bg);
    color: var(--info-text);
    border-left: 4px solid var(--info);
}

.alert-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    font-weight: 700;
    cursor: pointer;
    color: inherit;
    opacity: 0.7;
    transition: opacity var(--transition-fast);
    padding: 0 var(--spacing-sm);
}

.alert-close:hover {
    opacity: 1;
}

/* ========================================
   SEARCH RESULTS
   ======================================== */

.search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-primary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    max-height: 400px;
    overflow-y: auto;
    z-index: 100;
    margin-top: var(--spacing-sm);
}

.search-results:empty {
    display: none;
}

.search-result-item {
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
    transition: all var(--transition-fast);
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-item:hover {
    background: var(--bg-secondary);
}

.search-result-item a {
    display: block;
    color: var(--text-primary);
    text-decoration: none;
}

.search-result-item .result-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--primary);
    margin-bottom: var(--spacing-xs);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.search-result-item .result-badge {
    display: inline-block;
    padding: 2px 8px;
    font-size: 0.7rem;
    font-weight: 500;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.search-result-item .result-badge.status-new {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.search-result-item .result-badge.status-claimed {
    background: rgba(168, 85, 247, 0.1);
    color: #a855f7;
}

.search-result-item .result-badge.status-qualified {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}

.search-result-item .result-badge.status-contacted {
    background: rgba(251, 191, 36, 0.1);
    color: #fbbf24;
}

.search-result-item .result-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.search-result-item .result-info-line {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.search-result-item .result-info-icon {
    width: 14px;
    opacity: 0.6;
}

.search-result-item .result-highlight {
    color: var(--primary);
    font-weight: 500;
}

.search-results .no-results {
    padding: var(--spacing-lg);
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.search-results .search-error {
    padding: var(--spacing-lg);
    text-align: center;
    color: var(--danger);
    font-size: 0.9rem;
}

/* ========================================
   SOFTPHONE WIDGET - MINIMALIST DESIGN
   ======================================== */

.softphone-widget {
    background: transparent;
    border: none;
    padding: var(--spacing-md) 0;
    margin-top: var(--spacing-lg);
}

.softphone-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding-bottom: var(--spacing-sm);
    border-bottom: 2px solid var(--border-color);
}

.softphone-icon {
    font-size: 1.5rem;
}

.softphone-call-info {
    padding: var(--spacing-md);
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-md);
    text-align: center;
    border: 1px solid var(--border-color);
}

.call-status-text {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* Number Display */
.softphone-display {
    margin: var(--spacing-md) 0;
}

.softphone-display .softphone-input {
    width: 100%;
    padding: 12px;
    font-size: 1.25rem;
    font-weight: 600;
    text-align: center;
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    cursor: text;
    pointer-events: auto;
    user-select: text;
    -webkit-user-select: text;
}

.softphone-display .softphone-input:focus {
    outline: none;
    border-color: var(--primary);
}

/* Dialpad Grid (always visible) */
.softphone-keypad-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: var(--spacing-md);
}

.dialpad-key {
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: 50%;
    width: 100%;
    aspect-ratio: 1;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: inherit;
}

.dialpad-key:hover {
    background: var(--primary);
    border-color: var(--primary);
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.dialpad-key:hover .key-digit,
.dialpad-key:hover .key-letters {
    color: white;
}

.dialpad-key:active {
    transform: scale(0.95);
}

.key-digit {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: var(--text-primary);
}

.key-letters {
    font-size: 0.65rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-top: 2px;
    letter-spacing: 1px;
    line-height: 1;
}

/* Call Actions (below dialpad) */
.softphone-call-actions {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 8px;
    margin-bottom: var(--spacing-md);
}

.softphone-action-btn {
    padding: 12px;
    border-radius: 8px;
    border: 2px solid var(--border-color);
    background: var(--bg-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.softphone-backspace {
    font-size: 1.25rem;
}

.softphone-backspace:hover {
    background: var(--error);
    border-color: var(--error);
    color: white;
}

.softphone-call {
    background: var(--success);
    border-color: var(--success);
    color: white;
}

.softphone-call:hover {
    background: #198754;
    border-color: #198754;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(25, 135, 84, 0.3);
}

.softphone-call:active {
    transform: translateY(0);
}

/* Old styles - replaced by new phone design above */

.softphone-controls,
.softphone-incoming-controls {
    display: none; /* Hidden by default, shown during active call via JS */
    justify-content: space-around;
    align-items: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
}

.softphone-controls.active,
.softphone-incoming-controls.active {
    display: flex;
}

.softphone-control-btn {
    background: transparent;
    border: none;
    padding: var(--spacing-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    font-size: 2em;
}

.softphone-control-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.softphone-control-btn:active,
.softphone-control-btn:focus {
    outline: none;
}

.softphone-control-btn .btn-icon {
}

.softphone-control-btn .btn-text {
    display: none;
}

/* DTMF Keypad Styles */
/* Call Status Display (shown during active call) */
.softphone-call-info {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    border-radius: 8px;
    padding: 12px;
    margin: var(--spacing-md) 0;
    text-align: center;
    color: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.softphone-call-info .call-status-text {
    font-weight: 600;
    font-size: 1.1rem;
    margin: 0;
}

.softphone-mute .btn-icon,
.softphone-hold .btn-icon {
    color: var(--text-secondary);
}

.softphone-mute:hover .btn-icon,
.softphone-hold:hover .btn-icon {
    color: var(--primary);
}

.softphone-end .btn-icon {
    color: var(--error);
}

.softphone-end:hover .btn-icon {
    color: #dc2626;
}

.softphone-answer {
    background: rgba(25, 135, 84, 0.1);
    border: 1px solid var(--success);
}

.softphone-answer .btn-icon {
    color: var(--success);
}

.softphone-answer:hover {
    background: var(--success);
    color: white;
}

.softphone-answer:hover .btn-icon {
    color: white;
}

.softphone-reject {
    background: rgba(220, 38, 38, 0.1);
    border: 1px solid var(--error);
}

.softphone-reject .btn-icon {
    color: var(--error);
}

.softphone-reject:hover {
    background: var(--error);
    color: white;
}

.softphone-reject:hover .btn-icon {
    color: white;
}

/* ========================================
   COLOR CODES
   ======================================== */

/* Duplicate .color-codes-list removed - using line 658 with --spacing-lg */

.color-code-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.color-code-row:hover {
    background: var(--bg-tertiary);
}

.color-dot {
    display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-full);
    border: 2px solid var(--border-color);
    flex-shrink: 0;
}

.color-label {
    flex: 1;
}

/* ========================================
   SELECTED ITEMS (Tags)
   ======================================== */

.selected-members,
.selected-cards {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
    padding: var(--spacing-lg);
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    min-height: 60px;
}

.member-tag,
.selected-card {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-md);
    background: var(--primary);
    color: white;
    border-radius: var(--radius-full);
    font-size: 0.8125rem;
    font-weight: 500;
    transition: all var(--transition-fast);
}

.member-tag .remove-btn,
.selected-card .remove-btn {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 20px;
    height: 20px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    transition: all var(--transition-fast);
    padding: 0;
}

.member-tag .remove-btn:hover,
.selected-card .remove-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
    border-radius: var(--radius-full);
    font-size: 0.875rem;
}

.remove-tag {
    cursor: pointer;
    color: var(--error);
    font-weight: 700;
    transition: transform var(--transition-fast);
}

.remove-tag:hover {
    transform: scale(1.2);
}

/* ========================================
   BADGES
   ======================================== */

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    background: var(--error);
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: var(--radius-full);
    min-width: 20px;
}

/* ========================================
   RESPONSIVE - MOBILE
   ======================================== */

@media (max-width: 1024px) {
    body.authenticated .dashboard-main {
        margin-left: 0;
    }
    
    .sidebar {
        transform: translateX(-100%);
    }
    
    .sidebar.active {
        transform: translateX(0);
        box-shadow: var(--shadow-xl);
    }
    
    .hamburger {
        display: flex;
    }
    
    .desktop-actions {
        display: none !important;
    }
    
    .mobile-actions {
        display: flex !important;
    }
    
    .dashboard-header {
        padding-left: 70px;
    }
    
    .form-grid {
        grid-template-columns: 1fr;
    }
    
    .modal-content {
        max-width: 100%;
        margin: var(--spacing-md);
    }
}

@media (min-width: 1025px) {
    .mobile-actions {
        display: none !important;
    }
}

/* ========================================
   USER PROFILE PAGE
   ======================================== */

.profile-container {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--spacing-2xl);
}

.profile-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-xl);
    padding: var(--spacing-2xl);
    background: var(--bg-primary);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    margin-bottom: var(--spacing-2xl);
    border: 2px solid var(--border-color);
}

.profile-avatar {
    flex-shrink: 0;
}

.avatar-circle {
    width: 120px;
    height: 120px;
    border-radius: var(--radius-full);
    background: var(--gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-lg);
}

.avatar-initials {
    font-size: 3rem;
    font-weight: 800;
    color: white;
    text-transform: uppercase;
}

.profile-info {
    flex: 1;
}

.profile-name {
    font-size: 2rem;
    font-weight: 800;
    margin: 0 0 var(--spacing-sm) 0;
    color: var(--text-primary);
}

.profile-username {
    font-size: 1.125rem;
    color: var(--text-secondary);
    margin: 0 0 var(--spacing-xs) 0;
    font-weight: 500;
}

.profile-company {
    font-size: 1rem;
    color: var(--text-tertiary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.profile-company::before {
    content: "🏢";
    font-size: 1rem;
}

.profile-role-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--gradient);
    color: white;
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    font-weight: 600;
    margin-top: var(--spacing-sm);
}

.profile-role-badge .role-icon {
    font-size: 1.125rem;
}

.form-help-text {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin-top: var(--spacing-xs);
    font-style: italic;
}

/* Compact Search Bar */
.search-bar-compact {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}


.search-input-compact {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md) var(--spacing-sm) calc(var(--spacing-md) + 2rem);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    font-size: 0.9375rem;
    background: var(--bg-primary);
    color: var(--text-primary);
    transition: all var(--transition-fast);
    -webkit-text-fill-color: unset;
    background-clip: unset;
    -webkit-background-clip: unset;
}

.search-input-compact::placeholder {
    color: var(--text-tertiary);
    opacity: 1;
    -webkit-text-fill-color: var(--text-tertiary);
}

.search-icon {
    position: absolute;
    left: var(--spacing-md);
    font-size: 1.125rem;
    color: var(--text-secondary);
    pointer-events: none;
    -webkit-text-fill-color: var(--text-secondary);
}

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

.search-results-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    max-height: 240px;
    overflow-y: auto;
    display: none;
    margin-top: var(--spacing-xs);
    list-style: none;
    padding: 0;
}

/* Edit Role Modal Sections */
.modal-section {
    margin-bottom: var(--spacing-2xl);
    padding-bottom: var(--spacing-2xl);
    border-bottom: 1px solid var(--border-color);
}

.modal-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.modal-section-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 var(--spacing-sm) 0;
    color: var(--text-primary);
}

.modal-section-description {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0 0 var(--spacing-lg) 0;
    line-height: 1.6;
}

/* Selected Members Grid */
.selected-members-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-lg);
    padding: var(--spacing-lg);
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    min-height: 60px;
}

.selected-members-grid:empty::after {
    content: 'No users assigned yet';
    color: var(--text-tertiary);
    font-style: italic;
    font-size: 0.875rem;
}

/* Member Chips (for selected users) */
.member-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-md);
    background: var(--primary);
    color: white;
    border-radius: var(--radius-full);
    font-size: 0.8125rem;
    font-weight: 500;
    transition: all var(--transition-fast);
}

.member-chip .chip-text {
    line-height: 1;
}

.member-chip .chip-remove {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 20px;
    height: 20px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    transition: all var(--transition-fast);
    padding: 0;
}

.member-chip .chip-remove:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

/* Permission Categories */
.permission-category {
    margin-bottom: var(--spacing-xl);
}

.permission-category:last-child {
    margin-bottom: 0;
}

.permission-category-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 var(--spacing-md) 0;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.role-permissions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.role-permission-option {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    padding: var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    cursor: pointer;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.role-permission-option:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-sm);
}

.role-permission-option .permission-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-weight: 600;
    color: var(--text-primary);
}

.role-permission-option .permission-label {
    font-weight: 600;
}

.role-permission-option .permission-description {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.permission-hint {
    margin-top: var(--spacing-sm);
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.module-chip.locked-chip {
    opacity: 0.6;
    cursor: not-allowed;
    position: relative;
}

.module-chip.locked-chip::after {
    content: '🔒';
    margin-left: var(--spacing-xs);
    font-size: 0.85rem;
}

.role-permission-option input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: var(--primary);
}

/* Chip Selector / Module Selection - Unified System */
.module-selection-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
}

.module-pool {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    border: 2px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.available-modules,
.selected-modules {
    /* Flexbox layout for wrapping chips in rows */
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    align-content: flex-start;
    
    /* Scrolling after approximately 10 rows (10 rows * ~40px per row) */
    max-height: 400px;
    overflow-y: auto;
    min-height: 60px;
}

.scrollable-pool {
    max-height: 250px;
    overflow-y: auto;
}

.pool-label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    margin: 0;
    padding-bottom: var(--spacing-sm);
    border-bottom: 2px solid var(--border-color);
}

/* Group labels for sectioned chip selectors */
.chip-group-label {
    width: 100%;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    padding: var(--spacing-sm) 0 var(--spacing-xs) 0;
    margin-top: var(--spacing-sm);
    border-top: 1px solid var(--border-color);
}

.chip-group-label:first-child {
    margin-top: 0;
    border-top: none;
    padding-top: 0;
}

.module-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-md);
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    margin: 0;
    
    /* Width is auto - only as wide as the content needs */
    width: auto;
    white-space: nowrap;
    
    justify-content: flex-start;
}

.module-chip:hover {
    border-color: var(--primary);
    background: var(--primary);
    color: white;
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.module-chip.available-chip {
    cursor: pointer;
    transition: all 0.2s ease;
}

.module-chip.available-chip:hover {
    background: var(--gradient);
    color: white;
    transform: translateY(-2px) scale(1.02);
}

.module-chip.selected-chip {
    background: var(--gradient);
    color: white;
    border-color: transparent;
}

.module-chip.selected-chip:hover {
    background: var(--primary);
    transform: translateY(-2px) scale(0.98);
}

.module-chip .chip-text {
    flex: 1;
}

.module-chip .chip-remove {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 18px;
    height: 18px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1;
    transition: all var(--transition-fast);
    padding: 0;
}

.module-chip .chip-remove:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.15);
}

.profile-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xl);
}

.form-section {
    background: var(--bg-primary);
    border-radius: var(--radius-xl);
    padding: var(--spacing-2xl);
    box-shadow: var(--shadow);
    border: 2px solid var(--border-color);
}

.section-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 var(--spacing-xl) 0;
    color: var(--text-primary);
    padding-bottom: var(--spacing-md);
    border-bottom: 2px solid var(--border-color);
}

/* Duplicate .form-grid removed - using line 531 with --spacing-lg */

.label-icon {
    font-size: 1.125rem;
    margin-right: var(--spacing-xs);
}

.toggle-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.toggle-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    border: 2px solid var(--border-color);
    transition: all var(--transition-fast);
}

.toggle-item:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.toggle-item input[type="checkbox"] {
    width: 48px;
    height: 28px;
    cursor: pointer;
    flex-shrink: 0;
    margin-top: 4px;
}

.toggle-label {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    cursor: pointer;
    flex: 1;
    margin: 0;
}

.toggle-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.toggle-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.toggle-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.toggle-description {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.form-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-lg);
    padding-top: var(--spacing-lg);
}

@media (max-width: 768px) {
    .profile-header {
        flex-direction: column;
        text-align: center;
    }
    
    .profile-container {
        padding: var(--spacing-lg);
    }
    
    .form-grid {
        grid-template-columns: 1fr;
    }
    
    .form-actions {
        flex-direction: column;
    }
    
    .form-actions .btn {
        width: 100%;
    }
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

.hidden {
    display: none !important;
}

.visible {
    display: block !important;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.mt-1 { margin-top: var(--spacing-sm); }
.mt-2 { margin-top: var(--spacing-md); }
.mt-3 { margin-top: var(--spacing-lg); }
.mb-1 { margin-bottom: var(--spacing-sm); }
.mb-2 { margin-bottom: var(--spacing-md); }
.mb-3 { margin-bottom: var(--spacing-lg); }

.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.items-center {
    align-items: center;
}

.justify-between {
    justify-content: space-between;
}

.gap-1 { gap: var(--spacing-sm); }
.gap-2 { gap: var(--spacing-md); }
.gap-3 { gap: var(--spacing-lg); }

/* ========================================
   SCROLLBAR STYLING
   ======================================== */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary);
}

/* ========================================
   LOADING STATES
   ======================================== */

.loading {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid var(--border-color);
    border-top-color: var(--primary);
    border-radius: var(--radius-full);
    animation: spin 0.8s linear infinite;
}

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

/* ========================================
   FOCUS VISIBLE FOR ACCESSIBILITY
   ======================================== */

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

button:focus-visible,
a:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* ========================================
   AUTH PAGES (Login, Register)
   ======================================== */

.auth-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient);
    padding: var(--spacing-xl);
    position: relative;
    overflow: hidden;
}

.auth-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 600"><circle cx="100" cy="100" r="100" fill="rgba(255,255,255,0.05)"/><circle cx="900" cy="400" r="150" fill="rgba(255,255,255,0.05)"/><circle cx="1100" cy="150" r="80" fill="rgba(255,255,255,0.05)"/></svg>');
    opacity: 0.5;
}

.auth-container {
    background: var(--bg-primary);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    padding: var(--spacing-2xl);
    width: 100%;
    max-width: 450px;
    position: relative;
    z-index: 1;
    animation: fadeInUp 0.6s ease;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.auth-container img {
    margin-bottom: var(--spacing-lg);
}

.auth-title {
    font-size: 2rem;
    font-weight: 800;
    text-align: center;
    margin-bottom: var(--spacing-xl);
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.auth-form {
    margin-bottom: var(--spacing-lg);
}

.auth-form .form-group {
    margin-bottom: var(--spacing-lg);
}

.auth-button {
    width: 100%;
    padding: var(--spacing-lg);
    background: var(--gradient);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: all var(--transition-fast);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    margin-top: var(--spacing-md);
}

.auth-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.auth-button:active {
    transform: translateY(0);
}

.auth-text {
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin-top: var(--spacing-md);
}

.auth-text a {
    color: var(--primary);
    font-weight: 600;
    transition: color var(--transition-fast);
}

.auth-text a:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

/* Auth error messages */
.auth-wrapper .alert {
    margin-bottom: var(--spacing-lg);
}

/* Mobile responsive */
@media (max-width: 768px) {
    .auth-wrapper {
        padding: var(--spacing-md);
    }
    
    .auth-container {
        padding: var(--spacing-xl);
    }
    
    .auth-title {
        font-size: 1.75rem;
    }
}

/* ========================================
   DASHBOARD - MODULE SYSTEM
   ======================================== */

.common-module-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xl);
    padding: var(--spacing-xl);
}

.common-module-card {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    width: calc(50% - var(--spacing-xl));
    min-width: 450px;
    max-width: 800px;
    transition: all var(--transition-fast);
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
}

.common-module-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

.common-module-card.dragging {
    opacity: 0.5;
    transform: rotate(2deg);
    box-shadow: var(--shadow-xl);
}

/* Wide variant for data-heavy modules (reports, analytics, etc.) */
.common-module-card.module-card-wide {
    width: 100%;
    max-width: 1400px;
    min-width: unset;
}

/* Module Header */
.common-module-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-lg);
    background: var(--gradient);
    color: white;
    cursor: grab;
    border-bottom: 1px solid var(--border-color);
}

.common-module-header:active {
    cursor: grabbing;
}

/* Notifications modules - simpler header (no gradient, table has it) */
.notification-module .common-module-header {
    background: var(--bg-secondary);
    color: var(--text-primary);
    cursor: default;
    border-bottom: 2px solid var(--border-color);
}

.notification-module .common-module-header:active {
    cursor: default;
}

.common-module-title {
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    color: white;
}

.role-icon {
    font-size: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.common-module-close {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.2);
    color: white;
    font-size: 1.125rem;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.common-module-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}

/* Module List */
.common-module-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 500px;
    overflow-y: auto;
}

.common-module-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
    transition: all var(--transition-fast);
    background: var(--bg-primary);
    gap: var(--spacing-md);
}

.common-module-item:nth-child(even) {
    background: var(--bg-secondary);
}

.common-module-item:last-child {
    border-bottom: none;
}

.common-module-item:hover:not(.empty) {
    background: var(--bg-tertiary);
    padding-left: calc(var(--spacing-lg) + 4px);
}

.common-module-item a {
    color: var(--text-primary);
    text-decoration: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-md);
    flex: 1;
}

/* Item wrappers for flex layout */
.item-color {
    flex-shrink: 0;
}

.item-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.item-date-wrapper {
    display: flex;
    gap: var(--spacing-xs);
    align-items: baseline;
}

.item-amount-wrapper {
    flex-shrink: 0;
    text-align: right;
}

.common-module-item .item-name {
    font-weight: 600;
}

/* Manage Users specific list styling */
.user-row .avatar-dot {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    background: var(--gradient);
    color: #fff;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: var(--spacing-md);
    flex-shrink: 0;
}

.user-row .item-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.user-row .item-sub {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.user-link {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: var(--spacing-md) !important;
    width: 100% !important;
    text-decoration: none;
    color: inherit;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.icon-btn {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.15);
    color: white;
    cursor: pointer;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.icon-btn:hover {
    transform: scale(1.1);
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
}

.common-module-item .item-date-label {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    font-weight: 500;
}

.common-module-item .item-date {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.common-module-item .item-amount {
    font-weight: 700;
    color: var(--success);
    font-size: 0.875rem;
}

.common-module-item .item-label {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    font-style: italic;
}

.common-module-item.empty {
    font-style: italic;
    color: var(--text-tertiary);
    justify-content: center;
    cursor: default;
}

.common-module-item:not(.empty) {
    cursor: pointer;
}

/* Empty State */
.common-empty-state {
    text-align: center;
    padding: var(--spacing-2xl);
    color: var(--text-secondary);
    font-size: 1.125rem;
}

/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-lg);
    border-top: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.page-link {
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
    font-weight: 500;
    font-size: 0.875rem;
    transition: all var(--transition-fast);
    border: 1px solid transparent;
}

.page-link:hover {
    background: var(--bg-tertiary);
    color: var(--primary);
}

.page-link.active {
    background: var(--gradient);
    color: white;
    font-weight: 700;
}

.page-ellipsis {
    color: var(--text-tertiary);
    padding: 0 var(--spacing-sm);
}

/* Responsive Modules */
@media (max-width: 1024px) {
    .common-module-card {
        width: 100%;
        min-width: unset;
    }
    
    .common-module-grid {
        gap: var(--spacing-lg);
        padding: var(--spacing-lg);
    }
}

/* ========================================
   REPORTS PAGE STYLING
   ======================================== */

.reports-container {
    padding: 0;
}

.time-filter {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
}

.time-filter .form-container {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    flex-wrap: wrap;
}

.time-filter .form-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    min-width: 200px;
}

.time-filter label {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.time-filter .custom-date-range {
    display: flex;
    gap: var(--spacing-lg);
    flex-wrap: wrap;
}

.time-filter .apply-button {
    height: 42px;
    padding: 0 var(--spacing-xl);
    margin-top: auto;
}

.time-frame-display {
    padding: var(--spacing-sm) var(--spacing-lg);
    margin: 0;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 600;
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    white-space: nowrap;
    min-height: 42px;
}

/* ========================================
   REPORT MODULE TABLES
   ======================================== */

/* Table container - no scroll needed for wide cards */
.common-module-card > .content-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    font-size: 0.9375rem;
}

.content-table thead,
.content-table tbody {
    width: 100%;
}

.content-table thead {
    background: var(--bg-secondary);
    border-bottom: 3px solid var(--primary);
}

.content-table th {
    padding: var(--spacing-sm) var(--spacing-md);
    text-align: left;
    font-weight: 700;
    font-size: 0.8125rem;
    letter-spacing: 0.025em;
    text-transform: uppercase;
    color: var(--text-secondary);
    white-space: nowrap;
    background: var(--bg-secondary);
}

.content-table tbody tr {
    transition: all var(--transition-fast);
    border-bottom: 1px solid var(--border-color);
}

.content-table tbody tr:nth-child(odd) {
    background: var(--bg-primary);
}

.content-table tbody tr:nth-child(even) {
    background: var(--bg-secondary);
}

.content-table tbody tr:hover {
    background: var(--bg-tertiary);
    transform: translateX(2px);
    box-shadow: inset 3px 0 0 var(--primary);
}

.content-table tbody tr.clickable {
    cursor: pointer;
}

.content-table tbody tr.clickable:active {
    transform: translateX(1px);
}

.content-table td {
    padding: var(--spacing-md) var(--spacing-lg);
    color: var(--text-primary);
}

.content-table td:first-child {
    font-weight: 600;
}

.content-table td:not(:first-child) {
    color: var(--text-secondary);
}

/* Emphasize numeric/important values */
.content-table td[class*="amount"],
.content-table td[class*="total"],
.content-table td[class*="count"] {
    font-weight: 700;
    color: var(--success);
}

/* Empty state for tables */
.content-table tbody tr.empty-row {
    font-style: italic;
    color: var(--text-tertiary);
    text-align: center;
    cursor: default;
}

.content-table tbody tr.empty-row:hover {
    background: var(--bg-secondary);
    transform: none;
    box-shadow: none;
}

/* Responsive tables */
@media (max-width: 768px) {
    .content-table {
        font-size: 0.8125rem;
    }
    
    .content-table th,
    .content-table td {
        padding: var(--spacing-sm) var(--spacing-md);
    }
    
    .content-table th {
        font-size: 0.75rem;
    }
}

/* ========================================
   CARD-BASED HUB PAGES (Reports, Settings)
   ======================================== */

.hub-container {
    padding: var(--spacing-2xl);
    max-width: 1400px;
    margin: 0 auto;
}

.hub-header {
    margin-bottom: var(--spacing-2xl);
}

.hub-title {
    font-size: 2rem;
    font-weight: 800;
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: var(--spacing-sm);
}

.hub-description {
    font-size: 1.125rem;
    color: var(--text-secondary);
}

.hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--spacing-xl);
}

.hub-card {
    background: var(--bg-primary);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: all var(--transition-base);
    border: 2px solid var(--border-color);
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
}

.hub-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary);
}

.hub-card.disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.hub-card.disabled:hover {
    transform: none;
    box-shadow: var(--shadow);
    border-color: var(--border-color);
}

.hub-card-header {
    padding: var(--spacing-xl);
    background: var(--gradient);
    color: white;
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
}

.hub-card-icon {
    font-size: 3rem;
    line-height: 1;
}

.hub-card-title-wrapper {
    flex: 1;
}

.hub-card-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    color: white;
}

.hub-card-subtitle {
    font-size: 0.875rem;
    opacity: 0.9;
    margin-top: var(--spacing-xs);
}

.hub-card-body {
    padding: var(--spacing-xl);
    flex: 1;
}

.hub-card-description {
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: var(--spacing-lg);
}

.hub-card-features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.hub-card-features li {
    padding: var(--spacing-sm) 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.hub-card-features li::before {
    content: '✓';
    color: var(--success);
    font-weight: 700;
    font-size: 1.125rem;
}

.hub-card-badge {
    display: inline-block;
    padding: var(--spacing-xs) var(--spacing-md);
    background: var(--warning-bg);
    color: var(--warning-text);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 700;
    margin-top: var(--spacing-md);
}

.hub-card-footer {
    padding: var(--spacing-lg) var(--spacing-xl);
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.hub-card-action {
    color: var(--primary);
    font-weight: 700;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.hub-card:hover .hub-card-action {
    gap: var(--spacing-md);
}

/* Responsive Hub Cards */
@media (max-width: 768px) {
    .hub-container {
        padding: var(--spacing-lg);
    }
    
    .hub-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
    
    .hub-card-icon {
        font-size: 2.5rem;
    }
    
    .hub-card-title {
        font-size: 1.25rem;
    }
}

/* Recent Leads Sidebar Card */
.sidebar-card {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    border: 2px solid var(--border-color);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-md);
    margin-bottom: var(--spacing-lg);
}

.sidebar-card h3 {
    margin: 0 0 var(--spacing-md) 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    padding-bottom: var(--spacing-sm);
    border-bottom: 2px solid var(--border-color);
}

.recent-leads-grid {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.recent-lead-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    transition: all 0.2s ease;
    text-decoration: none;
    color: var(--text-primary);
    font-size: 0.875rem;
}

.recent-lead-item:hover {
    background: var(--bg-tertiary);
    border-color: var(--primary);
    transform: scale(1.02);
    text-decoration: none;
    color: var(--text-primary);
}

.recent-lead-icon {
    font-size: 1rem;
    flex-shrink: 0;
}

.recent-lead-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Notifications Page */
.notifications-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: var(--spacing-lg);
    max-width: 1600px;
    margin: 0 auto;
}

.notification-module {
    min-height: 300px;
}

.notification-table-wrapper {
    overflow-x: auto;
}

.notification-table {
    width: 100%;
    border-collapse: collapse;
}

.notification-table thead {
    position: sticky;
    top: 0;
    z-index: 10;
}

.notification-table thead tr {
    background: var(--gradient);
}

.notification-table th {
    padding: var(--spacing-md);
    text-align: left;
    font-weight: 700;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: white;
    background: transparent;
}

.notification-table tbody tr {
    border-bottom: 1px solid var(--border-color);
    transition: all 0.2s ease;
}

.notification-table tbody tr:nth-child(even) {
    background: var(--bg-secondary);
}

.notification-table tbody tr:hover {
    background: var(--bg-tertiary);
    cursor: pointer;
}

.notification-table tbody tr.completed {
    opacity: 0.6;
    text-decoration: line-through;
}

.notification-table td {
    padding: var(--spacing-md);
    font-size: 0.9375rem;
}

.notification-table .empty-message {
    text-align: center;
    color: var(--text-secondary);
    font-style: italic;
    padding: var(--spacing-xl);
}

.detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
}

.detail-item-full {
    grid-column: 1 / -1;
}

.detail-item {
    padding: var(--spacing-md);
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}

.detail-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--text-secondary);
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: var(--spacing-xs);
    display: block;
}

.detail-value {
    font-size: 1rem;
    color: var(--text-primary);
    font-weight: 500;
}

.message-display {
    padding: var(--spacing-md);
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    margin-bottom: var(--spacing-sm);
    min-height: 60px;
    color: var(--text-primary);
}

.selected-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    min-height: 60px;
}

.selected-chips:empty::after {
    content: 'No assignments yet';
    color: var(--text-tertiary);
    font-style: italic;
    font-size: 0.875rem;
}

.lead-details-wrapper {
    max-width: 1600px;
    margin: 0 auto;
    padding: var(--spacing-lg);
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr);
    gap: var(--spacing-xl);
    align-items: start;
}

@media (max-width: 1200px) {
    .lead-details-wrapper {
        grid-template-columns: 1fr;
    }
}

/* COLOR-CODED LEAD STYLING - Extremely subtle */
.lead-main-content {
    position: relative;
    transition: all 0.3s ease;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

.lead-details-wrapper.colored-border .lead-main-content::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    background: radial-gradient(ellipse at center, 
        transparent 0%, 
        transparent 40%,
        var(--selected-color, transparent) 100%
    );
    opacity: 0.2;
    border-radius: var(--radius-lg);
    pointer-events: none;
    z-index: -1;
    filter: blur(15px);
}

.lead-details-wrapper.colored-border .lead-main-content::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(180deg, 
        var(--selected-color, transparent) 0%, 
        transparent 100%
    );
    opacity: 0.005;
    border-radius: var(--radius-lg);
    pointer-events: none;
    z-index: -1;
}

.lead-sidebar {
    position: relative;
    z-index: 5;
}

.lead-sidebar-panel {
    position: sticky;
    top: var(--spacing-xl);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.lead-sidebar-panel .accordion-section {
    box-shadow: var(--shadow-lg);
}

@media (min-width: 1201px) {
    .lead-sidebar-panel {
        max-width: 420px;
    }
}

@media (max-width: 1200px) {
    .lead-sidebar {
        order: -1;
        z-index: auto;
    }

    .lead-sidebar-panel {
        position: static;
    }

    .lead-sidebar-panel .accordion-section {
        box-shadow: none;
    }
}

/* LEAD HEADER - Prominent Contact Info */
.lead-hero {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    border: 2px solid var(--border-color);
    box-shadow: var(--shadow-md);
    margin-bottom: var(--spacing-lg);
    position: relative;
    transition: all 0.3s ease;
}

.lead-details-wrapper.colored-border .lead-hero {
    position: relative;
    isolation: isolate;
}

.lead-details-wrapper.colored-border .lead-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 2px;
    background: var(--selected-color, var(--border-color));
    opacity: 0.4;
    pointer-events: none;
}

.lead-hero-header {
    position: relative;
    z-index: 1;
}

.lead-hero-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--spacing-lg);
}

.lead-title-section h1 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 var(--spacing-sm) 0;
}

.lead-meta {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.lead-actions {
    display: flex;
    gap: var(--spacing-sm);
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-md);
}

.contact-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    border: 2px solid var(--border-color);
    transition: all 0.3s ease;
}

.contact-item:hover {
    border-color: var(--primary);
    transform: translateX(4px);
}

.contact-icon {
    font-size: 24px;
    flex-shrink: 0;
}

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

.contact-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--text-secondary);
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.contact-value {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    word-break: break-all;
}

.contact-action {
    padding: 8px 16px;
    background: var(--gradient);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-weight: 600;
    font-size: 0.875rem;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.contact-action:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-sm);
    color: white;
    text-decoration: none;
}

/* ACCORDION FOR LESS-USED DETAILS */
.accordion-section {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    border: 2px solid var(--border-color);
    margin-bottom: var(--spacing-lg);
    overflow: hidden;
    position: relative;
    transition: all 0.3s ease;
}

.lead-details-wrapper.colored-border .accordion-section {
    position: relative;
    isolation: isolate;
}

.lead-details-wrapper.colored-border .accordion-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 1px;
    background: var(--selected-color, var(--border-color));
    opacity: 0.35;
    pointer-events: none;
}

.accordion-header {
    padding: var(--spacing-lg);
    background: var(--bg-secondary);
    border-bottom: 2px solid var(--border-color);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;
    user-select: none;
}

.accordion-header:hover {
    background: var(--bg-tertiary);
}

.accordion-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.accordion-toggle {
    font-size: 1.5rem;
    color: var(--text-secondary);
    transition: transform 0.3s ease;
}

.accordion-header.active .accordion-toggle {
    transform: rotate(180deg);
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.accordion-content.active {
    max-height: 1000px;
}

.accordion-body {
    padding: var(--spacing-lg);
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-md);
}

.detail-item {
    padding: var(--spacing-md);
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    border: 2px solid var(--border-color);
}

.detail-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--text-secondary);
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: var(--spacing-xs);
}

.detail-value {
    font-size: 1rem;
    color: var(--text-primary);
    font-weight: 500;
}

/* NOTES SECTION */
.notes-card {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    border: 2px solid var(--border-color);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-md);
    position: relative;
    transition: all 0.3s ease;
}

.lead-details-wrapper.colored-border .notes-card {
    position: relative;
    isolation: isolate;
}

.lead-details-wrapper.colored-border .notes-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--selected-color, var(--border-color));
    opacity: 0.35;
    pointer-events: none;
}

.notes-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 2px solid var(--border-color);
}

.notes-header h2 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.add-note-form {
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-md);
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    border: 2px solid var(--border-color);
}

.note-item {
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    transition: all 0.3s ease;
}

.note-item:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-sm);
}

.note-item.pinned {
    border-color: var(--warning);
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.1), rgba(245, 158, 11, 0.05));
}

.note-header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-sm);
}

.note-actions {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.note-author {
    font-weight: 600;
    color: var(--text-primary);
}

.note-date {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.note-content {
    color: var(--text-primary);
    line-height: 1.6;
    margin: 0;
    max-height: 300px;
    overflow: auto;
}

.pin-note-btn {
    cursor: pointer;
    transition: transform 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pin-note-btn .pin-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    transition: transform 0.2s ease;
}

.pin-note-btn:hover .pin-icon {
    transform: scale(1.2);
}

.delete-note-btn {
    background: none;
    border: none;
    color: var(--danger);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, color 0.2s ease;
}

.delete-note-btn:hover {
    transform: scale(1.1);
    color: var(--danger-dark, #b91c1c);
}

.delete-note-btn:focus-visible {
    outline: 2px solid var(--danger);
    outline-offset: 2px;
}

/* SALES HISTORY */
.sales-card {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    border: 2px solid var(--border-color);
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-lg);
    box-shadow: var(--shadow-md);
    position: relative;
    transition: all 0.3s ease;
}

.lead-details-wrapper.colored-border .sales-card {
    position: relative;
    isolation: isolate;
}

.lead-details-wrapper.colored-border .sales-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--selected-color, var(--border-color));
    opacity: 0.35;
    pointer-events: none;
}

.sales-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 2px solid var(--border-color);
}

.sales-header h2 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.sale-item {
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
    transition: all 0.3s ease;
}

.sale-item:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-sm);
}

.sale-item.refunded {
    border-color: var(--warning);
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.05), rgba(220, 38, 38, 0.02));
}

.sale-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.sale-detail {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sale-detail-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--text-secondary);
    font-weight: 600;
    letter-spacing: 0.5px;
}

.sale-detail-value {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
}

.sale-actions {
    display: flex;
    gap: var(--spacing-sm);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--border-color);
}

.refunded-badge {
    display: inline-block;
    padding: 4px 12px;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: var(--spacing-sm);
}

/* SIDEBAR */
.lead-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

/* COLOR CODE PICKER */
.color-code-container {
    display: inline-flex;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
}

.color-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    border: 3px solid var(--border-color);
    transition: all 0.3s ease;
    position: relative;
}

.color-dot:hover {
    transform: scale(1.2);
    border-color: var(--primary);
    box-shadow: 0 0 12px rgba(0,0,0,0.3);
}

.color-dot.selected {
    border-color: var(--primary);
    box-shadow: 0 0 16px rgba(0,0,0,0.4);
    transform: scale(1.15);
}

.color-dot.selected::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-weight: 700;
    font-size: 16px;
    text-shadow: 0 0 3px rgba(0,0,0,0.5);
}

.clear-color-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    border: 3px solid var(--border-color);
    background: 
        linear-gradient(135deg, transparent 0%, transparent 45%, var(--danger) 45%, var(--danger) 55%, transparent 55%, transparent 100%),
        linear-gradient(-135deg, transparent 0%, transparent 45%, var(--danger) 45%, var(--danger) 55%, transparent 55%, transparent 100%);
    transition: all 0.3s ease;
    position: relative;
}

.clear-color-dot:hover {
    transform: scale(1.2);
    border-color: var(--danger);
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.4);
}

/* COLOR LABEL */
.color-label-display {
    display: inline-block;
    padding: 8px 16px;
    border-radius: var(--radius-full);
    font-weight: 600;
    font-size: 0.875rem;
    margin-left: var(--spacing-sm);
    box-shadow: var(--shadow-sm);
}

.color-label-display.visible {
    display: inline-block;
}

/* UTILITIES */
.empty-message {
    text-align: center;
    padding: var(--spacing-xl);
    color: var(--text-secondary);
    font-style: italic;
}

.hidden {
    display: none;
}

/* Audio alerts settings */
.audio-alerts-options {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.audio-alerts-toggle {
    display: flex;
    gap: var(--spacing-md);
    align-items: flex-start;
    margin: var(--spacing-md) 0;
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
}

.audio-alerts-toggle input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 3px;
}

.audio-alerts-toggle-label {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.audio-alerts-toggle-label strong {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary, #111827);
}

.audio-alerts-toggle-label small {
    font-size: 0.82rem;
    color: var(--text-secondary, #475569);
}

.audio-alerts-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.modal-footer-note {
    font-size: 0.85rem;
    color: var(--text-secondary, #475569);
    text-align: center;
}

@media (max-width: 720px) {
    .audio-alerts-toggle {
        flex-direction: row;
    }
}

{% endblock %}

{% block content %}
<div id="lead-details-container" class="lead-details-wrapper {% if lead.color %}colored-border{% endif %}" style="{% if lead.color %}--selected-color: {{ lead.color.color_hex }};{% endif %}">
    <!-- MAIN CONTENT -->
    <div class="lead-main-content">
        
        <!-- HERO SECTION - Prominent Contact Info -->
        <div class="lead-hero">
            <div class="lead-hero-header">
                <div class="lead-title-section">
                    <h1>{{ lead.name|default:"Unnamed Lead" }}</h1>
                    <div class="lead-meta">
                        Created {{ lead.creation_date|format_datetime_tz:request.user.timezone }}
                        {% if lead.time_to_claim %}
                            • Claimed in {{ lead.time_to_claim|format_duration }}
                        {% endif %}
                        {% if lead.color %}
                            • <span class="color-label-display" style="background-color: {{ lead.color.color_hex }}; color: {% if lead.color.color_hex in '#FFFF00,#FFA500' %}#000{% else %}#fff{% endif %};">{{ lead.color.label }}</span>
                        {% endif %}
                    </div>
                </div>
                <div class="lead-actions">
                    <button type="button" id="save-lead-btn" class="btn btn-primary">
                        <span class="btn-icon">💾</span>
                        <span class="btn-text">Save</span>
                    </button>
                    {% if is_admin_or_manager %}
                    <button type="button" id="delete-lead-btn" class="btn btn-danger">
                        <span class="btn-icon">🗑️</span>
                    </button>
                    {% endif %}
                </div>
            </div>
            
            <!-- Quick Contact Cards -->
            <div class="contact-grid">
                <div class="contact-item">
                    <div class="contact-icon">📞</div>
                    <div class="contact-info">
                        <div class="contact-label">Phone</div>
                        <div class="contact-value">{{ lead.phone|default:"Not provided" }}</div>
                    </div>
                    {% if lead.phone %}
                        {% if phone_integration_enabled %}
                        <button type="button" id="call-lead-btn" class="contact-action" data-phone="{{ lead.phone }}" data-lead-id="{{ lead.id }}" data-lead-name="{{ lead.name|default:'Unnamed Lead' }}">
                            Call
                        </button>
                        {% else %}
                        <a href="tel:{{ lead.phone }}" class="contact-action">Call</a>
                        {% endif %}
                    {% endif %}
                </div>
                
                <div class="contact-item">
                    <div class="contact-icon">📧</div>
                    <div class="contact-info">
                        <div class="contact-label">Email</div>
                        <div class="contact-value">{{ lead.email|default:"Not provided" }}</div>
                    </div>
                    {% if lead.email %}
                    <a href="mailto:{{ lead.email }}" class="contact-action">Email</a>
                    {% endif %}
                </div>
                
                {% if lead.alternate_phone %}
                <div class="contact-item">
                    <div class="contact-icon">📱</div>
                    <div class="contact-info">
                        <div class="contact-label">Alt Phone</div>
                        <div class="contact-value">{{ lead.alternate_phone }}</div>
                    </div>
                    <a href="tel:{{ lead.alternate_phone }}" class="contact-action">Call</a>
                </div>
                {% endif %}
                
                {% if lead.alternate_email %}
                <div class="contact-item">
                    <div class="contact-icon">📬</div>
                    <div class="contact-info">
                        <div class="contact-label">Alt Email</div>
                        <div class="contact-value">{{ lead.alternate_email }}</div>
                    </div>
                    <a href="mailto:{{ lead.alternate_email }}" class="contact-action">Email</a>
                </div>
                {% endif %}
            </div>
        </div>
        
        <!-- MAIN FORM - All inputs inside one form -->
        <form id="lead-details-form">
            <input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}">
            <input type="hidden" name="campaign" value="{{ lead.campaign|default:'' }}">
            <input type="hidden" name="color_id" value="{{ lead.color.id|default:'' }}">
            <input type="hidden" name="company" value="{{ lead.company.id }}">
            <input type="hidden" name="has_active_membership" id="hidden-membership" value="{{ lead.has_active_membership|yesno:'true,false' }}">
            
            <!-- QUICK EDIT - Essential Fields Only -->
            <div class="accordion-section">
                <div class="accordion-header">
                    <div class="accordion-title">
                        <span>✏️</span>
                        <span>Quick Edit</span>
                    </div>
                    <span class="accordion-toggle">▼</span>
                </div>
                <div class="accordion-content">
                    <div class="accordion-body">
                        <div class="detail-grid">
                            <div class="form-group">
                                <label for="first_name" class="detail-label">First Name</label>
                                <input type="text" id="first_name" name="first_name" class="form-input" value="{{ lead.first_name|default:'' }}">
                            </div>
                            <div class="form-group">
                                <label for="last_name" class="detail-label">Last Name</label>
                                <input type="text" id="last_name" name="last_name" class="form-input" value="{{ lead.last_name|default:'' }}">
                            </div>
                            <div class="form-group">
                                <label for="phone" class="detail-label">Phone</label>
                                <input type="tel" id="phone" name="phone" class="form-input" value="{{ lead.phone|default:'' }}">
                            </div>
                            <div class="form-group">
                                <label for="email" class="detail-label">Email</label>
                                <input type="email" id="email" name="email" class="form-input" value="{{ lead.email|default:'' }}">
                            </div>
                            <div class="form-group">
                                <label for="alternate_phone" class="detail-label">Alternate Phone</label>
                                <input type="tel" id="alternate_phone" name="alternate_phone" class="form-input" value="{{ lead.alternate_phone|default:'' }}">
                            </div>
                            <div class="form-group">
                                <label for="alternate_email" class="detail-label">Alternate Email</label>
                                <input type="email" id="alternate_email" name="alternate_email" class="form-input" value="{{ lead.alternate_email|default:'' }}">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        
        <!-- ADDRESS & LOCATION - Collapsible -->
        <div class="accordion-section">
            <div class="accordion-header">
                <div class="accordion-title">
                    <span>📍</span>
                    <span>Address & Location</span>
                </div>
                <span class="accordion-toggle">▼</span>
            </div>
            <div class="accordion-content">
                <div class="accordion-body">
                    <div class="detail-grid">
                        <div class="detail-item" style="grid-column: 1 / -1;">
                            <div class="detail-label">Street Address</div>
                            <div class="detail-value">
                                <input type="text" id="address_line1" name="address_line1" class="form-input" value="{{ lead.address_line1|default:'' }}" placeholder="123 Main St">
                            </div>
                        </div>
                        <div class="detail-item">
                            <div class="detail-label">City</div>
                            <div class="detail-value">
                                <input type="text" id="city" name="city" class="form-input" value="{{ lead.city|default:'' }}" placeholder="Los Angeles">
                            </div>
                        </div>
                        <div class="detail-item">
                            <div class="detail-label">State</div>
                            <div class="detail-value">
                                <input type="text" id="state" name="state" class="form-input" value="{{ lead.state|default:'' }}" placeholder="CA" maxlength="2">
                            </div>
                        </div>
                        <div class="detail-item">
                            <div class="detail-label">Zip Code</div>
                            <div class="detail-value">
                                <input type="text" id="postal_code" name="postal_code" class="form-input" value="{{ lead.postal_code|default:'' }}" placeholder="90001">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- MEMBERSHIP & IDS - Collapsible -->
        <div class="accordion-section">
            <div class="accordion-header">
                <div class="accordion-title">
                    <span>💳</span>
                    <span>Membership & IDs</span>
                </div>
                <span class="accordion-toggle">▼</span>
            </div>
            <div class="accordion-content">
                <div class="accordion-body">
                    <div class="detail-grid">
                        <div class="detail-item">
                            <div class="detail-label">Membership Status</div>
                            <button type="button" id="toggle-membership-btn" class="btn {% if lead.has_active_membership %}btn-success{% else %}btn-secondary{% endif %}" style="width: 100%; margin-top: var(--spacing-sm);" data-active="{{ lead.has_active_membership|yesno:'true,false' }}">
                                {% if lead.has_active_membership %}✅ Active{% else %}➖ Inactive{% endif %}
                            </button>
                            <input type="hidden" id="hidden-membership" value="{{ lead.has_active_membership|yesno:'true,false' }}">
                        </div>
                        <div class="detail-item">
                            <div class="detail-label">Customer ID</div>
                            <div class="detail-value">
                                <input type="text" id="customer_id" name="customer_id" class="form-input" value="{{ lead.customer_id|default:'' }}" placeholder="Auto-generated">
                            </div>
                        </div>
                        <div class="detail-item">
                            <div class="detail-label">Membership ID</div>
                            <div class="detail-value">
                                <input type="text" id="membership_id" name="membership_id" class="form-input" value="{{ lead.membership_id|default:'' }}">
                            </div>
                        </div>
                        <div class="detail-item">
                            <div class="detail-label">Membership Amount</div>
                            <div class="detail-value">
                                <input type="number" id="membership_amount" name="membership_amount" step="0.01" class="form-input" value="{{ lead.membership_amount|default:'' }}" placeholder="0.00">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- OWNERSHIP & CAMPAIGN - Collapsible -->
        <div class="accordion-section">
            <div class="accordion-header">
                <div class="accordion-title">
                    <span>👤</span>
                    <span>Ownership & Campaign</span>
                </div>
                <span class="accordion-toggle">▼</span>
            </div>
            <div class="accordion-content">
                <div class="accordion-body">
                    <div class="detail-grid">
                        <div class="detail-item">
                            <div class="detail-label">Current Owner</div>
                            <div class="detail-value">{{ lead.current_owner.display_name|default:"Unassigned" }}</div>
                            <button type="button" id="transfer-owner-btn" class="btn btn-secondary" style="width: 100%; margin-top: var(--spacing-sm);">
                                Transfer Ownership
                            </button>
                            <div id="transfer-owner-dropdown" class="hidden" style="margin-top: var(--spacing-sm);">
                                <select id="current_owner" name="current_owner" class="form-select">
                                    <option value="" {% if not lead.current_owner %}selected{% endif %}>Unassigned</option>
                                    {% for user in active_company_users %}
                                    <option value="{{ user.id }}" {% if lead.current_owner == user %}selected{% endif %}>
                                        {{ user.display_name|default:user.username }}
                                    </option>
                                    {% endfor %}
                                </select>
                                <div style="display: flex; gap: var(--spacing-sm); margin-top: var(--spacing-sm);">
                                    <button type="button" id="confirm-transfer-btn" class="btn btn-primary" style="flex: 1;">Confirm</button>
                                    <button type="button" id="cancel-transfer-btn" class="btn btn-secondary" style="flex: 1;">Cancel</button>
                                </div>
                            </div>
                        </div>
                        <div class="detail-item">
                            <div class="detail-label">Campaign</div>
                            <div class="detail-value">{{ lead.campaign|default:"None" }}</div>
                            <input type="hidden" name="campaign" value="{{ lead.campaign|default:'' }}">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </form>
        
        <!-- NOTES SECTION -->
        <div class="notes-card">
            <div class="notes-header">
                <h2>📝 Notes</h2>
                <div>
                    <div id="color-code-container" class="color-code-container" style="display: inline-flex; gap: var(--spacing-xs);"></div>
                    <div id="color-label-box" class="color-label-display {% if lead.color %}visible{% endif %}" data-color-id="{{ lead.color.id|default:'' }}" data-color-hex="{{ lead.color.color_hex|default:'' }}" style="{% if lead.color %}background-color: {{ lead.color.color_hex }}; color: {% if lead.color.color_hex in '#FFFF00,#FFA500' %}#000{% else %}#fff{% endif %};{% else %}display: none;{% endif %}">
                        {{ lead.color.label|default:'' }}
                    </div>
                </div>
            </div>
            
            <div class="add-note-form">
                <form id="add-note-form">
                    <textarea id="notes" name="notes" rows="3" class="form-input" placeholder="Add a note..." style="margin-bottom: var(--spacing-sm);"></textarea>
                    <button type="submit" class="btn btn-primary">
                        <span class="btn-icon">➕</span>
                        <span class="btn-text">Add Note</span>
                    </button>
                </form>
            </div>
            
            <div style="margin: var(--spacing-md) 0;">
                <input type="search" id="note-search-bar" class="form-input" placeholder="🔍 Search notes..." autocomplete="off">
                <div id="note-search-results" class="search-results"></div>
            </div>
            
            <div id="notes-list">
                {% for note in lead.notes.all %}
                <div class="note-item {% if note.is_pinned %}pinned{% endif %}" data-note-id="{{ note.id }}">
                    <div class="note-header-flex">
                        <div>
                            <span class="note-author">{{ note.author.display_name|default:"Unknown" }}</span>
                            <span class="note-date"> • {{ note.created_at|date:"M d, Y, h:i A" }}</span>
                        </div>
                        <span class="pin-note-btn" data-note-id="{{ note.id }}" data-pinned="{{ note.is_pinned|yesno:'true,false' }}">
                            <img src="{% static note.is_pinned|yesno:'images/pinned.png,images/unpinned.png' %}"
                                 alt="{{ note.is_pinned|yesno:'Pinned,Unpinned' }}"
                                 title="{{ note.is_pinned|yesno:'Unpin Note,Pin Note' }}"
                                 class="pin-icon">
                        </span>
                    </div>
                    <p class="note-content">{{ note.content|safe }}</p>
                </div>
                {% empty %}
                <p class="empty-message">No notes yet. Add your first note above!</p>
                {% endfor %}
            </div>
            
            <div id="notes-pagination" class="pagination" style="margin-top: var(--spacing-md);"></div>
        </div>
        
        <!-- SALES HISTORY -->
        <div class="sales-card">
            <div class="sales-header">
                <h2>💰 Sales History</h2>
                <button id="add-sale-btn" class="btn btn-primary">
                    <span class="btn-icon">➕</span>
                    <span class="btn-text">Add Sale</span>
                </button>
            </div>
            
            <div id="sales-list">
                {% for sale in lead.sales.all|slice:":3" %}
                <div class="sale-item {% if sale.is_refunded %}refunded{% endif %}" data-sale-id="{{ sale.id }}">
                    <div class="sale-grid">
                        <div class="sale-detail">
                            <div class="sale-detail-label">Date</div>
                            <div class="sale-detail-value">{{ sale.sale_date|date:"M d, Y" }}</div>
                        </div>
                        <div class="sale-detail">
                            <div class="sale-detail-label">Sold By</div>
                            <div class="sale-detail-value">{{ sale.sold_by.display_name }}</div>
                        </div>
                        <div class="sale-detail">
                            <div class="sale-detail-label">Amount</div>
                            <div class="sale-detail-value">
                                {% if sale.refunded_amount and sale.refunded_amount > 0 %}
                                    ${{ sale.final_amount }}
                                    <span class="refunded-badge">Refunded</span>
                                {% else %}
                                    ${{ sale.final_amount }}
                                {% endif %}
                            </div>
                        </div>
                        {% if sale.transaction_id %}
                        <div class="sale-detail">
                            <div class="sale-detail-label">Transaction ID</div>
                            <div class="sale-detail-value" style="font-size: 0.875rem;">{{ sale.transaction_id }}</div>
                        </div>
                        {% endif %}
                    </div>
                    
                    {% if is_admin_or_manager %}
                    <div class="sale-actions">
                        <button class="btn btn-sm btn-secondary edit-sale-btn" data-sale-id="{{ sale.id }}">Edit</button>
                        {% if sale.price %}
                            {% if not sale.refunded_amount or sale.refunded_amount < sale.price %}
                            <button class="btn btn-sm btn-warning refund-sale-btn" data-sale-id="{{ sale.id }}">Refund</button>
                            {% endif %}
                        {% endif %}
                        <button class="btn btn-sm btn-danger delete-sale-btn" data-sale-id="{{ sale.id }}">Delete</button>
                    </div>
                    {% endif %}
                </div>
                {% empty %}
                <p class="empty-message">No sales recorded yet.</p>
                {% endfor %}
            </div>
            
            <div id="sales-pagination"></div>
            {% if lead.sales.count > 3 %}
            <button id="load-more-sales-btn" class="btn btn-secondary" style="width: 100%; margin-top: var(--spacing-md);">Load More Sales</button>
            {% endif %}
        </div>
    </div>
    
</div>

<!-- Add Sale Modal -->
<div id="add-sale-modal" class="modal">
    <div class="modal-content">
        <h2 class="modal-title">💰 Add Sale</h2>
        <span id="add-sale-modal-close" class="modal-close">×</span>
        <div class="modal-body">
            <form id="sale-form">
                <input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}">
                <input type="hidden" id="sale-id" name="sale_id" value="">
                <div id="sale-form-content"></div>
            </form>
        </div>
        <div class="modal-footer">
            <button type="button" id="cancel-sale-btn" class="btn btn-secondary">Cancel</button>
            <button type="submit" form="sale-form" id="save-sale-btn" class="btn btn-primary">
                <span class="btn-icon">💾</span>
                <span class="btn-text">Save Sale</span>
            </button>
        </div>
    </div>
</div>

<!-- Refund Sale Modal -->
<div id="refund-sale-modal" class="modal">
    <div class="modal-content">
        <h2 class="modal-title">💸 Refund Sale</h2>
        <span id="refund-sale-modal-close" class="modal-close">×</span>
        <div class="modal-body">
            <div id="refund-sale-info" style="margin-bottom: var(--spacing-md); padding: var(--spacing-md); background: var(--bg-secondary); border-radius: var(--radius-md);"></div>
            <form id="refund-form">
                <input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}">
                <div id="refund-form-content"></div>
            </form>
        </div>
        <div class="modal-footer">
            <button type="button" id="cancel-refund-btn" class="btn btn-secondary">Cancel</button>
            <button type="submit" form="refund-form" id="process-refund-btn" class="btn btn-warning">
                <span class="btn-icon">💸</span>
                <span class="btn-text">Process Refund</span>
            </button>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/3.1.6/purify.min.js"></script>
<script>
    const userTimezone = "{{ user.timezone|default:'UTC' }}";
    const userCompanyId = "{{ user.companyuser.company.id }}";
    const leadId = "{{ lead.id }}";
</script>
<script src="{% static 'js/lead_details.js' %}?v=2.7"></script>
<script>
// Accordion functionality
document.addEventListener('DOMContentLoaded', function() {
    // Initialize accordions
    const accordionHeaders = document.querySelectorAll('.accordion-header');
    accordionHeaders.forEach(header => {
        header.addEventListener('click', function() {
            const content = this.nextElementSibling;
            const isActive = this.classList.contains('active');
            
            // Toggle active state
            this.classList.toggle('active');
            content.classList.toggle('active');
        });
    });
    
    // Phone system integration
    const callBtn = document.getElementById('call-lead-btn');
    if (callBtn) {
        callBtn.addEventListener('click', async function() {
            const phone = this.dataset.phone;
            const leadId = this.dataset.leadId;
            const leadName = this.dataset.leadName;
            
            if (!phone) {
                alert('No phone number available for this lead');
                return;
            }
            
            if (!window.softphone) {
                console.error('Softphone not initialized');
                alert('Softphone not ready. Please refresh the page.');
                return;
            }
            
            callBtn.disabled = true;
            callBtn.innerHTML = '<span>📞</span> Connecting...';
            
            try {
                await window.softphone.makeCall(phone, leadId);
            } catch (error) {
                console.error('Error making call:', error);
                alert('Failed to make call: ' + error.message);
                callBtn.disabled = false;
                callBtn.textContent = 'Call';
            }
        });
    }
});

// Re-initialize on SPA load
document.addEventListener('spa:contentLoaded', function() {
    if (window.location.pathname.includes('/lead/')) {
        const accordionHeaders = document.querySelectorAll('.accordion-header');
        accordionHeaders.forEach(header => {
            header.addEventListener('click', function() {
                const content = this.nextElementSibling;
                this.classList.toggle('active');
                content.classList.toggle('active');
            });
        });
    }
});
</script>

.call-reporting-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--spacing-lg);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.stat-card {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--spacing-xl);
    border: 2px solid var(--border-color);
    text-align: center;
    transition: all 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary);
}

.stat-icon {
    font-size: 48px;
    margin-bottom: var(--spacing-sm);
    filter: grayscale(0.2);
}

.stat-value {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: var(--spacing-sm) 0;
}

.stat-label {
    color: var(--text-secondary);
    font-size: 0.9375rem;
    font-weight: 500;
}

.report-section {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
    border: 2px solid var(--border-color);
}

.report-section h2 {
    margin: 0 0 var(--spacing-lg) 0;
    padding-bottom: var(--spacing-md);
    border-bottom: 2px solid var(--border-color);
    color: var(--text-primary);
    font-size: 1.5rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.call-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: var(--spacing-md);
}

.call-table thead {
    background: var(--gradient);
}

.call-table th {
    padding: var(--spacing-md);
    text-align: left;
    font-weight: 600;
    color: white;
    border-bottom: none;
    font-size: 0.9375rem;
}

.call-table td {
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}

.call-table tbody tr {
    transition: all 0.2s ease;
}

.call-table tbody tr:nth-child(even) {
    background: var(--bg-secondary);
}

.call-table tbody tr:hover {
    background: var(--bg-tertiary);
    transform: translateX(4px);
}

.call-direction {
    display: inline-block;
    padding: 6px 12px;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.direction-inbound {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
}

.direction-outbound {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
}

.call-status {
    display: inline-block;
    padding: 6px 12px;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.status-answered {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
}

.status-missed {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
}

.status-voicemail {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
}

.status-active {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.lead-link {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.lead-link:hover {
    color: var(--secondary);
    text-decoration: underline;
}

.play-recording-btn,
.delete-recording-btn {
    border: none;
    background: var(--bg-secondary);
    cursor: pointer;
    font-size: 1.25rem;
    padding: 8px 12px;
    border-radius: var(--radius-md);
    transition: all 0.3s ease;
    border: 2px solid var(--border-color);
}

.play-recording-btn:hover {
    background: var(--gradient);
    transform: scale(1.1);
    border-color: var(--primary);
}

.delete-recording-btn:hover {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    transform: scale(1.1);
    border-color: #dc2626;
}

.empty-state {
    text-align: center;
    padding: var(--spacing-xl);
    color: var(--text-secondary);
}

.empty-state h4 {
    margin: 0 0 var(--spacing-sm) 0;
    color: var(--text-primary);
    font-size: 1.125rem;
}

.empty-state p {
    margin: 0;
    color: var(--text-secondary);
}

.pagination-wrapper {
    margin-top: var(--spacing-lg);
    display: flex;
    justify-content: center;
}

.pagination {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
}

.pagination-link {
    padding: 10px 16px;
    background: var(--gradient);
    color: white;
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: all 0.3s ease;
    font-size: 0.9375rem;
    font-weight: 600;
}

.pagination-link:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-sm);
}

.pagination-info {
    padding: 10px 16px;
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.9375rem;
}

{% endblock %}

{% block heading %}Call Reporting{% endblock %}

{% block content %}
<div class="call-reporting-container">
    <!-- Statistics Cards -->
    <div class="stats-grid">
        <div class="stat-card">
            <div class="stat-icon">📞</div>
            <div class="stat-value">{{ stats.total_calls_today }}</div>
            <div class="stat-label">Calls Today</div>
        </div>
        
        <div class="stat-card">
            <div class="stat-icon">❌</div>
            <div class="stat-value">{{ stats.missed_calls_today }}</div>
            <div class="stat-label">Missed Today</div>
        </div>
        
        <div class="stat-card">
            <div class="stat-icon">⏱️</div>
            <div class="stat-value">{{ stats.total_duration_today|floatformat:0 }}s</div>
            <div class="stat-label">Total Duration Today</div>
        </div>
        
        <div class="stat-card">
            <div class="stat-icon">📊</div>
            <div class="stat-value">{{ stats.avg_call_duration|floatformat:0 }}s</div>
            <div class="stat-label">Avg Call Duration</div>
        </div>
    </div>

    <!-- Active Calls -->
    <div class="report-section">
        <h2>🔴 Active Calls</h2>
        
        {% if active_calls %}
        <table class="call-table">
            <thead>
                <tr>
                    <th>Time</th>
                    <th>Direction</th>
                    <th>User</th>
                    <th>Phone Number</th>
                    <th>Lead</th>
                    <th>Status</th>
                    <th>Duration</th>
                </tr>
            </thead>
            <tbody>
                {% for call in active_calls %}
                <tr>
                    <td>{{ call.created_at|format_datetime_tz:request.user.timezone }}</td>
                    <td><span class="call-direction direction-{{ call.direction }}">{{ call.direction }}</span></td>
                    <td>{% if call.user %}{{ call.user.display_name|default:call.user.username }}{% else %}-{% endif %}</td>
                    <td>{% if call.direction == 'inbound' %}{{ call.from_number }}{% else %}{{ call.to_number }}{% endif %}</td>
                    <td>
                        {% if call.dynamic_lead == 'MULTIPLE' %}
                            <span style="color: orange;">Multiple Leads</span>
                        {% elif call.dynamic_lead %}
                            <a href="{% url 'lead_detail' call.dynamic_lead.id %}" class="lead-link">{{ call.dynamic_lead.name }}</a>
                        {% elif call.lead %}
                            <a href="{% url 'lead_detail' call.lead.id %}" class="lead-link">{{ call.lead.name }}</a>
                        {% else %}
                            -
                        {% endif %}
                    </td>
                    <td><span class="call-status status-active">{{ call.status|upper }}</span></td>
                    <td>{{ call.duration_seconds }}s</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
        {% else %}
        <div class="empty-state">
            <h4>No Active Calls</h4>
            <p>All team members are available</p>
        </div>
        {% endif %}
    </div>

    <!-- Voicemails -->
    <div class="report-section">
        <h2>📧 Voicemails</h2>
        
        {% if voicemails %}
        <table class="call-table">
            <thead>
                <tr>
                    <th>Date/Time</th>
                    <th>From</th>
                    <th>Lead</th>
                    <th>Duration</th>
                    <th>Recording</th>
                </tr>
            </thead>
            <tbody>
                {% for call in voicemails %}
                <tr>
                    <td>{{ call.created_at|format_datetime_tz:request.user.timezone }}</td>
                    <td>{{ call.from_number }}</td>
                    <td>
                        {% if call.dynamic_lead == 'MULTIPLE' %}
                            <span style="color: orange;">Multiple Leads</span>
                        {% elif call.dynamic_lead %}
                            <a href="{% url 'lead_detail' call.dynamic_lead.id %}" class="lead-link">{{ call.dynamic_lead.name }}</a>
                        {% elif call.lead %}
                            <a href="{% url 'lead_detail' call.lead.id %}" class="lead-link">{{ call.lead.name }}</a>
                        {% else %}
                            -
                        {% endif %}
                    </td>
                    <td>{{ call.duration_seconds }}s</td>
                    <td>
                        {% if call.recording_url %}
                            <button class="play-recording-btn" onclick="playRecording('{{ call.id }}', '{% url 'play_recording' %}?url={{ call.recording_url|urlencode }}')">▶️</button>
                            <button class="delete-recording-btn" onclick="deleteRecording('{{ call.id }}')">🗑️</button>
                            <div id="player-{{ call.id }}" style="display:none; margin-top: 8px;">
                                <audio id="audio-{{ call.id }}" controls style="width: 100%; max-width: 300px;"></audio>
                            </div>
                        {% else %}
                            -
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
        {% else %}
        <div class="empty-state">
            <h4>No Voicemails</h4>
            <p>No voicemail messages have been recorded.</p>
        </div>
        {% endif %}
    </div>

    <!-- Missed Calls -->
    <div class="report-section">
        <h2>❌ Missed Calls (Last 30 Days)</h2>
        
        {% if missed_calls %}
        <table class="call-table">
            <thead>
                <tr>
                    <th>Date/Time</th>
                    <th>From</th>
                    <th>Lead</th>
                    <th>Duration</th>
                    <th>Voicemail</th>
                </tr>
            </thead>
            <tbody>
                {% for call in missed_calls %}
                <tr>
                    <td>{{ call.created_at|format_datetime_tz:request.user.timezone }}</td>
                    <td>{{ call.from_number }}</td>
                    <td>
                        {% if call.dynamic_lead == 'MULTIPLE' %}
                            <span style="color: orange;">Multiple Leads</span>
                        {% elif call.dynamic_lead %}
                            <a href="{% url 'lead_detail' call.dynamic_lead.id %}" class="lead-link">{{ call.dynamic_lead.name }}</a>
                        {% elif call.lead %}
                            <a href="{% url 'lead_detail' call.lead.id %}" class="lead-link">{{ call.lead.name }}</a>
                        {% else %}
                            -
                        {% endif %}
                    </td>
                    <td>{{ call.duration_seconds }}s</td>
                    <td>{% if call.recording_url %}✅ Yes{% else %}-{% endif %}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
        {% else %}
        <div class="empty-state">
            <h4>No Missed Calls</h4>
            <p>Great job! You haven't missed any calls in the last 30 days.</p>
        </div>
        {% endif %}
    </div>

    <!-- Recent Call History -->
    <div class="report-section">
        <h2>📋 Recent Call History (Last 30 Days)</h2>
        
        {% if recent_calls %}
        <table class="call-table">
            <thead>
                <tr>
                    <th>Date/Time</th>
                    <th>Direction</th>
                    <th>User</th>
                    <th>Phone Number</th>
                    <th>Lead</th>
                    <th>Status</th>
                    <th>Duration</th>
                </tr>
            </thead>
            <tbody id="call-history-tbody">
                {% include 'LeadSimplerApp/partials/call_history_rows.html' %}
            </tbody>
        </table>
        
        <!-- Pagination Controls -->
        {% if recent_calls.has_other_pages %}
        <div class="pagination-wrapper">
            <div class="pagination" id="call-history-pagination">
                {% if recent_calls.has_previous %}
                    <a href="#" data-page="1" class="pagination-link pagination-ajax">&laquo; First</a>
                    <a href="#" data-page="{{ recent_calls.previous_page_number }}" class="pagination-link pagination-ajax">Previous</a>
                {% endif %}
                
                <span class="pagination-info" id="pagination-info">
                    Page {{ recent_calls.number }} of {{ recent_calls.paginator.num_pages }}
                </span>
                
                {% if recent_calls.has_next %}
                    <a href="#" data-page="{{ recent_calls.next_page_number }}" class="pagination-link pagination-ajax">Next</a>
                    <a href="#" data-page="{{ recent_calls.paginator.num_pages }}" class="pagination-link pagination-ajax">Last &raquo;</a>
                {% endif %}
            </div>
        </div>
        {% endif %}
        
        {% else %}
        <div class="empty-state">
            <h4>No Call History</h4>
            <p>No calls have been made or received yet.</p>
        </div>
        {% endif %}
    </div>
</div>

<script>
function playRecording(callId, recordingUrl) {
    const playerDiv = document.getElementById(`player-${callId}`);
    const audio = document.getElementById(`audio-${callId}`);
    
    // Toggle player visibility
    if (playerDiv.style.display === 'none') {
        playerDiv.style.display = 'block';
        audio.src = recordingUrl;
        audio.load();
        audio.play();
    } else {
        playerDiv.style.display = 'none';
        audio.pause();
        audio.src = '';
    }
}

function deleteRecording(callId) {
    if (!confirm('Are you sure you want to delete this voicemail recording? This cannot be undone.')) {
        return;
    }
    
    fetch(`/phone/delete-recording/${callId}/`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRFToken': getCsrfToken()
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.status === 'success') {
            location.reload();
        } else {
            alert('Error deleting recording: ' + (data.message || 'Unknown error'));
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Error deleting recording');
    });
}

function getCsrfToken() {
    return document.querySelector('[name=csrfmiddlewaretoken]')?.value || 
           document.cookie.split('; ').find(row => row.startsWith('csrftoken='))?.split('=')[1] || '';
}

// AJAX Pagination for Call History
function loadCallHistoryPage(page) {
    const tbody = document.getElementById('call-history-tbody');
    const paginationDiv = document.getElementById('call-history-pagination');
    const paginationInfo = document.getElementById('pagination-info');
    
    // Show loading state
    tbody.innerHTML = '<tr><td colspan="7" style="text-align: center; padding: 20px;">Loading...</td></tr>';
    
    fetch(`/api/call-history/?page=${page}`)
        .then(response => response.json())
        .then(data => {
            // Update table content
            tbody.innerHTML = data.html;
            
            // Update pagination info
            paginationInfo.textContent = `Page ${data.page} of ${data.num_pages}`;
            
            // Update pagination buttons
            let paginationHTML = '';
            
            if (data.has_previous) {
                paginationHTML += `<a href="#" data-page="1" class="pagination-link pagination-ajax">&laquo; First</a>`;
                paginationHTML += `<a href="#" data-page="${data.previous_page}" class="pagination-link pagination-ajax">Previous</a>`;
            }
            
            paginationHTML += `<span class="pagination-info" id="pagination-info">Page ${data.page} of ${data.num_pages}</span>`;
            
            if (data.has_next) {
                paginationHTML += `<a href="#" data-page="${data.next_page}" class="pagination-link pagination-ajax">Next</a>`;
                paginationHTML += `<a href="#" data-page="${data.num_pages}" class="pagination-link pagination-ajax">Last &raquo;</a>`;
            }
            
            paginationDiv.innerHTML = paginationHTML;
            
            // Reattach event listeners
            attachPaginationListeners();
        })
        .catch(error => {
            console.error('Error loading page:', error);
            tbody.innerHTML = '<tr><td colspan="7" style="text-align: center; padding: 20px; color: red;">Error loading data</td></tr>';
        });
}

function attachPaginationListeners() {
    document.querySelectorAll('.pagination-ajax').forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            const page = this.getAttribute('data-page');
            loadCallHistoryPage(page);
        });
    });
}

// Attach pagination listeners on page load
document.addEventListener('DOMContentLoaded', function() {
    attachPaginationListeners();
});
</script>

.phone-system-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--spacing-lg);
}

.section-wrapper {
    margin-bottom: var(--spacing-xl);
    padding: var(--spacing-xl);
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    border: 2px solid var(--border-color);
}

.section-header {
    margin-bottom: var(--spacing-lg);
}

.section-header h2 {
    margin: 0 0 var(--spacing-md) 0;
    color: var(--text-primary);
    font-size: 1.875rem;
    font-weight: 700;
}

.section-description {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9375rem;
    line-height: 1.6;
    max-width: 900px;
}

.top-cards-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
}

@media (max-width: 768px) {
    .top-cards-grid {
        grid-template-columns: 1fr;
    }
}

.providers-dashboard {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg);
}

.provider-card {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--spacing-xl);
    text-align: center;
    transition: all 0.3s ease;
    border: 2px solid var(--border-color);
    position: relative;
}

.provider-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary);
}

.provider-logo {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--spacing-md);
    border-radius: var(--radius-md);
    object-fit: contain;
}

.provider-logo-custom {
    width: 80px;
    height: 80px;
    margin: 0 auto var(--spacing-md);
    border-radius: var(--radius-lg);
    transition: all 0.3s ease;
}

.provider-card:hover .provider-logo-custom {
    transform: scale(1.1) rotate(5deg);
}

.provider-card h3 {
    margin: 0 0 var(--spacing-sm) 0;
    color: var(--text-primary);
    font-size: 1.25rem;
    font-weight: 600;
}

.provider-card p {
    color: var(--text-secondary);
    margin: 0 0 var(--spacing-lg) 0;
    line-height: 1.5;
    font-size: 0.9375rem;
    min-height: 60px;
}

.provider-status {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    padding: 6px 12px;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-connected {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
}

.status-available {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
}

.status-coming-soon {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
}

.provider-action {
    display: inline-block;
    padding: 12px 24px;
    border-radius: var(--radius-md);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
    font-size: 0.9375rem;
}

.btn-connect {
    background: var(--gradient);
    color: white;
}

.btn-connect:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-md);
    color: white;
    text-decoration: none;
}

.btn-coming-soon {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    cursor: not-allowed;
    opacity: 0.6;
}

.btn-coming-soon:hover {
    transform: none;
    color: var(--text-secondary);
    text-decoration: none;
}

.phone-numbers-section,
.call-flow-card {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--spacing-xl);
    border: 2px solid var(--border-color);
}

.phone-numbers-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 2px solid var(--border-color);
}

.phone-numbers-header h3 {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.25rem;
    font-weight: 600;
}

.add-number-btn {
    background: var(--gradient);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
    font-size: 0.9375rem;
}

.add-number-btn:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-md);
}

.phone-numbers-grid {
    display: grid;
    gap: var(--spacing-md);
}

.phone-number-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-lg);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    transition: all 0.3s ease;
}

.phone-number-card:hover {
    border-color: var(--primary);
    transform: translateX(4px);
}

.phone-number-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.phone-number {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
}

.phone-number-details {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.phone-number-actions {
    display: flex;
    gap: var(--spacing-sm);
}

.btn-small {
    padding: 8px 16px;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-primary-small {
    background: var(--gradient);
    color: white;
}

.btn-primary-small:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-sm);
}

.btn-danger-small {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
}

.btn-danger-small:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-sm);
}

.empty-state {
    text-align: center;
    padding: var(--spacing-xl);
    color: var(--text-secondary);
}

.empty-state h4 {
    margin: 0 0 var(--spacing-sm) 0;
    color: var(--text-primary);
    font-size: 1.125rem;
}

.empty-state p {
    margin: 0 0 var(--spacing-lg) 0;
}

.cost-notice {
    margin-top: var(--spacing-lg);
    padding: var(--spacing-md);
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.1), rgba(245, 158, 11, 0.1));
    border: 2px solid var(--warning);
    border-radius: var(--radius-md);
}

.cost-notice p {
    margin: 0;
    color: var(--text-primary);
    font-weight: 500;
}

.call-flow-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 300px;
}

.call-flow-icon {
    font-size: 64px;
    margin-bottom: var(--spacing-md);
    filter: grayscale(0.2);
}

.call-flow-card h3 {
    margin: 0 0 var(--spacing-md) 0;
    color: var(--text-primary);
    font-size: 1.5rem;
    font-weight: 600;
}

.call-flow-card p {
    color: var(--text-secondary);
    margin: 0 0 var(--spacing-xl) 0;
    line-height: 1.6;
    max-width: 400px;
}

.btn-configure {
    background: var(--gradient);
    color: white;
    border: none;
    padding: 12px 32px;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
}

.btn-configure:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-md);
    color: white;
    text-decoration: none;
}

{% endblock %}
{% block heading %}<a href="{% url 'settings' %}" style="color: #666; text-decoration: none;">Settings</a> › Phone System{% endblock %}

{% block content %}
<div class="phone-system-container">
    <!-- LeadSimpler Phone System Section -->
    <div class="section-wrapper">
        <div class="section-header">
            <h2>📞 LeadSimpler Phone System</h2>
            <p class="section-description">Get started quickly with LeadSimpler's built-in phone system. Purchase phone numbers instantly and start calling your leads right away. No external setup required - everything works seamlessly within LeadSimpler.</p>
        </div>
        
        <!-- Top Cards Grid: Phone Numbers and Call Flow -->
        <div class="top-cards-grid">
        <!-- Phone Numbers Card -->
        <div class="phone-numbers-section">
        <div class="phone-numbers-header">
            <h3>📱 Your Phone Numbers</h3>
            <button class="add-number-btn" onclick="addPhoneNumber()">+ Add Phone Number</button>
        </div>

        {% if phone_numbers %}
            <div class="phone-numbers-grid">
                {% for number in phone_numbers %}
                <div class="phone-number-card">
                    <div class="phone-number-info">
                        <div class="phone-number">{{ number.phone_number|default:"Unknown" }}</div>
                        <div class="phone-number-details">
                            Status: {{ number.get_status_display|default:"Active" }} |
                            Provider: LeadSimpler
                        </div>
                    </div>
                    <div class="phone-number-actions">
                        <button class="btn-small btn-primary-small" onclick="editPhoneNumber('{{ number.id }}')">Edit</button>
                        <button class="btn-small btn-danger-small" onclick="removePhoneNumber('{{ number.id }}')">Remove</button>
                    </div>
                </div>
                {% endfor %}
            </div>
        {% else %}
            <div class="empty-state">
                <h4>No Phone Numbers Yet</h4>
                <p>Add your first phone number to start making calls from LeadSimpler.</p>
                <button class="add-number-btn" onclick="addPhoneNumber()">+ Add Your First Number</button>
            </div>
        {% endif %}

        <div class="cost-notice">
            <p>
                💰 <strong>Note:</strong> Each phone number costs $2/month. You will be billed automatically for active numbers.
            </p>
        </div>
    </div>

        <!-- Call Flow Card -->
        <div class="call-flow-card">
            <div class="call-flow-icon">🔀</div>
            <h3>Call Flow</h3>
            <p>Configure how incoming calls are handled, set up routing rules, business hours, and voicemail settings for your phone system.</p>
            <a href="{% url 'call_flow' %}" class="btn-configure">Configure Call Flow</a>
        </div>
        </div>
    </div>

    <!-- Connect Your Own Provider Section -->
    <div class="section-wrapper">
        <div class="section-header">
            <h2>🔌 Connect Your Own Provider</h2>
            <p class="section-description">Already have an account with GoTo Connect, Zoom Phone, or another phone provider? Connect your existing phone system to LeadSimpler to use your current phone numbers and leverage your existing setup while managing all your calls within our platform.</p>
        </div>
        
        <div class="providers-dashboard">
            <!-- LeadSimpler Built-in -->
            <div class="provider-card">
                <div class="provider-logo-custom" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center; color: white; font-size: 32px; font-weight: 700; box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);">
                    📞
                </div>
                <h3>LeadSimpler Built-in</h3>
                <p>Our integrated phone system with automatic number provisioning and call tracking.</p>
                <div class="provider-status status-available">Active</div>
                <button class="provider-action btn-connect" disabled style="opacity: 0.6;">Currently Active</button>
            </div>

            <!-- GoTo Connect -->
            <div class="provider-card">
                <div class="provider-logo-custom" style="background: linear-gradient(135deg, #00c389 0%, #00a651 100%); display: flex; align-items: center; justify-content: center; color: white; font-size: 18px; font-weight: 700; letter-spacing: -1px; box-shadow: 0 4px 12px rgba(0, 195, 137, 0.3);">
                    GoTo
                </div>
                <h3>GoTo Connect</h3>
                <p>Use your existing GoTo Connect account with all your current phone numbers and features.</p>
                {% if phone_integration.is_enabled and phone_integration.goto_access_token %}
                    <div class="provider-status status-connected">Connected</div>
                    <button class="provider-action btn-connect" onclick="disconnectGoTo()">Disconnect</button>
                {% else %}
                    <div class="provider-status status-available">Available</div>
                    <a href="{% url 'goto_oauth_authorize' %}" class="provider-action btn-connect">Connect GoTo</a>
                {% endif %}
            </div>

            <!-- Zoom Phone -->
            <div class="provider-card">
                <div class="provider-logo-custom" style="background: linear-gradient(135deg, #2d8cff 0%, #0e71eb 100%); display: flex; align-items: center; justify-content: center; color: white; font-size: 28px; font-weight: 700; box-shadow: 0 4px 12px rgba(14, 113, 235, 0.3);">
                    📹
                </div>
                <h3>Zoom Phone</h3>
                <p>Connect your Zoom Phone system for unified communications and video calling integration.</p>
                <div class="provider-status status-coming-soon">Coming Soon</div>
                <button class="provider-action btn-coming-soon" disabled>Coming Soon</button>
            </div>

            <!-- RingCentral -->
            <div class="provider-card">
                <div class="provider-logo-custom" style="background: linear-gradient(135deg, #ff6600 0%, #cc5200 100%); display: flex; align-items: center; justify-content: center; color: white; font-size: 20px; font-weight: 700; letter-spacing: -1px; box-shadow: 0 4px 12px rgba(255, 102, 0, 0.3);">
                    Ring
                </div>
                <h3>RingCentral</h3>
                <p>Enterprise-grade cloud communication platform with advanced calling features.</p>
                <div class="provider-status status-coming-soon">Coming Soon</div>
                <button class="provider-action btn-coming-soon" disabled>Coming Soon</button>
            </div>

            <!-- Grasshopper -->
            <div class="provider-card">
                <div class="provider-logo-custom" style="background: linear-gradient(135deg, #7cb342 0%, #558b2f 100%); display: flex; align-items: center; justify-content: center; color: white; font-size: 32px; font-weight: 700; box-shadow: 0 4px 12px rgba(124, 179, 66, 0.3);">
                    🦗
                </div>
                <h3>Grasshopper</h3>
                <p>Simple business phone system with virtual numbers and professional call handling.</p>
                <div class="provider-status status-coming-soon">Coming Soon</div>
                <button class="provider-action btn-coming-soon" disabled>Coming Soon</button>
            </div>

            <!-- 8x8 -->
            <div class="provider-card">
                <div class="provider-logo-custom" style="background: linear-gradient(135deg, #e63946 0%, #c1121f 100%); display: flex; align-items: center; justify-content: center; color: white; font-size: 24px; font-weight: 700; box-shadow: 0 4px 12px rgba(230, 57, 70, 0.3);">
                    8×8
                </div>
                <h3>8x8</h3>
                <p>Cloud communication platform with contact center solutions and team collaboration tools.</p>
                <div class="provider-status status-coming-soon">Coming Soon</div>
                <button class="provider-action btn-coming-soon" disabled>Coming Soon</button>
            </div>
        </div>
    </div>
</div>

<script>
// Add phone number functionality
function addPhoneNumber() {
    // Show a simple dialog or form to add a phone number
    const areaCode = prompt("Enter area code (e.g., 801, 385, 509):");
    if (areaCode && areaCode.length === 3) {
        if (confirm(`Purchase a phone number in area code ${areaCode}? This will cost $2/month.`)) {
            // Call API to purchase number
            purchasePhoneNumber(areaCode);
        }
    } else if (areaCode) {
        alert("Please enter a valid 3-digit area code.");
    }
}

function purchasePhoneNumber(areaCode) {
    // Show loading state
    const btn = document.querySelector('.add-number-btn');
    const originalText = btn.textContent;
    btn.textContent = 'Purchasing...';
    btn.disabled = true;

    // Make API call to purchase number
    fetch('/api/phone/purchase-number/', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRFToken': getCsrfToken()
        },
        body: JSON.stringify({ area_code: areaCode })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert(`Phone number ${data.phone_number} purchased successfully!`);
            location.reload();
        } else {
            alert('Error purchasing number: ' + (data.error || 'Unknown error'));
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Error purchasing number. Please try again.');
    })
    .finally(() => {
        btn.textContent = originalText;
        btn.disabled = false;
    });
}

function editPhoneNumber(numberId) {
    alert('Edit functionality coming soon! Number ID: ' + numberId);
}

function removePhoneNumber(numberId) {
    if (confirm('Are you sure you want to remove this phone number? This action cannot be undone.')) {
        alert('Remove functionality coming soon! Number ID: ' + numberId);
    }
}

// Disconnect GoTo functionality
function disconnectGoTo() {
    if (confirm('Are you sure you want to disconnect from GoTo? You will lose access to phone features.')) {
        fetch('/settings/phone-system/disconnect-goto/', {
            method: 'POST',
            headers: {
                'X-CSRFToken': getCsrfToken()
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.status === 'success') {
                alert('GoTo disconnected successfully.');
                location.reload();
            } else {
                alert('Error disconnecting GoTo: ' + (data.message || 'Unknown error'));
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Error disconnecting GoTo. Please try again.');
        });
    }
}

function getCsrfToken() {
    const cookieValue = document.cookie
        .split('; ')
        .find(row => row.startsWith('csrftoken='))
        ?.split('=')[1];
    return cookieValue || '';
}
</script>


.call-flow-container {
    max-width: 1000px;
    margin: 0 auto;
}

.settings-card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    padding: 24px;
    margin-bottom: 20px;
    border: 1px solid #e1e5e9;
}

.settings-card h3 {
    margin: 0 0 16px 0;
    color: #333;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

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

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #333;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="time"],
.form-group input[type="number"],
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #e1e5e9;
    border-radius: 5px;
    font-size: 0.95rem;
    box-sizing: border-box;
}

.form-group textarea {
    min-height: 80px;
    resize: vertical;
}

.form-group small {
    display: block;
    margin-top: 4px;
    color: #666;
    font-size: 0.875rem;
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 24px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .toggle-slider {
    background-color: #28a745;
}

input:checked + .toggle-slider:before {
    transform: translateX(26px);
}

.user-list {
    display: grid;
    gap: 8px;
    max-height: 300px;
    overflow-y: auto;
    padding: 10px;
    border: 1px solid #e1e5e9;
    border-radius: 5px;
    background: #f8f9fa;
}

.user-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: white;
    border-radius: 4px;
}

.user-checkbox input[type="checkbox"] {
    width: auto;
    margin: 0;
}

.user-checkbox label {
    margin: 0;
    cursor: pointer;
}

.btn-save {
    background: #28a745;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 500;
    font-size: 1rem;
    transition: background 0.2s;
}

.btn-save:hover {
    background: #218838;
}

.btn-save:disabled {
    background: #6c757d;
    cursor: not-allowed;
}

.conditional-section {
    margin-left: 24px;
    padding-left: 16px;
    border-left: 3px solid #e1e5e9;
}

.info-box {
    background: #e7f3ff;
    border: 1px solid #b3d9ff;
    border-radius: 5px;
    padding: 12px;
    margin-bottom: 20px;
}

.info-box p {
    margin: 0;
    color: #004085;
}

.success-message {
    background: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
    padding: 12px;
    border-radius: 5px;
    margin-bottom: 20px;
    display: none;
}

.error-message {
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
    padding: 12px;
    border-radius: 5px;
    margin-bottom: 20px;
    display: none;
}

/* Dark Theme Support */
.dark-theme .settings-card {
    background: #2d3748;
    border-color: #4a5568;
    color: #e2e8f0;
}

.dark-theme .settings-card h3 {
    color: #e2e8f0;
}

.dark-theme .form-group label {
    color: #e2e8f0;
}

.dark-theme .form-group input,
.dark-theme .form-group select,
.dark-theme .form-group textarea {
    background: #374151;
    border-color: #4b5563;
    color: #e2e8f0;
}

.dark-theme .user-list {
    background: #374151;
    border-color: #4b5563;
}

.dark-theme .user-checkbox {
    background: #2d3748;
}

.dark-theme .info-box {
    background: #1e3a5f;
    border-color: #2c5282;
    color: #90cdf4;
}

{% endblock %}

{% block heading %}<a href="{% url 'settings' %}" style="color: #666; text-decoration: none;">Settings</a> › <a href="{% url 'phone_system' %}" style="color: #666; text-decoration: none;">Phone System</a> › Call Flow{% endblock %}

{% block content %}
<div class="call-flow-container">
    <div id="success-message" class="success-message"></div>
    <div id="error-message" class="error-message"></div>
    
    <div class="info-box">
        <p>📞 <strong>Call Flow Configuration:</strong> Set up how incoming calls to your LeadSimpler phone numbers are handled. Configure routing, ring strategies, business hours, and voicemail settings.</p>
    </div>

    <!-- Basic Settings -->
    <div class="settings-card">
        <h3>🔧 Basic Settings</h3>
        
        <div class="form-group">
            <label>
                Call Flow Enabled
            </label>
            <label class="toggle-switch">
                <input type="checkbox" id="is_enabled" {% if call_flow.is_enabled %}checked{% endif %}>
                <span class="toggle-slider"></span>
            </label>
            <small>Turn call flow on or off</small>
        </div>

        <div class="form-group">
            <label for="welcome_message">Welcome Message (Optional)</label>
            <textarea id="welcome_message" name="welcome_message" placeholder="Thank you for calling [Company Name]. Please hold while we connect you.">{{ call_flow.welcome_message }}</textarea>
            <small>Message to play when call is first answered (leave blank to disable)</small>
        </div>

        <div class="form-group">
            <label for="action">Incoming Call Action</label>
            <select id="action" name="action">
                <option value="forward_user" {% if call_flow.action == 'forward_user' %}selected{% endif %}>Forward to User(s)</option>
                <option value="forward_team" {% if call_flow.action == 'forward_team' %}selected{% endif %}>Forward to Team</option>
                <option value="voicemail" {% if call_flow.action == 'voicemail' %}selected{% endif %}>Send to Voicemail</option>
                <option value="hangup" {% if call_flow.action == 'hangup' %}selected{% endif %}>Hang Up</option>
            </select>
            <small>Choose what happens when someone calls</small>
        </div>
    </div>

    <!-- User Forwarding -->
    <div class="settings-card" id="user-forwarding-section" style="display: {% if call_flow.action == 'forward_user' %}block{% else %}none{% endif %};">
        <h3>👥 Forward to Users</h3>
        
        <div class="form-group">
            <label>Select Users to Ring</label>
            <div class="user-list" id="user-list">
                {% for user in company_users %}
                <div class="user-checkbox">
                    <input type="checkbox" 
                           id="user_{{ user.id }}" 
                           name="forward_to_users" 
                           value="{{ user.id }}"
                           {% if user in call_flow.forward_to_users.all %}checked{% endif %}>
                    <label for="user_{{ user.id }}">{{ user.get_full_name|default:user.username }}</label>
                </div>
                {% empty %}
                <p style="color: #666; padding: 8px;">No users available</p>
                {% endfor %}
            </div>
        </div>

        <div class="form-group">
            <label for="ring_strategy">Ring Strategy</label>
            <select id="ring_strategy" name="ring_strategy">
                <option value="simultaneous" {% if call_flow.ring_strategy == 'simultaneous' %}selected{% endif %}>Ring All at Once</option>
                <option value="sequential" {% if call_flow.ring_strategy == 'sequential' %}selected{% endif %}>Ring in Order</option>
                <option value="round_robin" {% if call_flow.ring_strategy == 'round_robin' %}selected{% endif %}>Round Robin</option>
            </select>
            <small>How to ring multiple users</small>
        </div>

        <div class="form-group">
            <label for="ring_duration">Ring Duration (seconds)</label>
            <input type="number" id="ring_duration" name="ring_duration" value="{{ call_flow.ring_duration }}" min="10" max="120" step="5">
            <small>How long to ring before moving to next step</small>
        </div>
    </div>

    <!-- Team Forwarding -->
    <div class="settings-card" id="team-forwarding-section" style="display: {% if call_flow.action == 'forward_team' %}block{% else %}none{% endif %};">
        <h3>🏢 Forward to Team</h3>
        
        <div class="form-group">
            <label for="forward_to_team">Select Team</label>
            <select id="forward_to_team" name="forward_to_team">
                <option value="">-- Select a Team --</option>
                {% for team in teams %}
                <option value="{{ team.id }}" {% if call_flow.forward_to_team.id == team.id %}selected{% endif %}>{{ team.name }}</option>
                {% endfor %}
            </select>
            <small>Calls will be routed to all members of this team</small>
        </div>
    </div>

    <!-- Voicemail Settings -->
    <div class="settings-card">
        <h3>📧 Voicemail Settings</h3>
        
        <div class="form-group">
            <label for="voicemail_greeting">Voicemail Greeting</label>
            <textarea id="voicemail_greeting" name="voicemail_greeting" placeholder="Thank you for calling. Please leave a message after the beep.">{{ call_flow.voicemail_greeting }}</textarea>
            <small>Message to play when call goes to voicemail</small>
        </div>

        <div class="form-group">
            <label for="voicemail_email">Voicemail Notification Email</label>
            <input type="email" id="voicemail_email" name="voicemail_email" value="{{ call_flow.voicemail_email }}" placeholder="email@example.com">
            <small>Where to send voicemail notifications</small>
        </div>
    </div>

    <!-- Business Hours -->
    <div class="settings-card">
        <h3>🕐 Business Hours</h3>
        
        <div class="form-group">
            <label>
                Enable Business Hours
            </label>
            <label class="toggle-switch">
                <input type="checkbox" id="enable_business_hours" {% if call_flow.enable_business_hours %}checked{% endif %}>
                <span class="toggle-slider"></span>
            </label>
            <small>Route calls differently during and after business hours</small>
        </div>

        <div id="business-hours-settings" style="{% if not call_flow.enable_business_hours %}display: none;{% endif %}">
            <div class="conditional-section">
                <div class="form-group">
                    <label for="business_hours_start">Business Hours Start</label>
                    <input type="time" id="business_hours_start" name="business_hours_start" value="{% if call_flow.business_hours_start %}{{ call_flow.business_hours_start|time:'H:i' }}{% else %}09:00{% endif %}">
                </div>

                <div class="form-group">
                    <label for="business_hours_end">Business Hours End</label>
                    <input type="time" id="business_hours_end" name="business_hours_end" value="{% if call_flow.business_hours_end %}{{ call_flow.business_hours_end|time:'H:i' }}{% else %}17:00{% endif %}">
                </div>

                <div class="form-group">
                    <label for="after_hours_action">After Hours Action</label>
                    <select id="after_hours_action" name="after_hours_action">
                        <option value="voicemail" {% if call_flow.after_hours_action == 'voicemail' %}selected{% endif %}>Send to Voicemail</option>
                        <option value="forward_user" {% if call_flow.after_hours_action == 'forward_user' %}selected{% endif %}>Forward to User(s)</option>
                        <option value="forward_team" {% if call_flow.after_hours_action == 'forward_team' %}selected{% endif %}>Forward to Team</option>
                        <option value="hangup" {% if call_flow.after_hours_action == 'hangup' %}selected{% endif %}>Hang Up</option>
                    </select>
                    <small>What to do with calls outside business hours</small>
                </div>
            </div>
        </div>
    </div>

    <!-- Save Button -->
    <div style="text-align: center; margin-top: 30px;">
        <button type="button" class="btn-save" onclick="saveCallFlow()">Save Call Flow Configuration</button>
    </div>
</div>

<script>
// Show/hide sections based on action
document.getElementById('action').addEventListener('change', function() {
    const action = this.value;
    document.getElementById('user-forwarding-section').style.display = action === 'forward_user' ? 'block' : 'none';
    document.getElementById('team-forwarding-section').style.display = action === 'forward_team' ? 'block' : 'none';
});

// Show/hide business hours settings
document.getElementById('enable_business_hours').addEventListener('change', function() {
    document.getElementById('business-hours-settings').style.display = this.checked ? 'block' : 'none';
});

function saveCallFlow() {
    const btn = document.querySelector('.btn-save');
    btn.disabled = true;
    btn.textContent = 'Saving...';

    // Collect selected users
    const selectedUsers = [];
    document.querySelectorAll('input[name="forward_to_users"]:checked').forEach(checkbox => {
        selectedUsers.push(parseInt(checkbox.value));
    });

    const data = {
        is_enabled: document.getElementById('is_enabled').checked,
        action: document.getElementById('action').value,
        ring_strategy: document.getElementById('ring_strategy').value,
        ring_duration: parseInt(document.getElementById('ring_duration').value),
        forward_to_users: selectedUsers,
        forward_to_team: document.getElementById('forward_to_team').value,
        voicemail_greeting: document.getElementById('voicemail_greeting').value,
        voicemail_email: document.getElementById('voicemail_email').value,
        enable_business_hours: document.getElementById('enable_business_hours').checked,
        business_hours_start: document.getElementById('business_hours_start').value,
        business_hours_end: document.getElementById('business_hours_end').value,
        after_hours_action: document.getElementById('after_hours_action').value,
        welcome_message: document.getElementById('welcome_message').value,
    };

    fetch('{% url "call_flow" %}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRFToken': getCsrfToken()
        },
        body: JSON.stringify(data)
    })
    .then(response => response.json())
    .then(data => {
        if (data.status === 'success') {
            showMessage('success', data.message || 'Call flow configuration saved successfully!');
        } else {
            showMessage('error', data.message || 'Error saving call flow configuration');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showMessage('error', 'Error saving call flow configuration. Please try again.');
    })
    .finally(() => {
        btn.disabled = false;
        btn.textContent = 'Save Call Flow Configuration';
    });
}

function showMessage(type, message) {
    const successEl = document.getElementById('success-message');
    const errorEl = document.getElementById('error-message');
    
    if (type === 'success') {
        successEl.textContent = message;
        successEl.style.display = 'block';
        errorEl.style.display = 'none';
        setTimeout(() => { successEl.style.display = 'none'; }, 5000);
    } else {
        errorEl.textContent = message;
        errorEl.style.display = 'block';
        successEl.style.display = 'none';
        setTimeout(() => { errorEl.style.display = 'none'; }, 5000);
    }
    
    window.scrollTo({ top: 0, behavior: 'smooth' });
}

function getCsrfToken() {
    const cookieValue = document.cookie
        .split('; ')
        .find(row => row.startsWith('csrftoken='))
        ?.split('=')[1];
    return cookieValue || '';
}
</script>

.module-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
}

+.module-chip-grid {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--spacing-sm);
+    padding: var(--spacing-md);
+    background: var(--bg-secondary);
+    border: 2px solid var(--border-color);
+    border-radius: var(--radius-lg);
+    min-height: 60px;
+}

/* ========================================
   SETTINGS PAGES (Lead Management, Merchant, Billing)
   ======================================== */

.breadcrumb-heading {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--text-secondary);
    font-size: 0.9375rem;
}

.breadcrumb-link {
    color: var(--text-secondary);
}

.breadcrumb-link:hover {
    color: var(--primary);
}

.breadcrumb-separator {
    opacity: 0.6;
}

.breadcrumb-current {
    color: var(--text-primary);
    font-weight: 600;
}

.settings-page {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
    padding: 50px;
}

.settings-hero {
    display: flex;
    justify-content: space-between;
    gap: var(--spacing-lg);
    align-items: flex-start;
    background: var(--bg-primary);
    border-radius: var(--radius-xl);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-sm);
}

.settings-hero-title {
    margin-bottom: var(--spacing-sm);
}

.settings-hero-subtitle {
    margin: 0;
    color: var(--text-secondary);
    max-width: 48rem;
}

.settings-hero-pill {
    background: var(--gradient);
    color: white;
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--radius-full);
    font-weight: 600;
    align-self: center;
    white-space: nowrap;
}

.settings-grid {
    display: grid;
    gap: var(--spacing-xl);
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.settings-grid.single-column {
    grid-template-columns: minmax(0, 1fr);
}

.settings-card {
    background: var(--bg-primary);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow);
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.settings-card-header {
    display: flex;
    gap: var(--spacing-md);
    align-items: flex-start;
    padding: var(--spacing-xl) var(--spacing-xl) 0 var(--spacing-xl);
}

.settings-card-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    background: var(--bg-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: var(--shadow-sm);
}

.settings-card-title {
    margin: 0;
    font-size: 1.375rem;
}

.settings-card-subtitle {
    margin: var(--spacing-xs) 0 0 0;
    color: var(--text-secondary);
}

.settings-card-body {
    padding: var(--spacing-xl);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.settings-card-description {
    color: var(--text-secondary);
}

.settings-steps {
    list-style: decimal inside;
    color: var(--text-secondary);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.settings-callout {
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-secondary);
}

.settings-callout.warning {
    border-color: var(--warning);
    background: var(--warning-bg);
    color: var(--warning-text);
}

.settings-callout.info {
    border-color: var(--info);
    background: var(--info-bg);
    color: var(--info-text);
}

.input-action-group {
    display: flex;
    gap: var(--spacing-sm);
    align-items: stretch;
}

.input-action-group .form-input {
    flex: 1;
}

.settings-inline-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.settings-hint {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.settings-feedback {
    margin: 0;
    font-weight: 600;
    font-size: 0.9375rem;
    min-height: 1.25rem;
}

.settings-feedback.error {
    color: var(--error);
}

.settings-feedback.success {
    color: var(--success);
}

.btn-success {
    background: var(--success);
    color: white;
}

.settings-tip-list {
    list-style: disc inside;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    color: var(--text-secondary);
}

.settings-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.form-grid {
    display: grid;
    gap: var(--spacing-lg);
}

.form-grid.two-column {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.form-grid .span-two {
    grid-column: span 2;
}

@media (max-width: 768px) {
    .form-grid .span-two {
        grid-column: span 1;
    }
}

.checkbox-group {
    display: flex;
    align-items: center;
}

.toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
}

.toggle input {
    display: none;
}

.toggle-slider {
    width: 46px;
    height: 26px;
    border-radius: var(--radius-full);
    background: var(--border-color);
    position: relative;
    transition: background var(--transition-fast);
}

.toggle-slider::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: white;
    transition: transform var(--transition-fast);
    box-shadow: var(--shadow-sm);
}

.toggle input:checked + .toggle-slider {
    background: var(--primary);
}

.toggle input:checked + .toggle-slider::after {
    transform: translateX(20px);
}

.toggle-label {
    font-weight: 500;
    color: var(--text-primary);
}

.settings-card-subheader {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.settings-card-subheader h3 {
    margin: 0;
}

.settings-card-subheader p {
    margin: 0;
    color: var(--text-secondary);
}

.form-divider {
    height: 1px;
    width: 100%;
    background: var(--border-color);
}

.settings-tip-list a {
    color: var(--primary);
    font-weight: 500;
}

.settings-tip-list a:hover {
    color: var(--primary-dark);
}

@media (max-width: 1024px) {
    .settings-hero {
        flex-direction: column;
    }

    .settings-hero-pill {
        align-self: flex-start;
    }
}

.settings-field-label {
    display: block;
    font-weight: 600;
    margin-bottom: var(--spacing-xs);
    color: var(--text-secondary);
}

.settings-form .form-input,
.settings-form .form-textarea,
.settings-form select {
    width: 100%;
}