/* V38: one input boundary and responsive presentation; screen media only. */
@media screen {
html,body,#root{min-width:0}
#root .app-shell,#root .content,#root main{min-width:0;max-width:100%;box-sizing:border-box}
#root .app-shell :is(input,select,textarea){max-width:100%;min-width:0;box-sizing:border-box}
#root :is(.app-shell,.hardware-login) :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea),
#root :is(.app-shell,.hardware-login) :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea):is(:focus,:focus-visible){outline:none!important;outline-offset:0!important;box-shadow:none!important}
#root .app-shell :where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea):is(:focus,:focus-visible){border:2px solid #1765ca!important}
#root .app-shell :is(.inline-search,.sale-search,.global-search),
#root .app-shell :is(.inline-search,.sale-search,.global-search):focus-within{outline:none!important;box-shadow:none!important}
#root .app-shell :is(.inline-search,.sale-search,.global-search)>input,
#root .app-shell :is(.inline-search,.sale-search,.global-search)>input:is(:focus,:focus-visible){border:0!important;outline:none!important;box-shadow:none!important}
#root .hardware-login .login-card label>div,
#root .hardware-login .login-card label>div:focus-within{outline:none!important;box-shadow:none!important}
#root .hardware-login .login-card input,
#root .hardware-login .login-card input:is(:focus,:focus-visible){border:0!important;outline:none!important;box-shadow:none!important}
.print-preview-overlay .print-preview-print{background:linear-gradient(180deg,#075fda,#0752bc)!important;border-color:#0752bc!important;color:#fff!important}
/* Buttons and links retain their independent keyboard-focus indicators. */
#root .app-shell :is(.card,.bill-panel,.settings-content,.product-panel,.access-panel,.report-chart,.payment-chart,.chart-card,.table-wrap){min-width:0;max-width:100%;box-sizing:border-box}
#root .app-shell :is(.form-grid,.settings-form,.user-fields,.sale-meta-grid,.sale-adjustment-row,.sale-discount-row,.company-profile-settings,.quote-meta,.quote-footer)>*,
#root .app-shell :is(.stats,.dashboard-grid,.report-stats,.report-breakdown,.report-charts,.stock-summary,.purchase-summary-grid,.purchase-live-total,.gstr-cards,.ledger-totals,.payment-analysis-body)>*{min-width:0}
#root .app-shell :is(.form-grid,.settings-form,.user-fields,.sale-meta-grid,.quote-meta) label :is(input:not([type=checkbox]):not([type=radio]),select,textarea){width:100%}
#root .app-shell :is(.page-header,.page-actions,.data-toolbar,.table-tools,.modal-actions,.modal-head,.modal-head-actions,.access-actions,.return-save-actions,.gstr-tool-row,.gstr-dates,.transaction-footer){flex-wrap:wrap;min-width:0;gap:10px}
#root .app-shell :is(.page-header,.card-head,.section-title)>div{min-width:0}
#root .app-shell :is(h1,h2,h3,label,.modal-note,.card-head p,.page-header p,.settings-nav button){overflow-wrap:anywhere}
#root .app-shell .page-actions{max-width:100%}
#root .app-shell :is(.inline-search,.sale-search,.global-search){min-width:0;max-width:100%}
#root .app-shell .table-wrap{overflow:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
#root .app-shell :is(.purchase-lines,.quotation-lines){max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
#root .app-shell :is(.data-toolbar,.table-tools) .btn{flex-shrink:0}
#root .app-shell .settings-nav{min-width:0;max-width:100%}
#root .app-shell .settings-nav button{flex-shrink:0}
#root .app-shell .ledger-party-grid{grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}
#root .app-shell .cart-item{flex-wrap:wrap}
#root .app-shell .cart-info{min-width:min(125px,100%)}
#root .app-shell .cart-info>b{white-space:normal;overflow-wrap:anywhere}
#root .app-shell .product-card h3{white-space:normal;overflow-wrap:anywhere}
#root .app-shell .product-card>div:not(.product-image){padding:12px 42px 12px 12px}
#root .app-shell .product-card small{display:block;line-height:1.5;overflow-wrap:anywhere}
#root .app-shell .cart-info>small{display:block;line-height:1.5}
#root .app-shell .price-mode-bar{max-width:100%;box-sizing:border-box;flex-wrap:wrap}
#root .app-shell .price-mode-buttons{min-width:0;max-width:100%}
#root .app-shell .price-mode-buttons button{min-width:0!important}
#root .app-shell .modal-backdrop{padding:12px;overflow:auto}
#root .app-shell .modal{width:min(1050px,100%);max-width:100%;max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);overflow:auto;box-sizing:border-box}
#root .app-shell .modal:not(.quotation-modal):not(.purchase-modal){width:min(680px,100%)}
#root .app-shell .modal-head{align-items:flex-start}
#root .app-shell .modal-head h2{flex:1 1 160px;min-width:0}
#root .app-shell .content>header{gap:10px}
#root .app-shell .header-actions{min-width:0;flex-shrink:0}
#root .app-shell .content>header>.global-search{flex:1 1 180px;max-width:480px}
#root .hardware-login{width:100%!important;max-width:100%!important;min-height:0!important;height:100vh!important;height:100dvh!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:flex-start!important;overflow:auto!important;box-sizing:border-box}
#root .hardware-login .login-card{flex:0 0 auto!important;box-sizing:border-box!important;margin:auto 0!important}
@media(max-width:1250px){
 #root .app-shell .sale-layout{grid-template-columns:minmax(0,1fr)}
 #root .app-shell .bill-panel{position:static}
 #root .app-shell .settings-layout{grid-template-columns:minmax(0,1fr)}
 #root .app-shell .settings-nav{flex-direction:row;overflow-x:auto;padding-bottom:5px}
 #root .app-shell .settings-nav button{white-space:nowrap}
 #root .app-shell .ledger-date-filter{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 #root .app-shell .stock-selector{grid-template-columns:repeat(2,minmax(0,1fr))}
 #root .app-shell .gstr-3b{grid-template-columns:repeat(3,minmax(0,1fr))}
 #root .app-shell .gstr-3b>div{grid-column:1/-1}
}
@media(max-width:1050px){
 #root .app-shell .dashboard-grid,#root .app-shell .report-charts,#root .app-shell .payment-analysis-body{grid-template-columns:minmax(0,1fr)}
 #root .app-shell .access-grid{grid-template-columns:minmax(0,1fr)}
 #root .app-shell .company-profile-settings{grid-template-columns:minmax(0,1fr)}
 #root .app-shell .report-breakdown{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
 #root .app-shell .sidebar{max-width:calc(100vw - 36px);overflow-y:auto;overscroll-behavior:contain}
 #root .app-shell .content{margin-left:0}
 #root .app-shell .settings-content{padding:18px}
}
@media(max-width:700px){
 #root .app-shell :is(.form-grid,.settings-form,.user-fields,.sale-meta-grid,.quote-meta,.quote-footer,.return-picker,.return-footer,.ledger-select,.ledger-date-filter){grid-template-columns:minmax(0,1fr)!important}
 #root .app-shell :is(.settings-form>label.wide,.user-fields .active-check,.user-fields .access-actions){grid-column:auto}
 #root .app-shell .return-save-actions{display:flex}
 #root .app-shell .quote-footer>div label{grid-template-columns:minmax(0,1fr) minmax(90px,120px)}
 #root .app-shell .settings-form{max-width:100%}
 #root .app-shell .gstr-dates{width:100%}
 #root .app-shell .gstr-dates label{min-width:0;flex:1 1 140px}
 #root .app-shell .payment-method>div{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){
 #root .app-shell main{padding:16px 12px 32px}
 #root .app-shell .page-header{align-items:flex-start}
 #root .app-shell .page-header p,#root .app-shell .page-actions .secondary{display:revert}
 #root .app-shell .content>header{height:auto;min-height:62px;padding:10px 12px;flex-wrap:wrap}
 #root .app-shell .content>header>.global-search{display:flex;order:3;flex-basis:100%;max-width:100%}
 #root .app-shell .table-tools .btn{font-size:12px}
 #root .app-shell .data-toolbar select{display:block;max-width:100%}
 #root .app-shell :is(.data-toolbar,.table-tools) .inline-search{flex-basis:100%;max-width:100%}
 #root .app-shell .settings-content{padding:14px}
 #root .app-shell .settings-submit{min-width:0;max-width:100%;white-space:normal}
 #root .app-shell .transaction-toolbar{padding:12px;gap:12px}
 #root .app-shell .transaction-footer .pager{display:flex;flex-wrap:wrap}
 #root .app-shell .pager button{min-width:0}
 /* Keep every existing table column reachable through local horizontal scroll. */
 #root .app-shell .data-card table{display:table!important}
 #root .app-shell .table-wrap table thead{display:table-header-group!important}
 #root .app-shell .data-card tbody{display:table-row-group!important}
 #root .app-shell .data-card tr{display:table-row!important;position:static;padding:0}
 #root .app-shell .data-card td{display:table-cell!important;position:static!important;padding:10px 12px!important}
 #root .app-shell .data-card .mobile-detail{display:none!important}
 #root .app-shell .data-card td .row-actions{flex-direction:row;flex-wrap:wrap}
 #root .app-shell .modal-actions{justify-content:flex-start}
 .print-preview-overlay .print-preview-toolbar{min-height:58px;height:auto;flex-wrap:wrap;padding:8px;gap:6px}
 .print-preview-overlay .print-preview-toolbar>b{flex-basis:100%;white-space:normal}
 .print-preview-overlay .print-preview-dialog{grid-template-rows:auto minmax(0,1fr);height:100dvh}
 #root .hardware-login{padding:18px 0!important}
 #root .hardware-login .login-card{max-width:calc(100% - 28px)!important;padding:26px 22px!important}
}
@media(max-width:430px){
 #root .app-shell :is(.stats,.stock-selector,.stock-summary,.purchase-summary-grid,.purchase-live-total,.report-stats,.report-breakdown,.ledger-totals,.gstr-cards,.payment-method-cards){grid-template-columns:minmax(0,1fr)}
 #root .app-shell .gstr-3b{grid-template-columns:repeat(2,minmax(0,1fr))}
 #root .app-shell .bill-save-row{grid-template-columns:minmax(0,1fr)}
 #root .app-shell .sale-adjustment-row{grid-template-columns:minmax(0,1fr)}
 #root .app-shell .sale-adjustment-row>label:first-child{grid-column:auto}
 #root .app-shell .return-save-actions .btn{white-space:normal}
 #root .app-shell .price-mode-buttons{grid-template-columns:repeat(2,minmax(0,1fr));margin-left:0;width:100%}
 #root .app-shell .permission-list{grid-template-columns:minmax(0,1fr)}
 #root .app-shell .cart-item{gap:8px}
 #root .app-shell .cart-price{margin-left:auto}
 #root .hardware-login .login-card>h2{font-size:28px!important}
}
}