/* css/responsive.css */
/* Otimizações de Responsividade para Telas Pequenas (Notebooks) */
/* Data: 2025-12-12 */

/* ==========================================================================
   PROBLEMA: Sistema fica muito apertado em resoluções de notebook (1366x768, 1440x900)
   SOLUÇÃO: Otimizar espaços horizontais sem afetar estrutura das tabelas
   ========================================================================== */

/* ==========================================================================
   BREAKPOINTS
   ========================================================================== */
/*
   - xl: >= 1536px (Desktop grande) - NORMAL
   - lg: >= 1280px (Desktop pequeno / Notebook grande) - OTIMIZADO
   - md: >= 1024px (Tablets landscape / Notebooks pequenos) - COMPACTO
   - sm: >= 768px (Tablets portrait) - MUITO COMPACTO
   - xs: < 768px (Mobile) - MOBILE
*/

/* ==========================================================================
   TELAS MÉDIAS/GRANDES (1280px - 1535px)
   Notebooks comuns: 1366x768, 1440x900
   ========================================================================== */
@media (min-width: 1280px) and (max-width: 1535px) {
  /* --- SIDEBAR: Reduz de 224px (w-56) para 180px --- */
  #sidebar {
    width: 180px !important;
  }

  /* Ajusta textos da sidebar */
  #sidebar nav a {
    font-size: 0.8125rem; /* 13px ao invés de 14px */
    padding: 0.5rem 0.65rem !important;
  }

  .sidebar-brand-container {
    height: 56px !important;
    padding: 0 12px !important;
    gap: 8px !important;
  }

  .brand-icon {
    width: 32px !important;
    height: 32px !important;
  }

  .brand-icon .lucide {
    width: 16px !important;
    height: 16px !important;
  }

  .brand-name {
    font-size: 0.875rem !important;
  }

  .brand-slogan {
    font-size: 0.55rem !important;
  }

  /* --- MÓDULO GPS: Reduz paddings --- */
  #module-gps .widget-card {
    padding: 0.875rem !important; /* 14px ao invés de padrão */
  }

  #module-gps .widget-header {
    padding: 0.75rem 0.875rem !important;
  }

  #module-gps .widget-body {
    padding: 0.875rem !important;
  }

  /* Reduz espaçamento entre cards */
  #module-gps > div {
    gap: 0.875rem !important;
  }

  /* --- GPS: Botões e Inputs --- */
  #module-gps .btn-primary,
  #module-gps .btn-secondary,
  #module-gps button {
    padding: 0.45rem 0.875rem !important;
    font-size: 0.8125rem !important;
  }

  #module-gps input[type="text"],
  #module-gps select {
    padding: 0.45rem 0.75rem !important;
    font-size: 0.8125rem !important;
  }

  /* --- GPS: KPI Cards (Progresso, Desempenho, etc) --- */
  .kpi-card {
    padding: 0.65rem !important;
  }

  .kpi-card-title {
    font-size: 0.7rem !important;
  }

  .kpi-card-value {
    font-size: 1.125rem !important; /* 18px ao invés de 20px+ */
  }

  /* --- GPS: Missão Atual --- */
  #gps-current-mission-container {
    padding: 0.875rem !important;
  }

  #gps-current-mission-container h3 {
    font-size: 0.95rem !important;
  }

  /* --- Painel Direito (Progresso) --- */
  #module-gps aside .widget-card {
    padding: 0.75rem !important;
  }
}

/* ==========================================================================
   TELAS PEQUENAS (1024px - 1279px)
   Notebooks pequenos, tablets landscape
   ========================================================================== */
@media (min-width: 1024px) and (max-width: 1279px) {
  /* --- SIDEBAR: Reduz para 160px --- */
  #sidebar {
    width: 160px !important;
  }

  #sidebar nav a {
    font-size: 0.75rem; /* 12px */
    padding: 0.45rem 0.5rem !important;
    gap: 0.5rem !important;
  }

  #sidebar nav a span[data-lucide] {
    width: 1rem !important;
    height: 1rem !important;
  }

  .sidebar-brand-container {
    height: 48px !important;
    padding: 0 8px !important;
    gap: 6px !important;
  }

  .brand-icon {
    width: 28px !important;
    height: 28px !important;
  }

  .brand-name {
    font-size: 0.8rem !important;
  }

  .brand-slogan {
    display: none !important;
  }

  /* --- MÓDULO GPS: Modo Compacto --- */
  #module-gps .widget-card {
    padding: 0.75rem !important;
  }

  #module-gps .widget-header {
    padding: 0.625rem 0.75rem !important;
  }

  #module-gps .widget-body {
    padding: 0.75rem !important;
  }

  #module-gps .widget-title {
    font-size: 0.9rem !important;
  }

  /* Reduz ainda mais espaçamento entre cards */
  #module-gps > div {
    gap: 0.75rem !important;
  }

  /* --- GPS: Botões menores --- */
  #module-gps .btn-primary,
  #module-gps .btn-secondary,
  #module-gps button {
    padding: 0.4rem 0.75rem !important;
    font-size: 0.75rem !important;
  }

  #module-gps input[type="text"],
  #module-gps select {
    padding: 0.4rem 0.625rem !important;
    font-size: 0.75rem !important;
  }

  /* --- GPS: KPI Cards ainda menores --- */
  .kpi-card {
    padding: 0.5rem !important;
  }

  .kpi-card-title {
    font-size: 0.65rem !important;
  }

  .kpi-card-value {
    font-size: 1rem !important;
  }

  .kpi-card-icon {
    width: 2rem !important;
    height: 2rem !important;
  }

  .kpi-card-icon span[data-lucide] {
    width: 1.125rem !important;
    height: 1.125rem !important;
  }

  /* --- Painel Direito --- */
  #module-gps aside {
    min-width: 240px !important; /* Reduz de ~280px */
  }

  #module-gps aside .widget-card {
    padding: 0.625rem !important;
  }
}

