/*
 * Base mobile-first do padrão visual s5-* (painel app + portal).
 * Breakpoints únicos do sistema: 1024px (tablet), 768px (tablet retrato), 430px (celular).
 * Touch targets mínimos de 44x44px (Apple HIG / Material).
 */

/* ── Utilitários de toque ────────────────────────────────────────── */
.s5-btn,
.s5-dash .s5-btn,
.s5-djen .s5-dj-btn,
.s5-portal .s5-p-card .s5-p-foot i {
    min-height: 44px;
}

.s5-touch {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ── Grid responsivo padrão ──────────────────────────────────────── */
.s5-auto-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

/* ── Tablet (≤1024px) ────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .s5-grid.s5-g4 { grid-template-columns: repeat(2, 1fr) !important; }
    .s5-grid.s5-g3 { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── Tablet retrato (≤768px) ─────────────────────────────────────── */
@media (max-width: 768px) {
    .s5-grid.s5-g2,
    .s5-grid.s5-g3 { grid-template-columns: 1fr !important; }

    /* Botões e ações crescem para toque confortável */
    .s5-dj-btn,
    .s5-btn,
    .s5-dj-log-close {
        min-height: 44px !important;
        padding: 10px 16px !important;
        font-size: 13.5px !important;
    }

    /* Kanbans viram carrossel horizontal com scroll-snap */
    .s5-kanban {
        display: flex !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 12px;
    }
    .s5-kanban > * {
        flex: 0 0 82vw;
        scroll-snap-align: start;
    }

    /* Tabelas custom: rolagem horizontal sem quebrar a página */
    .s5-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ── Celular (≤430px) ────────────────────────────────────────────── */
@media (max-width: 430px) {
    .s5-grid,
    .s5-grid.s5-g4,
    .s5-grid.s5-g2,
    .s5-auto-grid { grid-template-columns: 1fr !important; }

    /* Barras de ação empilham e ocupam a largura toda */
    .s5-dj-acts { flex-direction: column; align-items: stretch !important; }
    .s5-dj-acts .s5-dj-btn { width: 100%; justify-content: center; margin-left: 0 !important; }

    /* Fonte base maior para leitura no celular */
    .s5-dash, .s5-djen, .s5-portal { font-size: 15px; }

    /* Cards com respiro menor nas laterais */
    .s5-card, .s5-dj-card, .s5-p-card, .s5-hc-card { padding: 14px !important; }

    /* Paginação com alvos de toque adequados */
    .s5-pager button { min-width: 44px; min-height: 44px; }

    /* Estatísticas DJEN empilham */
    .s5-dj-stat { min-width: 100% !important; }
}

/* ── Barra de navegação inferior (funções principais no celular/tablet) ──
 * Visível só onde a sidebar do Filament vira menu-hambúrguer (<1024px);
 * no desktop a sidebar já cobre a navegação, então fica oculta.            */
.s5-bottomnav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    background: #fff;
    border-top: 1px solid #E5E7EB;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, .06);
    padding-bottom: env(safe-area-inset-bottom, 0); /* respeita a faixa do iPhone */
}
.dark .s5-bottomnav {
    background: #111827;
    border-top-color: #374151;
}
.s5-bottomnav .s5-bn-item {
    flex: 1 1 0;
    min-height: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 2px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    color: #6B7280;
    text-decoration: none;
    transition: color .15s ease;
}
.s5-bottomnav .s5-bn-item i {
    font-size: 18px;
}
/* O Portal desenha os ícones em SVG inline (sem depender de CDN de fonte). */
.s5-bottomnav .s5-bn-item svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}
.s5-bottomnav .s5-bn-item.is-active {
    color: #2563EB;
}
.dark .s5-bottomnav .s5-bn-item { color: #9CA3AF; }
.dark .s5-bottomnav .s5-bn-item.is-active { color: #60A5FA; }

/* Portal: mesma barra, um pouco mais discreta. Continua acima dos 44px de
 * alvo de toque recomendados — encolher além disso erraria o dedo. */
.s5-bottomnav.s5-bn-portal .s5-bn-item {
    min-height: 48px;
    padding: 5px 2px;
    gap: 2px;
    font-size: 10px;
}
.s5-bottomnav.s5-bn-portal .s5-bn-item svg {
    width: 19px;
    height: 19px;
}

/* Reserva espaço no rodapé do conteúdo para a barra não cobrir nada. */
@media (max-width: 1023.98px) {
    .fi-main,
    .fi-page { padding-bottom: 76px; }
}

/* No desktop a sidebar já basta: esconde a barra inferior. */
@media (min-width: 1024px) {
    .s5-bottomnav { display: none; }
}