/* ══════════════════════════════════════════════════════════════
   Dr. Contratus — Mobile & PWA overrides
   Maio/2026 — complementa app.css
   ══════════════════════════════════════════════════════════════ */

/* ── Visual Law: template grid 1 coluna em telas pequenas ────── */
@media(max-width:500px){
  .vl-template-grid{ grid-template-columns:1fr !important; }
}

/* ── Telas <420px: ajustes gerais de espaçamento ─────────────── */
@media(max-width:420px){

  /* Petições */
  .pet-preview  { padding:12px 10px !important; }
  .pet-panel    { padding:12px 10px !important; }
  .pet-secao-edit{ min-height:70px !important; }
  .pet-secao-acoes{ gap:4px !important; flex-wrap:wrap; }
  .pet-steps    { overflow-x:auto; }
  .pet-step     { min-width:60px; font-size:10px !important; }

  /* Honorários */
  .hon-grid     { padding:10px !important; }
  .hon-header   { padding:10px 12px !important; }

  /* Tool screen: empilhar coluna única */
  .tool-screen.active{
    grid-template-columns:1fr !important;
  }

  /* Sidebar e sidepanel escondem borda lateral */
  .sidebar,.calc-sidebar,.asidebar{
    border-right:none !important;
    border-bottom:1px solid var(--cream2);
  }

  /* Botões em linha: permitir wrap */
  .btns-row,.btn-row,.secao-acoes,.pet-secao-acoes{
    flex-wrap:wrap !important;
    gap:6px !important;
  }

  /* Modais: usar 100% da largura com margem mínima */
  .modal-box,.modal-pc,.privacy-modal{
    width:calc(100vw - 20px) !important;
    max-width:calc(100vw - 20px) !important;
    padding:16px 14px !important;
    border-radius:12px !important;
  }

  /* Headers de modal mais compactos */
  .modal-box h2,.modal-pc-ttl{ font-size:15px !important; }

  /* Tabelas: scroll horizontal */
  .doc-legal-table-wrap,
  .doc-legal-table{ display:block; overflow-x:auto; width:100%; }

  /* Inputs e textareas: garantir 100% de largura */
  input[type="text"],input[type="email"],input[type="number"],
  input[type="tel"],textarea,select{
    max-width:100% !important;
  }
}

/* ── Fix: empilhamento vertical em telas ≤760px ──────────────── */
/*
 * app.css 767px já faz overflow-y:auto no .tool-screen.active,
 * mas mantém grid-template-rows:minmax(0,1fr) que faz a linha 1
 * tomar toda a altura, escondendo a linha 2 abaixo do fold.
 * Além disso, height:100% nos filhos colapsa o painel de formulário.
 * Fix: grid-template-rows:auto para cada linha dimensionar ao conteúdo,
 * e height:auto nos painéis para não competir com a linha 1.
 */
