/* Telas operacionais: filtros, ações, formulários, tabelas e diálogos. */
#operacao { display: grid; gap: 18px; }
#operacao[aria-busy="true"] { min-height: 160px; }
#operacao > p:first-child:only-child { color: var(--muted); }

.operacao-panel { padding: 0; }
.operacao-panel > h2 {
  margin: 0;
  padding: 17px 20px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  font-weight: 700;
}
.operacao-panel > .table-scroll + p,
.operacao-panel > p:not(.subtle),
.operacao-panel > .subtle,
.operacao-panel > label { margin: 16px 20px; }

.acoes {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  margin: 2px 0;
}
.operacao-panel + .acoes { margin-top: -2px; }

.filtros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  align-items: end;
  gap: 12px;
  margin: 0;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.filtros label { min-width: 0; }
.filtros > button { min-height: 42px; }

label { display: grid; gap: 6px; color: var(--muted-strong); font-size: 11px; font-weight: 650; }
input, select, textarea {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 9px 11px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  outline: 0;
  background: #fff;
  color: var(--text);
  font-size: 12px;
  font-weight: 500;
  box-shadow: inset 0 1px 1px rgba(31, 46, 69, .015);
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
input::placeholder, textarea::placeholder { color: #9aa6b6; font-weight: 400; }
input:hover, select:hover, textarea:hover { border-color: #c5d0dd; }
input:focus, select:focus, textarea:focus { border-color: #83a5cf; box-shadow: 0 0 0 3px rgba(49, 95, 157, .10); }
textarea { min-height: 92px; resize: vertical; }
input[type="checkbox"] { width: 16px; min-height: 16px; height: 16px; padding: 0; accent-color: var(--primary); }
label > span:has(input[type="checkbox"]) { display: flex; align-items: flex-start; gap: 8px; font-weight: 500; line-height: 1.5; }

button.primary,
.acoes button,
.pagination button,
#dialogo-cancelar,
#dialogo-confirmar,
#adicionar-item,
[data-remove-item],
#tentar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 13px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  font-size: 11px;
  font-weight: 650;
  box-shadow: 0 1px 1px rgba(27, 42, 65, .02);
}
button.primary, #dialogo-confirmar {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}
button.primary:hover, #dialogo-confirmar:hover { border-color: var(--primary-hover); background: var(--primary-hover); }
.acoes button:not(.primary):hover, .pagination button:hover, #dialogo-cancelar:hover, #adicionar-item:hover, [data-remove-item]:hover, #tentar:hover { border-color: #b7c7da; background: #f8fafc; }

/* Ações de consulta não precisam competir visualmente com ações de criação. */
button.primary[data-action="requisicao"],
button.primary[data-action="compra"],
button.primary[data-action="produto"] {
  border-color: #d1dbe7;
  background: #fff;
  color: #46617f;
}
button.primary[data-action="requisicao"]:hover,
button.primary[data-action="compra"]:hover,
button.primary[data-action="produto"]:hover { border-color: #afc0d5; background: #f7faff; color: #2f527d; }

#contador { margin: -4px 1px 0; color: var(--muted); font-size: 10px; font-weight: 600; }
.subtle { font-size: 11px; line-height: 1.6; }
.vazio { padding: 36px 20px !important; color: var(--muted) !important; text-align: center !important; }
.quantidades { font-variant-numeric: tabular-nums; }

.operacao-table { min-width: 760px; }
.operacao-table th, .operacao-table td { vertical-align: middle; }
.operacao-table select { min-width: 210px; }
.operacao-table input[type="number"] { width: 105px; }

.cards-estoque { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.cards-estoque article {
  position: relative;
  min-height: 165px;
  padding: 17px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.cards-estoque article::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: #668fbe; }
.cards-estoque h3 { margin-top: 10px; font-size: 14px; font-weight: 680; }
.cards-estoque strong { display: block; margin: 20px 0 5px; color: var(--text-strong); font-size: 27px; font-weight: 700; letter-spacing: -.035em; }
.cards-estoque article > span:last-child { display: inline-flex; padding: 4px 7px; border-radius: 999px; background: var(--surface-muted); color: var(--muted-strong); font-size: 9px; font-weight: 700; }

.grid-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); align-items: end; gap: 10px; }
.item-compra { margin-bottom: 10px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-soft); }
[data-remove-item] { color: var(--danger); }

.pagination { display: flex; align-items: center; justify-content: flex-end; gap: 9px; padding: 13px 16px; border-top: 1px solid var(--border); }
.pagination span { min-width: 66px; color: var(--muted); font-size: 10px; text-align: center; }
.pagination button { min-height: 34px; padding: 6px 10px; }

#aviso { margin: 0 0 16px; }
#aviso:not(:empty) {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  font-size: 11px;
  font-weight: 600;
}
#aviso.erro { border-color: #f1d4cf; background: #fff7f5; color: var(--danger); }
#aviso.sucesso { border-color: #d5eadf; background: #f5fbf8; color: var(--success); }

/* Dialog: leitura confortável e rodapé de ações previsível. */
dialog {
  width: min(900px, 94vw);
  max-height: min(88vh, 820px);
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(213, 221, 232, .9);
  border-radius: 15px;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-md);
}
dialog::backdrop { background: rgba(18, 31, 51, .52); backdrop-filter: blur(2px); }
#form-dialogo { display: grid; max-height: inherit; grid-template-rows: auto minmax(0, 1fr) auto auto; }
#dialogo-titulo { padding: 20px 22px 16px; border-bottom: 1px solid var(--border); font-size: 18px; font-weight: 720; }
#dialogo-conteudo { display: grid; gap: 15px; padding: 18px 22px; overflow: auto; }
#dialogo-conteudo > p { color: var(--muted-strong); font-size: 12px; }
#dialogo-conteudo > .table-scroll { margin-inline: -22px; }
#dialogo-conteudo > .table-scroll table { min-width: 650px; }
#dialogo-erro { min-height: 0; padding: 0 22px; color: var(--danger); font-size: 11px; font-weight: 600; }
#dialogo-erro:not(:empty) { padding-block: 9px; border-top: 1px solid #f3e1de; background: #fff8f6; }
#form-dialogo > .acoes { justify-content: flex-end; margin: 0; padding: 13px 22px; border-top: 1px solid var(--border); background: var(--surface-soft); }
#dialogo-cancelar, #dialogo-confirmar { min-width: 96px; }

.historico { display: grid; gap: 0; padding: 0; list-style: none; }
.historico li { position: relative; margin: 0; padding: 9px 0 9px 18px; border-left: 1px solid var(--border-strong); color: var(--muted-strong); font-size: 11px; }
.historico li::before { position: absolute; top: 14px; left: -4px; width: 7px; height: 7px; border: 2px solid white; border-radius: 50%; background: #7d96b7; content: ""; box-shadow: 0 0 0 1px #c9d4e1; }
details > summary { padding: 9px 0; color: var(--primary); cursor: pointer; font-size: 11px; font-weight: 650; }

@media (max-width: 760px) {
  .filtros { grid-template-columns: 1fr 1fr; }
  dialog { width: 96vw; max-height: 92vh; border-radius: 12px; }
  #dialogo-titulo { padding: 17px; }
  #dialogo-conteudo { padding: 16px 17px; }
  #dialogo-conteudo > .table-scroll { margin-inline: -17px; }
  #form-dialogo > .acoes { padding: 12px 17px; }
}
@media (max-width: 560px) {
  #operacao { gap: 14px; }
  .filtros { grid-template-columns: 1fr; padding: 13px; }
  .acoes { gap: 7px; }
  .acoes > * { flex: 1 1 auto; }
  .operacao-panel > h2 { padding: 15px 16px; }
  .cards-estoque { grid-template-columns: 1fr; }
  .pagination { justify-content: space-between; }
  #form-dialogo > .acoes { display: grid; grid-template-columns: 1fr 1fr; }
}

/* Microinterações discretas para as telas operacionais. */
.acoes button:not(:disabled):hover,
.pagination button:not(:disabled):hover,
#dialogo-cancelar:not(:disabled):hover,
#dialogo-confirmar:not(:disabled):hover,
#adicionar-item:not(:disabled):hover,
[data-remove-item]:not(:disabled):hover,
#tentar:not(:disabled):hover { transform: translateY(-1px); }
.acoes button:not(:disabled):active,
.pagination button:not(:disabled):active,
#dialogo-cancelar:not(:disabled):active,
#dialogo-confirmar:not(:disabled):active { transform: translateY(0) scale(.985); }
input, select, textarea { transition: border-color 160ms ease, box-shadow 180ms ease, background-color 160ms ease; }