/**
 * responsive.css — utilitários mobile-first compartilhados.
 *
 * Filosofia: mobile-first sempre. Toda regra começa pensando em tela <500px
 * (single column, fonte/padding reduzidos) e expande com media queries.
 *
 * Breakpoints:
 *   - default      : 0–499px   (smartphone vertical)
 *   - sm  ≥ 500px  : smartphone landscape / phablet
 *   - md  ≥ 700px  : tablet vertical
 *   - lg  ≥ 1000px : tablet landscape / laptop pequeno
 *   - xl  ≥ 1280px : desktop padrão
 *
 * Carregado pelo admin_layout.php. Override seguro: as classes têm prefixo `rsp-`
 * pra não colidir com nomes de outras telas.
 */

/* ============================================================
   Grids responsivos comuns
   ============================================================ */

/* Grid de filtros: 1 col mobile → 2 col tablet → N col desktop */
.rsp-filtros-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    align-items: end;
}
@media (min-width: 500px)  { .rsp-filtros-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
@media (min-width: 700px)  { .rsp-filtros-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) {
    .rsp-filtros-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
    .rsp-filtros-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
    .rsp-filtros-grid.cols-5 { grid-template-columns: repeat(5, 1fr); }
    .rsp-filtros-grid.cols-6 { grid-template-columns: repeat(6, 1fr); }
}

/* Grid de KPIs: 1 col mobile → 2 col tablet → 4 col desktop */
.rsp-kpis-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}
@media (min-width: 500px)  { .rsp-kpis-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
@media (min-width: 1000px) { .rsp-kpis-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .rsp-kpis-grid.cols-4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1280px) { .rsp-kpis-grid.cols-5 { grid-template-columns: repeat(5, 1fr); } }

/* Grid de cards genéricos (lojas, produtos): 1 → 2 → 3 col */
.rsp-cards-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}
@media (min-width: 600px)  { .rsp-cards-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
@media (min-width: 1100px) { .rsp-cards-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
@media (min-width: 1500px) { .rsp-cards-grid.cols-4 { grid-template-columns: repeat(4, 1fr); } }

/* ============================================================
   Tabelas com scroll horizontal (alternativa: cards stacked)
   ============================================================ */

.rsp-tabela-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* margem negativa pra "vazar" pra fora do padding do card pai em mobile,
       dando todo o viewport pra rolar a tabela */
}
.rsp-tabela-wrap > table { width: 100%; min-width: 600px; }
@media (min-width: 700px)  { .rsp-tabela-wrap > table { min-width: 720px; } }
@media (min-width: 1100px) { .rsp-tabela-wrap > table { min-width: 0; } }

/* Indicador visual de "tem mais conteúdo, role" — gradient na direita */
.rsp-tabela-wrap.com-fade {
    position: relative;
}
.rsp-tabela-wrap.com-fade::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 24px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.95));
    pointer-events: none;
}
@media (min-width: 1100px) { .rsp-tabela-wrap.com-fade::after { display: none; } }

/* ============================================================
   Filtros: campos que empilham em mobile, ficam inline em desktop
   ============================================================ */

