/* ===========================================
   MENU STYLES - Assembleia Legislativa do Paraná
   =========================================== */

/* ===========================================
   MENU DESKTOP
   =========================================== */

.menu-item {
    position: relative;
}

.menu-button {
    cursor: pointer;
    font-weight: 500;
    font-size: 0.95rem;
    position: relative;
}

.menu-button:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* Indicador visual de que tem submenu */
.menu-button[data-menu]::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background-color: #3b82f6;
    transition: width 0.2s ease;
}

.menu-button[data-menu]:hover::after,
.menu-button[data-menu].active::after {
    width: 80%;
}

/* ===========================================
   SUBMENU DESKTOP
   =========================================== */

.submenu {
    min-width: 200px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 0, 0, 0.1);
    pointer-events: none; /* Impede captura de eventos quando oculto */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease-in-out;
}

.submenu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto; /* Permite eventos quando visível */
}

/* Área de tolerância para hover */
.menu-item::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 10px; /* Área de tolerância de 10px */
    background: transparent;
    pointer-events: none;
    z-index: 49;
}

.menu-item:hover::after {
    pointer-events: auto;
}

/* Delay para fechar submenu (evitar fechamento acidental) */
.menu-item:hover .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    transition-delay: 0ms; /* Mostrar imediatamente */
}

.menu-item:not(:hover) .submenu {
    transition-delay: 150ms; /* Delay para fechar */
}

/* Links do submenu desktop */
.submenu a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    text-decoration: none;
    border-radius: 4px;
    margin: 0 4px;
    padding: 8px 12px;
    min-height: 36px; /* Altura mínima consistente */
}

/* Para links sem ícone, manter apenas o texto alinhado à esquerda */
.submenu a:not([target="_blank"]) {
    justify-content: flex-start;
}

.submenu a:first-child {
    margin-top: 4px;
}

.submenu a:last-child {
    margin-bottom: 4px;
}

.submenu a:hover {
    background-color: #f8fafc;
}

/* Ícone de link externo deve ter espaçamento adequado */
.submenu a .bi-box-arrow-up-right {
    margin-left: 8px;
    flex-shrink: 0; /* Não deve encolher */
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.submenu a:hover .bi-box-arrow-up-right,
.submenu a:focus .bi-box-arrow-up-right {
    opacity: 1;
}

/* Ícone de chevron rotacionado */
.menu-button.active i,
.mobile-menu-button.active i {
    transform: rotate(180deg);
}

/* ===========================================
   MENU MOBILE
   =========================================== */

.mobile-menu-content {
    background-color: #ffffff;
}

.mobile-menu {
    background-color: rgba(0, 0, 0, 0.5);
}

.mobile-menu-item {
    border-bottom: 1px solid #f1f5f9;
    margin-bottom: 4px;
}

.mobile-menu-item:last-child {
    border-bottom: none;
}

.mobile-menu-button {
    cursor: pointer;
    font-weight: 500;
}

.mobile-menu-button:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* ===========================================
   SUBMENU MOBILE
   =========================================== */

.mobile-submenu {
    transition: max-height 0.3s ease-in-out, opacity 0.2s ease;
    background-color: #f8fafc;
    border-radius: 8px;
}

.mobile-submenu.show {
    margin-top: 8px;
    max-height: 500px !important;
    opacity: 1;
}

.mobile-submenu:not(.show) {
    opacity: 0.7;
}

/* Links do submenu mobile */
.mobile-submenu a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    text-decoration: none;
    font-weight: 400;
    padding: 8px 12px;
    border-radius: 6px;
    margin: 2px 0;
}

/* Para links mobile sem ícone */
.mobile-submenu a:not([target="_blank"]) {
    justify-content: flex-start;
}

