/* ============================================================================
   Sozuri v3 App Stylesheet — single source of truth for the v3 surface.
   Consolidates: layouts/v3-dashboard inline <style> (section 1),
   layouts/v3-sidebar inline <style> (section 2), design-refresh.css (section 3).
   Order preserved from the original cascade. Tokens: see :root below.
   Design direction: Refined Indigo — docs/design/DESIGN-SYSTEM.md
   ============================================================================ */

/* ========== SECTION 1: core layout, chrome, components (was v3-dashboard inline) ========== */
        /* ===== V3 LAYOUT FOUNDATION ===== */

        /* CSS Reset & Base */
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        html, body {
            height: 100%;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            text-rendering: optimizeLegibility;
            font-feature-settings: "liga", "kern";
        }

        /* ==========================================================================
           DESIGN TOKENS — Refined Indigo (docs/design/DESIGN-SYSTEM.md)
           All new CSS MUST use these. Never hardcode a hex that has a token.
           ========================================================================== */
        :root {
            /* Surfaces & text (light theme, default) */
            --bg-primary: #ffffff;
            --bg-secondary: #f9fafb;
            --bg-card: #ffffff;
            --bg-hover: #f3f4f6;
            --border-color: #e5e7eb;
            --text-primary: #111827;
            --text-secondary: #6b7280;
            --text-muted: #9ca3af;

            /* Brand */
            --accent-primary: #6366f1;
            --accent-primary-rgb: 99, 102, 241;
            --accent-primary-hover: #4f46e5;
            --accent-primary-active: #4338ca;
            --accent-primary-soft: #eef2ff;   /* tinted bg for selected/soft states */
            --accent-secondary: #8b5cf6;
            --gradient-primary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); /* marketing/brand moments only */

            /* Semantic status — the ONLY status colors allowed */
            --success: #059669;
            --success-bg: #ecfdf5;
            --success-border: #a7f3d0;
            --warning: #d97706;
            --warning-bg: #fffbeb;
            --warning-border: #fde68a;
            --danger: #dc2626;
            --danger-bg: #fef2f2;
            --danger-border: #fecaca;
            --info: #0284c7;
            --info-bg: #f0f9ff;
            --info-border: #bae6fd;
            --neutral: #6b7280;
            --neutral-bg: #f3f4f6;
            --neutral-border: #e5e7eb;
            --accent-success: var(--success); /* legacy alias (was referenced but undefined) */

            /* Radius scale */
            --radius-sm: 4px;
            --radius-md: 6px;    /* controls: buttons, inputs, selects */
            --radius-lg: 8px;    /* containers: cards, modals, tables */
            --radius-pill: 999px;

            /* Elevation */
            --shadow: rgba(0, 0, 0, 0.06);
            --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
            --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
            --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
            --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
            --focus-ring: 0 0 0 3px rgba(99, 102, 241, 0.15);

            /* Motion */
            --duration-fast: 0.15s;
            --duration-base: 0.2s;
            --ease: cubic-bezier(0.4, 0, 0.2, 1);

            /* Type scale (rem) — 12 / 13 / 15 / 16 / 18 / 22 / 30 px */
            --text-xs: 0.75rem;
            --text-sm: 0.8125rem;
            --text-base: 0.9375rem;
            --text-md: 1rem;
            --text-lg: 1.125rem;
            --text-xl: 1.375rem;
            --text-2xl: 1.875rem;

            /* Z-index scale */
            --z-dropdown: 900;
            --z-overlay: 998;
            --z-navbar: 1000;
            --z-sidebar: 1100;
            --z-toggle: 1002;
            --z-modal: 1050;
            --z-toast: 1200;

            /* Layout dimensions */
            --navbar-height: 56px;
            --sidebar-width: 240px;
            --sidebar-collapsed-width: 64px;
        }

        /* Dark Theme */
        [data-theme="dark"] {
            --bg-primary: #0f172a;
            --bg-secondary: #1e293b;
            --bg-card: #1e293b;
            --bg-hover: #334155;
            --border-color: #334155;
            --text-primary: #f8fafc;
            --text-secondary: #94a3b8;
            --text-muted: #64748b;
            --accent-primary-soft: rgba(99, 102, 241, 0.15);
            --success-bg: rgba(5, 150, 105, 0.15);
            --success-border: rgba(5, 150, 105, 0.35);
            --success: #34d399;
            --warning-bg: rgba(217, 119, 6, 0.15);
            --warning-border: rgba(217, 119, 6, 0.35);
            --warning: #fbbf24;
            --danger-bg: rgba(220, 38, 38, 0.15);
            --danger-border: rgba(220, 38, 38, 0.4);
            --danger: #f87171;
            --info-bg: rgba(2, 132, 199, 0.15);
            --info-border: rgba(2, 132, 199, 0.35);
            --info: #38bdf8;
            --neutral: #94a3b8;
            --neutral-bg: rgba(148, 163, 184, 0.12);
            --neutral-border: rgba(148, 163, 184, 0.3);
            --shadow: rgba(0, 0, 0, 0.25);
            --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
            --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
            --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
            --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
        }

        /* Layout Container */
        .v3-layout {
            background: var(--bg-primary);
            color: var(--text-primary);
            min-height: 100vh;
        }

        /* ===== TOP NAVBAR ===== */
        .v3-navbar {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: var(--navbar-height);
            background: var(--bg-card);
            border-bottom: 1px solid var(--border-color);
            z-index: var(--z-navbar);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .navbar-container {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            height: 100%;
            padding: 0 1.5rem;
        }

        /* Floating Sidebar Toggle Button */
        .floating-sidebar-toggle {
            position: fixed;
            top: 12px;
            left: 250px;
            width: 32px;
            height: 32px;
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 6px;
            color: var(--text-secondary);
            cursor: pointer;
            z-index: var(--z-toggle);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.15s ease;
            box-shadow: 0 1px 3px var(--shadow);
        }

        .floating-sidebar-toggle:hover {
            background: var(--bg-hover);
        }

        /* Adjust toggle position when sidebar is collapsed */
        .sidebar-collapsed .floating-sidebar-toggle {
            left: 74px;
        }

        .navbar-items {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .theme-toggle {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            background: var(--bg-secondary);
            border: 1px solid var(--border-color);
            border-radius: 6px;
            color: var(--text-secondary);
            cursor: pointer;
            transition: background 0.15s ease;
        }

        .theme-toggle:hover {
            background: var(--bg-hover);
        }

        /* Help Toggle Button */
        .help-toggle {
            position: relative;
            width: 32px;
            height: 32px;
            border: 1px solid var(--border-color);
            background: var(--bg-secondary);
            color: var(--text-secondary);
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: background 0.15s ease;
        }

        .help-toggle:hover {
            background: var(--bg-hover);
            color: var(--accent-primary);
        }

        .help-badge {
            position: absolute;
            top: -5px;
            right: -5px;
            background: var(--accent-primary);
            color: white;
            font-size: 10px;
            font-weight: bold;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            animation: pulse 2s infinite;
        }


        /* Help Modal Styles */
        .help-section {
            margin-bottom: 2rem;
            padding: 1.5rem;
            background: var(--bg-secondary);
            border-radius: 12px;
            border: 1px solid var(--border-color);
        }

        .help-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            background: var(--accent-primary);
            color: white;
            border-radius: 50%;
            margin-bottom: 1rem;
            font-size: 1.2rem;
        }

        .help-section h6 {
            color: var(--text-primary);
            font-weight: 600;
            margin-bottom: 0.75rem;
            font-size: 1.1rem;
        }

        .help-section p {
            color: var(--text-secondary);
            line-height: 1.6;
            margin-bottom: 1rem;
        }

        .help-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .help-list li {
            padding: 0.5rem 0;
            color: var(--text-secondary);
            position: relative;
            padding-left: 1.5rem;
        }

        .help-list li:before {
            content: "✓";
            position: absolute;
            left: 0;
            color: var(--accent-primary);
            font-weight: bold;
        }

        .tips-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1rem;
            margin-top: 1rem;
        }

        .tip-item {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 1rem;
            background: var(--bg-primary);
            border-radius: 8px;
            border: 1px solid var(--border-color);
        }

        .tip-item i {
            color: var(--accent-primary);
            font-size: 1.1rem;
            flex-shrink: 0;
        }

        .tip-item span {
            color: var(--text-secondary);
            font-size: 0.9rem;
            line-height: 1.4;
        }

        .faq-item {
            margin-bottom: 1.5rem;
            padding: 1rem;
            background: var(--bg-primary);
            border-radius: 8px;
            border-left: 4px solid var(--accent-primary);
        }

        .faq-item strong {
            color: var(--text-primary);
            display: block;
            margin-bottom: 0.5rem;
        }

        .faq-item p {
            margin: 0;
            color: var(--text-secondary);
        }

        .support-section {
            background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
            color: white;
        }

        .support-section .help-icon {
            background: rgba(255, 255, 255, 0.2);
        }

        .support-section h6,
        .support-section p {
            color: white;
        }

        .support-options {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
            margin-top: 1rem;
        }

        .support-btn {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.75rem 1rem;
            background: rgba(255, 255, 255, 0.1);
            color: white;
            text-decoration: none;
            border-radius: 8px;
            transition: all 0.3s ease;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .support-btn:hover {
            background: rgba(255, 255, 255, 0.2);
            color: white;
            text-decoration: none;
            transform: translateY(-2px);
        }

        .support-btn.whatsapp:hover {
            background: #25D366;
        }

        .support-btn.email:hover {
            background: #EA4335;
        }

        .support-btn.ticket:hover {
            background: var(--accent-secondary);
        }

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

            .help-section {
                padding: 1rem;
            }
        }

        .project-switcher {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.5rem 1rem;
            background: var(--bg-secondary);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            color: var(--text-primary);
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .project-switcher:hover {
            background: var(--bg-hover);
            color: var(--text-primary);
            text-decoration: none;
        }

        .user-profile {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            background: var(--bg-secondary);
            border: 1px solid var(--border-color);
            border-radius: 50%;
            color: var(--text-secondary);
            cursor: pointer;
            transition: background 0.15s ease;
        }

        .user-profile:hover {
            background: var(--bg-hover);
        }

        /* Dropdown Styles */
        .dropdown-menu {
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
            padding: 0.375rem 0;
            margin-top: 0.25rem;
        }

        [data-theme="dark"] .dropdown-menu {
            background: #1e293b;
            border: 1px solid #334155;
        }

        [data-theme="light"] .dropdown-menu {
            background: #ffffff;
        }

        .dropdown-item {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.75rem 1rem;
            color: var(--text-primary);
            text-decoration: none;
            transition: all 0.3s ease;
        }

        .dropdown-item:hover {
            background: var(--bg-hover);
            color: var(--accent-primary);
            text-decoration: none;
        }

        .user-info {
            padding: 1rem;
            border-bottom: 1px solid var(--border-color);
        }

        .user-info h6 {
            color: var(--text-primary);
            margin: 0;
            font-weight: 600;
        }

        .user-info small {
            color: var(--text-secondary);
        }

        .dropdown-header {
            padding: 0.5rem 1rem;
            color: var(--text-muted);
            font-weight: 600;
            text-transform: uppercase;
            font-size: 0.75rem;
            letter-spacing: 0.05em;
        }

        /* ===== SIDEBAR ===== */
        .v3-sidebar {
            position: fixed;
            top: 0;
            left: 0;
            width: var(--sidebar-width);
            height: 100vh;
            background: var(--bg-card);
            border-right: 1px solid var(--border-color);
            z-index: var(--z-sidebar);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            overflow-y: auto;
            scrollbar-width: thin;
            scrollbar-color: var(--border-color) transparent;
        }

        .v3-sidebar::-webkit-scrollbar {
            width: 4px;
        }

        .v3-sidebar::-webkit-scrollbar-track {
            background: transparent;
        }

        .v3-sidebar::-webkit-scrollbar-thumb {
            background: var(--gradient-primary);
            border-radius: 2px;
        }

        /* Sidebar Header */
        .sidebar-header {
            height: var(--navbar-height);
            display: flex;
            align-items: center;
            padding: 0 1rem;
            border-bottom: 1px solid var(--border-color);
            background: var(--bg-card);
            z-index: 1200;
            position: relative;
        }

        .brand {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            text-decoration: none;
            transition: all 0.3s ease;
            z-index: 1200;
            position: relative;
            backdrop-filter: none;
            justify-content: flex-start; /* Default alignment when expanded */
        }

        /* Expanded state - ensure brand text is visible */
        .v3-sidebar:not(.sidebar-collapsed) .brand {
            gap: 0.75rem;
            justify-content: flex-start;
        }

        .brand-logo {
            width: 32px;
            height: 32px;
            object-fit: contain;
            transition: all 0.3s ease;
            z-index: 1200;
            position: relative;
        }

        /* Light theme logo (default) */
        .brand-logo {
            content: url('../images/sozuri-logo-dark-sm.png');
        }

        /* Dark theme logo */
        [data-theme="dark"] .brand-logo {
            content: url('../images/sozuri-logo-light-sm.png');
        }

        .brand-text {
            font-size: 1rem;
            font-weight: 600;
            transition: all 0.3s ease;
            z-index: 1200;
            position: relative;
            text-shadow: none;
            backdrop-filter: none;
            /* Light theme brand text with gradient color (default) */
            background: var(--gradient-primary);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        /* Dark theme brand text with solid color */
        [data-theme="dark"] .brand-text {
            background: none;
            -webkit-background-clip: unset;
            -webkit-text-fill-color: unset;
            background-clip: unset;
            color: var(--text-primary);
        }

        /* ===== MODALS — dark mode ===== */
        [data-theme="dark"] .modal-content {
            background-color: var(--bg-card) !important;
            border: 1px solid rgba(255, 255, 255, 0.12) !important;
            color: var(--text-primary) !important;
        }

        [data-theme="dark"] .modal-header {
            background-color: var(--bg-secondary) !important;
            border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
        }

        [data-theme="dark"] .modal-footer {
            background-color: var(--bg-secondary) !important;
            border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
        }

        /* All text inside modals */
        [data-theme="dark"] .modal-content *:not(button):not(.btn):not(a):not(i):not(span[class*="badge"]) {
            color: var(--text-primary);
        }

        [data-theme="dark"] .modal-title,
        [data-theme="dark"] .modal-content h1,
        [data-theme="dark"] .modal-content h2,
        [data-theme="dark"] .modal-content h3,
        [data-theme="dark"] .modal-content h4,
        [data-theme="dark"] .modal-content h5,
        [data-theme="dark"] .modal-content h6 {
            color: #ffffff !important;
        }

        [data-theme="dark"] .modal-content p,
        [data-theme="dark"] .modal-content label,
        [data-theme="dark"] .modal-content .form-text,
        [data-theme="dark"] .modal-content small,
        [data-theme="dark"] .modal-content .text-muted {
            color: rgba(255, 255, 255, 0.75) !important;
        }

        /* Inputs, textareas inside modals */
        [data-theme="dark"] .modal-content .form-control,
        [data-theme="dark"] .modal-content input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
        [data-theme="dark"] .modal-content textarea {
            background-color: var(--bg-primary) !important;
            color: var(--text-primary) !important;
            border-color: rgba(255, 255, 255, 0.15) !important;
        }

        [data-theme="dark"] .modal-content .form-control::placeholder,
        [data-theme="dark"] .modal-content input::placeholder,
        [data-theme="dark"] .modal-content textarea::placeholder {
            color: rgba(255, 255, 255, 0.35) !important;
        }

        [data-theme="dark"] .modal-content .form-control:focus,
        [data-theme="dark"] .modal-content input:focus,
        [data-theme="dark"] .modal-content textarea:focus {
            background-color: var(--bg-primary) !important;
            border-color: rgba(99, 102, 241, 0.6) !important;
            box-shadow: 0 0 0 0.2rem rgba(99, 102, 241, 0.15) !important;
        }

        /* Close button */
        [data-theme="dark"] .modal-content .close,
        [data-theme="dark"] .modal-content .futuristic-close {
            color: rgba(255, 255, 255, 0.7) !important;
            text-shadow: none !important;
            opacity: 1 !important;
        }

        [data-theme="dark"] .modal-content .close:hover,
        [data-theme="dark"] .modal-content .futuristic-close:hover {
            color: #ffffff !important;
        }

        /* Select inputs — dark mode */
        [data-theme="dark"] select,
        [data-theme="dark"] .custom-select,
        [data-theme="dark"] .form-control[multiple],
        [data-theme="dark"] .form-select {
            background-color: var(--bg-hover);
            color: var(--text-primary);
            border-color: rgba(255, 255, 255, 0.15);
        }

        [data-theme="dark"] select option,
        [data-theme="dark"] .form-select option {
            background-color: var(--bg-hover);
            color: var(--text-primary);
        }

        [data-theme="dark"] select:focus,
        [data-theme="dark"] .custom-select:focus,
        [data-theme="dark"] .form-select:focus {
            border-color: rgba(255, 255, 255, 0.4);
            box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.08);
        }

        /* Desktop specific fixes for logo visibility */
        @media (min-width: 1200px) {
            .v3-sidebar {
                z-index: 1100 !important;
            }

            .sidebar-header {
                z-index: 1200 !important;
                backdrop-filter: none !important;
                background: var(--bg-card) !important;
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
            }

            .brand {
                z-index: 1200 !important;
                opacity: 1 !important;
                backdrop-filter: none !important;
                background: transparent !important;
            }

            .brand-logo {
                opacity: 1 !important;
                filter: none !important;
                backdrop-filter: none !important;
                z-index: 1200 !important;
            }

            .brand-text {
                opacity: 1 !important;
                backdrop-filter: none !important;
                z-index: 1200 !important;
            }

            /* Ensure collapsed state logo is visible */
            .sidebar-collapsed .brand-logo {
                opacity: 1 !important;
                transform: none !important;
                z-index: 1200 !important;
            }

            .sidebar-collapsed .sidebar-header {
                z-index: 1200 !important;
            }

            /* Remove any backdrop blur from sidebar on desktop */
            .sidebar {
                backdrop-filter: none !important;
            }
        }

        /* Sidebar Navigation */
        .sidebar-nav {
            padding: 1rem 0;
        }

        .nav-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .nav-item {
            margin: 0.125rem 0.75rem;
        }

        .nav-link {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.5rem 0.75rem;
            color: var(--text-secondary);
            text-decoration: none;
            border-radius: 6px;
            transition: background 0.15s ease, color 0.15s ease;
            position: relative;
            overflow: hidden;
            min-height: 36px;
            box-sizing: border-box;
            font-size: 0.875rem;
        }

        .nav-link::before {
            display: none;
        }

        .nav-link:hover,
        .nav-item.active .nav-link {
            color: var(--accent-primary);
            background: var(--bg-hover);
            text-decoration: none;
        }

        .nav-link svg {
            flex-shrink: 0;
            transition: all 0.3s ease;
        }

        .nav-link:hover svg,
        .nav-item.active .nav-link svg {
            color: var(--accent-primary);
        }

        .nav-text {
            font-weight: 400;
            font-size: 0.875rem;
        }

        .nav-badge {
            margin-left: auto;
            padding: 0.125rem 0.4rem;
            background: var(--accent-primary);
            color: white;
            font-size: 0.7rem;
            font-weight: 500;
            border-radius: 10px;
            min-width: 18px;
            text-align: center;
        }

        /* Sidebar section labels — group the nav by intent (Engage / Channels /
           Business / Settings) so one 14-item flat list reads as four short ones. */
        .nav-section {
            margin: 1.1rem 0.75rem 0.3rem;
            padding: 0 0.75rem;
            font-size: 0.65rem;
            font-weight: 600;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--text-secondary);
            opacity: 0.55;
            list-style: none;
        }

        /* On the collapsed rail the label would sit beside no icon and read as a
           stray stub, so it degrades to the hairline that keeps the grouping. */
        .sidebar-collapsed .nav-section {
            font-size: 0;
            margin: 0.75rem 1rem;
            padding: 0;
            border-top: 1px solid var(--border-color);
            opacity: 0.5;
        }

        /* Hint line under a nav label (e.g. "2 Way SMS" / "Shortcode"). */
        .nav-hint {
            display: block;
            font-size: 0.65rem;
            font-weight: 400;
            line-height: 1.2;
            opacity: 0.6;
        }

        .sidebar-collapsed .nav-hint {
            display: none;
        }

        /* Pill on the right of a nav label (e.g. WhatsApp / "New"). Separate from
           `.nav-badge`, which is a count in the accent colour. */
        .nav-tag {
            margin-left: auto;
            padding: 0.1rem 0.4rem;
            font-size: 0.6rem;
            font-weight: 700;
            line-height: 1.4;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            border-radius: 10px;
            white-space: nowrap;
        }

        .nav-tag--new {
            background: rgba(37, 211, 102, 0.16);
            color: #1da851;
            border: 1px solid rgba(37, 211, 102, 0.35);
        }

        /* Amber, not the green of --new: "New" invites a click, "Beta" warns
           the channel is not finished. Same pill so they read as one system. */
        .nav-tag--beta {
            background: rgba(245, 158, 11, 0.16);
            color: #b45309;
            border: 1px solid rgba(245, 158, 11, 0.35);
        }

        [data-theme="dark"] .nav-tag--beta {
            color: #fbbf24;
        }

        /* Same reasoning as `.nav-badge`: `margin-left: auto` would eat the flex
           free space on the collapsed rail and push the icon off-centre. */
        .sidebar-collapsed .nav-tag {
            display: none;
        }

        /* `.nav-divider` has been in the markup since v3 shipped with no rule of
           its own — it rendered as a zero-height <li>. */
        .nav-divider {
            height: 1px;
            margin: 0.85rem 1rem;
            background: var(--border-color);
            list-style: none;
        }

        /* Sidebar Collapsed State */
        .sidebar-collapsed .v3-sidebar {
            width: var(--sidebar-collapsed-width);
        }

        .sidebar-collapsed .brand-text,
        .sidebar-collapsed .nav-text,
        .sidebar-collapsed .nav-badge {
            opacity: 0;
            transform: translateX(-20px);
            transition: all 0.3s ease;
            visibility: hidden;
            width: 0;
            overflow: hidden;
        }

        .sidebar-collapsed .nav-link {
            justify-content: center;
            padding: 0.75rem;
            margin: 0.25rem 0.5rem;
        }

        .sidebar-collapsed .brand {
            justify-content: center;
            gap: 0; /* Remove gap when collapsed */
        }

        .sidebar-collapsed .brand-logo {
            margin: 0;
        }

        /* Ensure brand text is completely hidden when collapsed */
        .sidebar-collapsed .brand-text {
            display: none; /* Completely remove from layout */
        }

        /* Remove the nav badge entirely when collapsed — its `margin-left: auto`
           would otherwise consume the flex free space and push the icon off-center
           (only the "All My Projects" item has a badge). */
        .sidebar-collapsed .nav-badge {
            display: none;
        }

        /* Show brand text when expanded */
        .v3-sidebar:not(.sidebar-collapsed) .brand-text {
            opacity: 1;
            transform: translateX(0);
            visibility: visible;
            width: auto;
            display: block;
            transition: all 0.3s ease;
        }

        /* Ensure icons stay centered and visible when collapsed */
        .sidebar-collapsed .nav-link svg {
            margin: 0;
            flex-shrink: 0;
        }

        .sidebar-collapsed .nav-item {
            margin: 0.25rem 0.5rem;
        }

        /* ===== MAIN CONTENT ===== */
        .v3-main-content {
            margin-top: var(--navbar-height);
            margin-left: var(--sidebar-width);
            padding: 2rem;
            min-height: calc(100vh - var(--navbar-height));
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .sidebar-collapsed .v3-main-content {
            margin-left: var(--sidebar-collapsed-width);
        }

        .content-container {
            max-width: 100%;
        }


        /* ===== MOBILE OVERLAY ===== */
        .mobile-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: var(--z-overlay);
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        }

        .sidebar-mobile-open .mobile-overlay {
            opacity: 1;
            visibility: visible;
        }

        /* ===== RESPONSIVE DESIGN ===== */
        @media (max-width: 1199px) {
            .v3-sidebar {
                transform: translateX(-100%);
                z-index: 1001;
            }

            .sidebar-mobile-open .v3-sidebar {
                transform: translateX(0);
                box-shadow: 4px 0 16px rgba(0,0,0,0.08);
            }

            .v3-main-content {
                margin-left: 0;
            }

            .sidebar-collapsed .v3-main-content {
                margin-left: 0;
            }

            /* Mobile toggle button positioning */
            .floating-sidebar-toggle {
                left: 15px;
                top: 17px;
                width: 32px;
                height: 32px;
            }

            /* When sidebar is open on mobile, position toggle just outside sidebar (like desktop) */
            .sidebar-mobile-open .floating-sidebar-toggle {
                left: 270px;
            }
        }

        @media (max-width: 768px) {
            .navbar-container {
                padding: 0 1rem;
            }

            .v3-main-content {
                padding: 1rem;
            }

            .demo-cards {
                grid-template-columns: 1fr;
                gap: 1rem;
            }
        }

        /* ===== MODAL STYLES ===== */
        .modal-content {
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 16px;
            backdrop-filter: blur(20px);
        }

        .modal-header {
            border-bottom: 1px solid var(--border-color);
        }

        .modal-title {
            color: var(--text-primary);
        }

        .modal-body {
            color: var(--text-primary);
        }

        .modal-footer {
            border-top: 1px solid var(--border-color);
        }

        .btn-primary {
            background: var(--gradient-primary);
            border: none;
            border-radius: 8px;
            padding: 0.5rem 1rem;
            font-weight: 500;
            transition: all 0.3s ease;
        }

        .btn-primary:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px var(--shadow);
        }

        .btn-secondary {
            background: var(--bg-secondary);
            border: 1px solid var(--border-color);
            color: var(--text-primary);
            border-radius: 8px;
            padding: 0.5rem 1rem;
            font-weight: 500;
            transition: all 0.3s ease;
        }

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

        /* ===== FUTURISTIC MODAL STYLES ===== */
        .futuristic-modal .modal-content {
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 20px;
            backdrop-filter: blur(20px);
            box-shadow: 0 25px 50px var(--shadow);
        }

        .futuristic-modal-header {
            background: var(--bg-secondary);
            border-bottom: 1px solid var(--border-color);
            border-radius: 20px 20px 0 0;
            padding: 1.5rem 2rem;
        }

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

        .project-name-highlight {
            background: var(--gradient-primary);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-weight: 700;
        }

        .futuristic-close {
            background: none;
            border: none;
            color: var(--text-secondary);
            font-size: 1.25rem;
            padding: 0.5rem;
            border-radius: 8px;
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .futuristic-close:hover {
            background: var(--bg-hover);
            color: var(--text-primary);
            transform: scale(1.1);
        }

        .futuristic-modal-body {
            padding: 2rem;
        }

        .payment-form-container {
            max-width: 100%;
        }

        .futuristic-form {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }

        .form-section {
            background: var(--bg-secondary);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 1.5rem;
            transition: all 0.3s ease;
        }

        .form-section:hover {
            border-color: var(--accent-primary);
            box-shadow: 0 4px 15px rgba(99, 102, 241, 0.1);
        }

        .futuristic-label {
            display: flex;
            align-items: center;
            color: var(--text-primary);
            font-weight: 600;
            margin-bottom: 1rem;
            font-size: 0.9rem;
        }

        .futuristic-input {
            width: 100%;
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            padding: 0.75rem 1rem;
            color: var(--text-primary);
            font-size: 1rem;
            transition: all 0.3s ease;
        }

        .futuristic-input:focus {
            outline: none;
            border-color: var(--accent-primary);
            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
            background: var(--bg-hover);
        }

        .futuristic-input::placeholder {
            color: var(--text-secondary);
        }

        .form-help {
            color: var(--text-secondary);
            font-size: 0.8rem;
            margin-top: 0.5rem;
            display: block;
        }

        .credit-preview {
            color: var(--accent-success);
            font-weight: 600;
            margin-bottom: 0.5rem;
            min-height: 1.2rem;
        }

        .payment-method-selector {
            display: flex;
            gap: 1rem;
        }

        .futuristic-radio {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            cursor: pointer;
            padding: 0.75rem 1rem;
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            transition: all 0.3s ease;
            flex: 1;
        }

        .futuristic-radio:hover {
            border-color: var(--accent-primary);
            background: var(--bg-hover);
        }

        .futuristic-radio input[type="radio"] {
            display: none;
        }

        .radio-indicator {
            width: 20px;
            height: 20px;
            border: 2px solid var(--border-color);
            border-radius: 50%;
            position: relative;
            transition: all 0.3s ease;
        }

        .futuristic-radio input[type="radio"]:checked + .radio-indicator {
            border-color: var(--accent-primary);
            background: var(--accent-primary);
        }

        .futuristic-radio input[type="radio"]:checked + .radio-indicator::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 8px;
            height: 8px;
            background: white;
            border-radius: 50%;
        }

        .radio-content {
            color: var(--text-primary);
            font-weight: 500;
            display: flex;
            align-items: center;
        }

        .form-actions {
            display: flex;
            justify-content: space-between;
            gap: 1rem;
            padding-top: 1rem;
            border-top: 1px solid var(--border-color);
        }

        .payment-instructions {
            background: var(--bg-secondary);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 1.5rem;
            margin-top: 1.5rem;
        }

        .instructions-header {
            display: flex;
            align-items: center;
            color: var(--text-primary);
            font-weight: 600;
            margin-bottom: 1rem;
            font-size: 1rem;
        }

        .instructions-content {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
        }

        .instruction-step {
            display: flex;
            align-items: center;
            gap: 1rem;
            color: var(--text-secondary);
            font-size: 0.9rem;
        }

        .step-number {
            width: 24px;
            height: 24px;
            background: var(--gradient-primary);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            font-size: 0.8rem;
            flex-shrink: 0;
        }

        .step-text {
            flex: 1;
        }

        /* Responsive modal */
        @media (max-width: 768px) {
            .futuristic-modal-header,
            .futuristic-modal-body {
                padding: 1rem;
            }

            .form-actions {
                flex-direction: column;
            }

            .futuristic-btn {
                width: 100%;
                justify-content: center;
            }
        }

        /* ===== V2 DASHBOARD CONTENT STYLES ===== */

        /* Content Container Adjustments */
        .content-container {
            padding: 0;
            margin: 0;
        }

        /* Dashboard Header */
        .dashboard-header {
            background: var(--bg-card);
            backdrop-filter: blur(20px);
            border: 1px solid var(--border-color);
            border-radius: 20px;
            padding: 2rem;
            margin-bottom: 2rem;
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease;
        }

        .dashboard-header::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: var(--gradient-primary);
            opacity: 0.05;
            transition: all 0.3s ease;
            z-index: -1;
        }

        .dashboard-header:hover::before {
            left: 0;
        }

        .project-title {
            font-size: 2.5rem;
            font-weight: 700;
            background: var(--gradient-primary);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 0.5rem;
            line-height: 1.2;
        }

        .project-code {
            color: var(--text-secondary);
            font-size: 1.1rem;
            margin-bottom: 2rem;
            font-weight: 500;
        }

        .action-buttons {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
        }

        .futuristic-btn {
            display: inline-flex;
            align-items: center;
            padding: 0.75rem 1.5rem;
            border-radius: 12px;
            text-decoration: none;
            font-weight: 600;
            font-size: 0.9rem;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            border: 1px solid transparent;
            position: relative;
            overflow: hidden;
        }

        .futuristic-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: all 0.5s ease;
        }

        .futuristic-btn:hover::before {
            left: 100%;
        }

        .futuristic-btn.primary {
            background: var(--gradient-primary);
            color: #ffffff;
            box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
        }

        .futuristic-btn.primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(99, 102, 241, 0.4);
            color: #ffffff;
            text-decoration: none;
        }

        .futuristic-btn.success {
            background: linear-gradient(135deg, #10b981, #059669);
            color: #ffffff;
            box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
        }

        .futuristic-btn.success:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4);
            color: #ffffff;
            text-decoration: none;
        }

        .futuristic-btn.warning {
            background: linear-gradient(135deg, #ffb800, #ffa000);
            color: #ffffff;
            box-shadow: 0 4px 15px rgba(255, 184, 0, 0.3);
        }

        .futuristic-btn.warning:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(255, 184, 0, 0.4);
            color: #ffffff;
            text-decoration: none;
        }

        .futuristic-btn.danger {
            background: linear-gradient(135deg, #ff6b9d, #ff4757);
            color: #ffffff;
            box-shadow: 0 4px 15px rgba(255, 107, 157, 0.3);
        }

        .futuristic-btn.danger:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(255, 107, 157, 0.4);
            color: #ffffff;
            text-decoration: none;
        }

        .futuristic-btn.dark {
            background: linear-gradient(135deg, #2c3e50, #34495e);
            color: #ffffff;
            box-shadow: 0 4px 15px rgba(44, 62, 80, 0.3);
        }

        .futuristic-btn.dark:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(44, 62, 80, 0.4);
            color: #ffffff;
            text-decoration: none;
        }

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

        .futuristic-btn.secondary:hover {
            background: var(--bg-hover);
            color: var(--text-primary);
            text-decoration: none;
        }

        /* Campaigns Section */
        .campaigns-section {
            margin-bottom: 2rem;
        }

        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
        }

        .section-title {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--text-primary);
            display: flex;
            align-items: center;
            margin: 0;
        }

        .campaign-count {
            color: var(--text-secondary);
            font-size: 0.9rem;
            background: var(--bg-secondary);
            padding: 0.5rem 1rem;
            border-radius: 20px;
            border: 1px solid var(--border-color);
        }

        .campaigns-scroll-container {
            display: flex;
            gap: 1.5rem;
            overflow-x: auto;
            padding-bottom: 1rem;
            scrollbar-width: thin;
            scrollbar-color: var(--accent-primary) transparent;
        }

        .campaigns-scroll-container::-webkit-scrollbar {
            height: 6px;
        }

        .campaigns-scroll-container::-webkit-scrollbar-track {
            background: var(--bg-secondary);
            border-radius: 3px;
        }

        .campaigns-scroll-container::-webkit-scrollbar-thumb {
            background: var(--gradient-primary);
            border-radius: 3px;
        }

        .campaign-card {
            min-width: 300px;
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 16px;
            padding: 1.5rem;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .campaign-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: var(--gradient-primary);
            opacity: 0.05;
            transition: all 0.3s ease;
            z-index: -1;
        }

        .campaign-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 10px 30px var(--shadow);
            border-color: var(--accent-primary);
        }

        .campaign-card:hover::before {
            left: 0;
        }

        .campaign-header {
            margin-bottom: 1.5rem;
        }

        .campaign-name {
            font-size: 1.2rem;
            font-weight: 600;
            color: var(--text-primary);
            margin: 0;
        }

        .campaign-stats {
            display: flex;
            justify-content: space-between;
            margin-bottom: 1.5rem;
        }

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

        .stat-value {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 0.25rem;
        }

        .stat-item.success .stat-value {
            color: #10b981;
        }

        .stat-item.failed .stat-value {
            color: #ff6b9d;
        }

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

        .campaign-progress {
            margin-top: 1rem;
        }

        .progress-bar {
            width: 100%;
            height: 6px;
            background: var(--bg-secondary);
            border-radius: 3px;
            overflow: hidden;
            margin-bottom: 0.5rem;
        }

        .progress-fill {
            height: 100%;
            background: var(--gradient-primary);
            border-radius: 3px;
            transition: width 0.3s ease;
        }

        .progress-text {
            font-size: 0.9rem;
            color: var(--text-secondary);
            text-align: center;
        }

        /* Dashboard Grid */
        .dashboard-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 2rem;
            margin-bottom: 2rem;
        }

        .dashboard-card {
            background: var(--bg-card);
            backdrop-filter: blur(20px);
            border: 1px solid var(--border-color);
            border-radius: 20px;
            padding: 2rem;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .dashboard-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: var(--gradient-primary);
            opacity: 0.03;
            transition: all 0.3s ease;
            z-index: -1;
        }

        .dashboard-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 15px 40px var(--shadow);
            border-color: var(--accent-primary);
        }

        .dashboard-card:hover::before {
            left: 0;
        }

        .card-header {
            display: flex;
            align-items: center;
            margin-bottom: 2rem;
        }

        .card-icon {
            width: 50px;
            height: 50px;
            background: var(--gradient-primary);
            border-radius: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 1rem;
            color: #ffffff;
            font-size: 1.2rem;
        }

        .card-title {
            font-size: 1.3rem;
            font-weight: 700;
            color: var(--text-primary);
            margin: 0;
        }

        /* Balance Card */
        .balance-amount {
            font-size: 2.5rem;
            font-weight: 700;
            background: linear-gradient(135deg, #10b981, #059669);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 1.5rem;
        }

        .balance-actions {
            margin-bottom: 2rem;
        }

        .subscription-section {
            border-top: 1px solid var(--border-color);
            padding-top: 1.5rem;
        }

        .subscription-header {
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 1rem;
        }

        .plans-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
            gap: 1rem;
        }

        .plan-card {
            background: var(--bg-secondary);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 1rem;
            text-align: center;
            text-decoration: none;
            color: var(--text-primary);
            transition: all 0.3s ease;
        }

        .plan-card:hover {
            background: var(--bg-hover);
            border-color: var(--accent-primary);
            transform: translateY(-2px);
            color: var(--text-primary);
            text-decoration: none;
        }

        .plan-name {
            font-weight: 600;
            margin-bottom: 0.5rem;
        }

        .plan-price {
            font-size: 0.9rem;
            color: var(--text-secondary);
        }

        /* SMS Stats Card */
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1.5rem;
        }

        .stat-box {
            background: var(--bg-secondary);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 1.5rem;
            text-align: center;
            position: relative;
        }

        .stat-box.total {
            border-color: rgba(0, 212, 255, 0.3);
        }

        .stat-box.success {
            border-color: rgba(0, 255, 136, 0.3);
        }

        .stat-box.today {
            border-color: rgba(255, 184, 0, 0.3);
        }

        .stat-box.failed {
            border-color: rgba(255, 107, 157, 0.3);
        }

        .stat-number {
            font-size: 2rem;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 0.5rem;
            min-height: 2.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .stat-label {
            font-size: 0.9rem;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 0.5rem;
        }

        .stat-breakdown {
            display: flex;
            flex-direction: column;
            gap: 0.25rem;
        }

        .telco-stat {
            font-size: 0.8rem;
            color: var(--text-secondary);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
        }

        .telco-stat.safaricom i {
            color: #10b981;
        }

        .telco-stat.airtel i {
            color: #ff6b9d;
        }

        .details-toggle {
            position: absolute;
            top: 1rem;
            right: 1rem;
            background: none;
            border: none;
            color: var(--text-secondary);
            cursor: pointer;
            font-size: 1rem;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 0.25rem;
        }

        .details-toggle:hover {
            color: var(--text-primary);
        }

        .toggle-caret {
            font-size: 0.8rem;
            transition: transform 0.3s ease;
        }

        .details-toggle.active .toggle-caret {
            transform: rotate(180deg);
        }

        .loading-skeleton {
            background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--bg-hover) 50%, var(--bg-secondary) 75%);
            background-size: 200% 100%;
            animation: loading 1.5s infinite;
            border-radius: 4px;
            height: 2rem;
            width: 100%;
        }

        @keyframes loading {
            0% { background-position: 200% 0; }
            100% { background-position: -200% 0; }
        }

        .breakdown-details {
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 1.5rem;
            margin-top: 1.5rem;
        }

        .breakdown-details h4 {
            color: var(--text-primary);
            margin-bottom: 1rem;
            font-size: 1.1rem;
        }

        .breakdown-grid {
            display: grid;
            gap: 0.75rem;
        }

        .breakdown-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.5rem 0;
            border-bottom: 1px solid var(--border-color);
        }

        .breakdown-label {
            color: var(--text-secondary);
            font-size: 0.9rem;
        }

        .breakdown-value {
            color: var(--text-primary);
            font-weight: 600;
        }

        /* Inline Breakdown for Failed SMS Card */
        .inline-breakdown {
            margin-top: 1rem;
            padding-top: 1rem;
            border-top: 1px solid var(--border-color);
        }

        .breakdown-item-small {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.25rem 0;
            font-size: 0.75rem;
            line-height: 1.2;
        }

        .breakdown-label-small {
            color: var(--text-secondary);
            font-size: 0.7rem;
        }

        .breakdown-value-small {
            color: var(--text-primary);
            font-weight: 500;
            font-size: 0.7rem;
        }

        /* Scheduled SMS Card */
        .scheduled-table-container {
            max-height: 300px;
            overflow-y: auto;
            border-radius: 12px;
            border: 1px solid var(--border-color);
        }

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

        .scheduled-table th {
            background: var(--bg-secondary);
            color: var(--text-secondary);
            font-weight: 600;
            padding: 1rem;
            text-align: left;
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            border-bottom: 1px solid var(--border-color);
        }

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

        .bulk-id {
            font-family: 'Courier New', monospace;
            background: var(--bg-secondary);
            padding: 0.25rem 0.5rem;
            border-radius: 6px;
            font-size: 0.8rem;
        }

        .send-time {
            color: var(--accent-primary);
            font-weight: 500;
        }

        .message-count {
            background: linear-gradient(135deg, #10b981, #059669);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-weight: 600;
        }

        .action-buttons {
            display: flex;
            gap: 0.5rem;
        }

        .action-btn {
            width: 32px;
            height: 32px;
            border-radius: 8px;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            text-decoration: none;
        }

        .action-btn.view {
            background: rgba(0, 212, 255, 0.2);
            color: #00d4ff;
        }

        .action-btn.delete {
            background: rgba(255, 107, 157, 0.2);
            color: #ff6b9d;
        }

        .action-btn:hover {
            transform: scale(1.1);
        }

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

        .empty-state i {
            font-size: 2rem;
            margin-bottom: 1rem;
            opacity: 0.5;
        }

        /* Contacts Card */
        .contacts-stats {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1.5rem;
            margin-bottom: 2rem;
        }

        .contact-stat-item {
            text-align: center;
            background: var(--bg-secondary);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 1.5rem;
        }

        .contact-number {
            font-size: 2rem;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 0.5rem;
            min-height: 2.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .contact-label {
            font-size: 0.9rem;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .contact-groups {
            margin-bottom: 2rem;
        }

        .contact-groups h4 {
            color: var(--text-primary);
            margin-bottom: 1rem;
            font-size: 1.1rem;
        }

        .groups-list {
            min-height: 100px;
            background: var(--bg-secondary);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 1rem;
        }

        .group-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.5rem 0;
            border-bottom: 1px solid var(--border-color);
            color: var(--text-primary);
        }

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

        .group-name {
            color: var(--text-primary);
            font-weight: 500;
        }

        .group-count {
            color: var(--text-secondary);
            font-size: 0.9rem;
            background: var(--bg-card);
            padding: 0.25rem 0.5rem;
            border-radius: 6px;
            border: 1px solid var(--border-color);
        }

        .no-groups {
            color: var(--text-secondary);
            text-align: center;
            font-style: italic;
            margin: 0;
        }

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

        /* Bottom Row Grid */
        .bottom-row-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
            margin-bottom: 2rem;
        }

        @media (max-width: 1200px) {
            .bottom-row-grid {
                grid-template-columns: 1fr;
            }
        }

        /* Analytics Card */
        .analytics-content {
            min-height: 150px;
            background: var(--bg-secondary);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 1.5rem;
            margin-bottom: 1.5rem;
            color: var(--text-secondary);
            font-size: 1rem;
            line-height: 1.5;
        }

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

        /* Collaborators Card */
        .collaborators-content {
            text-align: center;
        }

        .collaborators-description {
            color: var(--text-secondary);
            margin-bottom: 1.5rem;
        }

        .collaborators-stats {
            margin-bottom: 2rem;
        }

        .collab-stat {
            display: flex;
            flex-direction: column;
            align-items: center;
            background: var(--bg-secondary);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 1.5rem;
        }

        .collab-number {
            font-size: 2rem;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 0.5rem;
        }

        .collab-label {
            font-size: 0.9rem;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

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

        /* AI Insights Card */
        .ai-insights-card {
            position: relative;
            overflow: hidden;
        }

        .ai-insights-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: var(--gradient-primary);
            opacity: 0.05;
            z-index: -1;
        }

        .ai-insights-card .card-icon.ai-icon {
            background: var(--gradient-primary);
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.05); }
        }

        .ai-insights-content {
            max-height: 300px;
            overflow-y: auto;
            margin-bottom: 1.5rem;
            scrollbar-width: thin;
            scrollbar-color: var(--accent-primary) transparent;
        }

        .ai-insights-content::-webkit-scrollbar {
            width: 4px;
        }

        .ai-insights-content::-webkit-scrollbar-track {
            background: transparent;
        }

        .ai-insights-content::-webkit-scrollbar-thumb {
            background: var(--gradient-primary);
            border-radius: 2px;
        }

        .insights-list {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .insight-item {
            background: var(--bg-secondary);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 1rem;
            transition: all 0.3s ease;
        }

        .insight-item:hover {
            background: var(--bg-hover);
            border-color: var(--accent-primary);
        }

        .insight-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 0.5rem;
        }

        .insight-type {
            font-weight: 600;
            color: var(--accent-primary);
            font-size: 0.9rem;
        }

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

        .insight-text {
            color: var(--text-primary);
            font-size: 0.9rem;
            line-height: 1.5;
        }

        .ai-insights-actions {
            display: flex;
            gap: 1rem;
            justify-content: center;
        }

        .generate-btn {
            position: relative;
            overflow: hidden;
        }

        .generate-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
            transition: all 0.5s ease;
        }

        .generate-btn:hover::before {
            left: 100%;
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .dashboard-grid {
                grid-template-columns: 1fr;
                gap: 1.5rem;
            }

            .campaigns-scroll-container {
                gap: 1rem;
            }

            .campaign-card {
                min-width: 250px;
            }

            .stats-grid {
                grid-template-columns: 1fr;
                gap: 1rem;
            }

            .contacts-stats {
                grid-template-columns: 1fr;
                gap: 1rem;
            }

            .action-buttons {
                flex-direction: column;
                gap: 0.5rem;
            }

            .futuristic-btn {
                justify-content: center;
            }

            .dashboard-header {
                padding: 1.5rem;
            }

            .project-title {
                font-size: 2rem;
            }
        }

        /* ===== COMPACT STYLING SYSTEM ===== */
        /* Global compact mode for sleek, modern appearance */

        /* Enhanced antialiasing for all text elements */
        *, *::before, *::after {
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            text-rendering: optimizeLegibility;
        }

        /* Compact Typography Scale */
        .v3-layout {
            /* Reduce base font sizes by 15-20% */
            font-size: 0.9rem; /* Down from 1rem */
        }

        /* Project Titles - More Compact */
        .project-title {
            font-size: 2rem !important; /* Down from 2.5rem */
            line-height: 1.2 !important;
            margin-bottom: 1rem !important; /* Down from 2rem */
        }

        .project-code {
            font-size: 0.95rem !important; /* Down from 1.1rem */
            margin-bottom: 1.5rem !important; /* Down from 2rem */
        }

        /* Section and Card Titles */
        .section-title {
            font-size: 1.25rem !important; /* Down from 1.5rem */
            margin-bottom: 1rem !important;
        }

        .card-title {
            font-size: 1.1rem !important; /* Down from 1.3rem */
            margin-bottom: 0.75rem !important;
        }

        /* Compact Headers */
        .compact-title {
            font-size: 1rem !important;
            font-weight: 600 !important;
        }

        /* Balance and Large Numbers */
        .balance-amount {
            font-size: 2rem !important; /* Down from 2.5rem */
            line-height: 1.1 !important;
        }

        .stat-number, .contact-number, .collab-number {
            font-size: 1.5rem !important; /* Down from 2rem */
            line-height: 1.2 !important;
        }

        .stat-number-compact {
            font-size: 1.25rem !important;
            font-weight: 700 !important;
        }

        /* Campaign Names and Content */
        .campaign-name {
            font-size: 1rem !important; /* Down from 1.2rem */
            line-height: 1.3 !important;
        }

        .stat-value {
            font-size: 1.25rem !important; /* Down from 1.5rem */
            line-height: 1.2 !important;
        }

        /* Compact Button System */
        .futuristic-btn {
            font-size: 0.8rem !important; /* Down from 0.9rem */
            padding: 0.6rem 1.2rem !important; /* Down from 0.75rem 1.5rem */
            line-height: 1.3 !important;
        }

        .futuristic-btn.compact-btn {
            font-size: 0.75rem !important;
            padding: 0.5rem 1rem !important;
        }

        .futuristic-btn i {
            font-size: 0.85rem !important;
        }

        /* Compact Action Buttons */
        .action-btn {
            width: 28px !important; /* Down from 32px */
            height: 28px !important;
            font-size: 0.75rem !important;
        }

        /* Form Elements */
        .form-control {
            font-size: 0.85rem !important; /* Down from 1rem */
            padding: 0.6rem 0.9rem !important; /* Down from 0.75rem 1rem */
        }

        .form-label {
            font-size: 0.8rem !important; /* Down from 0.9rem */
            margin-bottom: 0.4rem !important;
        }

        .form-help {
            font-size: 0.7rem !important; /* Down from 0.8rem */
        }

        /* Compact Spacing System */
        .dashboard-card {
            padding: 1.5rem !important; /* Down from 2rem */
            margin-bottom: 1.5rem !important;
        }

        .card-header {
            padding: 1.25rem 1.5rem !important;
        }

        .card-body {
            padding: 1.5rem !important;
        }

        /* Compact Stats and Labels */
        .stat-label, .contact-label, .collab-label {
            font-size: 0.75rem !important; /* Down from 0.9rem */
            letter-spacing: 0.3px !important;
        }

        .stat-label-compact, .collab-label-compact {
            font-size: 0.7rem !important;
            text-transform: uppercase !important;
            letter-spacing: 0.5px !important;
        }

        .telco-stat, .telco-stat-compact {
            font-size: 0.7rem !important; /* Down from 0.8rem */
        }

        /* Compact Breakdown and Details */
        .breakdown-label {
            font-size: 0.8rem !important; /* Down from 0.9rem */
        }

        .breakdown-label-small {
            font-size: 0.65rem !important; /* Down from 0.7rem */
        }

        .breakdown-value-small {
            font-size: 0.65rem !important; /* Down from 0.7rem */
        }

        /* Table Compact Styling */
        .table th {
            font-size: 0.8rem !important; /* Down from 0.9rem */
            padding: 0.75rem !important; /* Down from 1rem */
        }

        .table td {
            font-size: 0.8rem !important;
            padding: 0.75rem !important;
        }

        /* Compact Badges and Tags */
        .badge {
            font-size: 0.7rem !important;
            padding: 0.35rem 0.6rem !important;
        }

        .campaign-count, .group-count {
            font-size: 0.8rem !important; /* Down from 0.9rem */
            padding: 0.4rem 0.8rem !important;
        }

        /* Compact Modal System */
        .modal-title {
            font-size: 1.1rem !important;
        }

        .modal-body {
            font-size: 0.85rem !important;
            padding: 1.5rem !important;
        }

        /* Compact Navigation */
        .brand-text {
            font-size: 1.1rem !important; /* Down from 1.25rem */
        }

        .nav-link {
            font-size: 0.85rem !important;
            padding: 0.6rem 1rem !important;
        }

        /* Compact Icons */
        .card-icon i {
            font-size: 1rem !important; /* Down from 1.2rem */
        }

        .compact-icon i {
            font-size: 0.9rem !important;
        }

        /* Compact Progress and Status */
        .progress-text {
            font-size: 0.8rem !important; /* Down from 0.9rem */
        }

        .status-badge {
            font-size: 0.7rem !important;
            padding: 0.3rem 0.7rem !important;
        }

        /* Compact Insights and Content */
        .insight-title {
            font-size: 0.8rem !important; /* Down from 0.9rem */
        }

        .insight-text {
            font-size: 0.8rem !important; /* Down from 0.9rem */
            line-height: 1.4 !important;
        }

        .insight-date {
            font-size: 0.7rem !important; /* Down from 0.8rem */
        }

        /* Compact Empty States */
        .empty-state i {
            font-size: 1.5rem !important; /* Down from 2rem */
        }

        .empty-state {
            font-size: 0.85rem !important;
        }

        /* Compact Responsive Adjustments */
        @media (max-width: 768px) {
            .project-title {
                font-size: 1.75rem !important; /* Down from 2rem */
            }

            .futuristic-btn {
                font-size: 0.75rem !important;
                padding: 0.5rem 1rem !important;
            }

            .dashboard-card {
                padding: 1.25rem !important;
            }

            .card-header {
                padding: 1rem 1.25rem !important;
            }
        }

        @media (max-width: 576px) {
            .project-title {
                font-size: 1.5rem !important;
            }

            .stat-number, .contact-number, .collab-number {
                font-size: 1.25rem !important;
            }

            .balance-amount {
                font-size: 1.75rem !important;
            }
        }

        /* Enhanced Visual Smoothness */
        .dashboard-card, .futuristic-btn, .form-control, .modal-content {
            transform: translateZ(0); /* Hardware acceleration */
            backface-visibility: hidden;
        }

        /* Smooth transitions for all interactive elements */
        .futuristic-btn, .action-btn, .nav-link, .card-header {
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
        }

