/* ================================================================
   TREVORMAIL — Enterprise SaaS Design System
   Version: 2.0.0
   Built: February 2026
   Architecture: ITCSS Layered (Base → Components → Layout → Pages → Themes)
   Naming: BEM Methodology
   Stack: CSS3 + Bootstrap 5 + CSS Custom Properties
   ================================================================ */

/* ================================================================
   1. CSS CUSTOM PROPERTIES (Design Tokens)
   ================================================================ */
:root {
    /* — Primary 10-Step Scale — */
    --primary-50: #EEF2FF;
    --primary-100: #E0E7FF;
    --primary-200: #C7D2FE;
    --primary-300: #A5B4FC;
    --primary-400: #818CF8;
    --primary-500: #6366F1;
    --primary-600: #4F46E5;
    --primary-700: #4338CA;
    --primary-800: #3730A3;
    --primary-900: #312E81;
    --primary: var(--primary-600);
    --primary-hover: var(--primary-700);
    --primary-light: var(--primary-50);
    --primary-rgb: 79, 70, 229;

    /* — Secondary / Accent — */
    --secondary-50: #ECFEFF;
    --secondary-100: #CFFAFE;
    --secondary-200: #A5F3FC;
    --secondary-300: #67E8F9;
    --secondary-400: #22D3EE;
    --secondary-500: #06B6D4;
    --secondary-600: #0891B2;
    --secondary-700: #0E7490;
    --secondary-800: #155E75;
    --secondary-900: #164E63;
    --secondary: var(--secondary-500);
    --secondary-hover: var(--secondary-600);
    --secondary-light: var(--secondary-50);
    --secondary-rgb: 6, 182, 212;

    /* — Semantic Colors — */
    --success: #10B981;
    --success-light: #D1FAE5;
    --success-dark: #059669;
    --warning: #F59E0B;
    --warning-light: #FEF3C7;
    --warning-dark: #D97706;
    --danger: #EF4444;
    --danger-light: #FEE2E2;
    --danger-dark: #DC2626;
    --info: #3B82F6;
    --info-light: #DBEAFE;
    --info-dark: #2563EB;

    /* — Neutral Grayscale (10-step) — */
    --gray-50: #F9FAFB;
    --gray-100: #F3F4F6;
    --gray-200: #E5E7EB;
    --gray-300: #D1D5DB;
    --gray-400: #9CA3AF;
    --gray-500: #6B7280;
    --gray-600: #4B5563;
    --gray-700: #374151;
    --gray-800: #1F2937;
    --gray-900: #111827;
    --gray-950: #030712;

    /* — Layout — */
    --sidebar-bg: #111827;
    --sidebar-width: 260px;
    --sidebar-collapsed: 72px;
    --topbar-height: 64px;
    --body-bg: var(--gray-50);
    --card-bg: #FFFFFF;
    --surface-bg: #FFFFFF;
    --border-color: var(--gray-200);

    /* — Typography — */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
    --fs-2xs: 0.625rem;
    /* 10px */
    --fs-xs: 0.75rem;
    /* 12px */
    --fs-sm: 0.8125rem;
    /* 13px */
    --fs-base: 0.875rem;
    /* 14px */
    --fs-md: 1rem;
    /* 16px */
    --fs-lg: 1.125rem;
    /* 18px */
    --fs-xl: 1.25rem;
    /* 20px */
    --fs-2xl: 1.5rem;
    /* 24px */
    --fs-3xl: 1.875rem;
    /* 30px */
    --fs-4xl: 2.25rem;
    /* 36px */
    --fs-5xl: 3rem;
    /* 48px */
    --fs-6xl: 3.75rem;
    /* 60px */
    --lh-tight: 1.25;
    --lh-normal: 1.5;
    --lh-relaxed: 1.75;

    /* — Spacing (8px base) — */
    --space-px: 1px;
    --space-0: 0;
    --space-0-5: 0.125rem;
    /* 2px  */
    --space-1: 0.25rem;
    /* 4px  */
    --space-1-5: 0.375rem;
    /* 6px  */
    --space-2: 0.5rem;
    /* 8px  */
    --space-3: 0.75rem;
    /* 12px */
    --space-4: 1rem;
    /* 16px */
    --space-5: 1.25rem;
    /* 20px */
    --space-6: 1.5rem;
    /* 24px */
    --space-7: 1.75rem;
    /* 28px */
    --space-8: 2rem;
    /* 32px */
    --space-10: 2.5rem;
    /* 40px */
    --space-12: 3rem;
    /* 48px */
    --space-16: 4rem;
    /* 64px */
    --space-20: 5rem;
    /* 80px */

    /* — Radius — */
    --radius-none: 0;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 20px;
    --radius-3xl: 24px;
    --radius-full: 9999px;

    /* — Elevation / Shadows (5-level system) — */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .05);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .04);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .08), 0 2px 4px -2px rgba(0, 0, 0, .04);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .08), 0 4px 6px -4px rgba(0, 0, 0, .04);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .08), 0 8px 10px -6px rgba(0, 0, 0, .04);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, .15);
    --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, .06);
    --shadow-ring: 0 0 0 3px rgba(79, 70, 229, .15);

    /* — Transitions — */
    --transition-fast: 150ms cubic-bezier(.4, 0, .2, 1);
    --transition-base: 200ms cubic-bezier(.4, 0, .2, 1);
    --transition-smooth: 300ms cubic-bezier(.4, 0, .2, 1);
    --transition-slow: 500ms cubic-bezier(.4, 0, .2, 1);
    --transition-bounce: 500ms cubic-bezier(.34, 1.56, .64, 1);

    /* — Z-Index Scale — */
    --z-base: 1;
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    --z-toast: 1080;
    --z-top: 9999;

    /* — Text Colors (light mode) — */
    --text-primary: var(--gray-900);
    --text-secondary: var(--gray-500);
    --text-muted: var(--gray-400);
    --text-inverse: #FFFFFF;
    --text-link: var(--primary);
    --text-link-hover: var(--primary-700);

    /* — Focus Ring — */
    --focus-ring: 0 0 0 2px var(--card-bg), 0 0 0 4px var(--primary);

    /* — Application Version — */
    --app-version: '2.0.0';
}

/* ================================================================
   1b. DARK MODE OVERRIDES
   ================================================================ */
[data-theme="dark"] {
    --body-bg: #0F172A;
    --card-bg: #1E293B;
    --surface-bg: #1E293B;
    --border-color: #334155;
    --gray-50: #1E293B;
    --gray-100: #334155;
    --gray-200: #475569;
    --gray-300: #64748B;
    --text-primary: #F1F5F9;
    --text-secondary: #94A3B8;
    --text-muted: #64748B;
    --text-link: var(--primary-400);
    --text-link-hover: var(--primary-300);
    --primary-light: rgba(79, 70, 229, .15);
    --secondary-light: rgba(6, 182, 212, .15);
    --success-light: rgba(16, 185, 129, .15);
    --warning-light: rgba(245, 158, 11, .15);
    --danger-light: rgba(239, 68, 68, .15);
    --info-light: rgba(59, 130, 246, .15);
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .4);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, .4);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, .4);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, .4);
    --shadow-2xl: 0 25px 50px rgba(0, 0, 0, .5);
    --shadow-ring: 0 0 0 3px rgba(129, 140, 248, .25);
    --focus-ring: 0 0 0 2px var(--card-bg), 0 0 0 4px var(--primary-400);
}

/* Dark mode: Select & option elements */
[data-theme="dark"] select,
[data-theme="dark"] select.tm-form-control,
[data-theme="dark"] .tm-select-inline,
[data-theme="dark"] .tm-select-filter,
[data-theme="dark"] .tm-select-filter-sm,
[data-theme="dark"] .brevo-rows-select,
[data-theme="dark"] .folder-filter {
    background-color: var(--card-bg);
    color: var(--text-primary);
    border-color: var(--border-color);
    color-scheme: dark;
}

[data-theme="dark"] select option {
    background-color: #1E293B;
    color: #F1F5F9;
}

[data-theme="dark"] select.tm-form-control {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2394A3B8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px;
}

/* System preference detection */
@media (prefers-color-scheme: dark) {
    html:not([data-theme]) {
        --body-bg: #0F172A;
        --card-bg: #1E293B;
        --surface-bg: #1E293B;
        --border-color: #334155;
        --gray-50: #1E293B;
        --gray-100: #334155;
        --gray-200: #475569;
        --text-primary: #F1F5F9;
        --text-secondary: #94A3B8;
        --text-muted: #64748B;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* High contrast mode */
@media (forced-colors: active) {
    :root {
        --border-color: CanvasText;
        --text-primary: CanvasText;
    }
}

/* ================================================================
   2. BASE & RESET
   ================================================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-family);
    font-size: var(--fs-base);
    color: var(--text-primary);
    background: var(--body-bg);
    line-height: 1.6;
    overflow-x: hidden;
    transition: background var(--transition-smooth), color var(--transition-smooth);
}

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

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

img {
    max-width: 100%;
    height: auto;
}

::selection {
    background: var(--primary);
    color: #fff;
}

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

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

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

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

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--gray-600);
}

/* ================================================================
   3. TYPOGRAPHY
   ================================================================ */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
    margin-bottom: var(--space-3);
}

h1,
.h1 {
    font-size: var(--fs-4xl);
    font-weight: 700;
}

h2,
.h2 {
    font-size: var(--fs-3xl);
}

h3,
.h3 {
    font-size: var(--fs-2xl);
}

h4,
.h4 {
    font-size: var(--fs-xl);
}

h5,
.h5 {
    font-size: var(--fs-lg);
}

h6,
.h6 {
    font-size: var(--fs-md);
}

.text-sm {
    font-size: var(--fs-sm) !important;
}

.text-xs {
    font-size: var(--fs-xs) !important;
}

.text-base {
    font-size: var(--fs-base) !important;
}

.text-md {
    font-size: var(--fs-md) !important;
}

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

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

.fw-medium {
    font-weight: 500 !important;
}

.fw-semibold {
    font-weight: 600 !important;
}

.page-title {
    font-size: var(--fs-2xl);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-1);
}

.page-subtitle {
    font-size: var(--fs-base);
    color: var(--text-secondary);
    margin-bottom: 0;
}

/* ================================================================
   4. LAYOUT — SIDEBAR
   ================================================================ */
.tm-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-width);
    height: 100vh;
    background: var(--sidebar-bg);
    z-index: 1040;
    display: flex;
    flex-direction: column;
    transition: width var(--transition-smooth), transform var(--transition-smooth);
    overflow: hidden;
}

/* Logo */
.tm-sidebar-brand {
    display: flex;
    align-items: center;
    padding: var(--space-5) var(--space-6);
    height: var(--topbar-height);
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    flex-shrink: 0;
}

.tm-sidebar-brand .brand-icon {
    width: 36px;
    height: 36px;
    background: var(--primary);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.tm-sidebar-brand .brand-text {
    margin-left: var(--space-3);
    font-size: var(--fs-lg);
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.3px;
    white-space: nowrap;
}

/* Navigation */
.tm-sidebar-nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--space-4) 0;
}

.tm-sidebar-nav::-webkit-scrollbar {
    width: 3px;
}

.tm-sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .15);
    border-radius: 10px;
}

.nav-section-title {
    font-size: var(--fs-xs);
    font-weight: 600;
    color: rgba(255, 255, 255, .35);
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: var(--space-4) var(--space-6) var(--space-2);
    white-space: nowrap;
}

.tm-nav-link {
    display: flex;
    align-items: center;
    padding: var(--space-3) var(--space-6);
    color: rgba(255, 255, 255, .6);
    font-size: var(--fs-base);
    font-weight: 400;
    border-radius: 0;
    transition: all var(--transition-fast);
    position: relative;
    white-space: nowrap;
    text-decoration: none;
    gap: var(--space-3);
}

.tm-nav-link i {
    font-size: 1.15rem;
    width: 22px;
    text-align: center;
    flex-shrink: 0;
    transition: color var(--transition-fast);
}

.tm-nav-link .nav-text {
    flex: 1;
    overflow: hidden;
}

.tm-nav-link .nav-badge {
    background: var(--primary);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: var(--radius-full);
    min-width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.tm-nav-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, .06);
}

.tm-nav-link.active {
    color: #fff;
    background: rgba(79, 70, 229, .25);
}

.tm-nav-link.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 24px;
    background: var(--primary);
    border-radius: 0 4px 4px 0;
}

/* Sidebar user widget */
.tm-sidebar-footer {
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid rgba(255, 255, 255, .07);
    flex-shrink: 0;
}

.tm-sidebar-user {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.tm-sidebar-user .user-avatar {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    background: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 600;
    font-size: var(--fs-sm);
    flex-shrink: 0;
}

.tm-sidebar-user .user-info {
    overflow: hidden;
    white-space: nowrap;
}

.tm-sidebar-user .user-name {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: #fff;
    line-height: 1.3;
}

.tm-sidebar-user .user-email {
    font-size: var(--fs-xs);
    color: rgba(255, 255, 255, .45);
    line-height: 1.3;
}

/* Collapsed sidebar */
.tm-sidebar.collapsed {
    width: var(--sidebar-collapsed);
}

.tm-sidebar.collapsed .brand-text,
.tm-sidebar.collapsed .nav-section-title,
.tm-sidebar.collapsed .nav-text,
.tm-sidebar.collapsed .nav-badge,
.tm-sidebar.collapsed .user-info {
    display: none;
}

.tm-sidebar.collapsed .tm-nav-link {
    justify-content: center;
    padding: var(--space-3) 0;
}

.tm-sidebar.collapsed .tm-nav-link i {
    margin: 0;
    font-size: 1.25rem;
}

.tm-sidebar.collapsed .tm-sidebar-brand {
    justify-content: center;
    padding: var(--space-5) var(--space-3);
}

.tm-sidebar.collapsed .tm-sidebar-brand .brand-icon {
    margin: 0;
}

.tm-sidebar.collapsed .tm-sidebar-user {
    justify-content: center;
}

/* ================================================================
   5. LAYOUT — TOPBAR
   ================================================================ */
.tm-topbar {
    position: fixed;
    top: 0;
    left: var(--sidebar-width);
    right: 0;
    height: var(--topbar-height);
    background: var(--card-bg);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    padding: 0 var(--space-6);
    z-index: 1030;
    transition: left var(--transition-smooth), background var(--transition-smooth), border-color var(--transition-smooth);
}

.sidebar-collapsed .tm-topbar {
    left: var(--sidebar-collapsed);
}

.tm-topbar-left {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex: 1;
}

.tm-topbar-right {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* Sidebar toggle button */
.btn-sidebar-toggle {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    font-size: 1.2rem;
}

.btn-sidebar-toggle:hover {
    background: var(--gray-100);
    color: var(--text-primary);
}

/* Search bar */
.tm-search {
    position: relative;
    width: 320px;
    max-width: 100%;
}

.tm-search .search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: var(--fs-base);
}

.tm-search input {
    width: 100%;
    height: 38px;
    padding: 0 var(--space-4) 0 38px;
    background: var(--gray-50);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    font-size: var(--fs-sm);
    color: var(--text-primary);
    transition: all var(--transition-fast);
}

.tm-search input::placeholder {
    color: var(--text-muted);
}

.tm-search input:focus {
    outline: none;
    border-color: var(--primary);
    background: var(--card-bg);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .1);
}

.tm-search .search-shortcut {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--gray-200);
    color: var(--text-muted);
    font-size: var(--fs-xs);
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 500;
    pointer-events: none;
}

/* Topbar icon buttons */
.tm-topbar-btn {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    position: relative;
    font-size: 1.15rem;
}

.tm-topbar-btn:hover {
    background: var(--gray-100);
    color: var(--text-primary);
}

.tm-topbar-btn .badge-dot {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 8px;
    height: 8px;
    background: var(--danger);
    border-radius: 50%;
    border: 2px solid var(--card-bg);
}

/* Theme toggle */
.theme-toggle {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    font-size: 1.15rem;
}

.theme-toggle:hover {
    background: var(--gray-100);
    color: var(--text-primary);
}

/* Profile dropdown */
.tm-profile-btn {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 4px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: var(--radius-full);
    transition: background var(--transition-fast);
}

.tm-profile-btn:hover {
    background: var(--gray-100);
}

.tm-profile-btn .profile-avatar {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 600;
    font-size: var(--fs-sm);
}

