/**
 * MD FLOW CRM - System Design
 * Design System Profissional com Animações Suaves
 * UX/UI Senior - Mobile First
 */

/* ================================================================
   RAÍZES - VARIÁVEIS DE DESIGN
   ================================================================ */

:root {
    /* Paleta - Dark Mode */
    --crm-bg-primary: #0d1117;
    --crm-bg-secondary: #131a22;
    --crm-bg-tertiary: #16202a;
    --crm-card-bg: rgba(22, 32, 42, 0.6);
    --crm-border: rgba(48, 60, 75, 0.4);
    --crm-text-primary: #f3f6fb;
    --crm-text-secondary: #b1bcc7;
    --crm-text-tertiary: #8b959e;
    --crm-text-muted: #6e7681;
    
    /* Cores Semânticas */
    --crm-green: #25d366;
    --crm-green-hover: #1faa52;
    --crm-green-light: rgba(37, 211, 102, 0.1);
    --crm-blue: #3b82f6;
    --crm-blue-hover: #2563eb;
    --crm-amber: #f59e0b;
    --crm-amber-hover: #d97706;
    --crm-red: #ef4444;
    --crm-red-hover: #dc2626;
    --crm-gray: #6e7681;
    
    /* Sombras */
    --crm-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
    --crm-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
    --crm-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.2);
    --crm-shadow-xl: 0 20px 48px rgba(0, 0, 0, 0.25);
    
    /* Tipografia */
    --crm-font-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
    --crm-font-mono: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', monospace;
    
    /* Espaçamento */
    --crm-spacing-xs: 4px;
    --crm-spacing-sm: 8px;
    --crm-spacing-md: 12px;
    --crm-spacing-lg: 16px;
    --crm-spacing-xl: 20px;
    --crm-spacing-2xl: 24px;
    --crm-spacing-3xl: 32px;
    
    /* Border Radius */
    --crm-radius-sm: 6px;
    --crm-radius-md: 10px;
    --crm-radius-lg: 14px;
    --crm-radius-xl: 20px;
    
    /* Z-Index */
    --crm-z-dropdown: 100;
    --crm-z-sticky: 200;
    --crm-z-fixed: 300;
    --crm-z-modal: 400;
    --crm-z-tooltip: 500;
}

/* Light Mode */
body.crm-admin[data-theme="light"] {
    --crm-bg-primary: #f8f9fa;
    --crm-bg-secondary: #ffffff;
    --crm-bg-tertiary: #f3f4f6;
    --crm-card-bg: rgba(255, 255, 255, 0.95);
    --crm-border: rgba(0, 0, 0, 0.08);
    --crm-text-primary: #0d1117;
    --crm-text-secondary: #424f5c;
    --crm-text-tertiary: #656d76;
    --crm-text-muted: #8b949e;
    --crm-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
    --crm-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --crm-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.1);
    --crm-shadow-xl: 0 20px 48px rgba(0, 0, 0, 0.12);
}

/* ================================================================
   ANIMAÇÕES E TRANSIÇÕES
   ================================================================ */

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

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

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

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

@keyframes shimmer {
    0% { background-position: -1000px 0; }
    100% { background-position: 1000px 0; }
}

@keyframes crmButtonSheen {
    0%, 78%, 100% {
        transform: translateX(-140%);
        opacity: 0;
    }
    82% {
        opacity: .12;
    }
    92% {
        transform: translateX(140%);
        opacity: .18;
    }
}

/* ================================================================
   ESTILOS BASE
   ================================================================ */

html {
    scroll-behavior: smooth;
}

body.crm-admin {
    margin: 0;
    padding: 0;
    font-family: var(--crm-font-primary) !important;
    background: linear-gradient(135deg, rgba(37, 211, 102, 0.03), transparent 40%), 
                var(--crm-bg-primary) !important;
    color: var(--crm-text-primary) !important;
    line-height: 1.5;
    transition: background-color 0.3s ease, color 0.3s ease !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    
    animation: fadeIn 0.5s ease-out !important;
}

