/* Mobile operations workspace. Loaded last to keep every admin screen usable at phone width. */
html:root body main#app#app#app.app-shell:not(.hidden) .admin-mobile-select,
html:root body main#app#app#app.app-shell:not(.hidden) .tenants-v2-mobile-filters {
  display: none;
}

@media (max-width: 760px) {
  html:root body main#app#app#app.app-shell:not(.hidden) {
    --mobile-surface: #ffffff;
    --mobile-surface-raised: #f5f9fc;
    --mobile-border: #d5e2ec;
    --mobile-text: #173247;
    --mobile-muted: #63798b;
    --mobile-accent: #176fc7;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100svh !important;
    padding: calc(62px + env(safe-area-inset-top, 0px)) 8px calc(82px + env(safe-area-inset-bottom, 0px)) !important;
    overflow: visible !important;
  }

  html:root[data-theme="dark"] body main#app#app#app.app-shell:not(.hidden) {
    --mobile-surface: #101b24;
    --mobile-surface-raised: #14232e;
    --mobile-border: #294052;
    --mobile-text: #f2f7fb;
    --mobile-muted: #a5b6c4;
    --mobile-accent: #69adf5;
  }

  html:root,
  html:root body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: clip !important;
    overscroll-behavior-y: auto !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) > header.app-header {
    position: fixed !important;
    z-index: 4800 !important;
    inset: 0 0 auto !important;
    display: flex !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;
    align-items: flex-end !important;
    padding: calc(6px + env(safe-area-inset-top, 0px)) 12px 6px !important;
    overflow: hidden !important;
    border: 0 !important;
    border-bottom: 1px solid var(--mobile-border) !important;
    border-radius: 0 !important;
    background: color-mix(in srgb, var(--mobile-surface) 97%, transparent) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .14) !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) > header.app-header .brand-lockup,
  html:root body main#app#app#app.app-shell:not(.hidden) > header.app-header [data-admin-logo-logout] {
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) !important;
    width: auto !important;
    max-width: calc(100% - 8px) !important;
    min-width: 0 !important;
    min-height: 42px !important;
    align-items: center !important;
    gap: 9px !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) > header.app-header .brand-mark,
  html:root body main#app#app#app.app-shell:not(.hidden) > header.app-header .app-house-logo {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    border-radius: 7px !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) > header.app-header .app-kicker,
  html:root body main#app#app#app.app-shell:not(.hidden) > header.app-header small,
  html:root body main#app#app#app.app-shell:not(.hidden) > header.app-header .header-actions {
    display: none !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) > header.app-header h1 {
    margin: 0 !important;
    overflow: hidden !important;
    color: var(--mobile-text) !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.app-shell:not(.hidden) .page:not(.hidden),
  html:root body main#app#app#app.app-shell:not(.hidden) .page:not(.hidden) > *,
  html:root body main#app#app#app.app-shell:not(.hidden) .page:not(.hidden) :is(.grid, .two-columns) {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  html:root body main#app#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 max(8px, env(safe-area-inset-right, 0px)) max(6px, env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px)) !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 520px !important;
    height: 62px !important;
    min-height: 62px !important;
    margin: 0 auto !important;
    padding: 4px !important;
    gap: 2px !important;
    overflow: hidden !important;
    border: 1px solid var(--mobile-border) !important;
    border-radius: 16px !important;
    background: color-mix(in srgb, var(--mobile-surface) 96%, transparent) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .24) !important;
    transform: none !important;
    backdrop-filter: blur(18px) saturate(1.08) !important;
  }

  html:root body main#app#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: 21px 12px !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 52px !important;
    min-height: 52px !important;
    place-items: center !important;
    align-content: center !important;
    gap: 3px !important;
    margin: 0 !important;
    padding: 4px 1px 3px !important;
    overflow: hidden !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    color: var(--mobile-muted) !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
  }

  html:root body main#app#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.app-shell:not(.hidden) nav#admin-bottom-nav.portal-bottom-nav.admin-bottom-nav > button.menu-open {
    border-color: color-mix(in srgb, var(--mobile-accent) 24%, transparent) !important;
    color: var(--mobile-accent) !important;
    background: color-mix(in srgb, var(--mobile-accent) 13%, transparent) !important;
    box-shadow: none !important;
  }

  html:root[data-theme="dark"] body main#app#app#app.app-shell:not(.hidden) > nav#admin-bottom-nav.portal-bottom-nav.admin-bottom-nav > button.active,
  html:root[data-theme="dark"] body main#app#app#app.app-shell:not(.hidden) > nav#admin-bottom-nav.portal-bottom-nav.admin-bottom-nav > button.menu-open {
    border-color: rgba(105, 173, 245, .26) !important;
    color: #8fc3ff !important;
    background: rgba(35, 127, 223, .13) !important;
    box-shadow: none !important;
  }

  html:root body main#app#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.app-shell:not(.hidden) nav#admin-bottom-nav.portal-bottom-nav.admin-bottom-nav > button.menu-open::before {
    position: absolute !important;
    inset: 2px 50% auto auto !important;
    display: block !important;
    width: 20px !important;
    height: 3px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: currentColor !important;
    content: "" !important;
    transform: translateX(50%) !important;
  }

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

  html:root body main#app#app#app.app-shell:not(.hidden) nav#admin-bottom-nav.portal-bottom-nav.admin-bottom-nav > button > span:last-child {
    width: 100% !important;
    overflow: hidden !important;
    font-size: .59rem !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.admin-mobile-input-active main#app#app#app.app-shell:not(.hidden) nav#admin-bottom-nav.portal-bottom-nav.admin-bottom-nav {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(120%) !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) .admin-mobile-select {
    display: grid !important;
    min-width: 0 !important;
    gap: 5px !important;
    color: var(--mobile-muted) !important;
    font-size: .64rem !important;
    font-weight: 800 !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) .admin-mobile-select > span {
    line-height: 1 !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) .admin-mobile-select select {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 8px 34px 8px 10px !important;
    border: 1px solid var(--mobile-border) !important;
    border-radius: 8px !important;
    color: var(--mobile-text) !important;
    background-color: var(--mobile-surface-raised) !important;
    box-shadow: none !important;
    font-size: .78rem !important;
    font-weight: 750 !important;
  }

  /* Rooms: one complete card per gesture, with a compact property picker. */
  html:root body main#app#app#app.app-shell:not(.hidden) #rooms .admin-room-location-rail {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 8px !important;
    margin: 0 0 10px !important;
    padding: 9px !important;
    border: 1px solid var(--mobile-border) !important;
    border-radius: 8px !important;
    background: var(--mobile-surface) !important;
    box-shadow: none !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) #rooms .admin-room-mobile-property-picker {
    width: 100% !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) #rooms .admin-room-location-label,
  html:root body main#app#app#app.app-shell:not(.hidden) #rooms .admin-room-location-pills,
  html:root body main#app#app#app.app-shell:not(.hidden) #rooms .admin-room-location-controls {
    display: none !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) #rooms .admin-room-location-tools {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) #rooms .admin-room-location-summary {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100% !important;
    padding: 0 !important;
    border: 0 !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) #rooms .admin-room-location-summary > span {
    min-width: 0 !important;
    padding: 4px 6px !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) #rooms .admin-room-location-summary > span + span {
    border-left: 1px solid var(--mobile-border) !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) #rooms .admin-room-catalog-shell {
    display: grid !important;
    gap: 10px !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) #rooms .admin-room-catalog-section {
    width: 100% !important;
    min-width: 0 !important;
    gap: 8px !important;
    padding: 10px 0 12px !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) #rooms .admin-room-section-head {
    min-height: 42px !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 2px !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) #rooms .admin-room-section-head h2 {
    margin: 0 !important;
    font-size: 1.02rem !important;
    line-height: 1.15 !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) #rooms .admin-room-section-head p {
    max-width: none !important;
    margin: 3px 0 0 !important;
    font-size: .66rem !important;
    line-height: 1.2 !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) #rooms .public-stay-row-controls button {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    border-radius: 8px !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) #rooms .admin-room-catalog-carousel {
    grid-auto-columns: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 8px !important;
    padding: 1px 0 4px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    scroll-padding-inline: 0 !important;
    overscroll-behavior-x: contain !important;
    touch-action: pan-x pan-y !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) #rooms .admin-room-catalog-card {
    width: 100% !important;
    min-width: 0 !important;
    border-radius: 8px !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) #rooms .admin-room-card-body {
    padding: 10px !important;
    gap: 8px !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) #rooms .admin-room-card-actions {
    grid-template-columns: .8fr 1.35fr .8fr !important;
    gap: 6px !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) #rooms .admin-room-card-actions > * {
    min-width: 0 !important;
    min-height: 38px !important;
    padding: 6px 4px !important;
    overflow-wrap: anywhere !important;
    font-size: .65rem !important;
    line-height: 1.05 !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) #rooms .admin-room-carousel-range-wrap {
    min-height: 15px !important;
    padding: 0 1px !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) #rooms .admin-room-carousel-range {
    height: 14px !important;
  }

  /* Payments: prevent wide carousel content from expanding the page itself. */
  html:root body main#app#app#app.app-shell:not(.hidden) #payments,
  html:root body main#app#app#app.app-shell:not(.hidden) #payments .admin-payment-groups-shell,
  html:root body main#app#app#app.app-shell:not(.hidden) #payments .admin-payment-carousel-section,
  html:root body main#app#app#app.app-shell:not(.hidden) #payments .admin-payment-property-section,
  html:root body main#app#app#app.app-shell:not(.hidden) #payments .admin-room-section-head,
  html:root body main#app#app#app.app-shell:not(.hidden) #payments .admin-payment-carousel {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) #payments .admin-payment-groups-shell {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    margin: 12px 0 !important;
    overflow: hidden !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) #payments .admin-payment-carousel-section {
    margin: 10px 0 !important;
    padding: 10px !important;
    overflow: hidden !important;
    border-radius: 8px !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) #payments .admin-room-section-head {
    display: flex !important;
    min-height: 0 !important;
    align-items: flex-start !important;
    gap: 8px !important;
    margin: 0 0 9px !important;
    padding: 0 !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) #payments .admin-room-section-head > div {
    min-width: 0 !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) #payments .admin-room-section-head h2 {
    margin: 0 !important;
    font-size: 1.08rem !important;
    line-height: 1.2 !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) #payments .admin-room-section-head p {
    max-width: none !important;
    margin: 4px 0 0 !important;
    font-size: .69rem !important;
    line-height: 1.35 !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) #payments .admin-carousel-controls button {
    display: grid !important;
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    place-items: center !important;
    padding: 0 !important;
    border: 1px solid var(--mobile-border) !important;
    border-radius: 8px !important;
    color: var(--mobile-accent) !important;
    background: var(--mobile-surface-raised) !important;
    box-shadow: none !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) #payments .admin-carousel-controls {
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    gap: 5px !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) #payments .admin-carousel-controls svg {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    stroke-width: 2.25 !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) #payments .admin-payment-carousel {
    grid-auto-columns: 100% !important;
    gap: 8px !important;
    padding: 1px 0 3px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    touch-action: pan-x pan-y !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) #payments .admin-payment-card {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    gap: 10px !important;
    padding: 13px !important;
    border-radius: 8px !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) #payments .admin-card-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) #payments .admin-card-actions > * {
    min-width: 0 !important;
    min-height: 40px !important;
    padding: 7px 5px !important;
    white-space: normal !important;
  }

  /* Tenants: replace two clipped button rails with two compact selectors. */
  html:root body main#app#app#app.app-shell:not(.hidden) #tenants .tenants-v2 {
    gap: 9px !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) #tenants .tenants-v2-intro {
    gap: 8px !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) #tenants .tenants-v2-intro h2 {
    font-size: 1.35rem !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) #tenants .tenants-v2-intro-actions > button {
    min-height: 40px !important;
    padding: 7px 9px !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) #tenants .tenants-v2-kpis {
    gap: 6px !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) #tenants .tenants-v2-kpis > article {
    min-height: 76px !important;
    gap: 3px !important;
    padding: 9px !important;
    border-radius: 8px !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) #tenants .tenants-v2-kpis strong {
    font-size: 1.16rem !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) #tenants .tenants-v2-kpis span,
  html:root body main#app#app#app.app-shell:not(.hidden) #tenants .tenants-v2-kpis small {
    font-size: .6rem !important;
    line-height: 1.2 !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) #tenants .tenants-v2-list-panel {
    overflow: hidden !important;
    border-radius: 8px !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) #tenants .tenants-v2-toolbar {
    display: grid !important;
    gap: 7px !important;
    padding: 8px !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) #tenants .tenants-v2-mobile-filters {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) #tenants .tenants-v2-status-filter,
  html:root body main#app#app#app.app-shell:not(.hidden) #tenants .tenants-v2-location-filter {
    display: none !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) #tenants .tenants-v2-row {
    grid-template-columns: minmax(0, 1fr) minmax(104px, .48fr) !important;
    gap: 7px 9px !important;
    padding: 10px !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) #tenants .tenants-v2-person {
    grid-column: 1 / -1 !important;
    min-width: 0 !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) #tenants .tenants-v2-avatar {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) #tenants .tenants-v2-person strong,
  html:root body main#app#app#app.app-shell:not(.hidden) #tenants .tenants-v2-person small {
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) #tenants .tenants-v2-assignment-state {
    grid-column: 1 !important;
    grid-row: auto !important;
    min-width: 0 !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) #tenants .tenants-v2-rent {
    grid-column: 2 !important;
    grid-row: 2 !important;
    min-width: 0 !important;
    text-align: right !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) #tenants .tenants-v2-assignment-state strong,
  html:root body main#app#app#app.app-shell:not(.hidden) #tenants .tenants-v2-assignment-state small,
  html:root body main#app#app#app.app-shell:not(.hidden) #tenants .tenants-v2-rent strong,
  html:root body main#app#app#app.app-shell:not(.hidden) #tenants .tenants-v2-rent > span {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) #tenants .tenants-v2-documents {
    grid-column: 1 / -1 !important;
    gap: 5px !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) #tenants .tenants-v2-documents span {
    min-height: 25px !important;
    padding: 4px 7px !important;
    font-size: .59rem !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) #tenants .tenants-v2-row-actions {
    grid-column: 1 / -1 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) #tenants .tenants-v2-row-actions > * {
    min-height: 38px !important;
    padding: 6px 8px !important;
  }

  /* Settings: use one selector instead of a partially visible tab rail. */
  html:root body main#app#app#app.app-shell:not(.hidden) #settings .settings-v2 {
    gap: 9px !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) #settings .settings-v2-nav {
    display: none !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) #settings .settings-v2-mobile-select {
    padding: 8px !important;
    border: 1px solid var(--mobile-border) !important;
    border-radius: 8px !important;
    background: var(--mobile-surface) !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) #settings .settings-v2-intro h2 {
    font-size: 1.35rem !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) #settings .settings-v2-intro-actions {
    gap: 7px !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) #settings .settings-v2-card,
  html:root body main#app#app#app.app-shell:not(.hidden) #settings .settings-v2-integration-card,
  html:root body main#app#app#app.app-shell:not(.hidden) #settings .settings-v2-health-card,
  html:root body main#app#app#app.app-shell:not(.hidden) #settings .settings-v2-status-list {
    border-radius: 8px !important;
  }

  /* Calendar and secondary pages: compact commands without hiding them. */
  html:root body main#app#app#app.app-shell:not(.hidden) #calendar .cool-page-head {
    gap: 9px !important;
    padding: 2px 1px 7px !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) #calendar .cool-page-head h1 {
    font-size: 1.55rem !important;
    line-height: 1.1 !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) #calendar .cool-page-head p {
    font-size: .72rem !important;
    line-height: 1.4 !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) #calendar .cool-page-head > .actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    gap: 7px !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) #calendar .cool-page-head > .actions > * {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 40px !important;
    justify-content: center !important;
    padding: 7px 8px !important;
    text-align: center !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) #calendar .cool-page-head > .actions > :nth-child(3) {
    grid-column: 1 / -1 !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) #calendar .google-calendar-card,
  html:root body main#app#app#app.app-shell:not(.hidden) #calendar .calendar-event-form,
  html:root body main#app#app#app.app-shell:not(.hidden) #calendar .cool-calendar-widget {
    padding: 10px !important;
    border-radius: 8px !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) #calendar .google-calendar-toolbar {
    gap: 9px !important;
    padding: 10px !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) #calendar .google-calendar-help {
    padding: 8px 10px 10px !important;
    font-size: .67rem !important;
    line-height: 1.35 !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) #calendar .google-calendar-frame-wrap,
  html:root body main#app#app#app.app-shell:not(.hidden) #calendar .google-calendar-frame {
    min-height: 520px !important;
    height: 520px !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) #reports .grid.stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) #reports .grid.stats .stat {
    min-height: 100px !important;
    padding: 11px !important;
    border-radius: 8px !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) #reports .grid.stats .stat strong {
    font-size: 1.18rem !important;
    overflow-wrap: anywhere !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) #documents > .card,
  html:root body main#app#app#app.app-shell:not(.hidden) #documents .card,
  html:root body main#app#app#app.app-shell:not(.hidden) #expenses .card,
  html:root body main#app#app#app.app-shell:not(.hidden) #reports .card {
    border-radius: 8px !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) #expenses > .two-columns {
    gap: 10px !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) #expenses .collapsible-form > summary {
    min-height: 62px !important;
    padding: 13px !important;
  }
}

