/* Component UI dùng chung (Alpine) — tách khỏi site.css để cả webapp trường (_Layout) lẫn trang quản trị
   nền tảng (Areas/Platform/_PlatformLayout) cùng nạp: searchSelect / multiSelect (ls-select), pagination()
   (ls-pagination), chọn nhiều + xoá hàng loạt (ls-bulkbar, js/components/bulk-delete.js). */

/* ═══════════════════════════════════════════════════════════════════════════
   ls-select — Alpine.js 3 reusable select components
   Dùng cho multiSelect() và searchSelect()
   ═══════════════════════════════════════════════════════════════════════════ */

.ls-select { position: relative; }

/* Trigger */
.ls-select__trigger {
  display: flex;
  align-items: center;
  gap: .375rem;
  width: 100%;
  min-height: 34px;
  padding: .3rem .5rem .3rem .65rem;
  font-size: .875rem;
  color: var(--bs-body-color);
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  cursor: pointer;
  text-align: left;
  transition: border-color .15s, box-shadow .15s;
  user-select: none;
  line-height: 1.4;
}
.ls-select__trigger:hover               { border-color: var(--bs-primary); }
.ls-select__trigger.is-open             { border-color: var(--bs-primary); box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb),.18); }
.ls-select__trigger:focus-visible       { outline: none; border-color: var(--bs-primary); box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb),.18); }

.ls-select__label    { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .2rem; }
.ls-select__ph       { color: var(--bs-secondary-color); white-space: nowrap; }
.ls-select__chevron  { flex-shrink: 0; font-size: .7rem; color: var(--bs-secondary-color); transition: transform .18s; }
.ls-select__trigger.is-open .ls-select__chevron { transform: rotate(180deg); }

/* Tags */
.ls-select__tag {
  display: inline-flex;
  align-items: center;
  gap: .15rem;
  padding: .05rem .35rem;
  font-size: .75rem;
  font-weight: 500;
  background: rgba(var(--bs-primary-rgb),.12);
  color: var(--bs-primary);
  border-radius: 100px;
  max-width: 130px;
}
.ls-select__tag > span     { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ls-select__tag-x {
  flex-shrink: 0;
  width: 13px; height: 13px;
  border: none; background: transparent;
  color: inherit; opacity: .7;
  cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; line-height: 1; font-size: .7rem;
}
.ls-select__tag-x:hover    { opacity: 1; background: rgba(var(--bs-primary-rgb),.2); }
.ls-select__tag--more      { background: rgba(var(--bs-secondary-rgb),.1); color: var(--bs-secondary-color); }

/* Dropdown */
.ls-select__dropdown {
  position: absolute;
  top: calc(100% + 3px);
  left: 0;
  z-index: 1060;
  min-width: 100%;
  width: max-content;
  max-width: min(300px, 90vw);
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  box-shadow: 0 .5rem 1.25rem rgba(0,0,0,.12);
  overflow: hidden;
}

/* Search bar inside dropdown */
.ls-select__search {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem .65rem;
  border-bottom: 1px solid var(--bs-border-color-translucent);
  position: sticky; top: 0; z-index: 1;
  background: var(--bs-body-bg);
}
.ls-select__search i        { color: var(--bs-secondary-color); font-size: .8rem; flex-shrink: 0; }
.ls-select__search input    { flex: 1; border: none; outline: none; background: transparent; font-size: .875rem; color: var(--bs-body-color); min-width: 0; }
.ls-select__search input::placeholder { color: var(--bs-secondary-color); }

/* Options list */
.ls-select__options { max-height: 210px; overflow-y: auto; padding: .2rem 0; }

/* Single option row */
.ls-select__option {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .38rem .7rem;
  font-size: .875rem;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: background .1s;
}
.ls-select__option:hover,
.ls-select__option.is-focused      { background: rgba(var(--bs-primary-rgb),.07); }
.ls-select__option.is-selected     { color: var(--bs-primary); font-weight: 500; }
.ls-select__option.is-disabled     { opacity: .45; cursor: not-allowed; pointer-events: none; }
.ls-select__check                  { margin-left: auto; font-size: .8rem; color: var(--bs-primary); }
.ls-select__text                   { display: flex; flex-direction: column; min-width: 0; }  /* không đổi line-height: dropdown không sublabel giữ nguyên chiều cao */
.ls-select__sub                    { font-size: .75rem; line-height: 1.3; color: var(--bs-secondary-color); font-weight: 400; overflow: hidden; text-overflow: ellipsis; }

/* Option row bên trong 1 nhóm (chế độ groups/groupKey) — thụt lề rõ so với group-header
   để trông như <option> lồng trong <optgroup> chuẩn của trình duyệt */
.ls-select__option--grouped { padding-left: 1.45rem; }

/* Group header row — chế độ phân nhóm searchSelect (groups/groupKey)
   Style giống <optgroup> label chuẩn trình duyệt: đậm, không uppercase,
   màu nổi bật hơn option thường để rõ ràng đây là tiêu đề nhóm, không phải lựa chọn */
.ls-select__group-header {
  padding: .35rem .7rem .15rem;
  font-size: .8rem;
  font-weight: 700;
  color: var(--bs-body-color);
  pointer-events: none;           /* không phải 1 lựa chọn có thể click */
  user-select: none;
}
.ls-select__group-header:not(:first-child) {
  margin-top: .25rem;
  border-top: 1px solid var(--bs-border-color-translucent);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ls-pagination — Alpine.js pagination() component
   Views/Shared/Components/_Pagination.cshtml
   ═══════════════════════════════════════════════════════════════════════════ */

/*  .form-select dựng sẵn padding-right 2.25rem để chừa chỗ cho mũi tên
    (background-image đặt tại "right .75rem center", rộng 16px).
    Nếu override padding bằng shorthand mà không khai báo lại padding-right +
    background-position/size thì mũi tên sẽ vẽ ĐÈ LÊN chữ — select ở đây rất hẹp
    (width:auto ≈ 37px) nên chữ "20"/"200" bị mũi tên phủ hoàn toàn.
    → thu nhỏ mũi tên và chừa đúng chỗ cho nó.                                  */
.ls-pagination__size {
  width: auto;
  padding: .2rem 1.35rem .2rem .45rem;
  font-size: .8rem;
  background-position: right .4rem center;
  background-size: 10px 8px;
  flex-shrink: 0;
}

.ls-pagination {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .2rem;
}

.ls-pagination__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 28px;
  height: 28px;
  padding: 0 .4rem;
  font-size: .8rem;
  line-height: 1;
  white-space: nowrap;
  color: var(--bs-body-color);
  background: transparent;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  cursor: pointer;
  transition: background .1s, border-color .1s;
}
.ls-pagination__btn:hover:not(:disabled)  { background: rgba(var(--bs-primary-rgb),.08); border-color: var(--bs-primary); }
.ls-pagination__btn:disabled              { opacity: .4; cursor: not-allowed; }

.ls-pagination__num.is-active {
  color: #fff;
  background: var(--bs-primary);
  border-color: var(--bs-primary);
  font-weight: 500;
}
.ls-pagination__num.is-active:hover { background: var(--bs-primary); }

.ls-pagination__ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 28px;
  height: 28px;
  color: var(--bs-secondary-color);
  font-size: .8rem;
}