body.crm-admin * {
    box-sizing: border-box !important;
}

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

body.crm-admin h1, body.crm-admin h2, body.crm-admin h3, 
body.crm-admin h4, body.crm-admin h5, body.crm-admin h6 {
    font-weight: 700 !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    color: var(--crm-text-primary) !important;
}

body.crm-admin h1 { font-size: 1.75rem !important; }
body.crm-admin h2 { font-size: 1.35rem !important; }
body.crm-admin h3 { font-size: 1.15rem !important; }
body.crm-admin h4 { font-size: 1rem !important; }

body.crm-admin p {
    margin: 0 !important;
    color: var(--crm-text-secondary) !important;
}

body.crm-admin a {
    color: var(--crm-blue) !important;
    text-decoration: none !important;
    transition: color 0.18s ease !important;
}

body.crm-admin a:hover {
    color: var(--crm-blue-hover) !important;
    text-decoration: underline !important;
}

body.crm-admin strong {
    font-weight: 700 !important;
    color: var(--crm-text-primary) !important;
}

body.crm-admin small {
    font-size: 0.8rem !important;
    color: var(--crm-text-muted) !important;
}

/* ================================================================
   CONTAINERS
   ================================================================ */

body.crm-admin .container {
    width: 100% !important;
    max-width: 1420px !important;
    margin: 0 auto !important;
    padding: 0 var(--crm-spacing-lg) !important;
}

body.crm-admin .page-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body.crm-admin .page-content {
    flex: 1;
    padding: var(--crm-spacing-xl) var(--crm-spacing-lg) !important;
    animation: fadeInUp 0.4s ease-out;
}

/* ================================================================
   APPBAR - CABEÇALHO PRINCIPAL
   ================================================================ */

body.crm-admin .crm-appbar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: var(--crm-spacing-lg) !important;
    padding: var(--crm-spacing-lg) !important;
    margin: var(--crm-spacing-xl) auto !important;
    width: 100% !important;
    max-width: 1420px !important;
    border: 1px solid var(--crm-border) !important;
    border-radius: var(--crm-radius-lg) !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)) !important;
    box-shadow: var(--crm-shadow-md) !important;
    animation: slideInDown 0.4s ease-out !important;
}

body.crm-admin .crm-appbar__brand {
    display: flex !important;
    align-items: center !important;
    gap: var(--crm-spacing-lg) !important;
    flex: 1 !important;
    min-width: 0 !important;
}

body.crm-admin .crm-appbar__logo {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 60px !important;
    height: 60px !important;
    padding: 10px !important;
    border-radius: var(--crm-radius-md) !important;
    background: linear-gradient(135deg, #111827, #1f2937) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06) !important;
    flex-shrink: 0 !important;
}

body.crm-admin .crm-appbar__logo img {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
}

body.crm-admin .crm-appbar__meta {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--crm-spacing-sm) !important;
    min-width: 0 !important;
}

body.crm-admin .crm-appbar__eyebrow {
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: var(--crm-green) !important;
}

body.crm-admin .crm-appbar__title-row {
    display: flex !important;
    align-items: center !important;
    gap: var(--crm-spacing-md) !important;
    flex-wrap: wrap !important;
}

body.crm-admin .crm-appbar__title-row h1 {
    margin: 0 !important;
    font-size: clamp(1.2rem, 2vw, 1.6rem) !important;
    line-height: 1.1 !important;
}

body.crm-admin .crm-appbar__version {
    padding: 4px 10px !important;
    border-radius: 999px !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    color: var(--crm-green) !important;
    background: var(--crm-green-light) !important;
    border: 1px solid rgba(37, 211, 102, 0.25) !important;
    white-space: nowrap !important;
}

body.crm-admin .crm-appbar__subtitle {
    font-size: 0.8rem !important;
    color: var(--crm-text-muted) !important;
}

body.crm-admin .crm-page-subtitle {
    font-size: 0.9rem !important;
    color: var(--crm-text-secondary) !important;
    margin-top: 4px !important;
}

