/**
 * 🍎 APPLE FOOTER MENU - AÇÕES PRINCIPAIS
 *
 * Menu inferior no rodapé (NÃO flutuante)
 * - Estilo Apple minimalista
 * - Mais especial e elegante
 * - Ícones grandes + labels
 * - Cores individuais por botão
 */

/* ===================================
   🍎 CONTAINER PRINCIPAL - FOOTER
=================================== */

.apple-footer-menu {
    /* Posicionamento - NO RODAPÉ (não flutuante) */
    position: relative !important;
    width: 100% !important;
    z-index: 100 !important;

    /* Dimensões - Altura maior para destaque */
    height: 72px !important;
    min-height: 72px !important;

    /* Background Apple - Mais escuro para diferenciação */
    background-color: rgba(0, 0, 0, 0.92) !important;
    backdrop-filter: saturate(180%) blur(20px) !important;
    -webkit-backdrop-filter: saturate(180%) blur(20px) !important;

    /* Borda superior (não inferior) */
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;

    /* Reset - Garantir que cole no conteúdo acima */
    margin: 0 !important;
    margin-top: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;

    /* Sombra sutil para cima */
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.3) !important;

    /* Transição suave */
    transition: transform 0.3s ease, opacity 0.3s ease !important;
}

/* ===================================
   🌞 LIGHT MODE - ELEGÂNCIA APPLE
=================================== */

[data-theme="light"] .apple-footer-menu,
html[data-theme="light"] .apple-footer-menu,
.light-theme .apple-footer-menu,
body.light-theme .apple-footer-menu {
    /* Background suave e translúcido */
    background-color: rgba(255, 255, 255, 0.72) !important;
    background-image: linear-gradient(
        to top,
        rgba(248, 249, 250, 0.3),
        rgba(255, 255, 255, 0.2)
    ) !important;
    backdrop-filter: saturate(180%) blur(30px) !important;
    -webkit-backdrop-filter: saturate(180%) blur(30px) !important;

    /* Borda delicada */
    border-top: 0.5px solid rgba(0, 0, 0, 0.08) !important;

    /* Sombra suave e elevada */
    box-shadow:
        0 -1px 3px rgba(0, 0, 0, 0.04),
        0 -8px 24px rgba(0, 0, 0, 0.06) !important;
}

/**
 * Estado: escondido antes do login
 * - Escondido por padrão na tela de login
 * - Aparece apenas no painel financeiro
 */
.apple-footer-menu.hidden-before-login {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Estado: visível após login */
.apple-footer-menu:not(.hidden-before-login) {
    transition: opacity 0.5s ease, transform 0.5s ease !important;
}

/**
 * Container de conteúdo centralizado
 */
.apple-footer-content {
    max-width: 1000px;
    height: 72px;
    margin: 0 auto;
    padding: 0 32px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}

/* ===================================
   🔘 BOTÕES - MAIS ESPECIAIS
=================================== */

.apple-footer-btn {
    /* Reset */
    background: transparent !important;
    border: none !important;
    padding: 12px 24px !important;
    margin: 0 !important;
    cursor: pointer !important;

    /* Layout */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    height: 72px !important;
    flex: 1 !important;
    max-width: 300px !important;

    /* Typography */
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif !important;

    /* Transição suave */
    transition: all 0.2s ease !important;

    /* Reset efeitos */
    box-shadow: none !important;
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
    border-radius: 12px !important;
    position: relative !important;
    overflow: hidden !important;
}

/**
 * Hover - Background sutil
 */
.apple-footer-btn:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    transform: translateY(-2px) !important;
}

