/* CTR SUITE Mobile V5.2 SAFE — CSS-only responsive layer.
   Intentionally does NOT rewrite DOM, tables, modals, events, or page logic. */
html,body{max-width:100%;}
@media(max-width:760px){
  html,body{overflow-x:clip!important;-webkit-text-size-adjust:100%;}
  body{overscroll-behavior-x:none;}
  .app,.main,.content,.module-page,.page,.page-wrap,.page-content,.main-content,.dashboard,.cr-wrapper{min-width:0!important;max-width:100%!important;box-sizing:border-box!important;}
  img,svg,canvas,video{max-width:100%;height:auto;}

  .main{width:100%!important;min-width:0!important;}
  .content,.module-page{padding:12px!important;padding-bottom:calc(22px + env(safe-area-inset-bottom))!important;}
  .page-head,.module-head{gap:10px!important;margin-bottom:12px!important;}
  .page-head h1,.module-head h1{font-size:20px!important;line-height:1.15!important;letter-spacing:-.025em!important;}
  .page-head p,.module-head p{font-size:10px!important;line-height:1.5!important;}
  .module-head{flex-wrap:wrap!important;}
  .module-actions{max-width:100%!important;gap:6px!important;}

  .m-btn,.btn,.billing-btn,.pb-btn,.cs-btn-ghost,.cr-btn-ghost,.pmx-btn{min-height:40px!important;}
  button,a,[role="button"]{touch-action:manipulation;}

  /* Known KPI groups only — layout visual, no DOM mutation. */
  .kpi-grid,.summary-grid,.m-grid,.report-status-grid,.stats,.pmx-stats,.pb-stats,.cs-kpi-grid,.cr-kpi-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;
  }
  .kpi-card,.summary-card,.m-kpi,.pmx-stat-card,.pb-stat,.cs-kpi-card,.cr-kpi-card,.insight-card,.stat-card{
    min-width:0!important;padding:11px!important;border-radius:14px!important;
  }
  .kpi-value,.summary-total,.m-kpi strong,.pmx-stat-value,.pb-stat-value,.cs-kpi-value,.cr-kpi-value{font-size:17px!important;line-height:1.1!important;word-break:break-word;}
  .kpi-icon,.summary-icon,.pmx-stat-icon,.pb-stat-icon,.cs-kpi-icon,.cr-kpi-icon{width:31px!important;height:31px!important;min-width:31px!important;}

  .qa-grid,.quick-grid,.action-grid,.mode-grid,.platform-tools-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;}
  .qa-btn{min-height:72px!important;padding:11px!important;}

  /* Known form grids only; no generic .field-row override. */
  .m-form-grid,.pb-form-grid,.pmx-field-row{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important;}
  .m-field.full,.pb-field.full,.pmx-field.wide{grid-column:1/-1!important;}
  .m-input,.m-select,.m-textarea{max-width:100%;box-sizing:border-box;}
  input,select,textarea{max-width:100%;box-sizing:border-box;font-size:16px;}

  /* Heavy content stacks vertically, but existing component internals stay untouched. */
  .dash-row,.dash-row--two,.dash-row--revenue,.report-two,.report-three,.report-explain,.printer-layout,.cr-row,.cr-row--split,.cs-dash-row,.billing-grid{
    grid-template-columns:minmax(0,1fr)!important;
  }

  .card,.m-card,.pb-card,.billing-card,.cs-card,.cr-card,.pmx-card{border-radius:14px!important;margin-bottom:10px!important;}
  .card{padding:13px!important;}
  .m-card-body,.pb-card-body,.billing-card-body,.cs-card-body,.cr-card-body,.pmx-card-body{padding:12px!important;}
  .m-card-head,.card-head,.pb-card-head,.billing-card-head,.cs-card-head,.cr-card-head{padding:11px 12px!important;gap:8px!important;}

  /* Tables keep their native module behavior. Only constrain wrapper to viewport. */
  .m-table-wrap,.table-wrap,.table-card,.pmx-table-scroll,.pb-table-wrap,.sales-table-wrap{max-width:100%!important;}

  .date-pill{max-width:100%!important;}
  .date-quick{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;width:100%!important;gap:5px!important;}
  .date-quick-btn{min-width:0!important;padding-inline:5px!important;}
  .chart-wrap{height:205px!important;}
  .donut-wrap{height:155px!important;}

  .report-section-title{flex-wrap:wrap!important;}
  .report-card-mini{padding:10px!important;}

  .pmx-toolbar{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:7px!important;}
  .pmx-toolbar .pmx-search,.pmx-toolbar .search{min-width:0!important;width:100%!important;}
  .pmx-field-row.three{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .pmx-field-row.three>*:last-child{grid-column:1/-1;}

  .pb-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .pb-segmented{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .pb-chip{min-width:0!important;justify-content:center!important;}

  .cs-kpi-grid,.cr-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .cs-denom-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}

  .billing-flow{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important;}
  .billing-flow-step{min-width:0!important;padding:8px 5px!important;}
  .method-grid,.methods,.mode-tabs{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important;}

  .mode-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .setting-row,.compat-row{gap:8px!important;padding:10px!important;}
  .status-top{align-items:flex-start!important;gap:8px!important;}
  .status-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;width:100%!important;}

  .topbar{min-width:0!important;}
  .topbar-left,.topbar-right{min-width:0!important;}
  .topbar .business-name,.topbar .workspace-name{max-width:32vw!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;}
}

