/* ================================================================
   mobile.css — KravManager UX mobile
   Carregado DEPOIS do admin.css em todas as páginas.
   Breakpoint principal: 820px
   ================================================================ */

/* ── Botão hamburguer (visível só no mobile) ─────────────────── */
.hamburger {
  display: none;
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 200;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  border: none;
  background: var(--accent);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
  transition: opacity .15s;
}
.hamburger:active { opacity: .75; }

/* Backdrop escuro quando rail está aberta */
.rail-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 149;
}
.rail-backdrop.open { display: block; }

@media (max-width: 820px) {

  /* ── Hamburguer aparece ─────────────────────────────────────── */
  .hamburger { display: flex; }

  /* ── Layout: tira o flex row ────────────────────────────────── */
  .app { display: block !important; }

  /* ── Rail vira overlay lateral ──────────────────────────────── */
  .rail {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 260px !important;
    height: 100vh !important;
    z-index: 150 !important;
    transform: translateX(-110%) !important;
    transition: transform .28s cubic-bezier(.4,0,.2,1) !important;
    box-shadow: none;
    overflow-y: auto;
  }

  /* Rail aberta */
  .rail.open {
    transform: translateX(0) !important;
    box-shadow: 4px 0 24px rgba(0,0,0,.5) !important;
  }

  /* ── Conteúdo principal ocupa tudo ──────────────────────────── */
  .page {
    width: 100% !important;
    padding: 60px 14px 20px !important; /* 60px topo = espaço para o hamburguer */
    box-sizing: border-box;
  }

  /* ── Page bar empilha ────────────────────────────────────────── */
  .page__bar {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding-left: 48px !important; /* não sobrepor hamburguer */
  }
  .page__barActions {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .page__barActions .btn { flex: 1 1 auto; justify-content: center; }

  /* ── Título da página ────────────────────────────────────────── */
  .page__title { font-size: 24px !important; }
  .page__head  { padding-top: 4px; }

  /* ── KPIs: 2 colunas no mobile ──────────────────────────────── */
  .kpis {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .kpi { padding: 14px !important; }
  .kpi__value { font-size: 26px !important; }

  /* ── Grids viram coluna única ────────────────────────────────── */
  .grid-2-1,
  .grid-2,
  .grid-2-eq { grid-template-columns: 1fr !important; gap: 14px !important; }

  /* ── Tabelas com scroll horizontal ──────────────────────────── */
  .card__body--flush,
  .table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  table { min-width: 520px; }

  /* ── Cards ───────────────────────────────────────────────────── */
  .card { margin-bottom: 14px; }
  .card__head { flex-wrap: wrap; gap: 8px; }

  /* ── Métricas (financeiro) ───────────────────────────────────── */
  .metrics { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .metric  { padding: 12px !important; }

  /* ── Botões maiores para toque ──────────────────────────────── */
  .btn     { min-height: 44px !important; font-size: 14px !important; }
  .btn--sm { min-height: 40px !important; font-size: 13px !important; }
  .btn--primary, .btn--ghost { padding: 10px 16px !important; }

  /* ── Modais: slide-up do fundo ──────────────────────────────── */
  .modal-overlay { align-items: flex-end !important; padding: 0 !important; }
  .modal {
    max-width: 100vw !important;
    width: 100% !important;
    margin: 0 !important;
    border-radius: 18px 18px 0 0 !important;
    max-height: 92vh !important;
    overflow-y: auto;
  }

  /* ── Formulários ─────────────────────────────────────────────── */
  .form-row,
  .form-row-3 { grid-template-columns: 1fr !important; }
  .form-control { font-size: 16px !important; } /* evita zoom no iOS */

  /* ── Abas (presenças) ────────────────────────────────────────── */
  .tabs { overflow-x: auto; white-space: nowrap; flex-wrap: nowrap !important; }
  .tab  { flex-shrink: 0; }

  /* ── Filtros ─────────────────────────────────────────────────── */
  .filterbar { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; }
  .chips     { flex-wrap: wrap; }
  .search    { width: 100% !important; }
  .search input { width: 100% !important; }

  /* ── Login page (já é responsiva, ajuste fino) ───────────────── */
  .wrap { padding: 16px !important; }

  /* ── Barra de presença (relatório) ──────────────────────────── */
  .barra-label { width: 130px !important; font-size: 12px !important; }
}

/* Telas muito pequenas ≤ 480px */
@media (max-width: 480px) {
  .kpis, .metrics { grid-template-columns: 1fr !important; }
  .page__title    { font-size: 20px !important; }
}