/* ============================================================================
   CANDIDATO — Sobreposições de terceiros no tema escuro
   ============================================================================

   O painel-v2 tem tema escuro por `[data-theme="dark"]`, que redefine os tokens
   em `tokens.css`. O que NÃO acompanha são as sobreposições que vêm de fora do
   design system e trazem branco, cinza e sombra fixos no próprio CSS:

     - Bootstrap 3 — `.modal-content`, `.dropdown-menu`, `.popover`, `.well`;
     - daterangepicker — o calendário de período dos dashboards, do Relatório de
       Pedidos e de Afiliados (anexado ao `<body>`, fora de qualquer card);
     - SweetAlert2 — `Swal`, usado pelo painel para aviso e confirmação.

   No tema escuro cada um deles vira um retângulo claro com o texto claro do
   painel por cima — ilegível. Nenhum é exclusivo de uma tela, por isso estão
   aqui e não num `pages/*.css`. As regras do daterangepicker vieram de
   `pages/report_sale_order.css`, onde só valiam para aquela tela.

   Escopo deliberado: **só** `[data-theme="dark"]`. O tema claro continua exatamente
   como está hoje, então promover ou reverter este arquivo não mexe no que já foi
   aprovado visualmente.

   Status: aguardando revisão do front-end para promover a
   `components/overlays-dark.css`.
   ============================================================================ */

/* ─── Modal ─────────────────────────────────────────────────────────────── */

[data-theme="dark"] .modal-content {
	border-color: var(--border-light-primary);
	background: var(--surface-light-primary);
	color: var(--text-dark-primary);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
	border-color: var(--border-light-secundary);
	background: none;
}

[data-theme="dark"] .modal-title {
	color: var(--text-dark-primary);
}

/* O `×` do Bootstrap é preto com `text-shadow` branco — some no escuro. */
[data-theme="dark"] .modal-header .close,
[data-theme="dark"] .alert .close {
	color: var(--text-dark-secundary);
	text-shadow: none;
	opacity: 1;
}

[data-theme="dark"] .modal-header .close:hover,
[data-theme="dark"] .alert .close:hover {
	color: var(--text-dark-primary);
}

[data-theme="dark"] .modal-backdrop.in {
	opacity: 0.65;
}

/* ─── Dropdown ──────────────────────────────────────────────────────────── */

[data-theme="dark"] .dropdown-menu {
	border-color: var(--border-light-primary);
	background: var(--surface-light-primary);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] .dropdown-menu > li > a {
	color: var(--text-dark-primary);
}

[data-theme="dark"] .dropdown-menu > li > a:hover,
[data-theme="dark"] .dropdown-menu > li > a:focus {
	background: var(--surface-light-quinteary);
	color: var(--text-dark-primary);
}

