/* Loaded after the main stylesheet so the mobile sheet stays calm and readable. */
html:root body main#app#app.app-shell:not(.hidden) #rooms .admin-room-catalog-carousel,
html:root body main#app#app.app-shell:not(.hidden) #rooms .admin-room-location-pills {
  scroll-snap-type: none !important;
  scroll-behavior: auto !important;
  overscroll-behavior-x: auto !important;
  -webkit-overflow-scrolling: touch;
  touch-action: auto !important;
}

/* Mobile action dock: centered, thumb-friendly and clear of Android system bars. */
@media (max-width: 760px) {
  html:root body main#app#app.app-shell:not(.hidden) {
    padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)) !important;
  }

  html:root body main#app#app.app-shell:not(.hidden) nav#admin-bottom-nav.portal-bottom-nav.admin-bottom-nav {
    inset: auto auto max(8px, env(safe-area-inset-bottom, 0px)) 50% !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    align-items: center !important;
    gap: 3px !important;
    width: min(calc(100% - 16px), 520px) !important;
    height: 68px !important;
    min-height: 68px !important;
    padding: 6px !important;
    overflow: hidden !important;
    border: 1px solid rgba(167, 190, 211, .68) !important;
    border-radius: 20px !important;
    background: rgba(255, 255, 255, .96) !important;
    box-shadow: 0 14px 34px rgba(20, 54, 84, .18), inset 0 1px rgba(255, 255, 255, .72) !important;
    transform: translateX(-50%) !important;
    backdrop-filter: blur(18px) saturate(1.12) !important;
  }

  html:root body main#app#app.app-shell:not(.hidden) nav#admin-bottom-nav.portal-bottom-nav.admin-bottom-nav > button {
    position: relative !important;
    display: grid !important;
    grid-template-rows: 23px 13px !important;
    place-items: center !important;
    align-content: center !important;
    gap: 3px !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 56px !important;
    min-height: 56px !important;
    margin: 0 !important;
    padding: 5px 2px !important;
    overflow: hidden !important;
    border: 1px solid transparent !important;
    border-radius: 15px !important;
    color: #657b8f !important;
    background: transparent !important;
    box-shadow: none !important;
    transition: color 150ms ease, background-color 150ms ease, box-shadow 150ms ease, transform 100ms ease !important;
  }

  html:root body main#app#app.app-shell:not(.hidden) nav#admin-bottom-nav.portal-bottom-nav.admin-bottom-nav > button.active,
  html:root body main#app#app.app-shell:not(.hidden) nav#admin-bottom-nav.portal-bottom-nav.admin-bottom-nav > button.menu-open {
    border-color: rgba(20, 104, 180, .22) !important;
    color: #ffffff !important;
    background: #176fc7 !important;
    box-shadow: 0 8px 18px rgba(23, 111, 199, .28), inset 0 1px rgba(255, 255, 255, .18) !important;
  }

  html:root body main#app#app.app-shell:not(.hidden) nav#admin-bottom-nav.portal-bottom-nav.admin-bottom-nav > button.active::before,
  html:root body main#app#app.app-shell:not(.hidden) nav#admin-bottom-nav.portal-bottom-nav.admin-bottom-nav > button.menu-open::before {
    display: none !important;
  }

  html:root body main#app#app.app-shell:not(.hidden) nav#admin-bottom-nav.portal-bottom-nav.admin-bottom-nav > button:focus-visible {
    outline: 2px solid #67aaf0 !important;
    outline-offset: -2px !important;
  }

  html:root body main#app#app.app-shell:not(.hidden) nav#admin-bottom-nav.portal-bottom-nav.admin-bottom-nav > button:active {
    transform: scale(.96) !important;
  }

  html:root body main#app#app.app-shell:not(.hidden) nav#admin-bottom-nav.portal-bottom-nav.admin-bottom-nav .portal-nav-icon {
    width: 21px !important;
    min-width: 21px !important;
    height: 21px !important;
    min-height: 21px !important;
    margin: 0 auto !important;
  }

  html:root body main#app#app.app-shell:not(.hidden) nav#admin-bottom-nav.portal-bottom-nav.admin-bottom-nav > button > span:last-child {
    width: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
    font-size: .66rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 340px) {
  html:root body main#app#app.app-shell:not(.hidden) nav#admin-bottom-nav.portal-bottom-nav.admin-bottom-nav {
    width: calc(100% - 10px) !important;
    height: 64px !important;
    min-height: 64px !important;
    gap: 1px !important;
    padding: 5px !important;
    border-radius: 18px !important;
  }

  html:root body main#app#app.app-shell:not(.hidden) nav#admin-bottom-nav.portal-bottom-nav.admin-bottom-nav > button {
    height: 52px !important;
    min-height: 52px !important;
    padding-inline: 1px !important;
    border-radius: 13px !important;
  }

  html:root body main#app#app.app-shell:not(.hidden) nav#admin-bottom-nav.portal-bottom-nav.admin-bottom-nav > button > span:last-child {
    font-size: .6rem !important;
  }
}