/* ========== SECTION 2: sidebar submenu chrome (was v3-sidebar inline) ========== */
            /* Enhanced Submenu Styling - Override Bootstrap and existing styles */
            .nav-submenu {
                background: var(--bg-secondary) !important;
                border-radius: 0 0 12px 12px !important;
                margin: 0 !important;
                padding: 0.5rem 0 !important;
                overflow: hidden !important;
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
                list-style: none !important;
                border-left: 3px solid var(--accent-primary) !important;
                margin-left: 1rem !important;
                margin-right: 0.5rem !important;
                box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1) !important;
                backdrop-filter: blur(10px) !important;
                -webkit-backdrop-filter: blur(10px) !important;
            }

            .nav-submenu.show {
                border-top: 1px solid var(--border-color) !important;
                animation: slideDownSubmenu 0.3s ease-out !important;
            }

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

            .nav-subitem {
                list-style: none !important;
                margin: 0 !important;
                padding: 0 !important;
            }

            .nav-sublink {
                display: flex !important;
                align-items: center !important;
                padding: 0.75rem 1rem 0.75rem 2rem !important;
                color: var(--text-secondary) !important;
                text-decoration: none !important;
                font-size: 0.875rem !important;
                font-weight: 500 !important;
                transition: all 0.3s ease !important;
                position: relative !important;
                border-radius: 8px !important;
                margin: 0.125rem 0.5rem !important;
            }

            .nav-sublink::before {
                content: '' !important;
                position: absolute !important;
                left: 0.75rem !important;
                top: 50% !important;
                transform: translateY(-50%) !important;
                width: 6px !important;
                height: 6px !important;
                background: var(--text-muted) !important;
                border-radius: 50% !important;
                transition: all 0.3s ease !important;
            }

            .nav-sublink:hover {
                background: var(--bg-hover) !important;
                color: var(--accent-primary) !important;
                text-decoration: none !important;
                transform: translateX(4px) !important;
            }

            .nav-sublink:hover::before {
                background: var(--accent-primary) !important;
                transform: translateY(-50%) scale(1.5) !important;
                box-shadow: 0 0 8px var(--accent-primary) !important;
            }

            .nav-subtext {
                font-size: 0.875rem !important;
                font-weight: 500 !important;
                margin-left: 0.5rem !important;
            }

            /* Active menu item styling - Main nav links */
            .nav-link.active {
                background: var(--bg-hover) !important;
                color: var(--accent-primary) !important;
                font-weight: 600 !important;
            }

            .nav-toggle.active {
                background: var(--bg-hover) !important;
                color: var(--accent-primary) !important;
                font-weight: 600 !important;
            }

            .nav-toggle.active .nav-arrow {
                color: var(--accent-primary) !important;
            }

            /* Active submenu item styling */
            .nav-sublink.active {
                background: var(--bg-hover) !important;
                color: var(--accent-primary) !important;
                font-weight: 600 !important;
            }

            .nav-sublink.active::before {
                background: var(--accent-primary) !important;
                box-shadow: 0 0 8px var(--accent-primary) !important;
                transform: translateY(-50%) scale(1.5) !important;
            }

            /* CRITICAL: Hide arrows in collapsed state */
            .sidebar-collapsed .nav-arrow {
                display: none !important;
                visibility: hidden !important;
                opacity: 0 !important;
            }

            .sidebar-collapsed .nav-text {
                display: none !important;
                visibility: hidden !important;
                opacity: 0 !important;
            }

            /* Ensure main nav icons are centered when collapsed */
            .sidebar-collapsed .nav-toggle {
                justify-content: center !important;
                padding: 0.75rem !important;
                width: 100% !important;
            }

            .sidebar-collapsed .nav-link {
                justify-content: center !important;
                padding: 0.75rem !important;
                width: 100% !important;
            }

            /* Light mode specific adjustments */
            [data-theme="light"] .nav-submenu {
                background: rgba(243, 244, 246, 0.95) !important;
                border-left-color: var(--accent-primary) !important;
                box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05) !important;
            }

            [data-theme="light"] .nav-sublink {
                color: #6b7280 !important;
            }

            [data-theme="light"] .nav-sublink:hover {
                color: var(--accent-primary) !important;
            }

            /* Light mode active states */
            [data-theme="light"] .nav-link.active,
            [data-theme="light"] .nav-toggle.active {
                background: rgba(var(--accent-primary-rgb), 0.1) !important;
                color: var(--accent-primary) !important;
            }

            [data-theme="light"] .nav-sublink.active {
                background: rgba(var(--accent-primary-rgb), 0.1) !important;
                color: var(--accent-primary) !important;
            }

            [data-theme="light"] .nav-sublink.active::before {
                background: var(--accent-primary) !important;
                box-shadow: 0 0 8px var(--accent-primary) !important;
            }

            /* Enhanced active state visibility */
            .nav-link.active,
            .nav-toggle.active {
                position: relative !important;
            }

            .nav-link.active::after,
            .nav-toggle.active::after {
                content: '' !important;
                position: absolute !important;
                right: 0 !important;
                top: 50% !important;
                transform: translateY(-50%) !important;
                width: 3px !important;
                height: 60% !important;
                background: var(--accent-primary) !important;
                border-radius: 2px 0 0 2px !important;
            }

            /* Active submenu parent indicator */
            .nav-toggle.active .nav-text {
                font-weight: 600 !important;
            }

            /* Mobile submenu adjustments */
            @media (max-width: 1199px) {
                .nav-submenu {
                    position: static !important;
                    box-shadow: none !important;
                    border: none !important;
                    opacity: 1 !important;
                    visibility: visible !important;
                    transform: none !important;
                }

                .nav-arrow {
                    display: block !important;
                    visibility: visible !important;
                    opacity: 1 !important;
                }

                .nav-text {
                    display: block !important;
                    visibility: visible !important;
                    opacity: 1 !important;
                }
            }

