/* ========================================================================
   Oficina Portátil V75.6
   iOS Safari — sidebar Liquid Glass real + Frota usando o topo útil
   ======================================================================== */

@media (max-width: 820px) {
  /*
   * SIDEBAR MOBILE WEB
   * A lateral deixa de ser um painel opaco e passa a amostrar os pixels reais
   * que estão atrás dela. O alpha é propositalmente baixo para que o
   * -webkit-backdrop-filter do Safari tenha conteúdo real para desfocar.
   */
  html:not(.op-apk) .app-shell > .sidebar {
    background: rgba(2, 36, 45, .64) !important;
    background:
      linear-gradient(155deg,
        color-mix(in srgb, var(--sidebar) 63%, transparent),
        color-mix(in srgb, var(--sidebar) 48%, transparent)) !important;
    -webkit-backdrop-filter: blur(34px) saturate(1.55) contrast(1.03) !important;
    backdrop-filter: blur(34px) saturate(1.55) contrast(1.03) !important;
    border-right: 1px solid rgba(255,255,255,.13) !important;
    box-shadow:
      inset -1px 0 0 rgba(255,255,255,.035),
      18px 0 54px rgba(0,18,24,.20) !important;
    isolation: auto !important;
  }

  html:not(.op-apk)[data-theme="light"] .app-shell > .sidebar {
    background: rgba(3, 44, 54, .60) !important;
    background:
      linear-gradient(155deg,
        color-mix(in srgb, #073d49 58%, transparent),
        color-mix(in srgb, #062d38 49%, transparent)) !important;
  }

  html:not(.op-apk)[data-theme="dark"] .app-shell > .sidebar {
    background: rgba(1, 18, 23, .67) !important;
    background:
      linear-gradient(155deg,
        rgba(4,34,40,.69),
        rgba(1,17,22,.61)) !important;
  }

  /* Os próprios controles também ganham vidro, sem virar blocos opacos. */
  html:not(.op-apk) .sidebar .profile-mini,
  html:not(.op-apk) .sidebar .navigation button.active,
  html:not(.op-apk) .sidebar .mobile-close {
    background: rgba(255,255,255,.10) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.35) !important;
    backdrop-filter: blur(16px) saturate(1.35) !important;
    border: 1px solid rgba(255,255,255,.09) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
  }

  html:not(.op-apk) .sidebar .navigation button:not(.active):hover,
  html:not(.op-apk) .sidebar .navigation button:not(.active):focus-visible {
    background: rgba(255,255,255,.075) !important;
  }

  /*
   * SCRIM
   * O resto do site continua visível atrás da lateral e é borrado em tempo
   * real. Reduzimos o véu preto antigo para não parecer uma imagem congelada.
   */
  html:not(.op-apk) .scrim {
    background: rgba(0, 18, 24, .16) !important;
    -webkit-backdrop-filter: blur(9px) saturate(1.25) !important;
    backdrop-filter: blur(9px) saturate(1.25) !important;
  }

  /* ----------------------------------------------------------------------
     FROTA — não desperdiça uma faixa inteira abaixo da topbar no iPhone.
     ---------------------------------------------------------------------- */
  body[data-op-native-open="frota"] .app-shell > .workspace > main {
    padding-top: 6px !important;
  }

  body[data-op-native-open="frota"] #op-native-root,
  body[data-op-native-open="frota"] #op-native-root > .op-native-page[data-native-page="frota"],
  body[data-op-native-open="frota"] .op-frota-page,
  body[data-op-native-open="frota"] .op-frota-shell {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  body[data-op-native-open="frota"] #op-native-root > .op-native-page[data-native-page="frota"] {
    transform: none !important;
  }

  body[data-op-native-open="frota"] .op-frota-search-card {
    margin-top: 0 !important;
  }
}

/* iPhones pequenos: encosta ainda mais a pesquisa na barra sem colar. */
@media (max-width: 480px) {
  body[data-op-native-open="frota"] .app-shell > .workspace > main {
    padding-top: 2px !important;
  }
}