/* Mobile-only overrides. Keep the desktop portal's existing styles intact. */
@media (max-width: 820px) {
  html { -webkit-text-size-adjust: 100%; }
  html, body { min-width: 0; width: 100%; }
  body { overflow-x: clip; }
  .auth-shell, .auth-landing { min-height: 100vh; min-height: 100svh; }
  .auth-landing {
    background-image: url('/assets/login-background-mobile.jpg');
    background-position: center;
    background-size: cover;
    animation: none;
  }
  .auth-landing::before { background: linear-gradient(180deg, rgba(4,16,35,.12), rgba(4,16,35,.04) 65%, rgba(4,16,35,.2)); }
  .auth-landing-content { width: 100%; padding: 32px 24px; margin-top: -9svh; gap: 28px; }
  .liquid-title { max-width: 100%; font-size: clamp(36px, 10.5vw, 78px); line-height: 1.15; letter-spacing: .065em; }
  .liquid-subtitle { font-size: clamp(13px, 3.5vw, 20px); margin-top: -16px; }
  .waitlist-button { width: min(220px, 65vw); min-height: 50px; margin-top: 8px; }
  .auth-card.auth-modal { min-height: 0; height: 100%; padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); overflow-y: auto; }
  .auth-dialog { max-height: 100%; overflow-y: auto; padding: 24px; border-radius: 22px; background: rgba(248,250,254,.97); }
  .auth-dialog .logo { width: 80px; height: 80px; }
  .auth-dialog h1 { font-size: 24px; }
  input, select, textarea, .chat-compose textarea { font-size: 16px; max-width: 100%; }
  input[type='checkbox'], input[type='radio'] { flex-shrink: 0; }
  button, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
  button { white-space: normal; }
  #hotelApp, #companyApp { padding-left: max(10px, env(safe-area-inset-left)); padding-right: max(10px, env(safe-area-inset-right)); }
  .company-shell, main, .company-panel, .section, .chart-box, .company-stock-panel { min-width: 0; max-width: 100%; }
  #hotelApp > .topbar, #companyApp .topbar { min-height: 112px; }
  #hotelApp > .topbar .user, #companyApp .topbar .user { flex-direction: row; align-items: center; }
  #companyApp .topbar .user { max-width: calc(100% - 24px); }
  #companyApp .topbar .user > span { max-width: 180px; }
  #hotelApp .hotel-sidebar, #companyApp .company-sidebar { z-index: 50; }
  #hotelApp .hotel-sidebar-nav, #companyApp .company-nav { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; justify-content: flex-start; }
  #hotelApp .hotel-sidebar-nav::-webkit-scrollbar, #companyApp .company-nav::-webkit-scrollbar { display: none; }
  #hotelApp .hotel-sidebar-item, #companyApp .company-sidebar-item {
    position: relative; flex: 1 0 96px; min-width: 96px; min-height: 56px; font-size: 12px; padding: 9px 6px; white-space: nowrap;
  }
  #hotelApp .hotel-sidebar-item .portal-notice-badge, #companyApp .company-sidebar-item .portal-notice-badge { position: absolute; right: 3px; top: 2px; margin: 0; }
  .bar, .dashboard-toolbar, .revenue-toolbar, .finance-toolbar, .stats-toolbar, .miniprogram-settings-heading { flex-wrap: wrap; gap: 10px; }
  .bar > *, .finance-toolbar > *, .stats-toolbar > * { min-width: 0; max-width: 100%; }
  .product-actions, .dashboard-tools, .finance-actions { flex-wrap: wrap; }
  .bar .product-actions { width: 100%; }
  .bar .product-actions select { flex: 1 1 180px; width: 100% !important; }
  .table-wrap, .finance-table, .stats-table { max-width: 100%; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
  .table-wrap:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
  .table-wrap td { overflow-wrap: anywhere; }
  .product-form, .hotel-form, .finance-form, .hotel-extra-grid, .stock-mapping-grid { grid-template-columns: minmax(0, 1fr); }
  .product-form > *, .hotel-form > *, .finance-form > *, .hotel-extra-grid > * { min-width: 0; }
  .company-stock-filter, .company-group-form, .company-allocation-toolbar { flex-wrap: wrap; }
  .company-stock-filter label, .company-group-form label, .company-model-options { min-width: 0; flex-basis: 100%; }
  .company-stock-stats, .commission-detail-summary, .company-metric-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .room-toolbar, .hotel-detail-grid { grid-template-columns: minmax(0, 1fr); }
  .room-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .room-code { min-width: 0; padding: 10px 6px; }
  .room-code img { width: min(120px, 100%); height: auto; aspect-ratio: 1; }
  .room-code .small-btn { padding: 10px 6px; font-size: 12px; }
  .room-toolbar input { width: 100%; }
  .room-selection-toolbar { gap: 10px; }
  .review-backdrop, .company-inventory-modal { padding: 10px; padding-top: max(10px, env(safe-area-inset-top)); padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  .review-backdrop { z-index: 1100; }
  .review-backdrop > :is(.review-modal, .hotel-stats-modal, .hotel-action-modal, .order-status-modal),
  .company-inventory-modal-dialog {
    width: 100%; min-width: 0; max-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    padding: 16px; border-radius: 16px; overflow: auto; overscroll-behavior: contain;
  }
  #hotelForm, #hotelDetailPanel, #hotelProductPanel, #roomManager, #companyFinance { max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
  .review-modal-header > div, .modal-panel-header > div { min-width: 0; overflow-wrap: anywhere; }
  .review-modal-header h2, .modal-panel-header h2 { max-width: none; margin-right: 0; }
  .review-close, .modal-panel-close { flex-shrink: 0; min-width: 44px; min-height: 44px; }
  .product-editor-modal { min-height: 0; max-height: 100dvh; }
  .reward-claim-qr { max-width: 100%; height: auto; aspect-ratio: 1; }
  .mini-editor { grid-template-columns: minmax(0, 1fr); }
  .mini-editor-preview { position: static; max-width: 100%; margin: auto; }
  .mini-editor-tabs { overflow-x: auto; }
  .mini-editor-tabs button { flex-shrink: 0; }
  .miniprogram-settings-panel { padding: 14px; }
  .miniprogram-upload { flex-wrap: wrap; min-width: 0; }
  .miniprogram-upload > * { min-width: 0; max-width: 100%; }
  .chat-layout, .chat-layout.hotel-chat-layout { grid-template-columns: minmax(0, 1fr); }
  .chat-contact-pane { max-height: 150px; border-right: 0; border-bottom: 1px solid #e2e6ea; overflow-y: auto; }
  .chat-contact { min-height: 56px; padding: 8px 12px; }
  .chat-contact-copy strong { font-size: 13px; }
  .chat-contact-copy span { font-size: 12px; }
  .chat-conversation { min-height: 360px; }
  .chat-messages { max-height: 45dvh; }
  .chat-compose { position: sticky; bottom: 0; }
}

@media (max-width: 560px) {
  /* Keep orders and hotel accounts readable without horizontal hunting.
     Editable inventory sheets remain horizontally scrollable spreadsheets. */
  table.mobile-records, table.mobile-records tbody { display: block; width: 100%; min-width: 0 !important; }
  table.mobile-records thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  table.mobile-records tbody > tr { display: block; margin: 0 0 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; overflow: hidden; }
  table.mobile-records tbody > tr > td { display: block; position: relative; width: 100%; min-width: 0; min-height: 38px; padding: 10px 12px 10px 114px; white-space: normal; font-size: 13px; text-align: left; }
  table.mobile-records tbody > tr > td::before { position: absolute; left: 12px; top: 10px; width: 92px; content: attr(data-mobile-label); color: #718096; font-size: 12px; font-weight: 500; }
  table.mobile-records tbody > tr > td > * { min-width: 0; max-width: 100%; }
  table.mobile-records tbody > tr > td[colspan] { display: block; padding-left: 12px; }
  table.mobile-records tbody > tr > td[colspan]::before { content: none; }
  table.mobile-records .map-row-actions { white-space: normal; flex-wrap: wrap; }
  .hotel-order-actions { flex-wrap: wrap; min-width: 0; }
  .hotel-order-actions .order-action-btn, .hotel-order-actions .order-reward-btn { min-height: 44px; }
  .finance-grid, .finance-form, .hotel-detail-grid { grid-template-columns: minmax(0, 1fr); }
  .month-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calendar-head, .calendar-grid { gap: 3px; }
  .day { padding: 6px 2px; }
  .day-revenue { font-size: 10px; }
  .review-actions { flex-wrap: wrap; }
  .review-actions > * { width: 100% !important; }
  .mini-editor-fields { grid-template-columns: minmax(0, 1fr); }
  .mini-editor-fields label.wide { grid-column: auto; }
}

@media (max-width: 820px) and (orientation: landscape) and (max-height: 520px) {
  .auth-landing-content { margin-top: 0; gap: 16px; padding: 16px; }
  .liquid-title { font-size: 46px; }
  .liquid-subtitle { margin-top: -8px; }
  .waitlist-button { margin-top: 0; min-height: 44px; height: 44px; }
}