/* =============================================================
   base-responsive.css — Camada global de layout responsivo
   -------------------------------------------------------------
   Carregar POR ÚLTIMO em todas as páginas:
   depois do Bootstrap e depois de qualquer <style> inline.

   Breakpoints padrão do projeto:
   480 / 768 / 769 (desktop) / 1024 / 1280 / 1600 / 1920 / 2560
   (As regras de menu mobile 1118/1119 NÃO são tratadas aqui,
    pois o JavaScript do menu depende delas.)

   Estratégia:
   - Largura única e alinhada para navbar + conteúdo
   - Tipografia e espaçamentos fluidos (clamp)
   - Modo compacto para monitores baixos (até 860px de altura)
   - Modo densidade para telas largas (1600+) = mais conteúdo
   ============================================================= */

:root {
  /* Gutter lateral: cresce suavemente com a tela */
  --rs-gutter: clamp(1rem, 2vw, 2.5rem);

  /* Largura máxima do conteúdo */
  --rs-max: 2000px;
}

/* Telas 2K/4K: muito mais largura útil + fonte levemente maior */
@media (min-width: 2560px) {
  :root {
    --rs-max: 2800px;
  }

  html {
    font-size: 106.25%; /* 16px -> 17px: confortável sem desperdiçar espaço */
  }
}

/* Mídia nunca estoura a largura */
img,
video {
  max-width: 100%;
  height: auto;
}

/* ============================================================
   DESKTOP (>= 769px)
   Abaixo de 768px valem as regras mobile de cada página.
   ============================================================ */
@media (min-width: 769px) {

  /* ---------- 1. NAVBAR: largura alinhada ao conteúdo ---------- */
  .nav,
  .nav.container {
    width: 100%;
    max-width: none;
    padding-inline: max(var(--rs-gutter), calc((100% - var(--rs-max)) / 2));
    justify-content: space-between;
  }

  /* ---------- 2. CONTAINERS: mesma largura da navbar ---------- */
  main > .container,
  main.container,
  main.vlans-container,
  main.users-container,
  .config-container,
  .logs-container,
  .bg-primary > .container {
    width: min(100% - 2 * var(--rs-gutter), var(--rs-max)) !important;
    max-width: var(--rs-max) !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
  }

  /* ---------- 3. CABEÇALHO DE PÁGINA ---------- */
  .page-header {
    padding: clamp(14px, 1.6vw, 26px) clamp(16px, 2vw, 32px);
    margin-bottom: clamp(14px, 1.5vw, 28px) !important;
  }

  .page-title {
    font-size: clamp(1.25rem, 1.6vw, 1.6rem);
    gap: clamp(8px, 1vw, 14px);
    margin-bottom: 0.5rem;
  }

  .page-title i {
    font-size: clamp(1.35rem, 1.7vw, 1.75rem);
  }

  .page-subtitle {
    font-size: clamp(0.85rem, 1vw, 1rem);
  }

  /* ---------- 4. CARDS DE ESTATÍSTICAS (Clientes) ---------- */
  .stats-cards {
    gap: clamp(0.6rem, 1vw, 1.25rem);
  }

  .stat-card {
    padding: clamp(0.85rem, 1.2vw, 1.4rem);
    gap: clamp(0.6rem, 1vw, 1rem);
  }

  .stat-icon {
    width: clamp(40px, 3vw, 56px);
    height: clamp(40px, 3vw, 56px);
    font-size: clamp(1.2rem, 1.6vw, 1.75rem);
  }

  .stat-info h3 {
    font-size: clamp(1.3rem, 1.7vw, 1.9rem);
  }

  /* ---------- 5. PILLS DE ESTATÍSTICA (VLANs / Usuários) ---------- */
  .stats-overview {
    gap: clamp(8px, 1.2vw, 20px);
  }

  .stat-item {
    padding: clamp(10px, 1.1vw, 18px) clamp(12px, 1.3vw, 22px);
  }

  /* ---------- 6. BARRA DE FERRAMENTAS (Clientes) ---------- */
  .toolbar {
    padding: clamp(0.5rem, 0.8vw, 0.875rem) clamp(0.75rem, 1.4vw, 1.5rem);
    margin-bottom: clamp(0.75rem, 1.2vw, 1.25rem);
  }

  /* ---------- 7. GRIDS: nunca estouram em telas estreitas ---------- */
  .vlans-grid,
  .config-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
    gap: clamp(14px, 1.6vw, 25px);
  }

  /* ============================================================
     8. MODO COMPACTO — monitores baixos (1280×720 / 1366×768)
     Reduz header, cards e linhas para a tabela aparecer sem rolar.
     ============================================================ */
  @media (max-height: 860px) {
    .page-header {
      padding-top: clamp(10px, 2.4vh, 18px);
      padding-bottom: clamp(10px, 2.4vh, 18px);
      margin-bottom: clamp(10px, 2vh, 20px) !important;
    }

    .stats-cards {
      margin-top: clamp(0.6rem, 1.8vh, 1.5rem) !important;
    }

    .stat-card {
      padding: clamp(0.6rem, 1.6vh, 1rem) clamp(0.75rem, 1.8vh, 1.1rem);
    }

    .stat-icon {
      width: clamp(34px, 5.5vh, 48px);
      height: clamp(34px, 5.5vh, 48px);
      font-size: clamp(1.1rem, 3vh, 1.5rem);
    }

    .stat-info h3 {
      font-size: clamp(1.15rem, 3vh, 1.7rem);
    }

    .stat-info p {
      font-size: clamp(0.7rem, 1.7vh, 0.85rem);
    }

    .toolbar {
      padding-block: clamp(0.4rem, 1vh, 0.7rem);
      margin-bottom: clamp(0.6rem, 1.4vh, 1rem);
    }

    table.table th,
    table.table td {
      padding: clamp(0.5rem, 1.1vh, 0.85rem) clamp(0.7rem, 1.2vw, 1rem);
    }

    .vlans-grid,
    .config-grid {
      gap: clamp(12px, 2vh, 20px);
      margin-bottom: clamp(16px, 3vh, 30px);
    }

    .stat-item {
      padding: clamp(8px, 1.8vh, 16px) clamp(10px, 2vh, 20px);
    }
  }

  /* ============================================================
     9. MODO DENSIDADE — telas largas (1600+)
     Mesma fonte confortável, linhas mais enxutas = mais clientes
     visíveis por tela.
     ============================================================ */
  @media (min-width: 1600px) {
    table.table th,
    table.table td {
      padding: 0.7rem 0.95rem;
    }

    .vlans-grid,
    .config-grid {
      gap: clamp(16px, 1.2vw, 24px);
    }
  }
}

/* ============================================================
   10. LOGIN (index.php): offsets fixos do menu viram fluidos
   ============================================================ */
.navbar-brand {
  margin-left: clamp(1rem, 4vw, 4em);
}

.navbar-nav {
  margin-right: clamp(1rem, 6vw, 8em);
}

/* Cartão de login com largura confortável em qualquer tela */
.login-section > .container {
  max-width: 1100px !important;
}

#card {
  max-width: min(460px, 100%);
  margin-inline: auto;
}