/* ================================================================
   ORDEM DOS NAVEGADORES — Mobile V2 (2026-08-05)
   ================================================================
   Carrega DEPOIS de css/responsive-fix.css. Corrige bloqueios
   funcionais medidos com renderizacao real a 390x844 e 390x420
   (o segundo simula o teclado virtual aberto, que e quando o
   utilizador esta mesmo a preencher formularios).

   PROBLEMA CENTRAL CORRIGIDO AQUI
   responsive-fix.css transforma qualquer folha de modal em
   `height:100dvh; overflow:hidden; display:flex`, mas so entrega
   `overflow-y:auto` a filhos especificos (.modal-form/.modal-body/
   .detalhe-content). Modais cujo conteudo sao `.form-group` soltos
   (ex.: premium-admin.html) ficam SEM nenhuma area scrollavel:
   medido 635px de conteudo em 420px visiveis = 215px inalcancaveis,
   com o botao de submeter fora do ecra. Aqui devolvemos o scroll.
   ================================================================ */

/* ── 1. Modais: a folha volta a poder fazer scroll ────────────── */
@media (max-width: 768px) {

  /* Vence o `overflow:hidden !important` do responsive-fix.css.
     Em modais que JA tem area scrollavel propria (.modal-card com
     .modal-form) isto e inofensivo: o filho continua a tratar do
     scroll e o pai nunca transborda. */
  .modal-overlay > .modal-box,
  .modal-overlay > .modal-card,
  .modal-overlay > .modal-content,
  .modal-overlay > .modal {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    /* espaco no fundo: safe-area do iOS + folga para o ultimo campo
       nao ficar colado ao limite do ecra */
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* O modal tem de ficar ACIMA da barra de separadores inferior
     (.bottom-tabs = z-index 9998), senao os ultimos ~57px da folha
     ficam tapados — incluindo, em formularios mais altos, os botoes
     de accao. */
  .modal-overlay {
    z-index: 10050 !important;
  }

  /* ... mas so o z-index NAO chega em index.html: os modais estao dentro
     de `.app`, que tem `position:relative; z-index:1` (base.css:48-53) e
     portanto cria um contexto de empilhamento — tudo o que esta la dentro
     fica preso ao nivel 1, por muito alto que seja o z-index do filho.
     MEDIDO: tocar nos ultimos 57px de um modal aberto no index.html
     entregava o toque a `a.bottom-tab` (= navegava para outra pagina em
     vez de carregar em Guardar/Cancelar).
     Duas defesas independentes: */

  /* 1) libertar o contexto de empilhamento em telemovel */
  .app {
    z-index: auto !important;
  }

  /* 2) com um modal aberto, a barra de separadores sai da frente
        (tambem devolve 57px de altura util ao formulario) */
  body:has(.modal-overlay.open) .bottom-tabs,
  body:has(.modal-overlay.show) .bottom-tabs,
  body:has(.modal-bg.open) .bottom-tabs {
    display: none !important;
  }
}

/* ── 1b. Cabecalho e botoes sempre visiveis na folha ──────────── */
/* admin.css ja poe `.modal-header{position:sticky;top:0}`, mas o
   retangulo de "sticky" e a *padding-box* do contentor: com os 28px
   de padding-top da folha, o cabecalho colava 28px abaixo do topo e
   via-se texto a passar por tras. Tiramos o padding vertical da
   folha e devolvemo-lo ao cabecalho/rodape, que passam a ser as
   duas ancoras opacas do sheet. */
@media (max-width: 768px) {
  /* Margem lateral fixada num valor conhecido para o cabecalho/rodape
     poderem ser "full-bleed" com margens negativas iguais. Sem isto,
     o fundo opaco deles nao cobria as faixas laterais do padding e
     via-se o conteudo a passar por tras nos cantos. */
  .modal-overlay > .modal-box {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .modal-overlay > .modal-box > .modal-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 3 !important;
    background-color: var(--bg-card, #13141c) !important;
    background-image: none !important;       /* solido: sem emenda com o gradiente da folha */
    margin: 0 -20px 16px -20px !important;
    padding: 16px 20px 12px 20px !important;
    border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.07)) !important;
  }

  /* Rodape colado ao fundo: o botao principal deixa de exigir scroll. */
  .modal-overlay > .modal-box > .modal-actions {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 3 !important;
    background-color: var(--bg-card, #13141c) !important;
    background-image: none !important;
    margin: 16px -20px 0 -20px !important;
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px)) 20px !important;
    border-top: 1px solid var(--border, rgba(255, 255, 255, 0.07)) !important;
  }

  /* Botoes de accao com alvo de toque decente e sem apertar texto. */
  .modal-overlay > .modal-box > .modal-actions > button {
    min-height: 46px !important;
    flex: 1 1 auto !important;
  }
}

