/* Q10_MOBILE_REBUILD_CLEAN_V1 */
@media (max-width: 920px) {
  :root {
    --q10-mobile-bottom-safe: max(236px, calc(env(safe-area-inset-bottom, 0px) + 236px));
  }

  body.q10-mobile-app-fill,
  body.q10-mobile-app-fill #mainView,
  body.q10-mobile-app-fill #mainView.app-shell {
    background: #f4f8ff !important;
  }

  body.q10-mobile-app-fill #mainView.app-shell {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 10px !important;
    padding: 8px 10px max(12px, calc(env(safe-area-inset-bottom, 0px) + 12px)) 10px !important;
  }

  body.q10-mobile-app-fill #mainView .topbar {
    position: sticky !important;
    top: max(0px, env(safe-area-inset-top, 0px)) !important;
    z-index: 80 !important;
    border-radius: 8px !important;
    margin: 0 !important;
    padding: 12px !important;
    border: 1px solid var(--line, #d9e2ef) !important;
    background: var(--panel-strong, #ffffff) !important;
    box-shadow: 0 12px 26px rgba(15, 23, 42, .08) !important;
  }

  body.q10-mobile-app-fill #mainView .topbar .topbar-actions {
    gap: 8px !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
  }

  body.q10-mobile-app-fill #content {
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding: 2px 0 calc(var(--q10-mobile-bottom-safe) + 18px) !important;
    scroll-padding-bottom: calc(var(--q10-mobile-bottom-safe) + 18px) !important;
  }

  body.q10-mobile-app-fill #content > .panel:last-child,
  body.q10-mobile-app-fill #content > section.panel:last-child {
    min-height: 0 !important;
    height: auto !important;
  }

  body.q10-mobile-app-fill #content > * {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    flex: 0 0 auto !important;
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    float: none !important;
    clear: both !important;
    z-index: auto !important;
    margin: 0 !important;
  }

  body.q10-mobile-app-fill #content > * + * {
    margin-top: 12px !important;
  }

  body.q10-mobile-app-fill #content > .panel,
  body.q10-mobile-app-fill #content > section.panel,
  body.q10-mobile-app-fill #content > section.card,
  body.q10-mobile-app-fill #content .panel,
  body.q10-mobile-app-fill #content .card {
    border-radius: 8px !important;
    border: 1px solid rgba(37, 99, 235, .14) !important;
    background: #ffffff !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .07) !important;
    contain: none !important;
    isolation: isolate !important;
    overflow: visible !important;
  }

  body.q10-mobile-app-fill #content .section-head {
    margin-bottom: 12px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid rgba(37, 99, 235, .10) !important;
  }

  body.q10-mobile-app-fill #content .section-head h3 {
    font-size: 1.02rem !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
  }

  body.q10-mobile-app-fill #content .grid.two,
  body.q10-mobile-app-fill #content .grid.three,
  body.q10-mobile-app-fill #content .grid.cards,
  body.q10-mobile-app-fill #content .form-grid.two,
  body.q10-mobile-app-fill #content .form-grid.three,
  body.q10-mobile-app-fill #content .search-row {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  body.q10-mobile-app-fill #content .card.stat {
    min-height: 0 !important;
    height: auto !important;
  }

  body.q10-mobile-app-fill #content .table-wrap {
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    contain: none !important;
  }

  body.q10-mobile-app-fill #content .table-wrap table {
    min-width: 0 !important;
    width: 100% !important;
  }

  body.q10-mobile-app-fill #content input,
  body.q10-mobile-app-fill #content select,
  body.q10-mobile-app-fill #content textarea,
  body.q10-mobile-app-fill #content button {
    border-radius: 8px !important;
  }

  body.q10-mobile-app-fill #content textarea {
    min-height: 112px !important;
  }

  body.q10-mobile-app-fill .q10-role-backbar {
    position: relative !important;
    top: auto !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    z-index: auto !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.q10-launcher-mode.q10-mobile-app-fill #content > .panel {
    min-height: 0 !important;
    height: auto !important;
  }

  body.q10-launcher-mode.q10-mobile-app-fill .q10-role-launcher-wrap {
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
  }

  body.q10-launcher-mode.q10-mobile-app-fill .q10-role-launcher-grid {
    min-height: 0 !important;
    align-content: start !important;
    grid-auto-rows: minmax(112px, auto) !important;
  }

  body.q10-launcher-mode.q10-mobile-app-fill .q10-role-launcher-btn {
    min-height: 112px !important;
    height: auto !important;
  }

  body.q10-mobile-app-fill #q10PwaInstallFab,
  body.q10-mobile-app-fill #q10InstallFab,
  body.q10-mobile-app-fill .q10-pwa-install-fab,
  body.q10-mobile-app-fill .q10-install-fab {
    right: max(10px, calc(env(safe-area-inset-right, 0px) + 10px)) !important;
    bottom: max(56px, calc(env(safe-area-inset-bottom, 0px) + 56px)) !important;
    border-radius: 8px !important;
    max-width: calc(100vw - 20px) !important;
  }

  body.q10-mobile-app-fill .q10-global-copyright {
    bottom: max(8px, calc(env(safe-area-inset-bottom, 0px) + 8px)) !important;
    border-radius: 8px !important;
  }
}