@font-face {
  font-family: "Open Sans";
  src: url("/fonts/open-sans/OpenSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/open-sans/OpenSans-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

html, body {
  font-family: var(--sw-font-sans);
}

:root {
  --bs-primary: #6337fe;
  --bs-primary-rgb: 99, 55, 254;
  --sw-font-sans: "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --sw-on-primary: #ffffff;
}

/* ===== Dark mode: primary verde + texto/ícone escuro ===== */
html[data-bs-theme="dark"] {
  --bs-primary: #d0ff59;
  --bs-primary-rgb: 208, 255, 89;

  --sw-on-primary: #1B2306;

  /* Vars do Bootstrap 5.3+ que ajudam vários componentes */
  --bs-primary-text-emphasis: #1B2306;

  --bs-nav-pills-link-active-color: #1B2306;
  --bs-nav-pills-link-active-bg: var(--bs-primary);

  --bs-dropdown-link-active-color: #1B2306;
  --bs-dropdown-link-active-bg: var(--bs-primary);

  --bs-pagination-active-color: #1B2306;
  --bs-pagination-active-bg: var(--bs-primary);
  --bs-pagination-active-border-color: var(--bs-primary);

  --bs-list-group-active-color: #1B2306;
  --bs-list-group-active-bg: var(--bs-primary);
  --bs-list-group-active-border-color: var(--bs-primary);
}

/* ===== Garantias (força em componentes que costumam hardcodear branco) ===== */

/* Botão primary e qualquer ícone dentro */
html[data-bs-theme="dark"] .btn-primary,
html[data-bs-theme="dark"] .btn-primary:hover,
html[data-bs-theme="dark"] .btn-primary:focus,
html[data-bs-theme="dark"] .btn-primary:active,
html[data-bs-theme="dark"] .btn-primary:disabled,
html[data-bs-theme="dark"] .btn-primary .bx,
html[data-bs-theme="dark"] .btn-primary i {
  color: var(--sw-on-primary) !important;
}

/* Outline primary: quando vira preenchido (hover/active/checked) */
html[data-bs-theme="dark"] .btn-outline-primary:hover,
html[data-bs-theme="dark"] .btn-outline-primary:focus,
html[data-bs-theme="dark"] .btn-outline-primary:active,
html[data-bs-theme="dark"] .btn-check:checked + .btn-outline-primary,
html[data-bs-theme="dark"] .btn-check:active + .btn-outline-primary,
html[data-bs-theme="dark"] .btn-outline-primary.dropdown-toggle.show {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
  color: var(--sw-on-primary) !important;
}

/* Pills ativas (como na tela de Aparência) e ícones internos */
html[data-bs-theme="dark"] .nav-pills .nav-link.active,
html[data-bs-theme="dark"] .nav-pills .show > .nav-link,
html[data-bs-theme="dark"] .nav-pills .nav-link.active .bx,
html[data-bs-theme="dark"] .nav-pills .nav-link.active i {
  color: var(--sw-on-primary) !important;
}

/* Itens ativos em dropdown e list-group */
html[data-bs-theme="dark"] .dropdown-item.active,
html[data-bs-theme="dark"] .dropdown-item:active,
html[data-bs-theme="dark"] .list-group-item.active {
  color: var(--sw-on-primary) !important;
}

/* Paginação ativa */
html[data-bs-theme="dark"] .page-item.active .page-link {
  color: var(--sw-on-primary) !important;
}

/* Utilitários Bootstrap: fundos primary */
html[data-bs-theme="dark"] .bg-primary,
html[data-bs-theme="dark"] .bg-primary .bx,
html[data-bs-theme="dark"] .bg-primary i,
html[data-bs-theme="dark"] .text-bg-primary,
html[data-bs-theme="dark"] .text-bg-primary .bx,
html[data-bs-theme="dark"] .text-bg-primary i,
html[data-bs-theme="dark"] .badge.bg-primary,
html[data-bs-theme="dark"] .badge.bg-primary .bx,
html[data-bs-theme="dark"] .badge.bg-primary i {
  color: var(--sw-on-primary) !important;
}

/* Checkbox/Radio: troca o "check" branco por um check escuro */
html[data-bs-theme="dark"] .form-check-input:checked[type="checkbox"] {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%231B2306' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

html[data-bs-theme="dark"] .form-check-input:checked[type="radio"] {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%231B2306'/%3e%3c/svg%3e");
}

/* Switch (form-switch): melhora contraste do “thumb” */
html[data-bs-theme="dark"] .form-switch .form-check-input:checked {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%231B2306'/%3e%3c/svg%3e");
}

/* ===== Sidebar logo: troca instantânea via CSS (sem flash) ===== */
.sidebar-logo-dark  { display: none; }
.sidebar-logo-light { display: inline; }
html[data-bs-theme="dark"] .sidebar-logo-dark  { display: inline; }
html[data-bs-theme="dark"] .sidebar-logo-light { display: none; }

/* ===== Sneat sidebar: item ativo/open com primary verde ===== */
html[data-bs-theme="dark"] .menu-vertical .menu-item.active > .menu-link,
html[data-bs-theme="dark"] .menu-vertical .menu-item.open > .menu-link,
html[data-bs-theme="dark"] .menu-vertical .menu-sub .menu-item.active > .menu-link {
  color: var(--sw-on-primary) !important;
}

/* ícones do item ativo/open */
html[data-bs-theme="dark"] .menu-vertical .menu-item.active > .menu-link .menu-icon,
html[data-bs-theme="dark"] .menu-vertical .menu-item.open > .menu-link .menu-icon,
html[data-bs-theme="dark"] .menu-vertical .menu-sub .menu-item.active > .menu-link .menu-icon,
html[data-bs-theme="dark"] .menu-vertical .menu-item.active > .menu-link i,
html[data-bs-theme="dark"] .menu-vertical .menu-item.open > .menu-link i,
html[data-bs-theme="dark"] .menu-vertical .menu-sub .menu-item.active > .menu-link i,
html[data-bs-theme="dark"] .menu-vertical .menu-item.active > .menu-link .bx,
html[data-bs-theme="dark"] .menu-vertical .menu-item.open > .menu-link .bx,
html[data-bs-theme="dark"] .menu-vertical .menu-sub .menu-item.active > .menu-link .bx {
  color: var(--sw-on-primary) !important;
}

/* seta (caret) do menu-toggle em itens abertos/ativos */
html[data-bs-theme="dark"] .menu-vertical .menu-item.open > .menu-link.menu-toggle::after,
html[data-bs-theme="dark"] .menu-vertical .menu-item.active > .menu-link.menu-toggle::after {
  color: var(--sw-on-primary) !important;
}