/* Dropdown menus */
.tm-dropdown-menu {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    background: var(--card-bg);
    padding: var(--space-2);
    min-width: 220px;
    animation: dropdownFadeIn var(--transition-fast) ease;
}

@keyframes dropdownFadeIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tm-dropdown-menu .dropdown-header {
    padding: var(--space-3) var(--space-4);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tm-dropdown-menu .dropdown-item {
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--fs-sm);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    transition: background var(--transition-fast);
}

.tm-dropdown-menu .dropdown-item:hover {
    background: var(--gray-50);
}

.tm-dropdown-menu .dropdown-item i {
    width: 18px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 1rem;
}

.tm-dropdown-menu .dropdown-divider {
    margin: var(--space-2) 0;
    border-color: var(--border-color);
}

/* Dark mode fix for dropdown text */
[data-theme="dark"] .tm-dropdown-menu {
    color: var(--text-primary);
}

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

[data-theme="dark"] .tm-dropdown-menu .dropdown-item:hover {
    background: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .tm-dropdown-menu .dropdown-item i {
    color: var(--text-secondary);
}

[data-theme="dark"] .tm-dropdown-menu .dropdown-header {
    color: var(--text-muted);
}

/* ── Brevo Bulk Actions Dropdown ── */
.brevo-dropdown-menu {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    background: var(--card-bg);
    padding: 0.5rem;
    min-width: 200px;
    animation: dropdownFadeIn var(--transition-fast) ease;
}

.brevo-dropdown-menu .dropdown-item {
    padding: 0.5rem 0.85rem;
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: background 0.15s;
}

.brevo-dropdown-menu .dropdown-item:hover {
    background: var(--gray-100);
    color: var(--text-primary);
}

.brevo-dropdown-menu .dropdown-item i {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.brevo-dropdown-menu .dropdown-item.text-danger {
    color: var(--danger) !important;
}

.brevo-dropdown-menu .dropdown-item.text-danger i {
    color: var(--danger);
}

.brevo-dropdown-menu .dropdown-item.text-danger:hover {
    background: rgba(220, 38, 38, 0.08);
}

.brevo-dropdown-menu .dropdown-divider {
    margin: 0.35rem 0;
    border-color: var(--border-color);
}

[data-theme="dark"] .brevo-dropdown-menu {
    background: var(--card-bg);
    border-color: var(--border-color);
}

[data-theme="dark"] .brevo-dropdown-menu .dropdown-item:hover {
    background: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .brevo-dropdown-menu .dropdown-item.text-danger:hover {
    background: rgba(220, 38, 38, 0.12);
}

/* Notification list inside dropdown */
.notification-list {
    max-height: 380px;
    overflow-y: auto;
}

.notification-item {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    transition: background var(--transition-fast);
    cursor: pointer;
    position: relative;
    text-decoration: none;
    color: inherit;
    border-left: 3px solid var(--primary);
}

.notification-item:hover {
    background: var(--gray-50);
    color: inherit;
    text-decoration: none;
}

.notification-item.notif-read {
    border-left-color: transparent;
    opacity: 0.7;
}

.notification-item.notif-read:hover {
    opacity: 1;
}

.notification-item .notif-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.notification-item .notif-content {
    flex: 1;
    min-width: 0;
}

.notification-item .notif-text {
    font-size: var(--fs-sm);
    color: var(--text-primary);
    line-height: 1.4;
}

.notification-item .notif-time {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    margin-top: 2px;
}

/* Notification delete button */
.notif-delete-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 1rem;
    cursor: pointer;
    border-radius: var(--radius-sm);
    opacity: 0;
    transition: all var(--transition-fast);
    line-height: 1;
    padding: 0;
}

.notification-item:hover .notif-delete-btn {
    opacity: 1;
}

.notif-delete-btn:hover {
    background: var(--danger-light);
    color: var(--danger);
}

/* Notification count label */
.notif-count-label,
.msg-count-label {
    font-size: .7rem;
    font-weight: 500;
    opacity: .8;
    text-transform: none;
    letter-spacing: 0;
}

/* ── Message Dropdown ── */
.dropdown-menu-messages {
    width: 380px;
}

.message-list {
    max-height: 380px;
    overflow-y: auto;
}

.message-item {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    transition: background var(--transition-fast);
    cursor: pointer;
    position: relative;
    border-left: 3px solid var(--info);
}

.message-item:hover {
    background: var(--gray-50);
}

.message-item.msg-read {
    border-left-color: transparent;
    opacity: 0.7;
}

.message-item.msg-read:hover {
    opacity: 1;
}

.msg-avatar {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
    color: #fff;
}

.msg-avatar-primary {
    background: var(--primary);
}

.msg-avatar-success {
    background: var(--success);
}

.msg-avatar-warning {
    background: var(--warning);
}

.msg-avatar-danger {
    background: var(--danger);
}

.msg-avatar-info {
    background: var(--info);
}

.msg-content {
    flex: 1;
    min-width: 0;
}

.msg-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.msg-sender {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.msg-time {
    font-size: .7rem;
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

.msg-subject {
    font-size: .8rem;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.3;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.msg-body {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    line-height: 1.35;
    margin-top: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Message delete button */
.msg-delete-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 1rem;
    cursor: pointer;
    border-radius: var(--radius-sm);
    opacity: 0;
    transition: all var(--transition-fast);
    line-height: 1;
    padding: 0;
}

.message-item:hover .msg-delete-btn {
    opacity: 1;
}

.msg-delete-btn:hover {
    background: var(--danger-light);
    color: var(--danger);
}

/* Dark mode for notifications & messages */
[data-theme="dark"] .notification-item:hover,
[data-theme="dark"] .message-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .notif-delete-btn:hover,
[data-theme="dark"] .msg-delete-btn:hover {
    background: rgba(220, 38, 38, 0.15);
}

/* ================================================================
   6. LAYOUT — MAIN CONTENT
   ================================================================ */
.tm-main {
    margin-left: var(--sidebar-width);
    padding-top: var(--topbar-height);
    min-height: 100vh;
    transition: margin-left var(--transition-smooth);
}

.sidebar-collapsed .tm-main {
    margin-left: var(--sidebar-collapsed);
}

.tm-content {
    padding: var(--space-8);
}

/* Page header */
.tm-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-bottom: var(--space-8);
}

.tm-page-header .page-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

/* Breadcrumb */
.tm-breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-sm);
    color: var(--text-muted);
    margin-bottom: var(--space-2);
}

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

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

.tm-breadcrumb .separator {
    color: var(--gray-300);
}

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

/* ================================================================
   7. CARDS
   ================================================================ */
.tm-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    transition: box-shadow var(--transition-smooth), border-color var(--transition-smooth), background var(--transition-smooth);
}

.tm-card:hover {
    box-shadow: var(--shadow-sm);
}

.tm-card-header {
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.tm-card-header .card-title {
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.tm-card-body {
    padding: var(--space-6);
}

.tm-card-footer {
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--border-color);
}

/* ================================================================
   8. STAT CARDS
   ================================================================ */
.stat-card {
    padding: var(--space-6);
    position: relative;
    overflow: hidden;
}

.stat-card .stat-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    margin-bottom: var(--space-4);
}

.stat-card .stat-value {
    font-size: var(--fs-3xl);
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.1;
    margin-bottom: var(--space-1);
}

.stat-card .stat-label {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    font-weight: 500;
}

.stat-card .stat-change {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--fs-xs);
    font-weight: 600;
    margin-top: var(--space-3);
    padding: 2px 8px;
    border-radius: var(--radius-full);
}

.stat-change.positive {
    color: var(--success);
    background: var(--success-light);
}

.stat-change.negative {
    color: var(--danger);
    background: var(--danger-light);
}

.stat-card .stat-decoration {
    position: absolute;
    bottom: -20px;
    right: -20px;
    font-size: 6rem;
    opacity: .04;
    color: var(--text-primary);
}

/* ================================================================
   9. BUTTONS
   ================================================================ */
.btn-tm-primary {
    background: var(--primary);
    color: #fff;
    border: none;
    padding: var(--space-2) var(--space-5);
    font-size: var(--fs-sm);
    font-weight: 500;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
}

.btn-tm-primary:hover {
    background: var(--primary-hover);
    color: #fff;
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), .35);
    transform: translateY(-1px);
}

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

.btn-tm-secondary {
    background: var(--gray-100);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    padding: var(--space-2) var(--space-5);
    font-size: var(--fs-sm);
    font-weight: 500;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
}

.btn-tm-secondary:hover {
    background: var(--gray-200);
    color: var(--text-primary);
    border-color: var(--gray-300);
}

.btn-tm-outline {
    background: transparent;
    color: var(--primary);
    border: 1px solid var(--primary);
    padding: var(--space-2) var(--space-5);
    font-size: var(--fs-sm);
    font-weight: 500;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
}

.btn-tm-outline:hover {
    background: var(--primary);
    color: #fff;
}

.btn-tm-ghost {
    background: transparent;
    color: var(--text-secondary);
    border: none;
    padding: var(--space-2) var(--space-4);
    font-size: var(--fs-sm);
    font-weight: 500;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
}

.btn-tm-ghost:hover {
    background: var(--gray-100);
    color: var(--text-primary);
}

.btn-tm-danger {
    background: var(--danger);
    color: #fff;
    border: none;
    padding: var(--space-2) var(--space-5);
    font-size: var(--fs-sm);
    font-weight: 500;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
}

.btn-tm-danger:hover {
    background: #DC2626;
    color: #fff;
    box-shadow: 0 4px 12px rgba(239, 68, 68, .3);
}

.btn-tm-success {
    background: var(--success);
    color: #fff;
    border: none;
    padding: var(--space-2) var(--space-5);
    font-size: var(--fs-sm);
    font-weight: 500;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
}

.btn-tm-success:hover {
    background: #059669;
    color: #fff;
}

.btn-tm-warning {
    background: var(--warning);
    color: #fff;
    border: none;
    padding: var(--space-2) var(--space-5);
    font-size: var(--fs-sm);
    font-weight: 500;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
}

.btn-tm-warning:hover {
    background: #D97706;
    color: #fff;
    box-shadow: 0 4px 12px rgba(245, 158, 11, .3);
}

.btn-icon {
    width: 36px;
    height: 36px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-icon:hover {
    background: var(--gray-100);
    color: var(--text-primary);
    border-color: var(--gray-300);
}

.btn-sm-custom {
    padding: 4px 12px;
    font-size: var(--fs-xs);
}

.btn-lg-custom {
    padding: var(--space-3) var(--space-8);
    font-size: var(--fs-md);
}

/* ================================================================
   10. FORM ELEMENTS
   ================================================================ */
.tm-form-group {
    margin-bottom: var(--space-5);
}

.tm-form-label {
    display: block;
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}

.tm-form-control {
    width: 100%;
    height: 42px;
    padding: 0 var(--space-4);
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: var(--fs-base);
    color: var(--text-primary);
    transition: all var(--transition-fast);
    font-family: inherit;
}

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

.tm-form-control:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .12);
}

.tm-form-control.is-invalid {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .1);
}

.tm-form-control.is-valid {
    border-color: var(--success);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, .1);
}

textarea.tm-form-control {
    height: auto;
    padding: var(--space-3) var(--space-4);
    resize: vertical;
    min-height: 100px;
}

select.tm-form-control {
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px;
    padding-right: 36px;
}

.tm-form-hint {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    margin-top: var(--space-1);
}

.tm-form-error {
    font-size: var(--fs-xs);
    color: var(--danger);
    margin-top: var(--space-1);
}

/* Tag Checkbox Selectors (modal) */
.tm-tag-check {
    display: inline-flex;
    cursor: pointer;
}

.tm-tag-check input[type="checkbox"] {
    display: none;
}

.tm-tag-check-label {
    display: inline-block;
    padding: 4px 12px;
    font-size: var(--fs-xs);
    font-weight: 500;
    border-radius: var(--radius-full);
    border: 1.5px solid var(--border);
    background: transparent;
    color: var(--text-secondary);
    transition: all .15s ease;
    user-select: none;
}

.tm-tag-check input:checked+.tm-tag-check-label {
    border-color: var(--tag-color, var(--primary));
    background: var(--tag-color, var(--primary));
    color: #fff;
}

.tm-tag-check-label:hover {
    border-color: var(--tag-color, var(--primary));
    opacity: .85;
}

/* Floating labels */
.tm-floating-label {
    position: relative;
}

.tm-floating-label .tm-form-control {
    height: 52px;
    padding-top: 18px;
}

.tm-floating-label label {
    position: absolute;
    top: 50%;
    left: var(--space-4);
    transform: translateY(-50%);
    font-size: var(--fs-base);
    color: var(--text-muted);
    pointer-events: none;
    transition: all var(--transition-fast);
}

.tm-floating-label .tm-form-control:focus~label,
.tm-floating-label .tm-form-control:not(:placeholder-shown)~label {
    top: 12px;
    transform: none;
    font-size: var(--fs-xs);
    color: var(--primary);
    font-weight: 500;
}

/* Password toggle */
.password-toggle {
    position: relative;
}

.password-toggle .toggle-btn {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    font-size: 1rem;
    transition: color var(--transition-fast);
}

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

/* Toggle switch */
.tm-switch {
    position: relative;
    width: 44px;
    height: 24px;
    display: inline-block;
}

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

.tm-switch .slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: var(--gray-300);
    border-radius: var(--radius-full);
    transition: background var(--transition-fast);
}

.tm-switch .slider::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform var(--transition-fast);
    box-shadow: var(--shadow-xs);
}

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

.tm-switch input:checked+.slider::before {
    transform: translateX(20px);
}

/* Checkbox / Radio custom */
.tm-check {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    font-size: var(--fs-sm);
    color: var(--text-primary);
}

.tm-check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
    cursor: pointer;
}

/* File upload */
.tm-file-upload {
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-10) var(--space-8);
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-fast);
    background: var(--gray-50);
}

.tm-file-upload:hover {
    border-color: var(--primary);
    background: var(--primary-light);
}

.tm-file-upload .upload-icon {
    font-size: 2.5rem;
    color: var(--text-muted);
    margin-bottom: var(--space-3);
}

.tm-file-upload .upload-text {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
}

.tm-file-upload .upload-text strong {
    color: var(--primary);
}

/* ================================================================
   11. TABLES
   ================================================================ */
.tm-table-wrapper {
    overflow-x: auto;
}

.tm-table {
    width: 100%;
    font-size: var(--fs-sm);
}

.tm-table thead th {
    background: var(--gray-50);
    font-weight: 600;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
    cursor: default;
}

.tm-table thead th.sortable {
    cursor: pointer;
    user-select: none;
}

.tm-table thead th.sortable:hover {
    color: var(--text-primary);
}

.tm-table tbody td {
    padding: var(--space-4);
    vertical-align: middle;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}

.tm-table tbody tr {
    transition: background var(--transition-fast);
}

.tm-table tbody tr:hover {
    background: var(--gray-50);
}

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

/* Table actions */
.table-actions {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

/* ================================================================
   12. BADGES & TAGS
   ================================================================ */
.tm-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    font-size: var(--fs-xs);
    font-weight: 600;
    white-space: nowrap;
}

.tm-badge-primary {
    background: var(--primary-light);
    color: var(--primary);
}

.tm-badge-success {
    background: var(--success-light);
    color: var(--success);
}

.tm-badge-warning {
    background: var(--warning-light);
    color: var(--warning);
}

.tm-badge-danger {
    background: var(--danger-light);
    color: var(--danger);
}

.tm-badge-info {
    background: var(--info-light);
    color: var(--info);
}

.tm-badge-secondary {
    background: var(--gray-100);
    color: var(--text-secondary);
}

.tm-badge-dot::before {
    content: '';
    width: 6px;
    height: 6px;
    background: currentColor;
    border-radius: 50%;
}

/* ================================================================
   13. ALERTS & TOASTS
   ================================================================ */
.tm-alert {
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-md);
    font-size: var(--fs-sm);
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.tm-alert-primary {
    background: var(--primary-light);
    color: var(--primary);
    border-left: 3px solid var(--primary);
}

.tm-alert-success {
    background: var(--success-light);
    color: #065F46;
    border-left: 3px solid var(--success);
}

.tm-alert-warning {
    background: var(--warning-light);
    color: #92400E;
    border-left: 3px solid var(--warning);
}

.tm-alert-danger {
    background: var(--danger-light);
    color: #991B1B;
    border-left: 3px solid var(--danger);
}

.tm-alert-info {
    background: var(--info-light);
    color: #1E40AF;
    border-left: 3px solid var(--info);
}

