/* Tema Metadesk - Cores personalizadas */
:root {
    --primary-color: #6b7280 !important;
    --secondary-color: #f3f4f6 !important;
    --accent-color: #6b7280 !important;
    --background-color: #ffffff !important;
    --text-color: #374151 !important;
    --text-light: #6b7280 !important;
    --border-color: #e5e7eb !important;
    --hover-color: #f9fafb !important;
}

/* Metadesk specific colors */
html.metadesk {
    --primary-color: #6b7280 !important;
    --secondary-color: #f3f4f6 !important;
    --accent-color: #6b7280 !important;
    --background-color: #ffffff !important;
    --text-color: #374151 !important;
    --text-light: #6b7280 !important;
    --border-color: #e5e7eb !important;
    --hover-color: #f9fafb !important;
}

/* Override específico para botões roxos */
html.metadesk .bg-purple-600,
html.metadesk .bg-purple-500,
html.metadesk .bg-purple-700 {
    background-color: var(--primary-color) !important;
}

html.metadesk .hover\:bg-purple-700:hover,
html.metadesk .hover\:bg-purple-600:hover {
    background-color: #4b5563 !important;
}

html.metadesk .text-purple-600,
html.metadesk .text-purple-500 {
    color: var(--primary-color) !important;
}

/* Sidebar específico para Metadesk */
html.metadesk #sidebar-main {
    background-color: var(--background-color) !important;
}

html.metadesk #sidebar-main .border-gray-200 {
    border-color: var(--border-color) !important;
}

html.metadesk #sidebar-main img {
    max-height: 32px !important;
}

/* Menu items específicos */
html.metadesk .bg-gray-100 {
    background-color: #f3f4f6 !important;
}

html.metadesk .text-gray-700 {
    color: var(--text-color) !important;
}

html.metadesk .hover\:bg-gray-50:hover {
    background-color: var(--hover-color) !important;
}

html.metadesk .hover\:text-gray-600:hover {
    color: var(--primary-color) !important;
}

html.metadesk .text-gray-600 {
    color: var(--primary-color) !important;
}

html.metadesk .text-gray-400 {
    color: #9ca3af !important;
}

html.metadesk .group-hover\:text-gray-500:hover {
    color: var(--text-light) !important;
}

html.metadesk .border-gray-600 {
    border-color: var(--primary-color) !important;
}

html.metadesk .bg-gray-50 {
    background-color: var(--hover-color) !important;
}

/* Avatar e perfil do usuário específicos para Metadesk */
html.metadesk .bg-gray-500 {
    background-color: var(--primary-color) !important;
}

html.metadesk .text-gray-400:hover {
    color: var(--primary-color) !important;
}

html.metadesk .hover\:text-gray-600:hover {
    color: var(--primary-color) !important;
}

/* Dropdown menu específico */
html.metadesk .hover\:bg-gray-100:hover {
    background-color: var(--hover-color) !important;
}

/* Formulários */
html.metadesk .border-gray-300 {
    border-color: var(--border-color) !important;
}

html.metadesk .focus\:border-gray-500:focus {
    border-color: var(--primary-color) !important;
}

html.metadesk .focus\:ring-gray-500:focus {
    --tw-ring-color: var(--primary-color) !important;
}

/* Texto */
html.metadesk .text-gray-900 {
    color: var(--text-color) !important;
}

html.metadesk .text-gray-500 {
    color: var(--text-light) !important;
}

/* Cards e containers */
html.metadesk .bg-white {
    background-color: var(--background-color) !important;
}

html.metadesk .border {
    border-color: var(--border-color) !important;
}

/* Badges e labels */
html.metadesk .badge-primary {
    background-color: var(--primary-color) !important;
    color: white !important;
}

html.metadesk .badge-secondary {
    background-color: var(--secondary-color) !important;
    color: var(--text-color) !important;
}

