/**
 * Mobile Enhancements - Sprint 6
 * Otimizações avançadas para dispositivos móveis
 */

/* ========== SAFE AREA INSETS (iPhone X+ notch) ========== */

/* Suporte para notch e bordas arredondadas */
:root {
    --safe-area-inset-top: env(safe-area-inset-top, 0);
    --safe-area-inset-right: env(safe-area-inset-right, 0);
    --safe-area-inset-bottom: env(safe-area-inset-bottom, 0);
    --safe-area-inset-left: env(safe-area-inset-left, 0);
}

/* Aplicar safe area no body */
body {
    padding-top: var(--safe-area-inset-top);
    padding-right: var(--safe-area-inset-right);
    padding-bottom: var(--safe-area-inset-bottom);
    padding-left: var(--safe-area-inset-left);
}

/* Header fixo com safe area */
.main-header-container {
    padding-top: var(--safe-area-inset-top);
}

/* Mobile menu com safe area */
#mobile-menu {
    padding-left: var(--safe-area-inset-left);
    padding-right: var(--safe-area-inset-right);
}

/* Footer com safe area */
footer {
    padding-bottom: var(--safe-area-inset-bottom);
}

/* ========== VIEWPORT HEIGHT FIX (100vh mobile) ========== */

/* Fix para 100vh em mobile (barra de endereço) */
.full-height {
    min-height: 100vh;
    min-height: -webkit-fill-available;
}

html {
    height: -webkit-fill-available;
}

/* Mobile menu full height */
#mobile-menu {
    height: 100vh;
    height: -webkit-fill-available;
}

/* ========== TOUCH TARGETS 44x44px+ ========== */

/* Classe base para touch targets adequados */
.touch-target {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
}

/* Touch target para botões */
button,
.btn,
.button,
[type="button"],
[type="submit"],
[type="reset"] {
    min-height: 44px;
    padding: 0.75rem 1.5rem;
}

/* Touch target para links */
a:not(.no-touch-target) {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0.5rem;
}

/* Touch target para ícones clicáveis */
.icon-button,
.close-button,
[aria-label*="fechar"],
[aria-label*="close"] {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
}

/* Touch target para checkboxes e radios */
input[type="checkbox"],
input[type="radio"] {
    min-width: 24px;
    min-height: 24px;
    margin: 10px;
}

/* Labels clicáveis */
label {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    padding: 0.5rem 0;
}

/* ========== FORMULÁRIOS MOBILE ========== */

/* Prevenir zoom em inputs mobile (font-size >= 16px) */
input,
textarea,
select {
    font-size: 16px !important;
    font-size: max(16px, 1em);
}

/* Input padding para melhor usabilidade mobile */
@media (max-width: 768px) {
    input:not([type="checkbox"]):not([type="radio"]),
    textarea,
    select {
        padding: 1rem !important;
        min-height: 48px;
        border-radius: 8px;
    }

    textarea {
        min-height: 120px;
    }

    /* Botões maiores em mobile */
    button,
    [type="submit"],
    .btn {
        min-height: 48px;
        padding: 1rem 1.5rem;
        font-size: 16px;
        border-radius: 8px;
    }
}

/* ========== ORIENTAÇÃO ========== */

/* Mensagem para landscape (opcional) */
@media (orientation: landscape) and (max-height: 500px) {
    .landscape-warning {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        background: #f59e0b;
        color: white;
        padding: 0.5rem;
        text-align: center;
        font-size: 14px;
        z-index: 10000;
    }
}

.landscape-warning {
    display: none;
}

/* ========== SCROLL BEHAVIOR MOBILE ========== */

/* Smooth scroll nativo */
html {
    scroll-behavior: smooth;
}

/* Overscroll behavior (evita bounce em alguns casos) */
body {
    overscroll-behavior-y: contain;
}

/* Scroll suave em containers */
.scroll-container {
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
}

/* ========== TAP HIGHLIGHT ========== */

