/* Responsive presentation layer for mobile shells such as Capacitor.
   It intentionally preserves Gashi's structure, palette and typography. */
html{min-height:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{min-height:100dvh;overflow-x:hidden;overscroll-behavior-y:none;-webkit-tap-highlight-color:transparent}
button,input,select,textarea,.tab,.mode-btn,.si-btn,.store-view-option,.app-modal-btn{touch-action:manipulation}
.native-app input,.native-app select,.native-app textarea{scroll-margin-block:30dvh}
.mobile-network-status{position:fixed;z-index:9998;top:env(safe-area-inset-top);left:50%;transform:translate(-50%,0);max-width:calc(100vw - 24px);padding:7px 13px;border-radius:0 0 8px 8px;background:var(--red);color:var(--text);font-family:'DM Sans',sans-serif;font-size:12px;font-weight:700;text-align:center;box-shadow:0 4px 12px #0006;transition:opacity .2s ease,transform .2s ease;will-change:transform,opacity}
.mobile-network-status.is-online{opacity:0;pointer-events:none;transform:translate(-50%,-120%);transition-delay:2s}
.screen{min-height:100dvh}
.tab-bar,.filter-tabs,.tbl-wrap,.prix-tbl-wrap,.store-order-table-wrap,.supplier-hist-table-wrap{-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;contain:paint}
.native-app .mobile-view-enter{animation:mobile-view-enter .16s ease-out both}
@keyframes mobile-view-enter{from{opacity:.72;transform:translateY(4px)}to{opacity:1;transform:none}}
.tab:focus-visible,.btn:focus-visible,.btn-full:focus-visible,.btn-login:focus-visible,.theme-btn:focus-visible,.logout-btn:focus-visible,.mode-btn:focus-visible,.store-view-icon:focus-visible,.store-view-option:focus-visible,.app-modal-btn:focus-visible,.sup-btn:focus-visible,.ftab:focus-visible{outline:2px solid var(--red);outline-offset:2px}

@media(max-width:767px){
  body{font-size:15px}
  .screen.active{height:100dvh;min-height:100dvh;overflow:hidden}
  .native-app.keyboard-open .screen.active{height:100svh;min-height:100svh}
  #loginScreen{min-height:100dvh;height:auto;overflow-y:auto;justify-content:center;padding:calc(28px + env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left))}
  #loginScreen>div:first-child{top:calc(12px + env(safe-area-inset-top))!important;right:max(12px,env(safe-area-inset-right))!important}
  .login-box{max-width:430px}
  .login-logo{margin-bottom:24px}.login-logo .g img{max-width:min(270px,78vw)}.login-logo p{font-size:13px;line-height:1.45}
  .mode-toggle{gap:7px;margin-bottom:20px}.mode-btn{min-height:48px;font-size:12px;line-height:1.2;padding:10px 5px}
  .lg{margin-bottom:15px}.lg label{font-size:11px;line-height:1.35;margin-bottom:7px}.lg select,.lg input{min-height:48px;padding:11px 13px;font-size:16px}.btn-login{min-height:52px;margin-top:5px}
  #homeResetWrap button{min-height:44px!important}
  .app-header{height:auto;min-height:58px;padding:calc(7px + env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) 7px max(10px,env(safe-area-inset-left));display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
  .app-header .logo{min-width:0;font-size:16px;gap:7px;overflow:hidden}.app-header .logo>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.logo .g,.logo .g img{width:36px;height:36px}
  .app-header>div:last-child{min-width:0;gap:6px!important}.wk-badge{max-width:31vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:5px 7px}.theme-btn,.logout-btn{min-width:44px;min-height:44px;justify-content:center;padding:7px 9px}
  .tab-bar{scroll-snap-type:x proximity;scroll-padding-inline:max(8px,env(safe-area-inset-left))}.tab-list{width:max-content;min-width:100%;padding-left:max(8px,env(safe-area-inset-left));padding-right:max(8px,env(safe-area-inset-right))}.tab{min-height:46px;padding:10px 13px;font-size:13px;scroll-snap-align:start}
  .content{min-width:0;padding:12px max(10px,env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch}
  #storeFooter{padding:10px max(10px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))!important;flex-shrink:0}#storeFooter .btn-full{min-height:50px}
  .sec{min-width:0;font-size:17px;line-height:1.2;padding-top:11px}.sec.store-order-sec>span,.view-title-row>div:first-child{min-width:0;overflow-wrap:anywhere}
  .prod-name{font-size:14px;line-height:1.4;margin-bottom:7px}.order-row{padding:10px 0}.order-fields{gap:8px;align-items:stretch;flex-wrap:wrap}.fg{min-width:calc(50% - 4px)}.fg label,.pfg label{font-size:10px;line-height:1.3}
  .fi,.pfg input,.pfg select,.maj-field input,.maj-field select,.psel{min-height:44px;font-size:16px}input[type=date].fi{font-size:16px;min-width:0}
  .si-wrap{min-height:46px}.si-btn,.store-order-wrap.compact .si-btn{width:44px;min-width:44px;height:44px}.si-inp,.store-order-wrap.compact .si-inp{height:44px;font-size:16px}
  .btn,.add-btn,.btn-full{min-height:44px}.btn{padding:10px 14px;font-size:13px}.btn-row{flex-wrap:wrap}.btn-row .btn{flex:1 1 140px}.ftab{min-height:40px;padding:8px 13px;font-size:12px}.store-view-icon,.sec.store-order-sec .store-view-icon{width:44px;height:44px;font-size:17px}.store-view-option{min-height:44px;font-size:13px}
  .sum-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sum-card{min-width:0;padding:12px 10px}.sum-card .val{font-size:22px;overflow-wrap:anywhere}.irow{align-items:flex-start;gap:10px;font-size:12px;line-height:1.45;padding:6px 0}.irow .k,.irow .v{min-width:0;overflow-wrap:anywhere}.irow .v{text-align:right}
  .pf-grid,.maj-grid{grid-template-columns:minmax(0,1fr)}.promo-card,.ibox,.maj-panel,.hrow,.ver-item,.supplier-hist-card{border-radius:8px}.ver-item{align-items:flex-start;gap:10px}.ver-item>div:first-child{min-width:0;overflow-wrap:anywhere}.hstats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tbl-wrap,.prix-tbl-wrap,.store-order-table-wrap,.supplier-hist-table-wrap,.reception-mode-quick .rec-quick-wrap{max-width:100%;border-radius:8px;scrollbar-width:thin}.tbl{min-width:960px;table-layout:fixed}.tbl td,.tbl th{font-size:11px}.tbl td.prod-c{width:156px;min-width:156px;max-width:156px;box-shadow:4px 0 7px #00000030}.tbl thead tr.r1 th.prod-h{box-shadow:4px 0 7px #00000030}.prod-label{font-size:11px}
  .prix-tbl{min-width:700px;font-size:12px}.prix-tbl th:first-child,.prix-tbl td:first-child{min-width:160px;box-shadow:4px 0 7px #00000030}.prix-tbl th,.prix-tbl td{padding:8px 7px}.pi,.si{width:58px;min-height:40px;font-size:16px}.sup-btn{min-height:38px;padding:7px 9px;font-size:10px}
  .store-order-table{min-width:880px;font-size:12px}.store-order-table th,.store-order-table td{padding:8px}.store-order-table .mini-inp{min-height:42px;font-size:16px}.supplier-hist-table{font-size:12px}.supplier-hist-table th,.supplier-hist-table td{padding:9px 8px}
  .view-title-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;flex-wrap:initial}.view-title-row .view-title-main{font-size:18px;overflow-wrap:anywhere}.supplier-hist-grid{grid-template-columns:minmax(0,1fr)}.supplier-hist-card-actions{grid-template-columns:minmax(0,1fr)}.supplier-hist-card-actions .wide{grid-column:auto}
  .app-modal{align-items:flex-end;padding:0}.app-modal-box{width:100%;max-width:none;max-height:min(88dvh,760px);border-radius:14px 14px 0 0;border-bottom:0;padding-bottom:env(safe-area-inset-bottom)}.app-modal-header{padding:16px 16px 11px}.app-modal-title{font-size:20px}.app-modal-body{padding:14px 16px;font-size:15px}.app-modal-message{font-size:14px;line-height:1.55}.app-modal-input{min-height:48px;font-size:16px}.app-modal-actions{padding:12px 16px}.app-modal-btn{min-height:46px;flex:1;padding:10px 12px;font-size:14px}.supplier-hist-detail-modal .app-modal-box{width:100%;max-width:none}.toast{bottom:calc(14px + env(safe-area-inset-bottom));white-space:normal;width:max-content;text-align:center;line-height:1.4}
}
@media(max-width:420px){
  .app-header{gap:5px}.app-header .logo{font-size:15px;letter-spacing:1px}.logo .g,.logo .g img{width:32px;height:32px}.wk-badge{display:none}.theme-btn,.logout-btn{min-width:44px;min-height:44px;padding:6px 8px}.mode-btn{font-size:11px}.content{padding-left:9px;padding-right:9px}.fg{min-width:100%}.sum-card .lbl{font-size:10px;line-height:1.25}.hstats{grid-template-columns:minmax(0,1fr)}.app-modal-actions{gap:7px}
}
@media(min-width:768px) and (max-width:1100px){
  .content{padding:16px}.app-header{padding-inline:18px}.tab-list{padding-inline:14px}.order-fields{gap:8px}.si-btn{width:42px;min-width:42px;height:42px}.si-inp{height:42px;font-size:15px}.fi{min-height:42px;font-size:14px}.btn,.tab,.theme-btn,.logout-btn,.store-view-icon{min-height:42px}.supplier-hist-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(hover:none) and (pointer:coarse){.tab:hover,.store-view-icon:hover,.store-view-option:hover,.ver-item:hover,.supplier-hist-card:hover{transform:none}.tab,.btn,.btn-full,.btn-login,.theme-btn,.logout-btn,.mode-btn,.si-btn,.ftab,.sup-btn,.store-view-icon,.store-view-option,.app-modal-btn{cursor:default}.tab:active,.btn:active,.btn-full:active,.btn-login:active,.theme-btn:active,.logout-btn:active,.mode-btn:active,.si-btn:active,.ftab:active,.sup-btn:active,.store-view-icon:active,.store-view-option:active,.app-modal-btn:active{opacity:.72;transform:scale(.98);transition-duration:.04s}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
@media(max-height:500px) and (orientation:landscape){
  #loginScreen{padding-top:calc(14px + env(safe-area-inset-top));padding-bottom:calc(14px + env(safe-area-inset-bottom));justify-content:flex-start}
  .login-logo{margin-bottom:12px}.login-logo .g img{max-width:min(190px,40vw)}.login-logo p{font-size:12px;margin-top:6px}
  .mode-toggle{margin-bottom:12px}.mode-btn{min-height:42px}
  .lg{margin-bottom:10px}.lg select,.lg input{min-height:42px}.btn-login{min-height:46px}
  .app-header{min-height:48px}.tab{min-height:40px;padding:8px 12px}
  .content{padding-top:10px}
}

/* First native launch — isolated from the legacy application. */
.mobile-onboarding{position:fixed;inset:0;z-index:10000;display:flex;flex-direction:column;min-height:100dvh;background:var(--black);color:var(--text);overflow:hidden;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
.onboarding-progress{position:absolute;z-index:3;top:calc(22px + env(safe-area-inset-top));left:max(24px,env(safe-area-inset-left));right:max(24px,env(safe-area-inset-right));display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;height:3px}.onboarding-progress span{display:block;border-radius:4px;background:var(--border);transition:background .25s ease}.onboarding-progress span.active{background:var(--red)}
.onboarding-skip{position:absolute;z-index:4;top:calc(36px + env(safe-area-inset-top));right:max(19px,env(safe-area-inset-right));height:44px;padding:0 8px;border:0;background:transparent!important;box-shadow:none!important;color:var(--muted)!important;font-family:'DM Sans',sans-serif;font-size:13px}
.onboarding-visual{position:relative;flex:0 0 53dvh;min-height:330px;overflow:hidden;background:var(--dark)}.onboarding-visual>img{width:100%;height:100%;object-fit:cover;object-position:center 30%;opacity:.72}.onboarding-shade{position:absolute;inset:0;background:linear-gradient(to bottom,transparent 36%,var(--black) 100%)}
.onboarding-mark{position:absolute;left:max(24px,env(safe-area-inset-left));bottom:17px;width:48px;height:48px;display:grid;place-items:center;background:var(--red);border-radius:8px;color:#fff;font-family:'Bebas Neue',sans-serif;font-size:34px;line-height:1;box-shadow:0 8px 24px #0008}
.onboarding-content{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:18px;margin-top:-2px;padding:4px max(24px,env(safe-area-inset-right)) max(15px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));background:var(--black);animation:onboarding-enter .25s ease-out;will-change:transform,opacity}.onboarding-eyebrow{display:block;margin-bottom:6px;color:var(--red);font-family:'DM Sans',sans-serif;font-size:11px;font-weight:600;letter-spacing:1.4px}.onboarding-copy h1{max-width:330px;font-family:'Bebas Neue',sans-serif;font-size:42px;line-height:.98;letter-spacing:0;font-weight:400}.onboarding-copy h1 em{color:var(--red);font-style:normal}.onboarding-copy p{max-width:330px;margin-top:11px;color:var(--muted);font-size:16px;line-height:1.5}
.onboarding-actions{display:flex;flex-direction:column;gap:7px}.onboarding-next{width:100%;height:54px;border:0;border-radius:10px;background:var(--red)!important;color:#fff!important;box-shadow:none!important;font-family:'Bebas Neue',sans-serif;font-size:19px;letter-spacing:1.2px}.onboarding-next span{font-family:'DM Sans',sans-serif;font-size:20px}.onboarding-next:active{background:var(--red-d)!important;transform:scale(.99)}.onboarding-actions>p{text-align:center;color:var(--muted);font-size:10px;letter-spacing:.5px}@keyframes onboarding-enter{from{opacity:.35;transform:translateX(10px)}to{opacity:1;transform:none}}
@media(max-height:720px){.onboarding-visual{flex-basis:45dvh;min-height:260px}.onboarding-copy h1{font-size:36px}.onboarding-copy p{font-size:14px;line-height:1.4}.onboarding-next{height:50px}}/* Responsive v2 : tableau Prix lisible sur téléphone (colonne produit compacte et figée) */
@media(max-width:767px){
  .prix-tbl{table-layout:auto}
  .prix-tbl th:first-child,.prix-tbl td:first-child{width:128px;min-width:128px!important;max-width:128px;white-space:normal;overflow-wrap:anywhere;z-index:2}
  .tbl-wrap,.prix-tbl-wrap,.store-order-table-wrap{max-height:72vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .prix-tbl thead th{position:sticky;top:0;z-index:1}
  .tbl thead tr.r1 th{position:sticky;top:0;z-index:3}
  .tbl thead tr.r1 th.prod-h{z-index:5}
  .tbl thead tr.r2 th{position:sticky;top:25px;z-index:3;background:#161618}
  .store-order-table thead th,.supplier-hist-table thead th{position:sticky;top:0;z-index:2;background:var(--card)}
  .prix-tbl thead th:first-child{z-index:3}
}
@media(max-width:420px){
  .prix-tbl th:first-child,.prix-tbl td:first-child{width:112px;min-width:112px!important;max-width:112px;font-size:11px}
}

/* ── Téléphone : navigation principale en barre fixe en bas (style application) ── */
@media (max-width:767px){
  #storeScreen>.content,#adminScreen>.content,#supplierScreen>.content{order:5}
  #storeScreen>#storeFooter{order:6;border-top:1px solid var(--border)}
  #storeScreen>.tab-bar:has(#storeNavCommande),#adminScreen>.tab-bar,#supplierScreen>.tab-bar{
    order:10;flex-shrink:0;border-bottom:none!important;border-top:1px solid var(--border);
    background:var(--dark)!important;padding-bottom:env(safe-area-inset-bottom);
    box-shadow:0 -4px 14px rgba(0,0,0,.18);scroll-snap-type:none}
  #storeScreen>.tab-bar:has(#storeNavCommande) .tab-list,#adminScreen>.tab-bar .tab-list,#supplierScreen>.tab-bar .tab-list{
    display:flex;width:100%;min-width:100%;gap:0;padding:0 max(2px,env(safe-area-inset-right)) 0 max(2px,env(safe-area-inset-left))}
  #storeScreen>.tab-bar:has(#storeNavCommande) .tab,#adminScreen>.tab-bar .tab,#supplierScreen>.tab-bar .tab{
    flex:1 1 0;min-width:50px;min-height:58px;padding:7px 2px 6px;white-space:normal;text-align:center;
    font-size:10.5px;line-height:1.25;border-bottom:none;border-top:3px solid transparent;overflow-wrap:anywhere}
  #storeScreen>.tab-bar:has(#storeNavCommande) .tab.active,#adminScreen>.tab-bar .tab.active,#supplierScreen>.tab-bar .tab.active{
    border-top-color:var(--red);background:var(--card2)}
  #storeScreen>.tab-bar:has(#storeNavCommande) .tab:active,#adminScreen>.tab-bar .tab:active,#supplierScreen>.tab-bar .tab:active{transform:none;opacity:.7}
  #storeScreen>.content,#adminScreen>.content,#supplierScreen>.content{padding-bottom:18px}
  .app-header{position:relative;z-index:3;box-shadow:0 2px 10px rgba(0,0,0,.15);padding-top:max(8px,env(safe-area-inset-top))}
  html,body{overscroll-behavior:none;-webkit-tap-highlight-color:transparent}
  .native-app.keyboard-open #storeScreen>.tab-bar:has(#storeNavCommande),.native-app.keyboard-open #adminScreen>.tab-bar,.native-app.keyboard-open #supplierScreen>.tab-bar{display:none}
}
@media (max-width:767px){
  #storeScreen>.tab-bar .tab,#adminScreen>.tab-bar .tab,#supplierScreen>.tab-bar .tab{overflow-wrap:normal;word-break:keep-all}
  #adminScreen>.tab-bar{overflow-x:auto}
  #adminScreen>.tab-bar .tab-list{width:max-content}
  #adminScreen>.tab-bar .tab{flex:0 0 auto;min-width:68px;padding-inline:8px;font-size:10px;white-space:nowrap}
}