/*
 * Área útil e toque móvel — v6.9.29-R4
 * mobile-safe-area-v6929r4
 *
 * Mantém cabeçalho, menu e conteúdo fora das áreas reservadas do sistema
 * em iOS/iPadOS e Android, inclusive em modo PWA standalone e paisagem.
 */
:root {
  --cambiare-safe-top: env(safe-area-inset-top, 0px);
  --cambiare-safe-right: env(safe-area-inset-right, 0px);
  --cambiare-safe-bottom: env(safe-area-inset-bottom, 0px);
  --cambiare-safe-left: env(safe-area-inset-left, 0px);
}

html,
body {
  min-height: 100%;
  min-height: 100dvh;
}

@media (max-width: 860px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .app-shell {
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
  }

  /*
   * O afastamento é aplicado ao contêiner principal, não apenas ao título.
   * Assim alertas, formulários e cartões também respeitam recortes laterais.
   */
  .main {
    min-height: 100vh;
    min-height: 100dvh;
    padding-top: calc(var(--cambiare-safe-top) + 10px) !important;
    padding-right: max(18px, calc(var(--cambiare-safe-right) + 14px)) !important;
    padding-bottom: max(24px, calc(var(--cambiare-safe-bottom) + 18px)) !important;
    padding-left: max(18px, calc(var(--cambiare-safe-left) + 14px)) !important;
  }

  .topbar {
    position: relative;
    z-index: 25;
    min-height: 88px !important;
    padding: 0 !important;
    align-items: center !important;
    gap: 14px !important;
    overflow: visible;
  }

  .topbar > div:not(.security-chip) {
    min-width: 0;
  }

  .topbar h1 {
    max-width: 100%;
    line-height: 1.08;
    overflow-wrap: anywhere;
  }

  /* Área física de toque de 56 x 56 px, acima do mínimo móvel de 44 px. */
  .menu-button {
    position: relative !important;
    z-index: 30 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 56px !important;
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 14px !important;
    pointer-events: auto !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
    isolation: isolate;
  }

  .menu-button [data-menu-icon] {
    display: block;
    font-size: 22px !important;
    line-height: 1 !important;
    pointer-events: none;
  }

  /*
   * O menu lateral também precisa respeitar relógio/câmera e indicador inferior.
   * left:-110vw garante que larguras maiores não deixem uma faixa visível.
   */
  .sidebar {
    top: 0 !important;
    left: -110vw !important;
    width: min(88vw, 320px) !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    padding-top: max(24px, calc(var(--cambiare-safe-top) + 18px)) !important;
    padding-right: max(18px, calc(var(--cambiare-safe-right) + 14px)) !important;
    padding-bottom: max(22px, calc(var(--cambiare-safe-bottom) + 18px)) !important;
    padding-left: max(18px, calc(var(--cambiare-safe-left) + 14px)) !important;
    z-index: 40 !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .sidebar.open {
    left: 0 !important;
  }

  body.mobile-menu-open::after {
    inset: 0 !important;
    z-index: 35 !important;
  }

  .content,
  .footer {
    width: 100%;
    max-width: 100%;
  }

  .footer {
    padding-bottom: var(--cambiare-safe-bottom);
  }

  /* Login e instalação também respeitam as quatro áreas seguras. */
  .auth-page,
  .install-page {
    min-height: 100vh;
    min-height: 100dvh;
    padding-top: max(18px, calc(var(--cambiare-safe-top) + 12px)) !important;
    padding-right: max(15px, calc(var(--cambiare-safe-right) + 12px)) !important;
    padding-bottom: max(18px, calc(var(--cambiare-safe-bottom) + 12px)) !important;
    padding-left: max(15px, calc(var(--cambiare-safe-left) + 12px)) !important;
  }
}

@media (max-width: 560px) {
  .main {
    padding-right: max(14px, calc(var(--cambiare-safe-right) + 12px)) !important;
    padding-left: max(14px, calc(var(--cambiare-safe-left) + 12px)) !important;
  }

  .topbar {
    min-height: 86px !important;
  }
}

@media (orientation: landscape) and (max-height: 560px) {
  .main {
    padding-top: calc(var(--cambiare-safe-top) + 6px) !important;
  }

  .topbar {
    min-height: 72px !important;
  }

  .sidebar {
    width: min(72vw, 320px) !important;
  }
}