/* ==========================================================================
   BuyCore — Aplicacao dos tokens
   Carregado por ULTIMO no index.html, de proposito: sobrepoe os defaults do
   Bootstrap e do template (style.css) sem precisar editar as 35 mil linhas.
   Tokens: /css/custom-base.css
   ========================================================================== */

/* ---------- Base ---------- */
body {
  font-family: var(--font-sistema), sans-serif;
  font-size: var(--texto-base);
  color: var(--cor-texto);
  background-color: var(--cor-base-fundo);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- Escala tipografica ---------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-titulo), sans-serif;
  color: var(--cor-texto);
  letter-spacing: -0.01em;
  margin-bottom: 0;
}

h1 { font-size: var(--texto-xl); font-weight: var(--peso-semi); }
h2 { font-size: var(--texto-xl); font-weight: var(--peso-semi); }
h3 { font-size: var(--texto-lg); font-weight: var(--peso-semi); }
h4 { font-size: var(--texto-md); font-weight: var(--peso-semi); }
h5 { font-size: var(--texto-md); font-weight: var(--peso-semi); }
h6 { font-size: var(--texto-base); font-weight: var(--peso-semi); }

small, .small { font-size: var(--texto-xs); }
.text-muted { color: var(--cor-texto-suave) !important; }

/* Titulo de secao de formulario: era so um padding-top solto.
   Agora tem regra divisoria e hierarquia clara. */
.form-sub-title {
  font-size: var(--texto-sm);
  font-weight: var(--peso-semi);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cor-texto-suave);
  padding-top: 0;
  margin-top: var(--esp-5);
  margin-bottom: var(--esp-4);
  padding-bottom: var(--esp-2);
  border-bottom: 1px solid var(--cor-borda);
}

.form-sub-title:first-child { margin-top: 0; }

/* ---------- Cards: borda leve em vez de sombra dura ---------- */
.card {
  background-color: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-sm);
}

.card .card-body { padding: var(--esp-5); }

/* ---------- Botoes ---------- */
.btn {
  font-size: var(--texto-base);
  font-weight: var(--peso-medio);
  border-radius: var(--raio-md);
  padding: 0.5rem 1rem;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  line-height: 1.4;
}

.btn:focus, .btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--primaria-100);
}

