/* ════════════════════════════════════════
   HARPPYA — CSS MOBILE RESPONSIVO
   Aplicado em telas <= 768px
════════════════════════════════════════ */

/* ── Base mobile ── */
@media (max-width: 768px) {
    html { font-size: 15px; }

    /* ── Navbar ── */
    .nav {
        height: 56px !important;
        padding: 0 14px !important;
    }
    .nav-page-title { display: none; }
    .nav-logo { font-size: .9rem; }
    .nav-logo-icon { width: 30px; height: 30px; border-radius: 8px; }
    .nav-logo-icon svg { width: 15px; height: 15px; }
    .nav-user-name { display: none; }
    .nav-role { display: none; }
    .nav-av { width: 30px; height: 30px; font-size: .68rem; }

    /* ── Main content ── */
    .main { padding-top: 56px !important; }
    .main-inner { padding: 12px !important; }

    /* ── Drawer full width ── */
    .drawer { width: 100vw !important; max-width: 100vw !important; }

    /* ── Flash messages ── */
    .flash { margin: 8px 12px; font-size: .78rem; padding: 10px 14px; }

    /* ── Cards genéricos ── */
    .card { border-radius: 10px; padding: 14px !important; }

    /* ── Page header ── */
    .page-header { margin-bottom: 14px; }
    .page-title { font-size: 1.1rem !important; }
    .page-subtitle { font-size: .72rem !important; }

    /* ── Botões ── */
    .btn, .btn-prim, .btn-ghost { font-size: .78rem; padding: 8px 14px; }
}

/* ── Safe area iPhone ── */
@supports (padding: env(safe-area-inset-top)) {
    .nav {
        padding-top: env(safe-area-inset-top) !important;
        height: calc(56px + env(safe-area-inset-top)) !important;
    }
    .main { padding-top: calc(56px + env(safe-area-inset-top)) !important; }
}

/* ════════════════════════
   DASHBOARD
════════════════════════ */
@media (max-width: 768px) {
    .dh-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }
    .dh-card { padding: 12px !important; }
    .dh-card-name { font-size: .78rem !important; }
    .dh-card-desc { font-size: .68rem !important; display: none; }
    .dh-icon { width: 32px !important; height: 32px !important; }
    .dh-icon svg { width: 16px !important; height: 16px !important; }
}

/* ════════════════════════
   PEDIDOS ML — Tabela
════════════════════════ */
@media (max-width: 768px) {
    /* Esconde colunas menos importantes */
    .th-data, .td-data { display: none !important; }
    .th-tipo, .td-tipo { display: none !important; }

    /* Tabela scroll horizontal */
    .table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -12px;
        padding: 0 12px;
    }
    table { min-width: 480px; font-size: .76rem !important; }
    th, td { padding: 8px 10px !important; }

    /* Filtros em coluna */
    .filtros-row {
        flex-direction: column !important;
        gap: 8px !important;
    }
    .filtros-row input,
    .filtros-row select { width: 100% !important; font-size: .82rem; }

    /* Botões de importação empilhados */
    .import-btns {
        flex-direction: column !important;
        gap: 8px !important;
        width: 100%;
    }
    .import-btns button,
    .import-btns a { width: 100% !important; justify-content: center; }

    /* Detalhe do pedido */
    .pedido-grid {
        grid-template-columns: 1fr !important;
    }
    .pedido-cols {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
}

