/* Regras globais leves para layout e rodapé */
html, body { max-width: 100%; }
/* Muitas páginas usam .page-content como coluna flex: garante que o footer vá ao fim */
.page-content { min-width: 0; }
.page-content .site-footer { margin-top: auto; }

/* CSS responsivo global — afeta somente telas pequenas */

/* Quebra ampla: tablets/pequenos desktops */
@media (max-width: 1024px) {
  .main-content { padding: 1rem; }
  .header-content.header-with-logo { 
    display: grid; 
    grid-template-columns: 1fr; 
    row-gap: .75rem; 
    text-align: center; 
  }
  .header-left { justify-content: center; }
  .header-actions { justify-content: center; flex-wrap: wrap; }
  .cards-container { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
}

/* Mobile padrão */
@media (max-width: 768px) {
  html, body { max-width: 100%; overflow-x: hidden; }

  /* Sidebar empilhada e rolável horizontalmente */
  .sidebar { 
    position: relative !important; 
    width: 100% !important; 
    border-right: none !important; 
  }
  .sidebar:hover { width: 100% !important; }
  .sidebar-header { justify-content: flex-start; padding: 0 .5rem; }

  .menu-links { 
    flex-direction: row !important; 
    gap: .25rem; 
    overflow-x: auto; 
    overflow-y: hidden; 
    -webkit-overflow-scrolling: touch; 
    padding: .4rem .5rem; 
  }
  .menu-links li { flex: 0 0 auto; }
  .menu-links li a { 
    margin: .2rem; 
    padding: .6rem .8rem; 
    border-radius: 10px; 
  }
  /* Em mobile, os textos dos links ficam sempre visíveis */
  .menu-links li a .link-text { opacity: 1 !important; visibility: visible !important; }

  /* Conteúdo ocupa 100% sem deslocamento lateral */
  .page-content { margin-left: 0 !important; min-width: 0; }

  /* Cabeçalho: logo, título e ações empilhados */
  .main-header { padding: .75rem 1rem !important; }
  .header-content.header-with-logo { grid-template-columns: 1fr !important; }
  .header-title { font-size: 1.1rem !important; }
  .header-actions { gap: .5rem; }

  /* Grids e cartões em uma coluna */
  .cards-container { grid-template-columns: 1fr !important; gap: 1rem !important; }

  /* Tabelas responsivas: permitem rolagem horizontal */
  .table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table, .table { display: block; width: 100%; overflow-x: auto; border-collapse: collapse; }

  /* Formulários e controles */
  input[type="text"], input[type="number"], input[type="date"], input[type="month"],
  input[type="email"], input[type="password"], select, textarea { width: 100% !important; max-width: 100% !important; }

  /* Botões grandes e clicáveis em mobile */
  .btn, button, .logout-button, .back-button, .login-button { width: 100%; justify-content: center; }

  /* Rodapé empilhado */
  .site-footer .footer-content { flex-direction: column; gap: .5rem; }
}

/* Mobile pequeno */
@media (max-width: 480px) {
  .main-header { padding: .6rem .75rem !important; }
  .header-title { font-size: 1rem !important; }
  .header-logo { height: 34px !important; }
  .main-content { padding: .75rem !important; }
  .cards-container { gap: .75rem !important; }
}

/* Utilitários opcionais */
@media (max-width: 768px) {
  .hide-on-mobile { display: none !important; }
  .fullwidth-on-mobile { width: 100% !important; }
}