/* Giao diện mobile / tablet */
#mobile-menu-btn{display:none;font-size:20px;padding:6px 12px;flex-shrink:0}
#sidebar-backdrop{display:none}

@media (max-width: 900px){
  #app-container{height:100dvh}
  #mobile-menu-btn{display:inline-flex;align-items:center}
  #sidebar{position:fixed;top:0;left:0;bottom:0;width:270px;max-width:82vw;
    transform:translateX(-100%);transition:transform .25s ease;z-index:200;overflow-y:auto}
  body.sidebar-open #sidebar{transform:translateX(0);box-shadow:0 0 40px rgba(0,0,0,.5)}
  #sidebar-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:150;
    opacity:0;pointer-events:none;transition:opacity .25s;display:block}
  body.sidebar-open #sidebar-backdrop{opacity:1;pointer-events:auto}
  #main-wrapper{width:100%;min-width:0}

  #top-bar{flex-wrap:wrap;height:auto;padding:8px 12px;gap:8px}
  .top-bar-left{display:flex;align-items:center;gap:8px;flex:1 1 100%;min-width:0}
  .page-title-display{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .quick-search-box{flex:1;min-width:0}
  .quick-search-box input{width:100%}
  .kbd-hint,.role-switcher-label{display:none}
  .top-bar-right{display:flex;flex-wrap:wrap;gap:6px;width:100%;align-items:center}
  .top-bar-right .btn{flex:1;padding:8px 6px;font-size:12px;white-space:nowrap}
  .top-bar-right #theme-toggle-btn{flex:0 0 auto}
  .role-select{max-width:100%;font-size:12px}

  #view-content{padding:12px}
  .form-row{flex-direction:column;grid-template-columns:1fr!important;gap:0}
  .form-control{font-size:16px} /* tránh iOS tự zoom */
  .calculator-card{padding:14px}

  /* Bảng cuộn ngang */
  .data-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}

  /* Lưới nhiều cột -> 1-2 cột */
  [class*="grid"]{max-width:100%}
  .stats-grid,.kpi-grid,.dashboard-grid,.summary-grid{grid-template-columns:repeat(2,1fr)!important}

  /* Modal toàn màn hình */
  .modal-dialog{width:100%!important;max-width:100%!important;height:100dvh;max-height:100dvh;
    margin:0;border-radius:0}
  .modal-body{overflow-y:auto;-webkit-overflow-scrolling:touch}
  .modal-footer{flex-wrap:wrap;gap:8px}
  .modal-footer .btn{flex:1}
  .btn{min-height:38px}
}

@media (max-width: 520px){
  .stats-grid,.kpi-grid,.dashboard-grid,.summary-grid{grid-template-columns:1fr!important}
  .login-card{width:92%;padding:22px}
}

@media (max-width: 900px){
  /* Ghi đè các lưới inline nhiều cột trong index.html */
  #view-content div[style*="grid-template-columns"]{grid-template-columns:1fr!important}
  #suppliers-cards-grid{grid-template-columns:1fr!important}
  .modal-dialog div[style*="grid-template-columns"]{grid-template-columns:1fr!important}
  #view-content div[style*="display:flex"],#view-content div[style*="display: flex"]{flex-wrap:wrap}
}