/**
 * VIQ Portal Dashboard Styles
 * Extracted from viq-agent-portal.php
 * Loaded via wp_enqueue_style() in viq_enqueue_portal_scripts()
 */

/* ============================================= */
/* MAIN DASHBOARD STYLES                         */
/* ============================================= */
/* Disable all GridStack resize handles — widgets have fixed sizes */
.gs-resizable-handle { display: none !important; }
.grid-stack-item > .ui-resizable-handle { display: none !important; }
        :root {
            --primary-50: #eff6ff;
            --primary-100: #dbeafe;
            --primary-500: #1D4ED8;
            --primary-600: #1d4ed8;
            --primary-700: #1e40af;
            /* Light theme colors */
            --gray-50: #F8FAFC;
            --gray-100: #F1F5F9;
            --gray-200: #E2E8F0;
            --gray-300: #CBD5E1;
            --gray-400: #94A3B8;
            --gray-500: #64748B;
            --gray-600: #475569;
            --gray-700: #334155;
            --gray-800: #1E293B;
            --gray-900: #0F172A;
            --success: #10b981;
            --warning: #f59e0b;
            --error: #ef4444;
            --radius: 6px;
            --radius-md: 8px;
            --radius-lg: 12px;
            /* Text colors for light theme */
            --text-primary: #1E293B;
            --text-secondary: #475569;
            --text-muted: #64748B;
            --text-danger: #ef4444;
            --accent-success: #10b981;
            /* Materialize Blue Theme */
            --md-blue-500: #1D4ED8;
            --md-blue-700: #1e40af;
            --md-blue-accent: #3B82F6;
        }

        /* ============================================= */
        /* TAB NAVIGATION BAR                            */
        /* ============================================= */
        .viq-tab-link {
            padding: 12px 16px;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            color: #64748B;
            font-size: 13px;
            font-weight: 500;
            border-bottom: 3px solid transparent;
            white-space: nowrap;
            text-decoration: none !important;
            transition: color 0.2s, border-color 0.2s;
        }
        .viq-tab-link:hover { color: #1D4ED8; }
        .viq-tab-link.active { color: #1D4ED8; border-bottom-color: #1D4ED8; font-weight: 600; }
        .viq-tab-link i { font-size: 18px; }

        /* ============================================= */
        /* MATERIALIZE CSS OVERRIDES & ENHANCEMENTS     */
        /* ============================================= */

        /* Override Materialize's default colors with blue theme */
        .btn, .btn-large, .btn-small {
            background-color: #3B82F6 !important;
            border-radius: 6px !important;
            text-transform: none !important;
            font-weight: 600 !important;
            letter-spacing: 0 !important;
            box-shadow: 0 2px 4px rgba(168, 85, 247, 0.3) !important;
            transition: all 0.2s ease !important;
        }
        .btn:hover, .btn-large:hover, .btn-small:hover {
            background-color: #1D4ED8 !important;
            box-shadow: 0 4px 8px rgba(168, 85, 247, 0.4) !important;
        }
        .btn:focus, .btn-large:focus, .btn-small:focus {
            background-color: #1D4ED8 !important;
        }
        .btn.primary-blue, .btn-flat.primary-blue-text {
            background-color: #3B82F6 !important;
        }
        .btn-flat {
            color: #3B82F6 !important;
            text-transform: none !important;
            font-weight: 600 !important;
        }
        .btn-flat:hover {
            background-color: rgba(168, 85, 247, 0.1) !important;
        }
        .btn.btn-secondary, .btn-outline {
            background-color: white !important;
            color: #374151 !important;
            border: 1px solid #e5e7eb !important;
            box-shadow: none !important;
        }
        .btn.btn-secondary:hover, .btn-outline:hover {
            background-color: #f9fafb !important;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
        }

        /* Disable Materialize waves ripple effect */
        .waves-effect .waves-ripple {
            display: none !important;
        }

        /* Material Card Styling */
        .card, .viq-card, .lead-card {
            border-radius: 8px !important;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04) !important;
            transition: box-shadow 0.25s ease, transform 0.25s ease !important;
        }
        .card:hover, .viq-card:hover {
            box-shadow: 0 4px 16px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.06) !important;
        }
        .card .card-content, .viq-card .card-content {
            padding: 20px !important;
        }
        .card .card-title, .viq-card .card-title {
            font-weight: 600 !important;
            color: #1e293b !important;
        }
        .card .card-action {
            border-top: 1px solid #e5e7eb !important;
            padding: 12px 20px !important;
        }
        .card .card-action a {
            color: #3B82F6 !important;
            font-weight: 600 !important;
            text-transform: none !important;
        }

        /* Material Input Fields */
        .input-field input[type=text]:focus,
        .input-field input[type=email]:focus,
        .input-field input[type=password]:focus,
        .input-field input[type=tel]:focus,
        .input-field input[type=number]:focus,
        .input-field textarea:focus {
            border-bottom: 1px solid #3B82F6 !important;
            box-shadow: 0 1px 0 0 #3B82F6 !important;
        }
        .input-field input[type=text]:focus + label,
        .input-field input[type=email]:focus + label,
        .input-field input[type=password]:focus + label,
        .input-field textarea:focus + label {
            color: #3B82F6 !important;
        }

        /* Material Checkboxes with blue */
        [type="checkbox"].filled-in:checked + span:not(.lever):after {
            border: 2px solid #3B82F6 !important;
            background-color: #3B82F6 !important;
        }
        [type="checkbox"]:checked + span:not(.lever):before {
            border-right: 2px solid #3B82F6 !important;
            border-bottom: 2px solid #3B82F6 !important;
        }

        /* Material Select */
        .select-wrapper input.select-dropdown:focus {
            border-bottom: 1px solid #3B82F6 !important;
        }
        .dropdown-content li > a, .dropdown-content li > span {
            color: #374151 !important;
        }
        .dropdown-content li:hover, .dropdown-content li.active {
            background-color: rgba(168, 85, 247, 0.1) !important;
        }

        /* Material Tabs */
        .tabs {
            background-color: white !important;
            border-radius: 8px !important;
            box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
        }
        .tabs .tab a {
            color: #6b7280 !important;
            font-weight: 500 !important;
            text-transform: none !important;
        }
        .tabs .tab a:hover, .tabs .tab a.active {
            color: #3B82F6 !important;
        }
        .tabs .indicator {
            background-color: #3B82F6 !important;
        }

        /* Material Tooltips */
        .material-tooltip {
            background-color: #1f2937 !important;
            border-radius: 6px !important;
            font-size: 12px !important;
            padding: 8px 12px !important;
        }

        /* Material Floating Action Button */
        .btn-floating {
            background-color: #3B82F6 !important;
        }
        .btn-floating:hover {
            background-color: #1D4ED8 !important;
        }
        .btn-floating.pulse::before {
            background-color: rgba(168, 85, 247, 0.4) !important;
        }

        /* Material Collection (Lists) */
        .collection {
            border: 1px solid #e5e7eb !important;
            border-radius: 8px !important;
            overflow: hidden !important;
        }
        .collection .collection-item {
            border-bottom: 1px solid #f3f4f6 !important;
            padding: 16px 20px !important;
        }
        .collection .collection-item:last-child {
            border-bottom: none !important;
        }
        .collection .collection-item.active {
            background-color: rgba(168, 85, 247, 0.1) !important;
            color: #3B82F6 !important;
        }
        .collection a.collection-item:hover {
            background-color: #f9fafb !important;
        }

        /* Material Badges */
        .badge {
            background-color: #3B82F6 !important;
            border-radius: 12px !important;
            font-weight: 600 !important;
        }
        .badge.new::after {
            content: "" !important;
        }

        /* Material Chips */
        .chip {
            background-color: #f3f4f6 !important;
            border-radius: 16px !important;
            font-weight: 500 !important;
            color: #374151 !important;
        }
        .chip.primary-blue {
            background-color: rgba(168, 85, 247, 0.15) !important;
            color: #3B82F6 !important;
        }

        /* Material Progress */
        .progress {
            background-color: rgba(168, 85, 247, 0.2) !important;
            border-radius: 4px !important;
        }
        .progress .determinate, .progress .indeterminate {
            background-color: #3B82F6 !important;
        }

        /* Material Modal */
        .modal {
            border-radius: 12px !important;
            max-height: 85% !important;
        }
        .modal .modal-content {
            padding: 24px !important;
        }
        .modal .modal-footer {
            border-top: 1px solid #e5e7eb !important;
            padding: 16px 24px !important;
            background-color: #f9fafb !important;
            border-radius: 0 0 12px 12px !important;
        }
        .modal-overlay {
            background-color: rgba(0, 0, 0, 0.5) !important;
        }

        /* Material Switch */
        .switch label input[type=checkbox]:checked + .lever {
            background-color: rgba(168, 85, 247, 0.5) !important;
        }
        .switch label input[type=checkbox]:checked + .lever::after {
            background-color: #3B82F6 !important;
        }

        /* VIQ Custom Button Classes with Material Feel */
        .viq-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 10px 20px;
            font-size: 14px;
            font-weight: 600;
            border-radius: 6px;
            border: none;
            cursor: pointer;
            transition: all 0.2s ease;
            text-decoration: none;
            font-family: inherit;
            position: relative;
            overflow: hidden;
        }
        .viq-btn-primary {
            background: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%);
            color: white;
            box-shadow: 0 2px 8px rgba(168, 85, 247, 0.35);
        }
        .viq-btn-primary:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(168, 85, 247, 0.45);
        }
        .viq-btn-secondary {
            background: white;
            color: #374151;
            border: 1px solid #e5e7eb;
            box-shadow: 0 1px 2px rgba(0,0,0,0.05);
        }
        .viq-btn-secondary:hover {
            background: #f9fafb;
            border-color: #d1d5db;
        }
        .viq-btn-danger {
            background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
            color: white;
            box-shadow: 0 2px 8px rgba(239, 68, 68, 0.35);
        }
        .viq-btn-success {
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
            color: white;
            box-shadow: 0 2px 8px rgba(16, 185, 129, 0.35);
        }
        .viq-btn-sm {
            padding: 6px 12px;
            font-size: 12px;
        }
        .viq-btn-lg {
            padding: 14px 28px;
            font-size: 16px;
        }
        .viq-btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none !important;
        }

        /* Material-style Icon Buttons */
        .viq-icon-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: transparent;
            border: none;
            cursor: pointer;
            transition: background 0.2s ease;
            color: #6b7280;
        }
        .viq-icon-btn:hover {
            background: rgba(0,0,0,0.05);
            color: #374151;
        }
        .viq-icon-btn.primary-blue {
            color: #3B82F6;
        }
        .viq-icon-btn.primary-blue:hover {
            background: rgba(168, 85, 247, 0.1);
        }

        /* Material-style Stats Cards */
        .viq-stat-card {
            background: white;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.06);
            border: 1px solid #f3f4f6;
            transition: all 0.25s ease;
        }
        .viq-stat-card:hover {
            box-shadow: 0 4px 16px rgba(0,0,0,0.1);
            transform: translateY(-2px);
        }
        .viq-stat-card .stat-value {
            font-size: 28px;
            font-weight: 700;
            color: #1e293b;
            line-height: 1.2;
        }
        .viq-stat-card .stat-label {
            font-size: 13px;
            color: #6b7280;
            margin-top: 4px;
        }
        .viq-stat-card.primary-blue {
            border-left: 4px solid #3B82F6;
        }
        .viq-stat-card.green {
            border-left: 4px solid #10b981;
        }
        .viq-stat-card.blue {
            border-left: 4px solid #3b82f6;
        }
        .viq-stat-card.orange {
            border-left: 4px solid #f59e0b;
        }

        /* Animations */
        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }

        /* Ensure page scrolling works */
        html {
            margin: 0 !important;
            padding: 0 !important;
            height: auto !important;
            min-height: 100% !important;
            max-height: none !important;
            overflow-y: auto !important;
            overflow-x: hidden !important;
            position: static !important;
        }

        body {
            margin: 0 !important;
            padding: 0 !important;
            height: 100vh !important;
            max-height: 100vh !important;
            overflow: hidden !important;
            overflow-x: hidden !important;
            position: static !important;
            background: #2C2B30 !important;
        }

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

        /* === LAYOUT: Full-Width Dashboard === */
        .viq-dashboard {
            display: flex;
            flex-direction: column;
            height: 100%;
            width: 100%;
            max-width: 100%;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            color: var(--gray-900);
            background: var(--gray-50);
            margin: 0;
            padding: 0;
            padding-top: 0 !important;
            overflow: hidden !important;
        }

        .viq-dashboard > nav:first-child {
            margin-top: 0 !important;
        }

        /* ============================================= */
        /* MATERIALIZE NAVBAR - Fixed with sidebar      */
        /* White background with subtle blue accents  */
        /* ============================================= */
        nav {
            display: none !important;
        }

        nav .nav-wrapper {
            height: 64px !important;
            padding: 0 20px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: space-between !important;
            overflow: hidden !important;
        }

        nav .nav-left {
            display: flex;
            align-items: center;
        }

        nav .brand-logo {
            font-size: 17px !important;
            font-weight: 600 !important;
            padding: 0 !important;
            position: static !important;
            transform: none !important;
            height: 64px !important;
            line-height: 64px !important;
            color: #ffffff !important;
        }

        nav .nav-right {
            display: flex;
            align-items: center;
            gap: 16px;
            height: 64px;
        }

        nav .phone-status {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 6px 10px;
            background: rgba(242, 196, 206, 0.15);
            border-radius: 16px;
            font-size: 12px;
            color: #F2C4CE;
            white-space: nowrap;
        }

        nav .phone-status .status-dot {
            width: 6px;
            height: 6px;
            background: #F2C4CE;
            border-radius: 50%;
            animation: pulse 2s infinite;
        }

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

        nav .nav-divider {
            width: 1px;
            height: 24px;
            background: #4F4F51;
        }

        nav .nav-welcome {
            color: #D6D6D6;
            font-size: 13px;
            white-space: nowrap;
        }

        nav .nav-welcome .agent-name {
            color: #F2C4CE;
            font-weight: 600;
        }

        /* Floating Dialer Button - fixed position */
        .dialer-fab {
            position: fixed;
            bottom: 24px;
            right: 24px;
            z-index: 998;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 56px;
            height: 56px;
            background: #F58F7C;
            border-radius: 50%;
            color: #2C2B30 !important;
            cursor: pointer;
            transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
            box-shadow: 0 4px 12px rgba(245, 143, 124, 0.4);
        }

        .dialer-fab:hover {
            background: #F2C4CE;
            transform: scale(1.1);
            box-shadow: 0 6px 20px rgba(245, 143, 124, 0.5);
        }

        .dialer-fab i {
            font-size: 24px;
            line-height: 1;
        }

        /* nav ul styles */
        nav ul a {
            font-size: 14px;
            height: 64px !important;
            line-height: 64px !important;
            color: #D6D6D6 !important;
        }

        nav ul a:hover {
            background: rgba(245, 143, 124, 0.1) !important;
            color: #F58F7C !important;
        }

        nav ul a i {
            color: #D6D6D6 !important;
        }

        nav ul a:hover i {
            color: #F58F7C !important;
        }

        /* ALWAYS show sidenav trigger (hamburger menu) */
        nav .sidenav-trigger,
        nav .sidenav-trigger.show-on-large {
            display: block !important;
            margin: 0 !important;
            padding: 0 16px !important;
            height: 64px !important;
            line-height: 64px !important;
            cursor: pointer;
            float: left !important;
            color: #374151 !important;
        }

        nav .sidenav-trigger:hover {
            background: rgba(29, 78, 216, 0.08) !important;
            color: #1D4ED8 !important;
        }

        nav i, nav [class^="mdi-"], nav [class*=" mdi-"] {
            height: 64px !important;
            line-height: 64px !important;
            font-size: 26px !important;
            color: inherit !important;
        }

        nav ul.right {
            height: 64px !important;
            margin: 0 !important;
        }

        nav ul.right li {
            height: 64px !important;
        }

        nav ul.right li a {
            padding: 0 16px !important;
        }

        /* ============================================= */
        /* MINI SIDENAV - Collapsed with Hover Expand   */
        /* Sidenav hidden - single page dashboard */
        /* ============================================= */
        .sidenav, .sidenav-overlay, #viq-sidenav, .viq-logo-bar {
            display: none !important;
            width: 0 !important;
            visibility: hidden !important;
        }
        .sidenav {
            display: none !important;
            position: fixed !important;
            top: 64px !important;
            left: 0 !important;
            width: 64px !important;
            height: calc(100% - 64px) !important;
            max-height: calc(100% - 64px) !important;
            z-index: 999 !important;
            background-color: #2C2B30 !important;
            overflow-x: hidden !important;
            overflow-y: auto !important;
            transition: width 0.2s ease !important;
            transform: none !important;
            box-shadow: 2px 0 8px rgba(0, 0, 0, 0.2) !important;
        }

        .sidenav:hover,
        .sidenav.expanded {
            width: 240px !important;
        }

        /* Add top padding since user-view was removed */
        .sidenav > li:first-child {
            padding-top: 12px !important;
        }

        /* Hide user view in mini mode - show on hover (legacy) */
        .sidenav .user-view {
            padding: 12px !important;
            background: transparent !important;
            height: auto !important;
            margin-bottom: 0 !important;
            border-bottom: 1px solid #4F4F51 !important;
            display: flex !important;
            align-items: center !important;
            gap: 12px !important;
            white-space: nowrap !important;
            overflow: hidden !important;
        }

        .sidenav .user-view .background {
            display: none;
        }

        .sidenav .user-view .circle {
            width: 40px !important;
            min-width: 40px !important;
            height: 40px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            background: #F58F7C !important;
            font-size: 16px !important;
            font-weight: 600 !important;
            color: #2C2B30 !important;
            border: none !important;
            border-radius: 10px !important;
        }

        .sidenav .user-view .user-info {
            display: flex;
            flex-direction: column;
            opacity: 0;
            transition: opacity 0.2s ease;
            overflow: hidden;
        }

        .sidenav:hover .user-view .user-info,
        .sidenav.expanded .user-view .user-info {
            opacity: 1;
        }

        .sidenav .user-view .name,
        .sidenav .user-view .email {
            display: block !important;
        }

        .sidenav .user-view .name {
            margin-top: 0 !important;
            font-size: 14px !important;
            font-weight: 600 !important;
            color: white !important;
            line-height: 1.3 !important;
        }

        .sidenav .user-view .email {
            font-size: 12px !important;
            color: #D6D6D6 !important;
            padding-bottom: 0 !important;
            line-height: 1.3 !important;
        }

        .sidenav li > a {
            padding: 0 20px !important;
            height: 48px !important;
            line-height: 48px !important;
            font-weight: 500 !important;
            color: #D6D6D6 !important;
            font-size: 14px !important;
            white-space: nowrap !important;
            overflow: hidden !important;
            display: flex !important;
            align-items: center !important;
        }

        .sidenav li > a > i,
        .sidenav li > a > i.material-icons {
            height: 48px !important;
            line-height: 48px !important;
            color: #D6D6D6 !important;
            margin-right: 16px !important;
            width: 24px !important;
            min-width: 24px !important;
            font-size: 22px !important;
        }

        /* Hide link text, show on hover */
        .sidenav li > a > span.nav-text {
            opacity: 0;
            transition: opacity 0.2s ease;
        }

        .sidenav:hover li > a > span.nav-text,
        .sidenav.expanded li > a > span.nav-text {
            opacity: 1;
        }

        .sidenav li > a:hover {
            background-color: #4F4F51 !important;
        }

        .sidenav li > a:hover,
        .sidenav li > a:hover > i {
            color: #F2C4CE !important;
        }

        .sidenav li > a.active {
            background: rgba(245, 143, 124, 0.2) !important;
            font-weight: 600 !important;
            border-left: 3px solid #F58F7C !important;
            padding-left: 17px !important;
        }

        .sidenav li > a.active,
        .sidenav li > a.active > i {
            color: #F58F7C !important;
        }

        /* Hide sidenav overlay - not needed for mini sidebar */
        .sidenav-overlay {
            display: none !important;
        }

        .sidenav .divider {
            margin: 8px 12px !important;
            background-color: #4F4F51 !important;
        }

        .sidenav .subheader {
            padding-left: 20px !important;
            font-size: 11px !important;
            font-weight: 600 !important;
            color: #888 !important;
            text-transform: uppercase !important;
            letter-spacing: 0.5px !important;
            line-height: 32px !important;
            height: 32px !important;
            white-space: nowrap !important;
            overflow: hidden !important;
            opacity: 0;
            transition: opacity 0.2s ease;
        }

        .sidenav:hover .subheader,
        .sidenav.expanded .subheader {
            opacity: 1;
        }

        .sidenav li.logout-item {
            margin-top: auto !important;
            border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
        }

        .sidenav li.logout-item > a {
            color: rgba(239, 68, 68, 0.8) !important;
        }

        .sidenav li.logout-item > a > i {
            color: rgba(239, 68, 68, 0.8) !important;
        }

        .sidenav li.logout-item > a:hover {
            background-color: rgba(239, 68, 68, 0.15) !important;
            color: #ef4444 !important;
        }

        .sidenav li.logout-item > a:hover > i {
            color: #ef4444 !important;
        }

        /* Hide hamburger menu - sidebar always visible */
        nav .sidenav-trigger,
        nav .sidenav-trigger.show-on-large {
            display: none !important;
        }

        /* Main content - no sidebar offset */
        .viq-dashboard {
            margin-left: 0 !important;
            padding-top: 0 !important;
            width: 100% !important;
            max-width: 100% !important;
            overflow-x: hidden !important;
        }

        /* Tab container needs no extra margin - dashboard handles it */
        .viq-tab-container {
            padding-top: 0 !important;
            width: 100% !important;
            max-width: 100% !important;
            overflow-x: hidden !important;
        }

        /* === RESPONSIVE CONTENT PADDING === */
        .viq-content-padding {
            padding: 16px;
            width: 100%;
            box-sizing: border-box;
            word-wrap: break-word;
            overflow-wrap: break-word;
        }

        @media (min-width: 480px) {
            .viq-content-padding {
                padding: 20px;
            }
        }

        @media (min-width: 768px) {
            .viq-content-padding {
                padding: 24px;
            }
        }

        @media (min-width: 1024px) {
            .viq-content-padding {
                padding: 32px;
            }
        }

        /* === SIDEBAR (REMOVED - Dashboard Only) === */
        .viq-sidebar {
            width: 280px;
            flex-shrink: 0;
            background: var(--gray-50);
            border-right: 1px solid var(--gray-200);
            padding: 24px 0;
            overflow: visible;
            height: auto;
        }

        .viq-sidebar-section {
            padding: 0 20px;
            margin-bottom: 32px;
        }

        .viq-sidebar-label {
            font-size: 11px;
            font-weight: 700;
            color: var(--gray-400);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 12px;
        }

        .viq-nav-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 20px;
            margin: 2px 0;
            border-radius: 8px;
            color: var(--gray-600);
            font-size: 15px;
            font-weight: 500;
            text-decoration: none;
            cursor: pointer;
            border: none;
            background: none;
            width: 100%;
            text-align: left;
            transition: all 0.15s;
        }
        .viq-nav-item:hover {
            color: var(--primary-600);
            background: var(--primary-50);
        }
        .viq-nav-item.active {
            color: var(--primary-600);
            background: var(--primary-50);
            font-weight: 600;
        }
        .viq-nav-item svg {
            width: 20px;
            height: 20px;
            flex-shrink: 0;
        }

        /* === NAVIGATION TABS === */
        .viq-nav-tab:hover {
            background: #e5e7eb !important;
            color: #111827 !important;
        }
        .viq-nav-tab.active:hover {
            background: #059669 !important;
            color: #fff !important;
        }

        /* === MAIN CONTENT === */
        .viq-main {
            flex: 1;
            min-width: 0;
            max-width: 100%;
            background: var(--gray-50);
            overflow: visible !important;
            height: auto !important;
        }

        .viq-main-body {
            padding: 0;
            max-width: 100%;
            overflow: visible !important;
            box-sizing: border-box;
        }

        /* Force leads table to fill entire available space - Light theme */
        #leads-tab {
            width: 100%;
            background: #F8FAFC;
            padding: 20px 32px 20px 20px;
            box-sizing: border-box;
        }
        #leads-tab .lead-card,
        #leads-tab .ringy-card {
            background: #FFFFFF !important;
            border-color: #E2E8F0 !important;
            color: #1E293B !important;
        }
        #leads-tab .ringy-card * {
            border-color: #E2E8F0 !important;
        }
        #leads-tab .lead-card a,
        #leads-tab .ringy-card a {
            color: #1D4ED8 !important;
        }
        #leads-tab .lead-card a:hover,
        #leads-tab .ringy-card a:hover {
            color: #1E40AF !important;
        }
        #leads-tab .lead-card .btn-flat,
        #leads-tab .ringy-card .btn-flat {
            color: #1D4ED8 !important;
        }
        #leads-tab .lead-card .btn-flat:hover,
        #leads-tab .ringy-card .btn-flat:hover {
            background: rgba(29, 78, 216, 0.08) !important;
        }
        #leads-tab .lead-card .btn-floating,
        #leads-tab .ringy-card .btn-floating {
            background: #1D4ED8 !important;
            color: #fff !important;
        }
        #leads-tab select,
        #leads-tab input[type="text"] {
            background: #FFFFFF !important;
            border-color: #E2E8F0 !important;
            color: #1E293B !important;
        }
        #leads-tab select option {
            background: #FFFFFF;
            color: #1E293B;
        }
        #leads-tab input::placeholder {
            color: #94A3B8 !important;
        }
        #leads-tab .lead-card textarea,
        #leads-tab .ringy-card textarea {
            background: #F8FAFC !important;
            border-color: #E2E8F0 !important;
            color: #1E293B !important;
        }
        #leads-tab label,
        #leads-tab span {
            color: #1E293B;
        }
        /* Checkbox accent */
        #leads-tab input[type="checkbox"] {
            accent-color: #1D4ED8 !important;
        }
        /* Call & Disposition button colors */
        #leads-tab .viq-btn-primary {
            background: linear-gradient(135deg, #3B82F6, #1D4ED8) !important;
            color: #fff !important;
            box-shadow: 0 2px 8px rgba(29, 78, 216, 0.25) !important;
        }
        #leads-tab .viq-btn-primary:hover {
            background: linear-gradient(135deg, #1D4ED8, #1E40AF) !important;
            box-shadow: 0 4px 12px rgba(29, 78, 216, 0.35) !important;
        }
        #leads-tab .viq-btn-secondary {
            background: #F8FAFC !important;
            color: #1E293B !important;
            border-color: #E2E8F0 !important;
        }
        #leads-tab .viq-btn-secondary:hover {
            background: #E2E8F0 !important;
            color: #1D4ED8 !important;
        }
        #leads-tab .btn-flat {
            color: #1D4ED8 !important;
        }
        #leads-tab .btn-flat:hover {
            background: rgba(29, 78, 216, 0.08) !important;
        }
        /* Badge on call button */
        #leads-tab .badge {
            background-color: #1D4ED8 !important;
            color: #fff !important;
            border-color: #FFFFFF !important;
            min-width: 20px !important;
            height: 20px !important;
            line-height: 20px !important;
            padding: 0 6px !important;
            font-size: 11px !important;
            font-weight: 700 !important;
            text-align: center !important;
            border-radius: 10px !important;
        }
        /* Cards container - align with filter bar */
        #leads-tab #leads-container {
            width: 100%;
        }
        #leads-tab .lead-card .ringy-grid {
            align-items: stretch;
        }
        #leads-tab > div {
            width: 100%;
        }
        /* When dialer is open */
        body.dialer-open #leads-tab #leads-container {
            width: 100%;
        }
        #leads-tab .viq-table {
            width: 100% !important;
            table-layout: fixed !important;
        }
        #leads-tab .viq-table tr {
            width: 100%;
        }
        #leads-tab .viq-table th,
        #leads-tab .viq-table td {
            box-sizing: border-box;
        }

        .viq-page-header {
            margin-bottom: 32px;
        }
        .viq-page-title {
            font-size: 28px;
            font-weight: 800;
            color: var(--gray-900);
            letter-spacing: -0.5px;
            margin-bottom: 4px;
        }
        .viq-page-subtitle {
            font-size: 15px;
            color: var(--gray-500);
        }

        /* Tab content areas */
        .viq-tab-content { display: none; width: 100%; }
        .viq-tab-content.active { display: block; width: 100%; }

        .viq-stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
            gap: 12px;
            margin-bottom: 20px;
        }

        .viq-stat-card {
            background: white;
            border: 1px solid #f3f4f6;
            border-radius: 12px;
            padding: 20px;
            position: relative;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0,0,0,0.06);
            transition: all 0.25s ease;
        }

        .viq-stat-card:hover {
            box-shadow: 0 4px 16px rgba(0,0,0,0.1);
            transform: translateY(-2px);
        }

        .viq-stat-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 4px;
            height: 100%;
            background: #3B82F6;
            border-radius: 0 2px 2px 0;
        }

        .viq-stat-card.green::before { background: #10b981; }
        .viq-stat-card.blue::before { background: #3b82f6; }
        .viq-stat-card.orange::before { background: #f59e0b; }
        .viq-stat-card.primary-blue::before { background: #3B82F6; }

        .viq-stat-label {
            font-size: 12px;
            color: #6b7280;
            text-transform: uppercase;
            font-weight: 600;
            letter-spacing: 0.5px;
            margin-bottom: 8px;
        }

        .viq-stat-value {
            font-size: 28px;
            font-weight: 700;
            color: #1e293b;
            line-height: 1.2;
        }

        .viq-stat-desc {
            font-size: 12px;
            color: #9ca3af;
            margin-top: 4px;
        }

        .viq-hamburger {
            background: white;
            border: 1px solid var(--gray-300);
            border-radius: var(--radius);
            padding: 10px;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            gap: 4px;
            width: 40px;
            height: 40px;
            justify-content: center;
            align-items: center;
        }

        .viq-hamburger:hover { background: var(--gray-50); }

        .viq-hamburger-line {
            width: 18px;
            height: 2px;
            background: var(--gray-700);
            transition: all 0.2s;
        }

        .viq-tab-menu {
            position: absolute;
            top: 100%;
            left: 24px;
            background: white;
            border: 1px solid var(--gray-200);
            border-radius: var(--radius-md);
            box-shadow: 0 10px 40px rgba(0,0,0,0.1);
            z-index: 1000;
            min-width: 220px;
            display: none;
        }

        .viq-tab-menu.active { display: block; }

        .viq-tab-btn {
            width: 100%;
            padding: 14px 20px;
            background: none;
            border: none;
            color: var(--gray-600);
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 12px;
            text-align: left;
            border-bottom: 1px solid var(--gray-100);
        }

        .viq-tab-btn:last-child { border-bottom: none; }
        .viq-tab-btn:hover { background: var(--gray-50); color: var(--gray-900); }
        .viq-tab-btn.active { background: var(--primary-500); color: white; }

        .viq-tab-content { display: none; width: 100%; }
        .viq-tab-content.active { display: block; width: 100%; }

        .viq-controls {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 16px;
            padding: 16px 20px;
            background: white;
            border: 1px solid var(--gray-200);
            border-radius: var(--radius-lg);
            margin-bottom: 24px;
        }

        .viq-filters {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }

        .viq-filter-btn {
            padding: 8px 16px;
            background: white;
            border: 1px solid var(--gray-300);
            border-radius: var(--radius);
            color: var(--gray-600);
            text-decoration: none;
            font-size: 13px;
            font-weight: 500;
            transition: all 0.2s;
        }

        .viq-filter-btn:hover { background: var(--gray-50); color: var(--gray-900); }
        .viq-filter-btn.active { background: var(--primary-500); color: white; border-color: var(--primary-500); }

        .viq-search-box { display: flex; gap: 8px; }

        .viq-search-input {
            padding: 8px 14px;
            background: white;
            border: 1px solid var(--gray-300);
            border-radius: var(--radius);
            color: var(--gray-900);
            font-size: 14px;
            width: 220px;
        }

        .viq-search-input:focus {
            outline: none;
            border-color: var(--primary-500);
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
        }

        .viq-search-btn {
            padding: 8px 16px;
            background: var(--primary-500);
            border: none;
            border-radius: var(--radius);
            color: white;
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
        }

        .viq-search-btn:hover { background: var(--primary-600); }

        .viq-agent-select {
            padding: 8px 14px;
            background: white;
            border: 1px solid var(--gray-300);
            border-radius: var(--radius);
            color: var(--gray-900);
            font-size: 14px;
        }

        .viq-leads-container {
            width: 100%;
            max-width: 100%;
            overflow: visible;
        }

        .viq-leads-table {
            background: white;
            border: 1px solid var(--gray-200);
            border-radius: var(--radius-lg);
            overflow: hidden;
            width: 100%;
            max-width: 100%;
            table-layout: fixed;
        }

        .viq-leads-table .viq-table {
            width: 100%;
            max-width: 100%;
            border-collapse: collapse;
            table-layout: fixed;
        }

        .viq-leads-table .viq-table th:nth-child(1) { width: 18%; } /* Lead Details */
        .viq-leads-table .viq-table th:nth-child(2) { width: 12%; } /* Coverage */
        .viq-leads-table .viq-table th:nth-child(3) { width: 10%; } /* Location */
        .viq-leads-table .viq-table th:nth-child(4) { width: 12%; } /* Status */
        .viq-leads-table .viq-table th:nth-child(5) { width: 12%; } /* Date */
        .viq-leads-table .viq-table th:nth-child(6) { width: 36%; } /* Action */

        .viq-leads-table .viq-table th,
        .viq-leads-table .viq-table td {
            overflow: hidden;
            text-overflow: ellipsis;
            word-wrap: break-word;
        }

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

        .viq-table th {
            background: var(--gray-50);
            padding: 12px 16px;
            text-align: left;
            font-size: 12px;
            font-weight: 600;
            color: var(--gray-500);
            text-transform: uppercase;
            border-bottom: 1px solid var(--gray-200);
            white-space: nowrap;
        }

        .viq-table td {
            padding: 12px 16px;
            border-bottom: 1px solid var(--gray-100);
            font-size: 14px;
            color: var(--gray-900);
            vertical-align: top;
        }

        .viq-table tbody tr:hover { background: var(--gray-50); }
        .viq-table tbody tr:last-child td { border-bottom: none; }

        /* Lead action buttons */
        .viq-lead-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
        }

        .viq-lead-actions .viq-btn-action {
            padding: 4px 8px !important;
            font-size: 10px !important;
        }

        .viq-lead-name { font-weight: 600; color: var(--gray-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .viq-lead-contact { font-size: 12px; color: var(--gray-500); margin-top: 2px; word-break: break-all; }

        .viq-badge {
            display: inline-block;
            padding: 4px 10px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 500;
        }

        .viq-badge.active { background: #dcfce7; color: #166534; }
        .viq-badge.sold { background: #dbeafe; color: #1D4ED8; }
        .viq-badge.scheduled { background: #dbeafe; color: #1d4ed8; }

        .viq-btn-mark-sold {
            padding: 8px 16px;
            background: var(--success);
            border: none;
            border-radius: var(--radius);
            color: white;
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
        }

        .viq-btn-mark-sold:hover { background: #059669; }

        .viq-empty {
            text-align: center;
            padding: 60px 20px;
            color: var(--gray-500);
        }

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

        .viq-calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); }

        .viq-calendar-header {
            background: var(--gray-50);
            border-bottom: 1px solid var(--gray-200);
            padding: 12px;
            text-align: center;
            font-weight: 600;
            font-size: 12px;
            color: var(--gray-500);
            text-transform: uppercase;
        }

        .viq-calendar-day {
            min-height: 100px;
            border-right: 1px solid var(--gray-200);
            border-bottom: 1px solid var(--gray-200);
            padding: 8px;
            background: white;
        }

        .viq-calendar-day:nth-child(7n) { border-right: none; }
        .viq-calendar-day.other-month { background: var(--gray-50); opacity: 0.5; }
        .viq-calendar-day.today { background: #eff6ff; }

        .viq-calendar-day-number { font-weight: 600; color: var(--gray-900); margin-bottom: 4px; }

        .viq-calendar-appointment {
            background: var(--primary-500);
            color: white;
            padding: 2px 6px;
            border-radius: 4px;
            font-size: 11px;
            margin-bottom: 2px;
            cursor: pointer;
        }

        .viq-calendar-appointment.sold { background: var(--success); }

        .team-badge {
            background: var(--warning);
            color: white;
            padding: 3px 8px;
            border-radius: 4px;
            font-size: 11px;
            font-weight: 600;
            margin-left: 8px;
        }

        .agent-indicator {
            display: inline-block;
            padding: 2px 6px;
            border-radius: 4px;
            font-size: 11px;
            font-weight: 500;
            margin-left: 6px;
        }

        .agent-indicator.me { background: var(--primary-500); color: white; }
        .agent-indicator.team { background: var(--warning); color: white; }

        .viq-modal {
            display: none !important;
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            width: 100% !important;
            height: 100% !important;
            background: rgba(0, 0, 0, 0.6) !important;
            z-index: 999999 !important;
            align-items: unset !important;
            justify-content: unset !important;
            backdrop-filter: blur(4px);
        }

        .viq-modal.active {
            display: block !important;
        }

        .viq-modal > .viq-modal-content,
        .viq-modal .viq-modal-content {
            position: absolute !important;
            top: 50% !important;
            left: 50% !important;
            transform: translate(-50%, -50%) !important;
            background: white !important;
            border-radius: 12px;
            padding: 0;
            width: 90% !important;
            max-width: 440px;
            box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.3), 0 8px 16px rgba(0, 0, 0, 0.1);
            max-height: 85vh;
            overflow: hidden;
            margin: 0 !important;
            animation: modalFadeIn 0.25s ease-out;
        }

        @keyframes modalFadeIn {
            from {
                opacity: 0;
                transform: translate(-50%, -48%);
            }
            to {
                opacity: 1;
                transform: translate(-50%, -50%);
            }
        }

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

        .viq-modal-header {
            text-align: left;
            padding: 24px 24px 20px;
            background: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%);
            color: white;
            margin: 0;
            border-bottom: none;
        }

        .viq-modal-title {
            font-size: 20px;
            font-weight: 600;
            color: white;
            margin-bottom: 4px;
        }
        .viq-modal-subtitle {
            font-size: 14px;
            color: rgba(255, 255, 255, 0.85);
        }
        .viq-modal-body {
            padding: 24px;
            margin: 0;
            max-height: 50vh;
            overflow-y: auto;
        }

        .viq-lead-info {
            background: #f9fafb;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            padding: 16px;
            margin-bottom: 20px;
        }

        .viq-lead-info-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 0;
            font-size: 14px;
        }

        .viq-lead-info-row:not(:last-child) {
            border-bottom: 1px solid #e5e7eb;
        }

        .viq-lead-info-label { color: #6b7280; font-weight: 500; }
        .viq-lead-info-value { color: #1e293b; font-weight: 600; }

        .viq-modal-actions {
            display: flex;
            gap: 12px;
            padding: 16px 24px;
            background: #f9fafb;
            border-top: 1px solid #e5e7eb;
        }

        .viq-modal-btn {
            flex: 1;
            padding: 12px 24px;
            border-radius: 6px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            border: none;
            transition: all 0.2s ease;
            position: relative;
            overflow: hidden;
        }

        .viq-modal-btn.primary {
            background: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%);
            color: white;
            box-shadow: 0 2px 8px rgba(168, 85, 247, 0.35);
        }
        .viq-modal-btn.primary:hover {
            box-shadow: 0 4px 12px rgba(168, 85, 247, 0.45);
            transform: translateY(-1px);
        }
        .viq-modal-btn.secondary {
            background: white;
            color: #374151;
            border: 1px solid #e5e7eb;
        }
        .viq-modal-btn.secondary:hover {
            background: #f9fafb;
            border-color: #d1d5db;
        }
        .viq-modal-btn.success {
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
            color: white;
            box-shadow: 0 2px 8px rgba(16, 185, 129, 0.35);
        }
        .viq-modal-btn.success:hover {
            box-shadow: 0 4px 12px rgba(16, 185, 129, 0.45);
            transform: translateY(-1px);
        }
        .viq-modal-btn.danger {
            background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
            color: white;
            box-shadow: 0 2px 8px rgba(239, 68, 68, 0.35);
        }

        .viq-premium-input {
            width: 100%;
            padding: 12px 16px;
            background: white;
            border: 1px solid #e5e7eb;
            border-radius: 6px;
            color: #1e293b;
            font-size: 15px;
            margin-bottom: 12px;
            transition: all 0.2s ease;
            box-sizing: border-box;
        }

        .viq-premium-input:focus {
            outline: none;
            background: white;
            border-color: #3B82F6;
            box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.15);
        }

        .viq-premium-input::placeholder {
            color: #9ca3af;
        }

        .viq-annual-preview {
            background: linear-gradient(135deg, rgba(168, 85, 247, 0.08) 0%, rgba(147, 51, 234, 0.12) 100%);
            border: 1px solid rgba(168, 85, 247, 0.25);
            border-radius: 8px;
            padding: 16px 20px;
            margin-bottom: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .viq-annual-label {
            color: #1D4ED8;
            font-size: 14px;
            font-weight: 500;
        }
        .viq-annual-value {
            color: #3B82F6;
            font-size: 24px;
            font-weight: 700;
        }

        .viq-dashboard-stats {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 20px;
            margin-bottom: 24px;
        }

        @media (max-width: 1400px) {
            .viq-dashboard-stats {
                grid-template-columns: repeat(3, 1fr);
            }
        }

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

        .viq-dashboard-stat-card {
            background: white;
            border: 1px solid var(--gray-200);
            border-radius: var(--radius-lg);
            padding: 24px;
            text-align: center;
        }

        .viq-dashboard-stat-label { color: var(--gray-500); font-size: 13px; font-weight: 600; text-transform: uppercase; margin-bottom: 8px; }
        .viq-dashboard-stat-value { color: var(--gray-900); font-size: 32px; font-weight: 700; }
        .viq-dashboard-stat-subtitle { color: var(--gray-400); font-size: 12px; margin-top: 4px; }

        .viq-dashboard-leads-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
            gap: 16px;
        }

        .viq-dashboard-lead-card {
            background: white;
            border: 1px solid var(--gray-200);
            border-radius: var(--radius-md);
            padding: 20px;
        }

        .viq-dashboard-lead-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
            padding-bottom: 12px;
            border-bottom: 1px solid var(--gray-100);
        }

        .viq-dashboard-lead-header h4 { color: var(--gray-900); font-size: 16px; font-weight: 600; }

        .viq-dashboard-lead-time {
            background: var(--primary-500);
            color: white;
            padding: 4px 10px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 500;
        }

        .viq-dashboard-lead-details > div { margin-bottom: 6px; font-size: 14px; color: var(--gray-600); }
        .viq-dashboard-lead-details strong { color: var(--gray-900); }

        .viq-lead-status {
            padding: 3px 8px;
            border-radius: 4px;
            font-size: 11px;
            font-weight: 500;
        }

        .viq-lead-status.active { background: #dbeafe; color: #1d4ed8; }
        .viq-lead-status.sold { background: #dcfce7; color: #166534; }

        .viq-dashboard-mark-sold-btn {
            background: var(--success);
            color: white;
            border: none;
            border-radius: var(--radius);
            padding: 10px 20px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            width: 100%;
            margin-top: 12px;
        }

        .viq-dashboard-mark-sold-btn:hover { background: #059669; }

        /* === RESPONSIVE === */

        /* Large screens */
        @media (min-width: 1280px) {
            .viq-dashboard-leads-grid {
                grid-template-columns: repeat(3, 1fr);
            }
            .viq-stats {
                grid-template-columns: repeat(4, 1fr);
            }
        }

        /* Medium-large screens */
        @media (max-width: 1279px) and (min-width: 1024px) {
            .viq-dashboard-leads-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            .viq-stats {
                grid-template-columns: repeat(4, 1fr);
            }
        }

        /* Tablets */
        @media (max-width: 1023px) and (min-width: 768px) {
            .viq-sidebar {
                display: none;
            }
            .viq-main {
                max-width: 100vw;
            }
            .viq-stats {
                grid-template-columns: repeat(2, 1fr);
            }
            .viq-dashboard-leads-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            .viq-dashboard-stats {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        /* Small tablets and large phones */
        @media (max-width: 767px) and (min-width: 480px) {
            .viq-stats { grid-template-columns: repeat(2, 1fr); }
            .viq-controls { flex-direction: column; gap: 12px; }
            .viq-search-input { width: 100%; }
            .viq-dashboard-leads-grid { grid-template-columns: 1fr; }
            .viq-dashboard-stats { grid-template-columns: 1fr; }
            .viq-hide-mobile { display: none; }
            .viq-header-title { font-size: 16px; }
        }

        /* Phones */
        @media (max-width: 479px) {
            .viq-stats { grid-template-columns: 1fr; }
            .viq-controls { flex-direction: column; gap: 10px; }
            .viq-search-input { width: 100%; }
            .viq-dashboard-leads-grid { grid-template-columns: 1fr; }
            .viq-dashboard-stats { grid-template-columns: 1fr; }
            .viq-hide-mobile { display: none; }
            .viq-header-title { font-size: 15px; }
            .viq-header-btn { width: 36px; height: 36px; }
            .viq-hamburger { width: 40px; height: 40px; }
            .viq-stat-card { padding: 16px; }
            .viq-stat-value { font-size: 24px; }
            .viq-dashboard-stat-value { font-size: 24px; }

            /* Mobile filter bars */
            #leads-filter-form > div {
                flex-direction: column;
                gap: 10px;
            }
            #leads-filter-form select {
                width: 100%;
                min-width: 100%;
                box-sizing: border-box;
            }
            #leads-filter-form input[type="text"] {
                width: 100%;
                min-width: 100%;
                box-sizing: border-box;
            }
            #leads-filter-form > div > div {
                width: 100%;
                flex-direction: row;
                flex-wrap: wrap;
            }
            #leads-filter-form button[type="submit"] {
                flex: 1;
                min-width: 80px;
            }
            #leads-filter-form a {
                flex: 0;
            }

            /* Lead cards mobile */
            .lead-card > div:first-child {
                flex-direction: column;
                align-items: flex-start !important;
            }

            /* Action bar mobile */
            div[style*="padding: 12px 16px; background: #f8fafc"] {
                flex-direction: column;
                align-items: stretch !important;
            }
            div[style*="padding: 12px 16px; background: #f8fafc"] > div {
                justify-content: space-between;
            }
        }

        /* Very small phones */
        @media (max-width: 360px) {
            .viq-header-title { font-size: 14px; }
            .viq-header-actions { gap: 4px; }
            .viq-header-btn { width: 32px; height: 32px; }
            .viq-header-btn svg { width: 18px; height: 18px; }
            .viq-content-padding { padding: 12px; }
        }

        /* Landscape orientation optimizations */
        @media (max-height: 500px) and (orientation: landscape) {
            .viq-header { height: 52px; }
            .viq-nav-header { padding: 12px 16px; }
            .viq-nav-link { padding: 10px 14px; }
        }

        /* Ensure true edge-to-edge display and scrolling */
        html {
            margin: 0 !important;
            padding: 0 !important;
            overflow-x: hidden !important;
            overflow-y: auto !important;
            height: auto !important;
            min-height: 100% !important;
            max-height: none !important;
            position: static !important;
        }

        body {
            margin: 0 !important;
            padding: 0 !important;
            overflow: visible !important;
            overflow-x: hidden !important;
            height: auto !important;
            min-height: auto !important;
            max-height: none !important;
            position: static !important;
        }

        .viq-dashboard, .viq-tab-container, .viq-tab-content, #leads-tab, .viq-main, .viq-main-body, .viq-leads-container {
            overflow: visible !important;
            height: auto !important;
            max-height: none !important;
            position: static !important;
        }

        #wpadminbar, .site-header, .site-footer, .wp-admin-bar { display: none !important; }

/* ============================================= */
/* LOGO BAR STYLES                               */
/* ============================================= */
            .viq-logo-bar {
                display: none !important;
                position: fixed;
                top: 0;
                left: 0;
                z-index: 1000;
                width: 64px;
                height: 64px;
                background: #2C2B30;
                display: flex;
                align-items: center;
                padding-left: 8px;
                overflow: hidden;
                transition: width 0.2s ease;
                border-bottom: 1px solid #4F4F51;
            }
            .viq-logo-bar.expanded {
                width: 240px;
            }
            .viq-logo-img {
                height: 48px;
                width: 48px;
                min-width: 48px;
                object-fit: contain;
                display: block;
            }
            .viq-logo-text {
                color: #D6D6D6;
                font-size: 14px;
                font-weight: 400;
                margin-left: 12px;
                line-height: 1.3;
                opacity: 0;
                visibility: hidden;
                transition: opacity 0.1s ease, visibility 0.1s ease;
                white-space: nowrap;
            }
            .viq-logo-text strong {
                font-weight: 600;
                font-size: 15px;
                color: #F2C4CE;
            }
            .viq-logo-bar.expanded .viq-logo-text {
                opacity: 1;
                visibility: visible;
                transition: opacity 0.3s ease 0.15s, visibility 0.3s ease 0.15s;
            }
            /* Sync sidenav expansion with logo bar */
            .sidenav.expanded {
                width: 240px !important;
            }

/* ============================================= */
/* DISPOSITION & DIALER PANEL STYLES             */
/* ============================================= */
            /* Disposition tag hover delete button */
            .disposition-tag-wrapper:hover .disposition-delete {
                display: block !important;
            }
            .disposition-delete:hover {
                background: #dc2626 !important;
                transform: scale(1.1);
            }

            /* Dialer Side Panel - Clean Fintech Design */
            .dialer-panel {
                position: fixed;
                top: 0;
                right: 0;
                width: 340px;
                height: 100vh;
                background: linear-gradient(180deg, #2C2B30 0%, #232228 100%);
                z-index: 1001;
                transform: translateX(100%);
                transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                box-shadow: -8px 0 32px rgba(0, 0, 0, 0.4);
                display: flex;
                flex-direction: column;
                overflow: hidden;
            }
            .dialer-panel.open {
                transform: translateX(0);
            }

            /* Panel Header */
            .dialer-panel-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 20px 24px;
                border-bottom: 1px solid #4F4F51;
                background: rgba(79, 79, 81, 0.2);
            }
            .dialer-title {
                display: flex;
                align-items: center;
                gap: 10px;
                color: #D6D6D6;
                font-size: 16px;
                font-weight: 600;
            }
            .dialer-title i {
                color: #F58F7C;
                font-size: 22px;
            }
            .dialer-close {
                color: #6b7280 !important;
                padding: 8px !important;
                border-radius: 8px !important;
                min-width: 0 !important;
                width: 36px !important;
                height: 36px !important;
            }
            .dialer-close:hover {
                background: rgba(255,255,255,0.08) !important;
                color: #ffffff !important;
            }
            .dialer-close i {
                font-size: 20px;
            }

            /* Active Call View */
            .dialer-active-call {
                padding: 32px 24px;
                text-align: center;
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 12px;
                flex: 1;
            }
            .active-call-avatar {
                width: 80px;
                height: 80px;
                border-radius: 50%;
                background: linear-gradient(135deg, #F58F7C 0%, #F2C4CE 100%);
                display: flex;
                align-items: center;
                justify-content: center;
                margin-bottom: 8px;
            }
            .active-call-avatar i {
                font-size: 40px;
                color: #2C2B30;
            }
            .active-call-name {
                font-size: 22px;
                font-weight: 600;
                color: #D6D6D6;
            }
            .active-call-number {
                font-size: 14px;
                color: #a0a0a0;
                font-family: 'SF Mono', 'Monaco', monospace;
            }
            .active-call-status {
                display: flex;
                align-items: center;
                gap: 8px;
                font-size: 14px;
                color: #F2C4CE;
                margin-top: 4px;
            }
            .active-call-status .status-dot {
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background: currentColor;
            }
            .active-call-status .status-dot.ringing {
                animation: pulse 1s infinite;
            }
            .active-call-status .status-dot.connected {
                background: #10b981;
                animation: none;
            }
            .active-call-timer {
                font-size: 36px;
                font-weight: 300;
                font-family: 'SF Mono', 'Monaco', monospace;
                color: #D6D6D6;
                margin: 16px 0;
            }
            .active-call-actions {
                display: flex;
                gap: 24px;
                margin: 16px 0;
            }
            .call-action-btn {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 6px;
                background: #4F4F51;
                border: none;
                border-radius: 16px;
                padding: 16px 20px;
                cursor: pointer;
                transition: all 0.2s;
                min-width: 72px;
            }
            .call-action-btn i {
                font-size: 24px;
                color: #D6D6D6;
            }
            .call-action-btn span {
                font-size: 11px;
                color: #a0a0a0;
            }
            .call-action-btn:hover {
                background: #5a5a5c;
            }
            .call-action-btn.active {
                background: #F58F7C;
            }
            .call-action-btn.active i,
            .call-action-btn.active span {
                color: #2C2B30;
            }
            .dialer-end-call-btn {
                width: 100%;
                max-width: 200px;
                background: #ef4444 !important;
                border-radius: 30px !important;
                margin-top: 20px;
                padding: 0 32px;
                height: 52px;
                font-size: 16px;
            }
            .dialer-end-call-btn i {
                margin-right: 8px;
            }

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

            /* Main Card */
            .dialer-card {
                padding: 24px;
                flex-shrink: 0;
            }

            /* Status Bar */
            .dialer-status-bar {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 20px;
            }
            .status-indicator {
                display: flex;
                align-items: center;
                gap: 8px;
                font-size: 13px;
            }
            .status-indicator.online {
                color: #F2C4CE;
            }
            .status-indicator .status-dot {
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background: currentColor;
                animation: pulse 2s infinite;
            }
            .call-timer {
                font-family: 'SF Mono', 'Monaco', monospace;
                font-size: 14px;
                color: #F58F7C;
                background: rgba(245, 143, 124, 0.15);
                padding: 4px 12px;
                border-radius: 12px;
            }

            /* Number Display */
            .dialer-number-display {
                position: relative;
                margin-bottom: 24px;
            }
            .dialer-number-display input {
                width: 100%;
                background: #4F4F51 !important;
                border: 1px solid #5a5a5c !important;
                border-radius: 12px !important;
                padding: 18px 50px 18px 20px !important;
                font-size: 26px !important;
                font-weight: 500 !important;
                color: #D6D6D6 !important;
                text-align: center;
                letter-spacing: 1px;
                box-sizing: border-box !important;
                height: auto !important;
                margin: 0 !important;
                transition: border-color 0.2s ease, box-shadow 0.2s ease;
            }
            .dialer-number-display input:focus {
                border-color: #F58F7C !important;
                box-shadow: 0 0 0 3px rgba(245, 143, 124, 0.15) !important;
                outline: none !important;
            }
            .dialer-number-display input::placeholder {
                color: #888;
                font-size: 20px;
                font-weight: 400;
            }
            .dialer-backspace {
                position: absolute;
                right: 8px;
                top: 50%;
                transform: translateY(-50%);
                color: #D6D6D6 !important;
                padding: 8px !important;
                min-width: 0 !important;
                border-radius: 8px !important;
            }
            .dialer-backspace:hover {
                color: #F2C4CE !important;
                background: rgba(242, 196, 206, 0.1) !important;
            }
            .dialer-backspace i {
                font-size: 20px;
            }

            /* Keypad Grid */
            .dialer-keypad {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 12px;
                margin-bottom: 24px;
            }
            .dialer-key {
                background: #4F4F51;
                border: 1px solid #5a5a5c;
                border-radius: 16px;
                padding: 16px 0;
                cursor: pointer;
                transition: all 0.15s ease;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 2px;
            }
            .dialer-key:hover {
                background: rgba(245, 143, 124, 0.15);
                border-color: rgba(245, 143, 124, 0.3);
            }
            .dialer-key:active {
                transform: scale(0.96);
                background: rgba(245, 143, 124, 0.25);
            }
            .dialer-key .key-number {
                font-size: 24px;
                font-weight: 500;
                color: #D6D6D6;
                line-height: 1;
            }
            .dialer-key .key-letters {
                font-size: 9px;
                color: #888;
                letter-spacing: 2px;
                text-transform: uppercase;
                min-height: 12px;
            }

            /* Call Button */
            .dialer-call-btn {
                width: 100%;
                background: linear-gradient(135deg, #F58F7C 0%, #e07a68 100%) !important;
                border-radius: 12px !important;
                height: 52px !important;
                font-size: 15px !important;
                font-weight: 600 !important;
                text-transform: none !important;
                letter-spacing: 0.3px;
                color: #2C2B30 !important;
                box-shadow: 0 4px 14px rgba(245, 143, 124, 0.35) !important;
            }
            .dialer-call-btn:hover {
                box-shadow: 0 6px 20px rgba(245, 143, 124, 0.45) !important;
                background: linear-gradient(135deg, #F2C4CE 0%, #F58F7C 100%) !important;
            }
            .dialer-call-btn i {
                font-size: 20px;
            }

            /* Sections */
            .dialer-section {
                flex: 1;
                padding: 0 24px 24px;
                overflow-y: auto;
            }
            .section-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 12px;
                padding-top: 16px;
                border-top: 1px solid #4F4F51;
            }
            .section-title {
                font-size: 11px;
                font-weight: 600;
                color: #D6D6D6;
                text-transform: uppercase;
                letter-spacing: 1px;
            }
            .section-header .btn-flat {
                color: #F2C4CE !important;
                font-size: 12px !important;
                padding: 0 8px !important;
                height: 24px !important;
                line-height: 24px !important;
            }

            /* Recent Calls */
            .recent-calls-list {
                display: flex;
                flex-direction: column;
                gap: 4px;
            }
            .recent-call-item {
                display: flex;
                align-items: center;
                gap: 12px;
                padding: 12px;
                border-radius: 10px;
                cursor: pointer;
                transition: background 0.15s ease;
            }
            .recent-call-item:hover {
                background: #4F4F51;
            }
            .call-icon {
                width: 36px;
                height: 36px;
                border-radius: 10px;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-shrink: 0;
            }
            .call-icon i {
                font-size: 18px;
            }
            .call-icon.outgoing {
                background: rgba(242, 196, 206, 0.15);
                color: #F2C4CE;
            }
            .call-icon.incoming {
                background: rgba(214, 214, 214, 0.15);
                color: #D6D6D6;
            }
            .call-icon.missed {
                background: rgba(245, 143, 124, 0.15);
                color: #F58F7C;
            }
            .call-info {
                flex: 1;
                min-width: 0;
            }
            .call-name {
                display: block;
                color: #D6D6D6;
                font-size: 14px;
                font-weight: 500;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .call-number {
                display: block;
                color: #888;
                font-size: 12px;
                margin-top: 2px;
            }
            .call-meta {
                display: flex;
                align-items: center;
                gap: 8px;
                flex-shrink: 0;
            }
            .call-time {
                color: #888;
                font-size: 11px;
            }
            .call-duration {
                color: #10b981;
                font-size: 10px;
                font-family: 'SF Mono', 'Monaco', monospace;
            }
            .call-meta {
                display: flex;
                flex-direction: column;
                align-items: flex-end;
                gap: 2px;
            }
            .call-action {
                color: #F58F7C !important;
                padding: 6px !important;
                min-width: 0 !important;
                width: 32px !important;
                height: 32px !important;
                border-radius: 8px !important;
                opacity: 0;
                transition: opacity 0.15s ease;
            }
            .recent-call-item:hover .call-action {
                opacity: 1;
            }
            .call-action:hover {
                background: rgba(245, 143, 124, 0.15) !important;
            }
            .call-action i {
                font-size: 18px;
            }

            /* Adjust page content when dialer is open */
            body.dialer-open .viq-dashboard {
                width: calc(100% - 64px - 340px) !important;
                max-width: calc(100% - 64px - 340px) !important;
            }
            body.dialer-open nav {
                width: calc(100% - 64px - 340px) !important;
            }
            .viq-dashboard {
                transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }
            nav {
                transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }

            /* Hide FAB when panel is open */
            body.dialer-open .dialer-fab {
                transform: scale(0);
                opacity: 0;
                pointer-events: none;
            }
            .dialer-fab {
                transition: transform 0.2s ease, opacity 0.2s ease, background 0.2s ease, box-shadow 0.2s ease !important;
            }

            /* Scrollbar styling */
            .dialer-section::-webkit-scrollbar {
                width: 4px;
            }
            .dialer-section::-webkit-scrollbar-track {
                background: transparent;
            }
            .dialer-section::-webkit-scrollbar-thumb {
                background: rgba(255,255,255,0.1);
                border-radius: 2px;
            }
            .dialer-section::-webkit-scrollbar-thumb:hover {
                background: rgba(255,255,255,0.2);
            }

/* ============================================= */
/* LEADS TAB STYLES                              */
/* ============================================= */
            .leads-advanced-filter {
                background: #FFFFFF;
                border: 1px solid #E2E8F0;
                border-radius: 12px;
                padding: 20px;
                margin-bottom: 20px;
            }
            .filter-row {
                display: flex;
                flex-wrap: wrap;
                gap: 16px;
                margin-bottom: 16px;
                align-items: flex-end;
            }
            .filter-row:last-child {
                margin-bottom: 0;
            }
            .filter-group {
                display: flex;
                flex-direction: column;
                gap: 6px;
                min-width: 150px;
            }
            .filter-group.filter-grow {
                flex: 1;
                min-width: 200px;
            }
            .filter-group label {
                font-size: 12px;
                font-weight: 500;
                color: #64748B;
                text-transform: uppercase;
                letter-spacing: 0.5px;
            }
            .filter-group input[type="text"],
            .filter-group input[type="date"],
            .filter-group select {
                padding: 10px 14px;
                background: #F8FAFC !important;
                border: 1px solid #E2E8F0 !important;
                border-radius: 8px !important;
                color: #1E293B !important;
                font-size: 14px !important;
                min-height: 42px;
                box-sizing: border-box;
                width: 100%;
            }
            /* Override Materialize hiding native selects */
            .filter-group select {
                display: block !important;
                opacity: 1 !important;
                position: relative !important;
                pointer-events: auto !important;
                -webkit-appearance: none;
                -moz-appearance: none;
                appearance: none;
                padding-right: 36px !important;
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='%2364748B'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") !important;
                background-repeat: no-repeat !important;
                background-position: right 12px center !important;
                cursor: pointer;
                height: auto !important;
            }
            /* Hide Materialize's select wrapper if present */
            .filter-group .select-wrapper {
                display: none !important;
            }
            .filter-group input[type="text"]:focus,
            .filter-group input[type="date"]:focus,
            .filter-group select:focus {
                border-color: #1D4ED8;
                outline: none;
                box-shadow: 0 0 0 2px rgba(29, 78, 216, 0.15);
            }
            .filter-group input::placeholder {
                color: #94A3B8;
            }
            .filter-group select option {
                background: #FFFFFF;
                color: #1E293B;
            }
            .filter-group.filter-checkbox {
                flex-direction: row;
                align-items: center;
                min-width: auto;
            }
            .filter-group.filter-checkbox label {
                display: flex;
                align-items: center;
                gap: 8px;
                cursor: pointer;
                text-transform: none;
                font-size: 14px;
            }
            .filter-group.filter-checkbox input[type="checkbox"] {
                width: 18px;
                height: 18px;
                accent-color: #1D4ED8;
                cursor: pointer;
            }
            .filter-actions {
                display: flex;
                gap: 10px;
                margin-left: auto;
                align-items: center;
            }
            .viq-filter-apply-btn {
                background: linear-gradient(135deg, #3B82F6, #1D4ED8) !important;
                color: #fff !important;
                border: none !important;
                padding: 0 24px !important;
                height: 42px !important;
                line-height: 42px !important;
                border-radius: 8px !important;
                font-weight: 600 !important;
                font-size: 14px !important;
                cursor: pointer !important;
                display: inline-flex !important;
                align-items: center !important;
                text-transform: none !important;
            }
            .viq-filter-apply-btn:hover {
                background: linear-gradient(135deg, #1D4ED8, #1E40AF) !important;
                box-shadow: 0 4px 12px rgba(29, 78, 216, 0.3) !important;
            }
            .viq-filter-apply-btn i {
                margin-right: 8px !important;
            }
            .viq-filter-reset-btn {
                background: #F8FAFC !important;
                color: #64748B !important;
                border: 1px solid #E2E8F0 !important;
                padding: 0 20px !important;
                height: 42px !important;
                line-height: 40px !important;
                border-radius: 8px !important;
                font-size: 14px !important;
                cursor: pointer !important;
                display: inline-flex !important;
                align-items: center !important;
                text-decoration: none !important;
                text-transform: none !important;
            }
            .viq-filter-reset-btn:hover {
                background: #E2E8F0 !important;
                color: #1E293B !important;
            }
            .viq-filter-reset-btn i {
                margin-right: 8px !important;
            }
            @media (max-width: 768px) {
                .filter-group {
                    min-width: 100%;
                }
                .filter-actions {
                    width: 100%;
                    margin-left: 0;
                }
                .viq-filter-apply-btn,
                .viq-filter-reset-btn {
                    flex: 1 !important;
                    justify-content: center !important;
                }
            }

/* ============================================= */
/* LEADS SEARCH STYLES                           */
/* ============================================= */
            /* Hide scrollbar but keep functionality */
            .lead-notes-textarea {
                box-sizing: border-box;
                scrollbar-width: none; /* Firefox */
                -ms-overflow-style: none; /* IE/Edge */
            }
            .lead-notes-textarea::-webkit-scrollbar {
                display: none; /* Chrome/Safari */
            }
            .ringy-card { max-width: 100%; overflow: hidden; }
            .ringy-grid { align-items: stretch; max-width: 100%; grid-auto-rows: minmax(min-content, auto); }
            .ringy-grid > div { align-self: stretch; min-width: 0; }
            .ringy-grid .notes-column { align-self: stretch; }
            @media (max-width: 1400px) {
                .ringy-grid { grid-template-columns: 50px 160px 1fr 130px 200px 160px !important; }
            }
            @media (max-width: 1100px) {
                .ringy-grid { grid-template-columns: 50px 1fr 1fr 1fr !important; }
                .ringy-grid > div:nth-child(5), .ringy-grid > div:nth-child(6) { grid-column: span 2; border-top: 1px solid #E2E8F0; }
            }
            @media (max-width: 768px) {
                .ringy-grid { grid-template-columns: 1fr !important; }
                .ringy-grid > div { border-left: none !important; border-bottom: 1px solid #E2E8F0; }
                .ringy-grid > div:first-child { flex-direction: row; justify-content: flex-start; padding: 12px; gap: 16px; }
                .ringy-grid > div:last-child { border-bottom: none; }
                .ringy-grid > div:nth-child(5), .ringy-grid > div:nth-child(6) { grid-column: auto; }
            }
            /* Make lead cards expand when notes textarea is resized */
            .lead-card, .ringy-card {
                height: auto !important;
                min-height: 0 !important;
            }
            .notes-column {
                height: auto !important;
                min-height: 0 !important;
            }

/* Spin keyframe */
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================= */
/* CAMPAIGN & TEAM MANAGEMENT STYLES             */
/* ============================================= */
    /* Disposition Modal - Complete Dark Theme Redesign */
    .viq-disposition-modal {
        background: #2C2B30 !important;
        border-radius: 16px !important;
        max-width: 480px !important;
        width: 95% !important;
        max-height: 80vh !important;
        overflow: visible !important;
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5) !important;
        margin: 0 auto !important;
    }

    /* Only apply flex when modal is open (Materialize adds 'open' class) */
    .viq-disposition-modal.open {
        display: flex !important;
        flex-direction: column !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }

    .disposition-header {
        background: linear-gradient(135deg, #3a3a3c 0%, #2C2B30 100%);
        padding: 14px 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #4F4F51;
        flex-shrink: 0;
    }

    .disposition-header-content {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .disposition-icon {
        width: 36px;
        height: 36px;
        background: linear-gradient(135deg, #F58F7C 0%, #F2C4CE 100%);
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .disposition-icon i {
        font-size: 18px;
        color: #2C2B30;
    }

    .disposition-header-text h4 {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
        color: #D6D6D6;
    }

    .disposition-header-text p {
        margin: 0;
        font-size: 12px;
        color: #a0a0a0;
    }

    .disposition-close-btn {
        background: transparent;
        border: none;
        padding: 8px;
        cursor: pointer;
        border-radius: 8px;
        transition: background 0.2s;
    }

    .disposition-close-btn:hover {
        background: rgba(255,255,255,0.1);
    }

    .disposition-close-btn i {
        font-size: 20px;
        color: #a0a0a0;
    }

    .disposition-body {
        padding: 16px;
        flex: 1 1 auto;
        overflow-y: auto;
        max-height: calc(80vh - 150px);
        min-height: 100px;
    }

    .disposition-body::-webkit-scrollbar {
        width: 6px;
    }

    .disposition-body::-webkit-scrollbar-track {
        background: transparent;
    }

    .disposition-body::-webkit-scrollbar-thumb {
        background: #4F4F51;
        border-radius: 3px;
    }

    .disposition-section {
        margin-bottom: 12px;
        background: #3a3a3c;
        border-radius: 10px;
        overflow: hidden;
    }

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

    /* Collapsible Section Styles */
    .collapsible-section .section-header {
        display: flex;
        align-items: center;
        padding: 12px 14px;
        cursor: pointer;
        transition: background 0.2s;
    }

    .collapsible-section .section-header:hover {
        background: #4a4a4c;
    }

    .collapsible-section .section-header .disposition-label {
        margin-bottom: 0;
        flex: 1;
        pointer-events: none;
    }

    .section-summary {
        font-size: 12px;
        color: #F58F7C;
        font-weight: 500;
        margin-right: 8px;
        max-width: 150px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .section-chevron {
        color: #a0a0a0;
        font-size: 20px;
        transition: transform 0.2s;
    }

    .collapsible-section.collapsed .section-chevron {
        transform: rotate(-90deg);
    }

    .section-content {
        padding: 0 14px 14px 14px;
        transition: all 0.2s ease;
    }

    .section-content.collapsed {
        display: none;
    }

    /* Non-collapsible notes section */
    .disposition-notes-section {
        padding: 14px;
    }

    .disposition-notes-section .disposition-label {
        margin-bottom: 8px;
    }

    .disposition-label {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #D6D6D6;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 10px;
    }

    .disposition-label i {
        font-size: 16px;
        color: #F58F7C;
    }

    /* Primary Grid */
    .disposition-primary-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .viq-disposition-modal .disposition-primary-btn {
        padding: 10px 8px;
        background: #4F4F51;
        border: 2px solid #5a5a5c;
        border-radius: 8px;
        color: #D6D6D6;
        font-size: 11px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.15s ease;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        min-height: 60px;
    }

    .viq-disposition-modal .disposition-primary-btn:hover {
        background: #4F4F51;
        border-color: #5a5a5c;
        transform: translateY(-2px);
    }

    .viq-disposition-modal .disposition-primary-btn.selected {
        background: rgba(245, 143, 124, 0.15);
        border-color: #F58F7C;
        color: #F58F7C;
    }

    /* Sub Options */
    .disposition-sub-options {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .viq-disposition-modal .disposition-sub-btn {
        padding: 10px 18px;
        background: #3a3a3c;
        border: 1px solid #5a5a5c;
        border-radius: 24px;
        color: #D6D6D6;
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .viq-disposition-modal .disposition-sub-btn:hover {
        background: #4F4F51;
        border-color: #F58F7C;
    }

    .viq-disposition-modal .disposition-sub-btn.selected {
        background: linear-gradient(135deg, #F58F7C 0%, #e07a68 100%);
        border-color: #F58F7C;
        color: #2C2B30;
        font-weight: 600;
    }

    /* Price Grid */
    .disposition-price-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .disposition-input-group {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .disposition-input-group > label {
        font-size: 10px;
        color: #a0a0a0;
        font-weight: 500;
    }

    .input-with-icon {
        position: relative;
        display: flex;
        align-items: center;
    }

    .input-prefix {
        position: absolute;
        left: 10px;
        color: #F58F7C;
        font-weight: 600;
        font-size: 13px;
    }

    .viq-disposition-modal input[type="number"],
    .viq-disposition-modal input[type="datetime-local"] {
        width: 100%;
        padding: 10px 10px 10px 26px;
        background: #4F4F51;
        border: 1px solid #5a5a5c;
        border-radius: 8px;
        color: #D6D6D6;
        font-size: 13px;
        box-sizing: border-box;
        transition: all 0.2s;
    }

    .viq-disposition-modal input[type="datetime-local"] {
        padding-left: 10px;
    }

    .viq-disposition-modal input:focus {
        border-color: #F58F7C;
        outline: none;
        box-shadow: 0 0 0 2px rgba(245, 143, 124, 0.15);
    }

    /* Checkbox */
    .disposition-checkbox-label {
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        color: #D6D6D6;
        font-size: 12px;
        font-weight: 500;
        padding: 8px 12px;
        background: #4F4F51;
        border-radius: 8px;
        transition: all 0.2s;
    }

    .disposition-checkbox-label:hover {
        background: #5a5a5c;
    }

    .disposition-checkbox-label input[type="checkbox"] {
        width: 16px;
        height: 16px;
        accent-color: #F58F7C;
        cursor: pointer;
    }

    .disposition-checkbox-label i {
        display: none;
    }

    .disposition-callback-wrapper {
        margin-top: 8px;
    }

    /* Likelihood Scale */
    .disposition-likelihood-scale {
        display: flex;
        gap: 6px;
    }

    .viq-disposition-modal .disposition-likelihood-btn {
        flex: 1;
        padding: 10px 6px;
        border: 2px solid #5a5a5c;
        border-radius: 8px;
        background: #4F4F51;
        cursor: pointer;
        font-weight: 700;
        font-size: 14px;
        color: #D6D6D6;
        transition: all 0.15s;
    }

    .viq-disposition-modal .disposition-likelihood-btn:hover {
        border-color: #F58F7C;
        background: #5a5a5c;
    }

    .viq-disposition-modal .disposition-likelihood-btn.selected {
        background: linear-gradient(135deg, #F58F7C 0%, #e07a68 100%) !important;
        border-color: #F58F7C !important;
        color: #2C2B30 !important;
    }

    .disposition-likelihood-labels {
        display: flex;
        justify-content: space-between;
        margin-top: 6px;
        font-size: 10px;
        color: #a0a0a0;
    }

    /* Notes Textarea */
    .viq-disposition-modal textarea {
        width: 100%;
        padding: 10px 12px;
        background: #4F4F51;
        border: 1px solid #5a5a5c;
        border-radius: 8px;
        resize: none;
        box-sizing: border-box;
        color: #D6D6D6;
        font-size: 13px;
        font-family: inherit;
        min-height: 50px;
        max-height: 80px;
        transition: all 0.2s;
    }

    .viq-disposition-modal textarea:focus {
        border-color: #F58F7C;
        outline: none;
        box-shadow: 0 0 0 3px rgba(245, 143, 124, 0.15);
    }

    .viq-disposition-modal textarea::placeholder,
    .viq-disposition-modal input::placeholder {
        color: #6b6b6d;
    }

    /* Message */
    .disposition-message {
        display: none;
        padding: 14px 16px;
        border-radius: 10px;
        font-size: 14px;
        margin-top: 16px;
    }

    .disposition-message.success {
        display: block;
        background: rgba(16, 185, 129, 0.15);
        border: 1px solid #10b981;
        color: #10b981;
    }

    .disposition-message.error {
        display: block;
        background: rgba(239, 68, 68, 0.15);
        border: 1px solid #ef4444;
        color: #ef4444;
    }

    /* Footer */
    .disposition-footer {
        padding: 12px 16px;
        background: #232228;
        border-top: 1px solid #4F4F51;
        display: flex;
        justify-content: flex-end;
        gap: 10px;
        flex-shrink: 0;
        border-radius: 0 0 16px 16px;
    }

    .disposition-cancel-btn {
        padding: 10px 18px;
        background: transparent;
        border: 1px solid #5a5a5c;
        border-radius: 8px;
        color: #D6D6D6;
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s;
    }

    .disposition-cancel-btn:hover {
        background: #3a3a3c;
        border-color: #6b6b6d;
    }

    .disposition-save-btn {
        padding: 10px 20px;
        background: linear-gradient(135deg, #F58F7C 0%, #e07a68 100%);
        border: none;
        border-radius: 8px;
        color: #2C2B30;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 8px;
        transition: all 0.2s;
    }

    .disposition-save-btn:disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }

    .disposition-save-btn:not(:disabled):hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(245, 143, 124, 0.4);
    }

    .disposition-save-btn i {
        font-size: 18px;
    }

    /* Responsive */
    @media (max-width: 600px) {
        .viq-disposition-modal {
            max-height: 95vh !important;
            width: 98% !important;
            border-radius: 12px !important;
        }

        .viq-disposition-modal.open {
            top: 2.5vh !important;
            transform: none !important;
        }

        .disposition-body {
            max-height: calc(95vh - 160px);
            padding: 16px;
        }

        .disposition-header {
            padding: 16px;
        }

        .disposition-footer {
            padding: 12px 16px;
        }
    }

    @media (max-width: 480px) {
        .disposition-primary-grid {
            grid-template-columns: repeat(2, 1fr);
        }

        .disposition-price-grid {
            grid-template-columns: 1fr;
        }

        .disposition-header-content {
            flex-direction: column;
            align-items: flex-start;
            gap: 12px;
        }

        .disposition-likelihood-scale {
            gap: 4px;
        }

        .viq-disposition-modal .disposition-likelihood-btn {
            padding: 10px 4px;
            font-size: 14px;
        }
    }

/* ===== DASHBOARD GRID LAYOUT (Phase 9) ===== */

/* Mobile-first single column (default, 320px+) */
.viq-dashboard-grid {
    display: grid;
    grid-template-areas:
        "kpis"
        "goals"
        "leaderboard"
        "activity"
        "feed";
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
}

/* dvh fallback for browsers that don't support it */
@supports not (min-height: 100dvh) {
    .viq-dashboard-grid {
        min-height: calc(100vh - 64px);
    }
}

/* Desktop (900px+) -- two columns */
@media (min-width: 900px) {
    .viq-dashboard-grid {
        grid-template-areas:
            "kpis        kpis"
            "goals       leaderboard"
            "activity    feed";
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }
}

/* Grid area assignments */
.viq-section-kpis        { grid-area: kpis; }
.viq-section-goals       { grid-area: goals; }
.viq-section-leaderboard { grid-area: leaderboard; }
.viq-section-activity    { grid-area: activity; }
.viq-section-feed        { grid-area: feed; }
.viq-section-pulse       { grid-area: pulse; }

/* Team Pulse status dots (upline only) */
.viq-pulse-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.viq-pulse-green  { background: #10B981; box-shadow: 0 0 6px rgba(16, 185, 129, 0.4); }
.viq-pulse-yellow { background: #F59E0B; box-shadow: 0 0 6px rgba(245, 158, 11, 0.4); }
.viq-pulse-red    { background: #DC2626; box-shadow: 0 0 6px rgba(220, 38, 38, 0.4); }

/* Prevent horizontal overflow */
.viq-dashboard-grid {
    overflow-x: hidden;
}
.viq-dashboard-grid > * {
    min-width: 0;
}

/* Dashboard section cards (placeholder styling) */
.viq-dashboard-grid .card {
    margin: 0;
    height: 100%;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.viq-dashboard-grid .card .card-content {
    padding: 20px;
}
.viq-dashboard-grid .card .card-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1E293B;
    margin-bottom: 8px;
}

/* Bottom padding on dashboard to account for FAB */
.viq-dashboard-grid {
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
}

/* ===== TOUCH TARGETS (Phase 9) ===== */

/* Minimum 44px touch targets for all interactive elements in dashboard */
.viq-dashboard-grid a,
.viq-dashboard-grid button,
.viq-dashboard-grid input[type="submit"],
.viq-dashboard-grid input[type="button"],
.viq-dashboard-grid .btn,
.viq-dashboard-grid .btn-flat,
.viq-dashboard-grid .btn-floating,
.viq-dashboard-grid .chip,
.viq-dashboard-grid .collection-item a {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Global touch target for tab buttons */
.viq-tab-btn {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ===== SAFE AREA (Phase 9) ===== */

/* FAB area with safe-area clearance for notched devices */
.viq-fab-area {
    position: fixed;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    right: 24px;
    z-index: 999;
}

/* ===== DASHBOARD KPIs - Desktop Focused ===== */

/* Hero AP Card */
.viq-kpi-hero {
    background: linear-gradient(135deg, #1D4ED8 0%, #1E40AF 100%);
    border-radius: 12px;
    padding: 28px 32px;
    text-align: center;
    margin-bottom: 16px;
    box-shadow: 0 4px 12px rgba(29, 78, 216, 0.3);
}
.viq-kpi-hero-value {
    font-size: 3rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.1;
}
.viq-kpi-hero-label {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.8);
    margin-top: 6px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
}

/* Secondary KPI Row */
.viq-kpi-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 12px;
}

.viq-kpi-card {
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    padding: 16px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    transition: box-shadow 0.2s;
}
.viq-kpi-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.viq-kpi-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1E293B;
    line-height: 1.2;
}
.viq-kpi-label {
    font-size: 0.7rem;
    color: #64748B;
    margin-top: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

/* Responsive: stack on smaller screens */
@media (max-width: 1100px) {
    .viq-kpi-row {
        grid-template-columns: repeat(4, 1fr);
    }
}
@media (max-width: 600px) {
    .viq-kpi-row {
        grid-template-columns: repeat(2, 1fr);
    }
    .viq-kpi-hero-value {
        font-size: 2.2rem;
    }
}

/* ===== DASHBOARD GOALS / SVG RINGS (Phase 10) ===== */

.viq-goals-container {
    display: flex;
    justify-content: center;
    gap: 32px;
    padding: 16px 0;
    flex-wrap: wrap;
}

.viq-goal-ring-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.viq-progress-ring {
    position: relative;
    width: 120px;
    height: 120px;
}
.viq-progress-ring svg {
    width: 100%;
    height: 100%;
}

.viq-ring-progress {
    /* no transition — rendered server-side */
}

.viq-ring-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    line-height: 1.2;
}
.viq-ring-value {
    display: block;
    font-size: 1.3rem;
    font-weight: 700;
    color: #1E293B;
}
.viq-ring-target {
    display: block;
    font-size: 0.75rem;
    color: #64748B;
}

.viq-goal-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: #1E293B;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Smaller rings on very small screens */
@media (max-width: 360px) {
    .viq-progress-ring {
        width: 100px;
        height: 100px;
    }
    .viq-ring-value {
        font-size: 1.1rem;
    }
    .viq-goals-container {
        gap: 20px;
    }
}

/* ===== DASHBOARD LEADERBOARD (Phase 10) ===== */

.viq-leaderboard-toggle {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.viq-lb-chip {
    cursor: pointer;
    background: #F1F5F9 !important;
    color: #64748B !important;
    font-size: 0.8rem;
    font-weight: 500;
    min-height: 32px !important;
    line-height: 32px !important;
    padding: 0 14px;
    border-radius: 16px;
    transition: background 0.2s, color 0.2s;
}
.viq-lb-chip.active {
    background: #1D4ED8 !important;
    color: #fff !important;
}
.viq-lb-chip:hover:not(.active) {
    background: #E2E8F0 !important;
}

.viq-ds-chip {
    background: #F1F5F9 !important;
    color: #64748B !important;
    font-size: 0.8rem;
    font-weight: 500;
    min-height: 32px !important;
    line-height: 32px !important;
    padding: 0 14px;
    border-radius: 16px;
    transition: background 0.2s, color 0.2s;
}
.viq-ds-chip.active {
    background: #1D4ED8 !important;
    color: #fff !important;
}
.viq-ds-chip:hover:not(.active) {
    background: #E2E8F0 !important;
}

.viq-lb-row {
    display: flex;
    align-items: center;
    padding: 14px 4px;
    border-bottom: 1px solid #F1F5F9;
    gap: 12px;
}
.viq-lb-row:last-child {
    border-bottom: none;
}

.viq-lb-row.viq-lb-self {
    background: rgba(29, 78, 216, 0.06);
    border-radius: 8px;
    padding: 14px 10px;
    margin: 0 -8px;
}

.viq-lb-rank {
    flex: 0 0 36px;
    text-align: center;
    font-weight: 700;
    font-size: 1rem;
    color: #1E293B;
}
.viq-lb-rank.viq-lb-rank-1 { color: #D97706; }
.viq-lb-rank.viq-lb-rank-2 { color: #6B7280; }
.viq-lb-rank.viq-lb-rank-3 { color: #B45309; }

.viq-lb-name {
    flex: 1;
    font-weight: 500;
    color: #1E293B;
    font-size: 1rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.viq-lb-self .viq-lb-name {
    font-weight: 700;
    color: #1D4ED8;
}

.viq-lb-stats {
    flex: 0 0 auto;
    text-align: right;
    font-size: 0.85rem;
    color: #64748B;
    line-height: 1.3;
}
.viq-lb-stats-primary {
    font-weight: 600;
    color: #1E293B;
    font-size: 0.85rem;
}

.viq-lb-gap {
    font-size: 0.7rem;
    color: #64748B;
    text-align: right;
    padding: 2px 0 0 0;
}
.viq-lb-gap-value {
    color: #1D4ED8;
    font-weight: 500;
}

.viq-lb-empty {
    text-align: center;
    padding: 24px 0;
    color: #64748B;
    font-size: 0.9rem;
}

/* Rank medal icons for top 3 */
.viq-lb-medal {
    font-size: 22px !important;
    vertical-align: middle;
}
.viq-lb-medal-1 { color: #D97706; }
.viq-lb-medal-2 { color: #9CA3AF; }
.viq-lb-medal-3 { color: #B45309; }

/* ======================================================================
   Activity Feed & Summary Styles (Phase 11)
   ====================================================================== */

/* Activity summary styles (Today's Snapshot section) */
.viq-activity-summary {
    display: flex;
    justify-content: space-around;
    text-align: center;
    padding: 12px 0 4px;
}
.viq-activity-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.viq-activity-count {
    font-size: 28px;
    font-weight: 700;
    color: #1E293B;
    line-height: 1.2;
}
.viq-activity-label {
    font-size: 11px;
    color: #64748B;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

/* Feed item styles (Materialize collection list) */
.viq-feed-list {
    max-height: 400px;
    overflow-y: auto;
}
.viq-feed-list .collection-item.avatar {
    min-height: auto;
    padding: 10px 10px 10px 62px;
}
.viq-feed-list .collection-item.avatar .circle {
    font-size: 18px;
    width: 36px;
    height: 36px;
    line-height: 36px;
}
.viq-feed-list .collection-item.avatar .title {
    font-size: 13px;
    line-height: 1.4;
}
.viq-feed-list .collection-item {
    border-bottom: 1px solid #E2E8F0 !important;
}
.viq-feed-list .collection-item:last-child {
    border-bottom: none !important;
}

/* Responsive adjustments */
@media only screen and (max-width: 600px) {
    .viq-activity-count {
        font-size: 22px;
    }
    .viq-activity-label {
        font-size: 10px;
    }
    .viq-feed-list {
        max-height: 300px;
    }
}

/* ================================================================== */
/* PHASE 12: Sale Logging FAB, Form, and Celebration                  */
/* ================================================================== */

/* Sale FAB - positioned above dialer FAB */
.viq-sale-fab {
    position: fixed;
    bottom: calc(88px + env(safe-area-inset-bottom, 0px)); /* 24px dialer-bottom + 56px dialer-height + 8px gap */
    right: 24px;
    z-index: 998;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: #10B981;
    border-radius: 50%;
    color: #fff !important;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    text-decoration: none;
}

.viq-sale-fab:hover,
.viq-sale-fab:focus {
    background: #059669;
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5);
    color: #fff !important;
}

.viq-sale-fab i {
    font-size: 24px;
    line-height: 1;
}

/* Hide sale FAB when dialer panel is open */
body.dialer-open .viq-sale-fab {
    transform: scale(0);
    opacity: 0;
    pointer-events: none;
}

/* Segmented Control */
.viq-segmented-control {
    display: inline-flex;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    overflow: hidden;
    background: #F8FAFC;
}

.viq-segmented-control .viq-segment {
    border: none;
    background: transparent;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    color: #64748B;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
    white-space: nowrap;
    min-height: 44px; /* Touch target */
    display: flex;
    align-items: center;
}

.viq-segmented-control .viq-segment:not(:last-child) {
    border-right: 1px solid #E2E8F0;
}

.viq-segmented-control .viq-segment.active {
    background: #1D4ED8;
    color: #fff;
}

.viq-segmented-control .viq-segment:hover:not(.active) {
    background: #E2E8F0;
}

/* Frequency toggle (smaller variant) */
.viq-frequency-toggle .viq-segment {
    padding: 6px 12px;
    font-size: 12px;
}

/* Face amount chips */
.viq-face-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.viq-face-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    border-radius: 16px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    color: #1E293B;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    min-height: 36px;
    user-select: none;
}

.viq-face-chip:hover {
    background: #E2E8F0;
    border-color: #1D4ED8;
}

.viq-face-chip.active {
    background: #1D4ED8;
    color: #fff;
    border-color: #1D4ED8;
}

/* Sale modal specifics */
#viq-sale-form-modal {
    max-width: 520px;
    border-radius: 12px;
    overflow: hidden;
    max-height: none;
}

#viq-sale-form-modal .modal-content {
    padding: 24px 24px 0;
    overflow: visible;
}

#viq-sale-form-modal .input-field .prefix {
    color: #64748B;
}

#viq-sale-form-modal .input-field .prefix.active {
    color: #1D4ED8;
}

#viq-sale-form-modal .input-field input:focus {
    border-bottom-color: #1D4ED8 !important;
    box-shadow: 0 1px 0 0 #1D4ED8 !important;
}

#viq-sale-form-modal .input-field input:focus + label {
    color: #1D4ED8 !important;
}

/* Submit button loading state */
#viq-submit-sale-btn.disabled {
    background: #94A3B8 !important;
    pointer-events: none;
}

/* Mobile responsive for sale form */
@media only screen and (max-width: 600px) {
    #viq-sale-form-modal {
        width: 95% !important;
        max-width: none;
    }

    .viq-segmented-control .viq-segment {
        padding: 8px 10px;
        font-size: 12px;
    }

    .viq-frequency-toggle .viq-segment {
        padding: 6px 8px;
        font-size: 11px;
    }

    .viq-face-chip {
        padding: 6px 10px;
        font-size: 12px;
    }
}

/* ============================================================================
   WIDGET DASHBOARD — GridStack Integration
   ============================================================================ */

/* Widget Grid Container — viewport-locked, NO scrolling */
.viq-widget-grid-wrapper {
    flex: 1;
    overflow: hidden;
    padding: 8px;
    /* Subtle dot-grid background */
    background-image: radial-gradient(circle, rgba(0,0,0,0.06) 1px, transparent 1px);
    background-size: 70px 70px;
    background-color: #f0f2f5;
}

.grid-stack {
    height: 100% !important;
    overflow: hidden;
}

/* Override GridStack defaults — premium card design */
.grid-stack > .grid-stack-item > .grid-stack-item-content {
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(0,0,0,0.06);
    transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
    display: flex;
    flex-direction: column;
    cursor: grab;
    inset: 4px;
}

.grid-stack > .grid-stack-item > .grid-stack-item-content:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.06);
    border-color: rgba(0,0,0,0.10);
}

.grid-stack > .grid-stack-item > .grid-stack-item-content:active {
    cursor: grabbing;
    box-shadow: 0 12px 32px rgba(0,0,0,0.14), 0 4px 12px rgba(0,0,0,0.08);
    transform: scale(1.01);
}

/* Widget drag placeholder */
.grid-stack > .grid-stack-placeholder > .placeholder-content {
    border: 2px dashed rgba(59, 130, 246, 0.4) !important;
    background: rgba(59, 130, 246, 0.04) !important;
    border-radius: 14px !important;
}

/* Floating remove button — appears on hover */
.viq-widget-remove-wrap {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.grid-stack-item:hover .viq-widget-remove-wrap {
    opacity: 1;
}

.viq-widget-remove-btn {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: none;
    background: rgba(0,0,0,0.06);
    color: #94A3B8;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: all 0.15s ease;
    padding: 0;
}

.viq-widget-remove-btn:hover {
    background: #fef2f2;
    color: #ef4444;
}

.viq-widget-remove-btn .material-icons {
    font-size: 16px;
}

/* Subtle widget label — tiny muted text, no bar */
.viq-widget-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #94a3b8;
    padding: 10px 16px 0;
    flex-shrink: 0;
    line-height: 1;
}

/* Widget Body — fills entire card, no header */
.viq-widget-body {
    flex: 1;
    overflow: hidden;
    padding: 16px;
    min-height: 0;
    position: relative;
}

/* Widget Icon Colors */
.widget-icon.bg-blue { background: linear-gradient(135deg, #3B82F6, #1D4ED8); }
.widget-icon.bg-green { background: linear-gradient(135deg, #10b981, #059669); }
.widget-icon.bg-orange { background: linear-gradient(135deg, #f59e0b, #d97706); }
.widget-icon.bg-red { background: linear-gradient(135deg, #ef4444, #dc2626); }
.widget-icon.bg-purple { background: linear-gradient(135deg, #8B5CF6, #7C3AED); }
.widget-icon.bg-cyan { background: linear-gradient(135deg, #06b6d4, #0891b2); }
.widget-icon.bg-pink { background: linear-gradient(135deg, #F58F7C, #e06c5a); }
.widget-icon.bg-slate { background: linear-gradient(135deg, #64748B, #475569); }

/* ============================================================================
   WIDGET PICKER DRAWER
   ============================================================================ */

.viq-widget-drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.4);
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.viq-widget-drawer-overlay.open {
    opacity: 1;
    visibility: visible;
}

.viq-widget-drawer {
    position: fixed;
    top: 0;
    right: -420px;
    width: 400px;
    height: 100vh;
    background: #fff;
    box-shadow: -4px 0 24px rgba(0,0,0,0.15);
    z-index: 10001;
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
}

.viq-widget-drawer.open {
    right: 0;
}

.viq-widget-drawer-header {
    padding: 20px 24px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.viq-widget-drawer-header h5 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #1E293B;
}

.viq-widget-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 24px;
}

.viq-widget-drawer-category {
    margin-bottom: 20px;
}

.viq-widget-drawer-category h6 {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #94A3B8;
    font-weight: 600;
    margin-bottom: 10px;
}

.viq-widget-drawer-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #fff;
}

.viq-widget-drawer-item:hover {
    border-color: #3B82F6;
    background: #f8faff;
    transform: translateX(-2px);
}

.viq-widget-drawer-item.active {
    border-color: #10b981;
    background: #f0fdf4;
}

.viq-widget-drawer-item .drawer-item-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #fff;
    flex-shrink: 0;
}

.viq-widget-drawer-item .drawer-item-info {
    flex: 1;
    min-width: 0;
}

.viq-widget-drawer-item .drawer-item-title {
    font-size: 14px;
    font-weight: 600;
    color: #1E293B;
}

.viq-widget-drawer-item .drawer-item-desc {
    font-size: 12px;
    color: #64748B;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.viq-widget-drawer-item .drawer-item-toggle {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 2px solid #e5e7eb;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #94A3B8;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.viq-widget-drawer-item.active .drawer-item-toggle {
    border-color: #10b981;
    background: #10b981;
    color: #fff;
}

/* ============================================================================
   CUSTOMIZE BUTTON
   ============================================================================ */

.viq-customize-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.08);
    color: #94A3B8;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.viq-customize-btn:hover {
    background: rgba(255,255,255,0.15);
    color: #fff;
    border-color: rgba(255,255,255,0.3);
}

.viq-customize-btn i {
    font-size: 16px;
}

/* ============================================================================
   PER-WIDGET STYLES
   ============================================================================ */

/* Quick Actions Widget */
.viq-quick-actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}

.viq-quick-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 10px 14px;
    border-radius: 14px;
    border: 1px solid #e5e7eb;
    background: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.viq-quick-action-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(59,130,246,0.08) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.viq-quick-action-btn:hover {
    border-color: #93c5fd;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(59,130,246,0.15);
}

.viq-quick-action-btn:hover::before {
    opacity: 1;
}

.viq-quick-action-btn:active {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(59,130,246,0.1);
}

.viq-quick-action-btn .qa-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #fff;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.viq-quick-action-btn .qa-icon.bg-green { background: linear-gradient(135deg, #22C55E, #16A34A); box-shadow: 0 4px 12px rgba(34,197,94,0.3); }
.viq-quick-action-btn .qa-icon.bg-blue { background: linear-gradient(135deg, #3B82F6, #2563EB); box-shadow: 0 4px 12px rgba(59,130,246,0.3); }
.viq-quick-action-btn .qa-icon.bg-purple { background: linear-gradient(135deg, #8B5CF6, #7C3AED); box-shadow: 0 4px 12px rgba(139,92,246,0.3); }
.viq-quick-action-btn .qa-icon.bg-orange { background: linear-gradient(135deg, #F59E0B, #D97706); box-shadow: 0 4px 12px rgba(245,158,11,0.3); }
.viq-quick-action-btn .qa-icon.bg-red { background: linear-gradient(135deg, #EF4444, #DC2626); box-shadow: 0 4px 12px rgba(239,68,68,0.3); }
.viq-quick-action-btn .qa-icon.bg-teal { background: linear-gradient(135deg, #14B8A6, #0D9488); box-shadow: 0 4px 12px rgba(20,184,166,0.3); }
.viq-quick-action-btn .qa-icon.bg-pink { background: linear-gradient(135deg, #EC4899, #DB2777); box-shadow: 0 4px 12px rgba(236,72,153,0.3); }
.viq-quick-action-btn .qa-icon.bg-indigo { background: linear-gradient(135deg, #6366F1, #4F46E5); box-shadow: 0 4px 12px rgba(99,102,241,0.3); }

.viq-quick-action-btn .qa-label {
    font-size: 12px;
    font-weight: 700;
    color: #1E293B;
    position: relative;
    z-index: 1;
    line-height: 1.3;
}

.viq-quick-action-btn .qa-sublabel {
    font-size: 10px;
    color: #94A3B8;
    font-weight: 500;
    position: relative;
    z-index: 1;
    margin-top: -4px;
}

/* Stats Widget — 2-Row Layout */
.viq-stats-widget {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.viq-stats-row-primary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.viq-stats-row-secondary {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
}

.viq-stat-mini .stat-icon {
    font-size: 22px;
    line-height: 1;
    margin-bottom: 4px;
}

.viq-stat-mini {
    background: #fff;
    border-radius: 12px;
    padding: 16px 14px 14px;
    border: 1px solid #e5e7eb;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.viq-stat-mini::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #3B82F6, #60a5fa);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.viq-stat-mini:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    border-color: #c7d2fe;
}

.viq-stat-mini:hover::before {
    opacity: 1;
}

/* Primary stats (first 2) get emphasized sizing */
.viq-stat-mini.stat-primary {
    border-color: #c7d2fe;
    background: linear-gradient(135deg, #f8faff 0%, #eef2ff 100%);
}

.viq-stat-mini.stat-primary::before {
    opacity: 1;
    background: linear-gradient(90deg, #3B82F6, #8B5CF6);
}

.viq-stat-mini.stat-primary .stat-value {
    font-size: 28px;
}

.viq-stat-mini .stat-value {
    font-size: 22px;
    font-weight: 800;
    color: #1E293B;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.viq-stat-mini .stat-label {
    font-size: 10px;
    color: #94A3B8;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-top: 6px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

/* Month-over-month change pill */
.stat-change {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.4;
}

.stat-change.up {
    background: #dcfce7;
    color: #15803d;
}

.stat-change.down {
    background: #fef2f2;
    color: #dc2626;
}

/* Count-up animation support */
@keyframes countUp {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.viq-stat-mini .stat-value.animated {
    animation: countUp 0.4s ease-out forwards;
}

/* Streak Widget — Enhanced */
.viq-streak-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 6px;
    position: relative;
}

.viq-streak-number {
    font-size: 64px;
    font-weight: 900;
    line-height: 1;
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: transform 0.3s ease;
    position: relative;
    z-index: 1;
}

/* Pulsing glow behind streak number when active */
.viq-streak-display.on-fire .viq-streak-number {
    filter: drop-shadow(0 0 12px rgba(245,158,11,0.4));
}

.viq-streak-display.on-fire::after {
    content: '';
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(245,158,11,0.15) 0%, transparent 70%);
    animation: streakPulse 2s ease-in-out infinite;
    z-index: 0;
}

@keyframes streakPulse {
    0%, 100% { transform: translateX(-50%) scale(1); opacity: 0.6; }
    50% { transform: translateX(-50%) scale(1.3); opacity: 1; }
}

/* Frost state when streak is 0 */
.viq-streak-display.frozen .viq-streak-number {
    background: linear-gradient(135deg, #94a3b8, #cbd5e1);
    -webkit-background-clip: text;
    background-clip: text;
}

.viq-streak-label {
    font-size: 12px;
    font-weight: 700;
    color: #64748B;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.viq-streak-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    transition: all 0.3s ease;
}

.viq-streak-badge.hot {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #92400e;
    box-shadow: 0 2px 8px rgba(245,158,11,0.2);
}

.viq-streak-badge.cold {
    background: #f1f5f9;
    color: #64748B;
}

/* Streak milestone markers */
.viq-streak-milestones {
    display: flex;
    gap: 6px;
    margin-top: 4px;
}

.viq-streak-milestone {
    font-size: 18px;
    opacity: 0.3;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.viq-streak-milestone.achieved {
    opacity: 1;
    animation: milestonePopIn 0.4s ease-out;
}

@keyframes milestonePopIn {
    0% { transform: scale(0); }
    60% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

/* Goals Widget */
.viq-goals-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
}

.viq-goal-ring-row {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex: 1;
    align-items: center;
}

.viq-goal-item {
    text-align: center;
}

.viq-goal-ring {
    position: relative;
    width: 100px;
    height: 100px;
}

.viq-goal-ring svg {
    transform: rotate(-90deg);
}

.viq-goal-ring .ring-bg {
    fill: none;
    stroke: #e5e7eb;
    stroke-width: 8;
}

.viq-goal-ring .ring-fill {
    fill: none;
    stroke-width: 8;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.8s ease, stroke 0.4s ease;
}

.viq-goal-ring .ring-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 18px;
    font-weight: 700;
    color: #1E293B;
}

.viq-goal-label {
    margin-top: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #64748B;
    line-height: 1.4;
}

.viq-goal-set-row {
    display: flex;
    gap: 10px;
}

.viq-goal-input-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.viq-goal-input-group label {
    font-size: 11px;
    font-weight: 600;
    color: #94A3B8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.viq-goal-input-group input {
    padding: 8px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #1E293B;
    width: 100%;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.viq-goal-input-group input:focus {
    border-color: #3B82F6;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
}

.viq-goal-save-btn {
    padding: 8px 18px;
    border-radius: 8px;
    border: none;
    background: linear-gradient(135deg, #3B82F6, #1D4ED8);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    align-self: flex-end;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    font-family: inherit;
    box-shadow: 0 2px 6px rgba(59,130,246,0.3);
}

.viq-goal-save-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59,130,246,0.4);
}

.viq-goal-save-btn:active {
    transform: translateY(0);
}

.viq-goal-save-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Call Log Widget */
.viq-call-log-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
}

.viq-call-log-form .full-width {
    grid-column: 1 / -1;
}

.viq-call-log-form input,
.viq-call-log-form select,
.viq-call-log-form textarea {
    padding: 8px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 13px;
    color: #1E293B;
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s ease;
}

.viq-call-log-form input:focus,
.viq-call-log-form select:focus,
.viq-call-log-form textarea:focus {
    border-color: #3B82F6;
}

.viq-call-log-form textarea {
    resize: vertical;
    min-height: 50px;
}

.viq-call-log-submit {
    padding: 8px 16px;
    border-radius: 6px;
    border: none;
    background: linear-gradient(135deg, #3B82F6, #1D4ED8);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: transform 0.15s ease;
}

.viq-call-log-submit:hover {
    transform: translateY(-1px);
}

.viq-call-log-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.viq-call-log-table th {
    text-align: left;
    padding: 8px 10px;
    font-weight: 600;
    color: #94A3B8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 10px;
    border-bottom: 1px solid #e5e7eb;
}

.viq-call-log-table td {
    padding: 8px 10px;
    color: #374151;
    border-bottom: 1px solid #f3f4f6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}

.viq-call-log-table tr:hover td {
    background: #f9fafb;
}

/* Disposition badges */
.viq-disp-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.viq-disp-badge.sold { background: #dcfce7; color: #166534; }
.viq-disp-badge.interested, .viq-disp-badge.appointment_set { background: #dbeafe; color: #1e40af; }
.viq-disp-badge.callback { background: #fef3c7; color: #92400e; }
.viq-disp-badge.no_answer, .viq-disp-badge.voicemail { background: #f1f5f9; color: #475569; }
.viq-disp-badge.not_interested, .viq-disp-badge.hung_up { background: #fef2f2; color: #991b1b; }
.viq-disp-badge.do_not_call, .viq-disp-badge.wrong_number { background: #fef2f2; color: #991b1b; }

/* Dial Stats Widget */
.viq-dial-stats-row {
    display: flex;
    gap: 12px;
    margin-bottom: 14px;
}

.viq-dial-stat-card {
    flex: 1;
    background: #f9fafb;
    border-radius: 10px;
    padding: 14px;
    text-align: center;
    border: 1px solid #f3f4f6;
}

.viq-dial-stat-card .ds-value {
    font-size: 28px;
    font-weight: 700;
    color: #1E293B;
    line-height: 1;
}

.viq-dial-stat-card .ds-label {
    font-size: 11px;
    color: #94A3B8;
    margin-top: 4px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.viq-dial-chart {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 60px;
    margin-top: 8px;
}

.viq-dial-bar {
    flex: 1;
    background: linear-gradient(to top, #3B82F6, #60a5fa);
    border-radius: 3px 3px 0 0;
    min-height: 4px;
    transition: height 0.5s ease;
    position: relative;
}

.viq-dial-bar-label {
    position: absolute;
    bottom: -16px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 9px;
    color: #94A3B8;
    white-space: nowrap;
}

/* Leaderboard Widget — Enhanced */
.viq-lb-widget-row {
    display: flex;
    align-items: center;
    padding: 10px 8px;
    border-bottom: 1px solid #f3f4f6;
    gap: 10px;
    border-radius: 8px;
    transition: background 0.15s ease;
    margin: 0 -8px;
}

.viq-lb-widget-row:hover {
    background: #f8fafc;
}

.viq-lb-widget-row:last-child {
    border-bottom: none;
}

/* Highlight the current agent's row */
.viq-lb-widget-row.is-me-row {
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border: 1px solid #bfdbfe;
    border-bottom: 1px solid #bfdbfe;
    box-shadow: 0 2px 8px rgba(59,130,246,0.1);
}

.viq-lb-widget-rank {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
    background: #f1f5f9;
    color: #64748B;
}

.viq-lb-widget-rank.gold { background: linear-gradient(135deg, #fef3c7, #fde68a); color: #92400e; box-shadow: 0 2px 6px rgba(245,158,11,0.2); }
.viq-lb-widget-rank.silver { background: linear-gradient(135deg, #f1f5f9, #e2e8f0); color: #475569; }
.viq-lb-widget-rank.bronze { background: linear-gradient(135deg, #fed7aa, #fdba74); color: #9a3412; }

/* Medal emoji for top 3 */
.viq-lb-medal {
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
}

.viq-lb-widget-name {
    font-size: 13px;
    font-weight: 600;
    color: #1E293B;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.viq-lb-widget-name.is-me {
    color: #3B82F6;
    font-weight: 700;
}

.viq-lb-widget-name .you-tag {
    font-size: 10px;
    font-weight: 700;
    color: #3B82F6;
    background: #EFF6FF;
    padding: 1px 6px;
    border-radius: 6px;
    margin-left: 4px;
}

.viq-lb-widget-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.viq-lb-widget-stats {
    text-align: right;
    flex-shrink: 0;
}

.viq-lb-widget-ap {
    font-size: 13px;
    font-weight: 700;
    color: #10b981;
    white-space: nowrap;
}

.viq-lb-widget-sales {
    font-size: 11px;
    color: #94A3B8;
    white-space: nowrap;
}

/* Gap to next rank */
.viq-lb-gap {
    font-size: 10px;
    color: #F59E0B;
    font-weight: 600;
    margin-top: 1px;
}

/* Team total footer */
.viq-lb-footer {
    text-align: center;
    font-size: 11px;
    color: #94A3B8;
    padding: 8px 0 2px;
    border-top: 1px solid #f1f5f9;
    margin-top: 4px;
}

.viq-lb-footer strong {
    color: #1E293B;
}

/* Recent Sales Widget — Enhanced */
.viq-recent-sale-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 8px;
    border-bottom: 1px solid #f3f4f6;
    border-radius: 8px;
    margin: 0 -8px;
    transition: background 0.15s ease;
    position: relative;
}

.viq-recent-sale-item:hover {
    background: #f0fdf4;
}

.viq-recent-sale-item:last-child {
    border-bottom: none;
}

/* Left color accent bar */
.viq-recent-sale-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 25%;
    bottom: 25%;
    width: 3px;
    border-radius: 2px;
    background: #10b981;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.viq-recent-sale-item:hover::before {
    opacity: 1;
}

.viq-recent-sale-item .sale-name {
    font-size: 13px;
    font-weight: 700;
    color: #1E293B;
}

.viq-recent-sale-item .sale-carrier {
    font-size: 11px;
    color: #94A3B8;
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.viq-recent-sale-item .sale-product-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    background: #dbeafe;
    color: #1e40af;
}

.viq-recent-sale-item .sale-ap {
    font-size: 15px;
    font-weight: 800;
    color: #10b981;
    text-align: right;
}

.viq-recent-sale-item .sale-time {
    font-size: 10px;
    color: #94A3B8;
    text-align: right;
    margin-top: 2px;
}

/* Loading state */
.viq-widget-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #94A3B8;
    font-size: 13px;
    gap: 8px;
}

.viq-widget-loading .spinner {
    width: 18px;
    height: 18px;
    border: 2px solid #e5e7eb;
    border-top-color: #3B82F6;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* Empty state */
.viq-widget-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #94A3B8;
    font-size: 13px;
    gap: 8px;
    text-align: center;
    padding: 20px;
}

.viq-widget-empty .empty-icon {
    font-size: 36px;
    opacity: 0.4;
}

/* ============================================================================
   Log Sale Widget — embedded form style
   ============================================================================ */

.viq-logsale-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 100%;
}

.viq-logsale-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.viq-logsale-form input,
.viq-logsale-form select {
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 13px;
    color: #1E293B;
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    background: #fff;
}

.viq-logsale-form input:focus,
.viq-logsale-form select:focus {
    border-color: #3B82F6;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
}

.viq-logsale-form input[required] {
    border-left: 3px solid #3B82F6;
}

.viq-logsale-form input[required]:focus {
    border-left-color: #2563EB;
}

.viq-logsale-form input::placeholder {
    color: #94A3B8;
}

.viq-logsale-form input[type="date"] {
    color: #64748B;
    font-size: 12px;
}

.viq-logsale-form .form-row.full input {
    grid-column: 1 / -1;
}

.viq-logsale-submit {
    padding: 12px 20px;
    border-radius: 10px;
    border: none;
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 2px 8px rgba(16,185,129,0.3);
    width: 100%;
    letter-spacing: 0.3px;
    margin-top: 4px;
}

.viq-logsale-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(16,185,129,0.4);
}

.viq-logsale-submit:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(16,185,129,0.3);
}

.viq-logsale-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.viq-logsale-message {
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    display: none;
    animation: slideInUp 0.3s ease;
}

.viq-logsale-message.success {
    background: linear-gradient(135deg, #dcfce7, #bbf7d0);
    color: #166534;
    display: block;
    border: 1px solid #86efac;
}

.viq-logsale-message.error {
    background: linear-gradient(135deg, #fef2f2, #fecaca);
    color: #991b1b;
    display: block;
    border: 1px solid #fca5a5;
}

/* =================================================================
   NEW WIDGET STYLES — 22 additional widget types
   ================================================================= */

/* --- Shared: Mini Stats Row --- */
.viq-stat-row { display: flex; gap: 8px; flex-wrap: wrap; }
.viq-mini-stat { flex: 1; min-width: 60px; text-align: center; background: #f8fafc; border-radius: 8px; padding: 8px 4px; }
.viq-mini-stat .ms-value { font-size: 18px; font-weight: 700; color: #1E293B; }
.viq-mini-stat .ms-label { font-size: 10px; color: #94A3B8; text-transform: uppercase; margin-top: 2px; }

/* --- Shared: Bar Chart Rows --- */
.viq-bar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.viq-bar-row .bar-label { font-size: 12px; color: #64748B; width: 80px; flex-shrink: 0; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.viq-bar-row .bar-track { flex: 1; height: 18px; background: #f1f5f9; border-radius: 4px; overflow: hidden; }
.viq-bar-row .bar-fill { height: 100%; border-radius: 4px; transition: width 0.5s ease; }
.viq-bar-row .bar-value { font-size: 12px; font-weight: 600; color: #1E293B; min-width: 50px; text-align: right; }

/* --- Shared: Badges --- */
.viq-badge { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 11px; font-weight: 600; text-transform: capitalize; }
.viq-badge.sold { background: #dcfce7; color: #166534; }
.viq-badge.failed { background: #fef2f2; color: #991b1b; }
.viq-badge.pending { background: #fffbeb; color: #92400e; }
.viq-badge.new { background: #dbeafe; color: #1e40af; }
.viq-badge.contacted { background: #fef3c7; color: #92400e; }

/* --- Shared: Simple Table --- */
.viq-simple-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.viq-simple-table th { text-align: left; color: #94A3B8; font-weight: 500; font-size: 11px; text-transform: uppercase; padding: 6px 8px; border-bottom: 1px solid #e2e8f0; }
.viq-simple-table td { padding: 6px 8px; color: #1E293B; border-bottom: 1px solid #f1f5f9; }
.viq-simple-table tr:last-child td { border-bottom: none; }

/* --- Shared: Text Muted --- */
.viq-text-muted { font-size: 12px; color: #94A3B8; }

/* --- Shared: Widget Form Elements --- */
.viq-widget-btn { display: inline-flex; align-items: center; gap: 4px; padding: 8px 16px; background: linear-gradient(135deg, #3B82F6, #2563EB); color: #fff; border: none; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 600; transition: transform 0.15s; }
.viq-widget-btn:hover { transform: scale(1.02); }
.viq-widget-btn-sm { display: inline-flex; align-items: center; gap: 2px; padding: 4px 10px; background: #f1f5f9; color: #475569; border: none; border-radius: 6px; cursor: pointer; font-size: 12px; transition: background 0.15s; }
.viq-widget-btn-sm:hover { background: #e2e8f0; }
.viq-widget-btn-xs { padding: 3px 6px; background: #f1f5f9; border: none; border-radius: 4px; cursor: pointer; font-size: 12px; }
.viq-widget-btn-xs:hover { background: #e2e8f0; }

/* --- widget-section-title --- */
.widget-section-title { font-size: 11px; font-weight: 600; text-transform: uppercase; color: #94A3B8; letter-spacing: 0.5px; margin: 10px 0 6px; }

/* --- bg-yellow for notes widget icon --- */
.widget-icon.bg-yellow, .drawer-item-icon.bg-yellow, .qa-icon.bg-yellow { background: linear-gradient(135deg, #F59E0B, #D97706) !important; }

/* --- Presentation Tracker --- */
.viq-pres-form { margin-top: 8px; }
.viq-pres-item { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid #f1f5f9; }
.viq-fail-reason { display: flex; justify-content: space-between; padding: 4px 0; font-size: 12px; color: #64748B; }
.viq-fail-reason .fr-count { font-weight: 600; color: #EF4444; }

/* --- Referral Pipeline --- */
.viq-ref-form { margin-top: 8px; }
.viq-ref-item { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid #f1f5f9; }
.viq-ref-actions { display: flex; gap: 4px; margin-top: 4px; }

/* --- Income Calculator --- */
.viq-income-override { text-align: center; font-size: 13px; color: #64748B; margin-bottom: 8px; padding: 6px; background: #f8fafc; border-radius: 8px; }

/* --- Pipeline Funnel --- */
.viq-funnel-stage { margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
.viq-funnel-stage .funnel-bar { padding: 6px 12px; border-radius: 6px; color: #fff; font-weight: 700; font-size: 14px; text-align: center; transition: width 0.5s ease; }
.viq-funnel-stage .funnel-label { font-size: 12px; color: #64748B; min-width: 70px; }

/* --- Follow-ups --- */
.viq-followup-form { margin-bottom: 8px; }
.viq-followup-item { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid #f1f5f9; }
.viq-followup-item.overdue { background: #fef2f2; padding: 8px; border-radius: 6px; margin-bottom: 4px; border-bottom: none; }

/* --- Daily Planner --- */
.viq-planner-header { font-size: 14px; font-weight: 600; color: #1E293B; padding-bottom: 8px; border-bottom: 1px solid #e2e8f0; margin-bottom: 8px; }
.viq-planner-input { display: flex; gap: 6px; margin-bottom: 8px; }
.viq-planner-input input { flex: 1; padding: 6px 10px; border: 1px solid #e2e8f0; border-radius: 6px; font-size: 13px; }
.viq-planner-task { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid #f8fafc; font-size: 13px; }
.viq-planner-task.done span { text-decoration: line-through; color: #94A3B8; }
.viq-planner-task input[type="checkbox"] { width: 16px; height: 16px; accent-color: #3B82F6; cursor: pointer; }

/* --- Quick Notes --- */
.viq-notes-toolbar { margin-bottom: 8px; }
.viq-notes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.viq-note-card { border-radius: 8px; padding: 10px; min-height: 60px; position: relative; font-size: 12px; word-break: break-word; }
.viq-note-card.yellow { background: #fef9c3; color: #713f12; }
.viq-note-card.blue { background: #dbeafe; color: #1e40af; }
.viq-note-card.green { background: #dcfce7; color: #166534; }
.viq-note-card.pink { background: #fce7f3; color: #9d174d; }
.viq-note-card .note-actions { position: absolute; top: 4px; right: 4px; display: flex; gap: 2px; }
.viq-note-card .note-delete { border: none; background: none; cursor: pointer; opacity: 0.4; padding: 0; }
.viq-note-card:hover .note-delete { opacity: 1; }
.viq-note-card .note-content { margin-top: 4px; line-height: 1.4; }

/* --- Live Clock --- */
.viq-clock-container { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; padding: 10px; }
.viq-clock-time { font-size: 36px; font-weight: 700; color: #1E293B; letter-spacing: 1px; font-variant-numeric: tabular-nums; }
.viq-clock-date { font-size: 13px; color: #64748B; margin-top: 4px; }

/* --- Calendar Heatmap --- */
.viq-heatmap-grid { display: flex; flex-wrap: wrap; gap: 2px; }
.heatmap-cell { width: 12px; height: 12px; border-radius: 2px; transition: background 0.2s; }
.heatmap-cell.level-0 { background: #f1f5f9; }
.heatmap-cell.level-1 { background: #bbf7d0; }
.heatmap-cell.level-2 { background: #4ade80; }
.heatmap-cell.level-3 { background: #16a34a; }
.heatmap-cell.level-4 { background: #15803d; }
.heatmap-legend { display: flex; align-items: center; gap: 4px; margin-top: 8px; font-size: 10px; color: #94A3B8; }
.heatmap-legend .heatmap-cell { width: 10px; height: 10px; }

/* --- Close Rate Ring --- */
.viq-close-rate-ring { display: flex; justify-content: center; position: relative; }
.viq-close-rate-ring svg { transform: rotate(-90deg); }
.viq-close-rate-ring .ring-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

/* --- Activity Feed --- */
.viq-activity-feed { overflow: hidden; }
.viq-feed-item { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid #f1f5f9; }
.viq-feed-item .feed-icon { font-size: 18px; flex-shrink: 0; }
.viq-feed-item .feed-text { font-size: 13px; color: #1E293B; }
.viq-feed-item .feed-time { font-size: 11px; color: #94A3B8; margin-top: 2px; }

/* --- Motivation Quote --- */
.viq-quote { text-align: center; padding: 12px; }
.viq-quote .quote-text { font-size: 15px; font-style: italic; color: #475569; line-height: 1.5; }
.viq-quote .quote-author { font-size: 12px; color: #94A3B8; margin-top: 8px; }

/* --- Appointments --- */
.viq-appt-item { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid #f1f5f9; align-items: center; }
.viq-appt-item .appt-date { background: #f1f5f9; border-radius: 8px; padding: 6px 10px; text-align: center; font-size: 13px; font-weight: 600; color: #1E293B; min-width: 60px; }
.viq-appt-item .appt-info { font-size: 13px; color: #1E293B; }

/* --- Monthly Comparison Bars --- */
.viq-month-bars { display: flex; justify-content: space-between; align-items: flex-end; height: 120px; gap: 4px; padding: 8px 0; }
.month-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; }
.month-bar { background: linear-gradient(135deg, #3B82F6, #2563EB); border-radius: 4px 4px 0 0; width: 100%; max-width: 40px; position: relative; transition: height 0.5s ease; min-height: 4px; }
.month-bar span { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); font-size: 10px; font-weight: 600; color: #1E293B; white-space: nowrap; }
.month-bar-label { font-size: 11px; font-weight: 600; color: #64748B; margin-top: 4px; }
.month-bar-sales { font-size: 10px; color: #94A3B8; }

/* --- Team Stats + Contest Items --- */
.viq-team-header { margin-bottom: 8px; }
.viq-contest-item { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid #f1f5f9; }

/* ============================================================================
   SHARED WIDGET FORM ELEMENTS — Phase 4 Consistency
   ============================================================================ */

/* Universal widget input — use on standalone inputs in widgets */
.viq-widget-input {
    padding: 6px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 12px;
    color: #1E293B;
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s ease;
}
.viq-widget-input:focus { border-color: #3B82F6; }
.viq-widget-input::placeholder { color: #94A3B8; }

/* Primary action button — green gradient for "Add" / "Log" / "Save" actions */
.viq-widget-btn-primary {
    width: 100%;
    padding: 7px 0;
    border-radius: 6px;
    border: none;
    background: linear-gradient(135deg, #22C55E, #16A34A);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.viq-widget-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(34,197,94,0.3);
}

/* Inline data table — for ROI tables, team stats, etc inside widgets */
.viq-widget-data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.viq-widget-data-table th {
    text-align: left;
    padding: 4px 6px;
    color: #64748b;
    font-weight: 500;
    font-size: 11px;
    border-bottom: 1px solid #e2e8f0;
}
.viq-widget-data-table td {
    padding: 5px 6px;
    color: #1E293B;
    border-bottom: 1px solid #f1f5f9;
}
.viq-widget-data-table tr:last-child td { border-bottom: none; }
.viq-widget-data-table tr:hover td { background: #f9fafb; }

/* ============================================================================
   ENHANCED WIDGET ANIMATIONS & GLOBAL POLISH — Batch 1-3 Upgrades
   ============================================================================ */

/* Smooth entrance animation for widget data */
@keyframes slideInUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Quick Actions — premium gradient buttons */
.viq-quick-action-btn {
    background: linear-gradient(135deg, #f9fafb 0%, #f1f5f9 100%) !important;
    border: 1px solid #e2e8f0 !important;
}

.viq-quick-action-btn:hover {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
    border-color: #93c5fd !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(59,130,246,0.15) !important;
}

.viq-quick-action-btn .qa-icon {
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* Follow-up items — priority colors */
.viq-followup-item {
    transition: background 0.15s ease;
    border-radius: 8px;
    padding: 10px !important;
    margin-bottom: 4px;
}

.viq-followup-item:hover {
    background: #f8fafc;
}

.viq-followup-item.overdue {
    background: linear-gradient(135deg, #fef2f2, #fee2e2) !important;
    border: 1px solid #fecaca;
    animation: fadeIn 0.3s ease;
}

/* Notes — premium card design */
.viq-note-card {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.viq-note-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

/* Planner task — hover effect */
.viq-planner-task {
    transition: background 0.15s ease;
    border-radius: 6px;
    padding: 8px !important;
}

.viq-planner-task:hover {
    background: #f8fafc;
}

.viq-planner-task.done {
    opacity: 0.6;
}

/* Referral items — hover effect */
.viq-ref-item {
    transition: background 0.15s ease;
    border-radius: 8px;
    padding: 10px !important;
}

.viq-ref-item:hover {
    background: #f8fafc;
}

/* Presentation items — hover effect */
.viq-pres-item {
    transition: background 0.15s ease;
    border-radius: 8px;
    padding: 10px !important;
}

.viq-pres-item:hover {
    background: #f8fafc;
}

/* Donut chart animation */
.viq-chart-body svg circle {
    transition: stroke-dasharray 0.8s ease, stroke-dashoffset 0.8s ease;
}

/* Widget data table — enhanced hover */
.viq-widget-data-table tr {
    transition: background 0.15s ease;
}

.viq-widget-data-table tr:hover td {
    background: #f0f7ff !important;
}

/* Form inputs — enhanced focus with blue ring */
.viq-widget-body input:focus,
.viq-widget-body select:focus,
.viq-widget-body textarea:focus {
    border-color: #3B82F6 !important;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.1) !important;
    outline: none;
}

/* Submit buttons — ripple effect prep */
.viq-widget-btn,
.viq-widget-btn-primary,
.viq-logsale-submit,
.viq-call-log-submit,
.viq-goal-save-btn {
    position: relative;
    overflow: hidden;
}

/* Stats responsive layout */
@media (max-width: 768px) {
    .viq-stats-row-secondary {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .viq-stat-mini.stat-primary .stat-value {
        font-size: 22px;
    }
}

/* Widget body scrollbar — subtle custom */
.viq-widget-body::-webkit-scrollbar {
    width: 4px;
}

.viq-widget-body::-webkit-scrollbar-track {
    background: transparent;
}

.viq-widget-body::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 2px;
}

.viq-widget-body::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}