/* ============================================================
   SO DO SITE: MODO CELULAR do app (07/11/2026, pedido do Hercules)
   O celular agora abre o MESMO app do PC web (mesmas abas: Importar, Ranking,
   Configuracoes...), so com o desenho adaptado a tela pequena:
   - menu lateral vira uma gaveta (botao de 3 riscos no topo);
   - barra embaixo com Painel, Operacoes, Ranking, Importar e Menu;
   - quadros em 1 coluna, tabelas arrastam para o lado, janelas em tela cheia.
   Junto com o celular.js. Nao muda nada no PC (so vale abaixo de 920 px).
   ============================================================ */

#celTopoMenu, #celBarra, #celFundo { display: none; }

@media (max-width: 919px) {
  html, body { overflow: hidden; height: 100%; }
  body { -webkit-text-size-adjust: 100%; }
  .app { height: 100vh; height: 100dvh; display: block; position: relative; }
  .main { height: 100%; }

  /* ---------- menu lateral = gaveta ---------- */
  .sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 1200; width: min(280px, 84vw);
    transform: translateX(-102%); transition: transform .22s ease; overflow-y: auto;
    background: var(--sidebar-bg, #0d0c10); box-shadow: 8px 0 30px rgba(0, 0, 0, .5);
    padding-bottom: env(safe-area-inset-bottom);
  }
  body.cel-menu .sidebar { transform: none; }
  #celFundo { display: block; position: fixed; inset: 0; z-index: 1150; background: rgba(0, 0, 0, .55); opacity: 0; pointer-events: none; transition: opacity .2s; }
  body.cel-menu #celFundo { opacity: 1; pointer-events: auto; }
  .sidebar .ni { padding: 13px 18px; font-size: 14px; }
  .sidebar .logo { padding: 14px 16px; }

  /* ---------- topo ---------- */
  .topbar { height: auto; min-height: 52px; padding: 8px 10px; padding-top: max(8px, env(safe-area-inset-top)); gap: 8px; position: sticky; top: 0; z-index: 50; }
  .topbar > div:first-child, .tb-t { min-width: 0; }
  #celTopoMenu {
    display: flex; align-items: center; justify-content: center; flex: none; width: 38px; height: 38px; border-radius: 10px;
    background: none; border: 0; color: var(--text, #eee); font-size: 22px; cursor: pointer; margin-right: 2px;
  }
  .tb-t { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
  #periodLabel, .live, .theme-toggle { display: none !important; }
  .topbar > div:last-child { gap: 6px !important; flex: none; }
  .wallet-switch-btn { max-width: 150px; }
  #walletSwitchName { max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: middle; }
  .wallet-dropdown { right: 0; left: auto; max-width: 90vw; }

  /* ---------- conteudo ---------- */
  .views { padding: 12px 10px calc(84px + env(safe-area-inset-bottom)); -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  .card, .cg, .mc { padding: 13px; }
  .mc-val { font-size: 21px; }
  .db-row4, .db-row3, .db-row2w, .db-row2s, .row2, .cards3, .cg-grid, .asset-grid, .metas-grid,
  .fam-grid, .evolucao-grid, .evo-charts-grid, .cal-year-grid, .view-info-grid { grid-template-columns: 1fr !important; }
  .strat-sum-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .card-hd { gap: 6px; }
  .tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; max-width: 100%; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs > * { flex: none; }

  /* quadros montados com grade no proprio HTML: viram 1 coluna */
  .view [style*="grid-template-columns"]:not(.cal-grid):not([class*="cal"]):not(.sc-avs) { grid-template-columns: 1fr !important; }
  .view [style*="display:flex"][style*="gap"], .view [style*="display: flex"][style*="gap"] { flex-wrap: wrap; }

  /* tabelas largas: arrastam para o lado dentro do quadro */
  .tbl-wrap, .card { max-width: 100%; }
  .card > table, .card > div > table:not(.tt) { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tbl-wrap { -webkit-overflow-scrolling: touch; }
  canvas { max-width: 100% !important; }

  /* campos: 16 px evita o zoom automatico do iPhone ao tocar */
  input, select, textarea { font-size: 16px !important; }
  .btn { padding: 10px 14px; }

  /* ---------- janelas (trade, editar, etc.) em tela cheia ---------- */
  .modal-bg { padding: 0; align-items: stretch; }
  .modal, .modal-view { width: 100vw !important; max-width: 100vw !important; max-height: none; height: 100%; border-radius: 0; padding: 14px 12px calc(24px + env(safe-area-inset-bottom)); }
  .modal-grid { grid-template-columns: 1fr; }
  .modal-img-area { height: 240px; }

  /* Configuracoes: nome da caracteristica em cima, tipo e excluir embaixo */
  .char-card-hd { flex-wrap: wrap; row-gap: 8px; }
  .char-label-inp { min-width: 0; flex: 1 1 calc(100% - 40px); }
  .char-type-sel { flex: 1; margin-left: 26px; }

  /* Importar: area de arrastar vira botao de escolher arquivo */
  #dropZone { padding: 22px 12px !important; }

  /* ---------- barra de baixo ---------- */
  #celBarra {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1100;
    background: rgba(13, 12, 16, .97); border-top: 1px solid var(--border, #2a2a2a);
    padding-bottom: env(safe-area-inset-bottom); backdrop-filter: blur(10px);
  }
  #celBarra button {
    flex: 1; min-width: 0; background: none; border: 0; color: var(--dim, #888); font: inherit; font-size: 10.5px;
    display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 2px 7px; cursor: pointer;
  }
  #celBarra button .ti { font-size: 21px; }
  #celBarra button.on { color: #d4af5a; font-weight: 600; }
  body.cel-teclado #celBarra, body:has(.modal-bg.open) #celBarra, body:has(#scModal) #celBarra { display: none; }

  /* avisos do site acima da barra */
  #webAviso, #scAviso { bottom: calc(80px + env(safe-area-inset-bottom)) !important; }

  /* ---------- Ranking no celular ---------- */
  #view-ranking .sc-topo { flex-direction: column; }
  #view-ranking .sc-botoes { width: 100%; }
  #view-ranking .sc-botoes .btn { flex: 1; }
  #view-ranking .sc-grid { grid-template-columns: 1fr !important; }
  .sc-post { padding: 10px; overflow: hidden; }
  .sc-post-hd { flex-wrap: wrap; }
  .sc-tbl { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #scModal { padding: 0; }
  #scModal .sc-caixa { border-radius: 0; min-height: 100%; max-width: 100% !important; padding: 16px 14px calc(24px + env(safe-area-inset-bottom)); }
}