/* ================================================================
   MOBILE FIX — CorePro (2026-08-13)
   ----------------------------------------------------------------
   Correção definitiva dos travamentos e problemas de mobile.
   Este arquivo carrega POR ÚLTIMO (após audit-fixes.css).

   PROBLEMAS RESOLVIDOS:
   [A] body { overflow: hidden } bloqueia scroll no mobile
   [B] Dois sistemas de sidebar concorrentes (reorg + layout-fix)
       resultando em botão duplicado que intercepta pointer events
   [C] #app > .min-h-screen com altura fixa 100vh quebra scroll
       quando teclado virtual sobe no iOS/Android
   [D] Overlay ::after do layout-fix.css conflita com .reorg-backdrop
   [E] Áreas de toque abaixo de 44x44 (WCAG AA)
   [F] Modais sem scroll interno, header fixo cortado quando teclado abre
   [G] Tabelas sem scroll horizontal controlado
   [H] Formulários com grid rígido que não empilha no mobile

   PRINCÍPIO: preservar 100% do desktop. Aplicar mudanças SÓ em
   @media (max-width: 768px) para não afetar layouts maiores.
   ================================================================ */

/* ==================================================================
   [A] LIBERAR SCROLL DO DOCUMENTO NO MOBILE
   ------------------------------------------------------------------
   No desktop o padrão "body {overflow:hidden} + main {overflow:auto}"
   funciona bem. No mobile ele impede:
    - scroll natural via toque
    - scroll de recuperação do iOS quando teclado abre
    - navegação por barra de endereço colapsável (safe-area)
   Restaurar overflow natural do document + auto-scroll no main.
   ================================================================== */
@media (max-width: 768px) {
  html, body {
    overflow: auto !important;
    overflow-x: hidden !important; /* impede scroll horizontal acidental */
    overflow-y: auto !important;
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;
    /* iOS momentum scrolling */
    -webkit-overflow-scrolling: touch;
    /* Permitir gestos padrão do browser */
    touch-action: manipulation;
  }

  /* Shell: deixa crescer conforme conteúdo */
  #app > .min-h-screen {
    height: auto !important;
    min-height: 100vh !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* Coluna direita: idem, sem prender altura */
  #app > .min-h-screen > div.flex-1 {
    height: auto !important;
    min-height: 100vh !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* Main: scroll é o do document, não interno */
  #app > .min-h-screen > div.flex-1 > main {
    overflow: visible !important;
    overflow-x: hidden !important; /* apenas horizontal contido */
    min-height: 0 !important;
    /* Padding-bottom seguro contra safe-area */
    padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Header não pode ser sticky no mobile (bug com teclado virtual iOS) */
  #topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 20 !important;
    /* Safe-area no topo do iPhone com notch */
    padding-top: env(safe-area-inset-top, 0px) !important;
  }
}

/* ==================================================================
   [B] RESOLVER CONFLITO DE SIDEBAR MOBILE
   ------------------------------------------------------------------
   Existem DOIS botões hamburger:
   - #btnSidebarToggle (do topbar, em app.js)
   - .reorg-mobile-toggle (fixo, criado por master-reorg.js)
   
   E DOIS sistemas de toggle:
   - html.sidebar-open (layout-fix.css) → overlay via ::after
   - aside.reorg-open-mobile (master-reorg.js) → .reorg-backdrop
   
   Ambos posicionados em x≈12,y≈12 causando .reorg-mobile-toggle
   a interceptar clicks do #btnSidebarToggle.
   
   SOLUÇÃO: manter apenas o do topbar (#btnSidebarToggle) que é
   contextualizado dentro do header. Esconder .reorg-mobile-toggle
   e .reorg-backdrop no mobile via CSS + JS.
   ================================================================== */
