/**
 * =============================================================================
 * MOBILE FOOTER MENU COMPONENT - FLOATING DESIGN
 * =============================================================================
 * 
 * Componente de menu inferior flutuante para dispositivos móveis.
 * Design inspirado em aplicativos modernos com bordas arredondadas e efeito de flutuação.
 * 
 * CARACTERÍSTICAS:
 * • Design flutuante com margens laterais e inferior
 * • Bordas completamente arredondadas (20px)
 * • Sombra dupla para efeito de profundidade
 * • Suporte completo a temas claro e escuro
 * • Sistema de notificações com badges animados
 * • Responsivo para diferentes tamanhos de tela
 * • Animações suaves de entrada e interação
 * 
 * NAVEGAÇÃO:
 * • Menu Sidebar - Abre/fecha o menu lateral
 * • Dashboard - Navega para o painel principal
 * • Rotas Meli - Acesso às rotas do Mercado Livre
 * • Veículos - Gerenciamento de veículos
 * 
 * VERSÃO: 2.0 - Design Flutuante
 * ATUALIZAÇÃO: Dezembro 2024
 * =============================================================================
 */

/* Mobile Footer Menu Component */
.mobile-footer-menu {
  /* === PROTEÇÃO CONTRA TEMA DO SO === */
  color-scheme: light; /* Força o esquema de cores claro, ignorando o SO */
  
  /* === POSICIONAMENTO E LAYOUT === */
  position: fixed;
  bottom: 34px; /* Margem inferior para efeito flutuante - AUMENTADA para maior destaque */
  left: 34px;   /* Margem lateral esquerda - AUMENTADA para maior destaque */
  right: 34px;  /* Margem lateral direita - AUMENTADA para maior destaque */
  z-index: 1000; /* Alto z-index para ficar sobre outros elementos */
  
  /* === VISUAL E ESTILO === */
  background: linear-gradient(135deg, #FFC82E 0%, #FFD700 100%) !important; /* !important para evitar override */
  box-shadow: 
    0 -4px 20px rgba(0, 0, 0, 0.15),  /* Sombra superior suave */
    0 8px 32px rgba(0, 0, 0, 0.1);    /* Sombra inferior para flutuação */
  border: 1px solid rgba(255, 255, 255, 0.2); /* Borda sutil para definição */
  border-radius: 20px; /* Bordas arredondadas (reduzido 16%) */
  backdrop-filter: blur(10px); /* Efeito de blur no fundo */
  
  /* === ANIMAÇÕES DE ENTRADA === */
  /* Estado inicial: escondido abaixo da tela */
  transform: translateY(calc(100% + 50px)); /* Ajustado para considerar a margem maior (34px + buffer) */
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Transição suave */
  
  /* Estado visível: posição normal */
  &.visible {
    transform: translateY(0);
  }
  
  /* === RESPONSIVIDADE === */
  /* Mostrar apenas em dispositivos móveis (tablets e smartphones) */
  @media (max-width: 768px) {
    &.visible {
      transform: translateY(0);
    }
  }
  
  /* Esconder completamente em desktop */
  @media (min-width: 769px) {
    display: none;
  }
}

/**
 * CONTAINER DOS ITENS DO MENU
 * Organiza os botões em linha com espaçamento uniforme
 */
.menu-container {
  display: flex;
  justify-content: space-around; /* Distribui igualmente o espaço */
  align-items: center;
  padding: 10px 14px; /* Padding interno reduzido (16% menor) */
  max-width: 100%;
  position: relative;
  z-index: 2; /* Fica acima do background decorativo */
}

/**
 * ITENS INDIVIDUAIS DO MENU
 * Cada botão do menu com ícone e label
 */
.menu-item {
  /* === LAYOUT === */
  display: flex;
  flex-direction: column; /* Ícone em cima, texto embaixo */
  align-items: center;
  justify-content: center;
  
  /* === ESTILO BÁSICO === */
  background: transparent;
  border: none;
  color: #000000 !important; /* Força cor preta, ignora tema do SO */
  cursor: pointer;
  
  /* === DIMENSÕES === */
  padding: 10px 7px; /* Espaçamento interno reduzido (16% menor) */
  border-radius: 10px; /* Bordas arredondadas reduzidas (16% menor) */
  min-width: 54px; /* Largura mínima reduzida (10% menor) */
  max-width: 72px; /* Largura máxima reduzida (10% menor) */
  
  /* === ANIMAÇÕES === */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative; /* Para posicionamento de badges */
  
  /* === ESTADOS DE INTERAÇÃO === */
  &:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px); /* Leve elevação */
    color: #000000 !important; /* Força cor preta no hover */
  }
  
  &:active {
    transform: translateY(0); /* Retorna à posição normal */
    background: rgba(255, 255, 255, 0.3);
  }
  
  &:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.2);
  }

  /* === ESTADO ATIVO (para sidebar aberta) === */
  &.active {
    background: rgba(255, 255, 255, 0.3);
    color: #000000 !important; /* Força cor preta no estado ativo */
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    
    .menu-icon i {
      color: #333333 !important; /* Força cor escura para ícones ativos */
      transform: scale(1.1); /* Ícone ligeiramente maior */
    }
    
    .menu-label {
      font-weight: 700; /* Texto em negrito */
      color: #000000 !important; /* Força cor preta para labels ativos */
    }
  }
}

