/**
 * Loader - Design System
 *
 * Componente de loading com spinner circular e icone central.
 * Adaptavel para dark/light mode usando variaveis CSS do Design System.
 *
 * Estrutura:
 * - Circulo com icone no centro
 * - Arco de progresso animado (cor primaria do sistema)
 * - Titulo principal e subtitulo
 *
 * @version 1.0.0
 * @date 2026-02-02
 * @figma Baseado no design exportado do Figma
 */

/* ==========================================================================
   Loader - Container Principal
   ========================================================================== */

.loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-lg, 20px);
    padding: var(--spacing-2xl, 32px);
    text-align: center;
}

/* Variante centralizada em tela cheia */
.loader--fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-bg-secondary, #F6F6F9);
    z-index: var(--z-modal, 1050);
}

/* Variante para uso dentro de modal/backdrop */
.loader--modal {
    padding: var(--spacing-3xl, 40px) var(--spacing-2xl, 32px);
    background: var(--color-bg-primary, #FFFFFF);
    border-radius: var(--radius-lg, 12px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    /* Centralização garantida */
    margin: auto;
    position: relative;
}

/* ==========================================================================
   Loader - Spinner Container
   ========================================================================== */

.loader__spinner {
    position: relative;
    width: 96px;
    height: 96px;
}

/* Tamanhos */
.loader--sm .loader__spinner {
    width: 64px;
    height: 64px;
}

.loader--lg .loader__spinner {
    width: 128px;
    height: 128px;
}

/* ==========================================================================
   Loader - Ring (Circulo de fundo + Arco animado)
   ========================================================================== */

.loader__ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.loader__ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

/* Track - Circulo de fundo */
.loader__ring-track {
    fill: none;
    stroke: var(--color-border, #CED3E2);
    stroke-width: 4;
}

/* Arc - Arco de progresso animado */
.loader__ring-arc {
    fill: none;
    stroke: var(--color-primary, #970707);
    stroke-width: 4;
    stroke-linecap: round;
    /* Circunferencia = 2 * PI * raio (44) = ~276.46 */
    stroke-dasharray: 276.46;
    /* Mostra apenas 25% do circulo */
    stroke-dashoffset: 207.35;
    animation: loader-spin 1.2s linear infinite;
    transform-origin: center;
}

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

/* ==========================================================================
   Loader - Icon Container
   ========================================================================== */

.loader__icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-tertiary, #ECEDF2);
    border-radius: var(--radius-full, 9999px);
}

/* Tamanhos do icone */
.loader--sm .loader__icon {
    width: 40px;
    height: 40px;
}

.loader--lg .loader__icon {
    width: 72px;
    height: 72px;
}

/* Icone interno */
.loader__icon svg,
.loader__icon i,
.loader__icon img {
    width: 24px;
    height: 24px;
    color: var(--color-text-secondary, #394360);
}

.loader--sm .loader__icon svg,
.loader--sm .loader__icon i,
.loader--sm .loader__icon img {
    width: 18px;
    height: 18px;
}

.loader--lg .loader__icon svg,
.loader--lg .loader__icon i,
.loader--lg .loader__icon img {
    width: 32px;
    height: 32px;
}

/* ==========================================================================
   Loader - Hourglass Animated Icon
   ========================================================================== */

.loader__hourglass {
    width: 24px;
    height: 24px;
    position: relative;
}

.loader--sm .loader__hourglass {
    width: 18px;
    height: 18px;
}

.loader--lg .loader__hourglass {
    width: 32px;
    height: 32px;
}

/* Estrutura da ampulheta */
.loader__hourglass-frame {
    fill: none;
    stroke: var(--color-text-secondary, #394360);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Areia - cor */
.loader__hourglass-sand {
    fill: var(--color-primary, #970707);
}

/* Areia superior - diminui */
.loader__hourglass-sand-top {
    transform-origin: center top;
    animation: loader-sand-top 1.2s linear infinite;
}

@keyframes loader-sand-top {
    0% {
        transform: scaleY(1);
        opacity: 1;
    }
    90% {
        transform: scaleY(0);
        opacity: 1;
    }
    100% {
        transform: scaleY(0);
        opacity: 0;
    }
}

/* Areia inferior - aumenta */
.loader__hourglass-sand-bottom {
    transform-origin: center bottom;
    animation: loader-sand-bottom 1.2s linear infinite;
}

@keyframes loader-sand-bottom {
    0% {
        transform: scaleY(0);
    }
    10% {
        transform: scaleY(0.1);
    }
    100% {
        transform: scaleY(1);
    }
}

/* Stream de areia caindo */
.loader__hourglass-stream {
    fill: none;
    stroke: var(--color-primary, #970707);
    animation: loader-sand-stream 1.2s linear infinite;
}

@keyframes loader-sand-stream {
    0%, 5% {
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    85% {
        opacity: 1;
    }
    90%, 100% {
        opacity: 0;
    }
}

/* Variantes de cor para ampulheta */
.loader--success .loader__hourglass-sand {
    fill: var(--color-success, #519000);
}
.loader--success .loader__hourglass-stream {
    stroke: var(--color-success, #519000);
}

.loader--info .loader__hourglass-sand {
    fill: var(--color-accent-300, #3E68FB);
}
.loader--info .loader__hourglass-stream {
    stroke: var(--color-accent-300, #3E68FB);
}

.loader--warning .loader__hourglass-sand {
    fill: var(--color-warning, #E9BD00);
}
.loader--warning .loader__hourglass-stream {
    stroke: var(--color-warning, #E9BD00);
}

.loader--danger .loader__hourglass-sand {
    fill: var(--color-danger, #C90A0A);
}
.loader--danger .loader__hourglass-stream {
    stroke: var(--color-danger, #C90A0A);
}

/* ==========================================================================
   Loader - Content (Textos)
   ========================================================================== */

.loader__content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs, 4px);
}

/* Titulo principal */
.loader__title {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: var(--font-size-p1, 16px);
    font-weight: var(--font-weight-medium, 500);
    line-height: var(--line-height-p1, 26px);
    color: var(--color-text-primary, #12151F);
    margin: 0;
}

/* Subtitulo */
.loader__subtitle {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: var(--font-size-p3, 14px);
    font-weight: var(--font-weight-regular, 400);
    line-height: var(--line-height-p3, 24px);
    color: var(--color-text-secondary, #394360);
    margin: 0;
}

/* ==========================================================================
   Loader - Variantes de Cor
   ========================================================================== */

/* Success (Verde) */
.loader--success .loader__ring-arc {
    stroke: var(--color-success, #519000);
}

/* Info (Azul) */
.loader--info .loader__ring-arc {
    stroke: var(--color-accent-300, #3E68FB);
}

/* Warning (Amarelo) */
.loader--warning .loader__ring-arc {
    stroke: var(--color-warning, #E9BD00);
}

/* Danger (Vermelho) */
.loader--danger .loader__ring-arc {
    stroke: var(--color-danger, #C90A0A);
}

/* ==========================================================================
   Loader - Progress Mode (Arco com porcentagem fixa)
   ========================================================================== */

.loader--progress .loader__ring-arc {
    animation: none;
    transition: stroke-dashoffset 0.3s ease;
}

/* ==========================================================================
   Dark Mode - Classe explicita
   ========================================================================== */

html.dark .loader--fullscreen,
html.dark-mode .loader--fullscreen,
html[data-theme="dark"] .loader--fullscreen,
body.dark .loader--fullscreen,
body.dark-mode .loader--fullscreen,
body[data-theme="dark"] .loader--fullscreen,
.dark .loader--fullscreen,
.dark-mode .loader--fullscreen,
[data-theme="dark"] .loader--fullscreen {
    background: var(--color-bg-primary, #10141D);
}

/* Loader Modal - Dark */
html.dark .loader--modal,
html.dark-mode .loader--modal,
html[data-theme="dark"] .loader--modal,
body.dark .loader--modal,
body.dark-mode .loader--modal,
body[data-theme="dark"] .loader--modal,
.dark .loader--modal,
.dark-mode .loader--modal,
[data-theme="dark"] .loader--modal {
    background: var(--color-bg-secondary, #1D2333);
}

/* Ring Track - Dark */
html.dark .loader__ring-track,
html.dark-mode .loader__ring-track,
html[data-theme="dark"] .loader__ring-track,
body.dark .loader__ring-track,
body.dark-mode .loader__ring-track,
body[data-theme="dark"] .loader__ring-track,
.dark .loader__ring-track,
.dark-mode .loader__ring-track,
[data-theme="dark"] .loader__ring-track {
    stroke: var(--color-border, #2A2F41);
}

/* Icon Container - Dark */
html.dark .loader__icon,
html.dark-mode .loader__icon,
html[data-theme="dark"] .loader__icon,
body.dark .loader__icon,
body.dark-mode .loader__icon,
body[data-theme="dark"] .loader__icon,
.dark .loader__icon,
.dark-mode .loader__icon,
[data-theme="dark"] .loader__icon {
    background: var(--color-bg-tertiary, #1D2333);
}

/* Icon - Dark */
html.dark .loader__icon svg,
html.dark .loader__icon i,
html.dark-mode .loader__icon svg,
html.dark-mode .loader__icon i,
html[data-theme="dark"] .loader__icon svg,
html[data-theme="dark"] .loader__icon i,
body.dark .loader__icon svg,
body.dark .loader__icon i,
body.dark-mode .loader__icon svg,
body.dark-mode .loader__icon i,
body[data-theme="dark"] .loader__icon svg,
body[data-theme="dark"] .loader__icon i,
.dark .loader__icon svg,
.dark .loader__icon i,
.dark-mode .loader__icon svg,
.dark-mode .loader__icon i,
[data-theme="dark"] .loader__icon svg,
[data-theme="dark"] .loader__icon i {
    color: var(--color-text-secondary, #A2A8B9);
}

/* Title - Dark */
html.dark .loader__title,
html.dark-mode .loader__title,
html[data-theme="dark"] .loader__title,
body.dark .loader__title,
body.dark-mode .loader__title,
body[data-theme="dark"] .loader__title,
.dark .loader__title,
.dark-mode .loader__title,
[data-theme="dark"] .loader__title {
    color: var(--color-text-primary, #E0E2EB);
}

/* Subtitle - Dark */
html.dark .loader__subtitle,
html.dark-mode .loader__subtitle,
html[data-theme="dark"] .loader__subtitle,
body.dark .loader__subtitle,
body.dark-mode .loader__subtitle,
body[data-theme="dark"] .loader__subtitle,
.dark .loader__subtitle,
.dark-mode .loader__subtitle,
[data-theme="dark"] .loader__subtitle {
    color: var(--color-text-secondary, #A2A8B9);
}

/* ==========================================================================
   Dark Mode - Media Query (prefers-color-scheme)
   ========================================================================== */

@media (prefers-color-scheme: dark) {
    .loader--fullscreen {
        background: var(--color-bg-primary, #10141D);
    }

    .loader__ring-track {
        stroke: var(--color-border, #2A2F41);
    }

    .loader__icon {
        background: var(--color-bg-tertiary, #1D2333);
    }

    .loader__icon svg,
    .loader__icon i {
        color: var(--color-text-secondary, #A2A8B9);
    }

    .loader__title {
        color: var(--color-text-primary, #E0E2EB);
    }

    .loader__subtitle {
        color: var(--color-text-secondary, #A2A8B9);
    }
}

/* ==========================================================================
   Loader - Uso com Modal
   Quando usado dentro de .modal ou .modal-loading
   ========================================================================== */

.modal .loader,
.modal-loading .loader {
    padding: 0;
}

/* ==========================================================================
   Loader - JavaScript Helper Classes
   ========================================================================== */

/* Estado de loading ativo */
.loader[data-loading="true"] {
    display: flex;
}

.loader[data-loading="false"] {
    display: none;
}

/* Fade in/out animations */
.loader--fade-in {
    animation: loader-fade-in 0.2s ease-out;
}

.loader--fade-out {
    animation: loader-fade-out 0.2s ease-out forwards;
}

@keyframes loader-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes loader-fade-out {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}