/* Estilos próprios do morep-admin (complementam o Tailwind via CDN). */

/* Indicador htmx: só visível durante um pedido em curso. */
.htmx-indicator { opacity: 0; transition: opacity .2s ease-in; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { opacity: 1; }

/* Transição suave ao trocar conteúdo via htmx. */
.htmx-swapping { opacity: 0; transition: opacity .15s ease-out; }

/* Alpine: esconder elementos com x-cloak até o Alpine inicializar. */
[x-cloak] { display: none !important; }

/* App instalada (standalone) em dispositivo touch: margem mínima nas laterais
   (5px) para aproveitar a largura, somando a safe-area do device (notch em
   landscape). Só `pointer: coarse` (telemóvel/tablet) — no desktop instalado
   mantém-se o padding confortável do HTML, senão o conteúdo cola-se às bordas.
   O padding base (browser) fica nas classes Tailwind do HTML — sempre fresco,
   nunca depende deste CSS (que é cache-first no service worker). Seletor
   `header.app-bar` / `main.app-main` (elemento+classe) para vencer o utilitário
   do Tailwind sem depender da ordem de carregamento; se este CSS estiver em
   cache antiga, o fallback é o padding confortável do HTML. */
@media (display-mode: standalone) and (pointer: coarse) {
  header.app-bar {
    padding-left:  calc(5px + env(safe-area-inset-left));
    padding-right: calc(5px + env(safe-area-inset-right));
  }
  main.app-main {
    padding-left:  calc(5px + env(safe-area-inset-left));
    padding-right: calc(5px + env(safe-area-inset-right));
  }
}