html:root body main#app#app.app-shell:not(.hidden) #rooms .admin-room-catalog-card {
  scroll-snap-align: none !important;
  scroll-snap-stop: normal !important;
}

@media (max-width: 760px) {
  html.native-android-app,
  html.native-android-app body {
    overscroll-behavior-y: auto !important;
  }

  html.native-android-app body {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    touch-action: auto !important;
  }

  html.native-android-app body main#app#app.app-shell:not(.hidden) #rooms .room-photo-tools {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
  }

  html.native-android-app body main#app#app.app-shell:not(.hidden) #rooms .room-photo-tools > * {
    width: 100% !important;
  }

  html.native-android-app body main#app#app.app-shell:not(.hidden) #rooms .room-photo-gallery-button {
    order: 0 !important;
    min-height: 44px !important;
    padding: 10px 12px !important;
    font-size: .82rem !important;
    font-weight: 800 !important;
  }

  html.native-android-app body main#app#app.app-shell:not(.hidden) #rooms .room-photo-dropzone,
  html.native-android-app body main#app#app.app-shell:not(.hidden) #rooms .room-photo-drag-hint {
    display: none !important;
  }

  html:root body main#app#app.app-shell:not(.hidden) .admin-mobile-menu .admin-mobile-menu-backdrop {
    border: 0 !important;
    border-radius: 0 !important;
    background: rgba(10, 28, 42, .48) !important;
    box-shadow: none !important;
  }

  html:root body main#app#app.app-shell:not(.hidden) .admin-mobile-menu .admin-mobile-menu-close {
    border: 1px solid #d7e3ec !important;
    border-radius: 50% !important;
    color: #27485f !important;
    background: #f5f9fc !important;
    box-shadow: none !important;
  }

  html:root body main#app#app.app-shell:not(.hidden) .admin-mobile-menu .admin-mobile-menu-grid > button {
    border: 1px solid #dce7f1 !important;
    border-radius: 7px !important;
    color: #27485f !important;
    background: #f8fbfd !important;
    box-shadow: none !important;
    transform: none !important;
  }

  html:root body main#app#app.app-shell:not(.hidden) .admin-mobile-menu .admin-mobile-menu-grid > button.active {
    border-color: #9dc7e4 !important;
    color: #0968a9 !important;
    background: #eaf4fb !important;
  }
}