/* Light Mode - Hover delicado e suave */
[data-theme="light"] .apple-footer-btn:hover,
html[data-theme="light"] .apple-footer-btn:hover,
.light-theme .apple-footer-btn:hover,
body.light-theme .apple-footer-btn:hover {
    background: rgba(0, 0, 0, 0.03) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

/**
 * Active - Press effect
 */
.apple-footer-btn:active {
    transform: translateY(0) !important;
}

/* ===================================
   🎨 ÍCONES - GRANDES E COLORIDOS
=================================== */

.apple-footer-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;

    /* Glow sutil */
    box-shadow: 0 4px 12px currentColor;

    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.apple-footer-icon i {
    font-size: 18px !important;
    color: inherit;
}

/* PDF - Azul */
.apple-footer-pdf .apple-footer-icon {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #ffffff;
}

/* Scan - Verde */
.apple-footer-scan .apple-footer-icon {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #ffffff;
}

/* Reset - Vermelho */
.apple-footer-reset .apple-footer-icon {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #ffffff;
}

/* ===================================
   🌞 LIGHT MODE - ÍCONES SUAVES
=================================== */

/* PDF - Azul suave e elegante */
[data-theme="light"] .apple-footer-pdf .apple-footer-icon,
html[data-theme="light"] .apple-footer-pdf .apple-footer-icon,
.light-theme .apple-footer-pdf .apple-footer-icon,
body.light-theme .apple-footer-pdf .apple-footer-icon {
    background: linear-gradient(135deg, #007AFF, #0051D5);
    box-shadow:
        0 4px 12px rgba(0, 122, 255, 0.25),
        0 2px 6px rgba(0, 122, 255, 0.15);
}

/* Scan - Verde suave e fresco */
[data-theme="light"] .apple-footer-scan .apple-footer-icon,
html[data-theme="light"] .apple-footer-scan .apple-footer-icon,
.light-theme .apple-footer-scan .apple-footer-icon,
body.light-theme .apple-footer-scan .apple-footer-icon {
    background: linear-gradient(135deg, #34C759, #28A745);
    box-shadow:
        0 4px 12px rgba(52, 199, 89, 0.25),
        0 2px 6px rgba(52, 199, 89, 0.15);
}

/* Reset - Vermelho suave e delicado */
[data-theme="light"] .apple-footer-reset .apple-footer-icon,
html[data-theme="light"] .apple-footer-reset .apple-footer-icon,
.light-theme .apple-footer-reset .apple-footer-icon,
body.light-theme .apple-footer-reset .apple-footer-icon {
    background: linear-gradient(135deg, #FF3B30, #E6352C);
    box-shadow:
        0 4px 12px rgba(255, 59, 48, 0.25),
        0 2px 6px rgba(255, 59, 48, 0.15);
}

/* ===================================
   📝 TEXTO - TÍTULO + SUBTITLE
=================================== */

.apple-footer-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    flex: 1;
}

/**
 * Título - Destaque
 */
.apple-footer-title {
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    line-height: 1.2 !important;
    color: rgba(245, 245, 247, 1) !important;
    white-space: nowrap !important;
}

[data-theme="light"] .apple-footer-title,
html[data-theme="light"] .apple-footer-title,
.light-theme .apple-footer-title,
body.light-theme .apple-footer-title {
    color: rgba(29, 29, 31, 0.95) !important;
}

/**
 * Subtitle - Descrição
 */
.apple-footer-subtitle {
    font-size: 11px !important;
    font-weight: 400 !important;
    letter-spacing: -0.01em !important;
    line-height: 1 !important;
    color: rgba(245, 245, 247, 0.6) !important;
    white-space: nowrap !important;
}

[data-theme="light"] .apple-footer-subtitle,
html[data-theme="light"] .apple-footer-subtitle,
.light-theme .apple-footer-subtitle,
body.light-theme .apple-footer-subtitle {
    color: rgba(29, 29, 31, 0.55) !important;
}

/* ===================================
   🔹 DIVIDERS - SUTIS
=================================== */

.apple-footer-divider {
    width: 1px !important;
    height: 36px !important;
    background: rgba(245, 245, 247, 0.12) !important;
    margin: 0 8px !important;
    flex-shrink: 0 !important;
}

/* Light Mode - Divider delicado com gradiente */
[data-theme="light"] .apple-footer-divider,
html[data-theme="light"] .apple-footer-divider,
.light-theme .apple-footer-divider,
body.light-theme .apple-footer-divider {
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(0, 0, 0, 0.06) 20%,
        rgba(0, 0, 0, 0.08) 50%,
        rgba(0, 0, 0, 0.06) 80%,
        transparent 100%
    ) !important;
}

/* ===================================
   ✨ EFEITOS ESPECIAIS - GLOW HOVER
=================================== */

.apple-footer-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at center,
        transparent 0%,
        transparent 100%
    );
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 0;
}

