/* Thanh công cụ đầu thẻ — ô tìm kiếm và nút thao tác phải nằm trên MỘT dòng ở mọi khổ màn.
   Đi cùng wwwroot/js/thanh-cong-cu.js. Xem CLAUDE.md §3.4g.

   Bật bằng cách thêm lớp `tcc` vào chính cái hàng đang có (`.row` trong `.card-header`) —
   đúng MỘT chữ mỗi view, không phải viết lại markup.

   ⚠️ Vì sao hàng cũ gãy: mọi khối đều là `.row` + `.col-md-*`. Lớp `col-md-*` chỉ đặt bề
   ngang TỪ 768px trở lên, nhưng `.row > *` của Bootstrap đặt sẵn `width: 100%` cho MỌI con —
   nên dưới 768px mỗi cột chiếm trọn một dòng và ô tìm bị tách khỏi cụm nút. Đo thật 24/09/2026
   ở khổ 390px: Receipts / Learners / Tournaments đều ra 3 dòng, header cao 171–211px. */

/* ── Dưới lg: một dòng, không xuống hàng ──────────────────────────────────────────────────
   Mốc là **lg (992px), không phải md**. Ở khoảng 768–991px lớp `col-md-*` đã có hiệu lực và
   chia hàng thành ba cột bằng nhau — cột giữa của `/Admin/Tournaments` chỉ được 256px cho ba
   nút có chữ nên nó tự gãy làm ba dòng. Đo thật ở 768×1024 trước khi sửa: header cao 125px,
   **3 dòng**. Chữ chỉ bị ẩn từ dưới md trở xuống (khối media thứ hai) — ở khổ máy tính bảng
   vẫn còn thừa chỗ cho chữ. Từ 992px trở lên KHÔNG đụng gì, bố cục máy tính giữ nguyên. */
@media (max-width: 991.98px) {

    .tcc {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center;
        gap: .5rem;
        margin-inline: 0;
    }

    /* Huỷ `width:100%` và máng `--bs-gutter-x` mà `.row > *` áp cho mọi con. */
    .tcc > * {
        flex: 0 0 auto;
        width: auto;
        max-width: none;
        padding-inline: 0;
    }

    /* Ô tìm ăn hết chỗ còn lại. `min-width: 0` là bắt buộc — mặc định của flex item là
       `min-width: auto` (lấy theo kích thước nội dung tối thiểu) nên nó KHÔNG chịu co, và
       chính nó mới là thứ đẩy cụm nút ra ngoài. */
    .tcc > .tcc-tim,
    .tcc > :has(input[type="text"]) {
        flex: 1 1 auto;
        min-width: 0;
    }

    .tcc > .tcc-tim .input-group,
    .tcc > .tcc-tim .form-control {
        min-width: 0;
    }

    /* Cụm nút: giữ nguyên bề ngang của mình, không bao giờ xuống dòng. */
    .tcc > .tcc-nut,
    .tcc > :has(> .btn) {
        display: flex;
        flex: 0 0 auto;
        flex-wrap: nowrap;
        gap: .375rem;
        justify-content: flex-end;
    }

    .tcc > .tcc-nut > .btn,
    .tcc > :has(> .btn) > .btn {
        flex: 0 0 auto;
    }

    /* ── Bộ lọc xuống dòng RIÊNG ──────────────────────────────────────────────────────────
       CỐ Ý không nhét ô lọc vào cùng dòng: ở 390px thì ô tìm + hai ô lọc + ba nút không đủ
       chỗ cho bất cứ ô nào đọc được. Lời hứa của thanh này là "ô tìm và nút KHÔNG tách nhau",
       không phải "cả header gói trong một dòng". */
    .tcc-co-loc {
        flex-wrap: wrap !important;
    }

    .tcc > .tcc-loc {
        flex: 1 0 100%;
        display: flex;
        gap: .5rem;
        order: 9;
    }

    /* ⚠️ `!important` ở đây là cần thật, không phải cho chắc: hai ô lọc của `/TMS/Topics` khai
       `style="min-width:11rem"` NGAY TRÊN THẺ, mà style nội tuyến thắng mọi luật trong file.
       Hai ô 176px cộng khe là 360px, rộng hơn chỗ còn lại ở khổ 390px — đo thật trước khi vá:
       nội dung tràn qua mép phải header **6px**. */
    .tcc > .tcc-loc > * {
        flex: 1 1 0;
        min-width: 0 !important;
    }
}

/* ── Dưới md: nút thu về CHỈ CÒN ICON ─────────────────────────────────────────────────────
   Tách khỏi khối trên vì đây là mốc khác: 768–991px vẫn còn chỗ cho chữ, dưới 768px thì không.
   Chữ do JS bọc vào `<span class="tcc-nhan">` — CSS không có cách nào ẩn một text node trần.
   Nút vẫn giữ `title` + `aria-label` (JS đặt theo đúng chữ đó) nên không thành nút câm. */
@media (max-width: 767.98px) {

    .tcc .tcc-nhan {
        display: none;
    }

    .tcc > .tcc-nut > .btn,
    .tcc > :has(> .btn) > .btn {
        padding-inline: .5rem;
    }

    /* Markup cũ để `me-1` / `me-sm-2` trên icon — bỏ chữ đi thì khe đó thành một mảng trống
       làm icon lệch khỏi tâm nút. */
    .tcc > .tcc-nut > .btn > i,
    .tcc > :has(> .btn) > .btn > i {
        margin-inline: 0 !important;
    }
}

/* ── Mục nằm trong nút thu gọn ────────────────────────────────────────────────────────────
   JS CHUYỂN chính thẻ nút vào `.dropdown-menu` (không tạo thẻ mới) nên mọi id, thuộc tính
   `data-*` và trình xử lý sự kiện đã gắn đều đi theo. Đổi lại phải tự trả nó về dáng một
   dòng của menu — nếu không thì trong menu là mấy cái nút màu nằm chồng nhau. */
.dropdown-menu > .tcc-muc {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: flex-start;
    text-align: start;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--bs-body-color);
    font-weight: 400;
    padding: .543rem 1rem;
}

    .dropdown-menu > .tcc-muc:hover,
    .dropdown-menu > .tcc-muc:focus {
        background: var(--bs-primary-bg-subtle);
        color: var(--bs-primary-text-emphasis);
    }

    /* Trong menu thì chữ phải hiện lại — luật ẩn nhãn ở trên bắt theo `.tcc` mà menu vẫn
       nằm trong `.tcc`. */
    .dropdown-menu > .tcc-muc > .tcc-nhan {
        display: inline !important;
    }

    .dropdown-menu > .tcc-muc > i {
        margin-inline: 0 .5rem !important;
        flex: none;
    }

/* Nút "⋮" do JS dựng — cùng dáng với nút ⋮ vốn có ở Views/Tournaments/Index.cshtml. */
.tcc-gom {
    flex: 0 0 auto;
}