.tm-alert .alert-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: 1px;
}

.tm-alert .alert-content {
    flex: 1;
}

.tm-alert .alert-title {
    font-weight: 600;
    margin-bottom: 2px;
}

/* Toasts */
.tm-toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.tm-toast {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    padding: var(--space-4) var(--space-5);
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    min-width: 320px;
    max-width: 420px;
    animation: toastSlideIn var(--transition-smooth) ease;
}

@keyframes toastSlideIn {
    from {
        opacity: 0;
        transform: translateX(40px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.tm-toast .toast-close {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
    font-size: 1rem;
    margin-left: auto;
}

/* ================================================================
   14. MODALS
   ================================================================ */
.tm-modal {
    z-index: 1060 !important;
}

.tm-modal .modal-dialog {
    z-index: 1061;
}

.tm-modal .modal-content {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-2xl);
    background: var(--card-bg);
}

.tm-modal .modal-header {
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--border-color);
}

.tm-modal .modal-title {
    font-size: var(--fs-lg);
    font-weight: 600;
}

.tm-modal .modal-body {
    padding: var(--space-6);
}

.tm-modal .modal-footer {
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--border-color);
    gap: var(--space-3);
}

/* Default */
.tm-modal .btn-close {
    filter: none;
}

/* Dark mode */
[data-theme="dark"] .tm-modal .btn-close {
    filter: invert(1);
}

/* System preference dark mode fallback */
@media (prefers-color-scheme: dark) {
    html:not([data-theme]) .tm-modal .btn-close {
        filter: invert(1);
    }
}

/* ── Modal text colors for theme ── */
.tm-modal .modal-title {
    color: var(--text-primary);
}

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

.tm-modal .modal-body p {
    color: var(--text-secondary);
}

.tm-modal .modal-body .text-muted-custom {
    color: var(--text-muted) !important;
}

/* ── Bootstrap modal backdrop override ── */
.tm-modal .modal-header,
.tm-modal .modal-footer {
    background: var(--card-bg);
}

.tm-modal .modal-body {
    background: var(--card-bg);
}

/* ================================================================
   15. TABS
   ================================================================ */
.tm-tabs {
    border-bottom: 1px solid var(--border-color);
    display: flex;
    gap: 0;
    overflow-x: auto;
}

.tm-tab-link {
    padding: var(--space-3) var(--space-5);
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--text-secondary);
    border: none;
    background: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.tm-tab-link:hover {
    color: var(--text-primary);
}

.tm-tab-link.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

/* ================================================================
   16. PAGINATION
   ================================================================ */
.tm-pagination {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.tm-pagination .page-btn {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--card-bg);
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.tm-pagination .page-btn:hover {
    background: var(--gray-100);
    color: var(--text-primary);
}

.tm-pagination .page-btn.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

.tm-pagination .page-btn:disabled {
    opacity: .4;
    cursor: not-allowed;
}

/* ================================================================
   17. PROGRESS BARS
   ================================================================ */
.tm-progress {
    height: 6px;
    border-radius: var(--radius-full);
    background: var(--gray-100);
    overflow: hidden;
}

.tm-progress-bar {
    height: 100%;
    border-radius: var(--radius-full);
    background: var(--primary);
    transition: width var(--transition-slow);
}

.tm-progress-bar.success {
    background: var(--success);
}

.tm-progress-bar.warning {
    background: var(--warning);
}

.tm-progress-bar.danger {
    background: var(--danger);
}

/* ================================================================
   18. ACTIVITY TIMELINE
   ================================================================ */
.tm-timeline {
    position: relative;
    padding-left: 28px;
}

.tm-timeline::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 4px;
    bottom: 4px;
    width: 2px;
    background: var(--border-color);
}

.tm-timeline-item {
    position: relative;
    padding-bottom: var(--space-6);
}

.tm-timeline-item:last-child {
    padding-bottom: 0;
}

.tm-timeline-item .timeline-dot {
    position: absolute;
    left: -22px;
    top: 4px;
    width: 12px;
    height: 12px;
    background: var(--primary);
    border-radius: 50%;
    border: 2px solid var(--card-bg);
    box-shadow: 0 0 0 2px var(--primary);
}

.tm-timeline-item .timeline-dot.success {
    background: var(--success);
    box-shadow: 0 0 0 2px var(--success);
}

.tm-timeline-item .timeline-dot.warning {
    background: var(--warning);
    box-shadow: 0 0 0 2px var(--warning);
}

.tm-timeline-item .timeline-dot.danger {
    background: var(--danger);
    box-shadow: 0 0 0 2px var(--danger);
}

.tm-timeline-item .timeline-dot.primary {
    background: var(--primary);
    box-shadow: 0 0 0 2px var(--primary);
}

.tm-timeline-item .timeline-content {
    font-size: var(--fs-sm);
    color: var(--text-primary);
}

.tm-timeline-item .timeline-time {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    margin-top: 4px;
}

/* ================================================================
   19. EMPTY STATE
   ================================================================ */
.tm-empty-state {
    text-align: center;
    padding: var(--space-12) var(--space-8);
}

.tm-empty-state .empty-icon {
    font-size: 4rem;
    color: var(--gray-300);
    margin-bottom: var(--space-4);
}

.tm-empty-state .empty-title {
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}

.tm-empty-state .empty-text {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    max-width: 360px;
    margin: 0 auto var(--space-5);
}

/* ================================================================
   20. SKELETON LOADING
   ================================================================ */
.tm-skeleton {
    background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-200) 50%, var(--gray-100) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-md);
}

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

    100% {
        background-position: 200% 0;
    }
}

.skeleton-text {
    height: 14px;
    margin-bottom: var(--space-2);
    width: 80%;
}

.skeleton-text.short {
    width: 50%;
}

.skeleton-text.shorter {
    width: 30%;
}

.skeleton-avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
}

.skeleton-card {
    height: 120px;
    width: 100%;
}

/* ================================================================
   21. WIZARD / STEPPER
   ================================================================ */
.tm-stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: var(--space-8);
}

.tm-step {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.tm-step .step-number {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    background: var(--gray-200);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-secondary);
    flex-shrink: 0;
    transition: all var(--transition-fast);
}

.tm-step .step-label {
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--text-secondary);
    white-space: nowrap;
}

.tm-step.active .step-number {
    background: var(--primary);
    color: #fff;
}

.tm-step.active .step-label {
    color: var(--primary);
    font-weight: 600;
}

.tm-step.completed .step-number {
    background: var(--success);
    color: #fff;
}

.tm-step.completed .step-label {
    color: var(--success);
}

.tm-step-connector {
    width: 60px;
    height: 2px;
    background: var(--gray-200);
    margin: 0 var(--space-2);
    flex-shrink: 0;
}

.tm-step-connector.completed {
    background: var(--success);
}

/* ================================================================
   22. AUTH PAGES
   ================================================================ */
.auth-wrapper {
    min-height: 100vh;
    display: flex;
}

.auth-illustration {
    flex: 1;
    background: linear-gradient(135deg, var(--primary) 0%, #7C3AED 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-12);
    position: relative;
    overflow: hidden;
}

.auth-illustration::before {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    background: rgba(255, 255, 255, .08);
    border-radius: 50%;
    top: -100px;
    right: -100px;
}

.auth-illustration::after {
    content: '';
    position: absolute;
    width: 300px;
    height: 300px;
    background: rgba(255, 255, 255, .05);
    border-radius: 50%;
    bottom: -80px;
    left: -80px;
}

.auth-illustration-content {
    position: relative;
    z-index: 1;
    text-align: center;
    color: #fff;
    max-width: 480px;
}

.auth-illustration-content .auth-logo-big {
    font-size: 5rem;
    margin-bottom: var(--space-6);
    opacity: .9;
}

.auth-illustration-content h2 {
    font-size: var(--fs-3xl);
    font-weight: 700;
    color: #fff;
    margin-bottom: var(--space-4);
}

.auth-illustration-content p {
    font-size: var(--fs-md);
    color: rgba(255, 255, 255, .8);
    line-height: 1.7;
}

.auth-form-side {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-8);
    background: var(--card-bg);
}

.auth-form-container {
    width: 100%;
    max-width: 420px;
}

.auth-brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-8);
}

.auth-brand .brand-icon {
    width: 42px;
    height: 42px;
    background: var(--primary);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.2rem;
}

.auth-brand .brand-name {
    font-size: var(--fs-xl);
    font-weight: 700;
    color: var(--text-primary);
}

.auth-title {
    font-size: var(--fs-2xl);
    font-weight: 700;
    margin-bottom: var(--space-2);
}

.auth-subtitle {
    font-size: var(--fs-base);
    color: var(--text-secondary);
    margin-bottom: var(--space-8);
}

.auth-divider {
    display: flex;
    align-items: center;
    margin: var(--space-6) 0;
    gap: var(--space-4);
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-color);
}

.auth-divider span {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    font-weight: 500;
    text-transform: uppercase;
}

.social-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--card-bg);
    color: var(--text-primary);
    font-size: var(--fs-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.social-btn:hover {
    background: var(--gray-50);
    border-color: var(--gray-300);
}

.social-btn img {
    width: 20px;
    height: 20px;
}

/* OTP Input */
.otp-inputs {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
    margin: var(--space-8) 0;
}

.otp-input {
    width: 54px;
    height: 54px;
    text-align: center;
    font-size: var(--fs-2xl);
    font-weight: 700;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--card-bg);
    color: var(--text-primary);
    transition: all var(--transition-fast);
}

.otp-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .12);
}

/* ================================================================
   23. CAMPAIGN-SPECIFIC STYLES
   ================================================================ */
.campaign-status-icon {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
}

.campaign-card {
    cursor: pointer;
}

.campaign-card:hover {
    border-color: var(--primary);
}

/* Template blocks (email builder placeholders) */
.template-block {
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-fast);
    background: var(--gray-50);
    margin-bottom: var(--space-3);
}

.template-block:hover {
    border-color: var(--primary);
    background: var(--primary-light);
}

.template-block i {
    font-size: 1.5rem;
    color: var(--text-muted);
    display: block;
    margin-bottom: var(--space-2);
}

.template-block span {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
}

/* ================================================================
   24. CHARTS PLACEHOLDER
   ================================================================ */
.chart-container {
    position: relative;
    width: 100%;
}

.chart-placeholder {
    width: 100%;
    height: 280px;
    background: var(--gray-50);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

/* ================================================================
   25. SETTINGS SPECIFIC
   ================================================================ */
.settings-nav .list-group-item {
    border: none;
    padding: var(--space-3) var(--space-4);
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--text-secondary);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    background: transparent;
}

.settings-nav .list-group-item:hover {
    background: var(--gray-100);
    color: var(--text-primary);
}

.settings-nav .list-group-item.active {
    background: var(--primary-light);
    color: var(--primary);
    font-weight: 600;
}

.plan-card {
    border: 2px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    text-align: center;
    transition: all var(--transition-fast);
    position: relative;
}

.plan-card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-lg);
}

.plan-card.popular {
    border-color: var(--primary);
}

.plan-card .plan-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary);
    color: #fff;
    font-size: var(--fs-xs);
    font-weight: 600;
    padding: 4px 16px;
    border-radius: var(--radius-full);
}

.plan-card .plan-name {
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-3);
}

.plan-card .plan-price {
    font-size: var(--fs-4xl);
    font-weight: 700;
    color: var(--text-primary);
}

.plan-card .plan-price span {
    font-size: var(--fs-base);
    font-weight: 400;
    color: var(--text-muted);
}

.plan-card .plan-features {
    list-style: none;
    padding: 0;
    margin: var(--space-6) 0;
    text-align: left;
}

.plan-card .plan-features li {
    padding: var(--space-2) 0;
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.plan-card .plan-features li i {
    color: var(--success);
}

/* ================================================================
   26. AUTOMATION WORKFLOW
   ================================================================ */
.workflow-canvas {
    min-height: 500px;
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    border: 2px dashed var(--border-color);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-8);
    gap: var(--space-2);
}

.workflow-node {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-6);
    min-width: 240px;
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-fast);
    cursor: pointer;
}

.workflow-node:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--primary);
}

.workflow-node .node-icon {
    font-size: 1.5rem;
    margin-bottom: var(--space-2);
}

.workflow-node .node-title {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-primary);
}

.workflow-node .node-desc {
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

.workflow-connector {
    width: 2px;
    height: 30px;
    background: var(--gray-300);
    position: relative;
}

.workflow-connector::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid var(--gray-300);
}

.workflow-add-btn {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    border: 2px dashed var(--gray-300);
    background: var(--card-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.workflow-add-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-light);
}

/* ================================================================
   27. ANIMATIONS & UTILITIES
   ================================================================ */
