/**
 * Loading Manager - Estilos
 * Sistema global de loading e overlays
 */

/* ========================================
   OVERLAY BASE
   ======================================== */

.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.loading-overlay.active {
    opacity: 1;
    pointer-events: all;
}

/* ========================================
   FULLSCREEN OVERLAY
   ======================================== */

.loading-overlay-fullscreen {
    z-index: 99999;
    background-color: rgba(255, 255, 255, 0.95);
}

/* ========================================
   CONTENT OVERLAY
   ======================================== */

.loading-overlay-content {
    position: absolute !important;
    z-index: 100;
    background-color: rgba(255, 255, 255, 0.9);
}

/* ========================================
   ELEMENT OVERLAY
   ======================================== */

.loading-element-overlay {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: inherit;
}

.loading-element-overlay.with-blur {
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

/* ========================================
   LOADING CONTENT (Centralizador)
   ======================================== */

.loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

/* ========================================
   LOADING GIF
   ======================================== */

.loading-gif {
    width: 150px !important;
    height: 150px !important;
    object-fit: contain;
}

/* GIF em overlays de elementos (como calendário) */
.loading-element-overlay .loading-gif {
    width: 180px !important;
    height: 180px !important;
}

/* ========================================
   LOADING MESSAGE
   ======================================== */

.loading-message {
    color: #6777ef;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    max-width: 300px;
    line-height: 1.5;
    margin-top: -80px !important;
}

/* ========================================
   SVG SPINNER (Animação)
   ======================================== */

.loading-spinner {
    animation: loading-rotate 2s linear infinite;
}

.loading-spinner-path {
    stroke-linecap: round;
    animation: loading-dash 1.5s ease-in-out infinite;
}

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

@keyframes loading-dash {
    0% {
        stroke-dasharray: 1, 150;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -35;
    }
    100% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -124;
    }
}

/* ========================================
   LOADING EM BOTÕES
   ======================================== */

.loading-active {
    position: relative;
    cursor: not-allowed !important;
    opacity: 0.8;
}

button.loading-active {
    pointer-events: none;
}

button.loading-active .loading-spinner {
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
}

/* Ajuste para botões pequenos */
.btn-sm.loading-active .loading-spinner {
    width: 14px;
    height: 14px;
}

/* Ajuste para botões grandes */
.btn-lg.loading-active .loading-spinner {
    width: 20px;
    height: 20px;
}

/* ========================================
   LOADING EM INPUTS
   ======================================== */

input.loading-active {
    cursor: not-allowed !important;
    background-color: #f8f9fa !important;
}

