/*
 * Componentes de Interface - SUAS em Dados
 * * Objetivo: Sistema de design padronizado para a aplicação SUAS em Dados
 * Características:
 * - Design responsivo
 * - Feedback visual para interações
 * - Hierarquia clara de informação
 * - Sistema de variáveis CSS para consistência
 * * Mantido por: [Junier Goulart/COOVIG]
 * Última atualização: 2025-05-20
 */

/* =================== Sistema de Variáveis CSS ======================= */
:root {
    /* Paleta de cores - Sugestões baseadas no padrão gov.br
     * Nota: O azul primário oficial do Gov.br é #0068B2.
     * As cores definidas aqui são as fornecidas e nomeadas como "sugestões".
     */
    --color-primary: #0072C6;           /* Azul principal gov.br */
    --color-primary-dark: #005699;      /* Variação escura do azul principal */
    --color-secondary: #28A745;         /* Verde gov.br */
    --color-text: #333333;              /* Cor padrão para textos (cinza escuro) */
    --color-text-light: #ffffff;        /* Cor para textos em fundos escuros */
    --color-background: #f8f9fa;        /* Cor de fundo padrão (cinza claro) */
    --color-background-hover: #e9ecef;  /* Cor de fundo para hover */
    --color-border: #ced4da;            /* Cor padrão para bordas (cinza) */
    --color-action: var(--color-primary); /* Cor para botões de ação (usar azul principal) */
    --color-action-hover: var(--color-primary-dark); /* Cor para hover em botões de ação */
    --color-warning: #FFC107;           /* Amarelo para alertas/avisos (opcional) */

    /* Tipografia - Baseada na fonte "Rawline", padrão gov.br e Mantine */
    @import url('https://fonts.cdnfonts.com/css/rawline');
    --font-family-base: 'Rawline', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --mantine-primary-color: #228be6;
    --mantine-secondary-color: #20c997;
    --mantine-warning-color: #fd7e14;
    --mantine-danger-color: #ff4757;

    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-md: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 20px;
    --font-size-xxl: 24px;
    --font-weight-normal: 400;
    --font-weight-bold: 700;

    /* Espaçamento */
    --spacing-xs: 4px;                  /* Espaçamento muito pequeno */
    --spacing-sm: 8px;                  /* Espaçamento pequeno */
    --spacing-md: 12px;                 /* Espaçamento médio */
    --spacing-lg: 16px;                 /* Espaçamento grande */
    --spacing-xl: 24px;                 /* Espaçamento muito grande */

    /* Bordas - Ajustado para maior alinhamento com o padrão gov.br (geralmente menos arredondado) */
    --border-radius-sm: 4px;            /* Borda levemente arredondada (mantido) */
    --border-radius-md: 4px;            /* Ajustado de 6px para 4px para consistência gov.br */
    --border-radius-lg: 8px;            /* Mantido, usar com moderação para elementos específicos */
    --border-width: 1px;

    /* Sombras - Sombras sutis e planas, conforme padrão gov.br */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.075);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.15);

    /* Transições */
    --transition-fast: 0.2s ease-in-out;
    --transition-normal: 0.3s ease;

    /* Novas variáveis para animações */
    --animation-duration: 0.2s;
    --animation-easing: cubic-bezier(0.25, 0.8, 0.25, 1);
    --hover-lift: -3px;
    --hover-scale: 1.02;
    --shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.15);
    --shadow-focus: 0 0 0 3px rgba(34, 139, 230, 0.2);
}

/* Aplicação da fonte base em todo o documento */
body {
    font-family: var(--font-family-base);
    color: var(--color-text); /* Garante a cor padrão do texto em todo o body */
    line-height: 1.5; /* Boa prática para legibilidade */
}

/* =================== Componentes Reutilizáveis ======================= */

/* --- Layout Containers --- */
.layout-card {
    padding: var(--spacing-lg);
    height: 95vh; /* Manter alturas específicas da aplicação */
    min-height: 600px; /* Manter alturas específicas da aplicação */
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    border-radius: var(--border-radius-md); /* Usar border-radius-md para consistência */
    border: var(--border-width) solid var(--color-border);
    box-shadow: var(--shadow-sm); /* Adicionar sombra sutil para elevação */
}

