

/* Account-style Display Settings slider scale */
:root{--ml-admin-scale:1}
body{font-size:calc(13px * var(--ml-admin-scale));}
.table th,.table td{padding:calc(8px * var(--ml-admin-scale)) calc(10px * var(--ml-admin-scale))!important;}
.card{padding:calc(14px * var(--ml-admin-scale))!important;}
input,select,textarea{min-height:calc(36px * var(--ml-admin-scale));}



/* ===== ADMIN FULL MOBILE VIEW FIX ===== */
html, body{
  max-width:100%;
  overflow-x:hidden;
}
body{
  -webkit-text-size-adjust:100%;
}
img, video, canvas{
  max-width:100%;
  height:auto;
}
.adm{
  min-height:100vh;
}
.hamb{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:44px;
  min-height:44px;
  touch-action:manipulation;
}
.side{
  z-index:9999;
}
.top{
  z-index:9000;
}
.content{
  width:100%;
}
.card,
.box,
.panel,
.form-card,
.table-card,
.ds-card,
.pwa-card{
  max-width:100%;
}
input,select,textarea,button{
  max-width:100%;
}

/* Desktop/table safe overflow */
.table-wrap,
.table-responsive,
.list-wrap,
.orders-table,
.products-table{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
table{
  max-width:100%;
}
.table{
  width:100%;
}

/* Product/order/action rows */
.actions,
.quick-actions,
.ds-btns,
.pwa-grid,
.ds-grid{
  max-width:100%;
}

/* Mobile layout */
@media (max-width: 900px){
  html, body{
    width:100%;
    overflow-x:hidden!important;
  }

  .adm{
    display:block!important;
    grid-template-columns:none!important;
    width:100%!important;
    min-width:0!important;
  }

  .side{
    position:fixed!important;
    top:0!important;
    left:0!important;
    bottom:0!important;
    width:min(84vw, 315px)!important;
    max-width:315px!important;
    height:100vh!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    background:#fff!important;
    transform:translateX(-105%)!important;
    transition:transform .25s ease!important;
    box-shadow:0 14px 40px rgba(15,23,42,.24)!important;
    padding-bottom:30px!important;
  }

  body.open .side,
  .adm.open .side,
  .side.open{
    transform:translateX(0)!important;
  }

  body.open::after{
    content:"";
    position:fixed;
    inset:0;
    background:rgba(15,23,42,.28);
    z-index:9990;
  }

  body.open .side{
    z-index:9999!important;
  }

  .main{
    width:100%!important;
    max-width:100%!important;
    margin-left:0!important;
    padding-left:0!important;
    overflow-x:hidden!important;
  }

  .top{
    position:sticky!important;
    top:0!important;
    width:100%!important;
    min-height:58px!important;
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
    padding:8px 10px!important;
    background:#fff!important;
    border-bottom:1px solid #eef1f5!important;
    overflow:hidden!important;
  }

  .top b,
  .top .title,
  .top span{
    min-width:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }

  .top .btn,
  .top button,
  .top a{
    flex:0 0 auto!important;
    white-space:nowrap!important;
  }

  .top .hamb{
    flex:0 0 44px!important;
    border-radius:12px!important;
  }

  .content,
  main.content{
    width:100%!important;
    max-width:100%!important;
    padding:12px 10px 90px!important;
    margin:0!important;
    overflow-x:hidden!important;
  }

  h1,h2,.page-title{
    font-size:22px!important;
    line-height:1.18!important;
    margin:10px 0 14px!important;
  }

  .stats,
  .summary-grid,
  .dashboard-stats,
  .cards,
  .grid,
  .quick-actions,
  .pwa-grid,
  .ds-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    width:100%!important;
  }

  .stat,
  .card,
  .box,
  .panel,
  .form-card,
  .table-card,
  .ds-card,
  .pwa-card{
    width:100%!important;
    max-width:100%!important;
    margin-left:0!important;
    margin-right:0!important;
    border-radius:16px!important;
    padding:12px!important;
    overflow:hidden!important;
  }

  form{
    width:100%!important;
    max-width:100%!important;
  }

  .filters,
  .filter-row,
  .search-row,
  .form-row,
  .row,
  .input-row{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    width:100%!important;
  }

  input,
  select,
  textarea{
    width:100%!important;
    min-width:0!important;
    height:42px!important;
    font-size:14px!important;
    border-radius:12px!important;
  }

  textarea{
    height:auto!important;
    min-height:80px!important;
  }

  .btn,
  button,
  input[type=submit]{
    min-height:42px!important;
    border-radius:12px!important;
    padding:9px 12px!important;
    font-size:14px!important;
  }

  .table-wrap,
  .table-responsive,
  .orders-table,
  .products-table,
  .list-wrap{
    width:100%!important;
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch!important;
    border-radius:14px!important;
  }

  table,
  .table{
    min-width:720px!important;
    width:max-content!important;
  }

  .table th,
  .table td,
  table th,
  table td{
    white-space:nowrap!important;
    font-size:13px!important;
    padding:8px 10px!important;
  }

  /* Product cards mobile */
  .product-card,
  .prod-card,
  .item-card{
    width:100%!important;
    display:grid!important;
    grid-template-columns:88px 1fr auto!important;
    gap:10px!important;
    align-items:center!important;
  }

  .product-card img,
  .prod-card img,
  .item-card img{
    width:80px!important;
    height:80px!important;
    object-fit:cover!important;
    border-radius:12px!important;
  }

  .floating-add,
  .fab,
  .add-float{
    position:fixed!important;
    right:18px!important;
    bottom:72px!important;
    z-index:8000!important;
  }

  .side .brand,
  .side a,
  .side .menu a{
    font-size:16px!important;
    line-height:1.25!important;
  }

  .side a,
  .side .menu a{
    padding:10px 14px!important;
    min-height:40px!important;
  }
}

/* Very small phones */
@media (max-width: 420px){
  .top{
    gap:6px!important;
    padding:7px 8px!important;
  }
  .top b{
    max-width:120px!important;
  }
  .top .btn,
  .top a,
  .top button{
    font-size:12px!important;
    padding:7px 9px!important;
  }
  .content, main.content{
    padding:10px 8px 86px!important;
  }
  h1,h2,.page-title{
    font-size:20px!important;
  }
  .product-card,
  .prod-card,
  .item-card{
    grid-template-columns:74px 1fr auto!important;
  }
  .product-card img,
  .prod-card img,
  .item-card img{
    width:68px!important;
    height:68px!important;
  }
}
