/* ================================================================
   RESPONSIVO MOBILE — ajustes gerais para telas <= 768px
   ================================================================ */

@media (max-width: 768px) {

    /* ── Topbar ─────────────────────────────────────────────────── */
    .topbar-search-center { display: none !important; }
    .topbar-right .topbar-action-btn:not(.topbar-notif-btn) { display: none; }
    .topbar-logo-img { max-height: 28px; }

    /* ── Page header OX (ícone vermelho + título + breadcrumb) ───── */
    [style*="display:flex"][style*="gap:20px"] > [style*="width:34px"],
    [style*="display:flex"][style*="gap:16px"] > [style*="width:34px"] {
        width: 28px !important;
        height: 28px !important;
    }

    /* ── KPI Cards: 6 col → 3 col → 2 col ────────────────────────── */
    .kpi-grid,
    [style*="grid-template-columns"][style*="repeat(6"],
    [style*="grid-template-columns"][style*="repeat(4"] {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    [style*="grid-template-columns"][style*="repeat(3"] {
        grid-template-columns: 1fr 1fr !important;
    }

    /* ── Painéis 2 colunas → empilhar ───────────────────────────── */
    /* Seletor :has() para browsers modernos */
    [style*="display:flex"][style*="gap:20px"]:has([style*="width:260px"]),
    [style*="display:flex"][style*="gap:20px"]:has([style*="width:272px"]),
    [style*="display:flex"][style*="gap:20px"]:has([style*="width:280px"]) {
        flex-direction: column !important;
    }
    /* Fallback: painel lateral com width fixo → sempre vira full-width */
    [style*="width:260px"][style*="flex-shrink:0"],
    [style*="width:272px"][style*="flex-shrink:0"],
    [style*="width:280px"][style*="flex-shrink:0"] {
        width: 100% !important;
        position: static !important;
        top: auto !important;
    }
    /* Força o pai a empilhar quando tem painel lateral */
    [style*="align-items:flex-start"][style*="display:flex"][style*="gap:20px"] {
        flex-direction: column !important;
    }

    /* ── ListaItens: layout 2 colunas → coluna única ────────────── */
    .li-layout-2col {
        flex-direction: column !important;
    }
    .li-painel-lateral {
        width: 100% !important;
        position: static !important;
        top: auto !important;
        order: 99; /* painel vai para baixo da lista */
    }

    /* ── ListaItens: KPI grid 6 col → 3 col ─────────────────────── */
    .li-kpi-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    /* ── Toolbar de filtros: empilhar ───────────────────────────── */
    .toolbar { flex-wrap: wrap !important; gap: 6px !important; }
    .toolbar-search { width: 100% !important; min-width: 0 !important; }
    .toolbar-filters { flex-wrap: wrap !important; gap: 6px !important; width: 100%; }
    .toolbar-filters .form-select { flex: 1 1 calc(50% - 6px) !important; min-width: 100px !important; max-width: 100% !important; }

    /* ── Filtros: empilhar em coluna ─────────────────────────────── */
    .filtros-row,
    [class*="filtro"][style*="display:flex"],
    .toolbar-filtros {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .filtros-row > *,
    .toolbar-filtros > * {
        flex: 1 1 calc(50% - 8px) !important;
        min-width: 120px !important;
    }

    /* ── Toolbar de ações ────────────────────────────────────────── */
    .action-toolbar,
    [class*="toolbar"] {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    /* ── Tabela: scroll horizontal ───────────────────────────────── */
    .table-container,
    .table-wrap,
    [style*="overflow-x:auto"],
    [style*="overflow-x: auto"] {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* ── Card / Painel ───────────────────────────────────────────── */
    .card { padding: var(--spacing-3) !important; }

    /* ── Formulários: campos full-width ──────────────────────────── */
    .form-row {
        flex-direction: column !important;
    }
    .form-row > * {
        width: 100% !important;
    }

    /* ── Breadcrumb: ocultar itens do meio ───────────────────────── */
    .breadcrumb-item:not(:first-child):not(:last-child) {
        display: none;
    }
    .breadcrumb-sep:not(:last-of-type) {
        display: none;
    }

    /* ── Sidebar header: manter altura do topbar ─────────────────── */
    .sidebar-header {
        height: var(--topbar-height) !important;
        padding: 0 var(--spacing-2) !important;
    }

    /* ── Sidebar logo: sem botão collapse no mobile ──────────────── */
    .sidebar-collapse-btn { display: none !important; }
}

/* ── Telas muito pequenas (< 480px) ────────────────────────────── */
@media (max-width: 480px) {
    .app-content { padding: var(--spacing-2) !important; }

    .kpi-grid,
    [style*="grid-template-columns"][style*="repeat(4"],
    [style*="grid-template-columns"][style*="repeat(3"] {
        grid-template-columns: 1fr 1fr !important;
    }

    .li-kpi-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .topbar-brand-name { max-width: 120px !important; }

    /* Toolbar filtros: select full width em telas menores que 480px */
    .toolbar-filters .form-select {
        flex: 1 1 100% !important;
    }
}