.layout-sidebar {
    height: 95vh; /* Manter alturas específicas da aplicação */
    margin: var(--spacing-xl);
    padding-right: var(--spacing-md);
    padding-left: var(--spacing-md);
    overflow-y: auto;
    background-color: #ffffff;
    border-right: var(--border-width) solid var(--color-border);
    /* Adicionar sombra sutil para separação visual, se desejado */
    /* box-shadow: var(--shadow-sm); */ 
}

.layout-row {
    margin-bottom: var(--spacing-lg);
}

/* --- Elementos de Texto --- */
.text-title {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-md);
    color: var(--color-primary); /* Mantido, títulos podem usar a cor primária */
}

.text-value {
    font-size: var(--font-size-xxl);
    font-weight: var(--font-weight-bold);
    color: var(--color-secondary); /* Mantido, cor secundária para valores de destaque */
}

/* --- Elementos de Ícone --- */
.icon-default {
    margin-right: var(--spacing-sm); /* Ajustado para um espaçamento ligeiramente menor e mais compacto */
    font-size: var(--font-size-xl); /* Ajustado para um tamanho que harmonize melhor com o texto */
    color: var(--color-primary); /* Sugestão: usar a cor primária para ícones de destaque */
}

.icon-inline {
    display: inline-block;
    vertical-align: middle;
}

/* =================== Componente Card ======================= */
.card {
    background-color: #ffffff;
    border-radius: 12px; /* Bordas mais arredondadas */
    padding: var(--spacing-xl);
    text-align: left;
    transition: all var(--animation-duration) var(--animation-easing);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 
                0 1px 3px rgba(0, 0, 0, 0.06);
    position: relative;
    overflow: hidden;
}

.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #228be6, #20c997);
    transform: scaleX(0);
    transition: transform var(--animation-duration) var(--animation-easing);
    transform-origin: left;
}

/* Efeito de hover para destaque visual - mais sutil, conforme Gov.br */
.card:hover {
    transform: translateY(var(--hover-lift)) scale(var(--hover-scale));
    box-shadow: var(--shadow-hover);
    border-color: rgba(34, 139, 230, 0.2);
}

.card:hover::before {
    transform: scaleX(1);
}

/* Estilo do título do card */
.card-title {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-md);
    color: var(--color-text);
}

/* Valor principal do card - destaque numérico */
.card-value {
    font-size: var(--font-size-xxl);
    font-weight: var(--font-weight-bold);
    color: var(--color-secondary);
}

/* =================== Botão de Exportação ======================= */
.export {
    background-color: var(--color-action);
    color: var(--color-text-light);
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: var(--font-size-sm);
    border-radius: var(--border-radius-sm); /* 4px */
    cursor: pointer;
    transition: background-color var(--transition-fast), box-shadow var(--transition-fast);
    border: none;
    text-transform: uppercase; /* Mantido, alinhado com gov.br */
    font-weight: var(--font-weight-bold);
    display: inline-flex; /* Melhor para alinhamento de ícones/texto */
    align-items: center; /* Centraliza verticalmente o conteúdo */
    justify-content: center; /* Centraliza horizontalmente o conteúdo */
    box-shadow: var(--shadow-sm); /* Sombra sutil para botões */
}

/* Estado hover mantém consistência visual */
.export:hover {
    color: var(--color-text-light);
    background-color: var(--color-action-hover);
    box-shadow: var(--shadow-md); /* Sombra mais pronunciada no hover */
}

/* Estado de foco para acessibilidade */
.export:focus {
    outline: 2px solid var(--color-primary-dark); /* Anel de foco claro */
    outline-offset: 2px;
}

/* =================== Componente Dropdown ======================= */
/* Estilos gerais do dropdown - Alinhado com o padrão gov.br para campos de formulário */
.dbc-dropdown {
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--border-radius-sm); /* 4px */
    font-size: var(--font-size-sm);
    background-color: #ffffff;
    box-shadow: none; /* Dropdowns geralmente mais planos, sem sombra externa */
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

/* Estilos para o controle do dropdown */
.dbc-dropdown .Select-control {
    border: none; /* Remover borda interna */
    box-shadow: none;
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: transparent;
    cursor: pointer;
}