/* ========== SECTION 3: refinement overrides (was design-refresh.css, loaded last) ========== */
/*
 * design-refresh.css
 * Loaded last — overrides Bootstrap, Material Dashboard, and per-page styles
 * Goal: Chatbase-style minimal, clean aesthetic
 */

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

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    font-size: 0.9375rem !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    color: var(--text-primary) !important;
    background-color: var(--bg-primary) !important;
}

/* Heading scale — no gradient text, clean weights */
h1, .h1 {
    font-size: 1.875rem !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: unset !important;
    background-clip: unset !important;
    color: var(--text-primary) !important;
}
h2, .h2 {
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: unset !important;
    background-clip: unset !important;
    color: var(--text-primary) !important;
}
h3, .h3 {
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: unset !important;
    background-clip: unset !important;
    color: var(--text-primary) !important;
}
h4, .h4 {
    font-size: 1.125rem !important;
    font-weight: 500 !important;
    color: var(--text-primary) !important;
}
h5, .h5 {
    font-size: 1rem !important;
    font-weight: 500 !important;
    color: var(--text-primary) !important;
}
h6, .h6 {
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: var(--text-primary) !important;
}

/* ===== PAGE HEADER / DASHBOARD TITLE ===== */

.dashboard-title {
    font-size: 1.375rem !important;
    font-weight: 600 !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: unset !important;
    background-clip: unset !important;
    color: var(--text-primary) !important;
    line-height: 1.3 !important;
}

