/*
  Ultracell v20.33 — Mobile App Like Shell
  Camada final e segura: não remove CSS antigo, apenas consolida a experiência mobile
  do ADM/Vendedor com aparência de aplicativo instalado.
*/

@media (max-width: 760px) {
  :root {
    --uc-app-max-width: 430px;
    --uc-safe-top: env(safe-area-inset-top, 0px);
    --uc-safe-bottom: env(safe-area-inset-bottom, 0px);
    --uc-app-bg: #eef2f7;
    --uc-app-card: #ffffff;
    --uc-app-text: #0f172a;
    --uc-app-muted: #64748b;
    --uc-app-line: rgba(226, 232, 240, .95);
    --uc-app-dark: #050505;
    --uc-app-radius-xl: 28px;
    --uc-app-radius-lg: 22px;
    --uc-app-touch: 48px;
    --uc-app-bottom-nav-height: 82px;
  }

  html,
  body {
    width: 100%;
    min-height: 100%;
    margin: 0;
    overflow-x: hidden !important;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body.uc-mobile-app-active {
    background: var(--uc-app-bg) !important;
    color: var(--uc-app-text);
    overscroll-behavior-y: none;
  }

  body.uc-mobile-app-active #app {
    width: 100%;
    min-height: 100dvh;
    display: flex;
    justify-content: center;
    background: var(--uc-app-bg) !important;
  }

  body.uc-backoffice-mobile-app-active .uc-mobile-app-page,
  body.uc-backoffice-mobile-app-active .official-mobile-page.uc-mobile-app-page {
    width: 100%;
    min-height: 100dvh;
    display: flex;
    justify-content: center;
    background:
      radial-gradient(circle at top, rgba(255,255,255,.95) 0, rgba(238,242,247,.98) 42%, #e8edf4 100%) !important;
    overflow-x: hidden !important;
  }

  body.uc-backoffice-mobile-app-active .uc-mobile-app-phone,
  body.uc-backoffice-mobile-app-active .official-mobile-phone.uc-mobile-app-phone {
    width: min(100vw, var(--uc-app-max-width)) !important;
    min-height: 100dvh !important;
    max-width: var(--uc-app-max-width) !important;
    margin: 0 auto !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  body.uc-backoffice-mobile-app-active .uc-mobile-app-screen,
  body.uc-backoffice-mobile-app-active .official-mobile-screen.uc-mobile-app-screen {
    width: 100% !important;
    min-height: 100dvh !important;
    height: auto !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    background: transparent !important;
    border-radius: 0 !important;
  }

  body.uc-backoffice-mobile-app-active .uc-mobile-app-topbar,
  body.uc-backoffice-mobile-app-active .uc-adm-v3-top.uc-mobile-app-topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 65 !important;
    padding: calc(10px + var(--uc-safe-top)) 14px 10px !important;
    background: rgba(238, 242, 247, .92) !important;
    border-bottom: 1px solid rgba(226, 232, 240, .78) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }

  body.uc-backoffice-mobile-app-active .uc-mobile-app-topbar-inner,
  body.uc-backoffice-mobile-app-active .uc-adm-v3-bar.uc-mobile-app-topbar-inner {
    min-height: 62px !important;
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) 48px !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 10px !important;
    border-radius: 24px !important;
    background: var(--uc-app-dark) !important;
    color: #fff !important;
    box-shadow: 0 16px 35px rgba(15, 23, 42, .18) !important;
  }

  body.uc-backoffice-mobile-app-active .uc-mobile-app-icon-btn,
  body.uc-backoffice-mobile-app-active .uc-adm-v3-menu-btn.uc-mobile-app-icon-btn {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    border: 0 !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,.12) !important;
    color: #fff !important;
    display: grid !important;
    place-items: center !important;
    font-size: 22px !important;
    font-weight: 900 !important;
    -webkit-tap-highlight-color: transparent;
  }

  body.uc-backoffice-mobile-app-active .uc-mobile-app-title,
  body.uc-backoffice-mobile-app-active .uc-adm-v3-logo.uc-mobile-app-title {
    min-width: 0 !important;
    text-align: center !important;
    line-height: 1.05 !important;
  }

  body.uc-backoffice-mobile-app-active .uc-mobile-app-title strong,
  body.uc-backoffice-mobile-app-active .uc-adm-v3-logo.uc-mobile-app-title strong {
    display: block !important;
    font-size: clamp(18px, 5.2vw, 21px) !important;
    font-weight: 1000 !important;
    color: #fff !important;
    letter-spacing: -.02em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body.uc-backoffice-mobile-app-active .uc-mobile-app-title span,
  body.uc-backoffice-mobile-app-active .uc-adm-v3-logo.uc-mobile-app-title span {
    display: block !important;
    margin-top: 5px !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    color: rgba(255,255,255,.72) !important;
    letter-spacing: .15em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body.uc-backoffice-mobile-app-active .uc-mobile-app-user,
  body.uc-backoffice-mobile-app-active .uc-adm-v3-user.uc-mobile-app-user {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    border-radius: 18px !important;
    background: linear-gradient(145deg, #facc15, #f97316) !important;
    color: #111827 !important;
    display: grid !important;
    place-items: center !important;
    font-size: 14px !important;
    font-weight: 1000 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.45) !important;
  }

  body.uc-backoffice-mobile-app-active .uc-mobile-app-content,
  body.uc-backoffice-mobile-app-active .official-mobile-content.uc-mobile-app-content,
  body.uc-backoffice-mobile-app-active .uc-adm-v3-content.uc-mobile-app-content {
    flex: 1 1 auto !important;
    width: 100% !important;
    padding: 14px 14px calc(var(--uc-app-bottom-nav-height) + 22px + var(--uc-safe-bottom)) !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
  }

  body.uc-backoffice-mobile-app-active .official-mobile-panel,
  body.uc-backoffice-mobile-app-active .official-admin-panel,
  body.uc-backoffice-mobile-app-active .official-admin-card,
  body.uc-backoffice-mobile-app-active .official-admin-list-card,
  body.uc-backoffice-mobile-app-active .settings-mobile-card,
  body.uc-backoffice-mobile-app-active .panel {
    border-radius: var(--uc-app-radius-xl) !important;
    border: 1px solid var(--uc-app-line) !important;
    background: rgba(255,255,255,.96) !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .07) !important;
  }

  body.uc-backoffice-mobile-app-active .official-admin-section-head h2,
  body.uc-backoffice-mobile-app-active .section-title h2,
  body.uc-backoffice-mobile-app-active .section-title h3 {
    font-size: clamp(19px, 5vw, 24px) !important;
    line-height: 1.08 !important;
    letter-spacing: -.03em !important;
  }

  body.uc-backoffice-mobile-app-active .official-admin-section-head p,
  body.uc-backoffice-mobile-app-active .inline-note,
  body.uc-backoffice-mobile-app-active .small-text {
    font-size: 13px !important;
    line-height: 1.45 !important;
  }

  body.uc-backoffice-mobile-app-active input,
  body.uc-backoffice-mobile-app-active select,
  body.uc-backoffice-mobile-app-active textarea,
  body.uc-backoffice-mobile-app-active .input,
  body.uc-backoffice-mobile-app-active .select,
  body.uc-backoffice-mobile-app-active .textarea {
    min-height: 50px !important;
    border-radius: 18px !important;
    font-size: 16px !important;
  }

  body.uc-backoffice-mobile-app-active button,
  body.uc-backoffice-mobile-app-active .btn {
    min-height: 46px;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  body.uc-backoffice-mobile-app-active .official-admin-action-grid,
  body.uc-backoffice-mobile-app-active .admin-tools-grid,
  body.uc-backoffice-mobile-app-active .footer-actions {
    gap: 10px !important;
  }

  body.uc-backoffice-mobile-app-active .uc-mobile-app-bottom-nav {
    position: fixed !important;
    left: 50% !important;
    bottom: 0 !important;
    z-index: 75 !important;
    transform: translateX(-50%) !important;
    width: min(100vw, var(--uc-app-max-width)) !important;
    display: grid !important;
    grid-template-columns: repeat(var(--uc-mobile-nav-count, 5), minmax(0, 1fr)) !important;
    gap: 6px !important;
    padding: 8px 12px calc(8px + var(--uc-safe-bottom)) !important;
    background: rgba(255,255,255,.97) !important;
    border-top: 1px solid var(--uc-app-line) !important;
    box-shadow: 0 -14px 28px rgba(15, 23, 42, .09) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  body.uc-backoffice-mobile-app-active .uc-mobile-app-bottom-btn {
    min-width: 0 !important;
    min-height: 58px !important;
    border: 0 !important;
    border-radius: 19px !important;
    background: transparent !important;
    color: var(--uc-app-muted) !important;
    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    gap: 3px !important;
    padding: 6px 3px !important;
    font-size: 11px !important;
    font-weight: 950 !important;
    line-height: 1.05 !important;
  }

  body.uc-backoffice-mobile-app-active .uc-mobile-app-bottom-btn strong {
    display: block !important;
    font-size: 20px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
  }

  body.uc-backoffice-mobile-app-active .uc-mobile-app-bottom-btn span {
    max-width: 100% !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  body.uc-backoffice-mobile-app-active .uc-mobile-app-bottom-btn.is-active {
    background: #111827 !important;
    color: #fff !important;
    box-shadow: 0 10px 22px rgba(17, 24, 39, .22) !important;
  }

  body.modal-open .uc-mobile-app-bottom-nav,
  body:has(.modal) .uc-mobile-app-bottom-nav {
    opacity: 0 !important;
    pointer-events: none !important;
  }

  body.uc-backoffice-mobile-app-active .modal,
  body.uc-backoffice-mobile-app-active .mobile-sheet-modal {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  body.uc-backoffice-mobile-app-active .modal-card,
  body.uc-backoffice-mobile-app-active .mobile-sheet-modal .modal-card {
    width: min(100vw, var(--uc-app-max-width)) !important;
    max-width: var(--uc-app-max-width) !important;
    max-height: min(92dvh, 860px) !important;
    margin: 0 auto !important;
    border-radius: 28px 28px 0 0 !important;
    overflow: hidden !important;
  }

  body.uc-backoffice-mobile-app-active .product-form-panel,
  body.uc-backoffice-mobile-app-active .grid.grid-2.product-form-panel {
    grid-template-columns: 1fr !important;
  }

  body.uc-backoffice-mobile-app-active .catalog-dev-notice-image,
  body.uc-mobile-app-active .catalog-dev-notice-image {
    width: 100% !important;
    aspect-ratio: 16 / 6 !important;
    max-height: 180px !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 22px !important;
  }
}

@media (max-width: 360px) {
  body.uc-backoffice-mobile-app-active .uc-mobile-app-content,
  body.uc-backoffice-mobile-app-active .official-mobile-content.uc-mobile-app-content,
  body.uc-backoffice-mobile-app-active .uc-adm-v3-content.uc-mobile-app-content {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  body.uc-backoffice-mobile-app-active .uc-mobile-app-topbar,
  body.uc-backoffice-mobile-app-active .uc-adm-v3-top.uc-mobile-app-topbar {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  body.uc-backoffice-mobile-app-active .official-mobile-panel,
  body.uc-backoffice-mobile-app-active .official-admin-panel,
  body.uc-backoffice-mobile-app-active .official-admin-card,
  body.uc-backoffice-mobile-app-active .official-admin-list-card,
  body.uc-backoffice-mobile-app-active .panel {
    border-radius: 22px !important;
  }

  body.uc-backoffice-mobile-app-active .uc-mobile-app-bottom-nav {
    gap: 4px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  body.uc-backoffice-mobile-app-active .uc-mobile-app-bottom-btn {
    border-radius: 16px !important;
    font-size: 10px !important;
  }
}