/* Confort CRM Stylesheet - MedFlow Visual Identity Redesign */

:root {
    color-scheme: light;
    /* Color Palette - Premium Light Theme */
    --bg-app: #f3f4f6; /* Gray 100 */
    --bg-sidebar: #ffffff;
    --bg-card: #ffffff;
    --bg-card-hover: #f9fafb;
    --bg-input: #ffffff;
    --bg-soft: #f8fafc;
    --bg-hover: #f9fafb;
    --border-color: #e5e7eb; /* Gray 200 */
    
    --text-main: #111827; /* Gray 900 */
    --text-muted: #6b7280; /* Gray 500 */
    --text-inverse: #ffffff;
    
    --primary: #0f766e; /* MedFlow Teal / Emerald Deep */
    --primary-hover: #0d9488;
    --primary-glow: rgba(15, 118, 110, 0.1);
    
    --success: #22c55e;
    --success-hover: #16a34a;
    --success-glow: rgba(34, 197, 94, 0.1);
    
    --warning: #f97316; /* Orange */
    --danger: #ef4444;
    --danger-hover: #dc2626;
    
    --whatsapp: #25d366;
    --whatsapp-light: #e8f9ee;
    --whatsapp-chat-bg: #eae6df; /* WhatsApp light wallpaper */
    
    --font-primary: 'Inter', sans-serif;
    --font-heading: 'Outfit', sans-serif;
    
    --transition-fast: 0.15s ease;
    --transition-normal: 0.25s ease;
    
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.02);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.02);
    
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --bg-app: #050505;
    --bg-sidebar: #090909;
    --bg-card: #111111;
    --bg-card-hover: #1a1a1a;
    --bg-input: #0a0a0a;
    --bg-soft: #141414;
    --bg-hover: #1a1a1a;
    --border-color: #2a2a2a;

    --text-main: #f5f5f5;
    --text-muted: #a3a3a3;
    --text-inverse: #050505;

    --primary: #20c997;
    --primary-hover: #34d399;
    --primary-glow: rgba(32, 201, 151, 0.16);

    --success-glow: rgba(34, 197, 94, 0.18);
    --whatsapp-light: rgba(37, 211, 102, 0.14);
    --whatsapp-chat-bg: #050505;

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.28);
    --shadow-md: 0 10px 24px rgba(0,0,0,0.24);
    --shadow-lg: 0 18px 45px rgba(0,0,0,0.28);
}

/* Reset & Global Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-primary);
    background-color: var(--bg-app);
    color: var(--text-main);
    overflow: hidden;
    height: 100vh;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 600;
}

a {
    color: inherit;
    text-decoration: none;
}

button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    background: none;
    border: none;
}

/* Scrollbar Styles */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

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

::-webkit-scrollbar-thumb {
    background: #cbd5e1; /* Gray 300 */
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Base App Layout */
.app-container {
    display: flex;
    width: 100vw;
    height: 100vh;
}

/* Sidebar MedFlow Styling */
.sidebar {
    width: 238px;
    height: 100%;
    background-color: var(--bg-sidebar);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    z-index: 10;
}

.sidebar-header {
    padding: 20px 24px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo-icon {
    width: 32px;
    height: 32px;
    background-color: var(--primary);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 16px;
}

.logo-text h2 {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-main);
    letter-spacing: -0.5px;
}

.logo-text h2 span {
    color: var(--primary);
}

/* Tenant Selector Card MedFlow Style */
.tenant-profile-card {
    background-color: #f0fdfa; /* light teal bg */
    border: 1px solid rgba(15, 118, 110, 0.15);
    padding: 12px;
    border-radius: var(--radius-md);
    margin: 4px 16px 16px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.tenant-avatar {
    width: 36px;
    height: 36px;
    background-color: rgba(15, 118, 110, 0.1);
    color: var(--primary);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
}

.tenant-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.tenant-select-styled {
    width: 100%;
    font-weight: 700;
    font-size: 13px;
    color: var(--primary);
    cursor: pointer;
    outline: none;
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
}

.tenant-select-styled option {
    background-color: white;
    color: var(--text-main);
    font-weight: normal;
}

.tenant-info span {
    font-size: 11px;
    color: var(--text-muted);
}

/* Navigation Lists Grouping */
.sidebar-nav {
    flex: 1;
    padding: 8px 12px;
    overflow-y: auto;
}

.nav-group-title {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.8px;
    padding: 14px 12px 6px 12px;
}

.sidebar-nav ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nav-item a {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    color: var(--text-muted);
    font-weight: 500;
    font-size: 12.5px;
    gap: 12px;
    transition: var(--transition-fast);
    position: relative;
}

.nav-item a i {
    font-size: 15.2px;
    width: 19px;
    text-align: center;
}

.nav-item:hover a {
    color: var(--text-main);
    background-color: #f3f4f6;
}

.nav-item.active a {
    background-color: var(--primary-glow);
    color: var(--primary);
    font-weight: 600;
}

/* Navigation Badges */
.badge {
    padding: 2px 6px;
    font-size: 10px;
    font-weight: 700;
    border-radius: 10px;
    text-align: center;
}

.badge-unread {
    background-color: #e0f2fe; /* Light blue count background */
    color: var(--primary);
    margin-left: auto;
}

.badge-count-crm {
    background-color: #f1f5f9;
    color: var(--text-muted);
    margin-left: auto;
}

/* User Profile Sidebar Footer MedFlow Style */
.sidebar-footer {
    padding: 14px 16px;
    border-top: 1px solid var(--border-color);
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.user-profile {
    display: flex;
    align-items: center;
    gap: 10px;
}

.user-avatar-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #e0f2fe;
    color: #0369a1;
    font-weight: 700;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-info {
    display: flex;
    flex-direction: column;
}

.user-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
}

.user-role-label {
    font-size: 11px;
    color: var(--text-muted);
}

.btn-logout {
    color: var(--text-muted);
    font-size: 15px;
    cursor: pointer;
    padding: 6px;
    border-radius: 50%;
    transition: var(--transition-fast);
}

.btn-logout:hover {
    color: var(--danger);
    background-color: #fee2e2;
}

/* Main Content Area */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* Topbar Global MedFlow */
.topbar {
    height: 70px;
    background-color: #ffffff;
    border-bottom: 1px solid var(--border-color);
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.topbar-left h1 {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-main);
    letter-spacing: -0.5px;
}

.topbar-desc {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 1px;
    display: block;
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Search bar on topbar */
.topbar-search-box {
    position: relative;
    width: 240px;
}

.topbar-search-box i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 13px;
}

.topbar-search-box input {
    width: 100%;
    padding: 8px 12px 8px 32px;
    background-color: #f3f4f6;
    border: 1px solid transparent;
    border-radius: 20px;
    color: var(--text-main);
    font-size: 13px;
    outline: none;
    transition: var(--transition-fast);
}

.topbar-search-box input:focus {
    background-color: #ffffff;
    border-color: var(--border-color);
}

.topbar-icon-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-fast);
}

.topbar-icon-btn:hover {
    background-color: #f3f4f6;
    color: var(--text-main);
}

.topbar-profile-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #0284c7;
    color: white;
    font-weight: 700;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    cursor: pointer;
}

.account-menu-wrapper { position: relative; }

.account-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    width: 235px;
    z-index: 120;
    overflow: hidden;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
}

.account-menu-user { padding: 14px 15px; border-bottom: 1px solid var(--border-color); }
.account-menu-user strong { display: block; color: var(--text-main); font-size: 12px; }
.account-menu-user span { display: block; margin-top: 3px; color: var(--text-muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; }
.account-menu button { width: 100%; border: 0; background: transparent; color: var(--text-main); cursor: pointer; padding: 11px 15px; text-align: left; font: 500 12px "Inter", sans-serif; }
.account-menu button:hover { background: var(--bg-app); }
.account-menu button i { width: 18px; color: var(--primary); }

.breadcrumb-bar {
    height: 38px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 30px;
    border-bottom: 1px solid var(--border-color);
    background-color: var(--bg-app);
    font-size: 12px;
}

.breadcrumb-bar i {
    color: var(--text-muted);
    font-size: 9px;
}

.breadcrumb-section { color: var(--text-muted); }
.breadcrumb-current { color: var(--text-main); font-weight: 700; }

/* Role Selector Tool */
.role-selector-container {
    display: flex;
    align-items: center;
    gap: 6px;
    background-color: var(--bg-soft);
    border: 1px solid var(--border-color);
    padding: 5px 7px 5px 10px;
    border-radius: 999px;
}

.role-selector-container label {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
}

.role-select {
    min-height: 28px;
    padding-top: 5px;
    padding-bottom: 5px;
    border: 0;
    border-radius: 999px;
    box-shadow: none;
    font-size: 11px;
}

/* Tab Containers */
.tab-content-container {
    flex: 1;
    height: calc(100% - 108px);
    overflow: hidden;
}

.tab-pane {
    display: none;
    height: 100%;
    width: 100%;
    animation: fadeIn var(--transition-normal);
}

.tab-pane.active {
    display: block;
}

#tab-calendar.tab-pane.active {
    overflow-y: auto;
}

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

/* Buttons UI (MedFlow Medteal colors) */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: var(--transition-fast);
    outline: none;
}

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

.btn-teal {
    background-color: var(--primary);
}

.btn-teal:hover {
    background-color: var(--primary-hover);
}

.btn-secondary {
    background-color: #ffffff;
    border: 1px solid var(--border-color);
    color: var(--text-main);
}

.btn-secondary:hover {
    background-color: #f9fafb;
}

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

.btn-danger-outline {
    background-color: transparent;
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: var(--danger);
}

.btn-danger-outline:hover {
    background-color: rgba(239, 68, 68, 0.05);
}

.btn-dashed {
    border: 1.5px dashed var(--border-color);
    background: #ffffff;
    color: var(--text-muted);
}

.btn-dashed:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.btn-block {
    width: 100%;
}

.btn-sm {
    padding: 4px 10px;
    font-size: 11px;
    border-radius: var(--radius-sm);
}

.btn-icon {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
}

/* Form inputs styling */
.form-group {
    margin-bottom: 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.form-group label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
}

.form-control, .form-select, textarea {
    width: 100%;
    padding: 8px 12px;
    background-color: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-main);
    font-size: 13.5px;
    outline: none;
    transition: var(--transition-fast);
}

.form-control-large {
    width: 100%;
    padding: 10px 14px;
    background-color: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-main);
    font-size: 16px;
    font-weight: 600;
    outline: none;
}

.form-select,
.role-select,
.assistant-form select,
.assistant-activity-form select {
    min-height: 38px;
    padding: 9px 42px 9px 13px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background-color: var(--bg-input);
    background-image:
        linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
        linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
    background-position:
        calc(100% - 18px) 50%,
        calc(100% - 12px) 50%;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    color: var(--text-main);
    font: 600 13px var(--font-primary);
    line-height: 1.2;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), var(--shadow-sm);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}

.form-select:hover,
.role-select:hover,
.assistant-form select:hover,
.assistant-activity-form select:hover {
    border-color: rgba(15, 118, 110, 0.45);
    background-color: var(--bg-card);
}

.form-select:disabled,
.role-select:disabled,
.assistant-form select:disabled,
.assistant-activity-form select:disabled {
    cursor: not-allowed;
    opacity: .6;
}

.form-select option,
.role-select option,
.tenant-select-styled option,
.assistant-form select option,
.assistant-activity-form select option {
    background-color: var(--bg-card);
    color: var(--text-main);
    font: 500 13px var(--font-primary);
}

.form-control:focus, .form-control-large:focus, .form-select:focus, textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-glow), var(--shadow-sm);
}

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

.text-muted { color: var(--text-muted); }
.text-sm { font-size: 11.5px; }


/* ==========================================================================
   ABA 1: ATENDIMENTO / INBOX LIGHT LAYOUT
   ========================================================================== */
.inbox-layout {
    display: flex;
    height: 100%;
    width: 100%;
    background-color: #ffffff;
}

.chat-list-container {
    width: 330px;
    height: 100%;
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    background-color: #ffffff;
}

.chat-list-search {
    padding: 14px;
    position: relative;
}

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

.chat-list-search input {
    width: 100%;
    padding: 8px 12px 8px 30px;
    background-color: #f3f4f6;
    border: 1px solid transparent;
    border-radius: 20px;
    color: var(--text-main);
    font-size: 12.5px;
    outline: none;
}

.chat-list-search input:focus {
    background-color: #ffffff;
    border-color: var(--border-color);
}

.chat-list-filters {
    padding: 0 14px 10px 14px;
    display: flex;
    gap: 6px;
    border-bottom: 1px solid var(--border-color);
}

.filter-btn {
    padding: 4px 10px;
    border-radius: 14px;
    font-size: 11.5px;
    font-weight: 500;
    background-color: #f3f4f6;
    color: var(--text-muted);
    cursor: pointer;
}

.filter-btn.active {
    background-color: var(--primary-glow);
    color: var(--primary);
    font-weight: 600;
}

.chat-list {
    flex: 1;
    overflow-y: auto;
}