.dashboard-subtitle, .section-subtitle {
    font-size: 0.875rem !important;
    font-weight: 400 !important;
    color: var(--text-secondary) !important;
}

.section-title {
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: unset !important;
    background-clip: unset !important;
    color: var(--text-primary) !important;
}

.dashboard-header {
    border-radius: 8px !important;
    padding: 1.25rem 1.5rem !important;
    margin-bottom: 1.5rem !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
}

/* Remove hover shimmer pseudo-element from dashboard header */
.dashboard-header::before {
    display: none !important;
}

/* ===== BOOTSTRAP CARDS ===== */

.card {
    border-radius: 8px !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
    background: var(--bg-card) !important;
    margin-bottom: 1.25rem !important;
}

.card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
    transform: none !important;
}

.card-body {
    padding: 1.25rem !important;
}

.card-header {
    padding: 0.875rem 1.25rem !important;
    border-bottom: 1px solid var(--border-color) !important;
    background: transparent !important;
    font-weight: 500 !important;
    font-size: 0.9375rem !important;
}

.card-footer {
    padding: 0.875rem 1.25rem !important;
    border-top: 1px solid var(--border-color) !important;
    background: transparent !important;
}

.card.card-raised,
.card.card-plain {
    box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
}

/* Custom feature cards */
.project-card, .campaign-card, .collaboration-card {
    border-radius: 8px !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
}

