/* Paleta de Cores Suaves - Gestão de Estoque */

:root {
    /* Cor Principal - Tons Suaves (Azul Acinzentado Suave) */
    --primary: #7A94B0;
    --primary-50: #F5F7F9;
    --primary-100: #EBEFF3;
    --primary-200: #D7DFE7;
    --primary-300: #C3CFDB;
    --primary-400: #AFBFCF;
    --primary-500: #7A94B0;
    --primary-600: #6B85A0;
    --primary-700: #5C7690;
    --primary-800: #4D6780;
    --primary-900: #3E5870;
    
    /* Cores Complementares - Tons Suaves (Verde-Água Suave) */
    --secondary: #7FA99F;
    --secondary-50: #F2F7F6;
    --secondary-100: #E5EFED;
    --secondary-200: #CBDFDB;
    --secondary-300: #B1CFC9;
    --secondary-400: #97BFB7;
    --secondary-500: #7FA99F;
    --secondary-600: #6F988F;
    --secondary-700: #5F877F;
    --secondary-800: #4F766F;
    --secondary-900: #3F655F;
    
    /* Cores Neutras - Tons Suaves */
    --neutral-50: #FAFAFA;
    --neutral-100: #F5F5F5;
    --neutral-200: #EEEEEE;
    --neutral-300: #E0E0E0;
    --neutral-400: #BDBDBD;
    --neutral-500: #9E9E9E;
    --neutral-600: #757575;
    --neutral-700: #616161;
    --neutral-800: #424242;
    --neutral-900: #212121;
    
    /* Cores de Status - Tons Suaves */
    --success: #81C784;
    --success-light: #E8F5E9;
    --warning: #FFB74D;
    --warning-light: #FFF8E1;
    --error: #E57373;
    --error-light: #FFEBEE;
    --info: #64B5F6;
    --info-light: #E3F2FD;
    
    /* Cores de Fundo e Texto */
    --bg-primary: #FFFFFF;
    --bg-secondary: #FAFAFA;
    --text-primary: #424242;
    --text-secondary: #757575;
    
    /* Cores da Sidebar */
    --sidebar-bg: #F5F7F9;
    --sidebar-text: #424242;
    --sidebar-hover: #EBEFF3;
    --sidebar-active: #D7DFE7;
    
    /* Cores para Labels de Formulários (mais escuras para melhor contraste) */
    --label-color: #1F2937;
    
    /* Cores para Inputs e Selects - Modo Claro */
    --input-bg: #FFFFFF;
    --input-text: #1F2937;
    --input-border: #D1D5DB;
    --select-option-bg: #FFFFFF;
    --select-option-text: #1F2937;
}

/* Modo Escuro - Cores Suaves */
[data-theme="dark"] {
    /* Cor Principal - Modo Escuro Suave */
    --primary: #8BA5C1;
    --primary-50: #1F2326;
    --primary-100: #2E353B;
    --primary-200: #3D4750;
    --primary-300: #4C5965;
    --primary-400: #5B6B7A;
    --primary-500: #6A7D8F;
    --primary-600: #8BA5C1;
    --primary-700: #A8BCD4;
    --primary-800: #C5D3E7;
    --primary-900: #E2E9FA;
    
    /* Cores Neutras - Modo Escuro Suave (melhor contraste) */
    --neutral-50: #1A1A1A;
    --neutral-100: #242424;
    --neutral-200: #2E2E2E;
    --neutral-300: #383838;
    --neutral-400: #5A5A5A;
    --neutral-500: #7C7C7C;
    --neutral-600: #9E9E9E;
    --neutral-700: #C0C0C0;
    --neutral-800: #E0E0E0;
    --neutral-900: #F5F5F5;
    
    /* Cores de Status - Modo Escuro Suave */
    --success: #81C784;
    --success-light: #1B3E1D;
    --warning: #FFB74D;
    --warning-light: #3D2E1A;
    --error: #E57373;
    --error-light: #3D1E1E;
    --info: #64B5F6;
    --info-light: #1A2E3D;
    
    /* Cores de Fundo e Texto - Modo Escuro (melhor contraste) */
    --bg-primary: #1A1A1A;
    --bg-secondary: #222222;
    --text-primary: #E8E8E8;
    --text-secondary: #C0C0C0;
    
    /* Cores da Sidebar - Modo Escuro (melhor contraste) */
    --sidebar-bg: #1F2326;
    --sidebar-text: #E8E8E8;
    --sidebar-hover: #2E353B;
    --sidebar-active: #4C5965;
    
    /* Cores para Labels de Formulários - Modo Escuro */
    --label-color: #E0E0E0;
    
    /* Cores para Inputs e Selects - Modo Escuro */
    --input-bg: #2E2E2E;
    --input-text: #E8E8E8;
    --input-border: #4A4A4A;
    --select-option-bg: #2E2E2E;
    --select-option-text: #E8E8E8;
}