@media (max-width: 360px) {
  html:root body main#app#app#app.app-shell:not(.hidden) {
    padding-inline: 6px !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) #tenants .tenants-v2-mobile-filters {
    grid-template-columns: minmax(0, 1fr) !important;
  }

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

@media (max-width: 760px) {
  html:root body main#app#app#app.app-shell:not(.hidden) #calendar .google-workspace-panel {
    grid-column: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) #calendar .google-workspace-card {
    padding: 0 !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) #calendar .google-workspace-toolbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    padding: 11px !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) #calendar .google-calendar-actions,
  html:root body main#app#app#app.app-shell:not(.hidden) #calendar .google-calendar-switcher {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) #calendar .google-calendar-account-menu,
  html:root body main#app#app#app.app-shell:not(.hidden) #calendar .google-calendar-account-menu[open] {
    grid-column: 1 !important;
    grid-row: auto !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) #calendar .google-workspace-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) #calendar .google-workspace-summary > span {
    padding: 9px !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) #calendar .google-workspace-columns {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) #calendar .google-workspace-pane {
    padding: 11px !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) #calendar .google-workspace-pane + .google-workspace-pane {
    border-top: 1px solid var(--ca-border, #d8e3ee) !important;
    border-left: 0 !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) #calendar .google-workspace-event-list,
  html:root body main#app#app#app.app-shell:not(.hidden) #calendar .google-workspace-task-list {
    max-height: 360px !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) #calendar .google-task-create {
    grid-template-columns: minmax(0, 1fr) 112px !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) #calendar .local-calendar-details > .calendar-month-card {
    margin: 0 !important;
    border: 0 !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) #calendar .local-calendar-details > .calendar-view-switcher {
    margin: 0 8px 10px !important;
  }

  .google-auth-login {
    min-height: 50px !important;
  }
}

@media (max-width: 390px) {
  html:root body main#app#app#app.app-shell:not(.hidden) #calendar .google-task-create {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html:root body main#app#app#app.app-shell:not(.hidden) #calendar .google-task-create select,
  html:root body main#app#app#app.app-shell:not(.hidden) #calendar .google-task-create button {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
}