/* ==========================================================================
   TELAS MUITO PEQUENAS (768px - 1023px)
   Tablets portrait, notebooks muito pequenos
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1023px) {
  /* --- SIDEBAR: Colapsa por padrão em telas pequenas --- */
  #sidebar {
    width: 60px !important; /* Apenas ícones */
  }

  #sidebar.expanded {
    width: 200px !important;
  }

  /* Esconde textos quando colapsada */
  #sidebar:not(.expanded) nav a > span:not([data-lucide]) {
    display: none;
  }

  #sidebar:not(.expanded) .sidebar-brand-container {
    padding: 0 !important;
    justify-content: center !important;
  }

  #sidebar:not(.expanded) .brand-info {
    display: none !important;
  }

  /* --- MÓDULO GPS: Layout de coluna única para KPIs --- */
  #module-gps .grid {
    grid-template-columns: repeat(2, 1fr) !important; /* 2 colunas ao invés de 4 */
  }

  #module-gps .widget-card {
    padding: 0.625rem !important;
  }

  #module-gps .widget-title {
    font-size: 0.85rem !important;
  }

  /* Remove painel direito em telas muito pequenas */
  #module-gps > div.grid.grid-cols-1.lg\\:grid-cols-\\[1fr_auto\\] {
    grid-template-columns: 1fr !important;
  }

  #module-gps aside {
    display: none !important;
  }
}

/* ==========================================================================
   MOBILE (< 768px) - REVOLUÇÃO UX "APP NATIVE"
   ========================================================================== */
@media (max-width: 767px) {
  /* Sidebar clássica escondida permanentemente (substituída pela Bottom Nav) */
  #sidebar {
    display: none !important;
  }

  /* Main content ganha espaço no rodapé para não ficar sob a Bottom Nav */
  main#main-content {
    margin-left: 0 !important;
    padding-bottom: 70px !important; /* Altura da navbar mobile */
  }

  /* Header principal (Topo) - Ajuste de botões */
  header #sidebar-toggle-btn {
    display: none !important; /* Esconde hamburguer menu antigo */
  }

  header {
    height: 3.5rem !important; /* Header mais fino */
    padding: 0.5rem 1rem !important;
  }
  
  /* GPS: 1 coluna para KPIs */
  #module-gps .grid {
    grid-template-columns: 1fr !important;
  }

  /* GPS: Remove painel direito */
  #module-gps aside {
    display: none !important;
  }

  /* Exibe a Dropnav bottom bar em telas Mobile */
  nav#mobile-bottom-nav {
      display: flex !important;
      padding-bottom: env(safe-area-inset-bottom, 8px) !important;
  }

  /* Botão ativo na barra inferior */
  .mobile-nav-item.active {
      color: #2edb7f !important;
  }
  
  .mobile-nav-item.active span[data-lucide] {
      color: #2edb7f !important;
      fill: rgba(46, 219, 127, 0.2);
  }

  /* Ajustes gerais de Modal / Overlay no Mobile */
  .modal-overlay {
      align-items: flex-end !important; /* Em vez de center, abre embaixo */
      padding: 0 !important;
  }

  /* Widgets ocupam 100% no mobile sem padding lateral excessivo */
  #page-content {
      padding: 1rem 0.5rem !important;
  }

  /* Tabela ganha barra de rolagem horizontal nativa suave */
  .overflow-x-auto {
      -webkit-overflow-scrolling: touch;
      margin-left: -0.5rem;
      margin-right: -0.5rem;
      padding-left: 0.5rem;
      padding-right: 0.5rem;
  }
}

/* ==========================================================================
   OTIMIZAÇÕES GERAIS (Todos os tamanhos)
   ========================================================================== */