/* Estilos para o controle do dropdown e quando está aberto/focado */
.dbc-dropdown .Select-control,
.dbc-dropdown .is-open > .Select-control,
.dbc-dropdown .Select-control:focus { /* Adicionado foco para o controle */
    border: none;
    box-shadow: none;
    background-color: transparent;
}

/* Efeito de foco no dropdown principal */
.dbc-dropdown.is-focused,
.dbc-dropdown.is-open {
    border-color: var(--color-primary); /* Borda primária no foco/abertura */
    box-shadow: 0 0 0 2px rgba(0, 114, 198, 0.25); /* Anel de foco Gov.br (com opacidade) */
}

/* Estilos para o menu do dropdown */
.dbc-dropdown .Select-menu-outer {
    border: var(--border-width) solid var(--color-border);
    box-shadow: var(--shadow-md); /* Sombra para o menu flutuante */
    border-radius: var(--border-radius-sm); /* 4px */
    margin-top: var(--spacing-xs); /* Pequeno espaçamento entre controle e menu */
}

/* Estilos para o item selecionado (texto visível) */
.dbc-dropdown .Select-value-label {
    color: var(--color-text);
}

/* Estilos para as opções do dropdown */
.dbc-dropdown .Select-option {
    background-color: var(--color-background); /* Fundo padrão para opções */
    color: var(--color-text);
    padding: var(--spacing-sm) var(--spacing-md);
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

/* Estilos para a opção selecionada (hover/foco) */
.dbc-dropdown .Select-option.is-focused,
.dbc-dropdown .Select-option:hover { /* Adicionar hover para todas as opções */
    background-color: var(--color-primary);
    color: var(--color-text-light);
}

/* Estilos para a opção selecionada */
.dbc-dropdown .Select-option.is-selected {
    background-color: var(--color-primary-dark); /* Cor mais escura para a opção realmente selecionada */
    color: var(--color-text-light);
    font-weight: var(--font-weight-bold);
}


/* =================== Componente Sidebar ======================= */
/* Estilo base para todos os links da sidebar */
.sidebar-link {
    color: #000000; /* Mudando para preto */
    border-radius: var(--border-radius-md);
    text-decoration: none;
    padding: var(--spacing-sm) var(--spacing-md); /* Reduzido de var(--spacing-md) var(--spacing-lg) */
    margin: var(--spacing-xs) 0; /* Reduzido de var(--spacing-sm) 0 */
    transition: all var(--transition-normal);
    display: flex;
    align-items: center;
    border: var(--border-width) solid transparent;
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-sm); /* Adicionado para reduzir o tamanho da fonte */
}

/* Estado de hover para feedback visual - mais sutil */
.sidebar-link:hover {
    background-color: var(--color-background-hover);
    color: var(--color-primary); /* Cor primária no hover do link */
    border-color: var(--color-background-hover); /* Borda suave no hover */
    box-shadow: none; /* Remover sombra no hover, manter mais plano */
}

/* Estado ativo com destaque visual - Alinhado com o padrão gov.br para navegação */
.sidebar-link.active,
.sidebar-link.active:focus,
.sidebar-link.active:visited {
    background-color: var(--color-primary) !important; /* Fundo primário */
    color: var(--color-text-light) !important; /* Texto branco */
    border-color: var(--color-primary-dark) !important; /* Borda sutil escura */
    font-weight: var(--font-weight-bold);
    box-shadow: var(--shadow-sm); /* Sombra sutil para destaque de ativo */
    outline: none; /* Remover outline padrão se estiver usando box-shadow para foco visual */
}

/* Adicionando um foco para links não-ativos também */
.sidebar-link:focus {
    outline: 2px solid var(--color-primary); /* Anel de foco Gov.br */
    outline-offset: 2px;
}

/* ============ SUAS em Dados - Estilos Customizados ============ */

/* Estilos gerais */
.main-container {
    font-family: var(--font-family-base);
}

/* ============ Estilos da Sidebar DMC ============ */
.nav-item {
    transition: all var(--animation-duration) var(--animation-easing) !important;
    border-radius: 8px !important; /* Reduzido de 10px */
    position: relative !important;
    overflow: hidden !important;
    margin: var(--spacing-xs) 0 !important; /* Adicionado para reduzir espaçamento vertical */
}

.nav-item .mantine-Paper-root {
    padding: var(--spacing-sm) var(--spacing-md) !important; /* Reduzir padding interno */
    min-height: auto !important; /* Permitir altura automática menor */
}