.rsp-filtros-inline {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
@media (min-width: 700px) {
    .rsp-filtros-inline {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: end;
    }
    .rsp-filtros-inline > * { flex: 0 0 auto; }
    .rsp-filtros-inline > .rsp-grow { flex: 1 1 200px; min-width: 0; }
}

/* ============================================================
   Toolbar de ações: empilha em mobile
   ============================================================ */

.rsp-acoes-toolbar {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}
.rsp-acoes-toolbar > .btn,
.rsp-acoes-toolbar > button,
.rsp-acoes-toolbar > a {
    width: 100%;
    justify-content: center;
}
@media (min-width: 600px) {
    .rsp-acoes-toolbar { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
    .rsp-acoes-toolbar > .btn,
    .rsp-acoes-toolbar > button,
    .rsp-acoes-toolbar > a { width: auto; }
}

/* ============================================================
   Modais: viewport-aware
   ============================================================ */

.rsp-modal {
    max-width: 92vw;
    max-height: 90vh;
    overflow-y: auto;
}
@media (min-width: 700px)  { .rsp-modal { max-width: 90vw; } }
@media (min-width: 1000px) { .rsp-modal { max-width: 800px; } }
@media (min-width: 1280px) { .rsp-modal { max-width: 900px; } }

.rsp-modal.lg {
    max-width: 92vw;
}
@media (min-width: 1000px) { .rsp-modal.lg { max-width: 900px; } }
@media (min-width: 1280px) { .rsp-modal.lg { max-width: 1100px; } }

/* ============================================================
   Tipografia escalonada
   ============================================================ */

.rsp-titulo-xl { font-size: 22px; font-weight: 700; line-height: 1.15; letter-spacing: -0.2px; }
@media (min-width: 700px)  { .rsp-titulo-xl { font-size: 26px; } }
@media (min-width: 1100px) { .rsp-titulo-xl { font-size: 30px; } }

.rsp-valor-grande { font-size: 22px; font-weight: 700; line-height: 1.1; letter-spacing: -0.3px; overflow-wrap: anywhere; }
@media (min-width: 500px)  { .rsp-valor-grande { font-size: 26px; } }
@media (min-width: 1000px) { .rsp-valor-grande { font-size: 30px; } }

/* ============================================================
   Tab navigation: scroll horizontal em mobile
   ============================================================ */

.rsp-tabs {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-bottom: 2px solid #e5e7eb;
    margin-bottom: 16px;
    /* scroll suave + esconde scrollbar */
    scrollbar-width: thin;
}
.rsp-tabs::-webkit-scrollbar { height: 4px; }
.rsp-tabs::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.rsp-tabs > * { flex: 0 0 auto; white-space: nowrap; }

/* ============================================================
   Utilitários gerais
   ============================================================ */

/* Esconde em mobile, mostra em desktop */
.rsp-hide-mobile { display: none; }
@media (min-width: 700px) { .rsp-hide-mobile { display: inline; } }

/* Mostra em mobile, esconde em desktop */
.rsp-only-mobile { display: inline; }
@media (min-width: 700px) { .rsp-only-mobile { display: none; } }

/* Padding/margem que se reduz em mobile */
.rsp-card-padding { padding: 12px; }
@media (min-width: 700px)  { .rsp-card-padding { padding: 16px; } }
@media (min-width: 1100px) { .rsp-card-padding { padding: 20px; } }

/* Stack vertical de inputs (para forms com vários campos lado-a-lado em desktop) */
.rsp-stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
@media (min-width: 700px) {
    .rsp-stack-row {
        flex-direction: row;
        gap: 12px;
    }
    .rsp-stack-row > * { flex: 1 1 0; min-width: 0; }
}

/* Wrap automático com largura mínima por filho */
.rsp-wrap-min-200 { display: flex; flex-wrap: wrap; gap: 8px; }
.rsp-wrap-min-200 > * { flex: 1 1 200px; min-width: 0; }

/* Esconde coluna em mobile (tabelas com colunas opcionais) */
@media (max-width: 699px) {
    .rsp-col-hide-mobile { display: none; }
}
@media (max-width: 999px) {
    .rsp-col-hide-sm { display: none; }
}

/* Evita overflow vertical de cards (regra defensiva contra valores compridos) */
.rsp-no-overflow {
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 100%;
}

/* Form fields full-width em mobile */
.rsp-input-full {
    width: 100%;
    min-width: 0;
}

/* ============================================================
   Override de containers comuns pra serem responsivos
   ============================================================ */

/* O container principal do admin (admin_layout) já tem max-width; aqui
   garantimos que conteúdo interno nunca extrapola */
.main-content,
.page-content,
.content-wrapper {
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
}

/* ============================================================
   Safety net global mobile (≤699px)
   Aplica fallback responsivo a grids/flexes rígidos sem precisar
   editar todas as views uma por uma. Override defensivo —
   cada view pode sempre re-especificar com mais peso.
   ============================================================ */

@media (max-width: 699px) {
    /* Container do conteúdo do admin: evita scroll horizontal acidental */
    body, html { overflow-x: hidden; }

    /* Tabelas dentro de .table-responsive: sempre permitem scroll horizontal */
    .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Cards globais com padding excessivo */
    .card { padding: 12px !important; }
    .card-header { flex-wrap: wrap; gap: 8px; }
    .card-title { font-size: 15px; }

    /* Botões "btn-lg" não devem ficar enormes */
    .btn-lg { padding: 10px 16px; font-size: var(--text-base); }

    /* Form rows que assumem flex inline */
    .form-row { flex-wrap: wrap; gap: 8px; }
    .form-row > * { flex: 1 1 100%; min-width: 0; }

    /* Inputs full-width por default (já no app.css, mas garantia extra) */
    .form-input, .form-select, .form-textarea {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Modais com viewport-aware ao usar style="width:92%;max-width:Xpx" */
    [class*="modal"] [style*="max-width"] {
        max-width: 96vw !important;
    }
}

@media (max-width: 499px) {
    /* Em telas muito pequenas, reduz mais ainda */
    .card { padding: 10px !important; }
    .btn { font-size: var(--text-sm); }
    h1, .h1 { font-size: var(--text-xl); }
    h2, .h2 { font-size: var(--text-lg); }
    h3, .h3 { font-size: var(--text-md); }
}

/* ============================================================
   FILTROS COMPACTOS EM MOBILE
   Estratégia: em ≤699px, todo formulário de filtros vira compacto.
   - Labels: 10px, sem margem
   - Inputs: 32–34px altura, fonte 13px, padding 6px 8px
   - Grids fixos viram 2 colunas (não 1 col gigante)
   - Campo de busca (primeiro input text) ocupa a linha inteira
   - Checkboxes inline (1 linha)
   - Botões empilhados só quando há 3+; com 2 ficam lado-a-lado
   Objetivo: reduzir altura do bloco de filtros em ≥50% sem mexer em HTML.
   ============================================================ */

@media (max-width: 699px) {
    /* Labels diminuem MUITO */
    .form-label,
    label.form-label,
    .lp-form .form-label,
    .lj-filtros label,
    .gl-filtros label,
    .mv-head .filtros label,
    .gv-head .filtros label,
    .ml-head .filtros label {
        font-size: var(--text-2xs) !important;
        font-weight: 600;
        letter-spacing: 0.2px;
        text-transform: uppercase;
        color: #6b7280;
        margin-bottom: 2px !important;
        line-height: 1.2;
    }

    /* Inputs/selects compactos */
    .form-input,
    .form-select,
    input[type="text"],
    input[type="number"],
    input[type="date"],
    input[type="search"],
    input[type="password"],
    input[type="email"],
    select {
        height: 34px !important;
        padding: 6px 8px !important;
        font-size: var(--text-sm) !important;
        border-radius: 6px;
    }
    .form-textarea, textarea {
        font-size: var(--text-sm) !important;
        padding: 8px !important;
    }

    /* Grids de filtros já conhecidos: 2 colunas mobile (não 1) */
    .lp-form .lp-grid,
    .lj-filtros,
    .gl-filtros,
    .mv-head .filtros,
    .gv-head .filtros {
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
    }
    .ml-head .filtros {
        grid-template-columns: 90px 1fr !important; /* ano + loja */
        gap: 6px !important;
    }

    /* Primeiro campo de texto (busca) ocupa linha inteira */
    .lj-filtros > input[type="text"]:first-of-type,
    .gl-filtros > input[type="text"]:first-of-type,
    .mv-head .filtros > input[type="text"]:first-of-type,
    .gv-head .filtros > input[type="text"]:first-of-type {
        grid-column: 1 / -1;
    }

    /* Botão de busca/limpar dentro de form de filtros: full-width na sua célula,
       ou agrupado quando sozinho */
    .lj-filtros > button[type="submit"],
    .gl-filtros > button[type="submit"] {
        grid-column: 1 / -1;
        height: 34px;
    }

    /* Checkbox "Inativas" / "Só trocas" inline com label menor */
    .lj-filtros > label,
    .gl-filtros > label {
        grid-column: 1 / -1;
        font-size: var(--text-xs) !important;
        padding: 4px 0;
    }

    /* Cards de filtro: reduz padding interno (cinza claro) */
    form.lp-form,
    .filtros-bar,
    [style*="background:#f9fafb"][style*="padding:14px"],
    [style*="background:#f9fafb"][style*="padding:12px"] {
        padding: 10px !important;
    }

    /* Toolbars de ações no card-header: empilham só quando precisa */
    .card-header .acoes,
    .card-header > div:last-child {
        width: 100%;
    }

    /* Ações genéricas em lp-acoes/gl-acoes: ações ficam em UMA linha de botões */
    .lp-form .lp-acoes { flex-direction: column; gap: 6px !important; }
    .lp-form .lp-btns { display: flex; gap: 6px; }
    .lp-form .lp-btns .btn { flex: 1; font-size: var(--text-xs); padding: 6px 10px; height: 34px; }
}

/* ============================================================
   TABELAS RESPONSIVAS DE VERDADE
   Estratégia: em mobile, remove min-width fixo agressivo,
   compacta fonte/padding, e adiciona indicador de scroll (fade no lado).
   Quando o usuário scrolla horizontalmente, vê tudo sem que a tabela
   "vaze" pra fora do container/card.
   ============================================================ */

/* Wrapper genérico de scroll horizontal (qualquer tabela). */
.table-responsive,
.lp-table-wrap,
.lj-tabela-wrap,
.gl-tabela-wrap,
.gv-tabela-wrap,
.sn-tabela-wrap,
.rsp-tabela-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
}

/* Fade indicador no lado direito (some quando scroll chegar no final é ideal
   mas sem JS, fica permanente — ainda assim útil pra dar dica visual) */
@media (max-width: 999px) {
    .table-responsive::after,
    .lp-table-wrap::after,
    .lj-tabela-wrap::after,
    .gl-tabela-wrap::after,
    .gv-tabela-wrap::after,
    .sn-tabela-wrap::after {
        content: '';
        position: absolute;
        top: 0; right: 0; bottom: 0;
        width: 20px;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.92));
        pointer-events: none;
        z-index: 1;
    }
}

