/*
 * ARGUS Hospitality — otimização para tablets e toque
 * Alvos mínimos ~48px, inputs 16px (evita zoom iOS), modais com altura segura e áreas safe.
 */

:root {
  --touch-target-min: 48px;
  --touch-gap: 12px;
  --touch-font-input: 16px;
}

html {
  touch-action: manipulation;
}

body {
  -webkit-tap-highlight-color: hsl(var(--primary) / 0.15);
}

/* -------------------------------------------------------------------------
   Formulários: altura de toque + 16px em inputs (evita zoom ao focar no iOS)
   ------------------------------------------------------------------------- */
@media (max-width: 1280px), (hover: none) and (pointer: coarse) {
  .input,
  textarea.input,
  select.input,
  .login-input,
  .login-field .login-input {
    min-height: var(--touch-target-min);
    font-size: var(--touch-font-input) !important;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  textarea.input {
    min-height: 120px;
  }

  .label,
  .login-label {
    font-size: 14px;
    margin-bottom: 8px;
  }

  .form-row,
  .form-grid,
  .mfield {
    gap: 14px;
  }

  .form-actions {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: var(--touch-gap);
  }

  .form-actions .btn {
    width: 100%;
    min-height: var(--touch-target-min);
    justify-content: center;
  }
}

/* -------------------------------------------------------------------------
   Botões e controles gerais
   ------------------------------------------------------------------------- */
@media (max-width: 1280px), (hover: none) and (pointer: coarse) {
  .btn {
    min-height: var(--touch-target-min);
    padding-left: 18px;
    padding-right: 18px;
    justify-content: center;
  }

  .btn--small,
  .btn.btn--small,
  .btn--sm,
  .btn.btn--sm,
  .btn-sm {
    min-height: 44px;
    padding: 10px 14px;
  }

  .hdr-tile,
  .hdr-menu-btn,
  .hdr-theme {
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
  }

  .sidebar-chev-btn {
    min-width: 44px;
    min-height: 44px;
  }

  .login-btn {
    min-height: 52px;
    font-size: 16px;
  }

  .login-pass-toggle {
    min-width: 44px;
    min-height: 44px;
  }

  .login-check {
    min-height: 44px;
    align-items: center;
  }
}

/* -------------------------------------------------------------------------
   Abas (Área crítica, config, etc.)
   ------------------------------------------------------------------------- */
@media (max-width: 1280px), (hover: none) and (pointer: coarse) {
  .cadastros-page .tabs-bar > .tab-btn,
  .config-page .tabs-bar > .tab-btn,
  .pesquisas-page .tabs-bar > .tab-btn,
  .inventario-page .tabs-bar > .tab-btn,
  .gestao-manutencoes-page .tabs-bar > .tab-btn,
  .estoque-page .tabs-bar > .tab-btn,
  .eficiencia-unidade-page .tabs-bar > .tab-btn,
  .hospitalidade-page .tabs-bar > .tab-btn,
  .custo-unidade-page .tabs-bar > .tab-btn {
    min-height: 48px;
    padding: 8px 12px;
  }

  .cadastros-page .tabs-bar > .tab-btn.is-active,
  .config-page .tabs-bar > .tab-btn.is-active {
    padding: 8px 14px;
  }

  .tabs-bar {
    gap: 10px;
    padding: 16px;
  }
}

/* -------------------------------------------------------------------------
   Modais: quase tela cheia em tablet, scroll interno, botões empilhados
   ------------------------------------------------------------------------- */
@media (max-width: 1024px), (hover: none) and (pointer: coarse) {
  .modal {
    padding: max(12px, env(safe-area-inset-top, 0px))
             max(12px, env(safe-area-inset-right, 0px))
             max(12px, env(safe-area-inset-bottom, 0px))
             max(12px, env(safe-area-inset-left, 0px));
    align-items: flex-end;
    justify-content: center;
  }

  .modal-dialog {
    width: 100%;
    max-width: min(720px, 100vw - 24px);
    max-height: min(92dvh, 920px);
    display: flex;
    flex-direction: column;
    border-radius: 16px 16px 0 0;
    margin: 0 auto;
  }

  .modal--sm .modal-dialog,
  #confirmExcluirModal .modal-dialog {
    max-width: min(520px, 100vw - 24px) !important;
  }

  .modal--lancamento .modal-dialog,
  .modal-dialog--lancamento {
    max-width: min(640px, 100vw - 24px) !important;
    width: 100%;
  }

  .modal--transf,
  .modal--transf-busca {
    align-items: center;
    padding: max(16px, 3vh) 16px;
  }
  .modal--transf .modal-dialog--transf {
    width: min(1120px, calc(100vw - 32px)) !important;
    max-width: min(1120px, calc(100vw - 32px)) !important;
    max-height: min(92dvh, 920px) !important;
    border-radius: 16px;
    margin: auto;
  }
  .modal--transf-busca .modal-dialog--transf-busca {
    width: min(720px, calc(100vw - 32px)) !important;
    max-width: min(720px, calc(100vw - 32px)) !important;
    max-height: min(88dvh, 780px) !important;
    border-radius: 16px;
    margin: auto;
  }

  .modal-head {
    padding: 18px 16px;
    flex-shrink: 0;
  }

  .modal-title {
    font-size: 20px;
  }

  .modal-subtitle {
    font-size: 13px;
  }

  .modal-close {
    min-width: 48px;
    min-height: 48px;
    flex-shrink: 0;
  }

  .modal-body {
    padding: 16px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1;
    min-height: 0;
  }

  .modal-foot {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 12px;
    padding: 16px;
    padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
    flex-shrink: 0;
  }

  .modal-foot .btn {
    width: 100%;
    min-height: 52px;
    font-size: 16px;
  }
}

