/**
 * App Mobile WMS - CSS Tailwind Complementar
 * 
 * Este arquivo complementa o TailwindCSS com estilos específicos 
 * do sistema Genesis para o módulo App.
 * 
 * O TailwindCSS já é incluído via /src/output.css no tema
 */

/* === VARIÁVEIS GENESIS (Deep Navy + Violet) === */
:root {
    --g-primary: #8b5cf6;
    --g-primary-light: #a78bfa;
    --g-primary-dark: #7c3aed;
    --g-success: #10b981;
    --g-success-light: #34d399;
    --g-warning: #f59e0b;
    --g-danger: #ef4444;
    --g-info: #3b82f6;
    --g-surface: #141b2d;
    --g-surface-light: #1e293b;
    --g-bg-dark: #050510;
    --g-bg-main: #0a0f1e;
    --g-border: rgba(255, 255, 255, 0.1);
    --g-border-highlight: rgba(139, 92, 246, 0.3);
    --g-text-primary: #f8fafc;
    --g-text-muted: #64748b;
    --g-glow-primary: 0 0 20px rgba(139, 92, 246, 0.4);
    --g-glow-success: 0 0 20px rgba(16, 185, 129, 0.4);
}

/* === GAME CONTAINER === */
.g-app-bg {
    background: linear-gradient(135deg, var(--g-bg-dark) 0%, var(--g-bg-main) 50%, #0f0c29 100%);
    min-height: 100vh;
    min-height: 100dvh;
}

/* Partículas de fundo sutis */
.g-app-bg::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image:
        radial-gradient(2px 2px at 20% 30%, rgba(139, 92, 246, 0.15), transparent),
        radial-gradient(1px 1px at 60% 20%, rgba(139, 92, 246, 0.1), transparent),
        radial-gradient(1px 1px at 80% 60%, rgba(139, 92, 246, 0.08), transparent);
    background-size: 350px 350px;
    animation: g-particles 20s linear infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes g-particles {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(-100px, -100px);
    }
}

/* === COMPONENTES GAMIFICADOS === */

/* Linha glow no header */
.g-header-glow::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--g-primary), var(--g-info), var(--g-primary), transparent);
    opacity: 0.5;
    animation: g-glow-line 4s ease-in-out infinite;
}

@keyframes g-glow-line {

    0%,
    100% {
        opacity: 0.3;
    }

    50% {
        opacity: 0.7;
    }
}

/* Timer pulsante */
.g-timer-pulse {
    animation: g-timer-pulse 1s ease-in-out infinite;
}

@keyframes g-timer-pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* Badge prioridade pulsante */
.g-priority-pulse {
    animation: g-priority-pulse 2s ease-in-out infinite;
}

@keyframes g-priority-pulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4);
    }

    50% {
        box-shadow: 0 0 0 4px rgba(245, 158, 11, 0);
    }
}

/* Ícone success pulsante */
.g-success-glow {
    box-shadow: var(--g-glow-success);
    animation: g-success-glow 2s infinite;
}

@keyframes g-success-glow {

    0%,
    100% {
        box-shadow: 0 0 20px rgba(16, 185, 129, 0.4);
    }

    50% {
        box-shadow: 0 0 40px rgba(16, 185, 129, 0.6);
    }
}

/* Progress bar shine */
.g-progress-shine {
    position: relative;
    overflow: hidden;
}

.g-progress-shine::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: g-progress-shine 2s infinite;
}

@keyframes g-progress-shine {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

/* Card hover effect */
.g-card-hover {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.g-card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4), 0 0 20px rgba(139, 92, 246, 0.2);
}

/* Top glow line animada em cards */
.g-topline-glow::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--g-primary), transparent);
    opacity: 0;
    transition: opacity 0.3s;
}

.g-topline-glow:hover::before,
.g-topline-glow.active::before {
    opacity: 1;
}

/* Botão com efeito de luz */
.g-btn-glow {
    position: relative;
    overflow: hidden;
}

.g-btn-glow::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.g-btn-glow:hover::before {
    left: 100%;
}

/* Animações */
.g-animate-slide-up {
    animation: g-slide-up 0.4s ease-out;
}

@keyframes g-slide-up {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Highlight de scan */
.g-highlight-scan {
    animation: g-highlight-scan 1s ease-out;
}

@keyframes g-highlight-scan {
    0% {
        background-color: rgba(16, 185, 129, 0.3);
        border-color: var(--g-success);
    }

    100% {
        background-color: transparent;
    }
}

/* Shake error */
.g-shake-error {
    animation: g-shake 0.5s ease-in-out;
}

@keyframes g-shake {

    0%,
    100% {
        transform: translateX(0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-5px);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translateX(5px);
    }
}

/* Pulse button */
.g-btn-pulse {
    animation: g-btn-pulse 2s infinite;
}

@keyframes g-btn-pulse {

    0%,
    100% {
        box-shadow: 0 4px 20px rgba(16, 185, 129, 0.3);
    }

    50% {
        box-shadow: 0 4px 30px rgba(16, 185, 129, 0.5);
    }
}

/* === SCROLLBAR CUSTOM === */
.g-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.g-scrollbar::-webkit-scrollbar-track {
    background: var(--g-bg-main);
}

.g-scrollbar::-webkit-scrollbar-thumb {
    background: var(--g-border);
    border-radius: 9999px;
}

.g-scrollbar::-webkit-scrollbar-thumb:hover {
    background: var(--g-text-muted);
}

/* === INPUT INVISIBLE PARA SCANNER === */
.g-scanner-input {
    position: absolute;
    left: -9999px;
    opacity: 0;
    width: 1px;
    height: 1px;
}