/* ============================================================
   CARTÃO PVC — CSS Responsivo
   Mobile-first: 320px → tablet: 768px → desktop: 1024px+
   ============================================================ */

/* ── VARIÁVEIS ─────────────────────────────────────────────── */
:root {
  --sidebar-w: 260px;
  --topbar-h: 54px;
}

/* ── HAMBURGUER ─────────────────────────────────────────────── */
.btn-menu {
  display: none;
  background: none;
  border: none;
  color: white;
  font-size: 22px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}
.btn-menu:hover { background: rgba(255,255,255,.1); }

/* ── OVERLAY ─────────────────────────────────────────────────  */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 999;
  backdrop-filter: blur(2px);
}
.sidebar-overlay.show { display: block; }

/* ── CARDS STAT RESPONSIVOS ──────────────────────────────────  */
@media (max-width: 575px) {
  .stat-card {
    padding: 14px 16px;
    gap: 12px;
  }
  .stat-num { font-size: 24px; }
  .stat-icon { width: 42px; height: 42px; font-size: 18px; }
}

/* ══════════════════════════════════════════════════════════════
   TABLET (≤ 1023px)
══════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {

  /* Sidebar vira drawer deslizante */
  .sidebar {
    position: fixed !important;
    left: 0; top: 0;
    height: 100vh;
    width: var(--sidebar-w) !important;
    transform: translateX(-100%);
    transition: transform .28s cubic-bezier(.4,0,.2,1);
    z-index: 1000;
    box-shadow: 4px 0 24px rgba(0,0,0,.35);
  }
  .sidebar.open {
    transform: translateX(0);
  }

  /* Conteúdo ocupa tela toda */
  .main-wrap {
    margin-left: 0 !important;
  }

  /* Botão hamburguer visível */
  .btn-menu {
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  /* Topbar ajustada */
  .topbar {
    padding: 10px 14px !important;
    gap: 10px;
  }
  .topbar .page-title {
    font-size: 15px !important;
  }

  /* Content com menos padding */
  .content {
    padding: 14px !important;
  }

  /* Tabelas: scroll horizontal */
  .table-card { overflow-x: auto; }
  .table { min-width: 560px; }

  /* Grid de stats: 2 por linha */
  .row.g-3 > [class*="col-xl-3"] { flex: 0 0 50%; max-width: 50%; }
}

/* ══════════════════════════════════════════════════════════════
   MOBILE (≤ 575px)
══════════════════════════════════════════════════════════════ */
@media (max-width: 575px) {

  /* Gaveta do menu não deve dominar a tela em celulares pequenos */
  :root { --sidebar-w: min(280px, 82vw); }

  /* Stats: 1 por linha no mobile */
  .row.g-3 > [class*="col-6"],
  .row.g-3 > [class*="col-xl-3"] {
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* Content com padding mínimo */
  .content { padding: 10px !important; }

  /* Topbar: oculta nome do usuário, mantém ícone + ação */
  .topbar .user-info strong,
  .topbar .user-text { display: none; }
  .topbar a.btn { padding: 4px 10px; font-size: 12px; }

  /* Formulários: força coluna */
  .row.g-3 > [class*="col-md"] {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .row.g-4 > [class*="col-lg"] {
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* Botões empilhados */
  .d-flex.gap-2 { flex-wrap: wrap; }
  .btn { font-size: 13px; }

  /* Header de página */
  .page-header-flex {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 10px;
  }
}

/* ── AUTH PAGES ──────────────────────────────────────────────  */
/* auth.php já resolve isso sozinho com seu próprio @media inline. */

/* Editor: tratado à parte (sem suporte a touch ainda) */

/* ── UTILITÁRIOS ─────────────────────────────────────────────  */
.text-truncate-mobile {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}
@media (min-width: 768px) {
  .text-truncate-mobile { max-width: none; }
}