.fade-in {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

.slide-in-left {
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.slide-in-left.visible {
    opacity: 1;
    transform: translateX(0);
}

/* Hover lift */
.hover-lift {
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.hover-lift:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* Gap utilities */
.gap-1 {
    gap: var(--space-1);
}

.gap-2 {
    gap: var(--space-2);
}

.gap-3 {
    gap: var(--space-3);
}

.gap-4 {
    gap: var(--space-4);
}

.gap-5 {
    gap: var(--space-5);
}

/* ================================================================
   28. RESPONSIVE DESIGN
   ================================================================ */
@media (max-width: 1199.98px) {
    .tm-content {
        padding: var(--space-6);
    }
}

@media (max-width: 991.98px) {

    /* Sidebar: off-canvas on tablet */
    .tm-sidebar {
        transform: translateX(-100%);
        box-shadow: none;
    }

    .tm-sidebar.mobile-open {
        transform: translateX(0);
        box-shadow: var(--shadow-2xl);
    }

    .tm-topbar {
        left: 0 !important;
    }

    .tm-main {
        margin-left: 0 !important;
    }

    /* Overlay */
    .sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .4);
        z-index: 1035;
        backdrop-filter: blur(2px);
    }

    .sidebar-overlay.show {
        display: block;
    }

    /* Auth pages */
    .auth-illustration {
        display: none;
    }

    .auth-form-side {
        padding: var(--space-6) var(--space-5);
    }

    /* Settings sidebar → horizontal scrollable tabs on tablet */
    .settings-nav .list-group {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        gap: var(--space-2);
        padding-bottom: var(--space-2);
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .settings-nav .list-group::-webkit-scrollbar {
        display: none;
    }

    .settings-nav .list-group-item {
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* List detail header wrap */
    .list-detail-header {
        flex-wrap: wrap;
        gap: 1rem;
    }

    .list-navigation {
        width: 100%;
        justify-content: flex-end;
    }
}

@media (max-width: 767.98px) {
    .tm-content {
        padding: var(--space-4);
    }

    .tm-page-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .page-title,
    .tm-page-title {
        font-size: var(--fs-xl);
    }

    .page-subtitle,
    .tm-page-subtitle {
        font-size: var(--fs-sm);
    }

    .stat-card .stat-value {
        font-size: var(--fs-2xl);
    }

    .tm-search {
        width: 100%;
    }

    .otp-input {
        width: 44px;
        height: 44px;
        font-size: var(--fs-lg);
    }

    .tm-stepper {
        flex-direction: column;
        gap: var(--space-4);
    }

    .tm-step-connector {
        width: 2px;
        height: 24px;
    }

    /* Page actions: wrap buttons */
    .page-actions {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2);
        width: 100%;
    }

    .page-actions .btn-tm-primary,
    .page-actions .btn-tm-secondary,
    .page-actions .btn-tm-danger,
    .page-actions .btn-tm-ghost,
    .page-actions .btn-tm-outline {
        flex: 1 1 auto;
        justify-content: center;
    }

    /* Filter bar: stack and full-width */
    .tm-filter-bar {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3);
        padding: var(--space-3) var(--space-4);
    }

    .tm-filter-bar .d-flex,
    .tm-filter-bar .filter-row {
        flex-wrap: wrap;
        gap: var(--space-2);
    }

    .tm-search-input {
        width: 100% !important;
        min-width: 0;
    }

    .tm-select-filter,
    .tm-select-filter-sm {
        width: 100%;
        min-width: 0;
        flex: 1 1 auto;
    }

    /* Contact detail: action buttons responsive */
    .contact-actions {
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    .btn-contact-action {
        min-width: 44px;
        padding: 0.4rem 0.5rem;
    }

    .btn-contact-action span {
        display: none;
    }

    /* Contact title row: prevent overflow */
    .contact-title-row {
        flex-wrap: wrap;
        min-width: 0;
    }

    .contact-title-row .page-title {
        font-size: var(--fs-lg);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 100%;
    }

    /* Contact tags inline: wrap */
    .contact-tags-inline {
        flex-wrap: wrap;
    }

    /* Contact detail header */
    .contact-detail-header {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    /* List detail header */
    .list-detail-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .list-title-row .page-title {
        font-size: var(--fs-lg);
    }

    /* Table: truncate long text cells */
    .tm-table td {
        max-width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Hide less important table columns on mobile */
    .col-folder,
    .col-id,
    .col-date,
    .col-subscribed,
    .col-last-active,
    .col-added {
        display: none;
    }

    /* Topbar: tighter padding */
    .tm-topbar {
        padding: 0 var(--space-3);
    }

    .tm-topbar-left {
        gap: var(--space-2);
    }

    .tm-topbar-right {
        gap: var(--space-1);
    }

    /* Card headers: wrap on mobile */
    .tm-card-header {
        flex-wrap: wrap;
        gap: var(--space-2);
    }

    /* Notification dropdown: fit viewport */
    .dropdown-menu-notifications {
        width: calc(100vw - var(--space-6));
        max-width: 360px;
    }

    /* Messages dropdown: fit viewport */
    .dropdown-menu-messages {
        width: calc(100vw - var(--space-6));
        max-width: 360px;
    }

    /* Date range picker */
    .date-range-picker {
        width: 100%;
    }

    .date-range-picker select {
        width: 100%;
    }
}

@media (max-width: 575.98px) {
    .tm-content {
        padding: var(--space-3);
    }

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

    /* Page actions: full-width buttons */
    .page-actions {
        flex-direction: column;
    }

    .page-actions .btn-tm-primary,
    .page-actions .btn-tm-secondary,
    .page-actions .btn-tm-danger,
    .page-actions .btn-tm-ghost,
    .page-actions .btn-tm-outline,
    .page-actions .dropdown {
        width: 100%;
    }

    .page-actions .dropdown .btn-tm-secondary,
    .page-actions .dropdown .dropdown-toggle {
        width: 100%;
        justify-content: center;
    }

    /* Stats grid: single column */
    .stats-grid {
        grid-template-columns: 1fr 1fr;
    }

    /* Contact actions: 2-row icon grid */
    .contact-actions {
        justify-content: center;
    }

    /* Topbar search shortcut hide */
    .search-shortcut {
        display: none;
    }

    /* Modal adjustments */
    .tm-modal .modal-dialog {
        margin: var(--space-3);
    }

    /* Card body tighter padding */
    .tm-card-body {
        padding: var(--space-3) var(--space-4);
    }

    /* Breadcrumb smaller */
    .tm-breadcrumb {
        font-size: var(--fs-xs);
    }

    /* Row columns stack better */
    .row.g-4 {
        --bs-gutter-y: 0.75rem;
        --bs-gutter-x: 0;
    }
}

/* ================================================================
   29. QUICK ACTION CARDS
   ================================================================ */
.qa-card {
    display: block;
    text-decoration: none;
    border-radius: var(--radius-xl);
    padding: var(--space-7) var(--space-6);
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.qa-card:hover {
    transform: translateY(-4px);
}

/* Color Variants */
.qa-card--indigo {
    background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
    box-shadow: 0 4px 20px rgba(79, 70, 229, 0.25);
}

.qa-card--indigo:hover {
    box-shadow: 0 8px 30px rgba(79, 70, 229, 0.35);
}

.qa-card--green {
    background: linear-gradient(135deg, #059669 0%, #10B981 100%);
    box-shadow: 0 4px 20px rgba(16, 185, 129, 0.25);
}

.qa-card--green:hover {
    box-shadow: 0 8px 30px rgba(16, 185, 129, 0.35);
}

.qa-card--purple {
    background: linear-gradient(135deg, #7C3AED 0%, #A855F7 100%);
    box-shadow: 0 4px 20px rgba(124, 58, 237, 0.25);
}

.qa-card--purple:hover {
    box-shadow: 0 8px 30px rgba(124, 58, 237, 0.35);
}

.qa-card--amber {
    background: linear-gradient(135deg, #D97706 0%, #F59E0B 100%);
    box-shadow: 0 4px 20px rgba(245, 158, 11, 0.25);
}

.qa-card--amber:hover {
    box-shadow: 0 8px 30px rgba(245, 158, 11, 0.35);
}

/* Decorative circles */
.qa-card__decor-1,
.qa-card__decor-2 {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.qa-card__decor-1 {
    top: -20px;
    right: -20px;
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.1);
}

.qa-card__decor-2 {
    bottom: -10px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.06);
}

/* Icon box */
.qa-card__icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-4);
    backdrop-filter: blur(4px);
}

.qa-card__icon i {
    font-size: 1.25rem;
    color: #fff;
}

/* Text */
.qa-card__title {
    font-weight: 700;
    font-size: var(--fs-base);
    color: #fff;
    margin-bottom: 2px;
}

.qa-card__desc {
    font-size: var(--fs-xs);
    color: rgba(255, 255, 255, 0.75);
}

.qa-card__cta {
    margin-top: var(--space-4);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    transition: gap 0.2s ease;
}

.qa-card:hover .qa-card__cta {
    gap: 8px;
}

/* ================================================================
   30. ACCESSIBILITY & SKIP LINKS
   ================================================================ */
.skip-to-content {
    position: absolute;
    top: -100%;
    left: var(--space-4);
    z-index: var(--z-top);
    background: var(--primary);
    color: var(--text-inverse);
    padding: var(--space-3) var(--space-6);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    font-weight: 600;
    font-size: var(--fs-sm);
    transition: top var(--transition-fast);
    text-decoration: none;
}

.skip-to-content:focus {
    top: 0;
    color: var(--text-inverse);
}

/* Focus visible ring */
:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* Screen reader only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ================================================================
   31. KEYBOARD SHORTCUTS MODAL
   ================================================================ */
.kbd-shortcuts-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    backdrop-filter: blur(4px);
    z-index: var(--z-modal);
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--transition-base);
}

.kbd-shortcuts-overlay.active {
    display: flex;
    opacity: 1;
}

.kbd-shortcuts-panel {
    background: var(--card-bg);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    width: 90%;
    max-width: 560px;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: var(--shadow-2xl);
}

.kbd-shortcuts-panel h3 {
    font-size: var(--fs-xl);
    font-weight: 700;
    margin-bottom: var(--space-6);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.kbd-section {
    margin-bottom: var(--space-6);
}

.kbd-section__title {
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: var(--space-3);
}

.kbd-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--border-color);
    font-size: var(--fs-sm);
    color: var(--text-secondary);
}

.kbd-row:last-child {
    border-bottom: none;
}

kbd {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--gray-100) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-sm);
    padding: 2px 8px;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--text-primary) !important;
    box-shadow: 0 2px 0 var(--gray-300), var(--shadow-xs);
    min-width: 24px;
    justify-content: center;
}

[data-theme="dark"] kbd {
    background: #293548 !important;
    border-color: #475569 !important;
    color: #e2e8f0 !important;
    box-shadow: 0 2px 0 #0f172a, 0 1px 3px rgba(0, 0, 0, .3);
}

/* ================================================================
   32. OFFLINE BANNER
   ================================================================ */
.offline-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-top);
    background: var(--warning);
    color: var(--gray-900);
    text-align: center;
    padding: var(--space-2) var(--space-4);
    font-size: var(--fs-sm);
    font-weight: 600;
    transform: translateY(-100%);
    transition: transform var(--transition-smooth);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}

.offline-banner.visible {
    transform: translateY(0);
}

.offline-banner i {
    font-size: var(--fs-md);
}

/* ================================================================
   33. HELP CHATBOT BUTTON
   ================================================================ */
.help-fab {
    position: fixed;
    bottom: var(--space-6);
    right: var(--space-6);
    z-index: var(--z-sticky);
    width: 56px;
    height: 56px;
    border-radius: var(--radius-full);
    background: var(--primary);
    color: var(--text-inverse);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: var(--shadow-lg), 0 4px 20px rgba(var(--primary-rgb), .3);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.help-fab:hover {
    transform: scale(1.08);
    box-shadow: var(--shadow-xl), 0 8px 30px rgba(var(--primary-rgb), .4);
}

.help-fab__badge {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 18px;
    height: 18px;
    background: var(--danger);
    border-radius: var(--radius-full);
    border: 2px solid var(--card-bg);
    font-size: 9px;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ================================================================
   34. APP FOOTER / VERSION
   ================================================================ */
.app-footer {
    padding: var(--space-6) var(--space-8);
    text-align: center;
    font-size: var(--fs-xs);
    color: var(--text-muted);
    border-top: 1px solid var(--border-color);
    margin-top: var(--space-8);
}

.app-footer a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.app-footer a:hover {
    color: var(--primary);
}

.app-footer__version {
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    background: var(--gray-100);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    display: inline-block;
    margin-top: var(--space-1);
}

/* ================================================================
   35. MOBILE BOTTOM NAVIGATION
   ================================================================ */
.mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--z-sticky);
    background: var(--card-bg);
    border-top: 1px solid var(--border-color);
    display: none;
    padding: var(--space-1) 0 calc(var(--space-1) + env(safe-area-inset-bottom));
    box-shadow: 0 -2px 10px rgba(0, 0, 0, .06);
}

@media (max-width: 767.98px) {
    .mobile-bottom-nav {
        display: flex;
    }

    .tm-main {
        padding-bottom: 72px;
    }
}

.mobile-bottom-nav__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-2) 0;
    font-size: var(--fs-2xs);
    color: var(--text-muted);
    text-decoration: none;
    transition: color var(--transition-fast);
    gap: 2px;
    min-height: 44px;
    border: none;
    background: none;
    cursor: pointer;
}

.mobile-bottom-nav__item i {
    font-size: 1.2rem;
}

.mobile-bottom-nav__item.active,
.mobile-bottom-nav__item:hover {
    color: var(--primary);
}

/* ================================================================
   36. SIDE DRAWER / PANEL
   ================================================================ */
.side-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .4);
    backdrop-filter: blur(2px);
    z-index: var(--z-modal);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-smooth), visibility var(--transition-smooth);
}

.side-drawer-overlay.active {
    opacity: 1;
    visibility: visible;
}

.side-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 480px;
    max-width: 90vw;
    background: var(--card-bg);
    z-index: calc(var(--z-modal) + 1);
    transform: translateX(100%);
    transition: transform var(--transition-smooth);
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-2xl);
}

.side-drawer-overlay.active+.side-drawer,
.side-drawer.active {
    transform: translateX(0);
}

.side-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-6);
    border-bottom: 1px solid var(--border-color);
}

.side-drawer__header h3 {
    font-size: var(--fs-lg);
    font-weight: 700;
    margin: 0;
}

.side-drawer__body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-6);
}

.side-drawer__footer {
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
}

/* ================================================================
   37. CONFIRMATION DIALOG
   ================================================================ */
.confirm-dialog {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .5);
    backdrop-filter: blur(4px);
}

.confirm-dialog.active {
    display: flex;
}

.confirm-dialog__card {
    background: var(--card-bg);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    width: 90%;
    max-width: 420px;
    text-align: center;
    box-shadow: var(--shadow-2xl);
}

.confirm-dialog__icon {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-5);
    font-size: 1.75rem;
}

.confirm-dialog__icon--danger {
    background: var(--danger-light);
    color: var(--danger);
}

.confirm-dialog__icon--warning {
    background: var(--warning-light);
    color: var(--warning);
}

.confirm-dialog__title {
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}

.confirm-dialog__text {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    margin-bottom: var(--space-6);
    line-height: var(--lh-relaxed);
}

.confirm-dialog__actions {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
}

/* ================================================================
   38. ANALYTICS PAGE STYLES
   ================================================================ */
.analytics-metric-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    transition: box-shadow var(--transition-base);
}

.analytics-metric-card:hover {
    box-shadow: var(--shadow-md);
}

.analytics-metric-card__label {
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin-bottom: var(--space-2);
}

.analytics-metric-card__value {
    font-size: var(--fs-3xl);
    font-weight: 800;
    color: var(--text-primary);
    line-height: var(--lh-tight);
}

.analytics-metric-card__change {
    font-size: var(--fs-xs);
    font-weight: 600;
    margin-top: var(--space-2);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.analytics-metric-card__change--up {
    color: var(--success);
}

.analytics-metric-card__change--down {
    color: var(--danger);
}

.analytics-metric-card__sparkline {
    margin-top: var(--space-4);
    height: 40px;
}

.date-range-picker {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-4);
    font-size: var(--fs-sm);
    color: var(--text-primary);
    cursor: pointer;
    transition: border-color var(--transition-fast);
}

.date-range-picker:hover {
    border-color: var(--primary);
}

.date-range-picker i {
    color: var(--text-muted);
}

.tm-select-inline {
    background: transparent;
    border: none;
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
    padding: var(--space-1) var(--space-2);
    outline: none;
}

.tm-select-inline:focus {
    outline: none;
}

/* ── Client Dot Indicators ───────────────────────── */
.client-dot {
    width: 10px;
    height: 10px;
    border-radius: var(--radius-full);
    display: inline-block;
    flex-shrink: 0;
}

.client-dot-gmail {
    background: #EA4335;
}

.client-dot-apple {
    background: #555;
}

.client-dot-outlook {
    background: #0078D4;
}

.client-dot-yahoo {
    background: #6001D2;
}

.client-dot-other {
    background: var(--gray-400);
}

/* ── Heatmap Cells ───────────────────────────────── */
.heatmap-cell {
    padding: var(--space-4) var(--space-3);
    border-radius: var(--radius-md);
    text-align: center;
    transition: transform var(--transition-fast);
}

.heatmap-cell:hover {
    transform: translateY(-2px);
}

.heatmap-time {
    font-weight: 700;
    font-size: var(--fs-sm);
    margin-bottom: var(--space-1);
}

.heatmap-val {
    font-size: var(--fs-xs);
    opacity: .85;
}

.heatmap-high {
    background: var(--success);
    color: #fff;
}

.heatmap-medium {
    background: var(--primary);
    color: #fff;
}

.heatmap-low {
    background: var(--primary-200);
    color: var(--primary-800);
}

[data-theme="dark"] .heatmap-low {
    background: rgba(99, 102, 241, .25);
    color: var(--primary-300);
}

/* ── Tip Bar ─────────────────────────────────────── */
.tm-tip-bar {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--warning-light);
    border-radius: var(--radius-md);
    font-size: var(--fs-sm);
    color: var(--text-primary);
}

.tm-tip-bar i {
    color: var(--warning);
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: 1px;
}

/* ================================================================
   39. AUTOMATION BUILDER STYLES
   ================================================================ */
.workflow-canvas {
    background: var(--gray-50);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    min-height: 600px;
    position: relative;
    overflow: hidden;
    background-image:
        radial-gradient(circle, var(--gray-200) 1px, transparent 1px);
    background-size: 20px 20px;
}

[data-theme="dark"] .workflow-canvas {
    background-image:
        radial-gradient(circle, var(--gray-200) 0.5px, transparent 0.5px);
}

.workflow-node {
    background: var(--card-bg);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5);
    min-width: 200px;
    max-width: 280px;
    position: absolute;
    cursor: grab;
    transition: box-shadow var(--transition-base), border-color var(--transition-base);
    z-index: var(--z-base);
}

.workflow-node:hover {
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-300);
}

.workflow-node.active {
    border-color: var(--primary);
    box-shadow: var(--shadow-ring);
}

.workflow-node__header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}

.workflow-node__icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-md);
    flex-shrink: 0;
}

.workflow-node__icon--trigger {
    background: var(--success-light);
    color: var(--success);
}

.workflow-node__icon--action {
    background: var(--primary-light);
    color: var(--primary);
}

.workflow-node__icon--condition {
    background: var(--warning-light);
    color: var(--warning);
}

.workflow-node__icon--delay {
    background: var(--info-light);
    color: var(--info);
}

.workflow-node__title {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-primary);
}

.workflow-node__subtitle {
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

.workflow-connector {
    position: absolute;
    width: 2px;
    background: var(--border-color);
    left: 50%;
    transform: translateX(-50%);
}

.workflow-connector::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid var(--border-color);
}

/* Workflow sidebar */
.workflow-sidebar {
    background: var(--card-bg);
    border-left: 1px solid var(--border-color);
    width: 280px;
    overflow-y: auto;
}