body.crm-admin .crm-appbar__actions {
    display: flex !important;
    align-items: center !important;
    gap: var(--crm-spacing-md) !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
}

body.crm-admin .crm-appbar__user {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 2px !important;
    padding: var(--crm-spacing-sm) var(--crm-spacing-md) !important;
    border-radius: var(--crm-radius-md) !important;
    border: 1px solid var(--crm-border) !important;
    background: rgba(255, 255, 255, 0.04) !important;
}

body.crm-admin .crm-appbar__user strong {
    font-size: 0.9rem !important;
}

body.crm-admin .crm-appbar__user span {
    font-size: 0.75rem !important;
    color: var(--crm-text-muted) !important;
}

body.crm-admin .crm-theme-toggle {
    min-width: 90px !important;
    padding: 8px 12px !important;
    border-radius: var(--crm-radius-md) !important;
    border: 1px solid var(--crm-border) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    color: var(--crm-text-primary) !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.18s ease !important;
}

body.crm-admin .crm-theme-toggle:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: var(--crm-green) !important;
}

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

body.crm-admin .card,
body.crm-admin .stat-card,
body.crm-admin .filters-section,
body.crm-admin .table-section {
    background: var(--crm-card-bg) !important;
    border: 1px solid var(--crm-border) !important;
    border-radius: var(--crm-radius-lg) !important;
    box-shadow: var(--crm-shadow-sm) !important;
    backdrop-filter: blur(10px) !important;
    color: var(--crm-text-primary) !important;
    transition: all 0.18s ease !important;
    animation: fadeInUp 0.4s ease-out !important;
}

body.crm-admin .card:hover,
body.crm-admin .stat-card:hover {
    border-color: rgba(37, 211, 102, 0.2) !important;
    box-shadow: var(--crm-shadow-md) !important;
}

body.crm-admin .card {
    padding: var(--crm-spacing-xl) !important;
}

body.crm-admin .stat-card {
    padding: var(--crm-spacing-lg) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

/* ================================================================
   BOTÕES - SISTEMA COMPLETO
   ================================================================ */

body.crm-admin .btn,
body.crm-admin .btn-small,
body.crm-admin button {
    font-family: var(--crm-font-primary) !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    padding: 10px 14px !important;
    border: 1px solid transparent !important;
    border-radius: var(--crm-radius-md) !important;
    cursor: pointer !important;
    transition: all 0.18s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
    user-select: none !important;
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12) !important;
}

body.crm-admin .btn::before,
body.crm-admin .btn-small::before,
body.crm-admin button::before,
body.crm-admin .crm-appbar__actions a::before,
body.crm-admin .crm-appbar__actions button::before,
body.crm-admin .header-link::before,
body.crm-admin .btn-logout::before {
    font-family: 'Material Symbols Rounded' !important;
    font-weight: 500 !important;
    font-style: normal !important;
    font-size: 18px !important;
    line-height: 1 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    white-space: nowrap !important;
    word-wrap: normal !important;
    direction: ltr !important;
    -webkit-font-smoothing: antialiased !important;
    font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 1.15em !important;
    min-width: 1.15em !important;
    color: currentColor !important;
    opacity: .96 !important;
    position: relative !important;
    z-index: 1 !important;
}

body.crm-admin .btn::after,
body.crm-admin .btn-small::after,
body.crm-admin button::after {
    content: '' !important;
    position: absolute !important;
    inset: -30% !important;
    background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.02) 45%, rgba(255, 255, 255, 0.18) 50%, rgba(255, 255, 255, 0.02) 55%, transparent 62%) !important;
    transform: translateX(-140%) !important;
    animation: crmButtonSheen 9s ease-in-out infinite !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

body.crm-admin .btn:hover::after,
body.crm-admin .btn-small:hover::after,
body.crm-admin button:hover::after,
body.crm-admin .crm-appbar__actions a:hover::after,
body.crm-admin .header-link:hover::after,
body.crm-admin .btn-logout:hover::after {
    animation: crmButtonSheen 1.15s ease-out 1 !important;
    opacity: .32 !important;
}