/* Alertas */
html.metadesk .alert-info {
    background-color: var(--secondary-color) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

/* Navegação */
html.metadesk .nav-item.active {
    background-color: var(--secondary-color) !important;
    color: var(--primary-color) !important;
}

html.metadesk .nav-item:hover {
    background-color: var(--hover-color) !important;
}

/* Tabelas */
html.metadesk .table th {
    background-color: var(--secondary-color) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

html.metadesk .table td {
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

/* Paginação */
html.metadesk .pagination .page-link {
    color: var(--primary-color) !important;
    border-color: var(--border-color) !important;
}

html.metadesk .pagination .page-link:hover {
    background-color: var(--hover-color) !important;
    color: var(--text-color) !important;
}

html.metadesk .pagination .page-item.active .page-link {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: white !important;
}

/* Modals */
html.metadesk .modal-header {
    background-color: var(--secondary-color) !important;
    border-color: var(--border-color) !important;
}

html.metadesk .modal-footer {
    background-color: var(--secondary-color) !important;
    border-color: var(--border-color) !important;
}

/* Dropdowns */
html.metadesk .dropdown-menu {
    background-color: var(--background-color) !important;
    border-color: var(--border-color) !important;
}

html.metadesk .dropdown-item:hover {
    background-color: var(--hover-color) !important;
    color: var(--text-color) !important;
}

/* Progress bars */
html.metadesk .progress {
    background-color: var(--secondary-color) !important;
}

html.metadesk .progress-bar {
    background-color: var(--primary-color) !important;
}

/* Gradientes em botões de autenticação */
html.metadesk .bg-gradient-to-r.from-blue-500.to-purple-600 {
    background: linear-gradient(to right, var(--primary-color), var(--primary-color)) !important;
}

html.metadesk .hover\:from-blue-600:hover.hover\:to-purple-700:hover {
    background: linear-gradient(to right, #4b5563, #4b5563) !important;
}

/* Focus rings personalizados */
html.metadesk .focus\:ring-purple-500:focus {
    --tw-ring-color: var(--primary-color) !important;
}

html.metadesk .focus\:border-purple-500:focus {
    border-color: var(--primary-color) !important;
}

/* Formulários e inputs */
html.metadesk .border-purple-500 {
    border-color: var(--primary-color) !important;
}

html.metadesk .ring-purple-500 {
    --tw-ring-color: var(--primary-color) !important;
}

/* Botões com cores específicas */
html.metadesk .bg-purple-600 {
    background-color: var(--primary-color) !important;
}

html.metadesk .hover\:bg-purple-700:hover {
    background-color: #4b5563 !important;
}

html.metadesk .bg-purple-100 {
    background-color: var(--secondary-color) !important;
}

html.metadesk .text-purple-700 {
    color: var(--text-color) !important;
}

html.metadesk .text-purple-600 {
    color: var(--primary-color) !important;
}

html.metadesk .hover\:text-purple-600:hover {
    color: var(--primary-color) !important;
}

html.metadesk .bg-purple-50 {
    background-color: var(--hover-color) !important;
}

html.metadesk .border-purple-600 {
    border-color: var(--primary-color) !important;
}

/* Links e texto hover */
html.metadesk .hover\:text-purple-600:hover {
    color: var(--primary-color) !important;
}

html.metadesk .group-hover\:text-purple-500:hover {
    color: var(--text-light) !important;
}

/* Conteúdo interno - botões e elementos comuns */
html.metadesk .bg-purple-600,
html.metadesk .bg-purple-500,
html.metadesk .bg-purple-700 {
    background-color: var(--primary-color) !important;
}

html.metadesk .hover\:bg-purple-700:hover,
html.metadesk .hover\:bg-purple-600:hover {
    background-color: #4b5563 !important;
}

html.metadesk .text-purple-600,
html.metadesk .text-purple-500,
html.metadesk .text-purple-700 {
    color: var(--primary-color) !important;
}

/* Cards e painéis */
html.metadesk .border-purple-600,
html.metadesk .border-purple-500 {
    border-color: var(--primary-color) !important;
}

/* Estados de foco */
html.metadesk .focus\:ring-purple-500:focus {
    --tw-ring-color: var(--primary-color) !important;
}

html.metadesk .focus\:border-purple-500:focus,
html.metadesk .focus\:border-purple-600:focus {
    border-color: var(--primary-color) !important;
}

/* Elementos de loading e estados */
html.metadesk .ring-purple-500 {
    --tw-ring-color: var(--primary-color) !important;
}

/* Badges e indicadores */
html.metadesk .bg-purple-100 {
    background-color: var(--secondary-color) !important;
}

html.metadesk .text-purple-700 {
    color: var(--text-color) !important;
}

/* Bordas e separadores */
html.metadesk .border-purple-600 {
    border-color: var(--primary-color) !important;
}

/* Ícones e símbolos */
html.metadesk .text-purple-600 {
    color: var(--primary-color) !important;
}

/* Overlay e estados especiais */
html.metadesk .bg-purple-50 {
    background-color: var(--hover-color) !important;
}

html.metadesk .hover\:bg-purple-25:hover {
    background-color: var(--hover-color) !important;
}