/* ═══════════════════════════════════════════════════════════════
   VITTASYS — MOBILE / TABLET RESPONSIVO
   ═══════════════════════════════════════════════════════════════ */

/* ── Base: previne zoom em inputs iOS ───────────────────────── */
input, select, textarea { font-size: 16px !important; }
input[type="search"] { font-size: 16px !important; }

/* ── Hamburger ──────────────────────────────────────────────── */
#mob-ham {
  display: none;
  position: fixed;
  top: 10px; left: 10px;
  z-index: 2000;
  width: 44px; height: 44px;
  background: #2BBCB3;
  border: none; border-radius: 10px;
  cursor: pointer;
  flex-direction: column;
  align-items: center; justify-content: center;
  gap: 5px;
  box-shadow: 0 2px 12px rgba(0,0,0,.3);
}
#mob-ham span { display:block; width:20px; height:2px; background:#fff; border-radius:2px; }

/* ── Overlay ────────────────────────────────────────────────── */
#mob-ov {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 1500;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
#mob-ov.on { display: block; }

/* ── Segurança ─────────────────────────────────────────────── */
#sec-ov {
  display: none;
  position: fixed; inset: 0;
  background: #0f1a2e;
  z-index: 9999;
  flex-direction: column;
  align-items: center; justify-content: center;
  gap: 16px; color: #fff; text-align: center; padding: 32px;
}
#sec-ov.on { display: flex; }
#sec-ov .ic { font-size: 52px; }
#sec-ov .tt { font-size: 19px; font-weight: 700; }
#sec-ov .sb { font-size: 13px; opacity: .65; }

/* ── Watermark ─────────────────────────────────────────────── */
#wm {
  display: none;
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 400;
  opacity: .04;
  overflow: hidden;
}
#wm canvas { width:100%; height:100%; }

/* ═══════════════════════════════════════════════════════════════
   TABLET  ≤ 1024px
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-wrap table { min-width: 560px; }
  .dash-grid { grid-template-columns: 1fr 1fr !important; }
}

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

  /* Mostrar hamburger */
  #mob-ham { display: flex; }

  /* Sem seleção de texto */
  body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

  /* Layout base */
  html, body { height: 100%; overflow: hidden; }
  .app-layout { flex-direction: row; height: 100dvh; overflow: hidden; }

  /* Sidebar vira drawer */
  .sidebar {
    position: fixed !important;
    top: 0; bottom: 0;
    left: -270px;
    width: 260px !important;
    height: 100dvh !important;
    z-index: 1600;
    transition: left .25s cubic-bezier(.4,0,.2,1);
    overflow-y: auto;
    overflow-x: hidden;
  }
  .sidebar.aberta { left: 0 !important; }

  /* Conteúdo ocupa tela toda */
  .main-content {
    flex: 1;
    width: 100% !important;
    min-width: 0;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 64px 14px 20px !important;
  }

  /* Headers */
  .page-header { flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 16px; }
  .page-title { font-size: 18px !important; }
  .page-subtitle { font-size: 11px !important; }
  .page-header-actions { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }

  /* Botões */
  .btn { padding: 9px 13px !important; font-size: 12px !important; min-height: 38px; }
  .btn-sm { padding: 6px 10px !important; font-size: 11px !important; }

  /* Tabelas */
  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: calc(100vw - 28px);
    border-radius: 10px;
  }
  .table-wrap table { min-width: 480px; font-size: 12px; }
  .table-wrap th, .table-wrap td { padding: 9px 10px !important; }
  .badge { font-size: 9px !important; padding: 2px 6px !important; }

  /* Grids */
  .dash-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .dash-cols { grid-template-columns: 1fr !important; }
  .form-grid, .form-grid-3, .client-form-grid { grid-template-columns: 1fr !important; }
  .vac-detail-grid { grid-template-columns: 1fr !important; }

  /* Cards de resumo (4 colunas → 2x2) */
  div[style*="repeat(4,1fr)"],
  div[style*="repeat(3,1fr)"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  /* Modal → bottom sheet */
  .modal-backdrop {
    align-items: flex-end !important;
  }
  .modal-box {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 88dvh !important;
    margin: 0 !important;
    border-radius: 20px 20px 0 0 !important;
    overflow-y: auto !important;
  }

  /* Search */
  .search-box { width: 100% !important; }
  .search-box input { width: 100% !important; }

  /* Watermark e segurança */
  #wm { display: block; }

  /* Print bloqueado */
  @media print { body { display: none !important; } }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE PEQUENO  ≤ 480px
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .main-content { padding: 60px 10px 16px !important; }
  .dash-grid { grid-template-columns: 1fr !important; }
  div[style*="repeat(4,1fr)"],
  div[style*="repeat(3,1fr)"],
  div[style*="repeat(2,1fr)"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
}