/* =====================================================================
   mobile.css — Camada de responsividade para uso no celular
   Carregado DEPOIS do styles.css para sobrescrever quando necessário.
   Vision Art Gráfica — Sistema interno
   ===================================================================== */

/* ---- Evita o zoom automático do iOS ao focar campos (fonte >= 16px) ---- */
@media (max-width: 991.98px) {
  input, select, textarea,
  .form-control, .form-select,
  .form-control-sm, .form-select-sm {
    font-size: 16px !important;
  }
}

/* =========================== TELEFONE (< 768px) =========================== */
@media (max-width: 767.98px) {

  /* ---- Menos padding lateral nas páginas ---- */
  .container, .container-fluid, main,
  .page, [id^="page-"] {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* ---- Navbar: menu com itens grandes e fáceis de tocar ---- */
  .navbar-collapse { max-height: 82vh; overflow-y: auto; }
  .navbar-nav .nav-link { padding: 12px 8px !important; font-size: 1rem; }
  .navbar-nav .dropdown-menu { min-width: 100%; margin-top: 2px; }
  .navbar-nav .dropdown-item { padding: 12px 14px; font-size: 1rem; }

  /* ---- Alvos de toque: botões e campos maiores ---- */
  .btn { min-height: 42px; padding: 8px 14px; }
  .btn-sm { min-height: 38px; padding: 7px 12px; }
  .form-control, .form-select,
  .form-control-sm, .form-select-sm { min-height: 44px; }
  textarea.form-control, textarea.form-control-sm { min-height: 64px; }
  .input-group > .btn { min-height: 44px; }

  /* ---- Modais quase em tela cheia (mais área útil no celular) ---- */
  .modal-dialog {
    margin: 8px !important;
    max-width: calc(100% - 16px) !important;
    width: calc(100% - 16px) !important;
  }
  .modal-content { border-radius: 12px; }
  .modal-dialog-scrollable .modal-content { max-height: calc(100vh - 16px); }
  .modal-body { padding: 12px !important; }
  .modal-header, .modal-footer { padding: 10px 12px !important; }
  .modal-footer { flex-wrap: wrap; gap: 6px; }
  .modal-footer > .btn { flex: 1 1 auto; }

  /* ---- Tabelas largas: a rolagem horizontal já vem do wrapper .table-responsive.
         NÃO usar display:block no <table> (quebra o alinhamento das colunas). ---- */
  .table-responsive { -webkit-overflow-scrolling: touch; }
  .prod-table { font-size: .9rem; }
  .prod-table th, .prod-table td { white-space: nowrap; }
  /* Campos dentro de tabela não precisam do min-height alto (evita linhas gigantes) */
  .prod-table .form-control,
  .prod-table .form-select,
  .prod-table .form-control-sm,
  .prod-table .form-select-sm { min-height: 38px; }

  /* ---- Catálogo / cards: 1 por linha ---- */
  .produto-card, .produto-folder-card { width: 100% !important; }
  .produtos-busca { max-width: 100% !important; }

  /* ================= ORÇAMENTO — grade de produtos vira lista ================= */
  /* Rótulos de coluna somem (os campos já têm placeholder explicando) */
  .op-col-hdr { display: none !important; }

  /* Cada produto empilha verticalmente e ocupa a largura toda */
  .op-product-row {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 12px;
  }
  .op-product-row > * { width: 100%; }
  .op-img-cell { width: 100%; height: 120px; }
  .op-img-cell img { object-fit: contain; }
  .op-prod-qtd, .op-prod-unit, .op-prod-total { text-align: left; }
  .op-ia-btn { width: 100%; height: 44px; }

  /* Abas de opções com rolagem horizontal */
  #opTabsBar { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .op-tab-btn { flex: 0 0 auto; padding: 10px 16px; }

  /* ===================== KANBAN — cartões com botões grandes ===================== */
  .kc-acoes { flex-wrap: wrap; gap: 6px !important; }
  .kc-btn {
    min-height: 38px;
    min-width: 44px;
    padding: 8px 12px !important;
    font-size: .8rem !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .kanban-card { padding: 14px; }
  .kanban-col-header { padding: 14px 14px 12px; }

  /* ---- Títulos um pouco menores ---- */
  h1, .h1 { font-size: 1.5rem; }
  h2, .h2 { font-size: 1.3rem; }
  h3, .h3 { font-size: 1.15rem; }
  h4, .h4 { font-size: 1.05rem; }

  /* ---- Barras de ação/topo que quebram bem ---- */
  .d-flex.gap-2, .d-flex.gap-3 { flex-wrap: wrap; }
}

/* ============ TABLET (768–991px): ajustes leves de toque ============ */
@media (min-width: 768px) and (max-width: 991.98px) {
  .btn { min-height: 40px; }
  .kc-btn { min-height: 34px; min-width: 38px; }
}