@media(max-width:760px){

  /* Grid de coluna única com linhas dimensionadas ao conteúdo */
  .tool-screen.active{
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    overflow-y: auto !important;
  }

  /* Screens com overflow:hidden explícito no 767px precisam de scroll */
  #screen-portal.active,
  #screen-financeiro.active,
  #screen-workspace.active,
  #screen-ferramentas.active,
  #screen-processos.active{
    overflow-y: auto !important;
  }

  /* ── Painéis laterais (formulários): altura pelo conteúdo ──── */
  .sidebar,.calc-sidebar,.asidebar{
    height: auto !important;
    max-height: none !important;
    overflow-y: visible !important;
    border-right: none !important;
    border-bottom: 1px solid var(--cream2);
  }

  /* ── Painéis de resultado: altura pelo conteúdo ────────────── */
  .preview,.calc-preview,.cprev,.aprev{
    height: auto !important;
    max-height: none !important;
    min-height: 200px;
    overflow-y: visible !important;
  }

  /* ── Petições ─────────────────────────────────────────────── */
  .pet-sidebar{
    height: auto !important;
    max-height: none !important;
    overflow-y: visible !important;
  }
  .pet-preview{
    height: auto !important;
    max-height: none !important;
    overflow-y: visible !important;
  }

  /* ── Ferramentas ──────────────────────────────────────────── */
  .tools-layout,.tools-main{
    height: auto !important;
    overflow-y: auto !important;
    min-height: 0 !important;
  }
  .tools-panel{
    height: auto !important;
    overflow: visible !important;
  }

  /* ── Layouts já corrigidos no app.css 767px mas sem height:auto
        nos painéis filhos — garantir que não colem em 100% ──── */
  .proc-sidebar,.proc-main,
  .cli-sidebar,.cli-main,
  .fin-sidebar,.fin-main,
  .portal-sidebar,.portal-main,
  .ws-nav,.ws-panel,
  .par-sidebar,
  .ana-sidebar,.ana-main,
  .mod-sidebar,.mod-main{
    height: auto !important;
    max-height: none !important;
    overflow-y: visible !important;
  }

  /* ── Workspace aninhado ───────────────────────────────────── */
  .docs-layout{
    grid-template-columns: 1fr !important;
    height: auto !important;
    overflow: visible !important;
  }
  .docs-sidebar,.docs-main,.docs-editor{
    height: auto !important;
    max-height: none !important;
    overflow-y: visible !important;
    flex: none !important;
  }

  /* ── Ferramentas sub-layouts internos ─────────────────────── */
  .ferr-layout{
    grid-template-columns: 1fr !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* ── Cronômetro de Atendimento ────────────────────────────── */
  .atend-layout{
    grid-template-columns: 1fr !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* ── Banco de Teses ───────────────────────────────────────── */
  .teses-layout{
    grid-template-columns: 1fr !important;
    height: auto !important;
    overflow: visible !important;
  }
  .teses-sidebar,.teses-editor{
    height: auto !important;
    max-height: none !important;
    overflow-y: visible !important;
    flex: none !important;
    border-right: none !important;
    border-bottom: 1px solid var(--cream2);
  }
}

/* ── Tablet / iPad (768px – 1024px) ──────────────────────────── */
@media(min-width:768px) and (max-width:1024px){

  /* Sidebar lateral: largura reduzida */
  .app-sidebar{ width:200px !important; min-width:200px !important; }

  /* Tool screen: coluna esquerda menor */
  .tool-screen.active{
    grid-template-columns:320px 1fr !important;
  }

  /* Visual Law template grid: 2 colunas no tablet */
  .vl-template-grid{ grid-template-columns:repeat(2,1fr) !important; }

  /* Petições step 2: padding confortável */
  .pet-preview  { padding:16px 18px !important; }
  .pet-panel    { padding:14px 16px !important; }
}

/* ── Landscape em celular ─────────────────────────────────────── */
@media(max-width:768px) and (orientation:landscape){
  .tool-screen.active{ grid-template-columns:1fr !important; }
  .pet-preview,.calc-preview,.cprev{ max-height:200px; overflow-y:auto; }
}

/* ── Alvos de toque — mínimo 44×44px (WCAG 2.5.5) ───────────── */
@media(max-width:768px){
  .snav-item{
    min-height:44px !important;
    padding:0 12px !important;
    display:flex !important;
    align-items:center !important;
  }
  .btn-main,.btn-tool,.btn-act{
    min-height:40px !important;
  }
  /* Botão flutuante de notificações */
  #push-toggle-btn{
    width:44px; height:44px;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
  }
}

/* ── PWA — safe area insets (notch/home bar iOS) ─────────────── */
@supports(padding-bottom:env(safe-area-inset-bottom)){
  .app-sidebar{
    padding-bottom:calc(20px + env(safe-area-inset-bottom)) !important;
  }
  header{
    padding-top:env(safe-area-inset-top);
  }
}

/* ── Banner de instalação PWA ────────────────────────────────── */
#pwa-install-banner{
  position:fixed;
  bottom:0; left:0; right:0;
  background:var(--navy);
  color:#fff;
  padding:14px 20px;
  display:flex;
  align-items:center;
  gap:12px;
  z-index:9990;
  box-shadow:0 -4px 20px rgba(0,0,0,.18);
  transform:translateY(100%);
  transition:transform .3s ease;
}
#pwa-install-banner.visible{ transform:translateY(0); }
#pwa-install-banner p{
  flex:1; font-size:13px; margin:0; line-height:1.4;
}
#pwa-install-banner strong{ color:var(--gold); }
#pwa-btn-instalar{
  background:var(--gold); color:var(--navy);
  border:none; border-radius:8px;
  padding:8px 16px; font-size:12px; font-weight:700;
  cursor:pointer; white-space:nowrap;
  font-family:'DM Sans',sans-serif;
}
#pwa-btn-fechar-banner{
  background:none; border:none; color:rgba(255,255,255,.5);
  font-size:18px; cursor:pointer; padding:4px; line-height:1;
  font-family:'DM Sans',sans-serif;
}

/* ── Toast de notificação push ───────────────────────────────── */
#push-status-toast{
  position:fixed;
  bottom:80px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--navy); color:#fff;
  padding:10px 20px; border-radius:99px;
  font-size:12px; font-weight:500;
  opacity:0; pointer-events:none;
  transition:opacity .25s, transform .25s;
  z-index:9999; white-space:nowrap;
  font-family:'DM Sans',sans-serif;
}
#push-status-toast.show{
  opacity:1; transform:translateX(-50%) translateY(0);
}

/* ══════════════════════════════════════════════════════════════
   HUB DE ADVOGADOS — Mobile
   ══════════════════════════════════════════════════════════════ */

/* Botão "Meu Perfil & Ranking" e handle — ocultos no desktop */
.hub-mobile-perfil-btn,
.hub-sidebar-overlay,
.hub-sidebar-handle{
  display: none;
}