/**
 * ÍCONES DOS ITENS DO MENU
 * Ícones FontAwesome com animações
 */
.menu-icon {
  font-size: 21px; /* Tamanho reduzido (12.5% menor) */
  margin-bottom: 3px; /* Espaço entre ícone e texto reduzido (25% menor) */
  transition: transform 0.2s ease;
  
  i {
    display: block;
    line-height: 1;
  }
  
  /* Animação de hover */
  .menu-item:hover & {
    transform: scale(1.1);
  }
}

/**
 * LABELS DOS ITENS DO MENU
 * Texto descritivo abaixo dos ícones
 */
.menu-label {
  font-size: 9px; /* Tamanho reduzido (10% menor) */
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
  letter-spacing: 0.5px;
  text-transform: uppercase; /* Texto em maiúsculas */
  color: #000000 !important; /* Força cor preta, ignora tema do SO */
}

/* === ESTILOS ESPECÍFICOS PARA CADA BOTÃO === */
.sidebar-btn {
  .menu-icon i {
    color: #000000 !important; /* Força cor preta, ignora tema do SO */
  }
  
  &:hover {
    .menu-icon i {
      color: #333333 !important; /* Força cor escura no hover */
    }
  }
}

.dashboard-btn {
  .menu-icon i {
    color: #000000 !important; /* Força cor preta, ignora tema do SO */
  }
  
  &:hover {
    .menu-icon i {
      color: #333333 !important; /* Força cor escura no hover */
    }
  }
}

.drivers-btn {
  .menu-icon i {
    color: #000000 !important; /* Força cor preta, ignora tema do SO */
  }
  
  &:hover {
    .menu-icon i {
      color: #333333 !important; /* Força cor escura no hover */
    }
  }
}

.vehicles-btn {
  .menu-icon i {
    color: #000000 !important; /* Força cor preta, ignora tema do SO */
  }
  
  &:hover {
    .menu-icon i {
      color: #333333 !important; /* Força cor escura no hover */
    }
  }
}

/**
 * BADGE DE NOTIFICAÇÃO
 * Indicador visual de notificações pendentes
 */
.notification-badge {
  /* === POSICIONAMENTO === */
  position: absolute;
  top: 7px; /* Posição reduzida */
  right: 7px; /* Posição reduzida */
  
  /* === ESTILO === */
  background: #FF4444; /* Vermelho para chamar atenção */
  color: white;
  font-size: 9px; /* Tamanho reduzido (10% menor) */
  font-weight: bold;
  
  /* === DIMENSÕES === */
  padding: 2px 5px; /* Padding reduzido */
  border-radius: 9px; /* Bordas reduzidas (10% menor) */
  min-width: 16px; /* Largura reduzida (11% menor) */
  height: 16px; /* Altura reduzida (11% menor) */
  
  /* === LAYOUT === */
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* === EFEITOS === */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  animation: pulse 2s infinite; /* Animação de pulsação */
}

/**
 * ANIMAÇÃO DE PULSAÇÃO PARA BADGES
 * Chama atenção para notificações
 */
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

/**
 * BACKGROUND DECORATIVO
 * Camada de fundo com gradiente e efeitos
 */
