/* ========================================================================
   Oficina Portátil V75.45
   - restaura Liquid Glass realtime em popups/topbar/sidebar
   - neutraliza mudança de material durante scroll no Safari iOS
   - mantém Notificações dentro da viewport
   - corrige responsividade do Aprovisionamento
   ======================================================================== */

/* ------------------------------------------------------------------------
   1) POPUPS: Aparência / Notificações / Perfil / Globo
   Material volta a ser o mesmo do Popup Glass Lab, sem base sólida extra.
   ------------------------------------------------------------------------ */
html body :is(
  .op-appearance-popover,
  .op-profile-popover,
  .sap-global-overlay .sap-global-modal
),
html body .notification-portal-host > .notification-popover {
  opacity: 1 !important;
  background-color: transparent !important;
  background-image:
    radial-gradient(120% 80% at 0% 0%, rgba(255,255,255,.12), transparent 44%),
    radial-gradient(90% 70% at 100% 100%, color-mix(in srgb,var(--accent) 13%,transparent), transparent 52%),
    linear-gradient(145deg,
      rgba(var(--op-pg-base-rgb), var(--op-pg-opacity)),
      rgba(var(--op-pg-base-rgb), calc(var(--op-pg-opacity) * .52))
    ) !important;
  -webkit-backdrop-filter:
    blur(var(--op-pg-blur))
    saturate(var(--op-pg-saturation))
    contrast(var(--op-pg-contrast)) !important;
  backdrop-filter:
    blur(var(--op-pg-blur))
    saturate(var(--op-pg-saturation))
    contrast(var(--op-pg-contrast)) !important;
  border-width: var(--op-pg-border-width) !important;
  border-style: solid !important;
  border-color: transparent !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,var(--op-pg-inner-highlight)),
    inset 0 -1px 0 rgba(0,0,0,calc(var(--op-pg-inner-highlight) * .18)),
    0 var(--op-pg-shadow-y) var(--op-pg-shadow-blur)
      rgba(var(--op-pg-shadow-rgb),var(--op-pg-shadow-opacity)) !important;
}