body.crm-admin .btn-small {
    font-size: 0.8rem !important;
    padding: 7px 11px !important;
}

body.crm-admin a.btn[href*="dashboard.php"]::before,
body.crm-admin .header-link[href*="dashboard.php"]::before {
    content: "space_dashboard" !important;
}

body.crm-admin a.btn[href*="comissoes.php"]::before,
body.crm-admin .header-link[href*="comissoes.php"]::before {
    content: "paid" !important;
}

body.crm-admin a.btn[href*="fechamentos.php"]::before,
body.crm-admin .header-link[href*="fechamentos.php"]::before {
    content: "trending_up" !important;
}

body.crm-admin a.btn[href*="usuarios.php"]::before,
body.crm-admin .header-link[href*="usuarios.php"]::before {
    content: "group" !important;
}

body.crm-admin a.btn[href*="perfil.php"]::before,
body.crm-admin .header-link[href*="perfil.php"]::before {
    content: "person" !important;
}

body.crm-admin a.btn[href*="google-ads.php"]::before,
body.crm-admin .header-link[href*="google-ads.php"]::before {
    content: "query_stats" !important;
}

body.crm-admin a.btn[href*="analytics.php"]::before,
body.crm-admin .header-link[href*="analytics.php"]::before {
    content: "query_stats" !important;
}

body.crm-admin a.btn[href*="lead-create.php"]::before,
body.crm-admin .header-link[href*="lead-create.php"]::before {
    content: "person_add" !important;
}

body.crm-admin a.btn[href*="aprenda.php"]::before,
body.crm-admin .header-link[href*="aprenda.php"]::before {
    content: "school" !important;
}

body.crm-admin a.btn[href*="lead-view.php"]::before {
    content: "visibility" !important;
}

body.crm-admin a.btn[href*="lead-edit.php"]::before {
    content: "edit" !important;
}

body.crm-admin a.btn[href*="reset-password.php"]::before {
    content: "lock_reset" !important;
}

body.crm-admin a.btn[href*="google-ads-export.php"]::before,
body.crm-admin a.btn[href*="export-leads.php"]::before,
body.crm-admin a.btn[href*="download"]::before,
body.crm-admin a.btn[href*="export"]::before,
body.crm-admin a.btn[href*="preview"]::before {
    content: "download" !important;
}

body.crm-admin a.btn[href*="google-ads-feed-preview.php"]::before {
    content: "table_view" !important;
}

body.crm-admin a.btn[href^="mailto:"]::before {
    content: "mail" !important;
}

body.crm-admin a.btn[href*="wa.me"]::before,
body.crm-admin a.btn[href*="api.whatsapp.com"]::before {
    content: "chat" !important;
}

body.crm-admin .btn-logout::before,
body.crm-admin a.btn[href*="logout.php"]::before {
    content: "logout" !important;
}

body.crm-admin .btn-warning::before,
body.crm-admin .btn.btn-warning::before,
body.crm-admin button.btn-warning::before {
    content: "history" !important;
}

body.crm-admin .btn-danger::before,
body.crm-admin .btn.btn-danger::before,
body.crm-admin button.btn-danger::before,
body.crm-admin .btn-small.is-danger::before {
    content: "delete" !important;
}

body.crm-admin .btn-small.is-primary::before {
    content: "check_circle" !important;
}

body.crm-admin .btn-small.is-warning::before {
    content: "undo" !important;
}

body.crm-admin .btn-small.is-neutral::before {
    content: "restart_alt" !important;
}

body.crm-admin .filter-actions .btn-primary::before {
    content: "filter_alt" !important;
}

body.crm-admin .filter-actions a[href*="dashboard.php"]::before,
body.crm-admin .filter-actions a[href*="analytics.php"]::before,
body.crm-admin .filter-actions a[href*="google-ads.php"]::before {
    content: "filter_alt_off" !important;
}

