/* Bảng cuộn ngang dùng chung (bms-table-scroll.js). Màu, bo góc, đổ bóng lấy từ token của BMS Design System. */

/* E. Gợi ý kéo bảng bằng chuột (chức năng kéo đã có trong app.js). */
@media (hover: hover) and (pointer: fine) {
  .bms-hs.bms-hs-overflow { cursor: grab; }
  .bms-hs.bms-hs-overflow.is-drag-scrolling,
  .bms-hs.bms-hs-overflow.is-dragging { cursor: grabbing; user-select: none; }
  .bms-hs.bms-hs-overflow :is(input, textarea, [contenteditable="true"]) { cursor: text; }
  .bms-hs.bms-hs-overflow :is(button, a, select, label, summary) { cursor: pointer; }
  .bms-hs.bms-hs-overflow thead th { cursor: ew-resize; }
}

/* D. Cột ghim. */
.bms-hs .bms-hs-pin-l,
.bms-hs .bms-hs-pin-r { position: sticky; z-index: 2; background-color: var(--bms-surface); }
.bms-hs .bms-hs-pin-l { left: var(--bms-hs-left, 0); }
.bms-hs .bms-hs-pin-r { right: 0; }
/* Tiêu đề cột ghim nằm trên tiêu đề dính của BMS (z 20) và cột mã lệnh của SRM (z 30). */
.bms-hs thead th:is(.bms-hs-pin-l, .bms-hs-pin-r) { z-index: 31; background-color: var(--bms-surface-subtle); }
.bms-hs tr:hover > :is(.bms-hs-pin-l, .bms-hs-pin-r) { background-color: var(--bms-surface-subtle); }
.bms-hs .bms-hs-pin-l.bms-hs-pin-edge { box-shadow: inset -1px 0 0 var(--bms-border); }
.bms-hs .bms-hs-pin-r.bms-hs-pin-edge { box-shadow: inset 1px 0 0 var(--bms-border); }
.bms-hs.bms-hs-scrolled .bms-hs-pin-l.bms-hs-pin-edge { box-shadow: inset -1px 0 0 var(--bms-border), 8px 0 10px -8px color-mix(in srgb, var(--bms-text) 22%, transparent); }
.bms-hs.bms-hs-more .bms-hs-pin-r.bms-hs-pin-edge { box-shadow: inset 1px 0 0 var(--bms-border), -8px 0 10px -8px color-mix(in srgb, var(--bms-text) 22%, transparent); }

/* A + F. Lớp phủ trên bảng: bóng mép, nút cuộn, nút toàn màn hình. */
.bms-hs-overlay { position: fixed; z-index: 15; pointer-events: none; }
.bms-hs-overlay[hidden] { display: none; }
.bms-hs-fade { position: absolute; top: 0; bottom: 0; width: 28px; opacity: 0; transition: opacity .15s ease; }
.bms-hs-fade.is-left { left: var(--bms-hs-pin-left, 0); background: linear-gradient(90deg, color-mix(in srgb, var(--bms-text) 12%, transparent), transparent); }
.bms-hs-fade.is-right { right: var(--bms-hs-pin-right, 0); background: linear-gradient(-90deg, color-mix(in srgb, var(--bms-text) 12%, transparent), transparent); }
.bms-hs-overlay.is-scrolled .bms-hs-fade.is-left,
.bms-hs-overlay.has-more .bms-hs-fade.is-right { opacity: 1; }
.bms-hs-nav,
.bms-hs-full {
  position: absolute; display: grid; place-items: center; padding: 0;
  border: 1px solid var(--bms-border-strong); border-radius: var(--bms-radius-round);
  background: var(--bms-surface); color: var(--bms-text); box-shadow: var(--bms-shadow-2);
  cursor: pointer; pointer-events: none; opacity: 0; transition: opacity .15s ease;
}
.bms-hs-nav { top: 50%; width: 36px; height: 36px; transform: translateY(-50%); }
.bms-hs-nav.is-left { left: calc(var(--bms-hs-pin-left, 0px) + 10px); }
.bms-hs-nav.is-right { right: calc(var(--bms-hs-pin-right, 0px) + 10px); }
.bms-hs-full { top: -13px; right: -13px; width: 28px; height: 28px; }
.bms-hs-overlay.has-own-toggle .bms-hs-full { display: none; }
.bms-hs-nav svg,
.bms-hs-full svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bms-hs-nav:hover,
.bms-hs-full:hover { border-color: var(--bms-primary); color: var(--bms-primary); }
.bms-hs-nav:focus-visible,
.bms-hs-full:focus-visible { opacity: 1; pointer-events: auto; outline: 2px solid var(--bms-primary); outline-offset: 2px; }
/* Nút ẩn (opacity 0) không được nhận chạm: trên điện thoại chúng luôn ẩn và từng che nút Sửa/Xóa ở mép phải bảng. */
@media (hover: hover) and (pointer: fine) {
  .bms-hs-overlay.is-hover.is-scrolled .bms-hs-nav.is-left,
  .bms-hs-overlay.is-hover.has-more .bms-hs-nav.is-right,
  .bms-hs-overlay.is-hover .bms-hs-full,
  .bms-hs-overlay.is-in-full .bms-hs-full { opacity: 1; pointer-events: auto; }
}
.bms-hs-overlay:not(.is-overflow) .bms-hs-nav { display: none; }
.bms-hs-overlay.is-in-full { z-index: calc(var(--bms-z-drawer) - 5); }