/* Chat Item MedFlow Style */
.chat-item {
    display: flex;
    padding: 12px 14px;
    border-bottom: 1px solid #f3f4f6;
    cursor: pointer;
    transition: var(--transition-fast);
    gap: 10px;
}

.chat-item:hover {
    background-color: #f9fafb;
}

.chat-item.active {
    background-color: #f0fdfa; /* light teal active */
}

.chat-item-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #475569;
    font-size: 12px;
    flex-shrink: 0;
    position: relative;
}

.chat-item-avatar.unread::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 10px;
    height: 10px;
    background-color: var(--primary);
    border-radius: 50%;
    border: 2px solid white;
}

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

.chat-item-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 2px;
}

.chat-item-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-item-time {
    font-size: 10.5px;
    color: var(--text-muted);
}

.chat-item-message {
    font-size: 11.5px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
}

.chat-item-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chat-item-tags {
    display: flex;
    gap: 4px;
}

.chat-tag {
    font-size: 9px;
    font-weight: 600;
    padding: 1px 4px;
    border-radius: 4px;
    text-transform: uppercase;
}

.tag-new { background-color: #fef3c7; color: #d97706; }
.tag-warm { background-color: #ffedd5; color: #ea580c; }
.tag-crm { background-color: #ccfbf1; color: var(--primary); }

.count-badge {
    background-color: var(--primary);
    color: white;
    font-size: 9px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Chat window active pane */
.chat-window {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #f0f2f5;
    position: relative;
    min-width: 0; /* Permite encolher em telas menores */
}

.chat-active-state {
    display: flex;
    flex: 1;
    min-height: 0;
    flex-direction: column;
}

.chat-empty-state {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    text-align: center;
    background-color: #f8fafc;
}

.chat-empty-state .empty-icon {
    font-size: 48px;
    color: #cbd5e1;
    margin-bottom: 14px;
}

.chat-empty-state h3 {
    font-size: 16px;
    margin-bottom: 6px;
}

.chat-empty-state p {
    color: var(--text-muted);
    max-width: 320px;
    font-size: 12.5px;
}

/* Active chat header */
.chat-header {
    height: 60px;
    background-color: #ffffff;
    border-bottom: 1px solid var(--border-color);
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.chat-header-user {
    display: flex;
    align-items: center;
    gap: 10px;
}

.chat-header-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #e0f2fe;
    color: #0369a1;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}

.chat-header-info h4 {
    font-size: 13.5px;
    font-weight: 600;
}

.chat-header-info span {
    font-size: 11px;
    color: var(--text-muted);
}

.chat-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.crm-badge {
    background-color: #ccfbf1;
    border: 1px solid rgba(15, 118, 110, 0.2);
    color: var(--primary);
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Chat Messages */
.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background-color: #f7f7f4;
    background-image: linear-gradient(135deg, rgba(15, 118, 110, 0.025) 25%, transparent 25%, transparent 75%, rgba(15, 118, 110, 0.025) 75%);
    background-size: 26px 26px;
}

.message-wrapper {
    display: flex;
    width: 100%;
}

.message-wrapper.received {
    justify-content: flex-start;
}

.message-wrapper.sent {
    justify-content: flex-end;
}

.message-bubble {
    max-width: 60%;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid rgba(15, 23, 42, 0.07);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}

.message-wrapper.received .message-bubble {
    background-color: #ffffff;
    color: var(--text-main);
    border-top-left-radius: 0;
}

.message-wrapper.sent .message-bubble {
    background-color: #dcf7f1;
    color: #111b21;
    border-top-right-radius: 0;
}

.message-text {
    font-size: 12.5px;
    line-height: 1.4;
    word-break: break-word;
}

.message-time {
    display: block;
    font-size: 9.5px;
    text-align: right;
    margin-top: 3px;
    color: #667781;
}

.message-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    margin-top: 3px;
    line-height: 1;
}

.message-meta .message-time {
    margin-top: 0;
}

.message-status {
    display: inline-flex;
    align-items: center;
    color: #667781;
    font-size: 10px;
}

.message-status-read {
    color: #0ea5e9;
}

.message-status-failed {
    color: var(--danger);
}

.chat-quick-templates {
    padding: 8px 16px;
    background-color: #ffffff;
    border-top: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    overflow-x: auto;
}

.template-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
}

.template-buttons {
    display: flex;
    gap: 6px;
}

.btn-template {
    background-color: #f3f4f6;
    color: var(--text-main);
    padding: 4px 10px;
    font-size: 11px;
    border-radius: 12px;
    cursor: pointer;
    white-space: nowrap;
}

.btn-template:hover {
    background-color: var(--primary-glow);
    color: var(--primary);
}

.chat-input-area {
    padding: 12px 14px;
    background-color: #ffffff;
    border-top: 1px solid var(--border-color);
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
    position: relative;
}

.chat-text-field {
    flex: 1;
    background-color: #ffffff;
    border: 1px solid #dbe3e8;
    border-radius: 22px;
    padding: 0 14px;
    min-width: 0;
}

.chat-input-area input[type="text"] {
    width: 100%;
    padding: 10px 0;
    border: 0;
    background: transparent;
    color: var(--text-main);
    outline: none;
    font-size: 13px;
}

.chat-attachment-button {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: #eef7f5;
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex: 0 0 auto;
}

.chat-attachment-button:hover { background: #d9efea; }
.chat-attachment-button:disabled { opacity: .45; cursor: not-allowed; }

.chat-attachment-button.is-recording {
    background: #fee2e2;
    color: #dc2626;
}

.chat-attachment-menu {
    position: absolute;
    left: 12px;
    bottom: calc(100% + 8px);
    z-index: 20;
    min-width: 176px;
    padding: 7px;
    border: 1px solid #dbe3e8;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .16);
}

.chat-attachment-menu button {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-main);
    cursor: pointer;
    text-align: left;
}

.chat-attachment-menu button:hover { background: #eef7f5; color: var(--primary); }
.chat-attachment-menu button i { width: 18px; text-align: center; }

.chat-emoji-menu {
    position: absolute;
    left: 54px;
    bottom: calc(100% + 8px);
    z-index: 21;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
    width: 220px;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .16);
}

.chat-emoji-menu button {
    min-width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
}

.chat-emoji-menu button:hover { background: #eef7f5; }

/* Construtor de automações */
.automation-header, .automation-editor-header, .automation-flow-heading, .automation-card-top, .automation-card-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.automation-header { margin-bottom: 18px; }.automation-header h2, .automation-settings h2, .automation-flow-heading h2 { margin: 0; color: var(--text-main); font-size: 21px; }.automation-header p, .automation-settings > p, .automation-flow-heading p { margin: 4px 0 0; color: var(--text-muted); font-size: 12px; }
.automation-summary { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 13px; color: #0f766e; font-size: 11px; font-weight: 700; }.automation-summary i { color: #14b8a6; }
.automation-empty-state { display: flex; min-height: 390px; flex-direction: column; align-items: center; justify-content: center; padding: 40px 24px; border: 1px dashed #cbd5e1; border-radius: 14px; background: #fff; text-align: center; }.automation-empty-icon { display: grid; width: 54px; height: 54px; place-items: center; border-radius: 14px; color: #0f766e; background: #ccfbf1; font-size: 24px; }.automation-empty-state h3 { margin: 15px 0 7px; color: var(--text-main); font-size: 18px; }.automation-empty-state p { max-width: 420px; margin: 0 0 20px; color: var(--text-muted); font-size: 12px; line-height: 1.5; }
.automation-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(275px, 1fr)); gap: 14px; }.automation-card { display: flex; min-height: 230px; flex-direction: column; padding: 16px; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; box-shadow: var(--shadow-sm); }.automation-card h3 { margin: 14px 0 5px; color: var(--text-main); font-size: 15px; }.automation-card > p { flex: 1; margin: 0; color: var(--text-muted); font-size: 11px; line-height: 1.45; }.automation-status { display: inline-flex; padding: 4px 8px; border-radius: 999px; color: #64748b; background: #f1f5f9; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }.automation-status.active { color: #047857; background: #d1fae5; }.automation-status.paused { color: #b45309; background: #fef3c7; }.automation-card-meta { display: flex; flex-direction: column; gap: 6px; margin: 16px 0 12px; color: var(--text-muted); font-size: 10px; }.automation-card-meta i { width: 15px; color: #0f766e; }.automation-card-actions { justify-content: flex-start; padding-top: 12px; border-top: 1px solid #f1f5f9; }
.automation-editor-header { margin-bottom: 15px; }.automation-editor-actions { display: flex; gap: 8px; }.automation-editor { display: grid; grid-template-columns: minmax(230px, 290px) minmax(0, 1fr); min-height: 500px; overflow: hidden; border: 1px solid #e2e8f0; border-radius: 14px; background: #fff; }.automation-settings { padding: 20px; border-right: 1px solid #e2e8f0; background: #f8fafc; }.automation-settings label { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; color: var(--text-main); font-size: 11px; font-weight: 700; }.automation-settings textarea { min-height: 82px; resize: vertical; }.automation-safety { display: flex; gap: 8px; margin-top: 20px; padding: 10px; border: 1px solid #99f6e4; border-radius: 8px; color: #0f766e; background: #f0fdfa; font-size: 10px; line-height: 1.4; }.automation-safety i { margin-top: 1px; }
.automation-flow { min-width: 0; padding: 22px; background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%); }.automation-flow-heading { align-items: flex-start; margin-bottom: 22px; }.automation-flow-heading h2 { font-size: 17px; }.automation-trigger-node, .automation-step { display: flex; position: relative; align-items: flex-start; gap: 12px; max-width: 720px; padding: 13px; border: 1px solid #99f6e4; border-radius: 10px; background: #f0fdfa; }.automation-trigger-node small { display: block; margin-bottom: 3px; color: #0f766e; font-size: 9px; font-weight: 800; letter-spacing: .06em; }.automation-trigger-node strong { color: var(--text-main); font-size: 12px; }.flow-node-icon, .automation-step-index { display: grid; flex: 0 0 30px; width: 30px; height: 30px; place-items: center; border-radius: 8px; color: #fff; background: #0f766e; font-size: 12px; font-weight: 800; }.automation-flow-steps { display: flex; flex-direction: column; gap: 12px; max-width: 720px; margin-top: 14px; }.automation-step { border-color: #e2e8f0; background: #fff; box-shadow: var(--shadow-sm); }.automation-step::before { position: absolute; top: -14px; left: 28px; width: 1px; height: 13px; content: ""; background: #94a3b8; }.automation-step-body { flex: 1; min-width: 0; }.automation-step-type { max-width: 140px; }.automation-step-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(110px, .6fr); gap: 8px; margin-top: 8px; }.automation-step-fields .automation-step-message { grid-column: 1 / -1; }.automation-flow-empty { padding: 38px 20px; border: 1px dashed #cbd5e1; border-radius: 10px; color: var(--text-muted); background: #fff; text-align: center; }.automation-flow-empty i { color: #0f766e; font-size: 22px; }.automation-flow-empty h3 { margin: 8px 0 4px; color: var(--text-main); font-size: 13px; }.automation-flow-empty p { margin: 0; font-size: 11px; }
@media (max-width: 860px) { .automation-editor { grid-template-columns: 1fr; overflow: visible; }.automation-settings { border-right: 0; border-bottom: 1px solid #e2e8f0; }.automation-header { align-items: flex-start; flex-direction: column; }.automation-editor-header { align-items: flex-start; flex-direction: column; }.automation-editor-actions { width: 100%; }.automation-editor-actions .btn { flex: 1; justify-content: center; } }
@media (max-width: 560px) { .automation-flow, .automation-settings { padding: 16px; }.automation-step-fields { grid-template-columns: 1fr; }.automation-step-fields .automation-step-message { grid-column: auto; }.automation-header > .btn { width: 100%; justify-content: center; } }

.chat-recording-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #b91c1c;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.recording-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #dc2626;
    animation: recording-pulse 1s infinite;
}

@keyframes recording-pulse { 50% { opacity: .3; } }

.chat-message-image {
    display: block;
    max-width: min(320px, 100%);
    max-height: 280px;
    object-fit: cover;
    border-radius: 7px;
    margin-bottom: 6px;
}

.chat-message-video {
    display: block;
    width: min(320px, 100%);
    max-height: 280px;
    border-radius: 7px;
    margin-bottom: 6px;
    background: #000;
}

.chat-message-audio { width: min(300px, 100%); display: block; }
.chat-message-document,
.chat-message-location {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 10px;
    margin-bottom: 6px;
    border-radius: 8px;
    background: rgba(255,255,255,.68);
    color: var(--text-main);
    text-decoration: none;
    font-size: 12px;
}
.chat-message-document i { color: #dc2626; font-size: 17px; }
.chat-message-location i { color: var(--primary); font-size: 17px; }
.chat-message-document span,
.chat-message-location span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-message-media-placeholder {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    margin-bottom: 6px;
    border: 1px dashed rgba(15, 118, 110, .35);
    border-radius: 8px;
    color: var(--text-muted);
    background: rgba(255,255,255,.55);
    font-size: 11px;
}
.chat-message-media-placeholder i { color: var(--primary); }
.field-help { color: var(--text-muted); font-size: 10px; }

.contact-modal-actions { display: flex; align-items: center; gap: 5px; margin-left: auto; }
.btn-icon-subtle {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: #fff;
    color: var(--text-muted);
    cursor: pointer;
}
.btn-icon-subtle:hover { color: var(--primary); border-color: var(--primary); }
.btn-icon-subtle.danger:hover { color: #dc2626; border-color: #dc2626; background: #fff7f7; }
.contact-action-group { display: inline-flex; align-items: center; gap: 6px; }
.contact-delete-button { color: #b91c1c !important; }
.contact-edit-form { display: grid; gap: 12px; }

/* Sidebar details for client */
.lead-details-sidebar {
    width: 280px;
    height: 100%;
    background-color: #ffffff;
    border-left: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s;
}

.lead-details-sidebar.collapsed {
    width: 0px !important;
    min-width: 0px !important;
    border-left-color: transparent !important;
    overflow: hidden !important;
}

.sidebar-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.btn-toggle-sidebar-details {
    background: none !important;
    border: none !important;
    color: var(--text-muted) !important;
    cursor: pointer !important;
    padding: 6px !important;
    font-size: 14px !important;
    border-radius: var(--radius-sm) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: var(--transition-fast) !important;
    box-shadow: none !important;
    outline: none !important;
}

.btn-toggle-sidebar-details:hover {
    background-color: var(--bg-app);
    color: var(--text-main);
}

.sidebar-empty-state {
    padding: 40px 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 12px;
    margin: auto;
}

.sidebar-content {
    padding: 16px;
    overflow-y: auto;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sidebar-section-header h3 {
    font-size: 14px;
    font-weight: 700;
}

.lead-avatar-large {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background-color: var(--primary);
    color: white;
    font-size: 20px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 8px auto 10px auto;
}

.lead-profile-summary {
    text-align: center;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border-color);
}

.lead-profile-summary h4 {
    font-size: 14.5px;
    font-weight: 600;
}

.sidebar-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sidebar-section label {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--text-muted);
}

.sidebar-section p {
    font-size: 12.5px;
}

.lead-tags-container {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.add-tag-wrapper {
    display: flex;
    gap: 6px;
    margin-top: 6px;
}

.add-tag-wrapper input {
    flex: 1;
    padding: 4px 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 11px;
}


/* ==========================================================================
   ABA 2: FUNIL DE LEADS (KANBAN BOARD)
   ========================================================================== */
.crm-header-controls {
    padding: 16px 24px;
    background-color: #ffffff;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.crm-header-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.pipeline-selector-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pipeline-selector-wrapper label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
}

.pipeline-selector-wrapper select {
    min-width: 178px;
    padding: 8px 40px 8px 12px;
    font-weight: 600;
    font-size: 13px;
}

.crm-filters-group {
    display: flex;
    gap: 8px;
}

.select-filter-sm {
    min-height: 32px;
    padding: 7px 36px 7px 11px;
    font-size: 11px;
    color: var(--text-muted);
    border-radius: 999px;
    width: auto;
}

.crm-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.search-box-crm {
    position: relative;
}

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

.search-box-crm input {
    padding: 6px 12px 6px 28px;
    background-color: #f3f4f6;
    border: 1px solid transparent;
    border-radius: 20px;
    font-size: 12px;
    width: 180px;
    outline: none;
    transition: var(--transition-fast);
}

.search-box-crm input:focus {
    background-color: #ffffff;
    border-color: var(--border-color);
    width: 220px;
}

/* Kanban Columns Structure */
.kanban-board {
    display: flex;
    gap: 16px;
    padding: 16px 24px;
    height: calc(100% - 73px);
    overflow-x: auto;
    align-items: flex-start;
    background-color: var(--bg-app);
}

.kanban-column {
    width: 275px;
    max-height: 100%;
    background-color: #e5e7eb; /* clean column background matching photo */
    background-color: rgba(229, 231, 235, 0.6);
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    transition: background-color var(--transition-fast);
}

.kanban-column.drag-over {
    background-color: rgba(15, 118, 110, 0.05);
    border-color: var(--primary);
}

.column-header {
    padding: 12px 14px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.column-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Bullet indicator on headers */
.column-title-row::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

/* Bullet dots colors */
.kanban-column:nth-child(6n+1) .column-title-row::before { background-color: #94a3b8; }
.kanban-column:nth-child(6n+2) .column-title-row::before { background-color: #f97316; }
.kanban-column:nth-child(6n+3) .column-title-row::before { background-color: #3b82f6; }
.kanban-column:nth-child(6n+4) .column-title-row::before { background-color: #a855f7; }
.kanban-column:nth-child(6n+5) .column-title-row::before { background-color: #0d9488; }
.kanban-column:nth-child(6n+6) .column-title-row::before { background-color: #10b981; }

.column-title-row h3 {
    font-size: 12px;
    font-weight: 700;
    color: #374151;
    text-transform: capitalize;
}

.column-count {
    background-color: #e5e7eb;
    color: #4b5563;
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 10px;
    font-weight: 600;
}

.column-sum {
    font-size: 11px;
    color: #4b5563;
    font-weight: 600;
}

.column-cards-list {
    flex: 1;
    padding: 10px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 120px;
}

/* ==========================================================================
   KANBAN CARD REDESIGN (EXACTLY MATCHING THE REFERENCED PHOTO)
   ========================================================================== */
.kanban-card {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-md);
    padding: 12px;
    cursor: grab;
    transition: var(--transition-fast);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.kanban-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    border-color: #cbd5e1;
}

.kanban-card.dragging {
    opacity: 0.3;
}

/* Row 1 inside card: User profile details and timestamp */
.card-header-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.card-lead-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: white;
    font-weight: 700;
    font-size: 10.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.card-lead-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.card-lead-name {
    font-size: 12.5px;
    font-weight: 700;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-lead-meta {
    font-size: 10px;
    color: var(--text-muted);
}

/* Row 2: Lead/Deal title or item description */
.card-middle-row {
    font-size: 11px;
    color: #4b5563;
    padding: 2px 0;
    font-weight: 500;
}

/* Row 3: Financial value, owner avatar/tag, WhatsApp icon badge */
.card-footer-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #f3f4f6;
    padding-top: 8px;
    margin-top: 2px;
}

.card-financials {
    display: flex;
    align-items: center;
    gap: 6px;
}

.card-value {
    font-size: 12px;
    font-weight: 700;
    color: #111827;
}

.card-owner-badge {
    font-size: 9px;
    font-weight: 700;
    background-color: #f1f5f9;
    color: #475569;
    padding: 1px 5px;
    border-radius: 4px;
    border: 1px solid #e2e8f0;
}

.card-whatsapp-badge {
    width: 22px;
    height: 22px;
    background-color: #25d366; /* green */
    color: white;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(37, 211, 102, 0.2);
}

/* Dotted + Adicionar Button at column footer */
.btn-column-add {
    margin: 4px 10px 10px 10px;
    padding: 6px;
    background-color: #ffffff;
    border: 1px dashed #cbd5e1;
    border-radius: var(--radius-md);
    color: var(--text-muted);
    font-size: 11.5px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: var(--transition-fast);
}

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


/* ==========================================================================
   ABA 3: CONFIGURAR PIPELINES
   ========================================================================== */
.pipelines-settings-layout {
    display: flex;
    height: 100%;
    background-color: #ffffff;
}

.pipelines-list-container {
    width: 280px;
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.pipelines-list-header {
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pipelines-list-header h3 {
    font-size: 13.5px;
    font-weight: 700;
}

.pipelines-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pipeline-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background-color: #f8fafc;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition-fast);
}

.pipeline-list-item:hover {
    background-color: #f1f5f9;
}

.pipeline-list-item.active {
    background-color: var(--primary-glow);
    border-color: var(--primary);
    color: var(--primary);
}

.pipeline-list-item span {
    font-weight: 600;
    font-size: 12.5px;
}

.pipeline-list-item-badge {
    background-color: #e2e8f0;
    color: var(--text-muted);
    font-size: 9.5px;
    padding: 1px 5px;
    border-radius: 8px;
    font-weight: 600;
}

.pipeline-list-item.active .pipeline-list-item-badge {
    background-color: var(--primary);
    color: white;
}

/* Editor Panel */
.pipeline-editor-container {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #f8fafc;
}

.pipeline-editor-empty {
    margin: auto;
    text-align: center;
    max-width: 280px;
}

.pipeline-editor-empty i {
    font-size: 36px;
    color: #cbd5e1;
    margin-bottom: 12px;
}

.pipeline-editor-empty p {
    color: var(--text-muted);
    font-size: 12.5px;
}

.pipeline-editor-content {
    padding: 24px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.pipeline-editor-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 16px;
}

.pipeline-title-edit {
    flex: 1;
    max-width: 320px;
}

.stages-editor-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.stages-header h4 {
    font-size: 13.5px;
    font-weight: 700;
}

.stages-header p {
    font-size: 11px;
    color: var(--text-muted);
}

.stages-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.stage-editor-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: #ffffff;
    border: 1px solid var(--border-color);
    padding: 8px 12px;
    border-radius: var(--radius-md);
}

.stage-drag-handle {
    color: #cbd5e1;
    cursor: grab;
}

.stage-editor-index {
    background-color: #f1f5f9;
    color: var(--text-muted);
    font-size: 10.5px;
    font-weight: 700;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stage-editor-row input {
    flex: 1;
    font-size: 12.5px;
    font-weight: 600;
    padding: 4px 8px;
    border-bottom: 1px solid transparent;
}

.stage-editor-row input:focus {
    border-color: var(--primary);
}

.btn-delete-stage {
    color: #94a3b8;
    cursor: pointer;
}

.btn-delete-stage:hover {
    color: var(--danger);
}


/* ==========================================================================
   ABA 4: CONFIGURAÇÕES E EQUIPE
   ========================================================================== */
.settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    padding: 24px;
    height: 100%;
    overflow-y: auto;
    background-color: var(--bg-app);
}

.settings-card {
    background-color: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-sm);
    height: fit-content;
}

.settings-card-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 10px;
}

.settings-card-header i {
    font-size: 16px;
    color: var(--primary);
}

.settings-card-header h3 {
    font-size: 14.5px;
    font-weight: 700;
}

.settings-card-body {
    padding: 20px;
}

.settings-card-body p {
    font-size: 12.5px;
    color: var(--text-muted);
    line-height: 1.4;
    margin-bottom: 16px;
}

.team-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.team-member-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background-color: #f8fafc;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.member-info-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

.member-avatar-placeholder {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 10.5px;
    color: #475569;
}

.member-details-text span {
    font-size: 12.5px;
    font-weight: 600;
    display: block;
}

.member-details-text small {
    color: var(--text-muted);
    font-size: 10px;
}

.add-member-form {
    border-top: 1px solid var(--border-color);
    padding-top: 16px;
}

.add-member-form h4 {
    font-size: 13px;
    margin-bottom: 10px;
}

.permissions-matrix {
    display: flex;
    flex-direction: column;
}

.team-settings-layout { grid-template-columns: minmax(0, 1fr); }
.settings-card-header .btn { margin-left: auto; }
.account-settings-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.account-settings-layout .settings-card:last-child { grid-column: 1 / -1; }
.account-email-display { display: flex; flex-direction: column; gap: 4px; margin-bottom: 18px; }
.account-email-display span, .account-form-section label, .integration-setting span, .setting-status { color: var(--text-muted); font-size: 11px; }
.account-email-display strong { color: var(--text-main); font-size: 13px; }
.account-form-section { display: flex; flex-direction: column; gap: 7px; }
.account-form-section + .integration-setting { margin-top: 20px; }
.account-form-section .btn { align-self: flex-start; margin-top: 5px; }
.integration-setting { display: flex; flex-direction: column; gap: 4px; padding-top: 14px; border-top: 1px solid var(--border-color); font-size: 12px; }
.setting-status { display: block; margin-top: 10px; }
.checkbox-row { display: inline-flex; align-items: center; gap: 8px; color: var(--text-main); font-size: 12px; font-weight: 600; cursor: pointer; }
.checkbox-row input { width: 16px; height: 16px; accent-color: var(--primary); }
.meta-events-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; margin: 6px 0 4px; padding: 12px; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-soft); }
.tenant-manager-list { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-color); }
.tenant-manager-empty { color: var(--text-muted); font-size: 12px; }
.tenant-manager-item { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 11px; align-items: center; padding: 12px; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-soft); }
.tenant-manager-avatar { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 12px; color: var(--primary); background: rgba(20, 184, 166, 0.14); font-size: 13px; font-weight: 800; }
.tenant-manager-info { min-width: 0; }
.tenant-manager-info strong, .tenant-manager-info span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tenant-manager-info strong { color: var(--text-main); font-size: 13px; }
.tenant-manager-info span { margin-top: 3px; color: var(--text-muted); font-size: 11px; }
.tenant-manager-actions { display: flex; gap: 6px; align-items: center; }
.tenant-manager-edit { display: grid; grid-template-columns: minmax(130px, 1fr) minmax(120px, 0.8fr) auto auto; gap: 8px; align-items: center; padding: 12px; border: 1px solid var(--primary); border-radius: var(--radius-md); background: var(--bg-main); }
.tenant-manager-edit .form-control { min-width: 0; }

@media (max-width: 900px) {
    .account-settings-layout { grid-template-columns: 1fr; }
    .account-settings-layout .settings-card:last-child { grid-column: auto; }
    .tenant-manager-item { grid-template-columns: 38px minmax(0, 1fr); }
    .tenant-manager-actions { grid-column: 1 / -1; justify-content: flex-start; }
    .tenant-manager-edit { grid-template-columns: 1fr; }
}

.perm-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    padding: 10px;
    border-bottom: 1px solid #f3f4f6;
    font-size: 11.5px;
}

.perm-row.header {
    border-bottom: 1.5px solid var(--border-color);
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    font-size: 9.5px;
}

.perm-col:not(:first-child) {
    text-align: center;
}

.text-success { color: var(--success); }
.text-danger { color: var(--danger); }


/* ==========================================================================
   MODAIS E BACKDROPS
   ========================================================================== */
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(17, 24, 39, 0.4); /* Gray 900 semi transparent */
    backdrop-filter: blur(2px);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
}

.modal-backdrop.hide {
    display: none !important;
}

.modal-container {
    width: 520px;
    max-width: 90vw;
    background-color: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    animation: modalSlideUp 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.modal-container.modal-sm {
    width: 380px;
}

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

.modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-header h3 {
    font-size: 14.5px;
    font-weight: 700;
}

.btn-close-modal {
    color: var(--text-muted);
    font-size: 16px;
    cursor: pointer;
}

.btn-close-modal:hover {
    color: var(--text-main);
}

.modal-body {
    padding: 20px;
    max-height: 75vh;
    overflow-y: auto;
}

.modal-footer {
    border-top: 1px solid var(--border-color);
    padding: 14px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-right-actions {
    display: flex;
    gap: 10px;
}

/* Timeline */
.deal-timeline-section {
    margin-top: 20px;
    border-top: 1px solid var(--border-color);
    padding-top: 16px;
}

.deal-timeline-section h4 {
    font-size: 11px;
    margin-bottom: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
}

.deal-timeline {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 110px;
    overflow-y: auto;
}

.timeline-item {
    font-size: 11.5px;
    color: var(--text-muted);
    padding-left: 10px;
    border-left: 2px solid var(--border-color);
    position: relative;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: -5px;
    top: 3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--border-color);
}

.timeline-item.important::before {
    background-color: var(--primary);
}

.timeline-item span {
    font-weight: 600;
    color: var(--text-main);
}

.timeline-time {
    display: block;
    font-size: 9px;
    opacity: 0.6;
    margin-top: 1px;
}

/* Helpers */
.hide {
    display: none !important;
}

/* Action restrictions locks */
.action-restricted {
    opacity: 0.55 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    position: relative;
}

.action-restricted::after {
    content: '🔒';
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
}

/* ==========================================================================
   TAREFAS (TASKS)
   ========================================================================== */
.tasks-layout {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 20px 30px;
    background-color: var(--bg-app);
    gap: 20px;
}

.tasks-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tasks-header-title h2 {
    font-size: 22px;
    color: var(--text-main);
}

.tasks-header-title p {
    font-size: 13px;
    color: var(--text-muted);
}

.tasks-filters {
    display: flex;
    gap: 10px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
}

.tasks-filters .filter-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
    padding: 8px 12px;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: var(--transition-fast);
}

.tasks-filters .filter-btn:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.tasks-filters .filter-btn.active {
    background-color: var(--bg-card);
    color: var(--primary);
    border: 1px solid var(--border-color);
}

.tasks-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    flex: 1;
}

.task-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: var(--transition-fast);
}

.task-card:hover {
    border-color: #4b5563;
}

.task-card.completed {
    opacity: 0.5;
}

.task-card.completed .task-title {
    text-decoration: line-through;
}

.task-checkbox-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.task-checkbox {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: var(--primary);
}

.task-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.task-title {
    font-size: 14px;
    color: var(--text-main);
    font-weight: 500;
}

.task-meta {
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 10px;
}

.task-badge {
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
}

.task-badge.late { background-color: rgba(239, 68, 68, 0.1); color: var(--danger); }
.task-badge.today { background-color: rgba(20, 184, 166, 0.1); color: var(--primary); }
.task-badge.future { background-color: rgba(59, 130, 246, 0.1); color: #3b82f6; }

.task-deal-link {
    color: var(--primary);
    text-decoration: none;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
}
.task-deal-link:hover { text-decoration: underline; }

.deal-tasks-section {
    border-top: 1px solid var(--border-color);
    margin-top: 15px;
    padding-top: 15px;
}

.deal-tasks-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.deal-tasks-header h4 {
    font-size: 13px;
    color: var(--text-main);
}

.deal-tasks-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 150px;
    overflow-y: auto;
}

.deal-task-item {
    background-color: var(--bg-app);
    padding: 8px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--border-color);
}

.deal-task-item .task-title { font-size: 12px; }

/* ==========================================================================
   CALENDÁRIO (FULLCALENDAR OVERRIDES)
   ========================================================================== */
.calendar-layout {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    height: auto;
    padding: 20px 30px;
    background-color: var(--bg-app);
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.calendar-header h2 {
    font-size: 22px;
    color: var(--text-main);
}

.calendar-container {
    flex: 1;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 15px;
    color: var(--text-main);
    min-height: 720px;
    overflow: auto;
}

.fc-theme-standard td, .fc-theme-standard th, .fc-theme-standard .fc-scrollgrid {
    border-color: var(--border-color) !important;
}

.fc-col-header-cell-cushion {
    color: var(--text-muted);
    font-weight: 500;
}

.fc-daygrid-day-number {
    color: var(--text-main);
    font-size: 13px;
}

.fc .fc-toolbar-title {
    font-size: 18px !important;
    font-family: 'Outfit', sans-serif;
}

.fc .fc-button-primary {
    background-color: var(--bg-card-hover) !important;
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
    box-shadow: none !important;
}

.fc .fc-button-primary:hover {
    background-color: var(--border-color) !important;
}

.fc .fc-button-primary:disabled {
    background-color: var(--bg-app) !important;
    color: var(--text-muted) !important;
}

.fc-event {
    border: none !important;
    border-radius: 4px !important;
    padding: 2px 4px !important;
    font-size: 11px !important;
    cursor: pointer;
}

.fc .fc-timegrid-slot {
    height: 2.6em;
}

.task-unlinked-lead {
    color: var(--text-muted);
    font-size: 11px;
}

/* ==========================================================================
   NOTIFICAÇÕES E ANIMAÇÕES
   ========================================================================== */
@keyframes ring {
    0% { transform: rotate(0); }
    10% { transform: rotate(15deg); }
    20% { transform: rotate(-10deg); }
    30% { transform: rotate(10deg); }
    40% { transform: rotate(-10deg); }
    50% { transform: rotate(0); }
    100% { transform: rotate(0); }
}

.bell-animating {
    animation: ring 1.5s ease infinite;
    color: var(--primary) !important;
}

.toast-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.toast {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--primary);
    box-shadow: var(--shadow-lg);
    border-radius: var(--radius-sm);
    padding: 15px 20px;
    display: flex;
    align-items: flex-start;
    gap: 15px;
    width: 320px;
    animation: slideInRight 0.3s ease forwards;
    position: relative;
}

.toast.toast-warning { border-left-color: var(--danger); }
.toast.toast-message { border-left-color: #25d366; }

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

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

.toast.hiding {
    animation: fadeOut 0.3s ease forwards;
}

.toast-icon {
    font-size: 20px;
    color: var(--primary);
}

.toast.toast-warning .toast-icon { color: var(--danger); }
.toast.toast-message .toast-icon { color: #25d366; }

.toast-content { flex: 1; }
.toast-title { font-weight: 600; font-size: 14px; color: var(--text-main); margin-bottom: 4px; }
.toast-msg { font-size: 12px; color: var(--text-muted); }

.toast-close {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
    font-size: 14px;
}
.toast-close:hover { color: var(--text-main); }

/* ==========================================================================
   TELA: CONTATOS (CONTACTS)
   ========================================================================== */
.contacts-layout {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    padding: 20px 30px;
    background-color: var(--bg-app);
    gap: 20px;
}

.contacts-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.contacts-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.contacts-header-title h2 {
    font-size: 22px;
    color: var(--text-main);
}

.contacts-header-title p {
    font-size: 13px;
    color: var(--text-muted);
}

.contacts-table-container {
    flex: 1;
    min-height: 0;
    background-color: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: auto;
    box-shadow: var(--shadow-sm);
}

.contacts-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.contacts-table th, .contacts-table td {
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-color);
    font-size: 13px;
}

.contacts-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: #f8fafc;
    color: var(--text-muted);
    font-weight: 600;
}

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

.contacts-table tbody tr:hover td {
    background-color: #f8fafc;
}

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

/* ==========================================================================
   TELA: INSTÂNCIAS (INSTANCES)
   ========================================================================== */
.instances-layout {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 20px 30px;
    background-color: var(--bg-app);
    gap: 20px;
}

.instances-header h2 {
    font-size: 22px;
    color: var(--text-main);
}

.instances-header p {
    font-size: 13px;
    color: var(--text-muted);
}

.instances-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 20px;
}

.instance-card {
    background-color: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.instance-card-compact {
    align-self: start;
}

.instance-card-header {
    padding: 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.instance-brand {
    display: flex;
    align-items: center;
    gap: 15px;
}

.instance-brand i {
    font-size: 32px;
}

.instance-brand h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-main);
    margin: 0;
}

.instance-channel {
    font-size: 11px;
    color: var(--text-muted);
}

.status-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 12px;
    text-transform: uppercase;
}

.status-badge.status-connected {
    background-color: rgba(20, 184, 166, 0.1);
    color: var(--primary);
}

.status-badge.status-disconnected {
    background-color: rgba(239, 68, 68, 0.1);
    color: var(--danger);
}

.status-badge.status-connecting {
    background-color: rgba(245, 158, 11, 0.12);
    color: #b45309;
}

.instance-card-body {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.instance-card-body p {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
}

.instance-details {
    background-color: #f8fafc;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
}

.detail-row span {
    color: var(--text-muted);
}

.detail-row code {
    background-color: #e2e8f0;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 11px;
}

.instance-card-footer {
    padding: 20px;
    border-top: 1px solid var(--border-color);
    background-color: #f8fafc;
}

.whatsapp-connect-modal {
    width: min(520px, calc(100vw - 32px));
}

.qrcode-wrapper {
    position: relative;
    width: 230px;
    height: 230px;
    margin: 20px auto;
    border: 1px solid var(--border-color);
    padding: 10px;
    background: #ffffff;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.whatsapp-qrcode-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: pixelated;
}

.qrcode-loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.95);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border-radius: var(--radius-md);
}

.spinner {
    width: 32px;
    height: 32px;
    border: 3px solid #cbd5e1;
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

.qrcode-timer {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 10px;
}

.qrcode-progress {
    width: 100%;
    height: 6px;
    margin-top: 4px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--bg-soft);
}

.qrcode-progress span {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: var(--primary);
    transition: width 0.2s linear;
}

.whatsapp-connection-status {
    min-height: 20px;
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 12px;
}

.whatsapp-connection-status.is-connected {
    color: var(--primary);
    font-weight: 700;
}

.whatsapp-connection-status.is-error {
    color: var(--danger);
}

/* ==========================================================================
   TELA: GERENCIADOR DE TAGS (TAGS)
   ========================================================================== */
.tags-layout {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 20px 30px;
    background-color: var(--bg-app);
    gap: 20px;
}

.tags-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 20px;
    align-items: flex-start;
}

.color-picker-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
}

