/* Responsive overrides — load AFTER Bootstrap to win specificity ties.
   Breakpoints follow Bootstrap 4: xs <576, sm <768, md <992, lg <1200. */

/* --- Bảng: phòng các <table> chưa bọc .table-responsive --- */
@media (max-width: 767.98px) {
  .app-content .table,
  .main-content .table,
  table.table.table-bordered,
  table.table.table-hover {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* --- Form group: ép col-md-* về full-width trên xs --- */
@media (max-width: 575.98px) {
  .form-group[class*="col-md-"],
  .form-group[class*="col-sm-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .form-group {
    margin-bottom: 0.75rem;
  }
}

/* --- Sidebar overlay: đảm bảo trên navbar khi mở ở mobile --- */
@media (max-width: 991.98px) {
  .app-sidebar__overlay {
    z-index: 1040;
  }
  .app-sidebar {
    z-index: 1050;
  }
}

/* --- Action buttons trong cột bảng: stack vertical trên xs --- */
@media (max-width: 575.98px) {
  td .btn + .btn,
  td a.btn + a.btn {
    margin-top: 4px;
  }
  td .btn-group { flex-wrap: wrap; }
}

/* --- Login card: bớt padding mép trên màn hẹp --- */
@media (max-width: 575.98px) {
  .container-login100,
  .wrap-login100 {
    padding: 15px !important;
  }
  .wrap-login100 {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 0 !important;
  }
}

/* --- Header app: tránh tràn khi user name dài --- */
@media (max-width: 575.98px) {
  .app-header__logo { font-size: 0.95rem; }
  .app-nav__item { padding: 0 8px; }
}

/* --- Image upload preview: giới hạn để không tràn form --- */
@media (max-width: 575.98px) {
  img[id*="output"],
  .form-group img {
    max-width: 100%;
    height: auto;
  }
}

/* --- Print template không bị ảnh hưởng (chỉ media screen above) --- */