/**
 * Modal Loading - Design System
 *
 * Modal de carregamento/aguarde com spinner animado.
 * Baseado no modal-alert, usando mesmas cores e tamanhos.
 *
 * IMPORTANTE: Usa !important em background para sobrescrever o .modal base
 * que define background: var(--color-text-light) em modal.css linha 52.
 * Essa variável permanece clara mesmo no dark mode, causando conflito.
 *
 * @version 1.4.0
 * @date 2026-01-02
 * @fix Corrigido cores azuis hardcoded para usar cor primaria do projeto (vermelho)
 * @fix Removido blur do backdrop para loading - usuario deve ver o que esta por tras
 */

/* ==========================================================================
   Modal Loading - Backdrop SEM blur
   Durante o loading o usuario deve ver o que esta acontecendo
   ========================================================================== */

#modal-loading-instance.modal-backdrop,
.modal-loading-backdrop.modal-backdrop,
.modal-backdrop:has(.modal-loading) {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(18, 21, 31, 0.4) !important;
}

/* ==========================================================================
   Modal Loading - Container
   Usa mesmas cores do modal-alert para consistência e dark mode
   ========================================================================== */

.modal-loading {
    /* !important necessário para sobrescrever .modal { background: var(--color-text-light) } */
    background: var(--color-bg-secondary, #F6F6F9) !important;
    border-radius: var(--radius-lg, 12px);
    box-shadow: 0 35px 60px rgba(18, 21, 31, 0.12);
    border: 1px solid transparent;

    /* Tamanho igual ao modal-alert padrão */
    --modal-loading-max-width: 650px;
    width: min(var(--modal-loading-max-width), calc(100vw - 32px));
    padding: var(--spacing-3xl) clamp(var(--spacing-2xl), 8vw, var(--spacing-8xl));

    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;

    /* Posicionamento fixo centralizado */
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 10000;
}

/* ==========================================================================
   Modal Loading - Body
   ========================================================================== */

.modal-loading-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-4, 16px);
}

/* ==========================================================================
   Modal Loading - Spinner
   Cor primaria do projeto: vermelho #970707
   ========================================================================== */

.modal-loading-spinner {
    width: 48px;
    height: 48px;
    position: relative;
}