.workflow-block {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-2);
    cursor: grab;
    transition: all var(--transition-fast);
    font-size: var(--fs-sm);
    background: var(--card-bg);
}

.workflow-block:hover {
    border-color: var(--primary);
    background: var(--primary-light);
}

.workflow-block i {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-base);
}

/* ================================================================
   40. ERROR PAGES (404/500/Maintenance)
   ================================================================ */
.error-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--body-bg);
    padding: var(--space-8);
}

.error-page__content {
    text-align: center;
    max-width: 500px;
}

.error-page__code {
    font-size: clamp(5rem, 15vw, 10rem);
    font-weight: 900;
    line-height: 1;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: var(--space-4);
}

.error-page__title {
    font-size: var(--fs-2xl);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-3);
}

.error-page__text {
    font-size: var(--fs-base);
    color: var(--text-secondary);
    line-height: var(--lh-relaxed);
    margin-bottom: var(--space-8);
}

.error-page__illustration {
    width: 200px;
    height: 200px;
    margin: 0 auto var(--space-8);
    border-radius: var(--radius-full);
    background: var(--primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    color: var(--primary);
}

/* ================================================================
   41. LOADING BUTTON STATE
   ================================================================ */
.btn-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.btn-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border: 2px solid rgba(255, 255, 255, .3);
    border-top-color: #fff;
    border-radius: var(--radius-full);
    animation: btnSpin 0.6s linear infinite;
}

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

/* Spin icon animation */
.spin-icon {
    display: inline-block;
    animation: btnSpin 1s linear infinite;
}

/* ================================================================
   42. PRINT STYLES
   ================================================================ */
@media print {

    .tm-sidebar,
    .tm-topbar,
    .sidebar-overlay,
    .mobile-bottom-nav,
    .help-fab,
    .offline-banner,
    .tm-toast-container {
        display: none !important;
    }

    .tm-main {
        margin-left: 0 !important;
        padding-top: 0 !important;
    }

    body {
        background: #fff;
        color: #000;
    }

    .tm-card {
        border: 1px solid #ddd;
        box-shadow: none;
        break-inside: avoid;
    }

    a[href]::after {
        content: ' (' attr(href) ')';
        font-size: 0.8em;
        color: #666;
    }
}

/* ================================================================
   43. REFACTORED INLINE STYLES — Reusable Utility Classes
   Extracted from inline style= attributes across all HTML files.
   Classes follow BEM-inspired naming and are grouped by function.
   ================================================================ */

/* ---------- 43a. Avatar / Icon Circles ---------- */
.tm-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    font-weight: 600;
    flex-shrink: 0;
}

.tm-avatar-sm {
    width: 36px;
    height: 36px;
    font-size: .75rem;
}

.tm-avatar-md {
    width: 48px;
    height: 48px;
    font-size: 1.25rem;
}

.tm-avatar-lg {
    width: 64px;
    height: 64px;
}

.tm-avatar-xl {
    width: 72px;
    height: 72px;
}

.tm-avatar-xxl {
    width: 80px;
    height: 80px;
    font-size: 1.5rem;
    font-weight: 700;
}

/* Avatar gradient backgrounds */
.tm-avatar-gradient-indigo {
    background: linear-gradient(135deg, #4F46E5, #06B6D4);
}

.tm-avatar-gradient-fire {
    background: linear-gradient(135deg, #F59E0B, #EF4444);
}

.tm-avatar-gradient-teal {
    background: linear-gradient(135deg, #10B981, #06B6D4);
}

.tm-avatar-gradient-pink {
    background: linear-gradient(135deg, #8B5CF6, #EC4899);
}

.tm-avatar-gradient-sunset {
    background: linear-gradient(135deg, #F97316, #FBBF24);
}

.tm-avatar-gradient-brand {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
}

.tm-avatar-gray {
    background: var(--gray-200);
    color: var(--text-secondary);
}

/* Success confirmation circles */
.tm-success-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--success-light);
    margin-bottom: var(--space-4);
}

.tm-success-circle-md {
    width: 64px;
    height: 64px;
}

.tm-success-circle-lg {
    width: 72px;
    height: 72px;
}

/* ---------- 43b. Stat & Notification Icon Color Variants ---------- */
.stat-icon-primary {
    background: var(--primary-light);
    color: var(--primary);
}

.stat-icon-success {
    background: var(--success-light);
    color: var(--success);
}

.stat-icon-warning {
    background: var(--warning-light);
    color: var(--warning);
}

.stat-icon-danger {
    background: var(--danger-light);
    color: var(--danger);
}

.stat-icon-info {
    background: var(--info-light);
    color: var(--info);
}

.stat-icon-secondary {
    background: var(--secondary-light);
    color: var(--secondary);
}

.notif-icon-success {
    background: var(--success-light);
    color: var(--success);
}

.notif-icon-warning {
    background: var(--warning-light);
    color: var(--warning);
}

.notif-icon-info {
    background: var(--info-light);
    color: var(--info);
}

.notif-icon-primary {
    background: var(--primary-light);
    color: var(--primary);
}

.notif-icon-danger {
    background: var(--danger-light);
    color: var(--danger);
}

/* ---------- 43c. Button Variants ---------- */
.btn-icon-sm {
    width: 30px;
    height: 30px;
}

.btn-icon-xs {
    width: 26px;
    height: 26px;
}

.btn-icon-danger {
    color: var(--danger);
}

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

.btn-icon-active {
    background: var(--primary-light);
    color: var(--primary);
    border-color: var(--primary);
}

.btn-auth {
    height: 44px;
    font-size: var(--fs-md);
}

.btn-auth-full {
    height: 44px;
    font-size: var(--fs-md);
    display: inline-flex;
    width: 100%;
}

.btn-ghost-danger {
    color: var(--danger);
}

.btn-resend-otp {
    color: var(--primary);
    font-size: var(--fs-sm);
}

.btn-tab-active {
    background: var(--primary-light);
    color: var(--primary);
}

/* ---------- 43d. Checkbox / Radio Accent ---------- */
.tm-checkbox,
.tm-radio {
    accent-color: var(--primary);
}

/* ---------- 43e. Text Utilities ---------- */
.text-auth-footer {
    color: var(--text-secondary);
}

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

.text-link-sm {
    font-size: .75rem;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
}

.text-link-xs {
    font-size: .8rem;
}

.text-user-name {
    font-size: var(--fs-sm);
    color: var(--text-primary);
}

.text-user-email {
    font-size: var(--fs-xs);
    color: var(--text-secondary);
}

.link-update {
    color: inherit;
    font-weight: 600;
}

/* ---------- 43f. Auth Page Specific ---------- */
.auth-stat-value {
    font-size: var(--fs-3xl);
    font-weight: 700;
}

.auth-stat-label {
    font-size: var(--fs-sm);
    opacity: .8;
}

.auth-illustration-register {
    background: linear-gradient(135deg, #7C3AED 0%, #4F46E5 50%, #06B6D4 100%);
}

.auth-illustration-forgot {
    background: linear-gradient(135deg, #F59E0B 0%, #EF4444 100%);
}

.auth-illustration-otp {
    background: linear-gradient(135deg, #06B6D4 0%, #4F46E5 100%);
}

.auth-illustration-reset {
    background: linear-gradient(135deg, #10B981 0%, #06B6D4 100%);
}

.auth-pill-badge {
    background: rgba(255, 255, 255, .15);
    padding: 8px 16px;
    border-radius: var(--radius-full);
}

.auth-pill-text {
    font-size: var(--fs-sm);
}

/* ---------- 43g. Progress Bar Variants ---------- */
.tm-progress-w40 {
    width: 40px;
}

.tm-progress-w50 {
    width: 50px;
}

.tm-progress-w60 {
    width: 60px;
}

.tm-progress-w120 {
    width: 120px;
}

.tm-progress-h4 {
    height: 4px;
}

.tm-progress-h6 {
    height: 6px;
}

.tm-progress-h8 {
    height: 8px;
}

/* Analytics-specific progress bar colors */
.tm-progress-bar-gmail {
    background: #EA4335;
}

.tm-progress-bar-dark {
    background: #555;
}

.tm-progress-bar-outlook {
    background: #0078D4;
}

.tm-progress-bar-yahoo {
    background: #6001D2;
}

/* ---------- 43h. Chart Containers ---------- */
.chart-container {
    position: relative;
    width: 100%;
}

.chart-container-220 {
    height: 220px;
}

.chart-container-240 {
    height: 240px;
}

.chart-container-260 {
    height: 260px;
}

.chart-container-280 {
    height: 280px;
}

.chart-container-320 {
    height: 320px;
}

/* Chart legend dots */
.chart-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.chart-legend-dot-success {
    background: var(--success);
}

.chart-legend-dot-primary {
    background: var(--primary);
}

.chart-legend-dot-secondary {
    background: var(--secondary);
}

.chart-legend-dot-danger {
    background: var(--danger);
}

/* ---------- 43i. Dropdown Menu Sizing ---------- */
.dropdown-menu-notifications {
    width: 380px;
}

.dropdown-menu-actions {
    min-width: 280px;
}

/* ---------- 43j. Filter Bar & Form Controls ---------- */
.tm-filter-bar {
    padding: var(--space-4) var(--space-5);
}

.tm-search-input {
    width: 260px;
}

.tm-select-filter {
    width: 160px;
    height: 38px;
}

.tm-select-filter-sm {
    width: 150px;
    height: 38px;
}

.tm-select-rule-op {
    width: 80px;
}

.tm-form-control-sm {
    height: 36px;
    font-size: var(--fs-sm);
}

.tm-form-control-xs {
    height: 36px;
    font-size: var(--fs-xs);
}

/* ---------- 43k. Table Column Widths ---------- */
.table-col-checkbox {
    width: 40px;
}

.table-col-actions {
    width: 80px;
}

/* ---------- 43l. Layout Utilities ---------- */
.wizard-card {
    max-width: 700px;
    margin: 0 auto;
}

.tm-sticky-panel {
    position: sticky;
    top: calc(var(--topbar-height) + var(--space-8));
}

.tm-info-panel {
    background: var(--gray-50);
    border-radius: var(--radius-md);
}

.tm-card-compact {
    padding: var(--space-4);
}

.tm-card-flush {
    padding: 0;
}

.pos-relative {
    position: relative;
}

.email-preview-canvas {
    background: var(--gray-50);
    padding: var(--space-6);
}

/* Hidden utility (no !important — works with jQuery show/hide/slide/fade) */
.tm-hidden {
    display: none;
}

/* Max-width utilities */
.mw-440 {
    max-width: 440px;
}

.mw-480 {
    max-width: 480px;
}

.mw-500 {
    max-width: 500px;
}

.mw-600 {
    max-width: 600px;
}

.mw-400-center {
    max-width: 400px;
    margin: 0 auto;
}

/* ---------- 43m. Color Picker ---------- */
.color-picker-input {
    width: 36px;
    height: 36px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    padding: 2px;
}

/* ---------- 43n. Integration Icons ---------- */
.tm-integration-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.tm-integration-zapier {
    background: #FF4A00;
}

.tm-integration-slack {
    background: #4A154B;
}

.tm-integration-salesforce {
    background: #00A1E0;
}

.tm-integration-ga {
    background: #E37400;
}

.tm-integration-shopify {
    background: #96BF48;
}

.tm-integration-wordpress {
    background: #21759B;
}

/* ---------- 43o. Inline Code ---------- */
.tm-code-inline {
    background: var(--gray-100);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: var(--fs-xs);
}

/* ---------- 43p. Password Toggle ---------- */
.btn-toggle-password {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
}

/* ---------- 43q. Icon Utilities ---------- */
.password-req-icon {
    font-size: 0.5rem;
}

.icon-microsoft {
    font-size: 1.1rem;
    color: #00A4EF;
}

.icon-success-md {
    font-size: 2rem;
    color: var(--success);
}

.icon-success-lg {
    font-size: 2.5rem;
    color: var(--success);
}

.icon-success-check {
    color: var(--success);
}

.icon-2x {
    font-size: 2rem;
}

/* ---------- 43r. Settings Row Separator ---------- */
.settings-row-separator {
    border-bottom: 1px solid var(--border-color);
}

/* ---------- 43s. DNS Record Table Cell ---------- */
.td-monospace-break {
    max-width: 300px;
    word-break: break-all;
}

/* ---------- 43t. Plan Name ---------- */
.plan-name-primary {
    color: var(--primary);
}

/* ---------- 43u. Component Page Specific ---------- */
.comp-page-title {
    font-size: var(--fs-lg);
    font-weight: 700;
    margin: 0;
}

.comp-section-last {
    border-bottom: none;
}

/* ---------- 43v. Automation Empty State ---------- */
.automation-empty {
    padding-top: 40px;
}

/* ---------- 43w. Maintenance Page ---------- */
.maintenance-gradient-text {
    background: linear-gradient(135deg, var(--warning), var(--warning-dark, #d97706));
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.maintenance-tools-icon {
    font-size: 4rem;
    -webkit-text-fill-color: var(--warning);
}

/* ---------- 43x. Email Preview (create-campaign) ---------- */
.email-preview-wrapper {
    background: #fff;
    max-width: 600px;
    margin: 0 auto;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.email-preview-header {
    background: linear-gradient(135deg, #4F46E5, #7C3AED);
    padding: 32px;
    text-align: center;
}

.email-preview-logo {
    font-size: 1.5rem;
    color: #fff;
    font-weight: 700;
}

.email-preview-hero {
    background: var(--gray-100);
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

.email-preview-body {
    padding: 32px;
}

.email-preview-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 12px;
    color: #111827;
}

.email-preview-text {
    font-size: .9rem;
    color: #6B7280;
    line-height: 1.7;
    margin-bottom: 20px;
}

.email-preview-cta-wrap {
    text-align: center;
    margin: 24px 0;
}

.email-preview-cta {
    display: inline-block;
    background: #4F46E5;
    color: #fff;
    padding: 12px 32px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    font-size: .95rem;
}

.email-preview-cta:hover {
    color: #fff;
    opacity: .9;
}

.email-preview-features {
    display: flex;
    gap: 16px;
    margin: 24px 0;
}

.email-preview-feature-card {
    flex: 1;
    background: var(--gray-50);
    padding: 16px;
    border-radius: 8px;
    text-align: center;
}

.email-preview-feature-emoji {
    font-size: 2rem;
}

.email-preview-feature-title {
    font-size: .85rem;
    font-weight: 600;
    margin-top: 4px;
}

.email-preview-feature-price {
    font-size: .8rem;
    color: #6B7280;
}

.email-preview-hr {
    border: none;
    border-top: 1px solid #E5E7EB;
    margin: 24px 0;
}

.email-preview-disclaimer {
    font-size: .8rem;
    color: #9CA3AF;
    text-align: center;
}

.email-preview-footer {
    background: var(--gray-50);
    padding: 20px 32px;
    text-align: center;
}

.email-preview-social-link {
    color: #6B7280;
    margin: 0 8px;
    font-size: 1.1rem;
}

.email-preview-footer-text {
    font-size: .75rem;
    color: #9CA3AF;
    margin: 0;
}

.email-preview-footer-link {
    color: #9CA3AF;
}

/* ---------- 43y. Skeleton Demo Variants ---------- */
.tm-skeleton-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

.tm-skeleton-title {
    width: 40%;
    height: 14px;
    margin-bottom: 8px;
}

.tm-skeleton-subtitle {
    width: 25%;
    height: 12px;
}

.tm-skeleton-line {
    width: 100%;
    height: 14px;
    margin-bottom: 10px;
}

.tm-skeleton-line-90 {
    width: 90%;
    height: 14px;
    margin-bottom: 10px;
}

.tm-skeleton-line-70 {
    width: 70%;
    height: 14px;
}

/* ---------- 43z. HR Utility ---------- */
.hr-border-color {
    border-color: var(--border-color);
}

/* ---------- 43aa. Quick Action Icon Background (components) ---------- */
.quick-action-icon-primary {
    background: var(--primary-light);
    color: var(--primary);
}





/* contacts.php page css custome */

/* MINIMAL CSS - SIRF FOLDER/LIST SELECTOR KE LIYE */
.folder-selector {
    position: relative;
    width: 100%;
}

.selector-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.875rem;
    cursor: pointer;
}

.selector-trigger:hover {
    border-color: var(--primary);
}

.folder-selector.active .selector-trigger i {
    transform: rotate(180deg);
}

.selector-dropdown {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    width: 100%;
    max-width: 380px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    display: none;
}

.folder-selector.active .selector-dropdown {
    display: block;
}

.folders-view,
.lists-view {
    padding: 0.75rem;
}

.lists-view {
    display: none;
}

.active-view {
    display: block;
}

.dropdown-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 0.75rem;
    font-weight: 600;
}

.back-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--primary);
    text-decoration: none;
}

.dropdown-search {
    position: relative;
    margin-bottom: 0.75rem;
}

.dropdown-search i {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
}

.dropdown-search input {
    width: 100%;
    padding: 0.6rem 0.75rem 0.6rem 2rem;
    background: var(--gray-50);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
}

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

.folders-list {
    max-height: 280px;
    overflow-y: auto;
}

.folder-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.75rem;
    border-radius: var(--radius-md);
    cursor: pointer;
    margin-bottom: 2px;
}

.folder-item:hover {
    background: var(--gray-100);
}

.folder-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.folder-info i {
    color: #fbbf24;
}

.folder-count {
    font-size: 0.75rem;
    color: var(--text-muted);
    background: var(--gray-100);
    padding: 2px 8px;
    border-radius: 20px;
    margin-left: 8px;
}

.select-all-row {
    background: var(--gray-50);
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-md);
    margin-bottom: 0.5rem;
}

.lists-container {
    max-height: 280px;
    overflow-y: auto;
    margin-bottom: 0.5rem;
}

.dropdown-option {
    padding: 0.5rem 0.75rem;
}

.dropdown-option:hover {
    background: var(--gray-100);
    border-radius: var(--radius-md);
}

.tm-custom-checkbox {
    display: flex;
    align-items: center;
    position: relative;
    padding-left: 1.75rem;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--text-primary);
}

.tm-custom-checkbox input {
    position: absolute;
    opacity: 0;
}

.checkmark {
    position: absolute;
    left: 0;
    height: 1.125rem;
    width: 1.125rem;
    background: var(--card-bg);
    border: 2px solid var(--border-color);
    border-radius: 4px;
}

.tm-custom-checkbox input:checked~.checkmark {
    background: var(--primary);
    border-color: var(--primary);
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
    left: 0.35rem;
    top: 0.15rem;
    width: 0.25rem;
    height: 0.5rem;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.tm-custom-checkbox input:checked~.checkmark:after {
    display: block;
}

.dropdown-footer {
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
    margin-top: 0.5rem;
}

.dropdown-footer a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--primary);
    text-decoration: none;
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-md);
}

.dropdown-footer a:hover {
    background: var(--gray-100);
}

.selected-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.tm-list-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.5rem 0.25rem 0.75rem;
    background: var(--gray-100);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    font-size: 0.75rem;
    color: var(--text-primary);
}

.tm-list-badge i {
    cursor: pointer;
    padding: 2px;
    border-radius: 50%;
}

.tm-list-badge i:hover {
    background: var(--danger);
    color: white;
}

/* ── INLINE CREATE FORM (Folder / List) ── */
.inline-create-form {
    border-top: 1px solid var(--border-color);
    background: var(--gray-50);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    overflow: hidden;
    animation: slideDown 0.2s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        max-height: 0;
    }

    to {
        opacity: 1;
        max-height: 200px;
    }
}

.inline-form-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem 0.25rem;
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--text-primary);
}

