/* Central Gestão — tabelas e botões no visual da grade de Clientes (v103).
   Vale só para tabelas que ainda não têm o padrão próprio (cg-*) e nunca no PDV.
   Só aparência: nenhuma coluna, evento ou ação é alterada. */

body:not(.pos-fullscreen-active) #page-content .data-table-container:has(> table.data-table:not([class*="cg-"])) {
  max-width: 100%;
  overflow-x: auto !important;
  border: 1px solid #c7d6e5 !important;
  border-radius: 5px !important;
  scrollbar-width: thin;
  scrollbar-color: #a8bed3 #f1f6fb;
}
body:not(.pos-fullscreen-active) #page-content table.data-table:not([class*="cg-"]) {
  border-collapse: collapse !important;
  font-size: 12px !important;
  color: #253c54;
}
body:not(.pos-fullscreen-active) #page-content table.data-table:not([class*="cg-"]) thead th {
  background: linear-gradient(#f3f8fc, #e3edf7) !important;
  color: #304b68 !important;
  height: 35px;
  padding: 6px 8px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
  border-bottom: 1px solid #c9d8e7 !important;
}
/* Linhas compactas: o texto não quebra; a tabela rola dentro do próprio quadro. */
body:not(.pos-fullscreen-active) #page-content table.data-table:not([class*="cg-"]) tbody td {
  padding: 5px 8px !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
  border-bottom: 1px solid #e1e9f1 !important;
}
body:not(.pos-fullscreen-active) #page-content table.data-table:not([class*="cg-"]) tbody tr:nth-child(even) { background: #f7fafd; }
body:not(.pos-fullscreen-active) #page-content table.data-table:not([class*="cg-"]) tbody tr:hover { background: #eaf4ff; }
body:not(.pos-fullscreen-active) #page-content table.data-table:not([class*="cg-"]) tbody td :is(small, .text-muted) { font-size: 11px !important; }
/* Botões dentro das linhas: lado a lado e no tamanho da grade. */
body:not(.pos-fullscreen-active) #page-content table.data-table:not([class*="cg-"]) tbody td .btn {
  padding: 3px 8px !important;
  min-height: 0 !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
  margin: 1px 2px !important;
}

/* Botões sem estilo próprio (aparecem cinza, do navegador): recebem o visual do sistema.
   :where() deixa a especificidade em zero, então qualquer estilo já existente continua valendo. */
:where(body:not(.pos-fullscreen-active) #page-content) :where(button:not(.btn)) {
  background: #ffffff;
  color: #253c54;
  border: 1px solid #c7d6e5;
  border-radius: 5px;
  padding: 5px 10px;
  font: 600 12px/1.3 "Segoe UI", Arial, sans-serif;
  cursor: pointer;
}
:where(body:not(.pos-fullscreen-active) #page-content) :where(button:not(.btn)):hover { background: #eef5fc; }
:where(body:not(.pos-fullscreen-active) #page-content) :where(button:not(.btn)):disabled { opacity: 0.55; cursor: not-allowed; }

/* Variantes de botão usadas pelas telas mas nunca definidas no CSS (apareciam cinza do navegador). */
.btn-outline-danger { background-color: #ffffff; border-color: #f1b5b5; color: #b42318; }
.btn-outline-danger:hover { background-color: #fef2f2; border-color: #e58f8f; }
.btn-outline-success { background-color: #ffffff; border-color: #a9d2bf; color: #13764c; }
.btn-outline-success:hover { background-color: #effaf4; border-color: #7fbf9f; }
.btn-success { background-color: #16a34a; border-color: #16a34a; color: #ffffff; }
.btn-success:hover { background-color: #15803d; }
.btn-warning { background-color: #f59e0b; border-color: #f59e0b; color: #1f1300; }
.btn-warning:hover { background-color: #d97706; }

/* v114 — cartões de indicadores (metric-card): o valor usa todo o espaço e nunca passa do cartão. */
body:not(.pos-fullscreen-active) #page-content .metric-card { gap: 10px; min-width: 0; overflow: hidden; }
body:not(.pos-fullscreen-active) #page-content .metric-card > :not(.metric-icon-box) { flex: 1 1 auto; min-width: 0; }
body:not(.pos-fullscreen-active) #page-content .metric-card .metric-icon-box { flex: 0 0 auto; }
body:not(.pos-fullscreen-active) #page-content .metric-card .metric-value { white-space: nowrap; max-width: 100%; }

/* v114 — telas de caixa do PDV (Revisão de caixas fechados, Extrato e vendas): linhas mais compactas,
   botões de ação lado a lado. A estrutura dessas telas é mantida. */
body:not(.pos-fullscreen-active) #page-content table:is(.ca-table, .pr-table) tbody td {
  padding: 6px 8px !important; line-height: 1.25 !important; vertical-align: middle !important;
}
/* Botões da linha lado a lado (o contêiner original quebrava e empilhava os dois). */
body:not(.pos-fullscreen-active) #page-content table:is(.ca-table, .pr-table) .ca-row-actions { flex-wrap: nowrap !important; }
body:not(.pos-fullscreen-active) #page-content table:is(.ca-table, .pr-table) tbody td:last-child { white-space: nowrap !important; }
body:not(.pos-fullscreen-active) #page-content table:is(.ca-table, .pr-table) tbody td:last-child :is(button, .btn) {
  display: inline-flex !important; margin: 1px 2px !important; padding: 4px 10px !important; font-size: 12px !important;
}
body:not(.pos-fullscreen-active) #page-content table:is(.ca-table, .pr-table) tbody td small,
body:not(.pos-fullscreen-active) #page-content table:is(.ca-table, .pr-table) tbody td :is(.ca-sub, .pr-sub) { font-size: 11px !important; }

/* Cartão de indicador estreito: o ícone decorativo sai e o valor ganha o espaço. */
body:not(.pos-fullscreen-active) #page-content .metric-card { container-type: inline-size; }
@container (max-width: 250px) {
  #page-content .metric-card .metric-icon-box { display: none !important; }
}