/* ── 2. Linhas de formulario empilham em telemovel ────────────── */
/* `.form-row` e um flex de 2 colunas fixas: a 390px o segundo campo
   ficava cortado pela direita (medido: right=392 > viewport=390).
   Era o campo *obrigatorio* "Data de Expiracao". */
@media (max-width: 560px) {
  .modal-overlay .form-row,
  .form-row {
    flex-direction: column !important;
    gap: 12px !important;
  }
  .modal-overlay .form-row > *,
  .form-row > * {
    width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }
  /* inputs de data trazem largura intrinseca do browser — travar */
  .modal-overlay input,
  .modal-overlay select,
  .modal-overlay textarea {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .modal-overlay input[type="date"],
  .modal-overlay input[type="datetime-local"],
  .modal-overlay input[type="time"] {
    width: 100% !important;
  }
}

/* ── 3. Dropdown de pesquisa dentro do modal ──────────────────── */
/* Com a folha a fazer scroll, um dropdown absoluto pode ficar preso;
   limitamos a altura e damos-lhe scroll proprio. */
@media (max-width: 768px) {
  .modal-overlay .search-dropdown {
    max-height: 45vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
  }
}

/* ── 4. Tabelas largas: coluna de accoes sempre alcancavel ────── */
/* A tabela de membros mede 1088px num ecra de 390px: as accoes
   (editar/remover) so apareciam depois de arrastar a tabela toda
   para o lado. Fixamos a ultima coluna a direita, como ja se fez
   em relatorios.html. */
@media (max-width: 768px) {
  /* .data-table (lista de clientes do dashboard): 693px de largura num ecra
     de 390px, com a coluna "Acções" a comecar em x=617 — so aparecia depois
     de arrastar a tabela toda para o lado. .premium-table: 1088px. */
  .data-table th:last-child,
  .data-table td:last-child,
  .premium-table th:last-child,
  .premium-table td:last-child {
    position: sticky !important;
    right: 0 !important;
    z-index: 1 !important;
    background-color: var(--bg-card, #13141c) !important;
    background-image: none !important;
    box-shadow: -8px 0 12px -8px rgba(0, 0, 0, 0.85) !important;
  }
  .data-table th:last-child,
  .premium-table th:last-child {
    z-index: 2 !important;
  }
  /* o wrapper tem mesmo de poder deslizar na horizontal */
  .premium-table-wrap,
  .table-wrapper,
  .premium-card > .table-scroll {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* ── 5. Pesquisa em telemovel — NAO alterada de proposito ─────── */
/* responsive-fix.css:158 esconde `.topbar-right .search-box` a <=640px.
   Tentei duas formas de a repor e MEDI as duas: (a) deixar a topbar
   quebrar linha -> a barra passava de 48px para 207px de altura, com cada
   item numa linha; (b) encolher a caixa na mesma linha -> a pesquisa ficava
   com 58px uteis e espremia o sino para 25px e o avatar para 20px (abaixo
   do minimo de toque). Nenhuma serve a 390px.
   Caminho certo (fica por fazer, precisa de HTML): um campo de pesquisa
   proprio dentro do conteudo da pagina, como ja se fez em
   catalogo-cliente.html, reencaminhando para o handler existente. */

/* ── 6. Alvos de toque nos itens de navegacao ─────────────────── */
/* Medidos a 39px de altura; a recomendacao (iOS HIG/Material) e 44. */
@media (max-width: 960px) {
  .sidebar .nav-item {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   4. PESQUISA DE CLIENTES EM TELEMÓVEL          (2026-08-07)
   ══════════════════════════════════════════════════════════════
   `pwa.css` escondia a caixa de pesquisa em mobile
   (`.topbar-right .search-box{display:none!important}`) para poupar
   espaço na barra de topo — mas é a forma principal de encontrar um
   cliente, e sem ela o painel fica inutilizável no telemóvel (queixa
   directa do dono: "não consigo pesquisar clientes").
   Em vez de a espremer ao lado dos ícones, damos-lhe uma linha só
   dela por baixo do cabeçalho, à largura toda. */
@media (max-width: 768px) {
  .topbar {
    flex-wrap: wrap !important;
    row-gap: 8px !important;
    padding-bottom: 10px !important;
    /* a barra tinha `height:56px` + `overflow:hidden` (pwa.css): a linha da
       pesquisa existia mas ficava cortada logo abaixo do título. Passa a
       crescer com o conteúdo — continua sticky na mesma. */
    height: auto !important;
    min-height: 56px !important;
    overflow: visible !important;
  }
  .topbar-right {
    /* os ícones continuam à direita, na 1.ª linha */
    flex-wrap: wrap !important;
  }
  .topbar-right .search-box {
    display: flex !important;
    order: 99;              /* empurra para a linha de baixo */
    flex: 1 0 100% !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    align-items: center;
  }
  .topbar-right .search-box .search-input {
    width: 100% !important;
    font-size: 16px !important;   /* <16px faz o iOS dar zoom ao focar */
    height: 42px !important;      /* alvo de toque confortável */
    /* a lupa é `position:absolute; left:10px` (base.css) — sem esta folga o
       texto do placeholder passava-lhe por cima */
    padding-left: 36px !important;
  }
}

/* Pesquisa quando o pwa-ui.js a move para dentro do cartão da lista
   (2026-08-07): já não está na barra de topo, por isso volta a ser um
   bloco normal, à largura do cartão e com espaço para respirar. */
@media (max-width: 768px) {
  .search-box.search-box--junto-lista {
    display: flex !important;
    order: 0 !important;
    width: auto !important;
    flex: none !important;
    margin: 10px 14px 4px !important;
    position: relative;
  }
  .search-box.search-box--junto-lista .search-input {
    width: 100% !important;
    height: 44px !important;
    font-size: 16px !important;
    padding-left: 36px !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   5. NADA FICA FORA DO ECRÃ SEM SE PODER VER      (2026-08-07)
   ══════════════════════════════════════════════════════════════
   Pedido do dono: "se não cabem no ecrã vertical devem ter
   possibilidade de arrastar para o lado para ver essas coisas".
   Duas frentes:
   (a) o que NÃO devia transbordar de todo — grelhas com campos de
       data. MEDIDO em jornais.html: `grid-template-columns:1fr 1fr 1fr`
       inline, com `input[type=date]` a trazer ~269px de largura
       intrínseca do browser; como os itens de grelha nascem com
       `min-width:auto`, não encolhem e a linha saía 182px do ecrã,
       sem contentor que arrastasse (o body tem overflow-x:hidden).
   (b) o que TEM mesmo de ser largo (tabelas) — ver secção 6. */
@media (max-width: 768px) {
  /* itens de grelha/flex passam a poder encolher */
  [style*="display:grid"] > *,
  [style*="display: grid"] > *,
  .form-grid > *,
  .grid > * {
    min-width: 0 !important;
  }
  /* os campos de data são os principais culpados: largura intrínseca fixa */
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="week"] {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}
/* em ecrãs mesmo estreitos, 3 colunas de campos não cabem de todo */
@media (max-width: 560px) {
  [style*="grid-template-columns:1fr 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ── 6. Sinal de que a zona desliza para o lado ────────────────── */
@media (max-width: 768px) {
  .dica-arrasto {
    font-size: 11.5px;
    color: var(--text-tertiary, #8b8b98);
    padding: 2px 14px 6px;
    letter-spacing: .02em;
    animation: dicaEntra .3s ease both;
  }
  @keyframes dicaEntra { from { opacity: 0 } to { opacity: .95 } }
  /* sombra no bordo direito enquanto houver conteúdo por ver */
  .arrasta-h:not(.arrasta-h--usado) {
    -webkit-mask-image: linear-gradient(to right, #000 88%, rgba(0,0,0,.35));
    mask-image: linear-gradient(to right, #000 88%, rgba(0,0,0,.35));
  }
}