.inline-form-header i {
    color: var(--primary);
    font-size: 1rem;
}

.inline-form-body {
    padding: 0.5rem 1rem;
}

.inline-form-body .tm-form-control {
    font-size: 0.8125rem;
    padding: 0.55rem 0.75rem;
    border-radius: var(--radius-md);
    background: var(--card-bg);
}

.inline-form-body .tm-form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
}

.inline-form-error {
    font-size: 0.75rem;
    color: var(--danger);
    margin-top: 0.25rem;
    min-height: 1rem;
}

.inline-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.25rem 1rem 0.75rem;
}

.btn-inline-cancel {
    padding: 0.4rem 0.85rem;
    font-size: 0.8125rem;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-primary);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-weight: 500;
    transition: all 0.15s;
}

.btn-inline-cancel:hover {
    background: var(--gray-100);
}

.btn-inline-save {
    padding: 0.4rem 1rem;
    font-size: 0.8125rem;
    border: none;
    background: var(--primary);
    color: white;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    transition: all 0.15s;
}

.btn-inline-save:hover {
    background: var(--primary-hover);
}

.btn-inline-save:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-inline-save .spinner-border {
    width: 0.85rem;
    height: 0.85rem;
    border-width: 2px;
}

/* Success flash animation for new items */
@keyframes flashGreen {
    0% {
        background: rgba(16, 185, 129, 0.15);
    }

    100% {
        background: transparent;
    }
}

.folder-item.just-created,
.dropdown-option.just-created {
    animation: flashGreen 1.5s ease;
}

/* ═══════════════════════════════════════════════════ */
/* BREVO-STYLE CONTACTS TABLE                         */
/* ═══════════════════════════════════════════════════ */

/* Table Card */
.brevo-table-card {
    border-radius: var(--radius-lg);
    overflow: visible;
}

/* Info Bar */
.brevo-table-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
    gap: 1rem;
    flex-wrap: wrap;
}

.table-info-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.contact-count-text {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
}

.table-info-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.brevo-icon-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem;
    font-size: 0.8125rem;
    color: var(--text-secondary, var(--gray-600));
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.15s;
}

.brevo-icon-btn:hover {
    background: var(--gray-100);
    color: var(--text-primary);
}

.brevo-search-mini {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--card-bg);
}

.brevo-search-mini i {
    color: var(--gray-400);
    font-size: 0.8125rem;
}

.brevo-search-mini input {
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.8125rem;
    color: var(--text-primary);
    width: 100px;
}

.brevo-search-mini input::placeholder {
    color: var(--gray-400);
}

/* ── Brevo Checkbox ── */
.brevo-checkbox {
    width: 1rem;
    height: 1rem;
    border-radius: 3px;
    border: 2px solid var(--gray-300);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    position: relative;
    background: var(--card-bg);
    transition: all 0.15s;
    flex-shrink: 0;
}

.brevo-checkbox:checked {
    background: var(--primary);
    border-color: var(--primary);
}

.brevo-checkbox:checked::after {
    content: '';
    position: absolute;
    left: 3.5px;
    top: 1px;
    width: 5px;
    height: 9px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.brevo-checkbox:indeterminate {
    background: var(--primary);
    border-color: var(--primary);
}

.brevo-checkbox:indeterminate::after {
    content: '';
    position: absolute;
    left: 2px;
    top: 5.5px;
    width: 8px;
    height: 2px;
    background: white;
    border-radius: 1px;
}

/* ── Table Styles ── */
.brevo-table {
    width: 100%;
    border-collapse: collapse;
}

.brevo-table thead th {
    padding: 0.7rem 1rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--gray-500);
    background: var(--gray-50);
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
    user-select: none;
}

.brevo-table thead th.sortable {
    cursor: pointer;
}

.brevo-table thead th.sortable:hover {
    color: var(--text-primary);
}

.brevo-table thead th.sortable:hover .sort-icon {
    opacity: 0.8;
}

.brevo-table thead th.sortable .sort-icon {
    font-size: 0.625rem;
    opacity: 0.4;
    margin-left: 4px;
    transition: opacity 0.15s, transform 0.15s;
}

.brevo-table thead th.sortable.sort-asc,
.brevo-table thead th.sortable.sort-desc {
    color: var(--primary);
}

.brevo-table thead th.sortable.sort-asc .sort-icon,
.brevo-table thead th.sortable.sort-desc .sort-icon {
    opacity: 1;
    color: var(--primary);
}

.brevo-table thead th.sortable i {
    font-size: 0.625rem;
    opacity: 0.4;
    margin-left: 2px;
}

/* ── Customize Columns Dropdown ── */
.customize-columns-dropdown {
    position: relative;
}

.customize-columns-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    min-width: 220px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 100;
}

.customize-columns-menu.show {
    display: block;
}

.customize-columns-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
}

.btn-reset-columns {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    color: var(--primary);
    background: transparent;
    border: none;
    cursor: pointer;
}

.btn-reset-columns:hover {
    text-decoration: underline;
}

.customize-columns-list {
    padding: 0.5rem 0;
}

.column-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.15s;
}

.column-toggle:hover {
    background: var(--gray-50);
}

.column-toggle input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--primary);
}

.column-toggle input[type="checkbox"]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.column-toggle .badge-required {
    margin-left: auto;
    padding: 0.15rem 0.4rem;
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--gray-500);
    background: var(--gray-100);
    border-radius: var(--radius-sm);
}

.brevo-table thead th.col-check {
    width: 44px;
    text-align: center;
}

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

.brevo-table tbody td.col-check {
    text-align: center;
    width: 44px;
}

.brevo-table tbody tr {
    transition: background 0.1s;
}

.brevo-table tbody tr:hover {
    background: rgba(var(--primary-rgb), 0.03);
}

.brevo-table tbody tr.row-selected {
    background: rgba(var(--primary-rgb), 0.06);
}

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

/* Contact Name Link */
.contact-name-link,
.list-name-link {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.8125rem;
}

.contact-name-link:hover,
.list-name-link:hover {
    text-decoration: underline;
    color: var(--primary-hover);
}

[data-theme="dark"] .contact-name-link,
[data-theme="dark"] .list-name-link {
    color: #fff;
}

[data-theme="dark"] .contact-name-link:hover,
[data-theme="dark"] .list-name-link:hover {
    color: var(--primary-light-text, #a5b4fc);
}

/* Contact Email */
.contact-email-text {
    color: var(--gray-500);
    font-size: 0.8125rem;
}

[data-theme="dark"] .contact-email-text {
    color: #e2e8f0;
}

/* Date columns */
.col-date {
    color: var(--gray-500) !important;
    font-size: 0.8125rem;
}

/* Subscription Badges */
.sub-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.55rem;
    border-radius: 4px;
    font-size: 0.6875rem;
    font-weight: 600;
    margin-right: 0.35rem;
}

.sub-badge i {
    font-size: 0.7rem;
}

.sub-badge-email,
.sub-badge-subscribed {
    background: #d1fae5;
    color: #059669;
}

.sub-badge-sms {
    background: #dbeafe;
    color: #2563eb;
}

.sub-badge-unsubscribed {
    background: #fee2e2;
    color: #dc2626;
}

.sub-badge-bounced {
    background: #fef3c7;
    color: #d97706;
}

.sub-badge-pending {
    background: #e0e7ff;
    color: #4f46e5;
}

[data-theme="dark"] .sub-badge-email,
[data-theme="dark"] .sub-badge-subscribed {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
}

[data-theme="dark"] .sub-badge-sms {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
}

[data-theme="dark"] .sub-badge-unsubscribed {
    background: rgba(220, 38, 38, 0.15);
    color: #f87171;
}

[data-theme="dark"] .sub-badge-bounced {
    background: rgba(217, 119, 6, 0.15);
    color: #fbbf24;
}

[data-theme="dark"] .sub-badge-pending {
    background: rgba(79, 70, 229, 0.15);
    color: #a5b4fc;
}

/* Row Actions */
.brevo-row-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    opacity: 0;
    transition: opacity 0.15s;
}

.brevo-table tbody tr:hover .brevo-row-actions {
    opacity: 1;
}

.brevo-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    color: var(--gray-400);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.15s;
    font-size: 0.8125rem;
}

.brevo-action-btn:hover {
    background: var(--gray-100);
    color: var(--text-primary);
}

.brevo-action-btn:hover .bi-trash3 {
    color: var(--danger);
}

/* ── Bulk Actions Header ── */
#bulkHeader th {
    background: rgba(var(--primary-rgb), 0.08);
    padding: 0.55rem 1rem;
}

.bulk-actions-cell {
    padding: 0 !important;
}

.brevo-bulk-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.55rem 0;
}

.brevo-bulk-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-primary);
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.brevo-bulk-btn:hover {
    background: var(--gray-100);
    border-color: var(--gray-300);
}

.brevo-bulk-btn i {
    font-size: 0.8125rem;
}

.brevo-bulk-btn .bi-chevron-down {
    font-size: 0.625rem;
}

.bulk-count-cell {
    text-align: right !important;
}

.brevo-selected-count {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--primary);
    white-space: nowrap;
}

/* ── Brevo Pagination ── */
.brevo-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--border-color);
    gap: 1rem;
    flex-wrap: wrap;
}

.brevo-pagination-left,
.brevo-pagination-center,
.brevo-pagination-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.brevo-rows-select {
    padding: 0.3rem 0.5rem;
    font-size: 0.8125rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--card-bg);
    color: var(--text-primary);
    cursor: pointer;
}

.brevo-rows-label,
.brevo-page-info,
.brevo-page-info-pages,
.brevo-page-label {
    font-size: 0.8125rem;
    color: var(--gray-500);
}

.brevo-page-info-pages {
    font-weight: 600;
    color: var(--text-primary);
    min-width: 1.5rem;
    text-align: center;
}

.brevo-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-primary);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.15s;
    font-size: 0.75rem;
}

.brevo-page-btn:hover:not(:disabled) {
    background: var(--gray-100);
}

.brevo-page-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* Responsive */
@media (max-width: 768px) {
    .brevo-table-info {
        flex-direction: column;
        align-items: flex-start;
    }

    .col-subscribed,
    .col-date {
        display: none;
    }

    .brevo-pagination {
        flex-direction: column;
        gap: 0.75rem;
    }
}

/* ═══════════════════════════════════════════════════ */
/* FOLDER/LIST SELECTOR                               */
/* ═══════════════════════════════════════════════════ */

.folder-selector {
    position: relative;
    width: 100%;
}

.selector-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.875rem;
    cursor: pointer;
}

.selector-trigger:hover {
    border-color: var(--primary);
}

.folder-selector.active .selector-trigger i {
    transform: rotate(180deg);
}

.selector-dropdown {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    width: 100%;
    max-width: 380px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    display: none;
}

.folder-selector.active .selector-dropdown {
    display: block;
}

.folders-view,
.lists-view {
    padding: 0.75rem;
}

.lists-view {
    display: none;
}

.active-view {
    display: block;
}

.dropdown-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 0.75rem;
    font-weight: 600;
}

.back-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--primary);
    text-decoration: none;
}

.dropdown-search {
    position: relative;
    margin-bottom: 0.75rem;
}

.dropdown-search i {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
}

.dropdown-search input {
    width: 100%;
    padding: 0.6rem 0.75rem 0.6rem 2rem;
    background: var(--gray-50);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
}

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

.folders-list {
    max-height: 280px;
    overflow-y: auto;
}

.folder-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.75rem;
    border-radius: var(--radius-md);
    cursor: pointer;
    margin-bottom: 2px;
}

.folder-item:hover {
    background: var(--gray-100);
}

.folder-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.folder-info i {
    color: #fbbf24;
}

.folder-count {
    font-size: 0.75rem;
    color: var(--text-muted);
    background: var(--gray-100);
    padding: 2px 8px;
    border-radius: 20px;
    margin-left: 8px;
}

.select-all-row {
    background: var(--gray-50);
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-md);
    margin-bottom: 0.5rem;
}

.lists-container {
    max-height: 280px;
    overflow-y: auto;
    margin-bottom: 0.5rem;
}

.dropdown-option {
    padding: 0.5rem 0.75rem;
}

.dropdown-option:hover {
    background: var(--gray-100);
    border-radius: var(--radius-md);
}

.tm-custom-checkbox {
    display: flex;
    align-items: center;
    position: relative;
    padding-left: 1.75rem;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--text-primary);
}

.tm-custom-checkbox input {
    position: absolute;
    opacity: 0;
}

.checkmark {
    position: absolute;
    left: 0;
    height: 1.125rem;
    width: 1.125rem;
    background: var(--card-bg);
    border: 2px solid var(--border-color);
    border-radius: 4px;
}

.tm-custom-checkbox input:checked~.checkmark {
    background: var(--primary);
    border-color: var(--primary);
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
    left: 0.35rem;
    top: 0.15rem;
    width: 0.25rem;
    height: 0.5rem;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.tm-custom-checkbox input:checked~.checkmark:after {
    display: block;
}

.dropdown-footer {
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
    margin-top: 0.5rem;
}

.dropdown-footer a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--primary);
    text-decoration: none;
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-md);
}

.dropdown-footer a:hover {
    background: var(--gray-100);
}

.selected-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.tm-list-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.5rem 0.25rem 0.75rem;
    background: var(--gray-100);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    font-size: 0.75rem;
    color: var(--text-primary);
}

