/**
 * monitor-mobile.css — camada responsiva do Painel Admin (Krumora POS)
 *
 * As media queries antigas do monitor.css miram classes que não existem mais
 * (.monitor-tabs/.dashboard-grid). Esta camada cobre o markup REAL:
 * .monitor-header / .admin-tabs / .kpi-grid / .charts-row / .bottom-row / painéis.
 * Carregada DEPOIS do monitor.css — só sobrescreve em telas pequenas.
 */

/* ============ TABLETS E CELULARES (≤ 768px) ============ */
@media (max-width: 768px) {

    /* --- Header fixo: compacto, sem informação secundária --- */
    .monitor-header { padding: 0 10px; gap: 8px; }
    .monitor-timestamp, .monitor-duration { display: none; }
    .badge-monitor { display: none; }
    .monitor-header-center { gap: 6px; }
    .monitor-clock { font-size: 0.85rem; }
    .live-indicator { font-size: 0.6rem; }

    /* --- Abas: rolagem horizontal com dedo, sticky abaixo do header --- */
    .admin-tabs {
        position: sticky;
        top: var(--header-h, 56px);
        z-index: 90;
        padding: 0 6px;
        scrollbar-width: none;
    }
    .admin-tabs::-webkit-scrollbar { display: none; }
    .admin-tab-btn {
        padding: 13px 12px;
        font-size: 0.68rem;
        letter-spacing: 0.4px;
        gap: 6px;
    }
    .admin-tab-btn i { font-size: 0.95rem; }

    /* --- Conteúdo --- */
    .monitor-content { padding: 10px; }

    /* --- KPIs: 4 colunas → 2; receita: lucro em destaque full-width --- */
    .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .revenue-grid { grid-template-columns: repeat(2, 1fr); }
    .revenue-grid .kpi-card:last-child { grid-column: span 2; }
    .kpi-card { padding: 12px; }
    .kpi-value { font-size: 1.3rem; }
    .kpi-label { font-size: 0.62rem; }
    .kpi-sub { font-size: 0.68rem; }

    /* --- Status novos/preparando/finalizados: mantém 3, compacto --- */
    .status-row { gap: 8px; }
    .status-card { padding: 10px; gap: 8px; }
    .status-value { font-size: 1.15rem; }
    .status-label { font-size: 0.6rem; }

    /* --- Gráficos e blocos: empilha tudo --- */
    .charts-row { grid-template-columns: 1fr; gap: 10px; }
    .bottom-row { grid-template-columns: 1fr; gap: 10px; }
    .chart-card { padding: 12px; }
    .chart-timeline-wrap canvas { max-width: 100%; height: auto; }
    .chart-donut-wrap { flex-direction: column; align-items: center; }
    .chart-donut-wrap canvas { width: 220px !important; height: 220px !important; }
    .feed-card { max-height: 380px; }
    .payment-grid { grid-template-columns: 1fr 1fr; gap: 8px; }

    /* --- Mapa de chamadas: encolhe pra caber na tela (posições são em %) --- */
    .mini-map-inner {
        width: 100% !important;
        max-width: 520px;
        margin: 0 auto;
    }
    .mini-map-table {
        width: 19px;
        height: 19px;
        font-size: 0.55rem;
    }
    .mini-map-container { max-height: none !important; overflow: visible !important; }

    /* --- Tabelas (relatórios, terminais, estoque, mapa): scroll horizontal --- */
    .admin-tab-panel table,
    table.rel-table, table.terminal-table, table.mini-map-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

    /* --- Resumo por evento (aba Eventos): vira card de 2 andares --- */
    .event-summary-row.header { display: none; }
    .event-summary-row {
        grid-template-columns: auto auto auto 1fr;
        grid-template-areas:
            "name name name name"
            "date pedidos itens receita";
        row-gap: 4px;
        column-gap: 12px;
        padding: 12px;
    }
    .event-summary-row span:nth-of-type(1) { grid-area: date; color: var(--text-muted); font-size: 0.75rem; }
    .event-summary-row .es-name { grid-area: name; white-space: normal; font-size: 0.9rem; }
    .event-summary-row span:nth-of-type(3) { grid-area: pedidos; text-align: left; font-size: 0.75rem; }
    .event-summary-row span:nth-of-type(4) { grid-area: itens; text-align: left; font-size: 0.75rem; }
    .event-summary-row span:nth-of-type(3)::after { content: " pedidos"; color: var(--text-muted); }
    .event-summary-row span:nth-of-type(4)::after { content: " itens"; color: var(--text-muted); }
    .event-summary-row .es-revenue { grid-area: receita; }

    /* --- Montagem do Cardápio: painéis empilhados, altura contida --- */
    .cardapio-builder {
        grid-template-columns: 1fr;
        gap: 12px;
        min-height: unset;
    }
    .cardapio-inventory-list,
    .cardapio-categories { max-height: 44vh; }
    .cardapio-subtitle { font-size: 0.75rem; }
    .cardapio-title { font-size: 1.05rem; }

    /* --- Filtros de relatório: 2 por linha, campos confortáveis --- */
    .rel-filters { gap: 8px; }
    .rel-filter-group { min-width: calc(50% - 8px); }
    .rel-filter-group input, .rel-filter-group select { min-height: 40px; }

    /* --- Modais do admin: quase tela cheia --- */
    #monitorMode .modal-overlay > div {
        max-width: 96vw !important;
        max-height: 92vh !important;
        overflow-y: auto;
    }

    /* --- Login --- */
    .monitor-login .login-card { width: min(94vw, 380px); }

    /* --- Card injetado do modo de operação (comandas.js) --- */
    #operationModeCard { margin: 8px 10px; }
    #operationModeCard .op-mode-btn { flex: 1; }

    /* --- Toque: alvos mínimos nos controles do header --- */
    .monitor-refresh-btn, .logout-btn { min-width: 38px; min-height: 38px; }
}

/* ============ CELULARES PEQUENOS (≤ 480px) ============ */
@media (max-width: 480px) {
    .kpi-value { font-size: 1.1rem; }
    .kpi-card { padding: 10px; }
    .kpi-grid, .revenue-grid { gap: 6px; }
    .status-row { grid-template-columns: repeat(3, 1fr); gap: 6px; }
    .status-icon { display: none; }

    .admin-tab-btn { padding: 12px 10px; font-size: 0.62rem; }

    .monitor-content { padding: 8px; }
    .chart-card-title { font-size: 0.8rem; }
    .payment-grid { grid-template-columns: 1fr 1fr; }
    .payment-value { font-size: 0.9rem; }

    .rel-filter-group { min-width: 100%; }

    #monitorMode .modal-overlay > div {
        max-width: 100vw !important;
        max-height: 96vh !important;
        border-radius: 14px 14px 0 0 !important;
    }
}