@media (max-width: 768px) {
  /* Esconde botão duplicado ambulante */
  .reorg-mobile-toggle {
    display: none !important;
    pointer-events: none !important;
  }
  /* Esconde backdrop do sistema reorg — usaremos o do layout-fix */
  .reorg-backdrop {
    display: none !important;
    pointer-events: none !important;
  }
  /* Garante que o toggle no topbar apareça e seja tocável */
  #btnSidebarToggle {
    display: inline-flex !important;
    /* WCAG: mínimo 44x44 */
    min-width: 44px !important;
    min-height: 44px !important;
    /* Área de toque prioritária sobre outros elementos */
    position: relative;
    z-index: 21;
    /* Feedback tátil */
    -webkit-tap-highlight-color: rgba(249, 115, 22, 0.2);
  }
}

/* ==================================================================
   [C] SIDEBAR DRAWER — melhorias mobile
   ================================================================== */
@media (max-width: 768px) {
  /* Sidebar ocupa full-height do viewport (drawer real) */
  #app > .min-h-screen > aside {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    height: 100vh !important;
    /* iOS: usar dvh (dynamic viewport height) se suportado */
    height: 100dvh !important;
    width: min(80vw, 320px) !important;
    max-width: 320px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 60 !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
  }

  /* Aberta */
  html.sidebar-open #app > .min-h-screen > aside {
    transform: translateX(0);
  }

  /* Overlay quando drawer aberto — apenas UM (do layout-fix::after) */
  html.sidebar-open::after {
    content: '';
    position: fixed !important;
    inset: 0 !important;
    background: rgba(15, 23, 42, 0.55) !important;
    z-index: 55 !important;
    /* Permitir clique para fechar */
    pointer-events: auto !important;
    /* Fade-in suave */
    animation: coreproFadeIn 0.2s ease-out;
  }
  @keyframes coreproFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  /* Quando sidebar aberta, prevenir scroll do body (mas apenas então) */
  html.sidebar-open,
  html.sidebar-open body {
    overflow: hidden !important;
    /* Preserva posição visual */
    position: relative !important;
  }
}

/* ==================================================================
   [D] BOTÕES E ELEMENTOS INTERATIVOS — área de toque WCAG
   ================================================================== */
@media (max-width: 768px) {
  /* Botões mínimo 44x44 no mobile (WCAG 2.1 AA 2.5.5) */
  button:not(.tabbtn):not(.chip):not(.reorg-group-toggle),
  a.btn,
  [role="button"] {
    min-height: 44px;
  }

  /* Ícones dentro de botões pequenos: mais margem */
  button i.fa {
    line-height: 1;
  }

  /* Feedback tátil universal */
  button, a, [role="button"], .clickable {
    -webkit-tap-highlight-color: rgba(249, 115, 22, 0.15);
    touch-action: manipulation; /* remove 300ms delay */
  }

  /* Spacing entre botões colados */
  .flex.gap-2 > button + button,
  .flex.gap-3 > button + button {
    margin-left: 0.5rem;
  }
}

/* ==================================================================
   [E] MODAIS MOBILE — fullscreen com scroll interno
   ================================================================== */