/* Classes Tailwind Customizadas */
.bg-primary { background-color: var(--primary); }
.bg-primary-50 { background-color: var(--primary-50); }
.bg-primary-100 { background-color: var(--primary-100); }
.bg-primary-200 { background-color: var(--primary-200); }
.bg-primary-300 { background-color: var(--primary-300); }
.bg-primary-400 { background-color: var(--primary-400); }
.bg-primary-500 { background-color: var(--primary-500); }
.bg-primary-600 { background-color: var(--primary-600); }
.bg-primary-700 { background-color: var(--primary-700); }
.bg-primary-800 { background-color: var(--primary-800); }
.bg-primary-900 { background-color: var(--primary-900); }

.text-primary { color: var(--primary); }
.text-primary-50 { color: var(--primary-50); }
.text-primary-100 { color: var(--primary-100); }
.text-primary-200 { color: var(--primary-200); }
.text-primary-300 { color: var(--primary-300); }
.text-primary-400 { color: var(--primary-400); }
.text-primary-500 { color: var(--primary-500); }
.text-primary-600 { color: var(--primary-600); }
.text-primary-700 { color: var(--primary-700); }
.text-primary-800 { color: var(--primary-800); }
.text-primary-900 { color: var(--primary-900); }

.border-primary { border-color: var(--primary); }
.border-primary-200 { border-color: var(--primary-200); }
.border-primary-300 { border-color: var(--primary-300); }

.hover\:bg-primary-600:hover { background-color: var(--primary-600); }
.hover\:bg-primary-700:hover { background-color: var(--primary-700); }
.hover\:text-primary-600:hover { color: var(--primary-600); }
.hover\:text-primary-700:hover { color: var(--primary-700); }

/* Gradientes Suaves */
.bg-gradient-primary { 
    background: linear-gradient(135deg, var(--primary-200) 0%, var(--primary-300) 50%, var(--primary-400) 100%); 
}
.bg-gradient-primary-light { 
    background: linear-gradient(135deg, var(--primary-100) 0%, var(--primary-200) 100%); 
}

/* Sombras Suaves */
.shadow-primary { box-shadow: 0 4px 14px 0 rgba(122, 148, 176, 0.15); }
.shadow-primary-lg { box-shadow: 0 10px 25px 0 rgba(122, 148, 176, 0.2); }

/* Transições Suaves */
.transition-colors-smooth {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Estilos da Sidebar */
.menu-item {
    transition: background-color 0.2s ease, color 0.2s ease;
}

.menu-item:hover {
    background-color: var(--sidebar-hover) !important;
}

/* Estilos para Cards e Fundos */
.bg-white {
    background-color: var(--bg-primary) !important;
}

.bg-neutral-50 {
    background-color: var(--bg-secondary) !important;
}

.bg-neutral-100 {
    background-color: var(--neutral-100) !important;
}

/* Estilos de Texto */
.text-neutral-400 {
    color: var(--neutral-400) !important;
}

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

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

.text-neutral-800 {
    color: var(--text-primary) !important;
}

.text-gray-900 {
    color: var(--text-primary) !important;
}

/* Estilos de Borda */
.border-primary-200 {
    border-color: var(--neutral-200) !important;
}

/* Modo Escuro - Atualização de Ícones */
[data-theme="dark"] .dark-mode-icon {
    display: none !important;
}

[data-theme="dark"] .light-mode-icon {
    display: inline-block !important;
}

[data-theme="light"] .dark-mode-icon {
    display: inline-block !important;
}

[data-theme="light"] .light-mode-icon {
    display: none !important;
}

/* Estilos adicionais para modo escuro */
[data-theme="dark"] {
    --shadow-primary: 0 4px 14px 0 rgba(0, 0, 0, 0.3);
    --shadow-primary-lg: 0 10px 25px 0 rgba(0, 0, 0, 0.4);
}

/* Estilos de botões do header */
.header-button {
    transition: color 0.2s ease;
}

.header-button:hover {
    color: var(--primary-600) !important;
}

.header-button-logout:hover {
    color: var(--error) !important;
}

/* Estilos para Labels de Formulários */
label.text-gray-700,
.text-gray-700 {
    color: var(--label-color) !important;
}

/* Estilos para Inputs e Selects */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="time"],
textarea,
select {
    background-color: var(--input-bg) !important;
    color: var(--input-text) !important;
    border-color: var(--input-border) !important;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Estilos para Options dentro de Selects no Modo Escuro */
[data-theme="dark"] select option {
    background-color: #2E2E2E !important;
    color: #E8E8E8 !important;
}

[data-theme="dark"] select option:hover {
    background-color: #4A4A4A !important;
}

[data-theme="dark"] select option:checked {
    background-color: var(--primary-600) !important;
    color: #FFFFFF !important;
}

/* Garantir que o texto selecionado no select seja visível */
[data-theme="dark"] select {
    color: var(--input-text) !important;
}

/* Placeholder text no modo escuro */
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: #9E9E9E !important;
    opacity: 1;
}