/* Nút "Toàn màn hình" đặt trong thanh công cụ của bảng. */
.bms-hs-full-toggle { display: inline-flex; align-items: center; gap: var(--bms-space-2); }
.bms-hs-full-toggle svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bms-hs-full-toggle.is-icon { justify-content: center; min-width: 40px; padding-inline: var(--bms-space-2); }
.bms-hs-full-toggle[aria-pressed="true"] { border-color: var(--bms-primary); color: var(--bms-primary); }

/* B. Thanh cuộn nổi. */
.bms-hs-floatbar {
  position: fixed; bottom: 0; z-index: 15; padding: 4px 6px calc(4px + env(safe-area-inset-bottom, 0px));
  border: 1px solid var(--bms-border); border-bottom: 0; border-radius: var(--bms-radius-1) var(--bms-radius-1) 0 0;
  background: color-mix(in srgb, var(--bms-surface) 94%, transparent); box-shadow: var(--bms-shadow-2); backdrop-filter: blur(6px);
}
.bms-hs-floatbar[hidden] { display: none; }
.bms-hs-floatbar-track { height: 14px; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; scrollbar-color: var(--bms-border-strong) transparent; }
.bms-hs-floatbar-track > div { height: 1px; }

/* F. Toàn màn hình: khung chứa phủ kín màn hình, tiêu đề cột đứng yên khi cuộn dọc. */
html.bms-hs-no-scroll,
html.bms-hs-no-scroll body { overflow: hidden; }
.bms-hs-fullscreen {
  position: fixed !important; inset: 0; z-index: calc(var(--bms-z-drawer) - 10);
  display: flex !important; flex-direction: column; gap: var(--bms-space-3);
  width: auto !important; max-width: none !important; height: auto !important; margin: 0 !important;
  padding: calc(var(--bms-space-4) + env(safe-area-inset-top, 0px)) var(--bms-space-5) calc(var(--bms-space-4) + env(safe-area-inset-bottom, 0px)) !important;
  border: 0 !important; border-radius: 0 !important; background: var(--bms-surface) !important; overflow: hidden;
}
.bms-hs-fullscreen > * { flex: 0 0 auto; }
.bms-hs-fullscreen .bms-hs,
.bms-hs.bms-hs-fullscreen { flex: 1 1 auto; min-height: 0; max-height: none !important; overflow: auto !important; }
.bms-hs-fullscreen .bms-hs thead th,
.bms-hs.bms-hs-fullscreen thead th { position: sticky; top: 0; z-index: 20; }
.bms-hs-fullscreen .bms-hs thead th:is(.bms-hs-pin-l, .bms-hs-pin-r),
.bms-hs.bms-hs-fullscreen thead th:is(.bms-hs-pin-l, .bms-hs-pin-r) { z-index: 31; }