/*
 * Hammelk Mobile First v12
 * Central mobile UX authority. Loaded after all legacy/theme layers.
 * Goal: readable typography, touch-sized controls, deliberate mobile layouts,
 * and a usable calendar without shrinking the desktop UI.
 */
:root{
  --m12-text:#203047;
  --m12-muted:#617087;
  --m12-line:#dfe7f1;
  --m12-soft:#f7f9fc;
  --m12-primary:#5d7ed3;
  --m12-primary-soft:#eef3ff;
  --m12-radius:18px;
  --m12-touch:48px;
}

@media (max-width:900px){
  html{font-size:16px!important;-webkit-text-size-adjust:100%;text-size-adjust:100%}
  body{font-size:15px!important;line-height:1.8!important;color:var(--m12-text)!important;overflow-x:hidden}
  .app-shell .workspace{margin-right:0!important;min-width:0!important}
  .app-shell .page-content{width:100%!important;max-width:none!important;padding:16px 14px calc(96px + env(safe-area-inset-bottom))!important}

  /* Header: larger and easier to touch/read. */
  .app-shell .topbar,.app-shell .topbar.topbar-modern{height:66px!important;min-height:66px!important;padding:0 14px!important;gap:10px!important}
  .app-shell .topbar-title>b{font-size:17px!important;line-height:1.35!important;font-weight:900!important}
  .app-shell .topbar-meta,.app-shell .topbar-meta small,.app-shell .topbar-title small{font-size:12px!important;font-weight:750!important;color:#6b798b!important}
  .app-shell .menu-button{display:grid!important;place-items:center!important;width:48px!important;height:48px!important;min-height:48px!important;border:1px solid #dce4ee!important;border-radius:14px!important;background:#fff!important;color:#536379!important;box-shadow:none!important;margin:0!important}
  .app-shell .topbar-actions{gap:7px!important}
  .app-shell .topbar-quick{display:none!important}
  .app-shell .notification-bell,.app-shell .topbar-actions>.icon-button{width:46px!important;height:46px!important;min-height:46px!important;border:1px solid #dce4ee!important;border-radius:14px!important;background:#fff!important;display:grid!important;place-items:center!important}
  .app-shell .small-avatar{display:none!important}

  /* Global mobile typography. Never gain space by making text tiny. */
  .app-shell h1{font-size:clamp(1.7rem,7vw,2.15rem)!important;line-height:1.4!important}
  .app-shell h2{font-size:1.35rem!important;line-height:1.5!important}
  .app-shell h3{font-size:1.08rem!important;line-height:1.55!important}
  .app-shell h4{font-size:1rem!important}
  .app-shell :is(p,li,td,dd){font-size:14px;line-height:1.8}
  .app-shell :is(small,.small,.muted,.form-hint,.field-help,.cell-note,.eyebrow){font-size:12.5px!important;line-height:1.75!important;font-weight:700!important;color:var(--m12-muted)!important}
  .app-shell :is(label,.form-grid label,.settings-field>span,.user-fields label,.owner-fields label){font-size:14px!important;font-weight:850!important;line-height:1.7!important;color:#45556b!important}

  /* Touch controls. 16px input text also prevents mobile browser zoom. */
  .app-shell :is(input:not([type=checkbox]):not([type=radio]),select,textarea){font-size:16px!important;line-height:1.5!important;min-height:var(--m12-touch)!important;border-radius:13px!important;padding:10px 12px!important}
  .app-shell textarea{min-height:96px!important}
  .app-shell :is(.button,button:not(.calendar-day):not(.booking-date):not(.ds-select-option)){min-height:46px!important;font-size:14px!important;font-weight:850!important;border-radius:13px!important}
  .app-shell .button.compact{min-height:44px!important;padding:8px 12px!important}
  .app-shell :is(input[type=checkbox],input[type=radio]){min-width:20px!important;width:20px!important;height:20px!important;min-height:20px!important}

  /* General cards / pages. */
  .app-shell :is(.panel,.simple-card,.settings-section-card,.provider-card,.request-card,.account-card){border-radius:18px!important}
  .app-shell .panel{padding:16px!important}
  .app-shell .panel-head,.app-shell .page-heading,.app-shell .ds-page-header,.app-shell .users-heading{gap:10px!important;margin-bottom:14px!important}
  .app-shell .panel-head h2,.app-shell .page-heading h1,.app-shell .ds-page-header h1,.app-shell .users-heading h1{margin-bottom:4px!important}
  .app-shell .panel-head p,.app-shell .page-heading p,.app-shell .ds-page-header p,.app-shell .users-heading p{font-size:13px!important;line-height:1.8!important;font-weight:700!important}
  .app-shell .heading-actions,.app-shell .actions,.app-shell .hero-actions{width:100%;display:grid!important;grid-template-columns:1fr 1fr;gap:8px!important}
  .app-shell .heading-actions>* ,.app-shell .actions>* ,.app-shell .hero-actions>*{width:100%!important}

  /* Form grids become purposeful one-column mobile flows. */
  .app-shell :is(.form-grid,.grid,.grid-form,.user-fields,.owner-fields,.provider-fields,.bank-form-grid,.settings-fields-grid,.settings-fields-grid.two-col,.two-field-grid,.cleanup-confirm-grid){grid-template-columns:1fr!important;gap:12px!important}
  .app-shell :is(.wide,.span-2,.span-3){grid-column:auto!important}
  .app-shell fieldset{min-width:0}

  /* Central smart list / dropdown component. */
  .app-shell .ds-select-trigger{min-height:50px!important;background:#fff!important;color:#25364d!important;border:1px solid #d8e2ef!important;font-size:15px!important;font-weight:800!important;border-radius:14px!important;padding:10px 13px!important;box-shadow:none!important}
  .app-shell .ds-select-trigger:hover,.app-shell .ds-select.open .ds-select-trigger{background:#fff!important;color:#25364d!important}
  .app-shell .ds-select.open .ds-select-menu{right:12px!important;left:12px!important;bottom:calc(12px + env(safe-area-inset-bottom))!important;max-height:72svh!important;border-radius:22px!important;padding:12px!important}
  .app-shell .ds-select-search input{min-height:48px!important;font-size:16px!important}
  .app-shell .ds-select-options{max-height:56svh!important;gap:5px!important}
  .app-shell .ds-select-option{min-height:50px!important;font-size:15px!important;padding:10px 12px!important;border-radius:12px!important;background:#fff!important;color:#31435b!important}
  .app-shell .ds-select-option.active,.app-shell .ds-select-option:hover,.app-shell .ds-select-option[aria-selected="true"]{background:#eef3ff!important;color:#3656ad!important}

  /* Mobile card tables. Standard card-table when the template opted in. */
  .app-shell .table-wrap.mobile-cards{border:0!important;background:transparent!important;overflow:visible!important}
  .app-shell .table-wrap.mobile-cards table,.app-shell .table-wrap.mobile-cards tbody{display:block!important;width:100%!important}
  .app-shell .table-wrap.mobile-cards thead{display:none!important}
  .app-shell .table-wrap.mobile-cards tr{display:block!important;margin:0 0 12px!important;padding:12px 14px!important;border:1px solid var(--m12-line)!important;border-radius:17px!important;background:#fff!important;box-shadow:0 6px 20px rgba(31,47,70,.045)!important}
  .app-shell .table-wrap.mobile-cards td{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:14px!important;width:100%!important;padding:9px 0!important;border:0!important;border-bottom:1px dashed #e7edf5!important;font-size:13.5px!important;text-align:left!important;white-space:normal!important}
  .app-shell .table-wrap.mobile-cards td:last-child{border-bottom:0!important}
  .app-shell .table-wrap.mobile-cards td::before{content:attr(data-label);flex:0 0 38%;font-size:12.5px!important;font-weight:850!important;color:#758398!important;text-align:right!important}
  .app-shell .table-wrap.mobile-cards td[colspan]::before{display:none!important}
  .app-shell .table-wrap:not(.mobile-cards){overflow-x:auto!important;-webkit-overflow-scrolling:touch}
  .app-shell .table-wrap:not(.mobile-cards) table{min-width:680px}

  /* Mobile dock. */
  .app-shell~.mobile-dock,.mobile-dock{height:76px!important;padding:7px 8px calc(7px + env(safe-area-inset-bottom))!important;background:rgba(255,255,255,.98)!important;border-top:1px solid #dfe7f1!important;box-shadow:0 -10px 28px rgba(31,47,70,.08)!important}
  .mobile-dock a,.mobile-dock button{min-height:58px!important;border-radius:16px!important;gap:4px!important;font-size:12.5px!important;font-weight:800!important}
  .mobile-dock .icon{width:24px!important;height:24px!important}
  .mobile-dock a.active{background:#eef3ff!important;color:#5070c5!important}
  .mobile-dock .dock-count{font-size:10px!important;min-width:18px!important;height:18px!important}

  /* Sidebar as real mobile drawer. */
  .app-shell .sidebar{width:min(330px,88vw)!important;padding:15px!important}
  .app-shell .menu-section{min-height:52px!important;font-size:14px!important}
  .app-shell .menu-section>span:not(.menu-open-mark):not(.nav-count){font-size:14px!important}
  .app-shell .suite-overview-item b{font-size:13px!important}
  .app-shell .sidebar-account b{font-size:14px!important}
  .app-shell .sidebar-account small{font-size:12px!important}

  /* Section hub pages. */
  .section-hub-hero{padding:18px!important;border-radius:20px!important;gap:13px!important}
  .section-hub-icon{width:54px!important;height:54px!important;border-radius:16px!important}
  .section-hub-copy p{font-size:13px!important;line-height:1.8!important}
  .section-hub-grid{grid-template-columns:1fr!important;gap:11px!important}
  .section-hub-card{min-height:104px!important;padding:15px!important;border-radius:18px!important}
  .section-hub-card-copy strong{font-size:15px!important}.section-hub-card-copy small{font-size:12.5px!important}

  /* Owners / users / account cards. */
  .app-shell :is(.owner-card-grid,.user-card-grid,.bank-grid-modern,.provider-grid,.period-cards,.profile-section-grid,.account-grid){grid-template-columns:1fr!important}
  .app-shell .stat-grid,.app-shell .stat-grid.three,.app-shell .user-stat-grid{grid-template-columns:1fr 1fr!important;gap:10px!important}
  .app-shell .stat-card,.app-shell .user-stat{padding:13px!important;min-height:92px!important}
  .app-shell .stat-card span,.app-shell .user-stat span{font-size:12.5px!important;font-weight:800!important}
  .app-shell .stat-card strong,.app-shell .user-stat strong{font-size:23px!important}
  .app-shell .owner-card,.app-shell .user-card,.app-shell .bank-card-modern{padding:15px!important;border-radius:18px!important}
  .app-shell .owner-quick-info,.app-shell .owner-metrics,.app-shell .user-meta-grid,.app-shell .info-grid,.app-shell .owner-profile-stats{grid-template-columns:1fr 1fr!important;gap:8px!important}
  .app-shell .owner-profile-hero{display:grid!important;gap:14px!important}
  .app-shell .owner-profile-stats{width:100%!important}
  .app-shell .owner-profile-stats>div,.app-shell .info-grid>div{padding:10px!important}
  .app-shell .owner-profile-stats span,.app-shell .info-grid span{font-size:12px!important;font-weight:800!important}
  .app-shell .owner-profile-stats strong,.app-shell .info-grid b{font-size:14px!important;overflow-wrap:anywhere}
  .app-shell .card-actions,.app-shell .user-card-actions,.app-shell .bank-card-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important}
  .app-shell .card-actions>* ,.app-shell .user-card-actions>* ,.app-shell .bank-card-actions>*{width:100%!important;min-width:0!important}

  /* Owner wizard: horizontal step rail + readable fields. */
  .app-shell .owner-tabs{display:flex!important;overflow-x:auto!important;gap:7px!important;padding:4px 1px 10px!important;scroll-snap-type:x proximity}
  .app-shell .owner-tab{flex:0 0 auto!important;min-width:126px!important;min-height:48px!important;padding:8px 10px!important;font-size:13px!important;scroll-snap-align:start}
  .app-shell .owner-wizard-content{padding:14px!important}
  .app-shell .section-title h3{font-size:17px!important}.app-shell .section-title p{font-size:13px!important}

  /* Settings / maintenance. */
  .app-shell .settings-hero{padding:18px!important;border-radius:20px!important}
  .app-shell .settings-jump-nav{top:66px!important;padding:8px!important;gap:7px!important;overflow-x:auto!important;flex-wrap:nowrap!important}
  .app-shell .settings-jump-nav a{min-height:42px!important;white-space:nowrap!important;font-size:13px!important;padding:8px 11px!important}
  .app-shell .settings-section-card{padding:16px!important;border-radius:18px!important}
  .app-shell .settings-field{padding:12px!important;border-radius:14px!important}
  .app-shell .cleanup-choice{padding:12px!important}.app-shell .cleanup-choice b{font-size:14px!important}.app-shell .cleanup-choice small{font-size:12px!important}

  /* Banking and communication dialogs become bottom sheets. */
  .app-shell dialog.bank-dialog{width:100%!important;max-width:none!important;max-height:92svh!important;margin:auto 0 0!important;border-radius:22px 22px 0 0!important}
  .app-shell .bank-dialog-head{padding:16px!important}.app-shell .bank-form-body{padding:14px!important}.app-shell .bank-form-section{padding:13px!important}
  .app-shell .bank-dialog-actions{position:sticky!important;bottom:0!important;display:grid!important;grid-template-columns:1fr 1fr!important;padding:12px 14px calc(12px + env(safe-area-inset-bottom))!important}
  .app-shell .bank-identifiers,.app-shell .bank-balance-card,.app-shell .bank-reconcile-status{grid-template-columns:1fr!important}
  .app-shell .provider-card{padding:15px!important}.app-shell .provider-actions{display:grid!important;grid-template-columns:1fr!important;gap:8px!important}

  /* Backup / access / miscellaneous grids. */
  .app-shell :is(.backup-summary-grid,.backup-path-grid,.permission-group-grid.access-grid,.role-card-grid,.exchange-help-grid){grid-template-columns:1fr!important}
  .app-shell .permission-toolbar{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important}
  .app-shell .permission-group{padding:13px!important}

  /* History / stay workflow. */
  .usage-summary-card{grid-template-columns:1fr!important;padding:14px!important}.season-rights-grid{grid-template-columns:1fr 1fr!important}
  .report-tabs{margin-inline:-2px!important;padding-bottom:8px!important}.report-tabs a{min-height:46px!important;font-size:13px!important;padding:9px 12px!important}
  .report-filter-toggle{display:flex!important;width:100%!important;justify-content:center!important}
  .report-filters{grid-template-columns:1fr!important;padding:12px!important}.report-filters label{font-size:13px!important}.report-filter-actions{grid-column:auto!important;display:grid!important;grid-template-columns:1fr 1fr!important}
  .history-record-main{grid-template-columns:1fr!important;padding:13px!important}.history-record-title h3{font-size:15px!important}.history-record-title p{font-size:12.5px!important}.history-state{font-size:11.5px!important}
  .history-record-facts,.history-detail-grid{grid-template-columns:1fr!important}.history-record-facts small,.history-detail-grid span{font-size:11.5px!important}.history-record-facts b,.history-detail-grid b{font-size:13px!important}
  .stay-workflow{padding:14px!important}.stay-step{grid-template-columns:36px 1fr!important;gap:9px!important;padding:13px!important}.stay-step-index{width:34px!important;height:34px!important;font-size:14px!important}
  .stay-step-body h3{font-size:16px!important}.stay-step-body>p{font-size:12.5px!important}.stay-rate-card{width:100%!important}.stay-submit-bar{bottom:calc(76px + env(safe-area-inset-bottom))!important;padding:10px 12px!important;grid-template-columns:1fr!important}.stay-submit-bar .button{width:100%!important}
  .stay-list-filter{grid-template-columns:1fr!important}.stay-record-grid{grid-template-columns:1fr!important}

  /* Dashboard: one-column KPIs on phones/tablet portrait; readable quick actions. */
  .dashboard-greeting-compact{min-height:auto!important;max-height:none!important}
  .dashboard-v11-head{display:grid!important;gap:5px!important;margin:12px 2px 16px!important}.dashboard-v11-head h1{font-size:1.9rem!important}.dashboard-v11-head p{font-size:14px!important}.dashboard-v11-head time{display:none!important}
  .dashboard-kpis{grid-template-columns:1fr!important;gap:10px!important}.dashboard-kpi{min-height:92px!important;padding:14px!important}.dashboard-kpi small{font-size:13.5px!important}.dashboard-kpi p{font-size:13px!important}.dashboard-kpi strong{font-size:28px!important}.kpi-icon{width:52px!important;height:52px!important;font-size:21px!important}
  .dashboard-section-title h2{font-size:1.45rem!important}.dashboard-section-title p{font-size:13px!important}
  .quick-action-grid{grid-template-columns:1fr 1fr!important;gap:10px!important}.quick-action-grid a{min-height:112px!important;padding:14px!important}.quick-action-grid b{font-size:14px!important}.quick-action-grid small{font-size:12.5px!important;line-height:1.75!important}
  .dashboard-v11-grid{grid-template-columns:1fr!important}.timeline-row{grid-template-columns:92px 12px 1fr!important;gap:8px!important}.timeline-owner{grid-column:3!important}.timeline-copy b{font-size:14px!important}.timeline-copy small{font-size:12px!important}.timeline-date b{font-size:13px!important}.timeline-date small{font-size:11.5px!important}
  .attention-list a{font-size:13px!important;min-height:46px!important}.property-summary-grid{grid-template-columns:1fr 1fr!important}.recent-activity-grid{grid-template-columns:1fr!important}

  /* Calendar: mobile is a deliberate touch surface, not a squeezed desktop calendar. */
  .calendar-workspace{gap:12px!important}
  .calendar-command-center{border-radius:20px!important;overflow:visible!important}
  .calendar-command-top{display:grid!important;grid-template-columns:1fr!important;gap:14px!important;padding:17px 16px!important}
  .calendar-command-heading .eyebrow{font-size:12.5px!important}.calendar-title-row{align-items:flex-start!important;gap:8px!important}.calendar-title-row h1{font-size:2rem!important}.calendar-command-heading p{font-size:13px!important;line-height:1.8!important}
  .calendar-cache-status{font-size:11.5px!important;min-height:32px!important;padding:5px 9px!important}
  .calendar-command-actions{width:100%!important;display:grid!important;grid-template-columns:1fr!important;gap:10px!important}
  .calendar-month-nav{width:100%!important;display:grid!important;grid-template-columns:48px 1fr 48px!important;gap:8px!important}.calendar-nav-button,.calendar-today{min-height:48px!important;font-size:14px!important;border-radius:13px!important}
  .calendar-create-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important}.calendar-create-actions .button{width:100%!important;min-height:48px!important;font-size:14px!important}
  .calendar-command-bar{display:grid!important;gap:11px!important;padding:12px 14px!important}
  .calendar-view-tabs{display:flex!important;width:100%!important;overflow-x:auto!important;gap:5px!important;padding:3px!important;scrollbar-width:none}.calendar-view-tabs::-webkit-scrollbar{display:none}.calendar-view-tabs a{flex:0 0 auto!important;min-width:82px!important;min-height:44px!important;display:grid!important;place-items:center!important;font-size:13.5px!important;padding:8px 12px!important}
  .calendar-mini-stats{width:100%!important;justify-content:space-between!important;gap:5px!important}.calendar-mini-stats span{font-size:12.5px!important}.calendar-mini-stats small{font-size:11.5px!important}.calendar-settings-link{min-height:42px!important;font-size:13px!important;justify-self:stretch!important;text-align:center!important}
  .calendar-filter-panel{margin:0 12px 12px!important;border-radius:16px!important}.calendar-filter-panel summary{min-height:52px!important;padding:12px 13px!important}.calendar-filter-panel summary span{font-size:14px!important}.calendar-filter-panel summary small{font-size:11.5px!important}.calendar-filters{grid-template-columns:1fr!important;padding:12px!important;gap:11px!important}.calendar-filters label>span{font-size:13px!important}.calendar-layer-checks{grid-column:auto!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important}.calendar-layer-checks label,.filter-check{min-height:44px!important;font-size:13px!important;padding:8px 10px!important}

  /* Month keeps its semantics but becomes horizontally scrollable with useful cell sizes. */
  .calendar-board{overflow-x:auto!important;overflow-y:hidden!important;-webkit-overflow-scrolling:touch;border-radius:18px!important;scroll-snap-type:x proximity}
  .calendar-week-head,.calendar-grid{min-width:770px!important}
  .calendar-week-head span{padding:11px 5px!important;font-size:13px!important;font-weight:900!important}
  .calendar-day,.app-shell .calendar-day{min-height:132px!important;padding:9px!important;scroll-snap-align:start}
  .calendar-day-number{width:34px!important;height:34px!important;font-size:16px!important;border-radius:10px!important}
  .holiday-mark{font-size:10.5px!important;padding:3px 6px!important}
  .calendar-day-items{gap:5px!important;margin-top:7px!important}.day-item{font-size:11.5px!important;padding:5px 6px!important;line-height:1.6!important;border-radius:8px!important}.day-more{font-size:11px!important;padding:3px 5px!important}
  .calendar-agenda-card{padding:13px!important;border-radius:18px!important}.agenda-day{grid-template-columns:68px 1fr!important;gap:10px!important}.agenda-date b{font-size:22px!important}.agenda-date span{font-size:12.5px!important}.agenda-date small{font-size:11px!important}.agenda-item b{font-size:14px!important}.agenda-item small{font-size:12px!important}

  /* Calendar drawers / booking sheets. */
  .calendar-drawer,.calendar-workflow-drawer,.booking-dialog{width:100%!important;max-width:none!important;max-height:94svh!important;border-radius:22px 22px 0 0!important}
  .calendar-drawer-head,.workflow-drawer-head,.booking-dialog-head{padding:16px!important}.calendar-drawer-head h2,.workflow-drawer-head h2,.booking-dialog-head h2{font-size:19px!important}
  .calendar-panel-body{padding:13px 15px 84px!important}.panel-record b{font-size:14px!important}.panel-record small,.panel-record em{font-size:12px!important}
  #periodModal .booking-step-title b{font-size:15px!important}#periodModal .booking-step-title small{font-size:12px!important}
  #periodModal :is(label>span,.booking-mode-strip label>span){font-size:13px!important;font-weight:800!important}
  #periodModal :is(input,select,textarea){font-size:16px!important;min-height:48px!important}
  #periodModal .booking-suite-grid{grid-template-columns:1fr!important}.booking-mode-strip{grid-template-columns:1fr!important;padding:12px 15px!important}
  #periodModal #bookingDateGrid{gap:5px!important;padding:8px!important}.booking-calendar-weekdays{font-size:12px!important}.booking-date{min-height:48px!important}.booking-date span{font-size:13px!important}
  .calendar-panel-actions,.period-modal-actions,.calendar-event-form .modal-actions{padding:10px 12px calc(10px + env(safe-area-inset-bottom))!important}.calendar-panel-actions .button,.period-modal-actions .button,.calendar-event-form .modal-actions .button{min-height:48px!important;font-size:14px!important}

  /* Calendar settings. */
  .calendar-settings-hero{padding:17px!important;border-radius:19px!important}.calendar-settings-title h1{font-size:1.8rem!important}.calendar-settings-title p{font-size:13px!important}.calendar-today-strip{grid-template-columns:1fr!important}.calendar-today-strip>div{padding:12px!important}.calendar-source-stats{grid-template-columns:1fr 1fr!important}.calendar-toggle-row{min-height:54px!important}.occasion-policy-row{grid-template-columns:1fr!important;gap:10px!important;padding:12px!important}.occasion-show-toggle b{font-size:13px!important}.occasion-show-toggle small{font-size:11.5px!important}.occasion-priority{grid-template-columns:1fr 86px!important}.occasion-priority>span{font-size:12px!important}

  /* Modals in owners/users: bottom-sheet geometry. */
  .app-shell :is(.owner-modal-card,.user-modal-card){width:100%!important;max-width:none!important;max-height:92svh!important;margin:auto 0 0!important;border-radius:22px 22px 0 0!important;padding:16px!important}
}

@media (max-width:520px){
  .app-shell .page-content{padding-inline:12px!important}
  .app-shell .stat-grid,.app-shell .stat-grid.three,.app-shell .user-stat-grid{grid-template-columns:1fr!important}
  .app-shell .heading-actions,.app-shell .actions,.app-shell .hero-actions{grid-template-columns:1fr!important}
  .app-shell .owner-quick-info,.app-shell .owner-metrics,.app-shell .user-meta-grid,.app-shell .info-grid,.app-shell .owner-profile-stats{grid-template-columns:1fr!important}
  .app-shell .card-actions,.app-shell .user-card-actions,.app-shell .bank-card-actions{grid-template-columns:1fr!important}
  .quick-action-grid{grid-template-columns:1fr 1fr!important}
  .property-summary-grid{grid-template-columns:1fr 1fr!important}
  .season-rights-grid{grid-template-columns:1fr!important}
  .calendar-layer-checks{grid-template-columns:1fr!important}
  .calendar-week-head,.calendar-grid{min-width:735px!important}
  .calendar-day,.app-shell .calendar-day{min-height:128px!important}
}

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

/* Mobile readability floor for legacy micro-copy that used 8–11px sizes. */
@media (max-width:900px){
  .app-shell :is(
    .status-chip,.period-type,.owner-metrics span,.owner-account span,.owner-account,
    .owner-quick-info,.user-meta-grid span,.user-meta-grid b,.user-role-row span,
    .role-card small,.permission-group>label,.permission-toolbar span,.group-toggle,
    .owner-picker-hint,.owner-selected-summary span,.owner-selected-summary small,
    #periodOwnerResults .owner-result-main small,#periodOwnerResults .owner-result em,
    #periodOwnerResults .owner-result-empty,#periodOwnerResults .owner-result-more,
    .stay-rate-card span,.stay-step-body header p,.switch-row small,.stay-allocation-preview,
    .stay-cost-preview span,.stay-cost-preview small,.stay-record-top p,.stay-record-grid small,
    .stay-override-note,.cleanup-preview span,.cleanup-preview li,.calendar-range-metrics small,
    .calendar-current-title small,.calendar-filters label>span:first-child,.calendar-text-link,
    .calendar-health span,.calendar-today-strip small,.calendar-source-stats span,
    .calendar-source-meta,.calendar-sync-alert span,.calendar-sync-alert small,
    .calendar-sync-form label span,.calendar-sync-message,.calendar-toggle-row small,
    .hijri-adjust-box>small,.selected-date-chip,.day-panel-summary small,.panel-section-head span,
    .booking-both-option small,.advice-metric span,.advice-warning,.advice-info
  ){
    font-size:12px!important;
    line-height:1.7!important;
    font-weight:750!important;
  }
  .app-shell :is(.owner-result b,#periodOwnerResults .owner-result-main b,.stay-rate-card b,.stay-record-grid b,.calendar-source-stats b,.panel-section-head h3){font-size:13px!important;font-weight:850!important}
  .app-shell .status-chip{min-height:30px!important;padding:5px 9px!important;align-items:center!important}
}

/* =========================================================
   ShareHome v12.1 — requested mobile interaction refinements
   1) context-aware calendar navigation labels
   2) square month cells on mobile
   3) compact user/logout row in the drawer
   ========================================================= */
.calendar-period-nav{
  display:grid!important;
  grid-template-columns:minmax(104px,1fr) auto minmax(104px,1fr)!important;
  gap:8px!important;
  align-items:center!important;
}
.calendar-period-nav .calendar-nav-labeled{
  width:auto!important;
  min-width:0!important;
  padding:8px 12px!important;
  white-space:nowrap!important;
  font-weight:850!important;
}
.calendar-period-nav .calendar-today{min-width:76px!important;padding-inline:14px!important}

.app-shell .sidebar-footer{padding-top:8px!important}
.app-shell .sidebar-user-row{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:7px!important;
  width:100%!important;
}
.app-shell .sidebar-user-row .sidebar-account{
  min-width:0!important;
  min-height:44px!important;
  padding:5px 7px!important;
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
}
.app-shell .sidebar-user-row .sidebar-account .avatar{
  width:36px!important;height:36px!important;flex:0 0 36px!important;border-radius:11px!important;
}
.app-shell .sidebar-user-row .account-copy{min-width:0!important;display:grid!important;gap:1px!important}
.app-shell .sidebar-user-row .account-copy b,
.app-shell .sidebar-user-row .account-copy small{overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
.app-shell .sidebar-user-row .logout-link{
  min-height:40px!important;height:40px!important;
  margin:0!important;padding:0 10px!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:5px!important;
  border-radius:11px!important;
  white-space:nowrap!important;
}
.app-shell .sidebar-user-row .logout-link .icon{width:18px!important;height:18px!important}

@media (max-width:900px){
  .calendar-period-nav{
    grid-template-columns:minmax(112px,1fr) 82px minmax(112px,1fr)!important;
    width:100%!important;
  }
  .calendar-period-nav .calendar-nav-labeled,
  .calendar-period-nav .calendar-today{
    min-height:48px!important;
    font-size:max(13px,var(--ds-font-label))!important;
  }

  /* A month cell is a real square. The grid may scroll horizontally on narrow phones
     rather than stretching each day into a tall unusable rectangle. */
  .calendar-board{
    overflow-x:auto!important;
    overflow-y:hidden!important;
    overscroll-behavior-inline:contain!important;
    scrollbar-width:thin!important;
  }
  .calendar-week-head,.calendar-grid{
    width:max(100%,560px)!important;
    min-width:560px!important;
  }
  .calendar-grid{align-items:stretch!important}
  .calendar-day,.app-shell .calendar-day,.calendar-day.empty{
    min-height:0!important;
    height:auto!important;
    aspect-ratio:1 / 1!important;
    padding:7px!important;
    overflow:hidden!important;
  }
  .calendar-day-top{min-height:27px!important}
  .calendar-day-number{
    width:30px!important;height:30px!important;
    font-size:max(14px,var(--ds-font-label))!important;
  }
  .calendar-day-items{
    display:flex!important;
    flex-wrap:wrap!important;
    align-content:flex-start!important;
    gap:5px!important;
    margin-top:6px!important;
  }
  .calendar-day .day-item{
    width:10px!important;height:10px!important;min-width:10px!important;
    padding:0!important;margin:0!important;border:0!important;border-radius:50%!important;
    background:transparent!important;overflow:visible!important;
  }
  .calendar-day .day-item>span{display:none!important}
  .calendar-day .day-item>i{width:9px!important;height:9px!important;flex:0 0 9px!important}
  .calendar-day .day-more{
    width:auto!important;
    font-size:max(10px,var(--ds-font-caption))!important;
    line-height:1.3!important;padding:1px 3px!important;
  }
  .calendar-day .holiday-mark{
    font-size:max(9px,calc(var(--ds-font-caption) * .85))!important;
    padding:2px 4px!important;
  }

  /* User identity and exit are one compact row in the mobile drawer. */
  .app-shell .sidebar-footer{padding:8px 0 0!important;margin-top:auto!important}
  .app-shell .sidebar-user-row{gap:6px!important}
  .app-shell .sidebar-user-row .sidebar-account{min-height:46px!important;padding:4px 6px!important}
  .app-shell .sidebar-user-row .logout-link{min-height:42px!important;height:42px!important;padding-inline:9px!important}
}

@media (max-width:390px){
  .calendar-period-nav{grid-template-columns:minmax(96px,1fr) 72px minmax(96px,1fr)!important;gap:6px!important}
  .calendar-period-nav .calendar-nav-labeled{padding-inline:7px!important}
  .calendar-week-head,.calendar-grid{width:525px!important;min-width:525px!important}
  .app-shell .sidebar-user-row .logout-link span{display:none!important}
  .app-shell .sidebar-user-row .logout-link{width:42px!important;padding:0!important}
}