/* ==========================================================================
   CHECA AÍ — CAMADA MOBILE  ·  Equipe Lunaris
   --------------------------------------------------------------------------
   O mobile é uma EXTENSÃO de consulta + cadastros do sistema desktop.
   TODO este arquivo vive dentro de @media (max-width:768px):
   o desktop fica 100% intacto, nada aqui vaza para telas grandes.

   5 telas táticas (barra inferior estilo app nativo):
     Foco de Hoje · Calendário · Dashboard · Cadastro · Suporte & TI
   Ocultas no mobile: Painel do CS, Funil (Onboarding/Retenção),
                      Inadimplência, Registro de Churns.
   ========================================================================== */

@media (max-width: 768px) {

  /* ---------- 1. CHASSI DO APP ------------------------------------------- */
  html, body {
    width: 100%;
    overflow-x: hidden;
    background: var(--surface-muted);
    -webkit-tap-highlight-color: transparent;   /* sem flash cinza no toque   */
    overscroll-behavior-y: none;                /* mata o "bounce" do scroll  */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  .main-content {
    width: 100%;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;          /* rolagem com inércia (iOS)  */
    /* respiro para o conteúdo não passar por baixo da tab bar */
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }
  .main-content::-webkit-scrollbar { width: 0; height: 0; }  /* estética app   */

  /* ---------- 2. TAB BAR INFERIOR (5 abas, padrão app nativo) ------------ */
  .sidebar {
    position: fixed;
    top: auto; bottom: 0; left: 0;
    width: 100%;
    height: calc(62px + env(safe-area-inset-bottom, 0px));
    flex-direction: row;
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    backdrop-filter: blur(18px) saturate(180%);
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 -4px 22px rgba(15, 23, 42, 0.07);
    padding: 0 4px env(safe-area-inset-bottom, 0px);
    z-index: 9000;
  }

  /* Some tudo que não faz parte da navegação de 6 destinos
     (Foco · Painel CS · Calendário · Dashboard · Cadastro · Suporte) */
  .sb-brand, .sb-section, .sb-foot,
  #nav-funil, #funil-submenu,
  #nav-inadimplencia, #nav-churns { display: none !important; }

  .sb-nav {
    flex-direction: row;
    justify-content: space-around;
    align-items: stretch;
    width: 100%;
    padding: 0;
    gap: 0;
    overflow: visible;
  }

  .sb-item {
    flex: 1 1 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3px;
    margin: 0;
    padding: 7px 2px;
    border-radius: 0;
    background: transparent;
    color: var(--text-micro);
    transition: color .18s ease, transform .1s ease;
  }
  .sb-item:active { transform: scale(0.9); }     /* feedback tátil no toque    */

  .sb-item { padding: 7px 1px; }                 /* 6 itens: um respiro a menos */
  .sb-item .sb-icon { width: 22px; height: 22px; margin: 0; }
  .sb-item .sb-icon svg { width: 21px; height: 21px; }
  .sb-item .sb-label {
    display: block;
    max-width: 62px;
    font-size: 8.5px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.01em;
    text-align: center;
    white-space: normal;       /* permite 2 linhas p/ rótulos longos        */
  }

  /* Ativo: cor de marca pura — sem o glow/traço lateral do desktop */
  .sb-item.active { color: var(--primary); background: transparent; box-shadow: none; }
  .sb-item.active::before { display: none !important; }
  .sb-item.active .sb-icon svg { stroke-width: 2.4; }

  /* ---------- 3. CABEÇALHO DE TELA (sticky, estilo app) ------------------ */
  .view-header {
    position: sticky; top: 0;
    z-index: 50;
    padding: calc(14px + env(safe-area-inset-top, 0px)) 16px 12px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
  }
  .view-title { font-size: 18px; }
  .view-sub   { font-size: 12px; }

  /* ---------- 4. CONTENÇÃO DE LARGURA (anti-vazamento horizontal) -------- */
  /* Foco de Hoje: blocos soltos ganham o respiro via margem */
  .hoje-hud, .hoje-grid, #hoje-mural-wrap, .foco-add-panel {
    margin-left: 14px !important;
    margin-right: 14px !important;
    box-sizing: border-box;
  }
  /* Containers de view com padding desktop de 36px (CS · Cadastro · Suporte
     usam .cs-inner; Dashboard usa .dash-inner): neutraliza o recuo grande
     para o MESMO respiro de 14px do Foco — evita o "encolhido" no celular. */
  .cs-inner, .dash-inner {
    padding-left: 14px !important;
    padding-right: 14px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
  }
  .dash-grid-4, .dash-grid-3, .dash-grid-2 { grid-template-columns: 1fr; }

  /* Cards não ficam com hover "grudado" em telas de toque */
  .cal-card:hover, .hoje-hud-card:hover { transform: none; box-shadow: var(--shadow-soft); }

  /* ---------- 5. SUPORTE & TI: desidratação da lista --------------------- */
  /* KPIs do topo em 2 colunas */
  #view-suporte .t-summary { grid-template-columns: repeat(2, 1fr); gap: 10px; }

  /* Linha do ticket:  Título (linha cheia) → [Prioridade] [Status] ⌄
     ID e MRR ficam ocultos no celular.                                     */
  #view-suporte .t-row { flex-wrap: wrap; gap: 8px 10px; padding: 14px 16px; }
  #view-suporte .t-row-id,
  #view-suporte .t-row-mrr { display: none; }
  #view-suporte .t-row-tit { flex: 1 1 100%; }
  #view-suporte .t-row-prio,
  #view-suporte .t-row-status { flex: 0 0 auto; min-width: 0; }
  #view-suporte .t-row-toggle { margin-left: auto; }

  /* ---------- 6. TABELAS: rede de segurança contra estouro --------------- */
  .table-card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-card::-webkit-scrollbar { height: 0; }

  /* ---------- 7. GAVETAS EM TELA CHEIA (cadastro / novo ticket) ---------- */
  .cad-drawer {
    width: 100vw; max-width: 100vw;
    height: 100vh; max-height: 100vh;
    top: 0; left: 0;
    border-radius: 0;
    transform: translate(0, 0) !important;
  }
  .cad-drawer.open { transform: translate(0, 0) !important; }

  .tk-drawer, .churn-drawer, .dados-drawer {
    width: 100vw; max-width: 100vw; right: -100vw;
  }
  .cad-body, .tk-body, .dd-body, .churn-body { -webkit-overflow-scrolling: touch; }

  /* Inputs com 16px evitam o zoom-no-foco do iOS */
  .cad-input, .cad-select, .cad-textarea { font-size: 16px; }

  /* ---------- 8. CLASSE UTILITÁRIA: oculta colunas no celular ------------ */
  .hide-mobile { display: none !important; }

  /* ---------- 9. PAINEL DO CS (carteira) ------------------------------- */
  /* Filtros e ordenação empilhados e tocáveis */
  #view-cs .filter-bar { flex-direction: column; align-items: stretch; gap: 10px; }
  #view-cs .filter-status-group {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px;
  }
  #view-cs .filter-status-group::-webkit-scrollbar { height: 0; }
  #view-cs .filter-btn { flex: 0 0 auto; }
  #view-cs .filter-right { flex-direction: column; align-items: stretch; gap: 8px; width: 100%; }
  #view-cs .filter-search, #view-cs .filter-sort { width: 100%; }

  /* Linha do cliente no Painel: só Unidade/Gestor · Último Acesso · Acompanhar */
  #view-cs .col-plano, #view-cs .col-adesao { display: none; }
  #view-cs .td-acoes .btn { display: none !important; }
  #view-cs .td-acoes .btn-acompanhar { display: inline-flex !important; width: 100%; justify-content: center; }
  #view-cs .acoes-wrap { display: block; }

  /* ---------- 10. TELA DE ACOMPANHAMENTO (histórico em tela cheia) ------ */
  /* O overlay já é position:fixed/inset:0. Aqui só enxugamos para mobile. */
  .history-header { padding: calc(12px + env(safe-area-inset-top,0px)) 16px 12px; }
  .h-head-center { display: none; }                 /* esconde o selo central  */
  .h-head-title { font-size: 16px; }
  .history-body { padding: 18px 16px calc(40px + env(safe-area-inset-bottom,0px)); }
  .history-nav { display: none; }                   /* sem navegação de abas   */
  /* Na aba de Acompanhamento, mostra só as duas seções + salvar */
  #h-tab-aba5 .h-tab-intro,
  #h-tab-aba5 .ab5-hud { display: none; }
  #h-tab-aba5 .ab5-panel { padding: 16px; }
}