/* ====== Zahar.AI Premium Design System ====== */

/* 1. VARIÁVEIS E TOKENS */
:root {
    /* Paleta de Cores - Aqua Marine & Teal (User Request) */

    /* Core User Colors */
    --zahar-primary-teal: #0D4F4F;
    --zahar-accent-aqua: #14B8A6;
    --zahar-bg-light: #F0FDFA;
    --zahar-text-white: #FFFFFF;
    --zahar-border: #CCFBF1;

    /* Mapping to System Variables */
    --primary-900: var(--zahar-primary-teal);
    --primary-800: #116868;
    --primary-700: #158080;
    --primary-600: var(--zahar-accent-aqua);
    --primary-500: #2DD4BF;

    --accent-500: var(--zahar-accent-aqua);
    --accent-600: #0F766E;

    --neutral-50: var(--zahar-bg-light);
    --neutral-100: #E0F2F1;
    --neutral-200: var(--zahar-border);
    --neutral-300: #99F6E4;
    --neutral-400: #5EEAD4;
    --neutral-500: #2DD4BF;
    --neutral-600: #14B8A6;
    --neutral-700: #0F766E;
    --neutral-800: #0D4F4F;
    --neutral-900: #042F2E;

    /* Override Bootstrap Defaults */
    --bs-primary: var(--primary-600);
    --bs-primary-rgb: 20, 184, 166;
    --bs-info: var(--accent-500);
    --bs-info-rgb: 20, 184, 166;
    --bs-warning: #F59E0B;
    --bs-success: #10B981;
    --bs-danger: #EF4444;
    --bs-secondary: var(--neutral-500);
    --bs-body-bg: var(--neutral-50);

    /* Semânticas */
    --bg-app: var(--neutral-50);
    --bg-surface: #FFFFFF;
    --bg-sidebar: var(--primary-900);

    --text-main: var(--neutral-900);
    --text-secondary: var(--neutral-700);
    --text-inverse: #FFFFFF;

    --border-light: var(--neutral-200);
    --border-focus: var(--accent-500);

    --success: #10B981;
    --warning: #F59E0B;
    --danger: #EF4444;
    --info: var(--accent-500);

    /* Sombras & Efeitos */
    --shadow-sm: 0 1px 2px 0 rgba(13, 79, 79, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(13, 79, 79, 0.1), 0 2px 4px -2px rgba(13, 79, 79, 0.05);
    --shadow-lg: 0 10px 15px -3px rgba(13, 79, 79, 0.1), 0 4px 6px -4px rgba(13, 79, 79, 0.1);
    /* Glassmorphism & Effects */
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(255, 255, 255, 0.3);
    --glass-shadow: 0 8px 32px 0 rgba(13, 79, 79, 0.1);
    --backdrop-blur: blur(10px);

    /* Dimensões */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 20px;
    --header-height: 64px;
    --header-bg: linear-gradient(135deg, var(--primary-900) 0%, var(--primary-600) 100%);
}

/* 2. RESET E BASE */
* {
    box-sizing: border-box;
}

body {
    background-color: var(--bg-app);
    color: var(--text-main);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--neutral-900);
    font-weight: 600;
    margin-bottom: 0.75rem;
}

/* 3. COMPONENTES GLOBAIS */

.card-premium {
    background: var(--bg-surface);
    border: 1px solid var(--neutral-100);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: visible !important;
    /* MUDANÇA: Visible para permitir dropdowns */
}

.card-premium:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--accent-500);
}

.card-glass {
    background: var(--glass-bg);
    backdrop-filter: var(--backdrop-blur);
    -webkit-backdrop-filter: var(--backdrop-blur);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    border-radius: var(--radius-lg);
}

.card-header-premium {
    background-color: transparent;
    border-bottom: 1px solid var(--neutral-100);
    padding: 1.25rem 1.5rem;
    font-weight: 700;
    color: var(--primary-800);
    font-size: 1.1rem;
}

.btn-primary-custom,
.btn-primary {
    background: linear-gradient(135deg, var(--zahar-accent-aqua) 0%, var(--zahar-primary-teal) 100%) !important;
    border: none !important;
    color: white !important;
    padding: 0.6rem 1.2rem;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(13, 79, 79, 0.2);
}