@media (max-width: 640px) {
  /* Modais em geral (padrão Tailwind: fixed inset-0 flex ... > modal box) */
  .fixed.inset-0 > .bg-white:not(.no-mobile-full),
  .fixed.inset-0 > [class*="max-w-"]:not(.no-mobile-full),
  [role="dialog"] > div:not([class*="backdrop"]):not(.no-mobile-full) {
    max-width: calc(100vw - 16px) !important;
    width: calc(100vw - 16px) !important;
    max-height: calc(100vh - 32px) !important;
    max-height: calc(100dvh - 32px) !important; /* iOS dynamic viewport */
    margin: 8px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important; /* scroll é interno no corpo */
  }

  /* Cabeçalho fixo do modal */
  .fixed.inset-0 > .bg-white > .modal-header,
  .fixed.inset-0 > .bg-white > header,
  .fixed.inset-0 > .bg-white > div:first-child {
    flex-shrink: 0 !important;
  }

  /* Corpo do modal com scroll interno */
  .fixed.inset-0 > .bg-white > .modal-body,
  .fixed.inset-0 > .bg-white > .space-y-4,
  .fixed.inset-0 > .bg-white > .space-y-6 {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
  }

  /* Rodapé fixo do modal */
  .fixed.inset-0 > .bg-white > .modal-footer,
  .fixed.inset-0 > .bg-white > footer,
  .fixed.inset-0 > .bg-white > div:last-child:not(:only-child) {
    flex-shrink: 0 !important;
    /* Safe area no rodapé */
    padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Botões do rodapé do modal em stack se necessário */
  .fixed.inset-0 .modal-footer .flex,
  .fixed.inset-0 [class*="justify-end"].flex {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }

  /* Backdrop do modal — permitir tap-to-close */
  .fixed.inset-0.bg-black\/50,
  .fixed.inset-0.bg-black\/60,
  .fixed.inset-0.bg-black\/70,
  .fixed.inset-0[class*="bg-black"] {
    touch-action: manipulation;
  }
}

/* ==================================================================
   [F] TABELAS RESPONSIVAS MOBILE — scroll horizontal controlado
   ================================================================== */
@media (max-width: 768px) {
  /* Tabelas em geral: container overflow-x auto */
  main table {
    display: block !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
    white-space: nowrap;
  }
  main table thead,
  main table tbody,
  main table tfoot {
    display: table-row-group;
  }
  main table tr {
    display: table-row;
  }
  main table th,
  main table td {
    display: table-cell;
    white-space: nowrap;
    /* Padding mais confortável para toque */
    padding: 0.5rem 0.625rem !important;
    font-size: 0.813rem;
  }
  /* Wrapper table dentro de div.overflow-x-auto: já tem scroll, deixa ele */
  main .overflow-x-auto {
    -webkit-overflow-scrolling: touch !important;
  }
  main .overflow-x-auto > table {
    display: table !important;
  }
}

/* ==================================================================
   [G] FORMULÁRIOS MOBILE — grid empilha
   ================================================================== */
@media (max-width: 640px) {
  /* Grids de formulário 2/3/4 colunas → 1 coluna no mobile */
  main .grid.grid-cols-2:not(.keep-grid-mobile),
  main .grid.grid-cols-3:not(.keep-grid-mobile),
  main .grid.grid-cols-4:not(.keep-grid-mobile),
  main .grid.md\:grid-cols-2,
  main .grid.md\:grid-cols-3,
  main .grid.md\:grid-cols-4 {
    grid-template-columns: 1fr !important;
  }

  /* Exceção: shortcuts do dashboard continuam em grid 2 colunas */
  main .reorg-dash-shortcuts.grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Inputs: font-size >= 16px para prevenir zoom do iOS */
  main input:not([type="checkbox"]):not([type="radio"]),
  main select,
  main textarea {
    font-size: 16px !important;
    min-height: 44px;
  }
  main textarea {
    min-height: 88px;
  }

  /* Labels visualmente separadas dos campos */
  main label {
    display: block;
    margin-bottom: 0.25rem;
  }

  /* Ajuste padding padrão em inputs para toque confortável */
  main input:not([type="checkbox"]):not([type="radio"]),
  main select,
  main textarea {
    padding: 0.625rem 0.75rem !important;
  }
}

/* ==================================================================
   [H] HEADER MOBILE — não ultrapassar a viewport
   ================================================================== */
@media (max-width: 640px) {
  #topbar {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
  /* Container interno do topbar */
  #topbar > div,
  #topbar .flex {
    min-width: 0;
    overflow: hidden;
  }
  /* Título ou logo do topbar */
  #topbar h1,
  #topbar .brand,
  #topbar [class*="text-xl"],
  #topbar [class*="text-2xl"] {
    font-size: 0.938rem !important;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 55vw;
  }
  /* Header actions à direita se apertam */
  #topbar .header-actions {
    gap: 0.25rem !important;
  }
  #topbar .header-action {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
  }
  /* Esconder texto de contexto quando muito apertado */
  #topbar .header-context-label {
    display: none;
  }
}