body.crm-admin .btn-action--view::before {
    content: "visibility" !important;
}

body.crm-admin .btn-action--edit::before {
    content: "edit" !important;
}

body.crm-admin .btn-action--whatsapp::before {
    content: "chat" !important;
}

body.crm-admin .quick-save::before {
    content: "save" !important;
}

body.crm-admin [data-learning-prev]::before,
body.crm-admin [data-learning-prev-mobile]::before {
    content: "chevron_left" !important;
}

body.crm-admin [data-learning-next]::before,
body.crm-admin [data-learning-next-mobile]::before {
    content: "chevron_right" !important;
}

body.crm-admin .btn:hover,
body.crm-admin .btn-small:hover,
body.crm-admin button:hover {
    transform: translateY(-2px) !important;
    box-shadow:
        var(--crm-shadow-md),
        0 0 0 1px rgba(255, 255, 255, 0.03),
        0 0 18px rgba(37, 211, 102, 0.12) !important;
    filter: brightness(1.03) saturate(1.02) !important;
}

body.crm-admin .btn:active,
body.crm-admin .btn-small:active,
body.crm-admin button:active {
    transform: translateY(0) !important;
}

/* Primário - Verde */
body.crm-admin .btn-primary,
body.crm-admin .btn.btn-primary,
body.crm-admin button.btn-primary,
body.crm-admin .login-button {
    background: linear-gradient(135deg, #4ae38f 0%, #2fcf75 56%, #1faf61 100%) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 12px 28px rgba(37, 211, 102, 0.22) !important;
}

body.crm-admin .btn-primary:hover,
body.crm-admin button.btn-primary:hover {
    box-shadow:
        0 16px 34px rgba(37, 211, 102, 0.28),
        0 0 22px rgba(74, 227, 143, 0.18) !important;
}

/* Secundário */
body.crm-admin .btn-secondary,
body.crm-admin .btn.btn-secondary {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.05)) !important;
    color: var(--crm-text-primary) !important;
    border: 1px solid var(--crm-border) !important;
}

body.crm-admin .btn-secondary:hover {
    background: linear-gradient(180deg, rgba(37, 211, 102, 0.12), rgba(37, 211, 102, 0.06)) !important;
    border-color: rgba(37, 211, 102, 0.34) !important;
}

body.crm-admin .filter-actions .btn,
body.crm-admin .filter-actions a.btn {
    min-width: 148px !important;
}