.tm-list-badge i {
    cursor: pointer;
    padding: 2px;
    border-radius: 50%;
}

.tm-list-badge i:hover {
    background: var(--danger);
    color: white;
}

/* ── INLINE CREATE FORM (Folder / List) ── */
.inline-create-form {
    border-top: 1px solid var(--border-color);
    background: var(--gray-50);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    overflow: hidden;
    animation: slideDown 0.2s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        max-height: 0;
    }

    to {
        opacity: 1;
        max-height: 200px;
    }
}

.inline-form-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem 0.25rem;
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--text-primary);
}

.inline-form-header i {
    color: var(--primary);
    font-size: 1rem;
}

.inline-form-body {
    padding: 0.5rem 1rem;
}

.inline-form-body .tm-form-control {
    font-size: 0.8125rem;
    padding: 0.55rem 0.75rem;
    border-radius: var(--radius-md);
    background: var(--card-bg);
}

.inline-form-body .tm-form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
}

.inline-form-error {
    font-size: 0.75rem;
    color: var(--danger);
    margin-top: 0.25rem;
    min-height: 1rem;
}

.inline-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.25rem 1rem 0.75rem;
}

.btn-inline-cancel {
    padding: 0.4rem 0.85rem;
    font-size: 0.8125rem;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-primary);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-weight: 500;
    transition: all 0.15s;
}

.btn-inline-cancel:hover {
    background: var(--gray-100);
}

.btn-inline-save {
    padding: 0.4rem 1rem;
    font-size: 0.8125rem;
    border: none;
    background: var(--primary);
    color: white;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    transition: all 0.15s;
}

.btn-inline-save:hover {
    background: var(--primary-hover);
}

.btn-inline-save:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-inline-save .spinner-border {
    width: 0.85rem;
    height: 0.85rem;
    border-width: 2px;
}

@keyframes flashGreen {
    0% {
        background: rgba(16, 185, 129, 0.15);
    }

    100% {
        background: transparent;
    }
}

.folder-item.just-created,
.dropdown-option.just-created {
    animation: flashGreen 1.5s ease;
}

/* ═══════════════════════════════════════════════════ */
/* IMPORT CONTACTS MODAL STYLES                        */
/* ═══════════════════════════════════════════════════ */

/* Import Method Tabs */
.import-method-tabs {
    display: flex;
    gap: 0.75rem;
}

.import-method-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1rem;
    background: var(--card-bg);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-base);
}

.import-method-tab:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.import-method-tab.active {
    border-color: var(--primary);
    background: var(--primary-light);
    color: var(--primary);
    box-shadow: var(--shadow-ring);
}

.import-method-tab i {
    font-size: 1.1rem;
}

.import-method-content {
    display: none;
}

.import-method-content.active {
    display: block;
}

#pasteEmailsTextarea {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: var(--fs-sm);
    line-height: 1.6;
    resize: vertical;
    min-height: 160px;
    max-height: 300px;
}

/* Info Banner */
.import-info-banner {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: var(--primary-light);
    border-radius: var(--radius-md);
    border-left: 4px solid var(--primary);
}

.import-info-banner i {
    color: var(--primary);
    font-size: 1.25rem;
    margin-top: 0.1rem;
}

.import-info-banner p {
    margin: 0;
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Step Titles */
.import-step .step-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.import-step .step-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    background: var(--primary);
    color: white;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 700;
}

.import-step .step-subtitle {
    color: var(--text-muted);
    font-size: 0.8125rem;
    margin-bottom: 1rem;
    margin-left: 2.25rem;
}

/* Dropzone */
.import-dropzone {
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-lg);
    padding: 3rem 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--gray-50);
}

.import-dropzone:hover,
.import-dropzone.dragover {
    border-color: var(--primary);
    background: var(--primary-light);
}

.dropzone-content i {
    font-size: 3rem;
    color: var(--gray-400);
    margin-bottom: 1rem;
    display: block;
}

.import-dropzone:hover .dropzone-content i,
.import-dropzone.dragover .dropzone-content i {
    color: var(--primary);
}

.dropzone-content p {
    margin: 0 0 0.5rem;
    font-size: 0.9375rem;
    color: var(--text-secondary);
}

.dropzone-content p strong {
    color: var(--primary);
    cursor: pointer;
}

.dropzone-content .file-types {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Selected File Info */
.selected-file-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--gray-50);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-top: 1rem;
}

.selected-file-info .file-icon {
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--success-light);
    border-radius: var(--radius-md);
}

.selected-file-info .file-icon i {
    font-size: 1.5rem;
    color: var(--success);
}

.selected-file-info .file-details {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.selected-file-info .file-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.9375rem;
}

.selected-file-info .file-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.btn-remove-file {
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    transition: all 0.15s;
}

.btn-remove-file:hover {
    background: var(--danger-light);
    color: var(--danger);
}

/* Preview Stats */
.import-preview-stats {
    display: flex;
    gap: 1.5rem;
    padding: 1rem 0;
}

.import-preview-stats .stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.75rem 1.5rem;
    background: var(--gray-50);
    border-radius: var(--radius-md);
    min-width: 100px;
}

.import-preview-stats .stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.import-preview-stats .stat-value.text-success {
    color: var(--success) !important;
}

.import-preview-stats .stat-value.text-warning {
    color: var(--warning) !important;
}

.import-preview-stats .stat-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

/* Preview Table */
.import-preview-table-wrap {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.import-preview-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.import-preview-table thead {
    position: sticky;
    top: 0;
    background: var(--gray-100);
    z-index: 1;
}

.import-preview-table th {
    padding: 0.75rem 1rem;
    text-align: left;
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    border-bottom: 1px solid var(--border-color);
}

.import-preview-table td {
    padding: 0.625rem 1rem;
    color: var(--text-primary);
    border-bottom: 1px solid var(--gray-100);
}

.import-preview-table tbody tr:hover {
    background: var(--gray-50);
}

.import-preview-table .email-cell {
    color: var(--primary);
    font-weight: 500;
}

.import-preview-table .status-valid {
    color: var(--success);
}

.import-preview-table .status-invalid {
    color: var(--danger);
}

.preview-note {
    font-size: 0.75rem;
}

/* Progress Section */
.import-progress {
    padding: 2rem;
    text-align: center;
}

.import-progress .progress-content {
    display: flex;
    align-items: center;
    justify-content: center;
}

.import-progress .progress-title {
    font-weight: 600;
    color: var(--text-primary);
}

.import-progress .progress-subtitle {
    font-size: 0.8125rem;
}

/* Success Section */
.import-success {
    padding: 2rem;
    text-align: center;
}

.import-success .success-icon {
    margin-bottom: 1rem;
}

.import-success .success-icon i {
    font-size: 4rem;
    color: var(--success);
}

.import-success h5 {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

/* Dark Mode Adjustments */
[data-theme="dark"] .import-info-banner {
    background: rgba(var(--primary-rgb), 0.15);
}

[data-theme="dark"] .import-dropzone {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

[data-theme="dark"] .import-dropzone:hover,
[data-theme="dark"] .import-dropzone.dragover {
    background: rgba(var(--primary-rgb), 0.1);
    border-color: var(--primary);
}

[data-theme="dark"] .selected-file-info {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

[data-theme="dark"] .import-preview-stats .stat-item {
    background: var(--gray-800);
}

[data-theme="dark"] .import-preview-table-wrap {
    border-color: var(--gray-700);
}

[data-theme="dark"] .import-preview-table thead {
    background: var(--gray-800);
}

[data-theme="dark"] .import-preview-table th {
    border-color: var(--gray-700);
}

[data-theme="dark"] .import-preview-table td {
    border-color: var(--gray-800);
}

[data-theme="dark"] .import-preview-table tbody tr:hover {
    background: var(--gray-800);
}

/* ═══════════════════════════════════════════════════ */
/* IMPORT LIST SELECTION STYLES                        */
/* ═══════════════════════════════════════════════════ */

.import-list-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--gray-200);
    margin-bottom: 1rem;
}

.import-list-tabs .tab-btn {
    background: none;
    border: none;
    padding: 0.75rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-muted);
    position: relative;
    cursor: pointer;
    transition: all 0.2s;
}

.import-list-tabs .tab-btn:hover {
    color: var(--text-primary);
}

.import-list-tabs .tab-btn.active {
    color: var(--primary);
}

.import-list-tabs .tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--primary);
    border-radius: 2px 2px 0 0;
}

.import-tab-content {
    display: none;
}

.import-tab-content.active {
    display: block;
}

.import-list-filter {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.import-list-filter .search-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    max-width: 280px;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    padding: 0.5rem 0.75rem;
    transition: all 0.2s;
}

.import-list-filter .search-wrap:focus-within {
    border-color: var(--primary);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.import-list-filter .search-wrap i {
    color: var(--text-muted);
}

.import-list-filter .search-wrap input {
    flex: 1;
    border: none;
    background: none;
    outline: none;
    font-size: 0.875rem;
    color: var(--text-primary);
}

.import-list-filter .search-wrap input::placeholder {
    color: var(--text-muted);
}

.import-list-filter .folder-filter {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    color: var(--text-primary);
    background: var(--gray-50);
    cursor: pointer;
}

.import-list-filter .selected-list-count {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-left: auto;
}

.import-list-table-wrap {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
}

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

.import-list-table thead {
    background: var(--gray-50);
    position: sticky;
    top: 0;
    z-index: 1;
}

.import-list-table th {
    padding: 0.75rem 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-muted);
    text-align: left;
    border-bottom: 1px solid var(--gray-200);
    white-space: nowrap;
}

.import-list-table th.sortable {
    cursor: pointer;
}

.import-list-table th.sortable:hover {
    color: var(--text-primary);
}

.import-list-table th.sortable i {
    font-size: 0.65rem;
    margin-left: 0.25rem;
    opacity: 0.5;
}

.import-list-table th.col-check {
    width: 40px;
}

.import-list-table td {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: var(--text-primary);
    border-bottom: 1px solid var(--gray-100);
}

.import-list-table tbody tr {
    transition: background 0.15s;
    cursor: pointer;
}

.import-list-table tbody tr:hover {
    background: var(--gray-50);
}

.import-list-table tbody tr.selected {
    background: rgba(37, 99, 235, 0.08);
}

.import-list-table tbody tr.selected:hover {
    background: rgba(37, 99, 235, 0.12);
}

.import-list-table .list-radio {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
    cursor: pointer;
}

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

.import-list-table .folder-name {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.import-list-table .folder-name i {
    color: #f59e0b;
}

.create-list-form {
    background: var(--gray-50);
    border-radius: var(--radius-md);
    padding: 1.5rem;
}

.create-list-form .tm-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    display: block;
}

#addToListModal .footer-info,
#importContactsModal .footer-info {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-right: auto;
}

/* Dark mode for list selection */
[data-theme="dark"] .import-list-tabs {
    border-color: var(--gray-700);
}

[data-theme="dark"] .import-list-filter .search-wrap {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

[data-theme="dark"] .import-list-filter .search-wrap:focus-within {
    background: var(--gray-900);
}

[data-theme="dark"] .import-list-filter .folder-filter {
    background: var(--gray-800);
    border-color: var(--gray-700);
    color: var(--text-primary);
}

[data-theme="dark"] .import-list-table-wrap {
    border-color: var(--gray-700);
}

[data-theme="dark"] .import-list-table thead {
    background: var(--gray-800);
}

[data-theme="dark"] .import-list-table th {
    border-color: var(--gray-700);
}

[data-theme="dark"] .import-list-table td {
    border-color: var(--gray-800);
}

[data-theme="dark"] .import-list-table tbody tr:hover {
    background: var(--gray-800);
}

[data-theme="dark"] .import-list-table tbody tr.selected {
    background: rgba(37, 99, 235, 0.15);
}

[data-theme="dark"] .create-list-form {
    background: var(--gray-800);
}

/* ═══════════════════════════════════════════════════ */
/* LIST DETAIL PAGE STYLES                             */
/* ═══════════════════════════════════════════════════ */

.list-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.list-title-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.list-title-row .page-title {
    margin: 0;
}

.back-btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    text-decoration: none;
    transition: all 0.15s;
}

.back-btn-icon:hover {
    background: var(--gray-100);
    color: var(--text-primary);
}

.btn-edit-list-name {
    background: none;
    border: none;
    padding: 0.35rem;
    cursor: pointer;
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    transition: all 0.15s;
}

.btn-edit-list-name:hover {
    background: var(--gray-100);
    color: var(--primary);
}

.list-navigation {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.list-navigation .nav-position {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-right: 0.5rem;
}

.list-navigation .nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-secondary);
    text-decoration: none;
    transition: all 0.15s;
}

.list-navigation .nav-btn:hover:not(.disabled) {
    background: var(--gray-100);
    color: var(--text-primary);
    border-color: var(--gray-300);
}

.list-navigation .nav-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Member Filter Section */
.member-filter-section {
    padding: 1.25rem 1.5rem;
}

.member-filter-section .filter-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.member-filter-section .filter-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--gray-50);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-bottom: 0.75rem;
}

.member-filter-section .filter-badge {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.member-filter-section .filter-value {
    font-size: 0.875rem;
    color: var(--text-primary);
    font-weight: 500;
}

.btn-add-condition {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 1rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
}

.btn-add-condition:hover:not(:disabled) {
    background: var(--gray-50);
    border-color: var(--gray-300);
}

.btn-add-condition:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Empty State */
.empty-state {
    padding: 2rem;
    text-align: center;
}

.empty-state h5 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.empty-state p {
    font-size: 0.875rem;
    max-width: 400px;
    margin: 0 auto;
}

/* Dark Mode */
[data-theme="dark"] .back-btn-icon:hover {
    background: var(--gray-800);
}

[data-theme="dark"] .btn-edit-list-name:hover {
    background: var(--gray-800);
}

[data-theme="dark"] .list-navigation .nav-btn {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

[data-theme="dark"] .list-navigation .nav-btn:hover:not(.disabled) {
    background: var(--gray-700);
}

[data-theme="dark"] .member-filter-section .filter-row {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

[data-theme="dark"] .member-filter-section .filter-badge {
    background: var(--gray-900);
    border-color: var(--gray-700);
}

[data-theme="dark"] .btn-add-condition {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

[data-theme="dark"] .btn-add-condition:hover:not(:disabled) {
    background: var(--gray-700);
}

/* ═══════════════════════════════════════════════════ */
/* CONTACT DETAIL PAGE STYLES                          */
/* ═══════════════════════════════════════════════════ */

.contact-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 1rem;
}

.contact-title-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.contact-title-row .page-title {
    margin: 0;
}

.contact-avatar {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-light);
    border-radius: 50%;
    color: var(--primary);
}

.contact-avatar i {
    font-size: 1.5rem;
}

.contact-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.btn-contact-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 0.75rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 0.7rem;
    border-radius: var(--radius-md);
    transition: all 0.15s;
    min-width: 50px;
}

.btn-contact-action i {
    font-size: 1.125rem;
}

.btn-contact-action:hover {
    background: var(--gray-100);
    color: var(--primary);
}

/* Contact Tabs */
.contact-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border-color);
}

.contact-tab {
    padding: 0.875rem 1.25rem;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.15s;
    margin-bottom: -1px;
}

.contact-tab:hover {
    color: var(--text-primary);
}

.contact-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

.contact-tab .tab-count {
    background: var(--gray-200);
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    font-size: 0.75rem;
    margin-left: 0.35rem;
}

/* Contact Detail Grid */
.contact-detail-grid {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 1.5rem;
}

@media (max-width: 1024px) {
    .contact-detail-grid {
        grid-template-columns: 1fr;
    }
}

/* Contact Sections */
.contact-section {
    margin-bottom: 1rem;
}

.contact-section .section-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
}

.contact-section .section-header.collapsible {
    cursor: pointer;
}

.contact-section .section-header h5 {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    flex: 1;
}

.contact-section .section-header .bi-chevron-up,
.contact-section .section-header .bi-chevron-down {
    color: var(--text-muted);
    transition: transform 0.2s;
}

.btn-edit-section {
    background: none;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    color: var(--text-muted);
    border-radius: var(--radius-sm);
}

.btn-edit-section:hover {
    color: var(--primary);
}

.section-content {
    padding: 1.25rem;
}

/* Channel Status */
.channel-status {
    margin-bottom: 1rem;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    font-weight: 500;
}