.project-card:hover, .campaign-card:hover, .collaboration-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
    transform: none !important;
}

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

/* Remove shimmer animation from futuristic buttons */
.futuristic-btn::before {
    display: none !important;
}

.futuristic-btn {
    padding: 0.4375rem 0.875rem !important;
    border-radius: 6px !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    transition: background 0.15s ease, border-color 0.15s ease !important;
    gap: 0.375rem !important;
}

.futuristic-btn:hover {
    transform: none !important;
}

.futuristic-btn.primary {
    background: var(--accent-primary) !important;
    box-shadow: none !important;
}

.futuristic-btn.primary:hover {
    background: #4f46e5 !important;
    box-shadow: none !important;
}

.futuristic-btn.secondary {
    background: transparent !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    box-shadow: none !important;
}

.futuristic-btn.secondary:hover {
    background: var(--bg-hover) !important;
    box-shadow: none !important;
}

.futuristic-btn.success {
    box-shadow: none !important;
}

.futuristic-btn.warning {
    box-shadow: none !important;
}

.futuristic-btn.small {
    padding: 0.25rem 0.625rem !important;
    font-size: 0.8125rem !important;
}

/* Bootstrap button overrides */
.btn {
    border-radius: 6px !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    padding: 0.4375rem 0.875rem !important;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.btn:hover {
    transform: none !important;
}

.btn-lg {
    padding: 0.5625rem 1.125rem !important;
    font-size: 0.9375rem !important;
}

.btn-sm {
    padding: 0.25rem 0.625rem !important;
    font-size: 0.8125rem !important;
}

.btn-primary {
    box-shadow: none !important;
}

.btn-primary:hover {
    box-shadow: none !important;
}

/* ===== FORM CONTROLS ===== */

.form-control {
    border-radius: 6px !important;
    border: 1px solid var(--border-color) !important;
    font-size: 0.9375rem !important;
    padding: 0.4375rem 0.75rem !important;
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    box-shadow: none !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.form-control:focus {
    border-color: var(--accent-primary) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1) !important;
    background: var(--bg-card) !important;
}

.form-control::placeholder {
    color: var(--text-muted) !important;
    font-weight: 400 !important;
}

.form-group {
    margin-bottom: 1rem !important;
}

label, .form-label {
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: var(--text-primary) !important;
    margin-bottom: 0.375rem !important;
}

/* Custom selects */
select.form-control {
    padding: 0.4375rem 0.75rem !important;
}

/* ===== TABLES (Bootstrap + DataTables) ===== */

.table {
    font-size: 0.9375rem !important;
}

.table thead th {
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    color: var(--text-muted) !important;
    border-bottom: 1px solid var(--border-color) !important;
    padding: 0.625rem 0.75rem !important;
}

.table tbody td {
    font-size: 0.9375rem !important;
    padding: 0.625rem 0.75rem !important;
    border-bottom: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    vertical-align: middle !important;
}

table.dataTable thead th {
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    color: var(--text-muted) !important;
}

table.dataTable tbody td {
    font-size: 0.9375rem !important;
    color: var(--text-primary) !important;
}

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

.modal-content {
    border-radius: 8px !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
}

.modal-header {
    padding: 1rem 1.25rem !important;
    border-bottom: 1px solid var(--border-color) !important;
}

.modal-body {
    padding: 1.25rem !important;
}

.modal-footer {
    padding: 0.875rem 1.25rem !important;
    border-top: 1px solid var(--border-color) !important;
}

.modal-title {
    font-size: 1rem !important;
    font-weight: 600 !important;
}

/* Modern modal variant */
.modern-modal .modal-content {
    border-radius: 8px !important;
}

/* ===== BADGES & TAGS ===== */

.badge {
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    border-radius: 4px !important;
    padding: 0.25em 0.5em !important;
}

/* ===== ALERTS ===== */

.alert {
    border-radius: 6px !important;
    font-size: 0.9375rem !important;
    padding: 0.75rem 1rem !important;
    margin-bottom: 1rem !important;
}

/* ===== NAVBAR (Material Dashboard override) ===== */

.navbar {
    box-shadow: none !important;
    border-bottom: 1px solid var(--border-color) !important;
}

/* ===== SIDEBAR (Material Dashboard override) ===== */

.sidebar,
.main-sidebar {
    box-shadow: none !important;
}

/* ===== REMOVE HOVER LIFT TRANSFORMS ===== */

.support-btn:hover,
.nav-link:hover,
.stat-item:hover,
.help-section:hover {
    transform: none !important;
}

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

.support-btn {
    border-radius: 6px !important;
    font-size: 0.875rem !important;
}

/* ===== HELP / INFO SECTIONS ===== */

.help-section {
    border-radius: 8px !important;
    padding: 1.25rem !important;
}

/* ===== PAGE-SPECIFIC CARD GRIDS ===== */

/* Reduce stat item padding */
.stat-item {
    padding: 0.875rem 1rem !important;
}

.stat-label {
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    color: var(--text-muted) !important;
}

.stat-value {
    font-size: 1.375rem !important;
    font-weight: 600 !important;
}

/* ===== FLATPICKR ===== */

.flatpickr-calendar {
    border-radius: 8px !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1) !important;
    font-size: 0.875rem !important;
}

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

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

