/* ══ Mobile layout (phones & small tablets) ══════════════════════
   الشريط العلوي بيتحول لزر ☰ بيفتح قائمة، والمحتوى بيتظبط على عرض الشاشة */
.nav-burger{display:none}
body:has(#app[style*="block"]) #lang-float{display:none!important}
@media (max-width:820px){
  html,body{overflow-x:hidden}
  /* ── Navbar ── */
  .navbar{flex-wrap:nowrap!important;height:56px!important;padding:0 10px!important;gap:8px!important;overflow:visible!important}
  .navbar>button:not([class]){display:none!important}            /* أسهم التمرير ‹ › */
  .navbar-brand span{font-size:16px}
  .navbar>.nav-burger{display:flex;align-items:center;justify-content:center;width:42px;height:40px;flex-shrink:0;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.1);color:#fff;border-radius:10px;font-size:20px;cursor:pointer;order:-1}
  .nav-right{gap:6px!important;margin-inline-start:auto}
  .nav-user,.nav-clock small{display:none!important}
  .nav-clock{min-width:0!important;padding:4px 8px!important}
  .btn-nav,.btn-theme,.btn-contact{padding:7px 10px!important;font-size:12px!important}
  /* القائمة المنسدلة */
  .nav-tabs{position:fixed!important;top:56px;inset-inline:0;bottom:0;z-index:99;order:0!important;flex:none!important;
    display:grid!important;grid-template-columns:1fr 1fr;align-content:start;gap:8px!important;padding:14px!important;
    background:var(--nav-bg);overflow-y:auto!important;overflow-x:hidden!important;
    transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .18s,transform .18s,visibility .18s}
  body.nav-open .nav-tabs{transform:none;opacity:1;visibility:visible}
  body.nav-open{overflow:hidden}
  .nav-tab{font-size:14px!important;padding:13px 12px!important;text-align:start;background:rgba(255,255,255,.07)!important;white-space:normal!important}
  .nav-tab.active{background:var(--primary-l)!important}
  /* ── Pages ── */
  .page{padding:10px!important}
  .page :where(*){min-width:0}
  .page [style*="display:flex"],.page [style*="display: flex"]{flex-wrap:wrap}
  .page [style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr)!important}
  .page [style*="grid-template-columns"]:has(> :nth-child(3)){grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .page [style*="grid-column"]{grid-column:1/-1!important}
  .page [style*="grid-template-columns"]:has(> .card),.page [style*="grid-template-columns"]:has(> form){grid-template-columns:minmax(0,1fr)!important}
  .kpi-grid,.form-grid-2,.form-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .form-grid-2,.form-grid-3{grid-template-columns:minmax(0,1fr)!important}
  .page input:not([type=checkbox]):not([type=radio]),.page select,.page textarea{max-width:100%}
  .page [style*="width:"][style*="px"]:not(img):not(canvas):not(svg){max-width:100%}
  .card{overflow-x:auto;padding:14px!important}
  .table-wrap,.page table{max-width:100%}
  .page table{display:block;overflow-x:auto;white-space:nowrap}
  .page h1,.page h2{font-size:18px}
  /* ── Modals ── */
  .modal-overlay{padding:8px!important;align-items:flex-start!important}
  .modal{width:100%!important;max-width:100%!important;max-height:calc(100vh - 16px)!important;overflow:auto}
  .modal-body [style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr)!important}
  .modal-footer{flex-wrap:wrap;gap:8px}
  /* ── POS ── */
  .pos-layout{display:flex!important;flex-direction:column;height:auto!important}
  .pos-products{display:contents!important}
  .pos-products-header{order:1}
  .pos-grid{order:2}
  .pos-invoice{order:3;max-height:none!important;height:auto!important}
  .pos-inv-items{max-height:none!important;min-height:90px}
  #pos-checkout-panel{order:4;height:auto!important;max-height:none!important;overflow:visible!important;padding-bottom:12px}
  #pos-checkout-panel>div{height:auto!important;max-height:none!important}
  .pos-grid{grid-template-columns:repeat(auto-fill,minmax(105px,1fr))!important;max-height:52vh;overflow:auto}
  .toast-wrap{left:8px!important;right:8px!important}
}
@media (max-width:480px){
  .nav-clock,.btn-contact{display:none!important}
  .navbar-brand span{display:none}
}
@media (max-width:380px){
  .page [style*="grid-template-columns"]:has(> :nth-child(3)),.kpi-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}
  .btn-theme#btn-lang,.btn-contact{display:none!important}
}