/* Reduzir tamanho dos ícones na sidebar */
.nav-item .dash-iconify {
    width: 18px !important; /* Reduzido de tamanho padrão */
    height: 16px !important;
    font-size: 18px !important;
}

/* Reduzir tamanho do texto nos itens de navegação */
.nav-item .mantine-Text-root {
    font-size: var(--font-size-sm) !important;
    line-height: 1.3 !important;
    color: #565353 !important; /* Adicionando cor preta específica */
}

/* Ajustar espaçamento entre ícone e texto */
.nav-item .mantine-Group-root {
    gap: var(--spacing-sm) !important;
}

.nav-item:hover {
    background-color: rgba(204, 219, 233, 0.05) !important;
    transform: translateX(4px);
}

.nav-item:hover .mantine-Paper-root {
    background-color: rgba(34, 139, 230, 0.08) !important;
    border-left: 3px solid #228be6;
}

.nav-item:hover .dash-iconify {
/* Removido: Estilos de Dash Bootstrap Components (dbc-dropdown) */
    opacity: 1;
    transform: translateX(0);
    transition: all 0.3s ease-out;
}

.notification-exit {
    opacity: 1;
    transform: translateX(0);
}

.notification-exit-active {
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.3s ease-in;
}

/* ============ Estilos para AppShell DMC ============ */
.mantine-AppShell-navbar {
    border-right: 1px solid #ffffff !important;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05) !important;
}

.mantine-AppShell-main {
    background-color: #f8f9fa !important;
}

/* ============ Estilos para Dropdown DMC ============ */
.mantine-Select-dropdown {
    border-radius: 12px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.mantine-Select-item:hover {
    background-color: rgba(34, 139, 230, 0.1) !important;
}

/* ============ Animações ============ */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.3s ease-out;
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.slide-in-left {
    animation: slideInLeft 0.3s ease-out;
}

/* =================== Melhorias Modernas - Animações e Microinterações ======================= */

/* Variáveis para animações */
:root {
    /* ...existing variables... */
    
    /* Novas variáveis para animações */
    --animation-duration: 0.2s;
    --animation-easing: cubic-bezier(0.25, 0.8, 0.25, 1);
    --hover-lift: -3px;
    --hover-scale: 1.02;
    --shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.15);
    --shadow-focus: 0 0 0 3px rgba(34, 139, 230, 0.2);
}

/* =================== Cards Modernos com Animações ======================= */
.card {
    background-color: #ffffff;
    border-radius: 12px; /* Bordas mais arredondadas */
    padding: var(--spacing-xl);
    text-align: left;
    transition: all var(--animation-duration) var(--animation-easing);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 
                0 1px 3px rgba(0, 0, 0, 0.06);
    position: relative;
    overflow: hidden;
}

.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #228be6, #20c997);
    transform: scaleX(0);
    transition: transform var(--animation-duration) var(--animation-easing);
    transform-origin: left;
}

.card:hover {
    transform: translateY(var(--hover-lift)) scale(var(--hover-scale));
    box-shadow: var(--shadow-hover);
    border-color: rgba(34, 139, 230, 0.2);
}

.card:hover::before {
    transform: scaleX(1);
}

/* =================== Botões Modernos ======================= */
.modern-button {
    background: linear-gradient(135deg, #228be6 0%, #1c7ed6 100%);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all var(--animation-duration) var(--animation-easing);
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(34, 139, 230, 0.3);
}

.modern-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s;
}

.modern-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(34, 139, 230, 0.4);
}

.modern-button:hover::before {
    left: 100%;
}

.modern-button:active {
    transform: translateY(0);
}

/* =================== Mantine Components - Melhorias ======================= */

/* Paper components com animações */
.mantine-Paper-root {
    transition: all var(--animation-duration) var(--animation-easing) !important;
    border-radius: 12px !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

.mantine-Paper-root:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1) !important;
}

/* Cards com efeito glassmorphism */
.glass-card {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 16px;
    transition: all var(--animation-duration) var(--animation-easing);
}