body.crm-admin .filter-actions .btn-primary,
body.crm-admin .filter-actions .btn.btn-primary {
    background: linear-gradient(135deg, #58e79d 0%, #33d67b 54%, #1fb564 100%) !important;
    box-shadow: 0 14px 28px rgba(37, 211, 102, 0.2) !important;
}

body.crm-admin .filter-actions .btn-primary:hover,
body.crm-admin .filter-actions .btn.btn-primary:hover {
    box-shadow:
        0 18px 36px rgba(37, 211, 102, 0.26),
        0 0 24px rgba(88, 231, 157, 0.18) !important;
}

/* Variações com !important para pequenos botões */
body.crm-admin .btn-small.is-primary {
    background: var(--crm-green) !important;
    color: #ffffff !important;
    border: none !important;
}

body.crm-admin .btn-small.is-primary:hover {
    background: var(--crm-green-hover) !important;
}

body.crm-admin .btn-small.is-warning {
    background: rgba(245, 158, 11, 0.15) !important;
    color: var(--crm-amber) !important;
    border: 1px solid var(--crm-amber) !important;
}

body.crm-admin .btn-small.is-warning:hover {
    background: var(--crm-amber) !important;
    color: #ffffff !important;
}

body.crm-admin .btn-small.is-danger {
    background: rgba(239, 68, 68, 0.15) !important;
    color: var(--crm-red) !important;
    border: 1px solid var(--crm-red) !important;
}

body.crm-admin .btn-small.is-danger:hover {
    background: var(--crm-red) !important;
    color: #ffffff !important;
}

body.crm-admin .btn-small.is-neutral {
    background: rgba(59, 130, 246, 0.15) !important;
    color: var(--crm-blue) !important;
    border: 1px solid var(--crm-blue) !important;
}

body.crm-admin .btn-small.is-neutral:hover {
    background: var(--crm-blue) !important;
    color: #ffffff !important;
}

/* ================================================================
   FORMULÁRIOS
   ================================================================ */

body.crm-admin input,
body.crm-admin select,
body.crm-admin textarea,
body.crm-admin [type="text"],
body.crm-admin [type="email"],
body.crm-admin [type="tel"],
body.crm-admin [type="date"],
body.crm-admin [type="number"],
body.crm-admin [type="password"],
body.crm-admin [type="search"] {
    width: 100% !important;
    padding: 10px 12px !important;
    font-family: var(--crm-font-primary) !important;
    font-size: 0.9rem !important;
    border: 1px solid var(--crm-border) !important;
    border-radius: var(--crm-radius-md) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    color: var(--crm-text-primary) !important;
    transition: all 0.18s ease !important;
    outline: none !important;
}

body.crm-admin input::placeholder,
body.crm-admin textarea::placeholder {
    color: var(--crm-text-muted) !important;
}

body.crm-admin input:hover,
body.crm-admin select:hover,
body.crm-admin textarea:hover {
    border-color: rgba(37, 211, 102, 0.3) !important;
    background: rgba(255, 255, 255, 0.06) !important;
}

body.crm-admin input:focus,
body.crm-admin select:focus,
body.crm-admin textarea:focus {
    border-color: var(--crm-green) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.1) !important;
}

body.crm-admin select option {
    background: var(--crm-bg-secondary) !important;
    color: var(--crm-text-primary) !important;
}

body.crm-admin textarea {
    resize: vertical !important;
    min-height: 100px !important;
}

body.crm-admin label {
    display: block !important;
    margin-bottom: var(--crm-spacing-sm) !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: var(--crm-text-primary) !important;
}

body.crm-admin .field-help {
    margin-top: 4px !important;
    font-size: 0.75rem !important;
    color: var(--crm-text-muted) !important;
}

/* ================================================================
   TABELAS - REDESENHO PROFISSIONAL
   ================================================================ */

body.crm-admin table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    font-size: 0.85rem !important;
}

body.crm-admin thead th {
    padding: 12px 14px !important;
    font-weight: 700 !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: var(--crm-text-muted) !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid var(--crm-border) !important;
    border-bottom-width: 2px !important;
    text-align: left !important;
    user-select: none !important;
}

body.crm-admin thead th:first-child {
    border-top-left-radius: var(--crm-radius-md) !important;
}

body.crm-admin thead th:last-child {
    border-top-right-radius: var(--crm-radius-md) !important;
}

body.crm-admin tbody tr {
    transition: all 0.18s ease !important;
    border-bottom: 1px solid var(--crm-border) !important;
}

body.crm-admin tbody tr:hover {
    background: rgba(37, 211, 102, 0.05) !important;
}

body.crm-admin tbody tr:last-child td {
    border-bottom: none !important;
}

body.crm-admin tbody tr:last-child td:first-child {
    border-bottom-left-radius: var(--crm-radius-md) !important;
}

body.crm-admin tbody tr:last-child td:last-child {
    border-bottom-right-radius: var(--crm-radius-md) !important;
}

body.crm-admin td {
    padding: 14px 14px !important;
    border: none !important;
    color: var(--crm-text-secondary) !important;
    vertical-align: middle !important;
}

body.crm-admin td strong {
    color: var(--crm-text-primary) !important;
}

body.crm-admin .cell-title {
    display: block !important;
    font-weight: 600 !important;
    color: var(--crm-text-primary) !important;
    margin-bottom: 3px !important;
}

body.crm-admin .cell-sub {
    display: block !important;
    font-size: 0.8rem !important;
    color: var(--crm-text-muted) !important;
    margin-bottom: 2px !important;
}