.notification-portal-host .notification-popover > header,
.notification-portal-host .notification-popover > section,
.notification-portal-host .notification-popover > section > button {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.notification-portal-host .notification-popover > header,
.notification-portal-host .notification-popover > section {
  background: transparent !important;
}
.notification-portal-host .notification-popover > section > button {
  background: transparent !important;
  box-shadow: none !important;
}
.notification-portal-host .notification-popover > section > button.unread {
  background: color-mix(in srgb,var(--accent) 6%,transparent) !important;
}

/* ------------------------------------------------------------------------
   2) SAFARI iOS: não troca o vidro por uma placa verde/opaca ao rolar.
   A V75.26 adiciona background-color .78/.82 e sobe para .84/.88 no scroll.
   Esta camada final zera SOMENTE essa base sólida e reaplica o core real.
   ------------------------------------------------------------------------ */
html.op-ios-safari :is(
  .app-shell > .workspace > .topbar,
  .app-shell > .sidebar
) {
  background-color: transparent !important;
  background-image:
    radial-gradient(120% 80% at 0% 0%, rgba(255,255,255,calc(var(--op-lg-refraction-alpha) + .02)), transparent 44%),
    radial-gradient(90% 70% at 100% 100%, color-mix(in srgb,var(--accent) calc(var(--op-lg-refraction) * 1%),transparent), transparent 52%),
    linear-gradient(145deg,
      rgba(var(--op-lg-base-rgb),var(--op-lg-opacity)),
      rgba(var(--op-lg-base-rgb),calc(var(--op-lg-opacity) * .52))
    ) !important;
  -webkit-backdrop-filter:
    blur(var(--op-lg-blur))
    saturate(var(--op-lg-saturation))
    contrast(var(--op-lg-contrast)) !important;
  backdrop-filter:
    blur(var(--op-lg-blur))
    saturate(var(--op-lg-saturation))
    contrast(var(--op-lg-contrast)) !important;
}

/* Estado de scroll = EXATAMENTE o mesmo material do estado parado. */
html.op-ios-safari.op-ios-safari-scrolling :is(
  .app-shell > .workspace > .topbar,
  .app-shell > .sidebar,
  .notification-portal-host > .notification-popover,
  .op-appearance-popover,
  .op-profile-popover,
  .sap-global-overlay .sap-global-modal
) {
  background-color: transparent !important;
}

html.op-ios-safari :is(
  .notification-portal-host > .notification-popover,
  .op-appearance-popover,
  .op-profile-popover,
  .sap-global-overlay .sap-global-modal
) {
  background-color: transparent !important;
  -webkit-backdrop-filter:
    blur(var(--op-pg-blur))
    saturate(var(--op-pg-saturation))
    contrast(var(--op-pg-contrast)) !important;
  backdrop-filter:
    blur(var(--op-pg-blur))
    saturate(var(--op-pg-saturation))
    contrast(var(--op-pg-contrast)) !important;
}

/* Compositor estável sem alterar transform da sidebar. */
html.op-ios-safari .app-shell > .workspace > .topbar,
html.op-ios-safari :is(
  .notification-portal-host > .notification-popover,
  .op-appearance-popover,
  .op-profile-popover
) {
  isolation: isolate !important;
  -webkit-backface-visibility: hidden !important;
  backface-visibility: hidden !important;
  will-change: opacity, -webkit-backdrop-filter, backdrop-filter !important;
}

/* ------------------------------------------------------------------------
   3) NOTIFICAÇÕES MOBILE: portal sempre acima da UI e dentro da viewport.
   JS V75.45 calcula a posição considerando visualViewport do Safari.
   ------------------------------------------------------------------------ */
@media (max-width: 820px), (hover:none) and (pointer:coarse) {
  body .notification-portal-host {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    z-index: 2147483000 !important;
    pointer-events: none !important;
    overflow: visible !important;
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  body .notification-portal-host > .notification-popover {
    position: fixed !important;
    right: auto !important;
    width: min(410px, calc(100vw - 20px)) !important;
    max-width: calc(100vw - 20px) !important;
    max-height: min(620px, calc(100dvh - env(safe-area-inset-top, 0px) - 24px)) !important;
    overflow: hidden !important;
    pointer-events: auto !important;
    z-index: 1 !important;
  }

  body .notification-portal-host > .notification-popover > section {
    max-height: min(510px, calc(100dvh - env(safe-area-inset-top, 0px) - 118px)) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
}

/* ------------------------------------------------------------------------
   4) APROVISIONAMENTO MOBILE
   ------------------------------------------------------------------------ */
@media (max-width: 820px) {
  .provisioning-page,
  .provisioning-page > *,
  .withdrawal-modern,
  .withdrawal-modern > * {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .provisioning-page {
    overflow-x: clip !important;
  }

  /* 3 abas sempre dentro da largura útil. */
  .provisioning-tabs {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 4px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 5px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .provisioning-tabs > button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;
    padding: 0 5px !important;
    gap: 5px !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    font-size: clamp(10px, 3.25vw, 13px) !important;
    line-height: 1 !important;
  }

  .provisioning-tabs > button svg {
    width: 15px !important;
    height: 15px !important;
    min-width: 15px !important;
    flex: 0 0 15px !important;
  }

  .withdrawal-modern {
    padding: clamp(14px, 4vw, 20px) !important;
  }

  /* Título de materiais ocupa a linha inteira; botão fica compacto abaixo. */
  .withdrawal-materials > header {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .withdrawal-materials > header > div {
    width: 100% !important;
    min-width: 0 !important;
    display: block !important;
  }

  .withdrawal-materials > header h3 {
    width: 100% !important;
    margin: 0 !important;
  }

  .withdrawal-materials > header > button.secondary {
    align-self: flex-start !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 42px !important;
    padding: 0 15px !important;
    gap: 7px !important;
    font-size: 13px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
  }

  .withdrawal-materials > header > button.secondary svg {
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;
  }
}

@media (max-width: 380px) {
  .provisioning-tabs > button {
    font-size: 10px !important;
    gap: 3px !important;
    padding-inline: 3px !important;
  }
  .provisioning-tabs > button svg {
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    flex-basis: 14px !important;
  }
}