/* Low-resolution desktop support (1024×768 / 1280×720 / 1366×768 and browser zoom).
   Keep critical totals and actions reachable without turning the desktop app into the mobile UI. */
@media (min-width:761px) and (max-width:1440px), (min-width:761px) and (max-height:820px){
  #app{grid-template-columns:200px minmax(0,1fr)}
  #app>aside{width:200px;padding:18px 12px}
  #app>aside .brand{padding:0 9px 16px}
  #app>aside .brand b{font-size:18px}
  #app>aside nav{gap:2px}
  #app>aside nav button{padding:8px 10px}
  #app>main{min-width:0;padding:0 16px 28px}
  #app>main>header{height:auto;min-height:68px;flex-wrap:wrap;gap:8px;padding:8px 0}
  #app>main>header>div{margin-right:auto}
  #app>main>header h2{font-size:20px}
  #app>main>header .ghost{margin-left:0;padding:7px 10px;font-size:12px;white-space:nowrap}
  #view{min-width:0;gap:11px}
  #view .toolbar{gap:7px}
  #view .toolbar input,#view .toolbar select,#view .toolbar button{min-width:0;max-width:100%}
  #view .panel,#view .card{padding:14px}
  #view .table-wrap{max-width:100%;overflow:auto}
  #view .row-actions,#view td:last-child{white-space:nowrap}

  .modal:has(.invoice-dialog){place-items:stretch!important;padding:6px!important;overflow:hidden}
  .invoice-dialog{width:calc(100vw - 12px)!important;max-width:none!important;height:calc(100dvh - 12px)!important;max-height:none!important;padding:0!important;border-radius:12px!important;overflow:hidden!important}
  /* The dialog ticket label is a normal-flow pseudo element (~51px tall).
     Subtract it so the scrolling body and sticky action bar stay inside the viewport. */
  .invoice-dialog>#modalBody{height:calc(100% - 51px)!important;max-height:none!important;overflow:auto!important;overscroll-behavior:contain;scrollbar-gutter:stable}
  #invoiceForm.invoice-sheet{min-height:100%;width:100%;overflow:visible}
  #invoiceForm .invoice-title{align-items:center;padding:10px 20px!important}
  #invoiceForm .invoice-title h2{font-size:21px;letter-spacing:.04em}
  #invoiceForm .invoice-title span{font-size:8px}
  #invoiceForm .invoice-date{width:165px}
  #invoiceForm .invoice-date input{height:38px;padding:7px 9px}
  #invoiceForm .order-mode-switch{grid-template-columns:1fr!important;padding:6px 20px!important;gap:6px!important}
  #invoiceForm .order-mode-copy,#invoiceForm .order-mode-current{display:none!important}
  #invoiceForm .order-mode-options{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  #invoiceForm .order-mode-option{min-height:44px!important;padding:6px 10px!important;border-radius:11px!important}
  #invoiceForm .order-mode-option i{width:27px;height:27px}
  #invoiceForm .order-mode-option small{display:none}
  #invoiceForm .invoice-customer{padding:9px 20px!important}
  #invoiceForm .invoice-customer h3{margin-bottom:7px;font-size:16px}
  #invoiceForm .invoice-customer-grid{gap:9px}
  #invoiceForm .invoice-customer input,#invoiceForm .invoice-customer select{height:38px}
  #invoiceForm .invoice-products{padding:9px 20px 10px!important}
  #invoiceForm .invoice-products h3{margin-bottom:7px;font-size:16px}
  #invoiceForm .invoice-section-head{gap:8px;flex-wrap:wrap}
  #invoiceForm .invoice-section-tools{gap:6px}
  #invoiceForm .invoice-section-tools button,#invoiceForm .invoice-section-head>button{min-height:34px;padding:6px 10px;font-size:11px}
  #invoiceForm .invoice-products .table-wrap{max-height:min(35vh,290px);overflow:auto!important;scrollbar-gutter:stable both-edges}
  #invoiceForm .invoice-resizable-table,#invoiceForm .invoice-table{width:1280px!important;min-width:1280px!important;table-layout:fixed!important}
  #invoiceForm .invoice-resizable-table thead th{position:sticky;top:0;z-index:8;height:38px;padding-top:6px!important;padding-bottom:6px!important}
  #invoiceForm .invoice-resizable-table td{height:55px!important;padding-top:5px!important;padding-bottom:5px!important}
  #invoiceForm .invoice-resizable-table input,#invoiceForm .invoice-resizable-table select{height:36px;padding:6px 5px!important;font-size:12px}
  #invoiceForm .invoice-resizable-table th:last-child,#invoiceForm .invoice-resizable-table tbody tr:not(.processing-inline-row)>td:last-child{right:0!important;width:172px!important;min-width:172px!important;max-width:172px!important}
  #invoiceForm .invoice-resizable-table th:nth-last-child(2),#invoiceForm .invoice-resizable-table tbody tr:not(.processing-inline-row)>td:nth-last-child(2){right:172px!important;width:116px!important;min-width:116px!important;max-width:116px!important}
  #invoiceForm .invoice-row-actions{gap:5px}
  #invoiceForm .invoice-row-actions .processing-detail-button{min-width:91px;height:34px;padding:0 8px}
  #invoiceForm .invoice-row-actions .danger{flex-basis:48px;width:48px;height:34px}
  #invoiceForm .processing-inline-row td{height:auto!important;padding:6px 12px!important}
  #invoiceForm .invoice-optional-section{margin:7px 20px;padding:8px 13px 9px;border-radius:13px}
  #invoiceForm .invoice-optional-section>h3{min-height:34px;padding-right:105px!important;font-size:15px}
  #invoiceForm .invoice-optional-section>h3:before{flex-basis:30px;width:30px;height:30px;margin-right:8px;border-radius:9px;font-size:11px}
  #invoiceForm .invoice-section-toggle{top:7px;right:10px;min-width:92px;height:33px}
  #invoiceForm .invoice-toggle-text{font-size:11px}
  #invoiceForm .invoice-bottom{grid-template-columns:minmax(0,1fr) minmax(300px,350px)!important;gap:14px;padding:9px 20px!important}
  #invoiceForm .invoice-note textarea{min-height:72px;max-height:94px}
  #invoiceForm .invoice-summary{gap:4px}
  #invoiceForm .invoice-summary>div,#invoiceForm .invoice-summary>label{min-height:29px;gap:10px}
  #invoiceForm .invoice-summary input{width:112px;height:31px;padding:5px 7px}
  #invoiceForm .invoice-summary .total{padding:6px 0}
  #invoiceForm .invoice-summary .total strong{font-size:20px;white-space:nowrap}
  #invoiceForm .invoice-actions{position:sticky!important;bottom:0!important;z-index:40!important;display:flex!important;justify-content:flex-end!important;flex-wrap:wrap;gap:7px;margin-top:auto;padding:9px 20px calc(9px + env(safe-area-inset-bottom))!important;background:rgba(255,255,255,.98)!important;border-top:1px solid #dfe8e4;box-shadow:0 -10px 24px rgba(16,61,49,.12)!important;backdrop-filter:blur(12px)}
  #invoiceForm .invoice-actions button{flex:0 1 142px;min-width:98px!important;min-height:39px;padding:7px 10px;white-space:nowrap}
  .invoice-dialog>.close{position:absolute!important;top:8px!important;right:9px!important;z-index:60!important;width:36px;height:36px;border-radius:50%;background:#f1f5f3!important}

  .dialog.entity-dialog,.dialog.user-dialog{max-height:calc(100dvh - 12px)!important}
  .dialog.entity-dialog .entity-dialog-head,.dialog.user-dialog .user-create-head{padding:18px 25px 15px!important}
  .dialog.entity-dialog .entity-dialog-head h2,.dialog.user-dialog .user-create-head h2{font-size:22px!important}
  .dialog.entity-dialog .entity-form,.dialog.user-dialog .user-create-form{padding:16px 25px 18px!important}
  .dialog.entity-dialog .entity-form .field input,.dialog.entity-dialog .entity-form .field select,.dialog.user-dialog input,.dialog.user-dialog select{height:42px!important}
  .dialog.entity-dialog .entity-actions,.dialog.user-dialog .actions{position:sticky;bottom:0;z-index:20;background:#fff}
}

@media (min-width:761px) and (max-width:1100px){
  #app{display:block!important}
  #app>aside{z-index:80;width:210px;transform:translateX(-100%);transition:transform .2s ease;box-shadow:20px 0 45px rgba(5,35,27,.2)}
  body.open #app>aside{transform:translateX(0)}
  body.open:after{content:"";position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.32)}
  #app>main{padding:0 12px 24px}
  #app>main>header .menu{display:block}
  #view .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  #view .grid2{grid-template-columns:1fr}
  #invoiceForm .invoice-bottom{grid-template-columns:minmax(0,1fr) 310px!important}
}

@media (min-width:761px) and (max-height:700px){
  #invoiceForm .invoice-title{padding-top:7px!important;padding-bottom:7px!important}
  #invoiceForm .invoice-customer{padding-top:6px!important;padding-bottom:7px!important}
  #invoiceForm .invoice-products{padding-top:6px!important;padding-bottom:7px!important}
  #invoiceForm .invoice-products .table-wrap{max-height:210px}
  #invoiceForm .invoice-note textarea{min-height:58px;max-height:68px}
  #invoiceForm .invoice-summary{font-size:12px}
  #invoiceForm .invoice-actions{padding-top:7px!important;padding-bottom:7px!important}
}