.modal-loading-spinner::before {
    content: '';
    box-sizing: border-box;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 4px solid var(--color-border, #CED3E2);
    border-top-color: var(--color-primary, #970707);
    animation: modal-loading-spin 0.8s linear infinite;
}

@keyframes modal-loading-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Spinner com cores por tipo */
.modal-loading--info .modal-loading-spinner::before {
    border-top-color: var(--color-info, #3b82f6);
}

.modal-loading--success .modal-loading-spinner::before {
    border-top-color: var(--color-success, #22c55e);
}

.modal-loading--warning .modal-loading-spinner::before {
    border-top-color: var(--color-warning, #f59e0b);
}

.modal-loading--error .modal-loading-spinner::before {
    border-top-color: var(--color-error, #ef4444);
}

/* ==========================================================================
   Modal Loading - Content
   ========================================================================== */

.modal-loading-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2, 8px);
}

.modal-loading-title {
    font-size: var(--font-size-lg, 1.125rem);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-text-primary, #12151F);
    margin: 0;
    line-height: 1.4;
}

.modal-loading-message {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-text-secondary, #394360);
    margin: 0;
    line-height: 1.5;
}

/* ==========================================================================
   Modal Loading - Progress (opcional)
   ========================================================================== */

.modal-loading-progress {
    width: 100%;
    max-width: 200px;
    height: 4px;
    background: var(--color-border, #CED3E2);
    border-radius: var(--radius-full, 9999px);
    overflow: hidden;
    margin-top: var(--spacing-2, 8px);
}

.modal-loading-progress-bar {
    height: 100%;
    background: var(--color-primary, #970707);
    border-radius: var(--radius-full, 9999px);
    transition: width 0.3s ease;
}

/* Barra de progresso indeterminada */
.modal-loading-progress--indeterminate .modal-loading-progress-bar {
    width: 30%;
    animation: modal-loading-progress-indeterminate 1.5s ease-in-out infinite;
}

@keyframes modal-loading-progress-indeterminate {
    0% {
        transform: translateX(-100%);
    }
    50% {
        transform: translateX(250%);
    }
    100% {
        transform: translateX(-100%);
    }
}

/* ==========================================================================
   Dark Mode - Classe explícita (html.dark, body.dark, [data-theme="dark"])

   IMPORTANTE: Usa !important para sobrescrever .modal base que não tem dark mode
   automático e usa background: var(--color-text-light) que permanece claro.
   ========================================================================== */

/* Container - Background escuro */
html.dark .modal-loading,
html.dark-mode .modal-loading,
html[data-theme="dark"] .modal-loading,
body.dark .modal-loading,
body.dark-mode .modal-loading,
body[data-theme="dark"] .modal-loading,
.dark .modal-loading,
.dark-mode .modal-loading,
[data-theme="dark"] .modal-loading {
    background: var(--color-bg-dark, #1D2333) !important;
    border-color: var(--color-border-dark, #2A2F41) !important;
}

/* Título - Texto claro */
html.dark .modal-loading-title,
html.dark-mode .modal-loading-title,
html[data-theme="dark"] .modal-loading-title,
body.dark .modal-loading-title,
body.dark-mode .modal-loading-title,
body[data-theme="dark"] .modal-loading-title,
.dark .modal-loading-title,
.dark-mode .modal-loading-title,
[data-theme="dark"] .modal-loading-title {
    color: var(--color-text-primary-dark, #E0E2EB) !important;
}

/* Mensagem - Texto secundário */
html.dark .modal-loading-message,
html.dark-mode .modal-loading-message,
html[data-theme="dark"] .modal-loading-message,
body.dark .modal-loading-message,
body.dark-mode .modal-loading-message,
body[data-theme="dark"] .modal-loading-message,
.dark .modal-loading-message,
.dark-mode .modal-loading-message,
[data-theme="dark"] .modal-loading-message {
    color: var(--color-text-secondary-dark, #A2A8B9) !important;
}

/* Spinner - Borda escura com cor primaria */
html.dark .modal-loading-spinner::before,
html.dark-mode .modal-loading-spinner::before,
html[data-theme="dark"] .modal-loading-spinner::before,
body.dark .modal-loading-spinner::before,
body.dark-mode .modal-loading-spinner::before,
body[data-theme="dark"] .modal-loading-spinner::before,
.dark .modal-loading-spinner::before,
.dark-mode .modal-loading-spinner::before,
[data-theme="dark"] .modal-loading-spinner::before {
    border-color: var(--color-border-dark, #2A2F41) !important;
    border-top-color: var(--color-primary, #970707) !important;
}

/* Progress bar - Background escuro */
html.dark .modal-loading-progress,
html.dark-mode .modal-loading-progress,
html[data-theme="dark"] .modal-loading-progress,
body.dark .modal-loading-progress,
body.dark-mode .modal-loading-progress,
body[data-theme="dark"] .modal-loading-progress,
.dark .modal-loading-progress,
.dark-mode .modal-loading-progress,
[data-theme="dark"] .modal-loading-progress {
    background: var(--color-border-dark, #2A2F41) !important;
}

/* ==========================================================================
   Dark Mode - Media Query (prefers-color-scheme)
   Para usuários com preferência de sistema dark
   ========================================================================== */

@media (prefers-color-scheme: dark) {
    .modal-loading {
        background: var(--color-bg-dark, #1D2333) !important;
        border-color: var(--color-border-dark, #2A2F41) !important;
    }

    .modal-loading-title {
        color: var(--color-text-primary-dark, #E0E2EB) !important;
    }

    .modal-loading-message {
        color: var(--color-text-secondary-dark, #A2A8B9) !important;
    }

    .modal-loading-spinner::before {
        border-color: var(--color-border-dark, #2A2F41) !important;
        border-top-color: var(--color-primary, #970707) !important;
    }

    .modal-loading-progress {
        background: var(--color-border-dark, #2A2F41) !important;
    }
}