/* Fundo geral */
.bg-sagace {
  background-color: #f4f6f9;
}

/* Cartões mais elegantes */
.card {
  border-radius: 12px;
}

/* Navbar */
.navbar-brand {
  font-size: 1.3rem;
  letter-spacing: 1px;
}

/* Inputs grandes (mobile friendly) */
.form-control-lg {
  font-size: 1rem;
  padding: 0.75rem 1rem;
}

/* Botões */
.btn {
  border-radius: 8px;
}

/* Tabelas roláveis (inventário e materiais) */
.table-scroll {
  max-height: 70vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.sticky-header th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #fff;
}

/* ✅ Caixa do registro de movimentações (mostra ~5 últimas) */
.mv-box {
  max-height: 260px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 10px;
}

/* ✅ Registro de movimentações por perfil */
.mv-assistencia { background: #d1e7dd; } /* verde claro */
.mv-entradas    { background: #ffda6a; } /* amarelo mais escuro */
.mv-supervisor  { background: #e2e3e5; } /* cinza */


/* =======================================================
   ✅ MATERIAIS: layout otimizado no celular (stack/card)
   ======================================================= */

/* Rótulos escondidos no desktop */
.mat-label { display: none; }

/* Ajustes gerais para ficar mais legível */
.materials-table td {
  vertical-align: top;
}
.materials-table .col-saldo {
  white-space: nowrap;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Form de movimentação: bom no desktop */
.mat-form select { max-width: 140px; }
.mat-form input  { max-width: 120px; }

/* ✅ MOBILE: transforma cada linha em “card empilhado” */
@media (max-width: 576px) {
  /* remove header da tabela no mobile (vira cards) */
  .materials-table thead {
    display: none;
  }

  /* cada linha vira um bloco */
  .materials-table tr.mat-row {
    display: block;
    border: 1px solid #e6e9ef;
    border-radius: 12px;
    padding: 10px;
    margin-bottom: 10px;
    background: #fff;
  }

  .materials-table td {
    display: block;
    border: 0;
    padding: 6px 0;
  }

  /* mostra rótulos (Produto, Descrição, Saldo, Movimentar) */
  .mat-label {
    display: block;
    font-size: 0.75rem;
    color: #6c757d;
    margin-bottom: 2px;
  }

  .mat-value {
    display: block;
    font-size: 0.98rem;
  }

  /* Produto e Saldo em duas colunas na primeira linha */
  .materials-table td.col-prod,
  .materials-table td.col-saldo {
    width: 100%;
  }

  /* Saldo com destaque e alinhado à esquerda no mobile (fica mais natural) */
  .materials-table .col-saldo {
    text-align: left;
  }

  /* Form ocupa linha inteira e fica “gostoso” de usar */
  .mat-form {
    width: 100%;
    gap: 8px !important;
  }

  .mat-form select,
  .mat-form input,
  .mat-form button {
    width: 100%;
    max-width: none;
  }

  .mat-form button {
    padding: 10px 12px;
  }
}