/* ════════════════════════
   RELATÓRIOS — Full height
════════════════════════ */
@media (max-width: 768px) {
    /* Desativa fixed height no mobile */
    .rel-shell {
        position: static !important;
        overflow: auto !important;
        height: auto !important;
    }
    .rel-main {
        grid-template-columns: 1fr !important;
        height: auto !important;
        overflow: visible !important;
    }
    .rel-panel {
        overflow: visible !important;
        min-height: 280px;
    }
    .rel-panel-body { overflow: visible !important; }
    .rel-chart-body { height: 200px !important; }

    /* KPIs em 3 colunas */
    .rel-kpis {
        grid-template-columns: repeat(3, 1fr) !important;
        overflow-x: auto;
    }
    .kpi { padding: 10px 10px !important; }
    .kpi-v { font-size: .88rem !important; }
    .kpi-l { font-size: .52rem !important; }

    /* Barra topo relatorio */
    .rel-bar {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
        padding: 12px !important;
    }
    .rel-nav { width: 100%; justify-content: space-between; }
    .rel-exp { width: 100%; justify-content: center; }

    /* Tabelas do relatorio */
    .rtbl { font-size: .72rem !important; }
    .rtbl th, .rtbl td { padding: 7px 10px !important; }
}

/* ════════════════════════
   VENDAS AO VIVO
════════════════════════ */
@media (max-width: 768px) {
    .rel-shell {
        position: static !important;
        overflow: auto !important;
    }

    /* Header ao vivo */
    [class*="vv-header"], .vv-hd {
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 10px 14px !important;
    }

    /* Stats bar em 2 colunas */
    [class*="stats"], .vv-stats {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Grid 2x2 → 1 coluna */
    [class*="vv-grid"], .vv-main {
        grid-template-columns: 1fr !important;
        overflow: auto !important;
    }
}

/* ════════════════════════
   PRODUTOS / ESTOQUE
════════════════════════ */
@media (max-width: 768px) {
    /* Tabela scroll horizontal */
    .prod-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -12px;
    }
    .prod-table-wrap table { min-width: 500px; }

    /* Botões de ação empilhados */
    .prod-actions {
        flex-direction: column !important;
        gap: 8px !important;
    }
    .prod-actions button { width: 100% !important; }

    /* Modal full screen */
    .modal-box {
        width: 100vw !important;
        max-width: 100vw !important;
        max-height: 90vh !important;
        border-radius: 16px 16px 0 0 !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        top: auto !important;
        transform: none !important;
        margin: 0 !important;
    }
}

/* ════════════════════════
   CONFIGURAÇÕES
════════════════════════ */
@media (max-width: 768px) {
    .cfg-wrap, .g-wrap, .rel-wrap { max-width: 100% !important; }
    .cfg-grid { gap: 12px !important; }
    .cfg-card-hd { flex-wrap: wrap; gap: 8px; }
    .cfg-badge-ok, .cfg-badge-off { margin-top: 4px; }
}

/* ════════════════════════
   GASTOS FIXOS
════════════════════════ */
@media (max-width: 768px) {
    .g-cards {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    .g-form-row {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }
    .g-form-row > div:nth-child(2) {
        grid-column: span 2 !important;
    }
    .g-form-row > div:nth-child(4) {
        grid-column: span 2 !important;
    }
    .g-table { font-size: .76rem; }
    .g-table th, .g-table td { padding: 8px 12px !important; }
}

/* ════════════════════════
   LOGIN
════════════════════════ */
@media (max-width: 480px) {
    .login-card {
        width: calc(100vw - 24px) !important;
        max-width: 100% !important;
        padding: 24px 20px !important;
        border-radius: 16px !important;
    }
}

/* ════════════════════════
   MODAIS genéricos
════════════════════════ */
@media (max-width: 768px) {
    .modal-overlay { align-items: flex-end !important; }
    .modal-box, [class*="modal-box"], [id*="Modal"] > div {
        width: 100vw !important;
        max-width: 100vw !important;
        border-radius: 20px 20px 0 0 !important;
        max-height: 85vh !important;
        overflow-y: auto !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
    }
}

/* ════════════════════════
   TABELAS GENÉRICAS scroll
════════════════════════ */
@media (max-width: 768px) {
    .tbl-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .tbl-scroll table { min-width: 500px; }
}

/* ════════════════════════
   TIPOGRAFIA MOBILE
════════════════════════ */
@media (max-width: 480px) {
    .page-title { font-size: 1rem !important; }
    body { font-size: .875rem; }
}