/* Reduz height do header quando em telas menores */
@media (max-width: 1535px) {
  #sidebar > div:first-child {
    height: 3.5rem !important; /* 56px ao invés de 64px */
  }

  /* Header do usuário (se existir) */
  header {
    padding: 0.75rem 1rem !important;
  }
}

/* Ajusta scrollbars customizadas para serem mais finas */
@media (max-width: 1535px) {
  .custom-scrollbar::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important;
  }

  .custom-scrollbar::-webkit-scrollbar-thumb {
    border-radius: 3px !important;
  }
}

/* ==========================================================================
   GPS: AJUSTES FINOS NA TABELA (SEM AFETAR ESTRUTURA)
   ========================================================================== */
@media (max-width: 1535px) {
  /* Reduz padding das células levemente */
  #gps-tracking-table th,
  #gps-tracking-table td {
    padding: 0.6rem 0.4rem !important;
  }

  /* Fontes ligeiramente menores */
  #gps-tracking-table th {
    font-size: 0.7rem !important;
  }

  #gps-tracking-table td {
    font-size: 0.75rem !important;
  }

  /* Badges de status menores */
  .status-badge {
    padding: 0.125rem 0.4rem !important;
    font-size: 0.6rem !important;
  }

  .status-badge span[data-lucide] {
    width: 0.7rem !important;
    height: 0.7rem !important;
  }

  /* Botões de ação menores */
  #gps-tracking-table button {
    padding: 0.35rem !important;
  }

  #gps-tracking-table button span[data-lucide] {
    width: 0.875rem !important;
    height: 0.875rem !important;
  }

  /* Estrelas de relevância menores */
  .gps-star-btn {
    font-size: 0.8rem !important;
  }
}

@media (max-width: 1279px) {
  /* Em telas muito pequenas, reduz ainda mais */
  #gps-tracking-table th,
  #gps-tracking-table td {
    padding: 0.5rem 0.35rem !important;
  }

  #gps-tracking-table th {
    font-size: 0.65rem !important;
  }

  #gps-tracking-table td {
    font-size: 0.7rem !important;
  }
}

/* ==========================================================================
   UTILIDADES
   ========================================================================== */

/* Classe helper para esconder elementos em telas pequenas */
.hide-on-small-screens {
  @media (max-width: 1279px) {
    display: none !important;
  }
}

/* Classe helper para mostrar apenas em telas pequenas */
.show-on-small-screens-only {
  display: none !important;
  @media (max-width: 1279px) {
    display: block !important;
  }
}

/* ==========================================================================
   SIDEBAR COLAPSÁVEL - Funcionalidade de Toggle
   ========================================================================== */

/* Sidebar colapsada - apenas ícones (70px) */
#sidebar.collapsed {
  width: 70px !important;
}

/* Esconde textos quando colapsada */
#sidebar.collapsed .sidebar-text {
  display: none !important;
}

/* Centraliza ícones quando colapsada */
#sidebar.collapsed nav a {
  justify-content: center !important;
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
}

/* Ajusta logo quando colapsada */
/* Ajusta logo quando colapsada */
#sidebar.collapsed .sidebar-brand-container {
  padding: 0 !important;
  justify-content: center !important;
}

#sidebar.collapsed .brand-info {
  display: none !important;
}

/* Ajusta header quando colapsada */
#sidebar.collapsed > div:first-child {
  justify-content: center !important;
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}

/* Muda ícone do botão quando colapsada */
#sidebar.collapsed #sidebar-toggle-btn span[data-lucide] {
  /* Será alterado via JavaScript para "panel-left-open" */
}

/* Ajusta ghost mode quando colapsada */
#sidebar.collapsed #ghost-mode-container {
  padding: 0.5rem !important;
}

#sidebar.collapsed #ghost-mode-container p {
  display: none !important;
}

#sidebar.collapsed #ghost-mode-container button {
  padding: 0.5rem !important;
}

#sidebar.collapsed #ghost-mode-container button span:not([data-lucide]) {
  display: none !important;
}

/* Tooltip nos ícones quando sidebar colapsada */
#sidebar.collapsed nav a {
  position: relative;
}

#sidebar.collapsed nav a:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.9);
  color: white;
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  white-space: nowrap;
  margin-left: 0.5rem;
  z-index: 1000;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  pointer-events: none;
}

/* Transições suaves */
#sidebar {
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#sidebar .sidebar-text {
  transition: opacity 0.2s ease-in-out;
}

#sidebar.collapsed .sidebar-text {
  opacity: 0;
}

/* Ajusta padding do nav quando colapsado */
#sidebar.collapsed nav {
  padding-left: 0.25rem !important;
  padding-right: 0.25rem !important;
}

#sidebar.collapsed nav li a {
  padding: 0.75rem !important;
}

/* ==========================================================================
   FIM DAS OTIMIZAÇÕES
   ========================================================================== */