.btn-primary,
.btn-primary:visited {
  background-color: var(--cor-btn-primary-fundo);
  border-color: var(--cor-btn-primary-borda);
  color: var(--cor-btn-primary-letra);
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus {
  background-color: var(--cor-btn-primary-fundo-selecionado);
  border-color: var(--cor-btn-primary-borda-selecionado);
  color: var(--cor-btn-primary-letra-selecionado);
}

/* Secundario deixa de ser cinza-chumbo e passa a ser contorno neutro */
.btn-secondary,
.btn-secondary:visited {
  background-color: var(--cor-superficie);
  border-color: var(--cor-borda-forte);
  color: var(--cor-texto);
}

.btn-secondary:hover,
.btn-secondary:active,
.btn-secondary:focus {
  background-color: var(--neutro-100);
  border-color: var(--cor-borda-forte);
  color: var(--cor-texto);
}

.btn-danger {
  background-color: var(--cor-erro);
  border-color: var(--cor-erro);
}

/* Botao de ACAO (conversao) — laranja.
   Use no maximo UM por tela, no botao de maior valor. Aplicado por className,
   mantendo color="primary" no componente para o fallback nao ficar sem estilo. */
.btn.btn-acao,
.btn.btn-acao:visited {
  background-color: var(--cor-acao);
  border-color: var(--cor-acao);
  color: var(--cor-acao-letra);
  font-weight: var(--peso-semi);
  box-shadow: 0 1px 2px 0 rgba(194, 65, 12, 0.24);
}

.btn.btn-acao:hover,
.btn.btn-acao:active,
.btn.btn-acao:focus {
  background-color: var(--cor-acao-hover);
  border-color: var(--cor-acao-hover);
  color: var(--cor-acao-letra);
}

.btn.btn-acao:focus, .btn.btn-acao:focus-visible {
  box-shadow: 0 0 0 3px var(--cor-acao-fundo);
}

.btn:disabled, .btn.disabled { opacity: .5; }

/* ---------- Badges tonais (fundo claro + texto escuro) ---------- */
.badge {
  font-size: var(--texto-xs);
  font-weight: var(--peso-medio);
  letter-spacing: 0.01em;
  padding: 0.3rem 0.6rem;
  border-radius: var(--raio-full);
  border: 1px solid transparent;
}

.badge.bg-success {
  background-color: var(--cor-sucesso-fundo) !important;
  border-color: var(--cor-sucesso-borda);
  color: var(--cor-sucesso) !important;
}

.badge.bg-warning {
  background-color: var(--cor-alerta-fundo) !important;
  border-color: var(--cor-alerta-borda);
  color: var(--cor-alerta) !important;
}

.badge.bg-danger {
  background-color: var(--cor-erro-fundo) !important;
  border-color: var(--cor-erro-borda);
  color: var(--cor-erro) !important;
}

.badge.bg-info {
  background-color: var(--cor-info-fundo) !important;
  border-color: var(--cor-info-borda);
  color: var(--cor-info) !important;
}

.badge.bg-primary {
  background-color: var(--primaria-50) !important;
  border-color: var(--primaria-200);
  color: var(--primaria-800) !important;
}

.badge.bg-secondary {
  background-color: var(--neutro-100) !important;
  border-color: var(--cor-borda);
  color: var(--neutro-600) !important;
}

/* ---------- Formularios ---------- */
.form-label, label {
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
  color: var(--cor-texto-suave);
  margin-bottom: var(--esp-1);
}

.form-control, .form-select {
  font-size: var(--texto-base);
  color: var(--cor-texto);
  background-color: var(--cor-superficie);
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio-md);
  padding: 0.5rem 0.75rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.form-control::placeholder { color: var(--cor-texto-fraco); }

.form-control:focus, .form-select:focus {
  border-color: var(--primaria-500);
  box-shadow: 0 0 0 3px var(--primaria-100);
}

.form-control.is-invalid, .form-control:invalid[class*="is-invalid"] {
  border-color: var(--cor-erro);
}

.form-control.is-invalid:focus {
  box-shadow: 0 0 0 3px var(--cor-erro-fundo);
}

.invalid-feedback { font-size: var(--texto-xs); color: var(--cor-erro); }

/* ---------- Tabelas (react-data-table-component) ---------- */
.rdt_TableHeadRow {
  border-bottom: 1px solid var(--cor-borda) !important;
  min-height: 44px !important;
}

.rdt_TableCol {
  font-size: var(--texto-xs) !important;
  font-weight: var(--peso-semi) !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cor-texto-suave) !important;
}

.rdt_TableRow {
  border-bottom: 1px solid var(--cor-borda) !important;
  min-height: 52px !important;
  font-size: var(--texto-base) !important;
  color: var(--cor-texto) !important;
}

/* As 30 listas passam customStyles inline com radius 25px e hover azulado.
   Estilo inline só perde para !important — daí o uso aqui. */
.rdt_TableRow:hover {
  background-color: var(--primaria-50) !important;
  border-radius: 0 !important;
  outline: none !important;
}

.rdt_TableCell { color: var(--cor-texto) !important; }
.rdt_Pagination { border-top: 1px solid var(--cor-borda) !important; color: var(--cor-texto-suave) !important; }

/* ---------- Modal ---------- */
.modal-content {
  border: none;
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-modal);
}

.modal-header {
  border-bottom: 1px solid var(--cor-borda);
  padding: var(--esp-4) var(--esp-5);
}

.modal-body { padding: var(--esp-5); }

.modal-footer {
  border-top: 1px solid var(--cor-borda);
  padding: var(--esp-3) var(--esp-5);
  gap: var(--esp-2);
}

/* ---------- Topo ---------- */
.navbar {
  background: var(--cor-topo-fundo);
  color: var(--cor-topo-letra);
  border-bottom: 1px solid var(--primaria-900);
}

