/* Mobile Admin: keep navigation reachable and wide tables inside their panels. */
.cms-main{min-width:0}
@media(max-width:768px){
  .cms-layout{display:block}
  .cms-sidebar{display:flex;position:relative;inset:auto;width:100%;padding:14px 16px 8px;overflow:visible;border-right:0;border-bottom:1px solid #ffffff12}
  .sidebar-brand{padding:0;margin:0 85px 10px 0;min-height:40px}
  .sidebar-brand h2{font-size:15px}
  .sidebar-brand p{font-size:10px}
  .sidebar-nav{flex-direction:row;gap:6px;overflow-x:auto;overscroll-behavior-x:contain;padding-bottom:5px;scrollbar-width:none}
  .sidebar-nav::-webkit-scrollbar{display:none}
  .sidebar-nav .nav-caption{display:none}
  .sidebar-nav .nav-item{width:auto;flex:0 0 auto;min-height:44px;white-space:nowrap;font-size:12px;padding:10px 12px}
  .sidebar-nav .category-scroll-list{flex:0 0 200px;max-height:150px;margin:0;padding-left:10px}
  .cms-sidebar>.signout-btn{position:absolute;right:12px;top:14px;min-height:40px;margin:0;font-size:11px}
  .cms-main{width:100%;margin:0;padding:18px 16px max(28px,env(safe-area-inset-bottom));min-height:60vh}
  .main-header>div{min-width:0;max-width:100%}
  .page-title{font-size:21px;overflow-wrap:anywhere}
  .page-subtitle{white-space:normal;overflow-wrap:anywhere}
  .header-actions{flex-wrap:wrap;gap:8px}
  .cms-main button{min-height:40px}
  .stats-grid-row{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .stats-grid-row>div{min-width:0;padding:14px!important;overflow-wrap:anywhere}
  .stats-grid-row>div:last-child:nth-child(odd){grid-column:1/-1}
  .filters-container select,.filters-container form{width:100%;max-width:100%!important;min-width:0;flex-basis:100%!important}
  .filters-container input{min-width:0}
  .filters-bar select{max-width:100%;flex:1 1 140px;min-width:0}
  .cms-main input,.cms-main select,.cms-main textarea{font-size:16px!important}
  .apps-grid{grid-template-columns:minmax(0,1fr)}
  .app-card{min-width:0}
  .app-card-bundle{flex-wrap:wrap;gap:6px;overflow-wrap:anywhere}
  .report-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .report-card{padding:14px}
  .report-card>strong{font-size:21px}
  .report-filters label.report-search{min-width:0;flex-basis:100%}
  .report-pagination{gap:10px;flex-wrap:wrap}
  .overlay,.confirm-overlay{padding:10px}
  .modal,.modal-edit-dialog,.media-detail-dialog{max-height:calc(100dvh - 20px);overflow-y:auto;padding:18px;overflow-wrap:anywhere}
  .modal.modal-app-details{padding:0;max-height:calc(100dvh - 20px)}
  .modal input:not([type=checkbox]),.modal select,.modal textarea{font-size:16px!important}
  .modal-app-details .modal-header-close{min-width:44px;min-height:44px}
  .app-details-tabs button{min-height:44px}
  .integration-card{padding:14px}
  .integration-card-head{flex-wrap:wrap}
  .integration-product-fields{grid-template-columns:minmax(0,1fr)}
  .integration-footer:has(button[type=submit]){bottom:-18px;margin-bottom:-18px;padding-bottom:max(18px,env(safe-area-inset-bottom))}
  .integration-switch{min-height:44px;display:flex;align-items:center;gap:8px}
  .integration-switch input[type=checkbox]{flex-shrink:0;width:20px;height:20px}
}
@media(max-width:600px){
  /* The Users list uses cards on phones; retain the original header for assistive tech. */
  .cms-main:has(.stats-grid-row) .filters-container+div{border:0!important;background:none!important;overflow:visible!important}
  .cms-main:has(.stats-grid-row) .filters-container+div>table{display:block}
  .cms-main:has(.stats-grid-row) .filters-container+div>table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .cms-main:has(.stats-grid-row) .filters-container+div>table tbody{display:grid;gap:14px}
  .cms-main:has(.stats-grid-row) .filters-container+div>table tbody tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px;padding:16px;background:#101625;border:1px solid #ffffff12!important;border-radius:12px}
  .cms-main:has(.stats-grid-row) .filters-container+div>table td{display:block;min-width:0;padding:0!important;overflow-wrap:anywhere;font-size:13px!important;text-align:left!important}
  .cms-main:has(.stats-grid-row) .filters-container+div>table td:before{display:block;color:#8490a5;font-size:11px;margin-bottom:5px}
  .cms-main:has(.stats-grid-row) .filters-container+div>table td:nth-child(1),
  .cms-main:has(.stats-grid-row) .filters-container+div>table td:nth-child(2),
  .cms-main:has(.stats-grid-row) .filters-container+div>table td:nth-child(7),
  .cms-main:has(.stats-grid-row) .filters-container+div>table td:nth-child(8),
  .cms-main:has(.stats-grid-row) .filters-container+div>table td[colspan]{grid-column:1/-1}
  .cms-main:has(.stats-grid-row) .filters-container+div>table td:nth-child(2):before{content:'UDID'}
  .cms-main:has(.stats-grid-row) .filters-container+div>table td:nth-child(3):before{content:'Credit còn lại'}
  .cms-main:has(.stats-grid-row) .filters-container+div>table td:nth-child(4):before{content:'AI hoàn thành / Tổng job'}
  .cms-main:has(.stats-grid-row) .filters-container+div>table td:nth-child(5):before{content:'Credit thực dùng AI'}
  .cms-main:has(.stats-grid-row) .filters-container+div>table td:nth-child(6):before{content:'Tiền mua production'}
  .cms-main:has(.stats-grid-row) .filters-container+div>table td:nth-child(7):before{content:'Hoạt động gần nhất'}
  .cms-main:has(.stats-grid-row) .filters-container+div>table td:last-child>div{justify-content:flex-start!important;flex-wrap:wrap}
  .cms-main:has(.stats-grid-row) .filters-container+div>table code{display:block;padding:0!important;background:none!important}
}