/*  Wrapper <span> do x-for sinh ra quanh mỗi số trang: cho phép co giãn đúng,
    không để flex-shrink bóp nhỏ hơn nút bên trong (nút sẽ tràn ra ngoài span
    và chồng lên nút kế tiếp).                                                  */
.ls-pagination > span {
  display: inline-flex;
  flex-shrink: 0;
}

.ls-select__divider { height: 1px; background: var(--bs-border-color-translucent); margin: .2rem 0; }
.ls-select__empty   { padding: .65rem; text-align: center; color: var(--bs-secondary-color); font-size: .875rem; }
.ls-select__more    { padding: .4rem; font-size: .8125rem; }   /* lazyload — dòng "Đang tải thêm..." cuối danh sách */

/* ── Chọn nhiều + xóa hàng loạt trên trang danh sách (js/components/bulk-delete.js) ── */
.ls-col-check { width: 36px; text-align: center; vertical-align: middle; }
.ls-col-check .form-check-input { margin: 0; cursor: pointer; }
.ls-bulkbar {
  position: sticky; bottom: 12px; z-index: 1020; margin-top: 12px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px 10px 16px;
  border-radius: 14px; background: var(--bs-body-bg); border: 1px solid var(--bs-primary);
  box-shadow: 0 12px 32px rgba(16, 24, 40, .18);
}
.ls-bulkbar__count { font-weight: 600; display: flex; align-items: center; gap: 8px; margin-right: auto; }
.ls-bulkbar__count b {
  min-width: 28px; height: 28px; padding: 0 8px; border-radius: 999px; display: inline-grid; place-items: center;
  background: var(--bs-primary); color: #fff; font-size: .85rem;
}
@media (max-width: 576px) { .ls-bulkbar { bottom: 8px; } }