/* CTR SUITE / WARA COFFEE — balanced mobile layout V4.
 * Phone only: readable typography + compact spacing, no zoom/scale/transform.
 * Loaded AFTER page styles; tablet/desktop/thermal print unaffected.
 */
@media screen and (max-width:759px){
  :root{--ctr-page-gap:12px;--ctr-card-radius:13px;--ctr-card-radius-sm:10px;--ctr-control-h:44px}
  html{-webkit-text-size-adjust:100%!important;text-size-adjust:100%!important}
  .main{min-width:0!important;max-width:100%!important}
  .main>.content,.main>.module-page{box-sizing:border-box!important;min-width:0!important;width:100%!important;max-width:100%!important}
  .main>.content:not(.ctr-standard-page-content),.main>.module-page{padding-inline:12px!important;padding-top:12px!important}
  .main .page-head,.main .module-head{gap:9px!important;margin-bottom:12px!important}
  .main .page-head h1,.main .module-head h1,.main .pb-page-head h1{font-size:20px!important;line-height:1.25!important;margin-block:0!important}
  .main .page-head p,.main .module-head p,.main .pb-page-head p{font-size:12.5px!important;line-height:1.45!important;margin-top:4px!important}
  .main :is(.m-toolbar,.sales-toolbar,.filter-bar,.ctr-filter-card,.pb-filter-bar,.module-actions,.head-actions){gap:8px!important}
  .main :is(.m-card,.pb-card,.pmx-card,.cs-card,.cr-card,.billing-card,.summary-card,.stat-card,.kpi-card,.report-card-mini){border-radius:13px!important}
  .main :is(.m-card,.pmx-card,.cs-card,.cr-card,.summary-card,.stat-card,.kpi-card,.report-card-mini){padding:12px!important;margin-bottom:10px!important}
  .main :is(.m-card-head,.pb-card-head,.cs-card-head,.cr-card-head,.card-head){padding:10px 12px!important;gap:8px!important}
  .main :is(.m-card-body,.pb-card-body,.cs-card-body,.cr-card-body){padding:12px!important}
  .main :is(.kpi-grid,.summary-grid,.m-grid,.stats,.cs-kpi-grid,.cr-kpi-grid,.report-status-grid){gap:9px!important;margin-top:9px!important;margin-bottom:11px!important}
  .main :is(.kpi-value,.summary-total,.m-kpi strong,.cs-kpi-value,.cr-kpi-value){font-size:clamp(17px,4.8vw,21px)!important;line-height:1.2!important;font-variant-numeric:tabular-nums}
  .main :is(.kpi-icon,.summary-icon,.cs-kpi-icon,.cr-kpi-icon){width:32px!important;height:32px!important;min-width:32px!important}
  .main :is(.module-page,.content) :is(.m-btn,.pb-btn,.sales-btn,.btn-outline,.btn-primary,.m-filter-btn,.pb-chip){border-radius:10px!important}
  .main :is(.module-page,.content) :is(.m-btn,.pb-btn,.sales-btn,.btn-outline,.btn-primary){padding:9px 12px!important;min-height:44px!important;line-height:1.25!important;font-size:12.5px!important}
  /* On focus iOS must not zoom the viewport: form text >=16px. */
  .main :is(.module-page,.content) :is(input:not([type=checkbox]):not([type=radio]),select,textarea){font-size:16px!important;line-height:1.4!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important}
  .main :is(.module-page,.content) :is(input:not([type=checkbox]):not([type=radio]),select){min-height:44px!important}
  .main :is(.m-form-grid,.pb-form-grid,.pmx-field-row,.qa-grid,.quick-grid,.action-grid){gap:9px!important}
  .main :is(.m-table-wrap,.pb-table-wrap,.sales-table-wrap,.table-wrap,.table-responsive,.pmx-table-scroll){max-width:100%!important;min-width:0!important;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .main :is(.m-table,.pb-table,.sales-table,.pmx-table,.team-table) :is(th,td){padding:9px!important;font-size:12.5px!important;line-height:1.4!important}
  .main :is(.m-table,.pb-table,.sales-table,.pmx-table,.team-table) :is(th,td).num{white-space:nowrap!important;font-variant-numeric:tabular-nums}
  .main :is(.m-modal,.pb-modal,.pmx-modal,.modal-content){max-width:calc(100vw - 20px)!important;max-height:calc(100dvh - 20px)!important}
  .main :is(.m-modal-body,.pb-modal-body,.pmx-modal-body,.modal-body){overflow-y:auto;overscroll-behavior:contain}
  /* Keep header operational and tap targets comfortable, avoid crowding icons. */
  .topbar{padding:8px 10px!important;gap:7px!important;min-height:58px!important}
  .topbar .menu-btn{width:42px!important;height:42px!important;flex:0 0 42px!important}
  .topbar .topbar-actions{gap:5px!important;min-width:0!important}
  .topbar .icon-btn{width:42px!important;height:42px!important;min-width:42px!important;min-height:42px!important;border-radius:12px!important}
  .topbar .user-chip{min-height:42px!important;padding:5px!important}
  .topbar .user-chip .avatar{width:30px!important;height:30px!important;min-width:30px!important}
  .topbar .shift-indicator{min-height:40px!important;padding:6px 8px!important;gap:5px!important}
  .topbar .shift-info small{display:none!important}
  .ctr-shell-print-fab:not(.is-positioned){max-width:44px!important;width:44px!important;min-width:44px!important;height:44px!important;min-height:44px!important;right:10px!important;bottom:calc(12px + env(safe-area-inset-bottom))!important;padding:5px!important;border-radius:13px!important;gap:0!important;justify-content:center!important}
  .ctr-shell-print-fab-copy{display:none!important}
  .ctr-shell-print-fab>i{width:31px!important;height:31px!important}
  .ctr-shell-print-fab>.ctr-shell-print-dot{position:absolute!important;top:3px!important;right:3px!important;width:8px!important;height:8px!important}
  /* Purchase: readable amount, two-column secondary cards when space allows. */
  .main .pb-summary-shell{margin-bottom:11px!important}
  .main #pbSummaryCards.pb-summary-grid{gap:9px!important}
  .main #pbSummaryCards>.pb-stat--total{min-height:0!important;padding:13px!important;gap:7px!important;border-radius:13px!important}
  .main #pbSummaryCards>.pb-stat--total .pb-stat-icon{width:32px!important;height:32px!important}
  .main #pbSummaryCards>.pb-stat--total .pb-stat-body{gap:5px!important}
  .main #pbSummaryCards>.pb-stat--total .pb-stat-label{font-size:12px!important}
  .main #pbSummaryCards>.pb-stat--total .pb-stat-value{font-size:clamp(22px,6vw,29px)!important;white-space:nowrap!important;overflow-wrap:normal!important;word-break:normal!important;max-width:100%!important}
  .main #pbSummaryCards>.pb-stat--total .pb-stat-trend{font-size:11.5px!important}
  .main #pbSummaryCards .pb-summary-secondary{gap:9px!important}
  .main #pbSummaryCards .pb-summary-secondary>.pb-stat{min-height:95px!important;display:block!important;padding:11px!important}
  .main #pbSummaryCards .pb-summary-secondary .pb-stat-icon{width:27px!important;height:27px!important;min-width:27px!important;margin-bottom:5px!important}
  .main #pbSummaryCards .pb-summary-secondary .pb-stat-label{font-size:12px!important;line-height:1.3!important}
  .main #pbSummaryCards .pb-summary-secondary .pb-stat-value{font-size:clamp(16px,4.5vw,20px)!important;line-height:1.25!important;white-space:nowrap!important}
  .main #pbSummaryCards .pb-summary-secondary .pb-stat-trend{font-size:11.5px!important;line-height:1.3!important}
  .main #pbPurchaseFilters.pb-filter-bar{padding:11px!important;gap:9px!important}
  .main #pbPurchaseFilters .pb-chip{min-height:42px!important;padding:8px 11px!important;font-size:12px!important}
  /* POS phone: catalogue precedes cart; don't shrink text into unreadable 10px. */
  .main:has(.pos-grid)>.content{padding:9px 10px 32px!important}
  .posx-workbar{padding:9px 10px!important;margin-bottom:7px!important}
  .pos-grid{gap:8px!important}
  .pos-grid>.catalog-card,.pos-grid>.cart-card{padding:10px!important;border-radius:13px!important}
  .catalog-card .head-actions{gap:6px!important;margin-bottom:8px!important;padding-bottom:8px!important}
  .catalog-card .head-actions>.btn-outline,.catalog-card .head-actions>.posx-dropdown-wrap>.btn-outline{min-height:42px!important;height:auto!important;padding:8px 7px!important;font-size:12px!important}
  .catalog-tools{margin-bottom:7px!important;gap:7px!important}
  .cat-pills{margin-bottom:7px!important;gap:6px!important}
  .catalog-card #productGrid.product-grid{gap:8px!important}
  .catalog-card #productGrid .product-thumb{height:88px!important;min-height:88px!important;max-height:88px!important}
  .catalog-card #productGrid .product-info{padding:8px 36px 9px 8px!important;min-height:68px!important}
  .catalog-card #productGrid .product-info strong{font-size:12.5px!important;line-height:1.25!important;margin-bottom:4px!important}
  .catalog-card #productGrid .product-price{font-size:12.5px!important}
  .catalog-card #productGrid .add-fab{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important}
  .catalog-footer{margin-top:7px!important;padding-top:7px!important}
  .cart-card .cart-items{max-height:220px!important}
  .cart-summary{padding-top:7px!important;margin-top:6px!important;gap:5px!important}
  .cart-card .cart-empty{min-height:44px!important;padding:8px!important}
  .cart-actions{gap:7px!important;margin-top:7px!important}
  .cart-actions .btn-outline{min-height:42px!important}
  .pay-btn{min-height:48px!important;margin-top:8px!important}
  .split-btn{min-height:42px!important;margin-top:7px!important}
  .ctr-mobile-cart-jump{min-height:46px!important}
  .main:has(.pos-grid) .ctr-shell-print-fab:not(.is-positioned){bottom:calc(70px + env(safe-area-inset-bottom))!important}
  /* Meja: header/actions/stats remain in normal flow; readable names, badges and control. */
  .tbl-board-overview{display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto auto!important;gap:11px!important;position:relative!important;min-width:0!important;margin:0 0 13px!important}
  .tbl-board-overview>.tbl-board-head,.tbl-board-overview>.tbl-stats{position:relative!important;inset:auto!important;transform:none!important;grid-column:1!important;margin:0!important;min-width:0!important}
  .tbl-board-head{display:flex!important;flex-direction:column!important;gap:7px!important;grid-row:1!important}
  .tbl-board-head h1{font-size:20px!important;line-height:1.25!important}
  .tbl-board-head p{font-size:12px!important;line-height:1.4!important;margin-top:3px!important}
  .tbl-board-head .tbl-board-actions{gap:7px!important;margin-top:8px!important;overflow-x:auto!important;min-width:0!important;padding-bottom:4px!important}
  .tbl-board-head .tbl-board-actions :is(.btn-primary,.btn-outline){min-height:44px!important;padding:9px 11px!important;font-size:12px!important}
  .tbl-board-overview>.tbl-stats{display:grid!important;grid-row:2!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  .tbl-board-overview .tbl-stat-card{min-height:64px!important;height:auto!important;padding:9px!important;gap:7px!important}
  .tbl-board-overview .tbl-stat-num{font-size:18px!important;line-height:1.15!important}
  .tbl-board-overview .tbl-stat-label{font-size:11.5px!important;line-height:1.3!important}
  .tbl-board-overview .tbl-stat-icon{width:27px!important;height:27px!important;min-width:27px!important}
  .tbl-area{margin-bottom:12px!important}.tbl-area h2{font-size:13px!important;margin-bottom:7px!important}
  .tbl-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  .tbl-card-inner{min-height:119px!important;padding:10px 8px!important}
  .tbl-card .tbl-top{margin-bottom:5px!important;gap:5px!important}
  .tbl-card .tbl-icon{width:24px!important;height:24px!important;min-width:24px!important}
  .tbl-card .tbl-name{font-size:12.5px!important;line-height:1.25!important}
  .tbl-card .tbl-cap{font-size:11px!important;line-height:1.25!important}
  .tbl-card .tbl-badge{font-size:10.5px!important;max-width:87px!important;padding:5px 6px!important}
  .tbl-card .tbl-manage-btn{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important}
  .tbl-card .tbl-order-name,.tbl-card .tbl-order-meta,.tbl-card .tbl-timer,.tbl-card .tbl-empty-hint{font-size:11.5px!important;line-height:1.3!important}
  /* Receipt preview: preserve original print and fixed-width output. */
}
@media screen and (max-width:359px){
  .topbar{gap:4px!important;padding-inline:7px!important}
  .topbar .topbar-actions{gap:3px!important}
  .tbl-board-overview>.tbl-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .tbl-card .tbl-name{font-size:12px!important}
  .tbl-card .tbl-icon{display:none!important}
  .tbl-card .tbl-badge{max-width:74px!important;font-size:10px!important}
  .main #pbSummaryCards .pb-summary-secondary>.pb-stat{padding:10px!important}
}