.loading-input-spinner {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Posicionamento do spinner no input */
.loading-input-right {
    right: 12px;
}

.loading-input-left {
    left: 12px;
}

.loading-input-center {
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Ajuste de padding do input quando há spinner */
input.loading-active {
    padding-right: 40px !important;
}

/* ========================================
   SPINNER CONTAINER
   ======================================== */

.loading-spinner-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading-spinner-container .loading-spinner {
    width: 60px;
    height: 60px;
}

/* ========================================
   VARIAÇÕES DE TAMANHO
   ======================================== */

/* Spinner pequeno (16px) */
.loading-spinner-sm {
    width: 16px;
    height: 16px;
}

/* Spinner médio (24px) */
.loading-spinner-md {
    width: 24px;
    height: 24px;
}

/* Spinner grande (40px) */
.loading-spinner-lg {
    width: 40px;
    height: 40px;
}

/* Spinner extra grande (60px) */
.loading-spinner-xl {
    width: 60px;
    height: 60px;
}

/* ========================================
   VARIAÇÕES DE COR
   ======================================== */

.loading-spinner-primary .loading-spinner-path {
    stroke: #6777ef;
}

.loading-spinner-success .loading-spinner-path {
    stroke: #28a745;
}

.loading-spinner-danger .loading-spinner-path {
    stroke: #dc3545;
}

.loading-spinner-warning .loading-spinner-path {
    stroke: #ffc107;
}

.loading-spinner-info .loading-spinner-path {
    stroke: #17a2b8;
}

.loading-spinner-white .loading-spinner-path {
    stroke: #ffffff;
}

.loading-spinner-dark .loading-spinner-path {
    stroke: #343a40;
}

/* ========================================
   TEMAS DE BACKGROUND
   ======================================== */

.loading-overlay-light {
    background-color: rgba(255, 255, 255, 0.95) !important;
}

.loading-overlay-dark {
    background-color: rgba(0, 0, 0, 0.8) !important;
}

.loading-overlay-dark .loading-message {
    color: #ffffff;
}

.loading-overlay-transparent {
    background-color: transparent !important;
}

/* ========================================
   RESPONSIVIDADE
   ======================================== */

@media (max-width: 768px) {
    .loading-gif {
        width: 120px !important;
        height: 120px !important;
    }
    
    .loading-element-overlay .loading-gif {
        width: 140px !important;
        height: 140px !important;
    }

    .loading-message {
        font-size: 13px;
        max-width: 250px;
    }

    .loading-spinner-container .loading-spinner {
        width: 50px;
        height: 50px;
    }
}

@media (max-width: 576px) {
    .loading-gif {
        width: 100px !important;
        height: 100px !important;
    }
    
    .loading-element-overlay .loading-gif {
        width: 120px !important;
        height: 120px !important;
    }

    .loading-message {
        font-size: 12px;
        max-width: 200px;
    }

    .loading-spinner-container .loading-spinner {
        width: 40px;
        height: 40px;
    }
}

/* ========================================
   ACESSIBILIDADE
   ======================================== */

.loading-overlay[aria-hidden="true"] {
    display: none;
}

/* Reduz movimento para usuários com preferência */
@media (prefers-reduced-motion: reduce) {
    .loading-spinner,
    .loading-spinner-path,
    .loading-overlay {
        animation: none !important;
        transition: none !important;
    }
}

/* ========================================
   Z-INDEX HIERARCHY - Elementos de Navegação
   ======================================== */

/* Garante que navbar fique sempre acima do loading */
.navbar,
nav.navbar {
    z-index: 2000 !important;
}

/* Garante que sidebar fique sempre acima do loading */
.main-sidebar,
#sidebar-wrapper {
    z-index: 1500 !important;
}

/* Garante que sidebar de busca fique sempre acima do loading */
.settingSidebar,
#sidebarSearch {
    z-index: 1500 !important;
}

/* Footer deve ficar acima do sidebar para não ser coberto */
.main-footer {
    z-index: 2500 !important;
}

/* ========================================
   UTILITÁRIOS
   ======================================== */

/* Desabilita seleção de texto no overlay */
.loading-overlay {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Garante que o overlay cubra elementos com z-index alto */
.loading-overlay-fullscreen {
    z-index: 99999 !important;
}

/* Previne scroll quando loading fullscreen está ativo */
body.loading-fullscreen-active {
    overflow: hidden;
}

/* ========================================
   ANIMAÇÕES ADICIONAIS
   ======================================== */

/* Pulse animation para o GIF */
@keyframes loading-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

.loading-gif.pulse {
    animation: loading-pulse 2s ease-in-out infinite;
}

/* Fade in suave */
@keyframes loading-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.loading-overlay.fade-in {
    animation: loading-fade-in 0.3s ease;
}

/* ========================================
   ESTADOS ESPECIAIS
   ======================================== */

/* Loading em cards */
.card.loading-active {
    pointer-events: none;
    opacity: 0.6;
}

/* Loading em tabelas */
.table-responsive.loading-active {
    pointer-events: none;
}

/* Loading em forms */
form.loading-active {
    pointer-events: none;
    opacity: 0.7;
}

form.loading-active input,
form.loading-active select,
form.loading-active textarea,
form.loading-active button {
    cursor: not-allowed !important;
}

/* ========================================
   COMPATIBILIDADE COM BOOTSTRAP
   ======================================== */

/* Garante que o loading funcione bem com modals do Bootstrap */
.modal.loading-active .modal-content {
    pointer-events: none;
}

/* Ajuste para dropdowns */
.dropdown-menu.loading-active {
    pointer-events: none;
    opacity: 0.6;
}

/* ========================================
   PRINT
   ======================================== */

@media print {
    .loading-overlay,
    .loading-spinner,
    .loading-input-spinner {
        display: none !important;
    }
}
/* Ajuste específico quando há GIF */
.loading-content:has(.loading-gif) .loading-message {
    margin-top: -50px !important;
}

/* Ajuste específico quando há Spinner */
.loading-content:has(.loading-spinner-container) .loading-message {
    margin-top: -10px !important;
}