/* ================================================================
   BADGES E PILLS
   ================================================================ */

body.crm-admin .badge,
body.crm-admin .status-badge,
body.crm-admin .chip,
body.crm-admin .preset-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 10px !important;
    border-radius: 999px !important;
    border: 1px solid var(--crm-border) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    color: var(--crm-text-secondary) !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    transition: all 0.18s ease !important;
}

body.crm-admin .chip:hover,
body.crm-admin .preset-chip:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: var(--crm-green) !important;
}

body.crm-admin .chip.is-active,
body.crm-admin .preset-chip.is-active {
    background: var(--crm-green) !important;
    border-color: var(--crm-green) !important;
    color: #ffffff !important;
}

/* Status */
body.crm-admin .crm-status {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 10px !important;
    border-radius: 999px !important;
    border: 1px solid var(--crm-border) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
}

body.crm-admin .crm-status__dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 999px !important;
    display: inline-block !important;
}

body.crm-admin .crm-status--green .crm-status__dot { background: var(--crm-green) !important; }
body.crm-admin .crm-status--yellow .crm-status__dot { background: var(--crm-amber) !important; }
body.crm-admin .crm-status--red .crm-status__dot { background: var(--crm-red) !important; }
body.crm-admin .crm-status--blue .crm-status__dot { background: var(--crm-blue) !important; }

/* ================================================================
   PAGINATION
   ================================================================ */

body.crm-admin .pagination {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--crm-spacing-md) !important;
    margin: var(--crm-spacing-xl) 0 !important;
    flex-wrap: wrap !important;
}

body.crm-admin .pagination a,
body.crm-admin .pagination span {
    padding: 8px 12px !important;
    border: 1px solid var(--crm-border) !important;
    border-radius: var(--crm-radius-md) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    color: var(--crm-text-secondary) !important;
    font-size: 0.85rem !important;
    text-decoration: none !important;
    transition: all 0.18s ease !important;
}

body.crm-admin .pagination a:hover {
    background: var(--crm-green) !important;
    border-color: var(--crm-green) !important;
    color: #ffffff !important;
}

body.crm-admin .pagination span {
    background: transparent !important;
    border: none !important;
    color: var(--crm-text-muted) !important;
}

/* ================================================================
   ESTADO VAZIO
   ================================================================ */

body.crm-admin .empty-state {
    text-align: center !important;
    padding: var(--crm-spacing-3xl) var(--crm-spacing-xl) !important;
}

body.crm-admin .empty-state-icon {
    width: 64px !important;
    height: 64px !important;
    margin: 0 auto var(--crm-spacing-xl) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border-radius: var(--crm-radius-lg) !important;
}

body.crm-admin .empty-state-title {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: var(--crm-text-primary) !important;
    margin-bottom: var(--crm-spacing-sm) !important;
}

body.crm-admin .empty-state-text {
    font-size: 0.9rem !important;
    color: var(--crm-text-muted) !important;
}

/* ================================================================
   FULLSCREEN BUTTON
   ================================================================ */

body.crm-admin .btn-fullscreen {
    position: fixed !important;
    top: var(--crm-spacing-lg) !important;
    right: var(--crm-spacing-lg) !important;
    z-index: var(--crm-z-sticky) !important;
    padding: 10px 14px !important;
    background: var(--crm-green) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: var(--crm-radius-md) !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.18s ease !important;
}

body.crm-admin .btn-fullscreen:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--crm-shadow-lg) !important;
}

body.crm-admin.fullscreen {
    overflow: hidden !important;
}

body.crm-admin.fullscreen .page-wrapper > *:not(.btn-fullscreen) {
    display: none !important;
}

body.crm-admin.fullscreen .page-content {
    display: block !important;
}

/* ================================================================
   RESPONSIVIDADE MOBILE
   ================================================================ */