/* Modais centralizados em landscape largo (opcional) */
@media (min-width: 900px) and (max-width: 1280px) and (orientation: landscape) {
  .modal {
    align-items: center;
    padding: 24px;
  }

  .modal-dialog {
    border-radius: var(--modal-r, 16px);
    max-height: min(88dvh, 800px);
  }
}

/* -------------------------------------------------------------------------
   Cards e listas — respiro para o polegar
   ------------------------------------------------------------------------- */
@media (max-width: 1280px), (hover: none) and (pointer: coarse) {
  .card-pad {
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }

  .page__stack {
    padding-bottom: max(24px, env(safe-area-inset-bottom, 0px));
  }

  .kpi,
  .dash-kpis .card {
    min-height: 44px;
  }

  .nav-group-btn,
  .sidebar-link {
    min-height: var(--touch-target-min);
    padding-top: 12px;
    padding-bottom: 12px;
  }
}

/* -------------------------------------------------------------------------
   Flash / alertas
   ------------------------------------------------------------------------- */
@media (max-width: 1280px) {
  .flash-stack .alert {
    font-size: 15px;
    padding: 14px 16px;
  }
}

/* -------------------------------------------------------------------------
   Login / seleção de unidade — safe-area e cartão confortável em tablet
   ------------------------------------------------------------------------- */
@media (max-width: 1280px), (hover: none) and (pointer: coarse) {
  .login-wrap {
    padding: max(16px, env(safe-area-inset-top, 0px))
             max(16px, env(safe-area-inset-right, 0px))
             max(16px, env(safe-area-inset-bottom, 0px))
             max(16px, env(safe-area-inset-left, 0px));
  }

  .login-grid {
    width: min(440px, 100%);
    margin-inline: auto;
    justify-items: center;
  }

  .login-card {
    padding: 0;
    margin-inline: auto;
  }

  .login-card__head {
    padding: 10px clamp(20px, 4vw, 28px) 12px;
  }

  .login-card__body {
    padding: clamp(22px, 4vw, 28px) clamp(20px, 4vw, 32px) clamp(24px, 4vw, 32px);
  }

  .login-form {
    gap: 0;
  }

  .login-field {
    min-height: var(--touch-target-min);
  }

  .login-field .login-input {
    padding: 12px;
    font-size: 16px;
  }
}

/* -------------------------------------------------------------------------
   Tablet intermediário (769–1024): filtros e formulários em até 2 colunas
   ------------------------------------------------------------------------- */
@media (min-width: 769px) and (max-width: 1024px) {
  .form-grid--3col,
  .form-row--3 {
    grid-template-columns: 1fr 1fr !important;
  }

  .ac-peso-filtros-panel,
  .filtros-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: end;
  }

  .ac-peso-filtros-panel__apply,
  .filtros-panel__apply {
    grid-column: 1 / -1;
  }

  .search-row {
    flex-wrap: wrap;
    gap: 10px;
  }

  .search-row .search-input {
    flex: 1 1 220px;
    min-width: 0;
  }
}