/* =====================================================================
   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; }
}

/* ============ Novo Pedido (itens) + busca do kanban no mobile ============ */
@media (max-width: 767.98px) {
  /* Itens do pedido: produto em linha própria; qtd/valor/lixeira abaixo */
  .np-item .np-item-top { flex-wrap: wrap; }
  .np-item .np-item-top .np-prod { flex: 1 1 100%; }
  .np-item .np-item-top > div:not(.np-prod) { flex: 1 1 auto; }
  .np-item input { min-height: 40px; }
  .np-item .np-del { min-height: 40px; min-width: 44px; }

  /* Busca do kanban ocupa a linha inteira */
  .kb-busca-wrap { width: 100%; order: -1; }
  .kb-busca-wrap .form-control { min-height: 42px; font-size: .95rem; }
  .kb-busca-item { padding: 12px 14px; font-size: .9rem; }

  /* Filtros lado a lado confortáveis */
  #kanbanFiltroStatus, #kanbanFiltroOrigem { flex: 1 1 45%; width: auto !important; min-height: 42px; }

  /* Resumo de valores com toque confortável */
  .np-resumo .input-group { width: 150px !important; }
  .np-resumo input { min-height: 38px; }
}

/* ============ MATÉRIA-PRIMA no mobile: card empilhado ============
   Foto limpa em 1:1 (sem texto/botões por cima), ações e código ACIMA,
   demais informações e estoque ABAIXO. O card fica retangular. */
@media (max-width: 767.98px) {
  .mat-card {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 6px rgba(0,0,0,.07);
  }
  .mat-card.baixo { outline: 2px solid #ef4444; outline-offset: -2px; }

  /* Barra superior: código em cima, botões embaixo */
  .mat-top {
    position: static;
    order: 1;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 8px 8px 0;
  }
  .mat-top-esq { flex-direction: row; align-items: center; flex-wrap: wrap; }
  .mat-acoes { margin-left: 0; justify-content: flex-start; gap: 5px; }
  .mat-acoes button {
    width: 34px; height: 34px; background: #f1f5f9; color: #334155;
    box-shadow: none; border: 1px solid #e2e8f0;
  }
  .mat-acoes .mat-btn-cores { background: #8b5cf6; color: #fff; border-color: #8b5cf6; }
  .mat-codigo { box-shadow: none; border: 1px solid #e2e8f0; background: #f8fafc; }

  /* Foto quadrada, limpa */
  .mat-foto, .mat-ph {
    position: static;
    order: 2;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    margin-top: 8px;
  }

  /* Informações abaixo da foto, em fundo claro */
  .mat-overlay {
    position: static;
    order: 3;
    background: none;
    color: #0f172a;
    padding: 8px;
  }
  .mat-nome { text-shadow: none; color: #0f172a; -webkit-line-clamp: 3; }
  .mat-cat { color: #64748b; }
  .mat-progress { background: #e2e8f0; }
  .mat-qtd, .mat-total-cores { background: #f1f5f9; color: #0f172a; }
  .mat-qtd:hover, .mat-total-cores:hover { background: #e2e8f0; }
  .mat-dots-label { color: #64748b; }
  .mat-dot { border-color: #fff; box-shadow: 0 0 0 1px #cbd5e1; }
  .mat-dot-mais { color: #475569; }
  .mat-pend { top: -12px; }
}