@media (max-width: 768px) {
    body.crm-admin .container {
        padding: 0 var(--crm-spacing-md) !important;
    }
    
    body.crm-admin .page-content {
        padding: var(--crm-spacing-lg) var(--crm-spacing-md) !important;
    }
    
    body.crm-admin .crm-appbar {
        flex-direction: column !important;
        align-items: flex-start !important;
        margin: var(--crm-spacing-md) auto !important;
        padding: var(--crm-spacing-lg) !important;
    }
    
    body.crm-admin .crm-appbar__actions {
        width: 100% !important;
        justify-content: flex-start !important;
        gap: var(--crm-spacing-sm) !important;
    }

    body.crm-admin .crm-appbar__actions .btn,
    body.crm-admin .crm-appbar__actions button {
        flex: 1 1 calc(50% - 6px) !important;
        width: auto !important;
        min-height: 56px !important;
        padding: 14px 18px !important;
    }
    
    body.crm-admin h1 { font-size: 1.4rem !important; }
    body.crm-admin h2 { font-size: 1.15rem !important; }
    
    body.crm-admin table {
        font-size: 0.75rem !important;
    }
    
    body.crm-admin thead th,
    body.crm-admin td {
        padding: 10px 8px !important;
    }
    
    body.crm-admin .action-buttons {
        display: flex !important;
        flex-direction: column !important;
        gap: var(--crm-spacing-sm) !important;
    }
    
    body.crm-admin .action-buttons .btn-small {
        width: 100% !important;
        text-align: center !important;
    }
    
    body.crm-admin .btn,
    body.crm-admin .btn-small {
        min-height: 54px !important;
        padding: 14px 18px !important;
    }
    
    body.crm-admin .card {
        padding: var(--crm-spacing-lg) !important;
    }
    
    body.crm-admin .crm-appbar__title-row {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    
    body.crm-admin .crm-appbar__version {
        align-self: flex-start !important;
    }
}

@media (max-width: 480px) {
    body.crm-admin .container {
        padding: 0 var(--crm-spacing-sm) !important;
    }
    
    body.crm-admin .page-content {
        padding: var(--crm-spacing-md) var(--crm-spacing-sm) !important;
    }
    
    body.crm-admin h1 { font-size: 1.2rem !important; }
    body.crm-admin h2 { font-size: 1rem !important; }
    
    body.crm-admin table {
        display: block !important;
        overflow-x: auto !important;
    }
    
    body.crm-admin thead,
    body.crm-admin tbody,
    body.crm-admin tr {
        display: block !important;
    }
    
    body.crm-admin thead tr {
        display: none !important;
    }
    
    body.crm-admin td {
        display: grid !important;
        grid-template-columns: 100px 1fr !important;
        gap: var(--crm-spacing-md) !important;
        padding: var(--crm-spacing-md) !important;
        text-align: left !important;
    }
    
    body.crm-admin td::before {
        content: attr(data-label);
        font-weight: 700;
        color: var(--crm-text-muted);
        font-size: 0.75rem;
    }
}

/* ================================================================
   UTILIDADES
   ================================================================ */

body.crm-admin .text-danger {
    color: var(--crm-red) !important;
}

body.crm-admin .text-success {
    color: var(--crm-green) !important;
}

body.crm-admin .text-warning {
    color: var(--crm-amber) !important;
}

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

body.crm-admin .opacity-50 {
    opacity: 0.5 !important;
}

body.crm-admin .mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
}

body.crm-admin .mt-2 { margin-top: var(--crm-spacing-lg) !important; }
body.crm-admin .mb-2 { margin-bottom: var(--crm-spacing-lg) !important; }
body.crm-admin .mt-4 { margin-top: var(--crm-spacing-2xl) !important; }
body.crm-admin .mb-4 { margin-bottom: var(--crm-spacing-2xl) !important; }

/* ================================================================
   PRINT
   ================================================================ */

@media print {
    body.crm-admin .crm-appbar,
    body.crm-admin .filters-section,
    body.crm-admin .action-buttons,
    body.crm-admin .pagination {
        display: none !important;
    }
    
    body.crm-admin table {
        border-collapse: collapse !important;
    }
}