.navbar .navbar-menu-wrapper {
  height: auto;
  padding-top: var(--esp-4);
  padding-bottom: var(--esp-4);
}

/* ---------- Menu lateral ---------- */
.sidebar .nav .nav-item .nav-link {
  color: var(--cor-menu-letra);
  font-size: var(--texto-base);
  font-weight: var(--peso-medio);
  border-radius: var(--raio-md);
  margin: 2px var(--esp-2);
  padding: 0.6rem var(--esp-3);
  gap: var(--esp-3);
  transition: background-color .15s ease, color .15s ease;
}

.sidebar .nav .nav-item .nav-link:hover {
  background-color: var(--cor-menu-fundo-selecionado);
  color: var(--cor-menu-letra-selecionado);
}

.sidebar .nav .nav-item .nav-link .menu-icon { color: var(--cor-menu-icone); }
.sidebar .nav .nav-item .nav-link:hover .menu-icon { color: var(--cor-menu-icone-selecionado); }

.sub-menu .nav-item .nav-link { font-size: var(--texto-sm); }

/* ---------- Menu lateral: logo fixo, itens rolam, rodape ancorado ----------
   O custom-cli.css declara .sidebar-footer { min-height: 100vh } e um
   margin-bottom de 60px no .nav-footer. Como o rodape vem DEPOIS do menu no
   fluxo, "Suporte" e "Sair" caiam fora da area visivel do offcanvas. */
/* O Offcanvas do Bootstrap ja e flex-column, entao o wrapper precisa crescer
   como flex item — height:100% sozinho nao basta em todos os navegadores. */
.menu-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.menu-wrapper .menu-logo {
  flex: 0 0 auto;
  border-bottom: 1px solid var(--cor-borda);
  margin: 0;
}

.menu-wrapper .sidebar {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  padding-top: var(--esp-2);
}

.menu-wrapper .sidebar-footer {
  flex: 0 0 auto;
  min-height: auto;
  margin-top: auto;
  background: var(--cor-menu-rodape-fundo);
  border-top: 1px solid var(--cor-borda);
}

.menu-wrapper .sidebar-footer .nav-footer {
  margin-bottom: 0;
  padding: var(--esp-2) 0;
}

.menu-wrapper .sidebar-footer .nav-footer .nav-item-footer .nav-link-footer {
  color: var(--cor-menu-rodape-letra);
  padding: 0.6rem var(--esp-3);
  gap: var(--esp-3);
  border-radius: var(--raio-md);
  margin: 2px var(--esp-2);
  transition: background-color .15s ease, color .15s ease;
}

.menu-wrapper .sidebar-footer .nav-footer .nav-item-footer .nav-link-footer:hover {
  background-color: var(--cor-superficie);
  color: var(--cor-texto);
}

.menu-wrapper .sidebar-footer .nav-footer .nav-item-footer .nav-link-footer .menu-title-footer {
  font-size: var(--texto-base);
  font-weight: var(--peso-medio);
}

.menu-wrapper .sidebar-footer .menu-icon { color: var(--cor-menu-icone); }

/* ---------- Offcanvas ---------- */
.offcanvas { border: none; box-shadow: var(--sombra-lg); }
.offcanvas-header { border-bottom: 1px solid var(--cor-borda); }

/* ---------- Cabecalho de pagina (usado nas Home pages) ---------- */
.row_between_line {
  gap: var(--esp-3);
}

/* ---------- Icones ---------- */
.click, .click-icon { cursor: pointer; }

.click-icon {
  border-radius: var(--raio-md);
  transition: background-color .15s ease;
}

.click-icon:hover { background-color: var(--neutro-100); }

/* ---------- Tooltip ---------- */
.tooltip-inner {
  font-size: var(--texto-xs);
  background-color: var(--neutro-800);
  border-radius: var(--raio-sm);
  padding: var(--esp-1) var(--esp-2);
}

/* Tooltip sem conteudo (varias telas nao definem tooltipKey) fica invisivel
   em vez de aparecer como uma caixinha preta vazia. */
.tooltip-inner:empty { display: none; }