.glass-card:hover {
    background: rgba(255, 255, 255, 0.95);
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

/* =================== Dropdown Moderno ======================= */
.mantine-Select-dropdown {
    border-radius: 12px !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
    backdrop-filter: blur(10px) !important;
    animation: dropdownSlideIn 0.2s ease-out !important;
}

@keyframes dropdownSlideIn {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.mantine-Select-item {
    border-radius: 6px !important;
    margin: 2px 4px !important;
    transition: all 0.15s ease !important;
}

.mantine-Select-item:hover {
    background-color: rgba(34, 139, 230, 0.1) !important;
    transform: translateX(4px) !important;
}

/* =================== Sidebar Melhorada ======================= */
.nav-item {
    transition: all var(--animation-duration) var(--animation-easing) !important;
    border-radius: 10px !important;
    position: relative !important;
    overflow: hidden !important;
}

.nav-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 3px;
    background: linear-gradient(180deg, #228be6, #20c997);
    transform: scaleY(0);
    transition: transform var(--animation-duration) var(--animation-easing);
}

.nav-item:hover {
    background-color: rgba(34, 139, 230, 0.05) !important;
    transform: translateX(6px) !important;
    box-shadow: 0 4px 12px rgba(34, 139, 230, 0.15) !important;
}

.nav-item:hover::before {
    transform: scaleY(1);
}

.nav-item:hover .mantine-Paper-root {
    background-color: rgba(34, 139, 230, 0.08) !important;
}

/* =================== Modais Modernos ======================= */
.mantine-Modal-content {
    border-radius: 16px !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2) !important;
    animation: modalSlideIn 0.3s ease-out !important;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.mantine-Modal-overlay {
    backdrop-filter: blur(4px) !important;
    background-color: rgba(0, 0, 0, 0.4) !important;
}

/* =================== Tabelas Modernas ======================= */
.modern-table {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.modern-table thead {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.modern-table tbody tr {
    transition: all 0.15s ease;
}

.modern-table tbody tr:hover {
    background-color: rgba(34, 139, 230, 0.04);
    transform: scale(1.005);
}

/* =================== Input Fields Modernos ======================= */
.mantine-Input-input {
    border-radius: 8px !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    transition: all var(--animation-duration) ease !important;
}

.mantine-Input-input:focus {
    border-color: #228be6 !important;
    box-shadow: var(--shadow-focus) !important;
    transform: translateY(-1px) !important;
}

/* =================== Progress Bars Animados ======================= */
.mantine-Progress-bar {
    background: linear-gradient(90deg, #228be6, #20c997) !important;
    animation: progressGlow 2s ease-in-out infinite alternate !important;
}

@keyframes progressGlow {
    from {
        box-shadow: 0 0 5px rgba(34, 139, 230, 0.5);
    }
    to {
        box-shadow: 0 0 20px rgba(34, 139, 230, 0.8);
    }
}

/* =================== Scroll Personalizado ======================= */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #228be6, #20c997);
    border-radius: 10px;
    transition: all 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #1c7ed6, #18a05e);
    box-shadow: 0 0 10px rgba(34, 139, 230, 0.5);
}

/* =================== Loading States ======================= */
.loading-shimmer {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

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

/* =================== Micro-animações para ícones ======================= */
.dash-iconify {
    transition: all var(--animation-duration) var(--animation-easing) !important;
}

.nav-item:hover .dash-iconify {
    transform: scale(1.1) rotate(5deg) !important;
    filter: drop-shadow(0 2px 4px rgba(34, 139, 230, 0.3)) !important;
}

/* =================== Utility Classes ======================= */
.hover-lift {
    transition: transform var(--animation-duration) var(--animation-easing);
}

.hover-lift:hover {
    transform: translateY(-3px);
}

.hover-scale {
    transition: transform var(--animation-duration) var(--animation-easing);
}

.hover-scale:hover {
    transform: scale(1.05);
}

.smooth-border {
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    transition: all var(--animation-duration) var(--animation-easing);
}

.smooth-border:hover {
    border-color: rgba(34, 139, 230, 0.3);
    box-shadow: 0 4px 12px rgba(34, 139, 230, 0.15);
}

/* =================== Responsividade Moderna ======================= */
@media (max-width: 768px) {
    .card {
        padding: var(--spacing-md);
        margin: var(--spacing-sm);
    }
    
    .nav-item:hover {
        transform: translateX(3px) !important;
    }
    
    .modern-button {
        width: 100%;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}