::-webkit-scrollbar-track {
    background: transparent;
}

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

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

/* ============================================================================
   SECTION 4: CANONICAL COMPONENT LAYER — Refined Indigo
   Single source of truth for shared components. Loaded last: wins over
   sections 1-3. Page-level <style> blocks must NOT redefine these.
   ============================================================================ */

/* ---- 4.1 Base typography & rhythm ---- */
body.v3-layout {
    font-size: var(--text-base) !important;
    line-height: 1.6;
    color: var(--text-primary);
}

.v3-layout h1 { font-size: var(--text-2xl); font-weight: 700; }
.v3-layout h2 { font-size: var(--text-xl);  font-weight: 600; }
.v3-layout h3 { font-size: var(--text-lg);  font-weight: 600; }
.v3-layout h4 { font-size: var(--text-md);  font-weight: 600; }
.v3-layout h5 { font-size: var(--text-base); font-weight: 600; }
.v3-layout h6 { font-size: var(--text-sm);  font-weight: 600; }

/* ---- 4.2 Accessibility primitives ---- */
.v3-layout :focus-visible {
    outline: none;
    box-shadow: var(--focus-ring) !important;
    border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Bootstrap's .text-muted is a hardcoded gray that breaks dark mode */
.v3-layout .text-muted { color: var(--text-muted) !important; }
.v3-layout .text-secondary { color: var(--text-secondary) !important; }

/* ---- 4.3 Page header (canonical) ----
   Aliases cover per-page divergent names so old markup converges. */
.dashboard-header, .chat-header, .sms-compose-header {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-lg) !important;
    padding: 1.5rem !important;
    margin-bottom: 1.5rem !important;
    box-shadow: var(--shadow-sm) !important;
    position: relative;
    overflow: hidden;
}
/* kill legacy shimmer sweep pseudo-elements */
.dashboard-header::before, .chat-header::before, .sms-compose-header::before,
.dashboard-card::before, .campaign-card::before { display: none !important; }