@media(max-width:960px){

  /* Botão de acesso ao perfil/sidebar */
  .hub-mobile-perfil-btn{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    background: var(--navy);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 11px 16px;
    font-size: 13px;
    font-weight: 600;
    font-family: 'DM Sans', sans-serif;
    cursor: pointer;
    margin-bottom: 12px;
    -webkit-tap-highlight-color: transparent;
  }

  /* Overlay escuro por trás do drawer */
  .hub-sidebar-overlay{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 498;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
  }
  .hub-sidebar-overlay.open{
    opacity: 1;
    pointer-events: all;
  }

  /* Sidebar vira bottom-sheet */
  .hub-sidebar{
    display: none;
    position: fixed !important;
    bottom: 0; left: 0; right: 0;
    background: #fff;
    border-radius: 20px 20px 0 0;
    max-height: 82vh;
    overflow-y: auto;
    z-index: 499;
    flex-direction: column;
    gap: 16px;
    padding: 0 16px calc(20px + env(safe-area-inset-bottom));
    box-shadow: 0 -6px 40px rgba(0,0,0,.18);
    transform: translateY(100%);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
  }
  .hub-sidebar.open{
    transform: translateY(0);
  }

  /* Handle visual e botão fechar */
  .hub-sidebar-handle{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0 8px;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 1;
  }
  .hub-sidebar-handle-bar{
    display: block;
    width: 36px; height: 4px;
    background: rgba(0,0,0,.15);
    border-radius: 2px;
    margin: 0 auto;
    flex: 1;
  }
  .hub-sidebar-close{
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: var(--muted);
    padding: 4px 0 4px 12px;
    line-height: 1;
    font-family: 'DM Sans', sans-serif;
  }

  /* Feed filters: scroll horizontal sem wrap */
  .hub-feed-header{
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .hub-feed-header::-webkit-scrollbar{ display: none; }
  .hub-feed-filtro{
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* Post cards: menos padding */
  .hub-post{
    padding: 14px 12px !important;
  }

  /* Nova publicação: compacto */
  .hub-nova-post{
    padding: 10px 12px !important;
    gap: 8px !important;
  }
  .hub-nova-post-publicar{
    padding: 7px 12px !important;
    font-size: 12px !important;
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* Painel de notificações: largura total na base */
  .hub-notif-panel{
    position: fixed !important;
    bottom: 0 !important; left: 0 !important; right: 0 !important;
    top: auto !important;
    width: auto !important;
    border-radius: 16px 16px 0 0 !important;
    max-height: 60vh !important;
    box-shadow: 0 -4px 24px rgba(0,0,0,.15);
  }
}

@media(max-width:480px){
  /* Stats do perfil: 3 colunas menores */
  .hub-perfil-stat-num{ font-size: 16px !important; }
  .hub-perfil-stat-lbl{ font-size: 10px !important; }

  /* Hero mais compacto */
  .hub-hero{ padding: 24px 14px 20px !important; }
  .hub-hero-btns{ flex-direction: column; gap: 8px !important; }
  .hub-btn-primary,.hub-btn-secondary{
    width: 100% !important;
    justify-content: center !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   ACADEMY — Mobile
   ══════════════════════════════════════════════════════════════ */

@media(max-width:600px){

  /* Padding geral do conteúdo do Academy */
  .ac-main{ padding: 20px 12px 40px !important; }
  .ac-hero{ padding: 32px 14px 28px !important; }
  .ac-hero h1{ font-size: 20px !important; line-height: 1.3; }

  /* Stats hero: scroll horizontal em telas muito pequenas */
  .ac-hero-stats{
    overflow-x: auto;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
    gap: 12px !important;
  }
  .ac-hero-stats::-webkit-scrollbar{ display: none; }
  .ac-hero-stat{ flex-shrink: 0; min-width: 80px; }

  /* Cabeçalho de curso/trilha: compacto */
  .ac-curso-header{ padding: 20px 14px 16px !important; }
  .ac-curso-titulo{ font-size: 18px !important; }

  /* Player: padding mínimo */
  .ac-player-wrap{ padding: 16px 12px 32px !important; }
  .ac-player-video-wrap{ border-radius: 8px; }

  /* Tabs de conteúdo do curso */
  .ac-cur-tabs{
    overflow-x: auto;
    flex-wrap: nowrap !important;
    scrollbar-width: none;
  }
  .ac-cur-tabs::-webkit-scrollbar{ display: none; }
  .ac-cur-tab{ white-space: nowrap; flex-shrink: 0; }

  /* Lista de aulas na sidebar (empilhada abaixo do player) */
  .ac-player-lista{ max-height: none !important; }

  /* Admin: tabelas com scroll horizontal */
  .ac-admin-wrap table{
    display: block;
    overflow-x: auto;
    width: 100%;
    -webkit-overflow-scrolling: touch;
  }

  /* Cards de estatísticas: 2 colunas */
  .ac-ml-stats{ grid-template-columns: repeat(2, 1fr) !important; }

  /* Botões de ação: empilhar */
  .ac-hero-cta,
  .ac-cur-enroll-btn{ width: 100% !important; }
}

@media(max-width:400px){
  /* Stats do player: 1 coluna */
  .ac-ml-stats{ grid-template-columns: 1fr !important; }
  .ac-hero h1{ font-size: 18px !important; }
}