.color-picker-input {
    width: 42px;
    height: 42px;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    padding: 0;
    outline: none;
    cursor: pointer;
    background: none;
    overflow: hidden;
}

.color-picker-input::-webkit-color-swatch-wrapper {
    padding: 0;
}

.color-picker-input::-webkit-color-swatch {
    border: none;
    border-radius: 50%;
}

.color-picker-preview {
    flex: 1;
    height: 38px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    transition: background-color 0.2s;
}

.tags-form-actions {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.tags-settings-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 450px;
    overflow-y: auto;
}

.tag-setting-item {
    background-color: #f8fafc;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: var(--transition-fast);
}

.tag-setting-item:hover {
    border-color: #cbd5e1;
    background-color: #ffffff;
}

.tag-setting-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tag-color-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
}

.tag-setting-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
}

.tag-setting-actions {
    display: flex;
    gap: 8px;
}

.tag-btn-action {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 13px;
    padding: 4px;
    border-radius: 4px;
    transition: var(--transition-fast);
}

.tag-btn-action.btn-edit-tag {
    color: var(--text-muted);
}
.tag-btn-action.btn-edit-tag:hover {
    color: var(--primary);
    background-color: rgba(20, 184, 166, 0.05);
}

.tag-btn-action.btn-delete-tag {
    color: var(--danger);
}
.tag-btn-action.btn-delete-tag:hover {
    background-color: #fee2e2;
}

