/* ============================================================
   UNSTOPP — Camada de responsividade mobile compartilhada
   Carregada DEPOIS do <style> de cada página, então vence em
   igualdade de especificidade e, com !important, vence estilos
   embutidos. No desktop (> 768px) nada é alterado.
   Depende (com fallback) das variáveis de tema de cada página:
   --surface, --border, --text-main, --text-muted, --accent, --red
   ============================================================ */

/* ---- Botão hambúrguer (injetado pelo JS dentro do .header) ---- */
.mnav-toggle {
    display: none;                 /* aparece só no mobile */
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border: 1px solid var(--border, #e5e5e7);
    border-radius: 12px;
    background: var(--surface, #fff);
    color: var(--text-main, #111);
    cursor: pointer;
    padding: 0;
}
.mnav-toggle:active { transform: scale(0.94); }
.mnav-toggle svg { width: 22px; height: 22px; display: block; }

.mnav-head { display: none; }

/* ---- Overlay escuro atrás do menu ---- */
.mnav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    z-index: 998;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}
.mnav-overlay.open { opacity: 1; pointer-events: auto; }

/* ---- Container rolável para tabelas largas (injetado pelo JS) ---- */
.mtable-scroll { width: 100%; }

/* Mídia nunca estoura a largura */
img, video, canvas, svg { max-width: 100%; }

/* ============================================================
   MOBILE  (<= 768px)
   ============================================================ */
@media (max-width: 768px) {

    html, body { overflow-x: hidden; }
    body { max-width: 100vw; }

    .mnav-toggle { display: inline-flex; }

    /* ---------- Cabeçalho ---------- */
    .header {
        padding: 0 14px !important;
        gap: 10px !important;
        justify-content: flex-start !important;
    }
    .header-brand { font-size: 15px !important; }

    /* Com o menu aberto, o cabeçalho (que contém o drawer) precisa subir
       ACIMA do overlay — senão o overlay cobre os links e bloqueia o toque.
       (O drawer é filho do .header, então herda a camada dele.) */
    .header.mnav-open {
        z-index: 1000 !important;
        overflow: visible !important;
    }

    /* ---------- Menu principal vira drawer ---------- */
    .header-nav {
        position: fixed !important;
        top: 0; left: 0; bottom: 0;
        width: 80%;
        max-width: 300px;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 4px !important;
        padding: 16px 14px calc(16px + env(safe-area-inset-bottom)) !important;
        background: var(--surface, #fff);
        box-shadow: 2px 0 28px rgba(0, 0, 0, .22);
        transform: translateX(-105%);
        transition: transform .28s cubic-bezier(.4, 0, .2, 1);
        z-index: 999;
        overflow-y: auto;
    }
    .header-nav.open { transform: translateX(0); }

    .header-nav a {
        font-size: 16px !important;
        font-weight: 600 !important;
        padding: 14px 14px !important;
        border-radius: 12px;
        display: flex;
        align-items: center;
    }
    .header-nav a:hover,
    .header-nav a.active { background: var(--border, #f0f0f2); }
    .header-nav a.danger { margin-top: auto; }

    .header-nav .mnav-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 8px;
        padding: 4px 6px 12px;
        border-bottom: 1px solid var(--border, #eee);
    }
    .header-nav .mnav-head span {
        font-weight: 800;
        font-size: 13px;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: var(--text-muted, #888);
    }
    .mnav-close {
        border: none;
        background: transparent;
        font-size: 26px;
        line-height: 1;
        color: var(--text-main, #111);
        cursor: pointer;
        padding: 0 6px;
    }

    /* ---------- Estrutura geral: uma coluna ---------- */
    .layout {
        display: block !important;
        padding: 0 12px !important;
        margin: 14px auto !important;
    }
    .sidebar {
        width: 100% !important;
        position: static !important;
        margin-bottom: 14px;
    }
    .content { width: 100%; min-width: 0; }

    /* ---------- Sub-abas: faixa rolável horizontal, sem barra feia ---------- */
    .tab-list, .subtabs, .tabs, .sub-tabs {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        gap: 8px !important;
        padding-bottom: 6px !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .tab-list::-webkit-scrollbar,
    .subtabs::-webkit-scrollbar,
    .tabs::-webkit-scrollbar { display: none; height: 0; }
    .tab-btn {
        white-space: nowrap !important;
        width: auto !important;
        flex: 0 0 auto !important;
    }

    /* ---------- GRADES: colapsam para 1 coluna ---------- */
    .grid-2, .grid-3, .grid-4,
    .split-row, .podium-row, .sk-body,
    .two-col, .three-col, .four-col,
    .form-grid, .coupon-form-grid, .up-details,
    .row-2, .row-3, .cols-2, .cols-3 {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* ---------- Grades de cards (auto-fill): mínimos menores ---------- */
    .combo-grid, .portfolio-grid, .photo-grid, .album-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
        gap: 10px !important;
    }
    .coupon-grid { grid-template-columns: 1fr !important; }
    .album-stats-row,
    .kpi-row { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important; }

    /* ---------- Cartões / seções ---------- */
    .card { border-radius: 14px; }
    .card-header { padding: 16px !important; }
    .card-body, .modal-body { padding: 16px !important; }
    .section-header, .service-title-row, .service-right,
    .list-header, .page-header {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }
    .service-item, .cat-item {
        flex-wrap: wrap !important;
        row-gap: 8px !important;
    }

    /* ---------- Formulários e controles confortáveis ao toque ---------- */
    .form-control, input, select, textarea, .btn, button {
        max-width: 100% !important;
    }
    .form-control, input, select, textarea {
        font-size: 16px !important;   /* evita o zoom automático do iOS/Android */
    }

    /* Botões que eram largos no desktop ocupam a linha toda */
    .btn-block-mobile,
    .modal .btn-primary,
    .modal .btn { width: 100%; }

    /* ---------- Modais encaixados na tela ---------- */
    .modal { max-width: 100% !important; margin: 0 8px; }
    .modal-overlay { padding: 12px !important; }

    /* ---------- Tipografia proporcional ---------- */
    h1 { font-size: 22px !important; }
    h2 { font-size: 18px !important; }
    .kpi-val { font-size: 26px !important; }

    /* Tabelas largas sem cabeçalho: rolam na horizontal (fallback) */
    .mtable-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ---------- TABELA → CARDS (uma card por linha) ---------- */
    table.mtabled { display: none !important; }   /* esconde a tabela original */

    .mcards {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin: 4px 0 8px;
    }
    .mcard {
        background: var(--surface, #fff);
        border: 1px solid var(--border, #e5e5e7);
        border-radius: 14px;
        padding: 12px 14px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
    }
    .mcard-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        padding: 7px 0;
        border-bottom: 1px solid var(--border, #f0f0f2);
        min-height: 22px;
    }
    .mcard-row:first-child { padding-top: 0; }
    .mcard-row:last-child { border-bottom: none; padding-bottom: 0; }
    .mcard-k {
        flex: 0 0 38%;
        font-size: 10.5px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .03em;
        color: var(--text-muted, #8a8a92);
        line-height: 1.3;
    }
    .mcard-v {
        flex: 1 1 auto;
        text-align: right;
        font-size: 13.5px;
        font-weight: 600;
        color: var(--text-main, #111);
        min-width: 0;
        word-break: break-word;
    }
    /* Célula sem rótulo (ex.: coluna de ações) ocupa a linha toda */
    .mcard-v-full {
        text-align: left;
        width: 100%;
        flex: 1 1 100%;
    }
    /* Controles dentro do card ficam alinhados e cômodos ao toque */
    .mcard-v .btn,
    .mcard-v button,
    .mcard-v a.btn,
    .mcard-v select,
    .mcard-v input { vertical-align: middle; }
    .mcard-v-full .btn,
    .mcard-v-full button,
    .mcard-v-full a { width: 100%; justify-content: center; }
    .mcard-v img { border-radius: 8px; }

    /* ---------- Lista "Aprovados recentemente" (app.php) ----------
       Nomes longos quebram linha em vez de invadir o valor. */
    .rec { align-items: flex-start !important; }
    .rec-i { overflow: hidden; }
    .rec-n {
        display: block;
        white-space: normal !important;
        word-break: break-word;
        line-height: 1.3;
    }
    .rec-s { display: block; white-space: normal !important; line-height: 1.3; margin-top: 2px; }
    .rec-v { flex-shrink: 0; white-space: nowrap; padding-left: 6px; }
}