.status-badge.status-subscribed {
    background: var(--success-light);
    color: var(--success-dark);
}

.status-badge.status-unsubscribed {
    background: var(--danger-light);
    color: var(--danger-dark);
}

.status-badge.status-bounced {
    background: var(--warning-light);
    color: var(--warning-dark);
}

.status-badge.status-pending {
    background: var(--gray-200);
    color: var(--gray-600);
}

.channel-type {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.channel-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.875rem;
    background: var(--gray-100);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

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

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

.stat-box .stat-value {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

.stat-box .stat-value small {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 400;
}

.stat-box .stat-label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

/* Info Grid */
.info-grid {
    display: grid;
    gap: 1rem;
}

.info-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.info-item .info-label {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.info-item .info-value {
    font-size: 0.875rem;
    color: var(--text-primary);
}

.info-item .info-value.email-value {
    color: var(--primary);
}

/* History Timeline */
.history-timeline {
    position: relative;
}

.timeline-item {
    display: flex;
    gap: 1rem;
    padding: 0.75rem 0;
}

.timeline-icon {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--success-light);
    color: var(--success);
    border-radius: 50%;
    flex-shrink: 0;
}

.timeline-content {
    flex: 1;
}

.timeline-text {
    margin: 0;
    font-size: 0.875rem;
    color: var(--text-primary);
}

.timeline-date {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.history-note {
    font-size: 0.8125rem;
}

/* Contact Lists List */
.contact-lists-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.contact-lists-list li {
    display: flex;
    flex-direction: column;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--gray-100);
}

.contact-lists-list li:last-child {
    border-bottom: none;
}

.contact-lists-list a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.875rem;
}

.contact-lists-list a:hover {
    text-decoration: underline;
}

.contact-lists-list .list-folder {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-left: 1.5rem;
}

/* Quick Actions */
.quick-actions-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.quick-action-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.875rem;
    background: var(--gray-50);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 0.8125rem;
    transition: all 0.15s;
}

.quick-action-btn:hover {
    background: var(--gray-100);
    border-color: var(--gray-300);
    color: var(--text-primary);
}

/* Dark Mode — Contact Detail */
[data-theme="dark"] .contact-avatar {
    background: rgba(var(--primary-rgb), 0.15);
}

[data-theme="dark"] .btn-contact-action:hover {
    background: var(--gray-100);
}

[data-theme="dark"] .contact-tab.active {
    border-bottom-color: var(--primary);
}

[data-theme="dark"] .contact-tab .tab-count {
    background: var(--gray-100);
    color: var(--text-secondary);
}

[data-theme="dark"] .channel-badge {
    background: var(--gray-100);
    border-color: var(--border-color);
}

[data-theme="dark"] .contact-lists-list li {
    border-color: var(--border-color);
}

[data-theme="dark"] .quick-action-btn {
    background: var(--surface-bg);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

[data-theme="dark"] .quick-action-btn:hover {
    background: var(--gray-100);
    color: var(--text-primary);
}

/* System dark mode fallback — Contact Detail */
@media (prefers-color-scheme: dark) {
    html:not([data-theme]) .contact-avatar {
        background: rgba(var(--primary-rgb), 0.15);
    }

    html:not([data-theme]) .btn-contact-action:hover {
        background: var(--gray-100);
    }

    html:not([data-theme]) .contact-tab .tab-count {
        background: var(--gray-100);
        color: var(--text-secondary);
    }

    html:not([data-theme]) .channel-badge {
        background: var(--gray-100);
        border-color: var(--border-color);
    }

    html:not([data-theme]) .contact-lists-list li {
        border-color: var(--border-color);
    }

    html:not([data-theme]) .quick-action-btn {
        background: var(--surface-bg);
        border-color: var(--border-color);
    }

    html:not([data-theme]) .quick-action-btn:hover {
        background: var(--gray-100);
    }
}

/* Dropdown menu — themed */
.contact-actions .dropdown-menu {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
    border-radius: var(--radius-lg);
}

.contact-actions .dropdown-item {
    color: var(--text-primary);
    font-size: var(--fs-sm);
    padding: var(--space-2) var(--space-4);
    transition: background var(--transition-fast);
}

.contact-actions .dropdown-item:hover {
    background: var(--gray-100);
    color: var(--text-primary);
}

.contact-actions .dropdown-item.text-danger {
    color: var(--danger) !important;
}

.contact-actions .dropdown-item.text-danger:hover {
    background: var(--danger-light);
}

.contact-actions .dropdown-divider {
    border-color: var(--border-color);
}

.help-fab {
    display: none;
}

/* ================================================================
   RESPONSIVE TABLE COLUMN HIDING
   ================================================================ */
@media (max-width: 767.98px) {

    /* Dashboard: Recent Contacts — hide List (4th), Added (5th) */
    #recentContactsTable th:nth-child(4),
    #recentContactsTable td:nth-child(4),
    #recentContactsTable th:nth-child(5),
    #recentContactsTable td:nth-child(5) {
        display: none;
    }

    /* Lists page — hide ID (2nd), Folder (3rd), Creation date (5th) */
    #listsTable th:nth-child(2),
    #listsTable td:nth-child(2),
    #listsTable th:nth-child(3),
    #listsTable td:nth-child(3),
    #listsTable th:nth-child(5),
    #listsTable td:nth-child(5) {
        display: none;
    }

    /* Templates — hide Category (2nd), Subject (3rd), Created (5th), Updated (6th) */
    #templatesTable th:nth-child(2),
    #templatesTable td:nth-child(2),
    #templatesTable th:nth-child(3),
    #templatesTable td:nth-child(3),
    #templatesTable th:nth-child(5),
    #templatesTable td:nth-child(5),
    #templatesTable th:nth-child(6),
    #templatesTable td:nth-child(6) {
        display: none;
    }

    /* Analytics: Top Campaigns — hide # (1st), Sent (3rd), Performance (6th) */
    #topCampaignsTable th:nth-child(1),
    #topCampaignsTable td:nth-child(1),
    #topCampaignsTable th:nth-child(3),
    #topCampaignsTable td:nth-child(3),
    #topCampaignsTable th:nth-child(6),
    #topCampaignsTable td:nth-child(6) {
        display: none;
    }

    /* Contacts: already handled by .col-subscribed, .col-date via brevo-table responsive */
    /* Additionally hide LAST CHANGED and CREATION DATE columns */
    .col-lastchanged,
    .col-created {
        display: none;
    }
}

/* ================================================================
   RESPONSIVE UTILITY — Settings horizontal tabs
   ================================================================ */
@media (max-width: 767.98px) {

    /* Settings: tighter card on mobile */
    .settings-nav .list-group-item {
        padding: var(--space-2) var(--space-3);
        font-size: var(--fs-xs);
    }

    .settings-tab-content .tm-card-body {
        padding: var(--space-4);
    }

    .settings-tab-content .mw-500,
    .settings-tab-content .mw-600 {
        max-width: 100%;
    }
}

/* ================================================================
   RESPONSIVE UTILITY — Topbar profile dropdown  
   ================================================================ */
@media (max-width: 767.98px) {
    .tm-dropdown-menu {
        width: calc(100vw - 2rem);
        max-width: 320px;
    }
}

/* ================================================================
   INTRO.JS — Custom Theme for Bulk Reach Pro
   ================================================================ */

/* Tooltip container */
.introjs-tooltip.tm-introjs-tooltip {
    background: var(--card-bg, #fff);
    color: var(--text-primary, #1a1a2e);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .15);
    font-family: 'Inter', sans-serif;
    max-width: 360px;
    padding: 0;
}

.introjs-tooltip.tm-introjs-tooltip .introjs-tooltip-header {
    padding: 16px 20px 0;
}

.introjs-tooltip.tm-introjs-tooltip .introjs-tooltip-title {
    color: var(--text-primary);
    font-weight: 600;
    font-size: .95rem;
}

.introjs-tooltip.tm-introjs-tooltip .introjs-tooltiptext {
    padding: 14px 20px;
    font-size: .87rem;
    line-height: 1.6;
    color: var(--text-secondary, #64748b);
}

.introjs-tooltip.tm-introjs-tooltip .introjs-tooltiptext strong {
    color: var(--text-primary);
    font-weight: 600;
}

.introjs-tooltip.tm-introjs-tooltip .introjs-tooltiptext kbd {
    background: var(--gray-100, #f1f5f9);
    color: var(--text-primary);
    border: 1px solid var(--border-color, #e2e8f0);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: .78rem;
    font-family: 'Inter', sans-serif;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}

/* Buttons area */
.introjs-tooltip.tm-introjs-tooltip .introjs-tooltipbuttons {
    padding: 12px 20px 16px;
    border-top: 1px solid var(--border-color, #e2e8f0);
}

.introjs-tooltip.tm-introjs-tooltip .introjs-button {
    font-family: 'Inter', sans-serif;
    font-size: .82rem;
    font-weight: 600;
    border-radius: 8px;
    padding: 6px 16px;
    border: none;
    text-shadow: none;
    transition: all .15s ease;
}

/* Next / Done button — Primary */
.introjs-tooltip.tm-introjs-tooltip .introjs-nextbutton,
.introjs-tooltip.tm-introjs-tooltip .introjs-donebutton {
    background: #4F46E5;
    color: #fff;
    box-shadow: 0 2px 8px rgba(79, 70, 229, .25);
}

.introjs-tooltip.tm-introjs-tooltip .introjs-nextbutton:hover,
.introjs-tooltip.tm-introjs-tooltip .introjs-donebutton:hover {
    background: #4338CA;
    box-shadow: 0 4px 12px rgba(79, 70, 229, .35);
}

.introjs-tooltip.tm-introjs-tooltip .introjs-nextbutton:focus,
.introjs-tooltip.tm-introjs-tooltip .introjs-donebutton:focus {
    background: #4338CA;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, .3);
}

/* Previous button — Secondary */
.introjs-tooltip.tm-introjs-tooltip .introjs-prevbutton {
    background: var(--gray-100, #f1f5f9);
    color: var(--text-primary);
    border: 1px solid var(--border-color, #e2e8f0);
}

.introjs-tooltip.tm-introjs-tooltip .introjs-prevbutton:hover {
    background: var(--border-color, #e2e8f0);
}

.introjs-tooltip.tm-introjs-tooltip .introjs-prevbutton:focus {
    box-shadow: 0 0 0 3px rgba(79, 70, 229, .15);
}

/* Skip button */
.introjs-tooltip.tm-introjs-tooltip .introjs-skipbutton {
    color: var(--text-muted, #94a3b8);
    font-size: 1.1rem;
    padding: 4px 8px;
    line-height: 1;
}

.introjs-tooltip.tm-introjs-tooltip .introjs-skipbutton:hover {
    color: var(--text-primary);
}

.introjs-skipbutton {
    top: 10px !important;
}

/* Disabled button */
.introjs-tooltip.tm-introjs-tooltip .introjs-disabled {
    opacity: .35;
    pointer-events: none;
}

/* Progress bar */
.introjs-tooltip.tm-introjs-tooltip .introjs-progress {
    height: 3px;
    margin: 0 20px;
    background: var(--gray-100, #f1f5f9);
    border-radius: 3px;
    overflow: hidden;
}

.introjs-tooltip.tm-introjs-tooltip .introjs-progressbar {
    background: #4F46E5;
    border-radius: 3px;
}

/* Bullets */
.introjs-tooltip.tm-introjs-tooltip .introjs-bullets {
    text-align: center;
    padding: 6px 0;
}

.introjs-tooltip.tm-introjs-tooltip .introjs-bullets ul li a {
    width: 7px;
    height: 7px;
    background: var(--border-color, #cbd5e1);
    border-radius: 50%;
}

.introjs-tooltip.tm-introjs-tooltip .introjs-bullets ul li a.active {
    width: 20px;
    background: #4F46E5;
    border-radius: 10px;
}

/* Highlight overlay */
.introjs-helperLayer {
    border-radius: 12px !important;
    box-shadow: 0 0 0 0 transparent, 0 0 0 5000px rgba(0, 0, 0, .35) !important;
}

.tm-introjs-highlight {
    border-radius: 12px !important;
}

/* Arrow */
.introjs-tooltip.tm-introjs-tooltip .introjs-arrow {
    border-color: transparent;
}

.introjs-tooltip.tm-introjs-tooltip .introjs-arrow.top {
    border-bottom-color: var(--card-bg, #fff);
}

.introjs-tooltip.tm-introjs-tooltip .introjs-arrow.bottom {
    border-top-color: var(--card-bg, #fff);
}

.introjs-tooltip.tm-introjs-tooltip .introjs-arrow.left {
    border-right-color: var(--card-bg, #fff);
}

.introjs-tooltip.tm-introjs-tooltip .introjs-arrow.right {
    border-left-color: var(--card-bg, #fff);
}

/* ── DARK MODE Overrides ─────────────────────────── */
[data-theme="dark"] .introjs-tooltip.tm-introjs-tooltip {
    background: var(--card-bg, #1e1e2d);
    border-color: var(--border-color, #2d2d3f);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}

[data-theme="dark"] .introjs-tooltip.tm-introjs-tooltip .introjs-tooltiptext {
    color: var(--text-secondary, #a0a0b8);
}

[data-theme="dark"] .introjs-tooltip.tm-introjs-tooltip .introjs-tooltiptext kbd {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .12);
}

[data-theme="dark"] .introjs-tooltip.tm-introjs-tooltip .introjs-tooltipbuttons {
    border-top-color: var(--border-color, #2d2d3f);
}

[data-theme="dark"] .introjs-tooltip.tm-introjs-tooltip .introjs-prevbutton {
    background: rgba(255, 255, 255, .06);
    border-color: var(--border-color, #2d2d3f);
    color: var(--text-primary, #e2e2f0);
}

[data-theme="dark"] .introjs-tooltip.tm-introjs-tooltip .introjs-prevbutton:hover {
    background: rgba(255, 255, 255, .1);
}

[data-theme="dark"] .introjs-tooltip.tm-introjs-tooltip .introjs-progress {
    background: rgba(255, 255, 255, .06);
}

[data-theme="dark"] .introjs-tooltip.tm-introjs-tooltip .introjs-bullets ul li a {
    background: rgba(255, 255, 255, .15);
}

[data-theme="dark"] .introjs-tooltip.tm-introjs-tooltip .introjs-bullets ul li a.active {
    background: #4F46E5;
}

[data-theme="dark"] .introjs-helperLayer {
    box-shadow: 0 0 0 0 transparent, 0 0 0 5000px rgba(0, 0, 0, .55) !important;
}

[data-theme="dark"] .introjs-tooltip.tm-introjs-tooltip .introjs-arrow.top {
    border-bottom-color: var(--card-bg, #1e1e2d);
}

[data-theme="dark"] .introjs-tooltip.tm-introjs-tooltip .introjs-arrow.bottom {
    border-top-color: var(--card-bg, #1e1e2d);
}

[data-theme="dark"] .introjs-tooltip.tm-introjs-tooltip .introjs-arrow.left {
    border-right-color: var(--card-bg, #1e1e2d);
}

[data-theme="dark"] .introjs-tooltip.tm-introjs-tooltip .introjs-arrow.right {
    border-left-color: var(--card-bg, #1e1e2d);
}

@media (max-width: 576px) {
    .avatar-sm {
        display: none !important;
        width: 28px !important;
        height: 28px !important;
        font-size: 11px !important;
    }
}
.import-method-tabs {
    display: flex;
    gap: 10px;
    border-bottom: 1px solid #e9ecef;
    padding-bottom: 10px;
}

.method-tab {
    padding: 8px 16px;
    border: none;
    background: none;
    border-radius: 6px;
    color: #6c757d;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
}

.method-tab i {
    font-size: 1.1rem;
}

.method-tab:hover {
    background: #f8f9fa;
    color: #0d6efd;
}

.method-tab.active {
    background: #e7f1ff;
    color: #0d6efd;
}

.paste-emails-textarea {
    font-family: monospace;
    font-size: 14px;
    line-height: 1.5;
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    transition: all 0.2s;
}

.paste-emails-textarea:focus {
    background-color: #fff;
    border-color: #0d6efd;
    box-shadow: 0 0 0 3px rgba(13,110,253,0.1);
}

.paste-format-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.status-valid {
    color: #198754;
}

.status-valid i {
    color: #198754;
    margin-right: 4px;
}

.status-invalid {
    color: #dc3545;
}

.status-invalid i {
    color: #dc3545;
    margin-right: 4px;
}