/* PDF - Glow azul no hover */
.apple-footer-pdf:hover::before {
    background: radial-gradient(
        circle at center,
        rgba(59, 130, 246, 0.15) 0%,
        transparent 70%
    );
    opacity: 1;
}

/* Scan - Glow verde no hover */
.apple-footer-scan:hover::before {
    background: radial-gradient(
        circle at center,
        rgba(16, 185, 129, 0.15) 0%,
        transparent 70%
    );
    opacity: 1;
}

/* Reset - Glow vermelho no hover */
.apple-footer-reset:hover::before {
    background: radial-gradient(
        circle at center,
        rgba(239, 68, 68, 0.15) 0%,
        transparent 70%
    );
    opacity: 1;
}

/* ===================================
   🌞 LIGHT MODE - GLOW SUAVE
=================================== */

/* PDF - Glow azul delicado */
[data-theme="light"] .apple-footer-pdf:hover::before,
html[data-theme="light"] .apple-footer-pdf:hover::before,
.light-theme .apple-footer-pdf:hover::before,
body.light-theme .apple-footer-pdf:hover::before {
    background: radial-gradient(
        circle at center,
        rgba(0, 122, 255, 0.08) 0%,
        transparent 60%
    );
    opacity: 1;
}

/* Scan - Glow verde delicado */
[data-theme="light"] .apple-footer-scan:hover::before,
html[data-theme="light"] .apple-footer-scan:hover::before,
.light-theme .apple-footer-scan:hover::before,
body.light-theme .apple-footer-scan:hover::before {
    background: radial-gradient(
        circle at center,
        rgba(52, 199, 89, 0.08) 0%,
        transparent 60%
    );
    opacity: 1;
}

/* Reset - Glow vermelho delicado */
[data-theme="light"] .apple-footer-reset:hover::before,
html[data-theme="light"] .apple-footer-reset:hover::before,
.light-theme .apple-footer-reset:hover::before,
body.light-theme .apple-footer-reset:hover::before {
    background: radial-gradient(
        circle at center,
        rgba(255, 59, 48, 0.08) 0%,
        transparent 60%
    );
    opacity: 1;
}

/* ===================================
   📱 RESPONSIVE - MOBILE
=================================== */

@media (max-width: 768px) {
    .apple-footer-menu {
        height: 64px !important;
        min-height: 64px !important;
    }

    .apple-footer-content {
        padding: 0 16px !important;
        gap: 0 !important;
    }

    .apple-footer-btn {
        padding: 8px 12px !important;
        gap: 8px !important;
        height: 64px !important;
        flex-direction: column !important;
        justify-content: center !important;
    }

    .apple-footer-icon {
        width: 28px !important;
        height: 28px !important;
    }

    .apple-footer-icon i {
        font-size: 14px !important;
    }

    .apple-footer-text {
        align-items: center !important;
        text-align: center !important;
    }

    .apple-footer-title {
        font-size: 11px !important;
    }

    .apple-footer-subtitle {
        font-size: 9px !important;
    }

    .apple-footer-divider {
        display: none !important;
    }
}

/* ===================================
   🎯 COMPENSAÇÃO DO MENU FOOTER
=================================== */

/* NOTA: padding-bottom movido para apple-fullwidth-layout.css
   para centralizar todas as regras de #app-wrapper */

/* ===================================
   🚀 ANIMAÇÃO DE ENTRADA
=================================== */