@media (max-width: 699px) {
    /* Remove min-widths agressivos — deixa tabela natural com scroll */
    .lp-table-wrap table,
    .lj-tabela-wrap table,
    .gl-tabela-wrap table,
    .gv-tabela-wrap .gv-tabela,
    .mv-tabela,
    .sn-tabela-wrap .sn-tabela,
    .rsp-tabela-wrap > table,
    .table-responsive > table {
        min-width: 0 !important;
        width: auto;
    }

    /* Compacta TODAS tabelas em mobile */
    .table,
    .lp-table-wrap table,
    .gv-tabela,
    .mv-tabela,
    .sn-tabela,
    .table-responsive table {
        font-size: var(--text-2xs) !important;
    }
    .table th,
    .table td,
    .gv-tabela th, .gv-tabela td,
    .mv-tabela th, .mv-tabela td,
    .sn-tabela th, .sn-tabela td,
    .table-responsive th,
    .table-responsive td {
        padding: 5px 7px !important;
        white-space: normal;
        word-break: break-word;
        overflow-wrap: anywhere;
        vertical-align: top;
    }
    /* Códigos/monospaces dentro de células: menores */
    .table code,
    .table-responsive code {
        font-size: var(--text-2xs);
    }
    /* Badges/labels também encolhem */
    .table .badge,
    .table-responsive .badge {
        font-size:$110px;
        padding: 1px 6px;
    }
    /* Headers tabela: menos altura */
    .table th,
    .table-responsive th {
        font-size: var(--text-2xs) !important;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        line-height: 1.2;
    }
    /* Botão de ação na linha: compacto */
    .table td .btn-sm,
    .table-responsive .btn-sm {
        padding: 3px 6px !important;
        font-size: var(--text-2xs) !important;
        min-width: 0;
        height: auto;
    }
    .table td .btn-sm + .btn-sm,
    .table-responsive .btn-sm + .btn-sm {
        margin-left: 4px;
    }

    /* Wrapper de tabela "respira" pra fora do padding do card pai,
       dando os 12px extras de cada lado pro conteúdo */
    .card > .table-responsive,
    .card > .lp-table-wrap,
    .card > .lj-tabela-wrap,
    .card > .gl-tabela-wrap {
        margin-left: -12px;
        margin-right: -12px;
        padding-left: 12px;
        padding-right: 12px;
        width: calc(100% + 24px);
    }
}