/* Remover tap highlight azul padrão */
* {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

/* Adicionar feedback visual customizado */
button:active,
.btn:active,
a:active {
    opacity: 0.7;
    transform: scale(0.98);
    transition: all 0.1s ease;
}

/* ========== TEXT SELECTION ========== */

/* Melhorar seleção de texto em mobile */
::selection {
    background-color: rgba(77, 134, 196, 0.3);
    color: inherit;
}

::-moz-selection {
    background-color: rgba(77, 134, 196, 0.3);
    color: inherit;
}

/* ========== PERFORMANCE ========== */

/* Hardware acceleration para animações */
.animated,
.transition {
    will-change: transform, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* ========== MOBILE MENU SPECIFIC ========== */

/* Touch targets no menu mobile */
#mobile-menu a,
#mobile-menu button {
    min-height: 48px;
    padding: 0.75rem 1rem;
}

/* ========== TOAST NOTIFICATIONS MOBILE ========== */

@media (max-width: 768px) {
    .toast-container {
        top: auto;
        bottom: 1rem;
        left: 1rem;
        right: 1rem;
        max-width: none;
    }

    .toast {
        min-width: auto;
        max-width: none;
    }
}

/* ========== SKELETON LOADING MOBILE ========== */

@media (max-width: 768px) {
    .skeleton-list {
        grid-template-columns: 1fr;
        padding: 1rem;
    }
}

/* ========== BACK TO TOP MOBILE ========== */

@media (max-width: 768px) {
    .back-to-top {
        bottom: 1rem !important;
        right: 1rem !important;
        width: 48px !important;
        height: 48px !important;
    }
}

/* ========== CARDS MOBILE ========== */

@media (max-width: 768px) {
    /* Cards em coluna única */
    .card-grid,
    .main-content-list {
        grid-template-columns: 1fr !important;
        gap: 1.5rem;
    }

    /* Card hover effects reduzidos em mobile */
    .card-hover-lift:hover {
        transform: none;
    }

    /* Imagens menores em mobile */
    .card-image-zoom:hover img {
        transform: scale(1.02);
    }
}

/* ========== UTILITY CLASSES ========== */

/* Esconder em mobile */
.mobile-hidden {
    display: none;
}

@media (min-width: 769px) {
    .mobile-hidden {
        display: block;
    }

    .desktop-hidden {
        display: none;
    }
}

/* Mostrar apenas em mobile */
.mobile-only {
    display: block;
}

@media (min-width: 769px) {
    .mobile-only {
        display: none;
    }
}

/* Texto menor em mobile */
@media (max-width: 768px) {
    .mobile-text-sm {
        font-size: 0.875rem;
    }

    .mobile-text-xs {
        font-size: 0.75rem;
    }
}

/* Padding reduzido em mobile */
@media (max-width: 768px) {
    .mobile-px-2 {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .mobile-py-2 {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }
}

/* ========== ACCESSIBILITY MOBILE ========== */

/* Focus visible mais forte em mobile */
@media (max-width: 768px) {
    *:focus-visible {
        outline: 3px solid #4d86c4;
        outline-offset: 2px;
    }
}

/* ========== DARK MODE MOBILE ========== */

/* Ajustes específicos para dark mode em mobile */
@media (max-width: 768px) and (prefers-color-scheme: dark) {
    body {
        background: #111827;
    }

    .toast {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
    }
}

/* ========== LANDSCAPE MODE ========== */

@media (orientation: landscape) and (max-height: 600px) {
    /* Reduzir padding vertical em landscape */
    .mobile-landscape-compact {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }

    /* Header mais compacto em landscape */
    .main-header-container {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    /* Menu mobile em landscape */
    #mobile-menu {
        max-width: 360px;
    }
}

/* ========== PULL TO REFRESH (opcional) ========== */

/* Prevenir pull-to-refresh em alguns casos */
.no-pull-refresh {
    overscroll-behavior-y: contain;
}

/* ========== PRINT (mobile screenshot) ========== */

@media print {
    .mobile-menu,
    .back-to-top,
    .toast-container {
        display: none !important;
    }
}

/* ========== HIGH DPI SCREENS ========== */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Ajustes para telas retina */
    .icon {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}