.btn-primary-custom:hover,
.btn-primary:hover {
    background: linear-gradient(135deg, var(--zahar-primary-teal) 0%, var(--zahar-accent-aqua) 100%) !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 12px rgba(13, 79, 79, 0.3);
    color: white !important;
}

/* Animações Premium */
.pulse-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    animation: shadow-pulse 2s infinite;
}

@keyframes shadow-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
}

/* Header da Página Padronizado */
.zahar-header {
    background: var(--header-bg);
    color: white !important;
    padding: 1.25rem 1.5rem;
    border-radius: 16px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 0 4px 10px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    margin-bottom: 2rem;
}

.zahar-header-title {
    font-size: 1.6rem;
    font-weight: 800;
    margin-bottom: 0;
    letter-spacing: -0.02em;
    color: white !important;
}

.zahar-header-subtitle {
    font-size: 0.95rem;
    opacity: 0.9;
    font-weight: 400;
    color: white !important;
}

/* Sidebar Custom */
.nav-link-custom {
    color: rgba(255, 255, 255, 0.7) !important;
    padding: 0.8rem 1rem !important;
    border-radius: var(--radius-md);
    margin-bottom: 0.25rem;
    transition: all 0.2s;
}

.nav-link-custom:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: white !important;
}

.nav-link-custom.active {
    background-color: var(--accent-600) !important;
    color: white !important;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Inputs e Selects */
.form-control,
.form-select {
    border-radius: var(--radius-md) !important;
    padding: 0.6rem 1rem !important;
    border-color: var(--neutral-300) !important;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--accent-500) !important;
    box-shadow: 0 0 0 2px rgba(6, 182, 212, 0.2) !important;
}

/* Dash Dropdown Accessibility & Theme Fix */
.Select-value-label,
.Select-placeholder,
.virtualized-select .Select-value-label,
.Select--single>.Select-control .Select-value,
.form-select,
.form-control {
    color: #1e293b !important;
    /* Slate-800 for consistent contrast */
}

/* Dropdown Menu Options */
.VirtualizedSelectOption,
.VirtualizedSelectFocusedOption,
.form-select option {
    color: #1e293b !important;
}

.VirtualizedSelectFocusedOption {
    background-color: #f1f5f9 !important;
}

/* FIX CRÍTICO: Dropdown Menu Visibility & Z-Index */
.Select-menu-outer {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
    z-index: 9999 !important;
    /* Force on top */
    border-radius: 0 0 8px 8px !important;
}

.Select-control {
    background-color: #ffffff !important;
    /* Ensure input background is solid */
}

/* Dark Mode Support for Dropdown */
body[data-theme='titanium'] .Select-menu-outer {
    background-color: #1e293b !important;
    /* Dark Slate */
    border-color: #334155 !important;
}

body[data-theme='titanium'] .VirtualizedSelectOption {
    color: #f8fafc !important;
    background-color: #1e293b !important;
}

body[data-theme='titanium'] .VirtualizedSelectFocusedOption {
    background-color: #334155 !important;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--neutral-50);
}

::-webkit-scrollbar-thumb {
    background: var(--neutral-300);
    border-radius: 4px;
}

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

/* ====== THEME DEFINITIONS ====== */