@keyframes footerSlideUp {
    from {
        opacity: 0;
        transform: translateY(100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animação APENAS quando visível (SEM .hidden-before-login) */
.apple-footer-menu:not(.hidden-before-login) {
    animation: footerSlideUp 0.6s cubic-bezier(0.28, 0.11, 0.32, 1) forwards !important;
}

/* Garantir que elementos escondidos não tenham animação */
.apple-footer-menu.hidden-before-login {
    animation: none !important;
}

/* ===================================
   💡 DESTAQUE VISUAL - PULSING ICONS
=================================== */

@keyframes iconPulse {
    0%, 100% {
        box-shadow: 0 4px 12px currentColor;
    }
    50% {
        box-shadow: 0 6px 20px currentColor;
    }
}

.apple-footer-btn:hover .apple-footer-icon {
    animation: iconPulse 2s ease-in-out infinite;
}

/* ===================================
   🌞 LIGHT MODE - PULSO DELICADO
=================================== */

@keyframes iconPulseLightPdf {
    0%, 100% {
        box-shadow:
            0 4px 12px rgba(0, 122, 255, 0.25),
            0 2px 6px rgba(0, 122, 255, 0.15);
    }
    50% {
        box-shadow:
            0 6px 18px rgba(0, 122, 255, 0.35),
            0 3px 9px rgba(0, 122, 255, 0.2);
    }
}

@keyframes iconPulseLightScan {
    0%, 100% {
        box-shadow:
            0 4px 12px rgba(52, 199, 89, 0.25),
            0 2px 6px rgba(52, 199, 89, 0.15);
    }
    50% {
        box-shadow:
            0 6px 18px rgba(52, 199, 89, 0.35),
            0 3px 9px rgba(52, 199, 89, 0.2);
    }
}

@keyframes iconPulseLightReset {
    0%, 100% {
        box-shadow:
            0 4px 12px rgba(255, 59, 48, 0.25),
            0 2px 6px rgba(255, 59, 48, 0.15);
    }
    50% {
        box-shadow:
            0 6px 18px rgba(255, 59, 48, 0.35),
            0 3px 9px rgba(255, 59, 48, 0.2);
    }
}

[data-theme="light"] .apple-footer-pdf:hover .apple-footer-icon,
html[data-theme="light"] .apple-footer-pdf:hover .apple-footer-icon,
.light-theme .apple-footer-pdf:hover .apple-footer-icon,
body.light-theme .apple-footer-pdf:hover .apple-footer-icon {
    animation: iconPulseLightPdf 2s ease-in-out infinite;
}

[data-theme="light"] .apple-footer-scan:hover .apple-footer-icon,
html[data-theme="light"] .apple-footer-scan:hover .apple-footer-icon,
.light-theme .apple-footer-scan:hover .apple-footer-icon,
body.light-theme .apple-footer-scan:hover .apple-footer-icon {
    animation: iconPulseLightScan 2s ease-in-out infinite;
}

[data-theme="light"] .apple-footer-reset:hover .apple-footer-icon,
html[data-theme="light"] .apple-footer-reset:hover .apple-footer-icon,
.light-theme .apple-footer-reset:hover .apple-footer-icon,
body.light-theme .apple-footer-reset:hover .apple-footer-icon {
    animation: iconPulseLightReset 2s ease-in-out infinite;
}

/* ===================================
   ✨ LIGHT MODE - BRILHO SUTIL
=================================== */

/* Overlay de brilho para ícones no light mode */
[data-theme="light"] .apple-footer-icon::after,
html[data-theme="light"] .apple-footer-icon::after,
.light-theme .apple-footer-icon::after,
body.light-theme .apple-footer-icon::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(255, 255, 255, 0.3) 50%,
        transparent 70%
    );
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

[data-theme="light"] .apple-footer-btn:hover .apple-footer-icon::after,
html[data-theme="light"] .apple-footer-btn:hover .apple-footer-icon::after,
.light-theme .apple-footer-btn:hover .apple-footer-icon::after,
body.light-theme .apple-footer-btn:hover .apple-footer-icon::after {
    opacity: 1;
    animation: iconShine 2s ease-in-out infinite;
}

@keyframes iconShine {
    0% {
        transform: translateX(-100%) translateY(-100%) rotate(45deg);
    }
    100% {
        transform: translateX(100%) translateY(100%) rotate(45deg);
    }
}