/* Responsive tweaks */
@media (max-width: 991.98px){
  /* Only hide the desktop sidebar (inside app-shell). Mobile sidebar is an overlay. */
  .app-shell > .sidebar{display:none;}
}

@media (max-width: 575.98px){
  .floating-tools{right:12px; bottom:12px;}
  .breadcrumb{padding:.55rem .75rem;}
  main{
    padding:14px !important;
    padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important;
  }
  .header-search{max-width:100%; flex-basis:auto;}
  .user-pill{max-width:75vw;}
  .user-pill .price{font-size:.95rem;}
  .mobile-sidebar{width:min(86vw, 320px);}
  .admin-actions{display:flex; justify-content:flex-end; gap:8px; flex-wrap:wrap;}
  .admin-actions .btn{flex:0 0 auto;}
}

/* Orders table -> cards on mobile */
@media (max-width: 767.98px){
  .table-responsive.mobile-cards table,
  .table-responsive.mobile-cards thead,
  .table-responsive.mobile-cards tbody,
  .table-responsive.mobile-cards th,
  .table-responsive.mobile-cards td,
  .table-responsive.mobile-cards tr{display:block; width:100%;}
  .table-responsive.mobile-cards thead{display:none;}
  .table-responsive.mobile-cards tr{
    background:var(--mau-card);
    border:1px solid var(--mau-vien);
    border-radius:var(--radius-vua);
    box-shadow:var(--shadow-nhe);
    padding:12px;
    margin:0 0 12px 0;
  }
  .table-responsive.mobile-cards td{
    border:none!important;
    padding:6px 0!important;
    display:flex;
    justify-content:space-between;
    gap:12px;
  }
  .table-responsive.mobile-cards td::before{
    content:attr(data-label);
    color:var(--mau-chu-phu);
    font-weight:700;
  }
}