/* 1. Warm & Natural */
body[data-theme='warm'] {
    --primary-900: #78350F;
    --primary-800: #92400E;
    --primary-700: #B45309;
    --primary-600: #D97706;
    --primary-500: #F59E0B;

    --accent-500: #10B981;
    --accent-600: #059669;

    --neutral-50: #FFFBEB;
    --neutral-100: #FEF3C7;
    --neutral-200: #FDE68A;
    --neutral-800: #451A03;
    --neutral-900: #290C02;

    --bg-app: #FFFBEB;
    --bg-sidebar: #451A03;
    --sidebar-bg: #451A03;

    --text-main: #451A03;
    --text-secondary: #92400E;
    --border-light: #FDE68A;

    --bs-primary: #D97706;
    --bs-body-bg: #FFFBEB;
    --header-bg: linear-gradient(135deg, #78350F 0%, #D97706 100%);
    --shadow-sm: 0 1px 2px 0 rgba(69, 26, 3, 0.1);
    --shadow-md: 0 4px 6px -1px rgba(69, 26, 3, 0.15);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
}

/* 2. Classic (Deep Blue & Tech) */
body[data-theme='classic'] {
    --primary-900: #0F172A;
    --primary-800: #1E293B;
    --primary-700: #334155;
    --primary-600: #2563EB;
    --primary-500: #3B82F6;

    --accent-500: #06B6D4;
    --accent-600: #0891B2;

    --neutral-50: #F8FAFC;
    --neutral-100: #F1F5F9;
    --neutral-200: #E2E8F0;
    --neutral-800: #1E293B;
    --neutral-900: #0F172A;

    --bg-app: #F8FAFC;
    --bg-sidebar: #0F172A;
    --sidebar-bg: #0F172A;

    --text-main: #0F172A;
    --text-secondary: #475569;
    --border-light: #CBD5E1;

    --bs-primary: #2563EB;
    --bs-body-bg: #F8FAFC;
    --header-bg: linear-gradient(135deg, #0F172A 0%, #2563EB 100%);
    --shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.1);
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
}

/* 4. Neo-Brutalism */
body[data-theme='neo-brutalism'] {
    --primary-900: #000000;
    --primary-800: #000000;
    --primary-700: #000000;
    --primary-600: #000000;
    --primary-500: #000000;

    --accent-500: #FF00FF;
    --accent-600: #CC00CC;

    --neutral-50: #FFFFFF;
    --neutral-100: #F0F0F0;
    --neutral-200: #000000;
    --neutral-800: #000000;
    --neutral-900: #000000;

    --bg-app: #FFFDF0;
    --bg-surface: #FFFFFF;
    --bg-sidebar: #000000;
    --sidebar-bg: #000000;

    --text-main: #000000;
    --text-secondary: #000000;
    --border-light: #000000;

    --bs-primary: #000000;
    --bs-body-bg: #FFFDF0;
    --header-bg: #000000;

    --radius-sm: 0px;
    --radius-md: 0px;
    --radius-lg: 0px;
    --shadow-sm: 4px 4px 0px 0px #000000;
    --shadow-md: 6px 6px 0px 0px #000000;
    --shadow-lg: 8px 8px 0px 0px #000000;
}

/* 5. Aqua Marine */
body[data-theme='aqua'] {
    --primary-900: #0D4F4F;
    --primary-600: #14B8A6;
    --accent-500: #14B8A6;
    --neutral-50: #F0FDFA;
    --bg-app: #F0FDFA;
    --bg-surface: #FFFFFF;
    --bg-sidebar: #116868;
    --sidebar-bg: #116868;
    --text-main: #042F2E;
    --border-light: #CCFBF1;
    --radius-md: 8px;
    --radius-lg: 12px;
    --shadow-sm: 0 1px 2px 0 rgba(13, 79, 79, 0.05);

    --bs-primary: #14B8A6;
    --bs-body-bg: #F0FDFA;
    --header-bg: linear-gradient(135deg, #0D4F4F 0%, #14B8A6 100%);
}

/* 6. Titanium Tech (Premium Dark Glass) */
body[data-theme='titanium'] {
    --primary-900: #020617;
    --primary-600: #0D9488;
    --accent-500: #14B8A6;
    --neutral-50: #0B0E14;
    --neutral-900: #F8FAFC;

    --bg-app: radial-gradient(circle at top right, #0F172A, #020617);
    --bg-surface: rgba(15, 23, 42, 0.6);
    --bg-sidebar: #020617;
    --text-main: #F8FAFC;
    --border-light: rgba(255, 255, 255, 0.1);

    --glass-bg: rgba(15, 23, 42, 0.4);
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
    --backdrop-blur: blur(16px);

    /* Dimensões Premium */
    --radius-lg: 16px;
    --radius-xl: 24px;

    --bs-primary: #14B8A6;
    --bs-body-bg: #020617;
    --header-bg: rgba(15, 23, 42, 0.8);
}

body[data-theme='titanium'] .card-premium {
    background: var(--glass-bg);
    backdrop-filter: var(--backdrop-blur);
    border: 1px solid var(--glass-border);
}

body[data-theme='titanium'] h1,
body[data-theme='titanium'] h2,
body[data-theme='titanium'] h3,
body[data-theme='titanium'] h4,
body[data-theme='titanium'] label,
body[data-theme='titanium'] .zahar-header-title {
    color: #F8FAFC !important;
}

/* ========================================================================== */
/* 7. iOS GLASS MATERIALS (APPLE DESIGN SYSTEM)                               */
/* ========================================================================== */

/* Variáveis Específicas iOS Glass */
:root {
    --ios-glass-light: rgba(255, 255, 255, 0.75);
    --ios-glass-dark: rgba(25, 25, 25, 0.75);
    --ios-border-light: rgba(255, 255, 255, 0.4);
    --ios-border-dark: rgba(255, 255, 255, 0.1);
    --ios-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.15);
    --ios-blur: blur(20px);
    --ios-saturate: saturate(180%);
}

/* Modal Content Override (iOS Style) */
/* Modal Content Override (iOS Style - Refactored for Dropdown Z-Index) */
/* Usamos ::before para o blur para não criar Stacking Context no content */
/* Modal Content Override (iOS Style - DISABLED FOR DEBUGGING) */
/*
.modal-content {
    background: transparent !important;
    border: 1px solid var(--ios-border-light) !important;
    box-shadow: var(--ios-shadow) !important;
    border-radius: 20px !important;
    position: relative !important;
    z-index: 1055 !important;
   
    overflow: visible !important;
}

.modal-content::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    background: var(--ios-glass-light);
    backdrop-filter: var(--ios-blur) var(--ios-saturate);
    -webkit-backdrop-filter: var(--ios-blur) var(--ios-saturate);
    border-radius: 20px !important;
}
*/


body[data-theme='titanium'] .modal-content,
body[data-theme='dark'] .modal-content {
    border: 1px solid var(--ios-border-dark) !important;
    color: white !important;
    background: transparent !important;
}

body[data-theme='titanium'] .modal-content::before,
body[data-theme='dark'] .modal-content::before {
    background: var(--ios-glass-dark);
}

/* Split View Panels */
.modal-body {
    background: transparent !important;
}

.bg-light.bg-opacity-25 {
    /* Painel Direito (Auditoria) */
    background: rgba(120, 120, 128, 0.08) !important;
    /* System Gray 4 equivalent */
    border-left: 1px solid rgba(0, 0, 0, 0.05) !important;
}

body[data-theme='titanium'] .bg-light.bg-opacity-25 {
    background: rgba(255, 255, 255, 0.05) !important;
    border-left: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Timeline Items (Notification Style) */
.timeline-item .rounded-circle {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
}

/* Inputs Premium iOS */
.form-control,
.form-select,
.dbc-input {
    background-color: rgba(255, 255, 255, 0.6) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    backdrop-filter: blur(10px);
    transition: all 0.2s ease;
}

body[data-theme='titanium'] .form-control,
body[data-theme='titanium'] .form-select,
body[data-theme='titanium'] input,
body[data-theme='titanium'] textarea {
    background-color: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: white !important;
    /* Remove white background on autofill */
    -webkit-box-shadow: 0 0 0 30px #0F172A inset !important;
    -webkit-text-fill-color: white !important;
}

.form-control:focus {
    background-color: rgba(255, 255, 255, 0.9) !important;
    transform: scale(1.01);
}

body[data-theme='titanium'] .form-control:focus {
    background-color: rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 0 0 2px var(--primary-600) !important;
}


/* Botões Glass */
.btn-secondary {
    background: rgba(120, 120, 128, 0.16) !important;
    border: none !important;
    color: var(--text-main) !important;
    backdrop-filter: blur(10px);
}

/* Custom Scrollbar iOS Style */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(120, 120, 128, 0.3);
    border-radius: 10px;
}

/* Nav Tabs Premium */
.nav-tabs-premium .nav-link {
    border: none !important;
    background: transparent !important;
    color: var(--text-secondary);
    font-weight: 500;
    opacity: 0.6;
    transition: all 0.3s;
}

.nav-tabs-premium .nav-link.active {
    color: var(--primary-600) !important;
    opacity: 1;
    border-bottom: 2px solid var(--primary-600) !important;
}

/*  Blindagem Landing Page (Fim das Piscadas) */
.landing-page-mode #sidebar, .landing-page-mode .glass-sidebar, .landing-page-mode #global-loading, .landing-page-mode ._dash-loading, .landing-page-mode #global-fab-container, .landing-page-mode #global-chat-container, .landing-page-mode #global-tasks-container, .landing-page-mode .global-notification-container, .landing-page-mode #loading-wrapper, .landing-page-mode #global-alert-toast { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; }