[data-theme="dark"] .dropdown-menu > .active > a,
[data-theme="dark"] .dropdown-menu > .active > a:hover,
[data-theme="dark"] .dropdown-menu > .active > a:focus {
	background: var(--surface-action-blue-default);
	color: var(--text-action-light-fixed, #fff);
}

[data-theme="dark"] .dropdown-menu .divider {
	background: var(--border-light-secundary);
}

[data-theme="dark"] .dropdown-header {
	color: var(--text-dark-secundary);
}

/* ─── Popover e tooltip ─────────────────────────────────────────────────── */

[data-theme="dark"] .popover {
	border-color: var(--border-light-primary);
	background: var(--surface-light-primary);
	color: var(--text-dark-primary);
}

[data-theme="dark"] .popover-title {
	border-color: var(--border-light-secundary);
	background: var(--surface-light-secundary);
	color: var(--text-dark-primary);
}

/* As setas do popover são `border-color` fixo apontando para o fundo branco. */
[data-theme="dark"] .popover.top > .arrow::after {
	border-top-color: var(--surface-light-primary);
}

[data-theme="dark"] .popover.bottom > .arrow::after {
	border-bottom-color: var(--surface-light-primary);
}

[data-theme="dark"] .popover.left > .arrow::after {
	border-left-color: var(--surface-light-primary);
}

[data-theme="dark"] .popover.right > .arrow::after {
	border-right-color: var(--surface-light-primary);
}

/* ─── Adornos de input-group ────────────────────────────────────────────── */

[data-theme="dark"] .input-group-addon {
	border-color: var(--border-light-primary);
	background: var(--surface-light-secundary);
	color: var(--text-dark-secundary);
}

/* ─── `.well` e `.panel`, ainda usados em telas legadas ─────────────────── */

[data-theme="dark"] .well,
[data-theme="dark"] .panel {
	border-color: var(--border-light-primary);
	background: var(--surface-light-secundary);
	color: var(--text-dark-primary);
}

[data-theme="dark"] .panel-heading,
[data-theme="dark"] .panel-footer {
	border-color: var(--border-light-secundary);
	background: var(--surface-light-terceary);
	color: var(--text-dark-primary);
}

/* ─── Calendário de período (daterangepicker) ───────────────────────────── */

/* O daterangepicker é anexado ao <body>, fora do card do relatório. O CSS da biblioteca
 * define cores claras fixas, então o componente precisa do mapeamento explícito para os
 * tokens do painel quando o tema escuro está ativo. */
[data-theme="dark"] .daterangepicker {
	border-color: var(--border-light-secundary);
	background: var(--surface-light-primary);
	color: var(--text-dark-primary);
	box-shadow: 0 12px 32px rgb(0 0 0 / 32%);
}

[data-theme="dark"] .daterangepicker::before {
	border-bottom-color: var(--border-light-secundary);
}

[data-theme="dark"] .daterangepicker::after {
	border-bottom-color: var(--surface-light-primary);
}

[data-theme="dark"] .daterangepicker .calendar-table,
[data-theme="dark"] .daterangepicker td.off,
[data-theme="dark"] .daterangepicker td.off.in-range,
[data-theme="dark"] .daterangepicker td.off.start-date,
[data-theme="dark"] .daterangepicker td.off.end-date {
	border-color: transparent;
	background: var(--surface-light-primary);
}

[data-theme="dark"] .daterangepicker .calendar-table {
	color: var(--text-dark-primary);
}

[data-theme="dark"] .daterangepicker .calendar-table th,
[data-theme="dark"] .daterangepicker .calendar-table td {
	color: var(--text-dark-primary);
}

[data-theme="dark"] .daterangepicker .calendar-table th {
	font-weight: 600;
}

[data-theme="dark"] .daterangepicker td.off,
[data-theme="dark"] .daterangepicker td.disabled,
[data-theme="dark"] .daterangepicker option.disabled {
	color: var(--text-disable);
}

[data-theme="dark"] .daterangepicker td.available:hover,
[data-theme="dark"] .daterangepicker th.available:hover {
	background: var(--surface-light-terceary);
	color: var(--text-dark-primary);
}

[data-theme="dark"] .daterangepicker td.in-range {
	background: var(--surface-blue-darkmode-light);
	color: var(--text-dark-primary);
}

[data-theme="dark"] .daterangepicker td.active,
[data-theme="dark"] .daterangepicker td.active:hover,
[data-theme="dark"] .daterangepicker .ranges li.active {
	background: var(--surface-action-blue-default);
	color: var(--text-action-light-fixed);
}

[data-theme="dark"] .daterangepicker .ranges li {
	color: var(--text-dark-secundary);
}

[data-theme="dark"] .daterangepicker .ranges li:hover {
	background: var(--surface-light-terceary);
	color: var(--text-dark-primary);
}

[data-theme="dark"] .daterangepicker .drp-calendar.left,
[data-theme="dark"] .daterangepicker .drp-buttons {
	border-color: var(--border-light-secundary);
}

[data-theme="dark"] .daterangepicker .drp-selected {
	color: var(--text-dark-secundary);
}

[data-theme="dark"] .daterangepicker .prev span,
[data-theme="dark"] .daterangepicker .next span {
	border-color: var(--icons-dark-primary);
}

[data-theme="dark"] .daterangepicker select.monthselect,
[data-theme="dark"] .daterangepicker select.yearselect {
	border-color: var(--border-light-secundary);
	background: var(--surface-light-secundary);
	color: var(--text-dark-primary);
}

[data-theme="dark"] .daterangepicker .cancelBtn {
	border-color: var(--border-light-secundary);
	background: var(--surface-light-terceary);
	color: var(--text-dark-primary);
}

/* ─── Diálogo do SweetAlert2 ────────────────────────────────────────────── */

/* Usado pelo aviso (`components/alert.js`) e pela confirmação
 * (`candidates/components/confirm.js`). A biblioteca só traz tema claro. */

[data-theme="dark"] .swal2-popup {
	background: var(--surface-light-primary);
	color: var(--text-dark-primary);
}

[data-theme="dark"] .swal2-title,
[data-theme="dark"] .swal2-html-container {
	color: var(--text-dark-primary);
}

[data-theme="dark"] .swal2-close {
	color: var(--icons-dark-secundary);
}

[data-theme="dark"] .swal2-close:hover {
	color: var(--icons-dark-primary);
}

/* Confirmação destrutiva: o botão de ação precisa dizer que apaga. */
.swal2-styled.pn-swal-confirm--danger {
	background: var(--red-500);
}

.swal2-styled.pn-swal-confirm--danger:hover {
	background: var(--red-600);
}