/* Draggable UI indicator for pipelines stages */
.stage-editor-row.dragging {
    opacity: 0.5;
    background-color: #f1f5f9;
    border: 1px dashed var(--primary) !important;
}

.stage-drag-handle {
    cursor: grab;
    color: var(--text-muted);
    padding: 4px 8px;
}

.stage-drag-handle:active {
    cursor: grabbing;
}

/* Login usa os mesmos tokens, tipografia, botões e campos do CRM. */
.login-page {
    min-height: 100vh;
    background: var(--bg-app);
}

.login-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
}

.login-card {
    width: min(420px, 100%);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 32px;
}

.login-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.login-brand h1 {
    font: 700 25px/1 "Outfit", sans-serif;
    color: var(--text-main);
}

.login-brand h1 span { color: var(--primary); }
.login-subtitle { color: var(--text-muted); font-size: 13px; margin-bottom: 24px; }
.login-card .form-group { margin-bottom: 16px; }
.login-card .form-group label { display: block; margin-bottom: 7px; font-size: 12px; font-weight: 600; color: var(--text-main); }
.login-error { margin-bottom: 16px; padding: 10px 12px; border-radius: var(--radius-sm); color: var(--danger); background: #fee2e2; font-size: 12px; }
.login-link { display: block; margin: 14px auto 0; border: 0; background: transparent; color: var(--primary); cursor: pointer; font: 600 12px/1.4 "Inter", sans-serif; }
.auth-divider { display: flex; align-items: center; gap: 10px; margin: 20px 0 14px; color: var(--text-muted); font-size: 11px; }
.auth-divider::before, .auth-divider::after { content: ""; height: 1px; flex: 1; background: var(--border-color); }
.btn-google { border: 1px solid var(--border-color); background: var(--bg-card); color: var(--text-main); justify-content: center; text-decoration: none; }
.btn-google:hover { background: var(--bg-hover); }
.btn-google.is-disabled { cursor: not-allowed; opacity: .55; }
.field-hint { margin: 6px 0 0; color: var(--text-muted); font-size: 11px; line-height: 1.35; }

.team-member-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.user-role-badge {
    color: var(--text-muted);
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1;
    padding: 4px 7px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    text-transform: capitalize;
}

.team-member-controls .form-select {
    width: auto;
    min-width: 118px;
    font-size: 11px;
}

/* ========================================================================== 
   MARKETING / FIDELIZAÇÃO
   ========================================================================== */
.nav-item-soon a { opacity: .58; cursor: not-allowed; }
.nav-item-soon small { margin-left: auto; font-size: 9px; color: var(--text-muted); }
.loyalty-layout { min-height: 100%; padding: 24px 30px; background: var(--bg-app); }
.loyalty-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.loyalty-header h2 { font-size: 22px; color: var(--text-main); }
.loyalty-header p { margin-top: 3px; font-size: 13px; color: var(--text-muted); }
.loyalty-rules-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.loyalty-rule-card, .loyalty-empty { border: 1px solid var(--border-color); border-radius: var(--radius-lg); background: var(--bg-card); box-shadow: var(--shadow-sm); }
.loyalty-rule-card { padding: 16px; }
.loyalty-rule-card-header, .loyalty-rule-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.loyalty-rule-card-header h3 { font-size: 14px; color: var(--text-main); }
.loyalty-rule-card-header span { display: block; margin-top: 3px; font-size: 11px; color: var(--text-muted); }
.loyalty-status { display: inline-flex; padding: 4px 7px; border-radius: 999px; font-size: 10px; font-weight: 700; color: var(--text-muted); background: #f1f5f9; }
.loyalty-status.is-active { color: #047857; background: #d1fae5; }
.loyalty-rule-details { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0; }
.loyalty-rule-details div { display: flex; flex-direction: column; gap: 3px; }
.loyalty-rule-details span, .contact-detail-grid span, .cashback-summary span { font-size: 10px; color: var(--text-muted); }
.loyalty-rule-details strong { font-size: 11.5px; color: var(--text-main); }
.loyalty-rule-actions { justify-content: flex-end; padding-top: 12px; border-top: 1px solid var(--border-color); }
.loyalty-empty { grid-column: 1 / -1; min-height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; color: var(--text-muted); }
.loyalty-empty i { font-size: 30px; color: var(--primary); margin-bottom: 10px; }
.loyalty-empty h3 { font-size: 14px; color: var(--text-main); margin-bottom: 5px; }
.loyalty-empty p { font-size: 12px; }
.loyalty-sale-fields { margin-top: 2px; }
.contact-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.contact-detail-grid div { display: flex; flex-direction: column; gap: 3px; }
.contact-detail-grid strong { font-size: 12px; color: var(--text-main); overflow-wrap: anywhere; }
.cashback-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0; padding: 14px; border: 1px solid #99f6e4; border-radius: var(--radius-md); background: #f0fdfa; }
.cashback-summary div { display: flex; flex-direction: column; gap: 4px; }
.cashback-summary strong { font-size: 15px; color: #0f766e; }
.contact-history-title { padding-top: 15px; border-top: 1px solid var(--border-color); font-size: 13px; }
.cashback-history-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; max-height: 300px; overflow: auto; }
.cashback-history-item { display: flex; flex-direction: column; gap: 3px; padding: 10px; border-radius: var(--radius-sm); background: #f8fafc; border: 1px solid var(--border-color); }
.cashback-history-item strong { font-size: 11.5px; color: var(--text-main); }
.cashback-history-item span, .cashback-history-item small { font-size: 10.5px; color: var(--text-muted); }
@media (max-width: 720px) { .loyalty-layout { padding: 18px; } .loyalty-header { align-items: flex-start; flex-direction: column; } .loyalty-header .btn { width: 100%; justify-content: center; } }

/* ========================================================================== 
   DASHBOARD
   ========================================================================== */
.dashboard-layout { min-height: 0; padding: 18px 24px 26px; overflow: visible; background: var(--bg-app); }
#tab-dashboard.tab-pane.active,
#tab-campaign-tracking.tab-pane.active,
#tab-contacts.tab-pane.active {
    overflow-y: auto;
}
.dashboard-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 6px; }
.dashboard-header h2 { font-size: 21px; color: var(--text-main); }
.dashboard-header p { margin-top: 4px; color: var(--text-muted); font-size: 13px; }
.dashboard-filters { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.dashboard-filters label { display: flex; flex-direction: column; gap: 5px; color: var(--text-muted); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.dashboard-filters .form-select { width: 142px; min-height: 30px; font-size: 11px; text-transform: none; letter-spacing: normal; font-weight: 500; }
.dashboard-period-note { display: flex; align-items: center; gap: 7px; color: var(--text-muted); font-size: 11px; margin-bottom: 12px; }
.dashboard-period-note i { color: var(--primary); }
.dashboard-period-note strong { color: var(--text-main); }
.dashboard-kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.dashboard-kpi-card { min-height: 84px; padding: 11px; display: flex; align-items: flex-start; gap: 9px; border: 1px solid var(--border-color); border-radius: var(--radius-lg); background: var(--bg-card); box-shadow: var(--shadow-sm); }
.dashboard-kpi-icon { display: grid; flex: 0 0 28px; width: 28px; height: 28px; place-items: center; border-radius: 8px; font-size: 12px; }
.dashboard-kpi-icon.teal { color: #0f766e; background: #ccfbf1; }
.dashboard-kpi-icon.blue { color: #2563eb; background: #dbeafe; }
.dashboard-kpi-icon.orange { color: #c2410c; background: #ffedd5; }
.dashboard-kpi-icon.green { color: #15803d; background: #dcfce7; }
.dashboard-kpi-icon.purple { color: #7e22ce; background: #f3e8ff; }
.dashboard-kpi-main { min-width: 0; display: flex; flex-direction: column; }
.dashboard-kpi-main > span { color: var(--text-muted); font-size: 11px; font-weight: 600; }
.dashboard-kpi-main strong { color: var(--text-main); margin: 3px 0; font: 700 18px/1 var(--font-heading); white-space: nowrap; }
.dashboard-kpi-main small { color: var(--text-muted); font-size: 10px; line-height: 1.35; }
.dashboard-help { color: #9ca3af; cursor: help; }
.dashboard-charts-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px, .8fr); gap: 14px; align-items: stretch; }
.dashboard-panel { min-height: 196px; padding: 13px; border: 1px solid var(--border-color); border-radius: var(--radius-lg); background: var(--bg-card); box-shadow: var(--shadow-sm); }
.dashboard-panel-wide { min-height: 214px; }
.dashboard-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 11px; }
.dashboard-panel-head h3 { color: var(--text-main); font-size: 14px; }
.dashboard-panel-head p { margin-top: 3px; color: var(--text-muted); font-size: 10.5px; }
.dashboard-panel-total { padding: 4px 8px; border-radius: 999px; color: #0f766e; background: #f0fdfa; font-size: 10px; font-weight: 700; white-space: nowrap; }
.dashboard-chart-bars { height: 138px; display: flex; align-items: flex-end; gap: 5px; padding: 12px 2px 0; border-bottom: 1px solid var(--border-color); }
.dashboard-bar-column { position: relative; flex: 1 1 0; min-width: 4px; height: 100%; display: flex; align-items: center; flex-direction: column; justify-content: flex-end; gap: 4px; }
.dashboard-bar { width: min(100%, 26px); min-height: 4px; border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, #2dd4bf, #0f766e); transition: height var(--transition-normal); }
.dashboard-bar-column:hover .dashboard-bar { background: linear-gradient(180deg, #14b8a6, #115e59); }
.dashboard-bar-value { min-height: 12px; color: var(--text-muted); font-size: 9px; font-weight: 700; }
.dashboard-bar-column small { min-height: 12px; color: var(--text-muted); font-size: 8px; white-space: nowrap; transform: rotate(-32deg); transform-origin: center top; }
.dashboard-source-list, .dashboard-funnel-list { display: flex; flex-direction: column; gap: 13px; }
.dashboard-source-row > div:first-child, .dashboard-funnel-label { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 5px; font-size: 11px; }
.dashboard-source-row span, .dashboard-funnel-label span { overflow: hidden; color: var(--text-main); text-overflow: ellipsis; white-space: nowrap; }
.dashboard-source-row strong, .dashboard-funnel-label strong { color: var(--text-muted); font-size: 10px; }
.dashboard-source-track, .dashboard-funnel-track { height: 7px; overflow: hidden; border-radius: 99px; background: #f1f5f9; }
.dashboard-source-track span, .dashboard-funnel-track span { display: block; height: 100%; border-radius: inherit; background: #14b8a6; }
.dashboard-funnel-row { display: grid; grid-template-columns: minmax(0, 1fr) 82px; column-gap: 12px; align-items: end; }
.dashboard-funnel-label, .dashboard-funnel-track { grid-column: 1; }
.dashboard-funnel-row > small { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--text-muted); font-size: 9.5px; text-align: right; white-space: nowrap; }
.dashboard-opportunities { min-height: 242px; }
.dashboard-opportunity-list { display: flex; flex-direction: column; gap: 3px; }
.dashboard-opportunity { width: 100%; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 9px; align-items: center; padding: 8px 4px; text-align: left; cursor: pointer; border-bottom: 1px solid #f1f5f9; }
.dashboard-opportunity:hover { background: #f8fafc; border-radius: 6px; }
.dashboard-opportunity-avatar { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; color: #fff; font-size: 9px; font-weight: 700; }
.dashboard-opportunity div:nth-child(2) { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.dashboard-opportunity strong { overflow: hidden; color: var(--text-main); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-opportunity span { overflow: hidden; color: var(--text-muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-opportunity b { color: #0f766e; font-size: 10px; white-space: nowrap; }
.dashboard-empty-inline { min-height: 120px; display: grid; place-items: center; color: var(--text-muted); font-size: 11px; text-align: center; }
.dashboard-footnote { display: flex; align-items: flex-start; gap: 7px; margin: 15px 2px 0; color: var(--text-muted); font-size: 10px; line-height: 1.45; }
.dashboard-footnote i { color: #64748b; margin-top: 1px; }
@media (max-width: 1180px) { .dashboard-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dashboard-charts-grid { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .dashboard-layout { padding: 18px; } .dashboard-header { align-items: flex-start; flex-direction: column; } .dashboard-filters { width: 100%; } .dashboard-filters label, .dashboard-filters .form-select { flex: 1; width: 100%; } .dashboard-kpi-grid { grid-template-columns: 1fr; } }

/* Marketing / Rastreamento */
.campaign-tracking-panel { margin-top: 14px; }
.campaign-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tracking-source-pill { display: inline-flex; align-items: center; max-width: 190px; padding: 4px 8px; border-radius: 999px; color: #0f766e; background: #ccfbf1; font-size: 10px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tracking-confidence { width: fit-content; padding: 2px 6px; border-radius: 999px; font-weight: 700; }
.tracking-confidence.high { color: #047857; background: #d1fae5; }
.tracking-confidence.medium { color: #92400e; background: #fef3c7; }
.tracking-confidence.low { color: #64748b; background: #f1f5f9; }
.campaign-groups-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.campaign-group-card { display: flex; flex-direction: column; gap: 12px; padding: 14px; border: 1px solid #e2e8f0; border-radius: 14px; background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.campaign-group-header { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.campaign-group-header h3 { margin: 9px 0 3px; color: var(--text-main); font-size: 14px; line-height: 1.25; }
.campaign-group-header p { margin: 0; color: var(--text-muted); font-size: 11px; line-height: 1.35; }
.campaign-group-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.campaign-group-meta span, .campaign-group-stats span, .campaign-group-ids span { min-width: 0; color: var(--text-muted); font-size: 10px; line-height: 1.35; }
.campaign-group-meta strong, .campaign-group-stats strong { display: block; margin-bottom: 2px; color: var(--text-main); font-size: 11px; }
.campaign-group-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 10px; border-radius: 10px; background: #ecfdf5; }
.campaign-group-stats strong { color: #0f766e; }
.campaign-group-ids { display: flex; flex-direction: column; gap: 4px; padding-top: 9px; border-top: 1px dashed #cbd5e1; }
.campaign-group-ids span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.campaign-tracking-notes { display: flex; flex-direction: column; gap: 10px; color: var(--text-muted); font-size: 11px; line-height: 1.45; }
.campaign-tracking-notes p { display: flex; gap: 8px; margin: 0; }
.campaign-tracking-notes i { color: #0f766e; margin-top: 2px; }
.campaign-tracking-empty { min-height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 26px; color: var(--text-muted); text-align: center; background: #fff; }
.campaign-tracking-empty i { font-size: 28px; color: var(--primary); }
.campaign-tracking-empty h3 { color: var(--text-main); font-size: 14px; }
.campaign-tracking-empty p { max-width: 360px; font-size: 11px; line-height: 1.45; }
@media (max-width: 1180px) { .campaign-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .campaign-kpi-grid, .campaign-group-meta, .campaign-group-stats { grid-template-columns: 1fr; } }

/* Assistentes de Atendimento */
.assistant-manager { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: 560px; overflow: hidden; border: 1px solid #e2e8f0; border-radius: 14px; background: #fff; }.assistant-list-panel { padding: 18px 12px; border-right: 1px solid #e2e8f0; background: #f8fafc; }.assistant-list-head, .assistant-editor-head, .assistant-activity-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }.assistant-list-head { padding: 0 6px 14px; }.assistant-list-head h3, .assistant-editor-head h2, .assistant-activity-head h3 { margin: 0; color: var(--text-main); }.assistant-list-head h3 { font-size: 15px; }.assistant-list-head p, .assistant-editor-head p, .assistant-activity-head p { margin: 4px 0 0; color: var(--text-muted); font-size: 11px; }.assistant-list { display: flex; flex-direction: column; gap: 7px; }.assistant-list-item { width: 100%; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 9px; align-items: center; padding: 10px; text-align: left; border: 1px solid transparent; border-radius: 10px; color: var(--text-main); background: transparent; cursor: pointer; }.assistant-list-item:hover, .assistant-list-item.active { border-color: #99f6e4; background: #ecfdf5; }.assistant-list-item strong, .assistant-list-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.assistant-list-item strong { font-size: 12px; }.assistant-list-item small { margin-top: 3px; color: var(--text-muted); font-size: 10px; }.assistant-list-item small i { font-size: 7px; }.assistant-avatar { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; background: #e2e8f0; font-size: 18px; }.assistant-editor-panel { min-width: 0; }.assistant-editor-head { padding: 24px 28px 16px; border-bottom: 1px solid #e2e8f0; }.assistant-editor-head h2 { font-size: 18px; }.assistant-eyebrow { display: block; margin-bottom: 5px; color: #0f766e; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }.assistant-tabs { display: flex; gap: 18px; padding: 0 28px; border-bottom: 1px solid #e2e8f0; }.assistant-tabs button { padding: 13px 2px 11px; border: 0; border-bottom: 2px solid transparent; color: var(--text-muted); background: transparent; font-size: 12px; font-weight: 600; cursor: pointer; }.assistant-tabs button.active { border-color: #0f766e; color: #0f766e; }.assistant-editor-body { padding: 22px 28px 28px; }.assistant-form { max-width: 820px; }.assistant-form .form-group { margin-bottom: 17px; }.assistant-form label, .assistant-status-field legend, .assistant-activity-form label { display: block; margin-bottom: 6px; color: var(--text-main); font-size: 11px; font-weight: 700; }.assistant-form input, .assistant-form select, .assistant-form textarea, .assistant-activity-form input, .assistant-activity-form select, .assistant-test-card input { width: 100%; border: 1px solid #dbe3ee; border-radius: 8px; padding: 10px 11px; color: var(--text-main); background: #fff; font: inherit; font-size: 12px; }.assistant-form textarea { resize: vertical; line-height: 1.45; }.assistant-form small, .form-help { display: block; margin: 5px 0 0; color: var(--text-muted); font-size: 10px; }.assistant-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }.input-suffix { display: flex; align-items: stretch; }.input-suffix input { border-radius: 8px 0 0 8px; }.input-suffix span { display: grid; place-items: center; padding: 0 10px; border: 1px solid #dbe3ee; border-left: 0; border-radius: 0 8px 8px 0; color: var(--text-muted); background: #f8fafc; font-size: 10px; white-space: nowrap; }.assistant-avatar-picker { margin-bottom: 18px; }.assistant-avatar-picker > div { display: flex; gap: 8px; }.avatar-option { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid #dbe3ee; border-radius: 50%; background: #fff; cursor: pointer; font-size: 18px; }.avatar-option.selected { border-color: #0f766e; box-shadow: 0 0 0 2px #ccfbf1; }.assistant-status-field { display: flex; gap: 18px; margin: 0 0 20px; padding: 12px 0; border: 0; border-top: 1px solid #e2e8f0; }.assistant-status-field legend { padding: 0; }.assistant-status-field label { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 11px; cursor: pointer; }.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #94a3b8; }.status-dot.active { background: #14b8a6; }.assistant-form-actions { display: flex; justify-content: flex-end; padding-top: 6px; }.assistant-instructions-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; }.assistant-test-card { display: flex; flex-direction: column; min-height: 350px; padding: 16px; border: 1px solid #e2e8f0; border-radius: 10px; background: #f8fafc; }.assistant-test-card h3 { margin: 0; font-size: 13px; }.assistant-test-card h3 i { color: #0f766e; }.assistant-test-card p { margin: 6px 0 14px; color: var(--text-muted); font-size: 10px; }.assistant-test-messages { flex: 1; display: flex; flex-direction: column; gap: 8px; color: var(--text-muted); font-size: 11px; }.assistant-test-inbound, .assistant-test-outbound { max-width: 90%; padding: 9px; border-radius: 9px; font-size: 11px; line-height: 1.4; }.assistant-test-inbound { align-self: flex-end; background: #d1fae5; }.assistant-test-outbound { background: #fff; border: 1px solid #e2e8f0; }.assistant-test-card form { display: flex; gap: 7px; }.assistant-test-card form button { width: 40px; }.assistant-activity-head { margin-bottom: 16px; }.assistant-activity-form { display: grid; grid-template-columns: 140px 190px minmax(190px, 1fr) auto; gap: 12px; align-items: end; padding: 14px; border: 1px solid #e2e8f0; border-radius: 10px; background: #f8fafc; }.assistant-activity-form .form-group { margin: 0; }.assistant-rules-list { display: flex; flex-direction: column; gap: 9px; margin-top: 18px; }.assistant-rule { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 13px; border: 1px solid #e2e8f0; border-radius: 10px; }.assistant-rule-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 8px; color: #0f766e; background: #ccfbf1; }.assistant-rule strong { display: block; color: var(--text-main); font-size: 12px; }.assistant-rule p { margin: 4px 0 0; color: var(--text-muted); font-size: 11px; }.assistant-empty-rules { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 42px; border: 1px dashed #cbd5e1; border-radius: 10px; color: var(--text-muted); font-size: 11px; text-align: center; }.assistant-empty-rules i { font-size: 23px; }.assistant-empty-rules strong { color: var(--text-main); }.icon-danger { color: #dc2626; }.icon-danger:disabled { opacity: .35; cursor: not-allowed; } @media (max-width: 960px) { .assistant-manager { grid-template-columns: 1fr; }.assistant-list-panel { border-right: 0; border-bottom: 1px solid #e2e8f0; }.assistant-list { flex-direction: row; overflow-x: auto; }.assistant-list-item { min-width: 180px; }.assistant-instructions-grid { grid-template-columns: 1fr; }.assistant-activity-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }.activity-message-field { grid-column: span 2; } } @media (max-width: 620px) { .assistant-editor-head, .assistant-editor-body { padding-left: 16px; padding-right: 16px; }.assistant-tabs { gap: 12px; padding: 0 16px; }.assistant-form-grid, .assistant-activity-form { grid-template-columns: 1fr; }.activity-message-field { grid-column: auto; } }

/* Dropdown polish */
select:not(.tenant-select-styled),
.assistant-form select,
.assistant-activity-form select {
    min-height: 38px;
    padding: 9px 42px 9px 13px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background-color: var(--bg-input);
    background-image:
        linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
        linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
    background-position:
        calc(100% - 18px) 50%,
        calc(100% - 12px) 50%;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    color: var(--text-main);
    font-family: var(--font-primary);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

select:not(.tenant-select-styled):focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-glow), var(--shadow-sm);
    outline: none;
}

.tenant-select-styled {
    font-family: var(--font-primary);
}

.role-select {
    min-height: 28px;
    padding: 5px 34px 5px 10px;
    border-radius: 999px;
    box-shadow: none;
    font-size: 11px;
}

.select-filter-sm,
.team-member-controls .form-select,
.dashboard-filters .form-select {
    min-height: 32px;
    border-radius: 999px;
    font-size: 11px;
}

.native-select-hidden {
    display: none !important;
}

.custom-select {
    position: relative;
    width: 100%;
    min-width: 0;
    font-family: var(--font-primary);
}

.pipeline-selector-wrapper .custom-select {
    width: auto;
    min-width: 178px;
}

.crm-filters-group .custom-select,
.dashboard-filters .custom-select,
.team-member-controls .custom-select {
    width: auto;
}

.custom-select-button {
    width: 100%;
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 12px 9px 13px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-input);
    color: var(--text-main);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), var(--shadow-sm);
    cursor: pointer;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}

.custom-select-button:hover {
    border-color: rgba(15, 118, 110, 0.45);
    background: var(--bg-card);
}

.custom-select.open .custom-select-button {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-glow), var(--shadow-sm);
}

.custom-select-value {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    text-align: left;
}

.custom-select-button i {
    flex: 0 0 auto;
    color: var(--text-muted);
    font-size: 11px;
    transition: transform var(--transition-fast), color var(--transition-fast);
}

.custom-select.open .custom-select-button i {
    color: var(--primary);
    transform: rotate(180deg);
}

.custom-select-list {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 4000;
    display: none;
    max-height: 260px;
    overflow-y: auto;
    padding: 6px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-card);
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.16), var(--shadow-md);
}

.custom-select.open .custom-select-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.custom-select-option {
    width: 100%;
    min-height: 34px;
    display: flex;
    align-items: center;
    padding: 8px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-main);
    font: 600 13px var(--font-primary);
    text-align: left;
    cursor: pointer;
}

.custom-select-option:hover {
    background: var(--bg-card-hover);
    color: var(--primary);
}

.custom-select-option.selected {
    background: var(--primary-glow);
    color: var(--primary);
}

.custom-select-option:disabled {
    cursor: not-allowed;
    opacity: .5;
}

.custom-select-group {
    padding: 8px 10px 4px;
}

.custom-select-group span {
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.custom-select-sm .custom-select-button {
    min-height: 32px;
    padding: 7px 10px 7px 11px;
}

.custom-select-sm .custom-select-value {
    font-size: 11px;
}

.custom-select-pill .custom-select-button {
    border-radius: 999px;
}

.custom-select-role {
    width: auto;
}

.custom-select-role .custom-select-button {
    min-height: 28px;
    padding: 5px 10px;
    border: 0;
    box-shadow: none;
    background: transparent;
}

.custom-select-role .custom-select-value {
    font-size: 11px;
}

.custom-select-tenant .custom-select-button {
    min-height: 20px;
    padding: 0 20px 0 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--primary);
}

.custom-select-tenant .custom-select-value {
    font-size: 13px;
    font-weight: 700;
}

.custom-select-tenant .custom-select-list {
    min-width: 220px;
}

/* Theme Overrides */
:root[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #3a3a3a; }
:root[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #555555; }
:root[data-theme="dark"] body { background-color: var(--bg-app); color: var(--text-main); }
:root[data-theme="dark"] .main-content,
:root[data-theme="dark"] .tab-pane,
:root[data-theme="dark"] .crm-layout,
:root[data-theme="dark"] .contacts-layout,
:root[data-theme="dark"] .dashboard-layout {
    background: var(--bg-app);
}
:root[data-theme="dark"] .topbar,
:root[data-theme="dark"] .chat-list-container,
:root[data-theme="dark"] .chat-window,
:root[data-theme="dark"] .chat-active-state,
:root[data-theme="dark"] .chat-header,
:root[data-theme="dark"] .chat-quick-templates,
:root[data-theme="dark"] .chat-input-area,
:root[data-theme="dark"] .settings-card,
:root[data-theme="dark"] .contacts-table-container,
:root[data-theme="dark"] .modal-container,
:root[data-theme="dark"] .kanban-card,
:root[data-theme="dark"] .account-menu,
:root[data-theme="dark"] .automation-empty-state,
:root[data-theme="dark"] .automation-card,
:root[data-theme="dark"] .automation-editor,
:root[data-theme="dark"] .automation-step,
:root[data-theme="dark"] .automation-flow-empty,
:root[data-theme="dark"] .assistant-manager,
:root[data-theme="dark"] .assistant-test-outbound,
:root[data-theme="dark"] .campaign-tracking-empty {
    background: var(--bg-card);
    border-color: var(--border-color);
}
:root[data-theme="dark"] .tenant-profile-card,
:root[data-theme="dark"] .topbar-search-box input,
:root[data-theme="dark"] .topbar-icon-btn,
:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] .form-select,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] .chat-list-search input,
:root[data-theme="dark"] .chat-text-field,
:root[data-theme="dark"] .btn-template,
:root[data-theme="dark"] .chat-attachment-button,
:root[data-theme="dark"] .chat-attachment-menu,
:root[data-theme="dark"] .chat-emoji-menu,
:root[data-theme="dark"] .kanban-column,
:root[data-theme="dark"] .btn-column-add,
:root[data-theme="dark"] .automation-settings,
:root[data-theme="dark"] .automation-flow,
:root[data-theme="dark"] .assistant-list-panel,
:root[data-theme="dark"] .assistant-test-card,
:root[data-theme="dark"] .assistant-activity-form,
:root[data-theme="dark"] .input-suffix span,
:root[data-theme="dark"] .cashback-history-item {
    background: var(--bg-soft);
    border-color: var(--border-color);
}
:root[data-theme="dark"] .tenant-avatar,
:root[data-theme="dark"] .chat-header-avatar,
:root[data-theme="dark"] .chat-item-avatar {
    background: rgba(32, 201, 151, 0.14);
    color: var(--primary);
}
:root[data-theme="dark"] .tenant-select-styled option,
:root[data-theme="dark"] .form-select option {
    background: var(--bg-card);
    color: var(--text-main);
}
:root[data-theme="dark"] .topbar-search-box input:focus,
:root[data-theme="dark"] .chat-list-search input:focus,
:root[data-theme="dark"] .form-control:focus,
:root[data-theme="dark"] .form-select:focus,
:root[data-theme="dark"] textarea:focus {
    background: var(--bg-input);
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-glow);
}
:root[data-theme="dark"] .btn-secondary,
:root[data-theme="dark"] .btn-dashed,
:root[data-theme="dark"] .btn-google,
:root[data-theme="dark"] .btn-icon-subtle {
    background: var(--bg-soft);
    border-color: var(--border-color);
    color: var(--text-main);
}
:root[data-theme="dark"] .btn-secondary:hover,
:root[data-theme="dark"] .btn-dashed:hover,
:root[data-theme="dark"] .topbar-icon-btn:hover,
:root[data-theme="dark"] .account-menu button:hover,
:root[data-theme="dark"] .custom-select-button:hover,
:root[data-theme="dark"] .custom-select-option:hover,
:root[data-theme="dark"] .chat-item:hover,
:root[data-theme="dark"] .btn-template:hover,
:root[data-theme="dark"] .chat-attachment-button:hover,
:root[data-theme="dark"] .chat-attachment-menu button:hover,
:root[data-theme="dark"] .chat-emoji-menu button:hover,
:root[data-theme="dark"] .dashboard-opportunity:hover {
    background: var(--bg-card-hover);
}
:root[data-theme="dark"] .chat-item.active,
:root[data-theme="dark"] .custom-select-option.selected,
:root[data-theme="dark"] .assistant-list-item:hover,
:root[data-theme="dark"] .assistant-list-item.active {
    background: rgba(32, 201, 151, 0.12);
    border-color: rgba(32, 201, 151, 0.38);
}
:root[data-theme="dark"] .chat-messages {
    background-color: var(--whatsapp-chat-bg);
    background-image: linear-gradient(135deg, rgba(32, 201, 151, 0.025) 25%, transparent 25%, transparent 75%, rgba(32, 201, 151, 0.025) 75%);
}
:root[data-theme="dark"] .message-wrapper.received .message-bubble {
    background: #171717;
    color: var(--text-main);
    border-color: rgba(255, 255, 255, 0.08);
}
:root[data-theme="dark"] .message-wrapper.sent .message-bubble {
    background: #12382f;
    color: #f0fdf4;
    border-color: rgba(52, 211, 153, 0.18);
}
:root[data-theme="dark"] .message-time { color: #a3a3a3; }
:root[data-theme="dark"] .contacts-table th,
:root[data-theme="dark"] .contacts-table td,
:root[data-theme="dark"] .modal-header,
:root[data-theme="dark"] .modal-footer,
:root[data-theme="dark"] .settings-card-header,
:root[data-theme="dark"] .account-menu-user,
:root[data-theme="dark"] .chat-header,
:root[data-theme="dark"] .chat-quick-templates,
:root[data-theme="dark"] .chat-input-area,
:root[data-theme="dark"] .assistant-editor-head,
:root[data-theme="dark"] .assistant-tabs {
    border-color: var(--border-color);
}
:root[data-theme="dark"] .contacts-table th,
:root[data-theme="dark"] .contacts-table tbody tr:hover td {
    background: var(--bg-soft);
}
:root[data-theme="dark"] .kanban-card-title,
:root[data-theme="dark"] .kanban-card-value,
:root[data-theme="dark"] .settings-card-header h3,
:root[data-theme="dark"] .modal-header h3,
:root[data-theme="dark"] .chat-header-info h4 {
    color: var(--text-main);
}
:root[data-theme="dark"] .kanban-card-meta,
:root[data-theme="dark"] .kanban-card-date,
:root[data-theme="dark"] .contacts-header-title p,
:root[data-theme="dark"] .settings-card-body p {
    color: var(--text-muted);
}
:root[data-theme="dark"] .crm-badge,
:root[data-theme="dark"] .dashboard-panel-total,
:root[data-theme="dark"] .automation-trigger-node,
:root[data-theme="dark"] .automation-safety,
:root[data-theme="dark"] .cashback-summary {
    background: rgba(32, 201, 151, 0.12);
    border-color: rgba(32, 201, 151, 0.28);
    color: var(--primary);
}

/* Dark Mode Completo - telas legadas e conteudo dinamico */
:root[data-theme="dark"] .sidebar,
:root[data-theme="dark"] .sidebar-footer,
:root[data-theme="dark"] .breadcrumb-bar,
:root[data-theme="dark"] .crm-board-container,
:root[data-theme="dark"] .crm-toolbar,
:root[data-theme="dark"] .crm-content,
:root[data-theme="dark"] .pipelines-settings-layout,
:root[data-theme="dark"] .pipelines-list-container,
:root[data-theme="dark"] .pipeline-editor-container,
:root[data-theme="dark"] .settings-grid,
:root[data-theme="dark"] .tags-layout,
:root[data-theme="dark"] .calendar-layout,
:root[data-theme="dark"] .lead-details-sidebar,
:root[data-theme="dark"] .loyalty-layout {
    background: var(--bg-app) !important;
    color: var(--text-main);
}

:root[data-theme="dark"] .crm-toolbar,
:root[data-theme="dark"] .breadcrumb-bar,
:root[data-theme="dark"] .pipelines-list-container,
:root[data-theme="dark"] .pipeline-editor-header,
:root[data-theme="dark"] .pipelines-list-header,
:root[data-theme="dark"] .column-header,
:root[data-theme="dark"] .card-footer-row,
:root[data-theme="dark"] .stage-editor-row,
:root[data-theme="dark"] .team-member-item,
:root[data-theme="dark"] .tag-setting-item,
:root[data-theme="dark"] .campaign-group-ids,
:root[data-theme="dark"] .fc-theme-standard .fc-scrollgrid,
:root[data-theme="dark"] .fc-theme-standard td,
:root[data-theme="dark"] .fc-theme-standard th {
    border-color: var(--border-color) !important;
}

:root[data-theme="dark"] .nav-item:hover a {
    background: var(--bg-card-hover);
    color: var(--text-main);
}

:root[data-theme="dark"] .nav-item.active a {
    background: rgba(32, 201, 151, 0.22);
    border: 1px solid rgba(32, 201, 151, 0.7);
    color: var(--primary);
}

:root[data-theme="dark"] .badge-count-crm,
:root[data-theme="dark"] .badge-unread,
:root[data-theme="dark"] .column-count,
:root[data-theme="dark"] .pipeline-list-item-badge,
:root[data-theme="dark"] .stage-editor-index,
:root[data-theme="dark"] .card-owner-badge,
:root[data-theme="dark"] .member-avatar-placeholder,
:root[data-theme="dark"] .loyalty-status,
:root[data-theme="dark"] .tracking-confidence.low {
    background: var(--bg-card-hover);
    border-color: var(--border-color);
    color: var(--text-main);
}

:root[data-theme="dark"] .search-box-crm input,
:root[data-theme="dark"] .contacts-search-box input,
:root[data-theme="dark"] input,
:root[data-theme="dark"] textarea {
    background: var(--bg-input);
    border-color: var(--border-color);
    color: var(--text-main);
}

:root[data-theme="dark"] .search-box-crm input::placeholder,
:root[data-theme="dark"] .contacts-search-box input::placeholder,
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder {
    color: var(--text-muted);
}

:root[data-theme="dark"] .search-box-crm input:focus {
    background: var(--bg-input);
    border-color: var(--primary);
}

:root[data-theme="dark"] .kanban-column {
    background: #0f0f0f !important;
    border-color: var(--border-color);
}

:root[data-theme="dark"] .kanban-card,
:root[data-theme="dark"] .pipeline-list-item,
:root[data-theme="dark"] .stage-editor-row,
:root[data-theme="dark"] .team-member-item,
:root[data-theme="dark"] .tag-setting-item,
:root[data-theme="dark"] .loyalty-rule-card,
:root[data-theme="dark"] .loyalty-empty,
:root[data-theme="dark"] .campaign-group-card,
:root[data-theme="dark"] .dashboard-kpi-card,
:root[data-theme="dark"] .dashboard-panel {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    color: var(--text-main);
}

:root[data-theme="dark"] .pipeline-list-item:hover,
:root[data-theme="dark"] .tag-setting-item:hover,
:root[data-theme="dark"] .kanban-card:hover {
    background: var(--bg-card-hover) !important;
    border-color: rgba(32, 201, 151, 0.35) !important;
}

:root[data-theme="dark"] .pipeline-list-item.active {
    background: rgba(32, 201, 151, 0.14) !important;
    border-color: var(--primary) !important;
    color: var(--primary);
}

:root[data-theme="dark"] .column-title-row h3,
:root[data-theme="dark"] .column-sum,
:root[data-theme="dark"] .card-lead-name,
:root[data-theme="dark"] .card-middle-row,
:root[data-theme="dark"] .card-value,
:root[data-theme="dark"] .pipeline-list-item span,
:root[data-theme="dark"] .stages-header h4,
:root[data-theme="dark"] .member-details-text span,
:root[data-theme="dark"] .tag-setting-info strong,
:root[data-theme="dark"] .dashboard-kpi-main strong,
:root[data-theme="dark"] .campaign-group-header h3,
:root[data-theme="dark"] .campaign-group-meta strong,
:root[data-theme="dark"] .campaign-group-stats strong {
    color: var(--text-main) !important;
}

:root[data-theme="dark"] .card-lead-meta,
:root[data-theme="dark"] .card-middle-row,
:root[data-theme="dark"] .stage-drag-handle,
:root[data-theme="dark"] .stages-header p,
:root[data-theme="dark"] .member-details-text small,
:root[data-theme="dark"] .campaign-group-header p,
:root[data-theme="dark"] .campaign-group-meta span,
:root[data-theme="dark"] .campaign-group-stats span,
:root[data-theme="dark"] .campaign-group-ids span {
    color: var(--text-muted) !important;
}

:root[data-theme="dark"] .lead-details-sidebar {
    border-left-color: var(--border-color);
}

:root[data-theme="dark"] .lead-details-sidebar input,
:root[data-theme="dark"] .lead-details-sidebar textarea,
:root[data-theme="dark"] .lead-details-sidebar .custom-select-button {
    background: #111 !important;
    border-color: #323232 !important;
    color: var(--text-main) !important;
}

:root[data-theme="dark"] .lead-details-sidebar h3,
:root[data-theme="dark"] .lead-details-sidebar strong,
:root[data-theme="dark"] .lead-details-sidebar label,
:root[data-theme="dark"] .lead-details-sidebar span,
:root[data-theme="dark"] .lead-details-sidebar p {
    color: var(--text-main);
}

:root[data-theme="dark"] .lead-details-sidebar small,
:root[data-theme="dark"] .lead-details-sidebar .text-muted {
    color: var(--text-muted) !important;
}

:root[data-theme="dark"] .calendar-container,
:root[data-theme="dark"] .fc,
:root[data-theme="dark"] .fc .fc-scrollgrid,
:root[data-theme="dark"] .fc .fc-daygrid-day,
:root[data-theme="dark"] .fc .fc-timegrid-slot,
:root[data-theme="dark"] .fc .fc-list,
:root[data-theme="dark"] .fc .fc-list-table td {
    background: var(--bg-card) !important;
    color: var(--text-main) !important;
}

:root[data-theme="dark"] .fc .fc-col-header-cell,
:root[data-theme="dark"] .fc .fc-scrollgrid-section-header th,
:root[data-theme="dark"] .fc .fc-list-day-cushion {
    background: var(--bg-soft) !important;
}

:root[data-theme="dark"] .fc .fc-day-other .fc-daygrid-day-number,
:root[data-theme="dark"] .fc-col-header-cell-cushion {
    color: var(--text-muted) !important;
}

:root[data-theme="dark"] .fc .fc-day-today {
    background: rgba(32, 201, 151, 0.08) !important;
}

:root[data-theme="dark"] .api-connection-card,
:root[data-theme="dark"] .integration-card,
:root[data-theme="dark"] .connection-card,
:root[data-theme="dark"] [class*="api-card"],
:root[data-theme="dark"] [class*="integration-card"],
:root[data-theme="dark"] [class*="connection-card"] {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
}

:root[data-theme="dark"] .api-connection-card *,
:root[data-theme="dark"] .integration-card *,
:root[data-theme="dark"] .connection-card *,
:root[data-theme="dark"] [class*="api-card"] *,
:root[data-theme="dark"] [class*="integration-card"] *,
:root[data-theme="dark"] [class*="connection-card"] * {
    color: inherit;
}

:root[data-theme="dark"] .connection-meta,
:root[data-theme="dark"] .integration-meta,
:root[data-theme="dark"] .api-meta,
:root[data-theme="dark"] [class*="connection-meta"],
:root[data-theme="dark"] [class*="integration-meta"] {
    background: var(--bg-soft) !important;
    border-color: var(--border-color) !important;
}

:root[data-theme="dark"] .campaign-group-card {
    background: var(--bg-card) !important;
}

:root[data-theme="dark"] .campaign-group-stats,
:root[data-theme="dark"] .dashboard-panel-total,
:root[data-theme="dark"] .tracking-source-pill,
:root[data-theme="dark"] .cashback-summary {
    background: rgba(32, 201, 151, 0.12) !important;
    border-color: rgba(32, 201, 151, 0.28) !important;
}

:root[data-theme="dark"] .dashboard-source-track,
:root[data-theme="dark"] .dashboard-funnel-track {
    background: var(--bg-card-hover);
}

:root[data-theme="dark"] .contacts-table tbody tr,
:root[data-theme="dark"] .contacts-table td,
:root[data-theme="dark"] .contacts-table th {
    background: var(--bg-card);
    color: var(--text-main);
}

:root[data-theme="dark"] .btn-column-add,
:root[data-theme="dark"] .qrcode-wrapper {
    background: var(--bg-card);
    border-color: var(--border-color);
}

:root[data-theme="dark"] .qrcode-loading {
    background: rgba(5, 5, 5, 0.92);
}

/* Dark Mode Completo - componentes especificos das abas administrativas */
:root[data-theme="dark"] .instances-layout,
:root[data-theme="dark"] .instances-grid,
:root[data-theme="dark"] .tags-grid,
:root[data-theme="dark"] .pipelines-list,
:root[data-theme="dark"] .pipeline-editor-content,
:root[data-theme="dark"] .team-list {
    background: transparent !important;
}

:root[data-theme="dark"] .instance-card,
:root[data-theme="dark"] .instance-card-header,
:root[data-theme="dark"] .instance-card-body,
:root[data-theme="dark"] .instance-card-footer,
:root[data-theme="dark"] .instance-details,
:root[data-theme="dark"] .tag-setting-item,
:root[data-theme="dark"] .team-member-item,
:root[data-theme="dark"] .pipeline-list-item,
:root[data-theme="dark"] .stage-editor-row {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
}

:root[data-theme="dark"] .instance-card-footer,
:root[data-theme="dark"] .instance-details,
:root[data-theme="dark"] .team-member-item,
:root[data-theme="dark"] .tag-setting-item,
:root[data-theme="dark"] .pipeline-list-item:not(.active),
:root[data-theme="dark"] .stage-editor-row {
    background: var(--bg-soft) !important;
}

:root[data-theme="dark"] .instance-brand h3,
:root[data-theme="dark"] .tag-setting-name,
:root[data-theme="dark"] .member-details-text span,
:root[data-theme="dark"] .stage-editor-row input,
:root[data-theme="dark"] .detail-row strong,
:root[data-theme="dark"] .detail-row code {
    color: var(--text-main) !important;
}

:root[data-theme="dark"] .instance-channel,
:root[data-theme="dark"] .instance-card-body p,
:root[data-theme="dark"] .detail-row span,
:root[data-theme="dark"] .member-details-text small,
:root[data-theme="dark"] .stage-drag-handle {
    color: var(--text-muted) !important;
}

:root[data-theme="dark"] .detail-row code,
:root[data-theme="dark"] .stage-editor-index,
:root[data-theme="dark"] .member-avatar-placeholder {
    background: var(--bg-card-hover) !important;
    border-color: var(--border-color) !important;
}

:root[data-theme="dark"] .status-badge.status-connected {
    background: rgba(32, 201, 151, 0.14);
    color: var(--primary);
}

:root[data-theme="dark"] .status-badge.status-disconnected {
    background: rgba(239, 68, 68, 0.14);
    color: #f87171;
}

:root[data-theme="dark"] .status-badge.status-connecting {
    background: rgba(245, 158, 11, 0.16);
    color: #fbbf24;
}

:root[data-theme="dark"] .btn-danger-outline {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(248, 113, 113, 0.45);
    color: #f87171;
}

:root[data-theme="dark"] .crm-header-controls {
    background: var(--bg-app) !important;
    border-bottom-color: var(--border-color) !important;
}

:root[data-theme="dark"] .crm-header-left label,
:root[data-theme="dark"] .pipeline-selector-wrapper label {
    color: var(--text-muted) !important;
}

:root[data-theme="dark"] .lead-details-sidebar {
    background: var(--bg-card) !important;
    color: var(--text-main) !important;
}

:root[data-theme="dark"] .lead-details-sidebar .sidebar-content,
:root[data-theme="dark"] .lead-details-sidebar .sidebar-section,
:root[data-theme="dark"] .lead-details-sidebar .sidebar-section-header {
    background: transparent !important;
}

:root[data-theme="dark"] .lead-details-sidebar hr,
:root[data-theme="dark"] .lead-details-sidebar .divider {
    border-color: var(--border-color) !important;
}

:root[data-theme="dark"] .lead-details-sidebar label i,
:root[data-theme="dark"] .lead-details-sidebar .btn-toggle-sidebar-details {
    color: var(--text-muted) !important;
}

:root[data-theme="dark"] .tab-pane .form-control,
:root[data-theme="dark"] .tab-pane input,
:root[data-theme="dark"] .tab-pane textarea,
:root[data-theme="dark"] .tab-pane .custom-select-button {
    background: var(--bg-input) !important;
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
}

:root[data-theme="dark"] .tab-pane .form-control:focus,
:root[data-theme="dark"] .tab-pane input:focus,
:root[data-theme="dark"] .tab-pane textarea:focus {
    border-color: var(--primary) !important;
}

:root[data-theme="dark"] .tab-pane [style*="background-color: rgb(248, 250, 252)"],
:root[data-theme="dark"] .tab-pane [style*="background-color: #f8fafc"],
:root[data-theme="dark"] .tab-pane [style*="background: #f8fafc"] {
    background: var(--bg-soft) !important;
}

:root[data-theme="dark"] .tab-pane [style*="background-color: rgb(255, 255, 255)"],
:root[data-theme="dark"] .tab-pane [style*="background-color: #ffffff"],
:root[data-theme="dark"] .tab-pane [style*="background: #ffffff"] {
    background: var(--bg-card) !important;
}

:root[data-theme="dark"] .tab-pane [style*="color: rgb(17, 24, 39)"],
:root[data-theme="dark"] .tab-pane [style*="color: #111827"] {
    color: var(--text-main) !important;
}

:root[data-theme="dark"] .tab-pane [style*="color: rgb(75, 85, 99)"],
:root[data-theme="dark"] .tab-pane [style*="color: #4b5563"] {
    color: var(--text-muted) !important;
}

/* Dark Mode Completo - cobertura final de superficies reutilizadas */
:root[data-theme="dark"] .content-header,
:root[data-theme="dark"] .page-header,
:root[data-theme="dark"] .section-header,
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .empty-state,
:root[data-theme="dark"] .table-container,
:root[data-theme="dark"] .details-panel,
:root[data-theme="dark"] .settings-panel,
:root[data-theme="dark"] .form-panel,
:root[data-theme="dark"] .list-panel,
:root[data-theme="dark"] .editor-panel,
:root[data-theme="dark"] .assistant-editor-panel,
:root[data-theme="dark"] .pipeline-editor-empty,
:root[data-theme="dark"] .calendar-container,
:root[data-theme="dark"] .calendar-card,
:root[data-theme="dark"] .campaign-tracking-panel,
:root[data-theme="dark"] .campaign-tracking-empty,
:root[data-theme="dark"] .automation-empty-state,
:root[data-theme="dark"] .automation-card,
:root[data-theme="dark"] .automation-editor,
:root[data-theme="dark"] .automation-flow-empty,
:root[data-theme="dark"] .automation-step,
:root[data-theme="dark"] .assistant-manager,
:root[data-theme="dark"] .assistant-test-card,
:root[data-theme="dark"] .assistant-test-outbound,
:root[data-theme="dark"] .assistant-empty-rules,
:root[data-theme="dark"] .assistant-rule,
:root[data-theme="dark"] .assistant-activity-form,
:root[data-theme="dark"] .contact-card,
:root[data-theme="dark"] .loyalty-rule-card,
:root[data-theme="dark"] .loyalty-empty,
:root[data-theme="dark"] .cashback-history-item {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
}

:root[data-theme="dark"] .page-body,
:root[data-theme="dark"] .content-body,
:root[data-theme="dark"] .section-body,
:root[data-theme="dark"] .card-body,
:root[data-theme="dark"] .panel-body,
:root[data-theme="dark"] .settings-body,
:root[data-theme="dark"] .list-body,
:root[data-theme="dark"] .editor-body,
:root[data-theme="dark"] .automation-settings,
:root[data-theme="dark"] .automation-flow,
:root[data-theme="dark"] .assistant-list-panel,
:root[data-theme="dark"] .assistant-editor-body,
:root[data-theme="dark"] .assistant-activity-form,
:root[data-theme="dark"] .input-suffix span,
:root[data-theme="dark"] .campaign-group-stats {
    background: var(--bg-soft) !important;
    border-color: var(--border-color) !important;
}

:root[data-theme="dark"] .tab-pane h1,
:root[data-theme="dark"] .tab-pane h2,
:root[data-theme="dark"] .tab-pane h3,
:root[data-theme="dark"] .tab-pane h4,
:root[data-theme="dark"] .tab-pane strong,
:root[data-theme="dark"] .tab-pane label,
:root[data-theme="dark"] .tab-pane legend,
:root[data-theme="dark"] .tab-pane .title,
:root[data-theme="dark"] .tab-pane .name,
:root[data-theme="dark"] .tab-pane .label,
:root[data-theme="dark"] .tab-pane .value {
    color: var(--text-main) !important;
}

:root[data-theme="dark"] .tab-pane p,
:root[data-theme="dark"] .tab-pane small,
:root[data-theme="dark"] .tab-pane .subtitle,
:root[data-theme="dark"] .tab-pane .description,
:root[data-theme="dark"] .tab-pane .help-text,
:root[data-theme="dark"] .tab-pane .form-help,
:root[data-theme="dark"] .tab-pane .text-muted {
    color: var(--text-muted);
}

:root[data-theme="dark"] table,
:root[data-theme="dark"] thead,
:root[data-theme="dark"] tbody,
:root[data-theme="dark"] tr,
:root[data-theme="dark"] td,
:root[data-theme="dark"] th {
    border-color: var(--border-color) !important;
}

:root[data-theme="dark"] th,
:root[data-theme="dark"] .table-header,
:root[data-theme="dark"] .fc .fc-col-header-cell,
:root[data-theme="dark"] .fc .fc-scrollgrid-section-header th {
    background: var(--bg-soft) !important;
    color: var(--text-main) !important;
}