/* Phone UX for OnePlus 9RT-class Android Chrome (~360–412 × 740–915, 20:9, gesture bar).
   Loaded last so it wins the guest-home / experience-v2 / usability CSS war. */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

button, a, input, select, textarea, summary, label {
  touch-action: manipulation;
}

@media (max-width: 900px) {
  :root {
    --phone-safe-bottom: max(12px, env(safe-area-inset-bottom, 0px));
    --phone-safe-top: max(8px, env(safe-area-inset-top, 0px));
    --phone-dock: 118px;
    --phone-dock-bar: 76px;
    --phone-sheet-bottom: calc(var(--phone-dock-bar) + max(8px, var(--app-chrome-bottom, 0px)));
  }

  .boot,
  .login-shell,
  .app-shell,
  .guest-domain-body,
  .guest-domain-home,
  .auth-shell,
  .account-boot {
    min-height: 100vh;
    min-height: 100dvh;
    min-height: 100svh;
  }

  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="color"]):not([type="image"]),
  select,
  textarea {
    font-size: 16px !important;
    line-height: 1.35;
  }

  .button,
  .button.small-btn,
  .small-btn,
  .icon-button,
  .mobile-menu,
  .close-button,
  .login-action,
  .google-login,
  .google-button,
  .auth-submit,
  .primary-button,
  .search-button,
  .hero-primary,
  .select-category,
  .guest-menu-toggle,
  .guest-menu-book,
  .guest-menu-close,
  .content-book,
  .content-login,
  .site-header .nav-book,
  .site-header .nav-login,
  .login-mode-link,
  .view-tabs button,
  .ops-day-tabs button,
  .passbook-tabs button,
  .settings-nav button,
  .cashfree-tabs button,
  .plan-switch span,
  .public-date-trigger,
  .je-date-trigger,
  .availability-preview button,
  .room-picker-stay button,
  .room-picker-empty button,
  .room-picker-price button,
  .room-choice,
  .booking-sheet button,
  .room-picker-card button,
  .secondary-button,
  .primary-link,
  .guest-menu-toggle {
    min-height: 44px !important;
  }

  /* Stay rows: keep Check in / Extend / Cancel as one compact chip row. */
  .app-shell .ops-row-meta .button,
  .app-shell .ops-row-meta .button.small-btn,
  .app-shell .ops-row-meta .small-btn {
    min-height: 34px !important;
    height: 34px;
    padding: 0 9px !important;
    font-size: 12px !important;
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .icon-button,
  .mobile-menu,
  .close-button,
  .guest-menu-close,
  .due-picker [data-picker-close] {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }

  /* Admin: footer dock is the only persistent nav. Left hamburger is duplicate. */
  .app-shell #mobile-menu,
  .app-shell .mobile-context {
    display: none !important;
  }
  .app-shell .topbar {
    padding-top: max(0px, env(safe-area-inset-top, 0px));
    padding-left: 12px !important;
    padding-right: 12px !important;
    height: auto !important;
    min-height: 56px;
    flex-wrap: nowrap !important;
    gap: 8px;
    overflow: visible !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .app-shell .search {
    order: 0 !important;
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0;
    max-width: none !important;
  }

  /* More sheet fills the space above the dock so every group can be reached. */
  .app-shell .sidebar {
    inset: auto 0 var(--phone-sheet-bottom) 0 !important;
    top: auto !important;
    left: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: none !important;
    height: calc(var(--app-overlay-height, 100svh) - var(--phone-dock-bar) - 16px) !important;
    max-height: calc(var(--app-overlay-height, 100svh) - var(--phone-dock-bar) - 16px) !important;
    transform: translate3d(0, calc(100% + 96px), 0) !important;
    border-radius: 22px 22px 16px 16px !important;
    padding: 12px 14px 12px !important;
    box-shadow: 0 -18px 40px rgba(31, 8, 14, .28);
    z-index: 90;
    overflow: hidden !important;
    transition: transform .18s ease;
  }
  .app-shell .sidebar-brand,
  .app-shell .sidebar-footer {
    flex: 0 0 auto !important;
  }
  .app-shell .sidebar-menu {
    flex: 1 1 0% !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px !important;
  }
  .app-shell .sidebar.open {
    transform: translate3d(0, 0, 0) !important;
  }
  .app-shell .nav-backdrop {
    z-index: 80;
    background: rgba(29, 8, 13, .45);
  }
  .app-shell .sidebar.open + .nav-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  /* Admin: keep the dock above OxygenOS / Chrome gesture chrome. */
  .mobile-dock {
    left: 10px !important;
    right: 10px !important;
    bottom: max(8px, var(--app-chrome-bottom, 0px), var(--phone-safe-bottom)) !important;
    min-height: 64px;
    padding: 6px 6px 8px;
    z-index: 95;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .mobile-dock button {
    min-height: 52px !important;
    font-size: 11px !important;
    gap: 2px;
  }
  .mobile-dock button b { font-size: 17px; }
  .mobile-dock button[data-mobile-more][aria-expanded="true"] {
    background: rgba(255, 255, 255, .14);
    color: #fff;
  }
  body.overlay-open .mobile-dock {
    display: none !important;
  }
  .app-shell .sidebar-footer {
    display: grid;
    gap: 8px;
    flex: 0 0 auto;
    padding-top: 10px;
    background: inherit;
    box-shadow: 0 -16px 24px rgba(31, 8, 14, .28);
  }
  .app-shell .sidebar-sign-out {
    width: 100% !important;
    min-height: 48px !important;
    border: 0;
    border-radius: 12px;
    font-weight: 800;
  }
  body.overlay-open .drawer,
  body.overlay-open .modal {
    z-index: 140 !important;
    background: #fffdf9 !important;
  }
  body.overlay-open .drawer-backdrop,
  body.overlay-open .modal-backdrop {
    z-index: 130 !important;
  }
  body.overlay-open .drawer-form,
  body.overlay-open .drawer-body {
    background: #fffdf9;
  }
  body.overlay-open .due-picker-backdrop {
    z-index: 150 !important;
  }
  body.overlay-open .due-picker {
    z-index: 160 !important;
    inset: 0 0 var(--app-chrome-bottom, 0px) 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: var(--app-overlay-height, 100svh) !important;
    max-height: var(--app-overlay-height, 100svh) !important;
    border-radius: 0;
  }
  .guest-document-preview {
    display: block;
    width: 100%;
    max-height: min(70dvh, 520px);
    object-fit: contain;
    background: #111;
    border-radius: 12px;
  }
  .app-shell .content {
    padding-bottom: calc(var(--phone-dock) + env(safe-area-inset-bottom, 0px)) !important;
  }
  .app-shell .search,
  .app-shell .search-results {
    overflow: visible;
    z-index: 1200;
  }
  .toast-region {
    bottom: calc(var(--phone-dock) + 8px) !important;
  }

  .toolbar input,
  .toolbar select,
  .search input,
  .app-shell .search input,
  .field input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
  .field select,
  .field textarea,
  .je-calendar-selects select,
  .je-time-selects select,
  .app-shell .field input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
  .app-shell .field select,
  .app-shell .field textarea,
  .app-shell .je-date-trigger {
    min-height: 48px !important;
    font-size: 16px !important;
  }

  /* Compact in-card tariffs/radios. 48px field inputs made the 26-room
     picker overflow and Android Chrome scrolled the whole sheet off-screen. */
  .field .group-rate-input input,
  .field .group-rate-input input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
  .booking-group-room-panel .group-rate-input input,
  .booking-group-room-panel.field .group-rate-input input,
  .app-shell .field .group-rate-input input,
  .app-shell .field .group-rate-input input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
  .top-level-overlay .field .group-rate-input input,
  .top-level-overlay:not(.guest-account-workspace) .field .group-rate-input input:not([type="checkbox"]):not([type="radio"]) {
    min-height: 28px !important;
    height: 28px !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    padding: 0 4px !important;
  }
  .booking-scope-options input,
  .group-room-option > input[type="checkbox"] {
    min-height: 0 !important;
    width: 18px !important;
    height: 18px !important;
  }
  .group-room-option > input[type="checkbox"] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    min-height: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .app-shell .search input {
    text-overflow: ellipsis;
  }

  .table-wrap,
  .calendar-wrap,
  .page-actions,
  .toolbar,
  .compare-wrap {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .unit-tile strong { font-size: 12px; }
  .unit-tile .unit-guest { font-size: 11px; }
  .unit-tile .unit-status { font-size: 10px; text-transform: capitalize; }

  /* Login: form first, story compact, no 390px story pushing PIN off-screen. */
  .login-shell {
    display: flex !important;
    flex-direction: column;
    min-height: 100dvh;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .login-panel {
    order: 1 !important;
    width: calc(100% - 24px) !important;
    margin: 16px auto 20px !important;
    padding: 22px 18px !important;
  }
  .login-story {
    order: 2 !important;
    min-height: 0 !important;
    gap: 16px !important;
    padding: 22px 20px calc(24px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .login-copy h1 { font-size: 32px !important; line-height: 1.08 !important; }
  .login-copy p { font-size: 14px; }
  .login-panel h2 { font-size: 24px !important; }
  .story-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .pin-fallback .role-choice { min-height: 64px; }

  .drawer,
  .drawer.top-level-overlay:not(.guest-account-workspace) {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100svh !important;
    max-height: 100svh !important;
    height: var(--app-overlay-height, 100svh) !important;
    max-height: var(--app-overlay-height, 100svh) !important;
    left: 0 !important;
    right: 0 !important;
    overflow: hidden !important;
    overflow: clip !important;
    overscroll-behavior: none;
    border-radius: 16px 16px 0 0 !important;
  }
  .drawer-form {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  .drawer > .drawer-head,
  .drawer > .modal-head {
    flex: 0 0 auto !important;
  }
  .drawer-body,
  .modal-body,
  .drawer-form > .drawer-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .drawer-foot,
  .modal .drawer-foot,
  .top-level-overlay:not(.guest-account-workspace) .drawer-foot {
    position: relative !important;
    bottom: auto !important;
    flex: 0 0 auto !important;
    z-index: 8;
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    flex-wrap: unset;
    background: #fffdf9 !important;
    padding: 12px 14px max(16px, env(safe-area-inset-bottom, 0px)) !important;
    gap: 8px;
  }
  .drawer-foot .button {
    min-height: 48px !important;
    width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
    white-space: normal;
  }
  .drawer-foot .button:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
  .team-access-form .drawer-foot,
  .drawer-foot.team-access-foot {
    display: grid !important;
    grid-template-columns: 1fr;
    position: relative !important;
    bottom: auto !important;
  }
  .team-access-foot .button.primary {
    flex: 1 1 100% !important;
    width: 100% !important;
    min-height: 52px !important;
  }

  .booking-scope-options { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .booking-scope-options b,
  .booking-scope-options small,
  .group-room-option b,
  .group-room-option small,
  .kyc-participant-buttons button span,
  .kyc-participant-buttons button b,
  .kyc-participant-buttons button small,
  .passbook-actions .button {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    overflow-wrap: anywhere;
  }
  .kyc-participant-buttons {
    display: grid !important;
    grid-template-columns: 1fr !important;
    overflow: visible !important;
  }
  .kyc-participant-buttons button {
    min-width: 0 !important;
    width: 100%;
  }
  .app-shell .page-actions .button {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
  }
  .group-room-head p { display: none; }
  .group-room-head h3 { font-size: 14px !important; }
  .group-room-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-height: min(38dvh, 280px) !important;
  }
  .extension-quote.nightly-quote { gap: 6px; }
  .nightly-quote span { padding: 8px 8px; }
  .nightly-quote small { font-size: 8px; }
  .nightly-quote strong { font-size: 12px; }
  .modal,
  .modal.ops-action-modal,
  .modal.top-level-overlay:not(.guest-account-workspace) {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: 0 !important;
    transform: none !important;
    height: auto !important;
    max-height: var(--app-overlay-height, 100svh) !important;
    overflow: hidden !important;
    overflow: clip !important;
    overscroll-behavior: none;
    border-radius: 16px 16px 0 0 !important;
  }
  .modal.ops-action-modal,
  .modal:has(.drawer-foot) {
    height: var(--app-overlay-height, 100svh) !important;
  }
  .modal > .modal-head,
  .modal > .drawer-head {
    flex: 0 0 auto !important;
  }
  .modal > form,
  .modal > .drawer-form {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  .modal .modal-body {
    padding-bottom: 18px !important;
  }
  .modal.top-level-overlay:not(.guest-account-workspace) .drawer-foot,
  .modal.ops-action-modal .drawer-foot,
  .personal-transaction .drawer-foot {
    position: relative !important;
    bottom: auto !important;
  }
  .transaction-choices > div {
    grid-template-columns: 1fr !important;
  }
  .transaction-choice span {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .transaction-choice b,
  .transaction-choice small {
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
  .personal-transaction .drawer-foot {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px !important;
  }
  .personal-transaction .drawer-foot .transaction-review {
    grid-column: 1 / -1;
  }
  .personal-transaction .drawer-foot .transaction-review > strong {
    font-size: 18px;
  }
  .personal-transaction .drawer-foot button,
  .personal-transaction .drawer-foot button.primary {
    width: 100% !important;
    flex: 1 1 auto !important;
    white-space: normal;
  }

  /* Guest home: kill leftover 980px hero and 9px Book/Log in. */
  body .hero,
  .hero {
    min-height: 0 !important;
    padding: 16px 16px 28px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px !important;
  }
  body .hero h1,
  .hero h1 {
    max-width: none !important;
    font-size: clamp(32px, 9vw, 40px) !important;
    line-height: 1.08 !important;
  }
  body .hero-intro,
  .hero-intro {
    margin: 10px 0 0 !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
  }
  body .hero .search-card,
  .hero .search-card,
  .search-card {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 16px !important;
    grid-template-columns: 1fr !important;
  }
  body .site-header,
  .site-header {
    position: relative !important;
    inset: auto !important;
    height: auto !important;
    min-height: 56px;
    padding: 10px 12px !important;
    border-radius: 0 !important;
  }
  body .site-header .nav-book,
  body .site-header .nav-login,
  .site-header .nav-book,
  .site-header .nav-login,
  body .content-header .content-book,
  body .content-header .content-login,
  .content-header .content-book,
  .content-header .content-login {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 44px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
    white-space: nowrap;
  }
  .form-field input,
  .form-field select,
  .search-card .form-field input,
  .search-card .form-field select,
  .booking-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  .booking-form select,
  .booking-sheet input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  .booking-sheet select {
    min-height: 48px !important;
    height: 48px !important;
    font-size: 16px !important;
  }
  .booking-form .group-rate-input input,
  .booking-sheet .group-rate-input input {
    min-height: 28px !important;
    height: 28px !important;
    font-size: 13px !important;
  }
  .public-date-trigger { min-height: 52px !important; align-items: flex-start; padding-block: 10px; }
  .public-date-value { font-size: 14px !important; white-space: normal !important; overflow: visible; line-height: 1.25; }
  .public-calendar-day,
  .je-calendar-day {
    min-height: 44px !important;
    font-size: 15px !important;
  }
  .search-button,
  .search-card .search-button {
    min-height: 52px !important;
    font-size: 15px !important;
  }
  .public-toast {
    bottom: max(16px, env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Content / rooms pages: keep Book + Log in, shrink the 680px hero. */
  .content-header {
    top: var(--phone-safe-top) !important;
    left: 8px !important;
    right: 8px !important;
    width: auto;
    height: auto !important;
    min-height: 56px !important;
    padding: 8px 10px !important;
  }
  .page-hero {
    min-height: 0 !important;
    padding: 88px 18px 36px !important;
  }
  .page-hero h1 {
    font-size: clamp(34px, 10vw, 46px) !important;
    line-height: 1.06 !important;
  }
  .content-header .content-login { display: inline-flex !important; }

  .guest-navigation-drawer {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .booking-sheet,
  .room-picker-sheet {
    max-height: 100dvh !important;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .room-picker-header {
    padding: 16px 16px 12px !important;
  }
  .room-picker-header h2 { font-size: 30px !important; }
  .room-picker-stay {
    grid-template-columns: minmax(0,1fr) auto !important;
    gap: 8px 12px !important;
    padding: 12px 16px !important;
  }
  .room-picker-stay-item:nth-child(2),
  .room-picker-stay-item:nth-child(3),
  .room-picker-stay div:nth-child(2),
  .room-picker-stay div:nth-child(3) {
    grid-column: 1 !important;
  }
  .room-picker-stay button,
  .room-picker-stay-edit {
    grid-column: 2 !important;
    grid-row: 1 / span 3 !important;
    align-self: center !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    white-space: nowrap;
  }
  .room-picker-card {
    grid-template-columns: 96px minmax(0,1fr) !important;
  }
  .room-picker-price {
    grid-column: 1 / -1 !important;
    border-left: 0 !important;
    border-top: 1px solid rgba(83,35,44,.15) !important;
    padding: 11px 0 0 !important;
    grid-template-columns: minmax(0,1fr) minmax(132px,max-content) !important;
  }
  .room-picker-price button {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    width: 100% !important;
    min-width: 132px !important;
    max-width: none;
    margin: 0 !important;
    white-space: nowrap;
  }

  .auth-shell { display: block; }
  .auth-story { padding: 16px 18px 8px !important; }
  .auth-panel { padding: 16px 18px calc(28px + env(safe-area-inset-bottom, 0px)) !important; }
  .auth-form input,
  .password-control input {
    min-height: 52px;
    font-size: 16px !important;
  }

  .account-header {
    padding-top: max(12px, env(safe-area-inset-top, 0px));
  }
  .account-nav a,
  .account-logout {
    min-height: 44px;
  }
}

@media (max-width: 700px) {
  .guest-account-workspace.rentok-reference-layout {
    height: 100dvh !important;
    padding-bottom: 0;
  }
  .guest-reference-actions {
    position: sticky;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 12;
    width: 100%;
    justify-content: space-around;
    padding: 8px 4px max(10px, env(safe-area-inset-bottom, 0px)) !important;
  }
  .guest-reference-actions button {
    min-height: 52px !important;
    min-width: 0;
    flex: 1 1 0;
    font-size: 16px;
  }
  .guest-reference-actions span { font-size: 11px; }
  .rentok-reference-layout .guest-account-content {
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .app-shell[data-current-view="today"] .operating-date,
  .app-shell[data-current-view="today"] .page-title p,
  .app-shell[data-current-view="dashboard"] .operating-date,
  .app-shell[data-current-view="dashboard"] .page-title p { display: none; }
  .app-shell[data-current-view="today"] .page-title h1,
  .app-shell[data-current-view="dashboard"] .page-title h1 { font-size: 22px; }
  .app-shell[data-current-view="today"] .page-head,
  .app-shell[data-current-view="dashboard"] .page-head { margin-bottom: 8px; gap: 8px; }
  .app-shell[data-current-view="today"] #page {
    display: flex;
    flex-direction: column;
  }
  .app-shell[data-current-view="today"] #page > * {
    flex: 0 0 auto;
  }
  .app-shell[data-current-view="today"] .page-head { order: 0; }
  .app-shell[data-current-view="today"] .ops-day-tabs {
    order: 1;
    overflow: visible;
    min-height: 48px;
  }
  .app-shell[data-current-view="today"] .ops-board-grid { order: 2; }
  .app-shell[data-current-view="today"] .ops-kpi-grid { order: 3; }
  .app-shell[data-current-view="today"] .kpi-card {
    min-height: 84px !important;
    padding: 10px 11px !important;
  }
  .app-shell[data-current-view="today"] .kpi-value { font-size: 22px !important; }

  /* Reservations: keep Calendar/List + New booking on one row so the grid is visible. */
  .app-shell[data-current-view="reservations"] .operating-date,
  .app-shell[data-current-view="reservations"] .page-title p { display: none; }
  .app-shell[data-current-view="reservations"] .page-title h1 { font-size: 22px; }
  .app-shell[data-current-view="reservations"] .page-head { margin-bottom: 8px; gap: 8px; }
  .app-shell[data-current-view="reservations"] .page-actions {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 8px;
    overflow: visible;
  }
  .app-shell[data-current-view="reservations"] .page-actions .view-tabs {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
  }
  .app-shell[data-current-view="reservations"] .page-actions .view-tabs button {
    flex: 1 1 0;
    min-width: 0;
  }
  .app-shell[data-current-view="reservations"] .page-actions > .button {
    width: auto !important;
    flex: 0 0 auto;
    padding: 0 12px !important;
    white-space: nowrap;
  }

  /* Guests: 4 Super Admin actions must wrap as a 2×2 grid, not squeeze/overlap. */
  .app-shell[data-current-view="guests"] .page-head { margin-bottom: 10px; gap: 10px; }
  .app-shell[data-current-view="guests"] .operating-date,
  .app-shell[data-current-view="guests"] .page-title p { display: none; }
  .app-shell[data-current-view="guests"] .page-title h1 { font-size: 22px; }
  .app-shell[data-current-view="guests"] .page-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
    overflow: visible;
  }
  .app-shell[data-current-view="guests"] .page-actions .button {
    width: 100% !important;
    flex: none !important;
    min-width: 0 !important;
    padding: 8px 10px !important;
    font-size: 13px !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    line-height: 1.25;
  }
  .app-shell[data-current-view="guests"] .table-card > .toolbar {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    flex-direction: unset !important;
  }
  .app-shell[data-current-view="guests"] .table-card > .toolbar input {
    grid-column: 1 / -1;
  }
  .app-shell[data-current-view="guests"] .table-card > .toolbar .topbar-spacer { display: none; }
  .app-shell[data-current-view="guests"] .table-card > .toolbar .status-badge {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .guest-list-wrap {
    overflow: visible !important;
  }
  .guest-list-wrap table,
  .guest-list-wrap tbody {
    display: block;
    width: 100%;
    min-width: 0 !important;
  }
  .guest-list-wrap thead { display: none; }
  .guest-list-wrap tr {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 10px;
    width: 100%;
    margin: 0 0 10px;
    padding: 12px 14px 14px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: #fff;
    box-sizing: border-box;
  }
  .guest-list-wrap td {
    display: block;
    width: auto !important;
    min-width: 0 !important;
    padding: 2px 0 !important;
    border: 0 !important;
    background: transparent !important;
  }
  .guest-list-wrap td:nth-child(1) { order: 1; grid-column: 1 / -1; }
  .guest-list-wrap td:nth-child(2) { order: 2; }
  .guest-list-wrap td:nth-child(4) { order: 3; justify-self: end; }
  .guest-list-wrap td:nth-child(3),
  .guest-list-wrap td:nth-child(5),
  .guest-list-wrap td:nth-child(6),
  .guest-list-wrap td:nth-child(7),
  .guest-list-wrap td:nth-child(8) { display: none; }
  .guest-list-wrap td:nth-child(9) {
    order: 8;
    grid-column: 1 / -1;
    position: static !important;
    box-shadow: none !important;
    background: transparent !important;
  }
  .guest-list-wrap .person { align-items: flex-start; min-width: 0; }
  .guest-list-wrap .person span { overflow: visible; white-space: normal; overflow-wrap: anywhere; }
  .guest-list-wrap .bulk-guest-dropdown { max-width: none; margin-top: 8px; }
  .guest-list-wrap .row-actions {
    display: flex;
    flex-wrap: wrap;
    min-width: 0 !important;
    justify-content: stretch;
  }
  .guest-list-wrap .row-actions .button { flex: 1 1 120px; }
  .guest-list-wrap tr:has(.empty) {
    display: block;
    padding: 22px 14px;
  }
  .guest-list-wrap tr:has(.empty) td { display: block; }

  /* Payments: same card rows as Guests — due/receipt tables were clipped off-screen. */
  .app-shell[data-current-view="payments"] .page-head { margin-bottom: 10px; gap: 10px; }
  .app-shell[data-current-view="payments"] .operating-date,
  .app-shell[data-current-view="payments"] .page-title p { display: none; }
  .app-shell[data-current-view="payments"] .page-title h1 { font-size: 22px; }
  .app-shell[data-current-view="payments"] .page-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
    overflow: visible;
  }
  .app-shell[data-current-view="payments"] .page-actions .button {
    width: 100% !important;
    flex: none !important;
    min-width: 0 !important;
    padding: 8px 10px !important;
    font-size: 13px !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    line-height: 1.25;
  }
  .app-shell[data-current-view="payments"] .finance-strip {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px;
    margin-bottom: 12px;
  }
  .app-shell[data-current-view="payments"] .finance-card {
    min-height: 72px;
    padding: 10px 12px;
  }
  .app-shell[data-current-view="payments"] .finance-card strong { font-size: 18px; }
  .app-shell[data-current-view="payments"] .due-section,
  .app-shell[data-current-view="payments"] .table-card {
    overflow: visible;
  }
  .app-shell[data-current-view="payments"] .card-head { padding: 14px 14px 8px; }
  .app-shell[data-current-view="payments"] .card-head p,
  .app-shell[data-current-view="payments"] .cancelled-keep-note { display: none; }
  .app-shell[data-current-view="payments"] .due-section-title { padding: 12px 14px 6px; }

  .payment-list-wrap {
    overflow: visible !important;
    max-width: 100%;
  }
  .payment-list-wrap table,
  .payment-list-wrap tbody {
    display: block;
    width: 100%;
    min-width: 0 !important;
  }
  .payment-list-wrap thead { display: none; }
  .payment-list-wrap tr {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 10px;
    width: 100%;
    margin: 0 0 10px;
    padding: 12px 14px 14px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: #fff;
    box-sizing: border-box;
  }
  .payment-list-wrap td {
    display: block;
    width: auto !important;
    min-width: 0 !important;
    padding: 2px 0 !important;
    border: 0 !important;
    background: transparent !important;
    overflow-wrap: anywhere;
  }
  .payment-list-wrap .person { align-items: flex-start; min-width: 0; }
  .payment-list-wrap .person span { overflow: visible; white-space: normal; overflow-wrap: anywhere; }
  .payment-list-wrap .row-actions {
    display: flex;
    flex-wrap: wrap;
    min-width: 0 !important;
    justify-content: stretch;
  }
  .payment-list-wrap .row-actions .button { flex: 1 1 96px; }
  .payment-list-wrap tr:has(.empty) {
    display: block;
    padding: 22px 14px;
  }
  .payment-list-wrap tr:has(.empty) td { display: block; }

  #finance-dues .payment-list-wrap td:nth-child(1) { order: 1; grid-column: 1 / -1; }
  #finance-dues .payment-list-wrap td:nth-child(2) { order: 2; }
  #finance-dues .payment-list-wrap td:nth-child(6) { order: 3; justify-self: end; }
  #finance-dues .payment-list-wrap td:nth-child(3),
  #finance-dues .payment-list-wrap td:nth-child(4),
  #finance-dues .payment-list-wrap td:nth-child(5),
  #finance-dues .payment-list-wrap td:nth-child(7) { display: none; }
  #finance-dues .payment-list-wrap td:nth-child(8) {
    order: 8;
    grid-column: 1 / -1;
    position: static !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  #finance-cancelled .payment-list-wrap td:nth-child(1) { order: 1; grid-column: 1 / -1; }
  #finance-cancelled .payment-list-wrap td:nth-child(2) { order: 2; }
  #finance-cancelled .payment-list-wrap td:nth-child(5) { order: 3; justify-self: end; }
  #finance-cancelled .payment-list-wrap td:nth-child(3) { order: 4; }
  #finance-cancelled .payment-list-wrap td:nth-child(4) { order: 5; justify-self: end; }
  #finance-cancelled .payment-list-wrap td:nth-child(6) { order: 6; grid-column: 1 / -1; }
  #finance-cancelled .payment-list-wrap td:nth-child(7) {
    order: 8;
    grid-column: 1 / -1;
    position: static !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  #finance-refunds .payment-list-wrap td:nth-child(1),
  #finance-transactions .payment-list-wrap td:nth-child(1) { order: 1; grid-column: 1 / -1; }
  #finance-refunds .payment-list-wrap td:nth-child(2),
  #finance-transactions .payment-list-wrap td:nth-child(2) { order: 2; }
  #finance-refunds .payment-list-wrap td:nth-child(4),
  #finance-transactions .payment-list-wrap td:nth-child(4) { order: 3; justify-self: end; }
  #finance-refunds .payment-list-wrap td:nth-child(3),
  #finance-transactions .payment-list-wrap td:nth-child(3) { order: 4; }
  #finance-refunds .payment-list-wrap td:nth-child(6),
  #finance-transactions .payment-list-wrap td:nth-child(6) { order: 5; justify-self: end; }
  #finance-refunds .payment-list-wrap td:nth-child(5),
  #finance-transactions .payment-list-wrap td:nth-child(5) { display: none; }
  #finance-refunds .payment-list-wrap td:nth-child(7),
  #finance-transactions .payment-list-wrap td:nth-child(7) {
    order: 8;
    grid-column: 1 / -1;
    position: static !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  .app-shell .calendar-toolbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: stretch !important;
    flex: 0 0 auto;
    flex-direction: unset !important;
    min-height: auto !important;
    overflow: visible !important;
    padding: 10px 12px !important;
  }
  .app-shell .calendar-toolbar-copy { display: none; }
  .app-shell .calendar-toolbar-nav {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }
  .app-shell .calendar-toolbar-nav .button {
    padding: 0 6px !important;
    font-size: 13px !important;
  }
  .app-shell .calendar-toolbar .button,
  .app-shell .calendar-toolbar .je-date-control,
  .app-shell .calendar-toolbar input {
    width: 100% !important;
    min-width: 0 !important;
  }
  .app-shell .calendar-toolbar .toolbar-date-control {
    width: auto !important;
    min-width: 0;
  }
  .app-shell .calendar-toolbar .status-badge {
    align-self: center;
    white-space: nowrap;
    font-size: 9px !important;
  }
  .app-shell .calendar-toolbar .je-date-trigger,
  .app-shell .toolbar-date-control .je-date-trigger {
    min-height: 40px !important;
  }
  .app-shell .calendar-studio-button strong {
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .app-shell[data-current-view="reservations"]:has(.calendar-card) .workspace {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }
  .app-shell[data-current-view="reservations"]:has(.calendar-card) .content {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .app-shell[data-current-view="reservations"] .calendar-card {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
  }
  .app-shell[data-current-view="reservations"] .calendar-legend {
    flex: 0 0 auto;
    flex-wrap: wrap;
    overflow: visible;
    white-space: normal;
    gap: 8px 14px;
    padding: 8px 12px;
  }
  .app-shell[data-current-view="reservations"] .calendar-wrap {
    flex: 1 1 auto;
    max-height: none !important;
    min-height: 240px;
    overflow: auto;
  }
  .app-shell .calendar-studio-head,
  .app-shell .calendar-studio-cell { width: 76px !important; }
  .app-shell .calendar-studio-button { padding: 8px 7px !important; min-height: 52px; }
  .app-shell .calendar-studio-button span { display: none; }
  .app-shell .calendar-wrap table { min-width: 1080px; }
  .app-shell .calendar-slot { min-height: 48px; }

  .app-shell[data-current-view="reservations"] .table-card > .toolbar {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    flex-direction: unset !important;
  }
  .app-shell[data-current-view="reservations"] .table-card > .toolbar input,
  .app-shell[data-current-view="reservations"] .table-card > .toolbar .button {
    grid-column: 1 / -1;
  }
  .app-shell[data-current-view="reservations"] .table-card > .toolbar .topbar-spacer { display: none; }
  .app-shell[data-current-view="reservations"] .table-card .card-head { display: none; }

  .reservation-list-wrap {
    overflow: visible !important;
  }
  .reservation-list-wrap table,
  .reservation-list-wrap tbody {
    display: block;
    width: 100%;
    min-width: 0 !important;
  }
  .reservation-list-wrap thead { display: none; }
  .reservation-list-wrap tr {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 10px;
    width: 100%;
    margin: 0 0 10px;
    padding: 12px 14px 14px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: #fff;
    box-sizing: border-box;
  }
  .reservation-list-wrap td {
    display: block;
    width: auto !important;
    min-width: 0 !important;
    padding: 2px 0 !important;
    border: 0 !important;
    background: transparent !important;
  }
  .reservation-list-wrap td:nth-child(1) { order: 1; }
  .reservation-list-wrap td:nth-child(2) { order: 0; grid-column: 1 / -1; }
  .reservation-list-wrap td:nth-child(3) { order: 2; grid-column: 1 / -1; }
  .reservation-list-wrap td:nth-child(4) { order: 3; grid-column: 1 / -1; }
  .reservation-list-wrap td:nth-child(5) { order: 4; }
  .reservation-list-wrap td:nth-child(6) { order: 5; justify-self: end; }
  .reservation-list-wrap td:nth-child(7),
  .reservation-list-wrap td:nth-child(8) { order: 6; }
  .reservation-list-wrap td:nth-child(8) { justify-self: end; }
  .reservation-list-wrap td:nth-child(9) {
    order: 8;
    grid-column: 1 / -1;
    position: static !important;
    box-shadow: none !important;
    background: transparent !important;
  }
  .reservation-list-wrap .person { align-items: flex-start; min-width: 0; }
  .reservation-list-wrap .person span { overflow: visible; white-space: normal; overflow-wrap: anywhere; }
  .reservation-list-actions {
    display: flex;
    flex-wrap: wrap;
    min-width: 0 !important;
    justify-content: stretch;
    gap: 8px;
  }
  .reservation-list-actions .button {
    flex: 1 1 88px;
    min-width: 0;
    padding: 0 8px !important;
  }
}

@media (max-width: 430px) {
  .login-copy h1 { font-size: 28px !important; }
  .login-panel { padding: 18px 14px !important; }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .unit-board { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hotel-room-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .hotel-room-footer .select-category { width: 100%; }
  .page-actions .button { min-height: 44px !important; }
  .row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .row-actions .button { flex: 1 1 120px; }
  .reservation-list-actions .button { flex: 1 1 80px; }
}

@media (max-width: 380px) {
  .content-header .content-book,
  .content-header .content-login,
  .site-header .nav-book,
  .site-header .nav-login {
    display: inline-flex !important;
    font-size: 12px !important;
    padding: 0 10px !important;
  }
  .room-picker-stay {
    grid-template-columns: 1fr !important;
  }
  .room-picker-stay-item:nth-child(2),
  .room-picker-stay-item:nth-child(3),
  .room-picker-stay div:nth-child(2),
  .room-picker-stay button,
  .room-picker-stay-edit {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
  .room-picker-stay button,
  .room-picker-stay-edit {
    width: 100% !important;
    justify-self: stretch !important;
  }
  .room-picker-price { grid-template-columns: 1fr !important; }
  .room-picker-price button {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    width: 100% !important;
    max-width: none;
  }
}

@media (min-width: 901px) {
  .room-picker-stay {
    grid-template-columns: minmax(0,1.3fr) minmax(0,1fr) minmax(0,.9fr) auto !important;
  }
  .room-picker-stay button,
  .room-picker-stay-edit {
    grid-column: auto !important;
    grid-row: auto !important;
    width: auto !important;
    max-width: 180px;
    justify-self: end !important;
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}

@media (max-width: 900px) {
  .app-shell[data-current-view="team"] .page-head { margin-bottom: 10px; gap: 10px; }
  .app-shell[data-current-view="team"] .operating-date,
  .app-shell[data-current-view="team"] .page-title p { display: none; }
  .app-shell[data-current-view="team"] .page-title h1 { font-size: 22px; }
  .app-shell[data-current-view="team"] .page-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
    overflow: visible;
  }
  .app-shell[data-current-view="team"] .page-actions .button {
    width: 100% !important;
    flex: none !important;
    min-width: 0 !important;
    padding: 8px 10px !important;
    font-size: 13px !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    line-height: 1.25;
  }
  .app-shell[data-current-view="today"] .page-actions,
  .app-shell[data-current-view="passbook"] .page-actions,
  .app-shell[data-current-view="complaints"] .page-actions,
  .app-shell[data-current-view="inventory"] .page-actions,
  .app-shell[data-current-view="channels"] .page-actions,
  .app-shell[data-current-view="housekeeping"] .page-actions,
  .app-shell[data-current-view="maintenance"] .page-actions,
  .app-shell[data-current-view="studios"] .page-actions,
  .app-shell[data-current-view="reports"] .page-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
    overflow: visible;
  }
  .app-shell[data-current-view="today"] .page-actions .button,
  .app-shell[data-current-view="passbook"] .page-actions .button,
  .app-shell[data-current-view="complaints"] .page-actions .button,
  .app-shell[data-current-view="inventory"] .page-actions .button,
  .app-shell[data-current-view="channels"] .page-actions .button,
  .app-shell[data-current-view="housekeeping"] .page-actions .button,
  .app-shell[data-current-view="maintenance"] .page-actions .button,
  .app-shell[data-current-view="studios"] .page-actions .button,
  .app-shell[data-current-view="reports"] .page-actions .button {
    width: 100% !important;
    flex: none !important;
    min-width: 0 !important;
    padding: 8px 10px !important;
    font-size: 13px !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    line-height: 1.25;
  }
  .app-shell[data-current-view="complaints"] .page-actions .view-tabs,
  .app-shell[data-current-view="housekeeping"] .page-actions .status-badge,
  .app-shell[data-current-view="reports"] .page-actions .status-badge,
  .app-shell[data-current-view="channels"] .page-actions #open-prohost {
    grid-column: 1 / -1;
    width: 100%;
  }
  .app-shell[data-current-view="channels"] .listing-grid,
  .app-shell[data-current-view="channels"] .integration-grid {
    grid-template-columns: 1fr !important;
  }
  .app-shell[data-current-view="channels"] .prohost-connected-row {
    flex-wrap: wrap;
  }
  .app-shell .finance-strip,
  .app-shell .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .app-shell[data-current-view="team"] .mini-grid { grid-template-columns: 1fr; }
  .team-list-wrap {
    overflow: visible !important;
  }
  .team-list-wrap table,
  .team-list-wrap tbody {
    display: block;
    width: 100%;
    min-width: 0 !important;
  }
  .team-list-wrap thead { display: none; }
  .team-list-wrap tr {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 10px;
    width: 100%;
    margin: 0 0 10px;
    padding: 12px 14px 14px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: #fff;
    box-sizing: border-box;
  }
  .team-list-wrap td {
    display: block;
    width: auto !important;
    min-width: 0 !important;
    padding: 2px 0 !important;
    border: 0 !important;
    background: transparent !important;
  }
  .team-list-wrap td:nth-child(1) { order: 1; grid-column: 1 / -1; }
  .team-list-wrap td:nth-child(2) { order: 2; grid-column: 1 / -1; overflow-wrap: anywhere; }
  .team-list-wrap td:nth-child(3) { order: 3; }
  .team-list-wrap td:nth-child(7) { order: 4; justify-self: end; }
  .team-list-wrap td:nth-child(4),
  .team-list-wrap td:nth-child(5),
  .team-list-wrap td:nth-child(6) { display: none; }
  .team-list-wrap td:nth-child(8) {
    order: 8;
    grid-column: 1 / -1;
    position: static !important;
    box-shadow: none !important;
    background: transparent !important;
  }
  .team-list-wrap .person { align-items: flex-start; min-width: 0; }
  .team-list-wrap .person span { overflow: visible; white-space: normal; overflow-wrap: anywhere; }
  .team-list-wrap .button { width: 100%; }
  .team-access-form .form-grid { grid-template-columns: 1fr !important; }
  .team-access-form .field { min-width: 0; }
}