/* =====================================================================
   Mobile-first overrides — aplicado em telas <= 768px
   Carrega DEPOIS de style.css/ruptura.css/troca.css/vagas.css pra ter precedência.
   ===================================================================== */

/* Toda a app fica em coluna única no mobile com sidebar virando gaveta */
@media (max-width: 768px) {

  /* Bloqueia scroll horizontal na página inteira */
  html, body { overflow-x: hidden !important; max-width: 100vw; }
  .layout, .main-content { max-width: 100vw; overflow-x: hidden; }

  /* ========== Topbar ========== */
  .topbar {
    padding: 8px 12px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .topbar h1 {
    font-size: 18px !important;
    margin: 0 !important;
  }
  .topbar .sub {
    font-size: 10px !important;
    color: var(--text-muted);
  }
  .topbar .actions {
    gap: 4px !important;
    margin-left: auto;
    flex-wrap: nowrap;
  }
  .topbar .actions .user-info { display: none !important; }
  .topbar .actions a,
  .topbar .actions button {
    font-size: 11px !important;
    padding: 6px 8px !important;
    white-space: nowrap;
  }
  .topbar .actions .btn-fullscreen,
  .topbar .actions .btn-theme { display: none !important; }

  /* ========== Sidebar vira gaveta ========== */
  .layout { flex-direction: column !important; }
  .sidebar {
    position: fixed !important;
    top: 0; left: 0; bottom: 0;
    width: 260px !important;
    z-index: 1000;
    transform: translateX(-100%);
    transition: transform .25s ease;
    box-shadow: 4px 0 16px rgba(0,0,0,.5);
  }
  .sidebar.mobile-open { transform: translateX(0); }
  .sidebar.collapsed {
    width: 260px !important;  /* ignora collapsed no mobile */
    transform: translateX(-100%);
  }
  .sidebar.collapsed .brand-text,
  .sidebar.collapsed .group-name,
  .sidebar.collapsed .sidebar-item { display: revert !important; }

  /* Backdrop quando aberta */
  .sidebar-backdrop {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 999;
  }
  .sidebar-backdrop.show { display: block; }

  /* Botão hamburguer fixo no topo esquerdo */
  .mobile-menu-btn {
    position: fixed; top: 8px; left: 8px;
    z-index: 1001;
    width: 40px; height: 40px;
    border-radius: 8px;
    background: var(--bg-elev-3);
    border: 1px solid var(--border-2);
    color: var(--text);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; cursor: pointer;
  }
  .mobile-menu-btn:active { transform: scale(0.95); }

  /* Empurra o título da topbar pro lado quando tem botão hamburguer */
  body.has-sidebar .topbar { padding-left: 56px !important; }

  /* Esconde toggle interno (não usado no mobile) */
  .sidebar-toggle { display: none !important; }

  .main-content { padding-bottom: 16px; }

  /* ========== KPIs em 2 colunas (ruptura/troca/vagas) ========== */
  .ru-kpis {
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    padding: 8px !important;
  }
  .ru-kpi { padding: 8px !important; min-width: 0; }
  .ru-kpi .lbl { font-size: 10px !important; }
  .ru-kpi .val { font-size: 18px !important; word-break: break-all; }
  .ru-kpi .sub { font-size: 9px !important; }
  .ru-kpi.big { grid-column: 1 / -1; }
  .ru-kpi.big .val { font-size: 24px !important; }

  /* ========== KPIs venda-diaria (kpi-card com 5 campos) ========== */
  .vd-kpis-main {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 8px !important;
  }
  .kpi-card {
    padding: 10px !important;
    min-width: 0;
  }
  .kpi-card-title { font-size: 11px !important; }
  .kpi-card-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 6px 12px !important;
  }
  .kpi-card-grid > div { min-width: 0; }
  .kpi-card-grid .lbl { font-size: 9px !important; }
  .kpi-card-grid .val { font-size: 13px !important; word-break: break-word; }
  .kpi-card-grid .val.big { font-size: 16px !important; }
  .kpi-card-grid .val.ating { font-size: 15px !important; }

  /* Setores da venda-diária */
  .vd-setores {
    grid-template-columns: 1fr 1fr !important;
    padding: 8px !important;
    gap: 6px !important;
  }
  .vd-setores-head { padding: 8px !important; }

  /* Resumo da venda-diária */
  .vd-resumo {
    grid-template-columns: 1fr 1fr !important;
    padding: 8px !important;
    gap: 6px !important;
  }

  /* Tabela de venda-diária com scroll */
  .vd-tabela .tableWrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .vd-tabela table { min-width: 700px; font-size: 11px; }
  .vd-tabela-head {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
    padding: 8px !important;
  }
  .vd-tabs { width: 100%; flex-wrap: wrap; gap: 4px; }
  .vd-tab { flex: 1 1 calc(33% - 4px); font-size: 11px !important; padding: 6px 4px !important; min-width: 0; }
  .vd-grafico { padding: 8px !important; }

  /* ========== Filtros / tabs ========== */
  .ru-filtros {
    padding: 6px 8px !important;
    flex-direction: column !important;
    gap: 6px !important;
  }
  .ru-tabs { width: 100%; flex-wrap: wrap; }
  .ru-tab { flex: 1; min-width: 0; font-size: 12px !important; padding: 6px 4px !important; }
  .ru-search input { width: 100% !important; }

  /* ========== Resumo executivo: 1 coluna ========== */
  .ru-resumo-grid { grid-template-columns: 1fr !important; }
  .vg-status-grid { grid-template-columns: 1fr 1fr !important; }

  /* ========== Rankings: empilhados ========== */
  .ru-rankings,
  .tr-rankings-3 { grid-template-columns: 1fr !important; }

  /* ========== Tabelas: scroll horizontal natural ========== */
  .ru-tabela-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .ru-tabela-wrap table {
    min-width: 600px;  /* força scroll quando necessário */
    font-size: 11px;
  }
  .ru-tabela-head {
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 8px !important;
  }
  .ru-filtros-tab {
    flex-wrap: wrap !important;
    gap: 4px !important;
    width: 100%;
  }
  .ru-filtros-tab select,
  .ru-filtros-tab input {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
    font-size: 12px !important;
  }
  .ru-filtros-tab .btn-mini {
    flex: 1 1 auto;
    font-size: 11px !important;
  }

  .ru-info-bar { padding: 6px 8px !important; font-size: 11px !important; }

  /* Paginação mobile */
  .ru-paginacao {
    padding: 8px !important;
    font-size: 12px !important;
  }
  .ru-paginacao .btn-mini {
    padding: 8px 12px !important;
    font-size: 13px !important;
  }

  /* ========== Heatmap: cells menores em 4 colunas ========== */
  .vg-heatmap {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 4px !important;
    padding: 8px !important;
  }
  .vg-heatmap-cell {
    padding: 8px 4px !important;
  }
  .vg-heatmap-cell .loja { font-size: 10px !important; }
  .vg-heatmap-cell .qtd { font-size: 18px !important; }

  /* ========== Modais: full-screen no mobile ========== */
  .modal-backdrop { padding: 0 !important; }
  .modal {
    max-width: 100vw !important;
    max-height: 100vh !important;
    width: 100vw !important;
    height: 100vh !important;
    border-radius: 0 !important;
    border: none !important;
  }
  .modal-head {
    padding: 12px 14px !important;
    position: sticky; top: 0;
    background: var(--bg-elev-2);
    z-index: 5;
  }
  .modal-head h3 { font-size: 14px !important; }
  .modal-body { padding: 10px !important; }
  .modal-footer {
    padding: 10px 14px !important;
    position: sticky; bottom: 0;
  }

  .drill-resumos { grid-template-columns: 1fr !important; }
  #modalLoja .vg-resumo-status,
  .vg-resumo-status { grid-template-columns: 1fr 1fr !important; gap: 4px !important; }
  .vg-resumo-pill { padding: 6px 10px !important; }
  .vg-resumo-pill .val { font-size: 16px !important; }

  /* Tabela dentro de modal: scroll */
  .modal .ru-tabela-wrap table { font-size: 10px; min-width: 500px; }

  /* ========== Gráficos SVG ========== */
  .ru-grafico { padding: 8px !important; }
  .ru-grafico-head {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
  }
  #graficoRuptura, #grafico { width: 100% !important; height: auto !important; }

  /* ========== Tela de login ========== */
  .login-split {
    grid-template-columns: 1fr !important;
  }
  .login-right { display: none !important; }

  /* ========== Status de troca/vagas ========== */
  .tr-status {
    padding: 8px 10px !important;
    font-size: 11px !important;
    flex-wrap: wrap;
  }

  /* ========== Botões de ação maiores (touch) ========== */
  .btn-mini, .btn-atualizar {
    min-height: 36px;
  }

  /* ========== KPIs Comerciais ========== */
  /* Tabela com primeira coluna sticky (nome fixo) + scroll horizontal natural */
  .kp-bloco .ru-tabela-wrap,
  .kp-bloco div[class*="tabela-wrap"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  #tblB1, #tblB2 {
    font-size: 10px !important;
    min-width: max-content;
  }
  #tblB1 th, #tblB2 th {
    padding: 6px 6px !important;
    font-size: 9px !important;
    white-space: nowrap;
  }
  #tblB1 td, #tblB2 td {
    padding: 5px 6px !important;
    font-size: 10px !important;
    white-space: nowrap;
  }
  /* Sticky primeira coluna (nome do comprador) */
  #tblB1 th:first-child, #tblB2 th:first-child,
  #tblB1 td:first-child, #tblB2 td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--bg-elev-3);
    box-shadow: 2px 0 4px rgba(0,0,0,.3);
    min-width: 130px;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
  }
  #tblB1 th:first-child, #tblB2 th:first-child {
    background: var(--bg-elev-2);
    z-index: 3;
  }
  #tblB1 tr.gerente td:first-child, #tblB2 tr.gerente td:first-child {
    background: #1f4a2a;  /* mantem cor do gerente mesmo na sticky */
  }
  #tblB1 tr.total td:first-child, #tblB2 tr.total td:first-child {
    background: #4a4520;  /* mantem cor do total */
  }

  /* Resumo executivo (cards já em 1 coluna) */
  .kp-resumo-grid { grid-template-columns: 1fr !important; padding: 8px !important; }
  .kp-card-head { font-size: 13px !important; padding: 8px 10px !important; }
  .kp-indic-row {
    grid-template-columns: 90px 1fr auto !important;
    gap: 4px 8px !important;
    padding: 6px 10px !important;
    font-size: 11px !important;
  }
  .kp-indic-row .meta { display: none; }   /* ocultamos meta no mobile pra caber */
  .kp-indic-row .ating { font-weight: 700; }
  .kp-indic-row .status { display: none; } /* status redundante com a cor do ating */

  /* Topbar do KPIs no mobile */
  .topbar h1 + .sub { font-size: 9px !important; }
}

/* Telas muito pequenas (<= 380px) — mais compacto ainda */
@media (max-width: 380px) {
  .ru-kpis { grid-template-columns: 1fr !important; }
  .ru-kpi.big { grid-column: 1 / -1; }
  .vg-heatmap { grid-template-columns: repeat(3, 1fr) !important; }
  .vg-status-grid { grid-template-columns: 1fr !important; }
}