/* v1.2.1 presentation only. WebView retains Android text zoom; no global scale. */
html { --fo-font-scale:1; --fo-nav-height:82px; }
header {height:auto;min-height:86px;padding-block:12px;gap:12px;flex-wrap:wrap}
header .brand {min-width:0;max-width:100%;overflow-wrap:break-word}
header .brand>div {min-width:0}
header.fo-header-wrap .lang-switch,body.rtl header.fo-header-wrap .lang-switch {position:static;transform:none;margin:0;max-width:100%;white-space:normal}
header.fo-header-wrap .brand {flex:1 1 200px}
header.fo-header-wrap .header-almarai-logo {flex-shrink:0}
button {white-space:normal;word-break:normal;overflow-wrap:normal;hyphens:none;max-width:100%;height:auto}
input,select,textarea {min-width:0;max-width:100%;line-height:1.35}
.card,.card-head,.page-head,.field,.product,.item-top,.history-row,.branch-card-head,.summary,.manage-row {min-width:0;overflow-wrap:break-word}
.card-head,.page-head,.branch-card-head,.summary {flex-wrap:wrap}
.card-head>*,.page-head>*,.item-top>*,.history-row>*,.manage-row>*,.product>* {min-width:0;max-width:100%}
.fields,.manage-grid,.filters {grid-template-columns:repeat(2,minmax(0,1fr))}
.search-row {flex-wrap:wrap}
.search-row input {flex:1 1 140px}
.search-row button {white-space:normal;flex-shrink:0}
.my-stores {align-items:stretch}
.my-stores button {min-width:48px;max-width:min(240px,80vw);overflow-wrap:break-word}
.shortcut-option {min-height:48px;overflow-wrap:break-word}
.shortcut-option input {min-height:20px}
.admin-accordion>summary {min-height:48px;overflow-wrap:break-word}
.admin-accordion>summary>span {min-width:0}
.accordion-chevron {flex-shrink:0}
.product {flex-wrap:wrap}
.product span:nth-child(2) {flex:1 1 120px}
.item-controls {flex-wrap:wrap}
.item-controls button {min-width:48px;min-height:48px}
.item-controls input {min-height:48px;width:max(85px,4em)}
.quantity-row>div {width:auto!important}
.quick-qty {width:100%!important;grid-template-columns:52px minmax(70px,1fr) 52px!important}
.quick-qty input {width:100%!important;height:auto!important;min-height:54px!important;padding-block:10px!important}
.quick-qty button {height:auto!important;align-self:stretch}
#quantity-workspace .quantity-row {display:flex!important;flex-wrap:wrap;gap:12px!important}
#quantity-workspace .quantity-row>div {flex:1 1 190px;min-width:min(190px,100%)!important}
#quantity-workspace #add {flex:1 1 130px;min-width:0!important}
nav button {white-space:normal;min-width:0;overflow-wrap:break-word}
nav button span {min-width:0;max-width:100%;line-height:1.3}
.brand-icon,.accordion-chevron {font-size:calc(24px / var(--fo-font-scale));flex-shrink:0}
.brand-icon {font-size:calc(32px / var(--fo-font-scale))}
.quick-qty button {font-size:calc(24px / var(--fo-font-scale))!important}
dialog {max-width:calc(100% - 24px);max-height:calc(var(--fo-visible-height,100dvh) - 24px);overflow:auto;overscroll-behavior:contain}
.dialog-head {align-items:start;min-width:0}.dialog-head h2 {min-width:0;overflow-wrap:break-word}
.dialog-head button,.item-top>button {flex-shrink:0;min-width:48px;min-height:48px}
#barcodeLinkModal {overflow:auto}.link-card {max-width:100%;max-height:calc(var(--fo-visible-height,100dvh) - 40px);overflow:auto}
.link-actions,.scan-guide-actions,.theme-options {display:flex;flex-wrap:wrap}.link-actions>*,.scan-guide-actions>*,.theme-options>* {flex:1 1 130px;min-width:0}
#review pre {max-width:100%;white-space:pre-wrap;overflow-wrap:break-word}
#owner-dashboard .owner-controls {flex-wrap:wrap;overflow:visible}
#owner-dashboard .owner-controls button {white-space:normal;flex:1 1 100px;min-width:0}
#owner-dashboard .owner-grid,#owner-dashboard .owner-evidence {grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr))}
#owner-dashboard .owner-row {flex-wrap:wrap;align-items:start}
#owner-dashboard .owner-row button {flex:1 1 180px;max-width:100%}
#owner-dashboard .owner-row span {overflow-wrap:break-word}
#owner-dashboard .owner-history {table-layout:fixed;overflow-wrap:break-word}
#owner-dashboard .owner-chart {height:auto;min-height:160px;max-width:100%}
#owner-dashboard progress {max-width:100%}
.fo-large-text .fields,.fo-large-text .manage-grid,.fo-large-text .filters {grid-template-columns:1fr}
.fo-large-text .manage-row {flex-wrap:wrap}
.fo-large-text #owner-dashboard .owner-grid,.fo-large-text #owner-dashboard .owner-evidence {grid-template-columns:1fr}
.fo-large-text .quantity-row>div {flex-basis:100%!important}
@media(max-width:600px){
 header {min-height:72px;padding-block:10px}
 .fields,.manage-grid,.filters {grid-template-columns:1fr}
 main {padding-bottom:calc(var(--fo-nav-height) + 30px)}
 nav {align-items:stretch}
 nav button {font-size:calc(20px / var(--fo-font-scale));min-height:48px}
 nav button span {font-size:12px}
 #toast {bottom:calc(var(--fo-nav-height) + 12px)}
}
@media(max-width:350px){main{padding-inline:10px}.card{padding:14px}.sku{padding:8px}.branch-actions{grid-template-columns:1fr}}
@media(max-height:420px){dialog{padding:14px}.scan-guide-body{padding:14px}}

