/* CSS Custom Properties for Light and Dark Themes */
        :root {
            /* Light Theme Colors */
            --body-bg: #edf0f4;
            --body-color: #212529;
            --card-bg: #ffffff;
            --card-border: #d5dae0;
            --card-shadow: rgba(0,0,0,0.08);
            
            /* Primary colors */
            --primary-bg: #0d6efd;
            --primary-hover: #0b5ed7;
            
            /* Secondary colors */
            --secondary-bg: #6c757d;
            --secondary-color: #6c757d;
            
            /* Form controls */
            --input-bg: #ffffff;
            --input-border: #dee2e6;
            --input-focus-border: #86b7fe;
            --input-color: #212529;
            
            /* Navigation */
            --navbar-bg: #ffffff;
            --navbar-border: #dee2e6;
            --navbar-color: #212529;
            --navbar-link-hover: #f8f9fa;
            
            /* Sidebar */
            --sidebar-bg: #ffffff;
            --sidebar-border: #dee2e6;
            --sidebar-link-color: #495057;
            --sidebar-link-hover: #f8f9fa;
            --sidebar-link-active: #d0e3f7;
            --sidebar-section-header: #6c757d;
            
            /* Tables */
            --table-bg: #ffffff;
            --table-border: #dee2e6;
            --table-hover: #f8f9fa;
            --table-header-bg: #f8f9fa;
            
            /* Alerts and badges */
            --alert-info-bg: #cff4fc;
            --alert-info-border: #b3ecf7;
            --alert-info-color: #055160;
            --alert-success-bg: #d1e7dd;
            --alert-success-border: #badbcc;
            --alert-success-color: #0f5132;
            --alert-warning-bg: #fff3cd;
            --alert-warning-border: #ffecb5;
            --alert-warning-color: #664d03;
            --alert-danger-bg: #f8d7da;
            --alert-danger-border: #f5c2c7;
            --alert-danger-color: #842029;
            
            /* Modals */
            --modal-bg: #ffffff;
            --modal-header-bg: #ffffff;
            --modal-border: #dee2e6;
            
            /* Text colors */
            --text-primary: #212529;
            --text-secondary: #6c757d;
            --text-muted: #6c757d;
            
            /* Borders */
            --border-color: #dee2e6;
            --border-light: #f1f3f4;

            /* Shared gradients */
            --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }

        html {
            touch-action: manipulation;
        }

        /* Dark Theme Colors */
        [data-theme="dark"] {
            --body-bg: #0d1117;
            --body-color: #e6edf3;
            --card-bg: #161b22;
            --card-border: #30363d;
            --card-shadow: rgba(0,0,0,0.3);
            
            /* Primary colors */
            --primary-bg: #238636;
            --primary-hover: #2ea043;
            
            /* Secondary colors */
            --secondary-bg: #6e7681;
            --secondary-color: #7d8590;
            
            /* Form controls */
            --input-bg: #0d1117;
            --input-border: #30363d;
            --input-focus-border: #388bfd;
            --input-color: #e6edf3;
            
            /* Navigation */
            --navbar-bg: #161b22;
            --navbar-border: #30363d;
            --navbar-color: #e6edf3;
            --navbar-link-hover: #21262d;
            
            /* Sidebar */
            --sidebar-bg: #0d1117;
            --sidebar-border: #30363d;
            --sidebar-link-color: #e6edf3;
            --sidebar-link-hover: #21262d;
            --sidebar-link-active: #1f2937;
            --sidebar-section-header: #7d8590;
            
            /* Tables */
            --table-bg: #161b22;
            --table-border: #30363d;
            --table-hover: #21262d;
            --table-header-bg: #21262d;
            
            /* Alerts and badges */
            --alert-info-bg: #0c4a6e;
            --alert-info-border: #075985;
            --alert-info-color: #7dd3fc;
            --alert-success-bg: #0f5132;
            --alert-success-border: #198754;
            --alert-success-color: #75dd8c;
            --alert-warning-bg: #664d03;
            --alert-warning-border: #856404;
            --alert-warning-color: #ffda6a;
            --alert-danger-bg: #842029;
            --alert-danger-border: #a02834;
            --alert-danger-color: #f1aeb5;
            
            /* Modals */
            --modal-bg: #161b22;
            --modal-header-bg: #21262d;
            --modal-border: #30363d;
            
            /* Text colors */
            --text-primary: #e6edf3;
            --text-secondary: #7d8590;
            --text-muted: #656d76;
            
            /* Borders */
            --border-color: #30363d;
            --border-light: #21262d;
        }

        /* Apply theme variables to global elements */
        body {
            background-color: var(--body-bg) !important;
            color: var(--body-color) !important;
            transition: background-color 0.3s ease, color 0.3s ease;
        }
        
        .navbar-brand {
            font-size: 1.5rem;
            font-weight: bold;
            color: var(--navbar-color) !important;
        }
        
        .card {
            box-shadow: 0 0 20px var(--card-shadow) !important;
            border: 1px solid var(--card-border) !important;
            background-color: var(--card-bg) !important;
            color: var(--body-color) !important;
        }

        /* Navigation theming */
        .navbar {
            background-color: var(--navbar-bg) !important;
            border-bottom: 1px solid var(--navbar-border) !important;
        }

        .navbar .nav-link,
        .navbar .navbar-nav .dropdown-toggle {
            color: var(--navbar-color) !important;
        }

        .navbar .nav-link:hover,
        .navbar .navbar-nav .dropdown-toggle:hover {
            background-color: var(--navbar-link-hover) !important;
        }

        /* Sidebar theming */
        .sidebar {
            background-color: var(--sidebar-bg) !important;
            border-right: 1px solid var(--sidebar-border) !important;
        }

        .sidebar-link {
            color: var(--sidebar-link-color) !important;
        }

        .sidebar-link:hover {
            background-color: var(--sidebar-link-hover) !important;
            color: var(--sidebar-link-color) !important;
        }

        .sidebar-link.active {
            background-color: var(--sidebar-link-active) !important;
            color: #0a3d6e !important;
        }

        [data-theme="dark"] .sidebar-link.active {
            color: #ffffff !important;
        }

        .sidebar-section-header small {
            color: var(--sidebar-section-header) !important;
        }

        /* Form controls theming */
        .form-control,
        .form-select {
            background-color: var(--input-bg) !important;
            border-color: var(--input-border) !important;
            color: var(--input-color) !important;
        }

        .form-control:focus,
        .form-select:focus {
            border-color: var(--input-focus-border) !important;
            box-shadow: 0 0 0 0.2rem rgba(var(--primary-bg), 0.25) !important;
        }

        /* Table theming */
        .table {
            --bs-table-bg: var(--table-bg);
            --bs-table-border-color: var(--table-border);
            --bs-table-hover-bg: var(--table-hover);
        }

        .table thead th {
            background-color: var(--table-header-bg) !important;
            border-color: var(--table-border) !important;
            color: var(--text-primary) !important;
        }

        /* Alert theming */
        .alert-info {
            background-color: var(--alert-info-bg) !important;
            border-color: var(--alert-info-border) !important;
            color: var(--alert-info-color) !important;
        }

        .alert-success {
            background-color: var(--alert-success-bg) !important;
            border-color: var(--alert-success-border) !important;
            color: var(--alert-success-color) !important;
        }

        .alert-warning {
            background-color: var(--alert-warning-bg) !important;
            border-color: var(--alert-warning-border) !important;
            color: var(--alert-warning-color) !important;
        }

        .alert-danger {
            background-color: var(--alert-danger-bg) !important;
            border-color: var(--alert-danger-border) !important;
            color: var(--alert-danger-color) !important;
        }

        /* Light mode: desaturated badge colors for better readability on white cards */
        .badge.bg-success {
            background-color: #2d8a4e !important;
        }
        .badge.bg-warning {
            background-color: #b08600 !important;
            color: #ffffff !important;
        }
        .badge.bg-danger {
            background-color: #b83230 !important;
        }
        .badge.bg-info {
            background-color: #1580a0 !important;
            color: #ffffff !important;
        }

        [data-theme="dark"] .badge.bg-success {
            background-color: #28a745 !important;
        }
        [data-theme="dark"] .badge.bg-warning {
            background-color: #ffc107 !important;
            color: #212529 !important;
        }
        [data-theme="dark"] .badge.bg-danger {
            background-color: #dc3545 !important;
        }
        [data-theme="dark"] .badge.bg-info {
            background-color: #17a2b8 !important;
            color: #ffffff !important;
        }

        /* Modal theming and z-index management */
        .modal-content {
            background-color: var(--modal-bg) !important;
            border-color: var(--modal-border) !important;
        }

        .modal-header {
            background-color: var(--modal-header-bg) !important;
            border-bottom-color: var(--modal-border) !important;
        }

        .modal-footer {
            border-top-color: var(--modal-border) !important;
        }

        /* Modal z-index management - fix Bootstrap modal stacking issues 
           Z-Index Hierarchy:
           - Modal Backdrop: 1040
           - Modal Container: 1055  
           - Modal Dialog: 1056
           - Modal Content: 1057
           - Modal Headers/Body/Footer: 1058
           - Sidebar Toggle: 1070/1071
        */
        .modal-backdrop {
            z-index: 1040 !important;
        }
        
        .modal {
            z-index: 1055 !important; /* Bootstrap 5 default - above backdrop, below sidebar toggle */
        }
        
        .modal-dialog {
            z-index: 1056 !important; /* Ensure dialog content is above modal container */
        }
        
        .modal-content {
            position: relative;
            z-index: 1057 !important; /* Ensure content is interactive */
        }
        
        /* Ensure modal body and footer elements are interactive */
        .modal-body,
        .modal-footer,
        .modal-header {
            position: relative;
            z-index: 1058 !important;
        }
        
        /* Ensure proper pointer events for modal interaction */
        .modal-backdrop {
            pointer-events: none !important; /* Let clicks pass through backdrop to modal content */
        }
        
        .modal-content {
            pointer-events: auto !important;
        }
        
        /* Force modal interactivity with more aggressive styling */
        .modal.show {
            z-index: 1055 !important;
            display: block !important;
        }
        
        .modal.show .modal-dialog {
            z-index: 1056 !important;
            pointer-events: auto !important;
        }
        
        /* Ensure all modal interactive elements work */
        .modal .btn, 
        .modal input, 
        .modal select, 
        .modal textarea, 
        .modal .form-control,
        .modal .dropdown-toggle,
        .modal .dropdown-item,
        .modal .nav-link,
        .modal .tab-pane {
            position: relative;
            z-index: 1059 !important;
            pointer-events: auto !important;
        }

        /* Text color utilities */
        .text-muted {
            color: var(--text-muted) !important;
        }

        .text-secondary {
            color: var(--text-secondary) !important;
        }

        /* Border utilities */
        .border {
            border-color: var(--border-color) !important;
        }

        .border-bottom {
            border-bottom-color: var(--border-color) !important;
        }

        .border-top {
            border-top-color: var(--border-color) !important;
        }

        .border-start {
            border-left-color: var(--border-color) !important;
        }

        .border-end {
            border-right-color: var(--border-color) !important;
        }

        /* Dropdown theming */
        .dropdown-menu {
            background-color: var(--card-bg) !important;
            border-color: var(--card-border) !important;
        }

        .dropdown-item {
            color: var(--text-primary) !important;
        }

        .dropdown-item:hover,
        .dropdown-item:focus {
            background-color: var(--navbar-link-hover) !important;
            color: var(--text-primary) !important;
        }

        /* Coming soon overlays and other page-specific elements */
        .coming-soon-content {
            background-color: var(--card-bg) !important;
            color: var(--text-primary) !important;
        }

        .coming-soon-subtitle {
            color: var(--text-muted) !important;
        }

        /* Modal close button styling for dark mode */
        [data-theme="dark"] .btn-close {
            filter: invert(1);
        }

        /* Form label styling for dark mode */
        [data-theme="dark"] .form-label,
        [data-theme="dark"] label,
        [data-theme="dark"] .modal-body label,
        [data-theme="dark"] .form-check-label {
            color: var(--text-primary) !important;
        }

        /* Additional form text elements for dark mode */
        [data-theme="dark"] .form-text,
        [data-theme="dark"] .text-muted {
            color: var(--text-muted) !important;
        }

        /* Ensure placeholder text is visible in dark mode */
        [data-theme="dark"] .form-control::placeholder,
        [data-theme="dark"] .form-select::placeholder,
        [data-theme="dark"] textarea::placeholder {
            color: var(--text-muted) !important;
            opacity: 0.7;
        }

        /* Dark mode transition */
        * {
            transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
        }

        /* Dark mode loading prevention - Less aggressive approach */
        .dark-mode-loading {
            opacity: 0;
            transition: opacity 0.2s ease;
        }

        /* Show content after loading */
        body:not(.dark-mode-loading) {
            opacity: 1;
        }

        /* ===================================================================
           CONSOLIDATED APPLICATION STYLES - MOVED FROM INDIVIDUAL PAGES
           ================================================================= */
        
        /* Common Notification System */
        .notification-container {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 10000;
            max-width: 400px;
        }

        .notification {
            margin-bottom: 10px;
            padding: 15px 35px 15px 20px;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            display: flex;
            align-items: flex-start;
            gap: 10px;
            animation: slideInRight 0.3s ease-out;
            position: relative;
            background: white;
            border-left: 4px solid;
        }

        .notification.error {
            border-left-color: #dc3545;
            background: #f8d7da;
            color: #721c24;
        }

        .notification.warning {
            border-left-color: #ffc107;
            background: #fff3cd;
            color: #856404;
        }

        .notification.success {
            border-left-color: #28a745;
            background: #d4edda;
            color: #155724;
        }

        .notification.info {
            border-left-color: #17a2b8;
            background: #d1ecf1;
            color: #0c5460;
        }

        .notification-icon {
            font-size: 1.2em;
            margin-top: 2px;
            flex-shrink: 0;
        }

        .notification-content {
            flex: 1;
        }

        .notification-title {
            font-weight: 600;
            margin-bottom: 5px;
            font-size: 0.95em;
        }

        .notification-message {
            font-size: 0.9em;
            line-height: 1.4;
            margin: 0;
        }

        .notification-close {
            position: absolute;
            top: 5px;
            right: 5px;
            background: none;
            border: none;
            color: inherit;
            font-size: 1.2em;
            cursor: pointer;
            padding: 5px;
            line-height: 1;
            opacity: 0.7;
            transition: opacity 0.2s;
        }

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

        .notification.removing,
        .notification.hiding {
            animation: slideOutRight 0.3s ease-in forwards;
        }

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

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

        /* Page Header Styles (with color variants) */
        .page-header {
            color: white;
            padding: 2rem;
            border-radius: 10px;
            margin-bottom: 2rem;
        }

        .page-header h2 {
            margin-bottom: 0.25rem;
            color: white;
        }

        .page-header p {
            margin-bottom: 0;
            color: rgba(255, 255, 255, 0.9);
        }

        /* Header Color Variants */
        .page-header.agencies {
            background: linear-gradient(135deg, #ff6b6b 0%, #4ecdc4 100%);
        }

        .page-header.departments {
            background: linear-gradient(135deg, #2196f3 0%, #4caf50 100%);
        }

        .page-header.settings {
            background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%);
        }

        .page-header.agency-settings {
            background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
        }

        .page-header.phone-numbers {
            background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
        }

        .page-header.suppressions {
            background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
        }

        .page-header.dispositions {
            background: linear-gradient(135deg, #fd7e14 0%, #e55a4e 100%);
        }

        .page-header.scripts {
            background: linear-gradient(135deg, #6f42c1 0%, #8b5cf6 100%);
        }

        .page-header.profile {
            background: linear-gradient(135deg, #6c5ce7 0%, #a29bfe 100%);
        }

        .page-header.contacts {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }

        .page-header.conversations {
            background: linear-gradient(135deg, #6f42c1 0%, #e83e8c 100%);
        }

        .page-header.voicemail {
            background: linear-gradient(135deg, #6f42c1 0%, #e83e8c 100%);
        }

        .page-header.calendar {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }

        .page-header.voipms {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }

        .page-header.register {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }

        .page-header.dashboard {
            background: linear-gradient(135deg, #1976d2 0%, #42a5f5 100%);
        }

        .page-header.agents {
            background: linear-gradient(135deg, #20c997 0%, #28a745 100%);
        }

        .page-header.ai-agents {
            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
        }

        .page-header.users {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }

        .page-header.queues {
            background: linear-gradient(135deg, #ff6b6b 0%, #ff8787 100%);
        }

        .page-header.global-queues {
            background: linear-gradient(135deg, #ffc107 0%, #ff8800 100%);
        }

        .page-header.statuses {
            background: linear-gradient(135deg, #e83e8c 0%, #6f42c1 100%);
        }

        .page-header.call-caps {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }

        .page-header.skills {
            background: linear-gradient(135deg, #673ab7 0%, #9c27b0 100%);
        }

        .page-header.external-queues {
            background: linear-gradient(135deg, #17a2b8 0%, #20c997 100%);
        }

        .page-header.publisher-queues {
            background: linear-gradient(135deg, #6f42c1 0%, #e83e8c 100%);
        }

        .page-header.call-aggregators {
            background: linear-gradient(135deg, #fd79a8 0%, #fdcb6e 100%);
        }
        
        .page-header.campaigns {
            background: linear-gradient(135deg, #ffc107 0%, #ff8800 100%);
        }
        
        .page-header.campaign-applications {
            background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
        }
        
        .page-header.agency-leads-campaigns {
            background: linear-gradient(135deg, #17a2b8 0%, #20c997 100%);
        }
        
        .page-header.system-publisher-dashboard {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        
        .page-header.publisher-campaigns {
            background: linear-gradient(135deg, #6f42c1 0%, #e83e8c 100%);
        }

        .page-header.reports {
            background: linear-gradient(135deg, #fd7e14 0%, #e63946 100%);
        }

        .page-header.platform-settings {
            background: linear-gradient(135deg, #495057 0%, #6c757d 100%);
        }

        .page-header.resource-monitor {
            background: linear-gradient(135deg, #17a2b8 0%, #20c997 100%);
        }

        .page-header.call-log {
            background: linear-gradient(135deg, #fd7e14 0%, #e63946 100%);
        }
        
        .page-header.time-tracking {
            background: linear-gradient(135deg, #20c997 0%, #17a2b8 100%);
        }

        .page-header.queue-log {
            background: linear-gradient(135deg, #6f42c1 0%, #8b5cf6 100%);
        }

        .page-header.compliance {
            background: linear-gradient(135deg, #ff6b6b 0%, #feca57 100%);
        }
        
        .page-header.platform-compliance {
            background: linear-gradient(135deg, #ff5722 0%, #e91e63 100%);
        }

        .page-header.agent-usage {
            background: linear-gradient(135deg, #20c997 0%, #17a2b8 100%);
        }
        
        .page-header.coaching-knowledge {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }

        .page-header.teams {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }

        .page-header.automations {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        }

        .page-header.leads {
            background: linear-gradient(135deg, #20c997 0%, #17a2b8 100%);
        }

        .page-header.dial-campaigns {
            background: linear-gradient(135deg, #fd7e14 0%, #ff6b6b 100%);
        }

        .page-header.states {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }

        .page-header.api-keys {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        }

        .page-header.verticals {
            background: linear-gradient(135deg, #6f42c1 0%, #e83e8c 100%);
        }

        .page-header.ivr-menus {
            background: linear-gradient(135deg, #00b4d8 0%, #0077b6 100%);
        }

        .page-header.buyer-groups {
            background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
        }

        .page-header.call-analysis {
            background: linear-gradient(135deg, #6366f1 0%, #7c3aed 100%);
        }

        .page-header.webhooks {
            background: linear-gradient(135deg, #475569 0%, #64748b 100%);
        }

        .page-header.click-to-call {
            background: linear-gradient(135deg, #0d9488 0%, #059669 100%);
        }

        .page-header.call-flow {
            background: linear-gradient(135deg, #f97316 0%, #ef4444 100%);
        }

        .page-header.conversion-criteria {
            background: linear-gradient(135deg, #fb923c 0%, #e11d48 100%);
        }

        .page-header.email {
            background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);
        }

        .page-header.buyer-dashboard {
            background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
        }

        .page-header.invoice-builder {
            background: linear-gradient(135deg, #10b981 0%, #0891b2 100%);
        }

        .page-header.agent-analytics {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }

        .page-header.queue-analytics {
            background: linear-gradient(135deg, #0ea5e9 0%, #22c55e 100%);
        }

        .page-header.queue-availability {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }

        /* Queue log page filter header */
        .page-toolbar.queue-log .filters-header {
            background: linear-gradient(135deg, #6f42c1 0%, #8b5cf6 100%);
        }

        /* States page filter header */
        .page-toolbar.states .filters-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }

        /* ============================================
           Agency Selector & Badge Styles (shared)
           ============================================ */
        .agency-selector {
            background-color: rgba(255, 255, 255, 0.95) !important;
            border: 1px solid rgba(255, 255, 255, 0.3) !important;
            border-radius: 8px !important;
            padding: 0.5rem 1rem !important;
            color: #333 !important;
            backdrop-filter: blur(10px);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
        }

        .agency-selector:focus {
            background-color: rgba(255, 255, 255, 1) !important;
            border-color: #0d6efd !important;
            color: #333 !important;
            box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25) !important;
        }

        .agency-selector option {
            background: #ffffff !important;
            color: #333 !important;
            padding: 0.5rem;
        }

        [data-theme="dark"] .agency-selector {
            background-color: rgba(255, 255, 255, 0.1) !important;
            border: 1px solid rgba(255, 255, 255, 0.3) !important;
            color: #ffffff !important;
        }

        [data-theme="dark"] .agency-selector:focus {
            background-color: rgba(255, 255, 255, 0.2) !important;
            border-color: #667eea !important;
            color: #ffffff !important;
            box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25) !important;
        }

        [data-theme="dark"] .agency-selector option {
            background: var(--card-bg) !important;
            color: var(--text-primary) !important;
        }

        .agency-name-badge {
            background: rgba(255, 255, 255, 0.2) !important;
            color: white !important;
            border: 2px solid rgba(255, 255, 255, 0.3) !important;
            border-radius: 8px !important;
            padding: 0.75rem 1.25rem !important;
            font-size: 1rem !important;
            font-weight: 600 !important;
            backdrop-filter: blur(10px) !important;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
            transition: all 0.3s ease !important;
            display: flex !important;
            align-items: center !important;
        }

        .agency-name-badge:hover {
            background: rgba(255, 255, 255, 0.25) !important;
            border-color: rgba(255, 255, 255, 0.4) !important;
            transform: translateY(-1px) !important;
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2) !important;
        }

        [data-theme="dark"] .agency-name-badge {
            background: rgba(0, 0, 0, 0.3) !important;
            border-color: rgba(255, 255, 255, 0.2) !important;
            color: #ffffff !important;
        }

        [data-theme="dark"] .agency-name-badge:hover {
            background: rgba(0, 0, 0, 0.4) !important;
            border-color: rgba(255, 255, 255, 0.3) !important;
        }

        .agency-required-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(2px);
            z-index: 10;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 12px;
        }

        .agency-required-message {
            background: var(--card-bg);
            border: 2px solid #667eea;
            border-radius: 12px;
            padding: 2rem;
            text-align: center;
            max-width: 400px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
        }

        .agency-required-message h4 {
            color: #667eea;
            margin-bottom: 1rem;
            font-weight: 600;
        }

        .agency-required-message p {
            color: var(--text-muted);
            margin-bottom: 0;
        }

        /* Enhanced Modal Styles for Dark Mode */
        [data-theme="dark"] .modal-content {
            background-color: var(--card-bg) !important;
            border-color: var(--border-color) !important;
            color: var(--text-primary) !important;
        }

        [data-theme="dark"] .modal-header {
            background-color: var(--table-header-bg) !important;
            border-bottom-color: var(--border-color) !important;
            color: var(--text-primary) !important;
        }

        [data-theme="dark"] .modal-footer {
            border-top-color: var(--border-color) !important;
            background-color: var(--table-header-bg) !important;
        }

        [data-theme="dark"] .modal-title {
            color: var(--text-primary) !important;
        }

        /* Enhanced Form Controls for Dark Mode */
        [data-theme="dark"] .form-control,
        [data-theme="dark"] .form-select {
            background-color: var(--input-bg) !important;
            border-color: var(--border-color) !important;
            color: var(--text-primary) !important;
        }

        [data-theme="dark"] .form-control:focus,
        [data-theme="dark"] .form-select:focus {
            background-color: var(--input-bg) !important;
            border-color: #667eea !important;
            color: var(--text-primary) !important;
            box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25) !important;
        }

        [data-theme="dark"] .form-text {
            color: var(--text-muted) !important;
        }

        [data-theme="dark"] .form-check-input {
            background-color: var(--input-bg) !important;
            border-color: var(--border-color) !important;
        }

        [data-theme="dark"] .form-check-input:checked {
            background-color: #667eea !important;
            border-color: #667eea !important;
        }

        [data-theme="dark"] .form-check-label {
            color: var(--text-primary) !important;
        }

        [data-theme="dark"] .form-select {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 6 7 7 7-7'/%3e%3c/svg%3e") !important;
        }

        /* Button Styles for Dark Mode */
        [data-theme="dark"] .btn-outline-primary {
            color: #0d6efd !important;
            border-color: #0d6efd !important;
        }

        [data-theme="dark"] .btn-outline-primary:hover {
            background-color: #0d6efd !important;
            border-color: #0d6efd !important;
            color: #ffffff !important;
        }

        [data-theme="dark"] .btn-outline-danger {
            color: #dc3545 !important;
            border-color: #dc3545 !important;
        }

        [data-theme="dark"] .btn-outline-danger:hover {
            background-color: #dc3545 !important;
            border-color: #dc3545 !important;
            color: #ffffff !important;
        }

        /* Card Styles */
        .app-card {
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            margin-bottom: 1.5rem;
            overflow: hidden;
            transition: all 0.3s ease;
        }

        .app-card:hover {
            box-shadow: 0 8px 24px var(--card-shadow);
            transform: translateY(-2px);
        }

        .app-card-header {
            background: var(--table-header-bg);
            padding: 1rem 1.5rem;
            border-bottom: 1px solid var(--border-color);
        }

        .app-card-header h5 {
            margin: 0;
            color: var(--text-primary);
            font-weight: 600;
        }

        .app-card-body {
            padding: 1.5rem;
            color: var(--text-primary);
        }

        /* Status Badge Styles */
        .status-badge {
            font-size: 0.875rem;
            padding: 0.25rem 0.5rem;
            border-radius: 4px;
            font-weight: 500;
        }

        .status-success { 
            background-color: #28a745; 
            color: white; 
        }

        .status-warning { 
            background-color: #ffc107; 
            color: #212529; 
        }

        .status-danger { 
            background-color: #dc3545; 
            color: white; 
        }

        .status-info { 
            background-color: #17a2b8; 
            color: white; 
        }

        .status-secondary { 
            background-color: #6c757d; 
            color: white; 
        }

        /* Loading and Animation Utilities */
        .loading-spinner {
            display: inline-block;
            width: 1rem;
            height: 1rem;
            border: 2px solid transparent;
            border-top-color: currentColor;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

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

        .pulse-animation {
            animation: pulse 2s ease-in-out infinite;
        }

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

        /* Grid Layouts */
        .app-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 1.5rem;
            margin-top: 1rem;
        }

        .skills-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 1.5rem;
            margin-top: 1rem;
        }

        /* Save Indicator */
        .save-indicator {
            position: fixed;
            bottom: 2rem;
            right: 2rem;
            padding: 1rem 2rem;
            background: #28a745;
            color: white;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
            display: none;
            align-items: center;
            gap: 0.5rem;
        }

        .save-indicator.show {
            display: flex;
        }

        /* Enhanced Alert Styles for Dark Mode */
        [data-theme="dark"] .alert-danger {
            background-color: rgba(220, 53, 69, 0.1) !important;
            border-color: rgba(220, 53, 69, 0.3) !important;
            color: #dc3545 !important;
        }

        [data-theme="dark"] .alert-warning {
            background-color: rgba(255, 193, 7, 0.1) !important;
            border-color: rgba(255, 193, 7, 0.3) !important;
            color: #ffc107 !important;
        }

        [data-theme="dark"] .alert-success {
            background-color: rgba(40, 167, 69, 0.1) !important;
            border-color: rgba(40, 167, 69, 0.3) !important;
            color: #28a745 !important;
        }

        [data-theme="dark"] .alert-info {
            background-color: rgba(23, 162, 184, 0.1) !important;
            border-color: rgba(23, 162, 184, 0.3) !important;
            color: #17a2b8 !important;
        }

        /* Dropdown Styles for Dark Mode */
        [data-theme="dark"] .dropdown-menu {
            background-color: var(--card-bg) !important;
            border-color: var(--border-color) !important;
        }

        [data-theme="dark"] .dropdown-item {
            color: var(--text-primary) !important;
        }

        [data-theme="dark"] .dropdown-item:hover {
            background-color: var(--table-hover) !important;
            color: var(--text-primary) !important;
        }

        /* Search Highlight */
        .search-highlight {
            background-color: #ffeb3b;
            color: #000;
            padding: 0 2px;
            border-radius: 2px;
        }

        [data-theme="dark"] .search-highlight {
            background-color: #ffc107;
            color: #000;
        }

        /* Small utilities */
        .duration-badge {
            font-size: 0.75rem;
            color: var(--text-muted);
            background: var(--table-header-bg);
            padding: 0.25rem 0.5rem;
            border-radius: 4px;
            border: 1px solid var(--border-color);
        }

        .queue-badge {
            display: inline-block;
            background: var(--table-header-bg);
            color: var(--text-primary);
            border: 1px solid var(--border-color);
            padding: 0.25rem 0.5rem;
            border-radius: 4px;
            font-size: 0.75rem;
            margin-right: 0.25rem;
            margin-top: 0.25rem;
        }

        /* ============================================================================
           GLOBAL FORM AND INPUT STYLES
           ============================================================================ */

        /* Enhanced input group styles */
        .input-group .input-group-text {
            background-color: var(--card-bg);
            border-color: var(--border-color);
            color: var(--text-secondary);
        }

        .input-group .form-control, .input-group .form-select {
            background-color: var(--card-bg);
            border-color: var(--border-color);
            color: var(--text-primary);
        }

        .input-group .form-control:focus, .input-group .form-select:focus {
            background-color: var(--card-bg);
            border-color: var(--primary-bg);
            color: var(--text-primary);
            box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb), 0.25);
        }

        .input-group .form-control::placeholder {
            color: var(--text-muted);
        }

        /* Enhanced form styles */
        .form-label {
            color: var(--text-primary) !important;
            font-weight: 500;
            margin-bottom: 0.5rem;
        }

        .form-control, .form-select {
            background-color: var(--input-bg);
            border: 1px solid var(--border-color);
            color: var(--text-primary);
        }

        .form-control:focus, .form-select:focus {
            background-color: var(--input-bg);
            border-color: #20c997;
            color: var(--text-primary);
            box-shadow: 0 0 0 0.2rem rgba(32, 201, 151, 0.25);
        }

        .form-control::placeholder {
            color: var(--text-muted);
        }

        .form-text {
            color: var(--text-muted);
            font-size: 0.875rem;
            margin-top: 0.25rem;
        }

        .form-check-input {
            background-color: var(--input-bg);
            border-color: var(--border-color);
        }

        .form-check-input:checked {
            background-color: #20c997;
            border-color: #20c997;
        }

        .form-check-label {
            color: var(--text-primary);
        }

        /* Disabled field styles */
        .form-control:disabled,
        .form-select:disabled {
            background-color: var(--table-header-bg) !important;
            cursor: not-allowed !important;
            opacity: 0.7 !important;
        }

        .form-control:disabled:hover,
        .form-select:disabled:hover {
            border-color: var(--border-color) !important;
        }

        /* Disabled field tooltip */
        .disabled-field-wrapper {
            position: relative;
        }

        .disabled-field-wrapper::after {
            content: "This field is read-only for supervisors";
            position: absolute;
            top: -30px;
            left: 0;
            background: var(--modal-header-bg);
            color: var(--text-primary);
            border: 1px solid var(--border-color);
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            white-space: nowrap;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.2s;
            box-shadow: 0 2px 8px var(--card-shadow);
        }

        .disabled-field-wrapper:hover::after {
            opacity: 1;
        }

        /* ============================================================================
           HOURS CONFIGURATION STYLES (reusable)
           ============================================================================ */

        .hours-grid {
            border: 1px solid var(--border-color);
            border-radius: 8px;
            padding: 1rem;
            background: var(--table-header-bg);
        }

        .day-schedule {
            padding: 0.5rem;
            border-radius: 6px;
            transition: background-color 0.2s;
        }

        .day-schedule:hover {
            background-color: var(--border-color);
        }

        .day-schedule .time-inputs {
            transition: opacity 0.3s;
        }

        .day-schedule input[type="checkbox"]:not(:checked) ~ label {
            text-decoration: line-through;
            opacity: 0.6;
        }

        .day-schedule input[type="checkbox"]:not(:checked) ~ .col-md-9 .time-inputs {
            opacity: 0.5;
            pointer-events: none;
        }

        /* ============================================================================
           STATE LICENSING STYLES (reusable)
           ============================================================================ */

        .state-list-container {
            height: 400px;
            overflow-y: auto;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            background: var(--table-header-bg);
        }

        .state-item {
            padding: 0.75rem;
            margin: 0.5rem;
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .state-item:hover {
            background: var(--alert-info-bg);
            border-color: #1976d2;
        }

        .state-item.licensed {
            background: var(--alert-success-bg);
            border-color: #4caf50;
        }

        .proficiency-input {
            width: 60px;
            text-align: center;
        }

        .proficiency-stars {
            color: #ffc107;
            font-size: 0.9rem;
        }

        .proficiency-stars i {
            color: inherit;
        }

        .proficiency-stars .bi-star-fill {
            color: #ffc107;
        }

        .proficiency-stars .bi-star-half {
            color: #ffc107;
        }

        .proficiency-stars .bi-star {
            color: var(--text-muted);
            opacity: 0.4;
        }

        /* ============================================================================
           TAB NAVIGATION STYLES (reusable)
           ============================================================================ */

        .nav-tabs {
            border-bottom-color: var(--border-color);
        }

        .nav-tabs .nav-link {
            color: var(--text-secondary);
            background-color: transparent;
            border-color: transparent;
        }

        .nav-tabs .nav-link:hover {
            color: var(--text-primary);
            border-color: var(--border-color) var(--border-color) transparent;
        }

        .nav-tabs .nav-link.active {
            color: var(--text-primary);
            background-color: var(--card-bg);
            border-color: var(--border-color) var(--border-color) var(--card-bg);
        }

        /* ============================================================================
           BULK IMPORT / TABLE STYLES (reusable)
           ============================================================================ */

        .preview-table {
            color: var(--text-primary);
        }

        .preview-table thead th {
            background-color: var(--table-header-bg);
            color: var(--text-primary);
            border-color: var(--border-color);
        }

        .preview-table tbody td {
            background-color: var(--card-bg);
            color: var(--text-primary);
            border-color: var(--border-color);
        }

        .preview-table tbody tr:hover td {
            background-color: var(--table-hover-bg);
        }

        /* Table danger row styling for dark mode */
        .preview-table .table-danger {
            background-color: rgba(220, 53, 69, 0.1);
        }

        .preview-table .table-danger td {
            color: var(--text-primary);
            border-color: rgba(220, 53, 69, 0.3);
        }

        /* Code elements in preview table */
        .preview-table code {
            background-color: var(--table-header-bg);
            color: #e83e8c;
            padding: 2px 4px;
            border-radius: 3px;
            font-size: 0.875em;
        }

        /* ============================================================================
           GLOBAL TEXT COLOR UTILITIES
           ============================================================================ */

        .text-muted {
            color: var(--text-muted) !important;
        }

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

        .text-secondary {
            color: var(--text-secondary) !important;
        }

        .text-success {
            color: #28a745 !important;
        }

        .text-danger {
            color: #dc3545 !important;
        }

        /* Ensure icons inherit proper colors */
        .bi {
            color: currentColor;
        }

        /* ============================================================================
           UTILITY STYLES
           ============================================================================ */

        /* Button outline utilities */
        .btn-outline-success {
            color: #28a745;
        }

        .btn-outline-success:hover {
            color: white;
        }

        .btn-outline-danger {
            color: #dc3545;
        }

        .btn-outline-danger:hover {
            color: white;
        }

        /* Badge utilities */
        .badge {
            color: white !important;
        }

        /* ============================================================================
           REUSABLE PAGE LAYOUT COMPONENTS
           ============================================================================ */

        /* Generic page container (replaces page-specific containers like agents-container) */
        .page-container {
            background: #f4f6f9;
            border-radius: 12px;
            border: 1px solid var(--border-color);
            overflow: hidden;
            margin-bottom: 0;
            margin-top: 1.5rem;
        }

        [data-theme="dark"] .page-container {
            background: var(--card-bg);
        }

        /* Generic page toolbar with filters */
        .page-toolbar {
            padding: 0;
            border-bottom: 1px solid var(--border-color);
            background: var(--table-header-bg);
        }

        .page-toolbar .filters-header {
            padding: 0.75rem 1.5rem;
            color: white;
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            user-select: none;
        }

        .page-toolbar .filters-header h6 {
            margin: 0;
            font-weight: 600;
            color: white;
        }
        
        .page-toolbar .filters-header i {
            color: white;
        }

        .page-toolbar .filters-body {
            padding: 1.5rem;
            background: var(--table-header-bg);
        }

        .page-toolbar.minimized .filters-body {
            display: none;
        }

        .page-toolbar.minimized .filters-toggle-icon {
            transform: rotate(180deg);
        }

        .filters-toggle-icon {
            transition: transform 0.3s ease;
        }

        /* Generic page content area */
        .page-content {
            padding: 1.5rem;
        }

        /* Generic page block for headers */
        .page-block {
            margin: 2rem 0;
            background: none;
        }

        /* ============================================================================
           REUSABLE GRID AND CARD COMPONENTS
           ============================================================================ */

        /* Generic grid layout (works for users, agencies, queues, etc.) */
        .app-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
            gap: 1.5rem;
            margin-top: 1rem;
        }

        /* Smaller items grid */
        .app-grid.small-items {
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        }

        /* Large items grid */
        .app-grid.large-items {
            grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
        }

        /* Generic item card (works for users, agencies, queues, etc.) */
        .item-card {
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 10px;
            padding: 1.5rem;
            transition: all 0.3s ease;
            position: relative;
            color: var(--text-primary);
            box-shadow: 0 1px 3px var(--card-shadow);
        }

        .item-card:hover {
            box-shadow: 0 4px 12px var(--card-shadow);
            transform: translateY(-2px);
            border-color: #20c997;
        }

        /* Generic item avatar */
        .item-avatar {
            width: 48px;
            height: 48px;
            font-size: 1.25rem;
            font-weight: 600;
        }

        /* Generic item info section */
        .item-info {
            flex: 1;
            margin-left: 1rem;
        }

        .item-name {
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--text-primary) !important;
            margin-bottom: 0.25rem;
        }

        .item-subtitle {
            font-size: 0.875rem;
            color: var(--text-muted) !important;
        }

        .item-info .small {
            color: var(--text-muted) !important;
        }

        /* Generic item meta section (badges, tags, etc.) */
        .item-meta {
            display: flex;
            gap: 0.5rem;
            margin-top: 0.75rem;
            flex-wrap: wrap;
        }

        /* Generic item actions section */
        .item-actions {
            margin-top: 1rem;
            padding-top: 1rem;
            border-top: 1px solid var(--border-color);
            display: flex;
            gap: 0.5rem;
        }

        /* Role badge styling */
        .badge-role {
            font-size: 0.875rem;
            padding: 0.25rem 0.75rem;
        }

        /* Performance badges */
        .performance-badge {
            display: inline-block;
            padding: 0.25rem 0.5rem;
            font-size: 0.75rem;
            border-radius: 4px;
            font-weight: 600;
        }

        .performance-excellent { 
            background-color: #198754; 
            color: #ffffff; 
        }
        .performance-good { 
            background-color: #0d6efd; 
            color: #ffffff; 
        }
        .performance-average { 
            background-color: #ffc107; 
            color: #000000; 
        }
        .performance-poor { 
            background-color: #dc3545; 
            color: #ffffff; 
        }

        /* Table containers */
        .table-container {
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 10px;
            padding: 1.5rem;
            margin-bottom: 2rem;
            overflow-x: auto;
        }

        .section-title {
            font-size: 1.5rem;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 1.5rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: relative;
        }

        .section-title i {
            margin-right: 0.5rem;
            color: #667eea !important;
            opacity: 0.8;
            transition: all 0.3s ease;
            -webkit-text-fill-color: #667eea !important;
        }

        .section-title span {
            position: relative;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        [data-theme="dark"] .section-title span,
        .dark-mode .section-title span {
            background: linear-gradient(135deg, #8da4f5 0%, #a78bfa 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        /* ============================================================================
           PAGE-SPECIFIC FILTER HEADER COLORS (using CSS custom properties)
           ============================================================================ */

        /* Agents page filter header */
        .page-toolbar.agents .filters-header {
            background: linear-gradient(135deg, #20c997 0%, #28a745 100%);
        }

        /* AI Agents page filter header */
        .page-toolbar.ai-agents .filters-header {
            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
        }

        /* Users page filter header */
        .page-toolbar.users .filters-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }

        /* Queues page filter header */
        .page-toolbar.queues .filters-header {
            background: linear-gradient(135deg, #ff6b6b 0%, #ff8787 100%);
        }

        /* Global queues page filter header */
        .page-toolbar.global-queues .filters-header {
            background: linear-gradient(135deg, #ffc107 0%, #ff8800 100%);
        }

        /* Publisher queues page filter header */
        .page-toolbar.publisher-queues .filters-header {
            background: linear-gradient(135deg, #6f42c1 0%, #e83e8c 100%);
        }

        /* External queues page filter header */
        .page-toolbar.external-queues .filters-header {
            background: linear-gradient(135deg, #17a2b8 0%, #20c997 100%);
        }

        /* Agencies page filter header */
        .page-toolbar.agencies .filters-header {
            background: linear-gradient(135deg, #ff6b6b 0%, #4ecdc4 100%);
        }

        /* Departments page filter header */
        .page-toolbar.departments .filters-header {
            background: linear-gradient(135deg, #2196f3 0%, #4caf50 100%);
        }

        /* Additional page-specific filter headers */
        .page-toolbar.phone-numbers .filters-header {
            background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
        }

        .page-toolbar.suppressions .filters-header {
            background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
        }

        .page-toolbar.call-caps .filters-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }

        .page-toolbar.dispositions .filters-header {
            background: linear-gradient(135deg, #fd7e14 0%, #e55a4e 100%);
        }

        .page-toolbar.scripts .filters-header {
            background: linear-gradient(135deg, #6f42c1 0%, #8b5cf6 100%);
        }

        /* States page filter header */
        .page-toolbar.states .filters-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }

        /* Skills page filter header */
        .page-toolbar.skills .filters-header {
            background: linear-gradient(135deg, #673ab7 0%, #9c27b0 100%);
        }

        /* Phone numbers page filter header */
        .page-toolbar.phone-numbers .filters-header {
            background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
        }

        /* Dispositions page filter header */
        .page-toolbar.dispositions .filters-header {
            background: linear-gradient(135deg, #fd7e14 0%, #e55a4e 100%);
        }

        /* Scripts page filter header */
        .page-toolbar.scripts .filters-header {
            background: linear-gradient(135deg, #6f42c1 0%, #8b5cf6 100%);
        }

        /* Statuses page filter header */
        .page-toolbar.statuses .filters-header {
            background: linear-gradient(135deg, #e83e8c 0%, #6f42c1 100%);
        }

        .page-toolbar.call-log .filters-header {
            background: linear-gradient(135deg, #fd7e14 0%, #e63946 100%);
        }

        /* Call caps page filter header */
        .page-toolbar.call-caps .filters-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }

        /* Call aggregators page filter header */
        .page-toolbar.call-aggregators .filters-header {
            background: linear-gradient(135deg, #fd79a8 0%, #fdcb6e 100%);
        }
        
        /* Campaigns page filter header */
        .page-toolbar.campaigns .filters-header {
            background: linear-gradient(135deg, #ffc107 0%, #ff8800 100%);
        }

        /* Reports page filter header */
        .page-toolbar.reports .filters-header {
            background: linear-gradient(135deg, #fd7e14 0%, #e63946 100%);
        }

        /* ============================================================================
           VIEW TOGGLE (Grid/List) - Shared Styles
           ============================================================================ */

        /* View toggle button group - for use in filters header */
        .view-toggle {
            display: flex;
            gap: 0.25rem;
            background: rgba(255, 255, 255, 0.15);
            padding: 0.25rem;
            border-radius: 6px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            margin-left: auto;
        }

        .view-toggle-btn {
            background: transparent;
            border: none;
            color: rgba(255, 255, 255, 0.8);
            padding: 0.375rem 0.75rem;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.2s ease;
            font-size: 0.875rem;
            display: flex;
            align-items: center;
            gap: 0.25rem;
        }

        .view-toggle-btn:hover {
            background: rgba(255, 255, 255, 0.1);
            color: white;
        }

        .view-toggle-btn.active {
            background: rgba(255, 255, 255, 0.25);
            color: white;
        }

        .view-toggle-btn i {
            font-size: 1rem;
        }

        /* Items table for list view */
        .items-table-container {
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 10px;
            overflow: hidden;
            margin-top: 1rem;
        }

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

        .items-table thead {
            background: var(--table-header-bg);
        }

        .items-table th {
            padding: 1rem;
            text-align: left;
            font-weight: 600;
            color: var(--text-primary);
            border-bottom: 2px solid var(--border-color);
            white-space: nowrap;
        }

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

        .items-table tbody tr:last-child {
            border-bottom: none;
        }

        .items-table tbody tr:hover {
            background: var(--table-hover);
        }

        .items-table td {
            padding: 1rem;
            color: var(--text-primary);
            vertical-align: middle;
        }

        .items-table .item-name-cell {
            font-weight: 600;
        }

        .items-table .item-name-cell .item-subtitle {
            font-weight: 400;
            font-size: 0.85rem;
            color: var(--text-muted);
            margin-top: 0.25rem;
        }

        .items-table .status-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.35rem 0.75rem;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 500;
        }

        .items-table .status-indicator {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            display: inline-block;
        }

        .items-table .actions-cell {
            display: flex;
            gap: 0.5rem;
            align-items: center;
        }

        .items-table .btn-icon {
            padding: 0.375rem 0.5rem;
            border-radius: 6px;
            border: 1px solid var(--border-color);
            background: var(--card-bg);
            color: var(--text-muted);
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .items-table .btn-icon:hover {
            background: var(--table-hover);
            color: var(--text-primary);
            border-color: var(--text-muted);
        }

        .items-table .btn-icon.btn-edit:hover {
            color: #0d6efd;
            border-color: #0d6efd;
        }

        .items-table .btn-icon.btn-delete:hover {
            color: #dc3545;
            border-color: #dc3545;
        }

        /* Responsive table */
        @media (max-width: 768px) {
            .items-table-container {
                overflow-x: auto;
            }
            
            .view-toggle-btn span {
                display: none;
            }

            .page-header {
                padding: 1rem !important;
                margin-bottom: 1rem !important;
            }

            .page-header h2 {
                font-size: 1.2rem;
            }

            .page-header p {
                font-size: 0.8rem;
            }

            .page-header .d-flex.justify-content-between {
                flex-direction: column;
                align-items: flex-start !important;
                gap: 0.75rem;
            }

            .page-header .d-flex.align-items-center.gap-3,
            .page-header .d-flex.align-items-center.gap-2 {
                width: 100%;
                flex-wrap: wrap;
                gap: 0.5rem !important;
            }

            .page-header .voicemail-selector,
            .page-header select.form-select {
                min-width: 0 !important;
                width: 100% !important;
                font-size: 0.8rem;
            }

            .app-grid {
                grid-template-columns: 1fr !important;
                gap: 1rem;
            }

            .page-toolbar {
                padding: 0.75rem !important;
            }

            .page-toolbar .filters-body {
                flex-direction: column;
            }

            .container-fluid {
                padding-left: 0.75rem !important;
                padding-right: 0.75rem !important;
            }
        }

        /* ============================================================================
           REUSABLE MODAL COMPONENTS
           ============================================================================ */

        /* Management tabs for modals (queue management, publisher management, etc.) */
        .management-tabs .nav-link {
            color: var(--text-muted);
            border: 1px solid transparent;
            border-radius: 8px 8px 0 0;
            transition: all 0.3s ease;
        }

        .management-tabs .nav-link:hover {
            color: var(--text-primary);
            background-color: var(--table-hover);
        }

        .management-tabs .nav-link.active {
            color: var(--text-primary);
            background-color: var(--card-bg);
            border-color: var(--border-color) var(--border-color) transparent;
        }

        .management-tabs .nav-link i {
            margin-right: 0.5rem;
            font-size: 1rem;
        }

        /* Page-specific tab active border colors */
        .management-tabs.queues .nav-link.active {
            border-bottom: 2px solid #ff6b6b;
        }

        .management-tabs.publisher-queues .nav-link.active {
            border-bottom: 2px solid #6f42c1;
        }

        .management-tabs.global-queues .nav-link.active {
            border-bottom: 2px solid #ffc107;
        }

        .management-tabs.external-queues .nav-link.active {
            border-bottom: 2px solid #17a2b8;
        }

        .management-tabs.agencies .nav-link.active {
            border-bottom: 2px solid #ff6b6b;
        }

        /* Billing panel styles for modals */
        .billing-panel .form-label {
            font-weight: 500;
            margin-bottom: 0.5rem;
        }

        .billing-panel .form-text {
            font-size: 0.875rem;
            margin-top: 0.25rem;
        }

        .billing-panel .form-check-label {
            color: var(--text-primary);
            font-weight: normal;
        }

        .billing-panel .alert {
            background-color: var(--alert-info-bg);
            border-color: var(--border-color);
            color: var(--text-primary);
        }

        .billing-panel .alert-info {
            background-color: rgba(13, 202, 240, 0.1);
            border-color: rgba(13, 202, 240, 0.2);
        }

        /* Modal panel containers */
        .modal-panel {
            padding: 1.5rem;
        }

        .modal-panel h6 {
            margin-bottom: 1rem;
            color: var(--text-primary);
            font-weight: 600;
        }

        /* Modal form sections */
        .modal-form-section {
            margin-bottom: 2rem;
        }

        .modal-form-section:last-child {
            margin-bottom: 0;
        }

        .modal-form-section h6 {
            font-size: 1rem;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 1rem;
            padding-bottom: 0.5rem;
            border-bottom: 1px solid var(--border-color);
        }

        /* ============================================================================
           REUSABLE STATS COMPONENTS
           ============================================================================ */

        /* Stats container (used across queues, publisher-queues, external-queues, etc.) */
        .item-stats {
            display: flex;
            gap: 1rem;
            margin-top: 1rem;
            padding-top: 1rem;
            border-top: 1px solid var(--border-color);
        }

        /* Individual stat item */
        .stat-item {
            flex: 1;
            text-align: center;
        }

        .stat-value {
            font-size: 1.5rem;
            font-weight: bold;
            color: var(--text-primary);
        }

        .stat-label {
            font-size: 0.75rem;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        /* ============================================================================
           REUSABLE BADGE COMPONENTS
           ============================================================================ */

        /* Overflow type badges (used in queue management) */
        .overflow-badge {
            display: inline-block;
            padding: 0.25rem 0.5rem;
            font-size: 0.75rem;
            border-radius: 4px;
            margin-top: 0.5rem;
        }

        .overflow-voicemail { 
            background-color: var(--alert-info-bg); 
            color: #1976d2; 
        }

        .overflow-disconnect { 
            background-color: var(--alert-danger-bg); 
            color: #c62828; 
        }

        .overflow-transfer { 
            background-color: #f3e5f5; 
            color: #7b1fa2; 
        }

        .overflow-callback { 
            background-color: var(--alert-success-bg); 
            color: #388e3c; 
        }

        /* Status badges (active/inactive, online/offline, etc.) */
        .status-badge {
            font-size: 0.875rem;
            padding: 0.25rem 0.5rem;
            border-radius: 4px;
            font-weight: 500;
        }

        .status-success { 
            background-color: #28a745; 
            color: white; 
        }

        .status-warning { 
            background-color: #ffc107; 
            color: #212529; 
        }

        .status-danger { 
            background-color: #dc3545; 
            color: white; 
        }

        .status-info { 
            background-color: #17a2b8; 
            color: white; 
        }

        .status-secondary { 
            background-color: #6c757d; 
            color: white; 
        }

        /* Connection/Activity badges */
        .connection-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.25rem;
            padding: 0.25rem 0.5rem;
            font-size: 0.75rem;
            border-radius: 4px;
            font-weight: 500;
        }

        .connection-online {
            background-color: rgba(40, 167, 69, 0.1);
            color: #28a745;
            border: 1px solid rgba(40, 167, 69, 0.3);
        }

        .connection-offline {
            background-color: rgba(220, 53, 69, 0.1);
            color: #dc3545;
            border: 1px solid rgba(220, 53, 69, 0.3);
        }

        .connection-unknown {
            background-color: rgba(108, 117, 125, 0.1);
            color: #6c757d;
            border: 1px solid rgba(108, 117, 125, 0.3);
        }

        /* =====================================================
           SHARED COMPONENT STYLES (added by middleware plan)
           ===================================================== */

        /* Hoverable Card - Shared hover animation for cards
           Replaces 25+ inline hover transform definitions */
        .hoverable-card {
            transition: all 0.3s ease;
        }
        .hoverable-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        }

        /* Empty State - Shared empty state pattern
           Replaces 6+ module-specific implementations */
        .empty-state {
            text-align: center;
            padding: 4rem 2rem;
        }
        .empty-state-icon {
            font-size: 4rem;
            color: #9ca3af;
            margin-bottom: 1rem;
        }
        .empty-state-title {
            font-size: 1.5rem;
            font-weight: 600;
            color: var(--text-primary, #374151);
            margin-bottom: 0.5rem;
        }
        .empty-state-text {
            color: var(--text-secondary, #6b7280);
            margin-bottom: 2rem;
        }
        [data-theme="dark"] .empty-state-icon {
            color: #6b7280;
        }

        /* Pulse Scale Animation - Additional variant
           The opacity-based @keyframes pulse is already defined above.
           This adds the scale-based variant used by some modules. */
        @keyframes pulse-scale {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }
        .pulse-scale-animation {
            animation: pulse-scale 2s ease-in-out infinite;
        }

        /* Dark Mode Table Overrides - Shared across 7+ modules
           Replaces per-module dark table override blocks */
        [data-theme="dark"] .table,
        [data-theme="dark"] .table * {
            background-color: var(--card-bg);
            color: var(--text-primary);
        }
        [data-theme="dark"] .table td,
        [data-theme="dark"] .table th,
        [data-theme="dark"] .table tr,
        [data-theme="dark"] .table tbody,
        [data-theme="dark"] .table thead {
            background-color: var(--card-bg);
            color: var(--text-primary);
            border-color: var(--border-color);
        }
        [data-theme="dark"] .table-hover tbody tr:hover,
        [data-theme="dark"] .table-hover tbody tr:hover td {
            background-color: var(--table-hover);
        }

        /* Menu Config Editor Dark Mode
           Shared across verticals, agencies, and users menu configurators */
        .menu-config-item .drag-handle,
        .agency-menu-config-item .drag-handle,
        .user-menu-config-item .drag-handle {
            color: var(--text-muted);
        }
        [data-theme="dark"] .menu-config-item,
        [data-theme="dark"] .agency-menu-config-item,
        [data-theme="dark"] .user-menu-config-item {
            background-color: var(--card-bg);
            border-color: var(--border-color);
            color: var(--text-primary);
        }
        [data-theme="dark"] .menu-sortable-list .sortable-ghost,
        [data-theme="dark"] .agency-menu-sortable-list .sortable-ghost,
        [data-theme="dark"] .user-menu-sortable-list .sortable-ghost {
            background-color: var(--table-hover) !important;
        }

        /* Auth Card Styles - Shared across login, signup, publisher-signup
           Replaces 3 per-module auth card style blocks */
        .auth-card .card-header {
            background: var(--primary-gradient) !important;
            border-bottom: none;
            padding: 1.5rem;
            color: white;
        }
        .auth-card .card-header h4 {
            font-weight: 600;
            color: white;
        }
        .auth-card .card-body {
            padding: 2rem;
        }
        .auth-card .card-footer {
            background: var(--table-header-bg) !important;
            border-top: 1px solid var(--border-color) !important;
        }

        /* Shared Filter Header Gradient
           Replaces 10+ per-module filter header gradient declarations.
           Individual page-toolbar variants can still override if needed. */
        .page-toolbar .filters-header {
            background: var(--primary-gradient);
            color: white;
        }
        .page-toolbar .filters-header h6 {
            color: white;
        }
        .page-toolbar .filters-header .filters-toggle-icon {
            color: rgba(255, 255, 255, 0.9);
        }

        /* Shared Form Control Theming
           Replaces 12 per-module form control style overrides */
        .form-label {
            font-weight: 500;
            color: var(--text-primary) !important;
        }
        .form-control,
        .form-select {
            border: 1px solid var(--border-color);
            transition: all 0.2s ease;
        }
        .form-control:focus,
        .form-select:focus {
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
        }

        /* Item Card Base Styles - Shared accent bar with per-module color overrides
           Set --card-accent-from and --card-accent-to to customize per module */
        .item-card {
            --card-accent-from: #667eea;
            --card-accent-to: #764ba2;
            display: flex;
            flex-direction: column;
            height: 100%;
            overflow: hidden;
            position: relative;
        }
        .item-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, var(--card-accent-from), var(--card-accent-to));
            border-radius: 10px 10px 0 0;
        }
        .item-card.inactive::after {
            content: 'INACTIVE';
            position: absolute;
            top: 45px;
            right: 15px;
            background: #6c757d;
            color: white;
            padding: 0.25rem 0.5rem;
            font-size: 0.75rem;
            border-radius: 4px;
            font-weight: 600;
            letter-spacing: 0.5px;
        }