/* Ícone de link externo mobile */
.mobile-submenu a .bi-box-arrow-up-right {
    margin-left: 8px;
    flex-shrink: 0;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.mobile-submenu a:hover .bi-box-arrow-up-right,
.mobile-submenu a:focus .bi-box-arrow-up-right {
    opacity: 1;
}

.mobile-submenu a::before {
    color: #64748b;
    font-size: 0.8em;
    position: absolute;
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
}

/* ===========================================
   DARK MODE PARA MENUS
   =========================================== */

/* Desktop Dark Mode - Sobrescrever classes específicas do Tailwind */
.dark-mode .menu-button {
    color: white !important;
}

.dark-mode .menu-button:hover,
.dark-mode .menu-button.hover\:bg-gray-100:hover {
    background-color: #374151 !important;
}

.dark-mode .menu-button[data-menu]::after {
    background-color: #60a5fa;
}

.dark-mode .submenu,
.dark-mode .submenu.bg-white {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
    backdrop-filter: blur(10px);
}

.dark-mode .submenu a,
.dark-mode .submenu a.text-gray-700 {
    color: #e5e7eb !important;
}

.dark-mode .submenu a:hover,
.dark-mode .submenu a.hover\:bg-gray-100:hover {
    background-color: #374151 !important;
    color: white !important;
}

/* Botão Transparência desktop */
.dark-mode a.bg-secondary {
    background-color: #1e7e34 !important;
}

.dark-mode a.bg-secondary:hover,
.dark-mode a.hover\:bg-green-700:hover {
    background-color: #166534 !important;
}

/* Mobile Dark Mode - Sobrescrever classes específicas do Tailwind */
.dark-mode .mobile-menu-content,
.dark-mode .mobile-menu-content.bg-white {
    background-color: #1f2937 !important;
}

.dark-mode .mobile-menu-button {
    color: #e5e7eb !important;
}

.dark-mode .mobile-menu-button:hover,
.dark-mode .mobile-menu-button.hover\:bg-gray-100:hover {
    background-color: #374151 !important;
}

.dark-mode .mobile-submenu,
.dark-mode .mobile-submenu.bg-gray-50 {
    background-color: #111827 !important;
}

.dark-mode .mobile-submenu a,
.dark-mode .mobile-submenu a.text-gray-600 {
    color: #d1d5db !important;
}

.dark-mode .bg-blue-100:not(.nomenucss) {
    background-color: #2d2f33 ;
}

.dark-mode .mobile-submenu a:hover,
.dark-mode .mobile-submenu a.hover\:text-gray-900:hover,
.dark-mode .mobile-submenu a.hover\:bg-gray-50:hover {
    background-color: #1f2937 !important;
    color: #f3f4f6 !important;
}

.dark-mode .hover\:bg-gray-50:hover {
    background-color: #1f2937 !important;
    color: #f3f4f6 !important;
}

.dark-mode .mobile-menu-item {
    border-bottom-color: #374151 !important;
}

/* Sobrescrever classes específicas do cabeçalho do menu mobile */
.dark-mode #mobile-menu .p-4.border-b.border-gray-200 {
    border-bottom-color: #374151 !important;
}

.dark-mode #mobile-menu .text-lg.font-semibold {
    color: #f9fafb !important;
}

.dark-mode #mobile-menu .mobile-menu-close:hover,
.dark-mode #mobile-menu .mobile-menu-close.hover\:bg-gray-100:hover {
    background-color: #374151 !important;
}

.dark-mode #mobile-menu .mobile-menu-close i {
    color: #e5e7eb !important;
}

/* Botão Transparência no menu mobile */
.dark-mode #mobile-menu a.bg-secondary {
    background-color: #1e7e34 !important;
}

.dark-mode #mobile-menu a.bg-secondary:hover,
.dark-mode #mobile-menu a.hover\:bg-green-700:hover {
    background-color: #166534 !important;
}

/* Ícones de link externo em dark mode */
.dark-mode .bi-box-arrow-up-right {
    color: #9ca3af !important;
}

/* ===========================================
   UTILITY CLASSES PARA DARK MODE DOS MENUS
   =========================================== */

/* Classes gerais para bordas e divisores */
.dark-mode .border-gray-200,
.dark-mode .border-gray-300 {
    border-color: #374151 !important;
}

/* Sobrescrever shadow em dark mode */
.dark-mode .shadow-lg,
.dark-mode .shadow-xl {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.2) !important;
}

/* Garantir que textos pequenos também mudem de cor */
.dark-mode .text-sm:not(.nomenucss) {
    color: #d7d7d7 !important;
}

/* Classe específica para ícones no menu */
.dark-mode .bi {
    color: inherit !important;
}

/* Garantir que links externos tenham a cor correta */
.dark-mode .text-gray-400 {
    color: #9ca3af !important;
}

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

/* Animação suave para o chevron */
.bi-chevron-down {
    transition: transform 0.2s ease-in-out;
}

/* Animação de entrada do submenu */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.submenu.show {
    animation: slideDown 0.2s ease-out;
}

/* Animação para mobile submenu */
@keyframes expandHeight {
    from {
        max-height: 0;
        opacity: 0;
    }
    to {
        max-height: 500px;
        opacity: 1;
    }
}

/* ===========================================
   HOVER EFFECTS PARA MENUS
   =========================================== */

.menu-button:hover,
.mobile-menu-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Focus states melhorados para menus */
.submenu a:focus,
.mobile-submenu a:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
    background-color: #eff6ff;
}

.dark-mode .submenu a:focus,
.dark-mode .mobile-submenu a:focus {
    background-color: #1e40af;
    outline-color: #60a5fa;
}

/* Navegação por teclado mais suave */
.submenu a:focus-visible {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* ===========================================
   RESPONSIVIDADE PARA MENUS
   =========================================== */

@media (max-width: 768px) {
    .mobile-menu-content {
        max-height: 100vh;
    }
}

/* ===========================================
   MOTION REDUCED PARA MENUS
   =========================================== */

/* Melhorar acessibilidade com motion-reduced */
@media (prefers-reduced-motion: reduce) {
    .menu-button i,
    .mobile-menu-button i,
    .submenu,
    .mobile-submenu,
    .menu-button[data-menu]::after,
    .bi-chevron-down {
        transition: none;
        animation: none;
    }
    
    .menu-button:hover,
    .mobile-menu-button:hover {
        transform: none;
        box-shadow: none;
    }
    
    @keyframes slideDown {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    
    @keyframes expandHeight {
        from { opacity: 0; }
        to { opacity: 1; }
    }
}