/* Muito pequeno (320px) — ainda mais compacto */
@media (max-width: 360px) {
  #topbar {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
  #topbar h1,
  #topbar .brand {
    max-width: 45vw;
  }
  main {
    padding: 0.75rem !important;
  }
}

/* ==================================================================
   [I] CARDS DO DASHBOARD MOBILE — layout compacto
   ================================================================== */
@media (max-width: 640px) {
  /* KPI cards em 2 colunas mobile (não 4 do desktop) */
  main .grid.md\:grid-cols-4:not(.reorg-dash-shortcuts) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.75rem !important;
  }
  /* KPI card: menor mas legível */
  main .kpi-card,
  main [class*="kpi"] {
    padding: 0.75rem !important;
  }
  main .kpi-card .text-3xl,
  main .kpi-card .text-4xl,
  main [class*="kpi"] .text-3xl,
  main [class*="kpi"] .text-4xl {
    font-size: 1.25rem !important;
    line-height: 1.2 !important;
  }
}

/* ==================================================================
   [J] CRONOMETRAGEM MOBILE — botões e pílulas
   ================================================================== */
@media (max-width: 640px) {
  /* Grande botão cronômetro deve ficar prominente */
  .cron-btn-play,
  .cron-btn-pause,
  .cron-btn-stop,
  button[class*="cronometro"] {
    min-height: 48px !important;
    font-size: 0.938rem;
  }

  /* Pílulas de tempo empilham em 2 colunas */
  .cron-pill-grid,
  [class*="pillGrid"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.5rem !important;
  }
}

/* ==================================================================
   [K] DROPDOWNS / SELECTS — nativos no mobile para melhor UX
   ================================================================== */
@media (max-width: 768px) {
  /* Menus dropdown customizados devem ser bem visíveis */
  .dropdown-menu,
  [class*="absolute"][class*="shadow"] {
    max-width: calc(100vw - 24px) !important;
    max-height: 60vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* ==================================================================
   [L] IMPEDIR OVERFLOW HORIZONTAL DESNECESSÁRIO
   ================================================================== */
@media (max-width: 768px) {
  /* Containers largos que ultrapassam a viewport */
  main > * {
    max-width: 100%;
  }
  /* Imagens responsivas */
  main img {
    max-width: 100%;
    height: auto;
  }
  /* Textos longos quebram */
  main p, main span, main div {
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
}

/* ==================================================================
   [M] LANDSCAPE MOBILE — evitar viewport comprimido demais
   ================================================================== */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  /* Header mais compacto */
  #topbar {
    padding-top: 0.375rem !important;
    padding-bottom: 0.375rem !important;
  }
  #topbar .header-action {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
  }
  /* Sidebar drawer altura reduzida */
  #app > .min-h-screen > aside {
    width: min(70vw, 280px) !important;
  }
}

/* ==================================================================
   [N] FOCUS VISIBLE em elementos interativos (acessibilidade)
   ================================================================== */
@media (max-width: 768px) {
  button:focus-visible,
  a:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible {
    outline: 2px solid var(--cp-accent-500, #f97316);
    outline-offset: 2px;
  }
}

/* ==================================================================
   [O] LOGIN PAGE MOBILE — form ergonômico
   ================================================================== */
@media (max-width: 640px) {
  body.login-page main,
  body.login-page .flex.items-center.justify-center {
    padding: 1rem !important;
  }
  body.login-page form {
    width: 100%;
    max-width: none;
  }
  body.login-page input {
    font-size: 16px !important; /* previne zoom iOS */
    min-height: 48px !important;
  }
  body.login-page button[type="submit"] {
    min-height: 48px !important;
    font-size: 1rem;
  }
}