/* Dashboard sizing and touch layout for RestroMate 1.9.17. */
html,body{width:100%;max-width:100%;overflow-x:hidden}
.app-shell,main,.view,.view>*{min-width:0;max-width:100%}
main{width:100%}
.view{overflow-wrap:anywhere}
.view img,.view video,.view canvas{max-width:100%;height:auto}
.data-panel,.panel,.settings-form,.integration,.finance-card{min-width:0}
#mobileNavScrim{display:none}
.transaction-row,.vendor-row,.staff-row,.invoice-row,.audit-row{min-width:0}
#paymentLedger,#transactions,#vendorList,#staffList{width:100%;max-width:100%;overflow-x:auto}
@media(min-width:901px) and (max-width:1440px){
  .view{padding-left:clamp(16px,2vw,28px);padding-right:clamp(16px,2vw,28px)}
  header{padding-left:clamp(16px,2vw,28px);padding-right:clamp(16px,2vw,28px)}
  .metric-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
  .dashboard-grid{grid-template-columns:minmax(0,1.4fr) minmax(260px,.8fr);gap:10px}
  .integration-grid{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
  .table-layout{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
}
@media(max-width:900px){
  .app-shell{display:block;min-height:100dvh}
  main{display:block;width:100%;margin:0}
  #sidebar{position:fixed;left:0;top:0;bottom:0;width:min(88vw,310px);max-height:100dvh;padding:16px 13px;overflow-y:auto;overscroll-behavior:contain;z-index:101;transform:translateX(-105%);transition:transform .22s ease;box-shadow:12px 0 32px #0003}
  #sidebar.open{transform:translateX(0)}
  #mobileNavScrim{display:block;position:fixed;inset:0;z-index:100;border:0;border-radius:0;background:#101a16a6;opacity:0;visibility:hidden;transition:opacity .18s ease,visibility .18s ease}
  #mobileNavScrim.visible{opacity:1;visibility:visible}
  .menu-btn{display:grid;place-items:center;width:42px;height:42px;flex:none;border-radius:9px;background:#f1f4f2;color:#19372c;touch-action:manipulation}
  header{width:100%;min-width:0;gap:10px}
  header>div:first-of-type{min-width:0;flex:1}
  header h1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .header-actions{min-width:0;flex:none}
  .metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dashboard-grid,.growth-columns,.presence-grid,.settings-grid,.db-layout,.automation-layout,.report-grid{grid-template-columns:minmax(0,1fr)}
  .table-layout,.kds{grid-template-columns:repeat(2,minmax(0,1fr))}
  .settings-nav{max-width:100%;flex-wrap:nowrap}
  .settings-nav button{min-width:max-content;min-height:44px}
  .form-grid,.field-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .section-title{min-width:0;flex-wrap:wrap}
  .section-title>div{min-width:0;max-width:100%}
  .section-title>button,.section-title>div:last-child button{min-height:42px}
  .transaction-row{grid-template-columns:38px minmax(140px,1.3fr) minmax(90px,1fr) auto minmax(130px,1fr);min-width:650px}
  .payment-ledger,.finance-grid{min-width:0}
}
@media(max-width:600px){
  header{min-height:64px;height:auto;padding:8px 10px;align-items:center}
  header>div:first-of-type small{display:none}
  header h1{font-size:15px;margin:0}
  .menu-btn{width:40px;height:40px}
  .header-actions{gap:5px}
  .header-actions .primary{height:38px;padding:0 9px;max-width:118px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .view{padding:14px 10px 28px}
  .section-title{align-items:stretch;gap:10px}
  .section-title h2{font-size:19px}
  .section-title>button,.section-title>div:last-child{width:100%}
  .section-title>div:last-child{display:flex;gap:7px;flex-wrap:wrap}
  .section-title>div:last-child button{flex:1 1 130px}
  .metric-grid,.finance-grid,.staff-stats,.table-layout,.kds,.integration-grid,.plans,.growth-kpis,.offer-board,.v17-kpis,.v17-food-grid{grid-template-columns:minmax(0,1fr)}
  .dashboard-grid{grid-template-columns:minmax(0,1fr)}
  .metric,.panel,.data-panel,.finance-card{padding:14px}
  .table-card{min-height:160px}
  .form-grid,.field-row,#newCustomerFields{grid-template-columns:minmax(0,1fr)}
  .form-grid>*{min-width:0}
  .switch-row{gap:12px;align-items:flex-start}
  .switch-row .switch{flex:none}
  .settings-nav{margin:0 -2px;padding:5px;scrollbar-width:thin}
  .settings-nav button{min-width:max-content;padding:10px 12px}
  .settings-form{padding:16px}
  .view input,.view select,.view textarea{max-width:100%;font-size:16px}
  .kanban{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px}
  .lane{flex:0 0 min(88vw,360px);scroll-snap-align:start}
  .modal{padding:8px;align-items:flex-end}
  .modal-box{width:100%;max-height:92dvh;padding:20px 15px;border-radius:18px 18px 0 0;overflow-y:auto}
  .modal-actions{flex-wrap:wrap}
  .modal-actions button{min-height:44px;flex:1 1 140px}
  .toast{left:10px;right:10px;bottom:10px}
  .v17-row,.v17-row.compact,.coupon-row{min-width:0}
}
@media(prefers-reduced-motion:reduce){#sidebar,#mobileNavScrim{transition:none}}