/* ============================================================
   ADVERITAS - Ajustes mobile-first (Hotfix 1: tab-bar escondida em desktop)
   ============================================================ */

/* ----- Padrão (desktop): tab-bar mobile NÃO aparece ----- */
.mobile-tabbar { display: none; }

/* Toques: alvo mínimo 44x44 para acessibilidade */
.btn, .icon-btn, .app-nav__item, .user-menu__item, .sidebar-card__link,
.theme-toggle, .nav-toggle, button {
    min-height: 40px;
}

/* ----- Tablet (≤ 768px) ----- */
@media (max-width: 768px) {
    .container { padding-left: 16px; padding-right: 16px; }
    .app-shell { display: block; padding: 12px; }
    .app-shell--narrow, .app-shell--wide { padding: 12px; }
    .app-content, .app-sidebar { width: 100%; max-width: 100%; }
    .app-sidebar { margin-top: 18px; }

    .form-row { display: grid; grid-template-columns: 1fr; gap: 10px; }
    .checkbox-grid { grid-template-columns: repeat(2, 1fr); }
    .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .admin-grid-2col { grid-template-columns: 1fr; }
    .admin-shell { display: block; }
    .admin-sidebar { width: 100%; position: static; }

    .auth-page { display: block; }
    .auth-page__brand { display: none; }
    .auth-page__form-wrap { padding: 18px; }

    table { font-size: .85rem; }
    th, td { padding: 6px 8px !important; }
}

/* ----- Mobile (≤ 480px) ----- */
@media (max-width: 480px) {
    .app-header__inner { gap: 6px; padding: 8px 10px; }
    .app-nav { display: none; }
    .app-nav.is-open {
        display: block; position: absolute; top: 56px; left: 0; right: 0;
        background: #fff; padding: 12px; box-shadow: 0 8px 16px rgba(0,0,0,.1);
        z-index: 50;
    }
    .app-nav.is-open .app-nav__item { display: flex; padding: 12px; border-bottom: 1px solid #f4f5f7; }

    .theme-toggle { display: none; }
    .icon-btn { width: 36px; height: 36px; }

    .checkbox-grid { grid-template-columns: 1fr; }
    .kpi-grid { grid-template-columns: 1fr; }
    .post-create__head { flex-direction: column; gap: 8px; }
    .post-create__foot select { width: 100%; }
    .post-card { padding: 14px; }

    h1 { font-size: 1.4rem; }
    h2 { font-size: 1.15rem; }
    .page-head { flex-direction: column; align-items: flex-start; gap: 10px; }

    table.responsive thead { display: none; }
    table.responsive tr {
        display: block; border: 1px solid #eee; border-radius: 10px;
        margin-bottom: 10px; padding: 10px; background: #fff;
    }
    table.responsive td {
        display: block; padding: 4px 0; border: 0;
    }
    table.responsive td::before {
        content: attr(data-label);
        display: inline-block; min-width: 110px; font-weight: 600; color: #666;
    }

    .admin-topbar { flex-wrap: wrap; gap: 6px; padding: 8px 12px; }
    .admin-topbar__user { gap: 6px; flex-wrap: wrap; }

    /* AGORA SIM: tab-bar fixa no rodapé só em mobile */
    .mobile-tabbar {
        display: flex;
        position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
        background: #fff; border-top: 1px solid #eee;
        justify-content: space-around;
        padding: 6px 0;
    }
    .mobile-tabbar a {
        flex: 1; text-align: center; color: #666; padding: 8px 4px; font-size: .72rem;
        text-decoration: none; line-height: 1.2;
    }
    .mobile-tabbar a.is-active { color: #0B2447; font-weight: 600; }
    .mobile-tabbar a i { display: block; margin: 0 auto 2px; width: 22px; height: 22px; }

    body.app-body { padding-bottom: 64px; }
}

/* Dark variants */
body.app-body.is-dark .app-nav.is-open { background: #1a2330; }
body.app-body.is-dark table.responsive tr { background: #1a2330; border-color: #2a3447; }
body.app-body.is-dark .mobile-tabbar { background: #0a1018; border-color: #1f2937; }
body.app-body.is-dark .mobile-tabbar a { color: #cbd5e1; }
body.app-body.is-dark .mobile-tabbar a.is-active { color: #B58B30; }