.menu-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  
  /* === GRADIENTE PRINCIPAL === */
  background: linear-gradient(135deg, 
    rgba(255, 200, 46, 0.9) 0%, 
    rgba(255, 215, 0, 0.9) 50%, 
    rgba(255, 200, 46, 0.9) 100%) !important; /* !important para evitar override do SO */
  border-radius: 20px; /* Bordas arredondadas para combinar */
  z-index: 1; /* Atrás dos itens do menu */
  
  /* === LINHA DECORATIVA SUPERIOR === */
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, 
      transparent 0%, 
      rgba(255, 255, 255, 0.5) 50%, 
      transparent 100%);
    border-radius: 20px 20px 0 0; /* Apenas bordas superiores */
  }
}

/**
 * ANIMAÇÃO DE ENTRADA
 * Animação suave quando o menu aparece
 */
@keyframes slideUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.mobile-footer-menu.visible {
  animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/**
 * =============================================================================
 * SUPORTE PARA TEMA ESCURO DA APLICAÇÃO
 * =============================================================================
 * Apenas o tema da aplicação deve afetar o footer, não o tema do sistema operacional
 */
:host-context(.dark-theme) .mobile-footer-menu {
  /* === PROTEÇÃO CONTRA TEMA DO SO NO MODO ESCURO === */
  color-scheme: dark; /* Mantém esquema escuro apenas para o tema da aplicação */
  
  /* === BACKGROUND TEMA ESCURO DA APLICAÇÃO === */
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
  border: 1px solid rgba(255, 200, 46, 0.3); /* Borda amarelada */
  /* Sombra mais intensa para contraste */
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3), 0 8px 32px rgba(0, 0, 0, 0.2);
}

/* === ITENS DO MENU NO TEMA ESCURO DA APLICAÇÃO === */
:host-context(.dark-theme) .menu-item {
  color: #FFC82E; /* Texto amarelo para contraste */
  
  &:hover {
    background: rgba(255, 200, 46, 0.1); /* Hover mais sutil */
    color: #FFD700; /* Cor dourada no hover */
  }
}

/* === BACKGROUND DECORATIVO TEMA ESCURO DA APLICAÇÃO === */
:host-context(.dark-theme) .menu-background {
  background: linear-gradient(135deg, 
    rgba(26, 26, 26, 0.95) 0%, 
    rgba(45, 45, 45, 0.95) 50%, 
    rgba(26, 26, 26, 0.95) 100%);
  border-radius: 20px;
    
  &::before {
    background: linear-gradient(90deg, 
      transparent 0%, 
      rgba(255, 200, 46, 0.3) 50%, 
      transparent 100%);
    border-radius: 20px 20px 0 0;
  }
}

/**
 * =============================================================================
 * RESPONSIVIDADE PARA DIFERENTES TAMANHOS DE TELA
 * =============================================================================
 */

/**
 * TELAS MUITO PEQUENAS (≤ 360px)
 * Smartphones com telas menores
 */
@media (max-width: 360px) {
  .mobile-footer-menu {
    left: 10px;   /* Margem menor reduzida (16% menor) */
    right: 10px;
    bottom: 10px; /* Margem inferior menor reduzida (16% menor) */
  }
  
  .menu-container {
    padding: 7px 10px; /* Padding muito reduzido (12.5% menor) */
  }
  
  .menu-item {
    padding: 7px 3px; /* Padding dos itens reduzido */
    min-width: 45px; /* Largura mínima reduzida (10% menor) */
  }
  
  .menu-icon {
    font-size: 18px; /* Ícones menores reduzidos (10% menor) */
  }
  
  .menu-label {
    font-size: 8px; /* Texto menor reduzido (11% menor) */
  }
}

/**
 * TELAS MÉDIAS (361px - 480px)
 * Smartphones padrão
 */
@media (min-width: 361px) and (max-width: 480px) {
  .menu-container {
    padding: 9px 11px; /* Padding intermediário reduzido (8-10% menor) */
  }
  
  .menu-item {
    padding: 9px 5px; /* Padding dos itens reduzido (10-16% menor) */
    min-width: 58px; /* Largura mínima reduzida (10% menor) */
  }
}

/**
 * EFEITO RIPPLE PERSONALIZADO
 * Animação de toque estilo Material Design
 */
.menu-item {
  overflow: hidden;
  position: relative;
  
  /* === EFEITO RIPPLE === */
  &::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.3s, height 0.3s;
  }
  
  /* Ativação do ripple no toque */
  &:active::after {
    width: 120px;
    height: 120px;
  }
}

/**
 * =============================================================================
 * FIM DA DOCUMENTAÇÃO
 * =============================================================================
 */ 