/* ============================================================
   Argos — SweetAlert2 Modern Theme
   Sobrescreve o visual padrão do Swal2 para alinhar com
   .modal-modern (badges coloridos, btn-modal-*, cores Argos).
   Aplicado globalmente via js/componentes/swal-modern.js
   ============================================================ */

/* ---------- Popup base ---------- */
.swal2-container.swal-modern-container {
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 10001 !important;  /* Acima do side-panel (1100), modais admin (9000) e do sidebar-collapse-btn (10000) */
}
.swal2-popup.swal-modern {
    padding: 1rem 1.25rem !important;
    border-radius: 0.875rem !important;
    box-shadow: 0 24px 48px -12px rgba(15, 23, 42, 0.25),
                0 8px 16px -4px rgba(15, 23, 42, 0.10) !important;
    border: 1px solid #e2e8f0 !important;
    background: #fff !important;
    color: #1e293b !important;
    text-align: left !important;
    font-family: inherit !important;
    z-index: 1102 !important;  /* Acima do container backdrop */
}

/* ---------- Header (ícone + título lado a lado) ---------- */
/* Esconde o ícone nativo do Swal — usamos o badge customizado */
.swal2-popup.swal-modern .swal2-icon { display: none !important; }

/* Wrapper que agrupa o badge + título em flex row */
.swal-modern__header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}
.swal-modern__icon-badge {
    width: 2.125rem;
    height: 2.125rem;
    border-radius: 0.625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: #eff6ff; /* default = info */
}
.swal-modern__icon-badge i {
    font-size: 0.95rem;
    color: #2563eb;
}
/* Variantes do badge por tipo */
.swal-modern--success .swal-modern__icon-badge { background: #f0fdf4; }
.swal-modern--success .swal-modern__icon-badge i { color: #16a34a; }
.swal-modern--error   .swal-modern__icon-badge,
.swal-modern--danger  .swal-modern__icon-badge { background: #fef2f2; }
.swal-modern--error   .swal-modern__icon-badge i,
.swal-modern--danger  .swal-modern__icon-badge i { color: #dc2626; }
.swal-modern--warning .swal-modern__icon-badge { background: #fffbeb; }
.swal-modern--warning .swal-modern__icon-badge i { color: #d97706; }
.swal-modern--info    .swal-modern__icon-badge { background: #eff6ff; }
.swal-modern--info    .swal-modern__icon-badge i { color: #2563eb; }
.swal-modern--question .swal-modern__icon-badge { background: #f5f3ff; }
.swal-modern--question .swal-modern__icon-badge i { color: #7c3aed; }

/* ---------- Título ---------- */
.swal2-popup.swal-modern .swal2-title {
    font-size: 1.0625rem !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    line-height: 1.3 !important;
    text-align: left !important;
    padding: 0 !important;
    margin: 0 !important;
    flex: 1;
    min-width: 0;
}
/* Quando o título está dentro do header customizado, ele cresce normalmente.
   Quando NÃO há header (sem ícone), o título mantém alinhamento à esquerda. */
.swal2-popup.swal-modern > .swal2-title {
    margin-bottom: 0.5rem !important;
}

/* ---------- Conteúdo (texto/HTML) ---------- */
.swal2-popup.swal-modern .swal2-html-container {
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
    color: #475569 !important;
    text-align: left !important;
    padding: 0 !important;
    margin: 0 0 1rem !important;
    overflow: visible !important;
}
.swal2-popup.swal-modern .swal2-html-container:empty {
    margin: 0 !important;
}
.swal2-popup.swal-modern strong,
.swal2-popup.swal-modern b {
    color: #1e293b;
    font-weight: 600;
}

/* ---------- Callouts internos (HIGH PRIORITY / WARNING / DANGER) ---------- */
.swal-callout {
    display: flex;
    gap: 0.625rem;
    align-items: flex-start;
    padding: 0.625rem 0.75rem;
    border-radius: 0.5rem;
    border-left: 3px solid;
    margin: 0.5rem 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    text-align: left;
}
.swal-callout__icon { flex-shrink: 0; margin-top: 1px; font-size: 0.875rem; }
.swal-callout__body { flex: 1; min-width: 0; }
.swal-callout__title {
    display: block;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 0.125rem;
}
.swal-callout__text { color: #475569; }
.swal-callout--info    { background: #eff6ff; border-color: #3b82f6; }
.swal-callout--info    .swal-callout__icon,
.swal-callout--info    .swal-callout__title { color: #2563eb; }
.swal-callout--warning { background: #fffbeb; border-color: #f59e0b; }
.swal-callout--warning .swal-callout__icon,
.swal-callout--warning .swal-callout__title { color: #b45309; }
.swal-callout--danger,
.swal-callout--error   { background: #fef2f2; border-color: #ef4444; }
.swal-callout--danger  .swal-callout__icon,
.swal-callout--danger  .swal-callout__title,
.swal-callout--error   .swal-callout__icon,
.swal-callout--error   .swal-callout__title { color: #b91c1c; }
.swal-callout--success { background: #f0fdf4; border-color: #22c55e; }
.swal-callout--success .swal-callout__icon,
.swal-callout--success .swal-callout__title { color: #15803d; }

/* Dark: os fundos acima são pasteis claros e o texto é #475569 — dentro do popup
   escuro viraria uma caixa branca. Fundo translúcido da própria cor de acento
   mantém a leitura de "callout" nos dois temas. */
[data-theme="dark"] .swal-callout__text { color: #cbd5e1; }
[data-theme="dark"] .swal-callout--info    { background: rgba(59, 130, 246, .12); }
[data-theme="dark"] .swal-callout--info    .swal-callout__icon,
[data-theme="dark"] .swal-callout--info    .swal-callout__title { color: #93c5fd; }
[data-theme="dark"] .swal-callout--warning { background: rgba(245, 158, 11, .12); }
[data-theme="dark"] .swal-callout--warning .swal-callout__icon,
[data-theme="dark"] .swal-callout--warning .swal-callout__title { color: #fcd34d; }
[data-theme="dark"] .swal-callout--danger,
[data-theme="dark"] .swal-callout--error   { background: rgba(239, 68, 68, .12); }
[data-theme="dark"] .swal-callout--danger  .swal-callout__icon,
[data-theme="dark"] .swal-callout--danger  .swal-callout__title,
[data-theme="dark"] .swal-callout--error   .swal-callout__icon,
[data-theme="dark"] .swal-callout--error   .swal-callout__title { color: #fca5a5; }
[data-theme="dark"] .swal-callout--success { background: rgba(34, 197, 94, .12); }
[data-theme="dark"] .swal-callout--success .swal-callout__icon,
[data-theme="dark"] .swal-callout--success .swal-callout__title { color: #86efac; }

/* ---------- Actions / Botões ---------- */
.swal2-popup.swal-modern .swal2-actions {
    margin: 0.5rem 0 0 !important;
    padding: 0.75rem 0 0 !important;
    border-top: 1px solid #f1f5f9;
    gap: 0.5rem !important;
    justify-content: flex-end !important;
    flex-wrap: wrap;
}
/* Reusa os botões do projeto (.btn-modal-*).
   IMPORTANTE: NÃO usar `display: ... !important` — o Swal controla visibilidade
   via inline `style="display: none"` em botões desabilitados. Inline styles
   sem !important já vencem nossas regras, então o botão escondido continua escondido. */
.swal2-popup.swal-modern .swal2-confirm,
.swal2-popup.swal-modern .swal2-deny,
.swal2-popup.swal-modern .swal2-cancel {
    margin: 0 !important;
    padding: 0.5rem 1.25rem !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    border-radius: 0.625rem !important;
    line-height: 1.4 !important;
    display: inline-flex;
    align-items: center !important;
    gap: 0.375rem;
    box-shadow: none !important;
    border: none !important;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.1s ease;
}
.swal2-popup.swal-modern .swal2-confirm:active,
.swal2-popup.swal-modern .swal2-deny:active,
.swal2-popup.swal-modern .swal2-cancel:active { transform: translateY(1px); }

/* Confirm (primário azul) */
.swal2-popup.swal-modern .swal2-confirm {
    background-color: var(--color-primary) !important;
    color: #fff !important;
}
.swal2-popup.swal-modern .swal2-confirm:hover { background-color: #1d4ed8 !important; }

/* Deny (variante secundária/success/danger dependendo da classe extra) */
.swal2-popup.swal-modern .swal2-deny {
    background-color: #16a34a !important;
    color: #fff !important;
}
.swal2-popup.swal-modern .swal2-deny:hover { background-color: #15803d !important; }

/* Cancel (ghost) */
.swal2-popup.swal-modern .swal2-cancel {
    background-color: #fff !important;
    color: #64748b !important;
    border: 1.5px solid #e2e8f0 !important;
    font-weight: 500 !important;
}
.swal2-popup.swal-modern .swal2-cancel:hover {
    background-color: #F4F4F4 !important;
    color: #334155 !important;
}

/* Variantes por tipo do popup — confirm vermelho em delete */
.swal-modern--danger .swal2-confirm,
.swal-modern--error  .swal2-confirm {
    background-color: #dc2626 !important;
}
.swal-modern--danger .swal2-confirm:hover,
.swal-modern--error  .swal2-confirm:hover { background-color: #b91c1c !important; }

.swal-modern--success .swal2-confirm {
    background-color: #16a34a !important;
}
.swal-modern--success .swal2-confirm:hover { background-color: #15803d !important; }

.swal-modern--warning .swal2-confirm {
    background-color: #d97706 !important;
}
.swal-modern--warning .swal2-confirm:hover { background-color: #b45309 !important; }

/* Foco */
.swal2-popup.swal-modern .swal2-confirm:focus,
.swal2-popup.swal-modern .swal2-deny:focus,
.swal2-popup.swal-modern .swal2-cancel:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.18) !important;
}

/* ---------- Inputs dentro do Swal ---------- */
.swal2-popup.swal-modern .swal2-input,
.swal2-popup.swal-modern .swal2-textarea,
.swal2-popup.swal-modern .swal2-select,
.swal2-popup.swal-modern .swal2-file {
    background: #F4F4F4 !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 0.625rem !important;
    font-size: 0.875rem !important;
    padding: 0.5rem 0.75rem !important;
    box-shadow: none !important;
    margin: 0.25rem 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}
.swal2-popup.swal-modern .swal2-input:focus,
.swal2-popup.swal-modern .swal2-textarea:focus,
.swal2-popup.swal-modern .swal2-select:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59,130,246,.12) !important;
    background: #fff !important;
    outline: none !important;
}
.swal2-popup.swal-modern .swal2-input-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: #64748b;
    margin: 0.25rem 0;
    text-align: left;
}
.swal2-popup.swal-modern .swal2-validation-message {
    background: #fef2f2 !important;
    color: #b91c1c !important;
    font-size: 0.8125rem !important;
    border-radius: 0.5rem !important;
    margin-top: 0.5rem !important;
    padding: 0.5rem 0.75rem !important;
}

/* ---------- Timer / Progress bar (session timeout style) ----------
   Swal sempre renderiza o container (mesmo sem `timer`), o que cria a sensação
   de uma barra inerte abaixo dos botões. Escondemos por padrão.
   Para usar timer visual (ex.: countdown de sessão), passe a flag swalModern:
   { showTimerBar: true } no Swal.fire — esse flag aplica a classe
   `swal-modern--with-timer-bar` no popup via swal-modern.js. */
.swal2-popup.swal-modern .swal2-timer-progress-bar-container {
    display: none !important;
}
.swal2-popup.swal-modern.swal-modern--with-timer-bar .swal2-timer-progress-bar-container {
    display: block !important;
    background: #f1f5f9 !important;
    height: 0.375rem !important;
    border-radius: 9999px !important;
    margin: 0.5rem 0 0 !important;
    overflow: hidden;
    width: 100%;
    position: static !important;
}
.swal2-popup.swal-modern .swal2-timer-progress-bar {
    background: #2563eb !important;
    border-radius: 9999px !important;
}
.swal-modern--danger .swal2-timer-progress-bar,
.swal-modern--error  .swal2-timer-progress-bar { background: #dc2626 !important; }
.swal-modern--warning .swal2-timer-progress-bar { background: #d97706 !important; }
.swal-modern--success .swal2-timer-progress-bar { background: #16a34a !important; }

/* Linha "Remaining Time / 01:59" estilo img 3 */
.swal-modern__timer-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    margin-top: 0.5rem;
}
.swal-modern__timer-row .swal-modern__timer-value { color: #1e293b; }

/* ---------- Toast (canto da tela) ---------- */
.swal2-popup.swal-modern.swal2-toast {
    padding: 0.75rem 1rem !important;
    box-shadow: 0 10px 32px -8px rgba(15,23,42,0.25) !important;
    align-items: center !important;
}
.swal2-popup.swal-modern.swal2-toast .swal-modern__header { margin-bottom: 0; }
.swal2-popup.swal-modern.swal2-toast .swal2-title {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
}
.swal2-popup.swal-modern.swal2-toast .swal2-html-container {
    margin: 0 !important;
    font-size: 0.8125rem !important;
}
.swal2-popup.swal-modern.swal2-toast .swal2-actions { border-top: none !important; padding: 0 !important; margin-top: 0.5rem !important; }

/* ---------- Loader (Swal.showLoading) — padrão global do app ----------
   Anel giratório: trilha clara + arco inferior na cor primária. Vale para os
   popups .swal-modern E para os loaders "crus" (ex.: blockScreen do vis_cliente),
   por isso o seletor global div.swal2-loader. */
.swal2-popup.swal-modern .swal2-loader,
div.swal2-loader {
    width: 3rem !important;
    height: 3rem !important;
    border-width: 5px !important;
    border-style: solid !important;
    border-color: #e2e8f0 !important;
    border-bottom-color: #2563eb !important;
    border-radius: 50% !important;
    animation: swal2-rotate-loading 1s linear infinite !important;
}
[data-theme="dark"] .swal2-popup.swal-modern .swal2-loader,
[data-theme="dark"] div.swal2-loader {
    border-color: #334155 !important;
    border-bottom-color: #3b82f6 !important;
}

/* ---------- Dark mode (se o app ativar [data-theme="dark"]) ---------- */
[data-theme="dark"] .swal2-popup.swal-modern {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}
/* `strong`/`b` tinham cor clara (#1e293b, linha ~97) SEM contraparte dark.
   Especificidade (0,2,1) vence qualquer `[data-theme="dark"] .classe` (0,2,0),
   e este arquivo ainda carrega depois -- entao no tema escuro todo negrito de
   qualquer Swal ficava #1e293b sobre popup #1e293b: 1.00:1, invisivel.
   Defeito pre-existente, exposto pela formatacao de texto da notificacao. */
[data-theme="dark"] .swal2-popup.swal-modern strong,
[data-theme="dark"] .swal2-popup.swal-modern b { color: #f1f5f9 !important; }

[data-theme="dark"] .swal2-popup.swal-modern .swal2-title { color: #f1f5f9 !important; }
[data-theme="dark"] .swal2-popup.swal-modern .swal2-html-container { color: #cbd5e1 !important; }
[data-theme="dark"] .swal2-popup.swal-modern .swal2-actions { border-top-color: #334155; }
[data-theme="dark"] .swal2-popup.swal-modern .swal2-cancel {
    background-color: transparent !important;
    color: #cbd5e1 !important;
    border-color: #334155 !important;
}
/* Inputs e select em dark mode */
[data-theme="dark"] .swal2-popup.swal-modern .swal2-input,
[data-theme="dark"] .swal2-popup.swal-modern .swal2-textarea,
[data-theme="dark"] .swal2-popup.swal-modern .swal2-select,
[data-theme="dark"] .swal2-popup.swal-modern .swal2-file {
    background: #334155 !important;
    border-color: #475569 !important;
    color: #e2e8f0 !important;
}
[data-theme="dark"] .swal2-popup.swal-modern .swal2-input:focus,
[data-theme="dark"] .swal2-popup.swal-modern .swal2-textarea:focus,
[data-theme="dark"] .swal2-popup.swal-modern .swal2-select:focus {
    background: #475569 !important;
    border-color: #3b82f6 !important;
    color: #e2e8f0 !important;
}

/* ---------- Animações suaves ---------- */
.swal-modern-show {
    animation: swalModernIn 0.22s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.swal-modern-hide {
    animation: swalModernOut 0.18s cubic-bezier(0.4, 0, 0.2, 1) both;
}
@keyframes swalModernIn {
    from { opacity: 0; transform: translateY(-8px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}
@keyframes swalModernOut {
    from { opacity: 1; transform: translateY(0)    scale(1); }
    to   { opacity: 0; transform: translateY(-4px) scale(0.98); }
}

/* ---------- Select2 dentro do Swal (visual moderno, igual aos filtros) ---------- */
/* Aplicado quando aplicarSelect2EmSwal() converte o <select> nativo em Select2.
   Replica a estética dos inputs do tema (radius, bg, focus ring) e o destaque
   suave azul nas opções — em vez do dropdown nativo do SO. */
.swal2-popup.swal-modern .select2-container {
    width: 100% !important;
    margin: 0.25rem 0 !important;
    text-align: left;
}
.swal2-popup.swal-modern .select2-container .select2-selection--single {
    height: auto !important;
    min-height: 2.5rem;
    display: flex;
    align-items: center;
    background: #F4F4F4 !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 0.625rem !important;
    padding: 0.25rem 0.5rem !important;
}
.swal2-popup.swal-modern .select2-container .select2-selection--single .select2-selection__rendered {
    color: #1e293b;
    font-size: 0.875rem;
    line-height: 2rem;
    padding-left: 0.25rem;
}
.swal2-popup.swal-modern .select2-container .select2-selection--single .select2-selection__placeholder {
    color: #94a3b8;
}
.swal2-popup.swal-modern .select2-container .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
    top: 0 !important;
}
.swal2-popup.swal-modern .select2-container--open .select2-selection--single {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59,130,246,.12) !important;
    background: #fff !important;
}
/* Dropdown (parenteado ao popup do Swal) — largura calculada pelo Select2 a partir
   do controle (dropdownAutoWidth desligado). NÃO forçar width:100% aqui: o parent
   posicionado é o popup, então 100% estouraria além do select. */
.swal2-popup.swal-modern .select2-dropdown {
    box-sizing: border-box;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 0.625rem !important;
    box-shadow: 0 10px 30px rgba(15,23,42,.12) !important;
    overflow: hidden;
}
.swal2-popup.swal-modern .select2-search--dropdown .select2-search__field {
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 0.5rem !important;
    padding: 0.4rem 0.6rem !important;
    font-size: 0.85rem !important;
}
.swal2-popup.swal-modern .select2-results__option {
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
}
.swal2-popup.swal-modern .select2-results__option--highlighted[aria-selected] {
    background-color: #eff6ff !important;
    color: #1e40af !important;
}
.swal2-popup.swal-modern .select2-results__option[aria-selected="true"] {
    background-color: #dbeafe !important;
    color: #1e40af !important;
}

/* ---------- Select2 dentro do Swal em DARK ---------- */
/* O bloco claro acima usa !important com 4 classes de especificidade
   (.swal2-popup.swal-modern .select2-container .select2-selection--single), então vencia
   as regras dark genéricas do dark-mode.css. Resultado no tema escuro: controle #F4F4F4
   (e #fff ao abrir, por causa da regra --open) com o texto já clarinho por cima — que é
   o "fundo branco" reportado. Cada regra clara precisa da sua contraparte aqui: prefixar
   [data-theme="dark"] na MESMA cadeia dá a especificidade extra que faltava. */
[data-theme="dark"] .swal2-popup.swal-modern .select2-container .select2-selection--single {
    background: #334155 !important;
    border-color: #475569 !important;
}
/* O placeholder é o único texto que precisa de override aqui: o dark-mode.css global
   força `var(--dk-border-hover)` (#475569) com !important, que é exatamente o fundo do
   controle aberto — placeholder invisível. As cores de texto do VALOR e das opções ficam
   com os tokens globais do tema (já legíveis), por isso não são redeclaradas. */
[data-theme="dark"] .swal2-popup.swal-modern .select2-container .select2-selection--single .select2-selection__placeholder {
    color: #94a3b8 !important;
}
[data-theme="dark"] .swal2-popup.swal-modern .select2-container--open .select2-selection--single {
    background: #475569 !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .25) !important;
}
[data-theme="dark"] .swal2-popup.swal-modern .select2-dropdown {
    background: #1e293b !important;
    border-color: #475569 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .45) !important;
}
[data-theme="dark"] .swal2-popup.swal-modern .select2-search--dropdown .select2-search__field {
    background: #334155 !important;
    border-color: #475569 !important;
    color: #e2e8f0 !important;
}

[data-theme="dark"] .swal2-popup.swal-modern .select2-results__option--highlighted[aria-selected] {
    background-color: #1e40af !important;
    color: #eff6ff !important;
}
[data-theme="dark"] .swal2-popup.swal-modern .select2-results__option[aria-selected="true"] {
    background-color: #334155 !important;
    color: #f1f5f9 !important;
}

/* Mobile: padding e fontes ajustados */
@media (max-width: 640px) {
    .swal2-popup.swal-modern {
        padding: 1rem !important;
        max-width: calc(100vw - 1.5rem) !important;
        width: calc(100vw - 1.5rem) !important;
    }
    .swal2-popup.swal-modern .swal2-actions { justify-content: stretch !important; }
    .swal2-popup.swal-modern .swal2-actions > button { flex: 1 1 auto; justify-content: center; }
}