.dashboard-title, .page-title, .header-title {
    font-size: var(--text-xl) !important;
    font-weight: 600 !important;
    margin: 0 0 0.25rem 0 !important;
    /* flat ink — no gradient text in the app */
    background: none !important;
    -webkit-background-clip: initial !important;
    -webkit-text-fill-color: initial !important;
    background-clip: initial !important;
    color: var(--text-primary) !important;
}

.dashboard-subtitle, .header-description {
    font-size: var(--text-base) !important;
    color: var(--text-secondary) !important;
    margin: 0 !important;
}

.project-title, .section-title, .brand-text {
    background: none !important;
    -webkit-background-clip: initial !important;
    -webkit-text-fill-color: initial !important;
    color: var(--text-primary) !important;
}

.header-actions { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }

/* ---- 4.4 Buttons (canonical, flat) ----
   One system. Aliases: .btn-futuristic, .btn-v3 map onto .futuristic-btn look. */
.futuristic-btn, .btn-futuristic, .btn-v3 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem !important;
    font-size: var(--text-sm) !important;
    font-weight: 500 !important;
    line-height: 1.4;
    border-radius: var(--radius-md) !important;
    border: 1px solid transparent !important;
    background: var(--bg-card);
    color: var(--text-primary);
    cursor: pointer;
    text-decoration: none !important;
    transition: background var(--duration-fast) ease, border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
    box-shadow: none !important;
    transform: none !important;
}
.futuristic-btn::before, .btn-futuristic::before { display: none !important; }

.futuristic-btn.primary, .btn-futuristic.primary, .btn-v3-primary,
.v3-layout .btn-primary {
    background: var(--accent-primary) !important;
    border-color: var(--accent-primary) !important;
    color: #ffffff !important;
}
.futuristic-btn.primary:hover, .btn-futuristic.primary:hover, .btn-v3-primary:hover,
.v3-layout .btn-primary:hover {
    background: var(--accent-primary-hover) !important;
    border-color: var(--accent-primary-hover) !important;
    color: #ffffff !important;
}
.futuristic-btn.primary:active, .v3-layout .btn-primary:active {
    background: var(--accent-primary-active) !important;
}

.futuristic-btn.secondary, .v3-layout .btn-secondary, .v3-layout .btn-light {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}
.futuristic-btn.secondary:hover, .v3-layout .btn-secondary:hover, .v3-layout .btn-light:hover {
    background: var(--bg-hover) !important;
    color: var(--text-primary) !important;
}

.futuristic-btn.success, .v3-layout .btn-success {
    background: var(--success) !important; border-color: var(--success) !important; color: #ffffff !important;
}
.futuristic-btn.warning, .v3-layout .btn-warning {
    background: var(--warning) !important; border-color: var(--warning) !important; color: #ffffff !important;
}
.futuristic-btn.danger, .v3-layout .btn-danger {
    background: var(--danger) !important; border-color: var(--danger) !important; color: #ffffff !important;
}
.futuristic-btn.dark, .v3-layout .btn-dark {
    background: var(--text-primary) !important; border-color: var(--text-primary) !important; color: var(--bg-primary) !important;
}
.futuristic-btn.success:hover, .futuristic-btn.warning:hover, .futuristic-btn.danger:hover,
.v3-layout .btn-success:hover, .v3-layout .btn-warning:hover, .v3-layout .btn-danger:hover {
    filter: brightness(0.92);
    color: #ffffff !important;
}

.v3-layout .btn-outline-primary {
    background: transparent !important;
    border: 1px solid var(--accent-primary) !important;
    color: var(--accent-primary) !important;
    border-radius: var(--radius-md) !important;
}
.v3-layout .btn-outline-primary:hover {
    background: var(--accent-primary-soft) !important;
    color: var(--accent-primary-hover) !important;
}

.v3-layout .btn:disabled, .futuristic-btn:disabled, .futuristic-btn.disabled {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

.v3-layout .btn-sm { padding: 0.3125rem 0.75rem !important; font-size: var(--text-xs) !important; }
.v3-layout .btn-lg { padding: 0.625rem 1.25rem !important; font-size: var(--text-base) !important; }

/* ---- 4.5 Status system (canonical) ----
   Soft badges: tinted bg + strong text. Covers every per-page vocabulary. */
.status-badge, .v3-layout .badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.1875rem 0.5625rem !important;
    font-size: var(--text-xs) !important;
    font-weight: 600 !important;
    line-height: 1.4;
    border-radius: var(--radius-pill) !important;
    border: 1px solid transparent;
    text-transform: none;
    letter-spacing: 0;
}

.status-success, .status-active, .status-delivered,
.v3-layout .badge-success {
    background: var(--success-bg) !important; color: var(--success) !important; border-color: var(--success-border) !important;
}
.status-pending, .status-warning, .status-undelivered, .status-scheduled,
.v3-layout .badge-warning {
    background: var(--warning-bg) !important; color: var(--warning) !important; border-color: var(--warning-border) !important;
}
.status-failed, .status-danger, .status-error,
.v3-layout .badge-danger {
    background: var(--danger-bg) !important; color: var(--danger) !important; border-color: var(--danger-border) !important;
}
.status-info, .status-sent, .status-accepted,
.v3-layout .badge-info, .v3-layout .badge-primary {
    background: var(--info-bg) !important; color: var(--info) !important; border-color: var(--info-border) !important;
}
.status-inactive, .status-depleted, .status-neutral,
.v3-layout .badge-secondary, .v3-layout .badge-light, .v3-layout .badge-dark {
    background: var(--neutral-bg) !important; color: var(--neutral) !important; border-color: var(--neutral-border) !important;
}

/* ---- 4.6 Cards (canonical) ---- */
.v3-layout .card,
.project-card, .campaign-card, .dashboard-card,
.table-card, .search-card, .chart-container,
.payments-table-section, .keywords-table-section, .automation-rules-section,
.contacts-table-container, .groups-sidebar, .ai-agent-card, .chat-system {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-sm) !important;
    transform: none !important;
}
.v3-layout .card:hover,
.project-card:hover, .campaign-card:hover, .dashboard-card:hover {
    box-shadow: var(--shadow-md) !important;
    transform: none !important;
}

/* ---- 4.7 Tables (canonical) ----
   Unifies .v3-table, .futuristic-table and Bootstrap .table. */
.v3-table table, .v3-table .table, .futuristic-table, .v3-layout .table {
    width: 100%;
    font-size: var(--text-sm) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
    margin-bottom: 0;
}
.v3-table th, .futuristic-table th, .v3-layout .table thead th {
    background: var(--bg-secondary) !important;
    color: var(--text-secondary) !important;
    font-size: var(--text-xs) !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.75rem 1rem !important;
    border-bottom: 1px solid var(--border-color) !important;
    border-top: none !important;
    white-space: nowrap;
}
.v3-table td, .futuristic-table td, .v3-layout .table td {
    padding: 0.75rem 1rem !important;
    border-top: 1px solid var(--border-color) !important;
    vertical-align: middle !important;
}
.v3-table tbody tr:hover, .futuristic-table tbody tr:hover,
.v3-layout .table-hover tbody tr:hover, .v3-layout .table tbody tr:hover {
    background: var(--bg-hover) !important;
    transform: none !important;
}

/* ---- 4.8 Forms (canonical) ---- */
.futuristic-input, .form-control-v3, .v3-layout .form-control, .v3-layout select.form-control {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-md) !important;
    color: var(--text-primary) !important;
    font-size: var(--text-sm) !important;
    padding: 0.5rem 0.75rem !important;
    height: auto !important;
    transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}