/* Em telas muito pequenas (≤399px), aperta ainda mais */
@media (max-width: 399px) {
    .table,
    .table-responsive table,
    .lp-table-wrap table {
        font-size: var(--text-2xs) !important;
    }
    .table th, .table td,
    .table-responsive th, .table-responsive td {
        padding: 4px 6px !important;
    }
}

/* ============================================================
   Override agressivo de min-widths das classes específicas
   (definidas inline em cada view do módulo Lojas e correlatas).
   Precisa de !important porque competem em especificidade.
   ============================================================ */

@media (max-width: 699px) {
    .lp-table-wrap table,
    .lj-tabela-wrap table,
    .gl-tabela-wrap table,
    .gv-tabela-wrap .gv-tabela,
    .mv-tabela,
    .sn-tabela-wrap .sn-tabela,
    .vd-tabela,
    .pr-tabela,
    .cp-tabela,
    .cm-tabela,
    .cm-tabela-resumo,
    table.table,
    table.vd-tabela,
    table.pr-tabela,
    table.cp-tabela,
    table.cm-tabela {
        min-width: 0 !important;
    }
    /* Tabelas internas de cards do dashboard com min-width:480px inline */
    .ld-card .table,
    table[style*="min-width: 480"],
    table[style*="min-width:480"],
    table[style*="min-width:900"],
    table[style*="min-width: 900"],
    table[style*="min-width:780"],
    table[style*="min-width: 780"],
    table[style*="min-width:1100"],
    table[style*="min-width: 1100"] {
        min-width: 0 !important;
    }

    /* Células com font-size inline antigo (13px/14px) — força menor */
    .table-responsive td[style*="font-size:13"],
    .table-responsive td[style*="font-size: 13"],
    .table-responsive td[style*="font-size:12"] {
        font-size: var(--text-2xs) !important;
    }
    .table-responsive td > div[style*="font-size:11"],
    .table-responsive td > div[style*="font-size: 11"],
    .table-responsive td > div[style*="font-size:10"] {
        font-size: 10px !important;
    }
}

/* ============================================================
   COLGROUP defensivo:
   muitas views definem <colgroup><col style="width:160px"> etc.
   Em mobile isso sabota o balanceamento. Neutraliza widths fixos.
   ============================================================ */

@media (max-width: 699px) {
    .table-responsive colgroup col,
    .lp-table-wrap colgroup col,
    .lj-tabela-wrap colgroup col,
    .gl-tabela-wrap colgroup col {
        width: auto !important;
    }
    .table-responsive thead th[style*="width"],
    .table-responsive tbody td[style*="width"] {
        width: auto !important;
    }
}

/* ============================================================
   Botões de ações dentro de cards no header (sync, exportar) —
   ficam empilhados ocupando 100% em mobile, lado-a-lado em desktop.
   ============================================================ */

@media (max-width: 599px) {
    .card-header { padding-bottom: 8px; }
    .card-header > a.btn,
    .card-header > button.btn {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================================
   Header dos cards "title + button" em mobile:
   título quebra linha sem cortar
   ============================================================ */

@media (max-width: 699px) {
    .card-title {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: var(--text-base) !important;
        flex: 1;
        min-width: 0;
    }
}