/* Títulos no modo escuro - mais claros para melhor contraste */
[data-theme="dark"] .text-gray-900,
[data-theme="dark"] h1.text-gray-900,
[data-theme="dark"] h2.text-gray-900,
[data-theme="dark"] h3.text-gray-900,
[data-theme="dark"] .text-gray-900.font-bold,
[data-theme="dark"] .text-gray-900.font-semibold {
    color: #F5F5F5 !important;
}

/* Labels de tabela no modo escuro - mais claras para melhor visibilidade */
[data-theme="dark"] .text-gray-500,
[data-theme="dark"] th.text-gray-500,
[data-theme="dark"] thead th,
[data-theme="dark"] thead .text-gray-500 {
    color: #E0E0E0 !important;
}

/* Fundo do cabeçalho da tabela no modo escuro */
[data-theme="dark"] thead.bg-gray-50,
[data-theme="dark"] thead {
    background-color: var(--neutral-200) !important;
}

/* Hover de tabelas no modo escuro */
[data-theme="dark"] tbody tr:hover {
    background-color: var(--neutral-200) !important;
}

/* Garantir que textos dentro de linhas com hover sejam legíveis */
[data-theme="dark"] tbody tr:hover .text-gray-900,
[data-theme="dark"] tbody tr:hover .text-gray-500,
[data-theme="dark"] tbody tr:hover code {
    color: var(--text-primary) !important;
}

/* Código IP e elementos com bg-gray-100 no modo escuro */
[data-theme="dark"] code.bg-gray-100,
[data-theme="dark"] .bg-gray-100 {
    background-color: var(--neutral-300) !important;
    color: var(--text-primary) !important;
}

/* Textos em código no modo escuro */
[data-theme="dark"] code {
    color: var(--text-primary) !important;
}

/* Labels de descrição (dt) em páginas de detalhes no modo escuro */
[data-theme="dark"] dt.text-gray-500,
[data-theme="dark"] dt.text-sm.font-medium {
    color: #E0E0E0 !important;
}

/* Caixas com bg-gray-50 no modo escuro */
[data-theme="dark"] .bg-gray-50 {
    background-color: var(--neutral-200) !important;
    color: var(--text-primary) !important;
}

/* Textos pré-formatados (pre) no modo escuro */
[data-theme="dark"] pre {
    color: var(--text-primary) !important;
    background-color: var(--neutral-200) !important;
}

/* Textos dentro de pre no modo escuro */
[data-theme="dark"] pre.text-gray-900 {
    color: var(--text-primary) !important;
}

/* Garantir que todas as labels descritivas sejam visíveis */
[data-theme="dark"] dl dt {
    color: #E0E0E0 !important;
}

/* Caixas coloridas de fundo no modo escuro */
[data-theme="dark"] .bg-yellow-50 {
    background-color: #3D2E1A !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .bg-green-50 {
    background-color: #1B3E1D !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .bg-red-50 {
    background-color: #3D1E1E !important;
    color: var(--text-primary) !important;
}

/* Bordas de caixas coloridas no modo escuro */
[data-theme="dark"] .border-yellow-200 {
    border-color: #5A4A2A !important;
}

[data-theme="dark"] .border-green-200 {
    border-color: #2D5A30 !important;
}

[data-theme="dark"] .border-red-200 {
    border-color: #5A2E2E !important;
}