.futuristic-input:focus, .form-control-v3:focus, .v3-layout .form-control:focus {
    border-color: var(--accent-primary) !important;
    box-shadow: var(--focus-ring) !important;
    outline: none !important;
}
.futuristic-input::placeholder, .v3-layout .form-control::placeholder { color: var(--text-muted) !important; }

.futuristic-label, .v3-layout label {
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-weight: 500;
    margin-bottom: 0.375rem;
}
.form-help, .form-hint { color: var(--text-secondary) !important; font-size: var(--text-xs); }

/* ---- 4.9 Modals (canonical) ---- */
.v3-layout .modal-content, .futuristic-modal, .modern-modal {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-lg) !important;
    color: var(--text-primary) !important;
}
.v3-layout .modal-header, .futuristic-modal-header {
    background: var(--bg-secondary) !important;
    border-bottom: 1px solid var(--border-color) !important;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
    padding: 1rem 1.5rem !important;
}
.v3-layout .modal-title { font-size: var(--text-md) !important; font-weight: 600 !important; color: var(--text-primary) !important; }
.v3-layout .modal-body { padding: 1.5rem !important; }
.v3-layout .modal-footer { border-top: 1px solid var(--border-color) !important; padding: 1rem 1.5rem !important; }
.v3-layout .close, .futuristic-close, .modern-close {
    color: var(--text-secondary) !important;
    text-shadow: none !important;
    opacity: 1 !important;
    background: transparent !important;
    border: none;
    width: auto !important;
    height: auto !important;
}
.v3-layout .close:hover, .futuristic-close:hover, .modern-close:hover { color: var(--text-primary) !important; }

/* ---- 4.10 Empty state (canonical) ---- */
.empty-state {
    text-align: center;
    padding: 3rem 2rem !important;
    border: 1px dashed var(--border-color) !important;
    border-radius: var(--radius-lg) !important;
    background: var(--bg-secondary) !important;
    color: var(--text-secondary);
}
.empty-state i, .empty-state svg, .empty-state .empty-icon {
    font-size: 2.5rem !important;
    color: var(--text-muted) !important;
    opacity: 1 !important;
    margin-bottom: 1rem;
}
.empty-state h3, .empty-state h4 {
    font-size: var(--text-md) !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
    margin-bottom: 0.375rem;
}
.empty-state p { font-size: var(--text-sm) !important; color: var(--text-secondary) !important; margin: 0 0 1rem 0; }

/* ---- 4.11 Alerts & toasts (canonical) ---- */
.v3-layout .alert {
    border-radius: var(--radius-md) !important;
    border: 1px solid transparent !important;
    font-size: var(--text-sm) !important;
    padding: 0.75rem 1rem !important;
}
.v3-layout .alert-success { background: var(--success-bg) !important; color: var(--success) !important; border-color: var(--success-border) !important; }
.v3-layout .alert-danger  { background: var(--danger-bg) !important;  color: var(--danger) !important;  border-color: var(--danger-border) !important; }
.v3-layout .alert-warning { background: var(--warning-bg) !important; color: var(--warning) !important; border-color: var(--warning-border) !important; }
.v3-layout .alert-info    { background: var(--info-bg) !important;    color: var(--info) !important;    border-color: var(--info-border) !important; }
.futuristic-alert { box-shadow: none !important; }

.notification, .toast-notification, .toast-message {
    position: fixed;
    top: calc(var(--navbar-height) + 12px);
    right: 16px;
    z-index: var(--z-toast);
    min-width: 260px;
    max-width: 380px;
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
    border-left: 3px solid var(--accent-primary) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-lg) !important;
    padding: 0.75rem 1rem !important;
    font-size: var(--text-sm) !important;
}
.notification.success, .toast-notification.success, .toast.success { border-left-color: var(--success) !important; }
.notification.error, .notification.danger, .toast-notification.error, .toast.error { border-left-color: var(--danger) !important; }
.notification.warning, .toast-notification.warning { border-left-color: var(--warning) !important; }

/* ---- 4.12 Loading (canonical) ---- */
.spinner, .loading-spinner {
    border: 2px solid var(--border-color);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    width: 1.25rem;
    height: 1.25rem;
    animation: v3-spin 0.7s linear infinite;
    display: inline-block;
}
@keyframes v3-spin { to { transform: rotate(360deg); } }

.loading-skeleton {
    background: linear-gradient(90deg, var(--bg-hover) 25%, var(--bg-secondary) 50%, var(--bg-hover) 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
    border-radius: var(--radius-sm);
}

/* ---- 4.13 Tabs & pills (canonical: underline-active) ---- */
.v3-layout .nav-tabs { border-bottom: 1px solid var(--border-color) !important; }
.v3-layout .nav-tabs .nav-link {
    color: var(--text-secondary) !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    font-size: var(--text-sm) !important;
    font-weight: 500 !important;
    padding: 0.625rem 1rem !important;
}
.v3-layout .nav-tabs .nav-link:hover { color: var(--text-primary) !important; }
.v3-layout .nav-tabs .nav-link.active {
    color: var(--accent-primary) !important;
    background: transparent !important;
    border-bottom-color: var(--accent-primary) !important;
    font-weight: 600 !important;
}

/* ---- 4.14 Pagination (DataTables + Bootstrap) ---- */
.v3-layout .page-link, .v3-layout .paginate_button {
    color: var(--text-secondary) !important;
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    font-size: var(--text-sm) !important;
}
.v3-layout .page-item.active .page-link,
.v3-layout .paginate_button.current, .v3-layout .paginate_button.current:hover {
    background: var(--accent-primary) !important;
    border-color: var(--accent-primary) !important;
    color: #ffffff !important;
}

/* ==========================================================================
   Project sidebar — compact rail
   ==========================================================================

   The project menu is 22 links across four sections, which at the original
   sizing came to roughly 1,050px — taller than most laptop viewports, so the
   last section was permanently below the fold and the whole thing read as a
   wall rather than a menu.

   EVERY RULE HERE IS SCOPED TO `.v3-sidebar`, deliberately.

   `.nav-link`, `.nav-item` and `.nav-text` are NOT sidebar-only class names —
   they are Bootstrap's, so the generic rules above also style every `.nav-tabs`
   on a v3 page (a leak this codebase has already been bitten by, where the
   sidebar's `.nav-link.active` background defeated a tab's underline). Editing
   those rules in place to shrink the sidebar would silently reshape tabs on
   every other page. Scoping instead leaves them exactly as they were and makes
   the sidebar the only thing that changes.

   Nothing is removed: same links, same sections, same order. This is spacing,
   type scale and icon size only. */

.v3-sidebar .sidebar-nav { padding: 0.5rem 0; }

/* 40px per row -> 32px. The margin carries the separation between rows, so it
   stays non-zero: at 0 the hover backgrounds of adjacent rows touch and the
   list reads as one block. */
.v3-sidebar .nav-item { margin: 0.0625rem 0.5rem; }

/* `!important` is not decoration here: a SECOND `.nav-link` block earlier in
   this file (the "Compact Navigation" pass, ~line 2631) already declares
   `padding` and `font-size` with `!important`, and an unflagged rule loses to it
   however specific the selector is. With both flagged, specificity decides, and
   `.v3-sidebar .nav-link` (0,2,0) beats a bare `.nav-link` (0,1,0).

   Measured, not assumed: without these flags the row stayed at 44px and the
   whole block was inert. */
.v3-sidebar .nav-link {
    gap: 0.625rem;
    padding: 0.3125rem 0.625rem !important;
    min-height: 30px;
    font-size: 0.8125rem !important;
    border-radius: 7px;
}

.v3-sidebar .nav-text { font-size: 0.8125rem; line-height: 1.25; }

/* Flush the collapse caret to the right edge on EVERY expandable menu.
   
   Voice already looked right by accident: it carries a `.nav-tag` (Beta), and
   `.nav-tag` has `margin-left: auto`, so the tag pushed itself and the caret
   after it to the edge. Premium SMS, Billing, Manage API and Manage Project
   have no tag, so their caret sat immediately after the label and each one
   landed at a different x — which is what read as irregular.
   
   The fix goes on the TEXT, not the caret. `margin-left: auto` on `.nav-arrow`
   would give Voice's row two auto margins in the same free space, and flexbox
   splits it between them — pushing the Beta tag into the middle of the row.
   Growing the label instead leaves no free space, so the tag's auto margin
   resolves to zero and Voice is unchanged, while a tag-less caret is carried to
   the edge. One rule, both cases.
   
   `min-width: 0` because these labels contain a `.nav-hint` block: without it a
   flex item refuses to shrink below its content and a long label would push the
   caret back off the edge. */
.v3-sidebar .nav-toggle .nav-text {
    flex: 1 1 auto;
    min-width: 0;
}

/* The SVGs carry width/height ATTRIBUTES of 20, which CSS has to override —
   an attribute is not a style, so `width: 18px` here wins and the markup does
   not need touching. Smaller icons are most of what makes a tighter row read as
   deliberate rather than cramped. */
.v3-sidebar .nav-link svg,
.v3-sidebar .nav-toggle svg {
    width: 18px;
    height: 18px;
}

/* Section labels: the air above them is what separates the four groups, so it
   is reduced rather than removed — at 0 the grouping stops being legible and
   the compaction has cost the thing it was protecting. */
.v3-sidebar .nav-section {
    margin: 0.65rem 0.5rem 0.15rem;
    padding: 0 0.625rem;
    font-size: 0.6rem;
}

/* Two-line rows (2 Way SMS / AI Automation / Workflows) are the tallest in the
   list. Tightening the second line keeps the hint readable while bringing those
   rows back towards the height of a single-line one. */
.v3-sidebar .nav-hint {
    font-size: 0.58rem;
    line-height: 1.05;
    margin-top: 1px;
    opacity: 0.55;
}

.v3-sidebar .nav-badge {
    padding: 0.0625rem 0.35rem;
    font-size: 0.65rem;
    min-width: 16px;
}

.v3-sidebar .nav-tag {
    padding: 0.05rem 0.35rem;
    font-size: 0.55rem;
}

/* Submenus (Voice, Premium SMS, Billing). These carry `!important` in the rules
   above, so an override has to as well — and being scoped, this selector is more
   specific, which is what decides it between two `!important` declarations. */
.v3-sidebar .nav-sublink {
    padding: 0.3125rem 0.75rem 0.3125rem 1.75rem !important;
    font-size: 0.78125rem !important;
    margin: 0.0625rem 0.5rem !important;
    border-radius: 6px !important;
}

.v3-sidebar .nav-sublink::before {
    left: 0.7rem !important;
    width: 5px !important;
    height: 5px !important;
}

/* The collapsed rail is icon-only, so it needs the icons back at a size that
   reads as a target rather than a dot — the compaction above is for the labelled
   state, where the icon sits beside text and can afford to be smaller. */
.v3-sidebar.sidebar-collapsed .nav-link svg,
.sidebar-collapsed .v3-sidebar .nav-link svg {
    width: 20px;
    height: 20px;
}