@media(max-width:430px){
  .content,.module-page{padding:10px!important;}
  .m-form-grid,.pb-form-grid,.pmx-field-row{grid-template-columns:minmax(0,1fr)!important;}
  .kpi-grid,.summary-grid,.m-grid,.report-status-grid,.stats,.pmx-stats,.pb-stats,.cs-kpi-grid,.cr-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important;}
  .kpi-card,.summary-card,.m-kpi,.pmx-stat-card,.pb-stat,.cs-kpi-card,.cr-kpi-card{padding:9px!important;}
  .qa-grid,.quick-grid,.action-grid,.mode-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .date-quick{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}

/* Auth / onboarding — CSS-only; no body class or JS required. */
@media(max-width:760px){
  body:has(.portal-shell),body:has(.register-shell){overflow-x:hidden!important;}
  .portal-shell{display:block!important;min-height:100dvh!important;padding:0!important;background:#fff!important;}
  .portal-visual{display:none!important;}
  .portal-panel{display:block!important;min-height:100dvh!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:calc(18px + env(safe-area-inset-top)) 16px calc(22px + env(safe-area-inset-bottom))!important;}
  .login-box,.register-box,.auth-box,.forgot-box,.reset-box{width:100%!important;max-width:520px!important;margin:0 auto!important;}
  .brand-lockup{margin-bottom:20px!important;}
  .brand-lockup img{width:44px!important;height:44px!important;border-radius:13px!important;}
  .login-box h2,.register-box h2,.auth-box h2{font-size:25px!important;}
  .login-subtitle,.subtitle{margin-bottom:18px!important;}
  .login-form,.form,.register-form{gap:11px!important;}
  .login-input input,.input,.register-input input{min-height:50px!important;border-radius:13px!important;font-size:16px!important;}
  .login-button,.register-button{min-height:50px!important;border-radius:13px!important;}
  .login-links,.foot-actions,.auth-links{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important;}
  .login-link,.foot-link,.auth-link{min-width:0!important;padding:9px!important;}
  .login-link.full,.foot-link.full,.auth-link.full{grid-column:1/-1!important;}
}
@media(max-width:370px){
  .portal-panel{padding-left:12px!important;padding-right:12px!important;}
  .login-links,.foot-actions,.auth-links{grid-template-columns:1fr!important;}
}

/* ============================================================
   CTR SUITE V14.90 — FINAL MOBILE HARDENING
   Global safety layer for workspace + auth surfaces.
   - keeps one vertical scroll owner
   - reserves bottom reachability for the floating printer dock
   - protects modals when the mobile keyboard reduces visual viewport
   - normalizes touch targets, filters, tables and landscape behavior
   ============================================================ */
:root{
  --ctr-mobile-bottom-safe:84px;
  --ctr-mobile-edge:12px;
  --ctr-visual-vh:100dvh;
}

@media(max-width:760px){
  html,body{
    width:100%;
    min-width:0!important;
    max-width:100%!important;
  }

  body{
    min-height:100dvh;
    overflow-x:clip!important;
  }

  .app{
    width:100%!important;
    height:100dvh!important;
    min-height:100dvh!important;
    min-width:0!important;
    overflow:hidden!important;
  }

  .main{
    width:100%!important;
    height:100dvh!important;
    min-height:0!important;
    min-width:0!important;
    overflow:hidden!important;
  }

  /* The workspace content remains the single vertical scroll owner.  The
     extra bottom room keeps the final row/action reachable above Printer Dock. */
  .main>.content,
  .main>.module-page{
    width:100%!important;
    min-width:0!important;
    min-height:0!important;
    max-height:none!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-y:contain;
    scroll-padding-top:72px;
    scroll-padding-bottom:calc(var(--ctr-mobile-bottom-safe) + env(safe-area-inset-bottom));
    padding-bottom:calc(var(--ctr-mobile-bottom-safe) + env(safe-area-inset-bottom))!important;
  }

  .main>.content>.module-page{
    height:auto!important;
    min-height:auto!important;
    max-height:none!important;
    overflow:visible!important;
  }

  .page,.page-wrap,.page-content,.module-page,.main-content,
  .dashboard,.cr-wrapper,.content-inner,.panel,.card,
  .kasbon-board,.bon-board{
    min-width:0!important;
    max-width:100%!important;
  }

  /* Headers/actions never force horizontal page overflow. */
  .page-head,.module-head,.m-head,.panel-head,.card-head{
    min-width:0!important;
    max-width:100%!important;
  }
  .head-actions,.module-actions,.page-actions,.m-actions,
  .ctr-hr-header-actions,.ctr-hr-page-actions{
    min-width:0!important;
    max-width:100%!important;
  }
  .page-head>.head-actions,
  .module-head>.module-actions,
  .ctr-hr-header-actions{
    width:100%;
  }

  /* Primary interactive controls use a reliable finger-sized target. */
  .btn,.m-btn,.billing-btn,.pb-btn,.pmx-btn,.pay-mini,
  .filter-reset,.filter-select,.filter-date,.chip,.mode-tab,
  .ctr-hr-quick-link,.method-card,.quick-btn,.action-btn{
    min-height:44px!important;
  }
  input,select,textarea{
    max-width:100%!important;
    min-width:0;
    font-size:16px!important;
    scroll-margin-top:84px;
    scroll-margin-bottom:150px;
  }

  /* Search / filters / quick navigation share the same viewport discipline. */
  .filter-bar,.filters,.filter-row,.toolbar,.toolbar-row,
  .searchbar,.period-filter,.month-filter,.chip-row,
  .mode-tabs,.segmented,.pb-segmented,.ctr-hr-quick-nav{
    min-width:0!important;
    max-width:100%!important;
  }
  .fb-search,.search,.search-box,.member-search,
  .month-filter,.filter-select,.filter-date{
    min-width:0!important;
    max-width:100%!important;
  }
  .month-filter .month-value-wrap{
    min-width:0!important;
    flex:1 1 auto!important;
  }
  .month-filter input[type="month"]{
    min-width:0!important;
    max-width:100%!important;
  }

  /* Popovers stay inside the physical viewport and remain scrollable. */
  .outstanding-popover,.panel-dd,.dropdown-panel,.dropdown-menu{
    max-width:calc(100vw - 20px)!important;
    max-height:min(62dvh,420px)!important;
    overflow:auto!important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }

  /* Common dialog families: use VisualViewport height when the keyboard opens. */
  .overlay,.pb-modal-overlay,.pb-panel-overlay,.pmx-modal-backdrop,
  .posx-modal-backdrop,.billing-confirm-overlay,.sale-void-overlay,
  .pay-preview-overlay,.team-modal,.att-modal,.cs-modal,.cr-modal,
  .tbl-actionsheet-backdrop,.rh-overlay{
    max-width:100vw!important;
    max-height:var(--ctr-visual-vh,100dvh)!important;
    min-height:0!important;
    overscroll-behavior:contain;
  }

  .modal,.drawer,.pb-modal,.pmx-modal,.posx-modal,.team-modal-card,
  .att-modal-card,.cs-modal-box,.cr-modal-box,.sale-void-modal,
  .billing-confirm-dialog,.pay-preview-dialog,.tbl-actionsheet,.rh-drawer{
    max-width:calc(100vw - 16px)!important;
    max-height:calc(var(--ctr-visual-vh,100dvh) - 16px)!important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }

  .m-body,.pb-modal-body,.pmx-modal-body,.posx-modal-body,
  .team-modal-body,.att-modal-body,.drawer-body,.modal-body,
  .pay-preview-body,.cs-modal-body,.cr-modal-body{
    min-height:0!important;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }

  .m-foot,.pb-modal-footer,.pmx-modal-foot,.posx-modal-foot,
  .modal-footer,.pay-preview-actions,.cs-modal-actions,.cr-modal-actions{
    padding-bottom:max(12px,env(safe-area-inset-bottom))!important;
  }

  /* Wrappers may scroll horizontally at tablet-phone widths without moving
     the whole document.  Existing <=520 card transformations remain intact. */
  .table-wrap,.m-table-wrap,.table-card,.pmx-table-scroll,.pb-table-wrap,
  .sales-table-wrap,.table-scroll,.responsive-table,.attendance-matrix-wrap{
    width:100%!important;
    max-width:100%!important;
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
  }

  pre,code,.mono,.code-block{
    max-width:100%!important;
    overflow-wrap:anywhere;
    word-break:break-word;
  }

  /* Never let fixed widgets cover the full mobile width. */
  .toast,.sa-live-toast{
    max-width:calc(100vw - 20px)!important;
  }
}

@media(min-width:521px) and (max-width:760px){
  .table-wrap,.m-table-wrap,.table-card,.pmx-table-scroll,.pb-table-wrap,
  .sales-table-wrap,.table-scroll,.responsive-table{
    overflow-x:auto!important;
    overflow-y:visible;
  }
  .table-wrap>table,.m-table-wrap>table,.table-card>table,
  .pmx-table-scroll>table,.pb-table-wrap>table,.sales-table-wrap>table,
  .table-scroll>table,.responsive-table>table{
    min-width:680px;
  }
}

/* Small phones: preserve readable controls instead of squeezing actions. */
@media(max-width:380px){
  :root{--ctr-mobile-edge:10px;--ctr-mobile-bottom-safe:78px}

  .page-head h1,.module-head h1{font-size:19px!important}
  .page-head p,.module-head p{font-size:10px!important}

  .head-actions .btn,.module-actions .btn,.ctr-hr-page-actions .btn{
    min-width:0!important;
    padding-inline:10px!important;
  }

  .ctr-hr-quick-nav{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .ctr-hr-quick-link{
    white-space:normal!important;
    line-height:1.2!important;
    text-align:center;
  }

  .outstanding-popover{
    left:10px!important;
    right:10px!important;
    width:auto!important;
    max-width:none!important;
  }
}

/* Extreme fallback: 320px devices still keep KPI and action content readable. */
@media(max-width:340px){
  .content,.module-page{padding-left:8px!important;padding-right:8px!important}
  .kpi-grid,.summary-grid,.m-grid,.report-status-grid,.stats,.pmx-stats,
  .pb-stats,.cs-kpi-grid,.cr-kpi-grid{
    gap:6px!important;
  }
  .stat-card,.kpi-card,.summary-card,.m-kpi,.pmx-stat-card,.pb-stat,
  .cs-kpi-card,.cr-kpi-card{
    padding:8px!important;
  }
  .stat-card .val,.kpi-value,.summary-total,.m-kpi strong,
  .pmx-stat-value,.pb-stat-value{font-size:15px!important}
}

/* Landscape phones / short Android windows. */
@media(max-height:500px) and (orientation:landscape){
  :root{--ctr-mobile-bottom-safe:78px}
  .topbar{padding-block:7px!important;min-height:48px!important}
  .content,.module-page{padding-top:8px!important}
  .page-head,.module-head{margin-bottom:8px!important}
  .sidebar-brand{padding:9px 14px!important}
  .sidebar-cloud{display:none!important}
  .sidebar-profile{margin-block:6px!important;padding-top:7px!important}
  .sidebar-nav{padding-block:5px!important}
  .nav-item{padding-block:7px!important}

  .overlay,.pb-modal-overlay,.pb-panel-overlay,.pmx-modal-backdrop,
  .posx-modal-backdrop,.billing-confirm-overlay,.sale-void-overlay,
  .pay-preview-overlay,.team-modal,.att-modal,.cs-modal,.cr-modal,
  .tbl-actionsheet-backdrop,.rh-overlay{
    padding:6px!important;
    align-items:flex-start!important;
  }
  .modal,.drawer,.pb-modal,.pmx-modal,.posx-modal,.team-modal-card,
  .att-modal-card,.cs-modal-box,.cr-modal-box,.sale-void-modal,
  .billing-confirm-dialog,.pay-preview-dialog,.tbl-actionsheet,.rh-drawer{
    max-height:calc(var(--ctr-visual-vh,100dvh) - 12px)!important;
  }
}

/* Keyboard-open state supplied by mobile-final-v1490.js. */
body.ctr-mobile-keyboard-open .ctr-shell-print-fab,
body.ctr-mobile-keyboard-open .ctr-shell-print-dock{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
body.ctr-mobile-keyboard-open .main>.content,
body.ctr-mobile-keyboard-open .main>.module-page{
  scroll-padding-bottom:24px!important;
}