/*
   Responsive shell dùng chung cho màn nghiệp vụ.
   Quy tắc an toàn: desktop 24 inch (>=1280px) không có override nào. Các màn chỉ
   chuyển bố cục khi vùng làm việc hẹp, còn bảng số liệu được cuộn ngang thay vì mất dữ liệu.
*/

.resp-secondary { }
.ft-btn .ft-label { }

@media (max-width: 1280px) {
  .ft-bar.resp-compact { gap:4px; padding-left:6px; padding-right:6px; }
  .ft-bar.resp-compact .ft-grp { gap:4px; }
  .ft-bar.resp-compact .ft-btn { padding-left:9px; padding-right:9px; }
  .ft-bar.resp-compact .ft-label { display:none; }
}

@media (max-width: 1100px) {
    .ws-top { min-width: 0; height: auto; min-height: 42px; flex-wrap: wrap; gap: 6px; padding-top: 5px; padding-bottom: 5px; }
    .ws-top .ws-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ws-top .ws-filters { min-width: 0; flex: 1 1 360px; justify-content: flex-end; flex-wrap: wrap; }
    .ws-hdr-actions { margin-left: auto; }
}

@media (max-width: 900px) {
    .ws-body { flex-direction: column; overflow: auto; }
    .ws-body > .ws-left {
        width: 100% !important;
        min-width: 0 !important;
        max-height: 42vh;
        flex: 0 0 auto;
        border-right: 0;
        border-bottom: 1px solid var(--line, #e5e7eb);
    }
    .ws-body > .ws-main { width: 100%; min-width: 0; flex: 1 0 auto; }
    .ws-left-head { position: sticky; top: 0; z-index: 2; }
    .ft-bar { height: auto; min-height: 34px; flex-wrap: wrap; padding-top: 4px; padding-bottom: 4px; }
    .ft-grp { flex-wrap: wrap; gap: 5px; }
}

@media (max-width: 700px) {
    .ws-top .ws-filters { flex-basis: 100%; justify-content: flex-start; }
    .ws-top .ws-filters .ws-flabel,
    .ws-top .ws-filters label.resp-secondary,
    .resp-secondary { display: none !important; }
    .ws .card-b, .ws .card-h { min-width: 0; }
    .ws .table-responsive, .ws .table-wrap, .ws .grid-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

@media (max-width: 520px) {
    .ws-top { padding-left: 8px; padding-right: 8px; }
    .ws-top .ws-title { font-size: var(--fs-md, 14px); }
    .ft-btn { padding: 0 9px; }
    .ft-btn .ft-label { display: none; }
}