/*
 * Design System v1 — Caronas Burger
 * Reestiliza os componentes Bootstrap 5 / AdminLTE 4 já usados no sistema
 * (form-control, card, btn, input-group, select2) em vez de introduzir
 * classes novas — assim nenhuma dependência de JS existente (select2,
 * datetimepicker, priceFormat) precisa ser tocada.
 *
 * Carregar DEPOIS de dist/css/adminlte.min.css.
 * Referência visual: artifact do Design System (preview + guia de componentes).
 */

:root{
  --ds-accent: #FF8A00;
  --ds-accent-ink: #ffffff;
  --ds-accent-bg: rgba(255,138,0,0.10);
  --ds-line: rgba(28,32,40,0.12);
  --ds-ink-soft: #6b7280;
  --ds-ink-faint: #9aa1ac;
  --ds-radius: 10px;
  --ds-success: #1a8f5a;
  --ds-success-bg: rgba(26,143,90,0.10);
  --ds-warning: #b8860b;
  --ds-warning-bg: rgba(184,134,11,0.12);
  --ds-danger: #cc3b3b;
  --ds-danger-bg: rgba(204,59,59,0.10);
  --ds-info: #2464b0;
  --ds-info-bg: rgba(36,100,176,0.10);
}
[data-bs-theme="dark"]{
  --ds-accent: #e88a3d;
  --ds-accent-ink: #16130f;
  --ds-accent-bg: rgba(232,138,61,0.14);
  --ds-line: rgba(238,240,243,0.12);
  --ds-ink-soft: #99a1ad;
  --ds-ink-faint: #6b7482;
  --ds-success: #4ac190;
  --ds-success-bg: rgba(74,193,144,0.16);
  --ds-warning: #dcb84a;
  --ds-warning-bg: rgba(220,184,74,0.16);
  --ds-danger: #e2685f;
  --ds-danger-bg: rgba(226,104,95,0.16);
  --ds-info: #6ba3e8;
  --ds-info-bg: rgba(107,163,232,0.16);
}

/* ---- campos ---- */
.app-content .form-control,
.app-content .form-select,
.login-page .form-control,
.login-page .form-select{
  height: 38px;
  border-radius: 8px !important;
  font-size: 13.5px;
  border-color: var(--ds-line);
}
.app-content textarea.form-control,
.login-page textarea.form-control{ height:auto; min-height:70px; }
.app-content .form-control:focus,
.app-content .form-select:focus,
.login-page .form-control:focus,
.login-page .form-select:focus{
  border-color: var(--ds-accent);
  box-shadow: 0 0 0 3px var(--ds-accent-bg);
}
.app-content label,
.login-page label{
  font-size: 11px;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--ds-ink-soft);
  font-weight: 600;
  margin-bottom: 5px;
  display: inline-block;
}
.app-content label code,
.login-page label code{
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}

/* select2 (usa tema bootstrap4 já carregado) alinhado à mesma altura e fonte
   dos demais campos. Miramos ".select2-selection--single" (não só o genérico
   ".select2-selection") porque é essa a seletor mais específica que o próprio
   tema usa pra definir altura/posição da seta - senão a nossa altura nova
   (38px) não bate com o cálculo de centralização da seta, que fica torta. */
