/* VoltaCliente — Mobile Override CSS v6
   Correções: menu drawer, header sem truncamento, kanban mobile, legenda temperatura
*/

/* ── PROTEÇÃO GLOBAL ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { width: 100%; overflow-x: hidden; }
img, svg, video { max-width: 100%; }
input, textarea, select, button { max-width: 100%; }

/* ── SAFE AREA (iPhone notch) ────────────────────────────────── */
:root {
  --sat: env(safe-area-inset-top, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
}

/* ── BOTÕES — tamanho mínimo toque ──────────────────────────── */
@media (max-width: 768px) {
  .btn { min-height: 44px; }
  .btn-sm { min-height: 38px; }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE (até 768px)
══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ──────────────────────────────────────────────────────────
     SIDEBAR / DRAWER — CORREÇÃO CRÍTICA
     
     O React injeta um <style> dinâmico no DOM com:
       .sidebar { transform: translateX(0) }     ← quando aberto
       .sidebar { transform: translateX(-100%) } ← quando fechado
     
     Usar !important aqui quebraria esse mecanismo.
     Garantimos APENAS posicionamento, SEM sobrescrever transform.
  ────────────────────────────────────────────────────────── */
  .app-main { margin-left: 0 !important; }

  /* Mostrar botão hambúrguer */
  #menu-btn { display: flex !important; }

  /* Sidebar: posicionamento correto, z-index acima de tudo */
  .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: 100vh !important;
    z-index: 200 !important;
    /* NÃO definir transform aqui — React controla */
  }

  /* Botão fechar */
  #sidebar-close { display: flex !important; }

  /* Overlay: z-index 150 (abaixo do sidebar 200, acima do conteúdo) */
  .overlay {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(15, 23, 42, 0.6) !important;
    backdrop-filter: blur(2px) !important;
    z-index: 150 !important;
    display: none !important;
    pointer-events: none !important;
  }
  .overlay.open {
    display: block !important;
    pointer-events: auto !important;
  }

  /* ── HEADER — sem título truncado ─────────────────────────
     O título <h1> fica entre o hambúrguer e o botão de ação.
     No mobile é truncado ("D...", "Conta..."). Removemos.
  ────────────────────────────────────────────────────────── */
  header[style*="zIndex"] h1,
  [style*="sticky"][style*="zIndex:50"] h1,
  [style*="sticky"][style*="z-index: 50"] h1 {
    display: none !important;
  }

  header[style*="header-h"],
  header { padding: 0 12px !important; }

  /* ── PAGE CONTAINERS ─────────────────────────────────────── */
  div[style*="padding:20px"],
  div[style*="padding: 20px"],
  div[style*="padding:24px"],
  div[style*="padding: 24px"] {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* ── GRIDS → COLUNA ÚNICA ────────────────────────────────── */
  div[style*="display:grid"],
  div[style*="display: grid"] {
    grid-template-columns: 1fr !important;
  }
  div[style*="auto-fill"],
  div[style*="auto-fit"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* ── CARDS ────────────────────────────────────────────────── */
  .card { padding: 14px !important; }

  /* ── INPUTS / FORMS ──────────────────────────────────────── */
  .input { font-size: 16px !important; }
  .field { width: 100% !important; }

  /* ── CONFIGURAÇÕES — layout lateral → ocultar sidebar ───── */
  div[style*="flex-shrink:0"][style*="width:200"],
  div[style*="flex-shrink:0"][style*="width:220"],
  div[style*="flex-shrink:0"][style*="width:180"] {
    display: none !important;
  }
  div[style*="flex:1"][style*="min-width:0"] {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* ──────────────────────────────────────────────────────────
     KANBAN — colunas com largura usável no mobile

     React renderiza cada coluna com inline style:
       style="flex: 0 0 265px; display: flex; ..."
     
     CSS attribute selector captura o valor exato do DOM.
  ────────────────────────────────────────────────────────── */
  div[style*="flex: 0 0 265px"] {
    flex: 0 0 84vw !important;
    min-width: 84vw !important;
    max-width: 84vw !important;
    scroll-snap-align: start !important;
  }

  /* Board container: scroll snap */
  div[style*="overflowX: auto"] {
    scroll-snap-type: x proximity !important;
    -webkit-overflow-scrolling: touch !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    gap: 14px !important;
  }

  /* Cabeçalho de coluna — não truncar */
  div[style*="flex: 0 0 265px"] div[style*="letterSpacing"],
  div[style*="flex: 0 0 265px"] span[style*="fontWeight:700"],
  div[style*="flex: 0 0 265px"] span[style*="font-weight: 700"] {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    font-size: 12px !important;
    letter-spacing: .05em !important;
  }

  /* ──────────────────────────────────────────────────────────
     LEGENDA QUENTE/MORNO/FRIO — ocultar no mobile

     React renderiza: <div style="display:flex; gap:7px; font-size:.68rem; ...">
       <span>● Quente</span> <span>● Morno</span> <span>● Frio</span>
     </div>

     Selecionamos pelo gap e fontSize que são únicos neste elemento.
     React converte gap:7 (number) => "gap: 7px" no DOM.
  ────────────────────────────────────────────────────────── */
  div[style*="gap: 7px"][style*="font-size: .68rem"],
  div[style*="gap: 7px"][style*="fontSize"] {
    display: none !important;
  }

  /* Instrução "Arraste os cards" — ocultar no mobile */
  div[style*="margin-bottom: 10px"][style*="font-size: .68rem"],
  div[style*="marginBottom: 10px"][style*="fontSize"] {
    display: none !important;
  }

  /* ── FILTROS / CHIP ROWS ─────────────────────────────────── */
  .chip-row {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    padding-bottom: 4px !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch;
  }
  .chip-row::-webkit-scrollbar { display: none; }
  .filter-chips {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 6px !important;
  }
  .filter-chips::-webkit-scrollbar { display: none; }

  /* ── TABELAS → SCROLL ────────────────────────────────────── */
  table { min-width: 600px; }
  div:has(> table),
  .table-wrapper { overflow-x: auto !important; }

  /* ── MODAIS ──────────────────────────────────────────────── */
  div[style*="z-index:1000"][style*="position:fixed"],
  div[style*="z-index: 1000"][style*="position: fixed"] {
    padding: 12px !important;
  }
  div[style*="maxWidth:600"],
  div[style*="max-width:600"],
  div[style*="maxWidth:560"],
  div[style*="maxWidth:500"],
  div[style*="maxWidth:480"] {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* ── TOAST ───────────────────────────────────────────────── */
  .toast-container {
    bottom: 80px !important;
    right: 12px !important;
    left: 12px !important;
  }
  .toast { max-width: 100% !important; }

  /* ── PLANOS — empilhar ───────────────────────────────────── */
  div[style*="minmax(195px"],
  div[style*="minmax(200px"] {
    grid-template-columns: 1fr !important;
  }

  /* ── RELATÓRIOS ──────────────────────────────────────────── */
  div[style*="minmax(150px"],
  div[style*="minmax(160px"],
  div[style*="minmax(170px"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* ── PROPOSTAS ───────────────────────────────────────────── */
  div[style*="grid-template-columns"][style*="1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* ── PAINEL DE HOJE ──────────────────────────────────────── */
  div[style*="display:flex"][style*="gap:6"],
  div[style*="display:flex"][style*="gap: 6"] {
    flex-wrap: wrap !important;
  }

  /* ── LARGURAS MÁXIMAS ────────────────────────────────────── */
  div[style*="maxWidth:980"],
  div[style*="maxWidth:900"],
  div[style*="maxWidth:840"],
  div[style*="maxWidth:820"],
  div[style*="maxWidth:800"],
  div[style*="maxWidth:700"] {
    max-width: 100% !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* ── AUTH ────────────────────────────────────────────────── */
  .auth-left { display: none !important; }
  div[style*="flex:1"][style*="background"][style*="linear-gradient"][style*="1E3A5F"] {
    display: none !important;
  }
  div[style*="flex:1"][style*="display:flex"][style*="alignItems:center"][style*="justifyContent:center"] {
    padding: 24px 16px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE PEQUENO (até 390px)
══════════════════════════════════════════════════════════════ */
@media (max-width: 390px) {
  div[style*="flex: 0 0 265px"] {
    flex: 0 0 88vw !important;
    min-width: 88vw !important;
    max-width: 88vw !important;
  }
  div[style*="auto-fill"],
  div[style*="auto-fit"] {
    grid-template-columns: 1fr !important;
  }
  .btn-xl { padding: 12px 20px !important; font-size: .9rem !important; }
}

/* ═══════════════════════════════════════════════════════════════
   TABLET (769px–1024px)
══════════════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1024px) {
  div[style*="flex: 0 0 265px"] {
    flex: 0 0 240px !important;
    min-width: 240px !important;
    max-width: 240px !important;
  }
  div[style*="minmax(195px"],
  div[style*="minmax(200px"],
  div[style*="minmax(220px"] {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ── CONFIGURAÇÕES: abas horizontais no mobile ───────────────── */
@media (max-width: 768px) {
  .config-tabs-mobile {
    display: flex !important;
    overflow-x: auto !important;
    gap: 6px !important;
    padding: 0 0 8px !important;
    scrollbar-width: none !important;
    margin-bottom: 16px !important;
    border-bottom: 1px solid var(--border) !important;
  }
  .config-tabs-mobile::-webkit-scrollbar { display: none; }
  .config-tab-btn {
    flex-shrink: 0 !important;
    padding: 7px 14px !important;
    border-radius: 20px !important;
    font-size: .82rem !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    border: 1.5px solid var(--border) !important;
    background: var(--surface) !important;
    color: var(--text-2) !important;
    transition: all .15s !important;
  }
  .config-tab-btn.active {
    background: var(--brand-light) !important;
    border-color: var(--brand) !important;
    color: var(--brand-dark) !important;
  }
}

/* ── BOTTOM NAV MOBILE ───────────────────────────────────────── */
@media (max-width: 768px) {
  .vc-bottom-nav {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: var(--surface) !important;
    border-top: 1px solid var(--border) !important;
    z-index: 90 !important;
    padding-bottom: var(--sab) !important;
    height: calc(60px + var(--sab)) !important;
  }
  .vc-bottom-nav-btn {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    color: var(--text-3) !important;
    text-decoration: none !important;
    font-size: .65rem !important;
    font-weight: 600 !important;
    padding: 8px 4px !important;
  }
  .vc-bottom-nav-btn.active { color: var(--brand) !important; }
  .vc-bottom-nav-fab {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .vc-bottom-nav-fab a,
  .vc-bottom-nav-fab button {
    width: 48px !important;
    height: 48px !important;
    background: var(--brand) !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: white !important;
    text-decoration: none !important;
    box-shadow: 0 4px 14px rgba(14,165,233,.35) !important;
  }
  /* Espaço para o bottom nav não cobrir conteúdo */
  .app-main { padding-bottom: calc(68px + var(--sab)) !important; }
}

@media (min-width: 769px) {
  .vc-bottom-nav { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════
   CONFIGURAÇÕES — layout mobile em abas
   React renderiza: width: 200px; flex-shrink: 0 (sidebar nav)
   e max-width: 920px (wrapper externo)
══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Ocultar sidebar de navegação lateral das configurações */
  div[style*="width: 200px"][style*="flex-shrink: 0"] {
    display: none !important;
  }

  /* Forçar wrapper externo das configurações para coluna única */
  div[style*="max-width: 920px"][style*="display: flex"] {
    flex-direction: column !important;
    padding: 0 0 14px 0 !important;
    gap: 0 !important;
  }

  /* Conteúdo das configurações: largura total */
  div[style*="max-width: 920px"] > div[style*="flex: 1"] {
    width: 100% !important;
    min-width: 0 !important;
    padding: 14px !important;
    box-sizing: border-box !important;
  }

  /* Espaçamento interno dos cards nas configurações */
  div[style*="max-width: 920px"] .card {
    padding: 16px !important;
    margin-bottom: 12px !important;
  }
}

/* Barra de abas injetada pelo JS (vc-config-tabs) */
#vc-config-tabs {
  scrollbar-width: none;
}
#vc-config-tabs::-webkit-scrollbar {
  display: none;
}