/* Tablet desktop layout: reflows by usable viewport instead of device model. */
@media (min-width:761px) and (max-width:1180px){
  html{scroll-padding-bottom:92px}
  body[data-tablet-layout]{--tablet-gap:12px}
  body[data-tablet-layout] #app{display:block!important}
  body[data-tablet-layout] #app>aside{position:fixed!important;inset:0 auto 0 0!important;z-index:90!important;width:min(310px,78vw)!important;transform:translateX(-105%);transition:transform .24s cubic-bezier(.22,.72,.22,1);box-shadow:24px 0 54px rgba(15,42,35,.22)}
  body[data-tablet-layout].open #app>aside{transform:translateX(0)}
  body[data-tablet-layout].open:after{content:"";position:fixed;inset:0;z-index:85;background:rgba(14,34,29,.32);backdrop-filter:blur(2px)}
  body[data-tablet-layout] #app>main{width:100%;min-width:0;padding:0 14px 28px!important}
  body[data-tablet-layout] #app>main>header{position:sticky;top:0;z-index:55;min-height:68px;padding:8px 0;background:rgba(247,250,249,.94);backdrop-filter:blur(16px)}
  body[data-tablet-layout] #app>main>header .menu{display:grid!important;place-items:center;width:44px;height:44px;flex:0 0 44px}
  body[data-tablet-layout] #view{min-width:0;gap:var(--tablet-gap)}
  body[data-tablet-layout] #view>.toolbar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;padding:12px!important}
  body[data-tablet-layout] #view>.toolbar>*{width:100%;min-width:0!important;margin:0!important}
  body[data-tablet-layout] #view>.toolbar input:first-child{grid-column:span 2}
  body[data-tablet-layout] #view .cards{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body[data-tablet-layout] #view .grid2{grid-template-columns:1fr!important}
  body[data-tablet-layout] #view .panel{max-width:100%;overflow:hidden}
  body[data-tablet-layout] #view .table-wrap{width:100%;max-width:100%;overflow:auto!important;-webkit-overflow-scrolling:touch;overscroll-behavior-inline:contain}
  body[data-tablet-layout] button,body[data-tablet-layout] input,body[data-tablet-layout] select{min-height:42px}

  body[data-tablet-layout] .modal:has(.invoice-dialog){place-items:stretch!important;padding:0!important}
  body[data-tablet-layout] .invoice-dialog{width:100vw!important;height:100dvh!important;max-width:none!important;max-height:none!important;border-radius:0!important}
  body[data-tablet-layout] .invoice-dialog>#modalBody{height:calc(100dvh - 51px)!important;overflow:auto!important;scrollbar-gutter:auto!important;-webkit-overflow-scrolling:touch}
  body[data-tablet-layout] #invoiceForm .invoice-title{padding:10px 18px!important}
  body[data-tablet-layout] #invoiceForm .invoice-customer{padding:11px 18px!important}
  body[data-tablet-layout] #invoiceForm .invoice-customer-grid{grid-template-columns:minmax(0,1fr) minmax(220px,.7fr)!important;gap:10px!important}
  body[data-tablet-layout] #invoiceForm .invoice-customer-grid .address-field{grid-column:1/-1}
  body[data-tablet-layout] #invoiceForm .invoice-products{padding:10px 18px!important}
  body[data-tablet-layout] #invoiceForm .invoice-products .table-wrap{max-height:min(38dvh,340px)!important;overflow:auto!important;touch-action:pan-x pan-y}
  body[data-tablet-layout] #invoiceForm .invoice-resizable-table,body[data-tablet-layout] #invoiceForm .invoice-table{width:1280px!important;min-width:1280px!important}
  body[data-tablet-layout] #invoiceForm .invoice-bottom{grid-template-columns:minmax(0,1fr) minmax(300px,340px)!important;gap:14px!important;padding:12px 18px!important}
  body[data-tablet-layout] #invoiceForm .invoice-actions{position:sticky!important;bottom:0!important;z-index:65!important;display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px!important;padding:10px 18px calc(10px + env(safe-area-inset-bottom))!important;background:rgba(255,255,255,.97)!important;box-shadow:0 -12px 28px rgba(14,59,48,.14)!important;backdrop-filter:blur(16px)}
  body[data-tablet-layout] #invoiceForm .invoice-actions button{width:100%!important;min-width:0!important;margin:0!important;white-space:normal;line-height:1.15}
  body[data-tablet-layout] .sale-viewer-v3-dialog{width:100vw!important;height:100dvh!important;max-height:100dvh!important;border-radius:0!important}
  body[data-tablet-layout] .sale-viewer-v3-actions{scrollbar-width:thin;-webkit-overflow-scrolling:touch}
}

@media (min-width:761px) and (max-width:900px), (min-width:761px) and (max-height:650px){
  body[data-tablet-layout] #app>main{padding-inline:10px!important}
  body[data-tablet-layout] #app>main>header{gap:6px}
  body[data-tablet-layout] #app>main>header h2{font-size:19px}
  body[data-tablet-layout] #app>main>header .ghost{padding-inline:8px;font-size:11px}
  body[data-tablet-layout] #view>.toolbar{grid-template-columns:repeat(2,minmax(0,1fr))}
  body[data-tablet-layout] #view>.toolbar input:first-child{grid-column:1/-1}
  body[data-tablet-layout] #view .cards{grid-template-columns:1fr 1fr!important}
  body[data-tablet-layout] #view .card{min-height:0!important}
  body[data-tablet-layout] #invoiceForm .invoice-customer-grid{grid-template-columns:1fr!important}
  body[data-tablet-layout] #invoiceForm .invoice-customer-grid .address-field{grid-column:auto}
  body[data-tablet-layout] #invoiceForm .invoice-bottom{grid-template-columns:1fr!important}
  body[data-tablet-layout] #invoiceForm .invoice-note textarea{min-height:70px!important;max-height:100px}
  body[data-tablet-layout] #invoiceForm .invoice-summary{padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:#fff}
  body[data-tablet-layout] #invoiceForm .invoice-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
  body[data-tablet-layout] #invoiceForm .invoice-actions button{min-height:44px}
  body[data-tablet-layout] .document-kind-cards{grid-template-columns:1fr!important}
}

@media (min-width:1181px) and (max-width:1500px) and (pointer:coarse){
  body[data-tablet-layout="landscape"] #app{grid-template-columns:210px minmax(0,1fr)}
  body[data-tablet-layout="landscape"] #app>aside{width:210px;padding-inline:13px}
  body[data-tablet-layout="landscape"] #app>main{min-width:0;padding-inline:18px}
  body[data-tablet-layout="landscape"] #view .table-wrap{max-width:100%;overflow:auto;-webkit-overflow-scrolling:touch}
  body[data-tablet-layout="landscape"] #invoiceForm .invoice-products .table-wrap{overflow:auto!important;touch-action:pan-x pan-y}
}

@media (prefers-reduced-motion:reduce){
  body[data-tablet-layout] #app>aside{transition:none}
}