.app-content .select2-container--bootstrap4 .select2-selection--single{
  height: 38px !important;
  border-radius: 8px !important;
  border-color: var(--ds-line) !important;
  position: relative;
}
.app-content .select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered{
  line-height: 38px !important;
  font-size: 13.5px;
  padding-left: 12px;
  color: var(--ds-ink-soft, #495057);
}
.app-content .select2-container--bootstrap4 .select2-selection--single .select2-selection__placeholder{
  font-size: 13.5px;
}
.app-content .select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow{
  height: 100% !important;
  top: 0 !important;
  right: 6px !important;
}
.app-content .select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow b{
  top: 50% !important;
  transform: translateY(-50%);
  margin-top: 0 !important;
}
/* resultados da busca no dropdown e caixa de pesquisa, mesma fonte */
.select2-container--bootstrap4 .select2-results__option,
.select2-container--bootstrap4 .select2-search__field{
  font-size: 13.5px;
}

/* input-group (data, valor com calc, etc.) */
.app-content .input-group-text,
.login-page .input-group-text{
  background: var(--bs-body-bg, #fff);
  border-color: var(--ds-line);
  color: var(--ds-ink-faint);
  font-size: 13.5px;
}
.app-content .input-group-text[data-bs-toggle="datetimepicker"],
.app-content .input-group-text[style*="cursor:pointer"]{
  cursor: pointer;
  transition: color .15s ease, background .15s ease;
}
.app-content .input-group-text[data-bs-toggle="datetimepicker"]:hover,
.app-content .input-group-text[style*="cursor:pointer"]:hover{
  color: var(--ds-accent);
  background: var(--ds-accent-bg);
}

/* ---- cards ---- */
.app-content .card{
  border-radius: 14px;
  border-color: var(--ds-line);
  box-shadow: 0 1px 2px rgba(16,20,26,0.04);
}
.app-content .card-header{
  background: var(--ds-accent-bg) !important;
  border-bottom: 1px solid var(--ds-line);
  padding: 16px 22px;
  color: var(--bs-body-color) !important;
}
.app-content .card-header .card-title{
  font-size: 14.5px;
  font-weight: 700;
  color: var(--bs-body-color) !important;
}
.app-content .card-body{ padding: 0; }

/* título da página (H1 no topo, antes do card) - a marcação usa <h1> puro,
   que herda o tamanho gigante padrão do navegador */
.app-content-header h1{
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 0;
}

/* ---- seção interna (substitui as antigas faixas de cor de fundo) ---- */
.form-section{
  padding: 14px 22px;
  border-bottom: 1px solid var(--ds-line);
}
.form-section:last-child{ border-bottom: none; }
.form-section-head{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
/* linhas de campo dentro de uma seção: espaçamento vertical mais enxuto */
.form-section .row{
  --bs-gutter-y: 10px;
  margin-bottom: 0 !important;
}
.form-section .row > [class*="col-"],
.form-section .row > [class*="col"]{
  margin-bottom: 0 !important;
}
.form-section-head::before{
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ds-accent);
  flex: none;
}
.form-section-head h3{
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ds-ink-soft);
  font-weight: 700;
  margin: 0;
}

/* ---- botões ---- */
.app-content .btn,
.login-page .btn{
  font-size: 13px;
  border-radius: 8px;
}
.app-content .btn-primary,
.login-page .btn-primary{
  background: var(--ds-accent);
  border-color: var(--ds-accent);
  color: var(--ds-accent-ink);
  font-weight: 700;
}
.app-content .btn-primary:hover,
.login-page .btn-primary:hover{ filter: brightness(1.06); }

/* .btn-default nao existe mais no Bootstrap 5 (removida) - sem isso o botao
   "Cancelar" fica sem nenhum estilo e some no fundo do rodape do card. */
.app-content .btn-default,
.login-page .btn-default{
  background: var(--bs-body-bg, #fff);
  border: 1px solid var(--ds-line);
  color: var(--ds-ink-soft);
  font-weight: 600;
}
.app-content .btn-default:hover,
.login-page .btn-default:hover{
  border-color: var(--ds-ink-faint);
  color: var(--bs-body-color);
  background: var(--bs-body-bg, #fff);
}

/* ---- rodapé do card (ações: cancelar/salvar) ---- */
.app-content .card-footer{
  background: var(--ds-accent-bg) !important;
  border-top: 1px solid var(--ds-line);
  padding: 16px 22px;
}

/* ---- tabela ---- */
.app-content table thead th,
.app-content table tfoot th{
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ds-ink-faint);
  font-weight: 700;
  border-color: var(--ds-line);
  background: transparent;
}
.app-content table td{
  font-size: 13.5px;
  line-height: 1.5;
  vertical-align: middle;
  color: var(--bs-body-color);
}
.app-content table td.text-end,
.app-content table th.text-end{ font-variant-numeric: tabular-nums; }

/* Espaço entre a linha de campos "Adicionar" e a listagem logo abaixo +
   colunas numéricas (QTD/Valor Unidade/Total) alinhadas à direita com fonte
   tabular - o JS que insere as linhas (AdicionarInsumo) usa <td> puro, sem
   classes, então miramos por posição de coluna. */
.card:has(#myTableInsumo){ margin-top: 16px; }
#myTableInsumo td:nth-child(4),
#myTableInsumo td:nth-child(5),
#myTableInsumo td:nth-child(6),
#myTableInsumo th:nth-child(4),
#myTableInsumo th:nth-child(5),
#myTableInsumo th:nth-child(6){
  text-align: right;
  font-variant-numeric: tabular-nums;
}
#myTableInsumo td:nth-child(7){ text-align: center; }
#myTableColaborador td:nth-child(4){ font-variant-numeric: tabular-nums; }
#myTableColaborador td:nth-child(6){ text-align: center; }

/* linha em destaque ao passar o mouse (mesmo tom do accent usado no resto
   do sistema) nas tabelas de itens adicionados dinamicamente via JS */
#myTableInsumo tbody tr:hover td,
#myTableColaborador tbody tr:hover td{
  background: var(--ds-accent-bg);
}

/* botao de remover linha (JS insere via string em AdicionarInsumo/
   AdicionarColaborador/removerInsumo/removerColaborador - antes usava
   <img src="dist/img/excluir.png">, sem nenhum estilo/hover) */
.del-btn{
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid var(--ds-line);
  background: transparent;
  color: var(--ds-danger);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, border-color .15s ease;
}
.del-btn:hover{ background: var(--ds-danger-bg); border-color: var(--ds-danger); }
.del-btn i{ font-size: 13px; }

/* Tabela de listagem de pagamentos (#example1) - mesmo raciocínio: JS/HTML
   gera <td> puro por posição, então miramos por nth-child. Colunas:
   1 checkbox, 2 Categoria, 3 Fornecedor, 4 Vencimento, 5 Pagamento,
   6 Valor R$, 7 Forma Pag., 8 NR Nota, 9 Situação, 10 ID */
#example1.table-bordered{ border-color: var(--ds-line); }
#example1.table-bordered td,
#example1.table-bordered th{ border-color: var(--ds-line); }
#example1 td{ font-size: 13px; letter-spacing: .002em; }
#example1 td:nth-child(3){ font-weight: 600; color: var(--bs-body-color); }
#example1 td:nth-child(4),
#example1 td:nth-child(5){ font-variant-numeric: tabular-nums; color: var(--ds-ink-soft); }
#example1 td:nth-child(6),
#example1 th:nth-child(6){ text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
#example1 td:nth-child(10),
#example1 th:nth-child(10){ text-align: right; font-variant-numeric: tabular-nums; color: var(--ds-ink-faint); font-size: 12px; }

/* ---- rodapé do sistema (rodape.php, aparece em toda página) ---- */
.app-footer{
  font-size: 12px;
  color: var(--ds-ink-faint);
}
.app-footer strong{ font-weight: 600; color: var(--ds-ink-soft); }
.app-footer a{ color: var(--ds-ink-soft); text-decoration: underline; }
.app-footer a:hover{ color: var(--ds-accent); }

/* ---- nome do usuário no painel da sidebar (menu_lateral.php) ---- */
.user-panel .info a{
  font-size: 13px;
  font-weight: 600;
  color: #e9eaec;
  text-decoration: none;
}
.user-panel .info a:hover{ color: var(--ds-accent); }

/* ---- botões "soft" (pílula, fundo tintado por categoria) ----
   Usar em barras de ação de card-header (ex.: pagamentos_lista.php).
   Um botão sólido (.btn-primary) para a ação principal + estes ao redor
   para as ações secundárias, com cor indicando a natureza da ação. */
.btn-soft{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 15px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  line-height: 1.3;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
.btn-soft:hover{ transform: translateY(-1px); box-shadow: 0 4px 12px rgba(16,20,26,.10); text-decoration: none; }
.btn-soft:active{ transform: translateY(0); }
.btn-soft i{ font-size: 12px; }

.btn-soft-primary{
  background: var(--ds-accent-bg);
  color: var(--ds-accent);
  border-color: rgba(255,138,0,.28);
}
.btn-soft-primary:hover{ background: var(--ds-accent); color: var(--ds-accent-ink); }

.btn-soft-neutral{
  background: var(--bs-tertiary-bg, #f1f3f5);
  color: var(--ds-ink-soft);
  border-color: var(--ds-line);
}
.btn-soft-neutral:hover{ background: var(--bs-secondary-bg, #e9ecef); color: var(--bs-body-color); }

.btn-soft-danger{
  background: rgba(220,53,69,.08);
  color: #dc3545;
  border-color: rgba(220,53,69,.22);
}
.btn-soft-danger:hover{ background: #dc3545; color: #fff; }

.btn-soft-info{
  background: rgba(13,110,253,.08);
  color: #0d6efd;
  border-color: rgba(13,110,253,.22);
}
.btn-soft-info:hover{ background: #0d6efd; color: #fff; }

.btn-soft-warning{
  background: var(--ds-warning-bg);
  color: var(--ds-warning);
  border-color: rgba(184,134,11,.3);
}
.btn-soft-warning:hover{ background: var(--ds-warning); color: #fff; }

/* ---- badge/pill de status (ex.: coluna "Situação" em listas) ---- */
.pill{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.pill .dot{ width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.pill-success{ color: var(--ds-success); background: var(--ds-success-bg); }
.pill-warning{ color: var(--ds-warning); background: var(--ds-warning-bg); }
.pill-danger{ color: var(--ds-danger); background: var(--ds-danger-bg); }
.pill-info{ color: var(--ds-info); background: var(--ds-info-bg); }
.pill-neutral{ color: var(--ds-ink-soft); background: var(--bs-tertiary-bg, #f1f3f5); }

/* ---- tabelas: zebrado e hover mais discretos, no tom do accent ---- */
.app-content .table-striped > tbody > tr:nth-of-type(odd) > *{
  background-color: var(--bs-tertiary-bg, rgba(0,0,0,.02));
  color: inherit;
}
.app-content .table-hover > tbody > tr:hover > *{
  background-color: var(--ds-accent-bg);
  color: inherit;
}

/* ---- tela de login: link "esqueci minha senha" ---- */
.login-link{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ds-ink-soft);
  text-decoration: none;
}
.login-link i{ font-size: 11px; color: var(--ds-ink-faint); }
.login-link:hover{ color: var(--ds-accent); text-decoration: underline; }

/* ---- blocos coloridos de formulário longo (ex.: pagamentos_cadastro/editar.php) ----
 * Paleta categórica própria (não usa --ds-success/warning/danger/info: aqueles são
 * semânticos de estado, aqui é só agrupamento visual). Compartilhado por cadastro e
 * edição para os dois nunca divergirem — inclusive no grid responsivo, que substitui
 * o .row/.col do Bootstrap (fonte da divergência mobile entre as duas telas antes
 * desta mudança).
 */
.form-blocos{ display: flex; flex-direction: column; gap: 14px; }
.form-bloco{
  border-radius: var(--ds-radius);
  border: 1px solid var(--ds-line);
  border-left: 4px solid var(--bloco-accent, var(--ds-accent));
  background: var(--bloco-bg, var(--ds-accent-bg));
  padding: 14px 16px 16px;
}
.form-bloco-head{ display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.form-bloco-head::before{
  content: "";
  width: 22px; height: 22px;
  border-radius: 7px;
  flex: none;
  background: var(--bloco-accent, var(--ds-accent));
  opacity: .85;
}
.form-bloco-head h3{
  font-size: 12.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--bs-body-color, #20242c);
  font-weight: 800;
  margin: 0;
}
.form-bloco-head .cap{
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ds-ink-faint, #8a93a3);
  margin-left: 2px;
}
.form-bloco-head .opcional-tag{
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--ds-ink-faint, #8a93a3);
  border: 1px solid var(--ds-line);
  border-radius: 999px;
  padding: 1px 8px;
  flex: none;
}
.form-bloco-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
.form-bloco-grid.g2{ grid-template-columns: repeat(2, 1fr); }
.form-bloco-grid.g1{ grid-template-columns: 1fr; }
.form-bloco-grid.g-insumos{ grid-template-columns: 2fr 1fr 1fr 1fr 1fr auto; align-items: end; }
/* g-colaboradores fica sempre numa linha so (nao empilha no responsivo,
   ver pedido do usuario) - rola horizontal em telas estreitas em vez de
   quebrar os campos em varias linhas. */
.form-bloco-grid.g-colaboradores{
  grid-template-columns: minmax(220px, 2fr) minmax(220px, 2fr) minmax(120px, 1fr) minmax(140px, 1fr) minmax(110px, auto) !important;
  align-items: end;
  overflow-x: auto;
  padding-bottom: 4px;
}
.form-bloco-grid > .form-group,
.form-bloco-grid > div{ margin-bottom: 0; }
@media (max-width: 820px){
  .form-bloco-grid{ grid-template-columns: repeat(2, 1fr) !important; }
  .form-bloco-grid.g-insumos{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .form-bloco-grid{ grid-template-columns: 1fr !important; }
  .form-bloco{ padding: 12px 12px 14px; }
}

.form-bloco[data-cor="classificacao"]{ --bloco-accent: #64748B; --bloco-bg: rgba(100,116,139,.13); }
.form-bloco[data-cor="notafiscal"]{ --bloco-accent: #3B82F6; --bloco-bg: rgba(59,130,246,.12); }
.form-bloco[data-cor="pagamento"]{ --bloco-accent: var(--ds-accent); --bloco-bg: var(--ds-accent-bg); }
.form-bloco[data-cor="quitacao"]{ --bloco-accent: #22C55E; --bloco-bg: rgba(34,197,94,.12); }
.form-bloco[data-cor="boleto"]{ --bloco-accent: #8B5CF6; --bloco-bg: rgba(139,92,246,.12); }
.form-bloco[data-cor="organizacao"]{ --bloco-accent: #14B8A6; --bloco-bg: rgba(20,184,166,.12); }
.form-bloco[data-cor="observacao"]{ --bloco-accent: #9CA3AF; --bloco-bg: rgba(156,163,175,.12); }
.form-bloco[data-cor="insumos"]{ --bloco-accent: #F59E0B; --bloco-bg: rgba(245,158,11,.13); }
[data-bs-theme="dark"] .form-bloco[data-cor="classificacao"]{ --bloco-bg: rgba(148,163,184,.18); }
[data-bs-theme="dark"] .form-bloco[data-cor="notafiscal"]{ --bloco-bg: rgba(96,165,250,.18); }
[data-bs-theme="dark"] .form-bloco[data-cor="quitacao"]{ --bloco-bg: rgba(74,222,128,.18); }
[data-bs-theme="dark"] .form-bloco[data-cor="boleto"]{ --bloco-bg: rgba(167,139,250,.18); }
[data-bs-theme="dark"] .form-bloco[data-cor="organizacao"]{ --bloco-bg: rgba(45,212,191,.18); }
[data-bs-theme="dark"] .form-bloco[data-cor="observacao"]{ --bloco-bg: rgba(156,163,175,.14); }
[data-bs-theme="dark"] .form-bloco[data-cor="insumos"]{ --bloco-bg: rgba(251,191,36,.18); }

.form-bloco .table-responsive{ margin-top: 12px; }

/* Sub-painel de "adicionar item" (insumos/colaboradores) — destaca a area
   de composicao de linha dentro do bloco, separando-a visualmente da lista
   ja adicionada abaixo (pedido do usuario: "as vezes fica perdido"). */
.bloco-add-panel{
  border: 1.5px dashed var(--bloco-accent, var(--ds-accent));
  border-radius: calc(var(--ds-radius) - 2px);
  background: color-mix(in srgb, var(--bloco-accent, var(--ds-accent)) 6%, var(--ds-surface, #fff));
  padding: 12px 12px 10px;
  margin-bottom: 10px;
}
@supports not (background: color-mix(in srgb, red 6%, white)){
  .bloco-add-panel{ background: var(--ds-surface, #fff); }
}
.bloco-add-panel .form-bloco-grid{ margin-bottom: 0; }
.login-link:hover i{ color: var(--ds-accent); }