/* Final compact mobile shell. This file loads last so old layout locks cannot reclaim space. */
@media (max-width: 760px) {
  html:root,
  html:root body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: clip !important;
  }

  html:root body main#app#app.app-shell:not(.hidden) {
    width: 100% !important;
    max-width: none !important;
    min-height: 100svh !important;
    margin: 0 !important;
    padding: calc(64px + env(safe-area-inset-top, 0px)) 10px calc(66px + env(safe-area-inset-bottom, 0px)) !important;
    overflow: visible !important;
  }

  html:root body main#app#app.app-shell:not(.hidden) > header.app-header {
    position: fixed !important;
    inset: 0 0 auto 0 !important;
    z-index: 4800 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: center !important;
    width: 100% !important;
    height: calc(56px + env(safe-area-inset-top, 0px)) !important;
    min-height: calc(56px + env(safe-area-inset-top, 0px)) !important;
    max-height: calc(56px + env(safe-area-inset-top, 0px)) !important;
    margin: 0 !important;
    padding: calc(6px + env(safe-area-inset-top, 0px)) 12px 6px !important;
    overflow: hidden !important;
    border: 0 !important;
    border-bottom: 1px solid #dce7f1 !important;
    border-radius: 0 !important;
    background: rgba(255, 255, 255, .98) !important;
    box-shadow: 0 5px 18px rgba(22, 43, 58, .08) !important;
  }

  html:root body main#app#app.app-shell:not(.hidden) > header.app-header .brand-lockup,
  html:root body main#app#app.app-shell:not(.hidden) > header.app-header [data-admin-logo-logout] {
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 9px !important;
    width: min(100%, 360px) !important;
    min-width: 0 !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    background: transparent !important;
  }

  html:root body main#app#app.app-shell:not(.hidden) > header.app-header .brand-mark,
  html:root body main#app#app.app-shell:not(.hidden) > header.app-header .app-house-logo,
  html:root body main#app#app.app-shell:not(.hidden) > header.app-header [data-admin-logo-logout] .brand-mark {
    grid-row: auto !important;
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    border-radius: 6px !important;
    box-shadow: 0 6px 16px rgba(22, 43, 58, .12) !important;
  }

  html:root body main#app#app.app-shell:not(.hidden) > header.app-header .app-kicker,
  html:root body main#app#app.app-shell:not(.hidden) > header.app-header small,
  html:root body main#app#app.app-shell:not(.hidden) > header.app-header [data-admin-logo-logout]::after,
  html:root body main#app#app.app-shell:not(.hidden) > header.app-header .header-actions,
  html:root body main#app#app.app-shell:not(.hidden) #tabs.tabbar,
  html:root body main#app#app.app-shell:not(.hidden) #side-panel,
  html:root body main#app#app.app-shell:not(.hidden) #admin-topbar {
    display: none !important;
    visibility: hidden !important;
  }

  html:root body main#app#app.app-shell:not(.hidden) > header.app-header h1,
  html:root body main#app#app.app-shell:not(.hidden) > header.app-header [data-admin-logo-logout] h1 {
    margin: 0 !important;
    overflow: hidden !important;
    color: #173247 !important;
    font-size: 1rem !important;
    line-height: 1.1 !important;
    letter-spacing: 0 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html:root body main#app#app.app-shell:not(.hidden) .page:not(.hidden) {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    overflow: visible !important;
  }

  html:root body main#app#app.app-shell:not(.hidden) nav#admin-bottom-nav.portal-bottom-nav.admin-bottom-nav {
    position: fixed !important;
    z-index: 5000 !important;
    inset: auto 0 0 0 !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    justify-items: stretch !important;
    gap: 2px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: calc(58px + env(safe-area-inset-bottom, 0px)) !important;
    min-height: calc(58px + env(safe-area-inset-bottom, 0px)) !important;
    margin: 0 !important;
    padding: 3px max(6px, env(safe-area-inset-right, 0px)) max(3px, env(safe-area-inset-bottom, 0px)) max(6px, env(safe-area-inset-left, 0px)) !important;
    overflow: hidden !important;
    border: 0 !important;
    border-top: 1px solid #dce7f1 !important;
    border-radius: 0 !important;
    background: rgba(255, 255, 255, .98) !important;
    box-shadow: 0 -5px 18px rgba(22, 43, 58, .1) !important;
  }

  html:root body main#app#app.app-shell:not(.hidden) nav#admin-bottom-nav.portal-bottom-nav.admin-bottom-nav > button {
    display: grid !important;
    grid-template-rows: 21px 13px !important;
    place-items: center !important;
    align-content: center !important;
    gap: 2px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 50px !important;
    min-height: 50px !important;
    margin: 0 !important;
    padding: 3px 1px !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html:root body main#app#app.app-shell:not(.hidden) nav#admin-bottom-nav.portal-bottom-nav.admin-bottom-nav .portal-nav-icon {
    width: 20px !important;
    min-width: 20px !important;
    height: 20px !important;
    min-height: 20px !important;
    margin: 0 auto !important;
  }

  html:root body main#app#app.app-shell:not(.hidden) nav#admin-bottom-nav.portal-bottom-nav.admin-bottom-nav > button > span:last-child {
    width: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
    font-size: .61rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html:root body main#app#app.app-shell:not(.hidden) .admin-mobile-menu-sheet {
    max-height: min(84svh, 640px) !important;
    border-radius: 8px 8px 0 0 !important;
  }

  html:root body main#app#app.app-shell:not(.hidden) .admin-mobile-menu-head {
    min-height: 60px !important;
    padding: 17px 14px 9px !important;
  }

  html:root body main#app#app.app-shell:not(.hidden) .admin-mobile-menu-groups {
    gap: 12px !important;
    padding: 12px 12px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
  }

  html:root body main#app#app.app-shell:not(.hidden) #rooms .room-photo-manager,
  html:root body main#app#app.app-shell:not(.hidden) #rooms .room-photo-carousel,
  html:root body main#app#app.app-shell:not(.hidden) #rooms .room-photo-stage {
    min-width: 0 !important;
  }

  html:root body main#app#app.app-shell:not(.hidden) #rooms .room-photo-thumbs {
    touch-action: pan-x !important;
    overscroll-behavior-x: contain !important;
  }

  html:root body main#app#app.app-shell:not(.hidden) #rooms .room-photo-thumb {
    flex: 0 0 68px !important;
    width: 68px !important;
    height: 52px !important;
    min-height: 52px !important;
  }

  html:root body main#app#app.app-shell:not(.hidden) #rooms .room-photo-crop {
    border-radius: 7px !important;
  }

  html:root body main#app#app.app-shell:not(.hidden) #rooms .room-photo-crop-hint {
    bottom: 7px !important;
    min-height: 26px !important;
    font-size: .69rem !important;
  }
}