/* Shared screen typography and control spacing. Word/PDF templates keep their own layout. */
@media screen {
 :root{--ui-font:"Segoe UI",Arial,sans-serif;font-size:15px;--ui-text:15px;--ui-small:13px;--ui-control:42px}
 body{line-height:1.4}
 button,input,select,textarea{font-family:var(--ui-font);line-height:1.35}
 button{touch-action:manipulation}
 .titlebar{height:auto;min-height:38px;padding:6px 12px;font-size:15px;line-height:1.4;gap:12px}
 .titlebar>b{min-width:0;overflow-wrap:anywhere}
 .pos-management-nav{flex-shrink:0;gap:8px}
 .pos-management-nav button{min-height:32px;padding:5px 12px;font-size:14px;line-height:1.3}
 .toolbar{height:auto;min-height:60px;padding:8px 0}
 .toolbar-controls{gap:10px;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr) minmax(110px,.6fr)}
 .toolbar-controls #scan-form,.toolbar-controls .customer-field,.toolbar-controls>#price-list{height:var(--ui-control)}
 .toolbar #barcode,.toolbar .customer-name,.toolbar-controls>#price-list{font-size:16px;line-height:1.35}
 .toolbar #barcode{height:38px;padding:5px 8px}
 .toolbar .customer-name{height:36px;line-height:36px;padding:0 7px!important}
 .toolbar #scan-form>button,.toolbar .customer-field>button:not(.customer-name){flex-basis:30px;width:30px;height:34px;line-height:1;font-size:18px}
 .toolbar #scan-form>#entry-mode{flex-basis:36px;width:36px;height:38px}
 .toolbar #entry-mode img{width:28px;height:30px;object-fit:contain}
 .toolbar .storebar{height:42px;font-size:15px;line-height:1.4;padding:0 12px}
 .sale-tabs{min-height:54px;padding-top:6px}
 .sale-tab{min-width:145px;max-width:210px}
 .sale-tab>[role=tab]{font-size:14px;line-height:1.35;padding:7px 9px}
 .sale-tab small{font-size:12px;line-height:1.4}
 .sale-tab-close{width:32px;min-width:32px;height:32px;padding:0;font-size:21px}
 .sale-tab-add{min-width:40px;height:40px;flex-shrink:0;font-size:27px}
 .sale-table{min-width:860px;font-size:15px;font-variant-numeric:tabular-nums}
 .sale-table col:nth-child(1){width:44px!important}
 .sale-table col:nth-child(2){width:auto!important}
 .sale-table col:nth-child(3){width:60px!important}
 .sale-table col:nth-child(4){width:88px!important}
 .sale-table col:nth-child(5),.sale-table col:nth-child(6),.sale-table col:nth-child(7){width:100px!important}
 .sale-table col:nth-child(8){width:120px!important}
 .sale-table th{height:40px;padding:8px 5px;font-size:15px;line-height:1.3;font-weight:600;white-space:normal}
 .sale-table td{height:76px;padding:8px 5px}
 .product-name{font-size:16px;line-height:1.4;font-weight:600;padding-right:27px;overflow-wrap:anywhere}
 .product-code{font-size:13px;line-height:1.5;overflow-wrap:anywhere}
 .line-remove{opacity:1;width:28px;height:30px;right:2px;top:4px;font-size:21px}
 .qty-control{height:36px}
 .qty-control button{flex:0 0 22px;width:22px;height:32px;font-size:18px}
 .qty-control input{min-width:28px;font-size:15px;height:34px}
 .line-input{font-size:15px;min-height:36px;padding:6px 3px}
 .payment{height:auto;min-height:310px;max-height:none}
 .note{height:48px;padding:4px;gap:7px}
 .note input{height:38px;font-size:16px;align-self:center}
 .note button{width:34px;height:36px}
 .payment-body{height:auto;min-height:260px;padding:10px 12px;gap:12px;grid-template-columns:minmax(0,1fr) minmax(360px,54%)}
 .totals{grid-template-columns:minmax(0,1fr) minmax(110px,40%);grid-auto-rows:minmax(32px,auto);gap:3px 12px;align-items:center}
 .totals>label{font-size:16px;line-height:1.4;white-space:normal;letter-spacing:normal}
 .totals output,.totals>input,.discount input{height:30px;font-size:17px;line-height:1.4;padding:2px 5px}
 .discount{height:36px;gap:8px;align-items:center;min-width:0}
 .discount input{min-width:0}
 .discount #discount-type{flex:0 0 64px;width:64px;min-width:64px;height:36px;font-size:14px;line-height:1.3;padding:4px 6px;border-radius:4px}
 .invoice-context{font-size:16px;line-height:1.55;font-weight:500;color:#000;max-width:100%;overflow-wrap:anywhere}
 .invoice-context #invoice-label{font-size:16px;font-weight:650;color:#000}
 .invoice-context dt{color:#000;font-weight:500}
 .invoice-context dd{color:#000;font-size:16px;font-weight:650}
 .invoice-context #line-count,.invoice-context #debt-note,.invoice-context .delete-link{color:#000;font-size:15px;font-weight:500;line-height:1.5}
 .remaining{font-size:13px;line-height:1.4}
 aside{padding-left:10px;border-left-width:10px}
 .tiles{padding:12px 10px 12px 0}
 .tiles h2{font-size:22px;font-weight:650;line-height:1.3;margin:0 0 12px}
 .tile-grid{gap:9px}
 .tile-grid button,.catalog .tile-grid button,.checkout .tile-grid button,.sales .tile-grid button{
  display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(16px,auto) 34px minmax(20px,auto);
  align-content:center;align-items:center;justify-items:center;justify-content:normal;
  position:relative;height:auto;min-height:clamp(88px,10dvh,118px);max-height:none;padding:6px 7px 8px;gap:4px;
  font-size:14px;font-weight:650;line-height:1.35;overflow-wrap:anywhere
 }
 .tile-grid button>kbd,.tile-grid button[data-action=save]>kbd,.tile-grid button[data-action=returns]>kbd{
  position:static;grid-row:1;grid-column:1;justify-self:start;align-self:start;font-size:12px;line-height:1.3;margin:0;white-space:nowrap
 }
 .tile-grid button>img,.tile-grid button:has(kbd)>img,.checkout .tile-grid img{
  grid-row:2;grid-column:1;width:34px;height:34px;object-fit:contain;margin:0
 }
 .tile-grid button>span{grid-row:3;grid-column:1;min-width:0;max-width:100%;text-align:center;line-height:1.35;white-space:normal}
 .tile-grid .tile-top{position:static;grid-row:1;grid-column:1;font-size:13px;line-height:1.3;text-align:center;align-self:start;overflow-wrap:normal}
 .brand{min-height:42px;max-height:160px;padding:10px 10px 10px 0}
 .brand img{max-width:380px}
 .sales{padding-left:10px;margin-left:-10px}
 footer{height:auto;min-height:36px;flex-wrap:wrap;gap:5px 10px;padding:5px 8px;white-space:normal;overflow:visible;font-size:13px;line-height:1.45}
 footer button{min-height:28px;padding:3px 7px;font-size:13px;line-height:1.3}
 footer>span{flex:1 1 350px;min-width:0;line-height:1.45}
 footer strong{flex:0 1 auto;font-size:13px;white-space:normal;line-height:1.45}
 footer small{font-size:12px;line-height:1.4;white-space:nowrap}
 #app-dialog{font-size:15px;line-height:1.5}
 .dialog-heading{gap:12px;align-items:center}
 .dialog-heading h2{font-size:20px;line-height:1.4;min-width:0;overflow-wrap:anywhere}
 .dialog-heading>button{flex:0 0 36px;min-width:36px;height:36px;font-size:25px;line-height:1;padding:0}
 .dialog-actions{flex-wrap:wrap;gap:10px;padding:12px 16px}
 .dialog-actions button,.primary-button,.secondary-button,.danger-button{font-size:15px;line-height:1.4;min-height:42px;padding:9px 15px;white-space:normal}
 .small-button{font-size:14px;line-height:1.35;min-height:34px;padding:6px 11px;white-space:normal}
 .field{font-size:15px}
 .field>span,.checkbox-row{font-size:14px;line-height:1.5}
 .checkbox-row{align-items:flex-start;gap:9px}
 .checkbox-row input{flex:none;margin-top:4px}
 .quick-cash{gap:7px}
 .quick-cash button{min-height:34px;padding:6px 10px;font-size:13px;line-height:1.35}
 .checkout-summary h3{font-size:15px;line-height:1.4}
 .field input:not([type=checkbox]):not([type=radio]),.field select,.dialog-toolbar input,.dialog-toolbar select{height:42px;font-size:16px;line-height:1.35;padding:7px 9px}
 textarea{font-size:16px;line-height:1.5;padding:9px}
 .dialog-toolbar{gap:10px;flex-wrap:wrap}
 .dialog-toolbar input{flex:1 1 180px;min-width:0}
 .dialog-table{font-size:15px;line-height:1.4}
 .dialog-table th{font-size:14px;line-height:1.4;white-space:normal}
 .dialog-table td{padding:10px 9px}
 .item-title{font-size:15px;line-height:1.45}
 .dialog-table small,.dialog-hint,.form-error,.payment-validation,.warning-box{font-size:13px;line-height:1.5}
 td.row-actions{white-space:normal}
 .row-actions>.small-button{margin:3px}
 #toast{font-size:14px;line-height:1.5;max-width:min(600px,calc(100vw - 24px));overflow-wrap:anywhere}
 .retail-login-dialog .dialog-heading h2{font-size:20px}
 .retail-login-field{height:50px}
 .retail-login-field input{font-size:17px;line-height:1.4}
 .retail-login-actions button{font-size:16px;min-height:42px;height:auto}
 .retail-login-feedback{font-size:14px;line-height:1.5}
 .doc-root{font-size:15px;line-height:1.5}
 .doc-topbar h1{font-size:25px;line-height:1.3;letter-spacing:-.3px}
 .doc-topbar p,.doc-user,.doc-field,.doc-table small,.doc-kpi small,.doc-breakdown-row,.doc-breakdown-foot{font-size:13px;line-height:1.5}
 .doc-button,.doc-navigation button{font-size:14px;line-height:1.4;min-height:40px;white-space:normal}
 .doc-root input,.doc-root select{min-height:40px;font-size:15px;line-height:1.35}
 .doc-table{font-size:15px;line-height:1.45}
 .doc-table th{font-size:13px;line-height:1.5}
 .doc-number{font-size:15px;line-height:1.4}
 .doc-badge{font-size:12px;line-height:1.5}
 .doc-kpi-value{font-size:29px;line-height:1.4}
 .doc-periods button,.doc-metrics button,.doc-chart-legend,.doc-kpi-top,.doc-excel-period{font-size:13px;line-height:1.5}
 .doc-periods button{min-height:32px;padding:6px 11px}
 .doc-chart{overflow-x:auto;overscroll-behavior-x:contain}
 .doc-chart svg{min-width:640px}
 .doc-chart text{font-size:16px}
 .doc-sidebar-label{font-size:12px;line-height:1.5}
 .doc-root small,.doc-excel-period small{font-size:13px;line-height:1.5}
 .doc-field label,.doc-chart-caption,.doc-result-label,.doc-pager{font-size:13px}
 .pref-intro{font-size:20px;line-height:1.4}
 .pref-intro span,.pref-field small,.pref-hint,.pref-bank-info{font-size:13px;line-height:1.5}
 .pref-nav button{font-size:15px;line-height:1.4;min-height:42px}
 .pref-section h3,.pref-toggle,.pref-field,.pref-unavailable{font-size:15px;line-height:1.5}
 .pref-toggle small,.pref-unavailable span{font-size:13px;line-height:1.5}
 .pref-field input,.pref-field select{font-size:15px;line-height:1.4;min-height:42px}
 .word-print-header h2{font-size:24px;line-height:1.3}
 .word-print-header p,.word-print-toolbar label,#word-print-status{font-size:14px;line-height:1.5}
 .word-print-toolbar{gap:10px;align-items:end}
 .word-print-toolbar select,.word-print-toolbar button,.word-print-toolbar a{min-height:42px;height:auto;font-size:15px;line-height:1.4}
 .word-print-toolbar select{padding:9px}
 .word-print-toolbar button,.word-print-toolbar a{padding:9px 12px}
 .word-print-dialog footer{font-size:13px;line-height:1.5}
}
@media screen and (min-width:1700px){
 .titlebar{font-size:16px}.toolbar .storebar{font-size:17px}.sale-table th{font-size:16px}
 .tile-grid button,.catalog .tile-grid button,.checkout .tile-grid button{font-size:16px;padding:8px;gap:6px}
 .tile-grid button>kbd,.tile-grid button[data-action=save]>kbd,.tile-grid button[data-action=returns]>kbd{font-size:14px}
 .tile-grid .tile-top{font-size:15px}.tiles h2{font-size:24px}
 .totals>label{font-size:18px}.totals output,.totals>input,.discount input{font-size:19px}
 .payment-body{grid-template-columns:minmax(0,1fr) minmax(460px,54%)}
}
@media screen and (min-width:801px){aside>.checkout{margin-top:auto}}
@media screen and (min-width:801px) and (max-height:850px){
 .brand{display:none}.tiles{padding-top:4px;padding-bottom:4px}.tiles h2{margin-bottom:6px;font-size:20px;line-height:1.2}
 .tile-grid{gap:6px}
 .tile-grid button,.catalog .tile-grid button,.checkout .tile-grid button,.sales .tile-grid button{
  grid-template-rows:16px 30px minmax(20px,auto);min-height:81px;padding:3px 6px 4px;gap:3px;font-size:14px
 }
 .tile-grid button>img,.tile-grid button:has(kbd)>img,.checkout .tile-grid img{width:30px;height:30px}
}
@media screen and (min-width:801px) and (max-width:1100px){
 .toolbar-controls{gap:7px;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) 108px}
 .toolbar .customer-field>button:not(.customer-name){width:26px;flex-basis:26px}
 .toolbar #barcode,.toolbar .customer-name,.toolbar-controls>#price-list{font-size:15px}
 .payment-body{grid-template-columns:minmax(0,1fr);padding:10px}.totals{grid-column:1;margin-left:auto;width:min(100%,420px)}
}
@media screen and (max-width:800px){
 .titlebar{padding:7px 9px;font-size:14px;flex-wrap:wrap}
 .pos-management-nav{margin-left:auto}
 .toolbar{padding:7px;gap:8px;min-height:0}
 .toolbar-controls{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) 120px;gap:8px}
 .toolbar .storebar{margin:0;width:100%;height:42px}
 .payment-body{grid-template-columns:minmax(0,1fr) minmax(360px,54%)}
 .tile-grid button,.catalog .tile-grid button,.checkout .tile-grid button,.sales .tile-grid button{min-height:96px;font-size:14px}
 aside{padding:8px 10px;gap:10px;border:0;border-top:8px solid #eee}
 .tiles{padding:8px 0}.sales{margin:0;padding-left:0}.brand{display:none}
 .word-print-toolbar label{min-width:160px}
}
@media screen and (max-width:600px){
 .toolbar-controls{grid-template-columns:minmax(0,1fr) 116px}
 .toolbar .product-entry{grid-column:1/-1}
 .toolbar .customer-field>button:not(.customer-name){width:28px;flex-basis:28px}
 .toolbar #barcode,.toolbar .customer-name,.toolbar-controls>#price-list{font-size:16px}
 .payment{min-height:0}
 .payment-body{display:block;min-height:0;padding:10px}
 .totals{grid-column:1;grid-template-columns:minmax(0,1fr) minmax(116px,39%);gap:5px 10px;grid-auto-rows:minmax(34px,auto)}
 .totals>label{font-size:15px}.totals output,.totals>input,.discount input{font-size:17px}
 .discount #discount-type{width:60px;min-width:60px;flex-basis:60px;font-size:14px}
 .note input{font-size:15px}.invoice-context{margin-bottom:12px}
 aside{display:flex;flex-direction:column;gap:0}
 .four{grid-template-columns:repeat(2,minmax(0,1fr))}
 .tile-grid button,.catalog .tile-grid button,.checkout .tile-grid button,.sales .tile-grid button{min-height:100px;padding:7px;font-size:15px}
 .tile-grid button>kbd,.tile-grid button[data-action=save]>kbd,.tile-grid button[data-action=returns]>kbd{font-size:13px}
 .tiles h2{font-size:21px;margin-bottom:10px}
 footer>span{flex-basis:100%}footer strong{font-size:12px}footer small{font-size:12px}
 .dialog-heading h2{font-size:18px}.dialog-actions{gap:8px;padding:10px}.dialog-actions button{font-size:14px;padding:9px 12px}
 .dialog-toolbar input,.dialog-toolbar select{flex-basis:100%;max-width:100%}
 .retail-login-main{gap:10px}.retail-login-field input{font-size:16px}.retail-login-field{height:48px}
 .pref-nav{gap:3px;padding:8px 6px}.pref-nav button{font-size:14px;padding:9px 8px;min-height:40px}
 .pref-intro{font-size:18px}.pref-pages{padding-left:14px;padding-right:14px}
 .doc-root input,.doc-root select{font-size:16px}.doc-navigation button{font-size:14px}.doc-kpi-value{font-size:25px}
 .word-print-toolbar{gap:8px}.word-print-toolbar .word-print-qr{font-size:14px;min-width:0}.word-print-toolbar label{min-width:170px}
}