/* BookPro mobile product layer. Loaded last so responsive fixes win over legacy
   component rules while leaving desktop presentation untouched. */
:root { --bp-mobile-gutter: 16px; --bp-touch: 44px; }

@media (max-width: 767px) {
  html, body, #app { width: 100%; max-width: 100%; overflow-x: hidden; }
  body { min-width: 0; -webkit-text-size-adjust: 100%; }
  button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
  button, .btn-primary, .btn-secondary, .btn-ghost, .icon-btn, .nav-item,
  .sidebar-item, .cal-day, .slot-card, .service-card, .disc-card,
  .settings-tab-item, .settings-category, [role="button"] { min-height: var(--bp-touch); }
  button:active, .btn-primary:active, .btn-secondary:active, .btn-ghost:active,
  .icon-btn:active, .service-card:active, .disc-card:active, .slot-card:active,
  .settings-category:active { transform: scale(.985); }

  /* The app shell reserves room for the fixed mobile navigation and safe area. */
  #screen-business { min-height: 100dvh; }
  #biz-main { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  #biz-dashboard, #biz-calendar, #biz-settings, #biz-my-page, #biz-customers,
  #biz-manual-booking { min-width: 0; max-width: 100%; }
  .top-bar { height: calc(58px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); }
  .top-bar-title { max-width: 35vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .top-bar-actions { gap: 2px; }
  .top-bar-actions .icon-btn { width: 44px; height: 44px; padding: 0; }
  .bp-header-new { min-height: 42px; padding-inline: 11px; font-size: 12px; }
  .bottom-nav { height: calc(70px + env(safe-area-inset-bottom)); padding: 4px 5px env(safe-area-inset-bottom); border-radius: 20px 20px 0 0; }
  .bottom-nav .bp-nav-brand, .bottom-nav .bp-nav-caption, .bottom-nav .bp-nav-note { display: none; }
  .bottom-nav .nav-item { padding: 7px 3px; margin: 0; border-radius: 12px; }
  .bottom-nav .nav-icon { font-size: 21px; }
  .bottom-nav .nav-label { font-size: 10px; }
  .bottom-nav .nav-fab { width: 52px; height: 52px; margin: 0 3px 8px; font-size: 24px; }
  .bp-nav-create-label { display: none; }

  /* Cards and grids collapse into comfortable single-column reading groups. */
  .bp-dash-grid, .dash-grid, .admin-two-col, .admin-stats-grid,
  .settings-grid, .settings-form-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .bp-dash-grid, .dash-grid { gap: 12px; }
  .bp-next, .bp-schedule, .bp-attention, .bp-stats, .stat-card,
  .admin-card, .settings-card, .settings-panel, .mypage-section { min-width: 0; }
  .stat-card { min-height: 108px; }
  .bp-schedule .timeline, .bp-attention-list { max-height: none; overflow: visible; }
  .bp-card-header, .section-header, .admin-page-header { gap: 10px; flex-wrap: wrap; }

  /* Calendar: keep the date grid compact, then show the day agenda as cards. */
  #biz-calendar.active { padding: 12px var(--bp-mobile-gutter) 20px; }
  .cal-header { position: sticky; top: 0; z-index: 4; margin-inline: -4px; padding: 12px; border-radius: 16px; }
  .cal-header button, .cal-nav button { min-width: 44px; min-height: 44px; }
  .cal-grid-wrap { overflow: hidden; border-radius: 18px; }
  .cal-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); width: 100%; }
  .cal-day { min-width: 0; min-height: 44px; font-size: 13px; }
  .cal-day-section { padding-inline: 0; }
  .slot-card { width: 100%; padding: 14px; border-radius: 16px; }
  .slot-actions { flex-wrap: wrap; gap: 8px; }

  /* Appointment/customer tables become stacked records instead of horizontal scroll. */
  .admin-table, .appointments-table, .customers-table { width: 100%; overflow: visible; }
  .admin-table-row, .appointment-row, .customer-row { min-width: 0; }
  .admin-table td, .admin-table th { padding: 12px 9px; white-space: normal; }
  .customer-actions, .appointment-actions, .form-actions { display: flex; flex-wrap: wrap; gap: 8px; }
  .customer-actions > *, .appointment-actions > *, .form-actions > * { flex: 1 1 auto; }

  /* Public page: stabilize media dimensions and keep the booking action reachable. */
  #screen-public { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .pub-hero img, .pub-gallery img, .bp-gallery-slide img { aspect-ratio: 4/3; object-fit: cover; }
  .bp-gallery-track { min-height: 210px; contain: layout paint; }
  .bp-gallery-slide { min-width: 0; box-shadow: 0 10px 26px rgba(24,31,58,.16); }
  .bp-gallery-prev, .bp-gallery-next, .bp-gallery-expand { min-width: 44px; min-height: 44px; }
  .bp-booking-dock { position: sticky; bottom: calc(8px + env(safe-area-inset-bottom)); width: calc(100% - 8px); margin-inline: auto; z-index: 30; }
  .bp-booking-dock .btn-primary { min-height: 48px; flex: 1 1 auto; }
  .services-scroll { grid-template-columns: minmax(0, 1fr); }
  .service-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .pub-time-grid, .pub-date-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; }

  /* Dialogs become bottom sheets with a stable viewport and keyboard-safe actions. */
  .modal-overlay { align-items: flex-end; padding: 0; }
  .modal-box { width: 100%; max-width: 100%; max-height: min(92dvh, 760px); overflow-y: auto; overscroll-behavior: contain; border-radius: 24px 24px 0 0; padding-inline: 18px; padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
  .modal-box .btn-primary, .modal-box .btn-secondary, .modal-box .btn-ghost { min-height: 48px; }
  .modal-box input, .modal-box select, .modal-box textarea { font-size: 16px; }
  .modal-close { min-width: 44px; min-height: 44px; }
  .toast-container { left: 12px; right: 12px; bottom: calc(78px + env(safe-area-inset-bottom)); max-width: none; }

  /* Discover/customer flows and auth use the same thumb-friendly rhythm. */
  #screen-discover #cust-page-wrap { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  #cust-bottom-nav { height: calc(68px + env(safe-area-inset-bottom)) !important; padding-bottom: env(safe-area-inset-bottom); }
  #cust-bottom-nav button { min-height: 56px; }
  .disc-search-input, .disc-adv-btn { min-height: 48px; }
  .disc-grid { grid-template-columns: minmax(0,1fr); padding-inline: var(--bp-mobile-gutter); }
  #screen-login.active { min-height: 100dvh; padding: calc(18px + env(safe-area-inset-top)) var(--bp-mobile-gutter) calc(24px + env(safe-area-inset-bottom)); }
  .auth-panel { width: 100%; padding: 24px 18px; }
  .auth-panel input, .auth-panel select { min-height: 48px; font-size: 16px; }
  .admin-main { padding: calc(16px + env(safe-area-inset-top)) var(--bp-mobile-gutter) calc(24px + env(safe-area-inset-bottom)); }
  .admin-sidebar { width: min(86vw, 320px); }

  /* RTL-specific directional affordances and scroll behavior. */
  [dir="rtl"] .top-bar, [dir="rtl"] .admin-page-header { text-align: right; }
  [dir="rtl"] .bp-gallery-track { direction: rtl; }
  [dir="rtl"] .modal-box, [dir="rtl"] .settings-panel, [dir="rtl"] .auth-panel { text-align: right; }
  input, select, textarea { max-width: 100%; }
}

@media (max-width: 359px) {
  :root { --bp-mobile-gutter: 12px; }
  .top-bar-title { display: none; }
  .bp-header-new { max-width: 94px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bottom-nav .nav-label { font-size: 9px; }
  .bottom-nav .nav-fab { width: 48px; height: 48px; }
  .pub-section, .settings-card-body { padding-inline: 14px; }
}

@media (orientation: landscape) and (max-height: 560px) {
  .bottom-nav { height: calc(58px + env(safe-area-inset-bottom)); }
  .bottom-nav .nav-icon { font-size: 18px; }
  .bottom-nav .nav-label { display: none; }
  #biz-main { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .modal-box { max-height: 96dvh; }
}

@media (prefers-reduced-motion: reduce) {
  .bp-gallery-slide, .bottom-nav *, .modal-box, .screen, .biz-screen { transition: none !important; animation: none !important; }
}