/* css/mobile.css - Versão v0.4.8 (Correção de Seletor de Ícones e Títulos) */

/* 1. REGRAS PARA DESKTOP */
.mobile-header, .mobile-nav, #summary-container-mobile, .mobile-overlay, .app-brand-mobile { 
    display: none !important; 
}

/* 2. REGRAS APENAS PARA MOBILE */
@media (max-width: 768px) {
    .app-container { flex-direction: column; height: 100dvh; overflow: hidden; }
    .sidebar { display: none !important; }

    .viewport {
        padding: 0 15px 15px 15px; 
        height: calc(100dvh - 180px); 
        margin-top: 110px; 
        overflow-y: auto;
        display: flex;
        flex-direction: column;
    }

    /* HEADER MOBILE FIXO */
    .mobile-header {
        display: flex !important;
        position: fixed; top: 0; left: 0; right: 0;
        height: 110px; 
        background: rgba(255, 255, 255, 0.75);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-bottom: 1px solid var(--border);
        z-index: 1000; padding: 10px 15px; 
        flex-direction: column;
        justify-content: center;
        gap: 10px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }

    /* Primeira Linha: Marca + Idiomas */
    .app-brand-mobile { 
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        font-size: 1rem; 
        font-weight: 800; 
        color: var(--text-main); 
        letter-spacing: -0.02em;
        width: 100%;
        border-bottom: 1px solid var(--border);
        padding-bottom: 8px;
    }
    .app-brand-mobile span { color: var(--primary); font-weight: 900; }

    /* Lang Switcher agora na primeira linha */
    .lang-switcher-mobile {
        display: flex;
        gap: 8px;
        align-items: center;
    }
    .lang-switcher-mobile .lang-btn {
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;
        opacity: 0.3;
        transition: all 0.2s;
        width: 22px;
        height: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .lang-switcher-mobile .lang-btn.active {
        opacity: 1;
        transform: scale(1.1);
    }
    .lang-switcher-mobile .flag-icon {
        width: 100%;
        height: auto;
        border-radius: 2px;
        pointer-events: none;
    }

    /* Segunda Linha: Info Coleção + Auto Flip */
    .mobile-header-row {
        display: flex;
        width: 100%;
        justify-content: space-between;
        align-items: center;
    }

    .mobile-header-info {
        display: flex;
        flex-direction: column;
        gap: 2px;
        max-width: 70%; 
    }
    .mobile-header-info .col-name { 
        font-size: 0.9rem; 
        font-weight: 800; 
        color: var(--text-main);
        display: block;
        line-height: 1.2;
    }
    .mobile-header-info .col-owner { 
        font-size: 0.6rem; 
        color: var(--text-muted);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mobile-controls {
        background: var(--primary-light); 
        padding: 6px 10px; 
        border-radius: 10px; 
        border: 1px solid rgba(37, 99, 235, 0.1);
        flex-shrink: 0;
    }

    .mobile-controls .toggle-label {
        font-size: 0.55rem;
        font-weight: 800;
        text-transform: uppercase;
        white-space: nowrap;
        margin-left: 4px;
    }

    /* NAVEGAÇÃO INFERIOR */
    .mobile-nav {
        display: flex !important;
        position: fixed; bottom: 0; left: 0; right: 0;
        height: 70px; 
        background: rgba(255, 255, 255, 0.75);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-top: 1px solid var(--border);
        z-index: 1000; padding-bottom: env(safe-area-inset-bottom);
    }
    .mobile-nav-item {
        flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 4px; background: none; border: none; color: var(--text-muted);
    }
    .mobile-nav-item.active { color: var(--primary); }

    /* FILTROS E TOOLBAR */
    .viewport-header.mobile-visible { 
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 20px 0 !important;
    }

    #view-title {
        font-size: 1.3rem; 
        margin: 0 !important;
        line-height: 1.2;
        text-align: center;
    }
    
    .viewport-header .toolbar { display: none !important; }

    .viewport-header.show-toolbar .toolbar {
        display: flex !important; 
        flex-direction: column !important; 
        gap: 12px !important;
        background: rgba(255, 255, 255, 0.6) !important;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        padding: 15px !important; 
        border-radius: 16px; 
        border: 1px solid var(--border);
        width: 100% !important;
        margin-top: 15px !important;
    }

    .search-box, .filter-box, .sort-box { width: 100% !important; }
    .search-box input, .filter-box select, .sort-box select { width: 100% !important; height: 45px; }
    .toolbar-divider, .view-actions { display: none !important; }

    /* GRID E CARDS */
    .grid-container.mode-focus { 
        display: flex; 
        flex-direction: column; 
        align-items: center; 
        gap: 25px; 
        padding: 0 0 100px 0; 
    }
    .grid-container.mode-focus .card { --card-w: 85vw; --card-h: 60vh; max-width: 340px; }
    
    .grid-container.mode-focus .card-ribbon {
        font-size: var(--f-size-item) !important;
    }

    .grid-container.mode-grid { 
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); 
        gap: 15px; 
        padding-top: 5px;
        padding-bottom: 100px; 
    }
    .grid-container.mode-grid .card { --card-w: 100%; --card-h: 230px; }

    .grid-container.mode-grid .card-ribbon {
        font-size: calc(var(--f-size-item) * 0.85) !important;
    }

    /* FIX DE ALINHAMENTO VERTICAL E REMOÇÃO DE TRUNCAMENTO */
    .card-ribbon {
        height: 45px !important;
        display: grid !important;
        align-content: center !important;
        line-height: 1.1 !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        overflow: visible !important;
    }

    .back-header strong {
        display: block !important;
        overflow: visible !important;
    }

    /* RESET DE ESCALA DE ÍCONES (CORRIGIDO PARA .img-container) */
    /* Força o container a ignorar larguras fixas do settings e ocupar o card */
    .img-container.mode-icon {
        width: 100% !important;
        height: 100% !important;
        flex: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 0 !important; /* Permite que o flex funcione corretamente */
    }

    /* Define a escala da imagem em 80% ignorando --card-img-size */
    .img-container.mode-icon img {
        width: 80% !important;
        height: 80% !important;
        max-width: 80% !important;
        max-height: 80% !important;
        object-fit: contain !important;
    }

    /* RESUMO */
    #summary-container-mobile.mobile-overlay { 
        display: none; position: fixed; top: 110px; left: 0; right: 0; bottom: 70px;
        width: 100%; background: #ffffff; z-index: 900; overflow-y: auto; padding: 20px 20px 100px;
    }
    #summary-container-mobile.mobile-overlay.active { display: flex !important; flex-direction: column; gap: 20px; }
}