/* Keep long owner headings inside the available column at enlarged text sizes. */
#owner-dashboard{min-width:0;overflow-wrap:break-word}
#owner-dashboard .owner-top>*{min-width:0;max-width:100%}
@media(max-width:1100px){.manage-grid{grid-template-columns:1fr}}
@media(max-width:600px){nav button span{font-size:max(12px,calc(12px / var(--fo-font-scale)))}}
/* At enlarged text sizes on narrow phones, keep navigation words together. */
@media(max-width:400px){
 .fo-large-text nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
 .fo-large-text nav button{flex-direction:row;justify-content:center;gap:8px}
 .fo-large-text nav button span{overflow-wrap:normal;word-break:normal}
}

/* Build 9: controls retain whole words; their layout supplies the space. */
button,button *,summary,summary *,label,.badge,nav button span {
 word-break:normal;overflow-wrap:normal;hyphens:none;
}
button {min-inline-size:min-content}
.actions {max-width:100%;flex-wrap:wrap;gap:8px}
.actions button {flex:1 0 auto;min-inline-size:min-content}
.history-row {flex-wrap:wrap}
.history-row>.actions {flex:0 1 auto;min-inline-size:min-content}
.history-row>div:first-child {flex:1 1 200px}
.history-row [data-inspect],.history-row [data-duplicate],
.history-row [data-resume],.history-row [data-delete-order] {white-space:nowrap}
.branch-actions {grid-template-columns:repeat(auto-fit,minmax(min(100%,15em),1fr))}
.link-actions>*,.scan-guide-actions>*,.theme-options>* {min-inline-size:min-content;flex-basis:auto}
#owner-dashboard .owner-controls button {min-inline-size:min-content;flex-basis:auto}
#quantity-workspace #add {min-inline-size:min-content!important;flex-basis:auto}
.admin-accordion>summary {flex-wrap:wrap}
.admin-accordion>summary>span:first-child {flex:0 0 auto}
.admin-accordion>summary>span:nth-child(2) {flex:1 1 min-content;min-inline-size:min-content}
nav button,nav button span {min-inline-size:min-content}
@media(max-width:600px){
 nav {flex-wrap:wrap}
 nav button {flex:1 0 auto}
 .history-row>.actions {align-self:stretch}
 .history-row>div:first-child {flex:0 1 auto}
}

/* Product descriptions are content: give their longest word a full row before
   using emergency wrapping for a genuinely overlong catalog identifier. */
.product span:nth-child(2) {flex-basis:min-content;overflow-wrap:break-word}

.shortcut-option {flex-wrap:wrap}
.shortcut-option>span {flex:1 1 min-content;min-width:0;max-width:100%;overflow-wrap:break-word}
/* Adaptive UI V2: flow at the user's font scale, never truncate labels. */
.page-head>*,.card-head>*,.item-top>*,.history-row>*,.manage-row>*,.dialog-head>*{min-width:0;max-width:100%}
.card-head h2{flex:1 1 10rem;line-height:1.5}
.card-head .badge{flex:0 1 auto;white-space:normal}
.item-top,.manage-row,.summary,.dialog-head,.item-controls{flex-wrap:wrap}
.item-name,.history-row h3,.channel-customer-row>span,.review-store,.shortcut-option>span{white-space:normal;word-break:normal;overflow-wrap:break-word;hyphens:none}
.channel-customer-row>span{min-width:0}
.channel-customer-form button,.channel-customer-row button{white-space:normal}
.field,.fields,.manage-stack,.owner-grid{min-width:0}
.product>span:nth-child(2){min-width:0;overflow-wrap:break-word}
.step{min-width:1.8em;min-height:1.8em;width:auto;height:auto;vertical-align:middle}
.fo-selected-customer{flex:1 1 140px;text-align:start;min-width:0;max-width:100%;white-space:normal;overflow-wrap:break-word;font-weight:400;color:inherit;border:1px solid #b7c9c0;background:var(--card,#fff);padding:12px;border-radius:9px;line-height:1.4}
.search-row input[readonly]#customer-search{display:none}
.search-row:has(#customer-search:not([readonly])) .fo-selected-customer{display:none}
.fo-large-text .fields,.fo-large-text .filters,.fo-large-text .manage-grid{grid-template-columns:1fr}
.fo-large-text .quantity-row{flex-wrap:wrap}
.fo-large-text .quantity-row>button{flex-basis:100%}
@media(max-width:360px){main{padding-inline:10px}.card{padding:14px}.search-row{gap:6px}.fo-selected-customer{flex-basis:100%}.card-head{align-items:flex-start}header{padding-inline:12px}}
.filters{grid-template-columns:minmax(0,1fr) minmax(0,200px)}
.filters>div{min-width:0;max-width:100%}
.filters input{min-width:0;max-width:100%}
.fo-large-text .filters{grid-template-columns:minmax(0,1fr)}
@media(max-width:600px){.filters{grid-template-columns:minmax(0,1fr)}}